/* ════════════════════════════════════════════════════════════════
   CF Menu Cart — drawer + ícono toggle
   ────────────────────────────────────────────────────────────────
   • Diseño boutique por defecto (Playfair Display + Tenor Sans,
     paleta rojo #a8363c / marrón #735a33).
   • Cada propiedad la puede sobrescribir el panel de Elementor —
     los selectores Elementor usan `!important` donde hace falta
     para defeat global theme styles (button:hover rojo, etc.).
═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   Toggle (ícono + hello text + contador)
   ────────────────────────────────────────────────────────────── */

.cf-mc-toggle-wrap{
    display:block;
    text-align:center;
    overflow:visible;
    /* Permite que Advanced > Border > Radius se propague desde
       .elementor-widget-container hasta el botón visible. */
    border-radius:inherit;
}

/* Reset agresivo del botón — evita que el theme/Elementor inyecte
   button styles que disfracen nuestro ícono (background, border,
   shadow, transform). */
button.cf-mc-toggle{
    background:transparent;
    border:0;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
}
.cf-mc-toggle{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0;
    background:transparent;
    border:0;
    cursor:pointer;
    line-height:1;
    color:#1b1c1a;
    text-decoration:none;
    transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
    font:inherit;
    overflow:visible;
    /* Hereda border-radius del wrapper (que a su vez hereda del
       widget-container de Elementor). Cualquier control de Style
       que setee border-radius gana sobre este `inherit`. */
    border-radius:inherit;
}
/* Defensa contra `body button:hover { color: red }` típico de Elementor
   y temas — siempre que el control de Elementor no haya inyectado un
   color explícito, conservamos el color base del ícono. */
.cf-mc-toggle:hover,
.cf-mc-toggle:focus,
.cf-mc-toggle:active{
    color:#735a33;
    text-decoration:none;
    background:transparent;
    box-shadow:none;
    outline:none;
}
.cf-mc-toggle:focus-visible{
    outline:2px solid currentColor;
    outline-offset:2px;
}

.cf-mc-hello{
    font-size:14px;
    line-height:1;
    color:inherit;
    white-space:nowrap;
}

.cf-mc-toggle .cf-mc-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:0;
    overflow:visible;
}
.cf-mc-toggle svg{
    width:28px;
    height:28px;
    fill:currentColor;
    display:block;
}
.cf-mc-toggle i{
    font-size:28px;
    line-height:1;
}

/* ──────────────────────────────────────────────────────────────
   Item Indicator (Bubble / Plain / None)
   La clase cf-mc-indicator-{value} la inyecta Elementor via
   `prefix_class` en el wrapper del widget.
   ────────────────────────────────────────────────────────────── */

.cf-mc-count{
    position:absolute;
    top:-6px;
    right:-8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border-radius:999px;
    background:#a8363c;
    color:#fff;
    font-size:11px;
    font-weight:600;
    line-height:1;
    text-align:center;
    box-sizing:border-box;
    pointer-events:none;
    z-index:2;
    /* Siempre visible cuando count > 0 — ningún parent debe
       ocultarlo accidentalmente. */
    opacity:1;
    visibility:visible;
    transition:transform .25s ease-out;
}
.cf-mc-count[hidden]{
    display:none !important;
}

/* Bubble (default — ya cubierto arriba) */
.cf-mc-indicator-bubble .cf-mc-count{
    /* defaults arriba sirven */
}

/* Plain — sólo el número, sin fondo, posición integrada */
.cf-mc-indicator-plain .cf-mc-count{
    position:static;
    background:transparent !important;
    border-radius:0;
    padding:0;
    min-width:0;
    height:auto;
    font-size:13px;
    font-weight:500;
    color:inherit;
    margin-left:2px;
}

/* None — ocultar completamente */
.cf-mc-indicator-none .cf-mc-count{
    display:none !important;
}

/* Animación "pop" cuando se añade/cambia un ítem.
   La clase la aplica JS tras `wc_fragments_refreshed`. */
@keyframes cf-mc-count-pop{
    0%   { transform:scale(.6); }
    55%  { transform:scale(1.2); }
    100% { transform:scale(1); }
}
.cf-mc-count.cf-mc-pop{
    animation:cf-mc-count-pop .35s ease-out;
}

