/* ==========================================================================
   She's So Crafty Goods, main stylesheet.
   Tokens and above-the-fold rules live in critical.css, which is inlined.
   This file carries everything below the fold plus the shared components.
   ========================================================================== */

/* ---------- shared layout ---------- */

.ssc-main { display: block; }

.ssc-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--ssc-section);
}

.ssc-flow { padding-block: var(--ssc-section); }
.ssc-flow > * + * { margin-top: 1.75rem; }

.ssc-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
  position: relative;
  z-index: 1;
}
.ssc-sechead__title {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1;
}
.ssc-sechead__link {
  font-family: var(--ssc-f-ui);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ssc-magenta);
  text-underline-offset: 3px;
}

.ssc-pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.ssc-pagehead__title {
  font-family: var(--ssc-f-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  position: relative;
  z-index: 1;
}
.ssc-pagehead__term { color: var(--ssc-magenta); }
.ssc-pagehead__meta {
  display: block;
  font-family: var(--ssc-f-ui);
  font-size: .85rem;
  color: var(--ssc-neutral);
  margin-top: .6rem;
  position: relative;
  z-index: 1;
}

/* ---------- trust bar ---------- */

.ssc-ticker {
  background: var(--ssc-turq);
  color: #fff;
  border-block: var(--ssc-rule) solid var(--ssc-ink);
  overflow: hidden;
}
.ssc-ticker__track {
  display: flex;
  width: max-content;
}
.ssc-ticker__text {
  font-family: var(--ssc-f-ui);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  padding: .7rem 1.5rem;
  white-space: nowrap;
}
.ssc-ticker__text[aria-hidden="true"] { display: none; }

/* ---------- grids and cards ---------- */

.ssc-grid {
  display: grid;
  gap: var(--ssc-gap);
  list-style: none;
  position: relative;
  z-index: 1;
}
.ssc-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ssc-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ssc-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ssc-postgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ssc-gap);
}

.ssc-card {
  display: flex;
  flex-direction: column;
  background: var(--ssc-paper);
  border: var(--ssc-rule) solid var(--ssc-ink);
  border-radius: var(--ssc-radius);
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-ink);
  padding: .5rem;
  transition: transform var(--ssc-mid) var(--ssc-ease), box-shadow var(--ssc-mid) var(--ssc-ease);
}
.ssc-card:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--ssc-offset) + 2px) calc(var(--ssc-offset) + 2px) 0 var(--ssc-ink); }

/* The offset shadow rotates through the palette so a grid does not read as
   one flat block of navy. Position based, so it is stable as items change. */
.ssc-grid--products > .ssc-card:nth-child(4n+2) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-turq); }
.ssc-grid--products > .ssc-card:nth-child(4n+3) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-magenta); }
.ssc-grid--products > .ssc-card:nth-child(4n+4) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-mustard); }
.ssc-grid--products > .ssc-card:nth-child(4n+2):hover { box-shadow: calc(var(--ssc-offset) + 2px) calc(var(--ssc-offset) + 2px) 0 var(--ssc-turq); }
.ssc-grid--products > .ssc-card:nth-child(4n+3):hover { box-shadow: calc(var(--ssc-offset) + 2px) calc(var(--ssc-offset) + 2px) 0 var(--ssc-magenta); }
.ssc-grid--products > .ssc-card:nth-child(4n+4):hover { box-shadow: calc(var(--ssc-offset) + 2px) calc(var(--ssc-offset) + 2px) 0 var(--ssc-mustard); }

.ssc-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ssc-ground-2);
  aspect-ratio: 1;
}
.ssc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.ssc-card__body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .65rem .35rem .35rem;
  flex: 1;
}
.ssc-card__link { text-decoration: none; }
.ssc-card__title {
  font-family: var(--ssc-f-ui);
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.35;
}
.ssc-card__excerpt { font-size: .88rem; color: var(--ssc-ink-soft); }
.ssc-card__meta { font-family: var(--ssc-f-ui); font-size: .78rem; color: var(--ssc-neutral); }
.ssc-card .ssc-btn { margin-top: auto; align-self: flex-start; }

/* Quick view trigger, injected by quick-view.js so it never appears without JS. */
.ssc-qv-trigger {
  position: absolute;
  left: .5rem; right: .5rem; bottom: .5rem;
  font-family: var(--ssc-f-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--ssc-ink);
  color: #fff;
  border: 0;
  padding: .5rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--ssc-mid) var(--ssc-ease), transform var(--ssc-mid) var(--ssc-ease);
}
.ssc-card:hover .ssc-qv-trigger,
.ssc-qv-trigger:focus-visible { opacity: 1; transform: translateY(0); }
/* Touch devices get no hover, so the trigger is always visible there. */
@media (hover: none) { .ssc-qv-trigger { opacity: 1; transform: none; } }

/* ---------- story ---------- */

.ssc-story {
  position: relative;
  overflow: hidden;
  background: var(--ssc-turq);
  color: #fff;
  border-block: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: var(--ssc-section);
}
.ssc-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 820px) { .ssc-story__inner { grid-template-columns: 1fr; } }
.ssc-story__title {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.02;
}
.ssc-story__body {
  font-family: var(--ssc-f-body);
  font-size: 1.02rem;
  margin-top: .9rem;
  max-width: 48ch;
}
.ssc-story__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.25rem;
  margin-top: 1.4rem;
}
.ssc-story .ssc-btn { margin-top: 0; }
.ssc-story__more {
  font-family: var(--ssc-f-ui);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ssc-mustard);
  text-underline-offset: 3px;
}
.ssc-story__media {
  border: 3px solid var(--ssc-ink);
  box-shadow: 8px 8px 0 var(--ssc-ink);
  background: var(--ssc-paper);
}
.ssc-story__img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- collections ---------- */

.ssc-collections__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ssc-gap);
  list-style: none;
}
@media (max-width: 720px) { .ssc-collections__grid { grid-template-columns: 1fr; } }

.ssc-collections__link {
  position: relative;
  display: block;
  border: var(--ssc-rule) solid var(--ssc-ink);
  overflow: hidden;
  text-decoration: none;
  background: var(--ssc-ground-2);
  transition: transform var(--ssc-mid) var(--ssc-ease);
}
.ssc-collections__link:hover { transform: translateY(-3px); }
.ssc-collections__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ssc-collections__label {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  background: var(--ssc-ink);
  color: #fff;
  font-family: var(--ssc-f-ui);
  font-size: .88rem;
  font-weight: 700;
  padding: .35rem .7rem;
}

/* ---------- reviews ---------- */

.ssc-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ssc-gap);
  list-style: none;
}
@media (max-width: 820px) { .ssc-reviews__grid { grid-template-columns: 1fr; } }

.ssc-review {
  background: var(--ssc-paper);
  border: var(--ssc-rule) solid var(--ssc-ink);
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-blush);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ssc-review__stars { color: var(--ssc-mustard); font-size: 1rem; letter-spacing: .1em; }
.ssc-review__text p { font-family: var(--ssc-f-ui); font-size: .93rem; line-height: 1.5; }
.ssc-review__by { font-family: var(--ssc-f-ui); font-size: .82rem; font-style: normal; color: var(--ssc-neutral); }

/* ---------- Bold AF statement band ---------- */

.ssc-boldaf {
  position: relative;
  overflow: hidden;
  background: var(--ssc-paper);
  color: var(--ssc-ink);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.ssc-boldaf__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}
.ssc-boldaf__kicker {
  font-family: var(--ssc-f-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ssc-ink);
  background: var(--ssc-mustard);
  border: 2px solid var(--ssc-ink);
  display: inline-block;
  padding: .3rem .8rem;
}
.ssc-boldaf__title {
  font-family: var(--ssc-f-display);
  font-size: clamp(3.2rem, 12vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ssc-magenta);
  margin: 0;
}

/* ---------- mega dropdown ---------- */

.ssc-mega {
  background: var(--ssc-paper);
  border-top: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: 1.25rem;
}
.ssc-mega[hidden] { display: none; }
.ssc-mega__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ssc-gap);
  list-style: none;
}
@media (max-width: 1000px) { .ssc-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ssc-mega__link { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; }
.ssc-mega__media {
  display: block;
  border: 2px solid var(--ssc-ink);
  overflow: hidden;
  background: var(--ssc-ground-2);
  aspect-ratio: 1;
  transition: transform var(--ssc-fast) var(--ssc-ease);
}
.ssc-mega__link:hover .ssc-mega__media { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ssc-turq); }
.ssc-mega__img { width: 100%; height: 100%; object-fit: cover; }
.ssc-mega__label { font-family: var(--ssc-f-ui); font-size: .88rem; font-weight: 700; }

