/* ==========================================================================
   DSG 360 Brand Elevation - Design System & Custom CSS
   ========================================================================== */

/* Theme Variables */
:root {
    /* Fonts */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Outfit', sans-serif;

    /* Theme-independent colors */
    --accent-orange: hsl(354, 90%, 52%); /* Crimson Red */
    --accent-gradient: var(--accent-orange);
    
    --success: hsl(142, 70%, 45%);
    --error: hsl(0, 84%, 60%);
    --warning: hsl(48, 96%, 53%);
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 16px -6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 30px rgba(246, 30, 52, 0.22);
}

/* Dark Theme Colors */
body.dark-theme {
    --bg-primary: hsl(220, 25%, 7%);
    --bg-secondary: hsl(220, 20%, 12%);
    --bg-tertiary: hsl(220, 18%, 16%);
    
    --text-primary: hsl(220, 10%, 93%);
    --text-secondary: hsl(220, 10%, 65%);
    --text-muted: hsl(220, 10%, 45%);
    
    --glass-bg: rgba(15, 23, 42, 0.65);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    
    --input-bg: rgba(15, 23, 42, 0.4);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-focus: var(--accent-orange);
    
    --card-glow: rgba(246, 30, 52, 0.18);
}

/* Light Theme Colors */
body.light-theme {
    --bg-primary: hsl(220, 25%, 97%);
    --bg-secondary: hsl(220, 20%, 93%);
    --bg-tertiary: hsl(220, 18%, 88%);
    
    --text-primary: hsl(220, 30%, 15%);
    --text-secondary: hsl(220, 15%, 45%);
    --text-muted: hsl(220, 10%, 60%);
    
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.05);
    
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: rgba(0, 0, 0, 0.12);
    --input-focus: var(--accent-orange);
    
    --card-glow: rgba(246, 30, 52, 0.10);
}

/* Reset & Global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

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

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

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

.gradient-text {
    color: var(--accent-orange);
    display: inline-block;
}

.accent-text {
    color: var(--accent-orange);
}

/* Layout Containers */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 24px;
}

.center-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.section-tag {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--accent-orange);
    margin-bottom: 12px;
}

.section-title {
    font-size: 2.75rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border var(--transition-fast);
    border: none;
    gap: 8px;
}

.btn:active {
    transform: scale(0.98);
}

.primary-btn {
    background: var(--accent-orange);
    color: #fff;
    box-shadow: 0 4px 20px rgba(254, 30, 48, 0.25);
}

.primary-btn:hover {
    background: hsl(354, 90%, 45%);
    box-shadow: 0 6px 24px rgba(254, 30, 48, 0.4);
    transform: translateY(-2px);
}

.secondary-btn {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}

.secondary-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
    transform: translateY(-2px);
}

/* Glassmorphism Card System */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--glass-border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

/* Header & Navigation */
.glass-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color var(--transition-normal), padding var(--transition-normal);
    padding: 20px 0;
}

.glass-header.scrolled {
    padding: 12px 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-link {
    display: flex;
    align-items: center;
}

.logo-wrapper {
    height: 48px;
    display: flex;
    align-items: center;
}

.brand-logo {
    height: 100%;
    width: auto;
    object-fit: contain;
    /* Optional: filter to make logo crisp on dark background */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

body.dark-theme .brand-logo {
    /* If the logo has dark text, we can apply an invert filter or keep it clean */
}

.logo-fallback {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-item {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-secondary);
    position: relative;
    padding: 8px 0;
}

.nav-item:hover,
.nav-item.active {
    color: var(--text-primary);
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-gradient);
    transition: width var(--transition-fast);
}

.nav-item:hover::after,
.nav-item.active::after {
    width: 100%;
}

.shop-btn {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--accent-orange);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(254, 30, 48, 0.15);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.shop-btn:hover {
    background: hsl(354, 90%, 45%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(254, 30, 48, 0.3);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.theme-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

body.dark-theme .light-icon { display: block; }
body.dark-theme .dark-icon { display: none; }
body.light-theme .light-icon { display: none; }
body.light-theme .dark-icon { display: block; }

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.mobile-menu-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* Mobile Navigation Panel */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--glass-border);
    padding: 100px 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 999;
    box-shadow: var(--shadow-lg);
    transition: right var(--transition-normal);
}

.mobile-nav.open {
    right: 0;
}

.mobile-nav-item {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: var(--accent-orange);
}

.mobile-shop-btn {
    font-family: var(--font-heading);
    font-weight: 600;
    background: var(--accent-orange);
    color: #fff;
    padding: 14px;
    text-align: center;
    border-radius: var(--radius-md);
    margin-top: 20px;
    transition: background var(--transition-fast);
}

.mobile-shop-btn:hover {
    background: hsl(354, 90%, 45%);
}

/* Hero Section */
.hero-section {
    position: relative;
    z-index: 1; /* Establish local stacking context so background video is not rendered behind body background */
    padding-top: 180px;
    padding-bottom: 100px;
    overflow: hidden;
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    opacity: 1; /* full strength: the overlay below is kept light so DSG's reel stands out (Paul, 2026-11-10) */
    transition: opacity var(--transition-slow);
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* very subtle (Paul, 2026-11-10: "the overlay should be very subtle"; was 0.75 / 0.4 / 0.05): the headline's own
       text shadow keeps it readable. No bottom fade (Paul, 2026-11-10: "the weird gradient at the bottom of the hero"):
       it faded the reel to near-black, or to a white haze in the light theme, just above the lighter logo strip */
    background: linear-gradient(to right, rgba(15, 23, 42, 0.22) 0%, rgba(15, 23, 42, 0.08) 45%, rgba(15, 23, 42, 0) 70%);
    z-index: 2;
    pointer-events: none;
    transition: background var(--transition-slow);
}

body.light-theme .hero-video-bg {
    opacity: 1;
}

body.light-theme .hero-video-overlay {
    /* the reel is a dark scene, so the light theme uses the same thin dark tint (was a white wash, 0.65 / 0.3 / 0.02)
       and the headline stays white over it, as in the dark theme */
    background: linear-gradient(to right, rgba(15, 23, 42, 0.22) 0%, rgba(15, 23, 42, 0.08) 45%, rgba(15, 23, 42, 0) 70%);
}

body.light-theme .hero-title,
body.light-theme .hero-subtitle {
    color: #ffffff;
}

.hero-bg-glow {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(254, 30, 48, 0.15) 0%, rgba(254, 30, 48, 0.02) 70%, rgba(0, 0, 0, 0) 100%);
    filter: blur(80px);
    z-index: 2;
    pointer-events: none;
    animation: glow-pulse 10s infinite alternate ease-in-out;
}

@keyframes glow-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.2); opacity: 1; }
}

.hero-container {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.tagline-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(246, 30, 52, 0.12);
    border: 1px solid rgba(246, 30, 52, 0.25);
    color: var(--accent-orange);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: var(--radius-full);
    margin-bottom: 24px;
}

.hero-title {
    font-size: 4.25rem;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.1;
    margin-bottom: 24px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* added strong text shadow */
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-primary); /* shifted to primary text for higher contrast */
    margin-bottom: 40px;
    max-width: 600px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* added text shadow */
}

.hero-actions {
    display: flex;
    gap: 16px;
}

/* Hero Product Showcase (real work photos) */
.hero-showcase {
    position: relative;
    width: 100%;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.showcase-polaroid {
    position: absolute;
    width: min(300px, 64%);
    margin: 0;
    background: #fdfdfb;
    padding: 12px 12px 46px;
    border-radius: 6px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.55s;
    will-change: transform;
}

.showcase-polaroid img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 3px;
    background: var(--bg-tertiary);
}

.showcase-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 14px;
    text-align: center;
    font-family: 'Covered By Your Grace', cursive;
    font-size: 1.05rem;
    color: #23232a;
    letter-spacing: 0.01em;
}

.showcase-polaroid.p1 { transform: rotate(-9deg) translate(-62px, 20px); z-index: 1; }
.showcase-polaroid.p2 { transform: rotate(5deg) translate(64px, -6px); z-index: 2; }
.showcase-polaroid.p3 {
    transform: rotate(-2deg) translate(6px, 46px);
    z-index: 3;
    box-shadow: 0 40px 70px -20px rgba(0, 0, 0, 0.6), 0 0 44px var(--card-glow);
}

.hero-showcase:hover .showcase-polaroid.p1 { transform: rotate(-12deg) translate(-98px, 12px); }
.hero-showcase:hover .showcase-polaroid.p2 { transform: rotate(8deg) translate(100px, -18px); }
.hero-showcase:hover .showcase-polaroid.p3 { transform: rotate(-1deg) translate(2px, 42px) scale(1.03); }

.showcase-badge {
    position: absolute;
    right: 10px;
    bottom: 34px;
    z-index: 4;
    background: var(--accent-orange);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 14px 20px;
    text-align: center;
    transform: rotate(-4deg);
    box-shadow: 0 16px 34px -10px rgba(246, 30, 52, 0.55);
}

.showcase-badge-num {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1;
}

.showcase-badge-label {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.92;
}

@media (max-width: 900px) {
    .hero-showcase { min-height: 400px; margin-top: 24px; }
    .showcase-polaroid { width: min(260px, 72%); }
    .showcase-polaroid img { height: 196px; }
}

