/* ---
   C8RE | COMPLETE STORE STYLESHEET V5
   Inspired by Apple, built for performance.
   --- */

/* 1. ROOT VARIABLES & GLOBAL RESET
------------------------------------------- */
:root {
    --font-primary: 'Space Grotesk', 'Helvetica Neue', sans-serif;

    /* Color Palette */
    --color-background: #050505;
    --color-surface: #121212;
    --color-text: #EAEAEA;
    --color-text-muted: #888888;
    --color-accent-primary: #EE00FF; /* Magenta */
    --color-accent-secondary: #5F00FF; /* Purple */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.2);

    /* Sizing & Spacing */
    --border-radius-large: 24px;
    --border-radius-medium: 16px;
    --border-radius-small: 12px;
    --content-width: 1200px;
    --header-height: 88px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Modern CSS Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-text);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* 2. ANIMATED BACKGROUND
------------------------------------------- */
/* ---
   2. DYNAMIC MULTI-BLOB BACKGROUND
   --- */

/* This container holds the blobs and keeps them in the background */
.blob-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevents blobs from causing scrollbars */
  z-index: -1;
  pointer-events: none; /* Allows clicks to go through to the content */
}

/* Base styles for all blobs */
.gradient-blob {
  position: absolute;
  opacity: 0.1; /* Slightly more visible */
  filter: blur(150px);
  will-change: transform, border-radius; /* Performance optimization */
}

/* --- Individual Blob Styles & Animations --- */

/* BLOB 1 (Large, Pink/Purple, Slow Wander) */
.blob-1 {
  width: 800px;
  height: 800px;
  top: -150px;
  left: -150px;
  background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-secondary));
  animation: move-blob-1 35s ease-in-out alternate infinite;
}

