/* ============================================================================
TONKATON — ДИЗАЙН-СИСТЕМА
Единственный источник правды для всех страниц макета.
Подключается как
Структура:
1. Токены — примитивы (сырые значения)
2. Токены — семантика (то, чем пользуются компоненты)
3. База и типографика
4. Компоненты
5. Утилиты и состояния
Правило: в разметке страниц не должно быть ни одного hex-цвета
и ни одного «магического» px. Только var(--token).
============================================================================ */
/* ============================================================================
1. ТОКЕНЫ — ПРИМИТИВЫ
============================================================================ */
:root{
/* --- Зелёный: фирменный акцент (брендбук, стр. 2) --- */
--green-100:#F4F8E4;
--green-200:#E8F0C4;
--green-300:#D8DD48;
--green-400:#BED244;
--green-500:#AACA3C; /* ОСНОВНОЙ ФИРМЕННЫЙ */
--green-600:#98AF34;
--green-700:#7D922D;
--green-800:#697B28; /* единственный зелёный, годный для текста на белом */
--green-900:#4A5719;
/* --- Розовый: лояльность и персональная цена --- */
--pink-100:#FBF0F9;
--pink-200:#F4DCF0;
--pink-500:#D88BCF;
--pink-700:#B15CA5;
--pink-800:#8E3E82;
/* --- Нейтральные --- */
--n-0:#FFFFFF;
--n-50:#FAFAFA;
--n-100:#F2F3F4;
--n-200:#E4E7EC;
--n-300:#D0D5DD;
--n-400:#8E95A3; /* 3,01:1 на белом — минимум WCAG 1.4.11 для границ */
--n-500:#6B7280;
--n-600:#5C6270;
--n-700:#3F444F;
--n-800:#26292F;
--n-900:#0E0E0E;
/* --- Нейтральные для тёмного фона --- */
--on-dark:#9AA0A9;
--on-dark-strong:#C9CDD4;
--border-dark:#24262B;
/* --- Системные --- */
--red-50:#FEF0EE; --red-500:#D92D20; --red-700:#B42318;
--amber-50:#FFFAEB; --amber-500:#DC6803; --amber-700:#B54708;
--blue-50:#EFF6FF; --blue-500:#2E90FA; --blue-700:#175CD3;
--emerald-50:#ECFDF3; --emerald-600:#079455; --emerald-700:#067647;
/* --- Прозрачные слои --- */
--alpha-w-08:rgba(255,255,255,.08);
--alpha-w-13:rgba(255,255,255,.13);
--alpha-w-16:rgba(255,255,255,.16);
--alpha-w-75:rgba(255,255,255,.75);
--alpha-w-98:rgba(255,255,255,.98);
--alpha-k-12:rgba(14,14,14,.12);
--alpha-k-26:rgba(14,14,14,.26);
--alpha-k-50:rgba(14,14,14,.50);
/* ===== ТОЧКА ЗАМЕНЫ ШРИФТА ===============================================
ВАРИАНТ D — утверждён заказчиком.
Onest (100–900) — заголовки: широкий диапазон весов даёт тот самый
контраст тонкого и наджирного, снятый с логотипа
Inter (ось opsz 14–32) — текст, цены, поля: оптический размер
подстраивает начертание под кегль, что важно в плотных карточках
Чтобы сменить пару — поменять эти две строки и в страниц.
A: Manrope + Inter B: Onest + Onest C: Unbounded + Inter
======================================================================== */
--font-display:'Onest',system-ui,-apple-system,sans-serif;
--font-text:'Inter',system-ui,-apple-system,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
/* --- Шкала кеглей. Шаг 1px в мелком диапазоне, дальше крупнее --- */
--fs-11:11px; /* капс-подписи, бейджи */
--fs-12:12px; /* хинты, счётчики */
--fs-13:13px; /* характеристики, хлебные крошки */
--fs-14:14px; /* кнопки, вторичный текст */
--fs-15:15px; /* названия товаров, поля ввода */
--fs-16:16px; /* базовый текст */
--fs-17:17px; /* лид, крупный текст */
--fs-19:19px; /* H5 */
--fs-21:21px; /* H4 */
--fs-23:23px; /* цена в карточке */
--fs-25:25px; /* H3 */
--fs-28:28px;
--fs-34:34px; /* цена на карточке товара */
--fs-44:44px; /* крупные числа */
/* Адаптивные заголовки */
--fs-h1:clamp(32px,5.2vw,60px);
--fs-h2:clamp(28px,4vw,46px);
--fs-hero:clamp(34px,6vw,68px);
/* --- Интерлиньяж --- */
--lh-tight:1.02;
--lh-heading:1.25;
--lh-base:1.55;
--lh-relaxed:1.65;
/* --- Трекинг --- */
--ls-display:-.035em;
--ls-heading:-.025em;
--ls-tight:-.02em;
--ls-caps:.18em;
--ls-caps-wide:.22em;
/* --- Шкала отступов, база 8px + половинные шаги --- */
--sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px;
--sp-6:12px; --sp-7:14px; --sp-8:16px; --sp-10:20px; --sp-12:24px;
--sp-16:32px; --sp-20:40px; --sp-24:48px; --sp-32:64px; --sp-40:80px; --sp-48:96px;
/* --- Границы --- */
--bw-hair:1px;
--bw-strong:2px;
--bw-accent:3px;
--bw-btn:2px;
/* --- Скругления: гострые углы, по решению заказчика --- */
--r:0px;
--r-sm:2px;
--r-circle:50%;
--r-pill:999px;
/* --- Тени --- */
--sh-sm:0 2px 6px -2px rgba(14,14,14,.10);
--sh-md:0 6px 18px -6px rgba(14,14,14,.14);
--sh-lg:0 18px 40px -12px rgba(14,14,14,.18);
--sh-xl:0 28px 60px -16px rgba(14,14,14,.24);
/* --- Слои --- */
--z-base:1;
--z-media:2;
--z-sticky:80;
--z-dropdown:70;
--z-overlay:150;
--z-sheet:160;
--z-toast:250;
--z-dev:300;
/* --- Размеры --- */
--container:1320px;
--container-narrow:1180px;
--tap:44px; /* цель проектирования, WCAG AAA / Apple HIG */
--tap-dense:36px; /* плотные вспомогательные, минимум AA — 24px */
--tap-micro:32px;
/* --- Анимация --- */
--dur:.2s;
--dur-fast:.12s;
--ease:cubic-bezier(.4,0,.2,1);
/* --- Брейкпоинты (справочно, в media-queries подставляются вручную) ---
mobile ≤576 · tablet 577–992 · desktop ≥993 — по п.4.4 ТЗ */
}
/* ============================================================================
2. ТОКЕНЫ — СЕМАНТИКА
============================================================================ */
:root{
--bg:var(--n-0);
--bg-subtle:var(--n-50);
--bg-media:var(--n-0);
--bg-brand:var(--green-500);
--bg-brand-soft:var(--green-100);
--bg-loyalty:var(--pink-100);
--bg-sale:var(--red-500);
--bg-inverse:var(--n-900);
--bg-scrim:var(--alpha-k-50);
--text:var(--n-900);
--text-secondary:var(--n-600);
--text-muted:var(--n-500);
--text-on-brand:var(--n-900); /* чёрный на зелёном — 10,09:1 */
--text-brand:var(--green-800); /* 4,7:1 на белом */
--text-loyalty:var(--pink-800); /* 6,64:1 на белом */
--text-sale:var(--red-700); /* 6,57:1 на белом */
--text-stock:var(--emerald-700);
--text-wait:var(--amber-700);
--text-inverse:var(--n-0);
--border:var(--n-200);
--border-strong:var(--n-300);
--border-field:var(--n-400); /* 3,01:1 — WCAG 1.4.11 */
--border-focus:var(--green-800);
--border-ink:var(--n-900);
}
/* ============================================================================
3. БАЗА И ТИПОГРАФИКА
============================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font-text);color:var(--text);background:var(--bg);
font-size:var(--fs-16);line-height:var(--lh-base);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:var(--bw-strong) solid var(--border-focus);outline-offset:var(--sp-3)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--sp-16)}
@media(max-width:768px){.wrap{padding:0 var(--sp-8)}}
/* --- Контраст весов: главный приём, снятый с логотипа --- */
.h-hero{font-family:var(--font-display);font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
.h-mix{font-family:var(--font-display);font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);display:block}
.h-sec{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.05;letter-spacing:var(--ls-heading)}
.h-mix .lt,.h-sec .lt,.h-hero .lt{font-weight:200}
.h-mix .bd,.h-sec .bd,.h-hero .bd{font-weight:800}
.eyebrow{font-family:var(--font-display);font-size:var(--fs-11);font-weight:800;
letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--text-brand)}
.eyebrow.on-dark{color:var(--green-500)}
.lede{font-size:var(--fs-17);color:var(--text-secondary);max-width:56ch;line-height:var(--lh-relaxed)}
section.blk{padding:var(--sp-48) 0}
@media(max-width:768px){section.blk{padding:var(--sp-32) 0}}
.shead{display:flex;align-items:flex-end;justify-content:space-between;
gap:var(--sp-12);margin-bottom:var(--sp-20);flex-wrap:wrap}
.slink{font-family:var(--font-display);font-weight:700;font-size:var(--fs-14);
letter-spacing:.02em;display:inline-flex;align-items:center;gap:var(--sp-4);
min-height:var(--tap);border-bottom:var(--bw-strong) solid var(--green-500);padding-bottom:var(--sp-1)}
.slink:hover{border-bottom-color:var(--border-ink)}
/* ============================================================================
4. КОМПОНЕНТЫ
============================================================================ */
/* --- Логотип и брендовая графика (вставляются из tonkaton.js) --- */
.lg{display:block;height:var(--lg-h,56px);width:auto}
.lg .shape,.brushmark .shape{fill:var(--lg-shape,var(--green-500))}
.lg .ink{fill:var(--lg-ink,var(--n-900))}
.lg-on-green{--lg-shape:var(--n-0);--lg-ink:var(--n-900)}
.lg-on-dark{--lg-shape:var(--green-500);--lg-ink:var(--n-0)}
.blobslot,.brushslot{display:block;line-height:0}
.blobslot svg,.brushslot svg{display:block;width:100%;height:100%}
.brushmark{overflow:visible}
/* --- Кнопки --- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);
min-height:var(--tap);padding:0 var(--sp-12);
font-family:var(--font-display);font-size:var(--fs-14);font-weight:800;
letter-spacing:.02em;line-height:1;
border:var(--bw-btn) solid transparent;border-radius:var(--r);
transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
white-space:nowrap;
}
.btn-primary{background:var(--bg-brand);color:var(--text-on-brand);border-color:var(--bg-brand)}
.btn-primary:hover{background:var(--bg-inverse);color:var(--green-500);border-color:var(--bg-inverse)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border-ink)}
.btn-secondary:hover{background:var(--bg-inverse);color:var(--text-inverse)}
.btn-ghost{color:var(--text-secondary);padding:0 var(--sp-6);border-color:transparent}
.btn-ghost:hover{color:var(--text)}
.btn-white{background:var(--n-0);color:var(--n-900);border-color:var(--n-0)}
.btn-white:hover{background:var(--bg-brand);border-color:var(--bg-brand)}
.btn-danger{background:var(--red-500);color:var(--text-inverse);border-color:var(--red-500)}
.btn-danger:hover{background:var(--red-700);border-color:var(--red-700)}
.btn-sm{min-height:var(--tap-dense);padding:0 var(--sp-8);font-size:var(--fs-13)}
.btn-xs{min-height:var(--tap-micro);padding:0 var(--sp-5);font-size:var(--fs-12)}
.btn-lg{min-height:56px;padding:0 var(--sp-20);font-size:var(--fs-15)}
.btn-block{display:flex;width:100%}
/* Компактная «плюс»-кнопка в списках: повтор закупки, допродажа, мобильный хотспот */
.btn-add{margin-left:auto;min-height:var(--tap-micro);padding:0 var(--sp-5);font-size:var(--fs-13)}
.btn[disabled],.btn.is-disabled{background:var(--n-100)!important;color:var(--n-400)!important;
border-color:var(--n-200)!important;cursor:not-allowed}
/* --- Бейджи --- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-3);
font-family:var(--font-display);font-size:var(--fs-11);font-weight:800;
letter-spacing:.13em;text-transform:uppercase;padding:var(--sp-3) var(--sp-5);
line-height:1;white-space:nowrap;border-radius:var(--r)}
.badge-new{background:var(--bg-brand);color:var(--text-on-brand)}
.badge-sale{background:var(--bg-sale);color:var(--text-inverse)}
.badge-hit{background:var(--bg-inverse);color:var(--text-inverse)}
.badge-loyalty{background:var(--pink-500);color:var(--text-on-brand)}
.badge-ua{background:var(--n-0);color:var(--n-700);border:var(--bw-hair) solid var(--border-ink)}
.badge-wait-solid{background:var(--amber-700);color:var(--text-inverse)}
.badge-stock{background:transparent;color:var(--text-stock);text-transform:none;
letter-spacing:.01em;font-size:var(--fs-12);font-weight:600;padding:0}
.badge-wait{background:transparent;color:var(--text-wait);text-transform:none;
letter-spacing:.01em;font-size:var(--fs-12);font-weight:600;padding:0}
/* --- Цена --- */
.price{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap}
.price .now{font-family:var(--font-display);font-size:var(--fs-23);font-weight:800;
letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.price .now.lg{font-size:var(--fs-34)}
.price .was{font-size:var(--fs-13);color:var(--text-muted);text-decoration:line-through;
font-variant-numeric:tabular-nums}
.price .off{font-size:var(--fs-11);font-weight:800;color:var(--text-inverse);
background:var(--bg-sale);padding:var(--sp-1) var(--sp-3);
font-variant-numeric:tabular-nums;letter-spacing:.04em}
.price .sale{color:var(--text-sale)}
.price .personal{color:var(--text-loyalty)}
.unit{font-size:var(--fs-12);color:var(--text-muted);font-variant-numeric:tabular-nums}
.personal{display:inline-flex;align-items:center;gap:var(--sp-3);
background:var(--bg-loyalty);border-left:var(--bw-accent) solid var(--pink-500);
padding:var(--sp-3) var(--sp-5);font-size:var(--fs-12);font-weight:600;
color:var(--text-loyalty);font-variant-numeric:tabular-nums}
/* --- Рейтинг --- */
.rating{display:inline-flex;align-items:center;gap:var(--sp-3)}
.stars{display:inline-flex;gap:1px}
.stars svg{width:13px;height:13px;display:block}
.rating .cnt{font-size:var(--fs-12);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.rating-empty{font-size:var(--fs-12);color:var(--text-muted)}
.rating-input .stars svg{width:30px;height:30px;cursor:pointer;transition:transform var(--dur-fast)}
.rating-input .stars svg:hover{transform:scale(1.15)}
/* --- Карточка товара --- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-16) var(--sp-12)}
@media(max-width:1024px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.pgrid{grid-template-columns:repeat(2,1fr);gap:var(--sp-12) var(--sp-8)}}
.pcard{display:flex;flex-direction:column;position:relative}
.pcard .media{position:relative;aspect-ratio:1;background:var(--bg-media);
display:grid;place-items:center;overflow:hidden;
border:var(--bw-hair) solid var(--border);transition:border-color var(--dur) var(--ease)}
.pcard .media .blobbg{position:absolute;width:88%;height:88%;left:6%;top:10%;
--lg-shape:var(--green-100);transition:opacity var(--dur) var(--ease)}
.pcard:hover .media .blobbg{--lg-shape:var(--green-200)}
.pcard .media .ph{position:relative;font-size:52px;opacity:.32;z-index:var(--z-media)}
.pcard .media .ph.photo{opacity:1;width:80%;height:80%;padding:4%}
.pcard .media .ph.photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pcard .flags{position:absolute;top:0;left:0;display:flex;flex-direction:column;
align-items:flex-start;z-index:3}
.pcard .fav{position:absolute;top:var(--sp-3);right:var(--sp-3);
width:var(--tap);height:var(--tap);display:grid;place-items:center;
color:var(--n-500);z-index:3;font-size:var(--fs-17);transition:color var(--dur)}
.pcard .fav:hover,.pcard .fav[aria-pressed=true]{color:var(--red-500)}
.pcard .qv{position:absolute;left:0;right:0;bottom:0;z-index:3;opacity:0;
transform:translateY(100%);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pcard:hover .qv{opacity:1;transform:none}
@media(max-width:960px){.pcard .qv{display:none}}
.pcard .dots{position:absolute;bottom:var(--sp-6);left:0;right:0;display:flex;
justify-content:center;gap:var(--sp-2);z-index:var(--z-media);transition:opacity var(--dur)}
.pcard:hover .dots{opacity:0}
.pcard .dots i{width:5px;height:5px;background:var(--border-strong)}
.pcard .dots i.on{background:var(--n-900);width:14px}
.pcard .body{padding:var(--sp-10) var(--sp-10) var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-4);flex:1}
.pcard .brand{font-family:var(--font-display);font-size:var(--fs-11);font-weight:800;
letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.pcard .name{font-size:var(--fs-14);font-weight:400;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.pcard:hover .name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pcard .foot{margin-top:auto;padding-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-5)}
/* --- Характеристики с точечными выносками --- */
.attrs{font-size:var(--fs-12);color:var(--text-secondary);display:flex;flex-direction:column;gap:var(--sp-1)}
.attrs div{display:flex;gap:var(--sp-3);align-items:baseline}
.attrs dt{color:var(--text-muted);white-space:nowrap}
.attrs .dot{flex:1;border-bottom:1px dotted var(--border-strong);transform:translateY(-3px)}
.attrs dd{font-weight:500;white-space:nowrap}
/* --- Поля ввода --- */
.field{display:flex;flex-direction:column;gap:var(--sp-3)}
.field label{font-size:var(--fs-13);font-weight:600}
.field label .opt{font-weight:400;color:var(--text-muted)}
.input{min-height:var(--tap);padding:0 var(--sp-8);
border:var(--bw-hair) solid var(--border-field);border-radius:var(--r);
background:var(--n-0);font-size:var(--fs-15);width:100%;
transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.input::placeholder{color:var(--text-muted)}
.input:hover{border-color:var(--n-500)}
.input:focus{outline:none;border-color:var(--border-ink);box-shadow:inset 0 0 0 1px var(--border-ink)}
.input[disabled]{background:var(--bg-subtle);color:var(--n-400);cursor:not-allowed}
textarea.input{padding:var(--sp-6) var(--sp-8);min-height:96px;resize:vertical;line-height:var(--lh-base)}
select.input{appearance:none;padding-right:var(--sp-20);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6270' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right var(--sp-7) center}
.field.is-error .input{border-color:var(--red-500)}
.field.is-success .input{border-color:var(--emerald-600)}
.hint{font-size:var(--fs-12);color:var(--text-secondary)}
.hint.err{color:var(--red-700);display:flex;gap:var(--sp-3);align-items:flex-start}
.hint.ok{color:var(--emerald-700)}
/* --- Чекбокс и радио --- */
.check{display:flex;align-items:center;gap:var(--sp-5);min-height:var(--tap);
cursor:pointer;font-size:var(--fs-14);user-select:none}
.check input{appearance:none;width:20px;height:20px;flex:0 0 20px;
border:var(--bw-hair) solid var(--border-field);background:var(--n-0);
transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);position:relative}
.check input[type=radio]{border-radius:var(--r-circle)}
.check input:checked{background:var(--bg-brand);border-color:var(--green-700)}
.check input:checked::after{content:'';position:absolute;inset:0;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' stroke='%230E0E0E' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.check input[type=radio]:checked::after{background:var(--n-900);border-radius:var(--r-circle);inset:5px}
.check:hover input{border-color:var(--n-500)}
.check .cnt{margin-left:auto;color:var(--text-muted);font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.check.is-empty{opacity:.45;cursor:not-allowed}
/* --- Счётчик количества --- */
.qty{display:inline-flex;align-items:center;border:var(--bw-hair) solid var(--border-ink);height:var(--tap-dense)}
.qty.lg{height:var(--tap)}
.qty button{width:var(--tap-micro);height:100%;display:grid;place-items:center;font-size:var(--fs-17)}
.qty button:hover{background:var(--bg-inverse);color:var(--text-inverse)}
.qty input{width:38px;height:100%;border:none;text-align:center;font-size:var(--fs-14);
font-weight:700;font-variant-numeric:tabular-nums;background:none}
.qty input:focus{outline:none}
/* --- Свотчи цвета --- */
.swatch-row{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.cswatch{background:var(--sw,transparent);
width:var(--tap-dense);height:var(--tap-dense);border-radius:var(--r-circle);
border:var(--bw-strong) solid transparent;box-shadow:0 0 0 1px var(--border-strong);
cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.cswatch:hover{transform:scale(1.08)}
.cswatch[aria-pressed=true]{border-color:var(--n-0);box-shadow:0 0 0 2px var(--border-ink)}
/* --- Чипсы применённых фильтров --- */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.chip{display:inline-flex;align-items:center;gap:var(--sp-4);height:var(--tap-dense);
padding:0 var(--sp-3) 0 var(--sp-6);background:var(--bg-brand-soft);
border:var(--bw-hair) solid var(--green-400);font-size:var(--fs-13);font-weight:500}
.chip button{width:24px;height:24px;display:grid;place-items:center;
color:var(--text-secondary);font-size:var(--fs-15);line-height:1}
.chip button:hover{background:var(--alpha-k-12);color:var(--n-900)}
.chip-reset{height:var(--tap-dense);padding:0 var(--sp-6);font-size:var(--fs-13);font-weight:600;
color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px}
.chip-reset:hover{color:var(--n-900)}
/* --- Табы --- */
.tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:var(--bw-hair) solid var(--border)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{min-height:var(--tap);padding:0 var(--sp-10);font-family:var(--font-display);
font-size:var(--fs-13);font-weight:700;color:var(--text-muted);
border-bottom:var(--bw-strong) solid transparent;white-space:nowrap;
margin-bottom:-1px;transition:color var(--dur),border-color var(--dur)}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--text);border-bottom-color:var(--green-500)}
/* --- Якорная навигация карточки товара --- */
.anchors{display:flex;border-bottom:var(--bw-hair) solid var(--border);
overflow-x:auto;scrollbar-width:none;background:var(--n-0)}
.anchors::-webkit-scrollbar{display:none}
.anchors a{padding:0 var(--sp-10);min-height:52px;display:inline-flex;align-items:center;
font-family:var(--font-display);font-size:var(--fs-14);font-weight:700;
color:var(--text-secondary);border-bottom:var(--bw-accent) solid transparent;
white-space:nowrap;transition:color var(--dur),border-color var(--dur)}
.anchors a:hover{color:var(--text)}
.anchors a.on{color:var(--n-900);border-bottom-color:var(--green-500)}
/* --- Хлебные крошки --- */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
font-size:var(--fs-13);color:var(--text-secondary)}
.crumbs a:hover{color:var(--n-900);text-decoration:underline}
.crumbs .sep{color:var(--border-strong)}
.crumbs .cur{color:var(--text);font-weight:500}
/* --- Пагинация --- */
.pager{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.pager a,.pager span{min-width:var(--tap);height:var(--tap);display:grid;place-items:center;
font-size:var(--fs-14);font-weight:600;font-variant-numeric:tabular-nums;padding:0 var(--sp-4)}
.pager a:hover{background:var(--n-100)}
.pager .on{background:var(--bg-brand);color:var(--text-on-brand)}
.pager .gap{color:var(--text-muted);min-width:26px}
/* --- Модалки --- */
.overlay{position:fixed;inset:0;background:var(--bg-scrim);backdrop-filter:blur(3px);
z-index:var(--z-overlay);display:none;align-items:flex-start;justify-content:center;
padding:var(--sp-16) var(--sp-8);overflow-y:auto}
.overlay.open{display:flex}
.modal{background:var(--n-0);box-shadow:var(--sh-xl);width:100%;max-width:480px;
overflow:hidden;animation:pop var(--dur) var(--ease)}
.modal.wide{max-width:760px}
@keyframes pop{from{opacity:0;transform:translateY(-14px)}}
.modal .mh{padding:var(--sp-10) var(--sp-12);border-bottom:var(--bw-strong) solid var(--border-ink);
display:flex;justify-content:space-between;align-items:center;gap:var(--sp-8)}
.modal .mh h3{font-family:var(--font-display);font-size:var(--fs-21);font-weight:800;letter-spacing:var(--ls-tight)}
.modal .mb{padding:var(--sp-12);display:flex;flex-direction:column;gap:var(--sp-10)}
.modal .mf{padding:var(--sp-8) var(--sp-12) var(--sp-12);display:flex;gap:var(--sp-6);flex-wrap:wrap}
.close{width:var(--tap);height:var(--tap);display:grid;place-items:center;
color:var(--text-secondary);font-size:var(--fs-23);margin:calc(var(--sp-4)*-1) calc(var(--sp-6)*-1) calc(var(--sp-4)*-1) 0}
.close:hover{color:var(--n-900)}
/* --- Строка корзины --- */
.cartline{display:grid;grid-template-columns:60px 1fr auto;gap:var(--sp-8);
padding:var(--sp-8) 0;border-bottom:var(--bw-hair) solid var(--border);align-items:start}
/* На узком экране цена уходит под название — иначе колонка «auto»
сдавливает счётчик количества и кнопку удаления */
@media(max-width:520px){
.cartline{grid-template-columns:52px minmax(0,1fr)}
.cartline .th{width:52px;height:52px;font-size:var(--fs-21)}
.cartline .sum{grid-column:2/-1;text-align:left;margin-top:var(--sp-4)}
}
.cartline .th{width:60px;height:60px;background:var(--bg-brand-soft);display:grid;place-items:center;font-size:var(--fs-25)}
.cartline .nm{font-size:var(--fs-13);line-height:1.4;margin-bottom:var(--sp-3)}
.cartline .rm{font-size:var(--fs-12);color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.cartline .rm:hover{color:var(--red-700)}
.cartline .sum{font-family:var(--font-display);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.sumline{display:flex;justify-content:space-between;font-size:var(--fs-14);padding:var(--sp-3) 0}
.sumline .v{font-variant-numeric:tabular-nums;font-weight:600}
.sumline.disc .v{color:var(--text-loyalty)}
.sumline.total{font-family:var(--font-display);font-size:var(--fs-21);font-weight:800;
padding-top:var(--sp-8);margin-top:var(--sp-4);
border-top:var(--bw-strong) solid var(--border-ink);letter-spacing:var(--ls-tight)}
/* --- Тосты --- */
.toasts{position:fixed;right:var(--sp-10);bottom:var(--sp-40);z-index:var(--z-toast);
display:flex;flex-direction:column;gap:var(--sp-4);max-width:min(380px,calc(100vw - 40px))}
.toast{display:flex;gap:var(--sp-6);align-items:flex-start;background:var(--bg-inverse);
color:var(--text-inverse);border-left:var(--bw-btn) solid var(--green-500);
box-shadow:var(--sh-lg);padding:var(--sp-8);animation:slidein .22s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateX(26px)}}
.toast.info{border-left-color:var(--blue-500)}
.toast.err{border-left-color:var(--red-500)}
.toast .tt{font-size:var(--fs-14);font-weight:700;margin-bottom:var(--sp-1)}
.toast .td{font-size:var(--fs-13);color:var(--on-dark)}
/* --- Мобильная панель --- */
.msheet{position:fixed;inset:0;z-index:var(--z-sheet);background:var(--n-0);
display:none;flex-direction:column;overflow-y:auto}
.msheet.open{display:flex}
.msheet .mh{position:sticky;top:0;background:var(--n-0);
border-bottom:var(--bw-strong) solid var(--border-ink);padding:var(--sp-8);
display:flex;justify-content:space-between;align-items:center}
.msheet .ml a{display:flex;align-items:center;gap:var(--sp-7);padding:0 var(--sp-10);
min-height:56px;font-size:var(--fs-15);font-weight:500;border-bottom:var(--bw-hair) solid var(--n-100)}
.msheet .ml a .ic{font-size:var(--fs-19);width:26px;text-align:center}
.msheet .ml a .ch{margin-left:auto;color:var(--n-400)}
/* ============================================================================
5. УТИЛИТЫ И СОСТОЯНИЯ
============================================================================ */
/* Гость / авторизованный мастер — переключается в демо-панели */
body:not(.master) .master-only{display:none!important}
body.master .guest-only{display:none!important}
.stack{display:flex;flex-direction:column;gap:var(--sp-6)}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16)}
@media(max-width:768px){.grid2{grid-template-columns:1fr}}
.hairline{border-top:var(--bw-hair) solid var(--border)}
.mt-auto{margin-top:auto}
/* ============================================================================
ДЕМО-ПАНЕЛЬ — сбоку, а не снизу.
Снизу она конфликтовала с таб-баром, панелью покупки и кнопкой оформления.
Сворачивается, чтобы не мешать смотреть макет.
============================================================================ */
.devbar{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:var(--z-dev);
background:var(--bg-inverse);color:var(--text-inverse);box-shadow:var(--sh-xl);
display:flex;align-items:stretch;font-size:var(--fs-12);
transition:transform var(--dur) var(--ease)}
.devbar.hid{transform:translateY(-50%) translateX(calc(100% - 30px))}
.devbar .tg{width:30px;flex:0 0 30px;background:var(--green-500);color:var(--text-on-brand);
display:grid;place-items:center;cursor:pointer;border-right:var(--bw-hair) solid var(--border-dark)}
.devbar .tg span{writing-mode:vertical-rl;transform:rotate(180deg);
font-family:var(--font-display);font-size:var(--fs-11);font-weight:800;
letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap}
.devbar .body{padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-8);min-width:186px}
.devbar b{font-family:var(--font-display);font-size:var(--fs-11);letter-spacing:var(--ls-caps);
text-transform:uppercase;color:var(--green-500);display:block}
.devbar .seg{display:flex;flex-direction:column;gap:1px}
.devbar .seg button{padding:var(--sp-5) var(--sp-6);font-size:var(--fs-12);font-weight:700;
color:var(--on-dark);background:var(--alpha-w-08);text-align:left;min-height:var(--tap-micro)}
.devbar .seg button.on{background:var(--bg-brand);color:var(--text-on-brand)}
.devbar .nav{display:flex;flex-direction:column;gap:1px;
border-top:var(--bw-hair) solid var(--border-dark);padding-top:var(--sp-8)}
.devbar .nav a{color:var(--on-dark);font-size:var(--fs-12);padding:var(--sp-3) var(--sp-6);
min-height:var(--tap-micro);display:flex;align-items:center}
.devbar .nav a:hover{color:var(--text-inverse);background:var(--alpha-w-08)}
.devbar .nav a.on{color:var(--green-500);font-weight:700}
@media(max-width:768px){
.devbar{top:auto;bottom:calc(58px + var(--sp-8));transform:none}
.devbar.hid{transform:translateX(calc(100% - 30px))}
.devbar .body{min-width:164px;padding:var(--sp-6)}
}
/* ============================================================================
6. КАРКАС СТРАНИЦЫ — шапка, мега-меню, футер, преимущества, бренды
Общие для всех страниц макета
============================================================================ */
.topline{background:var(--n-900);color:var(--n-0);font-size:12.5px;letter-spacing:.01em}
.topline .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:40px}
.topline .links{display:flex;gap:var(--sp-5);align-items:center;color:var(--on-dark)}
.topline .links a:hover{color:var(--n-0)}
.topline .lang{display:flex;gap:1px}
.topline .lang button{padding:4px 9px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--on-dark);border-bottom:2px solid transparent}
.topline .lang button.on{color:var(--n-0);border-bottom-color:var(--green-500)}
@media(max-width:900px){.topline .links a{display:none}}
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.hbar{display:flex;align-items:center;gap:var(--sp-6);min-height:88px}
.searchbox{flex:1;position:relative;min-width:0;z-index:calc(var(--z-sticky) + 6)}
.searchbox input{width:100%;min-height:48px;padding:0 52px 0 var(--sp-4);
border:none;border-bottom:2px solid var(--n-900);background:transparent;font-size:15px;
transition:border-color var(--dur)}
.searchbox input::placeholder{color:var(--text-muted)}
.searchbox input:focus{outline:none;border-bottom-color:var(--green-500)}
.searchbox .go{position:absolute;right:0;top:2px;width:44px;height:44px;display:grid;place-items:center;font-size:17px}
.searchbox .go:hover{color:var(--green-800)}
.hicon{position:relative;min-width:var(--tap);height:var(--tap);display:grid;place-items:center;font-size:18px;color:var(--n-700)}
.hicon:hover{color:var(--n-900)}
.hicon .cnt{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;
background:var(--n-900);color:var(--n-0);font-size:10.5px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.hcart{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 var(--sp-5);
background:var(--green-500);color:var(--n-900);font-family:var(--font-display);font-weight:800;font-size:14px;
letter-spacing:.01em;transition:background var(--dur)}
.hcart:hover{background:var(--n-900);color:var(--green-500)}
.burger,.burger[data-ic]{display:none;min-width:var(--tap);height:var(--tap);place-items:center;font-size:19px}
/* ============================================================================
ШАПКА НА ПЛАНШЕТІ Й ТЕЛЕФОНІ — один ряд
Було: пошук переносився на другий рядок, шапка займала ~170px липкої висоти.
Стало: 60px, пошук відкривається шторкою на весь екран.
============================================================================ */
@media(max-width:960px){
.burger,.burger[data-ic]{display:grid}
.hbar{min-height:60px;gap:var(--sp-4);flex-wrap:nowrap;padding-bottom:0}
.lg{height:38px}
.hcart .lbl{display:none}
.hicon.wish{display:none}
.searchbox{flex:0 0 auto;order:0;margin-left:auto}
.searchbox input{display:none}
.searchbox .sdrop{display:none!important}
.searchbox .go{position:static;width:var(--tap);height:var(--tap);
display:grid;place-items:center;color:var(--text)}
.hcart{padding:0 var(--sp-6);gap:var(--sp-4)}
.topline .wrap{min-height:34px;justify-content:center;text-align:center}
.topline .links{display:none}
}
@media(max-width:400px){
.hbar{gap:var(--sp-3)}
.lg{height:32px}
.hcart{font-size:var(--fs-13);padding:0 var(--sp-5)}
}
/* ============================================================================
ШТОРКА ПОШУКУ — повний екран, підказки і популярні запити
============================================================================ */
.searchsheet{position:fixed;inset:0;z-index:var(--z-sheet);background:var(--n-0);
display:none;flex-direction:column}
.searchsheet.open{display:flex}
.ss-head{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-6) var(--sp-8);
border-bottom:var(--bw-strong) solid var(--border-ink);position:sticky;top:0;background:var(--n-0)}
.ss-head .fld{flex:1;display:flex;align-items:center;gap:var(--sp-5);
border:var(--bw-hair) solid var(--border-field);min-height:var(--tap);padding:0 var(--sp-6)}
.ss-head .fld svg.ic{font-size:19px;color:var(--text-muted);flex:0 0 auto}
.ss-head .fld input{flex:1;min-width:0;border:none;background:none;
font-size:var(--fs-16);min-height:var(--tap)}
.ss-head .fld input:focus{outline:none}
.ss-head .fld .clr{color:var(--text-muted);width:var(--tap-micro);height:var(--tap-micro);display:none}
.ss-head .fld .clr.on{display:grid;place-items:center}
.ss-head .cancel{font-size:var(--fs-14);font-weight:600;color:var(--text-secondary);
min-height:var(--tap);padding:0 var(--sp-4);white-space:nowrap}
.ss-body{flex:1;overflow-y:auto}
.ss-body .sdrop{position:static;border:none;box-shadow:none;display:block;max-height:none}
.ss-hint{padding:var(--sp-12) var(--sp-8)}
.ss-hint h5{font-family:var(--font-display);font-size:var(--fs-11);font-weight:800;
letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-6)}
.ss-chips{display:flex;flex-wrap:wrap;gap:0;margin-bottom:var(--sp-16)}
.ss-chips button{border:var(--bw-hair) solid var(--border-strong);margin:-1px 0 0 -1px;
padding:var(--sp-5) var(--sp-8);font-size:var(--fs-14);min-height:var(--tap);
display:inline-flex;align-items:center;gap:var(--sp-4)}
.ss-chips button:active{background:var(--bg-inverse);color:var(--text-inverse)}
.ss-chips button svg.ic{font-size:15px;color:var(--text-muted)}
.navbar{border-top:var(--bw-hair) solid var(--border)}
.navbar .wrap{display:flex;align-items:center;gap:var(--sp-2)}
.catbtn{display:inline-flex;align-items:center;gap:11px;min-height:52px;padding:0 var(--sp-6);
background:var(--n-900);color:var(--n-0);font-family:var(--font-display);font-weight:800;font-size:var(--fs-14);letter-spacing:.02em}
.navbar .links{display:flex;overflow-x:auto;scrollbar-width:none}
.navbar .links::-webkit-scrollbar{display:none}
.navbar .links a{min-height:52px;display:inline-flex;align-items:center;padding:0 var(--sp-5);
font-size:var(--fs-14);font-weight:500;color:var(--text-secondary);white-space:nowrap;border-bottom:var(--bw-strong) solid transparent}
.navbar .links a:hover{color:var(--n-900)}
.navbar .links a.hot{color:var(--red-700);font-weight:600}
@media(max-width:960px){.navbar{display:none}}
.megapanel{position:absolute;left:0;right:0;background:var(--n-0);border-bottom:var(--bw-hair) solid var(--n-900);box-shadow:var(--sh-lg);display:none;z-index:70}
.megapanel.open{display:block}
.megapanel .inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:280px 1fr}
.megacats{border-right:1px solid var(--border);padding:var(--sp-3) 0}
.megacats button{display:flex;align-items:center;gap:13px;width:100%;padding:0 var(--sp-6);min-height:48px;
text-align:left;font-size:14.5px;font-weight:500;border-left:3px solid transparent;transition:all var(--dur)}
.megacats button .ic{width:24px;font-size:17px;text-align:center;flex:0 0 24px}
.megacats button:hover{background:var(--n-50)}
.megacats button.on{border-left-color:var(--green-500);font-weight:800;background:var(--green-100)}
.megacols{padding:var(--sp-8);display:none;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-8);align-content:start}
.megacols.on{display:grid}
.megacols h5{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
margin-bottom:11px;padding-bottom:8px;border-bottom:2px solid var(--n-900)}
.megacols li a{font-size:13.5px;color:var(--text-secondary);padding:5px 0;display:block}
.megacols li a:hover{color:var(--n-900)}
.megabrands{grid-column:1/-1;border-top:1px solid var(--border);padding-top:var(--sp-5)}
.megabrands .bl{display:flex;flex-wrap:wrap;gap:0;margin-top:11px}
.megabrands .bl a{border:1px solid var(--border-strong);padding:8px 15px;font-size:13px;font-weight:500;margin:-1px 0 0 -1px}
.megabrands .bl a:hover{background:var(--n-900);color:var(--n-0);border-color:var(--n-900);position:relative;z-index:2}
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.usp .u{background:var(--n-0);padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.usp .u .n{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--green-800)}
.usp .u b{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.usp .u span{font-size:13.5px;color:var(--text-secondary);line-height:1.5}
@media(max-width:900px){.usp{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.usp{grid-template-columns:1fr}}
.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
@media(max-width:900px){.brands{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.brands{grid-template-columns:repeat(2,1fr)}}
.brand-c{border:1px solid var(--border);margin:-1px 0 0 -1px;min-height:96px;display:grid;place-items:center;
font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--n-600);transition:all var(--dur)}
.brand-c:hover{background:var(--n-900);color:var(--green-500);border-color:var(--n-900);position:relative;z-index:2}
footer{background:var(--n-900);color:var(--on-dark);padding:var(--sp-20) 0 var(--sp-8);position:relative;overflow:hidden}
footer .brushdeco{position:absolute;left:-120px;bottom:-140px;width:620px;opacity:.13;pointer-events:none}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-10);margin-bottom:var(--sp-12);position:relative;z-index:2}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
footer h4{font-family:var(--font-display);color:var(--n-0);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--sp-5)}
footer li{margin-bottom:10px;font-size:14px}
footer a:hover{color:var(--n-0)}
footer .contact b{color:var(--n-0);font-family:var(--font-display);font-size:24px;font-weight:800;display:block;margin-bottom:5px;letter-spacing:-.02em}
.fbot{border-top:1px solid var(--border-dark);padding-top:var(--sp-6);display:flex;justify-content:space-between;gap:var(--sp-4);font-size:12.5px;flex-wrap:wrap;position:relative;z-index:2}
.social{display:flex;gap:1px;margin-top:var(--sp-5)}
.social a{width:var(--tap);height:var(--tap);background:rgba(255,255,255,.07);display:grid;place-items:center;font-size:16px}
.social a:hover{background:var(--green-500);color:var(--n-900)}
/* ============================================================================
7. НАВИГАЦИЯ — адаптивная
Desktop ≥993: мега-меню. Tablet 577–992 и mobile ≤576: панель с drill-down
+ нижняя таб-панель (NN/g: скрытая навигация теряет >20% обнаруживаемости)
============================================================================ */
/* --- Компактная шапка при скролле --- */
header{transition:transform var(--dur) var(--ease)}
header.compact .hbar{min-height:64px}
header.compact .lg{height:44px}
@media(max-width:960px){
header.compact .hbar{min-height:56px}
header.compact .lg{height:36px}
header.hidden{transform:translateY(-100%)}
}
/* --- Счётчики в мега-меню --- */
.megacats button .cnt{margin-left:auto;font-size:var(--fs-11);color:var(--text-muted)}
.megacats button.on .cnt{color:var(--text-secondary)}
.megacols li a{display:flex;align-items:baseline;gap:var(--sp-4);justify-content:space-between}
.megacols li a .n{font-size:var(--fs-11);color:var(--text-muted);font-variant-numeric:tabular-nums}
.megacols li a:hover .n{color:var(--text-secondary)}
.hint-inline{font-weight:400;color:var(--text-muted);font-size:var(--fs-12);letter-spacing:0;text-transform:none}
/* --- Подсветка текущего раздела (Baymard: 66% сайтов не делают) --- */
.navbar .links a.on{color:var(--text);font-weight:600}
/* ============================================================================
Мобильная панель каталога с drill-down
============================================================================ */
.navsheet{position:fixed;inset:0;z-index:var(--z-sheet);background:var(--n-0);
display:none;flex-direction:column}
.navsheet.open{display:flex}
.nshead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);
padding:var(--sp-8);border-bottom:var(--bw-strong) solid var(--border-ink);
position:sticky;top:0;background:var(--n-0);z-index:2}
.nstitle{font-family:var(--font-display);font-weight:800;font-size:var(--fs-19);
letter-spacing:var(--ls-tight)}
.nsbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nspanel{display:none}
.nspanel.on{display:block;animation:nsin .18s var(--ease)}
@keyframes nsin{from{opacity:0;transform:translateX(12px)}}
.nsrow{display:flex;align-items:center;gap:var(--sp-7);width:100%;text-align:left;
padding:0 var(--sp-8);min-height:60px;border-bottom:var(--bw-hair) solid var(--n-100);
font-size:var(--fs-15);font-weight:500}
.nsrow:active{background:var(--bg-subtle)}
.nsrow .ic{font-size:var(--fs-21);width:28px;flex:0 0 28px;text-align:center}
.nsrow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nsrow .t .n{font-size:var(--fs-12);color:var(--text-muted);font-weight:400}
.nsrow .ch{color:var(--n-400);font-size:var(--fs-21);line-height:1}
.nsrow.hot{color:var(--text-sale);font-weight:600}
.nsback{display:flex;align-items:center;gap:var(--sp-5);width:100%;text-align:left;
padding:0 var(--sp-8);min-height:52px;background:var(--bg-subtle);
font-size:var(--fs-14);font-weight:600;color:var(--text-secondary);
border-bottom:var(--bw-hair) solid var(--border)}
.nsback span{font-size:var(--fs-21);line-height:1}
.nsall{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
padding:0 var(--sp-8);min-height:56px;background:var(--bg-brand-soft);
font-size:var(--fs-15);font-weight:700;border-bottom:var(--bw-hair) solid var(--green-400)}
.nsgroup{padding:var(--sp-10) 0 var(--sp-4)}
.nsgroup h4{font-family:var(--font-display);font-size:var(--fs-12);font-weight:800;
letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);
padding:0 var(--sp-8) var(--sp-5)}
.nsitem{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
padding:0 var(--sp-8);min-height:52px;font-size:var(--fs-15);
border-bottom:var(--bw-hair) solid var(--n-100)}
.nsitem:active{background:var(--bg-subtle)}
.nsitem .n{font-size:var(--fs-12);color:var(--text-muted);font-variant-numeric:tabular-nums}
.nsbrands{display:flex;flex-wrap:wrap;gap:0;padding:0 var(--sp-8)}
.nsbrands a{border:var(--bw-hair) solid var(--border-strong);margin:-1px 0 0 -1px;
padding:var(--sp-5) var(--sp-8);font-size:var(--fs-13);font-weight:500;min-height:var(--tap);
display:inline-flex;align-items:center}
.nsbrands a:active{background:var(--bg-inverse);color:var(--text-inverse)}
.nsdiv{height:var(--sp-4);background:var(--bg-subtle);border-top:var(--bw-hair) solid var(--border);
border-bottom:var(--bw-hair) solid var(--border)}
.nsfoot{padding:var(--sp-12) var(--sp-8) var(--sp-32);display:flex;flex-direction:column;gap:var(--sp-3)}
.nsfoot span{font-size:var(--fs-13);color:var(--text-muted)}
.nsfoot a{font-family:var(--font-display);font-weight:800;font-size:var(--fs-21)}
/* ============================================================================
Нижняя таб-панель — только мобильный
============================================================================ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
background:var(--n-0);border-top:var(--bw-hair) solid var(--border);
display:none;box-shadow:0 -4px 16px -8px rgba(14,14,14,.18)}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:var(--sp-1);min-height:58px;padding:var(--sp-4) var(--sp-2);
color:var(--text-muted);font-size:var(--fs-11);font-weight:600}
.tabbar .ic{font-size:var(--fs-19);line-height:1;position:relative}
.tabbar .ic .b{position:absolute;top:-6px;left:11px;min-width:16px;height:16px;padding:0 4px;
background:var(--bg-brand);color:var(--text-on-brand);font-size:10px;font-style:normal;
font-weight:800;display:grid;place-items:center;line-height:1}
.tabbar a.on{color:var(--text)}
.tabbar a.on .ic{transform:translateY(-1px)}
.tabbar a.on::before{content:'';position:absolute;top:0;left:20%;right:20%;
height:var(--bw-strong);background:var(--green-500)}
.tabbar a{position:relative}
@media(max-width:960px){
.tabbar{display:flex}
body{padding-bottom:58px}
}
/* Если на странице уже есть своя нижняя панель — таб-бар уступает ей место */
@media(max-width:960px){
body:has(.buybar.show) .tabbar,
body:has(.cobar) .tabbar{display:none}
}
/* ============================================================================
8. ПОШУК — живі підказки (п. 7.4 ТЗ)
============================================================================ */
.searchbox{position:relative}
.sdrop{position:absolute;left:0;right:0;top:calc(100% + var(--sp-2));z-index:calc(var(--z-sticky) + 5);
background:var(--n-0);border:var(--bw-strong) solid var(--border-ink);
box-shadow:var(--sh-lg);max-height:min(70vh,560px);overflow-y:auto;display:none}
.sdrop.open{display:block}
@media(max-width:960px){.sdrop{max-height:60vh}}
.scorr{padding:var(--sp-6) var(--sp-8);background:var(--amber-50);color:var(--amber-700);
font-size:var(--fs-12);border-bottom:var(--bw-hair) solid var(--border)}
.sgrp{padding:var(--sp-6) 0;border-bottom:var(--bw-hair) solid var(--border)}
.sgrp:last-of-type{border-bottom:none}
.sgrp h5{font-family:var(--font-display);font-size:var(--fs-11);font-weight:800;
letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);
padding:0 var(--sp-8) var(--sp-4)}
.srow{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-5) var(--sp-8);
min-height:var(--tap);font-size:var(--fs-14)}
.srow:hover{background:var(--bg-brand-soft)}
.srow .ic{width:22px;flex:0 0 22px;text-align:center;color:var(--text-muted);font-size:var(--fs-13)}
.srow .th{width:38px;height:38px;flex:0 0 38px;background:var(--bg-brand-soft);
display:grid;place-items:center;font-size:var(--fs-19)}
.srow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
overflow:hidden;text-overflow:ellipsis}
.srow .t .st{font-size:var(--fs-11);color:var(--text-stock)}
.srow .t .st.wait{color:var(--text-wait)}
.srow .n{font-size:var(--fs-12);color:var(--text-muted);font-variant-numeric:tabular-nums}
.srow .pr{font-family:var(--font-display);font-weight:800;font-size:var(--fs-14);
font-variant-numeric:tabular-nums;white-space:nowrap}
.srow .pr.sale{color:var(--text-sale)}
.sall{display:block;padding:var(--sp-8);text-align:center;font-family:var(--font-display);
font-weight:800;font-size:var(--fs-13);background:var(--bg-inverse);color:var(--text-inverse)}
.sall:hover{background:var(--green-500);color:var(--text-on-brand)}
.sempty{padding:var(--sp-12) var(--sp-8);text-align:center;font-size:var(--fs-14);color:var(--text-secondary)}
.sempty .sfix{margin-top:var(--sp-5);font-size:var(--fs-15);color:var(--text)}
.sempty .sfix a{font-weight:700;border-bottom:var(--bw-strong) solid var(--green-500)}
.sempty .sall{margin-top:var(--sp-10);margin-left:calc(var(--sp-8)*-1);margin-right:calc(var(--sp-8)*-1);
margin-bottom:calc(var(--sp-12)*-1)}
/* ============================================================================
9. ІКОНКИ — власний набір tonKAton
Розмір успадковується від font-size батька, колір — від currentColor.
Тому іконка завжди збігається з текстом поруч.
============================================================================ */
.ic svg,svg.ic{width:1em;height:1em;display:block;flex:0 0 auto;
stroke:currentColor;fill:none;vector-effect:non-scaling-stroke}
[data-ic]{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.ic-inline{display:inline-flex;vertical-align:-.14em;margin-right:.1em}
/* Розміри в контексті */
.hicon [data-ic],.hicon svg.ic{font-size:22px}
.hcart svg.ic{font-size:19px}
.burger{font-size:22px}
.searchbox .go{font-size:19px}
.tabbar .ic svg{font-size:22px}
.nsrow .ic svg,.megacats button .ic svg{font-size:21px}
.srow .ic svg{font-size:16px}
.srow .th svg{font-size:20px}
.close [data-ic],.close svg.ic{font-size:20px}
.toast .ti svg{font-size:19px}
.pcard .ph svg,.cartline .th svg,.coline .th svg,.ritem .th svg{font-size:1em}
.badge svg.ic,.badge [data-ic]{font-size:13px}
.trust .t .ic svg{font-size:19px}
.lknav a .ic svg{font-size:19px}
.order .items i svg{font-size:24px}
.social svg.ic{font-size:19px}
.slink svg.ic,.btn svg.ic{font-size:17px}
/* Обране: заливка замість підміни символу */
.fav svg.ic{transition:fill var(--dur) var(--ease)}
.fav[aria-pressed=true] svg.ic{fill:currentColor}
/* Плейсхолдер фото — іконка категорії великим кеглем */
.pcard .ph{display:grid;place-items:center}
.pcard .ph svg{font-size:56px;stroke-width:1.25}
.gal .stage .ph svg{font-size:118px;stroke-width:1}
/* ============================================================================
10. ДОПРОДАЖ У КОШИКУ (п. 9.1 ТЗ)
Компактні картки: клякса під іконкою, ціна і кнопка-плюс на всю висоту.
Розміщені перед кнопкою оформлення — це остання точка, де ще легко додати.
============================================================================ */
.upsell-head{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-6)}
.upsell-head .lbl{font-family:var(--font-display);font-weight:800;font-size:var(--fs-15);
letter-spacing:var(--ls-tight)}
.upsell-head .sub{font-size:var(--fs-12);color:var(--text-muted);margin-left:auto}
@media(max-width:576px){.upsell-head .sub{display:none}}
.upsell{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:576px){.upsell{grid-template-columns:1fr}}
.ucard{display:grid;grid-template-columns:56px minmax(0,1fr) var(--tap);
align-items:stretch;gap:var(--sp-5);border:var(--bw-hair) solid var(--border);
padding:var(--sp-4);transition:border-color var(--dur) var(--ease)}
.ucard:hover{border-color:var(--border-ink)}
.ucard .m{width:56px;height:56px;background:var(--bg-brand-soft);
display:grid;place-items:center;position:relative;overflow:hidden}
.ucard .m .blobslot{position:absolute;inset:-22%;--lg-shape:var(--n-0);opacity:.55}
.ucard .m svg.ic{position:relative;font-size:26px;stroke-width:1.5}
.ucard .txt{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-2);min-width:0}
.ucard .t{font-size:var(--fs-13);line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ucard .p{font-family:var(--font-display);font-weight:800;font-size:var(--fs-15);
font-variant-numeric:tabular-nums;line-height:1}
.ucard .add{width:var(--tap);background:var(--bg-brand);color:var(--text-on-brand);
display:grid;place-items:center;align-self:stretch;transition:background var(--dur) var(--ease)}
.ucard .add svg.ic{font-size:19px;stroke-width:2}
.ucard .add:hover{background:var(--bg-inverse);color:var(--green-500)}
.ucard.added{border-color:var(--green-500);background:var(--bg-brand-soft)}
.ucard.added .add{background:var(--emerald-600);color:var(--n-0)}
/* мініатюри галереї — реальні фото товару */
.gal .thumbs button{overflow:hidden;padding:6px}
.gal .thumbs button img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* скорочена шапка на оформленні замовлення */
.hdr-slim{border-bottom:1px solid var(--border);background:var(--n-0)}
.hdr-slim .hbar{min-height:72px;justify-content:space-between}
.hdr-slim .slim-note{font-size:var(--fs-13);color:var(--text-muted)}
@media(max-width:600px){.hdr-slim .slim-note{display:none}}
/* --- елементи спільної шапки/підвалу (були лише в inline-стилях головної) --- */
.hicons{display:flex;gap:var(--sp-1);align-items:center;flex:none}
.hicons .hcart{white-space:nowrap}
/* ============================================================================
НАБІР ДЕТАЛЬНО — картка комплекту
Ліворуч: композиція зі стрічкою фото (читається як «комплект»),
праворуч: посписковий склад із цінами. Унизу — підсумок і CTA.
============================================================================ */
.bundle{border:var(--bw-hair) solid var(--n-900);background:var(--n-0);margin:var(--sp-12) 0}
.bundle .bh{background:var(--n-900);color:var(--n-0);padding:var(--sp-8) var(--sp-8);
display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-8);flex-wrap:wrap}
.bundle .bh h2{color:var(--n-0);margin:var(--sp-4) 0 0;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.02em}
.bundle .bsub{font-size:var(--fs-14);color:rgba(255,255,255,.72);line-height:1.6;max-width:56ch;margin-top:var(--sp-3)}
.bundle .bh-price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.bundle .bh-price .now{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.4vw,40px);
line-height:1;color:var(--green-500);letter-spacing:-.03em}
.bundle .bh-price .was{font-size:var(--fs-14);color:rgba(255,255,255,.5);text-decoration:line-through}
.bundle .bh-price .eco{font-size:var(--fs-12);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n-0)}
.bundle .bb{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:900px){.bundle .bb{grid-template-columns:1fr}}
.bundle .bstack{background:var(--green-100);padding:var(--sp-10) var(--sp-8);
display:flex;flex-direction:column;justify-content:center;gap:var(--sp-8);
border-right:var(--bw-hair) solid var(--border)}
@media(max-width:900px){.bundle .bstack{border-right:0;border-bottom:var(--bw-hair) solid var(--border)}}
.bundle .bs-row{display:flex;align-items:flex-end;justify-content:center;min-height:190px}
.bundle .bs-i{width:88px;height:130px;background:var(--n-0);border:var(--bw-hair) solid var(--border);
display:grid;place-items:center;padding:9px;margin-left:-22px;
transform:rotate(calc((var(--i) - 3.5) * 2.2deg)) translateY(calc(var(--i) * 0px));
box-shadow:0 10px 24px rgba(17,17,17,.10);transition:transform var(--dur) var(--ease)}
.bundle .bs-i:first-child{margin-left:0}
.bundle .bs-i:hover{transform:rotate(0deg) translateY(-10px);z-index:5}
.bundle .bs-i img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bundle .bs-cap{text-align:center}
.bundle .bs-cap b{display:block;font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em}
.bundle .bs-cap span{font-size:var(--fs-13);color:var(--text-secondary)}
.bundle .blist{padding:var(--sp-6) var(--sp-8)}
.bundle .blist ol{list-style:none;margin:0;padding:0;counter-reset:kit}
.bundle .blist li{counter-increment:kit;display:grid;grid-template-columns:44px 1fr auto;
align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:var(--bw-hair) solid var(--border)}
.bundle .blist li:last-child{border-bottom:0}
.bundle .bl-th{width:44px;height:44px;background:var(--n-50);display:grid;place-items:center;padding:5px}
.bundle .bl-th img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bundle .bl-t{display:flex;flex-direction:column;min-width:0}
.bundle .bl-t b{font-size:var(--fs-13);font-weight:700}
.bundle .bl-t span{font-size:var(--fs-12);color:var(--text-secondary);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bundle .bl-p{font-family:var(--font-display);font-weight:700;font-size:var(--fs-14);white-space:nowrap}
.bundle .bsum{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
padding:var(--sp-6) var(--sp-8);border-top:var(--bw-hair) solid var(--border);background:var(--n-50)}
.bundle .bsum-note{font-size:var(--fs-13);color:var(--text-secondary);margin-right:auto}
@media(max-width:600px){.bundle .bsum .btn{width:100%}.bundle .bs-i{width:64px;height:96px;margin-left:-16px}}
/* ============================================================================
МІКРОАНІМАЦІЇ
Один прийом на весь сайт: фірмовий мазок «малюється» зліва направо
(clip-path від 100% до 0). Той самий рух — у логотипі, у картці товару
й у розкритті секцій. Усе вимикається при prefers-reduced-motion.
============================================================================ */
@media (prefers-reduced-motion: no-preference){
/* --- 1. Картка товару: мазок домальовується на ховері --- */
.pcard .media .brushmark{
clip-path:inset(0 100% 0 0);
transition:clip-path .62s cubic-bezier(.22,.61,.36,1);
}
.pcard:hover .media .brushmark,
.pcard:focus-within .media .brushmark{ clip-path:inset(0 0 0 0); }
/* фото трохи підводиться назустріч */
.pcard .media .ph.photo{ transition:transform .62s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.pcard:hover .media .ph.photo{ transform:scale(1.11); }
/* --- 2. Логотип у шапці: мазок малюється один раз при вході --- */
.logoslot.lg-draw .brushmark,
.logoslot.lg-draw svg .brush-layer{ animation:lgDraw .9s cubic-bezier(.22,.61,.36,1) both; }
.logoslot.lg-draw svg{ animation:lgDraw 1.05s cubic-bezier(.22,.61,.36,1) both; }
@keyframes lgDraw{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
/* --- 3. Поява блоків при скролі --- */
.rise{ opacity:0; transform:translateY(14px);
transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
transition-delay:var(--d,0ms); }
.rise.in{ opacity:1; transform:none; }
/* --- 4. Лічильник кошика реагує на додавання --- */
@keyframes cartPop{ 0%{transform:scale(1)} 35%{transform:scale(1.18)} 100%{transform:scale(1)} }
.hcart.pop{ animation:cartPop .42s cubic-bezier(.34,1.56,.64,1); }
/* --- 5. Кнопки й посилання --- */
.btn{ transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
transform .16s cubic-bezier(.34,1.56,.64,1); }
.btn:active{ transform:translateY(1px) scale(.99); }
.cat .arw{ transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.cat:hover .arw{ transform:translateX(5px); }
}
/* на сенсорних екранах ховера немає — мазок показуємо одразу */
@media (hover:none){ .pcard .media .brushmark{ clip-path:none !important; } }
/* ============================================================================
МІКРОАНІМАЦІЇ ПО ВСЬОМУ САЙТУ
Спільна ідея — рух зліва направо, як мазок пензлем. Той самий жест
у логотипі, картці товару, підкресленні меню, вкладках і кнопках.
Тривалості короткі (140–450 мс), нічого не блимає й не стрибає.
Повністю вимикається при prefers-reduced-motion.
============================================================================ */
@media (prefers-reduced-motion: no-preference){
/* ---------- Навігація: підкреслення «домальовується» ---------- */
.navbar .links a{position:relative}
.navbar .links a::after{content:'';position:absolute;left:var(--sp-5);right:var(--sp-5);bottom:10px;
height:2px;background:var(--green-500);transform:scaleX(0);transform-origin:left;
transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.navbar .links a:hover::after{transform:scaleX(1)}
.navbar .links a.on::after,
.navbar .links a[aria-current=page]::after{transform:scaleX(1)}
/* те саме для текстових посилань-стрілок */
.slink{position:relative}
.slink:hover{transform:translateX(2px)}
.slink{transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.crumbs a{transition:color .22s var(--ease)}
.crumbs a:hover{color:var(--green-800)}
/* ---------- Кнопки: заливка збігає зліва направо ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::before{content:'';position:absolute;inset:0;z-index:-1;
background:var(--n-900);transform:scaleX(0);transform-origin:left;
will-change:transform;backface-visibility:hidden;
transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.btn-primary:hover::before{transform:scaleX(1)}
.btn-primary:hover{color:var(--green-500)}
/* вторинна кнопка — лише свій рідний ховер, без накладок поверх тексту */
.btn-secondary{transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
border-color var(--dur) var(--ease),transform .16s cubic-bezier(.34,1.56,.64,1)}
/* ---------- Шапка ---------- */
.searchbox input{transition:border-bottom-color .25s var(--ease)}
.hicon{transition:color var(--dur) var(--ease),transform .2s cubic-bezier(.34,1.56,.64,1)}
.hicon:hover{transform:translateY(-2px)}
.hicon .cnt{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.hicon:hover .cnt{transform:scale(1.12)}
.catbtn i{transition:transform .28s var(--ease)}
.catbtn[aria-expanded=true] i{transform:rotate(90deg)}
.megapanel{animation:megaIn .26s cubic-bezier(.22,.61,.36,1)}
@keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* ---------- Картка товару ---------- */
.pcard{transition:border-color var(--dur) var(--ease),box-shadow .3s var(--ease),transform .3s cubic-bezier(.22,.61,.36,1)}
.pcard:hover{transform:translateY(-3px)}
.fav{transition:color var(--dur) var(--ease),transform .22s cubic-bezier(.34,1.56,.64,1)}
.fav:hover{transform:scale(1.14)}
.fav[aria-pressed=true]{animation:favPop .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes favPop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
.pcard .name{transition:color .25s var(--ease)}
.pcard:hover .name{color:var(--green-800)}
/* ---------- Вкладки, чипи, фільтри ---------- */
.tabs button{position:relative;transition:color var(--dur) var(--ease)}
.tabs button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
background:var(--green-500);transform:scaleX(0);transform-origin:left;
transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.tabs button.on::after{transform:scaleX(1)}
.chip{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .16s cubic-bezier(.34,1.56,.64,1)}
.chip:active{transform:scale(.96)}
.check input+*,.check .box{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.swatch-row>*{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow var(--dur) var(--ease)}
.swatch-row>*:hover{transform:scale(1.1)}
/* ---------- Модалки й тости ---------- */
.overlay{transition:opacity .2s ease}
.modal{animation:modalIn .28s cubic-bezier(.22,.61,.36,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.toast{animation:toastIn .3s cubic-bezier(.22,.61,.36,1)}
@keyframes toastIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
/* ---------- Дрібниці ---------- */
.social a{transition:background var(--dur) var(--ease),transform .2s cubic-bezier(.34,1.56,.64,1)}
.social a:hover{transform:translateY(-3px)}
.qty button{transition:background var(--dur) var(--ease),transform .14s var(--ease)}
.qty button:active{transform:scale(.9)}
.badge-stock i{transition:transform .2s var(--ease)}
.pcard:hover .badge-stock i{transform:scale(1.15)}
.cd .u b,.timer .u b{transition:opacity .18s ease}
/* фото проявляється, а не «вистрибує» */
img.tk-fade{opacity:0;transition:opacity .4s ease}
img.tk-fade.tk-shown{opacity:1}
}
/* ============================================================================
ФОНОВІ ПІДКЛАДКИ СЕКЦІЙ
Легкі SVG-патерни у фірмових кольорах — щоб довга сторінка не читалась
як суцільна біла стрічка. Усі надруковані інлайном (data URI), без запитів.
Клас вішається на : sec-dots / sec-diag / sec-grid / sec-arcs / sec-wave.
============================================================================ */
.sec-dots,.sec-diag,.sec-grid,.sec-arcs,.sec-wave{position:relative;isolation:isolate}
.sec-dots>*,.sec-diag>*,.sec-grid>*,.sec-arcs>*,.sec-wave>*{position:relative;z-index:1}
.sec-dots::before,.sec-diag::before,.sec-grid::before,.sec-arcs::before,.sec-wave::before{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
.sec-dots::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%3E%3Ccircle%20cx%3D%221.6%22%20cy%3D%221.6%22%20r%3D%221.6%22%20fill%3D%22%2523AACA3C%22%20fill-opacity%3D%22.22%22%2F%3E%3C%2Fsvg%3E");background-size:26px 26px}
.sec-diag::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2234%22%3E%3Cpath%20d%3D%22M-4%204%20L4%20-4%20M0%2034%20L34%200%20M30%2038%20L38%2030%22%20stroke%3D%22%2523AACA3C%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E");background-size:34px 34px}
.sec-grid::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2260%22%3E%3Cpath%20d%3D%22M60%200%20H0%20V60%22%20fill%3D%22none%22%20stroke%3D%22%2523111111%22%20stroke-opacity%3D%22.05%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");background-size:60px 60px;
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%)}
.sec-arcs::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22620%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%2246%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M-60%20560%20Q%20300%20200%20700%20470%22%20stroke%3D%22%2523AACA3C%22%20stroke-opacity%3D%22.13%22%2F%3E%3Cpath%20d%3D%22M520%20-40%20Q%20900%20210%201290%2060%22%20stroke%3D%22%2523D88BCF%22%20stroke-opacity%3D%22.12%22%2F%3E%3Cpath%20d%3D%22M760%20620%20Q%201000%20430%201280%20520%22%20stroke%3D%22%2523AACA3C%22%20stroke-opacity%3D%22.10%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:cover;background-position:center}
.sec-wave::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22180%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20120%20C%20220%2040%20380%20170%20620%2096%20C%20840%2030%201000%20150%201200%2080%20L1200%20180%20L0%20180%20Z%22%20fill%3D%22%2523AACA3C%22%20fill-opacity%3D%22.08%22%2F%3E%3Cpath%20d%3D%22M0%20148%20C%20240%2082%20420%20190%20660%20128%20C%20880%2072%201030%20176%201200%20118%22%20fill%3D%22none%22%20stroke%3D%22%2523D88BCF%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");background-size:100% auto;
background-position:bottom center;background-repeat:no-repeat}
/* м'яке згасання патерна до країв, щоб не було різкої межі секції */
.sec-dots::before,.sec-diag::before{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
/* ============================================================================
СКРОЛ-АНІМАЦІЯ (замість прелоадера)
Нічого не блокує показ сторінки: контент одразу є, він лише «в'їжджає».
Усе тримається на transform/opacity — це малює композитор, без перерахунку
макета, тож не гальмує навіть на слабких пристроях.
============================================================================ */
@media (prefers-reduced-motion: no-preference){
/* 1. Тонкий індикатор прогресу сторінки */
.tk-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
background:var(--green-500);transform:scaleX(var(--p,0));transform-origin:left;
will-change:transform;pointer-events:none}
/* 2. Заголовок секції «проявляється» зліва направо — той самий жест, що й мазок */
.h-sec.rise-h{clip-path:inset(0 100% 0 0);opacity:.001;
transition:clip-path .72s cubic-bezier(.22,.61,.36,1),opacity .25s ease}
.h-sec.rise-h.in{clip-path:inset(0 0 0 0);opacity:1}
/* 3. Надзаголовок і посилання секції під'їжджають слідом */
.eyebrow.rise-s,.shead .slink.rise-s{opacity:0;transform:translateY(8px);
transition:opacity .45s ease .12s,transform .45s cubic-bezier(.22,.61,.36,1) .12s}
.eyebrow.rise-s.in,.shead .slink.rise-s.in{opacity:1;transform:none}
/* 4. Фото в картках трохи «сідає» на місце при появі */
.rise .ph.photo,.rise .img img{transform:scale(1.04);
transition:transform .48s cubic-bezier(.22,.61,.36,1)}
.rise.in .ph.photo,.rise.in .img img{transform:none}
/* 5. Дуже легкий паралакс банера — лише зсув фону, без перемальовування */
.heroshot{will-change:transform}
}
/* --- Картка товару: головне фото на нейтральному тлі --- */
.gal .stage{background:var(--n-0)}
.gal .stage .ph{position:relative;z-index:2;width:78%;height:78%;margin:auto;display:grid;place-items:center}
.gal .stage .ph img{width:100%;height:100%;object-fit:contain}
.gal .stage .blobslot,.gal .stage>.brushmark{opacity:.45}
/* --- Рядок покупки: лічильник і кнопка однієї висоти --- */
.buyrow{display:flex;gap:var(--sp-6);align-items:stretch}
.buyrow .qty{height:auto;min-height:56px}
.buyrow .qty.lg{min-height:56px}
.buyrow .btn-lg{min-height:56px}
.buyrow .qty input{height:100%}
.buyrow .qty button{height:100%}
/* --- Горизонтальне переповнення ---
Демо-панель прототипу (.devbar) ховається зсувом за правий край і на вузьких
екранах розтягувала документ. Обрізаємо по осі X: overflow-x:clip, на відміну
від hidden, не ламає position:sticky у шапці. --- */
html{overflow-x:clip}
/* Демо-панель прототипу — службова, на телефоні лише заважає й розтягує сторінку.
position:fixed не обрізається overflow-ом батька, тому просто прибираємо. */
@media(max-width:900px){ .devbar{display:none} }
.hs-mobile{max-width:100%}
/* .brushdeco — абсолютний декор із від'ємними відступами. Без position:relative
на футері він рахувався від сторінки й розтягував її по горизонталі. */
footer{position:relative;overflow:hidden}
/* декоративний мазок у футері на телефоні лише розтягує сторінку — прибираємо */
@media(max-width:900px){ .brushdeco{display:none} }
/* Герой головної: .heroshot і мобільна стрічка не мають розсувати сторінку */
.hero,.hotspot{max-width:100%;overflow:hidden}
.hs-mobile{overflow-x:auto;max-width:100%}
/* --- Адаптив: три джерела горизонтального переповнення --- */
/* 1. Ґрід-елементи за замовчуванням мають min-width:auto — довга назва
без пробілів розсуває колонку. Дозволяємо стискатись і переносити. */
.pgrid,.cats,.sales,.posts,.bgrid{min-width:0}
.pgrid>*,.cats>*,.sales>*,.posts>*,.bgrid>*{min-width:0}
.pcard .name,.pcard .brand,.bcard h3{overflow-wrap:anywhere}
/* 2. Віяло фото в наборі: на вузькому екрані менші картки і без хвоста */
.bundle .bstack{overflow:hidden}
@media(max-width:760px){
.bundle .bs-i{width:58px;height:86px;margin-left:-14px}
.bundle .bs-i:nth-child(n+6){display:none}
.bundle .bs-row{min-height:120px}
}
/* 3. Мобільна стрічка хотспотів — власний горизонтальний скрол */
.hs-mobile{width:100%;max-width:100%;box-sizing:border-box}
/* Блок переваг: страхуємо від переповнення при зумі / довгих словах */
.usp{align-items:stretch}
.usp .u{min-width:0;overflow-wrap:anywhere;height:100%}
.usp .u span,.usp .u b{min-width:0}
/* --- Поява при завантаженні сторінки ---
Не прелоадер: контент уже є, він лише «в'їжджає» за 0.6 с сходинкою.
Клас ставиться на одразу скриптом, знімається після DOM-готовності,
тому спалаху нестилізованого контенту немає. --- */
@media (prefers-reduced-motion: no-preference){
html.tk-boot .hero,
html.tk-boot .page-head,
html.tk-boot .usp,
html.tk-boot .anchorbar,
html.tk-boot .pdp{opacity:0}
.tk-in{animation:tkIn .62s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d,0ms)}
@keyframes tkIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tk-in-fade{animation:tkFade .5s ease both;animation-delay:var(--d,0ms)}
@keyframes tkFade{from{opacity:0}to{opacity:1}}
}
/* ============================================================================
ЛОГОТИП І ШАПКА — поява при вході
Логотип розділений на два шари: мазок і літери. Мазок «домальовується»
зліва направо — той самий жест, що на картці товару. Літери проступають
слідом. Один раз за сесію: для магазину важливо, щоб на десятій сторінці
ніхто не чекав на анімацію.
============================================================================ */
@media (prefers-reduced-motion: no-preference){
.logoslot.lg-draw .lg-shape{
animation:lgBrush .78s cubic-bezier(.22,.61,.36,1) both;
transform-box:fill-box;transform-origin:left center}
/* Літери проступають трьома кроками зліва направо, слідом за мазком */
.logoslot.lg-draw .lg-ink{transform-box:fill-box;transform-origin:left center;opacity:0}
.logoslot.lg-draw .lg-ink-0{animation:lgInk .34s cubic-bezier(.22,.61,.36,1) .30s both}
.logoslot.lg-draw .lg-ink-1{animation:lgInk .34s cubic-bezier(.22,.61,.36,1) .44s both}
.logoslot.lg-draw .lg-ink-2{animation:lgInk .34s cubic-bezier(.22,.61,.36,1) .58s both}
@keyframes lgBrush{
from{clip-path:inset(0 100% 0 0);opacity:.65}
to {clip-path:inset(0 -2% 0 0);opacity:1}}
@keyframes lgInk{
from{opacity:0;transform:translateX(-6%)}
to {opacity:1;transform:none}}
/* Шапка збирається по черзі: логотип → пошук → іконки → пункти меню.
Крок навмисно дрібний (70 мс) — має читатись як «зібралось», а не як шоу. */
.hdr-stage{opacity:0;animation:hdrIn .46s cubic-bezier(.22,.61,.36,1) both;
animation-delay:var(--d,0ms)}
@keyframes hdrIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
/* Мазок під активним пунктом меню домальовується після появи самої шапки */
header.hdr-ready .navbar .links a[aria-current=page]::after{
animation:navDraw .5s cubic-bezier(.22,.61,.36,1) .52s both}
@keyframes navDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.sec-cols.single{grid-template-columns:1fr}
/* ============================================================================
ТЕМАТИЧНІ ПІДКЛАДКИ СЕКЦІЙ + ПЛАВНІ ПЕРЕХОДИ
Патерн — тонкі контури флаконів, крапель, іскор та пензлів у фірмовому
кольорі. Замість різкої межі між секціями — м'яка хвиля-роздільник, що
переливає колір однієї секції в іншу.
============================================================================ */
.sec-beauty,.sec-beauty-pink{position:relative;isolation:isolate}
.sec-beauty>*,.sec-beauty-pink>*{position:relative;z-index:1}
.sec-beauty::before,.sec-beauty-pink::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background-size:220px 200px;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.sec-beauty::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22200%22%20viewBox%3D%220%200%20220%20200%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523AACA3C%22%20stroke-opacity%3D%22.5%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2824%2C26%29%20rotate%28-8%29%22%3E%3Crect%20x%3D%220%22%20y%3D%2216%22%20width%3D%2224%22%20height%3D%2230%22%20rx%3D%224%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%2212%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%22-6%22%20width%3D%228%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M104%2028%20C104%2028%2094%2042%2094%2050%20a10%2010%200%200%200%2020%200%20C114%2042%20104%2028%20104%2028%20Z%22%2F%3E%3Cg%20transform%3D%22translate%28178%2C40%29%22%3E%3Cpath%20d%3D%22M0%20-12%20L3%20-3%20L12%200%20L3%203%20L0%2012%20L-3%203%20L-12%200%20L-3%20-3%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28190%2C116%29%20rotate%2835%29%22%3E%3Crect%20x%3D%22-3%22%20y%3D%220%22%20width%3D%226%22%20height%3D%2236%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M-6%200%20Q0%20-14%206%200%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2830%2C132%29%20rotate%286%29%22%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%2226%22%20rx%3D%224%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M150%20150%20C150%20150%20141%20163%20141%20170%20a9%209%200%200%200%2018%200%20C159%20163%20150%20150%20150%20150%20Z%22%2F%3E%3Cg%20transform%3D%22translate%28108%2C96%29%20scale%28.7%29%22%3E%3Cpath%20d%3D%22M0%20-12%20L3%20-3%20L12%200%20L3%203%20L0%2012%20L-3%203%20L-12%200%20L-3%20-3%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28196%2C176%29%20scale%28.6%29%22%3E%3Cpath%20d%3D%22M0%20-12%20L3%20-3%20L12%200%20L3%203%20L0%2012%20L-3%203%20L-12%200%20L-3%20-3%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.sec-beauty-pink::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22200%22%20viewBox%3D%220%200%20220%20200%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523D88BCF%22%20stroke-opacity%3D%22.42%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2824%2C26%29%20rotate%28-8%29%22%3E%3Crect%20x%3D%220%22%20y%3D%2216%22%20width%3D%2224%22%20height%3D%2230%22%20rx%3D%224%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%2212%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%22-6%22%20width%3D%228%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M104%2028%20C104%2028%2094%2042%2094%2050%20a10%2010%200%200%200%2020%200%20C114%2042%20104%2028%20104%2028%20Z%22%2F%3E%3Cg%20transform%3D%22translate%28178%2C40%29%22%3E%3Cpath%20d%3D%22M0%20-12%20L3%20-3%20L12%200%20L3%203%20L0%2012%20L-3%203%20L-12%200%20L-3%20-3%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28190%2C116%29%20rotate%2835%29%22%3E%3Crect%20x%3D%22-3%22%20y%3D%220%22%20width%3D%226%22%20height%3D%2236%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M-6%200%20Q0%20-14%206%200%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2830%2C132%29%20rotate%286%29%22%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%2226%22%20rx%3D%224%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M150%20150%20C150%20150%20141%20163%20141%20170%20a9%209%200%200%200%2018%200%20C159%20163%20150%20150%20150%20150%20Z%22%2F%3E%3Cg%20transform%3D%22translate%28108%2C96%29%20scale%28.7%29%22%3E%3Cpath%20d%3D%22M0%20-12%20L3%20-3%20L12%200%20L3%203%20L0%2012%20L-3%203%20L-12%200%20L-3%20-3%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28196%2C176%29%20scale%28.6%29%22%3E%3Cpath%20d%3D%22M0%20-12%20L3%20-3%20L12%200%20L3%203%20L0%2012%20L-3%203%20L-12%200%20L-3%20-3%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
/* М'який перехід між секціями: хвиля прибита до НИЖНЬОГО краю секції й
зафарбована кольором наступної секції — тому завжди точно на межі. */
.blk{position:relative}
.sec-flow{position:absolute;left:0;right:0;bottom:-1px;height:56px;z-index:2;
pointer-events:none;color:var(--to,var(--n-0))}
.sec-flow svg{position:absolute;inset:0;width:100%;height:100%;display:block}
@media(max-width:768px){.sec-flow{height:36px}}
/* ============================================================================
ПІДПИС РОЗРОБНИКА У ФУТЕРІ
У спокої видно лише знак Apricode. На ховері він робить мах пензлем, і
ліворуч від нього проявляється напис — рухом справа наліво, ніби знак
витягує його з-під себе.
Напис позиційований абсолютно і не бере участі в потоці, тому ряд
футера не смикається і сусідні блоки не зсуваються.
============================================================================ */
.madeby{position:relative;display:inline-flex;align-items:center;
width:22px;height:22px;flex:0 0 22px;
font-size:var(--fs-12);color:rgba(255,255,255,.42);
transition:color .3s var(--ease)}
.madeby:hover{color:rgba(255,255,255,.8)}
.fbot-pay{margin-left:auto;margin-right:auto}
@media(max-width:700px){.fbot-pay{margin:0}}
.madeby-logo{width:22px;height:22px;display:block;color:#FF7A18;
opacity:.6;transform-origin:50% 62%;
transition:opacity .35s var(--ease)}
/* Напис — поза потоком, праворуч від нього знак */
.madeby-reveal{position:absolute;right:calc(100% + var(--sp-4));top:50%;
transform:translateY(-50%);white-space:nowrap;pointer-events:none}
.madeby-reveal>.madeby-t{display:block;
clip-path:inset(0 0 0 100%);opacity:0;
transition:clip-path .5s cubic-bezier(.22,.61,.36,1),
opacity .3s ease}
.madeby:hover .madeby-reveal>.madeby-t,
.madeby:focus-visible .madeby-reveal>.madeby-t{
clip-path:inset(0 -2% 0 0);opacity:1;
transition:clip-path .5s cubic-bezier(.22,.61,.36,1) .12s,
opacity .32s ease .12s}
@media (prefers-reduced-motion: no-preference){
.madeby:hover .madeby-logo,
.madeby:focus-visible .madeby-logo{opacity:1;animation:abStroke .62s cubic-bezier(.22,.61,.36,1)}
@keyframes abStroke{
0% {transform:rotate(0deg) scale(1)}
35% {transform:rotate(-16deg) scale(1.16)}
70% {transform:rotate(7deg) scale(1.06)}
100%{transform:rotate(0deg) scale(1)}}
}
@media (prefers-reduced-motion: reduce){ .madeby:hover .madeby-logo{opacity:1} }
/* на вузьких екранах напис не влізе праворуч — показуємо його завжди зліва */
@media(max-width:560px){
.madeby{width:auto;flex:0 0 auto;gap:var(--sp-4)}
.madeby-reveal{position:static;transform:none}
.madeby-reveal>.madeby-t{clip-path:none;opacity:.55}
}