/* =====================================================================
   template-bold.css — Bold (DTC/Grotesk) product-card styles
   All colours, fonts, and radii use design tokens from tokens.css.
   Class names: ssb-card* (Shopstrate Bold)
   ===================================================================== */

/* Card shell */
.ssb-card {
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.30);
  transition: transform .2s;
}
.ssb-card:hover {
  transform: translateY(-6px);
}

/* Media area (image / placeholder) */
.ssb-card__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ss-color-surface-2);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.ssb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder fills the media slot */
.ssb-card__media .ss-ph {
  width: 100%;
  height: 100%;
}

/* Badges */
.ssb-badge {
  position: absolute;
  top: calc(var(--ss-space) * .67);
  left: calc(var(--ss-space) * .67);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-eyebrow);
  padding: 5px 10px;
  border-radius: calc(var(--ss-radius) * .43);
  line-height: 1;
}
.ssb-badge--new {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
}
.ssb-badge--sale {
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
}
.ssb-badge--lowstock {
  background: var(--ss-color-muted);
  color: var(--ss-color-surface);
}
.ssb-badge--outofstock {
  background: var(--ss-color-line);
  color: var(--ss-color-ink);
}

/* Card body */
.ssb-card__body {
  padding: var(--ss-space);
}

/* Category eyebrow */
.ssb-card__cat {
  display: block;
  font-size: var(--ss-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ss-color-muted);
  font-weight: 600;
  margin-bottom: calc(var(--ss-space) * .28);
}

/* Product name heading (h2–h4 set by HeadingLevel) */
.ssb-card__name {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: var(--ss-fs-h3);
  margin-bottom: calc(var(--ss-space) * .44);
}
.ssb-card__name a {
  color: inherit;
  text-decoration: none;
}
.ssb-card__name a:hover {
  color: var(--ss-color-link);
}

/* Price + stars row */
.ssb-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Price */
.ssb-price {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--ss-color-ink);
}
.ssb-price s {
  color: var(--ss-color-muted);
  font-weight: 500;
  font-size: .81rem;
  margin-right: calc(var(--ss-space) * .28);
  text-decoration: line-through;
}

/* Stars / rating */
.ssb-stars {
  color: var(--ss-color-link);
  font-size: .75rem;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ssb-stars small {
  color: var(--ss-color-muted);
  font-size: .69rem;
}

/* =====================================================================
   Bold chrome — ribbon, header, nav, search, icons, footer
   ===================================================================== */

/* Layout helper */
.ssb-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 calc(var(--ss-space) * 1.78);
}

/* ---- Promo ribbon ---- */
.ssb-ribbon {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  text-align: center;
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: calc(var(--ss-space) * .5);
}

/* ---- Sticky header ---- */
.ssb-hdr {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251,248,244,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ss-color-line);
}

/* ---- Nav row ---- */
.ssb-nav {
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space) * 1.56);
  height: 74px;
}

/* ---- Logo ---- */
.ssb-logo {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.04em;
  text-decoration: none;
  color: var(--ss-color-ink);
  display: flex;
  align-items: center;
  gap: 2px;
}
.ssb-logo img {
  display: block;
}
.ssb-logo__dot {
  color: var(--ss-color-brand);
}

/* ---- Primary nav links ---- */
.ssb-nav nav {
  display: flex;
  gap: calc(var(--ss-space) * 1.33);
  font-weight: 600;
  font-size: .94rem;
}
.ssb-nav nav a {
  color: var(--ss-color-ink);
  text-decoration: none;
  padding: 6px 2px;
}
.ssb-nav nav a[aria-current="page"] {
  color: var(--ss-color-link);
}
.ssb-nav nav a:hover {
  color: var(--ss-color-link);
}

/* ---- Search pill ---- */
.ssb-search {
  flex: 1;
  max-width: 420px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space) * .56);
  background: var(--ss-color-surface);
  border: 1px solid var(--ss-color-line);
  border-radius: 999px;
  padding: calc(var(--ss-space) * .61) calc(var(--ss-space));
  color: var(--ss-color-muted);
  font-size: .88rem;
}
.ssb-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--ss-color-ink);
}
.ssb-search input::placeholder {
  color: var(--ss-color-muted);
}

/* ---- Icon cluster ---- */
.ssb-icons {
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space));
}
.ssb-icobtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--ss-color-ink);
  text-decoration: none;
}
.ssb-icobtn:hover {
  color: var(--ss-color-brand);
}

/* Cart / wishlist count badge */
.ssb-cart-badge,
.ssb-wishlist-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .69rem;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* ---- Bold footer ---- */
.ssb-ftr {
  background: var(--ss-color-ink);
  color: rgba(255,255,255,.72);
  padding: calc(var(--ss-space) * 3.56) 0 calc(var(--ss-space) * 1.56);
}

.ssb-foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: calc(var(--ss-space) * 2.22);
  padding-bottom: calc(var(--ss-space) * 2.44);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Brand column */
.ssb-foot-brand {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ss-space) * .78);
}
.ssb-foot-logo {
  color: var(--ss-color-surface);
}
.ssb-foot-tagline {
  font-size: .88rem;
  max-width: 280px;
  margin: 0;
}

/* Social icons */
.ssb-socials {
  display: flex;
  gap: calc(var(--ss-space) * .56);
}
.ssb-socials span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: grid;
  place-items: center;
  color: var(--ss-color-surface);
  font-size: .75rem;
}

/* Link columns */
.ssb-foot-col h4 {
  font-family: var(--ss-font-display);
  font-weight: 700;
  color: var(--ss-color-surface);
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 calc(var(--ss-space) * .89) 0;
}
.ssb-foot-col a {
  display: block;
  font-size: .88rem;
  padding: calc(var(--ss-space) * .33) 0;
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.ssb-foot-col a:hover {
  color: var(--ss-color-surface);
}

/* Trust row */
.ssb-trust {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ss-space) * .89) calc(var(--ss-space) * 2);
  list-style: none;
  margin: calc(var(--ss-space) * 1.11) 0 0 0;
  padding: 0;
}
.ssb-trust__item {
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space) * .44);
  font-size: .81rem;
  color: rgba(255,255,255,.72);
}
.ssb-trust__icon {
  color: var(--ss-color-surface);
}

/* Bottom bar */
.ssb-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(var(--ss-space) * 1.33);
  font-size: .81rem;
}

/* Payment badges */
.ssb-pays {
  display: flex;
  gap: calc(var(--ss-space) * .44);
}
.ssb-pays span {
  background: rgba(255,255,255,.1);
  border-radius: 5px;
  padding: 5px 9px;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .69rem;
  color: var(--ss-color-surface);
}

/* =====================================================================
   Bold home-page sections
   ===================================================================== */

/* ---- Hero ---- */
.ssb-home-hero {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--ss-color-ink);
}
.ssb-home-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ssb-home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20,16,12,.82) 0%, rgba(20,16,12,.35) 48%, rgba(20,16,12,0) 78%);
}
.ssb-home-hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--ss-color-surface);
  max-width: 600px;
}
.ssb-home-kicker {
  display: block;
  font-family: var(--ss-font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: var(--ss-fs-eyebrow);
  color: var(--ss-color-link);
  margin-bottom: calc(var(--ss-space) * 1);
}
.ssb-home-hero .ssb-home-kicker {
  color: rgba(255,255,255,.85);
}
.ssb-home-ed__text .ssb-home-kicker {
  color: rgba(255,255,255,.85);
}
.ssb-home-hero__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-hero);
  letter-spacing: -.02em;
  line-height: .98;
  margin-bottom: calc(var(--ss-space) * 1.11);
  color: var(--ss-color-surface);
}
.ssb-home-hero__sub {
  font-size: 1.06rem;
  color: rgba(255,255,255,.86);
  max-width: 430px;
  margin-bottom: calc(var(--ss-space) * 1.67);
}
.ssb-home-hero__cta {
  display: flex;
  gap: calc(var(--ss-space) * .78);
  flex-wrap: wrap;
}

/* ---- Shared home buttons ---- */
.ssb-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .88rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  min-height: 44px;
}
.ssb-home-btn--accent {
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.35);
}
.ssb-home-btn--accent:hover {
  transform: translateY(-2px);
}
.ssb-home-btn--ghost {
  background: transparent;
  color: var(--ss-color-surface);
  border-color: rgba(255,255,255,.55);
}
.ssb-home-btn--ink {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
}

/* ---- Value strip ---- */
.ssb-home-values {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
}
.ssb-home-values__inner {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--ss-space) * 1.33);
  padding: calc(var(--ss-space) * 1.11) 0;
  flex-wrap: wrap;
}
.ssb-home-value {
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space) * .67);
  font-weight: 600;
  font-size: .88rem;
}
.ssb-home-value__em {
  font-size: 1.25rem;
}
.ssb-home-value small {
  display: block;
  color: rgba(255,255,255,.55);
  font-weight: 400;
  font-size: .75rem;
}

/* ---- Section headings ---- */
.ssb-home-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: calc(var(--ss-space) * 2.11);
}
.ssb-home-sec-title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  margin: 0;
}
.ssb-home-sec-more {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .88rem;
  color: var(--ss-color-link);
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
}
.ssb-home-sec-more:hover {
  text-decoration: underline;
}