/* BLOB 2 (Medium, Purple, Counter-flow) */
.blob-2 {
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  background: linear-gradient(45deg, var(--color-accent-secondary), #3d00ff);
  animation: move-blob-2 45s ease-in-out alternate-reverse infinite;
}

/* BLOB 3 (Small, Pink Accent, Fast & Erratic) */
.blob-3 {
  width: 500px;
  height: 500px;
  bottom: -100px;
  right: -100px;
  background: linear-gradient(90deg, #ff00c1, var(--color-accent-primary));
  animation: move-blob-3 28s ease-in-out alternate infinite;
}


/* --- Keyframe Animations for Wandering & Morphing --- */

@keyframes move-blob-1 {
  0% {
    transform: translate(0, 0) scale(1);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  50% {
    transform: translate(30vw, 40vh) scale(1.2);
    border-radius: 67% 33% 45% 55% / 56% 68% 32% 44%;
  }
  100% {
    transform: translate(10vw, -20vh) scale(0.9);
    border-radius: 33% 67% 24% 76% / 49% 29% 71% 51%;
  }
}

@keyframes move-blob-2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
    border-radius: 40% 60% 60% 40% / 70% 50% 50% 30%;
  }
  100% {
    transform: translate(calc(-50% + -20vw), calc(-50% + 30vh)) scale(1.1);
    border-radius: 20% 80% 30% 70% / 50% 40% 60% 50%;
  }
}

@keyframes move-blob-3 {
  0% {
    transform: translate(0, 0) scale(1);
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
  40% {
    transform: translate(-40vw, -50vh) scale(1.3);
    border-radius: 26% 74% 61% 39% / 55% 26% 74% 45%;
  }
  100% {
    transform: translate(10vw, -10vh) scale(0.8);
    border-radius: 73% 27% 34% 66% / 24% 63% 37% 76%;
  }
}

/* 3. CORE LAYOUT STRUCTURE
------------------------------------------- */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.main-content {
    flex-grow: 1;
    padding-top: var(--header-height);
}

/* ---
   4. FINAL UMPH HEADER (v3)
   --- */

/* Header container - no changes */
.site-header {
    position: fixed; top: 1rem; left: 50%;
    transform: translateX(-50%) translateY(0);
    width: calc(100% - 4rem);
    max-width: var(--content-width);
    height: var(--header-height);
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Compact state when user has scrolled */
.site-header.is-scrolled {
    transform: translateX(-50%) scale(0.95);
}

.header-content {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
    padding: 0 1.5rem;
}

.logo-link img {
    height: 100px;
    transition: transform var(--transition-fast);
}
.logo-link:hover img { transform: scale(1.05); }

/* --- Pill Navigation --- */
.site-nav ul {
    display: flex; align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    padding: 0.4rem; gap: 0.4rem;
}

.nav-link {
    font-size: 1rem; font-weight: 500;
    color: var(--color-text-muted);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    transition: all var(--transition-fast);
    border: 1px solid transparent; /* Placeholder for alignment */
    background-clip: padding-box; /* Important for gradient borders */
}

.nav-link:hover {
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* THIS IS THE NEW COLORSWEEP EFFECT FOR THE ACTIVE LINK */
.nav-link.active {
    color: white;
    font-weight: 600;
    background-image: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary), var(--color-accent-primary));
    background-size: 200% auto;
    animation: background-sweep-animation 3s linear infinite;
}

/* Animation for the nav link background */
@keyframes background-sweep-animation {
    to { background-position: 200% center; }
}

/* --- Header Actions (Right Side) --- */
.header-actions {
    display: flex; align-items: center; gap: 0.75rem;
}

/* Style for Text-based links like "Docs" & "Showcase" */
.header-action-link {
    font-size: 1rem; font-weight: 600;
    color: var(--color-text-muted);
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 50px;
    transition: all var(--transition-fast);
}

.header-action-link:hover {
    color: white;
    border-color: var(--color-accent-primary);
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

/* Shared style for ICON buttons like Discord & Basket */
.header-action-btn {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
    position: relative;
}

.header-action-btn:hover {
    color: white;
    border-color: var(--color-accent-primary);
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

/* Specific overrides for the basket button element */
.basket-toggle-btn {
    padding: 0;
}

.basket-item-count {
    top: -4px; right: -4px;
}

/* 5. MOBILE NAVIGATION
------------------------------------------- */
.mobile-nav-toggle {
    display: none;
    width: 30px;
    height: 24px;
    z-index: 110;
}

.mobile-nav-toggle .line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-nav-toggle .line:not(:last-child) {
    margin-bottom: 6px;
}




/* 6. HERO SECTION
------------------------------------------- */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70vh;
    padding: 6rem 0;
    user-select: none;
    position: relative;
    overflow: hidden;
}

/* 2. Shared styles for the images */
.hero-image-left,
.hero-image-right {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  height: auto;
  
  /* THIS IS THE KEY: We anchor them to the bottom of the section.
    This value raises them up to sit on top of the feature icons.
    This is the ONLY value you should need to touch for vertical position.
  */
  bottom: 0rem; 
}

/* 3. Positioning for the LEFT Character */
.hero-image-left {
  width: 400px;
  left: 50%;
  
  /* This moves the image left from the center point */
  transform: translateX(-36rem);
  
  /* Your mask settings */
  -webkit-mask-image: linear-gradient(to left, black 50%, transparent 100%);
  mask-image: linear-gradient(to left, black 50%, transparent 100%);
  mask-composite: intersect;
}

/* 4. Positioning for the RIGHT Character */
.hero-image-right {
  width: 400px;
  left: 50%;
  
  /* This moves the image right from the center point */
  transform: translateX(11rem);
  
  /* Your mask settings */
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
  mask-composite: intersect;
}


.hero-text h1, .hero-text h2, .hero-text h3 {
    line-height: 0.9;
    font-weight: 700;
    text-transform: uppercase;
}

.hero-line-2 {
    font-size: clamp(4.5rem, 16vw, 10rem);
    font-weight: 700;
    letter-spacing: -2px;
    position: relative;
}

.hero-text {
    position: relative;
    z-index: 1;
}

.hero-scribble {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    color: var(--color-text);
    position: absolute;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-scribble-top {
    font-size: clamp(3rem, 8vw, 6rem);
    top: -0.85em;
    left: 0.3em;
    transform: rotate(-3deg);
    opacity: 0.9;
}

.hero-scribble-bottom {
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    bottom: -0.7em;
    right: -0.05em;
    transform: rotate(-2deg);
    opacity: 0.9;
}

.colorsweep {
    background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary), var(--color-accent-primary));
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: colorsweep-animation 4s linear infinite;
}

@keyframes colorsweep-animation { to { background-position: 200% center; } }

/* 7. FEATURES SECTION (ICONS)
------------------------------------------- */
.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    max-width: 600px;
    margin-top: 4rem;
    position: relative;
    z-index: 1;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex: 1 1 120px;
    min-width: 120px;
    animation: fade-in-up 0.5s var(--transition-smooth) both;
    animation-delay: var(--delay);
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.feature-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background: rgba(95, 0, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 25px rgba(95, 0, 255, 0.2), inset 0 0 20px rgba(95, 0, 255, 0.1);
}

.feature-icon {
    width: 36px;
    height: 36px;
    fill: var(--color-text);
    transition: fill var(--transition-smooth);
}

.feature-label {
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* 8. CONTENT SECTIONS (GENERIC)
------------------------------------------- */
.content-section {
    padding: 4rem 0;
    border-top: 1px solid var(--color-border);
}

.section-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-text);
}

/* 8b. SCROLL REVEAL ANIMATIONS
------------------------------------------- */
.reveal-child {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-child.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Fast bounce variant for product grids */
.reveal-child-fast {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-child-fast.is-revealed {
    opacity: 1;
    transform: scale(1);
}

/* 8c. STATS & LINKS SECTION
------------------------------------------- */
.stats-links-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.stats-column {
    display: flex;
    gap: 3.5rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-text-muted);
}

.stat-value {
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.stat-value-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-suffix {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-suffix .fa-star {
    font-size: 0.9em;
    -webkit-text-fill-color: initial;
    color: var(--color-accent-primary);
}

.links-column {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
    align-items: center;
}

/* Action cards with shifting conic borders */
.action-card {
    position: relative;
    border-radius: var(--border-radius-medium);
    padding: 2px;
    text-decoration: none;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.action-card:hover {
    transform: translateY(-3px);
    color: var(--color-text);
}

.action-card-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.85rem 1.2rem;
    border-radius: calc(var(--border-radius-medium) - 2px);
    background: rgba(12, 12, 12, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    transition: background var(--transition-fast);
    white-space: nowrap;
}


.action-card-inner i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

/* Docs — magenta accent */
.action-card--docs {
    background: conic-gradient(from var(--border-angle), var(--color-accent-primary), rgba(238,0,255,0.3), var(--color-accent-primary));
    animation: border-spin 4s linear infinite;
    box-shadow: 0 0 20px rgba(238, 0, 255, 0.08);
}
.action-card--docs:hover { box-shadow: 0 0 30px rgba(238, 0, 255, 0.2); }
.action-card--docs .action-card-inner i { color: var(--color-accent-primary); }

/* Showcase — purple accent */
.action-card--showcase {
    background: conic-gradient(from var(--border-angle), var(--color-accent-secondary), rgba(95,0,255,0.3), var(--color-accent-secondary));
    animation: border-spin 4s linear infinite;
    animation-delay: -1.3s;
    box-shadow: 0 0 20px rgba(95, 0, 255, 0.08);
}
.action-card--showcase:hover { box-shadow: 0 0 30px rgba(95, 0, 255, 0.2); }
.action-card--showcase .action-card-inner i { color: var(--color-accent-secondary); }

/* Lucky Wheel — pink accent */
.action-card--wheel {
    background: conic-gradient(from var(--border-angle), #ff00c1, rgba(255,0,193,0.3), #ff00c1);
    animation: border-spin 4s linear infinite;
    animation-delay: -2.6s;
    box-shadow: 0 0 20px rgba(255, 0, 193, 0.08);
}
.action-card--wheel:hover { box-shadow: 0 0 30px rgba(255, 0, 193, 0.2); }
.action-card--wheel .action-card-inner i { color: #ff00c1; }

@media (max-width: 900px) {
    .stats-links-row {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }

    .stats-column {
        flex-direction: column;
        gap: 0;
    }

    .stat-item {
        padding: 1.5rem 0;
        border-bottom: 1px solid var(--color-border);
        text-align: center;
        align-items: center;
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    .stat-value-row {
        justify-content: center;
    }

    .stat-value {
        font-size: clamp(3.5rem, 14vw, 5rem);
    }

    .stat-suffix {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .links-column {
        flex-direction: column;
        gap: 0.75rem;
    }

    .action-card {
        width: 100%;
    }

    .action-card-inner {
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
    }
}

/* 9. PAYMENTS & RECENT PAYMENTS MODULES
------------------------------------------- */
.payments-grid,
.recent-payments-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.payments-grid > a,
.payment-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-medium);
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: all var(--transition-smooth);
}

.payments-grid > a:hover,
.payment-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(40, 40, 40, 0.5);
}

.payments-grid img {
    height: 35px !important;
    width: auto !important;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.payments-grid > a:hover img {
    opacity: 1;
}

.payment-item {
    gap: 1rem;
}

.payment-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
}

.payment-details {
    display: flex;
    flex-direction: column;
}

.payment-ign {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}

.payment-time {
    font-size: 0.9rem;
    line-height: 1;
}

/* 10. REVIEWS MARQUEE (INFINITE SCROLL)
------------------------------------------- */
.reviews-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    margin: 0 -2rem;
    padding: 1rem 0;
}

.reviews-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: reviews-scroll 60s linear infinite;
}

.reviews-track:hover {
    animation-play-state: paused;
}

@keyframes reviews-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.review-card {
    flex-shrink: 0;
    width: 340px;
    border-radius: var(--border-radius-large);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(95, 0, 255, 0.08), rgba(238, 0, 255, 0.04));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(95, 0, 255, 0.15);
    transition: border-color var(--transition-smooth), background var(--transition-smooth);
}

.review-card:hover {
    border-color: rgba(95, 0, 255, 0.35);
    background: linear-gradient(135deg, rgba(95, 0, 255, 0.12), rgba(238, 0, 255, 0.06));
}

.review-stars {
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.2);
}

.review-text {
    color: var(--color-text);
    line-height: 1.65;
    font-size: 0.9rem;
    flex-grow: 1;
}

.review-name {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: auto;
}

.more-reviews-link-wrapper { margin-top: 2.5rem; text-align: center; }
.more-reviews-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-text-muted); font-size: 1.2rem; font-weight: 500; padding: 0.5rem; transition: color var(--transition-fast); }
.more-reviews-link:hover { color: var(--color-text); }
.more-reviews-link svg { width: 24px; height: 24px; fill: currentColor; transition: transform var(--transition-fast); }
.more-reviews-link:hover svg { transform: translateX(5px); }

