/**
 * =============================================================================
 * GameVault Enterprise E-Commerce Platform
 * File: assets/css/main.css
 * Purpose: Complete gaming premium theme - design tokens, components, animations
 * Author: GameVault Dev Team
 * =============================================================================
 */

/* =============================================================================
   DESIGN TOKENS — Change here to update the entire site
   ============================================================================= */
:root {
  /* ---- Color Palette ---- */
  --color-primary:        #E63946;   /* Signature gaming red */
  --color-primary-dark:   #b32030;
  --color-primary-light:  #ff6b7a;
  --color-primary-glow:   rgba(230, 57, 70, 0.35);

  --color-secondary:      #ffffff;
  --color-accent:         #ff4d5e;

  --color-bg:             #07070f;   /* Near-black gaming background */
  --color-bg-elevated:    #0d0d1a;
  --color-surface:        #111120;
  --color-surface-2:      #161628;
  --color-surface-3:      #1e1e36;

  --color-border:         rgba(255,255,255,0.08);
  --color-border-accent:  rgba(230,57,70,0.4);

  --color-text:           #e8e8f0;
  --color-text-muted:     #8888aa;
  --color-text-dim:       #55556a;

  --color-success:        #22c55e;
  --color-success-bg:     rgba(34,197,94,0.12);
  --color-error:          #ef4444;
  --color-error-bg:       rgba(239,68,68,0.12);
  --color-warning:        #f59e0b;
  --color-warning-bg:     rgba(245,158,11,0.12);
  --color-info:           #3b82f6;
  --color-info-bg:        rgba(59,130,246,0.12);
  

  /* ---- Glow Effects ---- */
  --glow-primary:    0 0 20px rgba(230,57,70,0.5), 0 0 60px rgba(230,57,70,0.2);
  --glow-soft:       0 0 40px rgba(230,57,70,0.15);
  --glow-card:       0 8px 40px rgba(0,0,0,0.6);

  /* ---- Typography ---- */
  --font-display:   'Rajdhani', 'Barlow Condensed', system-ui, sans-serif;
  --font-body:      'Inter', 'DM Sans', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  900;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Border Radius ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
  --shadow-xl:  0 16px 60px rgba(0,0,0,0.7);

  /* ---- Transitions ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ---- Z-Index Scale ---- */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-top:      999;

  /* ---- Breakpoints (for reference in JS) ---- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ---- Layout ---- */
  --container-max:  1320px;
  --container-pad:  clamp(16px, 4vw, 48px);
  --nav-height:     72px;
  --bottom-nav-h:   64px;
}

/* =============================================================================
   RESET & BASE
   ============================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-secondary);
  letter-spacing: 0.02em;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-smooth);
}
a:hover { color: var(--color-primary-light); }

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

button { cursor: pointer; font-family: inherit; }

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   LAYOUT
   ============================================================================= */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--space-16); }
.section-sm { padding-block: var(--space-10); }
.section-lg { padding-block: var(--space-24); }

.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.grid-6  { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }

.flex    { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2   { gap: var(--space-2); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.gap-6   { gap: var(--space-6); }


/* =============================================================================
   LOADING SCREEN — Premium 3D Gaming
   ============================================================================= */
#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: var(--z-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration-slower) var(--ease-smooth),
              visibility var(--duration-slower);
}

#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-canvas-wrap {
  position: relative;
  width: 200px;
  height: 200px;
}

.loader-logo {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  letter-spacing: 4px;
  color: var(--color-secondary);
  margin-top: var(--space-6);
}

.loader-logo span {
  color: var(--color-primary);
  text-shadow: var(--glow-primary);
}

.loader-bar {
  width: 240px;
  height: 3px;
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
  margin-top: var(--space-8);
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  border-radius: var(--radius-full);
  width: 0;
  animation: loaderProgress 2s var(--ease-smooth) forwards;
  box-shadow: 0 0 12px var(--color-primary-glow);
}

@keyframes loaderProgress {
  0%   { width: 0; }
  30%  { width: 45%; }
  70%  { width: 75%; }
  90%  { width: 90%; }
  100% { width: 100%; }
}

.loader-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* 3D rotating cube loader */
.cube-3d {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCube 3s linear infinite;
}

.cube-3d .face {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-primary);
  background: rgba(230, 57, 70, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.cube-3d .front  { transform: translateZ(40px); }
.cube-3d .back   { transform: rotateY(180deg) translateZ(40px); }
.cube-3d .left   { transform: rotateY(-90deg) translateZ(40px); }
.cube-3d .right  { transform: rotateY(90deg) translateZ(40px); }
.cube-3d .top    { transform: rotateX(90deg) translateZ(40px); }
.cube-3d .bottom { transform: rotateX(-90deg) translateZ(40px); }

@keyframes rotateCube {
  0%   { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* =============================================================================
   NAVIGATION
   ============================================================================= */
#navbar {
  position: fixed;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
  background: rgba(7, 7, 15, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

#navbar.scrolled {
  background: rgba(7, 7, 15, 0.97);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-6);
}

/* Logo */
.nav-logo {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: 2px;
  color: var(--color-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-logo span { color: var(--color-primary); text-shadow: var(--glow-primary); }

/* Search bar */
.nav-search {
  flex: 1;
  max-width: 560px;
  position: relative;
}

.nav-search-input {
  width: 100%;
  height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0 var(--space-4) 0 var(--space-12);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.nav-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.nav-search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.icon-wrap {
    position: relative;
    display: inline-flex;
    line-height: 1;
}

.icon-wrap .icon {
    display: block;
    font-size: 22px;
}

.header-icon-link .icon-wrap .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--red);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

/* Search suggestions dropdown */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  z-index: var(--z-dropdown);
  display: none;
}

.search-suggestions.visible { display: block; animation: fadeSlideDown var(--duration-fast) var(--ease-out); }

.suggestion-section-title {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--space-3) var(--space-4) var(--space-2);
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.suggestion-item:hover { background: var(--color-surface-3); }

.suggestion-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-surface-3);
}

.suggestion-name { font-size: var(--text-sm); color: var(--color-text); }
.suggestion-price { font-size: var(--text-xs); color: var(--color-primary); margin-top: 2px; }

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nav-action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: all var(--duration-fast) var(--ease-smooth);
  text-decoration: none;
}

.nav-action-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-glow);
  transform: translateY(-2px);
}

.nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: var(--weight-bold);
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: var(--glow-primary);
  animation: badgePop 0.3s var(--ease-spring);
}

@keyframes badgePop {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

/* Nav categories / mega menu trigger */
.nav-categories-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-4);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all var(--duration-fast) var(--ease-smooth);
  box-shadow: var(--glow-soft);
  white-space: nowrap;
}

.nav-categories-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--glow-primary);
}

.nav-item-flyout {
    position: relative;
}

/* Re-skinned to match .nav-dropdown exactly: same background, border,
   border-top accent, shadow, and fade/slide transition. */
.nav-flyout {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--red);
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
/* Hover only — no .open class needed on desktop. Hovering anywhere inside
   .nav-item-flyout (button or the flyout itself) keeps it visible, so
   there's no dead gap between the trigger and the menu. */
.nav-item-flyout:hover .nav-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Level 2 — left column of PS generations (typography matches .nav-dropdown a) */
.nav-flyout-left {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    border-right: 1px solid var(--border);
    padding: 6px 0;
}
.nav-flyout-left-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
.nav-flyout-left-item a {
    text-decoration: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    flex: 1;
}
.nav-flyout-left-item .nav-flyout-arrow {
    font-size: 13px;
    margin-left: 8px;
    opacity: 0.5;
}
/* Hover-only highlight — no lingering "selected" state after the mouse leaves */
.nav-flyout-left-item:hover {
    background: var(--gray-light);
    color: var(--red);
}

.nav-flyout-right {
    position: relative;
    min-width: 200px;
    display: none;
}
.nav-flyout-right:has(.nav-flyout-panel.hover-open) {
    display: block;
}

.nav-flyout-panel {
    display: none;
    flex-direction: column;
    padding: 6px 0;
}
.nav-flyout-panel.hover-open {
    display: flex;
}
.nav-flyout-panel a {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
.nav-flyout-panel a:hover {
    background: var(--gray-light);
    color: var(--red);
}

@media (max-width: 900px) {
    /* PlayStation flyout, restyled to be visually identical to .nav-dropdown's
       mobile accordion — same background, border, padding, colors, hover. */
    .nav-flyout {
        display: none;
        flex-direction: column;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid rgba(255,255,255,.12);
        width: 100%;
        background: rgba(255,255,255,.03);
    }
    .nav-item-flyout:hover .nav-flyout { display: none; }
    .nav-item-flyout.open .nav-flyout { display: flex; }

    /* display:contents lets the left items and their matching panels become
       direct children of .nav-flyout, so `order` below can interleave them —
       PS5's row followed immediately by PS5's own sub-list, then PS4, etc. —
       without touching the HTML structure. */
    .nav-flyout-left,
    .nav-flyout-right {
        display: contents;
    }

    .nav-flyout-left-item {
        color: var(--white);
        padding: 12px 24px;
        border-right: none;
        min-width: 0;
        margin: 0;
    }
    .nav-flyout-left-item:hover,
    .nav-flyout-left-item.mobile-active {
        background: rgba(255,255,255,.08);
        color: var(--white);
    }

    .nav-flyout-right { min-width: 0; }
    .nav-flyout-panel {
        display: none;
        flex-direction: column;
        padding-left: 24px;
        background: rgba(255,255,255,.02);
        border-top: 1px solid rgba(255,255,255,.08);
        margin: 0;
    }
    .nav-flyout-panel.mobile-open { display: flex; }
    .nav-flyout-panel a {
        color: var(--white);
        padding: 12px 32px;
    }
    .nav-flyout-panel a:hover {
        background: rgba(255,255,255,.08);
        color: var(--white);
    }

    /* Interleave order: item 1, its panel, item 2, its panel, etc. */
    .nav-flyout-left-item:nth-child(1) { order: 1; }
    .nav-flyout-panel:nth-child(1)     { order: 2; }
    .nav-flyout-left-item:nth-child(2) { order: 3; }
    .nav-flyout-panel:nth-child(2)     { order: 4; }
    .nav-flyout-left-item:nth-child(3) { order: 5; }
    .nav-flyout-panel:nth-child(3)     { order: 6; }
    .nav-flyout-left-item:nth-child(4) { order: 7; }
    .nav-flyout-panel:nth-child(4)     { order: 8; }
    .nav-flyout-left-item:nth-child(5) { order: 9; }
    .nav-flyout-panel:nth-child(5)     { order: 10; }
    .nav-flyout-left-item:nth-child(6) { order: 11; }
    .nav-flyout-panel:nth-child(6)     { order: 12; }
}

/* =============================================================================
   (2) main.css — paste this block anywhere near the existing
   "BOTTOM NAVIGATION (Mobile)" section. Uses ONLY variables already defined
   in :root and in body.gv-storefront — no new colors, no new custom properties.
   ============================================================================= */

body.gv-storefront .bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    background: var(--white);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.08);
    padding-bottom: env(safe-area-inset-bottom);
}

body.gv-storefront .bottom-nav-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    height: var(--bottom-nav-h);
    position: relative;
}

body.gv-storefront .bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    color: var(--muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-smooth);
}

body.gv-storefront .bottom-nav-item:active {
    transform: scale(0.94);
}

body.gv-storefront .bottom-nav-item .bottom-nav-icon {
    font-size: 21px;
    line-height: 1;
    transition: transform var(--duration-fast) var(--ease-spring);
}

body.gv-storefront .bottom-nav-item .bottom-nav-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.gv-storefront .bottom-nav-item.active {
    color: var(--red);
}

body.gv-storefront .bottom-nav-item.active .bottom-nav-icon {
    transform: translateY(-2px) scale(1.08);
}

body.gv-storefront .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    background: var(--red);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}


/* Elevated center Cart button */
body.gv-storefront .bottom-nav-item.bottom-nav-cart {
    color: var(--muted);
}

body.gv-storefront .bottom-nav-cart-circle {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--red);
    border: 3px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(228,0,27,0.35);
    transition: transform var(--duration-fast) var(--ease-spring);
}

body.gv-storefront .bottom-nav-cart .bottom-nav-icon {
    color: var(--white);
    font-size: 22px;
}

body.gv-storefront .bottom-nav-cart .bottom-nav-label {
    margin-top: 26px;
}

body.gv-storefront .bottom-nav-cart:active .bottom-nav-cart-circle,
body.gv-storefront .bottom-nav-cart.active .bottom-nav-cart-circle {
    transform: translateX(-50%) scale(1.08);
}

body.gv-storefront .bottom-nav-cart.active .bottom-nav-label {
    color: var(--red);
}

body.gv-storefront .bottom-nav-cart.active::before {
    display: none;
}

body.gv-storefront .bottom-nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--black);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--white);
}

body.gv-storefront .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

body.gv-storefront .brand-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

body.gv-storefront .brand-text {
    display: inline-block;
    white-space: nowrap;
    font-family: 'Bangers', var(--font);
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 1px;
    line-height: 1;
    color: var(--white);
    -webkit-text-stroke: 3px var(--black);
    paint-order: stroke fill;
}

@media (max-width: 900px) {
    body.gv-storefront .brand-logo {
        height: 42px;
    }
    body.gv-storefront .brand-text {
        font-size: 24px;
        -webkit-text-stroke: 2.5px var(--black);
    }
}

/* Visibility (mobile only) + content/FAB spacing so nothing is hidden behind it */
@media (max-width: 991px) {
    body.gv-storefront .bottom-nav {
        display: block;
        animation: bottomNavIn var(--duration-slow) var(--ease-out);
    }

    body.gv-storefront {
        padding-bottom: calc(var(--bottom-nav-h) + 20px + env(safe-area-inset-bottom));
    }

    body.gv-storefront .fab-whatsapp {
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--floating-btn-gap) + 10px);
    }

    body.gv-storefront .scroll-top-btn {
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--floating-btn-size) + (var(--floating-btn-gap) * 2) + 10px);
    }
}

