/* Komfy header — megamenu estilo Calm */

/* Komfy design tokens — colors + fonts */
:root {
  --komfy-blue: #0047BB;
  --komfy-blue-700: #003a99;
  --komfy-blue-50: #e8efff;
  --komfy-yellow: #F5C518;
  --komfy-yellow-soft: #FFE99A;
  --komfy-tiza: #FAF0E6;
  --komfy-tiza-2: #F3E6D6;
  --komfy-carbon: #1C1C1C;
  --komfy-muted: #6B6B6B;
  --komfy-line: #E8E2D6;
  --komfy-line-strong: #D8D0BF;
  --komfy-bg: #FFFFFF;
  --komfy-bg-soft: #FBF8F2;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

/* Hide native Tiendanube ad-bar (we use kh-announce instead) */
.section-adbar { display: none !important; }

/* Hide native Tiendanube header in case it leaks (we replaced via snipplet) */
.head-main { display: none !important; }

/* Kill Tiendanube's sticky on category-controls (Ordenar/Filtrar bar) so it doesn't
   fight our sticky header. Both were sticky at top:0 → visual overlap. */
.js-category-controls,
.category-controls,
section.category-controls,
section.js-category-controls {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 0 !important;
  clear: both;
}
.category-controls.category-controls-transparent {
  background-color: var(--main-background, #fff) !important;
}
.js-category-controls-prev,
.category-controls-sticky-detector { display: none !important; }

/* Prevent horizontal overflow on mobile from any leaking element.
   IMPORTANT: usar `overflow-x: clip` y NO `hidden`. Con `hidden` html/body se
   convierten en scroll container y rompen `position: sticky` del header
   (queda quieto y no acompaña el scroll). `clip` clipea sin crear scroll context.
   También reseteo `margin/padding` del body para que no quede una franja
   blanca arriba del banner amarillo. */
html, body { overflow-x: clip; max-width: 100vw; margin: 0; padding: 0; }
/* nubesdk-root / runtime no deben generar espacio antes del header */
#nubesdk-root, #nubesdk-runtime { margin: 0; padding: 0; }

/* Sticky header — acompaña el scroll, queda pegado arriba como Calm. */
.kh {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 99999 !important;
  font-family: var(--font-body);
  background: transparent;
}

/* Cart modal por encima del header — el header tiene z-index 99999 (alto para
   tapar todo el page content). Pero el carrito ajax debe estar por encima
   cuando se abre. Va con z-index mayor + el backdrop también. */
#modal-cart,
.modal.cart,
.modal-fullscreen-cart,
.js-modal[data-modal-url="modal-fullscreen-cart"],
.modal-backdrop,
.js-modal-backdrop {
  z-index: 100001 !important;
}

/* Search drawer — overlay full-screen con panel blanco que baja desde arriba.
   Responsive: en desktop el form va centrado a max-width 720px; en mobile/iPad
   ocupa todo el ancho con padding reducido. */
.kh-search {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100002 !important; /* arriba del cart modal */
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.kh-search.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Panel blanco que baja del top */
.kh-search-inner {
  position: relative;
  background: #fff;
  width: 100%;
  padding: 18px 24px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: translateY(-100%);
  transition: transform .25s ease;
  box-sizing: border-box;
}
.kh-search.is-open .kh-search-inner {
  transform: translateY(0);
}

/* Row que centra input + X como bloque. */
.kh-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
/* Wrapper propio — es el flex item que crece. Dentro, el form nativo
   hereda width 100% sin pelear con specificity de TN. */
.kh-search-field {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.kh-search-field form,
.kh-search-field .search-form,
.kh-search-field .form-group {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}
/* Desactivar hack anti-zoom iOS de Tiendanube — nuestro input ya usa
   font-size 16px, no necesita el truco scale(0.75)+width:133%.
   Sin esto, el input se renderiza al 75% del ancho en iOS. */
.kh-search-inner .form-control-ios,
.kh-search-inner .form-control-ios.search-input {
  width: 100% !important;
  transform: none !important;
  margin-bottom: 0 !important;
}
.kh-search-inner .search-form-ios {
  height: auto !important;
}
.kh-search-inner .search-form-ios .form-group {
  height: auto !important;
}
/* Sugerencias: el componente nativo las pone fuera del form.
   Posición absolute dentro de .kh-search-field. */
.kh-search-field > .search-suggestions,
.kh-search-field > .js-search-form-suggestions {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 6px;
}

/* Input nativo de Tiendanube — campo pill grande y limpio. */
.kh-search-inner input[type="text"],
.kh-search-inner input[type="search"],
.kh-search-inner input.form-control,
.kh-search-inner .input-group input {
  width: 100% !important;
  height: 52px !important;
  padding: 0 20px !important;
  font-size: 16px !important;
  border: 1.5px solid var(--komfy-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--komfy-carbon) !important;
  outline: none !important;
  transition: border-color .15s !important;
  box-sizing: border-box !important;
}
.kh-search-inner input[type="text"]:focus,
.kh-search-inner input[type="search"]:focus,
.kh-search-inner input.form-control:focus,
.kh-search-inner .input-group input:focus {
  border-color: var(--komfy-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,71,187,.08) !important;
}
.kh-search-inner .form-group {
  position: relative;
  width: 100% !important;
  max-width: none !important;
}
/* Ocultar el botón submit — la búsqueda es en tiempo real (autocomplete). */
.kh-search-inner .search-submit-btn,
.kh-search-inner button[type="submit"] {
  display: none !important;
}

/* Sugerencias de búsqueda (autocomplete) — estilo limpio.
   El componente nativo pone .search-suggestions FUERA del form como sibling
   directo de .kh-search-row. El posicionamiento absolute ya está en el row. */
.kh-search-inner .search-suggestions,
.kh-search-inner .js-search-form-suggestions {
  background: #fff !important;
  border: 1px solid var(--komfy-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.1) !important;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 2;
}

/* Botón cerrar (X) — mismo alto que el input para alinear centros. */
.kh-search-close {
  background: none;
  border: none;
  width: 52px;
  height: 52px;
  padding: 0;
  cursor: pointer;
  color: var(--komfy-carbon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  flex: 0 0 auto;
  transition: background .15s;
}
.kh-search-close:hover { background: var(--komfy-bg-soft); }
.kh-search-close svg { width: 22px !important; height: 22px !important; }

/* Tablet */
@media (max-width: 1024px) {
  .kh-search-inner { padding: 14px 20px; }
  .kh-search-inner input[type="text"],
  .kh-search-inner input[type="search"],
  .kh-search-inner input.form-control { height: 48px !important; font-size: 15px !important; }
  .kh-search-close { width: 48px; height: 48px; }
  .kh-search-close svg { width: 20px !important; height: 20px !important; }
}

/* Mobile */
@media (max-width: 600px) {
  .kh-search-inner { padding: 10px 12px; }
  .kh-search-row { gap: 4px; }
  .kh-search-inner input[type="text"],
  .kh-search-inner input[type="search"],
  .kh-search-inner input.form-control {
    height: 44px !important;
    font-size: 16px !important;
    padding: 0 16px !important;
  }
  .kh-search-close { width: 44px; height: 44px; }
  .kh-search-close svg { width: 20px !important; height: 20px !important; }
}

/* Home: el header flota por encima del slider/hero. El primer componente
   de la home (slider) arranca en Y=0 y el menú queda al frente. Solo aplica
   a template-home para no romper el resto de las páginas. */
body.template-home .kh {
  position: fixed !important;
  -webkit-position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

.kh-announce {
  background: #F5C518; /* Amarillo Duna — paleta de marca Komfy */
  color: var(--komfy-carbon);
  text-align: center; padding: 5px 16px;
  font-size: 12.5px; letter-spacing: .01em;
  min-height: 30px; display: flex; align-items: center; justify-content: center;
}
.kh-announce strong { font-weight: 700; }
.kh-announce-msg { animation: announce-fade .4s ease; }
@keyframes announce-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slides del announce — en desktop ambos visibles inline con " - " entre
   medio. En mobile (media query más abajo) solo el slide .is-active visible
   y rota cada 4s vía JS para hacer carrusel. */
.kh-announce-slide { display: inline; }
.kh-announce-slide[data-announce-slide="1"]::before { content: ' - '; }

.kh-wrap {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  /* Se estira en cualquier ancho (como Calm) — solo respeta los 20px
     laterales como gap a la edge del viewport. */
  margin: 6px 20px 0;
  overflow: visible;
  position: relative;
}

.kh-main {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 40px; height: 52px;
  padding: 0 24px;
  max-width: none;
}
@media (min-width: 821px) { .kh-burger { display: none !important; } }
.kh-burger { padding: 6px; display: inline-flex; color: var(--komfy-carbon); background: none; border: none; }

.kh-logo { height: 32px; display: inline-flex; align-items: center; text-decoration: none; }
.kh-logo svg { height: 32px; width: auto; }
.kh-logo img { height: 32px; width: auto; }

.kh-nav { display: flex; align-items: center; justify-content: center; gap: 8px; }
.kh-nav-item {
  font-family: 'Noto Sans', sans-serif;
  padding: 10px 14px; font-size: 14.5px; font-weight: 500; color: var(--komfy-carbon);
  position: relative; transition: color .15s;
  border-bottom: 2px solid transparent;
  background: none; border-top: none; border-left: none; border-right: none;
  text-decoration: none;
  cursor: pointer;
}
.kh-nav-item:hover,
.kh-nav-item.is-open,
.kh-nav-item.is-current {
  color: var(--komfy-blue);
  border-bottom-color: var(--komfy-blue);
}

/* "Próximamente" — punto amarillo pulsante vía CSS puro (href match) */
.kh-nav-item[href*="proximamente"],
.kh-nav-item[href*="proximos-lanzamientos"] {
  display: inline-flex; align-items: center; gap: 7px;
}
.kh-nav-item[href*="proximamente"]::after,
.kh-nav-item[href*="proximos-lanzamientos"]::after {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--komfy-yellow);
  box-shadow: 0 0 0 0 rgba(245,197,24,.55);
  animation: kh-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes kh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,197,24,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(245,197,24,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,197,24,0); }
}

.kh-actions { display: flex; align-items: center; gap: 16px; }
.kh-icon {
  padding: 6px; display: inline-flex; position: relative; color: var(--komfy-carbon);
  background: none; border: none; text-decoration: none;
}
.kh-icon:hover { color: var(--komfy-blue); }
.kh-cart-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--komfy-blue); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 999px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}

.kh-benefits { border-top: 1px solid var(--komfy-line); background: #fff; border-radius: 0 0 18px 18px; }
.kh-benefits-inner {
  display: flex; justify-content: center; align-items: center;
  gap: 28px;
  padding: 4px 24px; max-width: none;
  min-height: 26px;
}
.kh-benefit svg { color: var(--komfy-blue); }

/* Desktop default: las 3 promesas visibles en línea. En mobile (más abajo)
   se transforman en carrusel donde solo se muestra .is-active. */
.kh-benefit-slide {
  display: inline-flex;
  align-items: center; gap: 8px;
  font-size: 13px; color: var(--komfy-carbon); font-weight: 500;
  white-space: nowrap;
}
@keyframes kh-benefit-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Megamenu — offset lateral matching .kh-wrap margin so el panel
   queda alineado con el header card. Se estira con el viewport. */
.kh-mega {
  position: absolute; top: 100%; left: 20px; right: 20px;
  background: transparent;
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease;
  z-index: 100000 !important;
}
.kh-mega.is-open { max-height: 800px; }
.kh-mega-wrap { padding: 6px 0 14px; max-width: none; }

.kh-mega-panel {
  background: var(--komfy-tiza);
  border-radius: 18px;
  padding: 18px 22px;
  display: grid; grid-template-columns: 180px 1fr;
  gap: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  /* Altura mínima fija — para que todas las categorías (Living 7 subcats,
     Comedor 4 subcats, etc.) tengan el mismo alto de panel. La de menos
     subcategorías rellena con espacio vacío abajo. */
  min-height: 360px;
}
.kh-mega-category { display: none; }
.kh-mega-category.is-active { display: contents; }

.kh-mega-side { display: flex; flex-direction: column; gap: 2px; }
.kh-mega-sub {
  font-family: 'Noto Sans', sans-serif;
  text-align: left; padding: 7px 12px; font-size: 14px; font-weight: 500;
  border-radius: 8px; color: var(--komfy-carbon);
  transition: background .15s, color .15s;
  background: none; border: none; text-decoration: none;
  cursor: pointer; display: block; width: 100%;
}
.kh-mega-sub:hover,
.kh-mega-sub.is-on {
  background: var(--komfy-yellow-soft);
  color: var(--komfy-carbon);
}
.kh-mega-all {
  margin-top: 14px; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--komfy-carbon); border-radius: 8px; text-align: center;
  background: transparent; color: var(--komfy-carbon); text-decoration: none;
  display: block;
}
.kh-mega-all:hover { background: var(--komfy-carbon); color: #fff; }

.kh-mega-products {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.kh-mega-sub-panel { display: none; grid-column: 1 / -1; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: start; }
.kh-mega-sub-panel.is-active { display: grid; }
.kh-mega-products > .kh-mega-sub-panel { grid-column: 1 / -1; }

.kh-mega-prod { display: block; text-decoration: none; color: inherit; text-align: left; }
.kh-mega-prod-img {
  position: relative; aspect-ratio: 1/1;
  background: transparent;
  width: 100%; margin: 0 0 10px;
  border-radius: 16px !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari border-radius+overflow fix */
}
.kh-mega-prod-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 16px !important;
}
.kh-mega-prod-img.ph {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55);
  color: var(--komfy-muted); font-size: 11px; letter-spacing: .12em; font-weight: 600;
}
.kh-mega-prod-tag {
  position: absolute; bottom: 12px; left: 12px;
  background: var(--komfy-yellow); color: var(--komfy-carbon);
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
.kh-mega-prod-name { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 15px; color: var(--komfy-carbon); width: 100%; margin: 0; line-height: 1.3; }
.kh-mega-prod-desc { font-size: 13px; color: var(--komfy-muted); margin: 2px 0 0; width: 100%; }

.kh-mega-banners {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr;
  gap: 10px; margin-top: 8px;
}
.kh-banner {
  position: relative;
  padding: 10px 14px; min-height: 56px;
  display: flex; align-items: center; gap: 12px;
  transition: transform .15s;
  text-decoration: none; color: inherit;
}
.kh-mega-banners > a.kh-banner,
.kh-mega-banners a.kh-banner-yellow,
.kh-mega-banners a.kh-banner-tiza,
.kh-mega-banners a.kh-banner-blue {
  border-radius: 14px !important;
  overflow: hidden !important;
}
.kh-banner:hover { transform: translateY(-2px); }

/* Yellow banner — sale / GANGA */
.kh-banner-yellow {
  background: linear-gradient(135deg, var(--komfy-yellow) 0%, #ecb70a 100%);
  color: var(--komfy-carbon);
  font-family: var(--font-display);
  flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 10px 14px; gap: 3px; min-height: 0;
  border-radius: 14px !important; overflow: hidden !important;
}
.kh-banner-yellow-full { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.kh-banner-yellow-tag {
  background: var(--komfy-carbon); color: var(--komfy-yellow);
  padding: 2px 7px; border-radius: 3px; font-weight: 800; font-size: 9px;
  letter-spacing: .08em; align-self: flex-start; text-transform: uppercase;
}
.kh-banner-yellow-body { display: flex; flex-direction: column; gap: 0; }
.kh-banner-yellow-big { font-size: 17px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.kh-banner-yellow-small { font-size: 11px; font-weight: 600; opacity: .8; line-height: 1.2; }
.kh-banner-yellow-sub { font-size: 9px; font-weight: 600; opacity: .65; text-transform: uppercase; letter-spacing: .06em; }

/* Tiza banner — nuevos lanzamientos */
.kh-banner-tiza {
  background: #fff;
  border: 1px solid var(--komfy-line);
  flex-direction: column; align-items: stretch; padding: 0;
  border-radius: 14px !important; overflow: hidden !important;
}
.kh-banner-tiza-inner {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 10px 14px; height: 100%; width: 100%;
  text-decoration: none; color: inherit;
}
.kh-banner-tiza-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--komfy-blue);
}
.kh-banner-tiza-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--komfy-carbon); line-height: 1.05;
}
.kh-banner-tiza-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--komfy-blue);
  margin-top: 2px;
}
.kh-banner-tiza:hover .kh-banner-tiza-cta { text-decoration: underline; text-underline-offset: 3px; }