@media (max-width: 576px) {
    .review-card { width: 280px; padding: 1.5rem; }
}

/* 11. FAQ SECTION (FROSTED GLASS)
------------------------------------------- */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border);
    background: rgba(30, 30, 30, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    overflow: hidden;
}

.faq-item[open] {
    background-color: rgba(40, 40, 40, 0.4);
    border-color: var(--color-accent-secondary);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
}
.faq-question::-webkit-details-marker, .faq-question { list-style: none; } /* Remove default marker */

.faq-icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform var(--transition-smooth);
    color: var(--color-text-muted);
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    color: var(--color-accent-primary);
}

.faq-answer {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: var(--color-text-muted);
    line-height: 1.8;
}

/* 12. FOOTER
------------------------------------------- */
.site-footer {
    padding: 2rem 0;
    margin-top: 4rem;
    text-align: center;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}
.site-footer p { margin-bottom: 0.5rem; }
.site-footer a { color: var(--color-text-muted); text-decoration: underline; }
.site-footer a:hover { color: var(--color-accent-primary); }

/* 13. TEBEX-SPECIFIC OVERRIDES
------------------------------------------- */
.alert-box { padding: 1.5rem; margin-bottom: 1.5rem; border-radius: var(--border-radius-medium); border: 1px solid var(--color-border); background-color: var(--color-surface); color: var(--color-text); font-size: 1.1rem; font-weight: 500; }
.alert-box.alert-error { border-left: 4px solid #F96565; }
.alert-box.alert-success { border-left: 4px solid #2ACE91; }
.alert-box.alert-warning { border-left: 4px solid #F98A23; }
.modal-open { padding-right: 0 !important; }
.modal-backdrop.show { opacity: 0.8; background-color: var(--color-background); }
.modal-dialog { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.modal-content { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-large); color: var(--color-text); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.modal-header, .modal-footer { border-color: var(--color-border); }
.modal-header .close { color: var(--color-text); opacity: 0.7; text-shadow: none; }
.modal-header .close:hover { opacity: 1; }

/* 14. RESPONSIVE DESIGN (GLOBAL)
------------------------------------------- */
@media (max-width: 768px) {
    .app-container { padding: 0 1rem; }
    .site-header { width: calc(100% - 2rem); top: 0.5rem; }
    .header-content { padding: 0 1rem; }
    .site-nav, .header-actions { display: none; }
    .mobile-nav-toggle { display: block; }
    .hero-section, .content-section { padding: 4rem 0; }
    .hero-section { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
    .hero-image-left {
         transform: translateX(-22rem);
    }
    .hero-image-right {
        transform: translateX(-5rem);
    }
}

@media (max-width: 576px) {
    .feature-item { flex-basis: calc(50% - 1rem); }
    .feature-icon-wrapper { width: 70px; height: 70px; }
    .feature-icon { width: 32px; height: 32px; }
    .reviews-grid { grid-template-columns: 1fr; }
    .faq-question { font-size: 1.1rem; padding: 1rem; }
    .faq-answer { padding: 0 1rem 1rem 1rem; }
}

/* 15. CATEGORY PAGE STYLES
------------------------------------------- */
.category-header {
    text-align: left;
    padding: 5rem 0 5rem;
}

.category-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
}

.category-description {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    max-width: 600px;
    line-height: 1.6;
}

.category-count {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent-primary);
    margin-top: 0.5rem;
}

/* Category CTA Box */
.category-cta {
    padding: 4rem 0 2rem;
}

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem;
    border-radius: var(--border-radius-large);
    background: linear-gradient(135deg, rgba(95, 0, 255, 0.12), rgba(238, 0, 255, 0.06));
    border: 1px solid rgba(95, 0, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cta-content {
    flex: 1;
}

.cta-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.cta-text {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 450px;
}

.cta-button {
    flex-shrink: 0;
}

.cta-button .action-card-inner {
    padding: 1rem 2rem;
    font-size: 1rem;
}

@media (max-width: 600px) {
    .cta-box {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }

    .cta-text {
        max-width: none;
    }

    .cta-button {
        width: 100%;
    }

    .cta-button .action-card-inner {
        justify-content: center;
    }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    padding-bottom: 4rem;
}

.product-card-link {
    display: block;
    text-decoration: none;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    transform: perspective(1000px);
    transition: transform var(--transition-smooth);
}

.product-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    background: rgba(30, 30, 30, 0.2);
    border: 1px solid var(--color-border);
    transition: all var(--transition-smooth);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.product-card-link:hover {
    transform: translateY(-10px) rotateX(5deg) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.product-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
}

.product-card-link:hover .product-image {
    transform: scale(1.1);
}

.product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    transition: height var(--transition-smooth);
}

.product-card-link:hover .product-card::after {
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

.product-price-banner {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 4;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius-small);
    background: rgba(18, 18, 18, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.product-card-link:hover .product-price-banner {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.final-price {
    font-size: 1.4rem; /* Bigger font */
    font-weight: 700; /* Badder font */
    color: white;
}

.original-price {
    font-size: 1rem; /* Bigger font */
    color: rgba(255, 255, 255, 0.7);
    text-decoration: line-through;
}

.product-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-small);
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    background: rgba(238, 0, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(238, 0, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.no-packages-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    border-radius: var(--border-radius-large);
    background: rgba(30, 30, 30, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
}

.no-packages-message p:first-child {
    font-size: 1.5rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.no-packages-message p:last-child {
    color: var(--color-text-muted);
}

/* 16. CATEGORY RESPONSIVE FIXES
------------------------------------------- */
@media (max-width: 768px) {
    /* Make price banner always visible on mobile */
    .product-price-banner {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 16b. BUNDLES CATEGORY LAYOUT
------------------------------------------- */
.bundle-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 2rem;
}

.bundle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 4rem 0;
}

.bundle-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bundle-name {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.bundle-description {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 480px;
}

.bundle-description p {
    margin-bottom: 0.5rem;
}

.bundle-description p:last-child {
    margin-bottom: 0;
}

.bundle-pricing-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bundle-price-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.bundle-inflated-price {
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    background: linear-gradient(90deg, #F96565, #FF3E3E, #D94040, #F96565);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: redsweep-animation 3s linear infinite;
}

@keyframes redsweep-animation {
    to { background-position: 200% center; }
}

.bundle-final-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
}

.bundle-actions-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.bundle-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    border-radius: var(--border-radius-small);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    width: fit-content;
}

.bundle-save-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-border);
    background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary), var(--color-accent-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: colorsweep-animation 4s linear infinite;
}

.bundle-save-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(30, 30, 30, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;
}

.bundle-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(238, 0, 255, 0.3);
    color: white;
}

.bundle-view-btn i {
    transition: transform var(--transition-fast);
}

.bundle-view-btn:hover i {
    transform: translateX(4px);
}

.bundle-card-link {
    display: block;
    text-decoration: none;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    transform: perspective(1000px);
    transition: transform var(--transition-smooth);
}

.bundle-card-link:hover {
    transform: translateY(-10px) rotateX(5deg) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.bundle-card-link .product-card {
    aspect-ratio: 16 / 10;
}

/* Always show price banner on bundle cards */
.bundle-price-banner-visible {
    opacity: 1;
    transform: translateY(0);
}

.bundle-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border), rgba(238, 0, 255, 0.15), var(--color-border), transparent);
}

/* Bundle responsive */
@media (max-width: 900px) {
    .bundle-row {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 3rem 0;
    }

    .bundle-info {
        text-align: center;
        align-items: center;
    }

    .bundle-description {
        max-width: none;
    }

    .bundle-price-row {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .bundle-row {
        padding: 2rem 0;
    }

    .bundle-actions-row {
        flex-direction: column;
    }

    .bundle-view-btn,
    .bundle-save-badge {
        width: 100%;
        justify-content: center;
    }
}

/* ---
   17. PRODUCT PAGE STYLES (v7 - Final Majestic Redesign)
   --- */

/* Reusable Frosted Box Class */
.frosted-box {
     border-radius: var(--border-radius-large);
    background: rgba(30, 30, 30, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth), background-color var(--transition-smooth);
}


.frosted-box:hover {
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: var(--color-accent-secondary);
}

.product-page-v7 {
    padding: 2rem 0 4rem;
}

/* Product title in the right scroll column */
.product-intro-scroll {
    text-align: left;
    padding-top: 3rem;
}

.product-intro-scroll .product-title-main {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
}

.product-intro-scroll .product-tagline {
    margin-top: 0.75rem;
}

/* Product info chips row */
.product-info-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.product-info-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--border-radius-small);
    background: rgba(30, 30, 30, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.info-chip-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
}

.info-chip-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.info-chip-logo {
    width: 20px;
    min-width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
}

/* Link chip variants */
.product-info-chip--link,
.product-info-chip--discord {
    text-decoration: none;
    padding: 2px;
    background: conic-gradient(from var(--border-angle), var(--color-accent-primary), rgba(238,0,255,0.25), var(--color-accent-primary));
    animation: border-spin 4s linear infinite;
    border: none;
}

.product-info-chip--link .info-chip-value,
.product-info-chip--link .info-chip-logo,
.product-info-chip--discord .info-chip-value,
.product-info-chip--discord i {
    position: relative;
    z-index: 1;
}

.product-info-chip--link,
.product-info-chip--discord {
    position: relative;
    overflow: hidden;
    padding: 0.6rem 1.1rem;
}

.product-info-chip--link::after,
.product-info-chip--discord::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: calc(var(--border-radius-small) - 2px);
    background: rgba(12, 12, 12, 0.7);
    z-index: 0;
}

.product-info-chip--link:hover,
.product-info-chip--discord:hover {
    box-shadow: 0 0 20px rgba(238, 0, 255, 0.15);
    transform: translateY(-2px);
    color: var(--color-text);
}

.product-info-chip--discord {
    background: conic-gradient(from var(--border-angle), var(--color-accent-secondary), rgba(95,0,255,0.25), var(--color-accent-secondary));
    animation-delay: -1.5s;
}

.product-info-chip--link i {
    font-size: 1.1rem;
    color: var(--color-accent-primary);
}

.product-info-chip--discord i {
    font-size: 1.1rem;
    color: var(--color-accent-secondary);
}

.product-info-chip--discord:hover {
    box-shadow: 0 0 20px rgba(95, 0, 255, 0.15);
}

/* Framework chip highlight when detected */
.product-info-chip .info-chip-value.detected-qb {
    color: var(--color-accent-primary);
}

.product-info-chip .info-chip-value.detected-esx {
    color: var(--color-accent-secondary);
}

/* Play button on product image */
.product-main-image-container {
    position: relative;
}

.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: none;
    color: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-smooth);
    z-index: 5;
    padding-left: 6px;
}

