/** Shopify CDN: Minification failed

Line 5269:2 Unexpected "{"
Line 5269:3 Expected identifier but found "%"
Line 5270:28 Unexpected "12px"
Line 5275:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:ssc-blend-gallery (INDEX:52) */
/* Type comes from the --ssc-fs-* tokens (assets/ssc-tokens.css, overridden per
   page by sections/ssc-header.liquid from Theme settings -> SSC B2B).
   Sizes are px, never rem — 1rem is 10px in this theme. */
.ssc-blend-gallery {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px var(--ssc-page-pad, 32px) 0;
}
.ssc-blend-gallery__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.ssc-blend-gallery__heading {
  margin: 0;
  font-size: var(--ssc-fs-eyebrow, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: 500;
}
.ssc-blend-gallery__nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.ssc-blend-gallery__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.28));
  border-radius: var(--ssc-radius, 2px);
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.ssc-blend-gallery__arrow svg {
  width: 16px;
  height: 16px;
}
.ssc-blend-gallery__arrow:hover {
  opacity: 0.65;
}
.ssc-blend-gallery__arrow[disabled] {
  opacity: 0.25;
  cursor: default;
}
.ssc-blend-gallery__viewport {
  overflow: hidden;
}
.ssc-blend-gallery__track {
  display: flex;
  gap: 12px;
  scroll-behavior: smooth;
  overflow-x: auto;
  /* Arrows are the interface; the native scrollbar would duplicate them.
     Swipe still works on touch. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.ssc-blend-gallery__track::-webkit-scrollbar {
  display: none;
}
.ssc-blend-gallery__tile {
  flex: 0 0 auto;
  width: var(--ssc-blend-gallery-w, 200px);
  display: block;
  text-decoration: none;
  color: inherit;
}
.ssc-blend-gallery__img {
  display: block;
  width: 100%;
  /* No crop — the photography is already framed consistently. */
  height: auto;
  border-radius: var(--ssc-radius, 2px);
  background: rgba(var(--color-foreground), 0.04);
}
.ssc-blend-gallery__caption {
  display: block;
  margin-top: 6px;
  font-size: var(--ssc-fs-body-sm, 12px);
  opacity: 0.7;
  line-height: 1.3;
}
.ssc-blend-gallery__tile:hover .ssc-blend-gallery__caption {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ssc-blend-gallery__track {
    scroll-behavior: auto;
  }
}
@media screen and (max-width: 749px) {
  .ssc-blend-gallery {
    padding: 16px 16px 0;
  }
  .ssc-blend-gallery__tile {
    width: min(var(--ssc-blend-gallery-w, 200px), 45vw);
  }
}
/* END_SECTION:ssc-blend-gallery */

/* START_SECTION:ssc-blend-nav (INDEX:54) */
/* Mirrors ssc-browse-jumpnav.liquid — same label tier, same sticky bar, so the
   two navs read as one system. Type from the --ssc-fs-* tokens; px, never rem. */
.ssc-blend-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 24px;
  padding: 16px 32px;
  background: var(--ssc-bg-app);
  border-top: var(--ssc-border-default);
  border-bottom: var(--ssc-border-default);
  font-family: var(--ssc-font);
  font-size: var(--ssc-fs-label, 12px);
  letter-spacing: 0.25em;
  font-weight: 700;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  /* Trade caps an open megamenu at z-index 4 (see ssc-browse-jumpnav for the
     full explanation). 1 is enough to sit above page content. */
  z-index: 1;
}
.ssc-blend-nav__label {
  color: var(--ssc-text-hint);
  font-weight: 300;
  margin-right: -8px;
}
.ssc-blend-nav__tab {
  color: var(--ssc-text-muted);
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.ssc-blend-nav__tab:hover {
  color: var(--ssc-text-primary);
}
.ssc-blend-nav__tab--active {
  color: var(--ssc-text-primary);
  border-bottom-color: var(--ssc-text-primary);
  cursor: default;
}
/* Pushed to the end and de-emphasised — it leaves the set rather than moving
   within it. */
.ssc-blend-nav__tab--all {
  margin-left: auto;
  color: var(--ssc-text-hint);
}
@media screen and (max-width: 749px) {
  .ssc-blend-nav {
    gap: 16px;
    padding: 12px 16px;
    letter-spacing: 0.16em;
  }
  .ssc-blend-nav__tab--all {
    margin-left: 0;
  }
}
/* END_SECTION:ssc-blend-nav */

/* START_SECTION:ssc-blend-order (INDEX:55) */
/* Type comes from the --ssc-fs-* tokens (assets/ssc-tokens.css, overridden per
   page by sections/ssc-header.liquid from Theme settings -> SSC B2B), so this
   page retunes with the rest of the store instead of drifting from it.

   Sizes are px, never rem: layout/theme.liquid sets
   html { font-size: calc(var(--font-body-scale) * 62.5%) }, so 1rem is 10px
   here, not 16px — rem values written with 16px in mind render ~40% small. */
.ssc-blend {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px var(--ssc-page-pad, 32px) 80px;
}
.ssc-blend__eyebrow {
  font-size: var(--ssc-fs-eyebrow, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 8px;
}
.ssc-blend__title {
  /* 17px+ is display type — hardcoded on purpose, per ssc-tokens.css. */
  margin: 0 0 6px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
}
.ssc-blend__subtitle {
  margin: 0 0 12px;
  font-size: var(--ssc-fs-lead, 16px);
  opacity: 0.8;
}
.ssc-blend__intro {
  margin: 0;
  max-width: 52ch;
  font-size: var(--ssc-fs-body-md, 14px);
  opacity: 0.7;
  line-height: 1.55;
}
.ssc-blend__rows {
  margin-top: 40px;
  border-top: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.2));
}
.ssc-blend__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.2));
}
.ssc-blend__thumb {
  display: block;
  width: 96px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--ssc-radius, 2px);
  background: rgba(var(--color-foreground), 0.04);
}
.ssc-blend__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ssc-blend__thumb-empty {
  display: block;
  width: 100%;
  height: 100%;
}
.ssc-blend__row-title {
  margin: 0 0 2px;
  font-size: var(--ssc-fs-body-lg, 15px);
  line-height: 1.3;
}
.ssc-blend__row-title a {
  color: inherit;
  text-decoration: none;
}
.ssc-blend__row-title a:hover {
  text-decoration: underline;
}
.ssc-blend__row-meta {
  min-height: 1.1em;
  font-size: var(--ssc-fs-body-sm, 12px);
  opacity: 0.6;
  margin-bottom: 10px;
}
.ssc-blend__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
}
.ssc-blend__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ssc-blend__field-label {
  font-size: var(--ssc-fs-eyebrow, 11px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.6;
}
.ssc-blend__select,
.ssc-blend__qty {
  font-family: inherit;
  font-size: var(--ssc-fs-body, 13px);
  padding: 7px 9px;
  border: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.28));
  border-radius: var(--ssc-radius, 2px);
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  max-width: 100%;
}
.ssc-blend__select {
  min-width: 136px;
}
.ssc-blend__field--qty .ssc-blend__qty {
  width: 72px;
}
.ssc-blend__qty.has-val {
  border: var(--ssc-border-emphasis, 1px solid rgb(var(--color-foreground)));
  font-weight: 600;
}
.ssc-blend__select:disabled,
.ssc-blend__qty:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ssc-blend__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 112px;
  text-align: right;
}
.ssc-blend__price-label {
  font-size: var(--ssc-fs-eyebrow, 11px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.6;
}
.ssc-blend__price-val {
  font-size: var(--ssc-fs-body-md, 14px);
  font-variant-numeric: tabular-nums;
}
.ssc-blend__price-line {
  font-size: var(--ssc-fs-body-sm, 12px);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.ssc-blend__row--unavailable .ssc-blend__price-val {
  opacity: 0.45;
  text-decoration: line-through;
}
/* "See this design in All Roses" — the toggle stays invisible until the row is
   hovered or the button is focused, so a page of rows doesn't read as a page of
   buttons. It is always present in the DOM and always reachable by keyboard. */
.ssc-blend__roses {
  margin: -8px 0 0 116px;
  padding-bottom: 12px;
  border-bottom: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.12));
}
.ssc-blend__roses-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ssc-fs-eyebrow, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ssc-text-muted);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.ssc-blend__row:hover + .ssc-blend__roses .ssc-blend__roses-toggle,
.ssc-blend__roses:hover .ssc-blend__roses-toggle,
.ssc-blend__roses-toggle:focus-visible,
.ssc-blend__roses-toggle[aria-expanded="true"] {
  opacity: 1;
}
.ssc-blend__roses-toggle:hover { color: rgb(var(--color-foreground)); }
.ssc-blend__roses-chev {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}
.ssc-blend__roses-toggle[aria-expanded="true"] .ssc-blend__roses-chev {
  transform: rotate(180deg);
}
.ssc-blend__roses-panel[hidden] { display: none; }
.ssc-blend__roses-panel {
  margin-top: 8px;
  padding-left: 16px;
  border-left: 2px solid rgba(var(--color-foreground), 0.15);
}
/* Siblings sit inside the panel, so they drop the row's own bottom rule. */
.ssc-blend__row--sibling { border-bottom: 0; padding: 12px 0; }

.ssc-blend__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 24px;
  padding: 16px 0;
  background: rgb(var(--color-background));
  border-top: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.2));
  /* Trade caps an open megamenu at z-index 4; stay below it. */
  z-index: 3;
}
.ssc-blend__totals {
  display: flex;
  gap: 32px;
  margin-right: auto;
}
.ssc-blend__totals-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ssc-blend__totals-label {
  font-size: var(--ssc-fs-eyebrow, 11px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.6;
}
.ssc-blend__totals-val {
  font-size: var(--ssc-fs-body-lg, 15px);
  font-variant-numeric: tabular-nums;
}
.ssc-blend__totals-val--accent {
  font-weight: 600;
}
.ssc-blend__btn {
  font-family: inherit;
  font-size: var(--ssc-fs-cta, 13px);
  padding: 12px 24px;
  border: 0;
  border-radius: var(--ssc-radius, 2px);
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  cursor: pointer;
}
.ssc-blend__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.ssc-blend__error {
  margin-top: 12px;
  text-align: right;
  color: rgba(180, 30, 30, 1);
  font-size: var(--ssc-fs-body-sm, 12px);
}
@media screen and (max-width: 749px) {
  .ssc-blend {
    padding: 32px 16px 64px;
  }
  .ssc-blend__row {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
  }
  .ssc-blend__thumb {
    width: 72px;
  }
  .ssc-blend__price {
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    text-align: left;
    gap: 8px;
  }
  .ssc-blend__select {
    min-width: 112px;
  }
  /* "See this design in All Roses" — the toggle stays invisible until the row is
   hovered or the button is focused, so a page of rows doesn't read as a page of
   buttons. It is always present in the DOM and always reachable by keyboard. */
.ssc-blend__roses {
  margin: -8px 0 0 116px;
  padding-bottom: 12px;
  border-bottom: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.12));
}
.ssc-blend__roses-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ssc-fs-eyebrow, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ssc-text-muted);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.ssc-blend__row:hover + .ssc-blend__roses .ssc-blend__roses-toggle,
.ssc-blend__roses:hover .ssc-blend__roses-toggle,
.ssc-blend__roses-toggle:focus-visible,
.ssc-blend__roses-toggle[aria-expanded="true"] {
  opacity: 1;
}
.ssc-blend__roses-toggle:hover { color: rgb(var(--color-foreground)); }
.ssc-blend__roses-chev {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}
.ssc-blend__roses-toggle[aria-expanded="true"] .ssc-blend__roses-chev {
  transform: rotate(180deg);
}
.ssc-blend__roses-panel[hidden] { display: none; }
.ssc-blend__roses-panel {
  margin-top: 8px;
  padding-left: 16px;
  border-left: 2px solid rgba(var(--color-foreground), 0.15);
}
/* Siblings sit inside the panel, so they drop the row's own bottom rule. */
.ssc-blend__row--sibling { border-bottom: 0; padding: 12px 0; }

.ssc-blend__footer {
    justify-content: space-between;
  }
  .ssc-blend__totals {
    gap: 20px;
  }
}
/* END_SECTION:ssc-blend-order */

/* START_SECTION:ssc-browse-capsules (INDEX:56) */
.ssc-bl-capsules {
    background: var(--ssc-black);
    color: var(--ssc-text-inverse);
    padding: 56px 0;
    margin-top: 64px;
    font-family: var(--ssc-font);
  }
  .ssc-bl-capsules__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
  }
  .ssc-bl-capsules .ssc-bl-section__eyebrow { color: var(--ssc-magenta); }
  .ssc-bl-capsules .ssc-bl-section__title { color: var(--ssc-text-inverse); }
  .ssc-bl-capsules .ssc-bl-section__intro { color: var(--ssc-text-on-dark-muted); }
  .ssc-bl-capsules .ssc-bl-section__meta { color: var(--ssc-text-on-dark-meta); }

  .ssc-bl-cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .ssc-bl-cap-card {
    background: #2a2a2a;
    border-radius: var(--ssc-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .ssc-bl-cap-card:hover { transform: translateY(-2px); }
  .ssc-bl-cap-card__img {
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
  }
  .ssc-bl-cap-card__img-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ssc-bl-cap-card__img-bg--placeholder {
    background: linear-gradient(135deg, #fce8ec 0%, #d4427c 70%, #7a1f3d 100%);
  }
  .ssc-bl-cap-card__concept {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--ssc-magenta);
    color: var(--ssc-text-inverse);
    padding: 4px 10px;
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--ssc-radius);
  }
  .ssc-bl-cap-card__body { padding: 18px 20px 20px; }
  .ssc-bl-cap-card__name {
    font-size: var(--ssc-fs-lead, 16px);
    font-weight: 200;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 6px;
    line-height: 1.2;
    color: var(--ssc-text-inverse);
  }
  .ssc-bl-cap-card__name b { font-weight: 700; }
  .ssc-bl-cap-card__tag {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: #aaa;
    margin: 0 0 14px;
    line-height: 1.5;
  }
  .ssc-bl-cap-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  }
  .ssc-bl-cap-card__styles {
    font-size: var(--ssc-fs-label, 12px);
    color: var(--ssc-text-on-dark-meta);
    font-weight: 300;
    letter-spacing: 0.05em;
  }
  .ssc-bl-cap-card__cta {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--ssc-text-inverse);
    text-transform: uppercase;
  }

  @media (max-width: 900px) {
    .ssc-bl-cap-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .ssc-bl-cap-grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ssc-browse-capsules */

/* START_SECTION:ssc-browse-collections (INDEX:57) */
.ssc-bl-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 32px 24px;
    font-family: var(--ssc-font);
  }
  .ssc-bl-section__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    gap: 24px;
  }
  .ssc-bl-section__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.35em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin: 0 0 8px;
  }
  .ssc-bl-section__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.2;
  }
  .ssc-bl-section__title b { font-weight: 700; }
  .ssc-bl-section__intro {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    letter-spacing: 0.04em;
    margin: 0;
    max-width: 620px;
    line-height: 1.6;
  }
  .ssc-bl-section__meta {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.20em;
    font-weight: 300;
    color: var(--ssc-text-meta);
    text-transform: uppercase;
    white-space: nowrap;
    padding-top: 24px;
  }

  .ssc-bl-collections {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    /* Belt and braces against holes: if a 2-column featured card ever can't fit
       the columns left in its row, dense pulls a later 1-column card up to fill
       the gap rather than leaving a blank slot. No effect when the row packs
       cleanly, so display_order is preserved in the normal case. */
    grid-auto-flow: row dense;
  }
  .ssc-bl-coll-card {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: var(--ssc-text-inverse);
    border-radius: var(--ssc-radius);
    background: linear-gradient(135deg, #d8d8d8 0%, #4a4a4a 100%);
  }
  .ssc-bl-coll-card--featured {
    grid-column: span 2;
    aspect-ratio: 8 / 5;
  }
  .ssc-bl-coll-card__img {
    position: absolute;
    inset: 0;
    transition: transform 0.4s ease;
  }
  .ssc-bl-coll-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ssc-bl-coll-card:hover .ssc-bl-coll-card__img { transform: scale(1.03); }
  .ssc-bl-coll-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
  }
  .ssc-bl-coll-card--featured .ssc-bl-coll-card__overlay { padding: 32px; }
  .ssc-bl-coll-card__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.30em;
    font-weight: 300;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
  }
  .ssc-bl-coll-card__name {
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 4px;
    line-height: 1.1;
  }
  .ssc-bl-coll-card__name b { font-weight: 700; }
  .ssc-bl-coll-card--featured .ssc-bl-coll-card__name { font-size: clamp(20px, 2.5vw, 26px); }
  .ssc-bl-coll-card__tag {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.4;
  }

  /* Light overlay — for pale / high-key images where the dark scrim reads
     heavy. Mirrors the dark treatment's contrast ratios rather than simply
     inverting: the scrim is slightly stronger (0.88 vs 0.7) because dark text
     on a washed-out photo needs more separation than white text does. */
  .ssc-bl-coll-card--light {
    color: var(--ssc-text-primary);
  }
  .ssc-bl-coll-card--light .ssc-bl-coll-card__overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.88) 100%);
  }
  .ssc-bl-coll-card--light .ssc-bl-coll-card__eyebrow {
    color: rgba(0, 0, 0, 0.6);
  }
  .ssc-bl-coll-card--light .ssc-bl-coll-card__name {
    color: var(--ssc-text-primary);
  }
  .ssc-bl-coll-card--light .ssc-bl-coll-card__tag {
    color: rgba(0, 0, 0, 0.75);
  }

  @media (max-width: 900px) {
    .ssc-bl-collections { grid-template-columns: repeat(2, 1fr); }
    .ssc-bl-coll-card--featured { grid-column: auto; aspect-ratio: 4 / 5; }
  }
  @media (max-width: 480px) {
    .ssc-bl-collections { grid-template-columns: 1fr; }
  }
