/* ── Lusail SC public website ───────────────────────────────────────────────
   Self-hosted, build-free CSS (no Vite/npm), mirroring the Lusail SC Design
   System. Colour + type tokens are copied verbatim from the design system's
   tokens/colors.css and tokens/typography.css so this surface, the Filament
   admin and the Flutter app all read from the same table. Navy-led (#1E427A),
   gold (#CFB16F) as the premium accent, one Lusail typeface for Latin + Arabic.
   Light + dark themes; LTR + RTL via logical properties. */

/* ============================ TOKENS ==================================== */
:root {
  /* Lusail Blue scale */
  --blue-900: #0E2547;
  --blue-800: #143257;
  --blue-700: #1E427A;
  --blue-600: #2E5490;
  --blue-500: #536C97;
  --blue-400: #8294B2;
  --blue-300: #AEB9CC;
  --blue-100: #DCE3EC;

  --grey: #B0AFAC;

  --gold: #CFB16F;
  --gold-bright: #E1C88C;
  --gold-deep: #9C7E3A;
  --copper: #A5643C;
  --green: #7A9A92;
  --teal: #99B8C5;

  --success: #4F7E6F;
  --warning: #9C7E3A;
  --danger: #B3261E;

  /* Hero (matchday) — navy in both themes */
  --hero-start: #0E2547;
  --hero-end: #1E427A;
  --on-hero: #EAF1F9;
  --on-hero-muted: #B8C8DD;
  --hero-pattern: rgba(207, 177, 111, 0.20);

  /* Light theme (default) */
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-1: #F8FAFC;
  --surface-2: #EAEFF5;
  --surface-inset: #EEF2F7;

  --text: #0F1E33;
  --text-muted: #5A6B82;
  --text-faint: #94A2B4;
  --on-primary: #FFFFFF;
  --on-gold: #2A2109;

  --border: #DBE3EC;
  --border-strong: #C4D0DE;

  --primary: var(--blue-700);
  --primary-hover: var(--blue-800);
  --primary-pressed: var(--blue-900);
  --primary-tint: #DCE3EC;
  --on-primary-container: #0E2547;

  --accent: var(--gold-deep);
  --accent-line: var(--gold);

  --focus-ring: rgba(30, 66, 122, 0.45);

  --shadow-raised: 0 1px 2px rgba(14, 37, 71, 0.06), 0 4px 12px rgba(14, 37, 71, 0.07);
  --shadow-pop: 0 10px 24px rgba(14, 37, 71, 0.16);
  --shadow-hero: 0 12px 30px rgba(14, 37, 71, 0.28);

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --maxw: 1200px;

  --font: "Lusail", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  --bg: #0A1420;
  --surface: #101E2E;
  --surface-1: #142434;
  --surface-2: #1C3049;
  --surface-inset: #1C3049;

  --text: #EAF1F8;
  --text-muted: #A6B9CD;
  --text-faint: #6E829A;
  --on-primary: #FFFFFF;
  --on-gold: #2A2109;

  --border: #294056;
  --border-strong: #3A5570;

  --primary: #4A78B5;
  --primary-hover: #6A93C9;
  --primary-pressed: var(--blue-700);
  --primary-tint: rgba(74, 120, 181, 0.28);
  --on-primary-container: #DCE3EC;

  --accent: #DFC488;
  --accent-line: #DFC488;

  --success: #7A9A92;
  --danger: #FFB4AB;

  --focus-ring: rgba(223, 196, 136, 0.55);

  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 12px 28px rgba(0, 0, 0, 0.6);
  --shadow-hero: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* ============================ BASE ===================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; transition: color 150ms var(--ease-standard); }
a:hover { color: var(--accent); }
::selection { background: var(--primary-tint); }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }
.section { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 0; }
.section--tight { padding-top: 36px; }
.stack-lg > * + * { margin-top: 14px; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

/* ============================ PILL BUTTONS ============================= */
/* These live in the masthead (a light --surface), not on the navy hero, so
   they're drawn from the surface tokens rather than white translucency. */
.pillbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-inset); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text);
  min-height: 36px; padding: 0 14px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background 150ms var(--ease-standard), border-color 150ms var(--ease-standard),
              color 150ms var(--ease-standard);
}
.pillbtn--icon { width: 36px; height: 36px; padding: 0; }
.pillbtn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--primary); }
/* Light theme offers the moon (switch → dark); dark theme offers the sun. */
:root:not([data-theme="dark"]) .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: none; }

