/* ==========================================================================
   Descanshop — Categoría (Terraza y jardín)
   Ground truth: Figma "Categoría (con filtros ocultos)" 331:4325 (1920)
                 "Categoría (con filtros)"        343:4707 (1920, filters state)
                 "Categoría" (móvil)              294:3145 (430)
   Shared shell (header/footer/store card) is the same Figma
   component set as the Home build in prepared/402-1757 — geometry reused.
   ========================================================================== */

/* ---------- Fonts -------------------------------------------------------- */
/* Florentia is the design's typeface (commercial). Drop the licensed webfont
   files into assets/fonts/ with these exact names. */
/* The filter panel headings use Florentia Medium (500) and Bold (700) — weights the
   client kit does NOT ship. Chrome synthesises them from Regular. Add the real files
   under these names when the licensed release arrives and the rules below pick them up. */

/* ---------- Tokens ------------------------------------------------------- */

/* ---------- Base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--azul-oscuro);
  font-family:var(--font);
  font-weight:400;
  /* No overflow-x:hidden — it hides an overflow instead of fixing it. */
}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--azul);color:var(--beige);padding:8px 16px;border-radius:0 0 9px 0}
.skip-link:focus{left:0}

/* full-bleed band, content capped and centred on the design track */
.section__inner,
.site-header__inner,
.site-footer__inner{
  width:100%;
  margin:0 auto;
  padding-inline:max(25px,calc((100% - var(--page)) / 2));
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;font-size:16px;font-weight:400;line-height:normal;text-align:center;
  box-shadow:none;
}
.btn--primary{background:var(--azul);color:var(--beige)}
.btn--beige{background:var(--beige);color:#2b4b69}

/* ==========================================================================
   HEADER  (369:10902 — same component as the Home build)
   ========================================================================== */
.site-header{position:sticky;top:0;height:77px;z-index:20}
.site-header__bar{
  position:absolute;left:0;right:0;top:1px;height:76px;
  background:rgba(255,255,255,0.3);
  -webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);
}
.site-header__inner{position:relative;display:flex;align-items:flex-start;height:77px}
.site-header__logo{flex:0 0 auto;margin-top:1px}
.site-header__logo img{width:265px;height:67px;object-fit:contain}

.nav{margin-left:185.4px}
.nav__list{display:flex;align-items:flex-start}
.nav__item{display:flex;align-items:center;margin-top:29px}
.nav__link{
  display:block;width:91px;font-size:20px;font-weight:400;line-height:20px;
  color:var(--azul-oscuro);text-align:center;
}
.nav__chevron{width:10px;height:6px;margin-left:4.6px;margin-top:8.5px;align-self:flex-start;flex:0 0 auto}
.nav__link--tiendas{width:78px;margin-left:48.4px}
.nav__link--ofertas{width:75px;margin-left:57px}
.nav__link--ideas{width:158px;margin-left:57px}
.nav__link--sobre{width:152px;margin-left:64px}

.lang{display:flex;align-items:flex-start;margin-left:54.6px;margin-top:28px}
.lang__flag{width:25.427px;height:25.427px}
.lang__code{margin-left:4px;margin-top:1px;font-size:20px;line-height:24px;color:var(--azul-oscuro)}

.site-header__cta{width:215px;height:56px;margin-left:27.6px;margin-top:11px}

.burger{display:none;width:26px;height:17px}
.mobile-menu{display:none}

/* ==========================================================================
   HERO  (347:13969 — 1920×523 band at y 77)
   ========================================================================== */
/* Como las tarjetas de categoría del home (`.cat` en home.css): la foto ocupa
   el 60% derecho y no la banda entera, y el azul de la sección llena el resto.
   Su borde izquierdo cae en el 40%, donde el lavado deja de ser azul sólido y
   empieza a desvanecerse. A toda la banda, el lavado tapaba la mitad de la
   fotografía y el encuadre centrado dejaba lo que se veía en un rincón. */
.hero{position:relative;height:523px;overflow:hidden;background:var(--azul)}
.hero__bg{
  position:absolute;top:0;right:0;bottom:0;width:60%;height:100%;
  object-fit:cover;object-position:center;
}
.hero__bg--m{display:none}
/* 347:13973 — 1379.086 of 1920 = 71.83% */
.hero__wash{position:absolute;left:0;top:0;bottom:0;width:71.83%;background:var(--hero-wash)}
.hero__inner{
  position:relative;height:100%;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:15px;
  margin:0 auto;padding-block:40px;padding-inline:max(25px,calc((100% - var(--page)) / 2));
}
.hero__title{
  max-width:650px;
  font-size:55.907px;font-weight:400;line-height:1.15;
  text-transform:uppercase;color:var(--beige);
}
.hero__lede{
  width:600px;
  font-size:22px;font-weight:400;line-height:26px;color:var(--beige);
}

/* ==========================================================================
   CAROUSEL DOTS  (347:14015 / 347:14019 — 74×10 track, 30.5 active)
   ========================================================================== */
.dots{display:flex;justify-content:center}
.dots__track{display:block;width:74px;height:10px;border-radius:9.5px;background:var(--beige)}
.dots__on{display:block;width:30.5px;height:10px;border-radius:9.5px;background:var(--azul)}
.dots--hero{margin-top:26px}

