/* Super Stubborn — Shop-grid
   HANDGESCHREVEN (dit blok komt niet uit de mockup). Bouwt op de tokens en
   componenten uit assets/css/superstubborn.css. De productmockup en de
   hover-wissel zijn bewust identiek aan die van de homepage-blokken, maar met
   eigen classnamen: de CSS van een ander blok laadt niet op deze pagina. */

/* Volgt het grid direct op een paginakop, dan zou je twee keer sectiepadding
   plus de marge onder de streep krijgen — een gat van ruim 100px. De kop sluit
   met een streep af, dus die scheiding is er al. */
.ssx-pagehead + .ssx-catalog{ padding-top:0; }

/* ---- Balk met filters, aantal en sorteren ---- */
.ssx-catalog__bar{
  display:grid;
  gap:var(--ss-sp-5);
  margin-bottom:var(--ss-sp-7);
}

.ssx-catalog__filters{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ss-sp-3);
}

.ssx-catalog__pill{
  border:1px solid var(--ss-hairline);
  background:transparent;
  color:var(--ss-text-muted);
  border-radius:var(--ss-r-pill);
  padding:.55rem 1.1rem;
  cursor:pointer;
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:600;
  transition:border-color var(--ss-dur-2) var(--ss-ease),
             background-color var(--ss-dur-2) var(--ss-ease),
             color var(--ss-dur-2) var(--ss-ease);
}
.ssx-catalog__pill:hover{ border-color:var(--ss-hairline-accent); color:var(--ss-beige); }
.ssx-catalog__pill.is-active{
  border-color:var(--ss-orange);
  background:var(--ss-orange);
  color:var(--ss-ground);
}

.ssx-catalog__tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ss-sp-5);
  flex-wrap:wrap;
}

/* .ss-eyebrow is inline-flex, en in een flex-container verdwijnt de witruimte
   tussen "12" en "pieces". Een gap zet die terug. */
.ssx-catalog__count{ margin:0; color:var(--ss-text-faint); gap:.45em; }

/* Chip die het filter uit de URL laat zien (bijv. "Women · Outerwear"), met een
   kruisje om het te wissen. Alleen zichtbaar als er een URL-filter actief is. */
.ssx-catalog__active{
  display:inline-flex;
  align-items:center;
  gap:var(--ss-sp-3);
  margin:0;
  padding:.4rem .4rem .4rem .8rem;
  border:1px solid var(--ss-hairline-accent);
  border-radius:var(--ss-r-pill);
  background:rgba(212,106,42,.12);
}
.ssx-catalog__active-label{ color:var(--ss-beige); border:0; padding:0; background:none; }
.ssx-catalog__clear{
  display:grid;
  place-items:center;
  width:1.5rem;
  height:1.5rem;
  border:0;
  border-radius:var(--ss-r-pill);
  background:transparent;
  color:var(--ss-text-muted);
  cursor:pointer;
  transition:background-color var(--ss-dur-2) var(--ss-ease), color var(--ss-dur-2) var(--ss-ease);
}
.ssx-catalog__clear:hover{ background:var(--ss-orange); color:var(--ss-ground); }

.ssx-catalog__sort{
  display:flex;
  align-items:center;
  gap:var(--ss-sp-3);
  color:var(--ss-text-faint);
}

.ssx-catalog__select{
  border:0;
  border-bottom:1px solid var(--ss-hairline);
  background:transparent;
  color:var(--ss-beige);
  padding:.3rem 1.6rem .35rem .2rem;
  /* Zelfde micro-caps als de labels eromheen, anders valt het sorteermenu uit
     de toon van de rest van de balk. */
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:600;
  cursor:pointer;
  /* Eigen pijltje: de systeem-select is op een donkere achtergrond niet te
     stylen zonder appearance:none. */
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  transition:border-color var(--ss-dur-2) var(--ss-ease);
}
.ssx-catalog__select:hover{ border-color:var(--ss-hairline-accent); }
/* De opties zelf worden door het systeem getekend, dus daar hoort een leesbare
   combinatie in te staan in plaats van beige-op-beige. */
.ssx-catalog__select option{ background:var(--ss-brown-1); color:var(--ss-beige); }

@media (min-width:900px){
  .ssx-catalog__bar{
    grid-template-columns:1fr auto;
    align-items:center;
    gap:var(--ss-sp-6);
  }
  .ssx-catalog__tools{ justify-content:flex-end; }
}

/* ---- Grid ---- */
.ssx-catalog__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--ss-sp-6) var(--ss-sp-5);
  /* Kaarten in een rij even hoog; anders heeft het uitlijnen van de knop
     onderaan geen effect. */
  align-items:stretch;
}

