/* ==========================================================
   QWOOD — Storefront Shell: Header + MiniCart + Overrides
   ==========================================================
   Canonical CSS for the Storefront theme shell.
   Single source of truth for:
   - Design tokens (header + minicart)
   - Header layout & branding
   - Primary navigation (desktop + mobile)
   - Mini-cart pill, dropdown panel, list, buttons
   - Storefront element hides (search, breadcrumbs, footer, entry-title)
   - Miscellaneous Storefront overrides (buttons, accordion, search field)

   Estética QWOOD: blanco premium + verde #1bcf17 + Montserrat + superficies limpias.
   Last consolidated: 2026-03-18

   ⚠ !IMPORTANT DENSITY (auditoría 2026-04-20):
   Este archivo concentra ~478 usos de `!important`. No es deuda técnica gratuita:
   casi todos son el único mecanismo fiable para ganar la cascada contra
   la CSS del tema parent (Storefront) que carga ANTES que este plugin y
   usa selectores con alta especificidad (`body.woocommerce .site-header ...`).

   Reglas para futuros contribuidores:
   1. NO añadir más `!important` sin haber intentado primero subir especificidad
      con selectores anidados propios del plugin (p. ej. `body.qw-landing-page`).
   2. Quitar un `!important` existente requiere verificación visual en las 4
      superficies: home, /tienda/, /producto/, /finalizar-compra/ — porque
      Storefront aplica reglas distintas en cada contexto Woo.
   3. Si se migra algún día al tema propio QWOOD (sin Storefront), este archivo
      deja de ser necesario en ~80% — será el momento de la purga real.
   ========================================================== */

/* ==========================================================
   0) DESIGN TOKENS — Aliases locales del header/minicart
   Brand tokens heredados de design-system.css (SSOT).
   ========================================================== */
:root {
  /* Header (específicos — no existen en design-system) */
  --qwood-hd-bg:      #fff;
  --qwood-hd-border:  rgba(15,23,42,0.10);
  --qwood-hd-shadow:  var(--qwood-shadow-soft, 0 14px 34px rgba(15,23,42,.06));

  /* MiniCart system (específicos del minicart) */
  --qw-border:   var(--qwood-color-border, rgba(15,23,42,.10));
  --qw-border2:  var(--qwood-color-border-soft, rgba(15,23,42,.08));

  --qw-r-pill:   14px;
  --qw-r-panel:  var(--qwood-radius-md, 16px);
  --qw-r-chip:   14px;
  --qw-r-thumb:  var(--qwood-radius-xs, 8px);
  --qw-r-btn:    var(--qwood-radius-sm, 12px);

  --qw-shadow-pill:  0 10px 24px rgba(15,23,42,.08);
  --qw-shadow-panel: var(--qwood-shadow-card, 0 18px 42px rgba(15,23,42,.08));

  /* SVG icon masks */
  --qw-ico-basket-pro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10h14l-1 10H6L5 10Z'/%3E%3Cpath d='M9 10 12 4l3 6'/%3E%3Cpath d='M8 10l-2-3'/%3E%3Cpath d='M16 10l2-3'/%3E%3C/g%3E%3C/svg%3E");
  --qw-ico-bag-prem:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/g%3E%3C/svg%3E");
  --qw-ico-arrow-prem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h12'/%3E%3Cpath d='M13 7l5 5-5 5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================
   1) STOREFRONT HIDES & GENERAL OVERRIDES
   ========================================================== */

/* Landing pages: no top spacing on site-content */
body.qw-landing-page .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hide search bar, breadcrumbs, entry title, footer */
.site-search { display: none !important; }

.storefront-breadcrumb,
.woocommerce-breadcrumb {
  display: none !important;
}

.entry-title { display: none; }

footer#colophon.site-footer { display: none !important; }

/* Primary nav links bold */
.storefront-primary-navigation .main-navigation ul.menu > li > a {
  font-weight: bold;
}

/* Search field styling (hidden but kept for compat) */
.woocommerce-product-search .search-field {
  border-radius: 12px;
  border: none; box-shadow: 0 2px 8px rgba(15,23,42,.10);
  padding: 6px 12px;
  outline: none;
  font-weight: bold;
}
.woocommerce-product-search .search-field:focus {
  border-color: #000;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* Block buttons compact */
.wc-block-product .wp-block-button__link,
button.wp-block-button__link {
  display: inline-block !important;
  min-width: 140px !important;
  text-align: center !important;
  padding: .5rem 1rem !important;
}

/* Image accordion radius */
.gkit-image-accordion { border-radius: 60px; }

/* Sort select spacing */
.wc-block-sort-select__select.wc-block-components-sort-select__select {
  margin-left: 10px;
}

/* ── GLOBAL: Suppress Storefront duplicate nav elements ──
   QWOOD injects its own mobile panel via JS (.qw-mobile-toggle + .qw-mobile-panel).
   Storefront's native .handheld-navigation and .menu-toggle must NEVER render. */
.handheld-navigation,
.main-navigation .handheld-navigation,
.main-navigation.toggled .handheld-navigation {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}
.site-header .menu-toggle,
button.menu-toggle {
  display: none !important;
}

/* QWOOD custom toggle/panel — hidden globally, shown by ≤1024px media query */
.qw-mobile-toggle,
.qw-mobile-panel {
  display: none;
}

/* ==========================================================
   2) HEADER (Storefront)
   ========================================================== */
.site-header {
  background: var(--qwood-hd-bg) !important;
  border-bottom: none !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04) !important;
  backdrop-filter: blur(8px);
  overflow: visible !important;
  position: relative !important;
}

