:root {
    /* Brand Colors (unchanged across themes) */
    --color-primary: #d68c1c;
    --color-primary-hover: #b45309;

    /* Font families */
    --font-gothic: 'Cinzel Decorative', serif;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Space Grotesk', sans-serif;

    /* ── DARK THEME (default) ── */
    --color-bg-dark: #020202;
    --color-surface-dark: #080808;

    /* Background layers */
    --bg-page: #020202;
    --bg-surface: #080808;
    --bg-surface-2: #0a0a0a;
    --bg-surface-3: #050505;
    --bg-header: rgba(2, 2, 2, 0.95);
    --bg-footer: #000;
    --bg-mobile-nav: rgba(2, 2, 2, 0.98);
    --bg-input: rgba(8, 8, 8, 0.9);
    --bg-input-focus: rgba(10, 10, 10, 0.95);
    --bg-modal: #0a0a0a;
    --bg-popup: rgba(12, 12, 12, 0.97);
    --bg-popup-arrow: rgba(12, 12, 12, 0.97);
    --bg-filter-btn: transparent;

    /* Text colors */
    --text-primary-content: #e5e7eb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-faint: #6b7280;
    --text-very-faint: #4b5563;
    --text-white: white;
    --text-heading: #f3f4f6;
    --text-heading-alt: #f0ece4;
    --text-nav-link: #d1d5db;

    /* Border colors */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-faint: rgba(255, 255, 255, 0.04);
    --border-input: rgba(214, 140, 28, 0.2);
    --border-section: #1a1a1a;
    --border-card: #222;
    --border-header: #221a10;
    --border-footer: #111;
    --border-modal: #333;
    --border-filter: rgba(255, 255, 255, 0.1);
    --border-popup: rgba(214, 140, 28, 0.15);
    --border-search: rgba(255, 255, 255, 0.2);

    /* Shadows & overlays */
    --shadow-card: 0 0 80px rgba(0, 0, 0, 1);
    --shadow-modal: 0 0 50px rgba(0, 0, 0, 0.8);
    --overlay-hero: rgba(0, 0, 0, 0.6);

    /* Spec card bg */
    --bg-spec-card: rgba(8, 8, 8, 0.9);
    --bg-spec-card-hover: rgba(13, 13, 13, 0.95);
    --bg-trust: rgba(5, 5, 5, 0.6);

    /* Scrollbar */
    --scrollbar-thumb: rgba(214, 140, 28, 0.2);
    --scrollbar-thumb-hover: rgba(214, 140, 28, 0.5);

    /* Autofill */
    --autofill-bg: #0a0a0a;

    /* Theme toggle button */
    --theme-btn-color: rgba(214, 140, 28, 0.7);
    --theme-btn-hover-bg: rgba(214, 140, 28, 0.08);

    /* Transition speed for theme changes */
    --theme-transition: 0.3s ease;
}


/* ============================================
   GLOBAL FORM INPUT OVERRIDES
   Counteract Tailwind Forms plugin white defaults
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
    background-color: rgba(8, 8, 8, 0.9) !important;
    color: #e5e7eb !important;
    border-color: rgba(214, 140, 28, 0.2) !important;
    caret-color: var(--color-primary);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    background-color: rgba(10, 10, 10, 0.95) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(214, 140, 28, 0.1) !important;
    --tw-ring-color: rgba(214, 140, 28, 0.15);
}

input::placeholder,
textarea::placeholder {
    color: #4b5563 !important;
}

/* Fix browser autofill white background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
    -webkit-text-fill-color: #e5e7eb !important;
    border-color: rgba(214, 140, 28, 0.2) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Date input calendar icon color fix */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

html {
    scroll-behavior: smooth;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.gothic-shadow {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

.text-glow {
    text-shadow: 0 0 10px rgba(214, 140, 28, 0.3);
}

.border-ornate {
    border: 1px solid rgba(214, 140, 28, 0.2);
    position: relative;
}

.border-ornate::before,
.border-ornate::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid #d68c1c;
    transition: all 0.3s ease;
}

.border-ornate::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

.border-ornate::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

.group:hover .border-ornate::before,
.group:hover .border-ornate::after {
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(214, 140, 28, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(214, 140, 28, 0.5);
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: rgba(2, 2, 2, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #221a10;
}

.header-outer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.header-container {
    display: flex;
    width: 100%;
    max-width: 1280px;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

@media (min-width: 1024px) {
    .header-container {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.header-nav {
    display: none;
    flex: 1;
    justify-content: flex-end;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .header-nav {
        display: flex;
    }
}

.nav-group {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: #d1d5db;
    transition: all 0.5s;
    font-size: 1rem;
    font-family: var(--font-serif);
    letter-spacing: 0.1em;
}

.nav-link:hover {
    color: var(--color-primary);
    letter-spacing: 0.2em;
}

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(2, 2, 2, 0.98);
    z-index: 100;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;
}

.mobile-nav-overlay.active {
    transform: translateY(0);
}

.mobile-nav-link {
    font-size: 1.5rem;
    color: white;
    font-family: var(--font-serif);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.btn-acquire {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(214, 140, 28, 0.4);
    padding: 0.5rem 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    display: inline-block;
}

.btn-acquire:hover {
    background-color: rgba(214, 140, 28, 0.1);
}

/* Nav Icon Links (Favorites, Basket) */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-icon-link {
    color: rgba(214, 140, 28, 0.7);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    border-radius: 50%;
    position: relative;
}

.nav-icon-link:hover {
    color: var(--color-primary);
    text-shadow: 0 0 12px rgba(214, 140, 28, 0.5);
    background-color: rgba(214, 140, 28, 0.08);
}

.nav-icon-link .material-symbols-outlined {
    font-size: 1.35rem;
}

/* Favorites Badge */
.fav-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    border: 2px solid #0d0d0d;
    line-height: 1;
}

/* ============================================
   NAVBAR POPUP SYSTEM
   ============================================ */
.nav-popup-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-popup {
    position: absolute;
    top: calc(100% + 12px);
    right: -10px;
    width: 340px;
    background: rgba(12, 12, 12, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(214, 140, 28, 0.15);
    border-radius: 14px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.7),
        0 0 1px rgba(214, 140, 28, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.97);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow: hidden;
}

.nav-popup-wrapper:hover .nav-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Invisible bridge to prevent popup from closing when moving mouse */
.nav-popup::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

/* Arrow */
.nav-popup-arrow {
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: rgba(12, 12, 12, 0.97);
    border-top: 1px solid rgba(214, 140, 28, 0.15);
    border-left: 1px solid rgba(214, 140, 28, 0.15);
    transform: rotate(45deg);
    z-index: 1;
}

/* Popup Header */
.nav-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-popup-title {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.04em;
}

.nav-popup-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(214, 140, 28, 0.1);
    border: 1px solid rgba(214, 140, 28, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
}

/* Popup Body */
.nav-popup-body {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
}

.nav-popup-body::-webkit-scrollbar {
    width: 4px;
}

.nav-popup-body::-webkit-scrollbar-thumb {
    background: rgba(214, 140, 28, 0.2);
    border-radius: 2px;
}

/* Popup Item */
.nav-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
}

.nav-popup-item:hover {
    background: rgba(214, 140, 28, 0.06);
}

.nav-popup-item-img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-popup-item-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s;
}

.nav-popup-item:hover .nav-popup-item-bg {
    transform: scale(1.1);
}

.nav-popup-item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
}

.nav-popup-item-placeholder .material-symbols-outlined {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.15);
}

.nav-popup-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-popup-item-title {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-serif);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.nav-popup-item-meta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
}

.nav-popup-item-price {
    font-size: 0.78rem;
    color: var(--color-primary);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
    white-space: nowrap;
}

/* More items indicator */
.nav-popup-more {
    text-align: center;
    padding: 6px 16px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

/* Empty State */
.nav-popup-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 8px;
    color: rgba(255, 255, 255, 0.25);
}

.nav-popup-empty .material-symbols-outlined {
    font-size: 28px;
    opacity: 0.5;
}

.nav-popup-empty span:last-child {
    font-size: 0.78rem;
    font-family: var(--font-sans);
}

/* Subtotal Row (Cart only) */
.nav-popup-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

.nav-popup-subtotal span:last-child {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

/* Popup Footer */
.nav-popup-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-primary);
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.2s;
    font-family: var(--font-serif);
    letter-spacing: 0.04em;
}

.nav-popup-footer:hover {
    background: rgba(214, 140, 28, 0.06);
    color: #fff;
}

.nav-popup-footer .material-symbols-outlined {
    font-size: 16px;
    transition: transform 0.2s;
}

.nav-popup-footer:hover .material-symbols-outlined {
    transform: translateX(3px);
}

.nav-popup-footer-cart {
    background: rgba(214, 140, 28, 0.08);
    color: var(--color-primary);
    font-weight: 600;
    border-radius: 0 0 14px 14px;
}

.nav-popup-footer-cart:hover {
    background: rgba(214, 140, 28, 0.15);
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-wrapper {
    display: flex;
    min-height: 700px;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    border: 1px solid #221a10;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Dark gradient overlay for hero — lives in a pseudo-element
   so it can be toned down in light mode */
.hero-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.55) 0%, rgba(2, 2, 2, 0.97) 95%);
    z-index: 0;
    transition: background var(--theme-transition);
}

/* All hero children must sit above the overlay */
.hero-texture-overlay,
.hero-content,
.btn-atelier {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero-wrapper {
        min-height: 100vh;
    }
}

.hero-texture-overlay {
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/black-linen.png');
    opacity: 0.4;
    z-index: 0;
    mix-blend-mode: overlay;
}

.hero-title {
    color: white;
    font-size: 3rem;
    font-family: var(--font-gothic);
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 5px 5px rgba(0, 0, 0, 1);
}

.hero-title span {
    color: rgba(214, 140, 28, 0.9);
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 5.5rem;
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    z-index: 10;
    max-width: 700px;
    align-items: center;
}

.hero-badge-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.hero-badge-line {
    height: 1px;
    width: 3rem;
}

.hero-badge-line-r {
    background: linear-gradient(to right, transparent, var(--color-primary));
}

.hero-badge-line-l {
    background: linear-gradient(to left, transparent, var(--color-primary));
}

.hero-est {
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 0.75rem;
    font-family: var(--font-gothic);
}

.hero-icon-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(214, 140, 28, 0.6);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.hero-icon-img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    opacity: 0.85;
}

