/* Theme Name: Drive Theme URI: https://drivekd.ru Description: Тема магазина «Драйв», Калининград. Мобильная версия — основная. Author: Drive Version: 2.3.0 Requires at least: 6.0 Requires PHP: 8.0 License: GPLv2 or later Text Domain: drive WC requires at least: 8.0 */ /* Шрифты лежат в теме — сайт не зависит от Google */ @font-face { font-family: 'Onest'; src: url('assets/fonts/onest.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('assets/fonts/unbounded.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; } /* ========================================================= 1. Основа ========================================================= */ :root { --ink: #1E0B26; --plum: #331839; --plum-2: #472052; --vio: #6D28D9; --vio-2: #7C3AED; --vio-soft: #EDE7FB; --vio-tint: #F6F2FD; --bg: #F5F3F8; --card: #FFFFFF; --line: #E7E2EF; --line-2: #D9D2E4; --mute: #6E6478; --mute-2: #978DA1; --ok: #1F7A4D; --ok-soft: #E4F4EA; --danger: #B42318; --r-lg: 20px; --r: 14px; --r-sm: 10px; --pad: 16px; --wrap: 1240px; --head-h: 60px; --f-display: 'Unbounded', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --shadow: 0 10px 30px rgba(30, 11, 38, .08); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; } html, body { max-width: 100%; overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } body.is-locked { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--vio); text-decoration: none; } a:hover { color: var(--plum); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--ink); } h1 { font-size: 26px; } h2 { font-size: 21px; } h3 { font-size: 17px; } p { margin: 0 0 1em; } :focus-visible { outline: 2px solid var(--vio-2); outline-offset: 2px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); } .screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--plum); color: #fff; padding: 12px 16px; border-radius: var(--r-sm); } .skip-link:focus { top: 8px; color: #fff; } /* ========================================================= 2. Кнопки ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-sm); font-family: var(--f-body); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .btn--primary { background: var(--vio); color: #fff; } .btn--primary:hover { background: var(--plum); color: #fff; } .btn--dark { background: var(--plum); color: #fff; } .btn--dark:hover { background: var(--plum-2); color: #fff; } .btn--ghost { background: #fff; border-color: var(--line-2); color: var(--ink); } .btn--ghost:hover { border-color: var(--vio); color: var(--vio); } .btn--soft { background: #F1EEF4; border-color: transparent; color: var(--ink); } .btn--soft:hover { background: var(--vio-soft); color: var(--plum); } /* Кнопка-заглушка у товара без наличия: место занято, нажать нельзя. */ .btn.is-off { background: #F4F2F7; border-color: transparent; color: var(--mute-2); pointer-events: none; cursor: default; } .btn.is-off svg { opacity: .55; } .btn--light { background: #fff; color: var(--plum); } .btn--light:hover { background: var(--vio-soft); color: var(--plum); } .btn--block { display: flex; width: 100%; } .btn[disabled] { opacity: .6; pointer-events: none; } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); flex: 0 0 auto; } .icon-btn:hover { background: var(--vio-tint); color: var(--vio); } .icon-btn svg { width: 22px; height: 22px; } .icon-btn .count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--vio); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } /* ========================================================= 3. Верхняя информационная строка ========================================================= */ .infobar { background: var(--plum); color: #E9DEF0; font-size: 13px; } .infobar a { color: #fff; } .infobar__in { display: flex; align-items: center; gap: 12px; min-height: 40px; } .infobar__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; } .infobar__item svg { width: 15px; height: 15px; flex: 0 0 auto; color: #C4B0D6; } .infobar__addr { flex: 0 1 auto; } .infobar__addr span { overflow: hidden; text-overflow: ellipsis; } .infobar__status { flex: 0 0 auto; } .infobar__soc { flex: 0 0 auto; } .infobar__status i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; flex: 0 0 auto; } .infobar__status.is-closed i { background: #F87171; } .infobar__phone, .infobar__mail, .infobar__hours { display: none; } .infobar__addr-mini, .infobar__status-mini { display: none; } .infobar__soc { margin-left: auto; display: flex; gap: 2px; } .infobar__soc a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; color: #E9DEF0; } .infobar__soc a:hover { background: rgba(255,255,255,.1); color: #fff; } .infobar__soc svg { width: 17px; height: 17px; } /* ========================================================= 4. Шапка ========================================================= */ .header { position: sticky; top: 0; z-index: 80; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); } .header.is-scrolled { box-shadow: 0 6px 18px rgba(30,11,38,.06); } .header__in { display: flex; align-items: center; gap: 4px; height: var(--head-h); } .header__logo { display: block; color: var(--plum); margin: 0 auto 0 6px; line-height: 0; } .header__logo svg { height: 22px; width: auto; } .header__nav { display: none; } .header__search { display: none; } .header__tools { display: flex; align-items: center; gap: 2px; } .header__phone-text { display: none; } .searchbar { display: none; padding: 0 var(--pad) 12px; } .searchbar.is-open { display: block; } .sform { position: relative; width: 100%; } .sform input[type="search"] { width: 100%; height: 46px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 48px 0 16px; background: var(--bg); font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none; } .sform input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .sform input[type="search"]:focus { border-color: var(--vio); background: #fff; outline: none; box-shadow: 0 0 0 3px var(--vio-soft); } .sform button { position: absolute; top: 3px; right: 3px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--mute); display: flex; align-items: center; justify-content: center; } .sform button svg { width: 20px; height: 20px; } /* ========================================================= 5. Мобильное меню ========================================================= */ .drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; } .drawer.is-open { visibility: visible; } .drawer__veil { position: absolute; inset: 0; background: rgba(30,11,38,.5); opacity: 0; transition: opacity .25s ease; } .drawer.is-open .drawer__veil { opacity: 1; } .drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 380px); background: #fff; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .28s ease; padding-bottom: env(safe-area-inset-bottom, 0px); } .drawer.is-open .drawer__panel { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); padding: 0 8px 0 var(--pad); border-bottom: 1px solid var(--line); flex: 0 0 auto; } .drawer__head .header__logo { margin: 0; } .drawer__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 24px; flex: 1 1 auto; } .drawer__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute-2); padding: 16px var(--pad) 6px; } .drawer__list { list-style: none; margin: 0; padding: 0; } .drawer__list a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px var(--pad); color: var(--ink); font-weight: 500; } .drawer__list a:hover { background: var(--vio-tint); color: var(--vio); } .drawer__list .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--vio-tint); color: var(--plum); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .drawer__list .ico svg { width: 22px; height: 22px; } .drawer__list .num { margin-left: auto; font-size: 13px; color: var(--mute-2); font-weight: 400; } .drawer__contacts { padding: 8px var(--pad) 0; display: grid; gap: 10px; font-size: 15px; } .drawer__contacts a { color: var(--ink); } .drawer__contacts .muted { color: var(--mute); font-size: 14px; } /* ========================================================= 6. Карусель акций ========================================================= */ .promo { padding: 14px 0 0; } .promo__wrap { padding-left: 0; padding-right: 0; } .header__burger-text { display: none; } .promo__track { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 var(--pad); scrollbar-width: none; -ms-overflow-style: none; } .promo__track::-webkit-scrollbar { display: none; } .slide { position: relative; flex: 0 0 88%; scroll-snap-align: center; scroll-snap-stop: always; min-height: 210px; border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 22px 20px; color: #fff; background: var(--plum); } .slide__bg { position: absolute; inset: 0; z-index: 0; } .slide__bg img { width: 100%; height: 100%; object-fit: cover; } .slide::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(30,11,38,.72) 0%, rgba(30,11,38,.15) 70%); } .slide--plain::after { display: none; } .slide > *:not(.slide__bg):not(.slide__art) { position: relative; z-index: 1; } .slide__tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.16); border-radius: 999px; padding: 5px 11px; } .slide__title { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1.12; margin: 0; color: #fff; max-width: 18ch; } .slide__text { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.86); margin: 0; max-width: 36ch; } .slide .btn { align-self: flex-start; min-height: 44px; margin-top: 4px; } .slide__art { position: absolute; right: -14px; top: -8px; width: 150px; height: 150px; color: rgba(255,255,255,.14); z-index: 0; } .slide__art svg { width: 100%; height: 100%; } .slide--v1 { background: linear-gradient(135deg, #331839 0%, #6D28D9 100%); } .slide--v2 { background: linear-gradient(135deg, #1E0B26 0%, #472052 100%); } .slide--v3 { background: linear-gradient(135deg, #5B21B6 0%, #9D4EDD 100%); } .slide--v4 { background: linear-gradient(135deg, #2A1233 0%, #7C3AED 100%); } .promo__dots { display: flex; justify-content: center; gap: 6px; padding: 12px 0 0; } .promo__dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: var(--line-2); transition: width .2s ease, background-color .2s ease; } .promo__dots button[aria-current="true"] { width: 22px; background: var(--vio); } /* ========================================================= 7. Лента брендов ========================================================= */ .brands { padding: 18px 0 0; } .brands__viewport { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); } .brands__row { display: flex; gap: 10px; width: max-content; animation: drive-marquee 38s linear infinite; } .brands__viewport:hover .brands__row, .brands__viewport:focus-within .brands__row { animation-play-state: paused; } .brand-chip { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--plum); font-family: var(--f-display); font-weight: 600; font-size: 14px; white-space: nowrap; } .brand-chip:hover { border-color: var(--vio); color: var(--vio); } @keyframes drive-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================= 8. Секции ========================================================= */ .section { padding: 28px 0 0; } .section:last-child { padding-bottom: 36px; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .section__head h2 { margin: 0; } .section__more { font-size: 14px; font-weight: 600; white-space: nowrap; } /* плитки категорий */ .cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; } .cat { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 118px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease; } .cat:hover { border-color: var(--vio); box-shadow: var(--shadow); color: var(--ink); } .cat__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--vio-tint); color: var(--plum); display: flex; align-items: center; justify-content: center; } .cat__ico svg { width: 28px; height: 28px; } .cat:hover .cat__ico { background: var(--vio); color: #fff; } .cat__name { font-weight: 700; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; } .cat__num { margin-top: auto; font-size: 13px; color: var(--mute); } /* горизонтальная лента карточек */ ul.products.rail { position: relative; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 6px; margin: 0; list-style: none; scrollbar-width: none; } ul.products.rail::-webkit-scrollbar { display: none; } .rail > li { scroll-snap-align: start; } /* инфо-карточки: доставка, гарантия, оплата */ .perks { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; } .perk { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); } a.perk:hover { border-color: var(--vio); color: var(--ink); } .perk__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--vio-tint); color: var(--vio); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .perk__ico svg { width: 24px; height: 24px; } .perk__title { display: block; font-weight: 700; font-size: 15px; margin-bottom: 2px; } .perk__text { display: block; font-size: 14px; color: var(--mute); line-height: 1.45; } /* блок магазина */ .store { background: var(--plum); color: #EFE6F5; border-radius: var(--r-lg); padding: 22px 18px; } .store h2 { color: #fff; margin-bottom: 14px; } .store__rows { display: grid; gap: 14px; margin-bottom: 18px; } .store__row { display: flex; gap: 12px; align-items: flex-start; } .store__row svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: #C4B0D6; } .store__row b { display: block; color: #fff; font-weight: 600; } .store__row span { display: block; font-size: 14px; color: #D6C8E0; } .store__row a { color: #fff; } .store__hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: 14px; } .store__hours dt { color: #D6C8E0; } .store__hours dd { margin: 0; color: #fff; font-weight: 600; } .store__btns { display: grid; gap: 10px; } .store__soc { display: flex; gap: 8px; margin-top: 16px; } .store__soc a { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; } .store__soc a:hover { background: rgba(255,255,255,.2); color: #fff; } .store__soc svg { width: 20px; height: 20px; } /* ========================================================= 9. Карточка товара в сетке ========================================================= */ ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; } /* WooCommerce добавляет к списку невидимые ::before/::after для флоатов — в сетке они занимали первую ячейку. Гасим с запасом по весу селектора. */ ul.products::before, ul.products::after, .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none !important; display: none !important; } ul.products > li { margin: 0; padding: 0; width: auto; float: none; min-width: 0; } ul.products > li:not(:has(.pcard)) { display: none; } .pcard { position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .pcard__media { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid var(--line); } .pcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; } .pcard__badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; } .badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; } .badge--in { background: var(--ok-soft); color: var(--ok); } .badge--in::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge--out { background: #F1EEF4; color: var(--mute); } .badge--sale { background: var(--vio); color: #fff; margin-left: auto; } .pcard__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; flex: 1 1 auto; min-width: 0; } .pcard__brand { min-height: 1.45em; line-height: 1.45; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute-2); } .pcard__title { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: calc(1.35em * 3); } a.pcard__title:hover { color: var(--vio); } .pcard__price { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 800; font-size: 17px; color: var(--ink); } .pcard__price del { font-size: 13px; font-weight: 400; color: var(--mute-2); order: 2; } .pcard__price ins { text-decoration: none; } .pcard__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pcard__actions { display: grid; gap: 6px; margin-top: 8px; } .pcard__actions .btn { min-height: 40px; padding: 0 10px; font-size: 13.5px; width: 100%; } .pcard__actions .added_to_cart { display: none; } /* ========================================================= 10. Каталог ========================================================= */ .page-head { padding-top: 12px; } .crumbs { font-size: 13px; color: var(--mute-2); white-space: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .crumbs::-webkit-scrollbar { display: none; } .crumbs a { color: var(--mute); } .crumbs a:hover { color: var(--vio); } .page-title { margin: 8px 0 4px; } .page-sub { color: var(--mute); font-size: 14px; margin: 0; } .subcats { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px 0 0; padding: 0 0 2px; list-style: none; } .subcats::-webkit-scrollbar { display: none; } .subcats a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; } .subcats a:hover, .subcats a.is-current { border-color: var(--vio); color: var(--vio); } .subcats a span { color: var(--mute-2); font-size: 12.5px; } .catalog { padding-top: 14px; padding-bottom: 36px; } .catalog__bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .catalog__bar .btn { min-height: 44px; padding: 0 14px; flex: 0 0 auto; } .catalog__bar .woocommerce-ordering { flex: 0 1 auto; min-width: 0; } .catalog__bar .woocommerce-ordering select { width: 100%; max-width: 220px; text-overflow: ellipsis; } .catalog__count { font-size: 13px; color: var(--mute); margin: 0 0 10px; } .woocommerce-ordering { margin: 0 0 0 auto; } .woocommerce-ordering select { height: 44px; max-width: 190px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 34px 0 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6478' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; font-size: 14px; color: var(--ink); -webkit-appearance: none; appearance: none; } .catalog__side { display: none; } .sheet { position: fixed; inset: 0; z-index: 210; visibility: hidden; } .sheet.is-open { visibility: visible; } .sheet__veil { position: absolute; inset: 0; background: rgba(30,11,38,.5); opacity: 0; transition: opacity .25s ease; } .sheet.is-open .sheet__veil { opacity: 1; } .sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; background: #fff; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .28s ease; padding-bottom: env(safe-area-inset-bottom, 0px); } .sheet.is-open .sheet__panel { transform: none; } .sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px var(--pad); border-bottom: 1px solid var(--line); } .sheet__head b { font-size: 17px; } .sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px var(--pad) 20px; } .filters .widget { padding: 12px 0; border-bottom: 1px solid var(--line); } .filters .widget:last-child { border-bottom: 0; } .filters .widget-title, .filters h3 { font-family: var(--f-body); font-size: 15px; font-weight: 700; margin: 0 0 10px; } .filters ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .filters li a { display: flex; justify-content: space-between; gap: 10px; min-height: 40px; align-items: center; color: var(--ink); font-size: 15px; } .filters li a:hover, .filters li.chosen a, .filters li.current-cat > a { color: var(--vio); } .filters .count { color: var(--mute-2); font-size: 13px; } .filters select { width: 100%; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 12px; background: #fff; } /* Пагинация. Селекторы длинные намеренно: перебиваем базовый скин WooCommerce, который рисует рамку вокруг всего списка и разделители между цифрами. */ .woocommerce-pagination, .woocommerce nav.woocommerce-pagination { display: block; margin: 28px 0 8px; padding: 0; border: 0; text-align: center; } .woocommerce-pagination ul.page-numbers, .woocommerce nav.woocommerce-pagination ul.page-numbers { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; border: 0; border-radius: 0; white-space: normal; } .woocommerce-pagination ul.page-numbers li, .woocommerce nav.woocommerce-pagination ul.page-numbers li { display: block; float: none; margin: 0; padding: 0; border: 0; overflow: visible; } .woocommerce-pagination ul.page-numbers li .page-numbers, .woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-family: var(--f-body); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } .woocommerce-pagination ul.page-numbers li a.page-numbers:hover, .woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover { background: var(--vio-tint); border-color: var(--vio); color: var(--vio); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(109, 40, 217, .15); } .woocommerce-pagination ul.page-numbers li a.page-numbers:active, .woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:active { transform: translateY(0); box-shadow: none; } .woocommerce-pagination ul.page-numbers li span.current, .woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current { background: linear-gradient(135deg, var(--vio-2), var(--vio)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(109, 40, 217, .28); } .woocommerce-pagination ul.page-numbers li span.page-numbers.dots, .woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots { min-width: 26px; padding: 0; border-color: transparent; background: transparent; color: var(--mute-2); box-shadow: none; letter-spacing: 1px; } .woocommerce-pagination ul.page-numbers li a.prev, .woocommerce-pagination ul.page-numbers li a.next, .woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev, .woocommerce nav.woocommerce-pagination ul.page-numbers li a.next { color: var(--vio); font-size: 19px; } @media (max-width: 520px) { .woocommerce-pagination, .woocommerce nav.woocommerce-pagination { margin: 22px 0 4px; } .woocommerce-pagination ul.page-numbers, .woocommerce nav.woocommerce-pagination ul.page-numbers { gap: 4px; } .woocommerce-pagination ul.page-numbers li .page-numbers, .woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers { min-width: 36px; height: 40px; padding: 0 6px; font-size: 14px; border-radius: 11px; } .woocommerce-pagination ul.page-numbers li span.page-numbers.dots, .woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots { min-width: 16px; } } @media (max-width: 400px) { .woocommerce-pagination ul.page-numbers li .page-numbers, .woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers { min-width: 34px; padding: 0 4px; } } .empty { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 18px; text-align: center; color: var(--mute); } /* ========================================================= 11. Страница товара ========================================================= */ .single-product div.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 10px 0 0; } .single-product div.product > * { min-width: 0; } .woocommerce-product-gallery { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; margin: 0; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1/1; object-fit: contain; } .woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 0; display: flex; align-items: center; justify-content: center; } .woocommerce-product-gallery__trigger::before { content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E0B26' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat; } .woocommerce-product-gallery__trigger img { display: none; } .flex-control-thumbs { display: flex; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; overflow-x: auto; } .flex-control-thumbs li { flex: 0 0 64px; } .flex-control-thumbs img { border: 1px solid var(--line); border-radius: 10px; cursor: pointer; aspect-ratio: 1/1; object-fit: contain; background: #fff; } .flex-control-thumbs img.flex-active { border-color: var(--vio); } .summary .product_title { font-size: 22px; margin: 4px 0 8px; } .pmeta { font-size: 12.5px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; } .pmeta b { color: var(--ink); font-weight: 600; } .pbox { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px; } .pbox .badge { margin-bottom: 10px; } .pbox .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: var(--f-display); font-weight: 800; font-size: 28px; color: var(--ink); margin: 0 0 14px; } .pbox .price del { font-family: var(--f-body); font-size: 16px; font-weight: 400; color: var(--mute-2); order: 2; } .pbox .price ins { text-decoration: none; } .pbox form.cart { display: flex; gap: 8px; margin: 0 0 8px; } .pbox form.cart .single_add_to_cart_button { flex: 1 1 auto; } .pbox .quantity { display: flex; } .pbox .quantity input.qty { width: 72px; height: 52px; border: 1px solid var(--line-2); border-radius: var(--r-sm); text-align: center; font-size: 16px; -moz-appearance: textfield; } .pbox button.single_add_to_cart_button { min-height: 52px; border: 0; border-radius: var(--r-sm); background: var(--vio); color: #fff; font-weight: 700; font-size: 15px; padding: 0 16px; } .pbox button.single_add_to_cart_button:hover { background: var(--plum); } .pbox .drive-buy { min-height: 52px; } .pbox .stock { display: none; } .pbox__note { font-size: 13px; color: var(--mute); margin: 10px 0 0; } .pinfo { display: grid; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 16px; margin-bottom: 12px; } .pinfo__row { display: flex; gap: 12px; padding: 12px 0; } .pinfo__row + .pinfo__row { border-top: 1px solid var(--line); } .pinfo__row svg { width: 20px; height: 20px; color: var(--vio); flex: 0 0 auto; margin-top: 1px; } .pinfo__row b { display: block; font-size: 14.5px; } .pinfo__row span { display: block; font-size: 13.5px; color: var(--mute); } .pspecs { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .pspecs li { font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; } .pspecs li span { color: var(--mute); } .woocommerce-tabs { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 16px 16px; } .woocommerce-tabs ul.tabs { display: flex; gap: 4px; list-style: none; margin: 0 0 14px; padding: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; } .woocommerce-tabs ul.tabs li { flex: 0 0 auto; } .woocommerce-tabs ul.tabs a { display: block; padding: 14px 10px 12px; color: var(--mute); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; white-space: nowrap; } .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--vio); } .woocommerce-tabs .panel > h2:first-child { display: none; } .woocommerce-tabs .panel { font-size: 15px; overflow-wrap: anywhere; } .woocommerce-tabs .panel ul { padding-left: 18px; } .woocommerce-tabs table { width: 100%; border-collapse: collapse; } .woocommerce-tabs table th, .woocommerce-tabs table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; } .woocommerce-tabs table th { color: var(--mute); font-weight: 400; width: 42%; padding-right: 12px; } .woocommerce-tabs table td p { margin: 0; } .woocommerce-tabs table tr:last-child th, .woocommerce-tabs table tr:last-child td { border-bottom: 0; } .related, .upsells { padding-top: 12px; } .related > h2, .upsells > h2 { font-size: 19px; margin-bottom: 12px; } /* ========================================================= 12. Страницы: гарантия, доставка и прочие ========================================================= */ .doc { padding-top: 14px; padding-bottom: 36px; } .doc__hero { background: var(--plum); color: #fff; border-radius: var(--r-lg); padding: 22px 18px; margin: 12px 0 14px; position: relative; overflow: hidden; } .doc__hero h1 { color: #fff; margin: 0; font-size: 24px; } .doc__hero .crumbs, .doc__hero .crumbs a { color: #D6C8E0; } .doc__hero-art { position: absolute; right: -18px; bottom: -22px; width: 130px; height: 130px; color: rgba(255,255,255,.1); } .doc__hero-art svg { width: 100%; height: 100%; } .doc__grid { display: grid; gap: 14px; } .entry { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 18px; font-size: 16px; overflow-wrap: anywhere; } .entry > *:first-child { margin-top: 0; } .entry > *:last-child { margin-bottom: 0; } .entry h2 { font-size: 18px; margin: 26px 0 10px; padding-top: 20px; border-top: 1px solid var(--line); } .entry h2:first-child, .entry .lead + h2 { } .entry h3 { font-size: 16px; margin: 20px 0 8px; } .entry .lead { font-size: 17px; line-height: 1.55; color: var(--ink); } .entry .note { font-size: 14px; color: var(--mute); background: var(--vio-tint); border-radius: var(--r-sm); padding: 12px 14px; } .entry ul, .entry ol { margin: 0 0 1em; padding: 0; list-style: none; display: grid; gap: 8px; } .entry ul li { position: relative; padding-left: 22px; } .entry ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--vio); transform: rotate(45deg); } .entry ol { counter-reset: n; } .entry ol li { position: relative; padding-left: 36px; counter-increment: n; min-height: 26px; } .entry ol li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--vio-soft); color: var(--vio); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .entry a { text-decoration: underline; text-underline-offset: 2px; } .entry img { border-radius: var(--r); } .entry table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .entry th, .entry td { padding: 10px; border: 1px solid var(--line); text-align: left; } .aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; } .aside-card h3 { font-size: 16px; margin-bottom: 12px; } .aside-card .store__row svg { color: var(--vio); } .aside-card .store__row b { color: var(--ink); } .aside-card .store__row span { color: var(--mute); } .aside-card .store__row a { color: var(--ink); } .aside-card .store__rows { margin-bottom: 14px; } .aside-card .store__hours dt { color: var(--mute); } .aside-card .store__hours dd { color: var(--ink); } .aside-card .store__btns { grid-template-columns: minmax(0, 1fr); } .aside-card .store__btns .btn { width: 100%; } .aside-links { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 2px; } .aside-links a { display: flex; align-items: center; justify-content: space-between; min-height: 42px; color: var(--ink); font-weight: 500; } .aside-links a:hover, .aside-links a.is-current { color: var(--vio); } .aside-links svg { width: 16px; height: 16px; color: var(--mute-2); } /* ========================================================= 13. WooCommerce: уведомления, корзина, оформление ========================================================= */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--vio); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; } .woocommerce-error { border-left-color: var(--danger); display: block; } .woocommerce-error li { margin: 2px 0; } .woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-sm); background: var(--vio); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center; } .woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--plum); color: #fff; } .woocommerce .button:disabled, .woocommerce button.button:disabled[disabled] { opacity: .55; } .woocommerce form .form-row { margin: 0 0 14px; padding: 0; } .woocommerce form .form-row label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .woocommerce form .form-row .required { color: var(--danger); text-decoration: none; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .select2-container .select2-selection--single, .woocommerce table.cart td.actions .coupon .input-text { width: 100%; min-height: 48px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; background: #fff; font-size: 16px; line-height: 1.3; } .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { line-height: 22px; padding: 0; } .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--vio); outline: none; box-shadow: 0 0 0 3px var(--vio-soft); } .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce form .form-row-wide { width: 100%; float: none; } .woocommerce .col2-set, .woocommerce #customer_details { display: grid; gap: 0; } .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { width: 100%; float: none; } .woocommerce table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 16px; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 15px; } .woocommerce table.shop_table thead th { border-top: 0; font-size: 13px; color: var(--mute); font-weight: 600; } /* корзина — карточками на телефоне */ .woocommerce-cart-form table.cart thead { display: none; } .woocommerce-cart-form table.cart, .woocommerce-cart-form table.cart tbody { display: block; border: 0; background: transparent; } .woocommerce-cart-form table.cart tr.cart_item { display: grid; grid-template-columns: 76px minmax(0, 1fr) 32px; grid-template-areas: "img name del" "img price price" "img qty sub"; gap: 4px 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 10px; } .woocommerce-cart-form table.cart tr.cart_item td { display: block; border: 0; padding: 0; font-size: 14.5px; } .woocommerce-cart-form td.product-thumbnail { grid-area: img; align-self: start; } .woocommerce-cart-form td.product-thumbnail img { width: 76px; height: 76px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; } .woocommerce-cart-form td.product-name { grid-area: name; font-weight: 500; line-height: 1.35; } .woocommerce-cart-form td.product-name a { color: var(--ink); } .woocommerce-cart-form td.product-price { grid-area: price; color: var(--mute); font-size: 13.5px; } .woocommerce-cart-form td.product-quantity { grid-area: qty; } .woocommerce-cart-form td.product-subtotal { grid-area: sub; text-align: right; font-weight: 800; } .woocommerce-cart-form td.product-subtotal { grid-column: 3 / 4; } .woocommerce-cart-form tr.cart_item { grid-template-areas: "img name del" "img price price" "img qty qty"; } .woocommerce-cart-form td.product-subtotal { display: none !important; } .woocommerce-cart-form td.product-remove { grid-area: del; align-self: start; text-align: right; } .woocommerce-cart-form td.product-remove a.remove { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; color: var(--mute) !important; font-size: 22px; line-height: 1; } .woocommerce-cart-form td.product-remove a.remove:hover { background: #FCE9E7; color: var(--danger) !important; } .woocommerce-cart-form .quantity input.qty { width: 72px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-sm); text-align: center; } .woocommerce-cart-form td[data-title]::before { content: none; } .woocommerce-cart-form table.cart tr:not(.cart_item) { display: block; } .woocommerce-cart-form table.cart td.actions { display: grid; gap: 10px; padding: 0; border: 0; } .woocommerce-cart-form td.actions .coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .woocommerce-cart-form td.actions .coupon label { display: none; } .woocommerce-cart-form td.actions > .button { width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line-2); } .cart-collaterals { margin-top: 16px; } .cart_totals { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .cart_totals h2 { font-size: 18px; } .cart_totals table.shop_table { border: 0; margin: 0; } .cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 10px 0; } .cart_totals table.shop_table tr:first-child th, .cart_totals table.shop_table tr:first-child td { border-top: 0; } .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; font-size: 16px; margin-top: 12px; } .woocommerce-checkout h3 { font-size: 18px; margin: 0 0 12px; } .woocommerce-checkout-review-order { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .woocommerce-checkout-review-order table.shop_table { border: 0; } .woocommerce-checkout-review-order table.shop_table th, .woocommerce-checkout-review-order table.shop_table td { padding: 10px 0; } #payment { margin-top: 12px; } #payment ul.payment_methods { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; } #payment ul.payment_methods li { background: var(--bg); border-radius: var(--r-sm); padding: 12px; } #payment .payment_box { font-size: 14px; color: var(--mute); margin-top: 8px; } #place_order { width: 100%; min-height: 54px; font-size: 16px; } .woocommerce-privacy-policy-text { font-size: 13px; color: var(--mute); } /* ========================================================= 15. Подвал ========================================================= */ .footer { background: var(--ink); color: #CFC2DA; margin-top: 8px; padding: 30px 0 calc(20px + env(safe-area-inset-bottom, 0px)); font-size: 14.5px; } .footer a { color: #E9DEF0; } .footer a:hover { color: #fff; } .footer__logo { display: inline-block; color: #fff; margin-bottom: 12px; line-height: 0; } .footer__logo svg { height: 22px; width: auto; } .footer__cols { display: grid; gap: 22px; } .footer__title { font-weight: 700; color: #fff; font-size: 15px; margin: 0 0 10px; } .footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .footer__soc { display: flex; gap: 8px; margin-top: 14px; } .footer__soc a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; } .footer__soc a:hover { background: rgba(255,255,255,.16); } .footer__soc svg { width: 19px; height: 19px; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 24px; padding-top: 16px; display: grid; gap: 6px; font-size: 13px; color: #9E91AA; } /* ========================================================= 16. Планшет ========================================================= */ @media (min-width: 600px) { :root { --pad: 24px; } h1 { font-size: 30px; } h2 { font-size: 24px; } .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } ul.products.rail { grid-auto-columns: 34%; } .slide { flex-basis: 92%; min-height: 250px; padding: 28px; } .slide__title { font-size: 30px; } .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); } .perk { flex-direction: column; } .store { padding: 28px; } .store__btns { grid-template-columns: repeat(2, max-content); } .pcard__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .infobar__hours { display: inline-flex; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 6px); float: left; } .woocommerce form .form-row-last { float: right; } .woocommerce form .form-row-wide, .woocommerce form .form-row.notes { clear: both; } } /* ========================================================= 17. Компьютер ========================================================= */ @media (min-width: 1024px) { :root { --pad: 32px; --head-h: 76px; } h1 { font-size: 36px; } h2 { font-size: 26px; } .infobar__in { gap: 22px; } .infobar__phone { display: inline-flex; } .header__in { gap: 20px; } .header__burger { order: 1; width: auto; height: 46px; padding: 0 16px; gap: 8px; background: var(--vio); color: #fff; border-radius: 12px; font-weight: 600; font-size: 15px; } .header__burger:hover { background: var(--plum); color: #fff; } .header__burger svg { width: 20px; height: 20px; } .header__burger-text { display: inline; } .header__logo { order: 0; margin-right: 8px; } .header__nav { order: 2; } .header__search { order: 3; } .header__tools { order: 4; } .header__logo { margin: 0; } .header__logo svg { height: 28px; } .header__nav { display: block; flex: 1 1 auto; min-width: 0; } /* пункты, которые не влезают, уходят на невидимую вторую строку целиком, а не обрезаются */ .header__nav ul { display: flex; flex-wrap: wrap; gap: 0 4px; height: 44px; overflow: hidden; list-style: none; margin: 0; padding: 0; } .header__nav a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 500; font-size: 15px; white-space: nowrap; } .header__nav a:hover, .header__nav .current-menu-item > a, .header__nav a.is-current { background: var(--vio-tint); color: var(--vio); } .header__search { display: block; width: 260px; flex: 0 0 auto; } .header__search-toggle { display: none; } .header__call { display: none; } .searchbar { display: none !important; } .promo { padding-top: 24px; } .promo__wrap { padding-left: var(--pad); padding-right: var(--pad); } .promo__track { gap: 16px; padding: 0; } .slide { flex-basis: 100%; } .slide { min-height: 340px; padding: 44px; justify-content: center; } .slide__title { font-size: 42px; } .slide__text { font-size: 16px; } .slide__art { width: 300px; height: 300px; right: 30px; top: 50%; transform: translateY(-50%); } .section { padding-top: 44px; } .section__head { margin-bottom: 18px; } .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .cat { min-height: 150px; padding: 20px; } .cat__name { font-size: 16px; } ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } ul.products.rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; overflow: visible; padding: 0; } .rail-wrap { padding: 0 var(--pad); max-width: var(--wrap); margin: 0 auto; } .pcard__body { padding: 14px 14px 16px; } .pcard__title { font-size: 15px; min-height: calc(1.35em * 3); } .pcard__price { font-size: 19px; } .pcard__actions { grid-template-columns: minmax(0, 1fr); } .store { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; padding: 36px; align-items: start; } .store__btns { grid-template-columns: max-content max-content; } .page-head { padding-top: 22px; } .catalog { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 20px; } .catalog__side { display: block; position: sticky; top: calc(var(--head-h) + 16px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 18px; max-height: calc(100vh - var(--head-h) - 32px); overflow-y: auto; } .catalog__filter-btn { display: none; } .catalog__bar { margin-bottom: 16px; } .single-product div.product { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; padding-top: 20px; align-items: start; } .single-product div.product > .woocommerce-tabs, .single-product div.product > .related, .single-product div.product > .upsells, .single-product div.product > .up-sells { grid-column: 1 / -1; } .summary .product_title { font-size: 30px; } .pbox { padding: 22px; } .pbox .price { font-size: 34px; } .woocommerce-tabs { padding: 0 24px 22px; } .doc__hero { padding: 36px; margin-top: 20px; } .doc__hero h1 { font-size: 34px; } .doc__hero-art { width: 220px; height: 220px; right: 20px; bottom: -40px; } .doc__grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; } .doc__grid .aside-card { position: sticky; top: calc(var(--head-h) + 16px); } .entry { padding: 32px 36px; } .entry h2 { font-size: 20px; } .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .cart-collaterals { margin-top: 0; } .cart-collaterals .cart_totals { width: 100%; float: none; } .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; } .woocommerce-checkout form.checkout > .col2-set { grid-column: 1; } .woocommerce-checkout form.checkout > #order_review_heading, .woocommerce-checkout form.checkout > #order_review { grid-column: 2; } .woocommerce-checkout form.checkout > #order_review_heading { grid-row: 1; margin: 0; } .woocommerce-checkout form.checkout > #order_review { grid-row: 2; } .woocommerce-checkout form.checkout > .col2-set { grid-row: 1 / span 2; } .footer { padding-top: 44px; } .footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; } .footer__bottom { grid-template-columns: 1fr auto; } } @media (min-width: 1280px) { .header__search { width: 300px; } .infobar__mail { display: inline-flex; } } /* админ-панель WordPress не должна накрывать липкую шапку */ body.admin-bar .header { top: 46px; } @media (min-width: 783px) { body.admin-bar .header { top: 32px; } } @media (max-width: 600px) { body.admin-bar .header { top: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .brands__row { animation: none; } } .soc-row { display: flex; gap: 8px; margin-top: 4px; } .soc-row a { width: 44px; height: 44px; border-radius: 12px; background: var(--vio-tint); color: var(--plum); display: flex; align-items: center; justify-content: center; } .soc-row a:hover { background: var(--vio); color: #fff; } .soc-row svg { width: 20px; height: 20px; } /* Перебиваем штатные цвета WooCommerce */ .woocommerce div.product .pbox p.price, .woocommerce div.product .pbox span.price { color: var(--ink); } .woocommerce div.product .pbox p.price ins { color: var(--ink); } .woocommerce ul.products li.product .price, .pcard__price { color: var(--ink); } .woocommerce div.product form.cart .button.single_add_to_cart_button, .woocommerce div.product .pbox button.single_add_to_cart_button { background: var(--vio); color: #fff; opacity: 1; min-height: 52px; border-radius: var(--r-sm); font-weight: 700; font-size: 15px; padding: 0 18px; flex: 1 1 auto; } .woocommerce div.product form.cart .button.single_add_to_cart_button:hover { background: var(--plum); color: #fff; } .woocommerce div.product form.cart div.quantity { float: none; margin: 0; } .woocommerce div.product form.cart .button { float: none; } .woocommerce span.onsale { display: none; } .woocommerce a.added_to_cart { display: none; } .woocommerce ul.products li.product a.button.loading::after, .pcard .btn.loading { opacity: .7; } /* корзина-блок WooCommerce: без длинного описания товара */ .wc-block-components-product-metadata__description { display: none; } .wc-block-cart, .wc-block-checkout { font-family: var(--f-body); } .wc-block-components-button:not(.is-link) { border-radius: var(--r-sm); background: var(--vio); color: #fff; } .wc-block-components-button:not(.is-link):hover { background: var(--plum); color: #fff; } /* скрытое поле количества (товар в одном экземпляре) не должно давать отступ */ .pbox form.cart .quantity:has(input[type="hidden"]) { display: none; } .drawer__panel:focus, .sheet__panel:focus { outline: none; } /* Баннеры-картинки 3:1 со старого сайта */ .slide--banner { min-height: 0; padding: 0; aspect-ratio: 3 / 1; background: #1E0B26; display: block; flex-basis: 92%; } .slide--banner::after { display: none; } .slide--banner img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 1024px) { .slide--banner { flex-basis: 100%; min-height: 0; padding: 0; } } /* Нет в наличии — приглушаем карточку */ .pcard:has(.badge--out) .pcard__media img { opacity: .55; } /* Цвета модели */ .swatches { margin: 0 0 14px; } .swatches__label { display: block; font-size: 13.5px; color: var(--mute); margin-bottom: 8px; } .swatches__label b { color: var(--ink); font-weight: 600; } .swatches__row { display: flex; flex-wrap: wrap; gap: 8px; } .swatch { display: block; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--line-2); padding: 3px; background: #fff; } .swatch i { display: block; width: 100%; height: 100%; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(30,11,38,.12); } .swatch:hover { border-color: var(--vio); } .swatch.is-current { border-color: var(--vio); box-shadow: 0 0 0 3px var(--vio-soft); } .swatch.is-out { opacity: .45; } .swatch.is-out i { position: relative; } .swatch.is-out::after { content: ""; position: absolute; } .pcard__colors { font-size: 12px; color: var(--vio); } /* ========================================================= 15. Личный кабинет и «Мои заказы» ========================================================= */ /* на узких телефонах иконка не помещается — вход есть в меню «Каталог» */ .header__account { display: none; } @media (min-width: 400px) { .header__account { display: inline-flex; } } .woocommerce-account .woocommerce { display: grid; gap: 16px; } .woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after { content: none; } .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { float: none !important; width: auto !important; min-width: 0; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; } .woocommerce-MyAccount-navigation li { flex: 0 0 auto; margin: 0; } .woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; } .woocommerce-MyAccount-navigation a:hover { border-color: var(--vio); color: var(--vio); } .woocommerce-MyAccount-navigation li.is-active a { background: var(--plum); border-color: var(--plum); color: #fff; } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--mute); } .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .woocommerce-MyAccount-content > p:first-child { margin-top: 0; } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .woocommerce-account .woocommerce h2 { font-size: 18px; margin: 0 0 12px; } .woocommerce-MyAccount-content .woocommerce-info { border-left-color: var(--vio); } .woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 16px 0; } .woocommerce-MyAccount-content legend { padding: 0 6px; font-weight: 700; } .woocommerce-MyAccount-content form .button { width: 100%; } .woocommerce-Address { background: var(--bg); border-radius: var(--r); padding: 14px; } .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; } .woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0; font-size: 16px; } .woocommerce-Address address { font-style: normal; line-height: 1.5; margin-top: 8px; } /* таблицы заказов — карточками на телефоне */ @media (max-width: 767px) { .woocommerce table.shop_table_responsive { border: 0; background: transparent; } .woocommerce table.shop_table_responsive thead { display: none; } .woocommerce table.shop_table_responsive tbody, .woocommerce table.shop_table_responsive tr { display: block; } .woocommerce table.shop_table_responsive tbody tr { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 6px 14px; margin-bottom: 10px; } .woocommerce table.shop_table_responsive tbody th, .woocommerce table.shop_table_responsive tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); text-align: right; } .woocommerce table.shop_table_responsive tbody tr > :first-child { border-top: 0; } .woocommerce table.shop_table_responsive td[data-title]::before { content: attr(data-title); color: var(--mute); font-size: 13.5px; font-weight: 500; text-align: left; flex: 0 0 auto; } .woocommerce-orders-table__cell-order-actions { flex-wrap: wrap; justify-content: flex-end !important; } .woocommerce-orders-table__cell-order-actions::before { display: none; } .woocommerce-orders-table__cell-order-actions .button { flex: 1 1 auto; min-height: 42px; } } .woocommerce-orders-table__cell-order-actions .button { margin: 2px 0 2px 6px; min-height: 40px; padding: 0 14px; font-size: 14px; } .woocommerce-orders-table__cell-order-number a { font-weight: 700; } .woocommerce-account mark, .woocommerce-order-details mark, .track_order + * mark { background: var(--vio-soft); color: var(--plum); padding: 1px 6px; border-radius: 6px; font-weight: 600; } /* в кабинете у списка заказов вместо цифр две кнопки — разводим их по краям */ .woocommerce-pagination--without-numbers { display: flex; gap: 8px; justify-content: space-between; } /* вход и регистрация */ .woocommerce-account .u-columns { display: grid; gap: 16px; } .woocommerce-account .u-columns > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { border: 0; padding: 0; margin: 0; border-radius: 0; } .woocommerce-account form.lost_reset_password { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; max-width: 520px; } .woocommerce form.login .button, .woocommerce form.register .button, .woocommerce form.lost_reset_password .button { width: 100%; margin-top: 4px; } .woocommerce form .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-bottom: 10px; } .woocommerce-LostPassword { margin: 12px 0 0; font-size: 14px; } .woocommerce-account .woocommerce-privacy-policy-text, .woocommerce form.register > p:not(.form-row) { font-size: 13px; color: var(--mute); } .woocommerce .password-input { display: block; position: relative; } .woocommerce .show-password-input { top: 12px; right: 12px; } /* «Проверить заказ» */ .woocommerce form.track_order { border: 0; padding: 0; margin: 12px 0 0; } .woocommerce form.track_order > p:first-child { display: none; } .woocommerce form.track_order .button { width: 100%; } .woocommerce-order-details, .woocommerce-customer-details { margin-top: 20px; } .woocommerce-customer-details address { font-style: normal; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; line-height: 1.5; } @media (min-width: 600px) { .woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; align-items: start; } .woocommerce-MyAccount-content { padding: 22px; } .woocommerce-MyAccount-content form .button, .woocommerce form.track_order .button { width: auto; } } @media (min-width: 1024px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 24px; } .woocommerce-MyAccount-navigation ul { flex-direction: column; margin: 0; padding: 8px; overflow: visible; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); gap: 2px; } .woocommerce-MyAccount-navigation a { display: flex; width: 100%; border: 0; border-radius: var(--r-sm); background: transparent; } .woocommerce-MyAccount-navigation li.is-active a { background: var(--vio-soft); color: var(--plum); } .woocommerce-MyAccount-navigation-link--customer-logout { border-top: 1px solid var(--line); margin-top: 6px !important; padding-top: 6px; } .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } } /* Уведомления WooCommerce: убираем штатную иконку и клирфикс (они наезжают на текст), текст сверху, кнопка под ним */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-message::after, .woocommerce-info::after, .woocommerce-error::after { content: none !important; display: none !important; } .woocommerce-message, .woocommerce-info { flex-direction: column; align-items: flex-start; gap: 12px; line-height: 1.45; color: var(--ink); } .woocommerce-message .button, .woocommerce-info .button { order: 2; float: none; margin: 0 !important; } /* внутри кабинета — мягкие плашки без двойной рамки */ .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-info { background: var(--bg); border: 0; border-radius: var(--r); padding: 16px; } .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; } @media (max-width: 599px) { .woocommerce-message .button, .woocommerce-info .button { width: 100%; } } /* Вход и регистрация — одна карточка с переключателем */ .auth { max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--bg); border-radius: 12px; } .auth__tab { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px; color: var(--mute); font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color .18s ease, color .18s ease; } .auth__tab:hover { color: var(--plum); } .auth__tab[aria-selected="true"] { background: #fff; color: var(--plum); box-shadow: 0 1px 3px rgba(30, 11, 38, .12); } .auth__panel[hidden] { display: none; } .auth .woocommerce-form { margin: 0; } .auth .woocommerce-form .button { width: 100%; min-height: 50px; margin-top: 6px; } .auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 2px 0 12px; } .auth__row .woocommerce-form-login__rememberme { margin: 0; } .auth__lost { font-size: 14px; font-weight: 600; } .auth__switch { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: 14.5px; color: var(--mute); } .auth__switch a { font-weight: 700; } .auth .drive-reg-hint { margin: 0 0 14px; font-size: 13.5px; color: var(--mute); line-height: 1.45; } .auth .woocommerce-privacy-policy-text p { margin: 4px 0 8px; } .woocommerce-account .woocommerce > .woocommerce-notices-wrapper, .woocommerce-account .woocommerce > .woocommerce-info, .woocommerce-account .woocommerce > .woocommerce-message, .woocommerce-account .woocommerce > .woocommerce-error { max-width: 460px; } /* кнопка «показать пароль» — глаз внутри поля */ .woocommerce .password-input { display: block; position: relative; } .woocommerce form .form-row .password-input input.input-text { padding-right: 52px; } .woocommerce form .show-password-input, .woocommerce-page form .show-password-input { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--mute-2); } .woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; font-family: inherit; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; } .woocommerce form .show-password-input.display-password, .woocommerce-page form .show-password-input.display-password { color: var(--vio); } .woocommerce form .show-password-input:hover { color: var(--vio); } @media (min-width: 600px) { .auth { padding: 22px; } } /* ========================================================= 16. Отзывы ========================================================= */ .stars { --p: 0%; --s: 16px; display: inline-block; flex: 0 0 auto; width: calc(var(--s) * 5); height: var(--s); vertical-align: -2px; background: linear-gradient(90deg, #F5A524 var(--p), #E3DDEA var(--p)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 6 6.6.7-4.9 4.5 1.4 6.5L12 17l-5.9 3.3 1.4-6.5L2.6 9.3l6.6-.7z'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 6 6.6.7-4.9 4.5 1.4 6.5L12 17l-5.9 3.3 1.4-6.5L2.6 9.3l6.6-.7z'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x; } .stars--sm { --s: 13px; } .stars--lg { --s: 22px; } .prating { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 12px; color: var(--mute); font-size: 14px; text-decoration: none; } .prating b { color: var(--ink); } .prating:hover span { color: var(--vio); text-decoration: underline; } .pcard__rating { display: flex; align-items: center; gap: 5px; margin: 2px 0 4px; font-size: 12.5px; color: var(--mute); } .single-product div.product > .previews { grid-column: 1 / -1; } .previews { margin-top: 12px; } .rv { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .rv__title { font-size: 19px; margin: 0 0 14px; } .rv__title span { color: var(--mute-2); font-weight: 600; } .rv__top { display: grid; gap: 16px; margin-bottom: 8px; } .rsum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; background: var(--bg); border-radius: var(--r); padding: 14px 16px; } .rsum__avg { display: grid; justify-items: start; gap: 4px; } .rsum__avg b { font-family: var(--f-display); font-size: 36px; line-height: 1; color: var(--ink); } .rsum__avg > span:last-child { font-size: 13.5px; color: var(--mute); } .rsum__bars { list-style: none; margin: 0; padding: 0; flex: 1 1 180px; display: grid; gap: 5px; } .rsum__bars li { display: grid; grid-template-columns: 12px 1fr 24px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); } .rsum__bars i { height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; } .rsum__bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #F5A524; border-radius: 3px; } .rsum__bars em { font-style: normal; text-align: right; } .rv__cta > p { margin: 0 0 10px; color: var(--mute); font-size: 14.5px; } .rv__btns { display: flex; flex-wrap: wrap; gap: 8px; } .rv__btns .btn { flex: 1 1 140px; } .rv__done { margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 14.5px; } .rv__empty { margin: 8px 0 0; color: var(--mute); } .rform > summary { list-style: none; cursor: pointer; width: 100%; justify-content: center; } .rform > summary::-webkit-details-marker { display: none; } .rform[open] > summary { display: none; } .rform__form { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; } .rform__form .form-row { margin: 0 0 12px; } .rform__form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; } .rform__form input[type=text], .rform__form textarea { width: 100%; } .rform__form textarea { min-height: 120px; resize: vertical; } .rform__form small { display: block; margin-top: 5px; color: var(--mute); font-size: 12.5px; } .rform__note { font-size: 12.5px; color: var(--mute); margin: 0 0 12px; } .rform__form .form-submit { margin: 0; } .rform__form .form-submit .btn { width: 100%; min-height: 50px; } .rform__form #cancel-comment-reply-link { display: none; } .rstars-in { border: 0; padding: 0; margin: 0 0 12px; } .rstars-in legend { font-weight: 600; font-size: 14px; margin-bottom: 4px; padding: 0; } .rstars-in__row { display: inline-flex; flex-direction: row-reverse; gap: 2px; } .rstars-in__row input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rstars-in__row label { width: 40px; height: 40px; margin: 0; cursor: pointer; background: var(--line-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 6 6.6.7-4.9 4.5 1.4 6.5L12 17l-5.9 3.3 1.4-6.5L2.6 9.3l6.6-.7z'/%3E%3C/svg%3E") center / 34px 34px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 6 6.6.7-4.9 4.5 1.4 6.5L12 17l-5.9 3.3 1.4-6.5L2.6 9.3l6.6-.7z'/%3E%3C/svg%3E") center / 34px 34px no-repeat; transition: background-color .12s ease; } .rstars-in__row input:checked ~ label, .rstars-in__row label:hover, .rstars-in__row label:hover ~ label { background: #F5A524; } .rstars-in__row input:focus-visible + label { outline: 2px solid var(--vio); outline-offset: 2px; border-radius: 6px; } .rlist { list-style: none; margin: 8px 0 0; padding: 0; } .ritem { padding: 16px 0; border-top: 1px solid var(--line); } .ritem__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ritem__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--vio-soft); color: var(--plum); font-weight: 700; flex: 0 0 auto; } .ritem__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .ritem__who time { font-size: 13px; color: var(--mute-2); width: 100%; } .ritem__buyer { font-size: 12px; font-weight: 600; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 1px 8px; } .ritem__text { margin-top: 8px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; } .ritem__text p { margin: 0 0 8px; } .ritem__text p:last-child { margin-bottom: 0; } .ritem__pending { margin: 8px 0 0; font-size: 13px; color: var(--mute); background: var(--bg); border-radius: var(--r-sm); padding: 6px 10px; display: inline-block; } .ritem--pending .ritem__text { color: var(--mute); } .rlist .children { list-style: none; margin: 12px 0 0; padding: 0; } .rreply { margin-left: 16px; padding: 12px 14px; background: var(--vio-tint); border-left: 3px solid var(--vio); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .rreply__who { font-size: 13px; font-weight: 700; color: var(--plum); margin-bottom: 4px; } .rreply__text { font-size: 14.5px; line-height: 1.5; } .rreply__text p { margin: 0 0 6px; } .rreply__text p:last-child { margin: 0; } .rlist__more { width: 100%; margin-top: 8px; } .auth__why { margin: 0 0 14px; padding: 10px 12px; background: var(--vio-tint); border-radius: var(--r-sm); font-size: 14px; color: var(--plum); } @media (min-width: 600px) { .rv { padding: 22px; } .rv__btns .btn { flex: 0 0 auto; } .rform > summary, .rform__form .form-submit .btn { width: auto; } } @media (min-width: 1024px) { .rv__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .rv__top > .rv__cta:only-child { grid-column: 1 / -1; max-width: 640px; } .rlist { max-width: 820px; } } /* ========================================================= QA 24.09.2026 — исправления по итогам проверки глазами покупателя ========================================================= */ /* Верхняя строка на телефоне: адрес и статус в одну строку. Раньше адрес прятали целиком, потому что полный сжимался до «Гор…». Теперь берём короткие формы — «Горького 96» и «Завтра в 10:00» — и шрифт 12px, чтобы всё вместе с соцсетями помещалось даже на экране 320 px. */ @media (max-width: 560px) { .infobar { font-size: 12px; } .infobar__in { gap: 7px; } .infobar__addr { flex: 0 1 auto; } .infobar__item svg { width: 14px; height: 14px; } .infobar__addr-full, .infobar__status-full { display: none; } .infobar__addr-mini, .infobar__status-mini { display: inline; } .infobar__status { order: -1; } .infobar__status::after { content: '·'; color: #B9A6C8; } .infobar__soc { gap: 0; } .infobar__soc a { width: 28px; height: 28px; } .infobar__soc svg { width: 16px; height: 16px; } } /* Уже 360 px (iPhone SE и подобные) адрес уже не влезает рядом со статусом и обрезается многоточием — там оставляем только статус и соцсети. */ @media (max-width: 359px) { .infobar__addr { display: none; } .infobar__status::after { content: none; } } /* Хлебные крошки: длинное название товара раньше уезжало за край экрана без многоточия — теперь обрезается аккуратно. */ .crumbs { display: flex; align-items: baseline; flex-wrap: nowrap; overflow: hidden; } .crumbs a { flex: 0 0 auto; } .crumbs__sep { flex: 0 0 auto; white-space: pre; } .crumbs__cur { flex: 0 999 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Товар с выбором размера / цвета ---------- */ .pbox form.variations_form { display: block; } .pbox table.variations { width: 100%; border: 0; border-collapse: collapse; margin: 0 0 12px; } .pbox table.variations tr { display: block; margin: 0 0 10px; } .pbox table.variations th, .pbox table.variations td { display: block; padding: 0; border: 0; text-align: left; background: none; } .pbox table.variations th.label { margin: 0 0 6px; } .pbox table.variations label { font-size: 13px; font-weight: 600; color: var(--mute); } .pbox table.variations select { width: 100%; min-height: 48px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background-color: #fff; padding: 0 40px 0 14px; font: inherit; font-size: 16px; color: var(--ink); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b5a74' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .pbox table.variations select:focus { outline: 2px solid var(--vio); outline-offset: 1px; } .pbox table.variations td.value { position: relative; } .pbox .reset_variations { position: absolute; right: 0; top: -27px; font-size: 13px; color: var(--mute); text-decoration: underline; } .pbox .single_variation_wrap .woocommerce-variation { margin: 0 0 10px; } .pbox .woocommerce-variation-price .price { font-size: 22px; margin: 0; } .pbox .woocommerce-variation-availability p.stock { display: block; margin: 4px 0 0; font-size: 14px; font-weight: 600; } .pbox .woocommerce-variation-availability p.stock.in-stock { color: #1f7a45; } .pbox .woocommerce-variation-availability p.stock.out-of-stock { color: #b3261e; } .pbox .woocommerce-variation-add-to-cart { display: flex; gap: 8px; } .woocommerce div.product .pbox form.cart .button.single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; } .pbox .drive-buy--var:disabled { opacity: .45; cursor: not-allowed; } .pbox .drive-buy--var { width: 100%; margin-top: 8px; font: inherit; font-weight: 700; } /* товар с вариантами, когда нет ни одного в наличии, — как обычный товар без остатка */ .product.outofstock .pbox form.variations_form { display: none; } /* ========================================================= QA 25.09.2026 — блочный чекаут WooCommerce под стиль «Драйв» ========================================================= */ /* Заголовки шагов — акцидентный шрифт широкий, уменьшаем */ .wc-block-components-checkout-step__title { font-size: 19px; line-height: 1.25; margin: 0; } .wc-block-components-checkout-step__description { margin-top: 2px; } @media (max-width: 480px) { .wc-block-components-checkout-step__title { font-size: 17px; } } /* Ссылка «Войти» налезала на заголовок шага — уводим её на свою строку */ .wc-block-components-checkout-step__heading { display: block !important; margin: 0 0 12px !important; } .wc-block-components-checkout-step__heading-content { display: block !important; position: static !important; float: none !important; margin: 6px 0 0 !important; font-size: 13px; text-align: left; } .wc-block-checkout__login-prompt { float: none !important; position: static !important; display: inline !important; color: var(--vio); text-decoration: underline; } /* Магазин работает только по России — выбор страны в форме не нужен */ .wc-block-components-address-form__country { display: none !important; } /* Счёт всегда выставляется на адрес доставки — отдельный адрес не нужен */ .wc-block-checkout__use-address-for-billing { display: none !important; } /* К объединённому шагу WooCommerce дописывает подпись про способ оплаты. Перевода у неё нет, а покупателю она ничего не объясняет. */ .wc-block-checkout__billing-fields .wc-block-components-checkout-step__description { display: none; } /* На мобильном сводка заказа показывалась дважды: свёрнутая сверху и полная перед кнопкой. Оставляем полную — она рядом с кнопкой. */ .wc-block-checkout.is-mobile .wc-block-checkout__sidebar { display: none; } /* Поля ввода под стиль темы */ .wc-block-checkout .wc-block-components-text-input input, .wc-block-checkout .wc-block-components-textarea, .wc-block-checkout .wc-block-components-combobox-control input, .wc-block-checkout select { border-radius: var(--r-sm) !important; border-color: var(--line) !important; font-family: var(--f-body); } .wc-block-checkout .wc-block-components-text-input input:focus, .wc-block-checkout .wc-block-components-textarea:focus { border-color: var(--vio) !important; box-shadow: 0 0 0 3px rgba(109, 40, 217, .14); outline: none; } /* Карточки выбора: доставка/самовывоз, место выдачи, оплата */ .wc-block-checkout__shipping-method-container, .wc-block-components-radio-control-accordion-option, .wc-block-components-radio-control__option { border-radius: var(--r-sm) !important; } /* Кнопка оформления заказа */ .wc-block-components-checkout-place-order-button { border-radius: var(--r-sm) !important; min-height: 54px; font-size: 16px; font-weight: 700; } /* Самовывоз: адрес покупателю вводить не нужно — поля скрыты, в них подставляется адрес магазина (assets/js/drive-checkout.js) */ body.drive-pickup .wc-block-components-address-form__address_1, body.drive-pickup .wc-block-components-address-form__address_2, body.drive-pickup .wc-block-components-address-form__address_2-toggle, body.drive-pickup .wc-block-components-address-form__city, body.drive-pickup .wc-block-components-address-form__postcode { display: none !important; } /* Способы получения в корзине */ .drive-ship { margin-top: 16px; } .drive-ship .pinfo__row { align-items: flex-start; } .drive-ship__price { margin-left: auto; padding-left: 10px; font-style: normal; font-weight: 800; font-size: 14px; white-space: nowrap; } .drive-ship__price--free { color: var(--ok); } .drive-cart-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--mute); } /* Строка доставки в сводке корзины сбивает с толку: способ ещё не выбран, а выглядит как решённый. Показываем свой блок вместо неё. */ .wp-block-woocommerce-cart .wc-block-components-totals-shipping, .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-shipping-block { display: none !important; } /* ===================================================================== Понятная реакция корзины (QA 25.09) =================================================================== */ /* Карточки преимуществ — одинаковой высоты, даже если текст в две строки. */ .perks > li { display: flex; } .perks > li > .perk { flex: 1 1 auto; } /* Кнопка «В корзину»: ждём ответ сервера / товар добавлен. */ .pcard .btn.is-busy, .pcard .btn.loading { opacity: 1; } .btn.is-busy, .btn.is-done { pointer-events: none; } .btn.is-busy > svg, .btn.is-done > svg { display: none; } .btn.is-busy::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: drive-spin .7s linear infinite; } .btn.is-done::before { content: "✓"; font-weight: 800; font-size: 16px; line-height: 1; } .btn--primary.is-done { background: var(--ok); } @keyframes drive-spin { to { transform: rotate(360deg); } } /* Счётчик в шапке подмигивает, когда число изменилось. */ .icon-btn.is-pop { animation: drive-pop .45s ease; } @keyframes drive-pop { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } } /* Всплывающее подтверждение. */ .drive-toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--r); background: var(--ink); color: #fff; font-size: 15px; box-shadow: 0 12px 30px rgba(30, 11, 38, .28); opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .drive-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .drive-toast__go { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; } .drive-toast__go:hover { color: #fff; opacity: .85; } @media (max-width: 560px) { .drive-toast { left: 16px; right: 16px; max-width: none; transform: translateY(16px); flex-wrap: wrap; gap: 8px 14px; } .drive-toast.is-on { transform: translateY(0); } } /* Сообщение об ошибке: текст и кнопка в столбик, кнопка второстепенная. */ .woocommerce-error { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; line-height: 1.45; color: var(--ink); } .woocommerce-error > li { margin: 0; } .woocommerce-error .button { order: 2; float: none; margin: 0 !important; min-height: 42px; background: #fff; color: var(--ink); border: 1px solid var(--line-2); } .woocommerce-error .button:hover { background: #fff; border-color: var(--vio); color: var(--vio); } @media (max-width: 560px) { .woocommerce-error .button { width: 100%; } } /* Кнопки количества. WooCommerce рисует их полупрозрачными всегда — из-за этого рабочая кнопка выглядит выключенной. Возвращаем нормальный вид, а по-настоящему недоступную (товара больше нет в наличии) наоборот гасим сильнее. */ .wc-block-components-quantity-selector__button { opacity: 1 !important; color: var(--ink); font-size: 16px; font-weight: 600; } .wc-block-components-quantity-selector__button:hover { color: var(--vio); } .wc-block-components-quantity-selector__button:disabled, .wc-block-components-quantity-selector__button[disabled] { opacity: .25 !important; color: var(--ink); cursor: not-allowed; } .wc-block-components-quantity-selector.is-max { border-color: var(--line-2); } @media (max-width: 560px) { .wc-block-components-quantity-selector { min-height: 40px; } .wc-block-components-quantity-selector__button { min-width: 38px; } } /* Экран «Спасибо за заказ» (checkout/thankyou.php) */ .thanks { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--shadow); margin: 0 0 28px; } .thanks__badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); margin: 0 0 14px; } .thanks__badge svg { width: 28px; height: 28px; } .thanks--fail .thanks__badge { background: #FBE9E7; color: var(--danger); } .thanks__title { font-size: 26px; margin: 0 0 10px; } .thanks__lead { margin: 0 0 18px; color: var(--ink); font-size: 16px; } .thanks__next { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .thanks__next li { position: relative; padding-left: 26px; color: var(--mute); } .thanks__next li::before { content: ''; position: absolute; left: 8px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--vio); } .thanks__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 22px; padding: 16px; background: var(--vio-tint); border-radius: var(--r); } .thanks__facts dt { font-size: 13px; color: var(--mute); margin: 0 0 2px; } .thanks__facts dd { margin: 0; font-weight: 600; } .thanks__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } @media (max-width: 560px) { .thanks { padding: 22px 16px; border-radius: var(--r); } .thanks__title { font-size: 22px; } .thanks__actions .btn { width: 100%; } } /* Пометки заказа в «Мои заказы» */ .omark { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; } .omark--ok { background: var(--ok-soft); color: var(--ok); } .omark--no { background: #FBE9E7; color: var(--danger); } .omark--wait { background: var(--vio-soft); color: var(--vio); } .omark--off { background: #ECE8F1; color: var(--mute); } .omark--plain { background: #F1EEF4; color: var(--ink); } .omarks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }