/* screens.css — секції сторінок. Останній у черзі, перекриває base. */

/* ── Перший екран: bento ──────────────────────────────────────────────────────
   Не «заголовок і фото», а плитки: заголовок, знімок, стан квятомату просто зараз,
   найнижча ціна, години обох адрес і відгук. Людина, яка прийшла з пошуку, бачить
   усе, заради чого прийшла, не гортаючи. Дві колонки з передбачуваними висотами, а
   не сітка з рядками: рядки росли б від знімка, і заголовок вилазив би за плитку. */
.bento{display:grid;gap:var(--s2);grid-template-columns:1fr}
/* Колонки тягнуться на одну висоту: праворуч лишився сам знімок, і при
   align-items:start він обривався б на половині лівої колонки. */
@media (min-width:880px){
  .bento{grid-template-columns:1.06fr .94fr;align-items:stretch}
  .bento>.bcol:last-child{align-content:stretch}
}
.bcol{display:grid;gap:var(--s2);align-content:start}
.bduo{display:grid;gap:var(--s2);grid-template-columns:1fr 1fr}
/* На телефоні дві плитки поруч — це два вузькі стовпчики, де «24/7» і рядок про
   вміст автомата ламаються на чотири рядки кожен. Нижче 520 px вони стають одна
   під одною. */
@media (max-width:520px){.bduo{grid-template-columns:1fr}}
.b{border-radius:var(--r-tile);padding:var(--s3);background:var(--card);
  border:1px solid var(--line);display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--s2);overflow:hidden}
/* Титул стоїть на оливі, а не на вершковому. Вершкове лишається там, де воно
   ярлик — ціна на знімку, кнопка на оливковій панелі; заливати ним найбільшу
   площу першого екрана означало б зробити жовтий головною фарбою сайту. */
.b-title{background:var(--g-olive);color:var(--on-brand);border:0;
  padding:clamp(1.6rem,3vw,2.4rem)}
.b-title h1{color:var(--on-brand)}
.b-title .eyebrow{color:var(--cream)}
/* Надзаголовок «Kwiaciarnia i kwiatomat · Kraków» стоїть усередині h1: місто й послуга
   — саме те, що пошуковик шукає в головному заголовку, а «Świeże kwiaty o każdej porze»
   сам по собі не каже, де це й що це. Виглядає він так само, як окремий рядок над
   заголовком, тому шрифт, кегель і відступ тут повертаються до звичайного .eyebrow. */
.b-title h1 .eyebrow{font-family:var(--font);line-height:1.6;letter-spacing:.14em;margin-bottom:var(--s2)}
.b-title .lead{color:rgba(250,248,238,.9);max-width:26rem}
.b-title .opennow{color:rgba(250,248,238,.72)}
.b-title .opennow.on{color:var(--on-brand)}
.b-title .opennow.on .dot{background:var(--cream)}
/* Кнопки на оливі — ті самі, що на панелі квятомату: залита стає вершковою, бо
   оливкова на оливі перестає бути кнопкою. */
.b-title .btn-fill{background:var(--g-cream);color:var(--on-cream);box-shadow:none}
.b-title .btn-line{background:transparent;border-color:rgba(250,243,163,.5);color:var(--cream)}
.b-title .btn-line:hover{background:rgba(250,243,163,.12);border-color:var(--cream)}
.b-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s4)}
.b-live{background:var(--g-sage);border:0}
/* Плитка квятомату — не напис, а двері: веде на /kwiatomat/#teraz, де видно
   кожну комірку автомата просто зараз. Рядок «5 із 6 букетів» відповідає на
   питання «чи є», а наступне питання завжди «а які саме». */
a.b{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
a.b:hover,a.b:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow)}
.b-live .eyebrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s1)}
.b-live .eyebrow .arw{width:1rem;height:1rem;flex:none;color:var(--brand);
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .3s var(--ease)}
a.b-live:hover .arw{transform:translateX(.25rem)}
@media (prefers-reduced-motion:reduce){a.b:hover,a.b:focus-visible{transform:none}}
.b-price{background:var(--g-sand);border:0}
.b-live b,.b-price b{font-family:var(--font-d);font-size:1.5rem;font-weight:500;
  display:block;line-height:1.1}
