/* Paleta del manual de marca Potentini (Charo Comunicación): carbón #373435,
   topo #B5ADA5, gris claro #EFEFEF, rosa empolvado #F5EDF0 — sin color vivo
   ("quiet luxury"). El énfasis (líder de una barra, botón activo) se marca
   con PESO/valor (oscuro vs. claro), no con un matiz extra inventado. */
:root{
  --bg: #f5edf0;
  --bg-2: #efefef;
  --surface: #ffffff;
  --ink: #373435;
  --ink-soft: #726d69;
  --accent: #373435;
  --accent-deep: #1a1817;
  --highlight: #373435;
  --pill: #ffffff;
  --line: #b5ada5;
  --shadow: 0 10px 30px -14px rgba(55, 52, 53, 0.35);
}
:root[data-theme="dark"]{
  --bg: #201e1d;
  --bg-2: #2a2725;
  --surface: #373435;
  --ink: #f5edf0;
  --ink-soft: #c9c2bc;
  --accent: #f5edf0;
  --accent-deep: #ffffff;
  --highlight: #f5edf0;
  --pill: #403c3a;
  --line: #4a4542;
  --shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #201e1d;
    --bg-2: #2a2725;
    --surface: #373435;
    --ink: #f5edf0;
    --ink-soft: #c9c2bc;
    --accent: #f5edf0;
    --accent-deep: #ffffff;
    --highlight: #f5edf0;
    --pill: #403c3a;
    --line: #4a4542;
    --shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
  }
}

*{ box-sizing: border-box; }
/* overflow: clip acá TAMBIÉN, no solo en body -- si no, el scrollWidth de la página
   (que depende de <html>, no de <body>) sigue contando las hojas decorativas que
   se salen del borde, aunque body ya las recorte visualmente (bug real 12/08). */
/* SOLO el eje X -- <html> es el elemento que de verdad controla si la página
   entera puede scrollear; "overflow: clip" (los dos ejes) la dejaba trabada,
   sin poder bajar (bug real 12/08, corregido al toque). */
html{ -webkit-text-size-adjust: 100%; overflow-x: clip; }
body{
  margin: 0;
  background: radial-gradient(circle at 12% 0%, var(--bg-2), var(--bg) 55%);
  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  min-height: 100vh;
  /* las hojas decorativas se salen del borde a propósito -- "clip" en vez de "hidden":
     recorta igual pero NO convierte a body en scroll container, que es lo que
     rompía silenciosamente el position:sticky de .sticky-toolbar (bug real 12/08).
     Los DOS ejes tienen que ser "clip" explícito -- dejar overflow-y en su default
     (visible) hace que algunos navegadores NO recorten el eje X tampoco (bug real
     12/08 parte 2: las hojas volvían a generar scroll horizontal en mobile). body
     no tiene alto fijo (min-height, no height) así que "clip" en Y no recorta nada
     de verdad, solo evita esa combinación rota -- el scroll vertical normal de la
     página sigue viviendo en <html>, no se toca. */
  overflow: clip;
}

.wrap{ max-width: 960px; margin: 0 auto; padding: 48px 24px 140px; position: relative; }

