/* ASAP_CLIENT_BLUEKIDS/wwwroot/css/components.css */
*, *::before, *::after { box-sizing: border-box; }

/* Guarantees the `hidden` attribute always wins even when a component's own
   class sets `display` (grid/flex/etc.) — otherwise a class rule with equal
   specificity that comes later in the stylesheet silently overrides the
   browser's default `[hidden]{display:none}`, showing "hidden" elements. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font: var(--text-body-md);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.container-max {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

@media (min-width: 768px) {
  .container-max { padding-inline: var(--margin-desktop); }
}

.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.d-inline { display: inline; }

.section { padding-block: var(--space-xl); }

.h1-display { font: var(--text-display-lg-mobile); color: var(--color-primary); margin: 0; }
.h2-headline { font: var(--text-headline-md); color: var(--color-primary); margin: 0; }
.h3-title { font: var(--text-title-sm); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.body-lg { font: var(--text-body-lg); color: var(--color-on-surface-variant); }
.body-md { font: var(--text-body-md); color: var(--color-on-surface-variant); }

@media (min-width: 768px) {
  .h1-display { font: var(--text-display-lg); }
}

.btn {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font: var(--text-label-caps);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { opacity: 0.9; }

.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: rgba(31, 58, 95, 0.05); }

.btn-whatsapp { background: #25d366; color: #ffffff; border-radius: var(--radius-full); }
.btn-whatsapp:hover { opacity: 0.9; }

.btn-white { background: var(--color-surface-container-lowest); color: var(--color-primary); border-color: var(--color-surface-container-lowest); }
.btn-white:hover { background: var(--color-surface-container-low); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-base) var(--space-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  font: var(--text-label-md);
  background: var(--color-surface-container-lowest);
  cursor: pointer;
}

.chip[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

.badge {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  font: var(--text-label-caps);
  text-transform: uppercase;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.badge-secondary { background: var(--color-secondary); color: var(--color-on-secondary); }

.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
/* auto-fit (not auto-fill) collapses empty tracks: with fewer cards than
   would fill a row, the existing cards stretch (via the 1fr max) to fill
   the full row width instead of leaving a blank trailing gap — the same
   problem the fixed repeat(3, 1fr) columns had whenever a section had
   fewer than 3 items on a wide screen. */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.product-card { display: flex; flex-direction: column; }
.product-card__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-sm); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__name { font: var(--text-title-sm); text-transform: uppercase; margin: 0 0 var(--space-base); }
.product-card__price { color: var(--color-primary); font-weight: 600; margin: 0 0 var(--space-xs); }
.product-card__meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-on-surface-variant); margin: 0 0 var(--space-sm); }

/* Collections carousel (Explora Colecciones): fixed-size cards that stay a
   sensible width even with only 1-2 collections, instead of a 4-slot bento
   grid stretching a single item across the whole row. */
.collections-carousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
}
.collections-carousel__item {
  position: relative;
  flex: 0 0 240px;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-container-low);
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.collections-carousel__item:hover { transform: translateY(-4px); }
.collections-carousel__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}
.collections-carousel__label { position: relative; z-index: 1; padding: var(--space-md); width: 100%; }
.collections-carousel__label strong { display: block; font: var(--text-headline-md); }
.collections-carousel__label span { display: block; font-size: 14px; opacity: 0.9; margin-bottom: var(--space-sm); }
.collections-carousel__cta { margin-top: var(--space-xs); }

@media (min-width: 768px) {
  .collections-carousel { flex-wrap: wrap; justify-content: flex-start; overflow-x: visible; }
  /* Cards grow to fill the full row width (accounting for gaps between them)
     instead of stopping at a fixed 320px, which left a large empty gap on
     the right whenever there were fewer than ~4 collections on a wide
     screen. A count-based modifier class (not an inline custom property —
     the site's CSP has no style-src 'unsafe-inline', so inline `style`
     attributes are silently dropped by the browser) picks the right share
     of the row per card. GetNewestCollections always returns at most 3. */
  .collections-carousel--count-1 .collections-carousel__item { flex: 1 1 100%; max-width: 100%; }
  .collections-carousel--count-2 .collections-carousel__item { flex: 1 1 calc(50% - var(--space-md) / 2); max-width: calc(50% - var(--space-md) / 2); }
  .collections-carousel--count-3 .collections-carousel__item { flex: 1 1 calc(33.333% - var(--space-md) * 2 / 3); max-width: calc(33.333% - var(--space-md) * 2 / 3); }
}