.b-live span,.b-price span{font-size:var(--t-small);color:var(--ink-soft);display:block}
.b-hours ul{display:grid;gap:.5rem;font-size:.92rem}
.b-hours li{display:flex;justify-content:space-between;gap:var(--s2)}
.b-hours li span{color:var(--ink-soft);text-align:right}
.b-photo{padding:0;border:0}
.b-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* На широкому знімок добирає висоту лівої колонки замість сталої пропорції:
   відгук із цієї колонки прибраний, і без цього під фото лишалася б дірка. */
@media (min-width:880px){
  .b-photo img{flex:1;min-height:20rem;height:100%;aspect-ratio:auto}
}

/* «Сьогодні відчинено до 18:00». Рядок живе тільки зі скриптом — у розмітці він
   схований: сказати «відчинено» о другій ночі гірше, ніж не сказати нічого. Крапка
   не зелена й не червона — палітра тут із двох фарб: відчинено це олива, зачинено —
   той самий тихий колір, що й у тексті. */
.opennow{display:flex;align-items:center;gap:var(--s1);margin-top:var(--s3);
  font-size:var(--t-small);color:var(--ink-soft)}
.opennow.on{color:var(--ink)}
.opennow .dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none}
.opennow.on .dot{background:var(--brand)}

/* ── Титул на внутрішніх сторінках ────────────────────────────────────────────
   Там, де bento зайве (одна тема, один знімок), лишається звичайний титул. */
.hero{padding-block:var(--s6)}
.hero-in{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){
  .hero{padding-block:var(--s7)}
  .hero-in{grid-template-columns:1.05fr .95fr;gap:var(--s6)}
}
.hero h1{margin-block:var(--s2) var(--s3)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s4)}
.sec-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s4)}
.hero-fig{position:relative}
.hero-fig img{display:block;aspect-ratio:4/5;width:100%;object-fit:cover;
  border-radius:var(--r-photo);box-shadow:var(--shadow-photo)}

/* Смужка фактів. Плитки, а не рядок із волосинами: та сама мова, що в bento. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--s2)}
.facts li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-tile);
  padding:var(--s3)}
/* Кегль рухомий, а не сталий. Unbounded широкий, а найдовше слово смуги —
   «Poniedziałek»: одне, без пробілу, перенести його нема де, і при сталих 1.35rem
   воно вилазило за плитку — документ ставав ширшим за екран телефона. */
.facts b{display:block;font-family:var(--font-d);font-size:clamp(.95rem,3.4vw,1.35rem);
  font-weight:500;line-height:1.2;hyphens:auto;overflow-wrap:anywhere}
.facts span{font-size:var(--t-small);color:var(--ink-soft)}

/* ── Каталог ──────────────────────────────────────────────────────────────────
   Рівна сітка однакових кадрів, ціна ярликом просто на знімку. Мозаїки з плиток
   різного розміру тут була й прибрана: каталог сезонний, половина карток
   прихована, і плитки різної ширини лишали діри та рвані ряди — знімки читались
   як розсипані. Разом із нею пішли класи p1…p5, які роздавав main.js. */
.sec-head-side .lead{font-size:var(--t-body)}
.grid-note{margin:var(--s4) 0 0;font-size:var(--t-small);color:var(--ink-soft);max-width:var(--wrap-text)}
.grid-b{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
.card{position:relative;display:grid;border-radius:var(--r-photo);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow);color:inherit}
.card img,.card video{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
.card img{transition:transform .8s var(--ease)}
.card:hover img,.card:focus-visible img{transform:scale(1.05)}
.card-fig{position:relative;margin:0;display:grid}
/* Затемнення під ціною. Постійне, бо ціна стоїть на знімку завжди — вершковий
   ярлик читається й сам, але без затемнення він висить у порожнечі. */
.card-fig::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--scrim)}
.card[hidden]{display:none}

/* Рівна сітка, а не мозаїка. Плитки різної ширини й висоти читались як розсипані:
   око шукає ряд, а ряду немає, і замість каталогу виходить купа. Тепер усі кадри
   однієї пропорції, і дрібніші — чотири в ряду на широкому екрані замість двох. */
@media (min-width:760px){.grid-b{grid-template-columns:repeat(3,1fr);gap:var(--s3)}}
@media (min-width:1100px){.grid-b{grid-template-columns:repeat(4,1fr)}}