/* ==========================================================================
   BLOQUE SEO — reparto y orden propios de la categoría
   ==========================================================================
   En tiendas y ofertas va al pie, 40/60 y con la foto a la izquierda; eso lo
   pone `layouts/chrome.css`, que carga en todas. Aquí ocupa el sitio del
   showcase, arriba, y se reparte al 50/50 con el texto a la izquierda y la
   foto a la derecha.

   Sólo cambian las columnas: el aire entre ellas sigue siendo el margen del
   envoltorio de la foto, que se muda de un lado al otro por el mismo motivo que
   allí — un `gap` se descuenta de las dos y entonces ninguna mide su 50 %.
   Por debajo de 900 la foto no se imprime y la rejilla vuelve a bloque, las dos
   cosas ya resueltas en chrome.css. */
.seo__grid{grid-template-columns:50% 50%}
.seo__main{grid-column:1}
.seo__media{grid-column:2;margin-right:0;margin-left:60px}

/* ==========================================================================
   FILTER BAR  (347:14244..14268 — row at y 1254, height 41)
   ========================================================================== */
.section--catalog{margin-top:24px}

.toolbar{display:flex;align-items:center;height:41px}
.toolbar__filters{
  position:relative;display:inline-flex;align-items:center;
  width:246px;height:41px;flex:0 0 auto;
  background:var(--azul);border-radius:9px;
}
.toolbar__icon{position:absolute;left:53px;top:13px;font-size:16px;}
.toolbar__icon--off{display:none}
.toolbar__filters span{
  position:absolute;left:81px;top:10px;
  font-size:16px;font-weight:400;line-height:normal;color:var(--beige);
}
.toolbar__filters .toolbar__off{display:none}
.toolbar__count{
  margin-left:26px;
  font-size:16px;font-weight:400;line-height:normal;color:var(--azul-oscuro);
}
.search{position:relative;margin-left:auto;width:517px;height:41px;flex:0 0 auto}
.search__input{
  width:517px;height:41px;border:0;border-radius:9px;
  background:var(--search-bg);
  padding:0 73px 0 25px;
  font-family:inherit;font-size:16px;font-weight:300;line-height:normal;color:var(--azul-oscuro);
}
.search__input::placeholder{color:var(--placeholder);opacity:1}
.search__btn{
  position:absolute;right:0;top:0;width:44px;height:41px;
  display:flex;align-items:center;justify-content:center;
  background:var(--azul);border-radius:9px;
}
.search__btn .ds-icon{font-size:15.833px;}

/* ==========================================================================
   CATALOG LAYOUT  (panel + grid)
   ========================================================================== */
.catalog{margin-top:24px}
.catalog__grid{
  display:grid;grid-template-columns:repeat(4,382px);
  justify-content:space-between;row-gap:24px;
}
/* Filters open (343:4707): the 381px panel takes the first track and the grid drops to 3-up */
.catalog__panel{display:none}
[data-filters="open"] .catalog{display:grid;grid-template-columns:381px 1fr;column-gap:25px;align-items:start}
[data-filters="open"] .catalog__panel{display:grid}  /* grid, no block: la rejilla del panel vive en .panel y esta regla la ganaba por especificidad */
[data-filters="open"] .catalog__grid{grid-template-columns:repeat(3,382px)}
/* 343:4707 keeps the SAME six rows when the panel opens — the grid narrows to 3-up and the
   page height is unchanged, so the last six tiles drop off page 1. */
[data-filters="open"] .catalog__grid .pcard:nth-child(n+19){display:none}
[data-filters="open"] .toolbar__filters .toolbar__on{display:none}
[data-filters="open"] .toolbar__filters .toolbar__off{display:block}
[data-filters="open"] .toolbar__icon--on{display:none}
[data-filters="open"] .toolbar__icon--off{display:block;left:52px;top:11.7px;font-size:17.4px;}
[data-filters="open"] .pagination{margin-left:141px}

/* ---------- Filters panel (347:14837 …) --------------------------------- */
/* Rejilla en flujo, no coordenadas.
   El diseño fijaba cada grupo a su `top` (categorías en 79, tiendas en 240,
   precio en 516) contando con las cuatro categorías y las cinco tiendas de la
   maqueta. Con seis y siete, las listas se montaban unas sobre otras y sobre
   los separadores. Ahora cada bloque ocupa su fila y el panel crece con ellas;
   los huecos del diseño viven en los margin-top. */
.panel{
  position:relative;width:381px;margin-top:6px;padding:37px 24px 23px;
  /* Sin display aquí: .panel viene DESPUÉS de .catalog__panel{display:none} y
     con la misma especificidad, así que un display:grid en este bloque dejaba
     el panel siempre visible. Lo pone la regla [data-filters="open"]. */
  grid-template-columns:1fr auto;
  grid-template-areas:
    "title  reset"
    "cats   cats"
    "rule1  rule1"
    "shops  shops"
    "rule2  rule2"
    "price  price"
    "fields fields";
  background:var(--card-bg);border-radius:15px;
}
.panel__title{grid-area:title;font-size:18px;font-weight:700;line-height:16px;color:var(--azul-oscuro)}
.panel__reset{grid-area:reset;display:flex;align-items:center;gap:8px;align-self:start;margin-top:-4px}
.panel__reset .ds-icon{font-size:17.8px;}
.panel__reset span{font-size:16px;font-weight:400;line-height:normal;color:var(--rojo)}
/* fieldset/legend carry a UA border + inset legend notch — zero them or the panel grows boxes
   the design does not have and the option rows indent by the fieldset's default padding. */
