:root{
  --paper:#FFFFFF;
  --pale:#FCF2F3;
  --soft:#F7E7E9;
  --rose:#C98F96;
  --rose-text:#7E4A52;
  --ink:#1A1A1A;
  --muted:#6E6E6E;
  --line:#F0E2E5;
  --lh:#E4126E;
  --lh-2:#FF2A59;
  --lh-soft:#FDE3EF;
  --lh-deep:#C0135E;
  --maxw:1100px;
  --r:18px;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  line-height:1.12;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(34px,8vw,56px);}
h2{font-size:clamp(26px,5vw,38px);}
h3{font-size:clamp(20px,3.4vw,24px);}

p{margin:0 0 1em;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.section{padding:56px 0;}
.eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--rose);margin:0 0 12px;
}
.muted{color:var(--muted);}

:focus-visible{outline:2px solid var(--rose-text);outline-offset:3px;}
.btn:focus-visible{outline:2px solid var(--lh);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important;}
}

.site-head{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;justify-content:space-between;height:56px;}
.wordmark{
  font-size:15px;letter-spacing:.3em;font-weight:600;line-height:1.15;
  color:var(--rose-text);text-decoration:none;
}
.brand{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;white-space:nowrap;}
.brand-sub{font-size:10px;font-weight:400;letter-spacing:.04em;line-height:1.15;color:var(--muted);}
.head-buy{display:flex;align-items:center;gap:14px;}
.head-price{font-weight:600;font-size:15px;}
@media (max-width:640px){ .head-price{display:none;} }

.btn{
  display:inline-block;border:0;border-radius:999px;cursor:pointer;
  font-family:inherit;font-weight:600;letter-spacing:.08em;text-align:center;
  text-decoration:none;
  background:linear-gradient(135deg,var(--lh-2),var(--lh));
  color:#FFF;
  box-shadow:0 10px 22px rgba(228,18,110,.30);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(228,18,110,.36);}
.btn:active{transform:translateY(0);}
.btn-lg{display:block;width:100%;padding:16px 0;font-size:14px;}
/* min-height 44px — мінімальна зона, у яку впевнено влучає палець. */
.btn-sm{padding:9px 20px;font-size:12px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}

.site-foot{background:var(--pale);padding:44px 0;margin-top:20px;}
.foot-brand{font-size:14px;letter-spacing:.3em;font-weight:600;color:var(--rose-text);margin:0 0 10px;}
.foot-line{font-size:13px;margin:0 0 6px;}
.site-foot a{color:var(--rose-text);}

/* .hero-shot is capped at 420px (native photo width) and centred with auto
   margins so it never stretches to fill a wide column; width:calc(100% - 32px)
   keeps a 16px inset on viewports narrower than ~452px, where the max-width
   alone would not yet be clamping anything. The gap below the frame on mobile
   comes from .hero-text's padding-top, not from a bottom margin here. At
   min-width:900px the frame must NOT stretch to the grid row's height (that
   would open pale bands above/below the now-shorter, capped photo) — it sizes
   to its own content and is centred vertically with align-self:center instead. */
.hero-shot{background:var(--paper);width:calc(100% - 32px);max-width:420px;margin:16px auto 0;border-radius:24px;overflow:hidden;}
.hero-shot img{display:block;width:100%;height:auto;}
.hero-text{padding:26px 20px 0;}
.lede{font-size:16px;color:var(--muted);font-weight:300;max-width:34em;}

.receipt{
  margin:22px 0 8px;padding:18px 18px 20px;
  border:1px solid var(--line);border-radius:var(--r);
  background:#FFFDFD;max-width:420px;
}
.pill{
  display:inline-block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;padding:5px 12px;border-radius:999px;
  background:var(--lh-soft);color:var(--lh-deep);margin-bottom:14px;
}
.rrow{display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;padding:6px 0;color:var(--muted);}
.rrow b{font-weight:600;color:var(--ink);}
.rrow s{font-weight:300;}
.rrow-disc b{color:var(--lh);}
.rtotal{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);margin-top:10px;padding-top:14px;margin-bottom:16px;}
.rtotal span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--muted);}
.rtotal b{font-size:32px;font-weight:600;letter-spacing:-.02em;}
.receipt-fine{font-size:11px;text-align:center;color:var(--muted);margin:10px 0 0;}

@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;}
  .hero-shot{align-self:center;justify-self:center;margin:24px auto;}
  .hero-text{padding:40px 48px;}
}

.reason-grid{display:grid;gap:22px;margin-top:24px;}
.reason h3{margin:0 0 6px;}
.reason p{font-size:14px;margin:0;}

@media (min-width:760px){
  .reason-grid{grid-template-columns:repeat(2,1fr);gap:26px 34px;}
}
@media (min-width:1000px){
  .reason-grid{grid-template-columns:repeat(3,1fr);}
}

