/* ─────────────────────────────────────────────────────────────────────────
 * TITAN AMINO — Cycle 4 design layer (Claude-led aesthetics pass)
 *
 * Layered on top of style.css. Loaded only on the front-end. Every effect
 * here is gated behind `prefers-reduced-motion: no-preference` where animation
 * is involved, and every color uses the palette tokens from style.css so the
 * WCAG contrast guarantees we already verified carry forward unchanged.
 *
 * This file's job is *not* to introduce new content, new escaping, or new
 * security surface — only to push visual sophistication.
 * ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
 * 1. HERO — layered nebula, twinkling foreground stars, orbital depth
 * ───────────────────────────────────────────────────────────────────────── */

.ta-hero {
    overflow: hidden;
    isolation: isolate;
    position: relative;
}

/* DNA-helix bokeh backdrop — the brand "neon helix" photo pinned to the hero
 * at low opacity so the cyan/violet bokeh reads as ambient brand texture
 * behind the centered logo. Masked from black so the edges fade out cleanly
 * into the deep-space canvas. */
.ta-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.30) 35%, rgba(0, 0, 0, 0.85) 100%),
        url("../images/titanamino-helix-bokeh.webp") center 30% / cover no-repeat,
        var(--ta-black);
    opacity: 0.62;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Nebula — toned WAY down (was 0.95 opacity, now reads as a faint accent
 * rather than a hero glow). Brand cyan/violet/magenta still present, just
 * much subtler against the now-black canvas. */
.ta-hero::after {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse 80% 60% at 18% 22%, rgba(110, 38, 255, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 70% 55% at 82% 28%, rgba(30, 168, 255, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 55% 78%, rgba(192, 38, 211, 0.10) 0%, transparent 55%);
    filter: blur(50px);
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
    animation: ta-nebula-drift 32s ease-in-out infinite alternate;
}
@keyframes ta-nebula-drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.02); }
    50%  { transform: translate3d( 2%,  1%, 0) scale(1.05); }
    100% { transform: translate3d( 1%, -2%, 0) scale(1.03); }
}

/* Twinkling foreground stars — toned: alpha halved, animation amplitude
 * reduced so the page reads as quiet black with subtle texture instead of
 * a constellation light show. */
.ta-hero__stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 12%,  rgba(0, 212, 255, 0.50) 0, transparent 60%),
        radial-gradient(1px 1px   at 22% 78%,   rgba(228, 69, 214, 0.45) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 42% 22%, rgba(255, 255, 255, 0.55) 0, transparent 60%),
        radial-gradient(1px 1px   at 58% 88%,   rgba(0, 212, 255, 0.40) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 72% 16%, rgba(0, 212, 255, 0.40) 0, transparent 60%),
        radial-gradient(1px 1px   at 88% 64%,   rgba(30, 168, 255, 0.38) 0, transparent 60%),
        radial-gradient(1px 1px   at 12% 92%,   rgba(0, 212, 255, 0.38) 0, transparent 60%);
    opacity: 0.6;
    animation: ta-stars-twinkle 8s ease-in-out infinite alternate;
}
@keyframes ta-stars-twinkle {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.70; }
}

.ta-hero__inner { position: relative; z-index: 2; }

/* Brand mark — multi-ring orbital, counter-rotating, sparkle.
 * Halo glow toned ~60% so the logo reads as a focal point, not a torch. */
.ta-hero__art {
    box-shadow: var(--ta-glow-pink), 0 0 90px rgba(110, 38, 255, 0.22), 0 0 140px rgba(192, 38, 211, 0.10);
}
.ta-hero__art::before,
.ta-hero__art::after {
    border-style: dashed;
    border-width: 1.5px;
}
.ta-hero__art::before {
    inset: -10%;
    border-image: linear-gradient(135deg, rgba(0, 212, 255, 0.55), rgba(192, 38, 211, 0.4), rgba(110, 38, 255, 0.5)) 1;
}
.ta-hero__art::after {
    inset: -22%;
    border-image: linear-gradient(45deg, rgba(0, 212, 255, 0.5), rgba(0, 212, 255, 0.45), rgba(192, 38, 211, 0.4)) 1;
}
.ta-hero__art img,
.ta-hero__art svg {
    filter:
        drop-shadow(0 0 18px rgba(0, 212, 255, 0.75))
        drop-shadow(0 0 36px rgba(192, 38, 211, 0.45));
    animation: ta-titan-pulse 6s ease-in-out infinite;
}
@keyframes ta-titan-pulse {
    0%, 100% { transform: scale(1)    rotate(0); }
    50%      { transform: scale(1.05) rotate(0.5deg); }
}

/* Sparkle ring — small orbiting dots around the titan */
.ta-hero__art .ta-sparkles {
    position: absolute;
    inset: -28%;
    pointer-events: none;
    animation: ta-spin-slow 60s linear infinite reverse;
}
.ta-hero__art .ta-sparkles::before,
.ta-hero__art .ta-sparkles::after,
.ta-hero__art .ta-sparkles span {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #00D4FF 0%, rgba(0, 212, 255, 0) 70%);
    filter: blur(0.5px);
}
.ta-hero__art .ta-sparkles::before { top:  8%; left: 50%; transform: translateX(-50%); }
.ta-hero__art .ta-sparkles::after  { bottom: 8%; left: 30%; background: radial-gradient(circle, #C026D3 0%, rgba(192, 38, 211, 0) 70%); }
.ta-hero__art .ta-sparkles span    { top: 50%; right: 6%; width: 9px; height: 9px; background: radial-gradient(circle, #00D4FF 0%, rgba(0, 212, 255, 0) 70%); }

/* Animated headline accent — slowly shifting gradient */
.ta-hero__title em {
    background-image: linear-gradient(135deg, #00D4FF 0%, #1EA8FF 25%, #E445D6 50%, #C026D3 75%, #6E26FF 100%);
    background-size: 240% 240%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ta-headline-shift 12s ease-in-out infinite;
    will-change: background-position;
}
@keyframes ta-headline-shift {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Hero entrance — staggered fade-up on text + scale-in on art */
.ta-hero__inner > div:first-child > * {
    animation: ta-fade-up 900ms var(--ta-ease) both;
}
.ta-hero__inner > div:first-child > *:nth-child(1) { animation-delay: 80ms;  }
.ta-hero__inner > div:first-child > *:nth-child(2) { animation-delay: 220ms; }
.ta-hero__inner > div:first-child > *:nth-child(3) { animation-delay: 360ms; }
.ta-hero__inner > div:first-child > *:nth-child(4) { animation-delay: 500ms; }
.ta-hero__art   { animation: ta-art-in 1200ms var(--ta-ease) both; animation-delay: 200ms; }
@keyframes ta-fade-up { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes ta-art-in  { from { opacity: 0; transform: scale(0.86) rotate(-6deg); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────────────────────────────────
 * 2. CARD SYSTEM — 3D tilt + mouse-follow glow + animated borders
 *
 * Mouse position is tracked from JS and set as --ta-mx / --ta-my (0..1).
 * Pointerleave resets to 0.5/0.5 so the rest state is centered.
 * ───────────────────────────────────────────────────────────────────────── */

.ta-card,
.ta-product {
    --ta-mx: 0.5;
    --ta-my: 0.5;
    transform-style: preserve-3d;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ta-card[data-ta-tilt],
    .ta-product[data-ta-tilt] {
        transition: transform 280ms var(--ta-ease-out), box-shadow 280ms var(--ta-ease), border-color 280ms var(--ta-ease);
    }
    .ta-card[data-ta-tilt]:hover,
    .ta-product[data-ta-tilt]:hover {
        /* 3D tilt: from −6° to +6° on each axis based on mouse position */
        transform:
            perspective(900px)
            rotateX( calc((0.5 - var(--ta-my)) *  10deg) )
            rotateY( calc((var(--ta-mx) - 0.5) *  10deg) )
            translate3d(0, -6px, 0);
    }
}

/* Mouse-follow gradient highlight on cards */
.ta-card[data-ta-tilt]::before,
.ta-product[data-ta-tilt]::before {
    background:
        radial-gradient(
            circle 320px at calc(var(--ta-mx) * 100%) calc(var(--ta-my) * 100%),
            rgba(0, 212, 255, 0.16) 0%,
            rgba(192, 38, 211, 0.08) 35%,
            transparent 70%
        );
    opacity: 0;
    transition: opacity 220ms ease;
}
.ta-card[data-ta-tilt]:hover::before,
.ta-product[data-ta-tilt]:hover::before { opacity: 1; }

/* Animated gradient border ring on hover */
.ta-card,
.ta-product {
    position: relative;
}
.ta-card[data-ta-tilt]::after,
.ta-product[data-ta-tilt]::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.5), rgba(192, 38, 211, 0.4), rgba(110, 38, 255, 0.45), rgba(0, 212, 255, 0.35));
    background-size: 200% 200%;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
    animation: ta-border-shift 6s ease-in-out infinite;
}
.ta-card[data-ta-tilt]:hover::after,
.ta-product[data-ta-tilt]:hover::after { opacity: 1; }
@keyframes ta-border-shift {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Product card image hover treatment */
.ta-product[data-ta-tilt] .ta-product__media img {
    transition: transform 700ms var(--ta-ease-out), filter 500ms ease;
}
.ta-product[data-ta-tilt]:hover .ta-product__media img {
    transform: scale(1.08) rotate(-1deg);
    filter: saturate(1.1) brightness(1.06);
}

/* Purity badge — subtle pulse on hover */
.ta-product[data-ta-tilt]:hover .ta-product__purity {
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.45);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 3. BUTTON REFINEMENT — magnetic hover, glow pulse, gradient sheen
 * ───────────────────────────────────────────────────────────────────────── */

.ta-btn {
    --ta-btn-mx: 50%;
    --ta-btn-my: 50%;
}

/* Sheen pass — animated highlight sweeping across primary buttons on hover */
.ta-btn--primary::after,
.ta-btn--gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 700ms var(--ta-ease-out);
    pointer-events: none;
    mix-blend-mode: overlay;
}
.ta-btn--primary:hover::after,
.ta-btn--gold:hover::after {
    transform: translateX(120%);
}

/* Codex Cycle 4 audit fix — primary CTA contrast (WCAG 1.4.3):
 *
 * The original `--ta-grad-cta` (#C026D3 → #6E26FF) produces white-text contrast
 * of 3.64:1 at the magenta end, which fails AA for 14-px-bold body text. We
 * darken the local gradient stops for the primary CTA only (does NOT touch the
 * `--ta-magenta` token used for accents/borders elsewhere) and we lower the
 * mouse-follow white-radial alpha so the cursor-center contrast no longer drops
 * below AA. Resulting white-text contrast is ~5.0:1 at the lightest stop and
 * ~5.4:1 at the darker end. */
.ta-btn--primary {
    background-image:
        radial-gradient(circle 120px at var(--ta-btn-mx) var(--ta-btn-my), rgba(255, 255, 255, 0.10), transparent 70%),
        linear-gradient(135deg, #C70F73 0%, #5B1AD1 100%);
    transition: background 220ms var(--ta-ease), transform 220ms var(--ta-ease), box-shadow 280ms var(--ta-ease);
}
/* Gold CTA already uses black text on a yellow/amber gradient — the white
 * radial highlight is fine here; only the magenta CTA needed the fix. */
.ta-btn--gold {
    background-image:
        radial-gradient(circle 120px at var(--ta-btn-mx) var(--ta-btn-my), rgba(255, 255, 255, 0.32), transparent 70%),
        var(--ta-grad-titan);
    transition: background 220ms var(--ta-ease), transform 220ms var(--ta-ease), box-shadow 280ms var(--ta-ease);
}

/* Primary CTA glow pulse on rest. Toned: peak alpha was 0.55, now 0.25 so the
 * button feels confident, not aggressive. */
@media (prefers-reduced-motion: no-preference) {
    .ta-btn--primary { animation: ta-cta-pulse 5s ease-in-out infinite; }
}
@keyframes ta-cta-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(192, 38, 211, 0.16), 0 0 36px rgba(192, 38, 211, 0.08); }
    50%      { box-shadow: 0 0 24px rgba(192, 38, 211, 0.25), 0 0 48px rgba(192, 38, 211, 0.12); }
}

/* Press feedback — quick scale-down on active */
.ta-btn:active { transform: translateY(0) scale(0.97); }

/* ─────────────────────────────────────────────────────────────────────────
 * 4. SECTION DIVIDERS — gradient blend + animated wave
 * ───────────────────────────────────────────────────────────────────────── */

.ta-section + .ta-section {
    position: relative;
}
.ta-section + .ta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 70%;
    max-width: 640px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.45), rgba(192, 38, 211, 0.40), rgba(0, 212, 255, 0.45), transparent);
    background-size: 200% 100%;
    transform: translateX(-50%);
    opacity: 0.18;
    animation: ta-divider-shift 10s ease-in-out infinite;
}
@keyframes ta-divider-shift {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 5. LOADING STATES — branded spinner + skeleton screens
 * ───────────────────────────────────────────────────────────────────────── */

.ta-loader {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--ta-cyan-bolt) 70deg, var(--ta-magenta) 180deg, var(--ta-royal-purple) 290deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 5px, #000 7px);
            mask: radial-gradient(circle, transparent 5px, #000 7px);
    animation: ta-spin 0.9s linear infinite;
    vertical-align: middle;
}
@keyframes ta-spin { to { transform: rotate(360deg); } }

.ta-loader--lg { width: 36px; height: 36px; }
.ta-loader--xl { width: 56px; height: 56px; }

/* Skeleton card — shimmer placeholder for product rails */
.ta-skeleton {
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0)    0%,
            rgba(0, 212, 255, 0.08)  50%,
            rgba(255, 255, 255, 0)  100%);
    background-size: 200% 100%;
    border-radius: var(--ta-r-md);
    animation: ta-skeleton-shimmer 1.6s linear infinite;
}
@keyframes ta-skeleton-shimmer {
    from { background-position: -100% 0; }
    to   { background-position:  100% 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 6. EMPTY-STATE / 404 — animated cosmic illustrations
 * ───────────────────────────────────────────────────────────────────────── */

.titanamino-empty-state {
    position: relative;
    overflow: hidden;
}
.titanamino-empty-state::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle 200px at 20% 30%, rgba(110, 38, 255, 0.18), transparent 60%),
        radial-gradient(circle 240px at 80% 70%, rgba(192, 38, 211, 0.12), transparent 60%);
    filter: blur(20px);
    opacity: 0.7;
    pointer-events: none;
}

.ta-illustration-orbit {
    width: 140px;
    height: 140px;
    position: relative;
    margin: 0 auto var(--ta-s-6);
}
.ta-illustration-orbit::before,
.ta-illustration-orbit::after,
.ta-illustration-orbit > span {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed;
}
.ta-illustration-orbit::before { border-color: rgba(0, 212, 255, 0.42); animation: ta-spin-slow 22s linear infinite; }
.ta-illustration-orbit::after  { inset: 14%; border-color: rgba(192, 38, 211, 0.38); animation: ta-spin-slow 16s linear infinite reverse; }
.ta-illustration-orbit > span  { inset: 28%; border-color: rgba(0, 212, 255, 0.35); animation: ta-spin-slow 11s linear infinite; }
.ta-illustration-orbit > b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ta-cyan-bolt);
    font-size: 2rem;
    font-weight: 900;
    font-family: var(--ta-font-display);
    background: radial-gradient(circle, rgba(0, 212, 255, 0.12) 0%, transparent 65%);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 7. FORM REFINEMENT — smoother focus, gradient underline glow
 * ───────────────────────────────────────────────────────────────────────── */

.ta-input,
.ta-select,
.ta-textarea,
.rzco__input,
.rzco__select,
.rzco__textarea {
    position: relative;
    transition: border-color 280ms var(--ta-ease), box-shadow 280ms var(--ta-ease), background 280ms var(--ta-ease), transform 220ms var(--ta-ease);
}
.ta-input:focus,
.ta-select:focus,
.ta-textarea:focus,
.rzco__input:focus,
.rzco__select:focus,
.rzco__textarea:focus {
    transform: translateY(-1px);
}

/* Label scale-up on the label sibling of focused input (depends on markup order) */
.rzco__field:focus-within .rzco__label {
    color: var(--ta-magenta);
    transition: color 200ms ease;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 8. NAV LINK underline animation refinement
 * ───────────────────────────────────────────────────────────────────────── */

.ta-nav__link::after {
    height: 2px;
    background-size: 200% 100%;
    background-image: linear-gradient(90deg, var(--ta-cyan-bolt), var(--ta-magenta), var(--ta-cyan-bolt));
    animation: ta-nav-shimmer 4s linear infinite paused;
}
.ta-nav__link:hover::after,
.ta-nav__link.current-menu-item::after { animation-play-state: running; }
@keyframes ta-nav-shimmer {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 9. MOBILE POLISH — refined menu animation, mobile hero scaling
 * ───────────────────────────────────────────────────────────────────────── */

/* Override style.css `display: none` so max-height/opacity can animate.
 * Display remains `block` (mobile) / `none` (desktop) per media query. */
@media (max-width: 1024px) {
    .ta-mobile-menu {
        display: block;
        overflow: hidden;
        max-height: 0;
        transition: max-height 380ms var(--ta-ease-out), opacity 280ms var(--ta-ease);
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .ta-mobile-menu.is-open {
        max-height: 70vh;
        opacity: 1;
        padding-top: var(--ta-s-6);
        padding-bottom: var(--ta-s-6);
    }
}
.ta-mobile-menu__link {
    transform: translateX(-12px);
    opacity: 0;
    transition: transform 360ms var(--ta-ease-out), opacity 280ms ease;
}
.ta-mobile-menu.is-open .ta-mobile-menu__link {
    transform: translateX(0);
    opacity: 1;
}
.ta-mobile-menu.is-open .ta-mobile-menu__list li:nth-child(1)  .ta-mobile-menu__link { transition-delay:  60ms; }
.ta-mobile-menu.is-open .ta-mobile-menu__list li:nth-child(2)  .ta-mobile-menu__link { transition-delay: 110ms; }
.ta-mobile-menu.is-open .ta-mobile-menu__list li:nth-child(3)  .ta-mobile-menu__link { transition-delay: 160ms; }
.ta-mobile-menu.is-open .ta-mobile-menu__list li:nth-child(4)  .ta-mobile-menu__link { transition-delay: 210ms; }
.ta-mobile-menu.is-open .ta-mobile-menu__list li:nth-child(5)  .ta-mobile-menu__link { transition-delay: 260ms; }
.ta-mobile-menu.is-open .ta-mobile-menu__list li:nth-child(6)  .ta-mobile-menu__link { transition-delay: 310ms; }

@media (max-width: 720px) {
    .ta-hero { padding: clamp(2rem, 8vw, 4rem) 0 clamp(2rem, 6vw, 3rem); }
    .ta-hero__title { font-size: clamp(2rem, 11vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 10. FOOTER REFINEMENT — animated titan accent, layered gradient
 * ───────────────────────────────────────────────────────────────────────── */

.ta-footer {
    position: relative;
    overflow: hidden;
}
.ta-footer::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle at bottom left, rgba(110, 38, 255, 0.10), transparent 60%);
    filter: blur(50px);
    pointer-events: none;
}
.ta-footer::before {
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.55), rgba(192, 38, 211, 0.50), rgba(110, 38, 255, 0.45), rgba(0, 212, 255, 0.55), transparent);
    background-size: 200% 100%;
    opacity: 0.7;
    animation: ta-footer-top-shift 14s linear infinite;
}
@keyframes ta-footer-top-shift {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 10b. BRAND MARK — bundled titan+TITAN AMINO lockup
 *
 * The bundled logo file is the titanamino-and-wordmark combo, ~1.24:1 aspect.
 * We render it inside `.ta-brand__mark--lockup` (wider than tall, no
 * gradient backdrop — the logo speaks for itself), with a subtle glow
 * halo behind it and a soft idle-breathe.
 * ───────────────────────────────────────────────────────────────────────── */

.ta-brand { transition: transform 280ms var(--ta-ease); align-items: center; }
.ta-brand:hover { transform: translateY(-1px); }

/* Default square mark (used when merchant uploads a custom mark via Customizer
 * — the square gradient backdrop still applies). */
.ta-brand__mark {
    transition: box-shadow 320ms var(--ta-ease), transform 320ms var(--ta-ease);
}
.ta-brand:hover .ta-brand__mark {
    box-shadow: var(--ta-glow-pink), 0 0 30px rgba(0, 212, 255, 0.45);
    transform: rotate(-3deg) scale(1.04);
}

/* Lockup mark — wide aspect, transparent background, soft glow ring */
.ta-brand__mark--lockup {
    width: clamp(112px, 14vw, 168px);
    height: auto;
    aspect-ratio: 1136 / 912;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    position: relative;
    flex-shrink: 0;
    display: block;
    filter:
        drop-shadow(0 0 14px rgba(192, 38, 211, 0.42))
        drop-shadow(0 0 22px rgba(0, 212, 255, 0.18));
}
.ta-brand__mark--lockup picture,
.ta-brand__mark--lockup img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.ta-brand--lockup:hover .ta-brand__mark--lockup {
    box-shadow: none;
    transform: translateY(-1px);
    filter:
        drop-shadow(0 0 22px rgba(192, 38, 211, 0.58))
        drop-shadow(0 0 36px rgba(0, 212, 255, 0.32));
}
.ta-brand--lockup .ta-brand__tag--lockup {
    margin-left: var(--ta-s-3);
    align-self: center;
}
.ta-brand__mark--lockup-sm {
    width: clamp(96px, 10vw, 128px);
}

@media (max-width: 640px) {
    .ta-brand--lockup .ta-brand__tag--lockup { display: none; }
    .ta-brand__mark--lockup { width: clamp(96px, 28vw, 132px); }
}

@media (prefers-reduced-motion: no-preference) {
    .ta-brand__mark--lockup picture,
    .ta-brand__mark--lockup img {
        animation: ta-brand-breathe 5s ease-in-out infinite;
        transform-origin: center;
    }
}
@keyframes ta-brand-breathe {
    0%, 100% { transform: scale(1)    rotate(0); }
    50%      { transform: scale(1.025) rotate(0.4deg); }
}

/* Hero art — keep the round aurora circle from the base `.ta-hero__art` rule
 * (style.css) and just center the lockup image *inside* that true circle.
 *
 * Why: the lockup image is wider than tall (1136 × 912 ≈ 1.246:1) and its
 * visual weight sits low because the Titan Amino wordmark anchors below the titan.
 * If we let the container stretch to match the image aspect ratio, the
 * "circle" becomes an ellipse and the logo ends up off-center anyway.
 * Instead: keep the square circle, fit the image by width, and pull the
 * image upward enough that the *visual* midpoint of (titan + wordmark)
 * sits on the circle's geometric center.
 */
.ta-hero__art.ta-hero__art--lockup {
    /* Force the true-circle proportions — overrides the wide aspect from earlier.
     * Toned: aurora background dimmed to a soft glow tint, halo box-shadow
     * cut to ~40% of the original so the circle is a backdrop, not a beacon. */
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(110, 38, 255, 0.32) 0%, rgba(37, 99, 235, 0.18) 45%, rgba(192, 38, 211, 0.10) 85%, transparent 100%);
    box-shadow: 0 0 60px rgba(110, 38, 255, 0.24), 0 0 120px rgba(192, 38, 211, 0.10);
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: visible;
    display: grid;
    place-items: center;
}
/* Drop the soft cosmic-cloud halos that were drifting behind the lockup — they
 * weren't visible against the aurora circle anyway and they were making the
 * background read as TWO circles at once. */
.ta-hero__art.ta-hero__art--lockup::before,
.ta-hero__art.ta-hero__art--lockup::after {
    display: none;
}
.ta-hero__art.ta-hero__art--lockup picture,
.ta-hero__art.ta-hero__art--lockup img {
    /* Width keeps the image inside the circle horizontally; height auto preserves
     * the source aspect ratio. The translateY(-6%) inside the keyframes pulls
     * the image up so the titan body's center lines up with the circle's
     * geometric center, balancing the wordmark's downward visual weight.
     * Drop-shadows toned ~50% from the original. */
    width: 82%;
    height: auto;
    max-height: 90%;
    object-fit: contain;
    object-position: center center;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    filter:
        drop-shadow(0 0 16px rgba(0, 212, 255, 0.28))
        drop-shadow(0 0 28px rgba(192, 38, 211, 0.18));
    animation: ta-titan-pulse-lockup 6s ease-in-out infinite;
}
@keyframes ta-titan-pulse-lockup {
    0%, 100% { transform: translateY(-6%) scale(1)    rotate(0); }
    50%      { transform: translateY(-6%) scale(1.04) rotate(0.4deg); }
}
/* When the user prefers reduced motion the animation is killed elsewhere; this
 * static fallback keeps the upward offset so the visual centering still holds. */
@media (prefers-reduced-motion: reduce) {
    .ta-hero__art.ta-hero__art--lockup picture,
    .ta-hero__art.ta-hero__art--lockup img {
        transform: translateY(-6%);
    }
}

/* In-stock pill animation on product pages — pulse the green dot */
.ta-single-product .stock.in-stock::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: 1px;
    box-shadow: 0 0 8px currentColor;
    animation: ta-stock-pulse 2.4s ease-in-out infinite;
}
@keyframes ta-stock-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(0.85); }
}

