/* Grafinka — точковий кастом-CSS (GR-1.6/1.7). Базові токени — у theme.json. */
/* Значок ▶ поверх постера: те саме зображення для плитки галереї на головній і для
плитки відео в галереї товару, тож data-URI живе в одному місці. */
:root {
--gr-ikona-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E");
}
/* Другорядна кнопка — outline */
.wp-block-button.is-style-gf-secondary > .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--grafitowy);
border: 1px solid var(--wp--preset--color--grafitowy);
}
.wp-block-button.is-style-gf-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-gf-secondary > .wp-block-button__link:focus {
background-color: var(--wp--preset--color--grafitowy);
color: var(--wp--preset--color--biel);
}
/* Варіант кнопки «Zamów przez Instagram» */
.wp-block-button.is-style-gf-instagram > .wp-block-button__link {
background-color: var(--wp--preset--color--lawendowy);
color: var(--wp--preset--color--grafitowy);
}
.wp-block-button.is-style-gf-instagram > .wp-block-button__link:hover,
.wp-block-button.is-style-gf-instagram > .wp-block-button__link:focus {
background-color: var(--wp--preset--color--pudrowy-roz);
}
/* Іконки соцмереж у хедері — графітові */
.wp-block-social-links.is-style-logos-only .wp-social-link { color: var(--wp--preset--color--grafitowy); }
/* Mobile-first: великі зони натискання для CTA */
@media (max-width: 600px) {
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; }
}
/* ---- GR-2: каталог і картка товару ---- */
/* Бейдж "na zamówienie" */
.gr-badge {
display: inline-block;
background-color: var(--wp--preset--color--lawendowy);
color: var(--wp--preset--color--grafitowy);
border-radius: 999px;
padding: 4px 12px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0.6rem;
}
/* Деталі §7 списком */
.gr-details { margin: 1rem 0; border-top: 1px solid var(--wp--preset--color--jasny-bez); }
.gr-details > div {
display: flex; gap: 0.6rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--wp--preset--color--jasny-bez);
font-size: 0.95rem;
}
.gr-details dt { flex: 0 0 140px; margin: 0; color: #6c656d; font-weight: 500; }
.gr-details dd { margin: 0; }
/* Кнопки дій на картці товару */
.gr-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; }
.gr-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; border-radius: 999px; padding: 0.7rem 1.6rem;
font-weight: 600; text-decoration: none;
}
.gr-btn-zamow { background-color: var(--wp--preset--color--roz-akcent); color: #fff; }
.gr-btn-zamow:hover, .gr-btn-zamow:focus { background-color: #8E4E5A; color: #fff; }
.gr-btn-ig {
background-color: transparent; color: var(--wp--preset--color--grafitowy);
border: 1px solid var(--wp--preset--color--grafitowy);
}
.gr-btn-ig:hover, .gr-btn-ig:focus { background-color: var(--wp--preset--color--grafitowy); color: var(--wp--preset--color--biel); }
/* Каталог: фільтри + сітка, адаптив */
.gr-catalog { gap: 1.5rem; }
@media (max-width: 781px) {
.gr-catalog { flex-wrap: wrap; }
.gr-catalog .gr-filters { flex-basis: 100% !important; }
}
/* ---- GR-3: форми замовлення + подяка ---- */
.gr-form { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.gr-form label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 500; }
.gr-form input[type="text"], .gr-form input[type="tel"], .gr-form input[type="email"],
.gr-form input[type="number"], .gr-form input[type="date"], .gr-form select, .gr-form textarea {
width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--wp--preset--color--jasny-bez);
border-radius: 8px; font: inherit; background: var(--wp--preset--color--biel); box-sizing: border-box;
}
.gr-form input[type="number"] { max-width: 110px; }
.gr-form textarea { resize: vertical; }
.gr-form-errors {
background: #fbeef0; border: 1px solid #e0a9b4; border-radius: 8px; padding: 0.8rem 1rem; color: #8a2740;
}
.gr-form-errors ul { margin: 0; padding-left: 1.2rem; }
.gr-chosen {
display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem;
background: var(--wp--preset--color--kremowy); border: 1px solid var(--wp--preset--color--jasny-bez); border-radius: 10px;
}
.gr-chosen img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.gr-chosen > div { flex: 1; display: flex; flex-direction: column; }
.gr-chosen-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.gr-chosen-change { font-size: 0.85rem; }
.gr-order-summary {
padding: 1rem; border: 1px solid var(--wp--preset--color--jasny-bez); border-radius: 10px;
background: var(--wp--preset--color--kremowy);
}
.gr-order-summary h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.gr-order-summary dl, .gr-order-summary p { margin: 0; }
.gr-order-summary dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; }
.gr-order-summary dd { margin: 0; text-align: right; white-space: nowrap; }
.gr-order-total { margin-top: 0.4rem; border-top: 1px solid var(--wp--preset--color--jasny-bez); font-weight: 600; }
.gr-order-summary [hidden] { display: none; }
.gr-radio { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.gr-radio legend { font-weight: 500; padding: 0; margin-bottom: 0.3rem; }
.gr-radio label { flex-direction: row; align-items: center; gap: 0.4rem; font-weight: 400; }
.gr-check { flex-direction: row !important; align-items: flex-start; gap: 0.5rem; font-weight: 400; }
.gr-check > input { flex: 0 0 auto; margin-top: 0.2rem; }
.gr-check-copy { min-width: 0; }
/* Інформація про обробку даних — не згода, тому без чекбокса й дрібнішим кеглем. */
.gr-form-note { margin: 0; font-size: 0.85rem; opacity: 0.75; }
.gr-opis-box { border: 2px solid var(--wp--preset--color--roz-akcent); border-radius: 10px; padding: 0.9rem; }
.gr-photo { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.gr-photo-btn {
display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 0.4rem; cursor: pointer;
border: 1px solid var(--wp--preset--color--roz-akcent); border-radius: 8px; padding: 0.5rem 0.8rem;
font-weight: 500; font-size: 0.9rem;
}
.gr-photo-input {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.gr-photo-input:focus + .gr-photo-btn {
outline: 2px solid var(--wp--preset--color--grafitowy); outline-offset: 2px;
}
.gr-photo-status { min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.gr-photo small { flex-basis: 100%; opacity: 0.75; }
.gr-intro { background: var(--wp--preset--color--kremowy); border-radius: 8px; padding: 0.8rem 1rem; }
.gr-details-block { display: flex; flex-direction: column; gap: 1rem; }
.gr-details-block summary { cursor: pointer; font-weight: 500; opacity: 0.85; }
.gr-thanks { max-width: 480px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.gr-thanks-emoji { font-size: 2.6rem; }
.gr-thanks-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.gr-btn-wa { background-color: var(--wp--preset--color--szalwiowy); color: var(--wp--preset--color--grafitowy); }
.gr-btn-wa:hover, .gr-btn-wa:focus { filter: brightness(0.93); color: var(--wp--preset--color--grafitowy); }
@media (max-width: 600px) {
.gr-form, .gr-thanks { max-width: 100%; }
}
/* ── GR-4: сторінка «Dostawa i płatność» (§13) ───────────────────────── */
.gr-dp { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.6rem; }
.gr-dp-block { padding-bottom: 1.2rem; border-bottom: 1px solid var(--wp--preset--color--jasny-bez); }
.gr-dp-block:last-child { border-bottom: none; }
.gr-dp-block h2 { margin: 0 0 0.5rem; }
.gr-dp-block ul { margin: 0 0 0.6rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.gr-dp-block p { margin: 0.3rem 0; }
.gr-dp-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }
/* ── Смужка позиціонування в шапці ────────────────────────────────────
Заголовок §5.1 переїхав сюди з головної, коли головною став каталог. Він
свідомо параграф, а не h1: смужка видима на кожній сторінці, а h1 там уже
свій — назва товару, категорії чи сторінки. */
.gr-hero-bar { text-align: center; padding: var(--wp--preset--spacing--30); }
.gr-hero-bar > * { margin-block: 0; }
.gr-hero-bar > * + * { margin-block-start: 0.5rem; }
.gr-hero-bar-title { line-height: 1.2; }
/* Кнопки смужки на сторінках оформлення прибираємо: там клієнт уже заповнює форму,
і два виходи в чат просто над нею — те саме відведення, від якого там уже
ховається плаваюча WhatsApp-кнопка (gr_int_strony_bez_cta()). Текст лишаємо:
позиціонування нікому не заважає, а CTA — заважає. */
.gr-bez-cta .gr-hero-bar .wp-block-buttons { display: none; }
/* Смужка стоїть над контентом КОЖНОЇ сторінки, тож на телефоні вона змагається за
перший екран із самим товаром. Тут вона тисне себе до одного рядка кнопок:
відступи менші, кнопки вужчі — але висота дотику лишається 48px (правило вище). */
@media (max-width: 600px) {
.gr-hero-bar { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); }
.gr-hero-bar .wp-block-buttons { gap: 0.5rem; }
.gr-hero-bar .wp-block-button__link { padding-left: 1rem; padding-right: 1rem; }
}
/* ── GR-5: «Jak zamówić» (сторінка /jak-zamowic) ──────────────────────── */
.gr-jak { max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.5rem; }
/* ── GR-5: відгуки ────────────────────────────────────────────────────── */
.gr-opinie { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; max-width: 1000px; margin: 0 auto; }
.gr-opinie-card { margin: 0; padding: 1.2rem; background: #fff; border: 1px solid var(--wp--preset--color--jasny-bez); border-radius: 10px; display: flex; flex-direction: column; gap: 0.7rem; }
.gr-opinie-foto img { width: 100%; height: auto; border-radius: 8px; }
.gr-opinie-tekst { margin: 0; font-style: italic; }
.gr-opinie-autor { font-weight: 600; }
.gr-opinie-tlum { font-weight: 400; font-size: 0.9em; }
/* ── GR-5: контактна форма (honeypot, успіх) ──────────────────────────── */
.gr-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.gr-form-ok { padding: 0.8rem 1rem; background: #eef6ec; border: 1px solid #b8d8b0; border-radius: 8px; margin-bottom: 1rem; }
/* ── GR-5: банер «wersja robocza» на юр-сторінках ─────────────────────── */
.gr-legal-draft { padding: 0.7rem 1rem; background: #fff6e0; border: 1px solid #e6c878; border-radius: 8px; margin-bottom: 1.5rem; }
.gr-legal-draft p { margin: 0; }
/* ── GR-6: плаваюча WhatsApp-кнопка ───────────────────────────────────── */
/* Підпис темний, а не білий: білим по фірмовому зеленому #25D366 виходить 1.98:1 при
нормі WCAG AA 4.5:1 (шрифт 17px/600 — це не «великий текст», поріг 3:1 не діє).
Темний grafitowy дає 6.26:1 і 5.07:1 на ховері, а зелений лишається впізнаваним —
міняти сам колір означало б втратити те єдине, заради чого кнопка зелена. */
.gr-wa-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 9998; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; background: #25D366; color: var(--wp--preset--color--grafitowy); border-radius: 999px; text-decoration: none; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.gr-wa-float:hover { background: #1ebe5b; color: var(--wp--preset--color--grafitowy); }
.gr-wa-float-ico { font-size: 1.2rem; line-height: 1; }
@media (max-width: 600px) { .gr-wa-float-txt { display: none; } .gr-wa-float { padding: 0.85rem; } }
/* GR-7: сітка галереї (CPT gr_galeria через [gr_galeria]) */
/* Відео товару — окремий слайд галереї, тож розміри рахує слайдер, а нам лишається
вписати кадр у слайд.
Розміри `auto` + два обмеження: браузер сам вписує вертикальний ролик у ширину слайда й
у висоту екрана, зберігаючи співвідношення. Так було НЕ завжди: спершу стояло
`width:100%` + `object-fit:contain`, і тоді елемент розтягувався на всю ширину, а ролик
9:16 усередині давав ~140 px чорного поля з кожного боку — «чорний квадрат». Тепер поля
немає: коробка збігається з кадром. */
/* Кнопка лайтбоксу на слайді з відео: PhotoSwipe цього слайда не знає (у нього немає
![]()
), тож відкривала б індекс поза межами списку. Ховаємо саме на ньому. */
.woocommerce-product-gallery:has(.gr-produkt-wideo.flex-active-slide) .woocommerce-product-gallery__trigger {
display: none;
}
/* Плеєр заповнює слайд так само, як фото — width:100% + height:auto, без max-height і без
центрування. Два симптоми, які саме цим і лікуються:
1) «смужка» ліворуч. Трек слайдера позиціюється з округленням, тож край сусіднього
слайда лишає 1 px усередині viewport. На фото-слайдах його не видно, бо поруч така
сама картинка; коли плеєр був вужчий за слайд і стояв по центру, цей піксель
опинявся біля порожнього поля й ставав помітною лінією.
2) «після запуску відео меншає». До завантаження браузер бере пропорції з атрибутів
постера й масштабує їх під max-height; після — справжні розміри ролика (406×720),
які в цю межу вже вкладаються, тож елемент стрибав униз. З width:100% ширина фіксована
слайдом, а різниця пропорцій постера й ролика (0.5623 проти 0.5639) дає 3 px висоти.
object-fit тут НЕ потрібен: коробка й так за співвідношенням кадру, а саме він колись і
малював чорні поля з боків. */
/* Трек слайдера позиціюється з округленням, тож ліворуч від активного слайда всередині
viewport лишається 1 px сусіднього кадру. На фото-слайдах це непомітно (поруч така сама
картинка), а біля темного відео читається як світла смужка — виміряно на скріншоті:
srgb(52,43,32) (дерев'яний стіл сусіднього фото) проти srgb(33,51,54) самого кадру.
Закриваємо цей піксель тлом сторінки. Смуга ширша за 1 px навмисно: зсув залежить від
округлення й буває 0 або 1, а зайве перекриття лягає на тло, де його не видно. */
.gr-produkt-wideo { position: relative; }
.gr-produkt-wideo.flex-active-slide::before {
content: "";
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
right: 100%;
width: 3px;
background: var(--wp--preset--color--kremowy);
}
.gr-produkt-wideo video {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
background: #1e1c21; /* поки постер вантажиться — тло, а не біла дірка */
}
/* Позначка ▶ на мініатюрі відео у стрічці слайдера. Відео — ОСТАННІЙ слайд (хук на 21,
після фото), тож і мініатюра остання; стрічку `.flex-control-thumbs` будує сам
flexslider, і власного класу цій `li` не поставити — звідси `last-child`. `:has()`
звужує правило до галерей, у яких відео справді є.
ponytail: позиція «остання» задана пріоритетом хука. Змінити пріоритет — змінити й це
правило, інакше значок сяде на чуже фото. */
.woocommerce-product-gallery:has(.gr-produkt-wideo) .flex-control-thumbs li:last-child {
position: relative;
}
.woocommerce-product-gallery:has(.gr-produkt-wideo) .flex-control-thumbs li:last-child::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(30, 28, 33, 0.62) var(--gr-ikona-play) center / 14px no-repeat;
pointer-events: none;
}
.gr-galeria-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.8rem;
margin-bottom: 1.2rem;
}
.gr-galeria-item {
margin: 0;
}
.gr-galeria-item img {
width: 100%;
/* `height: auto`, а не `100%`. Було `100%`, і разом із заданою width це вимикало
aspect-ratio (коли задані обидва розміри, ratio ігнорується): плитка ставала висотою
самого кадру, ряд розтягувався під найвищий, а підпис вилазив під наступний ряд.
Просто прибрати height теж не досить — WordPress віддає `width`/`height` атрибутами,
а вони діють як presentational hint і підставляють 300 px замість auto. Тому саме
`auto`, явно. Плитки з відео були квадратні весь час, бо там height ніхто не задавав —
ця неузгодженість і виказала помилку. */
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
display: block;
}
.gr-galeria-item figcaption {
margin-top: 0.3rem;
font-size: 0.85rem;
text-align: center;
color: var(--wp--preset--color--grafitowy, #36333A);
}
/* ── Відео в галереї ─────────────────────────────────────────────────── */
.gr-galeria-item--wideo { position: relative; }
/* Значок ▶: маргін у % рахується від ШИРИНИ, тож calc(50% - 24px) центрує
оверлей по квадратній плитці незалежно від висоти підпису під ним. */
.gr-galeria-item--wideo::before {
content: "";
position: absolute;
left: 50%;
top: 0;
margin-top: calc(50% - 24px);
transform: translateX(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(30, 28, 33, 0.55)
var(--gr-ikona-play)
center / 20px no-repeat;
pointer-events: none; /* клік проходить у посилання плитки */
}
/* ── Лайтбокс галереї ────────────────────────────────────────────────────
Нативний