/* ============================ HEADER / NAV ============================= */
.masthead { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); }
/* Three tracks: brand | nav | actions. The outer two are equal fractions, so
   the centre track — and the nav inside it — is centred against the header
   rather than against whatever the brand happens to leave over. `start`/`end`
   are flow-relative, so RTL swaps brand and actions with no extra rule. */
.masthead__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand nav actions";
  align-items: center; gap: 24px;
}
.brand { grid-area: brand; justify-self: start; display: inline-flex; align-items: center; padding: 10px 0; }
.brand__logo { height: 56px; width: auto; display: block; }
/* The lockup ships navy (#1E427A) — recolour to light on the dark theme header. */
[data-theme="dark"] .brand__logo { filter: brightness(0) invert(1); }
.masthead__actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav { grid-area: nav; justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; }
.nav__link {
  background: none; border: none; cursor: pointer;
  font-weight: 600; font-size: 15px; letter-spacing: 0.2px;
  padding: 26px 13px 23px; color: var(--text-muted);
  border-bottom: 3px solid transparent; transition: color 150ms var(--ease-standard);
}
.nav__link:hover { color: var(--primary); }
.nav__link.is-active { color: var(--primary); border-bottom-color: var(--accent-line); }
/* Hamburger — hidden on desktop, revealed at the mobile breakpoint below. */
.nav__toggle {
  display: none; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); width: 44px; height: 44px; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 150ms var(--ease-standard);
}
.nav__toggle:hover { color: var(--primary); border-color: var(--border-strong); }
.nav__toggle-open { display: inline-flex; }
.nav__toggle-close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: inline-flex; }

/* ============================ BUTTONS ================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  border-radius: var(--radius-pill); padding: 0 24px; min-height: 52px;
  border: 1px solid transparent; transition: all 150ms var(--ease-standard); white-space: nowrap;
}
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--filled { background: var(--primary); color: var(--on-primary); }
.btn--filled:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-bright); color: var(--on-gold); }
.btn--outlined { background: transparent; color: var(--primary); border-color: var(--border-strong); }
.btn--outlined:hover { border-color: var(--primary); color: var(--primary); }
.btn--ghost { background: transparent; color: var(--on-hero); border-color: rgba(234, 241, 249, 0.55); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.10); color: var(--on-hero); }
.btn--text { background: none; border: none; color: var(--primary); padding: 0 6px; min-height: 40px; }
.btn--text:hover { color: var(--accent); }

/* ============================ HERO ==================================== */
.hero {
  position: relative; overflow: hidden; color: var(--on-hero);
  background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
  box-shadow: var(--shadow-hero);
}
/* The real Fanar lattice from the design system, tinted and recoloured via a
   CSS mask (the pattern SVG is the alpha mask; --fanar-tint is the colour that
   shows through). Mirrors the design's FanarBackdrop component. */
