/* ============================================================
   EARMOR STAR — page-earmor-star.php + single-earmor_star.php
   ------------------------------------------------------------
   Ported from assets/css/ambassador.css (EARMOR Brand Ambassador).
   Class prefix renamed amb- -> st-. All design tokens, clip-path
   slants, type scale and breakpoint values are reused verbatim so
   STAR pages stay pixel-consistent with the Ambassador pages.

   Detail page = streamlined variant (M1..M5):
     M1 st-hero    identity band  — compressed 480px hero, credentials as chips
     M2 st-ach     achievement rail — horizontal cards (was a tall vertical list)
     M3 st-gallery filmstrip        — single-row horizontal (was a 3-col grid)
     M4 st-kit     gear card        — ambassador "Why" three-column folded into one card
     M5 st-related related strip     — feature banner + partner copy merged into one narrow card
   Vertical long-lists became horizontal scrollers: more per screen, shorter page.
   Gold usage drops from surfaces to accents (3px card bar + CTA + chips) so the
   achievement rail reads as the focal point instead of looking like a trimmed copy.

   Design system: bg #0a0a0a / gold #F1B300 / white #e6e6e6 / #b8b8b8
   Card bg #101010 #141414 / borders #232323 #161616
   Fonts: Barlow Condensed 900 uppercase (headings) / Poppins (body)
   Breakpoints: 1099px / 680px / 460px
   ============================================================ */

/* Full-page background (no diamond / hexagon tiling on black). */
body {
    background-color:#0a0a0a;
}
.st-page {
    background-color:transparent;
}

/* ---------- Kicker ---------- */
.st-kicker {
    display:inline-block; color:#F1B300; font-size:12px; font-weight:800;
    letter-spacing:4px; text-transform:uppercase; margin:0 0 14px;
}

/* ---------- Branded hexagon placeholder (empty data, never a grey box) ---------- */
.st-ph {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
    background:radial-gradient(circle at 50% 40%, #1c1c1c 0%, #0d0d0d 72%);
}
.st-ph__hex { width:56px; height:56px; opacity:.75; }
.st-ph__txt {
    color:rgba(241,179,0,.55); font-size:11px; font-weight:900; letter-spacing:3px;
}

/* ---------- Chips & tags ---------- */
.st-chip {
    display:inline-block; color:#d8d8d8; font-size:12px; font-weight:500;
    letter-spacing:.6px; line-height:1;
    padding:8px 13px; border:1px solid #2a2a2a; border-radius:999px;
    background:#141414;
    transition:border-color .25s ease, color .25s ease;
}
.st-chip:hover { border-color:#F1B300; color:#F1B300; }

.st-tag {
    display:inline-block; color:#F1B300; font-size:11px; font-weight:800;
    letter-spacing:2.2px; line-height:1; text-transform:uppercase;
    padding:7px 11px; background:rgba(241,179,0,.09);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0px 100%, 0 calc(100% - 6px));
}

/* ============================================================
   M1 — IDENTITY BAND
   Compressed hero (480px vs the ambassador's 720px). The gold
   bottom-slant block shrinks to a small corner wedge, keeping the
   motif present but far less dominant, so the band reads as an
   identity strip rather than a full-bleed poster.
   ============================================================ */
.st-hero {
    position:relative; min-height:480px; display:flex; align-items:flex-end;
    background:#0f0f0f; overflow:hidden; isolation:isolate;
}
.st-hero__media {
    position:absolute; inset:0; z-index:1;
    background-size:cover; background-position:center 22%;
    clip-path:polygon(0 0, 100% 0, 100% 94%, 0 100%);
}
.st-hero__media::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.42) 42%, rgba(10,10,10,.05) 68%),
               linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 45%, rgba(10,10,10,.6) 100%);
}
/* Small corner wedge instead of the full-width gold slant. */
.st-hero__tri--bl { display:none; }
.st-hero__inner {
    position:relative; z-index:3; width:min(1350px,100%); margin:0 auto;
    padding:120px 32px 74px;
}
.st-hero__content { max-width:62%; }
.st-hero__topline {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px;
}
.st-hero__country {
    display:inline-flex; align-items:center; color:#F1B300; font-size:12px; font-weight:900;
    letter-spacing:4.5px; text-transform:uppercase; padding-left:38px; position:relative;
}
.st-hero__country::before {
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:28px; height:2px; background:#F1B300;
}
.st-hero__honor {
    color:#f0c400; font-size:12px; font-weight:800; letter-spacing:2.5px;
    text-transform:uppercase; padding:6px 11px;
    border:1px solid rgba(241,179,0,.55); background:rgba(241,179,0,.08);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0px 100%, 0 calc(100% - 6px));
}
.st-hero__name {
    color:#fff; font-size:clamp(38px,5.6vw,64px); font-weight:900; line-height:1.0;
    letter-spacing:1px; text-transform:uppercase; margin:0 0 12px;
    text-shadow:0 2px 22px rgba(0,0,0,.6);
}
.st-hero__role {
    color:#fff; font-size:clamp(16px,1.9vw,21px); font-style:italic; margin:0 0 14px;
}
.st-hero__lead {
    color:#c9c9c9; font-size:14px; line-height:1.7; margin:0 0 20px; max-width:52ch;
}
.st-hero__creds,
.st-hero__tags {
    list-style:none; margin:0; padding:0;
    display:flex; flex-wrap:wrap; gap:9px;
}
.st-hero__creds { margin-bottom:12px; }
.st-hero__tags { margin-top:4px; }

