/* =====================================================================
   Slushy Bros — "Stay Frozen" skin
   ---------------------------------------------------------------------
   Loads after style.css. Owns the site chrome (header / footer) on every
   page and the whole simplified homepage (.fz-* sections). Interior
   pages keep their existing dark layouts inside #site-content.

   Look: dark navy chrome (the logo needs a dark ground), warm off-white
   page, bold condensed headlines, rounded cards, soft shadows.
   ===================================================================== */

:root {
    --fz-bg:        #f6f3ec;
    --fz-surface:   #ffffff;
    --fz-surface-2: #efeae0;
    --fz-ink:       #0b1f2e;
    --fz-navy:      #0a1c29;
    --fz-navy-2:    #0f2a3b;
    --fz-muted:     #5b6b75;
    --fz-red:       #d62828;
    --fz-red-deep:  #b51f1f;
    --fz-yellow:    #efbf2f;
    --fz-blue:      #0b75bb;
    --fz-blue-deep: #085a90;
    --fz-line:      rgba(11, 31, 46, 0.12);
    --fz-line-dark: rgba(255, 255, 255, 0.12);
    --fz-radius:    18px;
    --fz-radius-sm: 12px;
    --fz-shadow:    0 10px 30px rgba(11, 31, 46, 0.10);
    --fz-shadow-lg: 0 24px 60px rgba(11, 31, 46, 0.18);
    --fz-display:   'Anton', Impact, 'Arial Black', sans-serif;
    --fz-body:      'DM Sans', Arial, Helvetica, sans-serif;
    --fz-marker:    'Permanent Marker', cursive;
}

/* ---------- Page ground ---------- */
body.sb-frozen {
    background: var(--fz-bg);
    color: var(--fz-ink);
    font-family: var(--fz-body);
    -webkit-font-smoothing: antialiased;
}
body.sb-frozen::before { display: none; }          /* no film grain */

/* Interior pages are re-skinned in frozen-interior.css; the homepage
   (.home) is fully styled below. */

body.sb-frozen a:focus-visible,
body.sb-frozen button:focus-visible,
body.sb-frozen input:focus-visible {
    outline: 3px solid var(--fz-yellow);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Shared bits ---------- */
.fz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fz-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: var(--fz-muted);
}
.fz-eyebrow--red { color: var(--fz-red); }
.fz-section-title {
    font-family: var(--fz-display);
    font-size: clamp(38px, 5vw, 68px);
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: var(--fz-ink);
}
.fz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 2px solid transparent;
    border-radius: 100px;
    font-family: var(--fz-display);
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.fz-btn .arrow { transition: transform 0.2s ease; }
.fz-btn:hover .arrow { transform: translateX(4px); }
.fz-btn--primary { background: var(--fz-red); color: #fff; box-shadow: 0 10px 24px rgba(214, 40, 40, 0.28); }
.fz-btn--primary:hover { background: var(--fz-red-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(214, 40, 40, 0.34); }
.fz-btn--outline { background: transparent; color: currentColor; border-color: currentColor; }
.fz-btn--outline:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.fz-btn--ink { background: var(--fz-ink); color: #fff; }
.fz-btn--ink:hover { background: var(--fz-navy-2); transform: translateY(-2px); box-shadow: var(--fz-shadow); }
.fz-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fz-body);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fz-ink);
    transition: color 0.15s, gap 0.2s;
}
.fz-text-link:hover { color: var(--fz-red); gap: 12px; }

/* Brand wordmark fallback (only when no logo image is uploaded) */
.fz-wordmark {
    display: inline-flex;
    flex-direction: column;
    font-family: var(--fz-display);
    font-style: italic;
    text-transform: uppercase;
    line-height: 0.8;
    transform: skew(-5deg);
    font-size: 30px;
    width: max-content;
    color: #fff;
}
.fz-wordmark span:last-child { color: var(--fz-red); margin-left: 0.45em; }
.fz-wordmark small {
    font-family: var(--fz-body);
    font-style: normal;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.14em;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.7);
}

/* Photo card — hero collage, drop art, backyard strip */
.fz-photo {
    position: relative;
    display: block;
    background: var(--fz-surface);
    border-radius: var(--fz-radius);
    overflow: hidden;
    box-shadow: var(--fz-shadow-lg);
}
.fz-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fz-photo-caption {
    position: absolute;
    left: 14px; right: 14px; bottom: 12px;
    padding: 8px 12px;
    border-radius: 100px;
    background: rgba(11, 31, 46, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: max-content;
    max-width: calc(100% - 28px);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Goo drip divider — rendered by slushy_bros_frozen_goo() right after a
   section. A rim strip overlaps the section's bottom (which must end in
   the same colour), blobs ooze off it and fall; the SVG goo filter fuses
   them into liquid. Zero-height wrapper so it overlays the next section. */
.fz-goo-wrap { position: relative; height: 0; z-index: 3; pointer-events: none; }
.fz-goo {
    position: absolute;
    left: 0; right: 0;
    top: -28px;
    height: 132px;
    overflow: hidden;
    filter: url(#fz-goo);
    -webkit-mask-image: linear-gradient(#000 48%, transparent 92%);
    mask-image: linear-gradient(#000 48%, transparent 92%);
}
/* rim runs past both edges so the blur never rounds its corners */
.fz-goo-rim { position: absolute; left: -80px; right: -80px; top: 0; height: 32px; }
.fz-goo-drip {
    position: absolute;
    left: var(--x, 50%);
    top: -100%;
    width: var(--size, 20px);
    height: var(--size, 20px);
    margin-left: calc(var(--size, 20px) / -2);
    border-radius: 50%;
    animation: fz-fall var(--dur, 6s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: top;
}
@keyframes fz-fall {
    0%   { top: -100%; }
    42%  { top: 0%; }     /* arrives inside the rim */
    68%  { top: 18%; }    /* slow ooze: this is where the goo stretch shows */
    100% { top: 100%; }   /* drops and fades out */
}
@media (prefers-reduced-motion: reduce) {
    .fz-goo-drip { animation: none; top: var(--rest, 20%); }
}
@media (max-width: 680px) {
    .fz-goo { height: 108px; }
    .fz-goo-drip:nth-child(2n) { display: none; }   /* every other blob on phones */
}


/* =====================================================================
   HEADER (every page) — dark so the logo's white reads
   ===================================================================== */
body.sb-frozen .promo-bar {
    background: var(--fz-red);
    color: #fff;
    border-bottom: 0;
}
body.sb-frozen .promo-bar-msg,
body.sb-frozen .promo-bar-close { color: #fff; }
body.sb-frozen .promo-bar-msg strong { color: var(--fz-yellow); }

body.sb-frozen .site-header {
    position: sticky;
    top: 0;
    z-index: 60;                      /* above the announce / promo bars (50) so the drawer covers them */
    background: var(--fz-navy);
    border-bottom: 1px solid var(--fz-line-dark);
}
body.sb-frozen .fz-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 88px;
    gap: 24px;
}
body.sb-frozen .brand { color: #fff; gap: 0; }
/* Logo: the skin sets its own size (bigger than the old 40px default) */
body.sb-frozen .site-header .site-logo { display: block; width: auto; height: 68px !important; max-height: 68px; }

@media (min-width: 961px) {
    body.sb-frozen .primary-nav { justify-self: center; }
}
body.sb-frozen .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--fz-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
body.sb-frozen .nav-links > li { display: inline-flex; align-items: center; }
body.sb-frozen .nav-links a {
    color: rgba(255, 255, 255, 0.86);
    opacity: 1;
    padding: 11px 15px;
    border-radius: 100px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
body.sb-frozen .nav-links a:hover,
body.sb-frozen .nav-links .current-menu-item > a { color: #fff; background: rgba(255, 255, 255, 0.08); }
body.sb-frozen .nav-links a::after { display: none; }

body.sb-frozen .nav-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
body.sb-frozen .fz-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--fz-red);
    color: #fff;
    padding: 0 20px;
    height: 44px;
    border-radius: 100px;
    font-family: var(--fz-display);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.15s, transform 0.15s;
}
body.sb-frozen .fz-header-cta:hover { background: var(--fz-red-deep); transform: translateY(-1px); }
body.sb-frozen .cart-pill {
    height: 44px;
    padding: 0 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 100px;
    color: #fff;
    font-family: var(--fz-body);
    font-weight: 700;
    font-size: 13px;
    background: transparent;
    gap: 8px;
}
body.sb-frozen .cart-pill:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
body.sb-frozen .cart-pill i { color: #fff; }
body.sb-frozen .nav-toggle {
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 100px;
    color: #fff;
    background: transparent;
}
body.sb-frozen .nav-toggle:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
body.sb-frozen .nav-hype { display: none; }
body.sb-frozen .fz-drawer-foot { display: none; }

/* Announce bar on the new palette */
body.sb-frozen .announce-bar { border-bottom: 0; }
body.sb-frozen .announce-bar--red { background: var(--fz-red); }
body.sb-frozen .announce-bar--ink { background: var(--fz-navy-2); }
body.sb-frozen .announce-bar--gradient { background: linear-gradient(90deg, var(--fz-red) 0%, #b8306a 45%, var(--fz-blue) 100%); }
body.sb-frozen .announce-bar-btn--primary { background: #fff; color: var(--fz-ink); border-color: #fff; box-shadow: none; }
body.sb-frozen .announce-bar-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); color: var(--fz-red); }
body.sb-frozen .announce-bar-btn--ghost { border-color: rgba(255, 255, 255, 0.6); }
body.sb-frozen .announce-bar-social { background: rgba(255, 255, 255, 0.14); }

/* =====================================================================
   HOMEPAGE
   ===================================================================== */

/* ---------- Hero ---------- */
.fz-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(160deg, var(--fz-navy) 0%, #0d3450 60%, #0b5f98 130%);
    padding: 72px 0 44px;
}
.fz-hero-glow {
    position: absolute;
    width: 46vw; height: 46vw;
    max-width: 640px; max-height: 640px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    pointer-events: none;
    animation: fz-drift 18s ease-in-out infinite alternate;
}
.fz-hero-glow--red    { background: radial-gradient(circle, rgba(214, 40, 40, 0.9), transparent 62%); left: 30%; top: -20%; }
.fz-hero-glow--blue   { background: radial-gradient(circle, rgba(11, 117, 187, 0.95), transparent 62%); right: 4%; top: 10%; animation-delay: -6s; }
.fz-hero-glow--yellow { background: radial-gradient(circle, rgba(239, 191, 47, 0.55), transparent 62%); right: -12%; bottom: -30%; animation-delay: -12s; }
@keyframes fz-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-4%, 5%) scale(1.08); }
}
.fz-hero::after {
    /* solid strip the goo rim continues from */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(12, 79, 124, 0) 0%, #0c4f7c 70%);
    z-index: 1;
    pointer-events: none;
}
.fz-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 40px;
    min-height: 620px;
}
.fz-hero-copy { max-width: 620px; }
.fz-hero .fz-eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 8px 14px 8px 10px;
    border-radius: 100px;
    margin-bottom: 26px;
}
.fz-pulse {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--fz-yellow);
    box-shadow: 0 0 0 0 rgba(239, 191, 47, 0.7);
    animation: fz-pulse 1.8s ease-out infinite;
}
@keyframes fz-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 191, 47, 0.7); }
    100% { box-shadow: 0 0 0 12px rgba(239, 191, 47, 0); }
}
.fz-hero-title {
    font-family: var(--fz-display);
    font-size: clamp(76px, 9.5vw, 150px);
    line-height: 0.82;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.fz-hero-title span { display: block; }
.fz-hero-title span:last-child { color: var(--fz-red); }
.fz-hero-tag {
    font-family: var(--fz-display);
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 20px 0 18px;
    color: var(--fz-yellow);
}
.fz-hero-sub {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.5;
    max-width: 480px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
}
.fz-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 10px 18px 10px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.15s, transform 0.15s;
}
.fz-hero-stat:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
.fz-hero-stat i { color: var(--fz-red); font-size: 20px; }
.fz-hero-stat strong { font-family: var(--fz-display); font-size: 28px; line-height: 1; color: var(--fz-yellow); letter-spacing: 0.02em; }
.fz-hero-stat em { font-style: normal; opacity: 0.7; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.fz-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.fz-hero-actions .fz-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.fz-hero-actions .fz-btn--outline:hover { border-color: #fff; }

/* ---- Image mode: wide banner at full width, copy over a scrim on the
   left, lineup dropping in on the right and breaking over the banner's
   bottom edge into navy ---- */
.fz-hero--image { padding-top: 0; }
.fz-hero--image .fz-hero-glow { display: none; }
.fz-hero-bg {
    position: absolute;
    left: 0; right: 0; top: 0;
    aspect-ratio: 2.52 / 1;           /* the banner's own ratio → no crop on desktop */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
    /* the banner itself fades out at the bottom, so the hero gradient
       behind it shows through with no seam */
    -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 46%, transparent 100%);
}
.fz-hero-bg::before {
    /* scrim for the copy (lower left) — fades in below the banner's logo */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 28, 41, 0.94) 0%, rgba(10, 28, 41, 0.84) 28%, rgba(10, 28, 41, 0.4) 48%, rgba(10, 28, 41, 0) 62%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 22%, #000 46%);
    mask-image: linear-gradient(to bottom, transparent 22%, #000 46%);
}
.fz-hero-bg::after {
    /* light navy tint over the lower half so copy stays readable */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(10, 28, 41, 0) 0%, rgba(10, 28, 41, 0.5) 100%);
}
.fz-hero--image .fz-hero-grid { align-items: start; min-height: 0; gap: 24px; }
.fz-hero--image .fz-hero-copy { padding-top: clamp(180px, 18.5vw, 270px); }   /* below the banner's logo */
/* the banner already carries the logo: keep the H1 for screen readers only */
.fz-hero--image .fz-hero-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fz-hero--image .fz-hero-tag { font-size: clamp(46px, 5.4vw, 80px); margin: 0 0 16px; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); }
.fz-hero--image .fz-hero-sub { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.fz-hero--image .fz-lineup { padding-top: clamp(180px, 18.5vw, 270px); }   /* below the banner's logo */
.fz-hero--image .fz-hero-scribble { display: none; }               /* the banner already says it */
.fz-hero--image::after { background: linear-gradient(180deg, rgba(12, 79, 124, 0) 0%, #0c4f7c 70%); }

/* Flavor strip — every character, drifting; tap to jump to the section */
.fz-flavors {
    position: relative;
    z-index: 2;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}
.fz-flavors-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px max(24px, calc((100% - 1320px) / 2));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fz-yellow);
}
.fz-flavors-label i { animation: fz-bob 1.6s ease-in-out infinite; }
@keyframes fz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.fz-flavors-track { display: flex; width: max-content; animation: fz-marquee 46s linear infinite; }
.fz-flavors:hover .fz-flavors-track { animation-play-state: paused; }
.fz-flavors-set { display: flex; gap: 34px; padding-right: 34px; }
.fz-flavor {
    --bro: #35485a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 104px;
    color: #fff;
    transition: transform 0.2s ease;
}
.fz-flavor:hover { transform: translateY(-4px); }
.fz-flavor-pic {
    width: 84px; height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bro);
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 4px var(--bro), 0 14px 30px rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.9);
}
.fz-flavor-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.fz-flavor-name {
    font-family: var(--fz-display);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fz-flavor--soon .fz-flavor-pic { border-style: dashed; border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); }