.fanar {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--fanar-tint, var(--hero-pattern));
  opacity: var(--fanar-op, 0.9);
  -webkit-mask-image: var(--fanar-src); mask-image: var(--fanar-src);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: var(--fanar-pos, 110% 40%); mask-position: var(--fanar-pos, 110% 40%);
  -webkit-mask-size: var(--fanar-size, 800px); mask-size: var(--fanar-size, 800px);
  -webkit-mask-mode: alpha; mask-mode: alpha;
}
/* Mirror the lattice under RTL so it sweeps in from the correct (leading) edge. */
[dir="rtl"] .fanar { transform: scaleX(-1); }
.hero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 64px 24px 68px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.hero__inner--page { display: block; padding: 52px 24px; }
.hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.5px; }
.hero__sub { margin-top: 10px; color: var(--on-hero-muted); font-size: 15.5px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(207, 177, 111, 0.45); background: rgba(207, 177, 111, 0.12);
  color: var(--gold-bright); border-radius: var(--radius-pill); padding: 7px 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
}
.matchup { display: flex; align-items: center; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.matchup__side { display: flex; align-items: center; gap: 16px; }
.matchup__crest { height: 60px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; }
.matchup__name { font-weight: 700; font-size: 32px; letter-spacing: 0.3px; }
.matchup__vs { font-weight: 700; color: var(--gold-bright); font-size: 17px; letter-spacing: 3px; }
.matchup__badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
  letter-spacing: 0.5px;
}
.matchup__badge--own { background: rgba(207, 177, 111, 0.18); border-color: rgba(207, 177, 111, 0.5); color: var(--gold-bright); }
.hero__meta { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; color: var(--on-hero-muted); font-size: 14.5px; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.statcard {
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg); padding: 26px 28px; min-width: 250px; position: relative;
}
.statcard__label { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--on-hero-muted); }
.statcard__value { font-weight: 700; font-size: 52px; color: var(--gold-bright); margin-top: 8px; line-height: 1; }
.statcard__sub { color: var(--on-hero-muted); font-size: 14px; margin-top: 10px; }
.statcard__link { margin-top: 18px; background: none; border: none; padding: 0; cursor: pointer; color: var(--gold-bright); font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.statcard__link:hover { text-decoration: underline; color: var(--gold-bright); }

/* ============================ SECTION HEAD ============================ */
.sectionhead { display: flex; align-items: center; gap: 16px; }
.sectionhead__title { font-size: 26px; font-weight: 700; letter-spacing: 0.2px; position: relative; padding-inline-start: 16px; }
.sectionhead__title::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 3px; background: var(--accent-line); }
.sectionhead__spacer { flex: 1; }
.section__caption { color: var(--text-faint); font-size: 13px; margin-top: 12px; }

