/* ============================================================
   Four Suit Studio — Design System (2026 redesign)
   Tokens + component classes. Applied inside a `.fss` wrapper so
   redesigned pages get the full treatment; un-rebuilt pages stay as-is.
   ============================================================ */

:root {
  /* Core brand — ink on cream, red pips */
  --fss-ink: #1d1d1b;
  --fss-ink-soft: #2a292a;
  --fss-pip-red: #a33e32;
  --fss-pip-red-bright: #af0f07;
  --fss-cream: #e4ded2;
  --fss-cream-light: #edebdf;
  --fss-paper: #fff2cf;
  --fss-white: #fdfaf8;

  --fss-warm-100: #f3f0ea;
  --fss-warm-200: #dedcdc;
  --fss-warm-300: #d4c9c9;
  --fss-warm-400: #a39595;
  --fss-warm-500: #877373;
  --fss-warm-600: #473838;
  --fss-warm-700: #2a292a;

  /* River Rats */
  --rr-gold: #d3a843; --rr-gold-deep: #b37134; --rr-red: #a33e32; --rr-red-deep: #6b1f1f;
  --rr-blue: #2a4b6b; --rr-blue-deep: #1a3148; --rr-cream: #fff2cf; --rr-ink: #1d1d1b;

  /* Gallery Gambit */
  --gg-ink: #1d1d1b; --gg-cream: #e4ded2; --gg-peach: #ffb799; --gg-tan: #e8b080;
  --gg-pink: #dba4a4; --gg-sage: #9eb5b1; --gg-mint: #a1c4b2; --gg-yellow: #f3d36b;
  --gg-blue: #60a9d4; --gg-red: #af0f07;

  /* Monsters of Loch Lomond */
  --moll-storm: #4f6360; --moll-deep: #2a3a4a; --moll-foam: #c4d4d2; --moll-bone: #ede5cf; --moll-rust: #b37134;
  /* --moll-rust is a fill colour: at 3.8:1 on white it fails AA as text.
     Use this darker cut (7.1:1) whenever the rust appears as a label. */
  --moll-rust-deep: #7a4a20;

  /* Semantic */
  --bg: var(--fss-cream); --bg-alt: var(--fss-cream-light); --bg-elev: var(--fss-white); --bg-inverse: var(--fss-ink);
  --fg: var(--fss-ink); --fg-muted: var(--fss-warm-500); --fg-inverse: var(--fss-cream); --fg-accent: var(--fss-pip-red);
  --border: var(--fss-ink); --divider: rgba(29,29,27,0.12);
  --accent: var(--fss-pip-red); --accent-hover: var(--fss-pip-red-bright);

  --shadow-hard: 0 2px 0 var(--fss-ink);
  --shadow-card: 0 2px 0 var(--fss-ink), 0 8px 24px rgba(29,29,27,0.18);
  --shadow-soft: 0 1px 3px rgba(29,29,27,0.10), 0 6px 16px rgba(29,29,27,0.06);
  --shadow-deep: 0 4px 0 var(--fss-ink), 0 14px 40px rgba(29,29,27,0.30);

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;

  --font-display: 'DM Serif Display', 'Horas', Georgia, serif;
  --font-ui-wide: 'Archivo', 'Roc Grotesk', system-ui, sans-serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-hand: 'Caveat Brush', cursive;

  /* Astra's desktop header sits in normal flow above the hero, so a plain
     100svh hero is pushed a full header-height below the fold. */
  --fss-header-h: 153px;
}

/* Astra pads #primary (~48px top and bottom). On design-system pages every
   section owns its own vertical space, so that padding is pure dead air —
   and it pushed the hero a further 48px below the fold. */