/* ──────────────────────────────────────────────────────────────
   Drawer + overlay
   ────────────────────────────────────────────────────────────── */

.cf-mc-drawer{
    position:fixed;
    inset:0;
    z-index:999999;
    pointer-events:none;
    font-family:'Tenor Sans','Segoe UI',sans-serif;
}
.cf-mc-drawer.cf-mc-open{ pointer-events:auto; }

.cf-mc-bd{
    position:absolute;
    inset:0;
    background:rgba(27,28,26,.45);
    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
    opacity:0;
    transition:opacity .38s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
}
.cf-mc-drawer.cf-mc-open .cf-mc-bd{
    opacity:1;
    pointer-events:auto;
}

.cf-mc-panel{
    position:absolute;
    top:0;
    right:0;
    width:480px;
    max-width:85vw;
    height:100dvh;
    background:#fefefe;
    box-shadow:-24px 0 60px rgba(0,0,0,.09);
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
    will-change:transform;
    box-sizing:border-box;
}
.cf-mc-drawer.cf-mc-open .cf-mc-panel{
    transform:translateX(0);
}
.cf-mc-drawer[data-position="left"] .cf-mc-panel{
    right:auto;
    left:0;
    transform:translateX(-100%);
    box-shadow:24px 0 60px rgba(0,0,0,.09);
}
.cf-mc-drawer[data-position="left"].cf-mc-open .cf-mc-panel{
    transform:translateX(0);
}

/* ──────────────────────────────────────────────────────────────
   Cabecera del drawer
   ────────────────────────────────────────────────────────────── */

.cf-mc-panel .cf-mc-hdr{
    flex-shrink:0;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:40px 40px 24px;
    border-bottom:1px solid rgba(209,197,183,.4);
}
.cf-mc-panel .cf-mc-h2{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:500;
    font-size:clamp(1.4rem,3.5vw,1.875rem);
    color:#1b1c1a;
    letter-spacing:-.01em;
    line-height:1.15;
    margin:0 0 .25rem;
    padding:0;
}
.cf-mc-panel .cf-mc-sub{
    font-family:inherit;
    font-size:.76rem;
    color:#4e463b;
    display:block;
    margin:0;
}
.cf-mc-panel .cf-mc-x{
    background:none;
    border:1.5px solid rgba(78,70,59,.22);
    border-radius:50%;
    outline:none;
    font-family:inherit;
    font-size:.82rem;
    font-weight:400;
    color:#4e463b;
    cursor:pointer;
    width:2rem;
    height:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-top:.1rem;
    padding:0;
    line-height:1;
    transition:border-color .2s,color .2s,background .2s;
}
.cf-mc-panel .cf-mc-x:hover,
.cf-mc-panel .cf-mc-x:focus{
    border-color:#735a33;
    color:#735a33;
    background:rgba(115,90,51,.06);
}

/* ──────────────────────────────────────────────────────────────
   Scroll + items
   ────────────────────────────────────────────────────────────── */

.cf-mc-panel .cf-mc-scroll{
    flex:1 1 auto;
    overflow-y:auto;
    padding:28px 40px;
    display:flex;
    flex-direction:column;
    gap:2rem;
    scrollbar-width:thin;
    scrollbar-color:rgba(209,197,183,.4) transparent;
    box-sizing:border-box;
}
.cf-mc-panel .cf-mc-scroll::-webkit-scrollbar{ width:2px; }
.cf-mc-panel .cf-mc-scroll::-webkit-scrollbar-thumb{
    background:rgba(209,197,183,.4);
    border-radius:2px;
}

.cf-mc-panel .cf-mc-items{
    display:flex;
    flex-direction:column;
    gap:32px;
}

.cf-mc-panel .cf-mc-item{
    display:grid;
    grid-template-columns:112px 1fr;
    column-gap:1.25rem;
    min-height:152px;
}
.cf-mc-panel .cf-mc-img-wrap{
    width:112px;
    height:152px;
    overflow:hidden;
    background:#f5f3f0;
}
.cf-mc-panel .cf-mc-img-wrap a{
    display:block;
    width:100%;
    height:100%;
}
.cf-mc-panel .cf-mc-img-wrap img,
.cf-mc-panel .cf-mc-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block;
    transition:transform .5s ease;
}
.cf-mc-panel .cf-mc-item:hover .cf-mc-img-wrap img{
    transform:scale(1.05);
}

