/* ==========================================================================
   SIGMA AUDLEY — GALLERY WHITE LUXURY DESIGN SYSTEM
   Crisp white & warm-ivory surfaces · champagne-gold hairlines · espresso ink
   Marcellus (display) · Jost (body/UI) · Fragment Mono (prices/addresses)
   Loaded AFTER each page's inline styles — overrides the base palette.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Fragment+Mono&display=swap');

:root {
    /* — Gallery white tokens — */
    --lux-bg-0: #ffffff;
    --lux-bg-1: #fdfcf9;
    --lux-bg-2: #faf7f1;
    --lux-surface: #ffffff;
    --lux-surface-2: #f6f1e6;
    --lux-ink: #251d12;
    --lux-ink-dim: #564a36;
    --lux-ink-mute: #877761;
    --lux-gold: #b08d3e;              /* hairlines, decoration */
    --lux-gold-text: #8a6a23;         /* AA gold for text on white */
    --lux-gold-deep: #6f541b;
    --lux-gold-pale: #ecdfc0;
    --lux-jade: #39775a;
    --lux-claret: #a8454e;
    --lux-hairline: rgba(176, 141, 62, 0.28);
    --lux-hairline-strong: rgba(176, 141, 62, 0.52);
    --lux-well: #ffffff;              /* light well for QR codes */
    --lux-espresso: #241c12;          /* dark contrast moments (CTAs) */
    --lux-display: 'Marcellus', 'Times New Roman', serif;
    --lux-body: 'Jost', 'Segoe UI', sans-serif;
    --lux-mono: 'Fragment Mono', 'Courier New', monospace;

    /* — Re-tune the shop's own variables (post-transform) — */
    --border-subtle: rgba(176, 141, 62, 0.18);
    --border-default: rgba(176, 141, 62, 0.32);
    --primary-blue: #8a6a23;          /* accent: deep champagne */
    --primary-dark: #6f541b;
    --shadow-sm: 0 1px 2px 0 rgba(62, 47, 22, 0.05);
    --shadow-md: 0 4px 14px -4px rgba(62, 47, 22, 0.10);
    --shadow-lg: 0 10px 30px -8px rgba(62, 47, 22, 0.14);
    --shadow-xl: 0 18px 50px -12px rgba(62, 47, 22, 0.18);
    --font-family: 'Jost', 'Segoe UI', sans-serif;
}

/* ==========================================================================
   1. ATMOSPHERE — warm paper light, faint gold air, never sterile
   ========================================================================== */

html {
    background: var(--lux-bg-0);
}

body {
    font-family: var(--lux-body);
    background:
        radial-gradient(1100px 520px at 78% -120px, rgba(176, 141, 62, 0.07), transparent 62%),
        radial-gradient(900px 600px at -8% 12%, rgba(176, 141, 62, 0.045), transparent 58%),
        radial-gradient(1200px 800px at 50% 115%, rgba(214, 191, 138, 0.10), transparent 65%),
        linear-gradient(180deg, #fdfbf6 0%, #fffefb 46%, #fbf8f2 100%);
    background-attachment: fixed;
    color: var(--lux-ink);
}

/* film grain — whisper-quiet on white */
body::before {
    content: "";
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 2147483000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.028;
    mix-blend-mode: multiply;
}

/* soft warm edge — the gallery wall, not a vignette */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147482999;
    background:
        radial-gradient(135% 110% at 50% 42%, transparent 64%, rgba(150, 118, 58, 0.06) 100%);
}

