/** Shopify CDN: Minification failed

Line 767:0 Unexpected "}"

**/
/* =========================================================
   NOBLE MACHINA — Shopify theme styles
   Organized by section; most sections map 1:1 to a file in
   sections/. Design tokens live in :root / .theme-dark and
   are partly exposed as theme settings (see layout/theme.liquid).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- color tokens: light "shop" theme (default) ---- */
  --color-bg: #f7f2e8;
  --color-bg-alt: #efe6d3;
  --color-surface: #ffffff;
  --color-surface-2: #fbf6ea;
  --color-border: rgba(37,27,16,0.10);
  --color-border-strong: rgba(37,27,16,0.20);
  --color-text: #291f14;
  --color-text-dim: #5c5142;
  --color-text-mute: #8c8171;
  --color-copper: #a35a25;
  --color-copper-light: #bd6f34;
  --color-copper-dark: #7c4d24;
  --color-gold: #a67c3d;
  --color-success: #4f8f57;

  /* ---- typography ---- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- layout ---- */
  --container: 1320px;
  --container-narrow: 860px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .25s;
  --dur-med: .55s;
  --dur-slow: .9s;

  --shadow-sm: 0 4px 18px rgba(30,20,10,.10);
  --shadow-lg: 0 40px 90px -30px rgba(30,20,10,.25);
  --shadow-copper: 0 20px 50px -20px rgba(163,90,37,.45);
}

/* ---- color tokens: dark "brand" theme, scoped to .theme-dark subtrees ----
   Used for the cinematic hero/story chapter and persistent UI chrome
   (header, mobile nav, modal, cart drawer, toast, preloader). Everything
   downstream (buttons, cards, borders) reads the same variable names, so
   dropping .theme-dark on a section is enough to flip its whole subtree. */
.theme-dark{
  /* re-assert the actual `color` property (not just the custom props) so
     descendants that don't set their own `color: var(--color-text)` — e.g.
     h1/h2 elements — inherit the dark value instead of whatever body
     resolved to. Without this, only elements that explicitly reference
     var(--color-text) themselves would flip; plain inherited text would
     stay stuck at the light theme's near-black. */
  color: var(--color-text);
  --color-bg: #0d0b09;
  --color-bg-alt: #131110;
  --color-surface: #17140f;
  --color-surface-2: #1e1a15;
  --color-border: rgba(244,239,228,0.09);
  --color-border-strong: rgba(244,239,228,0.18);
  --color-text: #f5efe3;
  --color-text-dim: #cdc2ae;
  --color-text-mute: #8f8574;
  --color-copper: #c1793d;
  --color-copper-light: #e3a566;
  --color-copper-dark: #7c4d24;
  --color-gold: #d8b57d;
  --color-success: #7fae7a;
  --shadow-sm: 0 4px 18px rgba(0,0,0,.35);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.7);
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ cursor:pointer; background:none; border:none; }
button:disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background: var(--color-copper); color:#0a0908; }

/* subtle film-grain texture for a tactile "premium" feel */
body::before{
  content:"";
  position: fixed; inset:0;
  z-index: 1;
  pointer-events:none;
  opacity:.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.container--narrow{ max-width: var(--container-narrow); }

section{ position: relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--color-copper-light); font-weight:600; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background: var(--color-copper); }