/* Hero Terminal Visual Card (legacy) */
.visual-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 20px 50px var(--card-glow);
}

.card-header {
    background: rgba(0,0,0,0.15);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
}

.card-header .dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    margin-right: 8px;
}

.card-header .dot.red { background: #ff5f56; }
.card-header .dot.yellow { background: #ffbd2e; }
.card-header .dot.green { background: #27c93f; }

.card-title {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 12px;
}

.card-body {
    padding: 24px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.terminal-line {
    word-break: break-all;
}

.t-accent { color: var(--accent-orange); }
.t-success { color: var(--success); }
.t-comment { color: var(--text-muted); }

.visual-bar-chart {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bar-label {
    width: 80px;
    font-size: 0.75rem;
}

.bar-fill {
    height: 8px;
    background: var(--bg-tertiary);
    flex-grow: 1;
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
}

.bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--w);
    background: var(--accent-gradient);
    border-radius: var(--radius-full);
    animation: bar-load 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bar-load {
    from { width: 0; }
}

.pulse {
    animation: text-pulse 2s infinite alternate;
}

@keyframes text-pulse {
    0% { opacity: 0.8; }
    100% { opacity: 1; color: var(--accent-orange); text-shadow: 0 0 10px rgba(253,110,58,0.2); }
}

/* Clients Ticker (Infinite Scroll) */
.clients-ticker-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    padding: 60px 0;
    overflow: hidden;
    position: relative;
}

.ticker-wrapper {
    display: flex;
    width: 100%;
}

.ticker-content {
    display: flex;
    gap: 100px;
    align-items: center;
    white-space: nowrap;
    width: max-content;
    will-change: transform;
}

.ticker-logo-card {
    background: #ffffff;
    padding: 20px 40px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    min-width: 240px;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ticker-logo-card:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(246, 30, 52, 0.15);
}

.ticker-logo {
    height: 100%;
    width: auto;
    max-height: 96px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 1;
    transition: filter var(--transition-normal), opacity var(--transition-normal);
}

.ticker-logo-card:hover .ticker-logo {
    filter: grayscale(0%);
    opacity: 1;
}

body.dark-theme .ticker-logo-card {
    background: #ffffff;
}

/* About Section */
.about-section {
    position: relative;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.stat-box {
    text-align: left;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    display: block;
    color: var(--accent-orange);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.image-wrapper-glow {
    position: relative;
}

.image-wrapper-glow::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(246, 30, 52, 0.25);
    border-radius: var(--radius-lg);
    z-index: -1;
}

.apparel-mockup-card {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: var(--radius-lg);
}

.mockup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mockup-header h3 {
    font-size: 1.1rem;
}

.mockup-header span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.mockup-display {
    height: 220px;
    background: rgba(0,0,0,0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid var(--glass-border);
}

body.light-theme .mockup-display {
    background: rgba(0,0,0,0.03);
}

.mockup-icon {
    font-size: 6rem;
    color: var(--accent-orange);
    filter: drop-shadow(0 4px 10px rgba(254, 30, 48, 0.15));
}

.mockup-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.mockup-specs {
    display: flex;
    gap: 12px;
}

.spec-dot {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.spec-dot:hover {
    transform: scale(1.2);
}

/* Services Grid Section */
.services-section {
    background: var(--bg-secondary);
}

.services-slider-outer {
    position: relative;
    width: 100%;
    margin-top: 40px;
}

.services-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    padding: 15px 4px 35px 4px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

/* Custom styled scrollbar for services-grid */
.services-grid::-webkit-scrollbar {
    height: 6px;
}
.services-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
}
.services-grid::-webkit-scrollbar-thumb {
    background: var(--accent-orange);
    border-radius: var(--radius-full);
}

.service-card {
    flex: 0 0 290px;
    scroll-snap-align: start;
    padding: 30px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(246, 30, 52, 0.3);
    box-shadow: var(--shadow-lg), 0 10px 30px var(--card-glow);
}

.service-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background: rgba(254, 30, 48, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border: 1px solid rgba(254, 30, 48, 0.15);
    color: var(--accent-orange);
    transition: transform var(--transition-normal), background var(--transition-normal);
}

.service-icon-wrapper svg {
    width: 26px;
    height: 26px;
    stroke-width: 2px;
}

.service-card:hover .service-icon-wrapper {
    background: var(--accent-gradient);
    color: #fff;
    transform: scale(1.1) rotate(5deg);
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.service-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    flex-grow: 1;
}

.service-learn-more {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-orange);
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--transition-fast);
}

.service-card:hover .service-learn-more {
    gap: 12px;
}

/* Service Slide-over Drawer */
.service-drawer {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--glass-border);
    z-index: 1100;
    padding: 80px 40px;
    overflow-y: auto;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 40px rgba(0,0,0,0.3);
}

.service-drawer.open {
    right: 0;
}

/* Custom width overrides for Project details drawer on larger screens */
@media (min-width: 1025px) {
    #project-drawer {
        width: 650px;
        right: -650px;
    }
    
    #project-drawer.open {
        right: 0; /* Ensure high specificity to override the ID offset */
    }
    
    #project-drawer-img-container {
        height: 320px !important; /* Scale height of header image to match the wider drawer */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #project-drawer {
        width: 550px;
        right: -550px;
    }
    
    #project-drawer.open {
        right: 0;
    }
    
    #project-drawer-img-container {
        height: 270px !important;
    }
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.close-drawer-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.close-drawer-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.drawer-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-lg);
    background: rgba(254, 30, 48, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    border: 1px solid rgba(254, 30, 48, 0.15);
    color: var(--accent-orange);
}

.drawer-icon-wrapper svg {
    width: 38px;
    height: 38px;
    stroke-width: 2.25px;
}

.drawer-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.drawer-divider {
    height: 3px;
    width: 60px;
    background: var(--accent-gradient);
    border-radius: var(--radius-full);
    margin-bottom: 30px;
}

.drawer-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 30px;
}

.drawer-features {
    margin-bottom: 40px;
}

.drawer-features h4 {
    font-size: 1rem;
    margin-bottom: 16px;
    font-family: var(--font-heading);
}

.drawer-features ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer-features li {
    position: relative;
    padding-left: 28px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.drawer-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--success);
    font-weight: bold;
    font-size: 1.1rem;
}

.drawer-cta {
    width: 100%;
}

/* Portfolio / Work Section */
.portfolio-slider-outer {
    position: relative;
    width: 100%;
    margin-top: 40px;
}

.portfolio-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 30px;
    padding: 15px 4px 35px 4px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

/* Custom styled scrollbar for desktop */
.portfolio-grid::-webkit-scrollbar {
    height: 6px;
}
.portfolio-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
}
.portfolio-grid::-webkit-scrollbar-thumb {
    background: var(--accent-orange);
    border-radius: var(--radius-full);
}

.portfolio-card {
    flex: 0 0 460px;
    scroll-snap-align: start;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.slider-arrow:hover {
    background: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 15px rgba(254, 30, 48, 0.4);
}

.prev-arrow {
    left: -25px;
}

.next-arrow {
    right: -25px;
}


.portfolio-card:hover {
    transform: translateY(-5px);
    border-color: rgba(254, 30, 48, 0.3); /* shifted to red-themed hover border */
    box-shadow: var(--shadow-lg), 0 10px 30px var(--card-glow);
}

.portfolio-img-container {
    height: 310px;
    position: relative;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.portfolio-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.portfolio-card:hover .portfolio-img-container img {
    transform: scale(1.05);
}

.portfolio-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: var(--radius-full);
}

.portfolio-category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.portfolio-info {
    padding: 24px;
}

.portfolio-info h3 {
    font-size: 1.35rem;
    margin-bottom: 8px;
    font-weight: 700;
}

.portfolio-info p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Team Section */
.team-section {
    background: var(--bg-secondary);
}

.team-slider-outer {
    position: relative;
    width: 100%;
    margin-top: 40px;
    overflow: visible; /* allow polaroid tilts to breathe */
}

.team-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: visible; /* let rotated cards escape vertically */
    scroll-snap-type: none;
    gap: 32px;
    padding: 36px 20px 52px 20px; /* extra vertical padding for tilt clearance */
    scroll-behavior: auto;
    scrollbar-width: none;
}

.team-grid::-webkit-scrollbar {
    display: none;
}

