/* ============================================================
   IMPÓSABLE — shop.css
   Catalogus: zoeken, categorieën, filters en productkaarten.

   De productkaart is het meest hergebruikte onderdeel van de site
   (shop, homepage, favorieten, zoekresultaten). Beeld staat altijd
   op een lichte plaat; de rest van de kaart blijft donker.
============================================================ */

.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;
}

/* ============================================================
   PRODUCTRASTER
============================================================ */
.catalog { padding-block: clamp(36px, 5vw, 72px); }
.catalog__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
}
@media (max-width: 1023px) { .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .catalog__grid { grid-template-columns: 1fr; } }

/* Vier kolommen zodra er breedte voor is; daaronder telkens één minder.
   Op een telefoon twee kleine kaarten naast elkaar leest slechter dan één
   grote, dus onder 520px één kolom. */
.catalog__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) { .catalog__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .catalog__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .catalog__grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* Rail op de homepage: vier producten naast elkaar, zodat er geen losse
   kaart op een tweede rij achterblijft. */
.catalog__grid--rail { grid-template-columns: repeat(4, 1fr); }
/* Een raster dat precies zo veel kolommen heeft als er kaarten zijn: bij
   drie gerelateerde producten hoort geen leeg vierde vak. */
.catalog__grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog__grid--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .catalog__grid--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .catalog__grid--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .catalog__grid--n2, .catalog__grid--n3, .catalog__grid--n4 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1180px) { .catalog__grid--rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .catalog__grid--rail { grid-template-columns: 1fr; } }

/* ============================================================
   BREDE PAGINA
   Shop en productpagina staan op een bredere maat dan de rest:
   vier grote productkaarten naast elkaar hebben ruimte nodig, en
   op een breed scherm hoort de inhoud niet als een kolom in het
   midden te staan. De homepage houdt zijn eigen maat.
============================================================ */
.wrap--wide { max-width: 1520px; }

/* ============================================================
   SHOPHERO — compact, donker, één echt product groot in beeld
   Zelfde lichtopbouw als de hero van de homepage (key light achter
   het product, sluier links voor de leesbaarheid), maar op een
   derde van de hoogte: dit is een shop, geen voorpagina.
============================================================ */
.shophero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(380px, 34vw, 500px);
  padding-top: calc(var(--navh) + clamp(20px, 3vw, 40px));
  padding-bottom: clamp(24px, 3vw, 44px);
  background:
    radial-gradient(120% 90% at 78% 44%, #17191C 0%, rgba(23, 25, 28, 0) 62%),
    linear-gradient(180deg, #0E1011 0%, #0A0B0C 62%, #070809 100%);
}
.shophero__inner { position: relative; z-index: 1; }
.shophero__crumbs { margin-bottom: clamp(14px, 2vw, 22px); }
.shophero__t {
  margin-top: 14px;
  font-size: clamp(32px, 3.8vw, 56px);
  /* Geen max-width: de regelval staat in de tekst zelf (één harde
     regelovergang), dus een breedtebeperking zou er een derde regel van
     maken op precies de maat waar het niet hoort. */
  max-width: none;
}
.shophero__l { margin-top: clamp(14px, 1.6vw, 20px); max-width: 46ch; }
.shophero__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(22px, 2.6vw, 32px); }
.shophero__claim {
  margin-top: clamp(22px, 3vw, 38px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold);
}
.shophero__claim span { color: var(--fg-faint); margin-inline: 4px; }

/* Fotohero: dezelfde foto's die de beheerder voor de homepage beheert. */
.shophero--photo .shophero__photo {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.shophero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,9,10,.94) 0%, rgba(8,9,10,.78) 34%, rgba(8,9,10,.28) 62%, rgba(8,9,10,.1) 100%),
    linear-gradient(0deg, rgba(8,9,10,.7) 0%, rgba(8,9,10,0) 46%);
}