/* Ціна — ярлик на знімку, а не рядок під ним. Назв у букетів немає навмисне:
   склад залежить від того, що сьогодні свіже. */
.card-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--s2);display:flex;justify-content:flex-end;align-items:flex-end}
.card-cap .price{background:var(--g-cream);color:var(--on-cream);
  padding:.4rem .8rem;border-radius:var(--r);font-size:var(--t-small);
  font-weight:600;white-space:nowrap;margin:0}
/* Ярлик дії проявляється при наведенні — картка читається як дія, а не як картинка. */
.card-tag{
  position:absolute;left:var(--s2);bottom:var(--s2);z-index:3;
  display:inline-flex;align-items:center;gap:.45rem;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--ink);padding:.45rem .85rem;border-radius:var(--r);
  font-size:var(--t-small);font-weight:500;
  opacity:0;transform:translateY(.5rem);
  transition:opacity .35s var(--ease),transform .35s var(--ease)
}
.card-tag svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.card:hover .card-tag,.card:focus-visible .card-tag{opacity:1;transform:none}

/* ── Квятомат ─────────────────────────────────────────────────────────────────
   Оливкова панель, а не смуга на всю ширину екрана: цілодобовий автомат — те,
   чого немає в конкурентів, і він мусить виглядати як окрема річ на сторінці. */
.mat{padding-block:var(--s4)}
/* Оливу несе контейнер секції, а не .mat-in. Секцій із класом `mat` дві: на головній
   це блок із фото (`.wrap.mat-in`), на /kwiatomat/ — «що стоїть зараз» (просто
   `.wrap`). Прив'яжеш фарбу до .mat-in — і друга секція лишиться зі світлим текстом
   на світлому папері, тобто невидимою. Перевірено на живій сторінці. */
.mat > .wrap{background:var(--g-olive);color:var(--on-brand);border-radius:var(--r-panel);
  padding:clamp(1.8rem,4vw,3.4rem)}
.mat-in{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){.mat-in{grid-template-columns:1.05fr .95fr;gap:var(--s6)}}
.mat h2{color:var(--on-brand)}
.mat .eyebrow{color:var(--cream)}
.mat .lead{color:rgba(250,248,238,.9)}
.mat-list{margin-top:var(--s4);display:grid;gap:.75rem}
.mat-list li{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--t-small)}
.mat-list .ic{width:1.1rem;height:1.1rem;color:var(--cream);margin-top:.15rem;flex:none}
.mat-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s4)}
.mat .btn-fill{background:var(--g-cream);color:var(--on-cream);box-shadow:none}
.mat .btn-line{background:transparent;border-color:rgba(250,243,163,.5);color:var(--cream)}
.mat .btn-line:hover{background:rgba(250,243,163,.12);border-color:var(--cream)}
.mat-note{font-size:var(--t-small);color:rgba(250,248,238,.72);margin-top:var(--s3)}
/* Скільки букетів в автоматі просто зараз. Вершкове й крапка перед рядком — щоб
   читалось як табло: це єдине число на сайті, яке міняється протягом дня. */
.mat-live{display:flex;align-items:center;gap:.6rem;margin-top:var(--s3);
  font-size:var(--t-small);color:var(--cream)}
.mat-live::before{content:'';width:.5rem;height:.5rem;border-radius:50%;
  background:var(--cream);flex:none}
/* Той самий рядок, коли він стоїть плиткою на першому екрані. */
.b-live .mat-live{margin:0;color:var(--ink)}
.b-live .mat-live::before{background:var(--brand)}
.mat-fig{position:relative;margin:0}
.mat-fig img{aspect-ratio:4/5;width:100%;object-fit:cover;background:rgba(250,243,163,.08);
  border-radius:var(--r-photo)}
/* Другий знімок зблизька — накладкою в куті головного, повністю всередині батька. */
.mat-fig .mat-inset{
  position:absolute;left:var(--s2);bottom:var(--s2);width:38%;aspect-ratio:1/1;
  z-index:2;border:1px solid rgba(250,243,163,.3);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.45);
  border-radius:var(--r-tile)
}

/* ── Вітрина квятомату ────────────────────────────────────────────────────────
   Не сітка плиток, а сам автомат: два ряди дверцят по три комірки й панель
   терміналу збоку — рівно те, що клієнт побачить, коли підійде. Розмітку цього
   блоку малює main.js, тому класи тут міняти не можна. */
