/* ==========================================================================
   LuxeGreet Stationery Co. - Core Stylesheet (style.css)
   Artisanal Greeting Card E-Commerce Architecture
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN SYSTEM & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-script: 'Dancing Script', cursive;
    
    --color-bg: #FAF8F5;
    --color-surface: #FFFFFF;
    --color-surface-subtle: #F5F1EB;
    --color-border: #EADBCE;
    --color-border-light: #F0E6DD;
    
    --color-primary: #B85D43;
    --color-primary-hover: #9E4A32;
    --color-primary-light: #FDF3F0;
    
    --color-gold: #C59B27;
    --color-gold-light: #FAF3E0;
    --color-gold-border: #E8D39E;
    
    --color-text-main: #1F1D1A;
    --color-text-muted: #6B635B;
    --color-text-light: #9C9389;
    
    --color-success: #2D6A4F;
    --color-success-bg: #EAF5EE;
    
    --shadow-subtle: 0 2px 8px rgba(31, 29, 26, 0.04);
    --shadow-card: 0 10px 30px rgba(74, 43, 33, 0.07), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-hover: 0 20px 40px rgba(74, 43, 33, 0.12), 0 4px 10px rgba(0,0,0,0.06);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-full: 9999px;
    --transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. BASE, RESET & TYPOGRAPHY
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

/* --------------------------------------------------------------------------
   2.5 UNIVERSAL LUCIDE & BESPOKE ICON STYLING
   -------------------------------------------------------------------------- */
svg.lucide,
i[data-lucide] {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
svg.lucide {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.logo-icon svg,
.logo-icon svg.lucide {
    width: 22px;
    height: 22px;
    display: block;
    color: #FFFFFF;
}
.btn-cart-trigger svg.lucide,
.btn-cart-trigger svg {
    width: 20px;
    height: 20px;
    display: block;
    color: inherit;
}
.search-pill-btn svg.lucide,
.search-pill-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}
.stat-pill-avatar svg.lucide,
.stat-pill-avatar svg {
    width: 18px;
    height: 18px;
    display: block;
}
.btn-secondary-hero svg.lucide,
.btn-secondary-hero svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.btn-primary-hero svg.lucide,
.btn-primary-hero svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. HEADER, ANNOUNCEMENT BAR & NAVIGATION
   -------------------------------------------------------------------------- */
.announcement-bar {
    background: linear-gradient(90deg, #2A2421 0%, #3D322C 50%, #2A2421 100%);
    color: #F7EFE8;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.announcement-bar span.highlight {
    color: #E6C587;
    font-weight: 600;
}

.navbar-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 248, 245, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition);
}
.navbar-container {
    max-width: 1760px;
    width: 100%;
    margin: 0 auto;
    padding: 14px clamp(16px, 3vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary) 0%, #D48166 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(184, 93, 67, 0.28);
}
.logo-text h1 {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-text-main);
    line-height: 1.1;
}
.logo-text span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-primary);
    font-weight: 600;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
}
.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-text-main);
    position: relative;
    padding: 6px 0;
}
.nav-links a:hover {
    color: var(--color-primary);
}
.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.search-pill-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.88rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.search-pill-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.btn-dashboard-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: #25221F;
    color: #FFFFFF;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    transition: var(--transition);
}
.btn-dashboard-badge:hover {
    background: var(--color-primary);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn-cart-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}
.btn-cart-trigger:hover,
.btn-cart-trigger.active-cart-link {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.cart-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-primary);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-surface);
}

/* --------------------------------------------------------------------------
   4. ULTRA-MODERN 3D ATELIER LOADING SCREEN & TRANSITIONS
   -------------------------------------------------------------------------- */
.atelier-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    background: #0E0C0A;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s ease;
    transform: scale(1);
    filter: blur(0px);
}
.atelier-loading-screen.fade-out {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(20px);
    pointer-events: none;
}

.atelier-ambient-glow {
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 93, 67, 0.32) 0%, rgba(230, 197, 135, 0.16) 45%, transparent 70%);
    filter: blur(75px);
    animation: ambientFloat 8s ease-in-out infinite alternate;
    pointer-events: none;
}
.atelier-ambient-mesh {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
@keyframes ambientFloat {
    0% { transform: translate(-30px, -20px) scale(0.9); }
    100% { transform: translate(30px, 30px) scale(1.15); }
}

.atelier-loader-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    max-width: 480px;
    width: 100%;
}

/* 3D Origami Stage */
.origami-stage {
    position: relative;
    width: 220px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    margin-bottom: 24px;
}

.gold-particle {
    position: absolute;
    border-radius: 50%;
    background: #E6C587;
    box-shadow: 0 0 10px #E6C587, 0 0 20px #B85D43;
    pointer-events: none;
}
.gold-particle.p1 {
    width: 4px; height: 4px;
    top: 20px; left: 20px;
    animation: particleDrift 3.5s ease-in-out infinite;
}
.gold-particle.p2 {
    width: 6px; height: 6px;
    bottom: 30px; right: 15px;
    animation: particleDrift 4s ease-in-out infinite 0.7s;
}
.gold-particle.p3 {
    width: 3px; height: 3px;
    top: 35px; right: 30px;
    animation: particleDrift 3s ease-in-out infinite 1.2s;
}
@keyframes particleDrift {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-16px) scale(1.4); opacity: 0.9; }
}

/* 3D Envelope & Card Composition */
.envelope-3d {
    position: relative;
    width: 160px;
    height: 110px;
    transform-style: preserve-3d;
    transform: rotateX(12deg) rotateY(-8deg) rotateZ(1deg);
    animation: envelopeHover 4s ease-in-out infinite;
}
@keyframes envelopeHover {
    0%, 100% { transform: rotateX(12deg) rotateY(-8deg) translateY(0); }
    50% { transform: rotateX(16deg) rotateY(6deg) translateY(-8px); }
}

