/* =========================================================================
   RIPTIDE LABS — product page in the deep-water system. Loaded after the
   inherited product.css; same selectors, later cascade. Markup unchanged so
   product.js (gallery, variants, bundles, sticky bar) keeps working.
   ========================================================================= */

.pdp-crumb { padding: 18px clamp(20px, 4vw, 48px); }

/* Two panels on ice: navy gallery stage + white info card */
.pdp {
    background: var(--n-25); border: 0;
    grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start;
    padding: 8px clamp(20px, 4vw, 48px) 40px;
}
.gallery {
    position: sticky; top: 92px; overflow: hidden;
    min-height: 0; padding: 24px 24px 22px;
    border: 1px solid var(--rl-glass-border); border-radius: var(--rl-radius);
    color: var(--paper);
    background:
        radial-gradient(ellipse at 50% 70%, rgb(124 196 245 / .3), transparent 60%),
        linear-gradient(180deg, rgb(11 21 38 / .8), rgb(11 21 38 / .92)),
        url(../images/hero/ocean-tall.webp) center 40% / cover no-repeat;
}
.gallery-tag { color: var(--rl-ice); font-family: var(--font-wide); font-size: 9px; letter-spacing: .14em; }
.gallery-index { color: rgb(var(--rgb-white) / .6); }
.gallery-index b { color: var(--n-0); }
.gallery-main { position: relative; top: auto; height: clamp(360px, 40vw, 620px); }
.gallery-main img { filter: drop-shadow(0 40px 50px rgb(var(--rgb-black) / .55)); }
.gallery-hint { color: rgb(var(--rgb-white) / .55); }
.gallery-main .spin-arrows button {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--rl-glass-border); background: rgb(var(--rgb-white) / .08); color: var(--n-0);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gallery-main .spin-arrows button:hover { background: var(--rl-ice); color: var(--n-925); }
.gallery-thumbs .thumb { border-radius: 12px; border: 1px solid var(--rl-glass-border); background: rgb(var(--rgb-white) / .05); }
.gallery-thumbs .thumb:hover { border-color: rgb(124 196 245 / .6); }
.gallery-thumbs .thumb.on { border-color: var(--rl-sky); border-width: 1px; padding: 8px; box-shadow: 0 0 0 2px rgb(124 196 245 / .35); }
.gallery-thumbs .thumb .t-label, .gallery-thumbs .thumb.on .t-label { color: rgb(var(--rgb-white) / .7); }

.info {
    padding: clamp(24px, 3vw, 40px);
    background: var(--n-0); border: 1px solid var(--rl-card-border); border-radius: var(--rl-radius);
    box-shadow: var(--rl-shadow);
}
.info .eyebrow { font-family: var(--font-wide); font-size: 8.5px; letter-spacing: .12em; }
.info .eyebrow .pill { border: 0; background: rgb(168 193 216 / .18); color: var(--green-700); padding: 7px 12px; }
.info .eyebrow .pulse, .info .eyebrow .pulse::after { background: var(--green-500); border-color: var(--green-500); }
.info h1 { font-size: clamp(44px, 5.5vw, 84px); letter-spacing: -.035em; }
.info .tagline { font-size: 18px; line-height: 1.45; color: var(--ink-2); font-weight: 400; }
.info .dot-line { display: none; }
.info .price-row { border-top: 0; border-bottom: 1px solid rgb(168 193 216 / .35); padding: 6px 0 20px; margin-top: 0; }
.info .price-row .price { font-size: 44px; letter-spacing: -.03em; }
.sec-h { font-family: var(--font-wide); font-size: 8.5px; letter-spacing: .14em; color: var(--green-600); }