/* In-stock pill animation on product pages — pulse the green dot */
.ta-single-product .stock.in-stock::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: 1px;
    box-shadow: 0 0 8px currentColor;
    animation: ta-stock-pulse 2.4s ease-in-out infinite;
}
@keyframes ta-stock-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(0.85); }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 11. PRODUCT DETAIL POLISH — gradient accent on title + price
 * ───────────────────────────────────────────────────────────────────────── */

.ta-single-product .product_title {
    position: relative;
    display: inline-block;
}
.ta-single-product .product_title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ta-cyan-bolt), var(--ta-magenta));
    box-shadow: 0 0 14px rgba(192, 38, 211, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 12. SCROLL PROGRESS BAR (top-of-page indicator)
 * ───────────────────────────────────────────────────────────────────────── */

.ta-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--ta-cyan-bolt), var(--ta-magenta), var(--ta-royal-purple));
    box-shadow: 0 0 10px rgba(192, 38, 211, 0.6);
    z-index: 99999;
    transition: width 100ms linear;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 12b. CSP-FRIENDLY UTILITY CLASSES — replace inline style= attributes
 *
 * Codex Cycle 4 audit (#7): inline `style=` attributes require
 * `style-src 'unsafe-inline'` under strict CSP. We move 404.php /
 * empty-state.php / checkout.js loader inline styles into named classes
 * here so site CSP can be tightened without `'unsafe-inline'`.
 * ───────────────────────────────────────────────────────────────────────── */

/* 404 cosmic backdrop */
.ta-404-main          { position: relative; overflow: hidden; }
.ta-404-backdrop      { position: absolute; inset: 0; pointer-events: none; }
.ta-404-glow          { position: absolute; width: 60%; height: 80%; filter: blur(60px); }
.ta-404-glow--tl      { top: -10%; left: -10%;  background: radial-gradient(circle, rgba(192,38,211,0.18), transparent 60%); }
.ta-404-glow--br      { bottom: -10%; right: -10%; background: radial-gradient(circle, rgba(110,38,255,0.22), transparent 60%); }
.ta-404-inner         { text-align: center; padding: var(--ta-s-20) 0; position: relative; }
.ta-404-orbit         { width: 200px; height: 200px; }
.ta-404-eyebrow       { justify-content: center; margin-top: var(--ta-s-6); }
.ta-404-title         { margin-top: var(--ta-s-4); }
.ta-404-lede          { margin: var(--ta-s-6) auto; max-width: 52ch; }
.ta-404-actions       { margin-top: var(--ta-s-8); flex-wrap: wrap; gap: var(--ta-s-3); }
.ta-404-search        { margin-top: var(--ta-s-10); display: flex; gap: var(--ta-s-2); justify-content: center; flex-wrap: wrap; }
.ta-404-search input  { min-width: 280px; max-width: 420px; }

/* Empty-state */
.titanamino-empty-state             { text-align: center; padding: clamp(2rem, 6vw, var(--ta-s-16)); }
.titanamino-empty-state__orbit      { width: 140px; height: 140px; margin: 0 auto var(--ta-s-5); }
.titanamino-empty-state__title      { margin-top: var(--ta-s-4); }
.titanamino-empty-state__body       { margin: var(--ta-s-4) auto 0; max-width: 48ch; }
.titanamino-empty-state__cta-wrap   { margin-top: var(--ta-s-6); }

/* Centered bundled logo lockup inside the orbit — drops the inline-SVG titan
 * fallback and uses the real brand asset. Sized so the rings still read as a
 * frame, not a label on the logo.
 *
 * Centering: the parent `.ta-illustration-orbit > b` uses grid + place-items:
 * center, but we override with flex here for reliability across the orbit's
 * absolute-positioned, font-size:0 inheritance. The picture box gets the
 * explicit width; the img inside stays 100% of the picture (NOT another 62%,
 * which was the previous bug — double-scaling pushed the visual center left). */
.titanamino-empty-state__mark {
    background: none;
    color: transparent;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.titanamino-empty-state__mark picture {
    display: block;
    width: clamp(72px, 60%, 92px);
    height: auto;
    margin: 0 auto;
}
.titanamino-empty-state__mark img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    filter:
        drop-shadow(0 0 10px rgba(0, 212, 255, 0.55))
        drop-shadow(0 0 20px rgba(192, 38, 211, 0.35));
}

/* Checkout submit-button loader (replaces inline style attribute on the spinner span) */
.ta-loader--inline { margin-right: 8px; vertical-align: -3px; }

/* ─────────────────────────────────────────────────────────────────────────
 * 12d. CENTERED HERO LAYOUT — titan lockup centered, floating stats, pill nav
 *
 * Replaces the two-column "headline left, art right" hero. The titan
 * lockup image becomes the focal element; two stat callouts float at its
 * left and right shoulders; a gradient pill nav strip sits beneath.
 *
 * On mobile the stats reflow inline as a row above the logo so they remain
 * readable without crashing into the titan.
 * ───────────────────────────────────────────────────────────────────────── */

.ta-hero--centered {
    padding: clamp(2rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    overflow: hidden;
    /* Pure black canvas behind the titan lockup — covers the body's
     * faint constellation overlay AND suppresses the hero-specific nebula
     * and star layers below so the logo sits on solid black. */
    background: #000000;
    position: relative;
    z-index: 1;
}
.ta-hero--centered::after,
.ta-hero--centered .ta-hero__stars {
    display: none !important;
}
/* Suppress the old two-column inner so the markup left behind in any cached
 * page doesn't render twice. */
.ta-hero--centered .ta-hero__inner { display: none !important; }

.ta-hero__centered {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

.ta-hero__logo-wrap {
    --ta-hero-mx: 0.5;
    --ta-hero-my: 0.5;
    position: relative;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 1136 / 912;
    margin: 0 auto;
    transform-style: preserve-3d;
    will-change: transform;
    /* Mouse-reactive 3D tilt — `--ta-hero-mx/--ta-hero-my` are 0..1 fractions
     * of the cursor position within the hero section, updated from
     * app.js with a smooth easing pass. The result follows the mouse with
     * a gentle delay (no jitter) and snaps back to neutral on pointer-leave.
     *
     * IMPORTANT: do NOT add the legacy `ta-fade-in` class to this element —
     * that animation's final keyframe sets `transform: none` with fill-mode
     * `both`, which overrides this static transform AFTER the entrance
     * completes. Use `ta-fade-in-opacity` (opacity-only) instead. */
    transform:
        perspective(1200px)
        rotateY(calc((var(--ta-hero-mx) - 0.5) * 16deg))
        rotateX(calc((0.5 - var(--ta-hero-my)) * 12deg));
}

/* Opacity-only entrance animation — doesn't touch `transform`, so a static
 * mouse-reactive transform on the same element survives the fade. */
.ta-fade-in-opacity {
    animation: ta-fade-in-opacity 700ms var(--ta-ease) both;
}
@keyframes ta-fade-in-opacity {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Stats float in front of the logo plane and shift in the OPPOSITE direction
 * to the logo's tilt — that's what reads as parallax depth. */
.ta-hero--centered .ta-hero__stat {
    will-change: transform;
    transform: translate3d(
        calc((var(--ta-hero-mx, 0.5) - 0.5) * -10px),
        calc((var(--ta-hero-my, 0.5) - 0.5) * -10px),
        24px
    );
}
.ta-hero--centered .ta-hero__stat--left  { transform-origin: left  center; }
.ta-hero--centered .ta-hero__stat--right { transform-origin: right center; }
.ta-hero__logo-img {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.ta-hero__logo-img picture,
.ta-hero__logo-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter:
        drop-shadow(0 0 18px rgba(0, 212, 255, 0.20))
        drop-shadow(0 0 32px rgba(192, 38, 211, 0.14));
}

/* Floating stat callouts. Positioned over the upper portion of the logo
 * so they sit at the titan's wing height, not over the body or wordmark. */
.ta-hero__stat {
    position: absolute;
    z-index: 3;
    top: 24%;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.ta-hero__stat--left  { left:  4%; }
.ta-hero__stat--right { right: 4%; }
.ta-hero__stat-big {
    display: block;
    font-family: var(--ta-font-display);
    font-size: clamp(1.5rem, 2.8vw + 0.5rem, 3rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}
.ta-hero__stat-small {
    display: block;
    font-family: var(--ta-font-body);
    font-size: clamp(0.625rem, 0.6vw + 0.4rem, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 6px;
    max-width: 14ch;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
}

/* Mobile keeps the same absolute-positioned layout as desktop — stats sit
 * over the titan's wings at every viewport size. Font sizes scale down
 * via the clamp() in `.ta-hero__stat-big` / `.ta-hero__stat-small` so the
 * text stays inside the wing area without crashing into the body. */

/* Gradient pill nav — orange → magenta → cyan, matching the Titan Amino wordmark
 * gradient. Single-row on desktop; horizontal scroll on narrow viewports.
 *
 * Wrapped in `.ta-hero__pill-nav-wrap` so positioned scroll-hint chevrons
 * can sit OVER the rounded pill edges (the inner nav itself scrolls, so
 * indicators painted on its ::before/::after would scroll with content).
 * The wrap is `inline-flex` and `max-width: 100%` — same width footprint
 * as the nav so the wrap doesn't widen the centered hero column. */
.ta-hero__pill-nav-wrap {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    /* Visual padding so the chevron pills aren't clipped by ancestor overflow. */
    padding: 0;
}
.ta-hero__pill-nav {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    border-radius: 9999px;
    background:
        linear-gradient(90deg, #FF7A1E 0%, #C026D3 50%, #00D4FF 100%);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(192, 38, 211, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Smooth momentum scrolling on iOS. */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.ta-hero__pill-nav::-webkit-scrollbar { display: none; }

/* ── Scroll-hint chevrons (mobile only) ─────────────────────────────────
 * Small dark circles with white chevron arrows that float over the rounded
 * ends of the pill nav whenever the content overflows horizontally. A gentle
 * sideways nudge animation draws the eye so users discover the scroll.
 *
 * JS toggles three state classes on `.ta-hero__pill-nav-wrap`:
 *   .is-scrollable — content wider than viewport (turns chevrons ON)
 *   .is-at-start   — scrollLeft === 0 (hides LEFT chevron)
 *   .is-at-end     — scrolled all the way right (hides RIGHT chevron)
 *
 * Chevrons are inline SVG data URIs so they need no extra HTTP request and
 * inherit no theme variables. Hidden by default; only shown on viewports
 * narrow enough to actually need horizontal scrolling. */
.ta-hero__pill-nav-wrap::before,
.ta-hero__pill-nav-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.72);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 240ms var(--ta-ease);
}
.ta-hero__pill-nav-wrap::before {
    left: 4px;
    /* Left-pointing chevron ‹ */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M7.6 2.4 4 6l3.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.ta-hero__pill-nav-wrap::after {
    right: 4px;
    /* Right-pointing chevron › */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.4 2.4 8 6l-3.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* When the nav actually overflows, light up the appropriate chevrons. */
.ta-hero__pill-nav-wrap.is-scrollable::before,
.ta-hero__pill-nav-wrap.is-scrollable::after {
    opacity: 0.95;
}
/* Hide direction-specific hint when user has scrolled to that edge. */
.ta-hero__pill-nav-wrap.is-at-start::before { opacity: 0; }
.ta-hero__pill-nav-wrap.is-at-end::after    { opacity: 0; }
/* Sideways nudge animation — only the chevron that's still visible animates.
 * Left chevron nudges left, right chevron nudges right. */
.ta-hero__pill-nav-wrap.is-scrollable:not(.is-at-start)::before {
    animation: ta-pill-hint-left 1.6s ease-in-out infinite;
}
.ta-hero__pill-nav-wrap.is-scrollable:not(.is-at-end)::after {
    animation: ta-pill-hint-right 1.6s ease-in-out infinite;
}
@keyframes ta-pill-hint-left {
    0%, 100% { transform: translate(0,   -50%); }
    50%      { transform: translate(-4px, -50%); }
}
@keyframes ta-pill-hint-right {
    0%, 100% { transform: translate(0,   -50%); }
    50%      { transform: translate(4px, -50%); }
}

/* ── FAQ expand / collapse toggle ───────────────────────────────────────
 *
 * The toggle button uses the existing .ta-btn--ghost styling, plus a small
 * chevron icon that flips 180° when the more-container is open. The wrap
 * centers the button under the visible FAQ stack so it reads as a natural
 * "more below" affordance, not a sidebar control. */
.ta-faq-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--ta-s-6);
}
.ta-faq-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ta-font-display);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: transform 200ms var(--ta-ease), gap 200ms var(--ta-ease);
}
.ta-faq-toggle__icon {
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ta-faq-toggle.is-open .ta-faq-toggle__icon {
    transform: rotate(180deg);
}
.ta-faq-toggle:hover { gap: 12px; }

/* ─────────────────────────────────────────────────────────────────────────
 * RESEARCH-DOMAIN CATEGORIES
 *
 * Six category cards rendered on the front page so the catalog
 * architecture reads as designed even before products are uploaded. Each
 * card is a full clickable link to the WC taxonomy archive (or to a
 * filtered shop URL if the term hasn't been seeded yet).
 *
 * Layout:
 *   Desktop (>1100): 3 columns × 2 rows
 *   Tablet (≤1100):  2 columns × 3 rows
 *   Mobile (≤640):   horizontal scroll with edge fade + scroll-hint
 *                    chevrons (re-uses the [data-ta-scroll-hint] JS)
 *
 * Visual:
 *   - Glyph badge top-left in titan gradient
 *   - Small uppercase "tag" label under the glyph (e.g. "Incretin /
 *     glucose pathway") to give research context at a glance
 *   - Title + description body
 *   - "Browse domain →" CTA at the bottom that nudges right on hover
 *   - On hover the card lifts and a faint titan-gradient border draws in
 * ───────────────────────────────────────────────────────────────────────── */
.ta-research-domains-wrap { position: relative; }
.ta-research-domains {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ta-s-4);
}
.ta-research-domain {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ta-s-3);
    padding: var(--ta-s-5);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
        rgba(10, 1, 24, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ta-r-md);
    color: var(--ta-text-strong);
    text-decoration: none;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition:
        transform 280ms var(--ta-ease),
        border-color 280ms ease,
        box-shadow 280ms ease;
    overflow: hidden;
    isolation: isolate;
}
.ta-research-domain::before {
    /* Titan-gradient top accent that draws in on hover. */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #FF7A1E 0%, #C026D3 50%, #00D4FF 100%);
    transform: scaleX(0.3);
    transform-origin: left center;
    opacity: 0.6;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 240ms ease;
}
.ta-research-domain:hover,
.ta-research-domain:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 212, 255, 0.18),
        0 0 40px rgba(192, 38, 211, 0.14);
    outline: none;
}
.ta-research-domain:hover::before,
.ta-research-domain:focus-visible::before {
    transform: scaleX(1);
    opacity: 1;
}
.ta-research-domain__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ta-r-md);
    background: var(--ta-grad-aurora);
    color: var(--ta-text-strong);
    font-family: var(--ta-font-mono);
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(192, 38, 211, 0.25);
}
.ta-research-domain__tag {
    font-family: var(--ta-font-display);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ta-cyan-bolt);
}
.ta-research-domain__title {
    margin: 0;
    font-family: var(--ta-font-display);
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--ta-text-strong);
}
.ta-research-domain__body {
    margin: 0;
    color: var(--ta-text-soft);
    font-size: 0.86rem;
    line-height: 1.5;
    /* Clamp long descriptions to keep card heights consistent. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ta-research-domain__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--ta-s-2);
    font-family: var(--ta-font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ta-pink-glow);
    transition: gap 200ms var(--ta-ease), color 200ms ease;
}
.ta-research-domain:hover .ta-research-domain__cta,
.ta-research-domain:focus-visible .ta-research-domain__cta {
    color: var(--ta-cyan-bolt);
    gap: 10px;
}
.ta-research-domain__cta svg { transition: transform 200ms ease; }
.ta-research-domain:hover .ta-research-domain__cta svg,
.ta-research-domain:focus-visible .ta-research-domain__cta svg { transform: translateX(2px); }

/* Tablet — 2 columns. */
@media (max-width: 1100px) {
    .ta-research-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile — horizontal scroll, snap, edge-mask + scroll-hint chevrons. */
@media (max-width: 640px) {
    .ta-research-domains-wrap {
        margin: 0 calc(var(--ta-s-6) * -1);
        padding: var(--ta-s-2) 0;
    }
    .ta-research-domains {
        display: flex;
        gap: var(--ta-s-3);
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: var(--ta-s-2) var(--ta-s-6);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    }
    .ta-research-domains::-webkit-scrollbar { display: none; }
    .ta-research-domain {
        flex: 0 0 80%;
        max-width: 320px;
        scroll-snap-align: center;
    }
    /* Re-use the scroll-hint chevron pattern — identical to trust badges. */
    .ta-research-domains-wrap::before,
    .ta-research-domains-wrap::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.72);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px 14px;
        pointer-events: none;
        z-index: 5;
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity 240ms var(--ta-ease);
    }
    .ta-research-domains-wrap::before {
        left: 4px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M7.6 2.4 4 6l3.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }
    .ta-research-domains-wrap::after {
        right: 4px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.4 2.4 8 6l-3.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }
    .ta-research-domains-wrap.is-scrollable::before,
    .ta-research-domains-wrap.is-scrollable::after { opacity: 0.95; }
    .ta-research-domains-wrap.is-at-start::before  { opacity: 0; }
    .ta-research-domains-wrap.is-at-end::after     { opacity: 0; }
    .ta-research-domains-wrap.is-scrollable:not(.is-at-start)::before {
        animation: ta-pill-hint-left 1.6s ease-in-out infinite;
    }
    .ta-research-domains-wrap.is-scrollable:not(.is-at-end)::after {
        animation: ta-pill-hint-right 1.6s ease-in-out infinite;
    }
}