.play-btn-overlay:hover {
    background: rgba(238, 0, 255, 0.35);
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 40px rgba(238, 0, 255, 0.3);
}

/* Video popup */
.video-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.video-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 10001;
    width: 90%;
    max-width: 900px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-popup.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.video-popup-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.video-popup-close:hover {
    background: var(--color-accent-primary);
    transform: rotate(90deg);
}

.video-popup-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: var(--border-radius-large);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Base Layout Grid */
.product-grid-layout {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 2.5rem;
}

/* --- Left (Sticky on Desktop) Column --- */
.product-media-sidebar .sticky-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    height: 100%;
}

/* Title & Tagline (fallback for old layout) */
.product-title-main {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.1;
    text-transform: uppercase;
}

.product-tagline {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--color-text-muted);
    margin-top: 0.75rem;
    max-width: 550px;
}

.product-main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--border-radius-large);
}

/* Majestic Purchase Box */
.purchase-block-wrapper {
    padding: 1.25rem;
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.price-display {
    text-align: left;
    flex-shrink: 0;
}

.price-display .final-price {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.price-display .original-price {
    font-size: 1rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.add-to-basket-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius-small);
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    transition: all var(--transition-fast);
    box-shadow: 0 5px 20px rgba(179, 0, 255, 0.3);
}

.add-to-basket-btn:hover {
    color: white;
    box-shadow: 0 8px 25px rgba(179, 0, 255, 0.4);
}

/* Media Gallery (in sticky column) */
.media-gallery-sticky {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.media-slot:not(:empty) {
    width: 100%;
}

#video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: var(--border-radius-medium);
}

/* --- Right (Scrolling) Column --- */
.product-scroll-column {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Description now has NO box */
.description-content {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    padding: 1rem;
}
.description-content h1, .description-content h2, .description-content h3 { color: var(--color-text); margin: 1.5rem 0 1rem; font-weight: 600; }
.description-content p { margin-bottom: 1rem; }
.description-content ol { margin: 0 0 1rem 1.5rem; }
.description-content strong { color: var(--color-text); }
.description-content a { text-decoration: underline; }
.description-content img { max-width: 100%; height: auto; border-radius: var(--border-radius-medium); margin: 1.5rem 0; }

/* Trust Section */
.trust-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
}
.trust-card {
    padding: 2rem;
    text-align: center;
}
.trust-title {
    font-size: 1.3rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}
.trust-text {
    color: var(--color-text-muted);
}

/* Carousel Styles for this page */
#image-carousel-main-container { position: relative; width: 100%; }
.image-carousel-container { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); visibility: hidden; }
.carousel-image-item { flex: 0 0 80%; margin: 0 1.5%; }
.carousel-image { max-width: 100%; height: auto; display: block; transition: transform 0.5s ease, opacity 0.5s ease; opacity: 0.4; transform: scale(0.9); border-radius: var(--border-radius-medium); }
.carousel-controls { text-align: center; margin-top: 1.5rem; }
.carousel-arrow { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); padding: 0.5rem 1rem; margin: 0 0.5rem; cursor: pointer; border-radius: 50px; font-size: 1rem; transition: all var(--transition-fast); }
.carousel-arrow:hover { background: var(--color-accent-primary); color: white; border-color: var(--color-accent-primary); }