/* Pinos descartados (audit 2026-05-07). */
/* En landing transparente (sin scroll): pinos NO visibles */
body.qw-landing-page .site-header:not(.qw-header-solid)::after{
  display: none !important;
}
.site-header .col-full { background: transparent !important; }

.site-header,
.site-header * {
  font-family: "Montserrat", Arial, sans-serif;
}

.site-header a {
  color: var(--qwood-text) !important;
  transition: color 0.18s ease, transform 0.18s ease;
}
.site-header a:hover { color: var(--qwood-color-primary) !important; }

/* Branding */
.site-branding .site-title a,
.site-branding .site-description {
  color: var(--qwood-text) !important;
}
.site-branding .site-title a {
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

/* Navigation links + active underline */
.main-navigation ul.menu > li > a {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a {
  color: var(--qwood-color-primary) !important;
}
.main-navigation ul.menu > li > a::after {
  content: "";
  display: block;
  height: 2.5px;
  width: 0;
  margin-top: 4px;
  background: var(--qwood-color-primary);
  border-radius: 999px;
  transition: width 0.22s ease;
  opacity: 0.9;
}
.main-navigation ul.menu > li > a:hover::after,
.main-navigation ul.menu > li.current-menu-item > a::after,
.main-navigation ul.menu > li.current_page_item > a::after {
  width: 100%;
}

/* ==========================================================
   2b) LOGO IMAGE — Hide text title when custom logo is active
   ========================================================== */
.custom-logo-link + .site-title,
.custom-logo-link ~ .site-title,
.custom-logo-link ~ .site-description {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-branding .custom-logo-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  max-width: fit-content;
}

.site-branding .custom-logo-link img,
.site-branding .custom-logo {
  max-height: 48px;
  width: auto;
  height: auto;
  display: block;
}

/* ==========================================================
   2c) DESKTOP — SINGLE-BAR NAV LAYOUT
   Logo left | Nav links center-right | CTA + Cart right
   Uses display:contents to flatten .col-full into .site-header
   ========================================================== */
@media (min-width: 1025px) {
  /* Dissolve BOTH .col-full wrappers so items become direct flex children */
  .site-header > .col-full {
    display: contents !important;
  }

  .storefront-primary-navigation > .col-full {
    display: contents !important;
  }

  /* Single flex row */
  .site-header {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 10px clamp(24px, 3vw, 52px) !important;
    min-height: 78px !important;
    gap: 0 !important;
    transition: background .35s ease, box-shadow .35s ease,
                border-color .35s ease, backdrop-filter .35s ease !important;
  }

  /* Logo — far left, push everything else right */
  .site-branding {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    overflow: hidden !important;
  }

  .site-branding .custom-logo-link {
    max-width: 100% !important;
  }

  .site-branding .custom-logo-link img,
  .site-branding .custom-logo {
    max-height: 52px;
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Nav wrapper — center-right, allow shrink */
  .storefront-primary-navigation {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
  }

  .main-navigation {
    float: none !important;
    clear: none !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Ensure primary nav visible on desktop */
  .main-navigation .primary-navigation {
    display: block !important;
  }

  /* Inline horizontal menu — flex with shrink */
  .main-navigation ul.menu,
  .main-navigation ul.nav-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
  }

  .main-navigation ul.menu > li {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    float: none !important;
    display: block !important;
  }

  .main-navigation ul.menu > li > a {
    padding: 10px clamp(12px, 1.2vw, 20px) !important;
    font-size: clamp(.88rem, .95vw, 1rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.015em !important;
    white-space: nowrap !important;
  }

  /* CTA button — green pill */
  .main-navigation ul.menu > li.qw-nav-cta > a {
    background: var(--qwood-color-primary) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px clamp(14px, 1.2vw, 22px) !important;
    font-weight: 700 !important;
    margin-left: 6px !important;
    box-shadow: 0 2px 8px rgba(27,207,23,.16) !important;
    transition: background .18s ease, box-shadow .18s ease !important;
  }
  .main-navigation ul.menu > li.qw-nav-cta > a:hover {
    background: var(--qwood-color-primary-dark, #1bcf17) !important;
    box-shadow: 0 4px 14px rgba(27,207,23,.22) !important;
    color: #fff !important;
  }
  .main-navigation ul.menu > li.qw-nav-cta > a::after {
    display: none !important;
  }
  .main-navigation ul.menu > li.qw-nav-cta.current-menu-item > a,
  .main-navigation ul.menu > li.qw-nav-cta.current_page_item > a {
    color: #fff !important;
  }

  /* Cart — far right.
     `width: auto` anula la regla woocommerce.css de Storefront default
     (`.woocommerce-active .site-header .site-header-cart { width: 21.7391% }`)
     que reservaba ~21% del header (≈ 290px en 1366) para el dropdown del minicart.
     Como el dropdown está hidden y el icono es 44px, ese width inflado dejaba
     un hueco visual entre el último menu-item y el botón teléfono. */
  .site-header-cart,
  #site-header-cart {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 12px !important;
    float: none !important;
    list-style: none !important;
  }
  /* Cart dropdown hidden — icon-only, links to cart page */
  #site-header-cart > li:last-child {
    display: none !important;
  }
}

/* ==========================================================
   2d) TRANSPARENT NAV — LANDING PAGES
   Fixed overlay on hero, solidifies on scroll via JS class.
   White text/logo for contrast against dark hero video.
   ========================================================== */

/* ── Base: transparent, fixed over hero ── */
body.qw-landing-page .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9990 !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

/* ── Admin bar compensation — WP admin bar is z-index 99999 ── */
body.admin-bar.qw-landing-page .site-header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar.qw-landing-page .site-header {
    top: 46px !important;
  }
}

/* ── White text for contrast on dark hero ── */
body.qw-landing-page .site-header a,
body.qw-landing-page .site-branding .site-title a,
body.qw-landing-page .site-branding .site-description {
  color: #fff !important;
}

body.qw-landing-page .main-navigation ul.menu > li > a {
  color: rgba(255,255,255,.92) !important;
}

body.qw-landing-page .main-navigation ul.menu > li > a:hover {
  color: #fff !important;
}

body.qw-landing-page .main-navigation ul.menu > li.current-menu-item > a,
body.qw-landing-page .main-navigation ul.menu > li.current_page_item > a {
  color: #fff !important;
}

/* Underline in white */
body.qw-landing-page .main-navigation ul.menu > li > a::after {
  background: rgba(255,255,255,.7) !important;
}

/* ── Logo: invert to white ── */
body.qw-landing-page .site-branding .custom-logo-link img {
  filter: brightness(0) invert(1) !important;
  transition: filter .35s ease !important;
}

/* ── CTA keeps green (high contrast on both states) ── */
body.qw-landing-page .main-navigation ul.menu > li.qw-nav-cta > a {
  color: #fff !important;
}

/* ── Cart icon en landing (transparent header sobre hero oscuro)
   Pill semi-opaco igual al phone para que el icono no se diluya en el video. ── */
body.qw-landing-page .site-header:not(.qw-header-solid) .site-header-cart .cart-contents {
  background: rgba(15,23,42,.28) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border-color: rgba(255,255,255,.40) !important;
}
body.qw-landing-page .site-header:not(.qw-header-solid) .site-header-cart .cart-contents:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.55) !important;
}
/* Cart icon SVG mask — force white without @supports gate */
body.qw-landing-page .site-header:not(.qw-header-solid) .site-header-cart .cart-contents::after,
body.qw-landing-page .site-header:not(.qw-header-solid) #site-header-cart .cart-contents::after {
  background-color: #fff !important;
}