.hero-tilde {
    font-size: 1.5rem;
    font-family: var(--font-gothic);
    color: rgba(214, 140, 28, 0.6);
}

.hero-subtitle {
    color: #d1d5db;
    font-size: 1.125rem;
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    line-height: 1.8;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    letter-spacing: 0.04rem;
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: 1.25rem;
        letter-spacing: 0.055rem;
    }
}

/* Hero CTA Button */
.btn-atelier {
    margin-top: 3rem;
    position: relative;
    padding: 1rem 2.5rem;
    overflow: hidden;
    border: 1px solid rgba(214, 140, 28, 0.5);
    color: var(--color-primary);
    transition: all 0.5s;
    display: inline-block;
    z-index: 10;
}

.btn-atelier:hover {
    border-color: var(--color-primary);
}

.btn-atelier-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background-color: var(--color-primary);
    transition: width 250ms ease-out;
    opacity: 0.1;
}

.btn-atelier:hover .btn-atelier-fill {
    width: 100%;
}

.btn-atelier-text {
    position: relative;
    font-size: 0.875rem;
    text-transform: uppercase;
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.3em;
    transition: color 0.3s;
}

.btn-atelier:hover .btn-atelier-text {
    color: white;
}

.btn-atelier-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, var(--color-primary), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-atelier:hover .btn-atelier-line {
    opacity: 1;
}

/* ============================================
   ARTIFACTS / GALLERY CARDS
   ============================================ */

.artifact-card {
    flex: none;
    width: 300px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

@media (min-width: 768px) {
    .artifact-card {
        width: 340px;
    }
}

.card-image-bg {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 1s;
    opacity: 0.7;
}

.group:hover .card-image-bg {
    transform: scale(1.1);
    opacity: 1;
}

.card-details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 1.5rem;
    transform: translateY(1rem);
    transition: transform 0.5s;
}

.group:hover .card-details {
    transform: translateY(0);
}

/* ============================================
   SHOP SECTION
   ============================================ */

.section-shop {
    display: flex;
    flex: 1;
    justify-content: center;
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: #020202;
    position: relative;
    overflow: hidden;
}

.shop-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: url('https://www.transparenttextures.com/patterns/black-felt.png');
}

.shop-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 16rem;
    background: linear-gradient(to bottom, #080808, transparent);
    z-index: 10;
}

.shop-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
    z-index: 20;
}

@media (min-width: 768px) {
    .shop-inner {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.shop-card {
    background-color: #050505;
    border: 1px solid #222;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 0 80px rgba(0, 0, 0, 1);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .shop-card {
        padding: 5rem;
    }
}

.shop-corner {
    position: absolute;
    width: 3rem;
    height: 3rem;
    border-color: rgba(214, 140, 28, 0.3);
    transition: border-color 0.3s;
}

.group:hover .shop-corner {
    border-color: rgba(214, 140, 28, 0.6);
}

.shop-tl {
    top: 1rem;
    left: 1rem;
    border-top-width: 2px;
    border-left-width: 2px;
}

.shop-tr {
    top: 1rem;
    right: 1rem;
    border-top-width: 2px;
    border-right-width: 2px;
}

.shop-bl {
    bottom: 1rem;
    left: 1rem;
    border-bottom-width: 2px;
    border-left-width: 2px;
}

.shop-br {
    bottom: 1rem;
    right: 1rem;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

.shop-top-border {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8rem;
    height: 2px;
    background-color: var(--color-primary);
    box-shadow: 0 0 15px #d68c1c;
}

.shop-logo-wrap {
    width: 4rem;
    height: 4rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 10px rgba(214, 140, 28, 0.5));
}

.shop-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(71%) sepia(91%) saturate(2951%) hue-rotate(357deg) brightness(92%) contrast(81%);
}

.shop-title {
    color: white;
    font-size: 2.25rem;
    font-family: var(--font-gothic);
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .shop-title {
        font-size: 3.75rem;
    }
}

/* Shop Stars */
.shop-stars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.shop-stars {
    display: flex;
    color: var(--color-primary);
}

.shop-star-icon {
    font-size: 0.875rem;
    font-variation-settings: 'FILL' 1;
}

.shop-forged-label {
    font-size: 0.75rem;
    color: #9ca3af;
    font-family: var(--font-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.shop-desc {
    color: #d1d5db;
    font-size: 1.125rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: 1.75;
}

@media (min-width: 768px) {
    .shop-desc {
        font-size: 1.25rem;
    }
}

/* Shop Badge */
.shop-badge-wrap {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 2.5rem;
}

.shop-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-style: normal;
    font-size: 0.75rem;
    font-family: var(--font-sans);
    letter-spacing: 0.2em;
    border: 1px solid rgba(214, 140, 28, 0.2);
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.4);
}

.shop-badge-icon {
    font-size: 0.875rem;
}

/* Shop Buttons */
.shop-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}

@media (min-width: 640px) {
    .shop-buttons {
        flex-direction: row;
    }
}

.btn-shop {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-weight: 700;
    padding: 1.25rem 2.5rem;
    transition: all 0.3s;
    min-width: 240px;
    text-decoration: none;
}

.btn-shop-primary {
    background-color: var(--color-primary);
    color: black;
    box-shadow: 0 0 20px rgba(214, 140, 28, 0.2);
}

.btn-shop-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: 0 0 40px rgba(214, 140, 28, 0.4);
}

.btn-shop-fill {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(100%);
    transition: transform 300ms;
}

.btn-shop:hover .btn-shop-fill {
    transform: translateY(0);
}

.btn-shop-icon {
    position: relative;
    z-index: 10;
    transition: transform 0.3s;
}

.btn-shop-icon-rotate {
    transition: transform 0.3s;
}

.btn-shop:hover .btn-shop-icon-rotate {
    transform: rotate(12deg);
}

.btn-shop-label {
    position: relative;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.875rem;
    font-family: var(--font-gothic);
    font-weight: 700;
}

.btn-shop-secondary {
    background-color: transparent;
    border: 1px solid #333;
    color: #9ca3af;
}

.btn-shop-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Shop Footer */
.shop-footer {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.shop-footer-icon {
    font-size: 0.875rem;
}

/* ============================================
   BODY & LAYOUT
   ============================================ */

body {
    background-color: var(--color-bg-dark);
    color: #e5e7eb;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: 1.75;
}

::selection {
    background-color: var(--color-primary);
    color: black;
}

.main-wrapper {
    position: relative;
    display: flex;
    height: auto;
    min-height: 100vh;
    width: 100%;
    flex-direction: column;
    overflow-x: hidden;
}

.content-spacer {
    padding-top: 5rem;
    display: flex;
    height: 100%;
    flex-grow: 1;
    flex-direction: column;
}

.section-centered {
    display: flex;
    flex: 1;
    justify-content: center;
}

.max-w-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
}

/* ============================================
   LOGO
   ============================================ */

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
}

.logo-img {
    height: 100%;
    object-fit: contain;
}

/* ============================================
   SECTION: THE RITUAL / MANIFESTO
   ============================================ */

.section-ritual {
    flex: 1;
    display: flex;
    justify-content: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #050505;
    position: relative;
    border-top: 1px solid #1a1a1a;
}

@media (min-width: 768px) {
    .section-ritual {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

.section-texture-overlay {
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.03;
    pointer-events: none;
}

.ritual-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    z-index: 10;
}

@media (min-width: 768px) {
    .ritual-container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.ritual-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 900px) {
    .ritual-content-wrapper {
        flex-direction: row;
        align-items: flex-start;
    }
}

.ritual-image-container {
    width: 100%;
    position: relative;
    padding: 0.5rem;
    border: 1px solid #222;
}

@media (min-width: 900px) {
    .ritual-image-container {
        width: 50%;
    }
}

.ritual-image {
    width: 100%;
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.25);
    transition: all 1s ease-in-out;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    position: relative;
}

.ritual-image:hover {
    filter: grayscale(0);
}

.ritual-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent, transparent);
    opacity: 0.6;
}

.ritual-text-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .ritual-text-container {
        width: 50%;
        padding-left: 3rem;
    }
}

.ritual-text-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.ritual-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(214, 140, 28, 0.8);
}

.ritual-header-icon {
    width: 1.25rem;
    height: 1.25rem;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    filter: brightness(0) saturate(100%) invert(65%) sepia(87%) saturate(450%) hue-rotate(355deg) brightness(95%) contrast(92%) opacity(0.6);
}

.ritual-header-label {
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--font-serif);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.ritual-title {
    color: #f3f4f6;
    font-size: 2.25rem;
    font-family: var(--font-serif);
    line-height: 1.25;
    letter-spacing: 0.025em;
}

@media (min-width: 768px) {
    .ritual-title {
        font-size: 3rem;
    }
}

.ritual-title span {
    color: #9ca3af;
}

.ritual-title .text-glow {
    color: rgba(214, 140, 28, 0.9);
}

.ritual-accent-line {
    height: 1px;
    width: 6rem;
    background: linear-gradient(to right, rgba(214, 140, 28, 0.6), transparent);
}

.ritual-description {
    color: #d1d5db;
    font-size: 1.125rem;
    line-height: 1.8;
    letter-spacing: 0.03em;
    font-family: var(--font-sans);
    font-weight: 300;
}

@media (min-width: 768px) {
    .ritual-description {
        font-size: 1.2rem;
    }
}

.ritual-description span {
    color: #e5e7eb;
    font-style: italic;
}

.ritual-subtext {
    color: #9ca3af;
    font-size: 1.05rem;
    line-height: 1.75;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.025em;
}

.ritual-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #1a1a1a;
}

.ritual-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: default;
}

.ritual-stat-number {
    color: var(--color-primary);
    font-family: var(--font-gothic);
    font-size: 2.25rem;
    transition: color 0.5s;
}

.ritual-stat-item:hover .ritual-stat-number {
    color: white;
}

.ritual-stat-label {
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 700;
}

/* ============================================
   SECTION: GALLERY / COLLECTIONS
   ============================================ */

/* Gallery section styles are now inline in index.html */

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    display: flex;
    justify-content: center;
    background-color: #000;
    border-top: 1px solid #111;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.footer-content {
    display: flex;
    width: 100%;
    max-width: 1280px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        padding: 0 3rem;
    }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-brand {
        align-items: flex-start;
        text-align: left;
    }
}

.footer-links {
    display: flex;
    gap: 2.5rem;
}