.team-scroll-indicator {
    width: min(420px, calc(100% - 72px));
    height: 6px;
    margin: 4px auto 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.team-scroll-indicator-thumb {
    height: 100%;
    width: 80px;
    border-radius: inherit;
    background: var(--accent-orange);
    transform: translateX(0);
    transition: width var(--transition-fast);
}

.team-card {
    --card-rotate: 0deg;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    flex: 0 0 250px;
    background: linear-gradient(135deg, #fdfdfa 0%, #f5f5ee 100%); /* Warm ivory paper gradient */
    padding: 12px 12px 24px 12px;
    border-radius: 2px; /* sharper polaroid cut */
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.12), 
        0 3px 8px rgba(0, 0, 0, 0.06), 
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transform: perspective(1000px) rotate(var(--card-rotate)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0) scale(1);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    will-change: transform;
    backface-visibility: hidden;
}

.team-card:nth-child(even) {
    --card-rotate: 1.2deg;
}

.team-card:nth-child(odd) {
    --card-rotate: -1.2deg;
}

.team-card:nth-child(3n) {
    --card-rotate: 1.8deg;
}

.team-card:nth-child(3n+1) {
    --card-rotate: -1.8deg;
}

.team-card:hover {
    transform: perspective(1000px) rotate(var(--card-rotate)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-8px) scale(1.04);
    box-shadow: 0 24px 45px rgba(0, 0, 0, 0.22);
    z-index: 10;
    border-color: rgba(254, 30, 48, 0.15);
}

/* Polaroid high-fidelity interactive overlays */
.polaroid-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

.polaroid-flash.active {
    animation: camera-flash 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes camera-flash {
    0% { opacity: 0.95; }
    30% { opacity: 0.8; }
    100% { opacity: 0; }
}

.polaroid-glare {
    --glare-x: 50%;
    --glare-y: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: overlay;
    background: radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 65%);
    transition: opacity 0.15s ease;
}

.team-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: #111111;
    border: 1px solid rgba(0, 0, 0, 0.18); /* Soft cutout border instead of heavy black border */
    border-bottom-color: rgba(0, 0, 0, 0.1);
    box-shadow: 
        inset 0 3px 8px rgba(0, 0, 0, 0.3), /* Inside shadow representing recessed photo emulsion */
        0 1px 0px rgba(255, 255, 255, 0.95); /* Highlight representing raised card frame cutout */
    border-radius: 1px;
}

/* Polaroid Vignette & Texture Overlay */
.team-img-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.35);
    background: radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.team-card:hover .team-img-wrapper::after {
    opacity: 0.6;
}

.team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    filter: contrast(0.15) brightness(0.15) saturate(0.1) sepia(100%) hue-rotate(85deg) blur(8px);
    transition: transform var(--transition-slow), filter var(--transition-normal), opacity var(--transition-normal);
}

/* Image develops when card is revealed */
.team-card.reveal-active .team-img-wrapper img {
    animation: polaroid-develop 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes polaroid-develop {
    0% {
        filter: contrast(0.15) brightness(0.15) saturate(0.1) sepia(100%) hue-rotate(85deg) blur(8px);
        opacity: 0.15;
    }
    25% {
        filter: contrast(0.35) brightness(0.35) saturate(0.3) sepia(85%) hue-rotate(45deg) blur(5px);
        opacity: 0.45;
    }
    60% {
        filter: contrast(0.85) brightness(0.75) saturate(0.8) sepia(45%) hue-rotate(15deg) blur(2px);
        opacity: 0.85;
    }
    100% {
        filter: sepia(25%) contrast(1.1) brightness(0.92) saturate(1.15) blur(0px);
        opacity: 1;
    }
}

.team-card:hover .team-img-wrapper img {
    transform: scale(1.04) !important;
    filter: sepia(0%) contrast(1) brightness(1) saturate(1) blur(0px) !important;
    opacity: 1 !important;
}

.team-info {
    padding: 12px 2px 0 2px;
    text-align: center;
}

.team-info h3 {
    font-size: 1.1rem;
    margin-bottom: 2px;
    font-weight: 700;
    color: #111111;
}

.team-role {
    font-size: 0.72rem;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.team-nickname {
    font-family: 'Covered By Your Grace', cursive, sans-serif;
    font-size: 1.5rem;
    color: #1a365d; /* Soft felt-tip blue ink marker */
    font-weight: 500;
    margin-top: 4px;
    letter-spacing: 0;
    transform: rotate(-1.5deg);
    display: inline-block;
}

/* Contact & Info Section */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: start;
}

.contact-form-wrapper {
    padding: 40px;
}

.form-title {
    font-size: 2.25rem;
    margin-bottom: 12px;
}

.form-intro {
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.project-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(246, 30, 52, 0.15);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23888888'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px;
}

.submit-btn {
    align-self: flex-start;
    padding: 16px 36px;
}

.form-status {
    font-size: 0.95rem;
    margin-top: 10px;
    border-radius: var(--radius-md);
}

.form-status.success {
    color: var(--success);
}

.form-status.error {
    color: var(--error);
}

/* Contact form spam trap (#website): off screen, never shown to people. */
.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Cloudflare Turnstile widget (added by app.js above the submit button when a site key is set). */
.turnstile-box {
    margin: 0 0 20px;
    min-height: 65px;
}

/* Info Side Panel */
.contact-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-card {
    padding: 40px;
}

.info-card h3 {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.info-item:last-of-type {
    margin-bottom: 0;
}

.info-icon {
    font-size: 1.25rem;
    color: var(--accent-orange);
    margin-top: 4px;
}

.info-item h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.info-item p {
    font-size: 1rem;
    color: var(--text-secondary);
}

.hover-underline:hover {
    text-decoration: underline;
    color: var(--text-primary);
}

.social-links {
    display: flex;
    gap: 16px;
    margin-top: 40px;
}

.social-link-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.social-link-btn:hover {
    background: var(--accent-gradient);
    color: #fff;
    transform: translateY(-2px);
}

/* Leaflet Map Styling */
.map-card {
    height: 280px;
    overflow: hidden;
    padding: 0;
}

.contact-map {
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* Make Leaflet map fit beautifully in dark mode */
body.dark-theme .leaflet-tile {
    filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3);
}

body.dark-theme .leaflet-container {
    background: var(--bg-primary);
}

/* Footer Styling */
.footer-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
    padding: 80px 0 40px 0;
}

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

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand h3 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.footer-brand p {
    color: var(--text-secondary);
    max-width: 320px;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.footer-col h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.footer-col a {
    display: block;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.footer-col a:hover {
    color: var(--text-primary);
    padding-left: 2px;
}

.footer-bottom {
    border-top: 1px solid var(--glass-border);
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-extra-links a {
    margin-left: 24px;
}

.footer-extra-links a:hover {
    color: var(--text-secondary);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    /* the headline is centered here, so shade from the top (behind the text) instead of from the left */
    .hero-video-overlay {
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.1) 40%, rgba(15, 23, 42, 0) 60%);
    }

    body.light-theme .hero-video-overlay {
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.1) 40%, rgba(15, 23, 42, 0) 60%);
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
    
    .section-title {
        font-size: 2.25rem;
    }
    
    .hero-title {
        font-size: 3.25rem;
    }
    
    .nav-links {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Hamburger animation when open */
    .mobile-menu-toggle.open .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .mobile-menu-toggle.open .bar:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.open .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    .stats-row {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .stat-box {
        text-align: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-links-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .footer-extra-links a {
        margin: 0 10px;
    }
    
    .service-drawer {
        width: 100%;
        right: -100%;
        padding: 60px 24px;
    }

    /* Swipeable Portfolio Row on Mobile */
    .portfolio-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 24px;
        padding: 10px 4px 30px 4px;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Hide scrollbar for Firefox */
    }
    
    .portfolio-grid::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Chrome/Safari/Opera */
    }
    
    .portfolio-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
        max-width: 380px;
    }

    .slider-arrow {
        display: none !important;
    }
    
    /* Swipeable Services Row on Mobile */
    .services-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding: 10px 4px 30px 4px;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    
    .services-grid::-webkit-scrollbar {
        display: none;
    }
    
    .service-card {
        flex: 0 0 75%;
        scroll-snap-align: center;
        max-width: 280px;
    }
}

/* --- Scroll Reveal Animations --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ==========================================================================
   Mockup Studio
   ========================================================================== */
.mockup-section {
    padding: 100px 0;
    background: var(--bg-secondary);
}

.mockup-studio {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 32px;
    padding: 32px;
    border-radius: var(--radius-lg);
}

.mockup-catalog-header h3,
.mockup-workspace h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.mockup-cat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.mockup-cat-chip {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--input-bg);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    text-transform: capitalize;
    transition: all var(--transition-fast);
}

.mockup-cat-chip:hover { color: var(--text-primary); border-color: var(--accent-orange); }
.mockup-cat-chip.active {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

.mockup-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 6px;
}

.mockup-grid-status {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 24px 0;
    text-align: center;
}

.mockup-product-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: var(--input-bg);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
}

.mockup-product-card:hover { border-color: var(--accent-orange); transform: translateY(-2px); }
.mockup-product-card.selected {
    border-color: var(--accent-orange);
    box-shadow: var(--shadow-glow);
}

.mockup-product-card img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--radius-sm);
}

.mockup-product-card span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.mockup-workspace { display: flex; flex-direction: column; gap: 20px; }

.mockup-canvas-wrap {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--bg-tertiary);
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

.mockup-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: grab;
}

.mockup-canvas-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
}

.mockup-canvas-hint i { font-size: 2.4rem; opacity: 0.5; }
.mockup-canvas-hint.hidden { display: none; }

.mockup-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.mockup-loading.hidden { display: none; }

.mockup-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--accent-orange);
    border-radius: 50%;
    animation: mockup-spin 0.8s linear infinite;
}

@keyframes mockup-spin { to { transform: rotate(360deg); } }

.mockup-ai-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: var(--accent-orange);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1;
}

.mockup-ai-badge.hidden { display: none; }

.mockup-controls { display: flex; flex-direction: column; gap: 14px; }
.mockup-control-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.mockup-upload-btn { cursor: pointer; }
.mockup-logo-name { font-size: 0.8rem; color: var(--text-muted); }

