/* ==========================================================================
   Storefront home — design system
   --------------------------------------------------------------------------
   Everything here is namespaced under .hx-* so it can sit next to the
   Tailwind utility layer without collisions. Tokens adapt to the five
   storefront themes (dark / light / white / premium / elite) that the
   layout toggles through body classes.
   ========================================================================== */

:root {
    --hx-font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --hx-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* Rounded — nothing in this design has a sharp corner. */
    --hx-r-xs: 14px;
    --hx-r-sm: 18px;
    --hx-r-md: 24px;
    --hx-r-lg: 32px;
    --hx-r-xl: 40px;
    --hx-r-2xl: 52px;
    --hx-r-3xl: 68px;
    --hx-r-pill: 999px;

    /* Large indents — vertical rhythm scales with the viewport. */
    --hx-section-y: clamp(5rem, 11vw, 11rem);
    --hx-gap: clamp(1.25rem, 2.4vw, 2.25rem);
    --hx-gutter: clamp(1.25rem, 4vw, 3rem);
    --hx-maxw: 1280px;

    --hx-accent: #8b5cf6;
    --hx-accent-2: #6366f1;
    --hx-accent-3: #38bdf8;
    --hx-accent-soft: rgba(139, 92, 246, 0.16);

    --hx-text: #ffffff;
    --hx-text-soft: rgba(255, 255, 255, 0.66);
    --hx-text-mute: rgba(255, 255, 255, 0.42);

    --hx-surface: rgba(255, 255, 255, 0.045);
    --hx-surface-2: rgba(255, 255, 255, 0.07);
    --hx-hairline: rgba(255, 255, 255, 0.1);
    --hx-hairline-strong: rgba(255, 255, 255, 0.2);

    --hx-shadow-sm: 0 2px 10px rgba(2, 4, 12, 0.25);
    --hx-shadow-lg: 0 30px 70px -30px rgba(2, 4, 12, 0.85);
    --hx-glow: 0 24px 70px -20px rgba(139, 92, 246, 0.55);

    --hx-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --hx-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

body.theme-light {
    --hx-text: #0f172a;
    --hx-text-soft: rgba(15, 23, 42, 0.66);
    --hx-text-mute: rgba(15, 23, 42, 0.45);
    --hx-surface: rgba(255, 255, 255, 0.72);
    --hx-surface-2: rgba(255, 255, 255, 0.9);
    --hx-hairline: rgba(99, 102, 241, 0.16);
    --hx-hairline-strong: rgba(99, 102, 241, 0.3);
    --hx-shadow-lg: 0 30px 70px -34px rgba(30, 41, 90, 0.35);
}

body.theme-white {
    --hx-text: #111827;
    --hx-text-soft: rgba(17, 24, 39, 0.66);
    --hx-text-mute: rgba(17, 24, 39, 0.45);
    --hx-surface: #ffffff;
    --hx-surface-2: #f9fafb;
    --hx-hairline: #e5e7eb;
    --hx-hairline-strong: #d1d5db;
    --hx-shadow-lg: 0 24px 60px -32px rgba(17, 24, 39, 0.3);
    --hx-glow: 0 20px 50px -22px rgba(99, 102, 241, 0.4);
}

body.theme-premium {
    --hx-accent: #f59e0b;
    --hx-accent-2: #d97706;
    --hx-accent-3: #fcd34d;
    --hx-accent-soft: rgba(245, 158, 11, 0.16);
    --hx-text: #fef3c7;
    --hx-text-soft: rgba(254, 243, 199, 0.66);
    --hx-text-mute: rgba(254, 243, 199, 0.4);
    --hx-surface: rgba(251, 191, 36, 0.05);
    --hx-hairline: rgba(251, 191, 36, 0.18);
    --hx-hairline-strong: rgba(251, 191, 36, 0.34);
    --hx-glow: 0 24px 70px -20px rgba(245, 158, 11, 0.45);
}

body.theme-elite {
    --hx-accent: #06b6d4;
    --hx-accent-2: #0891b2;
    --hx-accent-3: #67e8f9;
    --hx-accent-soft: rgba(6, 182, 212, 0.14);
    --hx-text: #e2e8f0;
    --hx-text-soft: rgba(226, 232, 240, 0.62);
    --hx-text-mute: rgba(226, 232, 240, 0.38);
    --hx-surface: rgba(6, 182, 212, 0.05);
    --hx-hairline: rgba(6, 182, 212, 0.16);
    --hx-hairline-strong: rgba(6, 182, 212, 0.32);
    --hx-glow: 0 24px 70px -20px rgba(6, 182, 212, 0.4);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.hx {
    font-family: var(--hx-font-body);
    color: var(--hx-text);
    overflow-x: clip;
}

.hx-container {
    width: 100%;
    max-width: var(--hx-maxw);
    margin-inline: auto;
    padding-inline: var(--hx-gutter);
}

.hx-section {
    position: relative;
    padding-block: var(--hx-section-y);
}

.hx-section--tight { padding-block: calc(var(--hx-section-y) * 0.55); }

.hx-head {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.hx-head--center {
    margin-inline: auto;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.hx-display {
    font-family: var(--hx-font-display);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.98;
    font-size: clamp(2.85rem, 7.4vw, 5.75rem);
    margin: 0;
    text-wrap: balance;
}

.hx-h2 {
    font-family: var(--hx-font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.04;
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    margin: 0;
    text-wrap: balance;
}

.hx-h3 {
    font-family: var(--hx-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    margin: 0;
}

.hx-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.65;
    color: var(--hx-text-soft);
    margin: 1.35rem 0 0;
    text-wrap: pretty;
}

.hx-body {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--hx-text-soft);
    margin: 0.65rem 0 0;
}

.hx-kicker {
    font-family: var(--hx-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hx-text-mute);
}

.hx-grad {
    background: linear-gradient(100deg, var(--hx-accent-3), var(--hx-accent), var(--hx-accent-2));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hx-pan 9s linear infinite;
}

.hx-underline {
    position: relative;
    white-space: nowrap;
}

.hx-underline::after {
    content: '';
    position: absolute;
    left: -0.06em;
    right: -0.06em;
    bottom: 0.06em;
    height: 0.34em;
    border-radius: var(--hx-r-pill);
    background: linear-gradient(90deg, var(--hx-accent), var(--hx-accent-3));
    opacity: 0.24;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s var(--hx-ease) 0.35s;
}

.hx-underline.is-in::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Badges, chips and pills
   -------------------------------------------------------------------------- */

.hx-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem 0.55rem 0.8rem;
    border-radius: var(--hx-r-pill);
    background: var(--hx-surface);
    border: 1px solid var(--hx-hairline-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hx-text-soft);
    letter-spacing: -0.01em;
}

.hx-badge__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--hx-r-pill);
    background: var(--hx-accent);
    box-shadow: 0 0 0 0 var(--hx-accent-soft);
    animation: hx-ping 2.2s var(--hx-ease-soft) infinite;
}

.hx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.9rem;
    border-radius: var(--hx-r-pill);
    background: var(--hx-surface);
    border: 1px solid var(--hx-hairline);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hx-text-soft);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.hx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.7rem;
    border-radius: var(--hx-r-pill);
    font-family: var(--hx-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s var(--hx-ease), box-shadow 0.4s var(--hx-ease),
                border-color 0.3s var(--hx-ease-soft), background-color 0.3s var(--hx-ease-soft);
}