.panel__group{margin:0;padding:0;border:0;min-width:0}
/* los dos grupos de casillas sangran 3px más que el resto del panel (27 vs 24) */
.panel__group--cats{grid-area:cats;margin:26px 0 0 3px}
.panel__group--shops{grid-area:shops;margin:17px 0 0 3px}
/* Esta ficha omite el grupo de categorías (la página ya está acotada a una), así
   que Tienda pasa a ser el primer fieldset y hereda su hueco bajo el título. Las
   filas del panel son implícitas: el área "cats" vacía mide 0. */
.panel__group--shops:first-of-type{margin-top:26px}
.panel__group--price{grid-area:price;margin-top:21px}
.panel__legend{display:block;padding:0;font-size:16px;font-weight:500;line-height:16px;color:var(--azul-oscuro)}
.panel__opts{margin-top:6px}
.panel__opt{display:flex;align-items:center;height:36px}
.panel__opt input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:14px;height:14px;margin:0;
  border:1px solid var(--azul-oscuro);border-radius:3px;opacity:.3;
  background:transparent;cursor:pointer;
}
.panel__opt input:checked{opacity:1;background:var(--azul);border-color:var(--azul)}
.panel__opt span{margin-left:9px;font-size:16px;font-weight:300;line-height:36px;color:var(--azul-oscuro)}
.panel__rule{height:1px;background:var(--secundario-claro);border:0;margin:0}
.panel__rule--1{grid-area:rule1;margin-top:14px}
.panel__rule--2{grid-area:rule2;margin-top:17px}
/* 347:14861 — la fila de campos abre 16.9 bajo el rótulo "Precio" (el bbox del
   grupo arranca más arriba porque la etiqueta flotante "Mínimo" sobresale). */
.panel__fields{grid-area:fields;display:flex;flex-wrap:wrap;gap:16px 30px;margin-top:16.9px}
.panel__apply{flex:1 0 100%;height:40px}
.field{position:relative;width:151px;height:40px}
.field input{
  width:151px;height:40px;padding:0 10px;
  border:1px solid var(--field-border);border-radius:10px;background:transparent;
  font-family:inherit;font-size:16px;font-weight:300;line-height:30px;color:var(--azul-oscuro);
}
/* 347:14870 — 13/300 with a 30px line box (the Figma text node's own metric). The box is
   taller than the glyphs, so `top` places the BASELINE where the design has it, not the box. */
.field__label{
  position:absolute;left:7px;top:-14.3px;padding:0 3px;
  background:var(--field-label-bg);
  font-size:13px;font-weight:300;line-height:30px;color:var(--azul-oscuro);
}

/* ==========================================================================
   PRODUCT CARD  (407:10851 — 382×341)
   ========================================================================== */
/* Rejilla, no coordenadas: el distintivo, la foto, las muestras, el nombre y el
   precio ocupan una fila cada uno, y los huecos del diseño viven en el padding
   y en los margin-top. La foto se queda con el espacio libre que sobra. */
.pcard{
  position:relative;
  display:grid;
  grid-template-areas:"badge" "img" "sw" "name" "price";
  grid-template-rows:27px minmax(0,1fr) auto auto auto;
  width:382px;height:341px;padding:19px 29px 36px;
  background:var(--card-bg);border-radius:20px;box-shadow:none;
}
/* El texto va SOBRE la píldora SVG: comparten celda en lugar de superponerse
   con position:absolute. */
.pcard__badge{grid-area:badge;display:grid;align-items:center;justify-self:start;height:27px}
.pcard__badge>*{grid-area:1/1}
.pcard__badge img{width:auto;height:27px}
.pcard__badge em{
  padding-left:15px;font-style:normal;
  font-size:16px;font-weight:300;line-height:27px;color:var(--azul-oscuro);
}
.pcard__img{grid-area:img;display:block;margin-top:11px;overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:contain;max-width:none}
.pcard__swatches{grid-area:sw;display:flex;align-items:center;gap:5px;margin-top:16px}
.pcard__swatches img{width:29px;height:18px;border-radius:37px;object-fit:cover}
/* El nombre entero, sin recortar; el alto mínimo de una línea alinea el precio
   de las tarjetas de nombre corto. */
.pcard__name{
  grid-area:name;margin-top:11px;padding-right:65px;
  min-height:1.2em;
  font-size:16px;font-weight:300;line-height:1.2;color:var(--azul-oscuro);
}
.pcard__price{
  grid-area:price;display:block;margin-top:10.8px;
  font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro);
}
.pcard__go{display:none}

/* ==========================================================================
   PAGINATION  (347:14250 — 223×43 group, centred)
   ========================================================================== */