body:has(.fss) #primary,
body:has(.fss) .site-content > .ast-container { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
/* The block editor also puts root padding on the alignfull .fss wrapper itself.
   Zero it on every side: vertically it was the last 48px between the header and
   the hero, and horizontally it inset every section by 48px — which left cream
   gutters beside the dark heroes while the header ran full-bleed.
   `.fss-section` supplies all the padding the content needs. */
.wp-block-group.fss { padding: 0 !important; }

/* ---- Scoped base ---- */
.fss { background: var(--bg); color: var(--fg); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.fss a { color: inherit; text-decoration: none; }
.fss a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fss img { max-width: 100%; height: auto; }
/* Reset default block margins so flex `gap` is the single source of vertical rhythm */
.fss p, .fss h1, .fss h2, .fss h3, .fss h4, .fss figure { margin: 0; }

/* ---- Type presets ---- */
.fss .fss-h1, .fss .fss-h2, .fss .fss-h3, .fss .fss-h4 {
  font-family: var(--font-display); color: var(--fg); font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.0; margin: 0; text-wrap: balance;
}
.fss .fss-h1 { font-size: clamp(48px, 7vw, 96px); line-height: 0.95; }
.fss .fss-h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; }
.fss .fss-h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
.fss .fss-h4 { font-size: 24px; line-height: 1.1; }
.fss .fss-eyebrow { font-family: var(--font-ui-wide); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-stretch: 125%; }
.fss .fss-label { font-family: var(--font-ui-wide); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; font-stretch: 125%; }
.fss .fss-body { font-family: var(--font-body); font-size: 18px; line-height: 1.5; }
.fss .fss-body-sm { font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
.fss .fss-label-sm { font-family: var(--font-ui-wide); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-stretch: 125%; }
.fss .fss-ui { font-family: var(--font-ui); }
.fss .fss-hand { font-family: var(--font-hand); color: var(--fg-accent); }
.fss .fss-accent { color: var(--fg-accent); }
.fss .fss-muted { color: var(--fg-muted); }

/* ---- Eyebrow "plaque" (outlined ink chip) ---- */
.fss .fss-chip { display: inline-block; background: var(--fss-ink); color: var(--fss-cream); font-family: var(--font-ui-wide);
  font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 14px; border-radius: 3px;
  outline: 1.5px solid var(--fss-ink); outline-offset: 3px; font-stretch: 125%; }

/* ---- Sections ---- */
.fss .fss-section { padding: 64px 48px; background: var(--bg); border-bottom: 1.5px solid var(--fss-ink); }
.fss .fss-section--alt { background: var(--bg-alt); }
.fss .fss-section--ink { background: var(--fss-ink); color: var(--fss-cream); }
.fss .fss-section--ink .fss-h1, .fss .fss-section--ink .fss-h2, .fss .fss-section--ink .fss-h3 { color: var(--fss-cream); }
.fss .fss-wrap { max-width: 1280px; margin: 0 auto; }
@media (max-width: 782px) { .fss .fss-section { padding: 44px 22px; } }

/* ---- Buttons (hard offset shadow, ink border, uppercase Archivo) ---- */
.fss .fss-btn, .fss a.fss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-family: var(--font-ui-wide); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 26px; border: 1.5px solid var(--fss-ink); border-radius: var(--radius-md);
  background: var(--fss-ink); color: var(--fss-cream); box-shadow: var(--shadow-hard); text-decoration: none;
  transition: transform 120ms ease, background 160ms ease; font-stretch: 110%;
}
.fss .fss-btn:hover { background: var(--fss-ink-soft); text-decoration: none; }
.fss .fss-btn:active { transform: translateY(2px); box-shadow: none; }
.fss .fss-btn--accent { background: var(--gg-red); color: var(--fss-cream); border-color: var(--fss-ink); }
.fss .fss-btn--accent:hover { background: var(--fss-pip-red-bright); }
.fss .fss-btn--gold { background: var(--rr-gold); color: var(--fss-ink); }
.fss .fss-btn--ghost { background: var(--fss-white); color: var(--fss-ink); }
.fss .fss-btn--ghost-cream { background: transparent; color: var(--fss-cream); border-color: var(--fss-cream); box-shadow: none; }

/* ---- Cards ---- */
.fss .fss-card { background: var(--fss-white); border: 1.5px solid var(--fss-ink); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 220ms ease, box-shadow 220ms ease; }
.fss a.fss-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); text-decoration: none; }
.fss .fss-card--flat { box-shadow: var(--shadow-hard); }

/* ---- Spec bar (2–5 / 15 / 10+ / 54) ---- */
.fss .fss-specbar { display: inline-flex; border: 1.5px solid var(--fss-ink); border-radius: var(--radius-md);
  overflow: hidden; background: var(--fss-white); }
.fss .fss-specbar > div { padding: 12px 22px; display: flex; flex-direction: column; gap: 2px; border-right: 1.5px solid var(--fss-ink); }
.fss .fss-specbar > div:last-child { border-right: none; }
.fss .fss-specbar .n { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.fss .fss-specbar .k { font-family: var(--font-ui-wide); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; }

/* ---- Dark grounds: headings must flip to the ground's light tone ---- */
.fss .bg-ink h1, .fss .bg-ink h2, .fss .bg-ink h3, .fss .bg-ink h4,
.fss .bg-ink .fss-h1, .fss .bg-ink .fss-h2, .fss .bg-ink .fss-h3, .fss .bg-ink .fss-h4 { color: var(--fss-cream); }
.fss .bg-rr-blue-deep h1, .fss .bg-rr-blue-deep h2, .fss .bg-rr-blue-deep h3, .fss .bg-rr-blue-deep h4,
.fss .bg-rr-blue-deep .fss-h1, .fss .bg-rr-blue-deep .fss-h2, .fss .bg-rr-blue-deep .fss-h3, .fss .bg-rr-blue-deep .fss-h4 { color: var(--rr-cream); }
.fss .bg-moll-deep h1, .fss .bg-moll-deep h2, .fss .bg-moll-deep h3, .fss .bg-moll-deep h4,
.fss .bg-moll-deep .fss-h1, .fss .bg-moll-deep .fss-h2, .fss .bg-moll-deep .fss-h3, .fss .bg-moll-deep .fss-h4 { color: var(--moll-bone); }
/* On a dark ground the muted tone must lighten, not darken, or it drops below 3:1 */
.fss .bg-ink .fss-muted, .fss .bg-rr-blue-deep .fss-muted, .fss .bg-moll-deep .fss-muted { color: inherit; opacity: 0.72; }
/* Spec bar on a dark ground: invert so it reads as an inlaid plaque, not a hole */
.fss .bg-rr-blue-deep .fss-specbar { background: var(--rr-cream); border-color: var(--rr-cream); color: var(--rr-ink); }
.fss .bg-rr-blue-deep .fss-specbar > div { border-right-color: rgba(29,29,27,0.25); }

/* ---- Faction / suit card (game detail pages) ---- */
.fss .fss-suitcard { background: var(--fss-white); border: 1.5px solid var(--fss-ink); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-hard); display: flex; flex-direction: column; }
.fss .fss-suitcard img { display: block; width: 100%; height: auto; border-bottom: 1.5px solid var(--fss-ink); border-radius: 0; }
.fss .fss-suitcard .sc-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.fss .fss-suitcard .sc-s { font-family: var(--font-display); font-size: 20px; line-height: 1; }
.fss .fss-suitcard .sc-n { font-family: var(--font-ui-wide); font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; font-stretch: 125%; }
.fss .fss-suitcard .sc-d { font-family: var(--font-body); font-size: 15px; line-height: 1.4; color: var(--fg-muted); }

