/* ==========================================================
   Premium Fitness Brands — Futuristic UI layer
   Glow accents · glass panels · animated hero grid · scroll reveal
   Shared across index.html, equipment.html, admin.html.
   Safe/additive: uses existing theme vars, degrades without JS.
   ========================================================== */

/* ---------- Animated hero grid overlay (injected by futuristic.js) ---------- */
.fx-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(234,67,69,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(234,67,69,0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 42%, #000 28%, transparent 85%);
    mask-image: radial-gradient(ellipse 75% 65% at 50% 42%, #000 28%, transparent 85%);
    animation: fxGridPan 24s linear infinite;
    opacity: 0.65;
}
.fx-hero-grid::after {
    content: '';
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle at 32% 32%, rgba(234,67,69,0.22), transparent 46%);
    animation: fxGlowDrift 15s ease-in-out infinite alternate;
}
@keyframes fxGridPan {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 44px 44px, 44px 44px; }
}
@keyframes fxGlowDrift {
    from { transform: translate(0, 0); }
    to   { transform: translate(22%, 16%); }
}

/* Keep hero text above the grid */
.hero-cinematic-content { position: relative; z-index: 3; }
.page-header-equip > *  { position: relative; z-index: 2; }
.contact-hero-dark > *  { position: relative; z-index: 2; }
.contact-hero-dark > *  { position: relative; z-index: 2; }

/* ---------- Glass panels (cards) ---------- */
.product-card,
.review-card,
.stat-card,
.brand-item-dark,
.branches-box-dark,
.form-area-dark {
    background: rgba(20, 20, 20, 0.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s, border-color 0.35s;
}
.product-card:hover,
.review-card:hover,
.stat-card:hover,
.brand-item-dark:hover,
.branches-box-dark:hover {
    transform: translateY(-6px);
    border-color: rgba(234, 67, 69, 0.55);
    box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 30px -8px rgba(234,67,69,0.5);
}

/* Product image subtle zoom on hover */
.product-card .card-img-wrap { overflow: hidden; }
.product-card .card-img-wrap img { transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.product-card:hover .card-img-wrap img { transform: scale(1.06); }

/* ---------- Glow on primary buttons ---------- */
.hero-cta-btn, .add-cart-btn, .submit-btn, .admin-btn, .view-product-btn,
.submit-btn-green, .write-review-btn, .wishlist-btn, .tab-btn {
    transition: box-shadow 0.3s, transform 0.25s, background 0.3s, filter 0.3s;
}
.hero-cta-btn:hover, .add-cart-btn:hover, .submit-btn:hover,
.admin-btn:hover, .view-product-btn:hover,
.submit-btn-green:hover, .write-review-btn:hover, .wishlist-btn:hover, .tab-btn:hover {
    box-shadow: 0 0 0 1px rgba(234,67,69,0.5), 0 8px 30px -6px rgba(234,67,69,0.65);
    transform: translateY(-2px);
}

/* ---------- Glowing accent lines ---------- */
.accent-line { box-shadow: 0 0 14px rgba(234,67,69,0.8); }
.about-preview-section::before { box-shadow: 0 0 16px rgba(234,67,69,0.85); }

/* ---------- Scroll reveal (class added by JS, so no-JS shows everything) ---------- */
.fx-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4,0,0.2,1);
    will-change: opacity, transform;
}
.fx-reveal.fx-in { opacity: 1; transform: none; }

/* ---------- Admin: faint fixed grid backdrop ---------- */
.admin-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(234,67,69,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(234,67,69,0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 75%);
    opacity: 0.5;
}
.admin-body > * { position: relative; z-index: 1; }
.admin-table-wrap {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: box-shadow 0.35s, border-color 0.35s;
}
.admin-table-wrap:hover {
    border-color: rgba(234,67,69,0.35);
    box-shadow: 0 0 26px -10px rgba(234,67,69,0.4);
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .fx-reveal { opacity: 1 !important; transform: none !important; }
    .fx-hero-grid, .fx-hero-grid::after { animation: none !important; }
    .product-card:hover, .review-card:hover, .stat-card:hover { transform: none; }
}
/* ==========================================================
   Trending Now + Seasonal Offers — extra animation layer
   (headers cascade in, cards stagger, shine sweep on hover,
   ambient glow drift, live countdown digit ticks)
   ========================================================== */

