/* apex — design tokens (colors, type scale, spacing, easings).
   page-specific styles live in layout.css / home.css / listing.css / etc. */

:root {
    /* surfaces */
    --bg: #08080a;
    --bg-deep: #050507;
    --surface: #0f0f12;
    --surface-2: #16161b;
    --surface-3: #1d1d24;
    --surface-glass: rgba(15, 15, 18, 0.6);

    /* ink (text) */
    --ink: #fafafa;
    --ink-strong: #ffffff;
    --ink-muted: #a1a1aa;
    --ink-soft: #71717a;
    --ink-faint: #3f3f46;

    /* borders */
    --hairline: rgba(255, 255, 255, 0.06);
    --hairline-strong: rgba(255, 255, 255, 0.12);
    --hairline-accent: rgba(139, 92, 246, 0.35);

    /* accent (configurable, default neon purple) */
    --accent: #8b5cf6;
    --accent-bright: #a78bfa;
    --accent-deep: #6d28d9;
    --accent-glow: rgba(139, 92, 246, 0.5);
    --accent-glow-soft: rgba(139, 92, 246, 0.18);
    --accent-bg: rgba(139, 92, 246, 0.08);

    /* status colors */
    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, 0.15);
    --danger: #ef4444;
    --warning: #f59e0b;

    /* typography */
    --font-display: 'Geist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* rhythm */
    --gap-2xs: 4px;
    --gap-xs: 8px;
    --gap-sm: 16px;
    --gap-md: 24px;
    --gap-lg: 48px;
    --gap-xl: 80px;
    --gap-2xl: 120px;

    /* containers */
    --max-w: 1280px;
    --max-w-narrow: 880px;
    --max-w-prose: 640px;

    /* misc */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-premium: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* reset */

* { box-sizing: border-box; }

*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--bg-deep);
}

/* 
   Global 1080p scaling: shrink everything on 1920×1080 and
   smaller displays so the layout matches the 2K experience.
   Affects ALL pages (index, category, package, layout).
   Above 1920px width: no scaling, full 100%.
    */