.announcement-bar {
  display: block;
  background: var(--color-secondary);
  color: #fff;
  overflow: hidden;
  padding-block: var(--space-xs);
  text-decoration: none;
}

.announcement-bar__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.announcement-bar__item {
  white-space: nowrap;
  font: var(--text-label-md);
  color: #fff;
  padding-inline: var(--space-lg);
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Flex (not grid) for the outer layout: nav is centered via its own
     absolute positioning (see the >=1200px rule below), completely decoupled
     from the width of the start/actions zones. A grid `auto` track sized to
     the nav's content can force the whole header (and page) wider than the
     viewport once the nav can't wrap — absolute positioning can't do that,
     since it never participates in the flex/grid sizing of its ancestor. */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--margin-mobile);
  background: rgba(243, 245, 245, 0.9);
  backdrop-filter: blur(12px);
}

/* flex: 1 1 0 on both start/actions makes them share the header width
   equally (50/50), regardless of how much their own content actually needs.
   That keeps the true midpoint between them at the header's exact center —
   matching where #main-nav is absolutely centered to at >=1200px — so the
   nav stays optically centered even though the logo zone and the
   search+cart zone have very different natural content widths. */
.site-header__start { display: flex; align-items: center; gap: var(--space-sm); flex: 1 1 0; }
.site-header__brand { display: flex; align-items: center; }
.site-header__logo { height: 32px; width: auto; display: block; }

.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); flex: 1 1 0; }
.site-header__search { display: flex; align-items: center; gap: 2px; min-width: 0; }
.site-header__search input[type="search"] {
  width: 84px; min-width: 0; padding: 6px var(--space-xs); border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant); background: var(--color-surface-container-lowest);
  font: var(--text-label-md);
}
.site-header__search-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--color-on-surface); }
.site-header__cart { position: relative; display: flex; align-items: center; color: var(--color-on-surface); }
.cart-badge {
  position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary);
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

@media (min-width: 768px) {
  .site-header__search input[type="search"] { width: 160px; }
}

@media (min-width: 768px) {
  .site-header__logo { height: 40px; }
}

@media (min-width: 1024px) {
  .site-header__logo { height: 48px; }
}

.site-footer { border-top: 1px solid var(--color-outline-variant); text-align: center; padding: var(--space-xl) var(--margin-mobile); }
.site-footer__grid { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); text-align: center; }
.site-footer__brand { display: flex; flex-direction: column; align-items: center; }
.site-footer__mark { margin-bottom: var(--space-xs); }
.site-footer__brand p.body-md { max-width: 320px; margin: var(--space-xs) auto 0; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.site-footer__links a { color: var(--color-on-surface-variant); text-decoration: none; }
.site-footer__links a:hover { color: var(--color-primary); text-decoration: underline; }
.site-footer__socials nav { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; color: var(--color-on-surface-variant); }
.site-footer__social-link:hover { color: var(--color-primary); }

@media (min-width: 1024px) {
  .site-footer__grid { flex-direction: row; justify-content: space-between; text-align: left; }
  .site-footer__brand { text-align: left; align-items: flex-start; }
  .site-footer__brand p.body-md { margin-inline: 0; }
  .site-footer__socials { text-align: right; }
  .site-footer__socials nav { justify-content: flex-end; }
}

.whatsapp-float {
  position: fixed; right: var(--margin-mobile); bottom: 90px; z-index: 50;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
}

.whatsapp-float > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1024px) {
  .whatsapp-float { bottom: var(--margin-desktop); }
  .whatsapp-float::before {
    content: "¿Necesitas ayuda? ¡Escríbenos!";
    position: absolute;
    right: calc(100% + var(--space-sm));
    bottom: 50%;
    transform: translateY(50%);
    background: #fff;
    color: var(--color-primary);
    font: var(--text-label-md);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .whatsapp-float:hover::before,
  .whatsapp-float:focus-visible::before {
    opacity: 1;
  }
}

.site-header nav#main-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--margin-mobile);
  background: var(--color-surface-container-lowest);
  border-bottom: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-soft);
}