/* ---------- search panel and mobile nav ---------- */

.ssc-search-panel {
  background: var(--ssc-ground-2);
  border-top: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: 1rem;
}
.ssc-search-panel[hidden], .ssc-mobile-nav[hidden] { display: none; }

.ssc-searchform { display: flex; gap: .5rem; }
.ssc-searchform__field {
  flex: 1;
  min-width: 0;
  font-family: var(--ssc-f-ui);
  font-size: .95rem;
  padding: .6rem .8rem;
  border: var(--ssc-rule) solid var(--ssc-ink);
  border-radius: 0;
  background: var(--ssc-paper);
  color: var(--ssc-ink);
}
.ssc-searchform__field::placeholder { color: var(--ssc-neutral); }
.ssc-searchform-wrap { max-width: 34rem; }

.ssc-mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--ssc-ink);
  color: var(--ssc-blush);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.ssc-mobile-nav__sheet {
  padding: 1.35rem 1.35rem max(2rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-height: 100%;
}
.ssc-mobile-nav__kicker {
  font-family: var(--ssc-f-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ssc-ink);
  background: var(--ssc-mustard);
  border: 2px solid var(--ssc-paper);
  display: inline-block;
  align-self: flex-start;
  padding: .3rem .8rem;
}
.ssc-mobile-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ssc-mobile-nav__list > li > a {
  display: block;
  font-family: var(--ssc-f-display);
  font-size: clamp(2rem, 9vw, 2.8rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--ssc-blush);
  padding: .15rem 0;
}
.ssc-mobile-nav__list > li > a:hover,
.ssc-mobile-nav__list > li > a:focus-visible {
  color: var(--ssc-mustard);
}
.ssc-mobile-nav__list > .current-menu-item > a {
  color: var(--ssc-magenta);
}
.ssc-mobile-nav__label {
  font-family: var(--ssc-f-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ssc-blush);
  margin: .25rem 0 0;
}
.ssc-mobile-nav__cats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.ssc-mobile-nav__cats a,
.ssc-mobile-nav__list .sub-menu a {
  display: inline-block;
  font-family: var(--ssc-f-ui);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ssc-ink);
  background: var(--ssc-mustard);
  border: 2px solid var(--ssc-ink);
  border-radius: var(--ssc-radius-pill);
  padding: .35rem .75rem;
}
.ssc-mobile-nav__cats a:hover,
.ssc-mobile-nav__cats a:focus-visible,
.ssc-mobile-nav__list .sub-menu a:hover {
  background: var(--ssc-magenta);
  color: #fff;
}
.ssc-mobile-nav__list .sub-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .35rem 0 .5rem;
  padding: 0;
}
.ssc-mobile-nav__cta { margin-top: .35rem; }
.ssc-mobile-nav__cta .ssc-btn {
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-blush);
}
.ssc-mobile-nav__social {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: .5rem;
}
.ssc-mobile-nav__social .ssc-social { color: var(--ssc-blush); }
body.ssc-menu-open { overflow: hidden; }

@media (min-width: 901px) {
  .ssc-mobile-nav { display: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .ssc-mobile-nav:not([hidden]) {
    animation: ssc-menu-in var(--ssc-mid) var(--ssc-ease);
  }
}
@keyframes ssc-menu-in {
  from { transform: translateY(-8px); }
  to { transform: none; }
}

/* ---------- side cart ---------- */

.ssc-drawer {
  border: 0;
  padding: 0;
  margin: 0 0 0 auto;
  max-width: min(430px, 92vw);
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: transparent;
  overflow: visible;
}
.ssc-drawer::backdrop { background: rgb(14 44 81 / .45); }

.ssc-drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ssc-ground);
  border-left: 3px solid var(--ssc-ink);
}

.ssc-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ssc-ink);
  color: var(--ssc-blush);
  padding: 1rem 1.15rem;
}
.ssc-drawer__title { font-family: var(--ssc-f-display); font-size: 1.3rem; }
.ssc-drawer__close {
  background: none;
  border: 2px solid currentColor;
  border-radius: var(--ssc-radius-pill);
  color: inherit;
  width: 2rem; height: 2rem;
  line-height: 1;
  cursor: pointer;
}

.ssc-drawer__ship { padding: .75rem 1.15rem; background: var(--ssc-turq); color: #fff; border-bottom: var(--ssc-rule) solid var(--ssc-ink); }
.ssc-drawer__shiptext { font-family: var(--ssc-f-ui); font-size: .85rem; font-weight: 700; text-align: center; }
.ssc-meter { height: .55rem; background: var(--ssc-paper); border: 2px solid var(--ssc-ink); margin-top: .5rem; }
.ssc-meter__fill { display: block; height: 100%; width: 0; background: var(--ssc-mustard); transition: width 320ms var(--ssc-ease); }

.ssc-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.15rem; }
.ssc-drawer__loading, .ssc-drawer__empty { font-family: var(--ssc-f-ui); font-size: .92rem; color: var(--ssc-ink-soft); }

.ssc-line { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--ssc-ground-2); }
.ssc-line__media { border: 2px solid var(--ssc-ink); background: var(--ssc-paper); }
.ssc-line__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ssc-line__name { font-family: var(--ssc-f-ui); font-size: .88rem; font-weight: 500; line-height: 1.35; }
.ssc-line__variant { font-family: var(--ssc-f-ui); font-size: .78rem; color: var(--ssc-neutral); }
.ssc-line__price { font-family: var(--ssc-f-ui); font-size: .88rem; font-weight: 700; white-space: nowrap; }

.ssc-qty { display: inline-flex; align-items: center; border: 2px solid var(--ssc-ink); margin-top: .45rem; background: var(--ssc-paper); }
.ssc-qty__btn { background: none; border: 0; width: 1.9rem; height: 1.7rem; cursor: pointer; font-family: var(--ssc-f-ui); font-weight: 700; line-height: 1; }
.ssc-qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.ssc-qty__val { font-family: var(--ssc-f-ui); font-size: .85rem; font-weight: 700; padding: 0 .55rem; border-inline: 2px solid var(--ssc-ink); font-variant-numeric: tabular-nums; }
.ssc-line__remove { background: none; border: 0; padding: 0; margin-top: .35rem; font-family: var(--ssc-f-ui); font-size: .76rem; color: var(--ssc-neutral); text-decoration: underline; cursor: pointer; }

.ssc-drawer__foot { border-top: var(--ssc-rule) solid var(--ssc-ink); background: var(--ssc-paper); padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .6rem; }
.ssc-drawer__row { display: flex; justify-content: space-between; font-family: var(--ssc-f-ui); font-size: 1rem; font-weight: 700; }
.ssc-drawer__note { font-family: var(--ssc-f-ui); font-size: .8rem; color: var(--ssc-neutral); }
.ssc-drawer__cta { text-align: center; }
.ssc-drawer__cartlink { font-family: var(--ssc-f-ui); font-size: .85rem; text-align: center; color: var(--ssc-ink-soft); }

.ssc-drawer[open] .ssc-drawer__panel { animation: ssc-slide-in var(--ssc-mid) var(--ssc-ease); }
@keyframes ssc-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ---------- quick view ---------- */

.ssc-qv {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(880px, 94vw);
  width: 100%;
  overflow: visible;
}
.ssc-qv::backdrop { background: rgb(14 44 81 / .45); }

.ssc-qv__panel {
  position: relative;
  background: var(--ssc-paper);
  border: 3px solid var(--ssc-ink);
  box-shadow: 10px 10px 0 var(--ssc-turq);
  padding: 1.25rem;
}
.ssc-qv[open] .ssc-qv__panel { animation: ssc-pop var(--ssc-mid) var(--ssc-ease); }
@keyframes ssc-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

.ssc-qv__close {
  position: absolute;
  top: .75rem; right: .75rem;
  z-index: 2;
  background: var(--ssc-paper);
  border: 2px solid var(--ssc-ink);
  border-radius: var(--ssc-radius-pill);
  width: 2rem; height: 2rem;
  line-height: 1;
  cursor: pointer;
}