.mats{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:flex-start}
.matcol{flex:1 1 15rem;max-width:21rem}
.matname{margin:0 0 .15rem;font-size:var(--t-body);font-weight:600;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}
.mataddr{margin:0 0 var(--s2);font-size:var(--t-small);color:var(--ink-soft)}
/* Назва й адреса машини стоять на оливковій панелі, а не на папері: --ink-soft там
   майже зникає (у світлій темі це темна олива на оливі). Перевірено на сторінці. */
.mat .matname{color:var(--on-brand)}
.mat .mataddr{color:rgba(250,248,238,.72)}
.slots{max-width:21rem}
.machine{background:var(--g-metal);border-radius:var(--r-tile);overflow:hidden}
:root[data-theme="dark"] .machine{box-shadow:0 0 0 1px var(--metal-line)}
.machine-top{background:var(--metal-2);border-bottom:1px solid var(--metal-line);
  padding:.7rem var(--s2);text-align:center;color:var(--cream);
  font-size:var(--t-eyebrow);letter-spacing:.24em;text-transform:uppercase}
.machine-body{display:grid;grid-template-columns:minmax(0,1fr) 3.6rem;gap:.5rem;padding:.5rem}
.machine-doors{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.door{display:grid;gap:2px;background:var(--metal);border-radius:2px;overflow:hidden}
.machine-side{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.6rem .3rem}
.machine-side i{display:block;background:var(--glass);border-radius:1px}
/* Екран терміналу світиться тією самою заливкою, що кнопки сайту. */
.machine-side .m-scr{width:2.2rem;height:2.8rem;background:var(--g-btn);border-radius:4px}
.machine-side .m-pay{width:1.4rem;height:.4rem}
.machine-side .m-slot{width:2.2rem;height:.3rem}
.machine-side .m-tray{width:2.6rem;height:.9rem;margin-top:auto;background:var(--metal-2)}
.slot{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--glass);display:block;border:0}
.slot img{width:100%;height:100%;object-fit:cover}
.slot-btn{position:absolute;inset:0;padding:0;border:0;background:none;cursor:zoom-in;display:block}
.slot-btn:focus-visible{outline:2px solid var(--cream);outline-offset:-2px}
.slot.is-free::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,var(--glass-hi) 38%,var(--glass-hi) 52%,transparent 52%)}
.slot-n{position:absolute;left:.3rem;top:.3rem;z-index:2;width:1.2rem;height:1.2rem;
  border-radius:50%;display:grid;place-items:center;
  background:var(--brand-dark);color:var(--cream);font-size:.6rem;font-weight:500}
.slot-price{position:absolute;left:.3rem;bottom:.3rem;z-index:2;padding:.2rem .45rem;
  border-radius:999px;background:var(--g-cream);color:var(--on-cream);
  font-size:.7rem;letter-spacing:.02em}
.slot.is-free{display:grid;place-items:center}
/* Підпис порожньої комірки живе на темному склі в ОБОХ темах, тому колір тут не
   з токенів тексту: у світлій темі --ink-soft — темна олива, тобто напис на склі
   зникав би. */
