/* ==========================================================================
   ARENA — performance storefront design system
   --------------------------------------------------------------------------
   Built for supplements, gym equipment and activewear sold to a Facebook-ad
   audience: someone who arrived from a video, wants the claim, the proof and
   the price inside ten seconds, and buys on a phone.

   Four rules hold it together:

     1. DARK BY DEFAULT. The canvas is carbon; product photography and the two
        signal colours are the only bright things on the page. Every other
        template in the catalogue is light, luxe or editorial — this one is a
        gym at night.
     2. THE SHEAR. Slabs meet on a 2.5deg diagonal (.ar-shear), never on a
        horizontal rule. It is the template's structural signature and the one
        thing no other Kayroo template does.
     3. NUMBERS ARE LOUD. Prices, stats, ranks and counts are set in oversized
        tabular figures (.ar-score, .ar-rank). A performance buyer reads
        numbers before words.
     4. TWO SIGNALS, TWO JOBS. Primary (fire) means BUY — it is the only fill
        on a purchase action. Accent (volt) means PROOF — badges, active
        states, in-stock dots, the tape stripe. They never swap roles.

   Every colour derives from the platform brand tokens, so the Store Builder
   re-themes the whole storefront. Neutrals (black/white) are literal on
   purpose: they are the ink on top of a brand fill, not a brand colour.
   ========================================================================== */

:root {
    --ar-fire:    var(--primary-color, #FF4A17);
    --ar-steel:   var(--secondary-color, #8A94A6);
    --ar-volt:    var(--accent-color, #D8FF36);
    --ar-bg:      var(--background-color, #0B0D12);
    --ar-panel:   var(--surface-color, #141821);
    --ar-text:    var(--text-color, #F3F5F8);
    --ar-muted:   var(--text-muted-color, #98A1B2);
    --ar-line:    var(--border-color, #252B38);

    --ar-head:    var(--heading-font, 'Montserrat', sans-serif);
    --ar-body:    var(--body-font, 'Inter', sans-serif);

    /* Derived — nothing below introduces a second brand colour. */
    --ar-panel-2:  color-mix(in srgb, var(--ar-panel) 70%, var(--ar-bg));
    --ar-raise:    color-mix(in srgb, var(--ar-panel) 80%, var(--ar-text) 6%);
    --ar-line-soft: color-mix(in srgb, var(--ar-line) 60%, transparent);
    --ar-fire-soft: color-mix(in srgb, var(--ar-fire) 16%, transparent);
    --ar-fire-dim:  color-mix(in srgb, var(--ar-fire) 78%, var(--ar-bg));
    --ar-volt-soft: color-mix(in srgb, var(--ar-volt) 15%, transparent);
    --ar-on-fire:  #FFFFFF;
    --ar-on-volt:  #10131A;

    --ar-gutter:  clamp(16px, 4vw, 52px);
    --ar-max:     1360px;
    --ar-space:   clamp(46px, 6vw, 96px);
    --ar-r:       4px;      /* interface radius — near-square, athletic */
    --ar-r-media: 10px;     /* media is the only softened thing */
    --ar-bar:     64px;     /* mobile action bar height */
    --ar-lift:    0 20px 46px -26px rgba(0, 0, 0, .8);
    --ar-glow:    0 0 0 1px var(--ar-fire-soft), 0 16px 40px -22px var(--ar-fire);
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

.ar-body {
    margin: 0;
    background: var(--ar-bg);
    color: var(--ar-text);
    font-family: var(--ar-body);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-block-end: var(--ar-bar);
}

.ar-body img { max-width: 100%; display: block; }
.ar-body a { color: inherit; text-decoration: none; }
.ar-body button { font: inherit; }
.ar-body :focus-visible { outline: 2px solid var(--ar-volt); outline-offset: 2px; }

h1, h2, h3, h4, h5 {
    font-family: var(--ar-head);
    margin: 0;
    color: var(--ar-text);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.ar-wrap {
    width: 100%;
    max-width: var(--ar-max);
    margin-inline: auto;
    padding-inline: var(--ar-gutter);
}

.ar-band { padding-block: var(--ar-space); }
.ar-band--tight { padding-block: clamp(30px, 4vw, 60px); }

/* The shear — the signature. A slab whose top and bottom edges are cut on a
   diagonal instead of meeting the next section on a flat rule. */
.ar-shear {
    position: relative;
    background: var(--ar-panel);
    clip-path: polygon(0 2.2vw, 100% 0, 100% calc(100% - 2.2vw), 0 100%);
    padding-block: calc(var(--ar-space) + 2.2vw);
}
.ar-shear--top { clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%); }
.ar-shear--bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2vw), 0 100%); }
[dir="rtl"] .ar-shear { clip-path: polygon(0 0, 100% 2.2vw, 100% 100%, 0 calc(100% - 2.2vw)); }
[dir="rtl"] .ar-shear--top { clip-path: polygon(0 0, 100% 2.2vw, 100% 100%, 0 100%); }
[dir="rtl"] .ar-shear--bottom { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2.2vw)); }

/* The tape stripe — a hazard band in the accent. Used as a divider and as the
   announcement rail; never as a background for reading copy. */
.ar-tape {
    height: 8px;
    background: repeating-linear-gradient(
        -45deg,
        var(--ar-volt) 0 12px,
        transparent 12px 24px
    );
    opacity: .85;
}

/* ------------------------------------------------------------ typography */

.ar-display {
    font-family: var(--ar-head);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2.3rem, 8vw, 5.4rem);
    line-height: .94;
    letter-spacing: -0.03em;
}

.ar-h2 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 4.4vw, 2.9rem);
    line-height: 1.02;
}

.ar-h3 { font-size: clamp(1.05rem, 2.2vw, 1.4rem); font-weight: 800; }

.ar-lead {
    color: var(--ar-muted);
    font-size: clamp(.98rem, 1.5vw, 1.12rem);
    line-height: 1.68;
    margin: 0;
    max-width: 62ch;
}

.ar-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ar-head);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--ar-volt);
}
.ar-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--ar-volt);
}