.section-head{ max-width:680px; margin-bottom: clamp(36px,6vw,64px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-title{
  font-family: var(--font-display); font-weight:500; font-style: normal;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.08; letter-spacing:-.01em;
}
.section-title em{ font-style: italic; color: var(--color-copper-light); font-weight:400; }
.section-desc{ margin-top:16px; color: var(--color-text-dim); font-size:1.05rem; max-width: 52ch; }
.section-head--center .section-desc{ margin-inline:auto; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --btn-bg: var(--color-text);
  --btn-fg: var(--color-bg);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size:.92rem; font-weight:600; letter-spacing:.02em;
  position:relative; overflow:hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  white-space:nowrap;
}
.btn:hover{ box-shadow: var(--shadow-copper); transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px) scale(.98); }
.btn--copper{ --btn-bg: linear-gradient(135deg, var(--color-copper-light), var(--color-copper-dark)); --btn-fg:#140d06; }
.btn--ghost{
  --btn-bg: transparent; --btn-fg: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.btn--ghost:hover{ border-color: var(--color-copper); }
.btn--sm{ padding: 11px 20px; font-size:.82rem; }
.btn--block{ width:100%; }
.btn svg{ width:16px; height:16px; flex-shrink:0; }

.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; color: var(--color-copper-light); }
.link-arrow svg{ width:16px; height:16px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover svg{ transform: translateX(5px); }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position: fixed; inset:0; z-index: 1000;
  background: var(--color-bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px;
  transition: opacity .7s var(--ease-out), visibility .7s;
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__mark{
  font-family: var(--font-display); font-size: 2rem; letter-spacing:.04em; color: var(--color-text);
}
.preloader__mark em{ color: var(--color-copper-light); font-style:italic; }
.preloader__bar{ width:220px; height:1px; background: var(--color-border-strong); position:relative; overflow:hidden; }
.preloader__bar::after{
  content:""; position:absolute; inset:0; width:40%; background: var(--color-copper-light);
  animation: loadbar 1.1s var(--ease-in-out) infinite;
}
@keyframes loadbar{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(350%);} }

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.scroll-progress{
  position: fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--color-copper), var(--color-gold));
  z-index: 998;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  padding: 22px 0;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-med), padding var(--dur-med), backdrop-filter var(--dur-med);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.is-scrolled{
  padding: 14px 0;
  background: rgba(10,9,8,.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
}
.site-header.is-hidden{ transform: translateY(-100%); }

.logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size:1.4rem; letter-spacing:.01em; }
.logo em{ font-style: italic; color: var(--color-copper-light); }
.logo svg{ width:26px; height:26px; color: var(--color-copper-light); }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-size:.88rem; font-weight:500; color: var(--color-text-dim);
  position:relative; padding:4px 0;
  transition: color var(--dur-fast);
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0%;
  background: var(--color-copper-light); transition: width var(--dur-fast) var(--ease-out);
}
.main-nav a:hover{ color: var(--color-text); }
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--color-border); color: var(--color-text);
  position:relative; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.icon-btn:hover{ border-color: var(--color-copper); background: rgba(193,121,61,.08); }
.icon-btn svg{ width:18px; height:18px; }
.cart-count{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  background: var(--color-copper-light); color:#140d06; border-radius:999px;
  font-size:.65rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  transform: scale(0); transition: transform .3s var(--ease-out);
}
.cart-count.is-visible{ transform: scale(1); }
.cart-count.is-bumped{ animation: bump .4s var(--ease-out); }
@keyframes bump{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.4);} }

.nav-toggle{ display:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height: 100vh; display:flex; flex-direction:column; justify-content:center;
  padding-top: 140px; padding-bottom: 80px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(193,121,61,.16), transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(193,121,61,.10), transparent 60%),
    var(--color-bg);
}
.hero__glow{
  position:absolute; width:640px; height:640px; border-radius:50%;
  background: radial-gradient(circle, rgba(216,181,125,.18), transparent 70%);
  top:10%; right:-10%; filter: blur(10px);
  will-change: transform;
}
.hero__grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center;
}
.hero__eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--color-copper-light); box-shadow: 0 0 12px var(--color-copper-light); }
.hero__eyebrow span{ font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color: var(--color-text-dim); }

.hero__title{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2.6rem, 6vw, 5.4rem); line-height:1.02; letter-spacing:-.02em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line span{ display:inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); }
.hero.is-ready .hero__title .line span{ transform: translateY(0); }
.hero__title .line:nth-child(2) span{ transition-delay:.08s; }
.hero__title .line:nth-child(3) span{ transition-delay:.16s; }
.hero__title em{ font-style:italic; color: var(--color-copper-light); }