/* ── SOLID STATE — triggered by JS class on scroll ── */
body.qw-landing-page .site-header.qw-header-solid {
  background: #fff !important;
  border-bottom: none !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04) !important;
  backdrop-filter: blur(12px) !important;
}

body.qw-landing-page .site-header.qw-header-solid a,
body.qw-landing-page .site-header.qw-header-solid .site-branding .site-title a {
  color: var(--qwood-text) !important;
}

body.qw-landing-page .site-header.qw-header-solid .main-navigation ul.menu > li > a {
  color: var(--qwood-text) !important;
}

body.qw-landing-page .site-header.qw-header-solid .main-navigation ul.menu > li > a:hover {
  color: var(--qwood-color-primary) !important;
}

body.qw-landing-page .site-header.qw-header-solid .main-navigation ul.menu > li.current-menu-item > a,
body.qw-landing-page .site-header.qw-header-solid .main-navigation ul.menu > li.current_page_item > a {
  color: var(--qwood-color-primary) !important;
}

body.qw-landing-page .site-header.qw-header-solid .main-navigation ul.menu > li > a::after {
  background: var(--qwood-color-primary) !important;
}

/* Logo: revert to normal colors */
body.qw-landing-page .site-header.qw-header-solid .site-branding .custom-logo-link img {
  filter: none !important;
}

/* CTA stays green on both states */
body.qw-landing-page .site-header.qw-header-solid .main-navigation ul.menu > li.qw-nav-cta > a {
  color: #fff !important;
}

/* Cart icon en estado solid — blanco sólido con sombra (audit 2026-05-07) */
body.qw-landing-page .site-header.qw-header-solid .site-header-cart .cart-contents {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06) !important;
}
@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  body.qw-landing-page .site-header.qw-header-solid .site-header-cart .cart-contents::after {
    background-color: var(--qwood-text) !important;
  }
}

/* ── Mobile toggle: white on dark hero ── */
body.qw-landing-page .qw-mobile-toggle {
  background: transparent !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.qw-landing-page .qw-mobile-toggle:hover,
body.qw-landing-page .qw-mobile-toggle:focus-visible {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.4) !important;
}
/* Mobile toggle: revert on solid state */
body.qw-landing-page .site-header.qw-header-solid .qw-mobile-toggle {
  background: #fff !important;
  border-color: rgba(15,23,42,.10) !important;
  color: var(--qwood-text) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
}

/* ==========================================================
   2f) PADDING-TOP FALLBACK — prevents content hiding under fixed nav
   JS refines this with actual header height via ResizeObserver.
   ========================================================== */
/* Padding-top only when header is truly fixed (JS refines via ResizeObserver).
   Non-landing pages have position:relative header — no padding needed.
   Kept as 0 fallback; JS sets actual value only if header is fixed/sticky. */
