(кошик, чекаут, кабінет). Shorthand стирав би там горизонтальний падінг .wrap і вміст лягав упритул до країв екрана. Те саме — у .section--tight. */ .section{padding-top:clamp(38px,4.4vw,66px);padding-bottom:clamp(38px,4.4vw,66px)} /* Лонгхенди навмисно: .section--tight вішається і на

(шапки блогу, стаття, «Оплата і доставка»). Shorthand стирав би там горизонтальний падінг .wrap і текст лягав упритул до країв екрана. */ .section--tight{padding-top:clamp(26px,3vw,42px);padding-bottom:clamp(26px,3vw,42px)} /* Дві секції поспіль складають свої вертикальні падінги в один завеликий проміжок (42+66 = 108px). Модифікатор гасить нижній: розділяє їх верхній падінг наступної секції, і ритм лишається таким самим, як усюди. */ .section--flush-b{padding-bottom:0} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap} .section-head .row{align-items:center} .section-head p{max-width:56ch} .grid{display:grid;gap:var(--gap)} .stack-8{display:flex;flex-direction:column;gap:8px} .stack-12{display:flex;flex-direction:column;gap:12px} .stack-16{display:flex;flex-direction:column;gap:16px} .row{display:flex;align-items:center;gap:12px} .row-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .spacer{flex:1} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; height:50px;padding:0 24px;border-radius:8px; font-weight:500;font-size:15.5px;letter-spacing:-.008em; transition:background .15s,color .15s,border-color .15s; white-space:nowrap; } .btn svg{width:18px;height:18px;flex:none} :root{--ico-s:16px;--ico-m:20px;--ico-l:24px} .btn--primary{background:var(--orange);color:#fff} .btn--primary:hover{background:var(--orange-soft)} .btn--blue{background:var(--blue);color:#fff} .btn--blue:hover{background:var(--blue-soft)} .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-input)} .btn--ghost:hover{border-color:var(--ink)} .btn--light{background:#fff;color:var(--ink)} .btn--dark{background:var(--ink);color:#fff} .btn--sm{height:40px;padding:0 18px;font-size:14px} .btn--lg{height:56px;padding:0 30px;font-size:16.5px} .btn--full{width:100%} .btn--icon{width:50px;padding:0} .btn--icon.btn--sm{width:40px} /* ---------- Chips / Tags ---------- */ .chip{ display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px; border-radius:6px;background:#fff;border:1px solid var(--line-input); font-size:14.5px;font-weight:500;transition:.15s; } .chip:hover{border-color:var(--ink);color:var(--ink)} .chip--active{background:var(--ink);border-color:var(--ink);color:#fff} .chip--active:hover{color:#fff} .chip svg{width:17px;height:17px} .chip-remove{margin-left:2px;opacity:.55} .chip-remove:hover{opacity:1} .badge{ display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:4px; font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; } .badge--sale{background:var(--orange);color:#fff} .badge--new{background:var(--ink);color:#fff} .badge--hit{background:var(--beige);color:var(--ink)} .badge--rx{background:#fff;color:#C22F2F;border:1px solid rgba(194,47,47,.5)} .badge--soft{background:var(--blue-50);color:var(--ink)} .pill-tag{ display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:5px; background:var(--blue-50);color:var(--ink);font-size:13px;font-weight:500; } .pill-tag--sand{background:var(--beige);color:var(--ink)} /* ---------- Cards ---------- */ .card{background:#fff;border-radius:var(--r-l);border:1px solid var(--line)} .card--flat{box-shadow:none} .card-pad{padding:26px} /* ========================================================================== HEADER ========================================================================== */ .topbar{background:var(--ink);color:#EDE8DA;font-size:13px;font-weight:400} .topbar .wrap{display:flex;align-items:center;gap:24px;height:42px} .topbar-list{display:flex;gap:22px;align-items:center;flex-wrap:wrap} .topbar-list li{display:flex;align-items:center;gap:7px;opacity:.85} .topbar-list svg{width:15px;height:15px;color:var(--sand);opacity:.8} /* Старий перемикач мов топбару прибрано: топбар вимкнено ($ml_topbar_on), а його .lang{display:flex} і .lang a{border-radius:999px} перебивали новий перемикач — список у шухляді стискався в два кружечки. */ .header{position:sticky;top:0;z-index:80;background:var(--cream);border-bottom:1px solid var(--line)} .header.is-stuck{border-bottom-color:var(--sand)} /* Липка шапка у два ряди з'їдала ~126px висоти й налазила на вміст. Після початку прокрутки згортаємо її до одного компактного ряду. */ /* Згортаємо по висоті, а не через display:none — його неможливо анімувати, і нижній ряд зникав ривком разом зі стрибком вмісту під шапкою. 51px = 50px рядка + 1px верхньої межі; межу гасимо разом із висотою, інакше при height:0 від неї лишалася б смужка. */ /* Крива й тривалість підібрані за замірами: з .24s ease найбільший крок виходив 11px за кадр — саме це читалось як ривок. З .34s і плавнішим стартом пік падає до ~6px, а вся анімація лишається короткою. */ .header-main{transition:height .34s cubic-bezier(.4,0,.2,1)} .header .nav{ height:51px;overflow:hidden; transition:height .34s cubic-bezier(.4,0,.2,1),opacity .2s ease, border-top-color .2s ease,border-top-width .34s cubic-bezier(.4,0,.2,1); } .header.is-compact .nav{ /* Ширину межі теж зводимо до нуля: із самим лише прозорим кольором від рядка лишалась смужка в 1px і шапка не сідала до кінця. */ height:0;opacity:0;border-top-color:transparent;border-top-width:0; pointer-events:none; } .header.is-compact .header-main{height:58px} /* Ці розміри теж мінялися стрибком — тепер їдуть разом із висотою. */ .logo svg{transition:width .34s cubic-bezier(.4,0,.2,1),height .34s cubic-bezier(.4,0,.2,1)} .logo-word{transition:font-size .34s cubic-bezier(.4,0,.2,1)} /* Перелічуємо властивості повністю: коротке transition:height затерло б переходи, які ці елементи вже мають (фон кнопки, межа поля пошуку). */ .btn-catalog{transition:background .15s,color .15s,border-color .15s,height .34s cubic-bezier(.4,0,.2,1)} .search-field{transition:border-color .15s,height .34s cubic-bezier(.4,0,.2,1)} .header .icon-btn{transition:width .34s cubic-bezier(.4,0,.2,1),height .34s cubic-bezier(.4,0,.2,1)} .header.is-compact .logo svg{width:30px;height:29px} .header.is-compact .logo-word{font-size:20px} .header.is-compact .btn-catalog, .header.is-compact .search-field{height:42px} .header.is-compact .search-go{height:32px;padding:0 14px} .header.is-compact .icon-btn{width:40px;height:40px} .header.is-compact .head-phone{display:none} @media (prefers-reduced-motion:reduce){ .header-main,.header .nav{transition:none} } .header-main{display:flex;align-items:center;gap:20px;height:var(--header-h)} .logo{display:flex;align-items:center;gap:11px;color:var(--orange);flex:none} .logo svg{width:38px;height:37px} .logo-word{font-size:25px;font-weight:600;letter-spacing:-.028em;color:var(--orange)} .btn-catalog{ display:inline-flex;align-items:center;gap:11px;height:50px;padding:0 20px;border-radius:8px; background:var(--orange);color:#fff;font-weight:500;font-size:15.5px;flex:none;transition:.15s; } .btn-catalog:hover{background:var(--orange-soft)} .burger{display:flex;flex-direction:column;gap:4px;width:18px} .burger i{height:2.5px;background:currentColor;border-radius:2px;display:block;transition:.2s} .burger i:nth-child(2){width:12px} /* Search */ .search{position:relative;flex:1 1 auto;min-width:0} .search-field{ display:flex;align-items:center;height:50px;background:#fff;border:1px solid var(--line); border-radius:8px;padding:0 6px 0 18px;gap:12px;transition:.15s;border-color:var(--line-input); } .search-field:focus-within{border-color:var(--ink)} .search-field > svg{width:20px;height:20px;color:var(--muted);flex:none} .search-field input{flex:1;border:0;background:none;outline:0;font-size:15.5px;font-weight:500;min-width:0} .search-field input::placeholder{color:#7D7665} .search-go{height:38px;padding:0 18px;border-radius:6px;background:var(--ink);color:#fff;font-weight:500;font-size:14px} /* ---------- Підказки пошуку (рушій FindFast, вигляд наш) ---------- Розмітку будує ff-frontend.js: .ff-search__results > .ff-list > .ff-item > .ff-item__link > img.ff-item__img + .ff-item__body(.ff-item__title, .ff-item__sku, .ff-item__price, .ff-item__stock). Класи чіпати не можна — на них тримається клавіатурна навігація плагіна. Стиль сайту: біле тло, межа 1px, без тіней. */ .search-field{position:relative} .ml-sug{ position:absolute;top:calc(100% + 6px);left:-1px;right:-1px;z-index:60; background:var(--white);border:1px solid var(--line);border-radius:var(--r-l); padding:6px;max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain; } .ml-sug[hidden]{display:none} .ml-sug .ff-list{list-style:none;margin:0;padding:0;display:grid;gap:2px} .ml-sug .ff-item__link{ display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center; padding:8px;border-radius:var(--r-m);color:var(--ink); } .ml-sug .ff-item.is-active .ff-item__link, .ml-sug .ff-item__link:hover{background:var(--cream)} .ml-sug .ff-item__img{ width:48px;height:48px;object-fit:contain;border-radius:var(--r-s);background:var(--cream); } /* Ціна й наявність — усередині .ff-item__body (так їх кладе плагін), тому двоколонкову сітку робимо саме тут: назва на всю ширину, під нею наявність ліворуч і ціна праворуч. */ .ml-sug .ff-item__body{ display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:3px; align-items:center;min-width:0; } .ml-sug .ff-item__title{ grid-column:1 / -1; font-size:14px;line-height:1.3;font-weight:500; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; } .ml-sug .ff-item__sku{display:none} /* артикул покупцеві ні про що не каже */ /* Рядок задаємо явно: без нього авторозміщення кладе ціну в 2-й рядок, а наявність — аж у 3-й, і картка розповзається по висоті. */ .ml-sug .ff-item__price{ grid-area:2 / 2;justify-self:end; font-size:15px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums; } .ml-sug .ff-item__price del{display:none} .ml-sug .ff-item__price ins{text-decoration:none} /* Наявність — тими самими кольорами, що й на картці товару. */ .ml-sug .ff-item__stock{grid-area:2 / 1;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)} .ml-sug .ff-item__stock-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--green)} .ml-sug .ff-item__stock--back .ff-item__stock-dot{background:var(--blue)} .ml-sug .ff-item__stock--out .ff-item__stock-dot{background:var(--sand)} .ml-sug .ff-empty{padding:18px 12px;text-align:center;font-size:14px;color:var(--muted)} @media (max-width:760px){ /* Підказки на всю ширину екрана, а не по ширині поля. Поле в шапці вузьке (~100px), і прив'язана до нього випадайка обрізала назви й ціни. Знімаємо position з поля й самої обгортки, щоб координати рахувались від .header — він sticky, тобто вже є контейнером для absolute. */ .header .search, .header .search-field{position:static} .header .ml-sug{left:12px;right:12px;top:calc(100% + 6px)} .ml-sug{max-height:min(60vh,420px);border-radius:var(--r-m)} .ml-sug .ff-item__link{gap:10px;grid-template-columns:44px 1fr} .ml-sug .ff-item__img{width:44px;height:44px} .ml-sug .ff-item__price{font-size:14px} /* «В наявності» ламалось на два рядки й налазило на ціну. */ .ml-sug .ff-item__stock{white-space:nowrap} } .head-actions{display:flex;align-items:center;gap:6px;flex:none} /* ---------- Перемикач мов ---------- Згорнутий — лише поточна мова. Текстом, без прапорів: прапор позначає країну, а не мову. */ .lang{position:relative;flex:none} .lang__btn{ display:flex;align-items:center;gap:4px;height:34px;padding:0 8px 0 10px; border-radius:7px;font-size:13px;font-weight:500;letter-spacing:.02em; color:var(--muted);transition:color .15s,background .15s; } .lang__btn:hover{color:var(--ink)} .lang[data-open] .lang__btn{color:var(--ink);background:var(--cream)} .lang__btn svg{width:11px;height:11px;transition:transform .18s} .lang[data-open] .lang__btn svg{transform:rotate(180deg)} .lang__menu{ position:absolute;top:calc(100% + 6px);right:0;z-index:70;min-width:64px; background:var(--white);border:1px solid var(--line);border-radius:var(--r-m); padding:5px;display:grid;gap:2px; } .lang__menu[hidden]{display:none} /* Лише коди: назви мов у два слова робили випадайку ширшою за потрібне, а «Русский» на видноті — саме те, чого просили не показувати. */ .lang__i{ display:flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:var(--r-s); font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--ink-2); } .lang__i span{display:none} .lang__i b{font-weight:500} .lang__i:hover{background:var(--cream);color:var(--ink)} .lang__i.is-on{color:var(--ink)} .lang__i.is-on b{font-weight:600} /* У шухляді випадайка ні до чого — там місця вдосталь. Стоїть унизу, тому відділяємо рискою й даємо повітря над нею. */ .lang--drawer{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)} .lang--drawer .lang__btn{display:none} .lang--drawer .lang__menu{position:static;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0;border:0;min-width:0} /* Дрібніші й тихіші: перемикач потрібен раз на сесію, а на всю ширину двома кнопками він важив як головна дія меню. */ .lang--drawer .lang__menu{grid-template-columns:auto auto;justify-content:start;gap:8px} .lang--drawer .lang__i{justify-content:center;min-width:52px;height:32px;padding:0 12px; border:1px solid var(--line);background:transparent;font-size:12.5px;color:var(--muted)} .lang--drawer .lang__i:hover{border-color:var(--line-input);color:var(--ink);background:transparent} .lang--drawer .lang__i.is-on{border-color:var(--ink);color:var(--ink);background:transparent} .icon-btn{ position:relative;width:46px;height:46px;border-radius:8px;display:grid;place-items:center; transition:.15s;color:var(--ink-2); } .icon-btn:hover{color:var(--ink)} .icon-btn svg{width:23px;height:23px} .icon-btn .count{ position:absolute;top:50%;left:50%;transform:translate(3px,-17px); min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill); background:var(--orange);color:#fff;font-size:10.5px;font-weight:600;line-height:1; display:grid;place-items:center;border:2px solid var(--cream);box-sizing:content-box; } .icon-btn .count--blue{background:var(--blue)} .head-phone{display:flex;flex-direction:column;line-height:1.15;padding-left:12px;margin-left:6px;border-left:1px solid var(--line)} .head-phone b{font-size:15.5px;font-weight:600;letter-spacing:-.01em} .head-phone span{font-size:12.5px;color:var(--muted);font-weight:600} /* Nav row */ .nav{border-top:1px solid var(--line-2)} .nav .wrap{display:flex;align-items:center;gap:26px;height:50px;overflow:auto;scrollbar-width:none} .nav .wrap::-webkit-scrollbar{display:none} .nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:.15s;position:relative;padding:4px 0} .nav a:hover{color:var(--ink)} .nav a.is-accent{color:var(--ink);font-weight:600} /* Mega menu */ .mega{ position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line); box-shadow:var(--sh-2);display:none;z-index:70; } .mega.is-open{display:block} .mega .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding-top:34px;padding-bottom:38px} .mega-col h4{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:12px} .mega-col h4 .dot{width:20px;height:20px;display:grid;place-items:center;flex:none;background:none!important;color:var(--ink)!important} .mega-col h4 .dot svg{width:18px;height:18px} .mega-col li a{display:block;padding:8px 0;font-size:14.5px;color:var(--ink-2);transition:.15s} .mega-col li a:hover{color:var(--ink)} /* Колонка з категоріями без підпунктів — заголовки один під одним, без порожнечі. */ .mega-col--flat h4 + h4{margin-top:14px} .mega-col--flat h4{margin-bottom:0} .mega-col h4 a:hover{color:var(--ink)} /* ========================================================================== HERO ========================================================================== */ .hero{position:relative;overflow:hidden;background:var(--beige)} .hero{border-bottom:1px solid var(--line)} /* Лонгхенди навмисно: .hero-inner стоїть на

. Shorthand стирав горизонтальний падінг .wrap — hero лягав упритул до країв екрана на всьому діапазоні до 1327px, не тільки на мобільному. */ .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center; padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(48px,5vw,76px)} .hero h1 span{color:var(--orange)} .hero .lead{color:var(--ink-2);max-width:50ch;margin-top:18px} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} /* «Знайти за потребою» скролить до блоку симптомів. На ширині від 981px той блок стоїть праворуч від тексту й уже на екрані — кнопка нікуди не веде й виглядає порожньою. Показуємо її лише там, де блок справді опускається під текст (той самий брейкпоінт 980px, що перетворює .hero-inner на одну колонку). */ @media (min-width:981px){ .hero-cta .btn--ghost{display:none} } .hero-usp{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid rgba(27,26,23,.12)} .hero-usp div{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600} .hero-usp svg{width:20px;height:20px;color:var(--ink-2);flex:none} /* Symptom picker */ .symptom-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:30px} .symptom-box h2{margin-bottom:6px} .symptom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px} .symptom{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; padding:18px 8px;border-radius:var(--r-s);background:transparent;border:1px solid var(--line); text-align:center;font-size:13px;font-weight:500;line-height:1.3;transition:.15s;color:var(--ink-2); } .symptom:hover{border-color:var(--ink);color:var(--ink)} .symptom .ico{width:28px;height:28px;display:grid;place-items:center;color:var(--sand);transition:color .15s} .symptom:hover .ico{color:var(--orange)} .symptom .ico svg{width:26px;height:26px} /* Pill pattern decoration */ .pill-bg{position:absolute;inset:0;opacity:.35;z-index:1;pointer-events:none} .pill-bg svg{width:100%;height:100%} /* ========================================================================== CATEGORY TILES ========================================================================== */ .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .cat{ position:relative;overflow:hidden;padding:26px;border-radius:var(--r-l);background:#fff; border:1px solid var(--line);transition:border-color .15s; display:flex;flex-direction:column;min-height:258px; } /* Картки з підрозділами тримають однакову висоту в ряду, а без підрозділів («Детокс», «Товари для дому») — стискаються під власний вміст. */ .cat--flat{min-height:0;align-self:start} .cat--flat ul{display:none} .cat--flat .more{margin-top:20px;padding-top:0} .cat:hover{border-color:var(--sand)} .cat-ico{width:30px;height:30px;display:grid;place-items:center;margin-bottom:20px;flex:none;color:var(--ink)} .cat-ico svg{width:28px;height:28px} .cat h3{font-size:19px;font-weight:500;letter-spacing:-.02em;margin-bottom:12px} .cat ul{display:flex;flex-direction:column;gap:4px} .cat ul a{font-size:14px;color:var(--muted);transition:.15s} .cat ul a:hover{color:var(--ink)} .cat .more{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:7px} .cat .more svg{width:15px;height:15px} .cat-deco{display:none} /* ========================================================================== PRODUCT CARD ========================================================================== */ .products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .products--5{grid-template-columns:repeat(5,1fr)} .products--3{grid-template-columns:repeat(3,1fr)} .p-card{ position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l); border:1px solid var(--line);padding:14px;transition:border-color .28s ease; } /* Чорна рамка на ховері виглядала різко — межа лише трохи темнішає, а «живою» стає сама картинка: повільний, майже непомітний зум. */ .p-card:hover{border-color:var(--sand)} .p-media .ph,.p-media img{transition:transform .6s cubic-bezier(.22,.61,.36,1)} .p-card:hover .ph,.p-card:hover .p-media img{transform:scale(1.045)} .p-media{ position:relative;border-radius:var(--r-s);background:var(--cream);aspect-ratio:1/1; display:grid;place-items:center;overflow:hidden;margin-bottom:14px; } .p-media svg{width:64%;height:64%} .ph{width:100%;height:100%;object-fit:cover;display:block} /* ---------- Фото товару: плавна поява ---------- * Клас ml-fade вішає JS і лише на ті картинки, які на момент запуску ще не * завантажились. Готові (з кешу) лишаються видимими без анімації — інакше * вони блимали б на кожному переході між сторінками. Без JS клас не зʼявляється * взагалі, тож фото видно завжди. */ .ph.ml-fade{opacity:0;transition:opacity .5s ease} .ph.ml-fade.is-in{opacity:1} /* У картці на .ph уже висить перехід для hover-масштабу — перебити його не можна, тому перелічуємо обидва разом. */ .p-media .ph.ml-fade{transition:opacity .5s ease,transform .6s cubic-bezier(.22,.61,.36,1)} @media (prefers-reduced-motion:reduce){ .ph.ml-fade,.p-media .ph.ml-fade{transition:none} } .p-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2} .p-brand{font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .p-name{font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-.008em;margin:6px 0 0;min-height:40px} .p-name a:hover{color:var(--ink)} .p-rating{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500} .p-rating svg{width:15px;height:15px;color:var(--ink)} .p-rating span{color:var(--muted);font-weight:600} /* Ціна й дія — в одному рядку: широка кнопка під ціною забирала ~58px висоти в кожної картки сітки, а підпис «Купити» нічого не пояснював. */ .p-bottom{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px} .p-price{display:flex;align-items:baseline;gap:9px;min-width:0;flex-wrap:wrap;row-gap:2px} .p-price b{font-size:20px;font-weight:600;letter-spacing:-.015em} .p-price s{font-size:13.5px;color:var(--muted);font-weight:400} /* Товари «під запит»: ціни в них немає ні в нас, ні на старому сайті. */ .p-price__ask{font-size:14.5px;font-weight:500;color:var(--muted);letter-spacing:-.01em} .price-now--ask{color:var(--muted)} .p-price .cur{font-size:13.5px;font-weight:400;color:var(--muted)} .p-buy{display:flex;gap:8px;flex:none} .p-add{ width:46px;height:46px;display:grid;place-items:center;flex:none; border-radius:8px;background:var(--orange);color:#fff; transition:background .15s,border-color .15s; } .p-add:hover{background:var(--orange-soft)} .p-add svg{width:19px;height:19px} /* Товар без ціни або без наявності: та сама іконка, але не заклик до дії. */ .p-add--ghost{background:#fff;color:var(--ink);border:1px solid var(--line-input)} .p-add--ghost:hover{background:var(--cream);border-color:var(--ink)} /* ---------- Каталог: «Показати більше» ---------- Кнопка ширша за звичайну, але не на всю сітку: на 1200px рядок кнопки в повну ширину читався як ще одна секція, а не як продовження списку. */ .load-more{display:grid;justify-items:center;gap:10px;margin-top:28px} .load-more[hidden]{display:none} .load-more__btn{min-width:240px;position:relative} .load-more__btn.is-loading{color:transparent} .load-more__btn.is-loading::after{ content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px; border:2px solid rgba(27,26,23,.25);border-top-color:var(--ink);border-radius:50%; animation:ml-spin .6s linear infinite; } .load-more__count{margin:0;font-size:13.5px;color:var(--muted)} .load-more__count b{color:var(--ink);font-weight:600} /* Карткам, що приїхали дозавантаженням, фокус потрібен лише програмно — рамку навколо цілої картки малювати не треба. */ .p-card[tabindex]:focus{outline:none} /* Row scroller */ .scroller{display:flex;gap:20px;overflow:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:none} .scroller::-webkit-scrollbar{display:none} .scroller > *{flex:0 0 clamp(230px,23%,290px);scroll-snap-align:start} .scroll-nav{display:flex;gap:8px;align-items:center} .scroll-nav button{width:40px;height:40px;border-radius:8px;border:1px solid var(--line-input);background:transparent;display:grid;place-items:center;transition:.15s} .scroll-nav button:hover{border-color:var(--ink)} .scroll-nav svg{width:17px;height:17px} /* Tabs */ .tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:0} .tab{ height:44px;padding:0 18px;font-weight:500;font-size:15px; color:var(--muted);position:relative;transition:.16s; } .tab:hover{color:var(--ink)} .tab.is-active{color:var(--ink)} .tab.is-active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--orange);border-radius:2px 2px 0 0} /* ========================================================================== BANNERS / USP ========================================================================== */ .promo{ position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(30px,4vw,52px); display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;color:#fff; } .promo--blue{background:var(--blue);color:#fff} .promo--orange{background:var(--orange);color:#fff} .promo h2{max-width:18ch} .promo p{max-width:44ch;color:#fff;opacity:.9;margin-top:14px} .promo .btn{margin-top:26px} .promo-deco{display:none} .promo-body{position:relative;z-index:2;min-width:0} /* Картка менеджера у CTA-блоці — праву колонку раніше нічим не заповнювали. */ .promo-card{ position:relative;z-index:2;margin:0;justify-self:end;width:100%;max-width:370px; background:#fff;color:var(--ink);border-radius:var(--r-l);padding:24px; } /* Картка «Як це працює». Персона з імʼям і посадою прибрана 16.09.2026 — правила .promo-card__who / __photo / blockquote більше не потрібні. */ .promo-card__label{ display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted) } .promo-card__steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:13px;counter-reset:none} .promo-card__steps li{display:flex;gap:12px;align-items:flex-start} .promo-card__steps b{ width:24px;height:24px;flex:none;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:var(--orange);color:#fff;font-size:12.5px;font-weight:600;line-height:1 } .promo-card__steps span{font-size:14px;line-height:1.5;color:var(--ink-2)} .promo-card__facts{ margin:18px 0 0;padding-top:15px;border-top:1px solid var(--line-2); display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--muted); } .promo-card__facts li{display:flex;align-items:center;gap:9px} .promo-card__facts svg{width:15px;height:15px;color:var(--orange);flex:none} /* ========================================================================== ОПЛАТА І ДОСТАВКА ========================================================================== */ .dlv-head{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:end;padding:10px 0 clamp(28px,4vw,48px)} .dlv-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .dlv-quick li{ display:flex;flex-direction:column;gap:5px; padding-top:18px;border-top:1px solid var(--sand); } .dlv-quick svg{width:20px;height:20px;color:var(--ink-2);margin-bottom:6px} .dlv-quick b{font-size:17px;font-weight:600;letter-spacing:-.015em} .dlv-quick span{font-size:13px;color:var(--muted);line-height:1.4} .dlv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .dlv-card{padding:30px} .dlv-card__top{display:flex;gap:16px;align-items:center} .dlv-ico{ width:52px;height:52px;flex:none;display:grid;place-items:center; border-radius:var(--r-m);background:var(--beige); } .dlv-ico svg{width:24px;height:24px;color:var(--ink)} .dlv-term{display:block;font-size:13.5px;color:var(--muted);margin-top:4px} .dlv-list{display:flex;flex-direction:column;gap:10px;margin-top:18px;font-size:14.5px;line-height:1.45} .dlv-list li{display:flex;align-items:flex-start;gap:10px} .dlv-list svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:3px} @media (max-width:980px){ .dlv-head{grid-template-columns:1fr;align-items:start;gap:26px} .dlv-grid{grid-template-columns:1fr} .promo-card{max-width:none;justify-self:stretch} } @media (max-width:560px){ .dlv-quick{grid-template-columns:1fr;gap:14px} .dlv-card{padding:22px 20px} } .usps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .usp{background:none;border:0;border-top:1px solid var(--sand);border-radius:0;padding:22px 0 0} .usp .ico{width:24px;height:24px;color:var(--ink-2);display:grid;place-items:center;margin-bottom:16px} .usp .ico svg{width:26px;height:26px} .usp h4{margin-bottom:7px} .usp p{font-size:14px;color:var(--muted);line-height:1.5} /* Stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stat{padding:22px 0 0;border-radius:0;background:none;border:0;border-top:1px solid var(--sand)} .stat b{display:block;font-size:clamp(30px,3.2vw,40px);font-weight:500;letter-spacing:-.028em;color:var(--ink);line-height:1} .stat span{display:block;margin-top:8px;font-size:14px;color:var(--muted);font-weight:600} /* Brands */ .brands{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .brand{ height:64px;border-radius:0;background:none;border:0;border-top:1px solid var(--line); display:flex;align-items:center;font-weight:600;font-size:15.5px;color:var(--muted);letter-spacing:-.01em;transition:.15s; } .brand:hover{color:var(--ink);border-color:var(--ink)} /* Blog */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .post{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;transition:border-color .15s} .post:hover{border-color:var(--ink)} .post-media{aspect-ratio:16/9;display:block;overflow:hidden;background:var(--beige)} .post-media .ph{width:100%;height:100%;object-fit:cover;display:block} .post-body{padding:20px 22px 22px} .post .h4{margin:10px 0 8px;line-height:1.3} .post p{font-size:14px;color:var(--muted)} .avatar{width:42px;height:42px;flex:none;border-radius:var(--r-pill);background:var(--beige);display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--ink);line-height:1} /* FAQ */ .faq{display:flex;flex-direction:column;gap:10px} .faq-item{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;text-align:left;font-weight:600;font-size:16px} .faq-q .plus{width:28px;height:28px;border-radius:6px;background:var(--cream);display:grid;place-items:center;flex:none;transition:.2s} .faq-item.is-open .plus{background:var(--orange);color:#fff;transform:rotate(45deg)} .faq-a{padding:0 24px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;color:var(--muted);font-size:15px;line-height:1.6} .faq-item.is-open .faq-a{max-height:340px;padding:0 24px 22px} /* ========================================================================== FOOTER ========================================================================== */ .footer{background:var(--ink);color:#CFC9BA;padding-top:64px;margin-top:0} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:48px} .footer h5{color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px} .footer li a{display:block;padding:5px 0;font-size:14.5px;transition:.15s} .footer li a:hover{color:var(--orange-soft)} .footer .logo-word{color:#fff} .footer-about p{font-size:14px;line-height:1.6;margin-top:16px;color:#9A9486;max-width:36ch} .socials{display:flex;gap:10px;margin-top:20px} .socials a{width:42px;height:42px;border-radius:8px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:.15s} .socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff} .socials svg{width:19px;height:19px} .footer-contact b{display:block;color:#fff;font-size:19px;font-weight:500;letter-spacing:-.02em} .footer-contact span{font-size:13px;color:#8E887B} .pays{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap} .pay{height:32px;padding:0 12px;border-radius:5px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:12px;font-weight:500;color:#CFC9BA} .disclaimer{ border:1px solid rgba(255,255,255,.12);border-radius:var(--r-m);padding:18px 22px;font-size:13px;line-height:1.6; color:#9A9486;display:flex;gap:14px;align-items:flex-start;margin-bottom:26px; } .disclaimer svg{width:22px;height:22px;color:var(--orange-soft);flex:none;margin-top:2px} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:#8E887B} .footer-bottom a:hover{color:#fff} /* ========================================================================== BREADCRUMBS / PAGE HEAD ========================================================================== */ .crumbs{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:18px 0} .crumbs a:hover{color:var(--ink)} .crumbs svg{width:13px;height:13px;opacity:.5} .page-head{padding-bottom:26px} .page-head h1{margin-bottom:12px} /* ========================================================================== CATALOG ========================================================================== */ .catalog{display:grid;grid-template-columns:288px 1fr;gap:32px;align-items:start} .catalog > aside{position:sticky;top:calc(var(--header-now) + 16px)} .filters{display:flex;flex-direction:column;gap:0; background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:2px 20px} .f-block{background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0} .f-block:last-of-type{border-bottom:0} .f-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-weight:500;font-size:14.5px;text-align:left} .f-head .arrow{transition:.2s;color:var(--muted)} .f-head .arrow svg{width:16px;height:16px} .f-block.is-closed .arrow{transform:rotate(-90deg)} .f-body{padding:0 0 18px;display:flex;flex-direction:column;gap:9px} .f-block.is-closed .f-body{display:none} .f-search{height:42px;border-radius:6px;border:1px solid var(--line-input);padding:0 12px;width:100%;outline:0;font-size:14px} .f-search:focus{border-color:var(--ink)} /* Виробників після імпорту сотні — список скролиться, зверху пошук. */ .f-list{display:flex;flex-direction:column;gap:9px;max-height:260px;overflow:auto;margin-top:10px;padding-right:4px;scrollbar-width:thin} .f-list::-webkit-scrollbar{width:6px} .f-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .f-list .check.is-hidden{display:none} .f-empty{font-size:13px;color:var(--muted);padding:6px 0} .check{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:14.5px;line-height:1.3;min-height:40px} .check input:focus-visible + .box{outline:2px solid var(--ink);outline-offset:3px} .check input{position:absolute;opacity:0;width:0;height:0} .check .box{ width:19px;height:19px;border-radius:4px;border:1.5px solid var(--line-input);flex:none;display:grid;place-items:center; transition:.15s;background:#fff; } .check .box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.6);transition:.15s} .check input:checked + .box{background:var(--orange);border-color:var(--orange)} .check input:checked + .box svg{opacity:1;transform:scale(1)} .check .n{color:var(--muted);font-size:13px;margin-left:auto} .check:hover .box{border-color:var(--ink)} .range{display:flex;align-items:center;gap:10px} .range input{width:100%;height:42px;border-radius:6px;border:1px solid var(--line-input);padding:0 12px;outline:0;font-size:14px;min-width:0} .range input:focus{border-color:var(--ink)} .range-track{height:4px;border-radius:2px;background:var(--line);position:relative;margin:16px 4px 6px} .range-track i{position:absolute;height:100%;left:12%;right:28%;background:var(--orange);border-radius:2px} .range-track b{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--orange);transform:translate(-50%,-50%)} #filtersToggle{display:none;margin-bottom:14px} .f-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 15px;border-bottom:1px solid var(--line-2)} .f-top b{font-size:15px;font-weight:600;letter-spacing:-.01em} .f-reset{font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;transition:color .15s} .f-reset:hover{color:var(--ink)} /* .f-consult — блок консультації прибрано з каталогу 16.09.2026 */ .toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px} .select{ height:44px;border-radius:8px;border:1px solid var(--line-input);background:#fff;padding:0 42px 0 16px; font-size:14.5px;font-weight:500;outline:0;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6B60' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:16px; } .subcats{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px} .active-filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:20px} .pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:40px;flex-wrap:wrap} .pagination a{min-width:44px;height:44px;padding:0 14px;border-radius:6px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-weight:500;font-size:14.5px;transition:.15s} .pagination a:hover{border-color:var(--ink)} .pagination a.is-active{background:var(--ink);border-color:var(--ink);color:#fff} .seo-text{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:32px;margin-top:48px} .seo-text h2{font-size:24px;margin-bottom:14px} .seo-text p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:12px} .seo-text h3{font-size:18px;margin:22px 0 10px} /* ========================================================================== PRODUCT PAGE ========================================================================== */ .pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .gallery{display:flex;flex-direction:column;gap:12px} /* Права колонка виросла (акордеон, варіації), і ліворуч лишалося пусте поле на пів екрана. Галерея їде разом зі скролом і зупиняється, коли колонка закінчується. Липке — саме .gallery, а не .gallery-main: інакше мініатюри лишились би на місці й від'їхали від фото. align-self:start обов'язковий — у grid елемент за замовчуванням розтягується на всю висоту рядка, а sticky у розтягнутого не працює. */ @media (min-width:901px){ .gallery{position:sticky;top:calc(var(--header-h) + 16px);align-self:start} } @media (prefers-reduced-motion:reduce){ .gallery{position:static} } .thumbs{display:flex;flex-direction:row;gap:10px;order:2;flex-wrap:wrap} .thumb{width:84px;height:84px;flex:none;overflow:hidden;border-radius:var(--r-s);background:#fff;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:.16s} .thumb:hover{border-color:var(--sand)} .thumb.is-active{border-color:var(--orange)} .thumb svg{width:62%} .gallery-main{position:relative;order:1;aspect-ratio:1/1;border-radius:var(--r-l);background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden} .gallery-main svg{width:66%} .gallery-main .p-badges{top:18px;left:18px} .pdp-head{display:flex;flex-direction:column;gap:12px} /* Мета — довідка, а не заголовок. Уся вагою 600 вона читалась як три жирні пари поспіль і перебивала наявність, заради якої все й затівалось. Підпис лишаємо тонким, виділяємо тільки значення. */ /* Бренд ліворуч, код товару праворуч — рядок мети лишається під головні факти. */ .pdp-brandline{display:flex;align-items:baseline;justify-content:space-between;gap:16px} .pdp-sku{font-size:12.5px;color:var(--muted);font-weight:400;white-space:nowrap} .pdp-sku b{color:var(--ink-2);font-weight:500} .pdp-meta{display:flex;gap:4px 22px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:400;line-height:1.45} .pdp-meta b{color:var(--ink-2);font-weight:500} /* Тези короткого опису. Маркер — тонка риска, а не крапка: крапки вже зайняті статусом наявності, і два різні кружечки поруч читались як один список. Ширину тримаємо в межах рядка, щоб теза лишалась тезою. */ .pdp-short{margin:14px 0 0;padding:0;list-style:none;max-width:52ch;display:grid;gap:6px} .pdp-short li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;color:var(--ink-2)} .pdp-short li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--sand)} .pdp-short--lead{padding-left:0;font-size:14px;line-height:1.55;color:var(--ink-2)} .pdp-short--lead::before{display:none} /* Роздільників навмисно немає: при переносі на другий рядок крапка з ::before повисала на його початку. Пари розділяє сам проміжок. */ .p-stock{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:400;color:var(--muted);margin-top:12px} .p-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none} .p-stock--low::before{background:var(--orange-soft)} .p-stock--wait::before{background:var(--blue)} .p-stock--out::before{background:var(--sand)} /* Наявність — головний факт на картці, тому крупніше й темніше за решту рядків мети. Зелений лишається тільки крапкою: за брендбордом це його єдина роль, заливкою його не беремо. */ .pdp-stock{margin-top:14px} .pdp-head .p-stock{margin-top:0;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .pdp-head .p-stock::before{width:9px;height:9px} .pdp-head .p-stock--out{color:var(--muted);font-weight:500} /* Примітка про курс валют. Вирівняна по тексту статусу, а не по його крапці: інакше вона читалась як ще один пункт списку наявності. */ .pdp-fx{margin:6px 0 0 16px;font-size:12.5px;line-height:1.45;color:var(--muted);max-width:44ch} .specs-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0} .spec{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0 0} .spec span{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:3px} .spec b{font-size:14.5px;font-weight:600} .buy-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px} .price-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap} .price-now{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1} .price-old{font-size:17px;color:var(--muted);text-decoration:line-through;font-weight:400} .price-save{background:var(--orange);color:#fff;border-radius:5px;padding:5px 10px;font-size:13px;font-weight:500} .qty{display:flex;align-items:center;border:1px solid var(--line-input);border-radius:8px;height:56px;overflow:hidden;flex:none} .qty button{width:36px;height:100%;display:grid;place-items:center;font-size:18px;font-weight:400;color:var(--muted);transition:.15s} .qty button:hover{color:var(--ink);background:var(--cream)} .qty input{width:34px;text-align:center;border:0;outline:0;font-weight:500;font-size:15px;background:none} /* У рядку тепер три елементи, а не два: лічильник, «Купити» і «в 1 клік». По 56px вони не лишали місця під довший підпис другої кнопки, тому висоту трохи зменшено. .qty звужуємо саме тут — у кошику він свій. */ .buy-row{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} .buy-row .qty{height:48px} .buy-row .qty button{width:32px} .buy-row .qty input{width:30px} .buy-row .btn--primary{flex:1 1 165px;min-width:0;height:48px;font-size:15.5px;padding:0 18px} .buy-row .btn--quick{ flex:1 1 165px;min-width:0;height:48px;padding:0 16px;font-size:15px; background:#fff;color:var(--ink);border:1px solid var(--line-input); } .buy-row .btn--quick:hover{border-color:var(--ink);background:var(--cream)} /* Просимо обрати фасування лише коли людина сама зняла вибір. */ .var-ask{margin:6px 0 0;font-size:13px;font-weight:500;color:var(--red)} /* ---------- Варіативний товар: вибір фасування ---------- Селект лишається в DOM (контракт wc-add-to-cart-variation), але схований через .sr-only; видимі — чіпи. Стиль той самий, що у фільтрів каталогу. */ .variations{margin-top:14px} .var-row{display:grid;gap:8px} .var-row + .var-row{margin-top:12px} .var-label{font-size:13px;color:var(--muted)} .var-chips{display:flex;flex-wrap:wrap;gap:8px} .var-chip{ min-height:40px;padding:0 16px;border-radius:var(--r-s); border:1px solid var(--line-input);background:#fff;color:var(--ink); font-size:14.5px;font-weight:500;transition:.15s; } .var-chip:hover{border-color:var(--ink)} .var-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff} /* Недоступну комбінацію не ховаємо, а гасимо: людина має бачити, що фасування існує, просто зараз не поєднується з обраним. */ .var-chip.is-off{opacity:.4;text-decoration:line-through;cursor:not-allowed} .var-chip.is-off:hover{border-color:var(--line-input)} /* Дрібне службове посилання — не тап-ціль, тож без min-height 32px, який раніше залишав під чіпами порожню смугу. */ .var-reset{display:inline-block;margin-top:10px;padding:0;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .var-reset:hover{color:var(--ink)} /* Свій блок ціни/наявності Woo нам не потрібен — ті самі дані ми показуємо у власних місцях над буй-боксом. ⚠️ !important обовʼязково: wc-add-to-cart-variation.js відкриває цей блок через jQuery .show(), а це інлайновий display:block — звичайне правило класу його не перебиває, і ціна дублювалась під чіпами. */ .single_variation_wrap .woocommerce-variation{display:none!important} .variations_button{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px} /* Поки варіацію не обрано, Woo сам гасить кнопку — робимо це видимим. */ .single_add_to_cart_button.disabled, .single_add_to_cart_button.wc-variation-selection-needed{opacity:.45;cursor:not-allowed} .p-price__from{font-size:13px;color:var(--muted);margin-right:4px} /* Статус обраної варіації повторюємо тут: угорі картки він теж є, але поки людина обирає фасування, очі — на чіпах, і «під замовлення» там не видно. */ .var-stock{margin:12px 0 0} .var-stock:empty{display:none} /* ---------- Акордеон на картці товару ---------- Замінив таби: на мобільному три таби або тиснулись у стовпчик, або їхали за край, а вміст усе одно читався по одному. Візуал той самий, що у FAQ на головній — щоб на сайті був один тип акордеона, а не два. Висоту анімуємо через grid-template-rows 0fr→1fr: max-height вимагав би стелі, а опис товару буває і на два абзаци, і на двадцять рядків. */ .pdp-acc{display:grid;gap:10px} .pdp-acc .spec-table{max-width:none} .acc-item{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-m)} .acc-h{margin:0;font-size:inherit;font-weight:inherit} .acc-q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px; padding:18px 22px;text-align:left;font-weight:500;font-size:16px;color:var(--ink); } .acc-q .plus{width:28px;height:28px;border-radius:6px;background:var(--cream);display:grid;place-items:center;flex:none;transition:.2s} .acc-q .plus svg{width:16px} /* Крутимо саму іконку, а не плашку: інакше квадрат із радіусом 6px повертається на 45° і читається як ромб-артефакт. */ .acc-q .plus svg{transition:transform .2s ease} .acc-item.is-open .plus{background:var(--orange);color:#fff} .acc-item.is-open .plus svg{transform:rotate(45deg)} .acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease} .acc-item.is-open .acc-a{grid-template-rows:1fr} .acc-a__in{overflow:hidden} /* Падінг усередині, а не на .acc-a: інакше в закритому стані він додає висоту. */ .acc-item.is-open .acc-a__in > *{margin-bottom:0} .acc-a__in{padding:0 22px} .acc-item.is-open .acc-a__in{padding-bottom:22px} @media (prefers-reduced-motion:reduce){ .acc-a{transition:none} } /* Акордеон живе у правій колонці — вона вузька, тож список доставки лишається стовпчиком, а не в дві колонки, як було б на всю ширину сторінки. */ .delivery-list--wide{margin-top:0;padding-top:0;border-top:0} @media (max-width:760px){ .acc-q{padding:16px;font-size:15px} .acc-a__in{padding:0 16px} .acc-item.is-open .acc-a__in{padding-bottom:16px} } .delivery-list{display:flex;flex-direction:column;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2)} .delivery-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px} .delivery-list svg{width:20px;height:20px;color:var(--ink-2);flex:none;margin-top:2px} .delivery-list b{display:block} .delivery-list span{color:var(--muted);font-size:13px} .rx-note{ display:flex;gap:13px;align-items:flex-start;background:#FFF6F6;border:1px solid rgba(217,59,59,.22); border-radius:var(--r-m);padding:16px 18px;font-size:13.5px;line-height:1.55;color:#8a3232;margin-top:16px; } .rx-note svg{width:20px;height:20px;flex:none;margin-top:1px} .rx-note--info{background:var(--blue-50);border-color:var(--blue-soft);color:var(--ink)} .rx-note--info svg{color:var(--blue)} .tab-panel{display:none;padding-top:32px} .tab-panel.is-active{display:block} .prose{max-width:76ch} .prose h3{margin:26px 0 10px} .prose h3:first-child{margin-top:0} .prose p{color:var(--ink-2);line-height:1.7;margin-bottom:12px} .prose ul{display:flex;flex-direction:column;gap:7px;margin:10px 0 16px} .prose ul li{position:relative;padding-left:20px;color:var(--ink-2);line-height:1.6} .prose ul li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--sand)} /* ---------- Сторінки умов (оплата й доставка, повернення) ---------- Суцільний текстовий блок замість секцій-карток: раніше кожен абзац сидів у своїй .section, і між ними складались два вертикальні падінги — виходили порожні смуги на пів екрана. Тут ритм задають самі заголовки. */ /* Заголовок сторінки вже дав свій нижній відступ — секції додавати свій зверху не треба, інакше під h1 зяяла порожня смуга майже в 110px. */ .terms-section{padding-top:4px} .terms{max-width:74ch} .terms > h2{margin-top:40px} .terms > h2:first-child{margin-top:0} .terms > h3{margin-top:26px} .terms > h2 + .prose, .terms > h3 + .prose{margin-top:12px} .terms .prose:last-child p:last-child{margin-bottom:0} .terms .spec-table{margin-bottom:4px} @media (max-width:760px){ .terms > h2{margin-top:30px} .terms > h3{margin-top:22px} } .spec-table{width:100%;border-collapse:collapse} .spec-table tr{border-bottom:1px solid var(--line-2)} .spec-table td{padding:14px 0;font-size:15px;vertical-align:top} .spec-table td:first-child{color:var(--muted);width:42%;font-weight:600} .spec-table td:last-child{font-weight:600} /* ========================================================================== ABOUT / CONTACTS ========================================================================== */ .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s} .step{position:relative;background:none;border:0;border-left:1px solid var(--sand);border-radius:0;padding:2px 20px 2px 20px} .step::before{ counter-increment:s;content:"0" counter(s);font-size:13px;font-weight:500;letter-spacing:.1em; color:var(--muted);line-height:1;display:block;margin-bottom:14px; } .step h4{margin-bottom:8px} .step p{font-size:14px;color:var(--muted);line-height:1.55} .team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .person{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;text-align:center;padding-bottom:22px} .person-photo{aspect-ratio:1/1;background:var(--beige);display:block;overflow:hidden} .person-photo svg{width:52%;opacity:.45} .person h4{margin:18px 0 4px} .person span{font-size:13.5px;color:var(--muted)} /* auto-fit, а не repeat(4): картка «Гаряча лінія» зʼявляється лише коли заповнений телефон, і фіксовані 4 колонки лишали порожню чверть ряду. */ .contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} .cc{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px;transition:border-color .15s} .cc:hover{border-color:var(--ink)} .cc .ico{width:26px;height:26px;display:grid;place-items:center;color:var(--ink);margin-bottom:18px} .cc .ico svg{width:24px;height:24px} .cc span{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .cc b{display:block;font-size:18px;font-weight:500;letter-spacing:-.02em;margin:8px 0 6px} .cc p{font-size:13.5px;color:var(--muted)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:7px} .field label{font-size:13px;font-weight:500;color:var(--ink-2)} .field input,.field textarea,.field select{ height:50px;border-radius:8px;border:1px solid var(--line-input);background:#fff;padding:0 16px;outline:0;font-size:15px; transition:border-color .15s; } .field textarea{height:auto;min-height:130px;padding:14px 16px;resize:vertical;font-family:inherit} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink)} .map{border-radius:var(--r-l);overflow:hidden;background:var(--beige);min-height:380px;display:grid;place-items:center;position:relative} .map .pin{width:60px;height:60px;border-radius:var(--r-pill);background:var(--orange);color:#fff;display:grid;place-items:center} .map .pin svg{width:30px;height:30px} .schedule{display:flex;flex-direction:column;gap:2px} .schedule li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:15px} .schedule li:last-child{border:0} .schedule b{font-weight:600} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1180px){ .cats,.products,.usps,.stats,.team,.steps,.contact-cards{grid-template-columns:repeat(2,1fr)} /* Непарна остання картка (телефон сховано — їх три) інакше лишала б порожню половину ряду. */ .contact-cards > :last-child:nth-child(odd){grid-column:1/-1} .products--5{grid-template-columns:repeat(3,1fr)} .brands{grid-template-columns:repeat(4,1fr)} .mega .wrap{grid-template-columns:repeat(2,1fr)} .catalog{grid-template-columns:240px 1fr;gap:22px} } @media (max-width:980px){ .hero-inner,.split,.promo,.pdp{grid-template-columns:1fr} /* .posts тут раніше ховалися повністю — на мобільному зникав увесь блог. Тепер просто перебудовуються в колонки (див. блок «БЛОГ»). */ .posts{grid-template-columns:repeat(2,1fr)} .head-phone,.topbar-list li:nth-child(n+3){display:none} .footer-top{grid-template-columns:1fr 1fr;gap:28px} .promo-deco{display:none} } @media (max-width:760px){ :root{--header-h:66px} .cats,.usps,.stats,.steps,.contact-cards,.form-grid,.specs-quick,.posts{grid-template-columns:1fr} .brands{grid-template-columns:repeat(3,1fr)} .catalog{grid-template-columns:1fr} .catalog > aside{position:static} .thumb{width:72px;height:72px} .header-main{gap:10px} .search-go{display:none} .btn-catalog{width:52px;padding:0;justify-content:center} .wrap{padding:0 16px} } /* Utility */ @media(max-width:760px){.only-desktop{display:none!important}} /* Відступи-утиліти: з !important, бо вони замінюють колишні інлайн-стилі, які перемагали будь-який селектор. Без нього .mb-18 на заголовку програє компонентному правилу на кшталт .symptom-box h2 — і відступ тихо їде. */ .mt-4{margin-top:4px!important}.mt-8{margin-top:8px!important}.mt-10{margin-top:10px!important}.mt-12{margin-top:12px!important}.mt-14{margin-top:14px!important}.mt-16{margin-top:16px!important}.mt-18{margin-top:18px!important}.mt-20{margin-top:20px!important}.mt-24{margin-top:24px!important}.mt-32{margin-top:32px!important}.mt-48{margin-top:48px!important} .mb-12{margin-bottom:12px!important}.mb-18{margin-bottom:18px!important}.mb-20{margin-bottom:20px!important}.mb-24{margin-bottom:24px!important} .pb-64{padding-bottom:64px!important} /* Ширина тексту: .lead та описи обмежуються по-різному на різних сторінках. */ .mw-52ch{max-width:52ch}.mw-54ch{max-width:54ch}.mw-62ch{max-width:62ch}.mw-64ch{max-width:64ch}.mw-640{max-width:640px} .link-u{text-decoration:underline} /* Кеглі великих заголовків: замість чисел у розмітці. */ .title-lg{font-size:clamp(30px,3.6vw,46px)} /* каталог, архіви */ .title-md{font-size:clamp(24px,2.6vw,34px)} /* картка товару, пошук */ .title-sm{font-size:clamp(22px,2.4vw,30px)} /* заголовки форм */ .bg-white{background:#fff} .bg-beige{background:var(--beige)} .text-center{text-align:center} .mx-auto{margin-left:auto;margin-right:auto} .maxw-60{max-width:60ch} /* ========================================================================== ДОСТУПНІСТЬ ========================================================================== */ /* ---------- Дрібні модифікатори (винесені з інлайн-стилів) ---------- */ .footer-mail{margin-top:16px} .footer-mail b{font-size:15px} .disclaimer b{color:#fff} .promo--orange h2{color:#fff} .page-head--flush{padding-top:8px} .hero-inner--short{padding-top:clamp(30px,4vw,56px)} /* padding-top окремо: шорткат затре бокові відступи .wrap */ .usp--bare{border:0;padding:0} .section--beige{background:var(--beige)} .split--top{align-items:start} .row-wrap--split{justify-content:space-between;align-items:flex-end} .faq-q .plus svg{width:16px} .check--top{align-items:flex-start} .check--top .box{margin-top:2px} .map-badge{position:absolute;left:22px;bottom:22px;background:#fff;border-radius:8px;padding:16px 20px;border:1px solid var(--line)} .map-badge b{display:block} /* Пастка для ботів на контактній формі: людині поле не видно. */ .hp{position:absolute;left:-9999px} .pdp-head .p-brand{font-size:12.5px} .f-apply{margin:14px 0 16px} .toolbar__count b{color:var(--ink)} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0; } .skip-link{ position:absolute;left:16px;top:-100px;z-index:200;background:var(--ink);color:#fff; padding:12px 20px;border-radius:8px;font-weight:500;font-size:15px;transition:top .18s; } .skip-link:focus{top:12px} main:focus{outline:none} html{scroll-padding-top:calc(var(--header-now) + 24px)} .scroller:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r-s)} ul li::marker,ol li::marker{content:""} .field-err{margin-top:6px;font-size:13px;font-weight:600;color:#B32020} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#B32020} .form-status{padding:14px 18px;border-radius:var(--r-s);font-size:14.5px;font-weight:600} .form-status[data-state="error"]{background:#FFF6F6;border:1px solid rgba(179,32,32,.3);color:#8a3232} .form-status[data-state="ok"]{background:var(--green-50);border:1px solid rgba(21,127,67,.3);color:#0F5F33} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} } .mega-note{background:var(--beige);border-radius:var(--r-l);padding:24px;height:100%} .mega-note .btn--ghost{border-color:var(--ink)} .qty input[type=number]{-moz-appearance:textfield;appearance:textfield} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .gallery-main .ph{width:100%;height:100%;object-fit:cover} .thumb .ph{width:100%;height:100%;object-fit:cover} .post-media:empty{background:var(--beige);min-height:160px} .person-photo:empty{background:var(--beige)} .crumbs svg{width:13px;height:13px;opacity:.5} /* ========================================================================== КОШИК ТА ОФОРМЛЕННЯ Власні шаблони теми (/woocommerce/), не оверрайди дефолтної розмітки Woo. Принцип: це не сторінка магазину, а форма, яку людина хоче швидко закрити. Нуль декору, ієрархія типографікою, товар — головний об'єкт на екрані. ========================================================================== */ /* --- Службовий текст Woo. Правило МАЄ бути тут: woocommerce.css ми не вантажимо взагалі, і без цього підписи стають видимим текстом і розпирають сторінку (у попередньому проєкті — до 658px на екрані 390px). --- */ .screen-reader-text{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } /* Ціни моноширинні за цифрами — інакше при зміні кількості числа стрибають. */ .shop-flow .amount,.shop-flow .woocommerce-Price-amount, .shop-flow .ci-price,.shop-flow .ci-sum, .shop-flow .summary-table td,.shop-flow .ro-table td, .shop-flow .ty-facts strong{font-variant-numeric:tabular-nums} /* ---------- Каркас сторінки ---------- */ /* Кошик/чекаут/кабінет сидять на

і успадковували верхній відступ .section: 63px до хлібних крихт проти 0 у каталозі, тобто h1 стояв на 138px замість 57px. Знімаємо — повітря вгорі дають самі крихти своїм padding:18px 0, як і на решті сторінок. Селектор .wrap.shop-flow, а не .shop-flow: інакше програє @media(max-width:760px){.section{padding-top:34px}} нижче за файлом. Тільки padding-top лонгхендом — шорткат затер би бокові відступи .wrap. */ .wrap.shop-flow{padding-top:0} /* Кошик і чекаут — сторінки функціональні, заголовок тут не має домінувати. Було .h1 = 52px, тобто більший навіть за каталог (46px). Ставимо ту саму шкалу, що в картки товару й результатів пошуку (.title-md). */ .shop-flow__title{font-size:clamp(24px,2.6vw,34px);margin:18px 0 26px} .shop-flow .woocommerce{display:block} .shop-flow .woocommerce-notices-wrapper:not(:empty){margin-bottom:20px} /* Ціна зі знижкою всюди «нова → стара закреслена»: Woo віддає першим. */ .shop-flow del{order:2;color:var(--muted);font-size:.86em;font-weight:400} .shop-flow ins{order:1;text-decoration:none;font-weight:600} .shop-flow .ci-price,.shop-flow .ci-sum, .shop-flow .ci-price > .price,.shop-flow .ci-price > ins,.shop-flow .ci-price > del, .shop-flow .product-total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .shop-flow .ci-price > .price{display:inline-flex} /* ========================================================================== КОШИК ========================================================================== */ .woocommerce-cart .shop-flow .woocommerce{ display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:26px;align-items:start; } .woocommerce-cart .shop-flow .woocommerce-notices-wrapper{grid-column:1 / -1} .cart-form{margin:0;min-width:0} .cart-items{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden} /* Шапка колонок — та сама сітка, що й рядок. Для скрінрідера це шум: кожна комірка рядка й так має свій підпис (.ci-label / aria-label). */ .cart-items .cart-head,.cart-items .cart_item{ display:grid; grid-template-columns:88px minmax(0,1fr) 118px 128px 104px 36px; grid-template-areas: "thumb name price qty sum remove" "thumb attrs price qty sum remove"; column-gap:16px;align-items:center; } .cart-items .cart-head{ grid-template-areas:"thumb name price qty sum remove"; padding:14px 20px;border-bottom:1px solid var(--line); font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); } .cart-head .ch-product{grid-area:name} .cart-head .ch-price{grid-area:price} .cart-head .ch-qty{grid-area:qty} .cart-head .ch-sum{grid-area:sum;text-align:right} .cart-items .cart_item{padding:18px 20px;border-bottom:1px solid var(--line-2)} .cart-items .cart_item:last-of-type{border-bottom:0} .ci-thumb{grid-area:thumb;align-self:start} .ci-thumb img{ width:88px;height:88px;object-fit:cover;border-radius:var(--r-s); background:var(--cream);border:1px solid var(--line-2); } .ci-name{grid-area:name;font-size:15.5px;font-weight:500;line-height:1.35;align-self:end} .ci-name a:hover{color:var(--orange)} .ci-brand{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .ci-attrs{grid-area:attrs;align-self:start} .ci-attrs:empty{display:none} .ci-attr{display:block;font-size:13px;color:var(--muted);margin-top:4px} .ci-attr--wait{display:inline-flex;align-items:center;gap:7px} .ci-attr--wait::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none} .ro-wait{color:var(--blue)} .ci-price{grid-area:price;font-size:14.5px;color:var(--muted)} .ci-qty{grid-area:qty} .ci-sum{grid-area:sum;font-size:17px;font-weight:600;justify-content:flex-end} .ci-remove{grid-area:remove;justify-self:end} .cart-items .ci-label{display:none} /* Woo фарбує a.remove у червоний з !important — потрібна вища специфічність. */ .cart-items .product-remove a.remove{ display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-s); border:1px solid var(--line);background:#fff;color:var(--muted)!important; font-size:0;text-decoration:none;transition:border-color .15s,color .15s; } .cart-items .product-remove a.remove:hover{border-color:var(--red);color:var(--red)!important;background:#fff!important} .cart-items .product-remove a.remove svg{width:15px;height:15px} /* ---------- Кількість: − / + з автозбереженням ---------- */ .ml-qty{ display:inline-flex;align-items:center;height:44px; border:1px solid var(--line-input);border-radius:var(--r-m);overflow:hidden;background:#fff; } .ml-qty .qty-step{ width:38px;height:100%;display:grid;place-items:center; font-size:17px;font-weight:500;line-height:1;color:var(--muted);transition:color .15s,background .15s; } .ml-qty .qty-step:hover{color:var(--ink);background:var(--cream)} .ml-qty input{ width:44px;height:100%;text-align:center;border:0;outline:0;background:none; font-size:15px;font-weight:500;font-variant-numeric:tabular-nums; -moz-appearance:textfield;appearance:textfield; } .ml-qty input::-webkit-outer-spin-button,.ml-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .ml-qty.is-static input{width:56px} .ml-qty.is-busy{border-color:var(--orange)} /* ---------- Дії: купон-акордеон ---------- */ .cart-actions{padding:16px 20px;border-top:1px solid var(--line)} .cart-coupon{max-width:420px} .coupon-toggle{ display:flex;align-items:center;gap:8px;padding:0; font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .15s; } .coupon-toggle:hover{color:var(--ink)} .coupon-toggle i{ width:22px;height:22px;display:grid;place-items:center;border-radius:4px; background:var(--cream);border:1px solid var(--line);font-style:normal;font-size:14px;line-height:1; transition:transform .2s; } .coupon-toggle[aria-expanded="true"] i{transform:rotate(45deg)} .coupon{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap} .coupon .input-text{ flex:1;min-width:160px;height:46px;border-radius:var(--r-m);border:1px solid var(--line-input); background:#fff;padding:0 14px;font-size:15px;outline:0;transition:border-color .15s; } .coupon .input-text:focus{border-color:var(--ink)} .coupon-apply{height:46px;padding:0 20px;font-size:14.5px} .coupon-error-notice{flex:1 0 100%;font-size:13px;font-weight:500;color:#B32020;margin:0} .cart-update{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- Порожній кошик ---------- */ .cart-empty{ grid-column:1 / -1;text-align:center;padding:64px 24px 56px; background:#fff;border:1px solid var(--line);border-radius:var(--r-l); } .cart-empty__icon{width:52px;height:52px;color:var(--sand);margin:0 auto 20px} .cart-empty h2{margin-bottom:10px} .cart-empty__lead{max-width:46ch;margin:0 auto 26px} .cart-empty .btn{margin-inline:auto} .cart-empty__usp{ display:flex;justify-content:center;gap:28px;flex-wrap:wrap; margin-top:38px;padding-top:26px;border-top:1px solid var(--line-2); font-size:13.5px;color:var(--muted); } .cart-empty__usp li{display:flex;align-items:center;gap:8px} .cart-empty__usp svg{width:17px;height:17px;color:var(--sand)} /* ========================================================================== ПІДСУМОК (кошик і чекаут — спільні класи) ========================================================================== */ .cart-collaterals,.co-aside{min-width:0} .ml-summary,.co-aside__inner{ background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px; } .cart-collaterals,.co-aside{position:sticky;top:calc(var(--header-now) + 16px)} .summary-title{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:16px} /* Прогрес до безкоштовної доставки — рахується від суми ЗІ знижкою. */ .freeship{margin:0 0 18px;padding:14px 16px;border-radius:var(--r-m);background:var(--beige)} .freeship.is-done{background:var(--green-50)} .freeship__text{font-size:13.5px;line-height:1.4;display:flex;align-items:center;gap:7px} .freeship__text b{font-weight:600} .freeship__text svg{width:15px;height:15px;color:var(--green);flex:none} .freeship__bar{height:4px;border-radius:2px;background:rgba(27,26,23,.12);margin-top:10px;overflow:hidden} .freeship__bar i{display:block;height:100%;background:var(--orange);border-radius:2px;transition:width .4s ease} .freeship.is-done .freeship__bar{display:none} .summary-table,.ro-totals{width:100%;border-collapse:collapse} .summary-table th,.summary-table td, .ro-totals th,.ro-totals td{ border:0;padding:11px 0;font-size:14.5px;text-align:left;vertical-align:top; } .summary-table tr,.ro-totals tr{border-bottom:1px solid var(--line-2)} .summary-table th,.ro-totals th{color:var(--muted);font-weight:400;padding-right:14px} .summary-table td,.ro-totals td{text-align:right;font-weight:500;white-space:nowrap} .summary-table .order-total th,.summary-table .order-total td, .ro-totals .order-total th,.ro-totals .order-total td{ padding-top:15px;font-size:19px;font-weight:600;color:var(--ink); } .summary-table .order-total,.ro-totals .order-total{border-bottom:0} .summary-table .cart-discount td,.ro-totals .cart-discount td{color:var(--orange)} /* Не «безкоштовно», а «за тарифами перевізника» — зелений тут читався як вигода, тому просто приглушений текст. */ .is-rate,.ship-rate{color:var(--muted);font-weight:400;font-size:13.5px} .summary-table #shipping_method{display:flex;flex-direction:column;gap:6px;align-items:flex-end} .summary-table #shipping_method label{font-weight:500;cursor:pointer} .woocommerce-shipping-destination,.shipping-calculator-button{display:none} .ship-hint{color:var(--muted);font-weight:400;font-size:13.5px} .wc-proceed-to-checkout{padding-top:18px} .wc-proceed-to-checkout .checkout-button{width:100%;height:54px;font-size:16px} .summary-usp{ margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2); display:flex;flex-direction:column;gap:9px;font-size:12.5px;line-height:1.4;color:var(--muted); } .summary-usp li{display:flex;align-items:flex-start;gap:9px} .summary-usp svg{width:15px;height:15px;color:var(--sand);flex:none;margin-top:1px} /* ========================================================================== ЧЕКАУТ ========================================================================== */ .co-form{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px;align-items:start} .co-main{min-width:0;display:flex;flex-direction:column;gap:18px} .co-form .woocommerce-NoticeGroup,.co-form .woocommerce-error{grid-column:1 / -1} .co-sec{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px} .co-sec__title{ display:flex;align-items:center;gap:12px;margin-bottom:20px; font-size:19px;font-weight:600;letter-spacing:-.015em; } /* Номер секції — дешевий спосіб показати довжину шляху без степпера. */ .co-step{ width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:var(--r-s); background:var(--cream);border:1px solid var(--line); font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted); } #customer_details{display:contents} .woocommerce-billing-fields{display:contents} .woocommerce-shipping-fields:empty{display:none} /* ---------- Поля ---------- */ .co-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px} .co-form .form-row{margin:0 0 16px;padding:0;display:block;min-width:0} .co-form .form-row-wide,.co-form .create-account, .co-form .form-row.notes,.co-form #order_comments_field{grid-column:1 / -1} .co-form label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:7px} .co-form label .required{color:var(--red);text-decoration:none;margin-left:2px} .co-form label .optional{color:var(--muted);font-weight:400} .co-form .woocommerce-input-wrapper{display:block;width:100%} .co-form .input-text,.co-form textarea,.co-form select{ width:100%;height:50px;border-radius:var(--r-m);border:1px solid var(--line-input);background:#fff; padding:0 15px;font:inherit;font-size:15px;outline:0;transition:border-color .15s; } .co-form textarea{height:auto;min-height:104px;padding:13px 15px;resize:vertical;line-height:1.5} .co-form .input-text:focus,.co-form textarea:focus,.co-form select:focus{border-color:var(--ink)} .co-form ::placeholder{color:rgba(27,26,23,.36)} /* Червону рамку лишаємо, зелену «валідно» прибираємо: обрамлення половини форми зеленим — візуальний шум. І не підсвічуємо поля до першої взаємодії. */ .co-form .woocommerce-invalid .input-text, .co-form .woocommerce-invalid textarea, .co-form .woocommerce-invalid select{border-color:var(--red)} .co-form .woocommerce-validated .input-text, .co-form .woocommerce-validated textarea, .co-form .woocommerce-validated select{border-color:var(--line-input)} .co-form .woocommerce-invalid input:focus{border-color:var(--red)} .co-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;color:var(--ink-2);cursor:pointer} .co-check input{margin-top:2px;accent-color:var(--orange);width:17px;height:17px;flex:none} /* ---------- Месенджер для зв'язку ---------- */ .co-form .form-row .description,.ml-tg-note{ display:block;margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted); } /* Підпис лежить усередині .woocommerce-input-wrapper, тобто всередині сітки карток — без цього він став би четвертою коміркою поруч із месенджерами. */ .ml-messenger .description{grid-column:1 / -1;margin-top:2px} /* Woo ставить зірочку «обов'язкове» на КОЖНУ мітку радіо — досить однієї на полі. */ .ml-messenger label.radio .required{display:none} .ml-messenger .woocommerce-input-wrapper{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px} /* Радіо ховаємо, а карткою робимо саму мітку: розмітка Woo — плоскі input+label поруч, тож :checked + label дає підсвітку без JS. */ .ml-messenger input[type="radio"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .ml-messenger label.radio{ display:flex;align-items:center;justify-content:center;gap:9px;margin:0; min-height:44px;padding:0 12px;border:1px solid var(--line-input);border-radius:var(--r-s); background:#fff;font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer; transition:border-color .15s,background .15s; } .ml-messenger label.radio:hover{border-color:var(--ink)} .ml-messenger input[type="radio"]:checked + label.radio{border-color:var(--ink);background:var(--cream)} .ml-messenger input[type="radio"]:focus-visible + label.radio{outline:2px solid var(--ink);outline-offset:2px} .ml-messenger.woocommerce-invalid label.radio{border-color:var(--red)} /* Telegram username — з'являється лише після вибору Telegram. */ .co-form .form-row.ml-tg{display:none} /* Те саме правило для форми «купівля в 1 клік»: там поля — .field, а не .form-row. */ .ml-qo__form .field.ml-tg{display:none} .ml-qo__form .field.ml-tg.is-shown{display:block;animation:ml-notice-in .18s ease-out} .co-form .form-row.ml-tg.is-shown{display:block;animation:ml-notice-in .18s ease-out} .ml-tg-note{margin:0 0 9px;padding:11px 13px;background:var(--blue-50);border-radius:var(--r-s);color:var(--ink-2)} /* ---------- Способи доставки й оплати: картки з радіо ---------- */ .co-subblock{margin-top:2px;padding-top:16px;border-top:1px solid var(--line-2)} .co-subblock .shipping_address{margin-top:14px} /* Поля іншої адреси показуємо лише коли чекбокс увімкнено — робить checkout.js через slideDown, тож стартовий стан задаємо тут. */ .woocommerce-shipping-fields .shipping_address{display:none} #ml-shipping{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)} #ml-shipping:empty{display:none} .ship-methods,.pay-methods{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none} .ship-method,.pay-method{ position:relative;border:1px solid var(--line-input);border-radius:var(--r-m); transition:border-color .15s,background .15s; } .ship-method:hover,.pay-method:hover{border-color:var(--ink)} /* :has() підсвічує всю картку без жодного рядка JS */ .ship-method:has(input:checked),.pay-method:has(input:checked){border-color:var(--ink);background:var(--cream)} .ship-method > input[type="radio"],.pay-method > input[type="radio"]{ position:absolute;left:17px; /* Вирівняно по ПЕРШОМУ РЯДКУ назви, не по центру картки: у методів з описом картка вдвічі вища й center зсунув би кружечок до опису. Заміряно: padding 15px + half line-height 22px/2 = 26px. */ top:26px;transform:translateY(-50%); appearance:none;-webkit-appearance:none;margin:0; width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line-input); background:#fff;cursor:pointer;transition:border-color .15s; } .ship-method > input[type="radio"]:checked,.pay-method > input[type="radio"]:checked{ border-color:var(--orange);border-width:6px; } .ship-method > input[type="radio"]:focus-visible,.pay-method > input[type="radio"]:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .ship-method > label,.pay-method > label{ display:flex;align-items:center;justify-content:space-between;gap:14px; margin:0;padding:15px 17px 15px 48px;min-height:52px; font-size:15px;font-weight:500;color:var(--ink);line-height:22px;cursor:pointer; } .ship-name,.pay-title{min-width:0} .ship-cost{font-size:14.5px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums} .pay-icon img{display:inline-block;max-height:22px;width:auto} .payment_box{ margin:0;padding:0 17px 15px 48px; font-size:13.5px;line-height:1.5;color:var(--muted); } /* Коли гейтвей один, WooCommerce ховає радіо своїм JS (init_payment_methods). Ховаємо його і в CSS — щоб без JS вигляд збігався — і прибираємо відступ, інакше зліва лишається порожня колонка 48px. */ .pay-methods.is-single > .pay-method > input[type="radio"]{display:none} .pay-methods.is-single > .pay-method > label{padding-left:17px} .pay-methods.is-single > .pay-method .payment_box{padding-left:17px} .payment_box p{margin:0} .ship-empty,.pay-none{font-size:14px;color:var(--muted);margin:0} .co-noscript{font-size:13.5px;color:var(--muted);margin-bottom:10px} /* ---------- Підсумок замовлення ---------- */ .ro-table{width:100%;border-collapse:collapse;border:0} .ro-items td{border:0;padding:0 0 14px;vertical-align:top} .ro-items tr:last-child td{padding-bottom:16px} /* width:100% віддає колонці назви всю вільну ширину, а ціні лишає рівно стільки, скільки їй треба. Без цього таблиця ділила місце за вмістом: nowrap на ціні перетягував ширину на себе, і назва товару ламалась по одному слову в рядок. */ .ro-items .product-name{width:100%;min-width:0} .ro-items .product-total{text-align:right;font-weight:600;font-size:15px;white-space:nowrap;padding-left:12px;width:1%} .ro-item{display:flex;gap:13px;align-items:flex-start;min-width:0} /* Лічильник — ВСЕРЕДИНІ мініатюри: винесений назовні він наїжджає на довгі назви. */ .ro-thumb{position:relative;flex:none;width:56px;height:56px} .ro-thumb .ro-img{width:56px;height:56px;object-fit:cover;border-radius:var(--r-s);background:var(--cream);border:1px solid var(--line-2)} .ro-qty{ position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px; border-radius:var(--r-pill);background:var(--ink);color:#fff;border:2px solid #fff; font-size:11.5px;font-weight:600;font-style:normal;line-height:17px;text-align:center; font-variant-numeric:tabular-nums; } .ro-meta{display:flex;flex-direction:column;gap:3px;min-width:0} .ro-name{font-size:14.5px;font-weight:500;line-height:1.35;overflow-wrap:anywhere} .ro-sub{font-size:12.5px;color:var(--muted)} .ro-totals{border-top:1px solid var(--line)} .ro-totals tr:first-child th,.ro-totals tr:first-child td{padding-top:14px} /* ---------- Кнопка й зноска ---------- */ .co-cta{margin-top:20px} .co-submit{width:100%;height:56px;font-size:16.5px} .co-submit:disabled{opacity:.5;cursor:default} .co-legal{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--muted)} .co-legal a{text-decoration:underline} .woocommerce-privacy-policy-text{font-size:11.5px;line-height:1.5;color:var(--muted);margin:12px 0 0} .woocommerce-privacy-policy-text a{text-decoration:underline} .woocommerce-terms-and-conditions-wrapper{margin-top:14px} .co-guard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px;font-size:15px} /* ========================================================================== СТОРІНКА «ДЯКУЄМО» ========================================================================== */ .ty{max-width:760px} .ty-head{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:32px;text-align:center} .ty-head--fail{background:#FFF6F6;border-color:rgba(217,59,59,.3)} .ty-check{width:52px;height:52px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:var(--green-50)} .ty-check svg{width:24px;height:24px;color:var(--green)} .ty-head h2{margin-bottom:10px} .ty-head .lead{max-width:46ch;margin-inline:auto} .ty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px} .ty-facts{ list-style:none;margin:18px 0 0;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l); display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px; } .ty-facts li{display:flex;flex-direction:column;gap:5px} .ty-facts span{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .ty-facts strong,.ty-facts strong *{font-size:15.5px;font-weight:600;color:var(--ink)} .ty-steps{counter-reset:ty;list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ty-steps li{counter-increment:ty;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:20px} .ty-steps li::before{ content:counter(ty);display:grid;place-items:center;width:28px;height:28px;margin-bottom:12px; border-radius:var(--r-s);background:var(--cream);border:1px solid var(--line); font-size:12.5px;font-weight:600;color:var(--muted); } .ty-steps b{display:block;font-size:15px;font-weight:600;margin-bottom:5px} .ty-steps span{font-size:13.5px;line-height:1.5;color:var(--muted)} .ty > p:not([class]){ margin-top:18px;padding:16px 20px;border-radius:var(--r-l); background:var(--beige);font-size:14.5px;line-height:1.5; } .ty-more{margin-top:22px;font-size:14px;color:var(--muted)} .ty-more a{color:var(--ink);text-decoration:underline} .ty .woocommerce-order-details,.ty .woocommerce-customer-details{margin-top:28px} .ty h2:not(.h2){font-size:17px;font-weight:600;margin:0 0 12px} .woocommerce-table--order-details,.woocommerce-table--customer-details{ width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden; } .woocommerce-table--order-details th,.woocommerce-table--order-details td{ border:0;border-bottom:1px solid var(--line-2);padding:13px 18px;font-size:14.5px;text-align:left; } .woocommerce-table--order-details td:last-child,.woocommerce-table--order-details th:last-child{text-align:right} .woocommerce-table--order-details tfoot th{color:var(--muted);font-weight:400} .woocommerce-table--order-details tr:last-child th,.woocommerce-table--order-details tr:last-child td{border-bottom:0} .woocommerce-customer-details address{ font-style:normal;background:#fff;border:1px solid var(--line);border-radius:var(--r-l); padding:18px 20px;font-size:14.5px;line-height:1.7; } /* ========================================================================== ПОВІДОМЛЕННЯ ТА AJAX-ОВЕРЛЕЙ ========================================================================== */ .ml-notice{ margin:0 0 14px;padding:15px 18px;border-radius:var(--r-m); font-size:14.5px;line-height:1.45;list-style:none; animation:ml-notice-in .22s ease-out; } .ml-notice__icon{width:18px;height:18px;flex:none;margin-top:1px} .ml-notice--ok{background:var(--green-50);border:1px solid rgba(21,127,67,.28);color:#0F5F33} .ml-notice--info{background:var(--blue-50);border:1px solid var(--blue-soft);color:var(--ink)} .ml-notice--error{background:#FFF6F6;border:1px solid rgba(179,32,32,.28);color:#8a3232} /* Повідомлення-плашка (успіх, інфо): іконка + текст в один рядок. */ div.ml-notice{display:flex;align-items:flex-start;gap:11px} div.ml-notice a{text-decoration:underline;font-weight:500} div.ml-notice a.button{ display:inline-flex;align-items:center;height:30px;padding:0 14px;margin-left:6px; border-radius:var(--r-s);border:1px solid currentColor;font-size:13.5px;font-weight:500; text-decoration:none;white-space:nowrap; } div.ml-notice a.button:hover{background:rgba(255,255,255,.6)} /* Список помилок валідації: рядок на кожне поле, а не сім штук в один ряд. */ ul.ml-notice{display:block} ul.ml-notice > li{display:flex;align-items:flex-start;gap:11px;list-style:none} ul.ml-notice > li + li{margin-top:9px;padding-top:9px;border-top:1px solid rgba(179,32,32,.14)} ul.ml-notice > li > a{ display:flex;align-items:flex-start;gap:11px;min-width:0; color:inherit;text-decoration:none;font-weight:400; } ul.ml-notice > li > a:hover span{text-decoration:underline} ul.ml-notice strong{font-weight:600} /* Woo фокусує плашку програмно для скрінрідера — рамку показуємо лише при клавіатурній навігації, інакше вона читається як важкий чужий бордер. */ .ml-notice:focus{outline:none} .ml-notice:focus-visible{outline:2px solid currentColor;outline-offset:2px} /* Підпис під конкретним полем — WooCommerce додає його сам. */ .checkout-inline-error-message{ margin:7px 0 0;font-size:12.5px;font-weight:500;line-height:1.4;color:#B32020; animation:ml-notice-in .18s ease-out; } .woocommerce-NoticeGroup{animation:ml-notice-in .22s ease-out} @keyframes ml-notice-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .added_to_cart{display:none} .header-cart__count.is-empty{display:none} /* Дефолтний білий оверлей blockUI виглядає як збій — фарбуємо у фон бренду й додаємо власний спінер (woocommerce.css ми не вантажимо). */ .blockUI.blockOverlay{background:var(--cream)!important;opacity:.72!important} .blockUI.blockOverlay::before{ content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px; border:2px solid var(--sand);border-top-color:var(--orange);border-radius:50%; animation:ml-spin .7s linear infinite; } @keyframes ml-spin{to{transform:rotate(360deg)}} /* ========================================================================== МОБІЛЬНА АДАПТАЦІЯ ========================================================================== */ @media (max-width:1180px){ .woocommerce-cart .shop-flow .woocommerce{grid-template-columns:minmax(0,1fr) 330px;gap:20px} .co-form{grid-template-columns:minmax(0,1fr) 350px;gap:20px} .cart-items .cart-head,.cart-items .cart_item{grid-template-columns:80px minmax(0,1fr) 104px 118px 96px 34px;column-gap:12px} .ci-thumb img{width:80px;height:80px} } @media (max-width:960px){ .woocommerce-cart .shop-flow .woocommerce,.co-form{grid-template-columns:minmax(0,1fr)} /* Липкий підсумок на мобільному перекриває вміст і читається як чужий елемент поверх сторінки — просто йде в потоці, останнім. */ .cart-collaterals,.co-aside{position:static} .co-main{order:1} .co-aside{order:2} .ty-steps{grid-template-columns:1fr} } @media (max-width:760px){ .shop-flow__title{margin:14px 0 20px} .cart-items .cart-head{display:none} /* Фото ліворуч на всю висоту, решта — стовпчиком праворуч. Дефолт (ціна й кількість під фото) лишає порожнечу праворуч і тягне рядок. */ .cart-items .cart_item{ grid-template-columns:76px minmax(0,1fr) auto; grid-template-areas: "thumb name remove" "thumb attrs attrs" "thumb price price" "thumb qty sum"; column-gap:14px;row-gap:6px;align-items:start;padding:16px; } .ci-thumb img{width:76px;height:76px} .ci-name{align-self:start;font-size:15px} .ci-price{font-size:13.5px} .ci-qty{align-self:center;margin-top:4px} .ci-sum{align-self:center;margin-top:4px;font-size:16px} .co-sec,.ml-summary,.co-aside__inner{padding:20px 18px} .co-grid{grid-template-columns:1fr;gap:0} /* Власний вертикальний падінг у .form-row на телефоні зайвий: рядки й так не злипаються, а сторінка росте. */ .co-form .form-row{margin-bottom:13px} .co-form .input-text,.co-form textarea,.co-form select{font-size:16px} /* 16px — щоб iOS не зумив форму */ .ml-messenger .woocommerce-input-wrapper{grid-template-columns:1fr;gap:8px} .ml-messenger label.radio{min-height:44px;justify-content:flex-start} .ship-method > label,.pay-method > label{padding:14px 15px 14px 45px;min-height:48px} .ship-method > input[type="radio"],.pay-method > input[type="radio"]{left:15px;top:25px} .payment_box{padding:0 15px 14px 45px} .pay-methods.is-single > .pay-method > label{padding-left:15px} .pay-methods.is-single > .pay-method .payment_box{padding-left:15px} .cart-empty{padding:48px 18px 40px} .cart-empty__usp{gap:14px;flex-direction:column;align-items:center} .ty-head{padding:26px 20px} .ty-facts{padding:18px 20px;gap:14px} } @media (max-width:420px){ .cart-items .cart_item{grid-template-columns:64px minmax(0,1fr) auto;column-gap:11px;padding:14px} .ci-thumb img{width:64px;height:64px} .ci-name{font-size:14.5px} .coupon .input-text{min-width:0} } @media (prefers-reduced-motion:reduce){ .freeship__bar i{transition:none} .blockUI.blockOverlay::before,.ml-notice,.checkout-inline-error-message,.woocommerce-NoticeGroup{animation:none} .p-card:hover .ph,.p-card:hover .p-media img{transform:none} } /* ========================================================================== КАБІНЕТ ПОКУПЦЯ ТА ВХІД Та сама мова, що й кошик/чекаут: 1px межі, нуль тіней, ієрархія типографікою. ========================================================================== */ .acc{display:grid;grid-template-columns:262px minmax(0,1fr);gap:24px;align-items:start} /* ---------- Бічна навігація ---------- */ .acc-nav{ background:#fff;border:1px solid var(--line);border-radius:var(--r-l); padding:22px;position:sticky;top:calc(var(--header-now) + 16px); } .acc-user{display:flex;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--line-2)} .acc-user .avatar{width:46px;height:46px;font-size:17px} .acc-user__meta{min-width:0} .acc-user__meta b{display:block;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em} .acc-user__meta span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis} .acc-menu{display:flex;flex-direction:column;gap:2px;margin:14px 0 0} .acc-menu li{list-style:none} .acc-menu a{ display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-s); font-size:14.5px;font-weight:500;color:var(--ink-2);transition:background .15s,color .15s; } .acc-menu svg{width:18px;height:18px;color:var(--muted);flex:none;transition:color .15s} .acc-menu a:hover{background:var(--cream);color:var(--ink)} .acc-menu a:hover svg{color:var(--ink)} .acc-menu .is-active > a{background:var(--ink);color:#fff} .acc-menu .is-active > a svg{color:#fff} .acc-menu .woocommerce-MyAccount-navigation-link--customer-logout{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2)} .acc-help{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)} .acc-help__phone{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em;margin-top:8px} .acc-help__phone:hover{color:var(--orange)} .acc-help__note{display:block;font-size:12.5px;color:var(--muted);margin-top:4px} /* ---------- Вміст ---------- */ .acc-content{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:28px} .acc-hello h2{letter-spacing:-.015em} .acc-hello p{margin-top:6px} .acc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px} .acc-tile{ display:flex;flex-direction:column;gap:4px;padding:18px; border:1px solid var(--line);border-radius:var(--r-m);background:var(--cream); transition:border-color .2s ease,background .2s ease; } .acc-tile:hover{border-color:var(--sand);background:#fff} .acc-tile svg{width:20px;height:20px;color:var(--ink-2);margin-bottom:8px} .acc-tile b{font-size:19px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums} .acc-tile span{font-size:12.5px;color:var(--muted);line-height:1.4} .acc-block{margin-top:30px} .acc-block__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px} .acc-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--muted)} .acc-link:hover{color:var(--ink)} .acc-link svg{width:13px;height:13px} /* ---------- Список замовлень ---------- */ .acc-orders{display:flex;flex-direction:column;gap:0;margin:0} .acc-order{ display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:16px;align-items:center; padding:16px 0;border-bottom:1px solid var(--line-2);list-style:none; } .acc-order:last-child{border-bottom:0} .acc-orders--full .acc-order:first-child{padding-top:0} .acc-order__main{min-width:0} .acc-order__num{font-size:15.5px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .acc-order__num:hover{color:var(--orange)} .acc-order__date{display:block;font-size:12.5px;color:var(--muted);margin-top:4px} .acc-order__sum{font-size:16px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums} .acc-order__sum .amount{font-variant-numeric:tabular-nums} .acc-order__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .acc-status{ display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:var(--r-pill); font-size:12px;font-weight:500;white-space:nowrap;background:var(--cream);color:var(--muted); } .acc-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .acc-status--processing{background:var(--orange-50);color:#A83B00} .acc-status--completed{background:var(--green-50);color:#0F5F33} .acc-status--on-hold{background:var(--beige);color:var(--ink-2)} .acc-status--cancelled,.acc-status--failed,.acc-status--refunded{background:#FFF6F6;color:#8a3232} .acc-pagination{margin-top:22px;justify-content:flex-start} /* ---------- Порожній стан і дрібниці ---------- */ .acc-empty{text-align:center;padding:48px 20px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--cream);margin-top:22px} .acc-empty svg{width:42px;height:42px;color:var(--sand);margin:0 auto 16px} .acc-empty p{max-width:44ch;margin:8px auto 22px} .acc-empty .btn{margin-inline:auto} .acc-logout{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-2);font-size:13px;color:var(--muted)} .acc-logout a{text-decoration:underline;color:var(--ink)} /* ---------- Форми в кабінеті й на вході ---------- */ .acc-content .form-row,.login-form .form-row{margin:0 0 15px;padding:0;display:block} .acc-content label,.login-form label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:7px} .acc-content .required,.login-form .required{color:var(--red);text-decoration:none;margin-left:2px} .acc-content .input-text,.acc-content select,.acc-content textarea, .login-form .input-text,.login-form select{ width:100%;height:50px;border-radius:var(--r-m);border:1px solid var(--line-input);background:#fff; padding:0 15px;font:inherit;font-size:15px;outline:0;transition:border-color .15s; } .acc-content textarea{height:auto;min-height:96px;padding:12px 15px;resize:vertical} .acc-content .input-text:focus,.acc-content select:focus,.acc-content textarea:focus, .login-form .input-text:focus{border-color:var(--ink)} /* Дві колонки — сіткою, а не inline-block: у inline-block пробіл між тегами додає ~4px і рядок переноситься, поля стають одне під одним. */ .woocommerce-EditAccountForm, .acc-content .woocommerce-address-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .woocommerce-EditAccountForm > .form-row-wide, .woocommerce-EditAccountForm > fieldset, .woocommerce-EditAccountForm > p:last-of-type, .woocommerce-EditAccountForm > .clear, .acc-content .woocommerce-address-fields__field-wrapper > .form-row-wide{grid-column:1 / -1} .acc-content .clear{display:none} .acc-content fieldset{border:1px solid var(--line);border-radius:var(--r-m);padding:20px;margin:22px 0 0} .acc-content legend{font-size:15px;font-weight:600;padding:0 8px} .acc-content .woocommerce-Button,.acc-content button[type="submit"]{ display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:var(--r-m); background:var(--orange);color:#fff;font:inherit;font-weight:500;font-size:15.5px;border:0;cursor:pointer;transition:background .15s; } .acc-content .woocommerce-Button:hover,.acc-content button[type="submit"]:hover{background:var(--orange-soft)} .acc-content em,.acc-content .woocommerce-privacy-policy-text{font-size:12.5px;color:var(--muted);font-style:normal} .acc-content .clear{clear:both} .acc-content > p:first-child{color:var(--ink-2);line-height:1.6} /* Адреси */ .woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px} .woocommerce-Address{border:1px solid var(--line);border-radius:var(--r-m);padding:20px;background:var(--cream)} .woocommerce-Address-title{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px} .woocommerce-Address-title h2,.woocommerce-Address-title h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em} .woocommerce-Address-title .edit{font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:underline} .woocommerce-Address-title .edit:hover{color:var(--ink)} .woocommerce-Address address{font-style:normal;font-size:14.5px;line-height:1.7;color:var(--ink-2)} .acc-intro{font-size:14.5px;line-height:1.6;color:var(--ink-2)} /* Сторінка одного замовлення */ .woocommerce-order-details__title,.woocommerce-column__title{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:26px 0 12px} .woocommerce-MyAccount-content > p:first-child{font-size:14.5px;line-height:1.6;color:var(--ink-2)} /* Woo загортає номер, дату й статус у — браузер малює жовте виділення. */ .acc-content mark{background:none;color:var(--ink);font-weight:600;padding:0} .woocommerce-columns--addresses{display:grid;grid-template-columns:1fr 1fr;gap:18px} .woocommerce-customer-details address{ font-style:normal;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-m); padding:18px 20px;font-size:14.5px;line-height:1.7; } .woocommerce-customer-details address p{margin:0} @media (max-width:760px){.woocommerce-columns--addresses{grid-template-columns:1fr}} /* ---------- Вхід ---------- */ .login-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start} .login-wrap--two{grid-template-columns:1fr 1fr} .login-wrap--single{grid-template-columns:minmax(0,520px);justify-content:center} .login-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:30px} .login-form{margin-top:22px} .login-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 18px} .login-lost{font-size:13.5px;color:var(--muted);text-decoration:underline} .login-lost:hover{color:var(--ink)} .login-back{margin-top:18px;font-size:13.5px;color:var(--muted)} .login-back a:hover{color:var(--ink)} .login-aside{background:var(--beige);border-radius:var(--r-l);padding:30px} .login-usp{display:flex;flex-direction:column;gap:18px;margin:18px 0 0} .login-usp li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px 12px;align-items:start} .login-usp svg{width:20px;height:20px;color:var(--ink-2);grid-row:1 / span 2} .login-usp b{font-size:14.5px;font-weight:600;letter-spacing:-.01em} .login-usp span{font-size:13px;line-height:1.5;color:var(--ink-2);opacity:.8} .login-aside__note{ display:flex;gap:11px;align-items:flex-start;margin:22px 0 18px;padding:14px 16px; background:rgba(255,255,255,.6);border-radius:var(--r-m);font-size:13px;line-height:1.5;color:var(--ink-2); } .login-aside__note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ink-2)} .login-aside .btn--ghost{border-color:var(--ink)} @media (max-width:1100px){ .acc{grid-template-columns:230px minmax(0,1fr);gap:18px} .login-wrap{grid-template-columns:minmax(0,1fr) 330px} } @media (max-width:900px){ .acc{grid-template-columns:minmax(0,1fr)} .acc-nav{position:static;padding:18px} /* Меню розділів на мобільному — горизонтальна стрічка, як чіпи в каталозі. */ .acc-menu{flex-direction:row;overflow:auto;gap:8px;scrollbar-width:none;margin:14px -18px 0;padding:0 18px} .acc-menu::-webkit-scrollbar{display:none} .acc-menu a{white-space:nowrap;border:1px solid var(--line)} .acc-menu .woocommerce-MyAccount-navigation-link--customer-logout{margin:0;padding:0;border:0} .acc-help{display:none} .login-wrap,.login-wrap--two{grid-template-columns:minmax(0,1fr)} .woocommerce-Addresses{grid-template-columns:1fr} } @media (max-width:760px){ .acc-content,.login-card,.login-aside{padding:22px 18px} .acc-order{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px} .acc-order__sum{grid-column:2;grid-row:1;justify-self:end} .acc-status{grid-column:1;grid-row:2;justify-self:start} .acc-order__actions{grid-column:2;grid-row:2} .acc-content .woocommerce-form-row--first,.acc-content .form-row-first, .acc-content .woocommerce-form-row--last,.acc-content .form-row-last{width:100%;margin-right:0;display:block} .acc-content .input-text,.acc-content select,.login-form .input-text{font-size:16px} /* 16px — щоб iOS не зумив */ } /* ========================================================================== БЛОГ: СПИСОК І СТАТТЯ ========================================================================== */ .blog-head{padding:10px 0 clamp(22px,3vw,34px)} .blog-chips{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:clamp(24px,3vw,40px)} .blog-chips .chip i{font-style:normal;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums} .blog-chips .chip--active i{color:rgba(255,255,255,.65)} .chip--sm{height:32px;padding:0 13px;font-size:13px} .posts--blog{grid-template-columns:repeat(3,1fr);gap:22px} .post{display:flex;flex-direction:column} .post-body{display:flex;flex-direction:column;flex:1} .post-cat{ align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted); } .post .h4{margin:9px 0 8px} .post-meta{ display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px; font-size:12.5px;color:var(--muted); } .post-meta i{opacity:.5;font-style:normal} /* Фото «оживає» разом із карткою — так само, як у товарах. */ .post-media .ph{transition:transform .6s cubic-bezier(.22,.61,.36,1)} .post:hover{border-color:var(--sand)} .post:hover .ph{transform:scale(1.04)} .post:hover .h4{color:var(--orange)} /* ---------- Стаття ---------- */ .article-head__inner{max-width:72ch} .article-head__inner .h1{font-size:clamp(28px,3.4vw,44px);margin-top:14px} .article-lead{margin-top:16px;max-width:60ch} .article-meta{display:flex;align-items:center;gap:18px;margin-top:22px;font-size:13.5px;color:var(--muted)} .article-meta span{display:inline-flex;align-items:center;gap:7px} .article-meta svg{width:15px;height:15px} .article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start;padding-top:clamp(28px,4vw,48px)} .article-body{max-width:70ch;min-width:0} .article-body h3{font-size:21px;font-weight:500;letter-spacing:-.018em;margin:34px 0 12px} .article-body h3:first-child{margin-top:0} .article-body p{font-size:16.5px;line-height:1.72;margin-bottom:14px} .article-body ul{margin:14px 0 20px} .article-body ul li{font-size:16.5px;line-height:1.65;padding-left:24px} .article-body ul li::before{top:14px;width:11px;background:var(--orange)} .article-body b{font-weight:600} .article-body em{font-style:italic} .article-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px} .article-body a:hover{color:var(--orange)} .article-aside{position:sticky;top:calc(var(--header-now) + 16px)} .article-card{background:var(--beige);border-radius:var(--r-l);padding:24px} .article-card p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:12px 0 18px} .article-card__phone{display:block;text-align:center;margin-top:12px;font-size:16px;font-weight:600;letter-spacing:-.015em} .article-card__phone:hover{color:var(--orange)} .article-note{margin-top:clamp(30px,4vw,44px);max-width:none} @media (max-width:1100px){ .article-grid{grid-template-columns:minmax(0,1fr) 260px;gap:32px} } @media (max-width:900px){ .article-grid{grid-template-columns:minmax(0,1fr);gap:28px} .article-aside{position:static} .posts--blog{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .posts--blog{grid-template-columns:1fr} .article-body p,.article-body ul li{font-size:16px} .article-body h3{font-size:19px;margin-top:28px} .blog-chips{gap:8px} } @media (prefers-reduced-motion:reduce){ .post:hover .ph{transform:none} } /* ========================================================================== МОБІЛЬНА АДАПТАЦІЯ Нижче — усе, що стосується екранів ≤980px. Свідомо в кінці файла: частина правил перекриває блок RESPONSIVE вище джерельним порядком. Порядок секцій: шапка й меню → головна → каталог і товар → магазин і сторінки. ========================================================================== */ /* ========================================================================== МОБІЛЬНА ШАПКА, ШУХЛЯДА МЕНЮ, НИЖНІЙ БАР (чанк агента 01) Мерджити в main.css ПІСЛЯ блоку RESPONSIVE — частина правил свідомо перебиває наявні мобільні хаки, і порядок тут значить більше за специфічність. ========================================================================== */ /* ========================================================================== 1. КНОПКА МЕНЮ (мобільна сутність — на десктопі її немає взагалі) Три однакові лінії: у брендовому .burger середня вужча, і як самостійна монохромна іконка це читалось недомальованим. Тут вирівнюємо. ========================================================================== */ .icon-btn--menu{display:none} /* 2px замість брендових 2.5px: поруч із контурними іконками спрайту (штрих 1.45 на 24px ≈ 1.33px на екрані) товщі смуги читались важчими за кошик і збивали оптичну вагу ряду. */ .icon-btn--menu .burger{width:20px;gap:5px} .icon-btn--menu .burger i{height:2px} .icon-btn--menu .burger i:nth-child(2){width:100%} /* Помітний стан натискання без тіні — тільки підкладка, як усюди в темі. */ .icon-btn--menu:active{background:var(--line-2)} /* Бургер → хрестик. Зсув 7px = відстань від центра крайньої смуги до центра всієї іконки (3 смуги по 2px + два проміжки по 5px = 16px). Тривалість гасить загальне правило prefers-reduced-motion. */ .icon-btn--menu[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)} .icon-btn--menu[aria-expanded="true"] .burger i:nth-child(2){opacity:0} .icon-btn--menu[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ========================================================================== 2. ШУХЛЯДА МЕНЮ (мобільна заміна мега-меню) Розмітка є в DOM завжди, показує її JS лише на ≤760px. Закрита шухляда — visibility:hidden, тож вона не ловить фокус і не потрапляє в дерево доступності; display:none тут не годиться, бо вбив би анімацію виїзду. ========================================================================== */ /* * Три стани, а не два. `transition:visibility 0s linear .22s` (класичний трюк, * щоб догралась анімація закриття) у Chromium не доводиться до кінця: * після зняття .is-open елемент назавжди лишався visibility:visible і * невидимим шаром ловив кліки по всій сторінці. Тому окремий клас .is-closing, * який знімає JS по transitionend, — стан явний і передбачуваний. */ .ml-drawer{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none} .ml-drawer.is-closing{visibility:visible} .ml-drawer.is-open{visibility:visible;pointer-events:auto} .ml-drawer__scrim{ position:absolute;inset:0;background:rgba(27,26,23,.45); opacity:0;transition:opacity .22s ease; } .ml-drawer.is-open .ml-drawer__scrim{opacity:1} .ml-drawer__panel{ position:absolute;top:0;left:0;bottom:0;width:min(88vw,380px); display:flex;flex-direction:column; background:var(--cream);border-right:1px solid var(--line); transform:translateX(-100%);transition:transform .22s ease; } .ml-drawer.is-open .ml-drawer__panel{transform:none} .ml-drawer__panel:focus{outline:none} /* ---------- Шапка шухляди ---------- */ .ml-drawer__head{ flex:none;display:flex;align-items:center;gap:12px; padding:9px 14px;padding-top:calc(9px + env(safe-area-inset-top)); border-bottom:1px solid var(--line); } .ml-drawer__head .logo{margin-right:auto;min-height:44px} .ml-drawer__head .logo svg{width:28px;height:27px} .ml-drawer__head .logo-word{font-size:20px} /* Тап-ціль лишається 44×44, але сам хрестик дрібніший і світліший: поруч із лого великий темний ✕ читався як окрема дія, а не як «закрити». */ .ml-drawer__close{ flex:none;width:44px;height:44px;display:grid;place-items:center; border-radius:var(--r-m);color:var(--muted); transition:color .15s,background .15s; } .ml-drawer__close svg{width:17px;height:17px} .ml-drawer__close:active{color:var(--ink);background:var(--line-2)} /* ---------- Тіло шухляди ---------- */ .ml-drawer__body{ flex:1 1 auto;min-height:0; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; /* Закріпленого низу більше немає, тож нижній відступ бере на себе тіло: інакше останній пункт списку впирається в край екрана й у safe-area. */ padding:14px 14px calc(24px + env(safe-area-inset-bottom)); } .ml-drawer .search-field{height:46px;padding:0 12px 0 14px;gap:10px;margin-bottom:6px} /* align-self:stretch — щоб тапом ловилось усе поле, а не 28px рядка тексту. 16px — на меншому кеглі iOS Safari зумить сторінку при фокусі. */ .ml-drawer .search-field input{font-size:16px;align-self:stretch} .ml-drawer .search-go{display:none} /* ---------- 2. Розділи сайту (те, що на десктопі в .nav) ---------- Стоять НИЖЧЕ каталогу: «Про нас», «Контакти» й «Блог» — довідкові сторінки, по які приходять зрідка, а каталог на телефоні це головна дія. Власний підпис розділу тут обов'язковий: без нього голий список під акордеоном рубрик читався б як продовження каталогу. */ .ml-drawer__links{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid var(--line)} .ml-drawer__links a{ padding:14px 2px;border-bottom:1px solid var(--line); font-size:16px;font-weight:500;line-height:1.3;color:var(--ink); overflow-wrap:anywhere; } .ml-drawer__links a.is-accent{color:var(--orange)} /* ---------- 1. Каталог: підпис розділу + акордеон рубрик ---------- */ .ml-drawer__title{ margin:22px 0 0;font-size:12.5px;font-weight:500;line-height:1.2; text-transform:uppercase;letter-spacing:.09em;color:var(--muted); } /* Перший підпис іде одразу за полем пошуку — там 22px читались як провал. */ .ml-drawer__title--first{margin-top:12px} .ml-acc{margin-top:8px;border-top:1px solid var(--line)} .ml-acc__item{border-bottom:1px solid var(--line)} .ml-acc__row{display:flex;align-items:center;gap:4px;min-height:50px} .ml-acc__link{ flex:1 1 auto;min-width:0; padding:13px 2px;font-size:15.5px;font-weight:500;line-height:1.3; color:var(--ink);overflow-wrap:anywhere; } .ml-acc__toggle{ flex:none;width:44px;height:44px;display:grid;place-items:center; border-radius:var(--r-m);color:var(--muted); } .ml-acc__toggle svg{width:20px;height:20px;transition:transform .18s ease} .ml-acc__toggle[aria-expanded="true"]{color:var(--ink)} .ml-acc__toggle[aria-expanded="true"] svg{transform:rotate(180deg)} /* display не задаємо: інакше author-стиль переб'є [hidden] і згорнуті підрубрики лишились би на екрані. */ .ml-acc__sub{padding:0 0 10px 16px;margin-left:2px;border-left:1px solid var(--line)} .ml-acc__sub a{ display:block;padding:13px 2px;font-size:14.5px;line-height:1.3; color:var(--muted);overflow-wrap:anywhere; /* 13+13+18.9 = 44.9px тап-цілі */ } /* Тіло сторінки під відкритою шухлядою. position:fixed, а не overflow:hidden — iOS Safari ігнорує overflow на body і продовжує тягнути сторінку крізь оверлей. Зсув зберігає й повертає JS. */ body.ml-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden} /* ========================================================================== 4. ШАПКА НА ПЛАНШЕТІ Й ТЕЛЕФОНІ ========================================================================== */ @media (max-width:760px){ /* Мега-меню, помаранчева кнопка «Каталог» і рядок пошуку — виключно десктопна трійця. На телефоні шапка складається рівно з трьох елементів: лого · кошик · меню. Пошук живе всередині шухляди. */ .mega,.mega.is-open{display:none} .btn-catalog{display:none} /* Пошук лишається в шапці й на телефоні — між лого й кошиком. Раніше він жив тільки в шухляді, тобто до головної дії каталогу треба було спершу відкрити меню. ⚠️ Селектор обовʼязково через .header: WordPress вішає клас `search` на на сторінці результатів (body_class()), і голий `.search{display:none}` ховав на телефоні ВСЮ сторінку пошуку. */ .header .search{display:block;flex:1 1 auto;min-width:0} .header .search-field{height:40px;padding:0 12px;gap:8px} .header .search-field > svg{width:18px;height:18px} /* Рівно 16px: усе, що менше, iOS Safari зустрічає зумом сторінки на фокусі. */ .header .search-field input{font-size:16px;font-weight:400} /* Кнопку «Знайти» ховаємо: на 100px поля вона з'їдала б усе місце під текст, а Enter і тап по підказці працюють так само. */ .header .search-go{display:none} /* .nav на ≤980px і так схований у main.css. Дублюємо тут навмисно: якщо координатор поверне його планшетам (посилання зараз недосяжні на 761–980px), на телефоні він не має з'явитись — там ці пункти в шухляді. */ .nav{display:none} /* Один рівний ряд, усе по одній оптичній лінії, шапка 59px. Ніякого flex-wrap: переносити тут нічого. */ .header-main{ height:auto; padding-top:7px;padding-bottom:8px; /* тільки лонгхенди: shorthand стер би .wrap{padding:0 16px} */ column-gap:12px; } /* margin-right:auto більше не треба — розпірку тримає саме поле пошуку. */ .logo{flex:none} .logo svg{width:30px;height:29px} .logo-word{font-size:20px} .head-actions{gap:6px} /* Кошик із лічильником лишається в шапці — інакше кількість товарів не видно ніде. Кабінет переїхав у шухляду: на телефоні це не щоденна дія. Специфічність навмисно вища за `.icon-btn:nth-child(n)` зі старого хака, інакше він гасить і кошик, і кнопку меню. */ .header .head-actions .icon-btn--account{display:none} /* Перемикач мов у шапці на телефоні не влазить — він у шухляді. */ .header .head-actions .lang{display:none} .header .head-actions .icon-btn--cart, .header .head-actions .icon-btn--menu{display:grid;width:44px;height:44px} .icon-btn svg{width:22px;height:22px} /* Десктопний бейдж зміщений від центра на +3px і виїжджав за межі 44px кнопки — на 4px проміжку до кнопки меню це читалось як налізання. Прив'язуємо до правого краю кнопки. */ .header .icon-btn .count{top:3px;right:0;left:auto;transform:none} /* Компактний режим (клас вішає app.js після 160px прокрутки) на мобільному навмисно НІЧОГО не змінює: шапка й так 59px, а стрибок висоти під пальцем під час прокрутки помітніший за виграні 4px. Лишається тільки межа .is-stuck. */ .header.is-compact .header-main{height:auto;padding-top:7px;padding-bottom:8px} .header.is-compact .icon-btn{width:44px;height:44px} /* На 360px і вужче слово «medlink» з'їдає рівно ту сотню пікселів, що потрібна полю пошуку. Лишаємо знак — його впізнають так само. */ @media (max-width:374px){ .logo-word{display:none} } /* Топбар: два пункти не влазили в один рядок, переносились, а фіксовані 42px їх різали навпіл. Лишаємо рівно один пункт і висоту за вмістом. */ .topbar{font-size:12.5px} .topbar .wrap{height:auto;min-height:38px;gap:12px;padding-top:8px;padding-bottom:8px} .topbar-list{flex-wrap:nowrap;gap:16px} .topbar-list li{min-width:0} .topbar-list li:nth-child(n+2){display:none} } @media (max-width:420px){ /* 320px: у .wrap 288px контенту. Лого 107 + кошик 44 + проміжок 6 + меню 44 = 201; вільного поля 87px. Обрізатись нема чому навіть із довшим лого. */ .logo svg{width:28px;height:27px} .logo-word{font-size:19px} } /* ========================================================================== МОБІЛЬНА ГОЛОВНА — агент №2 Чанк для мержу в assets/css/main.css — ДОДАВАТИ В КІНЕЦЬ ФАЙЛУ. Порядок важливий: правила перекривають блок RESPONSIVE (рядки 730–770) за джерельним порядком, а не специфічністю. Десктоп не змінюється: усе, крім .cta-pharm / .cta-pharm__cta, у @media. ========================================================================== */ /* -------------------------------------------------------------------------- 1. СПІЛЬНИЙ РИТМ СЕКЦІЙ На телефоні clamp() віддає свою нижню межу (38px / 26px) — тобто число бралося з десктопної формули, а не з мобільного макета. Ставимо явні 34/24: секції все ще читаються окремими блоками, але на семи секціях головної набігає близько 60px економії. -------------------------------------------------------------------------- */ @media (max-width:760px){ .section{padding-top:34px;padding-bottom:34px} .section--tight{padding-top:24px;padding-bottom:24px} /* Було 12px — нижче нашої власної планки «текст не менший за 13px». Це надрядок над заголовком, його читають, а не лише «бачать». */ .eyebrow{font-size:13px;margin-bottom:8px} /* .h2 свідомо лишаємо на 24px (нижня межа clamp): це рівно 1.5× від body 16px і 0.75× від h1 32px — цілісна шкала. Більший кегль ламає .section-head у два ряди поруч із посиланням «Дивитися всі». */ /* ---- .section-head: заголовок + посилання в один ряд ---- Кнопка з рамкою поруч із заголовком на телефоні читається як загублений елемент керування. Але це не дія, а навігація — тож лишаємо тільки текст із підкресленням, зберігаючи тап-зону 44px по висоті. */ /* nowrap навмисно: flex вирішує перенос ДО стискання, тож із wrap довгий заголовок скидав посилання в окремий ряд (+54px). Без переносу ряду стискається сам заголовок і переходить у два рядки — це коротше й передбачуваніше. */ .section-head{gap:10px 16px;margin-bottom:18px;flex-wrap:nowrap} .section-head > div{min-width:0} .section-head > .btn--ghost, .section-head .row > .btn--ghost{ height:auto;min-height:44px;padding:0;border:0;background:none;flex:none; font-size:14.5px;font-weight:500;color:var(--muted); text-decoration:underline;text-underline-offset:4px; } .section-head .btn--ghost:hover{border-color:transparent;color:var(--ink)} .section-head .btn--ghost svg{width:15px;height:15px} } /* -------------------------------------------------------------------------- 2. HERO До правок перший корисний блок починався на ~1570px від верху — понад два екрани лише вступу. Ріжемо повітря, не ріжучи зміст. -------------------------------------------------------------------------- */ @media (max-width:760px){ /* Тільки лонгхенди: shorthand стирає .wrap{padding:0 16px} — hero тоді лягає впритул до країв екрана. */ .hero-inner{padding-top:28px;padding-bottom:32px;gap:24px} .hero .lead{margin-top:12px} /* Дві кнопки різної ширини в один стовпчик виглядали як помилка верстки. На всю ширину — і рівний стовпчик, і більша тап-зона. */ .hero-cta{gap:10px;margin-top:20px} .hero-cta .btn{flex:1 1 100%;height:52px;font-size:16px} /* УТП — це підпис довіри, а не окрема секція: 26px між рядками робили з трьох коротких фраз цілий екран. */ .hero-usp{gap:10px;margin-top:18px;padding-top:14px} .hero-usp div{gap:9px;line-height:1.35} } /* -------------------------------------------------------------------------- 3. «ЩО ВАС ТУРБУЄ» — 3 колонки замість 2 Дев'ять плиток по дві в ряд = п'ять рядів ≈ 590px. Три в ряд дають три ряди ≈ 280px і, головне, весь набір станів видно одним поглядом — це головний інструмент підбору на сайті, ховати його за скролом не можна. Горизонтальну стрічку не беремо саме тому: вона показала б 3 варіанти з 9. -------------------------------------------------------------------------- */ @media (max-width:760px){ .symptom-box{padding:16px} .symptom-box h2{margin-bottom:4px} .symptom-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px} .symptom{ padding:12px 4px;gap:6px;line-height:1.25;min-width:0; overflow-wrap:anywhere; /* «протизапальні» не має розпирати колонку */ } .symptom .ico{width:24px;height:24px} .symptom .ico svg{width:22px;height:22px} /* btn--sm — 40px, тобто нижче 44px тап-цілі. У боксі кнопка одна, піднімаємо. */ .symptom-box .btn--sm{height:46px} } /* Перекриває правило main.css рядок 765–767 (там було 2 колонки на ≤420px). На 320px плитка = 79px, підпис у два-три рядки — тісно, але читабельно, і це все одно вдвічі коротше за двоколонковий варіант. */ @media (max-width:420px){ .symptom-grid{grid-template-columns:repeat(3,1fr);gap:6px} .symptom{padding:10px 3px} } /* -------------------------------------------------------------------------- 4. КАТЕГОРІЇ Дві правки, одна економить висоту, друга її додає — разом картка коротшає, але вперше стає придатною для пальця. • Іконка переїжджає в один ряд із назвою: окремим рядком вона з'їдала 50px на кожній із шести карток і нічого не пояснювала. • Усі посилання в картці були рядками по 22px — удвічі нижче за тап-ціль. Тепер 44px кожне. Щоб картка від цього не виросла втричі, показуємо три підрозділи замість п'яти: решта — за «Перейти в розділ», а повний список рубрик є в мобільному меню. Знімається одним рядком (:nth-child). -------------------------------------------------------------------------- */ @media (max-width:760px){ .cats{gap:12px} .cat{ display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center; column-gap:12px;padding:18px;min-height:0; } .cat-ico{width:26px;height:26px;margin-bottom:0;grid-column:1;grid-row:1} .cat-ico svg{width:24px;height:24px} .cat h3{grid-column:2;grid-row:1;margin-bottom:0;font-size:18px;line-height:1.25} /* display:block, а не flex: у flex довга назва рубрики стає анонімним елементом із min-width:auto і може розпирати картку. */ .cat h3 a{display:block;padding:11px 0} .cat ul{grid-column:1 / -1;margin-top:12px;gap:0} .cat ul li:nth-child(n+4){display:none} .cat ul a{display:block;padding:11px 0;font-size:14.5px;line-height:1.6} .cat .more{grid-column:1 / -1;margin-top:0;padding-top:14px;min-height:44px} .cat--flat .more{margin-top:0;padding-top:14px} } /* -------------------------------------------------------------------------- 5. СЛАЙДЕР «ХІТИ» — головна претензія клієнта Було: звичайний overflow-x із картками по 230px, обрізаний рамками .wrap, плюс дві стрілки 40×40 у шапці секції. Стало: справжній свайп-слайдер від краю до краю. • bleed за межі .wrap (margin/padding/scroll-padding 16px) — картка починається по сітці контенту, а гортається до самого краю екрана, тож палець має всю ширину, а не 343px; • картка ~78vw — наступна визирає на ~55px, це і є запрошення свайпнути; • scroll-snap-stop:always — за один різкий свайп проскакує рівно одну картку, а не три; • стрілки ховаємо: на дотику вони дублюють жест і забирають ряд у шапці. Замість них — крапки-позиція (див. 02-home.js), бо саме позиції в стрічці бракує: «підглядання» каже що далі щось є, але не каже скільки. -------------------------------------------------------------------------- */ .scroll-dots{display:none} @media (max-width:760px){ .scroller{ gap:12px;padding-bottom:2px; margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px; overscroll-behavior-x:contain; /* свайп до кінця не тягне «назад» браузера */ } .scroller > *{flex:0 0 clamp(232px,78vw,320px);scroll-snap-align:start;scroll-snap-stop:always} /* Стрічка тепер виходить за краї екрана — зовнішній фокус-обвід виліз би за viewport, тож малюємо його всередині. */ .scroller:focus-visible{outline-offset:-2px} .scroll-nav{display:none} /* Крапки декоративні: керує стрічкою палець, а озвучення вже є на самому .scroller (role="group" + aria-label «гортається горизонтально»). Робити з них 8 кнопок означало б 8 тап-цілей по 6px — гірше, ніж жест. */ /* Крапки народжуються в JS, тому до його запуску їх у потоці немає — і поява о ~1.4с зсувала всю сторінку нижче рівно на 20px (14px відступу + 6px крапки; заміряно покадрово, header-shift.js SCOPE=page). Резервуємо це місце наперед: .scroller віддає 20px знизу, а самі крапки забирають їх назад відʼємним margin-top і сідають на дно зарезервованої смуги — візуально відступ той самий 14px, але висота секції більше не міняється. */ .scroller{margin-bottom:20px} .scroll-dots{ display:flex;justify-content:center;align-items:flex-end;gap:6px; margin-top:-20px;height:20px; pointer-events:none; } .scroll-dots i{ flex:none;width:6px;height:6px;border-radius:50%;background:var(--sand); transition:width .2s ease,background-color .2s ease; } .scroll-dots i.is-on{width:18px;border-radius:3px;background:var(--orange)} } /* -------------------------------------------------------------------------- 6. БЛОГ НА ГОЛОВНІЙ — горизонтальна картка Вертикальна картка з обкладинкою 16:9 займала ~350px, три штуки — понад екран із половиною. Фото ліворуч + текст праворуч дає ті самі три статті у ~600px і читається як список, а не як три банери. Сторінку блогу (.posts--blog) не чіпаємо: там картка — головний об'єкт. -------------------------------------------------------------------------- */ @media (max-width:760px){ .posts:not(.posts--blog){gap:12px} .posts:not(.posts--blog) .post{ display:grid;align-items:stretch; /* Не фіксовані 116px: у смузі 600–760px картка широка, і мініатюра розміром із нігтик поруч із півекраном тексту виглядає як помилка. */ grid-template-columns:clamp(116px,32%,220px) minmax(0,1fr); } .posts:not(.posts--blog) .post-media{aspect-ratio:auto;height:100%;min-height:116px} .posts:not(.posts--blog) .post-body{padding:14px 16px;min-width:0;overflow-wrap:anywhere} /* Селектор саме h3: у post-card.php заголовок —
, тож наявні в main.css правила .post h4 по ньому не влучають (див. звіт). */ .posts:not(.posts--blog) .post h3{margin:6px 0;font-size:16px;line-height:1.3} /* Анонс лишаємо, але два рядки: у 220px колонці повний абзац перетворює картку на стіну тексту, а заголовок і так несе сенс. */ .posts:not(.posts--blog) .post p{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;font-size:13.5px;line-height:1.45; } .posts:not(.posts--blog) .post-meta{padding-top:10px;gap:6px} /* 11px і 12.5px — під нашою планкою «не менше 13px». Правило спільне з блогом навмисно: там ті самі підписи й та сама проблема. */ .post-cat{font-size:13px;letter-spacing:.08em} .post-meta{font-size:13px} } /* -------------------------------------------------------------------------- 7. FAQ -------------------------------------------------------------------------- */ /* .faq-cta — гачок для мобільного відступу під кнопками FAQ. На десктопі там працює утиліта .mt-24 з шаблону, тож окремого правила не треба. */ @media (max-width:760px){ .section--faq .split{gap:26px} .section--faq .lead{margin-top:12px} .faq-cta{margin-top:18px;gap:10px} .faq-cta .btn{flex:1 1 100%} .faq{gap:8px} /* Питання в 2–3 рядки: «плюс» тримаємо біля ПЕРШОГО рядка, інакше він зависає посеред блоку і не читається як керування цим питанням. */ .faq-q{padding:15px 16px;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.35} .faq-q .plus{width:26px;height:26px;margin-top:-1px} .faq-a{padding:0 16px;font-size:15px} /* 340px вистачало на десктопну ширину; у вужчій колонці та сама відповідь дає 12+ рядків і обрізалася на півслові. */ .faq-item.is-open .faq-a{max-height:900px;padding:0 16px 16px} } /* -------------------------------------------------------------------------- 8. CTA «Не знаєте, що обрати?» (template-parts/cta-pharmacist.php) Раніше нижній відступ був інлайновим style="padding-bottom:64px" — його неможливо було перекрити з медіазапиту. Переносимо в клас; на десктопі значення те саме. -------------------------------------------------------------------------- */ .cta-pharm{padding-bottom:64px} .cta-pharm__cta{margin-top:26px} @media (max-width:760px){ .cta-pharm{padding-bottom:36px} /* .promo .btn{margin-top:26px} додавався ПОВЕРХ margin-top контейнера — під абзацом зяяло 52px порожнечі. */ .promo .row-wrap .btn{margin-top:0} .cta-pharm__cta{margin-top:18px;gap:10px} .cta-pharm__cta .btn{flex:1 1 100%;height:52px;font-size:16px} .promo-card{padding:18px} .promo-card__steps{margin-top:14px;gap:11px} .promo-card__facts{margin-top:14px;padding-top:12px} } @media (max-width:560px){ .promo{padding:24px 20px;gap:22px} } /* ========================================================================== МОБІЛЬНА АДАПТАЦІЯ: КАТАЛОГ І КАРТКА ТОВАРУ (агент №3) Мержити в main.css ПІСЛЯ блоку RESPONSIVE — частина правил свідомо перекриває наявні (див. звіт, розділ «правки поза моїми файлами»). ========================================================================== */ /* --- Нейтральні дефолти: усе мобільне на десктопі просто відсутнє --- */ .fsheet-grab, .fsheet-head, .fsheet-foot, .fsheet-backdrop{display:none} .pdp-swipe{display:none} .buybar{display:none} /* Рейка чіпів існує заради градієнта-натяку на мобільному; на десктопі — просто обгортка */ .subcats-rail{position:relative} /* Кнопка фільтрів і сортування — одна група керування над списком. На десктопі кнопка схована (#filtersToggle{display:none}), лишається select. */ .toolbar__tools{display:flex;align-items:center;gap:10px} /* Порожній стан каталогу (був інлайн-стилем у шаблоні) */ .catalog-empty{text-align:center;padding:48px} /* Пагінація: поточну сторінку WordPress віддає як , а стилі були тільки на .pagination a — «1» лишалася голим текстом поруч із кнопками. */ .pagination > span{ min-width:44px;height:44px;padding:0 14px;border-radius:6px; border:1px solid var(--line);background:#fff;display:grid;place-items:center; font-weight:500;font-size:14.5px; } .pagination > span.is-active{background:var(--ink);border-color:var(--ink);color:#fff} .pagination > span.dots{min-width:24px;padding:0;border-color:transparent;background:none;color:var(--muted)} /* ========================================================================== ≤760px — головна мобільна межа ========================================================================== */ @media (max-width:760px){ /* ---------- Хлібні крихти: один рядок, а не три ---------- */ .crumbs{ flex-wrap:nowrap;overflow-x:auto;padding:2px 16px;margin-inline:-16px; scrollbar-width:none;-ms-overflow-style:none; } .crumbs::-webkit-scrollbar{display:none} .crumbs > *{flex:none;white-space:nowrap} /* Висоту рядка з'їдають самі посилання — так крихти лишаються тап-цілями 44px */ .crumbs a{display:inline-flex;align-items:center;min-height:44px} /* ---------- Шапка сторінки ---------- */ .page-head{padding-bottom:14px} .page-head h1{margin-bottom:0} /* ---------- Чіпи підкатегорій: горизонтальна рейка ---------- Раніше 12 чіпів переносились на три рядки й з'їдали пів екрана. */ .subcats-rail{margin-top:18px;margin-bottom:20px;margin-inline:-16px} .subcats{ flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity; gap:8px;padding:2px 16px;margin-bottom:0; /* без scroll-padding снап притискає перший чіп до краю і з'їдає ліві 16px */ scroll-padding-inline:16px; scrollbar-width:none;-ms-overflow-style:none; } .subcats::-webkit-scrollbar{display:none} .subcats .chip{flex:none;height:44px;scroll-snap-align:start} /* Градієнт-натяк, що ряд їде далі. Це не тінь: площини він не додає. */ .subcats-rail::after{ content:"";position:absolute;top:0;bottom:0;right:0;width:30px;pointer-events:none; background:linear-gradient(90deg,rgba(251,248,240,0),var(--cream)); } /* ---------- Сітка товарів: дві колонки ---------- Одна колонка давала картку на пів екрана — за скрол людина бачила менше двох товарів. Дві колонки — галузевий стандарт для каталогу ліків. */ .products,.products--5,.products--3{grid-template-columns:repeat(2,1fr);gap:12px} /* ---------- Компактна картка під вузьку колонку ---------- */ .p-card{padding:10px;border-radius:var(--r-m);min-width:0} .p-media{margin-bottom:10px;border-radius:var(--r-xs)} .p-badges{top:8px;left:8px} /* Назва в три рядки: інакше сусідні картки розповзаються по висоті, а довге латинське найменування розпирає колонку. */ .p-name{ font-size:14px;line-height:1.3;margin-top:5px;min-height:0;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } /* Коротка назва давала посилання заввишки 19px. Розтягуємо його на всю картку — тап у будь-яке місце, крім «Купити», веде на товар. */ .p-name a::after{content:"";position:absolute;inset:0;z-index:1} .p-buy{position:relative;z-index:2} .p-card .p-stock{font-size:13px;margin-top:8px;gap:6px} .p-bottom{padding-top:10px} .p-price{column-gap:7px} .p-bottom{gap:8px} .p-price b{font-size:18px} .p-price s,.p-price .cur{font-size:13px} .p-add{width:42px;height:42px} .p-add svg{width:18px;height:18px} /* ---------- Тулбар: лічильник зверху, під ним «Фільтри» + сортування ---------- */ .toolbar{gap:8px 10px;margin-bottom:14px} .toolbar .spacer{display:none} .toolbar__count{flex:1 1 100%;font-size:14px} .toolbar__tools{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:10px} .toolbar__sort{min-width:0} .toolbar__sort .select{width:100%;height:44px;font-size:14px;padding:0 38px 0 14px;background-position:right 12px center} .ml-js #filtersToggle{display:inline-flex;width:100%;height:44px;margin-bottom:0} /* Без JS шухляди немає — кнопка нічого не відкриє, тож її й не показуємо. */ html:not(.ml-js) #filtersToggle{display:none} html:not(.ml-js) .toolbar__tools{grid-template-columns:1fr} /* ---------- Порядок колонок ---------- З JS фільтри живуть у шухляді, тож у потоці лишається сама лише картка консультації — їй місце ПІД товарами. Без JS форма фільтрів реальна й має бути над списком, як і була. */ .catalog{gap:0} .catalog > div{order:1} .catalog > aside{order:2} html:not(.ml-js) .catalog > aside{order:0;margin-bottom:22px} /* ---------- Фільтри: нижня шухляда ---------- Це та сама GET-форма, змінюється лише спосіб показу. */ .ml-js .filters-wrap{ position:fixed;left:0;right:0;bottom:0;z-index:101; display:flex;flex-direction:column; max-height:90vh;max-height:90dvh; background:#fff;border-top:1px solid var(--line); border-radius:var(--r-xl) var(--r-xl) 0 0; transform:translateY(101%);visibility:hidden; /* visibility без переходу «вмикається» одразу, а «вимикається» лише після зсуву — інакше на відкритті шухляда ще hidden і не бере фокус. */ transition:transform .24s ease,visibility 0s linear .24s; } .ml-js .filters-wrap.is-open{transform:none;visibility:visible;transition:transform .24s ease,visibility 0s} html:not(.ml-js) .filters-wrap{display:block} .ml-js .fsheet-grab{ display:block;flex:none;width:40px;height:4px;border-radius:2px; background:var(--line);margin:8px auto 2px; } .ml-js .fsheet-head{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none; padding:4px 12px 10px 16px;border-bottom:1px solid var(--line); } .ml-js .fsheet-head b{font-size:17px;font-weight:600;letter-spacing:-.012em} .fsheet-close{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-m);color:var(--muted)} .fsheet-close svg{width:20px;height:20px} .fsheet-close:hover{color:var(--ink)} /* Форма сама стає областю прокрутки — без зайвої обгортки */ .ml-js .filters{ flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; background:none;border:0;border-radius:0;padding:2px 16px 8px; } .ml-js .f-top{display:none} /* дублює шапку шухляди */ .ml-js .f-apply{display:none} /* дублює кнопку в закріпленому низі */ .f-head{padding:15px 0;font-size:15px;min-height:48px} .f-list{max-height:42vh} .f-search{height:44px} .check{min-height:44px} .ml-js .fsheet-foot{ display:grid;grid-template-columns:1fr 1.35fr;gap:10px;flex:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);background:#fff; } .ml-js .fsheet-foot .btn{height:48px;font-size:15px;min-width:0;padding:0 12px} .ml-js .fsheet-backdrop{ display:block;position:fixed;inset:0;z-index:100; background:rgba(27,26,23,.45);opacity:0;pointer-events:none; transition:opacity .2s ease; } .ml-js .fsheet-backdrop.is-open{opacity:1;pointer-events:auto} /* ---------- Пагінація ---------- */ .pagination{gap:6px;margin-top:28px} .pagination a,.pagination > span{min-width:44px;padding:0 10px} .pagination > span.dots{min-width:20px} /* ---------- Порожній стан ---------- */ .catalog-empty{padding:28px 18px} /* ====================================================================== КАРТКА ТОВАРУ ====================================================================== */ .pdp{gap:22px} /* ---------- Свайп-галерея ---------- */ .pdp-swipe{display:block;position:relative;margin-inline:-16px} .pdp-swipe__track{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory; overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none; } .pdp-swipe__track::-webkit-scrollbar{display:none} .pdp-swipe__slide{ flex:0 0 100%;min-width:0;scroll-snap-align:center;aspect-ratio:1/1; background:#fff;display:grid;place-items:center;overflow:hidden; } .pdp-swipe__slide .ph{width:100%;height:100%;object-fit:cover} .pdp-swipe .p-badges{top:12px;left:16px} .pdp-dots{display:flex;flex-wrap:wrap;justify-content:center;margin-top:0} /* Крапка мала, але кнопка під нею — повноцінна тап-ціль 44×44 */ .pdp-dot{width:44px;height:44px;display:grid;place-items:center} .pdp-dot::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--sand); transition:background .15s ease,transform .15s ease; } .pdp-dot.is-active::before{background:var(--orange);transform:scale(1.3)} /* Головне фото й мініатюри ховаємо лише тоді, коли слайдер справді є (у товару з одним фото .pdp-swipe не друкується). */ .pdp-swipe ~ .gallery-main, .pdp-swipe ~ .thumbs{display:none} /* ---------- Заголовок і мета ---------- */ .pdp-head{gap:10px} .pdp-head h1{overflow-wrap:anywhere} /* На вузькому екрані код під брендом, інакше довга назва бренду стискає його до переносу посеред числа. */ .pdp-brandline{flex-direction:column;align-items:flex-start;gap:2px} .pdp-meta{flex-direction:column;gap:3px;font-size:12.5px} .pdp-meta span{overflow-wrap:anywhere} /* ---------- Buy-box ---------- */ .buy-box{padding:16px} .price-row{gap:10px} .price-now{font-size:28px} .price-save{font-size:13px;padding:4px 8px} /* Тут nowrap не можна: три елементи в один ряд на 375px не влізають. «в 1 клік» переходить на другий рядок на всю ширину. */ .buy-row{margin-top:16px;gap:10px;flex-wrap:wrap} .buy-row .btn--primary{flex:1 1 auto;min-width:0;height:50px;font-size:16px} .buy-row .btn--quick{flex:1 0 100%;height:48px} .buy-row .qty{height:50px} .buy-row .qty button{width:40px} .buy-row .qty input{width:36px} .qty{height:52px} .qty button{width:42px} .qty input{width:38px} .delivery-list{margin-top:18px;padding-top:16px} /* ---------- Липка панель покупки ---------- Стоїть НАД .mbar (його висоту JS кладе у --mbar-h), бо після «Купити» людині одразу потрібен «Кошик» із нижнього бару. */ .buybar{ display:flex;align-items:center;gap:12px; position:fixed;left:0;right:0;bottom:var(--mbar-h,0px);z-index:89; padding:10px 16px;background:#fff;border-top:1px solid var(--line); transform:translateY(115%);visibility:hidden; transition:transform .22s ease,visibility 0s linear .22s; } .buybar.is-shown{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s} .buybar__price{flex:none;display:flex;flex-direction:column;line-height:1.15;min-width:0} .buybar__price b{font-size:19px;font-weight:600;letter-spacing:-.015em;white-space:nowrap} .buybar__price s{font-size:13px;color:var(--muted);font-weight:400;white-space:nowrap} .buybar .btn{flex:1;min-width:0;height:48px;font-size:15.5px} /* ---------- Таби: один рядок замість двох ---------- */ .tabs{ flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px; scrollbar-width:none;-ms-overflow-style:none; } .tabs::-webkit-scrollbar{display:none} .tab{flex:none} /* overflow-x:auto зрізав би підкреслення, винесене на -1px */ .tab.is-active::after{bottom:0} .tab-panel{padding-top:22px} .prose p{font-size:15.5px} } /* ========================================================================== ≤560px — таблиця характеристик у два рядки замість двох колонок ========================================================================== */ @media (max-width:560px){ .spec-table--stack tr{display:block;padding:12px 0} .spec-table--stack td{display:block;padding:0} .spec-table--stack td:first-child{width:auto;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:2px} .spec-table--stack td:last-child{font-size:15px;overflow-wrap:anywhere} } /* ========================================================================== ≤420px — вузькі екрани ========================================================================== */ @media (max-width:420px){ .products,.products--5,.products--3{gap:10px} .p-card{padding:8px} .p-name{font-size:13.5px} .p-price b{font-size:17px} .p-add{width:40px;height:40px} /* Сортуванню віддаємо більше місця: «За популярністю» довше за «Фільтри» */ .toolbar__tools{gap:8px;grid-template-columns:1fr 1.2fr} .toolbar__sort .select{font-size:13.5px;padding:0 32px 0 12px;background-position:right 10px center} .price-now{font-size:26px} .qty button{width:38px} .qty input{width:34px} .buybar{gap:10px;padding:8px 14px} .buybar__price b{font-size:18px} .buybar .btn{font-size:15px} } /* ========================================================================== МОБІЛЬНА АДАПТАЦІЯ — 04: КОШИК · ЧЕКАУТ · КАБІНЕТ · СТАТИЧНІ · БЛОГ Чанк агента №4. МАЄ ЙТИ В КІНЕЦЬ main.css: частина правил свідомо перекриває ранішні мобільні блоки (повний перелік — у звіті). Жодних тіней, лише 1px межі; радіуси й кольори — з токенів. ========================================================================== */ /* Фактичну висоту нижнього бару міряє JS (04-pages.js) — від неї рахується липка кнопка дії. 72px тут лише як запобіжник без JS. */ :root{--mbar-h:0px} /* нижньої навігації немає; змінна лишена, бо липкі панелі рахують від неї */ /* ========================================================================== 1. iOS: зум форми при фокусі Safari на iOS збільшує сторінку, щойно фокус потрапляє в поле з font-size < 16px, і повернути масштаб назад користувач уже не може. Тому 16px — не смак, а вимога до ВСІХ полів, а не лише до чекауту. ========================================================================== */ @media (max-width:760px){ .co-form .input-text,.co-form textarea,.co-form select, .acc-content .input-text,.acc-content select,.acc-content textarea, .login-form .input-text,.login-form select, .field input,.field textarea,.field select, .coupon .input-text, .ml-qty input{font-size:16px} /* Висота полів — 50px: і тап-ціль ≥44px, і однаковий ритм із кнопками. */ .co-form .input-text,.co-form select, .acc-content .input-text,.acc-content select, .login-form .input-text,.login-form select{height:50px} .co-form textarea{min-height:96px} } /* ========================================================================== 2. КОШИК ========================================================================== */ @media (max-width:760px){ /* Рядок товару: фото ліворуч на всю висоту опису, керування кількістю — власним рядком під ним. Раніше «± » тулилось у вузьку праву колонку поруч із сумою, а під фото лишалась порожня смуга. */ .cart-items .cart_item{ grid-template-columns:76px minmax(0,1fr) auto; grid-template-areas: "thumb name remove" "thumb attrs attrs" "thumb price price" "qty qty sum"; column-gap:14px;row-gap:8px;align-items:start;padding:16px; } .ci-name{font-size:15px;overflow-wrap:anywhere} .ci-qty{align-self:center;margin-top:2px} .ci-sum{align-self:center;margin-top:2px;font-size:16.5px} /* Тап-цілі: ±, поле кількості й «видалити» були 34–40px. */ .ml-qty{height:44px} .ml-qty .qty-step{width:44px;font-size:19px} .ml-qty input{width:40px} .cart-items .product-remove a.remove{width:44px;height:44px;border-radius:var(--r-m)} .cart-items .product-remove a.remove svg{width:16px;height:16px} /* Підсумок іде після товарів (сітка вже в одну колонку) — відділяємо його повітрям, щоб не читався як продовження останнього рядка. */ .cart-collaterals{margin-top:16px} .freeship{padding:13px 14px} .freeship__text{font-size:14px} .summary-table th,.summary-table td, .ro-totals th,.ro-totals td{font-size:15px;padding:10px 0} .summary-table .order-total th,.summary-table .order-total td, .ro-totals .order-total th,.ro-totals .order-total td{font-size:20px} .wc-proceed-to-checkout .checkout-button{height:52px} .summary-usp{font-size:13px} } @media (max-width:560px){ /* Купон: поле + кнопка одним рядком. min-width:160px на полі змушував кнопку падати на другий рядок уже на 390px. */ .cart-actions{padding:14px 16px} .coupon-toggle{min-height:44px} .coupon{gap:8px;margin-top:10px} .coupon .input-text{flex:1 1 120px;min-width:0;height:48px} .coupon-apply{flex:0 0 auto;height:48px;padding:0 16px;font-size:14px} .cart-empty{padding:40px 16px 32px} .cart-empty__icon{width:44px;height:44px;margin-bottom:16px} .cart-empty__lead{font-size:15px} /* «Оформлення замовлення» у 32px з'їдало два рядки над самим кошиком. */ .shop-flow__title{line-height:1.1;margin:10px 0 16px} /* кегль дає clamp вище */ } @media (max-width:420px){ .cart-items .cart_item{grid-template-columns:64px minmax(0,1fr) auto;column-gap:11px;padding:14px} .ci-name{font-size:15px} } /* ========================================================================== 3. ЛИПКА КНОПКА ДІЇ (кошик і чекаут) Показує JS і лише тоді, коли справжня кнопка поїхала за нижній край: інакше на екрані було б дві однакові кнопки поруч. Живе НАД .mbar — його висоту JS пише у --mbar-h. ========================================================================== */ .ml-stickybuy{ position:fixed;left:0;right:0;bottom:var(--mbar-h,0px);z-index:85; display:none;align-items:center;gap:12px;padding:10px 16px; background:#fff;border-top:1px solid var(--line); } .ml-stickybuy__sum{display:flex;flex-direction:column;gap:2px;min-width:0} .ml-stickybuy__sum > span{font-size:13px;font-weight:400;line-height:1.2;color:var(--muted)} .ml-stickybuy__sum b{ font-size:17px;font-weight:600;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums; } .ml-stickybuy .btn{flex:1;min-width:0;height:48px;font-size:15px} @media (max-width:760px){ .ml-stickybuy.is-on{display:flex} } /* Скрол сторінки заблоковано (відкрита шухляда) — бар ховаємо. */ .ml-stickybuy.is-locked{display:none} /* ========================================================================== 4. ЧЕКАУТ ========================================================================== */ @media (max-width:760px){ /* Нумерація секцій з'їдала висоту: 30px кружечок + 19px заголовок + 20px відступ = майже чверть екрана на чотири секції. */ .co-sec{padding:18px 16px} .co-sec__title{font-size:17px;gap:10px;margin-bottom:16px} .co-step{width:26px;height:26px;border-radius:var(--r-xs)} .co-form .form-row{margin-bottom:14px} /* Радіо-картки доставки й оплати: тап по всій картці (мітка перекриває її повністю), назва переноситься, а не тисне вартість. */ .ship-method > label,.pay-method > label{ flex-wrap:wrap;gap:4px 12px;min-height:52px;padding:14px 15px 14px 46px; } .ship-name,.pay-title{overflow-wrap:anywhere} .ship-cost{margin-left:auto} .payment_box{padding:0 15px 14px 46px;font-size:13.5px} .co-aside{margin-top:16px} .co-aside__inner{padding:16px} .co-submit{height:54px;font-size:16px} /* Зноска під кнопкою була 11.5px — на телефоні це вже нечитабельно. */ .co-legal,.woocommerce-privacy-policy-text{font-size:13px} } @media (max-width:420px){ .co-sec{padding:16px 14px} .co-sec__title{font-size:16.5px;gap:9px} } /* ---------- Підсумок замовлення: акордеон ---------- */ /* Заголовок і на десктопі лишається заголовком — кнопка там не клікається, а JS тримає панель відкритою. Без JS усе видно завжди. */ .ro-toggle{ display:flex;align-items:center;gap:10px;width:100%;padding:0; font:inherit;color:inherit;text-align:left;pointer-events:none; } .ro-toggle__meta,.ro-toggle__chev{display:none} @media (max-width:760px){ .co-aside .summary-title{margin-bottom:0} .ro-toggle{min-height:48px;pointer-events:auto} .ro-toggle__text{flex:none} .ro-toggle__meta{ display:block;margin-left:auto;min-width:0; font-size:13.5px;font-weight:400;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums; } .ro-toggle__chev{ display:block;width:18px;height:18px;flex:none;color:var(--muted);transition:transform .2s; } .ro-toggle[aria-expanded="true"] .ro-toggle__chev{transform:rotate(180deg)} .woocommerce-checkout-review-order{margin-top:14px} /* Кнопка мусить читатись як окремий крок, а не як хвіст таблиці. */ .co-cta{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2)} .ro-name{font-size:14.5px;overflow-wrap:anywhere} .ro-items .product-total{font-size:14.5px} } @media (prefers-reduced-motion:reduce){ .ro-toggle__chev{transition:none} } /* ========================================================================== 5. СТОРІНКА «ДЯКУЄМО» ========================================================================== */ @media (max-width:560px){ .ty-head{padding:22px 16px} .ty-check{width:46px;height:46px;margin-bottom:14px} .ty-facts{grid-template-columns:1fr 1fr;padding:16px;gap:14px} .ty-steps li{padding:16px} .ty > p:not([class]){padding:14px 16px;font-size:14px} .woocommerce-table--order-details th, .woocommerce-table--order-details td{padding:11px 14px;font-size:14px;overflow-wrap:anywhere} .woocommerce-customer-details address{padding:16px;font-size:14.5px} } /* ========================================================================== 6. ПОВІДОМЛЕННЯ WOO ========================================================================== */ .ml-notice{overflow-wrap:anywhere} div.ml-notice > span{min-width:0} @media (max-width:560px){ .ml-notice{padding:13px 14px;font-size:14px} div.ml-notice{gap:10px} /* «Переглянути кошик» поруч із текстом не влазить у 360px — окремим рядком і на всю ширину, заразом стає нормальною тап-ціллю. */ div.ml-notice a.button{display:flex;justify-content:center;width:100%;height:42px;margin:10px 0 0} ul.ml-notice > li{gap:10px} } /* ========================================================================== 7. КАБІНЕТ ПОКУПЦЯ ТА ВХІД ========================================================================== */ @media (max-width:900px){ /* Картка користувача над контентом: аватар 46px + два рядки — забагато для екрана, де під нею ще стрічка розділів. */ .acc-nav{padding:16px} .acc-user{padding-bottom:14px} .acc-user .avatar{width:40px;height:40px;font-size:15px} .acc-user__meta b{font-size:14.5px} .acc-user__meta span{font-size:13px;white-space:nowrap} /* Стрічка розділів: тап-ціль 44px, поля вирівняні з падінгом картки. */ .acc-menu{margin:14px -16px 0;padding:0 16px;scroll-padding-inline:16px} .acc-menu a{min-height:44px;padding:0 14px;border-radius:var(--r-s);font-size:14px} .acc-menu svg{width:16px;height:16px} } @media (max-width:760px){ .acc-content,.login-card,.login-aside{padding:20px 16px} /* Плитки: три штуки в стовпчик тягли екран. Дві в ряд, третя — на всю ширину, щоб не лишався «обрубок» половинної колонки. */ .acc-tiles{grid-template-columns:1fr 1fr;gap:10px;margin-top:18px} .acc-tile{padding:14px} .acc-tile:last-child{grid-column:1 / -1} .acc-tile svg{margin-bottom:6px} .acc-tile b{font-size:17px} .acc-order{padding:14px 0} .acc-order__actions .btn--sm{height:44px;padding:0 16px} .acc-block{margin-top:24px} /* Особисті дані й адреси лишались двоколонковою сіткою: width:100% на .form-row не склеює колонки, тож поля були по ~140px. */ .woocommerce-EditAccountForm, .acc-content .woocommerce-address-fields__field-wrapper{grid-template-columns:1fr} /* Дрібні текстові посилання-дії — нормальні тап-цілі. */ .woocommerce-Address-title{align-items:center} .woocommerce-Address-title .edit, .login-lost{display:inline-flex;align-items:center;min-height:44px} .co-check{min-height:44px} /* Форми кабінету: кнопка на всю ширину — інакше вона губиться внизу довгої форми й читається як другорядна. */ .acc-content .woocommerce-Button, .acc-content button[type="submit"]{width:100%} .acc-content fieldset{padding:16px 14px;margin-top:18px} .acc-content textarea{min-height:88px} .woocommerce-Address{padding:16px} .acc-empty{padding:36px 16px} .login-row{gap:10px} .login-usp{gap:14px} } /* ========================================================================== 8. СТАТИЧНІ СТОРІНКИ: «Про нас», «Контакти», «Оплата і доставка» Класи замість інлайн-стилів у шаблонах: інлайн бив по медіа-запитах і тримав сітки десктопними аж до 320px. ========================================================================== */ .stats--box{grid-template-columns:1fr 1fr;gap:12px} .stats--box .stat{padding:18px 0 0} .card-pad--lg{padding:34px} .card-pad--md{padding:30px} .usps--3{grid-template-columns:repeat(3,1fr)} .person .h4{margin:16px 0 4px} .map--embed{min-height:0} .map iframe{display:block;width:100%;border:0} .field .select{height:50px;padding:0 42px 0 16px} .split--start{align-items:start;gap:44px} /* Розклад самовивозу друкується +, а стилі мала лише : день тижня виходив по центру й без падінгу. */ .spec-table th{ padding:14px 0;width:42%;font-size:15px;font-weight:600; color:var(--muted);text-align:left;vertical-align:top; } @media (max-width:980px){ .usps--3{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .usps--3{grid-template-columns:1fr} .card-pad--lg,.card-pad--md{padding:22px 18px} /* Кроки в одну колонку: ліва межа з'їдала 20px ширини ні за що. */ .step{border-left:0;border-top:1px solid var(--sand);padding:16px 0 0} /* Команда: одна колонка робила фото 1:1 на всю ширину екрана. */ .team{grid-template-columns:repeat(2,1fr);gap:12px} .person{padding-bottom:16px} .person .h4{margin:12px 0 3px;font-size:15px} .person span{font-size:13px} /* Оплата і доставка */ .dlv-quick{grid-template-columns:1fr;gap:12px} .dlv-card{padding:22px 18px} .dlv-card__top{gap:12px} .dlv-ico{width:44px;height:44px} .dlv-ico svg{width:21px;height:21px} .dlv-list{font-size:15px} /* Контакти */ .cc{padding:18px 20px} .cc .ico{margin-bottom:12px} .cc b{font-size:17px;margin:7px 0 5px;overflow-wrap:anywhere} .cc p{font-size:13.5px} .map{min-height:240px} .map iframe{height:240px} .schedule li{gap:12px;font-size:14.5px} .rx-note{padding:14px 16px} .split--start{gap:24px} } @media (max-width:560px){ /* Стекування .spec-table--stack живе в чанку каталогу/PDP (вище) — там те саме правило з кольором підпису. Тут лишається тільки те, чого воно не покриває. */ } @media (max-width:420px){ .stats--box{gap:10px} .stats--box .stat b{font-size:24px} .stats--box .stat span{font-size:13px} } /* ========================================================================== 9. ДОВГИЙ ТЕКСТ: .prose (політика, службові сторінки, тіло статті) ========================================================================== */ .prose{overflow-wrap:break-word} .prose h2{font-size:22px;font-weight:500;letter-spacing:-.018em;margin:30px 0 10px} .prose h2:first-child{margin-top:0} .prose h4{margin:22px 0 8px} .prose > *:last-child{margin-bottom:0} /* Глобальні ul,ol{list-style:none} + li::marker{content:""} з'їдали нумерацію в контенті редактора — повертаємо її лічильником, бо ::marker{content} досі не всюди надійний. */ .prose ol{counter-reset:ml-ol;display:flex;flex-direction:column;gap:7px;margin:10px 0 16px;padding:0} .prose ol > li{ counter-increment:ml-ol;position:relative;padding-left:26px; color:var(--ink-2);line-height:1.6; } .prose ol > li::before{ content:counter(ml-ol) ".";position:absolute;left:0;top:0; color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums; } .prose blockquote{ margin:16px 0;padding:14px 18px;border-left:2px solid var(--sand); background:var(--cream);border-radius:0 var(--r-m) var(--r-m) 0;color:var(--ink-2); } .prose img{border-radius:var(--r-m);margin:16px 0} .prose figure{margin:16px 0} .prose figcaption{font-size:13px;color:var(--muted);margin-top:8px} /* Таблиця в тексті ширша за екран скролиться сама, а не тягне сторінку. */ .prose table{ display:block;width:100%;max-width:100%;overflow-x:auto; border-collapse:collapse;margin:16px 0; } .prose table th,.prose table td{ border:1px solid var(--line);padding:10px 12px;font-size:14.5px;text-align:left;vertical-align:top; } .prose table th{background:var(--cream);font-weight:600} @media (max-width:760px){ .prose{max-width:none} .prose p,.prose ul li,.prose ol > li{font-size:16px} .prose h2{font-size:20px} .prose h3{font-size:18px} } /* ========================================================================== 10. БЛОГ ========================================================================== */ @media (max-width:760px){ /* Чіпи рубрик — головна навігація блогу, 32px тап-ціль замало. */ .blog-chips .chip, .article-head__inner .chip{min-height:44px;height:auto;padding:0 14px} .post-body{padding:16px 18px 18px} .post h4{overflow-wrap:anywhere} .post p{font-size:14.5px} .post-meta{padding-top:14px} .article-lead{font-size:16px} .article-meta{gap:14px;margin-top:18px;flex-wrap:wrap} .article-card{padding:20px 18px} .article-note{padding:14px 16px} } /* ========================================================================== Хвости, знайдені живцем на 375px уже після мержу чанків. ========================================================================== */ @media (max-width:760px){ /* Посилання меню в підвалі мали 33px висоти — під планкою тап-цілі 44px. */ .footer li a{padding:11px 0} /* Лого в шапці: картинка 30px, а тиснути зручно по всій висоті рядка. */ .header-main .logo{min-height:44px} } /* ========================================================================== ЗРУЧНІСТЬ — правки 23.08.2026 Чотири речі: жива кнопка «Купити», відповідь на натискання, дозування в картці, читабельність дрібного тексту. Брендові кольори не змінені. ========================================================================== */ /* ---------- 1. Кнопка «Купити»: показує, що працює ---------- */ /* Woo вішає .loading і .added, але стилів під них не було — тема свідомо не вантажить woocommerce.css. Тому тап не давав жодної відповіді, людина тиснула вдруге і клала в кошик другу упаковку. */ .add_to_cart_button{position:relative;transition:background .15s,color .15s} .add_to_cart_button.loading{color:transparent!important;pointer-events:none} .add_to_cart_button.loading::after{ content:"";position:absolute;top:50%;left:50%;width:17px;height:17px;margin:-9px 0 0 -9px; border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%; animation:ml-spin .6s linear infinite; } .btn--ghost.add_to_cart_button.loading::after{border-color:rgba(27,26,23,.25);border-top-color:var(--ink)} @keyframes ml-spin{to{transform:rotate(360deg)}} /* Стан «додано» тримається кілька секунд, потім кнопка повертається. */ .add_to_cart_button.is-done{background:var(--ink);color:#fff;pointer-events:none} .add_to_cart_button.is-done::before{content:"✓ ";font-weight:600} /* На іконковій кнопці галочка має ЗАМІНИТИ кошик, а не стати перед ним. */ .p-add.is-done::before{content:"✓";font-size:18px} .p-add.is-done svg{display:none} /* Плашка підтвердження. Без тіні — 1px межа, як усюди в темі. */ /* ---------- Модалка «товар у кошику» ---------- Вікно по центру з самим товаром. На мобільному — на весь екран, дії притиснуті донизу, у досяжності пальця. Стиль сайту: біле тло, межа 1px, без тіней. */ .ml-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px} .ml-modal[hidden]{display:none} .ml-modal__veil{ position:absolute;inset:0;background:rgba(27,26,23,.5); opacity:0;transition:opacity .22s ease; } .ml-modal.is-shown .ml-modal__veil{opacity:1} .ml-modal__box{ position:relative;width:100%;max-width:520px; background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl); padding:28px;display:grid;gap:20px; opacity:0;transform:translateY(10px) scale(.985); transition:opacity .22s ease,transform .22s ease; } .ml-modal.is-shown .ml-modal__box{opacity:1;transform:none} .ml-modal__close{ position:absolute;top:12px;right:12px;width:40px;height:40px; display:grid;place-items:center;color:var(--muted);border-radius:50%; } .ml-modal__close:hover{background:var(--line-2);color:var(--ink)} .ml-modal__close svg{width:15px;height:15px} .ml-modal__head{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:500;padding-right:44px} .ml-modal__mark{width:22px;height:22px;flex:none;color:var(--orange)} .ml-modal__item{ display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center; padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .ml-modal__thumb{ width:88px;height:88px;border-radius:var(--r-m);overflow:hidden; background:var(--cream);display:grid;place-items:center; } .ml-modal__thumb img{width:100%;height:100%;object-fit:contain} .ml-modal__info{display:grid;gap:3px;min-width:0} .ml-modal__brand{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .ml-modal__brand:empty,.ml-modal__dose:empty,.ml-modal__total:empty{display:none} .ml-modal__name{ font-size:15px;line-height:1.35; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; } .ml-modal__dose{font-size:13px;color:var(--muted)} .ml-modal__sum{font-size:16px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums} .ml-modal__total{font-size:14px;color:var(--muted)} .ml-modal__total b{color:var(--ink);font-weight:500} .ml-modal__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px} .ml-modal__actions .btn{justify-content:center} /* ---------- Купівля в 1 клік ---------- Той самий кістяк .ml-modal, що й у «товар у кошику»: відступи між блоками дає grid-gap самої коробки, тому власних margin тут майже немає. */ .ml-qo__item{ display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:baseline; padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .ml-qo__name{font-size:15px;font-weight:500;line-height:1.35} .ml-qo__dose{grid-column:1;font-size:13px;color:var(--muted)} .ml-qo__dose:empty{display:none} .ml-qo__sum{ grid-column:2;grid-row:1 / span 2;align-self:center; font-size:19px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums; } .ml-qo__form{display:grid;gap:14px} .ml-qo__form[hidden]{display:none} .ml-qo .field-label{font-size:13px;font-weight:500;color:var(--ink-2)} .ml-qo__err{margin:0;font-size:13.5px;font-weight:500;color:var(--red)} .ml-qo__note{margin:0} .ml-qo__send.is-loading{opacity:.6;pointer-events:none} .ml-qo__done{display:grid;gap:16px;justify-items:start;align-content:start} .ml-qo__done[hidden]{display:none} .ml-qo__done-text{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)} /* Мобільний: на весь екран, дії внизу. */ @media (max-width:760px){ .ml-modal{padding:0} .ml-modal__box{ max-width:none;height:100%;border:0;border-radius:0; padding:20px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(16px); /* Останній рядок тягнеться — так дії лягають на низ екрана, а не зависають одразу під товаром із порожнечею внизу. align-content тут НЕ ставити: він пакує рядки вгору й гасить 1fr. */ grid-template-rows:auto auto auto 1fr; } .ml-modal__head{font-size:17px} .ml-modal__item{grid-template-columns:76px 1fr;row-gap:8px} .ml-modal__thumb{width:76px;height:76px} /* Ціну лишаємо в колонці тексту, під дозуванням — інакше вона з'їжджає під фото й читається як окремий блок. */ .ml-modal__sum{grid-column:2;justify-self:start;font-size:16px} .ml-modal__actions{grid-template-columns:1fr;align-self:end} /* У «в 1 клік» рядків три (заголовок, товар, форма), а не чотири. */ .ml-qo .ml-modal__box{grid-template-rows:auto auto 1fr} .ml-qo__sum{font-size:17px} } /* ---------- 2. Відповідь на натискання ---------- */ /* На дотику hover не існує — без :active кожен тап відчувається мертвим. */ .btn:active,.icon-btn:active,.chip:active,.tab:active, .qty button:active,.ml-qty .qty-step:active,.faq-q:active, .scroll-nav button:active,.pagination a:active{ transform:translateY(1px); } .btn--primary:active,.btn--blue:active{filter:brightness(.9)} .btn--ghost:active,.btn--light:active{background:var(--line-2)} .chip:active{background:var(--line-2)} .p-card:active,.cat:active,.post:active,.symptom:active{border-color:var(--sand)} @media (prefers-reduced-motion:reduce){ .btn:active,.icon-btn:active,.chip:active,.tab:active, .qty button:active,.ml-qty .qty-step:active,.faq-q:active, .scroll-nav button:active,.pagination a:active{transform:none} } /* Дзеркальна проблема: hover на тачі «залипає» — тапнутий чіп лишається схожим на вибраний, фото картки лишається збільшеним після повернення назад. */ @media (hover:none){ .btn--primary:hover{background:var(--orange)} .btn--blue:hover{background:var(--blue)} .btn--ghost:hover{border-color:var(--line-input)} .chip:hover{border-color:var(--line-input);color:var(--ink-2)} .chip--active:hover{color:#fff} .symptom:hover{border-color:var(--line);color:var(--ink-2)} .symptom:hover .ico{color:inherit} .cat:hover,.p-card:hover{border-color:var(--line)} .p-card:hover .ph,.p-card:hover .p-media img,.post:hover .ph{transform:none} .post:hover{border-color:var(--line)} .post:hover .h4{color:inherit} .brand:hover{color:var(--muted);border-color:var(--line)} .nav a:hover,.cat ul a:hover,.mega-col li a:hover{color:var(--ink-2)} } /* Наведення робило контраст ГІРШИМ: білий на #F4934F це 2.30, на #9CB7FF — 1.98. Лишаємо той самий брендовий тон, тільки темніший, а не світліший: 3.64 і 4.42. */ @media (hover:hover){ .btn--primary:hover{background:var(--orange);background:color-mix(in srgb,var(--orange) 92%,#000)} .btn--blue:hover{background:var(--blue);background:color-mix(in srgb,var(--blue) 88%,#000)} } /* ---------- 4. Читабельність дрібного тексту ---------- */ .co-form label{font-size:14.5px} .field-err{font-size:14px} .field label{font-size:14px} .co-form label .optional{font-size:13.5px} /* Країна на чекауті: возимо тільки по Україні, тож у списку рівно один варіант. Ховаємо рядок саме за цією ознакою (:has + :only-child), а не жорстко: якщо в налаштуваннях Woo колись додадуть другу країну, поле повернеться само собою. Поле лишається у формі й далі надсилає UA — плагін Нової пошти зможе ним керувати, як і передбачено в PROJECT.md §3a. */ /* !important тут не примха: address-i18n.js від Woo пише цим рядкам інлайновий display під локаль країни, а інлайн б'є звичайне правило. */ #billing_country_field:has(select option:only-child), #shipping_country_field:has(select option:only-child){display:none!important} /* ========================================================================== ПОЛЯ НОВОЇ ПОШТИ (плагін wc-ukr-shipping, віджети zen-ui-select) Плагін малює власні селекти: 42px, радіус 0, межа #ddd — поруч із нашими полями (50px, радіус 8, межа --line-input) вони виглядали як чужі. Стилі плагіна не чіпаємо, лише перекриваємо в його ж контейнері. ========================================================================== */ .wcus-checkout-np-fields h3{ font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink); margin:4px 0 14px; } .wcus-checkout-np-fields .form-row{margin-bottom:14px} .wcus-checkout-np-fields .form-row:last-child{margin-bottom:0} .zen-ui-select__value{ display:flex;align-items:center;gap:10px; height:50px;padding:0 16px; border:1px solid var(--line-input);border-radius:var(--r-m); background:#fff;color:var(--ink); font-size:16px;line-height:1.2; /* 16px — інакше iOS зумить сторінку на фокусі */ transition:border-color .15s; cursor:pointer; } /* Падінг плагіна (12px зліва) не збігався з нашими полями (16px) — текст стояв на іншій вертикалі, ніж «Ім'я» й «Телефон» поруч. Специфічність піднято контейнером, бо власне правило плагіна перебивало коротке. */ .wcus-checkout-np-fields .zen-ui-select__value{padding:0 16px} .zen-ui-select__value:hover{border-color:var(--ink-2)} .zen-ui-select__value:active{background:var(--line-2)} .zen-ui-select__value-text{ flex:1;min-width:0;color:inherit; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Шеврон плагіна — приводимо до розміру наших іконок і прибираємо чорноту. */ .zen-ui-select__value > svg{ width:14px;height:14px;flex:none;fill:var(--muted); } /* Недоступне поле (напр. «Відділення», доки не обрано місто). */ .zen-ui-select__value.disabled{ background:var(--line-2);border-color:var(--line); color:var(--muted);cursor:not-allowed; } /* Відкритий стан і фокус — так само, як у наших полів. */ .zen-ui-select.is-open .zen-ui-select__value, .zen-ui-select__value:focus-visible{border-color:var(--ink);outline:none} /* --- Випадний список НП --- Плагін рендерить його порталом у , а не всередині свого контейнера, тому селектори тут глобальні: у .wcus-checkout-np-fields вони б не влучили. */ .zen-ui-select__dropdown{ border:1px solid var(--line-input);border-radius:var(--r-m); background:#fff;overflow:hidden; } .zen-ui-select__options{ border:0;max-height:46vh;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .zen-ui-select__option{ display:flex;align-items:center;min-height:44px; /* було 42 — під планкою тап-цілі */ padding:10px 16px;font-size:15px;line-height:1.35; color:var(--ink);border-bottom:1px solid var(--line-2); overflow-wrap:anywhere; /* назви відділень довгі: «Відділення №12: вул. …» */ } .zen-ui-select__option:last-child{border-bottom:0} .zen-ui-select__option:hover{background:var(--line-2)} .zen-ui-select__option:active{background:var(--beige)} /* Вибраний пункт підсвічувався системним блакитним #EBF5FF — чужий колір у палітрі, де синій означає інформацію, а не вибір. */ .zen-ui-select__option--current{ background:var(--beige);font-weight:600; } /* Поле пошуку по містах і відділеннях, якщо плагін його показує. */ .zen-ui-select__dropdown input[type="text"], .zen-ui-select__dropdown input[type="search"]{ width:100%;height:46px;padding:0 16px;font-size:16px; border:0;border-bottom:1px solid var(--line);outline:none;background:#fff; } /* --- Статичні підказки під полями чекауту --- Виводяться нашим кодом усередині .form-row (див. ml_field_hints), тож Woo їх не показує/не ховає й нічого не анімує — верстка не стрибає. */ .co-hint{ display:block;margin-top:7px; font-size:13.5px;line-height:1.45;color:var(--muted); } /* Запобіжник на описи від сторонніх плагінів: slideUp анімує ще й відступи, тому пінимо їх разом із висотою, інакше рядок усе одно смикається. */ .co-form .woocommerce-input-wrapper > .description{ display:block!important;height:auto!important;overflow:visible!important; margin-top:7px!important;margin-bottom:0!important; padding-top:0!important;padding-bottom:0!important; font-size:13.5px;line-height:1.45;color:var(--muted); }