.env-back {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #25201C, #181513);
    border-radius: 8px;
    border: 1px solid rgba(230, 197, 135, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.card-rising {
    position: absolute;
    width: 144px;
    height: 100px;
    left: 8px;
    top: 5px;
    background: linear-gradient(135deg, #FAF8F5 0%, #EFE9E0 100%);
    border-radius: 6px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.35);
    border: 1px solid #E6C587;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: cardRise 3s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
    z-index: 2;
}
@keyframes cardRise {
    0% { transform: translateY(0px) scale(0.96); }
    40%, 100% { transform: translateY(-44px) scale(1.02); }
}

.card-inner-foil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2;
}
.foil-crest {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #D4AF37;
    background: radial-gradient(circle, rgba(230, 197, 135, 0.35) 0%, transparent 80%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.foil-crest .monogram {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: #9E7D3B;
    letter-spacing: 1px;
}
.foil-lines span {
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    border-radius: 2px;
    margin: 2px 0;
}
.foil-lines span:nth-child(1) { width: 65px; }
.foil-lines span:nth-child(2) { width: 45px; margin: 0 auto; }

.card-sheen-sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 215, 0, 0.45) 55%, transparent 75%);
    background-size: 250% 100%;
    animation: cardSheen 2.5s infinite ease-in-out;
}
@keyframes cardSheen {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.env-pocket {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(46, 39, 34, 0.98), rgba(28, 24, 21, 0.98));
    clip-path: polygon(0% 0%, 50% 55%, 100% 0%, 100% 100%, 0% 100%);
    border-radius: 0 0 8px 8px;
    border-bottom: 1px solid rgba(230, 197, 135, 0.3);
    z-index: 3;
}

.env-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(180deg, #38302A, #28221D);
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    transform-origin: top center;
    transform: rotateX(-160deg);
    animation: flapMotion 3s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
    z-index: 4;
}
@keyframes flapMotion {
    0% { transform: rotateX(0deg); }
    35%, 100% { transform: rotateX(-165deg); }
}

.wax-seal-emblem {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, #C0392B 20%, #8C1D13 100%);
    color: #F8D8B0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 0 4px rgba(255,255,255,0.3);
    border: 1px solid #E67E22;
}

.loader-brand-box {
    margin-bottom: 16px;
}
.brand-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 4px;
    color: #C5A059;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.9;
}
.brand-kinetic-title {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 6px;
    line-height: 1;
    display: flex;
    justify-content: center;
    gap: 3px;
}
.brand-kinetic-title span {
    display: inline-block;
    animation: letterStagger 2.2s infinite ease-in-out;
}
.brand-kinetic-title span:nth-child(1) { animation-delay: 0.05s; }
.brand-kinetic-title span:nth-child(2) { animation-delay: 0.10s; }
.brand-kinetic-title span:nth-child(3) { animation-delay: 0.15s; }
.brand-kinetic-title span:nth-child(4) { animation-delay: 0.20s; }
.brand-kinetic-title span:nth-child(5) { animation-delay: 0.25s; }
.brand-kinetic-title span:nth-child(6) { animation-delay: 0.30s; }
.brand-kinetic-title span:nth-child(7) { animation-delay: 0.35s; }
.brand-kinetic-title span:nth-child(8) { animation-delay: 0.40s; }
.brand-kinetic-title span:nth-child(9) { animation-delay: 0.45s; }

@keyframes letterStagger {
    0%, 100% { transform: translateY(0); color: #FFFFFF; }
    50% { transform: translateY(-4px); color: #E6C587; }
}

.atelier-status-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(230, 197, 135, 0.18);
    padding: 7px 18px;
    border-radius: var(--radius-full);
    margin-bottom: 22px;
}
.status-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E6C587;
    box-shadow: 0 0 8px #E6C587;
    animation: statusPulse 1.2s infinite ease-in-out alternate;
}
@keyframes statusPulse {
    from { transform: scale(0.8); opacity: 0.5; }
    to { transform: scale(1.3); opacity: 1; }
}
.atelier-status-text {
    font-size: 0.84rem;
    color: #DDD4CB;
    font-weight: 400;
    letter-spacing: 0.4px;
    font-style: italic;
    font-family: var(--font-serif);
    transition: opacity 0.2s ease;
}

.laser-progress-container {
    width: 250px;
    max-width: 80vw;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    overflow: visible;
    position: relative;
    margin-bottom: 12px;
}
.laser-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #B85D43, #E6C587);
    border-radius: var(--radius-full);
    transition: width 0.12s linear;
}
.laser-head-spark {
    position: absolute;
    right: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 12px #FFFFFF, 0 0 24px #E6C587;
}

.loader-counter-row {
    width: 250px;
    max-width: 80vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: #8C827A;
    letter-spacing: 1.5px;
}
.loader-percentage {
    font-family: var(--font-sans);
    font-weight: 600;
    color: #E6C587;
    font-variant-numeric: tabular-nums;
}

/* Slim Top Loading Bar */
.top-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #B85D43, #E6C587);
    z-index: 999999;
    transition: width 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    box-shadow: 0 0 10px rgba(184, 93, 67, 0.6);
}
.top-loading-bar.active {
    opacity: 1;
}

/* Spinner and Animation Utilities */
.spin-icon {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

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

/* --------------------------------------------------------------------------
   5. STOREFRONT HOME PAGE COMPONENTS
   -------------------------------------------------------------------------- */
.hero-section {
    padding: clamp(30px, 4vw, 60px) clamp(16px, 3vw, 48px) clamp(50px, 6vw, 90px);
    max-width: 1760px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
    position: relative;
}
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F4ECE1;
    color: var(--color-primary);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1.12;
    color: var(--color-text-main);
    margin-bottom: 22px;
    font-weight: 700;
    letter-spacing: -1px;
}
.hero-title em {
    font-style: italic;
    color: var(--color-primary);
    font-weight: 500;
}
.hero-description {
    font-size: 1.12rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 34px;
    max-width: 540px;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.btn-primary-hero {
    background: var(--color-primary);
    color: #FFFFFF;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(184, 93, 67, 0.3);
    transition: var(--transition);
}
.btn-primary-hero:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(184, 93, 67, 0.4);
}
.btn-secondary-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 14px 26px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}
.btn-secondary-hero:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.hero-card-display {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.floating-card-main {
    width: 320px;
    height: 430px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(60, 40, 30, 0.2), 0 5px 15px rgba(0,0,0,0.05);
    border: 8px solid #FFFFFF;
    position: relative;
    background: #FFFFFF;
    transform: rotate(-3deg);
    transition: transform 0.4s ease;
}
.floating-card-main:hover {
    transform: rotate(0deg) scale(1.02);
}
.floating-card-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.floating-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    color: var(--color-gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid rgba(230, 197, 135, 0.5);
}
.floating-card-back {
    position: absolute;
    width: 290px;
    height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    border: 6px solid #FFFFFF;
    top: -20px;
    right: 10px;
    z-index: -1;
    transform: rotate(7deg);
    filter: brightness(0.92);
}
.floating-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-stat-pill {
    position: absolute;
    bottom: -20px;
    left: 20px;
    background: #FFFFFF;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(0,0,0,0.09);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--color-border);
}
.stat-pill-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
}