/* --- START: STYLES FOR IN-DESCRIPTION FEATURE CARDS --- */

/* 1. Makes the default description text (that isn't in a card) white */
.description-content p {
    color: #D0B3CD;
}

.description-content li {
    color: #D0B3CD;
}




/* 2. Style for an individual feature card */
.feature-highlight-card {
    padding: 1rem 2rem 1rem 2rem;
    text-align: left; /* Aligns content to the left */
    margin-bottom: 1.5rem; /* Adds space between cards */
    border-radius: 18px; /* Added for softer corners like your image */
}

/* 3. Style for the feature title (text before the colon) */
.feature-highlight-title {
    font-size: 1.3rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* 4. Style for the feature text (text after the colon) */
.feature-highlight-text {
    color: rgba(235, 235, 245, 0.7); /* Directly set to a lighter, muted color */
    line-height: 1.7;
}

/* --- END: STYLES FOR IN-DESCRIPTION FEATURE CARDS --- */

/* ---
   18. PRODUCT PAGE RESPONSIVENESS
   --- */

/* Desktop Layout (for screens wider than 1024px) */
@media (min-width: 1024px) {
    .product-grid-layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
        gap: 4rem;
    }
    .product-media-sidebar {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
        height: calc(100vh - var(--header-height) - 4rem);
        padding-bottom: 20vh;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .product-media-sidebar::-webkit-scrollbar {
        display: none;
    }
}

/* Mobile Layout adjustments */
@media (max-width: 500px) {
    .purchase-block-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .price-display {
        text-align: center;
    }
    .add-to-basket-btn {
        width: 100%;
    }
}


/* ---
   19. PACKAGE OPTIONS MODERNIZATION (v3 - Final Polish)
   --- */

/* Full-screen overlay for the options page */
.package-options-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: rgba(5, 5, 5, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: fade-in 0.5s var(--transition-smooth) both;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Main container for the form and options */
.options-form-container {
    width: 100%;
    max-width: 500px;
    text-align: center;
    display: flex;
    flex-direction: column;
    animation: fade-in-up 0.6s var(--transition-smooth) both;
    animation-delay: 0.2s;
}

/* Title styling */
.options-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Description text above the button */
.options-description {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

/* Discord Login Button with Icon */
a.discord-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    background-color: #5865F2;
    color: white;
    border-radius: var(--border-radius-medium);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

a.discord-login-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
}

a.discord-login-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}


/* Final action buttons at the bottom */
.options-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.btn-options-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.btn-options-back:hover {
    color: var(--color-text);
    border-color: var(--color-text);
    transform: scale(1.1);
}

.btn-options-back svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.btn-options-submit {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    transition: all var(--transition-fast);
    box-shadow: 0 5px 20px rgba(179, 0, 255, 0.3);
    -webkit-appearance: none; /* Removes native OS styling */
    appearance: none;
    border: none; /* Removes the beveled border */
    outline: none; /* Removes the outline on focus */
}

.btn-options-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(179, 0, 255, 0.4);
}


/* ---
   20. VERIFICATION & LOGIN FORM STYLES
   --- */

/* This wrapper will contain the form rendered by Tebex */
.verification-form-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Creates space between form elements */
}