/* ---------- Section header cascade ---------- */
.fx-head > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.fx-head.fx-in > * { opacity: 1; transform: none; }
.fx-head.fx-in > *:nth-child(2) { transition-delay: 0.12s; }
.fx-head.fx-in > *:nth-child(3) { transition-delay: 0.24s; }
.fx-head.fx-in > *:nth-child(4) { transition-delay: 0.36s; }

/* Accent line draws itself from the middle outward */
.fx-head > .accent-line { transform: scaleX(0); transform-origin: center; }
.fx-head.fx-in > .accent-line {
    transform: scaleX(1);
    transition: opacity 0.4s ease 0.4s, transform 0.8s cubic-bezier(0.4,0,0.2,1) 0.4s;
}

/* ---------- Product card stagger (set via --fx-d by JS) ---------- */
.fx-card.fx-reveal {
    transform: translateY(34px) scale(0.94);
    filter: blur(6px);
    transition:
        opacity 0.65s ease var(--fx-d, 0s),
        transform 0.65s cubic-bezier(0.4,0,0.2,1) var(--fx-d, 0s),
        filter 0.65s ease var(--fx-d, 0s);
}
.fx-card.fx-reveal.fx-in { transform: none; filter: none; }

/* ---------- Shine sweep across cards on hover ---------- */
.featured-section .product-card,
.seasonal-offers-section .product-card { overflow: hidden; }
.featured-section .product-card::after,
.seasonal-offers-section .product-card::after {
    content: '';
    position: absolute;
    top: -10%; bottom: -10%; left: -80%;
    width: 55%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255,255,255,0.10) 40%,
        rgba(234,67,69,0.10) 60%,
        transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}
.featured-section .product-card:hover::after,
.seasonal-offers-section .product-card:hover::after {
    animation: fxShine 0.9s ease forwards;
}
@keyframes fxShine {
    0%   { left: -80%; opacity: 0; }
    25%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

/* ---------- Ambient glow drifting behind both sections ---------- */
.featured-section,
.seasonal-offers-section { position: relative; }
.featured-section::before,
.seasonal-offers-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(620px 340px at 15% 18%, rgba(234,67,69,0.075), transparent 70%),
        radial-gradient(520px 300px at 85% 78%, rgba(234,67,69,0.055), transparent 70%);
    animation: fxAmbient 14s ease-in-out infinite alternate;
}
.seasonal-offers-section::before {
    background:
        radial-gradient(620px 340px at 20% 15%, rgba(245,158,11,0.06), transparent 70%),
        radial-gradient(520px 300px at 80% 80%, rgba(234,67,69,0.06), transparent 70%);
}
.featured-section > *,
.seasonal-offers-section > * { position: relative; z-index: 1; }
/* Who We Are hologram: keep the story text above the 3D canvas */
.about-preview-section > :not(.fx-holo-canvas) { position: relative; z-index: 1; }
@keyframes fxAmbient {
    from { opacity: 0.55; transform: translateY(-10px); }
    to   { opacity: 1;    transform: translateY(12px); }
}

/* ---------- Countdown: digit tick + breathing glow ---------- */
.seasonal-countdown .countdown-timer > div span.fx-tick {
    animation: fxTick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes fxTick {
    0%   { transform: translateY(-40%); opacity: 0; text-shadow: 0 0 28px rgba(234,67,69,0.95); }
    100% { transform: none; opacity: 1; }
}
.seasonal-countdown .countdown-timer > div {
    animation: fxTileBreath 3.2s ease-in-out infinite;
}
.seasonal-countdown .countdown-timer > div:nth-child(2) { animation-delay: 0.4s; }
.seasonal-countdown .countdown-timer > div:nth-child(3) { animation-delay: 0.8s; }
.seasonal-countdown .countdown-timer > div:nth-child(4) { animation-delay: 1.2s; }
@keyframes fxTileBreath {
    0%, 100% { box-shadow: 0 8px 30px -10px rgba(234,67,69,0.5), inset 0 0 22px -14px rgba(234,67,69,0.7); }
    50%      { box-shadow: 0 8px 34px -8px rgba(234,67,69,0.75), inset 0 0 26px -12px rgba(234,67,69,0.95); }
}

/* ==========================================================
   Infinite loop carousels — Trending Now + Seasonal Offers
   3 full cards centred, a faded partial card on each corner,
   no arrows, drag/scroll only, endless in both directions.
   ========================================================== */

/* Arrows are gone — drag / swipe / trackpad scroll instead */
.carousel-nav { display: none !important; }

/* Wider stage so the two corner cards peek in beside the 3 main ones:
   3 × 300px cards + 2 × 24px gaps = 948px, the rest is the corner peek */
.trending-carousel-wrapper {
    max-width: 1340px;
    padding: 0;
}

.fx-loop-carousel {
    scroll-behavior: auto;      /* instant seam-jumps for the loop */
    scroll-snap-type: none;     /* free drag, no snap fighting the wrap */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* Corner cards melt into the background at both edges */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0,
        rgba(0,0,0,0.15) 60px,
        #000 210px,
        #000 calc(100% - 210px),
        rgba(0,0,0,0.15) calc(100% - 60px),
        transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0,
        rgba(0,0,0,0.15) 60px,
        #000 210px,
        #000 calc(100% - 210px),
        rgba(0,0,0,0.15) calc(100% - 60px),
        transparent 100%);
}
.fx-loop-carousel:active { cursor: grabbing; }
.fx-loop-carousel img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Too few products to loop — just centre them, no edge fade needed */
.fx-loop-carousel.fx-loop-static {
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
    cursor: default;
}