@media (min-width:700px){
  .ssx-catalog__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (min-width:1080px){
  .ssx-catalog__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* Geen eigen gap tussen beeld en tekst: .ss-card__body brengt zijn eigen
   padding mee (1.5rem), en een gap daar bovenop geeft een strook panelkleur
   tussen de foto en de titel. */
.ssx-catalog__card{
  display:flex;
  flex-direction:column;
}
/* De JS verbergt dingen met het `hidden`-attribuut. Zodra een element een eigen
   `display` heeft (flex, inline-flex, grid) wint die van de browserstandaard voor
   [hidden] en blijft het staan. Dat geldt hier voor de kaarten, de chip met het
   actieve filter en de "meer laden"-knop, dus die krijgen het expliciet. */
.ssx-catalog__card[hidden],
.ssx-catalog__active[hidden],
.ssx-catalog__more[hidden]{ display:none; }

/* ---- Beeld ----
   Bewust ZONDER eigen radius, schaduw of achtergrond: .ss-card uit de bundle
   heeft die al en knipt met overflow:hidden af. Zet je ze hier ook, dan krijg je
   een schaduw binnen een schaduw en ronde hoeken binnen ronde hoeken. */
.ssx-catalog__media{
  position:relative;
}

.ssx-catalog__link{ display:block; position:relative; }

.ssx-catalog__media .ss-photo{
  transition:transform var(--ss-dur-3) var(--ss-ease);
}
.ssx-catalog__card:hover .ssx-catalog__media .ss-photo{ transform:scale(1.03); }

/* Tweede foto: ligt eroverheen en komt bij hover in beeld. */
.ssx-catalog__media-alt{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity var(--ss-dur-2) var(--ss-ease);
}
.ssx-catalog__card:hover .ssx-catalog__media-alt,
.ssx-catalog__card:focus-within .ssx-catalog__media-alt{ opacity:1; }

/* Grijze productmockup zolang er geen foto is — zelfde beeld als op de homepage. */
.ssx-catalog__mock{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--ss-sp-4);
  aspect-ratio:4 / 5;
  width:100%;
  background:var(--ss-brown-1);
  color:var(--ss-text-faint);
  transition:color var(--ss-dur-2) var(--ss-ease);
}
.ssx-catalog__card:hover .ssx-catalog__mock{ color:var(--ss-text-muted); }
.ssx-catalog__mockicon{
  width:34%;
  height:auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  stroke-linejoin:round;
  opacity:.75;
}
.ssx-catalog__mocklabel{
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-weight:600;
}

.ssx-catalog__tag{
  position:absolute;
  top:var(--ss-sp-4);
  left:var(--ss-sp-4);
  z-index:3;
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ss-ground);
  background:var(--ss-beige);
  padding:.3rem .55rem;
  border-radius:var(--ss-r-sm);
}

.ssx-catalog__wish{
  position:absolute;
  top:var(--ss-sp-4);
  right:var(--ss-sp-4);
  z-index:3;
  width:2.5rem;
  height:2.5rem;
  border-radius:var(--ss-r-pill);
  border:0;
  cursor:pointer;
  background:rgba(17,16,15,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--ss-beige);
  display:grid;
  place-items:center;
  transition:background-color var(--ss-dur-2) var(--ss-ease),
             color var(--ss-dur-2) var(--ss-ease),
             transform var(--ss-dur-1) var(--ss-ease);
}
.ssx-catalog__wish:hover{ background:rgba(17,16,15,.75); }
.ssx-catalog__wish svg{ width:1.2rem; height:1.2rem; fill:none; stroke:currentColor; stroke-width:1.6; }
.ssx-catalog__wish.is-wished{ color:var(--ss-orange); transform:scale(1.08); }
.ssx-catalog__wish.is-wished svg{ fill:var(--ss-orange); stroke:var(--ss-orange); }

/* ---- Kaarttekst ----
   De padding komt van .ss-card__body uit de bundle; die hier NIET overschrijven,
   anders staat de tekst tegen de rand van de kaart. */
.ssx-catalog__body{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-2);
  /* Vult de resthoogte, zodat de knop hieronder naar de onderkant kan zakken. */
  flex:1;
}
.ssx-catalog__meta{ margin:0; }

/* De titel mag krimpen, de prijs niet: anders duwt een lange productnaam de
   prijs uit de kaart en zie je "€1…" in plaats van "€180". */
.ssx-catalog__card .ss-card__title{
  min-width:0;
  /* De basis-reset zet overflow-wrap:break-word voor alle tekst; de mockup
     schakelt dat alleen voor de grote koppen uit, niet voor kaarttitels. In een
     smalle kolom brak "SUPER STUBBORN HOODIE" daardoor af als "STUBBOR N". */
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.ssx-catalog__card .ss-card__price{ flex:none; white-space:nowrap; }

/* De ene productnaam loopt over één regel, de andere over drie. Zonder deze
   regel staat elke Quick Add op een andere hoogte en oogt de rij rommelig; met
   margin-top:auto lijnen ze allemaal onderaan uit. */
.ssx-catalog__add{
  margin-top:auto;
  align-self:flex-start;
}

/* ---- Leegstand en 'meer laden' ---- */
.ssx-catalog__empty{
  /* .ss-lead beperkt de regelbreedte tot 46ch; zonder auto-marges staat dat
     blokje links en helpt text-align:center niets. */
  margin:var(--ss-sp-8) auto 0;
  text-align:center;
  color:var(--ss-text-muted);
}

.ssx-catalog__foot{
  display:flex;
  justify-content:center;
  margin-top:var(--ss-sp-8);
}

/* Twee kolommen op een telefoon geeft kaarten van zo'n 165px breed. Met de
   standaard kaartpadding (1.5rem) blijft daar te weinig over: de prijs valt weg
   en "Quick Add" breekt middenin af. Op smalle schermen dus krapper padden en de
   kaarttypografie een maat kleiner. */
@media (max-width:699px){
  .ssx-catalog__card .ss-card__body{ padding:var(--ss-sp-4); }
  .ssx-catalog__card .ss-card__title{ font-size:.95rem; }
  .ssx-catalog__card .ss-card__price{ font-size:.9rem; }
  .ssx-catalog__grid{ gap:var(--ss-sp-5) var(--ss-sp-4); }
}

.ssx-catalog__add{ white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  .ssx-catalog__card:hover .ssx-catalog__media .ss-photo{ transform:none; }
}