/* ============================================================
   TIFLISI — Shop  |  Design foundations
   Palette, font, vw sizing, motion. No backdrop-filter.
   ============================================================ */

/* Georgian font — BPG Nino Mtavruli Bold, self-hosted.
   Noto Serif Georgian (loaded in HTML) is a web fallback. */
@font-face {
  font-family: 'BPG Nino Mtavruli';
  src: url('/fonts/bpg_nino_mtavruli_bold-fixed.woff') format('woff'),
       url('/fonts/bpg_nino_mtavruli_bold-fixed.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #FF3535;
  --red-d: #d42020;
  --gold: #f4d089;
  --green: #46b562;

  --panel: rgba(0, 0, 0, 0.92);
  --panel-2: rgba(10, 10, 12, 0.96);
  --card: rgba(255, 255, 255, 0.04);
  --card-2: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);

  --txt: #ffffff;
  --txt-2: rgba(255, 255, 255, 0.72);
  --txt-3: rgba(255, 255, 255, 0.45);

  --radius: 0.6vw;
  --radius-s: 0.4vw;
  --shadow: 0 1.2vw 3vw rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 1vw 3vw rgba(244, 208, 137, 0.10);
  --t: 0.15s ease;

  --bg: #0a0a0c;

  /* Brand logos — drop the files in /public/assets/ (see assets/README.txt).
     Until then, the crest falls back to a red gradient ring. */
  --logo-round: url('/assets/logo-round.png');
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: 'BPG Nino Mtavruli', 'Noto Serif Georgian', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
}

body {
  /* Restrained, warm-dark. A whisper of red at the top and a faint gold wash —
     no neon glow blobs. */
  background:
    linear-gradient(180deg, rgba(255, 53, 53, 0.045), transparent 20%),
    radial-gradient(1200px 720px at 50% -12%, rgba(244, 208, 137, 0.035), transparent 62%),
    var(--bg);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--red); color: #fff; }