/* Seasonal grid shares .trending-carousel so cards flow in one row;
   keep a little breathing room under the countdown */
.seasonal-offers-section .trending-carousel-wrapper { margin-top: 10px; }

/* Narrow screens: one full card centred, slim fade at the edges */
@media (max-width: 768px) {
    .fx-loop-carousel {
        -webkit-mask-image: linear-gradient(90deg,
            transparent 0, #000 42px,
            #000 calc(100% - 42px), transparent 100%);
        mask-image: linear-gradient(90deg,
            transparent 0, #000 42px,
            #000 calc(100% - 42px), transparent 100%);
    }
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .fx-head > *, .fx-card.fx-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .featured-section::before,
    .seasonal-offers-section::before,
    .seasonal-countdown .countdown-timer > div,
    .seasonal-countdown .countdown-timer > div span.fx-tick { animation: none !important; }
    .featured-section .product-card:hover::after,
    .seasonal-offers-section .product-card:hover::after { animation: none !important; }
}

/* ---------- Countdown: remove the grey card so the timer
   floats directly on the section (tiles keep their glass) ---------- */
.seasonal-countdown .countdown-box {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---------- Countdown: tilted-back 3D dashboard look ---------- */
.seasonal-countdown .countdown-timer {
    transform: perspective(750px) rotateX(16deg);
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
}
.seasonal-countdown .countdown-timer > div {
    /* deepen the illusion: soft under-glow like the tiles are lit from the front */
    background-image: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25));
}
@media (prefers-reduced-motion: reduce) {
    /* static tilt is not motion — keep it */
}
/* ==========================================================
   Reviews section — ambient "ghost reviews" background layer
   Real posted reviews (home + product pages) pop in, drift,
   and fade out behind the review form and cards.
   Injected by futuristic.js; fully absent without JS.
   ========================================================== */
.fx-review-ghosts {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
/* keep the real content above the ghosts */
.reviews-section > .section-header,
.reviews-section > .reviews-container {
    position: relative;
    z-index: 1;
}
.fx-ghost {
    position: absolute;
    width: 250px;
    max-width: 38vw;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(234, 67, 69, 0.07);
    border: 1px solid rgba(234, 67, 69, 0.24);
    box-shadow: 0 0 34px -10px rgba(234, 67, 69, 0.45);
    opacity: 0;
    transform: rotate(var(--gr, 0deg)) scale(0.85);
    filter: blur(0.4px);
    animation: fxGhostLife var(--gd, 12s) ease-in-out forwards;
    will-change: opacity, transform;
}
.fx-ghost .fx-ghost-stars {
    color: #f59e0b;
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 7px;
    opacity: 0.85;
}
.fx-ghost .fx-ghost-text {
    color: var(--text-secondary, #c4c4c4);
    font-size: 12.5px;
    line-height: 1.55;
    font-style: italic;
}
.fx-ghost .fx-ghost-author {
    margin-top: 8px;
    color: rgba(234, 67, 69, 0.75);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
@keyframes fxGhostLife {
    0%   { opacity: 0; transform: rotate(var(--gr, 0deg)) scale(0.85) translate(0, 14px); }
    12%  { opacity: var(--go, 0.5); transform: rotate(var(--gr, 0deg)) scale(1) translate(0, 0); }
    82%  { opacity: var(--go, 0.5); transform: rotate(var(--gr, 0deg)) scale(1) translate(var(--gx, 0px), var(--gy, -18px)); }
    100% { opacity: 0; transform: rotate(var(--gr, 0deg)) scale(0.92) translate(var(--gx, 0px), calc(var(--gy, -18px) - 14px)); }
}
@media (max-width: 768px) {
    .fx-ghost { width: 180px; padding: 12px 14px; }
    .fx-ghost .fx-ghost-text { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .fx-review-ghosts { display: none !important; }
}

/* ==========================================================
   Branch cards (Contact page) — rendered from admin settings
   ========================================================== */
.branches-grid-dark {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.branch-card-dark {
    background: rgba(20, 20, 20, 0.5);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius, 10px);
    padding: 22px 24px;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s, border-color 0.35s;
}
.branch-card-dark:hover {
    transform: translateY(-5px);
    border-color: rgba(234, 67, 69, 0.55);
    box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 26px -8px rgba(234,67,69,0.5);
}
.branch-card-dark h3 {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.branch-card-dark h3 i { color: var(--accent); margin-right: 10px; }
.branch-card-dark p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.branch-card-dark p i { color: rgba(234,67,69,0.7); font-size: 12px; margin-top: 4px; }
.branch-card-dark a { color: var(--text-secondary); text-decoration: none; }
.branch-card-dark a:hover { color: var(--accent); }

/* ==========================================================
   Offer banner — futuristic upgrade
   Angled edges, animated gradient, sweeping sheen, glow rails,
   eyebrow badge. Text stays owner-editable via data-site.
   ========================================================== */
.offer-banner {
    background: linear-gradient(120deg, #a12d2f 0%, var(--accent) 30%, #7e1f21 65%, var(--accent) 100%) !important;
    background-size: 240% 240% !important;
    animation: fxOfferPan 12s ease-in-out infinite alternate;
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    padding: 38px 20px !important;
    isolation: isolate;
}
@keyframes fxOfferPan {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}
/* sweeping sheen across the whole band */
.offer-banner::after {
    content: '';
    position: absolute;
    top: -20%; bottom: -20%; left: -35%;
    width: 28%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.16), transparent);
    transform: skewX(-18deg);
    animation: fxOfferSheen 6.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes fxOfferSheen {
    0%, 55% { left: -35%; }
    100%    { left: 135%; }
}
.offer-banner-inner { position: relative; z-index: 2; }
.offer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 30px;
    padding: 5px 14px;
    margin-bottom: 10px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: fxEyebrowPulse 2.8s ease-in-out infinite;
}
.offer-eyebrow i { color: #ffd166; }
@keyframes fxEyebrowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.28); }
    50%      { box-shadow: 0 0 22px 2px rgba(255,255,255,0.30); }
}
.offer-banner h2 {
    text-shadow: 0 0 26px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.3);
    font-size: clamp(22px, 3.2vw, 30px) !important;
    margin-bottom: 10px !important;
}
.offer-banner h2::before,
.offer-banner h2::after {
    content: '///';
    font-size: 0.5em;
    letter-spacing: 2px;
    opacity: 0.55;
    vertical-align: middle;
    margin: 0 16px;
}
.offer-banner p {
    max-width: 760px;
    margin: 0 auto;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 40px;
    padding: 10px 22px;
    display: inline-block;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) {
    .offer-banner { animation: none !important; }
    .offer-banner::after { animation: none !important; display: none; }
    .offer-eyebrow { animation: none !important; }
}

/* ==========================================================
   EQUIPMENT PAGE — futuristic upgrade layer
   ========================================================== */

/* Ambient drifting glow behind the whole shop layout */
.equip-layout { position: relative; }
.equip-layout::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(640px 360px at 12% 8%, rgba(234,67,69,0.06), transparent 70%),
        radial-gradient(540px 320px at 88% 55%, rgba(234,67,69,0.05), transparent 70%),
        radial-gradient(480px 300px at 40% 95%, rgba(245,158,11,0.035), transparent 70%);
    animation: fxAmbient 16s ease-in-out infinite alternate;
}
.equip-layout > * { position: relative; z-index: 1; }

/* Toolbar becomes a glass HUD bar with a live-status result count */
.equip-toolbar {
    background: rgba(20, 20, 20, 0.55) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(234, 67, 69, 0.35) !important;
    box-shadow: 0 10px 30px -18px rgba(234, 67, 69, 0.35);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.equip-toolbar:hover {
    border-color: rgba(234, 67, 69, 0.3) !important;
    box-shadow: 0 12px 34px -16px rgba(234, 67, 69, 0.5);
}
.result-count { display: inline-flex; align-items: center; gap: 9px; }
.result-count::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(234, 67, 69, 0.9);
    animation: fxLiveDot 2.2s ease-in-out infinite;
}
@keyframes fxLiveDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.8); }
}