.site-header nav#main-nav.is-open {
  display: flex;
}

.site-header nav#main-nav a {
  color: var(--color-on-surface);
  text-decoration: none;
  font: var(--text-label-md);
}

#menu-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* The inline nav + search + cart only fit comfortably on one row from ~1200px
   up; below that, the nav stays in the hamburger dropdown (see base rules
   above) so the header row never has to stretch to fit a wrapped nav. */
@media (min-width: 1200px) {
  .site-header {
    position: relative;
  }

  .site-header nav#main-nav {
    display: flex;
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    width: max-content;
    transform: translate(-50%, -50%);
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-md);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    white-space: nowrap;
  }

  #menu-toggle {
    display: none;
  }
}

.faq-item { border-bottom: 1px solid var(--color-outline-variant); padding: var(--space-sm) 0; }
.faq-item summary { cursor: pointer; font: var(--text-title-sm); }

table.size-guide { width: 100%; border-collapse: collapse; text-align: left; }
table.size-guide th { padding: var(--space-sm) 0; font: var(--text-label-caps); color: var(--color-on-surface-variant); border-bottom: 1px solid var(--color-outline-variant); }
table.size-guide td { padding: var(--space-sm) 0; border-bottom: 1px solid rgba(0,0,0,0.05); }

/* Utilities */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-on-primary { color: var(--color-on-primary); }
.link-plain { color: inherit; text-decoration: none; }
.no-underline { text-decoration: none; }

/* Hero */
/* aspect-ratio (instead of a flat 70vh) keeps the hero proportional to typical
   cover images (e.g. 1000x500) so object-fit: cover doesn't crop most of the
   photo away inside an overly tall box. */
/* width: 100% is required here: with aspect-ratio + max-height on a block
   element with an otherwise-auto width, browsers derive the width FROM the
   clamped height instead of filling the container once max-height kicks in
   — without this the whole hero (and everything below it looked "shifted"
   because the page appeared narrower than the viewport). */
/* Hero: same contained/scaled image treatment as the product detail page
   (max 450x600, object-fit: contain) instead of a full-width cropped photo.
   Background is a translucent collage of the carousel's own collection
   covers (a "preview of everything") tinted with the brand navy so text
   stays legible, instead of a flat color block. */
.hero { position: relative; background: var(--color-primary-tint); overflow: hidden; }
.hero__collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.hero__collage img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.hero__collage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary-tint);
  opacity: 0.72;
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.hero__content { padding-block: var(--space-lg) 0; }
.hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }

@media (min-width: 768px) {
  .hero__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .hero__content { padding-block: 0; }
}

/* Hero carousel: fanned/circular stack (active card on top, the rest of the
   collections fanned out behind it in an arc, each rotated a bit further)
   so it reads as "there's a whole deck here", not one flat card hidden
   directly behind another. Fan angle/offset/scale are set per slide via JS
   (site.js) as inline custom properties, based on distance from the active
   slide, so it works for any number of collections. */
.hero__carousel-wrap { position: relative; width: 100%; max-width: 450px; margin-inline: auto; }
.hero__carousel { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 600px; }
.hero__carousel-slide {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-container-low);
  transform-origin: bottom center;
  transform: rotate(calc(var(--fan-angle, 0) * 1deg)) translate(calc(var(--fan-offset, 0) * 1px), calc(var(--fan-offset, 0) * -0.6px)) scale(var(--fan-scale, 1));
  opacity: var(--fan-opacity, 0);
  z-index: var(--fan-z, 1);
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.hero__carousel-slide img { width: 100%; height: 100%; object-fit: contain; }
.hero__carousel-slide.is-active {
  box-shadow: var(--shadow-soft);
  pointer-events: auto;
}
/* Buttons must sit above every card in the fan (highest of which is z-index
   10, see site.js), otherwise the active image covers them and they become
   unclickable/invisible. */