.hx-btn:hover { transform: translateY(-3px); }
.hx-btn:active { transform: translateY(-1px) scale(0.99); }

.hx-btn:focus-visible {
    outline: 2px solid var(--hx-accent-3);
    outline-offset: 3px;
}

.hx-btn--lg {
    padding: 1.15rem 2.2rem;
    font-size: 1.02rem;
}

.hx-btn--primary {
    color: #fff;
    background: linear-gradient(120deg, var(--hx-accent-2), var(--hx-accent) 55%, var(--hx-accent-3));
    background-size: 190% auto;
    box-shadow: var(--hx-glow);
}

.hx-btn--primary:hover {
    background-position: right center;
    box-shadow: 0 30px 80px -18px rgba(139, 92, 246, 0.7);
}

/* Light sweep across the primary button on hover. */
.hx-btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.85s var(--hx-ease);
}

.hx-btn--primary:hover::after { transform: translateX(120%); }

.hx-btn--ghost {
    color: var(--hx-text);
    background: var(--hx-surface);
    border-color: var(--hx-hairline-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hx-btn--ghost:hover {
    background: var(--hx-surface-2);
    border-color: var(--hx-accent);
}

.hx-btn__arrow {
    display: inline-block;
    transition: transform 0.4s var(--hx-ease);
}

.hx-btn:hover .hx-btn__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

.hx-card {
    position: relative;
    border-radius: var(--hx-r-lg);
    background: var(--hx-surface);
    border: 1px solid var(--hx-hairline);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--hx-shadow-sm);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.55s var(--hx-ease), box-shadow 0.55s var(--hx-ease),
                border-color 0.4s var(--hx-ease-soft);
}

/* Cursor-tracking spotlight, driven by --hx-mx / --hx-my from home.js. */
.hx-card--spot::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: radial-gradient(320px circle at var(--hx-mx, 50%) var(--hx-my, 0%),
                var(--hx-accent-soft), transparent 62%);
    opacity: 0;
    transition: opacity 0.5s var(--hx-ease-soft);
}

