/* Super Stubborn — Best Sellers
   GEGENEREERD uit de mockup (sectie `bestsellers`) door port_to_wp.py.
   Gedeelde componenten en tokens staan in assets/css/superstubborn.css. */

/* ============================================================
   SUPER STUBBORN — BEST SELLERS (refined: real photos, no italic)
   Scoped under .ssx-bestsellers-* — no shared class restyled globally.
   Token-driven, responsive, overflow-safe, reduced-motion safe.
   ============================================================ */

.ssx-bestsellers .ssx-bestsellers-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--ss-sp-5) var(--ss-sp-7);
}
.ssx-bestsellers .ssx-bestsellers-head__lead{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-4);
  min-width:0;
}
.ssx-bestsellers .ssx-bestsellers-head__aside{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--ss-sp-4);
  max-width:38ch;
  padding-bottom:var(--ss-sp-2);
}
.ssx-bestsellers .ssx-bestsellers-note{
  font-size:var(--ss-fs-body);
}

.ssx-bestsellers .ssx-bestsellers-rule{
  margin-block:var(--ss-sp-6) var(--ss-sp-7);
}

/* Grid — 4 across on desktop, calm gutters. align-items:start keeps the
   mixed-orientation photos (portrait / square / landscape) reading as an
   honest editorial row instead of stretching panels to a ragged height. */
.ssx-bestsellers .ssx-bestsellers-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-items:start;
  gap:clamp(var(--ss-sp-4), 2.4vw, var(--ss-sp-6));
}

/* Quieter card than the featured grid: flatter shadow, subtler rise,
   transparent-leaning surface so it reads lighter. */
.ssx-bestsellers .ssx-bestsellers-card{
  background:color-mix(in srgb, var(--ss-panel) 42%, transparent);
  box-shadow:var(--ss-shadow-sm);
  min-width:0;
}
.ssx-bestsellers .ssx-bestsellers-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--ss-shadow-md);
}

.ssx-bestsellers .ssx-bestsellers-card__media{
  display:block;
  border-radius:inherit;
}
/* Keep focus ring visible on the media link */
.ssx-bestsellers .ssx-bestsellers-card__media:focus-visible{
  outline-offset:-2px;
}

.ssx-bestsellers .ssx-bestsellers-card__body{
  padding:var(--ss-sp-4) var(--ss-sp-5) var(--ss-sp-5);
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-3);
}
.ssx-bestsellers .ssx-bestsellers-card__title{
  font-size:var(--ss-fs-h3);
  min-width:0;
}
.ssx-bestsellers .ssx-bestsellers-card__meta{
  font-size:var(--ss-fs-small);
  letter-spacing:0.04em;
  margin:0;
}

/* Subtle "Add" text-link — reveals on card hover / focus, quiet by default */
.ssx-bestsellers .ssx-bestsellers-add{
  position:relative;
  overflow:hidden;
  align-self:flex-start;
  max-width:100%;
  margin-top:var(--ss-sp-1);
  padding:0.35rem 0;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--ss-beige);
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.2em;
  border-radius:var(--ss-r-sm);
  opacity:0;
  transform:translateY(4px);
  transition:opacity var(--ss-dur-2) var(--ss-ease),
             transform var(--ss-dur-2) var(--ss-ease);
}
.ssx-bestsellers .ssx-bestsellers-card:hover .ssx-bestsellers-add,
.ssx-bestsellers .ssx-bestsellers-card:focus-within .ssx-bestsellers-add,
.ssx-bestsellers .ssx-bestsellers-add:focus-visible{
  opacity:1;
  transform:translateY(0);
}
.ssx-bestsellers .ssx-bestsellers-add__label{
  display:inline-block;
  padding-bottom:2px;
  background:linear-gradient(var(--ss-orange),var(--ss-orange)) no-repeat left bottom / 0% 1px;
  transition:background-size var(--ss-dur-2) var(--ss-ease),
             color var(--ss-dur-2) var(--ss-ease);
}
.ssx-bestsellers .ssx-bestsellers-add:hover .ssx-bestsellers-add__label{
  background-size:100% 1px;
  color:var(--ss-white);
}

/* Quick-add "Added" micro-state (mirrors shared .ss-quickadd, scoped) */
.ssx-bestsellers .ssx-bestsellers-add__done{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center start;
  padding-inline:0;
  background:transparent;
  color:var(--ss-orange);
  letter-spacing:0.2em;
  white-space:nowrap;
  opacity:0;
  transform:translateY(60%);
  transition:opacity var(--ss-dur-2) var(--ss-ease),
             transform var(--ss-dur-2) var(--ss-ease);
}
.ssx-bestsellers .ssx-bestsellers-add.is-added .ssx-bestsellers-add__label{
  opacity:0;
}
.ssx-bestsellers .ssx-bestsellers-add.is-added .ssx-bestsellers-add__done{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .ssx-bestsellers .ssx-bestsellers-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:560px){
  .ssx-bestsellers .ssx-bestsellers-grid{
    grid-template-columns:minmax(0, 1fr);
    gap:var(--ss-sp-5);
  }
  .ssx-bestsellers .ssx-bestsellers-head__aside{
    max-width:none;
  }
  /* Touch: no reliable hover, so keep the Add link visible */
  .ssx-bestsellers .ssx-bestsellers-add{
    opacity:1;
    transform:none;
  }
}

@media (hover:none){
  .ssx-bestsellers .ssx-bestsellers-add{
    opacity:1;
    transform:none;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ssx-bestsellers .ssx-bestsellers-card:hover{ transform:none; }
  .ssx-bestsellers .ssx-bestsellers-add{
    opacity:1;
    transform:none;
  }
}