/* ==============================
   FONTS
============================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==============================
   CSS VARIABLES — Logo Colour Palette
============================== */
:root {
    --gold-light:    #c9a84c;
    --gold-mid:      #a8823a;
    --gold-dark:     #7a5c28;
    --gold-muted:    #6b4f22;
    --bronze:        #8b6914;
    --navy-950:      #080c14;
    --navy-900:      #0d1220;
    --navy-800:      #111827;
    --navy-700:      #1a2438;
    --navy-600:      #243050;
    --steel-blue:    #4a6080;
    --steel-light:   #7090b0;
    --text-primary:  #e8dcc8;
    --text-muted:    #8a9ab0;
    --text-dim:      #4a5568;
    --border-gold:   rgba(169, 130, 58, 0.3);
    --border-subtle: rgba(74, 96, 128, 0.2);
}

/* ==============================
   BASE
============================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Crimson Text', Georgia, serif;
    background-color: var(--navy-950);
    color: var(--text-primary);
}

/* ==============================
   CUSTOM SCROLLBAR
============================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--navy-900); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-mid); }

/* ==============================
   SELECTION
============================== */
::selection {
    background-color: rgba(169, 130, 58, 0.35);
    color: #fff;
}

/* ==============================
   TYPOGRAPHY
============================== */
h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: 'Cinzel', 'Times New Roman', serif;
    letter-spacing: 0.03em;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ==============================
   NAVBAR LOGO
============================== */
.navbar-logo {
    background-image: url('logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    display: block;
    height: 285px;
    width: 600px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.navbar-logo:hover {
    opacity: 0.85;
}

/* ==============================
   NAVIGATION OVERRIDES
============================== */
nav {
    background: rgba(8, 12, 20, 0.97) !important;
    border-bottom-color: var(--border-gold) !important;
}

nav a, nav button {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
    color: var(--text-muted) !important;
    transition: color 0.2s ease !important;
}

nav a:hover, nav button:hover {
    color: var(--gold-light) !important;
}

/* Dropdown */
nav .absolute.top-full {
    background: var(--navy-900) !important;
    border-color: var(--border-gold) !important;
}

nav .absolute.top-full a {
    font-family: 'Cinzel', serif !important;
    font-size: 0.7rem !important;
}

nav .absolute.top-full a:hover {
    background: var(--navy-800) !important;
    border-left-color: var(--gold-mid) !important;
    color: var(--gold-light) !important;
}

/* ==============================
   TOP BAR
============================== */
.bg-zinc-900.border-b {
    background: var(--navy-900) !important;
    border-color: var(--border-gold) !important;
}

/* ==============================
   HERO SECTION
============================== */
section.relative.bg-zinc-900 {
    background: var(--navy-900) !important;
}

/* ==============================
   BUTTONS
============================== */

/* Primary gold button */
.bg-amber-600, button.bg-amber-600 {
    background: linear-gradient(135deg, var(--gold-mid), var(--gold-dark)) !important;
    border: 1px solid var(--gold-light) !important;
    color: var(--navy-950) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    transition: all 0.3s ease !important;
}

.bg-amber-600:hover, button.bg-amber-600:hover,
.hover\:bg-amber-700:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-mid)) !important;
    box-shadow: 0 0 20px rgba(169, 130, 58, 0.3) !important;
}

/* Secondary outline button */
.border-zinc-700 {
    border-color: var(--border-gold) !important;
    color: var(--text-muted) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
}

.border-zinc-700:hover {
    border-color: var(--gold-mid) !important;
    color: var(--gold-light) !important;
    background: rgba(169, 130, 58, 0.05) !important;
}

/* ==============================
   GOLD TEXT (replaces amber)
============================== */
.text-amber-500, .text-amber-600 {
    color: var(--gold-light) !important;
}

.text-amber-600\/80 {
    color: rgba(201, 168, 76, 0.8) !important;
}

