/* ========================================================================== TopShop — Design tokens Єдине джерело правди для кольорів, типографіки, відступів, радіусів. Нічого не хардкодити в компонентах — тільки через var(). ТЗ §40. ========================================================================== */ :root { /* ---------------------------------------------------------------------- КОЛІР — бренд Акцент: електрик-синій. Використовується для CTA, посилань, активних станів фільтрів. Свідомо НЕ помаранчевий — ТЗ §15/§41 забороняють повторювати фірмовий колір x-kom. ---------------------------------------------------------------------- */ --ts-color-primary: #0b63f6; --ts-color-primary-hover: #0a56d6; --ts-color-primary-active: #0948b2; --ts-color-primary-soft: #e8f0fe; /* фон бейджів/підсвітки */ --ts-color-primary-contrast: #ffffff; /* ---------------------------------------------------------------------- КОЛІР — текст Синюватий темний замість чистого чорного: м'якше для очей на білому і зв'язує текст з акцентом. ---------------------------------------------------------------------- */ --ts-color-text: #0a2540; /* основний */ --ts-color-text-strong: #04162a; /* заголовки, ціна */ --ts-color-muted: #4a5a6e; /* підписи, характеристики */ --ts-color-faint: #7b8898; /* плейсхолдери, дрібні мітки */ /* ---------------------------------------------------------------------- КОЛІР — поверхні Білі картки на світло-сірому тлі — так товар "виступає" вперед. ---------------------------------------------------------------------- */ --ts-color-bg: #ffffff; /* основне тло сторінки */ --ts-color-surface: #ffffff; /* картки */ --ts-color-surface-sunken: #eef1f6; /* сірі секції, зебра таблиць */ --ts-color-surface-hover: #f5f7fa; /* Ледь помітний відтінок — великі блоки на кшталт підвалу, яким сірий надає зайвої ваги. */ --ts-color-surface-tint: #f7fafc; /* ---------------------------------------------------------------------- КОЛІР — межі Темніші за типові для WP-тем, але без жорсткості: на зовсім світлих межах картки зливалися з тлом, а надто темні робили каталог схожим на таблицю. ---------------------------------------------------------------------- */ --ts-color-border: #d5dce6; /* стандартна межа картки */ --ts-color-border-strong: #b9c3d0; /* інпути, поділювачі */ --ts-color-border-focus: var(--ts-color-primary); /* ---------------------------------------------------------------------- СМУГИ ПРОКРУТКИ Тонкі й у колір рамок: у сайдбарі фільтрів, мега-меню й шухлядах системна смуга Windows завширшки 17px з'їдала місце й вибивалась із дизайну. Тримаємо в токенах, щоб колір був один на весь сайт. ---------------------------------------------------------------------- */ --ts-scrollbar-size: 8px; --ts-scrollbar-thumb: #c3ccd9; --ts-scrollbar-thumb-hover: var(--ts-color-border-strong); /* ---------------------------------------------------------------------- КОЛІР — семантика Статуси наявності (ТЗ §14) мають читатись миттєво і не конфліктувати з синім акцентом. ---------------------------------------------------------------------- */ --ts-color-success: #16a34a; /* Є в наявності */ --ts-color-success-soft: #e7f7ed; --ts-color-warning: #d97706; /* Мало / Під замовлення */ --ts-color-warning-soft: #fdf3e3; --ts-color-danger: #e11d48; /* Знижка, стара ціна, немає */ --ts-color-danger-soft: #fdeaef; --ts-color-info: #0b63f6; --ts-color-accent: #d6091a; /* Червоний з логотипа NBplaza — «Швидке замовлення» */ --ts-color-accent-hover: #b80010; /* Той самий перехід, що в логотипі: від яскравого до вишневого. */ --ts-gradient-accent: linear-gradient(180deg, #f0141c 0%, #c8010f 100%); --ts-gradient-accent-hover: linear-gradient(180deg, #d8070f 0%, #a8000d 100%); --ts-color-info-soft: var(--ts-color-primary-soft); /* * Telegram — чужий фірмовий колір, лише для входу через бот. * #2aabee — для логотипа, спінера й тла; білий текст на ньому дає * лише ≈2.6:1. Тому заливка кнопок — затемнений відтінок того ж * синього (≈4.7:1 з білим, WCAG AA): впізнається, але читається. */ --ts-color-telegram: #2aabee; --ts-color-telegram-button: #187bb3; --ts-color-telegram-button-hover: #14699a; --ts-color-telegram-button-active: #105a85; --ts-color-telegram-soft: #e9f6fd; --ts-color-telegram-ring: rgba(42, 171, 238, 0.35); /* Ціна та знижка — окремі токени, бо семантика не дорівнює "danger" */ --ts-color-price: var(--ts-color-text-strong); --ts-color-price-old: var(--ts-color-faint); --ts-color-discount: #e11d48; /* ---------------------------------------------------------------------- ТИПОГРАФІКА Inter — нейтральний гротеск з добрими цифрами й кирилицею; критично для цін, SKU і таблиць характеристик. tnum вмикає моноширинні цифри. ---------------------------------------------------------------------- */ --ts-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ts-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Шкала 1.200 (minor third) — щільна, під насичений каталог */ --ts-text-2xs: 0.6875rem; /* 11px — мітки, SKU */ --ts-text-xs: 0.75rem; /* 12px — дрібні підписи */ --ts-text-sm: 0.8125rem; /* 13px — характеристики в картці */ --ts-text-base: 0.875rem; /* 14px — базовий UI-розмір */ --ts-text-md: 1rem; /* 16px — body тексту сторінок */ --ts-text-lg: 1.125rem; /* 18px */ --ts-text-xl: 1.375rem; /* 22px — ціна в картці */ --ts-text-2xl: 1.625rem; /* 26px — H2 */ --ts-text-3xl: 2rem; /* 32px — H1 / ціна на сторінці товару */ --ts-text-4xl: 2.5rem; /* 40px — hero */ --ts-weight-regular: 400; --ts-weight-medium: 500; --ts-weight-semibold: 600; --ts-weight-bold: 700; --ts-leading-tight: 1.2; /* заголовки */ --ts-leading-snug: 1.35; /* назви товарів */ --ts-leading-normal: 1.5; /* UI */ --ts-leading-relaxed: 1.65; /* довгі описи */ --ts-tracking-tight: -0.015em; /* великі заголовки */ --ts-tracking-normal: 0; --ts-tracking-wide: 0.02em; /* кепс-мітки */ /* ---------------------------------------------------------------------- ВІДСТУПИ — крок 4px ---------------------------------------------------------------------- */ --ts-space-0: 0; --ts-space-1: 0.25rem; /* 4 */ --ts-space-2: 0.5rem; /* 8 */ --ts-space-3: 0.75rem; /* 12 */ --ts-space-4: 1rem; /* 16 */ --ts-space-5: 1.25rem; /* 20 */ --ts-space-6: 1.5rem; /* 24 */ --ts-space-8: 2rem; /* 32 */ --ts-space-10: 2.5rem; /* 40 */ --ts-space-12: 3rem; /* 48 */ --ts-space-16: 4rem; /* 64 */ --ts-space-20: 5rem; /* 80 */ /* ---------------------------------------------------------------------- РАДІУСИ Помірні — техніка має виглядати точно, а не "м'яко". ---------------------------------------------------------------------- */ --ts-radius-sm: 4px; /* бейджі, дрібні контроли */ --ts-radius-md: 8px; /* кнопки, інпути */ --ts-radius-lg: 12px; /* картки */ --ts-radius-xl: 16px; /* модалки, великі блоки */ --ts-radius-full: 999px; /* чіпи, лічильники */ /* ---------------------------------------------------------------------- ТІНІ — стримані; глибина переважно межами, а не тінями ---------------------------------------------------------------------- */ --ts-shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.05); --ts-shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.08); --ts-shadow-md: 0 4px 12px rgba(10, 37, 64, 0.1); --ts-shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.14); --ts-shadow-focus: 0 0 0 3px rgba(11, 99, 246, 0.25); /* ---------------------------------------------------------------------- МАКЕТ ---------------------------------------------------------------------- */ --ts-container-max: 1440px; /* широкий десктоп */ --ts-container-pad: var(--ts-space-4); /* бічні поля на мобільному */ --ts-sidebar-width: 268px; /* колонка фільтрів (ТЗ §26) */ /* * Висота липкої шапки: від неї рахують top у всіх sticky-блоках * (фільтри каталогу, підсумок кошика, блок купівлі). * * Значення тут — запасне, до старту JS. Справжню висоту міряє * модуль Header і перезаписує цю змінну: шапка різна на різних * ширинах (другий ярус розділів, пошук окремим рядком), і в CSS * ці числа довелося б дублювати на кожному брейкпоінті. */ --ts-header-height: 64px; --ts-gutter: var(--ts-space-4); /* проміжок сітки каталогу */ /* ---------------------------------------------------------------------- АНІМАЦІЯ ---------------------------------------------------------------------- */ --ts-duration-fast: 120ms; --ts-duration-base: 180ms; --ts-duration-slow: 280ms; --ts-ease: cubic-bezier(0.4, 0, 0.2, 1); --ts-ease-out: cubic-bezier(0, 0, 0.2, 1); /* ---------------------------------------------------------------------- Z-INDEX — єдина шкала, щоб не ловити війни z-index ---------------------------------------------------------------------- */ --ts-z-base: 1; --ts-z-sticky: 100; --ts-z-header: 200; --ts-z-dropdown: 300; --ts-z-megamenu: 350; --ts-z-overlay: 400; --ts-z-drawer: 450; --ts-z-modal: 500; --ts-z-toast: 600; } /* Поважаємо системне зменшення руху */ @media (prefers-reduced-motion: reduce) { :root { --ts-duration-fast: 0ms; --ts-duration-base: 0ms; --ts-duration-slow: 0ms; } } /* ========================================================================== TopShop — Base Reset, типографіка, контейнери, сітка. Без компонентів. ========================================================================== */ /* --- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ts-color-bg); color: var(--ts-color-text); font-family: var(--ts-font-sans); font-size: var(--ts-text-base); line-height: var(--ts-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Моноширинні цифри всюди: ціни й характеристики вирівнюються в колонки */ font-variant-numeric: tabular-nums; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: var(--ts-color-primary); text-decoration: none; } a:hover { text-decoration: underline; } table { border-collapse: collapse; width: 100%; } /* --- Типографіка -------------------------------------------------------- */ h1, .ts-h1 { font-size: var(--ts-text-3xl); font-weight: var(--ts-weight-bold); line-height: var(--ts-leading-tight); letter-spacing: var(--ts-tracking-tight); color: var(--ts-color-text-strong); } h2, .ts-h2 { font-size: var(--ts-text-2xl); font-weight: var(--ts-weight-bold); line-height: var(--ts-leading-tight); letter-spacing: var(--ts-tracking-tight); color: var(--ts-color-text-strong); } h3, .ts-h3 { font-size: var(--ts-text-xl); font-weight: var(--ts-weight-semibold); line-height: var(--ts-leading-snug); color: var(--ts-color-text-strong); } h4, .ts-h4 { font-size: var(--ts-text-lg); font-weight: var(--ts-weight-semibold); line-height: var(--ts-leading-snug); color: var(--ts-color-text-strong); } @media (max-width: 767px) { h1, .ts-h1 { font-size: var(--ts-text-2xl); } h2, .ts-h2 { font-size: var(--ts-text-xl); } } /* Дрібна кепс-мітка: "Бренд", "Характеристики" тощо */ .ts-label { font-size: var(--ts-text-2xs); font-weight: var(--ts-weight-semibold); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-color-muted); } .ts-muted { color: var(--ts-color-muted); } .ts-mono { font-family: var(--ts-font-mono); font-size: 0.95em; } /* --- Доступність -------------------------------------------------------- */ /* Видимий фокус лише для клавіатури */ :focus-visible { outline: 2px solid var(--ts-color-primary); outline-offset: 2px; border-radius: var(--ts-radius-sm); } :focus:not(:focus-visible) { outline: none; } /* * Текстові поля й списки мають власний фокус — синя рамка плюс * --ts-shadow-focus (.ts-input, .ts-select, поля checkout і кабінету). * Глобальний outline малювався б поверх нього другим кільцем. * * Radio і checkbox лишаються нативними (accent-color), тому їм outline * потрібен: іншої видимої ознаки фокусу в них немає. */ input:not([type="radio"]):not([type="checkbox"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } /* Приховано візуально, але доступно скрінрідеру */ .ts-visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Посилання "перейти до вмісту" */ .ts-skip-link { position: absolute; top: -100px; left: var(--ts-space-4); z-index: var(--ts-z-toast); padding: var(--ts-space-3) var(--ts-space-4); background: var(--ts-color-primary); color: var(--ts-color-primary-contrast); border-radius: var(--ts-radius-md); font-weight: var(--ts-weight-semibold); transition: top var(--ts-duration-base) var(--ts-ease); } .ts-skip-link:focus { top: var(--ts-space-4); text-decoration: none; } /* --- Контейнер ---------------------------------------------------------- */ .ts-container { width: 100%; max-width: var(--ts-container-max); margin-inline: auto; padding-inline: var(--ts-container-pad); } @media (min-width: 768px) { :root { --ts-container-pad: var(--ts-space-6); } } @media (min-width: 1280px) { :root { --ts-container-pad: var(--ts-space-8); } } /* --- Сітка каталогу ----------------------------------------------------- Кількість колонок керується через --ts-grid-cols, щоб той самий клас працював і в каталозі, і в блоках головної. ------------------------------------------------------------------------ */ .ts-grid { display: grid; gap: var(--ts-gutter); grid-template-columns: repeat(var(--ts-grid-cols, 2), minmax(0, 1fr)); } @media (min-width: 560px) { .ts-grid { --ts-grid-cols: 3; } } @media (min-width: 1024px) { .ts-grid { --ts-grid-cols: 4; } } @media (min-width: 1440px) { .ts-grid { --ts-grid-cols: 5; } } /* * Сітка каталогу. * * Телефон — ОДНА колонка. При 375px дві колонки давали картку 156px: * фото нечитабельне, а ціна й кнопка не вміщувались в один рядок. * Одна колонка з горизонтальною карткою (фото ліворуч, дані праворуч) * показує більше корисного і дає кнопці повну ширину. * * Поруч із сайдбаром фільтрів — 3 колонки, як у x-kom: картка виходить * достатньо широкою, щоб вмістити 4-5 характеристик без переносів. * Без сайдбара (пошук, сторінки без фільтрів) використовуємо всю ширину. */ .ts-grid--catalog { --ts-grid-cols: 1; } @media (min-width: 560px) { .ts-grid--catalog { --ts-grid-cols: 2; } } @media (min-width: 1024px) { .ts-layout--with-sidebar .ts-grid--catalog { --ts-grid-cols: 3; } } @media (min-width: 640px) { .ts-layout:not(.ts-layout--with-sidebar) .ts-grid--catalog { --ts-grid-cols: 3; } } @media (min-width: 1280px) { .ts-layout:not(.ts-layout--with-sidebar) .ts-grid--catalog { --ts-grid-cols: 4; } } /* --- Макет сторінки каталогу: сайдбар + контент ------------------------- */ .ts-layout { display: grid; gap: var(--ts-space-6); grid-template-columns: 1fr; align-items: start; } @media (min-width: 1024px) { .ts-layout--with-sidebar { grid-template-columns: var(--ts-sidebar-width) minmax(0, 1fr); gap: var(--ts-space-8); } } /* --- Секції ------------------------------------------------------------- */ .ts-section { margin-block: var(--ts-space-10); } .ts-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ts-space-4); margin-bottom: var(--ts-space-5); } /* --- Утиліти ------------------------------------------------------------ */ .ts-stack > * + * { margin-top: var(--ts-stack-gap, var(--ts-space-3)); } .ts-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-cluster-gap, var(--ts-space-2)); } /* Обрізання назви товару до N рядків, щоб картки лишались однакової висоти */ .ts-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ts-clamp-lines, 2); line-clamp: var(--ts-clamp-lines, 2); overflow: hidden; } /* --- iOS: не даємо Safari зумити сторінку при фокусі в полі -------------- Safari автоматично збільшує масштаб, якщо font-size інпута < 16px, і після цього сторінка лишається зумленою. Тому на телефоні всі поля вводу мають щонайменше 16px. ------------------------------------------------------------------------ */ @media (max-width: 767px) { input[type="text"], input[type="search"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], select, textarea { font-size: 16px; } } /* --- Смуги прокрутки ------------------------------------------------------ Системна смуга Windows — 17px суцільного сірого. У сайдбарі фільтрів і в мега-меню вона з'їдала місце й вибивалась із верстки, тож робимо власну: тонку, у колір рамок, без стрілок і підкладки. Два синтаксиси, бо їх підтримують різні рушії: scrollbar-* розуміють Firefox і свіжі Chrome, ::-webkit-scrollbar — Safari й Chrome. Обидва безпечні: браузер просто ігнорує те, чого не знає. ------------------------------------------------------------------------ */ * { scrollbar-width: thin; scrollbar-color: var(--ts-scrollbar-thumb) transparent; } ::-webkit-scrollbar { width: var(--ts-scrollbar-size); height: var(--ts-scrollbar-size); } /* Доріжка прозора: смуга читається як тонка риска, а не як жолоб. */ ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ts-scrollbar-thumb); border-radius: 999px; /* * Прозора рамка «підрізає» повзунок усередині доріжки — без неї * він притискається до самого краю й виглядає товстішим. */ border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--ts-scrollbar-thumb-hover); background-clip: content-box; } /* Кут між горизонтальною і вертикальною смугами — без сірого квадрата. */ ::-webkit-scrollbar-corner { background: transparent; } /* * Іконки теми (icon() у PHP). Малювання — тут, а не атрибутами на * кожному SVG: на вітрині іконка — це зі спрайта, і ті самі * fill/stroke на тисячі SVG мегаменю важили більше за самі шляхи. * Залиті іконки (зірки, «в обраному») перевизначають fill точнішим * селектором. */ .ts-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================================== TopShop — Components Кнопки, бейджі, ціна, картка товару, інпути, чіпи. ========================================================================== */ /* --- Кнопки ------------------------------------------------------------- */ .ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ts-space-2); padding: var(--ts-space-3) var(--ts-space-5); border: 1px solid transparent; border-radius: var(--ts-radius-md); font-size: var(--ts-text-base); font-weight: var(--ts-weight-semibold); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--ts-duration-fast) var(--ts-ease), border-color var(--ts-duration-fast) var(--ts-ease), color var(--ts-duration-fast) var(--ts-ease); /* Мінімальна зручна для пальця висота */ min-height: 44px; } .ts-btn:hover { text-decoration: none; } .ts-btn:disabled, .ts-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* Головний CTA — "Додати в кошик" (ТЗ §28) */ .ts-btn--primary { background: var(--ts-color-primary); color: var(--ts-color-primary-contrast); } .ts-btn--primary:hover { background: var(--ts-color-primary-hover); color: var(--ts-color-primary-contrast); } .ts-btn--primary:active { background: var(--ts-color-primary-active); } /* Вторинний CTA — "Уточнити" (ТЗ §29) */ .ts-btn--secondary { background: var(--ts-color-surface); border-color: var(--ts-color-border-strong); color: var(--ts-color-text); } .ts-btn--secondary:hover { background: var(--ts-color-surface-hover); border-color: var(--ts-color-primary); color: var(--ts-color-primary); } /* * М'який варіант — «Швидке замовлення». Не конкурує з головним CTA * кольором, але лишається помітним: це друга за важливістю дія. */ .ts-btn--soft { background: var(--ts-color-primary-soft); border-color: transparent; color: var(--ts-color-primary); } .ts-btn--soft:hover { background: #dbe7fd; border-color: transparent; color: var(--ts-color-primary-hover); } /* * Акцентний варіант — «Швидке замовлення». Червоний градієнт з * логотипа: м'який синій поруч із синьою «Купити» губився. Суцільний * колір лишається запасним — для країв і старих браузерів. */ .ts-btn--accent { background: var(--ts-color-accent); background-image: var(--ts-gradient-accent); border-color: transparent; color: #fff; } .ts-btn--accent:hover { background: var(--ts-color-accent-hover); background-image: var(--ts-gradient-accent-hover); border-color: transparent; color: #fff; } /* Тихий варіант — іконки хедера, "показати ще" */ .ts-btn--ghost { background: transparent; color: var(--ts-color-text); padding-inline: var(--ts-space-3); } .ts-btn--ghost:hover { background: var(--ts-color-surface-sunken); } .ts-btn--sm { min-height: 36px; padding: var(--ts-space-2) var(--ts-space-3); font-size: var(--ts-text-sm); } .ts-btn--lg { min-height: 52px; padding: var(--ts-space-4) var(--ts-space-6); font-size: var(--ts-text-md); } .ts-btn--block { width: 100%; } /* --- Бейджі статусу наявності (ТЗ §14) ---------------------------------- */ .ts-stock { display: inline-flex; align-items: center; gap: var(--ts-space-2); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-medium); line-height: 1.3; } /* Крапка-індикатор замість важкої заливки — менше шуму в сітці */ .ts-stock::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--ts-radius-full); background: currentColor; } .ts-stock--in_stock { color: var(--ts-color-success); } .ts-stock--low_stock { color: var(--ts-color-warning); } .ts-stock--on_order, .ts-stock--expected { color: var(--ts-color-warning); } .ts-stock--out_of_stock, .ts-stock--discontinued { color: var(--ts-color-faint); } /* --- Бейджі загального призначення -------------------------------------- */ .ts-badge { display: inline-flex; align-items: center; gap: var(--ts-space-1); padding: 2px var(--ts-space-2); border-radius: var(--ts-radius-sm); font-size: var(--ts-text-2xs); font-weight: var(--ts-weight-semibold); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; white-space: nowrap; } .ts-badge--discount { background: var(--ts-color-discount); color: #fff; text-transform: none; letter-spacing: 0; font-size: var(--ts-text-xs); } /* * «Хіт продажів» — синій, як основний акцент: це позитивна позначка, * а не знижка, тож червоний тут читався б як терміновість. */ .ts-badge--hit { background: var(--ts-color-primary); color: #fff; text-transform: none; letter-spacing: 0; font-size: var(--ts-text-xs); } /* Безкоштовна доставка — зелений: це вигода, а не попередження. */ .ts-badge--shipping { background: #e7f6ec; color: #08703a; text-transform: none; letter-spacing: 0; font-size: var(--ts-text-xs); } .ts-badge--new { background: var(--ts-color-primary-soft); color: var(--ts-color-primary); } .ts-badge--neutral { background: var(--ts-color-surface-sunken); color: var(--ts-color-muted); } /* --- Ціна --------------------------------------------------------------- */ .ts-price { display: flex; align-items: baseline; gap: var(--ts-space-2); flex-wrap: wrap; } .ts-price__current { font-size: var(--ts-text-xl); font-weight: var(--ts-weight-bold); line-height: 1.1; color: var(--ts-color-price); letter-spacing: var(--ts-tracking-tight); white-space: nowrap; } /* * Ціна в картці разом із (i) «Ціна з ПДВ» (vat_tip()): значок угорі * праворуч, як індекс. Над псевдоелементом посилання картки — інакше * тап по (i) відкривав би товар. */ .ts-price__now { display: inline-flex; align-items: flex-start; gap: 2px; } .ts-price__now .ts-tip { z-index: calc(var(--ts-z-base) + 1); top: -6px; } .ts-price__now .ts-tip__btn { width: 24px; height: 24px; margin: -4px -6px -4px -2px; } .ts-price__now .ts-tip .ts-icon { width: 14px; height: 14px; } /* «з ПДВ» біля ціни — у режимі цін з ПДВ (vat_note()). */ .ts-price__vat { font-size: var(--ts-text-xs); font-weight: var(--ts-weight-semibold); color: var(--ts-color-muted); white-space: nowrap; } /* * Знижка в картці: стара ціна закреслена з бейджем «−15%» рядком над * поточною, а поточна — червона. */ .ts-price__was { display: inline-flex; align-items: center; gap: 6px; } .ts-price__badge { padding: 1px 5px; font-size: var(--ts-text-2xs); line-height: 1.3; } .ts-price.is-sale .ts-price__current { color: var(--ts-color-discount); } .ts-price__old { font-size: var(--ts-text-sm); color: var(--ts-color-price-old); text-decoration: line-through; white-space: nowrap; } .ts-price--lg .ts-price__current { font-size: var(--ts-text-3xl); } .ts-price--lg .ts-price__old { font-size: var(--ts-text-md); } /* --- Картка товару (ТЗ §27) --------------------------------------------- Сітка з 3 рядків: медіа / тіло (розтягується) / підвал. Завдяки цьому ціна й кнопка стоять на одній лінії в усіх картках ряду, навіть коли назви різної довжини. ------------------------------------------------------------------------ */ .ts-card { position: relative; display: grid; /* * Колонку задаємо явно. Без неї вона авторозмірна й тягнеться за * вмістом: фото 1746x1746 від постачальника розпирало картку до * 1747px, і сусідні наїжджали одна на одну. Демо-товари цього не * показували — їхні SVG-заглушки дрібні. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-lg); padding: var(--ts-space-3); transition: border-color var(--ts-duration-base) var(--ts-ease), box-shadow var(--ts-duration-base) var(--ts-ease); } /* * Ховер лише там, де є курсор. На телефоні дотик вмикає :hover і він * лишається: фото збільшувалось під пальцем, назва залипала синьою. */ @media (hover: hover) { .ts-card:hover { border-color: var(--ts-color-border-strong); box-shadow: var(--ts-shadow-md); } } .ts-card__media { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; margin-bottom: var(--ts-space-3); overflow: hidden; border-radius: var(--ts-radius-md); background: var(--ts-color-surface); /* * Картка — grid, а його елементи за замовчуванням не вужчі за * власний вміст (min-width: auto). Фото 400x400 від постачальника * розпирало блок до 376px усередині картки на 285px, і сусідні * картки наїжджали одна на одну. Демо-товари цього не показували, * бо їхні SVG-заглушки дрібніші за колонку. */ min-width: 0; max-width: 100%; } .ts-card__media img { width: 100%; height: 100%; /* Атрибути width/height у теґу не мають задавати розмір. */ max-width: 100%; /* Трохи збільшуємо: фото товарів зазвичай мають власні білі поля, без цього картинка виглядає загубленою в центрі картки. */ object-fit: contain; transform: scale(1.12); mix-blend-mode: multiply; /* прибирає білу рамку навколо фото товару */ transition: transform var(--ts-duration-slow) var(--ts-ease-out); } @media (hover: hover) { .ts-card:hover .ts-card__media img { transform: scale(1.18); } } /* Бейджі поверх фото */ .ts-card__flags { position: absolute; top: var(--ts-space-2); left: var(--ts-space-2); z-index: var(--ts-z-base); display: flex; flex-direction: column; align-items: flex-start; gap: var(--ts-space-1); } .ts-card__body { display: flex; flex-direction: column; gap: var(--ts-space-2); } /* * Порожнеча в картках без характеристик. * * Тіло стоїть у рядку 1fr, щоб ціни й кнопки трималися на одній * лінії в усьому ряду. Але в товарів без переліку характеристик тіло * на 98px нижче за сусідів, і цей запас ставав дірою — між останнім * рядком тіла й роздільником підвалу. * * Тіло лишаємо своєї висоти (align-self: start), а роздільник * малюємо не на підвалі, а під самим тілом — тоді лінія йде одразу * за вмістом, а вільне місце ховається під нею. */ .ts-card__body { align-self: start; } .ts-card__brand { font-size: var(--ts-text-2xs); font-weight: var(--ts-weight-semibold); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-color-muted); } /* * Без min-height: заголовок займає стільки рядків, скільки треба. * * Резерв на два рядки ставили, щоб ціни й кнопки стояли на одній * лінії в усьому ряду. Але це й так робить сітка самої картки * (grid-template-rows: auto 1fr auto) — тіло розтягується, підвал * притискається донизу. А в коротких назв резерв лишав під рядком * порожнє місце, яке виглядало як зайвий пустий рядок. */ .ts-card__title { font-size: var(--ts-text-sm); font-weight: var(--ts-weight-medium); line-height: var(--ts-leading-snug); color: var(--ts-color-text); --ts-clamp-lines: 2; } /* * Обрізаємо саме посилання, а не заголовок. * * Коли -webkit-box стояв на h3, а посилання лишалось рядковим, воно * не підкорялось обрізці: текст ішов третім рядком і вилазив за * межі заголовка. Спроба зробити посилання блоковим ламала обрізку * зовсім — браузер перемикав h3 на flow-root, і тримала висоту сама * лише min-height. * * Тепер -webkit-box на самому посиланні: воно обрізається на двох * рядках і займає рівно свою висоту, тож клікабельний увесь текст. */ .ts-card__title { display: block; } .ts-card__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ts-clamp-lines, 2); line-clamp: var(--ts-clamp-lines, 2); overflow: hidden; color: inherit; } .ts-card__title a:hover { text-decoration: none; } @media (hover: hover) { .ts-card__title a:hover { color: var(--ts-color-primary); } } /* * Розтягуємо клікабельну зону на всю картку, не вкладаючи в . * * Обгортку-посилання лишаємо рядковою (span-подібною) і обрізаємо * текст усередині неї. Псевдоелемент, який ловить кліки по всій * картці, теж на посиланні — інакше на h3 він перекривав би і * перехід не спрацьовував. * * ::before, а не ::after: усередині -webkit-box псевдоелемент стає * рядком флексбокса, і ::after займав місце третього рядка, через * що обрізка на двох рядках переставала діяти. ::before такого не * робить, бо йде до тексту й має нульові розміри. */ .ts-card__title a::before { content: ""; position: absolute; inset: 0; z-index: var(--ts-z-base); } /* Ключові характеристики — 3–5 рядків (ТЗ §27) */ .ts-card__specs { display: flex; flex-direction: column; gap: 2px; font-size: var(--ts-text-xs); color: var(--ts-color-muted); line-height: 1.4; } /* * Характеристика в один рядок: значення (16 GB, 512 GB) не має * розриватися, бо саме воно головне. Якщо не вистачає місця — * обрізаємо підпис, а не значення. */ .ts-card__spec { display: flex; gap: var(--ts-space-1); white-space: nowrap; /* Рядок не має бути ширшим за картку. */ min-width: 0; max-width: 100%; overflow: hidden; } /* * Підпис стискається першим (shrink 999 проти 1 у значення). * Коли обидва мали однакову вагу, на телефоні різалися разом, і * виходило «Серія (модельний … Acer As…» — нечитабельні обидві * половини. Цінне тут значення, а не слово перед двокрапкою. */ .ts-card__spec-label { flex: 0 999 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ts-color-faint); } /* * Значення теж обрізаємо. Раніше воно було flex: none — розраховували * на короткі «16 GB», але від постачальника приходять перерахування * на кшталт «Кнопки: Wi-Fi вкл/викл., WPS, RESET, POWER…» завдовжки * в тисячі пікселів. Такий рядок розпирав сторінку й давав * горизонтальний скрол на всьому каталозі. */ .ts-card__spec-value { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ts-card__sku { font-size: var(--ts-text-2xs); color: var(--ts-color-faint); } .ts-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ts-space-3); margin-top: var(--ts-space-3); padding-top: var(--ts-space-3); border-top: 1px solid var(--ts-color-border); } /* Кнопка в картці має бути над псевдоелементом посилання */ .ts-card__action { position: relative; z-index: calc(var(--ts-z-base) + 1); flex: none; } /* * Кнопка в картці — суцільна синя (рішення власника, жовтень 2026: * кругла кнопка, що висувається в «Купити», полою губилась). При * наведенні — на тон темніша. */ .ts-card__action.ts-btn--primary { background: var(--ts-color-primary); color: var(--ts-color-primary-contrast); border: 1px solid var(--ts-color-primary); } .ts-card__action.ts-btn--primary:hover, .ts-card__action.ts-btn--primary:focus-visible { background: var(--ts-color-primary-hover); color: var(--ts-color-primary-contrast); border-color: var(--ts-color-primary-hover); } .ts-card__action.ts-btn--primary:active { background: var(--ts-color-primary-active); border-color: var(--ts-color-primary-active); color: var(--ts-color-primary-contrast); } /* * Товар уже в кошику — WooCommerce додає .added і показує поруч * «Переглянути кошик». Лишаємо кнопку залитою: дія вже сталася. */ .ts-card__action.ts-btn--primary.added { background: var(--ts-color-primary); color: var(--ts-color-primary-contrast); } /* * Стани «Купити» в картці: кошик → спінер → галочка «В кошику». * Класи .loading і .added ставить сам WooCommerce (ajax_add_to_cart), * тож потрібні лише дві іконки й два підписи в розмітці (card.php). */ .ts-card__action-icon { position: relative; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; } .ts-card__action-icon .ts-icon { grid-area: 1 / 1; transition: opacity var(--ts-duration-fast) var(--ts-ease), transform var(--ts-duration-fast) var(--ts-ease); } .ts-card__action-icon .ts-icon--check { opacity: 0; transform: scale(0.5); } .ts-card__action-done { display: none; } /* Поки йде запит — повторний клік додав би товар двічі. */ .ts-card__action.loading { pointer-events: none; } .ts-card__action.loading .ts-card__action-icon .ts-icon { opacity: 0; } .ts-card__action.loading .ts-card__action-icon::after { content: ""; position: absolute; inset: 1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--ts-radius-full); animation: ts-card-spin 0.7s linear infinite; } .ts-card__action.added .ts-icon--cart { opacity: 0; transform: scale(0.5); } .ts-card__action.added .ts-icon--check { opacity: 1; transform: none; } .ts-card__action.added .ts-card__action-buy { display: none; } .ts-card__action.added .ts-card__action-done { display: inline; } /* * «Переглянути кошик», яке WooCommerce дописує після кнопки, не * потрібне: кнопка й так каже «В кошику», а шухляда кошика відкрилась. */ .ts-card__footer .added_to_cart { display: none; } @keyframes ts-card-spin { to { transform: rotate(360deg); } } /* * На вітринах кнопка — кругла іконка, а «Купити» висувається з неї при * наведенні й лишається, поки йде запит і після додавання. Лише там, * де є курсор і місце: на телефоні підпис і так видно (див. нижче), а * в каталозі кнопка широка з написом. */ @media (hover: hover) and (min-width: 560px) { /* * Кнопка висувається поверх, ліворуч, а не розсуває підвал: у вузькій * картці вітрини розширення в потоці виштовхувало «з ПДВ» у другий * рядок. У потоці лишається лише місце під круглу іконку. */ /* * Ціна — по центру кнопки (обидві 40px заввишки), однаково на * головній, у вітринах і в каталозі: раніше в одних картках вона * сідала донизу, в інших — догори. */ .ts-card__footer:has(> .add_to_cart_button) { position: relative; align-items: center; min-height: calc(40px + var(--ts-space-3)); padding-right: calc(40px + var(--ts-space-3)); } .ts-card__action.add_to_cart_button { position: absolute; right: 0; bottom: 0; min-height: 40px; gap: 0; padding-inline: 10px; border-radius: var(--ts-radius-full); } .ts-card__action.add_to_cart_button .ts-card__action-label { position: static; width: auto; height: auto; max-width: 0; margin: 0; overflow: hidden; clip-path: none; opacity: 0; white-space: nowrap; transition: max-width 0.25s var(--ts-ease), margin 0.25s var(--ts-ease), opacity 0.2s var(--ts-ease); } /* * Після додавання — знову кругла, з галочкою: «В кошику» ширше за * «Купити» і у вузькій картці лягало на ціну, а галочка й так каже, * що товар у кошику. */ .ts-card__action.add_to_cart_button:not(.added):hover .ts-card__action-label, .ts-card__action.add_to_cart_button:not(.added):focus-visible .ts-card__action-label, .ts-card__action.add_to_cart_button.loading .ts-card__action-label { max-width: 7em; margin-left: 6px; opacity: 1; } /* Розкрита — трохи тісніша: у картці на 216px кожен піксель на рахунку. */ .ts-card__action.add_to_cart_button:not(.added):hover, .ts-card__action.add_to_cart_button:not(.added):focus-visible, .ts-card__action.add_to_cart_button.loading { padding-inline: 8px 10px; } /* * Сітка каталогу — та сама кругла кнопка, що на головній (рішення * власника): широка «Купити» на всю картку виглядала як на телефоні. * Підвал — у рядок: ціна ліворуч, кнопка праворуч. */ /* * .ts-card у селекторі — для ваги: базове правило каталогу * (колонка) стоїть у файлі нижче й інакше перебивало це. */ .ts-grid--catalog .ts-card .ts-card__footer { flex-direction: row; align-items: center; } .ts-grid--catalog .ts-card .ts-card__action.add_to_cart_button { width: auto; min-height: 40px; } /* «Детальніше» (немає в наявності) — квадрат зі стрілкою, як на головній. */ .ts-grid--catalog .ts-card .ts-card__action.ts-btn--secondary { flex: 0 0 auto; width: 40px; min-width: 40px; padding-inline: 0; } .ts-grid--catalog .ts-card__action.ts-btn--secondary .ts-card__action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* * Знижка: стара ціна — рядком НАД поточною, як на телефоні. У рядок * поруч вона у вузьких картках (188–248px) лягала під розкриту * «Купити» або переносилась абияк. Нижній рядок — поточна ціна в * 40px заввишки, по центру кнопки, тож без знижки нічого не змінюється. * Стоїть після правил каталогу — ті ж ваги, перемагає порядок. */ .ts-card .ts-card__footer:has(> .ts-card__action) { align-items: flex-end; } .ts-card .ts-card__footer:has(> .ts-card__action) .ts-price { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0; } .ts-card .ts-card__footer:has(> .ts-card__action) .ts-price__now { min-height: 40px; align-items: center; } /* * «Детальніше» (немає в наявності) — квадрат 40px у потоці, тієї ж * висоти, що й кругла «Купити»: так ціна стоїть по центру в обох * картках. Раніше в цій картці ціна сідала нижче за інші в ряду. */ .ts-card .ts-card__footer > .ts-card__action.ts-btn--secondary { height: 40px; min-height: 40px; } /* * Зовсім вузька картка (головна на екрані ~1280px — 188–206px): поруч * із ціною «Купити» не вміщується й лягала на цифри, тож кнопка * лишається круглою; спінер і галочка працюють як завжди. Ширину * знає сама картка (container query), а не екран. */ .ts-card:has(.ts-card__action.add_to_cart_button) { container-type: inline-size; } @container (max-width: 212px) { .ts-card__action.add_to_cart_button .ts-card__action-label, .ts-card__action.add_to_cart_button:not(.added):hover .ts-card__action-label, .ts-card__action.add_to_cart_button:not(.added):focus-visible .ts-card__action-label, .ts-card__action.add_to_cart_button.loading .ts-card__action-label { max-width: 0; margin-left: 0; opacity: 0; } .ts-card__action.add_to_cart_button:not(.added):hover, .ts-card__action.add_to_cart_button:not(.added):focus-visible, .ts-card__action.add_to_cart_button.loading { padding-inline: 10px; } } /* Список каталогу лишається з широкою кнопкою: місця там удосталь. */ .ts-list--catalog .ts-card__footer:has(> .add_to_cart_button) { min-height: 0; padding-right: 0; } .ts-list--catalog .ts-card__action.add_to_cart_button, .ts-list--catalog .ts-card__action.add_to_cart_button:not(.added):hover, .ts-list--catalog .ts-card__action.add_to_cart_button.loading { position: relative; right: auto; bottom: auto; gap: var(--ts-space-2); padding-inline: var(--ts-space-3); border-radius: var(--ts-radius-md); } .ts-list--catalog .ts-card__action.add_to_cart_button .ts-card__action-label, .ts-list--catalog .ts-card__action.add_to_cart_button:not(.added):hover .ts-card__action-label, .ts-list--catalog .ts-card__action.add_to_cart_button:not(.added):focus-visible .ts-card__action-label { max-width: none; margin: 0; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ts-card__action.loading .ts-card__action-icon::after { animation-duration: 2s; } .ts-card__action.add_to_cart_button .ts-card__action-label { transition: none; } } /* --- Поля вводу --------------------------------------------------------- */ .ts-input { width: 100%; min-height: 44px; padding: var(--ts-space-3); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border-strong); border-radius: var(--ts-radius-md); font-size: var(--ts-text-base); color: var(--ts-color-text); transition: border-color var(--ts-duration-fast) var(--ts-ease), box-shadow var(--ts-duration-fast) var(--ts-ease); } .ts-input::placeholder { color: var(--ts-color-faint); } .ts-input:focus { outline: none; border-color: var(--ts-color-primary); box-shadow: var(--ts-shadow-focus); } .ts-input[aria-invalid="true"] { border-color: var(--ts-color-danger); } .ts-field { display: flex; flex-direction: column; gap: var(--ts-space-2); } .ts-field__label { font-size: var(--ts-text-sm); font-weight: var(--ts-weight-medium); color: var(--ts-color-text); } .ts-field__error { font-size: var(--ts-text-xs); color: var(--ts-color-danger); } /* Під полем WooCommerce (телефон у checkout) — окремим рядком. */ .form-row > .ts-field__error:not([hidden]) { display: block; margin-top: var(--ts-space-1); } /* --- Чіпи вибраних фільтрів (ТЗ §10) ------------------------------------ */ .ts-chip { display: inline-flex; align-items: center; gap: var(--ts-space-2); padding: var(--ts-space-1) var(--ts-space-3); background: var(--ts-color-primary-soft); border: 1px solid transparent; border-radius: var(--ts-radius-full); font-size: var(--ts-text-xs); font-weight: var(--ts-weight-medium); color: var(--ts-color-primary); } .ts-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--ts-radius-full); color: currentColor; opacity: 0.7; } .ts-chip__remove:hover { opacity: 1; background: rgba(11, 99, 246, 0.15); } /* --- Лічильник (міні-кошик) --------------------------------------------- */ .ts-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding-inline: 5px; background: var(--ts-color-primary); color: #fff; border-radius: var(--ts-radius-full); font-size: var(--ts-text-2xs); font-weight: var(--ts-weight-bold); line-height: 1; } /* --- Порожні / завантажувальні стани (ТЗ §49) --------------------------- */ .ts-empty { padding: var(--ts-space-12) var(--ts-space-4); text-align: center; color: var(--ts-color-muted); } .ts-empty__title { font-size: var(--ts-text-lg); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); margin-bottom: var(--ts-space-2); } .ts-skeleton { background: linear-gradient( 90deg, var(--ts-color-surface-sunken) 25%, #eaeef4 37%, var(--ts-color-surface-sunken) 63% ); background-size: 400% 100%; border-radius: var(--ts-radius-sm); animation: ts-shimmer 1.4s ease infinite; } @keyframes ts-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .ts-skeleton { animation: none; } } /* ========================================================================== Картка товару на телефоні (до 559px) Обидва режими — в одну колонку, як у x-kom. Різниця в орієнтації: - сітка → вертикальна картка: велике фото зверху, дані під ним; - список → горизонтальна: фото ліворуч, дані праворуч. Перемикач лишається доступним, бо обидва режими тут доречні. ========================================================================== */ @media (max-width: 559px) { /* --- Спільне для обох режимів --------------------------------------- */ /* * Кнопка отримує текст і повну ширину замість іконки 44×44: * іконка без підпису — і погана ціль для пальця, і незрозуміла дія. */ .ts-card__action { flex: 1 1 auto; min-width: 0; min-height: 44px; } /* * Підпис — .ts-card__action-label (раніше тут стояв .ts-visually-hidden, * якого в розмітці кнопки давно немає, і на телефоні лишалась сама * іконка на всю ширину). */ .ts-card__action .ts-card__action-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: nowrap; } /* * На головній і у вітринах — компактна «Купити» за розміром вмісту, * скруглена, як на комп'ютері, притиснута праворуч. На всю ширину * поруч із ціною вона була важчою за сам товар. Висота 44px — під * палець. У каталозі кнопка лишається широкою. */ .ts-grid--home .ts-card__action.add_to_cart_button, .ts-showcase .ts-card__action.add_to_cart_button { flex: 0 0 auto; margin-left: auto; padding-inline: var(--ts-space-4); border-radius: var(--ts-radius-full); } /* * Стара ціна — НАД поточною, а не поруч. * У рядок вона з'їдала ширину, яку краще віддати кнопці: * "58 537 ₴ 66 519 ₴ [В кошик]" не вміщувалось нормально. */ .ts-card__footer .ts-price { flex: none; flex-direction: column-reverse; /* old іде першим у розмітці знизу */ align-items: flex-start; gap: 0; } .ts-card__footer .ts-price__old { font-size: var(--ts-text-xs); line-height: 1.2; } /* Статус наявності не має розриватися на два рядки */ .ts-card .ts-stock { font-size: var(--ts-text-xs); align-items: flex-start; } .ts-card .ts-stock::before { /* Крапка вирівнюється по першому рядку тексту, а не по центру блоку */ margin-top: 5px; } /* Код товару в списку зайвий — він є на сторінці товару */ .ts-card__sku { display: none; } /* --- Режим сітки: вертикальна картка з великим фото ------------------ */ .ts-grid--catalog .ts-card__media { /* Фото на всю ширину картки — головна перевага цього режиму */ aspect-ratio: 4 / 3; } .ts-grid--catalog .ts-card__title { font-size: var(--ts-text-md); --ts-clamp-lines: 2; min-height: calc(var(--ts-text-md) * var(--ts-leading-snug) * 2); } /* --- Режим списку: горизонтальна картка ------------------------------ */ /* * Колонка фото — 33% ширини картки, як у x-kom. * * Саме частка, а не фіксовані пікселі: 116px давали 39% на 320px * і лише 27% на 480px — розкладка "пливла" між пристроями. * * Відсоток у grid рахується від content-box, тобто без padding і * gap. Щоб на екрані вийшла справжня третина картки, додаємо * їхню частку назад: 33% від (padding*2 + gap) = 33% * 36px. */ .ts-list--catalog .ts-card { grid-template-columns: calc(33% + 12px) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--ts-space-3); align-items: start; padding: var(--ts-space-3); } .ts-list--catalog .ts-card__media { grid-column: 1; grid-row: 1; margin-bottom: 0; aspect-ratio: 1 / 1; } .ts-list--catalog .ts-card__body { grid-column: 2; grid-row: 1; } /* Підвал на всю ширину під обома колонками */ .ts-list--catalog .ts-card__footer { grid-column: 1 / -1; grid-row: 2; align-items: center; gap: var(--ts-space-3); } /* Праворуч місця менше — назва може зайняти три рядки */ .ts-list--catalog .ts-card__title { --ts-clamp-lines: 3; min-height: 0; } } /* Зовсім вузькі екрани (320–359px): ціна над кнопкою */ @media (max-width: 359px) { .ts-card__footer { flex-direction: column; align-items: stretch; } .ts-card__action { width: 100%; } } /* --- Шухляда кошика -------------------------------------------------------- */ .ts-cart-drawer { width: min(92vw, 420px); } .ts-cart-drawer__title { display: flex; align-items: center; gap: var(--ts-space-2); } /* Зелений — лише коли це підтвердження додавання. */ .ts-cart-drawer__title:has(.ts-cart-drawer__check:not([hidden])) { color: var(--ts-color-success); } .ts-cart-drawer__body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 0; } .ts-cart-drawer__items { flex: 1 1 auto; margin: 0; padding: 0 var(--ts-space-4); overflow-y: auto; /* Інерційний скрол на iOS, інакше список «залипає». */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; list-style: none; } .ts-cart-drawer__item { display: flex; align-items: flex-start; gap: var(--ts-space-3); padding: var(--ts-space-4) 0; } .ts-cart-drawer__item + .ts-cart-drawer__item { border-top: 1px solid var(--ts-color-border); } .ts-cart-drawer__thumb { flex: 0 0 auto; width: 64px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--ts-radius-md); } .ts-cart-drawer__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .ts-cart-drawer__info { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--ts-space-1); min-width: 0; } .ts-cart-drawer__name { font-size: var(--ts-text-sm); line-height: var(--ts-leading-snug); color: var(--ts-color-text-strong); } .ts-cart-drawer__name:hover { color: var(--ts-color-primary); text-decoration: none; } .ts-cart-drawer__meta { font-size: var(--ts-text-xs); color: var(--ts-color-muted); } .ts-cart-drawer__side { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: var(--ts-space-2); } .ts-cart-drawer__price { font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ts-color-text-strong); } .ts-cart-drawer__remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--ts-radius-sm); color: var(--ts-color-faint); } .ts-cart-drawer__remove:hover { background: var(--ts-color-danger-soft); color: var(--ts-color-danger); text-decoration: none; } /* --- Рекомендації в шухляді ----------------------------------------------- */ /* * Стоять між списком і підвалом, поза зоною прокрутки: сенс блоку в * тому, щоб його побачили, а прокручений донизу список ховав би його * від тих, у кого в кошику більше двох позицій. * * Розмітку дає плагін контенту (Cart_Picks_Renderer), тож класи * ts-cart-picks__* мають лишатися синхронними з ним. */ .ts-cart-picks { flex: 0 0 auto; padding: var(--ts-space-4); border-top: 1px solid var(--ts-color-border); background: var(--ts-color-surface-sunken); } .ts-cart-picks__title { margin: 0 0 var(--ts-space-3); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-cart-picks__list { display: flex; flex-direction: column; gap: var(--ts-space-2); margin: 0; padding: 0; list-style: none; } /* * Рядок, а не плитка: у шухляді 380px три плитки поруч дали б * картинку 90px і назву в один обрізаний рядок. */ .ts-cart-picks__item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: var(--ts-space-2); padding: var(--ts-space-2); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md); } .ts-cart-picks__link { display: contents; color: inherit; } .ts-cart-picks__link:hover .ts-cart-picks__name { color: var(--ts-color-primary); } .ts-cart-picks__media { width: 40px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--ts-radius-sm); } .ts-cart-picks__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .ts-cart-picks__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--ts-text-xs); line-height: var(--ts-leading-snug); color: var(--ts-color-text); } /* * Ціна над кнопкою в одній комірці, а не двома рядками сітки: інакше * кожна картка ставала на рядок вищою, і три рекомендації з'їдали * половину шухляди. */ .ts-cart-picks__price { grid-column: 3; grid-row: 1; font-size: var(--ts-text-xs); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); white-space: nowrap; text-align: right; } /* Стару ціну в шухляді не показуємо — місця на неї немає. */ .ts-cart-picks__price del { display: none; } .ts-cart-picks__form { grid-column: 4; grid-row: 1; margin: 0; } .ts-cart-picks__add { min-height: 32px; padding-inline: var(--ts-space-3); font-size: var(--ts-text-2xs); white-space: nowrap; } /* Підвал липне до низу шухляди — CTA завжди на очах. */ .ts-cart-drawer__foot { flex: 0 0 auto; padding: var(--ts-space-4); background: var(--ts-color-surface); border-top: 1px solid var(--ts-color-border); /* Щоб кнопка не лізла під домашню смугу iPhone. */ padding-bottom: calc(var(--ts-space-4) + env(safe-area-inset-bottom)); } .ts-cart-drawer__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ts-space-3); margin-bottom: var(--ts-space-4); color: var(--ts-color-muted); } .ts-cart-drawer__total strong { font-size: var(--ts-text-lg); color: var(--ts-color-text-strong); } .ts-cart-drawer__continue { display: block; width: 100%; margin-top: var(--ts-space-3); /* 44px — мінімальна зручна ціль для пальця. */ min-height: 44px; font-size: var(--ts-text-sm); color: var(--ts-color-muted); background: none; border: 0; cursor: pointer; } .ts-cart-drawer__continue:hover { color: var(--ts-color-primary); } .ts-cart-drawer__empty { display: flex; flex-direction: column; align-items: center; gap: var(--ts-space-4); padding: var(--ts-space-8) var(--ts-space-4); text-align: center; color: var(--ts-color-muted); } /* Поки товар летить у кошик — приглушуємо кнопку. */ .is-busy { opacity: 0.6; pointer-events: none; } .ts-cart-drawer__check[hidden] { display: none; } .ts-cart-drawer__check { display: inline-flex; } /* --- Обране й рейтинг у картці ------------------------------------------ */ /* * Серце в куті фото, як у макеті. Напівпрозоре біле коло: на світлих * знімках сама іконка без підкладки зникає. */ .ts-card__wish { position: absolute; top: var(--ts-space-2); right: var(--ts-space-2); z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-full); background: rgba(255, 255, 255, 0.92); color: var(--ts-color-muted); cursor: pointer; transition: color var(--ts-duration-fast) var(--ts-ease), border-color var(--ts-duration-fast) var(--ts-ease); } .ts-card__wish:hover { color: var(--ts-color-danger, #e11d48); border-color: var(--ts-color-danger, #e11d48); } /* Заповнене серце — товар уже в списку. */ .ts-card__wish.is-on { color: var(--ts-color-danger, #e11d48); border-color: var(--ts-color-danger, #e11d48); } .ts-card__wish.is-on .ts-icon { fill: currentColor; } .ts-card__rating { display: flex; align-items: center; gap: var(--ts-space-1); font-size: var(--ts-text-sm); } .ts-card__rating-star { display: inline-flex; color: #f5a524; } .ts-card__rating-star .ts-icon { fill: currentColor; stroke: none; } .ts-card__rating-value { font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-card__rating-count { color: var(--ts-color-faint); } /* --- Картка в каталозі з фільтрами --------------------------------------- */ /* * Зміни нижче стосуються лише сторінок каталогу (.ts-grid--catalog). * На головній картка лишається як була: там вітрина, де ряд синіх * плашок перетягував би увагу з товарів на кнопки. * * У каталозі інакше — людина вже обрала розділ, відфільтрувала й * порівнює конкретні позиції. Тут головна дія має бути названа * словом і помітна. */ /* Напис на кнопці ховаємо скрізь, крім каталогу. */ .ts-card__action-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* * Список каталогу — та сама сторінка, інший вигляд картки, тож * підпис на кнопці потрібен і там. Місця в ньому навіть більше: * підвал іде на всю ширину під фото й текстом. */ .ts-grid--catalog .ts-card__action-label, .ts-list--catalog .ts-card__action-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; font-size: var(--ts-text-sm); } /* * Підвал у два рядки: ціна зверху на всю ширину, кнопка під нею. * * Ціна й кнопка в один рядок тиснули одна одну — у сітці по чотири * картки на «5 293₴» і кнопку з написом разом лишається менше 200px, * і кнопка з'їжджала в два рядки або обрізалась. */ .ts-grid--catalog .ts-card__footer { flex-direction: column; align-items: stretch; gap: var(--ts-space-2); } .ts-grid--catalog .ts-card__footer .ts-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ts-space-2); } .ts-grid--catalog .ts-card__action { justify-content: center; width: 100%; min-height: 40px; } .ts-grid--catalog .ts-card__action.ts-btn--primary, .ts-list--catalog .ts-card__action.ts-btn--primary { background: var(--ts-color-primary); color: var(--ts-color-primary-contrast); border-color: var(--ts-color-primary); } .ts-grid--catalog .ts-card__action.ts-btn--primary:hover, .ts-grid--catalog .ts-card__action.ts-btn--primary:focus-visible { background: var(--ts-color-primary-hover); border-color: var(--ts-color-primary-hover); } /* * Телефон, каталог: ціна й компактна «Купити» в один рядок в обох режимах, * як на головній. На всю ширину кнопка була важчою за сам товар, а в сітці * ще й стояла під ціною. Висота 44px — під палець. */ @media (max-width: 559px) { .ts-grid--catalog .ts-card .ts-card__footer, .ts-list--catalog .ts-card .ts-card__footer { flex-direction: row; align-items: center; justify-content: space-between; } .ts-grid--catalog .ts-card .ts-card__action, .ts-list--catalog .ts-card .ts-card__action { flex: 0 0 auto; width: auto; min-height: 44px; margin-left: auto; padding-inline: var(--ts-space-4); border-radius: var(--ts-radius-full); } } /* --- Характеристики з іконками ------------------------------------------ */ /* * Бренд і код товару в один рядок: обидва службові, і окремий рядок * під код відтісняв характеристики вниз картки. */ .ts-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ts-space-2); } .ts-card__meta .ts-card__sku { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } /* * Іконка замість підпису. Підпис («Об'єм:», «Інтерфейс:») з'їдав * піврядка на слово, зрозуміле зі значення, і довгі назви на кшталт * «Швидкість обертання шпинделя» витісняли саме значення. */ .ts-card__spec-icon { display: inline-flex; flex: 0 0 auto; color: var(--ts-color-faint); } .ts-card__spec { align-items: center; gap: var(--ts-space-2); } .ts-card__spec-value { color: var(--ts-color-text); } /* * Характеристики трохи більші: 12px поруч із назвою товару читались * як дрібний підпис, хоча саме за ними порівнюють товари в каталозі. */ .ts-card__specs { font-size: var(--ts-text-sm); line-height: 1.5; gap: var(--ts-space-1); } /* --- Рейтинг одразу під назвою ------------------------------------------- */ /* * Оцінка працює як аргумент «беруть інші», тож стоїть поруч із * назвою, а не в кінці картки під наявністю. * * Переставляємо через order, бо в розмітці рейтинг іде останнім: * WooCommerce збирає тіло картки в тому порядку, у якому дані * приходять, і зачіпати це в шаблоні заради вигляду не варто. */ .ts-card__body { /* Явні номери, бо order рахується від усіх дітей одразу. */ --ts-order-meta: 1; --ts-order-title: 2; --ts-order-rating: 3; --ts-order-specs: 4; --ts-order-stock: 5; } .ts-card__meta { order: var(--ts-order-meta); } .ts-card__title { order: var(--ts-order-title); } .ts-card__rating { order: var(--ts-order-rating); } .ts-card__specs { order: var(--ts-order-specs); } .ts-card__body .ts-stock { order: var(--ts-order-stock); } /* * «Детальніше»: стрілка праворуч від підпису. * * Стрілка означає перехід далі, тож стоїть після тексту — як у * посиланнях «Переглянути всі товари» на головній. У «Купити» * іконка кошика лишається ліворуч: там вона позначає дію, а не * напрямок. * * Перевертаємо порядком, а не в розмітці: та сама кнопка на головній * показує лише іконку, і там порядок ні на що не впливає. */ .ts-grid--catalog .ts-card__action.ts-btn--secondary .ts-icon, .ts-list--catalog .ts-card__action.ts-btn--secondary .ts-icon { order: 2; } /* * Ціль для пальця — 44px (правило мобільної верстки), хоча самі кнопки * дрібніші: хрестик смуги оголошень, «Скопіювати» біля коду товару, * перемикач «сіткою / списком», обране й порівняння в картці, стрілки * банера й галереї, підказки. Невидима зона довкола кнопки замість * збільшення самої кнопки — вигляд лишається тим самим. */ @media (pointer: coarse) { .ts-topbar__close, .ts-copy, .ts-viewbtn, .ts-tip__btn { position: relative; } .ts-topbar__close::after, .ts-copy::after, .ts-viewbtn::after, .ts-tip__btn::after, .ts-card__wish::after, .ts-card__compare::after, .ts-hero__arrow::after, .ts-gallery__nav::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* Невидима зона тут не працює: сусіди або overflow її обрізають. */ body .ts-viewbtn { width: 44px; } body .ts-qty__btn { width: 40px; height: 44px; } .ts-dropdown__option { min-height: 44px; } .ts-tabs--pill .ts-tabs__item { min-height: 44px; } .ts-home__head .ts-section__more { padding-block: 12px; margin-block: -12px; } } /* ========================================================================== Плаваюча кнопка контактів (template-parts/common/contact-fab.php) ========================================================================== */ .ts-fab { --ts-fab-offset: var(--ts-space-6); position: fixed; z-index: calc(var(--ts-z-header) + 10); right: var(--ts-fab-offset); bottom: calc(var(--ts-fab-offset) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--ts-space-3); pointer-events: none; } .ts-fab > * { pointer-events: auto; } /* --- Кнопка ----------------------------------------------------------- */ .ts-fab__btn { position: relative; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; color: var(--ts-color-primary-contrast); background: var(--ts-color-primary); border: 0; border-radius: var(--ts-radius-full); box-shadow: 0 10px 24px rgba(11, 99, 246, 0.35), 0 2px 6px rgba(10, 37, 64, 0.15); cursor: pointer; transition: transform var(--ts-duration-fast) var(--ts-ease), background-color var(--ts-duration-fast) var(--ts-ease); } .ts-fab__btn:hover { background: var(--ts-color-primary-hover); transform: translateY(-2px); } .ts-fab__btn:focus-visible { outline: 3px solid var(--ts-color-primary-soft); outline-offset: 3px; } /* * Хвиля довкола кнопки — двічі після завантаження, щоб помітили, і * більше не смикає. Без анімацій для тих, хто їх вимкнув. */ .ts-fab__btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(11, 99, 246, 0.45); animation: ts-fab-pulse 2.4s var(--ts-ease) 1.5s 2; } @keyframes ts-fab-pulse { 0% { box-shadow: 0 0 0 0 rgba(11, 99, 246, 0.45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(11, 99, 246, 0); } } .ts-fab__btn-icon { grid-area: 1 / 1; display: grid; place-items: center; transition: transform var(--ts-duration-base) var(--ts-ease), opacity var(--ts-duration-fast) var(--ts-ease); } .ts-fab__btn-icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); } .ts-fab.is-open .ts-fab__btn-icon--open { opacity: 0; transform: rotate(90deg) scale(0.6); } .ts-fab.is-open .ts-fab__btn-icon--close { opacity: 1; transform: none; } /* --- Панель ------------------------------------------------------------ */ .ts-fab__panel { width: min(320px, calc(100vw - 2 * var(--ts-fab-offset))); padding: var(--ts-space-3); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-xl); box-shadow: var(--ts-shadow-lg); transform-origin: bottom right; animation: ts-fab-in var(--ts-duration-base) var(--ts-ease); } .ts-fab__panel[hidden] { display: none; } @keyframes ts-fab-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } } .ts-fab__head { padding: var(--ts-space-2) var(--ts-space-3) var(--ts-space-3); border-bottom: 1px solid var(--ts-color-border); margin-bottom: var(--ts-space-2); } .ts-fab__title { margin: 0; font-size: var(--ts-text-md); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-fab__hours { margin: 2px 0 0; font-size: var(--ts-text-xs); color: var(--ts-color-muted); } .ts-fab__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .ts-fab__item { display: flex; align-items: center; gap: var(--ts-space-3); width: 100%; min-height: 56px; padding: var(--ts-space-2) var(--ts-space-3); font: inherit; text-align: left; color: var(--ts-color-text); background: transparent; border: 0; border-radius: var(--ts-radius-lg); cursor: pointer; transition: background-color var(--ts-duration-fast) var(--ts-ease); } .ts-fab__item:hover, .ts-fab__item:focus-visible { color: var(--ts-color-text); background: var(--ts-color-surface-hover); text-decoration: none; } .ts-fab__item:focus-visible { outline: 2px solid var(--ts-color-border-focus); outline-offset: -2px; } /* Кружок 40px: логотипи месенджерів уже круглі, для решти — свій колір. */ .ts-fab__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: #fff; border-radius: var(--ts-radius-full); transition: transform var(--ts-duration-fast) var(--ts-ease); } .ts-fab__icon img { display: block; width: 40px; height: 40px; } .ts-fab__item:hover .ts-fab__icon { transform: scale(1.06); } .ts-fab__item--phone .ts-fab__icon { background: var(--ts-color-success); } .ts-fab__item--email .ts-fab__icon { background: #f59e0b; } .ts-fab__item--callback .ts-fab__icon { background: var(--ts-color-primary); } .ts-fab__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .ts-fab__label { font-size: var(--ts-text-base); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-fab__sub { font-size: var(--ts-text-xs); color: var(--ts-color-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* «Замовити дзвінок» — головна дія: відокремлена й підсвічена. */ .ts-fab__item--callback { margin-top: var(--ts-space-2); background: var(--ts-color-primary-soft); } .ts-fab__item--callback:hover, .ts-fab__item--callback:focus-visible { background: #dce8fd; } .ts-fab__item--callback .ts-fab__label { color: var(--ts-color-primary); } .ts-callback__lead { margin: 0 0 var(--ts-space-4); font-size: var(--ts-text-base); color: var(--ts-color-muted); line-height: var(--ts-leading-relaxed); } /* * Телефон: над нижньою панеллю навігації (60px), а на картці товару, * коли видно липку панель купівлі, — ще вище, щоб не накривати * «Додати в кошик». */ @media (max-width: 1023px) { .ts-fab { --ts-fab-offset: var(--ts-space-4); bottom: calc(60px + var(--ts-space-4) + env(safe-area-inset-bottom, 0px)); } .ts-fab__btn { width: 52px; height: 52px; } body:has(.ts-sticky-buy.is-visible) .ts-fab { bottom: calc(60px + 86px + var(--ts-space-3) + env(safe-area-inset-bottom, 0px)); } /* * Відкрита панель — по ширині екрана, як лист. Межі — left/right * самого блоку, а не 100vw: у 100vw входить смуга прокрутки, і * панель стояла несиметрично. */ .ts-fab { left: var(--ts-fab-offset); } .ts-fab__panel { width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); overflow-y: auto; overscroll-behavior: contain; } } /* * Невисокий екран (iPhone SE): компактні пункти без номерів і без * заголовка — інакше «Замовити дзвінок» ховався за прокруткою. */ @media (max-width: 1023px) and (max-height: 700px) { .ts-fab__head, .ts-fab__sub { display: none; } .ts-fab__item { min-height: 48px; } .ts-fab__icon, .ts-fab__icon img { width: 34px; height: 34px; } } /* Телефон боком: висоти мало — пункти у дві колонки. */ @media (max-width: 1023px) and (max-height: 500px) { .ts-fab__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-fab__item--callback { margin-top: 0; } .ts-fab__head { display: none; } } @media (prefers-reduced-motion: reduce) { .ts-fab__btn::before, .ts-fab__panel { animation: none; } } /* ========================================================================== TopShop — Header Два яруси (ТЗ §24): лого + великий пошук + дії; нижче — навігація. Слот міні-кошика закладено одразу (ТЗ §30). ========================================================================== */ .ts-header { position: sticky; top: 0; z-index: var(--ts-z-header); background: var(--ts-color-surface); } /* --- Верхній ярус ------------------------------------------------------- */ /* * Верхній ярус — окремим шаром над мегаменю. Інакше при відкритому * каталозі панелі кошика, акаунта, телефонів і підказки пошуку * (--ts-z-dropdown) ховались під ним (--ts-z-megamenu). Порядок панелей * між собою лишається всередині цього шару. */ .ts-header__main { position: relative; z-index: calc(var(--ts-z-megamenu) + 1); display: flex; align-items: center; gap: var(--ts-space-4); padding-block: var(--ts-space-3); } .ts-logo { flex: none; display: inline-flex; align-items: center; gap: var(--ts-space-2); font-size: var(--ts-text-xl); font-weight: var(--ts-weight-bold); letter-spacing: var(--ts-tracking-tight); color: var(--ts-color-text-strong); } .ts-logo:hover { text-decoration: none; } .ts-logo__mark { color: var(--ts-color-primary); } /* --- Пошук — головний елемент хедера (ТЗ §12) --------------------------- */ .ts-search { position: relative; flex: 1 1 auto; max-width: 720px; } .ts-search__form { display: flex; align-items: center; background: var(--ts-color-surface-sunken); border: 1px solid transparent; border-radius: var(--ts-radius-md); transition: border-color var(--ts-duration-fast) var(--ts-ease), background-color var(--ts-duration-fast) var(--ts-ease), box-shadow var(--ts-duration-fast) var(--ts-ease); } .ts-search__form:focus-within { background: var(--ts-color-surface); border-color: var(--ts-color-primary); box-shadow: var(--ts-shadow-focus); } .ts-search__input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: var(--ts-space-3) var(--ts-space-4); background: transparent; border: 0; font-size: var(--ts-text-base); color: var(--ts-color-text); } .ts-search__input:focus { outline: none; } .ts-search__input::placeholder { color: var(--ts-color-faint); } /* * На телефоні підказка дрібніша за сам ввід. Саме поле мусить * лишатися 16px — менший шрифт змушує iOS зумити сторінку при * фокусі, — але підказка з цим розміром виглядала як готовий * текст і майже впиралася в кнопку пошуку. */ /* Прибираємо нативний хрестик Chrome — маємо власний */ .ts-search__input::-webkit-search-cancel-button { display: none; } /* * Хрестик очищення. Вужчий за кнопку пошуку (36px проти 44px), щоб не * читався як другий рівноцінний елемент керування, але лишався в межах * зручного влучання пальцем разом із падингом поля. */ .ts-search__reset { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--ts-color-faint); background: none; border: 0; border-radius: var(--ts-radius-full, 999px); cursor: pointer; } .ts-search__reset[hidden] { display: none; } .ts-search__reset:hover { color: var(--ts-color-text); background: var(--ts-color-surface-sunken); } .ts-search__form:focus-within .ts-search__reset:hover { background: var(--ts-color-border-subtle, rgba(0, 0, 0, 0.06)); } .ts-search__submit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ts-color-muted); border-radius: var(--ts-radius-md); } .ts-search__submit:hover { color: var(--ts-color-primary); } /* --- Autocomplete (ТЗ §12) ---------------------------------------------- */ .ts-search__results { position: absolute; top: calc(100% + var(--ts-space-2)); left: 0; right: 0; z-index: var(--ts-z-dropdown); max-height: min(60vh, 520px); overflow-y: auto; /* Кінець списку не має штовхати сторінку під ним. */ overscroll-behavior: contain; background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-lg); } .ts-search__results[hidden] { display: none; } /* * Десктоп: панель не прив'язана до ширини поля. Поле на широкому * екрані — лише ~550px (праворуч кнопки з підписами), і в дві колонки * назви товарів обривались на «Відеокарта...». Панель їде праворуч * поверх кнопок шапки — вона й так перекриває вміст під собою. * 100vw − 400px — щоб на 1024–1279 не вийти за правий край. */ @media (min-width: 1024px) { .ts-search__results { right: auto; width: max(100%, min(860px, calc(100vw - 400px))); } } @media (max-width: 767px) { /* * Поле пошуку вузьке (ліворуч логотип, праворуч кнопки), і підказки * в його ширину ламали назви товарів на три рядки. Розтягуємо панель * на весь екран — вона й так перекриває вміст. */ .ts-search__results { /* * Прив'язка до лівого краю екрана, а не до центра поля: поле * зміщене (ліворуч логотип, праворуч кнопки), тому центрування * по ньому виносило панель за правий край і давало * горизонтальний скрол. */ left: calc(-1 * var(--ts-search-offset, 0px)); right: auto; /* Без смуги прокрутки (main.js, Search.syncOffset); 100dvw — запасний. */ width: var(--ts-search-vw, 100dvw); max-width: var(--ts-search-vw, 100dvw); border-left: 0; border-right: 0; border-radius: 0; } } .ts-suggest { display: flex; align-items: center; gap: var(--ts-space-3); padding: var(--ts-space-3) var(--ts-space-4); color: var(--ts-color-text); border-bottom: 1px solid var(--ts-color-border); } .ts-suggest:last-child { border-bottom: 0; } /* Підсвітка при наведенні І при клавіатурній навігації — один стиль */ .ts-suggest:hover, .ts-suggest[aria-selected="true"] { background: var(--ts-color-surface-sunken); text-decoration: none; } .ts-suggest__media { flex: none; width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; } .ts-suggest__body { flex: 1 1 auto; min-width: 0; } .ts-suggest__title { font-size: var(--ts-text-sm); line-height: var(--ts-leading-snug); --ts-clamp-lines: 1; } .ts-suggest__meta { font-size: var(--ts-text-2xs); color: var(--ts-color-faint); } .ts-suggest__price { flex: none; font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); white-space: nowrap; } .ts-search__all { display: block; padding: var(--ts-space-3) var(--ts-space-4); text-align: center; font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: var(--ts-color-primary); background: var(--ts-color-surface-sunken); } .ts-search__state { padding: var(--ts-space-6) var(--ts-space-4); text-align: center; font-size: var(--ts-text-sm); color: var(--ts-color-muted); } /* --- Дії справа: телефон, обране, кошик --------------------------------- */ .ts-header__actions { flex: none; display: flex; align-items: center; gap: var(--ts-space-1); } .ts-action { display: inline-flex; align-items: center; gap: var(--ts-space-2); padding: var(--ts-space-2) var(--ts-space-3); border-radius: var(--ts-radius-md); color: var(--ts-color-text); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-medium); white-space: nowrap; } .ts-action:hover { background: var(--ts-color-surface-sunken); color: var(--ts-color-primary); text-decoration: none; } .ts-action__icon { position: relative; flex: none; display: inline-flex; } /* Лічильник поверх іконки кошика */ .ts-action__count { position: absolute; top: -6px; right: -8px; } .ts-action__text { display: none; } /* * Підписи біля значків — з 1280px. На 1024–1279 у шапці й так тісно: * «Вітаємо, …», «Обране» і «Кошик» з'їдали ~350px, а туди ще має * влізти перемикач цін з ПДВ. */ @media (min-width: 1280px) { .ts-action__text { display: inline; } } /* Телефон — важливий для каталогу без онлайн-оплати */ .ts-action--phone { font-weight: var(--ts-weight-semibold); } .ts-action--phone .ts-action__text { display: none; } @media (min-width: 1280px) { .ts-action--phone .ts-action__text { display: inline; } } /* Міні-кошик: сума під лічильником на широких екранах */ .ts-minicart__total { display: none; font-size: var(--ts-text-2xs); color: var(--ts-color-muted); font-weight: var(--ts-weight-regular); } @media (min-width: 1280px) { .ts-minicart__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; } .ts-minicart__total { display: block; } } /* --- Нижній ярус: навігація --------------------------------------------- */ /* * Рядок розділів без ліній зверху й знизу: у макеті хедер — суцільна * біла шапка, а не три смуги, розділені рамками. */ .ts-header__nav { border-top: 0; } .ts-nav { display: flex; align-items: center; gap: var(--ts-space-1); overflow-x: auto; scrollbar-width: none; } .ts-nav::-webkit-scrollbar { display: none; } .ts-nav__item { flex: none; } .ts-nav__link { display: inline-flex; align-items: center; /* * Відступи вужчі, ніж у решті хедера: зі значками рядок став на * 111px довшим за контейнер, і останній розділ обрізало краєм. */ gap: 6px; padding: var(--ts-space-3) 10px; font-size: var(--ts-text-sm); /* Жирні назви розділів — як у макеті. */ font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); white-space: nowrap; border-bottom: 2px solid transparent; } /* * Значок темний, а не синій: у макеті колір несе тільки активний * стан, а в спокої рядок читається як суцільний темний текст. */ .ts-nav__link .ts-icon { flex: 0 0 auto; color: var(--ts-color-text-strong); } .ts-nav__link:hover .ts-icon, .ts-nav__link[aria-expanded="true"] .ts-icon { color: inherit; } .ts-nav__link:hover, .ts-nav__link[aria-expanded="true"] { color: var(--ts-color-primary); border-bottom-color: var(--ts-color-primary); text-decoration: none; } /* Кнопка "Каталог" — візуальний якір навігації */ .ts-nav__catalog { display: inline-flex; align-items: center; gap: var(--ts-space-2); padding: var(--ts-space-3) var(--ts-space-4); margin-right: var(--ts-space-2); background: var(--ts-color-primary); color: var(--ts-color-primary-contrast); border-radius: var(--ts-radius-md); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); white-space: nowrap; } /* * Бургер жирніший за решту іконок. Спільні 1.8 поруч із напівжирним * «Каталог» на синьому виглядали тонкою сіткою ліній — на заливці * штрих завжди читається легшим, ніж на білому. */ .ts-nav__catalog .ts-icon--menu { stroke-width: 2.6; } .ts-nav__catalog:hover { background: var(--ts-color-primary-hover); text-decoration: none; } /* --- Бургер (мобільний) -------------------------------------------------- */ .ts-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--ts-radius-md); color: var(--ts-color-text); } .ts-burger:hover { background: var(--ts-color-surface-sunken); } @media (min-width: 1024px) { .ts-burger { display: none; } } /* На мобільному ховаємо нижній ярус — навігація живе в drawer */ @media (max-width: 1023px) { .ts-header__nav { display: none; } } /* * Мобільний хедер за макетом: бургер зліва, логотип по центру, * праворуч лише кошик. Пошук окремим рядком на всю ширину. * * ┌──────────────────────────────┐ * │ ☰ LOGO кошик │ * ├──────────────────────────────┤ * │ [ Пошук товарів… ] │ * └──────────────────────────────┘ * * Обране й профіль прибрані з шапки не тому, що зайві, а тому що * вони тепер у нижній панелі — під великим пальцем, а не під очима. */ @media (max-width: 1023px) { .ts-header__main { display: grid; grid-template-areas: "burger logo actions" "search search search"; /* * Крайні колонки однакові й фіксовані — тільки так логотип * стоїть рівно посередині. Якби вони були auto, центр з'їхав * би вбік ширшого елемента. */ grid-template-columns: 88px minmax(0, 1fr) 88px; gap: var(--ts-space-2) var(--ts-space-2); align-items: center; } .ts-header__main .ts-logo { grid-area: logo; justify-self: center; width: max-content; } .ts-header__main .ts-burger { grid-area: burger; justify-self: start; margin-left: calc(var(--ts-space-2) * -1); } .ts-header__main .ts-search { grid-area: search; max-width: none; width: 100%; } .ts-header__main .ts-header__actions { grid-area: actions; justify-self: end; gap: 0; } /* * У шапці — телефон і кошик. Обране й профіль — у нижній панелі. * Телефон лишаємо: магазин працює через дзвінок менеджера, і * номер мусить бути під рукою, а не лише у футері. */ .ts-header__main .ts-action--wish, .ts-header__main .ts-account { display: none; } /* Підпис під іконкою кошика займає місце, яке потрібне логотипу. */ .ts-header__main .ts-action__text { display: none; } } /* --- Дотик: дії хедера на телефоні -------------------------------------- */ /* * Телефон і кошик у хедері натискають пальцем, а 38px — замала ціль. * Доводимо до 44px, не збільшуючи візуальну вагу іконок. */ @media (max-width: 767px) { .ts-action { min-height: 44px; min-width: 44px; justify-content: center; } } /* --- Логотип-зображення -------------------------------------------------- */ /* * Висота фіксована, ширина рахується з пропорції: логотип має * однаково стояти в рядку хедера незалежно від того, який файл * підставлено (з теми чи з Кастомайзера). */ .ts-logo__img, .ts-logo .custom-logo { display: block; width: auto; height: 40px; max-width: 180px; object-fit: contain; } @media (min-width: 768px) { .ts-logo__img, .ts-logo .custom-logo { height: 44px; max-width: 220px; } } /* Коли логотип — картинка, текстові відступи зайві */ .ts-logo:has(.ts-logo__img), .ts-logo:has(.custom-logo) { gap: 0; } /* --- Прев'ю кошика при наведенні ------------------------------------------- */ .ts-minicart { position: relative; } .ts-minicart__preview { position: absolute; z-index: var(--ts-z-dropdown); top: calc(100% + 4px); right: 0; width: 340px; background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-lg); } .ts-minicart__preview[hidden] { display: none; } /* * Невидимий місток до панелі: між іконкою і панеллю є проміжок, і без * нього курсор «випадає» дорогою вниз. */ .ts-minicart__preview::before { content: ""; position: absolute; top: -6px; right: 0; left: 0; height: 6px; } .ts-minicart__head { padding: var(--ts-space-4); font-size: var(--ts-text-md); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); border-bottom: 1px solid var(--ts-color-border); } .ts-minicart__items { margin: 0; padding: 0 var(--ts-space-4); list-style: none; } .ts-minicart__item { display: flex; align-items: flex-start; gap: var(--ts-space-3); padding: var(--ts-space-3) 0; } .ts-minicart__item + .ts-minicart__item { border-top: 1px solid var(--ts-color-border); } .ts-minicart__thumb { flex: 0 0 auto; width: 48px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--ts-radius-sm); } .ts-minicart__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .ts-minicart__info { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; } .ts-minicart__name { font-size: var(--ts-text-sm); font-weight: var(--ts-weight-regular); line-height: var(--ts-leading-snug); color: var(--ts-color-text-strong); white-space: normal; } .ts-minicart__qty { font-size: var(--ts-text-xs); font-weight: var(--ts-weight-regular); color: var(--ts-color-muted); } .ts-minicart__price { flex: 0 0 auto; font-size: var(--ts-text-sm); font-variant-numeric: tabular-nums; color: var(--ts-color-text-strong); } .ts-minicart__more { margin: 0; padding: 0 var(--ts-space-4) var(--ts-space-3); font-size: var(--ts-text-xs); font-weight: var(--ts-weight-regular); color: var(--ts-color-muted); } .ts-minicart__foot { padding: var(--ts-space-4); border-top: 1px solid var(--ts-color-border); } .ts-minicart__sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ts-space-3); margin-bottom: var(--ts-space-3); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-regular); color: var(--ts-color-muted); } .ts-minicart__sum strong { font-size: var(--ts-text-md); color: var(--ts-color-text-strong); } /* На телефоні прев'ю не показуємо — там працює шухляда. */ @media (max-width: 1023px) { .ts-minicart__preview { display: none; } } /* * Панель, яку покупець відкрив останньою, — поверх решти. * * Усі панелі хедера стоять на одному рівні --ts-z-dropdown, тож при * перекритті вигравала б та, що пізніше в розмітці: ведучи курсор * справа наліво, покупець бачив би нову панель під сусідньою. Клас * ставить JS у момент відкриття (HoverPanel). */ .ts-minicart__preview.ts-panel-raised, .ts-phones__panel.ts-panel-raised, .ts-account__menu.ts-panel-raised { z-index: calc(var(--ts-z-dropdown) + 2); } /* --- Панель телефонів при наведенні ---------------------------------------- */ .ts-phones { position: relative; } .ts-phones__panel { position: absolute; z-index: var(--ts-z-dropdown); top: calc(100% + 4px); right: 0; width: 320px; padding: var(--ts-space-4); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-lg); } .ts-phones__panel[hidden] { display: none; } /* Місток до панелі, щоб курсор не «випадав» у проміжку. */ .ts-phones__panel::before { content: ""; position: absolute; top: -6px; right: 0; left: 0; height: 6px; } .ts-phones__group + .ts-phones__group { margin-top: var(--ts-space-4); padding-top: var(--ts-space-4); border-top: 1px solid var(--ts-color-border); } .ts-phones__title { display: block; margin-bottom: var(--ts-space-2); font-size: var(--ts-text-2xs); font-weight: var(--ts-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ts-color-faint); } /* * Дві колонки лише коли в рядку сам номер. З оператором поруч * («093-170-22-40 lifecell») пара не влазить і напис наїжджає на * сусідній номер, тому такі списки лишаємо в одну колонку. */ /* * Без вертикального проміжку: номери стоять щільним стовпчиком, як і * в месенджерах нижче. Висоту рядка тримає line-height самого номера. */ .ts-phones__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ts-space-3); margin: 0; padding: 0; list-style: none; } .ts-phones__list:has(.ts-phones__note) { grid-template-columns: minmax(0, 1fr); } .ts-phones__item { display: flex; align-items: baseline; gap: var(--ts-space-2); min-width: 0; } /* * Підпис оператора притиснутий до правого краю, а не приклеєний * до номера: рядок займає всю ширину панелі, і підписи шикуються * в один стовпчик замість рваного краю. */ .ts-phones__item .ts-phones__note { margin-left: auto; } .ts-phones__number { font-size: var(--ts-text-base); font-weight: var(--ts-weight-medium); font-variant-numeric: tabular-nums; line-height: 1.45; white-space: nowrap; color: var(--ts-color-text-strong); } .ts-phones__number:hover { color: var(--ts-color-primary); text-decoration: none; } .ts-phones__note { font-size: var(--ts-text-2xs); font-weight: var(--ts-weight-regular); color: var(--ts-color-faint); } .ts-phones__messengers { display: flex; flex-direction: column; gap: var(--ts-space-2); margin: 0; padding: 0; list-style: none; } .ts-phones__messenger-name { display: block; font-size: var(--ts-text-xs); font-weight: var(--ts-weight-medium); color: var(--ts-color-text); } /* * Номери в два стовпчики на всю ширину. Через flex-wrap вони * тулилися ліворуч і ламалися нерівно: у Telegram чотири номери * ставали 3+1. Сітка дає рівні колонки й передбачувані рядки. */ .ts-phones__messenger-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ts-space-3); margin-top: 2px; } /* * Номери в месенджерах — окремими рядками сітки, а не flex-рядком: * решту розміру й ваги задає спільне .ts-phones__number вище. */ .ts-phones__messenger-numbers .ts-phones__number { display: block; } .ts-phones__email { display: block; margin-top: var(--ts-space-4); padding-top: var(--ts-space-4); border-top: 1px solid var(--ts-color-border); font-size: var(--ts-text-sm); color: var(--ts-color-primary); } /* Логотипи операторів і месенджерів. */ .ts-contact-logo { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; border-radius: var(--ts-radius-sm); } .ts-phones__messenger-name { display: flex; align-items: center; gap: var(--ts-space-2); } /* --- Вибір розділу пошуку -------------------------------------------------- */ .ts-search__scope { position: relative; flex: none; display: none; align-items: center; padding-right: var(--ts-space-2); border-left: 1px solid var(--ts-color-border); } /* На телефоні рядок пошуку й так вузький — селектор ховаємо. */ @media (min-width: 768px) { .ts-search__scope { display: flex; } } .ts-search__scope-btn { display: inline-flex; align-items: center; gap: var(--ts-space-1); /* 44px — мінімальна зручна ціль для пальця. */ min-height: 44px; padding: 0 var(--ts-space-2) 0 var(--ts-space-3); font-family: inherit; font-size: var(--ts-text-sm); color: var(--ts-color-muted); background: none; border: 0; white-space: nowrap; cursor: pointer; } .ts-search__scope-btn:hover { color: var(--ts-color-primary); } .ts-search__scope-list { position: absolute; /* * Вище за підказки пошуку: обидва відкриваються під тим самим рядком * і перетинаються, а за однакового z-index вигравали б підказки — * вони йдуть пізніше в розмітці. Розділ щойно відкрив сам покупець, * тож він і має бути зверху. */ z-index: calc(var(--ts-z-dropdown) + 1); top: calc(100% + 4px); right: 0; min-width: 220px; max-height: 320px; overflow-y: auto; margin: 0; padding: var(--ts-space-1); list-style: none; background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md); box-shadow: var(--ts-shadow-lg); } .ts-search__scope-list[hidden] { display: none; } .ts-search__scope-option { display: block; width: 100%; padding: var(--ts-space-2) var(--ts-space-3); font-family: inherit; font-size: var(--ts-text-sm); text-align: left; color: var(--ts-color-text); background: none; border: 0; border-radius: var(--ts-radius-sm); cursor: pointer; } .ts-search__scope-option:hover { background: var(--ts-color-surface-sunken); } .ts-search__scope-option.is-active { color: var(--ts-color-primary); background: var(--ts-color-primary-soft); } /* --- Підказки-запити ------------------------------------------------------- */ /* * Рядок-підказка: іконка й текст. Той самий вигляд для запиту й для * категорії — відрізняються лише іконкою, бо поводяться однаково * (клік уточнює пошук, а не відкриває товар). */ .ts-search__term { display: flex; align-items: center; gap: var(--ts-space-3); width: 100%; min-height: 40px; padding: var(--ts-space-2) var(--ts-space-4); font-family: inherit; font-size: var(--ts-text-sm); text-align: left; color: var(--ts-color-text); background: none; border: 0; cursor: pointer; } .ts-search__term .ts-icon { flex: none; color: var(--ts-color-faint); } .ts-search__term:hover, .ts-search__term[aria-selected="true"] { background: var(--ts-color-surface-sunken); text-decoration: none; } /* Дописана частина — жирним: видно, що саме додасться до набраного. */ .ts-search__term-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-search__term-text strong { font-weight: var(--ts-weight-semibold); } .ts-search__term-in { color: var(--ts-color-faint); } /* --- Історія пошуку -------------------------------------------------------- */ /* * Дві колонки, як у x-kom: ліворуч те, що людина шукала, праворуч — * що відкривала. Права колонка на світлішому тлі й з межею: це окремий * блок, а не продовження списку запитів. */ .ts-search__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } .ts-search__col--viewed { border-left: 1px solid var(--ts-color-border); background: var(--ts-color-surface-sunken); } /* * У правій колонці картка вужча, ніж у результатах, тому ціна їде під * назву, а назва отримує два рядки. Інакше «Dell PowerEdge R660» * обривається на половині слова. */ .ts-search__col--viewed .ts-suggest { align-items: flex-start; } .ts-search__col--viewed .ts-suggest__title { --ts-clamp-lines: 2; white-space: normal; } /* * Ціна — під назвою, а не окремою колонкою праворуч: у вузькій панелі * вона з'їдала половину ширини й назва обривалася на другому слові. * Сітка, а не wrap: при wrap назва зістрибувала під картинку. */ .ts-search__col--viewed .ts-suggest { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: var(--ts-space-3); row-gap: 2px; } .ts-search__col--viewed .ts-suggest__body { grid-column: 2; } .ts-search__col--viewed .ts-suggest__media { grid-row: 1 / span 2; } .ts-search__col--viewed .ts-suggest__price { grid-column: 2; font-size: var(--ts-text-xs); text-align: left; } /* Порожня колонка не повинна забирати місце. */ .ts-search__col:empty { display: none; } .ts-search__col:only-child { grid-column: 1 / -1; } /* Усередині колонок секція вже сама по собі — рамка згори зайва. */ .ts-search__col .ts-search__section + .ts-search__section { border-top: 0; } @media (max-width: 767px) { /* * На телефоні колонки лягають одна під одну: 300px праворуч там * просто немає, а назви товарів рвалися б на три рядки. */ .ts-search__cols { grid-template-columns: minmax(0, 1fr); } .ts-search__col--viewed { border-left: 0; border-top: 1px solid var(--ts-color-border); } } .ts-search__section + .ts-search__section { border-top: 1px solid var(--ts-color-border); } /* * Заголовок секції — липкий: у довгому списку видно, на що саме * дивишся, результати це чи вже переглянуте. */ .ts-search__section-head { position: sticky; top: 0; z-index: 1; background: var(--ts-color-surface); } .ts-search__section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-3); padding: var(--ts-space-3) var(--ts-space-4) var(--ts-space-2); font-size: var(--ts-text-2xs); font-weight: var(--ts-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ts-color-faint); } .ts-search__clear { font-family: inherit; font-size: var(--ts-text-2xs); text-transform: none; letter-spacing: normal; color: var(--ts-color-primary); background: none; border: 0; cursor: pointer; } .ts-search__recent { display: flex; align-items: center; gap: var(--ts-space-2); padding: 0 var(--ts-space-2) 0 var(--ts-space-4); } .ts-search__recent-term { flex: 1 1 auto; display: flex; align-items: center; gap: var(--ts-space-2); min-height: 40px; padding: 0; font-family: inherit; font-size: var(--ts-text-sm); text-align: left; color: var(--ts-color-text); background: none; border: 0; cursor: pointer; } /* Іконка годинника — приглушена: підказка, а не акцент. */ .ts-search__recent-term .ts-icon { flex: none; color: var(--ts-color-faint); } /* * Клавіатурний фокус по списку підсвічує рядок так само, як наведення * миші: у списку один активний елемент, незалежно від способу вибору. */ .ts-search__recent:has([aria-selected="true"]), .ts-search__recent:hover { background: var(--ts-color-surface-sunken); } .ts-search__recent-drop { flex: 0 0 auto; width: 28px; height: 28px; font-size: var(--ts-text-md); line-height: 1; color: var(--ts-color-faint); background: none; border: 0; border-radius: var(--ts-radius-sm); cursor: pointer; } .ts-search__recent-drop:hover { background: var(--ts-color-danger-soft); color: var(--ts-color-danger); } /* --- Коди в підказках пошуку ----------------------------------------------- */ .ts-suggest__code { font-variant-numeric: tabular-nums; white-space: nowrap; } .ts-suggest__code-label { color: var(--ts-color-faint); } /* Підсвітка знайденого фрагмента коду. */ .ts-suggest__hit { padding: 0 1px; color: var(--ts-color-text-strong); font-weight: var(--ts-weight-semibold); background: var(--ts-color-warning-soft); border-radius: 2px; } @media (max-width: 767px) { .ts-search__input::placeholder { font-size: var(--ts-text-sm); } /* * Поле нижче й компактніше. Шрифт лишається 16px — менший * змушує iOS зумити сторінку при фокусі, — але падінг 12/16 * розганяв поле до 48px і з'їдав перший екран. * * 40px усе ще зручна ціль: сама форма з рамкою дає 42px, а * кнопка пошуку поруч лишається повноцінними 44px. */ .ts-search__input { min-height: 40px; padding: var(--ts-space-2) var(--ts-space-3); } /* Кнопка звужується, щоб не забирати місце в самого поля. */ .ts-search__submit { width: 40px; height: 40px; } .ts-search__reset { width: 32px; height: 32px; } } /* --- Перемикач «Ціни: без ПДВ | з ПДВ» ------------------------------ */ .ts-price-mode { display: inline-flex; align-items: center; gap: var(--ts-space-2); font-size: var(--ts-text-sm); white-space: nowrap; } .ts-price-mode__label { color: var(--ts-color-muted); } .ts-price-mode__options { display: inline-flex; padding: 2px; background: var(--ts-color-surface-sunken); border-radius: var(--ts-radius-full); } .ts-price-mode__option { min-height: 32px; padding: 0 var(--ts-space-3); font: inherit; font-weight: var(--ts-weight-medium); color: var(--ts-color-muted); background: none; border: 0; border-radius: var(--ts-radius-full); cursor: pointer; } .ts-price-mode__option:hover { color: var(--ts-color-text); } .ts-price-mode__option.is-active { color: var(--ts-color-primary-contrast); background: var(--ts-color-primary); cursor: default; } .ts-price-mode__option:focus-visible { outline: 2px solid var(--ts-color-border-focus); outline-offset: 1px; } /* * До 1024px шапка мобільна — перемикач живе в меню під бургером. * На 1024–1279 — компактний, без слова «Ціни». */ @media (max-width: 1023px) { .ts-header__actions .ts-price-mode { display: none; } } @media (max-width: 1279px) { .ts-header__actions .ts-price-mode__label { display: none; } .ts-header__actions .ts-price-mode__option { padding: 0 var(--ts-space-2); } } /* Мобільне меню: окремий рядок над каталогом, кнопки по 44px (правила мобільної верстки). */ .ts-price-mode--drawer { display: flex; justify-content: space-between; padding: var(--ts-space-3) var(--ts-space-4); border-bottom: 1px solid var(--ts-color-border); } .ts-price-mode--drawer .ts-price-mode__option { min-height: 44px; padding: 0 var(--ts-space-4); } /* --- «Ще» в рядку розділів (NavFit у main.js) ----------------------- */ /* * Коли NavFit розклав розділи, рядок більше не гортається: те, що не * влізло, — у «Ще». overflow visible потрібен, щоб панель «Ще» не * обрізало краєм рядка. */ .ts-nav.is-fitted { overflow: visible; } .ts-nav__item[hidden] { display: none; } .ts-nav__more { position: relative; margin-left: auto; } .ts-nav__more-toggle { font: inherit; font-weight: var(--ts-weight-semibold); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; } .ts-nav__more-toggle .ts-icon { transition: transform 0.15s ease; } .ts-nav__more-toggle[aria-expanded="true"] .ts-icon { transform: rotate(180deg); } .ts-nav__more-panel { position: absolute; z-index: var(--ts-z-dropdown); top: calc(100% + 4px); right: 0; display: flex; flex-direction: column; min-width: 240px; padding: var(--ts-space-2); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md); box-shadow: var(--ts-shadow-lg); } .ts-nav__more-panel[hidden] { display: none; } .ts-nav__more-panel .ts-nav__link { border-bottom: 0; border-radius: var(--ts-radius-sm); } .ts-nav__more-panel .ts-nav__link:hover { background: var(--ts-color-surface-sunken); } /* --- Телефони на мобільному: лист знизу ----------------------------- */ .ts-phones__sheet-head { display: none; } @media (max-width: 1023px) { /* Логотип ділить рядок із двома значками праворуч — не ширше колонки. */ .ts-header__main .ts-logo__img, .ts-header__main .ts-logo .custom-logo { max-width: 100%; } .ts-phones__panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 2; width: auto; max-height: 80vh; overflow-y: auto; padding: var(--ts-space-4) var(--ts-space-4) calc(var(--ts-space-5) + env(safe-area-inset-bottom)); border: 0; border-radius: var(--ts-radius-lg) var(--ts-radius-lg) 0 0; box-shadow: 0 -8px 32px rgba(17, 24, 39, 0.18); } .ts-phones__panel::before { display: none; } /* Тло під листом: тап по ньому закриває (PhonesSheet у main.js). */ .ts-phones:has(.ts-phones__panel:not([hidden]))::after { content: ""; position: fixed; inset: 0; z-index: 1; background: rgba(17, 24, 39, 0.45); } /* * Шапка — окремий шар (sticky + z-index), і нижня панель на тому ж * рівні перекривала б низ листа. Поки лист відкритий, ховаємо її. */ .ts-phones-open .ts-bottomnav { visibility: hidden; } .ts-phones__sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ts-space-3); } .ts-phones__sheet-title { font-size: var(--ts-text-lg); font-weight: var(--ts-weight-bold); color: var(--ts-color-text-strong); } .ts-phones__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: calc(var(--ts-space-2) * -1); color: var(--ts-color-muted); background: none; border: 0; border-radius: var(--ts-radius-full); cursor: pointer; } /* Номери — під палець: 44px і крупніше. */ .ts-phones__number { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--ts-text-lg); } } /* --- QA шапки (2026-10-21) ------------------------------------------- */ /* * Ім'я в шапці: довге («Костянтинопольський») обрізаємо трьома * крапками, повне — у підказці (title). Раніше ім'я або шматок email * розтягували блок акаунта до 280px і виштовхували кошик за край екрана. */ .ts-account__name { display: inline-block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* * Кнопка «Каталог» не стискається: на 1366 рядок розділів підтискав * її, і бургер-іконка сплющувалась у крапку. */ .ts-nav__catalog, .ts-nav__catalog .ts-icon { flex: none; } /* * 1280–1439: усе з підписами не влазило — кошик виїжджав за край, а * пошук стискався до 345px. Лишаємо підписи там, де без них не * зрозуміло, що це: ім'я / «Увійти» й кошик із сумою. Телефон (номери * — у випадному списку), серце обраного й перемикач цін зрозумілі й * без слів. */ @media (min-width: 1280px) and (max-width: 1439px) { .ts-action--phone .ts-action__text, .ts-action--wish .ts-action__text { display: none; } .ts-header__actions .ts-price-mode__label { display: none; } } /* 1440–1599: номер телефону вже вміщається, «Обране» — ще ні. */ @media (min-width: 1440px) and (max-width: 1599px) { .ts-action--wish .ts-action__text { display: none; } } /* * 320–359: логотип налазив на значок телефону. Бічні колонки — ті самі * 88px (два значки по 44), тож місце беремо з проміжків і висоти лого. */ @media (max-width: 359px) { .ts-header__main { column-gap: var(--ts-space-1); } .ts-header__main .ts-logo__img, .ts-header__main .ts-logo .custom-logo { height: 28px; } } /* ========================================================================== TopShop — Layout parts Mega menu, mobile drawer, footer, breadcrumbs, pagination. ========================================================================== */ /* --- Mega menu (ТЗ §25) ------------------------------------------------- */ .ts-megamenu { position: absolute; left: 0; right: 0; z-index: var(--ts-z-megamenu); /* * Картка, що ніби лежить поверх сторінки, а не суцільна смуга: * так у макеті. Фон і тінь — на внутрішньому шарі, щоб * заокруглення не обрізало саме меню. */ padding-top: var(--ts-space-2); padding-bottom: var(--ts-space-6); pointer-events: none; } .ts-megamenu > .ts-container { pointer-events: auto; } .ts-megamenu__layout { background: var(--ts-color-surface); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-lg); overflow: hidden; } .ts-megamenu[hidden] { display: none; } /* * Ліворуч колонка розділів, праворуч панель активного. * Ширина колонки фіксована: якщо дати їй тягнутися за назвами, * панель праворуч смикається при кожному перемиканні розділу. */ .ts-megamenu__layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); /* * Не фіксуємо висоту: у розділів різна кількість підкатегорій, і * жорсткі 420px лишали б порожнє полотно під короткою панеллю. * Мінімум — щоб колонка розділів не обрізалась на пів-рядка. */ min-height: 320px; } /* --- Колонка розділів --------------------------------------------------- */ .ts-megamenu__roots { margin: 0; padding: var(--ts-space-3); list-style: none; border-right: 1px solid var(--ts-color-border); background: var(--ts-color-surface); /* * Розділів під сорок — у висоту екрана вони не вміщаються. * Скролимо саму колонку, а не сторінку: інакше меню тягнеться * нижче вікна і його край не дістати. */ max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; } /* * Рядок «Усі категорії» — окремо від розділів, як у макеті. * * Лінію малює сам
  • , а не посилання: коли рамка висіла на * посиланні, синя плашка при наведенні впиралася в неї і втрачала * заокруглення згори — кут виглядав обрубаним. */ /* * «Усі категорії» — прилипає до низу колонки: розділів під сорок, і * без цього шлях до повного дерева ховався за прокруткою навіть на * 1920×1080. */ .ts-megamenu__root--all { position: sticky; bottom: 0; margin-top: var(--ts-space-2); padding-block: var(--ts-space-2) var(--ts-space-3); border-top: 1px solid var(--ts-color-border); background: var(--ts-color-surface); } /* * Нижній відступ колонки дає сам «Усі категорії» (його padding): * з відступом і в списку, і в пункті в кінці прокрутки під ним * з'являлась зайва смуга, а сам рядок «підстрибував» угору. */ .ts-megamenu__roots { padding-bottom: 0; } .ts-megamenu__root-link--all { font-weight: var(--ts-weight-medium); color: var(--ts-color-primary); } .ts-megamenu__root-link { display: flex; align-items: center; gap: var(--ts-space-3); padding: var(--ts-space-2) var(--ts-space-4); font-size: var(--ts-text-sm); color: var(--ts-color-text-strong); line-height: 1.3; } .ts-megamenu__root-link { border-radius: var(--ts-radius-md); transition: background-color 0.12s ease, color 0.12s ease; } /* * Наведення й активний стан пофарбовані однаково — залитою синьою * плашкою, як у макеті. * * Однаково саме тому, що панель перемикається не миттєво: JS чекає * 90 мс, щоб панель не блимала, поки курсор іде навскіс через сусідні * пункти. Коли hover давав блідо-блакитний, а .is-active за мить — * насичений синій, це читалося як миготіння в два кольори. Один колір * прибирає проміжний стан: рядок фарбується одразу й уже не змінюється. */ .ts-megamenu__root-link:hover, .ts-megamenu__root-link.is-active { background: var(--ts-color-primary); color: var(--ts-color-primary-contrast); text-decoration: none; } .ts-megamenu__root-link:hover .ts-cat-thumb, .ts-megamenu__root-link.is-active .ts-cat-thumb { color: var(--ts-color-primary-contrast); } /* * Курсор на іншому пункті (зокрема на «Усі категорії», у якого панелі * немає) — розділ, чия панель ще відкрита, блідне. Інакше синіх плашок * дві, і незрозуміло, на чому ти зараз. */ .ts-megamenu__roots:has(.ts-megamenu__root-link:hover) .ts-megamenu__root-link.is-active:not(:hover) { background: var(--ts-color-primary-soft); color: var(--ts-color-primary); } .ts-megamenu__roots:has(.ts-megamenu__root-link:hover) .ts-megamenu__root-link.is-active:not(:hover) .ts-cat-thumb { color: var(--ts-color-primary); } .ts-megamenu__roots:has(.ts-megamenu__root-link:hover) .ts-megamenu__root-link.is-active:not(:hover) .ts-icon--chevron { opacity: 0; } .ts-megamenu__root-name { flex: 1 1 auto; } /* Стрілка веде погляд до панелі — підсвічуємо лише в активного. */ .ts-megamenu__root-link .ts-icon--chevron { flex: 0 0 auto; opacity: 0; transition: opacity 0.12s ease; } .ts-megamenu__root-link:hover .ts-icon--chevron, .ts-megamenu__root-link.is-active .ts-icon--chevron { opacity: 1; } /* Рядок «Акції» — червоний, як у макеті: це не розділ каталогу. */ .ts-megamenu__root-link--sale { color: var(--ts-color-danger); font-weight: var(--ts-weight-medium); } .ts-megamenu__root-link--sale:hover:not(.is-active) { background: var(--ts-color-danger-soft); color: var(--ts-color-danger); } .ts-megamenu__root-count { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: var(--ts-color-danger-soft); color: var(--ts-color-danger); font-size: var(--ts-text-xs); font-weight: var(--ts-weight-semibold); line-height: 1.6; } /* * Фонова марка в куті панелі. У макеті це не картка й не рівний * прямокутник, а м'яка хвиля, що затікає в правий нижній кут, з * ілюстрацією розділу поверх неї. * * Хвилю малюємо самим елементом: заокруглення по діагоналі * (великий радіус лише у верхньому лівому куті) дає ту саму плавну * дугу, що на макеті, і не потребує ні картинки, ні зайвого вузла. */ .ts-megamenu__promo { /* * Хвиля в куті панелі, як у макеті: широка пласка дуга, що йде * від лівого краю вгору й затікає під правий. Один великий * еліптичний радіус ліворуч дає саме таку лінію — це не пігулка * й не картка, тому інших кутів у фігури немає. */ position: absolute; right: 0; /* * Притиснута до самого низу панелі. Піднімати її над рядком * «Усі товари» не можна: у довгих розділах вона тоді лягала * просто на назви брендів у колонках. */ bottom: 0; display: none; align-items: center; justify-content: flex-end; gap: var(--ts-space-4); width: 360px; min-height: 104px; padding: var(--ts-space-4) var(--ts-space-6) var(--ts-space-5) var(--ts-space-8); border-top-left-radius: 100% 86%; /* * Заливка напівпрозора. Панель прокручується просто над маркою, * і суцільний колір обрізав би назви брендів на півслові — * крізь бліде тло рядок лишається читабельним, доки проходить. */ background: linear-gradient(115deg, rgba(232, 240, 254, 0) 8%, rgba(238, 244, 255, 0.82) 42%, rgba(227, 237, 253, 0.88) 100%); color: var(--ts-color-primary); /* Тло не має перехоплювати курсор із посилань. */ pointer-events: none; user-select: none; z-index: 0; } .ts-megamenu__promo[hidden] { display: none; } /* * Ховаємо там, де панель і так щільна: на вузькому екрані колонки * доходять до кута, і марка лягла б просто поверх назв. */ @media (min-width: 1280px) { .ts-megamenu__promo:not([hidden]) { display: flex; } } /* * Іконка велика й напівпрозора — це ілюстрація розділу, а не значок. */ .ts-megamenu__promo-icon { flex: 0 0 auto; display: inline-flex; order: 2; /* Малюнок кольоровий, а не бліда пляма: у макеті він читається. */ opacity: 0.9; } .ts-megamenu__promo-icon .ts-icon { width: 88px; height: 88px; /* * Товстіший штрих і насичений блакитний — у макеті це кольорова * ілюстрація, а не сірий контур. Тонка лінія на такому розмірі * виглядала вицвілою. */ stroke-width: 1.5; color: #4da3f5; } /* Плитка навколо значка тут зайва — ілюстрація лежить просто на хвилі. */ .ts-megamenu__promo .ts-cat-thumb--icon { width: auto; height: auto; padding: 0; background: none; } .ts-megamenu__promo-text { order: 1; text-align: right; font-size: var(--ts-text-md); font-weight: var(--ts-weight-semibold); line-height: 1.3; color: var(--ts-color-primary); } .ts-megamenu__promo-text em { display: block; font-style: normal; font-weight: var(--ts-weight-regular); opacity: 0.8; } /* --- Нижня панель на телефоні -------------------------------------------- */ /* * П'ять головних дій під великим пальцем. На широкому екрані панелі * немає: там усе доступне в шапці, а смуга внизу лише з'їдала б екран. */ .ts-bottomnav { display: none; } /* Під час введення панелі внизу не потрібні: клавіатура тягне їх на форму. */ @media (pointer: coarse) { .ts-keyboard-open .ts-bottomnav, .ts-keyboard-open .ts-sticky-buy, .ts-keyboard-open .ts-fab { display: none; } } @media (max-width: 1023px) { .ts-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ts-z-header); display: grid; grid-template-columns: repeat(5, 1fr); /* * Рівно 60px, як і відступ body та липкої панелі купівлі над * нею. Раніше висоту задавали пункти (56 + рамка = 57), і між * панелями лишалась щілина в 3px, крізь яку видно сторінку. */ box-sizing: border-box; height: calc(60px + env(safe-area-inset-bottom, 0px)); background: var(--ts-color-surface); border-top: 1px solid var(--ts-color-border); /* * Домальовуємо висоту під системну смугу жестів на iPhone: * інакше нижній ряд підписів опиняється під нею. */ padding-bottom: env(safe-area-inset-bottom, 0px); } /* * Звільняємо місце під панеллю, щоб вона не перекривала кінець * сторінки — насамперед кнопку «Додати в кошик» у картці товару. */ body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } /* Плаваючі кнопки не мають лежати на останніх рядках підвалу. */ body .ts-footer { padding-bottom: 76px; } } .ts-bottomnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; /* 56px — мінімальна зручна ціль для пальця. */ min-height: 56px; padding: var(--ts-space-2) 2px; color: var(--ts-color-muted); font-size: var(--ts-text-2xs); line-height: 1.2; text-align: center; } .ts-bottomnav__item:hover, .ts-bottomnav__item:focus-visible { color: var(--ts-color-primary); text-decoration: none; } /* Поточний розділ — синій, щоб було видно, де людина стоїть. */ .ts-bottomnav__item.is-active { color: var(--ts-color-primary); } .ts-bottomnav__icon { position: relative; display: inline-flex; } .ts-bottomnav__count { position: absolute; top: -6px; right: -8px; } .ts-bottomnav__count[hidden] { display: none; } .ts-bottomnav__label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Смужка з акцією ---------------------------------------------------- */ .ts-topbar { background: var(--ts-color-surface-muted, #f5f7fa); border-bottom: 1px solid var(--ts-color-border); font-size: var(--ts-text-xs); } .ts-topbar[hidden] { display: none; } .ts-topbar__inner { display: flex; align-items: center; gap: var(--ts-space-3); min-height: 38px; padding-top: 6px; padding-bottom: 6px; } .ts-topbar__icon { flex: 0 0 auto; display: inline-flex; color: var(--ts-color-danger); } .ts-topbar__text { font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-topbar__sep { color: var(--ts-color-border); } .ts-topbar__note, .ts-topbar__ship { color: var(--ts-color-text); } .ts-topbar__link { display: inline-flex; align-items: center; gap: 4px; color: var(--ts-color-primary); white-space: nowrap; } /* Хрестик притиснутий до правого краю, решта — зліва. */ .ts-topbar__close { margin-left: auto; flex: 0 0 auto; display: inline-flex; padding: 4px; border-radius: var(--ts-radius-sm); color: var(--ts-color-text-muted); } .ts-topbar__close:hover { background: var(--ts-color-border); color: var(--ts-color-text-strong); } /* * На вузьких екранах лишаємо головне: сама акція і хрестик. Умову * доставки й «Детальніше» ховаємо — у 360px вони переносяться в три * рядки й з'їдають перший екран. */ @media (max-width: 767px) { .ts-topbar__sep, .ts-topbar__ship, .ts-topbar__link { display: none; } /* * «До -20%» теж ховаємо на вузькому екрані: разом із назвою * акції рядок не вміщався і переносився у два, через що смужка * ставала вдвічі вищою і з'їдала перший екран. */ .ts-topbar__note { display: none; } /* Текст в один рядок: довгу акцію обрізаємо трьома крапками. */ .ts-topbar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* --- Мініатюра категорії ------------------------------------------------ */ .ts-cat-thumb { flex: 0 0 auto; border-radius: var(--ts-radius-sm); object-fit: contain; } /* * Плашка з літерою — коли картинки в категорії немає. Колір беремо * з --ts-cat-hue, який ставить PHP: сталий для категорії. */ .ts-cat-thumb--letter { display: inline-flex; align-items: center; justify-content: center; background: hsl(var(--ts-cat-hue, 210) 70% 94%); color: hsl(var(--ts-cat-hue, 210) 45% 38%); font-size: 12px; font-weight: var(--ts-weight-semibold); line-height: 1; } /* * Намальований значок розділу. На відміну від літери, кольору не * вигадуємо: іконка успадковує колір рядка, тому на активній синій * плашці стає білою сама. */ .ts-cat-thumb--icon { display: inline-flex; align-items: center; justify-content: center; color: inherit; } .ts-cat-thumb--icon .ts-icon { display: block; } /* --- Панель розділу ----------------------------------------------------- */ /* * Скрол перенесено всередину панелі, а сам контейнер лишається * нерухомим: фонова марка позиціюється від нього, і якби прокручувався * він, вона їхала б разом із вмістом і зникала з очей у довгих * розділах. */ .ts-megamenu__panels { position: relative; max-height: min(72vh, 620px); /* Марка зрізається краєм панелі, а не вилазить за картку меню. */ overflow: hidden; } /* * Скрол живе в панелі, а не в контейнері: фонова марка позиціюється * від .ts-megamenu__panels, і якби прокручувався він, вона їхала б * разом зі вмістом. * * Колонка на всю висоту: посилання «Усі товари розділу» має стояти * біля нижнього краю панелі завжди, а не там, де скінчилися колонки. * У розділах на три групи воно висіло посеред порожнечі. */ .ts-megamenu__panel { position: relative; display: flex; flex-direction: column; min-height: 100%; max-height: min(72vh, 620px); padding: var(--ts-space-5) var(--ts-space-6); overflow-y: auto; overscroll-behavior: contain; /* Вміст поверх фонової марки. */ z-index: 1; } /* Колонки забирають вільне місце, посилання лишається під ними. */ .ts-megamenu__panel .ts-megamenu__columns { flex: 1 1 auto; } .ts-megamenu__panel[hidden] { display: none; } /* * Колонки самі розкладаються за шириною: на широкому екрані чотири, * на вужчому менше. Так панель не ламається на ноутбуці 1366px. */ /* * Кладка, а не сітка. У grid усі комірки рядка починаються з однієї * висоти, тож одна довга колонка («Контроль доступу» на дев'ять * пунктів) лишала під сусідами діру на пів-панелі. CSS-колонки * укладають групи одна під одною й переносять, коли колонка * заповнилась, — порожнеча зникає сама. * * column-width, а не фіксоване число: на широкому екрані колонок * більше, на ноутбуці менше, і панель не ламається. */ .ts-megamenu__columns { column-width: 200px; column-gap: var(--ts-space-5); } /* * Кут під хвилею лишаємо вільним. Без цього в довгих розділах * («Ручний інструмент») останні бренди — Milwaukee, DeWALT — * опинялися просто під малюнком і ставали нечитабельними. * * float у кінці потоку колонок відсуває текст, але сам місця в * розкладці не займає, тож короткі розділи від цього не змінюються. */ @media (min-width: 1280px) { .ts-megamenu__columns::after { content: ''; display: block; float: right; width: 340px; height: 104px; } } /* * Група не повинна розриватися між колонками: заголовок в одній, а * його підкатегорії в наступній — гірше за будь-яку діру. */ .ts-megamenu__column { display: inline-block; width: 100%; margin-bottom: var(--ts-space-6); break-inside: avoid; page-break-inside: avoid; } /* * Заголовок групи: значок і назва в один рядок. Значок вирівнюємо * по першому рядку, а не по центру, — назви бувають у два рядки, * і центрований значок тоді з'їжджає вниз. */ .ts-megamenu__group { display: flex; align-items: flex-start; gap: var(--ts-space-2); margin-bottom: var(--ts-space-2); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); /* Заголовки груп у макеті сині — вони і є посилання на розділ. */ color: var(--ts-color-primary); line-height: 1.3; } .ts-megamenu__group-name { flex: 1 1 auto; } /* * Значок заголовка — на блакитній плитці, як у макеті: голий штрих * губився поруч із жирним синім текстом і колонки виглядали як * суцільний список посилань. */ .ts-megamenu__group .ts-cat-thumb { margin-top: -1px; width: 28px; height: 28px; padding: 4px; border-radius: var(--ts-radius-md); background: var(--ts-color-primary-soft); color: var(--ts-color-primary); } /* Фото категорії заповнює плитку цілком, без поля навколо. */ .ts-megamenu__group img.ts-cat-thumb { padding: 0; object-fit: cover; } .ts-megamenu__group:hover { color: var(--ts-color-primary-hover); text-decoration: none; } .ts-megamenu__leaves { margin: 0; padding: 0; list-style: none; } .ts-megamenu__leaf, .ts-megamenu__more { display: block; padding: 3px 0; font-size: var(--ts-text-sm); color: var(--ts-color-muted); line-height: 1.4; } .ts-megamenu__leaf:hover, .ts-megamenu__more:hover { color: var(--ts-color-primary); text-decoration: none; } .ts-megamenu__more { color: var(--ts-color-primary); } .ts-megamenu__all { /* * margin-top: auto притискає посилання до низу панелі — воно * стоїть на однаковій висоті в кожному розділі, незалежно від * того, скільки в ньому груп. */ margin-top: auto; display: inline-flex; align-items: center; gap: var(--ts-space-1); padding-top: var(--ts-space-4); border-top: 1px solid var(--ts-color-border); width: 100%; font-size: var(--ts-text-sm); font-weight: var(--ts-weight-medium); color: var(--ts-color-primary); /* Марка лежить нижче — посилання має лишатися клікабельним. */ position: relative; z-index: 1; } .ts-megamenu__all:hover { text-decoration: none; } .ts-megamenu__empty { margin: 0; font-size: var(--ts-text-sm); } /* * На вузьких екранах меню-каталог замінює мобільна навігація * (template-parts/header/mobile-nav.php), тому тут просто ховаємо: * дві колонки на 400px нечитабельні. */ @media (max-width: 899px) { .ts-megamenu { display: none; } } /* --- Overlay ------------------------------------------------------------ */ .ts-overlay { position: fixed; inset: 0; z-index: var(--ts-z-overlay); background: rgba(4, 22, 42, 0.5); opacity: 0; visibility: hidden; transition: opacity var(--ts-duration-base) var(--ts-ease), visibility var(--ts-duration-base) var(--ts-ease); } .ts-overlay.is-open { opacity: 1; visibility: visible; } /* --- Drawer: мобільне меню і фільтри (ТЗ §10, §25) ---------------------- */ .ts-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--ts-z-drawer); display: flex; flex-direction: column; width: min(88vw, 380px); background: var(--ts-color-surface); transform: translateX(-100%); transition: transform var(--ts-duration-slow) var(--ts-ease); } .ts-drawer--right { left: auto; right: 0; transform: translateX(100%); } .ts-drawer.is-open { transform: translateX(0); } .ts-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-3); padding: var(--ts-space-4); border-bottom: 1px solid var(--ts-color-border); flex: none; } .ts-drawer__title { font-size: var(--ts-text-md); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .ts-drawer__foot { flex: none; display: flex; gap: var(--ts-space-3); padding: var(--ts-space-4); border-top: 1px solid var(--ts-color-border); background: var(--ts-color-surface); } .ts-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--ts-radius-md); color: var(--ts-color-muted); } .ts-drawer__close:hover { background: var(--ts-color-surface-sunken); color: var(--ts-color-text); } /* Блокування скролу body під час відкритого drawer/modal */ body.ts-no-scroll { overflow: hidden; } /* --- Breadcrumbs (ТЗ §26, §34) ------------------------------------------ */ .ts-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-space-2); padding-block: var(--ts-space-4); font-size: var(--ts-text-xs); color: var(--ts-color-muted); } .ts-breadcrumbs a { color: var(--ts-color-muted); } .ts-breadcrumbs a:hover { color: var(--ts-color-primary); } .ts-breadcrumbs__sep { color: var(--ts-color-faint); } .ts-breadcrumbs__current { color: var(--ts-color-text); } /* --- Pagination --------------------------------------------------------- */ .ts-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ts-space-2); margin-block: var(--ts-space-8); } /* Стилізуємо і власний клас, і page-numbers від paginate_links() */ .ts-pagination__item, .ts-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding-inline: var(--ts-space-2); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-medium); color: var(--ts-color-text); } .ts-pagination__item:hover, .ts-pagination a.page-numbers:hover { border-color: var(--ts-color-primary); color: var(--ts-color-primary); text-decoration: none; } .ts-pagination__item[aria-current="page"], .ts-pagination .page-numbers.current { background: var(--ts-color-primary); border-color: var(--ts-color-primary); color: #fff; } /* Три крапки — не клікабельні, тому без рамки */ .ts-pagination .page-numbers.dots { border-color: transparent; color: var(--ts-color-faint); } /* --- Footer ------------------------------------------------------------- */ /* * Підвал — світла картка на тлі сторінки, а не суцільна сіра смуга: * так він читається як окремий блок і не змагається з контентом. */ .ts-footer { margin-top: var(--ts-space-16); padding-bottom: var(--ts-space-6); background: var(--ts-color-bg); } /* * Картка ледь відтінена, майже біла (#f7fafc за макетом): сірий * --surface-sunken робив підвал важким і відсував його на задній план. */ .ts-footer__card { padding: var(--ts-space-8) var(--ts-space-8) var(--ts-space-5); background: var(--ts-color-surface-tint); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-xl); } /* * П'ять колонок: бренд ширший за решту, бо там опис магазину. * auto-fit тут не годиться — колонки мають різну вагу, і при * рівних частках опис ламався б на вузькі рядки. */ .ts-footer__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-8); padding-bottom: var(--ts-space-6); } @media (min-width: 620px) { .ts-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* * Планшет: три колонки. Бренд і контакти ширші за списки посилань, * тому кожен займає свою колонку, а «Каталог», «Покупцям» і * «Оплата» лягають у другий ряд. На двох колонках остання секція * лишалась сама посеред порожнього ряду. */ @media (min-width: 900px) { .ts-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .ts-footer__top { grid-template-columns: 1.35fr 1.25fr 1fr 1fr 1.3fr; gap: var(--ts-space-6); } } /* Розділювач між брендом і рештою — лише там, де колонки в ряд. */ @media (min-width: 1100px) { .ts-footer__brand { padding-right: var(--ts-space-6); border-right: 1px solid var(--ts-color-border); } } .ts-footer__logo { display: inline-block; } .ts-footer__logo img { display: block; width: auto; height: 40px; } .ts-footer__tagline { margin: var(--ts-space-2) 0 0; font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-footer__about { margin: var(--ts-space-4) 0 0; font-size: var(--ts-text-sm); line-height: var(--ts-leading-relaxed); color: var(--ts-color-muted); } .ts-footer__perks { display: grid; gap: var(--ts-space-3); margin: var(--ts-space-5) 0 0; padding: 0; list-style: none; } .ts-footer__perk { display: flex; align-items: flex-start; gap: var(--ts-space-3); } /* * Іконка в світлому квадраті: на сірому тлі підвалу сам по собі * синій штрих загубився б, а плашка тримає ряд рівним. */ .ts-footer__perk-icon, .ts-footer__lead-icon, .ts-footer__help-icon { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; color: var(--ts-color-primary); background: var(--ts-color-primary-soft); border-radius: var(--ts-radius-md); } .ts-footer__lead-icon--lg { width: 48px; height: 48px; border-radius: var(--ts-radius-lg); } .ts-footer__perk-text, .ts-footer__help-text, .ts-footer__social-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .ts-footer__perk-title, .ts-footer__support-title { font-size: var(--ts-text-base); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); line-height: 1.35; } .ts-footer__perk-note, .ts-footer__lead-note { font-size: var(--ts-text-sm); color: var(--ts-color-muted); line-height: 1.4; } .ts-footer__title { margin: 0 0 var(--ts-space-4); font-size: var(--ts-text-lg); font-weight: var(--ts-weight-bold); color: var(--ts-color-text-strong); } /* --- Контакти ----------------------------------------------------------- */ .ts-footer__lead, .ts-footer__support { display: flex; align-items: center; gap: var(--ts-space-3); } .ts-footer__support { margin-top: var(--ts-space-5); padding-top: var(--ts-space-5); border-top: 1px solid var(--ts-color-border); } .ts-footer__lead > span:last-child, .ts-footer__support > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 1px; } /* * Номер не переносимо: розірваний на два рядки, він перестає * читатись як номер. У вузькій колонці краще трохи зменшити кегль. */ .ts-footer__phone-main { font-size: var(--ts-text-xl); font-weight: var(--ts-weight-bold); color: var(--ts-color-text-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; line-height: 1.2; } @media (min-width: 1280px) { .ts-footer__phone-main { font-size: var(--ts-text-2xl); } } .ts-footer__phone-main:hover { color: var(--ts-color-primary); text-decoration: none; } .ts-footer__phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ts-space-1) var(--ts-space-3); margin: var(--ts-space-4) 0 0; padding: 0; list-style: none; font-size: var(--ts-text-sm); font-variant-numeric: tabular-nums; } /* Номер в один рядок: перенесений, він не читається як номер. */ /* * Номери темні, а не посилальні сині: у списку з десяти рядків * суцільний синій рябить, а сам номер читається гірше. Синій * лишаємо для наведення — там він підказує, що це клікабельно. */ .ts-footer__phones a { white-space: nowrap; color: var(--ts-color-text-strong); } .ts-footer__mail { display: flex; align-items: center; gap: var(--ts-space-2); margin-top: var(--ts-space-4); padding-top: var(--ts-space-4); border-top: 1px solid var(--ts-color-border); font-size: var(--ts-text-sm); } .ts-footer__mail-icon { color: var(--ts-color-primary); display: inline-flex; } .ts-footer__mail:hover { text-decoration: none; color: var(--ts-color-primary); } /* --- Списки посилань ---------------------------------------------------- */ .ts-footer__nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } /* * Стрілка праворуч і межа по всій ширині колонки: рядок стає ціллю * для пальця, а не текстом, у який треба влучити. */ .ts-footer__link { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-3); min-height: 40px; padding: var(--ts-space-2) 0; font-size: var(--ts-text-base); color: var(--ts-color-muted); } .ts-footer__link .ts-icon { flex: 0 0 auto; color: var(--ts-color-faint); transition: transform var(--ts-duration-fast) var(--ts-ease), color var(--ts-duration-fast) var(--ts-ease); } .ts-footer__link:hover { color: var(--ts-color-primary); text-decoration: none; } .ts-footer__link:hover .ts-icon { color: var(--ts-color-primary); transform: translateX(2px); } /* --- Оплата й доставка -------------------------------------------------- */ .ts-footer__np { display: flex; align-items: center; gap: var(--ts-space-4); margin-top: var(--ts-space-5); padding-top: var(--ts-space-5); border-top: 1px solid var(--ts-color-border); } .ts-footer__np-logo { display: grid; place-items: center; flex: 0 0 auto; height: 48px; padding-inline: var(--ts-space-3); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md); } .ts-footer__np-logo img { display: block; width: auto; height: 28px; } .ts-footer__np-text { display: flex; align-items: center; gap: var(--ts-space-2); min-width: 0; font-size: var(--ts-text-sm); color: var(--ts-color-muted); line-height: 1.4; } .ts-footer__np-icon { flex: 0 0 auto; display: inline-flex; color: var(--ts-color-faint); } /* --- Соцмережі й підтримка ---------------------------------------------- */ /* * Смуга світліша за картку — у макеті вона майже біла. Виносимо її * за поля картки від'ємними полями, щоб фон ішов до країв. */ .ts-footer__social-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ts-space-6); margin: 0 calc(-1 * var(--ts-space-8)) calc(-1 * var(--ts-space-5)); padding: var(--ts-space-5) var(--ts-space-8); background: var(--ts-color-surface); border-top: 1px solid var(--ts-color-border); border-radius: 0 0 var(--ts-radius-xl) var(--ts-radius-xl); } /* * Картки «Telegram» і «Відгуки на Hotline». Уся картка — посилання: * ціль велика і на мобільному, і на десктопі. */ .ts-footer__promo { display: flex; flex: 1 1 280px; align-items: center; gap: var(--ts-space-3); min-height: 64px; padding: var(--ts-space-3) var(--ts-space-4); color: var(--ts-color-text); text-decoration: none; background: var(--ts-color-surface-sunken); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-lg); transition: border-color var(--ts-duration-fast) var(--ts-ease), box-shadow var(--ts-duration-fast) var(--ts-ease); } .ts-footer__promo:hover { color: var(--ts-color-text); /* Уся картка — посилання: підкреслення тексту тут зайве. */ text-decoration: none; border-color: var(--ts-color-primary); box-shadow: var(--ts-shadow-xs); } .ts-footer__promo-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 1px; } .ts-footer__promo-icon { flex: 0 0 auto; display: block; width: 40px; height: 40px; } .ts-footer__promo-icon img { display: block; width: 40px; height: 40px; } /* Telegram — у своїх кольорах, щоб картку впізнавали з першого погляду. */ .ts-footer__promo--tg { background: var(--ts-color-telegram-soft); border-color: transparent; } .ts-footer__promo--tg:hover { border-color: var(--ts-color-telegram); } .ts-footer__promo-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--ts-space-1); padding: var(--ts-space-2) var(--ts-space-3); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: #fff; background: var(--ts-color-telegram-button); border-radius: var(--ts-radius-full); } .ts-footer__promo--tg:hover .ts-footer__promo-cta { background: var(--ts-color-telegram-button-hover); } /* Інформер Hotline — картинка їхнього сервісу, 160×50. */ .ts-footer__hotline { flex: 0 0 auto; display: block; width: 160px; height: 50px; border-radius: var(--ts-radius-sm); } .ts-footer__help { display: flex; align-items: center; gap: var(--ts-space-3); } @media (min-width: 1100px) { .ts-footer__help { padding-left: var(--ts-space-6); border-left: 1px solid var(--ts-color-border); } } /* * Синя обводка за макетом: на ледь відтіненій картці сіра рамка * зливається з тлом, і кнопка перестає читатись як кнопка. */ .ts-footer__help-btn { flex: 0 0 auto; gap: var(--ts-space-2); background: var(--ts-color-surface); border-color: var(--ts-color-primary); color: var(--ts-color-primary); } .ts-footer__help-btn:hover { background: var(--ts-color-primary-soft); border-color: var(--ts-color-primary); color: var(--ts-color-primary); } /* --- Нижній рядок ------------------------------------------------------- */ .ts-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ts-space-3); padding: var(--ts-space-5) var(--ts-space-2) 0; font-size: var(--ts-text-sm); color: var(--ts-color-muted); } .ts-footer__copy { margin: 0; } .ts-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-space-3); } .ts-footer__legal a { color: var(--ts-color-muted); } .ts-footer__legal a:hover { color: var(--ts-color-primary); } .ts-footer__sep { color: var(--ts-color-border-strong); } .ts-footer__credit { display: flex; align-items: center; gap: var(--ts-space-2); margin: 0; } .ts-footer__credit a { display: inline-flex; align-items: center; min-height: 44px; } .ts-footer__credit img { display: block; width: 116px; height: 27px; } /* * Плаваюча кнопка чата (60 + відступ 24) у кінці сторінки лягає на правий * край рядка. Відступаємо лише на те, чого не вистачає поля контейнера: * (100vw - 100%) / 2 — відстань від рядка до краю вікна. */ @media (min-width: 760px) { .ts-footer__bottom { padding-right: max(var(--ts-space-2), calc(84px + var(--ts-space-3) - (100vw - 100%) / 2)); } } @media (max-width: 759px) { .ts-footer__card { padding: var(--ts-space-6) var(--ts-space-4) var(--ts-space-4); } /* Поля картки на мобільному інші — виносимо смугу рівно на них. */ .ts-footer__social-row { margin: 0 calc(-1 * var(--ts-space-4)) calc(-1 * var(--ts-space-4)); padding: var(--ts-space-5) var(--ts-space-4); } /* Проміжок між стовпчиками вужчий — ширина потрібна самим номерам. */ .ts-footer__phones { gap: var(--ts-space-1) var(--ts-space-2); } .ts-footer__social-row { flex-direction: column; align-items: stretch; } /* У колонці flex-basis став би висотою картки. */ .ts-footer__promo { flex: 0 0 auto; } /* Уся картка — посилання; кнопка лише забирала б місце в тексту. */ .ts-footer__promo-cta { display: none; } .ts-footer__help { flex-wrap: wrap; } .ts-footer__help-btn { width: 100%; justify-content: center; } .ts-footer__bottom { flex-direction: column; align-items: flex-start; } } /* --- Мобільна навігація каталогом (ТЗ §25) ------------------------------ */ .ts-mnav { position: relative; } .ts-mnav__panel { display: none; } .ts-mnav__panel.is-active { display: block; } .ts-mnav__item { border-bottom: 1px solid var(--ts-color-border); } .ts-mnav__link { display: flex; align-items: center; gap: var(--ts-space-3); width: 100%; min-height: 52px; padding: var(--ts-space-3) var(--ts-space-4); font-size: var(--ts-text-base); font-weight: var(--ts-weight-medium); color: var(--ts-color-text); text-align: left; } /* * Назва забирає вільне місце, тож значок лишається біля лівого краю, * а стрілка притискається до правого. Раніше тут був * justify-content: space-between — зі значком він розкидав би три * елементи по кутах. */ .ts-mnav__name { flex: 1 1 auto; min-width: 0; } /* * Значок категорії. Фіксована ширина — щоб назви вишикувалися в * рівний стовпчик незалежно від того, іконка це, фото товару чи * плашка з літерою. */ .ts-mnav__link .ts-cat-thumb { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ts-color-muted); } .ts-mnav__link:hover { background: var(--ts-color-surface-sunken); text-decoration: none; } .ts-mnav__link--branch svg { flex: none; color: var(--ts-color-faint); } .ts-mnav__link--all { color: var(--ts-color-primary); font-weight: var(--ts-weight-semibold); } .ts-mnav__back { display: flex; align-items: center; gap: var(--ts-space-2); width: 100%; min-height: 48px; padding: var(--ts-space-3) var(--ts-space-4); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: var(--ts-color-muted); background: var(--ts-color-surface-sunken); } /* Стрілка «назад» — та сама іконка, розвернута */ .ts-mnav__back svg { transform: rotate(180deg); } .ts-mnav__back:hover { color: var(--ts-color-text); } /* Кнопка закриття drawer — теж ціль для пальця */ @media (max-width: 1023px) { .ts-drawer__close { width: 44px; height: 44px; } /* Зона закриття вже 44px, вертикальні відступи лише забирали висоту */ .ts-drawer__head { padding-block: var(--ts-space-1); } } /* Пагінація на телефоні — теж 44px */ @media (max-width: 767px) { .ts-pagination__item, .ts-pagination .page-numbers { min-width: 44px; height: 44px; } } /* Номери в підвалі: логотип оператора поруч із номером. */ .ts-footer__phones li { display: flex; align-items: center; gap: var(--ts-space-2); min-width: 0; } /* * Номери набирають, а не читають як текст: підкреслення при наведенні * лише рябить у списку з десяти рядків. */ .ts-footer__phones a:hover, .ts-footer__phones a:focus-visible { color: var(--ts-color-primary); text-decoration: none; } /* --- Текстові сторінки (Про нас, Гарантія, Оплата…) --------------------- */ /* * Обмежуємо довжину рядка: на широкому екрані текст на всю ширину * контейнера читається погано — око губить початок наступного рядка. */ .ts-page { max-width: 76ch; padding-block: var(--ts-space-6) var(--ts-space-10); } /* * Сторінки WooCommerce йдуть через той самий page.php, але 76ch — * це міра для читання тексту, а не для таблиць. На кошику вона * стискала сітку до 671px: колонка назви отримувала 0px, і назва * переносилась по літері. Знімаємо межу там, де вміст не текст. */ .woocommerce-page .ts-page, .woocommerce-cart .ts-page, .woocommerce-checkout .ts-page, .woocommerce-account .ts-page { max-width: none; } .ts-page__head { margin-bottom: var(--ts-space-6); } .ts-page__title { margin: 0; font-size: var(--ts-text-3xl); line-height: var(--ts-leading-snug); } /* * Найвужчі екрани: два номери поруч не вміщаються навіть із вузьким * проміжком. Номер розривати не можна, тому переходимо в один * стовпчик — краще довший список, ніж обрізані цифри. */ @media (max-width: 400px) { .ts-footer__phones { grid-template-columns: minmax(0, 1fr); } } /* --- Сторінка 404 -------------------------------------------------------- */ /* * Тупик робимо розвилкою: великий код помилки, пошук і розділи. * Вирівнювання по центру, але текст лишається читабельним — блок * обмежений по ширині, інакше рядки розтягувались би на весь екран. */ .ts-404 { max-width: 46rem; margin: 0 auto; padding: var(--ts-space-10) 0 var(--ts-space-12); text-align: center; } /* * Код помилки — великий, але приглушений: він позначає ситуацію, * а вести має заголовок і пошук, а не чотиризначне число. */ .ts-404__code { margin: 0; font-size: clamp(4rem, 12vw, 7rem); font-weight: var(--ts-weight-bold); line-height: 1; letter-spacing: -0.02em; color: var(--ts-color-primary); opacity: 0.18; } .ts-404__title { margin: calc(var(--ts-space-4) * -1) 0 0; font-size: var(--ts-text-3xl); line-height: var(--ts-leading-tight); } .ts-404__lead { margin: var(--ts-space-3) auto 0; max-width: 34rem; font-size: var(--ts-text-md); color: var(--ts-color-muted); } .ts-404__search { display: flex; gap: var(--ts-space-2); margin-top: var(--ts-space-6); } .ts-404__input { flex: 1 1 auto; min-width: 0; padding: 0 var(--ts-space-4); height: 48px; font-size: var(--ts-text-base); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border-strong); border-radius: var(--ts-radius-md); } .ts-404__input:focus { outline: none; border-color: var(--ts-color-primary); box-shadow: 0 0 0 3px rgba(11, 99, 246, 0.15); } .ts-404__submit { flex: 0 0 auto; height: 48px; } .ts-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ts-space-3); margin-top: var(--ts-space-4); } .ts-404__block { margin-top: var(--ts-space-10); padding-top: var(--ts-space-8); border-top: 1px solid var(--ts-color-border); } .ts-404__subtitle { margin: 0 0 var(--ts-space-4); font-size: var(--ts-text-lg); } .ts-404__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ts-space-2); margin: 0; padding: 0; list-style: none; text-align: left; } .ts-404__cat { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-2); /* 48px — палець потрапляє без прицілювання. */ min-height: 48px; padding: var(--ts-space-2) var(--ts-space-3); font-size: var(--ts-text-sm); color: var(--ts-color-text); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md); transition: border-color 0.15s ease, color 0.15s ease; } .ts-404__cat:hover { color: var(--ts-color-primary); border-color: var(--ts-color-primary); text-decoration: none; } .ts-404__cat .ts-icon { flex: 0 0 auto; color: var(--ts-color-faint); } .ts-404__help { margin: var(--ts-space-8) 0 0; font-size: var(--ts-text-sm); color: var(--ts-color-muted); } @media (max-width: 899px) { .ts-404__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* * Телефон: пошук у стовпчик — поле й кнопка поруч стають надто * вузькими, щоб у них щось вмістилось. */ @media (max-width: 639px) { .ts-404 { padding: var(--ts-space-6) 0 var(--ts-space-10); } .ts-404__search { flex-direction: column; } .ts-404__input, .ts-404__submit { width: 100%; } .ts-404__cats { grid-template-columns: minmax(0, 1fr); } .ts-404__actions .ts-btn { flex: 1 1 100%; justify-content: center; } } /* --- Карта сайту --------------------------------------------------------- */ .ts-sitemap__section { margin-top: var(--ts-space-8); padding-top: var(--ts-space-6); border-top: 1px solid var(--ts-color-border); } .ts-sitemap__title { margin: 0 0 var(--ts-space-5); font-size: var(--ts-text-xl); } .ts-sitemap__title a { color: var(--ts-color-text-strong); } .ts-sitemap__title a:hover { color: var(--ts-color-primary); text-decoration: none; } .ts-sitemap__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ts-space-6); } .ts-sitemap__group-title { margin: 0 0 var(--ts-space-3); padding-bottom: var(--ts-space-2); font-size: var(--ts-text-base); font-weight: var(--ts-weight-semibold); border-bottom: 1px solid var(--ts-color-border); } .ts-sitemap__group-title a { color: var(--ts-color-text-strong); } .ts-sitemap__group-title a:hover { color: var(--ts-color-primary); text-decoration: none; } .ts-sitemap__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .ts-sitemap__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-2); /* 36px — рядок лишається компактним, але палець потрапляє. */ min-height: 36px; font-size: var(--ts-text-sm); color: var(--ts-color-muted); } .ts-sitemap__list a:hover { color: var(--ts-color-primary); text-decoration: none; } /* Кількість товарів праворуч — видно, куди є сенс заходити. */ .ts-sitemap__count { flex: 0 0 auto; font-size: var(--ts-text-xs); color: var(--ts-color-faint); font-variant-numeric: tabular-nums; } /* * Службові переліки (сторінки, статті) ставимо в рядок: їх небагато, * і стовпчик з десяти пунктів розтягував би сторінку без потреби. */ .ts-sitemap__list--inline { display: flex; flex-wrap: wrap; gap: var(--ts-space-2) var(--ts-space-5); } .ts-sitemap__list--inline a { min-height: 32px; } .ts-sitemap__more { margin: var(--ts-space-6) 0 0; } @media (max-width: 999px) { .ts-sitemap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .ts-sitemap__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-5); } } /* Поки довантажується файл меню (inc/menu-cache.php) — частки секунди. */ .ts-megamenu__loading { margin: 0; padding: var(--ts-space-6); font-size: var(--ts-text-sm); color: var(--ts-color-muted); } /* ========================================================================== Сторінка «Контакти» (page-kontakty.php) ========================================================================== */ .ts-contacts { padding-block: var(--ts-space-6) var(--ts-space-12); } .ts-contacts__head { max-width: 760px; margin-bottom: var(--ts-space-8); } .ts-contacts__lead { margin: var(--ts-space-3) 0 var(--ts-space-4); font-size: var(--ts-text-md); color: var(--ts-color-muted); } /* «Зараз працюємо» — зелена, «зачинено» — сіра (стан ставить main.js). */ .ts-contacts__hours { display: inline-flex; align-items: center; gap: var(--ts-space-2); margin: 0; padding: var(--ts-space-2) var(--ts-space-4); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: var(--ts-color-muted); background: var(--ts-color-surface-sunken); border-radius: var(--ts-radius-full); } .ts-contacts__hours[data-state="open"] { color: var(--ts-color-success); background: var(--ts-color-success-soft); } .ts-contacts__dot { width: 8px; height: 8px; border-radius: var(--ts-radius-full); background: currentColor; } .ts-contacts__hours[data-state="open"] .ts-contacts__dot { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); } /* * Сітка на 12: телефони ширші за месенджери, решта — чотири рівні * картки в ряд. */ .ts-contacts__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ts-space-5); } .ts-contacts__card { grid-column: span 3; display: flex; flex-direction: column; gap: var(--ts-space-3); padding: var(--ts-space-6); color: var(--ts-color-text); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-lg); } /* * Перший ряд — без розтягування по висоті сусіда: месенджерів довший * список, і під телефонами лишалась порожня смуга. */ .ts-contacts__card--phones { grid-column: span 7; align-self: start; } .ts-contacts__card--messengers { grid-column: span 5; align-self: start; } .ts-contacts__title { display: flex; align-items: center; gap: var(--ts-space-3); margin: 0; font-size: var(--ts-text-lg); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-contacts__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; color: var(--ts-color-primary); background: var(--ts-color-primary-soft); border-radius: var(--ts-radius-md); } .ts-contacts__note, .ts-contacts__text, .ts-contacts__address { margin: 0; font-size: var(--ts-text-base); color: var(--ts-color-muted); line-height: var(--ts-leading-relaxed); } .ts-contacts__address { font-size: var(--ts-text-md); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-contacts__main { font-size: var(--ts-text-3xl); font-weight: var(--ts-weight-bold); line-height: 1.1; color: var(--ts-color-text-strong); font-variant-numeric: tabular-nums; } .ts-contacts__main:hover { color: var(--ts-color-primary); text-decoration: none; } .ts-contacts__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ts-space-5); margin-top: var(--ts-space-2); padding-top: var(--ts-space-5); border-top: 1px solid var(--ts-color-border); } .ts-contacts__subtitle { margin: 0 0 var(--ts-space-2); font-size: var(--ts-text-xs); font-weight: var(--ts-weight-semibold); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-color-faint); } .ts-contacts__phones, .ts-contacts__messengers { display: grid; gap: var(--ts-space-1); margin: 0; padding: 0; list-style: none; } .ts-contacts__phone { display: flex; align-items: center; gap: var(--ts-space-3); min-height: 44px; padding: var(--ts-space-2) var(--ts-space-3); margin-inline: calc(-1 * var(--ts-space-3)); color: var(--ts-color-text); border-radius: var(--ts-radius-md); transition: background-color var(--ts-duration-fast) var(--ts-ease); } .ts-contacts__phone:hover { color: var(--ts-color-primary); background: var(--ts-color-surface-hover); text-decoration: none; } .ts-contacts__phone-logo { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--ts-color-faint); } .ts-contacts__phone-number { font-size: var(--ts-text-md); font-weight: var(--ts-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; } .ts-contacts__phone-note { margin-left: auto; font-size: var(--ts-text-xs); color: var(--ts-color-faint); } .ts-contacts__messengers { gap: var(--ts-space-3); } .ts-contacts__messenger { display: flex; flex-direction: column; gap: var(--ts-space-3); padding: var(--ts-space-4); background: var(--ts-color-surface-tint); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md); } .ts-contacts__messenger-name { display: flex; align-items: center; gap: var(--ts-space-3); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); } .ts-contacts__messenger-name img { width: 28px; height: 28px; } .ts-contacts__chips { display: flex; flex-wrap: wrap; gap: var(--ts-space-2); } .ts-contacts__chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--ts-space-3); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); font-variant-numeric: tabular-nums; color: var(--ts-color-text); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-full); white-space: nowrap; transition: border-color var(--ts-duration-fast) var(--ts-ease), color var(--ts-duration-fast) var(--ts-ease); } .ts-contacts__chip:hover { color: var(--ts-color-primary); border-color: var(--ts-color-primary); text-decoration: none; } .ts-contacts__link { font-size: var(--ts-text-lg); font-weight: var(--ts-weight-semibold); color: var(--ts-color-primary); word-break: break-all; } .ts-contacts__more { display: inline-flex; align-items: center; gap: var(--ts-space-1); margin-top: auto; padding-top: var(--ts-space-2); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: var(--ts-color-primary); } /* Бот — у кольорах Telegram, уся картка — посилання. */ .ts-contacts__card--bot { background: var(--ts-color-telegram-soft); border-color: transparent; transition: border-color var(--ts-duration-fast) var(--ts-ease); } .ts-contacts__card--bot:hover { color: var(--ts-color-text); border-color: var(--ts-color-telegram); text-decoration: none; } .ts-contacts__card--bot .ts-contacts__title img { width: 38px; height: 38px; } .ts-contacts__card--bot .ts-contacts__more { color: var(--ts-color-telegram-button); } @media (max-width: 1099px) { .ts-contacts__card, .ts-contacts__card--phones, .ts-contacts__card--messengers { grid-column: span 6; } .ts-contacts__card--phones { grid-column: span 12; } } @media (max-width: 759px) { .ts-contacts__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-4); } .ts-contacts__card, .ts-contacts__card--phones, .ts-contacts__card--messengers { grid-column: auto; padding: var(--ts-space-5); } .ts-contacts__groups { grid-template-columns: minmax(0, 1fr); } .ts-contacts__main { font-size: var(--ts-text-2xl); } } /* ========================================================================== Сторінка «Питання та відповіді» (page-faq.php) ========================================================================== */ .ts-faq { max-width: 880px; padding-block: var(--ts-space-6) var(--ts-space-12); } .ts-faq__head { margin-bottom: var(--ts-space-8); } .ts-faq__lead { margin: var(--ts-space-3) 0 var(--ts-space-5); font-size: var(--ts-text-md); color: var(--ts-color-muted); line-height: var(--ts-leading-relaxed); } /* Розділи — чіпами-якорями: на телефоні довгий список гортати до потрібного довго. */ .ts-faq__nav { display: flex; flex-wrap: wrap; gap: var(--ts-space-2); } .ts-faq__chip { display: inline-flex; align-items: center; gap: var(--ts-space-2); min-height: 40px; padding: 0 var(--ts-space-4); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text); background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-full); transition: border-color var(--ts-duration-fast) var(--ts-ease), color var(--ts-duration-fast) var(--ts-ease); } .ts-faq__chip .ts-icon { color: var(--ts-color-primary); } .ts-faq__chip:hover { color: var(--ts-color-primary); border-color: var(--ts-color-primary); text-decoration: none; } .ts-faq__body { display: flex; flex-direction: column; gap: var(--ts-space-8); } /* Якір не ховається під липкою шапкою. */ .ts-faq__section { scroll-margin-top: 140px; } .ts-faq__section-title { display: flex; align-items: center; gap: var(--ts-space-3); margin: 0 0 var(--ts-space-4); font-size: var(--ts-text-xl); color: var(--ts-color-text-strong); } .ts-faq__section-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; color: var(--ts-color-primary); background: var(--ts-color-primary-soft); border-radius: var(--ts-radius-md); } .ts-faq__list { display: flex; flex-direction: column; gap: var(--ts-space-2); } .ts-faq__item { background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-lg); transition: border-color var(--ts-duration-fast) var(--ts-ease), box-shadow var(--ts-duration-fast) var(--ts-ease); } .ts-faq__item:hover { border-color: var(--ts-color-border-strong); } .ts-faq__item[open] { border-color: var(--ts-color-primary); box-shadow: var(--ts-shadow-sm); } .ts-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-4); min-height: 56px; padding: var(--ts-space-3) var(--ts-space-5); font-size: var(--ts-text-md); font-weight: var(--ts-weight-semibold); color: var(--ts-color-text-strong); cursor: pointer; list-style: none; } /* Стандартний трикутник — геть, у нас власна стрілка. */ .ts-faq__q::-webkit-details-marker { display: none; } .ts-faq__q:focus-visible { outline: 2px solid var(--ts-color-border-focus); outline-offset: 2px; border-radius: var(--ts-radius-lg); } .ts-faq__toggle { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--ts-color-muted); background: var(--ts-color-surface-sunken); border-radius: var(--ts-radius-full); transition: transform var(--ts-duration-base) var(--ts-ease), background-color var(--ts-duration-fast) var(--ts-ease), color var(--ts-duration-fast) var(--ts-ease); } .ts-faq__item[open] .ts-faq__toggle { transform: rotate(180deg); color: var(--ts-color-primary); background: var(--ts-color-primary-soft); } .ts-faq__a { padding: 0 var(--ts-space-5) var(--ts-space-5); font-size: var(--ts-text-base); color: var(--ts-color-muted); line-height: var(--ts-leading-relaxed); } .ts-faq__a > :first-child { margin-top: 0; } .ts-faq__a > :last-child { margin-bottom: 0; } .ts-faq__a strong { color: var(--ts-color-text-strong); } /* «Не знайшли відповідь?» — картка з діями. */ .ts-faq__cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ts-space-4) var(--ts-space-5); align-items: center; padding: var(--ts-space-6); background: var(--ts-color-primary-soft); border-radius: var(--ts-radius-xl); } .ts-faq__cta-icon { display: grid; place-items: center; width: 56px; height: 56px; color: var(--ts-color-primary-contrast); background: var(--ts-color-primary); border-radius: var(--ts-radius-lg); } .ts-faq__cta-title { margin: 0 0 var(--ts-space-1); font-size: var(--ts-text-lg); color: var(--ts-color-text-strong); } .ts-faq__cta-text p { margin: 0; font-size: var(--ts-text-base); color: var(--ts-color-muted); } .ts-faq__cta-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-space-3); } .ts-faq__cta-actions .ts-btn { gap: var(--ts-space-2); } .ts-faq__cta-actions .ts-btn img { width: 18px; height: 18px; } .ts-faq__cta-link { display: inline-flex; align-items: center; gap: var(--ts-space-1); margin-left: var(--ts-space-2); font-size: var(--ts-text-sm); font-weight: var(--ts-weight-semibold); color: var(--ts-color-primary); } @media (max-width: 759px) { .ts-faq__q { padding: var(--ts-space-3) var(--ts-space-4); font-size: var(--ts-text-base); } .ts-faq__a { padding: 0 var(--ts-space-4) var(--ts-space-4); } .ts-faq__section-title { font-size: var(--ts-text-lg); } .ts-faq__cta { padding: var(--ts-space-5); } .ts-faq__cta-actions .ts-btn { flex: 1 1 100%; justify-content: center; } .ts-faq__cta-link { margin: var(--ts-space-1) auto 0; } } /* ========================================================================== TopShop — Dropdown Власна заміна нативного ,