/* ---- Featured collections ---- */
.ssb-home-colls-section {
  padding: calc(var(--ss-space) * 4.67) 0;
}
.ssb-home-colls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--ss-space) * 1.33);
}
.ssb-home-coll {
  position: relative;
  display: block;
  height: 380px;
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.28);
  text-decoration: none;
  background: var(--ss-color-surface-2);
}
.ssb-home-coll__media {
  width: 100%;
  height: 100%;
}
.ssb-home-coll__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ssb-home-coll__media .ss-ph {
  width: 100%;
  height: 100%;
  min-height: 380px;
}
.ssb-home-coll__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,16,12,.72), rgba(20,16,12,0) 60%);
}
.ssb-home-coll:hover .ssb-home-coll__media img {
  transform: scale(1.05);
}
.ssb-home-coll__cap {
  position: absolute;
  left: calc(var(--ss-space) * 1.67);
  bottom: calc(var(--ss-space) * 1.56);
  z-index: 2;
  color: var(--ss-color-surface);
}
.ssb-home-coll__name {
  display: block;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.67rem;
  letter-spacing: -.02em;
}
.ssb-home-coll__hint {
  font-weight: 600;
  font-size: .81rem;
  opacity: .85;
}

/* ---- Rail: 4-up bold override ---- */
body.bold .ss-rail__grid {
  grid-template-columns: repeat(4, 1fr);
}
/* This selector out-specifies the phone breakpoint in shopstrate.css (body.bold + class beats a
   bare class), so without a matching override here the home rail would stay locked at 4 narrow
   columns on a phone instead of collapsing. Card content (image via aspect-ratio, name/price in
   rem) scales down cleanly with the track, so no fixed-width child forces overflow. */
@media (max-width: 559.98px) {
  body.bold .ss-rail__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--ss-space) * .5);
  }
}

/* ---- Editorial split band ---- */
.ssb-home-ed {
  padding: calc(var(--ss-space) * 4.67) 0;
  background: var(--ss-color-surface);
}
.ssb-home-ed__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.28);
}
.ssb-home-ed__img {
  min-height: 460px;
  background-size: cover;
  background-position: center;
  background-color: var(--ss-color-surface-2);
}
.ssb-home-ed__text {
  padding: calc(var(--ss-space) * 3.56);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  gap: calc(var(--ss-space) * .89);
}
.ssb-home-ed__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 0;
}
.ssb-home-ed__body {
  color: rgba(255,255,255,.78);
  font-size: 1rem;
  max-width: 420px;
  margin: 0;
}

/* ---- Testimonials ---- */
.ssb-home-quotes-section {
  padding: calc(var(--ss-space) * 4.67) 0;
}
.ssb-home-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--ss-space) * 1.33);
}
.ssb-home-quote {
  background: var(--ss-color-surface);
  border: 1px solid var(--ss-color-line);
  border-radius: var(--ss-radius);
  padding: calc(var(--ss-space) * 1.67);
}
.ssb-home-quote__stars {
  color: var(--ss-color-link);
  font-size: .94rem;
  margin-bottom: calc(var(--ss-space) * .78);
  letter-spacing: 2px;
}
.ssb-home-quote p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: calc(var(--ss-space) * 1);
}
.ssb-home-quote__who {
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space) * .67);
}
.ssb-home-quote__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
  display: grid;
  place-items: center;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .81rem;
  flex-shrink: 0;
}
.ssb-home-quote__who strong {
  display: block;
  font-size: .88rem;
}
.ssb-home-quote__who small {
  display: block;
  color: var(--ss-color-muted);
  font-size: .75rem;
}

/* ---- Newsletter ---- */
.ssb-home-news {
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
}
.ssb-home-news__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--ss-space) * 2.22);
  padding: calc(var(--ss-space) * 3.33) 0;
  flex-wrap: wrap;
}
.ssb-home-news__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
}
.ssb-home-news__sub {
  opacity: .9;
  margin-top: calc(var(--ss-space) * .44);
  font-size: .94rem;
}
.ssb-home-news__form {
  display: flex;
  gap: 10px;
  background: var(--ss-color-surface);
  padding: 8px;
  border-radius: 999px;
  min-width: 420px;
  flex-wrap: wrap;
}
.ssb-home-news__input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 calc(var(--ss-space) * 1);
  font-size: .94rem;
  font-family: var(--ss-font);
  color: var(--ss-color-ink);
  background: transparent;
  min-height: 44px;
}

/* =====================================================================
   Bold listing page — banner, toolbar, chips, sort, grid, pagination
   ===================================================================== */

/* ---- Category banner ---- */
.ssb-listing-banner {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--ss-color-ink);
}
.ssb-listing-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ssb-listing-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,16,12,.78), rgba(20,16,12,.2));
}
.ssb-listing-banner__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--ss-color-surface);
}
.ssb-listing-banner__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  margin: 0 0 calc(var(--ss-space) * .44) 0;
}
.ssb-listing-banner__count {
  opacity: .85;
  margin: 0;
}

/* ---- Category chips ---- */
.ssb-listing-chips {
  display: flex;
  gap: calc(var(--ss-space) * .56);
  flex-wrap: wrap;
  padding: calc(var(--ss-space) * 1.44) 0 calc(var(--ss-space) * 1.11) 0;
}
.ssb-listing-chip {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-eyebrow);
  padding: calc(var(--ss-space) * .5) calc(var(--ss-space) * .89);
  border-radius: 999px;
  border: 1.5px solid var(--ss-color-line);
  background: var(--ss-color-surface);
  color: var(--ss-color-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ssb-listing-chip:hover {
  background: var(--ss-color-surface-2);
}
.ssb-listing-chip--active {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  border-color: var(--ss-color-ink);
}
.ssb-listing-chip:focus-visible {
  outline: 2px solid var(--ss-color-ink);
  outline-offset: 2px;
}

/* ---- Filter + sort (functional GET form) ---- */
.ssb-listing-filters {
  border-top: 1px solid var(--ss-color-line);
  border-bottom: 1px solid var(--ss-color-line);
  padding: calc(var(--ss-space) * 1.44) 0;
  z-index: 20;
  background: var(--ss-color-surface);
}
/* Sticky only above 700px, where the filter form is a single row. Below that the form stacks
   (label above control, one per line) and can run tall enough to eat the whole phone screen for
   the entire scroll — on a 390x844 portrait phone a pinned bar with no >480px short-viewport
   escape pinned for good. So on narrow viewports the bar just scrolls away like normal content,
   same as before this branch. Follow-up: a compact "Filter & sort" disclosure (collapsed by
   default, one control row when open) would let us restore stickiness on phones without the
   height cost. */
@media (min-width: 700px) {
  .ssb-listing-filters {
    position: sticky;
    /* .ssb-hdr is itself sticky at top:0 with a fixed 74px row height (the ribbon above it is not
       sticky and scrolls away first) — offset by that height so the two never overlap. */
    top: 74px;
  }
}
/* A short viewport (e.g. a phone in landscape) can't spare the room a pinned filter bar takes —
   let it scroll away like normal content instead of eating the screen. */
@media (max-height: 480px) {
  .ssb-listing-filters {
    position: static;
  }
}
.ssb-filters__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--ss-space) * 1.33) calc(var(--ss-space) * 1.56);
}
.ssb-filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ssb-filters__field label {
  font-family: var(--ss-font-display);
  font-size: var(--ss-fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ss-color-muted);
}
.ssb-filters__select {
  min-height: 44px;
  padding: 0 calc(var(--ss-space) * .67);
  border: 1.5px solid var(--ss-color-line);
  border-radius: var(--ss-radius);
  background: var(--ss-color-surface);
  color: var(--ss-color-ink);
  font: inherit;
  font-size: .84rem;
}
.ssb-filters__price {
  display: grid;
  grid-template-columns: auto 88px auto 88px;
  align-items: center;
  gap: 6px calc(var(--ss-space) * .56);
  border: 0;
  padding: 0;
  margin: 0;
}
.ssb-filters__price legend,
.ssb-filters__price .ss-slider {
  grid-column: 1 / -1;
}
.ssb-filters__price legend {
  font-family: var(--ss-font-display);
  font-size: var(--ss-fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ss-color-muted);
  padding: 0 0 2px 0;
}
.ssb-filters__price label {
  font-family: var(--ss-font-display);
  font-size: var(--ss-fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ss-color-muted);
  justify-self: end;
}
.ssb-filters__price input[type="number"] {
  width: 88px;
  min-height: 44px;
  padding: 0 calc(var(--ss-space) * .56);
  border: 1.5px solid var(--ss-color-line);
  border-radius: var(--ss-radius);
  background: var(--ss-color-surface);
  color: var(--ss-color-ink);
  font: inherit;
  font-size: .84rem;
}
.ssb-filters__check {
  flex-direction: row;
  align-items: center;
  min-height: 44px;
  gap: 8px;
}
.ssb-filters__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ss-color-ink);
}
.ssb-filters__check label {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ss-color-ink);
}
.ssb-filters__form .ss-btn {
  align-self: flex-end;
}
.ssb-filters__form select:focus-visible,
.ssb-filters__form input:focus-visible {
  outline: 2px solid var(--ss-color-ink);
  outline-offset: 2px;
}
.ssb-filters__nojs {
  font-size: .78rem;
  color: var(--ss-color-muted);
}
.ssb-filters__count {
  margin: calc(var(--ss-space) * .89) 0 0 0;
  font-size: .81rem;
  font-weight: 600;
  color: var(--ss-color-muted);
}
.ssb-filters__clear {
  margin: calc(var(--ss-space) * .33) 0 0 0;
}
.ssb-filters__clear a {
  font-family: var(--ss-font-display);
  font-size: .81rem;
  font-weight: 700;
  color: var(--ss-color-link);
  text-decoration: underline;
}
.ssb-filters__clear a:focus-visible {
  outline: 2px solid var(--ss-color-ink);
  outline-offset: 2px;
}
@media (max-width: 540px) {
  .ssb-filters__form {
    align-items: stretch;
  }
  .ssb-filters__form .ss-btn {
    width: 100%;
  }
}