.cf-mc-panel .cf-mc-det{
    display:flex;
    flex-direction:column;
    gap:.25rem;
    padding-top:.5rem;
    width:100%;
    min-width:0;
}
.cf-mc-panel .cf-mc-det-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:.5rem;
    margin-bottom:.15rem;
}
.cf-mc-panel .cf-mc-name,
.cf-mc-panel .cf-mc-name a{
    font-family:'Playfair Display',Georgia,serif;
    font-size:1.05rem;
    font-weight:400;
    color:#1b1c1a;
    text-decoration:none;
    line-height:1.3;
}
.cf-mc-panel .cf-mc-name a:hover,
.cf-mc-panel .cf-mc-name a:focus{
    color:#735a33;
    text-decoration:none;
}
.cf-mc-panel .cf-mc-price{
    font-family:inherit;
    font-size:.85rem;
    font-weight:500;
    color:#735a33;
    white-space:nowrap;
}
.cf-mc-panel .cf-mc-price *{
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
}
.cf-mc-panel .cf-mc-var{
    font-family:inherit;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#4e463b;
    display:block;
    margin-bottom:.4rem;
}
.cf-mc-panel .cf-mc-qty-lbl{
    font-family:inherit;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#4e463b;
    display:block;
    margin-bottom:.35rem;
}
.cf-mc-panel .cf-mc-det-bot{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-top:.1rem;
    width:100%;
    min-width:0;
}
.cf-mc-panel .cf-mc-det-bot .cf-mc-qty-ctrl{ margin-right:auto; }
.cf-mc-panel .cf-mc-det-bot .cf-mc-rm{      margin-left:auto;  }

.cf-mc-panel .cf-mc-qty-ctrl{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    background:#f3f3f3;
    border:1px solid rgba(0,0,0,.13);
    border-radius:.5rem;
    padding:.35rem .85rem;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.cf-mc-panel .cf-mc-q-btn{
    background:none !important;
    border:none !important;
    outline:none;
    box-shadow:none !important;
    cursor:pointer;
    font-family:inherit;
    font-size:1rem;
    color:#574141;
    line-height:1;
    padding:0;
    width:1.1rem;
    text-align:center;
    transition:opacity .18s, color .18s;
    border-radius:0 !important;
}
.cf-mc-panel .cf-mc-q-btn:hover,
.cf-mc-panel .cf-mc-q-btn:focus{
    opacity:.55;
    color:#574141;
    background:transparent !important;
}
.cf-mc-panel .cf-mc-q-num{
    font-family:inherit;
    font-size:.85rem;
    color:#1a1c1c;
    min-width:1rem;
    text-align:center;
    user-select:none;
}

.cf-mc-panel .cf-mc-rm{
    font-family:inherit;
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.13em;
    color:#4e463b;
    text-decoration:none;
    transition:color .18s;
    cursor:pointer;
    background:none;
    border:none;
}
.cf-mc-panel .cf-mc-rm:hover,
.cf-mc-panel .cf-mc-rm:focus{
    color:#a8363c;
    text-decoration:none;
    background:transparent;
}

/* ──────────────────────────────────────────────────────────────
   Estado vacío
   ────────────────────────────────────────────────────────────── */

.cf-mc-panel .cf-mc-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    text-align:center;
    gap:1rem;
    padding:3rem 0;
}
.cf-mc-panel .cf-mc-empty p{
    font-family:'Playfair Display',Georgia,serif;
    color:#4e463b;
    font-size:1rem;
    margin:0;
}
.cf-mc-panel .cf-mc-empty a{
    font-family:inherit;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#735a33;
    text-decoration:none;
    border-bottom:1px solid #735a33;
    padding-bottom:.1rem;
}
.cf-mc-panel .cf-mc-empty a:hover,
.cf-mc-panel .cf-mc-empty a:focus{
    color:#735a33;
    text-decoration:none;
}

/* ──────────────────────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────────────────────── */