/* Sidebar filter panels: glass + glow, matching the product cards */
.equip-sidebar .sidebar-section {
    background: rgba(20, 20, 20, 0.5) !important;
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.equip-sidebar .sidebar-section:hover {
    border-color: rgba(234, 67, 69, 0.45) !important;
    box-shadow: 0 0 26px -10px rgba(234, 67, 69, 0.45);
}
/* accent tick that slides in beside the open section title */
.equip-sidebar .sidebar-header-title { position: relative; padding-left: 12px; }
.equip-sidebar .sidebar-header-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 70%;
    border-radius: 3px;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(234, 67, 69, 0.8);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.equip-sidebar .sidebar-section:hover .sidebar-header-title::before { transform: translateY(-50%) scaleY(1); }

/* Filter pills glow when hovered/active */
#categoryFilters .filter-pill { transition: box-shadow 0.25s, transform 0.25s, background 0.25s, border-color 0.25s; }
#categoryFilters .filter-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(234, 67, 69, 0.45), 0 6px 18px -6px rgba(234, 67, 69, 0.55);
}

/* Equipment hero eyebrow pulses like the offer badge */
.page-header-equip .equip-hero-eyebrow { animation: fxEyebrowPulse 2.8s ease-in-out infinite; }

/* ==========================================================
   CONTACT PAGE — futuristic upgrade layer
   ========================================================== */