.pagination{
  display:flex;align-items:center;justify-content:center;
  margin-top:32px;height:43px;
}
.pagination__arrow{display:flex;align-items:center;justify-content:center;width:16px;height:43px}
.pagination__arrow .ds-icon{font-size:16px;}
.pagination__arrow--prev .ds-icon{transform:rotate(180deg)}
.pagination__list{display:flex;align-items:center}
.pagination__link{
  display:flex;align-items:center;justify-content:center;
  width:43px;height:43px;border-radius:14px;
  font-size:16px;font-weight:400;line-height:normal;color:var(--azul-oscuro);
}
.pagination__link[aria-current="page"]{background:rgba(0,159,227,0.2)}
.pagination__arrow--prev{margin-right:17px}
.pagination__arrow--next{margin-left:17px}
.pagination__item+.pagination__item{margin-left:14px}

/* ==========================================================================
   STORE CARDS  (407:11020 — 517×321; same component as the Home build)
   ========================================================================== */
.section--stores{margin-top:44px}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.section__title{font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro)}
.link-all{
  flex:0 0 auto;white-space:nowrap;
  font-size:16px;font-weight:300;line-height:normal;text-align:right;color:var(--azul-oscuro);
}
.link-all{transition:color .15s ease-out}
.link-all:hover{color:var(--azul)}
.section--stores .rail{margin-top:28px}
.section--stores .dots{margin-top:29px}

.rail{position:relative}
.rail__next{
  position:absolute;top:50%;right:-70px;transform:translateY(-50%);
  width:49px;height:49px;
  display:flex;align-items:center;justify-content:center;
  background:var(--tag-bg);border-radius:50%;
}
.rail__next .ds-icon{font-size:16px}

/* Tres columnas — foto, iconos y texto — y una fila por dato. La primera
   columna incluye el hueco de la foto (233 + 23.4) porque un column-gap se
   aplicaría también entre los iconos y su texto. */
.scards{display:grid;grid-template-columns:repeat(3,517px);justify-content:space-between}
.scard{
  position:relative;
  display:grid;
  grid-template-columns:256.4px 22.6px 1fr;
  grid-template-areas:
    "photo name   name"
    "photo iloc   addr"
    "photo iclock hours"
    "photo iphone phone"
    "photo imail  mail"
    "photo .      .";
  grid-template-rows:auto auto auto auto auto 1fr;
  width:517px;height:321px;padding:6px 8px 7px;
  background:var(--card-bg);border-radius:20px;box-shadow:none;
}
.scard__photo{
  grid-area:photo;display:block;justify-self:start;align-self:start;
  width:233px;height:308px;border-radius:14px;overflow:hidden;
}
.scard__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.scard__name{
  grid-area:name;display:block;margin-top:25px;
  font-size:20px;font-weight:400;line-height:normal;color:var(--azul-oscuro);
}
.scard__icon{align-self:start;height:auto}
.scard__icon--loc{grid-area:iloc;width:13.2px;margin-top:13.4px}
.scard__icon--clock{grid-area:iclock;width:14.2px;margin-top:20.4px}
.scard__icon--phone{grid-area:iphone;width:15px;margin-top:30px}
.scard__icon--mail{grid-area:imail;width:15px;margin-top:17px}
.scard__addr,.scard__hours,.scard__phone,.scard__mail{
  display:block;align-self:start;
  font-size:16px;font-weight:300;line-height:normal;color:var(--azul-oscuro);
}
/* the trailing address line and the last two opening-hours lines are their own blocks so the
   430 frame can drop them without clipping text (see the ≤900 rule) */
.scard__addr-l2,.scard__hours-more{display:block}
.scard__addr{grid-area:addr;margin-top:11px}
.scard__hours{grid-area:hours;margin-top:17px}
.scard__phone{grid-area:phone;margin-top:28px}
.scard__mail{grid-area:mail;margin-top:11px}
.scard__go{display:none}

/* ==========================================================================
   FOOTER  (412:12579 — 1920×387; same component as the Home build)
   ========================================================================== */
.site-footer{margin-top:37px;background:var(--footer-bg)}
.site-footer__inner{
  position:relative;
  display:grid;
  grid-template-columns:714px 322px 271px auto;
  height:387px;
}
.site-footer__brand{grid-column:1}
.site-footer__logo{width:309px;height:78px;margin-top:14px;object-fit:contain}
.site-footer__heading{margin-top:9px;font-size:20px;font-weight:400;line-height:20px;color:var(--azul-oscuro)}

.subscribe{position:relative;margin-top:22px;width:542px;height:70px}
.subscribe__input{
  width:542px;height:70px;border:0;border-radius:9px;
  background:rgba(140,170,201,0.09);
  padding:0 31px;
  font-family:inherit;font-size:16px;font-weight:300;color:var(--azul-oscuro);
}
.subscribe__input::placeholder{color:var(--azul-oscuro);opacity:1}
.subscribe__btn{position:absolute;right:14px;top:7px;width:122px;height:56px}

.social{display:flex;gap:20.5px;margin-top:26px}
.social a{display:block}
.social .ds-icon{font-size:47.528px;}

.fcol__title{font-size:20px;font-weight:400;line-height:20px;text-transform:uppercase;color:var(--azul-oscuro);margin-top:101px}
.fcol ul{margin-top:15px}
.fcol li{margin-bottom:13px}
.fcol a{font-size:16px;font-weight:300;line-height:20px;color:var(--azul-oscuro)}

/* 412:12608 sits at y 4408 — 346px below the footer band's 4062 top. Flowing it after the
   grid rows put it ~18px low (the columns' intrinsic height, not the design's), so pin it. */