.shophero--object .shophero__object {
  position: absolute; right: 2%; top: 58%; z-index: -1;
  width: min(32%, 470px); max-height: 66%; height: auto; transform: translateY(-50%);
  object-fit: contain; object-position: center right;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.9)) brightness(1.1) contrast(1.05);
}
.shophero__key {
  position: absolute; right: 0; top: 58%; z-index: -2;
  width: min(42%, 640px); aspect-ratio: 1.5; transform: translateY(-50%);
  background:
    radial-gradient(ellipse at 52% 46%, rgba(200, 169, 106, 0.18), rgba(200, 169, 106, 0) 56%),
    radial-gradient(ellipse at 58% 54%, rgba(146, 166, 186, 0.14), rgba(146, 166, 186, 0) 50%);
  pointer-events: none;
}
.shophero--object::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(9,10,11,.97) 0%, rgba(9,10,11,.9) 34%, rgba(9,10,11,.46) 56%, rgba(9,10,11,0) 72%);
}

/* ============================================================
   BEDIENINGSBALK — categorieën, zoeken, sorteren, filters
   Eén horizontale regel in plaats van een kolom naast de
   producten: het raster begint daardoor meteen en krijgt de
   volle breedte.
============================================================ */
.catalog { padding-block: clamp(28px, 3.4vw, 52px) clamp(48px, 6vw, 88px); }

.shopbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 2.4vw, 36px); flex-wrap: wrap;
  padding-bottom: clamp(20px, 2.4vw, 30px); margin-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line-soft);
}
.shopbar__cats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.shopbar__cat {
  font-family: var(--sans); font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--fg-muted); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.shopbar__cat:hover { color: var(--fg); border-color: var(--line-strong); }
/* De gekozen categorie is de enige gouden vorm in de balk: één accent, niet
   een rij gouden knoppen. */
.shopbar__cat.is-active {
  background: var(--gold); border-color: var(--gold); color: #0C0D0E; font-weight: 600;
}
.shopbar__cat.is-active:hover { background: var(--gold-hi); border-color: var(--gold-hi); }

.shopbar__tools { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); flex-wrap: wrap; }
.shopbar__search { position: relative; display: flex; align-items: center; }
.shopbar__search input[type="search"] {
  width: clamp(150px, 16vw, 230px);
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--fg);
  padding: 8px 26px 8px 0; font: inherit; font-size: 14px;
  transition: border-color 0.2s var(--ease), width 0.3s var(--ease);
}
.shopbar__search input[type="search"]::placeholder { color: var(--fg-faint); }
.shopbar__search input[type="search"]:focus { border-color: var(--gold); outline: none; }
.shopbar__go {
  position: absolute; right: 0; width: 22px; height: 22px; padding: 0;
  border: 0; background: none; color: var(--fg-faint); cursor: pointer;
  display: grid; place-items: center; transition: color 0.2s var(--ease);
}
.shopbar__go:hover { color: var(--gold); }

.shopbar__sort { display: flex; align-items: center; gap: 8px; }
.shopbar__sort select {
  border: 0; border-radius: 0; padding: 6px 22px 6px 0;
  font: inherit; font-size: 14px; background: none; color: var(--fg-muted); appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AA' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.shopbar__sort select:hover { color: var(--fg); }

.shopbar__filters {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.shopbar__filters:hover { color: var(--fg); border-color: var(--line-strong); }
.shopf__toggle-input:focus-visible + .shophero + .catalog .shopbar__filters,
.shopf__toggle-input:focus-visible ~ .catalog .shopbar__filters { outline: 2px solid var(--gold); outline-offset: 3px; }

.shopcount {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: clamp(18px, 2.2vw, 26px);
}

/* ============================================================
   FILTERLADE — schuift over de pagina
============================================================ */
.shopdrawer { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.shopdrawer__veil {
  position: absolute; inset: 0; background: rgba(5, 6, 7, 0.66);
  opacity: 0; transition: opacity 0.3s var(--ease); cursor: pointer;
}
.shopdrawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw); overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: clamp(20px, 2.6vw, 30px);
  transform: translateX(101%); transition: transform 0.36s var(--ease);
  box-shadow: -30px 0 70px rgba(0, 0, 0, 0.5);
}
.shopf__toggle-input:checked ~ .shopdrawer { pointer-events: auto; }
.shopf__toggle-input:checked ~ .shopdrawer .shopdrawer__veil { opacity: 1; }
.shopf__toggle-input:checked ~ .shopdrawer .shopdrawer__panel { transform: none; }
.shopdrawer__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.shopdrawer__title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint);
}
.shopdrawer__close { font-size: 26px; line-height: 1; color: var(--fg-faint); cursor: pointer; }
.shopdrawer__close:hover { color: var(--fg); }
.shopdrawer__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
@media (prefers-reduced-motion: reduce) {
  .shopdrawer__panel, .shopdrawer__veil { transition: none; }
}