.ssc-qv__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 720px) { .ssc-qv__body { grid-template-columns: 1fr; } }

.ssc-qv__media { border: var(--ssc-rule) solid var(--ssc-ink); background: var(--ssc-ground-2); }
.ssc-qv__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ssc-qv__col { display: flex; flex-direction: column; gap: .7rem; }
.ssc-qv__title { font-family: var(--ssc-f-display); font-size: clamp(1.2rem, 2.6vw, 1.65rem); line-height: 1.08; padding-right: 2.5rem; }
.ssc-qv__price { font-family: var(--ssc-f-ui); font-size: 1.15rem; font-weight: 700; }
.ssc-qv__price del { color: var(--ssc-neutral); font-weight: 500; margin-right: .4rem; }
.ssc-qv__desc { font-family: var(--ssc-f-ui); font-size: .9rem; line-height: 1.5; color: var(--ssc-ink-soft); }
.ssc-qv__label { font-family: var(--ssc-f-ui); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ssc-neutral); }
.ssc-qv__options { display: flex; flex-wrap: wrap; gap: .4rem; }
.ssc-qv__option {
  font-family: var(--ssc-f-ui);
  font-size: .82rem;
  font-weight: 700;
  background: var(--ssc-paper);
  border: 2px solid var(--ssc-ink);
  padding: .35rem .7rem;
  cursor: pointer;
}
.ssc-qv__option[aria-pressed="true"] { background: var(--ssc-ink); color: #fff; }
.ssc-qv__full { font-family: var(--ssc-f-ui); font-size: .85rem; font-weight: 700; color: var(--ssc-ink-soft); }
.ssc-qv__error { font-family: var(--ssc-f-ui); font-size: .85rem; color: var(--ssc-magenta); }

/* ---------- footer ---------- */

.ssc-divider { height: 2.2rem; background: var(--ssc-ink); display: block; }
.ssc-divider--zigzag {
  /* Clip-path anti-aliases the bottom edge; tuck the footer over that hairline. */
  margin-bottom: -4px;
  clip-path: polygon(
    0 0, 4% 100%, 8% 0, 12% 100%, 16% 0, 20% 100%, 24% 0, 28% 100%, 32% 0, 36% 100%,
    40% 0, 44% 100%, 48% 0, 52% 100%, 56% 0, 60% 100%, 64% 0, 68% 100%, 72% 0, 76% 100%,
    80% 0, 84% 100%, 88% 0, 92% 100%, 96% 0, 100% 100%, 100% 100%, 0 100%
  );
}
.ssc-divider--wave {
  clip-path: ellipse(75% 100% at 50% 100%);
}

.ssc-footer {
  position: relative;
  z-index: 1;
  background: var(--ssc-ink);
  color: var(--ssc-blush);
  padding-block: 0 1.5rem;
}
.ssc-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
  padding-top: clamp(2rem, 5vw, 3.25rem);
}
@media (max-width: 820px) { .ssc-footer__inner { grid-template-columns: 1fr; } }