.slot-free{position:relative;z-index:2;color:rgba(250,248,238,.5);
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.slots-note{margin-top:var(--s3);font-size:var(--t-small);color:var(--ink-soft)}
.mat .slots-note{color:rgba(250,248,238,.72)}
#teraz{padding-block:var(--s5)}
@media (min-width:900px){
  #teraz{padding-block:var(--s6)}
  #teraz .wrap{display:grid;grid-template-columns:minmax(0,1fr) 24rem;gap:var(--s5);align-items:center}
  @media (min-width:1200px){#teraz .wrap{grid-template-columns:minmax(0,1fr) 46rem}}
  #teraz .sec-head{display:grid;grid-template-columns:1fr;margin-bottom:0}
  #teraz .sec-head>.lead{justify-self:start;margin-top:var(--s3)}
  #teraz .slots{max-width:none}
}

/* Знімок букета на весь екран. Тло чорне в обох темах навмисне: це не поверхня
   сайту, а тло під фотографією, і світле поруч із букетом зсуває його кольори. */
.zoom{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.94);display:flex;
  align-items:center;justify-content:center;padding:1rem;cursor:zoom-out;
  opacity:0;transition:opacity .18s var(--ease)}
.zoom.on{opacity:1}
.zoom-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:.7rem;max-height:100%}
.zoom-fig img{max-width:100%;max-height:calc(100vh - 5rem);object-fit:contain;border-radius:var(--r-tile)}
.zoom-fig figcaption{color:#fff;font-size:var(--t-small);letter-spacing:.04em;opacity:.85}
.zoom-x{position:absolute;top:1rem;right:1rem;width:2.6rem;height:2.6rem;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);cursor:pointer}
.zoom-x::before,.zoom-x::after{content:'';position:absolute;left:50%;top:50%;
  width:1.1rem;height:2px;background:#fff;border-radius:1px;transform:translate(-50%,-50%) rotate(45deg)}
.zoom-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.zoom-x:hover{background:rgba(255,255,255,.24)}

/* ── Сезонні квіти ────────────────────────────────────────────────────────────
   Усі дванадцять місяців лежать у розмітці, а JS лишає видимими поточний і
   наступний. Календар іде за гуртівнею, а не за цвітінням у саду. */
.season{display:grid;gap:var(--s2)}
.season li{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:var(--s2);
  align-items:baseline;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-tile);padding:var(--s3)}
.season li b{font-family:var(--font-d);font-size:var(--t-h3);font-weight:500}
.season li em{font-family:var(--font);font-style:normal;font-size:var(--t-eyebrow);
  letter-spacing:.1em;text-transform:uppercase;margin-left:.5rem}
.season li i{font-style:normal;font-weight:600}
.season li em,.season li i{color:var(--brand-dark)}
:root[data-theme="dark"] .season li em,:root[data-theme="dark"] .season li i{color:var(--brand)}
@media (max-width:640px){.season li{grid-template-columns:1fr;gap:var(--s1)}}
.js .season li{display:none}
.js .season li.is-now,.js .season li.is-soon{display:grid}
.js .season li.is-soon{color:var(--ink-soft)}
.js .season li.is-soon em{color:var(--ink-soft)}
/* Смуга знімків під календарем: чотири квітки того місяця, в якому людина зараз
   читає. Квадрат навмисне: знімки різного походження, спільна форма робить із них
   смугу, а не купу випадкових прямокутників. */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-top:var(--s4)}
/* Чотири в ряду — бо на кожен місяць їх рівно чотири: один повний ряд і жодного
   хвоста. Число не випадкове, воно тримається на data-m у розмітці, і додати там
   п'яту квітку означає розсунути смугу на другий ряд заради одного кадру. */
@media (min-width:760px){.shots{grid-template-columns:repeat(4,1fr);gap:var(--s3)}}
.shots img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-tile)}
.shots b{display:block;margin-top:var(--s1);font-family:var(--font-d);
  font-size:var(--t-h3);font-weight:500}
.js .shots li{display:none}
.js .shots li.is-now{display:block}

/* ── Як це працює ─────────────────────────────────────────────────────────────
   Нумерація тут не оздоба: це справді послідовність із трьох кроків. */
.steps{counter-reset:s;display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.step{counter-increment:s;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-tile);padding:var(--s3)}
.step::before{content:counter(s);display:grid;place-items:center;
  width:2.2rem;height:2.2rem;border-radius:50%;background:var(--g-sand);
  color:var(--ink);font-family:var(--font-d);font-size:.95rem;margin-bottom:var(--s2)}
.step:nth-child(2)::before{background:var(--g-sage)}
.step:nth-child(3)::before{background:var(--g-cream);color:var(--on-cream)}
.step h3{margin-bottom:var(--s1)}
.step p{color:var(--ink-soft);font-size:var(--t-small)}

/* ── Нагоди ───────────────────────────────────────────────────────────────────
   Рядок оживає при наведенні: плитка проявляється під ним, а не з'являється
   заливкою — текст лишається на місці. */