body:not(.qw-landing-page) .site-content {
  padding-top: 0;
}
/* Landing pages: JS-driven via .qw-header-solid class */
body.qw-landing-page .site-content {
  padding-top: 0;
  transition: padding-top .3s ease;
}

/* ==========================================================
   3) MINI-CART — PILL (header cart trigger)
   Rediseñado desde cero — 2026-03-24
   ========================================================== */

/* Kill native tooltips & tax labels in header scope */
.site-header-cart [role="tooltip"],
.site-header-cart .tooltip,
.site-header-cart .tooltipster-base,
.site-header-cart .tippy-box {
  display: none !important;
}
.site-header-cart a.cart-contents[title]::before,
.site-header-cart a.cart-contents[title]::after {
  display: none !important;
  content: none !important;
}
.site-header-cart .tax_label,
.site-header-cart small.tax_label,
.site-header-cart .widget_shopping_cart .total .tax_label,
.site-header-cart .widget_shopping_cart .total small.tax_label {
  display: none !important;
}

/* ── Cart icon (icon-only pill, hermano del phone pill) ──
   Antes: 40×40 sin borde → invisible sobre el hero oscuro y desconectado del
   phone pill. Ahora: 44×44 con borde sutil 1px que iguala al phone, mejorando
   contraste real sobre cualquier fondo y dando coherencia visual al cluster
   [cart][phone] del header. ── */
.site-header-cart .cart-contents {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  font-size: 0 !important;
  color: transparent !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  position: relative !important;
}
.site-header-cart .cart-contents:hover {
  background: var(--qwood-color-primary-soft, rgba(27,207,23,.08)) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.16), 0 3px 8px rgba(15,23,42,.10) !important;
  transform: translateY(-1px) !important;
}
/* Hide text: amount, count, any text nodes */
.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .count,
.site-header-cart .cart-contents span {
  display: none !important;
}
/* Hide dropdown panel entirely — no hover reveal */
#site-header-cart > li:last-child {
  display: none !important;
}

/* Hide Storefront icon, show SVG mask — icon-only cart */
.site-header-cart .cart-contents::before {
  display: none !important;
  content: none !important;
}
/* Cart icon via SVG mask — higher specificity to beat Storefront defaults */
body .site-header .site-header-cart .cart-contents::after,
body .site-header #site-header-cart .cart-contents::after {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  background-color: var(--qwood-text, #0f172a) !important;
  -webkit-mask: var(--qw-ico-bag-prem) center/contain no-repeat !important;
  mask: var(--qw-ico-bag-prem) center/contain no-repeat !important;
  transition: background-color .18s ease !important;
}
.site-header-cart .cart-contents:hover::after {
  background-color: var(--qwood-color-primary) !important;
}

/* Focus state */
.site-header-cart .cart-contents:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--qwood-color-primary-ring) !important;
}

/* ==========================================================
   4) MINI-CART — DROPDOWN PANEL
   Padding authority: widget_shopping_cart_content
   ========================================================== */

#site-header-cart > li:last-child {
  padding: 12px !important;
}

.site-header-cart .widget_shopping_cart,
#site-header-cart > li:last-child .widget_shopping_cart {
  width: 340px !important;
  max-width: calc(100vw - 24px) !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  border-radius: 18px !important;
  border: 1px solid var(--qw-border) !important;
  background: #fff !important;
  box-shadow: 0 12px 40px rgba(15,23,42,.10),
              0 2px 6px rgba(15,23,42,.04) !important;
  overflow: hidden !important;
}

.site-header-cart .widget_shopping_cart .widget_shopping_cart_content,
#site-header-cart > li:last-child .widget_shopping_cart_content {
  margin: 0 !important;
  padding: 20px !important;
  background: transparent !important;
  border: 0 !important;
}

/* ==========================================================
   5) MINI-CART — PRODUCT LIST
   ========================================================== */
.site-header-cart .widget_shopping_cart .cart_list,
#site-header-cart > li:last-child .cart_list {
  margin: 0 !important;
  padding: 0 !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  list-style: none !important;
}

/* Scrollbar sutil */
.site-header-cart .widget_shopping_cart .cart_list::-webkit-scrollbar {
  width: 4px;
}
.site-header-cart .widget_shopping_cart .cart_list::-webkit-scrollbar-track {
  background: transparent;
}
.site-header-cart .widget_shopping_cart .cart_list::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.12);
  border-radius: 4px;
}

.site-header-cart .widget_shopping_cart .cart_list li,
.site-header-cart .widget_shopping_cart .cart_list li * {
  box-sizing: border-box !important;
}

.site-header-cart .widget_shopping_cart .cart_list li {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 14px 32px 14px 0 !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}
.site-header-cart .widget_shopping_cart .cart_list li:first-child {
  padding-top: 0 !important;
}
.site-header-cart .widget_shopping_cart .cart_list li:last-child {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}

/* Product link: grid (thumb + name) */
.site-header-cart .widget_shopping_cart .cart_list li > a:not(.remove) {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  align-items: center !important;
  column-gap: 12px !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: var(--qwood-text) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.site-header-cart .widget_shopping_cart .cart_list li > a:not(.remove):hover {
  color: var(--qwood-color-primary) !important;
}

/* Thumbnail */
.site-header-cart .widget_shopping_cart .cart_list li > a:not(.remove) img {
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
  margin: 0 !important;
  float: none !important;
}

/* Quantity line */
.site-header-cart .widget_shopping_cart .cart_list li .quantity {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding-left: 60px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--qwood-muted) !important;
  float: none !important;
}