/* ---- Language download grid (Rules & Downloads) ---- */
.fss .fss-langgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; }
@media (max-width: 900px) { .fss .fss-langgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fss .fss-langgrid { grid-template-columns: 1fr; } }
.fss .fss-lang { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  background: var(--fss-white); border: 1.5px solid var(--fss-ink); border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard); padding: 14px 16px 16px; }
.fss .fss-lang .l { font-family: var(--font-ui-wide); font-weight: 600; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-stretch: 125%; color: var(--fg-muted); margin-bottom: 2px; }
.fss .fss-lang a { font-family: var(--font-body); font-size: 17px; line-height: 1.3; color: var(--fg-accent);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fss .fss-lang a:hover { color: var(--fss-pip-red-bright); }

/* ---- Price line for buy cards ---- */
.fss .fss-price { font-family: var(--font-ui-wide); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; font-stretch: 110%;
  font-variant-numeric: tabular-nums; }
.fss .fss-price s { font-weight: 500; font-size: 15px; opacity: 0.55; margin-left: 8px; }

/* ---- Trust bar (shop header): 3 ink-ruled cells, caps key + serif value ---- */
.fss .fss-trustbar { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%;
  border: 1.5px solid var(--fss-ink); border-radius: var(--radius-md); overflow: hidden;
  background: var(--fss-white); box-shadow: var(--shadow-hard); }
.fss .fss-trustbar > div { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; border-right: 1.5px solid var(--fss-ink); }
.fss .fss-trustbar > div:last-child { border-right: none; }
.fss .fss-trustbar .k { font-family: var(--font-ui-wide); font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-accent); font-stretch: 125%; }
.fss .fss-trustbar .v { font-family: var(--font-body); font-size: 16px; line-height: 1.4; }
@media (max-width: 600px) {
  .fss .fss-trustbar { grid-template-columns: 1fr; }
  .fss .fss-trustbar > div { border-right: none; border-bottom: 1.5px solid var(--fss-ink); }
  .fss .fss-trustbar > div:last-child { border-bottom: none; }
}
/* Shop masthead sits directly above the SureCart list: trim the bottom padding */
.fss .fss-shop-head { padding-bottom: 40px; }
@media (max-width: 600px) { .fss .fss-shop-head { padding-bottom: 24px; } }

/* ---- Suit pip row + per-suit colors ---- */
.fss .fss-suits { display: inline-flex; gap: 14px; font-family: var(--font-display); }
.fss .pip-red { color: var(--gg-red); } .fss .pip-ink { color: var(--fss-ink); }
.fss .pip-peach { color: var(--gg-peach); } .fss .pip-yellow { color: var(--gg-yellow); } .fss .pip-sage { color: var(--gg-sage); }
.fss .pip-gold { color: var(--rr-gold); } .fss .pip-blue { color: var(--gg-blue); }

/* ---- GG ink frame around a logo ---- */
.fss .fss-frame { display: inline-flex; background: var(--gg-ink); padding: 20px 26px; border-radius: 6px; box-shadow: 0 3px 0 rgba(29,29,27,0.25); }

/* ---- Per-game background helpers ---- */
.fss .bg-cream { background: var(--fss-cream); } .fss .bg-cream-light { background: var(--fss-cream-light); }
.fss .bg-paper { background: var(--fss-paper); } .fss .bg-white { background: var(--fss-white); }
.fss .bg-ink { background: var(--fss-ink); color: var(--fss-cream); }
.fss .bg-gg-cream { background: var(--gg-cream); } .fss .bg-gg-peach { background: var(--gg-peach); }
.fss .bg-gg-sage { background: var(--gg-sage); } .fss .bg-gg-yellow { background: var(--gg-yellow); }
.fss .bg-rr-cream { background: var(--rr-cream); } .fss .bg-rr-blue-deep { background: var(--rr-blue-deep); color: var(--rr-cream); }
.fss .bg-rr-red-deep { background: var(--rr-red-deep); color: var(--rr-cream); }
.fss .bg-moll-deep { background: var(--moll-deep); color: var(--moll-bone); }

/* Divider rule under content areas */
.fss .fss-divider { border: none; border-top: 1.5px solid var(--fss-ink); margin: 0; }

/* ---- Layout helpers (used by the block markup) ---- */
.fss .fss-wrap { max-width: 1280px; margin: 0 auto; }
.fss .fss-narrow { max-width: 860px; margin: 0 auto; }
.fss .fss-center { text-align: center; }
.fss .fss-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.fss .fss-stack { display: flex; flex-direction: column; }
.fss .fss-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fss .fss-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fss .fss-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.fss .fss-hero:has(.fss-herofig) { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 900px) {
  .fss .fss-grid-4 { grid-template-columns: 1fr 1fr; }
  .fss .fss-grid-3, .fss .fss-hero { grid-template-columns: 1fr; }
  /* :has() above raises specificity, so the stacked rule must repeat it or the
     hero stays two-column on phones and the figure collapses to a thumbnail. */
  .fss .fss-hero:has(.fss-herofig) { grid-template-columns: 1fr; }
}
/* Cards in a grid stretch to equal height; the CTA must sit on a shared baseline,
   so the body grows and the button row is pushed to the bottom. */
.fss .fss-grid-4 > .fss-card, .fss .fss-grid-3 > .fss-card,
.fss .fss-grid-4 > .fss-suitcard, .fss .fss-grid-3 > .fss-suitcard { display: flex; flex-direction: column; height: 100%; }
.fss .fss-card > .fss-gc-body { flex: 1 1 auto; }
/* WordPress' block-gap rule (`> * + *`) puts margin-block-start on every grid
   item except the first, so card 1 rides 24px higher than its neighbours.
   The grid already has `gap`; kill the stray margin. */
