/* ---------- tokens ---------- */
:root{
  --cream: #efe6d2;
  --paper: #f8f2e5;
  --ink: #2b1d14;
  --ink-soft: #5b4a3a;
  --crimson: #9e2b25;
  --gold: #c89b3c;
  --pine: #33503f;
  --line: #d9c9a1;

  --face: #f2d3b3;
  --eye: #2b1d14;
  --cheek: #d97a6a;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "PT Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

h1, h2, h3, .logo{
  font-family: "Yeseva One", Georgia, serif;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.wrap{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

a{ color: var(--crimson); }

/* ---------- header ---------- */
.site-header{
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
}
.logo{
  font-size: 1.5rem;
  text-decoration: none;
}
.nav a{
  margin-left: 28px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.nav a:hover{ color: var(--crimson); }

/* ---------- hero ---------- */
.hero{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 64px 28px 48px;
}
.hero-kicker{
  color: var(--gold);
  font-size: 0.95rem;
  margin: 0 0 10px;
}
.hero h1{
  font-size: 2.5rem;
  line-height: 1.2;
  max-width: 14ch;
  margin-bottom: 20px;
}
.hero-lead{
  max-width: 46ch;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.hero-svg{ width: 100%; height: auto; overflow: visible; }
.hero-doll{ opacity: 0.98; }

.hd-1{ --body-color:#8fa48c; --scarf-color:#33503f; --apron-color:#e7dcc2; --motif-color:#9e2b25; }
.hd-2{ --body-color:#c04c3d; --scarf-color:#9e2b25; --apron-color:#f4e6c9; --motif-color:#33503f; }
.hd-3{ --body-color:#d7ac4e; --scarf-color:#a5751f; --apron-color:#f8f2e5; --motif-color:#9e2b25; }

/* ---------- shared doll svg ---------- */
.d-body{ fill: var(--body-color, #b5745a); }
.d-scarf{ fill: var(--scarf-color, #9e2b25); }
.d-apron{ fill: var(--apron-color, #f8f2e5); }
.d-motif{ fill: var(--motif-color, #c89b3c); }
.d-face{ fill: var(--face); }
.d-eye{ fill: var(--eye); }
.d-cheek{ fill: var(--cheek); opacity: 0.7; }

.card-art svg{ width: 100%; height: 100%; display: block; }

/* ---------- buttons ---------- */
.btn{
  display: inline-block;
  background: var(--crimson);
  color: var(--paper);
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 3px;
  font-size: 0.98rem;
  border: 1px solid var(--crimson);
}
.btn:hover{ background: #7f221d; border-color: #7f221d; }
.btn--ghost{
  background: transparent;
  color: var(--crimson);
  border: 1px solid var(--crimson);
  padding: 9px 20px;
  font-size: 0.92rem;
}
.btn--ghost:hover{ background: var(--crimson); color: var(--paper); }

/* ---------- divider ---------- */
.divider{
  color: var(--line);
  padding: 0 28px;
  max-width: 1080px;
  margin: 0 auto;
}
.divider svg{ width: 100%; height: 14px; display: block; }

/* ---------- catalog ---------- */
.catalog{ padding: 56px 28px 20px; }
.catalog h2{ font-size: 2rem; }
.section-lead{
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 10px 0 36px;
}

.grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.card{
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-art{
  padding: 20px 16px 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.card-art svg{ max-height: 78%; width: auto; }

.card-body{
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card h3{ font-size: 1.05rem; margin-bottom: 4px; line-height: 1.3; min-height: 2.6em; }
.pieces{
  color: var(--gold);
  font-size: 0.82rem;
  margin: 0 0 8px;
}
.desc{
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0 0 14px;
  flex: 1;
}
.card-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  flex-wrap: wrap;
}
.price{ font-size: 1.05rem; font-weight: 700; }
.card-foot .btn--ghost{ padding: 7px 14px; font-size: 0.85rem; }

/* per-product palettes */
.p1  { --body-color:#3a2a1f; --scarf-color:#9e2b25; --apron-color:#c89b3c; --motif-color:#9e2b25; }
.p2  { --body-color:#c9a227; --scarf-color:#7c5a12; --apron-color:#f4e6c9; --motif-color:#33503f; }
.p3  { --body-color:#3d5f86; --scarf-color:#24425f; --apron-color:#f0f4f2; --motif-color:#9db8c9; }
.p4  { --body-color:#c94f3f; --scarf-color:#9e2b25; --apron-color:#f8f2e5; --motif-color:#9e2b25; }
.p5  { --body-color:#1f2a4d; --scarf-color:#101731; --apron-color:#c89b3c; --motif-color:#c89b3c; }
.p6  { --body-color:#d9772b; --scarf-color:#a4531a; --apron-color:#fbe9c8; --motif-color:#9e2b25; }
.p7  { --body-color:#a5751f; --scarf-color:#6e4c12; --apron-color:#f4e6c9; --motif-color:#33503f; }
.p8  { --body-color:#7fa3c9; --scarf-color:#3d5f86; --apron-color:#eef4f8; --motif-color:#c0c0c0; }
.p9  { --body-color:#4a2f22; --scarf-color:#1f2a4d; --apron-color:#e7dcc2; --motif-color:#9e2b25; }
.p10 { --body-color:#8fa48c; --scarf-color:#33503f; --apron-color:#f4e6c9; --motif-color:#c89b3c; }

/* ---------- delivery ---------- */
.delivery{
  background: var(--pine);
  color: var(--paper);
  padding: 56px 0;
  margin-top: 40px;
}
.delivery h2{ color: var(--paper); font-size: 2rem; margin-bottom: 30px; }
.steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.steps li{ display: flex; gap: 16px; }
.step-num{
  font-family: "Yeseva One", Georgia, serif;
  font-size: 1.6rem;
  color: var(--gold);
  flex: none;
}
.steps h3{ color: var(--paper); font-size: 1.05rem; margin-bottom: 6px; }
.steps p{ color: #d9d2c2; margin: 0; font-size: 0.94rem; }

/* ---------- contacts ---------- */
.contacts{ padding: 56px 28px 70px; }
.contacts h2{ font-size: 2rem; margin-bottom: 30px; }
.contacts-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.contacts h3{ font-size: 1.05rem; margin-bottom: 10px; }
.contacts p{ margin: 0 0 12px; color: var(--ink-soft); }
.phone{ font-size: 1.3rem; color: var(--ink); text-decoration: none; font-weight: 700; }
.phone:hover{ color: var(--crimson); }

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 22px 28px;
}
.site-footer p{
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- responsive ---------- */
@media (max-width: 1000px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; padding-top: 40px; }
  .hero h1{ font-size: 2rem; max-width: none; }
  .steps{ grid-template-columns: 1fr; }
  .contacts-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
  .header-row{ flex-direction: column; gap: 12px; }
  .nav a{ margin: 0 12px; }
}

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