/* layout.css — контейнер, шапка, підвал, ритм секцій. Другий у черзі. */

.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
@media (max-width:600px){.wrap{width:calc(100% - 1.6rem)}}

/* Ритм секцій. */
section{padding-block:var(--s6)}
@media (min-width:900px){section{padding-block:var(--s7)}}
/* Тонована секція входить із паперу й виходить у папір. Верх уже так і робився,
   а низ лишався встик — і на межі з нетонованою секцією нижче з'являлася рівна
   горизонтальна лінія, найпомітніша в темній темі. Дві фарби майже однакові, тож
   шов між ними читається саме як накреслена риска. Тепер гасне з обох боків. */
.sec-tint{background:linear-gradient(180deg,
  var(--paper) 0%,var(--paper-2) 22%,var(--paper-2) 78%,var(--paper) 100%)}

/* Шапка секції: надзаголовок ліворуч, заголовок під ним, текст праворуч. */
.sec-head{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.sec-head-side{display:grid;gap:var(--s3);align-content:end}
@media (min-width:900px){
  .sec-head{grid-template-columns:1fr 1fr;align-items:end;gap:var(--s5);margin-bottom:var(--s6)}
  .sec-head>.lead{justify-self:end}
  .sec-head-side{justify-self:end;max-width:var(--wrap-text)}
}

/* ── Шапка сайту ─────────────────────────────────────────────── */
/* Скляна смуга. Порядок двох background і двох backdrop-filter не випадковий:
   перший рядок кожної пари — для Safari, яка знає color-mix лише з 16.2, а
   backdrop-filter без -webkit- аж із 18-ї. Браузер, що другого рядка не розуміє,
   просто лишає перший, і шапка не стає скляною без скла. */
.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)
}
.hdr.stuck{border-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.2rem;height:var(--hdr-h)}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-d);
  font-weight:500;font-size:1.02rem;letter-spacing:-.01em}
/* Справжній знак із логотипу. Напис «BARVINOK FLOWERS» на ньому в такому
   розмірі нечитний, тому назва поруч — текстом. */
.logo .mark{width:2rem;height:2rem;border-radius:10px;flex:none}
.nav{display:flex;flex-wrap:nowrap;gap:1.4rem;margin-left:auto}
.nav a{font-size:.94rem;color:var(--ink-soft);white-space:nowrap;flex:none;
  transition:color .25s var(--ease)}
.nav a:hover{color:var(--ink)}
.hdr-side{display:flex;align-items:center;gap:.9rem}
/* Перемикач теми. Значок один — коло, залите наполовину: він не обіцяє «зараз буде
   ніч» чи «зараз буде день», а просто каже, що тут перемикається контраст. */
.themebtn{background:none;border:0;padding:.3rem;color:var(--ink-soft);cursor:pointer;
  display:flex;border-radius:50%;transition:color .25s var(--ease),transform .4s var(--ease)}