.hero__desc{ margin-top:26px; max-width:46ch; font-size:1.08rem; color: var(--color-text-dim); }
.hero__cta{ margin-top:40px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.hero__cta-note{ font-size:.82rem; color: var(--color-text-mute); }

.hero__stats{ display:flex; gap:40px; margin-top:60px; }
.hero__stat b{ display:block; font-family: var(--font-display); font-size:1.9rem; color: var(--color-text); }
.hero__stat span{ font-size:.78rem; color: var(--color-text-mute); letter-spacing:.03em; }

.hero__visual{ position:relative; height: 560px; }
.hero__ring{
  position:absolute; inset:0; margin:auto; width:420px; height:420px; border-radius:50%;
  border:1px solid var(--color-border-strong);
}
.hero__ring::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px dashed rgba(216,181,125,.35);
  animation: spin 40s linear infinite;
}
.hero__ring::after{
  content:""; position:absolute; inset:60px; border-radius:50%;
  border:1px solid var(--color-border);
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.hero__machine{
  position:absolute; inset:0; margin:auto; width:230px; height:185px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.6));
  animation: hero-bean-breathe 8s ease-in-out infinite;
}
.hero__machine svg{ width:100%; height:100%; }
@keyframes hero-bean-breathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.02); } }

.hero__wisps{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__wisp{
  position:absolute; bottom:62%; left:50%;
  width:3px; border-radius:999px;
  background: linear-gradient(180deg, rgba(245,239,227,0) 0%, rgba(245,239,227,.5) 45%, rgba(245,239,227,0) 100%);
  transform-origin: bottom center;
  animation: hero-wisp-rise 5.5s ease-in infinite;
}
.hero__wisp--1{ height:110px; margin-left:-30px; animation-delay:0s; }
.hero__wisp--2{ height:135px; margin-left:-2px; animation-delay:1.4s; }
.hero__wisp--3{ height:100px; margin-left:26px; animation-delay:2.8s; }
@keyframes hero-wisp-rise{
  0%   { opacity:0; transform: translateY(0) translateX(0) rotate(-4deg) scaleY(.7); }
  18%  { opacity:.85; }
  100% { opacity:0; transform: translateY(-130px) translateX(14px) rotate(6deg) scaleY(1.15); }
}

.hero__badge{
  position:absolute; padding:12px 18px; border-radius: var(--radius-md);
  background: rgba(22,19,15,.85); border:1px solid var(--color-border-strong);
  backdrop-filter: blur(10px); font-size:.8rem; display:flex; align-items:center; gap:10px;
  box-shadow: var(--shadow-sm);
  animation: float 6s ease-in-out infinite;
}
.hero__badge b{ display:block; font-family:var(--font-display); font-size:1rem; color: var(--color-text); }
.hero__badge--1{ top:8%; left:0; }
.hero__badge--2{ bottom:12%; right:0; animation-delay: 1.5s; }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--color-text-mute); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero__scroll-line{ width:1px; height:40px; background: linear-gradient(var(--color-copper-light), transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; top:-40px; left:0; width:100%; height:40px; background: var(--color-copper-light);
  animation: scrolldown 2s var(--ease-in-out) infinite;
}
@keyframes scrolldown{ to{ top:100%; } }

/* =========================================================
   MARQUEE (brand strip)
   ========================================================= */
.marquee-section{ border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); padding: 26px 0; }
.marquee{ overflow:hidden; white-space:nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track{ display:inline-flex; gap:64px; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
.marquee__track span{ font-family: var(--font-display); font-size:1.3rem; color: var(--color-text-mute); letter-spacing:.02em; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* =========================================================
   REVEAL UTILITY
   ========================================================= */
.reveal{ opacity:0; transform: translateY(36px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--delay, 0s); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-scale{ opacity:0; transform: scale(.92); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--delay, 0s); }
.reveal-scale.is-visible{ opacity:1; transform: scale(1); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{ opacity:1; transform:none; transition:none; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   FEATURED (bestsellers)
   ========================================================= */
.featured{ padding: 120px 0; }
.featured__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.featured__grid{
  margin-top: 56px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.featured__grid .product-card:nth-child(1){ grid-column: span 2; grid-row: span 2; }
.featured__grid .product-card:nth-child(1) .product-card__visual{ height: 420px; }

/* =========================================================
   PRODUCT CARD
   ========================================================= */
.product-card{
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
  border:1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow:hidden; position:relative;
  transition: border-color var(--dur-fast), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  display:flex; flex-direction:column;
}
.product-card:hover{ border-color: var(--color-border-strong); box-shadow: var(--shadow-lg); }

.product-card__visual{
  position:relative; height: 240px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:pointer;
  background:
    radial-gradient(circle at 30% 20%, rgba(216,181,125,.16), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(193,121,61,.14), transparent 55%);
}
.product-card__visual::before{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.35;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
}
.product-card__icon{
  width: 46%; max-width:150px; color: var(--color-copper-light); opacity:.92;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.5));
  transition: transform .6s var(--ease-out);
  position:relative; z-index:1;
}
.product-card:hover .product-card__icon{ transform: translateY(-8px) scale(1.04) rotate(-1deg); }

.product-card__badge{
  position:absolute; top:16px; left:16px; z-index:2;
  padding:6px 12px; border-radius: var(--radius-pill);
  background: rgba(20,15,9,.72); border:1px solid var(--color-border-strong);
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color: var(--color-gold);
  backdrop-filter: blur(6px);
}
.product-card__wish{
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(10,9,8,.55); border:1px solid var(--color-border-strong); color: var(--color-text);
  opacity:0; transform: translateY(-6px); transition: all var(--dur-fast) var(--ease-out);
}
.product-card:hover .product-card__wish{ opacity:1; transform:translateY(0); }
.product-card__wish svg{ width:16px; height:16px; }

.product-card__body{ padding: 22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-card__brand{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--color-text-mute); }
.product-card__name{ font-family: var(--font-display); font-size:1.32rem; }
.product-card__tagline{ font-size:.86rem; color: var(--color-text-dim); flex:1; }
.product-card__specs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.product-card__specs span{
  font-size:.68rem; padding:5px 10px; border-radius: var(--radius-pill);
  border:1px solid var(--color-border); color: var(--color-text-mute);
}
.product-card__footer{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:16px; border-top:1px solid var(--color-border); }
.product-card__price{ display:flex; flex-direction:column; }
.product-card__price b{ font-family: var(--font-display); font-size:1.2rem; }
.product-card__price s{ font-size:.75rem; color: var(--color-text-mute); }
.product-card__add{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--color-text); color: var(--color-bg); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.product-card__add:hover{ background: var(--color-copper-light); transform: rotate(90deg); }
.product-card__add svg{ width:18px; height:18px; }

/* =========================================================
   CATALOG
   ========================================================= */
.catalog{
  padding: 120px 0; border-top:1px solid var(--color-border);
  background:
    radial-gradient(ellipse 55% 40% at 92% 0%, rgba(163,90,37,.07), transparent 60%),
    var(--color-bg-alt);
}
.catalog__toolbar{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  margin-bottom: 40px; padding-bottom: 28px; border-bottom:1px solid var(--color-border);
}
.catalog__filters{ display:flex; flex-wrap:wrap; gap:10px; }
.filter-chip{
  padding: 10px 18px; border-radius: var(--radius-pill); border:1px solid var(--color-border-strong);
  font-size:.82rem; color: var(--color-text-dim); transition: all var(--dur-fast);
}
.filter-chip:hover{ border-color: var(--color-copper); color: var(--color-text); }
.filter-chip.is-active{ background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

.catalog__controls{ display:flex; align-items:center; gap:12px; }
.search-input{
  display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius: var(--radius-pill);
  border:1px solid var(--color-border-strong); min-width:220px;
}
.search-input svg{ width:16px; height:16px; color: var(--color-text-mute); flex-shrink:0; }
.search-input input{ background:none; border:none; outline:none; width:100%; font-size:.86rem; }
.search-input input::placeholder{ color: var(--color-text-mute); }
.sort-select{
  padding:10px 16px; border-radius: var(--radius-pill); border:1px solid var(--color-border-strong);
  background: var(--color-bg-alt); font-size:.86rem; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%238a8172'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 16px center; padding-right:32px;
}

.catalog__count{ font-size:.82rem; color: var(--color-text-mute); margin-bottom:24px; }
.catalog__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.catalog__grid .product-card__visual{ min-height:200px; }

.catalog__empty{ display:none; text-align:center; padding: 80px 0; color: var(--color-text-mute); }
.catalog__empty.is-visible{ display:block; }

.load-more{ display:flex; justify-content:center; margin-top:52px; }

/* =========================================================
   TRUST / STATS
   ========================================================= */
.trust{ padding: 110px 0; }
.trust__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top:56px; }
.trust__card{
  padding: 32px 26px; border:1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-fast);
}
.trust__card:hover{ transform: translateY(-6px); border-color: var(--color-border-strong); }
.trust__card svg{ width:30px; height:30px; color: var(--color-copper-light); margin-bottom:20px; }
.trust__card h3{ font-family: var(--font-display); font-size:1.15rem; margin-bottom:10px; }
.trust__card p{ font-size:.88rem; color: var(--color-text-dim); }

.stats{ display:flex; justify-content:space-between; margin-top:90px; padding-top:56px; border-top:1px solid var(--color-border); flex-wrap:wrap; gap:32px; }
.stat{ text-align:left; }
.stat b{ display:block; font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3.4rem); color: var(--color-text); }
.stat span{ font-size:.82rem; color: var(--color-text-mute); letter-spacing:.03em; }

/* =========================================================
   BRAND STORY (parallax)
   ========================================================= */
.story{
  padding: 0; min-height: 640px; display:flex; align-items:center; position:relative; overflow:hidden;
  background: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
  border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
}
.story__bg{
  position:absolute; inset:-10% -10%; z-index:0;
  background-image: url('https://images.unsplash.com/photo-1442512595331-e89e73853f31?q=80&w=2000&auto=format&fit=crop');
  background-size:cover; background-position:center;
  opacity:.28; filter: grayscale(.4) contrast(1.1);
  will-change: transform;
}
.story::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, var(--color-bg) 10%, transparent 55%, var(--color-bg) 100%); z-index:1; }
.story__content{ position:relative; z-index:2; max-width: 640px; padding: 120px 0; }
.story__content p{ margin-top:22px; color: var(--color-text-dim); font-size:1.05rem; }
.story__quote{ margin-top:34px; padding-left:22px; border-left:2px solid var(--color-copper); font-family: var(--font-display); font-style:italic; font-size:1.25rem; color: var(--color-text); }
.story__quote cite{ display:block; margin-top:14px; font-family: var(--font-body); font-style:normal; font-size:.8rem; color: var(--color-text-mute); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{ padding: 120px 0; }
.testi-track-wrap{ overflow:hidden; }
.testi-track{ display:flex; gap:24px; transition: transform .6s var(--ease-out); }
.testi-card{
  flex: 0 0 calc(33.333% - 16px); padding:32px; border:1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); display:flex; flex-direction:column; gap:18px;
}
.testi-card__stars{ display:flex; gap:4px; color: var(--color-copper-light); }
.testi-card__stars svg{ width:16px; height:16px; }
.testi-card p{ color: var(--color-text-dim); font-size:.95rem; }
.testi-card__author{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testi-card__avatar{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--color-copper-light), var(--color-copper-dark));
  font-family: var(--font-display); font-weight:600; color:#140d06;
}
.testi-card__author b{ display:block; font-size:.9rem; }
.testi-card__author span{ font-size:.78rem; color: var(--color-text-mute); }
.testi-nav{ display:flex; justify-content:center; gap:14px; margin-top:44px; }
.testi-nav button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--color-border-strong);
  display:flex; align-items:center; justify-content:center; transition: all var(--dur-fast);
}
.testi-nav button:hover{ border-color: var(--color-copper); background: rgba(193,121,61,.08); }
.testi-nav svg{ width:18px; height:18px; }