/* ---- Price slider skin (structure shared in shopstrate.css) ---- */
.ssb-slider .ss-slider__readout {
  font-family: var(--ss-font-display);
  font-size: var(--ss-fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ssb-slider .ss-slider__handle::after {
  border-radius: 3px;
  border-width: 2.5px;
  border-color: var(--ss-color-ink);
}
.ssb-slider .ss-slider__range {
  background: var(--ss-color-ink);
}
.ssb-slider .ss-slider__handle:focus-visible::after {
  box-shadow: 0 0 0 3px var(--ss-color-surface), 0 0 0 5px var(--ss-color-ink);
}

/* ---- 4-up product grid ---- */
.ssb-listing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--ss-space) * 1.33);
  padding: calc(var(--ss-space) * 2) 0 calc(var(--ss-space) * 2.78);
}
@media (max-width: 1024px) {
  .ssb-listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ssb-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: already 2-up from the 680px step above, but the desktop gap/padding/type scale were
   sized for a much wider track. Tighten them so two cards fit at 390px without the name or price
   wrapping into a mess. */
@media (max-width: 559.98px) {
  .ssb-listing-grid {
    gap: calc(var(--ss-space) * .5);
  }
  .ssb-listing-grid .ssb-card__body {
    padding: calc(var(--ss-space) * .56);
  }
  .ssb-listing-grid .ssb-card__name {
    font-size: .92rem;
  }
  .ssb-listing-grid .ssb-price {
    font-size: .88rem;
  }
  /* Price + rating stars sit in one flex row; let stars drop to their own line rather than
     compressing both to the point of overlap in a track this narrow. */
  .ssb-listing-grid .ssb-card__row {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/* =====================================================================
   Bold product-detail page — .ssb-pd*
   ===================================================================== */

/* Two-column layout: gallery | info */
.ssb-pd {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: calc(var(--ss-space) * 3.11);
  padding-bottom: calc(var(--ss-space) * 2.22);
}

/* ---- Gallery ---- */
.ssb-pd__gallery {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: calc(var(--ss-space) * .89);
}

/* The info column is much taller than the gallery on a product with a real description, so the
   gallery used to stop dead and leave a tall empty stripe down the left of the page. Pinning it
   keeps the product in view while the shopper reads, and costs nothing when the gallery is the
   taller of the two (sticky only engages once its own bottom is reached).

   Desktop only: below 900px the grid is a single column, where pinning the gallery would cover
   the content underneath it. align-self stops the grid stretching the item, which silently
   defeats position:sticky. */
@media (min-width: 901px) {
  .ssb-pd__gallery {
    position: sticky;
    /* .ssb-hdr is sticky at top:0 with a 74px row height — clear it, plus a little breathing room. */
    top: calc(74px + var(--ss-space));
    align-self: start;
  }
}
.ssb-pd__gallery--single { grid-template-columns: 1fr; }

/* Vertical thumbnail strip */
.ssb-pd__thumbs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ss-space) * .67);
}
.ssb-pd__thumb {
  aspect-ratio: 1;
  border-radius: calc(var(--ss-radius) * .71);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  font: inherit;
}
.ssb-pd__thumb--active,
.ssb-pd__thumb[aria-pressed="true"] {
  border-color: var(--ss-color-brand);
}
.ssb-pd__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* overflow:hidden on this element would clip the shared box-shadow focus
   ring, so give focus-visible its own non-clipped outline here */
.ssb-pd__thumb:focus-visible {
  outline: 2px solid var(--ss-color-brand);
  outline-offset: 2px;
  box-shadow: none;
}

/* Main image */
.ssb-pd__main-img {
  aspect-ratio: 1;
  border-radius: var(--ss-radius);
  overflow: hidden;
  background: var(--ss-color-surface-2);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.28);
}
.ssb-pd__main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ssb-pd__main-img .ss-ph {
  width: 100%;
  height: 100%;
}
.ssb-pd__main-btn {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: zoom-in;
}
.ssb-pd__main-btn img {
  transition: transform .18s ease;
}
.ssb-pd__main-btn:hover img {
  transform: scale(1.03);
}
.ssb-pd__main-btn:focus-visible {
  outline: 2px solid var(--ss-color-brand);
  outline-offset: -2px;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .ssb-pd__main-btn img { transition: none; }
  .ssb-pd__main-btn:hover img { transform: none; }
}

/* ---- Info panel ---- */
.ssb-pd__info {
  padding-top: calc(var(--ss-space) * .44);
}

/* Category eyebrow */
.ssb-pd__cat {
  font-family: var(--ss-font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: var(--ss-fs-eyebrow);
  color: var(--ss-color-link);
  margin-bottom: calc(var(--ss-space) * .78);
}

/* Product name */
.ssb-pd__name {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-bottom: calc(var(--ss-space) * .89);
  color: var(--ss-color-ink);
}

/* Rating */
.ssb-pd__rate {
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space) * .56);
  margin-bottom: calc(var(--ss-space) * 1.22);
  font-size: .88rem;
  color: var(--ss-color-muted);
}
.ssb-pd__stars {
  color: var(--ss-color-link);
  letter-spacing: 1px;
}
.ssb-pd__rate-link {
  color: inherit;
  text-decoration: underline;
}
.ssb-pd__rate-link:hover {
  color: var(--ss-color-link);
}
.ssb-pd__rate--empty {
  color: var(--ss-color-muted);
}

/* Price */
.ssb-pd__price {
  display: flex;
  align-items: baseline;
  gap: calc(var(--ss-space) * .67);
  margin-bottom: calc(var(--ss-space) * .89);
}
.ssb-pd__price-now {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--ss-color-ink);
}

/* Stock badges */
.ssb-pd__stock {
  font-size: .81rem;
  font-weight: 600;
  margin-bottom: calc(var(--ss-space) * .89);
}
.ssb-pd__stock--in  { color: var(--ss-color-success); }
.ssb-pd__stock--low { color: var(--ss-color-warning); }
.ssb-pd__stock--out { color: var(--ss-color-muted); }

/* Description */
.ssb-pd__desc {
  color: var(--ss-color-muted);
  font-size: .94rem;
  margin-bottom: calc(var(--ss-space) * 1.56);
  max-width: 460px;
}

/* Quantity + Add-to-cart row */
.ssb-pd__qty-row {
  display: flex;
  gap: calc(var(--ss-space) * .78);
  margin-bottom: calc(var(--ss-space) * .89);
  align-items: center;
}
.ssb-pd__qty {
  display: flex;
  align-items: center;
  border: 2px solid var(--ss-color-line);
  border-radius: 999px;
  background: var(--ss-color-surface);
  flex-shrink: 0;
}
.ssb-pd__qty-btn {
  width: 48px;
  height: 52px;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  cursor: not-allowed;
  font-family: var(--ss-font-display);
  color: var(--ss-color-muted);
  display: grid;
  place-items: center;
  min-height: 44px;
  min-width: 44px;
}
.ssb-pd__qty-val {
  width: 40px;
  text-align: center;
  font-family: var(--ss-font-display);
  font-weight: 700;
}

/* The quantity readout became a real <input type=number> when the stepper stopped being
   decorative. It keeps the same footprint inside the bordered group -- no border or background of
   its own -- and the browser's native spinner is suppressed because the -/+ buttons either side
   are the control, and two sets of arrows in one group is just clutter. */
.ssb-pd__qty-val {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ssb-pd__qty-val::-webkit-outer-spin-button,
.ssb-pd__qty-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* The group now sits INSIDE the add-to-cart form rather than beside it, so the form owns the row. */
.ssb-pd__add-form {
  display: flex;
  gap: calc(var(--ss-space));
  align-items: stretch;
}
.ssb-pd__qty-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
}
.ssb-pd__add-form {
  flex: 1;
}

/* Secondary CTA row */
.ssb-pd__secondary {
  display: flex;
  gap: calc(var(--ss-space) * .67);
  margin-bottom: calc(var(--ss-space) * 1.67);
}
.ssb-pd__secondary form {
  flex: 1;
}

/* Assurance grid (2-column) */
.ssb-pd__assure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--ss-space) * .78);
  border-top: 1px solid var(--ss-color-line);
  padding-top: calc(var(--ss-space) * 1.33);
  margin-bottom: calc(var(--ss-space) * 1.33);
  font-size: .81rem;
  font-weight: 600;
}
.ssb-pd__assure div {
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space) * .56);
}

/* Specifications */
.ssb-pd__specs {
  border-top: 1px solid var(--ss-color-line);
  padding-top: calc(var(--ss-space) * 1.33);
}
.ssb-pd__specs-title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: calc(var(--ss-space) * .78);
}
.ssb-pd__specs-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: calc(var(--ss-space) * .56) calc(var(--ss-space) * .89);
  font-size: .88rem;
}
.ssb-pd__specs-dl dt {
  color: var(--ss-color-muted);
}
.ssb-pd__specs-dl dd {
  font-weight: 600;
  margin: 0;
}

/* Details accordion — bold skin */
.ssb-pd__info .ss-acc {
  margin-top: calc(var(--ss-space) * 1.11);
}
.ssb-pd__info .ss-acc__trigger {
  font-family: var(--ss-font-display);
  font-size: 1rem;
}