/* ============================ CARDS =================================== */
.grid { display: grid; gap: 16px; margin-top: 22px; }
.grid--matches { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid--news { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--players { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.grid--products { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.grid--gallery { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--tickets { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--milestones { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-raised);
}
.card--flush { padding: 0; overflow: hidden; }
.card__media { position: relative; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--16x9 { aspect-ratio: 16 / 9; }
.card__media--3x4 { aspect-ratio: 3 / 4; }
.card__media--1x1 { aspect-ratio: 1 / 1; }
.card__body { padding: 18px 20px 20px; }
.media-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px; color: var(--text-faint); font-size: 13px; font-weight: 600;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
}

.tag {
  display: inline-block; background: var(--primary-tint); color: var(--on-primary-container);
  border-radius: var(--radius-pill); padding: 4px 12px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
}
.pill-muted { background: var(--surface-2); color: var(--text-muted); border-radius: var(--radius-pill); padding: 3px 10px; font-size: 11.5px; font-weight: 500; }

/* Match card */
.matchcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.matchcard__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; margin-top: 18px; }
.matchcard__team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.matchcard__badge { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--primary-tint); color: var(--on-primary-container); }
.matchcard__badge--home { background: var(--primary); color: var(--on-primary); }
/* A badge holding a real crest: a light disc with the mark contained inside, so
   dark crests stay legible on either theme. */
.matchcard__badge--crest { background: #fff; overflow: hidden; padding: 0; }
.matchcard__badge--crest img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.matchup__badge--crest { background: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.6); overflow: hidden; }
.matchup__badge--crest img { width: 100%; height: 100%; object-fit: contain; padding: 9px; box-sizing: border-box; }
/* The crest that leads a club name in the league table. */
.team-cell { display: inline-flex; align-items: center; gap: 10px; }
.team-cell__logo { width: 22px; height: 22px; object-fit: contain; flex: none; }
.matchcard__name { font-weight: 600; font-size: 13.5px; text-align: center; }
.matchcard__center { text-align: center; padding-top: 6px; }
.matchcard__score { font-weight: 700; font-size: 23px; white-space: nowrap; }
.matchcard__csub { color: var(--text-faint); font-size: 12px; margin-top: 2px; }
.matchcard__foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13px; display: flex; align-items: center; gap: 7px; }

/* News card */
.newscard__meta { display: flex; align-items: center; gap: 10px; }
.newscard__title { margin: 12px 0 0; font-size: 18px; font-weight: 700; line-height: 1.45; }
.newscard__excerpt { margin: 10px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
a.newscard { color: inherit; display: block; }
a.newscard:hover { color: inherit; }
a.newscard:hover .newscard__title { color: var(--primary); }

/* Player card */
.playercard__body { padding: 14px 16px 16px; }
.playercard__id { display: flex; align-items: baseline; gap: 8px; }
.playercard__num { font-weight: 700; color: var(--accent); font-size: 18px; }
.playercard__name { font-weight: 700; font-size: 15px; }
.playercard__pos { color: var(--text-muted); font-size: 13px; margin-top: 4px; }

/* Product card */
.productcard__body { padding: 14px 16px 16px; }
.productcard__name { font-weight: 700; font-size: 15px; }
.productcard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.productcard__price { font-weight: 700; font-size: 15.5px; color: var(--primary); }

/* Ticket card */
.ticketcard__name { font-weight: 600; font-size: 14px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }
.ticketcard__price { font-weight: 700; font-size: 40px; color: var(--primary); margin-top: 12px; line-height: 1; }
.ticketcard__per { color: var(--text-faint); font-size: 13.5px; margin-top: 10px; }

/* Milestone card */
.milestone__y { font-weight: 700; font-size: 24px; color: var(--accent); }
.milestone__t { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin-top: 10px; }

/* Video card */
.videocard__badge { position: absolute; inset-inline-end: 12px; bottom: 12px; background: rgba(10, 20, 32, 0.75); color: #EAF1F9; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 600; }
.videocard__body { padding: 16px 18px 18px; display: flex; align-items: center; gap: 12px; }
.iconbubble { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.iconbubble--lg { width: 48px; height: 48px; }
.videocard__title { font-weight: 700; font-size: 15px; line-height: 1.5; }

/* Gallery */
.galcell { display: flex; flex-direction: column; gap: 8px; }
.galcell__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.galcell__cap { color: var(--text-muted); font-size: 13.5px; }

/* ============================ TABLE ================================== */
.tablewrap { margin-top: 22px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
table.standings { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
table.standings thead th {
  text-align: center; padding: 14px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-muted); background: var(--surface-1); border-bottom: 1px solid var(--border);
}
table.standings thead th:nth-child(2) { text-align: start; }
table.standings tbody td { padding: 13px 10px; text-align: center; border-bottom: 1px solid var(--border); }
table.standings tbody td:nth-child(2) { text-align: start; font-weight: 600; }
table.standings tbody tr:last-child td { border-bottom: none; }
/* The club's own row is highlighted in gold — the premium/brand accent. */
table.standings tbody tr.is-own { background: color-mix(in srgb, var(--gold) 20%, transparent); }
table.standings tbody tr.is-own td { color: var(--text); font-weight: 700; }
.pos-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; font-weight: 700; font-size: 12.5px; line-height: 1; background: var(--surface-2); color: var(--text-muted); }
tr.is-own .pos-badge { background: var(--gold); color: var(--on-gold); }
td.col-pts { font-weight: 700; color: var(--text); }

/* ============================ TABS ================================== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-top: 8px; flex-wrap: wrap; }
.tab {
  background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14.5px;
  color: var(--text-muted); padding: 12px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 150ms var(--ease-standard);
}
.tab:hover { color: var(--primary); }
.tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* ============================ CHIPS ================================= */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: var(--radius-pill); padding: 0 16px; min-height: 36px; display: inline-flex; align-items: center;
  cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13.5px; transition: all 150ms var(--ease-standard);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.is-selected { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ============================ ALERTS =============================== */
.alert { border-radius: var(--radius-md); padding: 16px 18px; border: 1px solid; display: flex; gap: 12px; }
.alert__body > strong { display: block; margin-bottom: 4px; }
.alert--info { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--text); }
.alert--success { background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--text); }
.alert__icon { color: var(--primary); flex-shrink: 0; }
.alert--success .alert__icon { color: var(--success); }

/* ============================ FORMS ================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.field input, .field textarea {
  font-family: inherit; font-size: 15px; color: var(--text); background: var(--surface-inset);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 12px 14px; width: 100%;
  transition: border-color 150ms var(--ease-standard);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); }
.field textarea { min-height: 120px; resize: vertical; }
.field .error { color: var(--danger); font-size: 12.5px; }
.field .hint { color: var(--text-muted); font-size: 12.5px; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.info-row { display: flex; align-items: flex-start; gap: 12px; }
.info-row__icon { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.info-row__label { font-weight: 700; font-size: 14px; }
.info-row__value { color: var(--text-muted); font-size: 14.5px; margin-top: 4px; }

/* social follow row */
.socialrow { display: flex; align-items: center; gap: 14px; }
.socialrow__meta { flex: 1; }
.socialrow__name { font-weight: 700; font-size: 15.5px; }
.socialrow__handle { color: var(--text-muted); font-size: 13.5px; margin-top: 2px; }

/* ============================ ABOUT / PROSE ======================== */
.prose p { line-height: 1.85; color: var(--text-muted); font-size: 15.5px; }
.prose p + p { margin-top: 14px; }
.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.about-crest {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 48px; display: flex; align-items: center; justify-content: center; min-height: 320px;
}
.about-crest::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(300px 300px at 50% 40%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%);
}
.about-crest img { height: 220px; position: relative; z-index: 2; }
[data-theme="dark"] .about-crest img { filter: brightness(0) invert(1); opacity: 0.92; }

/* ===================== FEATURED NEWS (home lead) ================== */
/* Mirrors the mobile app's featured-story hero: navy gradient, Fanar lattice,
   gold "Featured · date" overline, headline, excerpt, gold "Read more". */
.feature-hero {
  position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr;
  border-radius: 24px; overflow: hidden; color: var(--on-hero);
  background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
  box-shadow: var(--shadow-hero); min-height: 300px;
}
.feature-hero--text { grid-template-columns: 1fr; }
.feature-hero__body { position: relative; z-index: 1; padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.feature-hero__eyebrow { color: var(--gold-bright); font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.feature-hero__title { font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; }
.feature-hero__excerpt { color: var(--on-hero-muted); font-size: 15.5px; line-height: 1.7; max-width: 560px; }
.feature-hero__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--gold-bright); font-weight: 700; font-size: 14.5px; letter-spacing: 0.3px; }
a.feature-hero:hover { color: var(--on-hero); }
a.feature-hero:hover .feature-hero__more { text-decoration: underline; }
.feature-hero__media { position: relative; min-height: 240px; }
.feature-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Blend the image into the navy on its inner edge so the split reads as one card. */
.feature-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-end) 0%, transparent 22%); }
[dir="rtl"] .feature-hero__media::after { background: linear-gradient(270deg, var(--hero-end) 0%, transparent 22%); }
@media (max-width: 820px) {
  .feature-hero { grid-template-columns: 1fr; }
  .feature-hero__media { order: -1; min-height: 200px; aspect-ratio: 16/9; }
  .feature-hero__media::after { background: linear-gradient(0deg, var(--hero-end) 0%, transparent 40%); }
  .feature-hero__body { padding: 28px 24px; }
  .feature-hero__title { font-size: 24px; }
}