.hero__carousel-wrap .product-detail__carousel-btn { z-index: 20; }
/* Inside the card bounds by default: the fanned-out negative offsets below
   only make sense once there's enough side margin for them not to get
   clipped by .hero's overflow:hidden — on narrow viewports the wrap is
   nearly full-width, so a negative offset pushes the button past the
   screen edge entirely (unreachable/invisible). */
.hero__carousel-wrap .product-detail__carousel-btn--prev { left: var(--space-xs); }
.hero__carousel-wrap .product-detail__carousel-btn--next { right: var(--space-xs); }

@media (min-width: 768px) {
  .hero__carousel-wrap .product-detail__carousel-btn--prev { left: calc(var(--space-xs) * -1); }
  .hero__carousel-wrap .product-detail__carousel-btn--next { right: calc(var(--space-lg) * -1); }
}

/* Section heading with trailing link */
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.section-heading__link { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-primary); font: var(--text-label-md); text-decoration: none; }
.section-heading__link:hover { text-decoration: underline; }

/* New collection banner */
.new-collection-banner { background: var(--color-primary); color: var(--color-on-primary); }
.new-collection-banner .text-primary,
.new-collection-banner .h1-display,
.new-collection-banner .body-lg,
.new-collection-banner .body-md { color: var(--color-on-primary); }
.new-collection-banner .btn-outline { color: var(--color-on-primary); border-color: var(--color-on-primary); }
.new-collection-banner .btn-outline:hover { background: rgba(255, 255, 255, 0.1); }
.new-collection-banner__grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.new-collection-banner__media { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }

