/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------
   Sized to its content, not to the viewport: a 100vh opener pushes the
   category grid — the thing that actually does the work — off the first
   screen. */

.ssc-hero {
  position: relative;
  isolation: isolate;
  background: var(--ssp-ink);
  color: var(--ssp-surface);
  --ss-motif-opacity: 0.16;
  padding-block: var(--ss-space-2xl) var(--ss-space-3xl);
  overflow: hidden;
}

.ssc-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ssc-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The measure, and the accent rule that anchors it to the left edge.
   This used to carry .ssc-shell as well, which meant margin-inline:auto
   centred the 44rem box in the viewport — the hero read as centred while
   every other section was left-aligned. The shell is now its parent. */
.ssc-hero__in {
  max-width: 40rem;
  border-inline-start: 5px solid var(--ssp-accent);
  padding-inline-start: clamp(1rem, 2vw, 1.5rem);
}

.ssc-hero .ssc-eyebrow { color: var(--ssp-accent-contrast); opacity: .75; }

.ssc-hero__title {
  font-size: clamp(2.75rem, 7.5vw, 5.5rem);
  margin-block: var(--ss-space-2xs) 0;
}

.ssc-hero__stand {
  margin-block-start: var(--ss-space-s);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 300;
  max-width: 34ch;
}

.ssc-hero__actions { margin-block-start: var(--ss-space-l); }

/* The outline button on the dark hero states its own colours — inheriting
   ink on ink is the collision that keeps recurring. */
.ssc-hero .ssc-btn--outline {
  border-color: var(--ssp-surface);
  color: var(--ssp-surface);
}

.ssc-hero .ssc-btn--outline:hover {
  background: var(--ssp-surface);
  color: var(--ssp-ink);
}

/* ---- Department tiles -------------------------------------------------- */

.ssc-dept {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--ssp-line);
  background: var(--ssp-surface);
  color: var(--ssp-ink);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--ss-duration) var(--ss-ease);
}

.ssc-dept:hover { border-color: var(--ssp-accent); }

.ssc-dept__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--ssp-surface-alt);
}

.ssc-dept__media img { width: 100%; height: 100%; object-fit: cover; }

.ssc-dept__body {
  display: grid;
  gap: 2px;
  padding: var(--ss-space-s);
}

.ssc-dept__name {
  font-family: var(--ssp-font-display);
  font-size: var(--ss-step-1);
  line-height: 1.05;
}

.ssc-dept__count {
  font-size: 0.76rem;
  color: var(--ssp-ink-muted);
  font-variant-numeric: tabular-nums;
}

.ssc-dept__angle {
  position: absolute;
  inset-block-end: var(--ss-space-s);
  inset-inline-end: var(--ss-space-s);
  --ss-angle-size: 1.5rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--ss-duration) var(--ss-ease),
              transform var(--ss-duration) var(--ss-ease);
}

.ssc-dept:hover .ssc-dept__angle { opacity: 1; transform: none; }

/* ---- Range cards ------------------------------------------------------- */

.ssc-rangecard {
  display: flex;
  flex-direction: column;
  gap: var(--ss-space-2xs);
  padding: var(--ss-space-m);
  background: var(--ssp-surface);
  border-block-start: 6px solid var(--ssp-line);
}

/* Weight of the top rule carries the level: light, mid, heavy. Colour
   alone would not survive a portal that changes the accent. */
.ssc-rangecard--everyday  { border-block-start-color: var(--ssp-line); }
.ssc-rangecard--endurance { border-block-start-color: var(--ssp-ink-muted); }
.ssc-rangecard--extreme   { border-block-start-color: var(--ssp-accent); }

.ssc-rangecard__name { font-size: 1.5rem; }

.ssc-rangecard__tag {
  font-family: var(--ssp-font-display);
  text-transform: uppercase;
  letter-spacing: var(--ss-tracking-label);
  color: var(--ssp-accent);
  font-size: var(--ss-step-0);
}

.ssc-rangecard__intro { font-size: 0.84rem; color: var(--ssp-ink-muted); }

.ssc-rangecard__link {
  margin-block-start: auto;
  padding-block-start: var(--ss-space-xs);
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--1);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
  color: var(--ssp-accent);
  text-decoration: none;
}