/* =========================================================
   CONSULTATION / CONTACT FORM
   ========================================================= */
.consult{
  padding: 120px 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
  background:
    radial-gradient(ellipse 50% 45% at 6% 100%, rgba(163,90,37,.07), transparent 60%),
    var(--color-bg-alt);
}
.consult__grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:center; }
.consult__list{ margin-top:28px; display:flex; flex-direction:column; gap:18px; }
.consult__list li{ display:flex; gap:14px; align-items:flex-start; font-size:.92rem; color: var(--color-text-dim); }
.consult__list svg{ width:20px; height:20px; color: var(--color-copper-light); flex-shrink:0; margin-top:2px; }

.form-card{ padding: 40px; border-radius: var(--radius-lg); border:1px solid var(--color-border); background: var(--color-surface); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.78rem; color: var(--color-text-mute); }
.field input, .field select{
  padding: 14px 16px; border-radius: var(--radius-sm); border:1px solid var(--color-border-strong);
  background: var(--color-bg-alt); outline:none; transition: border-color var(--dur-fast);
}
.field input:focus, .field select:focus{ border-color: var(--color-copper); }
.field--full{ grid-column: 1 / -1; }
.form-note{ margin-top:14px; font-size:.76rem; color: var(--color-text-mute); text-align:center; }
.form-success{
  display:none; text-align:center; padding: 30px 0; flex-direction:column; align-items:center; gap:14px;
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:52px; height:52px; color: var(--color-success); }
.form-fields.is-hidden{ display:none; }