/* ── Trust badges — mobile horizontal scroll variant ────────────────────
 *
 * Desktop: the wrap is a transparent container; the inner `.ta-trust-badges`
 * keeps its 4-column grid layout unchanged.
 *
 * Mobile (≤ 640px): the wrap turns the inner into a horizontally-scrolling
 * flex row of fixed-width cards, with a mask-image edge fade and animated
 * scroll-hint chevrons on the left and right (powered by the same
 * `[data-ta-scroll-hint]` JS handler used by the pill-nav).
 *
 * The chevrons use the existing `ta-pill-hint-left/right` keyframes above.
 */
.ta-trust-badges-wrap { position: relative; }
@media (max-width: 640px) {
    /* Negative margin lets the scroll row break out of the container's
     * gutter so cards can drift right to the viewport edge under the mask
     * fade — keeps the layout feeling spacious. */
    .ta-trust-badges-wrap {
        margin: 0 calc(var(--ta-s-6) * -1);
        padding: var(--ta-s-2) 0;
    }
    .ta-trust-badges-wrap .ta-trust-badges {
        display: flex;
        gap: var(--ta-s-3);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: var(--ta-s-2) var(--ta-s-6);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    }
    .ta-trust-badges-wrap .ta-trust-badges::-webkit-scrollbar { display: none; }
    .ta-trust-badges-wrap .ta-trust-badge {
        flex: 0 0 78%;
        max-width: 320px;
        scroll-snap-align: center;
    }
    /* Scroll-hint chevrons — same pattern as the hero pill nav. */
    .ta-trust-badges-wrap::before,
    .ta-trust-badges-wrap::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.72);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px 14px;
        pointer-events: none;
        z-index: 5;
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity 240ms var(--ta-ease);
    }
    .ta-trust-badges-wrap::before {
        left: 4px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M7.6 2.4 4 6l3.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }
    .ta-trust-badges-wrap::after {
        right: 4px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.4 2.4 8 6l-3.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }
    .ta-trust-badges-wrap.is-scrollable::before,
    .ta-trust-badges-wrap.is-scrollable::after { opacity: 0.95; }
    .ta-trust-badges-wrap.is-at-start::before  { opacity: 0; }
    .ta-trust-badges-wrap.is-at-end::after     { opacity: 0; }
    .ta-trust-badges-wrap.is-scrollable:not(.is-at-start)::before {
        animation: ta-pill-hint-left 1.6s ease-in-out infinite;
    }
    .ta-trust-badges-wrap.is-scrollable:not(.is-at-end)::after {
        animation: ta-pill-hint-right 1.6s ease-in-out infinite;
    }
}

.ta-hero__pill-link {
    flex: 0 0 auto;
    padding: 14px 24px;
    border-radius: 9999px;
    font-family: var(--ta-font-display);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    transition: background 220ms var(--ta-ease), transform 220ms var(--ta-ease);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.ta-hero__pill-link:hover,
.ta-hero__pill-link:focus-visible {
    background: rgba(0, 0, 0, 0.22);
    color: #FFFFFF;
    transform: translateY(-1px);
    outline: none;
}
.ta-hero__pill-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
@media (max-width: 520px) {
    .ta-hero__pill-link { padding: 12px 18px; font-size: 0.75rem; letter-spacing: 0.12em; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 12f. "ALIVE" MOTION LAYER — floating drift, gradient pans, draw-in accents
 *
 * A coordinated set of subtle continuous animations so the page reads as
 * gently floating in 3D space, matching the vial-drift video. Every effect
 * is gated under `prefers-reduced-motion: no-preference` via the bottom
 * guardrail block.
 * ───────────────────────────────────────────────────────────────────────── */

/* Floating drift — applied to feature/trust/product cards so they bob up and
 * down out of sync with each other. Phase offset per card via :nth-child. */
@keyframes ta-card-drift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.ta-grid--4 > .ta-card,
.ta-grid--3 > .ta-card,
.ta-product-rail > .ta-product,
.ta-product-grid > .ta-product {
    animation: ta-card-drift 7s ease-in-out infinite;
}
.ta-grid--4 > .ta-card:nth-child(1)                  { animation-delay: 0s;    }
.ta-grid--4 > .ta-card:nth-child(2)                  { animation-delay: 1.4s;  }
.ta-grid--4 > .ta-card:nth-child(3)                  { animation-delay: 2.8s;  }
.ta-grid--4 > .ta-card:nth-child(4)                  { animation-delay: 4.2s;  }
.ta-grid--3 > .ta-card:nth-child(1)                  { animation-delay: 0s;    }
.ta-grid--3 > .ta-card:nth-child(2)                  { animation-delay: 1.8s;  }
.ta-grid--3 > .ta-card:nth-child(3)                  { animation-delay: 3.6s;  }
.ta-product-rail > .ta-product:nth-child(2n)         { animation-delay: 1.2s;  }
.ta-product-rail > .ta-product:nth-child(3n)         { animation-delay: 2.6s;  }
.ta-product-rail > .ta-product:nth-child(4n)         { animation-delay: 3.8s;  }
.ta-product-grid > .ta-product:nth-child(2n)         { animation-delay: 1.4s;  }
.ta-product-grid > .ta-product:nth-child(3n)         { animation-delay: 2.8s;  }
.ta-product-grid > .ta-product:nth-child(4n+1)       { animation-delay: 4.2s;  }
/* Hover pauses the drift so the user's interaction isn't fighting motion */
.ta-product-rail > .ta-product:hover,
.ta-product-grid > .ta-product:hover,
.ta-grid--4 > .ta-card:hover,
.ta-grid--3 > .ta-card:hover {
    animation-play-state: paused;
}

/* Pill nav — static gradient (panning animation removed per merchant request). */

/* Section eyebrow draw-in — `.ta-eyebrow::before` is the dash to the left of
 * the eyebrow text. Pure-CSS keyframe so the dash draws in once on first
 * paint and stays visible regardless of JS state (no-JS fallback safe). */
.ta-eyebrow::before {
    animation: ta-eyebrow-draw 700ms var(--ta-ease-out) 200ms both;
}
@keyframes ta-eyebrow-draw {
    from { width: 0;    opacity: 0; }
    to   { width: 28px; opacity: 1; }
}

/* Hero stat counter — handled by app.js. CSS just adds a slight tabular-nums
 * + monospace style WHILE counting so the digit width doesn't jitter as the
 * value increments. */
.ta-hero__stat-big.is-counting {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Marquee-style "live" indicator dots — for badges/status pills that should
 * feel actively monitored. Pulse from inner glow to outer glow. */
.ta-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ta-success);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: ta-pulse-dot 2.4s ease-out infinite;
}
@keyframes ta-pulse-dot {
    0%   { box-shadow: 0 0 0 0   rgba(52, 211, 153, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(52, 211, 153, 0);    }
}

/* Subtle continuous gradient sheen on the hero stat-big numbers. Uses its
 * own keyframe with a small repeating period so the loop is seamless on
 * the short text. */
.ta-hero__stat-big {
    background: repeating-linear-gradient(90deg,
        #FFFFFF   0px,
        #FFE6F4  60px,
        #FFFFFF 120px
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ta-stat-shimmer 10s linear infinite;
}
@keyframes ta-stat-shimmer {
    0%   { background-position-x:    0px; }
    100% { background-position-x: -120px; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 12e. VIDEO STRIP — lab b-roll under the hero
 *
 * Full-width video band that autoplays once scrolled into view (handled in
 * app.js with IntersectionObserver so the bytes aren't fetched until needed).
 * 16:9 aspect ratio, capped at 60vh so it never dominates on tall viewports.
 * Top/bottom gradient bleed fades the video edges into the surrounding black.
 * ───────────────────────────────────────────────────────────────────────── */

.ta-video-strip {
    background: #000;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}
.ta-video-strip__inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 60vh;
    overflow: hidden;
}
.ta-video-strip__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    /* Lock the video down so visitors can't pause, scrub, save, or focus it.
     * Combined with the .ta-video-strip__shield overlay below + the
     * disablepictureinpicture/disableremoteplayback/controlslist attributes
     * on the <video> element, all standard "interact with video" affordances
     * are off. */
    pointer-events: none !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    outline: none;
}
.ta-video-strip__video::-webkit-media-controls,
.ta-video-strip__video::-webkit-media-controls-enclosure,
.ta-video-strip__video::-webkit-media-controls-panel,
.ta-video-strip__video::-webkit-media-controls-play-button,
.ta-video-strip__video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}
/* Vignette / edge-fade overlay — three stacked layers blend the video
 * edges to pure black on all four sides so the rectangle dissolves into
 * the surrounding page background instead of cutting against it as a hard
 * box. Tuned aggressive so the visible video is roughly an oval inside the
 * frame and the corners + edges are fully #000 — no hard rectangle anywhere.
 *
 *   Layer 1 (radial)         — tight elliptical vignette: video stays clean
 *                              only in the inner ~25%, mid-ring darkens
 *                              fast, corners fully black well before edge.
 *   Layer 2 (vertical linear)— top and bottom edges fade to black over
 *                              ~32% of the height each.
 *   Layer 3 (horizontal linear) — left and right edges fade to black over
 *                              ~22% of the width each.
 *
 * The three layers composite additively (each contributes its own black
 * opacity), so the corners get the strongest fade. */
.ta-video-strip__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 90% at 50% 50%,
            transparent 22%,
            rgba(0, 0, 0, 0.45) 50%,
            rgba(0, 0, 0, 0.85) 78%,
            #000 95%
        ),
        linear-gradient(180deg,
            #000 0%,
            rgba(0, 0, 0, 0.85) 8%,
            transparent 32%,
            transparent 68%,
            rgba(0, 0, 0, 0.85) 92%,
            #000 100%
        ),
        linear-gradient(90deg,
            #000 0%,
            rgba(0, 0, 0, 0.85) 6%,
            transparent 22%,
            transparent 78%,
            rgba(0, 0, 0, 0.85) 94%,
            #000 100%
        );
}
/* Click-shield — sits on top of the video and the gradient overlay, catches
 * every pointer/touch/context-menu event so the video underneath never sees
 * a click. Transparent, decorative, aria-hidden. */
.ta-video-strip__shield {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: default;
}


/* On narrow viewports, shorten the strip — a tall 16:9 on a phone is too
 * heavy a block to sit between hero and trust badges. */
@media (max-width: 720px) {
    .ta-video-strip__inner { aspect-ratio: 4 / 3; max-height: 50vh; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 12c. PEPTAURA-STYLE STRUCTURE — category pills, A-Z directory, dense cards
 *
 * Structural pieces only — every color and font token comes from the existing
 * palette so the cosmic visual identity is unchanged.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Category filter pills (horizontal scrollable) ─────────────────── */
.ta-pills {
    display: flex;
    align-items: center;
    gap: var(--ta-s-2);
    padding: var(--ta-s-2) 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--ta-magenta) transparent;
    -webkit-overflow-scrolling: touch;
}
.ta-pills::-webkit-scrollbar { height: 6px; }
.ta-pills::-webkit-scrollbar-thumb { background: var(--ta-grad-cta); border-radius: var(--ta-r-pill); }

.ta-pills__pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--ta-r-pill);
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid var(--ta-stroke);
    color: var(--ta-text-soft);
    font-family: var(--ta-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: all 220ms var(--ta-ease);
}
.ta-pills__pill:hover,
.ta-pills__pill:focus-visible {
    border-color: var(--ta-stroke-strong);
    background: rgba(0, 212, 255, 0.14);
    color: var(--ta-cyan-bolt);
}
.ta-pills__pill--all {
    background: var(--ta-grad-cta);
    border-color: transparent;
    color: var(--ta-text-strong);
}
.ta-pills__pill--all:hover,
.ta-pills__pill--all:focus-visible {
    color: var(--ta-text-strong);
    transform: translateY(-1px);
}
.ta-pills__count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ta-r-pill);
    background: rgba(192, 38, 211, 0.16);
    color: var(--ta-pink-glow);
    font-family: var(--ta-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0;
}
.ta-pills__pill--all .ta-pills__count { background: rgba(0,0,0,0.28); color: var(--ta-cyan-bolt); }

/* ── A-Z jump strip ────────────────────────────────────────────────── */
.ta-directory__jump {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: var(--ta-s-3) 0 var(--ta-s-6);
    border-bottom: 1px solid var(--ta-stroke);
    margin-bottom: var(--ta-s-8);
    position: sticky;
    top: var(--ta-header-h);
    z-index: 10;
    background: rgba(5, 0, 16, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.ta-directory__jump-letter {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--ta-r-sm);
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid var(--ta-stroke);
    color: var(--ta-text-soft);
    font-family: var(--ta-font-display);
    font-size: 0.8125rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 180ms var(--ta-ease);
}
.ta-directory__jump-letter:hover,
.ta-directory__jump-letter:focus-visible {
    background: var(--ta-grad-cta);
    border-color: transparent;
    color: var(--ta-text-strong);
    transform: translateY(-1px);
}
.ta-directory__jump-letter.is-inactive {
    opacity: 0.32;
    cursor: not-allowed;
    background: transparent;
    color: var(--ta-text-dim);
}

/* ── Directory groups ──────────────────────────────────────────────── */
.ta-directory__group { margin-bottom: var(--ta-s-12); scroll-margin-top: calc(var(--ta-header-h) + 60px); }
.ta-directory__letter {
    display: flex;
    align-items: baseline;
    gap: var(--ta-s-3);
    margin: 0 0 var(--ta-s-6);
    padding-bottom: var(--ta-s-3);
    border-bottom: 1px dashed var(--ta-stroke);
}
.ta-directory__letter-glyph {
    font-family: var(--ta-font-display);
    font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    background: var(--ta-grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.ta-directory__letter-count {
    font-family: var(--ta-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ta-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ta-directory__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--ta-s-4);
}
@media (min-width: 960px) {
    .ta-directory__grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

/* ── Dense product card ────────────────────────────────────────────── */
.ta-product-dense {
    position: relative;
    background: var(--ta-grad-card);
    border: 1px solid var(--ta-stroke);
    border-radius: var(--ta-r-md);
    padding: var(--ta-s-4) var(--ta-s-5);
    transition: border-color 220ms var(--ta-ease), transform 220ms var(--ta-ease), box-shadow 220ms var(--ta-ease);
    display: grid;
    gap: var(--ta-s-2);
}
.ta-product-dense:hover {
    border-color: var(--ta-stroke-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.ta-product-dense__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ta-s-3);
}
.ta-product-dense__name {
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-base);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: var(--ta-text-strong);
}
.ta-product-dense__name a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(90deg, var(--ta-cyan-bolt), var(--ta-magenta));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 280ms var(--ta-ease);
}
.ta-product-dense:hover .ta-product-dense__name a,
.ta-product-dense__name a:focus-visible { background-size: 100% 1px; color: var(--ta-cyan-bolt); }

.ta-product-dense__purity {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: var(--ta-r-pill);
    background: rgba(0, 212, 255, 0.12);
    color: var(--ta-cyan-bolt);
    font-family: var(--ta-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ta-product-dense__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ta-s-3) var(--ta-s-4);
    font-size: 0.6875rem;
    color: var(--ta-text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ta-product-dense__meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.ta-product-dense__meta-label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ta-text-dim);
}
.ta-product-dense__meta-item--coa { color: var(--ta-pink-glow); }

.ta-product-dense__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-s-3);
    padding-top: var(--ta-s-3);
    border-top: 1px dashed var(--ta-stroke);
    flex-wrap: wrap;
}
.ta-product-dense__price { display: inline-flex; align-items: baseline; gap: 6px; }
.ta-product-dense__price-label { font-family: var(--ta-font-display); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ta-text-muted); }
.ta-product-dense__price-value { font-family: var(--ta-font-display); font-size: var(--ta-fs-base); font-weight: 800; color: var(--ta-cyan-bolt); }
.ta-product-dense__actions { display: flex; gap: var(--ta-s-3); }
.ta-product-dense__action {
    font-family: var(--ta-font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ta-text-soft);
    padding: 4px 0;
    transition: color 180ms var(--ta-ease);
}
.ta-product-dense__action:hover,
.ta-product-dense__action:focus-visible { color: var(--ta-cyan-bolt); }
.ta-product-dense__action--coa { color: var(--ta-pink-glow); }
.ta-product-dense__action--coa:hover { color: var(--ta-cyan-bolt); }

/* ─────────────────────────────────────────────────────────────────────────
 * COA CASCADE — front-page section under the video strip.
 *
 * Visual concept: five Certificate-of-Analysis cards laid out in a staggered
 * cascade, each card rotated and y-offset slightly so the group reads as
 * "research records loosely arranged on a lab bench." Cards float idly with
 * a gentle drift, pulse a gold "verified" dot, and on hover straighten and
 * lift while a titan-gradient beam sweeps across them.
 *
 * Composition layers:
 *   .ta-coa-cascade        — full-bleed dark section, gradient backdrop
 *   .ta-coa-cascade__bg    — animated radial-color pan (depth)
 *   .ta-coa-cascade__grid  — faint dot-grid overlay (research/lab cue)
 *   .ta-coa-cascade__deck  — CSS grid of 5 cards
 *   .ta-coa-card           — single COA card with rotation/y CSS vars
 *   .ta-coa-card__beam     — pseudo-managed sweep highlight on hover
 *   .ta-coa-card__corner   — titan-gradient top accent line
 *
 * Reveal: when the `.is-revealed` class lands on `.ta-coa-cascade__deck`,
 * each card animates in with a 60ms-per-card stagger via `--i`.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-coa-cascade {
    position: relative;
    padding: var(--ta-s-12) 0 var(--ta-s-14);
    background:
        linear-gradient(180deg, #000 0%, #060A1E 22%, #060A1E 78%, #000 100%);
    overflow: hidden;
    isolation: isolate;
}
/* Animated color pan — two soft brand-color blobs drift in opposite arcs
 * so the section has depth without committing to a single hue. */
.ta-coa-cascade__bg {
    position: absolute;
    inset: -10% -10%;
    background:
        radial-gradient(ellipse 55% 38% at 18% 28%, rgba(192, 38, 211, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 55% 38% at 82% 72%, rgba(0, 212, 255, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 45% 28% at 50% 50%, rgba(0, 212, 255, 0.045) 0%, transparent 70%);
    animation: ta-coa-bg-drift 22s ease-in-out infinite alternate;
    z-index: -2;
    will-change: transform;
    pointer-events: none;
}
@keyframes ta-coa-bg-drift {
    from { transform: translate3d(0, 0, 0)      scale(1); }
    to   { transform: translate3d(40px, -28px, 0) scale(1.04); }
}
/* Subtle dot-grid overlay — references analytical-lab grid paper without
 * being literal. Sits between bg and content via z-index. */
.ta-coa-cascade__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 1.5px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    z-index: -1;
    pointer-events: none;
}

.ta-coa-cascade__head {
    text-align: center;
    margin-bottom: var(--ta-s-10);
}
.ta-coa-cascade__head .ta-eyebrow { color: var(--ta-cyan-bolt); }

/* Ring carousel — 3D coverflow-style depth.
 *
 * Layer roles:
 *   .ta-coa-cascade__viewport  — perspective container. NO overflow:hidden
 *                                so cards curving back to the sides remain
 *                                visible until backface-visibility hides
 *                                them at the rear half of the ring.
 *   .ta-coa-cascade__deck      — the ring itself. `transform-style:
 *                                preserve-3d` so children inherit the 3D
 *                                context; the animation rotates the whole
 *                                ring around its vertical Y-axis.
 *   .ta-coa-card               — sits on the ring at angle `36deg * --ring`
 *                                with translateZ(--ta-ring-r). The card's
 *                                front faces outward radially, so when the
 *                                ring rotation brings it to angle 0 in
 *                                viewer space its face points at the camera.
 *
 * Geometry:
 *   --ta-ring-r        ring radius (distance from ring center to card)
 *   10 cards at 36° apart → adjacent chord ≈ 0.618 * radius
 *   At r = 520px the chord is ~321px which fits 300px-wide cards with
 *   a small visual gap.
 */
.ta-coa-cascade__viewport {
    --ta-ring-r: 460px;
    position: relative;
    height: 380px;                 /* perspective + abs-positioned children */
    margin: var(--ta-s-6) 0;
    perspective: 1500px;
    perspective-origin: 50% 55%;   /* slight downward vanishing point */
    /* No overflow:hidden — we want side cards visible curving back. The
     * section-level overflow already clips the section edges. */
}

.ta-coa-cascade__deck {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: ta-coa-ring 80s linear infinite;
    will-change: transform;
}
@keyframes ta-coa-ring {
    from { transform: rotateY(0deg);     }
    to   { transform: rotateY(-360deg);  }
}
/* Pause the ring rotation when a specific card is hovered (or has focus). */
.ta-coa-cascade__deck:has(.ta-coa-card:hover),
.ta-coa-cascade__deck:has(.ta-coa-card:focus-within) {
    animation-play-state: paused;
}

/* The card itself.
 *
 * Each card carries `--i` (0–4) set in PHP — same index for the original
 * and its duplicate, so both render identically at the carousel loop seam.
 * --rot and --y are driven from --i below, not from :nth-child (which would
 * give different values to original vs duplicate cards and create a visible
 * jump at the seam).
 *
 * The card transform composes with the parent track's translateX, so the
 * float keyframe and the carousel translate stack into a single 3D drift.
 */
/* Two-element structure so two independent transforms compose cleanly:
 *
 *   .ta-coa-card        — outer wrapper. Owns the float animation
 *                          (translateY oscillation) and the per-`--i`
 *                          rotation/y baseline. Sizing only — no visuals.
 *
 *   .ta-coa-card__inner — inner pane. Owns the card visuals (background,
 *                          border, shadow, content) and the hover state
 *                          (lift, scale, 3D mouse-tracked rotateX/Y, and
 *                          a mouse-following radial highlight).
 *
 * Because the inner's `transform` is on a different element than the float
 * animation, the hover lift + 3D tilt can apply WITHOUT being overridden
 * by the float keyframe. (This is what was making the card "disappear" on
 * hover before — the float animation kept controlling the card's
 * transform, blocking the static hover transform from taking effect.) */
/* Each card is absolutely positioned at the deck center, then rotated and
 * pushed outward by translateZ to its place on the ring.
 *
 *   transform: rotateY(<angle>) translateZ(R)
 *
 * The order matters: first rotate the card around the ring's Y axis, THEN
 * translate along the card's NEW Z axis. Net effect — the card sits on a
 * circle of radius R, facing outward. As the parent ring rotates, this
 * card sweeps around the camera; perspective makes it grow as it nears
 * the front and shrink as it rotates away.
 *
 *   --ring (set in PHP, 0–9) drives the angle: 36° apart for 10 cards.
 *   --i    (set in PHP, 0–4) still identifies the content row — used by
 *          per-content tweaks and by the JS animation-delay calc if a
 *          float ever returns.
 */
.ta-coa-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 320px;
    margin: -160px 0 0 -130px;          /* re-center on the 50% anchor */
    transform: rotateY(calc(var(--ring, 0) * 36deg)) translateZ(var(--ta-ring-r));
    transform-style: preserve-3d;
    will-change: transform;
}

/* The inner pane — actual visual card. All visual styles, hover state,
 * 3D tilt, depth-driven blur, and the backface hide live here.
 *
 * Custom properties written from JS:
 *   --mx, --my    : 0–100% cursor position (used by the radial highlight)
 *   --rx, --ry    : ±8deg cursor-driven tilt
 *   --depth       : 0–1 distance from the front of the ring. 0 = at the
 *                   center (full focus), 1 = at ±90° edge (about to
 *                   disappear behind the ring). Updated each rAF tick by
 *                   the carousel JS based on the current ring rotation.
 */
.ta-coa-card__inner {
    --mx: 50%;
    --my: 50%;
    --rx: 0deg;
    --ry: 0deg;
    --depth: 0;

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--ta-s-5);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
        rgba(10, 1, 24, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ta-r-md);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--ta-text-strong);
    overflow: hidden;
    transform-style: preserve-3d;
    transform: translateZ(0);
    /* Hide cards that have rotated past 90° on the ring — backface-
     * visibility evaluates on a per-element basis, so this kills the
     * mirror-image render that would otherwise show through the back of
     * the ring. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Depth-driven focus falloff. As a card rotates from front (depth 0)
     * toward the sides (depth 1), it gains progressively more blur and
     * loses saturation/brightness — reading as "rotating out of focus."
     * The hover override below resets filter to none for the focused card. */
    filter:
        blur(calc(var(--depth) * 8px))
        saturate(calc(1 - var(--depth) * 0.5))
        brightness(calc(1 - var(--depth) * 0.25));
    transition:
        transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 320ms ease,
        border-color 320ms ease,
        opacity 320ms ease;
    /* No transition on filter — the JS-driven --depth change is already
     * frame-paced, and a 320ms transition on top would lag the rotation. */
    will-change: transform, filter;
}

