/* ── Палітра з обкладинки ──────────────────────────────────── */
:root {
  --cream:  #FBF4E2;
  --ink:    #16150F;
  --muted:  #6F6A5C;
  --line:   #E0D8C0;
  --teal:   #0E8A6E;
  --red:    #E0473A;
  --pink:   #E88BB4;
  --purple: #9E62B8;
  --blue:   #A9BEDC;
  --yellow: #F0B03F;

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  --page: min(1160px, 100% - 3rem);
}

* { box-sizing: border-box; }

/* hidden має перемагати display у .drawer/.overlay */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--cream);      /* фон на html, щоб декор ліг поверх нього */
}

body {
  position: relative;
  margin: 0;
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Контент завжди над декором */
.site-header, main, .site-footer { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }

button { font: inherit; cursor: pointer; }

/* ── Шапка ─────────────────────────────────────────────────── */
.site-header {
  width: var(--page);
  margin: 0 auto;
  padding: 1.75rem 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo { display: block; line-height: 0; }
.logo img { width: clamp(96px, 11vw, 130px); height: auto; }

.ig, .footer-ig {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  opacity: .8;
  transition: opacity .15s;
}

.ig:hover, .footer-ig:hover { opacity: 1; }

/* ── Товар ─────────────────────────────────────────────────── */
.product {
  width: var(--page);
  margin: clamp(2rem, 5vw, 4.5rem) auto clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* Галерея */
.gallery-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.slides > figure {
  margin: 0;
  min-width: 100%;
  aspect-ratio: 158 / 220;
  display: grid;
  place-items: center;
  background: var(--cream);
}

.slides img, .slides svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .15s;
}

.nav:hover { background: #fff; }
.nav.prev { left: .75rem; }
.nav.next { right: .75rem; }
.gallery.single .nav, .gallery.single .dots { display: none; }

.dots {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: 1rem;
}

.dots button {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  transition: background .15s;
}

.dots button[aria-selected="true"] { background: var(--ink); }

/* ── Брендовий декор ───────────────────────────────────────── */
.deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Кожен елемент притиснутий до краю сторінки і частково обрізаний —
   так вони не налізають на текст при будь-якій висоті контенту. */
.deco img { position: absolute; }
.deco-green  { top: 4.5rem;  right: -3rem;   width: 11rem; transform: rotate(12deg); }
.deco-blue   { bottom: -3.5rem; left: -5rem; width: 14rem; transform: rotate(-12deg); }
.deco-yellow { bottom: -1.5rem; right: -3.5rem; width: 9rem;  transform: rotate(6deg); }

/* Інфо */
.info h1 {
  margin: 0;
  font: 800 clamp(2.2rem, 5vw, 3.4rem)/1.05 var(--font-display);
  letter-spacing: -.02em;
}

.tagline {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .6rem 0 0;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.tagline .star { width: 1.1rem; height: auto; }

.price {
  margin: 1.5rem 0 0;
  font: 600 1.75rem/1 var(--font-display);
}

.lead {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  color: #2B2A22;
}

/* Кольорові цифри-плашки */
.counts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.counts li {
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .9rem;
  background: #fff;
  border: 1px solid var(--line);
}

.counts li.hours {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-left: .5rem;
}

.counts li.hours img { width: 1.15rem; height: auto; }

.counts li b { font-weight: 700; }
.counts li:nth-child(1) b { color: var(--teal); }
.counts li:nth-child(2) b { color: var(--red); }
.counts li:nth-child(3) b { color: var(--purple); }
.counts li:nth-child(4) b { color: var(--pink); }
.counts li:nth-child(5) b { color: var(--yellow); }

.specs {
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
}

.specs > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
}

.specs dt { color: var(--muted); margin: 0; }
.specs dd { margin: 0; font-weight: 600; }

/* Купівля */
.buy {
  margin: 2rem 0 0;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.qty button {
  width: 2.9rem;
  height: 3.1rem;
  border: 0;
  background: none;
  font-size: 1.15rem;
  color: var(--ink);
}

.qty button:hover { background: rgba(0, 0, 0, .05); }
.qty button:disabled { opacity: .3; cursor: default; }

.qty input {
  width: 2.4rem;
  height: 3.1rem;
  border: 0;
  background: none;
  text-align: center;
  font: 600 1rem var(--font-body);
  color: var(--ink);
}

.qty input:focus { outline: none; }

.btn-primary {
  flex: 1 1 12rem;
  min-height: 3.1rem;
  padding: 0 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font: 600 1rem var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: transform .12s, opacity .15s;
}

/* Олівець «дописує» напис на кнопці */
.btn-primary .pencil {
  width: 1.5rem;
  height: auto;
  transform: rotate(-8deg);
  transition: transform .2s;
}

.btn-primary:hover .pencil { transform: rotate(-8deg) translate(2px, -2px); }

.btn-primary:hover { opacity: .88; }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .5; cursor: default; transform: none; }
.btn-primary.wide { width: 100%; flex: none; }

.ship-note {
  margin: 1rem 0 0;
  font-size: .85rem;
  color: var(--muted);
}

/* ── Футер ─────────────────────────────────────────────────── */
.site-footer {
  width: var(--page);
  margin: 0 auto;
  /* великий відступ знизу — це смуга під брендовий декор */
  padding: 2rem 0 7rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .875rem;
}

.contacts {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
}

.contacts a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}

.contacts a:hover { color: var(--ink); }

.contacts .support {
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, background .15s;
}

.contacts .support:hover { border-color: var(--ink); background: var(--cream); }

/* ── Шухляда з формою ──────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 21, 15, .45);
  z-index: 40;
  animation: fade .2s ease;
}

@keyframes fade { from { opacity: 0 } }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: min(460px, 100%);
  height: 100%;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, .18);
  animation: slide .28s cubic-bezier(.3, 0, .2, 1);
}

@keyframes slide { from { transform: translateX(100%) } }

.drawer-head {
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-head h2 {
  margin: 0;
  font: 600 1.15rem var(--font-display);
}

.close {
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1rem;
  color: var(--ink);
}

.close:hover { background: rgba(0, 0, 0, .06); }

.drawer-body {
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

.summary-total { font: 600 1.1rem var(--font-display); }

.drawer-body label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .875rem;
  color: var(--muted);
}

.opt { color: #A9A292; }

.hint {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--muted);
}

.drawer-body input,
.drawer-body textarea {
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font: 400 1rem var(--font-body);
  color: var(--ink);
  resize: vertical;
}

.drawer-body input:focus,
.drawer-body textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.drawer-body input[aria-invalid="true"] { border-color: var(--red); }

.pay-choice {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.pay-choice legend {
  padding: 0 0 .35rem;
  font-size: .875rem;
  color: var(--muted);
}

.radio {
  flex-direction: row !important;
  align-items: flex-start;
  gap: .65rem !important;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s;
}

.radio:has(input:checked) { border-color: var(--ink); }

.radio input { margin: .15rem 0 0; accent-color: var(--ink); }

.radio b { display: block; color: var(--ink); font-size: .95rem; }
.radio small { display: block; margin-top: .15rem; font-size: .8rem; color: var(--muted); }

.form-error {
  margin: 0;
  padding: .7rem .9rem;
  border-radius: 4px;
  background: #FCE9E7;
  color: #9A2A20;
  font-size: .875rem;
}

.pay-note {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Мобілка ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --page: min(1160px, 100% - 2rem); }

  .product { grid-template-columns: 1fr; }

  .gallery { max-width: 26rem; margin-inline: auto; }

  .buy .btn-primary { flex: 1 1 8rem; }

  /* На вузькому екрані декор тільки шумить */
  .deco { display: none; }
}