/* Blue banner — ver todo */
.kh-banner-blue {
  background: var(--komfy-blue);
  color: #fff;
  flex-direction: column; align-items: stretch; padding: 0;
  border-radius: 14px !important; overflow: hidden !important;
}
.kh-banner-blue-inner {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 3px; padding: 10px 14px; height: 100%; width: 100%;
  text-decoration: none; color: #fff;
}
.kh-banner-blue-label { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1; }
.kh-banner-blue-sub { font-size: 11px; opacity: .7; }
.kh-banner-blue-arrow { margin-top: 4px; opacity: .9; transition: transform .15s; }
.kh-banner-blue:hover .kh-banner-blue-arrow { transform: translateX(4px); }

@media (max-width: 1100px) {
  .kh-benefits-inner { gap: 16px; font-size: 11px; flex-wrap: wrap; }
  .kh-mega-panel { grid-template-columns: 1fr; }
  .kh-mega-banners { grid-template-columns: 1fr; }
}

/* Mobile drawer */
.kmob-drawer {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;
}
.kmob-drawer.is-open { pointer-events: auto; }
.kmob-drawer-scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity .2s;
}
.kmob-drawer.is-open .kmob-drawer-scrim { opacity: 1; }

.kmob-drawer-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 100vw !important;
  max-width: 100vw !important;
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .28s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  box-sizing: border-box;
  overflow-x: hidden;
}
@media (min-width: 600px) {
  .kmob-drawer-panel { width: min(92vw, 420px) !important; max-width: 420px !important; }
}

