/* ============================================================
   CM DESCANSO · CHROME (header + footer del block theme) · G1
   Traducción 1:1 del custom_css de las plantillas Elementor
   25469 (header) y 25470 (footer) al markup de bloques nativos:
   - nav Elementor Pro  →  core/navigation (desktop hover + overlay móvil)
   - Menu Cart          →  woocommerce/mini-cart
   - panel móvil propio →  overlay del bloque Navigation (sin JS propio)
   Las medidas, colores y tipos son EXACTAMENTE los del original.
   ============================================================ */

/* ===== HEADER: sticky SIEMPRE (R15: los dropdowns necesitan este contexto).
   OJO: el bloque template-part NO emite className (se probó con cmd-hd y lo
   descarta), así que el selector es tag+clase del wrapper que sí emite. ===== */
header.wp-block-template-part { position: sticky; top: 0; z-index: 999; }

/* ---- barra de anuncio ---- */
.cmd-ann { background: var(--cmd-ink-deep); text-align: center; padding: 8px 12px; }
.cmd-ann p { margin: 0; color: var(--cmd-on-dark); font-size: 12.5px; letter-spacing: .02em; font-family: var(--cmd-font-body); }
.cmd-ann-dot { color: var(--cmd-green); margin: 0 6px; }
/* G9-polish movil: un solo mensaje, una sola linea (las 3 promesas apretadas
   en dos lineas leian a mercadillo; el resto sigue en el footer y las fichas) */
@media (max-width: 640px) {
  .cmd-ann .cmd-ann-i2, .cmd-ann .cmd-ann-i3, .cmd-ann .cmd-ann-dot { display: none; }
}

/* ---- banner 3 zonas, 66px, hairline (medidas OKA) ----
   G5-polish: al scrollear (html.cmd-scrolled, JS global en functions.php) la
   barra pasa a GLASS y el contenido se ve pasar por debajo (frost+sheen, sin
   rim: las barras full-width llevan cristal simple + hairline). */
.cmd-headbar { background: var(--cmd-paper); border-bottom: 1px solid var(--cmd-line); width: 100%; padding: 0; position: relative; z-index: 50; transition: background .25s ease, border-color .25s ease; }
html.cmd-scrolled .cmd-headbar {
  background: var(--cmd-glass2-sheen), rgba(251, 250, 246, .58);
  -webkit-backdrop-filter: var(--cmd-glass2-blur); backdrop-filter: var(--cmd-glass2-blur);
  border-bottom-color: rgba(42, 38, 34, .07); /* "bordes: desvanecete, no dividas" (skill Apple): la hairline se suaviza sobre el vidrio */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.cmd-scrolled .cmd-headbar { background: rgba(251, 250, 246, .97); }
}
@media (prefers-reduced-transparency: reduce) {
  html.cmd-scrolled .cmd-headbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cmd-paper); }
}
.cmd-headbar-in { max-width: 1400px; margin: 0 auto; padding: 0 32px; min-height: 66px; width: 100%; display: flex; align-items: center; position: relative; }

/* ---- logo ---- */
.cmd-brand { flex: 1 1 0; min-width: 0; order: 1; }
.cmd-brand a { display: inline-flex; align-items: center; }
.cmd-brand a .cmd-logo-img { height: 36px; width: auto; display: block; max-width: none; }

/* ---- nav de escritorio: centrada GEOMETRICAMENTE (absolute, como OKA);
   firma OKA: al hacer hover, los hermanos se atenuan.
   OJO: el bloque Navigation DUPLICA las clases del nav en el <ul> interior,
   asi que todo lo posicional va anclado a `nav.cmd-nav`, nunca a `.cmd-nav`
   a secas (el ul absoluto colapsaba el menu a una columna de 101px). ---- */
nav.cmd-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; order: 3; }
/* clase doblada a posta: core trae `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}`
   (0,3,0) que ganaba a (0,2,0) y los items salían en gris de cuerpo, no en tinta */