/* Hovered card: lift toward camera, scale up modestly, tilt to follow the
 * mouse, glow gold, AND drop the depth blur so the focused card is fully
 * sharp regardless of where it sits on the ring. */
.ta-coa-card:hover .ta-coa-card__inner,
.ta-coa-card:focus-within .ta-coa-card__inner {
    transform:
        translateY(-8px)
        translateZ(25px)
        scale(1.04)
        rotateX(var(--rx))
        rotateY(var(--ry));
    border-color: rgba(0, 212, 255, 0.55);
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 212, 255, 0.4),
        0 0 64px rgba(192, 38, 211, 0.28);
    filter: none !important;
    z-index: 3;
}
.ta-coa-card:hover,
.ta-coa-card:focus-within { z-index: 3; }

/* Mouse-following highlight pseudo — a soft radial gold/pink blob that
 * tracks the cursor position via --mx/--my. Sits ABOVE the card content
 * but underneath text (mix-blend-mode keeps text readable). Fades in on
 * hover only. */
.ta-coa-card__highlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        260px circle at var(--mx) var(--my),
        rgba(0, 212, 255, 0.22) 0%,
        rgba(192, 38, 211, 0.10) 28%,
        transparent 60%
    );
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 220ms ease;
    z-index: 0;
}
.ta-coa-card:hover .ta-coa-card__highlight,
.ta-coa-card:focus-within .ta-coa-card__highlight { opacity: 1; }

/* Focus blur — when ANY card is hovered, every OTHER card's inner gets
 * blurred + desaturated + scaled down a touch, so the hovered card pops
 * forward and the surrounding row drops back. `:has()` evaluates "the
 * deck contains a hovered card." The `:not(:hover)` part excludes the
 * hovered card itself from the blur. */
.ta-coa-cascade__deck:has(.ta-coa-card:hover) .ta-coa-card:not(:hover) .ta-coa-card__inner,
.ta-coa-cascade__deck:has(.ta-coa-card:focus-within) .ta-coa-card:not(:focus-within) .ta-coa-card__inner {
    filter: blur(5px) saturate(0.55) brightness(0.78);
    opacity: 0.45;
    transform: translateZ(0) scale(0.96);
}

/* Top accent line — titan gradient that "draws" in on hover. */
.ta-coa-card__corner {
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, #FF7A1E 0%, #C026D3 50%, #00D4FF 100%);
    border-radius: 0 0 2px 2px;
    transform: scaleX(0.4);
    transform-origin: center;
    opacity: 0.6;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms ease;
}
.ta-coa-card:hover .ta-coa-card__corner,
.ta-coa-card:focus-within .ta-coa-card__corner {
    transform: scaleX(1);
    opacity: 1;
}

/* Diagonal beam — sweeps across the card on hover, like a scanning laser.
 * Behind content (z-index 0) but above the card background. */
.ta-coa-card__beam {
    position: absolute;
    top: -30%;
    left: -60%;
    width: 50%;
    height: 160%;
    background: linear-gradient(105deg,
        transparent 35%,
        rgba(0, 212, 255, 0.14) 48%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(192, 38, 211, 0.14) 52%,
        transparent 65%
    );
    transform: translateX(0) skewX(-12deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 280ms ease;
    mix-blend-mode: screen;
}
.ta-coa-card:hover .ta-coa-card__beam,
.ta-coa-card:focus-within .ta-coa-card__beam {
    opacity: 1;
    animation: ta-coa-beam-sweep 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}
@keyframes ta-coa-beam-sweep {
    from { transform: translateX(0)    skewX(-12deg); }
    to   { transform: translateX(260%) skewX(-12deg); }
}

/* Card head row: verified pill + lot id. */
.ta-coa-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-s-2);
    margin-bottom: var(--ta-s-3);
    position: relative;
    z-index: 1;
}
.ta-coa-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 9999px;
    font-family: var(--ta-font-display);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ta-cyan-bolt);
}
.ta-coa-card__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ta-cyan-bolt);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.85), 0 0 16px rgba(0, 212, 255, 0.4);
    animation: ta-coa-pulse 2.4s ease-in-out infinite;
}
@keyframes ta-coa-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 8px rgba(0, 212, 255, 0.85), 0 0 0 0   rgba(0, 212, 255, 0.55); }
    50%      { opacity: 0.65;transform: scale(1.15);box-shadow: 0 0 8px rgba(0, 212, 255, 0.85), 0 0 0 8px rgba(0, 212, 255, 0); }
}
.ta-coa-card__lot {
    font-family: var(--ta-font-mono);
    font-size: 0.66rem;
    color: var(--ta-text-dim);
    letter-spacing: 0.08em;
}

.ta-coa-card__title {
    margin: 0 0 var(--ta-s-3);
    font-family: var(--ta-font-display);
    font-size: 1.18rem;
    line-height: 1.25;
    color: var(--ta-text-strong);
    position: relative;
    z-index: 1;
    /* Allow long compound names to break cleanly without blowing the card. */
    overflow-wrap: anywhere;
}
.ta-coa-card__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(90deg, var(--ta-cyan-bolt), var(--ta-pink-glow));
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    background-position: 0 100%;
    transition: background-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ta-coa-card:hover .ta-coa-card__title a,
.ta-coa-card:focus-within .ta-coa-card__title a { background-size: 100% 1.5px; }

.ta-coa-card__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ta-s-3);
    margin: 0 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
}
.ta-coa-card__meta > div { min-width: 0; }
.ta-coa-card__meta dt {
    font-family: var(--ta-font-display);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ta-text-dim);
    margin: 0 0 2px;
}
.ta-coa-card__meta dd {
    margin: 0;
    font-family: var(--ta-font-mono);
    font-size: 0.86rem;
    color: var(--ta-text-strong);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.ta-coa-card__purity { color: var(--ta-cyan-bolt) !important; font-weight: 700; }

.ta-coa-card__foot {
    margin-top: var(--ta-s-5);
    padding-top: var(--ta-s-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}
.ta-coa-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ta-font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ta-pink-glow);
    text-decoration: none;
    transition: color 200ms ease, transform 200ms ease, gap 200ms ease;
}
.ta-coa-card__link:hover,
.ta-coa-card__link:focus-visible {
    color: var(--ta-cyan-bolt);
    gap: 10px;
    outline: none;
}
.ta-coa-card__link svg { transition: transform 200ms ease; }
.ta-coa-card__link:hover svg { transform: translateX(2px); }
.ta-coa-card__link--muted {
    color: var(--ta-text-dim);
    cursor: default;
}

.ta-coa-cascade__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--ta-s-10);
}

/* Placeholder state — cards still render so the layout reads correctly on
 * a fresh install, but the verified pill is dimmed since these are stand-
 * in entries rather than real verified batches. */
.ta-coa-cascade--placeholder .ta-coa-card__verified {
    opacity: 0.4;
    border-color: rgba(0, 212, 255, 0.18);
}
.ta-coa-cascade--placeholder .ta-coa-card__pulse {
    animation: none;
    box-shadow: none;
    opacity: 0.5;
}

/* Tablet — slightly smaller ring + cards so side neighbours stay on
 * screen and the section doesn't bleed into the heading or button. */
@media (max-width: 1100px) {
    .ta-coa-cascade__viewport {
        --ta-ring-r: 380px;
        height: 360px;
    }
    .ta-coa-card { width: 240px; height: 300px; margin: -150px 0 0 -120px; }
    .ta-coa-cascade__deck { animation-duration: 68s; }
}
/* Mobile (≤ 640px) — the 3D ring becomes a flat side-scrolling showcase.
 *
 * The ring carousel reads as a desktop visual (perspective + 10 cards at
 * 36° apart). On a phone the same arrangement is cramped, side cards
 * become hard to read, and the gold-tilt 3D effect doesn't carry the
 * weight it does on a wide canvas. Switch to a simpler pattern:
 *
 *   - Drop perspective, height: auto
 *   - Hide the 5 duplicate cards (only the 5 unique COAs need to show
 *     in a scroll list — duplicates were only there to make the ring
 *     loop cleanly)
 *   - Deck becomes a horizontal flex track with overflow-x: auto +
 *     scroll-snap + mask-image edge fade
 *   - Each card is a static flex item with a gentle floating bob
 *     (each card has its own duration / negative delay so the row
 *     reads as drifting lily-pads, not in lockstep)
 *   - Scroll-hint chevrons (re-using the [data-ta-scroll-hint] JS)
 *     fade in on the active side
 *   - --depth is forced to 0 so the rotation-out-of-focus blur doesn't
 *     run on mobile (no rotation to drive it)
 */