/* Nuclear: any img inside the drawer must respect its container — no global reset wins */
.kmob-drawer img { max-width: none !important; height: auto; }
.kmob-drawer .kmob-nav-thumb img { width: 56px !important; height: 56px !important; max-width: 56px !important; max-height: 56px !important; }
.kmob-drawer.is-open .kmob-drawer-panel { transform: translateX(0); }

.kmob-drawer-head {
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--komfy-line);
}
.kmob-drawer-head .kmob-drawer-back,
.kmob-drawer-head .kmob-drawer-close {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; color: var(--komfy-carbon); background: none; border: none;
  cursor: pointer; border-radius: 999px;
}
.kmob-drawer-head .kmob-drawer-back:hover,
.kmob-drawer-head .kmob-drawer-close:hover { background: var(--komfy-bg-soft); }
.kmob-drawer-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--komfy-carbon); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.kmob-drawer-content { flex: 1; overflow-y: auto; padding: 14px; box-sizing: border-box; }
.kmob-nav-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.kmob-nav-list li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* Drill-down — class-based hide (more robust than [hidden] attr). The JS toggles
   `.kh-hidden` and `.is-active` on the relevant nodes. We also drive everything
   off the `.is-cat-view` class on the drawer so even if JS classes lag, the CSS
   alone produces the right state. */