@media (min-width: 1200px) and (max-width: 1920px) {
  :root {
        --gap-2xs: 3px;
        --gap-xs: 6px;
        --gap-sm: 12px;
        --gap-md: 18px;
        --gap-lg: 32px;
        --gap-xl: 52px;
        --gap-2xl: 80px;
        --max-w: 1200px;
    }

  html {
        font-size: 14px;
    }

/* hero */

  .ax-hero-title {
        font-size: clamp(52px, 5vw, 88px) !important;
        line-height: 1 !important;
    }

/* Force "empire." (accent em) to wrap onto its own line like the 2K design */

  .ax-hero-title em {
        display: block !important;
    }

  .ax-hero-subtitle {
        font-size: 13px !important;
        max-width: 440px !important;
    }

  .ax-hero-trust {
        font-size: 10px !important;
        padding: 6px 16px !important;
    }

  .ax-hero {
        min-height: 88vh !important;
        padding: 110px 0 50px !important;
        display: flex !important;
        align-items: center !important;
    }

/* Narrow hero content so title wraps + everything stays centered tight */

  .ax-hero[data-layout="centered"] .ax-hero-content {
        max-width: 720px !important;
    }

/* Hero CTAs */

  .ax-hero .ax-btn,
  .ax-hero .ax-discord-btn {
        padding: 12px 22px !important;
        font-size: 13px !important;
    }

/* Hero side characters — bigger so they hug the screen edge like 2K */

  .ax-hero[data-layout="centered"] .ax-hero-side-images img {
        width: clamp(360px, 30vw, 620px) !important;
    }

  .ax-hero[data-layout="centered"] .ax-hero-side-images .ax-side-left {
        margin-right: clamp(220px, 18vw, 380px) !important;
    }

  .ax-hero[data-layout="centered"] .ax-hero-side-images .ax-side-right {
        margin-left: clamp(220px, 18vw, 380px) !important;
    }

/* section heads (only the big section titles) */

  .ax-section-title {
        font-size: clamp(28px, 3.2vw, 48px) !important;
    }

  .ax-section-kicker { font-size: 10px !important; }

  .ax-section-head { margin-bottom: 36px !important; }

  .ax-section { padding: 56px 0 !important; }

/* v3 stats (bento) */

  .ax-stats-v3 { padding: 28px 0 18px !important; }

  .v3-inner { max-width: 900px !important; }

  .v3-right { max-width: 560px !important; border-radius: 16px !important; }

  .v3-title { font-size: clamp(20px, 2.2vw, 28px) !important; }

  .v3-desc { font-size: 11px !important; max-width: 240px !important; }

  .v3-stat { padding: 14px 8px !important; }

  .v3-stat .v3-stat-main { gap: 8px !important; }

  .v3-stat-num { font-size: clamp(16px, 1.8vw, 22px) !important; }

  .v3-stat.big .v3-stat-num { font-size: clamp(20px, 2.2vw, 30px) !important; }

  .v3-stat-label { font-size: 8px !important; margin-top: 4px !important; letter-spacing: 0.1em !important; }

  .v3-trend { font-size: 8px !important; padding: 1px 5px !important; }

  .v3-trend svg { width: 8px !important; height: 8px !important; }

  .v3-badge { font-size: 9px !important; padding: 4px 10px !important; margin-bottom: 14px !important; }

/* reviews — "4.9" big number */

  .ax-rev-big-num {
        font-size: clamp(64px, 7vw, 96px) !important;
        letter-spacing: -3px !important;
    }

  .ax-reviews-stat-row {
        gap: 40px !important;
        max-width: 760px !important;
        margin-bottom: 40px !important;
    }

  .ax-rev-stat-stars svg { width: 18px !important; height: 18px !important; }

  .ax-rev-stat-count { font-size: 12px !important; }

  .ax-rev-stat-right { min-width: 200px !important; }

  .ax-rev-progress-item { font-size: 11px !important; }

/* Review CARDS (individual testimonial cards) */

  .ax-review-card { padding: 24px !important; }

  .ax-review-text { font-size: 14px !important; line-height: 1.6 !important; }

  .ax-review-name { font-size: 14px !important; }

  .ax-review-role { font-size: 10px !important; }

  .ax-review-avatar { width: 40px !important; height: 40px !important; }

  .ax-review-stars svg { width: 14px !important; height: 14px !important; }

  .ax-review-verified { font-size: 9px !important; padding: 2px 7px !important; }

/* faq items (not the section title — those handled above) */

  .ax-faq { padding: 52px 0 80px !important; }

  .ax-faq-list { max-width: 720px !important; }

  .ax-faq-head { padding: 18px 22px !important; gap: 16px !important; }

  .ax-faq-num { font-size: 12px !important; min-width: 24px !important; }

  .ax-faq-title { font-size: 15px !important; line-height: 1.4 !important; }

  .ax-faq-icon { width: 16px !important; height: 16px !important; }

  .ax-faq-content { padding: 0 22px 20px 62px !important; font-size: 13px !important; }

/* recent purchases (toasts marquee) */

  .ax-recent-payments { padding: 40px 0 !important; }

/* Force same container width on both index (ax-wrap) and category (ax-wrap-wide)
       so toasts look identical across pages */

  .ax-recent-payments .ax-wrap,
  .ax-recent-payments .ax-wrap-wide { max-width: 1200px !important; }

  .ax-payments-marquee { margin-top: 28px !important; }

  .ax-payment-card {
        padding: 10px 16px !important;
        min-width: 240px !important;
        border-radius: 12px !important;
        gap: 12px !important;
    }

  .ax-pay-avatar { width: 34px !important; height: 34px !important; font-size: 13px !important; }

  .ax-pay-user { font-size: 12px !important; }

  .ax-pay-item { font-size: 10px !important; }

  .ax-pay-price { font-size: 12px !important; }

  .ax-pay-time { font-size: 8px !important; }

/* feature cards (lightning fast / always updated / highly configurable) */

/* Note: original sizes are already small (15/12/44) — this scales them DOWN further at 1080p */

  .ax-premium-features { gap: 20px !important; }

  .ax-feature-card { padding: 0 !important; gap: 10px !important; }

  .ax-feature-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

  .ax-feature-icon svg { width: 18px !important; height: 18px !important; }

  .ax-feature-title { font-size: 13px !important; margin-bottom: 4px !important; }

  .ax-feature-desc { font-size: 11px !important; line-height: 1.5 !important; max-width: 220px !important; }

/* navbar — compact at 1080p (was way too wide due to 200px gap inside pill) */

  .ax-navbar {
        top: 16px !important;
        padding: 0 24px !important;
    }

/* Drop the 200px gap inside the pill → much tighter pill */

  .ax-nav-inner {
        gap: 80px !important;
        padding: 8px 24px !important;
    }

  .ax-logo { font-size: 13px !important; gap: 10px !important; }

  .ax-logo img { height: 24px !important; }

  .ax-nav-links { gap: 4px !important; }

  .ax-nav-link {
        font-size: 10px !important;
        padding: 6px 11px !important;
        letter-spacing: 0.1em !important;
    }

/* Cart pill */

  .ax-cart {
        padding: 7px 14px !important;
        font-size: 10px !important;
        margin-left: 14px !important;
        gap: 6px !important;
    }

  .ax-cart-icon { width: 12px !important; height: 12px !important; }

  .ax-cart-count { min-width: 16px !important; height: 16px !important; font-size: 9px !important; padding: 0 4px !important; }

/* Right side actions */

  .ax-nav-actions { gap: 12px !important; }

  .ax-nav-group { gap: 4px !important; }

  .ax-nav-icon-btn { width: 32px !important; height: 32px !important; }

  .ax-nav-icon-btn svg { width: 16px !important; height: 16px !important; }

  .ax-currency-trigger { height: 32px !important; font-size: 11px !important; padding: 0 8px !important; }

  .ax-nav-divider { height: 20px !important; }

  .ax-user-minimal { font-size: 11px !important; gap: 6px !important; }

/* Login button (rightmost) */

  .ax-nav-login-btn { font-size: 11px !important; padding: 7px 14px !important; }

  .ax-nav-login-btn img,
  .ax-nav-login-btn svg { width: 16px !important; height: 16px !important; }

/* navbar dropdowns (search / currency / favorites) */

/* Search dropdown */

  .ax-search-dropdown { width: 260px !important; padding: 12px !important; border-radius: 16px !important; }

  .ax-search-input { padding: 10px 14px 10px 36px !important; font-size: 12px !important; border-radius: 10px !important; }

  .ax-search-icon { left: 13px !important; top: 11px !important; }

  .ax-search-icon svg { width: 14px !important; height: 14px !important; }

  .ax-search-inner { padding-bottom: 12px !important; margin-bottom: 10px !important; }

  .ax-search-results { max-height: 280px !important; gap: 6px !important; }

  .ax-search-item { padding: 6px !important; gap: 10px !important; border-radius: 10px !important; }

  .ax-search-img { width: 36px !important; height: 36px !important; }

  .ax-search-name { font-size: 12px !important; }

  .ax-search-price { font-size: 11px !important; }

  .ax-search-empty { font-size: 12px !important; padding: 18px 0 !important; }

/* Currency (USD/EUR/GBP/CAD/AUD) dropdown */

  .ax-currency-dropdown { width: 120px !important; padding: 8px !important; border-radius: 14px !important; }

  .ax-currency-item { padding: 7px 10px !important; font-size: 10px !important; border-radius: 6px !important; }

/* Wishlist / Favorites dropdown */

  .ax-wish-dropdown { width: 280px !important; padding: 16px !important; border-radius: 18px !important; }

  .ax-wish-head { margin-bottom: 12px !important; padding-bottom: 10px !important; }

  .ax-wish-head span { font-size: 12px !important; }

  .ax-wish-clear { font-size: 10px !important; }

  .ax-wish-list { max-height: 260px !important; gap: 8px !important; }

  .ax-wish-item { padding: 8px !important; gap: 10px !important; border-radius: 12px !important; }

  .ax-wish-img { width: 40px !important; height: 40px !important; border-radius: 8px !important; }

  .ax-wish-name { font-size: 12px !important; }

  .ax-wish-price { font-size: 11px !important; }

  .ax-wish-empty { font-size: 12px !important; padding: 24px 0 !important; }

/* product cards — inner styling (applies to both marquee + category grid) */

  .ax-product-img { border-radius: 14px !important; }

  .ax-product-body { padding: 14px 16px 16px !important; }

  .ax-product-name { font-size: 15px !important; line-height: 1.3 !important; }

  .ax-product-desc { font-size: 12px !important; line-height: 1.5 !important; }

  .ax-product-price { font-size: 26px !important; }

  .ax-product-price-old { font-size: 13px !important; }

  .ax-product-discount { font-size: 11px !important; padding: 5px 12px !important; }

  .ax-cart-btn { padding: 10px 18px !important; font-size: 12px !important; }

  .ax-product-sale { font-size: 9px !important; padding: 5px 10px !important; }

  .ax-product-tags .ax-tag,
  .ax-product .ax-tag { font-size: 9px !important; padding: 4px 8px !important; }

  .ax-wish-btn { width: 22px !important; height: 22px !important; top: 14px !important; right: 16px !important; }

  .ax-wish-btn svg { width: 16px !important; height: 16px !important; }

/* homepage marquee — fixed card width (scoped so category grid is not affected) */

/* Marquee cards use `flex: 0 0 540px` so we MUST override both width + flex-basis */

  .ax-products-marquee .ax-product {
        width: 380px !important;
        flex: 0 0 380px !important;
    }

/* Constrain marquee so only 3 cards visible (3×380 + 2×24gap = 1188 + small fades) */

  .ax-products-marquee {
        max-width: 1280px !important;
    }

  .ax-products-marquee::before,
  .ax-products-marquee::after {
        width: 100px !important;
    }

  .ax-products-marquee .ax-products { gap: 24px !important; }

/* category page (explore the products) */

  .ax-cat-hero { padding: 40px 0 16px !important; }

  .ax-cat-hero-inner { max-width: 600px !important; }

  .ax-cat-title { font-size: clamp(28px, 3vw, 44px) !important; }

  .ax-cat-sub { font-size: 13px !important; margin-bottom: 28px !important; max-width: 440px !important; }

/* Tighten sidebar + content gap for 1080p, cap whole layout width */

  .ax-cat-layout {
        grid-template-columns: 280px 1fr !important;
        gap: 40px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }

  .ax-cat-sidebar { top: 88px !important; gap: 32px !important; }

  .ax-sb-module { gap: 14px !important; }

  .ax-sb-title { font-size: 9px !important; gap: 12px !important; }

  .ax-sb-search-input { padding: 11px 14px 11px 40px !important; font-size: 13px !important; border-radius: 12px !important; }

  .ax-sb-search-icon { left: 14px !important; width: 14px !important; height: 14px !important; }

  .ax-sb-item { font-size: 13px !important; padding: 8px 0 8px 18px !important; }

  .ax-sb-count { font-size: 9px !important; padding: 2px 8px !important; }

/* Category grid: 3 columns CAPPED at 380px each so cards stay compact like marquee */

  .ax-cat-content .ax-products {
        grid-template-columns: repeat(3, minmax(0, 380px)) !important;
        gap: 20px !important;
        justify-content: start !important;
    }

  .ax-cat-content .ax-product { max-width: 380px !important; }

/* basket sidebar (shopping cart slide-out panel) */

  .basket-sidebar-custom { width: 360px !important; }

  .basket-sidebar-header { padding: 16px 20px !important; }

  .basket-sidebar-header .header-left { gap: 10px !important; }

  .basket-sidebar-header .header-icon { width: 34px !important; height: 34px !important; border-radius: 10px !important; }

  .basket-sidebar-header .header-icon svg,
  .basket-sidebar-header .header-icon i { width: 16px !important; height: 16px !important; }

  .basket-sidebar-header .header-text h3 { font-size: 13px !important; }

  .basket-sidebar-header .item-count { font-size: 10px !important; }

  .basket-sidebar-close { width: 30px !important; height: 30px !important; border-radius: 8px !important; }

  .basket-sidebar-close svg,
  .basket-sidebar-close i { width: 14px !important; height: 14px !important; }

  .basket-sidebar-content { padding: 16px 20px !important; }

/* Empty state */

  .basket-empty-state { padding: 40px 20px 24px !important; }

  .basket-empty-state .empty-icon-wrap {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 18px !important;
    }

  .basket-empty-state .empty-icon-wrap svg { width: 26px !important; height: 26px !important; }

  .basket-empty-state h3 { font-size: 15px !important; margin-bottom: 6px !important; }

  .basket-empty-state > p { font-size: 12px !important; margin-bottom: 20px !important; max-width: 220px !important; }

  .basket-empty-state .browse-btn {
        padding: 11px 18px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
    }

  .basket-empty-state .browse-btn::after { font-size: 14px !important; }

/* promo code popup (floating bottom-left pill + card) */

/* Collapsed pill */

  .ax-promo-pill {
        padding: 9px 16px 9px 11px !important;
        font-size: 11px !important;
        gap: 8px !important;
    }

  .ax-promo-pill-icon { width: 22px !important; height: 22px !important; }

  .ax-promo-pill-icon svg { width: 12px !important; height: 12px !important; }

/* Expanded card */

  .ax-promo-card {
        width: 400px !important;
        padding: 18px 20px !important;
        border-radius: 18px !important;
    }

  .ax-promo-card-orb { width: 160px !important; height: 160px !important; }

  .ax-promo-close { top: 10px !important; right: 10px !important; width: 26px !important; height: 26px !important; }

  .ax-promo-close svg { width: 12px !important; height: 12px !important; }

  .ax-promo-grid { gap: 16px !important; }

  .ax-promo-kicker { font-size: 9px !important; margin-bottom: 8px !important; }

  .ax-promo-title { font-size: 16px !important; margin-bottom: 6px !important; padding-right: 22px !important; }

  .ax-promo-text { font-size: 11px !important; line-height: 1.5 !important; }

  .ax-promo-side-label { font-size: 9px !important; }

  .ax-promo-code { padding: 12px 12px 12px 14px !important; border-radius: 12px !important; gap: 10px !important; }

  .ax-promo-code-text { font-size: 17px !important; }

  .ax-promo-code-cta { width: 28px !important; height: 28px !important; border-radius: 8px !important; }

  .ax-promo-code-icon-copy svg,
  .ax-promo-code-icon-check svg { width: 14px !important; height: 14px !important; }

  .ax-promo-sub { font-size: 9px !important; }

/* username / login popup (username.html) */

  .login-popup-custom {
        width: 380px !important;
        padding: 40px 28px !important;
        border-radius: 18px !important;
    }

  .login-header-logos { margin-bottom: 24px !important; padding-top: 4px !important; }

  .login-logo-img { height: 32px !important; }

  .login-x-icon { font-size: 14px !important; margin: 0 18px !important; }

  .cfx-logo-container { gap: 6px !important; }

  .login-title { font-size: 18px !important; letter-spacing: 1.4px !important; margin-bottom: 10px !important; }

  .login-subtitle { font-size: 12px !important; margin-bottom: 28px !important; }

  .login-btn-cfx {
        padding: 13px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        margin-bottom: 20px !important;
    }

  .login-footer { font-size: 11px !important; margin-top: 16px !important; padding-top: 20px !important; }

  .login-footer a { font-size: 10px !important; }

  .popup-close-custom { top: 16px !important; right: 16px !important; width: 32px !important; height: 32px !important; }

/* tiered / subscription plans (tiered.html + tiered1.html) */

  .ax-tiered-page { padding: 60px 0 80px !important; }

  .ax-tiered-page::before { width: 700px !important; height: 420px !important; opacity: 0.2 !important; }

  .sec-hdr { margin-bottom: 36px !important; }

  .sec-eye { font-size: 9px !important; padding: 5px 12px !important; margin-bottom: 14px !important; }

  .sec-title { font-size: clamp(28px, 3.5vw, 48px) !important; }

  .sec-sub { font-size: 13px !important; }

/* Big product image showcase */

  .prod-img-wrap { max-width: 900px !important; margin-bottom: 48px !important; }

  .prod-img-box { border-radius: 18px !important; }

  .prod-img-badge { font-size: 9px !important; padding: 4px 12px !important; top: 16px !important; left: 16px !important; }

  .prod-img-name { bottom: 20px !important; left: 22px !important; }

  .prod-img-title { font-size: 28px !important; }

  .prod-img-cat { font-size: 12px !important; }

/* Pricing cards grid */

  .d5-grid { max-width: 900px !important; gap: 22px !important; }

  .d5-card { padding: 28px 22px !important; border-radius: 18px !important; }

  .plan-name { font-size: 10px !important; margin-bottom: 10px !important; }

  .d5-price-row { margin-bottom: 10px !important; }

  .plan-price { font-size: 36px !important; }

  .plan-period { font-size: 12px !important; }

  .plan-desc { font-size: 12px !important; margin-bottom: 22px !important; height: 38px !important; }

  .d5-feats { gap: 10px !important; margin-bottom: 24px !important; padding-top: 16px !important; }

  .feat { font-size: 12px !important; gap: 8px !important; }

  .feat svg { width: 12px !important; height: 12px !important; }

  .pop-badge { font-size: 9px !important; padding: 4px 10px !important; top: 16px !important; right: 16px !important; }

  .sub-btn { height: 44px !important; font-size: 12px !important; border-radius: 10px !important; }

/* package page — unified background (kill the seam between hero+desc and reviews) */

/* Both .ax-pkg-main and .ax-pkg-main-sections must share the SAME flat background
       so there's no visible band when transitioning */

  .ax-pkg-main,
  .ax-pkg-main-sections { background: var(--bg-deep) !important; }

/* Soften the gradient overlay so it fades smoothly into the same final color */

  .ax-pkg-bg-overlay {
        background: linear-gradient(180deg,
            rgba(8,8,10,0.2) 0%,
            var(--bg-deep) 70%,
            var(--bg-deep) 100%
        ) !important;
    }

/* Reduce orb intensity at 1080p so it doesn't create visible glow bands */

  .ax-pkg-orb { opacity: 0.25 !important; width: 600px !important; height: 600px !important; }

  .ax-pkg-main-sections::before { opacity: 0.06 !important; width: 600px !important; height: 600px !important; }

  .ax-pkg-main-sections::after { opacity: 0.03 !important; }

/* package page (package2.html) — product detail */

  .pkg-page { padding: 80px 0 60px !important; }

  .pkg-wrap { max-width: 1200px !important; padding: 0 24px !important; }

  .pkg-breadcrumb { font-size: 12px !important; margin-bottom: 20px !important; }

  .pkg-grid { gap: 32px !important; grid-template-columns: 1.4fr 1fr !important; }

  .gallery-col { top: 90px !important; }

  .media-box { border-radius: 16px !important; max-height: 60vh !important; margin-bottom: 14px !important; }

  .media-badge { font-size: 9px !important; padding: 3px 8px !important; top: 10px !important; left: 10px !important; }

  .thumb-row { gap: 10px !important; padding-bottom: 12px !important; }

  .thumb { flex: 0 0 160px !important; width: 160px !important; height: 90px !important; border-radius: 10px !important; }

  .thumb-video { flex: 0 0 140px !important; width: 140px !important; height: 79px !important; }

/* Info card (right column) */

  .v1-info-card { padding: 22px !important; border-radius: 18px !important; gap: 16px !important; }

  .v1-title { font-size: 24px !important; line-height: 1.15 !important; }

  .v1-cat { font-size: 11px !important; }

  .tag { font-size: 10px !important; padding: 4px 10px !important; }

  .tag img { width: 12px !important; height: 12px !important; }

  .price-main { font-size: 30px !important; }

  .price-old { font-size: 15px !important; }

  .price-badge { font-size: 11px !important; padding: 4px 10px !important; }

  .btn-get { height: 50px !important; font-size: 14px !important; border-radius: 16px !important; }

/* Quantity + discount + gift sections */

  .pkg-qty-label { font-size: 10px !important; }

  .qty-btn { width: 32px !important; height: 32px !important; }

  .qty-val { font-size: 14px !important; }

/* Accordion items */

  .acc-hdr { padding: 14px 18px !important; font-size: 12px !important; }

  .acc-hdr-left svg { width: 14px !important; height: 14px !important; }

  .acc-icon { font-size: 16px !important; }

  .acc-body { padding: 0 18px 18px !important; font-size: 13px !important; line-height: 1.6 !important; }

/* Description sidebar — keep original layout (vertical DESCRIPTION label visible) */

  .pkg-desc-v2-side {
        margin-top: 40px !important;
        padding-top: 40px !important;
        gap: 60px !important;
    }

  .pkg-desc-v2-side .pkg-desc-v2-sidebar { flex: 0 0 60px !important; }

  .pkg-desc-v2-side .v2-ver-title { font-size: 44px !important; top: 32px !important; }

  .pkg-desc-v2-side .v2-tag { font-size: 9px !important; }

  .pkg-desc-v2-side .pkg-desc-v2-content { font-size: 14px !important; line-height: 1.75 !important; }

  .pkg-desc-v2-side .pkg-desc-v2-content h1,
  .pkg-desc-v2-side .pkg-desc-v2-content h2 {
        font-size: 20px !important;
        margin: 24px 0 12px !important;
    }

/* Contact Discord Support button */

  .btn-discord { height: 46px !important; font-size: 13px !important; border-radius: 12px !important; }

  .btn-discord svg { width: 18px !important; height: 18px !important; }

/* Quantity selector */

  .pkg-qty-direct { margin-bottom: 18px !important; }

  .qty-val { font-size: 16px !important; min-width: 32px !important; }

/* Gift card v3 + Discount accordion */

  .pkg-gift-card-v3 { margin-top: 10px !important; border-radius: 16px !important; }

  .gift-v3-header { height: 52px !important; padding: 8px 14px !important; }

  .gift-v3-icon { width: 36px !important; height: 36px !important; }

  .gift-v3-icon svg { width: 18px !important; height: 18px !important; }

  .gift-sub { font-size: 11px !important; }

  .disc-wrap { border-radius: 16px !important; margin-top: 10px !important; }

  .disc-header { padding: 8px 14px !important; height: 52px !important; }

  .disc-input { padding: 11px 14px !important; font-size: 13px !important; }

  .trust-row { gap: 8px !important; margin-top: 8px !important; }

/* package page — section heads / titles */

  .ax-pkg-section-title { font-size: clamp(28px, 3.2vw, 48px) !important; }

  .ax-pkg-section-kicker { font-size: 10px !important; }

  .ax-pkg-section-head { margin-bottom: 36px !important; }

/* Force ONLY Recent Purchases + FAQ wraps to match index (1200px).
       Reviews stays wide (matches category page look). */

  .ax-pkg-recent-payments .ax-pkg-wrap-wide,
  .ax-pkg-faq .ax-pkg-wrap-wide { max-width: 1200px !important; }

/* Reviews: keep wide spread like category page */

  .ax-pkg-reviews .ax-pkg-wrap-wide { max-width: 1600px !important; }

  .ax-pkg-reviews-grid { gap: 28px !important; }

/* package page — reviews (ax-pkg-* mirror of index ax-* rules) */

  .ax-pkg-reviews { padding: 56px 0 !important; }

  .ax-pkg-rev-big-num {
        font-size: clamp(64px, 7vw, 96px) !important;
        letter-spacing: -3px !important;
    }

  .ax-pkg-reviews-stat-row { gap: 40px !important; max-width: 760px !important; margin-bottom: 40px !important; }

  .ax-pkg-rev-stat-stars svg { width: 18px !important; height: 18px !important; }

  .ax-pkg-rev-stat-count { font-size: 12px !important; }

  .ax-pkg-rev-stat-right { min-width: 200px !important; }

  .ax-pkg-rev-progress-item { font-size: 11px !important; }

  .ax-pkg-review-card { padding: 24px !important; }

  .ax-pkg-review-text { font-size: 14px !important; line-height: 1.6 !important; }

  .ax-pkg-review-name { font-size: 14px !important; }

  .ax-pkg-review-role { font-size: 10px !important; }

  .ax-pkg-review-avatar { width: 40px !important; height: 40px !important; }

  .ax-pkg-review-stars svg { width: 14px !important; height: 14px !important; }

  .ax-pkg-review-verified { font-size: 9px !important; padding: 2px 7px !important; }

/* package page — recent purchases */

  .ax-pkg-recent-payments { padding: 40px 0 !important; }

  .ax-pkg-payments-marquee { margin-top: 28px !important; }

  .ax-pkg-payment-card {
        padding: 10px 16px !important;
        min-width: 240px !important;
        border-radius: 12px !important;
        gap: 12px !important;
    }

  .ax-pkg-pay-avatar { width: 34px !important; height: 34px !important; font-size: 13px !important; }

  .ax-pkg-pay-user { font-size: 12px !important; }

  .ax-pkg-pay-item { font-size: 10px !important; }

  .ax-pkg-pay-price { font-size: 12px !important; }

  .ax-pkg-pay-time { font-size: 8px !important; }

/* package page — faq */

  .ax-pkg-faq { padding: 52px 0 80px !important; }

  .ax-pkg-faq-list { max-width: 720px !important; }

  .ax-pkg-faq-head { padding: 18px 22px !important; gap: 16px !important; }

  .ax-pkg-faq-num { font-size: 12px !important; min-width: 24px !important; }

  .ax-pkg-faq-title { font-size: 15px !important; line-height: 1.4 !important; }

  .ax-pkg-faq-icon { width: 16px !important; height: 16px !important; }

  .ax-pkg-faq-content { padding: 0 22px 20px 62px !important; font-size: 13px !important; }

/* video showcase ("see it in action") */

  .ax-vs { padding: 64px 0 !important; }

  .ax-vs .ax-wrap-wide { max-width: 1200px !important; }

  .ax-vs-grid { gap: 40px !important; grid-template-columns: 1.25fr 1fr !important; }

  .ax-vs-glow { width: 600px !important; height: 360px !important; opacity: 0.2 !important; }

  .ax-vs-media { border-radius: 18px !important; }

  .ax-vs-play { width: 64px !important; height: 64px !important; }

  .ax-vs-play svg { width: 26px !important; height: 26px !important; margin-left: 3px !important; }

  .ax-vs-corner { width: 24px !important; height: 24px !important; }

  .ax-vs-corner-tl { top: 10px !important; left: 10px !important; }

  .ax-vs-corner-br { bottom: 10px !important; right: 10px !important; }

  .ax-vs-content { gap: 16px !important; }

  .ax-vs-kicker { font-size: 9px !important; }

  .ax-vs-title { font-size: clamp(28px, 2.8vw, 42px) !important; }

  .ax-vs-text { font-size: 13px !important; line-height: 1.55 !important; max-width: 440px !important; }

  .ax-vs-stat { padding: 6px 12px !important; font-size: 10px !important; }

  .ax-vs-stat svg { width: 12px !important; height: 12px !important; }

  .ax-vs-btn-primary { padding: 12px 22px !important; font-size: 11px !important; }

  .ax-vs-btn-primary svg { width: 14px !important; height: 14px !important; }

  .ax-vs-btn-secondary { padding: 12px 18px !important; font-size: 10px !important; }

  .ax-vs-btn-secondary svg { width: 12px !important; height: 12px !important; }
}