.mockup-sliders label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mockup-sliders input[type="range"] { accent-color: var(--accent-orange); width: 160px; }
.mockup-blend-toggle input { accent-color: var(--accent-orange); }

.mockup-reset-btn {
    border: 1px solid var(--glass-border);
    background: var(--input-bg);
    color: var(--text-secondary);
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mockup-reset-btn:hover { color: var(--accent-orange); border-color: var(--accent-orange); }

.mockup-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.mockup-ai-note { font-size: 0.8rem; color: var(--text-muted); min-height: 1.2em; }

@media (max-width: 900px) {
    .mockup-studio { grid-template-columns: 1fr; padding: 20px; }
    .mockup-product-grid { max-height: 300px; }
}

.mockup-source-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 600;
    vertical-align: middle;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
}

.mockup-source-badge.live {
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
    border-color: rgba(34, 197, 94, 0.35);
}

.mockup-source-badge.hidden { display: none; }

/* ============================================================
   Mockup Studio — source toggle, search, cart & quote
   ============================================================ */
.mockup-source-toggle { display:inline-flex; gap:4px; background:var(--bg-tertiary); border:1px solid var(--glass-border); border-radius:var(--radius-full); padding:4px; margin:10px 0; }
.mockup-source-toggle button { border:none; background:transparent; color:var(--text-secondary); font-family:var(--font-body); font-weight:600; font-size:.82rem; padding:7px 16px; border-radius:var(--radius-full); cursor:pointer; transition:var(--transition-fast); }
.mockup-source-toggle button.active { background:var(--accent-orange); color:#fff; box-shadow:0 4px 12px rgba(246,30,52,.35); }

.mockup-search-wrap { position:relative; margin:6px 0 12px; }
.mockup-search-wrap i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:.85rem; pointer-events:none; }
.mockup-search { width:100%; box-sizing:border-box; padding:11px 14px 11px 38px; border-radius:var(--radius-md); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-family:var(--font-body); font-size:.9rem; }
.mockup-search:focus { outline:none; border-color:var(--accent-orange); box-shadow:0 0 0 3px rgba(246,30,52,.15); }

.mockup-cart-row { display:flex; align-items:center; gap:12px; margin-top:10px; }
.mockup-qty-label { display:flex; align-items:center; gap:8px; color:var(--text-secondary); font-size:.85rem; font-weight:600; white-space:nowrap; }
.mockup-qty-label input, .mockup-cart-qty { width:70px; padding:9px 10px; border-radius:var(--radius-sm); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-family:var(--font-body); font-weight:600; }
.mockup-addcart-btn { flex:1; }
.mockup-addcart-btn.added { background:var(--success); box-shadow:none; }

/* Floating cart button */
.mockup-cart-fab { position:fixed; right:24px; bottom:24px; z-index:1200; width:60px; height:60px; border-radius:50%; border:none; background:var(--accent-orange); color:#fff; font-size:1.25rem; cursor:pointer; box-shadow:0 12px 30px rgba(246,30,52,.45); transition:transform .25s, opacity .25s; }
.mockup-cart-fab:hover { transform:translateY(-3px) scale(1.05); }
.mockup-cart-fab.hidden { opacity:0; pointer-events:none; transform:scale(.6); }
.mockup-cart-count { position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 5px; box-sizing:border-box; border-radius:11px; background:#fff; color:var(--accent-orange); font-size:.72rem; font-weight:800; line-height:22px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.3); }

/* Cart drawer */
.mockup-cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .3s; z-index:1300; }
.mockup-cart-overlay.open { opacity:1; pointer-events:auto; }
.mockup-cart-drawer { position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--bg-secondary); border-left:1px solid var(--glass-border); box-shadow:-20px 0 50px rgba(0,0,0,.4); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1); z-index:1400; display:flex; flex-direction:column; }
.mockup-cart-drawer.open { transform:translateX(0); }
.mockup-cart-head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--glass-border); }
.mockup-cart-head h3 { font-family:var(--font-heading); font-size:1.2rem; }
.mockup-cart-close { background:none; border:none; color:var(--text-secondary); font-size:1.2rem; cursor:pointer; }
.mockup-cart-items { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
.mockup-cart-empty { color:var(--text-muted); text-align:center; padding:60px 20px; line-height:1.7; }
.mockup-cart-item { display:flex; gap:12px; padding:12px; border:1px solid var(--glass-border); border-radius:var(--radius-md); background:var(--glass-bg); }
.mockup-cart-thumb { width:56px; height:56px; flex:none; border-radius:var(--radius-sm); overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; color:#bbb; }
.mockup-cart-thumb img { width:100%; height:100%; object-fit:cover; }
.mockup-cart-info { flex:1; min-width:0; }
.mockup-cart-name { font-weight:600; font-size:.88rem; color:var(--text-primary); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mockup-cart-meta { font-size:.72rem; color:var(--text-muted); margin-bottom:6px; }
.mockup-cart-src { display:inline-block; padding:1px 7px; border-radius:var(--radius-full); font-weight:700; font-size:.66rem; margin-right:4px; }
.mockup-cart-src.pod { background:rgba(246,30,52,.15); color:var(--accent-orange); }
.mockup-cart-src.syncore { background:rgba(59,130,246,.15); color:#6ea8ff; }
.mockup-cart-note { width:100%; box-sizing:border-box; padding:6px 8px; font-size:.75rem; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); border-radius:var(--radius-sm); }
.mockup-cart-qtybox { display:flex; flex-direction:column; align-items:center; gap:8px; }
.mockup-cart-remove { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:.85rem; }
.mockup-cart-remove:hover { color:var(--error); }
.mockup-cart-foot { padding:20px 24px; border-top:1px solid var(--glass-border); }
.mockup-cart-summary { color:var(--text-secondary); font-size:.85rem; margin-bottom:12px; text-align:center; }
.mockup-cart-foot .btn { width:100%; }

/* Quote modal */
.mockup-quote-modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s; z-index:1500; }
.mockup-quote-modal.open { opacity:1; pointer-events:auto; }
.mockup-quote-card { position:relative; width:min(560px,100%); max-height:92vh; overflow-y:auto; padding:36px; }
.mockup-quote-close { position:absolute; top:16px; right:18px; background:none; border:none; color:var(--text-secondary); font-size:1.2rem; cursor:pointer; }
.mockup-quote-title { font-family:var(--font-heading); font-size:1.8rem; margin:8px 0 10px; }
.mockup-quote-intro { color:var(--text-secondary); margin-bottom:22px; font-size:.92rem; }
.mockup-quote-form .form-row { display:flex; gap:14px; }
.mockup-quote-form .form-group { flex:1; margin-bottom:14px; display:flex; flex-direction:column; }
.mockup-quote-form label { font-size:.8rem; color:var(--text-secondary); margin-bottom:6px; font-weight:600; }
.mockup-quote-form input, .mockup-quote-form textarea { padding:11px 13px; border-radius:var(--radius-md); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-family:var(--font-body); font-size:.9rem; }
.mockup-quote-form input:focus, .mockup-quote-form textarea:focus { outline:none; border-color:var(--accent-orange); box-shadow:0 0 0 3px rgba(246,30,52,.15); }
.mockup-quote-submit { width:100%; margin-top:6px; }
.mockup-quote-status { margin-top:12px; font-size:.85rem; color:var(--text-secondary); text-align:center; }
.mockup-quote-status.error { color:var(--error); }
.mockup-quote-success { text-align:center; padding:20px 0; }
.mockup-quote-check { font-size:3rem; color:var(--success); margin-bottom:12px; }
.mockup-quote-success h3 { font-family:var(--font-heading); font-size:1.4rem; margin-bottom:10px; }
.mockup-quote-success p { color:var(--text-secondary); margin-bottom:22px; }
@media (max-width:600px){ .mockup-quote-form .form-row { flex-direction:column; gap:0; } }

/* ============================================================
   Shop CTA (marketing page) + standalone Shop page
   ============================================================ */
.shop-cta-section { padding: 20px 0 90px; }
.shop-cta { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:48px 56px; }
.shop-cta-text { max-width:660px; }
.shop-cta-text .section-title { margin:10px 0 14px; }
.shop-cta-btn { margin-top:24px; display:inline-flex; align-items:center; gap:10px; }
.shop-cta-visual { flex:none; font-size:5rem; color:var(--accent-orange); opacity:.9; filter:drop-shadow(0 0 30px var(--card-glow)); }
@media (max-width:820px){ .shop-cta { flex-direction:column; text-align:center; padding:40px 26px; } .shop-cta-visual { display:none; } }

/* Standalone shop.html */
.shop-main { padding-top:92px; min-height:70vh; }
.shop-hero { padding:36px 0 6px; text-align:center; }
.shop-hero .section-title { font-size:2.6rem; }
.shop-studio { padding-top:18px; }
.nav-item.active { color:var(--accent-orange); }

/* shop.html: two ways to shop (print-on-demand catalog, bulk merch), each a link to DSG Merch Studio */
.shop-hub { padding:28px 0 90px; }
.shop-hub-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; max-width:980px; margin:0 auto; }
.shop-hub-card { padding:36px; border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:flex-start;
    transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); }