::selection {
    background: rgba(176, 141, 62, 0.26);
    color: #241c12;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #cbb88e #f3efe5;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #f3efe5; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d3c29b, #bfa873);
    border-radius: 6px;
    border: 2px solid #f3efe5;
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3,
.logo-text, .hero-title, .section-title, .modal-title,
.product-name, .company-name, .deal-card-title, .bs-name,
.cart-header h2, .trust-score-number {
    font-family: var(--lux-display) !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em !important;
}

.hero-title { line-height: 1.18 !important; }
.hero-title, .section-title { color: var(--lux-ink) !important; }

/* refined mono for catalogue numbers, prices, wallet addresses, timers */
code, kbd, samp,
.price-value, .product-code, .bulk-tier, .timer-display,
.cart-item-price, .checkout-item-price, .deal-tier-value,
.address-display code, .wallet-address code, .order-id-box {
    font-family: var(--lux-mono) !important;
    font-feature-settings: "tnum";
}

.price-value {
    color: var(--lux-gold-text) !important;
    letter-spacing: 0.01em;
}

/* gilded small-caps labels */
.product-code, .trust-badge, .hero-badge, .bs-category,
.product-badge, .badge, .pay-tag, .bs-badge {
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

a { text-underline-offset: 3px; }

/* ==========================================================================
   3. HEADER — porcelain bar with a gold hairline
   ========================================================================== */

.header {
    background:
        linear-gradient(180deg, rgba(176, 141, 62, 0.045), transparent 55%),
        rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--lux-hairline) !important;
    box-shadow: 0 14px 34px -22px rgba(95, 72, 30, 0.35) !important;
}

.logo-text, .logo {
    color: var(--lux-gold-text) !important;
}

.logo-img {
    background: var(--lux-well);
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: 0 0 0 1px rgba(176, 141, 62, 0.45), 0 8px 22px -12px rgba(95, 72, 30, 0.35);
}

/* Trustpilot band — pale jade ribbon with gilded stars */
.trustpilot-banner {
    background:
        linear-gradient(135deg, rgba(57, 119, 90, 0.10), rgba(57, 119, 90, 0.03) 60%),
        #fcfbf7 !important;
    border-top: 1px solid rgba(57, 119, 90, 0.25);
    border-bottom: 1px solid rgba(57, 119, 90, 0.25);
}
.trustpilot-banner:hover {
    background:
        linear-gradient(135deg, rgba(57, 119, 90, 0.16), rgba(57, 119, 90, 0.05) 60%),
        #faf8f1 !important;
}
.tp-b-star { background: #b08d3e !important; }
.tp-b-star.half { background: linear-gradient(90deg, #b08d3e 50%, #ddd3bb 50%) !important; }
.tp-banner-score { color: #251d12 !important; }
.tp-banner-score strong { color: #6f541b; }
.tp-banner-count { color: #877761 !important; }
.tp-banner-btn {
    background: transparent !important;
    color: #6f541b !important;
    border: 1px solid var(--lux-hairline-strong) !important;
    letter-spacing: 0.04em;
}
.tp-banner-btn:hover {
    background: rgba(176, 141, 62, 0.10) !important;
    border-color: var(--lux-gold) !important;
    color: #564310 !important;
}

/* ==========================================================================
   4. CARDS & PANELS — white panels, gold hairlines, soft warm depth
   ========================================================================== */

.product-card, .modal-content, .cart-summary, .deal-card,
.bs-card, .sidebar-card, .review-card, .contact-card, .callout,
.category-card, .promo-card, .faq-item {
    border: 1px solid var(--lux-hairline) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, var(--shadow-md) !important;
}

.product-card {
    background:
        linear-gradient(165deg, rgba(176, 141, 62, 0.045), transparent 38%),
        var(--lux-surface) !important;
    border-radius: 14px !important;
}

.product-card:hover {
    border-color: var(--lux-hairline-strong) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 44px -16px rgba(95, 72, 30, 0.28) !important;
    transform: translateY(-3px);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s ease, box-shadow 0.35s ease;
}

.modal-content {
    background:
        linear-gradient(170deg, rgba(176, 141, 62, 0.05), transparent 32%),
        #ffffff !important;
    border: 1px solid var(--lux-hairline-strong) !important;
    box-shadow: 0 30px 90px -20px rgba(62, 47, 22, 0.35) !important;
}

.modal { backdrop-filter: blur(7px) !important; background: rgba(38, 29, 15, 0.45) !important; }

/* — Product render imagery — parchment wells for studio shots —
   Renders are white-background; mix-blend-mode: multiply melts the white
   into the parchment so the vials sit directly on the surface. */
.pc-imgwell {
    position: relative;
    height: 200px;
    margin: 14px 14px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(168deg, #fdfbf5 0%, #f8f3e8 58%, #f3ecdb 100%);
    border: 1px solid var(--lux-hairline);
    border-radius: 10px;
}

.pc-img {
    max-width: 88%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

/* Detail / spotlight variant — larger well, champagne-gold inner keyline */
.pd-imgwell {
    position: relative;
    height: 340px;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(168deg, #fdfbf5 0%, #f8f3e8 58%, #f1e9d6 100%);
    border: 1px solid var(--lux-hairline-strong);
    border-radius: 12px;
}

.pd-imgwell::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(176, 141, 62, 0.38);
    border-radius: 8px;
    pointer-events: none;
}

.pd-img {
    max-width: 90%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* ==========================================================================
   5. BUTTONS — espresso primaries (the dark contrast moment), quiet secondaries
   ========================================================================== */

.add-to-cart-btn, .btn-primary, .checkout-btn, .copy-btn, .signup-btn,
.cta-primary, .header-shop-btn, .deal-card-cta, .shop-cta, .link,
.tp-write-review-btn, .tp-footer-btn {
    background: linear-gradient(160deg, #3c2f1d 0%, #2a2013 55%, #241c12 100%) !important;
    color: #f1e3bd !important;
    border: none !important;
    font-family: var(--lux-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em;
    text-shadow: none !important;
    box-shadow: 0 1px 0 rgba(241, 227, 189, 0.22) inset, 0 10px 26px -10px rgba(56, 42, 20, 0.55) !important;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, filter 0.25s ease;
}

.add-to-cart-btn:hover, .btn-primary:hover, .checkout-btn:hover, .copy-btn:hover, .signup-btn:hover,
.cta-primary:hover, .header-shop-btn:hover, .deal-card-cta:hover, .shop-cta:hover, .link:hover,
.tp-write-review-btn:hover, .tp-footer-btn:hover {
    background: linear-gradient(160deg, #4c3c25 0%, #382c19 55%, #2e2415 100%) !important;
    color: #f7ecce !important;
    transform: translateY(-1.5px);
    filter: saturate(1.04);
    box-shadow: 0 1px 0 rgba(241, 227, 189, 0.3) inset, 0 14px 30px -10px rgba(56, 42, 20, 0.6) !important;
}

.btn-secondary, .cta-secondary, .secondary-link {
    background: transparent !important;
    color: var(--lux-ink-dim) !important;
    border: 1px solid var(--lux-hairline-strong) !important;
}

.btn-secondary:hover, .cta-secondary:hover, .secondary-link:hover {
    color: var(--lux-gold-deep) !important;
    border-color: var(--lux-gold) !important;
    background: rgba(176, 141, 62, 0.08) !important;
}

.qty-btn {
    background: var(--lux-surface-2) !important;
    color: var(--lux-gold-deep) !important;
    border: 1px solid var(--lux-hairline) !important;
}
.qty-btn:hover { border-color: var(--lux-gold) !important; color: var(--lux-ink) !important; }

/* Janoshik test-report links (JS-generated on every catalogue card) */
.view-test-report-btn, .view-test-report-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    font-size: 0.775rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #2c6148 !important;
    background: rgba(57, 119, 90, 0.06) !important;
    border: 1px solid rgba(57, 119, 90, 0.32) !important;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.view-test-report-btn:hover {
    background: rgba(57, 119, 90, 0.12) !important;
    color: #1f4d37 !important;
    border-color: rgba(57, 119, 90, 0.55) !important;
}
.view-test-report-btn i { font-size: 0.7rem; }

.janoshik-link, .janoshik-link:visited { color: #2c6148 !important; text-decoration: none; }
.janoshik-link:hover { color: #1f4d37 !important; }

.nav-link-trustpilot {
    background: rgba(57, 119, 90, 0.08) !important;
    color: #2c6148 !important;
    border: 1px solid rgba(57, 119, 90, 0.38) !important;
    font-weight: 500 !important;
}
.nav-link-trustpilot:hover {
    background: rgba(57, 119, 90, 0.15) !important;
    color: #1f4d37 !important;
}

/* ==========================================================================
   6. FORMS
   ========================================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], select, textarea, .qty-input {
    background-color: #ffffff !important;
    color: var(--lux-ink) !important;
    border: 1px solid rgba(140, 115, 60, 0.35) !important;
    font-family: var(--lux-body);
}

input::placeholder, textarea::placeholder { color: var(--lux-ink-mute) !important; opacity: 1; }

input:focus, select:focus, textarea:focus {
    border-color: var(--lux-gold) !important;
    box-shadow: 0 0 0 3px rgba(176, 141, 62, 0.16) !important;
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--lux-gold) !important;
    outline-offset: 2px;
}

/* ==========================================================================
   7. CRYPTO PAYMENT — elegant cards, QR codes on white wells
   ========================================================================== */

img[src*="QR"], img[src*="qr code" i] {
    background: var(--lux-well) !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(176, 141, 62, 0.5) !important;
    box-shadow:
        0 0 0 5px rgba(176, 141, 62, 0.07),
        0 14px 34px -14px rgba(95, 72, 30, 0.30) !important;
}

.address-display {
    background: #faf7ef !important;
    border: 1px solid var(--lux-hairline) !important;
    border-radius: 10px !important;
}

.address-display code {
    color: #5d4715 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.02em;
}

.payment-option {
    background:
        linear-gradient(165deg, rgba(176, 141, 62, 0.04), transparent 40%),
        var(--lux-surface) !important;
    border: 1px solid var(--lux-hairline) !important;
}

.payment-method:hover .payment-option {
    border-color: var(--lux-hairline-strong) !important;
    box-shadow: 0 10px 26px -14px rgba(95, 72, 30, 0.30) !important;
}

.payment-method input[type="radio"]:checked + .payment-option {
    border-color: var(--lux-gold) !important;
    background:
        linear-gradient(165deg, rgba(176, 141, 62, 0.10), transparent 55%),
        var(--lux-surface) !important;
    box-shadow: 0 0 0 3px rgba(176, 141, 62, 0.14) !important;
}

/* ==========================================================================
   8. GUESTBOOK — reviews pages (Trustpilot-template re-skin)
   ========================================================================== */

:root {
    --tp-green: #8a6a23;
    --tp-green-hover: #6f541b;
    --tp-green-dark: #5d4715;
    --tp-green-light: rgba(176, 141, 62, 0.12);
    --tp-star: #b08d3e;
    --tp-star-empty: #e4dcc8;
    --tp-bg: transparent;
    --tp-white: #ffffff;
    --tp-black: #251d12;
    --tp-text: #251d12;
    --tp-text-secondary: #564a36;
    --tp-text-light: #877761;
    --tp-border: rgba(176, 141, 62, 0.24);
    --tp-border-light: rgba(176, 141, 62, 0.14);
    --tp-link: #8a6a23;
    --shadow: 0 6px 18px -10px rgba(62, 47, 22, 0.18);
}

.tp-topbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tp-logo .tp-logo-star, .tp-star-box { color: #fffdf4 !important; }
.tp-write-review-btn { border-radius: 100px !important; }

.review-card {
    background:
        linear-gradient(168deg, rgba(176, 141, 62, 0.04), transparent 42%),
        #ffffff !important;
    border-radius: 14px;
}

.tp-star-sm { background: var(--tp-star) !important; color: #fffdf4 !important; }
.tp-star-sm.half { background: linear-gradient(90deg, var(--tp-star) 50%, var(--tp-star-empty) 50%) !important; }
.tp-star-sm.empty { background: var(--tp-star-empty) !important; }

.review-card:hover { border-color: var(--lux-hairline-strong) !important; }

.review-author-name { font-family: var(--lux-display); letter-spacing: 0.02em; font-weight: 400 !important; }
.review-title { font-family: var(--lux-display) !important; font-weight: 400 !important; letter-spacing: 0.01em; }
.review-body { color: var(--lux-ink-dim); }

.review-avatar {
    filter: saturate(0.8);
    box-shadow: 0 0 0 1px rgba(176, 141, 62, 0.4), 0 4px 12px -6px rgba(95, 72, 30, 0.35);
}

.review-tag, .tp-mention-tag {
    background: rgba(176, 141, 62, 0.07) !important;
    border: 1px solid var(--lux-hairline) !important;
    color: var(--lux-ink-dim) !important;
}

.rating-bar-track { background: #ece5d2 !important; }
.rating-bar-fill { background: linear-gradient(90deg, #b08d3e, #cfae6e) !important; }

/* hard-coded components inside the reviews template */
.sort-dropdown, .filter-panel, .filter-star-btn { background: var(--tp-white) !important; border-color: var(--tp-border) !important; }
.sort-option, .filter-star-btn { color: var(--tp-text) !important; }
.sort-option:hover { background: rgba(176, 141, 62, 0.08) !important; }
.tp-toast { background: #2a2013 !important; color: #f1e3bd !important; border: 1px solid rgba(176, 141, 62, 0.45); }
.tp-filter-btn { background: var(--tp-white) !important; color: var(--tp-text) !important; border-color: var(--tp-border) !important; }
.year-filter-btn { background: var(--tp-white); color: var(--tp-text-secondary); border-color: var(--tp-border); }
.year-filter-btn.active { background: linear-gradient(160deg, #3c2f1d, #241c12); color: #f1e3bd; border-color: transparent; }
.review-modal { background: #ffffff !important; border: 1px solid var(--lux-hairline-strong); }
.photo-lightbox { background: rgba(24, 18, 9, 0.88) !important; }
.review-photo { border-color: var(--lux-hairline) !important; }

/* ==========================================================================
   9. MOTION — staggered load reveal, gentle and short
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    @keyframes luxRise {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes luxFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .hero-section .container > *,
    .hero .hero-text > * {
        animation: luxRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .hero-section .container > *:nth-child(1), .hero .hero-text > *:nth-child(1) { animation-delay: 0.05s; }
    .hero-section .container > *:nth-child(2), .hero .hero-text > *:nth-child(2) { animation-delay: 0.14s; }
    .hero-section .container > *:nth-child(3), .hero .hero-text > *:nth-child(3) { animation-delay: 0.23s; }
    .hero-section .container > *:nth-child(4), .hero .hero-text > *:nth-child(4) { animation-delay: 0.32s; }
    .hero-section .container > *:nth-child(5), .hero .hero-text > *:nth-child(5) { animation-delay: 0.41s; }
    .hero-section .container > *:nth-child(6), .hero .hero-text > *:nth-child(6) { animation-delay: 0.5s; }

    .product-card, .review-card, .bs-card {
        animation: luxRise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .product-card:nth-child(2), .review-card:nth-child(2), .bs-card:nth-child(2) { animation-delay: 0.06s; }
    .product-card:nth-child(3), .review-card:nth-child(3), .bs-card:nth-child(3) { animation-delay: 0.12s; }
    .product-card:nth-child(4), .review-card:nth-child(4), .bs-card:nth-child(4) { animation-delay: 0.18s; }
    .product-card:nth-child(5), .review-card:nth-child(5) { animation-delay: 0.24s; }
    .product-card:nth-child(6), .review-card:nth-child(6) { animation-delay: 0.3s; }

    .modal-content { animation: luxRise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both !important; }
}

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

/* ==========================================================================
   10. RESPONSIVE GUARDS
   ========================================================================== */

@media (max-width: 480px) {
    body::before { display: none; }   /* grain off on small screens (perf) */
    .hero-title { font-size: 1.55rem !important; }
}

img { max-width: 100%; }