/* =====================================================
   SHERAKART — Veilux Theme Migration
   Migrated from Material-green to Veilux luxury aesthetic
   Fonts: Cormorant Garamond (display) + Inter (body)
   ===================================================== */

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

/* ===== VEILUX DESIGN TOKENS ===== */
:root {
    /* Core Palette */
    --primary: #0A0A0A;
    --secondary: #C4A882;
    --secondary-dark: #A08860;
    --background: #FAFAF8;
    --on-background: #1C1C1C;
    --surface: #FAFAF8;
    --on-surface: #1C1C1C;

    /* Surface Scale */
    --surface-container: #F0EDE6;
    --surface-container-low: #F5F2EC;
    --surface-container-high: #E8E6E1;
    --surface-container-lowest: #FFFFFF;
    --surface-container-highest: #E0DDD8;
    --surface-variant: #E8E6E1;
    --surface-dim: #E8E6E1;
    --surface-bright: #FAFAF8;

    /* On-surface variants */
    --on-surface-variant: #5C5C5C;
    --on-primary: #FFFFFF;
    --on-secondary: #FFFFFF;

    /* Derived containers */
    --primary-container: color-mix(in srgb, var(--primary) 10%, white);
    --on-primary-container: color-mix(in srgb, var(--primary) 90%, black);
    --secondary-container: color-mix(in srgb, var(--secondary) 15%, white);
    --on-secondary-container: color-mix(in srgb, var(--secondary) 80%, black);

    /* Status */
    --error: #C0392B;
    --error-container: #FFDAD6;
    --on-error-container: #93000A;

    /* Borders */
    --outline: #999999;
    --outline-variant: #E8E6E1;

    /* Legacy alias (keeps old code working) */
    --sand-silk: #F5F2EC;

    /* Prevent auto dark-mode */
    color-scheme: light;

    /* Veilux spacing scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
}

/* ===== BASE ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--background);
    color: var(--on-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== TYPOGRAPHY SCALE ===== */

/* Display — Cormorant Garamond for editoral headings */
.font-display-lg {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.font-headline-lg {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.font-headline-lg-mobile {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.2;
}

.font-title-lg {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
}

.font-title-md {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.font-title-sm {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
}

.font-body-lg {
    font-family: 'Inter', sans-serif;
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.65;
}

.font-body-md {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.55;
}

.font-label-sm {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Text size utilities (used by ui.js template strings) */
.text-display-lg { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.text-headline-lg { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.text-headline-lg-mobile { font-size: 1.6rem; }
.text-title-md { font-size: 1rem; }
.text-body-lg { font-size: 1.0625rem; }
.text-body-md { font-size: 0.9375rem; }
.text-label-sm { font-size: 0.75rem; letter-spacing: 0.1em; }

/* ===== COLOUR UTILITIES (Tailwind class aliases) ===== */
.bg-sand-silk            { background-color: var(--sand-silk); }
.bg-sand-silk\/30        { background-color: rgba(245, 242, 236, 0.3); }
.text-primary            { color: var(--primary); }
.bg-primary              { background-color: var(--primary); }
.text-on-primary         { color: var(--on-primary); }
.text-secondary          { color: var(--secondary); }
.bg-secondary            { background-color: var(--secondary); }
.text-on-secondary       { color: var(--on-secondary); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-on-surface         { color: var(--on-surface); }
.text-error              { color: var(--error); }
.accent-primary          { accent-color: var(--primary); }

/* Background surface utilities */
.bg-background                { background-color: var(--background); }
.bg-surface                   { background-color: var(--surface); }
.bg-surface-container         { background-color: var(--surface-container); }
.bg-surface-container-low     { background-color: var(--surface-container-low); }
.bg-surface-container-high    { background-color: var(--surface-container-high); }
.bg-surface-container-lowest  { background-color: var(--surface-container-lowest); }
.bg-surface-container-highest { background-color: var(--surface-container-highest); }
.bg-primary-container         { background-color: var(--primary-container); }
.bg-secondary-container       { background-color: var(--secondary-container); }

/* Border utilities */
.border-outline-variant { border-color: var(--outline-variant); }
.border-surface-variant { border-color: var(--surface-variant); }
.border-outline         { border-color: var(--outline); }
.border-surface-container { border-color: var(--surface-container); }

/* Text on containers */
.text-on-primary-container    { color: var(--on-primary-container); }
.text-on-secondary-container  { color: var(--on-secondary-container); }

/* ===== GLASSMORPHISM ===== */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--outline-variant);
}

/* ===== SHADOWS ===== */
.shadow-soft {
    box-shadow: 0 2px 12px rgba(10, 10, 10, 0.05);
}

.shadow-hover {
    box-shadow: 0 8px 32px rgba(10, 10, 10, 0.10);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: var(--surface-container-low);
}
::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--outline);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== MATERIAL ICONS ===== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1;
}

/* ===== TRANSITIONS ===== */
.transition-all { transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-transform { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }

/* ===== FOOTER — dark near-black instead of green ===== */
footer,
footer.bg-primary {
    background-color: color-mix(in srgb, #0A0A0A 92%, #2a2a2a) !important;
}

/* ===== HERO SLIDES — Ken Burns crossfade ===== */
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.8s ease-in-out, transform 7s cubic-bezier(0.1, 0.1, 0.25, 1);
    transform: scale(1.02);
}

.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Warm cream gradient overlay instead of plain dark */
    background: linear-gradient(
        to right,
        rgba(10, 10, 10, 0.55) 0%,
        rgba(10, 10, 10, 0.25) 55%,
        rgba(10, 10, 10, 0.05) 100%
    );
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1.07);
}

/* ===== ANNOUNCEMENT BAR ===== */
.announcement-bar {
    width: 100%;
    position: relative;
    z-index: 100;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 56px;
    opacity: 1;
    /* Default background — overridden inline from DB */
    background-color: #0A0A0A;
    color: #FFFFFF;
}

.announcement-bar.dismissed {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.announcement-slider {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 6px 44px;
}

.announcement-slide {
    position: absolute;
    width: 100%;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out, transform 0.6s ease-in-out;
    transform: translateY(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.announcement-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    color: var(--secondary);
}

.announcement-link:hover { opacity: 0.85; }

.announcement-close-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.2s ease;
    padding: 4px;
    border-radius: 2px;
}

.announcement-close-btn:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
    background-color: rgba(255, 255, 255, 0.1);
}

/* ===== PRODUCT DETAIL — TYPOGRAPHY ===== */
.product-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--primary);
}

/* ===== ACCORDION ===== */
.accordion-group {
    border-top: 1px solid var(--outline-variant);
}

.accordion-item {
    border-bottom: 1px solid var(--outline-variant);
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    transition: color 0.2s ease;
}

.accordion-header:hover {
    color: var(--secondary-dark);
}

.accordion-header .chevron-icon {
    font-size: 18px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--on-surface-variant);
}