.cmd-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--cmd-ink); font-family: var(--cmd-font-body); font-size: 14px; font-weight: 500;
  letter-spacing: .01em; padding: 10px 15px; transition: opacity .2s ease; position: relative;
  text-decoration: none !important;
}
/* sin gap extra entre items: el padding 10x15 ya es el ritmo del original */
nav.cmd-nav, .cmd-nav .wp-block-navigation__container { gap: 0; }
/* UNA sola raya: el ::after dibujado */
.cmd-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1px;
  background: var(--cmd-ink); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease;
}
.cmd-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.cmd-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}
.cmd-nav .wp-block-navigation__container:hover > .wp-block-navigation-item > .wp-block-navigation-item__content { opacity: .4; }
.cmd-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content { opacity: 1; }

/* ---- submenus de escritorio: panel glass, hairline, sombra editorial.
   El bloque Navigation ya los muestra en :hover/:focus-within; aqui el skin,
   el centrado bajo el item, y DOS arreglos de usabilidad (G4-polish):
   1. el margin-top de 6px creaba un hueco muerto: al bajar el raton hacia el
      panel se salia del li, moria el :hover y el submenu se borraba antes de
      llegar. Un ::before puente (parte del panel, invisible) cubre el hueco.
   2. cierre con retardo: 160ms de gracia si el raton se desvia un pixel. ---- */
.cmd-nav .wp-block-navigation__container .wp-block-navigation__submenu-container {
  background: var(--cmd-glass2-sheen), var(--cmd-glass2-fill) !important;
  -webkit-backdrop-filter: var(--cmd-glass2-blur); backdrop-filter: var(--cmd-glass2-blur);
  border: 1px solid transparent !important;
  border-radius: var(--cmd-r-lg) !important;
  box-shadow: var(--cmd-glass2-edge), var(--cmd-glass2-shadow) !important;
  padding: 8px !important; min-width: 242px !important; z-index: 120;
  left: 50% !important; right: auto !important; top: 100% !important;
  transform: translateX(-50%) !important; margin-top: 6px !important;
  transition: opacity .18s var(--cmd-ease-out), visibility 0s linear .16s !important;
}
/* rim de degradado (el ::before de este panel es el PUENTE de hover: el rim va en ::after) */
.cmd-nav .wp-block-navigation__container .wp-block-navigation__submenu-container::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: var(--cmd-glass2-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cmd-nav .wp-block-navigation__container .wp-block-navigation__submenu-container {
    background: rgba(251, 248, 242, .97) !important;
  }
}
/* abierto: sin retardo de entrada */
.cmd-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.cmd-nav .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
  transition: opacity .18s var(--cmd-ease-out), visibility 0s !important;
}
/* el puente: tapa el hueco de 6px entre el item y el panel (hover continuo) */
.cmd-nav .wp-block-navigation__container .wp-block-navigation__submenu-container::before {
  content: ""; position: absolute; left: -8px; right: -8px; top: -10px; height: 12px;
}
/* DOBLE RECUADRO (aviso de Mario, G6-polish): el bloque Navigation propaga el
   background a los <li> del submenu → dos capas translucidas al 40% apiladas
   pintaban un rectangulo interior de esquinas duras (la skill de Apple lo
   nombra literal: "nunca apilar una superficie translucida clara sobre otra").
   El vidrio es SOLO del panel; los items van transparentes. */
.cmd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
  background: transparent !important;
}
.cmd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--cmd-ink) !important; background: transparent; font-size: 13.5px; font-weight: 500;
  line-height: 1.2; padding: 10px 14px; border-radius: var(--cmd-r-sm); white-space: nowrap; opacity: 1 !important;
  letter-spacing: .012em; /* vibrancy sobre vidrio: micro-bump de tracking (skill Apple) */
  transition: background .15s;
}
.cmd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
  background: var(--cmd-panel); color: var(--cmd-ink) !important;
}
.cmd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none !important; }

/* ---- iconos de la derecha.
   Anclados a header.wp-block-template-part: `.cmd-ic` también existe en el header
   Elementor viejo (widgets de icono) y chrome.css se encola en TODAS las páginas.
   Sin el ancla, estas reglas pintaban sobre el header viejo (colisión R27 inversa).
   Fuera en G9, cuando el header viejo muera. ---- */