/* =========================================================
   NEWSLETTER STRIP
   ========================================================= */
.newsletter{ padding: 80px 0; text-align:center; }
.newsletter input:focus{ border-color: var(--color-copper); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ padding: 90px 0 30px; border-top:1px solid var(--color-border); }
.footer__grid{ display:grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer__about p{ margin-top:18px; color: var(--color-text-dim); font-size:.9rem; max-width:34ch; }
.footer__social{ display:flex; gap:10px; margin-top:24px; }
.footer h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color: var(--color-text-mute); margin-bottom:20px; }
.footer ul{ display:flex; flex-direction:column; gap:12px; }
.footer ul a{ font-size:.9rem; color: var(--color-text-dim); transition: color var(--dur-fast); }
.footer ul a:hover{ color: var(--color-copper-light); }
.footer__bottom{
  margin-top:70px; padding-top:26px; border-top:1px solid var(--color-border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-size:.78rem; color: var(--color-text-mute);
}
.footer__payments{ display:flex; gap:10px; opacity:.7; }
.footer__payments span{ padding:5px 10px; border:1px solid var(--color-border-strong); border-radius:6px; font-size:.68rem; }

/* =========================================================
   QUICK VIEW MODAL
   ========================================================= */
.modal-overlay{
  position: fixed; inset:0; z-index: 500; background: rgba(6,5,4,.72); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal{
  width:100%; max-width: 860px; max-height:88vh; overflow:auto;
  background: var(--color-surface); border:1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  display:grid; grid-template-columns: 1fr 1fr;
  transform: translateY(30px) scale(.98); transition: transform var(--dur-med) var(--ease-out);
}
.modal-overlay.is-open .modal{ transform: translateY(0) scale(1); }
.modal__visual{
  min-height: 340px; display:flex; align-items:center; justify-content:center; position:relative;
  background: radial-gradient(circle at 30% 20%, rgba(216,181,125,.18), transparent 55%), var(--color-surface-2);
}
.modal__visual svg{ width:55%; color: var(--color-copper-light); filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.modal__visual img{ width:100%; height:100%; object-fit:cover; }
.modal__body{ padding: 40px; display:flex; flex-direction:column; }
.modal__close{
  position:absolute; top:18px; right:18px; z-index:5; width:38px; height:38px; border-radius:50%;
  background: rgba(10,9,8,.6); border:1px solid var(--color-border-strong); display:flex; align-items:center; justify-content:center;
}
.modal__close svg{ width:16px; height:16px; }
.modal__brand{ font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color: var(--color-text-mute); }
.modal__name{ font-family: var(--font-display); font-size:1.9rem; margin-top:6px; }
.modal__tagline{ margin-top:12px; color: var(--color-text-dim); font-size:.95rem; }
.modal__specs{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.modal__specs div{ display:flex; justify-content:space-between; font-size:.86rem; padding-bottom:10px; border-bottom:1px solid var(--color-border); color: var(--color-text-dim); }
.modal__specs b{ color: var(--color-text); font-weight:500; }
.modal__price{ margin-top:24px; font-family: var(--font-display); font-size:1.7rem; }
.modal__price span{ display:block; font-family: var(--font-body); font-size:.72rem; color: var(--color-text-mute); font-weight:400; margin-top:4px; }
.modal__qty{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.modal__qty button{ width:36px; height:36px; border:1px solid var(--color-border-strong); border-radius:50%; }
.modal__actions{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }

/* =========================================================
   CART DRAWER
   ========================================================= */
.cart-overlay{
  position: fixed; inset:0; z-index: 600; background: rgba(6,5,4,.6);
  opacity:0; visibility:hidden; transition: opacity var(--dur-med), visibility var(--dur-med);
}
.cart-overlay.is-open{ opacity:1; visibility:visible; }
.cart-drawer{
  position: fixed; top:0; right:0; bottom:0; z-index: 601; width:min(440px, 100%);
  background: var(--color-surface); border-left:1px solid var(--color-border-strong);
  display:flex; flex-direction:column; transform: translateX(100%); transition: transform var(--dur-med) var(--ease-out);
}
.cart-overlay.is-open .cart-drawer{ transform: translateX(0); }
.cart-drawer__head{ padding: 26px 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--color-border); }
.cart-drawer__head h3{ font-family: var(--font-display); font-size:1.3rem; }
.cart-drawer__items{ flex:1; overflow-y:auto; padding: 10px 28px; }
.cart-item{ display:flex; gap:14px; padding: 20px 0; border-bottom:1px solid var(--color-border); }
.cart-item__visual{ width:64px; height:64px; border-radius: var(--radius-sm); background: var(--color-surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.cart-item__visual svg{ width:60%; color: var(--color-copper-light); }
.cart-item__visual img{ width:100%; height:100%; object-fit:cover; }
.cart-item__info{ flex:1; }
.cart-item__info h4{ font-size:.92rem; font-weight:600; }
.cart-item__info span{ font-size:.76rem; color: var(--color-text-mute); }
.cart-item__row{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.cart-item__qty{ display:flex; align-items:center; gap:10px; }
.cart-item__qty button{ width:24px; height:24px; border:1px solid var(--color-border-strong); border-radius:50%; font-size:.8rem; }
.cart-item__remove{ font-size:.74rem; color: var(--color-text-mute); text-decoration:underline; }
.cart-empty{ text-align:center; padding: 60px 20px; color: var(--color-text-mute); }
.cart-empty.is-hidden{ display:none; }
.cart-drawer__foot{ padding: 24px 28px 30px; border-top:1px solid var(--color-border); }
.cart-drawer__subtotal{ display:flex; justify-content:space-between; font-family: var(--font-display); font-size:1.2rem; margin-bottom:18px; }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position: fixed; bottom:28px; left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--color-text); color: var(--color-bg); padding:14px 24px; border-radius: var(--radius-pill);
  font-size:.86rem; font-weight:600; z-index: 700; opacity:0; transition: all var(--dur-med) var(--ease-out);
  display:flex; align-items:center; gap:10px;
}
.toast.is-visible{ opacity:1; transform: translateX(-50%) translateY(0); }
.toast svg{ width:16px; height:16px; color: var(--color-success); }

/* =========================================================
   MOBILE NAV
   ========================================================= */
.mobile-nav{
  position: fixed; inset:0; z-index:300; background: var(--color-bg);
  display:flex; flex-direction:column; padding: 100px 32px 40px;
  transform: translateY(-100%); transition: transform var(--dur-med) var(--ease-out);
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav a{ font-family: var(--font-display); font-size:2rem; padding: 14px 0; border-bottom:1px solid var(--color-border); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ height:380px; order:-1; }
  .featured__grid{ grid-template-columns: repeat(2,1fr); }
  .featured__grid .product-card:nth-child(1){ grid-column: span 2; grid-row: span 1; }
  .catalog__grid{ grid-template-columns: repeat(2,1fr); }
  .trust__grid{ grid-template-columns: repeat(2,1fr); }
  .consult__grid{ grid-template-columns:1fr; gap:40px; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .testi-card{ flex-basis: calc(50% - 12px); }
  .modal{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .main-nav, .header-actions .icon-btn:nth-child(1){ display:none; }
  .nav-toggle{ display:flex; }
  .featured__grid, .catalog__grid{ grid-template-columns: 1fr; }
  .featured__grid .product-card:nth-child(1){ grid-column: span 1; }
  .trust__grid{ grid-template-columns: 1fr; }
  .stats{ justify-content:flex-start; gap:40px; }
  .footer__grid{ grid-template-columns: 1fr; }
  .testi-card{ flex-basis: 100%; }
  .form-row{ grid-template-columns:1fr; }
}
}