.footer-link-item {
    color: #d1d5db;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    font-weight: 600;
}

.footer-link-item:hover {
    color: var(--color-primary);
}

.footer-brand-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #6b7280;
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-gothic);
    letter-spacing: 0.2em;
    color: #d1d5db;
}

.footer-logo-link {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.footer-logo-link:hover {
    transform: translateY(-2px);
}

.footer-brand-img {
    height: 3rem;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.7);
    transition: all 0.3s ease;
}

.footer-logo-link:hover .footer-brand-img {
    filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.footer-copyright {
    color: #6b7280;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 0.5rem;
}

/* ============================================
   DECORATION HELPERS
   ============================================ */

.corner-decor {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(214, 140, 28, 0.4);
    z-index: 1;
}

.corner-tl {
    top: -0.5rem;
    left: -0.5rem;
    border-right: none;
    border-bottom: none;
}

.corner-br {
    bottom: -0.5rem;
    right: -0.5rem;
    border-left: none;
    border-top: none;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.filter-primary {
    filter: brightness(0) saturate(100%) invert(65%) sepia(87%) saturate(450%) hue-rotate(355deg) brightness(95%) contrast(92%);
}

.filter-primary-hover {
    filter: brightness(0) saturate(100%) invert(25%) sepia(99%) saturate(1881%) hue-rotate(23deg) brightness(97%) contrast(93%);
}

.hero-icon-divider-filter {
    filter: brightness(0) saturate(100%) invert(65%) sepia(87%) saturate(450%) hue-rotate(355deg) brightness(95%) contrast(92%) opacity(0.6);
}

.filter-text-glow {
    filter: brightness(0) saturate(100%) invert(71%) sepia(91%) saturate(2951%) hue-rotate(357deg) brightness(92%) contrast(81%);
}

/* ============================================
   ARTIFACTS PAGE HEADER
   ============================================ */

.page-artifacts-header {
    padding-top: 8rem;
    padding-bottom: 4rem;
    text-align: center;
}

.artifact-grid-item {
    width: 100%;
    flex: initial;
    scroll-snap-align: none;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   MODAL
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transition: all 0.3s ease-in-out;
}

.modal-content {
    background-color: #0a0a0a;
    border: 1px solid #333;
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    max-height: 800px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.invisible .modal-content {
    transform: scale(0.95);
}

/* ============================================
   FILTER BAR
   ============================================ */

.filter-bar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.filter-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    padding: 0.5rem 1.5rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    transition: all 0.3s;
    background: transparent;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(214, 140, 28, 0.05);
}

.search-input-wrapper {
    position: relative;
    max-width: 400px;
    margin: 0 auto 3rem auto;
}

.search-input {
    width: 100%;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 2rem 0.5rem 0;
    color: white;
    font-family: var(--font-sans);
    transition: all 0.3s;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ============================================
   BACK TO TOP
   ============================================ */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--color-primary);
    color: black;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    box-shadow: 0 0 20px rgba(214, 140, 28, 0.4);
    cursor: pointer;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top:hover {
    transform: translateY(-5px);
    background-color: white;
}

/* ============================================
   ARTIFACT DETAIL PAGE
   ============================================ */

.detail-image-container {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(214, 140, 28, 0.2);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
}

.detail-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-label {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.stat-value {
    font-family: var(--font-serif);
    color: var(--color-primary);
}

.btn-buy {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 2rem;
    background: rgba(214, 140, 28, 0.1);
    border: 1px solid rgba(214, 140, 28, 0.4);
    color: var(--color-primary);
    font-family: var(--font-gothic);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    overflow: hidden;
}

.btn-buy:hover {
    background: rgba(214, 140, 28, 0.2);
    box-shadow: 0 0 15px rgba(214, 140, 28, 0.15);
}

/* ============================================
   ARTIFACT DETAIL PAGE - PREMIUM REDESIGN
   ============================================ */
/* ============================================
       ARTIFACT DETAIL - PREMIUM REDESIGN
       ============================================ */

/* --- Breadcrumbs --- */
.ad-breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem 1.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #6b7280;
    font-family: var(--font-sans);
}

.ad-breadcrumbs a {
    color: #6b7280;
    transition: color 0.3s;
    text-decoration: none;
}

.ad-breadcrumbs a:hover {
    color: var(--color-primary);
}

.ad-breadcrumbs .current {
    color: var(--color-primary);
    opacity: 0.8;
}

.ad-breadcrumbs .sep {
    opacity: 0.4;
}

/* --- Ambient Background Glow --- */
.ad-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ad-ambient::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(214, 140, 28, 0.04) 0%, transparent 70%);
}

.ad-ambient::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(ellipse, rgba(214, 140, 28, 0.03) 0%, transparent 70%);
}

/* --- Main Layout --- */
.ad-main {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .ad-main {
        grid-template-columns: 1fr 1fr;
        gap: 4.5rem;
        padding: 0 2.5rem 6rem;
    }
}

/* --- Image Gallery --- */
.ad-gallery {
    position: relative;
}

@media (min-width: 1024px) {
    .ad-gallery {
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}

/* Main image with ornamental corners */
.ad-main-image-wrap {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #050505;
    border: 1px solid rgba(214, 140, 28, 0.25);
    cursor: zoom-in;
}

.ad-main-image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 2;
    pointer-events: none;
}

.ad-main-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 2;
}

.ad-main-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ad-main-image-wrap:hover img {
    transform: scale(1.05);
}

/* Corner ornaments on main image */
.ad-corner {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    z-index: 3;
    pointer-events: none;
    border-color: rgba(214, 140, 28, 0.5);
    transition: all 0.5s ease;
}

.ad-main-image-wrap:hover .ad-corner {
    border-color: rgba(214, 140, 28, 0.9);
    width: 2rem;
    height: 2rem;
}

.ad-corner-tl {
    top: 0.75rem;
    left: 0.75rem;
    border-top: 1px solid;
    border-left: 1px solid;
}

.ad-corner-tr {
    top: 0.75rem;
    right: 0.75rem;
    border-top: 1px solid;
    border-right: 1px solid;
}

.ad-corner-bl {
    bottom: 0.75rem;
    left: 0.75rem;
    border-bottom: 1px solid;
    border-left: 1px solid;
}

.ad-corner-br {
    bottom: 0.75rem;
    right: 0.75rem;
    border-bottom: 1px solid;
    border-right: 1px solid;
}

/* Image badge */
.ad-image-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(214, 140, 28, 0.3);
    padding: 0.4rem 0.85rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    font-family: var(--font-sans);
}

.ad-image-badge .material-symbols-outlined {
    font-size: 0.85rem;
}

/* Thumbnail gallery */
.ad-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.ad-thumb {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ad-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    transition: border-color 0.3s;
    pointer-events: none;
}

.ad-thumb:hover::after,
.ad-thumb.active::after {
    border-color: var(--color-primary);
}

.ad-thumb:hover {
    border-color: rgba(214, 140, 28, 0.4);
}

.ad-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}

.ad-thumb:not(.active) img {
    opacity: 0.5;
}

.ad-thumb:hover img,
.ad-thumb.active img {
    opacity: 1;
}

/* --- Details Section --- */
.ad-details {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
}

/* Category / Collection tag */
.ad-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ad-category-tag span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-family: var(--font-serif);
    color: var(--color-primary);
    opacity: 0.7;
}

.ad-category-tag .tag-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.5;
}

/* Title */
.ad-title {
    font-size: 2.5rem;
    font-family: var(--font-serif);
    color: #f0ece4;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .ad-title {
        font-size: 3rem;
    }
}

/* Accent line */
.ad-accent-line {
    height: 1px;
    width: 5rem;
    background: linear-gradient(to right, var(--color-primary), transparent);
    margin-bottom: 1.5rem;
}

/* Price and Status Row */
.ad-price-status-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.ad-price-block {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.ad-price {
    font-size: 2.25rem;
    font-family: var(--font-gothic);
    color: var(--color-primary);
    letter-spacing: 0.05em;
    text-shadow: 0 0 25px rgba(214, 140, 28, 0.3);
}

.ad-currency {
    font-size: 1.1rem;
    color: var(--color-primary);
    opacity: 0.5;
    font-family: var(--font-serif);
}

.ad-artifact-id {
    font-size: 0.65rem;
    color: #6b7280;
    font-family: var(--font-sans);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

/* Status pill */
.ad-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-family: var(--font-sans);
    font-weight: 600;
}

.ad-status-pill.in-stock {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

.ad-status-pill.made-to-order {
    background: rgba(214, 140, 28, 0.08);
    border: 1px solid rgba(214, 140, 28, 0.25);
    color: var(--color-primary);
}

.ad-status-pill.out-of-stock {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.ad-status-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

.ad-status-pill.in-stock .dot {
    background: #4ade80;
}

.ad-status-pill.made-to-order .dot {
    background: var(--color-primary);
}

.ad-status-pill.out-of-stock .dot {
    background: #f87171;
    animation: none;
    opacity: 0.5;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

/* Description */
.ad-description {
    color: #9ca3af;
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.85;
    letter-spacing: 0.01em;
    margin-bottom: 2.5rem;
    padding: 1.75rem;
    border-left: 2px solid rgba(214, 140, 28, 0.35);
    background: linear-gradient(135deg, rgba(214, 140, 28, 0.04), rgba(214, 140, 28, 0.01) 50%, transparent);
    position: relative;
}

.ad-description::after {
    content: '"';
    position: absolute;
    top: 0.5rem;
    right: 1.25rem;
    font-size: 4rem;
    font-family: var(--font-serif);
    color: rgba(214, 140, 28, 0.08);
    line-height: 1;
}

.ad-description p {
    margin-bottom: 0.75rem;
}

.ad-description p:last-child {
    margin-bottom: 0;
}

/* Specs Grid */
.ad-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-bottom: 2.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ad-spec-card {
    background: rgba(8, 8, 8, 0.9);
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.ad-spec-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(214, 140, 28, 0.06), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}

.ad-spec-card:hover::before {
    opacity: 1;
}

.ad-spec-card:hover {
    background: rgba(13, 13, 13, 0.95);
}

.ad-spec-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.ad-spec-icon .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--color-primary);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.ad-spec-card:hover .ad-spec-icon .material-symbols-outlined {
    opacity: 1;
}

.ad-spec-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #6b7280;
    font-family: var(--font-sans);
    position: relative;
}

.ad-spec-value {
    font-family: var(--font-serif);
    color: #f0ece4;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    position: relative;
}

/* ============================================
       CTA BUTTON - PREMIUM GOLD STYLE
       ============================================ */
.ad-cta-section {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Primary CTA (Add to Cart) — gold border, gold text, dark bg */
.ad-btn-primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.15rem 2rem;
    background: rgba(214, 140, 28, 0.1);
    border: 1px solid rgba(214, 140, 28, 0.5);
    color: var(--color-primary);
    font-family: var(--font-gothic);
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    text-decoration: none;
}

/* Shimmer sweep effect */
.ad-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(214, 140, 28, 0.15), transparent);
    transition: left 0.6s ease;
}

