/* Vergo storefront — base tokens & primitives */

:root {
  /* Warm boutique palette */
  --bone: #f4efe7;
  --bone-deep: #ece5d8;
  --cream: #faf6ef;
  --paper: #fbfaf6;
  --whisper: #efe9df;
  --mist: #ddd5c6;
  --ink: #221d18;
  --ink-soft: #4a3f34;
  --ink-quiet: #7a6d5e;
  --ink-faint: #a89b88;
  --rule: #e3dccd;
  --rule-soft: #ebe5d8;

  /* Accents */
  --clay: #b8654a;
  --clay-deep: #934b32;
  --clay-soft: #d99070;
  --olive: #6b6a4e;
  --olive-soft: #9a9779;
  --sage: #88937a;
  --sand: #c9a781;

  /* Functional */
  --success: #5a7a4e;
  --whatsapp: #25d366;
  --a11y: #1a73c2;

  /* Type */
  --font-display-he: "Frank Ruhl Libre", "Times New Roman", serif;
  --font-body-he: "Heebo", "Helvetica Neue", sans-serif;
  --font-wordmark: "Cormorant Garamond", "Times New Roman", serif;
  --font-meta: "Heebo", sans-serif;

  /* Scale */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-pill: 999px;
}

/* Storefront-scoped reset */
.vg, .vg * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vg {
  font-family: var(--font-body-he);
  color: var(--ink);
  background: var(--bone);
  direction: rtl;
  text-align: right;
  line-height: 1.55;
  font-size: 15px;
  letter-spacing: 0.005em;
  position: relative;
  /* overflow: hidden was suitable for the design-canvas artboard view;
     for a real page we want the document to scroll normally. */
}

.vg button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.vg a { color: inherit; text-decoration: none; cursor: pointer; }
.vg img, .vg svg { display: block; max-width: 100%; }
.vg input { font: inherit; color: inherit; border: none; outline: none; background: none; }

/* Hebrew headings use Frank Ruhl — tuned for boutique editorial */
.vg-display {
  font-family: var(--font-display-he);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.005em;
}

/* Latin wordmark — Cormorant Garamond, small-cap proportions via tracking */
.vg-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  direction: ltr;
  color: var(--ink);
  font-feature-settings: "ss01", "kern";
}

/* Eyebrow / meta */
.vg-eyebrow {
  font-family: var(--font-meta);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* Buttons */
.vg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-xs);
  font-family: var(--font-body-he);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: background .2s, color .2s, border-color .2s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.vg-btn-primary { background: var(--ink); color: var(--bone); }
.vg-btn-primary:hover { background: var(--clay); }
.vg-btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.vg-btn-ghost:hover { background: var(--ink); color: var(--bone); }
.vg-btn-link {
  background: none; padding: 0; color: var(--ink);
  border-bottom: 1px solid currentColor; border-radius: 0;
  padding-bottom: 2px;
}

/* Soft card */
.vg-card { background: var(--cream); }

/* Rule */
.vg-rule { height: 1px; background: var(--rule); border: 0; }

/* ─── Product image tiles: CSS-art warm gradients with SVG silhouettes ─── */
.vg-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--whisper);
}
.vg-tile-square { aspect-ratio: 1 / 1; }
.vg-tile-wide { aspect-ratio: 3 / 2; }
.vg-tile-tall { aspect-ratio: 3 / 4; }
.vg-tile-hero { aspect-ratio: 4 / 5; }

.vg-tile-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.vg-tile-art svg {
  width: 58%;
  height: 58%;
  opacity: 0.62;
  mix-blend-mode: multiply;
}