.cmd-headic { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 20px; order: 2; }

/* ---- G11 · selector de idioma en cabecera. El JS de functions.php lo rellena
   cosechando las URLs convertidas del floater de TranslatePress (que se oculta:
   sigue en el DOM porque es nuestra fuente de URLs por pagina). Mientras no hay
   segundo idioma o falla TP, .cmd-lang queda display:none y no ocupa sitio. ---- */
.trp-floating-switcher { display: none !important; }
header.wp-block-template-part .cmd-lang { display: none; align-items: center; gap: 8px; font-size: 11px; line-height: 1; letter-spacing: .12em; font-weight: 600; }
header.wp-block-template-part .cmd-lang.is-on { display: inline-flex; }
header.wp-block-template-part .cmd-lang a,
header.wp-block-template-part .cmd-lang .is-cur { color: var(--cmd-ink); text-decoration: none; padding: 3px 1px; }
header.wp-block-template-part .cmd-lang a { opacity: .4; transition: opacity .2s; }
header.wp-block-template-part .cmd-lang a:hover { opacity: 1; }
header.wp-block-template-part .cmd-lang .is-cur { box-shadow: inset 0 -2px 0 var(--cmd-clay); }
header.wp-block-template-part .cmd-lang .cmd-lang-sep { color: var(--cmd-line-strong); }
/* En movil no cabe en la fila (pisaba el logo): fuera de la cabecera y dentro
   del menu hamburguesa como fila propia (clon .cmd-lang-menu inyectado por JS). */
@media (max-width: 960px) {
  header.wp-block-template-part .cmd-headic .cmd-lang { display: none !important; }
}
.cmd-nav .cmd-lang-menu { display: flex; align-items: center; gap: 14px; font-size: 13px; line-height: 1; letter-spacing: .14em; font-weight: 600; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--cmd-line); }
.cmd-nav .cmd-lang-menu a, .cmd-nav .cmd-lang-menu .is-cur { color: var(--cmd-ink); text-decoration: none; padding: 3px 1px; }
.cmd-nav .cmd-lang-menu a { opacity: .45; }
.cmd-nav .cmd-lang-menu .is-cur { box-shadow: inset 0 -2px 0 var(--cmd-clay); }
.cmd-nav .cmd-lang-menu .cmd-lang-sep { color: var(--cmd-line-strong); }
@media (min-width: 961px) { .cmd-nav .cmd-lang-menu { display: none !important; } }
header.wp-block-template-part .cmd-headic .cmd-ic { color: var(--cmd-ink); display: inline-flex; align-items: center; transition: opacity .2s; }
header.wp-block-template-part .cmd-headic .cmd-ic:hover { opacity: .55; }
header.wp-block-template-part .cmd-headic .cmd-ic svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* ---- carrito (bloque mini-cart de Woo): SOLO icono + contador ---- */
.cmd-cart { width: auto; }
.cmd-cart .wc-block-mini-cart__button {
  background: transparent !important; padding: 0 !important; border: 0 !important;
  color: var(--cmd-ink) !important; box-shadow: none !important; cursor: pointer; opacity: 1;
}
.cmd-cart .wc-block-mini-cart__button:hover { opacity: .55; }
.cmd-cart .wc-block-mini-cart__amount { display: none !important; }
.cmd-cart .wc-block-mini-cart__quantity-badge { position: relative; display: inline-flex; }
.cmd-cart .wc-block-mini-cart__icon { width: 18px; height: 18px; color: var(--cmd-ink); }
/* El badge se ancla a la ESQUINA superior-derecha de la bolsa (solapando el icono,
   como el original de Elementor), no flotando separado. -6px/-8px lo pega a la
   bolsa; el hueco al burger lo da el gap de .cmd-headic (18px). */