.ad-btn-primary:hover::before {
    left: 100%;
}

/* Bottom glow line */
.ad-btn-primary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-primary), transparent);
    transition: width 0.4s ease;
}

.ad-btn-primary:hover::after {
    width: 80%;
}

.ad-btn-primary:hover {
    background: rgba(214, 140, 28, 0.18);
    border-color: var(--color-primary);
    box-shadow: 0 0 30px rgba(214, 140, 28, 0.15), 0 0 60px rgba(214, 140, 28, 0.05);
    transform: translateY(-2px);
    text-shadow: 0 0 15px rgba(214, 140, 28, 0.3);
}

.ad-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 0 15px rgba(214, 140, 28, 0.1);
}

.ad-btn-primary .material-symbols-outlined {
    font-size: 1.2rem;
    transition: transform 0.3s;
    color: var(--color-primary);
}

.ad-btn-primary:hover .material-symbols-outlined {
    transform: scale(1.15);
}

/* Disabled state */
.ad-btn-disabled {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #4b5563;
    cursor: not-allowed;
}

.ad-btn-disabled:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transform: none;
    text-shadow: none;
}

.ad-btn-disabled::before,
.ad-btn-disabled::after {
    display: none;
}

.ad-btn-disabled .material-symbols-outlined {
    color: #4b5563;
}

/* Outline variant (Login to Buy) */
.ad-btn-outline {
    background: rgba(214, 140, 28, 0.06);
    border: 1px solid rgba(214, 140, 28, 0.35);
    color: var(--color-primary);
}

.ad-btn-outline:hover {
    background: rgba(214, 140, 28, 0.14);
    border-color: var(--color-primary);
}

/* Feedback toast */
.ad-feedback {
    display: none;
    text-align: center;
    font-size: 0.8rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    animation: ad-fadeUp 0.3s ease;
}

/* Trust signals */
.ad-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(5, 5, 5, 0.6);
}

.ad-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.15rem 0.5rem;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.3s;
}

.ad-trust-item:last-child {
    border-right: none;
}

.ad-trust-item:hover {
    background: rgba(214, 140, 28, 0.03);
}

.ad-trust-item .material-symbols-outlined {
    font-size: 1.3rem;
    color: var(--color-primary);
    opacity: 0.5;
    transition: opacity 0.3s;
}

.ad-trust-item:hover .material-symbols-outlined {
    opacity: 0.8;
}

.ad-trust-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #6b7280;
    font-family: var(--font-sans);
    line-height: 1.3;
}

/* --- Navigation Footer --- */
.ad-nav-footer {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .ad-nav-footer {
        padding: 0 2.5rem 6rem;
    }
}

.ad-nav-footer-inner {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ad-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-family: var(--font-serif);
    transition: all 0.3s;
}

.ad-back-link:hover {
    color: var(--color-primary);
}

.ad-back-link .material-symbols-outlined {
    transition: transform 0.3s;
    font-size: 1.1rem;
}

.ad-back-link:hover .material-symbols-outlined {
    transform: translateX(-4px);
}

/* --- Lightbox --- */
.ad-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

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

.ad-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border: 1px solid rgba(214, 140, 28, 0.2);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
}

.ad-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: white;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.ad-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ad-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 50%;
}

.ad-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ad-lightbox-prev {
    left: 1.5rem;
}

.ad-lightbox-next {
    right: 1.5rem;
}

/* --- Related Products Sections --- */
.ad-related-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .ad-related-section {
        padding: 0 2.5rem 4rem;
    }
}

.ad-related-section+.ad-related-section {
    padding-top: 0;
}

.ad-related-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.ad-related-header::before,
.ad-related-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.06));
}

.ad-related-header::after {
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.06));
}

.ad-related-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.ad-related-title .label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--color-primary);
    font-family: var(--font-sans);
    opacity: 0.7;
}

.ad-related-title .title {
    font-size: 1.15rem;
    font-family: var(--font-serif);
    color: #f0ece4;
    letter-spacing: 0.05em;
}

.ad-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .ad-related-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* --- Related Product Card --- */
.ad-rcard {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: #080808;
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.ad-rcard:hover {
    border-color: rgba(214, 140, 28, 0.2);
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px rgba(214, 140, 28, 0.04);
    transform: translateY(-6px);
}

.ad-rcard-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #030303;
}

.ad-rcard-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
}

.ad-rcard:hover .ad-rcard-image img {
    transform: scale(1.08);
    opacity: 1;
}

/* Gradient overlay on card image */
.ad-rcard-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Shine sweep on hover */
.ad-rcard-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(105deg, transparent 40%, rgba(214, 140, 28, 0.04) 48%, rgba(214, 140, 28, 0.07) 50%, rgba(214, 140, 28, 0.04) 52%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
}

.ad-rcard:hover .ad-rcard-shine {
    transform: translateX(100%);
}

/* Card corner accents */
.ad-rcard-corner {
    position: absolute;
    z-index: 4;
    width: 14px;
    height: 14px;
    border-color: transparent;
    transition: border-color 0.5s ease;
    pointer-events: none;
}

.ad-rcard-corner-tl {
    top: 0;
    left: 0;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
}

.ad-rcard-corner-br {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
}

.ad-rcard:hover .ad-rcard-corner-tl,
.ad-rcard:hover .ad-rcard-corner-br {
    border-color: rgba(214, 140, 28, 0.25);
}

/* Card info */
.ad-rcard-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ad-rcard-category {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    font-family: var(--font-sans);
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.4s ease;
}

.ad-rcard:hover .ad-rcard-category {
    opacity: 0.7;
    transform: translateY(0);
}

.ad-rcard-name {
    font-size: 0.95rem;
    font-family: var(--font-serif);
    color: #f0ece4;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: color 0.3s;
}

.ad-rcard:hover .ad-rcard-name {
    color: var(--color-primary);
}

.ad-rcard-price {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.9rem;
    font-family: var(--font-serif);
    text-shadow: 0 0 12px rgba(214, 140, 28, 0.3);
    margin-top: 0.15rem;
}

/* View detail arrow */
.ad-rcard-arrow {
    position: absolute;
    bottom: 1.1rem;
    right: 1.1rem;
    z-index: 6;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.4s ease 0.1s;
}

.ad-rcard-arrow .material-symbols-outlined {
    font-size: 1rem;
    color: rgba(214, 140, 28, 0.5);
}

.ad-rcard:hover .ad-rcard-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Section divider */
.ad-section-divider {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .ad-section-divider {
        padding: 0 2.5rem;
    }
}

.ad-section-divider-line {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.06), transparent);
}

/* --- Entrance Animations --- */
@keyframes ad-fadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ad-animate {
    animation: ad-fadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.ad-animate-d1 {
    animation-delay: 0.1s;
}

.ad-animate-d2 {
    animation-delay: 0.2s;
}

.ad-animate-d3 {
    animation-delay: 0.3s;
}

.ad-animate-d4 {
    animation-delay: 0.4s;
}

.ad-animate-d5 {
    animation-delay: 0.5s;
}

.ad-animate-d6 {
    animation-delay: 0.6s;
}

.ad-animate-d7 {
    animation-delay: 0.7s;
}

/* ============================================
   ARTIFACTS PAGE
   ============================================ */
/* =============================================
       ARTIFACTS PAGE — REDESIGNED FROM ZERO
       ============================================= */

/* --- CSS Variables (page-scoped) --- */
.artifacts-page {
    --gold: #d68c1c;
    --gold-muted: rgba(214, 140, 28, 0.5);
    --gold-dim: rgba(214, 140, 28, 0.15);
    --gold-glow: rgba(214, 140, 28, 0.3);
    --surface: #0a0a0a;
    --surface-raised: #111111;
    --surface-card: #0d0d0d;
    --text-primary: #f0ede8;
    --text-secondary: #8a8680;
    --text-muted: #5a5652;
    --radius-sm: 2px;
    --radius-md: 6px;
    --radius-lg: 12px;
}

/* --- Page Wrapper --- */
.artifacts-page {
    position: relative;
    min-height: 100vh;
    background: #050505;
    overflow: hidden;
}

/* Animated grain texture */
.artifacts-page::before {
    content: '';
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url('https://www.transparenttextures.com/patterns/black-linen.png');
    opacity: 0.025;
    pointer-events: none;
    z-index: 0;
    animation: grainShift 8s steps(10) infinite;
}

@keyframes grainShift {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-2%, -2%);
    }

    20% {
        transform: translate(1%, 3%);
    }

    30% {
        transform: translate(-3%, 1%);
    }

    40% {
        transform: translate(3%, -1%);
    }

    50% {
        transform: translate(-1%, 2%);
    }

    60% {
        transform: translate(2%, -3%);
    }

    70% {
        transform: translate(-2%, 3%);
    }

    80% {
        transform: translate(3%, 1%);
    }

    90% {
        transform: translate(1%, -2%);
    }
}

/* ─── HERO ─── */
.artifacts-hero {
    position: relative;
    padding: 5rem 1.5rem 3rem;
    text-align: center;
    z-index: 1;
    overflow: hidden;
}

@media (min-width: 768px) {
    .artifacts-hero {
        padding: 6rem 2rem 4rem;
    }
}

/* Radial glow behind hero */
.artifacts-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--gold-dim) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: heroGlowPulse 6s ease-in-out infinite;
}

@keyframes heroGlowPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 0.7;
        transform: translateX(-50%) scale(1.1);
    }
}

/* Breadcrumb */
.artifacts-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--text-muted);
    font-family: var(--font-serif);
    margin-bottom: 3rem;
}

.artifacts-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.artifacts-breadcrumb .bc-sep {
    color: var(--gold-dim);
    font-size: 0.5rem;
}

