/* ==========================================================================
   EDITORIAL LAYER — the aspirational shopping experience.
   Cinematic hero, photographic category tiles, product spotlight,
   large-format browsing tiles, brand narrative, premium cart drawer.
   ========================================================================== */

/* ---------- Type scale ---------- */
:root {
  --fs-hero: clamp(42px, 13vw, 74px);
  --fs-display: clamp(30px, 8vw, 46px);
  --fs-title: clamp(22px, 5vw, 28px);
}

/* ---------- Section rhythm: alternating light/dark stages ---------- */
.stage { position: relative; }
.stage-dark {
  background: var(--color-ink);
  color: var(--color-bg);
}
.stage-dark .eyebrow-line { color: var(--color-accent-soft); }

/* ---------- Cinematic hero ----------
   Mobile (default): video lives in its own framed, fixed-aspect box using
   object-fit: contain — it is NEVER cropped. Text sits in a solid panel
   below that grows with its content, so nothing is ever clipped.
   Desktop (900px+, see override below): restores the original full-bleed
   overlay look, video behind the text, cover-cropped, exactly as before. */
.fresh-hero {
  /* main#view already reserves space for the fixed header via its own
     padding-top — this only needs a little breathing room below that,
     not the header height again. */
  position: relative;
  background: var(--color-bg);
  padding: 8px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
/* Same ambient light-sweep the preloader opens with ("Primer Corte"),
   carried into the hero at low opacity so the brand moment doesn't just
   vanish after the splash — it keeps drifting behind the headline. */
.fresh-hero__sweep {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(100deg,
    transparent 40%, color-mix(in srgb, var(--color-accent) 10%, transparent) 48%,
    color-mix(in srgb, var(--color-accent) 16%, transparent) 50%,
    color-mix(in srgb, var(--color-accent) 10%, transparent) 52%, transparent 60%);
  background-size: 260% 260%;
  animation: heroSweep 11s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.fresh-hero__text, .fresh-hero__media { position: relative; z-index: 1; }
@keyframes heroSweep { 0% { background-position: 120% 0%; } 50% { background-position: 20% 40%; } 100% { background-position: 120% 0%; } }
@media (prefers-reduced-motion: reduce) { .fresh-hero__sweep { animation: none; opacity: 0.4; } }
.eyebrow-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.eyebrow-line::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.fresh-hero__eyebrow { margin-bottom: 14px; }
.fresh-hero h1 {
  font-size: clamp(32px, 9vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  max-width: 15ch;
  text-wrap: balance;
  color: var(--color-ink);
}
.fresh-hero h1 em {
  font-style: italic;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.12em;
  line-height: 1;
  color: var(--color-accent-dark);
}
.fresh-hero p {
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 34ch;
  color: var(--color-ink-soft);
  margin-bottom: 22px;
}
.fresh-hero__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.fresh-hero__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 3px;
  transition: border-color var(--dur-fast);
}
.fresh-hero__link:hover { border-color: var(--color-ink); }
.fresh-hero__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
}
.fresh-hero__media img,
.fresh-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fresh-hero__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--color-bg);
  color: var(--color-accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}
.fresh-hero__shipping-strip {
  background: var(--color-ink);
  padding: 14px 0;
  margin: 0 0 24px;
  overflow: hidden;
}
.fresh-hero__ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 40px;
  animation: tickerSlide 26s linear infinite;
}
.fresh-hero__shipping-strip:hover .fresh-hero__ticker-track { animation-play-state: paused; }
@keyframes tickerSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fresh-hero__ticker-track span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-bg);
  white-space: nowrap;
  flex-shrink: 0;
}
.fresh-hero__ticker-track span svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--color-bg) 65%, var(--color-accent) 35%);
}
@media (prefers-reduced-motion: reduce) {
  .fresh-hero__ticker-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; padding: 0 20px; }
}
@media (min-width: 900px) {
  .fresh-hero {
    flex-direction: row;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 48px 24px;
    gap: 32px;
  }
  .fresh-hero__text { flex: 1; }
  .fresh-hero__media { flex: 1; aspect-ratio: 16 / 9; }
  .fresh-hero__shipping-strip {
    padding: 16px 48px;
    gap: 12px 40px;
  }
}