/* Variant selector — bold skin: grotesque uppercase legend to match the eyebrow/specs-title
   idiom, heavier radio rows to match the template's bigger, punchier controls elsewhere on
   this page. */
.ssb-pd__info .ss-variants__legend {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.ssb-pd__info .ss-variants__choice label {
  font-size: .94rem;
  font-weight: 600;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ssb-pd {
    grid-template-columns: 1fr;
  }
  .ssb-pd__gallery {
    grid-template-columns: 1fr;
  }
  .ssb-pd__thumbs {
    flex-direction: row;
    order: 1;
  }
  .ssb-pd__main-img {
    order: 0;
  }
}

/* =====================================================================
   Bold cart page — .ssb-cartpage* root; shared .ss-line*/.ss-qty*/
   .ss-promo*/.ss-totals* structures (also composed by the Classic template)
   ===================================================================== */

.ssb-cartpage {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 calc(var(--ss-space) * 1.78);
}

/* ---- Page head ---- */
.ssb-cartpage__head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--ss-space) * .89);
  padding: calc(var(--ss-space) * 1.22) 0 calc(var(--ss-space) * 1.56);
}
.ssb-cartpage__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ss-color-ink);
}
.ssb-cartpage__count {
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: .94rem;
  color: var(--ss-color-muted);
}

/* ---- Empty state ---- */
.ssb-cartpage__empty {
  padding: calc(var(--ss-space) * 2.22) 0 calc(var(--ss-space) * 5.56);
}
.ssb-cartpage__empty-heading {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  color: var(--ss-color-ink);
  margin-bottom: calc(var(--ss-space) * 1.22);
}
.ssb-cartpage__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .88rem;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.35);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  min-height: 44px;
}
.ssb-cartpage__empty-cta:hover {
  transform: translateY(-2px);
}

/* ---- Two-column layout: lines | summary ---- */
.ssb-cartpage__layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: calc(var(--ss-space) * 2);
  align-items: start;
  padding-bottom: calc(var(--ss-space) * 5);
}

/* ---- Line rows (shared .ss-line* structures — scoped under .ssb-cartpage;
        the Classic template styles the same structures under its own root) ---- */
.ssb-cartpage .ss-lines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ss-space) * .89);
}
.ssb-cartpage .ss-line {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: calc(var(--ss-space) * 1.11);
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.30);
  padding: var(--ss-space);
  align-items: center;
}
.ssb-cartpage .ss-line__media {
  display: block;
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: calc(var(--ss-radius) * .71);
  background: var(--ss-color-surface-2);
  overflow: hidden;
}
.ssb-cartpage .ss-line__name {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h3);
  margin: 0 0 calc(var(--ss-space) * .22) 0;
}
.ssb-cartpage .ss-line__name a {
  color: var(--ss-color-ink);
  text-decoration: none;
}
.ssb-cartpage .ss-line__name a:hover {
  color: var(--ss-color-link);
}
.ssb-cartpage .ss-line__variant {
  font-size: .84rem;
  color: var(--ss-color-muted);
  margin: 0 0 calc(var(--ss-space) * .11) 0;
}
.ssb-cartpage .ss-line__unit {
  font-size: .84rem;
  color: var(--ss-color-muted);
}
.ssb-cartpage .ss-line__right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--ss-space) * .67) calc(var(--ss-space) * .78);
}
.ssb-cartpage .ss-line__price {
  flex-basis: 100%;
  text-align: right;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--ss-color-ink);
}

/* ---- Quantity stepper (shared .ss-qty* structures) ---- */
.ssb-cartpage .ss-qty {
  display: flex;
  align-items: center;
  border: 2px solid var(--ss-color-line);
  border-radius: 999px;
  background: var(--ss-color-surface);
}
.ssb-cartpage .ss-qty__form {
  display: flex;
}
.ssb-cartpage .ss-qty__btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-size: 1.13rem;
  font-family: var(--ss-font-display);
  color: var(--ss-color-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ssb-cartpage .ss-qty__btn:hover:not(:disabled) {
  background: var(--ss-color-surface-2);
}
.ssb-cartpage .ss-qty__btn:disabled {
  cursor: not-allowed;
  color: var(--ss-color-muted);
}
.ssb-cartpage .ss-qty__val {
  width: 34px;
  text-align: center;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .94rem;
  color: var(--ss-color-ink);
}

/* ---- Remove line / clear cart (shared .ss-line-remove) ---- */
.ssb-cartpage .ss-line-remove-form {
  display: inline-flex;
}
.ssb-cartpage .ss-line-remove {
  display: inline-block;
  font-size: .81rem;
  font-weight: 600;
  font-family: var(--ss-font);
  color: var(--ss-color-muted);
  border: 0;
  border-bottom: 1px solid var(--ss-color-line);
  background: transparent;
  padding: 0 0 1px;
  cursor: pointer;
}
.ssb-cartpage .ss-line-remove:hover {
  color: var(--ss-color-ink);
  border-color: var(--ss-color-ink);
}

/* ---- Continue shopping + clear cart row below the lines column ---- */
.ssb-cartpage__keep {
  margin-top: calc(var(--ss-space) * 1.22);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--ss-space) * 1.33);
}
.ssb-cartpage__keep-link {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .88rem;
  color: var(--ss-color-link);
  text-decoration: none;
}
.ssb-cartpage__keep-link:hover {
  opacity: .82;
}
.ssb-cartpage__keep form {
  display: inline-flex;
}

/* ---- Summary column ---- */
.ssb-cartpage__summary {
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.28);
  padding: calc(var(--ss-space) * 1.56);
  position: sticky;
  top: calc(var(--ss-space) * 2.22);
}
.ssb-cartpage__summary-title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  margin-bottom: calc(var(--ss-space) * 1.11);
  color: var(--ss-color-ink);
}

/* ---- Dashed ticket wrapper around the shared promo box ---- */
.ssb-cartpage__ticket {
  border: 2px dashed var(--ss-color-line);
  border-radius: calc(var(--ss-radius) * 1.5);
  padding: calc(var(--ss-space) * .89);
  margin-bottom: calc(var(--ss-space) * 1.22);
  background: var(--ss-color-surface-2);
}

/* ---- Promo box (shared .ss-promo* structures) ---- */
.ssb-cartpage .ss-promo__form {
  display: flex;
  gap: calc(var(--ss-space) * .44);
}
.ssb-cartpage .ss-promo__input {
  flex: 1;
  min-width: 0; /* an input's intrinsic width otherwise pushed Apply off a 320px screen */
  min-height: 44px;
  border: 1px solid var(--ss-color-line);
  border-radius: var(--ss-radius);
  padding: 0 calc(var(--ss-space) * .61);
  font-size: .84rem;
  font-family: var(--ss-font);
  color: var(--ss-color-ink);
  background: var(--ss-color-surface);
}
.ssb-cartpage .ss-promo__apply {
  min-height: 44px;
  border: 0;
  border-radius: var(--ss-radius);
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 calc(var(--ss-space) * .89);
  cursor: pointer;
}
.ssb-cartpage .ss-promo__apply:hover {
  opacity: .88;
}
.ssb-cartpage .ss-promo__applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--ss-space) * .89);
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  padding: calc(var(--ss-space) * .56) calc(var(--ss-space) * .78);
  font-size: .84rem;
}
.ssb-cartpage .ss-promo__form + .ss-promo__applied,
.ssb-cartpage .ss-promo__applied + .ss-promo__applied {
  margin-top: calc(var(--ss-space) * .44);
}
.ssb-cartpage .ss-promo__chip {
  font-family: var(--ss-font-display);
  font-weight: 700;
  letter-spacing: .06em;
}
.ssb-cartpage .ss-promo__save {
  font-size: .75rem;
  color: rgba(255,255,255,.65);
  margin-left: calc(var(--ss-space) * .33);
}
.ssb-cartpage .ss-promo__remove {
  font-size: .94rem;
  font-family: var(--ss-font);
  color: var(--ss-color-surface);
  border: 0;
  background: transparent;
  opacity: .8;
  padding: 2px;
  cursor: pointer;
}
.ssb-cartpage .ss-promo__remove:hover {
  opacity: 1;
}
.ssb-cartpage .ss-promo__hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--ss-space) * .89);
  padding: calc(var(--ss-space) * .56) calc(var(--ss-space) * .78);
  background: var(--ss-color-surface);
  border: 1px dashed var(--ss-color-line);
  border-radius: var(--ss-radius);
}
.ssb-cartpage .ss-promo__form + .ss-promo__hint,
.ssb-cartpage .ss-promo__applied + .ss-promo__hint,
.ssb-cartpage .ss-promo__hint + .ss-promo__hint {
  margin-top: calc(var(--ss-space) * .44);
}
.ssb-cartpage .ss-promo__hint-text {
  font-size: .8rem;
  color: var(--ss-color-muted);
}
.ssb-cartpage .ss-promo__hint-apply {
  min-height: 32px;
  border: 0;
  border-radius: calc(var(--ss-radius) * 4);
  background: transparent;
  color: var(--ss-color-link);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 calc(var(--ss-space) * .61);
  cursor: pointer;
}
.ssb-cartpage .ss-promo__hint-apply:hover {
  opacity: .8;
}

