/* ─── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
    --cnw-gold:       #D4AF37;
    --cnw-gold-dark:  #b8962e;
    --cnw-gold-light: #f5e07a;
    --cnw-black:      #050505;
    --cnw-card-bg:    #0a0a0a;
    --cnw-border:     #1a1a1a;
    --cnw-text:       #ffffff;
    --cnw-text-muted: #aaaaaa;
    --cnw-text-dim:   #666666;
    --cnw-gradient:   linear-gradient(135deg, #0a0a0a, #1a1200);
    --cnw-radius:     12px;
    --cnw-radius-sm:  6px;
    --cnw-transition: 0.15s ease;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    
    /* THE CUSTOM GOLD FLAKE PAINT JOB */
    background-color: #050505; /* Deep, glossy black base */
    background-image: 
        radial-gradient(rgba(212, 175, 55, 0.8) 1px, transparent 1px),
        radial-gradient(rgba(212, 175, 55, 0.4) 2px, transparent 2px),
        radial-gradient(rgba(212, 175, 55, 0.6) 1.5px, transparent 1.5px);
    background-size: 60px 60px, 90px 90px, 45px 45px;
    background-position: 0 0, 30px 30px, 15px 45px;
    
    color: #ffffff; /* All standard text is now white */
    line-height: 1.5;
}

/* Promo Banner */
.promo-banner {
    background-color: #000000;
    color: #D4AF37; /* Gold Text */
    text-align: center;
    padding: 10px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1001;
    border-bottom: 2px solid #D4AF37; /* Gold Trim */
}

/* Navigation */
.navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 20px 40px;
    /* Solid black background so the flakes don't make the menu hard to read */
    background-color: #000000; 
    position: fixed;
    width: 100%;
    top: 38px; 
    z-index: 1000;
    border-bottom: 1px solid #333;
}

.nav-left {
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;
}

.nav-right {
    display: flex;
    justify-content: flex-start;
    padding-left: 40px;
}

.nav-icons {
    position: absolute;
    right: 40px;
}

.logo {
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: #ffffff; /* White Logo */
}