.hx-card--spot:hover::before { opacity: 1; }

.hx-card--lift:hover {
    transform: translateY(-8px);
    border-color: var(--hx-hairline-strong);
    box-shadow: var(--hx-shadow-lg);
}

/* --------------------------------------------------------------------------
   Scroll progress rail
   -------------------------------------------------------------------------- */

.hx-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    background: transparent;
    pointer-events: none;
}

.hx-progress__bar {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--hx-accent-3), var(--hx-accent), var(--hx-accent-2));
    box-shadow: 0 0 18px var(--hx-accent);
}

/* Condensed header once the page has been scrolled (class set by home.js). */
body.hx-scrolled header.fixed {
    box-shadow: 0 12px 40px -22px rgba(2, 4, 12, 0.9);
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hx-hero {
    position: relative;
    padding-block: clamp(4.5rem, 10vw, 9rem) clamp(3.5rem, 7vw, 6rem);
    text-align: center;
    isolation: isolate;
}

.hx-hero__inner {
    position: relative;
    max-width: 60rem;
    margin-inline: auto;
}

.hx-hero__title { margin-top: 1.75rem; }

.hx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2.5rem;
}

.hx-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.7rem 1.4rem;
    margin-top: 2.6rem;
    color: var(--hx-text-mute);
    font-size: 0.86rem;
    font-weight: 500;
}

.hx-hero__meta strong { color: var(--hx-text); font-weight: 700; }

/* Ambient background: drifting colour fields + a faint grid. */
.hx-aurora {
    position: absolute;
    inset: -20% -10% auto;
    height: 130%;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    mask-image: radial-gradient(70% 60% at 50% 30%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 40%, transparent 100%);
}

.hx-orb {
    position: absolute;
    border-radius: var(--hx-r-pill);
    filter: blur(70px);
    opacity: 0.5;
    will-change: transform;
    animation: hx-drift 18s var(--hx-ease-soft) infinite;
}

.hx-orb--1 {
    width: 34rem; height: 34rem;
    top: -6rem; left: -8rem;
    background: radial-gradient(circle, var(--hx-accent), transparent 68%);
}