/* Remove (×) button */
.site-header-cart .widget_shopping_cart .cart_list li a.remove {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  line-height: 26px !important;
  font-size: 16px !important;
  text-align: center !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(15,23,42,.35) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease !important;
}
.site-header-cart .widget_shopping_cart .cart_list li a.remove:hover {
  background: rgba(239,68,68,.08) !important;
  color: #dc2626 !important;
}

/* ==========================================================
   6) MINI-CART — SUBTOTAL
   ========================================================== */
.site-header-cart .widget_shopping_cart .total,
#site-header-cart > li:last-child .woocommerce-mini-cart__total {
  margin: 14px 0 0 !important;
  padding: 14px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 0 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--qwood-text) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
}
.site-header-cart .widget_shopping_cart .total strong {
  font-weight: 800 !important;
}
.site-header-cart .widget_shopping_cart .total .woocommerce-Price-amount {
  font-weight: 800 !important;
  font-size: .95rem !important;
  color: var(--qwood-text) !important;
}

/* ==========================================================
   7) MINI-CART — BUTTONS (Ver carrito + Finalizar compra)
   ========================================================== */
.site-header-cart .widget_shopping_cart .buttons,
#site-header-cart > li:last-child .woocommerce-mini-cart__buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

/* Button base reset */
.site-header-cart .widget_shopping_cart .buttons a,
.site-header-cart .widget_shopping_cart .buttons a.button {
  width: auto !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 40px !important;
  padding: .6rem 1rem !important;
  border-radius: 10px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  background-image: none !important;
  text-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
}

/* Ghost — Ver carrito */
.site-header-cart .widget_shopping_cart .buttons a.button:not(.checkout) {
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  color: var(--qwood-text) !important;
}
.site-header-cart .widget_shopping_cart .buttons a.button:not(.checkout):hover {
  background: rgba(27,207,23,.04) !important;
  border-color: rgba(27,207,23,.30) !important;
  color: var(--qwood-color-primary) !important;
}

/* Primary — Finalizar compra */
.site-header-cart .widget_shopping_cart .buttons a.checkout,
.site-header-cart .widget_shopping_cart .buttons a.button.checkout {
  background: var(--qwood-color-primary) !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(27,207,23,.18) !important;
  filter: none !important;
}
.site-header-cart .widget_shopping_cart .buttons a.checkout:hover,
.site-header-cart .widget_shopping_cart .buttons a.button.checkout:hover {
  background: var(--qwood-color-primary-dark) !important;
  box-shadow: 0 4px 14px rgba(27,207,23,.22) !important;
}

/* Focus accesible */
.site-header-cart .widget_shopping_cart .buttons a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--qwood-color-primary-ring) !important;
}

/* SVG icons in buttons */
@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  .site-header-cart .widget_shopping_cart .buttons a.button:not(.checkout)::after {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    opacity: .7 !important;
    background-color: currentColor !important;
    -webkit-mask: var(--qw-ico-bag-prem) center/contain no-repeat !important;
    mask: var(--qw-ico-bag-prem) center/contain no-repeat !important;
  }
  .site-header-cart .widget_shopping_cart .buttons a.checkout::after,
  .site-header-cart .widget_shopping_cart .buttons a.button.checkout::after {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    opacity: .85 !important;
    background-color: currentColor !important;
    -webkit-mask: var(--qw-ico-arrow-prem) center/contain no-repeat !important;
    mask: var(--qw-ico-arrow-prem) center/contain no-repeat !important;
  }
}

/* ==========================================================
   8) RESPONSIVE — MOBILE MINI-CART (≤520px)
   ========================================================== */
@media (max-width: 520px) {
  .site-header-cart .widget_shopping_cart,
  #site-header-cart > li:last-child .widget_shopping_cart {
    width: calc(100vw - 24px) !important;
  }
  .site-header-cart .widget_shopping_cart .widget_shopping_cart_content,
  #site-header-cart > li:last-child .widget_shopping_cart_content {
    padding: 16px !important;
  }
  .site-header-cart .widget_shopping_cart .buttons {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .site-header-cart .widget_shopping_cart .buttons a,
  .site-header-cart .widget_shopping_cart .buttons a.button {
    min-height: 42px !important;
  }
  .site-header-cart .cart-contents .amount { font-size: .9rem !important; }
  .site-header-cart .cart-contents .count  { font-size: .74rem !important; }
}

/* ==========================================================
   9) RESPONSIVE — MOBILE / TABLET (≤1024px)
   QWOOD custom panel handles navigation at this range.
   Flatten Storefront wrappers, hide nav.main-navigation,
   keep only: branding + cart pill + custom toggle (.qw-mobile-toggle).
   ========================================================== */