/* ---- Totals (shared .ss-totals* structures) ---- */
.ssb-cartpage .ss-totals {
  border-top: 1px solid var(--ss-color-line);
  padding-top: var(--ss-space);
  margin-bottom: calc(var(--ss-space) * 1.22);
}
.ssb-cartpage .ss-totals__row {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  padding: calc(var(--ss-space) * .33) 0;
}
.ssb-cartpage .ss-totals__k {
  color: var(--ss-color-muted);
}
.ssb-cartpage .ss-totals__disc {
  color: var(--ss-color-link);
  font-weight: 600;
}
.ssb-cartpage .ss-totals__disc .ss-totals__k {
  color: var(--ss-color-link);
}
.ssb-cartpage .ss-totals__grand {
  border-top: 1px solid var(--ss-color-line);
  padding-top: calc(var(--ss-space) * .78);
  margin-top: calc(var(--ss-space) * .22);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ss-color-ink);
}
.ssb-cartpage .ss-totals__fine {
  font-size: .72rem;
  color: var(--ss-color-muted);
  margin-top: calc(var(--ss-space) * .33);
}

/* ---- Checkout CTA ---- */
.ssb-cartpage__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
  border: 0;
  border-radius: 999px;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .94rem;
  padding: 16px 28px;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.35);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.ssb-cartpage__checkout:hover {
  transform: translateY(-2px);
}

/* ---- Assurance line below the checkout CTA ---- */
.ssb-cartpage__assure {
  display: flex;
  gap: var(--ss-space);
  justify-content: center;
  margin-top: calc(var(--ss-space) * .89);
  font-size: .75rem;
  font-weight: 600;
  color: var(--ss-color-muted);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ssb-cartpage__layout {
    grid-template-columns: 1fr;
  }
  .ssb-cartpage__summary {
    position: static;
  }
}
@media (max-width: 540px) {
  .ssb-cartpage .ss-line {
    grid-template-columns: 80px 1fr auto;
  }
  .ssb-cartpage .ss-line__media {
    width: 80px;
    height: 80px;
  }
}

/* =====================================================================
   Bold checkout review page — .ssb-checkout* root; composes shared
   .ss-steps*/.ss-line*/.ss-promo*/.ss-totals*/.ss-pay structures
   (also composed by the Classic template)
   ===================================================================== */

.ssb-checkout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 calc(var(--ss-space) * 1.78);
}

/* ---- Steps indicator (shared .ss-steps* structures — numbered circles
        rendered via CSS counters/pseudo-elements; markup is shared and
        unmodified) ---- */
.ssb-checkout .ss-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: calc(var(--ss-space) * 1.89) 0 calc(var(--ss-space) * .33);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  counter-reset: ssb-step;
}
.ssb-checkout .ss-steps__item {
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space) * .56);
  color: var(--ss-color-muted);
  counter-increment: ssb-step;
}
.ssb-checkout .ss-steps__item::before {
  content: counter(ssb-step);
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .67rem;
  background: var(--ss-color-surface);
  color: var(--ss-color-muted);
  border: 2px solid var(--ss-color-line);
}
.ssb-checkout .ss-steps__item:not(:last-child)::after {
  content: '';
  width: 44px;
  height: 2px;
  background: var(--ss-color-line);
  margin: 0 calc(var(--ss-space) * .44);
}
/* No content override here (falls back to the base rule's counter(ssb-step),
   i.e. "1") — the shared partial's literal label text is "Cart \2713" (trailing
   checkmark), so putting a second checkmark here as well would render two. The
   circle still gets the filled ink treatment to read as "done". */
.ssb-checkout .ss-steps__item--done::before {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  border-color: var(--ss-color-ink);
}
/* Ink color restores the label to match the mockup (it would otherwise inherit
   the muted .ss-steps__item color). */
.ssb-checkout .ss-steps__item--done {
  color: var(--ss-color-ink);
}
.ssb-checkout .ss-steps__item--active {
  color: var(--ss-color-ink);
}
.ssb-checkout .ss-steps__item--active::before {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  border-color: var(--ss-color-ink);
}

/* ---- Page head ---- */
.ssb-checkout__head {
  text-align: center;
  padding: calc(var(--ss-space) * .56) 0 calc(var(--ss-space) * 2.11);
}
.ssb-checkout__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ss-color-ink);
}
.ssb-checkout__sub {
  color: var(--ss-color-muted);
  font-size: .81rem;
  margin-top: calc(var(--ss-space) * .44);
}

/* ---- Two-column layout: items | summary ---- */
.ssb-checkout__layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: calc(var(--ss-space) * 2);
  align-items: start;
  padding-bottom: calc(var(--ss-space) * 5);
}

/* ---- Order items card ---- */
.ssb-checkout__items-card {
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.30);
  padding: calc(var(--ss-space) * 1.44) calc(var(--ss-space) * 1.56);
}
.ssb-checkout__list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  text-transform: uppercase;
  margin-bottom: var(--ss-space);
}
.ssb-checkout__eyebrow {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .89rem;
  letter-spacing: .04em;
  color: var(--ss-color-ink);
}
.ssb-checkout__edit-link {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ss-color-brand);
  text-decoration: none;
}
.ssb-checkout__edit-link:hover {
  opacity: .82;
}

/* ---- Order item rows (shared .ss-line* structures — scoped under
        .ssb-checkout; the cart page styles the same structures under
        its own root) ---- */
.ssb-checkout .ss-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: calc(var(--ss-space) * .89);
  padding: calc(var(--ss-space) * .78) 0;
  border-bottom: 1px solid var(--ss-color-line);
  align-items: center;
}
.ssb-checkout .ss-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ssb-checkout .ss-line:first-child {
  padding-top: 0;
}
.ssb-checkout__thumb {
  position: relative;
  width: 64px;
  height: 64px;
}
.ssb-checkout__imgbox {
  width: 64px;
  height: 64px;
  border-radius: calc(var(--ss-radius) * .71);
  overflow: hidden;
  background: var(--ss-color-surface-2);
}
.ssb-checkout .ss-line__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ssb-checkout__qbub {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .67rem;
}
.ssb-checkout .ss-line__name {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .89rem;
  margin: 0 0 calc(var(--ss-space) * .11) 0;
  color: var(--ss-color-ink);
}
.ssb-checkout .ss-line__unit {
  font-size: .72rem;
  color: var(--ss-color-muted);
}
.ssb-checkout .ss-line__price {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .89rem;
  color: var(--ss-color-ink);
}

/* ---- Delivery address section ---- */
.ssb-checkout__address {
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.30);
  padding: calc(var(--ss-space) * 1.22) calc(var(--ss-space) * 1.56);
  margin-top: var(--ss-space);
}
.ssb-checkout__section-h {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .89rem;
  color: var(--ss-color-ink);
  margin: 0 0 var(--ss-space);
}

/* ---- "What happens next" note card ---- */
.ssb-checkout__note {
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.30);
  padding: calc(var(--ss-space) * 1.22) calc(var(--ss-space) * 1.56);
  margin-top: var(--ss-space);
  display: flex;
  gap: var(--ss-space);
  align-items: flex-start;
}
.ssb-checkout__note-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.ssb-checkout__note-heading {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .81rem;
  color: var(--ss-color-ink);
  margin-bottom: calc(var(--ss-space) * .22);
}
.ssb-checkout__note-body {
  font-size: .78rem;
  color: var(--ss-color-muted);
}

/* ---- Summary column ---- */
.ssb-checkout__summary {
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.28);
  padding: calc(var(--ss-space) * 1.56);
  position: sticky;
  top: calc(var(--ss-space) * 2.22);
}
.ssb-checkout__summary-eyebrow {
  display: block;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.13rem;
  letter-spacing: -.01em;
  margin-bottom: calc(var(--ss-space) * 1.11);
  color: var(--ss-color-ink);
}

/* ---- Dashed chip wrapper around the applied-promo strip (shared
        .ss-promo* classes, no forms here) ---- */
.ssb-checkout__chiprow {
  border: 2px dashed var(--ss-color-line);
  border-radius: calc(var(--ss-radius) * .86);
  padding: calc(var(--ss-space) * .67) calc(var(--ss-space) * .78);
  margin-bottom: calc(var(--ss-space) * 1.11);
  background: var(--ss-color-surface-2);
}
.ssb-checkout .ss-promo__applied {
  display: flex;
  align-items: center;
}
.ssb-checkout .ss-promo__applied + .ss-promo__applied {
  margin-top: calc(var(--ss-space) * .44);
}
.ssb-checkout .ss-promo__chip {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ss-color-ink);
}
.ssb-checkout .ss-promo__save {
  font-size: .67rem;
  color: var(--ss-color-muted);
  margin-left: calc(var(--ss-space) * .33);
}

/* ---- Totals (shared .ss-totals* structures) ---- */
.ssb-checkout .ss-totals {
  border-top: 1px solid var(--ss-color-line);
  padding-top: var(--ss-space);
  margin-bottom: calc(var(--ss-space) * 1.22);
}
.ssb-checkout .ss-totals__row {
  display: flex;
  justify-content: space-between;
  font-size: .84rem;
  padding: calc(var(--ss-space) * .33) 0;
}
.ssb-checkout .ss-totals__k {
  color: var(--ss-color-muted);
}
.ssb-checkout .ss-totals__disc {
  color: var(--ss-color-link);
  font-weight: 600;
}
.ssb-checkout .ss-totals__disc .ss-totals__k {
  color: var(--ss-color-link);
}
.ssb-checkout .ss-totals__grand {
  border-top: 1px solid var(--ss-color-line);
  padding-top: calc(var(--ss-space) * .78);
  margin-top: calc(var(--ss-space) * .22);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ss-color-ink);
}
.ssb-checkout .ss-totals__fine {
  font-size: .67rem;
  color: var(--ss-color-muted);
  margin-top: calc(var(--ss-space) * .33);
}

