/* ========================================================================== */
/* Google Fonts loaded asynchronously via HTML preconnect + link in pwa-assets.php to prevent CSS render-blocking */

/* JRG Electronics & Accessories - Premium E-Commerce Mockup Styling */

/* ==========================================================================
   1. Design System & Dual-Theme Variables (WCAG 2.1 AA Compliant)
   ========================================================================== */

/* Dark Mode (Luxury Obsidian Gold) - Default fallback */
:root,
[data-theme="dark"] {
    --bg-primary: #0b0f19;
    --bg-secondary: #121826;
    --bg-card: rgba(22, 30, 49, 0.75);
    --bg-card-hover: rgba(30, 41, 67, 0.9);
    --bg-card-subtle: rgba(255, 255, 255, 0.03);
    --bg-pane: rgba(255, 255, 255, 0.02);
    --bg-input: rgba(255, 255, 255, 0.05);
    --border-color: rgba(236, 204, 147, 0.16);
    --border-hover: rgba(236, 204, 147, 0.45);
    --border-card: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-pane: rgba(255, 255, 255, 0.06);
    --color-accent: #eccc93;          /* Bright Champagne Gold */
    --color-accent-rgb: 236, 204, 147;
    --color-accent-hover: #dfba7c;
    --color-text-main: #f3f4f6;       /* Clean Off-White */
    --color-text-muted: #9ca3af;      /* Slate Muted */
    --color-text-heading: #ffffff;    /* Pure White Headings */
    --color-text-inverse: #0b0f19;    /* Dark text on gold */
    --color-pane-header: #cbd5e1;
    --color-success: #10b981;         /* Active Green */
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-glow: 0 0 20px rgba(236, 204, 147, 0.1);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(236, 204, 147, 0.18);
    --header-bg: rgba(13, 18, 30, 0.96);
    --header-bg-scrolled: rgba(8, 11, 18, 0.98);
    --shadow-header: 0 4px 25px rgba(0, 0, 0, 0.45);
    --shadow-header-scrolled: 0 6px 30px rgba(0, 0, 0, 0.6);
    --cart-bg: #080c18;
    --cart-header-bg: #0b1120;
    --bg-dropdown: #0f172a;
    --bg-image-thumb: rgba(0, 0, 0, 0.3);
    --bg-comp-box: rgba(0, 0, 0, 0.2);
}

/* Light Mode (Clean Luxury Porcelain & Burnished Gold) */
[data-theme="light"] {
    --bg-primary: #f8fafc;            /* Ultra-clean porcelain slate */
    --bg-secondary: #ffffff;          /* Pure White */
    --bg-card: #ffffff;               /* Pure luxury pearl card */
    --bg-card-hover: #ffffff;
    --bg-card-subtle: #f1f5f9;        /* Soft Slate */
    --bg-pane: #ffffff;
    --bg-input: #ffffff;
    --border-color: rgba(180, 123, 43, 0.22);
    --border-hover: rgba(180, 123, 43, 0.6);
    --border-card: #e2e8f0;           /* Crisp clean border */
    --border-subtle: #e2e8f0;
    --border-pane: #e2e8f0;
    --color-accent: #b47b2b;          /* Burnished Luxury Amber Gold (WCAG AA 4.56:1 contrast) */
    --color-accent-rgb: 180, 123, 43;
    --color-accent-hover: #996515;
    --color-text-main: #0f172a;       /* Rich Obsidian Slate (15.8:1 AAA contrast on #ffffff) */
    --color-text-muted: #475569;      /* Crisp Slate Subtext (4.6:1 AA contrast on #ffffff) */
    --color-text-heading: #0f172a;    /* Deep Obsidian Slate Headings */
    --color-text-inverse: #ffffff;    /* White text on gold */
    --color-pane-header: #1e293b;
    --color-success: #059669;
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-glow: 0 4px 20px rgba(180, 123, 43, 0.12);
    --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-card-hover: 0 12px 32px rgba(15, 23, 42, 0.12), 0 0 20px rgba(180, 123, 43, 0.15);
    --header-bg: rgba(255, 255, 255, 0.95);
    --header-bg-scrolled: rgba(248, 250, 252, 0.98);
    --shadow-header: 0 2px 15px rgba(0, 0, 0, 0.05);
    --shadow-header-scrolled: 0 4px 20px rgba(0, 0, 0, 0.08);
    --cart-bg: #f8fafc;
    --cart-header-bg: #ffffff;
    --bg-dropdown: #ffffff;
    --bg-image-thumb: #f1f5f9;
    --bg-comp-box: #f1f5f9;
}

/* ==========================================================================
   Light Mode Structural & High-Contrast Visual Overrides
   ========================================================================== */

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .entry-title,
[data-theme="light"] .product-title,
[data-theme="light"] .product-title-link,
[data-theme="light"] .price-tag,
[data-theme="light"] .cart-item-title,
[data-theme="light"] .feature-title,
[data-theme="light"] .sourcing-title,
[data-theme="light"] .footer-col h4,
[data-theme="light"] .accordion-header h3,
[data-theme="light"] .search-results-heading,
[data-theme="light"] .review-author,
[data-theme="light"] .tab-item {
    color: var(--color-text-heading) !important;
}