/* Category Filter Ribbon */
/* Store Hero Banner & Occasion Filter Ribbon */
.store-hero-banner {
    background: linear-gradient(180deg, #FAF7F2 0%, #F4ECE1 100%);
    border-bottom: 1px solid var(--color-border);
    padding: clamp(52px, 7vw, 84px) clamp(16px, 3.5vw, 48px) clamp(44px, 5vw, 68px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.store-hero-banner::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 320px;
    background: radial-gradient(circle, rgba(230, 197, 135, 0.25) 0%, rgba(250, 247, 242, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.store-hero-container {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.store-hero-banner .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: rgba(184, 93, 67, 0.08);
    border: 1px solid rgba(184, 93, 67, 0.22);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(184, 93, 67, 0.06);
    backdrop-filter: blur(4px);
}

.store-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.16;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}

.store-hero-sub {
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto 36px;
    font-weight: 400;
}

.store-hero-pills-wrap {
    width: 100%;
    margin-top: 6px;
}

.filter-section {
    max-width: 1760px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 3.5vw, 48px);
}

.category-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 4px 10px;
}

.cat-pill {
    padding: 10px 22px;
    border-radius: var(--radius-full);
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cat-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #FFFDF9;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(184, 93, 67, 0.12);
}

.cat-pill.active {
    background: var(--color-primary);
    color: #FFFFFF;
    border-color: var(--color-primary);
    box-shadow: 0 6px 20px rgba(184, 93, 67, 0.3);
    transform: translateY(-1px);
}

.cat-pill .count {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: #F2ECE4;
    color: var(--color-text-muted);
    transition: var(--transition);
}

.cat-pill:hover .count {
    background: #F7E7DC;
    color: var(--color-primary);
}

.cat-pill.active .count {
    background: rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
}

@media (max-width: 860px) {
    .category-pills {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 6px 12px 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        gap: 8px;
    }
    .category-pills::-webkit-scrollbar {
        display: none;
    }
    .cat-pill {
        scroll-snap-align: start;
        flex-shrink: 0;
        padding: 9px 18px;
        font-size: 0.88rem;
    }
}

/* Cards Catalog Grid */
.catalog-section {
    max-width: 1760px;
    width: 100%;
    margin: 0 auto 90px;
    padding: 0 clamp(16px, 3vw, 48px);
    position: relative;
}
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}
.section-header-row h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--color-text-main);
    line-height: 1.1;
}
.section-header-row p {
    color: var(--color-text-muted);
    font-size: 0.96rem;
    margin-top: 6px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 18vw, 320px), 1fr));
    gap: clamp(16px, 2vw, 32px);
    width: 100%;
}

.card-item {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    position: relative;
}
.card-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: #E2CFBE;
}

.card-image-wrap {
    position: relative;
    width: 100%;
    padding-top: 125%; /* 4:5 portrait ratio */
    background: #F4ECE1;
    overflow: hidden;
}
.card-image-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-item:hover .card-image-wrap img {
    transform: scale(1.06);
}

.card-badge-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
}
.card-category-tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(28, 25, 23, 0.75);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.card-content {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.card-title {
    font-family: var(--font-serif);
    font-size: 1.22rem;
    color: var(--color-text-main);
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.35;
}
.card-title a:hover {
    color: var(--color-primary);
}
.card-paper-spec {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.card-footer-row {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.price-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.current-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}
.original-price {
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-decoration: line-through;
}

.card-actions {
    display: flex;
    gap: 8px;
}
.btn-quick-add {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.btn-quick-add:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: rotate(90deg);
}
.btn-view-card {
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    color: var(--color-text-main);
    font-size: 0.84rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
}
.btn-view-card:hover {
    background: #25221F;
    color: white;
}

/* Products Loading Shimmer Skeleton */
.products-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(250, 248, 245, 0.85);
    backdrop-filter: blur(5px);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
    border-radius: var(--radius-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.products-loading-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.products-loading-badge {
    background: #25221F;
    color: #FFFFFF;
    padding: 12px 26px;
    border-radius: var(--radius-full);
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid #3E3833;
    margin-bottom: 28px;
}
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
    width: 100%;
}
.skeleton-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.skeleton-cover {
    width: 100%;
    padding-top: 125%;
    background: linear-gradient(90deg, #F3ECE5 0%, #E7DDCF 50%, #F3ECE5 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.skeleton-body {
    padding: 22px;
}
.skeleton-line {
    height: 14px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, #F3ECE5 0%, #E7DDCF 50%, #F3ECE5 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    margin-bottom: 12px;
}
.skeleton-line.title {
    height: 20px;
    width: 75%;
}
.skeleton-line.spec {
    height: 12px;
    width: 45%;
}
.skeleton-line.desc {
    width: 90%;
}

/* Personalization Feature Banner */
.personalization-banner {
    max-width: 1760px;
    width: 100%;
    margin: 0 auto 90px;
    padding: 0 clamp(16px, 3vw, 48px);
}
.personalization-card {
    background: linear-gradient(135deg, #25201C 0%, #352D26 100%);
    color: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 50px 60px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(230, 197, 135, 0.2);
}
.personalization-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(184, 93, 67, 0.25) 0%, transparent 70%);
    border-radius: 50%;
}
.personalization-card h3 {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    color: #FFFFFF;
    margin-bottom: 16px;
    line-height: 1.15;
}
.personalization-card h3 span {
    color: #E6C587;
}
.personalization-card p {
    color: #CFC5BD;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 520px;
}
.interactive-card-sample {
    background: #FDFBF7;
    color: #1F1D1A;
    padding: 30px;
    border-radius: var(--radius-md);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border: 1px solid #EADBCE;
    transform: rotate(2deg);
}
.sample-script {
    font-family: var(--font-script);
    font-size: 1.65rem;
    color: var(--color-primary);
    margin-bottom: 12px;
    line-height: 1.2;
}
.sample-body {
    font-size: 0.95rem;
    color: #554D45;
    line-height: 1.6;
    font-style: italic;
}

/* Quality Pillars */
.pillars-section {
    background: #FFFFFF;
    padding: 80px 24px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.pillars-container {
    max-width: 1760px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 3.5vw, 48px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.5vw, 40px);
}
.pillar-card {
    text-align: center;
    padding: 10px;
}
.pillar-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.pillar-card h4 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--color-text-main);
}
.pillar-card p {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. PRODUCT DETAILS & PERSONALIZATION STUDIO
   -------------------------------------------------------------------------- */
.product-detail-container {
    max-width: 1760px;
    width: 100%;
    margin: 24px auto 90px;
    padding: 0 clamp(16px, 3.5vw, 48px);
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}
.breadcrumb-nav a:hover {
    color: var(--color-primary);
}

.product-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
    gap: clamp(24px, 3.5vw, 64px);
    align-items: start;
    width: 100%;
}