@media (min-width: 992px) {
    body.gv-storefront .bottom-nav {
        display: none !important;
    }
}

@keyframes bottomNavIn {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}


/* =============================================================================
   PRODUCT SLIDER CARDS — used by render_product_slider() on index.php
   (Featured / New Arrivals / On Sale / Best Sellers / Accessories / etc.)
   These classes (slider-pc-card, sp-*) were missing from the stylesheet,
   which is why badges/text were rendering unstyled and stacked.
   ============================================================================= */
.slider-pc-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 auto;
    scroll-snap-align: start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow .2s, transform .2s;
}

.slider-pc-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.slider-pc-card,
.slider-pc-card--lg {
    width: 210px;
}

.slider-pc-card img,
.slider-pc-card--lg img {
    height: 180px;
}

@media (max-width: 640px) {
    .slider-pc-card,
    .slider-pc-card--lg {
        width: clamp(118px, 38vw, 170px);
    }
    .slider-pc-card img,
    .slider-pc-card--lg img {
        height: clamp(100px, 28vw, 150px);
    }
}

.section {
    padding-top: 8px;
}

.slider-pc-card img {
    height: 150px;
    object-fit: contain;
    padding: 14px;
    background: #fff;
    display: block;
}

.sp-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2;
    pointer-events: none;
}

.sp-badge-sale {
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 3px;
    text-transform: uppercase;
}

.sp-badge-cond {
    background: var(--black);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 3px;
    text-transform: capitalize;
}

.slider-pc-card .sp-body {
    padding: 12px 14px 16px;
    border-top: 1px solid var(--border);
}

.slider-pc-card .sp-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    height: 36px;
    overflow: hidden;
    color: var(--text);
}

.slider-pc-card .sp-price {
    color: var(--red);
    font-weight: 800;
    font-size: 15px;
}

.slider-pc-card .sp-strike {
    color: var(--muted);
    text-decoration: line-through;
    font-size: 12px;
    margin-left: 6px;
}

.slider-pc-card .sp-btn {
    display: block;
    margin-top: 10px;
    text-align: center;
    background: var(--black);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 9px;
    border-radius: 5px;
}

.slider-pc-card .sp-btn:hover { background: var(--red); }

@media (max-width: 480px) {
    .slider-pc-card,
    .slider-pc-card--lg {
        width: 160px;
    }
    .slider-pc-card img,
    .slider-pc-card--lg img {
        height: 140px;
    }
}



.mini-pc-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 auto;
    width: 150px;                 /* same width as .cat-icon-card — "everything the same small size" */
    scroll-snap-align: start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow .2s, transform .2s;
    text-align: center;
}

.mini-pc-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.mini-pc-card img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    padding: 10px;
    background: #fff;
}

.mini-pc-card .mp-price {
    color: var(--red);
    font-weight: 800;
    font-size: 14px;
    padding: 0 8px;
}

.mini-pc-card .mp-btn {
    display: block;
    margin: 8px;
    text-align: center;
    background: var(--black);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 7px;
    border-radius: 5px;
}

.mini-pc-card .mp-btn:hover { background: var(--red); }

@media (max-width: 480px) {
    .mini-pc-card { width: 120px; }
    .mini-pc-card img { height: 100px; }
}


/* =============================================================================
   MEGA MENU
   ============================================================================= */
.mega-menu {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 2px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--duration-normal) var(--ease-smooth);
  padding: var(--space-8) 0;
}

.mega-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}

.mega-menu-col-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-3);
}

.mega-menu-link {
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.mega-menu-link:hover {
  color: var(--color-primary);
  padding-left: var(--space-2);
}

/* =============================================================================
   WHATSAPP BANNER (TOP)
   ============================================================================= */
.whatsapp-banner {
  background: linear-gradient(135deg, #1a5c2e, #0f3d1e);
  border-bottom: 1px solid rgba(34, 197, 94, 0.3);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.whatsapp-banner a {
  color: var(--color-success);
  font-weight: var(--weight-bold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.whatsapp-banner a:hover { text-decoration: underline; }

/* =============================================================================
   BUTTONS
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-smooth);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Ripple effect */
.btn::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s, opacity 0.4s;
  opacity: 0;
}

.btn:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--glow-soft);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--glow-primary);
  color: #fff;
}

.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--glow-soft);
}

.btn-ghost {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-ghost:hover {
  background: var(--color-surface-3);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-whatsapp {
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp:hover {
  background: #1dac54;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
  color: #fff;
}

.btn-sm  { height: 36px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.btn-lg  { height: 56px; padding: 0 var(--space-8); font-size: var(--text-base); }
.btn-xl  { height: 64px; padding: 0 var(--space-10); font-size: var(--text-lg); }
.btn-full { width: 100%; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* =============================================================================
   PRODUCT CARDS
   ============================================================================= */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: all var(--duration-normal) var(--ease-smooth);
  transform-style: preserve-3d;
  cursor: pointer;
}

.product-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: 0 20px 60px rgba(230,57,70,0.15), 0 8px 30px rgba(0,0,0,0.5);
  transform: translateY(-6px);
}

/* 3D tilt effect — applied via JS */
.product-card.tilt { transform-style: preserve-3d; }

.product-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface-2);
}

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

.product-card:hover .product-card-image img {
  transform: scale(1.08);
}

.product-card-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: var(--z-above);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-sale     { background: var(--color-primary); color: #fff; }
.badge-new      { background: var(--color-info); color: #fff; }
.badge-featured { background: var(--color-warning); color: #000; }
.badge-pre-order { background: var(--color-surface-3); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge-used     { background: rgba(255,255,255,0.1); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge-refurb   { background: rgba(34,197,94,0.15); color: var(--color-success); border: 1px solid rgba(34,197,94,0.3); }

/* Quick actions overlay */
.product-card-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(7,7,15,0.95) 0%, transparent 100%);
  padding: var(--space-4) var(--space-3) var(--space-3);
  display: flex;
  gap: var(--space-2);
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-spring);
}

.product-card:hover .product-card-actions {
  transform: translateY(0);
}

/* Wishlist button */
.btn-wishlist {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  background: rgba(7,7,15,0.7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 16px;
  transition: all var(--duration-fast);
  backdrop-filter: blur(4px);
  z-index: var(--z-above);
}

.btn-wishlist:hover,
.btn-wishlist.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: var(--glow-soft);
}

/* Card body */
.product-card-body { padding: var(--space-4); }

.product-card-brand {
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--weight-semi);
}

.product-card-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
  margin-top: var(--space-1);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.stars {
  display: flex;
  gap: 2px;
  color: var(--color-warning);
  font-size: 12px;
}

.rating-count { font-size: var(--text-xs); color: var(--color-text-muted); }

.product-card-pricing {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.price-current {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--color-secondary);
}

.price-original {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  text-decoration: line-through;
}

.price-off {
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: var(--weight-bold);
  background: var(--color-success-bg);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

/* Product grid layouts */
.products-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5); }
.products-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.products-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

/* =============================================================================
   HERO SECTION
   ============================================================================= */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-bg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(230,57,70,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(230,57,70,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--color-primary);
  animation: floatParticle linear infinite;
  opacity: 0;
}

@keyframes floatParticle {
  0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100px) translateX(40px); opacity: 0; }
}

.hero-content {
  position: relative;
  z-index: var(--z-above);
  max-width: 660px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
  background: rgba(230,57,70,0.08);
  backdrop-filter: blur(8px);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: var(--weight-black);
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-6);
}

.hero-title .accent {
  color: var(--color-primary);
  display: block;
  text-shadow: var(--glow-primary);
}

.hero-desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 520px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.hero-stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  color: var(--color-primary);
}