@media (max-width: 1024px) {
  /* Flatten all Storefront wrappers via display:contents */
  .site-header > .col-full {
    display: contents !important;
  }
  .storefront-primary-navigation {
    display: contents !important;
  }
  .storefront-primary-navigation > .col-full {
    display: contents !important;
  }

  /* Hide entire Storefront nav block (menu-toggle + primary + handheld).
     Cart (#site-header-cart) is a sibling, NOT inside .main-navigation. */
  nav.main-navigation,
  .main-navigation {
    display: none !important;
  }

  /* Header becomes a single flex row: [Logo] ... [Cart] [Toggle] */
  .site-header {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 0 16px !important;
    min-height: 60px !important;
    gap: 8px !important;
    backdrop-filter: blur(8px);
  }

  .site-branding {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin-right: auto !important; /* empuja cart + toggle a la derecha */
  }
  .site-branding,
  .site-branding > * {
    min-width: 0;
  }
  .site-branding .custom-logo-link {
    max-width: 100% !important;
  }
  .site-branding img,
  .site-branding .custom-logo,
  .site-branding .custom-logo-link img {
    max-height: 44px;
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Cart pill — right side.
     `width: auto` anula `.woocommerce-active .site-header .site-header-cart
     { width: 21.7391% }` de Storefront default (woocommerce.css), que dejaba
     un hueco vacío al lado del icon-only cart pill. */
  .site-header-cart,
  #site-header-cart {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    list-style: none !important;
    float: none !important;
  }
  .site-header-cart .cart-contents {
    min-height: 40px;
    padding: .38rem .7rem !important;
    gap: .4rem !important;
  }
  .site-header-cart .cart-contents .amount {
    font-size: .86rem !important;
  }
  .site-header-cart .cart-contents .count {
    font-size: .72rem !important;
  }
  /* Hide cart dropdown on mobile (no hover) */
  #site-header-cart > li:last-child {
    display: none !important;
  }

  /* QWOOD custom toggle — injected by JS */
  .qw-mobile-toggle {
    /* order:5 → keep hamburger as the rightmost item, after cart(2) + phone(4) */
    order: 5 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    color: var(--qwood-text);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .qw-mobile-toggle:hover,
  .qw-mobile-toggle:focus-visible {
    border-color: rgba(27,207,23,.26);
    box-shadow: 0 0 0 3px rgba(27,207,23,.12);
    color: var(--qwood-color-primary);
  }

  /* QWOOD custom panel — injected by JS, hidden until .is-open */
  .qw-mobile-panel {
    position: fixed;
    top: 68px;
    right: 16px;
    width: calc(100vw - 32px);
    max-width: 340px;
    padding: 20px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(15,23,42,.14), 0 4px 12px rgba(0,0,0,.06);
    z-index: 9995;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }
  .qw-mobile-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity .22s ease, transform .22s ease, visibility 0s 0s;
  }
  .qw-mobile-panel a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px !important;
    border-radius: 12px;
    border: 1px solid rgba(27,207,23,.22);
    background: var(--qwood-color-primary);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .qw-mobile-panel a:hover {
    background: var(--qwood-color-primary-dark, #1bcf17);
    border-color: var(--qwood-color-primary-dark, #1bcf17);
    color: #fff !important;
  }
  .qw-mobile-panel a.is-current {
    background: var(--qwood-color-primary-dark, #1bcf17);
    border-color: var(--qwood-color-primary-dark, #1bcf17);
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset;
  }
  .qw-mobile-panel a.qw-mobile-cta {
    background: var(--qwood-color-primary) !important;
    color: #fff !important;
    border-color: var(--qwood-color-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(27,207,23,.16) !important;
    margin-top: 6px;
  }
  .qw-mobile-panel a.qw-mobile-cta:hover {
    background: var(--qwood-color-primary-dark, #1bcf17) !important;
    color: #fff !important;
  }

  /* ── Landing pages: transparent nav ── */
  body.qw-landing-page .site-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
  }
  body.qw-landing-page .site-branding .custom-logo-link img {
    filter: brightness(0) invert(1);
    transition: filter .3s ease;
  }
  /* Toggle: glass on landing */
  body.qw-landing-page .qw-mobile-toggle {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.22) !important;
    color: #fff !important;
    backdrop-filter: blur(6px);
  }
  body.qw-landing-page .qw-mobile-toggle:hover,
  body.qw-landing-page .qw-mobile-toggle:focus-visible {
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.35) !important;
    color: #fff !important;
  }
  /* Cart pill: glass on landing */
  body.qw-landing-page .site-header-cart .cart-contents {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.22) !important;
    backdrop-filter: blur(6px) !important;
  }
  body.qw-landing-page .site-header-cart .cart-contents,
  body.qw-landing-page .site-header-cart .cart-contents * {
    color: rgba(255,255,255,.95) !important;
  }

  /* ── Solid state on scroll (landing) ── */
  body.qw-landing-page .site-header.qw-header-solid {
    background: rgba(255,255,255,.96) !important;
    box-shadow: var(--qwood-hd-shadow) !important;
    border-bottom-color: var(--qwood-hd-border) !important;
    backdrop-filter: blur(10px) !important;
  }
  body.qw-landing-page .site-header.qw-header-solid .site-branding .custom-logo-link img {
    filter: none !important;
  }
  body.qw-landing-page .site-header.qw-header-solid .qw-mobile-toggle {
    background: #fff !important;
    border-color: rgba(15,23,42,.10) !important;
    color: var(--qwood-text) !important;
    backdrop-filter: none !important;
  }
  body.qw-landing-page .site-header.qw-header-solid .site-header-cart .cart-contents {
    background: #fff !important;
    border-color: var(--qw-border) !important;
    backdrop-filter: none !important;
  }
  body.qw-landing-page .site-header.qw-header-solid .site-header-cart .cart-contents,
  body.qw-landing-page .site-header.qw-header-solid .site-header-cart .cart-contents * {
    color: var(--qwood-text) !important;
  }

  /* Admin bar compensation for mobile panel position */
  body.admin-bar .qw-mobile-panel {
    top: 92px;
  }
  @media screen and (max-width: 782px) {
    body.admin-bar .qw-mobile-panel {
      top: 106px;
    }
  }
}

/* ==========================================================
   10) RESPONSIVE — SMALL MOBILE (≤420px)
   ========================================================== */
@media (max-width: 420px) {
  .site-header {
    padding: 0 12px !important;
    min-height: 56px !important;
  }

  .site-branding img,
  .site-branding .custom-logo,
  .site-branding .custom-logo-link img {
    max-height: 40px;
  }

  /* Audit 2026-04-06: tap targets ≥44×44 (Apple HIG / WCAG AA) */
  .qw-mobile-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .site-header-cart .cart-contents {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .qw-mobile-panel a {
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: .88rem !important;
  }
}

/* ==========================================================
   10a-xs) RESPONSIVE — EXTRA SMALL MOBILE (≤360px)
   ========================================================== */
@media (max-width: 360px) {
  .qw-mobile-panel a {
    min-height: 44px; /* keep ≥44 incluso en xs (audit 2026-04-06) */
    padding: 9px 10px !important;
    font-size: .84rem !important;
    border-radius: 10px;
  }

  .qw-mobile-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px;
  }

  .site-header-cart .cart-contents {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: .32rem .55rem !important;
  }
  .site-header-cart .cart-contents .amount {
    font-size: .78rem !important;
  }
  .site-header-cart .cart-contents .count {
    font-size: .66rem !important;
  }
}

/* ==========================================================
   10b) MINI-CART — WIDGET TITLE / ACCESSIBLE TEXT HIDING
   Storefront puede renderizar texto "Ver tu carrito de compra"
   dentro del dropdown (title del widget o screen-reader text).
   ========================================================== */

/* Hide any widget heading/title inside mini-cart dropdown */
.site-header-cart .widget_shopping_cart > .widgettitle,
.site-header-cart .widget_shopping_cart > .widget-title,
.site-header-cart .widget_shopping_cart > h2,
.site-header-cart .widget_shopping_cart > h3,
#site-header-cart > li:last-child > h2,
#site-header-cart > li:last-child > h3 {
  display: none !important;
}