/* The volt swipe under one word of a headline. */
.ar-mark {
    background-image: linear-gradient(var(--ar-volt), var(--ar-volt));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% .18em;
    padding-inline: .04em;
}

/* Numbers, always tabular so columns of prices line up. */
.ar-score,
.ar-price,
.ar-rank { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.ar-score {
    font-family: var(--ar-head);
    font-weight: 900;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.ar-price {
    font-family: var(--ar-head);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ar-text);
}
.ar-price .was {
    font-size: .84rem;
    font-weight: 600;
    color: var(--ar-muted);
    text-decoration: line-through;
    margin-inline-start: 7px;
}

.ar-off {
    display: inline-block;
    background: var(--ar-fire);
    color: var(--ar-on-fire);
    font-family: var(--ar-head);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 2px;
    margin-inline-start: 7px;
}

.ar-richtext { line-height: 1.78; color: var(--ar-muted); }
.ar-richtext h2, .ar-richtext h3, .ar-richtext h4 { color: var(--ar-text); margin: 1.5em 0 .5em; }
.ar-richtext p { margin: 0 0 1em; }
.ar-richtext ul, .ar-richtext ol { margin: 0 0 1em; padding-inline-start: 1.2em; }
.ar-richtext img { border-radius: var(--ar-r-media); margin: 1em 0; }
.ar-richtext a { color: var(--ar-volt); border-block-end: 1px solid var(--ar-volt); }
.ar-narrow { max-width: 72ch; }

/* --------------------------------------------------------------- buttons */

.ar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--ar-head);
    font-weight: 800;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 14px 22px;
    border-radius: var(--ar-r);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .14s ease, background-color .18s ease, box-shadow .18s ease;
}
.ar-btn:hover { transform: translateY(-2px); }
.ar-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }

.ar-btn--fire { background: var(--ar-fire); color: var(--ar-on-fire); box-shadow: var(--ar-glow); }
.ar-btn--fire:hover { background: var(--ar-fire-dim); }

.ar-btn--volt { background: var(--ar-volt); color: var(--ar-on-volt); }

.ar-btn--ghost {
    background: transparent;
    color: var(--ar-text);
    border-color: var(--ar-line);
}
.ar-btn--ghost:hover { border-color: var(--ar-volt); color: var(--ar-volt); }

.ar-btn--lg { padding: 17px 30px; font-size: .9rem; }
.ar-btn--block { width: 100%; }

.ar-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ar-head);
    font-weight: 800;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ar-volt);
}
.ar-link:hover { gap: 11px; }