.ssc-footer__tagline { font-family: var(--ssc-f-display); font-size: 1.3rem; line-height: 1.1; }
.ssc-footer__where { font-family: var(--ssc-f-ui); font-size: .88rem; margin-top: .5rem; opacity: .85; }
.ssc-footer__list { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.ssc-footer__list a { font-family: var(--ssc-f-ui); font-size: .9rem; text-decoration: none; }
.ssc-footer__list a:hover { text-decoration: underline; }
.ssc-footer__social { display: flex; gap: .75rem; flex-wrap: wrap; }
.ssc-social {
  font-family: var(--ssc-f-ui);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid currentColor;
  border-radius: var(--ssc-radius-pill);
  padding: .3rem .8rem;
  transition: transform var(--ssc-fast) var(--ssc-ease);
}
.ssc-social:hover { transform: translateY(-2px); }
.ssc-footer__legal { margin-top: 2rem; font-family: var(--ssc-f-ui); font-size: .78rem; opacity: .7; }

/* ---------- drop list ---------- */

.ssc-drops {
  background: var(--ssc-mustard);
  color: var(--ssc-ink);
  padding-block: clamp(1.75rem, 4.5vw, 2.75rem);
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
}
.ssc-drops__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: end;
}
@media (max-width: 820px) { .ssc-drops__inner { grid-template-columns: 1fr; } }
.ssc-drops__kicker {
  font-family: var(--ssc-f-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ssc-drops__title {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1;
  margin-top: .35rem;
}
.ssc-drops__lede {
  font-family: var(--ssc-f-ui);
  font-size: 1rem;
  line-height: 1.5;
  margin-top: .65rem;
  max-width: 36ch;
}
.ssc-drops__form { position: relative; }
.ssc-drops__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
}
@media (max-width: 560px) { .ssc-drops__row { grid-template-columns: 1fr; } }
.ssc-drops__input {
  width: 100%;
  font-family: var(--ssc-f-ui);
  font-size: 1rem;
  padding: .75rem .85rem;
  border: var(--ssc-rule) solid var(--ssc-ink);
  border-radius: 0;
  background: var(--ssc-paper);
  color: var(--ssc-ink);
}
.ssc-drops__input:focus {
  outline: 3px solid var(--ssc-magenta);
  outline-offset: 1px;
}
.ssc-drops__go { white-space: nowrap; }
.ssc-drops__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.ssc-drops__consent {
  font-family: var(--ssc-f-ui);
  font-size: .84rem;
  line-height: 1.45;
  margin-top: .75rem;
}
.ssc-drops__consent label {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  cursor: pointer;
}
.ssc-drops__consent input { margin-top: .2rem; accent-color: var(--ssc-ink); }
.ssc-drops__consent a { font-weight: 700; text-underline-offset: 2px; }
.ssc-drops__status {
  font-family: var(--ssc-f-ui);
  font-weight: 700;
  font-size: .95rem;
  margin-top: .75rem;
}
.ssc-drops__status.is-ok { color: var(--ssc-ink); }
.ssc-drops__status.is-bad { color: var(--ssc-magenta); }
.ssc-drops__form.is-busy .ssc-drops__go { opacity: .7; }
.ssc-drops__form.is-done .ssc-drops__row,
.ssc-drops__form.is-done .ssc-drops__consent { display: none; }

/* ---------- prose ---------- */

.ssc-prose { max-width: 68ch; }
.ssc-prose > * + * { margin-top: 1.15rem; }
.ssc-prose h2 { font-family: var(--ssc-f-display); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; margin-top: 2.25rem; }
.ssc-prose h3 { font-family: var(--ssc-f-ui); font-weight: 700; font-size: 1.15rem; margin-top: 1.75rem; }
.ssc-prose a { color: var(--ssc-magenta); text-underline-offset: 3px; }
.ssc-prose ul, .ssc-prose ol { padding-left: 1.35rem; }
.ssc-prose li + li { margin-top: .4rem; }
.ssc-prose blockquote {
  border-left: 5px solid var(--ssc-turq);
  padding: .5rem 0 .5rem 1.15rem;
  font-family: var(--ssc-f-ui);
  font-size: 1.05rem;
}
.ssc-prose img { border: var(--ssc-rule) solid var(--ssc-ink); }

.ssc-single__hero { margin-block: 1.5rem; }
.ssc-single__heroimg { width: 100%; border: 3px solid var(--ssc-ink); box-shadow: 8px 8px 0 var(--ssc-turq); }

/* ---------- pagination, empty, 404 ---------- */

.ssc-pagination, .woocommerce-pagination { margin-top: 2.5rem; font-family: var(--ssc-f-ui); }
.ssc-pagination .page-numbers, .woocommerce-pagination .page-numbers {
  display: inline-block;
  border: 2px solid var(--ssc-ink);
  padding: .35rem .8rem;
  margin-right: .35rem;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
}
.ssc-pagination .current, .woocommerce-pagination .current { background: var(--ssc-ink); color: #fff; }
.woocommerce-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; border: 0; }
.woocommerce-pagination li { border: 0; }

.ssc-empty { padding-block: 3rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.ssc-empty__title { font-family: var(--ssc-f-display); font-size: clamp(1.6rem, 4vw, 2.4rem); }

.ssc-404__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.ssc-404__code { font-family: var(--ssc-f-display); font-size: clamp(3.5rem, 12vw, 8rem); line-height: .85; color: var(--ssc-magenta); }
.ssc-404__title { font-family: var(--ssc-f-display); font-size: clamp(1.6rem, 4vw, 2.6rem); }
.ssc-404__body { font-family: var(--ssc-f-ui); color: var(--ssc-ink-soft); max-width: 42ch; }
.ssc-404__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.ssc-404__search { margin-top: 1.5rem; width: min(30rem, 100%); }


/* ---------- small gaps found in the cross reference pass ---------- */

/* Belt and braces. inc/shapes.php already refuses to print a shape on a
   commerce page; this makes sure one can never appear even if a shape is
   hard coded into a template by hand later. */
.ssc-commerce .ssc-shape { display: none; }
.ssc-commerce .ssc-boldaf .ssc-shape { display: block; }

.ssc-qv__loading { font-family: var(--ssc-f-ui); font-size: .92rem; color: var(--ssc-ink-soft); padding: 2rem 0; }

.ssc-pagelinks { font-family: var(--ssc-f-ui); font-size: .9rem; margin-top: 2rem; display: flex; gap: .4rem; }
.ssc-pagelinks a, .ssc-pagelinks > span { border: 2px solid var(--ssc-ink); padding: .25rem .6rem; text-decoration: none; }

.ssc-result { list-style: none; }

/* ---------- scroll reveal ----------
   CSS scroll-driven animations. No IntersectionObserver, no scroll listener,
   no JavaScript. Browsers without support simply show the content, which is
   the correct fallback. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ssc-section, .ssc-story, .ssc-reviews__grid > *, .ssc-collections__cell {
      animation: ssc-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }
  }
}
@keyframes ssc-rise {
  from { opacity: 1; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- cross document view transitions ----------
   Progressive enhancement. Where unsupported, navigation is unchanged. */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==========================================================================
   PUNCH LAYER
   Added after launch feedback: "the bones are great, it's missing a certain
   wow factor". Everything here is transform/opacity only, so it stays cheap.
   ========================================================================== */

/* ---------- section headings get a marker highlight ---------- */

.ssc-sechead__title,
.ssc-pagehead__title,
.ssc-story__title {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.ssc-sechead__title::after,
.ssc-pagehead__title::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.15em;
  right: -.15em;
  bottom: .04em;
  height: .34em;
  background: var(--ssc-blush);
  transform: scaleX(0) skewX(-12deg);
  transform-origin: left center;
  animation: ssc-highlight 520ms var(--ssc-ease) 120ms forwards;
}
.ssc-story__title::after { background: var(--ssc-mustard); }
@keyframes ssc-highlight { to { transform: scaleX(1) skewX(-12deg); } }

/* When scroll-driven animation is available, wipe on entry instead of on load. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ssc-sechead__title::after,
    .ssc-pagehead__title::after {
      animation: ssc-highlight linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 34%;
    }
  }
}

/* ---------- cards behave like stickers ---------- */

.ssc-card { transition: transform var(--ssc-mid) var(--ssc-ease), box-shadow var(--ssc-mid) var(--ssc-ease); }
.ssc-grid--products > .ssc-card:hover,
ul.products > .ssc-card:hover {
  transform: translate(-3px, -3px) rotate(-.7deg);
}
.ssc-grid--products > .ssc-card:nth-child(even):hover,
ul.products > .ssc-card:nth-child(even):hover {
  transform: translate(-3px, -3px) rotate(.7deg);
}

/* Price pops on card hover, so the eye lands where it should. */
.ssc-card .price { transition: color var(--ssc-fast) var(--ssc-ease); }
.ssc-card:hover .price { color: var(--ssc-magenta); }

/* ---------- collection tiles ---------- */

.ssc-collections__link {
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-ink);
  transition: transform var(--ssc-mid) var(--ssc-ease), box-shadow var(--ssc-mid) var(--ssc-ease);
}
.ssc-collections__cell:nth-child(1) .ssc-collections__link:hover { transform: translate(-3px,-3px) rotate(-1deg); box-shadow: 8px 8px 0 var(--ssc-turq); }
.ssc-collections__cell:nth-child(2) .ssc-collections__link:hover { transform: translate(-3px,-3px) rotate(1deg);  box-shadow: 8px 8px 0 var(--ssc-blush); }
.ssc-collections__cell:nth-child(3) .ssc-collections__link:hover { transform: translate(-3px,-3px) rotate(-.8deg); box-shadow: 8px 8px 0 var(--ssc-mustard); }
.ssc-collections__label { transition: transform var(--ssc-fast) var(--ssc-ease); }
.ssc-collections__link:hover .ssc-collections__label { transform: translateY(-3px); }

/* ---------- mega panel tiles ---------- */

.ssc-mega__media { box-shadow: 3px 3px 0 transparent; }
.ssc-mega__cell:nth-child(odd)  .ssc-mega__link:hover .ssc-mega__media { transform: translate(-2px,-2px) rotate(-1.5deg); box-shadow: 5px 5px 0 var(--ssc-turq); }
.ssc-mega__cell:nth-child(even) .ssc-mega__link:hover .ssc-mega__media { transform: translate(-2px,-2px) rotate(1.5deg);  box-shadow: 5px 5px 0 var(--ssc-blush); }
.ssc-mega__label { transition: color var(--ssc-fast) var(--ssc-ease); }
.ssc-mega__link:hover .ssc-mega__label { color: var(--ssc-magenta); }

.ssc-mega__cell { --i: 1; }
.ssc-mega__cell:nth-child(2){--i:2} .ssc-mega__cell:nth-child(3){--i:3}
.ssc-mega__cell:nth-child(4){--i:4} .ssc-mega__cell:nth-child(5){--i:5}
.ssc-mega__cell:nth-child(6){--i:6}
@media (prefers-reduced-motion: no-preference) {
  .ssc-mega:not([hidden]) .ssc-mega__cell {
    animation: ssc-mega-in 300ms var(--ssc-ease) both;
    animation-delay: calc(var(--i) * 40ms);
  }
}
@keyframes ssc-mega-in { from { opacity:0; transform: translateY(10px) } to { opacity:1; transform:none } }

/* ---------- fallback tile for a missing category image ---------- */

.ssc-tile-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  font-family: var(--ssc-f-display);
  font-size: clamp(1.6rem, 5vw, 3rem);
  color: #fff;
  background: var(--ssc-turq);
}
.ssc-tile-fallback--blush   { background: var(--ssc-blush); color: var(--ssc-ink); }
.ssc-tile-fallback--mustard { background: var(--ssc-mustard); color: var(--ssc-ink); }
.ssc-tile-fallback--rose    { background: var(--ssc-rose); color: var(--ssc-ink); }

/* ---------- carry the front page language onto every other page ---------- */

.ssc-pagehead {
  background-color: var(--ssc-ground);
  background-image: radial-gradient(var(--ssc-blush) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
  margin-bottom: var(--ssc-section);
}
.ssc-pagehead > .ssc-container,
.ssc-pagehead__title,
.ssc-pagehead__meta { position: relative; z-index: 1; }

/* Inner page content gets the same die-cut treatment as the front page. */
.ssc-prose img,
.ssc-prose figure img {
  border: var(--ssc-rule) solid var(--ssc-ink);
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-turq);
}
.ssc-prose figure { margin-block: 2rem; }
.ssc-prose h2 { position: relative; display: inline-block; }
.ssc-prose h2::after {
  content: "";
  position: absolute;
  left: -.1em; right: -.1em; bottom: .05em;
  height: .3em;
  background: var(--ssc-mustard);
  z-index: -1;
  transform: skewX(-12deg);
}
.ssc-prose blockquote {
  background: var(--ssc-ground-2);
  border-left: 6px solid var(--ssc-magenta);
  padding: 1rem 1.25rem;
}

/* Post and page cards match product cards. */
.ssc-card--post:hover { transform: translate(-3px,-3px) rotate(-.6deg); }
.ssc-postgrid > .ssc-card:nth-child(3n+2) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-turq); }
.ssc-postgrid > .ssc-card:nth-child(3n+3) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-blush); }

/* ---------- footer social buttons punch ---------- */

.ssc-social { transition: transform var(--ssc-fast) var(--ssc-ease), background var(--ssc-fast) var(--ssc-ease), color var(--ssc-fast) var(--ssc-ease); }
.ssc-social:hover { background: var(--ssc-blush); color: var(--ssc-ink); transform: translate(-2px,-2px); box-shadow: 3px 3px 0 var(--ssc-blush); }