/* ============================================================
   M2 — ACHIEVEMENT RAIL
   The ambassador's tall vertical list becomes a horizontal rail of
   cards: a3px gold bar on the left edge replaces the full gold
   border, so gold becomes a line rather than a surface.
   ============================================================ */
.st-ach {
    position:relative; background:transparent; border-top:1px solid #161616;
    overflow:hidden; isolation:isolate;
}
.st-ach__inner {
    position:relative; z-index:1; width:min(1350px,100%); margin:0 auto;
    padding:74px 32px 76px;
}
.st-ach__head { margin-bottom:26px; }
.st-ach__disc { margin:0; }
.st-ach__disc-line1 {
    display:block; color:#F1B300; font-size:clamp(28px,3.4vw,42px); font-weight:600;
    line-height:1.05; letter-spacing:.5px; text-transform:uppercase;
}
.st-ach__disc-line2 {
    display:block; color:#fff; font-size:clamp(28px,3.4vw,42px); font-weight:900;
    line-height:1.05; letter-spacing:.5px; text-transform:uppercase;
}
.st-ach__bio {
    margin-top:38px; padding-top:30px; border-top:1px solid #161616;
    max-width:76ch;
}
.st-ach__bio p { color:#b8b8b8; font-size:14px; line-height:1.8; margin:0 0 8px; }
.st-ach__bio p:last-child { margin-bottom:0; }

/* ---------- Track: adaptive grid, never a horizontal scroller ----------
   Previously this was `overflow-x:auto` + `width:max-content` with fixed
   320px/264px children, which forced a horizontal scrollbar and clipped
   content on any viewport narrower than the total row width. Now the track
   is a wrapping grid whose columns collapse to fit the parent, so every card
   is fully visible and the page never scrolls sideways. */
.st-rail {
    position:relative;
    width:100%;
    max-width:100%;
    /* no overflow-x:auto -> no scrollbar; children must fit, not scroll */
    overflow:visible;
}
.st-rail__track {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;
    align-items:stretch;
    width:100%;
}
.st-rail__track > * { min-width:0; }

/* ---------- M2 achievement card ---------- */
.st-card {
    position:relative;
    /* grid child: stretch to its column, never force a fixed width */
    width:100%; min-width:0;
    display:flex; flex-direction:column;
    padding:26px 24px 24px 28px;
    background:#101010; border:1px solid #232323; border-radius:12px;
    transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.st-card::before {
    content:""; position:absolute; left:0; top:20px; bottom:20px; width:3px;
    background:#F1B300; border-radius:0 3px 3px 0;
    transition:top .3s ease, bottom .3s ease;
}
.st-card:hover { transform:translateY(-3px); border-color:#333; background:#131313; }
.st-card:hover::before { top:10px; bottom:10px; }
.st-card__icon {
    flex:0 0 32px; width:32px; height:32px; color:#F1B300;
    display:flex; align-items:center; justify-content:center; margin:0 0 14px;
}
.st-card__icon svg { width:24px; height:24px; }
.st-card__title {
    color:#F1B300; font-size:15px; font-weight:500; letter-spacing:1.1px;
    line-height:1.3; margin:0 0 12px; text-transform:uppercase;
}
.st-card__details { list-style:none; margin:0; padding:0; }
.st-card__details li {
    position:relative; color:#b0b0b0; font-size:13px; line-height:1.55;
    padding:0 0 7px 14px;
}
.st-card__details li::before {
    content:""; position:absolute; left:0; top:9px;
    width:5px; height:5px; background:#F1B300; border-radius:50%;
}
.st-card__details li:last-child { padding-bottom:0; }

/* ============================================================
   M3 — FILMSTRIP
   Single-row horizontal scroll, fixed tile height so the layout
   never reflows as images load.
   ============================================================ */
.st-gallery {
    position:relative; background:transparent; border-top:1px solid #161616;
    overflow:hidden;
}
.st-gallery__inner {
    position:relative; width:min(1350px,100%); margin:0 auto; padding:70px 32px 72px;
}
.st-gallery__head { margin-bottom:24px; }
.st-rail--film .st-rail__track { gap:12px; }
.st-shot {
    /* grid child: width comes from the column; height follows a 3/4 ratio
       so portraits and landscape shots both fit without overflowing. */
    width:100%; min-width:0; margin:0;
    aspect-ratio:3/4; height:auto;
    overflow:hidden; background:#141414;
    border:1px solid #1d1d1d; border-radius:10px;
}
.st-shot img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .45s ease, filter .45s ease;
}
.st-shot:hover img { transform:scale(1.05); filter:brightness(1.06); }

/* ============================================================
   M4 — GEAR CARD
   The ambassador's three-column "Why" block collapses into a
   single card: media on the left, gold product panel on the right.
   ============================================================ */
.st-kit {
    position:relative; background:transparent; border-top:1px solid #161616;
    overflow:hidden;
}
.st-kit__inner {
    width:min(1350px,100%); margin:0 auto; padding:70px 32px 74px;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:34px; align-items:stretch;
}
.st-kit__media {
    margin:0; overflow:hidden; background:#141414;
    border:1px solid #1d1d1d; border-radius:12px; min-height:280px;
}
.st-kit__media img { width:100%; height:100%; object-fit:cover; display:block; }
.st-kit__body {
    position:relative; display:flex; flex-direction:column;
    padding:32px 30px 30px;
    background:#F1B300; color:#0a0a0a;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.st-kit__kicker {
    color:#0a0a0a; opacity:.7; font-size:11px; font-weight:800;
    letter-spacing:3px; text-transform:uppercase; margin:0 0 12px;
}
.st-kit__prodkicker {
    display:inline-block; align-self:flex-start;
    color:#F1B300; background:#0a0a0a; font-size:10px; font-weight:800;
    letter-spacing:2.4px; text-transform:uppercase; padding:6px 10px; margin:0 0 12px;
}
.st-kit__title {
    color:#0a0a0a; font-size:clamp(26px,3vw,36px); font-weight:900;
    letter-spacing:1px; margin:0 0 18px; text-transform:uppercase;
}
.st-kit__features { list-style:none; margin:0 0 20px; padding:0; }
.st-kit__features li {
    color:#0a0a0a; font-size:13px; font-weight:700; line-height:1.5;
    padding:9px 0 9px 22px; border-bottom:1px solid rgba(10,10,10,.18);
    position:relative;
}
.st-kit__features li:last-child { border-bottom:none; }
.st-kit__features li::before {
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:10px; height:10px; background:#0a0a0a;
    clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.st-kit__shop {
    display:inline-flex; align-items:center; gap:10px; margin-top:auto;
    padding:12px 24px; width:max-content;
    background:#0a0a0a; color:#F1B300;
    font-size:12px; font-weight:800; letter-spacing:2.5px; text-decoration:none;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition:background .2s ease, transform .2s ease;
}
.st-kit__shop:hover { background:#1c1c1c; transform:translateX(3px); }
.st-kit__shop .arr { display:inline-block; transition:transform .2s ease; }
.st-kit__shop:hover .arr { transform:translateX(4px); }

/* ============================================================
   M5 — RELATED STRIP
   Feature banner + partner copy merged into one narrow card.
   ============================================================ */
.st-related {
    position:relative; background:transparent; border-top:1px solid #222;
    overflow:hidden;
}
.st-related__inner {
    width:min(1080px,100%); margin:0 auto; padding:56px 32px 60px;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:34px; align-items:center;
}
.st-related__media {
    min-height:220px; border-radius:12px; border:1px solid #1d1d1d;
    background:#141414 center/cover no-repeat;
}
.st-related__title {
    color:#F1B300; font-size:clamp(24px,3.2vw,36px); font-weight:900;
    letter-spacing:4px; margin:0 0 14px; text-transform:uppercase;
}
.st-related__text {
    color:#b5b5b5; font-size:13px; line-height:1.75; margin:0; max-width:52ch;
}

/* ============================================================
   COLLECTION PAGE — page-earmor-star.php (unchanged structure)
   ============================================================ */
.st-arch-hero { position:relative; padding:300px 0 150px; overflow:hidden; }
.st-arch-hero__inner {
    width:min(1350px,100%); margin:0 auto; padding:0 32px; text-align:center;
}
.st-arch-hero__inner::after {
    content:""; display:block; width:64px; height:2px; background:#F1B300;
    margin:28px auto 0; opacity:.85;
}
.st-arch-kicker {
    display:inline-block; color:#F1B300; font-size:13px; font-weight:900;
    letter-spacing:6px; text-transform:uppercase; padding:6px 14px; margin:0 0 16px;
    border:1px solid rgba(241,179,0,.6); background:rgba(241,179,0,.08);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0px 100%, 0 calc(100% - 8px));
}
.st-arch-title {
    color:#fff; font-size:clamp(38px,6vw,72px); font-weight:900; line-height:1.02;
    letter-spacing:1px; text-transform:uppercase; margin:0 0 14px;
}
.st-arch-sub { color:#e6e6e6; font-size:23px; line-height:1.7; max-width:720px; margin:0 auto; }
.st-arch { padding:40px 0 100px; }
.st-arch__inner { width:min(1350px,100%); margin:0 auto; padding:0 32px; }
.st-arch__empty { color:#8a8a8a; text-align:center; padding:60px 0; }

.st-toolbar {
    position:relative; border-top:1px solid #161616; border-bottom:1px solid #161616;
    background:#0d0d0d;
}
.st-toolbar__inner {
    width:min(1350px,100%); margin:0 auto; padding:22px 32px;
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:32px; flex-wrap:wrap;
}
.st-toolbar__group { border:0; margin:0; padding:0; min-width:0; }
.st-toolbar__legend {
    display:block; color:#F1B300; font-size:11px; font-weight:800;
    letter-spacing:3px; text-transform:uppercase; margin:0 0 12px; padding:0;
}
.st-toolbar__cats {
    list-style:none; margin:0; padding:0;
    display:flex; flex-wrap:wrap; gap:8px;
}
.st-toolbar__cat { display:inline-flex; }
.st-toolbar__check {
    position:absolute; opacity:0; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
}
.st-toolbar__catlabel {
    display:inline-block; cursor:pointer; user-select:none;
    color:#b8b8b8; font-size:12px; font-weight:600; letter-spacing:1px;
    padding:8px 14px; border:1px solid #2a2a2a; border-radius:999px; background:#141414;
    transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.st-toolbar__catlabel:hover { color:#fff; border-color:#3a3a3a; }
.st-toolbar__check:checked + .st-toolbar__catlabel {
    color:#0a0a0a; background:#F1B300; border-color:#F1B300;
}
.st-toolbar__check:focus-visible + .st-toolbar__catlabel {
    outline:2px solid #F1B300; outline-offset:2px;
}
.st-toolbar__sortrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.st-toolbar__select {
    background:#141414; color:#fff; font-size:13px; font-family:inherit;
    padding:9px 13px; border:1px solid #2a2a2a; border-radius:8px; cursor:pointer;
    transition:border-color .2s ease;
}
.st-toolbar__select:hover { border-color:#3a3a3a; }
.st-toolbar__select:focus-visible { outline:2px solid #F1B300; outline-offset:2px; }
.st-toolbar__clear {
    background:transparent; color:#b8b8b8; font-family:inherit; font-size:12px;
    font-weight:700; letter-spacing:1.4px; text-transform:uppercase; cursor:pointer;
    padding:9px 14px; border:1px solid #2a2a2a; border-radius:8px;
    transition:color .2s ease, border-color .2s ease;
}
.st-toolbar__clear:hover { color:#F1B300; border-color:rgba(241,179,0,.5); }
.st-toolbar__clear:focus-visible { outline:2px solid #F1B300; outline-offset:2px; }
.st-toolbar__count {
    margin:12px 0 0; color:#8a8a8a; font-size:12px; letter-spacing:1px;
}
.st-toolbar__countnum { color:#F1B300; font-weight:800; }

.st-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.st-card-wrap { display:block; }
.st-card.is-hidden { display:none; }

.st-grid .st-card {
    flex:none; width:auto; padding:0; border-radius:12px; overflow:hidden;
}
.st-grid .st-card::before { display:none; }
.st-grid .st-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.55); }
.st-grid .st-card__icon,
.st-grid .st-card__details { display:none; }
.st-grid .st-card__title {
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    margin:0; padding:14px 16px; color:#fff;
    background:linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.9) 55%);
    font-size:18px; text-transform:uppercase;
}

.st-card { position:relative; display:block; text-decoration:none; text-align:left; }
.st-card__shape {
    display:block; position:relative; overflow:hidden; background:#141414;
    aspect-ratio:3/4;
}
.st-card__img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center top;
    filter:brightness(.94) saturate(.98);
    transition:filter .45s ease, transform .55s ease;
}
.st-card:hover .st-card__img { filter:brightness(1.06) saturate(1); transform:scale(1.05); }
.st-card__tag {
    position:absolute; left:14px; top:14px; z-index:2;
    color:#0a0a0a; background:#F1B300; font-size:10px; font-weight:800;
    letter-spacing:2px; text-transform:uppercase; padding:5px 9px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0px 100%, 0 calc(100% - 5px));
}
.st-card__bar {
    display:none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1099px) {
    .st-hero__inner { padding:104px 24px 62px; }
    .st-hero__content { max-width:100%; }
    .st-hero__media { clip-path:polygon(0 0, 100% 0, 100% 96%, 0 100%); }

    .st-ach__inner,
    .st-gallery__inner { padding:64px 24px 66px; }
    .st-rail__track { gap:14px; }
    .st-rail__track { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }

    .st-kit__inner {
        padding:60px 24px 62px;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px;
    }
    .st-kit__body { padding:28px 24px 26px; }

    .st-related__inner {
        padding:48px 24px 52px;
        grid-template-columns:minmax(0,1fr); gap:24px;
    }
    .st-related__media { min-height:200px; }

    .st-toolbar__inner { padding:20px 24px; }
    .st-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
}

@media (max-width:680px) {
    .st-hero { min-height:400px; }
    .st-hero__inner { padding:96px 20px 48px; }
    .st-hero__content { max-width:100%; }
    .st-hero__lead { font-size:13px; margin-bottom:16px; }
    .st-hero__creds, .st-hero__tags { gap:7px; }
    .st-chip { font-size:11px; padding:7px 11px; }
    .st-tag { font-size:10px; padding:6px 9px; }

    .st-ach__inner { padding:52px 20px 54px; }
    .st-gallery__inner { padding:50px 20px 52px; }
    .st-ach__bio { margin-top:30px; padding-top:24px; }

    /* Rails become swipeable single-card rows. */
    .st-card { padding:22px 20px 20px 24px; }
    .st-rail__track { grid-template-columns:1fr; }

    .st-kit__inner {
        padding:50px 20px 52px;
        grid-template-columns:minmax(0,1fr); gap:18px;
    }
    .st-kit__media { min-height:200px; }
    .st-kit__body { padding:26px 22px 24px; }

    .st-related__inner { padding:44px 20px 48px; gap:20px; }
    .st-related__media { min-height:170px; }
    .st-related__text { font-size:12px; }

    .st-toolbar__inner { padding:18px 20px; gap:20px; }
    .st-toolbar__group--sort { width:100%; }
    .st-toolbar__sortrow { width:100%; }
    .st-toolbar__select { flex:1 1 auto; }
    .st-grid { grid-template-columns:1fr; gap:14px; }
}

@media (max-width:460px) {
    .st-hero { min-height:360px; }
    .st-hero__inner { padding:88px 18px 42px; }
    .st-ach__inner,
    .st-gallery__inner,
    .st-kit__inner,
    .st-related__inner { padding-left:18px; padding-right:18px; }
    .st-card { padding:20px 18px 18px 22px; }
}

/* ---------- Overflow safety net ----------
   Belt-and-braces: even if an image is wider than its grid cell (e.g. an
   oversized upload with no srcset), the page must never scroll sideways. */
.st-page,
.st-page * { max-width:100%; }
.st-shot img { max-width:100%; }
.st-rail__track > * { max-width:100%; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .st-card, .st-shot img, .st-card__img, .st-kit__shop, .st-kit__shop .arr {
        transition:none;
    }
    .st-card:hover, .st-kit__shop:hover { transform:none; }
}