@media (max-width: 640px) {
    .ta-coa-cascade { padding: var(--ta-s-10) 0; }

    /* Hide the 5 clone cards. The originals carry --ring 0-4; clones
     * carry 5-9. nth-child(n+6) selects DOM positions 6 through 10. */
    .ta-coa-card:nth-child(n+6) { display: none !important; }

    .ta-coa-cascade__viewport {
        --ta-ring-r: 0;
        position: relative;
        height: auto;
        margin: var(--ta-s-4) calc(var(--ta-s-6) * -1);
        padding: 0;
        perspective: none;
    }

    .ta-coa-cascade__deck {
        position: relative;
        animation: none;             /* kill the 3D ring rotation */
        transform-style: flat;
        width: auto;
        height: auto;
        display: flex;
        flex-wrap: nowrap;
        gap: var(--ta-s-4);
        padding: var(--ta-s-4) var(--ta-s-6);
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    }
    .ta-coa-cascade__deck::-webkit-scrollbar { display: none; }

    .ta-coa-card {
        position: relative;
        top: auto;
        left: auto;
        margin: 0;
        flex: 0 0 78%;
        max-width: 320px;
        width: auto;
        height: auto;
        min-height: 0;
        scroll-snap-align: center;
        /* Float bob — pure y-oscillation, no rotation. Each card uses its
         * own duration via --i and a unique negative delay so they desync. */
        animation: ta-coa-mobile-float 5.4s ease-in-out infinite alternate;
        animation-delay: calc(var(--i, 0) * -1.1s);
    }
    .ta-coa-card[style*="--i:0"] { animation-duration: 5.2s; }
    .ta-coa-card[style*="--i:1"] { animation-duration: 5.9s; }
    .ta-coa-card[style*="--i:2"] { animation-duration: 6.4s; }
    .ta-coa-card[style*="--i:3"] { animation-duration: 6.0s; }
    .ta-coa-card[style*="--i:4"] { animation-duration: 5.6s; }
    @keyframes ta-coa-mobile-float {
        from { transform: translateY(-5px); }
        to   { transform: translateY(5px); }
    }

    /* The inner pane — kill the depth-driven blur (no rotation, no depth)
     * and make the backface visible again. */
    .ta-coa-card__inner {
        --depth: 0;
        filter: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        height: auto;
        min-height: 280px;
    }

    /* Scroll-hint chevrons — same pattern as the trust badges + research-
     * domain cards. The `[data-ta-scroll-hint]` JS handles the state
     * classes; CSS shows / hides / nudges them. */
    .ta-coa-cascade__viewport::before,
    .ta-coa-cascade__viewport::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.72);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px 14px;
        pointer-events: none;
        z-index: 5;
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity 240ms var(--ta-ease);
    }
    .ta-coa-cascade__viewport::before {
        left: 8px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M7.6 2.4 4 6l3.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }
    .ta-coa-cascade__viewport::after {
        right: 8px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.4 2.4 8 6l-3.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }
    .ta-coa-cascade__viewport.is-scrollable::before,
    .ta-coa-cascade__viewport.is-scrollable::after { opacity: 0.95; }
    .ta-coa-cascade__viewport.is-at-start::before  { opacity: 0; }
    .ta-coa-cascade__viewport.is-at-end::after     { opacity: 0; }
    .ta-coa-cascade__viewport.is-scrollable:not(.is-at-start)::before {
        animation: ta-pill-hint-left 1.6s ease-in-out infinite;
    }
    .ta-coa-cascade__viewport.is-scrollable:not(.is-at-end)::after {
        animation: ta-pill-hint-right 1.6s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ta-hero::after,
    .ta-hero__stars,
    .ta-hero__title em,
    .ta-hero__art,
    .ta-hero__art img,
    .ta-hero__art svg,
    .ta-hero__art .ta-sparkles,
    .ta-nav__link::after,
    .ta-card[data-ta-tilt]::after,
    .ta-product[data-ta-tilt]::after,
    .ta-section + .ta-section::before,
    .ta-footer::before,
    .ta-skeleton,
    .ta-btn--primary {
        animation: none !important;
    }
    .ta-card[data-ta-tilt]:hover,
    .ta-product[data-ta-tilt]:hover {
        transform: translateY(-2px) !important;
    }
    .ta-brand__mark img,
    .ta-brand__mark svg,
    .ta-brand__mark--lockup picture,
    .ta-brand__mark--lockup img,
    .ta-hero__art--lockup picture,
    .ta-hero__art--lockup img,
    .ta-hero__art--lockup::before,
    .ta-hero__art--lockup::after,
    .ta-single-product .stock.in-stock::before,
    .ta-loader,
    .ta-illustration-orbit::before,
    .ta-illustration-orbit::after,
    .ta-illustration-orbit > span {
        animation: none !important;
    }
    /* Mouse-reactive hero tilt — drop entirely under reduced-motion */
    .ta-hero__logo-wrap {
        transform: none !important;
    }
    .ta-hero--centered .ta-hero__stat {
        transform: none !important;
    }
    /* Cycle 5 "alive" motion layer — disable all continuous loops */
    .ta-grid--4 > .ta-card,
    .ta-grid--3 > .ta-card,
    .ta-product-rail > .ta-product,
    .ta-product-grid > .ta-product,
    .ta-hero__stat-big,
    .ta-pulse-dot,
    .ta-hero__pill-nav-wrap::before,
    .ta-hero__pill-nav-wrap::after,
    .ta-fab-shop,
    .ta-letter,
    .ta-coa-cascade__bg,
    .ta-coa-cascade__deck,
    .ta-coa-card,
    .ta-coa-card__pulse,
    .ta-coa-card__beam {
        animation: none !important;
    }
    /* Under reduced-motion the 3D ring is replaced with a static flex
     * grid. Cards sit flat in a wrap layout, no rotation, no perspective,
     * no auto-rotation animation. The visible duplicates are harmless
     * here — they just look like a fuller catalog snapshot. */
    .ta-coa-card {
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
        margin: 0 !important;
        flex: 0 0 280px !important;
        width: 280px !important;
        height: auto !important;
        min-height: 280px !important;
    }
    .ta-coa-cascade__viewport {
        height: auto !important;
        perspective: none !important;
        margin: var(--ta-s-6) 0 !important;
    }
    .ta-coa-cascade__deck {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: var(--ta-s-4);
        transform: none !important;
        animation: none !important;
        width: auto !important;
        height: auto !important;
    }
    .ta-coa-card__corner { transform: scaleX(1) !important; opacity: 1 !important; }
    /* Ensure heading letters are always visible under reduced motion (JS
     * doesn't run the wrap when reduceMotion is true; this is belt-and-
     * suspenders in case a letter wrapper survives a media-query flip). */
    .ta-letter { opacity: 1 !important; transform: none !important; }
    .ta-eyebrow::before {
        animation: none !important;
        width: 28px !important;
        opacity: 1 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * EXPANDING PRODUCT SEARCH
 *
 * Icon-only pill at rest (matches the surrounding icon-button footprint).
 * On hover OR keyboard focus-within, animates from a 42×42 circle out to a
 * 240px wide search bar. The input fades + slides in from the right so it
 * doesn't pop. Closes when pointer leaves AND focus is elsewhere.
 *
 * Two variants:
 *   .ta-search            — inline header variant (lives in .ta-header__actions)
 *   .ta-search--floating  — fixed top-right pill used on the front page where
 *                           the regular header is suppressed
 *
 * Submits as a standard WooCommerce product search (?s=…&post_type=product).
 * ───────────────────────────────────────────────────────────────────────── */
.ta-search {
    --ta-search-w:   240px;
    --ta-search-h:   42px;
    --ta-search-bg:  rgba(255, 255, 255, 0.06);
    --ta-search-bg2: rgba(255, 255, 255, 0.12);

    /* Absolute-positioned children inside; the form is the positioning
     * context for both the input and the button so the button is always
     * anchored to the right edge of the visible pill regardless of input
     * sizing quirks. This is the only reliable way to guarantee the icon
     * stays centered in the 42×42 circle when collapsed. */
    position: relative;
    display: inline-block;
    width: var(--ta-search-h);
    height: var(--ta-search-h);
    border-radius: 9999px;
    background: var(--ta-search-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    overflow: hidden;
    /* Margin matches the icon-button siblings so the row aligns. */
    margin: 0 4px;
    vertical-align: middle;
    transition:
        width      380ms cubic-bezier(0.22, 0.61, 0.36, 1),
        background 240ms ease,
        box-shadow 240ms ease;
}
.ta-search:hover,
.ta-search:focus-within {
    width: var(--ta-search-w);
    background: var(--ta-search-bg2);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        0 0 18px rgba(192, 38, 211, 0.18);
}
.ta-search__input {
    /* Absolute: input fills the form. Right padding clears the button so
     * typed text never slides under the magnifying glass. When the form is
     * 42px wide (collapsed) the input is invisible (opacity:0) and the
     * button paints on top — icon centered in the circle. */
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 var(--ta-search-h) 0 18px;
    background: transparent;
    border: 0;
    color: #FFFFFF;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1;
    outline: none;
    opacity: 0;
    transform: translateX(8px);
    transition:
        opacity   240ms ease 80ms,
        transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms;
    -webkit-appearance: none;
            appearance: none;
    z-index: 1;
}
.ta-search__input::-webkit-search-cancel-button,
.ta-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ta-search__input::placeholder { color: rgba(255, 255, 255, 0.55); }
/* Suppress the global gold `input:focus-visible` outline inside the search
 * pill — the pill itself signals focus by brightening and gaining a magenta
 * glow via `:focus-within`, so the input's own outline would clip against
 * the pill's rounded edge and read as a yellow vertical bar. */
.ta-search__input:focus,
.ta-search__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.ta-search:hover .ta-search__input,
.ta-search:focus-within .ta-search__input {
    opacity: 1;
    transform: translateX(0);
}
.ta-search__btn {
    /* Always anchored to the right edge of the form at 42×42. When collapsed
     * (form width = 42px) the button equals the entire visible area, so the
     * SVG icon — centered by flex inside the button — is centered inside
     * the circle. When expanded the button sits flush right beside the input. */
    position: absolute;
    top: 0;
    right: 0;
    width: var(--ta-search-h);
    height: var(--ta-search-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 2;
    transition: color 200ms ease, transform 200ms ease;
}
.ta-search__btn:hover,
.ta-search__btn:focus-visible {
    color: #C026D3;
    outline: none;
}
.ta-search__btn:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
    border-radius: 9999px;
}
.ta-search__btn svg { width: 18px; height: 18px; display: block; }
.ta-search__btn:active { transform: scale(0.94); }

/* ── Floating variant: front-page top-right (no header to host it).
 *
 * The compliance strip wraps to multiple lines on narrower viewports — its
 * actual height ranges from ~40px (wide desktop) to 100px+ (phones with a
 * 30-word disclaimer). JS measures `.ta-compliance-strip`'s rendered height
 * on load + resize and writes it to `--ta-strip-h` on the document root.
 * We add 14px breathing room to that for the float's `top` so the pill is
 * always clear of the disclaimer band regardless of how the text wraps.
 *
 * z-index: 55 sits below the compliance strip's 60 — if there's any
 * incidental vertical overlap during transition, the strip paints on top. */
.ta-search--floating {
    position: fixed;
    /* 140px fallback handles the worst-case mobile wrap (3–4 lines of
     * disclaimer text on 320px viewports). When the inline header script
     * has measured the actual strip height, --ta-strip-h overrides it
     * with the precise value — usually much smaller on desktop. */
    top:   calc(var(--ta-strip-h, 140px) + 14px + env(safe-area-inset-top, 0px));
    right: max(18px, env(safe-area-inset-right, 18px));
    z-index: 55;
    background: rgba(10, 1, 24, 0.78);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 8px 22px rgba(0, 0, 0, 0.45);
    /* Hidden until the inline measurement script flips the
     * `ta-strip-measured` flag on <html>. Guarantees no flash at the
     * wrong position on first paint. */
    visibility: hidden;
    opacity: 0;
    transition:
        opacity    180ms ease,
        width      380ms cubic-bezier(0.22, 0.61, 0.36, 1),
        background 240ms ease,
        box-shadow 240ms ease;
}
html.ta-strip-measured .ta-search--floating {
    visibility: visible;
    opacity: 1;
}
.ta-search--floating:hover,
.ta-search--floating:focus-within {
    background: rgba(10, 1, 24, 0.92);
}

/* On narrow phones, both variants use a wider expanded width so the full
 * placeholder text is readable, and the floating variant snugs closer to
 * the edges to free up thumb space. */
@media (max-width: 520px) {
    .ta-search {
        --ta-search-w: min(72vw, 280px);
    }
    .ta-search--floating {
        --ta-search-w: min(78vw, 320px);
        /* `top` is computed from the JS-measured strip height — see the
         * --ta-strip-h variable. Only horizontal inset changes on phones. */
        right: max(12px, env(safe-area-inset-right, 12px));
    }
    .ta-header__actions .ta-search { margin: 0 2px; }
}
@media print {
    .ta-search { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * HEADING LETTER FADE-IN — alternating top/bottom direction
 *
 * Each character in a target heading is wrapped in a `.ta-letter` span by
 * JS on first viewport entry. Even-indexed letters fade in from ABOVE,
 * odd-indexed from BELOW. All start simultaneously so the heading
 * materializes in a single fast pulse with a syncopated rhythm.
 *
 * `display: inline-block` is required for transform: translateY to work on
 * the letter (inline elements can't be transformed). Letters preserve their
 * baseline rhythm because the parent line-height + font-size still drive
 * the layout; only the start state offsets the visual.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-letter {
    display: inline-block;
    opacity: 0;
    will-change: opacity, transform;
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: forwards;
}
.ta-letter--top { animation-name: ta-letter-from-top; }
.ta-letter--bot { animation-name: ta-letter-from-bot; }
@keyframes ta-letter-from-top {
    0%   { opacity: 0; transform: translateY(-0.55em); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes ta-letter-from-bot {
    0%   { opacity: 0; transform: translateY(0.55em); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────
 * FLOATING SHOP FAB
 *
 * Fixed bottom-right "chat-bubble" style action button. Always visible on
 * every page; one tap opens the WooCommerce catalog. Sized to comfortably
 * exceed the WCAG 2.5.5 target-size minimum (44×44 CSS px) on every viewport.
 *
 * Z-index 80 sits above normal page flow but well below modal overlays:
 *   - Age gate    ~9999 (compliance-gate)
 *   - Mobile menu  100  (slide-out drawer)
 *   - Cookie banner 90  (consent layer)
 * So the FAB never occludes a gate or modal.
 *
 * Pulse animation: subtle expanding magenta halo (~3s loop) gives it the
 * "live-chat" feel — drawing the eye without strobing.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-fab-shop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #C026D3 0%, #FF7A1E 70%, #FFC83D 100%);
    color: #FFFFFF;
    font-family: var(--ta-font-display);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
    box-shadow:
        0 12px 28px rgba(192, 38, 211, 0.38),
        0 4px 10px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition:
        transform 220ms var(--ta-ease),
        box-shadow 220ms var(--ta-ease),
        background-position 220ms var(--ta-ease);
    animation: ta-fab-pulse 3.2s ease-in-out infinite;
    /* Safe-area inset honors iOS home-bar gesture area on notched phones. */
    bottom: max(22px, env(safe-area-inset-bottom, 22px));
    right:  max(22px, env(safe-area-inset-right, 22px));
}
.ta-fab-shop:hover,
.ta-fab-shop:focus-visible {
    color: #FFFFFF;
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 18px 36px rgba(192, 38, 211, 0.55),
        0 6px 14px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    outline: none;
}
.ta-fab-shop:focus-visible {
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.55),
        0 18px 36px rgba(192, 38, 211, 0.55),
        0 6px 14px rgba(0, 0, 0, 0.55);
}
.ta-fab-shop:active {
    transform: translateY(0) scale(0.98);
}
.ta-fab-shop__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.ta-fab-shop__icon svg { display: block; }
.ta-fab-shop__label {
    line-height: 1;
    white-space: nowrap;
}
/* Pulsing magenta halo — sits behind the bubble via an additional outer
 * shadow that expands from 0 → 14px and fades 0.55 → 0 each cycle. */
@keyframes ta-fab-pulse {
    0%, 100% {
        box-shadow:
            0 12px 28px rgba(192, 38, 211, 0.38),
            0 4px 10px rgba(0, 0, 0, 0.45),
            inset 0 0 0 1px rgba(255, 255, 255, 0.22),
            0 0 0 0 rgba(192, 38, 211, 0.55);
    }
    50% {
        box-shadow:
            0 12px 28px rgba(192, 38, 211, 0.48),
            0 4px 10px rgba(0, 0, 0, 0.45),
            inset 0 0 0 1px rgba(255, 255, 255, 0.30),
            0 0 0 14px rgba(192, 38, 211, 0);
    }
}
/* On narrow phones, collapse to an icon-only circle so it doesn't crowd
 * the thumb zone — still well over the 44px touch target. */
@media (max-width: 520px) {
    .ta-fab-shop {
        padding: 15px;
        gap: 0;
        right:  max(16px, env(safe-area-inset-right, 16px));
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
    }
    .ta-fab-shop__label { display: none; }
}
/* Print: never include the FAB in print output. */
@media print {
    .ta-fab-shop { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * WOOCOMMERCE PRODUCT IMAGE SIZE CAPS
 *
 * Caps the rendered dimensions of every product-image surface so a merchant
 * who uploads a 3000×3000 product shot doesn't end up with a single-product
 * page that scrolls four screens to clear the photo. The cap is expressed
 * with `max-height` + `object-fit: contain` so portrait, landscape, and
 * square uploads all behave predictably — the image shrinks to fit inside
 * its visual box and preserves aspect ratio without cropping.
 *
 * Two CSS variables expose the caps:
 *   --ta-product-image-max   single-product main image / gallery
 *   --ta-product-thumb-max   product-archive (shop) card thumbnails
 *
 * Override in a child theme or via the Customizer's Additional CSS panel
 * if a different maximum is wanted — no template edits required.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
    --ta-product-image-max: 560px;
    --ta-product-thumb-max: 320px;
}

/* Single-product page — main gallery. Constrain BOTH the container width
 * and the image max-height so even a very tall portrait shot lands inside
 * a predictable visual box. `width: auto` + `object-fit: contain` keeps
 * the aspect ratio intact and centers the image inside the box. */
.woocommerce-product-gallery,
.woocommerce div.product div.images {
    max-width: var(--ta-product-image-max);
    margin-left: auto;
    margin-right: auto;
}
.woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    max-height: var(--ta-product-image-max);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--ta-r-md);
}
.woocommerce-product-gallery__image > a,
.woocommerce div.product div.images .woocommerce-product-gallery__image > a {
    display: block;
    width: 100%;
    text-align: center;
}
/* The product image itself. The `:not(.zoomImg)` exclusion preserves the
 * `wc-product-gallery-zoom` overlay behaviour — `.zoomImg` is the magnified
 * copy that hovers over the base image and must stay free of constraints
 * so the zoom math still works. */
.woocommerce-product-gallery__image img:not(.zoomImg),
.woocommerce div.product div.images img.wp-post-image,
.woocommerce-product-gallery img:not(.zoomImg),
.wc-block-components-product-image img {
    max-width: 100%;
    max-height: var(--ta-product-image-max);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Single-product gallery thumbnails (the small clickable swatches below
 * the main image when a product has multiple gallery images). */
.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce-product-gallery__wrapper .flex-control-nav img {
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ─────────────────────────────────────────────────────────────────────────
 * WOOCOMMERCE SHOP ARCHIVE — full card system
 *
 * The shop archive renders `<ul class="products"> <article class="ta-product"> ... </article> </ul>`
 * because the theme's woocommerce/content-product.php delegates to
 * template-parts/product-card.php. Plus the theme dequeues
 * `woocommerce-layout` so no stock WC grid CSS is loaded.
 *
 * Net effect without these rules: ul.products is a plain block list, the
 * articles inside get no card chrome, and each product fills the entire
 * container at full width — exactly the "huge" symptom the merchant is
 * seeing. This block fixes BOTH halves:
 *
 *   (1) ul.products  +  .ta-product-grid  → CSS grid (4 → 3 → 2 → 1 cols)
 *   (2) .ta-product  → full card chrome (border, bg, padding, layout,
 *                       hover, image cap, typography, CTA row)
 *
 * The same .ta-product card is also used on:
 *   • front-page hero rail   → .ta-product-rail (horizontal scroll)
 *   • related-products grid  → .ta-product-grid
 * so the card rules below are wrapper-agnostic.
 * ───────────────────────────────────────────────────────────────────── */

/* ── (1) Grid wrappers ──────────────────────────────────────────────── */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products,
.ta-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ta-s-6);
    margin: var(--ta-s-8) 0 var(--ta-s-12);
    padding: 0;
    list-style: none;
}
/* WC's stock layout sheet zeros these with clearfix hacks; with that
 * sheet dequeued the pseudos can leak through and add ghost rows. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.ta-product-grid::before,
.ta-product-grid::after { content: none !important; display: none !important; }

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products,
    .ta-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products,
    .ta-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ta-s-4);
    }
}
@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products,
    .ta-product-grid { grid-template-columns: 1fr; }
}

/* Front-page rail — horizontal scroll snap on phones, equal-width grid on
 * desktop. The cards inside are the same .ta-product element. */
.ta-product-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ta-s-6);
    margin: var(--ta-s-8) 0 var(--ta-s-12);
    padding: 0;
    list-style: none;
}
@media (max-width: 1024px) { .ta-product-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
    .ta-product-rail {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-bottom: var(--ta-s-3);
    }
    .ta-product-rail > .ta-product {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

/* ── (2) The .ta-product card itself ───────────────────────────────── */
/* Wins against the legacy inline tilt rules at line 159/199 because it's
 * more specific (parent class). Inline tilt animation stays for hover. */
.ta-product {
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    padding: var(--ta-s-5);
    float: none !important;
    clear: none !important;
    display: flex;
    flex-direction: column;
    gap: var(--ta-s-3);
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ta-r-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: border-color 220ms var(--ta-ease), box-shadow 220ms var(--ta-ease), transform 220ms var(--ta-ease);
}
.ta-product:hover {
    border-color: rgba(192, 38, 211, 0.4);
    box-shadow: 0 8px 28px rgba(192, 38, 211, 0.18);
    transform: translateY(-2px);
}

/* Media (image link). aspect-ratio keeps every card the same shape; the
 * image inside is contained, not cropped. */
.ta-product__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--ta-r-sm);
    overflow: hidden;
    text-decoration: none;
}
.ta-product__media img,
.ta-product__media .titanamino-product__img,
.ta-product__media .attachment-woocommerce_thumbnail {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 !important;
}

/* Purity badge — sits at top-left of the image. */
.ta-product__purity {
    position: absolute;
    top: var(--ta-s-3);
    left: var(--ta-s-3);
    background: linear-gradient(90deg, var(--ta-cyan-bolt, #00d4ff), #ffb700);
    color: #060A1E;
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 2;
    line-height: 1;
}

/* Name (h3) */
.ta-product__name {
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-lg);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ta-text-strong);
    margin: 0;
    padding: 0;
    text-align: left;
}
.ta-product__name a { color: inherit; text-decoration: none; }
.ta-product__name a:hover { color: var(--ta-cyan-bolt); }

/* CAS subtitle */
.ta-product__cas {
    color: var(--ta-text-muted);
    font-family: var(--ta-font-mono, monospace);
    font-size: var(--ta-fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Price block */
.ta-product__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: var(--ta-s-3);
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.ta-product__price-label {
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ta-text-muted);
}
.ta-product__price-value {
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xl, 1.5rem);
    font-weight: 800;
    color: var(--ta-cyan-bolt);
    line-height: 1.1;
}
.ta-product__price-value .amount { color: inherit; }
.ta-product__price-value del .amount { color: var(--ta-text-muted); font-weight: 400; opacity: 0.7; }
.ta-product__price-value ins { text-decoration: none; }

/* CTA row — buttons sit at the bottom of the card. Inline grid-template-columns
 * on the element handles 1-vs-2 column case. */
.ta-product__cta-row { width: 100%; }
.ta-product__cta-row .ta-btn { width: 100%; }

/* Compatibility: if WC ever falls back to its stock <li.product> markup,
 * apply the same chrome by aliasing to .ta-product styles. */
.woocommerce ul.products li.product {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Cart + checkout table item thumbnails — small fixed footprint so each
 * row's height stays predictable. */
.woocommerce table.shop_table img,
.woocommerce-cart-form img,
.woocommerce-checkout-review-order-table img,
.cart_item .product-thumbnail img,
.rzco__line img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
    border-radius: var(--ta-r-sm);
}

/* Mini-cart + cart-widget item thumbnails — even smaller. */
.widget_shopping_cart img,
.woocommerce-mini-cart img,
.wc-block-mini-cart__products img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    border-radius: var(--ta-r-sm);
}

/* On phones, give the single-product image a bit more breathing room
 * since the screen itself caps the width — but still hold the height. */
@media (max-width: 640px) {
    :root {
        --ta-product-image-max: 420px;
        --ta-product-thumb-max: 260px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * SINGLE PRODUCT PAGE LAYOUT (`.ta-pd`)
 *
 * Two-column layout: gallery on the left at a HARD-CAPPED width, summary
 * on the right taking the remaining space. Replaces the inline
 * `grid-template-columns: 1fr 1fr` + inline <style> block that previously
 * lived inside content-single-product.php — moving the styles here makes
 * them cacheable and stops them from re-emitting on every product page.
 *
 * The key constraint is `grid-template-columns: minmax(280px, 440px) minmax(0, 1fr)`:
 *   - Gallery column is bounded to 280–440px so a huge product photo can't
 *     escape its column and dominate the page (which is what was happening
 *     when nothing capped the column width and the image rendered at its
 *     intrinsic size).
 *   - Summary column flexes to fill the remaining space — title / price /
 *     ATC / RUO block read naturally beside the image.
 *
 * Stacks to single column below 900px viewport width.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-pd {
    display: grid;
    grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
    gap: clamp(var(--ta-s-6), 4vw, var(--ta-s-12));
    align-items: start;
    margin: 0 0 var(--ta-s-10);
}

/* Gallery column — make every level of WC's gallery markup respect the
 * column width. The override chain is necessary because WC's classic
 * gallery + block-based gallery + flexslider variants each emit different
 * wrapper classes that historically widened to their intrinsic content. */
.ta-pd__gallery {
    min-width: 0; /* allow flex children to shrink below content size */
}
.ta-pd__gallery .woocommerce-product-gallery,
.ta-pd__gallery div.images,
.ta-pd__gallery .wp-block-woocommerce-product-image-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
.ta-pd__gallery .woocommerce-product-gallery__wrapper {
    margin: 0;
}
.ta-pd__gallery .woocommerce-product-gallery__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: none;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--ta-r-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ta-pd__gallery .woocommerce-product-gallery__image > a,
.ta-pd__gallery .woocommerce-product-gallery__image > div {
    display: block;
    width: 100%;
    height: 100%;
}
/* The actual image — hard-cap to the gallery column. `width:100%` +
 * `height:100%` + `object-fit:contain` together guarantee the image fits
 * inside the square gallery box without cropping or stretching, regardless
 * of source aspect ratio. Excludes .zoomImg so the WC gallery zoom overlay
 * still functions. */
.ta-pd__gallery img:not(.zoomImg) {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: var(--ta-r-lg);
}
/* Gallery thumbnail strip (only shows when a product has multiple images). */
.ta-pd__gallery .flex-control-thumbs {
    display: flex !important;
    gap: var(--ta-s-2);
    margin: var(--ta-s-3) 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.ta-pd__gallery .flex-control-thumbs li {
    flex: 0 0 64px;
    width: 64px !important;
    margin: 0 !important;
}
.ta-pd__gallery .flex-control-thumbs li img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: var(--ta-r-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 200ms ease, border-color 200ms ease;
}
.ta-pd__gallery .flex-control-thumbs li img:hover,
.ta-pd__gallery .flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: var(--ta-cyan-bolt);
}

/* Summary column — typography and component styling for the WC summary
 * hooks: title, price, stock, short-description, add-to-cart form,
 * product_meta, plus the RUO block we inject at priority 25. */
.ta-pd__summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ta-s-3);
}
.ta-single-product .product_title {
    font-family: var(--ta-font-display);
    font-size: clamp(1.8rem, 2.5vw + 0.6rem, var(--ta-fs-4xl));
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 var(--ta-s-2);
    background: var(--ta-grad-gold-text);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ta-single-product .price {
    color: var(--ta-cyan-bolt);
    font-family: var(--ta-font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 2vw + 0.6rem, var(--ta-fs-3xl));
    margin: 0 0 var(--ta-s-3);
}
.ta-single-product .price del   { color: var(--ta-text-dim); font-weight: 600; margin-right: var(--ta-s-2); }
.ta-single-product .price ins   { background: transparent; color: var(--ta-magenta); text-decoration: none; }
.ta-single-product .stock {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: var(--ta-r-pill);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 800;
    width: fit-content;
}
.ta-single-product .stock.in-stock     { background: rgba(52, 211, 153, 0.12); color: var(--ta-success); border: 1px solid rgba(52, 211, 153, 0.32); }
.ta-single-product .stock.out-of-stock { background: rgba(248, 113, 113, 0.12); color: var(--ta-danger);  border: 1px solid rgba(248, 113, 113, 0.32); }
.ta-single-product .woocommerce-product-details__short-description {
    color: var(--ta-text-soft);
    font-size: var(--ta-fs-base);
    line-height: 1.7;
    margin: var(--ta-s-2) 0;
}
.ta-single-product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ta-s-3);
    margin: var(--ta-s-4) 0;
}
.ta-single-product form.cart .quantity input[type="number"] {
    width: 84px;
    padding: 12px;
    background: var(--ta-surface);
    border: 1px solid var(--ta-stroke);
    border-radius: var(--ta-r-md);
    color: var(--ta-text-strong);
    font: inherit;
}
.ta-single-product form.cart .single_add_to_cart_button {
    background: var(--ta-grad-cta);
    color: var(--ta-text-strong);
    border: none;
    border-radius: var(--ta-r-pill);
    padding: var(--ta-s-4) var(--ta-s-10);
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-sm);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: var(--ta-glow-pink);
    cursor: pointer;
    transition: transform var(--ta-dur) var(--ta-ease), box-shadow var(--ta-dur) var(--ta-ease), background var(--ta-dur) var(--ta-ease);
}
.ta-single-product form.cart .single_add_to_cart_button:hover {
    transform: translateY(-2px);
    box-shadow: var(--ta-glow-gold);
    color: var(--ta-black);
    background: var(--ta-grad-titan);
}
.ta-single-product .product_meta {
    font-size: var(--ta-fs-xs);
    color: var(--ta-text-muted);
    padding-top: var(--ta-s-5);
    border-top: 1px solid var(--ta-stroke);
    margin-top: var(--ta-s-5);
}
.ta-single-product .product_meta a { color: var(--ta-pink-glow); }

/* Below 900px viewport — stack the columns, gallery first, summary below. */
@media (max-width: 900px) {
    .ta-pd {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ta-s-6);
    }
    .ta-pd__gallery {
        max-width: 460px;
        margin: 0 auto;
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * BULLETPROOF SINGLE-PRODUCT LAYOUT OVERRIDE
 *
 * The earlier `.ta-pd` rules assumed our template override
 * (content-single-product.php) was being used. If a product page renders
 * through WC's bundled fallback template, the markup is different
 * (`.product > .images + .summary`) and our column wrappers don't exist.
 *
 * This block targets the WC base markup directly with `body.single-product`
 * specificity + `!important` so the same grid + image cap apply no matter
 * which template is rendering the page. It also catches the case where the
 * theme override loaded but some browser cache is still serving the old
 * design.css — these rules are more specific than the previous ones so
 * they win regardless.
 *
 * v2.7.4 fix: `body.single-product .product` previously matched even when
 * our custom template's `.ta-pd` was already inside `.product`. The grid
 * then made `.ta-pd` (also a 2-col grid) into its OWN first column,
 * squeezing the summary to a sliver and letting the tabs panel render as
 * column 2 of the article. The :has(.ta-pd) negation now disables this
 * outer grid whenever our wrapper is present, so the inner `.ta-pd` grid
 * is the only one in play.
 *
 * Targets:
 *   - `body.single-product .product:not(:has(.ta-pd))` — WC default article wrapper
 *   - `body.single-product .ta-pd`                     — our theme wrapper (same fix)
 *   - `.product > .images / .summary / etc.`           — WC default columns
 *   - `.product img:not(.zoomImg)`                     — every image inside
 * ───────────────────────────────────────────────────────────────────────── */
body.single-product .product:not(:has(.ta-pd)),
body.single-product .ta-pd {
    display: grid !important;
    grid-template-columns: minmax(280px, 440px) minmax(0, 1fr) !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
    align-items: start !important;
    float: none !important;
}
/* Belt-and-suspenders: when our wrapper IS present, explicitly clear any
 * display:grid that might still leak onto .product (e.g. from a cached
 * older copy of this file, or a child-theme override). */
body.single-product .product:has(.ta-pd) {
    display: block !important;
    grid-template-columns: none !important;
}
/* The tabs / related-products / upsells block sits directly inside
 * <article class="product"> after the .ta-pd grid closes. Force it to
 * full width so it never gets pulled into a sibling grid cell. */
body.single-product .product > .woocommerce-tabs,
body.single-product .product > .related,
body.single-product .product > .upsells,
body.single-product .product > .cross-sells {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    float: none !important;
    margin-top: clamp(2rem, 5vw, 4rem) !important;
}
/* Gallery side — WC's `.images` + our `.ta-pd__gallery` + the WC
 * `.woocommerce-product-gallery` (which may itself be a direct child of
 * `.product` in newer WC versions). Constrain ALL of them. */
body.single-product .product > .images,
body.single-product .product > .woocommerce-product-gallery,
body.single-product .ta-pd > .ta-pd__gallery {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0 !important;
}
/* Inner gallery wrapper — beat WC's own width:48% default on .images. */
body.single-product .product .woocommerce-product-gallery,
body.single-product .product .images {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
/* Summary side — clear the WC float and let it take the rest. */
body.single-product .product > .summary,
body.single-product .product > .entry-summary,
body.single-product .ta-pd > .ta-pd__summary {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0 !important;
}
/* Image cap — every product-page image inside a gallery, capped to 440 in
 * both axes, aspect ratio preserved. */
body.single-product .product img:not(.zoomImg):not(.flex-control-thumbs img) {
    max-width: 100% !important;
    max-height: 440px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}
/* Flexslider on / off — neutralize WC's inline percentage widths that
 * Flexslider injects via the FlexSlider JS plugin. */
body.single-product .product .flex-viewport,
body.single-product .product .flex-control-nav,
body.single-product .product .woocommerce-product-gallery__wrapper {
    width: 100% !important;
    max-width: 100% !important;
}
/* Mobile — stack the columns, centered. */
@media (max-width: 900px) {
    body.single-product .product,
    body.single-product .ta-pd {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.single-product .product > .images,
    body.single-product .product > .woocommerce-product-gallery,
    body.single-product .ta-pd > .ta-pd__gallery {
        margin: 0 auto !important;
    }
}

/* ============================================================
 * NAVIGATION CONSOLIDATION (v2025-05)
 *
 * Three new patterns introduced to make the site easier to navigate on
 * both desktop and mobile:
 *
 *   1. Sticky condensed header on scroll (desktop) — the full header
 *      stays at the top of the viewport but shrinks vertically once
 *      the user has scrolled past ~120px so it doesn't eat real estate
 *      while reading.
 *
 *   2. Mobile menu polish — full-height drawer with a search input at
 *      the top, a 4-icon shortcut grid below it, then the grouped
 *      nav. Dividers + 56-px tap targets.
 *
 *   3. Bottom tab-bar (mobile only) — five-slot thumb-zone navigation
 *      strip: Home / Shop / Search / Cart / Menu. Replaces the
 *      single-purpose floating Shop FAB. Honors safe-area-inset-bottom.
 * ============================================================ */

/* ── 1. Sticky condensed header ─────────────────────────────── */
.ta-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(10, 1, 24, 0.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    transition: padding 220ms ease, background 220ms ease, border-color 220ms ease;
    border-bottom: 1px solid transparent;
}
.ta-header.is-scrolled {
    background: rgba(10, 1, 24, 0.97);
    border-bottom-color: rgba(0, 212, 255, 0.18);
}
.ta-header.is-scrolled .ta-header__inner { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.ta-header.is-scrolled .ta-brand__tag    { display: none; }                /* drop the tagline when condensed */
.ta-header.is-scrolled .ta-brand__mark img,
.ta-header.is-scrolled .ta-brand__mark picture { transform: scale(0.82); transform-origin: left center; }
.ta-header.is-scrolled [data-ta-desktop]   { display: none !important; }   /* drop the "Secure" badge */
@media (prefers-reduced-motion: reduce) {
    .ta-header,
    .ta-header.is-scrolled .ta-brand__mark img,
    .ta-header.is-scrolled .ta-brand__mark picture { transition: none !important; transform: none !important; }
}

/* ── 2. Mobile menu polish ───────────────────────────────────── */
.ta-mobile-menu__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin: 0 16px 12px;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.24);
    border-radius: 12px;
}
.ta-mobile-menu__search-icon { color: var(--ta-cyan-bolt); flex-shrink: 0; }
.ta-mobile-menu__search-input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--ta-text-strong);
    font-size: 1rem;        /* >= 16px stops iOS auto-zoom on focus */
    outline: none;
    min-width: 0;
}
.ta-mobile-menu__search-input::placeholder { color: var(--ta-text-soft); }
.ta-mobile-menu__shortcuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 16px 12px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12);
    margin-bottom: 12px;
}
.ta-mobile-menu__shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: var(--ta-text-strong);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    min-height: 64px;       /* >= 44px Apple HIG, comfortably above */
}
.ta-mobile-menu__shortcut:hover,
.ta-mobile-menu__shortcut:focus-visible {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.32);
    color: var(--ta-cyan-bolt);
}
.ta-mobile-menu__shortcut svg { color: var(--ta-cyan-bolt); }

