/* ───────────────────────────────────────────────────────────────────────────── pl-transition.css — місток на час переносу верстки reytel.ua → reytel.pl. Файл PL-ний, у темі UA його немає. Тут тільки те, що гасить конфлікти між старим stylesheet/style.css і новим набором css/*.css. Кожен блок має жити рівно доти, доки відповідну сторінку не перенесено. Прибрати цілком у хвилі 7 разом зі старим style.css. ───────────────────────────────────────────────────────────────────────────── */ /* 1. Старий хедер був фіксованим (`header {position: fixed; height: 72px}`) — нова шапка в потоці й змінної висоти. Правила з style.css написані на голий тег, тому чіпляються і за нову розмітку. Сесія 2. */ header.header { position: static; height: auto; border-bottom: 0; background: transparent; backdrop-filter: none; /* `header { padding: 20px 0 }` зі старого style.css. До сесії 4 його не було видно: промо-рядок висів `position: fixed` окремо від шапки. Тепер він у потоці **всередині** `

`, і цей падінг малює білу смугу над ним. Відступи нової шапки задає css/header.css на внутрішніх блоках. */ padding: 0; } header.header .container { height: auto; } /* Компенсатор під фіксовану шапку більше не потрібен. */ main { margin-top: 0; } /* 2. (знято) Класи типу сторінки на — конфлікт вирішено в самому header.twig: імена, які старий style.css уже описує для внутрішніх обгорток (`information-page`, `product-page`, `checkout-page`), на не потрапляють. Гасити їх тут не треба — правила для внутрішніх div мають лишатись чинними. */ /* 3. Каретки меню в UA-верстці зашиті чорними (`caret-down-black.svg`), бо там темну шапку бачать рідко. На PL темна шапка — це всі ще не перенесені сторінки, тож інвертуємо іконки там, де фон чорний. Прибрати, коли всі сторінки стануть light. Сесія 2. */ body:not(.header-light):not(.audience-her) .header-navigation .arrow, body:not(.header-light):not(.audience-her) .header-navigation .btn-toggle img, body:not(.header-light):not(.audience-her) .sub-menu__header img { filter: invert(1); } /* 4. Бейдж кошика показуємо/ховаємо класом `rud-hidden` — так це робить index.js нової верстки. Постійне, не транзиційне. */ .header-options .badge.rud-hidden { display: none; } /* 6. Старий stylesheet/style.css описує футер по голому тегу `footer` і по іменах, які нова верстка вживає інакше. Гасимо рівно ті правила, що ламають нову розмітку. Сесія 3, прибрати в хвилі 7. */ footer.footer { padding: 0; background: #000; } footer.footer .footer-bottom { display: block; } /* Drawer-кошик над усім. У critical.css він має z-index 100/99 — на UA цього вистачає, на PL ні: старий промо-рядок `.topblock` сидів на 101 і затуляв шапку кошика (сесія 3), а `stylesheet/style.css` тримає модалки аж до 99999. Сам `.topblock` уже не рендериться (сесія 4 замінила модуль), але правило лишаємо свідомо — воно й по суті правильне. Постійне, не транзиційне. */ .cart-overlay { z-index: 1100; } .cart-drawer { z-index: 1101; } /* 5. Валютний перемикач UA прибрала, у PL він робочий (PLN/EUR). Вбудовуємо його в ті самі дропдауни, що й мову. Постійне, не транзиційне. */ .lang-currency .form-currency { margin: 0; } .lang-currency .dropdown-menu li { white-space: nowrap; } .mobile-lang-currency .mobile-list li span { cursor: pointer; } /* 7. PL-ні блоки нового футера, яких у темі UA немає взагалі, тому й стилів для них у css/footer.css нема: стаціонарний магазин (RUD/LSTR 992) і графік гарячої лінії. Постійне, не транзиційне. */ .footer-main .contact .locals__items, .footer-main .contact .local-item__text, .footer-main .contact .schedule { color: #fff; font-weight: 300; font-size: 16px; line-height: 24px; } .footer-main .contact .local-item__title { color: #8a8a8c; font-size: 14px; line-height: 22px; text-transform: uppercase; } .footer-main .contact .footer__locals { margin: 0; } /* Старий style.css розкладає `.locals__items` у дві колонки з фіксованим проміжком 53px — це було розраховано на широку колонку старого футера. У новому футері `.contact` займає 25% ширини, і другий стовпчик вилазив за правий край. Складаємо в один стовпчик. */ .footer-main .contact .locals__items { display: block; margin-top: 0; } .footer-main .contact .locals__item:not(:first-child) { margin-top: 12px; } /* 8. PL-не в drawer-кошику: кнопка «видалити» (в UA товар прибирається лише мінусом до нуля) і блокування чекауту, коли товар недоступний. Постійне, не транзиційне. */ .cart-item .product-delete { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 300; line-height: 22px; color: #69737c; text-decoration: underline; } .cart-item .checkout-product-error { color: #e32c2b; font-size: 12px; font-weight: 500; line-height: normal; } .cart-footer .checkout-btn.disabled, .cart-item .qty .button.disabled { pointer-events: none; opacity: 0.2; user-select: none; } /* 9. Головна: hero. На UA підзаголовок, заголовок і текст слайда лежать окремими полями (`oc_slider_home.title` / `.sub_title`) і рендеряться в `.subtitle`, `.rl-title.h1`, `.description`. На PL усе це роками лежить одним HTML у полі `text` (класи `hero__subtitle` / `hero__title` / `hero__text`), однаково на проді й на стейджі. Замість міграції даних і нових полів в адмінці віддаємо `text` цілком у `.description` і повертаємо трьом внутрішнім класам вигляд нової верстки. Брейкпойнти повторюють home-page-her.css: від 768px hero світлий (білий фон, темний текст), до 1200px — фото на весь слайд із градієнтом і білий текст. Порядок медіазапитів тут той самий, що й там: спершу min-width, потім max-width. Постійне, не транзиційне. Сесія 5. */ /* Старий stylesheet/style.css описує ці самі три класи під колишній макет: центрує їх на мобілці і додає великі нижні відступи (40/56/76px). Гасимо. */ .hero-section .description .hero__subtitle { font-family: "Tektur", sans-serif; font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: normal; color: #fff; margin-bottom: 24px; text-align: left; } /* Значення дублюють `.h1` з css/typography.css разом із його брейкпойнтами — на них тримається вся нова типографіка заголовків. */ .hero-section .description .hero__title { display: block; margin: 0; text-align: left; max-width: 90%; color: #fff; font-family: "Tektur", sans-serif; font-weight: 600; font-size: 56px; line-height: 64px; letter-spacing: 1px; text-transform: uppercase; } .hero-section .description .hero__text { margin-top: 32px; margin-bottom: 0; text-align: left; } /* `.description` у css/home-page.css має власний верхній відступ — він розрахований на те, що над ним стоять окремі `.subtitle` і `.rl-title`. У нас вони всередині, тож відступ віддаємо `.hero__text`, інакше набігає подвійний. */ .hero-section .description, .index-her-page .hero-section .description { margin-top: 0; } @media (min-width: 768px) { .index-her-page .hero-section .description .hero__subtitle, .index-her-page .hero-section .description .hero__title, .index-her-page .hero-section .description .hero__text, .index-her-page .hero-section .description .hero__text p { color: #15161a; } } @media (max-width: 1200px) { .hero-section .description .hero__title { font-size: 50px; line-height: 58px; } /* До 1200px слайд стає фотографією на всю площу з темним градієнтом — текст поверх неї білий (home-page-her.css, той самий брейкпойнт). */ .index-her-page .hero-section .description .hero__subtitle, .index-her-page .hero-section .description .hero__title, .index-her-page .hero-section .description .hero__text, .index-her-page .hero-section .description .hero__text p { color: #fff; } } @media (max-width: 767px) { .index-her-page .hero-section .description .hero__title { font-size: clamp(38px, 9.8vw, 46px); line-height: 1.14; letter-spacing: 1px; width: min(350px, calc(100vw - 40px)); max-width: 100%; } .index-her-page .hero-section .description .hero__subtitle { font-size: 20px; line-height: 28px; margin-bottom: 16px; } .index-her-page .hero-section .description .hero__text { margin-top: 24px; } } /* 10. Слайдер фото всередині картки товару схлопувався в нуль. PL вантажить (глобально, з давніх часів) `stylesheet/swiper-bundle.min.css`, де `.swiper { margin-left: auto; margin-right: auto }`. `.product-cards__card` у новій верстці — флекс-колонка, а авто-поля по поперечній осі **скасовують stretch**: блок отримував ширину fit-content, тобто 0 (усередині лише абсолютно спозиційоване фото). Далі 0×0 не давав спрацювати IntersectionObserver-у в main.js, тож слайдер ще й не ініціалізувався. На UA цього файлу немає взагалі — там лише css/swiper.css. Знімати разом зі старим swiper-bundle у хвилі 7. Сесія 5. */ .product-cards__card .swiper.product-card__inner-slider { margin-left: 0; margin-right: 0; width: 100%; } /* 10.2 Той самий винуватець, той самий симптом — уже на картці товару (сесія 11): каруселі супутніх товарів `.more-offer__slider` і плитка фото `.product-detail__photos` теж мають клас `.swiper`, а лежать у флекс-колонці `.sticky-content` / флекс-рядку `.product-detail .container`. Виміряно в браузері: слайдер отримував width 14px при полях по 211px. */ .swiper.more-offer__slider, .swiper.product-detail__photos { margin-left: 0; margin-right: 0; } /* 10.3 …але на вузькому екрані нулі вбивали власний прийом нової верстки: `detail-page.css` робить фото на весь екран через `width: calc(100% + 40px)` + `margin: 0 -20px` (поля `.container`). Без відʼємних полів блок ширший за контейнер, а `.product-detail .container` — флекс, тож фото ще й стискалось назад до 335px. Тобто симптом «фото з відступами по боках, не як на UA» давав наш же фікс swiper-а. Повертаємо поля рівно там, де їх задає нова верстка. */ @media (max-width: 550px) { .swiper.product-detail__photos { margin-left: -20px; margin-right: -20px; } } .swiper.more-offer__slider { width: 100%; } /* 10.1 Подвійні стрілки в слайдерах нової верстки. Той самий винуватець, що в п. 10: глобальний `stylesheet/swiper-bundle.min.css` домальовує до `.swiper-button-next/prev` псевдоелемент `:after` з гліфом зі шрифту `swiper-icons` і власним синім кольором (`#007aff`). Нова верстка кладе всередину кнопки свій ``, тож виходило дві стрілки — чорна й синя. На UA цього файлу немає, тому там чисто. Гасимо `:after` рівно в тих блоках, де кнопка має власну картинку; старі слайдери на не перенесених сторінках далі малюються гліфами. Знімати разом зі старим swiper-bundle у хвилі 7. */ .product-cards__header .button:after, .product-card__inner-slider .button:after, .instagram-box .swiper-button-next:after, .instagram-box .swiper-button-prev:after, .engraving-swiper .swiper-button-next:after, .engraving-swiper .swiper-button-prev:after { content: none; } /* 11. (знято) Підпис `text_description` під заголовком блоку товарів прибрано з розмітки — його не було ні в новому дизайні, ні на UA, а редагувався він лише правкою мовного файлу. Стилі під нього більше не потрібні. */ /* 12. (знято) Перехідний перенос рядка фільтрів більше не потрібен: модуль фільтра переїхав на нову розмітку (сесія 9), `.filters-list` стоїть у рядку штатно. */ /* 13. Дві стрілки в кнопках фільтра. У новій розмітці стрілка — це власний усередині `.filter-toggle`, а старий `stylesheet/style.css` домальовує `.category-filter-title::after` (той самий клас лишений навмисно — на ньому тримається логіка чипів і підрахунку). Гасимо псевдоелемент рівно там, де кнопка вже має свою картинку. Знімати разом зі старим style.css у хвилі 7. */ .filter-toggle .category-filter-title::after { content: none; display: none; } /* 14. Дві галочки в рядку фільтра. Мітка навмисно несе обидва класи — `.checkbox` (нова верстка малює квадратик через `.checkbox-mark`) і `.radchck-label` (на ньому тримається логіка), а старий `stylesheet/style.css` домальовує свій квадратик псевдоелементами `.radchck-label span::before/::after` — до КОЖНОГО span-у, тобто ще й біля лічильника. Гасимо їх усередині нового списку фільтрів; на не перенесених сторінках старі мітки лишаються цілими. Знімати разом зі старим style.css у хвилі 7. */ .filters-list .radchck-label span::before, .filters-list .radchck-label span::after { content: none; display: none; } /* 15. Подвійна риска між фільтрами. Роздільник у новій верстці — псевдоелемент `.filter-item:not(:last-of-type):after`, а старий style.css дає тому самому елементу ще й `border-right` під іменем `.category-filter-row`. Лишаємо новий. Знімати разом зі старим style.css у хвилі 7. */ .filters-list .category-filter-row { border-right: none; } /* 16. Кількість у дужках падала під назву: старий style.css робить КОЖЕН span усередині `.radchck-label` флекс-блоком. У новому рядку фільтра назва й лічильник мають стояти поруч, як на UA. */ .filters-list .radchck-label .checkbox-text { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .filters-list .radchck-label .checkbox-text span { display: inline; gap: 0; } /* 16.1 Темна мобільна модалка фільтра: значення груп лишались чорними на чорному. `catalog-page.css` фарбує рядок правилом `.filters-list.white .checkbox-text`, але клас `white` є лише в UA-розмітці (там модалка має власну копію списку). На PL список **один** і переїжджає в модалку скриптом із `filter.twig`, а сама мітка носить ще й старий клас `.radchck-label` — по ньому `css/footer.css:214` дає `span` колір #15161a і перебиває все, що фарбує тільки `.checkbox-text`. Тому фарбуємо і сам рядок, і його span-и. Ціновий інпут лишається білою плашкою з темним текстом — як на UA. */ .modal-filter .filters-list .checkbox-text, .modal-filter .filters-list .checkbox-text span { color: #fff; } .modal-filter .filters-list .checkbox-mark::after { background-color: #fff; } .modal-filter .filters-list .slider-input { background-color: #fff; border-color: #fff; color: #15161a; } /* 17. (знято) Підказку «обрано N → Показати» більше не тримає CSS-костур: index.js і filter.twig кладуть її всередину відкритого `.filter-item`, а позицію задає правило нижче. */ .catalog-filters .filter-item .panel-modal { position: absolute; top: calc(100% + 8px); left: 0; right: auto; z-index: 20; } /* 18. Рядок вибраних фільтрів: сірий фон і розтягнуті чипи — спадок старого style.css (`.selected-filters`, `.selected-filters__content`). У новій верстці це просто ряд світлих пігулок на фоні сторінки. */ .catalog-filter__bottom .selected-filters, .catalog-filter__bottom .selected-filters__content { background: none; border: 0; padding: 0; margin: 0; } .catalog-filter__bottom .selected-tag { background: #fff; flex: 0 0 auto; width: auto; } /* 19. (знято) Разом із блоком 17 — позицію підказки задає прив’язка до `.filter-item`, а не примусові координати. */ /* ─────────────────────────── Картка товару (сесія 11) ─────────────────────────── */ /* 20. Вибір розміру. Розмітка селекта лишилась PL-ною (на ній тримається перемикач «Rozmiar PL / Srednica», доступність розміру по складу і livePrice), а вигляд має бути як у нового `.custom-popover-select`. Тому перефарбовуємо старі класи, які будує скрипт у product.twig: `.select-selected` — кнопка, `.select-items` — випадайка, `.item` — рядок. */ .product-detail__content .custom-select { min-width: 0; width: 100%; max-width: 400px; font-family: inherit; } /* Обгортки селекта зі старої верстки: `.product-sizes` — флекс із wrap (там колись лежали плитки розмірів), через нього випадайка стискалась до 121px. Виміряно. */ .size-box .product-sizes { display: block; } .size-box .sizes-selected, .size-box .form-group { width: 100%; max-width: 400px; margin: 0; } .product-detail__content .select-selected { border: 1px solid #d9d9d9 !important; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 44px 12px 14px; font-size: 16px; line-height: 24px; color: var(--text-color-black); } /* Після вибору скрипт дописує в кнопку примітку зі складу окремим `` («11 (czas oczekiwania 30 dni)»). Розводимо по краях, як рядки випадайки, інакше довгий текст заповзає під каретку. */ .product-detail__content .select-selected span { font-size: 13px; line-height: 18px; text-align: right; flex: 0 1 auto; } /* Каретка нової верстки замість чорного трикутника зі старого style.css */ .product-detail__content .select-selected:after { content: ""; border: 0; width: 18px; height: 18px; top: 50%; right: 14px; margin-top: -9px; background: url("../img/icons/caret-down-black.svg") center no-repeat; background-size: 18px; transition: transform 0.2s ease; } .product-detail__content .select-selected.select-arrow-active:after { border: 0; top: 50%; transform: rotate(180deg); } .product-detail__content .select-items { border: 1px solid #15161a; max-height: 240px; } /* На мобілці старий `style.css` перетворює випадайку на шторку знизу екрана (`@media (max-width: 766px)`: `position: fixed; bottom: 0; min-height: 70%`). UA цю реалізацію переросла: там уже нова `.custom-popover-select__dropdown` — `position: absolute; top: 100%`, тобто список падає під поле й на мобілці теж. PL лишається на старому скрипті з `product.twig` (на ньому тримається вкладка «Rozmiar/Srednica», доступність по складу й примітка Baselinker), тому повторюємо поведінку UA правилом, а не переписуванням компонента. */ @media (max-width: 766px) { .product-detail__content .select-items { position: absolute; top: 100%; bottom: auto; min-height: 0; } } .product-detail__content .select-items .item { justify-content: space-between; padding: 0; border-bottom: 1px solid #d9d9d9; font-weight: 300; font-size: 14px; line-height: 22px; letter-spacing: 0.6px; } .product-detail__content .select-items .item:last-child { border-bottom: 0; } .product-detail__content .select-items .item span { padding: 8px 16px; border: 0; } /* Старий style.css ділив рядок навпіл (`span:first-child` і `.right-text` по `width: 50%`). На PL правий стовпчик — «czas oczekiwania 30 dni»: у 199px він не влазить і ламається на два рядки. Ширини віддаємо вмісту, розводить краями вже `justify-content: space-between` вище. Лівий `span` ще й **розтягуємо на весь вільний простір**: клік у рядку ловить не сам рядок, а `.value` (обробник у `product.twig` висить на ньому, правий `span` лише передає клік далі). Поки лівий був по вмісту, порожня середина рядка була мертвою зоною — тепер клікається весь рядок. */ .product-detail__content .select-items .item span:first-child { font-weight: 400; width: auto; flex: 1 1 auto; min-width: 0; } .product-detail__content .select-items .item .right-text { width: auto; flex: 0 0 auto; white-space: nowrap; line-height: 22px; } .product-detail__content .select-items .item:hover { background: #f5f5f5; } .product-detail__content .select-items .same-as-selected { background: #e7e7e7; } .product-detail__content .select-items .tab a { flex: auto; text-transform: uppercase; font-size: 14px; line-height: 22px; border-right: 0; border-bottom: 1px solid #15161a; } .product-detail__content .select-items .tab .tab-item.active { background: var(--text-color-black); color: #fff; } .product-detail__content .product-sizes select.error-required + .select-selected { border-color: #d0021b !important; } /* 21. Omnibus-блок («найнижча ціна за 30 днів») — PL-ний, у темі UA його немає. Старе правило трималось за `#product.product-info`, якого в новій розмітці вже не існує. */ .product-detail__content .product__min_price { font-size: 12px; line-height: 18px; color: #69737c; } /* Іконка ліворуч жила в старому `stylesheet/style.css` (`background: url(...)`), а тут лишалась тільки позиція — без старого файлу підпис їхав без значка. Шлях `../image/` однаковий і зі `stylesheet/`, і з `css/` (сесія 18). */ .product-detail__content .text-preorder { font-size: 14px; line-height: 22px; color: var(--text-color-black); border-top: 0; padding: 4px 0 4px 25px; background: url(../image/preorder.png) 0 8px no-repeat; } /* 22. Бейджі знижки й передзамовлення над фото — PL-не (на UA їх на картці немає). Стилі `.tags`/`.badge` у critical.css прив’язані до `.product-cards__card`, тому для блоку фото їх треба повторити. */ .product-detail__photos .tags { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 5; display: flex; flex-wrap: wrap; flex-direction: column; align-items: self-start; gap: 5px; } .product-detail__photos .badge { font-size: 14px; padding: 5px; width: fit-content; background: #ccc; color: #15161a; } /* 23. Кнопка гравіювання: index.js знімає `hidden` після завантаження сторінки, але старий style.css робить `.hidden{display:none}` — тому до зняття класу блок не має займати місце, а після — бути в рядок з іконкою. */ .product-detail__content .product-add-engraving { cursor: pointer; display: flex; align-items: center; gap: 8px; } .product-detail__content .product-add-engraving.hidden { display: none; } /* 24. `.hidden` (bootstrap-івський клас зі старого style.css) перестав ховати кнопки: нові `.button-*` мають `display:flex` і оголошені пізніше, тобто виграють за порядком при однаковій специфічності. На цьому класі тримається показ кнопки «Zgłoś dostępność» для розміру, якого немає на складі. */ .product-detail__content-buttons .hidden { display: none; } /* 25. Кутики зі старої кнопки. `.subscribe__btn` лишений на кнопці кошика навмисно — за ним index.js упізнає «додати в кошик» і показує підтвердження гравіювання (`e.target.classList.contains('subscribe__btn')`). Разом із класом приїхали два чорні ромби в кутах (`:before`/`:after` у старому style.css) і сірий фон. Гасимо їх рівно в блоці покупки — на решті сторінок кнопка лишається старою. */ .product-detail__content-buttons .subscribe__btn:before, .product-detail__content-buttons .subscribe__btn:after, .product-detail__content-buttons .btn-open-modal:before, .product-detail__content-buttons .btn-open-modal:after { content: none; } .product-detail__content-buttons .subscribe__btn { background: var(--text-color-black); height: 64px; padding: 6px 24px; } /* Ховер кнопки кошика. `.button-contained:hover` (form-components.css) робить фон білим, але правило вище — теж 0-2-0 і оголошене пізніше, тож фон лишався чорним, а текст від того ж ховера чорнів: напис зникав. Повторюємо ховер нової верстки з тією ж специфічністю, що й фон, і в тій самій межі 1024px, що на UA. Результат як на reytel.ua: біле тло, чорний напис, чорний контур. */ @media (min-width: 1024px) { .product-detail__content-buttons .subscribe__btn:hover { background: #fff; color: var(--text-color-black); } } /* ────────────────── Модалки товару (сесія 12) ────────────────── */ /* 26. Старий style.css має власну реалізацію тих самих модалок під тими самими іменами: `.stock-info-popup.active` (і сусіди) — це `position: fixed; display: flex; width/height: 100%`, тобто вікно на весь екран. У новій верстці позиціювання дає обгортка `.popup-wrapper`, а сама модалка — звичайний блок усередині неї. Гасимо старі правила рівно там, де модалка вже в новій обгортці. Знімати разом зі старим style.css у хвилі 7. */ .popup-wrapper .popup-content.active { display: block; position: relative; width: 100%; height: auto; top: auto; left: auto; z-index: 2; } .popup-wrapper .popup-content .popup-container { max-width: none; padding: 0; background: none; overflow: visible; z-index: 3; } /* Заголовок і поля: старий style.css фарбує `.one-click-title` та інпути під стару форму. Нові класи (`.popup-title`, `.field-input`) не перетинаються, але блок `.form-group` у старому файлі має свої відступи. */ .popup-wrapper .popup-content .form-group { margin-bottom: 0; width: 100%; } /* Хрестик стоїть у правому верхньому куті вікна, а заголовок центрований — довгий текст (підтвердження гравіювання) заповзав під нього. */ .popup-wrapper .popup-content .popup-title { padding: 0 32px; margin-bottom: 0; } .popup-wrapper .popup-content .stock-info-error, .popup-wrapper .popup-content .one-click-error { color: #e32c2b; font-size: 12px; line-height: 18px; text-align: left; margin: 0; } .popup-wrapper .popup-content .stock-info-error:empty, .popup-wrapper .popup-content .one-click-error:empty { display: none; } /* 27. Кнопки модалок: `.btn` зі старого style.css (і бутстрапа) перебиває відступи нових `.button-*`. Плюс на вузьких екранах дві кнопки в рядок не влазять. */ .popup-wrapper .popup-buttons { gap: 16px; } /* Текстова кнопка («Bez grawerunku» в підтвердженні гравіювання) — не плитка: їй лишається рідний inline-вигляд із підкресленням упритул до напису. */ .popup-wrapper .popup-buttons .btn:not(.button-text) { min-height: 56px; border-radius: 0; } /* Вікно по центру екрана, поки воно нижче за екран; високі модалки (гравіювання) лишаються прокручуваними, бо центрування дає `margin: auto` на дитині, а не `align-items` на контейнері. PL-не доповнення: у popups.css цього немає. */ .popup-wrapper { display: flex; } .popup-wrapper .popup-content { margin: auto; } @media (max-width: 550px) { .popup-wrapper .popup-buttons { flex-direction: column; gap: 12px; } .popup-wrapper .popup-buttons .btn:not(.button-text) { width: 100%; min-width: 0; } } /* ──────────────── Інформаційні сторінки (сесія 13) ──────────────── */ /* 28. Хвиля 5 — інфосторінки. Блок порожній: усе, що тут було, роз'їхалось по власних файлах. Сесія 15 — текстові сторінки, мапа сайту й сторінка «успішно» (`css/info-pages.css`, каркас `.info-page` + клас `article`). Сесія 16 — три сторінки з власною версткою в описі, 4/6/11 (`css/info-pages-own.css`, каркас `.info-page-own`). Сесія 17 — контакти (`css/contacts.css`) і 404 (`css/not-found.css`). Жодна з цих сторінок більше не залежить від `stylesheet/style.css`. */ /* 29. Хвиля 6 — чекаут. Розмітка PL уже несе класи нової верстки (`checkout__left`, `checkout-step`, `subscribe__btn`), а базові правила для них лежать у старому `stylesheet/style.css` — і в UA так само. Тому переносити тут нема чого: бракує обгортки `.container` (додано в twig) і сумісності з польськими способами доставки й оплати, яких у темі UA не існує. */ /* 29.1 Логотипи платіжок. У PL це три з невалідним `height="50px"` (атрибут height приймає число, «50px» браузер ігнорує). Наслідок: webp-и малювались у натуральний розмір на пів колонки, а Przelewy24 — навпаки, у нуль: у SVG лише viewBox без width/height, тож у флексі його ширина 0. Задаємо розмір стилями, як у еталонній верстці (рядок логотипів 32px). */ .payment-step .radio-right .pay_img { height: 40px; width: auto; max-width: 160px; object-fit: contain; } @media (max-width: 767px) { .payment-step .radio-right .pay_img { height: 32px; max-width: 120px; } } /* 29.1.1 Мобілка: `checkout.css` розтягує `.radio-right` на всю ширину рядка — в UA там чотири іконки платіжних систем, і без цього вони не влазять. У PL у правій половині рядка один логотип (а в рядків доставки він узагалі абсолютний `.sh_img`), тож розтягнута половина з'їдала назву способу: «Płatność przy odbiorze» ламалось на три рядки. Виняток — блок InPost: там праворуч поле вибору паczkomat-у, і повна ширина йому потрібна. */ @media (max-width: 767px) { .checkout-page .radio-right:not(.checkout-group-inpost) { width: auto; flex: 0 0 auto; } } /* 29.2 Поля-автокомпліти чекауту. Місто (`#client-city` та двійники) і вибір паczkomat-у на PL зроблені через select2 — у темі UA цього плагіна немає взагалі (там власна випадайка `.city-dropdown`), тому й стилів для нього в новому наборі не існує. Лишаємо плагін (на ньому висить пошук міст `checkout/checkout/cityAutocomplite`), а вигляд зводимо до сусідніх полів форми: рамка #d9d9d9, висота 48, той самий текст і плейсхолдер. */ .checkout-page .select2-container--default .select2-selection--single { height: 48px; border: 1px solid #d9d9d9; border-radius: 0; background: #fff; } .checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered { height: 46px; line-height: 46px; padding: 0 32px 0 12px; color: #15161a; font-size: 16px; font-weight: 500; } .checkout-page .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #69737c; font-weight: 400; } .checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; } .checkout-page .select2-container--default.select2-container--open .select2-selection--single, .checkout-page .select2-container--default .select2-selection--single:focus { border-color: #15161a; } /* Випадайка малюється в кінці , тобто поза `.checkout-page`. */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #15161a; }