/* Purchase type + bundle ladder */
.subopt .s { border-radius: var(--rl-radius-sm); border: 1px solid var(--rl-card-border); }
.subopt .s.on { border-color: var(--n-925); background: var(--n-25); box-shadow: inset 0 0 0 1px var(--n-925); }
.bundles .bundle { border-radius: var(--rl-radius-sm); border: 1px solid var(--rl-card-border); background: var(--n-0); }
.bundles .bundle.on { border-color: var(--green-500); background: rgb(124 196 245 / .12); box-shadow: 0 0 0 1px var(--green-500), 0 12px 28px -14px rgb(45 143 209 / .6); }
.bundle .b-badge { border-radius: 999px; font-family: var(--font-wide); font-size: 7.5px; letter-spacing: .12em; }
.bundle .b-badge.pop { background: var(--green-600); }
.bundle .b-badge.best { background: var(--n-925); }
.bundle .b-off, .bundle.t-pop .b-off, .bundle.t-best .b-off { color: var(--green-600); }

/* Qty + CTA */
.cta-row .qty { border-radius: 999px; overflow: hidden; border: 1px solid var(--rl-card-border); }
.cta-row button.btn.single_add_to_cart_button {
    border-radius: 999px; border: 0;
    background: var(--rl-grad) !important; color: var(--n-925) !important;
    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);
}
.cta-row button.btn.single_add_to_cart_button:hover { background: var(--rl-grad) !important; filter: brightness(1.06); }

/* Spin arrows: glass pills in the stage's bottom-right corner (never over the vial) */
.gallery-main .spin-arrows { left: auto; right: 12px; bottom: 12px; transform: none; }