.accordion-item.active .chevron-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}

.accordion-content-inner {
    padding-bottom: 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--on-surface-variant);
}

.accordion-content-inner p { margin-bottom: 0.75rem; }
.accordion-content-inner p:last-child { margin-bottom: 0; }
.accordion-content-inner ul {
    list-style-type: disc !important;
    margin-bottom: 0.75rem;
    padding-left: 1.25rem !important;
}
.accordion-content-inner ol {
    list-style-type: decimal !important;
    margin-bottom: 0.75rem;
    padding-left: 1.25rem !important;
}
.accordion-content-inner li { margin-bottom: 0.25rem; display: list-item !important; }
.accordion-content-inner strong, .accordion-content-inner b {
    font-weight: 600;
    color: var(--on-surface);
}
.accordion-content-inner em, .accordion-content-inner i { font-style: italic; }
.accordion-content-inner u { text-decoration: underline; }
.accordion-content-inner blockquote {
    border-left: 2px solid var(--secondary);
    padding-left: 1rem;
    margin-left: 0;
    margin-bottom: 0.75rem;
    color: var(--on-surface-variant);
    font-style: italic;
}
.accordion-content-inner a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 500;
}
.accordion-content-inner a:hover { color: var(--secondary-dark); }
.accordion-content-inner .ql-align-center { text-align: center; }
.accordion-content-inner .ql-align-right  { text-align: right; }
.accordion-content-inner .ql-align-justify { text-align: justify; }
.accordion-content-inner .ql-indent-1 { padding-left: 1.5em; }
.accordion-content-inner .ql-indent-2 { padding-left: 3em; }
.accordion-content-inner .ql-indent-3 { padding-left: 4.5em; }
.accordion-content-inner .ql-indent-4 { padding-left: 6em; }
.accordion-content-inner .ql-indent-5 { padding-left: 7.5em; }

/* ===== INFO MODAL PROSE ===== */
#info-modal-content.prose h1,
#info-modal-content.prose h2,
#info-modal-content.prose h3 {
    color: var(--primary);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
#info-modal-content.prose h1 {
    font-size: 1.6rem;
    border-bottom: 1px solid var(--outline-variant);
    padding-bottom: 0.5rem;
}
#info-modal-content.prose h2 { font-size: 1.35rem; }
#info-modal-content.prose h3 { font-size: 1.15rem; }
#info-modal-content.prose p {
    color: var(--on-surface-variant);
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 300;
}
#info-modal-content.prose ul,
#info-modal-content.prose ol {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}
#info-modal-content.prose ul  { list-style-type: disc; }
#info-modal-content.prose ol  { list-style-type: decimal; }
#info-modal-content.prose li  {
    margin-bottom: 0.4rem;
    color: var(--on-surface-variant);
    font-size: 0.9rem;
}

