/* ============================================================ Зелений Гай — блок «Часто беруть разом» (супутні товари). Окремий файл СВІДОМО: site.css і catalog.css належать іншим лейнам, а цей блок мусить вміти зникнути повністю, не лишивши слідів на сторінках відер. Підключається на product.html (і на всіх десяти згенерованих сторінках) та на cart.html. ГОЛОВНЕ ПРАВИЛО ФАЙЛУ: жоден селектор тут не чіпає нічого, що існувало до нього. Усі класи з префіксом .zg-upsell / .u-. Єдиний виняток — .citem.u-sm, і він додає стилі лише тим рядкам кошика, які цей же лейн і створює. ============================================================ */ /* display:flex — не заради вигляду (заголовок і стрічка й так лягли б стовпчиком), а щоб .u-strip став flex-ІТЕМОМ. Тільки для flex/grid-items діє правило «automatic minimum size = 0 у скрол-контейнері»; для звичайного блока min-content стрічки дорівнював би сумі карток (~2068 px) і розтягував би ВЕСЬ кошик. Див. коментар у .u-strip. */ /* ⚠ ГОРИЗОНТАЛЬНІ МАРЖІ — `auto` ТІЛЬКИ РАЗОМ ІЗ `.container`, І ЦЕ НЕ КОСМЕТИКА. На сторінках відер клас висить на тому самому елементі, що й `.container`, а той центрує сторінку через `margin: 0 auto`. Шорткат `margin` ПЕРЕКРИВАЄ його по обох боках, тож із `0` блок притискався вліво і праворуч зяяла порожнеча. Виміряно 2026-09-01 на 1463 px: контейнер сторінки 124→1324, а ця стрічка 0→1200. ⚠ АЛЕ `auto` НА ВСІХ ВБИВАЄ БЛОК У КОШИКУ, І МОВЧКИ. Плейсхолдер кошика (cart.html → upsellSlot) `.container` НЕ має і лежить у `.cart-list`, а це `display: flex; flex-direction: column`. Для flex-ітема авто-маржа по ПОПЕРЕЧНІЙ осі скасовує `stretch` — вона забирає весь вільний простір, і ширина починає рахуватись від вмісту. А вміст тут — `.u-strip` із `min-width: 0` (див. коментар там), тобто вміст із НУЛЬОВИМ мінімумом — і блок згортається в НУЛЬ. Виміряно 2026-09-22 у живому кошику на 1280 px: `.cart-list` 634,56 px, а `.zg-upsell` 0 px при `margin-left/right = 317,277px`, `.u-strip` 0 px. Дванадцять карток були в DOM і жодної не було видно: з-під нуля стирчала сама лише шапка, тому блок виглядав як «заголовок є, товарів немає», а не як зламана розкладка. Тому: бокові маржі нульові за замовчуванням, `auto` повертаємо РІВНО там, де разом із нами висить `.container`. */ .zg-upsell { --u-gap: 12px; margin: clamp(28px, 4vw, 46px) 0 0; display: flex; flex-direction: column; min-width: 0; } .zg-upsell.container { margin-inline: auto; } .zg-upsell[hidden] { display: none !important; } /* Колонка кошика — grid-item, а в grid-item `min-width` за замовчуванням `auto`, тобто «не вужче власного вмісту». Стрічка супутніх товарів ширша за екран за побудовою, тому без цього нуля колонка (а з нею вся сторінка) розтягувалась до 2028 px на телефоні. Клас вішає cart.html — site.css цей лейн не чіпає. */ .zg-minw0 { min-width: 0; } .zg-upsell .u-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .zg-upsell .u-title { font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2; margin: 0; } .zg-upsell .u-sub { color: var(--ink-3); font-size: 14.5px; margin: 0; } /* Стрілки гортання — ТІЛЬКИ десктоп. На мобайлі display:none, тому вони не є flex-ітемом .u-head і не можуть зсунути заголовок чи підзаголовок: мобільна шапка блоку лишається побайтово тією самою розкладкою. */ .zg-upsell .u-nav { display: none; gap: 8px; margin-left: auto; align-self: center; } /* .u-nav[hidden] мусить перемагати `display:flex` з десктопної медіазапиту — у [hidden] специфічність нульова, і без цього рядка кнопки лишались би видимими на блоці, який нікуди не гортається. */ .zg-upsell .u-nav[hidden] { display: none !important; } .zg-upsell .u-arrow { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease); } .zg-upsell .u-arrow svg { width: 16px; height: 16px; display: block; } .zg-upsell .u-arrow:hover:not([disabled]) { background: var(--accent-tint); color: var(--accent-700); border-color: var(--accent); } .zg-upsell .u-arrow[disabled] { opacity: .32; cursor: default; } /* ── Мобайл: горизонтальна стрічка зі снапом ─────────────────── Картки фіксованої ширини + scroll-snap, щоб великим пальцем гортати було зручно і картка не зупинялась «на пів». */ .zg-upsell .u-strip { display: flex; gap: var(--u-gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 4px 0 14px; /* ── min-width:0 ТУТ — НЕ КОСМЕТИКА ───────────────────────────── Виміряно на 375 px: дванадцять карток дають max-content ~2068 px. Скрол-контейнер сам по собі цього не гасить — правило «мінімальний автоматичний розмір = 0» діє лише для flex/grid-ітемів, тому .zg-upsell зроблено flex-контейнером, а тут ми цей нуль вмикаємо. Без цієї пари `.cart-list` (grid-item із min-width:auto) розтягувався до 2028 px і вся сторінка кошика їхала вбік: виміряно body.scrollWidth = 2068 при viewport 375. Від'ємні поля (а не 100vw) — щоб не додати ширину смуги прокрутки: 100vw на вузькому ДЕСКТОПІ давав рівно таке переповнення на 8 px. */ min-width: 0; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); } .zg-upsell .u-strip::-webkit-scrollbar { height: 6px; } .zg-upsell .u-strip::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 999px; } .zg-upsell .u-card { flex: 0 0 158px; width: 158px; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--sh-1); padding: 10px 10px 12px; } /* ── Десктоп: ОДИН ряд великих карток із гортанням ───────────────────────── ЩО ТУТ БУЛО І ЧОМУ ЦЕ ПОМІНЯЛИ. Десктоп був мобільним компонентом, розтягнутим у сітку `repeat(auto-fill, minmax(148px,1fr))`. Виміряно в справжньому браузері на /dobryvo-dlya-hvoyi при в'юпорті 1626: 6 колонок × 169 px, ДВА ряди, висота блоку 690 px, а плитка зображення всередині картки — 149 × 149 px. Тобто дванадцять вузьких плиток із поштовою маркою замість фотографії, і майже 700 px висоти під блоком купівлі, який і є роботою сторінки. Фотографія — це те, що продає пакетик за 63 ₴, тому десктоп рахуємо від неї: один ряд, 4 картки, плитка ~235 px (у 2,5 раза більша площа), решта товарів — гортанням, а не додатковими рядами. Блок стає ~2× нижчим і лишається підпорядкованим блоку купівлі. Стрічка навмисно лишається тим самим flex-скролером, що й на мобайлі: `min-width:0` вище — це не косметика (див. коментар там), і сітка його знецінювала. Один механізм на обидва випадки, менше місць для регресії. */ @media (min-width: 761px) { .zg-upsell { --u-gap: 20px; /* Ширину картки не можна взяти з @media: на сторінці товару контейнер блоку 1096 px, а в лівій колонці кошика — 630 px, і в'юпорт у цих двох випадках ОДИН І ТОЙ САМИЙ. Розмір задає контейнер, тому питаємо саме його. Немає підтримки @container → лишається базове правило нижче (3 картки), тобто просто трохи вужчі картки, а не зламана розкладка. */ container-type: inline-size; } .zg-upsell .u-strip { /* Смуга прокрутки на десктопі не потрібна: гортання дають стрілки, а смуга додала б висоти під єдиним рядом і виглядала б як недоробка. Мобайл свою тонку смугу лишає — там вона єдина підказка. */ scrollbar-width: none; padding: 4px 0 10px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } .zg-upsell .u-strip::-webkit-scrollbar { display: none; } /* 3 картки — база (вузька колонка кошика); 4 — коли контейнер широкий. */ .zg-upsell .u-card { flex: 0 0 calc((100% - 2 * var(--u-gap)) / 3); width: auto; padding: 12px 12px 14px; } /* Картка виросла з 169 до ~259 px — типографіка мусить вирости разом із нею, інакше великій плитці підписом служить мобільний 15 px. */ .zg-upsell .u-ph img { padding: 6%; } .zg-upsell .u-line { margin-top: 12px; } .zg-upsell .u-name { font-size: 16.5px; } .zg-upsell .u-vol { font-size: 13px; } .zg-upsell .u-price { font-size: 19px; padding-top: 10px; } .zg-upsell .u-add { margin-top: 10px; padding: 10px 8px; font-size: 14px; } .zg-upsell .u-nav { display: flex; } } /* Широкий контейнер (сторінка товару: 1096 px) — 4 картки по ~259 px. */ @container (min-width: 900px) { .zg-upsell .u-card { flex-basis: calc((100% - 3 * var(--u-gap)) / 4); } } /* Дуже вузька колонка — краще дві великі картки, ніж три мініатюри. */ @container (max-width: 520px) { .zg-upsell .u-card { flex-basis: calc((100% - var(--u-gap)) / 2); } } /* ── Плитка зображення ───────────────────────────────────────── ФАЙЛІВ МОЖЕ ЩЕ НЕ БУТИ: assets/img/sm/.webp завозить інший лейн. Тому картинка лежить ПОВЕРХ плитки-заглушки з фіксованим aspect-ratio. Немає файла → скрипт знімає , і лишається та сама плитка тієї ж висоти: ні «битої» іконки, ні стрибка layout. */ /* ФОН ПЛИТКИ — ПРОЗОРИЙ, РІВНО ЯК У `.citem .cimg` (site.css). Був кремовий градієнт #FDFCF8 → #F2EEE3 на білій картці `--surface: #FFFFFF`. Оскільки фото тут завантажуються ВІДКЛАДЕНО (deferImages() в upsell.js), цей прямокутник був не підкладкою, а ЦІЛИМ виглядом картки до того, як стрічка під'їхала: знятий 2026-09-22 кадр живого кошика на 1280 px — чотири кремові квадрати з підписами. Прозора плитка = той самий білий, що й картка, тож чекання виглядає як порожнє місце. Висота тримається `aspect-ratio`, а не фоном — стрибка layout немає. */ .zg-upsell .u-ph { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: transparent; display: grid; place-items: center; } /* — теж абсолютний, і теж НЕ косметика. `.u-ph` це `display:grid`, тож обгортка стала б окремим рядком сітки поруч із заглушкою `.u-mark` (рівно та історія, що описана нижче для `.citem.u-sm .cimg img`). */ .zg-upsell .u-ph picture, .citem.u-sm .cimg picture { position: absolute; inset: 0; display: block; } .zg-upsell .u-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; filter: drop-shadow(0 5px 7px rgba(40, 30, 12, .16)); } .zg-upsell .u-ph .u-mark { font-family: var(--serif); font-weight: 600; font-size: 13px; line-height: 1.25; text-align: center; color: var(--accent); opacity: .55; padding: 0 10px; max-width: 100%; } /* Заглушка потрібна ЛИШЕ поки немає фотографії. Товарні знімки зняті на білому і не закривають плитку до країв (object-fit:contain + padding), тому назва просвічувала збоку від пляшки просто поверх товару. `:has(img)` знімає її рівно тоді, коли у плитці є, і повертає, коли guardImages() зняв битий — тобто саме та поведінка, заради якої заглушка й існує. `:has()` у цій кодовій базі вже використовується (catalog.css:163), нової залежності не додається. `img[src]`, а не просто `img`: у стрічці фото довантажується за подією IntersectionObserver, і до того моменту у DOM уже є, але БЕЗ src. Без цього уточнення заглушка ховалась би одразу і плитка стояла б порожньою, поки покупець не догортає до блоку. */ .zg-upsell .u-ph:has(img[src]) .u-mark, .citem.u-sm .cimg:has(img[src]) .u-mark { display: none; } .zg-upsell .u-line { margin-top: 9px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .zg-upsell .u-name { font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1.25; margin: 3px 0 0; color: var(--ink); } .zg-upsell .u-vol { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; } .zg-upsell .u-price { font-family: var(--serif); font-weight: 600; font-size: 17px; margin-top: auto; padding-top: 8px; } .zg-upsell .u-add { margin-top: 8px; width: 100%; border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: var(--r-pill); padding: 8px 6px; font-size: 13.5px; font-weight: 600; line-height: 1.2; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .zg-upsell .u-add:hover { background: var(--accent-tint); } .zg-upsell .u-add.is-done { background: var(--accent); border-color: var(--accent); color: #fff; } .zg-upsell .u-add[disabled] { border-color: var(--hair); color: var(--ink-3); background: transparent; cursor: default; } /* ── Рядок супутнього товару в кошику ────────────────────────── Успадковує .citem із site.css; тут лише те, чого там нема: та сама заглушка зображення і плашка «без знижки». */ .citem.u-sm .cimg { position: relative; } .citem.u-sm .cimg .u-mark { font-family: var(--serif); font-weight: 600; font-size: 12px; text-align: center; color: var(--accent); opacity: .55; padding: 0 6px; } /* position:absolute — ОБОВ'ЯЗКОВО, рівно як у .zg-upsell .u-ph img вище. .cimg — це `display:grid; place-items:center` (site.css:665), тож заглушка .u-mark і ставали ДВОМА рядками сітки: підпис лишався видимим ПОВЕРХ товару, а `height:100%` вирішувалось відносно власного рядка, а не плитки. Виміряно на 375 px: плитка 96×96, картинка отримувала left 0 / top 37 і розмір 96×111 — тобто вилазила за плитку на 52 px і накривала сусідній текст. Абсолютне позиціювання прибирає її з потоку сітки: фото повністю накриває заглушку і не може вийти за межі 96×96. */ .citem.u-sm .cimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; } /* Без кремової плашки. Це уточнення до ціни, а не статус: фон `--bg-2` робив із нього другий бадж у рядку (поряд із «Відправимо з…»), а на 375 px він ще й переносився на два рядки і займав більше місця, ніж назва товару. */ .citem.u-sm .u-nodisc { display: inline-block; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); } /* Плитка блоку веде на сторінку товару — фото і назва. */ .u-link { color: inherit; text-decoration: none; display: block; } .u-name .u-link { display: inline; } .u-name .u-link:hover, .u-name .u-link:focus-visible { text-decoration: underline; } .u-link:focus-visible { outline: 2px solid var(--zg-green, #0a7d32); outline-offset: 3px; border-radius: 10px; }