.shop-hub-card:hover { transform:translateY(-4px); border-color:rgba(246, 30, 52, 0.3); box-shadow:var(--shadow-lg), 0 10px 30px var(--card-glow); }
.shop-hub-card .service-icon-wrapper { font-size:1.35rem; margin-bottom:18px; }
.shop-hub-card h2 { font-size:1.5rem; font-weight:700; margin:8px 0 12px; }
.shop-hub-card p { color:var(--text-secondary); line-height:1.6; }
.shop-hub-points { list-style:none; padding:0; margin:18px 0 26px; display:grid; gap:10px; flex-grow:1; }
.shop-hub-points li { display:flex; gap:10px; align-items:baseline; color:var(--text-secondary); font-size:.95rem; }
.shop-hub-points i { color:var(--accent-orange); font-size:.85rem; }
.shop-hub-btn { display:inline-flex; align-items:center; gap:10px; }
.shop-hub-help { text-align:center; margin-top:36px; color:var(--text-secondary); }
.shop-hub-help a { color:var(--accent-orange); font-weight:600; }
@media (max-width:820px){ .shop-hub-grid { grid-template-columns:1fr; } .shop-hub-card { padding:28px 22px; } .shop-hero .section-title { font-size:2rem; } }

/* ============================================================
   Shop product-detail view
   ============================================================ */
.ws-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:440px; gap:14px; color:var(--text-muted); border:2px dashed var(--glass-border); border-radius:var(--radius-lg); }
.ws-empty i { font-size:2.4rem; opacity:.5; }
.ws-empty p { max-width:240px; }

.product-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.pd-gallery { display:flex; flex-direction:column; gap:12px; }
.pd-main { background:#fff; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.pd-main img { width:100%; height:100%; object-fit:contain; }
.pd-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.pd-thumb { width:62px; height:62px; padding:0; border:2px solid var(--glass-border); border-radius:var(--radius-sm); overflow:hidden; background:#fff; cursor:pointer; transition:var(--transition-fast); }
.pd-thumb.active { border-color:var(--accent-orange); }
.pd-thumb img { width:100%; height:100%; object-fit:contain; }
.pd-info { display:flex; flex-direction:column; min-width:0; }
.pd-info .section-tag { align-self:flex-start; }
.pd-title { font-family:var(--font-heading); font-size:1.5rem; margin:8px 0 10px; line-height:1.25; }
.pd-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pd-meta span { font-size:.72rem; padding:3px 10px; border-radius:var(--radius-full); background:var(--bg-tertiary); color:var(--text-secondary); }
.pd-desc { color:var(--text-secondary); font-size:.9rem; line-height:1.7; flex:1; overflow-y:auto; max-height:280px; margin-bottom:18px; }
.pd-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pd-actions .mockup-qty-label { margin-right:auto; }
.pd-add-cart.added { background:var(--success); }

/* Customize opens as a focused modal container over the shop */
.mockup-customize { position:fixed; inset:0; z-index:1450; background:rgba(0,0,0,.66); backdrop-filter:blur(2px); align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
.mockup-customize:not(.hidden) { display:flex; }
.mc-box { width:min(900px,100%); background:var(--bg-secondary); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; }
.pd-back { align-self:flex-start; background:none; border:none; color:var(--text-secondary); font-family:var(--font-body); font-size:.85rem; font-weight:600; cursor:pointer; margin-bottom:12px; display:inline-flex; align-items:center; gap:6px; }
.pd-back:hover { color:var(--accent-orange); }
@media (max-width:720px){ .product-detail { grid-template-columns:1fr; } .pd-desc { max-height:none; } }

/* View toggling for the shop workspace (no global .hidden rule exists) */
.ws-empty.hidden, .product-detail.hidden, .mockup-customize.hidden { display: none; }

/* ============================================================
   Shop GRID page + Product page (multi-page store)
   ============================================================ */
.shop-section { padding: 10px 0 80px; }
.shop-toolbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.shop-toolbar .mockup-search-wrap { flex:1; min-width:220px; margin:0; }
.shop-filters { margin-bottom:24px; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:18px; }
.shop-card { display:flex; flex-direction:column; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; transition:transform .2s, box-shadow .2s, border-color .2s; }
.shop-card:hover { transform:translateY(-4px); border-color:rgba(246,30,52,.4); box-shadow:0 14px 30px -12px rgba(0,0,0,.5); }
.shop-card-img { background:#fff; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:14px; }
.shop-card-img img { width:100%; height:100%; object-fit:contain; }
.shop-card-body { padding:14px 16px 16px; }
.shop-card-cat { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-orange); font-weight:700; margin-bottom:5px; }
.shop-card-name { font-size:.9rem; color:var(--text-primary); font-weight:600; line-height:1.35; }
.mockup-grid-status { grid-column:1/-1; text-align:center; color:var(--text-muted); padding:60px 20px; }

/* Product page */
.product-main { padding-top:110px; padding-bottom:80px; min-height:80vh; }
.product-back { display:inline-flex; align-items:center; gap:8px; color:var(--text-secondary); text-decoration:none; font-weight:600; font-size:.9rem; margin-bottom:24px; }
.product-back:hover { color:var(--accent-orange); }
.product-page-detail { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:start; }
.product-page-detail .pd-main { max-width:520px; }
.product-page-detail .pd-title { font-size:2rem; }
.product-page-detail .pd-desc { max-height:none; }
.pd-imprint { margin:6px 0 22px; padding:18px 0; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); }
.pd-imprint h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); margin-bottom:10px; }
.pd-imprint-chips { display:flex; flex-wrap:wrap; gap:8px; }
.pd-imprint-chip { font-size:.78rem; padding:5px 12px; border-radius:var(--radius-full); background:rgba(246,30,52,.12); color:var(--accent-orange); font-weight:600; }
.pd-imprint-extra { margin-top:10px; font-size:.8rem; color:var(--text-muted); }
@media (max-width:820px){ .product-page-detail { grid-template-columns:1fr; gap:24px; } }

/* Product page: pricing + colors */
.pd-pricing { margin:18px 0; padding:18px 0; border-top:1px solid var(--glass-border); }
.pd-pricing h4, .pd-colors h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); margin-bottom:10px; }
.pd-price-table { width:100%; max-width:320px; border-collapse:collapse; }
.pd-price-table td { padding:6px 0; font-size:.92rem; border-bottom:1px solid var(--glass-border); }
.pd-price-table td:first-child { color:var(--text-secondary); }
.pd-price-table td:last-child { text-align:right; font-weight:700; color:var(--accent-orange); font-family:var(--font-heading); }
.pd-price-table td span { font-size:.72rem; color:var(--text-muted); font-weight:400; margin-left:2px; }
.pd-price-range { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--accent-orange); }
.pd-price-range span { font-size:.8rem; color:var(--text-muted); font-weight:400; }
.pd-price-meta { margin-top:10px; font-size:.8rem; color:var(--text-muted); }
.pd-price-note { margin-top:8px; font-size:.78rem; color:var(--text-secondary); line-height:1.5; font-style:italic; }
.pd-colors { margin-bottom:18px; }
.pd-color-count { background:var(--bg-tertiary); color:var(--text-secondary); border-radius:var(--radius-full); padding:1px 8px; font-size:.7rem; margin-left:4px; }
.pd-color-list { display:flex; flex-wrap:wrap; gap:6px; }
.pd-color-chip { font-size:.72rem; padding:4px 10px; border-radius:var(--radius-full); background:var(--bg-tertiary); color:var(--text-secondary); }
.pd-color-more { font-size:.72rem; padding:4px 10px; color:var(--text-muted); font-style:italic; }

/* Decoration spec (method / location / imprint color) */
.deco-row { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.deco-field { display:flex; flex-direction:column; gap:5px; flex:1; min-width:150px; }
.deco-field > span { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); font-weight:700; }
.deco-field select, .deco-field input[type=text] { padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-family:var(--font-body); font-size:.85rem; }
.deco-field select:focus, .deco-field input:focus { outline:none; border-color:var(--accent-orange); }
.deco-color-input { display:flex; gap:6px; align-items:center; }
.deco-color-input input[type=color] { width:38px; height:36px; padding:2px; border:1px solid var(--input-border); border-radius:var(--radius-sm); background:var(--input-bg); cursor:pointer; }
.deco-color-input input[type=text] { flex:1; min-width:0; }

/* Size / quantity matrix */
.pd-sizes { margin:6px 0 18px; }
.pd-sizes h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); margin-bottom:10px; }
.size-matrix { display:flex; flex-wrap:wrap; gap:8px; }
.size-cell { display:flex; flex-direction:column; align-items:center; gap:4px; }
.size-cell span { font-size:.72rem; font-weight:700; color:var(--text-secondary); }
.size-cell input { width:58px; padding:7px 6px; text-align:center; border-radius:var(--radius-sm); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-weight:600; font-family:var(--font-body); }
.size-cell input:focus { outline:none; border-color:var(--accent-orange); }
.size-total { margin-top:10px; font-size:.85rem; font-weight:600; color:var(--text-secondary); }
.size-total.under-min { color:var(--error); }