/* Styling for labels */
.verification-form-wrapper label {
    display: block;
    text-align: left;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Styling for text/password input fields */
.verification-form-wrapper input[type="text"],
.verification-form-wrapper input[type="password"],
.verification-form-wrapper input[type="email"] {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.verification-form-wrapper input[type="text"]:focus,
.verification-form-wrapper input[type="password"]:focus,
.verification-form-wrapper input[type="email"]:focus {
    outline: none;
    border-color: var(--color-accent-secondary);
    box-shadow: 0 0 15px rgba(95, 0, 255, 0.3);
}

/* Styling for the main submit button */
.verification-form-wrapper input[type="submit"],
.verification-form-wrapper button[type="submit"] {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    padding: 1rem;
    border-radius: var(--border-radius-medium);
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    transition: all var(--transition-fast);
    box-shadow: 0 5px 20px rgba(179, 0, 255, 0.3);
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    margin-top: 1rem; /* Add some space above the button */
}

.verification-form-wrapper input[type="submit"]:hover,
.verification-form-wrapper button[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(179, 0, 255, 0.4);
}

/* Styling for potential error/alert messages from Tebex */
.verification-form-wrapper .alert {
    padding: 1rem;
    border-radius: var(--border-radius-medium);
    border: 1px solid #F96565;
    background-color: rgba(249, 101, 101, 0.1);
    color: var(--color-text);
    text-align: center;
}


/* ---
   22. FINAL CHECKOUT & MOBILE MENU
   --- */

/* --- A. Header Basket Icon --- */

.basket-toggle-btn {
    position: relative;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-small);
    transition: all var(--transition-fast);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

.basket-toggle-btn:hover {
    border-color: var(--color-accent-secondary);
    transform: translateY(-2px);
}

.basket-item-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-accent-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform var(--transition-fast);
}

.basket-item-count.visible {
    transform: scale(1);
}

/* --- B. Enhanced Checkout Panel & Animations --- */

.app-container {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.checkout-is-active .app-container {
    transform: scale(0.97) translateX(-20px);
    filter: blur(8px) brightness(0.6);
    pointer-events: none;
}

.checkout-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    visibility: hidden;
    z-index: 1050;
}

.checkout-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 480px;
    height: 100%;
    z-index: 1100;
    background: rgba(18, 18, 18, 0.1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-smooth);
    visibility: hidden;
}

body.checkout-is-active .checkout-overlay {
    opacity: 1;
    visibility: visible;
}
body.checkout-is-active .checkout-panel {
    transform: translateX(0);
    visibility: visible;
}

.checkout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.checkout-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.checkout-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.checkout-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}
.checkout-close-btn svg { width: 24px; height: 24px; }

.checkout-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

.basket-item {
    display: flex;
    gap: 1.5rem;
    align-items: center;  /* Changed to center for vertical alignment */
    opacity: 0;
    transform: translateX(20px);
}
.basket-item:not(:last-child) { margin-bottom: 2rem; }

body.checkout-is-active .basket-item {
    animation: slide-in-item 0.5s var(--transition-fast) forwards;
    animation-delay: var(--delay);
}

@keyframes slide-in-item {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.basket-item__image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius-medium);
    flex-shrink: 0;
}

.basket-item__details { 
    flex-grow: 1; /* This makes the details section take up available space */
}

.basket-item__name {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text);
    display: block;
    text-decoration: none;
    margin-bottom: 0.25rem; /* Reduced margin */
}
.basket-item__name:hover { color: var(--color-accent-primary); }

.basket-item__price {
    font-size: 1rem;
    color: var(--color-text-muted);
}

.basket-item__price .original-price {
    text-decoration: line-through;
    opacity: 0.7;
    margin-right: 0.5rem;
}

.basket-item__price .final-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
}

.basket-item__remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-text-muted);
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0; /* Prevents the button from shrinking */
    margin-left: 1rem; /* Adds space between details and button */
}
.basket-item__remove-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.basket-item__remove-btn:hover {
    background-color: #F96565;
    color: white;
}

.checkout-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--color-border);
    background: transparent;
    flex-shrink: 0;
}

.coupon-form {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.coupon-input {
    flex-grow: 1;
    min-width: 0;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-medium);
    font-size: 1rem;
    font-family: var(--font-primary);
    transition: all var(--transition-fast);
}
.coupon-input::placeholder { color: var(--color-text-muted); }
.coupon-input:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    background-color: rgba(0, 0, 0, 0.4);
}
.coupon-submit {
    flex-shrink: 0;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-medium);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}
.coupon-submit:hover {
    background-color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: white;
}

.subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
.subtotal__label { color: var(--color-text-muted); }
.subtotal__price {
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--color-text);
}

.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    padding: 1rem;
    border-radius: var(--border-radius-medium);
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    transition: all var(--transition-fast);
    box-shadow: 0 5px 20px rgba(179, 0, 255, 0.3);
}
.checkout-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(179, 0, 255, 0.4);
}

/* --- C. Frosted Glass Mobile Menu --- */
.mobile-category-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s var(--transition-fast);
    display: flex;
    flex-direction: column;
    padding: 2rem;
    overflow-y: auto;
}

body.mobile-menu-is-active .mobile-category-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
}

body.mobile-menu-is-active .mobile-nav-toggle .line-1 { transform: translateY(8px) rotate(45deg); }
body.mobile-menu-is-active .mobile-nav-toggle .line-2 { opacity: 0; }
body.mobile-menu-is-active .mobile-nav-toggle .line-3 { transform: translateY(-8px) rotate(-45deg); }

.mobile-category-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-category-link {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-medium);
    color: var(--color-text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-category-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
}
.mobile-category-link.active {
    background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary));
    color: white;
    font-weight: 700;
}


/* ---
   24. MOBILE BASKET VISIBILITY FIX
   --- */

/* This new container holds the mobile icons (basket, menu) */
.mobile-header-actions {
    display: none; /* Hidden by default on desktop */
    align-items: center;
    gap: 0.75rem; /* Space between basket and menu icons */
}

/* The existing rule that hides the desktop actions */
@media (max-width: 768px) {
    .header-actions {
        display: none;
    }
    /* Show our new mobile container instead */
    .mobile-header-actions {
        display: flex; 
    }
}



/* ---
   25. CUSTOM MOBILE FIXES
   --- */