.ssc-rangecard__link:hover { text-decoration: underline; }

/* ---- Branding promo ---------------------------------------------------- */

.ssc-brandpromo__in {
  display: grid;
  gap: var(--ss-space-xl);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 56rem) {
  .ssc-brandpromo__in { grid-template-columns: 1.1fr 1fr; }
}

.ssc-brandpromo__title { font-size: var(--ss-step-4); margin-block: var(--ss-space-2xs) var(--ss-space-s); }
.ssc-brandpromo__body { max-width: 46ch; margin-block-end: var(--ss-space-m); }

.ssc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ssp-line);
  border: 1px solid var(--ssp-line);
  padding: 0;
  list-style: none;
}

.ssc-stats__item {
  background: var(--ssp-surface);
  padding: var(--ss-space-m) var(--ss-space-s);
  text-align: center;
}

.ssc-stats__figure {
  display: block;
  font-family: var(--ssp-font-display);
  font-size: var(--ss-step-2);
  line-height: 1;
  color: var(--ssp-accent);
  font-variant-numeric: tabular-nums;
}

.ssc-stats__label {
  display: block;
  margin-block-start: var(--ss-space-3xs);
  font-size: var(--ss-step--1);
  color: var(--ssp-ink-muted);
}

/* ---- Standard teasers -------------------------------------------------- */

.ssc-stdteaser {
  display: grid;
  gap: var(--ss-space-2xs);
  padding: var(--ss-space-s);
  border: 1px solid var(--ssp-line);
  background: var(--ssp-surface);
  color: var(--ssp-ink);
  text-decoration: none;
  transition: border-color var(--ss-duration) var(--ss-ease);
}

.ssc-stdteaser:hover { border-color: var(--ssp-accent); }
.ssc-stdteaser__icon img { width: 3rem; height: auto; }
.ssc-stdteaser__code { font-family: var(--ssp-font-display); font-size: var(--ss-step-1); line-height: 1.1; }
.ssc-stdteaser__sum { font-size: var(--ss-step--1); color: var(--ssp-ink-muted); }

/* ---- Department tile with no term image --------------------------------
   The motif fills the frame instead of a blank grey box. Slightly darker
   ground than the card so the tile still reads as a distinct object, and
   the motif is scaled down because the panel is small. */

.ssc-dept__media--empty {
  display: block;
  background: var(--ssp-surface-alt);
  --ss-motif-grid-size: 48px;
  --ss-motif-opacity: 0.55;
  --ss-motif-colour: var(--ssp-line-strong);
}

/* ==========================================================================
   PREPARED FOR WHAT? — the industry grid
   --------------------------------------------------------------------------
   The card carries the brand lockup at card scale: the brand line small and
   quiet, the modifier in the accent beneath it. Same two lines as the hero
   and the archive header, a third of the size.
   ========================================================================== */

/* The section sits on the warm paper so the white cards read as cards. */
.ssc-industries {
  background: var(--ssp-surface-alt);
}

.ssc-industries__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
  gap: var(--ss-space-xs);
}

.ssc-industries__item { min-width: 0; }

.ssc-industries__card {
  display: grid;
  gap: var(--ss-space-3xs);
  height: 100%;
  padding: var(--ss-space-s);
  border: 1px solid var(--ssp-line);
  background: var(--ssp-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ss-duration) var(--ss-ease),
              background var(--ss-duration) var(--ss-ease);
}

.ssc-industries__card:hover,
.ssc-industries__card:focus-visible {
  border-color: var(--ssp-ink);
  background: var(--ssp-surface-alt);
}

.ssc-industries__name {
  font-family: var(--ssp-font-display);
  font-size: var(--ss-step-1);
  line-height: var(--ss-leading-tight);
  letter-spacing: var(--ss-tracking-display);
  text-transform: uppercase;
}

.ssc-industries__tagline { display: block; }

.ssc-industries__lead {
  display: block;
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: var(--ss-step--3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ssp-ink-muted);
}

.ssc-industries__focus {
  display: block;
  font-family: var(--ssp-font-display);
  font-style: normal;
  font-size: var(--ss-step-0);
  line-height: var(--ss-leading-tight);
  letter-spacing: var(--ss-tracking-display);
  text-transform: uppercase;
  color: var(--ssp-accent);
}