@media (min-width: 768px) {
  .new-collection-banner__grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Generic section spacing helpers */
.mt-lg { margin-top: var(--space-lg); }
.section--surface-low { background: var(--color-surface-container-low); }
.section--surface-low-bordered { background: var(--color-surface-container-low); border-block: 1px solid var(--color-outline-variant); }

/* Testimonials */
.testimonial-rail { display: flex; gap: var(--space-md); overflow-x: auto; margin-top: var(--space-lg); }
.testimonial-card { min-width: 220px; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.testimonial-card__media { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--space-sm);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: #fff;
  font-size: 12px;
}

/* FAQ section */
.faq-section { max-width: 720px; }

/* Product detail */
.product-detail__grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
/* max-width: 450px / aspect-ratio: 3/4 caps the image at 450x600, matching the
   600px-tall / 450px-wide limit from the spec without cropping (object-fit: contain). */
.product-detail__cover {
  width: 100%;
  max-width: 450px;
  aspect-ratio: 3 / 4;
  max-height: 600px;
  object-fit: contain;
  background: var(--color-surface-variant, #f4f1ec);
  border-radius: var(--radius-lg);
  margin-inline: auto;
  display: block;
}

@media (min-width: 768px) {
  .product-detail__grid { grid-template-columns: 1fr 1fr; max-width: none; margin-inline: 0; align-items: start; }
}

/* Product detail carousel */
.product-detail__carousel { position: relative; max-width: 450px; margin-inline: auto; }
.product-detail__carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}
.product-detail__carousel-track::-webkit-scrollbar { display: none; }
.product-detail__carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  max-height: 600px;
  background: var(--color-surface-variant, #f4f1ec);
}
.product-detail__carousel-slide img { width: 100%; height: 100%; object-fit: contain; }
.product-detail__carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-on-surface);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.product-detail__carousel-btn:hover { background: #fff; }
.product-detail__carousel-btn--prev { left: var(--space-xs); }
.product-detail__carousel-btn--next { right: var(--space-xs); }
.product-detail__thumbs { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.product-detail__thumb {
  width: 64px;
  height: 80px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.7;
}
.product-detail__thumb:hover { opacity: 1; }
.product-detail__thumb[aria-current="true"] { border-color: var(--color-primary); opacity: 1; }
.product-card__price--headline { font: var(--text-headline-md); }
.size-selector { border: none; padding: 0; margin-block: var(--space-md); }
.size-selector__options { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

/* Catalogo layout: filters sidebar + results grid */
.catalogo-layout__grid { display: block; margin-block: var(--space-lg); }

@media (min-width: 900px) {
  .catalogo-layout__grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-xl); align-items: start; }
}

/* Filters panel: collapsible accordion sections (like a "FILTROS" sidebar),
   replacing the old always-open row of chip groups. */
.filters-panel { border: 1px solid var(--color-outline-variant); border-radius: var(--radius-lg); padding: var(--space-md); }
.filters-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.filters-panel__title { font: var(--text-headline-md); color: var(--color-primary); margin: 0; }
.filters-panel__clear { font: var(--text-label-md); color: var(--color-on-surface-variant); text-decoration: underline; white-space: nowrap; }
.filters-panel__clear:hover { color: var(--color-primary); }

.filter-accordion { border-top: 1px solid var(--color-outline-variant); }
.filter-accordion:last-of-type { border-bottom: 1px solid var(--color-outline-variant); }
.filter-accordion summary {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-sm); cursor: pointer; font: var(--text-label-md); font-weight: 600;
  color: var(--color-on-surface); list-style: none;
}
.filter-accordion summary::-webkit-details-marker { display: none; }
.filter-accordion summary::after {
  content: "+"; font-size: 1.2em; font-weight: 400; color: var(--color-on-surface-variant); line-height: 1;
}
.filter-accordion[open] summary::after { content: "\2212"; }
.filter-accordion__content { padding-bottom: var(--space-md); }
.filter-accordion__content select {
  width: 100%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm);
  border: 1px solid var(--color-outline-variant); background: var(--color-surface-container-lowest);
  font: var(--text-label-md);
}
.filter-chip-group { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.filter-chip { position: relative; padding-left: var(--space-sm); }
.filter-chip input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-chip:has(input:checked) { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

.filter-price-range { display: flex; gap: var(--space-sm); }
.filter-price-range label { flex: 1; font: var(--text-label-md); color: var(--color-on-surface-variant); }
.filter-price-range input[type="number"] {
  display: block; width: 100%; margin-top: 4px; padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm); border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest); font: var(--text-label-md);
}

.catalogo-filters__actions:empty { display: none; }

/* Search results (US7) */
.search-results__collections { margin-bottom: var(--space-lg); }
.search-results__collections-list { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xs); }

/* Contacto */
.contacto-socials { margin-top: var(--space-xl); display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

/* Benefits (circular badge icons) */
.benefit { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.benefit__icon {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--color-surface-container-lowest); box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
}
.benefit__icon img { width: 28px; height: 28px; }

/* Hero badge */
.hero__badge {
  display: inline-block; padding: var(--space-base) var(--space-sm);
  background: var(--color-secondary-container); color: var(--color-secondary);
  border-radius: var(--radius-full); font: var(--text-label-caps);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-sm);
}
.hero__accent { font-style: italic; }
.btn-primary img { filter: invert(1) brightness(2); }

/* Cómo Pedir */
.como-pedir__grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }

@media (min-width: 1024px) {
  .como-pedir__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-xl); }
}

.steps-list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.steps-list__item { display: flex; gap: var(--space-md); align-items: flex-start; }
.steps-list__number {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--color-primary-container); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.steps-list__item h3 { text-transform: none; letter-spacing: normal; margin-bottom: var(--space-base); }

.benefits-box {
  padding: var(--space-lg); background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant); border-radius: var(--radius-lg);
}
.benefits-box__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-sm); }
.benefits-box__item { display: flex; align-items: center; gap: var(--space-xs); font: var(--text-label-md); }
.benefits-box__item img { flex-shrink: 0; }

