/* Super Stubborn — Shop the Drop
   GEGENEREERD uit de mockup (sectie `collections`) door port_to_wp.py.
   Gedeelde componenten en tokens staan in assets/css/superstubborn.css. */

.ssx-shop__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--ss-sp-6); flex-wrap:wrap; margin-bottom:var(--ss-sp-7); }
.ssx-shop__intro{ max-width:44ch; display:flex; flex-direction:column; gap:var(--ss-sp-4); }
.ssx-shop__lead{ color:var(--ss-text-muted); }
.ssx-shop__tools{ display:flex; align-items:center; gap:var(--ss-sp-5); }
.ssx-shop__viewall{ font-size:var(--ss-fs-label); text-transform:uppercase; letter-spacing:.2em; font-weight:600; color:var(--ss-beige); border-bottom:1px solid var(--ss-hairline-accent); padding-bottom:3px; transition:color var(--ss-dur-2) var(--ss-ease); }
.ssx-shop__viewall:hover{ color:var(--ss-orange); }
.ssx-shop__arrows{ display:flex; gap:var(--ss-sp-3); }
.ssx-shop__arrow{ width:3rem; height:3rem; border-radius:var(--ss-r-pill); border:1px solid var(--ss-hairline); background:transparent; color:var(--ss-beige); cursor:pointer; display:grid; place-items:center; transition:border-color var(--ss-dur-2) var(--ss-ease), background-color var(--ss-dur-2) var(--ss-ease), transform var(--ss-dur-1) var(--ss-ease); }
.ssx-shop__arrow:hover{ border-color:var(--ss-orange); background:rgba(212,106,42,.12); }
.ssx-shop__arrow:active{ transform:scale(.93); }
.ssx-shop__arrow svg{ width:1.15rem; height:1.15rem; }
.ssx-shop__track{ display:flex; gap:var(--ss-sp-5); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--ss-sp-5); scrollbar-width:none; cursor:grab; }
.ssx-shop__track::-webkit-scrollbar{ display:none; }
.ssx-shop__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.ssx-shop-card{ flex:0 0 clamp(15rem, 78vw, 19rem); scroll-snap-align:start; display:flex; flex-direction:column; gap:var(--ss-sp-4); }
.ssx-shop-card__media{ position:relative; border-radius:var(--ss-r-lg); overflow:hidden; box-shadow:var(--ss-shadow-md); background:var(--ss-panel); }
.ssx-shop-card__link{ display:block; }
.ssx-shop-card__media .ss-photo{ --ar:4 / 5; display:block; width:100%; transition:transform var(--ss-dur-3) var(--ss-ease); }
.ssx-shop-card:hover .ssx-shop-card__media .ss-photo{ transform:scale(1.05); }
.ssx-shop-card__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-shop-card__mock::after{ content:""; position:absolute; inset:14px; border:1px dashed var(--ss-hairline); border-radius:var(--ss-r-md); pointer-events:none; }
.ssx-shop-card__media{ position:relative; }
.ssx-shop-card__mockicon{ width:34%; height:auto; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linejoin:round; opacity:.75; }
.ssx-shop-card__mocklabel{ font-size:.64rem; text-transform:uppercase; letter-spacing:.28em; font-weight:600; }
.ssx-shop-card:hover .ssx-shop-card__mock{ color:var(--ss-text-muted); }
.ssx-shop-card__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-shop-card__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-shop-card__wish:hover{ background:rgba(17,16,15,.75); }
.ssx-shop-card__wish svg{ width:1.2rem; height:1.2rem; fill:none; stroke:currentColor; stroke-width:1.6; }
.ssx-shop-card__wish.is-wished{ color:var(--ss-orange); transform:scale(1.08); }
.ssx-shop-card__wish.is-wished svg{ fill:var(--ss-orange); stroke:var(--ss-orange); }
.ssx-shop-card__info{ display:flex; flex-direction:column; gap:var(--ss-sp-2); padding-inline:2px; }
.ssx-shop-card__name{ font-family:var(--ss-display); text-transform:uppercase; letter-spacing:-.01em; font-size:1.08rem; font-weight:700; color:var(--ss-beige); line-height:1.1; transition:color var(--ss-dur-2) var(--ss-ease); }
.ssx-shop-card__name:hover{ color:var(--ss-white); }
.ssx-shop-card__cat{ font-size:var(--ss-fs-small); color:var(--ss-text-muted); margin:0; }
.ssx-shop-card__buy{ display:flex; align-items:center; justify-content:space-between; gap:var(--ss-sp-3); margin-top:var(--ss-sp-2); }
.ssx-shop-card__price{ font-size:1.05rem; font-weight:600; color:var(--ss-beige); font-variant-numeric:tabular-nums; }
.ssx-shop-add{ position:relative; border:1px solid var(--ss-hairline); background:transparent; color:var(--ss-beige); border-radius:var(--ss-r-pill); padding:.55rem 1.1rem; cursor:pointer; overflow:hidden; 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-shop-add:hover{ border-color:var(--ss-orange); background:var(--ss-orange); color:var(--ss-ground); }
.ssx-shop-add__done{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; color:var(--ss-ground); background:var(--ss-orange); transition:opacity var(--ss-dur-1) var(--ss-ease); }
.ssx-shop-add.is-added{ border-color:var(--ss-orange); }
.ssx-shop-add.is-added .ssx-shop-add__label{ opacity:0; }
.ssx-shop-add.is-added .ssx-shop-add__done{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .ssx-shop-card:hover .ssx-shop-card__media .ss-photo{ transform:none; } .ssx-shop__track{ scroll-behavior:auto; } }
@media (max-width:600px){ .ssx-shop__arrows{ display:none; } }