/* ============================ SHOP BAND =========================== */
.shopband {
  position: relative; overflow: hidden; border-radius: 24px; color: var(--on-hero);
  background: linear-gradient(120deg, var(--hero-start), var(--hero-end));
  padding: 44px 48px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 64px;
}
.shopband__text { flex: 1; min-width: 260px; position: relative; z-index: 1; }
.shopband__text h3 { font-size: 30px; font-weight: 700; }
.shopband__text p { margin-top: 10px; color: var(--on-hero-muted); font-size: 15px; line-height: 1.7; max-width: 560px; }
.shopband__cta { position: relative; z-index: 1; }

/* ============================ FOOTER ============================== */
.footer { background: var(--blue-900); color: var(--on-hero-muted); margin-top: 72px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; }
.footer__brand img { height: 42px; }
/* Navy footer → recolour the navy lockup to light. */
.footer__logo { filter: brightness(0) invert(1); }
.footer__blurb { margin-top: 18px; font-size: 13.5px; line-height: 1.8; max-width: 280px; }
.footer__badges { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 18px; }
/* nowrap + shrink-to-fit so Google/Apple stay side by side on one line on narrow
   phones (they used to wrap and stack); basis 152px, shrinks, never grows past it. */
.footer__badge { flex: 0 1 152px; min-width: 0; line-height: 0; transition: opacity .2s ease; }
.footer__badge img { display: block; width: 100%; height: auto; }
.footer__badge:hover { opacity: 0.82; }
.footer__coltitle { color: var(--gold-bright); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 14px; }
.footer__links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer__links a { color: var(--on-hero-muted); font-size: 14px; }
.footer__links a:hover { color: var(--gold-bright); }
.footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer__barinner { max-width: var(--maxw); margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--on-hero); display: inline-flex; align-items: center; justify-content: center; }
.footer__social a:hover { color: var(--gold-bright); border-color: var(--gold); }