/* ---------------------------------------------------------------- header */

.ar-announce {
    background: var(--ar-fire);
    color: var(--ar-on-fire);
    font-family: var(--ar-head);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: center;
    padding: 8px var(--ar-gutter);
}

.ar-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--ar-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--ar-line);
}

.ar-head__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-block: 13px;
}

.ar-mark-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ar-head);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.01em;
    font-size: 1.02rem;
}
.ar-mark-logo img { max-height: 40px; width: auto; }
.ar-mark-logo__glyph {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--ar-fire);
    color: var(--ar-on-fire);
    border-radius: var(--ar-r);
    font-size: .95rem;
}

.ar-head__acts { display: flex; align-items: center; gap: 8px; }

.ar-icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r);
    color: var(--ar-text);
    cursor: pointer;
}
.ar-icon-btn:hover { border-color: var(--ar-volt); color: var(--ar-volt); }

.ar-lang { display: flex; gap: 2px; }
.ar-lang a {
    font-family: var(--ar-head);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 7px 8px;
    color: var(--ar-muted);
    border-radius: 3px;
}
.ar-lang a.is-active { color: var(--ar-on-volt); background: var(--ar-volt); }

/* Tier two — the goal rail. Horizontally scrollable on a phone, a real nav
   row from 900px. This is the navigation model: a two-tier bar, not a
   hamburger-first overlay. */
.ar-rail {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border-block-start: 1px solid var(--ar-line-soft);
    padding-block: 8px;
}
.ar-rail::-webkit-scrollbar { display: none; }

.ar-rail__item { position: relative; flex: 0 0 auto; }

.ar-rail__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: var(--ar-head);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ar-muted);
    padding: 9px 12px;
    border-radius: var(--ar-r);
}
.ar-rail__link:hover,
.ar-rail__item:focus-within > .ar-rail__link { color: var(--ar-text); background: var(--ar-panel); }

.ar-rail__sub {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-width: 210px;
    background: var(--ar-panel);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r);
    box-shadow: var(--ar-lift);
    padding: 6px;
    display: none;
    z-index: 5;
}
.ar-rail__item:hover > .ar-rail__sub,
.ar-rail__item:focus-within > .ar-rail__sub { display: block; }
.ar-rail__sub a {
    display: block;
    padding: 9px 11px;
    border-radius: 3px;
    font-size: .86rem;
    color: var(--ar-muted);
}
.ar-rail__sub a:hover { background: var(--ar-panel-2); color: var(--ar-volt); }

/* Drawer (phone menu) */
.ar-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: color-mix(in srgb, var(--ar-bg) 88%, transparent);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.ar-drawer.is-open { opacity: 1; visibility: visible; }
.ar-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(400px, 88vw);
    background: var(--ar-panel);
    border-inline-start: 1px solid var(--ar-line);
    padding: 20px var(--ar-gutter) 30px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
[dir="rtl"] .ar-drawer__panel { transform: translateX(-100%); }
.ar-drawer.is-open .ar-drawer__panel { transform: none; }
.ar-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 22px; }
.ar-drawer__nav { display: grid; gap: 2px; }
.ar-drawer__nav > a,
.ar-drawer__nav .ar-drawer__group > a {
    display: block;
    font-family: var(--ar-head);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.05rem;
    padding: 12px 0;
    border-block-end: 1px solid var(--ar-line-soft);
}
.ar-drawer__sub { display: grid; gap: 2px; padding-inline-start: 16px; padding-block: 6px; }
.ar-drawer__sub a { color: var(--ar-muted); font-size: .92rem; padding: 7px 0; }
.ar-drawer__foot { margin-block-start: 26px; display: grid; gap: 14px; }

/* Mobile action bar — always-present order route. */
.ar-actionbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 70;
    height: var(--ar-bar);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--ar-panel);
    border-block-start: 1px solid var(--ar-line);
}
.ar-actionbar__item {
    display: grid;
    place-items: center;
    gap: 3px;
    background: none;
    border: 0;
    color: var(--ar-muted);
    font-family: var(--ar-head);
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
}
.ar-actionbar__item.is-fire { color: var(--ar-fire); }

@media (min-width: 900px) {
    .ar-body { padding-block-end: 0; }
    .ar-actionbar { display: none; }
    .ar-rail { justify-content: center; }
}

/* ------------------------------------------------------------------ hero */

