/* =========================================================================
   RIPTIDE LABS — brand skin. Loaded LAST so it wins over the inherited
   component CSS at equal specificity. The palette itself lives in
   colors_and_type.css (tokens); this file is the structural delta: dark
   navy chrome (ticker/nav/footer), the ocean hero with composited vial
   renders, the wide brand typeface on eyebrows/labels, and the four
   research-area grid.
   ========================================================================= */


/* =========================================================================
   DEEP WATER SYSTEM — Riptide's own component language (v0.2).
   Rounded glass panels on alternating navy / ice sections, gradient pill
   buttons, sentence-case display type, wide-caps eyebrows with a "tide bar".
   Section CSS lives in riptide-home.css / riptide-shop.css / riptide-product.css.
   ========================================================================= */
:root {
    --rl-ice:  #A8C1D8;
    --rl-sky:  #7CC4F5;
    --rl-sea:  #2D8FD1;
    --rl-radius: 22px;
    --rl-radius-sm: 14px;
    --rl-grad: linear-gradient(135deg, #7CC4F5 0%, #2D8FD1 100%);
    --rl-glass-border: rgb(168 193 216 / .22);
    --rl-card-border:  rgb(168 193 216 / .45);
    --rl-card-bg: linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 100%);
    --rl-shadow: 0 24px 60px -32px rgb(15 30 51 / .45);
    --rl-shadow-hover: 0 30px 60px -28px rgb(31 111 174 / .5);
}
.rl-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* Buttons: gradient pills everywhere (base.css .btn was a square ink block). */
.btn {
    border-radius: 999px;
    padding: 14px 24px;
    background: var(--rl-grad);
    color: var(--n-925);
    border: 1px solid transparent;
    font-family: var(--font-wide); font-size: 10px; letter-spacing: .14em; font-weight: 700;
    box-shadow: 0 12px 28px -12px rgb(45 143 209 / .65);
    transition: transform .22s var(--ease-standard), box-shadow .22s, filter .22s;
}
.btn:hover { background: var(--rl-grad); filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgb(45 143 209 / .8); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; opacity: .85; }
.btn.ghost:hover { background: rgb(168 193 216 / .14); color: inherit; opacity: 1; transform: none; filter: none; }

/* Eyebrow device: wide caps behind a short gradient "tide bar". */
.rl-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-wide); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
    color: var(--green-600);
}
.rl-eyebrow::before { content: ''; width: 28px; height: 3px; border-radius: 3px; background: var(--rl-grad); flex: none; }
.on-dark .rl-eyebrow, .rl-head-dark .rl-eyebrow { color: var(--rl-ice); }

/* Section heads */
.rl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.rl-head h2 {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(32px, 4vw, 54px); line-height: 1.02; letter-spacing: -.025em;
    text-transform: none; margin: 14px 0 0; color: var(--ink);
}
.rl-head p { max-width: 52ch; margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.rl-head-dark h2 { color: var(--n-0); }
.rl-head-dark p { color: rgb(var(--rgb-white) / .7); }
@media (max-width: 700px) { .rl-head { flex-direction: column; align-items: flex-start; } }

/* Category chip (dot + wide caps) */
.rl-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px; border-radius: 999px;
    background: rgb(168 193 216 / .18);
    font-family: var(--font-wide); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
    color: var(--ink-2); white-space: nowrap;
}
.rl-chip .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- Wide brand accent type (echoes the RIPTIDE wordmark) -------- */
.cap, .cap-sm, .axis, .axis-left, .rt-axis, .rt-axis-left, .rt-eyebrow,
.ticker-track, .nav-links, .nav-right, .foot h4, .foot-bot,
.vhero-eyebrow, .pledge-cap, .fpro-hint, .fpro-card .topbar,
.pure .num, .pure .cnt, .pure .name small, .news .cap {
    font-family: var(--font-wide);
    letter-spacing: .14em;
}
.ticker-track { font-size: 9.5px; letter-spacing: .2em; }
.nav-links, .nav-right { font-size: 9.5px; letter-spacing: .16em; }
.foot h4, .foot-bot { font-size: 9.5px; }