.fss .fss-grid-4 > *, .fss .fss-grid-3 > * { margin-block-start: 0; margin-top: 0; }
.fss .fss-gc-body .wp-block-buttons { margin-top: auto; padding-top: 4px; }

.fss .fss-gc-head { height: 128px; border-bottom: 1.5px solid var(--fss-ink); display: flex; align-items: center; justify-content: center; position: relative; padding: 14px; }
.fss .fss-gc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
/* margin-top:auto (set above) pins the CTA to the card's bottom edge — do not
   replace it with a fixed margin here or cards in a row lose their shared baseline. */
.fss .fss-gc-corner { position: absolute; font-family: var(--font-display); font-size: 16px; }
.fss .tl { top: 11px; left: 13px; } .fss .tr { top: 11px; right: 13px; } .fss .bl { bottom: 11px; left: 13px; } .fss .br { bottom: 11px; right: 13px; }
.fss .fss-fan { position: relative; height: 460px; display: flex; align-items: center; justify-content: center; }
.fss .fss-fan img { position: absolute; border: 1.5px solid var(--fss-ink); border-radius: 10px; box-shadow: var(--shadow-card); }
@media (max-width: 900px) { .fss .fss-fan { height: 340px; } }
.fss .fss-hr { border: none; border-top: 1.5px solid var(--fss-ink); margin: 0; }
/* Product box render: floats on the ground with a soft contact shadow, no frame */
.fss .fss-herofig { display: flex; align-items: center; justify-content: center; }
.fss .fss-herofig img { width: 100%; height: auto; border: 1.5px solid var(--fss-ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: block; }

.fss .fss-boxshot { display: flex; align-items: center; justify-content: center; }
.fss .fss-boxshot img { width: 100%; max-width: 460px; height: auto;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.42)); }
@media (max-width: 900px) { .fss .fss-boxshot img { max-width: 320px; } }

/* The first section butts against the header bar: give the eyebrow a little
   extra room so it never tucks under the logo badge. */
.fss > .fss-section:first-child { padding-top: 40px; }
@media (max-width: 600px) { .fss > .fss-section:first-child { padding-top: 28px; } }

/* ---- Core Gutenberg block mapping (so Button/Image/Heading blocks get the brand) ---- */
.fss .wp-block-button__link {
  font-family: var(--font-ui-wide); font-weight: 600; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; border: 1.5px solid var(--fss-ink); border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard); background: var(--fss-ink); color: var(--fss-cream); padding: 15px 26px;
  transition: transform 120ms ease, background 160ms ease;
}
.fss .wp-block-button__link:hover { background: var(--fss-ink-soft); }
.fss .wp-block-button__link:active { transform: translateY(2px); box-shadow: none; }
.fss .is-accent .wp-block-button__link { background: var(--gg-red); color: var(--fss-cream); }
.fss .is-accent .wp-block-button__link:hover { background: var(--fss-pip-red-bright); }
.fss .is-gold .wp-block-button__link { background: var(--rr-gold); color: var(--fss-ink); }
.fss .is-ghost .wp-block-button__link { background: var(--fss-white); color: var(--fss-ink); }
.fss .is-ghost-cream .wp-block-button__link { background: transparent; color: var(--fss-cream); border-color: var(--fss-cream); box-shadow: none; }
.fss .wp-block-image img { border-radius: var(--radius-lg); }
.fss .fss-frame .wp-block-image, .fss .fss-frame img { border-radius: 0; }
.fss .fss-gc-head .wp-block-image img { border-radius: 0; }
.fss .fss-fan .wp-block-image { margin: 0; }
/* headings inside .fss use the display serif unless a util overrides */
.fss h1, .fss h2, .fss h3 { font-family: var(--font-display); font-weight: 400; }

/* ============================================================
   SITE-WIDE header + footer restyle (NOT scoped to .fss — applies
   to the Astra header/footer builder on every page).
   ============================================================ */
.main-header-bar, .ast-primary-header-bar { background-color: var(--fss-cream) !important; border-bottom: 1.5px solid var(--fss-ink) !important; box-shadow: none !important; }
.main-header-menu .menu-link, .main-header-menu .menu-item > a, .ast-header-navigation-arrow {
  font-family: var(--font-ui-wide) !important; text-transform: uppercase !important;
  letter-spacing: 0.14em !important; font-size: 12px !important; font-weight: 600 !important; color: var(--fss-ink) !important;
}
.main-header-menu .menu-link:hover, .main-header-menu .menu-item > a:hover { color: var(--fss-pip-red) !important; }
.ast-header-break-point .main-header-bar { border-bottom: 1.5px solid var(--fss-ink) !important; }

.site-footer { background-color: var(--fss-ink) !important; }
.site-footer, .site-footer p, .site-footer li, .site-footer span,
.site-footer .widget-title, .site-footer h2, .site-footer h3, .site-footer h4 { color: var(--fss-cream) !important; }
.site-footer a { color: var(--fss-cream) !important; }
/* Social icons: near-black fill is invisible on the dark footer — force cream */
.site-footer svg, .site-footer .ast-builder-social-element svg, .site-footer [class*="social"] svg { fill: var(--fss-cream) !important; color: var(--fss-cream) !important; }
.site-footer .ast-builder-social-element:hover svg { fill: var(--fss-orange, #ea791e) !important; }

/* ============================================================
   SureCart product cards (Shop + any product listing) — brand the
   card language: ink border, hard shadow, serif title, wide-caps price.
   ============================================================ */
.sc-product-item {
  /* Pure white, not the warm --fss-white: the packshots are shot on white, so
     this makes their backgrounds disappear into the card instead of showing
     as a lighter rectangle. */
  background: #ffffff !important; border: 1.5px solid var(--fss-ink) !important;
  border-radius: var(--radius-lg) !important; overflow: hidden;
  box-shadow: var(--shadow-soft) !important; transition: transform 220ms ease, box-shadow 220ms ease;
}
.sc-product-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card) !important; }
/* The product template locks the cover to a 1/1.33 box and fills it with
   object-fit:cover, which crops the packshots (box lids, playmats, chip stacks
   all lose their edges). Show the whole product instead and let it letterbox. */