.acc{margin-top:22px;border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 0;font-weight:600;font-size:15px;line-height:1.4;
}
.acc-item summary::-webkit-details-marker{display:none;}
.acc-item summary::after{
  content:'+';color:var(--rose);font-size:20px;font-weight:400;flex:0 0 auto;
}
.acc-item[open] summary{color:var(--rose-text);}
.acc-item[open] summary::after{content:'−';}
.acc-body{padding:0 0 18px;max-width:46em;}
.acc-body p{font-size:14.5px;color:var(--muted);font-weight:300;margin:0 0 10px;}
.acc-body p:last-child{margin-bottom:0;}
.inci{font-size:11.5px !important;line-height:1.7;letter-spacing:.01em;
  word-break:break-word;}

.order{background:var(--soft);scroll-margin-top:70px;} /* 56px sticky header + breathing room, so #order jump doesn't hide the heading under it */
.order-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 16px 20px;max-width:560px;margin-top:18px;
}
.qty-row{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px;}
.qty-label{font-weight:600;font-size:15px;}
.qty{display:flex;align-items:center;gap:6px;}
.qty-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);font-size:19px;line-height:1;cursor:pointer;color:var(--ink);
}
.qty-btn:hover{border-color:var(--rose);}
.qty-val{min-width:38px;text-align:center;font-weight:600;font-size:16px;}

.field{margin-bottom:12px;position:relative;}
.field label{display:block;font-size:13px;line-height:1.35;font-weight:600;margin-bottom:5px;}
.field input,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  transition:border-color .15s ease;
}
.field input:focus,.field textarea:focus{border-color:var(--rose);}
.field input[disabled]{background:#FAFAFA;color:var(--muted);}
.field textarea{resize:vertical;}
.hint{font-size:12px;color:var(--muted);margin:5px 0 0;}
.err{font-size:12.5px;line-height:1.4;color:#C2352B;margin:5px 0 0;min-height:1px;}
.err-form{text-align:center;margin-top:10px;}
.field.invalid input{border-color:#C2352B;}

.suggest{
  position:absolute;left:0;right:0;top:100%;z-index:20;
  margin:4px 0 0;padding:4px;list-style:none;max-height:240px;overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(40,20,30,.12);
}
.suggest li{padding:11px 12px;border-radius:8px;cursor:pointer;font-size:14px;
  min-height:44px;display:flex;align-items:center;}
.suggest li:hover,.suggest li[aria-selected="true"]{background:var(--pale);}

.receipt-live{max-width:none;margin-top:16px;}

.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  /* Нижній відступ враховує смугу жестів на iPhone, інакше кнопка
     опиняється частково під нею і натискається з другого разу. */
  padding:11px 18px calc(11px + env(safe-area-inset-bottom, 0px));
  background:var(--paper);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 22px rgba(40,20,30,.08);
}
.sticky-bar[hidden]{display:none;}
.sticky-price{font-size:17px;font-weight:600;}
.sticky-price s{font-size:12px;margin-left:8px;color:var(--muted);font-weight:300;}
@media (min-width:900px){ .sticky-bar{display:none;} }

.thanks{padding:60px 0 80px;}
.thanks h1{margin-bottom:.3em;}
.thanks-num{font-size:15px;margin:0 0 14px;}
.thanks .btn{margin-top:18px;}

/* Індикатор пошуку в довіднику Нової пошти. Запит іде мережею і може
   зайняти секунду-дві — без крутилки незрозуміло, чи щось відбувається,
   чи поле просто нічого не знайшло. */
.field.loading::after{
  content:"";position:absolute;right:14px;top:37px;
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--rose);
  animation:vs-spin .8s linear infinite;pointer-events:none;
}
@keyframes vs-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  /* Крутилка повідомляє стан, а не прикрашає, тому обертання лишаємо —
     просто повільніше, щоб не смикало око. */
  .field.loading::after{animation-duration:1.8s !important;}
}

/* Згода з умовами перед оформленням. Клікабельна вся стрічка, а не сам
   квадратик — на телефоні влучити в 20px неможливо. */
.field-agree{margin-top:14px;margin-bottom:14px;}
.agree{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-size:13px;line-height:1.5;color:var(--muted);
  padding:6px 0;min-height:44px;}
.agree input{flex:0 0 auto;width:22px;height:22px;margin:0;accent-color:var(--lh);cursor:pointer;}
.agree a{color:var(--rose-text);}
.field-agree.invalid .agree{color:#C2352B;}
.field-agree.invalid .agree input{outline:2px solid #C2352B;outline-offset:2px;border-radius:4px;}

/* Сторінки з правовою інформацією */
.legal{padding:44px 0 64px;}
.legal h1{font-size:clamp(28px,6vw,40px);margin-bottom:.3em;}
.legal h2{font-size:clamp(19px,3.4vw,23px);margin:32px 0 10px;}
.legal p,.legal li{font-size:15px;line-height:1.75;color:var(--muted);}
.legal strong{color:var(--ink);font-weight:600;}
.legal a{color:var(--rose-text);}
.legal ul{margin:0 0 1em;padding-left:20px;}
.legal li{margin-bottom:6px;}
.legal-date{font-size:13px;color:var(--rose);margin-bottom:28px;}
.legal-back{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);}
.legal .wrap{max-width:760px;}