/* Tonal tile variations — each picks a warm hue */
.tone-clay { background: linear-gradient(160deg, #e9c9b3 0%, #d49d80 100%); }
.tone-clay svg { color: #6a3120; }
.tone-bone { background: linear-gradient(160deg, #f3ead9 0%, #e1d2b8 100%); }
.tone-bone svg { color: #5b4a35; }
.tone-olive { background: linear-gradient(160deg, #c7c8a8 0%, #969579 100%); }
.tone-olive svg { color: #3e3c25; }
.tone-sand { background: linear-gradient(160deg, #e8d3b3 0%, #c9a781 100%); }
.tone-sand svg { color: #5d3f1d; }
.tone-rose { background: linear-gradient(160deg, #efd5c7 0%, #d4a99a 100%); }
.tone-rose svg { color: #6e2f20; }
.tone-fog { background: linear-gradient(160deg, #e5dccc 0%, #c3b7a0 100%); }
.tone-fog svg { color: #4c3e2b; }
.tone-cocoa { background: linear-gradient(160deg, #cbb39a 0%, #8a6a4e 100%); }
.tone-cocoa svg { color: #3b2615; }
.tone-mossy { background: linear-gradient(160deg, #b8b598 0%, #7d7a5a 100%); }
.tone-mossy svg { color: #2d2b15; }
.tone-shell { background: linear-gradient(160deg, #f6ebde 0%, #e2c9ad 100%); }
.tone-shell svg { color: #5a4126; }

/* Paper grain texture overlay — barely there */
.vg-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.08), transparent 50%);
  pointer-events: none;
}

/* Price */
.vg-price { font-family: var(--font-meta); letter-spacing: 0.01em; }

/* Badge */
.vg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 500;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  text-transform: uppercase;
}
.vg-badge-clay { background: var(--clay); color: var(--bone); border-color: var(--clay); }
.vg-badge-olive { background: var(--olive); color: var(--bone); border-color: var(--olive); }

/* Floating action buttons */
.vg-fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 18px rgba(34, 29, 24, 0.18);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .15s ease;
}
.vg-fab:hover { transform: translateY(-2px); }
.vg-fab svg { width: 24px; height: 24px; color: white; }

/* Star rating */
.vg-stars { display: inline-flex; gap: 2px; color: var(--clay); }
.vg-stars svg { width: 13px; height: 13px; }

/* Section spacing */
.vg-section { padding: 96px 64px; }
.vg-section-tight { padding: 56px 64px; }
@media (max-width: 700px) {
  .vg-section { padding: 56px 20px; }
  .vg-section-tight { padding: 36px 20px; }
}

/* RTL input */
.vg-input {
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  font-size: 14px;
  color: var(--ink);
  text-align: right;
}
.vg-input::placeholder { color: var(--ink-faint); }
.vg-input:focus { border-color: var(--ink); }

/* Overlay scrim for popup state — fixed to viewport, not the storefront container */
.vg-scrim {
  position: fixed; inset: 0;
  background: rgba(34, 29, 24, 0.42);
  z-index: 100;
  backdrop-filter: blur(2px);
}

/* Smooth page scroll on anchor jumps */
html { scroll-behavior: smooth; }

/* ─── Full-bleed layout ───────────────────────────────────────────
   .vg fills viewport so chrome (top bar, header, promo, newsletter,
   footer) bleeds edge-to-edge. Inside each top-level section, the
   horizontal padding scales: 64px floor on narrow screens, growing
   on ultrawide so content stays centered within a ~1440px column.
   The footer's inner grid wrapper gets the same treatment.
   !important wins over the inline padding values set by the JSX
   components so we don't have to refactor every section. */
.vg-fullbleed > header,
.vg-fullbleed > section,
.vg-fullbleed > .vg-bleed,
.vg-fullbleed > footer > div {
  padding-inline: max(64px, calc((100% - 1440px) / 2)) !important;
}

/* On mobile, ignore the centering math and use a tighter floor. */
@media (max-width: 700px) {
  .vg-fullbleed > header,
  .vg-fullbleed > section,
  .vg-fullbleed > .vg-bleed,
  .vg-fullbleed > footer > div {
    padding-inline: 20px !important;
  }
}

/* ─── PDP chrome (Header / TopBar / PromoStrip / Footer) ───────────
   The PDP's own sections set their own narrower content caps inline
   (1240px / 1100px), so this rule only targets the shared chrome
   elements — not generic <section> children — to avoid overriding
   the PDP sections' inline padding. */
.vg-page-pdp > header,
.vg-page-pdp > .vg-bleed,
.vg-page-pdp > footer > div {
  padding-inline: max(64px, calc((100% - 1440px) / 2)) !important;
}

@media (max-width: 700px) {
  .vg-page-pdp > header,
  .vg-page-pdp > .vg-bleed,
  .vg-page-pdp > footer > div {
    padding-inline: 20px !important;
  }
}