.ar-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 78% 12%, var(--ar-fire-soft) 0%, transparent 62%),
        radial-gradient(46% 56% at 6% 88%, var(--ar-volt-soft) 0%, transparent 60%),
        var(--ar-bg);
    padding-block: clamp(38px, 6vw, 84px) clamp(52px, 7vw, 104px);
}

.ar-hero__grid { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; }

.ar-hero__copy { display: grid; gap: 18px; justify-items: start; }
.ar-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.ar-hero__media { position: relative; }
.ar-hero__shot {
    position: relative;
    border-radius: var(--ar-r-media);
    overflow: hidden;
    background: var(--ar-panel);
    aspect-ratio: 4 / 5;
    border: 1px solid var(--ar-line);
}
.ar-hero__shot img { width: 100%; height: 100%; object-fit: cover; }

/* The floating price plate — the ad-buyer's "how much" answered without a
   scroll or a click. */
.ar-plate {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-end: 12px;
    inset-inline-end: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: color-mix(in srgb, var(--ar-panel) 92%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r);
    padding: 12px 14px;
}
.ar-plate__name { font-family: var(--ar-head); font-weight: 800; font-size: .9rem; }
.ar-plate__meta { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--ar-muted); }

/* Scoreboard strip under the hero copy */
.ar-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.ar-scores__cell {
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r);
    background: var(--ar-panel);
    padding: 14px 12px;
}
.ar-scores__cell .ar-score { color: var(--ar-volt); }
.ar-scores__cell span {
    display: block;
    margin-block-start: 5px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ar-muted);
    font-weight: 700;
}

@media (min-width: 900px) {
    .ar-hero__grid { grid-template-columns: 1.05fr .95fr; gap: clamp(38px, 5vw, 70px); }
}

/* ------------------------------------------------------------- stat bar */

.ar-statbar {
    background: var(--ar-panel);
    border-block: 1px solid var(--ar-line);
}
.ar-statbar__row {
    display: grid;
    gap: 1px;
    background: var(--ar-line-soft);
    grid-template-columns: repeat(2, 1fr);
}
.ar-statbar__item {
    background: var(--ar-panel);
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px var(--ar-gutter);
    font-size: .84rem;
    color: var(--ar-muted);
}
.ar-statbar__item svg { color: var(--ar-volt); flex: 0 0 auto; }
.ar-statbar__item b { color: var(--ar-text); font-family: var(--ar-head); font-weight: 800; display: block; font-size: .88rem; }

@media (min-width: 780px) {
    .ar-statbar__row { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------ goal tracks */

.ar-tracks { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }

.ar-track {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--ar-r-media);
    border: 1px solid var(--ar-line);
    background: var(--ar-panel);
    min-height: 148px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform .18s ease, border-color .18s ease;
}
.ar-track:hover { transform: translateY(-3px); border-color: var(--ar-volt); }
.ar-track img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42;
}
.ar-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--ar-bg) 8%, transparent 78%);
}
.ar-track__body { position: relative; z-index: 2; }
.ar-track__idx {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 14px;
    z-index: 2;
    font-family: var(--ar-head);
    font-weight: 900;
    font-size: 1.5rem;
    color: color-mix(in srgb, var(--ar-text) 22%, transparent);
}
.ar-track__name {
    font-family: var(--ar-head);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .01em;
}
.ar-track__count { font-size: .72rem; color: var(--ar-muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }

@media (min-width: 760px) { .ar-tracks { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------ product tile */

.ar-board { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .ar-board { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .ar-board { grid-template-columns: repeat(4, 1fr); } }

.ar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ar-panel);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r-media);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ar-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ar-fire) 55%, var(--ar-line)); box-shadow: var(--ar-lift); }

.ar-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--ar-panel-2); }
.ar-card__media img { width: 100%; height: 100%; object-fit: cover; }

.ar-rank {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 2;
    font-family: var(--ar-head);
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .04em;
    background: var(--ar-volt);
    color: var(--ar-on-volt);
    padding: 5px 9px;
    border-end-end-radius: var(--ar-r);
}

.ar-flag {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    z-index: 2;
    font-family: var(--ar-head);
    font-weight: 800;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 5px 8px;
    border-radius: 2px;
    background: var(--ar-fire);
    color: var(--ar-on-fire);
}
.ar-flag.is-muted { background: var(--ar-line); color: var(--ar-muted); }