.themebtn:hover{color:var(--ink)}
.themebtn .ic{width:1.15rem;height:1.15rem}
:root[data-theme="dark"] .themebtn{transform:rotate(180deg)}
.lang{display:flex;gap:.35rem;font-size:var(--t-eyebrow);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.lang a[aria-current]{color:var(--ink);font-weight:600}
.burger{display:none;background:none;border:0;padding:.4rem;color:var(--ink);cursor:pointer}

/* Меню ховається в кнопку не «на телефоні», а всюди, де рядок шапки не влазить:
   дев'ять пунктів, перемикач мов, тема й кнопка з телефоном разом просять понад
   1300 px, а найдовші назви — українські й англійські. Поріг був 1319 px, коли
   пунктів було вісім; із «Про нас» на 1330 px лишалося 19 px між меню й мовами —
   менше, ніж різниця в накресленні шрифту між машинами. Тепер повне меню
   починається з 1366 px, де запас близько 55 px. Міряно на сторінці в трьох мовах. */
@media (max-width:1365px){
  .burger{display:block;margin-left:auto}
  .hdr-side .btn{display:none}
  .nav{
    position:fixed;inset:4rem 0 auto;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:var(--s1) 0 var(--s4);
    /* Закрите меню виїжджає за верх цілком: -120 % власної висоти не вистачало, бо
       воно починається на 4rem нижче краю, і довге меню визирало смужкою над шапкою,
       накриваючи смугу свята. visibility ще й прибирає пункти з обходу клавіатурою. */
    transform:translateY(calc(-100% - 4rem));visibility:hidden;
    transition:transform .35s var(--ease),visibility 0s .35s;margin:0
  }
  .nav.open{transform:none;visibility:visible;transition:transform .35s var(--ease)}
  .nav a{padding:.9rem 1.25rem;font-size:1.05rem;color:var(--ink);border-bottom:1px solid var(--line)}
}

/* На вузькому телефоні (360 px — найпоширеніша ширина Android) логотип, кнопка меню й
   правий блок разом ширші за рядок. Тут вони стискаються. Нічого не ховаємо —
   перемикач мов на тримовному сайті мусить бути видно з першого екрана. */
@media (max-width:420px){
  .hdr-in{gap:var(--s2)}
  .logo{font-size:.92rem;gap:.4rem}
  .logo .mark{width:1.8rem;height:1.8rem}
  .hdr-side{gap:var(--s2)}
  .lang{gap:.25rem;letter-spacing:.04em}
}

/* ── Смуга свята ─────────────────────────────────────────────
   Стоїть над шапкою і їде вгору разом зі сторінкою: це оголошення, а не навігація.
   Показує її скрипт, тому в розмітці вона hidden — інакше без JS висіли б усі
   п'ять дат одразу.
   Смуга вершкова, а не оливкова. Оливкова в темній темі зливалась із шапкою:
   --brand-deep там майже чорний, і власник смугу просто не помічав. Вершкове
   світиться в обох темах однаково, бо --g-cream і --on-cream від теми не залежать.
   Висота — як у кнопки, а не як у рядка дрібного тексту: свято, назва й дата
   мусять читатись з першого погляду, а замовлення — бути кнопкою, не посиланням.
   З'являється, висуваючись згори: скрипт показує її вже після першого малювання,
   і рух пояснює, звідки взявся зсув сторінки. */
.promo{background:var(--g-cream);color:var(--on-cream);
  border-bottom:1px solid rgba(38,41,21,.12);animation:promo-in .6s var(--ease) both}
.promo p{max-width:var(--wrap);margin:0 auto;padding:.85rem var(--s3);
  display:flex;gap:.4rem 1.25rem;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center}
.promo b{font:500 var(--t-h3)/1.25 var(--font-d)}
.promo span{font-size:var(--t-body)}
.promo .btn{padding:.7rem 1.3rem}
@keyframes promo-in{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.promo{animation:none}}
/* На телефоні назва свята — окремим рядком, кнопка — на всю ширину під текстом:
   великим пальцем у неї влучають з першого разу. */
@media (max-width:560px){
  .promo p{flex-direction:column;gap:.35rem;padding:var(--s2) var(--s2) .9rem}
  .promo .btn{margin-top:.4rem;width:100%;max-width:20rem}
}

/* ── Кнопки контакту на телефоні ──────────────────────────────
   Приклеєні внизу: людина дивиться букети посеред сторінки, і гортати вгору по
   номер вона не буде. На десктопі їх немає — там контакти й так у шапці. */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--paper) 88%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line)}
  .callbar .btn{justify-content:center;padding:.85rem .6rem}
  .callbar .ic{width:1rem;height:1rem}
  body{padding-bottom:5rem}
}

/* ── Кошик магазину ───────────────────────────────────────────
   Знак кошика — торбинка з тюльпаном у вершковому колі, з числом на краю. Один на
   смузі кошика, у «кабінеті» магазину й на кнопці, що чекає на решті сайту.
   Кільце довкола числа — вершкове: так воно не зливається ні з колом, ні з оливою. */
.bag-ic{position:relative;display:inline-grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;
  border-radius:var(--r);background:var(--g-cream);color:var(--on-cream)}
.bag-ic .ic{width:1.6rem;height:1.6rem}
.bag-ic .cnt{position:absolute;top:-.3rem;right:-.4rem;min-width:1.35rem;height:1.35rem;padding:0 .35rem;
  display:inline-grid;place-items:center;border-radius:var(--r);background:var(--g-btn);color:var(--cream);
  font:600 .72rem/1 var(--font);box-shadow:0 0 0 2px var(--cream)}