/* Cart line: decoration spec + size run */
.cart-deco { display:flex; flex-wrap:wrap; gap:4px; margin:5px 0; }
.cart-deco span { font-size:.66rem; padding:2px 7px; border-radius:var(--radius-full); background:rgba(246,30,52,.12); color:var(--accent-orange); font-weight:600; }
.cart-sizes { display:flex; flex-wrap:wrap; gap:4px; margin:5px 0; }
.cart-sizes span { font-size:.66rem; padding:2px 7px; border-radius:var(--radius-sm); background:var(--bg-tertiary); color:var(--text-secondary); }
.cart-sizes b { color:var(--text-primary); margin-right:3px; }
.mockup-cart-qty[readonly] { opacity:.65; cursor:not-allowed; }

/* ============================================================
   Admin — incoming quotes
   ============================================================ */
.admin-main { padding:110px 0 80px; min-height:80vh; }
.admin-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.admin-head .section-title { font-size:2rem; margin-top:6px; }
.admin-subhead { font-family:var(--font-heading); font-size:1.2rem; margin:44px 0 14px; }
.admin-hint { font-size:.78rem; color:var(--text-muted); font-weight:400; }
.admin-stats { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.admin-stats .stat { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:14px 22px; font-size:.75rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }
.admin-stats .stat span { display:block; font-family:var(--font-heading); font-size:1.6rem; font-weight:700; color:var(--accent-orange); text-transform:none; letter-spacing:0; }
.admin-empty { color:var(--text-muted); padding:40px; text-align:center; border:2px dashed var(--glass-border); border-radius:var(--radius-md); }

.q-card { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:20px 22px; margin-bottom:16px; }
.q-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--glass-border); margin-bottom:14px; }
.q-id { font-family:var(--font-heading); font-weight:700; color:var(--accent-orange); margin-right:10px; }
.q-name { font-weight:700; color:var(--text-primary); margin-right:10px; }
.q-email { color:var(--text-secondary); text-decoration:none; margin-right:10px; }
.q-email:hover { color:var(--accent-orange); }
.q-co { color:var(--text-muted); font-size:.85rem; margin-right:10px; }
.q-right { display:flex; align-items:center; gap:12px; }
.q-date { font-size:.75rem; color:var(--text-muted); }
.q-sync { font-size:.7rem; padding:3px 10px; border-radius:var(--radius-full); background:var(--bg-tertiary); color:var(--text-secondary); }
.q-sync.submitted { background:rgba(16,185,129,.15); color:#34d399; }
.q-sync.error { background:rgba(246,30,52,.15); color:var(--accent-orange); }
.q-topnotes { font-size:.85rem; color:var(--text-secondary); font-style:italic; margin-bottom:14px; }
.q-item { display:flex; gap:18px; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--glass-border); }
.q-item:last-child { border-bottom:none; }
.q-item-title { font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.q-src { font-size:.62rem; padding:1px 7px; border-radius:var(--radius-full); background:rgba(246,30,52,.15); color:var(--accent-orange); font-weight:700; margin-left:6px; }
.q-src.promo { background:rgba(59,130,246,.15); color:#6ea8ff; }
.q-item-meta { font-size:.8rem; color:var(--text-secondary); }
.q-deco { display:flex; gap:5px; flex-wrap:wrap; margin:7px 0; }
.q-deco span { font-size:.7rem; padding:2px 9px; border-radius:var(--radius-full); background:rgba(246,30,52,.12); color:var(--accent-orange); font-weight:600; }
.q-sizes { display:flex; gap:5px; flex-wrap:wrap; margin:6px 0; }
.q-sizes span { font-size:.72rem; padding:3px 9px; border-radius:var(--radius-sm); background:var(--bg-tertiary); color:var(--text-secondary); }
.q-sizes b { color:var(--text-primary); }
.q-notes { font-size:.8rem; color:var(--text-muted); font-style:italic; margin-top:6px; }
.q-art-wrap { display:flex; gap:10px; flex:none; }
.q-art { display:flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; }
.q-art img { width:74px; height:74px; object-fit:contain; background:#fff; border-radius:var(--radius-sm); border:1px solid var(--glass-border); }
.q-art span { font-size:.68rem; color:var(--text-secondary); }
.q-art:hover img { border-color:var(--accent-orange); }
.q-noart { font-size:.72rem; color:var(--text-muted); align-self:center; }
.q-item-min { font-size:.85rem; color:var(--text-secondary); padding:4px 0; }
.cart-card { opacity:.85; }

/* ============================================================
   AI concierge — describe your event, get product picks
   ============================================================ */
.ai-finder-section { padding:26px 0 10px; }
.ai-finder { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:26px 28px; }
.ai-finder-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; }
.ai-finder-head > i { font-size:1.5rem; color:var(--accent-orange); margin-top:3px; filter:drop-shadow(0 0 14px var(--card-glow)); }
.ai-finder-head h2 { font-family:var(--font-heading); font-size:1.25rem; margin-bottom:3px; }
.ai-finder-head p { color:var(--text-secondary); font-size:.88rem; }
.ai-finder-form { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.ai-finder-form textarea { flex:1; min-width:260px; resize:vertical; padding:12px 14px; border-radius:var(--radius-md); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-family:var(--font-body); font-size:.92rem; line-height:1.5; }
.ai-finder-form textarea:focus { outline:none; border-color:var(--accent-orange); box-shadow:0 0 0 3px rgba(246,30,52,.15); }
.ai-finder-form .btn { white-space:nowrap; align-self:flex-end; }
.ai-finder-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ai-chip { border:1px solid var(--glass-border); background:var(--bg-tertiary); color:var(--text-secondary); font-family:var(--font-body); font-size:.76rem; padding:6px 13px; border-radius:var(--radius-full); cursor:pointer; transition:var(--transition-fast); }
.ai-chip:hover { border-color:var(--accent-orange); color:var(--accent-orange); }
.ai-finder-loading, .ai-finder-error { margin-top:18px; color:var(--text-muted); font-size:.9rem; }
.ai-finder-error { color:var(--error); }
.ai-understood { margin-top:18px; padding:14px 16px; border-radius:var(--radius-md); background:var(--bg-tertiary); font-size:.88rem; color:var(--text-secondary); }
.ai-understood b { color:var(--text-primary); }
.ai-chips-read { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.ai-chips-read span { font-size:.7rem; padding:2px 10px; border-radius:var(--radius-full); background:rgba(246,30,52,.13); color:var(--accent-orange); font-weight:600; }
.ai-rec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-top:16px; }
.ai-rec-card { display:flex; flex-direction:column; background:var(--bg-secondary); border:1px solid var(--glass-border); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; transition:transform .2s, border-color .2s; }
.ai-rec-card:hover { transform:translateY(-3px); border-color:rgba(246,30,52,.45); }
.ai-rec-img { background:#fff; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:12px; }
.ai-rec-img img { width:100%; height:100%; object-fit:contain; }
.ai-rec-body { padding:12px 14px 14px; }
.ai-rec-cat { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-orange); font-weight:700; margin-bottom:4px; }
.ai-rec-name { font-size:.85rem; font-weight:600; color:var(--text-primary); line-height:1.3; margin-bottom:6px; }
.ai-rec-why { font-size:.75rem; color:var(--text-secondary); line-height:1.45; font-style:italic; }
.ai-advice { margin-top:16px; padding:12px 16px; border-left:3px solid var(--accent-orange); background:var(--bg-tertiary); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:.85rem; color:var(--text-secondary); }
.ai-advice i { color:var(--accent-orange); margin-right:6px; }

/* AI mode toggle + kit presentation */
.ai-mode-toggle { display:inline-flex; gap:4px; background:var(--bg-tertiary); border:1px solid var(--glass-border); border-radius:var(--radius-full); padding:4px; margin-bottom:12px; }
.ai-mode-toggle button { border:none; background:transparent; color:var(--text-secondary); font-family:var(--font-body); font-weight:600; font-size:.78rem; padding:6px 15px; border-radius:var(--radius-full); cursor:pointer; }
.ai-mode-toggle button.active { background:var(--accent-orange); color:#fff; }
.kit-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-top:18px; padding-bottom:12px; border-bottom:1px solid var(--glass-border); }
.kit-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-orange); font-weight:700; }
.kit-head h3 { font-family:var(--font-heading); font-size:1.3rem; margin-top:3px; }
.kit-total { text-align:right; font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.kit-total span { display:block; font-family:var(--font-heading); font-size:1.7rem; font-weight:700; color:var(--accent-orange); text-transform:none; letter-spacing:0; }
.kit-total.over span { color:var(--error); }
.kit-total em { display:block; font-style:normal; font-size:.7rem; color:var(--text-muted); margin-top:2px; }
.kit-role { font-size:.64rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--text-primary); background:var(--bg-tertiary); display:inline-block; padding:2px 8px; border-radius:var(--radius-full); margin-bottom:6px; }

/* ============================================================
   Unified catalog: filter rail + result grid + pagination
   ============================================================ */
.shop-toolbar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:22px 0 18px; }
.shop-toolbar .mockup-search-wrap { flex:1; min-width:260px; margin:0; }
.shop-toolbar .mockup-search { padding:13px 14px 13px 40px; font-size:.95rem; }