/* ---------- Ticker + sticky nav: deep navy, pale logo ------------------- */
.ticker { background: var(--n-970); color: rgb(var(--rgb-white) / .78); border-bottom: 1px solid rgb(var(--rgb-white) / .06); }
.ticker-track i.d { background: var(--cat-recovery); }

.nav {
    background: rgb(var(--rgb-ink-deep) / .92);
    color: var(--paper);
    border-bottom: 1px solid rgb(var(--rgb-white) / .08);
    padding: 14px 40px;
}
.nav .brand { height: 34px; width: auto; }
.nav-links a::after { background: var(--cat-recovery); }
.nav-links a:hover, .nav-links a.on { color: var(--n-0); }
.nav-right .cart .cnt { background: var(--cat-recovery); color: var(--n-925); }
.nav-burger span { background: var(--paper); }
@media (max-width: 900px) {
    .nav { background: var(--n-925); padding: 12px 20px; }
    .nav .brand { height: 30px; }
    .nav-links { background: var(--n-925); color: var(--paper); }
    .nav-links a { border-bottom-color: rgb(var(--rgb-white) / .1); }
}
/* Checkout's stripped-down header keeps the light chrome; it uses the navy logo variant. */
.rt-co-nav { background: var(--n-0); color: var(--ink); }
.rt-co-nav .brand { height: 30px; }

/* ---------- Footer: navy ------------------------------------------------ */
.foot { background: var(--n-970); color: var(--paper); border-top: 0; }
.foot-hero h3 { color: var(--n-0); }
.foot-hero .r { color: rgb(var(--rgb-white) / .55); }
.foot-hero .r .big { color: var(--n-0); }
.foot-grid { border-top-color: rgb(var(--rgb-white) / .1); }
.foot-brand img { height: 30px; }
.foot-brand .desc { color: rgb(var(--rgb-white) / .6); }
.foot h4 { color: var(--cat-recovery); }
.foot ul a { color: rgb(var(--rgb-white) / .66); }
.foot ul a:hover { color: var(--n-0); }
.foot ul li + li::before { color: rgb(var(--rgb-white) / .35); }
.foot-disclaimer { border-top-color: rgb(var(--rgb-white) / .1); }
.foot-disclaimer p { color: rgb(var(--rgb-white) / .62); }
.foot-disclaimer strong { color: var(--n-0); }
.foot-fda { background: rgb(var(--rgb-amber) / .1); border-left-color: var(--amber-500); }
.foot-fda .head { color: var(--n-0); }
.foot-fda .head svg { color: var(--amber-200); }
.foot-fda p { color: rgb(var(--rgb-white) / .72); }
.foot-fda p strong, .foot-fda p a { color: var(--n-0); }
.foot-bot { border-top-color: rgb(var(--rgb-white) / .1); color: rgb(var(--rgb-white) / .5); }
.foot-bot .dot-trail i { background: rgb(var(--rgb-white) / .35); }
.foot-mega { color: rgb(var(--rgb-white) / .07); border-top-color: rgb(var(--rgb-white) / .06); }

/* ---------- Cart drawer accents ----------------------------------------- */
.drawer-foot .btn.drawer-checkout { text-shadow: none; }

/* ---------- PDP gallery: square 1600px renders must never widen the column --- */
.gallery, .info { min-width: 0; }
.gallery { max-width: 100%; }
.gallery-main { width: 100%; }
.gallery-main img { max-width: 100%; }
@media (max-width: 900px) {
    .gallery-main { height: clamp(300px, 88vw, 440px); }
    .gallery-main .spin-arrows { bottom: 8px; }
}

/* ---------- Science library: ocean accent instead of the inherited gold ---- */
.sci-hero h1 em { color: var(--accent-money-mid); }

/* ---------- Footer panels + cart drawer in the deep-water system ---------- */
.foot-disclaimer { margin-top: 32px; padding: 20px 22px; border: 1px solid rgb(var(--rgb-white) / .08); border-radius: var(--rl-radius-sm); }
.foot-fda { border-radius: var(--rl-radius-sm); border-left-width: 4px; }
.foot h4 { font-family: var(--font-wide); }
.drawer { border-radius: var(--rl-radius) 0 0 var(--rl-radius); border-left: 1px solid var(--rl-card-border); }
.citem .th { border-radius: 12px; background: var(--n-25); border-color: transparent; }
.citem .qty, .citem .qty-mini { border-radius: 999px; overflow: hidden; }
.drawer-foot .btn.drawer-checkout { border-radius: 999px; }
.drawer-protect, .drawer-coupon-chip { border-radius: var(--rl-radius-sm); }
.drawer-promo-form input, .drawer-promo-form button { border-radius: 999px; }
.toast { border-radius: 999px; }
.rt-express-confirm-card { border-radius: var(--rl-radius); }