.ar-card__body { padding: 12px 13px 13px; display: grid; gap: 8px; flex: 1; align-content: start; }
.ar-card__cat { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ar-volt); font-weight: 800; }
.ar-card__name { font-size: .92rem; font-weight: 700; line-height: 1.32; font-family: var(--ar-body); }
.ar-card__foot { margin-block-start: auto; padding: 0 13px 13px; display: grid; gap: 9px; }
.ar-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.ar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ar-volt); display: inline-block; }
.ar-dot.is-out { background: var(--ar-muted); }
.ar-stock { font-size: .7rem; color: var(--ar-muted); display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }

.ar-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ar-line); }

/* -------------------------------------------------------------- proof/results */

.ar-proof { display: grid; gap: clamp(24px, 3.6vw, 46px); }
.ar-beats { display: grid; gap: 0; }
.ar-beat {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding-block: 20px;
    border-block-end: 1px solid var(--ar-line);
}
.ar-beat:last-child { border-block-end: 0; }
.ar-beat__n {
    font-family: var(--ar-head);
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ar-fire);
    min-width: 44px;
}
.ar-beat h4 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .02em; margin-block-end: 6px; }
.ar-beat p { margin: 0; color: var(--ar-muted); font-size: .93rem; }

.ar-proof__media {
    border-radius: var(--ar-r-media);
    overflow: hidden;
    border: 1px solid var(--ar-line);
    background: var(--ar-panel);
    aspect-ratio: 4 / 3;
}
.ar-proof__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
    .ar-proof { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ---------------------------------------------------------------- reviews */

.ar-quotes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .ar-quotes { grid-template-columns: repeat(2, 1fr); } }

.ar-quote {
    background: var(--ar-panel);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r-media);
    padding: 18px;
    display: grid;
    gap: 11px;
}
.ar-quote p { margin: 0; color: var(--ar-text); font-size: .96rem; line-height: 1.62; }
.ar-quote__who { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .78rem; color: var(--ar-muted); }
.ar-quote__who b { color: var(--ar-text); font-family: var(--ar-head); }
.ar-verified {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    color: var(--ar-volt);
    border: 1px solid var(--ar-volt);
    border-radius: 2px;
    padding: 2px 6px;
}

/* ------------------------------------------------------------- close slab */

.ar-close {
    text-align: center;
    display: grid;
    gap: 18px;
    justify-items: center;
}
.ar-close__note { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ar-muted); font-weight: 700; }

/* ------------------------------------------------------------ catalog */

.ar-filter {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--ar-bg) 94%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--ar-line);
    padding-block: 12px;
}
.ar-filter__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ar-chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.ar-chips::-webkit-scrollbar { display: none; }
.ar-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: var(--ar-head);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 9px 13px;
    border: 1px solid var(--ar-line);
    border-radius: 999px;
    color: var(--ar-muted);
    background: transparent;
    cursor: pointer;
}
.ar-chip:hover { color: var(--ar-text); border-color: var(--ar-steel); }
.ar-chip.is-active { background: var(--ar-volt); border-color: var(--ar-volt); color: var(--ar-on-volt); }
.ar-chip:disabled { opacity: .45; cursor: not-allowed; }

.ar-search { display: flex; align-items: center; gap: 8px; }
.ar-search input {
    background: var(--ar-panel);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r);
    color: var(--ar-text);
    padding: 10px 13px;
    font-size: .88rem;
    min-width: 0;
    width: 100%;
}
.ar-search input::placeholder { color: var(--ar-muted); }

.ar-pager { display: flex; gap: 6px; justify-content: center; margin-block-start: clamp(22px, 3vw, 36px); flex-wrap: wrap; }
.ar-pager a, .ar-pager span {
    min-width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r);
    font-family: var(--ar-head);
    font-weight: 800;
    font-size: .82rem;
    color: var(--ar-muted);
}
.ar-pager a:hover { border-color: var(--ar-volt); color: var(--ar-volt); }
.ar-pager .is-current { background: var(--ar-fire); border-color: var(--ar-fire); color: var(--ar-on-fire); }
.ar-pager .is-off { opacity: .35; }

.ar-empty { text-align: center; padding: clamp(40px, 7vw, 80px) 0; color: var(--ar-muted); }