.fz-flavor--soon .fz-flavor-name { color: rgba(255, 255, 255, 0.6); }
@media (prefers-reduced-motion: reduce) {
    .fz-flavors-track { animation: none; width: 100%; overflow-x: auto; }
    .fz-flavors-label i { animation: none; }
}

/* The lineup: three tall portraits, middle one forward */
.fz-lineup {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: end;
    padding: 40px 0 10px;
}
.fz-lineup-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4.4;
    border-radius: 22px;
    overflow: hidden;
    background: var(--fz-navy-2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.fz-lineup-card--red    { background: linear-gradient(180deg, #7a1616, #3a0c0c); }
.fz-lineup-card--blue   { background: linear-gradient(180deg, #0b5f98, #072a45); }
.fz-lineup-card--yellow { background: linear-gradient(180deg, #b8860b, #5a4106); }
.fz-lineup-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s ease;
}
.fz-lineup-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 31, 46, 0.85) 0%, rgba(11, 31, 46, 0) 40%);
}
.fz-lineup-card:nth-child(1) { transform: rotate(-4deg) translateY(10px); }
.fz-lineup-card:nth-child(2) { transform: translateY(-26px) scale(1.06); z-index: 2; }
.fz-lineup-card:nth-child(3) { transform: rotate(4deg) translateY(10px); }
.fz-lineup-card:hover { transform: translateY(-14px) scale(1.06); z-index: 3; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); }
.fz-lineup-card:hover img { transform: scale(1.05); }
.fz-lineup-name {
    position: absolute;
    left: 14px; right: 14px; bottom: 14px;
    z-index: 2;
    font-family: var(--fz-display);
    font-size: clamp(18px, 2vw, 30px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}
.fz-lineup-card--red .fz-lineup-name    { color: #ffb3b3; }
.fz-lineup-card--blue .fz-lineup-name   { color: #9fd6ff; }
.fz-lineup-card--yellow .fz-lineup-name { color: var(--fz-yellow); }

/* Photo collage (Customizer "photos" mode) — up to 3 stacked cards */
.fz-collage {
    position: relative;
    height: 560px;
    z-index: 2;
}
.fz-collage .fz-photo {
    position: absolute;
    width: 56%;
    aspect-ratio: 4 / 5;
    transition: transform 0.3s ease;
}
.fz-collage .fz-photo:nth-child(1) { left: 22%; top: 0; z-index: 3; transform: rotate(2deg); }
.fz-collage .fz-photo:nth-child(2) { left: -2%; top: 22%; z-index: 2; transform: rotate(-5deg) scale(0.86); }
.fz-collage .fz-photo:nth-child(3) { right: -4%; top: 28%; z-index: 1; transform: rotate(5deg) scale(0.84); }
.fz-collage .fz-photo:hover { z-index: 5; transform: rotate(0deg) scale(1.02); }
.fz-collage--1 .fz-photo:nth-child(1) { left: 16%; width: 68%; transform: rotate(1.5deg); }
.fz-collage--2 .fz-photo:nth-child(1) { left: 30%; }
.fz-collage--2 .fz-photo:nth-child(2) { left: 0; top: 20%; }
.fz-hero-scribble {
    position: absolute;
    right: -2%;
    top: -6px;
    z-index: 4;
    font-family: var(--fz-marker);
    font-size: 20px;
    line-height: 1.05;
    color: var(--fz-yellow);
    transform: rotate(6deg);
    text-align: center;
    pointer-events: none;
}
.fz-hero-sticker {
    position: absolute;
    left: -2%;
    bottom: -8px;
    z-index: 4;
    background: var(--fz-yellow);
    color: var(--fz-ink);
    font-family: var(--fz-display);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 100px;
    transform: rotate(-4deg);
    box-shadow: var(--fz-shadow);
    pointer-events: none;
}

/* ---------- The drop (all products + tag filter) ---------- */
.fz-viral { padding-top: 140px; }        /* room for the hero drips */
.fz-drops { padding-top: 88px; }
.fz-section-deck { max-width: 560px; color: var(--fz-muted); line-height: 1.6; margin: 0; font-size: 16px; }
.fz-pulse--red { background: var(--fz-red); animation-name: fz-pulse-red; }
@keyframes fz-pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.6); }
    100% { box-shadow: 0 0 0 12px rgba(214, 40, 40, 0); }
}
.fz-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.fz-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 100px;
    border: 1.5px solid var(--fz-line);
    background: var(--fz-surface);
    color: var(--fz-ink);
    font-family: var(--fz-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fz-chip:hover { border-color: var(--fz-ink); }
.fz-chip.is-active { background: var(--fz-ink); color: #fff; border-color: var(--fz-ink); }
.fz-chip-count { font-size: 11px; font-weight: 800; opacity: 0.55; }
.fz-filter-empty { margin: 24px 0 0; font-weight: 700; color: var(--fz-muted); }
.fz-product-low {
    position: absolute;
    left: 12px; bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--fz-red);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 100px;
}
.fz-drops-empty {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
    align-items: center;
    background: var(--fz-surface);
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    padding: 24px;
}
.fz-drops-empty h3 { font-family: var(--fz-display); font-size: clamp(36px, 4vw, 56px); line-height: 0.95; text-transform: uppercase; margin: 0 0 12px; }
.fz-drops-empty p { color: var(--fz-muted); line-height: 1.6; margin: 0 0 22px; }
.fz-drops-empty-art { box-shadow: none; border: 1px solid var(--fz-line); }
.fz-drops-empty-art img { height: auto; object-fit: contain; background: #fff; }

/* ---------- Perks — the slush band ---------- */
.fz-perks {
    position: relative;
    margin: 8px 0 0;
    padding: 44px 0 72px;
    color: #fff;
    background:
        radial-gradient(70% 160% at 8% 50%,  rgba(214, 40, 40, 0.95) 0%, rgba(214, 40, 40, 0) 62%),
        radial-gradient(62% 170% at 50% 30%, rgba(11, 117, 187, 0.95) 0%, rgba(11, 117, 187, 0) 62%),
        radial-gradient(70% 160% at 94% 60%, rgba(239, 191, 47, 0.95) 0%, rgba(239, 191, 47, 0) 62%),
        linear-gradient(90deg, #d62828 0%, #0b75bb 50%, #efbf2f 100%);
    isolation: isolate;
}
.fz-perks::after {
    /* darken so white copy reads on the yellow / blue mid-tones */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 31, 46, 0.3) 0%, rgba(11, 31, 46, 0.42) 100%);
}
.fz-perks::before {
    /* solid bottom strip the goo rim continues from */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    z-index: 1;
    background: linear-gradient(90deg, #99252a, #0b5b91, #ab8f2f);
    -webkit-mask-image: linear-gradient(transparent, #000 55%);
    mask-image: linear-gradient(transparent, #000 55%);
}
.fz-perks-frost {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.55) 1.2px, transparent 1.6px),
        radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.4px);
    background-size: 14px 14px, 23px 23px;
    background-position: 0 0, 7px 9px;
    mix-blend-mode: screen;
}
.fz-perks-frost { border-top: 6px solid rgba(255, 255, 255, 0.35); }
.fz-perks-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.fz-perk {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.fz-perk:last-child { border-right: 0; padding-right: 0; }
.fz-perk-icon {
    flex: 0 0 64px;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fff;
    color: var(--fz-ink);
    display: grid;
    place-items: center;
    font-size: 26px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.08);
    transform: rotate(-8deg);
    transition: transform 0.25s ease;
}
.fz-perk--2 .fz-perk-icon { transform: rotate(6deg); }
.fz-perk--3 .fz-perk-icon { transform: rotate(-5deg); }
.fz-perk--4 .fz-perk-icon { transform: rotate(7deg); }
.fz-perk:hover .fz-perk-icon { transform: rotate(0) scale(1.08); }
.fz-perk--1 .fz-perk-icon i { color: var(--fz-red); }
.fz-perk--2 .fz-perk-icon i { color: var(--fz-blue); }
.fz-perk--3 .fz-perk-icon i { color: var(--fz-blue); }
.fz-perk--4 .fz-perk-icon i { color: #b8860b; }
.fz-perk h4 {
    font-family: var(--fz-display);
    font-size: 27px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    min-height: 2em;          /* always two lines, so the copy below lines up */
    display: flex;
    align-items: flex-end;
    margin: 4px 0 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.fz-perk p { font-size: 16px; line-height: 1.5; margin: 0; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }

/* Drips: the band's own bottom edge is masked into drips, so they carry
   the real gradient colours. The last 70px of padding is the drip zone. */

/* ---------- Section head (shared) ---------- */
.fz-section { padding: 88px 0; }
.fz-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}
.fz-section-head .fz-section-title { margin: 0; }
.fz-section-head .fz-section-deck { margin-top: 12px; }
.fz-section-head .fz-eyebrow { margin-bottom: 10px; }

/* ---------- Watch (YouTube) — reel grid, same cards as /studio/ ---------- */
.fz-watch {
    position: relative;
    padding-top: 88px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 18%, rgba(214, 40, 40, 0.28), transparent 46%),
        radial-gradient(circle at 88% 82%, rgba(11, 117, 187, 0.36), transparent 50%),
        linear-gradient(180deg, var(--fz-navy) 0%, #0d2233 100%);
}
.fz-watch .fz-eyebrow { color: var(--fz-yellow); }
.fz-watch .fz-section-title { color: #fff; }
.fz-watch .fz-text-link { color: rgba(255, 255, 255, 0.8); }
.fz-watch .fz-text-link:hover { color: var(--fz-yellow); }
.fz-stat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 18px 10px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.15s;
}
.fz-stat:hover { background: rgba(255, 255, 255, 0.14); }
.fz-stat i { color: var(--fz-red); font-size: 18px; }
.fz-stat strong { font-family: var(--fz-display); font-size: 26px; letter-spacing: 0.02em; color: var(--fz-yellow); line-height: 1; }
.fz-stat small { font-size: 10px; font-weight: 700; opacity: 0.55; letter-spacing: 0.08em; }
/* Shorts shelf: horizontal snap scroller with arrows; cards overlay title + views */
.fz-shorts { position: relative; }
.fz-shorts-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px 2px 14px;
    -webkit-overflow-scrolling: touch;
}
.fz-shorts-track::-webkit-scrollbar { display: none; }
.fz-shorts-track > * { flex: 0 0 calc((100% - 4 * 16px) / 5); scroll-snap-align: start; }
.fz-shorts-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 48px; height: 48px;
    margin-top: -24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(11, 31, 46, 0.85);
    color: #fff;
    display: grid; place-items: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, opacity 0.15s, transform 0.15s;
}
.fz-shorts-nav:hover { background: var(--fz-red); transform: scale(1.06); }
.fz-shorts-nav:disabled { opacity: 0; pointer-events: none; }
.fz-shorts-nav--prev { left: -24px; }
.fz-shorts-nav--next { right: -24px; }
.fz-shorts-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.fz-short {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    color: #fff;
    isolation: isolate;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fz-short:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.5); }
.fz-short img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.fz-short:hover img { transform: scale(1.06); }
.fz-short::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.25) 42%, rgba(0, 0, 0, 0) 60%),
                linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 30%);
    z-index: 1;
}
.fz-short-top {
    position: absolute;
    left: 12px; right: 12px; top: 12px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.fz-short-badge {
    font-family: var(--fz-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--fz-ink);
}
.fz-short--hot .fz-short-badge { background: var(--fz-red); color: #fff; }
.fz-short-views {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.fz-short-views i { font-size: 10px; color: var(--fz-yellow); }
.fz-short-play {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%) scale(0.9);
    width: 58px; height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: grid; place-items: center;
    font-size: 18px;
    padding-left: 3px;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s, background 0.2s;
}
.fz-short:hover .fz-short-play { opacity: 1; transform: translate(-50%, -50%) scale(1); background: var(--fz-red); border-color: var(--fz-red); }
.fz-short-title {
    position: absolute;
    left: 14px; right: 14px; bottom: 14px;
    z-index: 2;
    font-family: var(--fz-body);
    font-weight: 800;
    font-size: 14px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.fz-short--more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px dashed rgba(255, 255, 255, 0.28);
    box-shadow: none;
    font-family: var(--fz-display);
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
}
.fz-short--more i { font-size: 44px; color: var(--fz-red); }
.fz-short--more::after { display: none; }
.fz-short--more:hover { background: rgba(255, 255, 255, 0.12); }
.fz-watch-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--fz-radius);
    padding: 28px;
}
.fz-watch-empty p { margin: 0; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.fz-admin-note { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }

/* ---------- Meet the bros ---------- */
.fz-bros { padding-top: 170px; }         /* room for the perks drips */
.fz-bros-heading { max-width: 760px; margin-bottom: 32px; }
.fz-bro-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fz-bro {
    position: relative;
    display: block;
    min-height: 460px;
    border: 4px solid var(--bro, var(--fz-blue));
    border-radius: var(--fz-radius-lg, 24px);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
    background: color-mix(in srgb, var(--bro, var(--fz-blue)) 70%, #000);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, var(--fz-shadow-lg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.fz-bro:hover { transform: translateY(-6px); }
.fz-bro--blue   { --bro: var(--fz-blue); }
.fz-bro--red    { --bro: var(--fz-red); }
.fz-bro--yellow { --bro: var(--fz-yellow); }
.fz-bro-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
    transition: transform 0.5s ease;
}
.fz-bro:hover .fz-bro-photo { transform: scale(1.04); }
/* out-of-costume reveal */
.fz-bro-photo--alt { opacity: 0; transition: opacity 0.45s ease, transform 0.5s ease; }
.fz-bro.is-flipped .fz-bro-photo--alt { opacity: 1; }
@media (hover: hover) {
    .fz-bro:hover .fz-bro-photo--alt { opacity: 1; }
}
.fz-bro-flip {
    position: absolute;
    right: 16px; top: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(11, 31, 46, 0.6);
    color: #fff;
    font-family: var(--fz-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.15s;
}
.fz-bro-flip:hover, .fz-bro.is-flipped .fz-bro-flip { background: var(--fz-red); border-color: var(--fz-red); }
.fz-bro-flip i { font-size: 11px; }
.fz-bro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, color-mix(in srgb, var(--bro) 55%, rgba(11, 31, 46, 0.95)) 0%, rgba(11, 31, 46, 0.55) 42%, rgba(11, 31, 46, 0) 70%);
}
.fz-bro-text {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 28px 26px 26px;
}
.fz-bro-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 100px;
    margin-bottom: 12px;
    color: var(--fz-ink);
}
.fz-bro--blue   .fz-bro-chip { background: #8fd0ff; }
.fz-bro--red    .fz-bro-chip { background: #ffb3b3; }
.fz-bro--yellow .fz-bro-chip { background: var(--fz-yellow); }
.fz-bro h4 {
    font-family: var(--fz-display);
    font-size: 44px;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.fz-bro p {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    max-width: 90%;
}
.fz-bro-arrow {
    position: absolute;
    right: 22px; bottom: 22px;
    z-index: 2;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--fz-ink);
    display: grid;
    place-items: center;
    font-size: 15px;
    transition: transform 0.15s, background 0.15s;
}
.fz-bro:hover .fz-bro-arrow { transform: translateX(3px); background: var(--fz-yellow); }
/* No photo at all: keep the colour block readable */
.fz-bro--empty { background: var(--bro); }
.fz-bro--empty::after { background: linear-gradient(to top, rgba(11, 31, 46, 0.55), rgba(11, 31, 46, 0)); }
.fz-bro--empty.fz-bro--yellow h4, .fz-bro--empty.fz-bro--yellow p { color: var(--fz-ink); }

/* ---------- Backyard — drifting polaroid rows ---------- */
.fz-yard { padding: 60px 0 80px; overflow: hidden; }
.fz-yard .fz-section-head { margin-bottom: 30px; }
.fz-yard-rows { display: grid; gap: 26px; }
.fz-yard-row {
    display: flex;
    width: max-content;
    animation: fz-marquee 70s linear infinite;
}
.fz-yard-row--reverse { animation-direction: reverse; animation-duration: 82s; }
.fz-yard-rows:hover .fz-yard-row { animation-play-state: paused; }
.fz-yard-set { display: flex; gap: 26px; padding-right: 26px; }
@keyframes fz-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.fz-yard-card {
    flex: 0 0 auto;
    width: 250px;
    margin: 18px 0;
    padding: 10px 10px 40px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 16px 36px rgba(11, 31, 46, 0.18);
    transform: rotate(var(--tilt, 0deg));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fz-yard-card:hover { transform: rotate(0) scale(1.06); box-shadow: 0 26px 50px rgba(11, 31, 46, 0.28); z-index: 2; }
.fz-yard-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.fz-yard-card figcaption {
    position: absolute;
    left: 12px; right: 12px; bottom: 10px;
    font-family: var(--fz-marker);
    font-size: 15px;
    color: var(--fz-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fz-yard-card { position: relative; }
@media (prefers-reduced-motion: reduce) {
    .fz-yard-row { animation: none; overflow-x: auto; width: 100%; }
}

/* ---------- Additional bros ---------- */
.fz-more { padding-top: 0; }
.fz-board + .fz-more, .fz-bros + .fz-more { padding-top: clamp(56px, 7vw, 96px); }
.fz-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fz-more-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fz-more-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.fz-more-card {
    --bro: #0f2a3b;
    position: relative;
    display: block;
    min-height: 380px;
    border: 4px solid var(--bro);
    border-radius: var(--fz-radius-lg, 24px);
    overflow: hidden;
    color: #fff;
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--bro) 70%, #fff 30%) 0%, var(--bro) 55%, color-mix(in srgb, var(--bro) 70%, #000 30%) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, var(--fz-shadow-lg);
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fz-more-card:hover { transform: translateY(-6px); box-shadow: var(--fz-shadow-lg); }
.fz-more-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; transition: transform 0.5s ease; }
.fz-more-card:hover .fz-more-photo { transform: scale(1.04); }
.fz-more-card.has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, color-mix(in srgb, var(--bro) 55%, rgba(11, 31, 46, 0.95)) 0%, rgba(11, 31, 46, 0.55) 42%, rgba(11, 31, 46, 0) 70%);
}
/* CSS cup for bros without a photo yet */
.fz-more-cup {
    position: absolute;
    left: 50%; top: 34px;
    width: 150px; height: 250px;
    transform: translateX(-50%);
    z-index: 0;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
    transition: transform 0.3s ease;
}
.fz-more-card:hover .fz-more-cup { transform: translateX(-50%) translateY(-6px) rotate(-3deg); }
.fz-more-cup-body {
    position: absolute;
    left: 18px; top: 84px;
    width: 114px; height: 160px;
    border-radius: 12px 12px 30px 30px;
    background: color-mix(in srgb, var(--bro) 80%, #fff 20%);
    border: 5px solid rgba(255, 255, 255, 0.4);
    display: grid;
    place-items: center;
    font-size: 44px;
    color: rgba(255, 255, 255, 0.8);
}
.fz-more-cup-slush {
    position: absolute;
    left: 14px; top: 44px;
    width: 122px; height: 66px;
    border-radius: 60% 60% 20% 20%;
    background: color-mix(in srgb, var(--bro) 65%, #fff 35%);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.18);
}
.fz-more-cup-lid {
    position: absolute;
    left: 10px; top: 96px;
    width: 130px; height: 14px;
    border-radius: 8px;
    background: #f2f2ef;
    border: 4px solid #d6d7d6;
}
.fz-more-cup-straw {
    position: absolute;
    left: 76px; top: 0;
    width: 16px; height: 70px;
    background: #e83535;
    border: 3px solid #fff;
    border-radius: 6px;
    transform: rotate(3deg);
}
.fz-more-card--soon {
    --bro: #35485a;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 12px, transparent 12px 24px), linear-gradient(180deg, #2c3f52, #16232e);
    border: 2px dashed rgba(255, 255, 255, 0.28);
    box-shadow: none;
}
.fz-more-card--soon .fz-more-cup { opacity: 0.55; filter: grayscale(0.4) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35)); }
.fz-more-text {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fz-more-chip {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--fz-ink);
}
.fz-more-card--soon .fz-more-chip { background: var(--fz-yellow); }
.fz-more-name { font-family: var(--fz-display); font-size: 38px; line-height: 0.95; text-transform: uppercase; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); }
.fz-more-line { font-size: 13px; font-weight: 700; line-height: 1.35; color: rgba(255, 255, 255, 0.85); }

/* ---------- Shop grid ---------- */
.fz-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.fz-product {
    position: relative;
    display: block;
    background: var(--fz-surface);
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius);
    padding: 12px;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fz-product:hover { transform: translateY(-4px); box-shadow: var(--fz-shadow-lg); }
.fz-product-art {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--fz-surface-2);
    border-radius: 12px;
    overflow: hidden;
}
.fz-product-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.fz-product:hover .fz-product-art img { transform: scale(1.04); }
.fz-product-art .print-panel { position: absolute; inset: 0; }
.fz-product-tag {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    background: var(--fz-yellow);
    color: var(--fz-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 100px;
}
.fz-product-sold {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: rgba(11, 31, 46, 0.55);
    color: #fff;
    font-family: var(--fz-display);
    font-size: 30px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fz-product-body { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 6px 6px; }
.fz-product-body { flex-direction: column; align-items: stretch; gap: 8px; }
.fz-product h3,
.fz-product h4 {
    font-family: var(--fz-display);
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0;
    color: var(--fz-ink);
    /* two lines, always → prices line up across the row */
    min-height: 2.1em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fz-product-price { font-family: var(--fz-display); font-size: 22px; letter-spacing: 0.06em; white-space: nowrap; color: var(--fz-red); }

/* ---------- Join / signup ---------- */
.fz-join {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    color: #fff;
    background: linear-gradient(120deg, var(--fz-navy) 0%, #0d3450 50%, var(--fz-blue) 120%);
}
.fz-join-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.fz-join .fz-section-title { font-size: clamp(34px, 4.6vw, 64px); margin: 0; color: #fff; }
/* with a photo: portrait on the left, heading + form stacked on the right */
.fz-join-copy { display: contents; }                       /* no photo: heading | form side by side */
.fz-join--photo .fz-join-grid { grid-template-columns: 0.72fr 1.28fr; gap: 56px; }
.fz-join--photo .fz-join-copy { display: grid; gap: 28px; }  /* with photo: heading over form */
.fz-join-photo {
    position: relative;
    margin: -110px 0 -110px;          /* pokes out of the band top and bottom */
    aspect-ratio: 3 / 4.4;
    border-radius: var(--fz-radius);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    transform: rotate(-2deg);
    z-index: 2;
}
.fz-join-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.fz-join-photo figcaption {
    position: absolute;
    left: 16px; bottom: 16px;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--fz-ink);
    font-family: var(--fz-display);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fz-join--photo { overflow: visible; padding: 100px 0; }
.fz-join .fz-eyebrow { color: var(--fz-yellow); }
.fz-join .signup-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}
.fz-join .signup-form input {
    min-height: 54px;
    border: 0;
    border-radius: 100px;
    padding: 0 22px;
    font-size: 16px;
    font-family: var(--fz-body);
    background: #fff;
    color: var(--fz-ink);
    width: 100%;
}
.fz-join .signup-form input::placeholder { color: #7a8a93; }
.fz-join .signup-message { margin-top: 12px; font-weight: 700; font-size: 14px; min-height: 1em; }
.fz-join .signup-message.error { color: #ffd0d0; }
.fz-join .signup-message.success { color: var(--fz-yellow); }
.fz-join-note { grid-column: 1 / -1; margin: 8px 0 0 22px; color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 600; }

/* =====================================================================
   STUDIO PAGE (page-studio.php) — the watch hub
   ===================================================================== */
.fz-studio-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 72px 0 80px;
    background: radial-gradient(120% 90% at 85% 10%, rgba(214, 40, 40, 0.55) 0%, rgba(214, 40, 40, 0) 55%),
                linear-gradient(160deg, var(--fz-navy) 0%, #0d3450 55%, var(--fz-blue) 140%);
}
.fz-studio-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 56px;
    align-items: center;
}
.fz-studio-hero .fz-eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 8px 14px 8px 10px;
    border-radius: 100px;
    margin-bottom: 22px;
}
.fz-studio-title {
    font-family: var(--fz-display);
    font-size: clamp(64px, 8vw, 128px);
    line-height: 0.88;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.fz-studio-tagline { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.85); max-width: 520px; margin: 0 0 8px; line-height: 1.5; }
.fz-studio-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 6px; }
.fz-studio-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    min-width: 140px;
}
.fz-studio-stat strong { font-family: var(--fz-display); font-size: 34px; line-height: 1; color: var(--fz-yellow); letter-spacing: 0.02em; }
.fz-studio-stat span { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.fz-studio-hero .fz-hero-actions { margin-top: 26px; }
.fz-studio-hero-reel { display: flex; justify-content: center; }
.fz-studio-top {
    position: relative;
    display: block;
    width: min(100%, 360px);
    aspect-ratio: 9 / 16;
    border-radius: 26px;
    overflow: hidden;
    background: #000;
    border: 2px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    transform: rotate(2deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fz-studio-top:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 40px 80px rgba(214, 40, 40, 0.35); }
.fz-studio-top img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fz-studio-top .studio-reel-badge { top: 16px; left: 16px; font-size: 11px; padding: 6px 12px; }
.fz-studio-top-play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--fz-red);
    color: #fff;
    display: grid; place-items: center;
    font-size: 24px;
    padding-left: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease;
}
.fz-studio-top:hover .fz-studio-top-play { transform: translate(-50%, -50%) scale(1.08); }
.fz-studio-top-meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 60px 18px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fz-studio-top-title { font-family: var(--fz-display); font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.fz-studio-top-views { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fz-yellow); }

.fz-studio-section {
    color: #fff;
    background: linear-gradient(180deg, var(--fz-navy) 0%, #0d2233 100%);
}
.fz-studio-section--alt { background: linear-gradient(180deg, #0d2233 0%, var(--fz-navy) 100%); }
.fz-studio-section .fz-eyebrow { color: var(--fz-yellow); }
.fz-studio-section .fz-section-title { color: #fff; }
.fz-studio-section .fz-text-link { color: rgba(255, 255, 255, 0.8); }
.fz-studio-section .fz-text-link:hover { color: var(--fz-yellow); }
.fz-studio-section .fz-shorts-grid { gap: 16px; }
.fz-studio-section .studio-reel-art { border-radius: var(--fz-radius); border-color: rgba(255, 255, 255, 0.1); }
.fz-studio-section .studio-reel-title { color: #fff; }
.fz-studio-section .studio-reel-date { color: rgba(255, 255, 255, 0.6); display: inline-flex; align-items: center; gap: 6px; }
.fz-studio-section .studio-reel-date i { color: var(--fz-yellow); font-size: 10px; }
.fz-studio-section .fz-watch-empty p { color: rgba(255, 255, 255, 0.8); }

/* ---------- Reveal (uses the theme's IntersectionObserver in main.js) ---------- */
body.sb-frozen .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
body.sb-frozen .reveal.in { opacity: 1; transform: none; }

/* =====================================================================
   FOOTER (every page) — dark, matches the header
   ===================================================================== */
body.sb-frozen .site-footer {
    background: var(--fz-navy);
    border-top: 1px solid var(--fz-line-dark);
    padding: 64px 0 32px;
    color: rgba(255, 255, 255, 0.78);
}
body.sb-frozen .fz-footer-top {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1.2fr 0.9fr;
    gap: 36px;
    align-items: start;
    margin-bottom: 44px;
}
body.sb-frozen .fz-footer-brand p {
    max-width: 300px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    margin: 18px 0 0;
}
body.sb-frozen .fz-footer-brand .site-logo { height: 110px !important; max-height: 110px; width: auto; }
body.sb-frozen .footer-col h4 {
    font-family: var(--fz-display);
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 16px;
}
body.sb-frozen .footer-col ul { list-style: none; margin: 0; padding: 0; }
body.sb-frozen .footer-col li { margin: 0 0 10px; font-size: 14px; font-weight: 500; }
body.sb-frozen .footer-col li i { width: 18px; text-align: center; margin-right: 6px; color: rgba(255, 255, 255, 0.6); }
body.sb-frozen .footer-col a { color: rgba(255, 255, 255, 0.78); transition: color 0.15s; }
body.sb-frozen .footer-col a:hover { color: var(--fz-yellow); }
body.sb-frozen .footer-col a:hover i { color: var(--fz-yellow); }
body.sb-frozen .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 20px 0;
    border-top: 1px solid var(--fz-line-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.sb-frozen .footer-legal a { color: rgba(255, 255, 255, 0.55); }
body.sb-frozen .footer-legal a:hover { color: #fff; }
body.sb-frozen .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--fz-line-dark);
    font-family: var(--fz-body);
    font-size: 12px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}
body.sb-frozen .footer-bottom em { font-family: var(--fz-marker); font-style: normal; color: var(--fz-yellow); }
body.sb-frozen .fz-signoff {
    font-family: var(--fz-display);
    font-size: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fz-yellow);
    line-height: 1;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
    .fz-bro h4 { font-size: 38px; }
    .fz-bro { min-height: 400px; }
}

@media (max-width: 1000px) {
    .fz-hero-grid { grid-template-columns: 1fr; min-height: 0; }
    .fz-hero { padding: 64px 0 40px; }
    .fz-lineup { max-width: 640px; margin: 0 auto; width: 100%; }
    /* image mode, tablet + phone: banner on top, copy below it, then the lineup */
    .fz-hero-bg { aspect-ratio: 1.6 / 1; background-position: 50% top; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 38%, transparent 100%); }
    .fz-hero-bg::before { display: none; }
    .fz-hero-bg::after { height: 60%; }
    .fz-hero--image .fz-hero-copy { padding-top: calc(100vw / 1.6 - 150px); }
    .fz-hero--image .fz-lineup { padding-top: 0; }
    .fz-hero--image .fz-hero-tag { font-size: clamp(40px, 8vw, 64px); }
    .fz-collage { height: 480px; max-width: 620px; margin: 10px auto 0; width: 100%; }
    .fz-hero-scribble { display: none; }
    .fz-drops-empty { grid-template-columns: 1fr; }
    .fz-perks-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
    .fz-perk:nth-child(2) { border-right: 0; padding-right: 0; }
    .fz-shorts-track > * { flex-basis: calc((100% - 2 * 16px) / 3); }
    .fz-shorts-nav { display: none; }
    .fz-shorts-grid, .fz-studio-section .studio-reels-grid { grid-template-columns: repeat(3, 1fr); }
    .fz-bro-panels { grid-template-columns: 1fr 1fr; }
    .fz-bro:last-child { grid-column: 1 / -1; min-height: 320px; }
    .fz-more-grid, .fz-more-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .fz-shop-grid { grid-template-columns: repeat(2, 1fr); }
    .fz-join-grid, .fz-join--photo .fz-join-grid { grid-template-columns: 1fr; gap: 30px; }
    .fz-join-photo { margin: -40px auto 0; max-width: 340px; width: 100%; aspect-ratio: 3 / 3.6; }
    .fz-join--photo { padding: 80px 0 70px; }
    .fz-studio-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .fz-studio-hero-reel { justify-content: flex-start; }
    .fz-studio-section .studio-reels-grid { grid-template-columns: repeat(3, 1fr); }
    body.sb-frozen .fz-footer-top { grid-template-columns: 1fr 1fr; }
    body.sb-frozen .fz-footer-brand { grid-column: 1 / -1; }
}

/* Header: mobile drawer (matches main.js: body.menu-open + 960px breakpoint) */
@media (max-width: 960px) {
    body.sb-frozen .fz-nav { grid-template-columns: 1fr auto; height: 72px; }
    body.sb-frozen .fz-header-cta { display: none; }
    body.sb-frozen .nav-toggle { display: inline-flex; position: relative; z-index: 60; }
    body.sb-frozen .primary-nav {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: block;
        overflow: auto;
        background: var(--fz-navy);
        transform: translateY(-100%);
        transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
        pointer-events: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    body.sb-frozen.menu-open .primary-nav { transform: translateY(0); pointer-events: auto; }
    body.sb-frozen.menu-open { overflow: hidden; }
    body.sb-frozen .primary-nav .nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 100px 28px 48px;
        font-family: var(--fz-display);
        font-size: clamp(44px, 10vw, 72px);
        font-weight: 400;
        letter-spacing: 0.01em;
        line-height: 0.95;
    }
    body.sb-frozen .primary-nav .nav-links a { color: #fff; padding: 6px 0; line-height: 0.95; background: none; border-radius: 0; }
    body.sb-frozen .primary-nav .nav-links a:hover { color: var(--fz-yellow); }
    body.sb-frozen .primary-nav .nav-links { padding-bottom: 24px; }
    body.sb-frozen .fz-drawer-foot { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 28px 48px; }
    body.sb-frozen .fz-drawer-foot .fz-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
    /* while the drawer is open the bars above the header must not paint over it */
    body.sb-frozen.menu-open .announce-bar,
    body.sb-frozen.menu-open .promo-bar { z-index: 0; }
    body.sb-frozen .cart-pill { padding: 0 12px; font-size: 12px; }
    body.sb-frozen .site-header .site-logo { height: 52px !important; max-height: 52px; }
    body.sb-frozen .fz-footer-brand .site-logo { height: 84px !important; max-height: 84px; }
}

@media (max-width: 680px) {
    .fz-hero { padding: 48px 0 36px; }
    .fz-hero-bg { aspect-ratio: 1.15 / 1; background-position: 52% top; }
    .fz-hero--image .fz-hero-copy { padding-top: calc(100vw / 1.15 - 170px); }
    .fz-hero--image .fz-eyebrow { margin-bottom: 16px; }
    .fz-hero--image .fz-hero-tag { font-size: clamp(40px, 11vw, 60px); }
    .fz-hero--image .fz-hero-sub { font-size: 16px; }
    .fz-hero--image .fz-hero-stat { margin-top: 16px; }
    .fz-hero--image .fz-hero-actions { margin-top: 20px; }
    .fz-lineup { gap: 8px; padding-top: 24px; }
    .fz-lineup-card { border-radius: 14px; }
    .fz-lineup-card:nth-child(2) { transform: translateY(-14px) scale(1.06); }
    .fz-lineup-name { font-size: 14px; left: 6px; right: 6px; bottom: 8px; }
    .fz-drops { padding-top: 120px; }
    .fz-watch { padding-top: 140px; }
    .fz-hero-title { font-size: clamp(64px, 19vw, 96px); }
    .fz-hero-actions { flex-direction: column; align-items: stretch; }
    .fz-hero-actions .fz-btn { width: 100%; }
    .fz-collage { height: 380px; }
    .fz-collage .fz-photo { width: 54%; }
    .fz-collage .fz-photo:nth-child(1) { left: 23%; top: 0; }
    .fz-collage .fz-photo:nth-child(2) { left: 0; top: 20%; transform: rotate(-5deg) scale(0.8); }
    .fz-collage .fz-photo:nth-child(3) { right: 0; top: 24%; transform: rotate(5deg) scale(0.8); }
    .fz-hero-sticker { left: 2%; bottom: 0; font-size: 13px; padding: 8px 12px; }
    .fz-photo-caption { font-size: 11px; padding: 6px 10px; }
    .fz-drops { padding-top: 56px; }
    .fz-chip { height: 36px; padding: 0 12px; font-size: 12px; }
    .fz-section { padding: 60px 0; }
    .fz-section-title { font-size: clamp(36px, 11vw, 52px); }
    .fz-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .fz-perks { padding: 36px 0 64px; }
    .fz-perk h4 { font-size: 24px; }
    .fz-perk p { font-size: 15px; }
    .fz-flavors { margin-top: 32px; }
    .fz-flavor { width: 84px; }
    .fz-flavor-pic { width: 66px; height: 66px; font-size: 24px; }
    .fz-flavor-name { font-size: 13px; }
    .fz-flavors-set { gap: 22px; padding-right: 22px; }
    .fz-perks-grid { grid-template-columns: 1fr; gap: 22px; }
    .fz-perk { border-right: 0; padding-right: 0; }
    .fz-shorts-track > * { flex-basis: 62%; }
    .fz-shorts-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fz-bro-panels { grid-template-columns: 1fr; }
    .fz-more-grid, .fz-more-grid--3, .fz-more-grid--2 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .fz-more-card { min-height: 280px; }
    .fz-more-name { font-size: 26px; }
    .fz-more-cup { transform: translateX(-50%) scale(0.7); transform-origin: top; }
    .fz-yard-card { width: 190px; padding: 7px 7px 30px; }
    .fz-yard-card figcaption { font-size: 12px; }
    .fz-hero-stat strong { font-size: 22px; }
    .fz-hero-stat em { display: none; }
    .fz-bro, .fz-bro:last-child { min-height: 360px; }
    .fz-bro h4 { font-size: 40px; }
    .fz-shop-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .fz-product { padding: 8px; }
    .fz-product h3, .fz-product h4 { font-size: 17px; }
    .fz-product-price { font-size: 14px; }
    .fz-product-body { padding: 12px 4px 4px; }
    .fz-join .signup-form { grid-template-columns: 1fr; }
    .fz-join-photo { max-width: 260px; aspect-ratio: 3 / 3.4; }
    .fz-studio-section .studio-reels-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fz-studio-top { width: min(100%, 300px); }
    .fz-join .signup-form .fz-btn { width: 100%; }
    .fz-join-note { margin-left: 0; }
    body.sb-frozen .fz-footer-top { grid-template-columns: 1fr; gap: 28px; }
    body.sb-frozen .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   FOLLOW PAGE (page-follow.php)
   ============================================================ */
.fz-follow-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    text-align: center;
    padding: 80px 0 72px;
    background: radial-gradient(120% 90% at 85% 10%, rgba(214, 40, 40, 0.55) 0%, rgba(214, 40, 40, 0) 55%),
                radial-gradient(90% 70% at 10% 90%, rgba(239, 191, 47, 0.35) 0%, rgba(239, 191, 47, 0) 55%),
                linear-gradient(160deg, var(--fz-navy) 0%, #0d3450 55%, var(--fz-blue) 140%);
}
.fz-follow-hero .fz-eyebrow { color: var(--fz-yellow); justify-content: center; }
.fz-follow-title {
    font-family: var(--fz-display);
    font-size: clamp(52px, 8vw, 112px);
    line-height: 0.92;
    text-transform: uppercase;
    margin: 10px auto 18px;
    max-width: 12ch;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.fz-follow-deck {
    max-width: 52ch;
    margin: 0 auto;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.fz-follow-hero .fz-studio-stats { justify-content: center; margin-top: 28px; }
.fz-follow-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.fz-follow-hero-actions .fz-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

.fz-follow { padding: 64px 0 40px; }
.fz-follow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.fz-follow-card {
    --brand: var(--fz-red);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 28px 26px;
    background: #fff;
    color: var(--fz-ink);
    border-radius: var(--fz-radius-lg, 24px);
    box-shadow: var(--fz-shadow);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fz-follow-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: var(--brand);
}
.fz-follow-card:hover { transform: translateY(-6px); box-shadow: var(--fz-shadow-lg); }
.fz-follow-card-icon {
    width: 64px; height: 64px;
    border-radius: 20px;
    display: grid; place-items: center;
    font-size: 30px;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 40%, transparent);
}
.fz-follow-card--instagram .fz-follow-card-icon { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); }
.fz-follow-card-name {
    font-family: var(--fz-display);
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.fz-follow-card-handle { font-weight: 800; color: var(--brand); font-size: 15px; letter-spacing: 0.02em; margin-top: -8px; }
.fz-follow-card--tiktok .fz-follow-card-handle, .fz-follow-card--x .fz-follow-card-handle, .fz-follow-card--threads .fz-follow-card-handle { color: var(--fz-blue); }
.fz-follow-card-blurb { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(11, 31, 46, 0.72); flex: 1; }
.fz-follow-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 12px 20px;
    border-radius: 100px;
    background: var(--fz-ink);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.2s ease, gap 0.2s ease;
}
.fz-follow-card:hover .fz-follow-card-cta { background: var(--brand); gap: 14px; }
.fz-follow-card--tiktok:hover .fz-follow-card-cta, .fz-follow-card--x:hover .fz-follow-card-cta, .fz-follow-card--threads:hover .fz-follow-card-cta { background: var(--fz-blue); }

/* Featured YouTube card: full red, two columns wide */
.fz-follow-card--featured {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--fz-red) 0%, #a81c1c 100%);
    color: #fff;
    padding: 34px 36px 32px;
}
.fz-follow-card--featured::before { display: none; }
.fz-follow-card--featured .fz-follow-card-icon { background: #fff; color: var(--fz-red); box-shadow: none; }
.fz-follow-card--featured .fz-follow-card-name { font-size: clamp(40px, 4vw, 56px); }
.fz-follow-card--featured .fz-follow-card-handle { color: var(--fz-yellow); }
.fz-follow-card--featured .fz-follow-card-blurb { color: rgba(255, 255, 255, 0.86); font-size: 18px; max-width: 46ch; }
.fz-follow-card--featured .fz-follow-card-cta { background: #fff; color: var(--fz-red); }
.fz-follow-card--featured:hover .fz-follow-card-cta { background: var(--fz-yellow); color: var(--fz-ink); }
.fz-follow-card-stats { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 4px; }
.fz-follow-card-stats strong { display: block; font-family: var(--fz-display); font-size: 34px; line-height: 1; }
.fz-follow-card-stats span { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.fz-follow-card--featured .fz-follow-card-mark {
    position: absolute;
    right: -20px; bottom: -40px;
    font-size: 220px;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.fz-follow-watch { padding: 24px 0 72px; }
.fz-follow-watch .fz-shorts-grid { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 960px) {
    .fz-follow-hero { padding: 60px 0 56px; }
    .fz-follow-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .fz-follow-card { padding: 24px 22px 22px; }
    .fz-follow-watch .fz-shorts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .fz-follow { padding: 40px 0 24px; }
    .fz-follow-grid { grid-template-columns: 1fr; }
    .fz-follow-card--featured { grid-column: auto; padding: 28px 24px 26px; }
    .fz-follow-card--featured .fz-follow-card-mark { font-size: 160px; }
    .fz-follow-card-name { font-size: 30px; }
    .fz-follow-watch { padding: 16px 0 56px; }
    .fz-follow-watch .fz-shorts-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}


/* ============================================================
   VIRAL SHIRTS (homepage #viral + landing pages)
   ============================================================ */
.fz-viral-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fz-viral-grid--1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.fz-viral-grid--2 { grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; }
.fz-viral-card {
    display: flex;
    flex-direction: column;
    background: var(--fz-surface);
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius-lg, 24px);
    overflow: hidden;
    box-shadow: var(--fz-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fz-viral-card:hover { transform: translateY(-6px); box-shadow: var(--fz-shadow-lg); }
.fz-viral-art {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--fz-surface-2);
    overflow: hidden;
}
.fz-viral-art img, .fz-viral-art .print-panel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.fz-viral-card:hover .fz-viral-art img { transform: scale(1.04); }
.fz-viral-views {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    border-radius: 100px;
    background: var(--fz-navy);
    color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.fz-viral-views i { color: var(--fz-red); }
.fz-viral-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.fz-viral-title {
    font-family: var(--fz-display);
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    /* exactly two lines, always → every price row sits at the same height */
    height: 2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.fz-viral-title a { color: inherit; text-decoration: none; }
.fz-viral-note { margin: 0; color: var(--fz-muted); font-size: 15px; line-height: 1.5; }
.fz-viral-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; }
.fz-viral-price { font-family: var(--fz-display); font-size: 30px; line-height: 1; letter-spacing: 0.02em; color: var(--fz-red); }
.fz-viral-btn { padding: 12px 20px; font-size: 14px; }
.fz-viral-video {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--fz-blue); text-decoration: none;
}
.fz-viral-video i { font-size: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--fz-blue); color: #fff; display: grid; place-items: center; padding-left: 2px; }
.fz-viral-video:hover { color: var(--fz-red); }
.fz-viral-video:hover i { background: var(--fz-red); }
.fz-viral-card--video .fz-viral-art img { object-fit: cover; }
.fz-viral-play {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--fz-red); color: #fff;
    display: grid; place-items: center; font-size: 20px; padding-left: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.fz-viral-price--soon { color: var(--fz-muted); font-size: 22px; }
.fz-viral-more { display: flex; justify-content: center; margin-top: 32px; }
.fz-viral-more .fz-btn--outline { color: var(--fz-ink); border-color: var(--fz-ink); }
.fz-viral-more .fz-btn--outline:hover { background: var(--fz-ink); color: #fff; }
.fz-viral--land { padding-top: 88px; }

/* Landing page hero: one shirt */
.fz-land {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 72px 0 80px;
    background: radial-gradient(120% 90% at 85% 10%, rgba(214, 40, 40, 0.55) 0%, rgba(214, 40, 40, 0) 55%),
                linear-gradient(160deg, var(--fz-navy) 0%, #0d3450 55%, var(--fz-blue) 140%);
}
.fz-land-grid { display: grid; grid-template-columns: 1.15fr 360px; gap: 64px; align-items: center; }
.fz-land-grid--novideo { grid-template-columns: 1fr; }
.fz-land .fz-land-phone { justify-self: end; margin: 0; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); }
.fz-land .fz-land-buy { margin-top: 28px; }
.fz-land .fz-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.fz-land-note { margin-top: 0; }

/* The shirt from this video */
.fz-land--drop { margin-bottom: 48px; }
.fz-land--drop + .single-drop { padding-top: 0; }
.fz-land-shop { padding: 88px 0 40px; background: var(--fz-bg); }
.fz-land-product {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: center;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius-lg, 24px);
    box-shadow: var(--fz-shadow-lg);
}
.fz-land-product .fz-land-art { transform: rotate(-2deg); padding: 0; background: var(--fz-surface-2); box-shadow: var(--fz-shadow); }
.fz-land-product .fz-land-art:hover { transform: rotate(0) translateY(-6px); }
.fz-land-product-title { font-family: var(--fz-display); font-size: clamp(36px, 4vw, 64px); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 16px; }
.fz-land-product-title a { color: var(--fz-ink); text-decoration: none; }
.fz-land-product-deck { color: var(--fz-muted); font-size: 17px; line-height: 1.55; margin: 0 0 8px; max-width: 46ch; }
.fz-land-product .fz-land-price { color: var(--fz-red); }
.fz-land-product .fz-land-buy { margin-top: 12px; }
.fz-land-perks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--fz-muted); font-size: 14px; font-weight: 700; }
.fz-land-perks i { color: var(--fz-red); margin-right: 4px; }
.fz-land .fz-eyebrow { color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); padding: 8px 14px 8px 10px; border-radius: 100px; margin-bottom: 26px; }
.fz-land-title {
    font-family: var(--fz-display);
    font-size: clamp(52px, 6.4vw, 104px);
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 24px;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.fz-land-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; }
.fz-land-price { font-family: var(--fz-display); font-size: clamp(40px, 4vw, 60px); line-height: 1; color: var(--fz-yellow); letter-spacing: 0.02em; }
.fz-land-btn { font-size: 17px; padding: 18px 30px; }
.fz-land-note { margin: 22px 0 0; font-family: var(--fz-marker, 'Permanent Marker', cursive); font-size: clamp(18px, 1.8vw, 24px); color: rgba(255, 255, 255, 0.9); max-width: 30ch; line-height: 1.3; transform: rotate(-1deg); }
.fz-land-stat { margin-top: 26px; }
.fz-land-art {
    position: relative;
    display: block;
    border-radius: var(--fz-radius-lg, 24px);
    overflow: hidden;
    background: #fff;
    padding: 12px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
    transform: rotate(2deg);
    transition: transform 0.3s ease;
}
.fz-land-art:hover { transform: rotate(0) translateY(-6px); }
.fz-land-art img, .fz-land-art .print-panel { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.fz-land-tag {
    position: absolute; right: 26px; top: 26px;
    padding: 10px 16px;
    border-radius: 100px;
    background: var(--fz-red);
    color: #fff;
    font-family: var(--fz-display);
    font-size: 26px;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(214, 40, 40, 0.4);
    transform: rotate(6deg);
}
body.sb-frozen #site-content .fz-land.has-bg { padding-top: clamp(130px, 16vw, 230px); }
body.sb-frozen #site-content .fz-land.has-bg .fz-land-art { transform: rotate(2deg); }

/* The video below: phone-shaped Short */
.fz-land-video { padding: 88px 0; background: var(--fz-bg); }
.fz-land-video-grid { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: center; }
.fz-land-video-copy .fz-section-title { margin-bottom: 14px; }
.fz-land-video-copy .fz-section-deck { margin-bottom: 26px; }
.fz-land-video-copy .fz-btn--outline { color: var(--fz-ink); border-color: var(--fz-ink); }
.fz-land-phone {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 36px;
    padding: 12px;
    background: var(--fz-navy);
    box-shadow: var(--fz-shadow-lg);
    justify-self: center;
    width: 100%;
    max-width: 360px;
}
.fz-land-phone iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 26px; background: #000; }

@media (max-width: 960px) {
    .fz-viral-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .fz-viral-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .fz-land-grid { grid-template-columns: 1fr; gap: 40px; }
    .fz-land .fz-land-phone { justify-self: center; }
    .fz-land-product { grid-template-columns: 1fr; gap: 28px; padding: 18px; }
    .fz-land-art { max-width: 460px; margin: 0 auto; width: 100%; }
    .fz-land-video-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
    .fz-viral { padding-top: 110px; }
    .fz-viral-grid, .fz-viral-grid--2, .fz-viral-grid--1 { grid-template-columns: 1fr; }
    .fz-viral-body { padding: 18px 18px 20px; }
    .fz-land { padding: 48px 0 56px; }
    .fz-land-title { font-size: clamp(44px, 12vw, 64px); }
    .fz-land-btn { width: 100%; justify-content: center; }
    .fz-land-video { padding: 56px 0; }
    .fz-bros { padding-top: 140px; }
}


/* ============================================================
   HELP US GO VIRAL
   ============================================================ */
.fz-viralhelp {
    color: #fff;
    background: radial-gradient(90% 70% at 90% 0%, rgba(214, 40, 40, 0.5) 0%, rgba(214, 40, 40, 0) 55%),
                radial-gradient(70% 60% at 0% 100%, rgba(239, 191, 47, 0.28) 0%, rgba(239, 191, 47, 0) 55%),
                linear-gradient(160deg, var(--fz-navy) 0%, #0d3450 70%, #0b5f98 140%);
}
.fz-viralhelp .fz-eyebrow { color: var(--fz-yellow); }
.fz-viralhelp .fz-section-title { color: #fff; }
.fz-viralhelp .fz-section-deck { color: rgba(255, 255, 255, 0.82); }
.fz-viralhelp-stat { align-self: flex-start; }
.fz-viralhelp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fz-viralhelp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 24px;
    border-radius: var(--fz-radius-lg, 24px);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.fz-viralhelp-num { font-family: var(--fz-display); font-size: 14px; letter-spacing: 0.16em; color: var(--fz-yellow); }
.fz-viralhelp-card h3 { font-family: var(--fz-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.fz-viralhelp-card p { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 15px; line-height: 1.55; flex: 1; }
.fz-viralhelp-card p strong { color: #fff; }
.fz-viralhelp-video {
    display: flex; align-items: center; gap: 12px;
    padding: 8px; border-radius: 14px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
}
.fz-viralhelp-video img { width: 52px; height: 68px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.fz-viralhelp-video i { color: var(--fz-red); margin-right: 4px; }
.fz-viralhelp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.fz-viralhelp-actions .fz-btn { padding: 12px 18px; font-size: 13px; }
.fz-viralhelp-actions .fz-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.fz-viralhelp-msg { min-height: 18px; font-size: 13px; font-weight: 700; color: var(--fz-yellow); }
@media (max-width: 960px) { .fz-viralhelp-grid { grid-template-columns: 1fr; } }


/* ============================================================
   BRO PROFILES (/bros/, /bros/{slug}/)
   ============================================================ */
.fz-profile { --bro: var(--fz-red); }
.fz-profile-hero, .fz-roster {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 72px 0 80px;
    background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--bro, #d62828) 55%, transparent) 0%, transparent 55%),
                linear-gradient(160deg, var(--fz-navy) 0%, #0d3450 55%, var(--fz-blue) 140%);
}
.fz-roster { text-align: center; }
.fz-roster .fz-eyebrow, .fz-profile-hero .fz-eyebrow { color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); padding: 8px 14px 8px 10px; border-radius: 100px; margin-bottom: 22px; }
.fz-roster .fz-land-note { margin: 0 auto; }
.fz-profile-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.fz-profile-name {
    font-family: var(--fz-display);
    font-size: clamp(80px, 12vw, 200px);
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 14px;
    color: var(--bro);
    text-shadow: 0 8px 0 rgba(0, 0, 0, 0.25), 0 20px 60px rgba(0, 0, 0, 0.45);
}
.fz-profile-role { font-family: var(--fz-display); font-size: clamp(22px, 2.6vw, 34px); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 18px; color: #fff; }
.fz-profile-flavor { color: var(--fz-yellow); }
.fz-profile-quote { margin: 0 0 14px; }
.fz-profile-played { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.75); }
/* Sales meter (profile hero) */
.fz-meter { margin-top: 26px; max-width: 520px; padding: 18px 20px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); }
.fz-meter-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fz-meter-stat { display: flex; align-items: baseline; gap: 8px; }
.fz-meter-stat strong { font-family: var(--fz-display); font-size: 40px; line-height: 0.9; letter-spacing: 0.06em; color: #fff; }
.fz-meter-stat--money strong { color: var(--fz-yellow); }
.fz-meter-stat span { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.fz-meter-bar { position: relative; height: 12px; margin-top: 14px; border-radius: 100px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.fz-meter-bar span { position: absolute; inset: 0 auto 0 0; min-width: 12px; border-radius: 100px; background: linear-gradient(90deg, var(--bro), var(--fz-yellow)); box-shadow: 0 0 18px color-mix(in srgb, var(--bro) 70%, transparent); transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fz-meter-note { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
/* one-line version on roster panels */
.fz-bro-sales { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; position: relative; z-index: 3; align-self: flex-start; }
.fz-bro-sales strong { font-family: var(--fz-display); font-size: 15px; letter-spacing: 0.08em; color: var(--fz-yellow); }
.fz-bro-sales em { font-style: normal; opacity: 0.5; }
.fz-bro-sales i { font-size: 11px; color: var(--fz-yellow); }
@media (max-width: 640px) { .fz-meter { padding: 14px 16px 14px; } .fz-meter-stat strong { font-size: 32px; } }
.fz-profile-played strong { color: #fff; }
.fz-profile-hero .fz-land-buy { margin-top: 26px; }
.fz-profile-hero .fz-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.fz-profile-portrait {
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--fz-radius-lg, 24px);
    overflow: hidden;
    background: color-mix(in srgb, var(--bro) 70%, #000);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
    transform: rotate(2deg);
    max-width: 460px;
    width: 100%;
    justify-self: end;
}
.fz-profile-portrait .fz-bro-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.fz-profile-badge {
    position: absolute; top: 18px; left: 18px; z-index: 3;
    font-family: var(--fz-display); font-size: 20px; letter-spacing: 0.1em;
    padding: 8px 14px; border-radius: 100px; background: #fff; color: var(--fz-ink);
}
.fz-profile-portrait .fz-bro-flip { z-index: 3; }

.fz-profile-file { background: var(--fz-bg); }
.fz-profile-grid { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px; align-items: start; }
.fz-profile-bio { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--fz-ink); margin-top: 18px; max-width: 62ch; }
.fz-profile-bio p { margin: 0 0 16px; }
.fz-profile-bio p:first-child::first-letter { font-family: var(--fz-display); font-size: 3.2em; float: left; line-height: 0.8; margin: 6px 10px 0 0; color: var(--bro); }
.fz-profile-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.fz-profile-list { padding: 22px; background: #fff; border: 1px solid var(--fz-line); border-radius: var(--fz-radius); box-shadow: var(--fz-shadow); }
.fz-profile-list h3 { font-family: var(--fz-display); font-size: 22px; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.fz-profile-list h3 i { color: var(--bro); }
.fz-profile-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fz-profile-list li { padding-left: 18px; position: relative; font-size: 15px; line-height: 1.45; color: var(--fz-ink); }
.fz-profile-list li::before { content: "★"; position: absolute; left: 0; top: 0; color: var(--bro); font-size: 12px; line-height: 1.6; }
.fz-profile-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; margin-top: 28px; padding: 22px 24px; border-radius: var(--fz-radius); background: var(--fz-navy); color: #fff; }
.fz-profile-facts div { display: flex; flex-direction: column; gap: 4px; }
.fz-profile-facts div:first-child { grid-column: 1 / -1; }
.fz-profile-facts span { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fz-yellow); }
.fz-profile-facts strong { font-size: 16px; line-height: 1.4; font-weight: 600; }
.fz-profile-stats { position: sticky; top: 100px; padding: 24px; background: #fff; border: 1px solid var(--fz-line); border-radius: var(--fz-radius-lg, 24px); box-shadow: var(--fz-shadow-lg); }
.fz-profile-stats ul { list-style: none; margin: 8px 0 0; padding: 0; }
.fz-profile-stats li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--fz-line); }
.fz-profile-stats li:last-child { border-bottom: 0; }
.fz-profile-stats li span { font-size: 14px; font-weight: 600; color: var(--fz-muted); }
.fz-profile-stats li strong { font-family: var(--fz-display); font-size: 24px; line-height: 1; letter-spacing: 0.02em; color: var(--bro); text-align: right; }
.fz-profile-stats-note { margin: 14px 0 0; font-family: var(--fz-marker); font-size: 14px; color: var(--fz-muted); transform: rotate(-1deg); }
.fz-profile-watch { padding-top: 88px; }

.fz-roster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.fz-roster-card {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 12px 18px;
    background: #fff;
    border: 1px solid var(--fz-line);
    border-radius: var(--fz-radius-lg, 24px);
    box-shadow: var(--fz-shadow);
    color: var(--fz-ink);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fz-roster-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--fz-shadow-lg); }
.fz-roster-art { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--bro) 75%, #000); }
.fz-roster-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.4s ease; }
.fz-roster-card:hover .fz-roster-art img { transform: scale(1.05); }
.fz-roster-num { position: absolute; top: 22px; left: 22px; font-family: var(--fz-display); font-size: 14px; letter-spacing: 0.12em; padding: 5px 10px; border-radius: 100px; background: #fff; color: var(--fz-ink); }
.fz-roster-name { font-family: var(--fz-display); font-size: 30px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 12px; padding: 0 6px; color: var(--bro); }
.fz-roster-line { font-size: 14px; color: var(--fz-muted); padding: 0 6px; }
.fz-roster-cta { margin-top: 8px; padding: 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fz-ink); }
.fz-profile-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; font-family: var(--fz-display); font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
.fz-profile-nav a { color: var(--fz-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 100px; border: 1.5px solid var(--fz-ink); }
.fz-profile-nav a:hover { background: var(--fz-ink); color: #fff; }
.about-trio-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bro-color, #d6202b); text-decoration: none; }
body.sb-frozen #site-content :is(.fz-profile-hero, .fz-roster).has-bg { padding-top: clamp(130px, 16vw, 230px); }

@media (max-width: 960px) {
    .fz-profile-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .fz-profile-portrait { justify-self: center; }
    .fz-profile-grid { grid-template-columns: 1fr; }
    .fz-profile-stats { position: static; }
}
@media (max-width: 640px) {
    .fz-profile-hero, .fz-roster { padding: 48px 0 56px; }
    .fz-profile-name { font-size: clamp(64px, 20vw, 110px); }
    .fz-profile-lists, .fz-profile-facts { grid-template-columns: 1fr; }
    .fz-roster-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fz-roster-name { font-size: 22px; }
    .fz-profile-nav { font-size: 16px; }
}


/* Big Anton numerals breathe: views, subscribers, prices, stats */
.fz-hero-stat strong, .fz-stat strong, .fz-studio-stat strong, .fz-follow-card-stats strong,
.fz-viralhelp-stat strong, .fz-land-stat strong, .fz-land-price, .fz-viral-price, .fz-profile-stats li strong,
.fz-short-views, .fz-viral-views, .fz-studio-top-views { letter-spacing: 0.06em; }
.fz-hero-stat strong, .fz-stat strong, .fz-studio-stat strong, .fz-viralhelp-stat strong, .fz-land-stat strong { margin-right: 2px; }

/* Sold by {bro} — 100% to them */
.fz-product-art .fz-product-bro { position: absolute; left: 12px; bottom: 12px; z-index: 2; margin: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.fz-product-art .fz-product-low { bottom: 46px; }
.fz-product-bro, .fz-viral-body .fz-product-bro {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    margin-bottom: 8px; padding: 4px 10px 4px 6px; border-radius: 100px;
    background: color-mix(in srgb, var(--bro, #d62828) 14%, #fff);
    color: var(--fz-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.fz-product-bro i { width: 10px; height: 10px; border-radius: 50%; background: var(--bro, #d62828); }
.fz-seller {
    display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
    margin: 18px 0 0; padding: 14px;
    border-radius: 18px; border: 1px solid var(--fz-line); background: #fff; color: var(--fz-ink);
    text-decoration: none; box-shadow: var(--fz-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fz-seller:hover { transform: translateY(-3px); box-shadow: var(--fz-shadow-lg); }
.fz-seller-art { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--bro) 75%, #000); }
.fz-seller-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.fz-seller-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fz-seller-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fz-muted); }
.fz-seller-eyebrow strong { color: var(--bro); font-family: var(--fz-display); font-size: 16px; letter-spacing: 0.06em; }
.fz-seller-line { font-size: 14px; line-height: 1.4; font-weight: 600; }
.fz-seller-cta { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fz-blue); }
.fz-seller-stamp { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bro); color: #fff; font-family: var(--fz-display); font-size: 18px; letter-spacing: 0.04em; transform: rotate(8deg); }
.fz-seller-stamp small { font-family: var(--fz-body); font-size: 8px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 640px) { .fz-seller { grid-template-columns: 56px 1fr; } .fz-seller-stamp { display: none; } }


/* ============================================================
   NAV: The Bros sub-menu (desktop dropdown, inline in the drawer)
   ============================================================ */
body.sb-frozen .nav-links > li.menu-item-has-children { position: relative; }
body.sb-frozen .fz-nav-caret { font-size: 9px; margin-left: 4px; opacity: 0.7; }
body.sb-frozen .nav-links .sub-menu {
    list-style: none; margin: 0; padding: 10px;
    position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%) translateY(6px);
    min-width: 220px;
    background: #fff; color: var(--fz-ink);
    border-radius: 16px; box-shadow: var(--fz-shadow-lg); border: 1px solid var(--fz-line);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 70;
}
body.sb-frozen .nav-links .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* hover bridge */
body.sb-frozen .nav-links > li:hover > .sub-menu,
body.sb-frozen .nav-links > li:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
body.sb-frozen .nav-links .sub-menu li { display: block; }
body.sb-frozen .nav-links .sub-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    color: var(--fz-ink); font-size: 14px; letter-spacing: 0.04em;
}
body.sb-frozen .nav-links .sub-menu a:hover { background: var(--fz-bg); color: var(--fz-ink); }
body.sb-frozen .fz-nav-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bro, var(--fz-red)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); flex: 0 0 auto; }
body.sb-frozen .nav-links .fz-nav-all a { margin-top: 4px; border-top: 1px solid var(--fz-line); border-radius: 0 0 10px 10px; color: var(--fz-red); font-size: 12px; }
@media (max-width: 960px) {
    /* in the drawer the parent stacks: big label on top, bro chips underneath */
    body.sb-frozen .primary-nav .nav-links > li.menu-item-has-children { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
    body.sb-frozen .nav-links .sub-menu {
        position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
        background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 4px 0 10px; min-width: 0; width: 100%;
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    }
    body.sb-frozen .nav-links .sub-menu::before { display: none; }
    body.sb-frozen .primary-nav .nav-links .sub-menu li { display: block; }
    body.sb-frozen .primary-nav .nav-links .sub-menu a {
        font-family: var(--fz-body); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
        color: #fff; padding: 10px 14px 10px 10px; border-radius: 100px;
        background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
    }
    body.sb-frozen .primary-nav .nav-links .sub-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
    body.sb-frozen .primary-nav .nav-links .fz-nav-all a { border: 0; margin: 0; background: none; padding-left: 2px; color: var(--fz-yellow); }
    body.sb-frozen .fz-nav-caret { display: none; }
}

/* ============================================================
   BUY A BRO'S SHIRT → 100% TO THAT BRO
   ============================================================ */
.fz-bromerch { background: var(--fz-bg); }
.fz-bromerch .fz-section-head { align-items: center; }
.fz-bromerch-stamp {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 112px; height: 112px; border-radius: 50%;
    background: var(--fz-red); color: #fff;
    font-family: var(--fz-display); font-size: 34px; letter-spacing: 0.04em; line-height: 1;
    transform: rotate(8deg); box-shadow: 0 16px 34px rgba(214, 40, 40, 0.35);
}
.fz-bromerch-stamp small { font-family: var(--fz-body); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; }
.fz-bromerch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.fz-bromerch-card {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 3px solid var(--bro);
    border-radius: var(--fz-radius-lg, 24px);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, var(--fz-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fz-bromerch-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, var(--fz-shadow-lg); }
/* art: flush to the top, tinted with the bro colour */
.fz-bromerch-art {
    display: block; position: relative; aspect-ratio: 4 / 4.4; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--bro) 28%, #fff) 0%, color-mix(in srgb, var(--bro) 10%, #fff) 60%, #fff 100%);
}
.fz-bromerch-art img, .fz-bromerch-art .print-panel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.fz-bromerch-card:hover .fz-bromerch-art img { transform: scale(1.05); }
.fz-bromerch-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 32%); pointer-events: none; }
.fz-bromerch-num, .fz-bromerch-price, .fz-bromerch-soon {
    position: absolute; top: 12px; z-index: 2;
    font-family: var(--fz-display); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 8px 12px; border-radius: 100px; background: #fff; color: var(--fz-ink);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.fz-bromerch-num { left: 12px; font-size: 14px; color: var(--bro); }
.fz-bromerch-price { right: 12px; font-size: 20px; letter-spacing: 0.06em; color: var(--fz-red); padding: 8px 14px; }
/* thawing: the bro's own photo, frosted */
.fz-bromerch-art--soon img { filter: grayscale(0.35) saturate(0.8); opacity: 0.5; }
.fz-bromerch-art--soon::after { background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 100%); }
.fz-bromerch-soon { right: 12px; font-size: 13px; color: var(--fz-blue); display: inline-flex; align-items: center; gap: 6px; }
.fz-bromerch-soon i { font-size: 11px; }
/* who gets paid: avatar hangs over the bottom edge of the art */
.fz-bromerch-bro { display: flex; align-items: flex-end; gap: 12px; padding: 0 16px; margin-top: -28px; position: relative; z-index: 3; color: var(--fz-ink); text-decoration: none; }
.fz-bromerch-face { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--bro) 75%, #000); flex: 0 0 auto; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--bro), 0 10px 20px rgba(0, 0, 0, 0.18); }
.fz-bromerch-face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.fz-bromerch-who { padding-bottom: 4px; min-width: 0; }
.fz-bromerch-bro strong { display: block; font-family: var(--fz-display); font-size: 24px; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bro); }
.fz-bromerch-bro small { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fz-muted); margin-top: 4px; }
.fz-bromerch-bro small i { color: var(--bro); font-size: 12px; }
.fz-bromerch-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; flex: 1; }
.fz-bromerch-body h3 { font-family: var(--fz-display); font-size: 20px; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; margin: 0; height: 2.1em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fz-bromerch-body h3 a { color: var(--fz-ink); text-decoration: none; }
.fz-bromerch-btn { margin-top: auto; justify-content: center; width: 100%; padding: 13px 16px; font-size: 13px; }
.fz-bromerch-card .fz-btn--primary { background: var(--bro); box-shadow: 0 10px 22px color-mix(in srgb, var(--bro) 35%, transparent); }
.fz-bromerch-card .fz-btn--primary:hover { background: color-mix(in srgb, var(--bro) 85%, #000); }
.fz-bromerch-card .fz-btn--outline { color: var(--fz-ink); border-color: var(--fz-line); }
.fz-bromerch-card .fz-btn--outline:hover { border-color: var(--bro); color: var(--bro); }
.fz-bromerch-card--soon { background: var(--fz-surface); }
@media (max-width: 960px) { .fz-bromerch-stamp { display: none; } }
@media (max-width: 640px) {
    .fz-bromerch-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fz-bromerch-bro { padding: 0 12px; gap: 10px; margin-top: -24px; }
    .fz-bromerch-face { width: 50px; height: 50px; }
    .fz-bromerch-bro strong { font-size: 20px; }
    .fz-bromerch-bro small { font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; }
    .fz-bromerch-body { padding: 10px 12px 12px; }
    .fz-bromerch-body h3 { font-size: 17px; }
    .fz-bromerch-btn { padding: 11px 12px; font-size: 12px; }
    .fz-bromerch-price { font-size: 17px; }
}


/* Roster page — big cards */
.fz-roster-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.fz-roster-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.fz-roster-jump a:hover { background: #fff; color: var(--fz-ink); }
.fz-roster-jump .fz-nav-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bro); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.fz-roster-grid--big { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fz-roster-card--big { padding: 12px 12px 18px; gap: 0; border-top: 6px solid var(--bro); }
.fz-roster-card--big:hover { transform: translateY(-6px); }
.fz-roster-card--big .fz-roster-art { position: relative; aspect-ratio: 4 / 5; }
.fz-roster-card--big .fz-roster-alt { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; }
.fz-roster-card--big:hover .fz-roster-alt { opacity: 1; }
.fz-roster-card--big .fz-roster-num { top: 12px; left: 12px; position: absolute; }
.fz-roster-flavor { position: absolute; right: 12px; top: 12px; padding: 5px 10px; border-radius: 100px; background: var(--bro); color: #fff; font-family: var(--fz-display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.fz-roster-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 8px 0; }
.fz-roster-card--big .fz-roster-name { margin: 0; padding: 0; font-size: clamp(30px, 3vw, 40px); }
.fz-roster-card--big .fz-roster-name a { color: var(--bro); text-decoration: none; }
.fz-roster-card--big .fz-roster-line { margin: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--fz-ink); min-height: 2.9em; }
.fz-roster-quote { margin: 4px 0 0; font-family: var(--fz-marker); font-size: 15px; line-height: 1.3; color: var(--fz-muted); transform: rotate(-1deg); min-height: 2.6em; }
.fz-roster-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--fz-bg); font-size: 13px; font-weight: 700; color: var(--fz-muted); }
.fz-roster-stat strong { font-family: var(--fz-display); font-size: 20px; letter-spacing: 0.04em; color: var(--bro); }
.fz-roster-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fz-roster-actions .fz-btn { padding: 11px 16px; font-size: 13px; }
.fz-roster-card--big .fz-btn--primary { background: var(--bro); }
.fz-roster-card--big .fz-btn--outline { color: var(--fz-ink); border-color: var(--fz-ink); }
.fz-roster-promise { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--fz-muted); }
.fz-roster-promise i { color: var(--bro); }
.fz-roster-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; padding: 28px; border-radius: var(--fz-radius-lg, 24px); background: var(--fz-navy); color: #fff; }
.fz-roster-how-step { display: flex; flex-direction: column; gap: 6px; }
.fz-roster-how-step span { font-family: var(--fz-display); font-size: 14px; letter-spacing: 0.16em; color: var(--fz-yellow); }
.fz-roster-how-step strong { font-family: var(--fz-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.06em; }
.fz-roster-how-step p { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 15px; line-height: 1.5; }
@media (max-width: 1200px) { .fz-roster-grid--big { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (max-width: 960px) { .fz-roster-how { grid-template-columns: 1fr; } .fz-roster-grid--big { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fz-roster-grid--big { grid-template-columns: 1fr; } .fz-roster-card--big .fz-roster-line, .fz-roster-quote { min-height: 0; } }


/* Roster panels — the homepage "Meet the Bros" boxes, with a colour frame */
.fz-roster-panel {
    min-height: 0;
    aspect-ratio: 3 / 3.9;
    border: 4px solid var(--bro);
    border-radius: var(--fz-radius-lg, 24px);
    background: color-mix(in srgb, var(--bro) 70%, #000);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, var(--fz-shadow-lg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fz-roster-panel:hover { transform: translateY(-6px); }
.fz-roster-panel-link { position: absolute; inset: 0; z-index: 2; }
.fz-roster-panel::after { background: linear-gradient(to top, color-mix(in srgb, var(--bro) 55%, rgba(11, 31, 46, 0.95)) 0%, rgba(11, 31, 46, 0.55) 42%, rgba(11, 31, 46, 0) 70%); }
.fz-roster-panel .fz-roster-num { position: absolute; top: 14px; left: 14px; z-index: 3; }
.fz-roster-panel .fz-roster-flavor { position: absolute; top: 14px; right: 14px; z-index: 3; }
.fz-roster-panel .fz-bro-flip { top: auto; bottom: auto; right: 14px; top: 52px; }
.fz-roster-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; color: #fff; }
.fz-roster-panel .fz-roster-name { margin: 0; padding: 0; font-size: clamp(34px, 3.4vw, 48px); line-height: 0.95; letter-spacing: 0.03em; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); }
.fz-roster-panel .fz-roster-name a { color: #fff; text-decoration: none; position: relative; z-index: 3; }
.fz-roster-panel .fz-roster-line { margin: 0; padding: 0; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.92); min-height: 0; }
.fz-roster-panel .fz-roster-quote { margin: 2px 0 0; font-size: 16px; color: var(--fz-yellow); min-height: 0; transform: none; }
.fz-roster-panel .fz-roster-actions { margin-top: 8px; gap: 6px; position: relative; z-index: 3; }
.fz-roster-panel .fz-roster-actions .fz-btn { padding: 10px 14px; font-size: 12px; }
.fz-roster-panel .fz-btn--primary { background: #fff; color: var(--fz-ink); box-shadow: none; }
.fz-roster-panel .fz-btn--primary:hover { background: var(--fz-yellow); }
.fz-roster-panel .fz-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.fz-roster-panel .fz-roster-promise { margin-top: 6px; color: rgba(255, 255, 255, 0.8); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.fz-roster-panel .fz-roster-promise i { color: var(--fz-yellow); }
@media (max-width: 640px) { .fz-roster-panel { aspect-ratio: 3 / 3.6; } .fz-roster-panel .fz-roster-name { font-size: 34px; } }

/* "The others" on a profile — compact panels */
.fz-roster-grid--others { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fz-roster-panel--mini { aspect-ratio: 3 / 4; }
.fz-roster-panel--mini .fz-roster-text { padding: 16px; gap: 4px; }
.fz-roster-panel--mini .fz-roster-name { font-size: clamp(26px, 2.4vw, 34px); }
.fz-roster-panel--mini .fz-roster-line { font-size: 13px; }
.fz-roster-panel--mini .fz-roster-cta { color: var(--fz-yellow); margin-top: 4px; padding: 0; }
@media (hover: hover) { .fz-roster-panel--mini:hover .fz-bro-photo--alt { opacity: 1; } }
@media (max-width: 960px) { .fz-roster-grid--others { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fz-roster-grid--others { grid-template-columns: repeat(2, 1fr); gap: 10px; } .fz-roster-panel--mini { aspect-ratio: 3 / 4.2; } .fz-roster-panel--mini .fz-roster-name { font-size: 22px; } .fz-roster-panel--mini .fz-roster-line { display: none; } }

/* ============================================================
   Leaderboard — who's winning
   ============================================================ */
.fz-board { background: var(--fz-ink); color: #fff; }
.fz-board .fz-section-title, .fz-board .fz-eyebrow { color: #fff; }
.fz-board .fz-section-deck { color: rgba(255, 255, 255, 0.72); }
.fz-board .fz-text-link { color: var(--fz-yellow); }
.fz-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fz-board-row {
    display: grid; grid-template-columns: 44px 56px 1fr auto; align-items: center; gap: 16px;
    padding: 14px 18px 14px 14px; border-radius: 18px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
}
.fz-board-row.is-leader { background: color-mix(in srgb, var(--bro) 22%, rgba(255, 255, 255, 0.04)); border-color: color-mix(in srgb, var(--bro) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bro) 40%, transparent), 0 20px 50px rgba(0, 0, 0, 0.35); }
.fz-board-rank { font-family: var(--fz-display); font-size: 28px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45); text-align: center; }
.fz-board-row.is-leader .fz-board-rank { color: var(--fz-yellow); }
.fz-board-face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--bro) 75%, #000); box-shadow: 0 0 0 3px var(--fz-ink), 0 0 0 6px var(--bro); display: block; }
.fz-board-face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.fz-board-main { min-width: 0; }
.fz-board-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fz-board-name { font-family: var(--fz-display); font-size: 26px; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bro); text-decoration: none; }
.fz-board-who { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.fz-board-num { margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.fz-board-num strong { font-family: var(--fz-display); font-size: 22px; letter-spacing: 0.08em; color: #fff; }
.fz-board-num em { font-style: normal; opacity: 0.5; margin: 0 4px; }
.fz-board-bar { height: 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.fz-board-bar span { display: block; height: 100%; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, var(--bro), color-mix(in srgb, var(--bro) 55%, #fff)); box-shadow: 0 0 16px color-mix(in srgb, var(--bro) 70%, transparent); transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fz-board-btn { padding: 11px 16px; font-size: 12px; background: var(--bro); white-space: nowrap; }
.fz-board-btn:hover { background: color-mix(in srgb, var(--bro) 85%, #000); }
@media (max-width: 720px) {
    .fz-board-row { grid-template-columns: 28px 44px 1fr; gap: 10px; padding: 12px; }
    .fz-board-rank { font-size: 20px; }
    .fz-board-face { width: 44px; height: 44px; }
    .fz-board-name { font-size: 20px; }
    .fz-board-num { width: 100%; margin-left: 0; }
    .fz-board-btn { grid-column: 2 / -1; justify-content: center; }
}

/* ============================================================
   The wall — customer photos
   ============================================================ */
.fz-wall { background: var(--fz-bg); }
.fz-wall-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 12px; }
.fz-wall-item { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--fz-surface-2); box-shadow: var(--fz-shadow); transform: rotate(var(--tilt, 0deg)); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.fz-wall-item:nth-child(3n) { --tilt: 1.2deg; } .fz-wall-item:nth-child(3n+1) { --tilt: -1deg; }
.fz-wall-item:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--fz-shadow-lg); z-index: 2; }
.fz-wall-item--big { grid-column: span 2; grid-row: span 2; }
.fz-wall-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fz-wall-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; color: #fff; background: linear-gradient(to top, rgba(11, 31, 46, 0.9), rgba(11, 31, 46, 0)); }
.fz-wall-cap strong { font-family: var(--fz-display); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; }
.fz-wall-stars { color: var(--fz-yellow); font-size: 12px; letter-spacing: 0.1em; }
.fz-wall-cap em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); width: 100%; }
@media (max-width: 900px) { .fz-wall-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }

/* Blog single extras + landing unlock line + guest referral */
.fz-post-figure { margin: 0 0 28px; border-radius: 18px; overflow: hidden; box-shadow: var(--fz-shadow); }
.fz-post-figure img { width: 100%; height: auto; display: block; }
.fz-post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 36px; padding: 18px 20px; border-radius: 18px; background: var(--fz-surface); border: 1px solid var(--fz-line); }
.fz-post-share > span:first-child { font-weight: 800; font-size: 14px; margin-right: auto; }
.fz-post-share .fz-btn { padding: 11px 16px; font-size: 12px; }
.fz-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fz-post-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--fz-line); box-shadow: var(--fz-shadow); color: var(--fz-ink); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.fz-post-card:hover { transform: translateY(-5px); box-shadow: var(--fz-shadow-lg); }
.fz-post-card-art { display: block; aspect-ratio: 16 / 10; background: var(--fz-surface-2); }
.fz-post-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fz-post-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.fz-post-card-meta { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fz-muted); }
.fz-post-card-title { font-family: var(--fz-display); font-size: 22px; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; }
.fz-post-card-excerpt { font-size: 14px; color: var(--fz-muted); line-height: 1.5; }
@media (max-width: 720px) { .fz-post-grid { grid-template-columns: 1fr; } }
.fz-land-unlock { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 9px 14px; border-radius: 100px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.fz-land-unlock i { color: var(--fz-yellow); }
.fz-ref-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.fz-ref-url { flex: 1 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 12px 14px; border-radius: 12px; background: var(--fz-surface-2); font-size: 13px; }

/* ============================================================
   Cart drawer — Stay Frozen
   ============================================================ */
body.sb-frozen .cart-drawer-backdrop { background: rgba(11, 31, 46, 0.55); backdrop-filter: blur(2px); }
body.sb-frozen .cart-drawer-panel { width: min(460px, 100%); background: var(--fz-bg); border-left: 0; box-shadow: -30px 0 80px rgba(0, 0, 0, 0.35); color: var(--fz-ink); }
body.sb-frozen .cart-drawer-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--fz-line); background: #fff; }
body.sb-frozen .cart-drawer-head h2 { display: flex; align-items: center; gap: 12px; font-family: var(--fz-display); font-size: 30px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fz-ink); }
body.sb-frozen .cart-drawer-count { font-size: 13px; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 100px; background: var(--fz-red); color: #fff; }
body.sb-frozen .cart-drawer-close { width: 42px; height: 42px; border: 1px solid var(--fz-line); background: #fff; color: var(--fz-ink); font-size: 18px; }
body.sb-frozen .cart-drawer-close:hover { background: var(--fz-ink); color: #fff; border-color: var(--fz-ink); }
body.sb-frozen .cart-ship-meter { padding: 14px 24px 16px; border: 0; background: var(--fz-ink); color: #fff; }
body.sb-frozen .cart-ship-meter-text { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 10px; }
body.sb-frozen .cart-ship-meter-text i { color: var(--fz-yellow); }
body.sb-frozen .cart-ship-meter-text strong { color: var(--fz-yellow); font-family: var(--fz-display); font-size: 16px; letter-spacing: 0.05em; font-weight: 400; }
body.sb-frozen .cart-ship-meter-bar { height: 8px; background: rgba(255, 255, 255, 0.16); border-radius: 100px; }
body.sb-frozen .cart-ship-meter-bar span { background: linear-gradient(90deg, var(--fz-blue), var(--fz-yellow)); border-radius: 100px; height: 100%; display: block; transition: width 0.6s ease; }
body.sb-frozen .cart-ship-meter.is-qualified .cart-ship-meter-bar span { background: var(--fz-yellow); }
body.sb-frozen .cart-drawer-body { padding: 16px 20px 20px; }
body.sb-frozen .cart-items { gap: 10px; }
body.sb-frozen .cart-item { grid-template-columns: 84px 1fr; gap: 14px; padding: 12px; border: 1px solid var(--fz-line); border-radius: 18px; background: #fff; box-shadow: var(--fz-shadow); }
body.sb-frozen .cart-item:last-child { border-bottom: 1px solid var(--fz-line); }
body.sb-frozen .cart-item-thumb { border-radius: 12px; background: var(--fz-surface-2); }
body.sb-frozen .cart-item-body { gap: 4px; }
body.sb-frozen .cart-item-title { font-family: var(--fz-display); font-size: 16px; letter-spacing: 0.03em; color: var(--fz-ink); white-space: normal; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-decoration: none; }
body.sb-frozen .cart-item-title:hover { color: var(--fz-red); }
body.sb-frozen .cart-item-meta { font-family: var(--fz-body); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fz-muted); }
body.sb-frozen .cart-item-bottom { margin-top: 6px; }
body.sb-frozen .cart-item-qty { border: 1.5px solid var(--fz-line); background: var(--fz-surface-2); }
body.sb-frozen .cart-item-qty button { color: var(--fz-ink); width: 30px; font-size: 15px; }
body.sb-frozen .cart-item-qty button:hover { background: #fff; }
body.sb-frozen .cart-item-qty .cart-item-qty-value { color: var(--fz-ink); font-size: 13px; width: 28px; line-height: 30px; }
body.sb-frozen .cart-item-price { font-family: var(--fz-display); font-size: 18px; letter-spacing: 0.05em; color: var(--fz-red); }
body.sb-frozen .cart-item-remove { font-family: var(--fz-body); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fz-muted); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
body.sb-frozen .cart-item-remove:hover { color: var(--fz-red); }
body.sb-frozen .cart-drawer-body .cart-empty { color: var(--fz-muted); padding: 40px 12px 24px; }
body.sb-frozen .cart-drawer-body .cart-empty .marker-eyebrow { color: var(--fz-red); }
body.sb-frozen .cart-drawer-body .cart-empty-line { font-family: var(--fz-display); font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fz-ink); transform: none; }
body.sb-frozen .cart-drawer-body .cart-empty .btn { border-radius: 100px; font-family: var(--fz-display); letter-spacing: 0.06em; }
body.sb-frozen .cart-empty-suggested { width: 100%; margin-top: 12px; }
body.sb-frozen .cart-empty-suggested-label { color: var(--fz-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
body.sb-frozen .cart-empty-suggested-list li a { background: #fff; border: 1px solid var(--fz-line); border-radius: 14px; color: var(--fz-ink); }
body.sb-frozen .cart-empty-suggested-title { font-family: var(--fz-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--fz-ink); }
body.sb-frozen .cart-empty-suggested-price { color: var(--fz-red); font-family: var(--fz-display); letter-spacing: 0.05em; }
body.sb-frozen .cart-drawer-foot { padding: 16px 20px 20px; border-top: 1px solid var(--fz-line); background: #fff; }
body.sb-frozen .cart-subtotal-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fz-muted); }
body.sb-frozen .cart-subtotal-value { font-family: var(--fz-display); font-size: 28px; letter-spacing: 0.05em; color: var(--fz-ink); }
body.sb-frozen .cart-foot-aside { color: var(--fz-muted); font-size: 12px; margin: 2px 0 12px; }
body.sb-frozen .cart-checkout-btn { border-radius: 100px; font-family: var(--fz-display); font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; padding: 17px 24px; background: var(--fz-red); color: #fff; box-shadow: 0 12px 28px rgba(214, 40, 40, 0.35); }
body.sb-frozen .cart-checkout-btn:hover { background: #b91c1c; transform: translateY(-2px); }
body.sb-frozen .cart-foot-trust { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fz-muted); }
body.sb-frozen .cart-foot-trust i { color: var(--fz-red); margin-right: 4px; }
body.sb-frozen .cart-continue { display: block; width: 100%; margin-top: 10px; padding: 8px; background: none; border: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fz-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body.sb-frozen .cart-continue:hover { color: var(--fz-red); }

/* ============================================================
   Product page extras: cheer line, fit note, next-run counter,
   click-to-play video, sticky phone buy bar
   ============================================================ */
.fz-cheer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--bro, var(--fz-red)) 12%, #fff); border: 1px solid color-mix(in srgb, var(--bro, var(--fz-red)) 40%, transparent); font-size: 14px; font-weight: 700; color: var(--fz-ink); }
.fz-cheer i { color: var(--bro, var(--fz-red)); }
.fz-cheer a { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bro, var(--fz-red)); }
.fz-fit-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; font-size: 13px; color: var(--fz-muted); }
.fz-fit-note i { color: var(--fz-blue); }
.fz-fit-note .buy-field-link { margin-left: 0; }
.fz-nextrun { margin: 18px 0 0; max-width: 480px; padding: 14px 16px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; }
.fz-nextrun p { margin: 0 0 10px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fz-nextrun p i { color: var(--fz-yellow); }
.fz-nextrun-bar { height: 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.fz-nextrun-bar span { display: block; height: 100%; width: var(--fill); min-width: 8px; border-radius: 100px; background: linear-gradient(90deg, var(--fz-red), var(--fz-yellow)); }
.fz-nextrun small { display: block; margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.fz-yt { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.fz-yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.fz-yt:hover img { transform: scale(1.04); }
.fz-yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 50%); }
.fz-yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--fz-red); color: #fff; display: grid; place-items: center; font-size: 26px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); z-index: 2; transition: transform 0.2s ease; }
.fz-yt-play i { margin-left: 4px; }
.fz-yt:hover .fz-yt-play { transform: translate(-50%, -50%) scale(1.08); }
.fz-land-phone .fz-yt { border-radius: 26px; }
.fz-yt-frame { display: block; width: 100%; height: 100%; border: 0; }
.fz-land-phone .fz-yt-frame { border-radius: 26px; background: #000; }
.fz-yt-wrap { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; margin: 0 0 24px; box-shadow: var(--fz-shadow); }
.fz-yt-wrap .fz-yt, .fz-yt-wrap .fz-yt-frame { position: absolute; inset: 0; }
body.sb-frozen .mobile-buy-bar { display: none; }
@media (max-width: 720px) {
    body.sb-frozen .mobile-buy-bar[data-mobile-buy-bar] { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(11, 31, 46, 0.96); backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, 0.12); transform: translateY(110%); transition: transform 0.25s ease; }
    body.sb-frozen .mobile-buy-bar[data-mobile-buy-bar].is-visible { transform: translateY(0); }
    body.sb-frozen .mobile-buy-bar-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    body.sb-frozen .mobile-buy-bar-title { display: block !important; font-family: var(--fz-display) !important; font-size: 15px !important; letter-spacing: 0.03em; text-transform: uppercase; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.sb-frozen .mobile-buy-bar-price { font-family: var(--fz-display); font-size: 16px; letter-spacing: 0.05em; color: var(--fz-yellow); }
    body.sb-frozen .mobile-buy-bar-btn { flex: 0 0 auto; padding: 13px 18px; border-radius: 100px; background: var(--fz-red); color: #fff; font-family: var(--fz-display); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 24px rgba(214, 40, 40, 0.4); }
    body.sb-frozen.has-mobile-buy-bar { padding-bottom: 76px; }
}

/* thank-you add-on + bundle card */
.fz-upsell { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; margin: 28px 0; padding: 18px; border-radius: 22px; background: #fff; border: 2px solid var(--fz-ink); box-shadow: var(--fz-shadow-lg); }
.fz-upsell-art { display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--fz-surface-2); }
.fz-upsell-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fz-upsell-body h2 { font-family: var(--fz-display); font-size: clamp(24px, 3vw, 34px); line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; margin: 6px 0 8px; color: var(--fz-ink); }
.fz-upsell-body h2 span { color: var(--fz-red); margin-left: 8px; }
.fz-upsell-body p { margin: 0 0 14px; color: var(--fz-muted); font-size: 15px; }
@media (max-width: 600px) { .fz-upsell { grid-template-columns: 1fr; } .fz-upsell-art { max-width: 200px; } }
.fz-bundle { border: 3px solid var(--fz-yellow); }
.fz-bundle-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 8px 12px; border-radius: 100px; background: var(--fz-yellow); color: var(--fz-ink); font-family: var(--fz-display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.fz-bundle-line { margin: 0 0 10px; font-size: 13px; color: var(--fz-muted); }
.fz-archive-bundle { margin: 0 0 24px; }
.fz-archive-bundle .fz-viral-card { display: grid; grid-template-columns: 220px 1fr; align-items: center; }
@media (max-width: 640px) { .fz-archive-bundle .fz-viral-card { grid-template-columns: 1fr; } }

/* Creators page */
.fz-creators-prize { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 14px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.fz-creators-prize i { color: var(--fz-yellow); }
.fz-creators { background: var(--fz-bg); }
.fz-creators-list .fz-board-row { grid-template-columns: 44px 56px 1fr auto; background: #fff; border: 1px solid var(--fz-line); box-shadow: var(--fz-shadow); }
.fz-creators-list .fz-board-row.is-leader { background: #fff; border-color: var(--fz-red); box-shadow: 0 0 0 2px var(--fz-red) inset, var(--fz-shadow-lg); }
.fz-creators-list .fz-board-rank { color: var(--fz-muted); }
.fz-creators-list .fz-board-row.is-leader .fz-board-rank { color: var(--fz-red); }
.fz-creators-face { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--fz-line); background: var(--fz-surface-2); display: grid; place-items: center; color: var(--fz-muted); font-size: 20px; }
.fz-creators-list .fz-board-name { color: var(--fz-ink); }
.fz-creators-list .fz-board-who { color: var(--fz-muted); }
.fz-creators-list .fz-board-num { color: var(--fz-ink); }
.fz-creators-list .fz-board-num strong { color: var(--fz-red); }
.fz-creators-list .fz-board-bar { background: var(--fz-surface-2); }
.fz-creators-list .fz-board-bar span { background: linear-gradient(90deg, var(--fz-red), var(--fz-yellow)); box-shadow: none; }
.fz-creators-blurb { margin: 8px 0 0; font-size: 13px; color: var(--fz-muted); }
.fz-creators-code { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px; border-radius: 14px; border: 2px dashed var(--fz-line); background: var(--fz-surface-2); min-width: 120px; }
.fz-creators-code small { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fz-muted); }
.fz-creators-code strong { font-family: var(--fz-display); font-size: 20px; letter-spacing: 0.1em; color: var(--fz-ink); }
.fz-creators-code em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--fz-red); }
.fz-creators-empty { margin: 0 0 24px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px dashed var(--fz-line); color: var(--fz-muted); font-weight: 700; }
.fz-creators-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 36px; padding: 28px; border-radius: 24px; background: var(--fz-ink); color: #fff; }
.fz-creators-cta .fz-section-title, .fz-creators-cta .fz-eyebrow { color: #fff; }
.fz-creators-cta .fz-section-deck { color: rgba(255, 255, 255, 0.72); max-width: 560px; }
@media (max-width: 720px) { .fz-creators-list .fz-board-row { grid-template-columns: 28px 44px 1fr; } .fz-creators-code { grid-column: 2 / -1; flex-direction: row; justify-content: center; gap: 10px; } }

/* Sports */
.fz-sports-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fz-sports-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background 0.15s ease; }
.fz-sports-chip:hover { background: var(--fz-red); border-color: var(--fz-red); color: #fff; }
.fz-sports-chip i { color: var(--fz-yellow); }
.fz-sports-chip span { padding: 2px 7px; border-radius: 100px; background: #fff; color: var(--fz-ink); font-family: var(--fz-display); font-size: 11px; letter-spacing: 0.06em; }
.fz-sports-head .sb-display i { color: var(--fz-yellow); font-size: 0.6em; vertical-align: middle; margin-right: 6px; }
.fz-sport--alt { background: #fff; }
.fz-sport .fz-eyebrow i { margin-right: 4px; }
.fz-sports-empty p { padding: 24px; border-radius: 16px; background: #fff; border: 1px dashed var(--fz-line); color: var(--fz-muted); font-weight: 700; }

/* Shop dropdown + collections */
body.sb-frozen .nav-links .sub-menu .fz-nav-ico { width: 14px; text-align: center; color: var(--fz-red); font-size: 12px; }
@media (max-width: 960px) { body.sb-frozen .primary-nav .nav-links .sub-menu .fz-nav-ico { color: var(--fz-yellow); } }
.fz-shop-chips { justify-content: center; margin: 14px 0 18px; }
.fz-coll-head .sb-display i { color: var(--fz-yellow); font-size: 0.6em; vertical-align: middle; margin-right: 6px; }
.fz-coll-rank-wrap { position: relative; }
.fz-coll-rank { position: absolute; top: -10px; left: -10px; z-index: 5; padding: 8px 12px; border-radius: 100px; background: var(--fz-yellow); color: var(--fz-ink); font-family: var(--fz-display); font-size: 15px; letter-spacing: 0.08em; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }

/* reveal grids */
.fz-reveal-item { display: contents; }
.fz-reveal-item[hidden] { display: none; }
.fz-reveal-more { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.fz-reveal-count { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fz-muted); }
.fz-studio-section--alt .fz-reveal-count { color: rgba(255, 255, 255, 0.6); }