/* ===== QUICK ADD MODAL — VARIANTS ===== */
.quick-add-modal-backdrop {
    background-color: rgba(10, 10, 10, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Colour swatch */
.variant-swatch-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1.5px var(--outline-variant);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.variant-swatch-color:hover {
    transform: scale(1.12);
}

.variant-swatch-color.active {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 2.5px var(--primary);
    transform: scale(1.1);
}

/* Size pill */
.variant-pill-size {
    padding: 6px 16px;
    border-radius: 2px;
    border: 1.5px solid var(--outline-variant);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    transition: all 0.18s ease;
    text-align: center;
    background-color: var(--surface-container-lowest);
    color: var(--on-surface-variant);
}

.variant-pill-size:hover:not(.disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background-color: var(--primary-container);
}

.variant-pill-size.active {
    background-color: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
    font-weight: 600;
}

.variant-pill-size.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
    background-color: var(--surface-container);
}

/* ===== PRODUCT CARDS ===== */
#stock-status-container:empty { display: none !important; }

.product-card .product-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--on-surface);
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

.product-card:hover .product-card-title {
    color: var(--primary);
}

.product-card .product-price-actual {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -0.01em;
}

.product-card .product-price-original {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--on-surface-variant);
    opacity: 0.65;
    margin-right: 2px;
    text-decoration: line-through;
}

/* CTA buttons on product cards */
.product-card button.choose-options,
.product-card button.add-to-cart {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    text-transform: uppercase;
    border-radius: 2px !important;
    /* Override Tailwind rounded-xl from template */
}

/* ===== HERITAGE / ABOUT SECTION ===== */
@media (min-width: 768px) {
    #heritage-section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        border-radius: 4px !important;
    }
}

/* ===== GLOBAL BUTTON OVERRIDES ===== */
/* Make all Tailwind rounded-xl buttons use Veilux sharp style */
button.bg-primary,
a.bg-primary,
button[class*="bg-primary"],
a[class*="bg-primary"] {
    border-radius: 2px !important;
}

/* Cart checkout button */
a[href="/checkout"],
a[href*="checkout"] {
    border-radius: 2px !important;
}

/* ===== NAVIGATION OVERRIDES ===== */
/* Active nav link — camel underline instead of green */
header a[class*="border-b-2"] {
    border-color: var(--secondary) !important;
    color: var(--primary) !important;
}

/* ===== MOBILE BOTTOM NAV ACTIVE STATE ===== */
nav a[class*="bg-primary-container"],
nav button[class*="bg-primary-container"] {
    background-color: color-mix(in srgb, var(--secondary) 15%, white) !important;
    color: var(--primary) !important;
}

/* ===== SEARCH DRAWER ===== */
/* Input focus ring — camel */
#global-search-input:focus {
    outline: none;
    box-shadow: none;
}

/* ===== PRICE RANGE SLIDER ===== */
input[type="range"].accent-primary {
    accent-color: var(--primary);
}

input[type="range"] {
    cursor: pointer;
}

/* ===== SHIMMER / SKELETON ===== */
.animate-pulse {
    animation: veilux-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes veilux-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ===== SELECTION ===== */
::selection {
    background-color: var(--secondary);
    color: var(--on-primary);
}

/* ===== COOKIE BANNER ===== */
#cookie-consent-banner {
    border-radius: 2px !important;
}

/* ===== CARD BORDERS — sharp Veilux ===== */
.rounded-2xl { border-radius: 4px !important; }
.rounded-xl  { border-radius: 4px !important; }
.rounded-3xl { border-radius: 4px !important; }
.rounded-lg  { border-radius: 3px !important; }
/* Keep full circles for swatches, icons, avatars */
.rounded-full { border-radius: 9999px !important; }

/* ===== FOCUS RINGS ===== */
*:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* ===== CHECKOUT PAGE ===== */
.product-page .rounded-xl,
.product-page .rounded-2xl {
    border-radius: 4px !important;
}

/* ===== FILTER SIDEBAR — category radio buttons ===== */
input[type="radio"] {
    accent-color: var(--primary);
}

/* ===== TOASTS / ALERTS ===== */
.toast, .alert, [class*="toast"], [class*="alert"] {
    border-radius: 2px !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

/* ===== CART ITEM QTY BUTTONS ===== */
button.qty-minus,
button.qty-plus {
    border-radius: 2px !important;
    border-color: var(--outline-variant) !important;
    color: var(--primary) !important;
    font-weight: 500;
}

button.qty-minus:hover,
button.qty-plus:hover {
    background-color: var(--surface-container) !important;
}

/* ===== WISHLIST HEART ===== */
.wishlist-btn:hover {
    color: var(--error) !important;
}

.wishlist-btn.active span {
    font-variation-settings: 'FILL' 1;
    color: var(--error);
}

/* ===== MODAL BACKDROPS ===== */
.modal-backdrop,
[id*="backdrop"],
[id*="overlay"] {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .font-display-lg {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .font-headline-lg {
        font-size: 1.5rem;
    }

    .product-title {
        font-size: 1.4rem;
    }
}