/* --------------------------------------------------------------------------
   MULTI-PHOTO PRODUCT GALLERY
   -------------------------------------------------------------------------- */
.card-display-column {
    position: sticky;
    top: 110px;
}

.product-gallery-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Horizontal Thumbnail Strip Under Main Image */
.gallery-thumbnail-strip {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: #D6C7B8 transparent;
    -webkit-overflow-scrolling: touch;
    align-items: center;
}
.gallery-thumbnail-strip::-webkit-scrollbar {
    height: 5px;
}
.gallery-thumbnail-strip::-webkit-scrollbar-thumb {
    background: #D6C7B8;
    border-radius: 4px;
}
.gallery-thumbnail-strip::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.gallery-thumb-btn {
    width: 76px;
    height: 92px;
    border-radius: 8px;
    border: 2px solid #EADBCE;
    background: #FFFFFF;
    overflow: hidden;
    padding: 2px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    outline: none;
    position: relative;
}
.gallery-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}
.gallery-thumb-btn:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(50, 30, 20, 0.12);
}
.gallery-thumb-btn.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2.5px rgba(184, 93, 67, 0.28);
    transform: translateY(-1px);
}

/* Large Main Image Stage */
.gallery-main-stage {
    width: 100%;
    position: relative;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.gallery-zoom-viewport {
    width: 100%;
    height: 520px;
    position: relative;
    overflow: hidden;
    background: #FAF7F2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
}

.gallery-active-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.12s ease-out;
    user-select: none;
    pointer-events: none;
}

.gallery-badge-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(184, 93, 67, 0.15);
}

.gallery-zoom-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(28, 25, 23, 0.75);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-size: 0.74rem;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 4;
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    z-index: 5;
}
.gallery-nav-btn:hover {
    background: var(--color-primary);
    color: #FFFFFF;
    border-color: var(--color-primary);
    transform: translateY(-50%) scale(1.08);
}
.gallery-nav-btn.prev {
    left: 14px;
}
.gallery-nav-btn.next {
    right: 14px;
}

.gallery-counter-bar {
    padding: 12px 20px;
    background: #FBF9F6;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}
.view-toggle-btn.active {
    background: #FFFFFF;
    color: var(--color-text-main);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.product-meta-header {
    margin-bottom: 24px;
}
.badge-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.product-meta-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: var(--color-text-main);
    line-height: 1.15;
    margin-bottom: 14px;
}
.product-price-large {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.product-price-large .original {
    font-size: 1.1rem;
    color: var(--color-text-light);
    text-decoration: line-through;
    font-weight: 400;
}

.specs-box {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 24px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.spec-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.spec-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-light);
    font-weight: 600;
}
.spec-val {
    font-size: 0.92rem;
    color: var(--color-text-main);
    font-weight: 600;
}

.personalization-box {
    background: #FFFFFF;
    border: 2px dashed #E2D3C4;
    border-radius: var(--radius-lg);
    padding: 26px;
    margin-bottom: 30px;
}
.personalization-box h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-text-main);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-group-custom {
    margin-bottom: 16px;
}
.form-group-custom label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 6px;
}
.input-field-custom {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    background: var(--color-bg);
    outline: none;
    transition: var(--transition);
}
.input-field-custom:focus {
    border-color: var(--color-primary);
    background: #FFFFFF;
}

.btn-add-bag-main {
    width: 100%;
    padding: 18px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(184, 93, 67, 0.3);
    transition: var(--transition);
}
.btn-add-bag-main:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}

.related-cards-section {
    margin-top: 100px;
    border-top: 1px solid var(--color-border);
    padding-top: 60px;
}

/* --------------------------------------------------------------------------
   7. SHOPPING BAG & DEDICATED CART PAGE
   -------------------------------------------------------------------------- */
.cart-page-wrapper {
    max-width: 1760px;
    width: 100%;
    margin: 30px auto 100px;
    padding: 0 clamp(16px, 3vw, 48px);
}

.breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}
.breadcrumb-row a:hover {
    color: var(--color-primary);
}

.cart-title-section {
    margin-bottom: 36px;
}
.cart-title-section h1 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--color-text-main);
    line-height: 1.15;
    margin-bottom: 8px;
}
.cart-title-section p {
    color: var(--color-text-muted);
    font-size: 1rem;
}

.cart-layout-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 48px;
    align-items: start;
}

/* Cart Items Table Card */
.cart-items-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.items-table-header {
    padding: 18px 28px;
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 2.2fr 1fr 1.2fr 1fr 0.4fr;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.cart-item-row {
    padding: 24px 28px;
    border-bottom: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: 2.2fr 1fr 1.2fr 1fr 0.4fr;
    align-items: center;
    transition: var(--transition);
}
.cart-item-row:last-child {
    border-bottom: none;
}
.cart-item-row:hover {
    background: #FDFBF8;
}

.item-product-info {
    display: flex;
    align-items: center;
    gap: 16px;
}
.item-thumb {
    width: 64px;
    height: 82px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border: 1px solid var(--color-border);
}
.item-title-meta h4 {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--color-text-main);
    margin-bottom: 4px;
    line-height: 1.3;
}
.item-recipient-badge {
    font-size: 0.78rem;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-top: 4px;
}

.item-price {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.qty-control-box {
    display: inline-flex;
    align-items: center;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 4px 10px;
    gap: 10px;
}
.qty-btn {
    background: none;
    border: none;
    color: var(--color-text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transition: var(--transition);
}
.qty-btn:hover {
    background: var(--color-primary);
    color: white;
}
.qty-number {
    font-weight: 600;
    font-size: 0.92rem;
    min-width: 18px;
    text-align: center;
}

.item-subtotal {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.05rem;
}

.btn-remove-item {
    background: none;
    border: none;
    color: #B5ACA3;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.btn-remove-item:hover {
    color: #C0392B;
    background: #FDF2F2;
}

/* Order Summary Card */
.summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 110px;
}
.summary-card h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-text-main);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.shipping-bar-box {
    background: var(--color-primary-light);
    border: 1px solid #F3D3C9;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: 0.86rem;
}
.shipping-progress-track {
    height: 6px;
    background: #EED1C7;
    border-radius: var(--radius-full);
    margin-top: 8px;
    overflow: hidden;
}
.shipping-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}
.summary-line.total-line {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-main);
}
.summary-line.total-line .amount {
    color: var(--color-primary);
}