/* 1. Fix for Hero Text Overflow on Small Screens */
@media (max-width: 480px) {
  .hero-line-2 { font-size: clamp(3.5rem, 15vw, 9rem); }
  .hero-scribble-top {
      font-size: clamp(2.5rem, 10vw, 4rem);
      top: -0.6em;
      left: 0.1em;
  }
  .hero-scribble-bottom {
      font-size: clamp(2.2rem, 9vw, 3.5rem);
      bottom: -0.5em;
      right: -0.02em;
  }
}

/* 2. Redesign Feature Items & Payments Grid for Mobile View */
@media (max-width: 768px) {
  /* Feature Items Layout */
  .hero-features {
    max-width: 100%; /* Allow container to use more space */
    padding: 0 1rem;   /* Add a little horizontal padding */
  }

  .feature-item {
    flex-direction: row;  /* Change layout to horizontal */
    flex: 1 1 100%;       /* Make each item take the full width */
    justify-content: flex-start; /* Align content to the left */
    align-items: center;  /* Vertically center the icon and text */
    gap: 1.5rem;          /* Increase space between icon and text */
    max-width: 350px;     /* Set a max-width for readability */
    margin: 0 auto;       /* Center the items in the .hero-features container */
  }

  .feature-label {
    text-align: left; /* Align text to the left */
  }

  /* Secure Payments Layout (NEW) */
  .payments-grid {
    display: grid;              /* Change layout from flexbox to grid */
    grid-template-columns: 1fr; /* Each item takes one full-width column */
    gap: 1rem;                  /* Adjust vertical spacing between items */
  }
}


/* ---
   26. FLOATING QUICK LINKS WIDGET (Side-by-Side Layout)
   --- */

.quick-links-widget {
    position: fixed;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: row; /* CHANGED - Lays out title and bubbles side-by-side */
    align-items: center;  /* Vertically aligns the title with the bubble group */
    gap: 1.5rem;          /* Increased gap for the new layout */
    animation: fade-in-widget 1s var(--transition-smooth) 0.5s both;
}

.widget-title {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    /* The vertical margin is no longer needed */
}

.widget-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.widget-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: var(--color-text);
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-smooth);
    position: relative;
}

.widget-bubble:hover {
    transform: scale(1.1) translateX(5px);
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 40px rgba(150, 0, 255, 0.3);
    background: rgba(40, 40, 40, 0.5);
}

.widget-bubble i {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform var(--transition-fast);
}

.widget-bubble:hover i {
    transform: rotate(45deg);
}

.widget-bubble::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    margin-left: 15px;
    background-color: var(--color-accent-primary);
    color: white;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-small);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all var(--transition-fast);
}

.widget-bubble:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@keyframes fade-in-widget {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@media (max-width: 992px) {
    .quick-links-widget { display: none; }
}


/* ---
   27. REFINED SCROLLING BOTTOM BANNER (v2)
   --- */

/* The main container - now a positioning context */
.promo-banner-bottom {
    display: none;
    position: relative; /* ADDED: This is crucial for positioning the button inside */
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    overflow: hidden;

    /* Sizing */
    width: 30vw;
    min-width: 340px;
    max-width: 500px;
    height: 56px;

    /* Frosted Glass Frame Style */
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

body.show-promo-banner .promo-banner-bottom {
    display: block; /* Use block instead of flex now */
}

/* The inner wrapper with the mask and scrolling animation */
.promo-banner-bottom .promo-text-wrapper {
    width: 100%; /* Ensure it fills the container */
    height: 100%;
    display: flex;
    align-items: center; /* Vertically center the text inside */

    /* Fade-out mask on the scrolling content */
    -webkit-mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);
    mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);
}

.promo-banner-bottom .promo-text {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 0 3rem;
    animation: marquee-scroll 40s linear infinite;
}

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

/* --- NEW, PRECISE CLOSE BUTTON STYLING --- */
.promo-banner-bottom .promo-close-btn {
    position: absolute; /* This is the key change */
    top: 50%;
    right: 0.75rem; /* Distance from the right edge */
    transform: translateY(-50%); /* This perfectly centers it vertically */
    
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.promo-banner-bottom .promo-close-btn:hover {
    background: var(--color-accent-primary);
    /* Removed the Y-transform from hover to keep it centered */
    transform: translateY(-50%) scale(1.1) rotate(90deg);
}

.promo-banner-bottom.is-closing {
    opacity: 0;
    transform: translateX(-50%) translateY(20px); /* Slides down on exit */
}


/* ---
   28. CHECKOUT PANEL ENHANCEMENTS (v2)
   --- */

/* 1. Blurred State for Logged-Out Users */
.checkout-panel.is-blurred > *:not(.login-prompt):not(.checkout-header) {
    filter: blur(12px);
    pointer-events: none;
    user-select: none;
}

/* 2. Login Prompt Overlay */
.login-prompt {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-prompt__content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.login-prompt__title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
}

.login-prompt__text {
    font-size: 1rem;
    color: var(--color-text-muted);
    max-width: 300px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.login-prompt__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    border-radius: var(--border-radius-medium);
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    transition: all var(--transition-fast);
    box-shadow: 0 5px 20px rgba(179, 0, 255, 0.3);
}

.login-prompt__button:hover {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(179, 0, 255, 0.4);
}

/* 3. Logged-In User Info in Header */
.checkout-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.checkout-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 50px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-surface);
}

.user-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.user-logout-btn:hover {
    color: #F96565;
}

/* 4. REVISED Subtotal & Inline Currency Switcher */
.subtotal {
    align-items: center; /* Changed from baseline to center */
    margin-bottom: 1.5rem; /* Added more space below */
}

.subtotal__price-container {
    display: flex;
    align-items: baseline; /* Aligns the bottom of the large price with the switcher text */
    gap: 0.5rem;
}

.subtotal__price {
    font-size: 1.8rem; /* Made price even more prominent */
}

.currency-switcher {
    position: relative;
    /* No margin needed as gap is handled by the parent container */
}

.currency-switcher__button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem; /* Slightly smaller to feel secondary to the price */
    font-weight: 500;
    color: var(--color-text-muted);
    /* Removed background and border for a cleaner look */
    background: none;
    border: none;
    border-radius: var(--border-radius-small);
    transition: all var(--transition-fast);
}

.currency-switcher__button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}

.currency-switcher__button svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-fast);
}

.currency-switcher__dropdown {
    position: absolute;
    bottom: calc(100% + 0.5rem); /* CHANGED: Positions the dropdown ABOVE the button */
    right: 0;
    width: 120px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    padding: 0.5rem;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* CHANGED: Animates from slightly below its final position */
    transition: all var(--transition-fast);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.3); /* Optional: Changed to a negative Y offset for the shadow */
}