.site-footer__copy{
  position:absolute;left:0;right:0;top:346px;margin:0;text-align:center;
  font-size:16px;font-weight:300;line-height:20px;color:var(--azul-oscuro);
}

/* ==========================================================================
   RESPONSIVE — reflow just BEFORE each block would overflow.
   The desktop composition needs 1650px of viewport (1600 track + the 25px gutter
   floor each side); below that every fixed-px child still assumes the full 1600.
   ========================================================================== */
@media (max-width:1700px){
  .rail__next{right:0;transform:translateY(-50%)}

  /* card decks become swipeable rails instead of overflowing their track */
  .scards{
    display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:4px;scrollbar-width:thin;
  }
  .scard{flex:0 0 auto;scroll-snap-align:start}

  /* the product grid keeps its 4-up composition and shares the width */
  .catalog__grid{grid-template-columns:repeat(4,1fr);column-gap:24px}
  .pcard{width:100%;height:auto;aspect-ratio:382 / 341}
  [data-filters="open"] .catalog__grid{grid-template-columns:repeat(3,1fr)}
  [data-filters="open"] .catalog{grid-template-columns:minmax(240px,381px) 1fr}
  [data-filters="open"] .panel{width:100%}
  [data-filters="open"] .pagination{margin-left:0}

  /* header — the bar is 1581px of fixed px. Trade the pinned per-link widths for
     intrinsic width + proportional gaps so it compresses instead of pushing the CTA off. */
  .site-header__inner{min-width:0}
  .nav{margin-left:clamp(8px,3.5vw,185.4px);min-width:0}
  .nav__list{gap:clamp(6px,1.6vw,57px)}
  .nav__link,
  .nav__link--tiendas,.nav__link--ofertas,.nav__link--ideas,.nav__link--sobre{
    width:auto;margin-left:0;white-space:nowrap;
  }
  .lang{margin-left:clamp(12px,2.84vw,54.6px);flex:0 0 auto}
  .site-header__cta{margin-left:clamp(10px,1.44vw,27.6px);flex:0 0 auto}
}

@media (max-width:1500px){
  /* footer — 714+322+271 is 1307px of fixed track plus a min-content 4th column */
  .site-footer__inner{grid-template-columns:1fr 1fr;height:auto;padding-bottom:40px}
  .site-footer__copy{position:static;grid-column:1 / -1;margin-top:25px}
  .fcol__title{margin-top:48px}
  .subscribe{width:100%;max-width:542px}
  .subscribe__input{width:100%}
  .site-footer__logo{max-width:100%}
}

