/* ----------------------------------------------
   GLOBAL CSS – Shared Variables, Reset, Utilities
   Used across index.html and store.html
---------------------------------------------- */
:root {
    --bg: #050505;
    --surface: #0f0f0f;
    --surface-soft: #161616;
    --text: #d4cdbb;
    --muted: #d8c8ad;
    --line: #d8aa3f33;
    --gold: #d8aa3f;
    --gold-soft: #f3de9b;
    --shadow: 0 24px 60px #00000073;
    --transition-default: 180ms ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: radial-gradient(circle at top, rgba(216, 170, 63, 0.12), transparent 28%),
        linear-gradient(180deg, #040404 0%, #0a0a0a 100%);
    color: var(--text);
    font-family: "Inter", sans-serif;
    line-height: 1.5;
    min-height: 100vh;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
}

h3 {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
}

a {
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-default), border-color var(--transition-default);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utility / Eyebrow style */
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    color: var(--gold-soft);
    margin-bottom: 0.5rem;
}

/* Buttons & interactive elements */
.primary-button,
.secondary-button,
.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 500;
    transition: transform var(--transition-default), background-color var(--transition-default);
    cursor: pointer;
}

.primary-button,
.nav-button {
    border: 1px solid rgba(243, 222, 155, 0.35);
    background: linear-gradient(180deg, rgba(216, 170, 63, 0.22), rgba(216, 170, 63, 0.1));
    box-shadow: var(--shadow);
    color: var(--text);
}

.secondary-button {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
}

.primary-button:hover,
.secondary-button:hover,
.nav-button:hover {
    transform: translateY(-2px);
}

/* Shared container width (but each page can define its own layout) */
.site-header,
.hero,
.content-section,
.site-footer,
.catalog-header,
.filter-row,
.catalog-grid {
    width: min(1120px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

/* Responsive base */
@media (max-width: 640px) {

    .site-header,
    .hero,
    .content-section,
    .site-footer,
    .catalog-header,
    .filter-row,
    .catalog-grid {
        width: min(100% - 28px, 1120px);
    }
}