/* ---- Pay button (shared .ss-pay; accent background pairs with
        on-brand text — an intentional exception from the ink/surface
        pairing used elsewhere, since this background is the brand
        accent, not ink) ---- */
.ssb-checkout .ss-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
  border: 0;
  border-radius: 999px;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.ssb-checkout .ss-pay::after {
  content: '\2192';
  font-weight: 700;
}
.ssb-checkout .ss-pay:hover {
  transform: translateY(-2px);
}

/* ---- Fine print, assurance row, back link ---- */
.ssb-checkout__paynote {
  text-align: center;
  font-size: .69rem;
  color: var(--ss-color-muted);
  margin-top: calc(var(--ss-space) * .78);
  line-height: 1.6;
}
.ssb-checkout__paynote strong {
  color: var(--ss-color-ink);
}
.ssb-checkout__assure {
  display: flex;
  gap: var(--ss-space);
  justify-content: center;
  margin-top: calc(var(--ss-space) * .78);
  font-size: .69rem;
  font-weight: 600;
  color: var(--ss-color-muted);
}
.ssb-checkout__back {
  display: block;
  text-align: center;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .75rem;
  color: var(--ss-color-muted);
  text-decoration: none;
  margin-top: calc(var(--ss-space) * 1);
}
.ssb-checkout__back:hover {
  color: var(--ss-color-ink);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ssb-checkout__layout {
    grid-template-columns: 1fr;
  }
  .ssb-checkout__summary {
    position: static;
  }
}
@media (max-width: 540px) {
  .ssb-checkout .ss-steps {
    font-size: .62rem;
  }
  .ssb-checkout .ss-steps__item:not(:last-child)::after {
    width: 22px;
  }
}

/* =====================================================================
   Checkout outcome pages — Success.cshtml / Failed.cshtml partials
   Class names: ssb-outcome* (shared by _SuccessBold + _FailedBold)
   ===================================================================== */
.ssb-outcome {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(var(--ss-space) * 4) calc(var(--ss-space) * 1.78) calc(var(--ss-space) * 5.56);
  text-align: center;
}
.ssb-outcome__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  color: var(--ss-color-ink);
  margin-bottom: calc(var(--ss-space) * 1.78);
}

/* ---- Card (order line / null-model fallback / note copy) ---- */
.ssb-outcome__card {
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.28);
  padding: calc(var(--ss-space) * 1.56);
  margin-bottom: calc(var(--ss-space) * 1.78);
  text-align: left;
}
.ssb-outcome__detail {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ss-color-ink);
  margin: 0 0 calc(var(--ss-space) * .89) 0;
}
.ssb-outcome__fallback {
  font-size: .95rem;
  color: var(--ss-color-muted);
  margin: 0 0 calc(var(--ss-space) * .89) 0;
}
.ssb-outcome__note {
  font-size: .78rem;
  color: var(--ss-color-muted);
  margin: 0;
}

/* ---- Actions (Failed page: retry + cancel; shared .ss-pay button
        reused here — accent background pairs with on-brand text) ---- */
.ssb-outcome__actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ss-space) * .67);
  margin-bottom: calc(var(--ss-space) * 1.78);
}
.ssb-outcome .ss-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
  border: 0;
  border-radius: 999px;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.ssb-outcome .ss-pay::after {
  content: '\2192';
  font-weight: 700;
}
.ssb-outcome .ss-pay:hover {
  transform: translateY(-2px);
}
.ssb-outcome__cancel-form {
  display: block;
}
.ssb-outcome__cancel {
  display: block;
  width: 100%;
  padding: calc(var(--ss-space) * .67) 0;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .78rem;
  color: var(--ss-color-danger);
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}
.ssb-outcome__cancel:hover {
  opacity: .82;
}

/* ---- Continue-shopping / return-to-shop CTA (shared accent-pill idiom) ---- */
.ssb-outcome__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .88rem;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.35);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  min-height: 44px;
}
.ssb-outcome__cta:hover {
  transform: translateY(-2px);
}

/* ---- Responsive ---- */
@media (max-width: 540px) {
  .ssb-outcome {
    padding-top: calc(var(--ss-space) * 2.22);
    padding-bottom: calc(var(--ss-space) * 3.33);
  }
}

/* =====================================================================
   Offers page — Views/Offers/Index.cshtml dispatcher + _OffersBold
   Class names: ssb-offers* (page shell) + shared .ss-offer*/.ss-promo__chip
   structures (descendant-scoped under .ssb-offers, card+shadow register —
   shadow value reused verbatim from .ssb-outcome__card)
   ===================================================================== */
.ssb-offers {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--ss-space) * 2) calc(var(--ss-space) * 1.11) calc(var(--ss-space) * 5.56);
}
.ssb-offers__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ss-color-ink);
  margin-bottom: calc(var(--ss-space) * 1.78);
}

/* ---- Card grid (shared .ss-offer* structures) ---- */
.ssb-offers .ss-offer-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--ss-space) * 1.11);
}
.ssb-offers .ss-offer {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ss-space) * .89);
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.28);
  padding: calc(var(--ss-space) * 1.33);
}
.ssb-offers .ss-offer__info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ss-space) * .28);
}
.ssb-offers .ss-offer__headline {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ss-color-ink);
}
.ssb-offers .ss-offer__value {
  font-size: .9rem;
  color: var(--ss-color-muted);
}
.ssb-offers .ss-offer__expiry {
  font-size: .78rem;
  color: var(--ss-color-muted);
}
.ssb-offers .ss-promo__chip {
  display: inline-block;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ss-color-link);
  margin-top: calc(var(--ss-space) * .28);
}
.ssb-offers .ss-offer__apply-form {
  margin-top: auto;
}
.ssb-offers .ss-offer__apply {
  display: block;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--ss-radius);
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.ssb-offers .ss-offer__apply:hover {
  opacity: .88;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .ssb-offers .ss-offer-list {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile nav drawer skin + header reflow (Task 3) ---- */
@media (max-width:859.98px){
  .ssb-hdr .ssb-wrap > nav[aria-label="Primary"],
  .ssb-hdr .ssb-search {
    display: none;
  }
  .ssb-hdr .ss-drawer{background:var(--ss-color-ink,#141922);color:#fff;box-shadow:-16px 0 40px -20px rgba(0,0,0,.6)}
  .ssb-hdr .ss-drawer a{color:#fff}
  .ssb-hdr .ss-drawer .ssb-search{display:flex;width:100%}
  .ssb-icons{margin-left:auto}

  /* Content reflow (Task 3 follow-up: eliminate 390px overflow) */
  .ssb-home-quotes{grid-template-columns:1fr}
  .ssb-foot-grid{grid-template-columns:1fr 1fr}
  .ssb-home-news__form{flex-wrap:wrap;min-width:0;width:100%}
}

/* ---- Save control (PDP wishlist toggle, Task 9) ---- */
.ss-save button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
  border:1.5px solid var(--ss-color-ink,#141922);border-radius:999px;background:transparent;
  color:var(--ss-color-ink,#141922);font-weight:600;cursor:pointer}
.ss-save button[aria-pressed="true"]{color:#b42318;border-color:#b42318}

/* ---- Wishlist page (Task 10) ---- */
.ssb-wishlist {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--ss-space) * 2) calc(var(--ss-space) * 1.11) calc(var(--ss-space) * 5.56);
}
.ssb-wishlist__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ss-color-ink);
  margin-bottom: calc(var(--ss-space) * 1.56);
}
.ssb-wishlist .ssb-card__cart-form {
  margin-top: calc(var(--ss-space) * .67);
}
.ssb-wishlist .ssb-card__cart-form .ss-btn {
  width: 100%;
  text-align: center;
}

/* ---- Empty state (shared markup, per-template skin) ---- */
.ss-empty{padding:48px 0;text-align:center}
.ss-empty__lead{font-size:1.4rem;font-weight:700;margin:0 0 6px}
.ss-empty .ss-btn{margin-top:16px}

/* =====================================================================
   Bold PDP reviews section — .ssb-reviews* / .ssb-review-form* / .ssb-star-input*
   (Task 5: PDP reviews section + write form)
   ===================================================================== */

.ssb-reviews {
  padding: calc(var(--ss-space) * 1.56) 0 calc(var(--ss-space) * 5.56);
  border-top: 1px solid var(--ss-color-line);
}
.ssb-reviews__heading {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  margin: 0 0 calc(var(--ss-space) * 1.56) 0;
  color: var(--ss-color-ink);
}
.ssb-reviews__layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: calc(var(--ss-space) * 2.22);
  align-items: start;
}

/* ---- Summary card: average + 5-to-1 distribution bars ---- */
.ssb-reviews__summary {
  background: var(--ss-color-surface);
  border-radius: var(--ss-radius);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.30);
  padding: calc(var(--ss-space) * 1.33);
  position: sticky;
  top: calc(var(--ss-space) * 2.22);
}
.ssb-reviews__avg {
  text-align: center;
  padding-bottom: calc(var(--ss-space) * 1.11);
  margin-bottom: calc(var(--ss-space) * 1.11);
  border-bottom: 1px solid var(--ss-color-line);
}
.ssb-reviews__avg-num {
  display: block;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ss-color-ink);
}
.ssb-reviews__avg-stars {
  display: block;
  color: var(--ss-color-link);
  font-size: 1.13rem;
  letter-spacing: 2px;
  margin: calc(var(--ss-space) * .44) 0;
}
.ssb-reviews__avg-count {
  display: block;
  color: var(--ss-color-muted);
  font-size: .81rem;
}
.ssb-reviews__dist-row {
  display: grid;
  grid-template-columns: 14px 1fr 22px;
  align-items: center;
  gap: calc(var(--ss-space) * .5);
  margin-bottom: calc(var(--ss-space) * .44);
  font-size: .78rem;
  color: var(--ss-color-muted);
}
.ssb-reviews__dist-label {
  text-align: right;
}
.ssb-reviews__dist-count {
  text-align: right;
}
/* <progress> renders the proportional fill natively — no inline styles needed */
.ssb-reviews__dist-bar {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-color-surface-2);
}
.ssb-reviews__dist-bar::-webkit-progress-bar {
  background: var(--ss-color-surface-2);
  border-radius: 999px;
}
.ssb-reviews__dist-bar::-webkit-progress-value {
  background: var(--ss-color-brand);
  border-radius: 999px;
}
.ssb-reviews__dist-bar::-moz-progress-bar {
  background: var(--ss-color-brand);
  border-radius: 999px;
}
.ssb-reviews__empty-summary {
  color: var(--ss-color-muted);
  font-size: .88rem;
  margin: 0;
}