[data-theme="light"] .product-card:not(.jrg-daily-sale-card):not(.jrg-weekly-deal-card):not(.jrg-flash-sale-card):not(.jrg-on-sale-card):not(.jrg-special-deal-card):not([data-sale="true"]) {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .product-card:not(.jrg-daily-sale-card):not(.jrg-weekly-deal-card):not(.jrg-flash-sale-card):not(.jrg-on-sale-card):not(.jrg-special-deal-card):not([data-sale="true"]):hover {
    border-color: rgba(180, 123, 43, 0.5) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 0 20px rgba(180, 123, 43, 0.15) !important;
}

[data-theme="light"] .main-cat-btn {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .main-cat-btn:hover {
    border-color: rgba(180, 123, 43, 0.4) !important;
    color: #0f172a !important;
}

[data-theme="light"] .main-cat-btn.active {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #ffffff !important;
}

[data-theme="light"] .sub-categories {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .sub-categories .filter-chip {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

[data-theme="light"] .sub-categories .filter-chip.active {
    background: var(--color-accent) !important;
    color: #ffffff !important;
    border-color: var(--color-accent) !important;
}

[data-theme="light"] .compatibility-box {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cart-drawer {
    background: #f8fafc !important;
    color: #0f172a !important;
}

[data-theme="light"] .cart-drawer-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cart-header-inner h3 {
    color: #0f172a !important;
}

[data-theme="light"] .cart-drawer-pane {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .cart-pane-section-header {
    color: #1e293b !important;
}

[data-theme="light"] .cart-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cart-item-image {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .quantity-controls {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .cart-select-input,
[data-theme="light"] .cart-text-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .cart-select-input:focus,
[data-theme="light"] .cart-text-input:focus {
    border-color: var(--color-accent) !important;
}

[data-theme="light"] .cart-breakdown-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cart-pudo-box {
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

[data-theme="light"] .cart-pudo-suggestions,
[data-theme="light"] #jrgPudoLockerSuggestions,
[data-theme="light"] #jrgCartPudoLockerSuggestions {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .cart-pudo-suggestions div,
[data-theme="light"] #jrgPudoLockerSuggestions div,
[data-theme="light"] #jrgCartPudoLockerSuggestions div {
    color: #0f172a !important;
}

[data-theme="light"] .cart-pudo-suggestions div:hover,
[data-theme="light"] #jrgPudoLockerSuggestions div:hover,
[data-theme="light"] #jrgCartPudoLockerSuggestions div:hover {
    background: #f1f5f9 !important;
}

[data-theme="light"] .payment-accordion-header {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .payment-accordion-body {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .payment-accordion-item {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

[data-theme="light"] .payment-accordion-item.active {
    border-color: var(--color-accent) !important;
    background: rgba(180, 123, 43, 0.04) !important;
}

[data-theme="light"] .main-header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .main-header.scrolled {
    background: rgba(248, 250, 252, 0.98) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .logo-white {
    color: #0f172a !important;
}

[data-theme="light"] .cart-toggle-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .main-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .footer-bottom {
    border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .social-link {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .social-link:hover {
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}

[data-theme="light"] .feature-card,
[data-theme="light"] .sourcing-section,
[data-theme="light"] .trust-banner,
[data-theme="light"] .review-card,
[data-theme="light"] .faq-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .header-search-wrap input#headerWatchSearch {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   Light Mode High-Specificity Anti-Regression Overrides
   ========================================================================== */

html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html[data-theme="light"] body #page,
html[data-theme="light"] body .site-content,
html[data-theme="light"] body #content,
html[data-theme="light"] body #primary,
html[data-theme="light"] body .entry-content,
html[data-theme="light"] body .ast-container,
html[data-theme="light"] body .elementor-section-wrap,
html[data-theme="light"] body .elementor-container,
html[data-theme="light"] body .elementor-shortcode,
html[data-theme="light"] body .elementor-element,
html[data-theme="light"] body .elementor-widget-wrap,
html[data-theme="light"] body .elementor-widget-container,
html[data-theme="light"] .elementor-14,
html[data-theme="light"] .jrg-storefront-wrap {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html[data-theme="light"] .jrg-storefront-wrap h1,
html[data-theme="light"] .jrg-storefront-wrap h2,
html[data-theme="light"] .jrg-storefront-wrap h3,
html[data-theme="light"] .jrg-storefront-wrap h4,
html[data-theme="light"] .jrg-storefront-wrap h5,
html[data-theme="light"] .jrg-storefront-wrap h6,
html[data-theme="light"] .jrg-storefront-wrap .section-title,
html[data-theme="light"] .jrg-storefront-wrap .hero-title,
html[data-theme="light"] .jrg-storefront-wrap .feature-card h3,
html[data-theme="light"] .jrg-storefront-wrap .footer-col h3,
html[data-theme="light"] .jrg-storefront-wrap .footer-col h4,
html[data-theme="light"] .jrg-storefront-wrap .cart-header-inner h3,
html[data-theme="light"] .jrg-storefront-wrap .cart-item-title,
html[data-theme="light"] .jrg-storefront-wrap .product-title,
html[data-theme="light"] .jrg-storefront-wrap .price-tag,
html[data-theme="light"] .jrg-storefront-wrap .sourcing-info h2,
html[data-theme="light"] .jrg-storefront-wrap .glass-form h3,
html[data-theme="light"] .jrg-storefront-wrap .jrg-faq-trigger {
    color: #0f172a !important;
}

html[data-theme="light"] .jrg-storefront-wrap a,
html[data-theme="light"] .jrg-storefront-wrap .nav-links a,
html[data-theme="light"] .jrg-storefront-wrap .nav-link,
html[data-theme="light"] .jrg-storefront-wrap .product-title-link {
    color: #475569 !important;
    text-decoration: none !important;
}

html[data-theme="light"] .jrg-storefront-wrap a:hover,
html[data-theme="light"] .jrg-storefront-wrap .nav-links a:hover,
html[data-theme="light"] .jrg-storefront-wrap .nav-links a.active,
html[data-theme="light"] .jrg-storefront-wrap .nav-link:hover,
html[data-theme="light"] .jrg-storefront-wrap .nav-link.active,
html[data-theme="light"] .jrg-storefront-wrap .product-title-link:hover {
    color: var(--color-accent, #b47b2b) !important;
}

html[data-theme="light"] .jrg-storefront-wrap p,
html[data-theme="light"] .jrg-storefront-wrap label {
    color: #475569 !important;
}

/* Light Theme Cart Breakdown & Accordion Overrides */
html[data-theme="light"] .cart-drawer,
html[data-theme="light"] .cart-drawer strong,
html[data-theme="light"] .cart-summary-row,
html[data-theme="light"] .cart-summary-row strong,
html[data-theme="light"] .cart-summary-row span,
html[data-theme="light"] .cart-summary-row.total-row span,
html[data-theme="light"] .cart-pane-section-header,
html[data-theme="light"] .cart-header-title {
    color: #0f172a !important;
}

html[data-theme="light"] .cart-summary-row strong#cartSubtotalPrice,
html[data-theme="light"] .cart-summary-row strong#cartShippingPrice,
html[data-theme="light"] .cart-summary-row.total-row span {
    color: #0f172a !important;
}

html[data-theme="light"] .cart-summary-row.total-row strong,
html[data-theme="light"] .cart-total-price,
html[data-theme="light"] #cartEscrowPrice,
html[data-theme="light"] #cartFeeDrawerLabel {
    color: var(--color-accent, #b47b2b) !important;
}

html[data-theme="light"] .cart-payment-accordion {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #cartPaymentOzowPanel {
    background: rgba(180, 123, 43, 0.08) !important;
    border: 1px solid rgba(180, 123, 43, 0.25) !important;
    color: #475569 !important;
}

html[data-theme="light"] #cartPaymentEftPanel,
html[data-theme="light"] #cartPaymentCashPanel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] #cartPaymentEftPanel span,
html[data-theme="light"] #cartPaymentEftPanel strong,
html[data-theme="light"] #cartPaymentCashPanel span,
html[data-theme="light"] #cartPaymentCashPanel strong {
    color: #0f172a !important;
}

/* Light Theme Sourcing Forms & Inputs */
html[data-theme="light"] .sourcing-section {
    background: #f8fafc !important;
}

html[data-theme="light"] .whatsapp-sourcing-promo {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .sourcing-promo-grid input,
html[data-theme="light"] #whatsappSourcingMsg,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .sourcing-promo-grid input::placeholder,
html[data-theme="light"] #whatsappSourcingMsg::placeholder,
html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder {
    color: #94a3b8 !important;
}


/* ==========================================================================
   2. Reset & Global Styles

   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

/* Astra, Elementor & WordPress Viewport Reset */
body #page,
body .site-content,
body #content,
body #primary,
body .entry-content,
body .ast-container,
body article.ast-article-single,
body main.site-main,
.wp-site-blocks,
.wp-block-group,
.wp-block-post-content,
.elementor-14,
.elementor-shortcode,
.elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* Storefront Full Width & Edge-to-Edge Background Layout */
.jrg-storefront-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Full-bleed views and section containers extending edge-to-edge */
#catalogView,
#productView,
.jrg-storefront-wrap > div:not(.floating-whatsapp-widget):not(#jrgLiveVisitorBadge):not(#jrgCheckoutModal):not(#pudoLockerModal):not(#jrgCartDrawer) {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}

section,
footer,
.main-footer,
.site-footer,
.shop-section,
.features-section,
.sourcing-section,
.fb-reviews-section,
.recently-sold-section,
.policies-section,
.main-header,
.trust-header-banner,
.hero-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.container,
.jrg-storefront-wrap .container {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 clamp(16px, 3.5vw, 56px) !important;
    box-sizing: border-box !important;
}

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

button, input, textarea {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

/* Scrollbar Styling */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 4px;
    border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: #f1ddbc; /* Slightly brighter gold on hover */
}

/* ==========================================================================
   3. Header Navigation

   ========================================================================== */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: var(--header-bg, rgba(13, 18, 30, 0.96)) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle, rgba(236, 204, 147, 0.16)) !important;
    box-shadow: var(--shadow-header, 0 4px 25px rgba(0, 0, 0, 0.45)) !important;
    padding: 0 16px !important;
    height: 74px !important;
    display: flex !important;
    align-items: center !important;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease !important;
}

.main-header.scrolled {
    height: 64px !important;
    background: var(--header-bg-scrolled, rgba(8, 11, 18, 0.98)) !important;
    box-shadow: var(--shadow-header-scrolled, 0 6px 30px rgba(0, 0, 0, 0.6)) !important;
}

@media screen and (max-width: 768px) {
    .main-header {
        height: 56px !important;
        padding: 0 8px !important;
    }
    .main-header.scrolled {
        height: 52px !important;
    }
    .main-header .logo-icon { height: 32px !important; width: auto !important; max-height: 32px !important; }
    .main-header.scrolled .logo-icon { height: 28px !important; width: auto !important; max-height: 28px !important; }
    .nav-container {
        padding: 0 4px !important;
    }
    .nav-actions {
        gap: 4px !important;
    }
    .header-search-wrap {
        margin-right: 0 !important;
    }
    .header-search-wrap input#headerWatchSearch {
        width: 85px !important;
        padding-left: 24px !important;
        padding-right: 6px !important;
        font-size: 12px !important;
    }
    .header-search-wrap input#headerWatchSearch:focus {
        width: 110px !important;
    }
    .jrg-header-admin-pill {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 3px 6px !important;
        height: 32px !important;
        border-radius: 12px !important;
        background: rgba(236, 196, 147, 0.15) !important;
        border: 1px solid var(--color-accent) !important;
        color: var(--color-accent) !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    .jrg-header-admin-pill .header-pill-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        font-size: 13px !important;
        line-height: 1 !important;
        width: 15px !important;
        height: 15px !important;
        flex-shrink: 0 !important;
    }
    .jrg-header-admin-pill .header-pill-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        text-align: center !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        gap: 0 !important;
    }
    .jrg-header-admin-pill .pill-text-line {
        display: block !important;
        line-height: 1.1 !important;
    }
    .whatsapp-header-btn { width: 36px !important; height: 36px !important; padding: 0 !important; margin-right: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; }
    .whatsapp-header-btn .header-pill-icon, .whatsapp-header-btn svg { margin: 0 !important; width: 18px !important; height: 18px !important; }
    .whatsapp-header-btn .header-pill-text { display: none !important; }
    .cart-toggle-btn { width: 36px !important; height: 36px !important; margin-right: 0 !important; }
    .cart-toggle-btn svg { width: 20px !important; height: 20px !important; }
    .jrg-mobile-nav-toggle { width: 36px !important; height: 36px !important; margin-left: 0 !important; }
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.logo-icon {
    height: 30px !important;
    width: 30px !important;
    max-height: 30px !important;
    max-width: 30px !important;
    border-radius: 50%;
    object-fit: contain;
    display: block;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
    filter: drop-shadow(0 0 4px rgba(var(--color-accent-rgb), 0.15));
}

.main-header .logo-icon { height: 50px !important; width: 50px !important; max-height: 50px !important; max-width: 50px !important; }
.main-header.scrolled .logo-icon { height: 42px !important; width: 42px !important; max-height: 42px !important; max-width: 42px !important; }
.main-footer .logo-icon { height: 36px !important; width: 36px !important; max-height: 36px !important; max-width: 36px !important; }
.logo-area:hover .logo-icon { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(var(--color-accent-rgb), 0.35)); }

.logo-text { display: flex; flex-direction: column; line-height: 1.1; font-weight: 800; }
.logo-gold { font-size: 17px; letter-spacing: 1.5px; color: var(--color-accent); text-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.3); }
.logo-white { font-size: 8px; letter-spacing: 0.5px; color: var(--color-text-main, rgba(255, 255, 255, 0.85)); font-weight: 700; }

.nav-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 clamp(6px, 1.4vw, 24px) !important;
    box-sizing: border-box !important;
    gap: clamp(4px, 0.8vw, 14px) !important;
}

.nav-links {
    display: flex !important;
    align-items: center !important;
    gap: clamp(4px, 1vw, 16px) !important;
    flex-wrap: nowrap !important;
    flex-shrink: 1 !important;
}

.nav-links a {
    white-space: nowrap !important;
    font-size: clamp(11.5px, 0.85vw, 14px) !important;
    font-weight: 550 !important;
    color: var(--color-text-muted) !important;
    position: relative !important;
    padding: 6px clamp(4px, 0.5vw, 8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

.nav-links a:focus, .nav-links a:focus-visible, .nav-links a:active { outline: none !important; box-shadow: none !important; }
.nav-links a:hover, .nav-links a.active { color: var(--color-accent) !important; }

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: var(--transition-smooth);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: clamp(4px, 0.5vw, 8px) !important;
    flex-shrink: 0 !important;
}

.header-search-wrap { margin-right: 0 !important; }
.header-search-wrap input#headerWatchSearch {
    width: clamp(80px, 6.5vw, 120px) !important;
    padding-left: 28px !important;
    padding-right: 6px !important;
    transition: width 0.25s ease !important;
}
.header-search-wrap input#headerWatchSearch:focus { width: clamp(110px, 9vw, 150px) !important; }

/* Dual-Box Admin Header Pills (1 single line on desktop) */
.jrg-header-admin-pill {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 4px clamp(6px, 0.55vw, 10px) !important;
    height: 32px !important;
    border-radius: 20px !important;
    background: rgba(236, 196, 147, 0.14) !important;
    border: 1px solid var(--color-accent) !important;
    color: var(--color-accent) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    font-size: clamp(11px, 0.75vw, 12.5px) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}
.jrg-header-admin-pill:hover {
    background: rgba(236, 196, 147, 0.28) !important;
    box-shadow: 0 0 12px rgba(236, 204, 147, 0.3) !important;
    transform: translateY(-1px) !important;
    color: var(--color-accent) !important;
}

/* Block 1: Icon Box (centered top to bottom) */
.header-pill-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Block 2: Text Box (centered in its own box, 1 line on desktop) */
.header-pill-text {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.pill-text-line { display: inline !important; white-space: nowrap !important; }

/* Dual-Box WhatsApp Button */
.whatsapp-header-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: #25d366 !important;
    color: #ffffff !important;
    padding: 4px clamp(6px, 0.6vw, 12px) !important;
    height: 32px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: clamp(11px, 0.75vw, 12.5px) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
    margin: 0 !important;
}
.whatsapp-header-btn:hover {
    background: #20ba5a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
    color: #ffffff !important;
}
.whatsapp-header-btn .header-pill-icon svg { width: 15px !important; height: 15px !important; display: block !important; }

@media screen and (min-width: 769px) and (max-width: 1250px) {
    .nav-links { gap: clamp(2px, 0.5vw, 8px) !important; }
    .nav-links a { font-size: clamp(10.5px, 0.75vw, 12.5px) !important; padding: 4px clamp(2px, 0.3vw, 5px) !important; }
    .jrg-header-admin-pill { padding: 3px clamp(4px, 0.4vw, 7px) !important; font-size: 11px !important; gap: 3px !important; }
    .whatsapp-header-btn { padding: 3px clamp(5px, 0.5vw, 8px) !important; font-size: 11px !important; gap: 3px !important; }
}

html[data-theme="light"] .jrg-header-admin-pill { background: rgba(180, 123, 43, 0.08) !important; border-color: #b47b2b !important; color: #925816 !important; }
html[data-theme="light"] .jrg-header-admin-pill:hover { background: rgba(180, 123, 43, 0.18) !important; border-color: #925816 !important; color: #78430e !important; }

/* Mobile Hamburger Toggle */
.jrg-mobile-nav-toggle {
    display: none !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    transition: all 0.25s ease;
    z-index: 101;
}

.jrg-mobile-nav-toggle:hover {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: var(--color-accent);
}

.jrg-hamburger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--color-accent, #ecc493);
    border-radius: 2px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.jrg-mobile-nav-toggle.active .jrg-hamburger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.jrg-mobile-nav-toggle.active .jrg-hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.jrg-mobile-nav-toggle.active .jrg-hamburger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Navigation Drawer */
.jrg-mobile-nav-drawer {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    background: var(--header-bg, rgba(13, 18, 30, 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle, rgba(236, 204, 147, 0.2));
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
    z-index: 9999;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.jrg-mobile-nav-content {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 16px 12px;
    gap: 4px;
}

.jrg-mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text-main, #ffffff);
    text-decoration: none;
    border-radius: 8px;
    min-height: 48px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.jrg-mobile-nav-icon {
    font-size: 17px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.jrg-mobile-nav-link:hover,
.jrg-mobile-nav-link:active {
    color: var(--color-accent) !important;
    background: rgba(var(--color-accent-rgb), 0.08);
}

.jrg-mobile-nav-backdrop {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    height: calc(100vh - 56px);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

@media screen and (max-width: 768px) {
    .jrg-mobile-nav-toggle { display: flex !important; }
    .jrg-mobile-nav-drawer { display: block; }
    .jrg-mobile-nav-drawer.active { max-height: 420px; opacity: 1; pointer-events: auto; }
    .jrg-mobile-nav-backdrop { display: block; }
    .jrg-mobile-nav-backdrop.active { opacity: 1; pointer-events: auto; }
}

/* Light Mode Navigation Styles */
html[data-theme="light"] .main-header { background: rgba(255, 255, 255, 0.96) !important; border-bottom: 1px solid #cbd5e1 !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important; }
html[data-theme="light"] .main-header.scrolled { background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.1) !important; }
html[data-theme="light"] .jrg-mobile-nav-toggle { background: #f8fafc !important; border-color: #cbd5e1 !important; }
html[data-theme="light"] .jrg-mobile-nav-toggle .jrg-hamburger-bar { background-color: #0f172a !important; }
html[data-theme="light"] .jrg-mobile-nav-drawer { background: #ffffff !important; border-bottom: 1px solid #cbd5e1 !important; box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .jrg-mobile-nav-link { color: #0f172a !important; }
html[data-theme="light"] .jrg-mobile-nav-link:hover, html[data-theme="light"] .jrg-mobile-nav-link:active { color: var(--color-accent, #b47b2b) !important; background: #f1f5f9 !important; }

.cart-toggle-btn {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: var(--transition-smooth) !important;
    padding: 0 !important;
    color: var(--color-text-main, #ffffff) !important;
}
.cart-toggle-btn:hover {
    background: rgba(var(--color-accent-rgb), 0.1) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
    box-shadow: var(--shadow-glow) !important;
}
.cart-icon { display: flex !important; align-items: center !important; justify-content: center !important; }
.cart-icon svg { width: 24px !important; height: 24px !important; fill: none !important; transition: var(--transition-smooth) !important; }
.cart-icon svg path { fill: none !important; stroke: currentColor !important; }
.cart-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background-color: var(--color-accent) !important;
    color: #0b0f19 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-smooth) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #0b0f19 !important;
}

/* ==========================================================================
   4. Hero Search Section (Excised per Direct User Requirement)
   ========================================================================== */
.hero-section,
.hero-action-strip,
.hero-pill-bar,
.hero-bento-grid {
    display: none !important;
}


/* ==========================================================================
   5. Shop Section

   ========================================================================== */

.shop-section {
    padding: 120px 0 60px 0;
    background-color: var(--bg-secondary);
    border-top: none;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 48px;
}

.shop-header h2 {
    font-size: 28px;
    font-weight: 700;
    position: relative;
    padding-left: 14px;
}

.shop-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 4px;
    background-color: var(--color-accent);
    border-radius: 2px;
}



/* Filter chips */

.filter-chips {
    display: flex;
    gap: 12px;
}

.filter-chip {
    padding: 0 20px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.filter-chip:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.filter-chip.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--bg-primary);
    box-shadow: var(--shadow-glow);
}

/* Unified Responsive Product Grid (Auto-flowing) */
.product-grid, #searchResultGrid, #jrgActiveProductGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)) !important;
    justify-content: center !important;
    gap: clamp(16px, 1.8vw, 28px) !important;
    margin: 30px auto 0 auto !important;
    width: 100% !important;
    max-width: 1600px !important;
}

/* Featured Deals specific layout for true centering when items are few */
.featured-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: clamp(16px, 1.8vw, 28px) !important;
    margin: 30px auto 0 auto;
    width: 100%;
    max-width: 1600px;
}

.product-grid .product-card, #searchResultGrid .product-card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.featured-grid .product-card {
    width: 100% !important;
    flex: 1 1 280px !important;
    max-width: 380px !important;
    min-width: 280px !important;
    box-sizing: border-box !important;
}

@media (max-width: 480px) {
    .product-grid .product-card, #searchResultGrid .product-card, .featured-grid .product-card {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* Product Card (21st.dev UX/UI Pro Max) */

.product-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    background: rgba(15, 23, 42, 0.82);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--color-accent-rgb), 0.18);
}

.product-card:active {
    transform: translateY(-2px) scale(0.99);
}

.card-header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    position: relative;
    z-index: 10;
    min-height: 26px;
}

.badge-size {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(236, 204, 147, 0.12);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    z-index: 5;
}

.card-header-bar .badge-size {
    position: static !important;
    margin-left: auto;
    white-space: nowrap;
}

.badge-sale {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.card-header-bar .badge-sale {
    position: static !important;
    margin-right: 4px;
    white-space: nowrap;
}

.product-image-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.product-image-container img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    transition: var(--transition-smooth);
}

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

html:not([data-theme="light"]) .product-image-container {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.product-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--color-text-heading, #ffffff);
    line-height: 1.3;
}

.product-material {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    margin-bottom: 12px;
    font-weight: 600;
}

/* Color Selectors */

.color-selector-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.color-option {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-smooth);
    position: relative;
}

.color-option::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.color-option:hover {
    transform: scale(1.2);
}

.color-option.active {
    border-color: #ffffff;
    box-shadow: 0 0 0 1px var(--color-accent);
}

/* Compatibility Box */

.compatibility-box {
    margin-top: auto;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.comp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comp-content {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-comp-link {
    color: var(--color-accent);
    cursor: pointer;
    font-size: 10px;
}

.view-comp-link:hover {
    text-decoration: underline;
}

/* Card Buy Row */

.card-buy-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.price-tag {
    font-size: 19px;
    font-weight: 800;
    color: var(--color-text-heading, #ffffff);
    letter-spacing: -0.3px;
}

.price-currency {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin-right: 1px;
}

.add-to-cart-btn {
    background: linear-gradient(135deg, var(--color-accent) 0%, #d49c63 100%);
    color: #0b0e14;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.25);
}

.add-to-cart-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(var(--color-accent-rgb), 0.4);
    color: #000000;
}

.add-to-cart-btn:active {
    transform: scale(0.95);
}

.add-to-cart-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
}

/* Light Theme Product Card & Chip Borders */
html[data-theme="light"] .product-card:not(.jrg-daily-sale-card):not(.jrg-weekly-deal-card):not(.jrg-flash-sale-card):not(.jrg-on-sale-card):not(.jrg-special-deal-card):not([data-sale="true"]) {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07) !important;
}

html[data-theme="light"] .product-card:not(.jrg-daily-sale-card):not(.jrg-weekly-deal-card):not(.jrg-flash-sale-card):not(.jrg-on-sale-card):not(.jrg-special-deal-card):not([data-sale="true"]):hover {
    border-color: var(--color-accent, #b47b2b) !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12), 0 0 16px rgba(180, 123, 43, 0.12) !important;
}

html[data-theme="light"] .filter-chip {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] .filter-chip:hover,
html[data-theme="light"] .filter-chip.active {
    background-color: rgba(180, 123, 43, 0.1) !important;
    border-color: var(--color-accent, #b47b2b) !important;
    color: var(--color-accent, #b47b2b) !important;
}

/* ==========================================================================
   6. Features Section

   ========================================================================== */

.features-section {
    padding: 80px 0;
    background-color: var(--bg-primary);
}

.section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 48px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    transition: var(--transition-smooth);
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(var(--color-accent-rgb), 0.15);
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--color-text-heading, #ffffff);
}

.feature-card p {
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Light Theme Feature Cards */
html[data-theme="light"] .feature-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .feature-card:hover {
    border-color: var(--color-accent, #b47b2b) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1) !important;
}

/* ==========================================================================
   7. Sourcing Section

   ========================================================================== */

.sourcing-section {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.sourcing-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.sourcing-info h2 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--color-text-heading, #ffffff);
}

.sourcing-info p {
    color: var(--color-text-muted);
    font-size: 16px;
    margin-bottom: 30px;
}

.sourcing-bullets {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bullet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.bullet-check {
    color: var(--color-accent);
    font-weight: 800;
    font-size: 18px;
}

.glass-form {
    background: rgba(22, 30, 49, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 36px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
}

.glass-form h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
    color: var(--color-text-heading, #ffffff);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,

.form-group textarea {
    width: 100%;
    background: var(--bg-input, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--color-text-main, #ffffff);
    font-size: 15px;
    transition: var(--transition-smooth);
}

.form-group input:focus,

.form-group textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.15);
}

.submit-btn {
    width: 100%;
    background-color: var(--color-accent);
    color: var(--bg-primary);
    font-weight: 700;
    font-size: 15px;
    padding: 14px;
    border-radius: 30px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--color-accent-rgb), 0.3);
}

.form-success-message {
    display: none;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--color-success);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.form-success-message h4 {
    color: var(--color-success);
    font-size: 22px;
    margin-bottom: 12px;
}

/* Light Theme Sourcing & Form Borders */
html[data-theme="light"] .glass-form {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group textarea:focus {
    border-color: var(--color-accent, #b47b2b) !important;
    box-shadow: 0 0 0 3px rgba(180, 123, 43, 0.15) !important;
}

/* ==========================================================================
   8. Full-Screen Cart Experience (Covers Page Completely, No Blur)
   ========================================================================== */

/* Freeze background page scrolling when cart or modal is open */
html.cart-drawer-open,
body.cart-drawer-open,
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: none !important;
    touch-action: none;
}

.cart-drawer,
.cart-drawer-content-wrap,
.cart-items-list,
.cart-drawer-right-pane,
.checkout-modal {
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
}

/* Backdrop not needed because cart is full-screen opaque */
.cart-drawer-backdrop {
    display: none !important;
}

.checkout-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 7, 18, 0.85);
    opacity: 0;
    pointer-events: none;
    z-index: 999999998 !important;
    transition: opacity 0.25s ease;
}

.checkout-modal-backdrop.active {
    opacity: 1;
    pointer-events: all;
}

/* Full-Screen Cart Overlay - Completely Covers & Hides Webpage */
.cart-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--cart-bg, #080c18) !important; /* Solid opaque luxury background - fully hides background */
    color: var(--color-text-main, #ffffff);
    z-index: 999999999 !important;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease-in-out, visibility 0.22s ease-in-out;
    overflow: hidden;
}

.cart-drawer.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Top Navigation Bar */
.cart-drawer-header {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #0b1120;
    padding: 14px 24px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.cart-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cart-back-shopping-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.cart-back-shopping-btn:hover {
    background: rgba(236, 196, 147, 0.15);
    color: var(--color-accent, #ecc493);
    border-color: var(--color-accent, #ecc493);
}

.close-cart-btn {
    font-size: 28px;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    transition: color 0.2s;
}

.close-cart-btn:hover {
    color: var(--color-accent);
}

/* Scrollable Content Wrapper */
.cart-drawer-content-wrap {
    flex: 1;
    width: 100%;
    height: calc(100vh - 65px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Empty State */
.empty-cart-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    color: var(--color-text-muted);
    padding: 60px 20px;
}

.empty-cart-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.35;
}

.shop-now-btn {
    margin-top: 16px;
    background-color: var(--color-accent);
    color: #ffffff;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
}

.shop-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--color-accent-rgb), 0.3);
}

/* 3-Pane Cart Grid (Desktop default: 3 independently scrolling columns) */
.cart-drawer-grid {
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr 1.05fr;
    gap: 20px;
    height: 100%;
    padding: 16px 24px 20px 24px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Base Pane Styling with Independent Scroll */
.cart-drawer-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 100px);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 18px 20px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(236, 196, 147, 0.25) transparent;
}

.cart-drawer-pane::-webkit-scrollbar {
    width: 6px;
}
.cart-drawer-pane::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}
.cart-drawer-pane::-webkit-scrollbar-thumb {
    background: rgba(236, 196, 147, 0.2);
    border-radius: 4px;
}
.cart-drawer-pane::-webkit-scrollbar-thumb:hover {
    background: rgba(236, 196, 147, 0.45);
}

.cart-pane-items {
    gap: 14px;
}

.cart-pane-shipping {
    gap: 14px;
}

.cart-pane-payment {
    gap: 14px;
}

.cart-drawer-left-pane,
.cart-drawer-middle-pane,
.cart-drawer-right-pane {
    min-width: 0;
}

.cart-pane-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cart-item {
    display: flex;
    gap: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px 18px;
    transition: background 0.2s;
}

.cart-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.cart-item-image {
    width: 76px;
    height: 76px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.cart-item-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.cart-item-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-text-heading, #ffffff);
    line-height: 1.3;
    margin: 0;
}

.cart-item-details {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.cart-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.cart-item-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-accent);
}

.quantity-controls {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.qty-btn {
    padding: 4px 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    color: var(--color-text-muted);
    background: none;
    border: none;
    transition: color 0.2s;
}

.qty-btn:hover {
    color: var(--color-accent);
}

.qty-val {
    font-size: 13px;
    font-weight: 700;
    padding: 0 4px;
    min-width: 20px;
    text-align: center;
}

.remove-item-btn {
    color: #ef4444;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.remove-item-btn:hover {
    opacity: 1;
}

/* Legacy right pane compatibility */
.cart-drawer-right-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
}

.cart-pudo-box {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    padding: 14px;
    text-align: left;
    overflow: visible !important;
}

.cart-location-btn {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.cart-location-btn:hover {
    background: rgba(34, 197, 94, 0.25);
}

.cart-select-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-pane, rgba(255, 255, 255, 0.15));
    background: var(--bg-input, rgba(15, 23, 42, 0.95));
    color: var(--color-text-main, #fff);
    font-size: 12.5px;
    outline: none;
    cursor: pointer;
}

.cart-text-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-pane, rgba(255, 255, 255, 0.15));
    background: var(--bg-input, rgba(0, 0, 0, 0.4));
    color: var(--color-text-main, #fff);
    font-size: 12.5px;
    outline: none;
    box-sizing: border-box;
}

/* STRICT DOWNWARD DROPDOWNS: Never flip upwards */
.cart-pudo-suggestions,
#jrgPudoLockerSuggestions,
#jrgCartPudoLockerSuggestions {
    display: none;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-dropdown, #0f172a) !important;
    border: 1px solid rgba(236, 196, 147, 0.35) !important;
    border-radius: 8px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    z-index: 999999999 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.9) !important;
}

.cart-breakdown-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 14px 16px;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.cart-total-price {
    color: var(--color-accent);
}

.payment-partners {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--color-text-muted);
}

.payment-partner-logo {
    display: flex;
    align-items: center;
    gap: 4px;
}

.payment-partner-logo::before {
    content: "●";
    color: var(--color-accent);
    font-size: 8px;
}

.cart-actions-row {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.cart-clear-btn {
    flex: 1;
    height: 50px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1.5px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    outline: none;
}

.cart-clear-btn:hover {
    background: rgba(239, 68, 68, 0.22);
}

.checkout-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--color-accent) 0%, #d8b273 100%);
    color: #0b0f19;
    font-weight: 800;
    font-size: 15px;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(var(--color-accent-rgb), 0.2);
    border: none;
}

.checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--color-accent-rgb), 0.4);
}

/* ==========================================================================
   Mobile & Tablet Responsive: Continuous Vertical Stack
   ========================================================================== */
@media (max-width: 1023px) {
    .cart-drawer-content-wrap {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: calc(100vh - 56px) !important;
    }
    .cart-drawer-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        gap: 18px !important;
        padding: 14px 14px 80px 14px !important;
    }
    .cart-drawer-pane {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 16px !important;
    }
}

@media (max-width: 768px) {
    .cart-drawer-header {
        padding: 10px 14px !important;
    }
    .cart-back-shopping-btn {
        padding: 6px 10px !important;
        font-size: 11.5px !important;
    }
    .cart-header-inner h3 {
        font-size: 14.5px !important;
    }
}

@media (max-width: 600px) {
    .cart-back-shopping-btn span:last-child {
        display: none !important;
    }
    .cart-back-shopping-btn::after {
        content: "Shop";
        display: inline-block;
    }
    .cart-header-inner h3 {
        font-size: 13.5px !important;
    }
}

/* ==========================================================================
   Cart Drawer Verified Partners Trust Marquee & Checkout Trust Marks
   ========================================================================== */
.cart-trust-marquee {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: 32px;
    display: flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

.cart-trust-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: cartMarqueeScroll 24s linear infinite;
    will-change: transform;
}

@keyframes cartMarqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-25%);
    }
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #cbd5e1;
    padding: 0 10px;
}

