/* ============================================================
   NAV CATÁLOGO — panel jerárquico (accordion L0 + drill-down)
   Tema bw · generado 2026-09-29
   ============================================================ */
/* --- Botón CTA "Todos los productos": píldora premium --- */
.bw-header__nav-link--catalog{
  align-self:center;
  display:inline-flex;align-items:center;gap:9px;
  height:36px;padding:0 18px;margin:0 6px 0 0;
  border-radius:999px;border:0;
  background:var(--bw-accent,#FF6B00);color:#fff;
  font:700 12.5px/1 var(--bw-font-ui,inherit);
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  cursor:pointer;
  transition:background .18s ease,box-shadow .18s ease;
  box-shadow:0 2px 10px rgb(0 0 0/.08);
}
.bw-header__nav-link--catalog:hover{
  background:var(--bw-accent-dark,#D35400);color:#fff;
  box-shadow:0 4px 16px rgb(0 0 0/.14);
}
.bw-header__nav-link--catalog::after{display:none}
.bw-header__nav-link--catalog .bw-caret{opacity:.85}
/* icono rejilla */
.bw-header__nav-link--catalog .grid-ico{flex:0 0 auto}

/* --- Desktop: la fila de navegación usa todo el ancho disponible --- */
@media (min-width:1680px){
  .bw-header__nav-list{max-width:none;justify-content:space-between}
}
/* --- El megamenú pasa a ser un panel limpio de 380–520px --- */
@media (min-width:1680px){
  .bw-mega{
    left:auto;right:auto;
    left:max(var(--bw-gutter,20px),calc((100% - var(--bw-maxw,1240px))/2));
    width:clamp(380px,34vw,520px);
    border:1px solid var(--bw-line,#E5E7EA);border-top:0;
    border-radius:0 0 var(--bw-radius,12px) var(--bw-radius,12px);
    box-shadow:0 28px 64px rgb(21 23 25/.16);
    z-index:1001;
  }
}
.bw-mega__box{padding:0}

/* --- Cabecera del panel --- */
.bw-catnav{display:flex;flex-direction:column;font-family:var(--bw-font-ui,inherit)}
.bw-catnav__head{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  min-height:48px;padding:6px 14px;
  border-bottom:1px solid var(--bw-line,#E5E7EA);
}
.bw-catnav__back{
  display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--bw-line,#E5E7EA);border-radius:999px;
  background:#fff;color:var(--bw-ink,#151719);
  font:600 12.5px var(--bw-font-ui,inherit);
  padding:6px 12px;cursor:pointer;white-space:nowrap;
  transition:color .15s ease,border-color .15s ease;
}
.bw-catnav__back:hover{color:var(--bw-accent,#FF6B00);border-color:var(--bw-accent,#FF6B00)}
.bw-catnav__title{
  flex:1;min-width:0;
  font:600 13px var(--bw-font-ui,inherit);color:var(--bw-muted,#6B7178);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bw-catnav__scroll{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  max-height:min(70vh,650px);
  padding:10px 12px 14px;
}
@media (min-width:1680px){
  .bw-catnav__scroll{scrollbar-width:thin}
}

/* --- Filas: unidad táctil completa --- */
.bw-catnav ul{list-style:none;margin:0;padding:0}
.bw-catnav__row{
  display:flex;align-items:center;gap:10px;
  width:100%;min-height:44px;padding:9px 12px;
  border:0;border-radius:8px;background:none;
  font:600 14.5px/1.3 var(--bw-font-ui,inherit);
  color:var(--bw-ink,#151719);text-align:left;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
a.bw-catnav__row{text-decoration:none}
.bw-catnav__row:hover{background:var(--bw-gray,#F4F5F6)}
.bw-catnav__row .lbl{flex:1;min-width:0;overflow-wrap:anywhere}
.bw-catnav__row .chev,.bw-catnav__row .go{
  flex:0 0 auto;color:var(--bw-muted,#6B7178);
  transition:transform .2s ease,color .15s ease;
}
.bw-catnav__row:hover .chev,.bw-catnav__row:hover .go{color:var(--bw-accent,#FF6B00)}
/* estado abierto: texto en color marca + fondo tenue */
.bw-catnav__row[aria-expanded="true"]{
  color:var(--bw-accent,#FF6B00);
  background:color-mix(in srgb,var(--bw-accent,#FF6B00) 7%,#fff);
}
.bw-catnav__row[aria-expanded="true"] .chev{transform:rotate(90deg);color:var(--bw-accent,#FF6B00)}
/* fila hoja: la flecha sugiere navegación */
.bw-catnav__row .go{opacity:.55}

/* --- Acordeón raíz: hijos con guía vertical --- */
.bw-catnav__kids{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .2s ease;
  margin-left:16px;padding-left:12px;
  border-left:1px solid var(--bw-line,#E5E7EA);
}
.bw-catnav__kids>div{overflow:hidden;min-height:0}
.bw-catnav__item.open>.bw-catnav__kids{grid-template-rows:1fr}
.bw-catnav__kids .bw-catnav__row{
  min-height:44px;padding:9px 10px;
  font:500 14px/1.3 var(--bw-font-ui,inherit);
}
/* separadores muy sutiles */
.bw-catnav__root>li+li{border-top:1px solid rgb(21 23 25/.045)}
.bw-catnav__kids .bw-catnav__row+.bw-catnav__row{border-top:1px solid rgb(21 23 25/.035)}

/* --- Enlace "Ver todos" discreto --- */
.bw-catnav__all{
  display:inline-flex;align-items:center;gap:7px;
  margin:6px 0 8px;padding:8px 10px;
  border-radius:8px;
  font:600 13px var(--bw-font-ui,inherit);
  color:var(--bw-accent,#FF6B00);text-decoration:none;
}
.bw-catnav__all:hover{background:color-mix(in srgb,var(--bw-accent,#FF6B00) 7%,#fff);text-decoration:underline}
.bw-catnav__view{margin:0}
.bw-catnav__view.bw-catnav__view--drill{
  border-left:1px solid var(--bw-line,#E5E7EA);
  margin-left:4px;padding-left:12px;
}
/* transición de vistas drill */
.bw-catnav__anim{animation:bwcatfade .18s ease}
@keyframes bwcatfade{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}

/* --- Filas de producto (miniatura + nombre) --- */
.bw-catnav__prow{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:6px 10px;border:0;border-radius:8px;background:none;font:500 13.5px/1.3 var(--bw-font-ui,inherit);color:var(--bw-ink,#151719);text-align:left;cursor:pointer;text-decoration:none;transition:background .15s ease}
.bw-catnav__prow:hover{background:var(--bw-gray,#F4F5F6)}
.bw-catnav__prow .th{flex:0 0 34px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--bw-line,#E5E7EA);border-radius:6px;overflow:hidden}
.bw-catnav__prow .th img{max-width:100%;max-height:100%;object-fit:contain}
.bw-catnav__prow .th svg{width:20px;height:20px;color:var(--bw-accent)}
.bw-catnav__prow+.bw-catnav__prow{border-top:1px solid rgb(21 23 25/.035)}
.bw-catnav__shapeviz{flex:0 0 34px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--bw-line,#E5E7EA);border-radius:6px;color:var(--bw-accent,#FF6B00);overflow:hidden}
.bw-catnav__shapeviz svg{width:22px;height:22px}
.bw-catnav__shapeviz img{max-width:100%;max-height:100%;object-fit:contain}

/* ============================================================
   MODO COMPACTO — burger + drawer (ancho medido: no cabe antes)
   ============================================================ */
/* DRAWER: modo medido por clase. NUNCA 3 filas */
#bw-header.bw-header--drawer .bw-nav-toggle{display:flex}
#bw-nav.bw-navmode--3{
    position:fixed;inset:0 auto 0 0;top:0;z-index:990;
    background:#fff;
    transform:translateX(-100%);
    transition:transform 220ms ease;
    overflow-y:auto;overscroll-behavior:contain;
    width:min(380px,92vw);
    box-shadow:0 24px 64px rgb(21 23 25/.18);
    border-bottom:0;
  }
#bw-nav.bw-navmode--3 .is-open{transform:none}
#bw-nav.bw-navmode--3 .bw-header__nav-list{
    flex-direction:column;align-items:stretch;
    height:auto;width:100%;max-width:none;
    padding:64px 16px 20px;gap:0;
  }
#bw-nav.bw-navmode--3 .bw-header__nav-list>li{display:block;border-bottom:1px solid var(--bw-line,#E5E7EA)}
#bw-nav.bw-navmode--3 .bw-header__nav-list>li:first-child .bw-header__nav-link{padding-left:4px}
#bw-nav.bw-navmode--3 .bw-header__nav-link{
    width:100%;justify-content:space-between;
    padding:15px 4px;font-size:16.5px;white-space:normal;
  }
#bw-nav.bw-navmode--3 .bw-header__nav-link::after{display:none}
#bw-nav.bw-navmode--3 .bw-header__nav-link--catalog{
    justify-content:flex-start;height:auto;margin:12px 4px;
    padding:13px 20px;font-size:13.5px;border-radius:999px;white-space:nowrap;
  }
#bw-nav.bw-navmode--3 .bw-nav-close{
    position:absolute;top:14px;right:14px;z-index:5;
    width:44px;height:44px;border:1.5px solid var(--bw-line,#E5E7EA);
    background:#fff;border-radius:var(--bw-radius-sm,8px);
    font-size:20px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
#bw-nav.bw-navmode--3 /* el panel pasa a formar parte del drawer */
  .bw-mega{
    position:static;width:100%;max-width:none;
    border:0;border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
    display:none;
  }
#bw-nav.bw-navmode--3 .bw-mega.is-open{display:block}
#bw-nav.bw-navmode--3 .bw-catnav__scroll{max-height:none;overflow:visible;padding:6px 8px 14px}
#bw-nav.bw-navmode--3 .bw-catnav__head{border-bottom:0;min-height:40px;padding:2px 8px}
#bw-nav.bw-navmode--3 .bw-catnav__back{margin-top:4px}
@media (min-width:1680px){
  .bw-nav-close{display:none}
}
.bw-catnav__prow .lbl small.dim{display:block;margin-top:2px;font:600 11.5px/1.25 var(--bw-font-ui,inherit);color:var(--bw-accent-dark,#D35400)}

/* === NAV RESPONSIVE MEDIDO: modos 1 fila / 2 filas (nunca 3; drawer = clase modo 3) === */
#bw-nav.bw-navmode--1 .bw-header__nav-list,#bw-nav.bw-navmode--2 .bw-header__nav-list{flex-wrap:nowrap}
#bw-nav.bw-navmode--2 .bw-header__nav-list{flex-wrap:wrap;height:auto;min-height:50px;padding:2px 0;justify-content:space-between;align-content:stretch}
#bw-nav.bw-navmode--2 .bw-header__nav-list>li{height:48px;flex:0 0 auto}
#bw-nav.bw-navmode--2 .bw-header__nav-list>li.bw-nav-br{flex:1 0 100%;width:100%;height:0;min-height:0;padding:0;margin:0;border:0;overflow:hidden}
@media (max-width:767px){
  /* Fallback sin JS: drawer seguro en móvil */
  #bw-nav{position:fixed;inset:0 auto 0 0;top:0;z-index:990;background:#fff;transform:translateX(-100%);transition:transform 220ms ease;overflow-y:auto;width:min(380px,92vw);box-shadow:0 24px 64px rgb(21 23 25/.18)}
  #bw-nav.is-open{transform:none}
  .bw-nav-toggle{display:flex}
}

/* === Megamenú escritorio formato Camaloon: panel ancho en columnas === */
.bw-megagrid{display:none}
@media (min-width:1680px){
  .bw-mega{
    left:max(var(--bw-gutter,20px),calc((100% - var(--bw-maxw,1240px))/2));
    right:max(var(--bw-gutter,20px),calc((100% - var(--bw-maxw,1240px))/2));
    width:auto;max-width:var(--bw-maxw,1240px);
    border:1px solid var(--bw-line,#E5E7EA);border-top:0;
    border-radius:0 0 var(--bw-radius,12px) var(--bw-radius,12px);
    box-shadow:0 28px 64px rgb(21 23 25/.16);z-index:1001;
  }
  .bw-mega .bw-catnav__head{display:none}
  .bw-mega .bw-catnav__root{display:none!important}
  .bw-mega #bw-catnav-drill{display:none!important}
  .bw-mega .bw-catnav__scroll{max-height:min(76vh,640px);padding:24px 30px 26px}
  .bw-megagrid{display:block;columns:5 190px;column-gap:42px}
  .bw-megagrid__col{break-inside:avoid;margin:0 0 18px}
  .bw-megagrid__title{display:block;font:800 12.5px var(--bw-font-ui,inherit);letter-spacing:.05em;text-transform:uppercase;color:var(--bw-ink,#151719);text-decoration:none;margin:0 0 8px}
  .bw-megagrid__title:hover{color:var(--bw-accent,#FF6B00)}
  .bw-megagrid__title::after{content:' ›';color:var(--bw-accent,#FF6B00)}
  .bw-megagrid__link{display:block;font:400 14px/1.45 var(--bw-font-ui,inherit);color:#4A4F55;text-decoration:none;padding:2.5px 0}
  .bw-megagrid__link:hover{color:var(--bw-accent,#FF6B00)}
  .bw-megagrid__all{display:inline-block;margin-top:7px;font:600 12.5px var(--bw-font-ui,inherit);color:var(--bw-accent,#FF6B00);text-decoration:none}
  .bw-megagrid__all:hover{text-decoration:underline}
}

/* Megamenú completo sin scroll: columnas auto según ancho */
@media (min-width:1680px){
  .bw-mega .bw-catnav__scroll{max-height:none;overflow:visible;padding:24px 30px 26px}
  .bw-megagrid{columns:auto 165px;column-gap:40px}
  .bw-megagrid__col{margin:0 0 14px}
}

/* Altura disponible real; scroll solo cuando el contenido no cabe */
.bw-mega .bw-catnav__scroll{max-height:calc(100vh - 150px)}
@media (min-width:1680px){
  .bw-mega .bw-catnav__scroll{max-height:calc(100vh - 150px);overflow-y:auto}
}

/* Fallback generoso: la altura exacta la fija el JS según el hueco real */
.bw-mega .bw-catnav__scroll{max-height:calc(100vh - 210px)}
@media (min-width:1680px){.bw-mega .bw-catnav__scroll{max-height:calc(100vh - 210px);overflow-y:auto}}


/* === Megamenú sin scroll: panel más ancho + ritmo compacto === */
@media (min-width:1680px){
  .bw-mega{left:20px;right:20px;max-width:1520px;margin-inline:auto}
  .bw-mega .bw-catnav__scroll{padding:18px 28px 18px}
  .bw-megagrid{columns:auto 165px;column-gap:36px}
  .bw-megagrid__col{margin:0 0 11px}
  .bw-megagrid__title{margin:0 0 6px}
  .bw-megagrid__link{padding:1.6px 0;line-height:1.38}
  .bw-megagrid__all{margin-top:5px}
}


/* === Megamenú en columnas también en escritorios medianos (1024-1679px) === */
@media (min-width:1024px) and (max-width:1679px){
  #bw-nav:not(.bw-navmode--3) .bw-mega{left:20px;right:20px;width:auto;max-width:none}
  #bw-nav:not(.bw-navmode--3) .bw-mega .bw-catnav__head{display:none}
  #bw-nav:not(.bw-navmode--3) .bw-mega .bw-catnav__root{display:none!important}
  #bw-nav:not(.bw-navmode--3) .bw-mega #bw-catnav-drill{display:none!important}
  #bw-nav:not(.bw-navmode--3) .bw-mega .bw-catnav__scroll{max-height:none;overflow:visible;padding:14px 22px}
  #bw-nav:not(.bw-navmode--3) .bw-megagrid{display:block;columns:auto 152px;column-gap:28px}
  #bw-nav:not(.bw-navmode--3) .bw-megagrid__col{break-inside:avoid;margin:0 0 8px}
  #bw-nav:not(.bw-navmode--3) .bw-megagrid__title{display:block;font:800 11.5px var(--bw-font-ui,inherit);letter-spacing:.05em;text-transform:uppercase;color:var(--bw-ink,#151719);text-decoration:none;margin:0 0 5px}
  #bw-nav:not(.bw-navmode--3) .bw-megagrid__title:hover{color:var(--bw-accent,#FF6B00)}
  #bw-nav:not(.bw-navmode--3) .bw-megagrid__title::after{content:' ›';color:var(--bw-accent,#FF6B00)}
  #bw-nav:not(.bw-navmode--3) .bw-megagrid__link{display:block;font:400 13px/1.32 var(--bw-font-ui,inherit);color:#4A4F55;text-decoration:none;padding:1.2px 0}
  #bw-nav:not(.bw-navmode--3) .bw-megagrid__link:hover{color:var(--bw-accent,#FF6B00)}
  #bw-nav:not(.bw-navmode--3) .bw-megagrid__all{display:inline-block;margin-top:4px;font:600 11.5px var(--bw-font-ui,inherit);color:var(--bw-accent,#FF6B00);text-decoration:none}
  #bw-nav:not(.bw-navmode--3) .bw-megagrid__all:hover{text-decoration:underline}
}


/* En modo columnas el panel no se recorta: la altura la gestiona el scroll interno */
@media (min-width:1024px){
  #bw-nav:not(.bw-navmode--3) .bw-mega{max-height:none;overflow:visible}
}


/* Texto del botón «Todos los productos» centrado compensando la flecha */
.bw-header__nav-link--catalog{padding-left:39px}
#bw-mega-trigger{padding-left:39px}

/* === Overrides 2026-10-14 (cache-bust vía ?v=18) === */
/* Grid de familias: 3 tarjetas inferiores reparten la fila (era span 3 => hueco) */
.bw-coll__card--c{grid-column:span 4}
/* Compactación de emergencia del menú: solo la aplica el JS cuando la fila
   única no cabe; evita el salto a dos líneas. Dos niveles: fit y fit2. */
#bw-nav.bw-navmode--fit .bw-header__nav-list,
#bw-nav.bw-navmode--fit2 .bw-header__nav-list{gap:0!important}
#bw-nav.bw-navmode--fit .bw-header__nav-link{padding:0 2px!important;font-size:12px!important;gap:3px!important}
#bw-nav.bw-navmode--fit .bw-header__nav-link--catalog,
#bw-nav.bw-navmode--fit #bw-mega-trigger{padding-left:24px!important}
#bw-nav.bw-navmode--fit .bw-nav-cta{padding:4px 6px!important;font-size:12px!important;margin:4px 0!important}
#bw-nav.bw-navmode--fit2 .bw-header__nav-link{padding:0 1px!important;font-size:11.5px!important;gap:2px!important}
#bw-nav.bw-navmode--fit2 .bw-header__nav-link--catalog,
#bw-nav.bw-navmode--fit2 #bw-mega-trigger{padding-left:20px!important}
#bw-nav.bw-navmode--fit2 .bw-nav-cta{padding:3px 5px!important;font-size:11.5px!important;margin:4px 0!important}
/* A 1280px la fila necesita el ancho casi completo: reducir el gutter del menú */
#bw-nav.bw-navmode--fit2 .bw-header__nav-list{width:calc(100% - 32px)!important}
#bw-nav.bw-navmode--fit2 .bw-nav-cta span[aria-hidden]{display:none!important}

/* Más vendidos: scrollbar nativa oculta; flechas circulares a media altura de las tarjetas */
.bw-scroller .products{scrollbar-width:none!important;padding-bottom:2px!important}
.bw-scroller .products::-webkit-scrollbar{display:none}
#bw-scroller{position:relative}
.bw-scroller__btn--edge{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border-color:transparent;box-shadow:0 8px 22px rgba(20,20,20,.16)}
.bw-scroller__btn--prev{left:10px}
.bw-scroller__btn--next{right:10px}
.bw-scroller__btn--edge.is-off{opacity:.35;pointer-events:none}
@media (max-width:575px){.bw-scroller__btn--edge{width:36px;height:36px}.bw-scroller__btn--prev{left:6px}.bw-scroller__btn--next{right:6px}}

/* ===== Ficha de producto: galeria completa sin recorte, alineada al bloque de info (borde sup. foto = 1a linea H1; borde inf. = "Personalizable con tu diseno") ===== */
@media (min-width: 992px) {
  .product__images .product__carousel .carousel-inner{display:block!important;width:100%!important}
  .product__images .carousel-item{width:100%!important;height:100%;text-align:center}
  .product__images .carousel-item picture{display:block!important;height:100%}
  .product__images .carousel-item img.img-fluid{
    display:block!important;margin:0 auto!important;
    width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
    object-fit:contain!important;object-position:center top!important;
  }
}
@media (max-width: 991.98px) {
  .product__images .product__carousel .carousel-inner{display:block!important}
  .product__images .carousel-item picture{display:block!important}
  .product__images .carousel-item img.img-fluid{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center top!important}
}