.sc-product-item .wp-block-cover__image-background,
.sc-product-item .wp-block-cover img,
.sc-product-item .wp-block-cover video {
  object-fit: contain !important; padding: 10px; background: transparent !important;
}
/* The template paints a white plate behind the packshot, which reads as a hard
   white box inside the warm card. Let the card colour run through instead. */
.sc-product-item .wp-block-cover,
.sc-product-item .wp-block-cover__background,
.sc-product-item .wp-block-cover .wp-block-cover__inner-container,
.sc-product-item .has-background { background-color: transparent !important; background-image: none !important; }
/* Card text was flush to the edges with no breathing room */
.sc-product-item { padding: 14px 18px 20px !important; }
.sc-product-item .wp-block-surecart-product-title { margin-top: 14px !important; }
.wp-block-surecart-product-title, .wp-block-surecart-product-title a {
  font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: var(--fss-ink) !important;
}
.wp-block-surecart-product-list-price, .wp-block-surecart-product-scratch-price {
  font-family: var(--font-ui-wide) !important; font-weight: 600 !important; letter-spacing: 0.04em !important;
}
.wp-block-surecart-product-sale-badge {
  background: var(--fss-pip-red) !important; color: var(--fss-cream) !important; border: 1px solid var(--fss-ink) !important;
  border-radius: 3px !important; font-family: var(--font-ui-wide) !important; text-transform: uppercase !important;
  letter-spacing: 0.14em !important; font-weight: 700 !important; font-size: 9px !important;
}
/* Shop page canvas -> cream, so the framed cards sit on the brand ground (page id 197 = /games) */
body.page-id-197, body.page-id-197 .site-content, body.page-id-197 #content { background-color: var(--fss-cream) !important; }

/* ---- SureCart single product page ---- */
body.single-sc_product, body.single-sc_product .site-content, body.single-sc_product #content { background-color: var(--fss-cream) !important; }
/* Astra's boxed article panel would float a white card on the cream ground */
body.single-sc_product .ast-article-single, body.single-sc_product .entry-content { background: transparent !important; box-shadow: none !important; }
body.single-sc_product .entry-title, body.single-sc_product .ast-single-post-order { display: none; }
/* Long-form product copy lives in the post body, outside the SureCart
   description block, so it misses the block-scoped rules below. */
body.single-sc_product .entry-content p, body.single-sc_product .entry-content li {
  font-family: var(--font-body) !important; font-size: 18px !important; line-height: 1.6 !important;
  color: var(--fss-ink) !important;
}
body.single-sc_product .entry-content h2, body.single-sc_product .entry-content h3,
body.single-sc_product .entry-content h4 {
  font-family: var(--font-display) !important; font-weight: 400 !important; color: var(--fss-ink) !important;
}
/* SureCart leaves empty <figure><img src=""> placeholders for unset gallery slots */
body.single-sc_product figure:has(> img[src=""]) { display: none; }

.wp-block-surecart-product-media img, .wp-block-surecart-product-media .wp-block-image img {
  border: 1.5px solid var(--fss-ink) !important; border-radius: var(--radius-lg) !important;
  background: var(--fss-white); box-shadow: var(--shadow-hard) !important;
}
.wp-block-surecart-product-page .wp-block-surecart-product-title,
.wp-block-surecart-product-page h1, .wp-block-surecart-product-page h2 {
  font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.01em !important;
  color: var(--fss-ink) !important; line-height: 1.04 !important;
}
.wp-block-surecart-product-selected-price-amount, .wp-block-surecart-product-selected-price-scratch-amount {
  font-family: var(--font-ui-wide) !important; font-weight: 700 !important; letter-spacing: 0.03em !important;
  font-variant-numeric: tabular-nums; color: var(--fss-ink) !important;
}
.wp-block-surecart-product-selected-price-scratch-amount { opacity: 0.5; font-weight: 500 !important; }
.wp-block-surecart-product-description { font-family: var(--font-body) !important; font-size: 18px !important; line-height: 1.6 !important; }
.wp-block-surecart-product-description strong { font-weight: 600; }
.wp-block-surecart-product-quantity input, .wp-block-surecart-product-quantity {
  border-radius: var(--radius-md) !important; border-color: var(--fss-ink) !important; font-family: var(--font-ui) !important;
}
.wp-block-surecart-product-buy-button button, .wp-block-surecart-product-buy-button .sc-button,
.wp-block-surecart-product-buy-buttons button {
  font-family: var(--font-ui-wide) !important; font-weight: 600 !important; font-size: 13px !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  background: var(--fss-ink) !important; color: var(--fss-cream) !important;
  border: 1.5px solid var(--fss-ink) !important; border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-hard) !important; padding: 15px 26px !important;
}
.wp-block-surecart-product-buy-button button:hover, .wp-block-surecart-product-buy-buttons button:hover { background: var(--fss-ink-soft) !important; }
.wp-block-surecart-product-buy-button button:active, .wp-block-surecart-product-buy-buttons button:active { transform: translateY(2px); box-shadow: none !important; }
.wp-block-surecart-product-collection-tag {
  font-family: var(--font-ui-wide) !important; text-transform: uppercase !important; letter-spacing: 0.14em !important;
  font-size: 10px !important; font-weight: 600 !important;
  border: 1.5px solid var(--fss-ink) !important; border-radius: 3px !important; background: transparent !important;
  color: var(--fss-ink) !important;
}
.wp-block-surecart-product-list-related > h2, .wp-block-surecart-product-list-related h2 {
  font-family: var(--font-display) !important; font-weight: 400 !important;
}
/* The product template ships pure black body copy in Heebo; pull it onto the
   brand ink + serif so the product page reads as the same site. */