.cmd-cart .wc-block-mini-cart__badge {
  font-family: var(--cmd-font-body) !important; font-size: 10px !important; font-weight: 600 !important;
  background: var(--cmd-green) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--cmd-r-pill) !important; min-width: 15px !important; height: 15px !important;
  line-height: 15px !important; text-align: center !important; padding: 0 3px !important;
  position: absolute; top: -6px; right: -8px; display: block;
}

/* ===== NEUTRALIZADORES temporales (BORRAR en G9): las plantillas Elementor
   25469/25470 encolan su CSS en TODAS las páginas y comparten nombres de clase
   con este chrome. Dos reglas suyas pegan al markup nuevo:
   1. `.cmd-nav{position:absolute;left:50%...}` alcanza al <ul> del bloque
      Navigation (que duplica las clases del nav) y colapsaba el menú a columna.
   2. `@media(max-width:960px){.cmd-nav{display:none!important}}` ocultaba el
      nav entero, burger incluido. ===== */
ul.cmd-nav { position: static; left: auto; top: auto; transform: none; width: auto; }
@media (max-width: 960px) {
  nav.cmd-nav { display: flex !important; }
}

/* ===== MOVIL (≤960px): logo a la izquierda, iconos + hamburguesa a la derecha.
   El breakpoint nativo del bloque Navigation es 600px; estas reglas lo mueven
   a los 960px del diseño original. ===== */
@media (max-width: 960px) {
  .cmd-headbar-in { min-height: 58px; padding: 0 18px; flex-wrap: nowrap; }
  .cmd-brand { flex: 1 1 auto; min-width: 0; }
  .cmd-brand a .cmd-logo-img { height: 30px; }
  .cmd-headic { flex: 0 0 auto; gap: 20px; }
  /* G10-polish (aviso Mario): en movil los iconos quedaban enanos, el carrito
     "apenas se ve". Suben a 20px con el badge proporcionado. */
  header.wp-block-template-part .cmd-headic .cmd-ic svg { width: 20px; height: 20px; }
  .cmd-cart .wc-block-mini-cart__icon { width: 21px; height: 21px; }
  .cmd-cart .wc-block-mini-cart__badge {
    min-width: 16px !important; height: 16px !important; line-height: 16px !important;
    font-size: 10.5px !important; top: -7px; right: -9px;
  }
  /* la nav pasa de centrada-absolute a ultimo item del flex: solo queda su burger */
  nav.cmd-nav { position: static; transform: none; margin-left: -2px; }
  /* burger visible hasta 960 (core lo esconde a partir de 600) */
  .cmd-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
  /* y el menu horizontal oculto hasta 960 (core lo enseña a partir de 600) */
  .cmd-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
@media (min-width: 961px) {
  /* en escritorio el burger no existe (core ya lo oculta desde 600px; explicito por si acaso) */
  .cmd-nav .wp-block-navigation__responsive-container-open { display: none !important; }
}

/* ---- el boton hamburguesa: mismo tamaño de toque que el original (44px) y
   pegado al margen derecho. El icono 'menu' de core es fino (barras de 1.4px):
   ocultamos su svg y dibujamos 3 barras gruesas (2.5px, tinta sólida) con
   ::before/::after + fondo, clavando el peso visual del FA bars original. ---- */
.cmd-nav .wp-block-navigation__responsive-container-open {
  color: var(--cmd-ink); align-items: center; justify-content: center;
  width: 26px; min-width: 26px; min-height: 44px; padding: 0; margin-right: -2px; position: relative;
}
.cmd-nav .wp-block-navigation__responsive-container-open svg { display: none; }
.cmd-nav .wp-block-navigation__responsive-container-open::before {
  content: ""; width: 22px; height: 2.5px; background: var(--cmd-ink);
  box-shadow: 0 -7px 0 var(--cmd-ink), 0 7px 0 var(--cmd-ink); border-radius: 1px;
}

/* ===== OVERLAY MOVIL (el panel a pantalla completa, skin del original) ===== */
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--cmd-paper); padding: 0; z-index: 1001;
}
.cmd-nav .wp-block-navigation__responsive-close { padding: 0; }