.ssc-industries__kit {
  display: block;
  margin-top: var(--ss-space-3xs);
  font-size: var(--ss-step--1);
  color: var(--ssp-ink-muted);
}

/* ==========================================================================
   MOVING THIS MONTH
   --------------------------------------------------------------------------
   No styling of its own: it is the shop's product card in a row, so that a
   change to the card changes this too. Only the section needs the rule.
   ========================================================================== */

.ssc-moving .products {
  grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
}

/* ==========================================================================
   BIG ENOUGH TO COPE
   ========================================================================== */

.ssc-account {
  background: var(--ssp-ink);
  color: var(--ssp-surface);
}

.ssc-account__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-m);
}

.ssc-account__words { min-width: 0; }

.ssc-account__title {
  margin: 0 0 var(--ss-space-2xs);
  font-family: var(--ssp-font-display);
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: var(--ss-leading-tight);
  letter-spacing: var(--ss-tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Two sentences, two lines — the second is the half that does the work. */
.ssc-account__title-second {
  display: block;
  color: var(--ssp-accent-on-dark);
}

.ssc-account__copy {
  margin: 0;
  max-width: 36ch;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--ssp-surface);
  opacity: 0.85;
}

.ssc-account__action { margin: 0; }

/* ==========================================================================
   SECTION HEADER additions
   ========================================================================== */

.ssc-section-head__intro {
  margin: var(--ss-space-2xs) 0 0;
  max-width: 56ch;
  font-size: 0.88rem;
  color: var(--ssp-ink-muted);
}

/* "All industries →", "Best sellers →" — a quiet link beside the heading. */
.ssc-section-head__more {
  display: inline-block;
  margin-top: var(--ss-space-2xs);
  font-family: var(--ssp-font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ssp-accent);
  text-decoration: none;
}

.ssc-section-head__more::after {
  content: " \2192";
}

.ssc-section-head__more:hover,
.ssc-section-head__more:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ==========================================================================
   BLOCK LOCKUPS
   --------------------------------------------------------------------------
   The prototypes set three headlines on two lines — "Be prepared. / Be
   Suresafe prepared", "Your name on it, / done under our own roof", "Which
   standard, / and why it matters". The break is the design, not a
   consequence of the column being narrow, so it is declared rather than left
   to whatever width the text happens to wrap at.
   ========================================================================== */

.ssc-hero__lead,
.ssc-section-head__title-second,
.ssc-brandpromo__title-second {
  display: block;
}

/* The first line is the quieter of the two: it sets up the second. */
.ssc-hero__lead {
  color: var(--ssp-surface);
  opacity: .72;
}

.ssc-section-head__title-second,
.ssc-brandpromo__title-second {
  color: var(--ssp-ink-muted);
}

/* ---- The plus mark ------------------------------------------------------
   Lifted from the prototype exactly: accent, light, a third of the headline,
   hung off the top of the line. It is ornament, so it is aria-hidden in the
   markup and must never be the only thing carrying a meaning. */

.ssc-mark-plus {
  color: var(--ssp-accent);
  font-weight: 300;
  font-size: 0.34em;
  vertical-align: text-top;
  margin-inline-start: 0.2em;
}

/* ---- Call-to-action band, three treatments ----------------------------- */

.ssc-account--accent {
  background: var(--ssp-accent);
  color: var(--ssp-accent-contrast);
}

.ssc-account--accent .ssc-account__title-second { color: inherit; opacity: .78; }

.ssc-account--accent .ssc-btn--solid {
  background: var(--ssp-ink);
  color: var(--ssp-surface);
  border-color: var(--ssp-ink);
}

.ssc-account--surface {
  background: var(--ssp-surface-alt);
  color: var(--ssp-ink);
}

.ssc-account--surface .ssc-account__title-second { color: var(--ssp-ink-muted); }

/* A block with nothing to show says so — in the editor only, never to a
   visitor. See ssc_block_empty(). */
.ssc-block-empty {
  margin: 0;
  padding: var(--ss-space-l);
  border: 1px dashed var(--ssp-line);
  color: var(--ssp-ink-muted);
  font-size: var(--ss-step--1);
  text-align: center;
}