.wp-block-surecart-product-page, .wp-block-surecart-product-page p,
.wp-block-surecart-product-page li, .wp-block-surecart-product-description * {
  color: var(--fss-ink) !important;
}
.wp-block-surecart-product-page .wp-block-surecart-product-title { font-size: clamp(34px, 4.5vw, 56px) !important; }
.wp-block-surecart-product-selected-price-amount { font-size: 26px !important; }
/* Product list cards (shop + related) */
.sc-product-item, .sc-product-item p, .sc-product-item span, .sc-product-item div {
  color: var(--fss-ink) !important;
}
.sc-product-item .wp-block-surecart-product-title,
.sc-product-item .wp-block-surecart-product-title a { font-size: 17px !important; line-height: 1.15 !important; }
.sc-product-item .wp-block-surecart-product-list-price,
.sc-product-item .wp-block-surecart-product-scratch-price { font-variant-numeric: tabular-nums; }

/* ---- Slide-out cart: it opens mid-purchase, so it must not be an unbranded
   black/Inter drawer with a stray red border. ---- */
.wp-block-surecart-slide-out-cart, .wp-block-surecart-slide-out-cart p,
.wp-block-surecart-slide-out-cart span, .wp-block-surecart-slide-out-cart h2 { font-family: var(--font-ui) !important; }
.wp-block-surecart-slide-out-cart h2, .wp-block-surecart-cart-line-item-title {
  font-family: var(--font-display) !important; font-weight: 400 !important;
}
.wp-block-surecart-slide-out-cart button,
.wp-block-surecart-slide-out-cart-items-submit button,
.wp-block-surecart-slide-out-cart a[class*="button"] {
  font-family: var(--font-ui-wide) !important; font-weight: 600 !important; font-size: 13px !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  background: var(--fss-ink) !important; color: var(--fss-cream) !important;
  border: 1.5px solid var(--fss-ink) !important; border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-hard) !important;
}
.wp-block-surecart-cart-line-item-amount, .wp-block-surecart-cart-subtotal-amount {
  font-family: var(--font-ui-wide) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums;
}
/* Close / remove controls are icon buttons — keep them plain, not ink slabs */
.wp-block-surecart-cart-close-button button, .wp-block-surecart-cart-line-item-remove button {
  background: transparent !important; border: none !important; box-shadow: none !important; color: var(--fss-ink) !important;
}
.site-footer a:hover { color: var(--fss-orange, #ea791e) !important; text-decoration: underline; }
.site-footer .widget-title, .site-footer h2, .site-footer h3 {
  font-family: var(--font-ui-wide) !important; text-transform: uppercase !important; letter-spacing: 0.14em !important;
  font-size: 12px !important; font-weight: 600 !important; opacity: 0.75;
}
/* Home has its own newsletter section, so the footer's signup row would render
   the identical Kit form twice, a few hundred pixels apart. Hide it there only. */
/* Astra sets display on the grid-row container, so this needs !important to win */
body.page-id-1559 .site-above-footer-wrap,
body.home .site-above-footer-wrap { display: none !important; }

/* Astra footer inner rows carry their own light backgrounds — clear them so the dark footer shows through */
.site-footer .site-above-footer-wrap, .site-footer .site-primary-footer-wrap, .site-footer .site-below-footer-wrap { background-color: transparent !important; }
.site-footer input[type="email"], .site-footer input[type="text"] { background: var(--fss-white) !important; color: var(--fss-ink) !important; border: 1.5px solid var(--fss-cream) !important; }
.site-footer input::placeholder { color: var(--fss-warm-500) !important; }

/* ============================================================
   Kit (ConvertKit) embedded forms — the widget injects its own
   markup + inline styles at runtime, so brand it site-wide with
   !important rather than trying to theme it in the Kit dashboard.
   ============================================================ */
.formkit-form[data-uid] { background-color: transparent !important; border: none !important; box-shadow: none !important; }
.formkit-form[data-uid] .formkit-input,
.formkit-form[data-uid] input.formkit-input {
  font-family: var(--font-ui) !important; font-size: 15px !important;
  border: 1.5px solid var(--fss-ink) !important; border-radius: var(--radius-md) !important;
  background: var(--fss-white) !important; color: var(--fss-ink) !important; padding: 13px 14px !important;
}
.formkit-form[data-uid] .formkit-submit,
.formkit-form[data-uid] [data-element="submit"] {
  background-color: var(--fss-pip-red) !important; border: 1.5px solid var(--fss-ink) !important;
  border-radius: var(--radius-md) !important; box-shadow: var(--shadow-hard) !important;
  padding: 13px 24px !important; transition: transform 120ms ease, background-color 160ms ease !important;
}
.formkit-form[data-uid] .formkit-submit > span,
.formkit-form[data-uid] [data-element="submit"] > span {
  font-family: var(--font-ui-wide) !important; font-weight: 600 !important; font-size: 13px !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--fss-cream) !important;
}
.formkit-form[data-uid] .formkit-submit:hover { background-color: var(--fss-pip-red-bright) !important; }
.formkit-form[data-uid] .formkit-submit:active { transform: translateY(2px); box-shadow: none !important; }
.formkit-form[data-uid] .formkit-guarantee,
.formkit-form[data-uid] .formkit-disclaimer { font-family: var(--font-ui) !important; font-size: 12px !important; }
/* On the ink footer the ink border disappears: switch the frame to cream */
.site-footer .formkit-form[data-uid] .formkit-input { border-color: var(--fss-cream) !important; }
.site-footer .formkit-form[data-uid] .formkit-submit { border-color: var(--fss-cream) !important; box-shadow: 0 2px 0 var(--fss-cream) !important; }
.site-footer .formkit-form[data-uid] .formkit-guarantee,
.site-footer .formkit-form[data-uid] .formkit-disclaimer { color: var(--fss-cream) !important; opacity: 0.7; }
/* Astra wraps the footer widget's shortcode output in a <p>, which adds a stray gap */
.site-footer .widget_block p:has(> .convertkit-form) { margin: 0; }

/* ============================================================
   Long-form prose (Partners, Shipping, Terms, Privacy, About).
   Styles raw editor output so existing page copy picks up the
   brand without having to rebuild it block by block.
   ============================================================ */
.fss .fss-prose { font-family: var(--font-body); font-size: 18px; line-height: 1.62; color: var(--fg); }
.fss .fss-prose > * + * { margin-top: 0.85em; }
.fss .fss-prose p { margin: 0; max-width: 68ch; }
.fss .fss-prose h2, .fss .fss-prose h3, .fss .fss-prose h4 {
  font-family: var(--font-display); font-weight: 400; color: var(--fg); letter-spacing: -0.01em; text-wrap: balance;
}
.fss .fss-prose h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.06; margin-top: 0.7em; }
.fss .fss-prose h3 { font-size: clamp(23px, 2.2vw, 28px); line-height: 1.15; margin-top: 0.85em; }
.fss .fss-prose h4 { font-size: 20px; line-height: 1.2; margin-top: 0.9em; }
/* A hairline above each h2 turns the rules into the page's spine */
.fss .fss-prose h2::before { content: ""; display: block; width: 56px; border-top: 1.5px solid var(--fss-ink);
  margin-bottom: 0.35em; }