/* Ambient glow drifting behind the sidebar + form */
.contact-wrapper-dark { position: relative; }
.contact-wrapper-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(620px 340px at 10% 12%, rgba(234,67,69,0.07), transparent 70%),
        radial-gradient(520px 320px at 90% 80%, rgba(245,158,11,0.045), transparent 70%);
    animation: fxAmbient 15s ease-in-out infinite alternate;
}
.contact-wrapper-dark > * { position: relative; z-index: 1; }

/* Contact info blocks become glass chips with a glowing icon */
.info-block-dark {
    background: rgba(20, 20, 20, 0.5);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius, 10px);
    padding: 16px 18px !important;
    margin-bottom: 14px;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s;
}
.info-block-dark:hover {
    transform: translateX(5px);
    border-color: rgba(234, 67, 69, 0.5);
    box-shadow: 0 0 24px -8px rgba(234, 67, 69, 0.5);
}
.info-block-dark i {
    filter: drop-shadow(0 0 8px rgba(234, 67, 69, 0.7));
    transition: transform 0.3s;
}
.info-block-dark:hover i { transform: scale(1.15); }

/* Form heading gets a self-drawing accent line */
.form-heading-dark { position: relative; padding-bottom: 14px; }
.form-heading-dark::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 64px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    box-shadow: 0 0 14px rgba(234, 67, 69, 0.8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.form-area-dark.fx-in .form-heading-dark::after { transform: scaleX(1); }

/* Inputs: glowing focus ring across the quote form */
.form-group-dark input:focus,
.form-group-dark textarea:focus,
.form-group-dark select:focus {
    border-color: rgba(234, 67, 69, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(234, 67, 69, 0.18), 0 0 22px -6px rgba(234, 67, 69, 0.55) !important;
    outline: none;
}

/* Branches / Brands section titles: underline draws in on reveal */
.branches-section-dark h2,
.brands-section-dark h2 { position: relative; display: inline-block; padding-bottom: 12px; }
.branches-section-dark h2::after,
.brands-section-dark h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    box-shadow: 0 0 12px rgba(234, 67, 69, 0.7);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
}
.branches-section-dark.fx-in h2::after,
.brands-section-dark.fx-in h2::after { transform: scaleX(1); }

/* Brand chips: shine sweep on hover */
.brand-item-dark { position: relative; overflow: hidden; }
.brand-item-dark::after {
    content: '';
    position: absolute;
    top: -10%; bottom: -10%; left: -80%;
    width: 55%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.12) 45%, rgba(234,67,69,0.10) 60%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
}
.brand-item-dark:hover::after { animation: fxShine 0.9s ease forwards; }