/* Tap targets in the existing nav list — bump to 56px so they pass
 * "easy to navigate" on any thumb. */
.ta-mobile-menu__link,
.ta-mobile-menu__sublink {
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ta-mobile-menu__link--has-children { justify-content: space-between; }
.ta-mobile-menu__sublink { padding-left: 36px; font-size: 0.92rem; color: var(--ta-text-soft); }

/* ── 3. Bottom tab-bar — REMOVED in v2.4.5 ────────────────────────
 *
 * The mobile bottom tab-bar experiment had repeat cross-browser
 * specificity issues (Safari + Samsung Internet ignored `all: unset`,
 * left <button> items rendering as grey UA widgets stacking below
 * the footer). The floating Shop FAB that lived here before — single
 * gold pill bottom-right — has been restored. The hamburger menu in
 * the header already covers full navigation (Shop / Learn / Company
 * / Policies + search + 4-icon shortcut row + grouped sub-nav), so a
 * single Shop CTA at the bottom is sufficient for thumb-reach.
 *
 * If you see any `.ta-tabbar` markup served somewhere, it's a stale
 * cache — the markup is gone from footer.php as of v2.4.5. This rule
 * hides any leftover rendering just in case:
 * ─────────────────────────────────────────────────────────────── */
.ta-tabbar,
.ta-tabbar * {
    display: none !important;
    visibility: hidden !important;
}

/* ── Footer simplification ─────────────────────────────────── */
.ta-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: var(--ta-s-8);
    max-width: 460px;
}
.ta-footer__tagline {
    color: var(--ta-text-soft);
    font-size: var(--ta-fs-sm);
    margin: 0;
}
.ta-footer__grid--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ta-s-8);
}
@media (max-width: 720px) {
    .ta-footer__grid--3col {
        grid-template-columns: 1fr 1fr;        /* two columns on phone */
        gap: var(--ta-s-6);
    }
    .ta-footer__grid--3col .ta-footer__col:last-child {
        grid-column: 1 / -1;                   /* legal block full-width on phone */
    }
}
@media (max-width: 420px) {
    .ta-footer__grid--3col { grid-template-columns: 1fr; }
    .ta-footer__grid--3col .ta-footer__col:last-child { grid-column: auto; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * COA LIBRARY — community-reports layout (page-coa-library.php)
 *
 * Structure mirrors redhelixresearch.com/COAReports while keeping the
 * cosmic-dark Titan Amino palette:
 *   • Back-to-home link (top-left, eyebrow style)
 *   • Two-tone hero title ("COMMUNITY" solid light + gradient "COA REPORTS")
 *   • Subtitle
 *   • Pill search input + "UPLOAD COA" pill CTA toolbar
 *   • 3 / 2 / 1-col responsive card grid; each card:
 *       PDF preview block, eyebrow, name, concentration row, two CTAs
 * ───────────────────────────────────────────────────────────────────── */

.ta-coa-back {
    display: inline-flex;
    align-items: center;
    gap: var(--ta-s-2);
    color: var(--ta-text-muted);
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: var(--ta-s-8);
    transition: color 200ms var(--ta-ease);
}
.ta-coa-back:hover,
.ta-coa-back:focus-visible { color: var(--ta-cyan-bolt); }

.ta-coa-title {
    font-family: var(--ta-font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 var(--ta-s-4);
    word-break: break-word;
}
.ta-coa-title__community {
    color: var(--ta-text-strong);
}
.ta-coa-title__brand {
    background: linear-gradient(90deg, var(--ta-cyan-bolt), var(--ta-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-left: 0.25em;
}

.ta-coa-subtitle {
    color: var(--ta-text-soft);
    font-size: var(--ta-fs-base);
    margin: 0 0 var(--ta-s-10);
    max-width: 60ch;
}

/* Toolbar (search + upload). */
.ta-coa-toolbar {
    display: flex;
    gap: var(--ta-s-4);
    align-items: center;
    margin-bottom: var(--ta-s-10);
    flex-wrap: wrap;
}
.ta-coa-search {
    flex: 1 1 320px;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
}
.ta-coa-search__icon {
    position: absolute;
    left: var(--ta-s-4);
    color: var(--ta-text-muted);
    pointer-events: none;
}
.ta-coa-search__input {
    width: 100%;
    padding: var(--ta-s-4) var(--ta-s-5) var(--ta-s-4) calc(var(--ta-s-4) + 28px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: var(--ta-text-strong);
    font-family: inherit;
    font-size: var(--ta-fs-base);
    line-height: 1.4;
    transition: border-color 200ms var(--ta-ease), box-shadow 200ms var(--ta-ease);
}
.ta-coa-search__input::placeholder { color: var(--ta-text-muted); }
.ta-coa-search__input:focus {
    outline: none;
    border-color: var(--ta-pink-glow);
    box-shadow: 0 0 0 3px rgba(192, 38, 211, 0.18);
}

.ta-coa-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ta-s-2);
    padding: var(--ta-s-4) var(--ta-s-6);
    background: var(--ta-text-strong);
    color: #060A1E;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-sm);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 220ms var(--ta-ease), color 220ms var(--ta-ease), transform 220ms var(--ta-ease);
}
.ta-coa-upload-btn:hover,
.ta-coa-upload-btn:focus-visible {
    background: var(--ta-cyan-bolt);
    color: #060A1E;
    transform: translateY(-1px);
}

/* Card grid. */
.ta-coa-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ta-s-6);
    margin: var(--ta-s-8) 0 var(--ta-s-12);
}
@media (max-width: 1024px) { .ta-coa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ta-coa-grid { grid-template-columns: 1fr; } }

/* Card. */
.ta-coalib-card {
    display: flex;
    flex-direction: column;
    gap: var(--ta-s-3);
    padding: var(--ta-s-6);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    transition: border-color 220ms var(--ta-ease), transform 220ms var(--ta-ease), box-shadow 220ms var(--ta-ease);
}
.ta-coalib-card:hover {
    border-color: rgba(192, 38, 211, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(192, 38, 211, 0.16);
}

/* Preview block — square-ish; clickable when a file URL is attached. */
.ta-coalib-card__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ta-s-3);
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--ta-r-md);
    color: var(--ta-text-muted);
    text-decoration: none;
    text-align: center;
    padding: var(--ta-s-4);
    transition: background 220ms var(--ta-ease), color 220ms var(--ta-ease), border-color 220ms var(--ta-ease);
}
.ta-coalib-card__preview:hover,
.ta-coalib-card__preview:focus-visible {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.2);
    color: var(--ta-cyan-bolt);
}
.ta-coalib-card__preview--empty {
    cursor: default;
    opacity: 0.7;
}
.ta-coalib-card__preview--empty:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--ta-text-muted);
    border-color: rgba(255, 255, 255, 0.06);
}
.ta-coalib-card__preview-icon { line-height: 0; }
.ta-coalib-card__preview-label {
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-sm);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Eyebrow + name. */
.ta-coalib-card__eyebrow {
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ta-magenta);
    margin-top: var(--ta-s-3);
}
.ta-coalib-card__name {
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xl);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ta-text-strong);
    margin: 0;
    word-break: break-word;
}

/* Field block (concentration / purity / etc). */
.ta-coalib-card__field {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--ta-r-sm);
    padding: var(--ta-s-3) var(--ta-s-4);
    margin: var(--ta-s-2) 0 var(--ta-s-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ta-coalib-card__field-label {
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ta-text-muted);
}
.ta-coalib-card__field-value {
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-base);
    font-weight: 800;
    color: var(--ta-text-strong);
}

/* Actions (CTAs). */
.ta-coalib-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ta-s-2);
    margin-top: auto;
}
.ta-coalib-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ta-s-2);
    padding: var(--ta-s-3) var(--ta-s-4);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--ta-text-strong);
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    width: 100%;
    transition: background 200ms var(--ta-ease), border-color 200ms var(--ta-ease), color 200ms var(--ta-ease), transform 200ms var(--ta-ease);
}
.ta-coalib-card__btn--primary {
    border-color: rgba(0, 212, 255, 0.35);
}
.ta-coalib-card__btn--primary:hover,
.ta-coalib-card__btn--primary:focus-visible {
    background: rgba(0, 212, 255, 0.08);
    border-color: var(--ta-cyan-bolt);
    color: var(--ta-cyan-bolt);
}
.ta-coalib-card__btn--ghost:hover,
.ta-coalib-card__btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.22);
}
.ta-coalib-card__btn--copied {
    background: rgba(52, 211, 153, 0.12) !important;
    border-color: rgba(52, 211, 153, 0.5) !important;
    color: var(--ta-success, #34d399) !important;
}
.ta-coalib-card__btn--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.ta-coalib-card__btn-icon { line-height: 1; font-size: 1em; }

/* Admin row (edit / delete) — small links below the CTAs. */
.ta-coalib-card__admin {
    display: flex;
    gap: var(--ta-s-3);
    justify-content: flex-end;
    margin-top: var(--ta-s-2);
    padding-top: var(--ta-s-2);
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.ta-coalib-card__admin-link {
    color: var(--ta-text-muted);
    font-family: var(--ta-font-mono, monospace);
    font-size: var(--ta-fs-xs);
    text-decoration: none;
    letter-spacing: 0.04em;
}
.ta-coalib-card__admin-link:hover { color: var(--ta-cyan-bolt); }
.ta-coalib-card__admin-link--del:hover { color: var(--ta-pink-glow, #c026d3); }

/* Hidden rows during search filter. */
.ta-coalib-card[hidden],
.ta-coalib-card.is-hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
 * SHOP-ARCHIVE TOOLBAR (woocommerce/archive-product.php)
 *
 * Sits BETWEEN the category-pills row and the product grid. Contains:
 *   • woocommerce_result_count()      — "Showing 1–12 of 30 results"
 *   • woocommerce_catalog_ordering()  — sort-by dropdown (popularity /
 *     rating / date / price / price-desc / default)
 *
 * Themed to match the cosmic-dark palette: muted text on the left,
 * pill-shaped dropdown on the right, full-width stack on mobile.
 * ───────────────────────────────────────────────────────────────────── */

.ta-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-s-4);
    margin: var(--ta-s-6) 0 var(--ta-s-4);
    padding: var(--ta-s-4) var(--ta-s-5);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--ta-r-md);
    flex-wrap: wrap;
}
.ta-shop-toolbar__count {
    color: var(--ta-text-muted);
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
}
.ta-shop-toolbar__count p,
.ta-shop-toolbar .woocommerce-result-count {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}
.ta-shop-toolbar__sort {
    display: flex;
    align-items: center;
    gap: var(--ta-s-3);
}
.ta-shop-toolbar__sort::before {
    content: 'Sort by';
    color: var(--ta-text-muted);
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ta-shop-toolbar .woocommerce-ordering {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ta-s-2);
}
.ta-shop-toolbar .woocommerce-ordering select,
.ta-shop-toolbar .orderby {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: var(--ta-s-2) calc(var(--ta-s-5) + 12px) var(--ta-s-2) var(--ta-s-4);
    background: rgba(255, 255, 255, 0.04);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ta-text-strong) 50%),
        linear-gradient(135deg, var(--ta-text-strong) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--ta-text-strong);
    font-family: var(--ta-font-display);
    font-size: var(--ta-fs-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    min-width: 220px;
    transition: border-color 200ms var(--ta-ease), background-color 200ms var(--ta-ease);
}
.ta-shop-toolbar .woocommerce-ordering select:hover,
.ta-shop-toolbar .orderby:hover {
    border-color: rgba(0, 212, 255, 0.4);
    background-color: rgba(0, 212, 255, 0.04);
}
.ta-shop-toolbar .woocommerce-ordering select:focus-visible,
.ta-shop-toolbar .orderby:focus-visible {
    outline: none;
    border-color: var(--ta-cyan-bolt);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
}
/* Option dropdown — when the OS popup paints these, force dark bg so
 * we don't get white-on-white in dark-mode browsers. */