/* ---------- Section framing ---------- */
.ed-section { padding: 84px 20px; }
.ed-section--tight { padding: 56px 20px; }
.ed-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}
.ed-head h2 {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 14ch;
  text-wrap: balance;
}
.ed-head .ed-sub {
  font-size: 13.5px;
  color: var(--color-ink-faint);
  max-width: 32ch;
  margin-top: 10px;
  line-height: 1.55;
}
.ed-head .ed-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stage-dark .ed-head .ed-sub { color: rgba(255,255,255,0.6); }

/* ---------- Category bento (photographic, not icon pills) ---------- */
.cat-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px;
  gap: 10px;
}
.cat-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  color: #fff;
  isolation: isolate;
}
.cat-tile:first-child {
  grid-column: 1 / -1;
  grid-row: span 2;
  min-height: 280px;
}
.cat-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.cat-tile:active img { transform: scale(1.06); }
.cat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.15) 55%, transparent 80%);
  z-index: 1;
}
.cat-tile__label { position: relative; z-index: 2; }
.cat-tile__label .count { display: block; font-size: 11px; opacity: 0.75; letter-spacing: 0.04em; margin-bottom: 4px; }
.cat-tile__label h3 { font-family: var(--font-display); font-size: 21px; font-weight: 500; }
.cat-tile:first-child .cat-tile__label h3 { font-size: 27px; }

/* ---------- Spotlight (single hero product, Apple-style) ---------- */
.spotlight {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-2);
  margin: 0 20px;
  display: flex;
  flex-direction: column;
}
.spotlight__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(155deg, #FF622D, #E5501D 65%, #C94515);
  overflow: hidden;
}
.spotlight__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35));
}
.spotlight__body { padding: 30px 24px 34px; }
.spotlight__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
  display: block;
}
.spotlight__body h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.12;
  margin-bottom: 12px;
  max-width: 18ch;
}
.spotlight__body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 42ch;
  margin-bottom: 22px;
}
.spotlight__price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
}
.spotlight__price { font-size: 24px; font-weight: 800; }
.spotlight__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Large-format browsing tile (replaces dense catalog cards) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 20px;
}
@media (min-width: 620px) {
  .tile-grid { grid-template-columns: 1fr 1fr; }
}
.p-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out);
  /* Cards in the same grid row are equal height (grid's default
     align-items: stretch), but the price/add-button row used to just sit
     wherever it fell after the name — one line for a short name, two for a
     long one — so it landed at a different height card to card. Flexing
     the card as a column and pinning that row to the bottom (below) makes
     every price/button line up on the same baseline across a row. */
  display: flex;
  flex-direction: column;
}
.p-tile:active { transform: scale(0.98); }
/* The card itself is keyboard-activatable (role="link" + tabindex, see
   components.js) — it needs its own visible focus ring, same treatment as
   the site's other custom interactive elements (.btn, .chip). */
.p-tile:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Everything else on this card was built for touch (`:active` only) — a
   mouse user hovering got zero feedback. `(hover: hover)` keeps this off
   touchscreens, where a "stuck" hover state after tapping looks like a bug. */
@media (hover: hover) and (pointer: fine) {
  .p-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-ink-faint); }
  .p-tile:hover .p-tile__media img { transform: scale(1.06); }
}
.p-tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  overflow: hidden;
  padding: 14%;
}
.p-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 700ms var(--ease-out);
}
.p-tile:active .p-tile__media img { transform: scale(1.045); }
.p-tile__tags { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.p-tile__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
}
.p-tile__fav svg { width: 17px; height: 17px; stroke: var(--color-ink); fill: none; transition: all var(--dur-fast) var(--ease-spring); }
.p-tile__fav.active svg { fill: var(--color-danger); stroke: var(--color-danger); }
.p-tile__body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.p-tile__cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-faint); }
.p-tile__name { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin: 5px 0 8px; line-height: 1.25; }
.p-tile__row { display: flex; align-items: center; justify-content: space-between; }
/* Only pin the price/button row to the card's bottom edge in the
   non-dense (≥900px) layout, where .p-tile__add sits inline in this row.
   Below 900px the dense grid takes over (next block) and pulls the add
   button out to `position: absolute` — this rule would just shove the
   leftover price + shipping note down against nothing, so it's scoped out. */