/* Buyer reviews block */
.pdp-reviews { background: var(--n-0); border-bottom: 0; padding: clamp(56px, 7vw, 88px) clamp(20px, 4vw, 48px); }
.rev-head h2 { text-transform: none; letter-spacing: -.03em; font-weight: 600; }
.rev-head .axis-left, .pdp-reviews .axis-left { font-family: var(--font-wide); font-size: 9px; letter-spacing: .16em; color: var(--green-600); }
.rev-empty, .rev-form-wrap { border: 1px solid var(--rl-card-border); border-radius: var(--rl-radius-sm); background: var(--n-25); padding: 20px 22px; text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.rev-item { border: 1px solid var(--rl-card-border); border-radius: var(--rl-radius-sm); padding: 20px 22px; margin-bottom: 12px; background: var(--rl-card-bg); }
.rev-verified { border-radius: 999px; background: rgb(124 196 245 / .18); color: var(--green-700); font-family: var(--font-wide); font-size: 7.5px; letter-spacing: .12em; padding: 3px 9px; }
.rt-stars .fill { color: var(--green-500); }

/* Trust strip → four ice tiles */
.trust { gap: 10px; border-top: 0; padding: 16px 0 4px; }
.trust .t { padding: 12px 14px; border-right: 0; border-radius: 12px; background: var(--n-25); border: 1px solid rgb(168 193 216 / .3); text-transform: none; letter-spacing: 0; }
.trust .t > span:first-child { font-family: var(--font-wide); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.trust .t .v { font-family: var(--font-display); font-weight: 600; font-size: 14px; }

/* Accordion → stacked cards, sentence-case body */
.acc { border-top: 0; margin-top: 4px; }
.acc details { border: 1px solid var(--rl-card-border); border-radius: var(--rl-radius-sm); margin-bottom: 10px; padding: 0 18px; background: var(--n-0); }
.acc summary { text-transform: none; letter-spacing: -.01em; font-size: 15px; padding: 16px 0; }
.acc .body { text-transform: none; letter-spacing: 0; text-align: left; font-size: 14px; line-height: 1.6; font-weight: 400; color: var(--ink-2); padding: 0 0 18px; }
.acc .body ul { text-transform: none; letter-spacing: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

/* COA + related */
.rt-coa-section { background: var(--n-0); padding: clamp(56px, 7vw, 88px) clamp(20px, 4vw, 48px); }
.rt-coa-intro h2 { text-transform: none; letter-spacing: -.025em; font-weight: 600; }
.rt-coa-soon { border-radius: 18px; border: 1px dashed var(--rl-card-border); background: var(--n-25); }
.rt-coa-soon-badge { border-radius: 999px; }
.related { background: var(--n-25); border-bottom: 0; padding: clamp(56px, 7vw, 88px) clamp(20px, 4vw, 48px); }
.related h2 { text-transform: none; letter-spacing: -.03em; font-weight: 600; }
.related-grid { gap: 18px; border: 0; }
.related .rcard {
    min-height: 0; padding: 20px; border-right: 0;
    border: 1px solid var(--rl-card-border); border-radius: var(--rl-radius);
    background: var(--rl-card-bg); box-shadow: var(--rl-shadow);
    transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.related .rcard:hover { background: var(--rl-card-bg); transform: translateY(-6px); border-color: rgb(124 196 245 / .8); box-shadow: var(--rl-shadow-hover); }
.rcard .stripe { display: none; }
.rcard .cat { padding: 5px 10px; border-radius: 999px; background: rgb(168 193 216 / .18); font-family: var(--font-wide); font-size: 8.5px; letter-spacing: .12em; color: var(--ink-2); align-self: flex-start; }
.rcard .img { position: relative; height: 220px; }
.rcard .img::before {
    content: ''; position: absolute; left: 12%; right: 12%; bottom: 8px; height: 34%; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgb(124 196 245 / .5), rgb(168 193 216 / .2) 45%, transparent 72%);
    filter: blur(10px);
}
.rcard .img img { position: relative; filter: drop-shadow(0 18px 22px rgb(15 30 51 / .25)); }
.rcard .n { text-transform: none; font-size: 18px; letter-spacing: -.02em; }
.rcard .p { font-family: var(--font-display); font-weight: 600; color: var(--green-600); }

/* Sticky buy bar → floating pill */
.sticky-buy {
    left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 1280px;
    border-radius: 999px; border: 1px solid var(--rl-glass-border);
    background: rgb(11 21 38 / .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px -20px rgb(var(--rgb-black) / .6);
    padding: 12px 14px 12px 28px;
}
.sticky-buy .l { font-family: var(--font-wide); font-size: 8.5px; letter-spacing: .14em; }
.sticky-buy .r .pr { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.sticky-buy .r .btn { background: var(--rl-grad) !important; color: var(--n-925) !important; border-color: transparent !important; border-radius: 999px; padding: 12px 20px; }

@media (max-width: 900px) {
    .pdp { grid-template-columns: 1fr; padding: 4px 16px 32px; gap: 14px; }
    .gallery { position: relative; top: auto; padding: 18px 16px 16px; border-bottom: 1px solid var(--rl-glass-border); }
    .gallery-main { height: clamp(300px, 88vw, 440px); }
    .info { padding: 22px 18px; }
    .info h1 { font-size: clamp(38px, 11vw, 56px); }
    .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rt-coa-section, .related { padding-left: 18px; padding-right: 18px; }
    .related-grid > * { border-bottom: 1px solid var(--rl-card-border); }
    .sticky-buy { border-radius: 24px; left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; }
}
@media (max-width: 480px) {
    .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .info .eyebrow .pill .pill-x { display: none; }
    .cta-row { gap: 8px; }
    .cta-row .qty { flex: none; }
    .cta-row .qty button { padding: 0 12px; }
    .cta-row button.btn.single_add_to_cart_button { font-size: 8.5px; letter-spacing: .08em; padding: 14px 14px; gap: 6px; }
}

/* Swirl behind the gallery stage + related-card photos */
.gallery-main::after {
    content: ''; position: absolute; inset: 6% 14%; z-index: 0; pointer-events: none;
    background: url(../images/logos/logo-mark-512.png) center / contain no-repeat;
    opacity: 0; transition: opacity .8s var(--ease-out);
}
.gallery-main:hover::after, .gallery-main.is-hover::after { opacity: .16; animation: rl-swirl 22s linear infinite; }
.gallery-main img { position: relative; z-index: 1; }
.gallery-main .spin-arrows, .gallery-main .gallery-hint { z-index: 2; }
.rcard .img::after {
    content: ''; position: absolute; inset: 2% 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);
}
.related .rcard:hover .img::after, .related .rcard.is-hover .img::after { opacity: .34; animation: rl-swirl 18s linear infinite; }
.rcard .img img { position: relative; z-index: 1; }