.marquee-icon {
    font-size: 12px;
}

.marquee-divider {
    color: rgba(236, 204, 147, 0.5);
    font-size: 11px;
    padding: 0 4px;
}

.cart-checkout-trust-wrap {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    text-align: center;
}

.cart-checkout-trust-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent, #ecc493);
    margin-bottom: 8px;
}

.cart-checkout-partner-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.cart-partner-logo-pill {
    background: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.cart-partner-logo-pill img {
    max-height: 16px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

.cart-checkout-trust-footnote {
    font-size: 10px;
    color: var(--color-text-muted, #94a3b8);
    line-height: 1.4;
}

/* ==========================================================================
   Cart Drawer Interactive Payment Selection Pills
   ========================================================================== */
.cart-payment-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-bottom: 12px;
}

@media (max-width: 420px) {
    .cart-payment-pills {
        grid-template-columns: 1fr;
    }
}

.cart-payment-pill-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: rgba(255, 255, 255, 0.035);
    border: 1.5px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--color-text-main, #e2e8f0);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    outline: none;
    user-select: none;
}

.cart-payment-pill-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(236, 204, 147, 0.4);
    transform: translateY(-1px);
}

.cart-payment-pill-btn .pill-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.cart-payment-pill-btn .pill-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.5px;
}

.cart-payment-pill-btn .pill-badge-active {
    font-size: 8px;
    font-weight: 800;
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.cart-payment-pill-btn .pill-badge-active.float-badge {
    background: rgba(239, 15, 96, 0.15);
    color: #ef0f60;
    border-color: rgba(239, 15, 96, 0.35);
}

.cart-payment-pill-btn .pill-badge-active.capitec-badge {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
}

.cart-payment-pill-btn.active {
    background: rgba(236, 204, 147, 0.12);
    border-color: var(--color-accent, #ecc493);
    color: var(--color-accent, #ecc493);
    box-shadow: 0 0 12px rgba(236, 204, 147, 0.2);
}

.cart-payment-pill-btn.active[data-method="float"] {
    background: rgba(239, 15, 96, 0.12);
    border-color: #ef0f60;
    color: #ef0f60;
    box-shadow: 0 0 12px rgba(239, 15, 96, 0.2);
}

.cart-payment-pill-btn.active[data-method="eft"] {
    background: rgba(56, 189, 248, 0.12);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

/* Active indicator dot on footer partner logo pills */
.cart-pill-active-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
    display: inline-block;
    margin-left: 5px;
    box-shadow: 0 0 4px #10b981;
}


/* ==========================================================================
   9. Checkout Modal & Toast Notifications

   ========================================================================== */

.checkout-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: 92%;
    max-width: 620px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--bg-card, rgba(15, 23, 42, 0.96));
    color: var(--color-text-main, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(var(--color-accent-rgb), 0.15);
    z-index: 999999999 !important;
    opacity: 0;
    pointer-events: none;
    padding: 28px 28px 70px 28px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checkout-modal.active {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}

.close-modal-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 28px;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
}

.close-modal-btn:hover {
    color: var(--color-accent);
}

/* Toast notifications */

.toast-notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: var(--bg-secondary);
    color: var(--color-text-main, #ffffff);
    border: 1px solid var(--color-accent);
    padding: 14px 28px;
    border-radius: 50px;
    box-shadow: var(--shadow-card), var(--shadow-glow);
    z-index: 300;
    font-weight: 600;
    font-size: 14px;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
}

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

/* Light Theme Cart Drawer Panes & Cards */
html[data-theme="light"] .cart-drawer-left-pane,
html[data-theme="light"] .cart-drawer-right-pane,
html[data-theme="light"] .cart-item-card,
html[data-theme="light"] .cart-pane-section {
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .cart-item-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .cart-drawer-right-pane {
    background: #f8fafc !important;
    border-left: 1.5px solid #cbd5e1 !important;
}

html[data-theme="light"] .cart-drawer-left-pane {
    background: #ffffff !important;
}

html[data-theme="light"] .checkout-modal {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
}

/* ==========================================================================
   10. Footer Section

   ========================================================================== */

.main-footer {
    background-color: var(--bg-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 60px 0 140px 0;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: var(--color-text-heading, #ffffff);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.brand-col p {
    margin-top: 16px;
    max-width: 280px;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 16px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.social-link:hover {
    background-color: rgba(var(--color-accent-rgb), 0.1);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding-top: 24px;
    padding-bottom: 30px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Footer Appearance Theme Switcher
   ========================================================================== */
.footer-theme-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 22px;
}

.jrg-theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    padding: 6px 14px;
    border-radius: 30px;
    box-shadow: var(--shadow-card);
}

.jrg-theme-switcher-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.theme-pills {
    display: inline-flex;
    gap: 4px;
}

.jrg-theme-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.jrg-theme-pill:hover {
    color: var(--color-text-main);
    background: var(--bg-card, rgba(255, 255, 255, 0.06));
}

.jrg-theme-pill.active {
    background: var(--color-accent) !important;
    color: #0b0f19 !important;
    border-color: var(--color-accent) !important;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(var(--color-accent-rgb), 0.3) !important;
}

[data-theme="light"] .jrg-theme-pill.active {
    background: var(--color-accent) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Footer Verified Banking & Payment Partners Showcase
   ========================================================================== */
.footer-partners-section {
    padding: 40px 0 35px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 30px;
    margin-bottom: 25px;
}

.footer-partners-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 30px auto;
}

.footer-partners-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(236, 204, 147, 0.12);
    border: 1px solid rgba(236, 204, 147, 0.3);
    border-radius: 20px;
    color: var(--color-accent, #ecc493);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.footer-partners-title {
    color: var(--color-text-heading, #ffffff);
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 12px 0;
    letter-spacing: -0.3px;
}

.footer-partners-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-muted, #94a3b8);
    margin: 0;
}

.footer-partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 26px;
}

.footer-partner-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-partner-card:hover {
    transform: translateY(-3px);
    border-color: rgba(236, 204, 147, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.partner-logo-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.partner-logo-img {
    max-height: 28px;
    width: auto;
    object-fit: contain;
}

.partner-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
    flex-wrap: wrap;
}

.partner-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-heading, #ffffff);
}

.partner-status-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.partner-status-tag.verified {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.partner-status-tag.split {
    background: rgba(239, 15, 96, 0.15);
    color: #ef0f60;
    border: 1px solid rgba(239, 15, 96, 0.3);
}

.partner-status-tag.secure {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.partner-status-tag.corporate {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.partner-details {
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-text-muted, #94a3b8);
    margin: 0;
}

.footer-trust-strip {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.trust-strip-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent, #ecc493);
    margin-right: 6px;
}

.trust-mini-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #cbd5e1;
}

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

@media (max-width: 580px) {
    .footer-partners-grid {
        grid-template-columns: 1fr;
    }
    .footer-trust-strip {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ==========================================================================
   11. Responsive Styles (Media Queries)
   ========================================================================== */

/* Prevent horizontal clipping across all mobile devices */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

.jrg-storefront-wrap {
    overflow-x: hidden !important;
    max-width: 100vw;
    box-sizing: border-box !important;
}

@media (max-width: 992px) {
    .hero-title {
        font-size: 42px;
    }

    .sourcing-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .jrg-storefront-wrap {
        padding: 92px 14px 20px 14px !important;
    }
    
    .nav-links {
        display: none !important;
    }

    .hero-title {
        font-size: 30px;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 14.5px;
    }

    .shop-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .filter-chips {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    /* Prevent iOS viewport auto-zoom on form inputs */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

@media (max-width: 600px) {
    .sourcing-promo-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .jrg-storefront-wrap {
        padding: 88px 10px 16px 10px !important;
    }
}


/* ==========================================================================
   12. Product Details Specs Page & Catalog Enhancements

   ========================================================================== */

.product-title-link {
    color: var(--color-text-heading, #ffffff);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.product-title-link:hover {
    color: var(--color-accent);
}

.brand-compatibility-tag {
    font-size: 12px;
    color: var(--color-accent);
    font-weight: 500;
    margin-bottom: 6px;
}

.view-specs-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s;
}

.view-specs-link:hover {
    transform: translateX(4px);
    text-decoration: underline;
}

/* Top-Level Catalog Category Navigation */

.main-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
    justify-content: center;
}

@media (min-width: 768px) {
    .main-categories {
        justify-content: flex-start;
}

}

.main-cat-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 16px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.main-cat-btn:hover {
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.05));
    border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
    color: var(--color-text-heading, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.main-cat-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--bg-primary);
    box-shadow: 0 0 15px rgba(236, 204, 147, 0.3);
    transform: translateY(0);
}

/* Secondary Sub-Category Container */

.sub-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    justify-content: center;
}

@media (min-width: 768px) {
    .sub-categories {
        justify-content: flex-start;
}

}

.sub-categories .filter-chip {
    padding: 0 16px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.01);
    border-color: rgba(255, 255, 255, 0.04);
}

.sub-categories .filter-chip.active {
    background-color: var(--color-accent);
    color: var(--bg-primary);
    border-color: var(--color-accent);
}

/* ==========================================================================
   13a. Product Detail Gallery (Amazon/Apple Left-Thumb Strip Architecture)
   ========================================================================== */

.product-detail-section {
    padding: 76px 0 35px 0;
    background: radial-gradient(circle at top right, rgba(236, 204, 147, 0.05), transparent 60%);
}

.breadcrumb {
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.breadcrumb a,
.breadcrumb span {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 50px;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .detail-grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 48px;
    }
}

/* --- Left-Aligned Thumbnail Strip + Large Hero Gallery Layout --- */
.detail-gallery {
    position: sticky;
    top: 75px;
    display: flex;
    flex-direction: row; /* Thumbnails on LEFT, main preview on RIGHT */
    gap: 14px;
    align-items: flex-start;
    width: 100%;
}

.product-thumbnail-gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(44vh, 380px);
    overflow-y: auto;
    width: 68px;
    flex-shrink: 0;
    scrollbar-width: thin;
    padding-right: 4px;
}

.product-thumbnail-gallery::-webkit-scrollbar {
    width: 3px;
}

.product-thumbnail-gallery::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.product-thumbnail-gallery .jrg-thumb-img {
    width: 66px;
    height: 66px;
    object-fit: contain;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.6);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 4px;
    flex-shrink: 0;
}

.product-thumbnail-gallery .jrg-thumb-img:hover {
    border-color: rgba(236, 204, 147, 0.6);
    transform: scale(1.04);
}

.product-thumbnail-gallery .jrg-thumb-img.active {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 14px rgba(236, 204, 147, 0.35);
    background: rgba(30, 41, 59, 0.8);
}

.main-preview-container {
    flex: 1;
    min-width: 0;
    max-height: min(44vh, 380px);
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.45), rgba(13, 18, 30, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    cursor: zoom-in;
    user-select: none;
}

.main-preview-container img {
    width: 100%;
    height: 100%;
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease, opacity 0.3s ease;
}

.main-preview-container:hover img {
    transform: scale(1.03);
}

/* Progressive Blur-Up */
.main-preview-container img.jrg-blur-load {
    filter: blur(14px);
    opacity: 0.88;
}

.main-preview-container img.jrg-blur-done {
    filter: blur(0);
    opacity: 1;
}

/* Carousel Prev/Next Chevrons on Main Preview */
.gallery-arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    opacity: 0.85;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.gallery-arrow-btn:hover {
    opacity: 1;
    background: rgba(236, 204, 147, 0.25);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-50%) scale(1.1);
}

.gallery-prev-btn {
    left: 14px;
}

.gallery-next-btn {
    right: 14px;
}

/* Fullscreen Zoomable Lightbox Modal */
.jrg-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.jrg-lightbox-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.jrg-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 10, 19, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1;
}

.jrg-lightbox-topbar {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
}

.jrg-lightbox-counter {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.jrg-lightbox-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jrg-lb-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
}

.jrg-lb-btn:hover {
    background: rgba(236, 204, 147, 0.2);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: scale(1.06);
}

.jrg-lightbox-stage {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
}

.jrg-lightbox-stage.is-zoomed {
    cursor: grab;
}

.jrg-lightbox-stage.is-dragging {
    cursor: grabbing;
}

.jrg-lightbox-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    transition: transform 0.12s ease-out;
    will-change: transform;
}

.jrg-lightbox-img {
    max-width: 90vw;
    max-height: 78vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.jrg-lightbox-img.loading {
    filter: blur(14px);
    opacity: 0.85;
}

.jrg-lightbox-img.loaded {
    filter: blur(0);
    opacity: 1;
}

.jrg-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.jrg-lb-nav:hover {
    background: rgba(236, 204, 147, 0.25);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-50%) scale(1.08);
}

.jrg-lb-prev {
    left: 24px;
}

.jrg-lb-next {
    right: 24px;
}

.jrg-lightbox-thumbs-bar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.jrg-lightbox-thumbs-bar::-webkit-scrollbar {
    display: none;
}

.jrg-lb-thumb {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.6);
    padding: 3px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.jrg-lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.jrg-lb-thumb:hover {
    border-color: rgba(236, 204, 147, 0.6);
    transform: scale(1.05);
}

.jrg-lb-thumb.active {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 14px rgba(236, 204, 147, 0.4);
    transform: scale(1.08);
}

/* Mobile Gallery Layout */
@media screen and (max-width: 768px) {
    .product-detail-section {
        padding: 65px 12px 25px 12px !important;
    }

    .detail-gallery {
        flex-direction: column-reverse;
        gap: 10px;
        position: relative;
        top: 0;
    }

    .product-thumbnail-gallery {
        flex-direction: row;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        padding-bottom: 4px;
        gap: 6px;
    }

    .product-thumbnail-gallery .jrg-thumb-img {
        width: 50px;
        height: 50px;
        border-radius: 8px;
    }

    .main-preview-container {
        max-height: min(38vh, 270px);
        border-radius: 14px;
        padding: 10px;
    }

    .gallery-arrow-btn {
        width: 38px;
        height: 38px;
    }

    .gallery-prev-btn {
        left: 8px;
    }

    .gallery-next-btn {
        right: 8px;
    }

    .jrg-lb-nav {
        width: 44px;
        height: 44px;
    }

    .jrg-lb-prev {
        left: 10px;
    }

    .jrg-lb-next {
        right: 10px;
    }

    .jrg-lightbox-topbar {
        padding: 12px 16px;
    }

    .jrg-lb-thumb {
        width: 46px;
        height: 46px;
    }
}
/* ==========================================================================
   13b. Product Detail Info & Value Proposition Box
   ========================================================================== */

.detail-info {
    display: flex;
    flex-direction: column;
}

.detail-brand-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.detail-brand-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(236, 204, 147, 0.1);
    border: 1px solid rgba(236, 204, 147, 0.25);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    width: fit-content;
    gap: 5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.detail-seller-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.detail-seller-trust-badge .seller-star {
    color: #facc15;
}

.detail-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 14px 0;
    color: var(--color-text-heading, #ffffff);
    letter-spacing: -0.3px;
}

@media screen and (max-width: 768px) {
    .detail-title {
        font-size: 22px;
    }
}

/* --- Pricing Box & Value Proposition --- */
.detail-price-box {
    background: var(--bg-card, rgba(18, 24, 38, 0.55));
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.detail-price-currency {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-accent);
}

.detail-price {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-heading, #ffffff);
    letter-spacing: -0.5px;
}

.detail-old-price {
    font-size: 16px;
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.detail-savings-badge {
    background: rgba(244, 63, 94, 0.18);
    border: 1px solid rgba(244, 63, 94, 0.4);
    color: #fda4af;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.detail-trust-bullets {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    padding-top: 8px;
    margin-top: 4px;
}

.detail-trust-bullet-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-main, #f3f4f6);
}

.detail-trust-bullet-item svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-accent);
    flex-shrink: 0;
}

/* --- Color Selector Swatches --- */
.color-selector-wrap {
    margin-bottom: 12px;
}

.color-selector-label {
    display: block;
    font-size: 13.5px;
    color: #e2e8f0;
    margin-bottom: 10px;
    font-weight: 600;
}

.color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.color-option {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.color-option:hover {
    transform: scale(1.15);
    border-color: #ffffff;
}

.color-option.active {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 12px rgba(236, 204, 147, 0.6);
    transform: scale(1.1);
}

/* --- CTAs & Actions --- */
.detail-cta-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 12px;
}

.whatsapp-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25d366 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: var(--transition-smooth) !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}

.whatsapp-order-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
    background: #20ba5a !important;
}

.whatsapp-quick-ask-box {
    background: rgba(37, 211, 102, 0.06);
    border: 1px solid rgba(37, 211, 102, 0.18);
    padding: 12px 14px;
    border-radius: 12px;
    margin-top: 4px;
}

/* --- Mobile Floating Sticky Buy Bar --- */
.jrg-mobile-sticky-buy-bar {
    display: none;
}