/* END_SECTION:ssc-browse-collections */

/* START_SECTION:ssc-browse-curations (INDEX:58) */
.ssc-bl-section--curations {
    padding: 64px 32px 32px;
  }
  .ssc-bl-cur-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
  }
  .ssc-bl-cur-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }
  .ssc-bl-cur-card__img {
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #d8d8d8, #6a6a6a);
    margin-bottom: 18px;
    transition: transform 0.4s ease;
    overflow: hidden;
    border-radius: var(--ssc-radius);
  }
  .ssc-bl-cur-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ssc-bl-cur-card:hover .ssc-bl-cur-card__img { transform: scale(1.02); }
  .ssc-bl-cur-card__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.30em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .ssc-bl-cur-card__title {
    font-size: 20px;
    font-weight: 200;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 12px;
    line-height: 1.2;
    color: var(--ssc-text-primary);
  }
  .ssc-bl-cur-card__title b { font-weight: 700; }
  .ssc-bl-cur-card__body {
    font-size: var(--ssc-fs-body, 13px);
    line-height: 1.7;
    color: var(--ssc-text-muted);
    font-weight: 300;
    margin: 0 0 16px;
    font-style: italic;
    letter-spacing: 0.02em;
  }
  .ssc-bl-cur-card__body b {
    font-weight: 700;
    font-style: normal;
    color: var(--ssc-text-primary);
  }
  .ssc-bl-cur-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
    padding-top: 12px;
    border-top: var(--ssc-border-default);
  }
  .ssc-bl-cur-card__count {
    color: var(--ssc-text-meta);
    font-weight: 300;
  }

  @media (max-width: 900px) {
    .ssc-bl-cur-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .ssc-bl-cur-grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ssc-browse-curations */

/* START_SECTION:ssc-browse-header (INDEX:59) */
.ssc-bl-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 32px 8px;
    font-family: var(--ssc-font);
  }
  .ssc-bl-header__eyebrow {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.35em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin: 0 0 12px;
  }
  .ssc-bl-header__title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 16px;
    line-height: 1.1;
  }
  .ssc-bl-header__title b { font-weight: 700; }
  .ssc-bl-header__intro {
    font-size: var(--ssc-fs-body-md, 14px);
    line-height: 1.7;
    color: var(--ssc-text-muted);
    font-weight: 300;
    max-width: 620px;
    margin: 0 0 32px;
    letter-spacing: 0.03em;
  }
  .ssc-bl-header__intro b {
    font-weight: 700;
    color: var(--ssc-text-primary);
  }
  .ssc-bl-header__intro p { margin: 0; }
  .ssc-bl-header__intro p + p { margin-top: 1em; }
/* END_SECTION:ssc-browse-header */

/* START_SECTION:ssc-browse-jumpnav (INDEX:60) */
.ssc-bl-jumpnav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px 32px;
    background: var(--ssc-bg-app);
    border-top: var(--ssc-border-default);
    border-bottom: var(--ssc-border-default);
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.25em;
    font-weight: 700;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    /* Must stay below the header group. Trade's base.css puts z-index: 4 on
       every header-group section wrapper, and its reset selector
       (`.section-header ~ .shopify-section-group-header-group`) never matches
       because ssc-header carries `.section-header` on an inner element, not on
       the wrapper. So the open megamenu can be capped at 4 — at the old
       z-index: 10 this bar painted straight through the open panel. Nothing
       else on the browse page is positioned, so 1 is plenty to sit above
       page content. */
    z-index: 1;
    font-family: var(--ssc-font);
  }
  .ssc-bl-jumpnav__tab {
    color: var(--ssc-text-muted);
    cursor: pointer;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
  }
  .ssc-bl-jumpnav__tab--active {
    color: var(--ssc-text-primary);
    border-bottom-color: var(--ssc-text-primary);
  }
  .ssc-bl-jumpnav__count {
    color: var(--ssc-text-hint);
    font-weight: 300;
    margin-left: 6px;
  }
/* END_SECTION:ssc-browse-jumpnav */

/* START_SECTION:ssc-browse-megamenu (INDEX:61) */
.ssc-megamenu {
    /* Pin below the header. ssc-header.liquid publishes its height
       to :root --header-height; we fall back to 60px if missing
       (matches the default header padding 18+18 + content ~24). */
    position: fixed;
    top: var(--header-height, 60px);
    left: 0;
    right: 0;
    background: var(--ssc-white, #fff);
    border-bottom: 0.5px solid var(--ssc-border, #e5e5e5);
    /* Below the header (50) so the header stays clear, above anything in page
       content. If Trade's z-index: 4 on the section wrapper wins, sticky page
       elements must stay under 4 — see the note in ssc-browse-jumpnav. */
    z-index: 45;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    font-family: var(--ssc-font);
  }
  .ssc-megamenu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
  }
  .ssc-megamenu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 56px;
    padding: 48px 48px 56px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .ssc-megamenu-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .ssc-megamenu-column-head {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.32em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-meta, #888);
    margin: 0 0 4px;
    padding-bottom: 14px;
    border-bottom: 0.5px solid var(--ssc-border, #e5e5e5);
  }
  .ssc-megamenu-count {
    color: var(--ssc-text-hint, #aaa);
    font-weight: 300;
    margin-left: 6px;
    letter-spacing: 0.15em;
  }
  .ssc-megamenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ssc-megamenu-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--ssc-text-primary, #1a1a1a);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, padding-left 0.18s;
    border-left: 1px solid transparent;
    padding-left: 0;
  }
  .ssc-megamenu-link:hover,
  .ssc-megamenu-link:focus-visible {
    outline: none;
    color: var(--ssc-text-primary, #1a1a1a);
    padding-left: 12px;
    border-left: 1px solid var(--ssc-text-primary, #1a1a1a);
  }
  .ssc-megamenu-label { flex-grow: 0; }
  .ssc-megamenu-meta {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.18em;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--ssc-text-hint, #aaa);
  }
  .ssc-megamenu-pill-new {
    background: var(--ssc-magenta, #ff12df);
    color: var(--ssc-white, #fff);
    padding: 2px 7px;
    border-radius: 2px;
    font-size: var(--ssc-fs-micro, 10px);
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
  }
  .ssc-megamenu-footer-link {
    margin-top: 8px;
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary, #1a1a1a);
    text-decoration: none;
    padding: 8px 0;
    border-top: 0.5px solid var(--ssc-border, #e5e5e5);
  }
  .ssc-megamenu-footer-link:hover { color: var(--ssc-magenta, #ff12df); }

  /* Editorial panel */
  .ssc-megamenu-feature {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    min-height: 320px;
    background: #1a1418;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .ssc-megamenu-feature-image {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 30% 35%, rgba(248,200,212,0.35), transparent 55%),
      radial-gradient(ellipse at 75% 65%, rgba(192,160,224,0.30), transparent 60%),
      linear-gradient(135deg, #1a1418 0%, #2a1822 100%);
    transition: opacity 0.3s ease;
  }
  .ssc-megamenu-feature-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.65) 100%);
  }
  .ssc-megamenu-feature-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 28px 24px;
    color: #fff;
    z-index: 2;
  }
  .ssc-megamenu-feature-eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.32em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-magenta, #ff12df);
    margin-bottom: 8px;
  }
  .ssc-megamenu-feature-title {
    font-size: 24px;
    font-weight: 200;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 10px;
  }
  .ssc-megamenu-feature-title b { font-weight: 700; }
  .ssc-megamenu-feature-desc {
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.85);
    margin: 0 0 14px;
    max-width: 320px;
  }
  /* Preview state — hovering a collection. See setFeature(isDefault). */
  .ssc-megamenu-feature--preview { pointer-events: none; cursor: default; }
  .ssc-megamenu-feature--preview .ssc-megamenu-feature-cta { display: none; }

  .ssc-megamenu-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 0.5px solid rgba(255,255,255,0.5);
    transition: border-color 0.15s, color 0.15s;
  }
  .ssc-megamenu-feature:hover .ssc-megamenu-feature-cta {
    border-color: var(--ssc-magenta, #ff12df);
    color: var(--ssc-magenta, #ff12df);
  }

  /* Backdrop scrim — desktop only */
  .ssc-megamenu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.04);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0s linear 0.2s;
  }
  .ssc-megamenu-backdrop.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s, visibility 0s linear 0s;
  }

  /* Mobile head — only visible at ≤900px */
  .ssc-megamenu-mobile-head { display: none; }

  @media (max-width: 900px) {
    .ssc-megamenu {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transform: translateY(100%);
      transition: transform 0.3s ease, visibility 0s linear 0.3s;
      overflow-y: auto;
      z-index: 100;
    }
    .ssc-megamenu.open {
      transform: translateY(0);
      transition: transform 0.3s ease, visibility 0s linear 0s;
    }
    .ssc-megamenu-grid {
      grid-template-columns: 1fr;
      gap: 36px;
      padding: 28px 24px 80px;
    }
    .ssc-megamenu-feature { display: none; }
    .ssc-megamenu-mobile-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 24px;
      border-bottom: 0.5px solid var(--ssc-border, #e5e5e5);
      position: sticky;
      top: 0;
      background: var(--ssc-white, #fff);
      z-index: 2;
    }
    .ssc-megamenu-mobile-title {
      font-size: var(--ssc-fs-cta, 13px);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      font-weight: 700;
    }
    .ssc-megamenu-mobile-close {
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      color: var(--ssc-text-primary, #1a1a1a);
      padding: 4px 8px;
      line-height: 1;
    }
    .ssc-megamenu-link {
      padding: 14px 0;
      font-size: var(--ssc-fs-lead, 16px);
    }
    .ssc-megamenu-backdrop { display: none; }
  }

  /* Body scroll lock when mobile overlay is open */
  body.ssc-megamenu-open { overflow: hidden; }
  @media (min-width: 901px) {
    body.ssc-megamenu-open { overflow: auto; }
  }
/* END_SECTION:ssc-browse-megamenu */

/* START_SECTION:ssc-cart-bundle-completer (INDEX:62) */
/* Type from the --ssc-fs-* tokens; px, never rem — 1rem is 10px in this theme. */
.ssc-completer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--ssc-page-pad, 32px) 32px;
  font-family: var(--ssc-font);
}
.ssc-completer[hidden] { display: none; }
.ssc-completer__group {
  border: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.2));
  border-radius: var(--ssc-radius, 2px);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.ssc-completer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.ssc-completer__title {
  margin: 0;
  font-size: var(--ssc-fs-cta, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.ssc-completer__progress {
  font-size: var(--ssc-fs-body-sm, 12px);
  color: var(--ssc-text-muted);
}
.ssc-completer__rows {
  display: grid;
  gap: 10px;
}
.ssc-completer__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}
.ssc-completer__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--ssc-radius, 2px);
  background: rgba(0, 0, 0, 0.04);
}
.ssc-completer__name {
  font-size: var(--ssc-fs-body-md, 14px);
  color: inherit;
  text-decoration: none;
}
.ssc-completer__name:hover { text-decoration: underline; }
.ssc-completer__price {
  font-size: var(--ssc-fs-body-sm, 12px);
  color: var(--ssc-text-muted);
  font-variant-numeric: tabular-nums;
}
.ssc-completer__select {
  font-family: inherit;
  font-size: var(--ssc-fs-body, 13px);
  padding: 7px 9px;
  border: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.28));
  border-radius: var(--ssc-radius, 2px);
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  min-width: 136px;
}
.ssc-completer__btn {
  font-family: inherit;
  font-size: var(--ssc-fs-cta, 13px);
  padding: 8px 18px;
  border: 0;
  border-radius: var(--ssc-radius, 2px);
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  cursor: pointer;
}
.ssc-completer__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.ssc-completer__error {
  margin-top: 8px;
  font-size: var(--ssc-fs-body-sm, 12px);
  color: rgba(180, 30, 30, 1);
}
@media screen and (max-width: 749px) {
  .ssc-completer { padding: 0 16px 24px; }
  .ssc-completer__row {
    grid-template-columns: 48px minmax(0, 1fr);
    row-gap: 8px;
  }
  .ssc-completer__select,
  .ssc-completer__btn { grid-column: 2; }
}
/* END_SECTION:ssc-cart-bundle-completer */

/* START_SECTION:ssc-cart-total (INDEX:63) */
.ssc-cart-total {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px 12px 16px;
    background: var(--ssc-black, #1a1a1a);
    color: var(--ssc-text-inverse, #ffffff);
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--ssc-font, 'Josefin Sans', system-ui, sans-serif);
    box-shadow: 0 6px 24px rgba(26, 26, 26, 0.28);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  }
  .ssc-cart-total[hidden] { display: none; }
  .ssc-cart-total:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(26, 26, 26, 0.34);
  }
  .ssc-cart-total:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ssc-white, #ffffff), 0 0 0 4px var(--ssc-magenta, #ff12df);
  }

  .ssc-cart-total__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ssc-cart-total__icon svg {
    width: 22px;
    height: 22px;
  }
  .ssc-cart-total__icon svg path { fill: currentColor; }
  .ssc-cart-total__count {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ssc-magenta, #ff12df);
    color: var(--ssc-text-inverse, #ffffff);
    border-radius: 999px;
    font-size: var(--ssc-fs-eyebrow, 11px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
  }

  .ssc-cart-total__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
  }
  .ssc-cart-total__label {
    font-size: var(--ssc-fs-micro, 10px);
    letter-spacing: 0.25em;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--ssc-text-on-dark-meta, #999999);
  }
  .ssc-cart-total__val {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ssc-text-inverse, #ffffff);
  }

  /* Brief pulse when the total changes, to draw the eye after an add. */
  @keyframes ssc-cart-total-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }
  .ssc-cart-total--bump { animation: ssc-cart-total-bump 320ms ease; }
  @media (prefers-reduced-motion: reduce) {
    .ssc-cart-total,
    .ssc-cart-total:hover { transition: none; }
    .ssc-cart-total--bump { animation: none; }
  }

  @media (max-width: 749px) {
    .ssc-cart-total {
      right: max(12px, env(safe-area-inset-right));
      bottom: max(12px, env(safe-area-inset-bottom));
      gap: 10px;
      padding: 10px 16px 10px 13px;
    }
    .ssc-cart-total__val { font-size: var(--ssc-fs-body-lg, 15px); }
  }