.hx-orb--2 {
    width: 28rem; height: 28rem;
    top: 2rem; right: -6rem;
    background: radial-gradient(circle, var(--hx-accent-2), transparent 68%);
    animation-delay: -6s;
}

.hx-orb--3 {
    width: 24rem; height: 24rem;
    bottom: 2rem; left: 38%;
    background: radial-gradient(circle, var(--hx-accent-3), transparent 68%);
    animation-delay: -12s;
    opacity: 0.32;
}

/* Saturated colour fields need to be much quieter on a light canvas. */
body.theme-light .hx-orb,
body.theme-white .hx-orb { opacity: 0.2; }

.hx-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--hx-hairline) 1px, transparent 1px),
        linear-gradient(to bottom, var(--hx-hairline) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(58% 48% at 50% 26%, #000, transparent 100%);
    -webkit-mask-image: radial-gradient(58% 48% at 50% 26%, #000, transparent 100%);
    opacity: 0.55;
}

/* Floating emoji medallions that parallax as the page scrolls. */
.hx-float {
    position: absolute;
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    font-size: 1.9rem;
    border-radius: var(--hx-r-md);
    background: var(--hx-surface);
    border: 1px solid var(--hx-hairline-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--hx-shadow-sm);
    animation: hx-bob 7s var(--hx-ease-soft) infinite;
    will-change: transform;
    z-index: -1;
    user-select: none;
}

.hx-float--a { top: 12%; left: 4%; transform: rotate(-12deg); }
.hx-float--b { top: 26%; right: 5%; transform: rotate(10deg); animation-delay: -2.4s; }
.hx-float--c { bottom: 16%; left: 11%; transform: rotate(8deg); animation-delay: -4.1s; }
.hx-float--d { bottom: 24%; right: 12%; transform: rotate(-7deg); animation-delay: -5.6s; }

@media (max-width: 900px) {
    .hx-float { display: none; }
}

/* Oversized hero search */
.hx-search {
    position: relative;
    max-width: 40rem;
    margin: 2.4rem auto 0;
}

.hx-search__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.55rem 0.55rem 1.5rem;
    border-radius: var(--hx-r-pill);
    background: var(--hx-surface);
    border: 1px solid var(--hx-hairline-strong);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--hx-shadow-lg);
    transition: border-color 0.35s var(--hx-ease-soft), box-shadow 0.45s var(--hx-ease);
}

.hx-search__field:focus-within {
    border-color: var(--hx-accent);
    box-shadow: var(--hx-glow);
}

.hx-search__icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1;
    opacity: 0.75;
}

.hx-search__input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    color: var(--hx-text);
    font-family: var(--hx-font-body);
    font-size: 1rem;
    padding-block: 0.75rem;
}

.hx-search__input::placeholder { color: var(--hx-text-mute); }
.hx-search__input::-webkit-search-cancel-button { filter: invert(0.6); }

/* --------------------------------------------------------------------------
   Marquee ticker
   -------------------------------------------------------------------------- */

.hx-marquee {
    position: relative;
    overflow: hidden;
    padding-block: 1.1rem;
    border-block: 1px solid var(--hx-hairline);
    background: var(--hx-surface);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.hx-marquee__track {
    display: flex;
    width: max-content;
    gap: 3rem;
    animation: hx-scroll 38s linear infinite;
    will-change: transform;
}

.hx-marquee:hover .hx-marquee__track { animation-play-state: paused; }

.hx-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--hx-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--hx-text-mute);
    white-space: nowrap;
    transition: color 0.3s var(--hx-ease-soft);
}

.hx-marquee__item:hover { color: var(--hx-text); }
.hx-marquee__item span { font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   Bento feature grid
   -------------------------------------------------------------------------- */

.hx-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--hx-gap);
}