.promo-form {
    display: flex;
    gap: 8px;
    margin: 20px 0;
}
.promo-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.88rem;
    outline: none;
}
.promo-input:focus {
    border-color: var(--color-primary);
    background: white;
}
.btn-apply-promo {
    padding: 10px 18px;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.btn-apply-promo:hover {
    background: #25221F;
    color: white;
}

.btn-checkout-primary {
    width: 100%;
    padding: 18px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(184, 93, 67, 0.3);
    transition: var(--transition);
    margin-top: 16px;
}
.btn-checkout-primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}

.checkout-guarantee-badges {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.empty-cart-container {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 80px 24px;
    text-align: center;
    box-shadow: var(--shadow-card);
}
.empty-cart-container h3 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    margin: 16px 0 8px;
}

.checkout-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, 0.6);
    backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}
.checkout-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.checkout-modal {
    background: white;
    border-radius: var(--radius-lg);
    max-width: 580px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: clamp(24px, 4vw, 36px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    border: 1px solid var(--color-border);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.checkout-modal-overlay.active .checkout-modal {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   8. FOOTER, TOASTS & ALERTS
   -------------------------------------------------------------------------- */
.store-footer {
    background: #1F1B18;
    color: #E2D9D2;
    padding: 70px 24px 30px;
    margin-top: 100px;
    border-top: 1px solid #36302B;
}
.footer-container {
    max-width: 1760px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: clamp(24px, 3vw, 48px);
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand h2 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: #FFFFFF;
    margin-bottom: 12px;
}
.footer-brand p {
    color: #ADA49D;
    font-size: 0.92rem;
    max-width: 340px;
    line-height: 1.7;
}
.footer-col h4 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #FFFFFF;
    margin-bottom: 20px;
}
.footer-col ul {
    list-style: none;
}
.footer-col li {
    margin-bottom: 12px;
}
.footer-col a {
    color: #ADA49D;
    font-size: 0.92rem;
}
.footer-col a:hover {
    color: #E6C587;
}
.footer-newsletter p {
    color: #ADA49D;
    font-size: 0.92rem;
    margin-bottom: 16px;
}
.footer-newsletter-form {
    display: flex;
    gap: 8px;
}
.footer-newsletter-form input {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--radius-full);
    background: #2D2824;
    border: 1px solid #453E38;
    color: white;
    font-size: 0.9rem;
    outline: none;
}
.footer-newsletter-form input:focus {
    border-color: #E6C587;
}
.footer-newsletter-form button {
    padding: 12px 20px;
    background: #E6C587;
    color: #1F1B18;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition);
}
.footer-newsletter-form button:hover {
    background: #F3DCAC;
}
.footer-bottom {
    max-width: 1760px;
    width: 100%;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.84rem;
    color: #8C847E;
}

.toast-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #1C1917;
    color: #FFFFFF;
    padding: 14px 22px;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    transform: translateY(120%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 4px solid #E6C587;
}
.toast-notification.show {
    transform: translateY(0);
}

.alert-container {
    max-width: 1760px;
    width: 100%;
    margin: 16px auto 0;
    padding: 0 clamp(16px, 3vw, 48px);
}
.flash-alert {
    padding: 14px 20px;
    border-radius: var(--radius-md);
    background: var(--color-success-bg);
    border: 1px solid #B7DFCA;
    color: var(--color-success);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fadeIn 0.4s ease;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE MEDIA QUERIES
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .hero-section {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .hero-description {
        margin: 0 auto 30px;
    }
    .hero-actions {
        justify-content: center;
    }
    .personalization-card {
        grid-template-columns: 1fr;
        padding: 40px 30px;
    }
    .pillars-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .cart-layout-grid {
        grid-template-columns: 1fr;
    }
    .summary-card {
        position: static;
    }
    .items-table-header {
        display: none;
    }
    .cart-item-row {
        grid-template-columns: 1fr;
        gap: 16px;
        position: relative;
    }
    .btn-remove-item {
        position: absolute;
        top: 20px;
        right: 20px;
    }
}

@media (max-width: 1024px) {
    .product-main-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .card-display-column {
        position: static;
    }
    .gallery-zoom-viewport {
        height: clamp(380px, 55vw, 520px);
    }
    .hero-section {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

@media (max-width: 860px) {
    .product-gallery-wrapper {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .gallery-thumbnail-strip {
        flex-direction: row;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        gap: 10px;
        padding: 4px 2px 8px;
        -webkit-overflow-scrolling: touch;
    }
    .gallery-thumb-btn {
        width: 68px;
        height: 85px;
        flex-shrink: 0;
    }
    .gallery-zoom-viewport {
        height: clamp(320px, 68vw, 440px);
    }
    .nav-links {
        display: none;
    }
    .mobile-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-border);
        background: #FAF8F5;
        cursor: pointer;
    }
    .main-nav-menu.open {
        display: block !important;
        position: fixed;
        top: 68px;
        left: 0;
        width: 100%;
        background: #FAF8F5;
        border-bottom: 2px solid var(--color-border);
        padding: 20px 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 999;
    }
    .main-nav-menu.open .nav-links {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }
    .main-nav-menu.open .nav-links a {
        font-size: 1.05rem;
        padding: 8px 0;
        border-bottom: 1px solid var(--color-border-light);
        display: block;
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }
    .pillars-container {
        grid-template-columns: 1fr;
    }
    .floating-card-back {
        display: none;
    }
    .gallery-zoom-viewport {
        height: 330px;
    }
    .gallery-nav-btn {
        width: 36px;
        height: 36px;
    }
    .gallery-counter-bar {
        padding: 10px 14px;
        font-size: 0.76rem;
    }
    .product-price-large {
        font-size: 1.8rem;
    }
    .specs-box {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
    }
    .personalization-box {
        padding: 16px 14px;
    }
    .btn-add-bag-main {
        font-size: 0.92rem;
        padding: 14px 18px;
    }
    .header-actions .search-pill-btn input {
        width: 75px;
    }
    .header-actions .btn-dashboard-badge span {
        display: none;
    }
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .navbar-container {
        padding: 12px 16px;
    }
}


/* --------------------------------------------------------------------------
   11. ADMIN STUDIO DASHBOARD & SIDEBAR LAYOUT
   -------------------------------------------------------------------------- */
:root {
    --sidebar-bg: #1A1715;
    --sidebar-border: #2D2824;
    --sidebar-text: #ABA198;
    --sidebar-active: #E6C587;
    
    --admin-bg: #F8F6F2;
    --admin-surface: #FFFFFF;
    --admin-border: #E8E0D7;
    
    --color-danger: #B33A3A;
    --color-danger-bg: #FCEBEB;
    --shadow: 0 4px 20px rgba(45, 30, 20, 0.05);
}

body.admin-body-layout {
    font-family: var(--font-sans);
    background: var(--admin-bg);
    color: var(--color-text-main);
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.admin-sidebar {
    width: 280px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    color: #FFFFFF;
}

.sidebar-brand {
    padding: 24px;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-primary) 0%, #E6C587 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}
.brand-title h2 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: #FFFFFF;
    line-height: 1.1;
}
.brand-title span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #E6C587;
}

.sidebar-nav {
    padding: 24px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nav-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #7A7066;
    margin: 16px 12px 6px;
    font-weight: 600;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: 0.94rem;
    font-weight: 500;
    transition: var(--transition);
}
.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}
.sidebar-link.active {
    background: rgba(230, 197, 135, 0.14);
    color: #E6C587;
    font-weight: 600;
    border-left: 3px solid #E6C587;
}

/* Highlighted Product Adding Section link */
.sidebar-link.add-card-cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, #D48166 100%);
    color: #FFFFFF;
    margin-top: 10px;
    box-shadow: 0 4px 14px rgba(184, 93, 67, 0.35);
}
.sidebar-link.add-card-cta:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--sidebar-border);
    font-size: 0.82rem;
    color: #7A7066;
}