/* Footer headline joins the sentence-case display voice */
.foot-hero h3 { text-transform: none; letter-spacing: -.035em; font-size: clamp(40px, 6.5vw, 118px); line-height: .92; }

/* ---------- Editorial pages: sentence-case titles, ocean emphasis, rounded items --- */
.faq-hero h1, .sci-hero h1, .rt-legal .rt-h1, .rt-lab-hero h1, .rp-hero h1, .rpx-h1 {
    text-transform: none; letter-spacing: -.035em; line-height: .96;
}
.faq-hero h1 em, .sci-hero h1 em, .rp-hero h1 em, .rpx-h1 em { font-style: normal; color: var(--green-500); }
.faq-item { border: 1px solid var(--rl-card-border); border-radius: var(--rl-radius-sm); background: var(--n-0); margin-bottom: 10px; padding: 0 18px; }
.faq-item summary, .faq-item summary * { text-transform: none; letter-spacing: -.01em; }
.faq-item summary { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.faq-jump { border-radius: var(--rl-radius); border: 1px solid var(--rl-card-border); background: var(--n-0); }
.rt-legal h2 { font-family: var(--font-wide); font-size: 9px; letter-spacing: .16em; color: var(--green-600); border-top-color: rgb(168 193 216 / .35); }
.rt-legal p { text-transform: none; }
.rt-lab-stat { border: 1px solid var(--rl-card-border); border-radius: var(--rl-radius-sm); padding: 14px 16px; background: var(--n-25); }
.rt-lab-stat b { color: var(--green-600); }

/* Editorial-page buttons (partners, FAQ) → the same gradient pills */
.rp-wrap .rp-btn {
    border-radius: 999px; border: 1px solid transparent;
    background: var(--rl-grad); color: var(--n-925);
    font-family: var(--font-wide); font-size: 9.5px; letter-spacing: .14em; font-weight: 700;
    box-shadow: 0 12px 28px -12px rgb(45 143 209 / .6);
}
.rp-wrap .rp-btn:hover { background: var(--rl-grad); filter: brightness(1.06); }
.rp-wrap .rp-btn.ghost { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; opacity: .85; }
.rp-wrap .rp-btn.ghost:hover { background: rgb(168 193 216 / .16); color: inherit; opacity: 1; }

/* Ghost sub-footer megas on the editorial pages: sized to fit the viewport */
.rp-foot .mega, .sci-foot .mega, .faq-foot .mega { font-size: clamp(56px, 12.5vw, 176px); letter-spacing: -.04em; color: rgb(15 30 51 / .06); white-space: nowrap; overflow: hidden; }

/* ---------- Riptide swirl: the wave mark fades in behind a product photo
   and slowly rotates while hovered (.is-hover = QA/state hook) ---------- */
@keyframes rl-swirl { to { transform: rotate(360deg); } }
.rl-swirl-host { position: relative; }
.rl-swirl-host::after {
    content: ''; position: absolute; inset: 4% 10%; z-index: 0; pointer-events: none;
    background: url(../images/logos/logo-mark-512.png) center / contain no-repeat;
    opacity: 0; filter: saturate(1.3);
    transition: opacity .7s var(--ease-out);
    will-change: transform;
}
.rl-swirl-host > img { position: relative; z-index: 1; }

/* Mobile menu: keep the nav bar (logo + close X) above the full-screen link panel */
@media (max-width: 900px) {
    /* .nav-links is a fixed-position CHILD of .nav, so it paints above the
       nav's own logo/burger; lift those two above the panel instead. */
    body.rt-menu-open .nav-left, body.rt-menu-open .nav-right { position: relative; z-index: 60; }
    .nav-links a { font-family: var(--font-wide); font-size: 14px; letter-spacing: .14em; }
}