/* ---------- the trust bar earns its width ---------- */

.ssc-ticker__text { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ssc-ticker { background-image: repeating-linear-gradient(-45deg, transparent 0 12px, rgb(255 255 255 / .12) 12px 24px); }
  .ssc-ticker__text[aria-hidden="true"] { display: block; }
  .ssc-ticker__track { animation: ssc-marquee 28s linear infinite; }
  .ssc-ticker:hover .ssc-ticker__track { animation-play-state: paused; }
}

/* ==========================================================================
   FULL WIDTH PAGES
   Inner pages were being slotted into a narrow content well. They now use the
   same full bleed band rhythm as the front page.
   ========================================================================== */

/* Wider than .ssc-container. Bands go edge to edge; only the content inside
   is constrained, and only as far as readability requires. */
.ssc-wide { width: var(--ssc-shell); margin-inline: auto; }
@media (max-width: 640px) { .ssc-wide { width: calc(100% - 2rem); } }

.ssc-page > section { position: relative; overflow: hidden; }

/* ---------- About ---------- */

/* Story page, not a shop canvas. Keep the well closer than --ssc-shell
   so copy and portrait sit together instead of hugging opposite edges. */
.ssc-page--about .ssc-wide { width: min(1080px, 100% - 3rem); }

.ssc-ab-hero {
  padding-block: clamp(1.75rem, 4vw, 3rem);
  background-color: var(--ssc-ground);
  background-image: radial-gradient(var(--ssc-blush) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
}
.ssc-ab-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 22rem);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) {
  .ssc-ab-hero__inner { grid-template-columns: 1fr; }
  .ssc-ab-hero__media { max-width: 20rem; }
}

.ssc-ab-eyebrow {
  font-family: var(--ssc-f-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ssc-ink);
  background: var(--ssc-mustard);
  border: 2px solid var(--ssc-ink);
  display: inline-block;
  padding: .3rem .8rem;
  margin-bottom: 1rem;
}
.ssc-ab-hero__title {
  font-family: var(--ssc-f-display);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: .95;
  letter-spacing: -.015em;
}
.ssc-ab-hero__accent { display: block; color: var(--ssc-magenta); }
.ssc-ab-hero__lede {
  font-family: var(--ssc-f-ui);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--ssc-ink-soft);
  max-width: 38ch;
  margin-top: 1.2rem;
}
.ssc-ab-hero__media { margin: 0; }
.ssc-ab-hero__img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 3px solid var(--ssc-ink);
  box-shadow: 10px 10px 0 var(--ssc-turq);
  transform: rotate(-2deg);
}
.ssc-ab-hero__cap {
  font-family: var(--ssc-f-ui);
  font-size: .8rem;
  color: var(--ssc-neutral);
  margin-top: .85rem;
  text-align: right;
}

/* manifesto */
.ssc-ab-manifesto {
  background: var(--ssc-ink);
  color: var(--ssc-blush);
  padding-block: clamp(1.75rem, 4vw, 3rem);
}
.ssc-ab-manifesto__text {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  line-height: 1.22;
  max-width: 32ch;
}
.ssc-ab-manifesto__text em { font-style: normal; color: var(--ssc-mustard); }

/* story */
.ssc-ab-story { background: var(--ssc-paper); padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.ssc-ab-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
@media (max-width: 860px) { .ssc-ab-story__inner { grid-template-columns: 1fr; } }
.ssc-ab-story__body { display: flex; flex-direction: column; gap: 1.15rem; }
.ssc-ab-story__body p { font-size: 1.02rem; line-height: 1.7; }
.ssc-ab-story__body p:first-child::first-letter {
  font-family: var(--ssc-f-display);
  font-size: 3.4em;
  line-height: .8;
  float: left;
  margin: .08em .12em 0 0;
  color: var(--ssc-magenta);
}
.ssc-ab-pull {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  background: var(--ssc-blush);
  border: var(--ssc-rule) solid var(--ssc-ink);
  box-shadow: 8px 8px 0 var(--ssc-ink);
  padding: 1.3rem 1.4rem;
  transform: rotate(1.4deg);
}

/* numbers */
.ssc-ab-numbers {
  background: var(--ssc-turq);
  border-block: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.ssc-ab-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
}
@media (max-width: 760px) { .ssc-ab-numbers__grid { grid-template-columns: repeat(2, 1fr); } }
.ssc-ab-stat { display: flex; flex-direction: column; gap: .2rem; color: #fff; }
.ssc-ab-stat__n {
  font-family: var(--ssc-f-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ssc-ab-stat__l { font-family: var(--ssc-f-ui); font-size: .86rem; font-weight: 500; }

/* the wall */
.ssc-ab-wall { background: var(--ssc-ground); padding-block: clamp(2rem, 4vw, 3rem); }
.ssc-ab-h2 {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  margin-bottom: 1.25rem;
}
.ssc-ab-wall__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .75rem;
  list-style: none;
  width: calc(100% - 1.5rem);
  margin-inline: auto;
}
@media (max-width: 1000px) { .ssc-ab-wall__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px)  { .ssc-ab-wall__grid { grid-template-columns: repeat(2, 1fr); } }
/* Two cells break the grid so it reads as a wall, not a contact sheet. */
.ssc-ab-wall__cell:nth-child(1),
.ssc-ab-wall__cell:nth-child(8) { grid-column: span 2; grid-row: span 2; }
.ssc-ab-wall__img {
  width: 100%; height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--ssc-ink);
  transition: transform var(--ssc-mid) var(--ssc-ease), box-shadow var(--ssc-mid) var(--ssc-ease);
}
.ssc-ab-wall__cell:nth-child(odd)  .ssc-ab-wall__img:hover { transform: translate(-3px,-3px) rotate(-1.5deg); box-shadow: 6px 6px 0 var(--ssc-turq); }
.ssc-ab-wall__cell:nth-child(even) .ssc-ab-wall__img:hover { transform: translate(-3px,-3px) rotate(1.5deg);  box-shadow: 6px 6px 0 var(--ssc-blush); }

/* close */
.ssc-ab-cta {
  background: var(--ssc-paper);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.ssc-ab-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}
.ssc-ab-cta__title {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  max-width: 16ch;
  color: var(--ssc-magenta);
}
.ssc-ab-cta__actions { display: flex; gap: .85rem; flex-wrap: wrap; justify-content: center; }
.ssc-ab-extra { background: var(--ssc-paper); padding-block: var(--ssc-section); }

/* ---------- Gallery ---------- */

.ssc-gal-head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background-color: var(--ssc-ground);
  background-image: radial-gradient(var(--ssc-blush) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
}
.ssc-gal-head__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; }
.ssc-gal-title {
  font-family: var(--ssc-f-display);
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: .95;
  position: relative;
  display: inline-block;
}
.ssc-gal-title::after {
  content: "";
  position: absolute;
  left: -.1em; right: -.1em; bottom: .06em;
  height: .28em;
  background: var(--ssc-mustard);
  z-index: -1;
  transform: skewX(-12deg);
}
.ssc-gal-lede { font-family: var(--ssc-f-ui); font-size: clamp(1rem,1.7vw,1.15rem); color: var(--ssc-ink-soft); max-width: 46ch; }

.ssc-gal-wall { background: var(--ssc-paper); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.ssc-gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  list-style: none;
  width: calc(100% - 1.5rem);
  margin-inline: auto;
}
@media (max-width: 1100px) { .ssc-gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ssc-gal-grid { grid-template-columns: repeat(2, 1fr); } }

/* Break the rhythm so it reads as a wall rather than a spreadsheet. */
.ssc-gal-cell:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) { .ssc-gal-cell:nth-child(7n+1) { grid-column: span 2; grid-row: auto; } }

.ssc-gal-img {
  width: 100%; height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--ssc-ink);
  transition: transform var(--ssc-mid) var(--ssc-ease), box-shadow var(--ssc-mid) var(--ssc-ease);
}
.ssc-gal-cell:nth-child(odd)  .ssc-gal-img:hover { transform: translate(-3px,-3px) rotate(-1.4deg); box-shadow: 7px 7px 0 var(--ssc-turq); }
.ssc-gal-cell:nth-child(even) .ssc-gal-img:hover { transform: translate(-3px,-3px) rotate(1.4deg);  box-shadow: 7px 7px 0 var(--ssc-blush); }