.fss .fss-prose ul, .fss .fss-prose ol { max-width: 68ch; padding-left: 1.25em; margin-top: 0.9em; }
.fss .fss-prose li { margin-top: 0.45em; }
.fss .fss-prose li::marker { color: var(--fg-accent); }
.fss .fss-prose strong, .fss .fss-prose b { font-weight: 600; }
.fss .fss-prose a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; }
.fss .fss-prose a:hover { color: var(--fss-pip-red-bright); }
.fss .fss-prose hr { border: none; border-top: 1.5px solid var(--fss-ink); margin: 1.7em 0; }
.fss .fss-prose img { border-radius: var(--radius-lg); }
@media (max-width: 600px) { .fss .fss-prose { font-size: 17px; } }

/* Contact: intro column beside a framed form card */
.fss .fss-contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .fss .fss-contact { grid-template-columns: 1fr; gap: 36px; } }
.fss .fss-formcard { padding: 32px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); }
@media (max-width: 600px) { .fss .fss-formcard { padding: 22px; } }
/* Vertical variant of the trust bar, for a single narrow column */
.fss .fss-trustbar--stack { grid-template-columns: 1fr; box-shadow: var(--shadow-hard); }
.fss .fss-trustbar--stack > div { border-right: none; border-bottom: 1.5px solid var(--fss-ink); }
.fss .fss-trustbar--stack > div:last-child { border-bottom: none; }
.fss .fss-trustbar a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Page masthead used above prose pages */
.fss .fss-masthead { padding-bottom: 0; border-bottom: none; }
.fss .fss-masthead + .fss-section { padding-top: 40px; }

/* ============================================================
   SureForms (Contact) — brand the fields and the submit button.
   ============================================================ */
.fss .srfm-input-common, .fss .srfm-input-content, .fss .srfm-input-container input,
.fss .srfm-input-container textarea, .fss .srfm-input-container select,
.srfm-form input[type="text"], .srfm-form input[type="email"], .srfm-form textarea {
  font-family: var(--font-ui) !important; font-size: 16px !important;
  border: 1.5px solid var(--fss-ink) !important; border-radius: var(--radius-md) !important;
  background: var(--fss-white) !important; color: var(--fss-ink) !important; box-shadow: none !important;
}
.srfm-form input:focus, .srfm-form textarea:focus {
  outline: 2px solid var(--fss-pip-red) !important; outline-offset: 2px !important; border-color: var(--fss-ink) !important;
}
.srfm-form label, .fss .srfm-block-label {
  font-family: var(--font-ui-wide) !important; font-weight: 600 !important; font-size: 11px !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--fss-ink) !important;
}
.srfm-form .srfm-button, .srfm-form button[type="submit"], .srfm-submit-button {
  font-family: var(--font-ui-wide) !important; font-weight: 600 !important; font-size: 13px !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  background: var(--fss-ink) !important; color: var(--fss-cream) !important;
  border: 1.5px solid var(--fss-ink) !important; border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-hard) !important; padding: 15px 26px !important;
}
.srfm-form .srfm-button:hover, .srfm-form button[type="submit"]:hover { background: var(--fss-ink-soft) !important; }
.srfm-form .srfm-button:active, .srfm-form button[type="submit"]:active { transform: translateY(2px); box-shadow: none !important; }

/* gap + flex utilities for the block markup */
.fss .g2 { gap: 8px; } .fss .g3 { gap: 12px; } .fss .g4 { gap: 16px; } .fss .g5 { gap: 22px; } .fss .g6 { gap: 26px; } .fss .g8 { gap: 40px; }
.fss .items-start { align-items: flex-start; } .fss .items-center { align-items: center; }
.fss .justify-between { justify-content: space-between; }
.fss .fss-row { display: flex; }
.fss .mw-560 { max-width: 560px; } .fss .mw-640 { max-width: 640px; }