.artifacts-breadcrumb .bc-active {
    color: var(--gold-muted);
}

/* Emblem */
.hero-emblem {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid var(--gold-dim);
    background: rgba(214, 140, 28, 0.03);
    position: relative;
    transition: all 0.6s ease;
}

.hero-emblem::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: var(--gold-dim);
    animation: emblemSpin 12s linear infinite;
}

@keyframes emblemSpin {
    to {
        transform: rotate(360deg);
    }
}

.hero-emblem:hover {
    border-color: var(--gold-muted);
    background: rgba(214, 140, 28, 0.06);
    box-shadow: 0 0 40px var(--gold-dim);
}

.hero-emblem img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(65%) sepia(87%) saturate(450%) hue-rotate(355deg) brightness(95%) contrast(92%);
    opacity: 0.8;
}

/* Overline label */
.hero-overline {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.7em;
    font-size: 0.65rem;
    font-weight: 600;
    font-family: var(--font-serif);
    color: var(--gold);
    text-shadow: 0 0 30px var(--gold-glow);
    margin-bottom: 1rem;
    opacity: 0.9;
}

/* Main heading */
.hero-heading {
    color: var(--text-primary);
    font-size: 2.8rem;
    font-family: var(--font-gothic);
    letter-spacing: 0.1em;
    margin: 0 0 1rem;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
    line-height: 1.1;
    position: relative;
}

@media (min-width: 768px) {
    .hero-heading {
        font-size: 4rem;
    }
}

@media (min-width: 1024px) {
    .hero-heading {
        font-size: 4.5rem;
    }
}

/* Subtitle */
.hero-subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    line-height: 1.7;
    max-width: 460px;
    margin: 0 auto;
}

/* Ornamental separator */
.hero-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 2.5rem auto 0;
    max-width: 300px;
}

.sep-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim));
}

.sep-line-r {
    background: linear-gradient(90deg, var(--gold-dim), transparent);
}

.sep-diamond {
    width: 5px;
    height: 5px;
    border: 1px solid var(--gold-muted);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ─── SEARCH & FILTER TOOLBAR ─── */
.artifacts-toolbar {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
}

/* Search */
.search-container {
    position: relative;
    max-width: 420px;
    margin: 0 auto 2.5rem;
}

.search-field {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    padding: 0.8rem 3rem 0.8rem 1.5rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    transition: all 0.4s ease;
    backdrop-filter: blur(4px);
}

.search-field::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-family: var(--font-serif);
    font-size: 0.82rem;
}

.search-field:focus {
    outline: none;
    border-color: var(--gold-muted);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(214, 140, 28, 0.08), 0 0 30px rgba(214, 140, 28, 0.1);
}

.search-icon {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    pointer-events: none;
    transition: color 0.3s ease;
}

.search-field:focus~.search-icon {
    color: var(--gold);
}

/* Filters */
.filter-toolbar {
    margin-bottom: 2rem;
}

/* Results counter */
.results-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.counter-line {
    height: 1px;
    width: 50px;
    background: linear-gradient(90deg, transparent, rgba(214, 140, 28, 0.1));
}

.counter-line-r {
    background: linear-gradient(90deg, rgba(214, 140, 28, 0.1), transparent);
}

.counter-text {
    font-size: .75rem;
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--gold);
}

/* ─── PRODUCT GRID ─── */
.artifacts-grid-wrap {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 2rem auto 0;
    padding: 0 1rem 4rem;
}

@media (min-width: 640px) {
    .artifacts-grid-wrap {
        padding: 0 1.5rem 4rem;
    }
}

@media (min-width: 1024px) {
    .artifacts-grid-wrap {
        padding: 0 2rem 5rem;
    }
}

#all-artifacts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

@media (min-width: 520px) {
    #all-artifacts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 900px) {
    #all-artifacts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

@media (min-width: 1280px) {
    #all-artifacts-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* ─── PRODUCT CARD (NEW DESIGN) ─── */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-card:hover {
    border-color: rgba(214, 140, 28, 0.2);
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px rgba(214, 140, 28, 0.04);
    transform: translateY(-6px);
}

/* Card Image Area */
.card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #020202;
}

.card-img-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;
    opacity: 0.85;
}

.product-card:hover .card-img-main {
    transform: scale(1.08);
    opacity: 1;
}

.card-img-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease;
    z-index: 2;
}

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

/* Multi-image badge */
.card-multi-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.4s ease 0.1s;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    padding: 0.35rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card:hover .card-multi-badge {
    opacity: 1;
    transform: translateY(0);
}

.card-multi-badge .material-symbols-outlined {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    display: block;
}

/* Top gradient (subtle) */
.card-gradient-top {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.15) 0%,
            transparent 30%,
            transparent 50%,
            rgba(0, 0, 0, 0.7) 85%,
            rgba(0, 0, 0, 0.92) 100%);
    pointer-events: none;
    z-index: 3;
}

/* Category tag */
.card-category-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--gold);
    font-family: var(--font-serif);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(214, 140, 28, 0.15);
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.4s ease;
}

.product-card:hover .card-category-tag {
    opacity: 1;
    transform: translateY(0);
}

/* Card info footer */
.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transform: translateY(0.5rem);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-card:hover .card-info {
    transform: translateY(0);
}

.card-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    transition: color 0.3s ease;
}

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

.card-price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.card-price {
    color: var(--gold);
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-serif);
    text-shadow: 0 0 15px var(--gold-glow);
}

.card-price-divider {
    width: 20px;
    height: 1px;
    background: var(--gold-dim);
}

/* View Details indicator */
.card-view-trigger {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.4s ease 0.1s;
}

.product-card:hover .card-view-trigger {
    opacity: 1;
    transform: translateX(0);
}

.card-view-trigger span {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--gold-muted);
    font-family: var(--font-serif);
    font-weight: 600;
}

.card-view-trigger .material-symbols-outlined {
    font-size: 0.9rem;
    color: var(--gold-muted);
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Shine effect on hover */
.card-shine {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(105deg,
            transparent 40%,
            rgba(214, 140, 28, 0.03) 45%,
            rgba(214, 140, 28, 0.06) 50%,
            rgba(214, 140, 28, 0.03) 55%,
            transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
}

.product-card:hover .card-shine {
    transform: translateX(100%);
}

/* Corner accents */
.card-corner {
    position: absolute;
    z-index: 6;
    width: 16px;
    height: 16px;
    border-color: transparent;
    transition: border-color 0.5s ease;
    pointer-events: none;
}

.card-corner-tl {
    top: 0;
    left: 0;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
}

.card-corner-br {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
}

.product-card:hover .card-corner-tl,
.product-card:hover .card-corner-br {
    border-color: var(--gold-dim);
}

/* ─── EMPTY STATE ─── */
.artifacts-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    text-align: center;
    opacity: 0.45;
}

.artifacts-empty .material-symbols-outlined {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.artifacts-empty p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* ─── BACK HOME SECTION ─── */
.back-home-section {
    display: flex;
    justify-content: center;
    padding-bottom: 5rem;
    position: relative;
    z-index: 1;
}

.btn-go-home {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2.5rem;
    border: 1px solid rgba(214, 140, 28, 0.2);
    color: var(--gold);
    background: transparent;
    text-decoration: none;
    transition: all 0.4s ease;
    overflow: hidden;
}

.btn-go-home::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(214, 140, 28, 0.08), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-go-home:hover {
    border-color: var(--gold-muted);
    box-shadow: 0 0 30px rgba(214, 140, 28, 0.06);
}

.btn-go-home:hover::before {
    opacity: 1;
}

.btn-go-home .go-home-text {
    position: relative;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.25em;
    transition: letter-spacing 0.4s ease;
}

.btn-go-home:hover .go-home-text {
    letter-spacing: 0.35em;
}

.btn-go-home .go-home-icon {
    position: relative;
    font-size: 1rem;
    transition: transform 0.4s ease;
}

.btn-go-home:hover .go-home-icon {
    transform: translateX(-4px);
}

/* ─── BACK TO TOP ─── */
.btt-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--gold);
    color: #000;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
    box-shadow: 0 4px 20px rgba(214, 140, 28, 0.4);
    cursor: pointer;
    border: none;
}

.btt-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.btt-btn:hover {
    transform: translateY(-4px) scale(1.05);
    background: #fff;
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.15);
}

/* ─── DECORATIVE SIDE LINES ─── */
.side-accent-l,
.side-accent-r {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 180px;
    z-index: 0;
    pointer-events: none;
}

.side-accent-l {
    left: 1.5rem;
    background: linear-gradient(to bottom, transparent, var(--gold-dim), transparent);
}

.side-accent-r {
    right: 1.5rem;
    background: linear-gradient(to bottom, transparent, var(--gold-dim), transparent);
}

@media (max-width: 1200px) {

    .side-accent-l,
    .side-accent-r {
        display: none;
    }
}

/* ─── ENTRANCE ANIMATIONS ─── */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.reveal-up {
    opacity: 0;
    animation: revealUp 0.7s ease-out forwards;
}

.reveal-fade {
    opacity: 0;
    animation: revealFade 0.6s ease-out forwards;
}

/* ─── MODAL OVERLAY ─── */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
}

.modal-content {
    position: relative;
    width: 95%;
    max-width: 1100px;
    max-height: 90vh;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: auto;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
}

/* ─── FILTER BUTTON OVERRIDES ─── */
.filter-bar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.filter-btn {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.65);
    padding: 0.45rem 1.25rem;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--font-serif);
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(214, 140, 28, 0.08);
    box-shadow: 0 0 15px rgba(214, 140, 28, 0.08);
}

/* Override card sizing within the grid */
#all-artifacts-grid .product-card {
    width: 100%;
}

/* ============================================
   HOMEPAGE GALLERY - PREMIUM REDESIGN
   ============================================ */
/* ============================================
       HOMEPAGE GALLERY — PREMIUM REDESIGN
       ============================================ */