.shopf__group { border: 0; padding: 16px 0 4px; margin: 0; border-top: 1px solid var(--line-soft); }
.shopf__group:first-of-type { border-top: 0; }
.shopf__group legend {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint); padding: 4px 0 8px;
}
.shopf__radio { display: flex; align-items: center; gap: 10px; font-size: 14.5px; padding: 6px 0; cursor: pointer; color: var(--fg-muted); }
.shopf__radio:hover { color: var(--fg); }
.shopf__radio input { accent-color: var(--gold); width: 15px; height: 15px; }
.shopf__pricerow { display: flex; align-items: center; gap: 10px; }
.shopf__pricerow label { flex: 1; min-width: 0; }
.shopf__pricerow input {
  width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 8px 0; font: inherit; font-size: 14px; background: none; color: var(--fg);
}
.shopf__pricerow input:focus { border-color: var(--gold); outline: none; }

/* ============================================================
   PRODUCTKAART — donker paneel, product groot, studiolicht
   Het product staat op een donker vlak met een warme key light
   erachter: dezelfde presentatie als in de hero, zodat een kaart
   leest als hardware op een merkpagina en niet als een artikel in
   een marktplaats.
============================================================ */
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #16181C 0%, #0F1114 100%);
  border: 1px solid rgba(243, 244, 245, 0.07);
  border-radius: 16px; overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pcard:hover {
  border-color: rgba(200, 169, 106, 0.32); transform: translateY(-3px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* Beeldvlak: ongeveer 60% van de kaart. Vast 4:3, zodat een liggend,
   staand of extreem breed bestand binnen hetzelfde vlak wordt geschaald
   en nooit wordt afgesneden. */
.pcard__media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 5 / 4; overflow: hidden;
  background: radial-gradient(88% 78% at 50% 44%, #1F2228 0%, rgba(31, 34, 40, 0) 72%);
}
.pcard__key {
  position: absolute; inset: 6% 6% 14%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 54%, rgba(200, 169, 106, 0.15), rgba(200, 169, 106, 0) 60%);
}
.pcard__media img {
  position: relative; width: 94%; height: 88%;
  object-fit: contain; object-position: center center;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.62)) brightness(1.06) contrast(1.03);
  transition: transform 0.6s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.045); }

.pcard__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(8, 9, 10, 0.8); border: 1px solid rgba(243, 244, 245, 0.14); border-radius: 999px;
  padding: 5px 10px; color: var(--fg); white-space: nowrap;
}
.pcard__badge--aanbieding, .pcard__badge--bijna_op { color: var(--gold-hi); border-color: rgba(200, 169, 106, 0.42); }
.pcard__badges { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.pcard__index { position: absolute; top: 14px; left: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--fg-faint); }