.occ{display:grid;gap:var(--s2)}
.occ-row{
  position:relative;isolation:isolate;
  display:grid;gap:var(--s2) var(--s4);align-items:center;
  padding:var(--s3);border-radius:var(--r-tile);
  background:var(--card);border:1px solid var(--line);
  transition:border-color .45s var(--ease),transform .45s var(--ease)
}
.occ-row::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--g-title);opacity:0;transition:opacity .45s var(--ease)
}
.occ-row:hover,.occ-row:focus-within{border-color:transparent;transform:translateY(-2px)}
.occ-row:hover::before,.occ-row:focus-within::before{opacity:1}
@media (min-width:760px){.occ-row{grid-template-columns:16rem 1fr auto;align-items:baseline}}
.occ-row h3{transition:color .5s var(--ease)}
.occ-row p{color:var(--ink);font-size:var(--t-body);line-height:1.6;max-width:34rem}
.occ-row .btn{justify-self:start}
.occ-row:hover .arw{transform:translateX(.3rem)}

/* ── Галерея ──────────────────────────────────────────────────────────────────
   Дві колонки, знімки складені парами однакового формату, тому рядок завжди
   рівний і нічого не обтинається під спільний розмір. */
.gal{display:grid;gap:var(--s2);grid-template-columns:1fr}
@media (min-width:760px){
  .gal{grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
  .gal figure:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--s3) / 2)}
}
.gal figure{margin:0}
.gal img{width:100%;height:auto;display:block;border-radius:var(--r-photo);box-shadow:var(--shadow)}

/* ── Відгуки ──────────────────────────────────────────────────────────────────
   Оцінка — головне в цьому блоці, тому вона число, а не речення. */
.ops-rate{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.ops-score{display:flex;align-items:center;gap:var(--s2)}
.ops-score>b{font-family:var(--font-d);font-weight:500;font-size:clamp(2.2rem,4.4vw,3rem);
  line-height:1;color:var(--brand)}
.ops-score span{display:block;margin-top:.35rem;font-size:var(--t-small);color:var(--ink-soft)}
.ops-score .op-st .ic{width:1.05rem;height:1.05rem}
.ops{display:grid;gap:var(--s2);grid-template-columns:1fr}
@media (min-width:700px){.ops{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ops{grid-template-columns:repeat(3,1fr)}}
/* У дві колонки третій відгук стояв сам під першим із порожнім місцем поруч — тепер на всю ширину. */
@media (min-width:700px) and (max-width:1099px){.op:last-child:nth-child(odd){grid-column:1/-1}}
.op{margin:0;display:flex;flex-direction:column;gap:var(--s2);
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-tile);padding:var(--s3)}
.op-st{display:flex;gap:.2rem;color:var(--brand)}
/* Зірка — єдиний значок на сайті, який залитий, а не обведений: обведена в такому
   розмірі перетворюється на пляму з дірками. */
.op-st .ic{width:.9rem;height:.9rem;fill:currentColor;stroke:none}
.op blockquote{margin:0;font-size:var(--t-small);line-height:1.7}
.op figcaption{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:1px}
.op figcaption b{font-weight:600}
.op figcaption span{font-size:var(--t-eyebrow);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft)}

/* ── Про нас ──────────────────────────────────────────────────────────────── */
.about{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){.about{grid-template-columns:.9fr 1.1fr;gap:var(--s6)}}
.about-txt p+p{margin-top:var(--s2)}
.about-fig{position:relative;margin:0}
.about-fig img{display:block;aspect-ratio:1/1;width:100%;object-fit:cover;
  border-radius:var(--r-photo);box-shadow:var(--shadow)}
.quote{font-family:var(--font-d);font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.45;
  font-weight:400;padding:var(--s3);margin-top:var(--s4);
  background:var(--g-title);border-radius:var(--r-tile);color:var(--ink)}

/* ── Контакт ──────────────────────────────────────────────────────────────── */
.contact{display:grid;gap:var(--s5)}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.cinfo{display:grid;gap:var(--s2)}
.cinfo li{display:flex;gap:var(--s2);align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-tile);
  padding:var(--s3)}
.cinfo .ic{color:var(--brand);margin-top:.2rem;flex:none}
.cinfo b{display:block;font-weight:600}
.cinfo span{font-size:var(--t-small);color:var(--ink-soft)}
.contact-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s4)}
.map{aspect-ratio:4/3;width:100%;border:0;border-radius:var(--r-photo);
  filter:grayscale(1) contrast(.9);background:var(--paper-2)}
/* Карта до кліку — тиха плитка з адресою, а не сіра діра: адресу видно й без Google.
   Кнопка без JS нічого б не зробила, тож без нього лишається тільки посилання. */