/* Main Content Layout */
.admin-main {
    margin-left: 280px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.admin-topbar {
    height: 72px;
    background: var(--admin-surface);
    border-bottom: 1px solid var(--admin-border);
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar-title h1 {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    color: var(--color-text-main);
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.btn-view-store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--admin-bg);
    border: 1px solid var(--admin-border);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-main);
    transition: var(--transition);
}
.btn-view-store:hover {
    background: #FFFFFF;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admin-body {
    padding: clamp(20px, 3vw, 40px);
    flex: 1;
    max-width: 1760px;
    width: 100%;
    margin: 0 auto;
}

/* Flash notifications */
.admin-alert {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fadeIn 0.3s ease;
}
.admin-alert.success {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid #B8E4CF;
}
.admin-alert.danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid #F5C6C6;
}

/* --------------------------------------------------------------------------
   12. ADMIN KPI STATS & INVENTORY DATA TABLE
   -------------------------------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}
.stat-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-primary);
}
.stat-card.gold::before { background: var(--color-gold); }
.stat-card.green::before { background: var(--color-success); }
.stat-card.amber::before { background: #E67E22; }

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.stat-title {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    font-weight: 600;
}
.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.1;
}
.stat-footer {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--color-text-light);
}

.action-callout {
    background: linear-gradient(135deg, #2A2420 0%, #3B322B 100%);
    color: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 28px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    border: 1px solid rgba(230, 197, 135, 0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.action-callout h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-bottom: 6px;
    color: #FFFFFF;
}
.action-callout p {
    color: #CFC5BD;
    font-size: 0.94rem;
}
.btn-callout-add {
    padding: 14px 26px;
    background: #E6C587;
    color: #1F1B18;
    font-weight: 600;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(230, 197, 135, 0.3);
    transition: var(--transition);
    white-space: nowrap;
}
.btn-callout-add:hover {
    background: #F3DCAC;
    transform: translateY(-2px);
}

.inventory-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.inventory-header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.inventory-header h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--color-text-main);
}

.table-responsive {
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.admin-table th {
    padding: 14px 24px;
    background: #FAF8F5;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--admin-border);
}
.admin-table td {
    padding: 18px 24px;
    border-bottom: 1px solid var(--admin-border);
    font-size: 0.92rem;
    vertical-align: middle;
}
.admin-table tr:hover td {
    background: #FCFAF7;
}

.card-thumb-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}
.card-thumb {
    width: 52px;
    height: 68px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border: 1px solid #E8E0D7;
}
.card-title-text {
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 3px;
}
.card-subtitle-spec {
    font-size: 0.78rem;
    color: var(--color-text-light);
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
}
.stock-badge.high {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.stock-badge.low {
    background: #FFF3CD;
    color: #856404;
}

.action-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-action-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: #F4EFEA;
    border: 1px solid var(--admin-border);
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
}
.btn-action-icon:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.btn-action-icon.view:hover {
    background: #2471A3;
    border-color: #2471A3;
}
.btn-action-icon.delete:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

/* Dashboard Tab Controls */
.dashboard-tab-pill {
    padding: 10px 20px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: white;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
}
.dashboard-tab-pill:hover {
    background: #FAF7F2;
    border-color: var(--color-gold);
}
.dashboard-tab-pill.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(184, 93, 67, 0.25);
}
.dashboard-tab-pill .tab-badge {
    font-size: 0.74rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: #F0EAE1;
    color: var(--color-text-main);
    font-weight: 700;
}
.dashboard-tab-pill.active .tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}
.dashboard-tab-pill .tab-badge.warning {
    background: #FEF9E7;
    color: #B7950B;
}
.dashboard-tab-pill.active .tab-badge.warning {
    background: white;
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   13. ADMIN PRODUCT ADDING SECTION (CREATE / EDIT LIVE STUDIO)
   -------------------------------------------------------------------------- */
.create-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: start;
}

.form-card-container {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow);
}

.form-section-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--color-text-main);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group {
    margin-bottom: 22px;
}
.form-group label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 8px;
}
.form-group label span.req {
    color: var(--color-danger);
}
.form-group .hint {
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-top: 5px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--admin-border);
    background: #FAF8F5;
    font-size: 0.94rem;
    color: var(--color-text-main);
    outline: none;
    transition: var(--transition);
}
.form-control:focus {
    border-color: var(--color-primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(184, 93, 67, 0.12);
}

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

/* Live Preview Sticky Column */
.preview-sticky-col {
    position: sticky;
    top: 100px;
}
.preview-card-wrapper {
    background: #F4EFEA;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow);
}
.preview-header-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-gold);
}