/* END_SECTION:ssc-cart-total */

/* START_SECTION:ssc-collection-deal-terms (INDEX:65) */
.ssc-coll-deal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: var(--ssc-border-default);
    border-bottom: var(--ssc-border-default);
    background: var(--ssc-bg-app);
    font-family: var(--ssc-font);
  }
  .ssc-coll-deal__cell {
    padding: 18px 24px;
    border-right: var(--ssc-border-default);
  }
  .ssc-coll-deal__cell:last-child { border-right: none; }
  .ssc-coll-deal__label {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .ssc-coll-deal__value {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    color: var(--ssc-text-primary);
    letter-spacing: 0.04em;
  }
  .ssc-coll-deal__value b { font-weight: 700; }
  @media (max-width: 768px) {
    .ssc-coll-deal { grid-template-columns: repeat(2, 1fr); }
    .ssc-coll-deal__cell:nth-child(2) { border-right: none; }
    .ssc-coll-deal__cell:nth-child(1),
    .ssc-coll-deal__cell:nth-child(2) { border-bottom: var(--ssc-border-default); }
  }
  @media (max-width: 480px) {
    .ssc-coll-deal { grid-template-columns: 1fr; }
    .ssc-coll-deal__cell {
      border-right: none;
      border-bottom: var(--ssc-border-default);
    }
    .ssc-coll-deal__cell:last-child { border-bottom: none; }
  }
/* END_SECTION:ssc-collection-deal-terms */

/* START_SECTION:ssc-collection-hero (INDEX:66) */
.ssc-coll-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 360px;
    font-family: var(--ssc-font);
  }
  .ssc-coll-hero__media {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #d8d8d8 0%, #a8a8a8 50%, #6a6a6a 100%);
  }
  .ssc-coll-hero__img,
  .ssc-coll-hero__img-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ssc-coll-hero__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ssc-white);
    color: var(--ssc-text-primary);
    padding: 10px 20px;
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 0;
    text-align: center;
  }
  .ssc-coll-hero__text {
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ssc-coll-hero__eyebrow {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.30em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .ssc-coll-hero__title {
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 200;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 20px;
    line-height: 1.1;
  }
  .ssc-coll-hero__title b { font-weight: 700; }
  .ssc-coll-hero__positioning {
    font-size: var(--ssc-fs-body-md, 14px);
    line-height: 1.6;
    color: var(--ssc-text-muted);
    font-weight: 300;
    max-width: 420px;
    margin: 0 0 28px;
  }
  .ssc-coll-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .ssc-coll-hero__btn {
    display: inline-block;
    padding: 12px 22px;
    font-family: var(--ssc-font);
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--ssc-radius);
  }
  .ssc-coll-hero__btn--primary {
    background: var(--ssc-black);
    color: var(--ssc-white);
    border: 1px solid var(--ssc-black);
  }
  .ssc-coll-hero__btn--secondary {
    background: transparent;
    color: var(--ssc-text-primary);
    border: 0.5px solid var(--ssc-text-primary);
  }
  @media (max-width: 768px) {
    .ssc-coll-hero { grid-template-columns: 1fr; }
    .ssc-coll-hero__media { min-height: 280px; }
    .ssc-coll-hero__text { padding: 40px 24px; }
  }
/* END_SECTION:ssc-collection-hero */

/* START_SECTION:ssc-collection-merch-note (INDEX:68) */
.ssc-coll-note {
    padding: 28px 32px;
    background: var(--ssc-black);
    color: var(--ssc-text-inverse);
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 20px;
    align-items: start;
    border-left: 3px solid var(--ssc-magenta);
    font-family: var(--ssc-font);
  }
  .ssc-coll-note__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.25em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
  }
  .ssc-coll-note__text {
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 300;
    line-height: 1.6;
    color: #e5e5e5;
    font-style: italic;
    max-width: 540px;
  }
  .ssc-coll-note__text b {
    font-weight: 700;
    color: var(--ssc-text-inverse);
    font-style: normal;
  }
  .ssc-coll-note__text p { margin: 0; }
  .ssc-coll-note__text p + p { margin-top: 1em; }
  .ssc-coll-note__sig {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.20em;
    font-weight: 300;
    color: var(--ssc-text-on-dark-meta);
    text-transform: uppercase;
    margin-top: 10px;
  }
  @media (max-width: 600px) {
    .ssc-coll-note {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 24px 20px;
    }
  }
/* END_SECTION:ssc-collection-merch-note */

/* START_SECTION:ssc-collection-palette-filter (INDEX:69) */
.ssc-coll-palette {
    padding: 32px;
    background: var(--ssc-white);
    font-family: var(--ssc-font);
  }
  .ssc-coll-palette__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .ssc-coll-palette__title {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.30em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
  }
  .ssc-coll-palette__count {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.20em;
    font-weight: 300;
    color: var(--ssc-text-meta);
    text-transform: uppercase;
  }
  .ssc-coll-palette__sub {
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 300;
    color: var(--ssc-text-meta);
    letter-spacing: 0.05em;
    margin: 0 0 24px;
  }
  .ssc-coll-palette__strip {
    display: grid;
    /* auto-fit, not a fixed 18: the strip now renders only the groups present in this
       collection, so the column count has to follow the cell count. */
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 8px;
  }
  .ssc-coll-palette__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    border-radius: var(--ssc-radius);
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
  }
  .ssc-coll-palette__cell:hover { background: var(--ssc-bg-app); }
  .ssc-coll-palette__cell--active { background: var(--ssc-bg-app); }
  .ssc-coll-palette__cell--active .ssc-coll-palette__dot {
    box-shadow: 0 0 0 1.5px var(--ssc-black), 0 0 0 3px var(--ssc-white);
  }
  .ssc-coll-palette__cell--active .ssc-coll-palette__label {
    color: var(--ssc-text-primary);
    font-weight: 700;
  }
  .ssc-coll-palette__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0.5px solid rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.15s;
    background: var(--ssc-bg-soft);
    display: block;
  }
  .ssc-coll-palette__label {
    font-size: var(--ssc-fs-micro, 10px);
    letter-spacing: 0.12em;
    color: var(--ssc-text-muted);
    text-transform: uppercase;
    font-weight: 300;
    transition: all 0.15s;
    text-align: center;
    line-height: 1.2;
  }
  .ssc-coll-palette__count-num {
    font-size: var(--ssc-fs-micro, 10px);
    color: var(--ssc-text-hint);
    font-weight: 300;
    letter-spacing: 0.05em;
  }
  .ssc-coll-palette__active-bar {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--ssc-bg-app);
    border-left: 2px solid var(--ssc-black);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ssc-coll-palette__active-bar[hidden] { display: none; }
  .ssc-coll-palette__active-text {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.15em;
    font-weight: 300;
    color: var(--ssc-text-muted);
    text-transform: uppercase;
  }
  .ssc-coll-palette__active-text b { font-weight: 700; color: var(--ssc-text-primary); }
  .ssc-coll-palette__clear {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    color: var(--ssc-text-primary);
    text-transform: uppercase;
    text-decoration: none;
  }

  @media (max-width: 600px) {
    /* Wrap rather than scroll sideways.
       This was a horizontal scroll strip (grid-auto-flow: column + overflow-x)
       with no affordance at all — four pills visible, the rest invisible with
       nothing to suggest they existed. Vertical page scroll is discoverable in
       a way a horizontal strip inside a page is not, so the pills wrap onto as
       many rows as they need. 10 families land in 3 rows; even the full 17-group
       palette is 5 short rows, all of them findable. */
    .ssc-coll-palette__strip {
      grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
      grid-auto-flow: row;
      overflow-x: visible;
      row-gap: 14px;
    }
  }
/* END_SECTION:ssc-collection-palette-filter */