/* ------------------------------------------------------------- product page */

.ar-crumb { display: flex; gap: 8px; flex-wrap: wrap; font-size: .74rem; color: var(--ar-muted); margin-block-end: 14px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.ar-crumb a:hover { color: var(--ar-volt); }

.ar-pd { display: grid; gap: clamp(22px, 3.4vw, 44px); }

.ar-gallery__main {
    border-radius: var(--ar-r-media);
    overflow: hidden;
    border: 1px solid var(--ar-line);
    background: var(--ar-panel);
    aspect-ratio: 1 / 1;
    position: relative;
}
.ar-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.ar-thumbs { display: flex; gap: 8px; margin-block-start: 10px; overflow-x: auto; scrollbar-width: none; }
.ar-thumbs::-webkit-scrollbar { display: none; }
.ar-thumbs button {
    flex: 0 0 74px;
    height: 74px;
    padding: 0;
    border: 1.5px solid var(--ar-line);
    border-radius: var(--ar-r);
    overflow: hidden;
    background: var(--ar-panel);
    cursor: pointer;
}
.ar-thumbs button.is-active { border-color: var(--ar-fire); }
.ar-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.ar-buy {
    display: grid;
    gap: 15px;
    align-content: start;
    background: var(--ar-panel);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r-media);
    padding: clamp(16px, 2.4vw, 24px);
}
.ar-buy h1 { font-size: clamp(1.4rem, 3.4vw, 2.05rem); text-transform: uppercase; }
.ar-buy__cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; color: var(--ar-volt); font-weight: 800; }

.ar-opts { display: grid; gap: 8px; }
.ar-opts__label { font-family: var(--ar-head); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ar-muted); }
.ar-opts__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ar-opt {
    font-family: var(--ar-head);
    font-size: .78rem;
    font-weight: 800;
    padding: 10px 14px;
    border: 1.5px solid var(--ar-line);
    border-radius: var(--ar-r);
    background: transparent;
    color: var(--ar-text);
    cursor: pointer;
}
.ar-opt.is-active { border-color: var(--ar-fire); background: var(--ar-fire-soft); }
.ar-opt:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.ar-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--ar-line); border-radius: var(--ar-r); overflow: hidden; }
.ar-qty button { width: 42px; height: 46px; background: transparent; border: 0; color: var(--ar-text); font-size: 1.1rem; cursor: pointer; }
.ar-qty input { width: 54px; height: 46px; text-align: center; background: transparent; border: 0; color: var(--ar-text); font-family: var(--ar-head); font-weight: 800; }
.ar-qty input::-webkit-outer-spin-button, .ar-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ar-buy__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ar-buy__actions .ar-btn { flex: 1; min-width: 190px; }

/* The spec sheet — the fitness buyer's real question: what is actually in it */
.ar-spec { display: grid; gap: 0; border: 1px solid var(--ar-line); border-radius: var(--ar-r-media); overflow: hidden; }
.ar-spec__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 15px; font-size: .88rem; }
.ar-spec__row:nth-child(odd) { background: var(--ar-panel-2); }
.ar-spec__row span:first-child { color: var(--ar-muted); }
.ar-spec__row span:last-child { font-family: var(--ar-head); font-weight: 800; }

.ar-facts { display: grid; gap: 9px; }
.ar-facts div { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--ar-muted); }
.ar-facts svg { color: var(--ar-volt); flex: 0 0 auto; }

@media (min-width: 900px) {
    .ar-pd { grid-template-columns: 1.15fr .85fr; align-items: start; }
    .ar-buy { position: sticky; inset-block-start: 96px; }
}

/* --------------------------------------------------------------- checkout */

.ar-lane { display: grid; gap: clamp(18px, 2.6vw, 30px); max-width: 780px; margin-inline: auto; }

.ar-lane__block {
    background: var(--ar-panel);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r-media);
    padding: clamp(16px, 2.4vw, 24px);
    display: grid;
    gap: 14px;
}
.ar-lane__head { display: flex; align-items: center; gap: 12px; }
.ar-lane__n {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--ar-r);
    background: var(--ar-fire);
    color: var(--ar-on-fire);
    font-family: var(--ar-head);
    font-weight: 900;
    font-size: .9rem;
    flex: 0 0 auto;
}
.ar-lane__head h2 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .02em; }