@media screen and (max-width: 768px) {
    .jrg-mobile-sticky-buy-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(13, 18, 30, 0.98);
        border-top: 1px solid rgba(236, 204, 147, 0.25);
        backdrop-filter: blur(16px);
        padding: 10px 16px;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
        transform: translateY(120%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .jrg-mobile-sticky-buy-bar.visible {
        transform: translateY(0);
    }

    .jrg-sticky-price-info {
        display: flex;
        flex-direction: column;
    }

    .jrg-sticky-price {
        font-size: 18px;
        font-weight: 800;
        color: var(--color-accent);
    }

    .jrg-sticky-title {
        font-size: 11px;
        color: var(--color-text-muted);
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .jrg-sticky-add-btn {
        flex: 1;
        height: 44px;
        background: var(--color-accent);
        color: #0b0f19;
        border: none;
        border-radius: 10px;
        font-weight: 800;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(236, 204, 147, 0.3);
    }
}
/* ==========================================================================
   13c. Product Detail Tabs, Technical Specifications & Diagnostic Reports
   ========================================================================== */

.specs-tabs-container {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
}

.tab-headers {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.tab-headers::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--color-text-heading, #ffffff);
}

.tab-btn.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.tab-content {
    padding: 24px 0;
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.35s ease-in-out;
}

/* Specs Table */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.specs-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.specs-table td {
    padding: 14px 8px;
}

.specs-table td.label-col {
    font-weight: 500;
    color: var(--color-text-muted);
    width: 240px;
}

.specs-table td.value-col {
    color: var(--color-text-main, #ffffff);
    font-weight: 600;
}

/* Devices Compatibility tab with Search */
.comp-search-wrapper {
    margin-bottom: 20px;
    position: relative;
}

.comp-search-input {
    width: 100%;
    background: var(--bg-input, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 12px 16px 12px 42px;
    color: var(--color-text-main, #ffffff);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

.comp-search-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 15px rgba(236, 204, 147, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

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

.compatibility-brand-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .compatibility-brand-groups {
        grid-template-columns: 1fr 1fr;
    }
}

.brand-group-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px;
}

.brand-group-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-count-badge {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-muted);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.brand-device-list {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 6px;
}

.brand-device-list li {
    font-size: 13.5px;
    color: var(--color-text-main, #ffffff);
    opacity: 0.85;
    padding: 3px 6px;
    border-radius: 4px;
    transition: background 0.1s;
}

.brand-device-list li.highlighted {
    background: rgba(236, 204, 147, 0.15);
    border-left: 3px solid var(--color-accent);
    opacity: 1;
    font-weight: 600;
}

.brand-device-list li.hidden {
    display: none;
}

.in-the-box-list {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.in-the-box-list li {
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.in-the-box-icon {
    color: var(--color-success);
    font-size: 16px;
}

.back-to-catalogue-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent) !important;
    font-weight: 700;
    font-size: 14.5px;
    margin-bottom: 18px;
    cursor: pointer;
    transition: transform 0.2s;
    background: none;
    border: none;
    padding: 0;
}

.back-to-catalogue-btn:hover {
    transform: translateX(-4px);
}

/* ==========================================================================
   Condition & Disclaimers Inspection Card (WCAG AAA Contrast Guaranteed)
   ========================================================================== */
.jrg-inspection-card {
    background: var(--bg-card, rgba(22, 30, 49, 0.75));
    border: 1px solid var(--border-color, rgba(236, 204, 147, 0.25));
    border-radius: 16px;
    padding: 24px;
    text-align: left;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.jrg-inspection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    padding-bottom: 14px;
}

.jrg-inspection-subtitle {
    font-size: 12px;
    color: var(--color-accent, #eccc93);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.jrg-inspection-title {
    color: var(--color-text-heading, #ffffff);
    font-size: 20px;
    font-weight: 700;
    margin: 4px 0 0 0;
}

.jrg-inspection-badge {
    background: rgba(34, 197, 94, 0.15);
    border: 1.5px solid #22c55e;
    color: #4ade80;
    font-weight: 800;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jrg-inspection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.jrg-inspection-box {
    background: rgba(13, 18, 30, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    padding: 14px;
    border-radius: 12px;
}

.jrg-inspection-label {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.jrg-inspection-val {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
}

.jrg-inspection-val.highlight-green {
    color: #4ade80;
}

.jrg-readiness-heading {
    color: var(--color-text-heading, #ffffff);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.jrg-readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.jrg-readiness-pill {
    background: rgba(13, 18, 30, 0.85);
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.readiness-check {
    color: #22c55e;
    font-weight: 800;
}

.jrg-disclaimer-notice {
    background: rgba(236, 204, 147, 0.1);
    border: 1.5px solid rgba(236, 204, 147, 0.35);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 13px;
    color: #f8fafc;
    line-height: 1.6;
}

.jrg-disclaimer-notice strong {
    color: #fde68a;
}

/* Light Theme Contrast Overrides */
[data-theme="light"] .jrg-inspection-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .jrg-inspection-title {
    color: #0f172a !important;
}

[data-theme="light"] .jrg-inspection-subtitle {
    color: #b47b2b !important;
}

[data-theme="light"] .jrg-inspection-badge {
    background: #f0fdf4 !important;
    border-color: #16a34a !important;
    color: #15803d !important;
}

[data-theme="light"] .jrg-inspection-box {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
}

[data-theme="light"] .jrg-inspection-label {
    color: #334155 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .jrg-inspection-val {
    color: #0f172a !important;
    font-weight: 800 !important;
}

[data-theme="light"] .jrg-inspection-val.highlight-green {
    color: #15803d !important;
}

[data-theme="light"] .jrg-readiness-heading {
    color: #0f172a !important;
}

[data-theme="light"] .jrg-readiness-pill {
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    color: #14532d !important;
    font-weight: 700 !important;
}

[data-theme="light"] .jrg-disclaimer-notice {
    background: #fffbeb !important;
    border: 1.5px solid #fde047 !important;
    color: #78350f !important;
}

[data-theme="light"] .jrg-disclaimer-notice strong {
    color: #92400e !important;
}

/* ==========================================================================
   Frequently Purchased Together (FBT) Above-The-Fold Architecture
   ========================================================================== */
.frequently-bought-together-box {
    background: var(--bg-card, rgba(18, 24, 38, 0.65));
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.fbt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.fbt-title {
    color: var(--color-text-heading, #ffffff);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.fbt-badge {
    font-size: 11px;
    background: rgba(236, 204, 147, 0.15);
    border: 1px solid rgba(236, 204, 147, 0.4);
    color: var(--color-accent);
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
}

.fbt-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.fbt-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    border-radius: 10px;
    padding: 8px 12px;
    gap: 10px;
}

.fbt-item-thumb {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.fbt-item-info {
    flex: 1;
    min-width: 0;
}

.fbt-item-title {
    color: var(--color-text-main, #ffffff);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fbt-item-role {
    color: var(--color-text-muted, #94a3b8);
    font-size: 11px;
    margin-top: 1px;
}

.fbt-item-price {
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}

.fbt-add-btn {
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.fbt-add-btn:hover {
    background: var(--color-accent);
    color: #0b0f19;
    border-color: var(--color-accent);
}

.fbt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    flex-wrap: wrap;
    gap: 10px;
}

.fbt-total-label {
    font-size: 11.5px;
    color: var(--color-text-muted, #94a3b8);
}

.fbt-total-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-accent);
}

.fbt-bundle-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--color-accent);
    color: #0b0f19;
    border: none;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease;
    box-shadow: 0 4px 14px rgba(236, 204, 147, 0.25);
}

.fbt-bundle-btn:hover {
    transform: scale(1.02);
}

/* Light Theme FBT Overrides */
[data-theme="light"] .frequently-bought-together-box {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .fbt-title {
    color: #0f172a !important;
}

[data-theme="light"] .fbt-item {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
}

[data-theme="light"] .fbt-item-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .fbt-item-role {
    color: #475569 !important;
}

[data-theme="light"] .fbt-item-price {
    color: #b47b2b !important;
}

[data-theme="light"] .fbt-add-btn {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .fbt-add-btn:hover {
    background: #b47b2b !important;
    color: #ffffff !important;
    border-color: #b47b2b !important;
}

[data-theme="light"] .fbt-total-label {
    color: #475569 !important;
}

[data-theme="light"] .fbt-total-price {
    color: #b47b2b !important;
}

[data-theme="light"] .fbt-bundle-btn {
    background: #b47b2b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(180, 123, 43, 0.25) !important;
}
/* ==========================================================================
   11. Admin Edit Modal Styles
   ========================================================================== */
.jrg-admin-edit-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background: rgba(15, 21, 36, 0.7);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}
.jrg-admin-edit-btn:hover {
    background: var(--color-accent);
    color: #0f1524;
    box-shadow: 0 0 10px rgba(236, 204, 147, 0.4);
}

.jrg-admin-card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    width: 100%;
    margin-bottom: 8px;
}
.jrg-admin-btn-compact {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    font-size: 9px !important;
    font-weight: 600;
    padding: 3px 4px !important;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1.2;
    transition: all 0.2s ease-in-out;
    white-space: normal !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px !important;
    flex: 1 1 auto;
    text-align: center;
}

.jrg-admin-btn-compact:hover {
    border-color: #ecc07b !important;
    background: rgba(236, 192, 123, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(236, 192, 123, 0.45) !important;
    transform: translateY(-1px);
}

.jrg-admin-btn-compact.delete-btn {
    color: #f87171;
}


.jrg-admin-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 6, 10, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.jrg-admin-modal-backdrop.active {
    opacity: 1;
    pointer-events: all;
}

.jrg-admin-modal {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background: #0b0f19 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 999999 !important;
    opacity: 0;
    pointer-events: none;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    color: #ffffff;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.jrg-admin-modal-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}
.jrg-admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 30px !important;
    margin: 0 !important;
    background: #0d121f;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0;
}
.jrg-admin-modal.active {
    opacity: 1;
    pointer-events: all;
}

.jrg-admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.jrg-admin-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--color-accent);
    font-weight: 700;
}
.close-admin-modal-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
}
.close-admin-modal-btn:hover {
    color: var(--color-accent);
}

.jrg-admin-modal-body form .form-group {
    margin-bottom: 20px;
}
.jrg-admin-modal-body form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.jrg-admin-modal-body form input[type="text"],
.jrg-admin-modal-body form input[type="number"],
.jrg-admin-modal-body form input[type="date"] {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.jrg-admin-modal-body form select {
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: #0d121f !important;
    color: #ffffff !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
    height: 48px !important;
    line-height: normal !important;
}
.jrg-admin-modal-body form input:focus,
.jrg-admin-modal-body form select:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.05);
}

.jrg-admin-modal-body form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.jrg-admin-modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}

.jrg-admin-btn {
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}
.jrg-admin-btn.gold-btn {
    background: var(--color-accent);
    color: #0f1524;
}
.jrg-admin-btn.gold-btn:hover {
    background: #f0cb9e;
    box-shadow: 0 0 15px rgba(236, 204, 147, 0.3);
}
.cart-toggle-btn {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: var(--transition-smooth) !important;
    padding: 0 !important;
    color: #ffffff !important;
}

.cart-toggle-btn:hover {
    background: rgba(var(--color-accent-rgb), 0.1) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
    box-shadow: var(--shadow-glow) !important;
}

.cart-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cart-icon svg {
    width: 28px !important;
    height: 28px !important;
    fill: none !important;
    transition: var(--transition-smooth) !important;
}

.cart-icon svg path {
    fill: none !important;
    stroke: currentColor !important;
}

.cart-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background-color: var(--color-accent) !important;
    color: #0b0f19 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-smooth) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #0b0f19 !important;
}

.jrg-admin-btn.reset-btn {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
.jrg-admin-btn.reset-btn:hover {
    background: #ef4444;
    color: #ffffff;
}
.jrg-admin-btn.save-btn {
    background: #10b981;
    color: #ffffff;
}
.jrg-admin-btn.save-btn:hover {
    background: #059669;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.jrg-admin-add-product-btn {
    cursor: pointer;
    margin: 0 !important;
}

.add-to-cart-btn.added {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid #10b981 !important;
    color: #10b981 !important;
}
.add-to-cart-btn.added:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2) !important;
}

/* Push checkout buttons above floating WhatsApp button */
.cart-drawer-footer {
    padding-bottom: 90px !important;
}

/* ==========================================================================
   WordPress Admin Bar Adjustments
   ========================================================================== */
body.admin-bar .main-header {
    top: 32px;
}
body.admin-bar .cart-drawer,
body.admin-bar .cart-drawer-backdrop {
    top: 32px !important;
    height: calc(100% - 32px) !important;
}
body.admin-bar .shop-section {
    padding-top: 156px !important;
}
body.admin-bar #searchResultBlock {
    padding-top: 156px !important;
}
body.admin-bar .product-detail-section {
    padding-top: 110px !important;
}
body.admin-bar .detail-gallery {
    top: 107px !important;
}
body.admin-bar.product-page-active .main-header,
body.admin-bar.product-page-active .main-header.scrolled {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar .main-header {
        top: 46px;
    }
    body.admin-bar.product-page-active .main-header,
    body.admin-bar.product-page-active .main-header.scrolled {
        top: 46px !important;
    }
    body.admin-bar .cart-drawer,
    body.admin-bar .cart-drawer-backdrop {
        top: 46px !important;
        height: calc(100% - 46px) !important;
    }
    body.admin-bar .shop-section {
        padding-top: 170px !important;
    }
    body.admin-bar #searchResultBlock {
        padding-top: 170px !important;
    }
    body.admin-bar .product-detail-section {
        padding-top: 115px !important;
    }
    body.admin-bar .detail-gallery {
        top: 0 !important;
    }
}



/* ==========================================================================
   Zoho Books Integration Styling
   ========================================================================== */
.jrg-zoho-section {
    background: rgba(236, 204, 147, 0.02);
    border: 1px dashed rgba(236, 204, 147, 0.2) !important;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
}
.jrg-zoho-section select,
.jrg-zoho-section input[type="date"] {
    background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   12. WordPress Media Library Dark Theme Override
   ========================================================================== */
.media-modal, 
.media-frame, 
.media-frame-title,
.media-frame-content, 
.media-frame-router, 
.media-frame-menu, 
.media-frame-toolbar, 
.media-sidebar,
.attachments-browser,
.media-modal-content,
.media-toolbar,
.media-router,
.media-menu,
.media-menu-item,
.attachment-preview,
.uploader-inline,
.media-sidebar .setting,
.media-sidebar .sidebar-compat-activity {
    background-color: #0b0f19 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.media-frame-title h1 {
    color: #ffffff !important;
}

/* Sidebar and menu panels background */
.media-frame-menu, 
.media-sidebar,
.media-frame-toolbar,
.media-frame-router,
.media-toolbar {
    background-color: #0f1524 !important;
}

/* Active navigation tab/menu states */
.media-menu-item.active, 
.media-menu-item:hover,
.media-router .active,
.media-router a:hover {
    color: #eccc93 !important;
    background-color: rgba(236, 204, 147, 0.1) !important;
}

/* Links & items text */
.media-menu-item, 
.media-router a,
.media-sidebar .setting span,
.media-sidebar .setting label {
    color: #9ca3af !important;
}

/* Grid attachments background */
.attachments-browser .attachments {
    background-color: #0b0f19 !important;
}

/* Individual attachment card in grid */
.attachment {
    background-color: #0f1524 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* Selected attachment card */
.attachment.details.selected, 
.attachment.selected {
    box-shadow: inset 0 0 0 3px #eccc93, 0 0 15px rgba(236, 204, 147, 0.2) !important;
}

/* Ensure the check icon on selected items is styled correctly */
.attachment.selected .check {
    background-color: #eccc93 !important;
    color: #0b0f19 !important;
    box-shadow: 0 0 0 1px #0b0f19 !important;
}

/* Text inputs inside media editor */
.media-sidebar input, 
.media-sidebar textarea, 
.media-sidebar select,
.media-modal input[type="search"],
.media-modal input[type="text"],
.media-modal select {
    background-color: rgba(0, 0, 0, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

.media-sidebar input:focus, 
.media-sidebar textarea:focus,
.media-modal input[type="search"]:focus,
.media-modal select:focus {
    border-color: #eccc93 !important;
    outline: none !important;
}

/* Primary Button in media library ("Use this image", "Select") */
.wp-core-ui .button-primary,
.wp-core-ui .media-button-select {
    background: #eccc93 !important;
    color: #0b0f19 !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 0 20px !important;
    height: 36px !important;
    line-height: 36px !important;
    text-shadow: none !important;
    box-shadow: 0 4px 10px rgba(236, 204, 147, 0.2) !important;
    cursor: pointer !important;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .media-button-select:hover {
    background: #d8b273 !important;
    color: #0b0f19 !important;
}

/* Secondary Button in media library */
.wp-core-ui .button,
.wp-core-ui .button-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
}

.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Dropzone / Upload files area */
.uploader-inline {
    background-color: #0b0f19 !important;
    border: 2px dashed rgba(255, 255, 255, 0.15) !important;
}

.uploader-inline-content h2, 
.uploader-inline-content p {
    color: #ffffff !important;
}

/* Modal close button */
.media-modal-close {
    color: #9ca3af !important;
    background: none !important;
    border: none !important;
}

.media-modal-close:hover {
    color: #eccc93 !important;
}

/* Split-Pane Editor Layout */
.jrg-admin-editor-layout {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.jrg-admin-editor-form-col {
    width: 50% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d121f !important;
    box-sizing: border-box;
    overflow: hidden !important;
}

#jrgAdminEditForm {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.jrg-admin-form-scrollable-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

.jrg-admin-modal-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 20px 30px !important;
    background: #0d121f !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.jrg-admin-editor-preview-col {
    width: 50% !important;
    height: 100% !important;
    background: #0b0f19 !important;
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
}

/* Ensure the mock card matches layout spacing */
.jrg-admin-editor-preview-col #jrgAdminLivePreviewContainer {
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jrg-admin-editor-preview-col .product-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
}

/* Color Mapping Row Styles */
.jrg-color-mapping-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px;
    border-radius: 12px;
    box-sizing: border-box;
    transition: border-color 0.2s, background-color 0.2s;
}

.jrg-color-mapping-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(236, 196, 147, 0.2);
}

.jrg-color-preview-circle {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.jrg-color-mapping-input {
    flex: 1;
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    height: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

.jrg-color-mapping-input:focus {
    border-color: var(--color-accent) !important;
    outline: none;
}

/* Mobile elements hidden by default on desktop */
.jrg-mobile-header-save-btn,
.jrg-mobile-editor-banner,
.jrg-mobile-preview-hint {
    display: none !important;
}

/* ==========================================================================
   Responsive Overrides for Native Mobile Scroll-Down Editor (< 769px)
   ========================================================================== */
@media (max-width: 768px) {
    #jrgAdminEditModal.jrg-admin-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        background: #0b0f19 !important;
    }

    .jrg-admin-modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #0f1524 !important;
        padding: 10px 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        flex-shrink: 0 !important;
    }

    .jrg-admin-modal-header h3 {
        font-size: 13px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #ffffff !important;
        flex: 1 !important;
    }

    .jrg-admin-modal-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .jrg-mobile-header-save-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        background: var(--color-accent) !important;
        color: #0b0f19 !important;
        font-weight: 700 !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(236, 196, 147, 0.35) !important;
    }

    .jrg-zoho-csv-btn {
        font-size: 10px !important;
        padding: 5px 7px !important;
    }

    .jrg-admin-modal-body {
        flex: 1 0 auto !important;
        overflow: visible !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    .jrg-admin-editor-layout {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
    }

    /* Flatten column & form so children can be vertically re-ordered: Form (1) -> Preview (2) -> Actions (3) */
    .jrg-admin-editor-form-col {
        display: contents !important;
    }

    #jrgAdminEditForm {
        display: contents !important;
    }

    .jrg-admin-form-scrollable-content {
        order: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex: none !important;
        padding: 16px 14px !important;
        box-sizing: border-box !important;
    }

    /* Mobile form rows stack vertically */
    .jrg-admin-modal-body form .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .jrg-admin-modal-body form .form-group {
        margin-bottom: 12px !important;
    }

    .jrg-admin-modal-body form input[type="text"],
    .jrg-admin-modal-body form input[type="date"],
    .jrg-admin-modal-body form input[type="email"],
    .jrg-admin-modal-body form input[type="tel"],
    .jrg-admin-modal-body form select,
    .jrg-admin-modal-body form textarea {
        font-size: 16px !important; /* Prevents auto-zoom in iOS Safari */
        min-height: 44px !important;
        box-sizing: border-box !important;
    }

    /* Mobile Jump Banner */
    .jrg-mobile-editor-banner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(236, 196, 147, 0.08) !important;
        border: 1px solid rgba(236, 196, 147, 0.2) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        margin-bottom: 15px !important;
        font-size: 11.5px !important;
        color: #f8fafc !important;
    }

    .jrg-mobile-jump-btn {
        background: rgba(236, 196, 147, 0.2) !important;
        color: var(--color-accent) !important;
        border: 1px solid var(--color-accent) !important;
        border-radius: 6px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    /* Mobile Live Card Preview placed cleanly UNDERNEATH the form fields */
    .jrg-admin-editor-preview-col {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 24px 16px !important;
        background: #080c14 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-left: none !important;
        border-right: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .jrg-admin-editor-preview-col .jrg-admin-preview-col-header {
        width: 100% !important;
        max-width: 320px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-bottom: 10px !important;
    }

    .jrg-admin-editor-preview-col h4 {
        margin: 0 !important;
        color: var(--color-accent) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    .jrg-admin-editor-preview-col .jrg-mobile-preview-hint {
        display: block !important;
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin-top: 4px !important;
    }

    .jrg-admin-editor-preview-col #jrgAdminLivePreviewContainer {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    .jrg-admin-editor-preview-col .product-card {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }

    /* Actions placed cleanly UNDERNEATH the Live Card Preview */
    .jrg-admin-modal-actions {
        order: 3 !important;
        position: static !important;
        bottom: auto !important;
        z-index: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 24px 16px 60px 16px !important;
        background: #0b0f19 !important;
        border-top: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .jrg-admin-modal-actions-right {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .jrg-admin-modal-actions-right .save-btn {
        order: -1 !important; /* Topmost button directly under preview */
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        background: var(--color-accent) !important;
        color: #0b0f19 !important;
        box-shadow: 0 4px 15px rgba(236, 196, 147, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .jrg-admin-modal-actions-right .sold-web-btn,
    .jrg-admin-modal-actions-right .sold-off-btn {
        width: 100% !important;
        min-height: 42px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    .jrg-admin-modal-actions-left {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
        padding-top: 14px !important;
    }

    .jrg-admin-modal-actions-left .jrg-admin-btn {
        width: 100% !important;
        min-height: 40px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Gallery Grid on mobile */
    .jrg-admin-gallery-grid,
    #jrgAdminImagePreviewContainer > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
}

/* ==========================================================================
   Light Mode Admin Editor Live Preview High Contrast Styling
   ========================================================================== */
[data-theme="light"] .jrg-admin-editor-preview-col {
    background: #f8fafc !important;
    border-left: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .jrg-admin-editor-preview-col h4 {
    color: #b47b2b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .jrg-admin-editor-preview-col #jrgAdminPreviewCard,
[data-theme="light"] #jrgAdminPreviewCard {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] #jrgAdminPreviewCard .product-title {
    color: #0f172a !important;
}

[data-theme="light"] #jrgAdminPreviewCard .brand-compatibility-tag {
    color: #b47b2b !important;
    background: rgba(180, 123, 43, 0.1) !important;
    border: 1px solid rgba(180, 123, 43, 0.25) !important;
}

[data-theme="light"] #jrgAdminPreviewCard .product-material {
    color: #475569 !important;
}

[data-theme="light"] #jrgAdminPreviewCard .color-selector-label {
    color: #475569 !important;
}

[data-theme="light"] #jrgAdminPreviewCard .price-tag,
[data-theme="light"] #jrgAdminPreviewCard .price-tag .price-currency {
    color: #0f172a !important;
}

[data-theme="light"] #jrgAdminPreviewCard .badge-size {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] #jrgAdminPreviewCard .add-to-cart-btn {
    background: var(--color-accent) !important;
    color: #ffffff !important;
}

[data-theme="light"] .jrg-admin-modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .jrg-admin-modal-header h3 {
    color: #0f172a !important;
}

[data-theme="light"] .jrg-mobile-editor-banner {
    background: rgba(180, 123, 43, 0.08) !important;
    border: 1px solid rgba(180, 123, 43, 0.25) !important;
    color: #0f172a !important;
}

[data-theme="light"] .jrg-admin-modal-actions {
    background: #ffffff !important;
}



/* ==========================================================================
   14. Legal Policies Q&A Accordion
   ========================================================================== */
.jrg-policies-faq-section {
    font-family: 'Outfit', sans-serif !important;
}

.jrg-faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.jrg-faq-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.jrg-faq-item.active {
    border-color: rgba(236, 204, 147, 0.3);
    background: rgba(236, 204, 147, 0.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.jrg-faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 18px 24px;
    color: var(--color-text-heading, #ffffff);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Outfit', sans-serif !important;
}

.jrg-faq-trigger:hover {
    color: var(--color-accent);
}

.jrg-faq-trigger:focus {
    outline: none;
}

.jrg-faq-icon {
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
    flex-shrink: 0;
}

.jrg-faq-item.active .jrg-faq-icon {
    transform: rotate(180deg);
    color: var(--color-accent);
}

#productView {
    padding-top: 80px !important;
    margin-top: 0 !important;
}
#productView > .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.jrg-faq-container {
    width: min(calc(100vw - 80px), calc(100% - 24px)) !important;
    max-width: calc(100vw - 80px) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.jrg-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.jrg-faq-content-inner {
    width: fit-content;
    max-width: 100%;
    text-align: left;
    padding: 0 24px 18px 24px;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

.jrg-faq-content p,
.jrg-faq-content-inner p {
    padding: 0 0 14px 0;
    margin: 0;
    color: var(--color-text-muted) !important;
    font-size: 14px;
    line-height: 1.6;
    text-align: left !important;
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

.jrg-faq-content p strong,
.jrg-faq-content-inner p strong {
    color: var(--color-text-heading, #ffffff) !important;
}

/* Hidden Product Card & Page Faded Grey Styling (Admin View) */
.product-card.jrg-hidden-product-card {
    background: rgba(30, 41, 59, 0.45) !important;
    border: 1px dashed rgba(148, 163, 184, 0.5) !important;
    opacity: 0.78 !important;
    filter: grayscale(0.25) !important;
}

.product-card.jrg-hidden-product-card:hover {
    opacity: 0.95 !important;
    border-color: rgba(148, 163, 184, 0.9) !important;
    background: rgba(30, 41, 59, 0.65) !important;
}

#productView.jrg-hidden-product-page {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px dashed rgba(148, 163, 184, 0.45) !important;
    border-radius: 24px !important;
    padding: 30px !important;
    margin-top: 15px !important;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

#productView.jrg-hidden-product-page .detail-info-card,
#productView.jrg-hidden-product-page .specs-tabs-container,
#productView.jrg-hidden-product-page .shipping-notice,
#productView.jrg-hidden-product-page .main-preview-container,
#productView.jrg-hidden-product-page .whatsapp-quick-box {
    background: rgba(30, 41, 59, 0.45) !important;
    border: 1px dashed rgba(148, 163, 184, 0.3) !important;
}

@media (max-width: 900px) {
    .jrg-faq-container {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
    }
    
    .jrg-faq-content-inner {
        width: 100% !important;
        padding: 0 16px 16px 16px !important;
    }
    
    .jrg-faq-content-inner p {
        padding-left: 10px !important;
        font-size: 13px !important;
    }
}

#productView > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 40px !important;
}

@media (max-width: 768px) {
    #productView > .container {
        padding: 0 15px !important;
    }
}

#productView > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 40px !important;
}

@media (max-width: 768px) {
    #productView > .container {
        padding: 0 15px !important;
    }
}
/* ==========================================================================
   Admin Modal Legibility & Local Uploader Styling
   ========================================================================== */
.jrg-admin-editor-form-col,
.jrg-admin-editor-form-col label,
.jrg-admin-editor-form-col .form-group label,
.jrg-admin-editor-form-col form label,
.jrg-admin-editor-form-col form input,
.jrg-admin-editor-form-col form select,
.jrg-admin-editor-form-col form option,
.jrg-admin-editor-form-col h1,
.jrg-admin-editor-form-col h2,
.jrg-admin-editor-form-col h3,
.jrg-admin-editor-form-col h4,
.jrg-admin-editor-form-col h5,
.jrg-admin-editor-form-col h6,
.jrg-admin-editor-form-col p,
.jrg-admin-editor-form-col span:not(.jrg-swatch-badge),
.jrg-admin-modal-header h3,
.jrg-admin-modal-body > label,
.jrg-admin-modal-body > .form-group label {
    color: #ffffff !important;
}

.jrg-admin-modal-body form input[type="text"],
.jrg-admin-modal-body form input[type="number"],
.jrg-admin-modal-body form select {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.jrg-admin-modal-header #jrgAdminExportSalesLogBtn {
    color: #0b0f19 !important;
}

/* Daily Flash Sale Glowing Card & Timer (Backward compatibility fallback) */
.product-card.jrg-flash-sale-card {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), inset 0 0 10px rgba(239, 68, 68, 0.15) !important;
    position: relative;
    animation: flashPulse 3s infinite ease-in-out;
}

@keyframes flashPulse {
    0%, 100% { border-color: #ef4444; box-shadow: 0 0 18px rgba(239, 68, 68, 0.4); }
    50% { border-color: #f87171; box-shadow: 0 0 26px rgba(239, 68, 68, 0.65); }
}

/* Daily Sale Glowing Card & Timer (Vibrant Rose-Red) */
.product-card.jrg-daily-sale-card {
    border: 2px solid #f43f5e;
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.4), inset 0 0 10px rgba(244, 63, 94, 0.15);
    position: relative;
    animation: dailyPulse 3s infinite ease-in-out;
}

.product-card.jrg-daily-sale-card:hover {
    border-color: #fb7185;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 26px rgba(244, 63, 94, 0.7);
}

@keyframes dailyPulse {
    0%, 100% { border-color: #f43f5e; box-shadow: 0 0 18px rgba(244, 63, 94, 0.4); }
    50% { border-color: #fb7185; box-shadow: 0 0 26px rgba(244, 63, 94, 0.65); }
}

/* Weekly Deal Glowing Card & Timer (Elegant Amber-Gold) */
.product-card.jrg-weekly-deal-card {
    border: 2px solid #eab308;
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.4), inset 0 0 10px rgba(234, 179, 8, 0.15);
    position: relative;
    animation: weeklyPulse 4s infinite ease-in-out;
}

.product-card.jrg-weekly-deal-card:hover {
    border-color: #facc15;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 26px rgba(234, 179, 8, 0.6);
}

@keyframes weeklyPulse {
    0%, 100% { border-color: #eab308; box-shadow: 0 0 18px rgba(234, 179, 8, 0.3); }
    50% { border-color: #facc15; box-shadow: 0 0 26px rgba(234, 179, 8, 0.55); }
}

/* Special Deal Glowing Card & Timer (Electric Sapphire Blue) */
.product-card.jrg-special-deal-card,
.product-card.jrg-on-sale-card:not(.jrg-daily-sale-card):not(.jrg-weekly-deal-card) {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), inset 0 0 10px rgba(59, 130, 246, 0.15);
    position: relative;
    animation: specialPulse 4s infinite ease-in-out;
}

.product-card.jrg-special-deal-card:hover,
.product-card.jrg-on-sale-card:not(.jrg-daily-sale-card):not(.jrg-weekly-deal-card):hover {
    border-color: #60a5fa;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 26px rgba(59, 130, 246, 0.6);
}

@keyframes specialPulse {
    0%, 100% { border-color: #3b82f6; box-shadow: 0 0 18px rgba(59, 130, 246, 0.3); }
    50% { border-color: #60a5fa; box-shadow: 0 0 26px rgba(59, 130, 246, 0.55); }
}

.badge-flash-sale {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.jrg-discount-corner-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    font-size: 11px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    line-height: 1;
}

.jrg-discount-corner-badge.badge-daily {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.jrg-discount-corner-badge.badge-weekly {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #0b0f19;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.jrg-discount-corner-badge.badge-special {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.price-tag-sale-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.sale-price-display {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
}

.sale-price-display.price-daily {
    color: #f43f5e;
}

.sale-price-display.price-weekly {
    color: #eab308;
}

.sale-price-display.price-special {
    color: #60a5fa;
}

.original-price-cross {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 1.5px;
    opacity: 0.85;
}

.jrg-flash-sale-timer-bar, .jrg-daily-sale-timer-bar {
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: #f87171;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    margin: 8px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.jrg-weekly-deal-timer-bar {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #facc15;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    margin: 8px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.jrg-special-deal-timer-bar {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    margin: 8px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.jrg-flash-timer-display, .jrg-daily-timer-display {
    font-family: monospace;
    font-size: 13px;
    color: #ffffff;
    background: #f43f5e;
    padding: 2px 6px;
    border-radius: 4px;
}

.jrg-weekly-timer-display {
    font-family: monospace;
    font-size: 13px;
    color: #0b0f19;
    background: #eab308;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.jrg-special-timer-display {
    font-family: monospace;
    font-size: 13px;
    color: #ffffff;
    background: #3b82f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.jrg-timer-urgent {
    animation: jrgTimerPulse 1.5s infinite alternate ease-in-out;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.6);
    border: 1px solid #ffffff !important;
}

@keyframes jrgTimerPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 4px rgba(244, 63, 94, 0.4);
    }
    100% {
        transform: scale(1.05);
        box-shadow: 0 0 12px rgba(244, 63, 94, 0.9);
    }
}

#jrgAdminImagePreviewContainer {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#jrgAdminImagePreviewContainer:hover {
    border-color: var(--color-accent) !important;
    background: rgba(0, 0, 0, 0.45) !important;
}
.jrg-swatch-image-control button,
#jrgAdminImagePreviewContainer button {
    cursor: pointer !important;
}

/* ==========================================================================
   Trust Header Banner
   ========================================================================== */
.trust-header-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background: #080b12; /* Deep Obsidian */
    border-bottom: 1px solid rgba(236, 204, 147, 0.12);
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    font-size: 11px;
    font-family: var(--font-primary), sans-serif !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 600;
}

.trust-header-banner.scrolled {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.trust-banner-track {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    justify-content: space-around;
}

.trust-banner-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    padding: 0 20px;
}

.trust-banner-duplicate {
    display: none;
}

.trust-banner-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e2e8f0 !important;
    white-space: nowrap;
}

.trust-banner-item svg {
    width: 13px;
    height: 13px;
    stroke: var(--color-accent) !important;
    stroke-width: 2px;
    fill: none;
    flex-shrink: 0;
}

.trust-banner-gold {
    color: var(--color-accent) !important;
    font-weight: 700;
}

/* Continuous rotating mobile ticker */
@media screen and (max-width: 768px) {
    .trust-header-banner {
        height: 28px !important;
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
        pointer-events: auto !important;
        cursor: default;
    }
    .trust-banner-track {
        display: flex !important;
        width: max-content !important;
        max-width: none !important;
        animation: jrgTrustTicker 24s linear infinite !important;
        will-change: transform;
    }
    .trust-header-banner:hover .trust-banner-track,
    .trust-header-banner:active .trust-banner-track {
        animation-play-state: paused !important;
    }
    .trust-banner-container {
        display: flex !important;
        justify-content: flex-start !important;
        width: max-content !important;
        max-width: none !important;
        gap: 28px !important;
        padding: 0 14px !important;
        flex-shrink: 0 !important;
    }
    .trust-banner-duplicate {
        display: flex !important;
    }
}

@keyframes jrgTrustTicker {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Shift header down by trust banner height */
.main-header {
    top: 32px !important;
}

.main-header.scrolled {
    top: 0 !important;
}

@media screen and (max-width: 768px) {
    .main-header {
        top: 28px !important;
    }
}

/* WordPress Admin Bar Adjustments */
body.admin-bar .trust-header-banner {
    top: 32px !important;
}

body.admin-bar .main-header {
    top: 68px !important;
}

body.admin-bar .main-header.scrolled {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .trust-header-banner {
        top: 46px !important;
    }
    body.admin-bar .main-header {
        top: 82px !important;
    }
    body.admin-bar .main-header.scrolled {
        top: 46px !important;
    }
}


/* Product Page Specific Header Adjustments */
body.product-page-active .trust-header-banner {
    display: none !important;
}
body.product-page-active:not(.admin-bar) .main-header {
    top: 0 !important;
}
body.admin-bar.product-page-active .main-header,
body.admin-bar.product-page-active .main-header.scrolled {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar.product-page-active .main-header,
    body.admin-bar.product-page-active .main-header.scrolled {
        top: 46px !important;
    }
}

/* ==========================================================================
   Customer Feedback Carousel (Facebook Verified Reviews)
   ========================================================================== */
.fb-reviews-section {
    padding: 80px 0;
    background: rgba(18, 24, 38, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.feedback-grid {
    display: flex;
    gap: 24px;
    margin: 0;
    width: 100%;
}

.feedback-card {
    background: rgba(30, 41, 59, 0.45); /* Elegant glassmorphic dark background */
    border: 1px solid rgba(255, 255, 255, 0.05); /* Clean border */
    border-radius: 4px; /* Minimal 4px rounded corners */
    padding: 24px; /* Generous layout / whitespace */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 1024px) {
    /* JS handles sizing */
}

@media screen and (max-width: 640px) {
    .feedback-card {
        padding: 20px;
    }
}

.feedback-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    border-color: var(--color-accent);
}

.feedback-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.feedback-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feedback-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.feedback-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.feedback-username {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff !important; /* Force clean white text */
    margin: 0;
    font-family: var(--font-primary), sans-serif !important;
}

.feedback-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4) !important; /* Muted light gray date */
    margin-top: 2px;
}

.feedback-stars {
    display: flex;
    gap: 2px;
    align-items: center;
}

.feedback-star {
    width: 13px;
    height: 13px;
    fill: #f59e0b !important; /* Muted orange/gold star */
    color: #f59e0b !important;
}

.feedback-star.hollow {
    fill: transparent !important;
    color: rgba(255, 255, 255, 0.15) !important; /* Clean outline for empty stars */
}

.feedback-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 14px;
}

.feedback-tag {
    background: rgba(255, 255, 255, 0.05); /* Modern translucent badge */
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 12px;
    font-family: var(--font-primary), sans-serif !important;
}

.feedback-comment {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 14px;
    font-style: italic;
    font-family: var(--font-primary), sans-serif !important;
}

.feedback-platform-tag {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    height: 16px;
    font-family: var(--font-primary), sans-serif !important;
}

.feedback-platform-tag.facebook {
    background: rgba(24, 119, 242, 0.15) !important;
    color: #1877f2 !important;
    border: 1px solid rgba(24, 119, 242, 0.25);
}

.feedback-platform-tag.yaga {
    background: rgba(255, 118, 99, 0.15) !important;
    color: #ff7663 !important;
    border: 1px solid rgba(255, 118, 99, 0.25);
}

/* Light Theme Reviews Section & Cards */
html[data-theme="light"] .fb-reviews-section {
    background: #f1f5f9 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .feedback-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .feedback-card:hover {
    border-color: var(--color-accent, #b47b2b) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .feedback-username {
    color: #0f172a !important;
}

html[data-theme="light"] .feedback-date {
    color: #64748b !important;
}

html[data-theme="light"] .feedback-comment {
    color: #334155 !important;
}

html[data-theme="light"] .feedback-tag {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .feedback-tags {
    border-top-color: #e2e8f0 !important;
}

html[data-theme="light"] .feedback-star.hollow {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   Carousel Framework Utilities
   ========================================================================== */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1600px;
    width: 100%;
    margin: 40px auto 0 auto;
    padding: 0 clamp(20px, 3.5vw, 60px);
    box-sizing: border-box;
}

.carousel-viewport {
    overflow: hidden;
    width: 100%;
    container-type: inline-size;
}

.carousel-track {
    display: flex;
    gap: 24px;
    width: max-content;
    transition: transform 0.5s ease-in-out;
}

.carousel-nav {
    display: flex;
}

.carousel-nav:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #0b0f19;
    box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.4);
}

.carousel-nav.prev {
    left: 0;
}

.carousel-nav.next {
    right: 0;
}

.carousel-nav svg {
    width: 18px;
    height: 18px;
}

/* Responsiveness */
@media screen and (max-width: 1024px) {
    .carousel-wrapper {
        padding: 0 48px;
    }
}

@media screen and (max-width: 640px) {
    .carousel-wrapper {
        padding: 0 36px;
    }
    .carousel-nav {
        width: 36px;
        height: 36px;
    }
    .carousel-nav svg {
        width: 14px;
        height: 14px;
    }
    .feedback-card {
        padding: 20px;
    }
}

/* Sold Goods Section & Cards */
.sold-goods-section {
    padding: 60px 0;
    background: var(--bg-primary, #0b0f19);
    border-top: 1px solid var(--border-subtle);
}

.sold-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sold-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.sold-badge {
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sold-image-container {
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 12px 0;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.sold-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.sold-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main, #ffffff);
    margin: 0 0 10px 0;
    line-height: 1.35;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sold-trust-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sold-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-accent, #ecc493);
}

.sold-rating {
    color: #f59e0b;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Light Theme Sold Cards */
html[data-theme="light"] .sold-goods-section {
    background: var(--bg-primary, #f8fafc) !important;
    border-top: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .sold-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .sold-card:hover {
    border-color: var(--color-accent, #b47b2b) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .sold-image-container {
    background: #f8fafc !important;
}

html[data-theme="light"] .sold-title {
    color: #0f172a !important;
}

html[data-theme="light"] .sold-price {
    color: #0f172a !important;
}

html[data-theme="light"] .sold-trust-row {
    border-top-color: #e2e8f0 !important;
}

/* ==========================================================================
   Weekly Featured Showcase & Category Accordions
   ========================================================================== */
.featured-showcase-section {
    padding: 60px 0;
    background: rgba(18, 24, 38, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.featured-grid {
    max-width: 100%;
    margin: 30px auto 0 auto;
}

.category-accordions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1600px;
    width: 100%;
    margin: 30px auto 0 auto;
}

.accordion-item {
    background: rgba(30, 41, 59, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(30, 41, 59, 0.3);
}

.accordion-header {
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.accordion-title {
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.accordion-icon {
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
}

.accordion-item.open {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(30, 41, 59, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.accordion-item.open .accordion-icon {
    transform: rotate(180deg);
    color: var(--color-accent);
}

.accordion-content {
    display: none;
    padding: 0 28px 32px 28px;
}

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

.accordion-item.open .accordion-content {
    display: block;
    animation: accordionFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.accordion-content .sub-categories {
    margin-top: 5px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsiveness adjustments for Featured Cards and grids */
@media screen and (max-width: 1024px) {
    .accordion-header {
        padding: 20px 24px;
    }
    .accordion-content {
        padding: 0 24px 24px 24px;
    }
}

@media screen and (max-width: 480px) {
    .accordion-title {
        font-size: 16px;
    }
}

/* ==========================================================================
   Live Search Results Showcase Block & Clear Button
   ========================================================================== */
.clear-search-btn {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 24px;
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.clear-search-btn:hover {
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

.search-view-more-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.search-view-more-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    color: var(--color-accent);
}

/* Ensure search results grid has responsive column definitions */
#searchResultGrid {
    /* Inherits unified responsive 7-column layout */
}

/* ==========================================================================
   Category Grid Selector Layout
   ========================================================================== */
.jrg-category-grid-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 1360px;
    width: 100%;
    margin: 0 auto 35px auto;
}

.jrg-cat-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    flex: 1 1 190px;
    max-width: 280px;
    background: rgba(30, 41, 59, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap !important;
}

.jrg-cat-card .jrg-cat-label {
    white-space: nowrap !important;
    display: inline-block;
}

.jrg-cat-card:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    color: #ffffff;
}

.jrg-cat-card.active {
    background: var(--color-accent) !important;
    color: #0b0f19 !important;
    border-color: var(--color-accent) !important;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.35);
}

.jrg-cat-card .jrg-cat-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.jrg-cat-card:hover .jrg-cat-icon {
    transform: scale(1.15);
}

.jrg-category-content-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    margin-top: 10px !important;
}

@media screen and (max-width: 868px) {
    .jrg-category-grid-selector {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 4px 12px 14px 12px !important;
        margin: 0 auto 12px auto !important;
        scrollbar-width: none !important;
        justify-content: flex-start !important;
    }
    .jrg-category-grid-selector::-webkit-scrollbar {
        display: none !important;
    }
    .jrg-cat-card {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
        border-radius: 24px !important;
        gap: 8px !important;
        min-height: 48px !important;
        max-width: 140px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }
    /* Block 1: Icon centered top to bottom */
    .jrg-cat-card .jrg-cat-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        font-size: 20px !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
        width: 24px !important;
        height: 24px !important;
    }
    /* Block 2: Text centered on its own box in the pill */
    .jrg-cat-card .jrg-cat-label {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.15 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        max-width: 78px !important;
        flex: 1 !important;
    }
    .jrg-category-content-panel {
        padding: 14px !important;
        border-radius: 16px !important;
        margin-top: 10px !important;
    }
}

/* --- Catalogue Layout Wrapper & Fit Finder Sidebar --- */
.jrg-catalogue-layout-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-top: 20px;
}

.jrg-catalogue-layout-wrapper .product-grid,
.jrg-catalogue-layout-wrapper #jrgActiveProductGrid {
    flex: 1;
    min-width: 0;
    width: 100%;
    margin-top: 0 !important;
}

.jrg-fit-finder-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: rgba(15, 23, 42, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: sticky;
    top: 100px;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.jrg-fit-finder-sidebar h3 {
    color: var(--color-accent);
    font-size: 15px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.jrg-fit-finder-sidebar p {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.55;
    margin-top: 0;
    margin-bottom: 16px;
}

.jrg-fit-finder-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jrg-fit-finder-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jrg-fit-finder-group label {
    color: #888888;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jrg-fit-finder-group select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.jrg-fit-finder-group select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.2);
}

.jrg-fit-finder-group select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.05);
    color: #666666;
}

.jrg-fit-finder-result {
    padding: 12px;
    border-radius: 8px;
    background: rgba(163, 230, 53, 0.08);
    border: 1px solid rgba(163, 230, 53, 0.25);
    font-size: 12.5px;
    line-height: 1.45;
    color: #a3e635;
    white-space: pre-line;
    box-sizing: border-box;
}

.jrg-fit-finder-reset {
    width: 100%;
    height: 38px;
    font-size: 12.5px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.jrg-fit-finder-reset:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Responsive adjustment for Fit Finder */
@media screen and (max-width: 1024px) {
    .jrg-catalogue-layout-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    .jrg-fit-finder-sidebar {
        width: 100% !important;
        position: static !important;
        top: 0;
    }
}

/* Custom Dropdown List for Strap Fit Finder */
.jrg-fit-finder-results-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: #111622;
    border: 1px solid rgba(236, 204, 147, 0.15);
    border-radius: 8px;
    z-index: 9999;
    margin-top: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    scrollbar-width: thin;
}

.jrg-fit-finder-results-list::-webkit-scrollbar {
    width: 6px;
}

.jrg-fit-finder-results-list::-webkit-scrollbar-track {
    background: transparent;
}

.jrg-fit-finder-results-list::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 3px;
}

.jrg-fit-finder-results-list .result-item {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--color-text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    text-align: left;
}

.jrg-fit-finder-results-list .result-item:last-child {
    border-bottom: none;
}

.jrg-fit-finder-results-list .result-item:hover {
    background: rgba(236, 204, 147, 0.12);
    color: var(--color-accent);
}

.jrg-fit-finder-results-list .no-results {
    padding: 12px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}

/* POPIA Consent Banner */
.jrg-popia-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    right: 24px;
    max-width: 480px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 999999;
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.jrg-popia-banner.jrg-popia-visible {
    opacity: 1;
    transform: translateY(0);
}

.jrg-popia-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jrg-popia-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #e2e8f0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: left;
}

.jrg-popia-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.jrg-popia-link {
    font-size: 13px;
    font-weight: 500;
    color: #ecc493;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.jrg-popia-link:hover {
    color: #ffffff;
}

.jrg-popia-btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.jrg-popia-btn-accept {
    background: #ecc493;
    color: #0f172a;
}

.jrg-popia-btn-accept:hover {
    background: #ffffff;
    box-shadow: 0 0 15px rgba(236, 196, 147, 0.4);
}

@media screen and (max-width: 520px) {
    .jrg-popia-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        padding: 16px;
    }
    
    .jrg-popia-text {
        font-size: 12.5px;
    }
    
    .jrg-popia-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        text-align: center;
    }
    
    .jrg-popia-link {
        order: 2;
    }
    
    .jrg-popia-btn {
        order: 1;
        width: 100%;
    }
}

/* Pudo Locker suggestions & styling */
.pudo-suggestion-item:hover {
    background: rgba(236, 204, 147, 0.12) !important;
    color: var(--color-accent) !important;
}
.clear-cart-btn {
    transition: all 0.2s ease-in-out;
}
.clear-cart-btn:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

.pudo-suggestions-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10000;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    margin-top: 4px;
}
.pudo-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #e2e8f0;
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-align: left;
}
.pudo-suggestion-item:last-child {
    border-bottom: none;
}

/* ==========================================================================
   26. Complete Site-Wide Dual-Theme (Light/Dark) Parity & Text Contrast System
   WCAG 2.1 AA / AAA Compliance: Pure Porcelain & Rich Obsidian Slate
   ========================================================================== */

/* 1. Global Form Inputs, Textareas & Selects in Light Mode */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: #b47b2b !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(180, 123, 43, 0.16) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    opacity: 1 !important;
}
html[data-theme="light"] select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* 2. Checkout Modal & Payment Accordion */
html[data-theme="light"] .checkout-modal,
html[data-theme="light"] #checkoutModal {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.22) !important;
}
html[data-theme="light"] .checkout-modal h2,
html[data-theme="light"] .checkout-modal h3,
html[data-theme="light"] .checkout-modal h4,
html[data-theme="light"] #checkoutModalBody h2,
html[data-theme="light"] #checkoutModalBody h3,
html[data-theme="light"] #checkoutModalBody h4 {
    color: #0f172a !important;
}
html[data-theme="light"] #checkoutModalBody label { color: #1e293b !important; }
html[data-theme="light"] #checkoutModalBody p { color: #475569 !important; }
html[data-theme="light"] #checkoutModalBody strong { color: #0f172a !important; }
html[data-theme="light"] #checkoutModalBody div[style*="background: rgba(255,255,255,0.03)"],
html[data-theme="light"] #checkoutModalBody div[style*="background: rgba(255, 255, 255, 0.03)"] {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}
html[data-theme="light"] #checkoutModalBody div[style*="color: #cbd5e1"],
html[data-theme="light"] #checkoutModalBody span[style*="color: #cbd5e1"] {
    color: #334155 !important;
}
html[data-theme="light"] #checkoutModalBody div[style*="background: rgba(255,255,255,0.02)"],
html[data-theme="light"] #checkoutModalBody div[style*="background: rgba(255, 255, 255, 0.02)"] {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}
html[data-theme="light"] .shipping-selection-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #jrgPudoLockerGroup {
    background: rgba(16, 185, 129, 0.06) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
}
html[data-theme="light"] #jrgDoorstepAddressGroup {
    background: rgba(59, 130, 246, 0.06) !important;
    border: 1.5px solid rgba(59, 130, 246, 0.3) !important;
}
html[data-theme="light"] #jrgCollectionDetailsBox {
    background: rgba(180, 123, 43, 0.08) !important;
    border: 1px solid rgba(180, 123, 43, 0.25) !important;
    color: #334155 !important;
}
html[data-theme="light"] .checkout-accordion-toggle {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] #collapsibleManualForm {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #jrgEftDetailsBox,
html[data-theme="light"] #jrgCashDetailsBox,
html[data-theme="light"] #jrgCardDetailsBox {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] #jrgEftDetailsBox span { color: #0f172a !important; }
html[data-theme="light"] #jrgEftDetailsBox span[style*="color:#888"],
html[data-theme="light"] #jrgEftDetailsBox span[style*="color: #888"] {
    color: #64748b !important;
}
html[data-theme="light"] #jrgPudoLockerSuggestions,
html[data-theme="light"] #jrgCartPudoLockerSuggestions,
html[data-theme="light"] .pudo-suggestions-box {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16) !important;
}
html[data-theme="light"] #jrgPudoLockerSuggestions div,
html[data-theme="light"] #jrgCartPudoLockerSuggestions div,
html[data-theme="light"] .pudo-suggestion-item {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
html[data-theme="light"] #jrgPudoLockerSuggestions div:hover,
html[data-theme="light"] #jrgCartPudoLockerSuggestions div:hover,
html[data-theme="light"] .pudo-suggestion-item:hover {
    background: rgba(180, 123, 43, 0.1) !important;
    color: #b47b2b !important;
}

/* 3. Cart Drawer Comprehensive Text & Card Contrast */
html[data-theme="light"] .cart-drawer { background: #f8fafc !important; }
html[data-theme="light"] .cart-drawer-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .cart-drawer-left-pane { background: #ffffff !important; }
html[data-theme="light"] .cart-drawer-right-pane {
    background: #f8fafc !important;
    border-left: 1.5px solid #cbd5e1 !important;
}
html[data-theme="light"] .cart-header-inner h3,
html[data-theme="light"] .cart-item-title,
html[data-theme="light"] .cart-pane-section-header,
html[data-theme="light"] .cart-drawer label {
    color: #0f172a !important;
}
html[data-theme="light"] .cart-item-desc,
html[data-theme="light"] .cart-summary-row span,
html[data-theme="light"] .cart-item-meta {
    color: #475569 !important;
}
html[data-theme="light"] .cart-item-price,
html[data-theme="light"] .cart-summary-row strong {
    color: #0f172a !important;
}
html[data-theme="light"] .cart-item-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .cart-breakdown-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .cart-empty-state { color: #64748b !important; }
html[data-theme="light"] #cartPasswordContainer {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #cartPasswordContainer label { color: #0f172a !important; }

/* 4. Customer Portal, Order Tracking & 2FA / Authentication */
html[data-theme="light"] .jrg-customer-portal { color: #0f172a !important; }
html[data-theme="light"] .jrg-customer-portal h1,
html[data-theme="light"] .jrg-customer-portal strong { color: #0f172a !important; }
html[data-theme="light"] .jrg-customer-portal p,
html[data-theme="light"] .jrg-customer-portal span { color: #334155 !important; }
html[data-theme="light"] #jrgOrdersContainer > div {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}
html[data-theme="light"] .jrg-unified-login-container {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1) !important;
}
html[data-theme="light"] .jrg-unified-login-container h2,
html[data-theme="light"] .jrg-unified-login-container h3,
html[data-theme="light"] #jrg-unified-loginform label,
html[data-theme="light"] #jrg-code-label {
    color: #0f172a !important;
}
html[data-theme="light"] .jrg-unified-login-container p,
html[data-theme="light"] .jrg-unified-login-container article p {
    color: #475569 !important;
}
html[data-theme="light"] #jrg_2fa_code {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 2px solid #b47b2b !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* 5. Subpages & Policies (Terms, Privacy, Support, Merchant) */
html[data-theme="light"] .jrg-subpage-content-wrap,
html[data-theme="light"] .jrg-subpage-title {
    color: #0f172a !important;
}
html[data-theme="light"] .jrg-policy-block {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .jrg-policy-block h2 {
    color: #0f172a !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] .jrg-policy-block h3 { color: #b47b2b !important; }
html[data-theme="light"] .jrg-policy-block p,
html[data-theme="light"] .jrg-policy-block ul,
html[data-theme="light"] .jrg-policy-block li,
html[data-theme="light"] .jrg-policy-block td {
    color: #334155 !important;
}
html[data-theme="light"] .jrg-policy-block table th {
    color: #0f172a !important;
    border-bottom: 2px solid #cbd5e1 !important;
}
html[data-theme="light"] .jrg-policy-block table td {
    border-bottom: 1px solid #f1f5f9 !important;
}
html[data-theme="light"] .jrg-conversational-qa {
    border-top: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .jrg-conversational-qa h2 { color: #0f172a !important; }
html[data-theme="light"] .jrg-conversational-qa h3 { color: #b47b2b !important; }
html[data-theme="light"] .jrg-conversational-qa p { color: #475569 !important; }

/* 6. Fit Finder, Accordions & Device Compatibility */
html[data-theme="light"] .jrg-fit-finder-sidebar {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .jrg-fit-finder-sidebar h3 { color: #0f172a !important; }
html[data-theme="light"] .jrg-fit-finder-sidebar p,
html[data-theme="light"] .jrg-fit-finder-group label { color: #475569 !important; }
html[data-theme="light"] .jrg-fit-finder-results-list {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] .jrg-fit-finder-results-list .result-item {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
html[data-theme="light"] .jrg-fit-finder-results-list .result-item:hover {
    background: #f8fafc !important;
    color: #b47b2b !important;
}
html[data-theme="light"] .brand-group-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .brand-device-list li { color: #334155 !important; }
html[data-theme="light"] .brand-count-badge {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

/* 7. Popups, Dialogs, Modals (Admin, Sold, FlashShot, Zoho) */
html[data-theme="light"] #jrgSoldSelectModal > div {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2) !important;
}
html[data-theme="light"] #jrgSoldSelectModal h3 { color: #0f172a !important; }
html[data-theme="light"] #jrgSoldSelectModal p { color: #475569 !important; }
html[data-theme="light"] #jrgFlashShotModal {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2) !important;
}
html[data-theme="light"] #jrgFlashShotModal h2,
html[data-theme="light"] #jrgFlashShotModal h3,
html[data-theme="light"] #jrgFlashShotModal h4 {
    color: #0f172a !important;
}
html[data-theme="light"] #jrgFlashShotModal p,
html[data-theme="light"] #jrgFlashShotModal span {
    color: #475569 !important;
}
html[data-theme="light"] #jrgFsRawBox,
html[data-theme="light"] #jrgFsOutputBox {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
html[data-theme="light"] #jrgZohoConfigModal {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
}
html[data-theme="light"] #jrgZohoConfigModal h3 { color: #0f172a !important; }
html[data-theme="light"] #jrgZohoConfigModal p,
html[data-theme="light"] #jrgZohoConfigModal label { color: #334155 !important; }
html[data-theme="light"] #jrgAdminEditModal,
html[data-theme="light"] .jrg-admin-modal {
    background: #f8fafc !important;
    color: #0f172a !important;
}
html[data-theme="light"] .jrg-admin-modal-backdrop {
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
html[data-theme="light"] .jrg-admin-modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .jrg-admin-modal-header h3 { 
    color: #0f172a !important; 
}
html[data-theme="light"] .close-admin-modal-btn {
    color: #64748b !important;
}
html[data-theme="light"] .close-admin-modal-btn:hover {
    color: #0f172a !important;
}
html[data-theme="light"] .jrg-admin-editor-form-col {
    background: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .jrg-admin-form-scrollable-content {
    background: #f8fafc !important;
}
html[data-theme="light"] .jrg-admin-modal-body form label { 
    color: #1e293b !important; 
    font-weight: 600 !important;
}
html[data-theme="light"] .jrg-admin-modal-body form input[type="text"],
html[data-theme="light"] .jrg-admin-modal-body form input[type="number"],
html[data-theme="light"] .jrg-admin-modal-body form input[type="date"],
html[data-theme="light"] .jrg-admin-modal-body form input[type="email"],
html[data-theme="light"] .jrg-admin-modal-body form input[type="tel"],
html[data-theme="light"] .jrg-admin-modal-body form textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
}
html[data-theme="light"] .jrg-admin-modal-body form input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}
html[data-theme="light"] .jrg-admin-modal-body form input:focus,
html[data-theme="light"] .jrg-admin-modal-body form select:focus {
    outline: none !important;
    border-color: #b47b2b !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 3px rgba(180, 123, 43, 0.15) !important;
}

/* Explicit styling for select dropdowns and options to prevent white-on-white */
html[data-theme="light"] .jrg-admin-modal-body form select,
html[data-theme="light"] #jrgAdminEditCategory,
html[data-theme="light"] #jrgAdminEditSubCategory,
html[data-theme="light"] #jrgAdminEditBrand,
html[data-theme="light"] #jrgAdminEditCondition,
html[data-theme="light"] #jrgAdminEditType,
html[data-theme="light"] #jrgAdminZohoVendor,
html[data-theme="light"] .jrg-swatch-slot-select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
}
html[data-theme="light"] .jrg-admin-modal-body form select option,
html[data-theme="light"] #jrgAdminEditCategory option,
html[data-theme="light"] #jrgAdminEditSubCategory option,
html[data-theme="light"] #jrgAdminEditBrand option,
html[data-theme="light"] #jrgAdminEditCondition option,
html[data-theme="light"] #jrgAdminEditType option,
html[data-theme="light"] #jrgAdminZohoVendor option,
html[data-theme="light"] .jrg-swatch-slot-select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html[data-theme="light"] .jrg-admin-modal-actions {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #jrgAdminImagePreviewContainer {
    background: #f1f5f9 !important;
    border: 1.5px dashed #cbd5e1 !important;
}
html[data-theme="light"] #jrgAdminImagePreviewPlaceholder {
    color: #64748b !important;
}
html[data-theme="light"] #jrgAdminBrowseMedia {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .jrg-color-mapping-row {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .jrg-color-mapping-input,
html[data-theme="light"] .jrg-color-name-input {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .jrg-sale-control-group {
    background: #ffffff !important;
    border: 1.5px dashed #cbd5e1 !important;
}
html[data-theme="light"] #jrgAdminZohoSection {
    border-top: 1px dashed #cbd5e1 !important;
}
html[data-theme="light"] #jrgAdminZohoSection h4 {
    color: #b47b2b !important;
}
html[data-theme="light"] #jrgAdminNewSupplierFields {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] #jrgAdminNewSupplierFields label {
    color: #b47b2b !important;
}
html[data-theme="light"] #jrgAdminHideModalBtn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] #jrgSyncZohoVendorsBtn {
    background: rgba(180, 123, 43, 0.1) !important;
    border: 1px solid rgba(180, 123, 43, 0.3) !important;
    color: #b47b2b !important;
}
html[data-theme="light"] #jrgAdminNameCustomDropdown {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme="light"] .jrg-custom-suggestion-item {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
html[data-theme="light"] .jrg-custom-suggestion-item:hover,
html[data-theme="light"] .jrg-custom-suggestion-item.selected {
    background: #f1f5f9 !important;
    color: #b47b2b !important;
}

/* 8. POPIA Banner, Toasts & Lightbox */
html[data-theme="light"] .jrg-popia-banner {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme="light"] .jrg-popia-text { color: #334155 !important; }
html[data-theme="light"] .jrg-popia-btn-accept {
    background: #b47b2b !important;
    color: #ffffff !important;
}
html[data-theme="light"] .toast-notification {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #b47b2b !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme="light"] .jrg-lightbox-counter,
html[data-theme="light"] .jrg-lb-btn,
html[data-theme="light"] .jrg-lb-nav {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

/* 9. SSR Product & Category Pages */
html[data-theme="light"] .product-ssr-container,
html[data-theme="light"] div[style*="background: rgba(40,40,40,0.6)"],
html[data-theme="light"] div[style*="background: rgba(40,40,40,0.4)"] {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .product-ssr-container h1,
html[data-theme="light"] .product-ssr-container h2,
html[data-theme="light"] .product-ssr-container h3,
html[data-theme="light"] .product-ssr-container .price,
html[data-theme="light"] .app-header span {
    color: #0f172a !important;
}
html[data-theme="light"] .app-header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 10. On-Sale & Promotional Product Cards in Light Mode (Eye-Catching Glow) */
/* Rose-Red Glowing Border for Daily Specials, Flash Sales & Urgent Deals */
html[data-theme="light"] .product-card.jrg-daily-sale-card,
html[data-theme="light"] .product-card.jrg-flash-sale-card,
html[data-theme="light"] .product-card.sale-urgent,
html[data-theme="light"] .product-card:has(.badge-flash-sale),
html[data-theme="light"] .product-card:has(.jrg-daily-sale-timer-bar),
html[data-theme="light"] .product-card:has(.jrg-flash-sale-timer-bar) {
    background: #ffffff !important;
    border: 2px solid #e11d48 !important;
    box-shadow: 0 0 18px rgba(225, 29, 72, 0.28), 0 6px 20px rgba(15, 23, 42, 0.08) !important;
    position: relative;
    animation: lightDailyPulse 3s infinite ease-in-out;
}

html[data-theme="light"] .product-card.jrg-daily-sale-card:hover,
html[data-theme="light"] .product-card.jrg-flash-sale-card:hover,
html[data-theme="light"] .product-card.sale-urgent:hover,
html[data-theme="light"] .product-card:has(.badge-flash-sale):hover,
html[data-theme="light"] .product-card:has(.jrg-daily-sale-timer-bar):hover,
html[data-theme="light"] .product-card:has(.jrg-flash-sale-timer-bar):hover {
    border-color: #f43f5e !important;
    box-shadow: 0 0 28px rgba(225, 29, 72, 0.45), 0 12px 32px rgba(15, 23, 42, 0.14) !important;
}

@keyframes lightDailyPulse {
    0%, 100% { border-color: #e11d48; box-shadow: 0 0 16px rgba(225, 29, 72, 0.28), 0 4px 16px rgba(15, 23, 42, 0.06); }
    50% { border-color: #f43f5e; box-shadow: 0 0 26px rgba(225, 29, 72, 0.5), 0 6px 22px rgba(15, 23, 42, 0.1); }
}

/* Warm Gold Glowing Border for Weekly Deals, Direct Sales & Discounts */
html[data-theme="light"] .product-card.jrg-weekly-deal-card,
html[data-theme="light"] .product-card.jrg-special-deal-card,
html[data-theme="light"] .product-card.jrg-on-sale-card,
html[data-theme="light"] .product-card.sale-warm,
html[data-theme="light"] .product-card.has-sale-timer,
html[data-theme="light"] .product-card[data-sale="true"],
html[data-theme="light"] .product-card:has(.badge-sale),
html[data-theme="light"] .product-card:has(.jrg-weekly-deal-timer-bar) {
    background: #ffffff !important;
    border: 2px solid #b47b2b !important;
    box-shadow: 0 0 18px rgba(180, 123, 43, 0.26), 0 6px 20px rgba(15, 23, 42, 0.08) !important;
    position: relative;
    animation: lightWeeklyPulse 4s infinite ease-in-out;
}

html[data-theme="light"] .product-card.jrg-weekly-deal-card:hover,
html[data-theme="light"] .product-card.jrg-special-deal-card:hover,
html[data-theme="light"] .product-card.jrg-on-sale-card:hover,
html[data-theme="light"] .product-card.sale-warm:hover,
html[data-theme="light"] .product-card.has-sale-timer:hover,
html[data-theme="light"] .product-card[data-sale="true"]:hover,
html[data-theme="light"] .product-card:has(.badge-sale):hover,
html[data-theme="light"] .product-card:has(.jrg-weekly-deal-timer-bar):hover {
    border-color: #d97706 !important;
    box-shadow: 0 0 28px rgba(180, 123, 43, 0.45), 0 12px 32px rgba(15, 23, 42, 0.14) !important;
}

@keyframes lightWeeklyPulse {
    0%, 100% { border-color: #b47b2b; box-shadow: 0 0 14px rgba(180, 123, 43, 0.24), 0 4px 16px rgba(15, 23, 42, 0.06); }
    50% { border-color: #d97706; box-shadow: 0 0 24px rgba(180, 123, 43, 0.46), 0 6px 22px rgba(15, 23, 42, 0.1); }
}

/* Light Mode Sale Badges & High-Contrast Timer Bars */
html[data-theme="light"] .badge-sale {
    background: linear-gradient(135deg, #b47b2b, #8a5a1c) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(180, 123, 43, 0.35) !important;
}
html[data-theme="light"] .badge-flash-sale {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35) !important;
}
html[data-theme="light"] .jrg-daily-sale-timer-bar,
html[data-theme="light"] .jrg-flash-sale-timer-bar {
    background: #fff1f2 !important;
    border: 1.5px solid #fecdd3 !important;
    color: #be123c !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .jrg-daily-timer-display,
html[data-theme="light"] .jrg-flash-timer-display {
    background: #e11d48 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .jrg-weekly-deal-timer-bar {
    background: #fefce8 !important;
    border: 1.5px solid #fef08a !important;
    color: #854d0e !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .jrg-weekly-timer-display {
    background: #b47b2b !important;
    color: #ffffff !important;
}

/* Light Mode Footer Partners & Banking Ecosystem Showcase */
html[data-theme="light"] .footer-partners-section {
    border-top: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .footer-partners-badge {
    background: rgba(180, 123, 43, 0.1) !important;
    border-color: rgba(180, 123, 43, 0.25) !important;
    color: #92400e !important;
}
html[data-theme="light"] .footer-partners-title {
    color: #0f172a !important;
}
html[data-theme="light"] .footer-partners-desc {
    color: #475569 !important;
}
html[data-theme="light"] .footer-partners-desc strong {
    color: #0f172a !important;
}
html[data-theme="light"] .footer-partner-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .footer-partner-card:hover {
    border-color: #b47b2b !important;
    box-shadow: 0 8px 24px rgba(180, 123, 43, 0.15) !important;
}
html[data-theme="light"] .partner-logo-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] .partner-name {
    color: #0f172a !important;
}
html[data-theme="light"] .partner-details {
    color: #475569 !important;
}
html[data-theme="light"] .partner-details strong {
    color: #0f172a !important;
}
html[data-theme="light"] .footer-trust-strip {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .trust-strip-label {
    color: #92400e !important;
}
html[data-theme="light"] .trust-pill {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

/* Light Mode Cart Drawer Trust Marquee & Trust Marks */
html[data-theme="light"] .cart-trust-marquee {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .marquee-item {
    color: #334155 !important;
}
html[data-theme="light"] .marquee-divider {
    color: #b47b2b !important;
}
html[data-theme="light"] .cart-checkout-trust-wrap {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .cart-checkout-trust-label {
    color: #92400e !important;
}
html[data-theme="light"] .cart-partner-logo-pill {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] .cart-checkout-trust-footnote {
    color: #64748b !important;
}

/* Light Mode Cart Payment Selection Pills */
html[data-theme="light"] .cart-payment-pill-btn {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}
html[data-theme="light"] .cart-payment-pill-btn:hover {
    background: #f1f5f9 !important;
    border-color: #b47b2b !important;
}
html[data-theme="light"] .cart-payment-pill-btn.active {
    background: rgba(180, 123, 43, 0.1) !important;
    border-color: #b47b2b !important;
    color: #92400e !important;
    box-shadow: 0 0 10px rgba(180, 123, 43, 0.15) !important;
}
html[data-theme="light"] .cart-payment-pill-btn.active[data-method="float"] {
    background: rgba(239, 15, 96, 0.08) !important;
    border-color: #ef0f60 !important;
    color: #ef0f60 !important;
    box-shadow: 0 0 10px rgba(239, 15, 96, 0.15) !important;
}
html[data-theme="light"] .cart-payment-pill-btn.active[data-method="eft"] {
    background: rgba(2, 132, 199, 0.08) !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.15) !important;
}

/* ==========================================================================
   AUTHORITATIVE SITE-WIDE DUAL-THEME COLOR SYSTEM & CONTRAST AUTOMATION
   Enforces absolute standard color palettes for Light & Dark modes.
   Any box/container automatically adopts correct contrast:
   - Light Mode: Porcelain background (#ffffff/#f8fafc) with Obsidian slate text (#0f172a).
   - Dark Mode: Obsidian background (#0b0f19/#121826) with Crisp off-white text (#f3f4f6).
   Zero rogue hardcoded colors, zero manual element fixes needed.
   ========================================================================== */

/* Universal Light Mode Contrast Enforcement */
html[data-theme="light"] {
    --bg-primary: #f8fafc !important;
    --bg-secondary: #ffffff !important;
    --bg-card: #ffffff !important;
    --border-card: #e2e8f0 !important;
    --color-accent: #b47b2b !important;
    --color-text-main: #0f172a !important;
    --color-text-muted: #475569 !important;
    --color-text-heading: #0f172a !important;
    --color-text-inverse: #ffffff !important;
}

/* Any box, container, or card in Light Mode */
html[data-theme="light"] div[style*="background: rgba(0, 0, 0,"],
html[data-theme="light"] div[style*="background:rgba(0,0,0,"],
html[data-theme="light"] div[style*="background: rgba(255, 255, 255, 0.0"],
html[data-theme="light"] div[style*="background:rgba(255,255,255,0.0"],
html[data-theme="light"] div[style*="background: #1"],
html[data-theme="light"] div[style*="background:#1"],
html[data-theme="light"] div[style*="background: #0"],
html[data-theme="light"] div[style*="background:#0"],
html[data-theme="light"] div[style*="background: #2"],
html[data-theme="light"] div[style*="background:#2"],
html[data-theme="light"] .jrg-dark-box,
html[data-theme="light"] .jrg-merchant-card,
html[data-theme="light"] .jrg-erp-card,
html[data-theme="light"] .jrg-checkout-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Ensure any text inside light mode cards/boxes has WCAG AAA obsidian contrast */
html[data-theme="light"] div[style*="background: rgba(0, 0, 0,"] h1,
html[data-theme="light"] div[style*="background: rgba(0, 0, 0,"] h2,
html[data-theme="light"] div[style*="background: rgba(0, 0, 0,"] h3,
html[data-theme="light"] div[style*="background: rgba(0, 0, 0,"] h4,
html[data-theme="light"] div[style*="background: rgba(0, 0, 0,"] p,
html[data-theme="light"] div[style*="background: rgba(0, 0, 0,"] span:not([style*="background"]):not(.jrg-erp-badge):not(.product-badge),
html[data-theme="light"] div[style*="background: rgba(0, 0, 0,"] td,
html[data-theme="light"] div[style*="background: rgba(0, 0, 0,"] th,
html[data-theme="light"] div[style*="background: #1"] h1,
html[data-theme="light"] div[style*="background: #1"] h2,
html[data-theme="light"] div[style*="background: #1"] h3,
html[data-theme="light"] div[style*="background: #1"] p,
html[data-theme="light"] div[style*="background: #1"] span:not([style*="background"]):not(.jrg-erp-badge):not(.product-badge),
html[data-theme="light"] div[style*="background: #1"] td,
html[data-theme="light"] div[style*="background: #1"] th {
    color: #0f172a !important;
}

/* In Light Mode, gray/muted elements must maintain crisp AA 4.6:1 contrast (#475569) */
html[data-theme="light"] div[style*="color: #aaa"],
html[data-theme="light"] span[style*="color: #aaa"],
html[data-theme="light"] p[style*="color: #aaa"],
html[data-theme="light"] div[style*="color: #888"],
html[data-theme="light"] span[style*="color: #888"],
html[data-theme="light"] p[style*="color: #888"],
html[data-theme="light"] div[style*="color: #ccc"],
html[data-theme="light"] span[style*="color: #ccc"],
html[data-theme="light"] p[style*="color: #ccc"],
html[data-theme="light"] div[style*="color: #cbd5e1"],
html[data-theme="light"] span[style*="color: #cbd5e1"],
html[data-theme="light"] p[style*="color: #cbd5e1"] {
    color: #475569 !important;
}

/* Light Mode Secondary Buttons */
html[data-theme="light"] a[style*="background: rgba(255, 255, 255, 0.08)"],
html[data-theme="light"] button[style*="background: rgba(255, 255, 255, 0.08)"],
html[data-theme="light"] a[style*="background:rgba(255,255,255,0.08)"],
html[data-theme="light"] button[style*="background:rgba(255,255,255,0.08)"] {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] a[style*="background: rgba(255, 255, 255, 0.08)"]:hover,
html[data-theme="light"] button[style*="background: rgba(255, 255, 255, 0.08)"]:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   27. JRG ERP Portal & Unified Authentication Design System
   Dual-Theme (Light/Dark/System), High-Contrast, Luxury Cohesion
   ========================================================================== */

/* --- Virtual Page Layout Shell --- */
.jrg-virtual-body {
    background-color: var(--bg-primary, #0b0f19);
    color: var(--color-text-main, #f3f4f6);
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-primary, 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    transition: background-color 0.25s ease, color 0.25s ease;
    display: flex;
    flex-direction: column;
}

.jrg-virtual-page-header {
    padding: 14px 32px;
    background: var(--bg-secondary, #121826);
    border-bottom: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.jrg-virtual-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.jrg-virtual-header-left a.jrg-back-link {
    color: var(--color-accent, #eccc93);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.jrg-virtual-header-left a.jrg-back-link:hover {
    opacity: 0.85;
}

.jrg-virtual-header-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-text-heading, #ffffff);
    letter-spacing: 0.3px;
}

.jrg-virtual-page-content {
    flex: 1 0 auto;
    padding: 24px 20px 40px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.jrg-virtual-page-footer {
    margin-top: auto;
    padding: 30px 20px;
    border-top: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    text-align: center;
    color: var(--color-text-muted, #9ca3af);
    font-size: 13px;
    background: var(--bg-secondary, #121826);
}

.jrg-virtual-page-footer p {
    margin: 0 0 6px 0;
}

/* --- Theme Switcher Integration --- */
.jrg-theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    padding: 4px 10px;
    border-radius: 24px;
}

.jrg-theme-switcher-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.theme-pills {
    display: inline-flex;
    gap: 4px;
}

.jrg-theme-pill {
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted, #9ca3af);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.jrg-theme-pill:hover {
    color: var(--color-text-main, #f3f4f6);
    background: var(--bg-card, rgba(255, 255, 255, 0.06));
}

.jrg-theme-pill.active {
    background: var(--color-accent, #eccc93) !important;
    color: var(--color-text-inverse, #0b0f19) !important;
    border-color: var(--color-accent, #eccc93) !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .jrg-theme-pill.active {
    color: #ffffff !important;
}

/* --- Unified Authentication Portal (/login/) --- */
.jrg-unified-login-container {
    max-width: 480px;
    margin: 40px auto;
    padding: 36px;
    background: var(--bg-card, rgba(22, 30, 49, 0.75));
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-card, 0 10px 30px rgba(0, 0, 0, 0.4));
    color: var(--color-text-main, #f3f4f6);
    box-sizing: border-box;
}

.jrg-login-icon-wrap {
    text-align: center;
    margin-bottom: 16px;
}

.jrg-login-title {
    text-align: center;
    margin: 0 0 8px 0;
    color: var(--color-text-heading, #ffffff);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.jrg-login-subtitle {
    text-align: center;
    color: var(--color-text-muted, #9ca3af);
    margin: 0 0 22px 0;
    font-size: 14px;
    line-height: 1.45;
}

.jrg-login-usp-row {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px;
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.03));
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(236, 204, 147, 0.16));
    font-size: 12px;
    color: var(--color-text-main, #e2e8f0);
    text-align: center;
}

.jrg-login-usp-sub {
    color: var(--color-text-muted, #94a3b8);
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

#jrg-unified-loginform p {
    margin-bottom: 18px;
}

#jrg-unified-loginform label {
    display: block;
    color: var(--color-text-main, #f3f4f6);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}

#jrg-unified-loginform input[type="text"],
#jrg-unified-loginform input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.15));
    border-radius: 8px;
    background: var(--bg-input, rgba(0, 0, 0, 0.4));
    color: var(--color-text-main, #ffffff);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#jrg-unified-loginform input[type="text"]:focus,
#jrg-unified-loginform input[type="password"]:focus {
    border-color: var(--color-accent, #eccc93);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 236, 204, 147), 0.18);
}

#jrg-unified-loginform input[type="submit"] {
    width: 100%;
    padding: 13px;
    background: var(--color-accent, #eccc93);
    color: var(--color-text-inverse, #0b0f19);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-sizing: border-box;
}

[data-theme="light"] #jrg-unified-loginform input[type="submit"] {
    color: #ffffff;
}

#jrg-unified-loginform input[type="submit"]:hover {
    background: var(--color-accent-hover, #dfba7c);
}

.login-remember label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500 !important;
    color: var(--color-text-muted, #9ca3af) !important;
}

.login-remember input {
    width: auto !important;
}

.jrg-login-forgot {
    text-align: right;
    margin-top: -6px;
    margin-bottom: 20px;
}

.jrg-login-forgot a {
    color: var(--color-accent, #eccc93);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}

.jrg-login-qa {
    margin-top: 26px;
    border-top: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    padding-top: 18px;
    text-align: left;
}

.jrg-login-qa h3 {
    color: var(--color-accent, #eccc93);
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.jrg-login-qa p {
    color: var(--color-text-muted, #94a3b8);
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 14px 0;
}

/* --- ERP Layout Framework --- */
.jrg-erp-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 82vh;
    background: var(--bg-card, rgba(22, 30, 49, 0.75));
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    margin: 10px 0 30px;
    color: var(--color-text-main, #f3f4f6);
    box-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, 0.3));
}

.jrg-erp-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: var(--bg-secondary, #121826);
    border-bottom: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    flex-wrap: wrap;
    gap: 12px;
}

.jrg-erp-topbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 16px;
    color: var(--color-text-heading, #ffffff);
    letter-spacing: 0.4px;
}

.jrg-erp-topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.jrg-erp-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #9ca3af);
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.05));
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.06));
}

.jrg-erp-main-body {
    display: flex;
    flex: 1;
    min-height: 700px;
}

.jrg-erp-sidebar {
    width: 260px;
    background: var(--bg-secondary, #121826);
    border-right: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    padding: 20px 0;
    flex-shrink: 0;
}

.jrg-erp-sidebar-heading {
    color: var(--color-accent, #eccc93);
    padding: 0 24px;
    font-size: 0.85rem;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
}

.jrg-erp-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jrg-erp-nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    color: var(--color-text-muted, #9ca3af);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.jrg-erp-nav li a:hover {
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.04));
    color: var(--color-text-heading, #ffffff);
}

.jrg-erp-nav li a.active {
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.06));
    color: var(--color-text-heading, #ffffff);
    border-left-color: var(--color-accent, #eccc93);
    font-weight: 700;
}

.jrg-erp-nav-divider {
    margin: 20px 16px;
    border-top: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
}

.jrg-erp-content {
    flex-grow: 1;
    padding: 28px 32px;
    background: transparent;
    overflow-x: auto;
    box-sizing: border-box;
}

/* --- ERP Cards & Panels --- */
.jrg-erp-card {
    background: var(--bg-card, rgba(22, 30, 49, 0.75));
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-card, 0 4px 16px rgba(0, 0, 0, 0.15));
    color: var(--color-text-main, #f3f4f6);
}

.jrg-erp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-card, rgba(255, 255, 255, 0.06));
}

.jrg-erp-card h2, 
.jrg-erp-card h3 {
    margin: 0 0 6px 0;
    color: var(--color-text-heading, #ffffff);
    font-size: 1.15rem;
    font-weight: 700;
}

.jrg-erp-card p {
    margin: 0 0 14px 0;
    color: var(--color-text-muted, #9ca3af);
    font-size: 13px;
    line-height: 1.5;
}

/* --- ERP Stat Badges & Grid --- */
.jrg-erp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.jrg-erp-stat-card {
    background: var(--bg-card, rgba(22, 30, 49, 0.75));
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 16px 20px;
}

.jrg-erp-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.jrg-erp-stat-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text-heading, #ffffff);
}

/* --- Modern ERP Tables --- */
.jrg-erp-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
}

.jrg-erp-content table.wp-list-table,
.jrg-erp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--color-text-main, #f3f4f6);
    background: transparent;
    border: none;
}

.jrg-erp-content table.wp-list-table th,
.jrg-erp-content table.wp-list-table td,
.jrg-erp-table th,
.jrg-erp-table td {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--border-card, rgba(255, 255, 255, 0.06));
    text-align: left;
    vertical-align: middle;
}

.jrg-erp-content table.wp-list-table th,
.jrg-erp-table th {
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.04));
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-heading, #ffffff);
}

.jrg-erp-content table.wp-list-table tr:nth-child(even),
.jrg-erp-table tr:nth-child(even) {
    background: var(--bg-pane, rgba(255, 255, 255, 0.015));
}

.jrg-erp-content table.wp-list-table tr:hover,
.jrg-erp-table tr:hover {
    background: var(--bg-card-hover, rgba(255, 255, 255, 0.035));
}

/* --- ERP Form Controls & Buttons --- */
.jrg-erp-content input[type="text"],
.jrg-erp-content input[type="password"],
.jrg-erp-content input[type="url"],
.jrg-erp-content input[type="number"],
.jrg-erp-content input[type="date"],
.jrg-erp-content select,
.jrg-erp-content textarea {
    background: var(--bg-input, rgba(0, 0, 0, 0.4));
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.15));
    color: var(--color-text-main, #ffffff);
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.jrg-erp-content input:focus,
.jrg-erp-content select:focus,
.jrg-erp-content textarea:focus {
    border-color: var(--color-accent, #eccc93);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 236, 204, 147), 0.2);
}

.jrg-erp-content .button-primary,
.jrg-erp-btn-primary {
    background: var(--color-accent, #eccc93) !important;
    color: var(--color-text-inverse, #0b0f19) !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.2s ease !important;
}

[data-theme="light"] .jrg-erp-content .button-primary,
[data-theme="light"] .jrg-erp-btn-primary {
    color: #ffffff !important;
}

.jrg-erp-content .button-primary:hover,
.jrg-erp-btn-primary:hover {
    background: var(--color-accent-hover, #dfba7c) !important;
}

.jrg-erp-content .button-secondary,
.jrg-erp-btn-secondary {
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.08)) !important;
    color: var(--color-text-main, #f3f4f6) !important;
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.15)) !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.jrg-erp-content .button-secondary:hover,
.jrg-erp-btn-secondary:hover {
    background: var(--bg-card, rgba(255, 255, 255, 0.14)) !important;
}

.jrg-erp-btn-danger {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #ef4444 !important;
    border: 1px solid #ef4444 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.jrg-erp-btn-danger:hover {
    background: rgba(239, 68, 68, 0.3) !important;
}

.jrg-erp-btn-success {
    background: #10b981 !important;
    color: #000000 !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}

.jrg-erp-btn-success:hover {
    opacity: 0.9 !important;
}

/* --- Status Pills & Badges --- */
.jrg-erp-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.jrg-erp-badge-deal {
    background: var(--color-accent, #eccc93);
    color: var(--color-text-inverse, #0b0f19);
}

[data-theme="light"] .jrg-erp-badge-deal {
    color: #ffffff;
}

.jrg-erp-badge-sale {
    background: #ef4444;
    color: #ffffff;
}

.jrg-erp-badge-success {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.jrg-erp-badge-warning {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.jrg-erp-badge-danger {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* --- Notice Banners --- */
.jrg-erp-content .notice {
    background: var(--bg-card-subtle, rgba(255, 255, 255, 0.05));
    padding: 12px 16px;
    border-left: 4px solid var(--color-accent, #eccc93);
    border-radius: 4px;
    margin-bottom: 20px;
    color: var(--color-text-main, #f3f4f6);
}

.jrg-erp-content .notice p {
    margin: 0;
    color: var(--color-text-main, #f3f4f6) !important;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .jrg-erp-main-body {
        flex-direction: column;
    }
    .jrg-erp-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
        padding: 12px 0;
    }
    .jrg-erp-nav {
        display: flex;
        overflow-x: auto;
        padding: 0 12px;
    }
    .jrg-erp-nav li a {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 10px 14px;
        white-space: nowrap;
    }
    .jrg-erp-nav li a.active {
        border-bottom-color: var(--color-accent, #eccc93);
    }
    .jrg-virtual-page-header {
        padding: 12px 16px;
    }
    .jrg-erp-content {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   Light Mode Explicit High-Contrast Refinements
   ========================================================================== */
[data-theme="light"] .jrg-virtual-body {
    background-color: #f8fafc;
    color: #0f172a;
}

[data-theme="light"] .jrg-virtual-page-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .jrg-virtual-header-title {
    color: #0f172a;
}

[data-theme="light"] .jrg-virtual-page-footer {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
}

[data-theme="light"] .jrg-unified-login-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
    color: #0f172a;
}

[data-theme="light"] .jrg-login-title {
    color: #0f172a;
}

[data-theme="light"] .jrg-login-subtitle {
    color: #475569;
}

[data-theme="light"] .jrg-login-usp-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}

[data-theme="light"] .jrg-login-usp-sub {
    color: #64748b;
}

[data-theme="light"] #jrg-unified-loginform label {
    color: #0f172a;
}

[data-theme="light"] #jrg-unified-loginform input[type="text"],
[data-theme="light"] #jrg-unified-loginform input[type="password"] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

[data-theme="light"] #jrg-unified-loginform input[type="text"]:focus,
[data-theme="light"] #jrg-unified-loginform input[type="password"]:focus {
    border-color: #b47b2b;
    box-shadow: 0 0 0 3px rgba(180, 123, 43, 0.18);
}

[data-theme="light"] .jrg-erp-wrapper {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

[data-theme="light"] .jrg-erp-topbar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .jrg-erp-topbar-title {
    color: #0f172a;
}

[data-theme="light"] .jrg-erp-user-badge {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

[data-theme="light"] .jrg-erp-sidebar {
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
}

[data-theme="light"] .jrg-erp-sidebar-heading {
    color: #b47b2b;
}

[data-theme="light"] .jrg-erp-nav li a {
    color: #475569;
}

[data-theme="light"] .jrg-erp-nav li a:hover {
    background: #f8fafc;
    color: #0f172a;
}

[data-theme="light"] .jrg-erp-nav li a.active {
    background: #f1f5f9;
    color: #0f172a;
    border-left-color: #b47b2b;
}

[data-theme="light"] .jrg-erp-nav-divider {
    border-top-color: #e2e8f0;
}

[data-theme="light"] .jrg-erp-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    color: #0f172a;
}

[data-theme="light"] .jrg-erp-card-header {
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .jrg-erp-card h2,
[data-theme="light"] .jrg-erp-card h3 {
    color: #0f172a;
}

[data-theme="light"] .jrg-erp-card p {
    color: #475569;
}

[data-theme="light"] .jrg-erp-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .jrg-erp-stat-label {
    color: #64748b;
}

[data-theme="light"] .jrg-erp-stat-val {
    color: #0f172a;
}

[data-theme="light"] .jrg-erp-table-wrap {
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .jrg-erp-content table.wp-list-table,
[data-theme="light"] .jrg-erp-table {
    color: #0f172a;
}

[data-theme="light"] .jrg-erp-content table.wp-list-table th,
[data-theme="light"] .jrg-erp-table th {
    background: #f8fafc;
    color: #0f172a;
    border-bottom: 2px solid #e2e8f0;
}

[data-theme="light"] .jrg-erp-content table.wp-list-table td,
[data-theme="light"] .jrg-erp-table td {
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .jrg-erp-content table.wp-list-table tr:nth-child(even),
[data-theme="light"] .jrg-erp-table tr:nth-child(even) {
    background: #f8fafc;
}

[data-theme="light"] .jrg-erp-content table.wp-list-table tr:hover,
[data-theme="light"] .jrg-erp-table tr:hover {
    background: #f1f5f9;
}

[data-theme="light"] .jrg-erp-content input[type="text"],
[data-theme="light"] .jrg-erp-content input[type="password"],
[data-theme="light"] .jrg-erp-content input[type="url"],
[data-theme="light"] .jrg-erp-content input[type="number"],
[data-theme="light"] .jrg-erp-content input[type="date"],
[data-theme="light"] .jrg-erp-content select,
[data-theme="light"] .jrg-erp-content textarea {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

[data-theme="light"] .jrg-erp-content input:focus,
[data-theme="light"] .jrg-erp-content select:focus,
[data-theme="light"] .jrg-erp-content textarea:focus {
    border-color: #b47b2b;
    box-shadow: 0 0 0 3px rgba(180, 123, 43, 0.18);
}

[data-theme="light"] .jrg-erp-content .button-secondary,
[data-theme="light"] .jrg-erp-btn-secondary {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

[data-theme="light"] .jrg-erp-content .button-secondary:hover,
[data-theme="light"] .jrg-erp-btn-secondary:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] .jrg-erp-content .notice {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #b47b2b;
    color: #0f172a;
}

[data-theme="light"] .jrg-erp-content .notice p {
    color: #0f172a !important;
}
/* ==========================================================================
   28. Order Tracking, Checkout Success & Customer Portal Dual-Theme Styling
   WCAG 2.1 AAA Compliant High-Contrast Styles (Dark Obsidian & Clean Porcelain)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared Base Card & Typography Tokens
   -------------------------------------------------------------------------- */
.jrg-checkout-card,
.jrg-tracking-card,
.jrg-customer-portal {
    box-sizing: border-box;
    width: 100%;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.25s ease;
}

/* Dark Mode (Default / Luxury Obsidian) */
:root,
[data-theme="dark"] {
    --jrg-box-bg: rgba(18, 24, 38, 0.85);
    --jrg-box-border: rgba(255, 255, 255, 0.08);
    --jrg-box-subtle-bg: rgba(11, 15, 25, 0.7);
    --jrg-box-subtle-border: rgba(255, 255, 255, 0.06);
    --jrg-box-text: #f3f4f6;
    --jrg-box-text-heading: #ffffff;
    --jrg-box-text-muted: #9ca3af;
    --jrg-box-input-bg: rgba(11, 15, 25, 0.85);
    --jrg-box-input-border: rgba(255, 255, 255, 0.2);
    --jrg-box-input-text: #ffffff;
    --jrg-box-btn-sec-bg: rgba(255, 255, 255, 0.08);
    --jrg-box-btn-sec-border: rgba(255, 255, 255, 0.16);
    --jrg-box-btn-sec-text: #ffffff;
    --jrg-escrow-banner-bg: rgba(236, 204, 147, 0.1);
    --jrg-escrow-banner-border: rgba(236, 204, 147, 0.3);
    --jrg-escrow-banner-text: #f3f4f6;
}

/* Light Mode (Clean Luxury Porcelain & Obsidian Text - 15.8:1 AAA Contrast) */
[data-theme="light"] {
    --jrg-box-bg: #ffffff;
    --jrg-box-border: #e2e8f0;
    --jrg-box-subtle-bg: #f8fafc;
    --jrg-box-subtle-border: #cbd5e1;
    --jrg-box-text: #0f172a;
    --jrg-box-text-heading: #0f172a;
    --jrg-box-text-muted: #334155;
    --jrg-box-input-bg: #ffffff;
    --jrg-box-input-border: #94a3b8;
    --jrg-box-input-text: #0f172a;
    --jrg-box-btn-sec-bg: #f1f5f9;
    --jrg-box-btn-sec-border: #cbd5e1;
    --jrg-box-btn-sec-text: #0f172a;
    --jrg-escrow-banner-bg: #fef3c7;
    --jrg-escrow-banner-border: #f59e0b;
    --jrg-escrow-banner-text: #78350f;
}

/* --------------------------------------------------------------------------
   2. Checkout Success Container & Cards
   -------------------------------------------------------------------------- */
.jrg-checkout-card {
    background: var(--jrg-box-bg);
    border: 1px solid var(--jrg-box-border);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.jrg-checkout-header h2 {
    color: var(--jrg-box-text-heading);
    margin: 0 0 10px 0;
}

.jrg-checkout-header p {
    color: var(--jrg-box-text-muted);
    line-height: 1.6;
}

.jrg-checkout-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--jrg-box-subtle-bg);
    border: 1px solid var(--jrg-box-subtle-border);
    padding: 12px 16px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.jrg-checkout-item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--jrg-box-text-heading);
}

.jrg-checkout-item-meta {
    font-size: 12px;
    color: var(--jrg-box-text-muted);
    margin-top: 2px;
}

.jrg-checkout-info-box {
    background: var(--jrg-box-subtle-bg) !important;
    border: 1px solid var(--jrg-box-subtle-border) !important;
    border-radius: 10px;
    padding: 16px;
    color: var(--jrg-box-text) !important;
}

.jrg-checkout-info-box .info-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--jrg-box-text-muted) !important;
    margin-bottom: 6px;
}

.jrg-checkout-info-box .info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--jrg-box-text) !important;
    line-height: 1.5;
}

.jrg-checkout-escrow-banner {
    background: var(--jrg-escrow-banner-bg);
    border: 1px solid var(--jrg-escrow-banner-border);
    color: var(--jrg-escrow-banner-text);
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 22px;
}

.jrg-checkout-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    background: var(--jrg-box-btn-sec-bg);
    border: 1px solid var(--jrg-box-btn-sec-border);
    color: var(--jrg-box-btn-sec-text) !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.jrg-checkout-btn-secondary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   3. Order Tracking Card & Timeline
   -------------------------------------------------------------------------- */
.jrg-tracking-card {
    max-width: 680px;
    margin: 40px auto;
    background: var(--jrg-box-bg);
    border: 1px solid var(--jrg-box-border);
    border-radius: 16px;
    padding: 32px;
    color: var(--jrg-box-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.jrg-tracking-input {
    flex: 1;
    padding: 13px 16px;
    border-radius: 8px;
    border: 1px solid var(--jrg-box-input-border) !important;
    background: var(--jrg-box-input-bg) !important;
    color: var(--jrg-box-input-text) !important;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.jrg-tracking-input:focus {
    border-color: var(--color-accent, #ecc493) !important;
    box-shadow: 0 0 0 3px rgba(236, 204, 147, 0.2);
}

.jrg-tracking-timeline-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 25px;
    text-align: center;
    background: var(--jrg-box-subtle-bg);
    border: 1px solid var(--jrg-box-subtle-border);
    padding: 16px 10px;
    border-radius: 12px;
}

.jrg-tracking-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.jrg-tracking-step-title {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--jrg-box-text-heading);
}

.jrg-tracking-step-desc {
    font-size: 9.5px;
    color: var(--jrg-box-text-muted);
    margin-top: 2px;
}

.jrg-tracking-details-box {
    background: var(--jrg-box-subtle-bg);
    border: 1px solid var(--jrg-box-subtle-border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 13.5px;
}

.jrg-tracking-details-box .detail-label {
    color: var(--jrg-box-text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.jrg-tracking-details-box .detail-val {
    font-weight: 600;
    color: var(--jrg-box-text-heading);
    margin-top: 3px;
}

/* --------------------------------------------------------------------------
   4. Customer Orders History Portal
   -------------------------------------------------------------------------- */
.jrg-customer-order-card {
    background: var(--jrg-box-subtle-bg);
    border: 1px solid var(--jrg-box-subtle-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.jrg-customer-order-card:hover {
    border-color: var(--border-hover, rgba(236, 204, 147, 0.4));
}

.jrg-customer-order-ref {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--jrg-box-text-heading);
}

.jrg-customer-order-date {
    color: var(--jrg-box-text-muted);
    font-size: 12px;
    margin-left: 10px;
}

.jrg-customer-order-item-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--jrg-box-text);
}

.jrg-customer-order-total {
    font-size: 16px;
    font-weight: 800;
    color: var(--jrg-box-text-heading);
}

/* --------------------------------------------------------------------------
   5. Cart Drawer Customer Inputs Contrast Override
   -------------------------------------------------------------------------- */
.cart-section-box {
    background: var(--jrg-box-subtle-bg) !important;
    border: 1px solid var(--jrg-box-subtle-border) !important;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.cart-input-label {
    display: block;
    font-size: 11px;
    color: var(--jrg-box-text-muted) !important;
    margin-bottom: 4px;
    font-weight: 600;
}

.cart-helper-text {
    color: var(--jrg-box-text-muted) !important;
    font-size: 10.5px;
    margin-top: 4px;
    display: block;
    line-height: 1.4;
}

.cart-account-creation-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--jrg-box-text) !important;
    font-weight: 600;
}