.hero-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---- Hero slider (auto-playing carousel; falls back to 3 static demo slides) ---- */
.hero-slider { position: relative; overflow: hidden; }
.hero-banner-carousel { border-radius: 0; background: transparent; }
.hero-banner-carousel .banner-slide.hero-slide {
    position: relative;
    padding: 64px 24px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, #2a0005 0%, #40000a 55%, #2a0005 100%);
    background-size: cover;
    background-position: center;
}
.hero-slide-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 20%, rgba(255,30,60,0.25), transparent); }
.hero-slide-overlay-default.hero-slide-overlay-alt { background: radial-gradient(ellipse 60% 60% at 50% 20%, rgba(209,0,45,0.28), transparent), linear-gradient(135deg, #2a0005 0%, #5a0010 55%, #2a0005 100%); }
.hero-slide-overlay-default.hero-slide-overlay-alt2 { background: radial-gradient(ellipse 60% 60% at 50% 20%, rgba(146,0,27,0.26), transparent), linear-gradient(135deg, #2a0005 0%, #750015 55%, #2a0005 100%); }
/* When an admin uploads a real banner image, darken it slightly for text legibility */
.hero-banner-carousel .banner-slide.hero-slide[style*="background-image"] .hero-slide-overlay { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.hero-slide-mobile-bg { display: none; }
@media (max-width: 640px) {
    .hero-banner-carousel .banner-slide.hero-slide:has(.hero-slide-mobile-bg) { background-image: none !important; }
    .hero-slide-mobile-bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
}
.hero-inner { position: relative; max-width: 900px; margin: 0 auto; z-index: 1; }
.hero-inner h1 { font-size: clamp(30px, 6vw, 58px); font-weight: 900; color: #fff; line-height: 1.05; text-shadow: 0 0 30px rgba(228,0,27,0.5); }
.hero-inner .subtitle { display: inline-block; margin-top: 18px; background: #111; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 10px 20px; border-radius: 4px; }
.hero-inner .btn { margin-top: 28px; font-size: 15px; padding: 14px 32px; }
.hero-free-delivery { position: absolute; left: 24px; bottom: 20px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .85; z-index: 2; }
.hero-banner-carousel .banner-nav-btn { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.25); color: #fff; }
.hero-banner-carousel .banner-nav-btn:hover { background: var(--red); border-color: var(--red); }

/* ---- Running promotional banner strip ---- */
.promo-banner-section { max-width: 1280px; margin: 24px auto 0; padding: 0 24px; }
.promo-banner-carousel { border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.promo-banner-slide { display: none; position: relative; }
.promo-banner-slide.active { display: block; }
.promo-banner-slide img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.promo-banner-caption { position: absolute; left: 24px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.promo-banner-title { color: #fff; font-size: 20px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.promo-banner-cta { align-self: flex-start; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; padding: 8px 16px; border-radius: 4px; letter-spacing: .03em; }

/* ---- Promo grid (6 cards) ---- */
.promo-section { padding: 40px 24px; max-width: 1280px; margin: 0 auto; }
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promo-card { position: relative; background: var(--gray-light); border: 1px solid var(--border); border-radius: 10px; padding: 24px; min-height: 150px; overflow: hidden; }
.promo-card h3 { 
    font-size: 20px; 
    font-weight: 900; 
    margin-bottom: 6px; 
    color: var(--text, #111);
}
.promo-card.dark h3 { 
    color: #fff; 
}
.promo-card p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.promo-card .promo-btn { position: absolute; right: 16px; bottom: 16px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 8px 16px; border-radius: 4px; letter-spacing: .03em; }
.promo-card.dark { background: var(--black); color: #fff; }
.promo-card.dark p { color: #bbb; }

/* ---- Red delivery strip ---- */
.delivery-strip { background: var(--red); color: #fff; text-align: center; padding: 16px; font-weight: 800; letter-spacing: .1em; font-size: 15px; }

/* ---- Category carousel (horizontal drag/swipe with arrows) ---- */
.cat-icon-section { background: rgba(42,0,5,0.55); padding: 48px 24px; }
.cat-carousel-wrap { position: relative; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 8px; }
.cat-carousel-track.cat-icon-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding: 2px;
    flex: 1;
    min-width: 0;
}
.cat-carousel-track.cat-icon-grid::-webkit-scrollbar { display: none; }
.cat-carousel-track.cat-icon-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.cat-icon-card {
    background: #fff;
    border-radius: 10px;
    padding: 28px 14px;
    text-align: center;
    transition: box-shadow .2s, transform .2s;
    flex: 0 0 auto;
    width: 150px;
    scroll-snap-align: start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cat-icon-card:hover { box-shadow: inset 0 0 0 2px var(--red), 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.cat-icon-card .icon { font-size: 34px; margin-bottom: 10px; }
.cat-icon-card .name { font-size: 13px; font-weight: 700; }

.cat-carousel-prev, .cat-carousel-next {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all .15s;
    z-index: 2;
}
.cat-carousel-prev:hover, .cat-carousel-next:hover { background: var(--red); color: #fff; border-color: var(--red); }
.cat-carousel-prev.is-disabled, .cat-carousel-next.is-disabled { opacity: .35; }

.cat-icon-card .icon-image {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
}
.cat-icon-card .icon-image img {
    max-height: 90px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .2s ease;
}
.cat-icon-card:hover .icon-image img {
    transform: scale(1.05);
}

.cat-icon-section > .cat-icon-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Platform row — even grid, no scroll arrows needed for 6 fixed items */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px;
}

/* Hide slider arrows on mobile — swipe/drag replaces them, like gamenation.in */
@media (max-width: 768px) {
    .cat-carousel-prev,
    .cat-carousel-next {
        display: none !important;
    }

    .cat-carousel-wrap {
        gap: 0;
    }

    .cat-carousel-track.cat-icon-grid {
        padding: 2px 4px;
    }
}

@media (max-width: 768px) {
    .platform-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 20px 20px;
    }
}

@media (max-width: 480px) {
    .platform-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 12px;
    min-height: 168px;
    border-radius: 18px;
    background: #ffffff;
    border: 2px solid transparent;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: transform 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease), box-shadow 0.3s var(--ease, ease);
}

.platform-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    filter: none;
    transition: filter 0.3s var(--ease, ease);
}

.platform-name {
    font-family: var(--mono, inherit);
    font-size: 1rem;
    font-weight: 700;
    color: #2b2b33; /* dark gray on white card, per spec */
    text-align: center;
}

/* Red glow/outline highlight on hover */
.platform-card:hover {
    transform: translateY(-4px);
    border-color: #e63946;
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.15), 0 10px 24px rgba(230, 57, 70, 0.25);
}

.platform-card:hover .platform-logo {
    filter: none;
}

.hero-slider .hero-banner-carousel {
    border-radius: 0;
    overflow: hidden;
}

@media (max-width: 640px) {
    .cat-icon-card .icon-image,
    .cat-icon-card .icon-image img {
        height: 60px;
        max-height: 60px;
    }
}

/* ---- Product rows ---- */
.section { padding: 56px 24px; max-width: 1280px; margin: 0 auto; }
.product-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.product-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-3px); }
.product-card img { width: 100%; height: 150px; object-fit: contain; padding: 14px; background: #fff; }
.product-card .badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; }
.product-card .badge-sale { background: var(--red); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 3px; }
.product-card .badge-cond { background: var(--black); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 3px; }
.product-card .pc-body { padding: 12px 14px 16px; border-top: 1px solid var(--border); }
.product-card .pc-name { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; height: 36px; overflow: hidden; }
.product-card .pc-price-row { margin-bottom: 8px; }
.product-card .pc-price { color: var(--red); font-weight: 800; font-size: 15px; }
.product-card .pc-strike { color: var(--muted); text-decoration: line-through; font-size: 12px; margin-left: 6px; }
.product-card .pc-stock { font-size: 11px; margin-bottom: 8px; font-weight: 600; }
.pc-stock.in { color: #1d8a44; } .pc-stock.out { color: var(--muted); }
.product-card .pc-btn { display: block; text-align: center; background: var(--black); color: #fff; font-size: 12px; font-weight: 700; padding: 9px; border-radius: 5px; }
.product-card .pc-btn:hover { background: var(--red); }
.empty-note { color: rgba(255,255,255,0.65); padding: 24px 0; }

/* ---- Testimonials ---- */
.testimonial-section { background: rgba(42,0,5,0.55); padding: 56px 24px; text-align: center; }
.testimonial-section h2 { 
    font-size: 22px; 
    font-weight: 700; 
    margin-bottom: 24px; 
    color: #fff;
}
.testimonial-quote { max-width: 640px; margin: 0 auto; font-size: 16px; font-style: italic; color: rgba(255,255,255,0.88); }
.testimonial-name { margin-top: 14px; font-weight: 700; font-size: 14px; color: #fff; }

.about-blurb { text-align: center; max-width: 820px; margin: 0 auto; padding: 48px 24px; color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.9; }
.about-blurb h2 { color: #fff; font-size: 18px; margin-bottom: 16px; }

@media (max-width: 900px) {
    .promo-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-icon-card { width: 128px; }
    .product-row { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   SECTION TITLES
   ============================================================================= */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  gap: var(--space-4);
}


/* Consolidated: was 6 separate/overlapping .section-title declarations
   (an old design-token version, a redesign version, and 2 mobile
   overrides where the 768px rule always silently beat the 640px one for
   font-size) stacked across this file. Merged into one authoritative rule
   with the same 2 mobile overrides — identical final computed result as
   before: 30px/900/centered/white on desktop, 24px on tablet+mobile,
   with margin-bottom tightening from 24px to 16px under 640px. No more
   conflicting duplicates. */
.section-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-black);
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: 0.5px;
    color: #fff;
}

.section-title .accent { color: var(--color-primary); }

@media (max-width: 768px) {
    .section-title { font-size: var(--text-2xl); }
}

@media (max-width: 640px) {
    .section-title { margin-bottom: 16px; }
}

/* =============================================================================
   FILTER SIDEBAR
   ============================================================================= */
.filter-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  max-height: calc(100vh - var(--nav-height) - var(--space-8));
  overflow-y: auto;
}

.filter-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.filter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  cursor: pointer;
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  color: var(--color-secondary);
  transition: background var(--duration-fast);
}

.filter-group-header:hover { background: var(--color-surface-2); }

.filter-group-body {
  padding: 0 var(--space-4) var(--space-4);
  display: none;
}

.filter-group.open .filter-group-body { display: block; }

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.filter-checkbox:hover { color: var(--color-text); }

.filter-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.filter-count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* Price range slider */
.price-range { padding: var(--space-4) 0; }

.price-inputs {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.price-input {
  flex: 1;
  height: 40px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.filter-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.filter-cat-row a { flex: 1; }
.filter-cat-toggle {
    background: none;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--muted);
    flex-shrink: 0;
}
.filter-cat-toggle i { transition: transform .2s ease; display: block; }
.filter-cat-toggle.open i { transform: rotate(180deg); }
.filter-cat-children {
    display: none;
}
.filter-cat-children.open {
    display: block;
}

/* =============================================================================
   FORM ELEMENTS
   ============================================================================= */
.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-label .required { color: var(--color-primary); }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 48px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.form-textarea {
  height: auto;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  min-height: 120px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.form-input::placeholder { color: var(--color-text-dim); }

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.form-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* OTP input */
.otp-inputs {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.otp-input {
  width: 56px;
  height: 64px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
  font-family: var(--font-mono);
  transition: all var(--duration-fast);
}

.otp-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--glow-soft);
  outline: none;
}

.otp-input.filled { border-color: var(--color-primary); }

/* =============================================================================
   CARDS & GLASS MORPHISM
   ============================================================================= */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.card-glass {
  background: rgba(17, 17, 32, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.card-glow {
  position: relative;
}

.card-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-primary-glow), transparent, var(--color-primary-glow));
  z-index: var(--z-below);
  opacity: 0;
  transition: opacity var(--duration-normal);
}

.card-glow:hover::before { opacity: 1; }

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */
#toast-container {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + var(--space-4));
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
  max-width: 360px;
}

.toast {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-shadow: var(--shadow-xl);
  pointer-events: all;
  animation: toastIn var(--duration-normal) var(--ease-spring);
  border-left-width: 4px;
}

.toast.success { border-left-color: var(--color-success); }
.toast.error   { border-left-color: var(--color-error); }
.toast.warning { border-left-color: var(--color-warning); }
.toast.info    { border-left-color: var(--color-info); }

.toast.removing {
  animation: toastOut var(--duration-normal) var(--ease-in) forwards;
}

@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

@keyframes toastOut {
  to { transform: translateX(120%); opacity: 0; }
}

.toast-icon { font-size: 20px; flex-shrink: 0; }
.toast-body {}
.toast-title { font-weight: var(--weight-semi); font-size: var(--text-sm); color: var(--color-secondary); }
.toast-msg   { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-dim);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: color var(--duration-fast);
}
.toast-close:hover { color: var(--color-text); }

/* =============================================================================
   CART SIDEBAR
   ============================================================================= */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-smooth);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.cart-sidebar.open { transform: translateX(0); }

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal);
}

.cart-overlay.active { opacity: 1; visibility: visible; }

/* =============================================================================
   BOTTOM NAVIGATION (Mobile)
   ============================================================================= */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-h);
  background: rgba(13, 13, 26, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-sticky);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color var(--duration-fast);
  position: relative;
  font-size: 10px;
}

.bottom-nav-item.active {
  color: var(--color-primary);
}

.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--glow-soft);
}

.bottom-nav-icon { font-size: 22px; }

/* =============================================================================
   FLOATING ACTION BUTTONS
   ============================================================================= */
.floating-buttons {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--bottom-nav-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: var(--z-overlay);
}

.fab {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 22px;
  transition: all var(--duration-fast) var(--ease-smooth);
  text-decoration: none;
  animation: fabFloat 3s ease-in-out infinite;
  box-shadow: var(--shadow-md);
  position: relative;
}

.fab:nth-child(2) { animation-delay: 0.5s; }
.fab:nth-child(3) { animation-delay: 1s; }

@keyframes fabFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.fab:hover {
  transform: scale(1.15) !important;
  animation-play-state: paused;
}

.fab-whatsapp { background: #25d366; color: #fff; box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
.fab-call     { background: var(--color-info); color: #fff; box-shadow: 0 4px 20px rgba(59,130,246,0.4); }
.fab-support  { background: var(--color-surface-3); color: var(--color-text); border: 1px solid var(--color-border); }

/* Tooltip for FABs */
.fab::before {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
}

.fab:hover::before { opacity: 1; }

/* =============================================================================
   SCROLL ANIMATIONS
   ============================================================================= */
[data-animate] {
  opacity: 0;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

[data-animate="fade-up"]   { transform: translateY(40px); }
[data-animate="fade-down"] { transform: translateY(-40px); }
[data-animate="fade-left"] { transform: translateX(40px); }
[data-animate="fade-right"]{ transform: translateX(-40px); }
[data-animate="scale-in"]  { transform: scale(0.9); }
[data-animate="zoom-in"]   { transform: scale(0.8); }

[data-animate].animated {
  opacity: 1;
  transform: none;
}

/* Stagger delays for grid children */
[data-stagger] > *:nth-child(1)  { transition-delay: 0ms; }
[data-stagger] > *:nth-child(2)  { transition-delay: 80ms; }
[data-stagger] > *:nth-child(3)  { transition-delay: 160ms; }
[data-stagger] > *:nth-child(4)  { transition-delay: 240ms; }
[data-stagger] > *:nth-child(5)  { transition-delay: 320ms; }
[data-stagger] > *:nth-child(6)  { transition-delay: 400ms; }
[data-stagger] > *:nth-child(n+7){ transition-delay: 480ms; }

/* =============================================================================
   SKELETON LOADING
   ============================================================================= */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-surface-2) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.skeleton-img  { width: 100%; aspect-ratio: 1; }
.skeleton-text { height: 14px; margin: var(--space-2) 0; }
.skeleton-text.sm { width: 60%; }
.skeleton-text.lg { height: 18px; }

/* =============================================================================
   BANNER CAROUSEL
   ============================================================================= */
.banner-carousel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
}

.banner-slide {
  display: none;
  position: relative;
}

.banner-slide.active { display: block; }

.banner-slide img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
}

.banner-controls {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
}

.banner-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.banner-dot.active {
  background: var(--color-primary);
  width: 24px;
  box-shadow: var(--glow-soft);
}

.banner-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(7,7,15,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--duration-fast);
  z-index: var(--z-above);
  font-size: 18px;
}

.banner-nav-btn:hover { background: var(--color-primary); border-color: var(--color-primary); }
.banner-nav-prev { left: var(--space-4); }
.banner-nav-next { right: var(--space-4); }

@media (max-width: 640px) {
  .banner-nav-btn { width: 34px; height: 34px; font-size: 14px; }
  .banner-nav-prev { left: 10px; }
  .banner-nav-next { right: 10px; }
  .banner-controls { bottom: 12px; }
  .banner-dot { width: 6px; height: 6px; }
  .banner-dot.active { width: 18px; }
}

/* =============================================================================
   PAGE TRANSITIONS
   ============================================================================= */
.page-transition {
  animation: pageIn var(--duration-slow) var(--ease-out);
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   EXCHANGE SECTION
   ============================================================================= */
.exchange-banner {
  background: linear-gradient(135deg, #1a0a0a, #2d0505);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.exchange-banner::before {
  content: '🎮';
  position: absolute;
  font-size: 200px;
  opacity: 0.04;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* =============================================================================
   BREADCRUMBS
   ============================================================================= */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-4) 0;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.breadcrumbs a:hover { color: var(--color-primary); }

.breadcrumbs .sep { opacity: 0.4; }
.breadcrumbs .current { color: var(--color-text); }

/* =============================================================================
   MOBILE-ONLY SPACING ALIGNMENT (scaled version of desktop, no redesign)
   ============================================================================= */
@media (max-width: 900px) {
  .main-header .container { gap: 12px; height: 64px; padding: 0 14px; }
  .brand { font-size: 20px; letter-spacing: -0.3px; }
  .brand-logo { width: 38px; height: 38px; }
  .mobile-header-search { padding: 0 14px 12px; }
  .mobile-header-search input { height: 42px; font-size: 13px; }
  .mobile-header-search button { width: 44px; height: 42px; }
  .header-actions { gap: 10px; }
  .header-icon-link { font-size: 10px; gap: 1px; }
  .header-icon-link .icon { font-size: 18px; }
  .category-nav .container { padding: 14px 0; }
  .category-nav-list > .nav-item > a,
  .category-nav-list > .nav-item > button.nav-toplevel { padding: 13px 16px; font-size: 13px; }
  .nav-dropdown a { padding: 11px 16px; font-size: 12.5px; }
  .hero-banner-carousel .banner-slide.hero-slide { padding: 28px 16px 32px; min-height: 360px; }
  .hero-inner { max-width: 640px; }
  .hero-inner h1 { font-size: clamp(24px, 6vw, 38px); }
  .hero-inner .subtitle { margin-top: 12px; padding: 9px 16px; font-size: 12px; }
  .hero-inner .btn { margin-top: 22px; padding: 12px 24px; font-size: 14px; }
  .hero-free-delivery { left: 16px; bottom: 16px; font-size: 11px; }
  .promo-section, .cat-icon-section, .testimonial-section, .section { padding-inline: 16px; }
  .promo-grid { grid-template-columns: 1fr; gap: 12px; }
  .promo-card { padding: 18px; min-height: 140px; }
  .promo-card h3 { font-size: 18px; }
  .cat-icon-section { padding: 32px 16px; }
  .cat-icon-card { width: 120px; padding: 20px 10px; }
  .cat-icon-card .icon { font-size: 28px; margin-bottom: 8px; }
  .cat-icon-card .name { font-size: 12px; }
  .section { padding: 36px 16px; }
  .section-title { margin-bottom: 16px; font-size: 24px; }
  .product-row { gap: 12px; }
  .product-card img { height: 120px; padding: 10px; }
  .product-card .pc-body { padding: 10px 12px 12px; }
  .product-card .pc-name { font-size: 12px; height: 32px; }
  .product-card .pc-btn { font-size: 11px; padding: 8px; }
  .testimonial-section { padding: 36px 16px; }
  .about-blurb { padding: 28px 16px; }
}

@media (max-width: 640px) {

  .hero-free-delivery { position: static; display: block; margin-top: 18px; text-align: center; opacity: 0.9; }
  .promo-banner-slide img { max-height: 160px; }
  .promo-banner-title { font-size: 15px; }
  .section { padding: 32px 14px; }
  .section-title { font-size: 22px; margin-bottom: 14px; }
  .cat-icon-card { width: 108px; padding: 16px 8px; }
  .cat-icon-card .name { font-size: 11.5px; line-height: 1.25; }
  .product-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card .pc-name { height: 34px; }
  .pd-wrap, .cart-wrap, .checkout-wrap, .orders-wrap, .profile-wrap, .search-wrap, .wish-wrap, .about-wrap, .contact-wrap { margin: 20px auto; padding: 0 16px; }
  .contact-hero { margin: 24px auto 4px; padding: 0 16px; }
  .pd-info { padding: 18px 16px 22px; }
  .pd-actions { flex-direction: column; align-items: stretch; }
  .pd-actions .btn, .pd-actions .qty-input { width: 100%; }
  .shop-toolbar { padding: 0 16px; margin-top: 0; }
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* Tablet (768px and below) */
@media (max-width: 1024px) {
  .products-grid-6 { grid-template-columns: repeat(4, 1fr); }
  .mega-menu-grid  { grid-template-columns: repeat(3, 1fr); }
  .filter-sidebar  { width: 240px; }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
  }

  #navbar { display: none; } /* Replaced by mobile nav */

  .products-grid-6,
  .products-grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  .hero-title { font-size: var(--text-4xl); }

  .hero-stats { gap: var(--space-6); }

  /* .section-title mobile size is now handled by the single consolidated
     .section-title rule above (assets/css/main.css, "SECTION TITLES");
     this duplicate removed to avoid a conflicting/duplicate media rule. */

  .filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-smooth);
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    max-height: none;
  }

  .filter-sidebar.open { transform: translateX(0); }

  .mega-menu { padding: var(--space-4) 0; }
  .mega-menu-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-actions { flex-direction: column; align-items: flex-start; }

  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }

  .section { padding-block: var(--space-10); }
}