.ssc-gal-empty { background: var(--ssc-paper); padding-block: var(--ssc-section); }
.ssc-gal-empty__text {
  font-family: var(--ssc-f-ui);
  font-size: 1.05rem;
  color: var(--ssc-ink-soft);
  border: var(--ssc-rule) dashed var(--ssc-ink);
  padding: 2rem;
  text-align: center;
}

.ssc-faq {
  background: var(--ssc-paper);
  border-top: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: var(--ssc-section);
}
.ssc-faq__title {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.05;
  text-align: center;
  margin: 0 0 1.5rem;
}
.ssc-faq__list {
  display: grid;
  gap: 1.15rem;
  max-width: 46rem;
  margin-inline: auto;
}
.ssc-faq__item {
  border: var(--ssc-rule) solid var(--ssc-ink);
  background: #fff;
  padding: 1rem 1.15rem 1.1rem;
}
.ssc-faq__q {
  font-family: var(--ssc-f-ui);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .45rem;
}
.ssc-faq__a {
  margin: 0;
  font-family: var(--ssc-f-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ssc-ink-soft);
}

.ssc-gal-cta { background: var(--ssc-turq); color: #fff; border-top: var(--ssc-rule) solid var(--ssc-ink); padding-block: clamp(2rem,4vw,3rem); }
.ssc-gal-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.ssc-gal-cta__title { font-family: var(--ssc-f-display); font-size: clamp(1.4rem,3.4vw,2.3rem); line-height: 1.05; }

/* ---------- inner pages generally go full width ---------- */

.ssc-prose { max-width: 68ch; }          /* reading measure stays sane */
.ssc-prose--wide { max-width: none; }

/* ---------- Custom & Corporate Orders ---------- */

.ssc-co-hero {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  background-color: var(--ssc-ground);
  background-image: radial-gradient(var(--ssc-blush) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
}
.ssc-co-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) { .ssc-co-hero__inner { grid-template-columns: 1fr; } }

.ssc-co-title {
  font-family: var(--ssc-f-display);
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: .9;
  letter-spacing: -.02em;
}
.ssc-co-title span { display: block; }
.ssc-co-title__b { color: var(--ssc-mustard); -webkit-text-stroke: 2px var(--ssc-ink); }
.ssc-co-title__c { color: var(--ssc-magenta); }

.ssc-co-lede {
  font-family: var(--ssc-f-ui);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--ssc-ink-soft);
  max-width: 40ch;
  margin-top: 1.2rem;
}
.ssc-co-actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: 1.6rem; }

.ssc-co-proof {
  background: var(--ssc-paper);
  border: var(--ssc-rule) solid var(--ssc-ink);
  box-shadow: 10px 10px 0 var(--ssc-turq);
  padding: 1.4rem 1.5rem;
  transform: rotate(1.5deg);
}
.ssc-co-proof__lbl {
  font-family: var(--ssc-f-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ssc-magenta);
  margin-bottom: .6rem;
}
.ssc-co-proof__body { font-family: var(--ssc-f-ui); font-size: .96rem; line-height: 1.55; }

/* marquee, the only one on the site */
.ssc-co-marquee {
  background: var(--ssc-ink);
  color: var(--ssc-blush);
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
  overflow: hidden;
  padding-block: .85rem;
}
.ssc-co-marquee__track { display: flex; width: max-content; }
.ssc-co-marquee__list { display: flex; list-style: none; margin: 0; padding: 0; }
.ssc-co-marquee__item {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  white-space: nowrap;
  padding-inline: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.ssc-co-marquee__item::after {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--ssc-mustard);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ssc-co-marquee__track { animation: ssc-marquee 34s linear infinite; }
  .ssc-co-marquee:hover .ssc-co-marquee__track { animation-play-state: paused; }
}
@keyframes ssc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ssc-co-stats {
  background: var(--ssc-turq);
  color: #fff;
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: clamp(2rem, 4vw, 3rem);
}

/* what we make */
.ssc-co-what { background: var(--ssc-paper); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.ssc-co-lbl {
  font-family: var(--ssc-f-ui);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ssc-neutral);
  margin-bottom: .5rem;
}
.ssc-co-h2 {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1.04;
  position: relative;
  display: inline-block;
}
.ssc-co-h2::after {
  content: "";
  position: absolute;
  left: -.1em;
  right: -.1em;
  bottom: .05em;
  height: .28em;
  background: var(--ssc-blush);
  z-index: -1;
  transform: skewX(-12deg);
}
.ssc-co-intro { font-family: var(--ssc-f-ui); font-size: 1.02rem; color: var(--ssc-ink-soft); max-width: 58ch; margin-top: 1rem; }

.ssc-co-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ssc-gap);
  list-style: none;
  margin-top: 2.25rem;
}
@media (max-width: 860px) { .ssc-co-products { grid-template-columns: 1fr; } }

.ssc-co-product {
  background: var(--ssc-paper);
  border: var(--ssc-rule) solid var(--ssc-ink);
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-ink);
  padding: .6rem .6rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: transform var(--ssc-mid) var(--ssc-ease), box-shadow var(--ssc-mid) var(--ssc-ease);
}
.ssc-co-product:nth-child(2) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-turq); }
.ssc-co-product:nth-child(3) { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-mustard); }
.ssc-co-product:hover { transform: translate(-3px, -3px) rotate(-.6deg); }
.ssc-co-product:nth-child(2):hover { transform: translate(-3px, -3px) rotate(.6deg); }
.ssc-co-product__media { border: 2px solid var(--ssc-ink); overflow: hidden; }
.ssc-co-product__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ssc-co-product__name { font-family: var(--ssc-f-display); font-size: 1.3rem; padding-inline: .4rem; }
.ssc-co-product__desc { font-family: var(--ssc-f-ui); font-size: .93rem; line-height: 1.55; color: var(--ssc-ink-soft); padding-inline: .4rem; }

/* how it works */
.ssc-co-how {
  background: var(--ssc-ground-2);
  border-block: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.ssc-co-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
  margin-top: 2rem;
}
@media (max-width: 860px) { .ssc-co-steps { grid-template-columns: 1fr; } }
.ssc-co-step { display: flex; flex-direction: column; gap: .55rem; }
.ssc-co-step__n {
  font-family: var(--ssc-f-display);
  font-size: 1.5rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--ssc-ink);
  color: var(--ssc-mustard);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.ssc-co-step__h { font-family: var(--ssc-f-display); font-size: 1.25rem; line-height: 1.1; }
.ssc-co-step__p { font-family: var(--ssc-f-ui); font-size: .95rem; line-height: 1.6; color: var(--ssc-ink-soft); max-width: 34ch; }

/* quote */
.ssc-co-quote { background: var(--ssc-mustard); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.ssc-co-quote__inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) { .ssc-co-quote__inner { grid-template-columns: 1fr; } }
.ssc-co-quote__title { font-family: var(--ssc-f-display); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.05; }
.ssc-co-quote__note { font-family: var(--ssc-f-ui); font-size: 1rem; margin-top: .9rem; max-width: 34ch; }
.ssc-co-quote__form {
  background: var(--ssc-paper);
  border: var(--ssc-rule) solid var(--ssc-ink);
  box-shadow: 10px 10px 0 var(--ssc-ink);
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* Whatever the form plugin outputs picks up the die-cut field treatment. */
.ssc-co-quote__form input[type="text"],
.ssc-co-quote__form input[type="email"],
.ssc-co-quote__form input[type="tel"],
.ssc-co-quote__form input[type="number"],
.ssc-co-quote__form select,
.ssc-co-quote__form textarea {
  width: 100%;
  font-family: var(--ssc-f-ui);
  font-size: .95rem;
  padding: .65rem .75rem;
  border: 2px solid var(--ssc-ink);
  border-radius: 0;
  background: var(--ssc-paper);
  color: var(--ssc-ink);
}
.ssc-co-quote__form label { font-family: var(--ssc-f-ui); font-size: .84rem; font-weight: 700; display: block; margin-bottom: .3rem; }
.ssc-co-quote__form button,
.ssc-co-quote__form input[type="submit"] {
  font-family: var(--ssc-f-ui);
  font-weight: 700;
  font-size: 1rem;
  background: var(--ssc-magenta);
  color: #fff;
  border: var(--ssc-rule) solid var(--ssc-ink);
  border-radius: var(--ssc-radius-pill);
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-ink);
  padding: .7em 1.5em;
  cursor: pointer;
  transition: transform var(--ssc-fast) var(--ssc-ease), box-shadow var(--ssc-fast) var(--ssc-ease);
}
.ssc-co-quote__form button:active,
.ssc-co-quote__form input[type="submit"]:active { transform: translate(var(--ssc-offset), var(--ssc-offset)); box-shadow: 0 0 0 var(--ssc-ink); }