.pcard__favform { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; }
.pcard__fav {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(8, 9, 10, 0.62); color: var(--fg-faint);
  font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.pcard:hover .pcard__fav, .pcard__fav:focus-visible, .pcard__fav.is-fav { opacity: 1; }
.pcard__fav:hover, .pcard__fav.is-fav { color: var(--gold); }
@media (hover: none) { .pcard__fav { opacity: 1; } }

.pcard__body {
  display: flex; flex-direction: column; flex: 1; gap: 6px;
  padding: clamp(18px, 1.9vw, 26px);
  border-top: 1px solid rgba(243, 244, 245, 0.06);
}
.pcard__type {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-faint);
}
.pcard__name {
  font-family: var(--sans); font-weight: 600; font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.14; letter-spacing: -0.03em; margin-top: 2px;
  transition: color 0.25s var(--ease);
}
.pcard:hover .pcard__name a { color: var(--gold-hi); }
.pcard__desc {
  font-size: 14px; color: var(--fg-muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* Ruimte voor twee regels, ook bij één: dan staan prijs en knop van alle
     kaarten in een rij op dezelfde hoogte. */
  min-height: 3.1em;
}
/* Kleurkeuzes van een familie: de echte kleuren uit de productdata. */
.pcard__swatches { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pcard__sw {
  width: 13px; height: 13px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.pcard__swn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fg-faint); margin-left: 3px; }

.pcard__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: clamp(14px, 1.6vw, 20px);
}
.pcard__foot .price .amt { font-size: 19px; font-weight: 500; }
.pcard__go {
  font-size: 18px; line-height: 1; color: var(--fg-faint);
  transition: color 0.22s var(--ease), transform 0.22s var(--ease);
}
.pcard:hover .pcard__go { color: var(--gold); transform: translateX(4px); }
.pcard__stock {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint);
}
.pcard__stock--out_of_stock { color: var(--fg-muted); }
.pcard__stock--low_stock, .pcard__stock--backorder { color: var(--gold); }

/* Oude klassen: modules die de kaart nog met knoppen of een prijsregel
   renderen blijven werken. */
.pcard__brandline {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-faint); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.pcard__priceline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.pcard__priceline .price .amt { font-size: 18px; }
.pcard__color { font-weight: 600; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.22; letter-spacing: -0.024em; }
.pcard__tagline { font-size: 14px; color: var(--fg-muted); line-height: 1.55; }
.pcard__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.pcard__buy { margin-top: 16px; }
.pcard__buy .btn { width: 100%; justify-content: center; padding-block: 12px; }
.pcard__buy { display: block; }
/* Onder de knop één stille regel naar het product zelf: de kaart verkoopt,
   de link vertelt. */
.pcard__view {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--fg-muted); transition: color 0.2s var(--ease);
}
.pcard__view:hover { color: var(--gold-hi); }
.pcard__view .arrow { transition: transform 0.25s var(--ease); }
.pcard__view:hover .arrow { transform: translateX(3px); }
.pcard__actions { display: flex; gap: 8px; margin-top: 14px; align-items: stretch; }
.pcard__actions > .btn, .pcard__cartform { flex: 1; min-width: 0; }
.pcard__cartform { display: flex; }
.shopf__favform { display: flex; flex: 0 0 auto; }
.shopf__fav {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--fg-faint);
  width: 46px; min-height: 44px; padding: 0; display: grid; place-items: center;
}
.shopf__fav:hover, .shopf__fav.is-fav { color: var(--gold); border-color: var(--gold); }

/* Voetnoot onder het raster */
.catalog__foot {
  margin-top: clamp(28px, 4vw, 44px); font-family: var(--mono); font-size: 11.5px;
  color: var(--fg-faint); border-top: 1px solid var(--line-soft); padding-top: 20px;
  max-width: 62ch; line-height: 1.8;
}

.shopf__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.shopf__chip {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  color: var(--fg); background: var(--surface-2);
}
.shopf__chip:hover { border-color: var(--gold); }
.shopf__chip--clear { background: transparent; color: var(--fg-faint); }

.shopf__empty { padding: clamp(24px, 5vw, 56px) 0; margin-bottom: 8px; max-width: 62ch; }
.shopf__empty h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.025em; margin-bottom: 8px; }
.shopf__empty p { color: var(--fg-muted); font-size: 14.5px; }
.shopf__emptyactions, .shopf__emptycats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.shopf__emptytitle { margin-top: 24px; font-size: 16px; }
.shophelp {
  margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--line-soft); max-width: 62ch;
}
.shophelp__t { font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; letter-spacing: -0.024em; }
.shophelp__b { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--fg-muted); }

.shopf__pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.shopf__sectiontitle { font-size: clamp(19px, 2.2vw, 25px); margin-bottom: 14px; }