@media (min-width: 900px) {
  .p-tile__row { margin-top: auto; padding-top: 8px; }
}
.p-tile__price-wrap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.p-tile__price { font-size: 16px; font-weight: 800; }
.p-tile__compare { font-size: 12px; color: var(--color-ink-faint); text-decoration: line-through; }
.p-tile__add {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-bg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.p-tile__add:active { transform: scale(0.85); }
.p-tile__add svg { width: 16px; height: 16px; }
.p-tile__add.added { background: var(--color-success); animation: addPulse 500ms var(--ease-spring); }
@keyframes addPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.p-tile__ship { display: none; font-size: 10px; font-weight: 700; color: var(--color-success); margin-top: 4px; }

/* ---------- Dense marketplace grid (phones + small tablets, <900px) ---------- */
@media (max-width: 899px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    padding: 0;
    background: var(--color-border);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .p-tile {
    border: none;
    border-radius: 0;
    background: var(--color-surface);
  }
  .p-tile__media { aspect-ratio: 1 / 1; }
  .p-tile__tags, .p-tile__fav { top: 10px; }
  .p-tile__tags { left: 10px; }
  .p-tile__fav { right: 10px; width: 28px; height: 28px; }
  .p-tile__fav svg { width: 14px; height: 14px; }
  .p-tile__body { padding: 9px 10px 12px; }
  .p-tile__name { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; margin: 4px 0 6px; min-height: 2.4em; }
  .p-tile__row { align-items: flex-start; flex-direction: column; gap: 2px; }
  .p-tile__price { font-size: 15px; }
  .p-tile__add { position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; box-shadow: var(--shadow-sm); }
  .p-tile__ship { display: block; }

  /* Home tab grid and standalone catalog-grid follow the same dense treatment */
  .catalog-grid, .home-tab-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Brand narrative (dark cinematic block) ---------- */
.narrative { position: relative; padding: 90px 20px; text-align: left; overflow: hidden; }
.narrative__num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--color-accent-soft);
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  display: block;
}
.narrative h2 {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.12;
  max-width: 16ch;
  margin-bottom: 22px;
  text-wrap: balance;
}
.narrative p { font-size: 14.5px; line-height: 1.7; max-width: 46ch; opacity: 0.75; margin-bottom: 30px; }
.narrative__stats { display: flex; gap: 32px; flex-wrap: wrap; }
.narrative__stat strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 500; }
.narrative__stat span { font-size: 11.5px; opacity: 0.6; letter-spacing: 0.03em; }

/* ---------- Collection strip (horizontal, large) ---------- */
.collection-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 20px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.collection-scroll::-webkit-scrollbar { display: none; }
.collection-scroll .p-tile { flex: 0 0 72%; scroll-snap-align: start; }
@media (min-width: 620px) { .collection-scroll .p-tile { flex-basis: 320px; } }

/* ---------- Sticky filter bar (catalog) ---------- */
.filter-bar {
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top));
  z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(14px);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--color-border);
  /* The category chips (10 of them, plus Filtros/Ordenar) never fit one
     screen width. #app clips overflow-x by default, so without this the
     chips past the fold weren't just unsnapped — they were unreachable. */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar .chip { scroll-snap-align: start; }
.filter-bar__count { font-size: 12px; color: var(--color-ink-faint); white-space: nowrap; margin-left: auto; }

/* ---------- Cart drawer ---------- */
.cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
.cart-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: var(--color-bg);
  z-index: 71;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  box-shadow: -20px 0 60px rgba(0,0,0,0.25);
}
.cart-drawer.open { transform: translateX(0); }
@keyframes flashHighlight {
  0% { background: var(--color-accent-soft); border-radius: var(--radius-md); }
  100% { background: transparent; }
}

/* ---------- Product page: cinematic gallery + floating panel ---------- */
.pdp-gallery {
  position: relative;
  aspect-ratio: 1 / 1.05;
  background: linear-gradient(155deg, #FF622D, #E5501D 60%, #C94515);
  overflow: hidden;
}
.pdp-gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,0.4));
}
.pdp-panel {
  position: relative;
  margin-top: -28px;
  background: var(--color-bg);
  border-radius: 28px 28px 0 0;
  padding: 30px 20px 0;
}
.pdp-dream {
  margin: 0 20px 0;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-ink);
}
.pdp-dream em { font-style: italic; color: var(--color-accent-dark); font-family: var(--font-script); font-weight: 400; font-size: 1.2em; }

