/* ============================================================ FLOAT 2026 — redesign.css Дизайн-система «outdoor-преміум» + CSS-reskin теми insales. Все під префіксом .f26 (клас на /). КРОК 1: шапка (десктоп+мобільна) та підвал. Оновлено: 2026-07-09 ============================================================ */ /* ---------- 0. Токени ---------- */ html.f26 { --water-900:#07171d; --water-800:#0b2027; --water-700:#0e3b43; --teal:#12a0b4; --teal-soft:#1cbcd1; --amber:#f0a838; --amber-deep:#d98a1c; --sand:#f5f0e7; --paper:#fff; --ink:#0b2027; --ink-2:#4a5f66; --line:#e4ded2; --ok:#1f9d63; --radius:18px; --radius-sm:12px; --shadow-sm:0 1px 2px rgba(11,32,39,.06),0 4px 12px rgba(11,32,39,.05); --shadow-md:0 8px 24px rgba(11,32,39,.10),0 2px 6px rgba(11,32,39,.06); --ease:cubic-bezier(.22,.61,.36,1); --font-head:'Bricolage Grotesque','Manrope',system-ui,sans-serif; --font-body:'Manrope',system-ui,sans-serif; } /* ---------- 1. База ---------- */ .f26 body, body.f26 { font-family:var(--font-body); color:var(--ink); -webkit-font-smoothing:antialiased; } .f26 h1, .f26 h2, .f26 h3 { font-family:var(--font-head); letter-spacing:-.02em; line-height:1.1; color:var(--ink); } /* ============================================================ 2. ШАПКА — ДЕСКТОП (header.header) ============================================================ */ /* --- 2.1 Верхня смужка (топбар) --- */ .f26 .header__top, .f26 .header__top.header__top-border { background:var(--water-900); border:none; } .f26 .header__top-wrap { background:transparent; } .f26 .header__top .header__wrap { min-height:38px; } .f26 .header__top, .f26 .header__top a, .f26 .header__top .s-hicon__name, .f26 .header__top .h-phone__info-tel, .f26 .header__top .h-phone__info-tel a { color:#c7d3d6; font-size:13px; } .f26 .header__top a:hover { color:#fff; } .f26 .header__top svg { fill:#c7d3d6; stroke:none; } .f26 .header__top a:hover svg { fill:#fff; } /* Перемикач мови */ .f26 .in-locale__my-lang a { color:#c7d3d6; border-radius:8px; } .f26 .in-locale__my-lang a:hover { color:#fff; } /* Телефон + зворотний дзвінок */ .f26 .h-phone__info-tel, .f26 .h-phone__info-tel a { font-weight:700; color:#fff; } .f26 .h-phone__info-hint { color:#8fa4aa; font-size:12px; } .f26 .h-phone__info-call.button, .f26 .h-phone__info-call.in-callback { background:transparent; color:var(--teal-soft); border:none; font-weight:600; text-decoration:underline; text-underline-offset:3px; } .f26 .h-phone__info-call.button:hover { color:#fff; background:transparent; } /* Соцмережі у смужці */ .f26 .header__top .soz a.soz__list, .f26 .header__top .soz .soz__list { width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.12); display:inline-flex; align-items:center; justify-content:center; transition:background .15s; } .f26 .header__top .soz .soz__list:hover { background:var(--teal); } .f26 .header__top .soz .soz__list svg { width:13px; height:13px; } /* --- 2.2 Середня частина: лого · каталог · пошук · іконки · кошик --- */ .f26 .header__midd, .f26 .header__midd.header__midd-border { background:var(--paper); border:none; border-bottom:1px solid var(--line); box-shadow:none; } .f26 .header__midd .header__wrap { align-items:center; } /* Кнопка «Каталог товарів» */ .f26 .b-catalog > a, .f26 .b-catalog > button, .f26 .b-catalog .b-catalog__link, .f26 .b-catalog .b-catalog__btn { background:var(--water-800) !important; color:#fff !important; border:none !important; border-radius:var(--radius-sm) !important; font-weight:700; transition:background .18s var(--ease); } .f26 .b-catalog > a:hover, .f26 .b-catalog > button:hover, .f26 .b-catalog .b-catalog__link:hover, .f26 .b-catalog .b-catalog__btn:hover { background:var(--water-700) !important; } .f26 .b-catalog svg { fill:#fff; } /* Пошук */ .f26 .searchpro__field, .f26 .js-searchpro__field { background:var(--sand); border:1.5px solid var(--line); border-radius:var(--radius-sm); transition:border-color .18s,background .18s; overflow:hidden; } .f26 .searchpro__field:focus-within { border-color:var(--teal); background:#fff; } .f26 .searchpro__field input[type="text"], .f26 .searchpro__field input[type="search"] { background:transparent; border:none; font-family:var(--font-body); font-size:15px; color:var(--ink); } .f26 .searchpro__field input::placeholder { color:#5d6f75; } .f26 .searchpro__field button[type="submit"], .f26 .searchpro__field .searchpro__button { background:var(--teal); color:#fff; border:none; border-radius:9px; font-weight:700; transition:background .18s; } .f26 .searchpro__field button[type="submit"]:hover, .f26 .searchpro__field .searchpro__button:hover { background:var(--water-700); } /* Іконки: вибране / порівняння / переглянуті */ .f26 .hicon { border-radius:var(--radius-sm); transition:background .18s; } .f26 .hicon:hover { background:var(--sand); } .f26 .hicon a, .f26 .hicon { color:var(--water-800); } .f26 .hicon svg { fill:var(--water-800); } /* лічильники на іконках */ .f26 .hicon .count, .f26 .hicon span[class*="count"], .f26 .hicon i[class*="count"] { background:var(--amber); color:var(--water-900); font-weight:800; border-radius:8px; } /* Кошик */ .f26 .header__cart.mcart, .f26 .header__cart { background:var(--water-800); color:#fff; border-radius:var(--radius-sm); transition:background .18s var(--ease); } .f26 .header__cart:hover { background:var(--water-700); } .f26 .header__cart a, .f26 .header__cart { color:#fff; } .f26 .header__cart svg { fill:#fff; } .f26 .header__cart .count, .f26 .header__cart span[class*="count"], .f26 .mcart span[class*="count"] { background:var(--amber); color:var(--water-900); font-weight:800; border-radius:8px; } /* --- 2.3 Нижній ряд: бренди · категорії · посилання --- */ .f26 .header__bott, .f26 .header__bott.header__bott-border { background:var(--paper); border:none; border-bottom:1px solid var(--line); } .f26 .h-menu a { font-family:var(--font-body); font-weight:600; font-size:14.5px; color:var(--ink-2); transition:color .15s; } .f26 .h-menu a:hover { color:var(--water-800); } .f26 .h-menu .h-menu__active > a, .f26 .h-menu li.active > a { color:var(--teal); } .f26 .m-brands a { font-weight:700; color:var(--amber-deep); } .f26 .header__links a { font-weight:600; color:var(--ink-2); transition:color .15s; } .f26 .header__links a:hover { color:var(--water-800); } .f26 .in-separator { display:none; } /* Випадаючі підменю категорій */ .f26 .h-menu > .h-menu__item > .h-menu__sub, .f26 .h-menu > li > .h-menu__sub { border-radius:var(--radius-sm); box-shadow:var(--shadow-md); border:1px solid var(--line); } .f26 .h-menu__sub .h-menu__sub, .f26 .h-menu__sub ul { border:none !important; box-shadow:none !important; border-radius:0; } /* ============================================================ 3. ШАПКА — МОБІЛЬНА (header.h-mobile) ============================================================ */ .f26 header[class*="h-mobile"] { background:var(--paper); border-bottom:1px solid var(--line); box-shadow:none; } .f26 .h-mobile__top-wrap { align-items:center; } /* Бургер */ .f26 .h-mobile__top-bars .bars { background:var(--water-800); border-radius:var(--radius-sm); transition:background .18s; } .f26 .h-mobile__top-bars .bars:active { background:var(--water-700); transform:scale(.97); } .f26 .h-mobile__top-bars .bars .bars__line { background:#fff; } /* Мобільний пошук */ .f26 .h-mobile .searchpro__field, .f26 [class*="h-mobile__top-search"] .searchpro__field { background:var(--sand); border:1.5px solid var(--line); border-radius:var(--radius-sm); } /* --- 3.1 Drawer (m-menu) --- */ .f26 .m-menu__wrap { background:#fff; } .f26 .m-menu__header { border-bottom:1px solid var(--line); background:#fff; } .f26 .m-menu__hTitle { font-family:var(--font-head); font-weight:700; color:var(--ink); } .f26 .m-menu__close { border-radius:10px; transition:background .15s; } .f26 .m-menu__close:active { background:var(--sand); } .f26 .m-menu-links a, .f26 .m-menu__ul-1 a { font-weight:600; color:var(--ink); transition:color .15s; } .f26 .m-menu-links a:active { color:var(--teal); } .f26 .m-menu-catalog a { font-weight:600; color:var(--ink); } /* --- 3.2 Нижня панель (footerPanel = tabbar) --- */ .f26 .footerPanel { background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:none; padding-bottom:env(safe-area-inset-bottom); } .f26 .footerPanel__item, .f26 .footerPanel__item a { color:var(--ink-2); font-size:11px; font-weight:600; } .f26 .footerPanel__item svg { fill:var(--ink-2); } .f26 .footerPanel__item:active, .f26 .footerPanel__item.active, .f26 .footerPanel__item.active a { color:var(--teal); } .f26 .footerPanel__item.active svg { fill:var(--teal); } .f26 .footerPanel__item .count, .f26 .footerPanel__item span[class*="count"] { background:var(--amber); color:var(--water-900); font-weight:800; border-radius:8px; } /* ============================================================ 4. ПІДВАЛ (footer.footer) ============================================================ */ .f26 footer.footer { background:var(--water-900); color:#a9bcc1; border:none; } .f26 .footer__wrap { padding-top:52px; padding-bottom:34px; } .f26 footer.footer a { color:#a9bcc1; transition:color .15s; } .f26 footer.footer a:hover { color:var(--teal-soft); } /* Лого + опис */ .f26 .footer__item-logo img { filter:brightness(0) invert(1); opacity:.95; } .f26 .footer__item-desc, .f26 .footer__item-desc p { color:#8fa4aa; font-size:14px; line-height:1.6; } /* Заголовки колонок */ .f26 .footer__item-name { color:#fff; font-size:13.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .f26 .footer__item-down svg { fill:#8fa4aa; } /* Меню колонок */ .f26 .f-menu__list a { font-size:14px; } /* Контакти */ .f26 .f-contact, .f26 .f-contact a { color:#c7d3d6; font-size:14px; } .f26 .f-contact svg { fill:var(--teal-soft); } /* Соцмережі в підвалі */ .f26 footer.footer .soz .soz__list { width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; transition:background .15s; } .f26 footer.footer .soz .soz__list:hover { background:var(--teal); } .f26 footer.footer .soz .soz__list svg { fill:#c7d3d6; } .f26 footer.footer .soz .soz__list:hover svg { fill:#fff; } /* Нижній рядок копірайту */ .f26 .footer__copy { background:transparent; border-top:1px solid rgba(255,255,255,.1); color:#7d939a; font-size:13px; } .f26 .footer__copy a { color:#a9bcc1; } /* ============================================================ 5. Доступність та анімації ============================================================ */ @media (prefers-reduced-motion: reduce) { .f26 *, .f26 *::before, .f26 *::after { transition-duration:.01ms !important; animation:none !important; scroll-behavior:auto !important; } } /* ============================================================ 5b. Уточнення під живі класи (Крок 1, ітерація 2) ============================================================ */ .f26 .b-catalog__button { background:var(--water-800); color:#fff; border:none; border-radius:var(--radius-sm); font-weight:700; transition:background .18s var(--ease); cursor:pointer; } .f26 .b-catalog__button:hover { background:var(--water-700); } .f26 .b-catalog__title { color:#fff; } .f26 .b-catalog__icon svg { fill:#fff; } .f26 .b-catalog__bars .bars { background:transparent; } .f26 .b-catalog__bars .bars__line { background:#fff; } .f26 .mcart__link, .f26 .mcart__title, .f26 .mcart__price, .f26 .mcart__empty { color:#fff; } .f26 .mcart__title { font-size:11px; opacity:.75; font-weight:500; } .f26 .mcart__price { font-weight:700; } .f26 .mcart__icon svg { fill:#fff; } .f26 .mcart__count, .f26 .hcount { background:var(--amber) !important; color:var(--water-900) !important; font-weight:800; border-radius:8px; } .f26 .mcart__items { color:var(--ink); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); } .f26 .mcart__items a { color:var(--ink); } .f26 .mcart__items .mcart__total-price { color:var(--ink); } .f26 .mcart__items .button.mcart__button { background:var(--amber); color:var(--water-900); border:none; border-radius:var(--radius-sm); font-weight:700; } .f26 .mcart__items .button.mcart__button:hover { background:var(--amber-deep); } .f26 .searchpro__field-button { background:var(--teal); color:#fff; border-radius:9px; font-weight:700; transition:background .18s; cursor:pointer; } .f26 .searchpro__field-button:hover { background:var(--water-700); } .f26 .searchpro__field-input { background:transparent; border:none; font-family:var(--font-body); color:var(--ink); } .f26 .searchpro__field-categories-label { color:var(--ink-2); font-weight:600; } /* Пошук: перебити специфічність теми */ .f26 .searchpro__field .searchpro__field-button, .f26 .searchpro__field-button.js-searchpro__field-button { background:var(--teal) !important; color:#fff !important; } .f26 .searchpro__field .searchpro__field-button:hover { background:var(--water-700) !important; } /* Мобільна кнопка «Каталог товарів» */ .f26 .m-menu-catalog_static { background:var(--water-800) !important; border-radius:var(--radius-sm); } .f26 .m-menu-catalog_static .m-menu-catalog__title { color:#fff; font-weight:700; } .f26 .m-menu-catalog_static svg { fill:#fff; } /* Іконки нижньої панелі */ .f26 .footerPanel__icon svg { fill:var(--ink-2); } .f26 .footerPanel__name { color:var(--ink-2); } /* ============================================================ КРОК 2 — ГОЛОВНА СТОРІНКА ============================================================ */ .f26 .in-blocks__title-name { font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; color:var(--ink); } .f26 .in-blocks__title-link, .f26 .in-blocks__title-link a { color:var(--teal); font-weight:700; } .f26 .in-blocks__title-link a:hover { color:var(--water-700); } .f26 .fsel { background:var(--sand); border:1px solid var(--line); border-radius:var(--radius); } .f26 .products__item { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:none; transition:transform .18s var(--ease), box-shadow .18s var(--ease); overflow:hidden; } .f26 .products__item:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; } .f26 .products__item-info-name, .f26 .products__item-info-name a { font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35; } .f26 .products__item-info-name a:hover { color:var(--teal); } .f26 .products__price-new, .f26 .products__price { font-family:var(--font-head); font-weight:800; color:var(--amber-deep); } .f26 .products__price-old { color:#9aa8ad; font-weight:500; } .f26 .products__code { color:var(--ink-2); font-size:12.5px; } .f26 .products__available { font-weight:600; } .f26 .products__addtocart .button, .f26 .products__button, .f26 .products__cart .button, .f26 .addtocart.button, .f26 .m-products__info-addcart .button, .f26 .s-products__addtocart .button { background:var(--amber) !important; color:var(--water-900) !important; border:none !important; border-radius:var(--radius-sm) !important; font-weight:700; transition:background .18s var(--ease), transform .12s var(--ease); } .f26 .products__addtocart .button:hover, .f26 .products__button:hover, .f26 .products__cart .button:hover, .f26 .addtocart.button:hover, .f26 .m-products__info-addcart .button:hover, .f26 .s-products__addtocart .button:hover { background:var(--amber-deep) !important; } .f26 .addtocart.button:active { transform:scale(.97); } .f26 .m-products__item { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .f26 .m-products__info-name, .f26 .m-products__info-name a { font-weight:600; color:var(--ink); } .f26 .m-products__info-price-new { font-family:var(--font-head); font-weight:800; color:var(--amber-deep); } .f26 .m-products__info-price-old { color:#9aa8ad; } .f26 .s-products__name, .f26 .s-products__name a { font-weight:600; color:var(--ink); } .f26 .s-products__name a:hover { color:var(--teal); } .f26 .s-products__price-new { font-weight:800; color:var(--amber-deep); } .f26 .s-products__price-old { color:#9aa8ad; } .f26 .news-v-1__item, .f26 [class*="news-v-1__item-"] { border-radius:var(--radius); } .f26 .news-v-1 a { color:var(--ink); } .f26 .news-v-1 a:hover { color:var(--teal); } .f26 .h-news__item-name { font-family:var(--font-head); font-weight:700; } .f26 .h-news__item-date { color:var(--ink-2); font-size:13px; } /* Крок 2 — поліровка: бейджі знижок і блог */ .f26 .stock-label__percent, .f26 .stock-label .stock-label__percent { background:var(--amber) !important; color:var(--water-900) !important; font-weight:800; border-radius:8px; } .f26 .news-v-1__name { font-family:var(--font-head); font-weight:700; letter-spacing:-.01em; } .f26 .news-v-1__date { font-size:13px; opacity:.85; } .f26 .news-v-1__item_w > a { background:linear-gradient(160deg, var(--water-800), var(--water-700)); border-radius:var(--radius); } /* Ціни (обгортка pr-price) */ .f26 .products__pr-price-new, .f26 .products__pr-price-new .price, .f26 .products__pr-price-new .price-wrapper { font-family:var(--font-head); font-weight:800; color:var(--amber-deep); } .f26 .products__pr-price-old, .f26 .products__pr-price-old .price { color:#9aa8ad; font-weight:500; } /* ============================================================ КРОК 3 — КАТАЛОГ (категорія) ============================================================ */ .f26 .bread__link { color:var(--ink-2); } .f26 .bread__link:hover { color:var(--teal); } .f26 .c-tags__item { background:var(--sand); border:1.5px solid transparent; border-radius:10px; font-weight:600; color:var(--ink); transition:all .18s var(--ease); } .f26 .c-tags__item:hover { border-color:var(--teal); background:#fff; } .f26 .sorting__switch { border-radius:10px; } .f26 .sorting__switch svg { fill:var(--ink-2); } .f26 .sorting__switch_active svg, .f26 .sorting__switch:hover svg { fill:var(--teal) !important; } .f26 .sorting__switch_active { border-color:var(--teal) !important; } .f26 .sorting__page-item_sel { color:var(--teal); font-weight:700; } .f26 .pagin a, .f26 .pagin span { border-radius:10px; font-weight:600; } .f26 .pagin a:hover { color:var(--teal); } .f26 .sorting__sort-name { font-weight:600; color:var(--ink); } .f26 .sorting__sort-block { border-radius:var(--radius-sm); box-shadow:var(--shadow-md); border:1px solid var(--line); } .f26 .sorting__sort-list a { color:var(--ink-2); font-weight:500; } .f26 .sorting__sort-list a:hover { color:var(--teal); } .f26 .sorting__sort-list_active a { color:var(--teal); font-weight:700; } .f26 .sorting__filter { background:var(--water-800); border-radius:var(--radius-sm); } .f26 .sorting__filter svg { fill:#fff; } .f26 .filter__name { font-weight:700; color:var(--ink); } .f26 .filter__label { color:var(--ink-2); } .f26 .filter__label input[type=checkbox] { accent-color:var(--teal); } .f26 .filter__values-search input { background:var(--sand); border:1px solid var(--line); border-radius:10px; } .f26 .filter__inp { border:1px solid var(--line); border-radius:10px; } .f26 .filter-slider.ui-slider { background:var(--line); border:none; } .f26 .filter-slider .ui-slider-range { background:var(--teal); } .f26 .filter-slider .ui-slider-handle { background:#fff; border:2px solid var(--teal); border-radius:50%; } .f26 .filter__button, .f26 button.filter__button, .f26 .filter__button.button { background:var(--amber) !important; color:var(--water-900) !important; border:none !important; border-radius:var(--radius-sm) !important; font-weight:700; } .f26 .filter__button:hover { background:var(--amber-deep) !important; } .f26 .filter__reset { color:var(--ink-2); } .f26 .filter__reset:hover { color:var(--teal); } /* Теги-чіпи: форма */ .f26 .c-tags__item { display:inline-flex; align-items:center; padding:7px 13px; text-decoration:none !important; line-height:1.2; } .f26 .c-tags { display:flex; flex-wrap:wrap; gap:8px; } /* ============================================================ КРОК 4 — КАРТКА ТОВАРУ ============================================================ */ .f26 .product__top-brand-link { color:var(--teal); font-weight:600; } .f26 .product__top-item, .f26 .product__top-item a { color:var(--ink-2); } .f26 .product__top-item a:hover { color:var(--teal); } .f26 .product__pr-price-new, .f26 .product__pr-price-new .price, .f26 .product__pr-price-new .price-wrapper { font-family:var(--font-head); font-weight:800; color:var(--amber-deep); } .f26 .product__pr-price-old, .f26 .product__pr-price-old .price { color:#9aa8ad; font-weight:500; } .f26 .product__code { color:var(--ink-2); } .f26 .product__button.button { background:var(--amber) !important; color:var(--water-900) !important; border:none !important; border-radius:var(--radius-sm) !important; font-weight:700; transition:background .18s var(--ease), transform .12s var(--ease); } .f26 .product__button.button:hover { background:var(--amber-deep) !important; } .f26 .product__button.button:active { transform:scale(.98); } .f26 .counter-pr { border-radius:var(--radius-sm); overflow:hidden; } .f26 .counter-pr__minus, .f26 .counter-pr__plus { background:var(--sand); border:none; color:var(--ink); transition:background .15s; } .f26 .counter-pr__minus:hover, .f26 .counter-pr__plus:hover { background:var(--line); } .f26 .options__list a { background:var(--sand); border:1.5px solid transparent; border-radius:10px; font-weight:600; color:var(--ink); text-decoration:none; transition:all .18s var(--ease); } .f26 .options__list a:hover { border-color:var(--teal); background:#fff; } .f26 .options__list a.selected { border-color:var(--teal) !important; background:#fff !important; color:var(--teal) !important; font-weight:700; } .f26 .options__list a.options__disabled { opacity:.5; } .f26 .options__list a.options__disabled .options__name { text-decoration:line-through; } .f26 .tab__names .h-menu__link { font-weight:600; color:var(--ink-2); } .f26 .tab__names .h-menu__link:hover { color:var(--ink); } .f26 .tab__names .h-menu__link_active-tab { color:var(--teal) !important; border-color:var(--teal) !important; font-weight:700; } .f26 .features-two__name { color:var(--ink-2); } .f26 .features-two__value { color:var(--ink); font-weight:600; } .f26 .dp-product__group-title { font-weight:700; color:var(--ink); } .f26 .dp-product__header { font-weight:700; } /* ============================================================ КРОК 5 — КОШИК + ОФОРМЛЕННЯ ============================================================ */ .f26 .cart__item { background:#fff; border:1px solid var(--line); border-radius:var(--radius); } .f26 .c-item__name a { font-weight:600; color:var(--ink); } .f26 .c-item__name a:hover { color:var(--teal); } .f26 .c-item__sku { color:var(--ink-2); font-size:13px; } .f26 .c-item__price { font-family:var(--font-head); font-weight:800; color:var(--amber-deep); } .f26 .c-item__remove, .f26 .c-item__remove a { color:var(--ink-2); } .f26 .c-item__remove a:hover { color:#c0392b; } .f26 .s-cartprice-name { color:var(--ink-2); } .f26 .s-cartprice-price { font-weight:600; color:var(--ink); } .f26 .s-total-header { font-weight:700; color:var(--ink); } .f26 .s-total { font-family:var(--font-head); font-weight:800; color:var(--amber-deep); } .f26 .s-cart-checkout input[type=submit], .f26 .s-cart-checkout .button, .f26 .s-cart-checkout a.button { background:var(--amber) !important; color:var(--water-900) !important; border:none !important; border-radius:var(--radius-sm) !important; font-weight:700; transition:background .18s var(--ease); } .f26 .s-cart-checkout input[type=submit]:hover, .f26 .s-cart-checkout .button:hover { background:var(--amber-deep) !important; } .f26 .wa-section-header { font-family:var(--font-head); font-weight:700; color:var(--ink); } .f26 .wa-name, .f26 .wa-name a { font-weight:600; color:var(--ink); } .f26 .wa-name a:hover { color:var(--teal); } .f26 .wa-price-total { font-weight:800; color:var(--amber-deep); } .f26 .wa-price-compare, .f26 .wa-price-discount { color:#9aa8ad; } .f26 .wa-order-form-wrapper .wa-field input[type=text], .f26 .wa-order-form-wrapper .wa-field input[type=email], .f26 .wa-order-form-wrapper .wa-field input[type=tel], .f26 .wa-order-form-wrapper .wa-field select, .f26 .wa-order-form-wrapper .wa-field textarea { border:1.5px solid var(--line); border-radius:10px; font-family:var(--font-body); transition:border-color .18s; } .f26 .wa-order-form-wrapper .wa-field input:focus, .f26 .wa-order-form-wrapper .wa-field select:focus, .f26 .wa-order-form-wrapper .wa-field textarea:focus { border-color:var(--teal); outline:none; } .f26 .wa-button.outlined { background:var(--sand); border:none; border-radius:8px; color:var(--ink); } .f26 .wa-button.outlined:hover { background:var(--line); } .f26 .wa-submit-button { background:var(--amber) !important; color:var(--water-900) !important; border:none !important; border-radius:var(--radius-sm) !important; font-weight:700; transition:background .18s var(--ease), transform .12s var(--ease); } .f26 .wa-submit-button:hover { background:var(--amber-deep) !important; } .f26 .wa-submit-button:active { transform:scale(.98); } .f26 .wa-order-form-wrapper a, .f26 .wa-order-cart-wrapper a { color:var(--teal); } .f26 .wa-order-cart-wrapper .wa-name a { color:var(--ink); } /* Чекаут: плитки доставки і back-link */ .f26 .s-back-link a { color:var(--teal); } .f26 .wa-type-wrapper { background:var(--sand); border:1.5px solid var(--line); border-radius:var(--radius-sm); transition:all .18s var(--ease); } .f26 .wa-type-wrapper:hover { border-color:var(--teal); } .f26 .wa-type-wrapper.is-active { background:#fff; border-color:var(--teal); } .f26 .wa-type-wrapper .wa-name a { color:var(--ink); font-weight:600; } /* Плитки доставки: перебити специфічність wa-order */ .f26 .wa-order-form-wrapper .wa-type-wrapper { background:var(--sand) !important; border-color:var(--line) !important; border-radius:var(--radius-sm) !important; } .f26 .wa-order-form-wrapper .wa-type-wrapper:hover { border-color:var(--teal) !important; } .f26 .wa-order-form-wrapper .wa-type-wrapper.is-active { background:#fff !important; border-color:var(--teal) !important; } /* Компактні теги + згортання */ .f26 .c-tags__item { padding:4px 10px; font-size:13px; border-radius:8px; } .f26 .c-tags { gap:6px; max-height:76px; overflow:hidden; transition:max-height .3s var(--ease); } .f26 .c-tags.f26-tags-open { max-height:1500px; } .f26 .f26-tags-toggle { margin-top:8px; color:var(--teal); font-weight:600; cursor:pointer; font-size:14px; display:inline-block; } .f26 .f26-tags-toggle:hover { color:var(--water-700); } /* Модельний ряд (f26-mrange) */ .f26 .f26-mrange { margin-top:26px; } .f26 .f26-mrange__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; } .f26 .f26-mrange__card { display:flex; flex-direction:column; gap:4px; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:12px; text-decoration:none; color:var(--ink); transition:all .18s var(--ease); } .f26 .f26-mrange__card:hover { border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-sm); } .f26 .f26-mrange__card.is-current { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal); } .f26 .f26-mrange__card.is-out { opacity:.55; } .f26 .f26-mrange__img img { width:100%; height:90px; object-fit:contain; } .f26 .f26-mrange__name { font-weight:700; font-size:14px; } .f26 .f26-mrange__code { font-size:12px; color:var(--ink-2); } .f26 .f26-mrange__price { font-family:var(--font-head); font-weight:800; color:var(--amber-deep); font-size:15px; } .f26 .f26-mrange__stock { font-size:12.5px; font-weight:600; } .f26 .f26-mrange__stock.ok { color:var(--ok); } .f26 .f26-mrange__stock.no { color:#c0392b; } /* Чіпи варіантів: прибрати червоні хрести теми */ .f26 .options__list a.options__disabled { background-image:none !important; } .f26 .options__list a.options__disabled::before, .f26 .options__list a.options__disabled::after, .f26 .options__disabled svg.i-remove, .f26 .options__list .options__cross, .f26 .options__list a img { display:none !important; } /* Модельний ряд: на всю ширину контейнера product__content */ .f26 .f26-mrange { width:100%; flex-basis:100%; grid-column:1 / -1; order:99; } /* Купити в 1 клік (buy1click) */ .f26 .buy1click-button { background:var(--amber) !important; color:var(--water-900) !important; border:none !important; border-radius:var(--radius-sm) !important; font-weight:700; font-family:var(--font-body) !important; transition:background .18s var(--ease), transform .12s var(--ease); } .f26 .buy1click-button:hover { background:var(--amber-deep) !important; } .f26 .buy1click-button:active { transform:scale(.98); } /* buy1click: приховати підпис вартості доставки («Безплатно») — тимчасово, до плагіна безкоштовної доставки */ .buy1click-shipping__col_rate { display:none !important; } /* Повідомити про надходження (arrived) */ .f26 .plugin_arrived-button.is-product-page { text-align:center; margin:8px 0; } .f26 .plugin_arrived-button.is-product-page a { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:11px 16px; border:1.5px solid var(--teal); border-radius:var(--radius-sm); color:var(--teal) !important; font-weight:700; font-family:var(--font-body); background:#fff; transition:background .18s var(--ease), color .18s var(--ease); } .f26 .plugin_arrived-button.is-product-page a:hover { background:var(--teal); color:#fff !important; text-decoration:none; } /* Попап «Повідомити про надходження» — під тему f26 */ .f26 .plugin_arrived-popup { background:rgba(7,23,29,.55) !important; } .f26 .plugin_arrived-box { background:#fff !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-lg, 0 24px 60px rgba(7,23,29,.28)) !important; overflow:hidden !important; border:none !important; font-family:var(--font-body) !important; } .f26 .plugin_arrived-header { background:var(--water-900) !important; color:#fff !important; font-family:var(--font-head) !important; font-weight:700 !important; padding:14px 18px !important; } .f26 .plugin_arrived-header, .f26 .plugin_arrived-header * { color:#fff !important; } .f26 .plugin_arrived-close { color:#fff !important; opacity:.85; } .f26 .plugin_arrived-close:hover { opacity:1; } .f26 .plugin_arrived-body { padding:18px !important; } .f26 .plugin_arrived-name { color:var(--ink) !important; font-weight:600 !important; } .f26 .plugin_arrived-name.required:before, .f26 .plugin_arrived-name .required { color:var(--amber-deep) !important; } .f26 .plugin_arrived-body input[type=text], .f26 .plugin_arrived-body input[type=email], .f26 .plugin_arrived-body input[type=tel], .f26 .plugin_arrived-body select { background:var(--sand) !important; border:1.5px solid var(--line) !important; border-radius:10px !important; font-family:var(--font-body) !important; color:var(--ink) !important; transition:border-color .18s !important; } .f26 .plugin_arrived-body input:focus, .f26 .plugin_arrived-body select:focus { border-color:var(--teal) !important; outline:none !important; background:#fff !important; } .f26 .plugin_arrived-value.submit input, .f26 .plugin_arrived-value.submit button, .f26 .plugin_arrived-body button[type=submit], .f26 .plugin_arrived-body input[type=submit] { background:var(--amber) !important; color:var(--water-900) !important; border:none !important; border-radius:var(--radius-sm) !important; font-weight:700 !important; font-family:var(--font-body) !important; padding:11px 20px !important; transition:background .18s !important; } .f26 .plugin_arrived-value.submit input:hover, .f26 .plugin_arrived-value.submit button:hover, .f26 .plugin_arrived-body button[type=submit]:hover { background:var(--amber-deep) !important; } .f26 .plugin_arrived-success strong { color:var(--ok) !important; } /* Попап arrived: прибрати горизонтальний скрол, вирівняти ширину */ .f26 .plugin_arrived-box { width:min(420px,92vw) !important; max-width:92vw !important; } .f26 .plugin_arrived-body { overflow-x:hidden !important; } .f26 .plugin_arrived-body .plugin_arrived-request { width:100% !important; } .f26 .plugin_arrived-field { width:100% !important; max-width:100% !important; box-sizing:border-box !important; } .f26 .plugin_arrived-body input[type=text], .f26 .plugin_arrived-body input[type=email], .f26 .plugin_arrived-body input[type=tel] { width:100% !important; box-sizing:border-box !important; } .f26 .plugin_arrived-value.submit { width:100% !important; } .f26 .plugin_arrived-value.submit input, .f26 .plugin_arrived-value.submit button { width:100% !important; } /* Вибір каналу сповіщення (arrived popup) */ .f26 .f26-arr-ch { display:flex; gap:6px; margin:2px 0 16px; flex-wrap:wrap; } .f26 .f26-arr-ch__btn { flex:1 1 auto; min-width:70px; padding:8px 10px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink-2); font-weight:600; font-size:13px; font-family:var(--font-body); cursor:pointer; transition:border-color .15s, background .15s, color .15s; } .f26 .f26-arr-ch__btn:hover { border-color:var(--teal); } .f26 .f26-arr-ch__btn.is-active { border-color:var(--teal); background:var(--teal); color:#fff; } .f26 .f26-arr-ch__btn.is-soon { opacity:.4; cursor:not-allowed; } .f26 .f26-arr-ch__btn.is-soon:hover { border-color:var(--line); } /* Попап arrived — шапка та кнопка (полірування) */ .f26 .plugin_arrived-header { display:flex !important; align-items:center !important; min-height:54px !important; padding:8px 46px 8px 18px !important; position:relative !important; } .f26 .plugin_arrived-header span { font-family:var(--font-head) !important; font-size:16.5px !important; font-weight:700 !important; line-height:1.25 !important; letter-spacing:-.01em !important; color:#fff !important; } .f26 .plugin_arrived-close { position:absolute !important; right:14px !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; } .f26 .plugin_arrived-value.submit { margin-top:4px !important; } .f26 .plugin_arrived-value.submit input, .f26 .plugin_arrived-value.submit button, .f26 .plugin_arrived-body input[type=submit] { font-size:16px !important; font-weight:800 !important; line-height:1.15 !important; letter-spacing:.01em !important; padding:15px 20px !important; height:auto !important; font-family:var(--font-body) !important; } /* Модельний ряд — картки з кнопкою «У кошик» */ .f26 .f26-mrange__hint { color:var(--ink-2); font-size:14px; margin:2px 0 14px; } .f26 .f26-mrange__card { display:flex !important; flex-direction:column; } .f26 .f26-mrange__link { display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); flex:1 1 auto; } .f26 .f26-mrange__link:hover .f26-mrange__name { color:var(--teal); } .f26 .f26-mrange__add { margin-top:10px; background:var(--amber); color:var(--water-900); border:none; border-radius:10px; padding:9px 10px; font-weight:700; font-size:14px; font-family:var(--font-body); cursor:pointer; transition:background .15s var(--ease), transform .12s var(--ease); } .f26 .f26-mrange__add:hover { background:var(--amber-deep); } .f26 .f26-mrange__add:active { transform:scale(.97); } .f26 .f26-mrange__add.is-done { background:var(--ok); color:#fff; } .f26 .f26-mrange__req { margin-top:10px; text-align:center; border:1.5px solid var(--teal); color:var(--teal); border-radius:10px; padding:8px 10px; font-weight:600; font-size:14px; text-decoration:none; transition:background .15s, color .15s; } .f26 .f26-mrange__req:hover { background:var(--teal); color:#fff; } /* Підказка «оберіть варіант» у блоці купівлі */ .f26 .f26-varprompt { display:flex; align-items:center; gap:12px; background:var(--sand); border:1.5px solid var(--amber); border-radius:var(--radius-sm); padding:11px 13px; margin:0 0 14px; } .f26 .f26-varprompt__txt { flex:1; line-height:1.3; } .f26 .f26-varprompt__txt b { display:block; color:var(--ink); font-size:14.5px; font-weight:700; } .f26 .f26-varprompt__txt span { display:block; color:var(--ink-2); font-size:12.5px; margin-top:2px; } .f26 .f26-varprompt__btn { background:var(--amber); color:var(--water-900); border:none; border-radius:10px; padding:10px 15px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap; font-family:var(--font-body); transition:background .15s; } .f26 .f26-varprompt__btn:hover { background:var(--amber-deep); } .f26 .f26-mrange.f26-flash { animation:f26flash 1.3s ease; } @keyframes f26flash { 0%,100%{box-shadow:none} 25%,55%{box-shadow:0 0 0 3px var(--amber)} } @media (prefers-reduced-motion: reduce){ .f26 .f26-mrange.f26-flash{ animation:none; } } /* Каталог: кнопка «Обрати варіант» для товарів з варіантами */ .f26 .products__choose { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; box-sizing:border-box; padding:11px 12px; background:var(--water-800); color:#fff !important; border-radius:var(--radius-sm); font-weight:700; font-size:14px; font-family:var(--font-body); text-decoration:none; transition:background .15s var(--ease); } .f26 .products__choose:hover { background:var(--water-700); } .f26 .products__choose span { transition:transform .15s; } .f26 .products__choose:hover span { transform:translateX(3px); } /* Каталог «Обрати варіант» — темно-синій (відмінність від миттєвого додавання) */ .f26 .products__choose.button, .f26 .products__choose { background:var(--water-800) !important; color:#fff !important; border:none !important; } .f26 .products__choose.button:hover, .f26 .products__choose:hover { background:var(--water-700) !important; } /* Теги категорії: сховати візуально (лишаються в HTML для пошукових систем) */ .f26 .c-tags, .f26 .f26-tags-toggle { display:none !important; } /* Тегова «показати більше» (осиротіла після приховування тегів) */ .f26 .h-yet { display:none !important; }