/* T91 "Matte Wrap" theme: matte black and emerald, satin gradients with grain.
   Loaded after assets/frontend/css/style.css and before page CSS: it remaps the base tokens
   (token names are legacy: --blue is the emerald field, --yellow the emerald signal) and
   repaints the large fields. Field and error rules carry a "body" prefix to beat page CSS,
   which loads after this file; everything else only needs to beat style.css. */

:root {
    --blue: #0d4634;
    --blue-deep: #0a3428;
    --blue-night: #06221a;
    --blue-line: rgba(255, 255, 255, .12);
    --ink: #0a0d0c;
    --ink-2: #141a18;
    --ink-3: #25302b;
    --yellow: #2ad08f;
    --yellow-press: #1fb57a;
    --orange: #2ad08f;
    --studio: #e2e6e3;
    --studio-2: #d2d9d5;
    --white: #f5f7f5;
    --text: #0a0d0c;
    --muted: #46524c;
    --muted-on-blue: #a6cbbb;
    --muted-on-ink: #95a39c;
    --error: #ff7a6b;
    /* Emerald for small text and marks on light grounds, where the signal tone is too pale. */
    --em-text: #0f7a52;
    --em-mark: #12a06c;

    /* Matte finish: fine white noise laid over every dark field. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --field-em: var(--grain), radial-gradient(120% 140% at 100% 0%, #187a5a 0%, #0d4634 40%, #072619 78%, #04140e 100%);
    --field-em-deep: var(--grain), radial-gradient(130% 120% at 100% 0%, #11573f 0%, #0a3428 45%, #05180f 100%);
    --field-ink: var(--grain), radial-gradient(90% 120% at 100% 0%, #10261d 0%, #0a0d0c 55%), #0a0d0c;
    --field-satin: var(--grain), linear-gradient(115deg, #36dc9c 0%, #22c184 45%, #12925f 100%);
    --wd-display: 112.5%;
}

html {
    scrollbar-color: var(--blue) var(--studio);
}

{
    background: var(--studio);
}

::selection {
    background: var(--yellow);
    color: var(--ink);
}

/* ---------- Type: upright and wide, no italic ---------- */

:is(.d, h1, h2) {
    font-stretch: var(--wd-display);
    font-style: normal;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: .95;
}

h1 {
    font-size: clamp(2.4rem, 5.6vw, 4.6rem);
}

h2 {
    font-size: clamp(1.9rem, 4.2vw, 3.5rem);
}

h3 {
    font-stretch: 100%;
    font-style: normal;
    letter-spacing: -.01em;
}

:is(.num, .pc__price b, .drawer nav a) {
    font-stretch: 100%;
    font-style: normal;
}

.ftr__claim {
    font-size: clamp(2.4rem, 7.4vw, 6rem);
}

.ftr__claim span {
    color: var(--yellow);
}

:is(.label, .btn, .link, .tag, .hdr__nav a) {
    font-stretch: 87.5%;
}

/* ---------- Fields ---------- */

body :is(.hdr, .drawer, .sec--ink, .roster, .ftr, .mm, .member, .box, .centers__board, .pdp, .ctr, .ms-calc__board, .plp-bar, .pdp-pro__stats) {
    background: var(--field-ink);
}

body :is(.sec--blue, .ph, .phead, .cmpp-head, .ms-hero, .pro-head, .intro, .ocard, .quizp, .plp-head, .ctr-head, .tcard, .gal__stage--court, .desc__img.is-cutout, .plus__item--lead, .ship__to) {
    background: var(--field-em);
}

body :is(.line, .pcard, .backstage__tile, .quizp__alt) {
    background: var(--field-em-deep);
}

body :is(.quiz, .centers__head, .pdp-test, .help, .quizband, .cmpp-band, .mm__card--y) {
    background: var(--field-satin);
}

.hdr {
    border-bottom-color: rgba(42, 208, 143, .22);
}

/* Ticker: an emerald strip under the black header; live dots stay, without the blink. */
.tick {
    background: var(--field-em-deep);
}

.tick__live {
    background: var(--ink);
    color: var(--yellow);
}

.live-dot {
    animation: none;
}

/* ---------- Buttons, plates, tags ---------- */

.btn {
    --bg: linear-gradient(180deg, #3ddca0 0%, #22c184 100%);
}

.btn:hover {
    --bg: var(--yellow-press);
}

.btn--ink {
    --bg: linear-gradient(180deg, #1f2925 0%, #0a0d0c 100%);
}

.btn--ink:hover {
    --bg: var(--ink-3);
}

.btn--white {
    --bg: var(--white);
}

.btn--white:hover {
    --bg: var(--studio);
}

.btn[disabled] {
    --bg: var(--studio-2);
}

.tag--yellow {
    background: var(--ink);
    color: var(--yellow);
}

body .opt.is-error legend {
    color: var(--error);
}

/* Calmer product cards: lift without the playful tilt. */
.pc:hover {
    box-shadow: 0 18px 40px -20px rgba(4, 20, 14, .5);
}

.pc:hover .pc__media img {
    transform: scale(1.04);
}

/* Two-up product grid on phones: tracks may shrink below their content, and the member
   price row wraps instead of pushing the second card off screen. */
@media (max-width: 640px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pc .mb {
        flex-wrap: wrap;
        row-gap: 4px;
    }
}

/* ---------- Club T91 card: the member card as an object (home hero and membership) ---------- */

.club-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(100%, 440px);
    aspect-ratio: 1.586;
    padding: clamp(18px, 2.4vw, 28px);
    background:
        var(--grain),
        linear-gradient(100deg, transparent 0 62%, rgba(42, 208, 143, .16) 62% 63%, transparent 63%),
        radial-gradient(120% 140% at 100% 0%, #15402f 0%, #0a0d0c 58%);
    color: var(--white);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
    filter: drop-shadow(0 30px 30px rgba(4, 20, 14, .55));
}

.club-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.club-card__top img {
    width: clamp(44px, 5vw, 60px);
    height: auto;
}

.club-card__club {
    font-size: .75rem;
}

.club-card__off {
    align-self: center;
    color: var(--yellow);
    font-stretch: var(--wd-display);
    font-weight: 800;
    font-size: clamp(3.6rem, 8vw, 6.4rem);
    line-height: .9;
    letter-spacing: -.03em;
}

.club-card__foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ink-3);
    color: var(--muted-on-ink);
    font-size: .75rem;
}

/* ---------- Commercial accents: member badge, strike price, stars, on-court bars ---------- */

body .mb__badge {
    background: var(--yellow);
    color: var(--ink);
}

body .mb__badge img {
    filter: brightness(0);
}

body .mb__badge:hover,
body .mb__badge[aria-expanded="true"] {
    background: var(--yellow-press);
}

body .mb__price {
    color: var(--em-text);
}

body .pc__price s {
    color: var(--em-text);
    text-decoration-thickness: 2px;
}

/* The product page buy box sits on matte black: the signal tone reads there. */
body .pdp .price__main s {
    color: var(--yellow);
    text-decoration-thickness: 2px;
}

body .stars {
    color: var(--em-mark);
}

body .rate-bars span {
    background:
        linear-gradient(90deg, var(--em-mark) calc(var(--v) * 10%), transparent 0),
        repeating-linear-gradient(90deg, var(--studio-2) 0 calc(10% - 2px), transparent 0 10%);
}