/* El panel entra deslizándose desde la derecha (firma del original: translateX
   .38s ease-out), no con el fade instantáneo de core. Keyframe (no transition:
   el elemento va de display:none a display:flex y una transition no arrancaría).
   Gate doble: html.cmd-motion + prefers-reduced-motion (sin JS o con
   menos-movimiento, el panel aparece sin animar, nunca fuera de pantalla). */
@media (prefers-reduced-motion: no-preference) {
  html.cmd-motion .cmd-nav .wp-block-navigation__responsive-container.is-menu-open {
    animation: cmd-mnav-slide .38s var(--cmd-ease-out);
  }
}
@keyframes cmd-mnav-slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  display: flex; flex-direction: column; height: 100%;
}
/* barra superior con la X (44px de toque, tinta) */
.cmd-nav .wp-block-navigation__responsive-container-close {
  color: var(--cmd-ink); padding: 10px 16px; margin-left: auto;
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 54px;
  border-bottom: 1px solid var(--cmd-line); width: 100%; justify-content: flex-end;
}
.cmd-nav .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
/* la lista: aire, tipografia display grande (como el panel original) */
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  /* padding-top 64px: la X de cierre es position:absolute (core), no empuja la lista */
  flex: 1 1 auto; overflow-y: auto; padding: 64px 24px 40px; -webkit-overflow-scrolling: touch;
}
/* !important: el CSS Elementor viejo trae `@media(max-width:960px){.cmd-nav{display:none!important}}`
   y el <ul> del overlay lleva la clase cmd-nav duplicada (neutralizador, fuera en G9) */
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: block !important; width: 100%;
}
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  border-bottom: 1px solid var(--cmd-line); display: block;
}
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-family: var(--cmd-font-display); font-size: 25px; font-weight: 480; color: var(--cmd-ink);
  letter-spacing: -.015em; padding: 18px 0; display: block; opacity: 1 !important;
}
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none !important; }
/* subcategorias: visibles, en cuerpo pequeño e indentadas (el overlay del bloque
   Navigation las muestra expandidas; el skin las hace leves como los sublinks originales) */
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 0 14px !important; margin: 0 !important; min-width: 0 !important;
  position: static !important; transform: none !important;
  /* G9-polish: el "recuadro blanco" del overlay no era un background, era el
     backdrop-filter del panel glass de escritorio (blur+brightness aclara el
     crema de debajo y dibuja una tarjeta de 14px de radio) + el rim del ::after.
     En el overlay el vidrio se apaga ENTERO: filtro, radio y pseudos. */
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-radius: 0 !important;
}
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before,
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::after {
  content: none !important; display: none !important;
}
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; }
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-family: var(--cmd-font-body); font-size: 15px; font-weight: 400; line-height: 1.62; color: var(--cmd-text) !important;
  padding: 9px 0 9px 4px; display: block;
}
.cmd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--cmd-ink) !important; }

/* ============================================================
   FOOTER (port del custom_css de 25470, selectores adaptados)
   ============================================================ */