.hx-bento__cell {
    grid-column: span 2;
    padding: clamp(1.6rem, 2.6vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 15rem;
}

.hx-bento__cell--wide { grid-column: span 3; }
.hx-bento__cell--hero { grid-column: span 4; min-height: 19rem; justify-content: flex-end; }

@media (max-width: 1024px) {
    .hx-bento { grid-template-columns: repeat(4, 1fr); }
    .hx-bento__cell,
    .hx-bento__cell--wide { grid-column: span 2; }
    .hx-bento__cell--hero { grid-column: span 4; }
}

@media (max-width: 640px) {
    .hx-bento { grid-template-columns: 1fr; }
    .hx-bento__cell,
    .hx-bento__cell--wide,
    .hx-bento__cell--hero { grid-column: span 1; min-height: 0; }
}

.hx-bento__icon {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 1.1rem;
    font-size: 1.6rem;
    line-height: 1;
    border-radius: var(--hx-r-sm);
    background: var(--hx-accent-soft);
    border: 1px solid var(--hx-hairline);
    transition: transform 0.5s var(--hx-ease);
}

.hx-card:hover .hx-bento__icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }

/* --------------------------------------------------------------------------
   Toolbar (category pills + sort)
   -------------------------------------------------------------------------- */

.hx-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    padding: 0.85rem;
    border-radius: var(--hx-r-xl);
    background: var(--hx-surface);
    border: 1px solid var(--hx-hairline);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--hx-shadow-sm);
}

.hx-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.15rem;
}

.hx-pills::-webkit-scrollbar { display: none; }

.hx-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.15rem;
    border-radius: var(--hx-r-pill);
    font-size: 0.87rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    color: var(--hx-text-soft);
    border: 1px solid var(--hx-hairline);
    background: transparent;
    transition: color 0.3s var(--hx-ease-soft), background 0.3s var(--hx-ease-soft),
                border-color 0.3s var(--hx-ease-soft), transform 0.35s var(--hx-ease);
}

.hx-pill:hover {
    color: var(--hx-text);
    border-color: var(--hx-hairline-strong);
    transform: translateY(-2px);
}

.hx-pill.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(120deg, var(--hx-accent-2), var(--hx-accent));
    box-shadow: 0 12px 30px -14px var(--hx-accent);
}

.hx-sort {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    padding-inline: 0.35rem;
}

.hx-sort__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hx-text-mute);
    white-space: nowrap;
}

.hx-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.6rem 2.3rem 0.6rem 1rem;
    border-radius: var(--hx-r-pill);
    background-color: var(--hx-surface-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.9rem;
    border: 1px solid var(--hx-hairline);
    color: var(--hx-text);
    font-family: var(--hx-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.3s var(--hx-ease-soft);
}

.hx-select:hover { border-color: var(--hx-hairline-strong); }
.hx-select:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.hx-select option { background: #121a30; color: #fff; }
body.theme-light .hx-select option,
body.theme-white .hx-select option { background: #fff; color: #111827; }

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

.hx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: var(--hx-gap);
}

.hx-prod {
    display: flex;
    flex-direction: column;
    border-radius: var(--hx-r-lg);
}

.hx-prod__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: calc(var(--hx-r-lg) - 1px) calc(var(--hx-r-lg) - 1px) 0 0;
    background: var(--hx-surface-2);
}

.hx-prod__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--hx-ease), filter 0.6s var(--hx-ease-soft);
}

.hx-prod:hover .hx-prod__img { transform: scale(1.07); }

/* Generated artwork for products with no uploaded image. Self-contained on
   purpose — no third-party placeholder service to 404, block or track. */
.hx-prod__ph {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: clamp(3rem, 7vw, 4.5rem);
    line-height: 1;
    transition: transform 0.9s var(--hx-ease);
}

.hx-prod__ph::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.5;
}

.hx-prod:hover .hx-prod__ph { transform: scale(1.07); }