/* ==============================
   GRADIENT TEXT
============================== */
.text-gradient,
.bg-gradient-to-r.from-amber-500 {
    background: linear-gradient(to right, var(--gold-light), var(--gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero title gradient */
.bg-clip-text {
    background-image: linear-gradient(135deg, var(--gold-light), var(--gold-dark), var(--bronze)) !important;
}

/* ==============================
   HERO BADGE
============================== */
.bg-amber-600\/10 {
    background: rgba(169, 130, 58, 0.08) !important;
}

.border-amber-600\/20 {
    border-color: rgba(169, 130, 58, 0.25) !important;
}

.bg-amber-500.animate-pulse {
    background: var(--gold-light) !important;
}

/* ==============================
   FILTER BAR
============================== */
section.sticky.top-28 {
    background: rgba(8, 12, 20, 0.97) !important;
    border-color: var(--border-gold) !important;
}

/* Filter buttons */
.filter-btn {
    font-family: 'Cinzel', serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    color: var(--text-dim) !important;
    border-color: transparent !important;
    transition: all 0.2s ease !important;
}

.filter-btn:hover {
    color: var(--gold-light) !important;
    background: rgba(169, 130, 58, 0.06) !important;
}

.filter-btn.active {
    background: rgba(169, 130, 58, 0.12) !important;
    border-color: var(--border-gold) !important;
    color: var(--gold-light) !important;
}

/* Sort select */
#sort-select {
    background: var(--navy-800) !important;
    border-color: var(--border-gold) !important;
    color: var(--text-muted) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
}

/* ==============================
   PRODUCT CARDS
============================== */
.product-card {
    background: var(--navy-900) !important;
    border-color: var(--border-subtle) !important;
    transition: all 0.35s ease;
    position: relative;
}

.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(169, 130, 58, 0.04), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-gold) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(169, 130, 58, 0.08);
}

.product-card:hover::before {
    opacity: 1;
}

.product-card h3 {
    font-family: 'Cinzel', serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.04em !important;
    color: var(--text-primary) !important;
}

.product-card .text-zinc-500 {
    color: var(--text-dim) !important;
    font-family: 'Crimson Text', serif !important;
    font-style: italic !important;
}

/* Image zoom */
.img-zoom-container { overflow: hidden; }
.img-zoom-container img { transition: transform 0.5s ease; }
.product-card:hover .img-zoom-container img { transform: scale(1.05); }

/* Category badge on cards */
.product-card .absolute span {
    background: rgba(8, 12, 20, 0.85) !important;
    border-color: var(--border-gold) !important;
    color: var(--gold-light) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
}

/* Add to cart button on cards */
.product-card button {
    background: var(--navy-800) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-gold) !important;
    font-family: 'Cinzel', serif !important;
    transition: all 0.2s ease !important;
}

.product-card button:hover {
    background: linear-gradient(135deg, var(--gold-mid), var(--gold-dark)) !important;
    color: var(--navy-950) !important;
    box-shadow: 0 0 12px rgba(169, 130, 58, 0.3) !important;
}

/* Price text */
.text-amber-600.font-mono, .font-mono {
    color: var(--gold-light) !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* ==============================
   ABOUT SECTION
============================== */
#about {
    background: var(--navy-900) !important;
    border-color: var(--border-gold) !important;
}

#about h2 {
    font-family: 'Cinzel', serif !important;
    color: var(--text-primary) !important;
}

#about p {
    font-family: 'Crimson Text', serif !important;
    font-size: 1.05rem !important;
    color: var(--text-muted) !important;
    line-height: 1.8 !important;
}

#about h4 {
    font-family: 'Cinzel', serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.06em !important;
}

#about .bg-amber-600\/10 {
    background: rgba(169, 130, 58, 0.08) !important;
}

#about img {
    border-color: var(--border-gold) !important;
}

/* ==============================
   AUTHENTICITY SECTION
============================== */
#authenticity {
    background: var(--navy-950) !important;
}

#authenticity h2 {
    font-family: 'Cinzel', serif !important;
    color: var(--text-primary) !important;
}

#authenticity p {
    font-family: 'Crimson Text', serif !important;
    color: var(--text-muted) !important;
}

#authenticity .bg-zinc-900\/50 {
    background: rgba(13, 18, 32, 0.6) !important;
    border-color: var(--border-subtle) !important;
    transition: border-color 0.3s ease !important;
}

#authenticity .bg-zinc-900\/50:hover {
    border-color: var(--border-gold) !important;
}

#authenticity h3 {
    font-family: 'Cinzel', serif !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.06em !important;
}

#authenticity .text-amber-600 {
    color: var(--gold-light) !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
}

#authenticity .bg-zinc-800 {
    background: var(--navy-800) !important;
    border: 1px solid var(--border-gold) !important;
}

/* ==============================
   FOOTER
============================== */
footer {
    background: var(--navy-900) !important;
    border-color: var(--border-gold) !important;
}

footer h3 {
    font-family: 'Cinzel', serif !important;
    letter-spacing: 0.06em !important;
}

footer h4 {
    font-family: 'Cinzel', serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
    color: var(--text-dim) !important;
}

footer p, footer a, footer li a {
    font-family: 'Crimson Text', serif !important;
    font-size: 0.95rem !important;
    color: var(--text-muted) !important;
}