@media (min-width: 900px) {
  .ed-section { max-width: 1200px; margin: 0 auto; padding: 96px 8px; }
  .ed-section--tight { max-width: 1200px; margin: 0 auto; padding: 60px 8px; }
  .cat-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; }
  .cat-tile:first-child { grid-column: span 1; grid-row: span 1; min-height: auto; }
  .spotlight { max-width: 1200px; margin: 0 auto; flex-direction: row; align-items: stretch; }
  .spotlight__media, .spotlight__body { flex: 1; }
  .spotlight__media { aspect-ratio: auto; }
  .spotlight__body { display: flex; flex-direction: column; justify-content: center; padding: 56px; }
  .tile-grid { max-width: 1200px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); padding: 0 8px; }
  .narrative { max-width: 1200px; margin: 0 auto; }
  .pdp-gallery { max-width: 640px; margin: 8px auto 0; border-radius: var(--radius-xl); aspect-ratio: 1/1; }
  .pdp-panel { max-width: 640px; margin: -20px auto 0; border-radius: 0; background: transparent; }
  .pdp-dream { margin: 0 auto; max-width: 640px; }
}

/* ---------- Catalog layout: sidebar filters + dense grid (Mercado Libre pattern) ---------- */
.catalog-sidebar { display: none; }
.catalog-sortrow { display: none; }

/* Compact, premium: smaller type, tighter rhythm, thin custom checkboxes
   instead of bulky native ones — the whole filter list (categoría +
   etiquetas + marca + precio) fits a normal laptop viewport without its
   own scroll, so "Precio" isn't hidden behind a scrollbar by default. The
   sidebar keeps its own max-height/overflow as a safety net for genuinely
   short windows, but compact spacing means it's rarely needed. */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sidebar-head h2 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.sidebar-clear { font-size: 11.5px; font-weight: 600; color: var(--color-accent-dark); }

.filter-check-group { padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.filter-check-group:first-of-type { padding-top: 0; }
.filter-check-group h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-faint); font-weight: 700; margin-bottom: 6px; }
.filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3.5px 0;
  font-size: 12.5px;
  line-height: 1.3;
  cursor: pointer;
}
.filter-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.3px solid var(--color-border);
  border-radius: 4px;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.filter-check input::before {
  content: "";
  width: 8px;
  height: 8px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 45% 62%);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-spring);
  background: #fff;
}
.filter-check input:checked {
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.filter-check input:checked::before { transform: scale(1); }
.filter-check span:nth-child(2) { flex: 1; }
.filter-check__count { color: var(--color-ink-faint); font-size: 11px; }

.price-range { display: flex; align-items: center; gap: 6px; }
.price-range input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.price-range span { color: var(--color-ink-faint); font-size: 11px; flex-shrink: 0; }

@media (min-width: 900px) {
  .catalog-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
  }
  .catalog-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    padding-top: 14px;
    /* The filter list (categoría + etiquetas + marca + descuentos + precio)
       can run taller than the viewport — without its own scroll, a sticky
       box that overflows the window just gets cut off at the bottom with no
       way to reach "Precio" and beyond. Scrolling it independently keeps
       every filter reachable regardless of window height. */
    max-height: calc(100vh - var(--header-h) - 24px - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  .catalog-main .filter-bar { display: none; }
  .catalog-sortrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-ink-faint);
  }
  .sort-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-ink); font-weight: 600; }
  .sort-link strong { font-weight: 700; }

  .tile-grid.catalog-grid {
    max-width: none;
    margin: 0;
    padding: 0 8px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
  }
}

/* ---------- Home: slim category row + tabbed dense grid (below hero) ---------- */
.home-catrow {
  display: flex;
  gap: 10px;
  padding: 0 4px 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-catrow::-webkit-scrollbar { display: none; }
.home-catchip {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px;
  min-width: 190px;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.home-catchip:active { transform: scale(0.97); }
.home-catchip:hover { border-color: var(--color-ink); }
.home-catchip img { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.home-catchip span { display: flex; flex-direction: column; text-align: left; font-size: 13px; font-weight: 700; }
.home-catchip span em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--color-ink-faint); margin-top: 1px; }

.home-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 0 4px 4px; scrollbar-width: none; }
.home-tabs::-webkit-scrollbar { display: none; }
.home-tab-sub { font-size: 12.5px; color: var(--color-ink-faint); padding: 10px 4px 4px; }
.home-tab-grid { margin-top: 14px; }

@media (min-width: 900px) {
  .home-catrow { padding: 0 8px 26px; }
  .home-catchip { min-width: 220px; }
  .home-tab-grid.tile-grid.catalog-grid { padding: 0 8px; }
}