/* If Storefront renders a.cart-contents inside the dropdown li, hide it */
#site-header-cart > li:last-child > a.cart-contents {
  display: none !important;
}

/* ==========================================================
   10c) MINI-CART — SAMPLE ITEM STYLING (Muestras)
   ========================================================== */

.woocommerce-mini-cart-item.qwood-cart-item-sample > a:not(.remove) {
  position: relative !important;
}

/* Badge "Muestra" */
.woocommerce-mini-cart-item.qwood-cart-item-sample::after {
  content: "Muestra" !important;
  display: inline-block !important;
  padding: 2px 8px !important;
  margin: 4px 0 0 60px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  color: var(--qwood-color-primary) !important;
  background: rgba(27,207,23,.07) !important;
  border-radius: 6px !important;
  line-height: 1.4 !important;
}

.woocommerce-mini-cart-item.qwood-cart-item-sample > a:not(.remove),
.woocommerce-mini-cart-item.qwood-cart-item-sample > span {
  cursor: default !important;
}

/* ==========================================================
   11) FULLCALENDAR (Installer UI) — kept here for Storefront shell scope
   Uses QWOOD SSOT green (#1bcf17)
   ========================================================== */
.fc-day-today { background: rgba(27,207,23,.06) !important; }

.fc-event {
  background: #1bcf17 !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-weight: 500;
}