.currency-switcher__dropdown.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.currency-switcher__dropdown li a {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-small);
    color: var(--color-text-muted);
    text-align: center;
}



/* --- FEATURE PREVIEW GIF HOVER FIX --- */

/* 1. The Badge (Top Right) - BOLDER & THEMED */
.feature-highlight-card {
    position: relative; 
    z-index: 5; /* Base z-index */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.hover-preview-badge {
    position: absolute;
    top: -12px;
    right: 15px;
    background: var(--color-accent-primary);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 0.7rem;
    padding: 4px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(238, 0, 255, 0.4);
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 10;
    transition: background 0.3s ease;
}

/* Dim badge while GIF is still loading */
[data-preview-ready="false"] .hover-preview-badge {
    background: var(--color-text-muted);
    box-shadow: none;
}

/* 2. The Dark Overlay */
#gif-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9990; /* High, but below the active card */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none; 
    backdrop-filter: blur(4px);
}

/* 3. The Active Card (Must pop ABOVE the overlay) */
.feature-highlight-card.is-previewing {
    z-index: 9995 !important;
    background: var(--color-surface);
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#gif-preview-image,
#webm-preview-video {
    position: fixed !important;
    z-index: 999992 !important;
    width: 600px;
    height: auto;
    max-height: 350px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    border: 2px solid var(--color-border);

    transform: translateY(-50%);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    object-fit: cover;
    pointer-events: none;
    background: #111;
    display: block;
}

/* Hide on mobile */
@media (max-width: 900px) {
    #gif-preview-image, #webm-preview-video, #gif-preview-overlay, .hover-preview-badge {
        display: none !important;
    }
}


.currency-switcher__dropdown li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}

/* ---
   WELCOME COUPON POPUP
   --- */

@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --glow-opacity {
    syntax: '<number>';
    initial-value: 0.4;
    inherits: false;
}

.coupon-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.coupon-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.coupon-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85) translateY(30px);
    z-index: 9999;
    width: 90%;
    max-width: 600px;
    border-radius: var(--border-radius-large);
    padding: 3px;
    background: conic-gradient(
        from var(--border-angle),
        var(--color-accent-primary),
        var(--color-accent-secondary),
        #3d00ff,
        #ff00c1,
        var(--color-accent-primary)
    );
    animation: border-spin 3s linear infinite, glow-pulse 2s ease-in-out infinite alternate;
    box-shadow: 0 0 40px rgba(238, 0, 255, 0.15), 0 0 80px rgba(95, 0, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.6s ease,
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.coupon-popup.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1) translateY(0);
}

@keyframes border-spin {
    to { --border-angle: 360deg; }
}

@keyframes glow-pulse {
    from { box-shadow: 0 0 40px rgba(238, 0, 255, 0.15), 0 0 80px rgba(95, 0, 255, 0.08); }
    to   { box-shadow: 0 0 60px rgba(238, 0, 255, 0.3), 0 0 120px rgba(95, 0, 255, 0.15); }
}

.coupon-inner {
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: calc(var(--border-radius-large) - 3px);
    padding: 2.5rem 2.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}

/* Subtle inner glow */
.coupon-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(238, 0, 255, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.coupon-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-muted);
    font-size: 14px;
    z-index: 10;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    opacity: 0;
    animation: coupon-fade-in 0.4s ease forwards 1.2s;
}

.coupon-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text);
    transform: rotate(90deg);
}

/* --- PERCENTAGE DISPLAY (left side) --- */
.coupon-percentage-display {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
    position: relative;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.coupon-popup.is-visible .coupon-percentage-display {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.3s;
}

.coupon-percent-number {
    font-size: clamp(3.5rem, 10vw, 5.5rem);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(180deg, #fff 0%, var(--color-accent-primary) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

.coupon-percent-sign {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    background: linear-gradient(180deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    align-self: flex-start;
    margin-top: 0.3rem;
}

.coupon-percent-off {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.4s ease;
    transition-delay: 1.4s;
}

.coupon-popup.is-visible .coupon-percent-off {
    opacity: 1;
}

.coupon-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(
        180deg,
        transparent,
        var(--color-accent-primary) 30%,
        var(--color-accent-secondary) 70%,
        transparent
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: 0.5s;
}

.coupon-popup.is-visible .coupon-divider {
    opacity: 0.5;
}

/* --- DETAILS (right side) --- */
.coupon-details {
    flex: 1;
    min-width: 0;
}

.coupon-eyebrow {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--color-accent-primary);
    margin-bottom: 0.4rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 0.5s;
}

.coupon-popup.is-visible .coupon-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.coupon-heading {
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: 0.4rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 0.65s;
}

.coupon-popup.is-visible .coupon-heading {
    opacity: 1;
    transform: translateY(0);
}

.coupon-subtext {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 0.8s;
}

.coupon-popup.is-visible .coupon-subtext {
    opacity: 1;
    transform: translateY(0);
}

.coupon-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: 0.95s;
}

.coupon-popup.is-visible .coupon-code-row {
    opacity: 1;
    transform: translateY(0);
}

.coupon-code {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: var(--border-radius-small);
    background: rgba(238, 0, 255, 0.08);
    border: 1px dashed rgba(238, 0, 255, 0.35);
    color: #fff;
    user-select: all;
    white-space: nowrap;
}

.coupon-copy-btn {
    padding: 9px 18px;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.coupon-copy-btn:hover {
    background: rgba(238, 0, 255, 0.15);
    border-color: var(--color-accent-primary);
    color: #fff;
    transform: translateY(-1px);
}

.coupon-copy-btn.copied {
    background: linear-gradient(135deg, rgba(238, 0, 255, 0.3), rgba(95, 0, 255, 0.3));
    border-color: var(--color-accent-primary);
    color: #fff;
}

/* Staggered fade-in helper */
@keyframes coupon-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Mobile layout */
@media (max-width: 520px) {
    .coupon-inner {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 1.2rem;
    }

    .coupon-percentage-display {
        justify-content: center;
    }

    .coupon-percent-off {
        bottom: -6px;
    }

    .coupon-divider {
        width: 80%;
        height: 1px;
        align-self: center;
        background: linear-gradient(
            90deg,
            transparent,
            var(--color-accent-primary) 30%,
            var(--color-accent-secondary) 70%,
            transparent
        );
    }

    .coupon-code-row {
        justify-content: center;
        flex-wrap: wrap;
    }
}