/* ---------- Contact ---------- */

.ssc-ct-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background-color: var(--ssc-ground);
  background-image: radial-gradient(var(--ssc-blush) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
}
.ssc-ct-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) { .ssc-ct-hero__inner { grid-template-columns: 1fr; } }

.ssc-ct-title {
  font-family: var(--ssc-f-display);
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  line-height: .98;
  max-width: 16ch;
}
.ssc-ct-lede {
  font-family: var(--ssc-f-ui);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--ssc-ink-soft);
  max-width: 40ch;
  margin-top: 1.1rem;
}

.ssc-ct-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: var(--ssc-rule) solid var(--ssc-ink);
  background: var(--ssc-paper);
  box-shadow: 8px 8px 0 var(--ssc-blush);
  transform: rotate(-1.2deg);
}
.ssc-ct-fact {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem 1.1rem;
  border-bottom: 2px solid var(--ssc-ground-2);
}
.ssc-ct-fact:last-child { border-bottom: 0; }
.ssc-ct-fact__k {
  font-family: var(--ssc-f-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ssc-magenta);
}
.ssc-ct-fact__v { font-family: var(--ssc-f-ui); font-size: .95rem; font-weight: 500; }

.ssc-ct-form-band { background: var(--ssc-paper); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.ssc-ct-form-band__inner {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) { .ssc-ct-form-band__inner { grid-template-columns: 1fr; } }
.ssc-ct-note { font-family: var(--ssc-f-ui); font-size: 1rem; color: var(--ssc-ink-soft); margin-top: .9rem; max-width: 34ch; }
.ssc-ct-form { box-shadow: 10px 10px 0 var(--ssc-turq); }

.ssc-ct-cats {
  background: var(--ssc-ground-2);
  border-top: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.ssc-ct-cats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ssc-gap);
  list-style: none;
  margin-top: 2rem;
}
@media (max-width: 860px) { .ssc-ct-cats__grid { grid-template-columns: 1fr; } }

.ssc-ct-cat__link {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-decoration: none;
  background: var(--ssc-paper);
  border: var(--ssc-rule) solid var(--ssc-ink);
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-ink);
  padding: .6rem .6rem 1.2rem;
  height: 100%;
  transition: transform var(--ssc-mid) var(--ssc-ease), box-shadow var(--ssc-mid) var(--ssc-ease);
}
.ssc-ct-cat:nth-child(2) .ssc-ct-cat__link { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-turq); }
.ssc-ct-cat:nth-child(3) .ssc-ct-cat__link { box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-mustard); }
.ssc-ct-cat__link:hover { transform: translate(-3px, -3px) rotate(-.6deg); }
.ssc-ct-cat:nth-child(2) .ssc-ct-cat__link:hover { transform: translate(-3px, -3px) rotate(.6deg); }
.ssc-ct-cat__media { display: block; border: 2px solid var(--ssc-ink); overflow: hidden; }
.ssc-ct-cat__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ssc-ct-cat__name { font-family: var(--ssc-f-display); font-size: 1.25rem; padding-inline: .4rem; }
.ssc-ct-cat__desc { font-family: var(--ssc-f-ui); font-size: .9rem; line-height: 1.55; color: var(--ssc-ink-soft); padding-inline: .4rem; }
.ssc-ct-cat__go {
  font-family: var(--ssc-f-ui);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ssc-magenta);
  padding-inline: .4rem;
  margin-top: auto;
}

/* ---------- default page template ---------- */

.ssc-pg-head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background-color: var(--ssc-ground);
  background-image: radial-gradient(var(--ssc-blush) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
  position: relative;
  overflow: hidden;
}
.ssc-pg-head__inner { position: relative; z-index: 1; }
.ssc-pg-title {
  font-family: var(--ssc-f-display);
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  line-height: .98;
  max-width: 20ch;
  position: relative;
  display: inline-block;
}
.ssc-pg-title::after {
  content: "";
  position: absolute;
  left: -.1em;
  right: -.1em;
  bottom: .06em;
  height: .26em;
  background: var(--ssc-mustard);
  z-index: -1;
  transform: skewX(-12deg);
}
.ssc-pg-lede {
  font-family: var(--ssc-f-ui);
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  color: var(--ssc-ink-soft);
  max-width: 52ch;
  margin-top: 1.1rem;
}

.ssc-pg-hero { background: var(--ssc-paper); padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.ssc-pg-hero__img {
  width: 100%;
  max-height: 32rem;
  object-fit: cover;
  border: 3px solid var(--ssc-ink);
  box-shadow: 10px 10px 0 var(--ssc-turq);
}

.ssc-pg-body { background: var(--ssc-paper); padding-block: clamp(2rem, 5vw, 3.5rem); }
.ssc-pg-wall { background: var(--ssc-ground); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.ssc-pg-cta {
  background: var(--ssc-turq);
  color: #fff;
  border-top: var(--ssc-rule) solid var(--ssc-ink);
  padding-block: clamp(2rem, 4vw, 3rem);
}

/* Kadence and other block markup left in editor content gets neutral spacing
   so a legacy page still reads correctly inside the designed frame. */
.ssc-pg-body .kb-row-layout-wrap,
.ssc-pg-body .wp-block-group { padding-inline: 0 !important; }
.ssc-pg-body .kt-row-column-wrap {
  display: grid;
  gap: var(--ssc-gap);
}

/* ---------- single post extras ---------- */

.ssc-post-meta {
  font-family: var(--ssc-f-ui);
  font-size: .88rem;
  color: var(--ssc-ink-soft);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.ssc-post-meta a { color: var(--ssc-magenta); text-decoration: none; font-weight: 700; }
.ssc-post-meta a:hover { text-decoration: underline; }
.ssc-post-meta__sep { color: var(--ssc-neutral); }

.ssc-post-nav { background: var(--ssc-ground-2); border-top: var(--ssc-rule) solid var(--ssc-ink); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.ssc-post-nav__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ssc-gap);
}
@media (max-width: 700px) { .ssc-post-nav__inner { grid-template-columns: 1fr; } }

.ssc-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-decoration: none;
  background: var(--ssc-paper);
  border: var(--ssc-rule) solid var(--ssc-ink);
  box-shadow: var(--ssc-offset) var(--ssc-offset) 0 var(--ssc-ink);
  padding: 1rem 1.15rem;
  transition: transform var(--ssc-fast) var(--ssc-ease), box-shadow var(--ssc-fast) var(--ssc-ease);
}
.ssc-post-nav__link:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ssc-turq); }
.ssc-post-nav__link--next { text-align: right; }
.ssc-post-nav__link--next:hover { box-shadow: 7px 7px 0 var(--ssc-blush); }
.ssc-post-nav__dir {
  font-family: var(--ssc-f-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ssc-magenta);
}
.ssc-post-nav__t { font-family: var(--ssc-f-display); font-size: 1.1rem; line-height: 1.15; }

/* --- 4. Quick view images are square, like every product photo. --- */

.ssc-qv__media { aspect-ratio: 1; overflow: hidden; }
.ssc-qv__media img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Side cart line images too. */
.ssc-line__media img { aspect-ratio: 1; object-fit: cover; }

/* --- 3. Sticky header: body overflow-x creates a scroll container that can
       trap position:sticky. Clip on the x axis instead, which does not. --- */

body { overflow-x: clip; }
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}


/* ==========================================================================
   SHOP DROPDOWN, full category set
   The panel used to carry six tiles. It now carries every top level category,
   each sub category under its parent, and a Shop All tile leading the grid.
   ========================================================================== */

/* A panel, not a full width band. Sized to five tiles across so the fifteen
   entries stack into three rows: as a band it ran the whole viewport and read
   as a second header rather than a dropdown. Anchored to the header, which is
   position:sticky and therefore the containing block. */