/* Card Preview Mockup */
.mockup-card {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 16px 35px rgba(50, 30, 20, 0.12);
    border: 1px solid #EADBCE;
    transition: var(--transition);
}
.mockup-image-box {
    position: relative;
    width: 100%;
    padding-top: 125%;
    background: #EFE8DF;
    overflow: hidden;
}
.mockup-image-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mockup-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.mockup-category {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(28, 25, 23, 0.8);
    color: #FFFFFF;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: var(--radius-full);
}
.mockup-body {
    padding: 20px;
}
.mockup-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 6px;
    line-height: 1.3;
}
.mockup-paper {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}
.mockup-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Inside Sentiment Accordion in Preview */
.mockup-inside-preview {
    background: #FCFAF7;
    border-top: 1px dashed #E2D5C8;
    padding: 14px 20px;
    font-size: 0.85rem;
    color: #595048;
    font-style: italic;
}

.btn-submit-card {
    padding: 16px 32px;
    background: var(--color-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(184, 93, 67, 0.3);
    transition: var(--transition);
}
.btn-submit-card:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}
.btn-cancel {
    padding: 16px 24px;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}
.btn-cancel:hover {
    background: #EDE7DF;
    color: var(--color-text-main);
}

.error-text {
    color: var(--color-danger);
    font-size: 0.8rem;
    margin-top: 4px;
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .action-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .create-grid {
        grid-template-columns: 1fr;
    }
    .preview-sticky-col {
        position: static;
    }
}

@media (max-width: 900px) {
    .admin-sidebar {
        width: 70px;
    }
    .sidebar-brand span, .brand-title, .nav-label, .sidebar-link span, .sidebar-footer {
        display: none;
    }
    .admin-main {
        margin-left: 70px;
    }
}

/* ==========================================================================
   14. PRODUCT ID BADGES, INVENTORY / ORDERS / QUERIES TOOLBAR & TABLES
   ========================================================================== */

.badge-product-id {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #8A5A36;
    background: #FAF3EC;
    border: 1px solid #EADBCE;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    transition: var(--transition);
}
.badge-product-id:hover {
    background: #F4E8DC;
    border-color: #DEC8B5;
    color: var(--color-primary);
}

.assigned-id-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: linear-gradient(135deg, #FDF9F5 0%, #F7EFE7 100%);
    border: 1px solid #EADBCE;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(184, 93, 67, 0.06);
}
.assigned-id-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-main);
}
.assigned-id-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(184, 93, 67, 0.3);
}
.assigned-id-note {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.preview-product-id {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(30, 26, 23, 0.82);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 3;
    border: 1px solid rgba(255,255,255,0.15);
}

/* Toolbar & Filter Styling */
.inventory-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 28px;
    background: #FCFAF7;
    border-bottom: 1px solid var(--admin-border);
}
.inventory-search-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
}
.inventory-search-wrap i,
.inventory-search-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8C827A;
    pointer-events: none;
    width: 16px !important;
    height: 16px !important;
    z-index: 2;
}
.inventory-search-input {
    width: 100%;
    padding: 10px 14px 10px 42px;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--color-text-main);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: var(--transition);
    outline: none;
}
.inventory-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(184, 93, 67, 0.12);
}
.inventory-filter-select {
    padding: 10px 16px;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    font-size: 0.88rem;
    color: var(--color-text-main);
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: var(--transition);
    outline: none;
}
.inventory-filter-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(184, 93, 67, 0.12);
}
.inventory-count-badge {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: #FAF5F0;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    border: 1px solid #EADBCE;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-clear-filter {
    padding: 9px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--admin-border);
    background: #FFFFFF;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}
.btn-clear-filter:hover {
    background: #F4EFEA;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Tables Styling */
.inventory-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.inventory-table th {
    padding: 14px 24px;
    background: #FAF8F5;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}
.inventory-table td {
    padding: 16px 24px;
    border-bottom: 1px solid var(--admin-border);
    font-size: 0.92rem;
    vertical-align: middle;
}
.inventory-table tr:hover td {
    background: #FCFAF7;
}

.thumb-box {
    width: 52px;
    height: 68px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid #E8E0D7;
    background: #FAF7F2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-cell-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-cell-title {
    font-weight: 600;
    color: var(--color-text-main);
    text-decoration: none;
    font-size: 0.94rem;
    transition: var(--transition);
}
.card-cell-title:hover {
    color: var(--color-primary);
}
.card-cell-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tag-category {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: #F0EAE1;
    color: var(--color-text-main);
    font-weight: 600;
}
.tag-paper {
    font-size: 0.72rem;
    color: var(--color-text-light);
}

/* Module Quick Navigation Cards on Dashboard */
.nav-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.nav-module-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.nav-module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primary);
    opacity: 0;
    transition: var(--transition);
}
.nav-module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: var(--color-gold);
}
.nav-module-card:hover::before {
    opacity: 1;
}
.nav-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.nav-module-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0;
}
.nav-module-desc {
    font-size: 0.86rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}
.nav-module-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-primary);
    border-top: 1px dashed var(--admin-border);
    padding-top: 12px;
}

/* ==========================================================================
   CUSTOMER AUTHENTICATION, OTP VERIFICATION & ACCOUNT PORTAL
   ========================================================================== */

/* Header Authentication & User Dropdown */
.btn-user-auth {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.btn-user-auth:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.user-menu-dropdown {
    position: relative;
    display: inline-block;
}
.btn-user-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.btn-user-profile:hover {
    border-color: var(--color-gold);
    box-shadow: 0 2px 8px rgba(184, 93, 67, 0.08);
}
.user-avatar-mini {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold), var(--color-primary));
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(31, 29, 26, 0.12);
    padding: 8px 0;
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.user-dropdown-panel.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.user-dropdown-header {
    padding: 10px 16px 8px 16px;
}
.user-dropdown-divider {
    height: 1px;
    background: var(--color-border-light);
    margin: 6px 0;
}
.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 0.85rem;
    color: var(--color-text-main);
    text-decoration: none;
    transition: background 0.15s ease;
}
.user-dropdown-item:hover {
    background: var(--color-surface-subtle);
    color: var(--color-primary);
}
.user-dropdown-item.admin-item:hover {
    color: var(--color-gold);
}
.mobile-only-nav {
    display: none;
}
@media (max-width: 768px) {
    .mobile-only-nav {
        display: block;
    }
}