.section-gallery {
    position: relative;
    padding: 7rem 0 5rem;
    background: var(--bg-surface-3, #050505);
    border-top: 1px solid var(--border-faint, rgba(255, 255, 255, 0.04));
    border-bottom: 1px solid var(--border-faint, rgba(255, 255, 255, 0.04));
}

.section-gallery::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(214, 140, 28, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* Badge icon at top */
.gallery-badge-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.gallery-badge-icon {
    background: var(--bg-surface-3, #050505);
    border: 1px solid rgba(214, 140, 28, 0.2);
    border-radius: 50%;
    padding: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-badge-img {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(65%) sepia(87%) saturate(450%) hue-rotate(355deg) brightness(95%) contrast(92%);
    opacity: 0.8;
}

/* Inner wrapper */
.gallery-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 768px) {
    .gallery-inner {
        padding: 0 2.5rem;
    }
}

/* Header */
.gallery-header {
    text-align: center;
    margin-bottom: 4rem;
}

.gallery-badge {
    display: none;
    /* hidden, decorative */
}

.gallery-title {
    color: #f0ece4;
    font-size: 2.5rem;
    font-family: var(--font-gothic);
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .gallery-title {
        font-size: 3.75rem;
    }
}

.gallery-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.gallery-divider-line {
    height: 1px;
    width: 4rem;
    background: linear-gradient(to right, transparent, rgba(214, 140, 28, 0.25));
}

.gallery-divider-line:last-child {
    background: linear-gradient(to left, transparent, rgba(214, 140, 28, 0.25));
}

.gallery-subtitle {
    font-size: 0.7rem;
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-primary);

        {
        % comment %
    }

    opacity: 0.6;

        {
        % endcomment %
    }
}

/* Collection sections */
.hp-collection {
    margin-bottom: 3.5rem;
}

.hp-collection-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.hp-collection-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(214, 140, 28, 0.15), transparent);
}

.hp-collection-title {
    font-size: 0.75rem;
    font-family: var(--font-serif);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 600;
    flex-shrink: 0;
}

/* Scroll container */
.hp-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hp-scroll::-webkit-scrollbar {
    display: none;
}

/* Product Card */
.hp-card {
    position: relative;
    flex-shrink: 0;
    width: 280px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: #080808;
    scroll-snap-align: start;
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 768px) {
    .hp-card {
        width: 300px;
    }
}

@media (min-width: 1024px) {
    .hp-card {
        width: 320px;
    }
}

.hp-card:hover {
    border-color: rgba(214, 140, 28, 0.2);
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px rgba(214, 140, 28, 0.04);
    transform: translateY(-6px);
}

/* Card image area */
.hp-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #030303;
}

.hp-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
}

.hp-card:hover .hp-card-image img {
    transform: scale(1.08);
    opacity: 1;
}

/* Gradient overlay */
.hp-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Shine sweep */
.hp-card-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(105deg, transparent 40%, rgba(214, 140, 28, 0.04) 48%, rgba(214, 140, 28, 0.07) 50%, rgba(214, 140, 28, 0.04) 52%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
}

.hp-card:hover .hp-card-shine {
    transform: translateX(100%);
}

/* Corner accents */
.hp-card-corner {
    position: absolute;
    z-index: 4;
    width: 14px;
    height: 14px;
    border-color: transparent;
    transition: border-color 0.5s ease;
    pointer-events: none;
}

.hp-card-corner-tl {
    top: 0;
    left: 0;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
}

.hp-card-corner-br {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
}

.hp-card:hover .hp-card-corner-tl,
.hp-card:hover .hp-card-corner-br {
    border-color: rgba(214, 140, 28, 0.25);
}

/* Category pill on hover */
.hp-card-category {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 6;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    font-family: var(--font-sans);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(214, 140, 28, 0.15);
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.4s ease;
}

.hp-card:hover .hp-card-category {
    opacity: 1;
    transform: translateY(0);
}

/* Card info at bottom */
.hp-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transform: translateY(0.5rem);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.hp-card:hover .hp-card-info {
    transform: translateY(0);
}

.hp-card-name {
    font-size: 1.05rem;
    font-family: var(--font-serif);
    color: #f0ece4;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    transition: color 0.3s;
}

.hp-card:hover .hp-card-name {
    color: var(--color-primary);
}

.hp-card-price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.hp-card-price {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--font-serif);
    text-shadow: 0 0 12px rgba(214, 140, 28, 0.3);
}

.hp-card-price-divider {
    width: 20px;
    height: 1px;
    background: rgba(214, 140, 28, 0.15);
}

/* View trigger on hover */
.hp-card-view {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.4s ease 0.1s;
}

.hp-card:hover .hp-card-view {
    opacity: 1;
    transform: translateX(0);
}

.hp-card-view span {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(214, 140, 28, 0.5);
    font-family: var(--font-serif);
    font-weight: 600;
}