.hx-prod__ph--0 { background: linear-gradient(135deg, #4c1d95, #6d28d9 55%, #2563eb); }
.hx-prod__ph--1 { background: linear-gradient(135deg, #0f766e, #0891b2 55%, #1d4ed8); }
.hx-prod__ph--2 { background: linear-gradient(135deg, #9d174d, #c026d3 55%, #6d28d9); }
.hx-prod__ph--3 { background: linear-gradient(135deg, #b45309, #db2777 55%, #7c3aed); }
.hx-prod__ph--4 { background: linear-gradient(135deg, #065f46, #0d9488 55%, #4338ca); }
.hx-prod__ph--5 { background: linear-gradient(135deg, #1e3a8a, #4f46e5 55%, #a21caf); }

.hx-prod__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 8, 16, 0.88) 2%, rgba(5, 8, 16, 0.12) 46%, transparent 78%);
}

.hx-prod__badges {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    right: 0.9rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.hx-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.8rem;
    border-radius: var(--hx-r-pill);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff;
    background: rgba(5, 8, 16, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    white-space: nowrap;
}

.hx-tag--price { background: linear-gradient(120deg, var(--hx-accent-2), var(--hx-accent)); border-color: transparent; }
.hx-tag--danger { background: rgba(220, 38, 38, 0.92); border-color: transparent; }
.hx-tag--warn { background: rgba(217, 119, 6, 0.92); border-color: transparent; }
.hx-tag--rating { color: #fde68a; }

.hx-prod__rating {
    position: absolute;
    left: 0.9rem;
    bottom: 0.9rem;
}

.hx-prod__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.55rem;
    padding: clamp(1.25rem, 2vw, 1.65rem);
}

.hx-prod__title {
    font-family: var(--hx-font-display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0;
}

.hx-prod__title a {
    color: var(--hx-text);
    text-decoration: none;
    transition: color 0.25s var(--hx-ease-soft);
}

.hx-prod__title a:hover { color: var(--hx-accent-3); }

.hx-prod__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--hx-text-mute);
    margin: 0;
}

.hx-prod__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.15rem;
}

.hx-prod__price-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hx-text-mute);
}

.hx-prod__price {
    font-family: var(--hx-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.hx-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hx-gap);
}

@media (max-width: 860px) {
    .hx-steps { grid-template-columns: 1fr; }
}

.hx-step { padding: clamp(1.7rem, 2.6vw, 2.4rem); }

.hx-step__num {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: var(--hx-r-sm);
    font-family: var(--hx-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(140deg, var(--hx-accent-2), var(--hx-accent));
    box-shadow: 0 16px 34px -18px var(--hx-accent);
    margin-bottom: 1.3rem;
}

.hx-step__emoji {
    position: absolute;
    top: 1.4rem;
    right: 1.6rem;
    font-size: 2.2rem;
    opacity: 0.28;
    transition: transform 0.6s var(--hx-ease), opacity 0.5s var(--hx-ease-soft);
}

.hx-step:hover .hx-step__emoji { transform: translateY(-4px) scale(1.12); opacity: 0.65; }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.hx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--hx-gap);
    padding: clamp(1.8rem, 3vw, 3rem);
    border-radius: var(--hx-r-2xl);
}

.hx-stat { text-align: center; }

.hx-stat__value {
    font-family: var(--hx-font-display);
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.hx-stat__label {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--hx-text-mute);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.hx-faq {
    display: grid;
    gap: 0.85rem;
    max-width: 52rem;
    margin-inline: auto;
}

.hx-faq__item {
    border-radius: var(--hx-r-md);
    background: var(--hx-surface);
    border: 1px solid var(--hx-hairline);
    overflow: hidden;
    transition: border-color 0.35s var(--hx-ease-soft), background 0.35s var(--hx-ease-soft);
}

.hx-faq__item[open] { border-color: var(--hx-hairline-strong); background: var(--hx-surface-2); }

.hx-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.6rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--hx-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--hx-text);
}

.hx-faq__q::-webkit-details-marker { display: none; }
.hx-faq__q:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: -2px; }

.hx-faq__sign {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--hx-r-pill);
    background: var(--hx-accent-soft);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform 0.45s var(--hx-ease);
}

.hx-faq__item[open] .hx-faq__sign { transform: rotate(45deg); }

.hx-faq__a {
    padding: 0 1.6rem 1.45rem;
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--hx-text-soft);
    margin: 0;
    animation: hx-fade-down 0.45s var(--hx-ease);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.hx-cta {
    position: relative;
    padding: clamp(2.75rem, 6vw, 5.5rem) clamp(1.6rem, 5vw, 4.5rem);
    border-radius: var(--hx-r-3xl);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 140% at 50% 0%, var(--hx-accent-soft), transparent 62%),
        var(--hx-surface);
    border: 1px solid var(--hx-hairline-strong);
}

.hx-cta::before {
    content: '';
    position: absolute;
    inset: -40% 20% auto;
    height: 60%;
    z-index: -1;
    background: radial-gradient(circle, var(--hx-accent), transparent 65%);
    filter: blur(80px);
    opacity: 0.45;
    animation: hx-drift 16s var(--hx-ease-soft) infinite;
}

.hx-cta__emojis {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    font-size: 1.9rem;
    margin-bottom: 1.25rem;
}

.hx-cta__emojis span { animation: hx-bob 4.5s var(--hx-ease-soft) infinite; }
.hx-cta__emojis span:nth-child(2) { animation-delay: -0.9s; }
.hx-cta__emojis span:nth-child(3) { animation-delay: -1.8s; }
.hx-cta__emojis span:nth-child(4) { animation-delay: -2.7s; }

/* --------------------------------------------------------------------------
   Empty state + pagination
   -------------------------------------------------------------------------- */

.hx-empty {
    text-align: center;
    padding: clamp(3.5rem, 8vw, 7rem) 1.5rem;
    border-radius: var(--hx-r-2xl);
    background: var(--hx-surface);
    border: 1px dashed var(--hx-hairline-strong);
}

.hx-empty__emoji {
    font-size: clamp(3.5rem, 8vw, 5rem);
    line-height: 1;
    animation: hx-bob 5s var(--hx-ease-soft) infinite;
}

.hx-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.hx-pager__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.3rem;
    border-radius: var(--hx-r-pill);
    border: 1px solid var(--hx-hairline);
    background: var(--hx-surface);
    color: var(--hx-text-soft);
    font-size: 0.87rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.35s var(--hx-ease), color 0.3s var(--hx-ease-soft),
                border-color 0.3s var(--hx-ease-soft);
}

