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

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

section{padding-block:var(--s7)}
@media (min-width:900px){section{padding-block:var(--s8)}}
.sec-tint{background:var(--paper-2)}

/* Шапка секції: надзаголовок ліворуч, заголовок під ним, текст праворуч. */
.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)}
}

/* ── Шапка сайту ─────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);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:var(--s4);height:4.5rem}
.logo{font-family:var(--serif);font-size:1.6rem;letter-spacing:.02em;display:flex;align-items:center;gap:.6rem}
/* Справжній знак із логотипу. Напис «BARVINOK FLOWERS» на ньому в такому
   розмірі нечитний, тому назва поруч — текстом. */
.logo .mark{width:2.25rem;height:2.25rem;border-radius:var(--r);flex:none}
.nav{display:flex;gap:var(--s4);margin-left:auto}
.nav a{font-size:var(--t-small);color:var(--ink-soft);transition:color .25s var(--ease)}
.nav a:hover{color:var(--ink)}
.hdr-side{display:flex;align-items:center;gap:var(--s3)}
/* Перемикач теми. Значок один — коло, залите наполовину: він не обіцяє «зараз буде
   ніч» чи «зараз буде день», а просто каже, що тут перемикається контраст.
   У темній темі коло повертається — залита половина міняє бік, і видно, що стан інший. */
.themebtn{background:none;border:0;padding:.35rem;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:.4rem;font-size:var(--t-eyebrow);letter-spacing:.1em;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:.5rem;color:var(--ink);cursor:pointer}

@media (max-width:899px){
  .hdr-in{height:4rem}
  .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(--s2) 0 var(--s4);
    transform:translateY(-120%);transition:transform .35s var(--ease);margin:0
  }
  .nav.open{transform:none}
  .nav a{padding:var(--s2) 1.25rem;font-size:1.05rem;color:var(--ink);border-bottom:1px solid var(--line)}
}

/* ── Підвал ──────────────────────────────────────────────────── */
.ftr{background:var(--brand-dark);color:var(--on-brand);padding-block:var(--s6) var(--s4)}
/* ── Смуга свята ─────────────────────────────────────────────
   Стоїть над шапкою і їде вгору разом зі сторінкою: це оголошення, а не навігація,
   тримати його перед очима постійно немає за що. Показує її скрипт, тому в розмітці
   вона `hidden` — інакше без JS висіли б усі п'ять дат одразу. */
.promo{background:var(--brand-deep);color:var(--on-brand);font-size:var(--t-small)}
.promo p{max-width:var(--wrap);margin:0 auto;padding:.7rem var(--s3);
  display:flex;gap:.5rem .75rem;align-items:baseline;justify-content:center;
  flex-wrap:wrap;text-align:center}
.promo a{color:var(--cream);border-bottom:1px solid rgba(250,243,163,.5);padding-bottom:1px}
.promo a:hover{border-color:var(--cream)}

/* ── Кнопки контакту на телефоні ──────────────────────────────
   Приклеєні внизу: людина дивиться букети посеред сторінки, і гортати вгору по номер
   вона не буде. На десктопі їх немає — там контакти й так у шапці, а смуга внизу
   з'їдала б екран. Відступ знизу в body — щоб смуга не накрила підвал. */
.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:var(--paper);border-top:1px solid var(--line)}
  .callbar .btn{justify-content:center;padding:.85rem .6rem}
  .callbar .ic{width:1rem;height:1rem}
  body{padding-bottom:5rem}
}

.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(--sans);letter-spacing:.2em;text-transform:uppercase;
  opacity:.65;margin-bottom:var(--s2)}
.ftr li{margin-bottom:.4rem;font-size:var(--t-small)}
.ftr .logo{color:var(--on-brand);margin-bottom:var(--s2)}
.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:.7
}