/* ---- banda newsletter (firma OKA "Stay connected", en nuestra voz) ---- */
.cmd-nl-sec { background: var(--cmd-band); padding: clamp(3rem, 6vw, 5rem) 24px; text-align: center; }
.cmd-nl { max-width: 560px; margin: 0 auto; }
p.cmd-nl-eye { margin: 0 0 12px; }
h2.cmd-nl-h {
  font-family: var(--cmd-font-display); font-weight: 460;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); line-height: 1.1; color: var(--cmd-ink);
  letter-spacing: -.015em; margin: 0 0 12px; text-wrap: balance;
}
p.cmd-nl-t { margin: 0 auto 22px; font-size: 14.5px; color: var(--cmd-text); max-width: 44ch; }
.cmd-nlform { display: flex; width: 100%; max-width: 460px; margin: 0 auto; }
.cmd-nlform input {
  flex: 1 1 auto; min-width: 0; height: 52px; border: 1px solid var(--cmd-line-strong); border-right: 0;
  border-radius: var(--cmd-r-sm) 0 0 4px; padding: 0 16px; font-family: var(--cmd-font-serif); font-style: italic;
  font-size: 15px; background: #fff; color: var(--cmd-ink); outline: 0;
}
.cmd-nlform input::placeholder { color: var(--cmd-muted); }
.cmd-nlform button {
  flex: 0 0 auto; height: 52px; border: 0; border-radius: 0 4px 4px 0; background: var(--cmd-ink);
  color: var(--cmd-on-dark); font-family: var(--cmd-font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: 0 22px; cursor: pointer; transition: background .2s;
}
.cmd-nlform button:hover { background: var(--cmd-green); }

/* ---- footer tinta ---- */
.cmd-foot { background: var(--cmd-ink-deep); padding: 64px 0 26px; }
.cmd-foot-in { max-width: 1400px; margin: 0 auto; padding: 0 32px; width: 100%; }
.cmd-foot-cols { display: flex; gap: 48px; flex-wrap: nowrap; align-items: flex-start; }
.cmd-fcol { flex: 1 1 0; min-width: 0; }
.cmd-fcol-wide { flex: 1.6 1 0; }
p.cmd-fbrand { margin: 0; }
.cmd-foot .cmd-flogo-img { height: 30px; width: auto; display: block; max-width: none; }
.cmd-fdesc p { color: var(--cmd-on-dark-mut); font-size: 14px; line-height: 1.65; margin: 14px 0 0; max-width: 34ch; }
.cmd-fdesc .cmd-ftag { font-family: var(--cmd-font-serif); font-style: italic; color: #A89F90; margin-top: 10px; }
/* titulos de columna en serif (como OKA), no uppercase */
p.cmd-fh4 { font-family: var(--cmd-font-display); font-size: 17px; font-weight: 480; letter-spacing: 0; text-transform: none; color: var(--cmd-on-dark); margin: 0; }
.cmd-flinks p { margin: 12px 0 0; display: flex; flex-direction: column; }
.cmd-foot .cmd-flinks a, .cmd-foot .cmd-flinks span { color: var(--cmd-on-dark-mut); font-size: 14px; padding: 5px 0; text-decoration: none; display: block; transition: color .15s; }
.cmd-foot .cmd-flinks a:hover { color: var(--cmd-on-dark); text-decoration: none; }
.cmd-foot-bar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(244, 240, 232, .12); margin-top: 46px; padding-top: 20px; gap: 16px; flex-wrap: wrap; }
.cmd-foot-bartxt p { margin: 0; color: #8F887C; font-size: 12px; }
.cmd-foot .cmd-foot-bartxt a { color: #8F887C; text-decoration: none; }
.cmd-foot .cmd-foot-bartxt a:hover { color: var(--cmd-on-dark); }
.cmd-foot-pay p { margin: 0; display: flex; gap: 8px; }
/* G9-polish movil: la fila de pagos centrada como el legal de arriba (era el
   unico elemento del cierre del footer que quedaba pegado a la izquierda) */
@media (max-width: 640px) {
  .cmd-foot-pay p { justify-content: center; flex-wrap: wrap; }
}
.cmd-foot-pay span { font-size: var(--cmd-fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: #8F887C; border: 1px solid rgba(244, 240, 232, .16); border-radius: var(--cmd-r-sm); padding: 3px 8px; }
@media (max-width: 880px) {
  .cmd-foot-cols { flex-wrap: wrap; gap: 28px; }
  .cmd-fcol { flex: 1 1 42%; }
  .cmd-fcol-wide { flex: 1 1 100%; }
  .cmd-foot-bar { justify-content: center; text-align: center; }
}

/* ---- drawer del mini-cart (bloque Woo): papel + scrim tinta, como el
   side-cart Elementor que sustituye. El interior fino se remata en G4. ---- */
.wc-block-components-drawer {
  background: var(--cmd-paper);
  box-shadow: 0 14px 40px rgba(42, 38, 34, .18);
}
.wc-block-components-drawer__screen-overlay {
  background: rgba(28, 25, 22, .35);
}

/* ============================================================
   DRAWER DEL MINI-CART (G5-polish) · panel en glass v2 + camino de
   compra en terracota. El drawer es la primera pantalla de "ya casi
   es tuyo": el cristal lo separa del contenido y el CTA manda.
   ============================================================ */
.wc-block-components-drawer {
  background: var(--cmd-glass2-sheen), rgba(252, 250, 245, .72) !important;
  -webkit-backdrop-filter: var(--cmd-glass2-blur); backdrop-filter: var(--cmd-glass2-blur);
  box-shadow: var(--cmd-glass2-edge), -14px 0 44px rgba(42, 38, 34, .16) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wc-block-components-drawer { background: rgba(251, 250, 246, .98) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .wc-block-components-drawer { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cmd-paper) !important; }
}
/* CTA del drawer: comprar = terracota; "Ver carrito" = fantasma */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout {
  background: var(--cmd-green) !important; color: #FDFBF7 !important;
  border: 0 !important; border-radius: var(--cmd-r-sm) !important;
  font-family: var(--cmd-font-body) !important; font-weight: 600 !important;
  text-transform: none !important;
}
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout:hover { background: var(--cmd-green-deep) !important; box-shadow: 0 4px 14px rgba(26,28,22,.12); }
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart {
  background: transparent !important; color: var(--cmd-ink) !important;
  border: 1px solid var(--cmd-line-strong) !important; border-radius: var(--cmd-r-sm) !important;
  font-family: var(--cmd-font-body) !important; font-weight: 600 !important;
}
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:hover { background: var(--cmd-ink) !important; color: var(--cmd-on-dark) !important; border-color: var(--cmd-ink) !important; }

/* ============================================================
   G10h · CARRITO BOTTOM-SHEET EN MOVIL (peticion Mario, "al estilo
   Apple"). En escritorio el drawer sigue entrando por la derecha; en
   movil sube desde abajo como una hoja: asa de arrastre visual, esquinas
   superiores redondeadas (14px, token r-lg del cristal flotante), alto
   maximo 84svh con su propio scroll. Solo presentacion CSS: la logica
   del bloque mini-cart de Woo no se toca.
   ============================================================ */
@media (max-width: 760px) {
  .wc-block-components-drawer {
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: 84svh !important;
    border-radius: var(--cmd-r-lg) var(--cmd-r-lg) 0 0 !important;
    animation: cmd-sheet-up .32s var(--cmd-ease-out) !important;
    box-shadow: 0 -18px 50px rgba(24, 20, 16, .28) !important;
  }
  /* el asa: pastilla centrada arriba, lenguaje de hoja nativa */
  .wc-block-components-drawer::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: var(--cmd-r-pill);
    background: rgba(42, 38, 34, .22); z-index: 5;
  }
  .wc-block-components-drawer__content { max-height: 84svh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 10px; }
  @keyframes cmd-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) {
    .wc-block-components-drawer { animation: none !important; }
  }
}

/* R37 de nuevo: base.css pone position:relative;z-index:1 a los hijos directos
   del body y se COME el position:fixed del overlay del mini-cart (el drawer
   "abierto" quedaba en flujo, invisible). Excepcion quirurgica. */
body.cmd > .wc-block-components-drawer__screen-overlay {
  position: fixed !important; inset: 0 !important; z-index: 1100 !important;
}
@media (max-width: 760px) {
  /* el estado final de la hoja: sin transform residual del slide lateral de Woo */
  .wc-block-components-drawer__screen-overlay.wc-block-components-drawer__screen-overlay--is-visible .wc-block-components-drawer,
  .wc-block-components-drawer { transform: none !important; }
}

/* metadatos del item en el drawer: la descripcion de la variacion heredaba el
   serif display gigante; a cuerpo pequeño y discreto, que es un apunte */
.wc-block-components-drawer .wc-block-components-product-metadata,
.wc-block-components-drawer .wc-block-components-product-metadata p,
.wc-block-components-drawer .wc-block-components-product-details {
  font-family: var(--cmd-font-body) !important; font-size: 12.5px !important;
  line-height: 1.45 !important; color: var(--cmd-muted) !important;
}