.cf-mc-panel .cf-mc-ft{
    flex-shrink:0;
    border-top:1px solid rgba(209,197,183,.4);
    padding:22px 40px 32px;
    box-sizing:border-box;
}
.cf-mc-panel .cf-mc-ft-top{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:.85rem;
}
.cf-mc-panel .cf-mc-slbl{
    font-family:inherit;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:#4e463b;
}
.cf-mc-panel .cf-mc-total{
    font-family:'Playfair Display',Georgia,serif;
    font-size:1.5rem;
    font-weight:400;
    color:#735a33;
}
.cf-mc-panel .cf-mc-total *{
    color:inherit;
    font:inherit;
}
.cf-mc-panel .cf-mc-fnote{
    font-family:inherit;
    font-size:.65rem;
    color:#4e463b;
    text-align:center;
    line-height:1.8;
    margin:0 0 1.1rem;
}

/* Botón "Pagar" — agressively defends against theme button:hover red */
.cf-mc-panel .cf-mc-pagar{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.6rem;
    width:100%;
    background:#a8363c;
    color:#fff;
    padding:19px;
    text-decoration:none;
    cursor:pointer;
    font-family:inherit;
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.18em;
    text-transform:uppercase;
    box-sizing:border-box;
    border:none;
    border-radius:0;
    transition:opacity .2s,transform .15s,background-color .2s,color .2s;
}
.cf-mc-panel .cf-mc-pagar:hover,
.cf-mc-panel .cf-mc-pagar:focus{
    opacity:.92;
    transform:translateY(-1px);
    background:#922f35;
    color:#fff;
    text-decoration:none;
}

/* Botón "Ver Carrito" — outline */
.cf-mc-panel .cf-mc-ver-carrito{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin-top:.75rem;
    background:transparent;
    color:#a8363c;
    border:1.5px solid #a8363c;
    padding:17px;
    text-decoration:none;
    cursor:pointer;
    font-family:inherit;
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.18em;
    text-transform:uppercase;
    box-sizing:border-box;
    border-radius:0;
    transition:border-color .25s,color .25s,background .25s;
}
.cf-mc-panel .cf-mc-ver-carrito:hover,
.cf-mc-panel .cf-mc-ver-carrito:focus{
    border-color:rgba(168,54,60,.45);
    color:rgba(168,54,60,.65);
    background:transparent;
    text-decoration:none;
}

/* Botón "Continuar Explorando" — el más vulnerable al hover rojo del tema */
.cf-mc-panel .cf-mc-cont-wrap{
    display:flex;
    justify-content:center;
    margin-top:1rem;
}
button.cf-mc-cont{
    -webkit-appearance:none;
    appearance:none;
}
.cf-mc-panel .cf-mc-cont,
.cf-mc-panel .cf-mc-cont:hover,
.cf-mc-panel .cf-mc-cont:focus,
.cf-mc-panel .cf-mc-cont:active{
    display:inline-block;
    width:auto;
    background:transparent;
    border:none;
    outline:none;
    border-bottom:1px solid transparent;
    font-family:inherit;
    font-size:.68rem;
    font-weight:400;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:#735a33;
    text-align:center;
    cursor:pointer;
    padding:.25rem 0;
    transition:border-color .2s,color .2s;
    box-sizing:border-box;
    text-decoration:none;
    box-shadow:none;
}
.cf-mc-panel .cf-mc-cont:hover,
.cf-mc-panel .cf-mc-cont:focus{
    border-bottom-color:currentColor;
}

/* ──────────────────────────────────────────────────────────────
   Body lock + responsive
   ────────────────────────────────────────────────────────────── */

body.cf-mc-locked{ overflow:hidden; }

@media (max-width:600px){
    .cf-mc-panel{ width:85vw; max-width:85vw; }
    .cf-mc-panel .cf-mc-hdr{ padding:28px 20px 20px; }
    .cf-mc-panel .cf-mc-scroll,
    .cf-mc-panel .cf-mc-ft{   padding-left:20px; padding-right:20px; }
    .cf-mc-panel .cf-mc-item{ grid-template-columns:80px 1fr; min-height:110px; }
    .cf-mc-panel .cf-mc-img-wrap{ width:80px; height:110px; }
    .cf-mc-panel .cf-mc-h2{ font-size:1.35rem; }
}

/* ──────────────────────────────────────────────────────────────
   Modo editor de Elementor — el drawer NUNCA debe abrir cuando
   estamos diseñando para evitar bloquear la edición. El JS ya lo
   bloquea, pero por si acaso ocultamos también el panel.
   ────────────────────────────────────────────────────────────── */
body.elementor-editor-active .cf-mc-drawer{
    display:none !important;
}