body {
    margin: 0;
    background: var(--bg-deep);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

img,
svg { max-width: 100%; display: block; }

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
}

/* background grid (subtle) */

.ax-grid-bg {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: -1;
}

.ax-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 10%, var(--bg) 90%);
    z-index: 1;
}

.ax-grid-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% -10%, var(--accent-glow-soft) 0%, transparent 50%);
    z-index: 2;
    opacity: 0.5;
}

/* typography */

/* containers */

.ax-wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gap-md);
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
  .ax-wrap { padding: 0 40px; }
}

.ax-section {
    padding: var(--gap-xl) 0;
    position: relative;
}

@media (max-width: 768px) {
  .ax-section { padding: var(--gap-lg) 0; }
}

/* buttons */

.ax-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    background: #ffffff;
    color: #000000;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.4s var(--ease-premium);
    line-height: 1;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.15);
}

.ax-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-premium);
}

.ax-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 40px rgba(255, 255, 255, 0.25);
    background: #ffffff;
}

.ax-btn:hover::before {
    transform: translateX(100%);
}

.ax-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Pulse dot for online indicators */

@keyframes axPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.6); opacity: 0; }
}

/* pills / trust badges */

/* tags / badges (product cards) */

.ax-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

.ax-tag img {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    object-fit: contain;
}

.ax-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* reveal animation */

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* glow utility */

/* selection */

::selection {
    background: var(--accent);
    color: #fff;
}

/* scrollbar */

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track { background: var(--bg); }

::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 5px; }

::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* wishlist heart button (task 32: minimalist style) */

.ax-wish-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 20;
    width: 24px; /* Reduced since no box */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.3s var(--ease-premium);
    padding: 0;
}

.ax-wish-btn:hover {
    transform: scale(1.2);
    color: var(--accent-bright);
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.ax-wish-btn svg {
    width: 20px; /* Bigger since no box */
    height: 20px;
    stroke: currentColor;
    fill: transparent;
    transition: all 0.3s;
}

@keyframes axHeartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Ensure product body is relative for the absolute wish button */

.ax-product-body {
    position: relative;
    padding: 18px 20px 20px;
}