.ssc-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(820px, calc(100vw - 3rem));
  padding-block: 1.5rem;
  border: var(--ssc-rule) solid var(--ssc-ink);
  border-top-width: 0;
  box-shadow: 8px 8px 0 rgba(14, 44, 81, .12);
  max-height: min(88vh, 46rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The shell width is for page content; inside the panel it just adds margin. */
.ssc-mega > .ssc-container {
  width: 100%;
  padding-inline: 1.375rem;
}

/* Five across, so fifteen entries make three even rows inside the panel width.
   Tiles land at ~137px, and the whole set fits without scrolling on a 900px
   tall viewport. */
.ssc-mega__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(.6rem, 1.2vw, 1rem);
  row-gap: .875rem;
}

/* Slightly shorter than square. Square tiles made the three rows 702px tall,
   which overflowed the panel by 90px on a 1366x768 laptop and put a scrollbar
   inside the dropdown. At 4:3 the set is 596px and needs a 678px viewport, so
   it clears on anything from a laptop upwards. The tiles still fill the column,
   so the grid stays flush rather than gaining gaps between smaller images. */
.ssc-mega__media { aspect-ratio: 4 / 3; }
/* The colour fallback tile must match, or a category with no photo sets a
   taller row than the rest and the saving is lost. */
.ssc-mega__media .ssc-tile-fallback { aspect-ratio: auto; height: 100%; }
/* Overrides the fixed repeat(3) declared earlier in this file, which would
   otherwise win here on source order. */
@media (max-width: 700px) {
  .ssc-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Shop All: a die-cut tile, not a text link, so "everything" is as easy to hit
   as any one category and reads as part of the same set. */
.ssc-mega__media--all {
  display: grid;
  place-items: center;
  background: var(--ssc-magenta);
  border-color: var(--ssc-ink);
}
.ssc-mega__allmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  font-family: var(--ssc-f-display);
  line-height: .85;
  color: #fff;
  text-align: center;
}
.ssc-mega__allword { font-size: clamp(.75rem, 1.3vw, 1rem); letter-spacing: .04em; }
.ssc-mega__allword--big { font-size: clamp(1.5rem, 2.8vw, 2.3rem); letter-spacing: 0; }
.ssc-mega__cell--all .ssc-mega__label { color: var(--ssc-magenta); }

/* Sub categories, as a quiet text list under the parent tile. */
.ssc-mega__sub {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
}
.ssc-mega__subitem { list-style: none; }
.ssc-mega__sublink {
  display: block;
  font-family: var(--ssc-f-ui);
  font-size: .7rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ssc-ink-soft);
  text-decoration: none;
  padding: .08rem 0;
  transition: color var(--ssc-fast) var(--ssc-ease), transform var(--ssc-fast) var(--ssc-ease);
}
.ssc-mega__sublink:hover,
.ssc-mega__sublink:focus-visible { color: var(--ssc-magenta); transform: translateX(3px); }

/* The stagger was written for six cells and left everything past the sixth on
   --i:1. Extended, and shortened, so fifteen tiles still land in under half a
   second instead of cascading for the best part of one. */
.ssc-mega__cell:nth-child(7){--i:7}   .ssc-mega__cell:nth-child(8){--i:8}
.ssc-mega__cell:nth-child(9){--i:9}   .ssc-mega__cell:nth-child(10){--i:10}
.ssc-mega__cell:nth-child(11){--i:11} .ssc-mega__cell:nth-child(12){--i:12}
.ssc-mega__cell:nth-child(13){--i:13} .ssc-mega__cell:nth-child(14){--i:14}
.ssc-mega__cell:nth-child(15){--i:15} .ssc-mega__cell:nth-child(n+16){--i:16}

@media (prefers-reduced-motion: no-preference) {
  .ssc-mega:not([hidden]) .ssc-mega__cell { animation-delay: calc(var(--i) * 18ms); }
}

/* Label sized to the narrower five-across tile. */
.ssc-mega__label { font-size: .82rem; line-height: 1.25; }
.ssc-mega__sub { margin-top: .3rem; }

/* ---------- policy reading template ---------- */

.ssc-page--policy { background: var(--ssc-paper); }

.ssc-pol-col {
  width: min(62ch, calc(100% - 2rem));
  margin-inline: auto;
}

.ssc-pol-head {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--ssc-paper);
  border-bottom: var(--ssc-rule) solid var(--ssc-ink);
  text-align: center;
}
.ssc-pol-title {
  font-family: var(--ssc-f-display);
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.05;
}
.ssc-pol-meta {
  font-family: var(--ssc-f-ui);
  font-size: .82rem;
  color: var(--ssc-neutral);
  margin-top: .7rem;
}

.ssc-pol-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  margin-top: 1.2rem;
}
.ssc-pol-nav__item {
  font-family: var(--ssc-f-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ssc-ink);
  border: 2px solid var(--ssc-ink);
  border-radius: var(--ssc-radius-pill);
  padding: .35rem .85rem;
  line-height: 1.2;
}
a.ssc-pol-nav__item:hover,
a.ssc-pol-nav__item:focus-visible {
  background: var(--ssc-mustard);
}
.ssc-pol-nav__item.is-current {
  background: var(--ssc-ink);
  color: #fff;
}

.ssc-pol-body { background: var(--ssc-paper); padding-block: clamp(1.75rem, 4vw, 3rem) 3rem; }
.ssc-page--policy .ssc-prose {
  max-width: none;
  font-family: var(--ssc-f-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ssc-ink);
  text-align: left;
}

/* Leftover block sizes and palette classes from Kadence / Stackable. */
.ssc-page--policy .ssc-prose :is(p, li, div) { color: inherit; font-size: inherit; }
.ssc-page--policy .ssc-prose :is(.has-small-font-size, .has-large-font-size) { font-size: inherit !important; }
.ssc-page--policy .ssc-prose a { color: var(--ssc-magenta); }

/* One title lives in the header. Hide a leftover H1 in the body. */
.ssc-page--policy .ssc-prose h1 { display: none; }

/* Calmer headings than marketing pages: no mustard highlighter, no teal leftover. */
.ssc-page--policy .ssc-prose h2 {
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important;
  margin-top: 2rem;
  color: var(--ssc-ink) !important;
  background: none !important;
  letter-spacing: normal !important;
  line-height: 1.15 !important;
  text-align: left;
}
.ssc-page--policy .ssc-prose h2::after { content: none; }
.ssc-page--policy .ssc-prose h3 {
  font-size: 1.12rem !important;
  font-family: var(--ssc-f-ui) !important;
  color: var(--ssc-ink) !important;
  background: none !important;
  letter-spacing: normal !important;
  line-height: 1.25 !important;
}
.ssc-page--policy .ssc-prose h4 {
  font-size: 1rem !important;
  color: var(--ssc-ink) !important;
  background: none !important;
}
.ssc-page--policy .ssc-prose :is(h5, h6) {
  font-family: var(--ssc-f-ui) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ssc-ink) !important;
  background: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin-top: 1.75rem;
}

/* Returns page uses <br><strong>Section</strong> instead of headings. */
.ssc-page--policy .ssc-prose br + strong {
  display: block;
  font-family: var(--ssc-f-ui);
  font-size: 1.12rem;
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: .35rem;
}
.ssc-page--policy .ssc-prose p > br:first-child + strong { margin-top: 0; }

/* Kadence / block leftovers from the old editor chrome. */
.ssc-page--policy .ssc-prose [class*="kt-"],
.ssc-page--policy .ssc-prose [class*="kb-"],
.ssc-page--policy .ssc-prose .wp-block-group {
  background: transparent !important;
  box-shadow: none !important;
  max-width: none !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}
.ssc-page--policy .ssc-prose .wp-block-spacer,
.ssc-page--policy .ssc-prose .stk-block-heading:empty,
.ssc-page--policy .ssc-prose .kb-row-layout-wrap:not(:has(p, li, h1, h2, h3, h4, h5, h6, a, img)) {
  display: none !important;
}

/* Old Kadence closer: contact form plus the patterned image banner. */
.ssc-page--policy .ssc-prose form,
.ssc-page--policy .ssc-prose .kb-row-layout-wrap:has(form),
.ssc-page--policy .ssc-prose .wp-block-stackable-separator,
.ssc-page--policy .ssc-prose .stk-block-separator {
  display: none !important;
}