/* Auth Pages (Login, Register, OTP Challenges) */
.auth-page-wrapper {
    min-height: calc(100vh - 250px);
    padding: 60px 20px 80px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 20%, rgba(245, 235, 224, 0.6) 0%, var(--color-bg) 70%);
}
.auth-card-container {
    width: 100%;
    max-width: 520px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(74, 43, 33, 0.08);
    padding: 40px 36px;
    position: relative;
}
.auth-header {
    text-align: center;
    margin-bottom: 28px;
}
.auth-logo-badge {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px auto;
}
.auth-header h2 {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    color: var(--color-text-main);
    margin-bottom: 8px;
    font-weight: 700;
}
.auth-header p {
    font-size: 0.90rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    line-height: 1.5;
    margin-bottom: 20px;
}
.auth-alert.success {
    background: #EAF5EE;
    color: #1E4633;
    border: 1px solid #C4E1D1;
}
.auth-alert.error {
    background: #FDF2F2;
    color: #922B21;
    border: 1px solid #FADBD8;
}

.auth-security-pill {
    background: #FAF6F0;
    border: 1px solid #EADBCE;
    border-left: 3px solid var(--color-gold);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    color: #5D534A;
    line-height: 1.45;
    margin-bottom: 22px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-group-custom label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 6px;
}
.form-group-custom label .req {
    color: var(--color-primary);
}
.form-group-custom .field-hint {
    display: block;
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin-top: 5px;
}

.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-icon-wrapper .field-icon {
    position: absolute;
    left: 14px;
    width: 17px;
    height: 17px;
    color: #9C9389;
    pointer-events: none;
}
.input-icon-wrapper input {
    width: 100%;
    padding: 12px 42px 12px 42px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    color: var(--color-text-main);
    background: #FFFFFF;
    transition: var(--transition);
    outline: none;
}
.input-icon-wrapper input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(184, 93, 67, 0.12);
}
.toggle-password-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #9C9389;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toggle-password-btn:hover {
    color: var(--color-primary);
}

.otp-channel-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.channel-radio-card {
    display: block;
    cursor: pointer;
    position: relative;
}
.channel-radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.channel-card-content {
    border: 1.5px solid var(--color-border);
    background: #FAF8F5;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: var(--transition);
    height: 100%;
}
.channel-card-content strong {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-main);
}
.channel-card-content span {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
.channel-radio-card:has(input:checked) .channel-card-content {
    border-color: var(--color-primary);
    background: #FFFDFB;
    box-shadow: 0 2px 8px rgba(184, 93, 67, 0.12);
}

/* 6-Digit OTP Challenge Inputs */
.otp-digits-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 16px 0;
}
.otp-digit-input {
    width: 48px;
    height: 56px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center;
    font-family: monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-main);
    background: #FFFFFF;
    outline: none;
    transition: var(--transition);
}
.otp-digit-input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(197, 155, 39, 0.18);
    transform: scale(1.04);
}
.dev-otp-indicator {
    background: #FAF3E0;
    border: 1px dashed var(--color-gold);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.btn-copy-dev-otp {
    background: var(--color-gold);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.btn-copy-dev-otp:hover {
    background: #9E7A1C;
}

.btn-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), #A04A32);
    border: none;
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 14px rgba(184, 93, 67, 0.25);
}
.btn-auth-submit:hover {
    background: linear-gradient(135deg, #A04A32, #853722);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(184, 93, 67, 0.32);
}

.otp-resend-row {
    margin-top: 18px;
    text-align: center;
}
.btn-link-resend {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-link-resend:hover {
    text-decoration: underline;
}
.auth-footer-links {
    margin-top: 28px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}
.auth-footer-links a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Customer Account Portal & Order History */
.account-page-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding: 30px 20px 80px 20px;
}
.account-hero-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 32px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 28px;
}
.account-hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
}
.account-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold), var(--color-primary));
    color: #FFFFFF;
    font-size: 1.7rem;
    font-weight: 700;
    font-family: var(--font-serif);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(184, 93, 67, 0.22);
}
.role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.role-badge.customer {
    background: #EAF5EE;
    color: #2D6A4F;
    border: 1px solid #C4E1D1;
}
.role-badge.admin {
    background: #FAF3E0;
    color: #8A6D1C;
    border: 1px solid #E8D39E;
}
.account-meta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: var(--color-text-muted);
    margin-top: 8px;
}
.account-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.account-stats-row {
    display: flex;
    gap: 16px;
}
.account-stat-pill {
    background: #FAF8F5;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 20px;
    text-align: center;
}
.account-stat-pill .stat-number {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-primary);
}
.account-stat-pill .stat-label {
    display: block;
    font-size: 0.76rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.account-tabs-nav {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 32px;
    overflow-x: auto;
}
.account-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}
.account-tab-link:hover {
    color: var(--color-primary);
}
.account-tab-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.account-tab-link.admin-link {
    color: var(--color-gold);
    margin-left: auto;
}

.account-tab-content {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    box-shadow: var(--shadow-card);
}

.btn-new-order {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.btn-new-order:hover {
    background: var(--color-primary-hover);
}

.empty-orders-box {
    text-align: center;
    padding: 60px 20px;
}
.empty-orders-box h4 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--color-text-main);
    margin-bottom: 8px;
}
.empty-orders-box p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    max-width: 440px;
    margin: 0 auto;
}

.orders-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.order-history-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    overflow: hidden;
    transition: var(--transition);
}
.order-history-card:hover {
    box-shadow: 0 6px 20px rgba(74, 43, 33, 0.08);
}
.order-history-header {
    background: #FAF8F5;
    border-bottom: 1px solid var(--color-border);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.status-pill, .payment-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
}
.payment-pill.paid {
    background: #EAF5EE;
    color: #2D6A4F;
    border: 1px solid #C4E1D1;
}

.order-history-items {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.order-item-mini-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-border-light);
}
.order-item-mini-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.order-item-mini-thumb {
    width: 54px;
    height: 68px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.custom-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
}
.custom-tag.recipient {
    background: #FAF5F0;
    color: var(--color-primary);
    border: 1px solid #EADBCE;
}
.custom-tag.liner {
    background: #F8F5F0;
    color: #5D534A;
    border: 1px solid #E5DFD5;
}
.order-item-sentiment-box {
    background: #FFFDF9;
    border-left: 2.5px solid var(--color-gold);
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 6px;
}

.order-history-footer {
    background: #FAF8F5;
    border-top: 1px solid var(--color-border);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.btn-order-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.80rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.btn-order-action.invoice {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
}
.btn-order-action.invoice:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-order-action.track {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    color: #2D6A4F;
}
.btn-order-action.track:hover {
    background: #EAF5EE;
    border-color: #2D6A4F;
}