.hx-pager__link:hover {
    color: var(--hx-text);
    border-color: var(--hx-hairline-strong);
    transform: translateY(-2px);
}

.hx-pager__status {
    padding: 0.75rem 1.3rem;
    border-radius: var(--hx-r-pill);
    background: var(--hx-accent-soft);
    border: 1px solid var(--hx-hairline-strong);
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--hx-text);
}

/* --------------------------------------------------------------------------
   Scroll-driven entrance animations
   -------------------------------------------------------------------------- */

[data-anim] {
    opacity: 0;
    transition:
        opacity 0.85s var(--hx-ease) var(--hx-delay, 0s),
        transform 0.95s var(--hx-ease) var(--hx-delay, 0s),
        filter 0.85s var(--hx-ease) var(--hx-delay, 0s);
    will-change: opacity, transform;
}

[data-anim='up']    { transform: translateY(38px); }
[data-anim='down']  { transform: translateY(-28px); }
[data-anim='left']  { transform: translateX(46px); }
[data-anim='right'] { transform: translateX(-46px); }
[data-anim='zoom']  { transform: scale(0.93); }
[data-anim='blur']  { filter: blur(14px); transform: translateY(24px); }
[data-anim='tilt']  { transform: perspective(1200px) rotateX(11deg) translateY(46px); transform-origin: top center; }