/* START_SECTION:ssc-collection-product-grid (INDEX:70) */
.ssc-coll-grid {
    padding: 40px 32px 16px;
    font-family: var(--ssc-font);
  }
  .ssc-coll-grid__head { margin-bottom: 20px; }
  .ssc-coll-grid__heading {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.30em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 4px;
  }
  .ssc-coll-grid__sub {
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 300;
    color: var(--ssc-text-meta);
    letter-spacing: 0.05em;
    margin: 0;
  }
  .ssc-coll-grid__pagination {
    margin-top: 32px;
    text-align: center;
  }
  .ssc-coll-grid__pagination ul {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 12px;
    align-items: center;
  }
  .ssc-coll-grid__pagination a,
  .ssc-coll-grid__pagination span {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
    text-decoration: none;
    padding: 4px 8px;
  }
  .ssc-coll-grid__pagination span[aria-current="page"] {
    border-bottom: 1px solid var(--ssc-text-primary);
  }
  .ssc-coll-grid__empty {
    padding: 48px;
    text-align: center;
    background: var(--ssc-bg-app);
    border: var(--ssc-border-default);
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.20em;
    color: var(--ssc-text-meta);
    text-transform: uppercase;
    font-weight: 300;
  }
  /* Chip overlays the top-left of each card's image so it's unmistakably part of that card. */
  .ssc-coll-grid .grid__item { position: relative; }
  /* Keep the filter bar (and its open dropdown panels) above the cards' swatch chips (z-index:3). */
  .ssc-coll-grid__facets { position: relative; z-index: 20; }
  /* Substitute-colour chip: this card is not showing the colorway you filtered
     to. Bottom-left so it never collides with .ssc-card-colorchip (top-left),
     and visually quieter than it — a statement about what's missing shouldn't
     outshout the product. */
  .ssc-card-substitute {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 3;
    max-width: calc(100% - 20px);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(20, 20, 22, 0.72);
    color: #fff;
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ssc-card-colorchip {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    max-width: calc(100% - 20px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    background: rgba(255, 255, 255, 0.93);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
    color: var(--ssc-text-strong, #1a1a1a);
    pointer-events: none;
  }
  .ssc-card-colorchip__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex: 0 0 auto;
  }
  .ssc-card-colorchip__more {
    font-size: var(--ssc-fs-eyebrow, 11px);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-left: 2px;
  }

  /* Curation colorway modal (ssc-curation-quickadd.js). The whole card opens it,
     so Trade's "Choose options" button would be a second affordance for the same
     action — hidden here. Scoped by an attribute that only exists on curations. */
  [data-ssc-curation] .quick-add__submit,
  [data-ssc-curation] modal-opener { display: none; }
  [data-ssc-curation] .card__inner { cursor: pointer; }

  body.ssc-qa-open { overflow: hidden; }
  .ssc-qa {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .ssc-qa[hidden] { display: none; }
  .ssc-qa__panel {
    position: relative;
    background: var(--ssc-paper, #fff);
    color: var(--ssc-text-primary, #111);
    border-radius: 4px;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 28px 24px 24px;
    font-family: var(--ssc-font, system-ui);
  }
  .ssc-qa__close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--ssc-text-meta, #777);
  }
  .ssc-qa__title {
    margin: 0 0 18px;
    font-size: var(--ssc-fs-body-lg, 15px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .ssc-qa__group { margin-bottom: 16px; }
  .ssc-qa__label {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-meta, #777);
    margin-bottom: 8px;
  }
  .ssc-qa__opts { display: flex; flex-wrap: wrap; gap: 6px; }
  .ssc-qa__opt {
    padding: 7px 12px;
    border: 1px solid var(--ssc-border, #d0d0d0);
    background: transparent;
    border-radius: 2px;
    font: inherit;
    font-size: var(--ssc-fs-body-sm, 12px);
    cursor: pointer;
    color: inherit;
  }
  .ssc-qa__opt.is-on {
    background: var(--ssc-ink, #111);
    color: var(--ssc-paper, #fff);
    border-color: var(--ssc-ink, #111);
  }
  .ssc-qa__row { display: flex; gap: 10px; align-items: flex-end; margin-top: 20px; }
  .ssc-qa__qty { display: flex; flex-direction: column; gap: 6px; }
  .ssc-qa__qty span {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-meta, #777);
  }
  .ssc-qa__qty input {
    width: 68px;
    padding: 10px 8px;
    border: 1px solid var(--ssc-border, #d0d0d0);
    border-radius: 2px;
    font: inherit;
  }
  .ssc-qa__add {
    flex: 1;
    padding: 12px 16px;
    background: var(--ssc-ink, #111);
    color: var(--ssc-paper, #fff);
    border: 0;
    border-radius: 2px;
    font: inherit;
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
  }
  .ssc-qa__add[disabled] { background: var(--ssc-disabled, #ccc); cursor: not-allowed; }
  .ssc-qa__loading, .ssc-qa__empty { font-size: var(--ssc-fs-body, 13px); color: var(--ssc-text-meta, #777); }
  /* Running tally — the modal stays open across adds so several colorways of one
     design can go in without reopening. */
  .ssc-qa__added:not(:empty) {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ssc-border, #e5e5e5);
  }
  .ssc-qa__added-head {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-meta, #777);
    margin-bottom: 8px;
  }
  .ssc-qa__added-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--ssc-fs-body-sm, 12px);
    padding: 3px 0;
  }
  .ssc-qa__added-row span:last-child { color: var(--ssc-text-meta, #777); }
  .ssc-qa__all {
    display: inline-block;
    margin-top: 18px;
    font-size: var(--ssc-fs-label, 12px);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ssc-text-primary, #111);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
  }
  .ssc-qa__all:hover, .ssc-qa__all:focus-visible { color: var(--ssc-magenta, #ff12df); }
/* END_SECTION:ssc-collection-product-grid */

/* START_SECTION:ssc-collection-redirect (INDEX:71) */
.ssc-collection-redirect {
    font-family: var(--ssc-font);
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    padding: 64px var(--ssc-page-pad, 32px);
    text-align: center;
  }
  .ssc-collection-redirect a { color: var(--ssc-magenta); }
/* END_SECTION:ssc-collection-redirect */

/* START_SECTION:ssc-dashboard-account-bar (INDEX:85) */
.ssc-dash-account-bar {
    display: flex;
    background: var(--ssc-black);
    color: var(--ssc-text-inverse);
    padding: 14px var(--ssc-page-pad);
    font-family: var(--ssc-font);
  }
  .ssc-dash-account-bar__cell {
    flex: 1;
    padding: 0 24px;
    border-right: 0.5px solid #333;
  }
  .ssc-dash-account-bar__cell:first-child { padding-left: 0; }
  .ssc-dash-account-bar__cell:last-child { border-right: none; }
  .ssc-dash-account-bar__label {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.25em;
    font-weight: 300;
    color: var(--ssc-text-on-dark-meta);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .ssc-dash-account-bar__val {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 700;
    color: var(--ssc-text-inverse);
    letter-spacing: 0.05em;
  }
  .ssc-dash-account-bar__status--ok      { color: var(--ssc-magenta); }
  .ssc-dash-account-bar__status--pending { color: #ffcb47; }
  .ssc-dash-account-bar__status--hold    { color: #ff7676; }
  .ssc-dash-account-bar__cta {
    color: var(--ssc-text-inverse);
    text-decoration: underline;
    font-weight: 700;
  }
  @media (max-width: 768px) {
    .ssc-dash-account-bar {
      flex-direction: column;
      gap: 12px;
      padding: 16px 20px;
    }
    .ssc-dash-account-bar__cell {
      padding: 0;
      border-right: none;
      border-bottom: 0.5px solid #333;
      padding-bottom: 12px;
    }
    .ssc-dash-account-bar__cell:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }
/* END_SECTION:ssc-dashboard-account-bar */

/* START_SECTION:ssc-dashboard-custom-requests (INDEX:86) */
.ssc-dash-cust { padding: 8px var(--ssc-page-pad); }
  .ssc-dash-cust__title {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 4px;
    font-family: var(--ssc-font);
  }
  .ssc-dash-cust__sub {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: var(--ssc-text-on-dark-muted);
    margin: 0 0 12px;
    letter-spacing: 0.04em;
    font-family: var(--ssc-font);
  }
  .ssc-dash-cust__thread {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--ssc-radius);
    margin-bottom: 8px;
  }
  .ssc-dash-cust__thread:last-of-type { margin-bottom: 0; }
  .ssc-dash-cust__thread--declined { opacity: 0.65; }
  .ssc-dash-cust__thread-name {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-family: var(--ssc-font);
  }
  .ssc-dash-cust__thread-status {
    font-size: var(--ssc-fs-label, 12px);
    color: var(--ssc-text-on-dark-meta);
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.5;
    font-family: var(--ssc-font);
  }
  .ssc-dash-cust__thread-status b {
    color: var(--ssc-text-inverse);
    font-weight: 700;
  }
  .ssc-dash-cust__thread--quoted .ssc-dash-cust__thread-status b {
    color: var(--ssc-magenta);
  }
  .ssc-dash-cust__action {
    color: var(--ssc-magenta);
    font-weight: 700;
    margin-left: 8px;
    text-decoration: none;
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    text-transform: uppercase;
  }
  .ssc-dash-cust__action--muted {
    color: var(--ssc-text-inverse);
  }
  .ssc-dash-cust__action:hover { text-decoration: underline; }
  .ssc-dash-cust__link {
    display: inline-block;
    margin-top: 12px;
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-magenta);
    text-decoration: none;
    font-family: var(--ssc-font);
  }
  .ssc-dash-cust__link:hover { text-decoration: underline; }
/* END_SECTION:ssc-dashboard-custom-requests */

/* START_SECTION:ssc-dashboard-hero (INDEX:87) */
.ssc-dash-hero {
    padding: 48px var(--ssc-page-pad) 32px;
    background: var(--ssc-white);
    border-bottom: var(--ssc-border-default);
  }
  .ssc-dash-hero__headline {
    font-size: 36px;
    margin: 0 0 8px;
  }
  .ssc-dash-hero__sub {
    margin: 0;
    max-width: 580px;
    font-size: var(--ssc-fs-body-md, 14px);
    line-height: 1.6;
  }
  @media (max-width: 480px) {
    .ssc-dash-hero { padding: 32px 20px 24px; }
    .ssc-dash-hero__headline { font-size: 28px; }
  }
/* END_SECTION:ssc-dashboard-hero */

/* START_SECTION:ssc-dashboard-linesheets (INDEX:88) */
.ssc-dash-line { padding: 8px var(--ssc-page-pad); }
  .ssc-dash-line__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .ssc-dash-line__link {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
    text-decoration: none;
    font-family: var(--ssc-font);
  }
  .ssc-dash-line__link:hover { text-decoration: underline; }
  .ssc-dash-line__sub {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: var(--ssc-text-meta);
    letter-spacing: 0.05em;
    margin: 0 0 12px;
    font-family: var(--ssc-font);
  }
  .ssc-dash-line__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 10px 0;
    border-bottom: var(--ssc-border-light-default);
    align-items: center;
    font-family: var(--ssc-font);
  }
  .ssc-dash-line__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .ssc-dash-line__name {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
  }
  .ssc-dash-line__date {
    font-size: var(--ssc-fs-label, 12px);
    color: var(--ssc-text-meta);
    font-weight: 300;
    margin-top: 2px;
    letter-spacing: 0.04em;
  }
  .ssc-dash-line__dl {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
    text-decoration: none;
    white-space: nowrap;
  }
  .ssc-dash-line__dl:hover { text-decoration: underline; }
/* END_SECTION:ssc-dashboard-linesheets */

/* START_SECTION:ssc-dashboard-new-this-season (INDEX:89) */
.ssc-dash-new-season { padding: 8px var(--ssc-page-pad); }
  .ssc-dash-new-season__head { margin-bottom: 4px; }
  .ssc-dash-new-season__sub {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: var(--ssc-text-meta);
    letter-spacing: 0.05em;
    margin: 0 0 12px;
    font-family: var(--ssc-font);
  }
  .ssc-dash-new-season__media {
    margin: 0 0 12px;
  }
  .ssc-dash-new-season__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--ssc-radius);
  }
  .ssc-dash-new-season__img-placeholder {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #ececec, #c0c0c0);
    border-radius: var(--ssc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ssc-text-meta);
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    font-weight: 300;
    font-family: var(--ssc-font);
  }
  .ssc-dash-new-season__body {
    font-size: var(--ssc-fs-body-sm, 12px);
    line-height: 1.6;
    color: var(--ssc-text-muted);
    font-weight: 300;
    margin: 0 0 12px;
    font-family: var(--ssc-font);
  }
  .ssc-dash-new-season__cta {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
  }
/* END_SECTION:ssc-dashboard-new-this-season */

/* START_SECTION:ssc-dashboard-orders (INDEX:90) */
.ssc-dash-orders { padding: 16px var(--ssc-page-pad); }
  .ssc-dash-orders__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .ssc-dash-orders__link {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
    text-decoration: none;
    font-family: var(--ssc-font);
  }
  .ssc-dash-orders__link:hover { text-decoration: underline; }
  .ssc-dash-orders__sub {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: var(--ssc-text-meta);
    letter-spacing: 0.05em;
    margin: 0 0 16px;
    font-family: var(--ssc-font);
  }
  .ssc-dash-orders__empty {
    margin: 8px 0 0;
  }
  .ssc-dash-orders__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: var(--ssc-border-light-default);
    align-items: center;
    font-family: var(--ssc-font);
  }
  .ssc-dash-orders__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .ssc-dash-orders__id {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
  }
  .ssc-dash-orders__meta {
    font-size: var(--ssc-fs-cta, 13px);
    color: var(--ssc-text-meta);
    font-weight: 300;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }
  .ssc-dash-orders__status {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--ssc-radius);
    white-space: nowrap;
    font-family: var(--ssc-font);
  }
  .ssc-status-prod  { background: var(--ssc-status-prod-bg);  color: var(--ssc-status-prod-fg); }
  .ssc-status-ship  { background: var(--ssc-status-ship-bg);  color: var(--ssc-status-ship-fg); }
  .ssc-status-deliv { background: var(--ssc-status-deliv-bg); color: var(--ssc-status-deliv-fg); }
  .ssc-dash-orders__total {
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 700;
    text-align: right;
    min-width: 80px;
  }
  @media (max-width: 600px) {
    .ssc-dash-orders__row {
      grid-template-columns: 1fr auto;
      grid-template-areas: "main total" "status status";
      gap: 8px 12px;
    }
    .ssc-dash-orders__main { grid-area: main; }
    .ssc-dash-orders__total { grid-area: total; }
    .ssc-dash-orders__status { grid-area: status; justify-self: start; }
  }
/* END_SECTION:ssc-dashboard-orders */

/* START_SECTION:ssc-dashboard-quick-actions (INDEX:91) */
.ssc-dash-quick { padding: 24px var(--ssc-page-pad) 8px; }
  .ssc-dash-quick__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ssc-grid-gap-tight);
  }
  .ssc-dash-quick__card {
    background: var(--ssc-white);
    border: var(--ssc-border-default);
    padding: 24px 20px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    min-height: 130px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--ssc-radius);
  }
  .ssc-dash-quick__card:hover {
    border-color: var(--ssc-black);
    transform: translateY(-1px);
  }
  .ssc-dash-quick__icon {
    width: 32px;
    height: 32px;
    margin-bottom: 14px;
    color: var(--ssc-black);
  }
  .ssc-dash-quick__card--magenta .ssc-dash-quick__icon { color: var(--ssc-magenta); }
  .ssc-dash-quick__icon svg { display: block; width: 100%; height: 100%; }
  .ssc-dash-quick__label {
    font-size: var(--ssc-fs-body, 13px);
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
    line-height: 1.3;
    margin-bottom: 6px;
    font-family: var(--ssc-font);
  }
  .ssc-dash-quick__sub {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    letter-spacing: 0.04em;
    line-height: 1.4;
    flex: 1;
    font-family: var(--ssc-font);
  }
  .ssc-dash-quick__arrow {
    font-size: var(--ssc-fs-lead, 16px);
    color: var(--ssc-text-primary);
    margin-top: 12px;
  }

  @media (max-width: 768px) {
    .ssc-dash-quick__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .ssc-dash-quick__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ssc-dashboard-quick-actions */

/* START_SECTION:ssc-dashboard-reach-out (INDEX:92) */
.ssc-dash-reach {
    padding: 24px var(--ssc-page-pad);
    background: var(--ssc-white);
    border-top: var(--ssc-border-default);
    text-align: center;
    font-family: var(--ssc-font);
  }
  .ssc-dash-reach__text {
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    letter-spacing: 0.05em;
    margin: 0 0 8px;
  }
  .ssc-dash-reach__text b {
    color: var(--ssc-text-primary);
    font-weight: 700;
  }
  .ssc-dash-reach__channels {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--ssc-text-primary);
    text-transform: uppercase;
  }
  .ssc-dash-reach__channels a {
    color: inherit;
    text-decoration: none;
  }
  .ssc-dash-reach__channels a:hover { text-decoration: underline; }
/* END_SECTION:ssc-dashboard-reach-out */

/* START_SECTION:ssc-dashboard-reorder (INDEX:93) */
.ssc-dash-reorder { padding: 8px var(--ssc-page-pad); }
  .ssc-dash-reorder__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .ssc-dash-reorder__link {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
    text-decoration: none;
    font-family: var(--ssc-font);
  }
  .ssc-dash-reorder__link:hover { text-decoration: underline; }
  .ssc-dash-reorder__sub {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: var(--ssc-text-meta);
    letter-spacing: 0.05em;
    margin: 0 0 16px;
    font-family: var(--ssc-font);
  }
  .ssc-dash-reorder__row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: var(--ssc-border-light-default);
    align-items: center;
    font-family: var(--ssc-font);
  }
  .ssc-dash-reorder__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .ssc-dash-reorder__thumb { width: 40px; height: 40px; }
  .ssc-dash-reorder__thumb img,
  .ssc-dash-reorder__thumb-placeholder {
    width: 40px;
    height: 40px;
    border-radius: var(--ssc-radius);
    object-fit: cover;
  }
  .ssc-dash-reorder__thumb-placeholder { background: var(--ssc-bg-soft); }
  .ssc-dash-reorder__name {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
  }
  .ssc-dash-reorder__variant {
    font-weight: 300;
    color: var(--ssc-text-meta);
  }
  .ssc-dash-reorder__meta {
    font-size: var(--ssc-fs-label, 12px);
    color: var(--ssc-text-meta);
    font-weight: 300;
    margin-top: 2px;
    letter-spacing: 0.04em;
  }
  .ssc-dash-reorder__date {
    font-size: var(--ssc-fs-label, 12px);
    color: var(--ssc-text-meta);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 300;
    white-space: nowrap;
  }
  .ssc-dash-reorder__btn {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 12px;
    background: var(--ssc-black);
    color: var(--ssc-white);
    border: none;
    border-radius: var(--ssc-radius);
    cursor: pointer;
    font-family: var(--ssc-font);
    white-space: nowrap;
  }
  .ssc-dash-reorder__btn:disabled { opacity: 0.6; cursor: progress; }
  .ssc-dash-reorder__empty { margin: 8px 0 0; }

  @media (max-width: 600px) {
    .ssc-dash-reorder__row {
      grid-template-columns: 40px 1fr;
      grid-template-areas:
        "thumb main"
        "thumb date"
        "btn   btn";
      row-gap: 4px;
    }
    .ssc-dash-reorder__thumb { grid-area: thumb; }
    .ssc-dash-reorder__main  { grid-area: main; }
    .ssc-dash-reorder__date  { grid-area: date; }
    .ssc-dash-reorder__btn   { grid-area: btn; justify-self: start; margin-top: 8px; }
  }
/* END_SECTION:ssc-dashboard-reorder */

/* START_SECTION:ssc-header (INDEX:94) */
/* Sticky-header behavior. Pure-CSS replacement for Trade's
     StickyHeader JS class — that JS only loaded when Trade's header
     section was rendered, and we replaced it with this section. The
     All four sticky modes ARE implemented — see the javascript
     block below. (Written without Liquid tag delimiters on purpose: a
     literal block tag inside this CSS comment reads as an unclosed
     javascript block to any parser scanning the file, which is what
     stopped Locksmith from installing into this section.) Note "on-scroll-up" (the schema default) hides the
     header on downward scroll, so it can read as "the header isn't
     sticky" during a scroll-through. "Always sticky" is the setting
     for a permanently visible nav. */
  .section-header { display: block; }

  /* Sticky must go on the SECTION WRAPPER, not on <sticky-header>.
     Shopify wraps every section in .shopify-section.shopify-section-group-
     header-group, and that wrapper is exactly as tall as the header — so a
     `position: sticky` child has zero travel distance and scrolls away with
     its parent. It looks like sticky is simply not working. Trade gets this
     right by putting sticky on the wrapper (.shopify-section-header-sticky,
     base.css:2317); we can't reuse that class because it's applied by Trade's
     StickyHeader JS, which only loads when Trade's own header renders.

     :has() rather than a JS-applied class so this still works if the section
     JS is deferred or fails — sticky was CSS-only before and should stay that
     way. Same reason the transform moves to the wrapper: with the wrapper
     pinned, translating only the inner element would slide the header out of
     a box that stays on screen. */
  .shopify-section-group-header-group:has(> .ssc-header--sticky) {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ssc-white, #fff);
    transition: transform 0.25s ease;
    will-change: transform;
  }
  /* on-scroll-up mode — hide while scrolling down, reveal on scroll up */
  .shopify-section-group-header-group:has(> .ssc-header--sticky.ssc-header--hidden) {
    transform: translateY(-100%);
  }
  .ssc-header--sticky { background: var(--ssc-white, #fff); }
  /* reduce-logo-size mode — shrink padding + logo size after small scroll */
  .ssc-header--sticky.ssc-header--reduced .ssc-nav {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .ssc-header--sticky.ssc-header--reduced .ssc-nav-logo {
    font-size: var(--ssc-fs-body-sm, 12px);
  }
  .ssc-header--sticky .ssc-nav,
  .ssc-header--sticky .ssc-nav-logo {
    transition: padding 0.2s ease, font-size 0.2s ease;
  }

  /* Top nav */
  .ssc-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 32px;
    border-bottom: 0.5px solid var(--ssc-border, #e5e5e5);
    font-family: var(--ssc-font);
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.18em;
    font-weight: 300;
    text-transform: uppercase;
    background: var(--ssc-white, #fff);
    position: relative;
    z-index: 50;
  }
  .ssc-nav-logo {
    font-weight: 700;
    letter-spacing: 0.25em;
    font-size: var(--ssc-fs-body-md, 14px);
    background: linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 50%, #6a6a6a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
    text-decoration: none;
    font-family: var(--ssc-font);
  }
  /* Image logo: drop the text-gradient treatment and size by height. */
  .ssc-nav-logo--image {
    display: flex;
    align-items: center;
    background: none;
    -webkit-text-fill-color: initial;
  }
  .ssc-nav-logo-img {
    display: block;
    width: auto;
    height: var(--ssc-logo-h, 32px);
    transition: height 0.2s ease;
  }
  /* reduce-logo-size mode also shrinks the image logo (~70%). */
  .ssc-header--sticky.ssc-header--reduced .ssc-nav-logo-img {
    height: calc(var(--ssc-logo-h, 32px) * 0.7);
  }
  .ssc-nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
  }
  .ssc-nav-item {
    background: none;
    border: none;
    font: inherit;
    color: var(--ssc-text-meta, #555);
    cursor: pointer;
    padding: 6px 0;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    text-decoration: none;
    position: relative;
    transition: color 0.15s;
  }
  .ssc-nav-item:hover, .ssc-nav-item:focus-visible {
    color: var(--ssc-text-primary, #1a1a1a);
    outline: none;
  }
  .ssc-nav-item.active { color: var(--ssc-text-primary, #1a1a1a); font-weight: 700; }
  .ssc-nav-item--browse { display: flex; align-items: center; gap: 6px; }
  .ssc-nav-chevron {
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
    margin-bottom: 2px;
  }
  .ssc-nav-item--browse[aria-expanded="true"] .ssc-nav-chevron {
    transform: rotate(-135deg);
    margin-bottom: -2px;
  }
  .ssc-nav-item--browse[aria-expanded="true"] {
    color: var(--ssc-text-primary, #1a1a1a);
    font-weight: 700;
  }
  .ssc-nav-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: var(--ssc-fs-cta, 13px);
  }
  .ssc-nav-cart {
    color: var(--ssc-text-primary, #1a1a1a);
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
  }
  .ssc-nav-cart .svg-wrapper svg { width: 22px; height: 22px; }

  /*
   * Cart count bubble. Trade's base.css paints it rgb(var(--color-button)),
   * which resolves to the color scheme's button colour — brown on this theme.
   * Black per the brand system: a count badge is none of the three reserved
   * magenta roles (custom request, Bestseller/New pills, filled-input
   * feedback), and the rule is "if there's no Stefanie-personally-reviewed
   * reason for magenta, use black."
   *
   * Overridden here rather than in base.css so a Trade upgrade can't undo it.
   */
  .cart-count-bubble {
    background-color: var(--ssc-black, #1a1a1a);
    color: var(--ssc-text-inverse, #fff);
  }
  .ssc-nav-trade-pill {
    background: var(--ssc-magenta, #FF12DF);
    color: var(--ssc-white, #fff);
    padding: 4px 10px;
    border-radius: 2px;
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.15em;
    font-weight: 700;
  }
  .ssc-nav-mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }
  .ssc-nav-mobile-bar {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--ssc-text-primary, #1a1a1a);
    margin: 5px 0;
    transition: transform 0.2s;
  }

  @media (max-width: 900px) {
    .ssc-nav { padding: 14px 20px; }
    .ssc-nav-links { display: none; }
    .ssc-nav-mobile-toggle { display: block; }
    .ssc-nav-actions .ssc-nav-trade-pill { display: none; }
  }

  /* ── Trade lock ─────────────────────────────────────────────────────────
     Note: we deliberately do NOT override Locksmith's full-viewport spinner
     overlay. It covers the page while remote keys resolve (secret-link keys
     are evaluated server-side), and a valid tablet link reloads straight
     into the real site. Unmasking it would flash "Wholesale access required"
     at visitors who are about to be let in. The overlay clears on its own
     when access is genuinely denied, revealing the band below. */

  .ssc-nav-tradeonly {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
    white-space: nowrap;
  }

  .ssc-tradeonly {
    padding: 64px 20px 40px;
    text-align: center;
  }
  .ssc-tradeonly__inner { max-width: 560px; margin: 0 auto; }
  .ssc-tradeonly__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.55;
    margin: 0 0 16px;
  }
  .ssc-tradeonly__heading {
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 14px;
  }
  .ssc-tradeonly__body {
    font-size: var(--ssc-fs-body, 15px);
    line-height: 1.6;
    opacity: 0.8;
    margin: 0 0 28px;
  }
  .ssc-tradeonly__cta {
    display: inline-block;
    padding: 13px 30px;
    border: 1px solid currentColor;
    border-radius: var(--buttons-radius, 2px);
    font-size: var(--ssc-fs-cta, 12px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
  }
  @media screen and (max-width: 749px) {
    .ssc-tradeonly { padding: 40px 20px 28px; }
    .ssc-tradeonly__heading { font-size: 23px; }
  }
/* END_SECTION:ssc-header */

/* START_SECTION:ssc-home-collections (INDEX:95) */
.ssc-home-collections {
    padding: 64px var(--ssc-page-pad) 24px;
    font-family: var(--ssc-font);
  }
  .ssc-home-collections__head { margin-bottom: 28px; }
  .ssc-home-collections__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.35em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin: 0 0 8px;
  }
  .ssc-home-collections__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.2;
  }
  .ssc-home-collections__title b { font-weight: 700; }
  .ssc-home-collections__sub {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    letter-spacing: 0.04em;
    margin: 0;
    max-width: 540px;
    line-height: 1.6;
  }
  .ssc-home-collections__grid { display: grid; gap: 16px; }
  .ssc-home-collections__grid--featured_grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ssc-home-collections__grid--sml_trio {
    grid-template-columns: 2fr 1.2fr 0.8fr;
  }
  .ssc-home-collections__more {
    margin-top: 32px;
    text-align: center;
  }
  .ssc-home-collections__more a {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.25em;
    font-weight: 700;
    color: var(--ssc-text-primary);
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--ssc-text-primary);
    padding-bottom: 4px;
  }

  /* Card */
  .ssc-collection-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: var(--ssc-text-inverse);
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--ssc-radius);
  }
  .ssc-collection-card__img {
    position: absolute;
    inset: 0;
    transition: transform 0.4s ease;
  }
  .ssc-collection-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ssc-collection-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c0c0c0 0%, #4a4a4a 100%);
  }
  .ssc-collection-card:hover .ssc-collection-card__img { transform: scale(1.03); }
  .ssc-collection-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
  }
  .ssc-collection-card__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.30em;
    font-weight: 300;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
  }
  .ssc-collection-card__name {
    font-size: 22px;
    font-weight: 200;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 4px;
    color: var(--ssc-text-inverse);
  }
  .ssc-collection-card__name b { font-weight: 700; }
  .ssc-collection-card__tagline {
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.03em;
    margin: 0;
  }

  /* Layout A: featured_grid */
  .ssc-collection-card--wide {
    grid-column: span 2;
    aspect-ratio: 8 / 5;
  }
  .ssc-collection-card--square {
    aspect-ratio: 4 / 5;
  }

  /* Full — spans the whole row whatever the column count. `1 / -1` rather than
     `span 3` so it stays correct if the grid ever changes width, and so a full
     card placed mid-row still starts at the left edge. Wider than it is tall,
     since a full-row card at 4/5 would be enormous. */
  .ssc-collection-card--full {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 1;
  }
  .ssc-collection-card--full .ssc-collection-card__tagline {
    max-width: 52ch;
  }

  /* Layout B: sml_trio */
  .ssc-collection-card--large  { aspect-ratio: 4 / 5; }
  .ssc-collection-card--medium { aspect-ratio: 1; }
  .ssc-collection-card--small  { aspect-ratio: 3 / 5; }
  .ssc-collection-card--small .ssc-collection-card__overlay { padding: 18px; }
  .ssc-collection-card--small .ssc-collection-card__name { font-size: var(--ssc-fs-lead, 16px); }
  .ssc-collection-card--small .ssc-collection-card__tagline { display: none; }

  @media (max-width: 768px) {
    .ssc-home-collections__grid--featured_grid,
    .ssc-home-collections__grid--sml_trio {
      grid-template-columns: 1fr;
    }
    /* One column on mobile, so every width collapses to the same card. `1 / -1`
       still resolves correctly here, but the aspect ratio has to come back to
       portrait or a full card becomes a letterbox strip. */
    .ssc-collection-card--wide,
    .ssc-collection-card--full {
      grid-column: auto;
      aspect-ratio: 4 / 5;
    }
  }
/* END_SECTION:ssc-home-collections */

/* START_SECTION:ssc-home-color-shop (INDEX:96) */
.ssc-home-color {
    padding: 64px var(--ssc-page-pad) 24px;
    background: var(--ssc-white);
    font-family: var(--ssc-font);
  }
  .ssc-home-color__head { margin-bottom: 28px; }
  .ssc-home-color__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.35em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin: 0 0 8px;
  }
  .ssc-home-color__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.2;
  }
  .ssc-home-color__title b { font-weight: 700; }
  .ssc-home-color__sub {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    letter-spacing: 0.04em;
    margin: 0;
    max-width: 540px;
    line-height: 1.6;
  }
  .ssc-home-color__grid {
    display: grid;
    grid-template-columns: repeat(var(--cells, 8), 1fr);
    gap: 12px;
  }
  .ssc-home-color__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 12px 4px;
    border-radius: var(--ssc-radius);
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
  }
  .ssc-home-color__cell:hover { background: var(--ssc-bg-app); }
  .ssc-home-color__dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0.5px solid rgba(0, 0, 0, 0.12);
    display: block;
    background: var(--ssc-bg-soft);
  }
  .ssc-home-color__label {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
  }
  .ssc-home-color__count {
    font-size: var(--ssc-fs-eyebrow, 11px);
    color: var(--ssc-text-meta);
    font-weight: 300;
    letter-spacing: 0.05em;
  }
  /* View All cell — the arrow matches .ssc-home-color__dot's 56px exactly so it
     shares the dots' baseline. Dashed border distinguishes it as an action
     rather than a colorway without breaking the circle rhythm. */
  .ssc-home-color__arrow {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px dashed rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ssc-text-primary);
    background: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .ssc-home-color__arrow svg {
    width: 26px;
    height: 26px;
    display: block;
  }
  .ssc-home-color__cell--more:hover .ssc-home-color__arrow {
    background: var(--ssc-black);
    border-color: var(--ssc-black);
    color: var(--ssc-white);
  }
  @media (max-width: 900px) {
    .ssc-home-color__grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 480px) {
    .ssc-home-color__grid {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 80px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 8px;
    }
    .ssc-home-color__cell { scroll-snap-align: start; }
  }
/* END_SECTION:ssc-home-color-shop */

/* START_SECTION:ssc-home-custom-block (INDEX:97) */
.ssc-home-custom {
    background: var(--ssc-black);
    color: var(--ssc-text-inverse);
    padding: 64px 56px;
    margin-top: 64px;
    border-left: 4px solid var(--ssc-magenta);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    font-family: var(--ssc-font);
  }
  .ssc-home-custom__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.35em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .ssc-home-custom__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 24px;
  }
  .ssc-home-custom__title b { font-weight: 700; }
  .ssc-home-custom__body {
    font-size: var(--ssc-fs-body-md, 14px);
    line-height: 1.8;
    color: #d8d8d8;
    font-weight: 300;
    max-width: 440px;
    margin: 0 0 28px;
  }
  .ssc-home-custom__body b { font-weight: 700; color: var(--ssc-text-inverse); }
  .ssc-home-custom__btn {
    display: inline-block;
    background: var(--ssc-magenta);
    color: var(--ssc-text-inverse);
    border: 1px solid var(--ssc-magenta);
    padding: 16px 32px;
    font-family: var(--ssc-font);
    font-size: var(--ssc-fs-body-sm, 12px);
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--ssc-radius);
  }
  .ssc-home-custom__col--stats {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-left: 48px;
    border-left: 0.5px solid rgba(255, 255, 255, 0.15);
  }
  .ssc-home-custom__stat-num {
    font-size: 48px;
    font-weight: 200;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--ssc-magenta);
  }
  .ssc-home-custom__stat-label {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-inverse);
    margin-top: 6px;
  }
  .ssc-home-custom__stat-sub {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: #aaa;
    letter-spacing: 0.04em;
    margin-top: 4px;
  }
  @media (max-width: 768px) {
    .ssc-home-custom {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 48px 24px;
    }
    .ssc-home-custom__col--stats {
      padding-left: 0;
      border-left: none;
      border-top: 0.5px solid rgba(255, 255, 255, 0.15);
      padding-top: 32px;
    }
  }
/* END_SECTION:ssc-home-custom-block */

/* START_SECTION:ssc-home-hero (INDEX:98) */
.ssc-home-hero {
    position: relative;
    min-height: 540px;
    background: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 40%, #1a1a1a 100%);
    color: var(--ssc-text-inverse);
    overflow: hidden;
    font-family: var(--ssc-font);
  }
  .ssc-home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .ssc-home-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ssc-home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--ssc-hero-overlay-color, #1a1a1a);
    opacity: var(--ssc-hero-overlay-opacity, 0.4);
    pointer-events: none;
  }
  .ssc-home-hero__content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 96px 56px 80px;
  }
  .ssc-home-hero__eyebrow {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.35em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .ssc-home-hero__title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 200;
    letter-spacing: 0.06em;
    line-height: 1.05;
    margin: 0 0 24px;
    text-transform: uppercase;
  }
  .ssc-home-hero__title b { font-weight: 700; }
  .ssc-home-hero__body {
    font-size: var(--ssc-fs-lead, 16px);
    line-height: 1.7;
    color: #d8d8d8;
    font-weight: 300;
    max-width: 520px;
    margin: 0 0 36px;
    letter-spacing: 0.03em;
  }
  .ssc-home-hero__body p { margin: 0; }
  .ssc-home-hero__body p + p { margin-top: 1em; }
  .ssc-home-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .ssc-home-hero__btn {
    display: inline-block;
    padding: 14px 26px;
    font-family: var(--ssc-font);
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--ssc-radius);
    text-decoration: none;
  }
  .ssc-home-hero__btn--primary {
    background: var(--ssc-white);
    color: var(--ssc-black);
    border: 1px solid var(--ssc-white);
  }
  .ssc-home-hero__btn--ghost {
    background: transparent;
    color: var(--ssc-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  @media (max-width: 600px) {
    .ssc-home-hero__content { padding: 56px 24px 48px; }
    .ssc-home-hero { min-height: 440px; }
  }
/* END_SECTION:ssc-home-hero */

/* START_SECTION:ssc-home-peer-reorders (INDEX:99) */
.ssc-home-rail {
    padding: 64px var(--ssc-page-pad) 80px;
    background: var(--ssc-bg-app);
    font-family: var(--ssc-font);
  }
  .ssc-home-rail__head { margin-bottom: 28px; }
  .ssc-home-rail__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.35em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin: 0 0 8px;
  }
  .ssc-home-rail__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.2;
  }
  .ssc-home-rail__title b { font-weight: 700; }
  .ssc-home-rail__sub {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    letter-spacing: 0.04em;
    margin: 0;
    max-width: 540px;
    line-height: 1.6;
  }
  .ssc-home-rail__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  .ssc-home-rail__card {
    background: var(--ssc-white);
    border: var(--ssc-border-default);
    padding: 14px 14px 16px;
    transition: border-color 0.15s;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .ssc-home-rail__card:hover { border-color: var(--ssc-black); }
  .ssc-home-rail__img-wrap {
    aspect-ratio: 1;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .ssc-home-rail__img,
  .ssc-home-rail__img-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ssc-home-rail__img-placeholder {
    background: linear-gradient(135deg, #ececec, #c0c0c0);
  }
  .ssc-home-rail__name {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 4px;
  }
  .ssc-home-rail__meta {
    font-size: var(--ssc-fs-label, 12px);
    color: var(--ssc-text-meta);
    font-weight: 300;
    letter-spacing: 0.04em;
  }
  @media (max-width: 900px) {
    .ssc-home-rail__grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 600px) {
    .ssc-home-rail__grid {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 65%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 8px;
      gap: 12px;
    }
    .ssc-home-rail__card { scroll-snap-align: start; }
  }
/* END_SECTION:ssc-home-peer-reorders */

/* START_SECTION:ssc-home-seasonal-story (INDEX:100) */
.ssc-home-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--ssc-bg-app);
    margin-top: 32px;
    font-family: var(--ssc-font);
  }
  .ssc-home-story--right { direction: rtl; }
  .ssc-home-story--right > * { direction: ltr; }
  .ssc-home-story__media { min-height: 480px; position: relative; }
  .ssc-home-story__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ssc-home-story__img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 480px;
    background: linear-gradient(135deg, #c0c0c0 0%, #8a8a8a 50%, #4a4a4a 100%);
    position: relative;
  }
  .ssc-home-story__img-placeholder::after {
    content: attr(data-caption);
  }
  .ssc-home-story__text {
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ssc-home-story__eyebrow {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.30em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .ssc-home-story__title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0 0 24px;
  }
  .ssc-home-story__title b { font-weight: 700; }
  .ssc-home-story__body {
    font-size: var(--ssc-fs-body-md, 14px);
    line-height: 1.8;
    color: var(--ssc-text-muted);
    font-weight: 300;
    margin: 0 0 28px;
    max-width: 440px;
    letter-spacing: 0.02em;
  }
  .ssc-home-story__body b {
    font-weight: 700;
    color: var(--ssc-text-primary);
  }
  .ssc-home-story__cta {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.25em;
    font-weight: 700;
    color: var(--ssc-text-primary);
    text-transform: uppercase;
    border-bottom: 1px solid var(--ssc-text-primary);
    padding-bottom: 4px;
    text-decoration: none;
  }
  @media (max-width: 768px) {
    .ssc-home-story,
    .ssc-home-story--right { direction: ltr; grid-template-columns: 1fr; }
    .ssc-home-story__media { min-height: 320px; }
    .ssc-home-story__img-placeholder { min-height: 320px; }
    .ssc-home-story__text { padding: 40px 24px; }
  }
/* END_SECTION:ssc-home-seasonal-story */

/* START_SECTION:ssc-home-studio-notes (INDEX:101) */
.ssc-home-studio {
    padding: 64px 32px 24px;
    font-family: var(--ssc-font);
  }
  .ssc-home-studio__head { margin-bottom: 8px; }
  .ssc-home-studio__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.35em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .ssc-home-studio__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.2;
  }
  .ssc-home-studio__title b { font-weight: 700; }
  .ssc-home-studio__sub {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    letter-spacing: 0.04em;
    margin: 0 0 28px;
    max-width: 540px;
    line-height: 1.6;
  }
  .ssc-home-studio__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
  }

  /* The card is a link now, so it needs its own reset and affordances. */
  .ssc-home-studio__card {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--ssc-bg-app);
    border: var(--ssc-border-default);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
  }
  .ssc-home-studio__card:hover {
    border-color: var(--ssc-magenta);
    transform: translateY(-2px);
  }
  .ssc-home-studio__card-eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.30em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .ssc-home-studio__card-title {
    font-size: var(--ssc-fs-lead, 16px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 14px;
    line-height: 1.3;
  }
  .ssc-home-studio__card-body {
    font-size: var(--ssc-fs-body, 13px);
    line-height: 1.75;
    color: var(--ssc-text-muted);
    font-weight: 300;
    font-style: italic;
    margin: 0 0 14px;
  }
  .ssc-home-studio__card-body b {
    font-weight: 700;
    font-style: normal;
    color: var(--ssc-text-primary);
  }
  .ssc-home-studio__card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 8px;
  }
  .ssc-home-studio__card-sig {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 300;
    color: var(--ssc-text-meta);
    text-transform: uppercase;
  }
  .ssc-home-studio__card-cta {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-magenta);
  }

  .ssc-home-studio__all {
    display: inline-block;
    margin-top: 24px;
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ssc-text-primary);
    border-bottom: 1px solid var(--ssc-magenta);
    padding-bottom: 4px;
  }
  .ssc-home-studio__all:hover { color: var(--ssc-magenta); }

  .ssc-home-studio__locked {
    padding: 32px 28px;
    background: var(--ssc-bg-app);
    border: var(--ssc-border-default);
    max-width: 640px;
  }
  .ssc-home-studio__locked-copy {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    line-height: 1.7;
    color: var(--ssc-text-muted);
    margin: 0 0 18px;
  }
  .ssc-home-studio__locked-cta {
    display: inline-block;
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    color: var(--ssc-text-inverse, #fff);
    background: var(--ssc-black, #111);
    padding: 12px 26px;
    border-radius: 999px;
  }

  .ssc-home-studio__empty {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
  }

  @media (max-width: 900px) {
    .ssc-home-studio__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:ssc-home-studio-notes */

/* START_SECTION:ssc-market-specials-groups (INDEX:104) */
/* Type from the --ssc-fs-* tokens; px, never rem — 1rem is 10px in this theme. */
.ssc-msgroups {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px var(--ssc-page-pad, 32px) 48px;
  font-family: var(--ssc-font);
}
.ssc-msgroups[hidden] { display: none; }
.ssc-msgroups__heading {
  margin: 0 0 20px;
  font-size: var(--ssc-fs-cta, 13px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 700;
}
.ssc-msgroups__band { margin-bottom: 28px; }
.ssc-msgroups__band-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.2));
}
.ssc-msgroups__band-name {
  margin: 0;
  font-size: var(--ssc-fs-body-md, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.ssc-msgroups__band-count {
  font-size: var(--ssc-fs-body-sm, 12px);
  color: var(--ssc-text-muted);
}
/* A grid, never a slider — every design in a grouping has to be visible. */
.ssc-msgroups__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.ssc-msgroups__tile { display: flex; flex-direction: column; gap: 6px; }
.ssc-msgroups__tile--incart { opacity: 0.45; }
.ssc-msgroups__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--ssc-radius, 2px);
  background: rgba(0, 0, 0, 0.04);
}
.ssc-msgroups__name {
  font-size: var(--ssc-fs-body-sm, 12px);
  color: inherit;
  text-decoration: none;
  line-height: 1.3;
}
.ssc-msgroups__name:hover { text-decoration: underline; }
.ssc-msgroups__price {
  font-size: var(--ssc-fs-body-sm, 12px);
  color: var(--ssc-text-muted);
  font-variant-numeric: tabular-nums;
}
.ssc-msgroups__incart {
  font-size: var(--ssc-fs-eyebrow, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ssc-text-muted);
}
.ssc-msgroups__select {
  font-family: inherit;
  font-size: var(--ssc-fs-body-sm, 12px);
  padding: 6px 8px;
  border: var(--ssc-border-default, 0.5px solid rgba(0, 0, 0, 0.28));
  border-radius: var(--ssc-radius, 2px);
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  width: 100%;
}
.ssc-msgroups__btn {
  font-family: inherit;
  font-size: var(--ssc-fs-eyebrow, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--ssc-radius, 2px);
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  cursor: pointer;
}
.ssc-msgroups__btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.ssc-msgroups__error {
  margin-top: 10px;
  font-size: var(--ssc-fs-body-sm, 12px);
  color: rgba(180, 30, 30, 1);
}
@media screen and (max-width: 749px) {
  .ssc-msgroups { padding: 8px 16px 32px; }
  .ssc-msgroups__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* END_SECTION:ssc-market-specials-groups */

/* START_SECTION:ssc-merch-notes (INDEX:105) */
.ssc-mnotes {
    padding: 56px var(--ssc-page-pad, 32px) 80px;
    font-family: var(--ssc-font);
    max-width: 1180px;
    margin: 0 auto;
  }

  .ssc-mnotes__head { margin-bottom: 36px; }
  .ssc-mnotes__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.35em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .ssc-mnotes__title {
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 10px;
    line-height: 1.15;
  }
  .ssc-mnotes__title b { font-weight: 700; }
  .ssc-mnotes__sub {
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    margin: 0;
    max-width: 56ch;
  }

  /* Two-column reading layout */
  .ssc-mnotes__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    gap: 56px;
    align-items: start;
  }
  .ssc-mnotes__main { min-width: 0; }

  /* Sticky sidebar.
     z-index stays at 1: the Trade header group caps its stacking context at 4,
     and anything at or above that punches through an open megamenu. */
  .ssc-mnotes__aside {
    position: sticky;
    top: 96px;
    z-index: 1;
  }
  .ssc-mnotes__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid var(--ssc-border-light, #e8e8ec);
    padding-left: 18px;
  }
  .ssc-mnotes__nav-label {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.3em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-hint, #9a9aa4);
    margin-bottom: 12px;
  }
  .ssc-mnotes__nav-link {
    display: block;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid transparent;
    transition: opacity .15s;
  }
  .ssc-mnotes__nav-link:hover { opacity: .65; }
  .ssc-mnotes__nav-eyebrow {
    display: block;
    font-size: var(--ssc-fs-micro, 10px);
    letter-spacing: 0.28em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-hint, #9a9aa4);
    margin-bottom: 4px;
  }
  .ssc-mnotes__nav-title {
    display: block;
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    line-height: 1.35;
    color: var(--ssc-text-muted);
  }
  .ssc-mnotes__nav-link.is-active .ssc-mnotes__nav-title {
    color: var(--ssc-text-primary);
    font-weight: 500;
  }
  .ssc-mnotes__nav-link.is-active .ssc-mnotes__nav-eyebrow {
    color: var(--ssc-magenta);
  }

  /* One note at a time — only once JS has taken over. */
  .ssc-mnotes.is-enhanced .ssc-mnotes__note { display: none; }
  .ssc-mnotes.is-enhanced .ssc-mnotes__note.is-active { display: block; }

  /* Notes */
  .ssc-mnotes__note {
    padding-bottom: 56px;
    margin-bottom: 56px;
    border-bottom: 1px solid var(--ssc-border-light, #e8e8ec);
    scroll-margin-top: 96px;
  }
  .ssc-mnotes__note:last-child { border-bottom: 0; margin-bottom: 0; }
  .ssc-mnotes.is-enhanced .ssc-mnotes__note {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 24px;
  }
  .ssc-mnotes__note-eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.3em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .ssc-mnotes__note-title {
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 300;
    letter-spacing: 0.02em;
    margin: 0 0 18px;
    line-height: 1.2;
  }
  .ssc-mnotes__note-quote {
    font-size: 17px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: var(--ssc-text-primary);
    border-left: 2px solid var(--ssc-magenta);
    padding-left: 18px;
    margin: 0 0 28px;
    max-width: 62ch;
  }

  /* Rich text body */
  .ssc-mnotes__note-body {
    font-size: var(--ssc-fs-body-lg, 15px);
    font-weight: 300;
    line-height: 1.75;
    color: var(--ssc-text-primary);
    max-width: 68ch;
  }
  .ssc-mnotes__note-body p { margin: 0 0 16px; }
  .ssc-mnotes__note-body strong { font-weight: 600; }
  .ssc-mnotes__note-body ul,
  .ssc-mnotes__note-body ol { margin: 0 0 16px; padding-left: 22px; }
  .ssc-mnotes__note-body li { margin-bottom: 6px; }
  .ssc-mnotes__note-body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ssc-magenta);
    text-underline-offset: 3px;
    transition: color .15s;
  }
  .ssc-mnotes__note-body a:hover { color: var(--ssc-magenta); }

  /* Design card groups */
  .ssc-mnotes__designs { margin-top: 40px; }
  .ssc-mnotes__group + .ssc-mnotes__group { margin-top: 40px; }
  .ssc-mnotes__group-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--ssc-border-light, #e8e8ec);
  }
  .ssc-mnotes__group-label {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.28em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
  }
  .ssc-mnotes__group-sub {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--ssc-text-muted);
  }
  .ssc-mnotes__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ssc-grid-gap, 16px);
  }
  .ssc-mnotes__card-item { min-width: 0; }

  /* Colorway-pinned design card */
  .ssc-dcard { position: relative; }
  .ssc-dcard__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 2px;
    background: var(--ssc-bg-soft, #f6f6f8);
  }
  .ssc-dcard__media-link { display: block; width: 100%; height: 100%; }
  .ssc-dcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
  }
  .ssc-dcard:hover .ssc-dcard__media img { transform: scale(1.04); }
  .ssc-dcard__media-empty { width: 100%; height: 100%; }

  /* Hover add-to-cart. Hidden by opacity rather than display so the
     transition works and the button stays keyboard-reachable. */
  .ssc-dcard__add {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-family: var(--ssc-font);
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ssc-text-inverse, #fff);
    background: var(--ssc-black, #111);
    border: 0;
    border-radius: 999px;
    padding: 10px 8px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .ssc-dcard:hover .ssc-dcard__add,
  .ssc-dcard__add:focus-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .ssc-dcard__add[disabled] { opacity: 1; transform: none; cursor: default; }

  /* No hover on touch — show it permanently rather than make it unreachable. */
  @media (hover: none) {
    .ssc-dcard__add { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ssc-dcard__add { transition: none; transform: none; }
    .ssc-dcard:hover .ssc-dcard__media img { transform: none; }
  }

  .ssc-dcard__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    text-decoration: none;
    color: inherit;
  }
  .ssc-dcard__spec { color: var(--ssc-text-hint, #9a9aa4); }
  .ssc-dcard__status {
    margin: 4px 0 0;
    font-size: var(--ssc-fs-label, 12px);
    line-height: 1.4;
    min-height: 0;
  }
  .ssc-dcard__status.is-error { color: #b3261e; }
  .ssc-dcard__title {
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
  }
  .ssc-dcard:hover .ssc-dcard__title { color: var(--ssc-magenta); }
  .ssc-dcard__color {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
  }
  .ssc-dcard__price {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 400;
    color: var(--ssc-text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
  }

  @media (max-width: 900px) {
    .ssc-mnotes__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 600px) {
    .ssc-mnotes__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Starter kits */
  .ssc-mkit {
    margin-top: 40px;
    border: 1px solid var(--ssc-border-light, #e8e8ec);
    border-radius: var(--ssc-radius, 4px);
    padding: 24px;
    background: var(--ssc-bg-soft, #f6f6f8);
  }
  .ssc-mkit__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.3em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-magenta);
    margin-bottom: 8px;
  }
  .ssc-mkit__name {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
  }
  .ssc-mkit__blurb,
  .ssc-mkit__palette {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    line-height: 1.6;
    color: var(--ssc-text-muted);
    margin: 0 0 6px;
    max-width: 60ch;
  }
  .ssc-mkit__palette {
    font-style: italic;
    color: var(--ssc-text-hint, #9a9aa4);
  }

  .ssc-mkit__lines {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    border-top: 1px solid var(--ssc-border-light, #e8e8ec);
  }
  .ssc-mkit__line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ssc-border-light, #e8e8ec);
  }
  .ssc-mkit__line-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 2px;
    flex: 0 0 auto;
  }
  .ssc-mkit__line-text { flex: 1 1 auto; min-width: 0; }
  .ssc-mkit__line-slot {
    display: block;
    font-size: var(--ssc-fs-micro, 10px);
    letter-spacing: 0.26em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-hint, #9a9aa4);
    margin-bottom: 2px;
  }
  .ssc-mkit__line-title {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 500;
    color: var(--ssc-text-primary);
    text-decoration: none;
    margin-right: 6px;
  }
  .ssc-mkit__line-title:hover { color: var(--ssc-magenta); }
  .ssc-mkit__line-variant {
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 300;
    color: var(--ssc-text-muted);
  }
  .ssc-mkit__line-qty,
  .ssc-mkit__line-price {
    flex: 0 0 auto;
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 400;
    color: var(--ssc-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .ssc-mkit__line-price { min-width: 68px; text-align: right; }

  .ssc-mkit__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .ssc-mkit__summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .ssc-mkit__summary-count {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ssc-text-muted);
  }
  .ssc-mkit__summary-total {
    font-size: var(--ssc-fs-lead, 16px);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .ssc-mkit__cta {
    display: inline-block;
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    color: var(--ssc-text-inverse, #fff);
    background: var(--ssc-black, #111);
    border: 0;
    padding: 13px 30px;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity .15s;
  }
  .ssc-mkit__cta:hover { opacity: .85; }
  .ssc-mkit__cta[disabled] { opacity: .5; cursor: default; }

  .ssc-mkit__status {
    margin: 12px 0 0;
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 400;
    line-height: 1.5;
    min-height: 1em;
  }
  .ssc-mkit__status.is-error { color: #b3261e; }
  .ssc-mkit__status.is-success { color: var(--ssc-magenta); }
  .ssc-mkit__note-skipped {
    margin: 6px 0 0;
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: var(--ssc-text-hint, #9a9aa4);
  }

  .ssc-mkit__bundle {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
    flex-wrap: wrap;
  }
  .ssc-mkit__bundle-media img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
  }
  .ssc-mkit__bundle-body { flex: 1 1 240px; }
  .ssc-mkit__bundle-title {
    display: block;
    font-size: var(--ssc-fs-body-lg, 15px);
    font-weight: 500;
    color: var(--ssc-text-primary);
    text-decoration: none;
    margin-bottom: 4px;
  }
  .ssc-mkit__bundle-price {
    font-size: var(--ssc-fs-lead, 16px);
    font-weight: 500;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 640px) {
    .ssc-mkit { padding: 18px; }
    .ssc-mkit__line-price { display: none; }
    .ssc-mkit__foot { flex-direction: column; align-items: stretch; }
    .ssc-mkit__cta { width: 100%; }
  }

  .ssc-mnotes__note-sig {
    margin-top: 32px;
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ssc-text-muted);
  }

  /* Gate */
  .ssc-mnotes__gate {
    border: 1px solid var(--ssc-border-light, #e8e8ec);
    border-radius: var(--ssc-radius, 4px);
    padding: 40px 32px;
    text-align: center;
    background: var(--ssc-bg-soft, #f6f6f8);
  }
  .ssc-mnotes__gate-eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.3em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-magenta);
    margin-bottom: 12px;
  }
  .ssc-mnotes__gate-copy {
    font-size: var(--ssc-fs-body-lg, 15px);
    font-weight: 300;
    line-height: 1.6;
    color: var(--ssc-text-muted);
    margin: 0 auto 20px;
    max-width: 46ch;
  }
  .ssc-mnotes__gate-cta {
    display: inline-block;
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    color: var(--ssc-text-inverse, #fff);
    background: var(--ssc-black, #111);
    padding: 12px 28px;
    border-radius: 999px;
  }

  .ssc-mnotes__empty {
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 300;
    color: var(--ssc-text-muted);
  }

  /* Sidebar drops above the article and becomes a scrolling rail */
  @media (max-width: 900px) {
    .ssc-mnotes { padding: 40px 20px 56px; }
    .ssc-mnotes__layout {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .ssc-mnotes__aside {
      position: static;
      order: -1;
    }
    .ssc-mnotes__nav {
      flex-direction: row;
      overflow-x: auto;
      gap: 8px;
      border-left: 0;
      padding-left: 0;
      padding-bottom: 4px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .ssc-mnotes__nav::-webkit-scrollbar { display: none; }
    .ssc-mnotes__nav-label { display: none; }
    .ssc-mnotes__nav-link {
      flex: 0 0 auto;
      max-width: 62vw;
      padding: 8px 14px;
      border: 1px solid var(--ssc-border-light, #e8e8ec);
      border-radius: 999px;
    }
    .ssc-mnotes__nav-link.is-active {
      border-color: var(--ssc-magenta);
    }
    .ssc-mnotes__nav-eyebrow { display: none; }
    .ssc-mnotes__nav-title {
      font-size: var(--ssc-fs-body-sm, 12px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
/* END_SECTION:ssc-merch-notes */

/* START_SECTION:ssc-product-bulk-matrix (INDEX:106) */
.ssc-pdp-matrix {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px;
    font-family: var(--ssc-font);
  }
  .ssc-pdp-matrix__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .ssc-pdp-matrix__h2 {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.30em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
  }
  .ssc-pdp-matrix__meta {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.20em;
    font-weight: 300;
    color: var(--ssc-text-meta);
    text-transform: uppercase;
  }
  .ssc-pdp-matrix__family-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 0.5px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
  }
  .ssc-pdp-matrix__family-link:hover {
    color: var(--ssc-text-primary);
    border-bottom-color: currentColor;
  }
  .ssc-pdp-matrix__sub {
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 300;
    color: var(--ssc-text-meta);
    letter-spacing: 0.05em;
    margin: 0 0 20px;
  }
  .ssc-pdp-matrix__filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
  }
  .ssc-pdp-matrix__filter-bar[hidden] { display: none; }
  /* Row arrived at from a color-family card's deep link. Tinted and rule-marked
     rather than outlined, because the row is a table row inside a scrolling
     matrix and an outline would be clipped by the horizontal scroll container.
     The tint fades after the scroll lands so it reads as "here it is" rather
     than a permanent selected state — nothing is selected, the grid takes
     quantities on every row. */
  .ssc-pdp-matrix tr.is-deeplinked > * {
    background: var(--ssc-accent-soft, #f6f1e8);
    box-shadow: inset 0 1px 0 var(--ssc-text-primary, #1a1a1a),
                inset 0 -1px 0 var(--ssc-text-primary, #1a1a1a);
    animation: ssc-deeplink-fade 4s ease-out 1.2s forwards;
  }
  @keyframes ssc-deeplink-fade {
    to { background: transparent; box-shadow: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ssc-pdp-matrix tr.is-deeplinked > * { animation: none; }
  }
  .ssc-pdp-matrix__filter-pill {
    font-family: var(--ssc-font);
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 7px 14px;
    border: 0.5px solid var(--ssc-border);
    background: var(--ssc-white);
    color: var(--ssc-text-primary);
    border-radius: var(--ssc-radius);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  }
  .ssc-pdp-matrix__filter-pill:hover {
    border-color: var(--ssc-black);
  }
  .ssc-pdp-matrix__filter-pill[aria-pressed="true"] {
    background: var(--ssc-black);
    color: var(--ssc-text-inverse);
    border-color: var(--ssc-black);
  }
  .ssc-pdp-matrix__filter-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.18);
  }
  /* Desktop: the grid fits, so let it render normally — no scroll container,
     which lets the header be vertically sticky. On mobile (≤767px) the whole
     table reflows into per-colorway cards (see that media block below), so it
     never needs horizontal scroll and never exceeds the viewport width. */
  .ssc-pdp-matrix__table-wrap { overflow: visible; }
  .ssc-pdp-matrix__table {
    width: 100%;
    border-collapse: collapse;
    border: var(--ssc-border-default);
    min-width: 600px;
  }
  .ssc-pdp-matrix__table th {
    background: var(--ssc-bg-app);
    padding: 10px 8px;
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    border-right: var(--ssc-border-default);
    color: var(--ssc-text-primary);
    /* Header is intentionally NOT sticky. A sticky table header detaches and
       rides OVER the grid rows as you scroll — the "topper scrolls over the
       color grid" both on desktop and on landscape phones. It now scrolls away
       with the table; the sticky footer keeps the running subtotal in view. */
    box-shadow: inset 0 -0.5px 0 var(--ssc-border);
  }
  .ssc-pdp-matrix__table th:first-child {
    text-align: left;
    padding-left: 16px;
    background: var(--ssc-bg-app);
  }
  .ssc-pdp-matrix__table th:last-child { border-right: none; background: var(--ssc-bg-soft); }
  .ssc-pdp-matrix__th-sub { font-weight: 300; letter-spacing: 0.10em; }
  .ssc-pdp-matrix__table td {
    padding: 0;
    border-bottom: var(--ssc-border-light-default);
    border-right: var(--ssc-border-light-default);
    text-align: center;
    vertical-align: middle;
  }
  .ssc-pdp-matrix__table td:last-child { border-right: none; }
  .ssc-pdp-matrix__table tr:last-child td { border-bottom: none; }
  .ssc-pdp-matrix__table tr:hover td { background: var(--ssc-bg-app); }
  .ssc-pdp-matrix__row-label {
    padding: 12px 16px !important;
    text-align: left !important;
    position: sticky;
    left: 0;
    background: var(--ssc-white);
  }
  .ssc-pdp-matrix__row-label-inner {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ssc-pdp-matrix__row-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    background-color: var(--ssc-bg-soft);
  }
  .ssc-pdp-matrix__row-swatch--empty {
    background-color: var(--ssc-bg-soft);
  }
  .ssc-pdp-matrix__row-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .ssc-pdp-matrix__row-name {
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
  }
  .ssc-pdp-matrix__row-surcharge {
    align-self: flex-start;
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-black);
    background: var(--ssc-magenta-bg);
    padding: 2px 6px;
    border-radius: var(--ssc-radius);
    line-height: 1.2;
  }
  /* Accordion-only bits — present in the DOM at all sizes but shown only in the
     mobile card layout (≤767px re-shows them). In the desktop grid the stepper
     collapses to just the number input. */
  .ssc-pdp-matrix__row-price,
  .ssc-pdp-matrix__row-chevron,
  .ssc-pdp-matrix__plating,
  .ssc-pdp-matrix__step { display: none; }
  .ssc-pdp-matrix__qty {
    width: 52px;
    height: 32px;
    border: 0.5px solid #ddd;
    background: var(--ssc-white);
    font-family: inherit;
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 700;
    text-align: center;
    color: var(--ssc-text-primary);
    border-radius: var(--ssc-radius);
  }
  .ssc-pdp-matrix__qty:focus {
    outline: none;
    border-color: var(--ssc-black);
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08);
  }
  .ssc-pdp-matrix__qty--has-val {
    background: var(--ssc-magenta-bg);
    border-color: var(--ssc-magenta);
    color: var(--ssc-text-primary);
  }
  .ssc-pdp-matrix__qty-cell { padding: 8px !important; }
  .ssc-pdp-matrix__qty-cell--unavail,
  .ssc-pdp-matrix__qty-cell--missing {
    color: var(--ssc-text-hint);
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 300;
  }
  .ssc-pdp-matrix__row-total {
    padding: 12px 16px !important;
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 700;
    color: var(--ssc-text-primary);
    background: var(--ssc-bg-app);
  }
  .ssc-pdp-matrix__row-total--zero {
    color: var(--ssc-text-hint);
    font-weight: 300;
  }
  .ssc-pdp-matrix__expand-row { background: var(--ssc-bg-app); cursor: pointer; }
  .ssc-pdp-matrix__expand-row td {
    padding: 14px 16px !important;
    text-align: center !important;
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-text-primary);
    border-bottom: none !important;
  }
  .ssc-pdp-matrix__expand-row:hover td { background: var(--ssc-bg-soft); }

  .ssc-pdp-matrix__footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 20px 24px;
    background: var(--ssc-black);
    color: var(--ssc-text-inverse);
    margin-top: 16px;
    border-radius: var(--ssc-radius);
    /* Stick to the bottom of the viewport while the matrix is in view, so the
       running subtotal + add button stay reachable once the header price row
       has scrolled off. Unsticks naturally when the section scrolls past. */
    position: sticky;
    bottom: 12px;
    z-index: 5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  }
  .ssc-pdp-matrix__totals {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
  }
  .ssc-pdp-matrix__totals-label {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.25em;
    font-weight: 300;
    color: var(--ssc-text-on-dark-meta);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
  }
  .ssc-pdp-matrix__totals-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--ssc-text-inverse);
    letter-spacing: 0.02em;
  }
  .ssc-pdp-matrix__totals-val--accent { color: var(--ssc-magenta); }
  /* Reference base price — lighter than the live Pieces/Subtotal figures. */
  .ssc-pdp-matrix__totals-val--from { font-weight: 300; }
  .ssc-pdp-matrix__btn {
    background: var(--ssc-magenta);
    color: var(--ssc-text-inverse);
    border: none;
    padding: 14px 28px;
    font-family: var(--ssc-font);
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--ssc-radius);
  }
  .ssc-pdp-matrix__btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .ssc-pdp-matrix__error {
    margin-top: 12px;
    padding: 12px 16px;
    background: #fff8fd;
    border: 0.5px solid var(--ssc-magenta);
    border-radius: var(--ssc-radius);
    font-size: var(--ssc-fs-body-sm, 12px);
    color: var(--ssc-text-primary);
  }
  .ssc-pdp-matrix__error[hidden] { display: none; }

  /* Footer pricing summary — shown only on mobile (the header carries it on
     desktop). Spans the full footer width above the totals row. */
  .ssc-pdp-matrix__foot-summary {
    display: none;
    grid-column: 1 / -1;
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.03em;
    color: var(--ssc-text-on-dark-meta);
    padding-bottom: 12px;
    margin-bottom: 2px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.14);
  }

  @media (max-width: 768px) {
    .ssc-pdp-matrix { padding: 24px 16px; }
    .ssc-pdp-matrix__footer {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .ssc-pdp-matrix__btn { width: 100%; }
  }

  /* ── Mobile: reflow the grid into per-colorway ACCORDION cards ─────────────
     A colorway × plating grid can't fit a phone width without horizontal
     scroll, and a nested horizontal-scroll container fights iOS vertical scroll
     (the "drift") and pushes the page past the viewport. So ≤767px each
     colorway becomes a tap-to-open card: swatch + name + price in the header,
     each plating a labelled stepper row when expanded. No horizontal scroll;
     nothing exceeds the viewport; the sticky footer + summary stay. */
  @media (max-width: 767px) {
    .ssc-pdp-matrix__table,
    .ssc-pdp-matrix__table tbody,
    .ssc-pdp-matrix__table tr,
    .ssc-pdp-matrix__table td {
      display: block;
      width: auto;
    }
    .ssc-pdp-matrix__table { min-width: 0; border: none; }
    .ssc-pdp-matrix__table thead { display: none; }
    .ssc-pdp-matrix__table tr {
      border: var(--ssc-border-default);
      border-radius: var(--ssc-radius);
      margin-bottom: 10px;
      overflow: hidden;
      background: var(--ssc-white);
    }
    .ssc-pdp-matrix__table tr:hover td { background: transparent; }
    .ssc-pdp-matrix__table td { border-right: none; }

    /* Re-show accordion-only bits; hide the redundant desktop badge + row total */
    .ssc-pdp-matrix__row-price { display: block; }
    .ssc-pdp-matrix__row-chevron { display: block; }
    .ssc-pdp-matrix__plating { display: block; }
    .ssc-pdp-matrix__step { display: inline-flex; }
    .ssc-pdp-matrix__row-surcharge { display: none; }
    .ssc-pdp-matrix__row-total { display: none !important; }
    .ssc-pdp-matrix__foot-summary:not([hidden]) { display: block; }

    /* Card header (whole row is the tap target) */
    .ssc-pdp-matrix__row-label {
      position: static !important;
      left: auto;
      padding: 0 !important;
      background: var(--ssc-white) !important;
      cursor: pointer;
    }
    .ssc-pdp-matrix__row-label-inner { gap: 12px; padding: 12px 14px; }
    .ssc-pdp-matrix__row-swatch { width: 30px; height: 30px; }
    .ssc-pdp-matrix__row-text { flex: 1 1 auto; gap: 2px; min-width: 0; }
    .ssc-pdp-matrix__row-name {
      font-size: var(--ssc-fs-body-md, 14px);
      letter-spacing: 0.01em;
      text-transform: none;
    }
    .ssc-pdp-matrix__row-price { font-size: var(--ssc-fs-body, 13px); font-weight: 700; color: var(--ssc-text-primary); }
    .ssc-pdp-matrix__row-price-delta { font-weight: 400; color: var(--ssc-text-muted); }
    .ssc-pdp-matrix__row-chevron {
      width: 9px; height: 9px;
      border-right: 2px solid var(--ssc-text-meta);
      border-bottom: 2px solid var(--ssc-text-meta);
      transform: rotate(45deg);
      transition: transform 150ms ease;
      flex-shrink: 0;
      margin: 0 6px 4px 0;
    }
    .ssc-pdp-matrix__card--open .ssc-pdp-matrix__row-chevron { transform: rotate(-135deg); margin: 4px 6px 0 0; }

    /* Selected cards get an accent so they stand out when collapsed */
    .ssc-pdp-matrix__card--has-qty { border-color: var(--ssc-magenta); }
    .ssc-pdp-matrix__card--has-qty .ssc-pdp-matrix__row-price { color: var(--ssc-magenta); }

    /* Plating rows — hidden until the card is open */
    .ssc-pdp-matrix__qty-cell { display: none !important; }
    .ssc-pdp-matrix__card--open .ssc-pdp-matrix__qty-cell {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: left !important;
      padding: 9px 14px !important;
      border-top: var(--ssc-border-light-default);
    }
    .ssc-pdp-matrix__plating { font-size: var(--ssc-fs-body, 13px); color: var(--ssc-text-primary); }
    .ssc-pdp-matrix__plating-sc { color: #2f6fed; font-weight: 600; }
    .ssc-pdp-matrix__na { color: var(--ssc-text-hint); font-size: var(--ssc-fs-body-lg, 15px); padding-right: 8px; }

    /* Stepper — circular − / + around a borderless number */
    .ssc-pdp-matrix__stepper { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .ssc-pdp-matrix__step {
      width: 34px; height: 34px;
      border: 1px solid var(--ssc-border);
      background: var(--ssc-white);
      border-radius: 50%;
      font-size: 20px; line-height: 1;
      color: var(--ssc-text-primary);
      cursor: pointer;
      align-items: center; justify-content: center;
      padding: 0;
      -webkit-appearance: none; appearance: none;
    }
    .ssc-pdp-matrix__step:active { background: var(--ssc-bg-app); }
    .ssc-pdp-matrix__qty {
      width: 30px !important; height: auto;
      border: none !important; background: transparent !important; box-shadow: none !important;
      font-size: var(--ssc-fs-body-lg, 15px); font-weight: 700; text-align: center; padding: 0;
      -moz-appearance: textfield;
    }
    .ssc-pdp-matrix__qty--has-val { background: transparent !important; color: var(--ssc-magenta); }
    .ssc-pdp-matrix__qty::-webkit-outer-spin-button,
    .ssc-pdp-matrix__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .ssc-pdp-matrix__expand-row td { display: block !important; padding: 14px !important; }
  }
/* END_SECTION:ssc-product-bulk-matrix */

/* START_SECTION:ssc-product-custom-request-block (INDEX:107) */
.ssc-pdp-custom {
    max-width: 1280px;
    margin: 16px auto 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 24px 28px;
    background: var(--ssc-black);
    color: var(--ssc-text-inverse);
    border-left: 3px solid var(--ssc-magenta);
    font-family: var(--ssc-font);
  }
  .ssc-pdp-custom__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.30em;
    font-weight: 700;
    color: var(--ssc-magenta);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .ssc-pdp-custom__title {
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
  }
  .ssc-pdp-custom__title b { font-weight: 700; }
  .ssc-pdp-custom__body {
    font-size: var(--ssc-fs-body, 13px);
    font-weight: 300;
    line-height: 1.6;
    color: #ccc;
    max-width: 520px;
    margin: 0;
  }
  .ssc-pdp-custom__body b { color: var(--ssc-text-inverse); font-weight: 700; }
  .ssc-pdp-custom__body p { margin: 0; }
  .ssc-pdp-custom__btn {
    display: inline-block;
    background: var(--ssc-magenta);
    color: var(--ssc-text-inverse);
    border: 1px solid var(--ssc-magenta);
    padding: 14px 24px;
    font-family: var(--ssc-font);
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.20em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--ssc-radius);
    white-space: nowrap;
  }
  @media (max-width: 768px) {
    .ssc-pdp-custom { grid-template-columns: 1fr; }
  }
/* END_SECTION:ssc-product-custom-request-block */

/* START_SECTION:ssc-product-top (INDEX:108) */
.ssc-pdp-top { font-family: var(--ssc-font); }
  .ssc-pdp-top__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 32px;
    border-bottom: var(--ssc-border-default);
  }

  /* Gallery */
  /* min-width:0 lets this grid column shrink below the image's intrinsic width
     — without it the column keeps the photo's natural size and pushes the whole
     page wider than the viewport on mobile (the overflow you saw). */
  .ssc-pdp-top__gallery { min-width: 0; }
  .ssc-pdp-top__gallery-main {
    /* SSC product photography is 1600x2200 (portrait 8:11). Match the
       container ratio so the image fits without cropping. */
    aspect-ratio: 1600 / 2200;
    max-width: 100%;
    background: #ffffff;
    overflow: hidden;
    border-radius: var(--ssc-radius);
  }
  .ssc-pdp-top__gallery-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }
  .ssc-pdp-top__gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ssc-text-meta);
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    font-weight: 300;
  }
  .ssc-pdp-top__gallery-caption {
    margin: 10px 0 0;
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ssc-text-muted);
  }
  .ssc-pdp-top__gallery-thumbs {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .ssc-pdp-top__gallery-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 0.5px solid transparent;
    background: var(--ssc-bg-soft);
    cursor: pointer;
    padding: 0;
    border-radius: var(--ssc-radius);
    overflow: hidden;
  }
  .ssc-pdp-top__gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ssc-pdp-top__gallery-thumb { transition: border-color 120ms ease; }
  .ssc-pdp-top__gallery-thumb:hover { border-color: var(--ssc-text-meta); }
  .ssc-pdp-top__gallery-thumb--active,
  .ssc-pdp-top__gallery-thumb--active:hover { border-color: var(--ssc-black); }

  /* Meta */
  /* min-width:0 so long SKU/description tokens can't force the column (and the
     page) wider than the viewport. */
  .ssc-pdp-top__meta { display: flex; flex-direction: column; min-width: 0; }
  .ssc-pdp-top__eyebrow {
    font-size: var(--ssc-fs-label, 12px);
    letter-spacing: 0.30em;
    font-weight: 300;
    color: var(--ssc-text-meta);
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  a.ssc-pdp-top__eyebrow--link {
    display: inline-block;
    text-decoration: none;
    border-bottom: 0.5px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
  }
  a.ssc-pdp-top__eyebrow--link:hover {
    color: var(--ssc-text-primary);
    border-bottom-color: currentColor;
  }
  .ssc-pdp-top__title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 200;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 4px;
    line-height: 1.1;
  }
  .ssc-pdp-top__title b { font-weight: 700; }
  .ssc-pdp-top__subtitle {
    font-size: var(--ssc-fs-body-sm, 12px);
    letter-spacing: 0.15em;
    font-weight: 300;
    color: var(--ssc-text-muted);
    text-transform: uppercase;
    margin: 0 0 24px;
  }
  .ssc-pdp-top__price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 16px 0;
    border-top: var(--ssc-border-default);
    border-bottom: var(--ssc-border-default);
    margin-bottom: 20px;
  }
  .ssc-pdp-top__price-label {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.25em;
    font-weight: 300;
    color: var(--ssc-text-meta);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
  }
  .ssc-pdp-top__price-val {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .ssc-pdp-top__price-val--muted {
    font-weight: 300;
    color: var(--ssc-text-muted);
  }
  /* When the pricing-summary line is present, drop the price row's bottom
     border/margin so the summary's own hairline (below it) is the single
     divider under the price block. */
  .ssc-pdp-top__price-row--with-summary {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 12px;
  }
  .ssc-pdp-top__price-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: var(--ssc-border-default);
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.04em;
    font-weight: 300;
    color: var(--ssc-text-muted);
  }
  .ssc-pdp-top__price-summary-item b {
    font-weight: 700;
    color: var(--ssc-text-primary);
  }
  .ssc-pdp-top__price-summary-sep {
    color: var(--ssc-text-hint);
  }
  .ssc-pdp-top__desc {
    font-size: var(--ssc-fs-body, 13px);
    line-height: 1.7;
    color: var(--ssc-text-muted);
    font-weight: 300;
    margin: 0 0 20px;
  }
  .ssc-pdp-top__sku {
    background: var(--ssc-bg-app);
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: var(--ssc-radius);
  }
  .ssc-pdp-top__sku-label {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.25em;
    font-weight: 700;
    color: var(--ssc-text-primary);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .ssc-pdp-top__sku-format {
    font-family: var(--ssc-font-mono);
    font-size: var(--ssc-fs-body-sm, 12px);
    color: var(--ssc-text-muted);
    letter-spacing: 0.05em;
  }
  .ssc-pdp-top__sku-format b {
    color: var(--ssc-magenta);
    font-weight: 700;
  }
  .ssc-pdp-top__sku-example {
    font-family: var(--ssc-font-mono);
    color: var(--ssc-text-meta);
  }

  /* Info cards (Lead Time, Packaging, Reorder Cadence) */
  .ssc-pdp-top__info-cards {
    margin-top: 16px;
    padding-top: 16px;
    border-top: var(--ssc-border-default);
    display: grid;
    /* auto-fit so the card row flows for 3 (Lead Time · Packaging · Size) or
       4 (+ Custom From) without leaving an orphan on its own full-width row. */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
  }
  .ssc-pdp-top__info-label {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.25em;
    font-weight: 700;
    color: var(--ssc-text-primary);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .ssc-pdp-top__info-val {
    font-size: var(--ssc-fs-body-sm, 12px);
    font-weight: 700;
    color: var(--ssc-text-primary);
    line-height: 1.5;
  }
  .ssc-pdp-top__info-caption {
    font-size: var(--ssc-fs-cta, 13px);
    font-weight: 300;
    color: var(--ssc-text-muted);
    line-height: 1.5;
    margin-top: 4px;
  }

  @media (max-width: 768px) {
    .ssc-pdp-top__inner {
      grid-template-columns: 1fr;
      padding: 20px;
      gap: 24px;
    }
    .ssc-pdp-top__info-cards { grid-template-columns: 1fr; }
  }
/* END_SECTION:ssc-product-top */

/* START_SECTION:ssc-starter-kits (INDEX:109) */
.ssc-skits {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 24px 96px;
    font-family: var(--ssc-font, 'Josefin Sans', system-ui, sans-serif);
    color: var(--ssc-text-primary, #1a1a1a);
  }

  .ssc-skits__head { max-width: 68ch; margin-bottom: 32px; }
  .ssc-skits__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.3em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-magenta, #ff12df);
    margin-bottom: 10px;
  }
  .ssc-skits__title {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 200;
    letter-spacing: 0.01em;
    line-height: 1.15;
    margin: 0 0 12px;
  }
  .ssc-skits__title b { font-weight: 500; }
  .ssc-skits__sub {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ssc-text-muted, #555);
    margin: 0;
  }

  /* Trade gate */
  .ssc-skits__gate {
    border: 1px solid var(--ssc-border, #e5e5e5);
    border-radius: var(--ssc-radius, 4px);
    background: var(--ssc-magenta-bg, #fff8fd);
    padding: 24px;
    margin-bottom: 32px;
    max-width: 60ch;
  }
  .ssc-skits__gate-eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.3em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-magenta, #ff12df);
    margin-bottom: 8px;
  }
  .ssc-skits__gate-copy {
    font-size: var(--ssc-fs-lead, 16px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ssc-text-muted, #555);
    margin: 0 0 14px;
  }
  .ssc-skits__gate-cta {
    display: inline-block;
    padding: 10px 22px;
    background: var(--ssc-black, #1a1a1a);
    color: var(--ssc-text-inverse, #fff);
    text-decoration: none;
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--ssc-radius, 4px);
  }

  /* Jump links */
  .ssc-skits__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ssc-border-light, #f0f0f0);
  }
  .ssc-skits__nav-link {
    font-size: var(--ssc-fs-label, 12px);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ssc-text-muted, #555);
    border: 1px solid var(--ssc-border, #e5e5e5);
    border-radius: 999px;
    padding: 8px 16px;
    transition: color .15s, border-color .15s;
  }
  .ssc-skits__nav-link:hover {
    color: var(--ssc-magenta, #ff12df);
    border-color: var(--ssc-magenta, #ff12df);
  }

  .ssc-skits__list { display: grid; gap: 56px; }
  .ssc-skits__empty,
  .ssc-skits__footnote {
    font-size: var(--ssc-fs-body-lg, 15px);
    font-weight: 400;
    color: var(--ssc-text-muted, #555);
  }
  .ssc-skits__footnote {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--ssc-border-light, #f0f0f0);
    max-width: 70ch;
  }

  /* ---- one kit panel ---- */
  .ssc-skit {
    border: 1px solid var(--ssc-border, #e5e5e5);
    border-radius: var(--ssc-radius, 4px);
    padding: 28px;
    background: var(--ssc-white, #fff);
    /* Trade's header is sticky; jump links must clear it. */
    scroll-margin-top: calc(var(--header-height, 0px) + 24px);
  }
  .ssc-skit__head { margin-bottom: 22px; max-width: 62ch; }
  .ssc-skit__eyebrow {
    font-size: var(--ssc-fs-eyebrow, 11px);
    letter-spacing: 0.3em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ssc-magenta, #ff12df);
    margin-bottom: 8px;
  }
  .ssc-skit__name {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0 0 10px;
  }
  .ssc-skit__blurb,
  .ssc-skit__palette {
    font-size: var(--ssc-fs-lead, 16px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ssc-text-muted, #555);
    margin: 0 0 6px;
  }
  .ssc-skit__palette {
    font-style: italic;
    color: var(--ssc-text-hint, #aaa);
  }

  {%- comment -%}
    Tile text is floored at 12px / weight 400 — the product information on a
    card has to stay legible next to the imagery, so nothing here drops into
    the 9-11px tracked-label range used for eyebrows and buttons. The column
    minimum is sized off that floor: at 132px the variant line wrapped to three
    or four lines once it was no longer 11px.
  {%- endcomment -%}
  .ssc-skit__tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
    gap: 26px 18px;
  }
  .ssc-skit__tile-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .ssc-skit__tile-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--ssc-bg-soft, #f0f0f0);
    border-radius: var(--ssc-radius, 4px);
    overflow: hidden;
    margin-bottom: 10px;
  }
  .ssc-skit__tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
  }
  .ssc-skit__tile-link:hover .ssc-skit__tile-media img { transform: scale(1.04); }
  .ssc-skit__tile-empty { display: block; width: 100%; height: 100%; }
  .ssc-skit__tile-qty {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: var(--ssc-black, #1a1a1a);
    color: var(--ssc-text-inverse, #fff);
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 400;
    letter-spacing: 0.06em;
    padding: 4px 11px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
  }
  .ssc-skit__tile-title {
    display: block;
    font-size: var(--ssc-fs-body-lg, 15px);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.35;
  }
  .ssc-skit__tile-link:hover .ssc-skit__tile-title { color: var(--ssc-magenta, #ff12df); }
  .ssc-skit__tile-variant {
    display: block;
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 400;
    color: var(--ssc-text-muted, #555);
    line-height: 1.4;
    margin-top: 3px;
  }
  .ssc-skit__tile-price {
    display: block;
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 400;
    /* was --ssc-text-meta (#888) — too faint against the imagery at this size */
    color: var(--ssc-text-muted, #555);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }

  .ssc-skit__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--ssc-border-light, #f0f0f0);
  }
  .ssc-skit__summary { display: flex; align-items: baseline; gap: 14px; }
  .ssc-skit__summary-count {
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ssc-text-muted, #555);
  }
  .ssc-skit__summary-total {
    font-size: 20px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  .ssc-skit__cta {
    border: 0;
    cursor: pointer;
    padding: 13px 30px;
    background: var(--ssc-black, #1a1a1a);
    color: var(--ssc-text-inverse, #fff);
    font-family: inherit;
    font-size: var(--ssc-fs-cta, 13px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: var(--ssc-radius, 4px);
    transition: background .15s;
  }
  .ssc-skit__cta:hover { background: var(--ssc-magenta, #ff12df); }
  .ssc-skit__cta[disabled] { opacity: .55; cursor: default; }

  .ssc-skit__status {
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 400;
    margin: 12px 0 0;
    min-height: 1em;
  }
  .ssc-skit__status.is-error { color: #b3261e; }
  .ssc-skit__status.is-success { color: #2c5530; }
  .ssc-skit__note-skipped {
    font-size: var(--ssc-fs-body-md, 14px);
    font-weight: 400;
    color: var(--ssc-text-muted, #555);
    margin: 6px 0 0;
  }
  .ssc-skit__empty {
    font-size: var(--ssc-fs-body-lg, 15px);
    font-weight: 400;
    color: var(--ssc-text-muted, #555);
    margin: 0;
  }

  @media (max-width: 640px) {
    .ssc-skits { padding: 32px 16px 64px; }
    .ssc-skit { padding: 20px; }
    .ssc-skit__tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 14px; }
    .ssc-skit__foot { flex-direction: column; align-items: stretch; }
    .ssc-skit__cta { width: 100%; }
  }
/* END_SECTION:ssc-starter-kits */