/* ── Historische catalogusintro (nog gebruikt door modules) ── */
.cat-intro { border-bottom: 1px solid var(--line-soft); }
.cat-intro__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(24px, 4vw, 60px); align-items: end; padding-bottom: clamp(28px, 4vw, 48px); }
.cat-intro__side { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--fg-faint); line-height: 2; text-transform: uppercase; text-align: right; }
@media (max-width: 860px) { .cat-intro__grid { grid-template-columns: 1fr; align-items: start; } .cat-intro__side { text-align: left; } }

/* ============================================================
   AFSLUITING VAN DE SHOP
   Een breed donker paneel met een bestaand product erin. De pagina
   eindigt op het merk in plaats van op de laatste kaart.
============================================================ */
.shopoutro {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(40px, 5vw, 72px);
  border: 1px solid rgba(243, 244, 245, 0.08); border-radius: 18px;
  padding: clamp(32px, 4.4vw, 64px);
  background:
    radial-gradient(90% 120% at 82% 50%, #1C1F24 0%, rgba(28, 31, 36, 0) 68%),
    linear-gradient(180deg, #131518 0%, #0D0F11 100%);
}
.shopoutro__copy { position: relative; z-index: 1; max-width: 44ch; }
.shopoutro__t {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(26px, 3.1vw, 44px); line-height: 1.08; letter-spacing: -0.032em;
}
.shopoutro__b { margin-top: 14px; font-size: clamp(14.5px, 1.3vw, 16.5px); line-height: 1.7; color: var(--fg-muted); }
.shopoutro__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(20px, 2.4vw, 30px); }
.shopoutro__object {
  position: absolute; right: 3%; top: 50%; z-index: -1;
  width: min(36%, 490px); height: auto; transform: translateY(-50%);
  object-fit: contain;
  filter: drop-shadow(0 36px 70px rgba(0, 0, 0, 0.85)) brightness(1.08) contrast(1.04);
}
.shopoutro__key {
  position: absolute; right: 1%; top: 50%; z-index: -2;
  width: min(46%, 640px); aspect-ratio: 1.5; transform: translateY(-50%);
  background: radial-gradient(ellipse at 52% 48%, rgba(200, 169, 106, 0.16), rgba(200, 169, 106, 0) 58%);
  pointer-events: none;
}
@media (max-width: 860px) {
  .shopoutro { padding-bottom: clamp(200px, 56vw, 320px); }
  .shopoutro__copy { max-width: 100%; }
  .shopoutro__object { right: -8%; top: auto; bottom: 2%; transform: none; width: 84%; }
  .shopoutro__key { right: -8%; top: auto; bottom: 0; transform: none; width: 96%; }
}

/* ── Mobiel ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .shophero { min-height: clamp(340px, 64vw, 460px); }
  .shophero__t { font-size: clamp(30px, 8.4vw, 44px); max-width: 100%; }
  .shophero--object .shophero__object { right: -14%; top: auto; bottom: -6%; transform: none; width: 78%; }
  .shophero__key { right: -12%; top: auto; bottom: -10%; transform: none; width: 92%; }
  .shophero--object::after {
    background: linear-gradient(180deg, rgba(9,10,11,.95) 26%, rgba(9,10,11,.55) 62%, rgba(9,10,11,.8) 100%);
  }
  /* Categorieën blijven zichtbaar en schuiven horizontaal — dat is
     navigatie, geen filter. */
  .shopbar { flex-direction: column; align-items: stretch; gap: 16px; flex-wrap: nowrap; max-width: 100%; }
  /* width en min-width expliciet: een flexitem krimpt niet onder zijn
     min-content-breedte, en een rij categorieën is breder dan een telefoon.
     Zonder deze twee regels duwt de rij de hele pagina breder — de
     klassieke oorzaak van horizontaal scrollen. */
  .shopbar__cats {
    width: 100%; min-width: 0; max-width: 100%;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  .shopbar__cats::-webkit-scrollbar { display: none; }
  .shopbar__tools { width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .shopbar__search { flex: 1 1 100%; min-width: 0; }
  .shopbar__search input[type="search"] { width: 100%; }
}