.hp-card-view .material-symbols-outlined {
    font-size: 0.9rem;
    color: rgba(214, 140, 28, 0.5);
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Multi-image badge */
.hp-card-multi {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 6;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.4s ease 0.1s;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    padding: 0.35rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-card:hover .hp-card-multi {
    opacity: 1;
    transform: translateY(0);
}

.hp-card-multi .material-symbols-outlined {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* Gallery footer CTA */
.gallery-footer {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.btn-gallery-cta {
    position: relative;
    padding: 0.85rem 2.5rem;
    overflow: hidden;
    border: 1px solid rgba(214, 140, 28, 0.3);
    color: var(--color-primary);
    transition: all 0.4s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(214, 140, 28, 0.04);
}

.btn-gallery-cta:hover {
    border-color: var(--color-primary);
    background: rgba(214, 140, 28, 0.1);
    box-shadow: 0 0 30px rgba(214, 140, 28, 0.08);
}

.btn-gallery-cta-text {
    position: relative;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.2em;
    transition: letter-spacing 0.4s;
}

.btn-gallery-cta:hover .btn-gallery-cta-text {
    letter-spacing: 0.3em;
}

.btn-gallery-cta-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 0;
    background: linear-gradient(to right, transparent, var(--color-primary), transparent);
    transition: width 0.4s;
}

.btn-gallery-cta:hover .btn-gallery-cta-line {
    width: 80%;
}

/* ============================================================
   THEME TOGGLE BUTTON STYLES
   ============================================================ */

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(214, 140, 28, 0.25);
    color: var(--theme-btn-color);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0;
}

.theme-toggle-btn:hover {
    background: var(--theme-btn-hover-bg);
    border-color: rgba(214, 140, 28, 0.5);
    color: var(--color-primary);
    transform: rotate(15deg);
}

.theme-toggle-btn .material-symbols-outlined {
    font-size: 1.2rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.mobile-theme-btn {
    width: auto;
    height: auto;
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    background: transparent;
}

.mobile-theme-btn:hover {
    border: none;
    transform: none;
    background: rgba(214, 140, 28, 0.08);
}

/* ============================================================
   SMOOTH THEME TRANSITIONS
   ============================================================ */

html {
    /* Apply smooth transition to all theme-sensitive elements */
}

body,
.site-header,
.site-footer,
.nav-popup,
.modal-content,
.filter-btn,
.search-input,
.mobile-nav-overlay,
.ad-spec-card,
.ad-trust,
.ad-trust-item {
    transition:
        background-color var(--theme-transition),
        border-color var(--theme-transition),
        color var(--theme-transition);
}

/* ============================================================
   LIGHT THEME — [data-theme="light"]
   ============================================================
   Design philosophy: warm parchment/ivory tones with gold
   accents — preserving the gothic/craft aesthetic in a bright
   mode. Deep charcoal for text instead of pure black.
   ============================================================ */

[data-theme="light"] {
    /* Background layers */
    --bg-page: #f5f0e8;
    --bg-surface: #ede8de;
    --bg-surface-2: #e8e1d4;
    --bg-surface-3: #eee8dc;
    --bg-header: rgba(245, 240, 232, 0.97);
    --bg-footer: #1a1510;
    --bg-mobile-nav: rgba(245, 240, 232, 0.99);
    --bg-input: rgba(255, 255, 255, 0.8);
    --bg-input-focus: rgba(255, 255, 255, 0.95);
    --bg-modal: #f0ebe0;
    --bg-popup: rgba(248, 244, 236, 0.98);
    --bg-popup-arrow: rgba(248, 244, 236, 0.98);
    --bg-filter-btn: transparent;

    /* Text colors */
    --text-primary-content: #1c1812;
    --text-secondary: #2d2720;
    --text-muted: #5a4e3c;
    --text-faint: #7a6d58;
    --text-very-faint: #9e9080;
    --text-white: #1c1812;
    --text-heading: #1a1510;
    --text-heading-alt: #1a1510;
    --text-nav-link: #2d2720;

    /* Border colors */
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-faint: rgba(0, 0, 0, 0.05);
    --border-input: rgba(214, 140, 28, 0.3);
    --border-section: #d4c9b4;
    --border-card: #cdc2aa;
    --border-header: rgba(214, 140, 28, 0.2);
    --border-footer: #111;
    --border-modal: rgba(214, 140, 28, 0.2);
    --border-filter: rgba(0, 0, 0, 0.12);
    --border-popup: rgba(214, 140, 28, 0.2);
    --border-search: rgba(0, 0, 0, 0.2);

    /* Shadows */
    --shadow-card: 0 4px 40px rgba(0, 0, 0, 0.12);
    --shadow-modal: 0 0 50px rgba(0, 0, 0, 0.3);
    --overlay-hero: rgba(0, 0, 0, 0.4);

    /* Spec card bg */
    --bg-spec-card: rgba(255, 255, 255, 0.7);
    --bg-spec-card-hover: rgba(255, 255, 255, 0.9);
    --bg-trust: rgba(250, 245, 235, 0.8);

    /* Scrollbar */
    --scrollbar-thumb: rgba(214, 140, 28, 0.3);
    --scrollbar-thumb-hover: rgba(214, 140, 28, 0.6);

    /* Autofill */
    --autofill-bg: #f8f4ec;

    /* Theme toggle button */
    --theme-btn-color: rgba(90, 78, 60, 0.8);
    --theme-btn-hover-bg: rgba(214, 140, 28, 0.1);

    /* Standard background and text on body */
    color-bg-dark: #f5f0e8;
    color-surface-dark: #ede8de;
}

/* ── Body ─────────────────────────────────────────────────── */
[data-theme="light"] body {
    background-color: var(--bg-page);
    color: var(--text-primary-content);
}

/* ── Global Form Inputs ───────────────────────────────────── */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary-content) !important;
    border-color: var(--border-input) !important;
}

[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="email"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] input[type="tel"]:focus,
[data-theme="light"] input[type="url"]:focus,
[data-theme="light"] input[type="number"]:focus,
[data-theme="light"] input[type="date"]:focus,
[data-theme="light"] input[type="search"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    background-color: var(--bg-input-focus) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #9e9080 !important;
}

[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
    -webkit-text-fill-color: var(--text-primary-content) !important;
}

/* ── Scrollbar ────────────────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ── Site Header / Navbar ─────────────────────────────────── */
[data-theme="light"] .site-header {
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-header);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .nav-link {
    color: var(--text-nav-link);
}

[data-theme="light"] .nav-icon-link {
    color: rgba(90, 78, 60, 0.7);
}

[data-theme="light"] .nav-icon-link:hover {
    background-color: rgba(214, 140, 28, 0.08);
}

[data-theme="light"] .fav-badge {
    border-color: var(--bg-header);
}

/* ── Navbar Popups ────────────────────────────────────────── */
[data-theme="light"] .nav-popup {
    background: var(--bg-popup);
    border-color: var(--border-popup);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 0 1px rgba(214, 140, 28, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .nav-popup-arrow {
    background: var(--bg-popup-arrow);
    border-top-color: var(--border-popup);
    border-left-color: var(--border-popup);
}

[data-theme="light"] .nav-popup-header {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .nav-popup-title {
    color: var(--text-heading);
}

[data-theme="light"] .nav-popup-item:hover {
    background: rgba(214, 140, 28, 0.06);
}

[data-theme="light"] .nav-popup-item-img {
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .nav-popup-item-placeholder {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .nav-popup-item-placeholder .material-symbols-outlined {
    color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .nav-popup-item-title {
    color: var(--text-heading);
}

[data-theme="light"] .nav-popup-item-meta {
    color: var(--text-faint);
}

[data-theme="light"] .nav-popup-more {
    color: var(--text-faint);
}

[data-theme="light"] .nav-popup-empty {
    color: var(--text-muted);
}

[data-theme="light"] .nav-popup-subtotal {
    border-top-color: rgba(0, 0, 0, 0.07);
    color: var(--text-muted);
}

[data-theme="light"] .nav-popup-subtotal span:last-child {
    color: var(--text-heading);
}

[data-theme="light"] .nav-popup-footer {
    border-top-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .nav-popup-footer:hover {
    background: rgba(214, 140, 28, 0.06);
    color: var(--text-primary-content);
}

[data-theme="light"] .nav-popup-footer-cart {
    background: rgba(214, 140, 28, 0.06);
}

[data-theme="light"] .nav-popup-footer-cart:hover {
    background: rgba(214, 140, 28, 0.12);
}

[data-theme="light"] .nav-popup-body::-webkit-scrollbar-thumb {
    background: rgba(214, 140, 28, 0.25);
}

/* ── Mobile Overlay ───────────────────────────────────────── */
[data-theme="light"] .mobile-nav-overlay {
    background-color: var(--bg-mobile-nav);
}

[data-theme="light"] .mobile-nav-link {
    color: var(--text-primary-content);
}

/* ── Main Layout ──────────────────────────────────────────── */
[data-theme="light"] .main-wrapper {
    background-color: var(--bg-page);
}

/* ── Section: Ritual / Manifesto ─────────────────────────── */
[data-theme="light"] .section-ritual {
    background-color: var(--bg-surface-3);
    border-top-color: var(--border-section);
}

[data-theme="light"] .ritual-title {
    color: var(--text-heading);
}

[data-theme="light"] .ritual-title span {
    color: var(--text-muted);
}

[data-theme="light"] .ritual-description {
    color: var(--text-secondary);
}

[data-theme="light"] .ritual-description span {
    color: var(--text-heading);
}

[data-theme="light"] .ritual-subtext {
    color: var(--text-muted);
}

[data-theme="light"] .ritual-stats-grid {
    border-top-color: var(--border-section);
}

[data-theme="light"] .ritual-stat-label {
    color: var(--text-muted);
}

[data-theme="light"] .ritual-stat-item:hover .ritual-stat-number {
    color: var(--text-heading);
}

[data-theme="light"] .ritual-image-container {
    border-color: var(--border-card);
}

/* ── Section: Shop ────────────────────────────────────────── */
[data-theme="light"] .section-shop {
    background-color: var(--bg-page);
}

[data-theme="light"] .shop-gradient {
    background: linear-gradient(to bottom, var(--bg-surface-3), transparent);
}

[data-theme="light"] .shop-card {
    background-color: var(--bg-surface-3);
    border-color: var(--border-card);
    box-shadow: var(--shadow-card);
}

[data-theme="light"] .shop-title {
    color: var(--text-heading);
}

[data-theme="light"] .shop-forged-label {
    color: var(--text-muted);
}

[data-theme="light"] .shop-badge {
    background-color: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .shop-desc {
    color: var(--text-secondary);
}

[data-theme="light"] .shop-footer {
    color: var(--text-very-faint);
}

[data-theme="light"] .btn-shop-secondary {
    border-color: var(--border-card);
    color: var(--text-muted);
}

/* ── Footer ───────────────────────────────────────────────── */
[data-theme="light"] .site-footer {
    background-color: var(--bg-footer);
    border-top-color: var(--border-footer);
}

[data-theme="light"] .footer-link-item {
    color: #9ca3af;
}

[data-theme="light"] .footer-copyright {
    color: #6b7280;
}

/* ── Filter Bar ───────────────────────────────────────────── */
[data-theme="light"] .filter-btn {
    border-color: var(--border-filter);
    color: var(--text-muted);
    background: var(--bg-filter-btn);
}

[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .filter-btn.active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(214, 140, 28, 0.06);
}

/* ── Search Input ─────────────────────────────────────────── */
[data-theme="light"] .search-input {
    border-bottom-color: var(--border-search);
    color: var(--text-primary-content);
    background-color: transparent;
}

/* ── Modal ────────────────────────────────────────────────── */
[data-theme="light"] .modal-content {
    background-color: var(--bg-modal);
    border-color: var(--border-modal);
    box-shadow: var(--shadow-modal);
}

/* ── Artifact Detail Page ─────────────────────────────────── */
[data-theme="light"] .ad-title {
    color: var(--text-heading-alt);
}

[data-theme="light"] .ad-spec-card {
    background: var(--bg-spec-card);
}

[data-theme="light"] .ad-spec-card:hover {
    background: var(--bg-spec-card-hover);
}

[data-theme="light"] .ad-specs {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .ad-spec-label {
    color: var(--text-faint);
}

[data-theme="light"] .ad-spec-value {
    color: var(--text-heading-alt);
}

[data-theme="light"] .ad-description {
    color: var(--text-muted);
    background: linear-gradient(135deg, rgba(214, 140, 28, 0.05), rgba(214, 140, 28, 0.02) 50%, transparent);
}

[data-theme="light"] .ad-trust {
    background: var(--bg-trust);
    border-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .ad-trust-item {
    border-right-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .ad-trust-label {
    color: var(--text-faint);
}

[data-theme="light"] .ad-nav-footer-inner {
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ad-breadcrumbs {
    color: var(--text-faint);
}

[data-theme="light"] .ad-breadcrumbs a {
    color: var(--text-faint);
}

[data-theme="light"] .ad-artifact-id {
    color: var(--text-faint);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ad-back-link {
    color: var(--text-faint);
}

[data-theme="light"] .ad-main-image-wrap {
    background: var(--bg-surface-3);
}

[data-theme="light"] .ad-thumb {
    background: var(--bg-surface-3);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ad-image-badge {
    background: rgba(245, 240, 230, 0.85);
}

[data-theme="light"] .ad-btn-disabled {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: #9e9080;
}

[data-theme="light"] .ad-btn-disabled:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ad-btn-disabled .material-symbols-outlined {
    color: #9e9080;
}

/* ── Stat rows ────────────────────────────────────────────── */
[data-theme="light"] .stat-row {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .stat-label {
    color: var(--text-muted);
}

/* ── Login / Signup pages ──────────────────────────────────── */
[data-theme="light"] .bg-surface-dark\/90,
[data-theme="light"] [class*="bg-surface-dark"] {
    background-color: rgba(240, 234, 220, 0.92) !important;
}

/* ── Gallery Collection cards ─────────────────────────────── */
[data-theme="light"] .section-gallery-header-super,
[data-theme="light"] .gallery-header-super {
    color: var(--text-muted);
}

/* ── Back to Top ──────────────────────────────────────────── */
[data-theme="light"] .back-to-top {
    box-shadow: 0 0 20px rgba(214, 140, 28, 0.3);
}

/* ── Logo in light mode ───────────────────────────────────── */
[data-theme="light"] .filter-text-glow {
    filter: brightness(0) saturate(100%) invert(20%) sepia(10%) saturate(600%) hue-rotate(5deg) brightness(50%) contrast(90%);
}

/* ── Theme toggle button in light mode ───────────────────── */
[data-theme="light"] .theme-toggle-btn {
    border-color: rgba(90, 78, 60, 0.25);
    color: rgba(90, 78, 60, 0.8);
}

[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(214, 140, 28, 0.1);
    border-color: rgba(214, 140, 28, 0.4);
    color: var(--color-primary);
}

/* ── Mobile nav button in light mode ─────────────────────── */
[data-theme="light"] #mobile-menu-btn {
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--text-primary-content);
}

/* ── Tailwind utility overrides for light mode ────────────── */
[data-theme="light"] .bg-background-dark\/50 {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] .text-gray-400 {
    color: var(--text-muted) !important;
}

[data-theme="light"] .text-gray-500 {
    color: var(--text-faint) !important;
}

[data-theme="light"] .text-gray-200 {
    color: var(--text-primary-content) !important;
}

[data-theme="light"] .border-primary\/20 {
    border-color: rgba(214, 140, 28, 0.25) !important;
}

/* ── Collection section backgrounds ──────────────────────── */
[data-theme="light"] .section-collections,
[data-theme="light"] .section-spotlight,
[data-theme="light"] .section-artifacts {
    background-color: var(--bg-page);
}

/* ── Gallery section text ─────────────────────────────────── */
[data-theme="light"] .gallery-title,
[data-theme="light"] .section-title,
[data-theme="light"] .section-header-title {
    color: var(--text-heading);
}

[data-theme="light"] .gallery-subtitle,
[data-theme="light"] .section-subtitle {
    color: var(--text-secondary);
}

/* ── nav-popup-count / badge in light ───────────────────────*/
[data-theme="light"] .nav-popup-count {
    background: rgba(214, 140, 28, 0.12);
    border-color: rgba(214, 140, 28, 0.25);
}

/* ── Page artifacts header ────────────────────────────────── */
[data-theme="light"] .page-artifacts-header {
    color: var(--text-heading);
}

/* ── 1. Hero Section — lighter overlay in light mode ─────── */
[data-theme="light"] .hero-wrapper::before {
    /* Reduce opacity and use a warm-dark fade so the photo is visible */
    background: linear-gradient(rgba(0, 0, 0, 0.25) 0%,
            rgba(20, 15, 5, 0.75) 100%);
}

/* Hero subtitle sits on the dark overlay, so keep it light/readable */
[data-theme="light"] .hero-wrapper .hero-subtitle {
    color: rgba(255, 248, 235, 0.92);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

/* ── 2. Ritual image — remove grayscale + dark overlay in light mode ── */
[data-theme="light"] .ritual-image {
    filter: grayscale(0%) contrast(1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .ritual-image:hover {
    filter: grayscale(0%) contrast(1.05) brightness(1.05);
}

[data-theme="light"] .ritual-image-overlay {
    display: none;
}

/* ── 3. Section gallery — light/parchment background ─────── */
[data-theme="light"] .section-gallery {
    background: #d8cfc0;
    border-top-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .gallery-badge-icon {
    background: #d8cfc0;
    border-color: rgba(214, 140, 28, 0.3);
}

[data-theme="light"] .gallery-title {
    color: #1a1510;
}

[data-theme="light"] .gallery-badge {
    color: var(--color-primary);
}

[data-theme="light"] .gallery-subtitle {
    color: #5a4e3c;
}

[data-theme="light"] .gallery-divider-line {
    background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .hp-collection-title {
    color: #2d2720;
}

[data-theme="light"] .hp-card-name {
    color: #f0ece4;
}

[data-theme="light"] .gallery-badge-img {
    /* Keep icon visible on parchment */
    filter: brightness(0) saturate(100%) invert(25%) sepia(30%) saturate(800%) hue-rotate(20deg) brightness(60%);
}

/* ============================================================
   ARTIFACTS PAGE — LIGHT THEME OVERRIDES
   ============================================================ */

/* Override the per-component CSS variables defined on .artifacts-page */
[data-theme="light"] .artifacts-page {
    --surface: #f5f0e8;
    --surface-raised: #ede6d8;
    --surface-card: #eae3d5;
    --text-primary: #1a1510;
    --text-secondary: #5a4e3c;
    --text-muted: #8a7d68;
    --gold-dim: rgba(214, 140, 28, 0.2);
    --gold-glow: rgba(214, 140, 28, 0.25);
}

/* Page background */
[data-theme="light"] .artifacts-page {
    background: #f5f0e8;
}

/* Grain texture — barely visible on light bg */
[data-theme="light"] .artifacts-page::before {
    opacity: 0.015;
}

/* Hero section background */
[data-theme="light"] .artifacts-hero {
    background: transparent;
}

/* Hero heading & subtitle */
[data-theme="light"] .hero-heading {
    color: #1a1510;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .hero-subtitle {
    color: #5a4e3c;
}

/* Breadcrumb */
[data-theme="light"] .artifacts-breadcrumb,
[data-theme="light"] .artifacts-breadcrumb a {
    color: #8a7d68;
}

[data-theme="light"] .artifacts-breadcrumb a:hover {
    color: var(--color-primary);
}

[data-theme="light"] .artifacts-breadcrumb .bc-active {
    color: var(--color-primary);
}

/* Separator lines */
[data-theme="light"] .sep-line {
    background: linear-gradient(90deg, transparent, rgba(214, 140, 28, 0.25));
}

[data-theme="light"] .sep-line-r {
    background: linear-gradient(90deg, rgba(214, 140, 28, 0.25), transparent);
}

/* Search field */
[data-theme="light"] .search-field {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.15);
    color: #1a1510;
}

[data-theme="light"] .search-field::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .search-field:focus {
    background: rgba(0, 0, 0, 0.06);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(214, 140, 28, 0.1);
}

[data-theme="light"] .search-icon {
    color: rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .search-field:focus~.search-icon {
    color: var(--color-primary);
}

/* Product cards */
[data-theme="light"] .product-card {
    background: #ede6d8;
    border-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .product-card:hover {
    border-color: rgba(214, 140, 28, 0.35);
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.18), 0 0 30px rgba(214, 140, 28, 0.06);
}

[data-theme="light"] .card-image-wrap {
    background: #d9d0bf;
}

/* Card text areas — title sits on the dark gradient overlay, keep it light */
[data-theme="light"] .card-title {
    color: #f0ece4;
}

[data-theme="light"] .card-price {
    color: var(--color-primary);
}

[data-theme="light"] .card-category-tag {
    background: rgba(214, 140, 28, 0.15);
    color: #7a5c10;
    border-color: rgba(214, 140, 28, 0.2);
}

/* Card overlay gradient — keep it subtle */
[data-theme="light"] .card-gradient-top {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 50%, rgba(20, 15, 5, 0.65) 100%);
}

/* Back-home button */
[data-theme="light"] .btn-go-home {
    color: var(--color-primary);
    border-color: rgba(214, 140, 28, 0.3);
}

/* Back-to-top button */
[data-theme="light"] .btt-btn {
    background: #e8dfc8;
    border-color: rgba(214, 140, 28, 0.25);
    color: var(--color-primary);
}

[data-theme="light"] .btt-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Artifacts empty state */
[data-theme="light"] .artifacts-empty .material-symbols-outlined,
[data-theme="light"] .artifacts-empty p {
    color: #8a7d68;
}

/* Side accent lines */
[data-theme="light"] .side-accent-l,
[data-theme="light"] .side-accent-r {
    opacity: 0.12;
}

/* ============================================================
   USER AREA — LIGHT THEME OVERRIDES
   ============================================================ */

/* Wrapper & layout */
[data-theme="light"] .ua-wrapper {
    background-color: #f5f0e8;
}

[data-theme="light"] .ua-sidebar {
    background: linear-gradient(180deg, #ede8de 0%, #e5dece 100%);
    border-right-color: rgba(214, 140, 28, 0.2);
}

[data-theme="light"] .ua-main {
    background-color: #f5f0e8;
}

/* Sidebar user card */
[data-theme="light"] .ua-user-card {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ua-user-name {
    color: #1a1510;
}

[data-theme="light"] .ua-user-email {
    color: #5a4e3c;
}

/* Sidebar nav */
[data-theme="light"] .ua-nav-item {
    color: #5a4e3c;
}

[data-theme="light"] .ua-nav-item:hover {
    background: rgba(214, 140, 28, 0.08);
    color: #1a1510;
}

[data-theme="light"] .ua-nav-item.active {
    background: rgba(214, 140, 28, 0.1);
    color: var(--color-primary);
}

[data-theme="light"] .ua-logout-btn {
    color: #7a6d58;
}

/* Page header */
[data-theme="light"] .ua-page-title {
    color: #1a1510;
}

[data-theme="light"] .ua-page-subtitle {
    color: #5a4e3c;
}

/* Cards */
[data-theme="light"] .ua-card {
    background: #ede8de;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ua-card-title {
    color: #1a1510;
}

[data-theme="light"] .ua-card-title-line {
    background: rgba(214, 140, 28, 0.3);
}

/* Profile header section */
[data-theme="light"] .ua-profile-name {
    color: #1a1510;
}

[data-theme="light"] .ua-profile-email {
    color: #5a4e3c;
}

[data-theme="light"] .ua-profile-joined {
    color: #7a6d58;
}

/* Profile info rows (read-only view) — overrides inline <style> */
[data-theme="light"] .ua-profile-info-row {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .ua-profile-info-label {
    color: #7a6d58;
}

[data-theme="light"] .ua-profile-info-value {
    color: #1a1510;
}

/* Form elements */
[data-theme="light"] .ua-label {
    color: #2d2720;
}

[data-theme="light"] .ua-input {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(214, 140, 28, 0.3);
    color: #1a1510;
}

[data-theme="light"] .ua-input:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-primary);
}

[data-theme="light"] .ua-input-disabled {
    background: rgba(0, 0, 0, 0.04);
    color: #7a6d58;
}

[data-theme="light"] .ua-help-text {
    color: #8a7d68;
}

/* Stat cards */
[data-theme="light"] .ua-stat-card {
    background: #ede8de;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ua-stat-value {
    color: #1a1510;
}

[data-theme="light"] .ua-stat-label {
    color: #7a6d58;
}

/* Settings toggles */
[data-theme="light"] .ua-toggle-title {
    color: #1a1510;
}

[data-theme="light"] .ua-toggle-desc {
    color: #7a6d58;
}

[data-theme="light"] .ua-toggle-item {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

/* Account info rows */
[data-theme="light"] .ua-account-info-row {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .ua-account-info-label {
    color: #7a6d58;
}

[data-theme="light"] .ua-account-info-value {
    color: #1a1510;
}

/* Order / detail rows */
[data-theme="light"] .ua-detail-info-row {
    color: #2d2720;
}

[data-theme="light"] .ua-order-notes-text {
    color: #2d2720;
}

/* Filter tabs */
[data-theme="light"] .ua-filter-tab {
    color: #5a4e3c;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ua-filter-tab:hover {
    color: #1a1510;
    border-color: rgba(0, 0, 0, 0.2);
}

/* Address cards */
[data-theme="light"] .ua-address-card {
    background: #ede8de;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ua-address-title {
    color: #1a1510;
}

[data-theme="light"] .ua-address-details p {
    color: #5a4e3c;
}

[data-theme="light"] .ua-address-actions {
    border-top-color: rgba(0, 0, 0, 0.07);
}

/* Empty states */
[data-theme="light"] .ua-empty-state {
    background: #ede8de;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ua-empty-title {
    color: #2d2720;
}

[data-theme="light"] .ua-empty-text {
    color: #7a6d58;
}

/* Mobile toggle */
[data-theme="light"] .ua-mobile-toggle {
    background: #ede8de;
    border-color: rgba(0, 0, 0, 0.12);
    color: #2d2720;
}

/* Timeline */
[data-theme="light"] .ua-timeline-dot {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .ua-timeline-label {
    color: #8a7d68;
}

[data-theme="light"] .ua-timeline-step.completed .ua-timeline-label {
    color: #2d2720;
}

[data-theme="light"] .ua-timeline-line {
    background: rgba(0, 0, 0, 0.08);
}

/* Messages */
[data-theme="light"] .ua-message {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1510;
}