footer li a:hover {
    color: var(--gold-light) !important;
}

footer .bg-gradient-to-br {
    background: linear-gradient(135deg, var(--gold-mid), var(--gold-dark)) !important;
}

footer .bg-zinc-800 {
    background: var(--navy-800) !important;
}

footer .bg-zinc-800:hover {
    background: var(--navy-700) !important;
}

footer .border-zinc-800 {
    border-color: var(--border-gold) !important;
}

footer .bg-zinc-900\/50 {
    background: rgba(8, 12, 20, 0.5) !important;
}

/* ==============================
   CART SIDEBAR
============================== */
#cart-sidebar {
    background: var(--navy-900) !important;
    border-color: var(--border-gold) !important;
}

#cart-sidebar h2 {
    font-family: 'Cinzel', serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.06em !important;
}

#cart-sidebar .border-zinc-800 {
    border-color: var(--border-gold) !important;
}

#cart-sidebar .bg-zinc-950 {
    background: var(--navy-950) !important;
}

#cart-sidebar .text-amber-600 {
    color: var(--gold-light) !important;
}

/* ==============================
   PRODUCT MODAL
============================== */
#product-modal-content {
    background: var(--navy-900) !important;
    border-color: var(--border-gold) !important;
}

#product-modal-content h2 {
    font-family: 'Cinzel', serif !important;
    letter-spacing: 0.04em !important;
}

#product-modal-content .bg-zinc-950 {
    background: var(--navy-950) !important;
}

#product-modal-content .bg-zinc-950\/50 {
    background: rgba(8, 12, 20, 0.5) !important;
    border-color: var(--border-subtle) !important;
}

#product-modal-content .border-zinc-800 {
    border-color: var(--border-gold) !important;
}

#product-modal-content .text-zinc-500 {
    color: var(--text-dim) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
}

#product-modal-content .text-zinc-300 {
    color: var(--text-primary) !important;
    font-family: 'Crimson Text', serif !important;
    font-size: 1rem !important;
}

#product-modal-content p {
    font-family: 'Crimson Text', serif !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--text-muted) !important;
}

#product-modal-content .bg-amber-600\/5 {
    background: rgba(169, 130, 58, 0.05) !important;
    border-color: rgba(169, 130, 58, 0.2) !important;
}

/* ==============================
   SEARCH BAR
============================== */
#search-bar {
    background: rgba(13, 18, 32, 0.6) !important;
    border-color: var(--border-gold) !important;
}

#search-input {
    background: var(--navy-900) !important;
    border-color: var(--border-gold) !important;
    color: var(--text-primary) !important;
    font-family: 'Crimson Text', serif !important;
    font-size: 1rem !important;
}

#search-input::placeholder {
    color: var(--text-dim) !important;
    font-style: italic !important;
}

#search-input:focus {
    border-color: var(--gold-mid) !important;
    box-shadow: 0 0 0 1px var(--gold-dark) !important;
}

/* ==============================
   MOBILE MENU
============================== */
#mobile-menu {
    background: var(--navy-900) !important;
    border-color: var(--border-gold) !important;
}

#mobile-menu a {
    font-family: 'Cinzel', serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.06em !important;
    color: var(--text-muted) !important;
}

#mobile-menu a:hover {
    color: var(--gold-light) !important;
    background: rgba(169, 130, 58, 0.06) !important;
}

/* ==============================
   CURRENCY / LANGUAGE SELECTS
============================== */
select {
    background: var(--navy-800) !important;
    border-color: var(--border-gold) !important;
    color: var(--text-muted) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
}

select:focus {
    border-color: var(--gold-mid) !important;
    outline: none !important;
}

/* ==============================
   ANIMATIONS
============================== */
@keyframes pop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.cart-badge-pop { animation: pop 0.3s ease-out; }

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

.skeleton {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(to right, var(--navy-800) 4%, var(--navy-700) 25%, var(--navy-800) 36%);
    background-size: 1000px 100%;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.cart-item-new { animation: slideIn 0.3s ease-out; }

/* ==============================
   MODAL ANIMATION
============================== */
.modal-open { opacity: 1 !important; pointer-events: auto !important; }
.modal-scale { transform: scale(1) !important; }

/* ==============================
   ACCESSIBILITY
============================== */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--gold-mid);
    outline-offset: 2px;
}

/* ==============================
   REDUCED MOTION
============================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==============================
   DECORATIVE GOLD DIVIDER UTILITY
============================== */
.gold-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-mid), transparent);
    margin: 2rem 0;
}