@media (max-width: 480px) {
  .otp-input { width: 44px; height: 56px; font-size: var(--text-xl); }
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */
.text-primary  { color: var(--color-primary); }
.text-muted    { color: var(--color-text-muted); }
.text-center   { text-align: center; }
.text-sm       { font-size: var(--text-sm); }
.text-xs       { font-size: var(--text-xs); }
.font-display  { font-family: var(--font-display); }
.font-bold     { font-weight: var(--weight-bold); }
.font-black    { font-weight: var(--weight-black); }

.hidden        { display: none !important; }
.invisible     { visibility: hidden; }
.sr-only       { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.divider       { height: 1px; background: var(--color-border); margin: var(--space-6) 0; }
.divider-red   { background: linear-gradient(90deg, transparent, var(--color-primary), transparent); }

.glow-text     { text-shadow: var(--glow-primary); }
.glow-border   { border-color: var(--color-primary); box-shadow: var(--glow-soft); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tag-primary {
  background: rgba(230,57,70,0.1);
  border-color: var(--color-border-accent);
  color: var(--color-primary);
}

/* Animations on hover */
.hover-lift    { transition: transform var(--duration-fast) var(--ease-smooth); }
.hover-lift:hover { transform: translateY(-4px); }

.hover-glow:hover { box-shadow: var(--glow-primary); border-color: var(--color-primary); }

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   GAMEVAULT — CONSOLIDATED PAGE STYLES
   Moved out of inline <style> blocks during the mobile-responsiveness /
   code-cleanup pass. Organized by scope so the storefront (light) and admin
   (dark) themes — which reuse the same variable + class names — never
   collide now that they live in one file. Nothing here changes desktop
   appearance; see REFACTOR_REPORT.md for details.
   ============================================================================= */

/* -----------------------------------------------------------------------
   STOREFRONT THEME TOKENS + BASE  (was includes/header.php inline <style>)
   ----------------------------------------------------------------------- */
body.gv-storefront {
    --red: #E4001B; --red-dark: #b3001a; --red-light: #ff2d43;
    --black: #111111; --dark: #1a1a1a;
    --white: #ffffff; --gray-light: #f4f4f5; --gray-mid: #eaeaec;
    --border: #e2e2e6;
    --text: #1c1c1e; --muted: #6b6b76;
    --radius: 8px; --font: 'Inter', sans-serif;
    /* The animated red-atmosphere canvas (assets/js/premium-fx.js) is a
       fixed, mostly-transparent WebGL layer that composites on TOP of this
       page background (the page's own background always paints behind any
       fixed/positioned layer, regardless of z-index). It previously was an
       opaque light-grey (#F3F4F6), which read as a flat white wash behind
       the canvas's low-opacity fog/embers and effectively hid them. Now a
       solid dark brand shade, so every gap between sections/cards shows a
       true dark, living backdrop instead of a washed-out tint over white.
       Product/category cards below keep their own explicit white
       background (unchanged) so their content stays fully readable. */
    --page-bg: #2a0005;
    /* Legacy token names (used by products/cart/checkout/etc pages) mapped onto
       the light theme so every storefront page re-skins consistently. */
    --bg: #ffffff; --bg2: #f7f7f8; --bg3: #ffffff;

    background: var(--page-bg); color: var(--text); font-family: var(--font); min-height: 100vh;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

body.gv-storefront .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: all .2s; }
body.gv-storefront .btn-primary { background: var(--red); color: var(--white); }
body.gv-storefront .btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); }
body.gv-storefront .btn-dark { background: var(--black); color: var(--white); }
body.gv-storefront .btn-dark:hover { background: #000; transform: translateY(-1px); }
body.gv-storefront .btn-ghost { background: var(--gray-light); color: var(--text); border: 1px solid var(--border); }
body.gv-storefront .btn-ghost:hover { background: var(--gray-mid); }

body.gv-storefront .flash { padding: 14px 20px; border-radius: var(--radius); margin: 16px 24px; font-size: 14px; font-weight: 600; }
body.gv-storefront .flash-success { background: #e9f9ee; border: 1px solid #b7e6c4; color: #1d8a44; }
body.gv-storefront .flash-error   { background: #fdeaec; border: 1px solid #f5b6bd; color: var(--red); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* -----------------------------------------------------------------------
   NAVBAR  (was includes/navbar.php inline <style>)
   ----------------------------------------------------------------------- */
.top-strip { background: var(--red); color: var(--white); font-size: 12px; }
.top-strip .container { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.top-strip-left { display: flex; align-items: center; gap: 20px; }
.top-strip-left span { display: flex; align-items: center; gap: 6px; }
.top-strip-right { display: flex; align-items: center; gap: 18px; }
.top-strip-right a { opacity: .95; }
.top-strip-right a:hover { text-decoration: underline; }

/* Fixed storefront header stack — the promo strip, main header and announce bar stay
   pinned while the content area scrolls underneath. Using fixed positioning avoids the
   sticky/flow quirks that caused the header to drift away during page scroll. */
body.gv-storefront {
    --storefront-header-z: var(--z-sticky);
    --storefront-top-strip-height: 34px;
    --storefront-main-header-height: 84px;
    --storefront-category-nav-height: 48px;
    --storefront-announce-height: 48px;
    --storefront-mobile-search-height: 0px;
    --storefront-header-offset-desktop: calc(var(--storefront-top-strip-height) + var(--storefront-main-header-height) + var(--storefront-category-nav-height));
    --storefront-header-offset-mobile: calc(var(--storefront-top-strip-height) + var(--storefront-main-header-height) + var(--storefront-mobile-search-height));
    --floating-btn-size: 48px;
    --floating-btn-right: 24px;
    --floating-btn-bottom: 24px;
    --floating-btn-gap: 12px;
}
.site-header-stack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--storefront-header-z);
  display: flex;
  flex-direction: column;
  background: var(--white);
  width: 100%;
}
body.gv-storefront .top-strip {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    width: 100%;
}
.site-nav-sticky {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    width: 100%;
}
.site-nav-sticky.is-stuck .main-header {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
/* Place the announce strip visually below the fixed header stack so it's visible
   but remains in normal document flow and can scroll away. The page content
   padding is increased to clear both the header and announce strip. */

/* Keep announce in normal flow directly below the header stack */
body.gv-storefront .announce-strip {
  position: relative;
  margin-top: var(--storefront-header-offset-desktop);
  z-index: 1;
  width: 100%;
}

/* Baseline: no extra padding—header is sticky and occupies layout space */
body.gv-storefront .gv-page-content {
  padding-top: 0;
}

/* If the announce strip is present just above the page content, we don't need
   additional padding inside the content — it should start immediately below
   the announce strip. Use the adjacent sibling selector to override the
   baseline padding when announce exists. */
.announce-strip + .gv-page-content {
  padding-top: 0;
}

.main-header { background: var(--white); border-bottom: 1px solid var(--border); }
.main-header .container { display: flex; align-items: center; gap: 28px; height: 84px; }
.brand { font-size: 28px; font-weight: 900; color: var(--black); letter-spacing: -0.5px; flex-shrink: 0; }
.brand span { color: var(--red); }
.header-search { flex: 1; max-width: 480px; display: flex; }
.header-search input { flex: 1; height: 44px; padding: 0 16px; border: 2px solid var(--black); border-right: none; border-radius: var(--radius) 0 0 var(--radius); font-size: 14px; font-family: var(--font); }
.header-search input:focus { outline: none; border-color: var(--red); }
.header-search button { width: 52px; height: 44px; background: var(--red); border: none; border-radius: 0 var(--radius) var(--radius) 0; color: var(--white); font-size: 16px; cursor: pointer; }
.header-search button:hover { background: var(--red-dark); }
.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-shrink: 0; }
.app-badges { display: flex; gap: 8px; }
.app-badges a { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: 11px; color: var(--text); line-height: 1.2; }
.app-badges a:hover { border-color: var(--black); }
.header-icon-link { position: relative; display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 600; color: var(--text); gap: 2px; }
.header-icon-link .icon { font-size: 20px; }
.header-icon-link .badge { position: absolute; top: -6px; right: -10px; background: var(--red); color: var(--white); font-size: 10px; font-weight: 700; border-radius: 50%; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; }

.category-nav { background: var(--black); position: relative; z-index: 40; }
.category-nav .container { display: flex; align-items: stretch; }
.category-nav-list { display: flex; align-items: stretch; gap: 2px; flex-wrap: nowrap; }
.category-nav-list > .nav-item { position: relative; display: flex; }
.category-nav-list > .nav-item > a,
.category-nav-list > .nav-item > button.nav-toplevel {
    white-space: nowrap;
    color: var(--white);
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 14px 16px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background .15s;
}
/* Desktop overflow fix: the nav bar's own container is allowed more width
   than the sitewide 1280px cap (this rule is scoped to .category-nav only —
   every other section keeps the normal .container width), and item padding
   is trimmed slightly, so as many top-level items as possible fit without
   being clipped by the page's overflow-x:hidden on narrower desktop/laptop
   widths. Same font, same colors, same dropdown behavior — just tighter
   horizontal spacing.
   The client's fixed 11-link nav order (PlayStation → ... → Sell) plus Home,
   All Products, and Info totals 14 top-level items, which is more than this
   bar was originally tuned to fit even at trimmed padding. Horizontal
   scrolling was considered but rejected: this element's dropdowns/flyouts
   are position:absolute children of each .nav-item, so an overflow-x:auto
   ancestor would also clip them vertically (a dropdown can't escape a
   scrolling ancestor's box) — that would silently break every dropdown menu.
   Wrapping to a second row instead keeps every required link fully visible,
   in order, and with fully working dropdowns at any viewport width; it just
   costs a few extra pixels of header height on narrower desktop/laptop
   screens. Nothing is ever clipped or hidden. */
@media (min-width: 901px) {
    .category-nav .container { max-width: 1600px; padding: 0 16px; }
    .category-nav-list {
        flex-wrap: wrap;
        row-gap: 0;
    }
    .category-nav-list > .nav-item > a,
    .category-nav-list > .nav-item > button.nav-toplevel {
        padding: 14px 11px;
        font-size: 12.5px;
        letter-spacing: .01em;
    }
}
.category-nav-list > .nav-item > a:hover,
.category-nav-list > .nav-item > a.active,
.category-nav-list > .nav-item.dropdown-open > button.nav-toplevel,
.category-nav-list > .nav-item:hover > button.nav-toplevel {
    background: var(--red);
}
.nav-caret { font-size: 9px; transition: transform .15s; }
.nav-item.dropdown-open .nav-caret,
.nav-item:hover .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--red);
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 50;
}
.nav-item:hover > .nav-dropdown,
.nav-item.dropdown-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown a {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--gray-light); color: var(--red); }

.announce-strip { background: var(--gray-light); border-bottom: 1px solid var(--border); text-align: center; padding: 10px 16px; }
.announce-strip strong { color: var(--red); font-size: 14px; letter-spacing: .04em; }
.announce-strip p { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---- Mobile nav toggle (hamburger) + mobile search: NEW real mobile menu ---- */
.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 4px;
}
.mobile-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--black); border-radius: 2px; transition: transform .2s, opacity .2s; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-header-search { display: none; padding: 0 16px 12px; width: 100%; }
.mobile-header-search input { flex: 1; height: 42px; padding: 0 14px; border: 2px solid var(--black); border-right: none; border-radius: var(--radius) 0 0 var(--radius); font-size: 14px; font-family: var(--font); min-width: 0; max-width: 100%; }
.mobile-header-search button { width: 46px; height: 42px; background: var(--red); border: none; border-radius: 0 var(--radius) var(--radius) 0; color: var(--white); font-size: 15px; flex-shrink: 0; }