/* ---- List + write area column ---- */
.ssb-reviews__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ss-space) * 2.22);
}
.ssb-reviews__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ss-space) * 1.33);
}
.ssb-reviews__empty {
  color: var(--ss-color-muted);
  font-size: .94rem;
}
.ssb-reviews__item {
  border-bottom: 1px solid var(--ss-color-line);
  padding-bottom: calc(var(--ss-space) * 1.33);
}
.ssb-reviews__item-head {
  display: flex;
  align-items: center;
  gap: calc(var(--ss-space) * .78);
  margin-bottom: calc(var(--ss-space) * .56);
}
.ssb-reviews__item-stars {
  color: var(--ss-color-link);
  letter-spacing: 1px;
}
.ssb-reviews__item-title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.06rem;
  margin: 0 0 calc(var(--ss-space) * .33) 0;
  color: var(--ss-color-ink);
}
.ssb-reviews__item-body {
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ss-color-ink);
  margin: 0 0 calc(var(--ss-space) * .56) 0;
}
.ssb-reviews__item-meta {
  font-size: .78rem;
  color: var(--ss-color-muted);
  margin: 0;
}

/* ---- Contextual write area ---- */
.ssb-reviews__write {
  background: var(--ss-color-surface-2);
  border-radius: var(--ss-radius);
  padding: calc(var(--ss-space) * 1.33);
}
.ssb-reviews__write-heading {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.13rem;
  margin: 0 0 calc(var(--ss-space) * .78) 0;
  color: var(--ss-color-ink);
}
.ssb-reviews__write-heading + .ssb-reviews__write-heading {
  margin-top: calc(var(--ss-space) * 1.11);
}
.ssb-reviews__gate {
  font-size: .94rem;
  color: var(--ss-color-muted);
  margin: 0;
}
.ssb-reviews__signin {
  color: var(--ss-color-link);
  font-weight: 600;
}

/* ---- Review write form ---- */
.ssb-review-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 calc(var(--ss-space) * 1.11) 0;
}
.ssb-review-form legend {
  font-weight: 700;
  font-size: .88rem;
  padding: 0 0 calc(var(--ss-space) * .56) 0;
  color: var(--ss-color-ink);
}
.ssb-review-form .ss-field textarea {
  min-height: 120px;
  resize: vertical;
}
.ssb-review-form__submit {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-color-brand);
  color: var(--ss-color-on-brand);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .88rem;
  padding: 0 calc(var(--ss-space) * 1.33);
  cursor: pointer;
}
.ssb-review-form__submit:hover {
  opacity: .9;
}

/* ---- Star rating input: a fieldset of 5 radios with visible text labels
        ("1 star" … "5 stars"). Native inputs stay VISIBLE (not clipped/hidden)
        so keyboard focus, the global focus-visible ring, and screen readers
        all get the real control — no JS, no hidden-input tricks. The pill
        highlight on :checked is a progressive-enhancement extra. ---- */
.ssb-star-input {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ss-space) * .44);
}
.ssb-star-input__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 calc(var(--ss-space) * .67);
  border: 1.5px solid var(--ss-color-line);
  border-radius: 999px;
  background: var(--ss-color-surface);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ss-color-ink);
}
.ssb-star-input__opt:has(input:checked) {
  background: var(--ss-color-ink);
  border-color: var(--ss-color-ink);
  color: var(--ss-color-surface);
}
.ssb-star-input__glyph {
  color: var(--ss-color-link);
}
.ssb-star-input__opt:has(input:checked) .ssb-star-input__glyph {
  color: inherit;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ssb-reviews__layout {
    grid-template-columns: 1fr;
  }
  .ssb-reviews__summary {
    position: static;
  }
}

/* =====================================================================
   Bold PDP related products — .ssb-related* ("You may also like")
   (Task 4: related products row)
   ===================================================================== */

.ssb-related {
  padding: calc(var(--ss-space) * 2.22) 0 calc(var(--ss-space) * 5.56);
  border-top: 1px solid var(--ss-color-line);
}
.ssb-related__heading {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  margin: 0 0 calc(var(--ss-space) * 1.56) 0;
  color: var(--ss-color-ink);
}

/* =====================================================================
   Bold account area — .ssb-acct* (Task 5: shell + subnav)
   ===================================================================== */

.ssb-acct__nav {
  border: 2px solid var(--ss-color-ink);
  border-radius: var(--ss-radius);
  padding: calc(var(--ss-space) * .4);
  background: var(--ss-color-surface);
}
.ssb-acct__navlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--ss-space) * .2);
}
.ssb-acct__logout {
  margin: 0;
}
.ssb-acct__navlink {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 calc(var(--ss-space) * .6);
  border: none;
  border-radius: calc(var(--ss-radius) - 2px);
  background: none;
  color: var(--ss-color-ink);
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.ssb-acct__navlink:hover {
  background: var(--ss-color-surface-2);
}
.ssb-acct__navlink:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}
.ssb-acct__navlink[aria-current="page"] {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  font-weight: 700;
}
.ssb-acct__navlink[aria-current="page"]:hover {
  background: var(--ss-color-ink);
}

@media (max-width: 859.98px) {
  .ssb-acct__navlist {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ssb-acct__navlink {
    padding: 0 calc(var(--ss-space) * .7);
  }
}

/* ---- Bold account pages: headings, order card, quick links (Task 6) ---- */

.ssb-acct__eyebrow {
  font-size: var(--ss-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--ss-color-muted);
  margin: 0 0 calc(var(--ss-space) * .3);
}
.ssb-acct__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ss-color-ink);
}
.ssb-acct__section {
  margin-bottom: calc(var(--ss-space) * 2.2);
}
.ssb-acct__h2 {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 calc(var(--ss-space) * .8);
  color: var(--ss-color-ink);
}

/* Most-recent order card */
.ssb-acct__order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--ss-space) * .3) var(--ss-space);
  align-items: center;
  padding: var(--ss-space);
  border: 2px solid var(--ss-color-ink);
  border-radius: var(--ss-radius);
  background: var(--ss-color-surface);
  color: var(--ss-color-ink);
  text-decoration: none;
}
.ssb-acct__order:hover {
  background: var(--ss-color-surface-2);
}
.ssb-acct__order:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}
.ssb-acct__order-no {
  font-family: var(--ss-font-display);
  font-weight: 700;
}
.ssb-acct__order-meta {
  grid-column: 1;
  font-size: .88rem;
  color: var(--ss-color-muted);
}
.ssb-acct__order-total {
  grid-column: 2;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.ssb-acct__more {
  margin: calc(var(--ss-space) * .7) 0 0;
  font-size: .9rem;
}

/* Quick links */
.ssb-acct__quick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ss-space);
}
.ssb-acct__quicklink {
  display: block;
  min-height: 44px;
  padding: var(--ss-space);
  border: 2px solid var(--ss-color-ink);
  border-radius: var(--ss-radius);
  background: var(--ss-color-surface);
  color: var(--ss-color-ink);
  text-decoration: none;
}
.ssb-acct__quicklink:hover {
  background: var(--ss-color-surface-2);
}
.ssb-acct__quicklink:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}
.ssb-acct__quicklink-title {
  display: block;
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: calc(var(--ss-space) * .3);
}
.ssb-acct__quicklink-note {
  display: block;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ss-color-muted);
}

/* ---- Bold order history + order detail (Task 7) ---- */

.ssb-acct__back {
  margin: 0 0 var(--ss-space);
  font-size: .9rem;
}
.ssb-orderhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ss-space);
  flex-wrap: wrap;
}
.ssb-orderhead__date {
  margin: calc(var(--ss-space) * .3) 0 0;
  font-size: .9rem;
  color: var(--ss-color-muted);
}

