/* ═══════════════════════════════════════════════════════════
   APEA Homepage — Industry design system implementation
   Editorial, wireframe-inspired: Barlow Condensed + skewed accents,
   dark navy + steel blue. Homepage-only (other pages use styles.css).
   ═══════════════════════════════════════════════════════════ */

:root {
    --acc: #2980b9;       /* steel blue accent — overridden by settings-loader */
    --acc-hover: #1e6796;
    --navy: #0a1628;
    --navy-2: #0e1f3a;
    --ink: #0a1628;
    --muted: #7c8ba1;
    --muted-2: #8fa2ba;
    --muted-3: #b9c6d8;
    --paper: #ffffff;
    --paper-tint: #f2f5f9;
    --hair: #e3e9f1;
    --hair-2: #eef2f7;
    --win: #22c55e;
    --loss: #ef4444;
    --draw: #eab308;
}

/* Consume the site-wide brand vars settings-loader.js sets on :root */
:root { --acc: var(--brand-primary, #2980b9); }

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    max-width: 100%; overflow-x: hidden;
}
.home-body {
    background: #fff;
    color: var(--ink);
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--navy); }
::selection { background: var(--acc); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ─────────────── Utility bar ─────────────── */
.util-bar { background: var(--navy); color: var(--muted-3); }
.util-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between;
    height: 38px;
}
.util-lede {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 13px; letter-spacing: 2.5px;
}
.util-socials { display: flex; gap: 18px; align-items: center; }
.util-socials a { color: var(--muted-3); display: flex; }
.util-socials a:hover { color: #fff; }

/* ─────────────── Top nav ─────────────── */
.topnav {
    position: sticky; top: 0; z-index: 50;
    background: #fff; border-bottom: 1px solid var(--hair);
}
.topnav-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between;
    height: 76px; gap: 24px;
}
.brand {
    display: flex; align-items: center; gap: 12px;
    color: var(--navy);
}
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic;
    font-size: 26px; letter-spacing: 0.5px; line-height: 1;
}
.brand-fc { color: var(--acc); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a,
.nav-links > .nav-drop > a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 17px; letter-spacing: 1.8px;
    color: var(--navy); transition: color 0.15s ease;
}
.nav-links > a:hover,
.nav-links > .nav-drop > a:hover { color: var(--acc); }
/* .nav-links > a outranks .btn-skew, so the SHOP button lost its white label. */
.nav-links > a.btn-skew,
.nav-links > a.btn-skew:hover { color: #fff; }

.nav-toggle {
    display: none;
    background: transparent; border: 0; padding: 8px; cursor: pointer;
    flex-direction: column; gap: 4px;
}
.nav-toggle span {
    display: block; width: 22px; height: 2px; background: var(--navy);
}

/* ─────────────── Skewed button/badge system ─────────────── */
.btn-skew {
    display: inline-block; padding: 10px 22px;
    transform: skewX(-10deg);
    background: var(--acc); color: #fff;
    transition: background 0.18s ease, color 0.18s ease;
    text-align: center;
    border: 0; cursor: pointer;
}
.btn-skew:hover { background: var(--navy); color: #fff; }
.btn-skew > span {
    display: inline-block; transform: skewX(10deg);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 16px; letter-spacing: 2px;
    white-space: nowrap;
}
.btn-primary { background: var(--acc); color: #fff; }
.btn-primary:hover { background: #fff; color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--acc); color: #fff; }
.btn-outline-light {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.55);
    color: #fff;
    padding: 13px 27px;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.14); color: #fff; }

.badge-skew {
    display: inline-block; background: var(--acc); color: #fff;
    transform: skewX(-10deg);
    padding: 7px 14px 5px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 13px; letter-spacing: 3px;
}
.badge-mini { padding: 4px 10px 3px; font-size: 12.5px; letter-spacing: 2px; font-weight: 700; }

/* ─────────────── Hero ─────────────── */
.hero {
    position: relative; background: var(--navy);
    height: 640px; overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: saturate(0.85);
}
.hero-scrim {
    position: absolute; inset: 0;
    /* Lighter at the top so the kit photo reads; deepens toward the copy block */
    background:
        linear-gradient(180deg, rgba(10,22,40,0.10) 0%, rgba(10,22,40,0.34) 45%, rgba(10,22,40,0.88) 100%),
        linear-gradient(90deg, rgba(10,22,40,0.55) 0%, rgba(10,22,40,0.12) 55%, rgba(10,22,40,0) 100%);
    pointer-events: none;
}
.hero-body {
    position: absolute; inset: auto 0 0 0;
    pointer-events: none;
}
.hero-inner {
    max-width: 1240px; margin: 0 auto;
    padding: 0 28px 130px;
}
.hero-inner h1 {
    margin: 18px 0 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic;
    font-size: clamp(2.5rem, 8vw, 96px);
    line-height: 0.9; letter-spacing: 1px;
    color: #fff; text-transform: uppercase;
    /* Cap hero title so long news headlines don't dominate */
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}
.hero-inner p {
    margin: 0 0 26px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 22px; letter-spacing: 2.5px;
    color: #cfdcec; text-transform: uppercase;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.hero-ctas {
    display: flex; gap: 14px;
    pointer-events: auto;
}
.hero-ctas .btn-skew { padding: 14px 28px; }
.hero-ctas .btn-skew > span { font-size: 17px; letter-spacing: 2.5px; }

/* ─────────────── Ticker (next match / last result) ─────────────── */
.ticker-wrap {
    max-width: 1240px; margin: -84px auto 0;
    padding: 0 28px;
    position: relative; z-index: 5;
}
.ticker-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.tk-card {
    box-shadow: 0 18px 40px rgba(10,22,40,0.20);
    display: flex; flex-direction: column;
}
.tk-dark {
    background: var(--navy-2);
    border-top: 3px solid var(--acc);
    color: #fff;
}
.tk-light {
    background: #fff;
    border: 1px solid var(--hair);
    border-top: 3px solid var(--navy);
}
.tk-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.tk-light .tk-head { border-bottom-color: var(--hair-2); }
.tk-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 14px; letter-spacing: 2.5px;
}
.tk-badge-accent { color: var(--acc); }
.tk-badge-dark { color: var(--navy); }
.tk-meta {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 13px; letter-spacing: 2px; color: var(--muted-2);
}
.tk-light .tk-meta { color: var(--muted); }
.tk-result-pill {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 2px; color: #fff;
    padding: 3px 10px 2px;
    transform: skewX(-10deg);
    display: inline-block;
    background: var(--muted);
}
.tk-result-pill.win  { background: var(--win); }
.tk-result-pill.loss { background: var(--loss); }
.tk-result-pill.draw { background: var(--draw); }

.tk-body {
    display: flex; flex-direction: column; flex: 1;
}
.tk-match {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 12px;
    padding: 22px 22px 8px;
}
.tk-team {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.tk-team .tk-logo {
    width: 64px; height: 64px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.tk-team .tk-logo img { width: 52px; height: 52px; object-fit: contain; }
.tk-team-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 18px; letter-spacing: 1px; text-align: center;
}
.tk-dark .tk-team-name { color: #fff; }
.tk-center-vs {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic; font-size: 40px; line-height: 1;
}
.tk-dark .tk-center-vs { color: #fff; }
.tk-light .tk-center-vs { color: var(--navy); }
.tk-center-when {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 15px; letter-spacing: 2px;
    color: var(--muted-2); margin-top: 6px;
}
.tk-light .tk-center-when { color: var(--muted); }
.tk-score {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 48px; line-height: 1;
    color: var(--navy);
}
.tk-score-sep { color: var(--muted); padding: 0 4px; }
.tk-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 22px 18px; margin-top: auto;
}
.tk-foot span { font-size: 13.5px; color: var(--muted-2); }
.tk-light .tk-foot span { color: var(--muted); }
.tk-foot a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 14px; letter-spacing: 2px;
    color: #fff;
}
.tk-light .tk-foot a { color: var(--acc); }
.tk-foot a:hover { color: var(--acc); }
.tk-light .tk-foot a:hover { color: var(--navy); }
.tk-loading { padding: 40px; text-align: center; color: var(--muted-2); font-size: 14px; }
.tk-light .tk-loading { color: var(--muted); }

/* ─────────────── Section shell ─────────────── */
.section-white { padding: 96px 0 90px; background: #fff; }
.section-tint { padding: 88px 0; background: var(--paper-tint); }
.section-dark { padding: 88px 0; background: var(--navy); color: #fff; }
.pad-bottom { padding: 0 0 96px; }
.section-inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.section-inner.center { text-align: center; }

.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 40px;
}
.section-head h2 {
    margin: 14px 0 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic;
    font-size: clamp(2rem, 5vw, 54px);
    line-height: 0.95; letter-spacing: 0.5px;
    text-transform: uppercase;
}
.section-head h2.on-dark { color: #fff; }
.section-head-side { text-align: right; }
.side-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 13px; letter-spacing: 2px;
    color: var(--muted); margin-bottom: 8px;
}
.side-eyebrow.on-dark-muted { color: var(--muted-2); }
.side-link {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 15px; letter-spacing: 2px;
    color: var(--acc);
}
.side-link:hover { color: var(--navy); }

/* ─────────────── News ─────────────── */
.news-grid {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px;
    align-items: stretch;
}
.news-feature {
    position: relative; min-height: 440px;
    background: var(--navy-2); color: #fff;
    overflow: hidden; display: block;
}
.news-feature-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: saturate(0.85);
}
.news-feature-scrim {
    position: absolute; inset: auto 0 0 0;
    background: linear-gradient(180deg, rgba(10,22,40,0), rgba(10,22,40,0.92) 70%);
    padding: 110px 26px 24px;
    color: #fff;
}
.news-feature-meta {
    display: flex; gap: 10px; align-items: center; margin-bottom: 12px;
}
.news-feature-likes {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 13px; letter-spacing: 1.5px; color: var(--muted-3);
}
.news-feature-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 30px; line-height: 1.05;
    display: -webkit-box; -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; overflow: hidden;
}
.news-feature:hover { color: #fff; }

.news-list {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--hair);
}
.news-item {
    display: grid; grid-template-columns: 64px 1fr auto;
    gap: 18px; align-items: center;
    padding: 20px 6px;
    border-bottom: 1px solid var(--hair);
    color: var(--navy);
    transition: background 0.15s ease;
}
.news-item:hover { background: #f4f7fb; color: var(--navy); }
.news-item-date {
    text-align: center;
    border-right: 1px solid var(--hair);
    padding-right: 14px;
}
.news-item-day {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 30px; line-height: 1;
    color: var(--acc);
}
.news-item-mon {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 13px; letter-spacing: 2px; color: var(--muted);
}
.news-item-body { min-width: 0; }
.news-item-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 21px; line-height: 1.1;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.news-item-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.news-item-arrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 2px; color: var(--acc);
}
.news-loading, .mc-loading, .sq-loading {
    padding: 40px; text-align: center; color: var(--muted); font-size: 14px;
}

/* ─────────────── Matches grid ─────────────── */
.matches-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.mc {
    background: #fff; border: 1px solid var(--hair);
    display: flex; flex-direction: column;
}
.mc-upcoming {
    background: var(--navy-2); border: 0;
    border-top: 3px solid var(--acc); color: #fff;
}
.mc-head { text-align: center; padding: 16px 16px 0; }
.mc-lede {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 12.5px; letter-spacing: 2px;
    color: var(--muted);
}
.mc-upcoming .mc-lede { color: var(--muted-2); }
.mc-date {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 16px; letter-spacing: 2px;
    margin-top: 4px; color: var(--navy);
}
.mc-upcoming .mc-date { color: #fff; }
.mc-body {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 8px;
    padding: 18px 14px; flex: 1;
}
.mc-team {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mc-team .mc-logo {
    width: 50px; height: 50px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mc-team .mc-logo img { width: 40px; height: 40px; object-fit: contain; }
.mc-team-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 14px; letter-spacing: 0.5px;
    text-align: center; color: var(--navy);
}
.mc-upcoming .mc-team-name { color: #fff; }
.mc-vs {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic; font-size: 26px;
    color: var(--navy);
}
.mc-upcoming .mc-vs { color: #fff; }
.mc-score {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 30px; color: var(--navy); white-space: nowrap;
}
.mc-foot {
    text-align: center; padding: 0 16px 16px;
}
.mc-venue {
    font-size: 12.5px; color: var(--muted);
}
.mc-upcoming .mc-venue { color: var(--muted-2); }
.mc-report-link {
    display: inline-block; margin-top: 10px;
    padding: 6px 16px 5px;
    border: 1px solid #d5deea; color: var(--navy);
    transform: skewX(-10deg);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 2px;
}
.mc-report-link:hover { background: var(--navy); color: #fff; }
.mc-status-pill {
    display: inline-block; margin-top: 10px;
    padding: 6px 16px 5px;
    background: var(--acc); color: #fff;
    transform: skewX(-10deg);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 2px;
}

/* ─────────────── Table ─────────────── */
.tbl { border: 1px solid var(--hair); }
.tbl-head, .tbl-row {
    display: grid;
    grid-template-columns: 56px 1fr 64px 64px 64px 64px 64px 64px 80px;
    align-items: center;
}
.tbl-head {
    background: var(--navy); color: var(--muted-3);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 14px; letter-spacing: 1.5px;
    padding: 12px 0;
}
.tbl-head > span { text-align: center; }
.tbl-head > span:nth-child(2) { text-align: left; padding-left: 14px; }
.tbl-head .tbl-pts { color: #fff; }
.tbl-row {
    padding: 10px 0;
    border-top: 1px solid var(--hair-2);
    background: #fff; color: var(--navy);
}
.tbl-row.is-apea { background: var(--acc); color: #fff; }
.tbl-row .tbl-rank {
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 17px;
}
.tbl-row .tbl-team {
    display: flex; align-items: center; gap: 12px; padding-left: 14px;
    min-width: 0;
}
.tbl-row .tbl-team img {
    width: 24px; height: 24px; object-fit: contain; background: #fff; border-radius: 50%;
    flex-shrink: 0;
}
.tbl-row .tbl-team-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 18px; letter-spacing: 0.8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbl-row > span:not(.tbl-team):not(.tbl-rank) {
    text-align: center; font-size: 14.5px;
}
.tbl-row .tbl-pts {
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 19px;
}
.tbl-loading { padding: 40px; text-align: center; color: var(--muted); font-size: 14px; }
.tbl-note {
    margin-top: 14px; font-size: 12.5px; color: var(--muted);
}

/* ─────────────── Squad ─────────────── */
.squad-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.sq {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-top: 2px solid var(--acc);
    padding: 0 16px 18px;
    display: flex; flex-direction: column; gap: 14px;
    transition: background 0.15s ease;
    overflow: hidden;
}
.sq:hover { background: rgba(255,255,255,0.10); }

/* Player photo panel */
.sq-photo {
    position: relative;
    margin: 0 -16px;
    aspect-ratio: 4 / 5;
    display: flex; align-items: flex-end; justify-content: center;
    background:
        radial-gradient(120% 90% at 50% 108%, color-mix(in srgb, var(--acc) 55%, transparent) 0%, transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
    overflow: hidden;
}
.sq-photo img {
    width: 100%; height: 100%;
    padding-top: 12px; box-sizing: border-box;
    object-fit: contain; object-position: bottom center;
    display: block;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
    transition: transform 0.35s ease;
}
.sq:hover .sq-photo img { transform: scale(1.045); }
.sq-initials {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic; font-size: 46px;
    color: rgba(255,255,255,0.22);
    align-self: center; margin: auto 0;
    letter-spacing: 1px;
}
.sq-shirt {
    position: absolute; left: 16px; top: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic; font-size: 30px; line-height: 1;
    color: #fff; opacity: 0.92;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.sq-tag {
    align-self: flex-start; margin-top: -4px;
    background: var(--acc); color: #fff;
    transform: skewX(-10deg);
    padding: 3px 9px 2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 11.5px; letter-spacing: 2px;
}
.sq-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-style: italic; font-size: 22px; line-height: 1;
    color: #fff; min-height: 44px; text-transform: uppercase;
}
.sq-stats {
    display: flex; gap: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 12px;
}
.sq-stats > div { flex: 1; }
.sq-stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 22px; color: #fff; line-height: 1;
}
.sq-stat-num.accent { color: var(--acc); }
.sq-stat-lbl {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 11.5px; letter-spacing: 1.5px; color: var(--muted-2);
}

.section-cta { margin-top: 34px; display: flex; justify-content: center; }

/* ─────────────── Sponsors ─────────────── */
/* The sponsor strip is injected by settings-loader.js into [data-sponsors].
   These rules previously only existed in the legacy styles.css, which the
   homepage doesn't load — so the logos rendered unsized and stacked. */
.sponsors-section {
    padding: 52px 0 40px;
    background: var(--paper-tint, #f2f5f9);
    /* bordered both sides: it now sits between the white merch banner and the
       equally-tinted contact section, which would otherwise read as one block */
    border-top: 1px solid var(--hair, rgba(10,22,40,.10));
    border-bottom: 1px solid var(--hair, rgba(10,22,40,.10));
    text-align: center;
}
.sponsors-heading {
    margin: 0 0 30px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--muted, #5b6b80);
}
.sponsors-rows { display: flex; flex-direction: column; gap: 30px; }
.sponsors-row {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 40px; padding: 0 24px;
}
.sponsor-card {
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: opacity .15s ease, transform .15s ease;
}
.sponsor-card img {
    max-height: 100%; max-width: 100%;
    width: auto; height: auto; object-fit: contain;
    display: block;
}
.sponsor-card:hover { opacity: .68; transform: translateY(-2px); }
/* pumpapp sits alone in tier 1 as the major sponsor, so it renders largest */
.sponsor-tier-1 { gap: 56px; }
.sponsor-tier-1 .sponsor-card { height: 74px; max-width: 260px; }
.sponsor-tier-2 .sponsor-card { height: 54px; max-width: 150px; }
.sponsor-tier-3 .sponsor-card { height: 46px; max-width: 128px; }

.sponsors-cta {
    margin-top: 30px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 14px; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--muted, #5b6b80);
}
.sponsors-cta a { color: var(--acc); text-decoration: none; }
.sponsors-cta a:hover { text-decoration: underline; }

/* ─────────────── Squad position groups ─────────────── */
.squad-groups { display: flex; flex-direction: column; gap: 44px; }
.sq-group-head {
    display: flex; align-items: baseline; gap: 12px;
    padding-bottom: 10px; margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
.sq-group-head h3 {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic; font-size: 26px;
    text-transform: uppercase; letter-spacing: 0.5px; color: #fff;
}
.sq-group-head span {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 2px;
    color: var(--acc);
}

/* ─────────────── Staff ─────────────── */
.staff-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
}
.staff-second-head { margin-top: 56px; }
.staff-card { text-align: left; }
.staff-photo {
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(10,22,40,0.12);
    border-top: 2px solid var(--acc);
    background: rgba(10,22,40,0.05);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.staff-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    display: block; transition: transform 0.35s ease;
}
.staff-card:hover .staff-photo img { transform: scale(1.05); }
.staff-initials {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic; font-size: 34px;
    color: rgba(10,22,40,0.25);
}
.staff-name {
    margin-top: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-style: italic; font-size: 18px; line-height: 1.1;
    text-transform: uppercase; color: var(--ink);
}
.staff-role {
    margin-top: 3px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 12.5px; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--acc);
}

/* ─────────────── Academy ─────────────── */
.academy-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px; align-items: center;
}
.academy-inner > div:first-child { min-width: 0; }
.academy-lede {
    margin: 0 0 24px;
    font-size: 16.5px; color: #42536b; max-width: 52ch;
}
.academy-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px 24px; margin-bottom: 30px;
}
.ac-item {
    display: flex; gap: 10px; align-items: baseline;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 18px; letter-spacing: 0.8px;
}
.ac-plus { color: var(--acc); font-weight: 700; }
.academy-imgs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 220px 220px;
    gap: 14px; min-width: 0;
}
.ac-img {
    background: linear-gradient(135deg, var(--paper-tint), #dbe4ef);
    background-size: cover; background-position: center;
    min-width: 0;
}
#academy-img-1 { background-image: url('/academy-img/academy-1.webp'); }
#academy-img-2 { background-image: url('/academy-img/academy-2.webp'); }
#academy-img-3 { background-image: url('/academy-img/academy-3.webp'); }
.ac-img-tall { grid-row: 1 / 3; }

/* ─────────────── Shop teaser ─────────────── */
.shop-teaser {
    display: grid; grid-template-columns: 1.2fr 1fr;
    background: var(--navy-2);
    border-top: 3px solid var(--acc);
}
.shop-teaser-copy {
    padding: 48px 44px;
    display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;
}
.shop-teaser-copy h2 { margin: 16px 0 10px; color: #fff; font-size: 46px; }
.shop-teaser-lede {
    margin: 0 0 26px;
    font-size: 15.5px; color: var(--muted-3);
}
.shop-teaser-img {
    position: relative; min-height: 320px;
    background: linear-gradient(135deg, #17233d, #0e1a30);
    background-size: cover; background-position: center;
}

/* ─────────────── Partners ─────────────── */
.partners-row {
    display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.partner {
    width: 210px; height: 96px;
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
}
.partner img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
.partner-empty {
    background: var(--paper-tint);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 12.5px; letter-spacing: 1px;
    font-family: 'Barlow Condensed', sans-serif;
}
.partners-cta {
    margin-top: 24px; font-size: 13.5px; color: var(--muted);
}

/* ─────────────── Contact ─────────────── */
.contact-grid {
    display: grid; grid-template-columns: 1fr 1.5fr;
    gap: 40px; align-items: start;
}
.contact-details {
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid #dde4ee;
}
.cd-row {
    display: flex; gap: 16px; align-items: center;
    padding: 20px 4px;
    border-bottom: 1px solid #dde4ee;
}
.cd-row svg { color: var(--acc); stroke: var(--acc); flex-shrink: 0; }
.cd-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 17px; letter-spacing: 1.5px;
}
.cd-value { font-size: 14.5px; color: #42536b; }
.cd-value a { color: #42536b; }
.cd-value a:hover { color: var(--acc); }

.contact-form {
    background: #fff; border: 1px solid var(--hair); padding: 32px;
}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contact-form label {
    display: flex; flex-direction: column; gap: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 15px; letter-spacing: 1.5px;
}
.contact-form .cf-wide { grid-column: 1 / -1; margin-bottom: 16px; }
.contact-form input, .contact-form textarea {
    border: 1px solid #cfd8e3; border-radius: 0;
    padding: 12px 14px;
    font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--navy);
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--acc);
}
.contact-form textarea { resize: vertical; }
.contact-form button { margin-top: 20px; padding: 14px 30px; }

/* ─────────────── Footer ─────────────── */
.footer-dark {
    background: var(--navy); color: var(--muted-3);
    padding-top: 56px;
}
.footer-top {
    max-width: 1240px; margin: 0 auto; padding: 0 28px;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
}
.footer-brand { display: flex; gap: 18px; align-items: flex-start; }
.footer-crest {
    width: 64px; height: 64px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.footer-crest img { width: 52px; height: 52px; object-fit: contain; }
.footer-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic;
    font-size: 24px; color: #fff; letter-spacing: 0.5px;
}
.footer-line { font-size: 14px; margin-top: 6px; }
.footer-h {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 16px; letter-spacing: 2.5px;
    color: #fff; margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { color: var(--muted-3); font-size: 14.5px; }
.footer-links a:hover { color: #fff; }
.footer-socials { display: flex; gap: 14px; }
.footer-socials a {
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted-3);
    transition: background 0.15s ease, color 0.15s ease;
}
.footer-socials a:hover { background: var(--acc); color: #fff; }
.footer-bottom {
    max-width: 1240px; margin: 40px auto 0;
    padding: 18px 28px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 12.5px; color: var(--muted-2);
}
.footer-bottom a { color: var(--muted-3); }
.footer-bottom a:hover { color: #fff; }

/* ─────────────── Responsive ─────────────── */
@media (max-width: 960px) {
    .ticker-grid, .news-grid, .matches-grid, .squad-grid,
    .contact-grid, .footer-top, .academy-inner, .shop-teaser {
        grid-template-columns: 1fr !important;
    }
    .matches-grid { grid-template-columns: 1fr 1fr !important; }
    .squad-grid { grid-template-columns: 1fr 1fr 1fr !important; }
    .staff-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .sponsors-row { gap: 26px; }
    .sponsor-tier-1 .sponsor-card { height: 60px; max-width: 210px; }
    .squad-groups { gap: 34px; }
    .sq-group-head h3 { font-size: 22px; }
    .section-white, .section-tint, .section-dark { padding: 60px 0 56px; }
    .util-lede { font-size: 11px; letter-spacing: 1.5px; }
    .util-inner { padding: 0 16px; }
    .topnav-inner { padding: 0 16px; height: 64px; }
    .brand img { width: 42px; height: 42px; }
    .brand-name { font-size: 20px; }
    .nav-links {
        position: absolute; top: 64px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--hair);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 12px 0; display: none;
    }
    .nav-links.open { display: flex; }
    .nav-links > a,
    .nav-links > .nav-drop > a { padding: 12px 20px; }
    .nav-links > a.btn-skew { margin: 8px 20px; align-self: flex-start; }
    .nav-toggle { display: flex; }
    .hero { height: 500px; }
    .hero-inner { padding: 0 20px 90px; }
    .hero-inner h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); }
    .hero-inner p { font-size: 16px; letter-spacing: 2px; }
    .ticker-wrap { padding: 0 20px; margin-top: -60px; }
    .section-inner { padding: 0 20px; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .section-head-side { text-align: left; }
    .section-head h2 { font-size: clamp(1.8rem, 7vw, 40px); }
    .tk-team .tk-logo { width: 52px; height: 52px; }
    .tk-team .tk-logo img { width: 40px; height: 40px; }
    .tk-team-name { font-size: 15px; }
    .tk-center-vs { font-size: 30px; }
    .tk-score { font-size: 36px; }
    .news-feature-title { font-size: 22px; }
    .academy-imgs { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; }
    .shop-teaser-copy { padding: 30px 24px; }
    .shop-teaser-copy h2 { font-size: 32px; }
    .shop-teaser-img { min-height: 220px; }
}

@media (max-width: 620px) {
    .matches-grid { grid-template-columns: 1fr !important; }
    .squad-grid { grid-template-columns: 1fr 1fr !important; }
    .staff-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
    .sponsors-row { gap: 20px; }
    .sponsor-tier-2 .sponsor-card { height: 42px; max-width: 112px; }
    .sponsor-tier-3 .sponsor-card { height: 38px; max-width: 100px; }
    .staff-second-head { margin-top: 40px; }

    /* Table on phones: hide W/D/L, keep #/TEAM/P/GF/GA/PTS */
    .tbl-head, .tbl-row {
        grid-template-columns: 34px 1fr 36px 36px 36px 46px;
        font-size: 12px;
    }
    .tbl-head > span:nth-child(4),
    .tbl-head > span:nth-child(5),
    .tbl-head > span:nth-child(6),
    .tbl-row > span:nth-child(4),
    .tbl-row > span:nth-child(5),
    .tbl-row > span:nth-child(6) { display: none; }
    .tbl-row .tbl-team-name { font-size: 14px; }
    .tbl-row .tbl-team img { width: 20px; height: 20px; }
    .tbl-row .tbl-team { padding-left: 8px; gap: 8px; }
    .tbl-row > span:not(.tbl-team):not(.tbl-rank) { font-size: 13px; }
    .tbl-row .tbl-pts { font-size: 16px; }
    .tbl-head > span:nth-child(2) { padding-left: 8px; }

    .cf-row { grid-template-columns: 1fr; }

    .util-lede { font-size: 10px; letter-spacing: 1px; }
    .util-socials { gap: 12px; }
    .brand-name { font-size: 17px; }
    .util-bar { height: auto; }
    .util-inner { height: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   Shared page components (club / news / shop / academy)
   Extends the Industry system defined above.
   ═══════════════════════════════════════════════════════════ */

/* ── Nav: Teams dropdown ── */
.nav-drop { position: relative; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-drop-caret { font-size: 9px; opacity: .7; }
.nav-drop-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: #fff; border: 1px solid var(--hair);
    min-width: 168px; padding: 6px 0;
    box-shadow: 0 12px 32px rgba(10,22,40,.14);
    opacity: 0; visibility: hidden; transition: opacity .15s ease;
    z-index: 60;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; }
.nav-drop-menu a {
    display: block; padding: 9px 18px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 15px; letter-spacing: 1.2px;
    color: var(--navy); white-space: nowrap;
}
.nav-drop-menu a:hover { background: var(--paper-tint); color: var(--acc); }

/* ── Sub page header (non-home pages) ── */
.page-hero {
    background: var(--navy); color: #fff;
    padding: 54px 0 46px; position: relative; overflow: hidden;
}
.page-hero-inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
.page-hero h1 {
    margin: 14px 0 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-style: italic;
    font-size: clamp(2.1rem, 6vw, 62px); line-height: .92;
    text-transform: uppercase; letter-spacing: .5px; color: #fff;
}
.page-hero p {
    margin: 0; font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 17px; letter-spacing: 2px;
    color: var(--muted-3); text-transform: uppercase;
}
.page-hero-watermark {
    position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic;
    font-size: 148px; color: rgba(255,255,255,.04);
    text-transform: uppercase; line-height: 1; pointer-events: none; white-space: nowrap;
}

/* ── Season selector ── */
.season-bar {
    display: flex; align-items: center; gap: 12px;
    margin-top: 18px; flex-wrap: wrap;
}
.season-bar label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 2px; color: var(--muted-3);
}
.season-bar select {
    padding: 8px 14px; border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.08); color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 14px; letter-spacing: 1px;
    border-radius: 0; cursor: pointer;
}
.season-bar select option { color: var(--navy); }

/* ── Matches list (club page) ── */
.match-row {
    display: grid; grid-template-columns: 74px 1fr auto 1fr 96px;
    align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--hair);
    padding: 14px 18px; margin-bottom: 10px;
    transition: border-color .15s ease, transform .15s ease;
}
.match-row:hover { border-color: var(--acc); transform: translateX(2px); }
.match-row.is-apea { border-left: 3px solid var(--acc); }
.match-row-date { text-align: center; border-right: 1px solid var(--hair); padding-right: 12px; }
.match-row-day {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 26px; line-height: 1; color: var(--acc);
}
.match-row-mon {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 12px; letter-spacing: 1.6px; color: var(--muted);
}
.match-row-team {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 17px; letter-spacing: .5px; color: var(--navy);
}
.match-row-team.away { flex-direction: row-reverse; text-align: right; }
.match-row-team img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.match-row-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-row-score {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 24px; color: var(--navy);
    min-width: 74px; text-align: center; white-space: nowrap;
}
.match-row-time {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 15px; letter-spacing: 1.4px;
    color: var(--acc); min-width: 74px; text-align: center;
}
.match-row-tag {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 11px; letter-spacing: 1.5px;
    text-align: center; padding: 4px 8px; color: #fff;
    transform: skewX(-10deg);
}
.tag-win { background: var(--win); }
.tag-loss { background: var(--loss); }
.tag-draw { background: var(--draw); color: var(--navy); }
.tag-upcoming { background: var(--acc); }

/* ── Transfers ── */
.transfers-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.transfer-col { background: #fff; border: 1px solid var(--hair); }
.transfer-col-head {
    padding: 14px 20px; border-bottom: 1px solid var(--hair);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 15px; letter-spacing: 2.5px;
}
.transfer-col-head.in  { color: var(--win); border-top: 3px solid var(--win); }
.transfer-col-head.out { color: var(--loss); border-top: 3px solid var(--loss); }
.transfer-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 20px; border-bottom: 1px solid var(--hair-2);
}
.transfer-item:last-child { border-bottom: 0; }
.transfer-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 16px; color: var(--navy);
}
.transfer-club { font-size: 12.5px; color: var(--muted); }
.transfer-fee {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 12px; letter-spacing: 1px;
    color: var(--muted); white-space: nowrap;
}

/* ── Scorers ── */
.scorers-list { background: #fff; border: 1px solid var(--hair); }
.scorer-row {
    display: grid; grid-template-columns: 44px 1fr 60px;
    align-items: center; padding: 12px 18px;
    border-bottom: 1px solid var(--hair-2);
}
.scorer-row:last-child { border-bottom: 0; }
.scorer-rank {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 18px; color: var(--acc);
}
.scorer-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 17px; color: var(--navy);
}
.scorer-goals {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 22px; color: var(--navy); text-align: right;
}

/* ── News page grid ── */
.news-page-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
}
.news-card {
    background: #fff; border: 1px solid var(--hair);
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10,22,40,.10); }
.news-card-img {
    aspect-ratio: 1 / 1; background: var(--paper-tint);
    background-size: cover; background-position: center;
}
.news-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.news-card-date {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600; font-size: 12px; letter-spacing: 2px;
    color: var(--muted); margin-bottom: 8px;
}
.news-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--navy);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card-excerpt {
    font-size: 13.5px; color: #42536b; margin-top: 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card-more {
    margin-top: auto; padding-top: 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 12.5px; letter-spacing: 2px; color: var(--acc);
}

/* ── Empty state ── */
.empty-state {
    padding: 56px 24px; text-align: center;
    background: #fff; border: 1px dashed var(--hair);
    color: var(--muted); font-size: 14px;
}
.empty-state strong {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 20px; letter-spacing: 1px;
    color: var(--navy); margin-bottom: 6px; text-transform: uppercase;
}

@media (max-width: 960px) {
    .transfers-2col { grid-template-columns: 1fr; }
    .page-hero-watermark { display: none; }
    .match-row {
        grid-template-columns: 56px 1fr auto;
        grid-template-areas: "date home score" "date away score";
        gap: 6px 12px; padding: 12px 14px;
    }
    .match-row-date { grid-area: date; }
    .match-row-team { grid-area: home; font-size: 14px; }
    .match-row-team.away { grid-area: away; flex-direction: row; text-align: left; }
    .match-row-score, .match-row-time { grid-area: score; font-size: 19px; min-width: 58px; }
    .match-row-tag { display: none; }
    .match-row-team img { width: 24px; height: 24px; }
}

/* Cart button inside the shared nav */
.nav-links .cart-toggle {
    position: relative; background: transparent; border: 0;
    padding: 6px; color: var(--navy); cursor: pointer;
    display: inline-flex; align-items: center;
}
.nav-links .cart-toggle:hover { color: var(--acc); }
.nav-links .cart-count {
    position: absolute; top: -3px; right: -5px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--acc); color: #fff; border-radius: 9px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 800; line-height: 17px; text-align: center;
}
.nav-links .cart-count.zero { display: none; }