/* ========================================================================= GADGET-SHOP.BY — ПОЛНАЯ ПЕРЕПИСКА С НУЛЯ, НОВЫЙ ДИЗАЙН Направление: тёплый, уверенный, современный ретейл. Кремовый фон вместо серого, один яркий акцент (коралл), пилюли вместо скруглённых прямоугольников, более крупная типографика. Написано под РЕАЛЬНУЮ структуру HTML сайта. ========================================================================= */ /* ---------- 1. ТОКЕНЫ ---------- */ :root{ --bg: #FAF8F4; --surface: #FFFFFF; --surface-2: #F1EEE7; --border: #E8E3D8; --ink: #1A1A1A; --text: #2B2A28; --text-muted:#6B6660; --text-soft: #9A948A; --accent: #FF5630; --accent-600: #E6431F; --accent-tint: #FFE9E2; --ink-soft: #2E2E2E; --ink-soft-tint:#EDEDED; --success: #1F9254; --warning: #E5A100; --danger: #E1382E; --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; --shadow-xs: 0 1px 3px rgba(26,26,26,.06); --shadow-sm: 0 8px 20px rgba(26,26,26,.08); --shadow-md: 0 16px 36px rgba(26,26,26,.12); --shadow-lg: 0 30px 60px rgba(26,26,26,.18); --ease: cubic-bezier(.4,0,.2,1); --dur: .22s; --container-max: 1320px; } /* ---------- 2. RESET ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size:16px !important; } body{ margin:0; background:var(--bg); color:var(--text); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* ---------- ФИКС: ЛИПКАЯ ШАПКА НЕ РАБОТАЛА НА МОБИЛЬНОЙ ---------- Причина: overflow-x:hidden на html/body — известное ограничение CSS: если у ЛЮБОГО предка position:sticky-элемента overflow отличен от visible, "липкость" полностью перестаёт работать (шапка просто прокручивается вместе со страницей, как обычный блок). Раньше overflow-x:hidden стоял именно тут для защиты от горизонтального скролла — эту защиту нельзя повесить на .app (он тоже предок шапки, тот же эффект), поэтому просто убрана; если где-то вылезет горизонтальная прокрутка — почините точечно на том элементе. */ img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; transition:color var(--dur) var(--ease); } a:visited{ color:inherit !important; text-decoration:none !important; } a:hover,a:focus{ text-decoration:none; } ul,ol{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; cursor:pointer; background:none; border:0; } svg{ display:inline-block; vertical-align:middle; fill:currentColor; width:1em; height:1em; } svg:not([class]){ width:20px; height:20px; } svg[class^="icon-"]{ width:20px; height:20px; flex:none; } input,textarea,select,button{ font:inherit; color:inherit; } ::selection{ background:var(--accent); color:#fff; } h1,h2,h3,h4,h5,h6{ margin:0 0 .5em; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--ink); } h1{ font-size:clamp(2.4rem,3.6vw,3.8rem); } h2{ font-size:clamp(1.7rem,2.4vw,2.3rem); } h3{ font-size:clamp(1.3rem,1.7vw,1.6rem); } p{ margin:0 0 1em; color:var(--text-muted); } .eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .ui-link{ font-weight:700; color:var(--accent); } .ui-link--underline{ text-decoration:underline; text-underline-offset:3px; } .ui-link:hover{ color:var(--accent-600); } .container-fluid{ width:100%; max-width:var(--container-max) !important; margin-inline:auto; padding-inline:24px; box-sizing:border-box; } @media (max-width:767px){ .container-fluid{ padding-inline:16px; } } .app{ display:block; min-height:100vh; background:var(--bg); } .main{ display:block; overflow-x:hidden; } .footer,.site-footer{ overflow-x:hidden; } .is-xl-visible{ display:none; } .is-xl-hidden{ display:block; } @media (min-width:1200px){ .is-xl-visible{ display:block; } .is-xl-hidden{ display:none; } } /* ---------- 3. BUTTONS ---------- */ .ui-btn{ --h: 52px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--h); padding:0 26px; border:1.5px solid transparent; border-radius:var(--r-pill); font-weight:700; font-size:1rem; white-space:nowrap; background:var(--surface-2); color:var(--text); transition:transform .15s var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ui-btn svg{ width:18px; height:18px; } .ui-btn:hover{ transform:translateY(-1px); } .ui-btn:disabled{ opacity:1; cursor:not-allowed; transform:none; background:var(--surface-2) !important; color:var(--text-soft) !important; border-color:var(--border) !important; } .ui-btn--primary{ background:var(--ink); color:#fff; } .ui-btn--primary:hover{ background:var(--accent); } .ui-btn--grey{ background:var(--surface-2); color:var(--text); border-color:var(--border); } .ui-btn--white{ background:#fff; color:var(--text); border-color:var(--border); } .ui-btn--white:hover{ border-color:var(--ink); } .ui-btn--outline{ background:transparent; border-color:currentColor; } .ui-btn--dark{ background:var(--ink); color:#fff; } .ui-btn--fullwidth{ width:100%; } .ui-btn--60{ --h:58px; font-size:1.05rem; } .ui-btn--45{ --h:44px; padding:0 20px; font-size:.92rem; } .ui-btn--40,.ui-btn--38{ --h:42px; padding:0 18px; font-size:.92rem; } .ui-btn--36,.ui-btn--35{ --h:38px; padding:0 16px; font-size:.88rem; } .ui-btn--compare,.ui-btn--favorite,.ui-btn--view{ width:44px; height:44px; padding:0; border-radius:50%; background:#fff; color:var(--text-muted); border:1.5px solid var(--border); } .ui-btn--compare:hover,.ui-btn--favorite:hover,.ui-btn--view:hover{ color:var(--ink); border-color:var(--ink); } .ui-btn--compare.is-active,.ui-btn--favorite.is-active{ color:#fff; background:var(--accent); border-color:var(--accent); } /* ---------- 4. FORMS ---------- */ .ui-label{ display:block; font-weight:700; font-size:1rem; margin-bottom:8px; } .ui-input,.form-control,.ui-textarea{ width:100%; height:54px; padding:0 20px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-pill); color:var(--text); margin-bottom:14px; transition:border-color var(--dur) var(--ease); } textarea.ui-input,.ui-textarea{ height:auto; min-height:130px; padding-top:16px; border-radius:var(--r-md); resize:vertical; } .ui-input:focus{ outline:none; border-color:var(--ink); } .ui-input::placeholder{ color:var(--text-soft); } .ui-group{ display:flex; gap:10px; } .ui-group .ui-input{ margin-bottom:0; flex:1; } .ui-check__text{ display:block; font-size:.9rem; color:var(--text-soft); margin-top:8px; } .ui-number{ display:inline-flex; align-items:center; height:48px; border:1.5px solid var(--border); border-radius:var(--r-pill); overflow:hidden; background:#fff; } .ui-number__decrease,.ui-number__increase{ width:40px; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-muted); } .ui-number__decrease:hover,.ui-number__increase:hover{ color:var(--ink); background:var(--surface-2); } .ui-number__input{ width:44px; height:100%; border:0; text-align:center; background:transparent; } .ui-badge{ display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:var(--r-pill); font-size:.76rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; background:var(--ink); color:#fff; } .ui-badge--blue{ background:var(--ink-soft); } .ui-badge--red{ background:var(--accent); } /* ---------- 5. HEADER ---------- */ .header{ position:sticky; top:0; z-index:120; background:#fff; border-bottom:1px solid var(--border); } .header__mobile{ display:flex; align-items:center; gap:10px; padding:14px 0; } .header__mobile .header__logo{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; } /* Номер телефона рядом с лого в мобильной шапке (десктоп скрывает его) */ .header__mobile-phone{ display:none; align-items:center; gap:7px; font-weight:800; font-size:1rem; color:var(--ink); white-space:nowrap; margin-left:auto; } .header__mobile-phone svg{ width:18px; height:18px; color:var(--accent); flex:none; } .header__mobile-phone:hover{ color:var(--accent); } .header__logo{ display:inline-flex; align-items:center; font-weight:900; font-size:1.5rem; color:var(--ink); letter-spacing:-.02em; margin-right:auto; white-space:nowrap; text-shadow:none !important; filter:none !important; } .header__mobile .header__group{ display:flex; align-items:center; gap:6px; flex:none; margin-left:auto; } .header__nav-btn,.header__search-btn,.header__catalog-close,.header__nav-close,.header__search-close, .header__acc-btn,.header__action-btn,.header__phone-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--surface-2); color:var(--text); border:0; flex:none; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); } @media (max-width:374px){ .header__mobile .header__acc-btn,.header__mobile .header__action-btn,.header__mobile .header__phone-btn,.header__mobile .header__search-btn{ width:38px; height:38px; } } .header__nav-btn:hover,.header__search-btn:hover,.header__acc-btn:hover,.header__action-btn:hover,.header__phone-btn:hover{ background:var(--ink); color:#fff; } .header__action{ display:flex; align-items:center; gap:6px; } .header__cart-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; flex:none; } .header__cart-btn:hover{ background:var(--accent-600); } .header__cart-total,.header__cart-counter{ display:none; } .header__action-counter{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 3px; border-radius:50%; background:var(--accent); color:#fff; font-size:.65rem; font-weight:800; display:flex; align-items:center; justify-content:center; } .header__action-btn:empty{ display:none; } .header__search-offcanvas{ position:fixed; inset:0 0 auto 0; background:var(--surface); box-shadow:var(--shadow-lg); padding:20px 0; transform:translateY(-110%); transition:transform .35s var(--ease); z-index:200; } .header__search-offcanvas.is-open, body.is-search-open .header__search-offcanvas{ transform:translateY(0); } .header__search-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .header__search-title{ font-weight:800; font-size:1.2rem; } .header__search-control{ display:flex; align-items:center; gap:10px; } .header__search-input{ flex:1; height:54px; border:1.5px solid var(--border); border-radius:var(--r-pill); padding:0 22px; font-size:1rem; } .header__search-append{ width:54px; height:54px; border-radius:50%; background:var(--ink); color:#fff; flex:none; } .header__search-append:hover{ background:var(--accent); } .header__catalog-offcanvas{ position:fixed; top:0; bottom:0; left:0; width:min(360px,86vw); background:#fff; box-shadow:var(--shadow-lg); transform:translateX(-105%); transition:transform .35s var(--ease); z-index:210; overflow-y:auto; padding:20px; display:flex; flex-direction:column; } body.is-catalog-open .header__catalog-offcanvas{ transform:translateX(0); } .header__catalog-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; } .header__catalog-title{ font-weight:800; font-size:1.2rem; } .header__catalog-menu > li{ border-bottom:1px solid var(--border); } .header__catalog-link{ display:flex; align-items:center; gap:10px; padding:14px 4px; font-weight:600; color:var(--text); } .header__catalog-link:hover{ color:var(--accent); } .header__catalog-link-text{ flex:1; } .header__catalog-link-arrow{ flex:none; width:16px; height:16px; color:var(--text-soft); } /* ---------- МОБИЛЬНОЕ МЕГА-МЕНЮ: РАСКРЫВАЮЩИЕСЯ УРОВНИ КАТЕГОРИЙ БЕЗ СТИЛЕЙ ---------- .header__catalog-dropdown стилизовался только для десктопа (мега-меню с наведением). На мобильном для него не было ни display:none по умолчанию, ни показа по .is-open — все уровни категорий просто печатались друг под другом одним сплошным списком без отступов, что и выглядело "как без стилей". */ @media (max-width:1199px){ .header__catalog-menu li:has(.header__catalog-dropdown) > .header__catalog-dropdown{ display:none; } .header__catalog-menu li.is-open > .header__catalog-dropdown{ display:block; background:var(--surface-2); margin:6px -4px 6px; padding:6px 4px 6px 18px; border-radius:var(--r-md); } .header__catalog-dropdown .header__catalog-menu > li{ border-bottom:1px solid var(--border); } .header__catalog-dropdown .header__catalog-menu > li:last-child{ border-bottom:0; } .header__catalog-back{ display:flex; align-items:center; gap:8px; padding:12px 4px; font-weight:700; color:var(--text-muted); width:100%; } .header__catalog-back:hover{ color:var(--accent); } .header__catalog-back svg{ width:14px; height:14px; transform:rotate(180deg); } .header__catalog-menu li.is-open > a > .header__catalog-link-arrow{ transform:rotate(90deg); } /* ---------- ИСПРАВЛЕНО: ЛИШНИЙ УРОВЕНЬ «КАТАЛОГ» НА МОБИЛЬНОМ ---------- В реальной вёрстке первый пункт списка при открытии панели — это служебная обёртка
  • Каталог
    ...здесь ВСЕ настоящие категории...
    • . То есть по нажатию кнопки "Каталог" открывается панель с ОДНИМ пунктом "Каталог", и только повторным тапом по нему показываются настоящие категории — отсюда и "открывать по несколько раз". Эта обёртка нужна только в другом сценарии (когда отключено фиксированное меню в футере — так написано в самом коде комментарием), в вашем случае она лишняя. Скрываем её и сразу показываем настоящий список категорий. */ .header__catalog-body > .header__catalog-menu > li > a{ display:none; } .header__catalog-body > .header__catalog-menu > li > .header__catalog-dropdown{ display:block !important; position:static; background:none; margin:0; padding:0; border-radius:0; } .header__catalog-body > .header__catalog-menu > li > .header__catalog-dropdown > .header__catalog-back{ display:none; } } /* ========================================================================= СТРАНИЦЫ ВХОДА/РЕГИСТРАЦИИ/ВОССТАНОВЛЕНИЯ ПАРОЛЯ (.auth*) — были вообще без CSS, отсюда голая нестилизованная вёрстка на скриншоте. ========================================================================= */ .auth{ padding:48px 0 64px; } .auth .container-fluid{ max-width:640px; } .auth__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; flex-wrap:wrap; } .auth__title{ font-size:2rem; font-weight:900; margin:0; } .auth__control{ display:flex; align-items:center; gap:12px; font-size:.92rem; color:var(--text-muted); } .auth__body{ background:var(--surface-2); border-radius:var(--r-lg); padding:32px; } .auth__form .ui-fieldset{ border:0; margin:0 0 24px; padding:0; } .auth__form .ui-fieldset:last-child{ margin-bottom:0; } .auth__form .ui-fieldset > p{ color:var(--text-muted); margin:0 0 16px; } .auth__form hr{ border:0; border-top:1px solid var(--border); margin:0 0 24px; } .auth__form .row{ display:flex; gap:16px; flex-wrap:wrap; } .auth__form .row > .col-auto{ flex:1 1 220px; } .auth__form .row > [class^="col-6"]{ flex:1 1 calc(50% - 8px); } .auth__form .ui-label{ display:block; font-weight:700; font-size:.88rem; margin:0 0 8px; } .auth__form .ui-input,.auth__form select.ui-input{ width:100%; height:52px; border:1.5px solid var(--border); border-radius:var(--r-sm); padding:0 16px; font-family:inherit; font-size:.95rem; background:#fff; } .auth__form .ui-input:focus{ outline:none; border-color:var(--accent); } .auth__form .ui-fieldset + .ui-fieldset{ padding-top:0; } .auth__form fieldset[id]{ margin-bottom:24px; } .header__sticky{ position:fixed; left:0; right:0; bottom:0; z-index:150; display:flex; background:#fff; border-top:1px solid var(--border); box-shadow:0 -8px 24px rgba(26,26,26,.08); } @media (min-width:1200px){ .header__sticky{ display:none; } } .header__sticky-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 2px 8px; font-size:.72rem; font-weight:700; color:var(--text-muted); position:relative; } .header__sticky-icon svg{ width:22px; height:22px; } .header__sticky-counter{ position:absolute; top:2px; right:22%; min-width:16px; height:16px; padding:0 3px; border-radius:50%; background:var(--accent); color:#fff; font-size:.6rem; font-weight:800; display:flex; align-items:center; justify-content:center; } .chat,.scroll-to-top{ position:fixed; right:20px; z-index:140; } .scroll-to-top{ bottom:24px; width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; border:1px solid var(--border); } .popup__title{ display:block; font-size:1.4rem; font-weight:800; margin-bottom:18px; } .popup__form{ display:flex; flex-direction:column; } .popup__link{ margin:-6px 0 16px; text-align:right; } .footer__nav-menu li,.footer__nav ul{ list-style:none; } /* ---------- 6. PHONE MODAL ---------- */ .phone-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:300; } .phone-modal[data-open="true"]{ display:flex; } .phone-modal__overlay{ position:absolute; inset:0; background:rgba(26,26,26,.55); } .phone-modal__panel{ position:relative; z-index:2; width:calc(100% - 40px); max-width:360px; background:#fff; border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-lg); } .phone-modal__title{ margin:0 0 16px; text-align:center; } .phone-modal__body{ display:flex; flex-direction:column; gap:10px; } .phone-modal__tel{ display:block; padding:14px; border-radius:var(--r-pill); background:var(--surface-2); font-weight:800; text-align:center; font-size:1.1rem; } .phone-modal__tel:hover{ background:var(--ink); color:#fff; } .phone-modal__close{ position:absolute; right:14px; top:10px; font-size:24px; color:var(--text-soft); } /* ---------- 7. МИНИ-КОРЗИНА ---------- */ .header__cart-overlay{ position:fixed; inset:0; background:rgba(26,26,26,.5); display:none; z-index:190; } .header__cart-load{ position:fixed; top:0; right:0; bottom:0; width:min(420px,90vw); background:#fff; transform:translateX(105%); transition:transform .35s var(--ease); z-index:200; box-shadow:var(--shadow-lg); } html.is-cart-open .header__cart-overlay{ display:block; } html.is-cart-open .header__cart-load{ transform:translateX(0); } .header__cart-scrollbar{ height:100%; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; } .header__cart-close{ position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; z-index:2; } .header__cart-head{ display:flex; align-items:center; gap:14px; padding:24px 60px 18px 24px; border-bottom:1px solid var(--border); } .header__cart-title{ font-weight:800; font-size:1.25rem; } .header__cart-clear{ display:flex; align-items:center; gap:6px; margin-left:auto; color:var(--text-soft); font-size:.9rem; font-weight:600; } .header__cart-clear:hover{ color:var(--danger); } .header__cart-body{ flex:1; padding:8px 24px 24px; color:var(--text-muted); } .header__cart-body:not(:has(.header__cart-list)){ display:flex; align-items:center; justify-content:center; min-height:240px; text-align:center; font-weight:700; } .header__cart-list > li{ border-bottom:1px solid var(--border); padding:18px 0; } .header__cart-item{ position:relative; display:grid; gap:8px 12px; align-items:start; grid-template-columns:68px minmax(0,1fr); grid-template-areas: "image desc" "image number"; padding-right:32px; } .header__cart-item-image{ grid-area:image; width:68px; height:68px; border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); } .header__cart-item-image img{ width:100%; height:100%; object-fit:contain; padding:6px; } .header__cart-item-desc{ grid-area:desc; display:flex; flex-direction:column; gap:4px; min-width:0; } .header__cart-item-id{ font-size:.76rem; color:var(--text-soft); overflow-wrap:anywhere; } .header__cart-item-title{ font-weight:700; font-size:.95rem; line-height:1.35; overflow-wrap:anywhere; } .header__cart-item-title:hover{ color:var(--accent); } /* Количество и цена в одном ряду: количество слева, цена прижата вправо */ .header__cart-item-number{ grid-area:number; margin:0; display:flex; align-items:center; } .header__cart-item-number .ui-number{ height:40px; } .header__cart-item-number .ui-number__input{ width:40px; } .header__cart-item-number .ui-number__decrease,.header__cart-item-number .ui-number__increase{ width:36px; } .header__cart-item-price{ grid-area:number; justify-self:end; align-self:center; text-align:right; display:flex; flex-direction:column; gap:2px; white-space:nowrap; pointer-events:none; } .header__cart-item-price-current{ font-weight:800; } .header__cart-item-price-piece{ font-size:.75rem; color:var(--text-soft); } .header__cart-item-action{ position:absolute; top:0; right:0; } .header__cart-item-action-toggle{ width:30px; height:30px; border-radius:50%; color:var(--text-soft); display:flex; align-items:center; justify-content:center; } .header__cart-item-action-toggle:hover{ background:var(--surface-2); } .header__cart-item-action-offcanvas{ display:none; position:absolute; top:100%; right:0; background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow-md); z-index:5; min-width:160px; padding:6px; } .header__cart-item-action.is-open .header__cart-item-action-offcanvas{ display:block; } .header__cart-item-action-link{ display:block; width:100%; text-align:left; padding:8px 12px; border-radius:var(--r-pill); font-size:.88rem; font-weight:600; } .header__cart-item-action-link:hover{ background:var(--surface-2); color:var(--accent); } .header__cart-data-title{ display:block; font-weight:700; font-size:.9rem; color:var(--text-muted); margin:12px 0 10px; } .header__cart-data-table{ width:100%; border-collapse:collapse; margin-bottom:18px; } .header__cart-data-table td{ padding:9px 0; font-size:.94rem; border-bottom:1px dashed var(--border); } .header__cart-data-table tfoot td{ border-bottom:0; font-weight:800; font-size:1.15rem; padding-top:14px; } .header__cart-data-table .text-right{ text-align:right; } .header__cart-data-action{ margin-bottom:14px; } .header__cart-data-quick-text{ font-size:.78rem; color:var(--text-soft); margin:10px 0 0; text-align:center; } /* === МОДАЛКА КОРЗИНЫ: раскладка панели + логика sticky-кнопок === Панель (.header__cart-load) — колонка на всю высоту: прокручиваемая область растёт, липкий низ прижат. Убираем горизонтальный вылет от bootstrap-.row внутри узкой панели и дублирование кнопок. */ .header__cart-load{ overflow:hidden; } .header__cart-offcanvas{ display:flex; flex-direction:column; height:100%; min-height:0; } .header__cart-scrollbar{ flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; } .header__cart-body, .header__cart-data, .header__cart-data-quick{ max-width:100%; } .header__cart-data-quick-action .row, .header__cart-sticky .row{ margin:0 !important; display:flex; gap:10px; flex-wrap:nowrap; } .header__cart-data-quick-action .col-6, .header__cart-data-quick-action [class*="col-"], .header__cart-sticky .col-6, .header__cart-sticky [class*="col-"]{ padding:0 !important; flex:1 1 0; max-width:50%; min-width:0; } .header__cart-data-quick-action .ui-btn, .header__cart-sticky .ui-btn{ width:100%; min-width:0; padding-left:8px; padding-right:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.92rem; } /* Липкий низ: оформлен и скрыт по умолчанию. JS ставит html.is-cart-sticky, пока список НЕ доскроллен до конца — тогда показываем липкие кнопки, а дублирующий блок кнопок в теле прячем (иначе кнопки дублировались). */ .header__cart-sticky{ flex:none; padding:14px 24px; border-top:1px solid var(--border); background:#fff; box-shadow:0 -6px 20px rgba(26,26,26,.06); display:none; } html.is-cart-sticky .header__cart-sticky{ display:block; } html.is-cart-sticky .header__cart-data-quick{ display:none; } /* Строка товара: цена не налезает на название, кнопка-меню (три точки) не перекрывает цену. */ .header__cart-item{ padding-right:34px; } .header__cart-item-title{ overflow-wrap:anywhere; } .header__cart-item-price{ padding-right:2px; } .header__cart-item-price-piece{ white-space:normal; } /* ---------- 8. ДЕСКТОПНАЯ ШАПКА ---------- */ .header__desktop{ display:none; } @media (min-width:1200px){ .header__mobile{ display:none; } .header__desktop{ display:block; } .header__row--01{ display:flex; align-items:center; gap:24px; padding:10px 0; font-size:.95rem; color:var(--text-muted); border-bottom:1px solid var(--border); } .header__group--info_call{ display:flex; align-items:center; gap:24px; width:100%; } .header__info-menu{ display:flex; gap:20px; } .header__info-menu > li{ position:relative; } .header__info-link{ cursor:pointer; font-weight:600; } .header__info-link:hover{ color:var(--accent); } .header__info-offcanvas{ display:none; position:absolute; top:100%; left:0; min-width:220px; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:10px; z-index:60; margin-top:8px; } .header__info-menu > li:hover > .header__info-offcanvas{ display:block; } .header__info-sublink{ display:block; padding:8px 12px; border-radius:var(--r-pill); font-size:.95rem; white-space:nowrap; color:var(--text); } .header__info-sublink:hover{ background:var(--surface-2); color:var(--accent); } .header__call{ position:relative; margin-left:auto; } .header__call-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--text); white-space:nowrap; } .header__call-btn mark{ background:none; color:var(--text-soft); font-weight:600; } .header__call:hover > .header__call-offcanvas{ display:block; } .header__call-offcanvas{ display:none; position:absolute; top:100%; right:0; min-width:220px; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:10px; z-index:60; margin-top:8px; } .header__call-link{ display:block; padding:8px 12px; border-radius:var(--r-pill); font-weight:700; white-space:nowrap; color:var(--text); } .header__call-link:hover{ background:var(--surface-2); color:var(--accent); } .header__row--02{ display:flex; align-items:center; gap:20px; padding:18px 0; flex-wrap:nowrap; } .header__row--02 .header__logo{ font-weight:900; font-size:1.6rem; flex:none; } .header__row--02 .header__catalog--fullwidth{ flex:none; } .header__search{ position:relative; } .header__row--02 .header__search{ flex:1 1 auto; max-width:640px; min-width:0; } .header__row--02 .header__search-control{ display:flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--r-pill); overflow:hidden; } .header__row--02 .header__search-input{ flex:1; height:52px; border:0; padding:0 22px; min-width:0; } .header__row--02 .header__search-input:focus{ outline:none; } .header__row--02 .header__search-btn{ height:52px; width:52px; flex:none; padding:0; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin:0 -1px 0 0; border-radius:0 var(--r-pill) var(--r-pill) 0; } .header__row--02 .header__search-btn:hover{ background:var(--accent-600); } .header__row--02 .header__group--acc_action_cart{ display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; white-space:nowrap; } .header__catalog-btn{ display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 24px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-weight:800; white-space:nowrap; } .header__catalog-btn:hover{ background:var(--accent); } .header__catalog--fullwidth{ position:relative; } .header__catalog--fullwidth::before{ content:""; position:fixed; inset:0; top:100%; background:rgba(26,26,26,.15); opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease); z-index:55; } .header__catalog--fullwidth:hover::before,.header__catalog--fullwidth.is-open::before{ opacity:1; } .header__catalog--fullwidth .header__catalog-offcanvas{ position:absolute; top:calc(100% + 12px); left:0; bottom:auto; width:auto; min-width:860px; height:auto; max-height:min(640px,80vh); transform:none; box-shadow:var(--shadow-lg); border-radius:var(--r-lg); display:none; flex-direction:row; align-items:stretch; padding:0; z-index:60; overflow:hidden; border:1px solid var(--border); background:#fff; } .header__catalog--fullwidth:hover .header__catalog-offcanvas,.header__catalog--fullwidth.is-open .header__catalog-offcanvas{ display:flex; } .header__catalog-aside{ flex:0 0 290px; background:var(--surface-2); border-right:1px solid var(--border); padding:16px; overflow-y:auto; max-height:min(640px,80vh); scrollbar-width:thin; } .header__catalog-aside::-webkit-scrollbar{ width:6px; } .header__catalog-aside::-webkit-scrollbar-thumb{ background:var(--border); border-radius:var(--r-pill); } .header__catalog-aside .header__catalog-menu > li{ border-bottom:0; margin-bottom:3px; } .header__catalog-aside .header__catalog-link{ border-radius:var(--r-pill); padding:12px 16px; font-weight:600; font-size:.95rem; color:var(--text); transition:background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .header__catalog-aside .header__catalog-menu > li:hover > .header__catalog-link, .header__catalog-aside .header__catalog-link.is-active{ background:#fff; color:var(--accent); font-weight:700; box-shadow:var(--shadow-xs); } .header__catalog-main{ flex:1; padding:32px 36px; overflow-y:auto; max-height:min(640px,80vh); min-width:0; scrollbar-width:thin; } .header__catalog-main::-webkit-scrollbar{ width:6px; } .header__catalog-main::-webkit-scrollbar-thumb{ background:var(--border); border-radius:var(--r-pill); } .header__catalog-main .header__catalog-dropdown{ display:none; } .header__catalog-main .header__catalog-dropdown.is-active{ display:block; } /* Раньше при открытии меню, пока не наведёшься на категорию слева, справа была просто пустая белая коробка шириной 820px (min-width родителя). Теперь показываем подсказку вместо пустоты. */ .header__catalog-main:not(:has(.header__catalog-dropdown.is-active))::before{ content:"Наведите на категорию слева, чтобы увидеть бренды"; display:flex; align-items:center; justify-content:center; height:100%; min-height:220px; color:var(--text-soft); font-size:.92rem; text-align:center; padding:20px; } /* ИСПРАВЛЕНО: реальная колонка брендов (.col-4) получает ширину через ИНЛАЙН-стиль от PHP (flex:0 0 33%/50%/100% в зависимости от количества групп) — это не текстовый поток, поэтому CSS-многоколоночная вёрстка (column-width) тут ничего не делает, она просто игнорировалась. Стили ниже работают ПОВЕРХ уже готовой инлайн-сетки, просто оформление. */ .header__catalog-main .header__catalog-title{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:.98rem; margin:0 0 12px; color:var(--ink); } .header__catalog-main .header__catalog-title::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; } .header__catalog-main .header__catalog-title ~ .header__catalog-title{ margin-top:28px; } .header__catalog-main .header__catalog-title .header__catalog-link{ display:inline; padding:0; border-radius:0; background:none; border:0; font-weight:800; font-size:.98rem; color:var(--ink); } .header__catalog-main .header__catalog-title .header__catalog-link:hover{ color:var(--accent); transform:none; box-shadow:none; } .header__catalog-main .header__catalog-menu{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; } .header__catalog-main .header__catalog-menu > li{ margin:0; } .header__catalog-main .header__catalog-link{ display:inline-flex; align-items:center; padding:9px 16px; border-radius:var(--r-pill); font-weight:600; font-size:.87rem; color:var(--text); background:var(--surface-2); border:1px solid transparent; transition:all var(--dur) var(--ease); } .header__catalog-main .header__catalog-link:hover{ background:#fff; border-color:var(--accent); color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-xs); } .header__catalog-main .header__catalog-link--more{ font-weight:700; color:var(--accent); background:var(--accent-tint); } .header__catalog-main .header__catalog-link--more:hover{ background:var(--accent); color:#fff; border-color:var(--accent); } .header__catalog-main .row{ row-gap:0; } .header__catalog-main .col-4{ margin-bottom:4px; } } /* ---------- 9. HERO ---------- */ .hero{ position:relative; overflow:hidden; border-radius:var(--r-xl); margin-top:24px; min-height:360px; display:flex; align-items:center; padding:64px 56px; color:#fff; background:var(--ink); } .hero::after{ content:""; position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:46%; aspect-ratio:1; border:1px solid rgba(255,255,255,.14); border-radius:50%; } .hero::before{ content:""; position:absolute; right:6%; top:50%; transform:translateY(-50%); width:30%; aspect-ratio:1; border:1px solid rgba(255,255,255,.14); border-radius:50%; z-index:0; } .hero__content{ position:relative; z-index:2; max-width:640px; width:100%; min-width:0; } .hero__eyebrow{ display:inline-flex; align-items:center; padding:7px 18px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:20px; color:#fff; } .hero__title{ font-size:clamp(2.2rem,4vw,3.4rem); margin-bottom:18px; color:#fff; } .hero__text{ color:rgba(255,255,255,.85); max-width:480px; margin-bottom:30px; font-size:1.08rem; } .hero__actions{ display:flex; gap:14px; flex-wrap:wrap; } .hero__actions .ui-btn--primary{ background:#fff; color:var(--ink) !important; } .hero__actions .ui-btn--primary:hover{ background:var(--accent); color:#fff; } .hero__actions .ui-btn--white{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; } .hero__actions .ui-btn--white:hover{ border-color:#fff; } @media (max-width:767px){ .hero{ padding:32px 20px; min-height:0; } .hero__actions .ui-btn{ width:100%; } } .usp{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:20px; } .usp__item{ display:flex; align-items:center; gap:14px; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); } .usp__icon{ flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent-tint); color:var(--accent); } .usp__title{ font-weight:800; font-size:1.02rem; margin-bottom:2px; } .usp__text{ font-size:.92rem; color:var(--text-soft); margin:0; } @media (max-width:991px){ .usp{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:575px){ .usp{ grid-template-columns:1fr; } } @media (max-width:575px){ .usp{ grid-template-columns:1fr; } } /* ---------- 10. КАТЕГОРИИ: мозаика, сразу после героя, без заголовка ---------- */ .categories{ padding:0 0 40px; margin:0 auto; max-width:var(--container-max); } .categories__title{ display:none; } .categories__swiper .swiper-wrapper{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:210px; grid-auto-flow:dense; gap:18px; } .categories__item{ width:100%; height:100%; } .categories__item:nth-child(6n+1){ grid-column:span 2; grid-row:span 2; } .categories__item:nth-child(6n+4){ grid-row:span 2; } .categories__item-in{ position:relative; border-radius:var(--r-lg); overflow:hidden; height:100%; width:100%; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .categories__item-in:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .categories__item-back{ position:absolute; inset:0; } .categories__item-image{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .categories__item-image img{ width:100%; height:100%; object-fit:contain; padding:18px; } .categories__item-front{ position:relative; z-index:2; padding:16px; background:linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.08) 55%, transparent 100%); } .categories__item-title{ display:block; font-weight:800; color:#fff; font-size:1.05rem; text-shadow:0 1px 6px rgba(0,0,0,.35); } .categories__item:nth-child(6n+1) .categories__item-title{ font-size:1.4rem; } .categories__item-menu{ display:none; } @media (max-width:900px){ .categories__swiper .swiper-wrapper{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:170px; } } @media (max-width:575px){ .categories__swiper .swiper-wrapper{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:160px; } .categories__item:nth-child(6n+1){ grid-column:span 2; grid-row:span 1; } } /* ---------- 11. МОБИЛЬНЫЙ ТЕЛЕФОННЫЙ БАННЕР (ok-banner-top) ---------- */ .ok-banner-top{ border-radius:var(--r-md); margin:16px 0; overflow:hidden; } .ok-banner-top h2{ margin:0; padding:14px; font-size:1rem; font-weight:700; } .ok-banner-top a{ font-weight:700; } /* ---------- 12. СКРЫВАЕМ АДМИН-МОДУЛИ ПО ЗАПРОСУ ---------- */ .intro{ display:none !important; } .partners{ display:none !important; } /* ---------- 13. ТОВАРЫ ---------- */ .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 24px; } .products-featured{ padding:44px 0; } .products-featured__title,.categories__title{ display:flex; align-items:center; gap:14px; margin-bottom:24px; font-size:1.6rem; } .products-featured__title::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; } .products-featured__filter{ display:flex; gap:10px; flex-wrap:wrap; } .products-featured__content{ display:none; } .products-featured__content.is-active{ display:block; } .products__list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:0; margin:0; } .products__list > li{ height:100%; list-style:none; } @media (max-width:1199px){ .products__list{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:767px){ .products__list{ grid-template-columns:1fr; } } @media (max-width:420px){ .products__list{ gap:12px; } } .products__item{ height:100%; } .products__item-in{ position:relative; height:100%; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .products__item-in:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; } .products__item-topleft{ position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; z-index:2; } .products__item-buttons{ position:absolute; top:14px; right:14px; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateX(6px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index:3; } .products__item-in:hover .products__item-buttons{ opacity:1; transform:none; } .products__item-gallery,.products__item-image{ display:block; position:relative; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); aspect-ratio:1/1; margin-bottom:14px; } .products__item-image img{ width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .35s var(--ease); } .products__item-in:hover .products__item-image img{ transform:scale(1.06); } .products__item-pagination{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:4px; } .products__item-bullet{ width:5px; height:5px; border-radius:50%; background:rgba(26,26,26,.18); } .products__item-bullet.is-active{ background:var(--ink); width:14px; border-radius:var(--r-pill); } .products__item-status{ font-size:.85rem; font-weight:700; margin-bottom:6px; display:block; } .products__item-status--true{ color:var(--success); } .products__item-status--false{ color:var(--danger); } .products__item-id{ display:block; font-size:.82rem; color:var(--text-soft); } .products__item-title{ display:block; font-weight:700; font-size:1.02rem; margin:4px 0 8px; line-height:1.35; } .products__item-title:hover{ color:var(--accent); } .products__item-price{ margin-top:auto; font-weight:800; font-size:1.15rem; } .products__item-action{ margin-top:12px; } .ui-add-to-cart{ display:flex; align-items:center; gap:8px; } .ui-add-to-cart .ui-btn--primary{ flex:1; width:auto; height:46px; padding:0 14px; font-size:.92rem; min-width:0; } .ui-add-to-cart.is-active .ui-btn--primary{ display:none; } .ui-add-to-cart .ui-number{ display:none; height:46px; flex:1; } .ui-add-to-cart.is-active .ui-number{ display:inline-flex; } .ui-add-to-cart .ui-btn--view{ flex:none; width:46px; height:46px; } /* ---------- 14. БАННЕРЫ: реальный Swiper, но с защитой от пустого содержимого ---------- */ .banners{ padding:0; } .banners:has(.swiper-wrapper:empty){ display:none; } .banners .swiper-slide{ border-radius:var(--r-lg); overflow:hidden; } .swiper-control{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; } .swiper-prev,.swiper-next{ width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); border:1px solid var(--border); } /* ---------- 15. ПОДПИСКА ---------- */ .subsc{ padding:40px 0; } .subsc__wrapper{ background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:44px; } .subsc .ui-label{ color:#fff; font-size:1.3rem; } .subsc .ui-caption{ color:rgba(255,255,255,.65); } .subsc .ui-input{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); color:#fff; } .subsc .ui-input::placeholder{ color:rgba(255,255,255,.5); } .subsc .ui-btn--primary{ background:var(--accent); } .subsc .ui-btn--primary:hover{ background:var(--accent-600); } .subsc__form .ui-group{ max-width:520px; } /* ---------- 16. ОБЫЧНЫЙ ТЕКСТОВЫЙ АДМИН-БЛОК (перенесён в самый низ через JS в home.twig) ---------- */ .main > div:last-child{ width:100%; max-width:var(--container-max); margin:24px auto; padding-inline:24px; box-sizing:border-box; } .main > div:last-child > p:only-child{ margin:0; padding:24px 28px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); color:var(--text-muted); font-size:1rem; line-height:1.75; } @media (max-width:767px){ .main > div:last-child{ padding-inline:16px; } } /* ---------- 17. PROMO (новый блок) ---------- */ /* ---------- 17. PROMO (переделано — фикс ширины колонок + больше визуального веса) ---------- */ .promo{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); grid-template-rows:repeat(2,auto); gap:20px; margin:24px auto 0; max-width:var(--container-max); } .promo__card{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:36px; display:flex; flex-direction:column; gap:12px; justify-content:center; } .promo__card--main{ grid-row:1 / span 2; background:var(--ink); color:#fff; } .promo__card--main::before{ content:""; position:absolute; right:-15%; bottom:-25%; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(255,86,48,.35),transparent 70%); } .promo__card--main .eyebrow{ color:var(--accent); } .promo__card--main h2{ font-size:1.9rem; margin:8px 0 6px; color:#fff; position:relative; z-index:1; } .promo__card--main p{ max-width:420px; color:rgba(255,255,255,.65); position:relative; z-index:1; } .promo__card--main .ui-btn{ align-self:flex-start; margin-top:10px; background:var(--accent); color:#fff; position:relative; z-index:1; } .promo__card--main .ui-btn:hover{ background:var(--accent-600); } .promo__card--side{ min-height:140px; background:var(--surface); border:1.5px solid var(--border); } .promo__card--side .eyebrow{ color:var(--accent); } .promo__card--side h3{ margin:4px 0; font-size:1.25rem; } .promo__card--side::before{ content:""; position:absolute; top:14px; right:18px; font-size:2.4rem; font-weight:900; color:var(--border); } .promo__card--dark::before{ content:"%"; } .promo__card--accent::before{ content:"🚚"; font-size:1.8rem; opacity:.4; } @media (max-width:900px){ .promo{ grid-template-columns:1fr; grid-template-rows:auto; } .promo__card--main{ grid-row:auto; } } /* ---------- 17b. РАЗДЕЛИТЕЛЬ МЕЖДУ ЛЕНТАМИ ТОВАРОВ ---------- */ .split-promo{ margin:36px auto; max-width:var(--container-max); border-radius:var(--r-lg); overflow:hidden; position:relative; background:var(--ink); color:#fff; padding:36px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .split-promo::before{ content:""; position:absolute; left:-6%; top:-60%; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(255,86,48,.3),transparent 70%); } .split-promo__text{ position:relative; z-index:1; } .split-promo__text .eyebrow{ color:var(--accent); } .split-promo__text h3{ color:#fff; margin:6px 0 0; font-size:1.4rem; } .split-promo .ui-btn{ position:relative; z-index:1; background:var(--accent); color:#fff; flex:none; } .split-promo .ui-btn:hover{ background:var(--accent-600); } /* ---------- 18. О НАС (переделано полностью) ---------- */ .about{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--ink); color:#fff; padding:56px; margin:24px auto 0; max-width:var(--container-max); display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; } .about::before{ content:""; position:absolute; left:-10%; bottom:-30%; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(255,86,48,.28),transparent 70%); } .about__text{ position:relative; z-index:1; } .about__text .eyebrow{ color:var(--accent); } .about__text h2{ color:#fff; margin-top:14px; } .about__text p{ font-size:1.05rem; max-width:520px; color:rgba(255,255,255,.65); } .about__list{ margin-top:20px; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; } .about__list li{ position:relative; padding-left:34px; font-weight:600; color:#fff; } .about__list li::before{ content:"✓"; position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font-size:.7rem; display:flex; align-items:center; justify-content:center; } .about__stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; position:relative; z-index:1; } @media (max-width:575px){ .about__stats{ grid-template-columns:1fr; } } .about__stat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:26px 20px; } .about__stat-num{ display:block; font-size:2.1rem; font-weight:900; color:#fff; margin-bottom:6px; } .about__stat-label{ display:block; color:rgba(255,255,255,.55); font-size:.95rem; } @media (max-width:900px){ .about{ grid-template-columns:1fr; gap:28px; padding:36px 24px; } } /* ---------- 19. ОТЗЫВЫ (переделано — крупнее, с кавычками) ---------- */ .reviews{ padding:56px 0; } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 28px; } .section-head h2{ display:flex; align-items:center; gap:12px; } .section-head h2::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; } .reviews__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .reviews__card{ position:relative; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:30px 28px 28px; display:flex; flex-direction:column; gap:14px; } .reviews__card::before{ content:"\201C"; position:absolute; top:12px; right:22px; font-size:3.4rem; font-weight:900; color:var(--accent-tint); line-height:1; font-family:Georgia,serif; } .reviews__top{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; } .reviews__avatar{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--ink); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.92rem; } .reviews__author{ display:block; font-weight:800; } .reviews__stars{ color:var(--accent); letter-spacing:2px; font-size:.9rem; } .reviews__text{ color:var(--text-muted); font-size:.98rem; line-height:1.6; margin:0; position:relative; z-index:1; } @media (max-width:900px){ .reviews__grid{ grid-template-columns:1fr; } } /* ---------- 20. НОВЫЙ БЛОК: КАК ЭТО РАБОТАЕТ ---------- */ .steps{ padding:24px 0 56px; margin:0 auto; max-width:var(--container-max); } .steps__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:28px; } .steps__item{ position:relative; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:28px 24px; } .steps__num{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--accent); font-weight:900; font-size:1.1rem; margin-bottom:16px; } .steps__item h3{ font-size:1.1rem; margin-bottom:6px; } .steps__item p{ font-size:.92rem; margin:0; } .steps__item:not(:last-child)::after{ content:"→"; position:absolute; top:50%; right:-24px; transform:translateY(-50%); color:var(--border); font-size:1.4rem; font-weight:900; } @media (max-width:991px){ .steps__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .steps__item::after{ display:none; } } @media (max-width:575px){ .steps__grid{ grid-template-columns:1fr; } } /* ---------- 20. ФУТЕР ---------- */ .footer{ margin-top:24px; padding-top:56px; color:#C9C6C1; background:var(--ink); } .footer a{ color:#C9C6C1; } .footer__logo{ display:inline-block; font-weight:900; font-size:1.4rem; color:#fff; margin-bottom:14px; } .footer__copyright{ color:#8B887F; font-size:.92rem; } .footer__nav-title{ display:block; color:#fff; font-weight:800; margin-bottom:14px; font-size:1rem; } .footer__nav-menu li{ margin-bottom:10px; } .footer__nav-link{ font-size:.96rem; } .footer__nav-link:hover{ color:#fff; } .footer__support-title{ display:block; color:#fff; font-weight:800; margin-bottom:14px; } .footer__support-phones li{ margin-bottom:8px; } .footer__support-link{ font-weight:700; } .footer__support-link:hover{ color:#fff; } .footer__support-dl dt{ color:#fff; font-weight:800; margin:14px 0 8px; } .footer__support-dl dd{ margin:0; } .footer__subsc{ padding:28px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); margin-top:32px; } .footer__subsc .ui-label{ color:#fff; } .footer__subsc .ui-input{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff; margin-bottom:0; } .footer__subsc .ui-input::placeholder{ color:#8B887F; } .footer__subsc .ui-check__text{ color:#8B887F; } .footer__subsc .ui-btn--primary{ background:var(--accent); } .footer__subsc .ui-btn--primary:hover{ background:var(--accent-600); } .footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding:22px 0; } /* ---------- 23. CUSTOM RESPONSIVE GRID (theme uses Bootstrap-5-style col-* classes, but bootstrap.min.css loaded is v3.3.5 which has none of them — this grid is required for ANY multi-column layout: footer, intro banners, header rows, categories, etc.) ---------- */ /* The theme supplies its own Bootstrap-5-like grid while the storefront may load Bootstrap 3. A column gap in addition to percentage column widths makes 50% + 50% + gap exceed the row width and forces the second column on to the next line. Use gutters (padding) instead of flex gap. */ .row{ display:flex; flex-wrap:wrap; gap:0; margin-left:-12px; margin-right:-12px; } .row > [class^="col-"],.row > [class*=" col-"]{ padding-left:12px; padding-right:12px; min-width:0; } .row > *{ box-sizing:border-box; width:100%; } .no-gutters{ margin-left:0; margin-right:0; } .no-gutters > *{ padding-left:0; padding-right:0; } .align-items-center{ align-items:center; } .align-items-start{ align-items:flex-start; } .align-items-end{ align-items:flex-end; } .justify-content-center{ justify-content:center; } .justify-content-between{ justify-content:space-between; } .justify-content-end{ justify-content:flex-end; } .col{ flex:1 0 0%; max-width:100%; } .col-auto{ flex:0 0 auto; width:auto; max-width:100%; } .col-1{ flex:0 0 auto; width:8.333333%; max-width:8.333333%; } .col-2{ flex:0 0 auto; width:16.666667%; max-width:16.666667%; } .col-3{ flex:0 0 auto; width:25.0%; max-width:25.0%; } .col-4{ flex:0 0 auto; width:33.333333%; max-width:33.333333%; } .col-5{ flex:0 0 auto; width:41.666667%; max-width:41.666667%; } .col-6{ flex:0 0 auto; width:50.0%; max-width:50.0%; } .col-7{ flex:0 0 auto; width:58.333333%; max-width:58.333333%; } .col-8{ flex:0 0 auto; width:66.666667%; max-width:66.666667%; } .col-9{ flex:0 0 auto; width:75.0%; max-width:75.0%; } .col-10{ flex:0 0 auto; width:83.333333%; max-width:83.333333%; } .col-11{ flex:0 0 auto; width:91.666667%; max-width:91.666667%; } .col-12{ flex:0 0 auto; width:100.0%; max-width:100.0%; } .offset-1{ margin-left:8.333333%; } .offset-2{ margin-left:16.666667%; } .offset-3{ margin-left:25.0%; } .offset-4{ margin-left:33.333333%; } .offset-5{ margin-left:41.666667%; } .offset-6{ margin-left:50.0%; } .offset-7{ margin-left:58.333333%; } .offset-8{ margin-left:66.666667%; } .offset-9{ margin-left:75.0%; } .offset-10{ margin-left:83.333333%; } .offset-11{ margin-left:91.666667%; } @media (min-width:576px){ .col-sm{ flex:1 0 0%; max-width:100%; } .col-sm-auto{ flex:0 0 auto; width:auto; max-width:100%; } .col-sm-1{ flex:0 0 auto; width:8.333333%; max-width:8.333333%; } .col-sm-2{ flex:0 0 auto; width:16.666667%; max-width:16.666667%; } .col-sm-3{ flex:0 0 auto; width:25.0%; max-width:25.0%; } .col-sm-4{ flex:0 0 auto; width:33.333333%; max-width:33.333333%; } .col-sm-5{ flex:0 0 auto; width:41.666667%; max-width:41.666667%; } .col-sm-6{ flex:0 0 auto; width:50.0%; max-width:50.0%; } .col-sm-7{ flex:0 0 auto; width:58.333333%; max-width:58.333333%; } .col-sm-8{ flex:0 0 auto; width:66.666667%; max-width:66.666667%; } .col-sm-9{ flex:0 0 auto; width:75.0%; max-width:75.0%; } .col-sm-10{ flex:0 0 auto; width:83.333333%; max-width:83.333333%; } .col-sm-11{ flex:0 0 auto; width:91.666667%; max-width:91.666667%; } .col-sm-12{ flex:0 0 auto; width:100.0%; max-width:100.0%; } .offset-sm-1{ margin-left:8.333333%; } .offset-sm-2{ margin-left:16.666667%; } .offset-sm-3{ margin-left:25.0%; } .offset-sm-4{ margin-left:33.333333%; } .offset-sm-5{ margin-left:41.666667%; } .offset-sm-6{ margin-left:50.0%; } .offset-sm-7{ margin-left:58.333333%; } .offset-sm-8{ margin-left:66.666667%; } .offset-sm-9{ margin-left:75.0%; } .offset-sm-10{ margin-left:83.333333%; } .offset-sm-11{ margin-left:91.666667%; } } @media (min-width:768px){ .col-md{ flex:1 0 0%; max-width:100%; } .col-md-auto{ flex:0 0 auto; width:auto; max-width:100%; } .col-md-1{ flex:0 0 auto; width:8.333333%; max-width:8.333333%; } .col-md-2{ flex:0 0 auto; width:16.666667%; max-width:16.666667%; } .col-md-3{ flex:0 0 auto; width:25.0%; max-width:25.0%; } .col-md-4{ flex:0 0 auto; width:33.333333%; max-width:33.333333%; } .col-md-5{ flex:0 0 auto; width:41.666667%; max-width:41.666667%; } .col-md-6{ flex:0 0 auto; width:50.0%; max-width:50.0%; } .col-md-7{ flex:0 0 auto; width:58.333333%; max-width:58.333333%; } .col-md-8{ flex:0 0 auto; width:66.666667%; max-width:66.666667%; } .col-md-9{ flex:0 0 auto; width:75.0%; max-width:75.0%; } .col-md-10{ flex:0 0 auto; width:83.333333%; max-width:83.333333%; } .col-md-11{ flex:0 0 auto; width:91.666667%; max-width:91.666667%; } .col-md-12{ flex:0 0 auto; width:100.0%; max-width:100.0%; } .offset-md-1{ margin-left:8.333333%; } .offset-md-2{ margin-left:16.666667%; } .offset-md-3{ margin-left:25.0%; } .offset-md-4{ margin-left:33.333333%; } .offset-md-5{ margin-left:41.666667%; } .offset-md-6{ margin-left:50.0%; } .offset-md-7{ margin-left:58.333333%; } .offset-md-8{ margin-left:66.666667%; } .offset-md-9{ margin-left:75.0%; } .offset-md-10{ margin-left:83.333333%; } .offset-md-11{ margin-left:91.666667%; } } @media (min-width:992px){ .col-lg{ flex:1 0 0%; max-width:100%; } .col-lg-auto{ flex:0 0 auto; width:auto; max-width:100%; } .col-lg-1{ flex:0 0 auto; width:8.333333%; max-width:8.333333%; } .col-lg-2{ flex:0 0 auto; width:16.666667%; max-width:16.666667%; } .col-lg-3{ flex:0 0 auto; width:25.0%; max-width:25.0%; } .col-lg-4{ flex:0 0 auto; width:33.333333%; max-width:33.333333%; } .col-lg-5{ flex:0 0 auto; width:41.666667%; max-width:41.666667%; } .col-lg-6{ flex:0 0 auto; width:50.0%; max-width:50.0%; } .col-lg-7{ flex:0 0 auto; width:58.333333%; max-width:58.333333%; } .col-lg-8{ flex:0 0 auto; width:66.666667%; max-width:66.666667%; } .col-lg-9{ flex:0 0 auto; width:75.0%; max-width:75.0%; } .col-lg-10{ flex:0 0 auto; width:83.333333%; max-width:83.333333%; } .col-lg-11{ flex:0 0 auto; width:91.666667%; max-width:91.666667%; } .col-lg-12{ flex:0 0 auto; width:100.0%; max-width:100.0%; } .offset-lg-1{ margin-left:8.333333%; } .offset-lg-2{ margin-left:16.666667%; } .offset-lg-3{ margin-left:25.0%; } .offset-lg-4{ margin-left:33.333333%; } .offset-lg-5{ margin-left:41.666667%; } .offset-lg-6{ margin-left:50.0%; } .offset-lg-7{ margin-left:58.333333%; } .offset-lg-8{ margin-left:66.666667%; } .offset-lg-9{ margin-left:75.0%; } .offset-lg-10{ margin-left:83.333333%; } .offset-lg-11{ margin-left:91.666667%; } } @media (min-width:1200px){ .col-xl{ flex:1 0 0%; max-width:100%; } .col-xl-auto{ flex:0 0 auto; width:auto; max-width:100%; } .col-xl-1{ flex:0 0 auto; width:8.333333%; max-width:8.333333%; } .col-xl-2{ flex:0 0 auto; width:16.666667%; max-width:16.666667%; } .col-xl-3{ flex:0 0 auto; width:25.0%; max-width:25.0%; } .col-xl-4{ flex:0 0 auto; width:33.333333%; max-width:33.333333%; } .col-xl-5{ flex:0 0 auto; width:41.666667%; max-width:41.666667%; } .col-xl-6{ flex:0 0 auto; width:50.0%; max-width:50.0%; } .col-xl-7{ flex:0 0 auto; width:58.333333%; max-width:58.333333%; } .col-xl-8{ flex:0 0 auto; width:66.666667%; max-width:66.666667%; } .col-xl-9{ flex:0 0 auto; width:75.0%; max-width:75.0%; } .col-xl-10{ flex:0 0 auto; width:83.333333%; max-width:83.333333%; } .col-xl-11{ flex:0 0 auto; width:91.666667%; max-width:91.666667%; } .col-xl-12{ flex:0 0 auto; width:100.0%; max-width:100.0%; } .offset-xl-1{ margin-left:8.333333%; } .offset-xl-2{ margin-left:16.666667%; } .offset-xl-3{ margin-left:25.0%; } .offset-xl-4{ margin-left:33.333333%; } .offset-xl-5{ margin-left:41.666667%; } .offset-xl-6{ margin-left:50.0%; } .offset-xl-7{ margin-left:58.333333%; } .offset-xl-8{ margin-left:66.666667%; } .offset-xl-9{ margin-left:75.0%; } .offset-xl-10{ margin-left:83.333333%; } .offset-xl-11{ margin-left:91.666667%; } } /* ---------- 21. НЕЙТРАЛИЗУЕМ АДМИНСКИЙ CUSTOM CSS ---------- */ @media (max-width:768px){ .header__logo{ margin:0 !important; } .header{ background-image:none !important; } .header__mobile-fixed{ background-image:none !important; } } /* Логотип-картинка (например, старый 3D-баннер «Gadget-Shop.by» из настроек магазина) не должен растягиваться на всю ширину шапки и ломать её высоту — ограничиваем размер во всех местах, где он выводится, особенно на странице оформления заказа (.header--checkout), которая иначе выглядела инородно. */ .header__logo{ max-width:220px; } .header__logo--svg{ overflow:visible; flex:none !important; } .header__logo-svg{ height:42px !important; width:46px !important; max-width:none !important; max-height:none !important; display:block !important; flex:none !important; } @media (max-width:768px){ .header__logo-svg{ height:36px !important; width:40px !important; } } .header__logo img, .header__logo svg:not(.header__logo-svg){ max-height:44px !important; width:auto !important; height:auto !important; max-width:220px !important; object-fit:contain !important; display:block !important; } .header--checkout{ background:#fff; border-bottom:1px solid var(--border); } .header--checkout .header__desktop{ display:flex !important; align-items:center; justify-content:space-between; gap:24px; padding:18px 0 !important; } .header--checkout .header__call-btn{ font-size:1.05rem; } .header--checkout .header__logo img, .header--checkout .header__logo svg:not(.header__logo-svg){ max-height:40px !important; } .header--checkout .header__logo-svg{ height:40px !important; width:44px !important; max-height:none !important; } @media (max-width:768px){ .header--checkout{ background-image:none !important; } .header--checkout .header__logo img, .header--checkout .header__logo svg:not(.header__logo-svg){ max-height:36px !important; max-width:180px !important; } .header--checkout .header__logo-svg{ height:34px !important; width:38px !important; } } /* ---------- 22. FANCYBOX POPUPS: должны быть скрыты, пока не открыты плагином ---------- */ .fancybox-is-hidden{ display:none !important; } /* ---------- 23. АВТОКОМПЛИТ ПОИСКА (реальная разметка из app.js) ---------- БЫЛО ИСПРАВЛЕНО НЕВЕРНО: стили панели висели на классе .header__search-menu, которого нет в реальной разметке — JS вставляет HTML прямо в .header__search-autocomplete (см. app.js: $(this).parent().siblings ('div.header__search-autocomplete').html(html)). Из-за этого сама панель результатов была без фона/тени/границ и наплывала на контент страницы. */ .header__search-autocomplete{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); max-height:70vh; overflow-y:auto; z-index:250; padding:8px; } .header__row--02 .header__search-autocomplete{ right:0; } .header__search-autocomplete:empty{ display:none; padding:0; border:0; box-shadow:none; } /* Всплывающая карточка товара при наведении на текстовый результат (десктоп). ИСПРАВЛЕНО: в реальной разметке .header__search-dropdown — СОСЕДНИЙ элемент после .header__search-item (не вложенный), поэтому :hover-селектор ниже не срабатывал. А сам блок ещё и постоянно торчал открытым, потому что несёт класс .is-xl-visible{ display:block }, который на десктопе перебивал наш display:none той же силы. Добавили вторую специфичность и правильный селектор — теперь появляется только по наведению. */ .header__search-dropdown.is-xl-visible{ display:none; } .header__search-dropdown{ position:absolute; top:0; left:100%; margin-left:10px; width:280px; z-index:60; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:12px; } .header__search-item:hover ~ .header__search-dropdown.is-xl-visible, .header__search-dropdown.is-xl-visible:hover{ display:block; } .dropdown-header{ padding:12px 12px 6px; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text-soft); } .header__search-item{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:var(--r-sm); position:relative; } .header__search-item:hover{ background:var(--surface-2); } .header__search-item-image{ flex:none; width:52px; height:52px; border-radius:var(--r-xs); overflow:hidden; background:var(--surface-2); } .header__search-item-image img{ width:100%; height:100%; object-fit:contain; } .header__search-item-desc{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .header__search-item-title{ font-weight:700; font-size:.95rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .header__search-item-price{ font-weight:800; color:var(--text); } .header__search-item-id{ font-size:.8rem; color:var(--text-soft); } .header__search-item-arrow{ flex:none; color:var(--text-soft); } .header__search-category{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm); } .header__search-category:hover{ background:var(--surface-2); } .header__search-category-title{ flex:1; font-weight:600; } .header__search-category-mark{ font-size:.8rem; color:var(--text-soft); } .header__search-more{ padding:10px 12px; } .search__item--text{ display:block; padding:10px 12px; border-radius:var(--r-sm); font-weight:600; } .search__item--text:hover{ background:var(--surface-2); color:var(--accent); } /* ---------- 24. ОБЩИЕ СТРАНИЦЫ (политика, доставка, контакты и т.д.) ---------- */ .breadcrumbs{ padding:22px 0 10px; } .breadcrumbs__title{ margin-bottom:6px; } .breadcrumbs__counter{ display:block; color:var(--text-soft); font-size:.95rem; font-weight:600; margin:0 0 10px; } .breadcrumbs__menu{ display:flex; flex-wrap:wrap; gap:6px; font-size:.95rem; color:var(--text-soft); } .breadcrumbs__menu li:not(:last-child)::after{ content:"/"; margin-left:8px; color:var(--border); } .breadcrumbs__link{ color:var(--text-muted); font-weight:600; } .breadcrumbs__link:hover{ color:var(--accent); } .page{ padding-bottom:56px; } .page__body{ padding:32px 0; color:var(--text-muted); font-size:1.05rem; } .page__action{ margin-top:12px; } .ui-wysiwyg.editor{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; font-size:1rem; line-height:1.75; color:var(--text-muted); } .ui-wysiwyg.editor h1,.ui-wysiwyg.editor h2,.ui-wysiwyg.editor h3{ margin-top:1.2em; } .ui-wysiwyg.editor h1:first-child,.ui-wysiwyg.editor h2:first-child{ margin-top:0; } .ui-wysiwyg.editor p{ margin-bottom:1em; } .ui-wysiwyg.editor ul,.ui-wysiwyg.editor ol{ margin:0 0 1em; padding-left:22px; } .ui-wysiwyg.editor ul{ list-style:disc; } .ui-wysiwyg.editor ol{ list-style:decimal; } .ui-wysiwyg.editor a{ color:var(--accent); font-weight:600; text-decoration:underline; } .ui-wysiwyg.editor img{ border-radius:var(--r-md); max-width:100%; } .ui-wysiwyg.editor table{ width:100%; border-collapse:collapse; margin-bottom:1em; } .ui-wysiwyg.editor table td,.ui-wysiwyg.editor table th{ padding:10px; border:1px solid var(--border); } /* ========================================================================= ОСТАЛЬНЫЕ СТРАНИЦЫ САЙТА (каталог, карточка товара, корзина, аккаунт) ========================================================================= */ /* ---------- 25. КАТАЛОГ / СПИСОК ТОВАРОВ ---------- */ .catalog{ padding-bottom:56px; } .seo{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; margin-bottom:24px; } .seo__desc{ color:var(--text-muted); } .seo__desc .editor{ max-width:none; padding:0; border:0; background:none; } .products-categories__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin:0 0 24px; } .products-categories__item{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .products-categories__item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent); } .products-categories__item-image img{ width:64px; height:64px; object-fit:contain; margin-inline:auto; } .products-categories__item-title{ font-size:.95rem; font-weight:700; } .settings{ margin-bottom:20px; } .settings .row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .ui-select{ position:relative; display:inline-flex; align-items:center; vertical-align:top; } .ui-select select{ appearance:none; height:48px; padding:0 40px 0 18px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-pill); font-weight:600; cursor:pointer; } .ui-select::after{ content:""; position:absolute; right:16px; top:50%; width:9px; height:9px; border-right:2px solid var(--text-soft); border-bottom:2px solid var(--text-soft); transform:translateY(-70%) rotate(45deg); pointer-events:none; } .ui-display{ display:flex; gap:8px; } .ui-display__btn{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border); background:#fff; color:var(--text-soft); } .ui-display__btn.is-active{ background:var(--ink); color:#fff; border-color:transparent; } .container-pagination{ margin-top:32px; } .pagination__list{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0; } .pagination__list a,.pagination__list span{ min-width:44px; height:44px; padding:0 10px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; border:1.5px solid var(--border); font-weight:700; font-size:.92rem; } .pagination__list .active span,.pagination__list a:hover{ background:var(--ink); color:#fff; border-color:transparent; } /* Реальная разметка OpenCart-пагинации — ul.pagination > li > a|span (без класса __list). Дублируем рабочую раскладку под неё, иначе цифры страниц выводятся голым вертикальным списком без стилей. */ .pagination{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0; padding:0; list-style:none; } .pagination li{ list-style:none; } .pagination li a, .pagination li span{ min-width:44px; height:44px; padding:0 12px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; border:1.5px solid var(--border); font-weight:700; font-size:.92rem; color:var(--text); transition:all .15s var(--ease); } .pagination li.active span, .pagination li a:hover{ background:var(--ink); color:#fff; border-color:transparent; } .pagination__action{ display:flex; justify-content:center; margin-top:24px; } .products__list--inline{ grid-template-columns:1fr; } .products__list--inline .products__item-in{ flex-direction:row; align-items:center; gap:20px; } .products__list--inline .products__item-gallery,.products__list--inline .products__item-image{ width:140px; flex:none; margin-bottom:0; } .products__list--micro{ grid-template-columns:repeat(6,minmax(0,1fr)); } @media (max-width:1199px){ .products__list--micro{ grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (max-width:767px){ .products__list--micro{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:575px){ .products__list--micro{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ---------- 26. КАРТОЧКА ТОВАРА ---------- */ .sku__compact{ position:fixed; top:0; left:0; right:0; z-index:110; background:#fff; border-bottom:1px solid var(--border); transform:translateY(-100%); transition:transform var(--dur) var(--ease); box-shadow:var(--shadow-sm); } .sku__compact.is-visible,.sku__compact.js-visible{ transform:translateY(0); } .sku__compact-wrapper{ display:flex; align-items:center; gap:16px; padding:12px 0; } .sku__compact-item{ display:flex; align-items:center; gap:14px; flex:1; min-width:0; } .sku__compact-item-image{ flex:none; width:48px; height:48px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); } .sku__compact-item-image img{ width:100%; height:100%; object-fit:contain; } .sku__compact-item-desc{ display:flex; flex-direction:column; gap:2px; min-width:0; } .sku__compact-item-title{ font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; } .sku__compact-item-price{ font-weight:800; } .sku__compact-item-price-del{ color:var(--text-soft); font-weight:600; font-size:.85em; margin-left:6px; } .sku__compact-control-menu{ display:flex; gap:8px; } .sku__compact-control-btn{ padding:10px 16px; border-radius:var(--r-pill); background:var(--surface-2); font-weight:700; font-size:.9rem; white-space:nowrap; } .sku__compact-control-btn:hover{ background:var(--ink); color:#fff; } .sku{ margin-top:24px; } .sku__control{ position:sticky; top:100px; } .sku__control-menu{ border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .sku__control-menu img{ max-height:100%; max-width:100%; object-fit:contain; } .sku__control-btn{ width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; } .sku__thumb{ width:76px; height:76px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); border:1.5px solid var(--border); cursor:pointer; flex:none; } .sku__thumb img{ width:100%; height:100%; object-fit:contain; } .sku__thumb.is-active,.sku__thumb:hover{ border-color:var(--accent); } .sku__horizontal-nav{ display:flex; gap:8px; margin-top:10px; justify-content:flex-end; } .sku__desc{ display:flex; flex-direction:column; gap:16px; } .sku__availability{ display:inline-block; font-weight:700; font-size:.85rem; padding:5px 12px; border-radius:var(--r-pill); background:var(--surface-2); margin-bottom:6px; } .sku__availability--true{ background:#E5F6EA; color:#1E8E3E; } .sku__availability--false{ background:#FDECEA; color:#C5221F; } .sku__id{ display:block; font-size:.88rem; color:var(--text-soft); margin-bottom:4px; } .sku__brand{ display:flex; align-items:center; gap:8px; } .sku__brand-link,.sku__brand-text{ font-weight:700; color:var(--accent); font-size:.95rem; } .sku__price{ font-size:2.1rem; font-weight:900; color:var(--text); margin:0; } .sku__price-ins{ color:var(--accent); margin-right:12px; } .sku__price-del{ color:var(--text-soft); font-weight:600; font-size:.5em; text-decoration:line-through; } .sku__price-economy{ display:inline-flex; margin-left:10px; vertical-align:middle; font-size:.42em; font-weight:800; background:var(--accent-tint); color:var(--accent-600); padding:4px 10px; border-radius:var(--r-pill); } .sku__price-option{ font-size:.92rem; color:var(--text-soft); display:flex; gap:14px; flex-wrap:wrap; } .sku__action{ margin:4px 0; } .sku__action .row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .sku__action .ui-add-to-cart .ui-btn--primary{ min-width:220px; flex:none; width:auto; } .sku__addto{ display:flex; gap:10px; } .sku__addto-btn{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-pill); background:var(--surface-2); border:1.5px solid var(--border); font-weight:600; font-size:.9rem; } .sku__addto-btn:hover,.sku__addto-btn.is-active{ background:var(--ink); color:#fff; border-color:transparent; } .sku__addto-btn-icon svg{ width:18px; height:18px; } /* Варианты товара — свотчи цвета + пилюли ОЗУ/памяти (группа связи) */ .sku__group--variants{ margin-bottom:22px; } .sku__group--colors{ margin-bottom:22px; } .sku__variant-label, .sku__colors-label{ display:block; font-weight:700; font-size:.95rem; margin-bottom:12px; color:var(--text); } .sku__variant-current, .sku__colors-current{ font-weight:800; } .sku__colors{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; } .sku__color{ display:block; width:52px; height:52px; border-radius:14px; overflow:hidden; border:2px solid var(--border); background:#fff; transition:border-color .15s var(--ease), transform .15s var(--ease); position:relative; } .sku__color:hover{ border-color:var(--text-soft); transform:translateY(-2px); } .sku__color.is-active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-tint); } .sku__color-img{ width:100%; height:100%; object-fit:cover; display:block; } .sku__color-dot{ position:absolute; inset:0; display:block; border-radius:12px; } /* Пилюли для ОЗУ / памяти */ .sku__pills{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; } .sku__pill{ display:inline-flex; align-items:center; justify-content:center; min-width:64px; padding:10px 18px; border-radius:var(--r-pill); border:1.5px solid var(--border); background:#fff; font-weight:700; font-size:.92rem; color:var(--text); transition:all .15s var(--ease); cursor:pointer; } .sku__pill:hover{ border-color:var(--text-soft); } .sku__pill.is-active{ background:var(--ink); color:#fff; border-color:transparent; } @media (max-width:575px){ .sku__color{ width:46px; height:46px; } } .sku__settings{ padding:16px; border:1.5px dashed var(--border); border-radius:var(--r-md); } .sku__discount{ margin-top:14px; } .ui-discount{ background:var(--accent-tint); border-radius:var(--r-md); padding:16px 20px; display:flex; align-items:center; gap:16px; } .ui-discount__desc{ display:flex; align-items:center; gap:10px; } .ui-discount__icon{ margin:0; color:var(--accent); width:28px; height:28px; } .ui-discount__caption{ margin:0; font-weight:700; } .ui-discount__countdown{ font-weight:900; font-size:1.2rem; color:var(--accent-600); } .details{ margin-top:56px; } .details__tabs{ display:block; } /* ---------- НАСТОЯЩИЙ ТАБ-ИНТЕРФЕЙС ВМЕСТО "ГАРМОШКИ" ---------- JS уже правильно переключает класс .is-active на кнопках и панелях (product_in_tab=1 в шаблоне), но раньше не было ни одной строчки CSS, которая реально прятала неактивные панели — поэтому Описание, Характеристики, Отзывы, Вопросы и Доставка показывались ВСЕ СРАЗУ, одно под другим, как один длинный список, хотя технически уже были табами. */ .details__tabs-content{ display:none; } .details__tabs-content.is-active{ display:block; animation:tabFadeIn .2s var(--ease); } @keyframes tabFadeIn{ from{ opacity:0; } to{ opacity:1; } } .details__control{ border-bottom:1.5px solid var(--border); margin-bottom:28px; } .details__control-menu{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; } .details__control-menu::-webkit-scrollbar{ display:none; } .details__control-btn{ padding:14px 20px; font-weight:700; font-size:.98rem; color:var(--text-muted); white-space:nowrap; border-bottom:2.5px solid transparent; margin-bottom:-1.5px; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .details__control-btn:hover{ color:var(--ink); } .details__control-btn.is-active{ color:var(--ink); border-bottom-color:var(--accent); } .details__control-counter{ color:var(--text-soft); font-weight:600; } .details__control-btn.is-active .details__control-counter{ color:var(--accent); } .details__wrapper{ max-width:none; width:100%; } .details__tabs-content{ display:none; padding:28px 0; } .details__tabs-content.is-active{ display:block; } .details__title{ margin-bottom:16px; } .details__specifications-table-line{ font-weight:600; color:var(--text); } .details__accordion-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 0; border-bottom:1px solid var(--border); font-weight:700; text-align:left; } .details__accordion-arrow{ transition:transform var(--dur) var(--ease); flex:none; } .details__accordion.is-open .details__accordion-arrow{ transform:rotate(180deg); } .details__accordion-counter{ margin-left:8px; color:var(--text-soft); font-weight:600; } .details__comments-sidebar{ text-align:center; padding:28px; background:var(--surface-2); border-radius:var(--r-lg); } .details__comments-rating-title{ font-size:2.6rem; font-weight:900; } .details__comments-content{ display:flex; flex-direction:column; gap:20px; } /* ---------- 27. КОРЗИНА (страница /cart, полноразмерная — переиспользует визуальный язык мини-корзины, но с .cart__ префиксом) ---------- */ .cart{ padding-bottom:56px; } .cart__wrapper{ display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start; } .cart__content{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:8px 24px; } .cart__list > li{ border-bottom:1px solid var(--border); padding:18px 0; } .cart__list > li:last-child{ border-bottom:0; } .cart__item{ position:relative; display:grid; gap:6px 12px; align-items:start; grid-template-columns:80px 1fr auto; grid-template-rows:auto auto; grid-template-areas:"image desc price" "image number number"; } .cart__item-image{ grid-area:image; width:80px; height:80px; border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); } .cart__item-image img{ width:100%; height:100%; object-fit:contain; padding:8px; } .cart__item-desc{ grid-area:desc; display:flex; flex-direction:column; gap:4px; min-width:0; } .cart__item-id{ font-size:.8rem; color:var(--text-soft); } .cart__item-title{ font-weight:700; } .cart__item-title:hover{ color:var(--accent); } .cart__item-text{ font-size:.85rem; color:var(--text-soft); margin:0; } .cart__item-number{ grid-area:number; margin-top:4px; } .cart__item-price{ grid-area:price; text-align:right; display:flex; flex-direction:column; gap:2px; white-space:nowrap; font-weight:800; } .cart__item-price-piece{ font-size:.78rem; color:var(--text-soft); font-weight:600; } .cart__item-action{ position:absolute; top:0; right:0; } .cart__item-action-toggle{ width:32px; height:32px; border-radius:50%; color:var(--text-soft); } .cart__item-action-toggle:hover{ background:var(--surface-2); } .cart__item-action-offcanvas{ display:none; position:absolute; top:100%; right:0; background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow-md); z-index:5; min-width:160px; padding:6px; } .cart__item-action.is-open .cart__item-action-offcanvas{ display:block; } .cart__item-action-link{ display:block; width:100%; text-align:left; padding:8px 12px; border-radius:var(--r-pill); font-size:.88rem; font-weight:600; } .cart__item-action-link:hover{ background:var(--surface-2); color:var(--accent); } .cart__sidebar{ position:sticky; top:100px; } .cart__data{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; } .cart__data-title{ display:block; font-weight:800; margin-bottom:14px; font-size:1.1rem; } .cart__data-table{ width:100%; border-collapse:collapse; margin-bottom:18px; } .cart__data-table td{ padding:9px 0; font-size:.95rem; border-bottom:1px dashed var(--border); } .cart__data-table tfoot td{ border-bottom:0; font-weight:800; font-size:1.2rem; padding-top:12px; } .cart__action{ margin-top:14px; } .cart__quick{ margin-top:14px; } .cart__quick-text{ font-size:.8rem; color:var(--text-soft); text-align:center; margin:10px 0 0; } @media (max-width:900px){ .cart__wrapper{ grid-template-columns:1fr; } .cart__sidebar{ position:static; } } /* ---------- 28. ОФОРМЛЕНИЕ ЗАКАЗА ---------- */ .checkout{ padding-bottom:56px; } .checkout__wrapper{ display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start; } .checkout__step{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; overflow:hidden; } .checkout__step-head{ display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid var(--border); } .checkout__step-title{ font-weight:800; font-size:1.1rem; margin:0; } .checkout__step-body{ padding:24px; } .checkout__sidebar{ position:sticky; top:100px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; } @media (max-width:900px){ .checkout__wrapper{ grid-template-columns:1fr; } .checkout__sidebar{ position:static; } } /* ---------- 29. ЛИЧНЫЙ КАБИНЕТ ---------- */ .personal__overview{ display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start; padding-bottom:56px; } .personal__overview-content{ display:flex; flex-direction:column; gap:16px; } .personal__card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; } .personal__card-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); font-weight:800; } .personal__card-body{ padding:20px 24px; } .personal__card-foot{ padding:16px 24px; border-top:1px solid var(--border); } .personal__card-total{ font-weight:800; font-size:1.1rem; } .personal__card-all{ font-weight:700; color:var(--accent); } .personal__action-menu{ display:flex; flex-direction:column; gap:4px; } .personal__action-link{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-md); font-weight:700; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); } .personal__action-link:hover{ color:var(--ink); border-color:var(--ink); } .personal__action-link-icon{ flex:none; width:22px; height:22px; color:var(--accent); } .personal__subsc{ display:flex; align-items:center; gap:14px; background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:20px; } .personal__subsc-icon{ flex:none; width:36px; height:36px; color:var(--accent); } .personal__subsc-title{ font-weight:800; margin-bottom:2px; } .personal__subsc-text{ font-size:.9rem; color:rgba(255,255,255,.6); margin:0; } @media (max-width:900px){ .personal__overview{ grid-template-columns:1fr; } } /* ---------- 30. ОБЩИЕ ТАБЛИЦЫ (заказы, адреса и т.д.) ---------- */ table.table{ width:100%; border-collapse:collapse; margin-bottom:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; } table.table th{ text-align:left; padding:14px 16px; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-soft); background:var(--surface-2); border-bottom:1px solid var(--border); } table.table td{ padding:16px; border-bottom:1px solid var(--border); vertical-align:middle; } table.table tr:last-child td{ border-bottom:0; } .ui-field{ margin-bottom:16px; } .personal__order-table,.order-table{ width:100%; border-collapse:collapse; } /* ---------- 31. ИСПРАВЛЕНИЯ (аудит: модалки, поповеры, всплывающий контент) ---------- Раньше .popup / .popup--agree не имели вообще никаких стилей (плюс не была подключена jquery.fancybox.min.css — см. header.twig), поэтому модальное окно политики конфиденциальности, окно способов доставки, форма обратного звонка, попап "поделиться" и т.д. показывались голым неоформленным HTML. */ .popup{ position:relative; width:100%; max-width:560px; padding:32px 36px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); box-sizing:border-box; } @media (max-width:575px){ .popup{ padding:24px 20px; max-width:calc(100vw - 32px); } } .popup--agree{ max-width:680px; max-height:80vh; overflow-y:auto; } .popup--prod,.popup--option-required{ max-width:1100px; padding:0; } /* Типографика для «сырого» контента, который подгружается ajax'ом внутрь .popup__form (страницы информации, политика, условия доставки и т.д.). Общий сброс списков/таблиц в разделе 2 иначе оставляет этот текст без отступов, маркеров и разметки таблиц. */ .popup__form{ color:var(--text); font-size:.98rem; line-height:1.65; } .popup__form h1,.popup__form h2,.popup__form h3,.popup__form h4{ margin:1.2em 0 .5em; } .popup__form h1:first-child,.popup__form h2:first-child,.popup__form h3:first-child{ margin-top:0; } .popup__form p{ margin:0 0 1em; color:var(--text); } .popup__form ul,.popup__form ol{ margin:0 0 1em; padding-left:1.4em; list-style:revert; } .popup__form ul{ list-style:disc; } .popup__form ol{ list-style:decimal; } .popup__form li{ margin-bottom:.4em; } .popup__form a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .popup__form a:hover{ color:var(--accent-600); } .popup__form table{ width:100%; border-collapse:collapse; margin:0 0 1em; } .popup__form table td,.popup__form table th{ padding:10px 12px; border:1px solid var(--border); text-align:left; } .popup__form img{ max-width:100%; height:auto; border-radius:var(--r-sm); margin:.5em 0; } .popup__form blockquote{ margin:0 0 1em; padding:12px 18px; border-left:3px solid var(--accent); background:var(--surface-2); border-radius:0 var(--r-sm) var(--r-sm) 0; } /* ---------- 32. ИСПРАВЛЕНИЕ: результаты поиска без товаров ---------- */ .search-page__empty{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:28px 0 8px; } .search-page__empty-icon{ width:44px; height:44px; color:var(--text-soft); } .search-page__empty-text{ font-size:1.05rem; font-weight:600; color:var(--text-muted); margin:0; } /* ========================================================================= ИСПРАВЛЕНИЯ ПО СКРИНШОТАМ: категории/фильтр без стилей, "простыня" под хлебными крошками, наплывающий тост "добавлено в корзину" на нижнем меню. ========================================================================= */ /* ---------- 33. БЛОКИРОВКА СКРОЛЛА ФОНА ПРИ ОТКРЫТОМ OFFCANVAS ---------- .is-page-lock навешивается JS на любое открытое мобильное меню (каталог, категории, фильтр, поиск, звонок), но правила для него не было — фон страницы продолжал скроллиться под открытой панелью. */ html.is-page-lock{ overflow:hidden; height:100%; } html.is-page-lock body{ overflow:hidden; height:100%; } /* ---------- 34. ХЛЕБНЫЕ КРОШКИ: подкатегория "простыней" ---------- .breadcrumbs__dropdown вообще не был скрыт, поэтому список всех соседних категорий постоянно висел целиком под заголовком страницы (каталог и карточка товара). Это должна быть подсказка по наведению на десктопе и быть скрытой на мобильном, где для этого есть отдельный блок категорий. */ .breadcrumbs__menu > li{ position:relative; } .breadcrumbs__dropdown{ display:none; position:absolute; top:100%; left:0; z-index:120; margin-top:10px; min-width:240px; max-width:320px; max-height:360px; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:10px 0; } @media (min-width:1200px){ .breadcrumbs__menu > li:hover > .breadcrumbs__dropdown{ display:block; } } .breadcrumbs__dropdown-menu li{ display:block; } .breadcrumbs__dropdown-link{ display:block; padding:8px 18px; color:var(--text-muted); font-weight:500; font-size:.92rem; } .breadcrumbs__dropdown-link:hover{ background:var(--surface-2); color:var(--ink); } @media (max-width:1199px){ .breadcrumbs__dropdown{ display:none !important; } } /* ---------- 35. САЙДБАР КАТЕГОРИЙ (.categories-aside) ---------- Раньше не было НИ ОДНОГО правила для этого блока: на десктопе список категорий занимал произвольную ширину прямо в строке рядом с товарами (см. скриншот), а на мобильном оффканвас-панель, которая должна прятаться за экран, просто рендерилась целиком в потоке страницы. */ .categories-aside{ flex:none; } .categories-aside__offcanvas-in{ display:flex; flex-direction:column; height:100%; } .categories-aside__title{ display:block; font-weight:800; font-size:1.15rem; margin-bottom:14px; } .categories-aside__menu,.categories-aside__submenu{ display:flex; flex-direction:column; } .categories-aside__menu > li{ border-bottom:1px solid var(--border); } .categories-aside__menu > li:last-child{ border-bottom:0; } .categories-aside__link,.categories-aside__sublink{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 4px; font-weight:600; color:var(--text); line-height:1.3; } .categories-aside__link:hover,.categories-aside__sublink:hover{ color:var(--accent); } .categories-aside__link.is-active,.categories-aside__sublink.is-active{ color:var(--accent); font-weight:700; } .categories-aside__link > span{ flex:none; width:16px; height:16px; color:var(--text-soft); transition:transform var(--dur) var(--ease); } .categories-aside__menu > li.is-open > .categories-aside__link > span{ transform:rotate(90deg); color:var(--accent); } .categories-aside__dropdown{ display:none; padding:0 0 8px 14px; } .categories-aside__submenu{ gap:2px; } .categories-aside__sublink{ padding:7px 4px; font-size:.94rem; font-weight:500; color:var(--text-muted); } .categories-aside__sublink--show_all{ color:var(--accent); font-weight:700; } .categories-aside__back{ display:none; align-items:center; gap:8px; padding:12px 4px; font-weight:700; color:var(--text-soft); } .categories-aside__back svg{ width:16px; height:16px; } .categories-aside__close{ display:none; } /* Вложенный уровень 3+ (categories-aside__dropright) — на десктопе всплывает вправо по наведению, на мобильном раскрывается по клику как аккордеон. */ @media (min-width:1200px){ .categories-aside__submenu > li{ position:relative; } .categories-aside__dropright{ display:none; position:absolute; top:0; left:100%; min-width:220px; max-width:280px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:10px 14px; z-index:60; margin-left:6px; } .categories-aside__submenu > li.is-open > .categories-aside__dropright{ display:block; } } @media (max-width:1199px){ .categories-aside__dropright{ display:none; padding:0 0 0 14px; } .categories-aside__submenu > li.is-open > .categories-aside__dropright{ display:block; } } /* Десктоп ( >=1200px ): статичная колонка-сайдбар рядом с товарами. */ @media (min-width:1200px){ .categories-aside{ width:264px; margin-right:24px; margin-bottom:20px; float:left; } .categories-aside__offcanvas{ position:static; transform:none; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; } .categories-aside--nav{ align-self:flex-start; } } /* Мобильный/планшет ( <1200px ): офканвас-панель, спрятанная за левый край экрана. */ @media (max-width:1199px){ .categories-aside{ width:0; margin:0; } .categories-aside__offcanvas{ position:fixed; top:0; bottom:0; left:0; width:min(340px,86vw); background:#fff; box-shadow:var(--shadow-lg); transform:translateX(-105%); transition:transform .35s var(--ease); z-index:230; overflow-y:auto; padding:20px; box-sizing:border-box; } html.is-categories-open .categories-aside__offcanvas{ transform:translateX(0); } .categories-aside__close{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; margin-top:16px; border:1px solid var(--border); border-radius:var(--r-pill); font-weight:700; background:var(--surface-2); } } /* ---------- 36. ФИЛЬТР (.filter-aside) ---------- Как и .categories-aside, этот блок был совсем без стилей. Кнопка-тоггл "Фильтр" без ширины/white-space схлопывалась в вертикальную ленту из букв (то самое красное "Ф и л ь т р" на скриншоте с мобильного). */ .filter-aside__toggle{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex:none; padding:12px 20px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-weight:700; } .filter-aside__toggle:hover{ background:var(--accent); } .filter-aside__toggle svg{ width:16px; height:16px; flex:none; } .filter-aside__counter{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:50%; background:var(--accent); color:#fff; font-size:.72rem; font-weight:800; } .filter-aside__toggle .filter-aside__counter{ background:rgba(255,255,255,.25); } .filter-aside__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; } .filter-aside__title{ font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:8px; } .filter-aside__close{ display:none; } .filter-aside__reset{ display:flex; align-items:center; gap:6px; font-weight:700; color:var(--text-muted); white-space:nowrap; } .filter-aside__reset:hover{ color:var(--accent); } .filter-aside__reset svg{ width:15px; height:15px; } .filter-aside__group{ padding:16px 0; border-bottom:1px solid var(--border); } .filter-aside__group.hide{ display:none; } .filter-aside__group:last-child{ border-bottom:0; } .filter-aside__group-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .filter-aside__group-title{ font-weight:800; font-size:.95rem; text-transform:uppercase; letter-spacing:.02em; color:var(--text-soft); } .filter-aside__group-checklist{ display:flex; flex-wrap:wrap; gap:8px; } .filter-aside__more{ margin-top:10px; } .filter-aside__foot{ margin-top:18px; } .ui-range{ padding:6px 2px 0; } .ui-range__field{ display:flex; align-items:center; gap:4px; } .ui-range__append{ color:var(--text-soft); } .ui-range__input{ width:100%; border:0; font-weight:700; color:var(--ink); background:none; padding:0; } @media (min-width:1200px){ .filter-aside{ width:264px; margin-right:24px; float:left; clear:left; } .filter-aside__toggle{ display:none; } .filter-aside__offcanvas{ position:static; transform:none; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; } .filter-aside__head{ display:none; } } @media (max-width:1199px){ .filter-aside{ width:0; } .filter-aside__offcanvas{ position:fixed; top:0; bottom:0; left:0; width:min(360px,88vw); background:#fff; box-shadow:var(--shadow-lg); transform:translateX(-105%); transition:transform .35s var(--ease); z-index:230; overflow-y:auto; padding:20px; box-sizing:border-box; display:flex; flex-direction:column; } html.is-filter-open .filter-aside__offcanvas{ transform:translateX(0); } .filter-aside__offcanvas form{ display:flex; flex-direction:column; flex:1; min-height:0; } .filter-aside__close{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--surface-2); flex:none; } .filter-aside__body{ flex:1; overflow-y:auto; } .filter-aside__foot{ padding-top:14px; border-top:1px solid var(--border); } } /* ---------- 37. ЧЕКБОКСЫ-ТЕГИ ФИЛЬТРА (.ui-check) ---------- Без стилей чекбоксы фильтра рендерились обычными системными квадратиками браузера вместо аккуратных "таблеток"-тегов. */ .ui-check{ position:relative; display:inline-flex; cursor:pointer; } .ui-check__input{ position:absolute; opacity:0; width:1px; height:1px; } .ui-check__tag{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-pill); border:1.5px solid var(--border); font-size:.88rem; font-weight:600; color:var(--text-muted); transition:all var(--dur) var(--ease); } .ui-check__input:checked ~ .ui-check__tag{ border-color:var(--ink); background:var(--ink); color:#fff; } .ui-check__tag-cancel{ display:none; width:13px; height:13px; } .ui-check__input:checked ~ .ui-check__tag .ui-check__tag-cancel{ display:inline-flex; } .ui-check__checkbox{ flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; transition:all var(--dur) var(--ease); } .ui-check__input:checked ~ .ui-check__checkbox{ background:var(--ink); border-color:var(--ink); } .ui-check__input:checked ~ .ui-check__checkbox::after{ content:""; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); } li.filter-disabled .ui-check{ opacity:.4; pointer-events:none; } /* ---------- 38. УВЕДОМЛЕНИЯ (.alerts-wrapper / .alert) ---------- Ни одного правила не было и для этого блока — "Товар добавлен в корзину" и все ошибки форм выводились неоформленным текстом прямо в потоке страницы и наезжали на нижнее мобильное меню (см. скриншот). Теперь это всплывающий тост поверх интерфейса, включая нижнее меню. */ .alerts-wrapper{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:10px; width:min(420px,calc(100% - 32px)); } .alert{ position:relative; display:flex; align-items:flex-start; gap:10px; padding:14px 40px 14px 16px; border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-md); border-left:4px solid var(--ink); font-size:.92rem; line-height:1.4; animation:alertIn .25s var(--ease); } .alert--green{ border-left-color:var(--success); } .alert--red{ border-left-color:var(--danger); } .alert--opacity{ position:static; box-shadow:none; margin-bottom:12px; animation:none; } .alert__text{ margin:0; color:var(--text); flex:1; } .alert__close{ position:absolute; top:10px; right:10px; width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--text-soft); } .alert__close:hover{ color:var(--ink); } .alert__close svg,.icon-close-alerts{ width:12px; height:12px; } .alert.is-hide{ animation:alertOut .2s var(--ease) forwards; } @keyframes alertIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } } @keyframes alertOut{ to{ opacity:0; transform:translateY(-8px); } } @media (max-width:575px){ .alerts-wrapper{ top:10px; width:calc(100% - 20px); } } /* Тосты должны быть выше липкого нижнего меню на мобильном (z-index:150). */ /* ---------- 39. ВЕРХНЯЯ ПОЛОСА С ТЕЛЕФОНОМ (.header__topline) ---------- Просьба: закрепить номер телефона видимым сверху сайта (как у конкурента), но в стилистике текущей темы, а не плоской синей плашкой. */ .header__topline{ background:var(--ink); color:#fff; } .header__topline-in{ display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 0; font-size:.85rem; } .header__topline-tel{ display:inline-flex; align-items:center; gap:7px; font-weight:800; color:#fff; letter-spacing:.01em; } .header__topline-tel svg{ width:15px; height:15px; color:var(--accent); flex:none; } .header__topline-tel:hover{ color:var(--accent); } .header__topline-text{ color:rgba(255,255,255,.55); font-weight:500; } @media (max-width:575px){ .header__topline-in{ padding:8px 16px; gap:8px; font-size:.78rem; } .header__topline-text{ display:none; } } /* ---------- 40. ОПЦИИ ТОВАРА: ВЫБОР ЦВЕТА / ПАМЯТИ (.sku__group--options) ---------- Функция уже была в коде и работает (радио/чекбокс/селект под опции OpenCart), но карточки-варианты не имели стилей и превращались в голые системные радиокнопки — из-за этого казалось, что выбора цвета/памяти нет вообще. Чтобы это заработало — добавьте товару Options в админке (Каталог → Товары → вкладка "Опции"): радио-группу "Цвет" (можно с картинкой-миниатюрой на значение) и радио/селект-группу "Память". Верстка и стили уже готовы. */ .sku__group--options .ui-group{ display:block; margin-bottom:20px; } .sku__group--options .ui-group:last-child{ margin-bottom:0; } .sku__group--options .ui-label{ margin-bottom:10px; } .sku__group--options .ui-label.required::after{ content:" *"; color:var(--danger); } .ui-checklist{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; } .ui-checklist li{ display:flex; } .ui-check__option{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 16px; border-radius:var(--r-md); border:1.5px solid var(--border); font-weight:600; font-size:.92rem; color:var(--text); cursor:pointer; transition:all var(--dur) var(--ease); box-sizing:border-box; } .ui-check__option img{ width:21px; height:15px; border-radius:3px; object-fit:cover; flex:none; } .ui-check__input:hover ~ .ui-check__option{ border-color:var(--ink); } .ui-check__input:checked ~ .ui-check__option{ border-color:var(--ink); background:var(--ink); color:#fff; } .ui-check__input:focus-visible ~ .ui-check__option{ outline:2px solid var(--accent); outline-offset:2px; } .ui-check__input:disabled ~ .ui-check__option{ opacity:.4; cursor:not-allowed; text-decoration:line-through; } /* ========================================================================= ИСПРАВЛЕНИЯ ПО НОВЫМ СКРИНШОТАМ (продукт/каталог/поиск/шапка/страницы) ========================================================================= */ /* ---------- 41. ШАПКА: убрал дублирование телефона и тесноту ---------- Раньше .header__topline показывался и на десктопе (где телефон уже есть в другом месте — дублирование) и на мобильном НЕ был прилипающим, поэтому при скролле сразу пропадал — толку от него не было. Теперь: на десктопе полностью скрыт, на мобильном — прилипает вместе с шапкой и всегда виден. Также по просьбе — на мобильном справа от названия сайта убраны кнопки (сравнение/избранное/телефон/поиск), чтобы название не обрезалось: поиск и корзина уже продублированы в нижнем меню, звонок — в .header__topline. */ .header__topline{ display:none; } @media (max-width:1199px){ .header__topline{ display:block; position:sticky; top:0; z-index:121; } .header__topline-in{ min-height:36px; box-sizing:border-box; } /* ИСПРАВЛЕНО: .header тоже был position:sticky; top:0 — то есть ОБА блока лепились в одну и ту же точку и перекрывали друг друга (полоса с телефоном наезжала на шапку с названием магазина при скролле). Прижимаем шапку строго под высоту прилипающей полосы сверху. */ .header{ position:sticky; top:0; } .header__mobile{ min-width:0; } .header__mobile .header__group{ display:none; } .header__mobile .header__logo{ flex:0 0 auto; min-width:0; } .header__mobile-phone{ display:inline-flex; } } /* ---------- 42. ПАГИНАЦИЯ КАТАЛОГА ---------- ВАЖНО: в теме уже есть готовые правильные стили под класс .pagination__list (см. выше в файле) — они рабочие. То, что на скриншоте пагинация вылезла вертикальным голым списком, значит фактическая разметка, которую отдаёт `{{ pagination }}` (это генерируется PHP-классом system/library/pagination.php, его нет в присланном архиве — там только папка catalog), не совпадает с ожидаемым классом .pagination__list. Мне нужен именно этот файл (или просто HTML-код блока пагинации через "Просмотреть код страницы" в браузере), чтобы поправить точно, а не гадать вслепую ещё раз. */ /* ---------- 43. ВЫПАДАЮЩИЕ РЕЗУЛЬТАТЫ ПОИСКА (автокомплит) ---------- Панель с результатами поиска не имела ни фона, ни отступов, ни границ — наплывала на остальной контент страницы полупрозрачным нечитаемым блоком. */ .header__search-autocomplete{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:250; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); max-height:70vh; overflow-y:auto; padding:10px; } .header__search-autocomplete-item{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--r-md); } .header__search-autocomplete-item:hover{ background:var(--surface-2); } .header__search-autocomplete-item img{ width:44px; height:44px; object-fit:contain; flex:none; border-radius:var(--r-sm); background:#fff; } .header__search-autocomplete-item-name{ font-weight:600; font-size:.92rem; color:var(--text); } .header__search-autocomplete-item-price{ font-weight:800; white-space:nowrap; margin-left:auto; } .header__search-autocomplete-category{ padding:8px 8px 4px; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--text-soft); } /* ---------- 44. ТЕКСТОВЫЕ СТРАНИЦЫ (О компании / Доставка и оплата и т.п.) ---------- Контент этих страниц вставляется через текстовый редактор в админке как произвольный HTML — таблицы/заголовки внутри него ничем не оформлены и могли наезжать друг на друга. Подстраховка общими правилами. */ .description table,.seo table{ width:100%; border-collapse:collapse; margin:16px 0; } .description table td,.description table th,.seo table td,.seo table th{ padding:12px 14px; border:1px solid var(--border); vertical-align:top; text-align:left; } .description h1,.description h2,.description h3,.seo h1,.seo h2,.seo h3{ margin:1.1em 0 .5em; } .description p,.seo p{ margin:0 0 1em; } .description ul,.description ol,.seo ul,.seo ol{ margin:0 0 1em; padding-left:1.4em; list-style:revert; } /* ---------- 45. МЕЛКИЕ ПРОБЕЛЫ НА СТРАНИЦЕ КОРЗИНЫ (checkout/cart.twig) ---------- Прошёлся по всем классам шаблона корзины и сверил с CSS — эти четыре нигде не были описаны. */ .cart__title{ display:block; margin-bottom:20px; } .cart__text{ color:var(--text-soft); font-size:.92rem; } .cart__quick-action .row{ margin:0 -6px; } .cart__quick-action .col-6{ padding:0 6px; } .header__cart-data-quick-action{ margin-top:10px; } /* ---------- 46. ОФОРМЛЕНИЕ ЗАКАЗА: радио-карточки способов оплаты/доставки ---------- Прошёл шаблоны checkout/*.twig построчно — .ui-check__btn (карточка-радио для выбора способа оплаты, способа доставки, "войти или продолжить как гость") вообще не имела стилей — были только системные точки-радио без рамок, отступов и состояния "выбрано". Это самое важное место в оформлении заказа, где пользователь принимает решение — должно быть заметно. */ .checkout__step-payments,.checkout__step-method{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; } .ui-check__btn{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border:1.5px solid var(--border); border-radius:var(--r-md); cursor:pointer; transition:all var(--dur) var(--ease); } .ui-check__input:checked ~ .ui-check__btn{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset; } .ui-check__input:hover ~ .ui-check__btn{ border-color:var(--text-soft); } .ui-check__btn-radio{ flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%; border:1.5px solid var(--border); display:inline-flex; align-items:center; justify-content:center; transition:all var(--dur) var(--ease); } .ui-check__input:checked ~ .ui-check__btn .ui-check__btn-radio{ border-color:var(--ink); } .ui-check__input:checked ~ .ui-check__btn .ui-check__btn-radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--ink); } .ui-check__btn-desc{ display:flex; flex-direction:column; gap:4px; } .ui-check__btn-title{ font-weight:700; } .ui-check__btn-text{ font-size:.88rem; color:var(--text-soft); line-height:1.4; } .ui-check__btn-price{ margin-left:auto; font-weight:800; white-space:nowrap; } /* Прочие мелкие блоки оформления заказа без стилей */ .checkout__step-account{ font-size:.9rem; } .checkout__step-comment{ margin-bottom:20px; } .checkout__step-comment .ui-label{ margin-bottom:8px; } /* Форма личных данных на checkout: НЕ grid на уровне -data-group (внутри уже bootstrap .row с col-md-6), а .ui-group в форме — блочный столбец (лейбл над полем), иначе лейбл и поле вставали в один ряд и всё съезжало. */ .checkout__step-data-group{ display:block; margin-bottom:16px; } .checkout__step-data-group .ui-legend{ display:block; font-weight:800; font-size:1.05rem; margin-bottom:16px; } .checkout__step-data-group #account.row, .checkout__step-data-group > .row{ display:flex; flex-wrap:wrap; gap:16px 20px; margin:0; } .checkout__step-data-group .ui-group.col-md-6{ display:block; flex:1 1 calc(50% - 10px); min-width:220px; max-width:100%; padding:0; margin:0; } .checkout__step-data-group .ui-group.col-12, .checkout__step-data-group .ui-group.col-md-12{ flex:1 1 100%; } .checkout__step-data-group .ui-group .ui-label{ display:block; margin-bottom:8px; } .checkout__step-data-group .ui-group .ui-field{ margin-bottom:0; } .checkout__step-data-group .ui-group .ui-input, .checkout__step-data-group .ui-group select, .checkout__step-data-group .ui-group .ui-textarea{ width:100%; } @media (max-width:575px){ .checkout__step-data-group .ui-group.col-md-6{ flex:1 1 100%; } } .checkout__step-delivery{ margin-bottom:20px; } .checkout__data-action{ margin-top:20px; } .alert--yellow{ border-left-color:#e6a700; } /* ---------- 47. ОШИBКИ ВАЛИДАЦИИ ФОРМ (сайт целиком) ---------- .ui-error и .is-error используются ВЕЗДЕ (регистрация, вход, оформление заказа, контакты, отзывы, быстрый заказ) — JS добавляет их при ошибке, но стилей не было нигде на сайте: невалидное поле никак не выделялось, а текст ошибки был обычным чёрным текстом среди прочего контента. */ .ui-error{ display:block; margin-top:6px; font-size:.85rem; font-weight:600; color:var(--danger); } .ui-field.is-error .ui-input, .ui-field.is-error .ui-textarea, .ui-field.is-error .ui-select select, .is-error > .ui-input, .is-error > .ui-textarea, .is-error > select{ border-color:var(--danger) !important; } .form-group{ margin-bottom:16px; } .form-group .ui-label{ margin-bottom:8px; display:block; } .ui-legend{ display:block; font-weight:800; font-size:1.15rem; margin-bottom:16px; } /* ---------- 48. ПЕРЕКЛЮЧАТЕЛЬ ВИДА КАТАЛОГА: недостающий класс ---------- Кнопка "плитка" в блоке .ui-display ставит класс .products__list--grid-3, которого не было вообще нигде в CSS — кнопка была активна визуально, но физически ничего не переключала. Добавлено явное поведение: 3 колонки на десктопе (более крупные карточки, чем стандартные 4), с теми же брейкпоинтами, что у остальных вариантов списка. */ .products__list--grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:1199px){ .products__list--grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:767px){ .products__list--grid-3{ grid-template-columns:1fr; } } /* ---------- ИСПРАВЛЕНО: «Вы смотрели» на самом деле работает через Swiper.js (.swiper-container.swiper-products--responsive + .swiper-scrollbar), а НЕ через простую CSS-прокрутку .products__list--responsive, как я думал раньше — та правка была мимо, применялась к классам, которых нет в реальной разметке. Серая полоса на скриншотах — это встроенный скроллбар Swiper (.swiper-scrollbar), у него свои стили из swiper.min.css. Прячем по просьбе — сама карусель продолжает листаться свайпом/колёсиком. */ .js-swiper-products-scrollbar, .js-swiper-products-small-scrollbar, .js-swiper-products-order-scrollbar{ display:none !important; } .products-featured__swiper{ padding-bottom:4px; } .products__item--responsive{ height:100%; } .swiper-products .swiper-slide{ width:260px; height:auto; align-self:stretch; } .swiper-products .swiper-wrapper{ align-items:stretch; } @media (max-width:575px){ .swiper-products .swiper-slide{ width:200px; } } /* ---------- 49. OCFILTER: боковой фильтр каталога живёт на СВОЁМ стоковом CSS плагина (ocf.cache.*.css) — он НИКОГДА не был переоформлен под тему сайта (в app.css не было ни одного класса .ocf-). Отсюда рассинхрон: ползунок цены синий #3366D5, чекбоксы бирюзовые #219AC7/#3366D5, кнопка "Показать" красная #c31929, углы 4px вместо фирменных скруглений, шрифт не гарантированно Jost. Ниже — точечные переопределения только цвета, шрифта и скруглений (без изменения позиционирования/логики офканваса, чтобы не сломать мобильное открытие/закрытие панели). Из-за того что ocf.cache.*.css подключается ПОСЛЕ app.css, часть правил ниже требует !important, иначе проигрывает по порядку каскада при равной специфичности. */ .ocf-container, .ocf-container *{ font-family:var(--base-font-family,"Jost",inherit) !important; } .ocf-selected .ocf-value-input::before{ border-color:var(--accent) !important; background-color:var(--accent) !important; } .ocf-value:active .ocf-value-input-checkbox::before{ border-color:var(--accent-600) !important; background-color:var(--accent-600) !important; } .ocf-value-input-checkbox::before{ border-radius:5px !important; } .ocf-noUi-connect:before,.ocf-noUi-handle{ background-color:var(--accent) !important; } .ocf-noUi-active{ box-shadow:0 0 0 6px var(--accent-tint) !important; } .ocf-noUi-base:before{ background-color:var(--surface-2) !important; } .ocf-btn{ border-radius:var(--r-pill) !important; font-family:inherit; } .ocf-btn-default{ background-color:var(--surface-2) !important; color:var(--text) !important; } .ocf-btn-default:hover{ background-color:var(--accent-tint) !important; color:var(--accent-600) !important; } button.ocf-btn:not(.ocf-btn-default):not(.ocf-btn-link){ background-color:var(--accent) !important; color:#fff !important; } button.ocf-btn:not(.ocf-btn-default):not(.ocf-btn-link):hover{ background-color:var(--accent-600) !important; } .ocf-btn-link{ color:var(--accent) !important; } .ocf-btn-link:hover{ color:var(--accent-600) !important; } .ocf-active-label{ color:var(--accent) !important; } .ocf-filter-header{ font-weight:800 !important; } .ocf-header{ font-weight:800 !important; } /* --- Целостное оформление фильтра под тему (раньше был причёсан только цвет/шрифт кнопок, а сам контейнер, заголовки групп, список значений и внутренний скролл оставались стоковыми и выглядели зажато/чужеродно). --- */ .ocf-container.ocf-theme-light{ background:#fff !important; border:1.5px solid var(--border) !important; border-radius:var(--r-lg) !important; padding:6px !important; overflow:visible !important; } .ocf-content{ padding:10px 8px !important; } .ocf-header{ display:flex !important; align-items:center; gap:10px; font-size:1.05rem !important; padding:8px 8px 14px !important; margin:0 !important; border-bottom:1px solid var(--border) !important; } .ocf-body{ padding-top:6px !important; } /* Каждая группа-фильтр — с разделителем */ .ocf-filter{ border-bottom:1px solid var(--border) !important; padding:6px 0 !important; } .ocf-filter:last-child{ border-bottom:0 !important; } .ocf-filter-header{ display:flex !important; align-items:center; cursor:pointer; padding:12px 8px !important; border-radius:var(--r-md) !important; font-size:.82rem !important; letter-spacing:.02em; text-transform:uppercase !important; color:var(--ink) !important; transition:background var(--dur) var(--ease); } .ocf-filter-header:hover{ background:var(--surface-2) !important; } .ocf-filter-name{ flex:1; } /* Список значений: аккуратный внутренний скролл вместо стокового синего */ .ocf-value-list-body{ max-height:260px !important; overflow-y:auto !important; padding:2px 8px 8px !important; scrollbar-width:thin; scrollbar-color:var(--border) transparent; } .ocf-value-list-body::-webkit-scrollbar{ width:8px; } .ocf-value-list-body::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; } .ocf-value-list-body::-webkit-scrollbar-track{ background:transparent; } /* Строки значений (чекбокс + название + счётчик) */ .ocf-value{ display:flex !important; align-items:center; gap:10px; width:100% !important; padding:8px 6px !important; border-radius:var(--r-md) !important; text-align:left !important; background:none !important; border:0 !important; font-size:.9rem !important; color:var(--text) !important; transition:background var(--dur) var(--ease); } .ocf-value:hover{ background:var(--surface-2) !important; } .ocf-value-count{ margin-left:auto !important; color:var(--text-soft) !important; font-size:.8rem !important; } .ocf-selected.ocf-value, .ocf-value.ocf-selected{ color:var(--ink) !important; font-weight:700 !important; } /* Ссылки "Показать все / Скрыть" */ .ocf-toggle,.ocf-more,.ocf-less{ color:var(--accent) !important; font-weight:700 !important; font-size:.85rem !important; } /* Нижние кнопки действий — растянуть и выровнять */ .ocf-buttons,.ocf-footer{ display:flex !important; gap:10px !important; padding:14px 8px 8px !important; } .ocf-buttons .ocf-btn,.ocf-footer .ocf-btn{ flex:1 !important; height:46px !important; } /* ---------- 50. FANCYBOX: кнопка закрытия попапов ---------- ИСПРАВЛЕНО: в app.js (fancyboxOptions.btnTpl) стандартный шаблон кнопки переопределён на свою вёрстку с классом .fancybox-close (БЕЗ "-small") — стилей под этот класс не было нигде, поэтому кнопка рендерилась как голая инлайновая иконка в потоке документа (после формы, слева снизу), а не как крестик в углу окна. Все попапы сайта (вход, политика, обратный звонок, товар) используют один и тот же шаблон, поэтому фикс правит их все разом. Позиционируем в угол .popup (у него уже position:relative) и оформляем кружком в духе .phone-modal__close. */ .fancybox-close{ position:absolute !important; top:14px !important; right:14px !important; left:auto !important; bottom:auto !important; color:var(--text-soft) !important; opacity:1 !important; width:32px; height:32px; display:flex !important; align-items:center; justify-content:center; border-radius:50%; margin:0 !important; padding:0 !important; background:var(--surface-2) !important; transition:color var(--dur) var(--ease), background var(--dur) var(--ease); z-index:5; } .fancybox-close:hover{ color:#fff !important; background:var(--accent) !important; } .fancybox-close svg{ width:16px; height:16px; } /* Для крупных попапов с прокруткой (политика/условия) паддинг сверху, чтобы текст не начинался прямо под кнопкой закрытия. */ .popup--agree{ padding-top:56px; } /* Подстраховка от той же утечки цвета/подчёркивания, что видна на кнопке "Регистрация" в попапе входа — на случай отдельного :visited-состояния ссылки в браузере. */ a.ui-btn{ text-decoration:none !important; } a.ui-btn--grey{ color:var(--text) !important; } /* ---------- 51. КАРТОЧКА ТОВАРА: ЗВЁЗДНЫЙ РЕЙТИНГ В ОТЗЫВЕ (.ui-rating) ---------- У .ui-rating/.ui-rating__star/.ui-rating__input не было ВООБЩЕ никакого CSS нигде в теме. Разметка — 5 обычных радио-кнопок (порядок 5,4,3,2,1) каждая со своим