.ar-field { display: grid; gap: 6px; }
.ar-label { font-family: var(--ar-head); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ar-muted); }
.ar-input, .ar-select, .ar-textarea {
    width: 100%;
    background: var(--ar-bg);
    border: 1.5px solid var(--ar-line);
    border-radius: var(--ar-r);
    color: var(--ar-text);
    padding: 13px 14px;
    font-family: var(--ar-body);
    font-size: .95rem;
}
.ar-input:focus, .ar-select:focus, .ar-textarea:focus { border-color: var(--ar-fire); outline: none; }
.ar-textarea { resize: vertical; }
.ar-select option { background: var(--ar-panel); color: var(--ar-text); }
.ar-two { display: grid; gap: 14px; }
@media (min-width: 640px) { .ar-two { grid-template-columns: 1fr 1fr; } }

.ar-err { color: #ff6b6b; font-size: .78rem; margin: 0; }
.ar-alert {
    background: var(--ar-panel);
    border: 1px solid var(--ar-line);
    border-inline-start: 3px solid #ff6b6b;
    border-radius: var(--ar-r);
    padding: 13px 16px;
    margin-block-end: 18px;
    font-size: .9rem;
}
.ar-alert.is-ok { border-inline-start-color: var(--ar-volt); }
.ar-alert ul { margin: 0; padding-inline-start: 18px; }

.ar-pick {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-r);
    margin-block-end: 9px;
    background: var(--ar-bg);
}
.ar-pick.is-out { opacity: .5; }
.ar-pick__thumb { width: 52px; height: 52px; border-radius: var(--ar-r); object-fit: cover; background: var(--ar-panel-2); display: grid; place-items: center; color: var(--ar-muted); flex: 0 0 auto; }
.ar-pick__body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ar-pick__name { font-size: .9rem; font-weight: 700; }
.ar-pick__qty { width: 68px; flex: 0 0 auto; padding: 9px; text-align: center; }

.ar-line { display: flex; align-items: center; gap: 10px; padding-block: 9px; border-block-end: 1px solid var(--ar-line-soft); font-size: .88rem; }
.ar-line img { width: 40px; height: 40px; border-radius: 3px; object-fit: cover; }
.ar-line__x { background: none; border: 0; color: var(--ar-muted); cursor: pointer; font-size: .9rem; }
.ar-line__x:hover { color: var(--ar-fire); }

.ar-coupon { display: flex; gap: 8px; }
.ar-coupon .ar-input { flex: 1; }

.ar-sum__row { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--ar-muted); padding-block: 6px; }
.ar-sum__total {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    border-block-start: 1px solid var(--ar-line);
    margin-block-start: 8px;
    padding-block-start: 12px;
    font-family: var(--ar-head);
    font-weight: 900;
    font-size: 1.2rem;
}
.ar-sum__total span:last-child { color: var(--ar-volt); }

.ar-cod { display: flex; align-items: center; gap: 11px; font-size: .84rem; color: var(--ar-muted); background: var(--ar-bg); border: 1px dashed var(--ar-line); border-radius: var(--ar-r); padding: 12px 14px; }
.ar-cod svg { color: var(--ar-volt); flex: 0 0 auto; }
.ar-cod b { color: var(--ar-text); display: block; }

/* The sticky total bar — on a phone the running total and the submit button
   never leave the screen while the customer fills the lane. */
.ar-totalbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--ar-bar);
    z-index: 65;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--ar-gutter);
    background: var(--ar-panel);
    border-block-start: 1px solid var(--ar-line);
    box-shadow: var(--ar-lift);
}
.ar-totalbar.is-on { display: flex; }
.ar-totalbar__amount { font-family: var(--ar-head); font-weight: 900; font-size: 1.1rem; color: var(--ar-volt); }
.ar-totalbar__label { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ar-muted); font-weight: 700; }
@media (min-width: 900px) { .ar-totalbar { display: none !important; } }

/* ---------------------------------------------------------------- contact */

.ar-contact { display: grid; gap: clamp(20px, 3vw, 38px); }
.ar-info { display: grid; gap: 0; }
.ar-info__row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding-block: 15px; border-block-end: 1px solid var(--ar-line); }
.ar-info__row svg { color: var(--ar-volt); margin-block-start: 3px; }
.ar-info__row strong { font-family: var(--ar-head); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ar-muted); display: block; }
.ar-info__row span { font-size: .92rem; grid-column: 2; }
.ar-map { margin-block-start: clamp(22px, 3vw, 36px); border-radius: var(--ar-r-media); overflow: hidden; border: 1px solid var(--ar-line); filter: invert(.9) hue-rotate(180deg); }
@media (min-width: 880px) { .ar-contact { grid-template-columns: 1.1fr .9fr; } }