.bag-ic .cnt[hidden]{display:none}

/* Людина поклала квіти в кошик і пішла дивитись квятомат чи весілля — кошик іде за нею:
   пігулка в куті, що кілька разів тихо дихає світлом і далі просто чекає. Не вискакує
   й не трясеться: нагадування, а не тиск. На телефоні — саме коло над смугою контакту. */
.bagfab{position:fixed;z-index:60;right:var(--s4);bottom:var(--s4);display:flex;align-items:center;gap:.8rem;
  padding:.45rem 1.25rem .45rem .45rem;border-radius:var(--r);background:var(--g-btn);color:var(--cream);
  box-shadow:var(--shadow-btn);font-size:var(--t-small);transition:transform .25s var(--ease);
  animation:bag-glow 2.8s var(--ease) 1s 3}
.bagfab[hidden]{display:none}
.bagfab:hover{transform:translateY(-2px)}
.bagfab b{font-weight:600;margin-left:.3rem}
@keyframes bag-glow{50%{box-shadow:var(--shadow-btn),0 0 0 .5rem color-mix(in srgb,var(--cream) 18%,transparent),
  0 0 2.4rem color-mix(in srgb,var(--cream) 38%,transparent)}}
@media (max-width:760px){
  .bagfab{right:.75rem;bottom:calc(5.4rem + env(safe-area-inset-bottom,0px));padding:.4rem}
  .bag-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.bagfab{animation:none}.bagfab:hover{transform:none}}

/* ── Згода на куки Google Ads ─────────────────────────────────── */
/* Дві кнопки однакової ваги навмисно: відмовитись мусить бути так само легко, як
   погодитись, — інакше це не згода, а підштовхування, і UODO рахує її недійсною.
   На телефоні банер стоїть НАД смугою контакту, а не поверх неї: дзвінок важливіший. */
/* Банер згоди — посередині, як на більшості сайтів: доки нема відповіді, сторінка під ним
   затемнена й не реагує (inert ставить main.js). Затемнення — тінь самої картки, а не
   окремий шар: розмітка банера однакова на 28 сторінках і окремого тла не має. */
.ck{position:fixed;inset:0;z-index:70;margin:auto;width:calc(100% - 2*var(--s2));
  max-width:30rem;height:fit-content;display:grid;gap:var(--s2);
  padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-tile);
  background:color-mix(in srgb,var(--paper) var(--ck-glass),transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:var(--shadow),0 0 0 100vmax var(--dim);color:var(--ink);font-size:var(--t-small)}
.ck[hidden]{display:none}
/* Знак Barvinok над текстом — та сама марка, що у вкладці. Емодзі на сайті немає. */
.ck::before{content:"";justify-self:center;width:3.5rem;aspect-ratio:1;border-radius:var(--r-field);
  background:url(/img/favicon-192.png) center/cover;box-shadow:var(--shadow-photo)}
.ck p{margin:0;text-align:center;line-height:1.6}
.ck:focus{outline:none}
.ck-do{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1)}
/* «Akceptuję» трохи тепліша: оливкова облямівка й ледь помітний тон. Розмір, шрифт і місце
   ті самі, що в «Odrzucam», — відмова лишається так само видною й так само легкою. */
.ck [data-ck="y"]{border-color:var(--brand);background:var(--ck-yes)}

/* ── Підвал ──────────────────────────────────────────────────── */
.ftr{background:var(--g-olive);color:var(--on-brand);padding-block:var(--s6) var(--s4);
  border-radius:var(--r-panel) var(--r-panel) 0 0;margin-top:var(--s5)}
.ftr a{color:var(--on-brand)}
.ftr-grid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:760px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h4{font:500 var(--t-eyebrow)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
  opacity:.7;margin-bottom:var(--s2)}
.ftr li{margin-bottom:.4rem;font-size:var(--t-small)}
.ftr .logo{color:var(--on-brand);margin-bottom:var(--s2);width:fit-content;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}   /* двері в кабінет — main.js */
.ftr-note{
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(250,243,163,.22);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;
  font-size:var(--t-small);opacity:.75
}