.logo img {
    height: 80px; /* Adjust this value based on your logo's proportions */
    width: auto;
    display: block;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a, .nav-icons a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #D4AF37;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

/* Gold hover effect for the menu */
.nav-links a:hover, .nav-icons a:hover {
    color: #D4AF37;
}

/* Progress steps (checkout / auth flows) */
.progress-step { display: flex; align-items: center; gap: 6px; }
.progress-step-num { width: 24px; height: 24px; border-radius: 50%; background: #1a1a1a; border: 1px solid #333; color: #555; font-size: 0.7rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.progress-step.active .progress-step-num { background: #D4AF37; border-color: #D4AF37; color: #050505; }
.progress-step.done   .progress-step-num { background: #1a1200; border-color: #D4AF37; color: #D4AF37; }
.progress-step-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #555; }
.progress-step.active .progress-step-label { color: #D4AF37; }
.progress-step.done   .progress-step-label { color: #888; }
.progress-step-line { width: 32px; height: 1px; background: #1a1a1a; }
#checkoutProgressSteps { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 20px 0; }

/* Hero Section */
.hero {
    height: 90vh;
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    padding-bottom: 80px;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), url('hero.jpg') center/cover;
    margin-top: 38px;
    border-bottom: 4px solid #D4AF37; /* Gold Trim separating hero from the rest of the site */
}

.hero-content {
    text-align: center;
    color: #fff;
}

.hero-content h1 {
    font-size: 4.5rem;
    font-weight: 900;
    margin-bottom: 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Buttons */
.btn-primary {
    background-color: #D4AF37; /* Solid Gold Button */
    color: #000000; /* Black Text */
    padding: 15px 40px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid #D4AF37;
}

.btn-primary:hover {
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #ffffff;
}

.btn-secondary {
    background-color: transparent;
    color: #D4AF37; /* Gold Text */
    border: 2px solid #D4AF37; /* Gold Border */
    padding: 12px 30px;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #D4AF37;
    color: #000000;
}

.btn-dark {
    background-color: #000000;
    color: #D4AF37;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    border: 2px solid #D4AF37;
    transition: all 0.3s ease;
}

.btn-dark:hover {
    background-color: #D4AF37;
    color: #000000;
}

/* Product Grid Section */
.hottest-items {
    padding: 80px 40px;
    text-align: center;
    background-color: transparent; /* Lets the gold flakes show through the gaps */
}

.section-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

.product-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.product-grid .product-card {
    width: 32%;
}

.product-card {
    text-align: left;
    cursor: pointer;
    background-color: #111111;
    padding: 20px;
    border: 1px solid #333;
    border-radius: 5px;
    transition: transform 0.3s, border-color 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: #D4AF37; /* Card glows gold on hover */
}

.placeholder-img {
    background-color: #000000;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: #D4AF37;
    font-weight: 700;
    border: 1px solid #222;
}

.product-info h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 5px;
    color: #ffffff;
}

.price {
    font-size: 1rem;
    color: #cccccc;
    font-weight: 600;
}

.entries {
    font-size: 0.85rem;
    font-weight: 900;
    color: #D4AF37;
    margin-top: 5px;
    text-transform: uppercase;
}

/* Split Section */
.split-section {
    display: flex;
    height: 60vh;
}

.split-half {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.dark-half {
    background-color: rgba(10, 10, 10, 0.95); /* Mostly solid to cover flakes */
    color: #ffffff;
    border-right: 2px solid #D4AF37; 
}

.light-half {
    background-color: rgba(25, 25, 25, 0.95); /* Changed to dark grey instead of light so it fits the vibe */
    color: #ffffff;
}

.split-half h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #D4AF37;
}

.split-half p {
    margin-bottom: 30px;
    max-width: 400px;
    color: #cccccc;
    font-size: 1.1rem;
}

/* ─── Page Fade-In ─────────────────────────────────────────────────────────── */
body { opacity: 0; transition: opacity 0.35s ease; }
body.loaded { opacity: 1; }

/* ─── Hamburger Button ─────────────────────────────────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1010;
    flex-shrink: 0;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ─── Mobile Menu Drawer ───────────────────────────────────────────────────── */
.mobile-menu {
    position: fixed;
    top: 160px;
    left: 0;
    right: 0;
    background: #000;
    z-index: 998;
    padding: 10px 0 20px;
    border-bottom: 2px solid #D4AF37;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; }
.mobile-menu ul { list-style: none; }
.mobile-menu ul li a {
    display: block;
    padding: 14px 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #1a1a1a;
    transition: color 0.2s, padding-left 0.2s;
}
.mobile-menu ul li a:hover { color: #D4AF37; padding-left: 38px; }

/* ─── Cart Toast ───────────────────────────────────────────────────────────── */
.cart-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #111;
    border: 1px solid #D4AF37;
    color: #fff;
    padding: 14px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.cart-toast.show { opacity: 1; transform: translateY(0); pointer-events: all; }
.cart-toast a { color: #D4AF37; text-decoration: none; font-weight: 800; }
.cart-toast a:hover { text-decoration: underline; }

/* ─── Back to Top ──────────────────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 44px;
    height: 44px;
    background: #D4AF37;
    color: #000;
    border: none;
    font-size: 1.3rem;
    font-weight: 900;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    z-index: 500;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.back-to-top:hover { background: #fff; }

/* ─── Product Image Placeholder ────────────────────────────────────────────── */
.product-img-placeholder {
    background: linear-gradient(145deg, #0d0d0d 0%, #1a1600 50%, #0d0d0d 100%);
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border: 1px solid #222;
    position: relative;
    overflow: hidden;
}
.product-img-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.12) 0%, transparent 70%);
}
.ph-brand {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(212,175,55,0.25);
    letter-spacing: 6px;
    z-index: 1;
}
.ph-name {
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(212,175,55,0.5);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 8px;
    z-index: 1;
}

/* ─── Product Badge ────────────────────────────────────────────────────────── */
.product-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    margin-bottom: 10px;
}
.in-stock  { background: rgba(212,175,55,0.15); color: #D4AF37; border: 1px solid rgba(212,175,55,0.3); }
.sold-out  { background: rgba(255,50,50,0.1);   color: #ff5555; border: 1px solid rgba(255,50,50,0.3); }

/* ─── Size Selector ────────────────────────────────────────────────────────── */
.size-select {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 9px 12px;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23D4AF37'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.size-select:focus { outline: none; border-color: #D4AF37; }
.size-select.size-error { border-color: #ff5555; animation: shake 0.3s ease; }
@keyframes shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

/* ─── Add to Cart Button ───────────────────────────────────────────────────── */
.btn-add-cart {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: #D4AF37;
    color: #000;
    border: 2px solid #D4AF37;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}
.btn-add-cart:hover:not(:disabled) { background: #fff; border-color: #fff; }
.btn-add-cart:disabled { background: #222; color: #555; border-color: #333; cursor: not-allowed; }

/* ─── Shop Filter Tabs ─────────────────────────────────────────────────────── */
.filter-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}
.filter-tab {
    background: none;
    border: 1px solid #333;
    color: #aaa;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 9px 24px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.filter-tab:hover   { border-color: #D4AF37; color: #D4AF37; }
.filter-tab.active  { background: #D4AF37; border-color: #D4AF37; color: #000; }

/* ─── Giveaway Feature Section ─────────────────────────────────────────────── */
.giveaway-feature {
    background: #0a0a0a;
    border-top: 3px solid #D4AF37;
    border-bottom: 3px solid #D4AF37;
    padding: 80px 40px;
}
.giveaway-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}
.giveaway-text { flex: 1; min-width: 280px; }
.giveaway-label {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: #D4AF37;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.giveaway-text h2 {
    font-size: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 16px;
}
.giveaway-text > p {
    color: #ccc;
    font-size: 1.05rem;
    margin-bottom: 30px;
    max-width: 480px;
}
.entry-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.entry-stats .stat {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #D4AF37;
    text-transform: uppercase;
}
.entry-stats .stat span {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
}
.giveaway-visual {
    flex: 0 0 320px;
    height: 260px;
    background: linear-gradient(135deg, #111 0%, #1c1500 50%, #111 100%);
    border: 2px solid #D4AF37;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.giveaway-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(212,175,55,0.2) 0%, transparent 65%);
}
.giveaway-visual .car-icon { font-size: 4rem; z-index: 1; }
.giveaway-visual p { font-size: 0.9rem; font-weight: 900; letter-spacing: 3px; color: #D4AF37; text-transform: uppercase; z-index: 1; }

/* ─── Social Proof Bar ─────────────────────────────────────────────────────── */
.social-proof {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    background: #050505;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    flex-wrap: wrap;
}
.proof-item {
    flex: 0 1 220px;
    min-width: 160px;
    text-align: center;
    padding: 30px 24px;
    border-right: 1px solid #1a1a1a;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777;
}
.proof-item:last-child { border-right: none; }
.giveaway-off .proof-item:not(.giveaway-only):last-of-type { border-right: none; }
.proof-item span {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: #D4AF37;
    margin-bottom: 4px;
}

/* ─── Submit Ride Modal ────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
    background: #111;
    border: 1px solid #D4AF37;
    padding: 50px 40px;
    width: 100%;
    max-width: 520px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.modal-close:hover { color: #D4AF37; }
.modal-box h2 {
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #D4AF37;
    margin-bottom: 8px;
}
.modal-box > p { color: #aaa; font-size: 0.9rem; margin-bottom: 28px; }
.ride-form input,
.ride-form textarea {
    display: block;
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 14px;
    margin-bottom: 14px;
    transition: border-color 0.2s;
}
.ride-form input:focus,
.ride-form textarea:focus { outline: none; border-color: #D4AF37; }
.ride-form textarea { resize: vertical; text-transform: none; }
.file-upload { display: block; margin-bottom: 20px; }
.file-upload input[type="file"] { display: none; }
.file-upload span {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px dashed #444;
    color: #777;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.file-upload:hover span { border-color: #D4AF37; color: #D4AF37; }
.submit-success { text-align: center; padding: 20px 0; }
.submit-success .success-icon { font-size: 3rem; margin-bottom: 12px; }
.submit-success h3 { font-size: 1.5rem; font-weight: 900; color: #D4AF37; letter-spacing: 3px; margin-bottom: 8px; }
.submit-success p { color: #aaa; }

/* ─── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
    background: #000;
    border-top: 2px solid #D4AF37;
    padding: 60px 40px 0;
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    padding-bottom: 50px;
    border-bottom: 1px solid #1a1a1a;
}
.footer-col { flex: 1; min-width: 140px; }
.footer-brand .footer-logo { height: 50px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: #666; font-size: 0.85rem; line-height: 1.7; }
.footer-col h4 {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s;
}
.footer-col ul li a:hover { color: #D4AF37; }
.footer-social { display: flex; gap: 10px; margin-bottom: 16px; }
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #333;
    color: #aaa;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    transition: border-color 0.2s, color 0.2s;
}
.social-btn:hover { border-color: #D4AF37; color: #D4AF37; }
.footer-entry-note {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #D4AF37;
    text-transform: uppercase;
    margin-top: 4px;
}
.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #444;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ─── Cart Page ────────────────────────────────────────────────────────────── */
.cart-page {
    min-height: 100vh;
    padding: 180px 40px 80px;
    max-width: 900px;
    margin: 0 auto;
}
.cart-page h1 {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #D4AF37;
    margin-bottom: 40px;
}
.cart-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #1a1a1a;
    flex-wrap: wrap;
}
.cart-item-img {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #111, #1a1600);
    border: 1px solid #222;
    flex-shrink: 0;
}
.cart-item-info { flex: 1; min-width: 140px; }
.cart-item-info h3 { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; margin-bottom: 4px; }
.cart-item-size  { font-size: 0.78rem; color: #888; font-weight: 600; display: block; margin-bottom: 4px; }
.cart-item-entries { font-size: 0.75rem; font-weight: 900; color: #D4AF37; letter-spacing: 1px; text-transform: uppercase; }
.cart-item-controls { display: flex; align-items: center; gap: 12px; }
.cart-item-controls button {
    width: 30px;
    height: 30px;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 0.2s;
}
.cart-item-controls button:hover { border-color: #D4AF37; }
.cart-item-controls span { font-size: 0.95rem; font-weight: 700; min-width: 20px; text-align: center; }
.cart-item-price { font-size: 1rem; font-weight: 800; color: #fff; min-width: 70px; text-align: right; }
.cart-item-remove {
    background: none;
    border: none;
    color: #444;
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px;
}
.cart-item-remove:hover { color: #ff5555; }
.cart-summary {
    margin-top: 40px;
    padding: 30px;
    background: #111;
    border: 1px solid #222;
}
.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ccc;
}
.cart-summary-row.total { font-size: 1.1rem; font-weight: 900; color: #fff; padding-top: 14px; border-top: 1px solid #333; margin-top: 10px; }
.cart-summary-row .val-gold { color: #D4AF37; font-weight: 900; }
.cart-checkout-btn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    background: #D4AF37;
    color: #000;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s;
    text-align: center;
    text-decoration: none;
}
.cart-checkout-btn:hover { background: #fff; }
.cart-empty {
    text-align: center;
    padding: 80px 20px;
    color: #555;
}
.cart-empty h2 { font-size: 1.8rem; font-weight: 900; letter-spacing: 2px; color: #333; margin-bottom: 12px; }
.cart-empty p  { margin-bottom: 30px; }

/* ─── Shop / Category Page ─────────────────────────────────────────────────── */
.shop-header {
    padding: 160px 40px 50px;
    text-align: center;
    background: #0a0a0a;
    border-bottom: 2px solid #D4AF37;
}
.shop-header h1 {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    margin-bottom: 8px;
}
.shop-header p { color: #777; font-size: 0.9rem; letter-spacing: 1px; }
.shop-grid-section { padding: 60px 40px 80px; }
.product-grid-full {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ─── Gallery Page ─────────────────────────────────────────────────────────── */
.gallery-header {
    padding: 160px 40px 60px;
    text-align: center;
    background: #0a0a0a;
    border-bottom: 2px solid #D4AF37;
}
.gallery-header h1 { font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 10px; }
.gallery-header p  { color: #aaa; font-size: 1rem; max-width: 500px; margin: 0 auto; }
.gallery-grid-section { padding: 60px 40px 80px; max-width: 1200px; margin: 0 auto; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.gallery-card {
    background: #111;
    border: 1px solid #222;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
    cursor: pointer;
}
.gallery-card:hover { border-color: #D4AF37; transform: translateY(-4px); }
.gallery-card-img {
    height: 220px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
.gallery-card-img .car-icon  { font-size: 3rem; opacity: 0.7; }
.gallery-card-img .car-model { font-size: 0.75rem; font-weight: 800; letter-spacing: 2px; color: rgba(212,175,55,0.6); text-transform: uppercase; }
.gallery-card-info { padding: 16px 18px; }
.gallery-card-info h3 { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.gallery-card-info p  { font-size: 0.78rem; color: #777; font-weight: 600; }
.gallery-card-info .ig-handle { color: #D4AF37; font-weight: 700; }
.gallery-submit-cta {
    text-align: center;
    padding: 60px 40px;
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
}
.gallery-submit-cta h2 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 12px; }
.gallery-submit-cta p  { color: #aaa; margin-bottom: 28px; }

/* ─── VIP Comparison Table ─────────────────────────────────────────────────── */
.tier-compare {
    background: #0a0a0a;
    padding: 80px 40px;
    text-align: center;
    border-top: 2px solid #D4AF37;
}
.tier-compare h2 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 40px;
}
.compare-table {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-collapse: collapse;
}
.compare-table th, .compare-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #1a1a1a;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
}
.compare-table th { font-size: 0.78rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; padding-bottom: 20px; }
.compare-table td:first-child { text-align: left; color: #ccc; font-weight: 600; }
.compare-table td:not(:first-child) { color: #D4AF37; font-size: 1.1rem; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .dash { color: #333; font-size: 1rem; }

/* ─── VIP Testimonials ─────────────────────────────────────────────────────── */
.vip-testimonials {
    background: #050505;
    padding: 80px 40px;
    text-align: center;
    border-top: 1px solid #1a1a1a;
}
.vip-testimonials h2 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 50px;
}
.testimonial-grid {
    display: flex;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.testimonial-card {
    background: #111;
    border: 1px solid #222;
    padding: 30px 28px;
    flex: 1;
    min-width: 240px;
    max-width: 300px;
    text-align: left;
    position: relative;
}
.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 14px;
    left: 20px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(212,175,55,0.15);
    line-height: 1;
}
.testimonial-card p { color: #ccc; font-size: 0.88rem; line-height: 1.7; margin-bottom: 16px; }
.testimonial-card span { font-size: 0.78rem; font-weight: 900; color: #D4AF37; letter-spacing: 1px; }

/* ─── VIP Dashboard Teaser ─────────────────────────────────────────────────── */
.dashboard-page {
    min-height: 100vh;
    padding: 180px 40px 80px;
    max-width: 900px;
    margin: 0 auto;
}
.dashboard-page h1 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #D4AF37;
    margin-bottom: 8px;
}
.dashboard-page .dash-sub { color: #555; font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 50px; text-transform: uppercase; }
.locked-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.locked-panel {
    background: #111;
    border: 1px solid #222;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.locked-panel.gold-gate { border-color: rgba(212,175,55,0.4); }
.lock-icon  { font-size: 2.2rem; margin-bottom: 14px; opacity: 0.5; }
.locked-panel h3 { font-size: 0.85rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; margin-bottom: 8px; }
.locked-panel p  { font-size: 0.82rem; color: #555; margin-bottom: 20px; }
.tier-badge {
    display: inline-block;
    padding: 3px 12px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid #D4AF37;
    color: #D4AF37;
    margin-bottom: 14px;
}
.tier-badge.silver { border-color: #aaa; color: #aaa; }

/* ─── Meet Recap ───────────────────────────────────────────────────────────── */
.meet-recap {
    padding: 80px 40px;
    background: #050505;
    border-top: 2px solid #D4AF37;
    text-align: center;
}
.meet-recap h2 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 40px;
}
.recap-grid {
    display: flex;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.recap-card {
    background: #111;
    border: 1px solid #222;
    flex: 1;
    min-width: 240px;
    max-width: 300px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.recap-card:hover { border-color: #D4AF37; }
.recap-img-placeholder {
    height: 160px;
    background: linear-gradient(135deg, #111 0%, #1a1600 50%, #111 100%);
    border-bottom: 1px solid #222;
    position: relative;
    overflow: hidden;
}
.recap-img-placeholder::after {
    content: 'CNW MEET';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: rgba(212,175,55,0.3);
}
.recap-card-info { padding: 18px 20px; text-align: left; }
.recap-card-info h3 { font-size: 0.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #D4AF37; margin-bottom: 6px; }
.recap-card-info p  { font-size: 0.8rem; color: #777; font-weight: 600; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .product-grid { flex-wrap: wrap; }
    .product-grid .product-card { width: 48%; }
    .giveaway-inner { gap: 40px; }
    .giveaway-visual { flex: 0 0 100%; height: 200px; }
}

/* ─── Auth Page ────────────────────────────────────────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 180px 20px 80px;
}
.auth-box {
    background: #111;
    border: 1px solid #222;
    padding: 50px 44px;
    width: 100%;
    max-width: 440px;
    text-align: center;
}
.auth-logo   { height: 50px; width: auto; margin-bottom: 24px; }
.auth-box h1 { font-size: 1.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 8px; }
.auth-subtitle { color: #666; font-size: 0.85rem; margin-bottom: 30px; line-height: 1.6; }
.auth-tabs  { display: flex; gap: 0; margin-bottom: 28px; border: 1px solid #222; }
.auth-tab   { flex: 1; background: none; border: none; padding: 11px; color: #666; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; }
.auth-tab.active { background: #D4AF37; color: #000; }
.auth-alert { padding: 12px 16px; margin-bottom: 20px; font-size: 0.82rem; font-weight: 700; text-align: left; }
.auth-alert.error   { background: rgba(255,50,50,0.1); border: 1px solid rgba(255,50,50,0.3); color: #ff7777; }
.auth-alert.success { background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.3); color: #D4AF37; }
.auth-form  { text-align: left; }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: 0.7rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #777; margin-bottom: 7px; }
.auth-field input  { display: block; width: 100%; background: #0a0a0a; border: 1px solid #333; color: #fff; font-family: 'Inter', sans-serif; font-size: 0.9rem; padding: 12px 14px; transition: border-color 0.2s; }
.auth-field input:focus { outline: none; border-color: #D4AF37; }
.auth-submit { display: block; width: 100%; margin-top: 24px; padding: 14px; background: #D4AF37; color: #000; border: none; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background 0.25s; }
.auth-submit:hover:not(:disabled) { background: #fff; }
.auth-submit:disabled { background: #333; color: #666; cursor: not-allowed; }
.auth-small { font-size: 0.78rem; color: #555; margin-top: 16px; text-align: center; }
.auth-small a { color: #D4AF37; text-decoration: none; }
.auth-small a:hover { text-decoration: underline; }

/* ─── Nav Auth Link ─────────────────────────────────────────────────────────── */
.nav-auth-link { margin-right: 16px; }
.nav-auth-link.logged-in { color: #D4AF37 !important; }

/* ─── Order Success Page ────────────────────────────────────────────────────── */
.order-success-page { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 180px 40px 80px; }
.success-icon-wrap  { font-size: 4rem; margin-bottom: 20px; }
.order-success-page h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.order-success-page > p { color: #aaa; font-size: 1rem; margin-bottom: 36px; }
.success-entries-box { background: #111; border: 1px solid #D4AF37; padding: 30px 40px; margin-bottom: 40px; }
.entries-label { font-size: 0.72rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #777; margin-bottom: 10px; }
.entries-big   { font-size: 3rem; font-weight: 900; color: #D4AF37; margin-bottom: 8px; }
.entries-note  { font-size: 0.82rem; color: #555; }
.success-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ─── VIP Dashboard (backend-enhanced) ──────────────────────────────────────── */
.dash-user-bar { background: #111; border: 1px solid #222; padding: 20px 28px; margin-bottom: 36px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.dash-user-name { font-size: 0.85rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.dash-user-tier { font-size: 0.7rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border: 1px solid #D4AF37; color: #D4AF37; }
.dash-user-tier.silver { border-color: #aaa; color: #aaa; }
.dash-user-tier.none   { border-color: #333; color: #555; }
.dash-entries-bar { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 24px 28px; margin-bottom: 36px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.dash-entry-stat .val  { font-size: 2.4rem; font-weight: 900; color: #D4AF37; display: block; }
.dash-entry-stat .lbl  { font-size: 0.68rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #555; }
.dash-orders-section h2 { font-size: 0.8rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 16px; }
.dash-order-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #1a1a1a; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; }
.dash-order-row .order-date { color: #555; font-weight: 600; }
.dash-order-row .order-total { color: #fff; font-weight: 800; }
.dash-order-row .order-entries { color: #D4AF37; font-weight: 900; font-size: 0.78rem; letter-spacing: 1px; }

@media (max-width: 768px) {
    .navbar {
        grid-template-columns: auto 1fr auto;
        padding: 12px 20px;
        gap: 0;
    }
    .nav-left, .nav-right { display: none; }
    .nav-icons { position: static; }
    .logo { grid-column: 2; justify-self: center; }
    .logo img { height: 56px; }
    .hamburger { display: flex; order: -1; }

    .hero-content h1 { font-size: 2.8rem; }
    .product-grid .product-card { width: 100%; }
    .split-section { flex-direction: column; height: auto; }
    .split-half { width: 100%; padding: 50px 24px; }
    .dark-half { border-right: none; border-bottom: 2px solid #D4AF37; }
    .section-title { font-size: 1.8rem; }
    .giveaway-text h2 { font-size: 2.2rem; }
    .proof-item { min-width: 50%; border-bottom: 1px solid #1a1a1a; }
    .footer-inner { flex-direction: column; gap: 30px; }
    .cart-page, .shop-grid-section, .gallery-grid-section, .dashboard-page { padding-left: 20px; padding-right: 20px; }
    .shop-header, .gallery-header { padding-left: 20px; padding-right: 20px; }
    .cart-item { flex-wrap: wrap; }
    .cart-item-price { margin-left: auto; }
    .tier-compare, .vip-testimonials, .meet-recap { padding: 60px 20px; }
    .compare-table th, .compare-table td { padding: 12px 10px; font-size: 0.8rem; }
}

/* ─── NEW Badge ────────────────────────────────────────────────────────────── */
.badge-new {
    background: #D4AF37;
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 3px 8px;
    text-transform: uppercase;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

/* ─── Quick-Add Overlay ─────────────────────────────────────────────────────── */
.product-card { position: relative; overflow: hidden; }
.quick-add-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    z-index: 3;
    pointer-events: none;
}
.product-card:hover .quick-add-overlay { opacity: 1; pointer-events: auto; }
.quick-add-btn {
    background: #D4AF37;
    color: #000;
    border: none;
    padding: 10px 22px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}
.quick-add-btn:hover { background: #fff; }

/* ─── Wishlist Button ───────────────────────────────────────────────────────── */
.wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    border: 1px solid #333;
    color: #777;
    font-size: 1.1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    transition: color 0.2s, border-color 0.2s;
    line-height: 1;
}
.wishlist-btn:hover,
.wishlist-btn.active { color: #D4AF37; border-color: #D4AF37; }

/* ─── Entries Live Counter ──────────────────────────────────────────────────── */
.entries-live {
    font-size: 0.75rem;
    font-weight: 900;
    color: #D4AF37;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

/* ─── Sort Bar ──────────────────────────────────────────────────────────────── */
.sort-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
#shopSort {
    background: #111;
    border: 1px solid #333;
    color: #ccc;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 9px 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23D4AF37'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    transition: border-color 0.2s;
}
#shopSort:focus { outline: none; border-color: #D4AF37; }

/* ─── Recently Viewed ───────────────────────────────────────────────────────── */
#recentlyViewed { margin-top: 50px; }
.recently-viewed-title {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 20px;
}
.recently-viewed-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.rv-card {
    text-decoration: none;
    width: calc(25% - 12px);
    min-width: 120px;
    flex: 1;
}
.rv-img {
    height: 90px;
    border: 1px solid #222;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.rv-img .ph-brand { font-size: 0.5rem; }
.rv-img .ph-name  { font-size: 0.5rem; }
.rv-name  { font-size: 0.72rem; font-weight: 800; color: #ccc; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.rv-price { font-size: 0.72rem; color: #D4AF37; font-weight: 700; }

/* ─── Cart Upsell / Promo Code ──────────────────────────────────────────────── */
.cart-upsell {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #1a1a1a;
}
.cart-upsell h4 {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 16px;
}
.cart-upsell-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.cart-upsell-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #111;
    border: 1px solid #1a1a1a;
    padding: 12px 14px;
    flex: 1;
    min-width: 200px;
    text-decoration: none;
    transition: border-color 0.2s;
}
.cart-upsell-card:hover { border-color: #D4AF37; }
.cart-upsell-img { width: 48px; height: 48px; background: linear-gradient(135deg,#111,#1a1600); border: 1px solid #222; flex-shrink: 0; }
.cart-upsell-info p:first-child { font-size: 0.78rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }
.cart-upsell-info p:last-child  { font-size: 0.72rem; color: #D4AF37; font-weight: 700; margin-top: 2px; }

.cart-promo { margin-top: 16px; display: flex; gap: 0; }
.cart-promo input {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid #333;
    border-right: none;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 11px 14px;
}
.cart-promo input:focus { outline: none; border-color: #D4AF37; }
.cart-promo input::placeholder { color: #444; }
.cart-promo-btn {
    background: #222;
    border: 1px solid #333;
    color: #ccc;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 11px 18px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s;
}
.cart-promo-btn:hover { background: #D4AF37; color: #000; }
.cart-promo-msg { font-size: 0.78rem; font-weight: 700; margin-top: 8px; }
.cart-promo-msg.valid   { color: #3aaa3a; }
.cart-promo-msg.invalid { color: #ff5555; }
.cart-discount-row { color: #3aaa3a !important; }

/* ─── Gallery Filter Bar ────────────────────────────────────────────────────── */
.gallery-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.gallery-filter-tab {
    background: none;
    border: 1px solid #333;
    color: #777;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 8px 18px;
    cursor: pointer;
    text-transform: uppercase;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.gallery-filter-tab:hover  { border-color: #D4AF37; color: #D4AF37; }
.gallery-filter-tab.active { background: #D4AF37; color: #000; border-color: #D4AF37; }

/* ─── Ride of the Month ─────────────────────────────────────────────────────── */
.rotm-card {
    grid-column: 1 / -1;
    display: flex;
    gap: 0;
    background: #111;
    border: 2px solid #D4AF37;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s;
}
.rotm-card:hover { transform: translateY(-3px); }
.rotm-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #D4AF37;
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 10px;
    z-index: 2;
}
.rotm-img {
    width: 260px;
    height: 200px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #0d0d0d, #1a1200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
.rotm-info {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rotm-info h3 { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #D4AF37; margin-bottom: 6px; }
.rotm-info p  { font-size: 0.85rem; color: #aaa; font-weight: 600; margin-bottom: 4px; }
.rotm-info .ig-handle { color: #D4AF37; }
@media (max-width: 600px) { .rotm-card { flex-direction: column; } .rotm-img { width: 100%; } }

/* ─── Lightbox ──────────────────────────────────────────────────────────────── */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    padding: 20px;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-box {
    background: #111;
    border: 1px solid #D4AF37;
    max-width: 700px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.lightbox-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.6rem;
    cursor: pointer;
    z-index: 2;
    transition: color 0.2s;
}
.lightbox-close:hover { color: #D4AF37; }
.lightbox-img {
    width: 100%;
    height: 340px;
    background: #0a0a0a;
    overflow: hidden;
}
.lightbox-info {
    padding: 20px 24px;
}
.lightbox-info h3 { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 6px; }
.lightbox-info p  { font-size: 0.82rem; color: #aaa; font-weight: 600; }

/* ─── VIP Perk Icons ────────────────────────────────────────────────────────── */
.perk-icon {
    display: inline-block;
    font-size: 1.1rem;
    margin-right: 6px;
    vertical-align: middle;
}
@keyframes perk-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.compare-table tr:hover .perk-icon { animation: perk-pulse 0.6s ease; }

/* ─── VIP Urgency Text ──────────────────────────────────────────────────────── */
.vip-urgency {
    text-align: center;
    padding: 16px;
    background: rgba(212,175,55,0.06);
    border: 1px solid rgba(212,175,55,0.2);
    margin: 24px auto 0;
    max-width: 500px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D4AF37;
}

/* ─── Skeleton Screens ──────────────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 2px;
}
.skeleton-card { pointer-events: none; }
.skeleton-img   { width: 100%; height: 200px; margin-bottom: 10px; }
.skeleton-badge { width: 60px; height: 18px; margin-bottom: 12px; }
.skeleton-title { width: 80%; height: 14px; margin-bottom: 8px; }
.skeleton-price { width: 40%; height: 14px; margin-bottom: 14px; }
.skeleton-btn   { width: 100%; height: 38px; }

/* ─── Cookie Consent Banner ─────────────────────────────────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111;
    border-top: 2px solid #D4AF37;
    padding: 14px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 8888;
    transform: translateY(100%);
    transition: transform 0.35s ease;
    flex-wrap: wrap;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { font-size: 0.82rem; color: #aaa; font-weight: 600; margin: 0; }

/* ─── Confetti Canvas ───────────────────────────────────────────────────────── */
#confettiCanvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ─── Product Detail Page ───────────────────────────────────────────────────── */
.product-detail-page {
    min-height: 100vh;
    padding: 160px 40px 80px;
    max-width: 1100px;
    margin: 0 auto;
}
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 80px;
}
.product-detail-img {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #111 0%, #1a1600 60%, #111 100%);
    border: 1px solid #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.product-detail-img .ph-brand { font-size: 1.2rem; letter-spacing: 6px; }
.product-detail-img .ph-name  { font-size: 0.9rem; }
.product-detail-info h1 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.2;
}
.product-detail-price {
    font-size: 2.2rem;
    font-weight: 900;
    color: #D4AF37;
    margin-bottom: 8px;
}
.product-detail-entries {
    font-size: 0.82rem;
    font-weight: 900;
    color: #555;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.product-detail-desc {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 28px;
    border-top: 1px solid #1a1a1a;
    padding-top: 24px;
}
.product-detail-size-label {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 10px;
}
.size-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.size-btn {
    width: 48px;
    height: 48px;
    background: #111;
    border: 1px solid #333;
    color: #ccc;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.size-btn:hover  { border-color: #D4AF37; color: #D4AF37; }
.size-btn.active { background: #D4AF37; color: #000; border-color: #D4AF37; }
.detail-add-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: #D4AF37;
    color: #000;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}
.detail-add-btn:hover:not(:disabled) { background: #fff; }
.detail-add-btn:disabled { background: #333; color: #555; cursor: not-allowed; }

.related-section { padding-top: 60px; border-top: 1px solid #1a1a1a; }
.related-section h2 { font-size: 0.8rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 28px; }
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .product-detail-layout { grid-template-columns: 1fr; gap: 30px; }
    .recently-viewed-grid .rv-card { width: calc(50% - 8px); }
    .rotm-img { width: 100%; }
}

/* ─── Product Image Loaded (real photo swap-in) ─────────────────────────────── */
.product-img-loaded {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0a0a;
}
.product-img-loaded img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.product-card:hover .product-img-loaded img { transform: scale(1.04); }

/* ─── Share Button ──────────────────────────────────────────────────────────── */
.share-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: none;
    border: 1px solid #333;
    color: #777;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.share-btn:hover { color: #D4AF37; border-color: #D4AF37; }

/* ─── Promo Apply Button ────────────────────────────────────────────────────── */
.promo-apply-btn {
    background: #222;
    border: 1px solid #333;
    color: #ccc;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 11px 18px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s;
}
.promo-apply-btn:hover { background: #D4AF37; color: #000; }

/* ─── Cart Upsell Title ─────────────────────────────────────────────────────── */
.cart-upsell-title {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 16px;
}

/* ─── Leaderboard Page ──────────────────────────────────────────────────────── */
.leaderboard-page {
    min-height: 100vh;
    padding: 160px 40px 80px;
    max-width: 800px;
    margin: 0 auto;
}
.leaderboard-header {
    text-align: center;
    margin-bottom: 60px;
}
.leaderboard-header h1 {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #D4AF37;
    margin-bottom: 12px;
}
.leaderboard-header p { color: #aaa; font-size: 0.95rem; }
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table th {
    text-align: left;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #555;
    padding: 12px 16px;
    border-bottom: 1px solid #1a1a1a;
}
.leaderboard-table td { padding: 16px; border-bottom: 1px solid #111; font-size: 0.9rem; color: #ccc; font-weight: 600; }
.lb-rank { font-size: 1.1rem; font-weight: 900; color: #555; width: 50px; }
.lb-rank.gold   { color: #D4AF37; }
.lb-rank.silver { color: #aaa; }
.lb-rank.bronze { color: #cd7f32; }
.lb-name { font-weight: 800; color: #fff; }
.lb-entries { font-weight: 900; color: #D4AF37; text-align: right; white-space: nowrap; }
.lb-tier-badge {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid #333;
    color: #555;
    margin-left: 8px;
    vertical-align: middle;
}
.lb-tier-badge.gold   { border-color: #D4AF37; color: #D4AF37; }
.lb-tier-badge.silver { border-color: #aaa; color: #aaa; }
.lb-progress-bar { width: 100%; height: 3px; background: #1a1a1a; margin-top: 6px; }
.lb-progress-fill { height: 100%; background: #D4AF37; transition: width 1s ease; }
.leaderboard-table tr:hover td { background: rgba(255,255,255,0.02); }
.lb-you { background: rgba(212,175,55,0.04) !important; }
@media (max-width: 768px) { .leaderboard-page { padding: 140px 20px 60px; } }

/* ─── Skip To Content ───────────────────────────────────────────────────────── */
.skip-to-content {
    position: fixed;
    top: -100px;
    left: 16px;
    background: #D4AF37;
    color: #000;
    padding: 10px 20px;
    font-weight: 900;
    font-size: 0.82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    z-index: 99999;
    transition: top 0.2s;
}
.skip-to-content:focus { top: 16px; }

/* ─── Scroll Progress Bar ───────────────────────────────────────────────────── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: #D4AF37;
    z-index: 9999;
    width: 0%;
    transition: width 0.1s linear;
}

/* ─── Dark/Light Mode Toggle ────────────────────────────────────────────────── */

/* ─── Floating Entries Badge ────────────────────────────────────────────────── */
.floating-entries-badge {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: #D4AF37;
    color: #000;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 14px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(212,175,55,0.4);
}

/* ─── Focus Visible Ring ────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }

/* ─── Toast Types ───────────────────────────────────────────────────────────── */
.cart-toast.toast-info    { border-left: 3px solid #4488ff; }
.cart-toast.toast-error   { border-left: 3px solid #ff5555; }
.cart-toast.toast-success { border-left: 3px solid #D4AF37; }

/* ─── Search Overlay ────────────────────────────────────────────────────────── */
.search-icon-btn {
    background: none;
    border: none;
    color: #777;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
    margin-right: 4px;
}
.search-icon-btn:hover { color: #D4AF37; }
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 9998;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 100px 20px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-overlay-inner { width: 100%; max-width: 640px; }
.search-close-btn {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.2s;
}
.search-close-btn:hover { color: #D4AF37; }
.search-input {
    width: 100%;
    background: #111;
    border: 1px solid #D4AF37;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 16px 20px;
    margin-bottom: 12px;
}
.search-input:focus { outline: none; }
.search-result-count {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 16px;
    min-height: 1.4em;
}
.search-results { display: flex; flex-direction: column; gap: 10px; max-height: 400px; overflow-y: auto; }
.search-result-card {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #111;
    border: 1px solid #222;
    padding: 14px;
    text-decoration: none;
    transition: border-color 0.2s;
}
.search-result-card:hover { border-color: #D4AF37; }
.search-result-img { width: 56px; height: 56px; flex-shrink: 0; }
.search-result-name { font-size: 0.88rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.search-result-meta { font-size: 0.75rem; color: #D4AF37; font-weight: 700; }
.search-empty { font-size: 0.85rem; color: #555; font-weight: 600; margin-top: 24px; }
.link-btn { background: none; border: none; color: #D4AF37; cursor: pointer; font-family: 'Inter', sans-serif; font-size: inherit; text-decoration: underline; padding: 0; }

/* ─── Low Stock Badge ───────────────────────────────────────────────────────── */
.badge-low-stock {
    background: rgba(255,60,60,0.15);
    border: 1px solid rgba(255,60,60,0.4);
    color: #ff6b6b;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 3px 8px;
    text-transform: uppercase;
    position: absolute;
    top: 34px;
    left: 10px;
    z-index: 2;
}
.badge-back-in-stock {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #D4AF37;
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 0;
    text-align: center;
    z-index: 3;
}
.badge-week-sales {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ff8c00;
    margin-top: 4px;
    display: block;
}

/* ─── Product Tags ──────────────────────────────────────────────────────────── */
.product-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.product-tag {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid #333;
    color: #555;
}
.product-tag.tag-bestseller { border-color: #D4AF37; color: #D4AF37; }
.product-tag.tag-new        { border-color: #44aaff; color: #44aaff; }
.product-tag.tag-limited    { border-color: #ff6b6b; color: #ff6b6b; }

/* ─── VIP-Only Product Badge ────────────────────────────────────────────────── */
.badge-vip-only {
    position: absolute;
    top: 10px;
    right: 44px;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.4);
    color: #D4AF37;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 7px;
    z-index: 4;
}

/* ─── Color Picker Swatches ─────────────────────────────────────────────────── */
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #333;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}
.color-swatch:hover, .color-swatch.active { border-color: #D4AF37; transform: scale(1.15); }

/* ─── Size Guide Modal ──────────────────────────────────────────────────────── */
.size-guide-link {
    font-size: 0.7rem;
    font-weight: 700;
    color: #555;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}
.size-guide-link:hover { color: #D4AF37; }
.size-guide-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.size-guide-table th, .size-guide-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #1a1a1a;
    font-size: 0.82rem;
    text-align: center;
    color: #ccc;
}
.size-guide-table th { font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #D4AF37; font-size: 0.72rem; }

/* ─── Notify Me ─────────────────────────────────────────────────────────────── */
.notify-me-section { margin-top: 16px; }
.notify-me-section p { font-size: 0.78rem; color: #555; font-weight: 600; margin-bottom: 10px; }
.notify-me-form { display: flex; gap: 0; }
.notify-me-input {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid #333;
    border-right: none;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    padding: 11px 14px;
    letter-spacing: 0.5px;
}
.notify-me-input:focus { outline: none; border-color: #D4AF37; }
.notify-me-btn {
    background: #222;
    border: 1px solid #333;
    color: #ccc;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 11px 16px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.notify-me-btn:hover { background: #D4AF37; color: #000; }

/* ─── Compare Checkbox + Bar ────────────────────────────────────────────────── */
.compare-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #555;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.compare-check { accent-color: #D4AF37; cursor: pointer; }
.compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111;
    border-top: 2px solid #D4AF37;
    padding: 14px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 8000;
    flex-wrap: wrap;
}
.compare-bar-count { font-size: 0.82rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; flex: 1; }
.compare-bar-link {
    background: #D4AF37;
    color: #000;
    padding: 10px 24px;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
}
.compare-bar-link:hover { background: #fff; }
.compare-bar-clear {
    background: none;
    border: none;
    color: #555;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}
.compare-bar-clear:hover { color: #D4AF37; }

/* ─── Gallery Like Button ────────────────────────────────────────────────────── */
.gallery-like-btn {
    position: absolute;
    bottom: 50px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    border: 1px solid #333;
    color: #777;
    font-size: 0.8rem;
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
    transition: color 0.2s, border-color 0.2s;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}
.gallery-like-btn:hover, .gallery-like-btn.liked { color: #D4AF37; border-color: #D4AF37; }

/* ─── Gallery Share Button ──────────────────────────────────────────────────── */
.gallery-share-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    border: 1px solid #333;
    color: #777;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 3;
    transition: color 0.2s, border-color 0.2s;
    font-family: 'Inter', sans-serif;
}
.gallery-share-btn:hover { color: #D4AF37; border-color: #D4AF37; }

/* ─── Gallery Search Bar ────────────────────────────────────────────────────── */
.gallery-search-bar {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    max-width: 400px;
}
.gallery-search-input {
    flex: 1;
    background: #111;
    border: 1px solid #333;
    border-right: none;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 10px 14px;
    text-transform: uppercase;
}
.gallery-search-input:focus { outline: none; border-color: #D4AF37; }
.gallery-search-input::placeholder { color: #333; }

/* ─── Gallery Load More ─────────────────────────────────────────────────────── */
.gallery-load-more-wrap { text-align: center; margin-top: 36px; }

/* ─── Gallery Masonry Toggle ────────────────────────────────────────────────── */
.gallery-layout-toggle { display: flex; gap: 6px; }
.layout-btn {
    background: none;
    border: 1px solid #333;
    color: #555;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.layout-btn.active, .layout-btn:hover { color: #D4AF37; border-color: #D4AF37; }
.gallery-grid.masonry {
    display: block;
    columns: 3;
    column-gap: 20px;
}
.gallery-grid.masonry .gallery-card {
    break-inside: avoid;
    margin-bottom: 20px;
    width: 100%;
}
@media (max-width: 768px) { .gallery-grid.masonry { columns: 2; } }
@media (max-width: 480px) { .gallery-grid.masonry { columns: 1; } }

/* ─── ROTM Archive ──────────────────────────────────────────────────────────── */
.rotm-archive {
    padding: 60px 40px;
    background: #050505;
    border-top: 1px solid #1a1a1a;
    max-width: 1200px;
    margin: 0 auto;
}
.rotm-archive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}
.rotm-archive-header h3 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; }
.rotm-archive-toggle { background: none; border: none; color: #D4AF37; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.rotm-archive-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.rotm-archive-card {
    background: #111;
    border: 1px solid #222;
    padding: 16px 18px;
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    transition: border-color 0.2s;
}
.rotm-archive-card:hover { border-color: rgba(212,175,55,0.4); }
.rotm-archive-card .arch-name { font-size: 0.85rem; font-weight: 800; color: #D4AF37; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.rotm-archive-card .arch-info { font-size: 0.75rem; color: #777; font-weight: 600; margin-bottom: 6px; }
.rotm-archive-card .arch-date { font-size: 0.65rem; color: #444; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

/* ─── Free Shipping Bar ─────────────────────────────────────────────────────── */
.free-ship-bar-wrap { margin-bottom: 20px; }
.free-ship-label { font-size: 0.72rem; font-weight: 700; color: #777; letter-spacing: 1px; margin-bottom: 8px; }
.free-ship-bar {
    height: 4px;
    background: #1a1a1a;
    border-radius: 2px;
    overflow: hidden;
}
.free-ship-fill {
    height: 100%;
    background: #D4AF37;
    transition: width 0.4s ease;
}
.free-ship-unlocked { font-size: 0.72rem; font-weight: 900; color: #D4AF37; letter-spacing: 1px; text-transform: uppercase; }

/* ─── Gift Wrap & Cart Options ──────────────────────────────────────────────── */
.cart-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #111;
    font-size: 0.82rem;
    color: #ccc;
    font-weight: 600;
}
.cart-option-check { accent-color: #D4AF37; cursor: pointer; }
.cart-option-label { cursor: pointer; flex: 1; }
.cart-option-price { color: #D4AF37; font-weight: 700; }

/* ─── Estimated Delivery ────────────────────────────────────────────────────── */
.cart-delivery-note { font-size: 0.75rem; color: #555; font-weight: 600; margin-top: 8px; letter-spacing: 0.5px; }

/* ─── Cart Newsletter Opt-In ────────────────────────────────────────────────── */
.cart-newsletter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0 4px;
    font-size: 0.78rem;
    color: #555;
    font-weight: 600;
}

/* ─── Cart Share Button ─────────────────────────────────────────────────────── */
.cart-share-btn {
    background: none;
    border: 1px solid #222;
    color: #555;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 9px 16px;
    cursor: pointer;
    margin-top: 12px;
    transition: color 0.2s, border-color 0.2s;
}
.cart-share-btn:hover { color: #D4AF37; border-color: #D4AF37; }

/* ─── Apple Pay / Wallet Buttons ────────────────────────────────────────────── */
.cart-wallet-row {
    margin-top: 12px;
    position: relative;
}
.cart-wallet-btn {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    color: #555;
    border: 1px solid #222;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: not-allowed;
    text-align: center;
    position: relative;
}
.cart-wallet-btn::after {
    content: 'COMING SOON';
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #333;
}

/* ─── Save For Later ────────────────────────────────────────────────────────── */
.save-later-btn {
    background: none;
    border: none;
    color: #444;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    margin-top: 4px;
    text-decoration: underline;
    transition: color 0.2s;
}
.save-later-btn:hover { color: #D4AF37; }
.saved-items-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid #1a1a1a; }
.saved-items-title { font-size: 0.7rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 16px; }
.saved-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #111; }
.saved-item-img { width: 48px; height: 48px; flex-shrink: 0; }
.saved-item-name { font-size: 0.82rem; font-weight: 800; color: #ccc; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.saved-item-size, .saved-item-price { font-size: 0.75rem; color: #555; font-weight: 600; }
.saved-item-price { color: #D4AF37; }
.saved-item-info { flex: 1; }

/* ─── Checkout Notes & Tax ──────────────────────────────────────────────────── */
.cart-notes-field {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #222;
    color: #ccc;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    padding: 10px 14px;
    resize: vertical;
    margin-bottom: 12px;
}
.cart-notes-field:focus { outline: none; border-color: #D4AF37; }
.cart-notes-label { font-size: 0.68rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #555; margin-bottom: 6px; display: block; }
.cart-summary-row.tax-row { color: #555 !important; font-size: 0.82rem; }
.cart-summary-row.tax-row span { color: #555 !important; }

/* ─── VIP Upgrade Prompt in Cart ────────────────────────────────────────────── */
.vip-upgrade-banner {
    background: rgba(212,175,55,0.06);
    border: 1px solid rgba(212,175,55,0.2);
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.vip-upgrade-text { font-size: 0.78rem; font-weight: 700; color: #aaa; flex: 1; }
.vip-upgrade-text strong { color: #D4AF37; }
.vip-upgrade-dismiss { background: none; border: none; color: #333; font-size: 1rem; cursor: pointer; padding: 0; }

/* ─── Bulk Discount Message ─────────────────────────────────────────────────── */
.bulk-discount-tip {
    background: rgba(212,175,55,0.04);
    border-left: 2px solid rgba(212,175,55,0.3);
    padding: 10px 14px;
    font-size: 0.78rem;
    color: #777;
    font-weight: 600;
    margin-bottom: 12px;
}
.bulk-discount-tip code {
    color: #D4AF37;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
}

/* ─── Home Page — Featured Collection ──────────────────────────────────────── */
.featured-collection {
    display: flex;
    min-height: 500px;
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
}
.featured-img {
    flex: 1;
    background: linear-gradient(135deg, #111 0%, #1a1600 60%, #111 100%);
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.featured-img::after {
    content: 'CNW';
    font-size: 8rem;
    font-weight: 900;
    color: rgba(212,175,55,0.04);
    letter-spacing: 10px;
    position: absolute;
}
.featured-info {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.featured-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; margin-bottom: 16px; }
.featured-info h2 { font-size: 2.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 18px; line-height: 1.1; }
.featured-info p  { color: #aaa; font-size: 0.95rem; line-height: 1.75; margin-bottom: 32px; }
@media (max-width: 768px) { .featured-collection { flex-direction: column; } }

/* ─── Home Page — Next Meet Countdown ──────────────────────────────────────── */
.next-meet-section {
    background: #050505;
    border-top: 2px solid #D4AF37;
    padding: 70px 40px;
    text-align: center;
}
.next-meet-section h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 14px; }
.next-meet-section h3 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 32px; }
.meet-countdown-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.meet-countdown-unit { text-align: center; min-width: 80px; }
.meet-countdown-num { font-size: 3.5rem; font-weight: 900; color: #D4AF37; display: block; line-height: 1; }
.meet-countdown-lbl { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-top: 8px; display: block; }

/* ─── Home Page — Newsletter ────────────────────────────────────────────────── */
.newsletter-section {
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
    padding: 80px 40px;
    text-align: center;
}
.newsletter-section h2 { font-size: 1.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #fff; margin-bottom: 10px; }
.newsletter-section p  { color: #aaa; font-size: 0.9rem; margin-bottom: 30px; }
.newsletter-form { display: flex; justify-content: center; gap: 0; max-width: 480px; margin: 0 auto; }
.newsletter-input {
    flex: 1;
    background: #111;
    border: 1px solid #333;
    border-right: none;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    padding: 14px 18px;
    letter-spacing: 1px;
}
.newsletter-input:focus { outline: none; border-color: #D4AF37; }
.newsletter-submit {
    background: #D4AF37;
    color: #000;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 14px 22px;
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.2s;
}
.newsletter-submit:hover { background: #fff; }
.newsletter-confirmed { font-size: 0.82rem; font-weight: 700; color: #D4AF37; margin-top: 16px; }

/* ─── Home Page — New Arrivals Strip ────────────────────────────────────────── */
.new-arrivals-section {
    padding: 60px 0 40px;
    background: #050505;
    border-top: 1px solid #1a1a1a;
    overflow: hidden;
}
.new-arrivals-header { padding: 0 40px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.new-arrivals-header h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; }
.new-arrivals-strip {
    display: flex;
    gap: 20px;
    padding: 0 40px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.new-arrivals-strip::-webkit-scrollbar { display: none; }
.arrivals-card {
    min-width: 200px;
    flex-shrink: 0;
    text-decoration: none;
}
.arrivals-img {
    height: 200px;
    background: linear-gradient(135deg, #111, #1a1600);
    border: 1px solid #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}
.arrivals-card:hover .arrivals-img { border-color: #D4AF37; }
.arrivals-name  { font-size: 0.78rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.arrivals-price { font-size: 0.78rem; color: #D4AF37; font-weight: 700; }

/* ─── Home Page — Instagram Grid ────────────────────────────────────────────── */
.instagram-section {
    padding: 80px 40px;
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
    text-align: center;
}
.instagram-section h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 28px; }
.instagram-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    max-width: 900px;
    margin: 0 auto 24px;
}
.ig-cell {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #111, #1a1600);
    border: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0.4;
    transition: opacity 0.2s, border-color 0.2s;
    cursor: pointer;
}
.ig-cell:hover { opacity: 0.8; border-color: #D4AF37; }
.instagram-handle { font-size: 0.82rem; color: #D4AF37; font-weight: 700; letter-spacing: 1px; }
@media (max-width: 768px) { .instagram-grid { grid-template-columns: repeat(3, 1fr); } }

/* ─── Home Page — Brand Stats ────────────────────────────────────────────────── */
.brand-stats-section {
    background: #050505;
    border-top: 1px solid #1a1a1a;
    padding: 80px 40px;
    text-align: center;
}
.brand-stats-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 50px; }
.brand-stats-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}
.brand-stat-item .stat-num { font-size: 4rem; font-weight: 900; color: #D4AF37; display: block; line-height: 1; }
.brand-stat-item .stat-lbl { font-size: 0.72rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-top: 8px; display: block; }

/* ─── Home Page — As Seen At Bar ────────────────────────────────────────────── */
.as-seen-at {
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    overflow-x: auto;
    scrollbar-width: none;
}
.as-seen-at::-webkit-scrollbar { display: none; }
.as-seen-label { font-size: 0.6rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #333; white-space: nowrap; flex-shrink: 0; }
.as-seen-logos { display: flex; gap: 40px; align-items: center; }
.as-seen-logo {
    height: 28px;
    width: 80px;
    background: #1a1a1a;
    opacity: 0.4;
    flex-shrink: 0;
}

/* ─── Home Page — Entry Milestone Bar ──────────────────────────────────────── */
.entry-milestone {
    background: #111;
    border: 1px solid #1a1a1a;
    padding: 30px 40px;
    text-align: center;
    margin: 0 40px;
}
.milestone-label { font-size: 0.7rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 12px; }
.milestone-bar { height: 6px; background: #1a1a1a; margin: 12px 0; }
.milestone-fill { height: 100%; background: linear-gradient(90deg, #D4AF37, #f5e07a); transition: width 1s ease; }
.milestone-meta { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 700; color: #555; }
.milestone-meta .curr { color: #D4AF37; }

/* ─── Home Page — Brand Manifesto ──────────────────────────────────────────── */
.manifesto-section {
    background: #050505;
    border-top: 1px solid #1a1a1a;
    padding: 100px 40px;
    text-align: center;
}
.manifesto-section blockquote {
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #D4AF37;
    line-height: 1.5;
    max-width: 860px;
    margin: 0 auto 20px;
}
.manifesto-section cite { font-size: 0.72rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #333; font-style: normal; }

/* ─── VIP Member Count ──────────────────────────────────────────────────────── */
.vip-member-count {
    text-align: center;
    padding: 24px;
    background: rgba(212,175,55,0.04);
    border: 1px solid rgba(212,175,55,0.15);
    margin: 40px auto 0;
    max-width: 500px;
    font-size: 0.82rem;
    color: #777;
    font-weight: 600;
}
.vip-member-count strong { color: #D4AF37; font-size: 1.1rem; }

/* ─── VIP Discord Card ──────────────────────────────────────────────────────── */
.discord-cta-card {
    background: #0e1128;
    border: 1px solid #3441a3;
    padding: 36px 40px;
    text-align: center;
    max-width: 700px;
    margin: 60px auto;
}
.discord-cta-card .discord-icon { font-size: 2.5rem; margin-bottom: 14px; }
.discord-cta-card h3 { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #7289da; margin-bottom: 10px; }
.discord-cta-card p  { color: #aaa; font-size: 0.88rem; margin-bottom: 24px; line-height: 1.7; }
.btn-discord {
    display: inline-block;
    background: #7289da;
    color: #fff;
    padding: 12px 28px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-discord:hover { background: #5e77d4; }

/* ─── VIP-Only Gallery Preview ──────────────────────────────────────────────── */
.gallery-vip-preview {
    background: linear-gradient(135deg, #111, #0d1000);
    border: 1px solid rgba(212,175,55,0.2);
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.gallery-vip-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(212,175,55,0.02) 4px, rgba(212,175,55,0.02) 8px);
}
.gallery-vip-preview .lock-icon { font-size: 2rem; color: #D4AF37; opacity: 0.6; }
.gallery-vip-preview p { font-size: 0.72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; opacity: 0.8; }

/* ─── VIP Tier Progress Bar ─────────────────────────────────────────────────── */
.vip-tier-progress { background: #111; border: 1px solid #1a1a1a; padding: 24px 28px; margin-bottom: 28px; }
.vip-tier-progress-label { font-size: 0.68rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #555; margin-bottom: 12px; display: flex; justify-content: space-between; }
.vip-tier-progress-bar { height: 6px; background: #1a1a1a; }
.vip-tier-progress-fill { height: 100%; background: #D4AF37; transition: width 0.8s ease; }

/* ─── FAQ Accordion ─────────────────────────────────────────────────────────── */
.faq-page { max-width: 780px; margin: 0 auto; padding: 160px 40px 80px; }
.faq-page h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.faq-page > p { color: #777; font-size: 0.9rem; margin-bottom: 60px; }
.faq-category-title { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 20px; margin-top: 50px; }
.faq-item { border-bottom: 1px solid #1a1a1a; }
.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 18px 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #ccc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 0.2s;
    letter-spacing: 0.3px;
}
.faq-question:hover { color: #D4AF37; }
.faq-question.open { color: #D4AF37; }
.faq-chevron { font-size: 1rem; transition: transform 0.25s; flex-shrink: 0; color: #555; }
.faq-question.open .faq-chevron { transform: rotate(180deg); color: #D4AF37; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.faq-answer.open { max-height: 400px; padding-bottom: 18px; }
.faq-answer p { color: #aaa; font-size: 0.88rem; line-height: 1.75; }

/* ─── About Page ────────────────────────────────────────────────────────────── */
.about-page { max-width: 900px; margin: 0 auto; padding: 160px 40px 80px; }
.about-hero { text-align: center; margin-bottom: 80px; }
.about-hero h1 { font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.about-hero p { color: #aaa; font-size: 1rem; max-width: 600px; margin: 0 auto; line-height: 1.8; }
.about-img-placeholder {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, #111, #1a1600);
    border: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.4;
    margin-bottom: 60px;
}
.about-timeline { position: relative; padding-left: 28px; border-left: 2px solid #D4AF37; margin-top: 60px; }
.about-timeline-item { margin-bottom: 40px; position: relative; }
.about-timeline-item::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 6px;
    width: 12px;
    height: 12px;
    background: #D4AF37;
    border-radius: 50%;
}
.timeline-year { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 6px; }
.timeline-title { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 8px; }
.timeline-body { font-size: 0.88rem; color: #aaa; line-height: 1.7; }

/* ─── Events Page ───────────────────────────────────────────────────────────── */
.events-page { padding: 160px 40px 80px; max-width: 1100px; margin: 0 auto; }
.events-page h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; }
.event-card { background: #111; border: 1px solid #222; overflow: hidden; transition: border-color 0.2s; }
.event-card:hover { border-color: #D4AF37; }
.event-card-img {
    height: 180px;
    background: linear-gradient(135deg, #111, #1a1600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: 0.5;
}
.event-card-body { padding: 20px 22px; }
.event-date { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 8px; }
.event-card-body h3 { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 8px; }
.event-card-body p  { font-size: 0.82rem; color: #777; line-height: 1.6; margin-bottom: 16px; }
.event-capacity { font-size: 0.72rem; font-weight: 700; color: #555; letter-spacing: 1px; margin-bottom: 14px; }

/* ─── Contact Page ──────────────────────────────────────────────────────────── */
.contact-page { max-width: 700px; margin: 0 auto; padding: 160px 40px 80px; }
.contact-page h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.contact-form { margin-top: 40px; }
.form-field { margin-bottom: 20px; }
.form-label { display: block; font-size: 0.68rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #555; margin-bottom: 8px; }
.form-input, .form-select, .form-textarea {
    display: block;
    width: 100%;
    background: #111;
    border: 1px solid #222;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    padding: 13px 16px;
    transition: border-color 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #D4AF37; }
.form-input.valid   { border-color: #4a4; }
.form-input.invalid { border-color: #f55; }
.form-error { font-size: 0.72rem; color: #f77; font-weight: 700; margin-top: 4px; display: none; }
.form-input.invalid + .form-error { display: block; }
.form-textarea { resize: vertical; min-height: 120px; }
.form-success { background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.3); padding: 20px; text-align: center; color: #D4AF37; font-weight: 700; font-size: 0.9rem; margin-top: 20px; }

/* ─── Blog Page ─────────────────────────────────────────────────────────────── */
.blog-page { padding: 160px 40px 80px; max-width: 1100px; margin: 0 auto; }
.blog-page h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 60px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.blog-card { background: #111; border: 1px solid #222; overflow: hidden; transition: border-color 0.2s; text-decoration: none; display: block; }
.blog-card:hover { border-color: #D4AF37; }
.blog-card-img {
    height: 200px;
    background: linear-gradient(135deg, #111, #1a1600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.5;
}
.blog-card-body { padding: 22px 24px; }
.blog-tag { font-size: 0.6rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; margin-bottom: 10px; display: block; }
.blog-card-body h2 { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 10px; line-height: 1.4; }
.blog-card-body p  { font-size: 0.82rem; color: #777; line-height: 1.65; margin-bottom: 14px; }
.blog-meta { font-size: 0.68rem; color: #444; font-weight: 700; letter-spacing: 1px; }

/* ─── Press Page ────────────────────────────────────────────────────────────── */
.press-page { max-width: 900px; margin: 0 auto; padding: 160px 40px 80px; }
.press-page h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.press-quote { border-left: 3px solid #D4AF37; padding: 20px 28px; margin: 40px 0; background: rgba(212,175,55,0.04); }
.press-quote blockquote { font-size: 1.1rem; font-weight: 700; color: #fff; line-height: 1.6; margin-bottom: 10px; }
.press-quote cite { font-size: 0.75rem; color: #D4AF37; font-weight: 900; letter-spacing: 1px; font-style: normal; }
.press-logo-grid { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.press-logo-box {
    height: 60px;
    width: 120px;
    background: #111;
    border: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #333;
    text-transform: uppercase;
}
.press-kit-download { margin-top: 50px; text-align: center; }

/* ─── Compare Page ──────────────────────────────────────────────────────────── */
.compare-page { padding: 160px 40px 80px; max-width: 1200px; margin: 0 auto; overflow-x: auto; }
.compare-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 40px; }
.compare-product-table { width: 100%; border-collapse: collapse; }
.compare-product-table th { padding: 20px 16px; background: #111; border: 1px solid #1a1a1a; font-size: 0.72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; text-align: left; }
.compare-product-table td { padding: 16px; border: 1px solid #111; font-size: 0.85rem; color: #ccc; font-weight: 600; vertical-align: top; }
.compare-product-table tr:nth-child(even) td { background: rgba(255,255,255,0.01); }

/* ─── Sitemap Page ──────────────────────────────────────────────────────────── */
.sitemap-page { padding: 160px 40px 80px; max-width: 900px; margin: 0 auto; }
.sitemap-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 60px; }
.sitemap-section { margin-bottom: 50px; }
.sitemap-section h2 { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 20px; }
.sitemap-links { display: flex; flex-direction: column; gap: 8px; }
.sitemap-links a { color: #ccc; text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: color 0.2s; }
.sitemap-links a:hover { color: #D4AF37; }

/* ─── Winners Page ──────────────────────────────────────────────────────────── */
.winners-page { padding: 160px 40px 80px; max-width: 900px; margin: 0 auto; }
.winners-page h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.winners-tbd {
    background: rgba(212,175,55,0.05);
    border: 1px solid rgba(212,175,55,0.2);
    padding: 50px;
    text-align: center;
    margin: 40px 0;
}
.winners-tbd .trophy { font-size: 3rem; margin-bottom: 16px; display: block; }
.winners-tbd h2 { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #D4AF37; margin-bottom: 10px; }
.winners-tbd p { color: #777; font-size: 0.88rem; }
.winners-table { width: 100%; border-collapse: collapse; margin-top: 40px; }
.winners-table th { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; padding: 12px 16px; border-bottom: 1px solid #1a1a1a; text-align: left; }
.winners-table td { padding: 16px; border-bottom: 1px solid #111; font-size: 0.85rem; color: #ccc; font-weight: 600; }
.winners-table td:first-child { color: #D4AF37; font-weight: 900; }

/* ─── Referral Page ─────────────────────────────────────────────────────────── */
.referral-page { max-width: 700px; margin: 0 auto; padding: 160px 40px 80px; text-align: center; }
.referral-page h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.referral-code-box {
    background: #111;
    border: 1px solid #D4AF37;
    padding: 30px 40px;
    margin: 40px auto;
    max-width: 400px;
}
.referral-code-label { font-size: 0.68rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 12px; }
.referral-code-value { font-size: 2rem; font-weight: 900; color: #D4AF37; letter-spacing: 6px; font-family: monospace; }
.referral-steps { text-align: left; max-width: 500px; margin: 40px auto; }
.referral-step { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.referral-step-num { width: 32px; height: 32px; background: #D4AF37; color: #000; font-weight: 900; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.referral-step-text h3 { font-size: 0.88rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 4px; }
.referral-step-text p  { font-size: 0.82rem; color: #777; line-height: 1.6; }

/* ─── Gift Page ─────────────────────────────────────────────────────────────── */
.gift-page { max-width: 700px; margin: 0 auto; padding: 160px 40px 80px; text-align: center; }
.gift-page h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.gift-tiers { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 40px 0; }
.gift-tier-card { background: #111; border: 1px solid #222; padding: 30px 28px; width: 240px; text-align: left; transition: border-color 0.2s; cursor: pointer; }
.gift-tier-card:hover, .gift-tier-card.selected { border-color: #D4AF37; }
.gift-tier-card h3 { font-size: 0.8rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; margin-bottom: 8px; }
.gift-tier-card .gift-price { font-size: 2rem; font-weight: 900; color: #fff; }

/* ─── Wishlist Page ─────────────────────────────────────────────────────────── */
.wishlist-page { padding: 160px 40px 80px; max-width: 1100px; margin: 0 auto; }
.wishlist-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.wishlist-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; flex-wrap: wrap; gap: 12px; }
.wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.wishlist-empty { text-align: center; padding: 80px 40px; color: #555; }
.wishlist-empty .empty-icon { font-size: 3rem; margin-bottom: 16px; display: block; opacity: 0.3; }

/* ─── Offline Page ──────────────────────────────────────────────────────────── */
.offline-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.offline-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 16px; }
.offline-page p { color: #777; font-size: 0.9rem; line-height: 1.7; max-width: 400px; }

/* ─── Form Validation States ────────────────────────────────────────────────── */
.field-valid   { border-color: #3a3 !important; }
.field-invalid { border-color: #f55 !important; }
.field-error-msg { font-size: 0.72rem; color: #f77; font-weight: 700; margin-top: 4px; display: none; }
.field-invalid ~ .field-error-msg { display: block; }

/* ─── Reduced Motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    .scroll-progress { display: none; }
}

/* ─── Print Styles ──────────────────────────────────────────────────────────── */
@media print {
    .navbar, .mobile-menu, .promo-banner, .site-footer, .back-to-top,
    .cookie-banner, .cart-toast, .scroll-progress, .floating-entries-badge,
    .quick-add-overlay, .wishlist-btn, .compare-bar, .search-overlay { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    a { color: #000 !important; }
    .product-detail-price, .entries-live { color: #000 !important; }
}

/* ─── Events Page — Additional Styles ──────────────────────────────────────── */
.events-header { text-align: center; margin-bottom: 20px; }
.events-header h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.event-card--featured { border-color: rgba(212,175,55,0.3); }
.event-card-date {
    background: #D4AF37;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-width: 80px;
    flex-shrink: 0;
}
.event-month { font-size: 0.6rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; }
.event-day   { font-size: 2.2rem; font-weight: 900; line-height: 1; }
.event-year  { font-size: 0.65rem; font-weight: 700; opacity: 0.7; }
.event-card  { display: flex; gap: 0; }
.event-card-body { padding: 22px 24px; flex: 1; }
.event-badge { font-size: 0.6rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 8px; display: block; }
.event-badge--gold { background: #D4AF37; color: #000; padding: 2px 8px; display: inline-block; }
.event-location { font-size: 0.8rem; color: #888; margin-bottom: 6px !important; font-weight: 600; }
.event-detail   { font-size: 0.82rem; color: #666; margin-bottom: 14px !important; }
.event-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.72rem; color: #555; font-weight: 700; margin-bottom: 0; }
.meet-countdown-block { text-align: center; padding: 50px 40px; background: #0a0a0a; border: 1px solid #1a1a1a; }
.meet-countdown-timer { display: flex; align-items: center; justify-content: center; gap: 8px; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.countdown-unit span { font-size: 3rem; font-weight: 900; color: #D4AF37; font-variant-numeric: tabular-nums; min-width: 80px; text-align: center; }
.countdown-unit label { font-size: 0.6rem; font-weight: 900; letter-spacing: 3px; color: #555; text-transform: uppercase; }
.countdown-sep { font-size: 2.5rem; font-weight: 900; color: #333; margin-bottom: 20px; }
.expect-card { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 28px 24px; text-align: center; }
.expect-card h3 { font-size: 0.85rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 10px; }
.expect-card p  { font-size: 0.82rem; color: #777; line-height: 1.6; }

/* ─── Contact Page — Additional Styles ─────────────────────────────────────── */
.contact-header { text-align: center; padding: 160px 40px 40px; }
.contact-header h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.contact-layout { display: grid; grid-template-columns: 280px 1fr; gap: 60px; max-width: 1000px; margin: 0 auto; padding: 0 40px 80px; }
.contact-info-col {}
.contact-info-block { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid #111; }
.contact-info-block:last-of-type { border-bottom: none; }
.contact-info-block h3 { font-size: 0.7rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; margin-bottom: 6px; }
.contact-info-block p  { font-size: 0.88rem; color: #aaa; }
.contact-form-col { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 40px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.68rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #555; margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
    display: block; width: 100%; background: #111; border: 1px solid #222; color: #fff;
    font-family: 'Inter', sans-serif; font-size: 0.9rem; padding: 13px 16px; transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #D4AF37; }
.form-group textarea { resize: vertical; min-height: 130px; }
.field-error { font-size: 0.72rem; color: #f77; font-weight: 700; margin-top: 4px; display: block; min-height: 18px; }
.input-error { border-color: #f55 !important; }
.input-ok    { border-color: #3a3 !important; }

/* ─── Press Page — Additional Styles ───────────────────────────────────────── */
.press-header { text-align: center; padding: 160px 40px 40px; max-width: 900px; margin: 0 auto; }
.press-header h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.press-pullquote { border-left: 4px solid #D4AF37; padding: 28px 36px; margin: 50px auto; background: rgba(212,175,55,0.04); max-width: 700px; }
.press-pullquote blockquote { font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.65; margin-bottom: 12px; }
.press-pullquote-src { font-size: 0.72rem; color: #D4AF37; font-weight: 900; letter-spacing: 2px; }
.press-stat { text-align: center; padding: 20px; background: #0a0a0a; border: 1px solid #1a1a1a; }
.press-stat-num   { display: block; font-size: 2.2rem; font-weight: 900; color: #D4AF37; margin-bottom: 6px; }
.press-stat-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #555; }
.press-asset-card { background: #0a0a0a; border: 1px solid #1a1a1a; overflow: hidden; }
.press-asset-preview { height: 140px; display: flex; align-items: center; justify-content: center; padding: 20px; border-bottom: 1px solid #1a1a1a; }
.press-asset-info { padding: 16px; }
.press-asset-info p { font-size: 0.8rem; color: #aaa; font-weight: 600; }
.press-coverage-card { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 28px; }
.press-outlet-logo { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 14px; border: 1px solid #222; display: inline-block; padding: 4px 10px; }
.press-coverage-quote { font-size: 0.92rem; color: #ccc; font-style: italic; line-height: 1.6; margin-bottom: 12px; }
.press-coverage-date  { font-size: 0.7rem; color: #444; font-weight: 700; letter-spacing: 1px; }
.press-contact-block { text-align: center; margin-top: 80px; padding: 60px 40px; background: rgba(212,175,55,0.04); border: 1px solid rgba(212,175,55,0.15); }
.press-contact-block h2 { font-size: 1.4rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }

/* ─── Blog Page — Additional Styles ────────────────────────────────────────── */
.blog-header { text-align: center; padding: 160px 40px 40px; }
.blog-header h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.blog-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #111; border: 1px solid #222; overflow: hidden; margin-top: 20px; }
.blog-featured-img { min-height: 320px; }
.blog-featured-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-body h2 { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin: 12px 0; line-height: 1.4; }
.blog-excerpt { font-size: 0.88rem; color: #777; line-height: 1.7; margin-bottom: 12px; }
.blog-meta { font-size: 0.7rem; color: #444; font-weight: 700; letter-spacing: 1px; display: flex; gap: 8px; align-items: center; }
.blog-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-tag--gold { background: rgba(212,175,55,0.12); color: #D4AF37; padding: 2px 8px; }
.blog-read-more { font-size: 0.72rem; font-weight: 900; letter-spacing: 2px; color: #D4AF37; text-decoration: none; margin-top: 14px; display: inline-block; }
.blog-read-more:hover { text-decoration: underline; }
.blog-card-body h3 { font-size: 0.95rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 10px; line-height: 1.4; }

/* ─── Compare Page — Additional Styles ─────────────────────────────────────── */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th { padding: 16px; background: #0a0a0a; border: 1px solid #1a1a1a; font-size: 0.72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; text-align: left; }
.compare-table td { padding: 16px; border: 1px solid #111; font-size: 0.85rem; color: #ccc; vertical-align: middle; }
.compare-table tr:nth-child(even) td { background: rgba(255,255,255,0.01); }
.compare-table tr:last-child td { border-bottom: none; }
.product-tag { font-size: 0.6rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; background: rgba(212,175,55,0.1); color: #D4AF37; padding: 2px 6px; border-radius: 2px; margin-right: 4px; }

/* ─── Sitemap Page — Additional Styles ─────────────────────────────────────── */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px; }
.sitemap-section h2 { font-size: 0.7rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #1a1a1a; }
.sitemap-section ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sitemap-section ul li a { color: #aaa; text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: color 0.2s; }
.sitemap-section ul li a:hover { color: #D4AF37; }

/* ─── Referral Page — Additional Styles ────────────────────────────────────── */
.referral-header { text-align: center; padding: 160px 40px 40px; }
.referral-header h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.referral-steps { display: flex; align-items: flex-start; gap: 0; max-width: 800px; margin: 50px auto; flex-wrap: wrap; justify-content: center; }
.referral-step { flex: 1; min-width: 180px; text-align: center; padding: 0 20px; }
.referral-step-num { width: 48px; height: 48px; background: #D4AF37; color: #000; font-weight: 900; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.referral-step h3 { font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 8px; }
.referral-step p  { font-size: 0.82rem; color: #777; line-height: 1.6; }
.referral-step-arrow { font-size: 1.5rem; color: #333; align-self: center; padding: 0 8px; flex-shrink: 0; }
.referral-code-box { background: #0a0a0a; border: 1px solid rgba(212,175,55,0.3); padding: 48px 40px; max-width: 560px; margin: 0 auto; }
.referral-code-display { font-size: 2rem; font-weight: 900; color: #D4AF37; letter-spacing: 6px; font-family: monospace; margin: 16px 0 24px; }
.referral-link-row { display: flex; gap: 12px; margin-top: 16px; }

/* ─── Gift Page — Additional Styles ────────────────────────────────────────── */
.gift-header { text-align: center; padding: 160px 40px 40px; }
.gift-header h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.gift-tiers { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: 40px 0; }
.gift-tier-card { background: #111; border: 2px solid #222; padding: 32px 28px; width: 260px; text-align: center; transition: border-color 0.2s; cursor: pointer; }
.gift-tier-card:hover { border-color: #D4AF37; }
.gift-tier-card--featured { border-color: rgba(212,175,55,0.4); }
.gift-tier-selected { border-color: #D4AF37 !important; }
.gift-tier-badge { display: inline-block; font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; padding: 4px 12px; margin-bottom: 16px; }
.gift-tier-badge--silver { background: rgba(200,200,200,0.15); color: #aaa; }
.gift-tier-badge--gold   { background: rgba(212,175,55,0.2); color: #D4AF37; }
.gift-tier-price { font-size: 2.4rem; font-weight: 900; color: #fff; margin-bottom: 20px; }
.gift-tier-price span { font-size: 1rem; color: #555; font-weight: 600; }
.gift-perks-list { list-style: none; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.gift-perks-list li { font-size: 0.82rem; color: #ccc; }
.gift-select-indicator { font-size: 0.7rem; font-weight: 900; letter-spacing: 2px; color: #D4AF37; min-height: 20px; margin-top: 12px; }
.gift-form-wrap { max-width: 560px; margin: 0 auto; padding: 40px; background: #0a0a0a; border: 1px solid #1a1a1a; }
.gift-summary { background: #111; border: 1px solid #1a1a1a; padding: 20px; margin: 20px 0; }

/* ─── About / FAQ / Winners — Additional Styles ─────────────────────────────── */
.about-page { padding: 160px 40px 80px; max-width: 860px; margin: 0 auto; }
.about-hero { text-align: center; margin-bottom: 60px; }
.about-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; margin-bottom: 12px; }
.about-hero h1 { font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #fff; margin-bottom: 20px; }
.about-intro { font-size: 1rem; color: #aaa; line-height: 1.8; max-width: 560px; margin: 0 auto; }
.about-body { margin-bottom: 60px; }
.about-body p { font-size: 0.95rem; color: #aaa; line-height: 1.85; margin-bottom: 20px; max-width: 680px; }
.about-timeline { margin-top: 60px; }
.about-timeline h2 { font-size: 0.7rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; margin-bottom: 40px; }
.timeline-item { display: flex; gap: 40px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #111; }
.timeline-item:last-child { border-bottom: none; }
.timeline-year { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; color: #333; text-transform: uppercase; min-width: 50px; padding-top: 4px; }
.timeline-title { font-size: 0.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 8px; }
.timeline-body { font-size: 0.85rem; color: #666; line-height: 1.7; }
.faq-page { padding: 160px 40px 80px; max-width: 760px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 60px; }
.faq-header h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.faq-section { margin-bottom: 50px; }
.faq-category { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #1a1a1a; }
.faq-item { border-bottom: 1px solid #111; }
.faq-question { width: 100%; background: none; border: none; color: #fff; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; text-align: left; padding: 18px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-question::after { content: '+'; color: #D4AF37; font-size: 1.2rem; font-weight: 900; flex-shrink: 0; transition: transform 0.2s; }
.faq-question.open::after { transform: rotate(45deg); }
.faq-question:hover { color: #D4AF37; }
.faq-answer { display: none; font-size: 0.88rem; color: #888; line-height: 1.75; padding-bottom: 18px; }
.winners-page { padding: 160px 40px 80px; max-width: 900px; margin: 0 auto; }
.winners-header { text-align: center; margin-bottom: 50px; }
.winners-header h1 { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.winners-current { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 48px 40px; text-align: center; }
.winners-current h2 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #fff; margin-bottom: 8px; }
.winners-current p  { font-size: 0.88rem; color: #777; }

/* ─── Responsive — New Pages ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .blog-featured { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .referral-steps { flex-direction: column; align-items: center; }
    .referral-step-arrow { transform: rotate(90deg); }
    .event-card { flex-direction: column; }
    .event-card-date { flex-direction: row; gap: 12px; padding: 14px 20px; min-width: unset; }
}
@media (max-width: 600px) {
    .gift-tiers { flex-direction: column; align-items: center; }
    .meet-countdown-timer { gap: 4px; }
    .countdown-unit span { font-size: 2rem; min-width: 55px; }
    .referral-link-row { flex-direction: column; }
}

/* ─── Sticky Header Shrink ──────────────────────────────────────────────────── */
.navbar.scrolled { padding: 8px 40px; box-shadow: 0 2px 20px rgba(0,0,0,0.6); }
.navbar.scrolled .logo img { height: 36px; }
.navbar { transition: padding 0.3s ease, box-shadow 0.3s ease; }

/* ─── Notification Center ───────────────────────────────────────────────────── */
.notif-bell-btn { background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; padding: 6px; position: relative; line-height: 1; }
.notif-badge { position: absolute; top: 0; right: 0; background: #D4AF37; color: #000; font-size: 0.55rem; font-weight: 900; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.notif-panel { position: fixed; top: 70px; right: 20px; width: 320px; background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 10px; z-index: 9999; display: none; box-shadow: 0 8px 40px rgba(0,0,0,0.7); }
.notif-panel.open { display: block; }
.notif-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #1a1a1a; }
.notif-panel-header span { font-size: 0.75rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; }
.notif-mark-read { background: none; border: none; color: #555; font-size: 0.7rem; cursor: pointer; font-weight: 700; letter-spacing: 1px; }
.notif-mark-read:hover { color: #D4AF37; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #111; transition: background 0.2s; }
.notif-item:hover { background: #111; }
.notif-item.read { opacity: 0.45; }
.notif-icon { font-size: 1.2rem; flex-shrink: 0; }
.notif-body { flex: 1; }
.notif-title { font-size: 0.78rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.notif-text { font-size: 0.72rem; color: #888; line-height: 1.5; }
.notif-date { font-size: 0.65rem; color: #444; margin-top: 4px; }

/* ─── Tooltip Component ─────────────────────────────────────────────────────── */
.cnw-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #1a1a1a; border: 1px solid #333; color: #ccc; font-size: 0.72rem; font-weight: 600; white-space: nowrap; padding: 6px 10px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 1000; }
.cnw-tooltip.visible { opacity: 1; }
.cnw-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1a1a; }

/* ─── Keyboard Shortcut Overlay ─────────────────────────────────────────────── */
.shortcut-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 10000; display: none; align-items: center; justify-content: center; }
.shortcut-overlay.open { display: flex; }
.shortcut-box { background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 40px; max-width: 400px; width: 90%; position: relative; }
.shortcut-box h2 { font-size: 1rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 28px; }
.shortcut-table { width: 100%; border-collapse: collapse; }
.shortcut-table tr { border-bottom: 1px solid #111; }
.shortcut-table td { padding: 10px 4px; font-size: 0.85rem; color: #ccc; }
.shortcut-table td:last-child { color: #666; }
kbd { background: #111; border: 1px solid #333; border-radius: 4px; padding: 3px 8px; font-size: 0.78rem; font-family: monospace; color: #D4AF37; }

/* ─── Language Switcher (footer) ────────────────────────────────────────────── */
.lang-switcher { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lang-opt { background: none; border: none; color: #555; font-size: 0.65rem; font-weight: 900; letter-spacing: 1.5px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s; }
.lang-opt:hover, .lang-opt.active { color: #D4AF37; }
.lang-divider { color: #333; font-size: 0.65rem; line-height: 1; }

/* ─── SW Update Banner ──────────────────────────────────────────────────────── */
.sw-update-banner { position: fixed; top: 0; left: 0; right: 0; background: #D4AF37; color: #000; text-align: center; padding: 10px 16px; font-size: 0.8rem; font-weight: 800; z-index: 99999; display: flex; align-items: center; justify-content: center; gap: 12px; }
.sw-update-banner button { background: #000; color: #D4AF37; border: none; padding: 4px 14px; border-radius: 4px; font-weight: 900; font-size: 0.7rem; cursor: pointer; letter-spacing: 1px; }

/* ─── Flash Sale Banner ─────────────────────────────────────────────────────── */
.flash-sale-banner { background: #8b0000; color: #fff; text-align: center; padding: 10px 16px; font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; position: relative; }
.flash-dismiss { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 1rem; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

/* ─── Animated Page Transitions ─────────────────────────────────────────────── */
body.loaded { animation: fadeIn 0.25s ease; }
body.page-exit { animation: fadeOut 0.2s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }

/* ─── Quick-View Modal ──────────────────────────────────────────────────────── */
.quick-view-modal .modal-box { max-width: 600px; }
.quick-view-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.quick-view-img { aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.quick-view-info .quick-view-name { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.quick-view-info .quick-view-price { font-size: 1.4rem; font-weight: 900; color: #D4AF37; margin-bottom: 8px; }
.quick-view-info .quick-view-entries { font-size: 0.75rem; color: #888; margin-bottom: 16px; }
.quick-view-info .size-select { width: 100%; margin-bottom: 12px; }
.quick-view-info .btn-add-cart { width: 100%; }
@media (max-width: 600px) { .quick-view-layout { grid-template-columns: 1fr; } }

/* ─── Size Guide Modal ──────────────────────────────────────────────────────── */
.size-guide-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.size-guide-table th { background: #111; color: #D4AF37; font-weight: 900; letter-spacing: 1px; padding: 10px 12px; text-align: center; font-size: 0.7rem; text-transform: uppercase; }
.size-guide-table td { padding: 10px 12px; text-align: center; color: #ccc; border-bottom: 1px solid #111; }
.size-guide-table tr:hover td { background: #111; }

/* ─── Bundle Builder ────────────────────────────────────────────────────────── */
.bundle-builder { background: #0a0a0a; border: 1px solid #1a1a1a; padding: 32px; margin: 40px 0; border-radius: 8px; }
.bundle-builder h3 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 20px; }
.bundle-slots { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.bundle-slot { width: 80px; height: 80px; border: 2px dashed #333; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: border-color 0.2s; }
.bundle-slot.filled { border-color: #D4AF37; background: #111; }
.bundle-info { font-size: 0.82rem; color: #888; }
.bundle-info strong { color: #D4AF37; }

/* ─── Product Availability Countdown ───────────────────────────────────────── */
.availability-countdown { background: #1a0000; border: 1px solid #5a0000; padding: 10px 16px; border-radius: 6px; font-size: 0.78rem; color: #ff8080; font-weight: 700; margin: 12px 0; display: flex; align-items: center; gap: 8px; }
.availability-countdown span { color: #fff; }

/* ─── Gift Note ─────────────────────────────────────────────────────────────── */
.gift-note-toggle { background: none; border: none; color: #888; font-size: 0.78rem; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: 1px; margin: 12px 0; }
.gift-note-toggle:hover { color: #D4AF37; }
.gift-note-area { display: none; }
.gift-note-area.open { display: block; }
.gift-note-area textarea { width: 100%; background: #111; border: 1px solid #333; color: #ccc; padding: 10px 14px; border-radius: 6px; font-size: 0.85rem; resize: vertical; min-height: 80px; font-family: inherit; }

/* ─── Complete the Look ─────────────────────────────────────────────────────── */
.complete-the-look { padding: 60px 40px; max-width: 1200px; margin: 0 auto; }
.complete-the-look h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 32px; }
.complete-the-look .product-grid-full { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ─── Cart Delivery Estimate ────────────────────────────────────────────────── */
#deliveryEstimate { font-size: 0.8rem; color: #666; margin: 8px 0; display: flex; align-items: center; gap: 6px; }
#deliveryEstimate::before { content: '📦'; }

/* ─── Cart Abandonment Modal ────────────────────────────────────────────────── */
#abandonModal h2 { font-size: 1.4rem; }

/* ─── Coupon Suggestion ─────────────────────────────────────────────────────── */
#couponSuggestion { background: #111a0a; border: 1px solid #2a4a0a; padding: 10px 14px; border-radius: 6px; font-size: 0.78rem; color: #aad060; font-weight: 700; margin: 12px 0; display: none; }

/* ─── Multi-Currency Toggle ─────────────────────────────────────────────────── */
#currencyToggle { background: none; border: 1px solid #222; color: #666; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; padding: 5px 12px; border-radius: 4px; cursor: pointer; margin: 12px 0; display: block; }
#currencyToggle:hover { border-color: #D4AF37; color: #D4AF37; }

/* ─── Cart Item Notes ───────────────────────────────────────────────────────── */
.cart-item-note-toggle { background: none; border: none; color: #555; font-size: 0.7rem; cursor: pointer; padding: 4px 0; font-weight: 700; letter-spacing: 1px; }
.cart-item-note-toggle:hover { color: #D4AF37; }
.cart-item-note-field { background: #111; border: 1px solid #222; color: #ccc; padding: 6px 10px; border-radius: 4px; font-size: 0.8rem; width: 100%; margin-top: 6px; font-family: inherit; resize: none; display: none; }
.cart-item-note-field.open { display: block; }

/* ─── "Your Order Supports" row ─────────────────────────────────────────────── */
.order-supports-row { display: flex; gap: 16px; padding: 16px; background: #080808; border: 1px solid #111; border-radius: 6px; margin: 16px 0; flex-wrap: wrap; justify-content: center; }
.order-supports-item { text-align: center; font-size: 0.68rem; color: #555; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; flex: 1; min-width: 80px; }
.order-supports-item span { display: block; font-size: 1.2rem; margin-bottom: 4px; }

/* ─── Gallery Submission Status Banner ──────────────────────────────────────── */
.gallery-submission-banner { background: #0a1a0a; border: 1px solid #1a4a1a; padding: 14px 20px; margin: 0 40px 20px; border-radius: 8px; display: flex; align-items: center; gap: 12px; font-size: 0.82rem; color: #aad060; font-weight: 700; }
.gallery-submission-banner span { font-size: 1.1rem; }

/* ─── Gallery Card Flip ─────────────────────────────────────────────────────── */
.gallery-card-flip { perspective: 1000px; }
.gallery-card-flip .gallery-card-inner { position: relative; transform-style: preserve-3d; transition: transform 0.5s; }
.gallery-card-flip:hover .gallery-card-inner { transform: rotateY(180deg); }
.gallery-card-front, .gallery-card-back { backface-visibility: hidden; }
.gallery-card-back { position: absolute; inset: 0; background: #111; backface-visibility: hidden; transform: rotateY(180deg); padding: 20px; display: flex; flex-direction: column; justify-content: center; border-radius: 8px; }
.gallery-card-back h4 { font-size: 0.85rem; font-weight: 900; color: #D4AF37; margin-bottom: 12px; letter-spacing: 1px; }
.gallery-card-back p { font-size: 0.78rem; color: #aaa; line-height: 1.6; }

/* ─── Gallery Download Button ───────────────────────────────────────────────── */
.gallery-dl-btn { background: none; border: 1px solid #333; color: #888; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.gallery-dl-btn:hover { border-color: #D4AF37; color: #D4AF37; }

/* ─── Gallery View Count ────────────────────────────────────────────────────── */
.gallery-view-count { font-size: 0.68rem; color: #444; font-weight: 700; letter-spacing: 1px; display: flex; align-items: center; gap: 4px; }

/* ─── Gallery Floating Submit CTA ───────────────────────────────────────────── */
.gallery-float-cta { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: #D4AF37; color: #000; font-size: 0.75rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 12px 28px; border-radius: 30px; cursor: pointer; border: none; z-index: 500; opacity: 0; transition: opacity 0.4s, transform 0.4s; white-space: nowrap; box-shadow: 0 4px 20px rgba(212,175,55,0.4); }
.gallery-float-cta.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.gallery-float-cta:hover { background: #b8962e; }

/* ─── VIP Member Spotlight ──────────────────────────────────────────────────── */
.vip-spotlight { padding: 60px 40px; background: #050505; border-top: 1px solid #1a1a1a; }
.vip-spotlight-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; margin-bottom: 28px; text-align: center; }
.vip-spotlight-strip { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #D4AF37 #111; justify-content: center; flex-wrap: wrap; }
.vip-spotlight-card { background: #111; border: 1px solid #1a1a1a; border-radius: 10px; padding: 20px; text-align: center; min-width: 140px; flex-shrink: 0; transition: border-color 0.2s; }
.vip-spotlight-card:hover { border-color: #D4AF37; }
.vip-spotlight-avatar { width: 52px; height: 52px; border-radius: 50%; background: #D4AF37; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 900; color: #000; margin: 0 auto 10px; }
.vip-spotlight-name { font-size: 0.78rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.vip-spotlight-car { font-size: 0.68rem; color: #666; }

/* ─── VIP Member Wall ───────────────────────────────────────────────────────── */
.vip-member-wall { padding: 60px 40px; background: #050505; border-top: 1px solid #111; text-align: center; }
.vip-wall-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 28px; }
.vip-wall-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 600px; margin: 0 auto; }
.vip-wall-avatar { width: 44px; height: 44px; border-radius: 50%; background: #111; border: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 900; color: #D4AF37; cursor: default; transition: border-color 0.2s, transform 0.2s; }
.vip-wall-avatar:hover { border-color: #D4AF37; transform: scale(1.1); }

/* ─── Discord Live Count ────────────────────────────────────────────────────── */
.discord-live-count { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: #aaa; margin-top: 12px; }
.discord-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ba55c; animation: pulse-dot 2s infinite; flex-shrink: 0; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ─── Dashboard Milestones ──────────────────────────────────────────────────── */
.milestones-section { margin-top: 60px; padding-top: 40px; border-top: 1px solid #1a1a1a; }
.milestones-section h2 { font-size: 0.85rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.milestone-list { display: flex; flex-wrap: wrap; gap: 14px; }
.milestone-item { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-size: 0.8rem; }
.milestone-item.unlocked { border-color: rgba(212,175,55,0.3); }
.milestone-item.unlocked .milestone-label { color: #fff; }
.milestone-label { color: #444; font-weight: 700; }
.milestone-icon { font-size: 1rem; }

/* ─── Anniversary Badge ─────────────────────────────────────────────────────── */
.anniversary-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #D4AF37, #b8962e); color: #000; font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; margin: 16px 0; }

/* ─── Blog VIP Lock Overlay ─────────────────────────────────────────────────── */
.blog-card.vip-locked { position: relative; }
.blog-card.vip-locked .blog-card-body { filter: blur(4px); pointer-events: none; user-select: none; }
.blog-vip-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(5,5,5,0.75); border-radius: 8px; z-index: 2; gap: 8px; }
.blog-vip-lock p { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; }
.blog-vip-lock a { font-size: 0.75rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #000; background: #D4AF37; padding: 8px 20px; border-radius: 4px; text-decoration: none; }

/* ─── Referral Leaderboard ──────────────────────────────────────────────────── */
.referral-leaderboard { max-width: 600px; margin: 60px auto 0; }
.referral-leaderboard h3 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 20px; }
.ref-lb-table { width: 100%; border-collapse: collapse; }
.ref-lb-table th { font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #444; padding: 10px 12px; text-align: left; border-bottom: 1px solid #1a1a1a; }
.ref-lb-table td { padding: 12px; font-size: 0.82rem; color: #ccc; border-bottom: 1px solid #111; }
.ref-lb-table tr:first-child td { color: #D4AF37; font-weight: 800; }
.ref-lb-rank { font-weight: 900; color: #D4AF37; width: 32px; }

/* ─── Gift Code Display ─────────────────────────────────────────────────────── */
.gift-code-display { background: #111; border: 1px solid #D4AF37; border-radius: 8px; padding: 20px 28px; text-align: center; margin-top: 28px; }
.gift-code-value { font-size: 1.4rem; font-weight: 900; letter-spacing: 4px; color: #D4AF37; font-family: monospace; }
.gift-code-note { font-size: 0.75rem; color: #666; margin-top: 10px; }

/* ─── Quote Carousel ────────────────────────────────────────────────────────── */
.quote-carousel { padding: 60px 40px; text-align: center; background: #050505; border-top: 1px solid #111; border-bottom: 1px solid #111; overflow: hidden; }
.quote-carousel blockquote { font-size: 1.1rem; font-style: italic; color: #ccc; max-width: 700px; margin: 0 auto; line-height: 1.8; transition: opacity 0.4s; }
.quote-carousel .quote-author { font-size: 0.72rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-top: 16px; }

/* ─── Drop Alert Section ────────────────────────────────────────────────────── */
.drop-alert-section { padding: 80px 40px; text-align: center; background: #0a0a0a; }
.drop-alert-section h2 { font-size: 1.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #fff; margin-bottom: 12px; }
.drop-alert-section p { color: #aaa; max-width: 500px; margin: 0 auto 32px; }
.drop-alert-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.drop-alert-form input { flex: 1; background: #111; border: 1px solid #333; color: #fff; padding: 14px 18px; border-radius: 6px; font-size: 0.9rem; font-family: inherit; }
.drop-alert-form input::placeholder { color: #555; }

/* ─── Shop by Category Grid ─────────────────────────────────────────────────── */
.shop-category-grid { padding: 80px 40px; max-width: 1200px; margin: 0 auto; }
.shop-category-grid h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 28px; }
.category-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.category-card { background: #111; border: 1px solid #1a1a1a; border-radius: 8px; padding: 40px 24px; text-align: center; text-decoration: none; color: #fff; transition: border-color 0.2s, transform 0.2s; }
.category-card:hover { border-color: #D4AF37; transform: translateY(-2px); }
.category-card-icon { font-size: 2rem; margin-bottom: 12px; }
.category-card-name { font-size: 0.85rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.category-card-count { font-size: 0.72rem; color: #666; }
@media (max-width: 600px) { .category-cards { grid-template-columns: 1fr; } }

/* ─── Fun Fact Ticker ───────────────────────────────────────────────────────── */
.fun-fact-ticker { background: #080808; border-top: 1px solid #111; border-bottom: 1px solid #111; padding: 10px 40px; text-align: center; font-size: 0.72rem; color: #555; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; transition: opacity 0.4s; }

/* ─── Floating Chat Widget ──────────────────────────────────────────────────── */
.chat-widget { position: fixed; bottom: 80px; right: 20px; z-index: 500; }
.chat-bubble { width: 52px; height: 52px; border-radius: 50%; background: #D4AF37; color: #000; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; box-shadow: 0 4px 16px rgba(212,175,55,0.3); transition: transform 0.2s; }
.chat-bubble:hover { transform: scale(1.1); }
.chat-tooltip { position: absolute; bottom: 60px; right: 0; background: #111; border: 1px solid #2a2a2a; border-radius: 8px; padding: 10px 16px; font-size: 0.78rem; color: #ccc; white-space: nowrap; display: none; }
.chat-widget:hover .chat-tooltip { display: block; }

/* ─── Social Feed Mockup ────────────────────────────────────────────────────── */
.social-feed-section { padding: 60px 40px; max-width: 700px; margin: 0 auto; }
.social-feed-section h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 28px; text-align: center; }
.social-post { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 20px; margin-bottom: 14px; display: flex; gap: 14px; align-items: flex-start; }
.social-avatar { width: 40px; height: 40px; border-radius: 50%; background: #D4AF37; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; color: #000; flex-shrink: 0; }
.social-post-body p { font-size: 0.85rem; color: #ccc; line-height: 1.5; }
.social-post-body .social-handle { font-size: 0.72rem; color: #D4AF37; font-weight: 700; margin-bottom: 4px; }

/* ─── New Page — Article ────────────────────────────────────────────────────── */
.article-page { max-width: 720px; margin: 0 auto; padding: 160px 40px 80px; }
.article-header { margin-bottom: 40px; border-bottom: 1px solid #1a1a1a; padding-bottom: 32px; }
.article-tag { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 16px; display: block; }
.article-title { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 16px; line-height: 1.2; }
.article-meta { font-size: 0.78rem; color: #555; display: flex; gap: 16px; flex-wrap: wrap; }
.article-hero { width: 100%; aspect-ratio: 16/9; background: #111; border-radius: 8px; margin-bottom: 40px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.article-body { font-size: 0.95rem; color: #bbb; line-height: 1.9; }
.article-body h2 { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin: 36px 0 16px; }
.article-body p { margin-bottom: 20px; }
.article-body blockquote { border-left: 3px solid #D4AF37; padding-left: 20px; color: #888; font-style: italic; margin: 28px 0; }
.article-related { margin-top: 60px; padding-top: 40px; border-top: 1px solid #1a1a1a; }
.article-related h3 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 24px; }

/* ─── New Page — Order History ──────────────────────────────────────────────── */
.order-history-page { max-width: 860px; margin: 0 auto; padding: 160px 40px 80px; }
.order-history-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 40px; }
.order-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; padding: 24px; margin-bottom: 16px; }
.order-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.order-id { font-size: 0.7rem; font-weight: 900; letter-spacing: 2px; color: #D4AF37; }
.order-date { font-size: 0.78rem; color: #555; }
.order-status { font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; }
.order-status.fulfilled { background: rgba(50,180,50,0.1); color: #3ab450; border: 1px solid rgba(50,180,50,0.2); }
.order-status.pending { background: rgba(212,175,55,0.1); color: #D4AF37; border: 1px solid rgba(212,175,55,0.2); }
.order-items-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.order-item-chip { background: #111; border: 1px solid #1a1a1a; border-radius: 4px; padding: 6px 12px; font-size: 0.75rem; color: #ccc; }
.order-totals { display: flex; gap: 24px; font-size: 0.8rem; color: #666; flex-wrap: wrap; }
.order-totals strong { color: #fff; }

/* ─── New Page — Size Guide ─────────────────────────────────────────────────── */
.size-guide-page { max-width: 800px; margin: 0 auto; padding: 160px 40px 80px; }
.size-guide-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.size-guide-tabs { display: flex; gap: 8px; margin: 32px 0 20px; }
.size-guide-unit-toggle { display: flex; gap: 0; border: 1px solid #333; border-radius: 4px; overflow: hidden; margin: 0 0 24px auto; }
.size-guide-unit-toggle button { background: none; border: none; color: #666; font-size: 0.72rem; font-weight: 900; letter-spacing: 1px; padding: 6px 14px; cursor: pointer; }
.size-guide-unit-toggle button.active { background: #D4AF37; color: #000; }

/* ─── New Page — Policies ───────────────────────────────────────────────────── */
.policies-page { max-width: 800px; margin: 0 auto; padding: 160px 40px 80px; }
.policies-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 40px; }
.policy-section { margin-bottom: 48px; }
.policy-section h2 { font-size: 1rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #1a1a1a; }
.policy-section p, .policy-section li { font-size: 0.88rem; color: #777; line-height: 1.8; margin-bottom: 10px; }
.policy-section ul { padding-left: 20px; }

/* ─── New Page — Meet Recap ─────────────────────────────────────────────────── */
.meet-recap-page { max-width: 900px; margin: 0 auto; padding: 160px 40px 80px; }
.meet-recap-hero { width: 100%; aspect-ratio: 16/7; background: #111; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; font-size: 4rem; }
.meet-recap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.recap-stat { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; padding: 20px; text-align: center; }
.recap-stat-num { font-size: 2rem; font-weight: 900; color: #D4AF37; display: block; }
.recap-stat-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #555; margin-top: 4px; }
.meet-recap-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 40px; }
.recap-photo { aspect-ratio: 4/3; background: #111; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #333; }

/* ─── New Page — Changelog ──────────────────────────────────────────────────── */
.changelog-page { max-width: 800px; margin: 0 auto; padding: 160px 40px 80px; }
.changelog-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 12px; }
.changelog-entry { margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid #111; }
.changelog-version { display: inline-block; background: #D4AF37; color: #000; font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; padding: 4px 12px; border-radius: 4px; margin-bottom: 8px; }
.changelog-date { font-size: 0.72rem; color: #555; margin-bottom: 16px; }
.changelog-list { list-style: none; padding: 0; }
.changelog-list li { font-size: 0.85rem; color: #aaa; padding: 6px 0; border-bottom: 1px solid #0a0a0a; display: flex; gap: 10px; }
.changelog-list li::before { content: '→'; color: #D4AF37; flex-shrink: 0; }

/* ─── New Page — Brand Kit ──────────────────────────────────────────────────── */
.brand-kit-page { max-width: 960px; margin: 0 auto; padding: 160px 40px 80px; }
.brand-kit-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 60px; }
.brand-section { margin-bottom: 70px; }
.brand-section h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 32px; padding-bottom: 12px; border-bottom: 1px solid #111; }
.color-swatches { display: flex; gap: 16px; flex-wrap: wrap; }
.color-swatch { width: 100px; }
.swatch-box { height: 80px; border-radius: 6px; margin-bottom: 8px; cursor: pointer; transition: transform 0.2s; border: 1px solid #2a2a2a; }
.swatch-box:hover { transform: scale(1.04); }
.swatch-name { font-size: 0.72rem; font-weight: 800; color: #fff; }
.swatch-hex { font-size: 0.65rem; color: #555; font-family: monospace; }
.type-specimen { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; padding: 32px; }
.logo-variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.logo-variant { border-radius: 8px; padding: 32px; display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; border: 1px solid #1a1a1a; }
.spacing-scale { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.spacing-unit { background: #D4AF37; border-radius: 2px; }
.spacing-label { font-size: 0.65rem; color: #555; margin-top: 4px; text-align: center; }

/* ─── Announcement Bar ───────────────────────────────────────────────────────── */
.announcement-bar { background: #1a1a00; border-bottom: 1px solid #D4AF37; padding: 10px 20px; text-align: center; display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 0.78rem; color: #D4AF37; font-weight: 700; letter-spacing: 1px; position: relative; z-index: 200; }
.announcement-dismiss { background: none; border: none; color: #D4AF37; font-size: 1rem; cursor: pointer; line-height: 1; padding: 0 4px; opacity: 0.6; }
.announcement-dismiss:hover { opacity: 1; }

/* ─── Share Page Button ───────────────────────────────────────────────────────── */
.share-page-btn { background: none; border: 1px solid #333; color: #ccc; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; position: relative; }
.share-page-btn:hover { border-color: #D4AF37; color: #D4AF37; }
.share-page-menu { position: absolute; top: 100%; right: 0; background: #111; border: 1px solid #222; border-radius: 8px; padding: 8px; min-width: 160px; display: none; flex-direction: column; gap: 4px; z-index: 500; margin-top: 6px; }
.share-page-menu.open { display: flex; }
.share-page-menu button, .share-page-menu a { background: none; border: none; color: #ccc; font-size: 0.8rem; padding: 8px 12px; border-radius: 5px; cursor: pointer; text-align: left; text-decoration: none; display: block; white-space: nowrap; }
.share-page-menu button:hover, .share-page-menu a:hover { background: #1a1a1a; color: #D4AF37; }

/* ─── Footer Newsletter ───────────────────────────────────────────────────────── */
.footer-newsletter-row { max-width: 960px; margin: 0 auto 32px; padding: 0 20px; }

/* ─── Reusable Countdown Widget ──────────────────────────────────────────────── */
.cd-unit { display: inline-flex; flex-direction: column; align-items: center; margin: 0 6px; }
.cd-num { font-size: 1.8rem; font-weight: 900; color: #D4AF37; line-height: 1; }
.cd-label { font-size: 0.55rem; letter-spacing: 2px; color: #666; text-transform: uppercase; margin-top: 2px; }

/* ─── Mega Menu ───────────────────────────────────────────────────────────────── */
.mega-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 24px; display: none; gap: 32px; min-width: 520px; z-index: 600; box-shadow: 0 20px 60px rgba(0,0,0,0.7); }
.mega-menu.open { display: flex; }
.mega-col { flex: 1; }
.mega-heading { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 14px; }
.mega-col a { display: block; color: #ccc; text-decoration: none; font-size: 0.82rem; padding: 5px 0; transition: color 0.15s; }
.mega-col a:hover { color: #D4AF37; }
.mega-featured { background: #111; border-radius: 8px; padding: 14px; }

/* ─── Order Bump ──────────────────────────────────────────────────────────────── */
.order-bump-wrap { background: #0a0a0a; border: 1px solid #D4AF37; border-radius: 8px; padding: 14px 18px; margin: 16px 0; display: flex; align-items: center; gap: 12px; }
.order-bump-wrap label { font-size: 0.82rem; color: #ccc; cursor: pointer; flex: 1; }
.order-bump-wrap strong { color: #D4AF37; }

/* ─── Loyalty Points Row ─────────────────────────────────────────────────────── */
.loyalty-points-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid #111; font-size: 0.82rem; color: #888; }
.loyalty-pts-val { color: #D4AF37; font-weight: 700; }

/* ─── Gift Message Preview ───────────────────────────────────────────────────── */
.gift-msg-preview { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 6px; padding: 10px 14px; margin: 10px 0; font-size: 0.8rem; color: #888; display: flex; align-items: center; gap: 8px; }

/* ─── Refer Friend Cart CTA ──────────────────────────────────────────────────── */
.refer-friend-cta { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; padding: 16px; margin-top: 20px; text-align: center; }
.refer-friend-cta p { font-size: 0.78rem; color: #888; margin-bottom: 10px; }
.refer-code-chip { background: #111; border: 1px solid #D4AF37; border-radius: 4px; padding: 4px 10px; font-size: 0.85rem; font-weight: 800; color: #D4AF37; display: inline-block; letter-spacing: 2px; margin-bottom: 10px; }

/* ─── People Also Viewed ─────────────────────────────────────────────────────── */
.people-also-viewed { margin-top: 32px; padding-top: 24px; border-top: 1px solid #111; }
.people-also-viewed h4 { font-size: 0.7rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 16px; }
.also-viewed-grid { display: flex; gap: 16px; flex-wrap: wrap; }

/* ─── Post-Purchase Share ────────────────────────────────────────────────────── */
.post-purchase-share { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 24px; margin-top: 32px; text-align: center; }
.post-purchase-share h3 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 12px; }
.post-purchase-share p { color: #888; font-size: 0.85rem; margin-bottom: 16px; }
.share-btns-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ─── Product Q&A ────────────────────────────────────────────────────────────── */
.product-qa { margin-top: 48px; padding-top: 32px; border-top: 1px solid #111; }
.product-qa h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 24px; }
.qa-item { border-bottom: 1px solid #111; padding: 16px 0; }
.qa-q { font-weight: 700; color: #fff; font-size: 0.9rem; margin-bottom: 8px; cursor: pointer; display: flex; justify-content: space-between; }
.qa-q::after { content: '+'; color: #D4AF37; font-size: 1.1rem; }
.qa-item.open .qa-q::after { content: '−'; }
.qa-a { color: #aaa; font-size: 0.85rem; line-height: 1.7; display: none; }
.qa-item.open .qa-a { display: block; }
.qa-ask { margin-top: 20px; }

/* ─── Bought Together ────────────────────────────────────────────────────────── */
.bought-together { margin-top: 48px; padding-top: 32px; border-top: 1px solid #111; }
.bought-together h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 24px; }
.bt-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bt-plus { font-size: 1.5rem; color: #333; }
.bt-total-row { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }

/* ─── Product Awards ─────────────────────────────────────────────────────────── */
.product-awards-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.award-badge { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: #888; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 4px; padding: 5px 10px; }
.award-badge.active { color: #D4AF37; border-color: #D4AF37; }

/* ─── Staff Picks ────────────────────────────────────────────────────────────── */
.staff-picks-section { margin: 0 auto 48px; max-width: 1100px; padding: 0 20px; }
.staff-picks-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 6px; }
.staff-picks-strip { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.staff-pick-card { flex: 0 0 200px; background: #0a0a0a; border: 1px solid #D4AF37; border-radius: 10px; overflow: hidden; position: relative; }
.staff-pick-badge { position: absolute; top: 8px; left: 8px; background: #D4AF37; color: #050505; font-size: 0.55rem; font-weight: 900; letter-spacing: 1px; padding: 3px 7px; border-radius: 3px; text-transform: uppercase; }
.staff-pick-info { padding: 12px; }
.staff-pick-name { font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.staff-pick-meta { font-size: 0.72rem; color: #666; }

/* ─── Gallery Sort & Tags ────────────────────────────────────────────────────── */
.gallery-sort-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.gallery-sort-wrap label { font-size: 0.7rem; color: #666; }
.gallery-sort-wrap select { background: #111; border: 1px solid #222; color: #ccc; padding: 7px 12px; border-radius: 6px; font-size: 0.78rem; }
.gallery-tag-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gallery-tag-pill { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background: #111; border: 1px solid #222; color: #666; padding: 3px 8px; border-radius: 3px; cursor: pointer; }
.gallery-tag-pill:hover, .gallery-tag-pill.active { border-color: #D4AF37; color: #D4AF37; }

/* ─── Gallery Report ─────────────────────────────────────────────────────────── */
.gallery-report-btn { position: absolute; bottom: 8px; right: 8px; background: none; border: none; color: #333; font-size: 0.7rem; cursor: pointer; padding: 4px; }
.gallery-report-btn:hover { color: #D4AF37; }

/* ─── Checkout Review page ───────────────────────────────────────────────────── */
.checkout-review-page { max-width: 780px; margin: 0 auto; padding: 160px 40px 80px; }
.checkout-review-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 40px; }
.checkout-section { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 24px; margin-bottom: 24px; }
.checkout-section h3 { font-size: 0.7rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 16px; }
.checkout-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #111; font-size: 0.85rem; color: #ccc; }
.checkout-line:last-child { border-bottom: none; }
.checkout-total-line { display: flex; justify-content: space-between; font-weight: 800; font-size: 1rem; color: #fff; padding-top: 12px; }
.checkout-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-entries-box { background: #111; border: 1px solid #D4AF37; border-radius: 8px; padding: 16px; text-align: center; margin-bottom: 24px; }

/* ─── Track Order page ───────────────────────────────────────────────────────── */
.track-order-page { max-width: 640px; margin: 0 auto; padding: 160px 40px 80px; text-align: center; }
.track-input-row { display: flex; gap: 12px; margin: 24px 0; }
.track-result-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 24px; margin-top: 24px; text-align: left; }
.track-status-chip { display: inline-block; font-size: 0.65rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; margin-left: 12px; }
.track-status-chip.shipped { background: #D4AF3720; color: #D4AF37; }
.track-status-chip.delivered { background: #2a7a2a20; color: #4caf50; }
.track-status-chip.processing { background: #1a1a1a; color: #555; }
.track-timeline { margin-top: 20px; }
.track-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.track-dot { width: 10px; height: 10px; border-radius: 50%; background: #D4AF37; margin-top: 5px; flex-shrink: 0; }
.track-dot.done { background: #4caf50; }
.track-dot.pending { background: #333; }

/* ─── Ambassador page ────────────────────────────────────────────────────────── */
.ambassador-page { max-width: 860px; margin: 0 auto; padding: 160px 40px 80px; }
.ambassador-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 40px; }
.ambassador-tiers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 60px; }
.ambassador-tier-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 24px; text-align: center; }
.ambassador-tier-card.featured { border-color: #D4AF37; }
.ambassador-tier-name { font-size: 0.75rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 8px; }

/* ─── Community page ─────────────────────────────────────────────────────────── */
.community-page { max-width: 960px; margin: 0 auto; padding: 160px 40px 80px; }
.community-hubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 48px; }
.community-hub-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; padding: 28px 20px; text-align: center; transition: border-color 0.2s, transform 0.2s; cursor: pointer; text-decoration: none; display: block; }
.community-hub-card:hover { border-color: #D4AF37; transform: translateY(-2px); }
.community-hub-icon { font-size: 2.2rem; margin-bottom: 12px; }
.community-hub-name { font-size: 0.78rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.community-hub-desc { font-size: 0.72rem; color: #666; margin-top: 6px; }

/* ─── Merch Drops page ───────────────────────────────────────────────────────── */
.merch-drops-page { max-width: 960px; margin: 0 auto; padding: 160px 40px 80px; }
.drop-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; overflow: hidden; }
.drop-card.upcoming { border-color: #D4AF37; }
.drop-card-img { position: relative; }
.drop-blur-overlay { position: absolute; inset: 0; background: rgba(5,5,5,0.7); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.drop-card-body { padding: 20px; }
.drop-badge { display: inline-block; font-size: 0.6rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; margin-bottom: 10px; }
.drop-badge.soon { background: #D4AF3720; color: #D4AF37; }
.drop-badge.locked { background: #1a1a1a; color: #555; }

/* ─── Giveaway Rules page ────────────────────────────────────────────────────── */
.giveaway-rules-page { max-width: 760px; margin: 0 auto; padding: 160px 40px 80px; }
.rules-section { margin-bottom: 48px; }
.rules-section h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; border-bottom: 1px solid #1a1a1a; padding-bottom: 12px; margin-bottom: 20px; }
.rules-section p, .rules-section li { color: #aaa; line-height: 1.9; font-size: 0.9rem; }
.rules-section ol, .rules-section ul { padding-left: 20px; }

/* ─── Meet Calendar page ─────────────────────────────────────────────────────── */
.meet-calendar-page { max-width: 960px; margin: 0 auto; padding: 160px 40px 80px; }
.calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.calendar-month { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 20px; }
.calendar-month-name { font-size: 0.7rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 14px; }
.calendar-event { padding: 8px 0; border-bottom: 1px solid #111; display: flex; align-items: center; gap: 10px; font-size: 0.8rem; }
.calendar-event:last-child { border-bottom: none; }
.calendar-day-chip { background: #D4AF37; color: #050505; font-weight: 900; font-size: 0.7rem; padding: 3px 7px; border-radius: 3px; flex-shrink: 0; min-width: 28px; text-align: center; }
.calendar-event-name { color: #ccc; }
.calendar-event-name a { color: #ccc; text-decoration: none; }
.calendar-event-name a:hover { color: #D4AF37; }

/* ─── Hall of Fame page ──────────────────────────────────────────────────────── */
.hall-of-fame-page { max-width: 960px; margin: 0 auto; padding: 160px 40px 80px; }
.hof-section { margin-bottom: 60px; }
.hof-section h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; border-bottom: 1px solid #1a1a1a; padding-bottom: 12px; margin-bottom: 28px; }
.hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.hof-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; overflow: hidden; }
.hof-card-img { height: 140px; }
.hof-card-body { padding: 14px; }
.hof-card-trophy { font-size: 1.5rem; margin-bottom: 8px; }
.hof-card-name { font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.hof-card-meta { font-size: 0.72rem; color: #666; }
.hof-winner-card { background: linear-gradient(135deg, #1a1500, #0a0a0a); border-color: #D4AF37; }

/* ─── Style Guide page ───────────────────────────────────────────────────────── */
.style-guide-page { max-width: 960px; margin: 0 auto; padding: 160px 40px 80px; }
.sg-section { margin-bottom: 60px; }
.sg-section h2 { font-size: 0.7rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; border-bottom: 1px solid #111; padding-bottom: 12px; margin-bottom: 24px; }
.sg-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

/* ─── VIP Perks page ─────────────────────────────────────────────────────────── */
.vip-perks-page { max-width: 860px; margin: 0 auto; padding: 160px 40px 80px; }
.vip-perks-page h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #D4AF37; margin-bottom: 48px; }
.perk-deep-dive { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; padding: 28px; margin-bottom: 20px; display: flex; gap: 20px; }
.perk-icon-large { font-size: 2.5rem; flex-shrink: 0; }
.perk-body h3 { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.perk-body p { color: #aaa; font-size: 0.85rem; line-height: 1.7; }
.perk-tiers { display: flex; gap: 8px; margin-top: 12px; }
.perk-tier-chip { font-size: 0.62rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.perk-tier-chip.silver { background: #1a1a1a; color: #aaa; border: 1px solid #333; }
.perk-tier-chip.gold { background: #D4AF3720; color: #D4AF37; border: 1px solid #D4AF37; }

/* ─── Welcome Checklist ──────────────────────────────────────────────────────── */
.welcome-checklist { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 24px; margin-bottom: 32px; }
.welcome-checklist h3 { font-size: 0.7rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 16px; }
.checklist-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #111; cursor: pointer; }
.checklist-item:last-child { border-bottom: none; }
.checklist-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #333; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; }
.checklist-item.done .checklist-dot { background: #D4AF37; border-color: #D4AF37; color: #050505; }
.checklist-item.done .checklist-text { color: #555; text-decoration: line-through; }
.checklist-text { font-size: 0.85rem; color: #ccc; }

/* ─── Year in Review ─────────────────────────────────────────────────────────── */
.year-in-review { background: linear-gradient(135deg, #1a1500, #0a0a0a); border: 1px solid #D4AF37; border-radius: 12px; padding: 28px; margin-top: 32px; text-align: center; }
.year-in-review h3 { font-size: 0.7rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 20px; }
.year-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.year-stat p:first-child { font-size: 1.8rem; font-weight: 900; color: #D4AF37; line-height: 1; }
.year-stat p:last-child { font-size: 0.6rem; letter-spacing: 2px; color: #666; text-transform: uppercase; margin-top: 4px; }

/* ─── Member Directory Toggle ────────────────────────────────────────────────── */
.member-dir-toggle { display: flex; align-items: center; justify-content: space-between; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; }
.toggle-switch { width: 40px; height: 22px; background: #333; border-radius: 11px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.toggle-switch.on { background: #D4AF37; }
.toggle-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.toggle-switch.on .toggle-knob { transform: translateX(18px); }

/* ─── VIP Discount Reveal ────────────────────────────────────────────────────── */
.vip-discount-reveal { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; padding: 24px; margin-bottom: 24px; text-align: center; }
.discount-code-blur { filter: blur(8px); transition: filter 0.3s; font-size: 1.4rem; font-weight: 900; letter-spacing: 4px; color: #D4AF37; cursor: pointer; user-select: none; }
.discount-code-blur.revealed { filter: none; cursor: text; user-select: text; }

/* ─── Members-Only RSVP ──────────────────────────────────────────────────────── */
.vip-rsvp-btn { background: #D4AF37; color: #050505; font-size: 0.75rem; font-weight: 900; letter-spacing: 2px; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; text-transform: uppercase; }
.vip-rsvp-btn:disabled { background: #1a1a1a; color: #555; cursor: not-allowed; }
.vip-only-label { font-size: 0.72rem; color: #555; margin-top: 8px; }

/* ─── How It Works section ───────────────────────────────────────────────────── */
.how-it-works { max-width: 900px; margin: 80px auto; padding: 0 20px; text-align: center; }
.how-it-works h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 40px; }
.hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hiw-step { padding: 28px 20px; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; }
.hiw-num { font-size: 2.5rem; font-weight: 900; color: #D4AF37; line-height: 1; margin-bottom: 12px; }
.hiw-title { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; color: #fff; letter-spacing: 1px; margin-bottom: 8px; }
.hiw-desc { font-size: 0.8rem; color: #666; line-height: 1.6; }

/* ─── Batch 6: Animated Mobile Menu ─────────────────────────────────────────── */
@keyframes mobileMenuItemIn {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mobile-menu.open li {
    animation: mobileMenuItemIn 0.28s ease both;
    animation-delay: calc(var(--i, 0) * 60ms);
}

/* ─── Batch 6: Sticky Promo Banner collapse ──────────────────────────────────── */
.promo-banner { transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease; overflow: hidden; }
.promo-banner.collapsed { max-height: 4px !important; opacity: 0.3; padding-top: 0 !important; padding-bottom: 0 !important; cursor: pointer; }
.promo-banner.collapsed:hover { max-height: 48px !important; opacity: 1; }

/* ─── Batch 6: Cart Preview Tooltip ─────────────────────────────────────────── */
.cart-preview-tooltip {
    position: fixed; z-index: 9999;
    background: #111; border: 1px solid #2a2a2a; border-radius: 8px;
    padding: 14px 16px; min-width: 240px; max-width: 300px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    pointer-events: auto;
    opacity: 0; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s;
}
.cart-preview-tooltip.visible { opacity: 1; transform: translateY(0); }
.cpt-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid #1a1a1a; }
.cpt-row:last-of-type { border-bottom: none; }
.cpt-name { font-size: 0.75rem; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.cpt-price { font-size: 0.75rem; color: #D4AF37; font-weight: 700; flex-shrink: 0; }
.cpt-more { font-size: 0.68rem; color: #555; padding: 4px 0; }
.cpt-sub { font-size: 0.78rem; font-weight: 700; color: #fff; padding-top: 8px; margin-top: 4px; border-top: 1px solid #2a2a2a; display: flex; justify-content: space-between; }
.cpt-btn { display: block; text-align: center; margin-top: 10px; font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #050505; background: #D4AF37; border-radius: 4px; padding: 6px 12px; text-decoration: none; }
.cpt-btn:hover { background: #c9a227; }

/* ─── Batch 6: Wishlist remove animation ─────────────────────────────────────── */
.wishlist-item.removing,
.product-card.removing {
    transition: opacity 0.34s ease, transform 0.34s ease;
    opacity: 0;
    transform: translateX(32px) scale(0.96);
}

/* ─── Batch 6: Screen-reader only utility ────────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Batch 6: Storage estimate bar ─────────────────────────────────────────── */
.storage-bar-wrap { background: #1a1a1a; border-radius: 4px; height: 6px; overflow: hidden; margin: 8px 0; }
.storage-bar-fill { height: 100%; background: #D4AF37; border-radius: 4px; transition: width 0.6s ease; }

/* ─── Batch 7: Command Palette ───────────────────────────────────────────────── */
#cmdPalette { position: fixed; inset: 0; z-index: 99999; }
.cmd-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.cmd-box { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); width: min(600px,92vw); background: #111; border: 1px solid #2a2a2a; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.8); }
.cmd-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #1a1a1a; }
.cmd-icon { font-size: 1rem; color: #555; flex-shrink: 0; }
.cmd-input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 0.9rem; font-family: inherit; }
.cmd-input::placeholder { color: #444; }
.cmd-esc { font-size: 0.6rem; font-weight: 700; background: #1a1a1a; color: #555; border: 1px solid #2a2a2a; border-radius: 3px; padding: 2px 6px; flex-shrink: 0; }
.cmd-results { max-height: 320px; overflow-y: auto; }
.cmd-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 0.82rem; color: #ccc; cursor: pointer; }
.cmd-item:hover, .cmd-selected { background: #1a1a1a; color: #fff; }
.cmd-cat { font-size: 0.6rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #D4AF37; background: #D4AF3715; border-radius: 3px; padding: 2px 6px; flex-shrink: 0; }
.cmd-empty { padding: 20px 16px; font-size: 0.82rem; color: #555; }

/* ─── Batch 7: Mobile bottom nav ─────────────────────────────────────────────── */
.mobile-bottom-nav { display: none; }
@media (max-width: 600px) {
  .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: #0a0a0a; border-top: 1px solid #1a1a1a; justify-content: space-around; padding: 6px 0 env(safe-area-inset-bottom,0); }
  .mbn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.6rem; color: #666; text-decoration: none; padding: 4px 10px; }
  .mbn-item:hover, .mbn-item.active { color: #D4AF37; }
  .mbn-item span:first-child { font-size: 1.1rem; }
  .mbn-cart { position: relative; }
}

/* ─── Batch 7: Nav badge ─────────────────────────────────────────────────────── */
.nav-badge { position: relative; }
.nav-badge::after { content: attr(data-badge); position: absolute; top: -6px; right: -10px; background: #D4AF37; color: #050505; font-size: 0.5rem; font-weight: 900; border-radius: 10px; padding: 1px 5px; min-width: 14px; text-align: center; }

/* ─── Batch 7: Search autocomplete ──────────────────────────────────────────── */
.search-autocomplete { position: absolute; top: 100%; left: 0; right: 0; z-index: 999; background: #111; border: 1px solid #2a2a2a; border-radius: 0 0 6px 6px; max-height: 260px; overflow-y: auto; }
.sac-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 0.82rem; color: #ccc; cursor: pointer; }
.sac-item:hover, .sac-active { background: #1a1a1a; }
.sac-tag { font-size: 0.58rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #D4AF37; background: #D4AF3715; border-radius: 3px; padding: 2px 5px; flex-shrink: 0; }
.sac-item mark { background: transparent; color: #D4AF37; font-weight: 700; }
.sac-empty { padding: 12px 14px; font-size: 0.8rem; color: #555; }
.search-history-box { background: #111; border: 1px solid #1a1a1a; border-radius: 6px; padding: 8px 0; margin-top: 4px; }
.sh-label { font-size: 0.6rem; font-weight: 900; letter-spacing: 2px; color: #555; text-transform: uppercase; padding: 4px 14px; }
.sh-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 0.8rem; color: #aaa; cursor: pointer; }
.sh-item:hover { background: #1a1a1a; }
.sh-del { margin-left: auto; color: #444; font-size: 0.8rem; padding: 2px 6px; }
.sh-del:hover { color: #e55; }

/* ─── Batch 7: Sale price ────────────────────────────────────────────────────── */
.sale-original { text-decoration: line-through; color: #555; font-size: 0.85em; margin-right: 4px; }
.sale-price { color: #D4AF37; font-weight: 700; }
.sale-badge { background: #3a0a0a; color: #e55; font-size: 0.6rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-left: 4px; }

/* ─── Batch 7: Reviews anchor link ──────────────────────────────────────────── */
.reviews-anchor-link { font-size: 0.72rem; color: #D4AF37; text-decoration: none; display: block; margin: 4px 0 12px; letter-spacing: 1px; }
.reviews-anchor-link:hover { text-decoration: underline; }

/* ─── Batch 7: Expiry + "still thinking" badges ─────────────────────────────── */
.expiry-badge { position: absolute; top: 8px; left: 8px; background: #fa0; color: #050505; font-size: 0.58rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; }
.still-thinking { font-size: 0.68rem; color: #888; font-style: italic; display: block; margin-top: 4px; }

/* ─── Batch 7: Shop product count ───────────────────────────────────────────── */
.shop-product-count { font-size: 0.72rem; color: #555; letter-spacing: 1px; margin-bottom: 16px; }

/* ─── Batch 7: Gallery EXIF drawer ──────────────────────────────────────────── */
.gallery-exif-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9998; width: min(320px, 90vw); background: #111; border-left: 1px solid #2a2a2a; padding: 24px 20px; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; }
.gallery-exif-drawer.open { transform: translateX(0); }
.exif-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: #777; font-size: 1.4rem; cursor: pointer; }
.exif-title { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; color: #D4AF37; text-transform: uppercase; margin: 0 0 20px; }
.exif-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #1a1a1a; font-size: 0.78rem; }
.exif-row span:first-child { color: #555; }
.exif-row span:last-child { color: #ccc; }
.gallery-info-btn { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.6); border: 1px solid #333; color: #D4AF37; border-radius: 50%; width: 24px; height: 24px; font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ─── Batch 7: Gallery bulk like ────────────────────────────────────────────── */
.bulk-like-cb { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; accent-color: #D4AF37; cursor: pointer; z-index: 10; }
.on-this-day-badge { position: absolute; top: 8px; right: 8px; background: #1a1200; border: 1px solid #D4AF37; color: #D4AF37; font-size: 0.58rem; font-weight: 900; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; }

/* ─── Batch 7: Gallery challenge bar ────────────────────────────────────────── */
.gallery-challenge-bar { background: linear-gradient(90deg, #1a1200, #0a0a0a); border-bottom: 1px solid #D4AF37; padding: 12px 24px; font-size: 0.8rem; color: #D4AF37; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ─── Batch 7: Community post board ─────────────────────────────────────────── */
.comm-post { padding: 10px 0; border-bottom: 1px solid #111; }
.comm-post:last-child { border-bottom: none; }
.comm-handle { font-size: 0.7rem; font-weight: 900; color: #D4AF37; margin: 0 0 4px; }
.comm-text { font-size: 0.82rem; color: #ccc; line-height: 1.5; margin: 0 0 4px; }
.comm-time { font-size: 0.65rem; color: #444; margin: 0; }
.comm-form-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }

/* ─── Batch 7: Zip shipping estimator ───────────────────────────────────────── */
.zip-estimate-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ─── Batch 7: Cart total pulse ─────────────────────────────────────────────── */
@keyframes totalPulse { 0%{color:#fff} 50%{color:#D4AF37;transform:scale(1.05)} 100%{color:#fff} }
.total-pulse { animation: totalPulse 0.4s ease; }

/* ─── Batch 7: Community stats widget ───────────────────────────────────────── */
.csw-stat { display: flex; flex-direction: column; align-items: center; }
.csw-num { font-size: 1.6rem; font-weight: 900; color: #D4AF37; line-height: 1; }
.csw-label { font-size: 0.6rem; color: #555; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }

/* ─── Batch 7: Trending tags cloud ──────────────────────────────────────────── */
.trending-tag { display: inline-block; margin: 4px; color: #888; text-decoration: none; padding: 3px 8px; border: 1px solid #1a1a1a; border-radius: 20px; transition: all 0.15s; }
.trending-tag:hover { color: #D4AF37; border-color: #D4AF37; background: #D4AF3710; }

/* ─── Batch 7: First order tooltip ──────────────────────────────────────────── */
.first-order-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #111; border: 1px solid #D4AF37; border-radius: 6px; padding: 8px 14px; font-size: 0.78rem; color: #D4AF37; white-space: nowrap; z-index: 100; }
.first-order-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #D4AF37; }
.tip-close { background: none; border: none; color: #D4AF37; font-size: 0.9rem; cursor: pointer; margin-left: 8px; vertical-align: middle; }

/* ─── Batch 7: Seasonal body classes ────────────────────────────────────────── */
body.season-spring .hero { --hero-gradient: linear-gradient(180deg, #050505 0%, #0a1200 100%); }
body.season-summer .hero { --hero-gradient: linear-gradient(180deg, #050505 0%, #1a1000 100%); }
body.season-fall .hero { --hero-gradient: linear-gradient(180deg, #050505 0%, #1a0800 100%); }
body.season-winter .hero { --hero-gradient: linear-gradient(180deg, #050505 0%, #0a0a1a 100%); }

/* ─── Batch 7: Daily pick card ───────────────────────────────────────────────── */
.daily-pick-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; overflow: hidden; max-width: 220px; }

/* ─── Batch 7: Cart swap suggestion ─────────────────────────────────────────── */
.cart-swap-suggestion { font-size: 0.75rem; color: #fa0; padding: 6px 0; margin-top: 4px; }

/* ─── Batch 7: Field hint ───────────────────────────────────────────────────── */
.field-hint { font-size: 0.72rem; color: #888; margin-top: 4px; font-style: italic; }

/* ─── Batch 7: Ping item ────────────────────────────────────────────────────── */
.ping-item { font-size: 0.78rem; color: #aaa; padding: 5px 0; border-bottom: 1px solid #111; }
.ping-item:last-child { border-bottom: none; }

/* ─── Batch 7: Review photo ─────────────────────────────────────────────────── */
.review-photo-label { display: inline-block; font-size: 0.7rem; font-weight: 700; color: #D4AF37; border: 1px dashed #D4AF37; border-radius: 4px; padding: 6px 12px; cursor: pointer; margin: 8px 0; }
.review-photo-input { display: none; }
.review-photo-preview { margin: 4px 0; }

/* ─── Trending Now strip ─────────────────────────────────────────────────────── */
.trending-strip { max-width: 1100px; margin: 60px auto; padding: 0 20px; }
.trending-strip h2 { font-size: 0.7rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; margin-bottom: 20px; }
.trending-strip-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.trending-strip-grid .product-card { flex: 0 0 220px; }

/* ─── Partner Logo strip ─────────────────────────────────────────────────────── */
.partner-strip { max-width: 900px; margin: 60px auto; padding: 0 20px; text-align: center; }
.partner-strip h3 { font-size: 0.65rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #333; margin-bottom: 28px; }
.partner-logos { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; align-items: center; }
.partner-logo-ph { width: 100px; height: 36px; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: #333; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; }

/* ─── Today's Featured Car ───────────────────────────────────────────────────── */
.featured-car-block { max-width: 700px; margin: 60px auto; padding: 0 20px; }
.featured-car-inner { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; display: flex; gap: 0; overflow: hidden; }
.featured-car-img { flex: 0 0 240px; }
.featured-car-body { padding: 24px; flex: 1; }
.featured-car-label { font-size: 0.6rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 8px; }

/* ─── Entry Calculator ───────────────────────────────────────────────────────── */
.entry-calc { max-width: 640px; margin: 60px auto; padding: 0 20px; text-align: center; }
.entry-calc h2 { font-size: 0.75rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 24px; }
.entry-calc-inner { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; padding: 32px; }
.entry-slider { width: 100%; accent-color: #D4AF37; margin: 20px 0; }
.entry-result { font-size: 3rem; font-weight: 900; color: #D4AF37; }
.entry-result-label { font-size: 0.7rem; letter-spacing: 2px; color: #666; text-transform: uppercase; margin-top: 6px; }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mega-menu { min-width: 320px; flex-direction: column; }
    .ambassador-tiers { grid-template-columns: 1fr; }
    .hiw-steps { grid-template-columns: 1fr; }
    .year-stats { grid-template-columns: 1fr 1fr; }
    .featured-car-inner { flex-direction: column; }
    .featured-car-img { flex: 0 0 auto; }
    .checkout-address-grid { grid-template-columns: 1fr; }
    .perk-deep-dive { flex-direction: column; }
}
@media (max-width: 600px) {
    .year-stats { grid-template-columns: 1fr 1fr; }
    .hof-grid { grid-template-columns: 1fr 1fr; }
    .share-btns-row { flex-direction: column; align-items: center; }
}

/* ─── Changelog tags ────────────────────────────────────────────────────────── */
.changelog-tag { display: inline-block; font-size: 0.6rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; flex-shrink: 0; }
.changelog-tag--new { background: #1a3a1a; color: #4caf50; }
.changelog-tag--improve { background: #1a2a3a; color: #60a5fa; }
.changelog-tag--fix { background: #3a1a1a; color: #f87171; }
.changelog-list li { list-style: none; }
.changelog-list li::before { display: none; }

/* ─── Brand kit extras ───────────────────────────────────────────────────────── */
.swatch-role { font-size: 0.6rem; color: #444; margin-top: 2px; }
.color-swatch:hover .swatch-box { transform: scale(1.06); }
.spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.spacing-box { border-radius: 3px; flex-shrink: 0; }
.type-row + .type-row { margin-top: 0; }

/* ─── High Contrast Mode ────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
    body { background: #000 !important; }
    .navbar, .promo-banner { background: #000 !important; border-bottom: 2px solid #fff !important; }
    .product-card, .blog-card, .gallery-card { background: #000 !important; border-color: #fff !important; }
    .btn-primary { background: #fff !important; color: #000 !important; border: 2px solid #fff !important; }
    .btn-secondary { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; }
    a { color: #fff !important; }
    .val-gold, .entries-live, h1, h2, h3 { color: #fff !important; }
}

/* ─── Tab Panel ARIA (Auth / VIP Dashboard tabs) ────────────────────────────── */
[role="tablist"] { display: flex; gap: 0; border-bottom: 1px solid #1a1a1a; margin-bottom: 28px; }
[role="tab"] { background: none; border: none; border-bottom: 3px solid transparent; color: #555; font-size: 0.78rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 12px 20px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
[role="tab"][aria-selected="true"] { color: #D4AF37; border-bottom-color: #D4AF37; }
[role="tab"]:hover { color: #fff; }
[role="tabpanel"] { display: none; }
[role="tabpanel"].active { display: block; }

/* ─── Empty State Illustrations ─────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 80px 40px; }
.empty-state-art { font-size: 4rem; opacity: 0.15; margin-bottom: 20px; display: block; }
.empty-state h3 { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 10px; }
.empty-state p { font-size: 0.88rem; color: #555; max-width: 320px; margin: 0 auto 28px; }

/* ─── Responsive additions ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .category-cards { grid-template-columns: 1fr 1fr; }
    .logo-variants { grid-template-columns: 1fr; }
    .meet-recap-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .quick-view-layout { grid-template-columns: 1fr; }
    .meet-recap-stats { grid-template-columns: 1fr; }
    .size-guide-tabs { flex-wrap: wrap; }
    .vip-spotlight-strip { justify-content: flex-start; }
    .drop-alert-form { flex-direction: column; }
}

/* ─── Hero Ticker ─────────────────────────────────────────────────────────── */
.hero-ticker { overflow: hidden; width: 100%; margin: 16px 0 0; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.hero-ticker-track { display: flex; gap: 0; white-space: nowrap; animation: heroTicker 28s linear infinite; font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; color: #D4AF37; text-transform: uppercase; }
.hero-ticker-track:hover { animation-play-state: paused; }
@keyframes heroTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-ticker-track { animation: none; } }

/* ─── Hero Parallax Emoji ─────────────────────────────────────────────────── */
.hero-parallax-emoji { position: absolute; right: 8%; bottom: 15%; font-size: 5rem; opacity: 0.18; pointer-events: none; user-select: none; will-change: transform; filter: drop-shadow(0 0 20px rgba(212,175,55,0.3)); }
@media (max-width: 768px) { .hero-parallax-emoji { font-size: 3rem; right: 4%; bottom: 10%; } }

/* ─── VIP Callout — index.html ────────────────────────────────────────────── */
.vip-callout-home { background: linear-gradient(135deg, #0a0a0a 0%, #1a1200 100%); border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; padding: 56px 20px; text-align: center; margin: 0; }
.vip-callout-inner { max-width: 600px; margin: 0 auto; }
.vip-callout-eyebrow { font-size: 0.62rem; font-weight: 900; letter-spacing: 4px; color: #D4AF37; text-transform: uppercase; margin-bottom: 12px; }
.vip-callout-inner h2 { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 10px; }
.vip-callout-inner p { font-size: 0.88rem; color: #888; margin-bottom: 28px; }

/* ─── Gallery with Sidebar ────────────────────────────────────────────────── */
.gallery-with-sidebar { display: flex; gap: 32px; align-items: flex-start; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.gallery-main-col { flex: 1; min-width: 0; }
.gallery-leader-sidebar { flex: 0 0 220px; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; padding: 20px; position: sticky; top: 90px; }
.gallery-leader-sidebar h4 { font-size: 0.6rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; margin-bottom: 16px; }
.sidebar-ride-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #111; }
.sidebar-ride-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sidebar-rank { font-size: 1rem; font-weight: 900; color: #D4AF37; flex-shrink: 0; width: 20px; }
.sidebar-ride-info { flex: 1; min-width: 0; }
.sidebar-ride-name { font-size: 0.75rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-ride-likes { font-size: 0.65rem; color: #888; }
@media (max-width: 1199px) { .gallery-with-sidebar { display: block; } .gallery-leader-sidebar { display: none; } }

/* ─── Product Label Strip ─────────────────────────────────────────────────── */
.product-label-strip { font-size: 0.62rem; color: #555; letter-spacing: 0.5px; margin: 4px 0 8px; line-height: 1.4; }

/* ─── Checkout Progress Steps ─────────────────────────────────────────────── */
.progress-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.progress-step-num { width: 32px; height: 32px; border-radius: 50%; background: #111; border: 2px solid #333; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 900; color: #555; transition: all 0.25s; }
.progress-step.done .progress-step-num { background: #1a2a1a; border-color: #4caf50; color: #4caf50; }
.progress-step.active .progress-step-num { background: #1a1200; border-color: #D4AF37; color: #D4AF37; box-shadow: 0 0 12px rgba(212,175,55,0.3); }
.progress-step-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #555; }
.progress-step.active .progress-step-label { color: #D4AF37; }
.progress-step.done .progress-step-label { color: #4caf50; }
.progress-step-line { flex: 1; height: 2px; background: #222; align-self: center; margin: 0; position: relative; top: -10px; min-width: 32px; }

/* ─── VIP Dashboard Enhancements ──────────────────────────────────────────── */
.vip-badge-card { background: linear-gradient(135deg, #0a0a0a, #1a1200); border: 1px solid #D4AF37; border-radius: 16px; padding: 24px; display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.vip-badge-avatar { width: 64px; height: 64px; border-radius: 50%; background: #1a1200; border: 2px solid #D4AF37; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 900; color: #D4AF37; flex-shrink: 0; }
.vip-badge-info { flex: 1; }
.vip-badge-tier { font-size: 0.6rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; }
.vip-badge-name { font-size: 1.1rem; font-weight: 900; color: #fff; margin: 2px 0; }
.vip-badge-since { font-size: 0.72rem; color: #888; }
.vip-activity-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #111; }
.vip-activity-row:last-child { border-bottom: none; }
.vip-activity-icon { width: 32px; height: 32px; border-radius: 50%; background: #111; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
.vip-activity-text { font-size: 0.78rem; color: #ccc; flex: 1; }
.vip-activity-time { font-size: 0.65rem; color: #555; white-space: nowrap; }

/* ─── Referral Share Card ─────────────────────────────────────────────────── */
.referral-share-card { background: linear-gradient(135deg, #0a0a0a, #1a1200); border: 1px solid #D4AF37; border-radius: 12px; padding: 24px; text-align: center; max-width: 380px; margin: 24px auto; }
.referral-share-card .ref-logo { font-size: 1.2rem; font-weight: 900; letter-spacing: 3px; color: #D4AF37; margin-bottom: 6px; }
.referral-share-card .ref-by { font-size: 0.65rem; color: #888; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.referral-share-card .ref-code-big { font-size: 1.4rem; font-weight: 900; font-family: monospace; color: #D4AF37; letter-spacing: 3px; background: #111; padding: 10px 20px; border-radius: 6px; display: inline-block; margin-bottom: 8px; }
.referral-share-card .ref-hint { font-size: 0.65rem; color: #555; letter-spacing: 1px; text-transform: uppercase; }

/* ─── Gallery Filter Bar extras ───────────────────────────────────────────── */
.gallery-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.gallery-month-select { background: #0a0a0a; border: 1px solid #222; color: #888; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.gallery-month-select:focus { outline: 2px solid #D4AF37; border-color: #D4AF37; color: #fff; }
.gallery-surprise-btn { background: linear-gradient(135deg, #1a1200, #0a0a0a); border: 1px solid #D4AF37; color: #D4AF37; font-size: 0.68rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-family: inherit; transition: background 0.2s; }
.gallery-surprise-btn:hover { background: #1a1200; }

/* ─── Returns Page ────────────────────────────────────────────────────────── */
.returns-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; }
.returns-step { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; padding: 24px; text-align: center; }
.returns-step-num { font-size: 2rem; font-weight: 900; color: #D4AF37; margin-bottom: 10px; }
.returns-step h3 { font-size: 0.82rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 8px; }
.returns-step p { font-size: 0.78rem; color: #888; }
@media (max-width: 600px) { .returns-steps { grid-template-columns: 1fr; } }

/* ─── Giveaway Stats Page ─────────────────────────────────────────────────── */
.giveaway-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; }
.giveaway-stat-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; padding: 28px 20px; text-align: center; }
.giveaway-stat-card .stat-num { font-size: 2.5rem; font-weight: 900; color: #D4AF37; }
.giveaway-stat-card .stat-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-top: 6px; }
@media (max-width: 600px) { .giveaway-stats-grid { grid-template-columns: 1fr 1fr; } }

/* ─── Size Quiz ───────────────────────────────────────────────────────────── */
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.quiz-option { background: #0a0a0a; border: 2px solid #1a1a1a; border-radius: 10px; padding: 16px; cursor: pointer; text-align: center; transition: border-color 0.2s, background 0.2s; }
.quiz-option:hover, .quiz-option.selected { border-color: #D4AF37; background: #1a1200; }
.quiz-option-label { font-size: 0.82rem; font-weight: 700; color: #fff; }
.quiz-option-desc { font-size: 0.7rem; color: #666; margin-top: 4px; }
.quiz-result-card { background: linear-gradient(135deg, #0a0a0a, #1a1200); border: 2px solid #D4AF37; border-radius: 16px; padding: 32px; text-align: center; }
.quiz-result-size { font-size: 5rem; font-weight: 900; color: #D4AF37; line-height: 1; }

/* ─── Product Launch Page ─────────────────────────────────────────────────── */
.launch-hero { background: linear-gradient(135deg, #0a0a0a 0%, #1a1200 100%); border: 1px solid #1a1a1a; border-radius: 16px; padding: 48px 32px; text-align: center; margin-bottom: 40px; }
.launch-eyebrow { font-size: 0.62rem; font-weight: 900; letter-spacing: 4px; color: #D4AF37; text-transform: uppercase; margin-bottom: 12px; }
.launch-available { display: inline-block; background: #1a2a1a; color: #4caf50; font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; margin-bottom: 16px; }
.launch-notify-form { display: flex; gap: 8px; max-width: 400px; margin: 24px auto 0; }
.launch-notify-form input { flex: 1; background: #111; border: 1px solid #333; color: #fff; padding: 12px 16px; border-radius: 6px; font-size: 0.82rem; font-family: inherit; }
.launch-notify-form input:focus { outline: 2px solid #D4AF37; border-color: #D4AF37; }

/* ─── In-Store Pickup ─────────────────────────────────────────────────────── */
.pickup-hours-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 20px 0; font-size: 0.82rem; }
.pickup-day { color: #888; font-weight: 600; }
.pickup-time { color: #ccc; }
.pickup-map-ph { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 10px; height: 200px; display: flex; align-items: center; justify-content: center; color: #333; font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; margin: 24px 0; }

/* ─── Brand Story Page ────────────────────────────────────────────────────── */
.brand-story-body { max-width: 740px; margin: 0 auto; padding: 0 20px; }
.brand-story-body p { font-size: 1rem; color: #ccc; line-height: 1.8; margin-bottom: 24px; }
.brand-story-pull { font-size: 1.4rem; font-weight: 800; color: #D4AF37; line-height: 1.4; margin: 40px 0; padding-left: 24px; border-left: 4px solid #D4AF37; font-style: italic; }
.brand-story-year { font-size: 0.62rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; margin-bottom: 6px; }
.brand-story-divider { border: none; border-top: 1px solid #1a1a1a; margin: 48px 0; }

/* ─── FAQ Search ──────────────────────────────────────────────────────────── */
.faq-search-wrap { max-width: 480px; margin: 0 auto 32px; position: relative; }
.faq-search-input { width: 100%; background: #0a0a0a; border: 1px solid #222; color: #fff; padding: 12px 40px 12px 16px; border-radius: 8px; font-size: 0.88rem; font-family: inherit; }
.faq-search-input:focus { outline: 2px solid #D4AF37; border-color: #D4AF37; }
.faq-search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #555; font-size: 1rem; cursor: pointer; display: none; }
.faq-search-clear.visible { display: block; }

/* ─── Nav hover underline animation ──────────────────────────────────────── */
.nav-links a { position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #D4AF37; transition: width 0.22s ease; border-radius: 1px; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* ─── Meet Recap Archive ──────────────────────────────────────────────────── */
.recap-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.recap-archive-card { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; overflow: hidden; transition: border-color 0.2s; text-decoration: none; display: block; }
.recap-archive-card:hover { border-color: #D4AF37; }
.recap-archive-img { height: 140px; background: linear-gradient(135deg, #0a0a0a, #1a1200); display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: 0.6; }
.recap-archive-body { padding: 16px; }
.recap-archive-date { font-size: 0.62rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #D4AF37; margin-bottom: 4px; }
.recap-archive-title { font-size: 0.9rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
.recap-archive-stats { font-size: 0.72rem; color: #666; }

/* ─── Affiliate Page ──────────────────────────────────────────────────────── */
.affiliate-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; }
@media (max-width: 600px) { .affiliate-steps { grid-template-columns: 1fr; } .returns-steps { grid-template-columns: 1fr; } }
.affiliate-step { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 12px; padding: 24px; text-align: center; }
.affiliate-step-icon { font-size: 2rem; margin-bottom: 12px; }
.affiliate-step h3 { font-size: 0.82rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 8px; }
.affiliate-step p { font-size: 0.78rem; color: #888; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAUNCH POLISH — BATCH 5
   Appended 2026-05-20. All rules below override earlier declarations.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Premium Placeholder Redesign ──────────────────────────────────────── */
.product-img-placeholder {
    background: #050505;
    background-image:
        linear-gradient(135deg, transparent 35%, rgba(212,175,55,0.06) 50%, transparent 65%),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 18px,
            rgba(212,175,55,0.025) 18px,
            rgba(212,175,55,0.025) 19px
        );
    aspect-ratio: 4 / 3;
    height: auto;
    border: 1px solid #1a1a1a;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.product-img-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(212,175,55,0.07) 0%, transparent 65%);
    pointer-events: none;
}

/* DROP 001 badge — top left */
.product-img-placeholder::after {
    content: 'DROP 001';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 2.5px;
    color: #D4AF37;
    border: 1px solid rgba(212,175,55,0.35);
    padding: 3px 7px;
    border-radius: 3px;
    background: rgba(5,5,5,0.8);
    backdrop-filter: blur(4px);
    z-index: 2;
}

.product-img-placeholder:hover {
    border-color: rgba(212,175,55,0.4);
    box-shadow: 0 0 28px rgba(212,175,55,0.08);
}

.ph-brand {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(212,175,55,0.18);
    letter-spacing: 8px;
    z-index: 1;
    text-transform: uppercase;
}

.ph-name {
    font-size: 0.6rem;
    font-weight: 900;
    color: rgba(212,175,55,0.35);
    letter-spacing: 4px;
    text-transform: uppercase;
    z-index: 1;
    margin-top: 6px;
    max-width: 80%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover overlay "VIEW DETAILS" */
.product-card:hover .product-img-placeholder::before,
a:hover .product-img-placeholder::before {
    background: radial-gradient(ellipse at 50% 40%, rgba(212,175,55,0.11) 0%, transparent 65%);
}

/* ─── Home Page Polish ───────────────────────────────────────────────────── */

/* Hero headline — larger, tighter */
.hero h1, .hero-title {
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: 0.92;
    letter-spacing: -1px;
}

/* Hero CTA buttons — bigger touch targets */
.hero .btn-primary,
.hero .btn-secondary {
    padding: 16px 36px;
    font-size: 0.82rem;
    letter-spacing: 3px;
    min-height: 52px;
}

/* Hero ticker — no horizontal overflow */
.hero-ticker {
    overflow: hidden;
    max-width: 100vw;
}

/* Social proof bar — gold borders, larger numbers */
.social-proof-bar,
.stats-bar {
    border-top: 1px solid rgba(212,175,55,0.15);
    border-bottom: 1px solid rgba(212,175,55,0.15);
}

.social-proof-bar [data-count],
.stats-bar [data-count] {
    font-size: clamp(2rem, 4vw, 3rem);
}

/* VIP callout — diagonal stripe pattern */
.vip-callout-home {
    background:
        linear-gradient(135deg, #0a0a0a 0%, #1a1200 100%),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 20px,
            rgba(212,175,55,0.02) 20px,
            rgba(212,175,55,0.02) 21px
        );
    background-blend-mode: normal;
    border-left: 3px solid #D4AF37;
    border-right: none;
    border-top: 1px solid rgba(212,175,55,0.15);
    border-bottom: 1px solid rgba(212,175,55,0.15);
}

/* New arrivals strip — consistent card height */
.new-arrivals-strip .product-card {
    flex: 0 0 220px;
}

.new-arrivals-strip .product-card h3,
.new-arrivals-strip .product-info h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile hero fixes */
@media (max-width: 768px) {
    .hero {
        padding-top: 80px;
        min-height: 85vh;
    }
    .hero h1, .hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 0.95;
    }
    .hero .btn-primary,
    .hero .btn-secondary {
        width: 100%;
        text-align: center;
    }
    .hero-ticker {
        font-size: 0.62rem;
    }
}

/* ─── Shop Page Polish ───────────────────────────────────────────────────── */

/* Filter tabs — solid active state */
.filter-tab {
    background: transparent;
    border: 1px solid #222;
    color: #666;
    padding: 8px 18px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-tab:hover {
    border-color: #D4AF37;
    color: #D4AF37;
}

.filter-tab.active {
    background: #D4AF37;
    border-color: #D4AF37;
    color: #050505;
}

/* Sort dropdown — styled, no browser chrome */
.shop-sort select,
select.sort-select,
#shopSort {
    appearance: none;
    -webkit-appearance: none;
    background: #0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23D4AF37'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid #222;
    color: #ccc;
    padding: 8px 32px 8px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}

#shopSort:focus,
select.sort-select:focus {
    outline: 2px solid #D4AF37;
    border-color: #D4AF37;
}

/* Product grid — uniform card alignment */
.product-grid-full,
.product-grid {
    align-items: start;
}

/* Mobile — 2 col at 600px, 1 col at 375px */
@media (max-width: 600px) {
    .product-grid-full,
    .product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}
@media (max-width: 400px) {
    .product-grid-full,
    .product-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Product Page Polish ────────────────────────────────────────────────── */

/* Size selector buttons — bigger touch targets, stronger selected */
.size-btn,
.size-option {
    min-width: 52px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1px;
    border: 1.5px solid #333;
    background: transparent;
    color: #888;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.size-btn:hover,
.size-option:hover {
    border-color: #D4AF37;
    color: #D4AF37;
}

.size-btn.selected,
.size-btn.active,
.size-option.selected,
.size-option.active {
    background: #D4AF37;
    border-color: #D4AF37;
    color: #050505;
    font-weight: 900;
}

/* Price display — larger, gold */
.product-detail-info .price,
.product-price-main {
    font-size: 1.8rem;
    color: #D4AF37;
    font-weight: 900;
}

/* ATC button — full width on mobile, pulse on first render */
@media (max-width: 768px) {
    .product-detail-info .btn-primary,
    #addToCartBtn {
        width: 100%;
        font-size: 0.88rem;
        letter-spacing: 3px;
        padding: 18px;
    }
}

/* ATC subtle entrance pulse (respects prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    @keyframes atcPulse {
        0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.4); }
        70%  { box-shadow: 0 0 0 10px rgba(212,175,55,0); }
        100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
    }
    .product-detail-info .btn-primary,
    #addToCartBtn {
        animation: atcPulse 1.8s ease-out 0.8s 2;
    }
}

/* Sticky ATC bar — safe area inset for notched phones */
.sticky-atc-bar,
#stickyAtc {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Product detail image — locked ratio */
.product-detail-img,
.product-detail-img .product-img-placeholder {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BATCH 5 — All CAN BUILD NOW component styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── "New This Week" nav dot ────────────────────────────────────────────── */
.nav-new-dot { display:inline-block; width:6px; height:6px; background:#D4AF37; border-radius:50%; margin-left:5px; vertical-align:middle; animation:pulseGold 1.5s ease-in-out infinite; }
@keyframes pulseGold { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ─── Mega-menu search ───────────────────────────────────────────────────── */
.mega-search-wrap { padding:10px 16px 6px; border-bottom:1px solid #1a1a1a; }
.mega-search { width:100%; background:#111; border:1px solid #2a2a2a; color:#ccc; font-size:0.8rem; padding:8px 12px; border-radius:4px; outline:none; }
.mega-search:focus { border-color:#D4AF37; }

/* ─── Product card quick-stats strip ────────────────────────────────────── */
.card-quick-stats { position:absolute; bottom:0; left:0; right:0; background:rgba(5,5,5,0.92); color:#777; font-size:0.6rem; font-weight:700; letter-spacing:1px; padding:6px 10px; text-align:center; opacity:0; transform:translateY(4px); transition:opacity 0.2s, transform 0.2s; pointer-events:none; z-index:3; }
.product-card:hover .card-quick-stats { opacity:1; transform:translateY(0); }

/* ─── CSS containment for paint perf ────────────────────────────────────── */
.product-card, .gallery-card, .blog-preview-card { contain:content; }

/* ─── Latest ride card on home ───────────────────────────────────────────── */
.latest-ride-card { background:#0a0a0a; border:1px solid #1a1a1a; border-radius:8px; padding:16px 20px; max-width:480px; margin:20px auto 0; }
.latest-ride-label { font-size:0.6rem; font-weight:900; letter-spacing:3px; color:#D4AF37; text-transform:uppercase; }
.latest-ride-inner { display:flex; align-items:center; gap:14px; margin-top:10px; }
.lr-placeholder { width:52px; height:52px; background:#111; border:1px solid #222; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:0.5rem; color:rgba(212,175,55,0.4); letter-spacing:2px; font-weight:900; }
.lr-car { font-size:0.85rem; font-weight:900; color:#fff; margin:0; }
.lr-handle { font-size:0.7rem; color:#555; margin:2px 0 0; }
.lr-btn { margin-left:auto; font-size:0.65rem; padding:6px 14px; white-space:nowrap; }

/* ─── Community posts feed ───────────────────────────────────────────────── */
.community-post { background:#0a0a0a; border:1px solid #1a1a1a; border-radius:6px; padding:14px 18px; margin-bottom:10px; }
.cp-handle { font-size:0.65rem; font-weight:900; color:#D4AF37; letter-spacing:1px; }
.cp-text { font-size:0.85rem; color:#ccc; margin:6px 0 4px; line-height:1.5; }
.cp-ts { font-size:0.6rem; color:#444; }

/* ─── Tip of the day card ────────────────────────────────────────────────── */
.tip-of-day-card { background:#0a0a0a; border-left:2px solid #D4AF37; padding:16px 20px; margin:0 auto; max-width:680px; border-radius:0 6px 6px 0; }
.tip-of-day-card p { font-size:0.85rem; color:#ccc; line-height:1.6; margin:0; }
.tip-eyebrow { font-size:0.6rem; font-weight:900; letter-spacing:3px; color:#D4AF37; text-transform:uppercase; margin-bottom:8px; }

/* ─── Loyalty widget on home ─────────────────────────────────────────────── */
.loyalty-widget { background:#0a0a0a; border:1px solid #D4AF37; border-radius:8px; padding:24px 28px; max-width:340px; margin:0 auto; text-align:center; }
.lw-eyebrow { font-size:0.6rem; font-weight:900; letter-spacing:3px; color:#D4AF37; text-transform:uppercase; margin-bottom:6px; }
.lw-name { font-size:1.1rem; font-weight:900; color:#fff; margin:0 0 4px; text-transform:uppercase; }
.lw-tier { font-size:0.7rem; color:#777; letter-spacing:2px; margin-bottom:12px; }
.lw-entries span { font-size:1.6rem; font-weight:900; color:#D4AF37; }
.lw-entries { margin:0 0 6px; font-size:0.75rem; color:#555; }
.lw-next { font-size:0.7rem; color:#555; margin-bottom:16px; }

/* ─── Auto best promo button ─────────────────────────────────────────────── */
#autoBestPromoBtn { background:none; border:1px dashed #333; color:#555; font-size:0.7rem; font-weight:700; letter-spacing:1px; padding:6px 14px; cursor:pointer; border-radius:4px; width:100%; margin-top:8px; transition:border-color 0.2s, color 0.2s; }
#autoBestPromoBtn:hover { border-color:#D4AF37; color:#D4AF37; }

/* ─── Refer before checkout nudge ───────────────────────────────────────── */
.refer-nudge { background:#0a0a0a; border:1px solid #1a1a1a; border-radius:6px; padding:10px 16px; display:flex; align-items:center; gap:10px; font-size:0.78rem; color:#777; margin-bottom:16px; }
.refer-nudge a { color:#D4AF37; }
.refer-nudge-close { background:none; border:none; color:#444; cursor:pointer; font-size:1rem; margin-left:auto; }

/* ─── VIP entries multiplier bonus ──────────────────────────────────────── */
.vip-entries-bonus { font-size:0.75rem; color:#D4AF37; font-weight:700; margin-left:6px; }

/* ─── Gift success card ──────────────────────────────────────────────────── */
.gift-success-card { background:#0a0a0a; border:1px solid #1a1a1a; border-radius:6px; padding:14px 20px; font-size:0.85rem; color:#ccc; text-align:center; margin:16px 0; }

/* ─── Gallery Make of Month banner ──────────────────────────────────────── */
.motm-badge { display:inline-block; background:#D4AF37; color:#000; font-size:0.65rem; font-weight:900; letter-spacing:2px; padding:8px 20px; border-radius:2px; text-transform:uppercase; }

/* ─── Gallery year filter select ────────────────────────────────────────── */
.gallery-year-sel { background:#0a0a0a; border:1px solid #2a2a2a; color:#ccc; font-size:0.7rem; font-weight:700; letter-spacing:1px; padding:6px 12px; border-radius:4px; cursor:pointer; }

/* ─── Gallery view toggle btn ───────────────────────────────────────────── */
.gallery-view-btn { background:none; border:1px solid #2a2a2a; color:#777; font-size:0.65rem; font-weight:900; letter-spacing:1.5px; padding:6px 12px; border-radius:4px; cursor:pointer; transition:border-color 0.2s, color 0.2s; }
.gallery-view-btn:hover { border-color:#D4AF37; color:#D4AF37; }

/* ─── Gallery list view ──────────────────────────────────────────────────── */
.gallery-list-view { display:flex !important; flex-direction:column; gap:12px !important; }
.gallery-list-view .gallery-card { display:flex; align-items:center; gap:16px; height:80px !important; border-radius:4px; }
.gallery-list-view .gallery-card-img { width:80px; height:80px; min-width:80px; object-fit:cover; }
.gallery-list-view .gallery-card-info { flex:1; }

/* ─── Gallery stats bar ──────────────────────────────────────────────────── */
#galleryStatsBar { display:flex; gap:24px; justify-content:center; padding:10px; background:#050505; border-bottom:1px solid #1a1a1a; font-size:0.65rem; font-weight:700; color:#555; letter-spacing:1.5px; text-transform:uppercase; }

/* ─── Gallery slideshow btn ──────────────────────────────────────────────── */
.slideshow-btn { background:none; border:1px solid #333; color:#777; font-size:0.65rem; font-weight:900; letter-spacing:1.5px; padding:5px 12px; border-radius:4px; cursor:pointer; margin-top:10px; }
.slideshow-btn:hover { border-color:#D4AF37; color:#D4AF37; }

/* ─── Community shoutouts ────────────────────────────────────────────────── */
.shoutout-item { background:#0a0a0a; border:1px solid #1a1a1a; border-radius:6px; padding:12px 16px; margin-bottom:8px; }
.so-from, .so-to { font-weight:900; color:#D4AF37; font-size:0.75rem; }
.so-msg { font-size:0.82rem; color:#ccc; margin:6px 0 0; }

/* ─── People you may know ────────────────────────────────────────────────── */
.pymk-card { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid #111; }
.pymk-card:last-child { border-bottom:none; }
.pymk-avatar { width:40px; height:40px; background:#1a1a1a; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:900; color:#D4AF37; flex-shrink:0; }
.pymk-handle { font-size:0.85rem; font-weight:900; color:#fff; margin:0; }
.pymk-meta { font-size:0.65rem; color:#555; margin:2px 0 0; letter-spacing:1px; }
.pymk-follow { background:none; border:1px solid #333; color:#ccc; font-size:0.65rem; font-weight:900; letter-spacing:1.5px; padding:5px 14px; cursor:pointer; border-radius:4px; margin-left:auto; transition:all 0.2s; white-space:nowrap; }
.pymk-follow:hover, .pymk-follow.following { background:#D4AF37; border-color:#D4AF37; color:#000; }

/* ─── Florida member map ─────────────────────────────────────────────────── */
.fl-map-svg { width:100%; max-width:400px; border:1px solid #1a1a1a; border-radius:8px; display:block; margin:0 auto; }
.map-caption { font-size:0.6rem; color:#444; text-align:center; margin-top:8px; letter-spacing:1px; }
.map-dot { transition:r 0.3s; }

/* ─── VIP discount refresh countdown ────────────────────────────────────── */
#discountRefreshCountdown { font-size:0.65rem; color:#555; letter-spacing:1px; margin-top:4px; }

/* ─── Referral milestone badges ─────────────────────────────────────────── */
.ref-badge { display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 12px; border:1px solid #1a1a1a; border-radius:6px; background:#0a0a0a; }
.ref-badge.earned { border-color:rgba(212,175,55,0.4); }
.ref-badge.locked { opacity:0.4; filter:grayscale(1); }
.ref-badge-icon { font-size:1.8rem; }
.ref-badge-label { font-size:0.65rem; font-weight:900; letter-spacing:2px; color:#fff; text-transform:uppercase; }
.ref-badge-req { font-size:0.6rem; color:#555; }

/* ─── VIP tier expand row ────────────────────────────────────────────────── */
.perk-why-row td { background:#0d0d0d; padding:12px 20px; font-size:0.82rem; color:#aaa; line-height:1.6; }

/* ─── "You saved" pill in cart ───────────────────────────────────────────── */
.you-saved-pill { background:#D4AF37; color:#000; font-size:0.65rem; font-weight:900; letter-spacing:1px; padding:4px 12px; border-radius:20px; margin-left:12px; }

/* ─── Reorder button ─────────────────────────────────────────────────────── */
.reorder-btn { font-size:0.65rem; padding:6px 14px; margin-top:8px; }

/* ─── Frequently bought together ─────────────────────────────────────────── */
.fbt-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }
.fbt-item { background:#0a0a0a; border:1px solid #1a1a1a; padding:16px; border-radius:6px; text-align:center; flex:1; min-width:160px; max-width:220px; }
.fbt-name { font-size:0.8rem; font-weight:900; color:#fff; margin:0 0 4px; }
.fbt-price { font-size:0.85rem; color:#D4AF37; margin:0 0 12px; }
.fbt-plus { font-size:1.4rem; color:#333; }

/* ─── Reduce motion toggle btn ───────────────────────────────────────────── */
.reduce-motion-btn { background:none; border:none; color:#444; font-size:0.9rem; cursor:pointer; padding:4px; transition:color 0.2s; }
.reduce-motion-btn:hover { color:#D4AF37; }

/* ─── body.reduce-motion — kill all animations ───────────────────────────── */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation:none !important; transition:none !important; }

/* ─── Keyboard focus rings only for keyboard users ───────────────────────── */
body:not(.keyboard-user) *:focus { outline:none; }
body.keyboard-user *:focus-visible { outline:2px solid #D4AF37; outline-offset:2px; }

/* ─── VIP member map section ─────────────────────────────────────────────── */
.vip-map-section { padding:60px 40px; max-width:500px; margin:0 auto; text-align:center; }

/* ─── Cart Page Polish ───────────────────────────────────────────────────── */

/* Free shipping bar — taller, smoother, checkmark on complete */
.free-ship-bar-fill,
.free-shipping-fill {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    height: 6px;
    border-radius: 3px;
}

.free-ship-bar,
.free-shipping-bar {
    height: 6px;
    border-radius: 3px;
    background: #111;
    overflow: hidden;
    margin: 8px 0;
}

/* Cart summary card — wrapped border */
.cart-summary,
#cartSummary {
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    background: #0a0a0a;
}

/* Cart total — larger */
.cart-total-row .cart-summary-value,
#cartTotal {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
}

/* Checkout CTA — dominant */
.btn-checkout,
#checkoutBtn,
button[onclick*="handleCheckout"],
button[onclick*="startStripe"] {
    width: 100%;
    height: 56px;
    font-size: 0.9rem;
    letter-spacing: 3px;
    font-weight: 900;
    position: relative;
    overflow: hidden;
}

/* Checkout shimmer on hover */
@media (prefers-reduced-motion: no-preference) {
    .btn-checkout::after,
    #checkoutBtn::after {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
        transform: skewX(-20deg);
        transition: left 0.5s ease;
    }
    .btn-checkout:hover::after,
    #checkoutBtn:hover::after {
        left: 150%;
    }
}

/* Cart empty state — vertically centered */
.cart-empty,
#cartEmpty {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

/* ─── VIP Page Polish ────────────────────────────────────────────────────── */

/* Gold tier card — glass glow */
.vip-card.featured,
.vip-card.gold,
.tier-card.gold {
    box-shadow:
        0 0 0 1px rgba(212,175,55,0.3),
        0 0 40px rgba(212,175,55,0.12),
        0 16px 48px rgba(0,0,0,0.6);
    background: linear-gradient(145deg, #0f0e00, #1a1600, #0a0900);
}

/* Glassmorphism on featured card header */
.vip-card.featured .vip-card-header,
.vip-card.gold .vip-card-header,
.tier-card.gold .tier-card-header {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Comparison table — row hover */
.vip-compare-table tr:hover td,
.comparison-table tr:hover td {
    background: rgba(212,175,55,0.03);
    transition: background 0.15s;
}

/* Comparison table — checkmarks */
.vip-compare-table .check,
.comparison-table .check {
    color: #4caf50;
    font-weight: 900;
    font-size: 1rem;
}

/* Mobile — full width tier cards */
@media (max-width: 768px) {
    .vip-tiers,
    .tier-cards {
        flex-direction: column;
        align-items: center;
    }
    .vip-card,
    .tier-card {
        width: 100%;
        max-width: 400px;
    }
    .vip-compare-table,
    .comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─── Gallery Page Polish ────────────────────────────────────────────────── */

/* Card hover — elevation lift */
.gallery-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.15);
}

/* Like button — gold fill on active */
.gallery-like-btn.liked,
.gallery-like-btn[data-liked="true"] {
    color: #D4AF37;
    transform: scale(1.15);
    transition: transform 0.15s, color 0.15s;
}

/* Like button tap animation */
@media (prefers-reduced-motion: no-preference) {
    @keyframes heartPop {
        0%   { transform: scale(1); }
        40%  { transform: scale(1.35); }
        100% { transform: scale(1); }
    }
    .gallery-like-btn:active {
        animation: heartPop 0.25s ease;
    }
}

/* Filter tab consistency — matches shop.html tabs */
.gallery-filter-tab {
    background: transparent;
    border: 1px solid #222;
    color: #666;
    padding: 8px 18px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gallery-filter-tab:hover { border-color: #D4AF37; color: #D4AF37; }
.gallery-filter-tab.active { background: #D4AF37; border-color: #D4AF37; color: #050505; }

/* Sidebar — no overflow at exactly 1200px */
@media (max-width: 1240px) {
    .gallery-leader-sidebar { display: none; }
    .gallery-with-sidebar { display: block; }
}

/* Mobile — single column at 375px */
@media (max-width: 480px) {
    .gallery-grid,
    .gallery-masonry {
        grid-template-columns: 1fr;
    }
}

/* Lightbox — swipe close on mobile (touch event wired in cart.js) */
#lightboxOverlay,
.gallery-lightbox {
    touch-action: pan-y;
}
/* ─── Blog Preview Section (Homepage) ──────────────────────────────────── */
.blog-preview-section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }
.blog-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; }
.blog-preview-loading { color: #555; font-size: 0.85rem; letter-spacing: 1px; }
.blog-preview-card {
    display: block;
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    padding: 28px 24px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}
.blog-preview-card:hover { border-color: #D4AF37; transform: translateY(-3px); }
.blog-preview-cat { font-size: 0.62rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; }
.blog-preview-card h3 { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin: 12px 0 10px; line-height: 1.4; }
.blog-preview-card p { font-size: 0.82rem; color: #888; line-height: 1.7; margin-bottom: 16px; }
.blog-preview-date { font-size: 0.68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #444; }

/* ─── Newsletter CTA Strip ──────────────────────────────────────────────── */
.newsletter-cta-strip { background: #0a0a0a; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; padding: 70px 40px; }
.newsletter-cta-inner { max-width: 600px; margin: 0 auto; text-align: center; }
.newsletter-cta-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; margin-bottom: 12px; }
.newsletter-cta-inner h2 { font-size: 1.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 12px; }
.newsletter-cta-inner p { color: #777; font-size: 0.88rem; margin-bottom: 28px; }

/* ─── Meet Callout Banner ───────────────────────────────────────────────── */
.meet-callout-banner {
    background: #0a0a0a;
    border-top: 1px solid rgba(212,175,55,0.15);
    border-bottom: 1px solid rgba(212,175,55,0.15);
    padding: 14px 40px;
}
.meet-callout-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.meet-callout-left { display: flex; flex-direction: column; gap: 2px; }
.meet-callout-label { font-size: 0.58rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #D4AF37; }
.meet-callout-name { font-size: 0.82rem; font-weight: 700; color: #fff; }
.meet-callout-countdown { font-size: 0.88rem; font-weight: 900; color: #D4AF37; letter-spacing: 1px; font-variant-numeric: tabular-nums; min-width: 140px; text-align: center; }
.meet-callout-btn { font-size: 0.72rem; padding: 9px 20px; white-space: nowrap; }

@media (max-width: 600px) {
    .meet-callout-inner { justify-content: center; text-align: center; }
    .meet-callout-left { align-items: center; }
}

/* ─── Brand Intro / Quote + Synopsis ────────────────────────────────────── */
.brand-intro-section {
    padding: 80px 40px;
    max-width: 1100px;
    margin: 0 auto;
}
.brand-intro-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.brand-quote-col {
    border-left: 2px solid #D4AF37;
    padding-left: 32px;
}
.brand-quote {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 16px;
    transition: opacity 0.4s;
}
.brand-quote-author {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D4AF37;
    transition: opacity 0.4s;
}
.brand-synopsis-col { }
.brand-synopsis-eyebrow { font-size: 0.62rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; margin-bottom: 16px; }
.brand-synopsis-heading { font-size: 2.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; line-height: 1.15; margin-bottom: 20px; }
.brand-synopsis-body { font-size: 0.9rem; color: #999; line-height: 1.8; margin-bottom: 28px; }

@media (max-width: 768px) {
    .brand-intro-inner { grid-template-columns: 1fr; gap: 40px; }
    .brand-synopsis-heading { font-size: 1.6rem; }
    .brand-quote { font-size: 1rem; }
}

/* ─── Featured Product Grid (center card larger) ─────────────────────────── */
.product-grid-featured {
    display: grid;
    grid-template-columns: 1fr 1.18fr 1fr;
    align-items: end;
    gap: 20px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.product-grid-featured .product-card { width: auto; }
.product-card a:has(.product-img-placeholder),
.product-card > a:first-child {
    display: block;
    text-decoration: none;
    color: inherit;
}
.product-card--featured {
    position: relative;
    border-color: rgba(212,175,55,0.4) !important;
    background: #0d0d0d;
}
.product-card--featured .product-image { height: 280px; }
.featured-card-label {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: #D4AF37;
    color: #050505;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    white-space: nowrap;
    z-index: 2;
}

@media (max-width: 768px) {
    .product-grid-featured { grid-template-columns: 1fr; }
    .product-card--featured .product-image { height: auto; }
    .featured-card-label { position: static; transform: none; display: inline-block; margin-bottom: 8px; }
}

/* ─── Blog Preview (2-up, header row) ───────────────────────────────────── */
.blog-preview-section { padding: 70px 40px; max-width: 1100px; margin: 0 auto; }
.blog-preview-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
}
.section-eyebrow { font-size: 0.65rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; }
.blog-preview-viewall { font-size: 0.72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #555; text-decoration: none; transition: color 0.2s; }
.blog-preview-viewall:hover { color: #D4AF37; }
.blog-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

@media (max-width: 640px) { .blog-preview-grid { grid-template-columns: 1fr; } }

/* ─── Footer Newsletter ──────────────────────────────────────────────────── */
.footer-newsletter-sub { font-size: 0.78rem; color: #555; margin-bottom: 12px; }
.footer-newsletter-form { display: flex; gap: 0; }
.footer-newsletter-input {
    flex: 1;
    background: #111;
    border: 1px solid #222;
    border-right: none;
    padding: 10px 14px;
    font-size: 0.78rem;
    color: #fff;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.footer-newsletter-input:focus { border-color: #D4AF37; }
.footer-newsletter-btn {
    background: #D4AF37;
    color: #050505;
    border: none;
    padding: 10px 16px;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.2s;
}
.footer-newsletter-btn:hover { background: #c9a430; }

/* ─── Giveaway Mode OFF ──────────────────────────────────────────────────── */
body.giveaway-off .giveaway-only,
body.giveaway-off .giveaway-feature,
body.giveaway-off .entry-milestone,
body.giveaway-off .entry-calc,
body.giveaway-off .entries-live,
body.giveaway-off .how-it-works,
body.giveaway-off .hero-ticker,
body.giveaway-off .countdown-section,
body.giveaway-off #countdownSection,
body.giveaway-off .countdown-timer,
body.giveaway-off #countdown,
body.giveaway-off .entries-badge,
body.giveaway-off .entries-pill,
body.giveaway-off .entry-count,
body.giveaway-off .rank-estimate,
body.giveaway-off .giveaway-rank,
body.giveaway-off [class*="giveaway-entries"],
body.giveaway-off .giveaway-stats-grid,
body.giveaway-off .winners-section,
body.giveaway-off a[href*="giveaway-rules"],
body.giveaway-off a[href*="winners"],
body.giveaway-off a[href*="giveaway-stats"] {
    display: none !important;
}