.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 405;
}
.mobile-nav-backdrop.show { display: block; }

@media (max-width: 480px) {
  .cat-icon-card { width: 104px; padding: 18px 8px; }
  .cat-icon-card .name {
    font-size: 11.5px;
    line-height: 1.25;
    overflow-wrap: break-word;
  }
  .cat-carousel-prev, .cat-carousel-next { width: 32px; height: 32px; font-size: 13px; }
}

@media (max-width: 640px) {
  .product-row .product-card {
    flex: 0 1 100%;       /* one card per row on phones */
  }
  .product-card {
    display: flex;
    flex-direction: column;
  }
  .product-card .pc-body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .product-card .pc-btn {
    margin-top: auto;      /* button always pinned to the bottom */
  }
}

@media (max-width: 640px) {
  .promo-grid { grid-template-columns: 1fr; }
  .promo-card {
    display: flex;
    flex-direction: column;
    min-height: 190px;
    overflow: visible;
    padding: 20px;
  }
  .promo-card p { flex: 1; }
  .promo-card .promo-btn {
    position: static;
    align-self: flex-start;
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .top-strip .container {
    height: auto;
    flex-wrap: wrap;
    padding: 6px 14px;
    row-gap: 4px;
  }
  .top-strip-right {
    gap: 10px;
    font-size: 11px;
  }
  /* keep only Cart/Account visible, hide Sign Up + Login text links */
  .top-strip-right a.auth-link { display: none; }
}

@media (max-width: 900px) {
    body.gv-storefront {
        --storefront-top-strip-height: 62px;
        --storefront-main-header-height: 64px;
        --storefront-category-nav-height: 0px;
        --storefront-announce-height: 48px;
        --storefront-mobile-search-height: 54px;
        --storefront-header-offset-mobile: calc(var(--storefront-top-strip-height) + var(--storefront-main-header-height) + var(--storefront-mobile-search-height));
    }
    .site-header-stack {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--storefront-header-z);
        display: flex;
        flex-direction: column;
        gap: 0;
        background: var(--white);
    }
    .header-search { display: none; }
    .app-badges { display: none; }
    .main-header .container { height: 64px; }
    .brand { font-size: 22px; }
    .top-strip-left span:not(:first-child) { display: none; }

    .mobile-nav-toggle { display: flex; }
    .mobile-header-search { display: flex; }
    /* mobile baseline: clear fixed mobile header */
    body.gv-storefront .gv-page-content {
      padding-top: var(--storefront-header-offset-mobile);
    }
    /* announce positioning on mobile */
    body.gv-storefront .announce-strip {
      margin-top: var(--storefront-header-offset-mobile);
    }
    /* When announce exists above content on mobile, no extra padding needed */
    .announce-strip + .gv-page-content {
      padding-top: 0;
    }
    body.gv-storefront .announce-strip {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        z-index: auto;
        width: 100%;
    }

    /* Category nav becomes a slide-in panel instead of an inline bar */
    .category-nav {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh; /* actual visible viewport on mobile browsers, so the panel never sits taller than what's on screen */
        width: 82%;
        max-width: 320px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 410;
    }
    .category-nav.show { transform: translateX(0); }
    .category-nav .container {
        display: block;
        padding: 16px 0;
        /* Ensures the last item (and an open INFO dropdown's items) always
           has room to scroll fully into view above the device's bottom edge. */
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    }
    .category-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .category-nav-list > .nav-item { flex-direction: column; width: 100%; }
    .category-nav-list > .nav-item > a,
    .category-nav-list > .nav-item > button.nav-toplevel { padding: 14px 20px; width: 100%; justify-content: space-between; }

    .nav-dropdown {
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-top: 1px solid rgba(255,255,255,.12);
    width: 100%;
    background: rgba(255,255,255,.03);
}
.nav-item:hover > .nav-dropdown { display: none; }
.nav-item.dropdown-open > .nav-dropdown { display: block; }
.nav-dropdown a { color: var(--white); padding: 12px 32px; }
.nav-dropdown a:hover { background: rgba(255,255,255,.08); color: var(--white); }
}
@media (min-width: 901px) {
    .category-nav { transform: none !important; }
}

@media (max-width: 900px) {
    /* .category-nav's z-index:410 is trapped inside .site-header-stack's own
       stacking context (position:fixed + z-index:200), so raising the drawer's
       own z-index alone can never beat .bottom-nav/.fab-whatsapp (siblings
       outside that context). Bump the container instead, only while the
       mobile menu is open, so normal header stacking is untouched otherwise. */
    .site-header-stack:has(.category-nav.show) {
        z-index: 410;
    }
}

@media (max-width: 768px) {
    .announce-strip {
        margin-top: var(--storefront-header-offset-mobile, 180px);
    }
}


/* -----------------------------------------------------------------------
   FOOTER  (was includes/footer.php inline <style>)
   ----------------------------------------------------------------------- */
