
:root {
  --bg:        #0A0A0B;
  --bg-2:      #111011;
  --card:      #161516;
  --card-2:    #1E1C1E;
  --line:      rgba(255, 255, 255, .08);
  --line-2:    rgba(201, 169, 97, .24);
  --field:     rgba(255, 255, 255, .34);
  --ink:       #F4F0E8;
  --muted:     rgba(244, 240, 232, .58);
  --faint:     rgba(244, 240, 232, .44);

  --gold:      #C9A961;
  --gold-hi:    #E7CE96;
  --gold-lo:    #8C6F3A;
  --gold-ink:  #14110C;
  --grad-gold: linear-gradient(135deg, var(--gold-lo) 0%, var(--gold) 38%, var(--gold-hi) 62%, var(--gold) 100%);

  --sale:      #C8352B;
  --sale-ink:  #E9695D;
  --ok:        #4E8D5B;
  --warn:      #C99A3A;

  --r:      8px;
  --r-s:    calc(var(--r) - 3px);
  --r-l:    calc(var(--r) + 6px);
  --round-full: 999px;
  --pad:    clamp(14px, 3.6vw, 30px);
  --wrap:   1340px;
  --hdr-h:  60px;

  --s1:  4px;   --s2:  8px;   --s3:  12px;  --s4:  16px;
  --s5:  20px;  --s6:  24px;  --s7:  32px;  --s8:  40px;
  --s9:  56px;  --s10: 72px;  --s11: 96px;  --s12: 128px;

  --display: "Cormorant", Georgia, "Times New Roman", serif;
  --sans:    "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --t-h1:   clamp(2.1rem, 1.1rem + 3.2vw, 4rem);
  --t-h2:   clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem);
  --t-h3:   1.0625rem;
  --t-body: clamp(.9375rem, .9rem + .2vw, 1rem);
  --t-spec: .75rem;
  --t-mic:  .6875rem;
  --t-eur:  clamp(1.0625rem, .95rem + .5vw, 1.3125rem);

  --t12: .12s; --t16: .16s; --t24: .24s; --t36: .36s;
  --t48: .48s; --t56: .56s; --t72: .72s; --t90: .9s;

  --e-out:  cubic-bezier(.22, .61, .36, 1);
  --e-in:   cubic-bezier(.55, .06, .68, .19);
  --e-soft: cubic-bezier(.4, 0, .2, 1);
  --e-back: cubic-bezier(.34, 1.56, .64, 1);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 10px 30px rgba(0, 0, 0, .42);
  --sh-3: 0 24px 60px rgba(0, 0, 0, .55);

  --read:      rgba(244, 240, 232, .90);
  --read-soft: rgba(244, 240, 232, .72);

  color-scheme: dark;
}

@media (min-width: 900px) {
  :root { --hdr-h: 68px; }
}


*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + var(--s4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--sans);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

p, ul, ol, figure, table { margin: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video, picture { max-width: 100%; display: block; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

table { border-collapse: collapse; width: 100%; }

.num, .eur, .lev, td, th, time, output { font-variant-numeric: tabular-nums; }

::selection { background: var(--gold); color: var(--gold-ink); }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
  border-radius: 2px;
}


.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--s3); top: -100px;
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--grad-gold);
  color: var(--gold-ink);
  font-weight: 600;
  border-radius: var(--r-s);
  transition: top var(--t16) var(--e-out);
}
.skip:focus { top: var(--s3); }

.kicker {
  margin: 0 0 var(--s2);
  color: var(--gold);
  font-size: var(--t-mic);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.muted { color: var(--muted); }
.faint { color: var(--faint); }

.lead {
  color: var(--read-soft);
  font-size: clamp(1rem, .95rem + .35vw, 1.125rem);
  line-height: 1.7;
}

.rule {
  height: 1px;
  border: 0;
  margin: var(--s4) 0 0;
  background: var(--grad-gold);
  transform-origin: left center;
}


html[data-veil] .rv { opacity: 0; }
html[data-veil] .rv-y { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  html[data-veil] .rv,
  html[data-veil] .rv-y { opacity: 1; transform: none; }
}

@media (pointer: coarse) {
  .ico, .arw, .chip, .qty__b { min-width: 44px; min-height: 44px; }
}