.como-pedir__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.como-pedir__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.como-pedir__card {
  position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md);
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.como-pedir__card-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--color-primary); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.como-pedir__card-icon img { width: 100%; height: 100%; object-fit: cover; }
.como-pedir__card-title { color: var(--color-primary); font-weight: 600; margin: 0 0 2px; }
.como-pedir__card p.body-md { margin: 0; }

/* Quantity selector (US3) */
.quantity-selector { margin-block: var(--space-md); }
.quantity-selector__controls { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); }
.quantity-selector__btn {
  width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest); font-size: 18px; line-height: 1; cursor: pointer;
}
.quantity-selector__btn:hover { background: var(--color-surface-container-low); }
.quantity-selector__input {
  width: 56px; text-align: center; padding: var(--space-xs); border-radius: var(--radius-sm);
  border: 1px solid var(--color-outline-variant); font: var(--text-label-md);
}

/* Modal (wholesale confirmation, US3) */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.modal__panel {
  position: relative; z-index: 1; max-width: 420px; width: calc(100% - var(--space-lg));
  background: var(--color-surface-container-lowest); border-radius: var(--radius-lg);
  padding: var(--space-lg); box-shadow: var(--shadow-soft);
}
.modal__actions { display: flex; gap: var(--space-sm); justify-content: flex-end; margin-top: var(--space-md); flex-wrap: wrap; }

/* Product detail sections: description / details / care (US4) */
.product-detail__sections { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.product-detail__section { border-top: 1px solid var(--color-outline-variant); padding-top: var(--space-md); }
.product-detail__section h2 { margin-bottom: var(--space-xs); }

/* Discount badge and struck-through price (US6) */
.badge-discount { background: var(--color-error, #b3261e); color: #fff; }
.product-card__price--original {
  color: var(--color-on-surface-variant, #6b6b6b); text-decoration: line-through; font-weight: 400;
  margin-right: var(--space-xs); font-size: 0.9em;
}
.product-detail__price .product-card__price--original { display: inline-block; }
.product-detail__price .badge-discount { position: static; display: inline-block; margin-right: var(--space-xs); }

/* Recommended products carousel (US5) */
.recommended-carousel { margin-top: var(--space-xl); }
.recommended-carousel__viewport { position: relative; }
.recommended-carousel__track {
  display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: var(--space-xs);
}
.recommended-carousel__track::-webkit-scrollbar { display: none; }
.recommended-carousel__item { flex: 0 0 calc(50% - var(--space-md) / 2); scroll-snap-align: start; }

@media (min-width: 1024px) {
  .recommended-carousel__item { flex-basis: calc(25% - (3 * var(--space-md) / 4)); }
}

/* Cart page (US9) */
.cart-page__empty { text-align: center; padding: var(--space-xl) 0; display: grid; gap: var(--space-md); justify-items: center; }
.cart-page__error { background: rgba(186, 26, 26, 0.08); color: var(--color-error); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); margin-bottom: var(--space-md); }
.cart-page__list { list-style: none; margin: var(--space-lg) 0; padding: 0; display: grid; gap: var(--space-md); }
.cart-page__item {
  display: grid; grid-template-columns: 80px 1fr auto; gap: var(--space-md); align-items: center;
  padding: var(--space-md); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-lg);
}
.cart-page__item--unavailable { grid-template-columns: 1fr auto; color: var(--color-error); }
.cart-page__item-image { width: 80px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-page__item-name { font-weight: 600; margin: 0; }
.cart-page__item-meta { color: var(--color-on-surface-variant); margin: 2px 0; font-size: 0.9em; }
.cart-page__item-price { color: var(--color-primary); font-weight: 600; margin: 2px 0 0; }
.cart-page__item-controls { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
.cart-page__item-qty { min-width: 24px; text-align: center; }
.cart-page__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-top: var(--space-md); border-top: 1px solid var(--color-outline-variant); flex-wrap: wrap;
}
.cart-page__total { font: var(--text-headline-md); margin: 0; }

@media (max-width: 480px) {
  .cart-page__item { grid-template-columns: 64px 1fr; }
  .cart-page__item-controls { grid-column: 1 / -1; justify-content: flex-start; }
}