/* Order history table (CSS grid; collapses to cards on mobile) */
.ssb-ordertable {
  border: 2px solid var(--ss-color-ink);
  border-radius: var(--ss-radius);
  overflow: hidden;
}
.ssb-ordertable__head,
.ssb-ordertable__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr .6fr .9fr .7fr;
  gap: var(--ss-space);
  align-items: center;
  padding: calc(var(--ss-space) * .7) var(--ss-space);
}
.ssb-ordertable__row {
  border-top: 1px solid var(--ss-color-line);
}
.ssb-ordertable__head {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  font-size: var(--ss-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
.ssb-ordertable__id {
  font-family: var(--ss-font-display);
  font-weight: 700;
}
.ssb-ordertable__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ssb-ordertable__action {
  text-align: right;
}
.ssb-ordertable__action a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* Order line items */
.ssb-orderlines {
  border: 2px solid var(--ss-color-ink);
  border-radius: var(--ss-radius);
  overflow: hidden;
}
.ssb-orderlines__head,
.ssb-orderlines__row {
  display: grid;
  grid-template-columns: 2.4fr .6fr 1fr 1fr;
  gap: var(--ss-space);
  align-items: center;
  padding: calc(var(--ss-space) * .7) var(--ss-space);
}
.ssb-orderlines__row {
  border-top: 1px solid var(--ss-color-line);
}
.ssb-orderlines__head {
  background: var(--ss-color-ink);
  color: var(--ss-color-surface);
  font-size: var(--ss-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
.ssb-orderlines__name {
  font-family: var(--ss-font-display);
  font-weight: 700;
}
.ssb-orderlines__variant {
  display: block;
  font-family: var(--ss-font);
  font-weight: 400;
  font-size: .84rem;
  color: var(--ss-color-muted);
}
.ssb-orderlines__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Money summary */
.ssb-ordersummary {
  margin: 0 0 0 auto;
  max-width: 340px;
}
.ssb-ordersummary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--ss-space);
  padding: calc(var(--ss-space) * .35) 0;
}
.ssb-ordersummary__row dt,
.ssb-ordersummary__row dd {
  margin: 0;
}
.ssb-ordersummary__row dd {
  font-variant-numeric: tabular-nums;
}
.ssb-ordersummary__row--total {
  border-top: 2px solid var(--ss-color-ink);
  margin-top: calc(var(--ss-space) * .35);
  padding-top: calc(var(--ss-space) * .6);
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.ssb-ordertracking {
  margin: 0;
}
.ssb-ordertracking__num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@media (max-width: 640px) {
  .ssb-ordertable__head,
  .ssb-orderlines__head {
    display: none;
  }
  .ssb-ordertable__row,
  .ssb-orderlines__row {
    grid-template-columns: 1fr;
    gap: calc(var(--ss-space) * .2);
    padding: var(--ss-space);
  }
  .ssb-ordertable__row [data-label],
  .ssb-orderlines__row [data-label] {
    display: flex;
    justify-content: space-between;
    gap: var(--ss-space);
    text-align: left;
  }
  .ssb-ordertable__row [data-label]::before,
  .ssb-orderlines__row [data-label]::before {
    content: attr(data-label);
    font-size: var(--ss-fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--ss-color-muted);
  }
  .ssb-ordertable__num,
  .ssb-orderlines__num {
    text-align: left;
  }
  .ssb-ordertable__action {
    text-align: left;
  }
}

/* ---- Bold profile & settings (Task 8) ---- */

.ssb-settings {
  max-width: 460px;
  margin-bottom: calc(var(--ss-space) * 2.4);
  padding: calc(var(--ss-space) * 1.2);
  border: 2px solid var(--ss-color-ink);
  border-radius: var(--ss-radius);
  background: var(--ss-color-surface);
}
.ssb-settings > .ssb-acct__h2 {
  margin-top: 0;
}
.ssb-settings__note {
  margin: 0 0 var(--ss-space);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ss-color-muted);
}
.ssb-settings__form {
  margin: 0;
}
.ssb-settings__readonly {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--ss-space);
}
.ssb-settings__readonly-label {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ssb-settings__readonly-value {
  padding: 8px 10px;
  border: 2px solid var(--ss-color-line);
  border-radius: var(--ss-radius);
  background: var(--ss-color-surface-2);
  color: var(--ss-color-muted);
}
.ssb-settings__pending {
  font-size: .85rem;
  color: var(--ss-color-warning);
}

/* ---- Bold auth card (Task 9) ---- */

.ssb-auth {
  padding: calc(var(--ss-space) * 2);
  border: 3px solid var(--ss-color-ink);
  border-radius: var(--ss-radius);
  background: var(--ss-color-surface);
  box-shadow: 8px 8px 0 0 var(--ss-color-ink);
}
.ssb-auth .ss-auth__title {
  font-family: var(--ss-font-display);
  font-weight: 700;
  font-size: var(--ss-fs-h2);
  letter-spacing: -.02em;
  color: var(--ss-color-ink);
}
.ssb-auth .ss-auth__links {
  padding-top: var(--ss-space);
  border-top: 2px solid var(--ss-color-line);
}

/* ---- Sale price badge (Task 2) ---- */
body.bold .ss-price__badge {
  font-family: var(--ss-font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---- "From" price prefix (product variants slice 3) ----
   A qualifier, not part of the number. Bold's card prices run in the heavy display face, so this
   drops to the body face at the small muted step the template uses for meta text — otherwise
   "From 54.99" reads as one display-weight figure. */
body.bold .ss-price__from {
  font-family: var(--ss-font);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ss-color-muted);
}

/* =====================================================================
   Phone pass (≤599px). main already carries the page gutter (body.shop main
   { padding: var(--ss-space) }), and every section's .ssb-wrap added its own
   ~34px on top — ~53px a side, a third of a 375px screen gone to margin.
   ===================================================================== */
@media (max-width: 599.98px) {
  body.bold main .ssb-wrap {
    padding-left: 0;
    padding-right: 0;
  }
  /* …except inside a painted band, where the band's edge is the edge the text needs room from. */
  body.bold main :is(.ssb-home-hero, .ssb-home-values, .ssb-home-news, .ssb-listing-banner) .ssb-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* The store name wrapped to three lines and spilled out of the 74px bar. */
  .ssb-nav { gap: calc(var(--ss-space) * .6); }
  .ssb-logo { min-width: 0; flex: 0 1 auto; font-size: 1.05rem; }
  .ssb-logo > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ssb-logo__dot { flex: none; }
  .ssb-logo img { max-width: 100%; height: auto; max-height: 28px; }
  .ssb-icons { flex: none; }

  /* Collection tiles: one per row — two ~110px columns cut the names off. */
  .ssb-home-colls { grid-template-columns: 1fr; }
  .ssb-home-coll { height: 220px; }
  .ssb-home-coll__media .ss-ph { min-height: 220px; }

  /* Section heads: the "View all →" link drops under the title instead of squeezing it. */
  .ssb-home-sec-head { flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
  .ssb-home-sec-more { white-space: nowrap; }

  /* Listing: a 260px banner and one-control-per-line filters put the first product below the
     fold. Shorter banner; Sort and "In stock only" share a row, price spans the full width. */
  .ssb-listing-banner { height: 150px; }
  .ssb-filters__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: calc(var(--ss-space) * .8) calc(var(--ss-space) * .8);
  }
  .ssb-filters__form .ssb-filters__select { width: 100%; }
  .ssb-filters__form > .ssb-filters__field:first-of-type { grid-row: 1; grid-column: 1; }
  .ssb-filters__check { grid-row: 1; grid-column: 2; flex-direction: row; align-items: center; padding-bottom: .7rem; }
  .ssb-filters__price { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .ssb-filters__form [data-ss-apply] { grid-column: 1 / -1; }

  /* Cart: the page had its own ~34px gutter inside main's, and its single column was sized to
     its content (1fr = minmax(auto, 1fr)), so a line item pushed the page 4px wider than a
     375px phone and ~60px wider than a 320px one. */
  .ssb-cartpage { padding-left: 0; padding-right: 0; }
  .ssb-cartpage__layout { grid-template-columns: minmax(0, 1fr); }

  /* Footer columns and the dark story panel: fit a 320px phone. */
  .ssb-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--ss-space) * 1.2); }
  .ssb-foot-grid a, .ssb-foot-grid h4 { overflow-wrap: anywhere; }
  .ssb-home-ed__text { padding: calc(var(--ss-space) * 1.6); }

  /* Product page buy box: full-width actions the thumb can hit, the size-guide link on its own
     line (inline it read as a fourth size choice), and a pincode box wide enough for 6 digits. */
  .ss-variants__axis .ss-size-guide__open { display: block; margin: 0 0 .5rem; }
  .ssb-pd { gap: calc(var(--ss-space) * 1.4); }
  .ssb-pd__qty-row { width: 100%; }
  .ssb-pd__add-form { display: flex; gap: calc(var(--ss-space) * .6); width: 100%; align-items: stretch; }
  .ssb-pd__add-form .ss-btn { flex: 1 1 auto; }
  .ssb-pd__secondary, .ssb-pd__secondary form, .ssb-pd__secondary .ss-btn { width: 100%; }
  .ss-save button { width: 100%; justify-content: center; }
  .ss-delivery__form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .ss-delivery__label { flex-basis: 100%; }
  .ss-delivery__input { flex: 1 1 8rem; min-width: 0; }
}

/* Smallest phones (≤380px, e.g. 320px wide): the last three things wider than the screen. */
@media (max-width: 380px) {
  /* Cart line: price / quantity / remove move under the name instead of a third column. */
  .ssb-cartpage .ss-line { grid-template-columns: 64px minmax(0, 1fr); }
  .ssb-cartpage .ss-line__media { width: 64px; height: 64px; }
  .ssb-cartpage .ss-line__right {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem .75rem;
  }
  /* Checkout steps: shorter connectors so all three labels fit on one line. */
  .ssb-checkout .ss-steps__item:not(:last-child)::after { width: 14px; margin: 0 4px; }
  .ssb-checkout .ss-steps__item { gap: 4px; }
  /* Price slider: the max handle's 44px touch target overhangs the track end by a few px. */
  .ssb-listing-filters { overflow-x: clip; }
}