.kmob-drawer .kh-hidden { display: none !important; }
.kmob-drawer [hidden] { display: none !important; }

/* Defaults: at root view (no .is-cat-view on drawer) — show root, hide cat-view + panels. */
.kmob-drawer:not(.is-cat-view) [data-drawer-root-view] { display: flex !important; }
.kmob-drawer:not(.is-cat-view) [data-drawer-cat-view]  { display: none !important; }

/* In a category view — hide root, show cat-view, only the active panel inside. */
.kmob-drawer.is-cat-view [data-drawer-root-view] { display: none !important; }
.kmob-drawer.is-cat-view [data-drawer-cat-view]  { display: block !important; }

/* Cat panels: hidden by default; shown when JS adds .is-active. */
.kmob-drawer [data-drawer-cat-panel] { display: none !important; }
.kmob-drawer [data-drawer-cat-panel].is-active { display: flex !important; }
.kmob-nav-item {
  width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  background: #fff !important;
  border: 1px solid var(--komfy-line) !important;
  border-radius: 12px !important;
  text-align: left !important;
  text-decoration: none !important;
  color: var(--komfy-carbon) !important;
  overflow: hidden !important;
  min-height: 76px;
}
.kmob-nav-item:hover { border-color: var(--komfy-carbon) !important; }
/* Hard-pinned thumb size — wins against any global img reset */
.kmob-nav-thumb {
  width: 56px !important; height: 56px !important;
  min-width: 56px !important; min-height: 56px !important;
  max-width: 56px !important; max-height: 56px !important;
  border-radius: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--komfy-muted);
  overflow: hidden !important;
  background: var(--komfy-bg-soft);
  box-sizing: border-box !important;
  position: relative;
}
.kmob-nav-thumb img {
  width: 56px !important; height: 56px !important;
  min-width: 56px !important; min-height: 56px !important;
  max-width: 56px !important; max-height: 56px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 10px !important;
  margin: 0 !important; padding: 0 !important;
}
.kmob-nav-thumb-fallback {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 56px !important; height: 56px !important;
  background: var(--komfy-tiza); color: var(--komfy-muted);
  border-radius: 10px !important;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
/* Middle column — text (must shrink, not push thumb) */
.kmob-nav-item > div:not(.kmob-nav-thumb) {
  min-width: 0 !important;
  overflow: hidden !important;
}
.kmob-nav-name {
  font-family: 'Noto Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kmob-nav-name { font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 15px; }
.kmob-nav-sub { font-size: 12.5px; color: var(--komfy-muted); margin-top: 2px; }
.kmob-nav-pill {
  display: inline-block; margin-top: 6px;
  background: var(--komfy-yellow-soft); color: var(--komfy-carbon);
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.kmob-nav-arrow { color: var(--komfy-muted); display: inline-flex; }

.kmob-drawer-foot {
  border-top: 1px solid var(--komfy-line);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
  font-size: 13px; color: var(--komfy-carbon);
}
.kmob-drawer-foot-row { display: inline-flex; align-items: center; gap: 10px; }

@media (max-width: 820px) {
  .kh-announce { font-size: 11.5px !important; padding: 6px 10px !important; min-height: 30px !important; line-height: 1.2 !important; }
  .kh-announce strong { font-weight: 700 !important; }
  /* Mobile: solo el slide .is-active visible (carrusel rotado por JS) */
  .kh-announce-slide { display: none !important; }
  .kh-announce-slide.is-active { display: inline !important; animation: announce-fade .45s ease; }
  /* Sin separador " - " en mobile (no aplica en carrusel) */
  .kh-announce-slide[data-announce-slide="1"]::before { content: '' !important; }
  .kh-wrap { margin: 4px 12px 0 !important; border-radius: 14px !important; box-shadow: 0 2px 8px rgba(0,0,0,.05) !important; overflow: visible !important; }
  .kh-benefits { border-radius: 0 0 14px 14px !important; }
  .kh-main {
    /* Columnas laterales simétricas (1fr | auto | 1fr) para que el logo
       quede centrado al viewport y alineado con el carrusel de beneficios. */
    grid-template-columns: 1fr auto 1fr !important;
    gap: 6px !important; padding: 0 10px !important; height: 56px !important;
  }
  .kh-nav { display: none !important; }
  .kh-burger { padding: 6px !important; justify-self: start !important; }
  .kh-logo { height: 26px !important; justify-self: center !important; }
  .kh-logo svg, .kh-logo img { height: 26px !important; max-width: 140px !important; object-fit: contain !important; }
  .kh-actions { gap: 4px !important; justify-self: end !important; }
  .kh-icon { padding: 6px !important; }
  .kh-cart-badge { top: 0 !important; right: 0 !important; min-width: 14px !important; height: 14px !important; font-size: 9px !important; }
  /* Mobile: carrusel — solo la slide activa visible; las otras ocultas. */
  .kh-benefits-inner { padding: 8px 12px !important; min-height: 32px !important; gap: 0 !important; }
  .kh-benefit { font-size: 11.5px !important; gap: 6px !important; }
  .kh-benefit svg { width: 14px !important; height: 14px !important; }
  .kh-benefit-slide { display: none !important; animation: kh-benefit-fade .45s ease; }
  .kh-benefit-slide.is-active { display: inline-flex !important; }
  .kh-mega { display: none !important; }
  .kmob-drawer { display: block; }

  /* Drawer mobile arranca DEBAJO del banner amarillo (top: var(--kh-announce-height))
     con overflow: hidden → el panel queda clipeado allí, las cards quedan en su
     posición original con padding-top interno. El kh-wrap (logo+iconos+benefits)
     queda visualmente encima del panel por z-index. Scrim oculto. */
  .kmob-drawer {
    top: var(--kh-announce-height, 30px) !important;
    overflow: hidden !important;
    z-index: 99998 !important;
  }
  .kmob-drawer-panel {
    top: 0 !important;
    transform: translateY(-100%) !important;
  }
  .kmob-drawer.is-open .kmob-drawer-panel {
    transform: translateY(0) !important;
  }
  .kmob-drawer-scrim { display: none !important; }
  .kmob-drawer:not(.is-cat-view) .kmob-drawer-head { display: none !important; }
  /* Padding-top que compensa la altura del kh-wrap (header sin banner) →
     las cards arrancan justo debajo del header completo, igual que antes. */
  .kmob-drawer-content {
    padding-top: calc(var(--kh-height, 124px) - var(--kh-announce-height, 30px) + 12px) !important;
  }
  /* Cat-view: el head (back + título + close) necesita padding-top para
     arrancar debajo del header fijo, y el content pierde el padding grande. */
  .kmob-drawer.is-cat-view .kmob-drawer-head {
    display: grid !important;
    grid-template-columns: 40px !important;
    padding-top: calc(var(--kh-height, 124px) - var(--kh-announce-height, 30px)) !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .kmob-drawer.is-cat-view .kmob-drawer-title,
  .kmob-drawer.is-cat-view .kmob-drawer-close {
    display: none !important;
  }
  .kmob-drawer.is-cat-view .kmob-drawer-content {
    padding-top: 0 !important;
  }

  /* Cuando el drawer está abierto, el body pasa a position:fixed (scroll lock)
     y eso rompe el position:sticky del header — se va fuera de pantalla.
     Lo forzamos a fixed para que se quede pegado al viewport. */
  body.kh-drawer-open .kh {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Hamburger ↔ X — mismo botón abre y cierra. */
  .kh-burger { position: relative; }
  .kh-burger-icon { display: inline-flex; align-items: center; justify-content: center; }
  .kh-burger-icon-close { display: none; }
  body.kh-drawer-open .kh-burger-icon-menu  { display: none; }
  body.kh-drawer-open .kh-burger-icon-close { display: inline-flex; }

  /* Fix dead-clicks: el header (z-index 99999) está encima del drawer (99998).
     Cuando el drawer está abierto, los taps al header pasan de largo al menú,
     excepto la X (burger) y los iconos (actions) que siguen funcionando. */
  body.kh-drawer-open .kh { pointer-events: none; }
  body.kh-drawer-open .kh .kh-burger { pointer-events: auto; }
  body.kh-drawer-open .kh .kh-actions { pointer-events: auto; }
}
@media (min-width: 821px) {
  .kmob-drawer { display: none !important; }
}

/* Drawer back button hidden at root view; visible inside a category */
.kmob-drawer-back { visibility: hidden; pointer-events: none; }
.kmob-drawer.is-cat-view .kmob-drawer-back { visibility: visible; pointer-events: auto; }

/* Body scroll lock helper used by the drawer JS (more robust than inline style) */
body.kh-no-scroll {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

/* Drawer scrim above body content; panel above scrim */
.kmob-drawer { z-index: 200000; }
.kmob-drawer-scrim { z-index: 1; }
.kmob-drawer-panel { z-index: 2; }

/* Drawer mobile small-screen tightening */
@media (max-width: 380px) {
  .kmob-drawer-content { padding: 10px; }
  .kmob-nav-item { grid-template-columns: 56px 1fr auto; gap: 10px; padding: 8px; }
  .kmob-nav-thumb { width: 56px; height: 56px; }
  .kmob-nav-name { font-size: 14px; }
}

/* Force banner radius — ultra-specific override against any Tiendanube reset */
header.kh .kh-mega .kh-mega-wrap .kh-mega-banners a.kh-banner,
header.kh .kh-mega .kh-mega-wrap .kh-mega-banners a.kh-banner-yellow,
header.kh .kh-mega .kh-mega-wrap .kh-mega-banners a.kh-banner-tiza,
header.kh .kh-mega .kh-mega-wrap .kh-mega-banners a.kh-banner-blue {
  border-radius: 14px !important;
  -webkit-border-radius: 14px !important;
  overflow: hidden !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}