/* editorial utilities */
.eyebrow { display: inline-block; font-size: 0.74vw; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
.rule { height: 1px; border: 0; background: linear-gradient(90deg, var(--gold), rgba(244, 208, 137, 0)); }

/* ---------- scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--red) transparent; }
*::-webkit-scrollbar { width: 0.5vw; height: 0.5vw; }
*::-webkit-scrollbar-thumb { background: var(--red-d); border-radius: 1vw; }
*::-webkit-scrollbar-thumb:hover { background: var(--red); }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   TOP NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 800;
  display: flex; align-items: center; gap: 1.4vw;
  padding: 0.9vw 2.4vw;
  background: rgba(8, 6, 6, 0.86);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.8vw; }
.crest {
  width: 2.6vw; height: 2.6vw; min-width: 34px; min-height: 34px;
  border-radius: 50%;
  /* your PNG on top → default SVG crest → gradient, in that fallback order */
  background:
    var(--logo-round) center/cover no-repeat,
    url('/assets/logo-round.svg') center/cover no-repeat,
    radial-gradient(circle at 35% 30%, #ff5a5a, var(--red-d));
  border: 0.12vw solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 1.4vw rgba(255, 53, 53, 0.45);
  display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 1.1vw;
  overflow: hidden;
}
.brand-text b { font-size: 1.15vw; letter-spacing: 0.02vw; }
.brand-text span { display: block; font-size: 0.72vw; color: var(--gold); }
.nav-links { display: flex; gap: 0.5vw; margin-left: auto; align-items: center; }

.nav-link {
  position: relative;
  padding: 0.5vw 0.2vw;
  font-size: 0.82vw;
  letter-spacing: 0.08em;
  color: var(--txt-2);
  transition: color var(--t);
}
/* underline-grow instead of a boxed pill — reads editorial, not app-y */
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -0.15vw; height: 1px;
  background: var(--red); transition: right 0.18s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { right: 0; }
.nav-link.active { color: #fff; }
.nav-link.active::after { right: 0; background: var(--gold); }

/* ============================================================
   BUTTONS / PILLS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5vw;
  padding: 0.75vw 1.5vw;
  border: 1px solid var(--red);
  border-radius: var(--radius-s);
  background: var(--red);
  color: #fff;
  font-size: 0.92vw; font-weight: 700; letter-spacing: 0.04em;
  transition: var(--t);
}
.btn:hover { background: var(--red-d); transform: translateY(-0.1vw); box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.4); }
.btn:active { transform: translateY(0); }

.btn.ghost { background: transparent; color: #fff; border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--red); background: var(--card); box-shadow: none; }

/* text link with an arrow — for secondary actions in the editorial layout */
.btn-link { display: inline-flex; align-items: center; gap: 0.4vw; font-size: 0.9vw; letter-spacing: 0.04em; color: var(--gold); transition: var(--t); }
.btn-link::after { content: '↗'; font-size: 0.85em; transition: transform var(--t); }
.btn-link:hover { color: #fff; }
.btn-link:hover::after { transform: translate(0.15vw, -0.15vw); }

.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1206; }
.btn.gold:hover { filter: brightness(1.06); }

.btn.green { background: var(--green); border-color: var(--green); color: #06210e; }
.btn.green:hover { filter: brightness(1.06); }

.pill {
  display: inline-flex; align-items: center; gap: 0.45vw;
  padding: 0.5vw 1vw;
  border-radius: 2vw;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--txt-2);
  font-size: 0.85vw;
  transition: var(--t);
}
.pill:hover { border-color: var(--red); color: #fff; }

/* ============================================================
   INPUTS
   ============================================================ */
input, textarea, select {
  width: 100%;
  font-family: inherit;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0.65vw 0.85vw;
  font-size: 0.92vw;
  transition: var(--t);
  color-scheme: dark;
  outline: none;
}
input:hover, textarea:hover, select:hover { border-color: var(--line-2); }
input:focus, textarea:focus, select:focus { border-color: var(--red); background: rgba(0, 0, 0, 0.65); }
textarea { resize: vertical; min-height: 4vw; }
label.field { display: block; }
label.field > span { display: block; font-size: 0.8vw; color: var(--txt-3); margin: 0 0 0.35vw 0.15vw; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23FF3535' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7vw center;
  padding-right: 2vw;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 0.3vw;
  font-size: 0.72vw; font-weight: 700;
  padding: 0.2vw 0.6vw; border-radius: 2vw;
}
.badge.count { background: var(--red); color: #fff; }
.badge.avail { background: rgba(70, 181, 98, 0.15); color: var(--green); border: 1px solid rgba(70, 181, 98, 0.4); }
.badge.sold { background: rgba(255, 53, 53, 0.15); color: var(--red); border: 1px solid rgba(255, 53, 53, 0.4); }
.price { color: var(--green); font-weight: 800; }
.gold-text { color: var(--gold); }

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: var(--t);
}
.card:hover { border-color: var(--red); transform: translateY(-0.2vw); }

@keyframes popfade {
  from { opacity: 0; transform: translateY(1.2vw) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pop { animation: popfade 0.18s ease both; }

/* ============================================================
   TOAST
   ============================================================ */
#toast {
  position: fixed; bottom: 2vw; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 0.5vw; align-items: center;
}
.toast {
  background: var(--panel-2);
  border: 1px solid var(--red);
  color: #fff;
  padding: 0.7vw 1.3vw;
  border-radius: var(--radius-s);
  font-size: 0.9vw;
  box-shadow: var(--shadow);
  animation: popfade 0.18s ease both;
}
.toast.green { border-color: var(--green); }
.toast.gold { border-color: var(--gold); }

/* small helpers */
.row { display: flex; gap: 0.8vw; align-items: center; }
.muted { color: var(--txt-3); }
.hidden { display: none !important; }

/* ============================================================
   MOBILE — the whole site sizes type in vw, which collapses to
   ~3px text on a phone. Below 768px we switch shared components
   to fixed, finger-friendly sizes. Per-page layouts add their own
   phone blocks in each view's inline <style>.
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --radius: 12px;
    --radius-s: 8px;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-gold: 0 6px 20px rgba(244, 208, 137, 0.10);
  }

  .eyebrow { font-size: 11px; letter-spacing: 0.2em; }

  /* top nav — brand on its own row, section links become a horizontal
     scroll strip below so they never push the page wider than the screen */
  .nav { gap: 8px 12px; padding: 10px 16px; flex-wrap: wrap; }
  .brand { gap: 8px; }
  .crest { border-width: 1.5px; box-shadow: 0 0 10px rgba(255, 53, 53, 0.45); font-size: 15px; }
  .brand-text b { font-size: 16px; }
  .brand-text span { font-size: 10px; }
  .nav-links {
    width: 100%; margin-left: 0; gap: 18px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { font-size: 14px; padding: 4px 2px; white-space: nowrap; flex: 0 0 auto; }
  .nav-link::after { bottom: -2px; }

  /* buttons / pills */
  .btn { padding: 11px 18px; font-size: 15px; gap: 6px; }
  .btn-link { font-size: 15px; gap: 5px; }
  .pill { padding: 8px 13px; font-size: 13px; border-radius: 999px; gap: 6px; }

  /* inputs — 16px keeps iOS Safari from auto-zooming on focus */
  input, textarea, select { padding: 12px 13px; font-size: 16px; }
  label.field > span { font-size: 12px; margin: 0 0 6px 2px; }
  textarea { min-height: 90px; }
  select { background-position: right 12px center; padding-right: 34px; background-size: 14px 14px; }

  /* scrollbars — vw thumb would be invisible on a phone */
  *::-webkit-scrollbar { width: 6px; height: 6px; }

  /* badges */
  .badge { font-size: 11px; padding: 3px 9px; gap: 4px; }
  .badge.count { font-size: 11px; }

  /* toast */
  #toast { bottom: 20px; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
  .toast { font-size: 14px; padding: 11px 18px; }
}