/* ============================ COOKIE BANNER ======================= */
.cookie-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 200; background: var(--surface); border-top: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); }
.cc-set .cookie-banner { display: none; }
.cookie-banner__inner { max-width: var(--maxw); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
.cookie-banner__text { flex: 1 1 300px; font-size: 13.5px; line-height: 1.65; color: var(--text-muted); }
.cookie-banner__text a { color: var(--primary); font-weight: 600; }
.cookie-banner__text a:hover { color: var(--accent); }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 560px) {
  .cookie-banner__inner { padding: 14px 16px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; }
}
.footer__legalwrap { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.footer__legal { display: inline-flex; gap: 18px; }
.footer__legal a { color: var(--on-hero-muted); font-size: 14px; }
.footer__legal a:hover { color: var(--gold-bright); }

/* ============================ LEGAL DOCS ========================= */
.legal { max-width: 820px; }
.legal__updated { color: var(--text-faint); font-size: 13.5px; margin-bottom: 20px; }
.legal__intro p { color: var(--text); }
.legal__section { margin-top: 32px; }
.legal__h { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.legal__list { margin: 4px 0 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal__list li { line-height: 1.7; color: var(--text-muted); font-size: 15.5px; }
.legal__list li::marker { color: var(--gold-deep); }
.legal .prose p + p { margin-top: 12px; }

/* ============================ EMPTY STATE ========================= */
.empty { padding: 48px 24px; text-align: center; color: var(--text-faint); font-size: 15px; }

/* ============================ ICONS ============================== */
.i { width: 18px; height: 18px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.i--16 { width: 16px; height: 16px; }
.i--20 { width: 20px; height: 20px; }
.i--24 { width: 24px; height: 24px; }

/* ============================ RESPONSIVE ========================= */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .split-2 { grid-template-columns: 1fr !important; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
/* Laptops: eight nav links plus the lockup plus the toggles stop fitting on one
   row well before the hamburger breakpoint. Tighten, and let the language pill
   fall back to its flag alone, so the centred row survives down to 820px. */
@media (max-width: 1180px) {
  .masthead__inner { gap: 12px; padding: 0 16px; }
  .brand__logo { height: 48px; }
  .nav__link { padding-inline: 9px; font-size: 14.5px; }
  .pillbtn__label { display: none; }
  .pillbtn { padding: 0 11px; }
}
/* Collapse the 8-link nav into a hamburger dropdown on tablet/phone: brand and
   toggles share the top row, the nav drops to a full-width row beneath it. */
@media (max-width: 820px) {
  .masthead__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions" "nav nav";
    /* No row gap — the nav row is display:none until opened, and a gap would
       otherwise leave dead space under the closed header. */
    column-gap: 12px; row-gap: 0; padding: 8px 20px;
  }
  .brand { padding: 6px 0; }
  .brand__logo { height: 44px; }
  .nav__toggle { display: inline-flex; }
  .nav {
    justify-self: stretch; display: none;
    flex-direction: column; align-items: stretch;
  }
  .nav.is-open { display: flex; padding-bottom: 10px; }
  .nav__link {
    padding-block: 13px; padding-inline: 12px 6px;
    border-bottom: none; border-inline-start: 3px solid transparent;
  }
  .nav__link + .nav__link { border-top: 1px solid var(--border); }
  .nav__link.is-active { border-bottom-color: transparent; border-inline-start-color: var(--accent-line); }
}
@media (max-width: 720px) {
  .hero h1 { font-size: 32px; }
  .matchup__name { font-size: 26px; }
}
@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; }
  .section { padding-top: 40px; }
  .shopband { padding: 32px 24px; }
}
/* Phones — tighten typography, padding, and full-bleed the hero stat card. */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .section { padding-left: 16px; padding-right: 16px; }
  .hero__inner { padding: 40px 16px 44px; }
  .hero__inner--page { padding: 34px 16px; }
  .hero h1 { font-size: 26px; }
  .hero__sub { font-size: 14.5px; }
  .eyebrow { font-size: 11.5px; padding: 6px 12px; }
  .matchup { gap: 16px; margin-top: 22px; }
  .matchup__name { font-size: 21px; }
  .matchup__crest { height: 44px; }
  .matchup__badge { width: 52px; height: 52px; }
  .statcard { min-width: 0; width: 100%; padding: 22px 20px; }
  .statcard__value { font-size: 42px; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { flex: 1; min-width: 140px; }
  .sectionhead__title { font-size: 21px; }
  .feature-hero__body { padding: 24px 20px; }
  .feature-hero__title { font-size: 21px; }
  .shopband { padding: 26px 20px; }
  .shopband__text h3 { font-size: 24px; }
  .masthead__inner { padding: 6px 16px; }
  .brand__logo { height: 38px; }
  .btn { min-height: 48px; padding: 0 20px; }
}

/* Split layouts used on Club/Contact */
.split-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: start; margin-top: 32px; }
.split-2--contact { grid-template-columns: 1.1fr 0.9fr; }

/* ── Shop: cart badge, add-to-cart, basket, checkout ─────────────────────── */

/* Header cart button with a live item-count badge. */
.cartbtn { position: relative; }
.cartbtn__badge {
  position: absolute; top: -5px; inset-inline-end: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--gold); color: var(--on-gold);
  font-size: 10.5px; font-weight: 800; line-height: 1;
}

