/* =========================================
   MONTSERRAT — self-hosted (fonts/*.woff2), variable-weight family used
   sitewide via --font-main. Loading the real weights (200-900) is what
   makes the font-weight values already set throughout the CSS actually
   render distinctly instead of collapsing to the browser's default
   weight, since no webfont was previously being loaded at all.
   ========================================= */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/MontserratExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/MontserratLight.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/MontserratRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/MontserratMedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/MontserratSemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/MontserratBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/MontserratExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/MontserratBlack.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   CORE VARIABLES & RESET
   ========================================= */
:root {
    --bg-body: #050505;
    --bg-card: #121212;
    --bg-header: #050505;

    --accent-gold: #c2a05d;
    --accent-gold-hover: #d4b06e;
    --accent-green: #2d5a27;

    --text-main: #ffffff;
    --text-secondary: #999999;
    --border-light: rgba(255, 255, 255, 0.08);

    --font-main: 'Montserrat', system-ui, -apple-system, sans-serif;
    --container-width: 1600px;
    --header-height: 80px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }

html {
    overflow-x: hidden;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-main);
    font-weight: 400;
    line-height: 1.6;
}

body.no-scroll { overflow: hidden; }

/* Sticky elements (header, catalog sidebar, product photo column) are no
   longer patched here — js/utils/scroll-lock.js now freezes each of them
   individually (measuring its exact on-screen box and pinning it there
   with an inline style, plus a same-size spacer so nothing reflows into
   the gap) whenever scroll is locked, which handles every one of them
   correctly regardless of which layout mode its container uses (block
   flow, flex, or grid) — a single CSS rule here couldn't. See that
   file's top comment for the full explanation. */

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button {
    border: none; background: none; font-family: inherit; cursor: pointer; outline: none;
    -webkit-appearance: none; appearance: none;
}

/* Safari/WebKit renders native chrome (rounded, gray/white capsule) on
   text/number inputs unless appearance is explicitly reset — Chrome and
   Opera (both Chromium) don't need this, which is why the bug only shows
   in Safari. */
input[type="text"], input[type="number"], input[type="email"], input[type="tel"] {
    -webkit-appearance: none; appearance: none;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }

/* =========================================
   LAYOUT UTILITIES
   ========================================= */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
}

/* Longhand on purpose: a shorthand `padding: 100px 0` here would silently
   zero out left/right padding on any element, including ones that also
   carry `.container` (which relies on its own 40px left/right padding).
   That exact bug caused .catalog-layout to render 40px wider than the
   header on each side. Longhand only ever touches top/bottom. */
.section-padding { padding-top: 100px; padding-bottom: 100px; }

.section-header { text-align: center; margin-bottom: 60px; }

.section-title {
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    background: linear-gradient(45deg, #fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    color: var(--accent-gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 500;
}

/* TEXT SWITCHER */
.text-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}
.switcher-item {
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666666;
    cursor: pointer;
    transition: 0.3s ease;
    position: relative;
}
.switcher-item.active { color: #ffffff; }
.switcher-item:hover:not(.active) { color: #999999; }
.switcher-separator { width: 1px; height: 24px; background: #444; }