.shop-layout { display:grid; grid-template-columns:238px minmax(0,1fr); gap:26px; align-items:start; }
.shop-filters-rail { position:sticky; top:96px; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:18px; }
.filter-block h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); margin-bottom:10px; }
.filter-search { width:100%; box-sizing:border-box; padding:8px 11px; margin-bottom:10px; border-radius:var(--radius-sm); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-family:var(--font-body); font-size:.82rem; }
.filter-search:focus { outline:none; border-color:var(--accent-orange); }
.filter-list { max-height:460px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.filter-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius-sm); cursor:pointer; font-size:.82rem; color:var(--text-secondary); }
.filter-item:hover { background:var(--bg-tertiary); }
.filter-item.on { background:rgba(246,30,52,.12); color:var(--accent-orange); font-weight:600; }
.filter-item input { accent-color:var(--accent-orange); }
.fi-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fi-count { font-size:.7rem; color:var(--text-muted); }
.filter-none { font-size:.78rem; color:var(--text-muted); padding:8px; }

.results-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; color:var(--text-secondary); font-size:.85rem; }
.active-filters { display:flex; gap:6px; flex-wrap:wrap; }
.af-chip { border:1px solid var(--glass-border); background:var(--bg-tertiary); color:var(--text-primary); font-family:var(--font-body); font-size:.74rem; padding:4px 11px; border-radius:var(--radius-full); cursor:pointer; }
.af-chip:hover { border-color:var(--accent-orange); color:var(--accent-orange); }
.af-chip i { font-size:.66rem; margin-left:3px; opacity:.7; }

.shop-card { position:relative; }
.shop-card-badge { position:absolute; top:9px; left:9px; z-index:2; font-size:.6rem; font-weight:800; letter-spacing:.04em; padding:3px 8px; border-radius:var(--radius-full); text-transform:uppercase; }
.shop-card-badge.pod { background:rgba(246,30,52,.92); color:#fff; }
.shop-card-badge.promo { background:rgba(59,130,246,.92); color:#fff; }
.shop-card-brand { font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; margin-bottom:4px; }
.shop-card-price { margin-top:6px; font-family:var(--font-heading); font-weight:700; color:var(--accent-orange); font-size:.95rem; }
.shop-card-price span { font-size:.7rem; color:var(--text-muted); font-weight:400; }

.load-more-wrap { display:flex; justify-content:center; margin-top:26px; }
.load-more-wrap .btn span { opacity:.65; font-weight:400; font-size:.82rem; }
@media (max-width:900px){ .shop-layout { grid-template-columns:1fr; } .shop-filters-rail { position:static; } .filter-list { max-height:220px; } }
.filter-block h4 { display:flex; align-items:center; justify-content:space-between; }
.filter-clear { border:none; background:none; color:var(--accent-orange); font-family:var(--font-body); font-size:.68rem; font-weight:700; text-transform:none; letter-spacing:0; cursor:pointer; padding:0; }
.filter-clear:hover { text-decoration:underline; }
.af-clear { border:none; background:none; color:var(--accent-orange); font-family:var(--font-body); font-size:.74rem; font-weight:700; cursor:pointer; padding:4px 6px; }
.af-clear:hover { text-decoration:underline; }
/* AI picks rendered inside the catalog grid */
.shop-card.ai-pick { border-color:rgba(246,30,52,.4); }
.pick-role { position:absolute; top:9px; right:9px; z-index:2; font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:var(--radius-full); background:rgba(0,0,0,.7); color:#fff; }
.pick-why { margin-top:7px; font-size:.73rem; line-height:1.45; color:var(--text-secondary); font-style:italic; }
.af-chip.ai { border-color:var(--accent-orange); color:var(--accent-orange); }
/* Colour swatches */
.pd-color-picked { font-size:.74rem; color:var(--accent-orange); font-weight:600; text-transform:none; letter-spacing:0; margin-left:6px; }
.pd-swatches { display:flex; flex-wrap:wrap; gap:7px; }
.pd-swatch { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--glass-border); background:var(--bg-tertiary); color:var(--text-secondary); font-family:var(--font-body); font-size:.72rem; padding:5px 11px; border-radius:var(--radius-full); cursor:pointer; transition:var(--transition-fast); }
.pd-swatch:hover { border-color:var(--accent-orange); color:var(--text-primary); }
.pd-swatch.on { border-color:var(--accent-orange); background:rgba(246,30,52,.12); color:var(--accent-orange); font-weight:700; }
.pd-swatch.has-img::after { content:"\f03e"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.58rem; opacity:.4; margin-left:1px; }
.sw-dot { width:13px; height:13px; border-radius:50%; border:1px solid rgba(255,255,255,.25); flex:none; }

/* Collapsible concierge bar */
.ai-finder { padding:0; overflow:hidden; }
.ai-finder-bar { width:100%; display:flex; align-items:center; gap:12px; padding:14px 20px; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--font-body); color:var(--text-secondary); font-size:.9rem; }
.ai-finder-bar > i { color:var(--accent-orange); font-size:1.05rem; }
.ai-bar-text { flex:1; }
.ai-bar-text b { color:var(--text-primary); }
.ai-bar-cta { color:var(--accent-orange); font-weight:700; font-size:.82rem; white-space:nowrap; }
.ai-bar-cta i { transition:transform .25s; margin-left:4px; font-size:.7rem; }
.ai-finder:not(.collapsed) .ai-bar-cta i { transform:rotate(180deg); }
.ai-finder-bar:hover { background:var(--bg-tertiary); }
.ai-finder-panel { padding:0 20px 20px; }
.ai-finder.collapsed .ai-finder-panel { display:none; }
.ai-finder-head { display:none; }

/* Category + price filter blocks */
.filter-block + .filter-block { margin-top:20px; padding-top:18px; border-top:1px solid var(--glass-border); }
.price-presets { display:flex; flex-direction:column; gap:5px; }
.price-presets button { text-align:left; border:1px solid var(--glass-border); background:var(--bg-tertiary); color:var(--text-secondary); font-family:var(--font-body); font-size:.8rem; padding:7px 11px; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition-fast); }
.price-presets button:hover { border-color:var(--accent-orange); color:var(--text-primary); }
.price-presets button.on { background:rgba(246,30,52,.13); border-color:var(--accent-orange); color:var(--accent-orange); font-weight:700; }
.filter-note { margin-top:9px; font-size:.68rem; color:var(--text-muted); line-height:1.4; }
#cat-list { max-height:none; }
.fi-src { font-size:.56rem; font-weight:800; letter-spacing:.03em; padding:1px 5px; border-radius:var(--radius-full); margin-left:6px; vertical-align:middle; }
.fi-src.pod { background:rgba(246,30,52,.18); color:var(--accent-orange); }
.fi-src.promo { background:rgba(59,130,246,.18); color:#6ea8ff; }
.gs-hint { margin:10px auto 0; max-width:440px; font-size:.85rem; line-height:1.6; color:var(--text-secondary); }
.gs-fix { display:inline-block; margin-top:10px; border:1px solid var(--accent-orange); background:none; color:var(--accent-orange); font-family:var(--font-body); font-size:.8rem; font-weight:600; padding:6px 14px; border-radius:var(--radius-full); cursor:pointer; }
.gs-fix:hover { background:rgba(246,30,52,.12); }

/* ------------------------------------------------------------------
   Shop/product pages are dense catalog UIs, not marketing sections.
   .section-container ships 100px of vertical padding for the marketing
   page; that stacks to ~200px of dead space between the concierge bar
   and the catalog. Tighten it here only (marketing page unaffected).
   ------------------------------------------------------------------ */
body[data-page="shop"] .section-container,
body[data-page="product"] .section-container,
body[data-page="admin"] .section-container { padding-top:0; padding-bottom:0; }
body[data-page="shop"] .ai-finder-section { padding:14px 0 0; }
body[data-page="shop"] .shop-section { padding-top:0; }
body[data-page="shop"] .shop-toolbar { margin-top:14px; }
body[data-page="shop"] .shop-main { padding-top:104px; }

/* Buyer flow: quick-add, multi-select, quote list */
.shop-card { position:relative; display:flex; flex-direction:column; }
.card-link { display:flex; flex-direction:column; flex:1; text-decoration:none; }
.card-select { position:absolute; top:8px; right:8px; z-index:3; width:26px; height:26px; border-radius:6px;
  background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; transition:opacity .18s; }
.shop-card:hover .card-select, .shop-card.picked .card-select { opacity:1; }
.card-select input { accent-color:var(--accent-orange); width:15px; height:15px; cursor:pointer; }
.shop-card.picked { border-color:var(--accent-orange); box-shadow:0 0 0 2px rgba(246,30,52,.28); }
.card-quick-add { margin:0 12px 12px; border:1px solid var(--glass-border); background:var(--bg-tertiary);
  color:var(--text-secondary); font-family:var(--font-body); font-size:.75rem; font-weight:600;
  padding:7px 10px; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition-fast); }
.card-quick-add:hover { border-color:var(--accent-orange); color:var(--accent-orange); }
.card-quick-add.added { background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.5); color:#34d399; }
.shop-card-price .quoted { font-size:.76rem; color:var(--text-muted); font-weight:400; }

.bulk-bar { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:1250;
  display:flex; align-items:center; gap:14px; padding:12px 18px; border-radius:var(--radius-full);
  background:var(--bg-secondary); border:1px solid var(--glass-border); box-shadow:0 16px 40px rgba(0,0,0,.5); }