/* -------------------------------------------------------- content pages */

.ar-page-head {
    background: var(--ar-panel);
    border-block-end: 1px solid var(--ar-line);
    padding-block: clamp(30px, 5vw, 62px);
}

.ar-values { display: grid; gap: 0; margin-block-start: clamp(24px, 3.4vw, 44px); }
.ar-value { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding-block: 20px; border-block-end: 1px solid var(--ar-line); }
.ar-value__n { font-family: var(--ar-head); font-weight: 900; font-size: 1.4rem; color: var(--ar-fire); }
.ar-value h4 { text-transform: uppercase; font-size: 1rem; margin-block-end: 6px; }
.ar-value p { margin: 0; color: var(--ar-muted); font-size: .92rem; }

.ar-shots { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-block-start: clamp(20px, 3vw, 34px); }
@media (min-width: 760px) { .ar-shots { grid-template-columns: repeat(3, 1fr); } }
.ar-shots button { padding: 0; border: 1px solid var(--ar-line); border-radius: var(--ar-r-media); overflow: hidden; background: var(--ar-panel); cursor: pointer; aspect-ratio: 4 / 3; }
.ar-shots img { width: 100%; height: 100%; object-fit: cover; }

.ar-lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(0, 0, 0, .92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 26px;
}
.ar-lightbox.is-open { display: flex; }
.ar-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--ar-r-media); }
.ar-lb-btn {
    position: absolute;
    background: var(--ar-panel);
    border: 1px solid var(--ar-line);
    color: var(--ar-text);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
}
.ar-lb-close { inset-block-start: 20px; inset-inline-end: 20px; }
.ar-lb-prev { inset-inline-start: 16px; }
.ar-lb-next { inset-inline-end: 16px; }

/* ----------------------------------------------------------------- footer */

.ar-footer { background: var(--ar-panel); border-block-start: 1px solid var(--ar-line); padding-block: clamp(34px, 5vw, 64px) 26px; }
.ar-footer__top { display: grid; gap: clamp(24px, 3.4vw, 44px); }
.ar-footer__about { color: var(--ar-muted); font-size: .9rem; margin: 14px 0 0; max-width: 42ch; }
.ar-footer__cols { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
.ar-footer__cols h5 { font-family: var(--ar-head); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ar-volt); margin-block-end: 11px; }
.ar-footer__cols a { display: block; color: var(--ar-muted); font-size: .88rem; padding-block: 5px; }
.ar-footer__cols a:hover { color: var(--ar-text); }
.ar-social { display: flex; gap: 8px; margin-block-start: 16px; }
.ar-social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ar-line); border-radius: var(--ar-r); color: var(--ar-muted); }
.ar-social a:hover { color: var(--ar-volt); border-color: var(--ar-volt); }
.ar-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    border-block-start: 1px solid var(--ar-line);
    margin-block-start: clamp(24px, 3vw, 40px);
    padding-block-start: 18px;
    font-size: .78rem;
    color: var(--ar-muted);
}
.ar-footer__legal { display: flex; gap: 14px; flex-wrap: wrap; }
.ar-footer__legal a:hover { color: var(--ar-volt); }

@media (min-width: 880px) {
    .ar-footer__top { grid-template-columns: 1fr 1.3fr; }
    .ar-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------ motion */

.ar-rise { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.ar-rise.is-in { opacity: 1; transform: none; }

.ar-marquee { overflow: hidden; }
.ar-marquee__track { display: flex; gap: 40px; width: max-content; animation: ar-slide 26s linear infinite; }
.ar-marquee__track span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ar-head);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .78rem;
    color: var(--ar-muted);
    white-space: nowrap;
}
.ar-marquee__track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ar-fire); }

@keyframes ar-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ar-rise { opacity: 1; transform: none; transition: none; }
    .ar-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
    .ar-btn:hover, .ar-card:hover, .ar-track:hover { transform: none; }
    * { scroll-behavior: auto !important; }
}