.ta-shop-toolbar .woocommerce-ordering select option,
.ta-shop-toolbar .orderby option {
    background: #060A1E;
    color: var(--ta-text-strong);
}

@media (max-width: 640px) {
    .ta-shop-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ta-s-3);
    }
    .ta-shop-toolbar__sort { justify-content: space-between; }
    .ta-shop-toolbar .woocommerce-ordering select,
    .ta-shop-toolbar .orderby { flex: 1; min-width: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * ABOUT-page hero — uses the bundled `titanamino-wordmark` brand photo
 * (the burgundy textile / "For Research Purposes Only" image) as the
 * page-top backdrop, with a deep-space veil so the headline + lede stay
 * legible at WCAG AA.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(280px, 38vw, 520px);
    display: grid;
    place-items: center;
    padding: clamp(3rem, 8vw, 6rem) 0;
}
.ta-about-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.ta-about-hero__media img,
.ta-about-hero__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.ta-about-hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 10, 30, 0.55) 0%, rgba(6, 10, 30, 0.78) 60%, rgba(0, 0, 0, 0.92) 100%),
        radial-gradient(ellipse at 30% 30%, rgba(0, 212, 255, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(110, 38, 255, 0.18) 0%, transparent 55%);
}
.ta-about-hero__content {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
 * HELIX strip — replacement for the legacy autoplay video strip. Holds
 * the bundled DNA-grid brand photo (titanamino-helix-grid) as a static
 * banner image sitting directly under the centered hero.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-helix-strip .ta-video-strip__inner {
    aspect-ratio: 16 / 6;
    max-height: 56vh;
    background: var(--ta-black);
}
.ta-helix-strip__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}
.ta-helix-strip__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    display: block;
}
.ta-helix-strip .ta-video-strip__overlay {
    background:
        linear-gradient(180deg, rgba(6, 10, 30, 0.40) 0%, rgba(6, 10, 30, 0.10) 35%, rgba(0, 0, 0, 0.85) 100%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 212, 255, 0.18) 0%, transparent 60%);
}
@media (max-width: 640px) {
    .ta-helix-strip .ta-video-strip__inner { aspect-ratio: 4 / 3; max-height: 44vh; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * MONOLITH HERO — full-viewport layout with brand-mark backdrop + centered
 * stack of brand name, dual stats, and numbered menu list. Dimensions are
 * derived from real measurements (1920×945 reference) so the visual rhythm
 * holds up: wordmark ~42px at top:28%, stats 43/17px at top:44%, menu rows
 * 410px wide × 28px tall starting at top:57%, trust bar pinned to the
 * viewport floor.
 *
 *   Layer 0: black canvas
 *   Layer 1: `.ta-hero__monolith-bg` — Titan Amino brand mark filling the
 *            viewport. Vignette + dark wash keep the centered content
 *            legible against the bicep colors.
 *   Layer 2: `.ta-hero__monolith-card` — TRANSPARENT region holding the
 *            brand-name + stats + menu. NO glass card background — the
 *            content sits directly on the figure with a thin 1px outline
 *            around the menu sub-block for definition.
 *   Layer 3: `.ta-hero__monolith-foot` — anchored to viewport bottom.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-hero--monolith {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    position: relative;
    isolation: isolate;
    background: var(--ta-black);
    overflow: hidden;
    color: var(--ta-text-strong);
}
/* Suppress the legacy nebula/star layers when the monolith variant is on. */
.ta-hero--monolith::before { opacity: 0.15; mix-blend-mode: screen; }
.ta-hero--monolith::after  { opacity: 0.30; }

/* Brand-mark backdrop — covers the full viewport with the bicep centered. */
.ta-hero__monolith-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.ta-hero__monolith-bg img,
.ta-hero__monolith-bg picture {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 35%;
    filter: contrast(1.05) saturate(1.20);
}
/* Vignette + brand wash — dark enough at the corners to keep the menu
 * outline + foot bar legible, lightest at the figure's center. */
.ta-hero__monolith-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 72% 62% at 50% 44%, transparent 0%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.90) 100%),
        linear-gradient(180deg, rgba(6, 10, 30, 0.55) 0%, rgba(6, 10, 30, 0.10) 28%, rgba(0, 0, 0, 0.55) 75%, var(--ta-black) 100%);
    pointer-events: none;
}

/* Center the content stack vertically + horizontally inside the hero. The
 * card itself has NO background — the bicep image is the visual ground;
 * the content (wordmark, stats, menu) floats on top of it. */
.ta-hero__monolith-card {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(454px, calc(100% - 2rem));
    padding: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    text-align: center;
    color: var(--ta-text-strong);
}

/* Brand wordmark — 41.58px reference → clamp(28→44px). Light weight to
 * match peptaura's elegant geometric. Lowercase + trailing period is the
 * same beat their lockup uses. */
.ta-hero__brand {
    font-family: var(--ta-font-display);
    font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ta-text-strong);
    line-height: 1.05;
    margin: 0 0 clamp(3rem, 7vw, 5rem);
    text-transform: lowercase;
}

/* Two stats side by side. Big number 43px fw:300, sub-label 17px fw:400.
 * These are deliberately LIGHT weight — peptaura's spec — not the heavy
 * Space Grotesk 900 we use for h1s elsewhere. */
.ta-hero--monolith .ta-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin: 0 0 clamp(3rem, 6vw, 4.5rem);
    text-align: left;
}
.ta-hero--monolith .ta-hero__stat {
    display: block;
}
.ta-hero--monolith .ta-hero__stat-big {
    display: block;
    font-family: var(--ta-font-display);
    font-size: clamp(2rem, 1.5vw + 1.5rem, 2.75rem);
    font-weight: 300;
    color: var(--ta-text-strong);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}
.ta-hero--monolith .ta-hero__stat-small {
    display: block;
    font-family: var(--ta-font-body);
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1.0625rem);
    font-weight: 400;
    color: var(--ta-text-strong);
    line-height: 1.18;
    opacity: 0.92;
    max-width: 18ch;
}

/* Menu list — 410px wide reference, 28px tall rows, 15px font, label-left
 * Roman-numeral-right. Thin outline wraps the WHOLE menu sub-block (not
 * around the entire card) — that's the rectangular frame visible in the
 * peptaura reference. */
.ta-hero__menu {
    list-style: none;
    padding: clamp(0.5rem, 1vw, 0.875rem) clamp(1rem, 2vw, 1.5rem);
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: transparent;
    max-width: 100%;
    width: 100%;
    text-align: left;
}
.ta-hero__menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.ta-hero__menu li:last-child { border-bottom: 0; }
.ta-hero__menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 4vmin, 3.5rem);
    padding: clamp(0.55rem, 0.5vw + 0.35rem, 0.7rem) 0.25rem;
    color: var(--ta-text-strong);
    text-decoration: none;
    font-family: var(--ta-font-display);
    font-weight: 400;
    font-size: 0.9375rem;
    letter-spacing: 0;
    transition: color 200ms var(--ta-ease), opacity 200ms var(--ta-ease);
    opacity: 0.92;
}
.ta-hero__menu a:hover,
.ta-hero__menu a:focus-visible {
    color: var(--ta-cyan-bolt);
    opacity: 1;
    outline: none;
}
.ta-hero__menu-label { font-weight: 400; }
.ta-hero__menu-num {
    font-family: var(--ta-font-display);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    min-width: 2.5ch;
    text-align: right;
}

/* Bottom-edge trust bar — pinned to the viewport floor. */
.ta-hero__monolith-foot {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
    padding: clamp(1rem, 1.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem);
    color: var(--ta-text-strong);
    font-size: clamp(0.8125rem, 0.2vw + 0.7rem, 1rem);
    flex-wrap: wrap;
}
.ta-hero__trust {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.75rem);
    flex-wrap: wrap;
    font-size: inherit;
    color: var(--ta-text-strong);
    opacity: 0.92;
}
.ta-hero__trust-globe {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ta-text-strong);
}
.ta-hero__trust-globe svg {
    width: 16px;
    height: 16px;
    opacity: 0.85;
}
.ta-hero__trust-buyers {
    color: var(--ta-text-strong);
    opacity: 0.78;
}

/* Tablet — slightly narrower card region. */
@media (max-width: 900px) {
    .ta-hero__monolith-card {
        width: min(420px, calc(100% - 2rem));
    }
}

/* Phone — stats stack, wordmark shrinks, menu padding tightens. */
@media (max-width: 640px) {
    .ta-hero__monolith-card {
        width: calc(100% - 2rem);
    }
    .ta-hero__brand {
        font-size: clamp(1.5rem, 8vw, 2.25rem);
        margin-bottom: 2rem;
    }
    .ta-hero--monolith .ta-hero__stats {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 2.5rem;
        text-align: center;
    }
    .ta-hero--monolith .ta-hero__stat-small { max-width: none; margin-inline: auto; }
    .ta-hero__menu { padding: 0.5rem 1rem; }
    .ta-hero__menu a { font-size: 0.9rem; padding: 0.55rem 0.25rem; }
    .ta-hero__monolith-foot {
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: 1.25rem;
    }
    .ta-hero__monolith-bg img,
    .ta-hero__monolith-bg picture { object-position: center 36%; }
}

/* Reduced motion — kill the scroll-knob animation. */
@media (prefers-reduced-motion: reduce) {
    .ta-hero__scroll-knob { animation: none; transform: translate(-50%, -50%); }
    .ta-bestsellers__cue-knob { animation: none; transform: translate(-50%, -50%); }
}

/* ─────────────────────────────────────────────────────────────────────────
 * SEAMLESS HERO → BEST-SELLERS TRANSITION
 *
 * The monolith hero's brand-mark backdrop fades out across its last 22%
 * (the dark vignette gradient blends to the next section's --ta-black).
 * The best-sellers section then lifts UP into that fade zone via a
 * negative top margin so the top of its cards visually overlap the
 * hero's bicep — same pattern peptaura.com uses where the figure's torso
 * shows behind the top edge of the cards.
 *
 * No hard cut anywhere. The eyebrow "MOST POPULAR" + "SCROLL" cue floats
 * over the boundary so the rail reads as a continuation of the hero,
 * not a separate band.
 * ───────────────────────────────────────────────────────────────────────── */

/* Soften the hero's bottom so it fades cleanly into the next section.
 * Existing vignette already pulls the corners dark; this adds an explicit
 * linear fade on the last ~22% of the hero. */
.ta-hero--monolith .ta-hero__monolith-bg::after {
    background:
        radial-gradient(ellipse 70% 60% at 50% 44%, transparent 0%, rgba(0, 0, 0, 0.50) 72%, rgba(0, 0, 0, 0.85) 100%),
        linear-gradient(180deg, rgba(6, 10, 30, 0.50) 0%, rgba(6, 10, 30, 0.08) 28%, rgba(0, 0, 0, 0.60) 78%, var(--ta-black) 100%);
}

.ta-bestsellers {
    position: relative;
    z-index: 2;
    margin-top: clamp(-180px, -18vw, -120px);
    padding: 0 0 clamp(3rem, 6vw, 5rem);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.0) 60%, var(--ta-black) 100%);
}

.ta-bestsellers__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-s-4);
    padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
    color: var(--ta-text-muted);
    font-family: var(--ta-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.ta-bestsellers__eyebrow {
    color: var(--ta-text-soft);
}
.ta-bestsellers__cue {
    display: flex;
    align-items: center;
    gap: var(--ta-s-3);
}
.ta-bestsellers__cue-track {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
}
.ta-bestsellers__cue-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    background: var(--ta-text-strong);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ta-rail-cue-knob 2.6s ease-in-out infinite;
}
@keyframes ta-rail-cue-knob {
    0%, 100% { transform: translate(-150%, -50%); }
    50%      { transform: translate(  50%, -50%); }
}

/* The frame holds the rail + arrow buttons. Positioned so the arrows
 * float over the rail edges and the rail itself has edge-fade masks so
 * cards dissolve into the background at the sides. */
.ta-bestsellers__frame {
    position: relative;
    padding: 0 clamp(2rem, 5vw, 4rem);
}

.ta-bestsellers__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(240px, 22vw, 320px);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem) clamp(1rem, 1.5vw, 1.5rem);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
    outline: none;
}
.ta-bestsellers__rail::-webkit-scrollbar { display: none; }
.ta-bestsellers__rail:focus-visible {
    box-shadow: 0 0 0 2px var(--ta-cyan-bolt) inset;
    border-radius: var(--ta-r-lg);
}

/* Glass-morphism card — the bicep image bleeds through the top of each
 * card via the semi-transparent background + backdrop blur. */
.ta-bestsellers__card {
    position: relative;
    aspect-ratio: 3 / 4;
    min-height: 340px;
    border-radius: var(--ta-r-xl);
    overflow: hidden;
    scroll-snap-align: start;
    isolation: isolate;
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: transform var(--ta-dur) var(--ta-ease-out), box-shadow var(--ta-dur) var(--ta-ease);
}
.ta-bestsellers__card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 212, 255, 0.30) inset,
        var(--ta-glow-blue);
}
.ta-bestsellers__card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0, 212, 255, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 100% 100%, rgba(110, 38, 255, 0.30) 0%, transparent 65%),
        linear-gradient(165deg, rgba(11, 18, 50, 0.78) 0%, rgba(20, 36, 92, 0.62) 55%, rgba(6, 10, 30, 0.85) 100%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
            backdrop-filter: blur(8px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: inherit;
}
.ta-bestsellers__card-link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1vw, 1rem);
    width: 100%;
    height: 100%;
    padding: clamp(1rem, 1.5vw, 1.4rem);
    color: var(--ta-text-strong);
    text-decoration: none;
}
.ta-bestsellers__card--placeholder {
    pointer-events: none;
    padding: clamp(1rem, 1.5vw, 1.4rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1vw, 1rem);
}
.ta-bestsellers__card--placeholder > * {
    position: relative;
    z-index: 1;
}
.ta-bestsellers__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.ta-bestsellers__card-titles { min-width: 0; }
.ta-bestsellers__card-name {
    font-family: var(--ta-font-display);
    font-size: clamp(1.15rem, 1.2vw + 0.5rem, 1.5rem);
    font-weight: 800;
    color: var(--ta-text-strong);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.ta-bestsellers__card-price {
    font-family: var(--ta-font-body);
    font-size: var(--ta-fs-sm);
    color: var(--ta-text-soft);
    margin: 0;
}
.ta-bestsellers__card-spot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: var(--ta-text-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--ta-dur) var(--ta-ease);
}
.ta-bestsellers__card:hover .ta-bestsellers__card-spot {
    background: rgba(0, 212, 255, 0.30);
    border-color: var(--ta-cyan-bolt);
}
.ta-bestsellers__card-icon {
    color: var(--ta-text-soft);
    opacity: 0.85;
}
.ta-bestsellers__card-variants {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ta-bestsellers__card-variants li {
    font-family: var(--ta-font-mono);
    font-size: 0.72rem;
    padding: 4px 10px;
    color: var(--ta-text-soft);
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.ta-bestsellers__card-stats {
    margin: auto 0 0;
    padding-top: clamp(0.75rem, 1vw, 1rem);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.5rem, 1vw, 0.75rem);
}
.ta-bestsellers__card-stats > div { min-width: 0; }
.ta-bestsellers__card-stats dt {
    font-family: var(--ta-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    color: var(--ta-text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.ta-bestsellers__card-stats dd {
    font-family: var(--ta-font-display);
    font-size: clamp(1.5rem, 1.8vw + 0.4rem, 2rem);
    font-weight: 900;
    color: var(--ta-text-strong);
    margin: 0;
    line-height: 1;
}

/* Arrow buttons — float over the rail edges, fade when at start/end. */
.ta-bestsellers__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(11, 18, 50, 0.78);
    color: var(--ta-text-strong);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition:
        opacity 220ms var(--ta-ease),
        background 200ms var(--ta-ease),
        border-color 200ms var(--ta-ease),
        transform 200ms var(--ta-ease);
}
.ta-bestsellers__arrow--prev { left: clamp(0.5rem, 1.5vw, 1.25rem); }
.ta-bestsellers__arrow--next { right: clamp(0.5rem, 1.5vw, 1.25rem); }
.ta-bestsellers__arrow:hover,
.ta-bestsellers__arrow:focus-visible {
    background: rgba(0, 212, 255, 0.18);
    border-color: var(--ta-cyan-bolt);
    color: var(--ta-cyan-bolt);
    outline: none;
}
.ta-bestsellers__arrow:active {
    transform: translateY(-50%) scale(0.94);
}
.ta-bestsellers__arrow[disabled],
.ta-bestsellers__arrow.is-at-edge {
    opacity: 0;
    pointer-events: none;
}
.ta-bestsellers__arrow:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.30);
}

/* Mobile tuning — narrower cards, smaller arrows, tighter padding. */
@media (max-width: 640px) {
    .ta-bestsellers {
        margin-top: clamp(-120px, -16vw, -80px);
    }
    .ta-bestsellers__rail {
        grid-auto-columns: 78vw;
    }
    .ta-bestsellers__card {
        min-height: 320px;
    }
    .ta-bestsellers__arrow {
        width: 40px;
        height: 40px;
    }
    .ta-bestsellers__head {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * CYCLE 5 — Live-site customizations baked back into the theme source.
 *
 * Every rule below was authored in the Customizer's Additional CSS pane
 * during the design-pass conversation and is now permanent. Organized in
 * chronological order by the change that introduced it.
 *
 * Sections:
 *   1.  Monolith hero — full-viewport peptaura-style layout
 *   2.  Best-sellers rail — horizontal product showcase with arrow controls
 *   3.  Hero → bestsellers seamless transition + trust bar position
 *   4.  Standard band — replace helix-grid image with quiet tagline
 *   5.  COA cascade → vertical lab-audit-log layout
 *   6.  Real Unsplash photos for about + age-gate slots
 *   7.  Site-wide background video positioning + edge vignette
 * ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
 * 1. MONOLITH HERO  — full-viewport layout (peptaura-derived proportions).
 *    Brand-mark backdrop covers the viewport; content stack sits centered
 *    over it with a 1px outline around the menu sub-block only. Trust bar
 *    pinned to viewport floor.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-hero--monolith {
    min-height: 100vh; min-height: 100dvh;
    padding: 0;
    position: relative;
    isolation: isolate;
    background: var(--ta-black);
    overflow: hidden;
    color: var(--ta-text-strong);
}
.ta-hero--monolith::before { opacity: 0.15; mix-blend-mode: screen; }
.ta-hero--monolith::after  { opacity: 0.30; }
.ta-hero__monolith-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ta-hero__monolith-bg img,
.ta-hero__monolith-bg picture {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: center 35%;
    filter: contrast(1.05) saturate(1.20);
}
.ta-hero__monolith-bg::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 72% 60% at 50% 42%, transparent 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.90) 100%),
        linear-gradient(180deg, rgba(6,10,30,0.55) 0%, rgba(6,10,30,0.10) 26%, rgba(0,0,0,0.60) 68%, rgba(0,0,0,0.95) 88%, #000 100%);
}
.ta-hero--monolith .ta-hero__monolith-bg::before {
    /* legacy edge-helix slot — kept empty; future decorations land here */
    background-image: none;
    animation: none;
    opacity: 0;
}
.ta-hero__monolith-card {
    position: absolute; z-index: 3;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(454px, calc(100% - 2rem));
    padding: 0; background: transparent; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none; text-align: center;
    color: var(--ta-text-strong);
}
.ta-hero__brand {
    font-family: var(--ta-font-display);
    font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
    font-weight: 500; letter-spacing: -0.02em;
    color: var(--ta-text-strong); line-height: 1.05;
    margin: 0 0 clamp(3rem, 7vw, 5rem);
    text-transform: lowercase;
}
.ta-hero--monolith .ta-hero__stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin: 0 0 clamp(3rem, 6vw, 4.5rem);
    text-align: left;
}
.ta-hero--monolith .ta-hero__stat { display: block; }
.ta-hero--monolith .ta-hero__stat-big {
    display: block;
    font-family: var(--ta-font-display);
    font-size: clamp(2rem, 1.5vw + 1.5rem, 2.75rem);
    font-weight: 300; color: var(--ta-text-strong);
    line-height: 1; letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}