.bulk-bar span { color:var(--text-secondary); font-size:.85rem; }
.bulk-bar b { color:var(--accent-orange); font-size:1rem; }
.bulk-clear { background:none; border:none; color:var(--text-muted); font-family:var(--font-body); font-size:.8rem; cursor:pointer; }
.bulk-clear:hover { color:var(--accent-orange); }
.mockup-cart-fab.pulse { animation:fabPulse .9s ease; }
@keyframes fabPulse { 0%,100%{transform:scale(1);} 40%{transform:scale(1.18);} }

.cart-price { font-family:var(--font-heading); font-weight:700; color:var(--accent-orange); font-size:.85rem; margin:4px 0; }
.cart-price span { font-size:.68rem; color:var(--text-muted); font-weight:400; }
.cart-price.quoted { color:var(--text-muted); font-weight:400; font-family:var(--font-body); font-size:.75rem; }
.cart-mockup-link { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--accent-orange); text-decoration:none; margin-top:3px; }
.cart-mockup-link:hover { text-decoration:underline; }
.cart-has-art { font-size:.72rem; color:#34d399; }
.cart-est { color:var(--accent-orange); font-weight:700; font-size:.9rem; }

/* Imprint size in inches */
.imprint-size-row { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.imprint-dim { display:flex; flex-direction:column; gap:5px; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); font-weight:700; }
.dim-input { display:inline-flex; align-items:center; gap:5px; }
.dim-input input { width:76px; padding:8px 9px; border-radius:var(--radius-sm); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-family:var(--font-body); font-weight:600; }
.dim-input input[readonly] { opacity:.6; }
.dim-input em { font-style:normal; font-size:.72rem; color:var(--text-muted); }
.imprint-max { font-size:.74rem; color:var(--text-muted); margin-bottom:9px; }
.imprint-max.over { color:var(--error); font-weight:700; }

/* Admin: imprint location naming */
.loc-intro { font-size:.82rem; color:var(--text-secondary); line-height:1.6; margin-bottom:14px; }
.loc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-bottom:16px; }
.loc-row { display:flex; align-items:center; gap:8px; }
.loc-id { flex:none; width:34px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); background:var(--bg-tertiary); color:var(--accent-orange); font-weight:700; font-size:.78rem; }
.loc-row input { flex:1; min-width:0; padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-family:var(--font-body); font-size:.82rem; }
.loc-status { margin-left:12px; font-size:.82rem; color:var(--text-secondary); }
.imprint-contrast { margin-top:10px; font-size:.82rem; }
.imprint-contrast.warn { color:#fbbf24; background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.35); padding:9px 12px; border-radius:var(--radius-sm); }
.imprint-contrast .contrast-fix { background:none; border:none; color:var(--accent-orange); font-family:var(--font-body); font-weight:700; font-size:.82rem; cursor:pointer; text-decoration:underline; padding:0 2px; }
.exact-art-toggle { display:flex; align-items:center; gap:8px; margin:10px 0 4px; font-size:.8rem; color:var(--text-secondary); cursor:pointer; }
.exact-art-toggle input { accent-color:var(--accent-orange); }
.exact-art-toggle span { color:var(--text-muted); font-size:.74rem; }
.accurate-request { display:flex; align-items:flex-start; gap:9px; margin:6px 0 4px; padding:11px 13px; border:1px solid rgba(246,30,52,.35); background:rgba(246,30,52,.07); border-radius:var(--radius-sm); font-size:.82rem; color:var(--text-secondary); cursor:pointer; flex-wrap:wrap; }
.accurate-request input { accent-color:var(--accent-orange); margin-top:2px; }
.accurate-request b { color:var(--text-primary); font-weight:700; }
.accurate-request span { flex-basis:100%; margin-left:24px; color:var(--text-muted); font-size:.75rem; }
.ai-disclaimer { display:block; margin-top:4px; color:var(--text-muted); line-height:1.55; }
.ai-disclaimer i { color:var(--accent-orange); margin-right:5px; }
.q-proof { margin-top:8px; padding:8px 11px; border-radius:var(--radius-sm); background:rgba(246,30,52,.12); border:1px solid rgba(246,30,52,.35); color:var(--accent-orange); font-size:.78rem; }
.q-proof b { color:var(--text-primary); }
.q-mtype { display:inline-block; font-size:.64rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:var(--radius-full); margin-top:6px; }
.q-mtype.ai { background:rgba(148,163,184,.18); color:#94a3b8; }
.q-mtype.exact { background:rgba(16,185,129,.16); color:#34d399; }
.q-hexrow { display:flex; align-items:center; gap:6px; font-size:.74rem; color:var(--text-muted); margin:5px 0; }
.q-hex { width:14px; height:14px; border-radius:3px; border:1px solid rgba(255,255,255,.25); display:inline-block; }
.admin-stats .stat.proof span { color:#fbbf24; }

/* Mockup version strip */
.mockup-versions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 2px; }
.mv-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; }
.mv-thumb { display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:2px solid var(--glass-border); border-radius:var(--radius-sm); padding:3px; cursor:pointer; transition:var(--transition-fast); }
.mv-thumb img { width:64px; height:64px; object-fit:cover; border-radius:4px; display:block; }
.mv-thumb span { font-size:.62rem; color:var(--text-secondary); max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mv-thumb:hover { border-color:rgba(246,30,52,.5); }
.mv-thumb.on { border-color:var(--accent-orange); }
.mv-thumb.on span { color:var(--accent-orange); font-weight:700; }
.v-ok { color:#34d399; font-size:.78rem; }
.v-ok i { margin-right:3px; }

/* ============================================================
   Holiday Gift Guide (public, vendor names masked)
   ============================================================ */
body[data-page="holiday"] .section-container { padding-top:0; padding-bottom:0; }
.holiday-main { padding-top:92px; }
.holiday-hero { padding:56px 0 30px; text-align:center; }
.holiday-banner { display:block; width:min(880px, 92%); margin:0 auto 18px; opacity:.95; }
.holiday-banner.small { width:min(560px, 80%); margin-bottom:22px; opacity:.8; }
.holiday-title { font-family:var(--font-heading); font-size:clamp(2.2rem, 5vw, 3.4rem); font-weight:800; letter-spacing:-.02em; margin:8px 0 10px; background:linear-gradient(120deg, #c9a24a, #f0d78a 45%, #c9a24a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.holiday-tagline { font-size:1.1rem; color:var(--text-primary); font-weight:500; margin-bottom:12px; }
.holiday-intro { max-width:720px; margin:0 auto; color:var(--text-secondary); line-height:1.7; font-size:.98rem; }
.holiday-grid-section { padding:26px 0 40px; }
.holiday-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px; }
.holiday-card { position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 24px 22px; border-radius:var(--radius-lg); background:var(--glass-bg); border:1px solid var(--glass-border); text-decoration:none; color:var(--text-primary); transition:transform .22s, border-color .22s, box-shadow .22s; overflow:hidden; }
.holiday-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, #2f5d4a, #c9a24a, #b23a2e); opacity:.85; }
.holiday-card:hover { transform:translateY(-4px); border-color:rgba(201,162,74,.55); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.hc-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(201,162,74,.14); color:#e2c46b; font-size:1.15rem; }
.hc-num { position:absolute; top:18px; right:22px; font-family:var(--font-heading); font-size:.78rem; font-weight:700; letter-spacing:.08em; color:var(--text-muted); }
.hc-title { font-family:var(--font-heading); font-size:1.12rem; font-weight:700; line-height:1.3; margin-top:4px; }
.hc-blurb { color:var(--text-secondary); font-size:.9rem; line-height:1.55; flex:1; }
.hc-cta { display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#e2c46b; margin-top:6px; }
.hc-cta i { font-size:.7rem; transition:transform .2s; }
.holiday-card:hover .hc-cta i { transform:translate(2px,-2px); }
.holiday-cta { padding:40px 0 80px; text-align:center; }
.holiday-cta-title { font-family:var(--font-heading); font-size:1.7rem; font-weight:800; margin-bottom:10px; }
.holiday-cta-text { color:var(--text-secondary); max-width:560px; margin:0 auto 22px; line-height:1.6; }
.holiday-cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Admin: holiday guide control */
.hol-row { display:grid; grid-template-columns:34px 150px 1fr 1fr; gap:10px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--glass-border); }
.hol-row.head { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; border-bottom:1px solid var(--glass-border); }
.hol-row input[type=text] { width:100%; padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-primary); font-family:var(--font-body); font-size:.82rem; }
.hol-row input[type=checkbox] { accent-color:var(--accent-orange); width:16px; height:16px; }
.hol-vendor { font-weight:700; color:var(--text-primary); font-size:.85rem; }
.hol-vendor small { display:block; color:var(--text-muted); font-weight:400; font-size:.68rem; word-break:break-all; }
.hol-hidden .hol-vendor, .hol-hidden input[type=text] { opacity:.45; }
@media (max-width: 720px) { .hol-row { grid-template-columns:30px 1fr; } .hol-row > :nth-child(3), .hol-row > :nth-child(4) { grid-column: 2; } }

/* Admin: contact messages table */
.contact-table-wrap { overflow-x:auto; }
.contact-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.contact-table th, .contact-table td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--glass-border, rgba(255,255,255,.08)); }
.contact-table th { color:var(--text-muted); font-weight:600; white-space:nowrap; }
.contact-table .nowrap { white-space:nowrap; }
.contact-table .contact-msg { white-space:pre-wrap; min-width:260px; max-width:520px; }