@media (max-width:1340px){
  /* header — logo + 5 links + lang + the 215px CTA need ~1300px of bar; hand over
     to the burger here. The mobile-menu markup is already in the DOM. */
  .nav,.lang,.site-header__cta{display:none}
  .burger{display:block;margin-left:auto;align-self:center}
  .mobile-menu{display:block;position:absolute;left:0;right:0;top:77px;background:#fff;padding:16px 25px 24px}
  .mobile-menu[hidden]{display:none}
}

@media (max-width:1180px){
  /* four 382px cards no longer read at this width — go 3-up, and the filters panel
     stacks above the grid rather than eating a third of it. */
  .catalog__grid{grid-template-columns:repeat(3,1fr)}
  [data-filters="open"] .catalog{grid-template-columns:1fr}
  [data-filters="open"] .catalog__grid{grid-template-columns:repeat(3,1fr)}
  [data-filters="open"] .panel{width:100%;max-width:381px;margin-bottom:24px}
  .search{width:min(517px,45vw)}
  .search__input{width:100%}
}

/* --------------------------------------------------------------------------
   MOBILE — the 430 frame (294:3145)
   -------------------------------------------------------------------------- */
@media (max-width:900px){

  /* header — 294:4597 logo 168×42 at (25,13); 294:4598 burger 23×14 at (380,31) */
  .site-header{height:63px}
  .site-header__bar{top:0;height:63px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header__inner{align-items:center;height:63px}
  .site-header__logo{margin-top:0}
  .site-header__logo img{width:168px;height:42px}
  .nav,.lang,.site-header__cta{display:none}
  .burger{display:block;margin-left:auto;width:23px;height:14px}
  .burger .ds-icon{font-size:14px;}
  .mobile-menu{display:block;position:absolute;left:0;right:0;top:63px;background:#fff;padding:16px 25px 24px}
  .mobile-menu[hidden]{display:none}
  .mobile-menu li{margin-bottom:14px}
  .mobile-menu a{font-size:18px}
  .mobile-menu .btn{width:100%;height:48px;margin-top:6px}

  /* hero — band 279px; wash 309/430 = 71.86% (the same proportion as desktop).
     The 430 frame crops the photo differently (294:4602 is its own 430×298 placement),
     so it ships its own export rather than a re-cropped desktop one. */
  /* Como el hero en vídeo del home: la foto deja de ir de fondo y pasa al
     flujo, ENTERA y a todo el ancho con la proporción del fichero, y el nombre
     cae debajo sobre una banda azul. Sin alto escrito: el recorte a 279px que
     pedía la maqueta tapaba media fotografía con el lavado y el titular. Sin
     foto la sección es sólo la banda. */
  .hero{height:auto;background:var(--azul)}
  .hero__bg{display:none}
  /* Sin recorte estrecho la foto ancha ocupa su lugar. Ver
     taxonomy-categoria_producto.php. */
  .hero--nocrop .hero__bg,
  .hero__bg--m{display:block;position:static;width:100%;height:auto}
  .hero__wash{display:none}
  .hero__inner{align-items:center;gap:10px;padding-block:24px 28px;text-align:center}
  .hero__title{max-width:100%;font-size:30px}
  .hero__lede{width:auto;max-width:100%;font-size:16px;line-height:20px}
  .dots--hero{margin-top:23px}

  /* filter bar — icon-only button, no product count (294:4608 / 294:5230 / 294:5232) */
  .section--catalog{margin-top:17px}
  .toolbar__filters{width:46px}
  .toolbar__icon{left:14px;top:13px}
  .toolbar__filters span{display:none}
  [data-filters="open"] .toolbar__icon--off{left:11.5px;top:11.7px}
  .toolbar__count{display:none}
  .search{margin-left:20px;width:auto;flex:1 1 auto}
  .search__input{width:100%;padding:0 60px 0 25px}

  /* catalog — 2-up, cards 180×269 (294:4615). The 430 frame mocks only 14 tiles while its own
     count label still reads 24; the page still shows all 24 here. How many items a page holds
     is a query setting, not a breakpoint — hiding real products with CSS would carry into the
     WordPress build as content the template renders and then hides. */
  .catalog{margin-top:18px}
  .catalog__grid,
  [data-filters="open"] .catalog__grid{grid-template-columns:repeat(2,1fr);column-gap:20px;row-gap:19px}
  [data-filters="open"] .catalog{grid-template-columns:1fr}
  [data-filters="open"] .panel{width:100%;max-width:none;height:auto;margin:0 0 19px}

  /* Los huecos van en los márgenes de cada pieza, NO en el padding de la
     tarjeta: `--c` se calcula con `cqw`, que mide la caja de contenido, así que
     un padding en esa misma unidad se realimenta y encoge la tarjeta entera. */
  .pcard{
    width:100%;height:auto;aspect-ratio:180 / 269;border-radius:20px;
    container-type:inline-size;--c:calc(100cqw / 180);
    padding:0;
    /* `--c` NO puede usarse en las propiedades de la propia tarjeta: un
       contenedor no se consulta a sí mismo, así que ahí `cqw` mediría el
       ancestro. En las filas y columnas van porcentajes; `--c` queda para las
       piezas de dentro, que sí miden contra la tarjeta. */
    grid-template-rows:auto minmax(0,1fr) auto auto auto;
  }
  .pcard__badge{height:calc(22*var(--c));margin:calc(11*var(--c)) 0 0 calc(11*var(--c))}
  .pcard__badge img{width:auto;height:100%}
  .pcard__badge em{padding-left:calc(16*var(--c));line-height:calc(22*var(--c));font-size:calc(12*var(--c))}
  .pcard__img{margin:calc(7*var(--c)) calc(17.5*var(--c)) 0}
  .pcard__img img{width:100%;height:100%;object-fit:contain}
  .pcard__swatches{margin:calc(12*var(--c)) 0 0 calc(17.5*var(--c));gap:calc(3.6*var(--c))}
  .pcard__swatches img{width:calc(21*var(--c));height:calc(13.2*var(--c))}
  .pcard__name{
    margin:calc(8.8*var(--c)) calc(12*var(--c)) 0 calc(17.5*var(--c));padding-right:0;
    min-height:2.7em;
    font-size:calc(14*var(--c));line-height:1.35;
  }
  /* Sin precio el nombre es la última línea y la flecha, que aquí sale en
     reposo pegada a la esquina, le cae encima: 29.3 de caja contra los 12 de
     margen del nombre. Le deja 18. Igual que en home.css. */
  .pcard:not(:has(.pcard__price)) .pcard__name{padding-right:calc(18*var(--c))}
  .pcard__price{
    margin:calc(10.2*var(--c)) 0 calc(24*var(--c)) calc(17.5*var(--c));
    font-size:calc(24*var(--c));
  }
  /* El precio anterior baja a su propia línea. En dos tarjetas por fila cabe
     junto al nuevo sólo con cifras cortas, y entonces terminaba por debajo de
     la flecha, que va absoluta en esa esquina. Igual que en ofertas.css. */
  .pcard__price del{display:block}
  .pcard__go{
    display:block;position:absolute;right:0;bottom:0;
    width:calc(29.3*var(--c));height:calc(29.4*var(--c));opacity:1;pointer-events:auto;
  }
  /* El dibujo mide lo que su caja: con 32 fijos dentro de una caja que escala
     con --c, la flecha asomaba por la esquina redondeada de la tarjeta. */
  .pcard__go .ds-icon{font-size:calc(29.3*var(--c));margin:0}

  /* pagination (294:4783 — same 223×43 group, still centred) */
  .pagination{margin-top:18px}
  [data-filters="open"] .pagination{margin-left:0}

  /* stores — 180×269 vertical cards, 2-up (294:4794) */
  .section--stores{margin-top:19px}
  .section__title{font-size:18px}
  .rail__next{display:none}
  .section--stores .rail{margin-top:14px}
  .section--stores .dots{margin-top:18px}
  /* El carril sigue siendo carril aquí: dos tarjetas por pantalla en tableta y
     una en móvil. Fue una rejilla estática —`--rail-static` sacaba el carril de
     slick— porque las tarjetas medían `width:100%`, y un porcentaje dentro del
     carril de 30000px que monta slick se resuelve como 30000px.

     El ancho sale ahora de `cqw` contra `.rail`, que es el contenedor que se
     declara justo debajo: la anchura del carril es la del contenido, ya sin los
     márgenes de página, y a diferencia de `vw` no cuenta la barra de scroll. La
     tarjeta declara su propio `container-type` para sus adentros, pero eso no
     estorba: un contenedor no se consulta a sí mismo, así que el `cqw` del
     `width` mira al carril y el de `--c` —que sólo usan las hijas— mira a la
     tarjeta. */
  .section--stores .rail{container-type:inline-size}
  .scards{gap:20px}
  /* Aquí la tarjeta es vertical: la foto pasa a ocupar una fila propia arriba y
     los datos caen debajo, cada uno con su icono en la columna de la izquierda. */
  .scard{
    /* Dos por pantalla: dos anchos más el hueco de en medio llenan el carril. */
    --card-w:calc((100cqw - var(--rail-gap)) / 2);
    width:var(--card-w);
    /* La proporción 180/269 del diseño va de SUELO, no de alto fijo. Como alto
       fijo recortaba el teléfono de las tiendas cuya dirección ocupa tres
       líneas —8 px ya a los 180 px del diseño, y proporcionalmente más cuanto
       mayor es la tarjeta, porque el texto escala con ella y el número de
       líneas no—. Con `min-height` la tarjeta crece lo que le haga falta y las
       que caben se quedan exactamente en la proporción dibujada. */
    height:auto;min-height:calc(var(--card-w) * 269 / 180);border-radius:20px;
    container-type:inline-size;--c:calc(100cqw / 180);
    /* 36 de las 180 del diseño = 20%; en porcentaje y no en `--c` porque un
       contenedor no puede consultarse a sí mismo (ver .pcard más arriba). */
    grid-template-columns:20% 1fr;
    grid-template-areas:
      "photo  photo"
      "name   name"
      "iloc   addr"
      "iclock hours"
      "iphone phone"
      ".      .";
    /* La última fila está vacía a propósito: es el hueco de la flecha, que va en
       absoluto contra la esquina. Como `1fr` a secas se quedaba en cero en
       cuanto el contenido llenaba la tarjeta, y la flecha aterrizaba encima del
       teléfono. El suelo es su propio tamaño, los 39 de las 180 del diseño.
       En `--card-w` y no en `--c`: `--c` sólo vale dentro de las hijas, porque
       aquí su `100cqw` mira al carril y no a la tarjeta. */
    grid-template-rows:auto auto auto auto auto minmax(calc(var(--card-w) * 39 / 180),1fr);
    padding:0;
  }
  .scard__photo{
    margin:calc(3*var(--c)) 0 0 calc(5*var(--c));
    width:calc(171*var(--c));height:calc(114*var(--c));
    border-radius:calc(14*var(--c));
  }
  .scard__name{margin:calc(5*var(--c)) 0 0 calc(15.36*var(--c));font-size:calc(14*var(--c))}
  .scard__icon--loc{width:calc(10.5*var(--c));margin:calc(11.8*var(--c)) 0 0 calc(15.36*var(--c))}
  .scard__icon--clock{width:calc(11.2*var(--c));margin:calc(6.5*var(--c)) 0 0 calc(15.56*var(--c))}
  .scard__icon--phone{width:calc(12.15*var(--c));margin:calc(1.7*var(--c)) 0 0 calc(15.36*var(--c))}
  .scard__icon--mail{display:none}
  .scard__addr,.scard__hours,.scard__phone{
    margin-right:calc(8*var(--c));font-size:calc(12*var(--c));line-height:1.2;
  }
  /* anchored to the frame's icon positions (pin 148, clock 167.9, phone 207.2) */
  .scard__addr{margin-top:calc(10.8*var(--c))}
  .scard__hours{margin-top:calc(4.6*var(--c))}
  .scard__phone{margin-top:calc(10.7*var(--c))}
  .scard__mail{display:none}
  .scard__go{
    display:block;position:absolute;right:0;bottom:0;
    width:calc(39*var(--c));height:calc(39*var(--c));opacity:1;pointer-events:auto;
  }
  .scard__go .ds-icon{font-size:32px;margin:0}
  /* the 430 frame's card carries ONE address line and a two-line opening-hours line. Drop the
     surplus lines from the DOM flow rather than clipping them — an ellipsis would be text the
     card is cutting off, which is the bug --check-spec looks for, not a layout decision. */
  .scard__addr-l2,.scard__hours-more{display:none}

  /* footer (294:4838) */
  .site-footer{margin-top:32px}
  .site-footer__inner{grid-template-columns:1fr 1fr;height:auto;padding-bottom:32px;column-gap:10px}
  .site-footer__brand{grid-column:1 / -1}
  .site-footer__logo{width:197px;height:49px;margin-top:19px}
  .site-footer__heading{margin-top:18px}
  .subscribe{width:100%;max-width:380px;height:70px}
  /* right padding clears the 122px Enviar button so the placeholder truncates instead of
     running underneath it */
  .subscribe__input{width:100%;height:70px;padding:0 145px 0 26px}
  .subscribe__btn{right:11px;top:7px;width:122px;height:48px}
  .social{margin-top:19px;gap:20.5px}
  .fcol__title{margin-top:40px}
  .fcol--catalogo,.fcol--secciones,.fcol--legales{grid-column:1 / -1}
  .fcol--catalogo ul,.fcol--secciones ul,.fcol--legales ul{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
  .site-footer__copy{margin-top:30px;text-align:left}
}

/* THE TABLET GAP — Figma ships 1920 and 430 and nothing between, and the band above the
   phone frame is every tablet. The cards are proportional (container queries), so they do not
   overflow here — they inflate: two 1fr columns at 883px make a 416px-wide card, i.e. the 430
   frame's own composition blown up 2.3×. Give the band a third column so the tile lands back
   near its authored size. Below 601 the 430 frame's own 2-up takes over untouched. */
@media (min-width:601px) and (max-width:900px){
  .catalog__grid,
  [data-filters="open"] .catalog__grid{grid-template-columns:repeat(3,1fr)}
}

/* Una sola tarjeta de tienda por pantalla en el móvil: llena el carril, y su
   propio hueco a la derecha empuja la siguiente fuera. Dos caben en tableta
   (regla de arriba, en el bloque de 900) pero no aquí, donde el diseño dibuja
   la tarjeta a 180 sobre una pantalla de 430. */
@media (max-width:600px){
  .scard{--card-w:100cqw}
}

@media (max-width:460px){
  /* Below the 430 frame there is no authored design, but there must still be no
     horizontal scroll. Everything above is already proportional (container queries
     + fr tracks), so only the filter panel's fixed field row needs to give. */
  .panel__fields{gap:16px}
  .field,.field input{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   HOVER STATES — from the Figma component variants (Property 1=Default → Variant2),
   same component set as the Home build: pcard 407:10852, scard 407:11021,
   buttons 225:2035 / 409:11212.

   Scoped by WIDTH only, never `(hover:hover)`: headless Chrome reports `hover:none`, so a
   pointer-gated block is invisible to every render — the hover states could never be driven
   or verified. The width bound is still needed because the 430 frame draws the corner arrow
   at REST, and an unscoped `opacity:0` here would win on cascade order and hide it on phones.
   ========================================================================== */
@media (min-width:901px){
.btn--primary,.toolbar__filters,.search__btn{transition:background-color .2s ease}
.btn--primary:hover,.toolbar__filters:hover,.search__btn:hover{background:#3b6f9c}

/* store card photo zooms on hover — 407:11020 → 407:11022: 308 → 359.51 = ×1.1673
   with its centre moving (-6.30,-0.28). 0.3s EASE_OUT per the REST interactions. */
.scard__photo img{transition:transform .3s ease-out}
.scard:hover .scard__photo img{transform:translate(-6.3px,-0.28px) scale(1.1673)}

/* corner arrow appears at 53.3px, bottom-right anchored per set */
.pcard__go,.scard__go{
  display:block;position:absolute;width:53.3px;height:53.3px;
  opacity:0;transition:opacity .3s ease-out;pointer-events:none;
}
.pcard__go .ds-icon,.scard__go .ds-icon{
  font-size:39px;margin:7.15px;display:block;transform-origin:0 0;
}
.pcard:hover .pcard__go .ds-icon,.scard:hover .scard__go .ds-icon{animation:go-grow .3s ease-out both}
@keyframes go-grow{
  from{transform:translate(34.687px,25.737px) scale(.6075)}
  to{transform:none}
}
.pcard__go{right:16.7px;bottom:16.7px}   /* 407:10847: inset 88.86% 3.16% 3.54% 90.05% of 382×341 */
.scard__go{right:11.7px;bottom:13.2px}   /* 407:11016: inset 84.66% 3.56% 5.32% 90.22% of 517×321 */
.pcard:hover .pcard__go,.scard:hover .scard__go{opacity:1}
.pcard:hover,.scard:hover{cursor:pointer}
}

/* The product and store arrows are real links now, so they take the pointer back
   from the shared rule above, which switches it off for every card's arrow. The
   blog card is NOT in this list: its arrow stays decoration over a whole-card
   link, and catching the pointer there would punch a dead spot in it. */
.pcard__go,.scard__go{pointer-events:auto}

/* ==========================================================================
   Mapa de tiendas — el iframe entre el teaser de tiendas y la FAQ.

   Las reglas van aquí y no en `chrome.css` porque esta sección sólo sale en la
   categoría: en el home el mapa ocupa el hueco de `.locations__map`, con sus
   propias medidas. El alto es proporción y no píxeles — un iframe sin `height`
   se dibuja a los 150px por defecto del navegador.
   ========================================================================== */
.mapa{margin-top:80px}
.mapa__frame{
  display:block;width:100%;aspect-ratio:1058/666;
  border:0;border-radius:20px;
}

@media (max-width:900px){
.mapa{margin-top:48px}
/* En un teléfono esa proporción deja el mapa en ~230px y no se distingue una
   calle de otra; el suelo lo sube a una altura utilizable. */
.mapa__frame{min-height:320px;border-radius:12px}
}