/* ============================================================
   Hero fold: on tall/large displays a width-only type scale lets the h1 push
   the CTAs and spec bar below the fold. Size the hero against viewport HEIGHT
   as well as width so the whole thing lands on the first screen.
   Must sit above the max-width:600px block: those phone rules need to win.
   ============================================================ */
@media (min-width: 901px) {
  .fss > .fss-section.fss-hero-fit:first-child {
    min-height: calc(100svh - var(--fss-header-h)); display: flex; align-items: center;
    padding-top: 32px; padding-bottom: 32px;
  }
  .fss > .fss-section.fss-hero-fit:first-child > .fss-wrap { width: 100%; }
}
.fss .fss-hero-fit .fss-h1 { font-size: clamp(40px, min(5.6vw, 7.2vh), 88px); }
/* Short landscape laptops/tablets (1024x768 and similar): the hero is still
   two-column, so the text column is narrow and the h1 gains lines. Trim harder. */
@media (min-width: 901px) and (max-height: 820px) {
  .fss .fss-hero-fit .fss-h1 { font-size: clamp(32px, min(4.4vw, 6.2vh), 72px); }
  .fss .fss-hero-fit .fss-body { font-size: 15px; line-height: 1.45; }
  .fss > .fss-section.fss-hero-fit:first-child { padding-top: 24px; padding-bottom: 24px; }
  .fss .fss-hero-fit .fss-stack.g5 { gap: clamp(10px, 1.7vh, 18px); }
}
/* Very short desktop viewports (720p laptops) need one more notch */
@media (min-width: 901px) and (max-height: 760px) {
  .fss .fss-hero-fit .fss-h1 { font-size: clamp(30px, min(4.1vw, 5.7vh), 64px); }
  .fss > .fss-section.fss-hero-fit:first-child { padding-top: 16px; padding-bottom: 16px; }
}
.fss .fss-hero-fit .fss-body { font-size: clamp(15px, 1.95vh, 18px); }
.fss .fss-hero-fit .fss-stack.g5 { gap: clamp(12px, 2.2vh, 22px); }
.fss .fss-hero-fit .fss-hero { gap: clamp(24px, 3.2vh, 56px); }
/* The logo plaque and its lockup shrink with the fold too */
.fss .fss-hero-fit .fss-frame { padding: clamp(10px, 1.7vh, 20px) clamp(14px, 2.2vh, 26px); }
.fss .fss-hero-fit .fss-frame img { height: clamp(26px, 4.2vh, 44px) !important; }
.fss .fss-hero-fit .fss-specbar > div { padding: clamp(8px, 1.3vh, 12px) clamp(14px, 2vw, 22px); }
.fss .fss-hero-fit .fss-specbar .n { font-size: clamp(19px, 2.6vh, 24px); }
/* Card fan is the tallest element in the right column, so it drives the height */
.fss .fss-hero-fit .fss-herofig img { max-height: min(56vh, 520px); width: auto; max-width: 100%; }
.fss .fss-hero-fit .fss-fan { height: clamp(230px, 44vh, 460px); }
.fss .fss-hero-fit .fss-fan img:nth-child(1),
.fss .fss-hero-fit .fss-fan img:nth-child(2) { width: clamp(82px, 12.5vh, 128px) !important; }
.fss .fss-hero-fit .fss-fan img:nth-child(3) { width: clamp(112px, 17vh, 176px) !important; }
.fss .fss-hero-fit .fss-boxshot img { max-width: min(460px, 52vh); }

/* ---- Robustness: buttons never break mid-word; sections never scroll sideways ---- */
.fss .wp-block-button__link { white-space: nowrap; }
.fss .fss-section { overflow: hidden; }
/* Card buttons: full width + centered */
.fss .fss-gc-body .wp-block-buttons, .fss .fss-gc-body .wp-block-button { width: 100%; }
.fss .fss-gc-body .wp-block-button__link { display: block; width: 100%; text-align: center; padding: 12px 10px; letter-spacing: 0.1em; }

/* ---- Phones (<=600px): single-column grid, tighter hero fan, stacked hero buttons ---- */
@media (max-width: 600px) {
  .fss .fss-grid-4 { grid-template-columns: 1fr; }
  .fss .fss-section { padding: 36px 18px; }
  .fss .fss-h1 { font-size: clamp(38px, 11vw, 56px); }
  .fss .fss-h2 { font-size: clamp(30px, 8vw, 44px); }
  .fss .fss-hero { gap: 20px; }
  .fss .fss-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fss .fss-h1 { line-height: 1.0; }
  .fss .fss-btn-row .wp-block-button { flex: 1 1 100%; }
  .fss .fss-btn-row .wp-block-button__link { display: block; width: 100%; text-align: center; }
  .fss .fss-specbar { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .fss .fss-specbar > div { padding: 10px 6px; align-items: center; text-align: center; }
  /* Faction cards are mostly artwork: two-up on phones beats four full-width
     images, which turn the section into a very long scroll. */
  .fss .fss-grid-4:has(.fss-suitcard) { grid-template-columns: 1fr 1fr; gap: 14px; }
  .fss .fss-suitcard .sc-b { padding: 10px 11px 12px; }
  .fss .fss-suitcard .sc-d { font-size: 13px; }
  .fss .fss-fan { height: 300px; }
  .fss .fss-fan img:nth-child(1) { transform: rotate(-7deg) translate(-70px, -20px) !important; width: 92px !important; }
  .fss .fss-fan img:nth-child(2) { transform: rotate(6deg) translate(70px, -6px) !important; width: 92px !important; }
  .fss .fss-fan img:nth-child(3) { transform: translateY(16px) !important; width: 120px !important; }
}