/* ---------- Reduced motion for the new layers ---------- */
@media (prefers-reduced-motion: reduce) {
    .equip-layout::before,
    .contact-wrapper-dark::before,
    .result-count::before,
    .page-header-equip .equip-hero-eyebrow { animation: none !important; }
    .form-heading-dark::after,
    .branches-section-dark h2::after,
    .brands-section-dark h2::after { transform: scaleX(1) !important; transition: none !important; }
    .brand-item-dark:hover::after { animation: none !important; }
    .info-block-dark:hover { transform: none; }
}

/* ==========================================================
   Starfield — Equipment + Contact pages
   Tiny glowing stars drifting down-left at 45°, in three
   parallax depths. Fixed behind ALL content (z-index -1,
   pointer-events none) so it can never block interaction;
   it shows against the page background and faintly through
   the glass panels. Injected by futuristic.js.
   ========================================================== */
.fx-starfield {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.fx-starfield i {
    position: absolute;
    top: -60%;
    left: 0;
    width: 220%;
    height: 220%;
    background-repeat: repeat;
    animation: fxStarDrift linear infinite;
    will-change: transform;
}
/* far layer — tiniest, slowest, dimmest */
.fx-starfield i:nth-child(1) {
    background-image:
        radial-gradient(1px 1px at 22px 34px, rgba(255,255,255,0.55), transparent 100%),
        radial-gradient(1px 1px at 118px 92px, rgba(255,255,255,0.4), transparent 100%),
        radial-gradient(1px 1px at 187px 151px, rgba(234,67,69,0.5), transparent 100%),
        radial-gradient(1px 1px at 64px 178px, rgba(255,255,255,0.35), transparent 100%);
    background-size: 210px 210px;
    --fx-tile: 210px;
    animation-duration: 30s;
    opacity: 0.5;
}
/* mid layer */
.fx-starfield i:nth-child(2) {
    background-image:
        radial-gradient(1.5px 1.5px at 45px 20px, rgba(255,255,255,0.7), transparent 100%),
        radial-gradient(1.5px 1.5px at 190px 130px, rgba(255,255,255,0.5), transparent 100%),
        radial-gradient(1.5px 1.5px at 110px 220px, rgba(234,67,69,0.6), transparent 100%),
        radial-gradient(1px 1px at 250px 70px, rgba(255,255,255,0.45), transparent 100%);
    background-size: 290px 290px;
    --fx-tile: 290px;
    animation-duration: 19s;
    opacity: 0.55;
}
/* near layer — biggest, fastest, with a soft glow */
.fx-starfield i:nth-child(3) {
    background-image:
        radial-gradient(2px 2px at 80px 60px, rgba(255,255,255,0.85), rgba(255,255,255,0) 100%),
        radial-gradient(2.5px 2.5px at 260px 200px, rgba(234,67,69,0.75), rgba(234,67,69,0) 100%),
        radial-gradient(2px 2px at 170px 320px, rgba(255,214,102,0.55), rgba(255,214,102,0) 100%);
    background-size: 380px 380px;
    --fx-tile: 380px;
    animation-duration: 12s;
    opacity: 0.6;
}
/* Seamless 45° down-left loop: shift by exactly one tile */
@keyframes fxStarDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(var(--fx-tile) * -1), var(--fx-tile), 0); }
}
@media (prefers-reduced-motion: reduce) {
    .fx-starfield i { animation: none !important; }   /* stars stay, just static */
}
/* Data-saver-ish mercy on small screens: drop the densest layer */
@media (max-width: 600px) {
    .fx-starfield i:nth-child(3) { display: none; }
}
/* ===== Premium Fitness Brands logo mark in the nav ===== */
.nav-logo .logo-circle,
.nf-logo .logo-circle {
    border-color: var(--accent, #ea4345);
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}
.nav-logo .logo-circle img,
.nf-logo .logo-circle img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    display: block;
}

/* ===== "Premium Fitness Brands" nav lockup — stacked so the long name
   fits the nav without crowding the menu ===== */
.main-nav-bar .nav-logo .logo-text,
.nf-logo .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: inherit;
    text-shadow: none;
    letter-spacing: normal;
}
.main-nav-bar .nav-logo .logo-text .lt-top,
.nf-logo .logo-text .lt-top {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--text-secondary, #a0a0a0);
}
.main-nav-bar .nav-logo .logo-text .lt-main,
.nf-logo .logo-text .lt-main {
    font-family: 'Orbitron', var(--font-display, 'Oswald', sans-serif);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transform: skewX(-8deg);
    transform-origin: left bottom;
    background: linear-gradient(120deg, #ffffff 0%, var(--accent, #ea4345) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}