/* ============================================================
ЛОВЕЦЬКИЙ — стилі.
Тема взята з логотипу: біле коло, помаранчевий обід, плетений кошик.
Звідси й фон — тепле майже-біле, як те коло, а не крафт і не дерево.
Верстка робиться спершу під телефон, десктоп — доповнення,
бо люди приходять з TikTok, а це майже завжди телефон.
============================================================ */
/* ---------- 1. Токени ---------- */
:root {
/* Кольори. Світла основа + два акценти + темна слива на низ. */
--tlo: #FBF6EF; /* фон сторінки: тепле майже-біле з кола логотипу */
--tlo-2: #F3EADD; /* фон другорядних блоків, на пів тону глибше */
--kartka: #FFFFFF; /* картки товарів — чисто біле, як коло емблеми */
--pomar: #F07830; /* помаранчевий обід логотипу: головний акцент */
--pomar-tem: #D2611F; /* те саме, темніше — натискання й наведення */
--salyami: #A83030; /* салямі: ціни й дрібні позначки */
--slyva: #2E1B2A; /* темна слива: шапка, підвал, темні плашки */
--vugil: #1C1A17; /* текст */
/* Напис на помаранчевому — майже чорний, а не білий.
Білий на #F07830 дає контраст 2.83 (норма 4.5), майже-чорний — 6.15. */
--na-pomar: #1C1A17;
--tekst-2: rgba(28, 26, 23, .68); /* другорядний текст */
/* Тихий текст, але не нечитабельний. Прозорість .48 давала контраст
3.02–3.15 при нормі 4.5 — заміряно на всіх трьох фонах сайту.
.62 дає 4.57–4.88 і на вигляд усе одно лишається тихим. */
--tekst-3: rgba(28, 26, 23, .62); /* геть тихий текст */
--linia: rgba(46, 27, 42, .15); /* рамки */
--linia-tem: rgba(251, 246, 239, .18);/* рамки на темному */
/* Скруглення дрібні: форма сайту — штамп, а не пілюля. */
--r-s: 4px;
--r-m: 8px;
--r-l: 12px;
--r-xl: 16px;
/* Відступи */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
--tin: 0 4px 14px rgba(46, 27, 42, .09);
--tin-silna:0 10px 30px rgba(46, 27, 42, .16);
/* Поличка під кнопкою-штампом: не розмита тінь, а щільна підкладка.
Кнопка «сидить» на ній, а при натисканні сідає вниз і поличка зникає. */
--polychka: 0 2px 0 var(--slyva);
--shryft-zag: 'Podkova', Georgia, serif;
--shryft: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--shryft-cifr:'Fira Sans Condensed', 'Fira Sans', sans-serif;
--shar-shapka: 40;
--shar-stryzhka: 30;
--shar-panel: 50;
--shar-shtora: 60;
/* Криві руху. Не вигадані: вбудовані в браузер надто мляві.
Значення перевірені практикою Vercel і Linear. */
--hid-vyhid: cubic-bezier(0.23, 1, 0.32, 1); /* поява й зникнення */
--hid-shtora: cubic-bezier(0.32, 0.72, 0, 1); /* висувна штора, як в айфоні */
--shyryna: 1180px;
/* Висота шапки живе тут, бо на неї спирається липка стрічка розділів.
--shapka-vsya — з рамкою знизу: саме на стільки треба опустити стрічку,
інакше в шов між ними видно, як проїжджає текст. */
--shapka-h: 68px;
--shapka-vsya: 70px;
/* Плетінка — ледь помітний натяк на кошик з логотипу.
Два перехрещені штрихування, майже невидимі: на темній сливі вони
лише знімають з неї «пластиковість», а не малюють візерунок. */
--pletinka:
repeating-linear-gradient( 45deg, rgba(255,255,255,.030) 0 1px, transparent 1px 9px),
repeating-linear-gradient(-45deg, rgba(0,0,0,.055) 0 1px, transparent 1px 9px);
}
/* ---------- 2. Скидання ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Наші класи задають display: grid/flex і цим перебивають атрибут hidden.
Без цього рядка «схований» блок усе одно видно. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
body {
margin: 0;
background: var(--tlo);
color: var(--vugil);
font: 400 16px/1.6 var(--shryft);
/* внизу на телефоні висить панель кошика — лишаємо їй місце */
padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 {
font-family: var(--shryft-zag);
font-weight: 800;
line-height: 1.12;
letter-spacing: -.01em;
margin: 0;
}
h1 { font-size: clamp(1.8rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 4.4vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 3vw, 1.3rem); }
p { margin: 0 0 var(--s4); }
.obhvat {
width: min(100% - 32px, var(--shyryna));
margin-inline: auto;
}
.tilky-dlya-chytacha {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Темна слива — низ сайту й темні плашки. Не картинка, а два
штрихування навхрест: натяк на плетений кошик з логотипу
і нуль зайвої ваги сторінки. */
.slyva-tlo {
background-color: var(--slyva);
background-image: var(--pletinka);
}
/* Помаранчева плашка — для плиток розділів.
Та сама плетінка, але на кольорі обода логотипу. */
.slyva-tlo--pomar {
background-color: var(--pomar);
background-image:
repeating-linear-gradient( 45deg, rgba(255,255,255,.11) 0 1px, transparent 1px 9px),
repeating-linear-gradient(-45deg, rgba(0,0,0,.045) 0 1px, transparent 1px 9px);
}
/* ---------- 3. Кнопки ----------
Форма сайту — штамп: майже прямий кут і щільна поличка знизу.
При натисканні кнопка сідає на поличку, і та зникає — палець
відчуває, що справді натиснув, без жодної анімації. */
.knopka {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-height: 48px; /* пальцем не промахнешся */
padding: 0 var(--s5);
border: 2px solid transparent;
border-radius: var(--r-m);
font: 600 .97rem/1 var(--shryft);
letter-spacing: .01em;
text-decoration: none;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease,
transform .1s ease, box-shadow .1s ease;
}
.knopka--holovna {
background: var(--pomar);
color: var(--na-pomar);
box-shadow: var(--polychka);
}
.knopka--holovna:hover { background: var(--pomar-tem); }
.knopka--holovna:active { transform: translateY(2px); box-shadow: 0 0 0 var(--slyva); }
.knopka--obvid {
background: transparent;
border-color: var(--slyva);
color: var(--vugil);
}
.knopka--obvid:hover { background: rgba(46, 27, 42, .07); }
.knopka--obvid:active { transform: translateY(1px); }
.knopka--na-temnomu {
background: transparent;
border-color: rgba(251, 246, 239, .55);
color: var(--tlo);
}
.knopka--na-temnomu:hover { background: rgba(251, 246, 239, .12); }
.knopka--na-temnomu:active { transform: translateY(1px); }
.knopka--shyroka { width: 100%; }
.knopka[disabled] { opacity: .45; cursor: not-allowed; }
/* ---------- 4. Шапка ----------
Шапка світла, як і вся сторінка: логотип — кругла емблема, і темна
плашка під ним тільки б'ється з його власним білим колом.
Тримає шапку не колір, а помаранчева смужка знизу — обід логотипу,
розгорнутий у лінію на всю ширину. */
.shapka {
position: sticky;
top: 0;
z-index: var(--shar-shapka);
background: var(--tlo);
border-bottom: 3px solid var(--pomar);
box-shadow: 0 4px 16px rgba(46, 27, 42, .10);
/* Вміст шапки малює JS, і до того вона була нульової висоти: як тільки
скрипт спрацьовував, уся сторінка стрибала вниз на 71 px. Заміряно —
це давало зсув верстки 0.15 на телефоні й 0.33 на десктопі при нормі
0.1. Тому місце під шапку тримаємо тут, ще до скрипта.
3 px — це помаранчева смуга знизу, вона теж усередині (border-box). */
min-height: calc(var(--shapka-h) + 3px);
}
.shapka__ryad {
display: flex;
align-items: center;
gap: var(--s3);
min-height: var(--shapka-h);
padding-block: var(--s2);
}
.shapka__znak {
display: flex;
align-items: center;
gap: var(--s3);
text-decoration: none;
margin-right: auto;
min-width: 0;
}
.shapka__logo {
width: 48px; height: 48px;
flex: none;
border-radius: 50%;
}
.shapka__pidpys { min-width: 0; }
/* Назва набрана вузьким гротеском великими літерами — тим самим, чим
написано «LOVETSKYY» на самій емблемі поруч. Спершу тут стояла Podkova
(заголовковий шрифт сайту), і виходило, що два написи одного імені
стоять поруч і сперечаються: у кружечку гротеск, за кружечком антиква.
Podkova лишається на заголовках сторінок — там їй нема з чим битися. */
.shapka__nazva {
display: block;
font-family: var(--shryft-cifr);
font-weight: 700;
font-size: 1.42rem;
line-height: 1.05;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--vugil);
white-space: nowrap;
}
.shapka__misto {
display: block;
font-size: .66rem;
font-weight: 500;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--tekst-2);
white-space: nowrap;
}
/* Праворуч у шапці — меню й кошик. Обидві кнопки однакові на вигляд,
різні тільки значки. */
.shapka__pravoruch {
position: relative;
display: flex;
align-items: center;
gap: var(--s2);
flex: none;
}
/* Меню в рядок — тільки на широкому екрані. На телефоні його місце
займає бічна штора (розділ 4б), тому тут просто нема чого показувати. */
.menyu { display: none; }
/* Кнопки в шапці. На телефоні — самий значок, слово ховаємо:
у рядку лишається місце тільки на знак і місто. */
.shapka__knopka {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-height: 44px;
min-width: 44px; /* пальцем не промахнешся */
padding: 0 var(--s3);
border: 2px solid var(--linia);
border-radius: var(--r-m);
background: none;
color: var(--vugil);
text-decoration: none;
font-family: inherit;
font-weight: 600;
font-size: .93rem;
white-space: nowrap;
flex: none;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease;
}
.shapka__knopka:hover { background: rgba(46, 27, 42, .07); border-color: var(--slyva); }
.shapka__knopka[aria-expanded='true'] { background: rgba(46, 27, 42, .12); border-color: var(--slyva); }
.shapka__ikonka {
width: 21px; height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.shapka__slovo { display: none; }
.shapka__lichylnyk {
position: absolute;
top: -7px; right: -7px;
display: grid;
place-items: center;
min-width: 21px; height: 21px;
padding: 0 5px;
border-radius: var(--r-s);
background: var(--salyami);
color: #FFF6EF;
font-family: var(--shryft-cifr);
font-size: .78rem;
font-weight: 700;
}
/* ---------- 4б. Бічна штора ----------
Панель на всю висоту екрана, виїжджає справа. Це не просто список
сторінок: сюди складено те саме, що в підвалі — розділи, дзвінок,
месенджери, адреса, документи. З телефона все під рукою, гортати
сторінку до низу не треба. */
.shtora {
position: fixed;
inset: 0;
z-index: var(--shar-shtora);
/* Закрита штора не просто прозора, а невидима для миші й клавіатури.
visibility, на відміну від display, анімується — можна відкласти її
вимкнення на час виїзду, і панель встигає поїхати назад. */
visibility: hidden;
transition: visibility 0s linear .32s;
}
.shtora[data-vidkryta='tak'] {
visibility: visible;
transition: visibility 0s;
}
.shtora__tin {
position: absolute;
inset: 0;
background: rgba(28, 26, 23, .55);
opacity: 0;
transition: opacity .24s var(--hid-vyhid);
}
.shtora[data-vidkryta='tak'] .shtora__tin { opacity: 1; }
.shtora__panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(86vw, 360px);
display: flex;
flex-direction: column;
background-color: var(--slyva);
background-image: var(--pletinka);
color: var(--tlo);
box-shadow: -18px 0 46px rgba(28, 26, 23, .5);
/* Панель заїжджає на власну ширину: 100% рахується від неї самої,
тому нічого не треба перераховувати, якщо ширина зміниться. */
transform: translateX(100%);
transition: transform .32s var(--hid-shtora);
}
.shtora[data-vidkryta='tak'] .shtora__panel { transform: translateX(0); }
/* Верх штори — той самий світлий рядок, що й шапка сайту: емблема
з написом. Помаранчева смужка знизу тримає межу так само, як там. */
.shtora__verh {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
min-height: var(--shapka-h);
padding: var(--s2) var(--s4);
background: var(--tlo);
border-bottom: 3px solid var(--pomar);
color: var(--vugil);
flex: none;
}
.shtora__znak {
display: flex;
align-items: center;
gap: var(--s3);
min-width: 0;
}
.shtora__logo { width: 40px; height: 40px; flex: none; border-radius: 50%; }
/* Той самий набір, що й у шапці: назва магазину скрізь виглядає однаково. */
.shtora__nazva {
font-family: var(--shryft-cifr);
font-weight: 700;
font-size: 1.26rem;
text-transform: uppercase;
letter-spacing: .02em;
white-space: nowrap;
}
.shtora__hrest {
display: grid;
place-items: center;
width: 44px; height: 44px; /* пальцем не промахнешся */
flex: none;
border: 2px solid var(--linia);
border-radius: var(--r-m);
background: none;
color: var(--vugil);
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease;
}
.shtora__hrest:hover { background: rgba(46, 27, 42, .08); border-color: var(--slyva); }
.shtora__hrest svg {
width: 20px; height: 20px;
fill: none; stroke: currentColor;
stroke-width: 1.9; stroke-linecap: round;
}
.shtora__telo {
flex: 1;
overflow-y: auto;
/* Прокрутка всередині штори не «протікає» на сторінку під нею:
дочитав список до кінця — сторінка позаду лишається на місці */
overscroll-behavior: contain;
padding: var(--s4) var(--s4) var(--s6);
display: flex;
flex-direction: column;
gap: var(--s5);
}
.shtora__navi { display: flex; flex-direction: column; }
.shtora__navi a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
min-height: 52px;
padding: var(--s2) 0;
border-bottom: 1px solid var(--linia-tem);
color: var(--tlo);
text-decoration: none;
font-family: var(--shryft-zag);
font-weight: 600;
font-size: 1.24rem;
}
.shtora__strilka {
color: rgba(251, 246, 239, .4);
transition: transform .16s var(--hid-vyhid), color .16s ease;
}
.shtora__navi a:hover .shtora__strilka { transform: translateX(4px); color: var(--tlo); }
.shtora__navi a[aria-current='page'] { color: var(--pomar); }
.shtora__navi a[aria-current='page'] .shtora__strilka { color: var(--pomar); }
.shtora__grupa { display: flex; flex-direction: column; gap: var(--s3); }
.shtora__pidzag {
margin: 0;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(251, 246, 239, .5);
}
/* Розділ у шторі — рядок, підрозділи під ним плашками з відступом.
Відступ тут не для краси: без нього два яруси зливаються в одну купу
і не видно, що чому належить. */
.shtora__rozdil {
/* min-height, а не самі відступи: заміряно 38 px, а по цьому рядку
теж тицяють пальцем — це посилання на розділ, а не підпис. */
display: flex;
align-items: flex-end;
min-height: 44px;
padding: var(--s2) 0 var(--s1);
color: var(--tlo);
text-decoration: none;
font-family: var(--shryft-zag);
font-weight: 700;
font-size: 1.02rem;
}
.shtora__rozdil:hover { color: var(--pomar); }
.shtora__rozdily {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
list-style: none;
padding: 0 0 var(--s3) var(--s3);
margin: 0;
border-left: 2px solid var(--linia-tem);
}
.shtora__rozdily a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--s3);
border: 1px solid var(--linia-tem);
border-radius: var(--r-m);
color: var(--tlo);
text-decoration: none;
font-size: .88rem;
font-weight: 500;
transition: background-color .16s ease;
}
.shtora__rozdily a:hover { background: rgba(251, 246, 239, .12); }
.shtora__dzvinok { width: 100%; }
.shtora__zvyazok {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s2);
}
.shtora__zvyazok a {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
border: 1px solid var(--linia-tem);
border-radius: var(--r-m);
color: var(--tlo);
text-decoration: none;
font-size: .9rem;
font-weight: 700;
transition: background-color .16s ease;
}
.shtora__zvyazok a:hover { background: rgba(251, 246, 239, .12); }
.shtora__ryadok {
margin: 0;
font-size: .94rem;
color: rgba(251, 246, 239, .82);
}
.shtora__dokumenty {
list-style: none;
padding: var(--s4) 0 0;
margin: 0;
border-top: 1px solid var(--linia-tem);
display: flex;
flex-direction: column;
/* Проміжок нульовий, бо висоту рядка тримає сам пункт (44 px нижче).
Інакше три документи розтягли б низ штори майже на 200 px. */
gap: 0;
}
.shtora__dokumenty a {
/* Штора — суто пальцевий інтерфейс, мишкою в неї не лазять.
Заміряно 17 px на рядок: промах веде в сусідній документ. */
display: flex;
align-items: center;
min-height: 44px;
color: rgba(251, 246, 239, .62);
text-decoration: none;
font-size: .86rem;
}
.shtora__dokumenty a:hover { color: var(--tlo); text-decoration: underline; }
/* Поки штора відкрита, сторінка під нею не прокручується */
.telo--zamknene { overflow: hidden; }
/* Кому системно вимкнено рух — штора не їде, а просто проявляється.
Не «нічого не анімуємо», а м'якше: поява лишається, зсув прибрано. */
@media (prefers-reduced-motion: reduce) {
.shtora__panel {
transform: none;
opacity: 0;
transition: opacity .2s ease;
}
.shtora[data-vidkryta='tak'] .shtora__panel { opacity: 1; }
.shtora { transition-delay: .2s; }
}
/* ---------- 4в. Шторка вибору ваги ----------
Виїжджає знизу, коли на плитці натиснули «+». Знизу, а не з боку:
палець тримає телефон унизу, і кнопка «Додати» опиняється прямо
під ним. На широкому екрані миша ходить будь-де, тому там це
звичайне віконце посередині.
Влаштована так само, як бічна штора: visibility з відкладеним
вимкненням, щоб панель встигла поїхати назад, а закрита шторка
не ловила ні мишу, ні клавіатуру. */
.vybir-vahy {
position: fixed;
inset: 0;
z-index: var(--shar-shtora);
visibility: hidden;
transition: visibility 0s linear .3s;
}
.vybir-vahy[data-vidkryta='tak'] {
visibility: visible;
transition: visibility 0s;
}
.vybir-vahy__tin {
position: absolute;
inset: 0;
background: rgba(28, 26, 23, .55);
opacity: 0;
transition: opacity .24s var(--hid-vyhid);
}
.vybir-vahy[data-vidkryta='tak'] .vybir-vahy__tin { opacity: 1; }
.vybir-vahy__panel {
position: absolute;
left: 0; right: 0; bottom: 0;
max-height: 88vh;
display: flex;
flex-direction: column;
background: var(--tlo);
border-radius: var(--r-xl) var(--r-xl) 0 0;
box-shadow: 0 -18px 46px rgba(28, 26, 23, .35);
/* Заїжджає на власну висоту: 100% рахується від самої панелі,
тому нічого не треба переміряти, якщо в раків додасться рядок варок. */
transform: translateY(100%);
transition: transform .3s var(--hid-shtora);
}
.vybir-vahy[data-vidkryta='tak'] .vybir-vahy__panel { transform: translateY(0); }
.vybir-vahy__verh {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s3);
padding: var(--s5) var(--s4) var(--s4);
border-bottom: 1px solid var(--linia);
flex: none;
}
.vybir-vahy__pidpysy { min-width: 0; }
.vybir-vahy__nazva {
font-family: var(--shryft-zag);
font-weight: 800;
font-size: 1.24rem;
line-height: 1.2;
}
.vybir-vahy__za {
margin-top: var(--s1);
font-size: .88rem;
font-weight: 600;
color: var(--salyami);
}
.vybir-vahy__telo {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s5) var(--s4) var(--s6);
}
/* Не звичайне текстове посилання, а друга дія в діалозі — по ній
тиснуть пальцем нарівні з «Додати», тому вона теж 44 px заввишки. */
.vybir-vahy__dali {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: var(--s2);
font-size: .88rem;
color: var(--tekst-2);
}
@media (min-width: 600px) {
.vybir-vahy__panel {
left: 50%; right: auto; bottom: auto; top: 50%;
width: min(92vw, 440px);
max-height: 86vh;
border-radius: var(--r-l);
/* Посередині екрана панель не «виїжджає», а підіймається на 12 px
і проявляється — виїзд знизу на всю висоту вікна тут виглядав би
як помилка, вікно ж не притиснуте до краю. */
transform: translate(-50%, calc(-50% + 12px));
opacity: 0;
transition: transform .22s var(--hid-vyhid), opacity .22s var(--hid-vyhid);
}
.vybir-vahy[data-vidkryta='tak'] .vybir-vahy__panel {
transform: translate(-50%, -50%);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.vybir-vahy__panel {
transform: none;
opacity: 0;
transition: opacity .2s ease;
}
.vybir-vahy[data-vidkryta='tak'] .vybir-vahy__panel { transform: none; opacity: 1; }
.vybir-vahy { transition-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 600px) {
.vybir-vahy__panel { transform: translate(-50%, -50%); }
.vybir-vahy[data-vidkryta='tak'] .vybir-vahy__panel { transform: translate(-50%, -50%); }
}
/* ---------- 5. Герой ----------
Знімок прилавка — підкладка під усім першим екраном, текст і кнопки
лежать поверх нього.
Висота задана в пікселях, а не пропорцією фото. Так браузер займає
місце під банер ще до того, як знімок приїде, і сторінка не стрибає;
і так само кнопка «Дивитись каталог» гарантовано лишається над згином
на будь-якій ширині (у попередньому варіанті вона їхала на 887 px при
вікні 800 — заміряно).
Текст стоїть по центру знімка — і по горизонталі, і по вертикалі.
Затемнення тому рівне, без світлого верху: текст може опинитись у будь-якій
частині кадру, тож темнити треба всюди однаково. */
.geroy {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
min-height: 500px;
padding-block: var(--s8);
background: var(--slyva); /* якщо знімок не приїде — темна слива, а не сіра діра */
color: var(--tlo);
text-align: center;
border-bottom: 3px solid var(--pomar); /* та сама помаранчева смуга, що й під шапкою */
}
@media (min-width: 700px) { .geroy { min-height: 560px; } }
@media (min-width: 900px) { .geroy { min-height: 620px; } }
.geroy__banner {
position: absolute;
inset: 0;
display: block;
}
.geroy__banner img {
width: 100%;
height: 100%;
object-fit: cover;
/* Кадр широкий (1.79), а блок на телефоні майже квадратний, тож із боків
зрізається багато. Тримаємо в кадрі середину, трохи вище геометричного
центру: саме там стоять палки ковбаси — головний товар магазину. */
object-position: 50% 42%;
}
/* Затемнення. Колір не чорний, а темна слива з палітри сайту: чорний поверх
теплого знімка дає сірий наліт, а слива лишає його теплим.
Проценти не на око. Текст тепер стоїть по центру кадру, тож затемнення
рівне: рядок може лягти на будь-яку ділянку знімка. Міряли контраст по
справжніх прямокутниках рядків (Range.getClientRects), а не по коробці
блока — при вирівнюванні по центру в коробку потрапляють порожні поля.
Заміряно на 320/375/768/1440: заголовок 6.4–7.6, підзаголовок 6.4,
адреса 9.5–10.4 при нормі 4.5. Слабше затемнення (.62/.56/.78) давало
підзаголовку 3.9 — не проходило. */
.geroy::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(30, 17, 27, .74) 0%,
rgba(30, 17, 27, .70) 40%,
rgba(30, 17, 27, .84) 100%
);
pointer-events: none;
}
.geroy__vmist {
position: relative; /* над затемненням */
z-index: 1;
}
.geroy h1 { margin-bottom: var(--s4); }
.geroy__pid {
/* Ширина в пікселях, а не в «ch» (ширина знака нуля), і це не дрібниця.
«ch» залежить від шрифту, який зараз намальований: запасним виходило
402 px, своїм — 356. У момент підміни шрифтів рамка встигала звузитись
раніше, ніж перемірявся текст, — рядків ставало п'ять замість чотирьох,
і блок героя разом із заголовком стрибав на 27 px (заміряно 0.033).
21.2em — це ті самі 356 px, тільки вони більше не гуляють. */
max-width: 21.2em;
margin: 0 auto var(--s6);
/* На затемненому знімку повний кремовий колір б'є по очах — приглушуємо.
.86 дає контраст 8.9 при нормі 4.5, запас великий. */
color: rgba(251, 246, 239, .86);
font-size: 1.05rem;
}
/* Дві кнопки в один ряд по центру — на будь-якій ширині, включно з 320 px.
`nowrap`, а не звичайне перенесення, і ось чому. Поки Fira Sans іде з
мережі, браузер міряє написи запасним шрифтом, а той ширший: кнопки не
влазили в рядок, перескакували в два, а коли шрифт приїжджав — стрибали
назад. Разом із ними смикався весь перший екран (заміряно 0.184 при
нормі 0.1). З `nowrap` рядок один завжди: якщо запасним шрифтом тісно,
кнопки просто трохи стискаються, а не перебудовуються.
Довжина кнопки — по напису плюс відступи, на всю ширину екрана вони не
розтягуються. */
.geroy__knopky {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: var(--s3);
}
.geroy__knopky .knopka { white-space: nowrap; }
@media (max-width: 400px) {
/* На вузькому телефоні беремо відступи скромніші — щоб обидві кнопки
сиділи в рядку із запасом навіть запасним шрифтом. */
.geroy__knopky { gap: var(--s2); }
.geroy__knopky .knopka { padding: 0 var(--s4); font-size: .92rem; }
}
@media (max-width: 340px) {
/* Найвужчі телефони. Заміряно: запасним шрифтом два написи просили
308 px на 296 наявних — край кнопки зрізало б, поки їде свій шрифт.
Ще трохи стискаємо відступи, і в рядок вони влазять при обох. */
.geroy__knopky .knopka { padding: 0 var(--s3); font-size: .86rem; }
}
/* Адреса й графік — двома рядками по центру. Одним рядком через крапку воно
ламалося посеред «з 8:00 до 20:00». */
.geroy__adresa {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s1);
margin-top: var(--s6);
margin-bottom: 0;
font-size: .9rem;
color: rgba(251, 246, 239, .74);
/* Ці два рядки вписує скрипт. Без заброньованого місця блок після приходу
даних підстрибував. Рядків завжди рівно два, тому висота тут точна. */
min-height: 50px;
}
.geroy__adresa strong { color: var(--tlo); font-weight: 600; }
/* ---------- 6. Секції ---------- */
.sekciya { padding-block: var(--s7); }
.sekciya--tiho { background: var(--tlo-2); }
.sekciya__shapka {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
margin-bottom: var(--s3);
flex-wrap: wrap;
}
/* На телефоні посилання «Дивитись усе →» стоїть під заголовком, а не збоку.
Причина та сама, що й у кнопок героя: у рядок вони влазили тільки своїм
шрифтом, а запасним — ні, і поки Podkova вантажилась, уся сторінка нижче
їхала на 40 px угору (заміряний стрибок 0.047). Тепер два рядки завжди —
і поки шрифт іде, і коли прийшов. */
@media (max-width: 520px) {
.sekciya__shapka { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}
.sekciya__pid {
color: var(--tekst-2);
max-width: 31.25em;
margin: var(--s3) 0 var(--s5);
}
/* «Увесь каталог →» стоїть у шапці секції окремо, і по ньому тиснуть
пальцем. Заміряно 26 px заввишки — мало. Нарощуємо саму зону
натискання внутрішнім відступом, а від'ємний зовнішній повертає
рядок на місце, щоб заголовок секції не поїхав. */
.sekciya__dali {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-block: 9px;
margin-block: -9px;
color: var(--salyami);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.sekciya__dali:hover { text-decoration: underline; }
/* ---------- 7. Плитки розділів ---------- */
/* Плитки квадратні й по дві в ряд навіть на телефоні: замовник дасть
фото на кожен розділ, і воно ляже у верхню квадратну частину. */
.rozdily {
display: grid;
/* minmax(0, 1fr), а не просто 1fr: інакше довге слово («Морепродукти»)
розсуває свою колонку, і плитки виходять різної ширини */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s3);
list-style: none;
padding: 0; margin: 0;
}
/* Плитка лежить усередині
, і сітка розтягує саме
, а не посилання.
Без height: 100% плитка з двома рядками назви виходила вищою за сусідні —
у ряду одна картка помітно «випадала». */
.rozdily > li { display: flex; }
.rozdil-plytka {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border-radius: var(--r-l);
overflow: hidden; /* щоб фото не вилазило за скруглення */
background: var(--kartka);
border: 1px solid var(--linia);
color: var(--vugil);
text-decoration: none;
box-shadow: var(--tin);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.rozdil-plytka:hover {
transform: translateY(-2px);
border-color: var(--pomar);
box-shadow: var(--tin-silna);
}
/* Місце під майбутнє фото. Поки порожнє — тримає квадрат, щоб плитки
не стрибали, коли фото з'являться. Заповнене помаранчевою плетінкою,
а не сірою плямою: порожнє місце теж має бути фірмовим. */
.rozdil-plytka__foto {
aspect-ratio: 1 / 1;
flex: none; /* щоб квадрат не розтягувався,
коли сусідня плитка вища */
display: grid;
place-items: center;
/* На помаранчевій плетінці .42 давало контраст 2.11 — напис
«Фото буде» просто не читався. .85 дає 4.92. */
color: rgba(28, 26, 23, .85);
font-size: .72rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.rozdil-plytka__foto img {
width: 100%; height: 100%;
object-fit: cover;
}
.rozdil-plytka__pidpys {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s3) var(--s4);
flex: 1; /* забирає решту висоти плитки */
}
.rozdil-plytka__nazva {
font-family: var(--shryft-zag);
font-weight: 800;
font-size: 1rem;
line-height: 1.15;
}
.rozdil-plytka__skilky {
display: block;
font-family: var(--shryft);
font-weight: 400;
font-size: .78rem;
color: var(--tekst-2);
margin-top: var(--s1);
}
.rozdil-plytka__strilka {
margin-left: auto;
font-size: 1.3rem;
/* Жирна навмисне. Помаранчева стрілка на білому дає контраст 3.84,
і для тонкого знаку цього мало (норма 4.5). Для великого жирного
норма 3.0 — і 21 px напівжирним її проходить. Заодно стрілка
стає схожою на штамп, а це якраз форма сайту. */
font-weight: 700;
color: var(--pomar-tem);
flex: none;
transition: transform .16s var(--hid-vyhid);
}
.rozdil-plytka:hover .rozdil-plytka__strilka { transform: translateX(3px); }
/* ---------- 8. Стрічка розділів у каталозі ---------- */
.stryzhka {
position: sticky;
top: var(--shapka-vsya);
z-index: var(--shar-stryzhka);
background: var(--tlo);
border-bottom: 1px solid var(--linia);
}
.stryzhka__ryad {
display: flex;
gap: var(--s2);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none; /* смугу прокрутки ховаємо: */
padding: var(--s3) 16px; /* стрічку листають пальцем */
scroll-padding-inline: 16px;
}
.stryzhka__ryad::-webkit-scrollbar { display: none; }
/* Вкладки малює скрипт. Верхній рядок є завжди й завжди однієї висоти —
тримаємо під нього місце, інакше каталог підстрибує, коли приїдуть
дані. Під нижній рядок (підрозділи) місце не тримаємо: він з'являється
не в кожному розділі, і був би порожній прогалок там, де його нема. */
.stryzhka__ryad:not(.stryzhka__ryad--pid) { min-height: 68px; }
.vkladka {
flex: none;
/* 44, а не 42: нижче цього пальцем важко влучити. Заміряно — було 42. */
min-height: 44px;
padding: 0 var(--s4);
border: 2px solid var(--linia);
border-radius: var(--r-m);
background: var(--kartka);
color: var(--vugil);
font: 600 .92rem/1 var(--shryft);
white-space: nowrap;
cursor: pointer;
scroll-snap-align: start;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.vkladka:hover { border-color: var(--pomar); }
.vkladka[aria-pressed='true'] {
background: var(--slyva);
border-color: var(--slyva);
color: var(--tlo);
}
/* Другий ярус стрічки — підрозділи всередині розділу.
Візуально тихіший за перший: без рамки, підкреслення замість заливки.
Інакше два ряди однакових плашок і не зрозуміло, що чому підпорядковане. */
.stryzhka__ryad--pid {
padding-top: 0;
padding-bottom: var(--s2);
gap: var(--s4);
}
.pidvkladka {
flex: none;
/* 44, а не 40: заміряно на 375 px — палець у 40 px влучає через раз,
а це основна навігація по каталогу, її тиснуть найчастіше. */
min-height: 44px;
padding: 0 2px;
border: none;
border-bottom: 2px solid transparent;
background: none;
color: var(--tekst-2);
font: 500 .88rem/1 var(--shryft);
white-space: nowrap;
cursor: pointer;
transition: color .16s ease, border-color .16s ease;
}
.pidvkladka:hover { color: var(--vugil); }
.pidvkladka[aria-pressed='true'] {
color: var(--vugil);
font-weight: 700;
border-bottom-color: var(--pomar);
}
/* ---------- 9. Сітка товарів ---------- */
/* minmax(0, 1fr), а не просто 1fr: інакше колонка роздувається під
найширший нерозривний вміст картки (ярлик ціни плюс кнопка «+»), і
сітка вилазить за екран. Заміряно на 320 px: документ ставав 331 px
завширшки, тобто сторінка їздила вбік. */
.tovary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s3);
list-style: none;
padding: 0; margin: 0;
}
/* На найвужчих телефонах дві колонки — це 138 px на картку: фото
з нігтик і назва в чотири рядки. Одна колонка там чесніше. */
@media (max-width: 359px) {
.tovary { grid-template-columns: 1fr; }
}
/* Єдиний свідомий рух на сайті: коли перемикають підрозділ, сітка не
підмінюється миттєво, а викладається — картка за карткою, як товар
на прилавок.
Чому саме тут, а не «виїзд кожної секції при прокрутці»: тут вміст
справді підмінюється цілком, і без переходу людині здається, що
сторінка смикнулась. В решті місць нічого не підміняється, тому
там руху немає.
Чому на @keyframes, а не бібліотекою: рух наперед відомий і нічим
не керується. CSS рахує його мимо основного потоку, тому сітка
викладається рівно навіть поки довантажуються знімки. JS сюди не
потрібен зовсім: сітка щоразу перемальовується заново, тобто
вузли нові — анімація стартує сама.
Затримка зрізана на восьмій картці: далі все одно за краєм екрана,
а чекати секунду на 45 позиціях — знущання. */
@keyframes tovar-vykladka {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.tovary > li > .tovar { animation: tovar-vykladka .26s var(--hid-vyhid) both; }
.tovary > li:nth-child(2) > .tovar { animation-delay: .04s; }
.tovary > li:nth-child(3) > .tovar { animation-delay: .08s; }
.tovary > li:nth-child(4) > .tovar { animation-delay: .12s; }
.tovary > li:nth-child(5) > .tovar { animation-delay: .16s; }
.tovary > li:nth-child(6) > .tovar { animation-delay: .20s; }
.tovary > li:nth-child(7) > .tovar { animation-delay: .24s; }
.tovary > li:nth-child(n+8) > .tovar { animation-delay: .28s; }
.tovar {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: var(--kartka);
border: 1px solid var(--linia);
border-radius: var(--r-l);
overflow: hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tovar:hover {
transform: translateY(-2px);
border-color: var(--pomar);
box-shadow: var(--tin-silna);
}
/* Уся картка — одне посилання. Кнопка «+» лежить зверху окремо. */
.tovar__lynk {
display: flex;
flex-direction: column;
flex: 1;
text-decoration: none;
color: inherit;
}
/* Рамка під фото. Пропорція жорстка (4:3) — саме через неї плитки не
стрибають, поки фото довантажуються: висота відома ще до картинки,
тому width/height на самому не потрібні. Замовник вантажить
фото різної форми, обрізає їх object-fit, а не ми в редакторі.
Дошка під сподом лишається видимою, поки фото немає зовсім. */
.tovar__foto {
position: relative;
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
overflow: hidden;
background-color: var(--tlo-2);
background-image: repeating-linear-gradient(
180deg,
transparent 0 26px,
rgba(46, 27, 42, .08) 26px 28px
);
color: var(--tekst-3);
font-size: .74rem;
letter-spacing: .06em;
text-transform: uppercase;
}
.tovar__foto img {
width: 100%; height: 100%;
object-fit: cover;
/* Плавне збільшення при наведенні: фото — головне, за чим сюди
прийшли, і воно єдине на картці відповідає на дотик. */
transition: transform .4s var(--hid-vyhid);
}
.tovar:hover .tovar__foto img { transform: scale(1.04); }
/* Напис на місці незавантаженого фото. Відступ саме тут, а не на рамці:
рамці він зіпсував би фото — картинка стояла б у полі, а не впритул. */
.foto-nema {
padding: var(--s3);
color: var(--tekst-3);
}
.tovar__telo {
display: flex;
flex-direction: column;
flex: 1;
gap: var(--s1);
padding: var(--s4);
}
.tovar__nazva {
font-family: var(--shryft-zag);
font-weight: 600;
font-size: .98rem;
line-height: 1.25;
}
.tovar__korotko {
font-size: .82rem;
color: var(--tekst-2);
line-height: 1.4;
}
/* Виробник. У прайсі половина позицій розкладена саме по виробниках,
і покупці в магазині питають «а це чиє» — тому рядок видно на картці. */
.tovar__vyrobnyk {
margin-top: var(--s1);
font-size: .72rem;
font-weight: 500;
letter-spacing: .04em;
color: var(--tekst-3);
}
.tovar__niz {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s2);
margin-top: auto;
padding: 0 var(--s4) var(--s4);
}
/* Цінник — фірмова деталь цього сайту.
Не просто число збоку, а паперовий ярлик з магазинного прилавка:
зрізаний ріжок і дірочка від мотузки. Він же лежить на сторінці
товару й у кошику — по ньому сайт і впізнається. */
.cinnyk {
position: relative;
display: inline-block;
padding: 6px 12px 6px 18px;
background: var(--tlo-2);
border: 1px solid var(--linia);
/* Зрізаний лівий верхній ріжок. clip-path ріже й рамку теж —
тому рамка лишається тільки з трьох боків, і це правильно:
на справжньому ярлику зріз теж голий папір. */
clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
}
.cinnyk::before {
/* Дірочка від мотузки. Колір фону сторінки, а не білий:
ярлик лежить на різних тлах, і дірка має бути наскрізною. */
content: '';
position: absolute;
top: 9px; left: 7px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--slyva);
opacity: .5;
}
.cinnyk__chyslo {
display: block;
font-family: var(--shryft-cifr);
font-weight: 700;
font-size: 1.24rem;
line-height: 1.05;
color: var(--salyami);
/* цифри однакової ширини: інакше в сітці ціни «пливуть» по горизонталі */
font-variant-numeric: tabular-nums;
}
.cinnyk__za {
display: block;
font-size: .68rem;
line-height: 1.2;
color: var(--tekst-2);
}
/* Ярлик на темному тлі (кошик, панель) */
.cinnyk--tem {
background: rgba(251, 246, 239, .1);
border-color: var(--linia-tem);
}
.cinnyk--tem .cinnyk__chyslo { color: #FFC9A0; }
.cinnyk--tem .cinnyk__za { color: rgba(251, 246, 239, .7); }
.cinnyk--tem::before { background: var(--tlo); }
.tovar__cina { flex: 1; min-width: 0; }
.tovar__plyus {
flex: none;
width: 44px; height: 44px;
border: none;
border-radius: var(--r-m);
background: var(--pomar);
color: var(--na-pomar);
box-shadow: var(--polychka);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: background-color .16s ease, transform .1s ease, box-shadow .1s ease;
}
.tovar__plyus:hover { background: var(--pomar-tem); }
.tovar__plyus:active { transform: translateY(2px); box-shadow: 0 0 0 var(--slyva); }
/* ---------- Погашений товар ----------
Замовник не видаляє картку, коли рибу розібрали, — він гасить її
галочкою в панелі. Фото, опис і ціна лишаються, зверху лягає
притемнення. Повернувся товар — галочку зняли, і все на місці.
Притемнення саме на фото, а не на всій картці: назву й ціну людина
має прочитати без зусиль — вона прийшла дізнатися саме їх, перш ніж
вирішити, чи чекати наступного завозу. */
.plashka-nema {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
place-items: center;
padding: var(--s3);
background: rgba(28, 26, 23, .52);
color: #FFF6EF;
font-family: var(--shryft-zag);
font-weight: 700;
font-size: .8rem;
letter-spacing: .03em;
text-transform: none;
text-align: center;
text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
/* Погашену картку не піднімаємо при наведенні й не збільшуємо фото:
тягнути до дії, якої немає, — це обіцянка, яку картка не виконає. */
.tovar--nema:hover {
transform: none;
border-color: var(--linia);
box-shadow: none;
}
.tovar--nema:hover .tovar__foto img { transform: none; }
.tovar--nema .cinnyk__chyslo { color: var(--tekst-3); }
/* Слово замість кнопки «+». Висота така сама, як у кнопки, — інакше
низ картки з'їжджає й сітка виглядає нерівною. */
.tovar__nema {
flex: none;
display: inline-flex;
align-items: center;
height: 44px;
padding: 0 var(--s3);
border-radius: var(--r-m);
background: rgba(28, 26, 23, .07);
color: var(--tekst-3);
font-size: .78rem;
font-weight: 500;
}
.znachok-hit {
position: absolute;
top: var(--s3); left: var(--s3);
z-index: 2;
padding: 4px 10px;
border-radius: var(--r-m);
background: var(--salyami);
color: #FFF6EF;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
/* Порожній розділ. Це
усередині сітки товарів, тому без
grid-column повідомлення тулилося в одну колонку з двох і читалося
по три слова в рядок. Тепер займає всю ширину. */
.porozhno {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s4);
padding: var(--s7) var(--s5);
border: 1px dashed var(--linia);
border-radius: var(--r-l);
background: var(--tlo-2);
text-align: center;
color: var(--tekst-2);
}
.porozhno p { margin: 0; max-width: 24.55em; }
/* ---------- 10. Сторінка товару ---------- */
/* Шлях («Головна / Ковбаси / …»). Букви дрібні — 13 px, і сам рядок
тексту виходив 17 px заввишки: для пальця замало.
Спершу зробили відступ усередині посилання й від'ємне поле зовні —
зона дотику ставала 50 px, а на вигляд нічого не мінялося. Заміряно
на 320 px: там шлях переноситься на два рядки, і зони двох посилань
налазили одна на одну на 19 px — тиснеш «Ковбаси», а потрапляєш у
«Напівкопчені». Тому інакше: висоту рядка робимо одразу 44 px.
Посилання стає блоком і рівно заповнює свій рядок — зони сусідів
стикаються, але не перекриваються. Шлях виходить трохи повітрянішим,
і це нормально: він угорі сторінки, місця там вистачає. */
.shlyah {
padding-block: var(--s2);
font-size: .84rem;
line-height: 44px;
color: var(--tekst-2);
}
.shlyah a {
display: inline-block;
color: var(--tekst-2);
}
.shlyah span { margin-inline: var(--s2); color: var(--tekst-3); }
.karta { padding-bottom: var(--s7); }
.karta__verh {
display: grid;
grid-template-columns: 1fr;
gap: var(--s5);
align-items: start;
}
/* Галерея товару. Скільки фото завантажив замовник — стільки й рамок.
Одне фото не розтягуємо на дві колонки (риба вийшла б панорамою),
а лишаємо квадрат на всю ширину — див. --odne нижче. */
.karta__foto {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s2);
}
.karta__foto--odne { grid-template-columns: 1fr; }
.karta__ramka {
position: relative;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
overflow: hidden;
border-radius: var(--r-l);
background-color: var(--tlo-2);
background-image: repeating-linear-gradient(
180deg,
transparent 0 34px,
rgba(46, 27, 42, .08) 34px 36px
);
color: var(--tekst-3);
font-size: .74rem;
letter-spacing: .06em;
text-transform: uppercase;
text-align: center;
}
.karta__ramka img {
width: 100%; height: 100%;
object-fit: cover;
}
.karta__nazva { margin-bottom: var(--s3); }
.karta__korotko {
color: var(--tekst-2);
font-size: 1.02rem;
margin-bottom: var(--s5);
}
.kupivlya {
padding: var(--s5);
background: var(--kartka);
border: 1px solid var(--linia);
border-radius: var(--r-l);
box-shadow: var(--tin);
}
.kupivlya__cina {
font-family: var(--shryft-zag);
font-weight: 800;
font-size: 2rem;
color: var(--salyami);
line-height: 1.05;
}
.kupivlya__za {
color: var(--tekst-3);
font-size: .86rem;
margin-bottom: var(--s5);
}
/* Блок покупки, коли товар розібрали. Ціну лишаємо великою: людина
прийшла на сторінку саме за нею й піде шукати далі, якщо не побачить.
Замість вибору ваги — те, що працює просто зараз: подзвонити. */
.kupivlya--nema { background: var(--tlo-2); }
.kupivlya--nema .kupivlya__cina { color: var(--tekst-2); }
.kupivlya__nema {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: var(--r-m);
background: var(--slyva);
color: var(--tlo);
font-family: var(--shryft-zag);
font-weight: 700;
font-size: .84rem;
margin-bottom: var(--s3);
}
.kupivlya--nema .knopka { margin-top: var(--s4); }
/* Перемикач ваги — головна річ на сторінці.
Рибу беруть на вагу, тому людина має бачити не «ціну за кіло»,
а скільки заплатить за той шматок, який реально бере. */
.vaha__pidpys {
font-weight: 700;
font-size: .88rem;
margin-bottom: var(--s3);
}
.vaha__ryad {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-bottom: var(--s5);
}
.vaha__knopka {
min-height: 46px;
padding: 0 var(--s4);
border: 2px solid var(--linia);
border-radius: var(--r-m);
background: transparent;
color: var(--vugil);
font: 600 .92rem/1 var(--shryft);
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.vaha__knopka:hover { border-color: var(--pomar); }
.vaha__knopka[aria-pressed='true'] {
background: var(--slyva);
border-color: var(--slyva);
color: var(--tlo);
}
/* Поле «скільки грамів». Ваговий товар ріжуть скільки попросиш, тому
готових кнопок у нього немає — є одна пілюля «− 300 г +», зроблена
тим самим прийомом, що й лічильник штук у кошику: людина вже бачила
цю форму й розуміє її без пояснень.
Кнопки 46 px, а не 44: поле стоїть у ряд із ними, і в інпута всередині
ще й своя рамка — при 44 пілюля виходила нижчою за сусідні кнопки
фасовок і ряд «плив». */
.vvid {
display: inline-flex;
align-items: center;
border: 2px solid var(--linia);
border-radius: var(--r-m);
overflow: hidden;
background: var(--tlo);
}
.vvid__krok {
width: 46px; height: 46px;
flex: none;
border: none;
background: none;
color: var(--vugil);
font: 600 1.24rem/1 var(--shryft);
cursor: pointer;
transition: background-color .16s ease;
}
.vvid__krok:hover:not(:disabled) { background: var(--tlo-2); }
.vvid__krok:disabled { color: var(--tekst-3); cursor: default; }
/* Число й «г» стоять разом, як одне слово: інакше при наборі
чотиризначного числа підпис відстрибував убік. */
.vvid__pole {
display: inline-flex;
align-items: baseline;
gap: 2px;
padding-inline: var(--s2);
}
.vvid__pole input {
width: 4ch;
border: none;
padding: 0;
background: none;
color: var(--vugil);
/* 16px рівно: на менших айфон сам збільшує сторінку, щойно тицьнеш
у поле, і людина лишається на розтягнутій вітрині. */
font: 700 1rem/46px var(--shryft);
font-variant-numeric: tabular-nums;
text-align: right;
}
.vvid__pole input:focus { outline: none; }
.vvid:focus-within { border-color: var(--salyami); }
.vvid__od {
font: 600 .92rem var(--shryft);
color: var(--tekst-2);
}
/* Підказка про крок і мінімум. Тихіше за примітку про вагу: її треба
прочитати один раз, а не тримати перед очима. */
.vaha__nota--tyho {
margin-block: var(--s3) 0;
font-size: .8rem;
color: var(--tekst-3);
}
/* Той самий вузол у кошику. Там поруч стоїть список фасовок сусіднього
рядка заввишки 44 px — тримаємо однаково, інакше картки виходять
різного зросту й ряд «пливе». */
.ryadok__vaha--vvid .vvid__krok { width: 44px; height: 44px; }
.ryadok__vaha--vvid .vvid__pole input { line-height: 44px; }
.karta__nyz {
margin-top: var(--s7);
display: grid;
gap: var(--s5);
}
.fakt {
padding: var(--s5);
background: var(--kartka);
border: 1px solid var(--linia);
border-radius: var(--r-l);
}
/* Тег тут h2, а не h3, бо ці врізки підпорядковані назві товару (h1) —
інакше в озвучці екрана виходить дірка h1 → h3. Але на вигляд вони
лишаються такими самими маленькими: розмір задаємо тут вручну, бо
загальний h2 на сайті — це заголовок цілої секції, він удвічі більший
і всередині картки виглядав би крикливо. */
.fakt h2 {
margin-bottom: var(--s3);
font-size: clamp(1.05rem, 3vw, 1.3rem);
}
.fakt p:last-child { margin-bottom: 0; }
/* ---------- 11. Кошик ----------
Рядок у два поверхи: зверху товар і сума, знизу — керування.
Керування винесене окремим поверхом навмисне: на 320 px вибір ваги
й лічильник поруч із назвою не вміщаються, а тиснути по них треба
пальцем, тому стискати їх не можна. */
.ryadok {
display: grid;
grid-template-columns: 64px 1fr auto;
grid-template-areas:
'foto telo suma'
'keru keru keru';
align-items: center;
gap: var(--s4) var(--s4);
padding: var(--s4);
background: var(--kartka);
border: 1px solid var(--linia);
border-radius: var(--r-l);
margin-bottom: var(--s3);
}
.ryadok__foto {
grid-area: foto;
width: 64px; height: 64px;
flex: none;
overflow: hidden;
border-radius: var(--r-m);
background: var(--tlo-2);
}
.ryadok__foto img {
width: 100%; height: 100%;
object-fit: cover;
}
.ryadok__telo { grid-area: telo; min-width: 0; }
.ryadok__nazva {
font-family: var(--shryft-zag);
font-weight: 600;
font-size: .96rem;
line-height: 1.25;
}
.ryadok__pid { font-size: .82rem; color: var(--tekst-2); }
.ryadok__prava { grid-area: suma; text-align: right; }
.ryadok__suma {
font-family: var(--shryft-zag);
font-weight: 800;
color: var(--salyami);
white-space: nowrap;
}
/* Напис маленький і тихий навмисне — прибрати товар не має бути
помітнішим за саме замовлення. Але цілитися пальцем усе одно треба,
тому навколо напису 44 px порожнечі: видно 24, натиснути можна по 44. */
.ryadok__prybraty {
display: inline-flex;
align-items: center;
min-height: 44px;
border: none;
background: none;
padding: 0;
color: var(--tekst-3);
font: 400 .8rem var(--shryft);
text-decoration: underline;
cursor: pointer;
}
.ryadok__prybraty:hover { color: var(--salyami); }
.ryadok__keruvannya {
grid-area: keru;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2) var(--s3);
padding-top: var(--s3);
border-top: 1px solid var(--linia);
}
/* Підпис «Вага» стоїть над полем, а не всередині: у списку вже написано
«500 г», і без підпису незрозуміло, що це можна перемкнути. */
.ryadok__vaha {
display: flex;
flex-direction: column;
gap: 2px;
/* «Живими, без варки» — довгий напис. Без цих двох рядків поле
розсовує картку і вилазить за край екрана на 320 px. */
min-width: 0;
max-width: 100%;
}
.ryadok__vaha > span {
font-size: .72rem;
color: var(--tekst-3);
}
/* height, а не min-height, і обов'язково appearance: none.
Safari (WebKit) мовчки ігнорує min-height на