.ta-hero--monolith .ta-hero__stat-small {
    display: block;
    font-family: var(--ta-font-body);
    font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1.0625rem);
    font-weight: 400; color: var(--ta-text-strong);
    line-height: 1.18; opacity: 0.92;
    max-width: 18ch;
}
.ta-hero__menu {
    list-style: none;
    padding: clamp(0.5rem, 1vw, 0.875rem) clamp(1rem, 2vw, 1.5rem);
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.32);
    background: transparent;
    width: 100%; text-align: left;
}
.ta-hero__menu li { border-bottom: 1px solid rgba(255,255,255,0.18); }
.ta-hero__menu li:last-child { border-bottom: 0; }
.ta-hero__menu a {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(2rem, 4vmin, 3.5rem);
    padding: clamp(0.55rem, 0.5vw + 0.35rem, 0.7rem) 0.25rem;
    color: var(--ta-text-strong); text-decoration: none;
    font-family: var(--ta-font-display);
    font-weight: 400; font-size: 0.9375rem; letter-spacing: 0;
    opacity: 0.92;
    transition: color 200ms var(--ta-ease), opacity 200ms var(--ta-ease);
}
.ta-hero__menu a:hover,
.ta-hero__menu a:focus-visible {
    color: var(--ta-cyan-bolt); opacity: 1; outline: none;
}
.ta-hero__menu-label { font-weight: 400; }
.ta-hero__menu-num {
    font-family: var(--ta-font-display);
    font-size: 0.8125rem; font-weight: 400;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    min-width: 2.5ch; text-align: right;
}
.ta-hero__monolith-foot {
    position: absolute; z-index: 3;
    left: 0; right: 0;
    bottom: clamp(1.5rem, 3vw, 2.5rem);
    display: flex; justify-content: center; align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
    padding: clamp(1rem, 1.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem) 0;
    color: var(--ta-text-strong);
    font-size: clamp(0.8125rem, 0.2vw + 0.7rem, 1rem);
    flex-wrap: wrap;
}
.ta-hero__trust {
    display: flex; align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.75rem);
    flex-wrap: wrap; opacity: 0.92;
}
.ta-hero__trust-globe { display: inline-flex; align-items: center; gap: 0.5rem; }
.ta-hero__trust-globe svg { width: 16px; height: 16px; opacity: 0.85; }
.ta-hero__trust-buyers { opacity: 0.78; }
@media (max-width: 900px) {
    .ta-hero__monolith-card { width: min(420px, calc(100% - 2rem)); }
}
@media (max-width: 640px) {
    .ta-hero__monolith-card { width: calc(100% - 2rem); }
    .ta-hero__brand { font-size: clamp(1.5rem, 8vw, 2.25rem); margin-bottom: 2rem; }
    .ta-hero--monolith .ta-hero__stats { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; text-align: center; }
    .ta-hero--monolith .ta-hero__stat-small { max-width: none; margin-inline: auto; }
    .ta-hero__menu { padding: 0.5rem 1rem; }
    .ta-hero__menu a { font-size: 0.9rem; padding: 0.55rem 0.25rem; }
    .ta-hero__monolith-foot { flex-direction: column; gap: 0.5rem; padding-bottom: 1.25rem; }
    .ta-hero__monolith-bg img,
    .ta-hero__monolith-bg picture { object-position: center 36%; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 2. BEST-SELLERS RAIL — horizontal product showcase
 * ───────────────────────────────────────────────────────────────────────── */
.ta-bestsellers {
    margin-top: 0;
    padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
    background: #000;
    position: relative;
    z-index: 2;
}
.ta-bestsellers::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -160px; height: 160px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 55%, #000 100%);
    pointer-events: none;
    z-index: 1;
}
.ta-bestsellers__head {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 1rem;
    padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
    color: var(--ta-text-muted);
    font-family: var(--ta-font-mono);
    font-size: 0.6875rem; letter-spacing: 0.32em;
    text-transform: uppercase;
    position: relative; z-index: 2;
}
.ta-bestsellers__eyebrow { color: var(--ta-text-soft); }
/* SCROLL toggle pill — hidden permanently per merchant request. */
.ta-bestsellers__cue { display: none !important; }

.ta-bestsellers__frame {
    position: relative;
    padding: 0 clamp(2rem, 5vw, 4rem);
    z-index: 2;
}
.ta-bestsellers__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(240px, 22vw, 320px);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem) clamp(1rem, 1.5vw, 1.5rem);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
    outline: none;
}
.ta-bestsellers__rail::-webkit-scrollbar { display: none; }
.ta-bestsellers__card {
    position: relative;
    aspect-ratio: 3 / 4; min-height: 340px;
    border-radius: var(--ta-r-xl);
    overflow: hidden; scroll-snap-align: start;
    isolation: isolate;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10);
    transition: transform var(--ta-dur) var(--ta-ease-out), box-shadow var(--ta-dur) var(--ta-ease);
}
.ta-bestsellers__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,212,255,0.30) inset, var(--ta-glow-blue);
}
.ta-bestsellers__card-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0,212,255,0.22) 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 100% 100%, rgba(110,38,255,0.30) 0%, transparent 65%),
        linear-gradient(165deg, rgba(11,18,50,0.78) 0%, rgba(20,36,92,0.62) 55%, rgba(6,10,30,0.85) 100%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
            backdrop-filter: blur(8px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: inherit;
}
.ta-bestsellers__card-link,
.ta-bestsellers__card--placeholder {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    gap: clamp(0.75rem, 1vw, 1rem);
    width: 100%; height: 100%;
    padding: clamp(1rem, 1.5vw, 1.4rem);
    color: var(--ta-text-strong); text-decoration: none;
}
.ta-bestsellers__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.ta-bestsellers__card-titles { min-width: 0; }
.ta-bestsellers__card-name {
    font-family: var(--ta-font-display);
    font-size: clamp(1.15rem, 1.2vw + 0.5rem, 1.5rem);
    font-weight: 800; color: var(--ta-text-strong);
    letter-spacing: -0.01em; line-height: 1.15;
    margin: 0 0 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.ta-bestsellers__card-price {
    font-family: var(--ta-font-body); font-size: var(--ta-fs-sm);
    color: var(--ta-text-soft); margin: 0;
}
.ta-bestsellers__card-spot {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.30);
    color: var(--ta-text-strong);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background var(--ta-dur) var(--ta-ease);
}
.ta-bestsellers__card:hover .ta-bestsellers__card-spot {
    background: rgba(0,212,255,0.30); border-color: var(--ta-cyan-bolt);
}
.ta-bestsellers__card-icon { color: var(--ta-text-soft); opacity: 0.85; }
.ta-bestsellers__card-variants {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.ta-bestsellers__card-variants li {
    font-family: var(--ta-font-mono); font-size: 0.72rem;
    padding: 4px 10px;
    color: var(--ta-text-soft);
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(255,255,255,0.04);
    border-radius: var(--ta-r-pill);
}
.ta-bestsellers__card-stats {
    margin: auto 0 0;
    padding-top: clamp(0.75rem, 1vw, 1rem);
    border-top: 1px solid rgba(255,255,255,0.14);
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.5rem, 1vw, 0.75rem);
}
.ta-bestsellers__card-stats > div { min-width: 0; }
.ta-bestsellers__card-stats dt {
    font-family: var(--ta-font-mono); font-size: 0.58rem;
    letter-spacing: 0.18em; color: var(--ta-text-muted);
    text-transform: uppercase; margin-bottom: 2px;
}
.ta-bestsellers__card-stats dd {
    font-family: var(--ta-font-display);
    font-size: clamp(1.5rem, 1.8vw + 0.4rem, 2rem);
    font-weight: 900; color: var(--ta-text-strong);
    margin: 0; line-height: 1;
}
.ta-bestsellers__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 4;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.30);
    background: rgba(11,18,50,0.78);
    color: var(--ta-text-strong);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: opacity 220ms var(--ta-ease), background 200ms var(--ta-ease), border-color 200ms var(--ta-ease), transform 200ms var(--ta-ease);
}
.ta-bestsellers__arrow--prev { left: clamp(0.5rem, 1.5vw, 1.25rem); }
.ta-bestsellers__arrow--next { right: clamp(0.5rem, 1.5vw, 1.25rem); }
.ta-bestsellers__arrow:hover,
.ta-bestsellers__arrow:focus-visible {
    background: rgba(0,212,255,0.18); border-color: var(--ta-cyan-bolt);
    color: var(--ta-cyan-bolt); outline: none;
}
.ta-bestsellers__arrow:active { transform: translateY(-50%) scale(0.94); }
.ta-bestsellers__arrow[disabled],
.ta-bestsellers__arrow.is-at-edge { opacity: 0; pointer-events: none; }
.ta-bestsellers__arrow:focus-visible { box-shadow: 0 0 0 3px rgba(0,212,255,0.30); }
@media (max-width: 640px) {
    .ta-bestsellers__rail { grid-auto-columns: 78vw; }
    .ta-bestsellers__card { min-height: 320px; }
    .ta-bestsellers__arrow { width: 40px; height: 40px; }
    .ta-bestsellers__head { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 3. STANDARD BAND — replaces the helix-grid image with a quiet text band.
 *    "THE TITAN AMINO STANDARD" eyebrow + "Lab-verified. Lot-traced.
 *    Titan-grade." headline. Edge fades dissolve into surrounding black.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-helix-strip {
    aspect-ratio: auto;
    height: auto; max-height: none;
    min-height: clamp(220px, 24vw, 320px);
    padding: 0;
    position: relative;
    background:
        radial-gradient(ellipse 60% 55% at 50% 50%, rgba(110,38,255,0.10) 0%, transparent 65%),
        #000;
    overflow: hidden;
    display: flex;
}
.ta-helix-strip::before,
.ta-helix-strip::after {
    content: '';
    position: absolute; left: 0; right: 0;
    height: 56px;
    pointer-events: none; z-index: 3;
}
.ta-helix-strip::before { top: 0;    background: linear-gradient(180deg, #000 0%, transparent 100%); }
.ta-helix-strip::after  { bottom: 0; background: linear-gradient(0deg,   #000 0%, transparent 100%); }
.ta-helix-strip .ta-video-strip__inner {
    aspect-ratio: auto; max-height: none;
    background: transparent; position: static;
    overflow: visible;
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: clamp(4.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem);
    gap: clamp(0.5rem, 1vw, 1rem);
    z-index: 1;
}
.ta-helix-strip .ta-helix-strip__media,
.ta-helix-strip .ta-video-strip__overlay,
.ta-helix-strip .ta-video-strip__shield,
.ta-helix-strip picture,
.ta-helix-strip img { display: none; }
.ta-helix-strip .ta-video-strip__inner::before {
    content: 'THE TITAN AMINO STANDARD';
    display: block;
    font-family: var(--ta-font-mono);
    font-size: 0.6875rem; letter-spacing: 0.32em;
    color: rgba(0,212,255,0.85);
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}
.ta-helix-strip .ta-video-strip__inner::after {
    content: 'Lab-verified. Lot-traced. Titan-grade.';
    display: block;
    font-family: var(--ta-font-display);
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
    font-weight: 500; color: var(--ta-text-strong);
    line-height: 1.2; letter-spacing: -0.01em;
    max-width: 24ch; margin: 0 auto;
}
@media (max-width: 640px) {
    .ta-helix-strip { min-height: 200px; }
    .ta-helix-strip::before,
    .ta-helix-strip::after { height: 40px; }
    .ta-helix-strip .ta-video-strip__inner { padding: 3rem 1.25rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 4. COA CASCADE → LIVE AUDIT LOG
 *    Convert the 3D rotating-card carousel into a vertical lab-notebook
 *    style row-list. Force JS-applied transforms / blur filters off.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-coa-cascade {
    perspective: none;
    background: #000;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem);
    position: relative;
    overflow: hidden;
}
.ta-coa-cascade__bg,
.ta-coa-cascade__grid { display: none; }
.ta-coa-cascade::before,
.ta-coa-cascade::after {
    content: '';
    position: absolute; left: 0; right: 0;
    height: 96px;
    pointer-events: none; z-index: 3;
}
.ta-coa-cascade::before { top: 0;    background: linear-gradient(180deg, #000 0%, transparent 100%); }
.ta-coa-cascade::after  { bottom: 0; background: linear-gradient(0deg,   #000 0%, transparent 100%); }
.ta-coa-cascade__head {
    text-align: center;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    position: relative; z-index: 2;
}
.ta-coa-cascade__head::after {
    content: '';
    display: block; width: 80px; height: 2px;
    margin: clamp(1rem, 2vw, 1.75rem) auto 0;
    background: linear-gradient(90deg, transparent 0%, var(--ta-cyan-bolt) 50%, transparent 100%);
}
.ta-coa-cascade__viewport {
    perspective: none; overflow: visible;
    height: auto; margin: 0; padding: 0;
}
.ta-coa-cascade__deck {
    display: flex; flex-direction: column;
    transform: none; animation: none;
    margin: 0 auto; max-width: 960px;
    width: calc(100% - 2rem);
    gap: 0;
    background: linear-gradient(180deg, rgba(11,18,50,0.50) 0%, rgba(6,10,30,0.40) 100%);
    border: 1px solid rgba(0,212,255,0.18);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,212,255,0.06) inset;
    position: relative; z-index: 2;
}
.ta-coa-cascade__deck > .ta-coa-card:nth-child(n+6) { display: none; }
.ta-coa-cascade__deck > .ta-coa-card {
    position: static; width: 100%; height: auto;
    transform: none; margin: 0;
    animation: none; opacity: 1; filter: none;
}
.ta-coa-cascade__deck,
.ta-coa-cascade__deck > .ta-coa-card,
.ta-coa-cascade__deck > .ta-coa-card .ta-coa-card__inner {
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
    filter: none !important;
    opacity: 1 !important;
    will-change: auto !important;
    transition: background 200ms var(--ta-ease), box-shadow 200ms var(--ta-ease) !important;
}
.ta-coa-cascade__deck > .ta-coa-card .ta-coa-card__inner {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: center;
    padding: clamp(0.85rem, 1.5vw, 1.15rem) clamp(1rem, 2.5vw, 1.75rem);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0,212,255,0.10);
    border-radius: 0;
    box-shadow: none;
    position: relative; z-index: 1;
}
.ta-coa-cascade__deck > .ta-coa-card:nth-child(5) .ta-coa-card__inner { border-bottom: 0; }
.ta-coa-cascade__deck > .ta-coa-card .ta-coa-card__inner:hover {
    background: rgba(0,212,255,0.05) !important;
    box-shadow: inset 3px 0 0 var(--ta-cyan-bolt) !important;
    filter: none !important;
}
.ta-coa-card__beam,
.ta-coa-card__corner,
.ta-coa-card__highlight { display: none; }
.ta-coa-cascade__deck .ta-coa-card__head { display: contents; }
.ta-coa-cascade__deck .ta-coa-card__verified {
    font-size: 0;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ta-cyan-bolt);
    box-shadow: 0 0 0 3px rgba(0,212,255,0.18), 0 0 12px rgba(0,212,255,0.55);
    padding: 0; border: 0; line-height: 1;
    flex: 0 0 auto; order: 1;
}
.ta-coa-cascade__deck .ta-coa-card--placeholder .ta-coa-card__verified,
.ta-coa-cascade--placeholder .ta-coa-card__verified {
    background: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.ta-coa-card__pulse { display: none; }
.ta-coa-cascade__deck .ta-coa-card__lot {
    font-family: var(--ta-font-mono);
    font-size: 0.72rem; letter-spacing: 0.10em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    order: 2; min-width: 5ch;
}
.ta-coa-cascade__deck .ta-coa-card__title {
    font-family: var(--ta-font-display);
    font-size: clamp(0.92rem, 0.45vw + 0.82rem, 1.075rem);
    font-weight: 500; color: var(--ta-text-strong);
    margin: 0; line-height: 1.25;
    order: 3; text-align: left;
}
.ta-coa-cascade__deck .ta-coa-card__title a { color: inherit; text-decoration: none; }
.ta-coa-cascade__deck .ta-coa-card__meta { display: contents; }
.ta-coa-cascade__deck .ta-coa-card__meta > div {
    display: flex; flex-direction: column; gap: 2px;
    text-align: right; line-height: 1.1; min-width: 7ch;
}
.ta-coa-cascade__deck .ta-coa-card__meta > div:nth-child(1) { order: 4; }
.ta-coa-cascade__deck .ta-coa-card__meta > div:nth-child(2) { order: 5; }
.ta-coa-cascade__deck .ta-coa-card__meta > div:nth-child(3) { display: none; }
.ta-coa-cascade__deck .ta-coa-card__meta dt {
    font-family: var(--ta-font-mono);
    font-size: 0.56rem; letter-spacing: 0.16em;
    color: rgba(255,255,255,0.42);
    text-transform: uppercase; margin: 0;
}
.ta-coa-cascade__deck .ta-coa-card__meta dd {
    font-family: var(--ta-font-display);
    font-size: 0.875rem; font-weight: 500;
    color: var(--ta-text-strong); margin: 0;
}
.ta-coa-cascade__deck .ta-coa-card__purity { color: var(--ta-cyan-bolt); }
.ta-coa-cascade__deck .ta-coa-card__foot { margin: 0; padding: 0; order: 6; }
.ta-coa-cascade__deck .ta-coa-card__link {
    display: inline-flex; align-items: center;
    gap: 0.4rem;
    font-family: var(--ta-font-mono);
    font-size: 0.66rem; letter-spacing: 0.18em;
    color: var(--ta-cyan-bolt); text-transform: uppercase;
    text-decoration: none;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(0,212,255,0.32);
    border-radius: 4px;
    background: transparent;
    transition: background 200ms var(--ta-ease), border-color 200ms var(--ta-ease), color 200ms var(--ta-ease);
}
.ta-coa-cascade__deck .ta-coa-card__link:hover {
    background: rgba(0,212,255,0.10); border-color: var(--ta-cyan-bolt);
}
.ta-coa-cascade__deck .ta-coa-card__link--muted {
    color: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.14);
    background: transparent; pointer-events: none;
}
@media (max-width: 640px) {
    .ta-coa-cascade__deck > .ta-coa-card .ta-coa-card__inner {
        grid-template-columns: auto auto 1fr;
        row-gap: 0.5rem;
    }
    .ta-coa-cascade__deck .ta-coa-card__meta > div { text-align: left; min-width: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 5. SITE-WIDE BACKGROUND VIDEO
 *    Optional fixed-position autoplay-muted-loop video as the page
 *    backdrop. Driven by the titanamino_bg_video_url Customizer setting
 *    (see inc/customizer.php). Edge-fade veil layered above.
 * ───────────────────────────────────────────────────────────────────────── */
.ta-bg-video {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    object-fit: cover; object-position: center;
    z-index: -2; pointer-events: none;
    opacity: 0.55;
    filter: saturate(1.1) contrast(1.05);
}
.ta-bg-video-veil {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, transparent 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.95) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 12%, transparent 88%, rgba(0,0,0,0.85) 100%),
        linear-gradient(90deg,  rgba(0,0,0,0.85) 0%, transparent  8%, transparent 92%, rgba(0,0,0,0.85) 100%);
}
/* When the video setting is empty the markup is not output and these
 * rules are simply unused; nothing visual changes. When it IS set, the
 * body+html background becomes transparent and section backgrounds
 * are knocked down so the video peeks through subtly across the page. */
html.has-bg-video,
body.has-bg-video { background: transparent !important; }
html.has-bg-video { background: #000 !important; }
.has-bg-video .ta-hero--monolith,
.has-bg-video .ta-bestsellers,
.has-bg-video .ta-helix-strip,
.has-bg-video .ta-section,
.has-bg-video .ta-coa-cascade,
.has-bg-video .ta-footer { background-color: rgba(0,0,0,0.40) !important; }
.has-bg-video .ta-header,
.has-bg-video .ta-compliance-strip { background-color: rgba(0,0,0,0.85) !important; }
@media (prefers-reduced-motion: reduce) {
    .ta-bg-video,
    .ta-bg-video-veil { display: none !important; }
}
@media (max-width: 720px) {
    .ta-bg-video { opacity: 0.35; }
}