[data-anim].is-in {
    opacity: 1;
    filter: none;
    transform: none;
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes hx-pan {
    to { background-position: 200% center; }
}

@keyframes hx-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes hx-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(28px, -34px, 0) scale(1.08); }
    66%      { transform: translate3d(-22px, 20px, 0) scale(0.94); }
}

@keyframes hx-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}

@keyframes hx-ping {
    0%   { box-shadow: 0 0 0 0 var(--hx-accent-soft); }
    70%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes hx-fade-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Header controls relocated into the mobile drawer by home.js
   -------------------------------------------------------------------------- */

#mobile-menu-controls > #header-controls {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#mobile-menu-controls .storefront-locale,
#mobile-menu-controls .currency-selector,
#mobile-menu-controls .theme-switcher {
    margin-left: 0;
}

/* --------------------------------------------------------------------------
   Motion and contrast preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hx-orb,
    .hx-float,
    .hx-grad,
    .hx-badge__dot,
    .hx-empty__emoji,
    .hx-cta::before,
    .hx-cta__emojis span,
    .hx-marquee__track {
        animation: none !important;
    }

    [data-anim],
    [data-anim].is-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .hx-btn:hover,
    .hx-card--lift:hover,
    .hx-pill:hover,
    .hx-pager__link:hover { transform: none; }

    .hx-prod:hover .hx-prod__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Performance mode: html[data-fx='lite'] (set by layout.php before first
   paint on low-end devices: software GPU, ≤2 cores, Save-Data or
   reduced-motion preference; force with localStorage shop_fx = lite|full)
   --------------------------------------------------------------------------
   Backdrop-filter (glassmorphism), 70px blurs and infinite ambient
   animations consume the whole frame budget while scrolling on machines
   without hardware acceleration. This profile swaps glass for opaque
   surfaces and freezes decorative motion — layout and readability stay
   identical.
   -------------------------------------------------------------------------- */

html[data-fx='lite'] body {
    --hx-surface: rgba(16, 19, 32, 0.92);
    --hx-surface-2: rgba(24, 28, 46, 0.96);
}

html[data-fx='lite'] body.theme-light,
html[data-fx='lite'] body.theme-white {
    --hx-surface: rgba(255, 255, 255, 0.97);
    --hx-surface-2: #ffffff;
}

html[data-fx='lite'] .hx-badge,
html[data-fx='lite'] .hx-btn--ghost,
html[data-fx='lite'] .hx-card,
html[data-fx='lite'] body.hx-scrolled header.fixed,
html[data-fx='lite'] .hx-orb,
html[data-fx='lite'] .hx-float,
html[data-fx='lite'] .hx-search__field,
html[data-fx='lite'] .hx-marquee__track,
html[data-fx='lite'] .hx-toolbar,
html[data-fx='lite'] .hx-tag,
html[data-fx='lite'] .hx-cta::before,
html[data-fx='lite'] .hx-cta__emojis span,
html[data-fx='lite'] .hx-empty__emoji {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Ambient blobs: blur(70–80px) + will-change + infinite drift is the
   single most expensive pattern on the page — collapse it entirely. */
html[data-fx='lite'] .hx-orb,
html[data-fx='lite'] .hx-float,
html[data-fx='lite'] .hx-cta::before {
    filter: none !important;
    will-change: auto !important;
    animation: none !important;
}

/* Remaining decorative loops (gradient pan, bobbing emojis, marquee). */
html[data-fx='lite'] .hx-grad,
html[data-fx='lite'] .hx-cta__emojis span,
html[data-fx='lite'] .hx-empty__emoji,
html[data-fx='lite'] .hx-marquee__track {
    animation: none !important;
}

/* Entrance reveals render immediately, no IntersectionObserver churn. */
html[data-fx='lite'] [data-anim],
html[data-fx='lite'] [data-anim].is-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

html[data-fx='lite'] .hx-underline::after {
    transform: scaleX(1) !important;
    transition: none !important;
}