.footer { background: var(--black); color: #cfcfd4; padding: 56px 24px 20px; margin-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; max-width: 1280px; margin: 0 auto 36px; }
.footer-brand { font-size: 22px; font-weight: 900; margin-bottom: 14px; color: var(--white); }
.footer-brand span { color: var(--red); }
.footer-desc { color: #a3a3aa; font-size: 13px; line-height: 1.8; }
.footer-col h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--white); margin-bottom: 18px; }
.footer-col a { display: block; color: #a3a3aa; font-size: 13px; margin-bottom: 11px; transition: color .2s; }
.footer-col a:hover { color: var(--white); }
.footer-app-badges { display: flex; gap: 8px; margin-bottom: 24px; }
.footer-app-badges a { border: 1px solid #3a3a40; border-radius: 6px; padding: 6px 10px; font-size: 11px; color: #cfcfd4; }
.footer-social { display: flex; gap: 12px; margin-bottom: 20px; }
.footer-social a { width: 32px; height: 32px; border-radius: 50%; background: #232326; display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--red); }
.footer-payment { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.footer-payment span { background: #ffffff; color: var(--black); font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 4px; }
.footer-contact p { font-size: 13px; color: #cfcfd4; margin-bottom: 8px; }
.footer-bottom { border-top: 1px solid #2a2a2e; padding-top: 20px; text-align: center; color: #8a8a90; font-size: 12px; max-width: 1280px; margin: 0 auto; }

.fab-whatsapp {
    position: fixed; right: var(--floating-btn-right); bottom: var(--floating-btn-bottom); z-index: 200;
    width: var(--floating-btn-size); height: var(--floating-btn-size); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #25D366; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    transition: transform .2s;
}
.fab-whatsapp:hover { transform: scale(1.08); }
.fab-whatsapp svg { width: calc(var(--floating-btn-size) * 0.5); height: calc(var(--floating-btn-size) * 0.5); display: block; }

/* ---- Scroll-to-top floating button ----
   Keeps the button on the right side of the viewport and spaced above the
   WhatsApp FAB so both remain fixed and clearly separated while scrolling. */
.scroll-top-btn {
    position: fixed;
    right: var(--floating-btn-right);
    bottom: calc(var(--floating-btn-bottom) + var(--floating-btn-size) + var(--floating-btn-gap));
    z-index: var(--z-sticky);
    width: var(--floating-btn-size);
    height: var(--floating-btn-size);
    border-radius: 50%;
    border: none;
    background: var(--black, #111111);
    color: var(--white, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s;
}
.scroll-top-btn svg { width: calc(var(--floating-btn-size) * 0.42); height: calc(var(--floating-btn-size) * 0.42); display: block; }
.scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--red, #E4001B); }

/* Admin panel: no WhatsApp FAB present, so keep the button on the bottom-right;
   also clear of the fixed mobile topbar/backdrop layers. */
.gv-admin .scroll-top-btn { right: 24px; bottom: 24px; }

@media (max-width: 768px) {
    :root {
        --floating-btn-size: 44px;
        --floating-btn-right: 16px;
        --floating-btn-bottom: 16px;
        --floating-btn-gap: 10px;
    }
    .fab-whatsapp { right: var(--floating-btn-right); bottom: var(--floating-btn-bottom); }
    .fab-whatsapp svg { width: calc(var(--floating-btn-size) * 0.46); height: calc(var(--floating-btn-size) * 0.46); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .scroll-top-btn { right: var(--floating-btn-right); bottom: calc(var(--floating-btn-bottom) + var(--floating-btn-size) + var(--floating-btn-gap)); }
    .gv-admin .scroll-top-btn { right: 16px; bottom: 16px; }
}
@media (max-width: 480px) {
    .footer { padding: 40px 20px 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: left; }
    .footer-bottom { font-size: 11px; line-height: 1.6; }
}

/* -----------------------------------------------------------------------
   ADMIN THEME TOKENS + LAYOUT  (was includes/admin-header.php inline <style>)
   ----------------------------------------------------------------------- */
body.gv-admin {
    --red: #E63946; --red-dark: #b32030; --bg: #07070f; --bg2: #0f0f1a; --bg3: #111120;
    --border: rgba(255,255,255,0.08); --text: #e8e8f0; --muted: #8888aa; --white: #fff; --radius: 12px;

    background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; display: flex; min-height: 100vh; height: 100vh; overflow: hidden;
}

.admin-sidebar { width: 220px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--border); padding: 24px 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; align-self: stretch; }
.admin-brand { font-size: 18px; font-weight: 900; padding: 0 20px 24px; }
.admin-brand span { color: var(--red); }
.admin-brand small { display: block; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.admin-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.admin-nav a:hover { background: rgba(255,255,255,0.05); color: var(--white); }
.admin-nav a.active { background: rgba(230,57,70,0.15); color: #ff6b7a; }
.admin-sidebar-foot { padding: 12px 20px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.admin-sidebar-foot a { font-size: 13px; color: var(--muted); }
.admin-sidebar-foot a:hover { color: var(--white); }

.admin-main { flex: 1; padding: 32px 36px; max-width: 1300px; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.admin-main > *:not(.admin-footer) { flex-shrink: 0; }

/* Admin panel footer — sits at the bottom of .admin-main. margin-top: auto pushes
   it flush to the bottom of the viewport on short pages, and it flows naturally
   after the content on tall/scrollable pages, so it never overlaps anything. */
.admin-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}
.admin-footer a { color: var(--muted); }
.admin-footer a:hover { color: var(--white); }

@media (max-width: 900px) {
    .admin-footer { flex-direction: column; align-items: flex-start; text-align: left; }
}
.admin-page-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; }
.admin-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stat-value { font-size: 22px; font-weight: 800; line-height: 1.2; overflow-wrap: break-word; }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
/* Admin data tables: horizontal scroll instead of squeeze/overflow on small screens */
.admin-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
    .admin-table-scroll table.admin-table {
        min-width: 640px;
    }
}

/* Products table: keep long names from wrapping messily */
.admin-table th:nth-child(2),
.admin-table td.pname-cell {
    width: 220px;
    max-width: 220px;
}
.pname-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
}
.pname-sku {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .admin-table { min-width: 720px; } /* was 640px — a little more room for the name column */
}

table.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.admin-table th { text-align: left; padding: 12px 10px; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
table.admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); }
table.admin-table tr:hover td { background: rgba(255,255,255,0.02); }

body.gv-admin .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all .2s; }
body.gv-admin .btn-primary { background: var(--red); color: #fff; }
body.gv-admin .btn-primary:hover { background: var(--red-dark); }
body.gv-admin .btn-ghost { background: rgba(255,255,255,0.06); color: var(--text); }
body.gv-admin .btn-danger { background: rgba(230,57,70,0.15); color: #ff6b7a; border: 1px solid rgba(230,57,70,0.3); }
body.gv-admin .badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
body.gv-admin .badge-pending { background: rgba(234,179,8,0.15); color: #facc15; }
body.gv-admin .badge-success { background: rgba(34,197,94,0.15); color: #4ade80; }
body.gv-admin .badge-danger { background: rgba(230,57,70,0.15); color: #ff6b7a; }

body.gv-admin input, body.gv-admin select, body.gv-admin textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; }
body.gv-admin input:focus, body.gv-admin select:focus, body.gv-admin textarea:focus { outline: none; border-color: var(--red); }
body.gv-admin label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
body.gv-admin .field { margin-bottom: 16px; }

body.gv-admin .flash { padding: 12px 18px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; font-weight: 500; }
body.gv-admin .flash-success { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); color: #4ade80; }
body.gv-admin .flash-error   { background: rgba(230,57,70,0.15); border: 1px solid rgba(230,57,70,0.3); color: #ff6b7a; }

/* ---- admin/payment-gateway.php ---- */
.pg-copy { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.pg-status-copy { color: var(--muted); font-size: 13px; margin-top: 14px; }
.pg-gateway-switch { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-gateway-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 9px 16px; border-radius: 100px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border);
    transition: all .2s;
}
.pg-gateway-pill:hover { background: rgba(255,255,255,0.1); }
.pg-gateway-pill.active { background: var(--red); border-color: var(--red); color: #fff; }
.pg-gateway-pill.soon { opacity: .6; }
.pg-gateway-pill small { font-weight: 400; opacity: .8; }

.pg-toggle-label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; font-weight: 600; margin-top: 6px; }
.pg-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.pg-toggle input { opacity: 0; width: 0; height: 0; }
.pg-toggle-slider { position: absolute; inset: 0; background: rgba(255,255,255,0.15); border-radius: 100px; transition: .2s; }
.pg-toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.pg-toggle input:checked + .pg-toggle-slider { background: var(--red); }
.pg-toggle input:checked + .pg-toggle-slider::before { transform: translateX(20px); }
.pg-toggle input:disabled + .pg-toggle-slider { opacity: .4; cursor: not-allowed; }

.pg-readonly-url { color: var(--muted); cursor: text; background: rgba(255,255,255,0.03) !important; }

.pg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }

@media (max-width: 640px) {
    .pg-actions { flex-direction: column; align-items: stretch; }
    .pg-actions > * { width: 100%; }
    .pg-actions form { width: 100%; }
    .pg-actions .btn { width: 100%; justify-content: center; }
    .pg-gateway-switch { gap: 8px; }
    .pg-gateway-pill { width: 100%; justify-content: center; }
}

.pg-test-result { padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; margin-bottom: 24px; }
.pg-test-ok   { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); color: #4ade80; }
.pg-test-fail { background: rgba(230,57,70,0.15); border: 1px solid rgba(230,57,70,0.3); color: #ff6b7a; }

/* Admin auth card (was admin/login.php inline <style>, standalone page) */
body.page-admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
body.gv-admin .auth-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 40px; width: 100%; max-width: 380px; }
body.gv-admin .auth-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; text-align: center; }
body.gv-admin .auth-sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; text-align: center; }
body.gv-admin .btn-block { width: 100%; padding: 12px; font-size: 14px; border-radius: 8px; background: var(--red); color: #fff; border: none; font-weight: 600; cursor: pointer; }
body.gv-admin .btn-block:hover { background: var(--red-dark); }
body.gv-admin .back-link { text-align: center; margin-top: 18px; font-size: 13px; }
body.gv-admin .back-link a { color: var(--muted); }

/* ---- Admin mobile topbar + sidebar-as-drawer: NEW mobile behavior ---- */
.admin-mobile-topbar { display: none; }
.admin-sidebar-backdrop { display: none; }

@media (max-width: 900px) {
    body.gv-admin { display: block; overflow-x: hidden; }
    .admin-mobile-topbar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; top: 0; left: 0; right: 0; z-index: 30;
        background: var(--bg2); border-bottom: 1px solid var(--border);
        padding: 12px 16px;
    }
    .admin-sidebar-toggle {
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 36px; height: 36px; border: none; background: transparent; cursor: pointer;
    }
    .admin-sidebar-toggle span { display: block; width: 20px; height: 2px; background: var(--white); border-radius: 2px; }
    .admin-mobile-brand { font-weight: 800; font-size: 15px; }
    .admin-mobile-brand span { color: var(--red); }

    .admin-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; z-index: 41;
        width: 78%; max-width: 280px;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .admin-sidebar.show { transform: translateX(0); }
    .admin-sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; }

    .admin-main { padding: 20px 16px; max-width: 100%; padding-top: 72px; }
}

/* =============================================================================
   PAGE-SPECIFIC STYLES
   Every rule below only ever appeared inside ONE page's markup, so no
   renaming was required to avoid a collision — moved verbatim. Where the
   same component (auth card, .field, .card, badges, order summary, product
   card) repeated across several pages with slightly different spacing, the
   shared shape lives once below and each page's small delta is scoped with
   that page's own wrapper class so desktop output is pixel-identical to
   before.
   ============================================================================= */

/* ---- Shared storefront components (deduped from auth / field / card / badge / summary / product-card) ---- */
body.gv-storefront .field { margin-bottom: 16px; }
body.gv-storefront .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
body.gv-storefront .field input,
body.gv-storefront .field select,
body.gv-storefront .field textarea { width: 100%; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; }
body.gv-storefront .field input:focus { outline: none; border-color: var(--red); }
body.gv-storefront .field-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

body.gv-storefront .card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }

body.gv-storefront .badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
body.gv-storefront .badge-pending { background: rgba(231, 178, 20, 0.814); color: var(--bg); }
body.gv-storefront .badge-success { background: rgba(50, 225, 50, 0.845); color: var(--bg); }
body.gv-storefront .badge-danger  { background: rgba(196, 28, 42, 0.877); color: var(--bg); }

body.gv-storefront .summary-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; align-self: start; }
body.gv-storefront .summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 12px; color: var(--muted); }
body.gv-storefront .summary-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 4px; }

body.gv-storefront .empty-note { color: rgba(255,255,255,0.65); padding: 48px 0; text-align: center; grid-column: 1/-1; }

body.gv-storefront .search-box { margin-bottom: 20px; }
body.gv-storefront .search-box form { display: flex; gap: 8px; }
/* .section-title color:#fff now lives directly in the single consolidated
   .section-title rule ("SECTION TITLES" section above) — duplicate removed. */

.vr-addon-box h4{color: var(--text);}

body.gv-storefront .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
body.gv-storefront .product-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all .2s; position: relative; }
body.gv-storefront .product-card:hover { border-color: rgba(230,57,70,0.4); transform: translateY(-4px); }
body.gv-storefront .product-card img { width: 100%; height: 180px; object-fit: contain; padding: 12px; box-sizing: border-box; }
body.gv-storefront .pc-body { padding: 16px; }
body.gv-storefront .pc-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
body.gv-storefront .pc-price { color: var(--red); font-weight: 800; font-size: 16px; }
body.gv-storefront .pc-strike { color: var(--muted); text-decoration: line-through; font-size: 13px; margin-left: 6px; }
body.gv-storefront .pc-condition { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); font-size: 11px; padding: 3px 8px; border-radius: 100px; text-transform: capitalize; color: #fff; }

body.gv-storefront .auth-wrap { max-width: 420px; margin: 64px auto; padding: 0 24px; }
body.gv-storefront .auth-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 40px; }
body.gv-storefront .auth-title { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
body.gv-storefront .auth-sub { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
body.gv-storefront .auth-wrap .field { margin-bottom: 18px; }
body.gv-storefront .auth-wrap .field input { padding: 12px 14px; border-radius: 10px; }
body.gv-storefront .btn-block { width: 100%; padding: 13px; font-size: 15px; border-radius: 10px; }
body.gv-storefront .auth-foot { text-align: center; margin-top: 22px; font-size: 14px; color: var(--muted); }
body.gv-storefront .auth-foot a { color: var(--red); font-weight: 600; }
body.gv-storefront .otp-input { letter-spacing: 8px; font-size: 20px; text-align: center; font-family: monospace; }

@media (max-width: 480px) {
    body.gv-storefront .auth-wrap { margin: 32px auto; }
    body.gv-storefront .auth-card { padding: 28px 20px; }
    body.gv-storefront .auth-title { font-size: 22px; }
}

/* ---- about.php ---- */
.about-wrap { max-width: 800px; margin: 32px auto; padding: 0 24px; }
.about-wrap h1 { font-size: 32px; font-weight: 900; margin-bottom: 16px; }
.about-wrap h1 span { color: var(--red); }
.about-wrap p { color: var(--muted); line-height: 1.8; margin-bottom: 20px; font-size: 15px; }

/* Policy pages (Privacy / Shipping / Returns / Terms / FAQ) reuse .about-wrap
   for the overall layout and add just the extra bits legal/FAQ copy needs:
   dated byline, H2 section headings, and bulleted lists. No changes to
   .about-wrap itself.
   IMPORTANT: this content sits directly on the dark maroon page background
   (--page-bg, no white card behind it — same situation as ".about-wrap > p"
   above), so --text/--muted (designed for use on white cards) are far too
   dark here and become unreadable. Everything below uses white/near-white
   instead, matching the existing .about-wrap > p fix. */
.policy-wrap .policy-updated { color: rgba(255,255,255,0.65); font-size: 13px; margin-bottom: 24px; }
.policy-wrap h2 { font-size: 19px; font-weight: 800; margin: 30px 0 12px; color: var(--red); }
.policy-wrap ul { color: rgba(255,255,255,0.85); line-height: 1.8; font-size: 15px; margin: 0 0 20px; padding-left: 20px; }
.policy-wrap ul li { margin-bottom: 6px; }
.policy-wrap a { color: var(--red-light); text-decoration: underline; }
.policy-wrap ul.policy-contact { list-style: none; padding-left: 0; }

/* These three intro paragraphs sit directly on the dark page background
   (no white card behind them like .value-card has), so the grey --muted
   color is unreadable here. Scoped to direct children only — .value-card p
   below is on a white card already and stays untouched. */
.about-wrap > p { color: #ffffff; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 32px; }
.value-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.value-card .icon { font-size: 28px; margin-bottom: 10px; }
.value-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.value-card p { font-size: 13px; margin-bottom: 0; }
@media (max-width: 480px) {
    .about-wrap { margin: 20px auto; padding: 0 16px; }
    .about-wrap h1 { font-size: 26px; }
}

/* =============================================================================
   FAQ ACCORDION — assets/css/faq.css
   Scoped entirely to .faq-accordion so nothing outside faq.php is touched.
   Sits on GameMart's dark red page background (--page-bg / body.gv-storefront),
   so all text here uses white/near-white for contrast rather than the
   site's default dark --text/--muted tokens (which are tuned for white cards).
   ============================================================================= */

.faq-accordion {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.09);
}

.faq-item.active {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

/* Question row */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff;
    transition: color 0.2s ease;
}

.faq-question:hover,
.faq-question:focus-visible {
    color: #ffffff;
}

.faq-question:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

.faq-question-text {
    flex: 1 1 auto;
    line-height: 1.4;
}



/* +/- icon, fixed on the right */
/* +/- icon, fixed on the right — drawn with two bars instead of a text
   glyph, so it's pixel-perfectly centered regardless of font/browser. */
.faq-icon {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #E63946;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
    transition: background 0.25s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #ffffff;
    border-radius: 1px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.faq-icon::before { /* horizontal bar — always present */
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-icon::after { /* vertical bar — collapses away to leave a minus */
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.faq-item.active .faq-icon {
    background: #ffffff;
}

.faq-item.active .faq-icon::before,
.faq-item.active .faq-icon::after {
    background: #E63946;
}

.faq-item.active .faq-icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

/* Answer panel */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer-inner {
    padding: 0 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: -1px;
}

.faq-answer-inner p {
    margin: 16px 0 0;
    color: #f2f2f5;
    font-size: 14.5px;
    line-height: 1.75;
}

.faq-answer-inner a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
}

.faq-answer-inner a:hover {
    color: #ffd9dc;
}

/* Mobile tightening */
@media (max-width: 600px) {
    .faq-question {
        padding: 15px 16px;
        font-size: 14.5px;
        gap: 12px;
    }
    .faq-icon {
        width: 26px;
        height: 26px;
        font-size: 15px;
    }
    .faq-answer-inner {
        padding: 0 16px 16px;
    }
    .faq-answer-inner p {
        font-size: 13.5px;
    }
}

/* ---- cart.php ---- */
.cart-wrap { max-width: 1000px; margin: 32px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 320px; gap: 32px; }
.cart-item { display: flex; gap: 16px; align-items: center; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.cart-item img { width: 80px; height: 80px; border-radius: 10px; object-fit: contain; }
.ci-name { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.ci-price { color: var(--red); font-weight: 700; }
.ci-qty { display: flex; align-items: center; gap: 8px; }
.ci-qty input { width: 56px; text-align: center; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.ci-remove { color: var(--red); font-size: 13px; cursor: pointer; margin-top: 6px; display: inline-block; }
.empty-cart { text-align: center; padding: 80px 24px; grid-column: 1/-1; }
@media (max-width: 768px) {
    .cart-wrap { grid-template-columns: 1fr; padding: 0 16px; margin: 20px auto; gap: 20px; }
}
@media (max-width: 480px) {
    .cart-item { flex-wrap: wrap; padding: 12px; }
    .cart-item img { width: 64px; height: 64px; }
    .ci-qty { width: 100%; justify-content: flex-start; margin-top: 8px; }
}

/* ---- checkout.php ---- */
.checkout-wrap { max-width: 1000px; margin: 32px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 320px; gap: 32px; }
.checkout-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.checkout-card h3 { margin-bottom: 18px; font-size: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-wrap .field { margin-bottom: 14px; }
.saved-addr { padding: 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; font-size: 13px; }
.saved-addr:hover { border-color: var(--red); }
.cart-mini { font-size: 13px; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; }

/* Payment method selector */
.pm-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s; }
.pm-option:hover { border-color: var(--red); }
.pm-option input[type="radio"] { margin-top: 3px; width: auto; }
.pm-option-body { flex: 1; }
.pm-option-title { font-weight: 700; font-size: 14px; }
.pm-option-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pm-option input:checked ~ .pm-option-body .pm-option-title { color: var(--red); }

/* Razorpay redirect / modal wrapper (checkout.php + pay-now.php) */
.rzp-modal-wrap { display: flex; align-items: center; justify-content: center; min-height: 50vh; padding: 40px 20px; }
.rzp-modal-card { text-align: center; max-width: 420px; }
.rzp-modal-card h3 { margin: 18px 0 6px; font-size: 18px; }
.rzp-modal-card p { color: var(--muted); font-size: 14px; }
.rzp-spinner { width: 44px; height: 44px; margin: 0 auto; border: 3px solid var(--border); border-top-color: var(--red); border-radius: 50%; animation: rzp-spin 0.8s linear infinite; }
@keyframes rzp-spin { to { transform: rotate(360deg); } }
.rzp-status-line { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-top: 14px; }
.rzp-status-ok { background: rgba(34,197,94,0.15); color: #1d8a44; }
.rzp-status-error { background: rgba(230,57,70,0.15); color: var(--red); }

/* Pay Now / retry payment button on order-details.php */
.pay-now-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: rgba(230,57,70,0.08); border: 1px solid rgba(230,57,70,0.25); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; }
.pay-now-banner p { margin: 0; font-size: 14px; }

@media (max-width: 768px) {
    .checkout-wrap { grid-template-columns: 1fr; padding: 0 16px; margin: 20px auto; gap: 20px; }
    .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .checkout-card { padding: 16px; }
}

/* ---- contact.php: premium redesign ---- */
.contact-hero {
    max-width: 900px;
    margin: 40px auto 8px;
    padding: 0 24px;
    text-align: center;
    position: relative;
}
.contact-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text);
    background: rgba(230,57,70,0.08);
    border: 1px solid rgba(230,57,70,0.25);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.contact-hero-badge .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.2), 0 0 8px rgba(34,197,94,0.8);
    display: inline-block;
    animation: pulse-dot 2s ease-in-out infinite;
}
.contact-hero-title {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--bg);
    margin-bottom: 12px;
}
.contact-hero-sub {
    /* Sits directly on the dark red page background (no card behind it),
       so grey --muted text was unreadable there. */
    color: #ffffff;
    font-size: 15px;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

.contact-wrap--premium {
    grid-template-columns: 1.15fr 0.85fr;
    margin-top: 36px;
}

.contact-form-card,
.contact-info-card {
    position: relative;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(230,57,70,0.03), transparent 60%), var(--bg3, #fff);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.contact-form-card:hover,
.contact-info-card:hover {
    border-color: rgba(230,57,70,0.35);
    box-shadow: 0 16px 40px -20px rgba(230,57,70,0.35);
}

.contact-form .field { margin-bottom: 18px; }
.contact-form input,
.contact-form textarea {
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(230,57,70,0.15);
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}
.contact-submit-btn .arrow { transition: transform .2s ease; }
.contact-submit-btn:hover .arrow { transform: translateX(4px); }

.contact-signin-hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
}

.contact-info-card .contact-info-item {
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
}
.contact-info-card .contact-info-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 12px;
    background: rgba(230,57,70,0.1);
    border: 1px solid rgba(230,57,70,0.2);
    transition: transform .2s ease, background .2s ease;
}
.contact-info-card .contact-info-item:hover .contact-info-icon {
    background: var(--red);
    transform: translateY(-2px) scale(1.05);
}
.contact-info-card .contact-info-item strong {
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
}
.contact-info-card .contact-info-item div {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

.contact-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 20px 0 18px;
}

.contact-socials {
    display: flex;
    gap: 10px;
}
.contact-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(230,57,70,0.08);
    border: 1px solid rgba(230,57,70,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all .2s ease;
}
.contact-socials a:hover {
    background: var(--red);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(230,57,70,0.35);
}

.contact-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(230,57,70,0.08);
    border: 1px solid rgba(230,57,70,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text, #1c1c1e);
    transition: all .2s ease;
}
.contact-socials a:hover {
    background: var(--red);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(230,57,70,0.35);
}

@media (max-width: 768px) {
    .contact-hero { margin: 24px auto 4px; padding: 0 16px; }
    .contact-wrap--premium { grid-template-columns: 1fr; margin-top: 24px; }
}

/* ---- contact.php ---- */
.contact-wrap { max-width: 900px; margin: 32px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* ---- sell.php readability ----
   sell.php's form card and "Prefer to chat?" card use the plain .card
   class (not .contact-form-card/.contact-info-card), so they fall back to
   the dark --color-surface background instead of the white --bg3 override.
   Their grey --muted paragraph/hint text is unreadable there. Scoped
   narrowly (via #sellForm and the sell-only .card.u-mb-16) so nothing
   else using .card or .u-muted-13/.field-hint elsewhere is affected. */
.card.u-mb-16 .contact-info-item p { color: rgba(255,255,255,0.85); }
#sellForm .field-hint { color: rgba(255,255,255,0.65); }
.contact-wrap .card { padding: 28px; }
.contact-info-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.contact-info-icon { font-size: 22px; }
@media (max-width: 768px) {
    .contact-wrap { grid-template-columns: 1fr; padding: 0 16px; margin: 20px auto; gap: 20px; }
    .contact-wrap .card { padding: 20px; }
}


/* ---- login.php ---- */
.row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: 13px; flex-wrap: wrap; gap: 8px; }
.row-between a { color: var(--red); font-weight: 600; }
.check { display: flex; align-items: center; gap: 8px; color: var(--muted); }

/* ---- order-details.php ---- */
.od-wrap { max-width: 800px; margin: 32px auto; padding: 0 24px; }
.od-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.od-wrap .card { padding: 20px; margin-bottom: 16px; }
.order-item { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.order-item:last-child { border-bottom: none; }
.order-item img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--bg2); flex-shrink: 0; }
.od-wrap .summary-row,
.od-wrap .summary-total { padding-top: 0; }
.timeline { display: flex; flex-direction: column; gap: 10px; }
.timeline-item { display: flex; gap: 10px; font-size: 13px; color: var(--muted); }
@media (max-width: 480px) {
    .od-wrap { margin: 20px auto; padding: 0 16px; }
    .order-item { flex-wrap: wrap; }
}

/* ---- orders.php ---- */
.orders-wrap { max-width: 900px; margin: 32px auto; padding: 0 24px; }
.orders-wrap > a.btn-ghost {
    margin-top: 20px;
    display: inline-block;
}
table.orders-table { width: 100%; border-collapse: collapse; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.orders-table th { text-align: left; padding: 14px 16px; color: var(--muted); font-size: 12px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
table.orders-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
table.orders-table tr:last-child td { border-bottom: none; }
@media (max-width: 768px) {
    .orders-wrap { margin: 20px auto; padding: 0 16px; }
    .orders-wrap .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.orders-table { min-width: 560px; }
}

/* ---- product-details.php ---- */
.breadcrumb { max-width: 1200px; margin: 18px auto 0; padding: 0 24px; font-size: 13px; color: rgba(255,255,255,0.65); }
.breadcrumb a { color: rgba(255,255,255,0.65); } .breadcrumb a:hover { color: var(--red-light); }

.pd-wrap { max-width: 1200px; margin: 20px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
/* Premium content panel — the info column previously sat directly on the
   dark animated page background with dark-gray/near-black text and
   red-on-dark-red pricing, so title/price/description/buttons were nearly
   unreadable. Wrapping it in a white card (matching the gallery image's
   own white background) fixes contrast without touching any markup logic. */
.pd-info {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 28px 32px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.pd-price { text-shadow: none; }
.pd-gallery img#mainImg { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); aspect-ratio: 1/1; object-fit: contain; cursor: zoom-in; background: #fff; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-thumbs img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; cursor: pointer; border: 1px solid var(--border); }
.pd-thumbs img.active { border-color: var(--red); }
.pd-lightbox { display: none; position: fixed; inset: 0; background: rgba(10,10,12,0.94); z-index: 999; align-items: center; justify-content: center; padding: 40px; }
.pd-lightbox.open { display: flex; }
/* White square viewing area behind the zoomed image — keeps dark/black
   products clearly visible against a clean white background, matching the
   product card's existing white presentation. Image is contained inside
   without stretching or distorting its aspect ratio. */
.pd-lightbox-stage {
    background: #fff;
    border-radius: 12px;
    width: min(90vw, 90vh);
    height: min(90vw, 90vh);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.pd-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-lightbox-close { position: absolute; top: 24px; right: 32px; font-size: 32px; color: #fff; cursor: pointer; background: none; border: none; line-height: 1; z-index: 1; }

.pd-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; row-gap: 8px; }
/* The share/wishlist icon group (inline-styled div right after .pd-condition
   in product-details.php) has no wrap set inline, so on narrow phones it
   was overflowing past the card edge instead of wrapping. Targeted by
   position since it's a bare div with no class. */
.pd-top-row > div { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.pd-name, .pd-desc { overflow-wrap: break-word; word-break: break-word; }
.pd-condition { display: inline-block; background: var(--black); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 4px; text-transform: uppercase; }
.pd-share { display: flex; gap: 8px; }
.pd-share button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; color: #2563eb; }
.pd-share button:hover { border-color: #2563eb; background: #eff6ff; }
.pd-wishlist-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; color: #2563eb; }
.pd-wishlist-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }

.pd-name { font-size: 26px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.pd-cat { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.pd-rating { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.pd-rating .stars { color: #f5a623; }

.condition-select { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.condition-select label { border: 1.5px solid var(--border); border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.condition-select input { display: none; }
.condition-select input:checked + span { color: var(--red); }
.condition-select label:has(input:checked) { border-color: var(--red); background: #fdeaec; }

.pd-price { font-size: 30px; font-weight: 900; color: var(--red); margin-bottom: 4px; }
.pd-strike { color: var(--muted); text-decoration: line-through; font-size: 16px; margin-left: 10px; }
.pd-desc { color: var(--muted); line-height: 1.8; margin: 16px 0; font-size: 14px; }
.pd-stock { font-size: 13px; margin-bottom: 16px; font-weight: 700; }
.pd-stock.in { color: #1d8a44; } .pd-stock.out { color: var(--red); }

.warranty-box { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; background: var(--gray-light); }
.warranty-box h4 { font-size: 13px; margin-bottom: 8px; color: var(--text); }
.warranty-box label { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; cursor: pointer; }

.pd-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qty-input { width: 64px; text-align: center; padding: 11px; border-radius: var(--radius); border: 1px solid var(--border); }

.storage-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.storage-pills span { border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; }

/* position: fixed (not sticky) — a sticky element still takes up space in
   the document flow while shown, so toggling it in/out shifted the page
   layout, which re-triggered the IntersectionObserver watching .pd-actions
   and caused the bar to flicker in/out repeatedly while scrolling. Fixed
   positioning removes it from the flow entirely, so showing/hiding it no
   longer affects layout or re-triggers the observer. */
.pd-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: 12px 24px; display: none; align-items: center; justify-content: space-between; z-index: var(--z-sticky); box-shadow: 0 -4px 16px rgba(0,0,0,0.06); }
.pd-sticky-bar.show { display: flex; }
/* Stack above the mobile bottom navigation instead of hiding behind/under it */
@media (max-width: 991px) {
    .pd-sticky-bar { bottom: var(--bottom-nav-h); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

.pd-tabs { max-width: 1200px; margin: 48px auto 0; padding: 0 24px; }
.pd-tabs { background: #ffffff; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding-top: 8px; }
.pd-tabs .pd-tab-nav { padding: 0 24px; }
.pd-tabs .pd-tab-panel { padding: 24px 28px 32px; }
.pd-tab-nav { display: flex; gap: 4px; border-bottom: 2px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pd-tab-nav button { padding: 12px 18px; font-size: 13px; font-weight: 700; background: none; border: none; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pd-tab-nav button.active { color: var(--red); border-color: var(--red); }
.pd-tab-panel { display: none; padding: 24px 4px; font-size: 14px; line-height: 1.8; color: var(--text); }
.pd-tab-panel.active { display: block; }
.pd-tab-panel ul { padding-left: 20px; }
.review-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.review-item .rn { font-weight: 700; font-size: 13px; }
.review-item .stars { color: #f5a623; font-size: 13px; }

.related-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.related-row .product-card img { height: 130px; }

@media (max-width: 900px) {
    .pd-wrap { grid-template-columns: 1fr; gap: 28px; padding: 0 16px; }
    .related-row { grid-template-columns: repeat(2, 1fr); }
    .pd-sticky-bar.show { display: flex; }
    .breadcrumb { padding: 0 16px; }
}
@media (max-width: 480px) {
    .pd-name { font-size: 21px; }
    .pd-price { font-size: 24px; }
    .pd-thumbs img { width: 52px; height: 52px; }
    .pd-actions { flex-direction: column; align-items: stretch; }
    .pd-actions .btn, .pd-actions .qty-input { width: 100%; }
    .related-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pd-tabs { padding: 0 16px; }
    .pd-info { padding: 18px 16px 22px; }
    .pd-share button, .pd-wishlist-btn { width: 28px; height: 28px; font-size: 12px; }
    .pd-top-row { gap: 8px; }
    .pd-top-row > div { gap: 6px; }
    .pd-share { gap: 6px; }
}

/* ---- products.php ---- */
.shop-wrap { max-width: 1200px; margin: 32px auto; padding: 0 24px; display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
.shop-filters { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; align-self: start; }
.shop-filters h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.shop-filters a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--muted); margin-bottom: 2px; }
.shop-filters a:hover, .shop-filters a.active { background: rgba(230,57,70,0.12); color: #ff6b7a; }
.shop-wrap .pc-name { min-height: 36px; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pagination a { padding: 8px 14px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--border); font-size: 14px; }
.pagination a.active { background: var(--red); border-color: var(--red); color: #fff; }
/* Filters toolbar — button + search sit side by side above the product grid */
.shop-toolbar {
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0 24px;
    display: flex;
    align-items: stretch;
    gap: 14px;
}
.shop-toolbar-search {
    flex: 0 1 420px;
    max-width: 420px;
    min-width: 0;
    margin-bottom: 0 !important;
}
.shop-toolbar-search form {
    display: flex;
    gap: 8px;
    height: 100%;
    width: 100%;
    min-width: 0;
}
.shop-toolbar-search form input {
    height: 48px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.shop-toolbar-search form button {
    height: 48px;
    flex: 0 0 auto;
}
.shop-toolbar #filtersToggle {
    flex-shrink: 0;
    height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Products now take the full width — sidebar removed from flow */
.shop-wrap--full {
    grid-template-columns: 1fr;
}

/* Slide-in filter panel (used on ALL screen sizes now, not just mobile) */
.filter-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 300px;
    max-width: 85%;
    background: var(--bg3, #fff);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    z-index: 500;
    transform: translateX(-100%);
    transition: transform .28s ease;
    overflow-y: auto;
}
.filter-panel.open { transform: translateX(0); }

.filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--border);
}
.filter-panel-head h4 { font-size: 15px; font-weight: 700; }
.filter-panel-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
}
.filter-panel-close:hover { color: var(--red); }

.filter-panel-body { padding: 12px; }
.filter-panel-body a {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
}
.filter-panel-body a:hover,
.filter-panel-body a.active {
    background: var(--red);
    color: #fff;
}

.filter-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 499;
}
.filter-panel-backdrop.show { display: block; }

@media (max-width: 640px) {
    .shop-toolbar { padding: 0 16px; flex-wrap: wrap; margin-top: 0; }
    .shop-toolbar-search { flex-basis: 100%; order: 2; width: 100%; max-width: none; }
    .shop-toolbar-search form { align-items: stretch; }
    .shop-toolbar-search form input { min-width: 0; }
    #filtersToggle { order: 1; }
}

@media (max-width: 900px) {
    body.gv-storefront .gv-page-content {
    padding-top: var(--storefront-header-offset-mobile);
    }
}
/* Consolidated: was 3 separate @media(max-width:768px) blocks for
   .shop-filters (a leftover flex-wrap version plus a later grid version
   that silently overrode it). Merged into one block, keeping the final
   effective look (2-column chip grid) — no visual change, just removes
   the conflicting/duplicate responsive rules. */
@media (max-width: 768px) {
    .shop-wrap { grid-template-columns: minmax(0, 1fr); padding: 0 16px; margin: 20px auto; gap: 16px; }
    .shop-wrap > * { min-width: 0; }
    .shop-filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-self: auto; }
    .shop-filters h4 { grid-column: 1 / -1; margin-bottom: 4px; width: 100%; }
    .shop-filters a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        text-align: center;
        padding: 10px 6px;
        background: var(--gray-light);
        border: 1px solid var(--border);
        border-radius: 14px;   /* softened from a full pill so 2-line text doesn't look squeezed */
        font-size: 11px;
        line-height: 1.25;
        font-weight: 600;
        margin-bottom: 0;
        min-height: 44px;      /* keeps every chip the same height even when text wraps */
        white-space: normal;   /* allow wrapping instead of cutting off */
        word-break: break-word;
    }
    .shop-filters a:hover,
    .shop-filters a.active {
        background: var(--red);
        color: #fff;
        border-color: var(--red);
    }
}
@media (max-width: 360px) {
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* ---- profile.php ---- */
.profile-wrap { max-width: 900px; margin: 32px auto; padding: 0 24px; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px;}
.profile-head h2 { color: var(--bg);}
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; flex-shrink: 0; }
.profile-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.profile-tabs button { background: none; border: none; color: var(--bg); padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.profile-tabs button.active { color: var(--bg); border-bottom-color: var(--red); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.profile-wrap .card { padding: 24px; margin-bottom: 16px; }
.stat-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.stat-box { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 24px; flex: 1; min-width: 140px; }
.stat-box .num { font-size: 22px; font-weight: 800; }
.stat-box .lbl { font-size: 13px; color: var(--muted); }
.addr-item { padding: 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; font-size: 14px; }
.msg { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-top: 10px; display: none; }
.msg.success { background: rgba(34,197,94,0.15); color: #1d8a44; display: block; }
.msg.error { background: rgba(230,57,70,0.15); color: var(--red); display: block; }
@media (max-width: 480px) {
    .profile-wrap { margin: 20px auto; padding: 0 16px; }
    .profile-head { flex-wrap: wrap; }
    .profile-wrap .card { padding: 18px; }
}

/* ---- search.php ---- */
.search-wrap { max-width: 1100px; margin: 32px auto; padding: 0 24px; }
.search-wrap .search-box form { max-width: 500px; }
.search-wrap .product-card img { height: 160px; object-fit: cover; background: var(--bg2); padding: 0; }
.search-wrap .empty-note { padding: 64px 24px; }
@media (max-width: 768px) {
  .search-box input { min-width: 0; }
  .search-box button { flex-shrink: 0; }
}
@media (max-width: 480px) {
    .search-wrap { margin: 20px auto; padding: 0 16px; }
}

/* ---- wishlist.php ---- */
.wish-wrap { max-width: 1100px; margin: 32px auto; padding: 0 24px; }
.pc-remove { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); border: none; color: #ff6b7a; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.wish-wrap .empty-note { padding: 80px 24px; }
@media (max-width: 480px) {
    .wish-wrap { margin: 20px auto; padding: 0 16px; }
}

/* ---- register.php / reset-password.php / verify-email.php auth-page deltas ---- */
.auth-wrap.compact { max-width: 420px; }

/* ---- admin/reports.php ---- */
.reports-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.reports-title { background: linear-gradient(90deg, #ffffff 0%, #ff9aa4 60%, #E63946 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; }
.reports-sub { color: var(--color-text-muted, #8888aa); font-size: 0.92rem; margin-top: 4px; }
.reports-head-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted, #8888aa); background: rgba(255,255,255,0.04); border: 1px solid var(--color-border, rgba(255,255,255,0.08)); padding: 6px 14px; border-radius: 999px; }
.reports-head-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2), 0 0 8px rgba(34,197,94,0.8); display: inline-block; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.reports-section-title { font-size: 1.15rem; margin-top: 32px; margin-bottom: 4px; color: var(--color-text, #e8e8f0); letter-spacing: -0.01em; }

.stat-grid--premium { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 18px); margin-top: 18px; }
.stat-card--premium { position: relative; background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); border: 1px solid var(--color-border, rgba(255,255,255,0.08)); border-radius: var(--radius-lg, 16px); padding: 22px 22px 20px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.stat-card--premium::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 160px; height: 160px; border-radius: 50%; filter: blur(40px); opacity: 0.35; pointer-events: none; }
.stat-card--accent-a::before { background: #E63946; }
.stat-card--accent-b::before { background: #3b82f6; }
.stat-card--accent-c::before { background: #22c55e; }
.stat-card--premium:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.18); box-shadow: 0 12px 30px -12px rgba(0,0,0,0.55); }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stat-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.stat-trend { font-size: 0.78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.01em; }
.stat-trend.up { color: #22c55e; background: rgba(34,197,94,0.12); }
.stat-trend.down { color: #ef4444; background: rgba(239,68,68,0.12); }
.stat-card--premium .stat-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; font-family: var(--font-display); }
.stat-card--premium .stat-label { color: var(--color-text-muted, #8888aa); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

.charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5, 18px); margin-top: var(--space-4, 14px); margin-bottom: var(--space-8, 32px); }
.chart-card--premium { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005)); border: 1px solid var(--color-border, rgba(255,255,255,0.08)); border-radius: var(--radius-lg, 16px); box-shadow: 0 10px 26px -16px rgba(0,0,0,0.6); padding: var(--space-6, 24px); box-sizing: border-box; backdrop-filter: blur(6px); transition: border-color .25s ease, box-shadow .25s ease; }
.chart-card--premium:hover { border-color: rgba(230,57,70,0.35); box-shadow: 0 16px 34px -16px rgba(0,0,0,0.65); }
.chart-card--full { grid-column: 1 / -1; }
.chart-card--half { grid-column: span 1; }

.chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.chart-card-head h3 { color: var(--color-secondary); font-family: var(--font-display); margin: 0; }
.chart-card-sub { color: var(--color-text-muted, #8888aa); font-size: 0.78rem; margin: 3px 0 0; }
.chart-empty { color: var(--muted); }

.chart-wrap { position: relative; width: 100%; height: 300px; }
.chart-wrap--tall { height: 340px; }
.chart-wrap--donut { height: 260px; max-width: 260px; margin: 0 auto; position: relative; }
.chart-wrap {
    overflow: hidden;
}
.chart-wrap canvas {
    max-width: 100% !important;
}
.chart-card--premium {
    overflow: hidden;
}

.donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.donut-center-value { display: block; font-size: 1.6rem; font-weight: 700; font-family: var(--font-display); color: var(--color-text, #e8e8f0); }
.donut-center-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted, #8888aa); }

.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-top: 16px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--color-text-muted, #8888aa); }
.chart-legend-swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.table-card { transition: border-color .25s ease; }
.admin-table--premium thead th { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--color-text-muted, #8888aa); }
.admin-table--premium tbody tr { transition: background .15s ease; }
.admin-table--premium tbody tr:hover { background: rgba(255,255,255,0.035); }

@media (max-width: 992px) {
    .stat-grid--premium { grid-template-columns: repeat(3, 1fr); }
    .charts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .stat-grid--premium { grid-template-columns: 1fr; }
    .charts-grid { grid-template-columns: 1fr; }
    .chart-card--half { grid-column: 1 / -1; }
    .chart-wrap, .chart-wrap--tall { height: 280px; }
    .chart-wrap--donut { max-width: 220px; height: 220px; }
    .reports-head { align-items: flex-start; }
}

/* ---- admin/reports.php: refined mobile layout ---- */
@media (max-width: 768px) {
    .reports-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .reports-head-badge { align-self: flex-start; }

    .reports-section-title { margin: 20px 0 10px; }

    .stat-grid--premium { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .stat-card--premium { padding: 16px 16px 14px; }
    .stat-card--premium .stat-value { font-size: 1.5rem; }
    .stat-icon { width: 32px; height: 32px; font-size: 0.9rem; }
    .stat-trend { font-size: 0.7rem; padding: 2px 7px; }

    .chart-card--premium { padding: 16px; }
    .chart-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 560px) {
    .stat-grid--premium { grid-template-columns: 1fr; }
    .reports-title { font-size: 1.5rem; }
    .reports-sub { font-size: 0.85rem; }

    .charts-grid { grid-template-columns: 1fr; gap: 14px; }
    .chart-card--half { grid-column: 1 / -1; }

    .chart-wrap, .chart-wrap--tall { height: 240px; }
    .chart-wrap--donut { max-width: 190px; height: 190px; }
    .donut-center-value { font-size: 1.25rem; }
    .donut-center-label { font-size: 0.65rem; }

    .chart-legend { gap: 8px 12px; }
    .chart-legend-item { font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .reports-head-badge { font-size: 0.7rem; padding: 5px 12px; }
    .stat-card--premium .stat-value { font-size: 1.3rem; }
}

/* =============================================================================
   SELL.PHP — minimal additions (only what doesn't already exist)
   ============================================================================= */
body.gv-storefront .sell-cat-card {
    cursor: pointer;
    border: 1px solid transparent;
    transition: box-shadow .15s, border-color .15s;
}
body.gv-storefront .sell-cat-selected {
    border-color: var(--red);
    box-shadow: inset 0 0 0 2px var(--red);
    background: var(--gray-light);
}

body.gv-storefront .sell-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--black);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 10px;
}
body.gv-storefront .promo-card.dark .sell-step-num {
    background: var(--red);
}

/* =============================================================================
   GLOBAL MOBILE-RESPONSIVE FIXES
   Project-wide safety net so nothing overflows at 320–414px and tablets,
   without touching desktop rules above (all scoped to max-width).
   ============================================================================= */
/* IMPORTANT: overflow-x must only be set on ONE of html/body, not both.
   Setting it on both forces the browser to give each element its own
   overflow-y:auto (per the CSS spec's overflow axis-pairing rule), which
   creates two nested scroll containers. Any position:sticky element inside
   body (admin sidebar, storefront nav, sticky product bar, etc.) then sticks
   relative to body's own invisible scrollbox instead of the real page —
   i.e. it silently stops sticking. Keeping this only on html preserves the
   horizontal-overflow safety net while restoring sticky positioning everywhere. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; }
table { max-width: 100%; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1024px) {
    .container { padding: 0 20px; }
}
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .admin-card, body.gv-storefront .card { padding: 18px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .container { padding: 0 14px; }
    h1 { font-size: 1.5rem; }
    .btn, body.gv-admin .btn { padding: 10px 14px; font-size: 13px; }
    .btn-block { font-size: 14px; }
    .stat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
    .container { padding: 0 12px; }
}

/* Final mobile override: ensure when announce-strip is present the page
   content does not get extra top padding from earlier header-offset rules. */
@media (max-width: 900px) {
  .announce-strip + .gv-page-content {
    /* Small breathing room between the EMI banner and whatever follows
       (e.g. the Filter/Search toolbar on products.php) instead of the
       banner sitting flush against it. The banner itself stays in normal
       document flow (position:static) so it still scrolls away naturally
       and is never sticky/fixed. */
    padding-top: 10px !important;
    margin-top: 0 !important;
  }

  .announce-strip + .gv-page-content:has(> .hero-slider:first-child) {
    padding-top: 0 !important;
  }
}

@media (max-width: 640px) {
 .announce-strip + .gv-page-content:has(> .hero-slider:first-child) {
    padding-top: 0 !important;
  }
}

@media (max-width: 640px) {
    .hero-free-delivery { position: static; display: block; margin-top: 18px; text-align: center; opacity: .9; }
    .promo-banner-slide img { max-height: 160px; }
    .promo-banner-title { font-size: 15px; }
}

@media (max-width: 640px) {
    .hero-banner-carousel .banner-slide.hero-slide {
        padding: 12px 16px 20px;
        min-height: 320px; /* or remove this line if you don't want a fixed floor height at all */
    }
}

/* Admin data tables: horizontal scroll instead of squeeze/overflow on small screens */
@media (max-width: 900px) {
    .admin-card > table.admin-table,
    .admin-card table.admin-table {
        display: block;
    }
    .admin-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.admin-table { min-width: 640px; }
}

/* Small utility classes to replace the most-repeated inline style="" attributes */
.u-flex-label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.u-w-auto { width: auto; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mb-20 { margin-bottom: 20px; }
.u-section-title { margin: 24px 0 12px; font-size: 15px; }
.u-empty-note { text-align: center; color: rgba(255,255,255,0.65); padding: 24px; }
.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.u-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.u-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; }
.u-flex-wrap-20 { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.u-nowrap { white-space: nowrap; }
.u-mb-10 { margin-bottom: 10px; }
.u-icon-lg { font-size: 48px; margin-bottom: 16px; }
.u-text-red { color: var(--red); }
.u-muted-mb-24 { color: var(--muted); margin-bottom: 24px; }
.u-muted { color: var(--muted); }
.u-muted-13 { color: var(--bg); font-size: 13px; }
.u-empty-state-lg { max-width: 600px; margin: 80px auto; text-align: center; }
.u-mb14-fs15 { margin-bottom: 14px; font-size: 15px; }
.u-desc-text { font-size: 14px; color: var(--muted); line-height: 1.7; }
.u-hint-gray { font-size: 12px; color: #888; margin-bottom: 10px; }
.u-flex-1 { flex: 1; }
@media (max-width: 640px) {
    .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns: 1fr 1fr; }
    .admin-status-grid { grid-template-columns: 1fr !important; }
    .admin-category-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 420px) {
    .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns: 1fr; }
}