.map-off{filter:none;display:grid;place-content:center;justify-items:center;gap:var(--s2);
  padding:var(--s4);text-align:center;background:var(--g-sand);border:1px solid var(--line)}
.map-off>.ic{width:2rem;height:2rem;color:var(--brand)}
.map-off p{margin:0;max-width:22rem}
.map-off b{display:block;font-weight:600}
.map-off span{display:block;margin-top:.3rem;font-size:var(--t-small);color:var(--ink-soft)}
.map-off .btn{display:none}
.js .map-off .btn{display:inline-flex}

/* Сторінка букета (/sklep/<id>/, генерує tools/strony-bukietow.js). Перший екран — той
   самий hero, лише під описом ціна й розміри фішками: як у магазині, тільки без кнопок. */
.pp-price{margin:var(--s3) 0 var(--s2);font-family:var(--font-d);font-weight:500;font-size:var(--t-h3)}
.pp-sizes{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--s3);padding:0;list-style:none}
.pp-sizes li{display:flex;gap:.5rem;align-items:baseline;padding:.45rem .9rem;font-size:var(--t-small);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.pp-sizes b{font-weight:600}
.pp-sizes li[hidden]{display:none}
.pp-gone{margin:0 0 var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-tile);background:var(--paper-2)}
.pp-note{margin:var(--s3) 0 0;max-width:34rem;color:var(--ink-soft)}

/* Суцільний текст документа — політика приватності й регламін. Вузька колонка, бо це читають
   очима, а не проглядають: рядок у 70 знаків читається, рядок на всю ширину — ні. */
.doc{max-width:var(--wrap-text)}
.doc h3{font-size:var(--t-h3);margin:var(--s4) 0 var(--s1)}
.doc h3:first-child{margin-top:0}
.doc p{margin:0 0 var(--s2);line-height:1.7}
.doc ul{margin:0 0 var(--s2);padding-left:1.1rem;line-height:1.7;list-style:disc}
.doc li{margin-bottom:var(--s1)}
.doc-date{font-size:var(--t-small);color:var(--ink-soft)}
/* Зразок форми відмови (регламін): рамка-бланк, щоб його видно було як окремий аркуш,
   який можна переписати чи роздрукувати, а не як ще один абзац. */
.doc-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-tile);padding:var(--s3);margin:0 0 var(--s4)}
.doc-form p{margin:0 0 var(--s2)}
.doc-form p:last-child{margin:0}

/* ── Форма запису на розсилку й відписки (/tak/, /stop/) ──────────────────────
   Клас `ask`, а не `lead`: `.lead` на цьому сайті вже зайнятий абзацом під
   заголовком секції. Форми заявки на головній більше немає (v25): замовляють у
   магазині, телефоном або в WhatsApp. */
.ask{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:var(--s2)}
.ask-head h3{font-size:var(--t-h3);margin:0 0 .35rem}
.ask-head p{color:var(--ink-soft);font-size:var(--t-small);max-width:var(--wrap-text);margin:0}
.ask-grid{display:grid;gap:var(--s2)}
@media (min-width:640px){.ask-grid{grid-template-columns:1fr 1fr}.fl-wide{grid-column:1/-1}}
.fl{display:grid;gap:.3rem}
.fl span{font-size:var(--t-small);color:var(--ink-soft)}
.fl input,.fl textarea{font:inherit;font-size:var(--t-body);color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-field);padding:.7rem .9rem;width:100%;resize:vertical}
.fl input:focus,.fl textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
/* Галочка згоди: на сторінках /tak/ згода — це вся суть сторінки. */
.ask-ok{display:flex;gap:var(--s1);align-items:flex-start;font-size:var(--t-small);
  color:var(--ink-soft);cursor:pointer}
.ask-ok input{margin-top:.15rem;accent-color:var(--brand);width:1.05rem;height:1.05rem;flex-shrink:0}
/* Приманка для ботів: людина цього поля не бачить і табом у нього не потрапляє. */
.ask-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ask-send{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.ask-msg{margin:0;font-size:var(--t-small);color:var(--ink-soft)}
.ask-msg.ok{color:var(--brand)}
.ask-note{margin:0;font-size:var(--t-eyebrow);line-height:1.6;color:var(--ink-soft);max-width:var(--wrap-text)}