/* Variant selectors + add button on each product card. */
.productcard__buy { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.variant-field { display: flex; flex-direction: column; gap: 4px; }
.variant-field > span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
/* Size/colour are chosen with real pills, not a native <select> — so the
   control and its options are both fully our design (and there is no OS dropdown
   to appear). Each pill is a hidden radio + a styled label. */
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-radio { position: relative; display: inline-flex; }
.chip-radio input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.chip-radio span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; padding: 7px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface-1); color: var(--text);
  font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.chip-radio span:hover { border-color: var(--primary); color: var(--primary); }
.chip-radio input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.productcard__add { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Basket line items. */
.cart-lines { display: flex; flex-direction: column; }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-line:first-child { padding-top: 0; }
/* Positioning context so a no-image `.media-fallback` (position:absolute; inset:0)
   is contained in this 72px box instead of escaping to fill the viewport. */
.cart-line__media { position: relative; width: 72px; height: 72px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__name { font-weight: 700; font-size: 15px; }
.cart-line__variant { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.cart-line__price { margin-top: 6px; font-size: 13.5px; color: var(--text-muted); }
.cart-line__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-1); }
.qty-stepper__btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.qty-stepper__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--primary); }
.qty-stepper__btn:disabled { opacity: 0.35; cursor: default; }
.qty-stepper__value { min-width: 36px; text-align: center; font-weight: 700; font-size: 14.5px; color: var(--text); }
.cart-line__remove { color: var(--text-muted) !important; display: inline-flex; align-items: center; gap: 5px; }
.cart-line__remove:hover { color: var(--danger) !important; }
.cart-line__total { font-weight: 700; font-size: 15px; color: var(--primary); white-space: nowrap; }

.cart-total { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 18px; font-weight: 800; }
.cart-note { margin-top: 8px; font-size: 12.5px; color: var(--text-faint); }
.cart-heading { font-size: 18px; font-weight: 800; margin-bottom: 16px; }

/* Order confirmation. */
.order-done { text-align: center; max-width: 560px; margin: 0 auto; padding: 40px 28px; }
.order-done__icon { color: var(--success); display: inline-flex; }
.order-done__title { font-size: 22px; font-weight: 800; margin-top: 12px; }
.order-done__body { color: var(--text-muted); margin-top: 8px; }
.order-done__ref {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  padding: 10px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-1);
}
.order-done__ref > span { font-size: 13px; color: var(--text-muted); }
.order-done__ref > strong { font-size: 16px; letter-spacing: 0.06em; }
.order-done__actions { margin-top: 24px; }

@media (max-width: 480px) {
  .cart-line { grid-template-columns: 60px 1fr; }
  .cart-line__media { width: 60px; height: 60px; }
  .cart-line__total { grid-column: 2; }
}