.fc .fc-button {
  background: #1bcf17 !important;
  border: none !important;
  font-weight: 600;
  border-radius: .5rem !important;
  padding: .4rem .8rem;
}
.fc .fc-button:hover { background: #1bcf17 !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: #1bcf17 !important; }

.fc-toolbar-title {
  font-size: 1.3rem;
  color: #202124;
  font-weight: 600;
  font-family: "Montserrat", Arial, sans-serif;
}

/* ==========================================================
   12) FILE PREVIEW TOOLTIP (admin/installer context)
   ========================================================== */
.custom-file-preview {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.custom-file-preview .file-name {
  font-weight: 500;
  margin-right: 8px;
}
.custom-file-preview .view-link {
  color: #0073aa;
  text-decoration: underline;
  font-size: 0.9em;
}
.custom-file-preview .file-tooltip {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 999;
  background: #fff;
  border: none;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(15,23,42,.12);
}
.custom-file-preview:hover .file-tooltip { display: block; }
.custom-file-preview img {
  max-width: 180px;
  max-height: 180px;
  border-radius: 4px;
}

/* ==========================================================
   2e) MOBILE NAV PANEL — CONSOLIDATED (≤1024px)
   Removed: duplicate glass/blur panel that overrode section 2c.
   Authority for mobile panel styles is now ONLY in section 2c above.
   ========================================================== */
/* (intentionally empty — all mobile panel rules live in section 2c) */

/* ==========================================================
   10) HEADER PHONE CTA — click-to-call sibling to cart
   Rendered by qwood_render_header_phone() at storefront_header
   priority 59 so it sits in the DOM just before .site-header-cart.
   Desktop: icon + "633 799 827" visible (readable for older users).
   Mobile: icon-only, label stays accessible to screen readers; tap = call.
   Shares the SVG-mask icon strategy of section 3.
   ========================================================== */

:root {
  --qw-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Container UL — same outer reset pattern as .site-header-cart */
.site-header-phone,
#site-header-phone {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}
.site-header-phone .site-header-phone__item {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Anchor — big, legible tap target (WCAG 2.5.5 minimum 44px) */
.site-header-phone .phone-contents {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  padding: 0 .95rem !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06) !important;
  color: var(--qwood-text, #0f172a) !important;
  font-family: var(--qwood-font, 'Montserrat', system-ui, sans-serif) !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.site-header-phone .phone-contents:hover {
  background: var(--qwood-color-primary-soft, rgba(27,207,23,.08)) !important;
  color: var(--qwood-color-primary, #1bcf17) !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.16), 0 3px 8px rgba(15,23,42,.10) !important;
  transform: translateY(-1px) !important;
}
.site-header-phone .phone-contents:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--qwood-color-primary-ring, rgba(27,207,23,.28)), 0 6px 16px rgba(15,23,42,.10) !important;
}
.site-header-phone .phone-contents:hover .phone-contents__icon,
.site-header-phone .phone-contents:focus-visible .phone-contents__icon {
  background-color: var(--qwood-color-primary, #1bcf17) !important;
}

/* Phone icon — SVG mask, matches cart icon weight */
.site-header-phone .phone-contents__icon {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-color: var(--qwood-text, #0f172a) !important;
  -webkit-mask: var(--qw-ico-phone) center/contain no-repeat !important;
  mask: var(--qw-ico-phone) center/contain no-repeat !important;
  transition: background-color .18s ease !important;
  flex: 0 0 auto !important;
}

/* ── Anti-squeeze: keep phone from being crushed when header narrows ── */
.site-header-phone,
#site-header-phone {
  flex: 0 0 auto !important;
  min-width: 0 !important; /* allow parent to negotiate, not us */
}
.site-header-phone .phone-contents {
  flex-shrink: 0 !important;
}

/* ── DESKTOP ≥1360px: icon + full number visible (conversión máxima)
   — Subido de 1280→1360 (2026-04-24) porque en landings con hero oscuro
   y 5+ items de menú el pill chocaba con el último menu item. 1360 cubre
   MacBook Pro 14"+16", laptops 1366+, desktops 1440+. 1280 (iPad Pro
   landscape, laptops pequeñas) cae al icon-only. */
@media (min-width: 1360px) {
  .site-header-phone,
  #site-header-phone {
    /* order:4 → after cart (order:3) so phone sits to the right of the basket */
    order: 4 !important;
    margin-left: 12px !important;
  }
  .site-header-phone .phone-contents {
    width: auto !important;
    padding: 0 .95rem !important;
    gap: .5rem !important;
  }
  .site-header-phone .phone-contents__label {
    display: inline !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    /* unset sr-only positioning from base */
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    border: 0 !important;
  }
}

/* ── TABLET/LAPTOP 768–1359px: icon-only pill (evita solape con menu+cart) ── */
@media (min-width: 768px) and (max-width: 1359.98px) {
  .site-header-phone,
  #site-header-phone {
    /* order:4 → after cart (order:2 in mobile/tablet block) and before mobile toggle (order:5) */
    order: 4 !important;
    margin-left: 8px !important;
  }
  .site-header-phone .phone-contents {
    width: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    gap: 0 !important;
  }
  .site-header-phone .phone-contents__label {
    /* sr-only */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* ── MOBILE ≤767px: icon-only pill 44×44 (WCAG 2.5.5 AAA tap target) ── */
@media (max-width: 767.98px) {
  .site-header-phone,
  #site-header-phone {
    /* order:4 → after cart (order:2) and before hamburger toggle (order:5) */
    order: 4 !important;
    margin-left: 4px !important;
  }
  .site-header-phone .phone-contents {
    width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    gap: 0 !important;
  }
  .site-header-phone .phone-contents__label {
    /* sr-only */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* ── Landing pages (transparent header over dark hero)
   Pill semi-opaco (no 100% transparent) para que el número sea siempre
   legible aunque haya items de menu vecinos detrás. */
body.qw-landing-page .site-header:not(.qw-header-solid) .site-header-phone .phone-contents {
  background: rgba(15,23,42,.28) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border-color: rgba(255,255,255,.40) !important;
  color: #fff !important;
}
body.qw-landing-page .site-header:not(.qw-header-solid) .site-header-phone .phone-contents__icon {
  background-color: #fff !important;
}
body.qw-landing-page .site-header:not(.qw-header-solid) .site-header-phone .phone-contents:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
}
body.qw-landing-page .site-header:not(.qw-header-solid) .site-header-phone .phone-contents:hover .phone-contents__icon {
  background-color: #fff !important;
}
body.qw-landing-page .site-header.qw-header-solid .site-header-phone .phone-contents {
  border-color: rgba(15,23,42,.10) !important;
  color: var(--qwood-text, #0f172a) !important;
}
body.qw-landing-page .site-header.qw-header-solid .site-header-phone .phone-contents__icon {
  background-color: var(--qwood-text, #0f172a) !important;
}