/* decorative corner leaves, css-only */
.leaf{
  position: absolute;
  width: 220px; height: 220px;
  pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(ellipse 60px 140px at 30% 20%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 50px 120px at 55% 10%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
    radial-gradient(ellipse 45px 110px at 15% 40%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%);
}
.leaf.tl{ top: -40px; left: -60px; transform: rotate(-18deg); }
.leaf.br{ bottom: -40px; right: -60px; transform: rotate(162deg); }

header{ text-align: center; margin-bottom: 44px; position: relative; z-index: 1; }
header a{ display: block; width: min(280px, 70vw); margin: 0 auto 10px; }
.brand-logo{
  width: 100%; height: auto; display: block;
  /* el PNG es la versión blanca del logo (la única que tenemos) -> se invierte a
     negro en tema claro, se muestra tal cual (blanco) en tema oscuro. Misma
     aplicación que el manual de marca (negro sobre blanco / blanco sobre carbón). */
  filter: invert(1);
}
:root[data-theme="dark"] .brand-logo{ filter: none; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand-logo{ filter: none; } }
header h1{
  font-size: clamp(38px, 7vw, 58px);
  letter-spacing: .06em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
header .sub{
  font-style: italic;
  font-size: clamp(18px, 3vw, 24px);
  color: var(--accent-deep);
  margin: 6px 0 0;
}
.promo-banner{
  display: inline-block; margin: 14px auto 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 8px 16px; border-radius: 999px;
}

/* Buscador + Filtros/orden + chips rápidos, pegados arriba al scrollear -- así
   cambiar un filtro no obliga a volver al principio de la página en mobile. */
.sticky-toolbar{
  position: sticky; top: 12px; z-index: 2;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 14px 16px 10px; margin: -12px 0 26px;
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.search-wrap{
  display: flex; justify-content: center; margin: 0 0 14px;
  position: relative; z-index: 1;
}
.search-wrap input{
  width: 100%; max-width: 340px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; /* 16px+ evita el auto-zoom de iOS Safari al enfocar */
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  padding: 12px 18px; border-radius: 999px;
  outline: none;
}
.search-wrap input::placeholder{ color: var(--ink-soft); }
.search-wrap input:focus-visible{ border-color: var(--accent); }

/* Los 4 controles en UN solo contenedor (antes eran 2 filas separadas) -- así,
   grandes, el wrap natural del flex ya arma 2x2 solo; compactos, entran los 4
   juntos en una sola fila sin tener que reestructurar nada más. */
.toolbar-controls{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}

/* Los 4 comparten UNA sola regla de tamaño -- antes cada uno tenía su propio
   ancho fijo emparejado con el de al lado, y quedaban cruzados (distintos entre
   sí dentro de la misma fila). overflow+ellipsis como red de seguridad si algún
   texto no entra. */
.filters-toggle, .sort-select, .toolbar-controls .filter-btn{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; min-height: 44px; width: 140px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 10px 12px; border-radius: 999px; cursor: pointer;
  position: relative; z-index: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: min-height .15s, font-size .15s, padding .15s, width .15s;
}
.sort-select{
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding: 10px 28px 10px 12px;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.sort-select:focus-visible{ border-color: var(--accent); }

/* Modo compacto: la clase la prende/apaga JS mientras la toolbar está pegada
   arriba (scrolleado) -- suficientemente chico como para que los 4 entren en
   una sola fila en vez de 2x2, la barra flotante queda bastante más baja.
   Solo en mobile (@media) -- en desktop sobra espacio, no tiene sentido achicar. */
@media (max-width: 640px){
  .sticky-toolbar.compact .filters-toggle,
  .sticky-toolbar.compact .sort-select,
  .sticky-toolbar.compact .toolbar-controls .filter-btn{
    min-height: 30px; width: 72px; font-size: 10px; padding: 5px 6px; gap: 3px;
    /* izquierda, no centrado -- así lo que no entra se corta al final (con el
       ellipsis), no desaparece parejo de los dos lados ni empuja el ícono. */
    justify-content: flex-start; text-align: left;
  }
  .sticky-toolbar.compact .sort-select{ padding: 5px 20px 5px 6px; background-position: right 8px center; }
  .sticky-toolbar.compact .toolbar-controls{ gap: 5px; flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce){
  .filters-toggle, .sort-select, .quick-filters .filter-btn{ transition: none; }
}
.filters-toggle .count{
  background: var(--highlight); color: var(--surface);
  border-radius: 999px; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; padding: 0 5px;
}
.filters-toggle .count[hidden]{ display: none; } /* la especificidad de arriba pisaba el [hidden] nativo */

/* Carrusel de ofertas/liquidación (arriba del catálogo, debajo de la
   toolbar) -- pedido de Nico. Ventana visible = ancho de 3 cards, centrada.
   Con pocas cards (entran todas) queda fijo y centrado (.centrado, sin JS de
   scroll). Con más cards, JS arma el loop infinito (triplica la lista) +
   auto-scroll vía scrollLeft real -- ver renderOfertasCarousel en app.js --
   y ahí sí se muestran las flechas .ofertas-nav para girar más rápido. */
.ofertas-carousel{
  position: relative; z-index: 1;
  margin: 0 0 26px; padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.ofertas-title{
  font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-align: center; margin: 0 0 10px; color: var(--ink);
}
.ofertas-stage{
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ofertas-viewport{
  width: calc(128px * 3 + 14px * 2); /* 3 cards + los 2 gaps entre ellas */
  max-width: calc(100vw - 90px); /* deja lugar a las flechas en pantallas angostas -- en mobile achica el ancho, nunca lo desborda */
  overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
}
.ofertas-viewport::-webkit-scrollbar{ display: none; }
/* Arrastre con mouse -- cursor de "agarrar" cuando hace falta scroll, y de
   "agarrado" mientras se está arrastrando (clase que pone app.js). */
.ofertas-viewport:has(.ofertas-track:not(.centrado)){ cursor: grab; }
.ofertas-viewport.arrastrando{ cursor: grabbing; user-select: none; }
.ofertas-track{ display: flex; gap: 14px; width: max-content; }
.ofertas-track.centrado{ width: 100%; justify-content: center; }
/* Flechas para girar más rápido que el auto-scroll -- solo se muestran (JS
   les saca [hidden]) cuando hay más cards de las que entran en la ventana. */
.ofertas-nav{
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.ofertas-nav:hover{ background: var(--pill); }
.ofertas-nav[hidden]{ display: none; }
.ofertas-card{
  flex: 0 0 auto; width: 128px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px;
}
.ofertas-photo{
  aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--bg-2);
}
.ofertas-photo img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.ofertas-name{
  font-size: 12px; font-weight: 600; margin: 6px 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ofertas-price{
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; margin: 0;
  font-variant-numeric: tabular-nums;
}
.ofertas-price s{ color: var(--ink-soft); font-weight: 400; margin-right: 4px; }

.grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 22px;
  position: relative; z-index: 1;
}
@media (min-width: 640px){ .grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .grid{ grid-template-columns: repeat(4, 1fr); } }

.card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 10px 10px 16px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  cursor: pointer;
  touch-action: manipulation;
  /* sin esto, un dupe_de largo con white-space:nowrap infla el min-content de la
     card y ROMPE el reparto 1fr parejo del grid (columnas de ancho desigual, la
     última empujada fuera de vista) -- bug real 12/08. */
  min-width: 0;
}
.photo-frame{
  position: relative;
  padding-bottom: 18px; /* room for the price pill to overlap without being clipped */
}
.photo{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--bg-2);
}
.photo img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.tag{
  position: absolute; top: 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  /* fijo en carbón, NO deriva de --ink (que se invierte en dark mode): la foto de
     atrás no cambia con el tema del sitio, el scrim siempre tiene que ser oscuro
     para que el texto blanco se lea. Opacidad alta a pedido (antes 55%, poco
     contraste sobre fotos claras). */
  background: color-mix(in srgb, #1a1817 80%, transparent);
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  padding: 4px 8px; border-radius: 999px;
  backdrop-filter: blur(2px);
}
.tag.genero{ left: 10px; }
.tag.familia{ right: 10px; background: #1a1817; }
/* Badge de "oferta" (columna propia del Sheet, NADA que ver con precio_oferta/2+).
   Arriba-centro: abajo ya lo ocupa el price-pill (centrado, choca en cards angostas)
   y arriba a los costados ya están género/familia. Llamativo con 🔥 + tamaño mayor
   que los demás tags -- sigue sin usar un color nuevo, la paleta no tiene vivo. */
.oferta-badge{
  position: absolute; left: 50%;
  background: var(--accent); color: var(--surface);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  z-index: 2;
}
/* en la card del grid: montada a caballo del borde superior -- mitad afuera
   (sobre el fondo de la web), mitad adentro (sobre la card). translate(-50%,-50%)
   la autocentra en ese borde sin importar su alto exacto. */
.card > .oferta-badge{ top: 0; transform: translate(-50%, -50%); }
/* en la ficha ampliada: sigue sobre la foto, no hay borde de card ahí para montarla. */
.detail-photo .oferta-badge{ top: 40px; transform: translateX(-50%); }
.price-pill{
  position: absolute;
  left: 50%; bottom: 0; transform: translateX(-50%);
  background: var(--pill);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
/* Precio normal tachado + precio activo, cuando el producto está en modo
   oferta/liquidación (backstage: "Precio a mostrar") -- el % ya se ve en
   .oferta-badge, acá el foco es el monto real. Sin color nuevo (mismo criterio
   de toda la paleta): la tachadura + el peso tipográfico ya marcan la
   diferencia entre los dos precios. */
.price-tachado{
  color: var(--ink-soft);
  font-weight: 400; font-size: 0.72em;
  text-decoration: line-through;
  margin-right: 6px;
}
.price-pill-descuento{ padding-left: 14px; padding-right: 14px; }
.price.price-con-descuento .price-tachado{ font-size: 0.6em; }

.brand{
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}

.filter-group{
  position: relative; z-index: 1;
  margin: 0 0 14px;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.filter-group:last-of-type{ margin-bottom: 32px; }
.filter-group .filter-label{
  margin: 0 0 6px 2px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-align: left;
}
/* mobile-first: un renglón deslizable, alineado a la izquierda */
.filters{
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* firefox */
  padding: 2px 2px 6px; margin: -2px -2px 0;
  /* fade de borde para insinuar que hay más opciones a la derecha */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.filters::-webkit-scrollbar{ display: none; }
.filter-btn{
  flex: 0 0 auto; white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 600;
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-btn:hover{ border-color: var(--accent); }
.filter-btn.active{
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}

/* desktop/web (mouse real, no touch): filtros centrados, en varios renglones si no entran en uno.
   Se detecta por tipo de puntero en lugar de ancho de pantalla: más confiable que un
   media query por ancho para distinguir mouse de dedo. */
@media (hover: hover) and (pointer: fine){
  .filter-group{ text-align: center; }
  .filter-group .filter-label{ text-align: center; margin-left: 0; }
  .filters{
    flex-wrap: wrap; justify-content: center;
    overflow-x: visible; padding: 2px 0 0; margin: 0;
    -webkit-mask-image: none; mask-image: none;
  }
}

.info{
  padding: 8px 4px 0; text-align: center;
  flex: 1; display: flex; flex-direction: column;
}
.name{ font-size: 17px; margin: 0; }
.desc{
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px; color: var(--ink-soft);
  margin: 4px 0 12px; line-height: 1.4;
}
/* .bottom-block agrupa precio combo + stepper/botón y es el ÚNICO hijo de
   .info con margin-top:auto -- así ese bloque queda siempre pegado abajo de
   la card, sin importar cuánto ocupe la descripción arriba (pedido
   2026-08-26: antes .oferta-hint flotaba en flujo normal justo debajo de
   .desc, así que subía o bajaba según el largo de la descripción). */
.bottom-block{ margin-top: auto; }
.oferta-hint{
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 11.5px; font-weight: 600; color: var(--highlight);
  margin: 0 0 10px;
}
.dupe-hint{
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 11.5px; color: var(--ink-soft);
  margin: 0 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.add-row{ display: flex; align-items: center; gap: 6px; }
.add-btn{
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--accent);
  background: transparent; color: var(--accent-deep);
  padding: 11px 4px; flex: 1; min-width: 0; min-height: 44px; /* 44px: tamaño de tap táctil recomendado */
  border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.add-btn:hover, .add-btn:focus-visible{ background: var(--accent); color: var(--surface); outline: none; }
.add-btn.added{ background: var(--accent-deep); color: var(--surface); border-color: var(--accent-deep); }

.qty-col{ display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.qty-stepper{
  display: flex; align-items: center; gap: 2px; flex: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px;
}
.stock-note{
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 10px; color: var(--ink-soft); white-space: nowrap;
}
.qty-stepper .qty-btn{
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: transparent; color: var(--ink); font-size: 14px; line-height: 1;
  cursor: pointer; font-family: ui-sans-serif, system-ui, sans-serif;
}
.qty-stepper .qty-btn:hover{ background: var(--bg-2); }
.qty-stepper .qty-val{
  min-width: 16px; text-align: center; font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

.empty-note{ color: var(--ink-soft); font-size: 13px; text-align: center; padding: 20px 0; }
.empty-note .clear-filters-inline{ display: inline-block; margin-top: 12px; }

/* skeleton mientras carga products.json -- misma clase .card para heredar tamaño/
   proporción de la grilla gratis, sin duplicar layout. */
.skeleton-card{
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--surface) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .skeleton-card{ animation: none; }
}

/* carrito */
.cart-fab{
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  background: var(--ink); color: var(--bg);
  border: none; border-radius: 999px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: 14px;
  padding: 15px 22px; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow); cursor: pointer;
  z-index: 5;
}
.cart-fab .subtotal{ font-size: 11px; opacity: .85; }
.cart-fab .count{
  background: var(--accent); color: var(--surface);
  border-radius: 999px; min-width: 20px; height: 20px;
  display: inline-flex; align-items:center; justify-content:center;
  font-size: 11px; padding: 0 5px;
}

.cart-panel{
  position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: none; align-items: flex-end; justify-content: center; z-index: 10;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.cart-panel.open{ display: flex; }
.cart-sheet{
  background: var(--surface); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; padding: 22px 22px calc(26px + env(safe-area-inset-bottom));
  max-height: 78vh; overflow-y: auto;
  box-shadow: 0 -10px 30px -14px rgba(0,0,0,.4);
}
.cart-sheet h2{ font-size: 20px; margin: 0 0 14px; }
/* Grid, no flex + space-between -- con flex, el ancho del NOMBRE de cada
   producto corría la columna de +/- a una posición distinta por fila
   (reportado por Nico: con 2 productos, la de arriba quedaba más a la
   izquierda que la de abajo). Grid le da a nombre/stepper/precio su propia
   columna, alineadas siempre en la misma posición en todas las filas. */
.cart-row{
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.cart-row-name{ min-width: 0; }
.cart-row-price{ text-align: right; font-variant-numeric: tabular-nums; }
.cart-row .qty-btns{ display:flex; align-items:center; gap:6px; }
.cart-row button.step{
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg); cursor: pointer; font-size: 13px; line-height: 1;
  color: var(--ink);
}
.cart-total{
  display: flex; justify-content: space-between; align-items: baseline; font-weight: 700;
  padding: 14px 0 18px; font-size: 16px;
}
.ahorro{ color: var(--highlight); font-weight: 600; font-size: 11.5px; }
.cart-total .ahorro{ font-size: 12px; margin-left: 4px; }
.wa-btn{
  display: block; text-align: center; text-decoration: none;
  background: #3f6b4f; color: #fff; font-weight: 600;
  padding: 13px; border-radius: 999px; font-size: 15px;
}
:root[data-theme="dark"] .wa-btn{ background: #4d7f5f; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wa-btn{ background: #4d7f5f; } }
.checkout-btn{
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: var(--ink); color: var(--bg); font-weight: 600;
  padding: 13px; border-radius: 999px; font-size: 15px; border: none; cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
#checkoutForm label{
  display: block; margin-bottom: 12px; font-size: 13px; color: var(--ink-soft);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
#checkoutForm input, #checkoutForm select{
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); font-size: 16px; font-family: inherit; box-sizing: border-box;
}
.checkout-medio, .checkout-entrega{ border: none; padding: 0; margin: 0 0 16px; }
.checkout-medio legend, .checkout-entrega legend{ font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; padding: 0; }
.checkout-medio label, .checkout-entrega label{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--ink); }
.envio-opcion{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--ink); }
#envioOpciones{ margin-bottom: 12px; }
.checkout-error{ color: #b00020; font-size: 13px; margin-bottom: 12px; }
#checkoutConfirmBody{ font-size: 14px; line-height: 1.6; color: var(--ink); }
#checkoutConfirmBody .cbu{ font-weight: 700; font-size: 16px; margin: 10px 0; word-break: break-all; }
.close-cart{
  background: none; border: none; float: right; font-size: 22px;
  cursor: pointer; color: var(--ink-soft); line-height: 1;
}

/* detalle de producto */
.detail-panel{
  position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: none; align-items: flex-end; justify-content: center; z-index: 12;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.detail-panel.open{ display: flex; }
.detail-sheet{
  background: var(--surface); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 -10px 30px -14px rgba(0,0,0,.4);
}
/* Barra flotante: sticky DENTRO de .detail-sheet (que es el que scrollea, overflow-y:
   auto) -- cerrar y compartir bajan con el contenido y quedan pegados arriba, igual
   que la toolbar de búsqueda/filtros en la página principal. Fondo propio (no la
   foto) para que el botón de cerrar tenga contraste garantizado siempre. */
.detail-toolbar{
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 20px 20px 0 0;
}
.detail-photo{ position: relative; aspect-ratio: 3 / 4; background: var(--bg-2); margin-top: -1px; }
.detail-photo img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.detail-close{
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: color-mix(in srgb, var(--ink) 85%, transparent); color: #fff;
  font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
}
/* Botón base (ícono redondo, mismo look que .detail-close) -- .detail-share solo
   pisa la POSICIÓN cuando está en la ficha ampliada; en la card chica va abajo a
   la derecha de la foto (única esquina libre: arriba están género/familia, abajo-
   centro el precio). */
/* mismo look que .detail-close (círculo oscuro translúcido, ícono blanco) -- nada
   de verde de marca, a tono con el resto de los botones redondos del sitio. */
.share-btn{
  position: absolute; right: 10px; bottom: 10px;
  width: 26px; height: 26px; border-radius: 50%; border: none;
  /* mismo 85% que .detail-close -- con 55% se lavaba contra fotos claras y en
     cards chicas (mobile, 2 columnas) directamente no se notaba. */
  background: color-mix(in srgb, var(--ink) 85%, transparent);
  cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
}
.share-btn svg{ width: 15px; height: 15px; }
/* dentro de .detail-toolbar el flex ya lo ubica -- pisa el position:absolute de
   .share-btn (ese es para cuando flota solo sobre la foto de la card chica). */
/* right/bottom heredados de .share-btn (para cuando flota sobre la foto) tienen que
   anularse acá -- en position:relative esos mismos valores SIGUEN corriendo el
   elemento (10px izq/arriba), por eso quedaba desalineado con el botón de cerrar. */
.detail-share{
  position: relative; right: auto; bottom: auto; flex: none;
  width: 26px; height: 26px;
  background: color-mix(in srgb, var(--ink) 85%, transparent); /* mismo tono que .detail-close */
}
.detail-share svg{ width: 16px; height: 16px; }
.detail-body{ padding: 20px 22px calc(26px + env(safe-area-inset-bottom)); text-align: center; }
.detail-body .brand{ font-size: 11px; }

/* filtros, mismo mecanismo de hoja que carrito/detalle */
.filter-panel{
  position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: none; align-items: flex-end; justify-content: center; z-index: 11;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.filter-panel.open{ display: flex; }
.filter-sheet{
  background: var(--surface); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; padding: 22px 22px calc(26px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto;
  box-shadow: 0 -10px 30px -14px rgba(0,0,0,.4);
}
.filter-sheet h2{ font-size: 20px; margin: 0 0 16px; }
.close-filters{
  background: none; border: none; float: right; font-size: 22px;
  cursor: pointer; color: var(--ink-soft); line-height: 1;
}
.clear-filters{
  display: block; width: 100%; text-align: center;
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 12px; border-radius: 999px; margin-top: 4px;
}
.detail-body .name{ font-size: 22px; margin: 4px 0 8px; }
.detail-body .tags{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.detail-body .tags span{
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
  color: var(--ink-soft);
}
.detail-body .price{ font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.detail-body .desc{ font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px; text-align: left; }
.detail-body .add-btn{ min-height: 48px; font-size: 14px; }

.detail-section{ text-align: left; margin-bottom: 18px; }
/* Tipografía normalizada de toda la ficha: todo título/subtítulo (acá y en .notes-group b)
   es negrita + mismo color; todo texto de respuesta (acá y .desc) es peso normal + mismo
   color -- no hay ninguna otra combinación suelta en ningún lado de la ficha. */
.detail-section .section-title{
  font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 8px; text-align: center;
}
.detail-section .subsection-title{
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 14px 0 8px;
}
.detail-section .subsection-title:first-child{ margin-top: 0; }
.notes-group{ margin-bottom: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.notes-group b{ color: var(--ink-soft); font-weight: 700; }
.fact-value{ margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

.stacked-bar{
  display: flex; height: 32px; border-radius: 8px; overflow: hidden;
  gap: 2px; margin-bottom: 14px;
}
.stacked-bar:last-child{ margin-bottom: 0; }
.stacked-bar .seg{ background: var(--line); display: flex; align-items: center; min-width: 0; }
.stacked-bar .seg.hi{ background: var(--highlight); }
.stacked-bar .seg-label{
  font-size: 11px; font-weight: 700; white-space: nowrap; padding: 0 8px;
  color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden;
}
.stacked-bar .seg.hi .seg-label{ color: var(--surface); }

.level-pills{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.level-pills:last-child{ margin-bottom: 0; }
.level-pill{
  font-size: 11.5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.level-pill.highlight{
  border-color: var(--highlight); color: var(--highlight); font-weight: 600;
  background: color-mix(in srgb, var(--highlight) 12%, transparent);
}

@media (max-width: 480px){
  .wrap{ padding: 28px 14px 140px; }
  .grid{ gap: 20px 12px; }
  header h1{ letter-spacing: .04em; }
}