и
вокруг shortcode на мобильном — иначе появляется лишний пробел */
body.home .entry-content > p:empty,
body.home .entry-content > br { display:none !important; }
/* Wpautop оборачивает hero в
— убираем margin-top у этого
*/
body.home .entry-content > p:has(> .e24-hero),
body.home .entry-content > p:first-of-type {
margin: 0 !important; padding: 0 !important;
}
/* Снимаем margin-bottom с шапки и top-padding у main/article */
body.home .e24-header { margin-bottom: 0 !important; }
body.home .site-main,
body.home .ct-container-full,
body.home article,
body.home .entry-content,
body.home .hero-section,
body.home .entry-header {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Сразу после поиска — hero без зазора */
body.home .entry-content > :first-child { margin-top: 0 !important; }
}
/* Legacy elements kept for back-compat but hidden on the new link variant */
.e24-rolls-bglink { position:absolute; inset:0; z-index:1; text-decoration:none; transition:transform .2s; border-radius:18px; }
.e24-rolls-bglink:hover ~ .e24-rolls-overlay { transform:translateY(-2px); }
.e24-rolls-overlay {
position:absolute; inset:0; padding:30px 36px; z-index:2; pointer-events:none;
display:flex; flex-direction:column; justify-content:space-between;
background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);
border-radius:18px; transition:transform .2s;
}
.e24-rolls-overlay .e24-rolls-tag { align-self:flex-start; pointer-events:auto; }
.e24-rolls-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.e24-rolls-info { pointer-events:auto; }
.e24-rolls-desc { font-size:1rem; font-weight:500; opacity:.95; margin-bottom:8px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.e24-rolls-priceline { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.e24-rolls-priceline .super { font-size:1.05rem; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5); letter-spacing:.02em; }
.e24-rolls-priceline .num { font-size:1.8rem; font-weight:900; color:var(--e24-yellow); text-shadow:0 2px 6px rgba(0,0,0,.6); }
.e24-rolls-bottom .btn-yellow { background:var(--e24-yellow); color:#111; padding:13px 22px; border-radius:10px; font-weight:800; font-size:.95rem; text-decoration:none; pointer-events:auto; transition:transform .15s,background .15s; }
.e24-rolls-bottom .btn-yellow:hover { background:var(--e24-yellow-dark); transform:translateY(-2px); }
/* CTA-only overlay (when image has all info baked in) */
.e24-rolls-overlay-cta-only { justify-content:flex-end; align-items:flex-end; padding:24px 30px; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35) 100%); }
.e24-rolls-cta-btn { background:var(--e24-yellow) !important; color:#111 !important; padding:14px 24px !important; border-radius:10px !important; font-weight:800 !important; font-size:1rem !important; text-decoration:none !important; pointer-events:auto !important; transition:transform .15s,background .15s !important; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.e24-rolls-cta-btn:hover { background:var(--e24-yellow-dark) !important; transform:translateY(-2px); }
.e24-rolls::before { content:""; position:absolute; inset:auto -80px -80px auto; width:340px; height:340px; background:radial-gradient(circle,var(--e24-yellow) 0%,transparent 70%); opacity:.15; }
.e24-rolls::after { content:""; position:absolute; top:-40px; left:-40px; width:180px; height:180px; background:radial-gradient(circle,var(--e24-purple) 0%,transparent 70%); opacity:.25; }
.e24-rolls-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center; position:relative; z-index:1; height:100%; }
@media (max-width:760px){ .e24-rolls-grid { grid-template-columns:1fr; } .e24-rolls-img { order:-1; } }
.e24-rolls-info h2 { font-size:2.3rem; margin:8px 0 12px; text-transform:uppercase; line-height:1; color:#fff; }
.e24-rolls-tag { display:inline-block; background:var(--e24-yellow); color:#111; padding:5px 12px; border-radius:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.e24-rolls .lead { font-size:.95rem; opacity:.8; margin:0 0 18px; max-width:460px; }
.e24-rolls-price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 20px; }
.e24-rolls-price .from { font-size:.85rem; opacity:.7; }
.e24-rolls-price .num { font-size:2rem; font-weight:900; color:var(--e24-yellow); }
.e24-rolls-price .credit { font-size:.82rem; opacity:.75; }
.e24-rolls-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.e24-rolls-cta .btn-yellow { background:var(--e24-yellow); color:#111; padding:13px 22px; border-radius:10px; font-weight:800; text-decoration:none; transition:.15s; }
.e24-rolls-cta .btn-yellow:hover { background:var(--e24-yellow-dark); transform:translateY(-2px); }
.e24-rolls-cta .btn-ghost { background:transparent; border:1.5px solid rgba(255,255,255,.35); color:#fff; padding:11.5px 22px; border-radius:10px; font-weight:700; text-decoration:none; transition:.15s; }
.e24-rolls-cta .btn-ghost:hover { border-color:var(--e24-yellow); color:var(--e24-yellow); }
.e24-rolls-img { display:flex; align-items:center; justify-content:center; }
.e24-rolls-img img { width:100%; max-width:420px; height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.e24-hero-side { display:grid; grid-template-rows:1fr 1fr; gap:20px; height:100%; align-self:stretch; }
.e24-side-tile {
border-radius:18px; padding:22px 24px; color:#fff; text-decoration:none; position:relative; overflow:hidden;
display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
min-height:0; /* было 210 — теперь плитки сжимаются по высоте баннера, не вылезают за нижнюю линию */
transition:.2s;
}
.e24-side-tile > div { text-align:left; align-self:flex-start; }
.e24-side-tile h3, .e24-side-tile p { text-align:left; }
.e24-side-tile:hover { transform:translateY(-3px); }
.e24-side-tile.academy {
background-color:#1a1040;
background-size:cover; background-position:center 22%;
overflow:hidden;
}
/* Gradient под текстом снизу — увеличен до 50% для читаемости текста, прижатого к нижнему краю */
.e24-side-tile.academy .text-bg {
position:absolute; left:0; right:0; bottom:0; height:50%;
background:linear-gradient(180deg, transparent 0%, rgba(8,2,25,.92) 100%);
z-index:1; pointer-events:none; border-radius:0 0 18px 18px;
}
.e24-side-tile.academy > *:not(.text-bg) { position:relative; z-index:2; }
.e24-side-tile.service { background-color:#1C1C1E; background-size:cover; background-position:center bottom; overflow:hidden; }
.e24-side-tile.service .text-bg {
position:absolute; left:0; right:0; bottom:0; height:50%;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.92) 100%);
z-index:1; pointer-events:none; border-radius:0 0 18px 18px;
}
.e24-side-tile.service > *:not(.text-bg) { position:relative; z-index:2; }
.e24-side-tile h3 { font-size:1.55rem; margin:0 0 6px; color:#fff; position:relative; z-index:1; }
.e24-side-tile p { margin:0; opacity:.85; font-size:.9rem; position:relative; z-index:1; }
/* Yellow CTA-button removed: вся плитка кликабельна, кнопка не нужна */
.e24-side-tile .btn { display:none !important; }
/* === CATEGORY TILES === */
.e24-cats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:14px auto 40px; max-width:min(1584px,94vw); padding:0 24px; box-sizing:border-box; }
/* Smooth 4 → 3 → 2 cascade. Mobile (≤900px) — всегда 2 колонки */
@media (max-width:1600px){ .e24-cats { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1100px){ .e24-cats { grid-template-columns:repeat(2,1fr); } }
/* Mobile (≤900px): компактные плитки 2×N, фото под текстом */
@media (max-width:900px){
.e24-cats {
grid-template-columns:repeat(2,1fr) !important;
gap:10px !important;
margin:14px auto 24px !important;
}
.e24-cat-tile {
padding:12px 12px 0 !important;
min-height:145px !important; /* высота уменьшена на ~15% (170 → 145) */
border-radius:12px !important;
overflow:hidden !important;
justify-content:flex-start !important;
}
.e24-cat-tile h3 {
font-size:1.0rem !important;
line-height:1.15 !important;
margin:0 0 4px !important;
max-width:100% !important;
}
.e24-cat-tile p,
.e24-cat-tile.has-img p { display:none !important; }
.e24-cat-tile .arr { display:none !important; }
.e24-cat-tile::after { display:none !important; }
/* Картинка прижата к правому нижнему углу, увеличена на 50% относительно
обычного contain-fit'а, лишнее уезжает за края (overflow:hidden у плитки). */
.e24-cat-tile.has-img .e24-cat-img {
position:absolute !important;
top:auto !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
height:78% !important;
background-position:right bottom !important;
background-size:auto 107% !important;
}
.e24-cat-tile.has-img h3 { max-width:100% !important; }
}
.e24-cat-tile {
background:#fff; border:1px solid #eee; border-radius:14px; padding:28px 24px; min-height:190px;
text-decoration:none; color:var(--e24-dark); display:flex; flex-direction:column; justify-content:space-between;
transition:.2s; position:relative; overflow:hidden;
}
.e24-cat-tile::after { content:""; position:absolute; inset:auto -20px -20px auto; width:110px; height:110px; background:var(--e24-yellow); border-radius:50%; opacity:.12; transition:.3s; }
.e24-cat-tile:hover { border-color:var(--e24-purple); transform:translateY(-3px); box-shadow:0 10px 28px rgba(108,31,174,.15); }
.e24-cat-tile:hover::after { opacity:.3; width:150px; height:150px; }
.e24-cat-tile h3 { font-size:1.4rem; margin:0 0 8px; position:relative; z-index:2; word-break:normal; overflow-wrap:normal; hyphens:none; }
.e24-cat-tile p { margin:0; color:#666; font-size:.9rem; position:relative; z-index:2; max-width:60%; word-break:normal; overflow-wrap:normal; word-wrap:normal; hyphens:none; }
.e24-cat-tile .arr { font-size:1.6rem; color:var(--e24-purple); margin-top:12px; position:relative; z-index:2; }
/* Category tile product image — full tile height, right-aligned, TOP layer (never clipped horizontally) */
.e24-cat-img {
position:absolute; top:0; bottom:0; right:0; width:72%;
z-index:3; pointer-events:none;
background-size:contain; background-repeat:no-repeat; background-position:right bottom;
transition:transform .25s;
}
.e24-cat-tile.has-img:hover .e24-cat-img { transform:scale(1.04); transform-origin:right center; }
.e24-cat-tile.has-img h3,
.e24-cat-tile.has-img p { max-width:50%; position:relative; z-index:4; }
.e24-cat-tile.has-img .arr { position:relative; z-index:4; }
/* === SECTION TITLES === */
.e24-st,.e24-section-title { display:flex; justify-content:space-between; align-items:center; margin:60px auto 24px; gap:20px; flex-wrap:wrap; max-width:min(1584px,94vw); padding:0 24px; box-sizing:border-box; }
.e24-st h2,.e24-section-title h2 { font-size:1.9rem; margin:0; text-transform:uppercase; }
.e24-st a,.e24-section-title a { color:var(--e24-purple); text-decoration:none; font-weight:700; }
/* Stylized spray-paint title — yellow graffiti stroke with scattered droplets */
h2.badge-title {
display:inline-block; position:relative; margin:0; padding:0;
line-height:1;
}
h2.badge-title .b {
display:inline-block; position:relative;
padding:28px 52px 30px;
font-size:2rem; font-weight:900; font-style:italic; letter-spacing:.03em;
line-height:1.05;
color:#2C2C2E; text-transform:uppercase;
word-break:normal; overflow-wrap:break-word; hyphens:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-size:100% 100%; background-position:center;
}
h2.badge-title .slashes { display:none; }
@media (max-width:900px){
h2.badge-title .b { font-size:1.7rem; padding:24px 40px 26px; max-width:100%; }
}
@media (max-width:600px){
h2.badge-title { display:block; width:100%; }
h2.badge-title .b {
font-size:1.35rem; padding:20px 32px 22px; max-width:100%;
text-align:center; white-space:normal;
/* word-spacing трюк — каждое слово переносится на новую строку */
word-spacing:100vw;
line-height:1.05;
}
}
@media (max-width:400px){
h2.badge-title .b { font-size:1.15rem; padding:18px 24px 20px; letter-spacing:0; }
}
/* === Mobile: все заголовки разделов центрированы по образцу СПЕЦПРЕДЛОЖЕНИЯ === */
@media (max-width:900px){
.e24-st,
.e24-section-title,
.e24-special-head,
.e24-news-head,
.e24-reviews-head,
.e24-similar-wrap {
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
gap:12px !important;
}
.e24-st h2,
.e24-section-title h2,
.e24-special-head h2,
.e24-news-head h2,
.e24-reviews-head h2,
body.e24-moto .e24-similar-title {
text-align:center !important;
width:100% !important;
}
/* «Показать все →», «Все отзывы», итп — под заголовком, центр */
.e24-st a,
.e24-section-title a,
.e24-news-all,
.e24-reviews-all { align-self:center !important; }
/* Стрелки каруселей под заголовком, центрированы рядом */
.e24-special-ctrls,
.e24-news-ctrls,
.e24-reviews-ctrls {
justify-content:center !important;
width:100% !important;
}
/* Sub-описание блока похожих моделей */
body.e24-moto .e24-similar-sub { text-align:center !important; }
/* Сам жёлтый штрих-фон (badge) — display block чтобы centered работал */
h2.badge-title { display:block !important; width:100% !important; text-align:center !important; }
h2.badge-title .b { display:inline-block !important; }
}
/* === CATALOG PAGE LAYOUT (pitbike-cross style) — Эндуро + Дорожные === */
body.term-enduro .e24-breadcrumb-wrap,
body.term-road .e24-breadcrumb-wrap,
body.term-mopeds .e24-breadcrumb-wrap,
body.term-liquids .e24-breadcrumb-wrap,
body[class*="term-"] .e24-breadcrumb-wrap {
max-width:min(1584px,94vw); margin:18px auto 0; padding:0 24px;
}
/* На страницах Жидкости и Запчасти (и подкатегорий) — прилипающий блок «Разделы».
Каталог скроллится, sidebar остаётся вверху. */
body:is(
.term-liquids, .term-motor-oil, .term-fork-oil, .term-cleaners, .term-lubricants, .term-brake-fluid,
.term-parts, .term-bearings, .term-misc-accessories, .term-drive-chains, .term-engine-parts,
.term-gaskets, .term-electrical, .term-fuel-system, .term-misc-parts, .term-brake-system,
.term-sprockets, .term-chassis, .term-grips, .term-protection, .term-cables-hydraulics,
.term-cables, .term-suspension-parts, .term-tire-service, .term-plastic, .term-levers-pegs,
.term-seals, .term-filters, .term-brake-pads, .term-merch
) .e24-shop-sidebar {
position: sticky !important;
top: 90px !important;
align-self: start !important;
max-height: calc(100vh - 110px);
overflow-y: auto;
scrollbar-width: thin;
}
@media (max-width:1100px) {
body:is(
.term-liquids, .term-motor-oil, .term-fork-oil, .term-cleaners, .term-lubricants, .term-brake-fluid,
.term-parts, .term-bearings, .term-misc-accessories, .term-drive-chains, .term-engine-parts,
.term-gaskets, .term-electrical, .term-fuel-system, .term-misc-parts, .term-brake-system,
.term-sprockets, .term-chassis, .term-grips, .term-protection, .term-cables-hydraulics,
.term-cables, .term-suspension-parts, .term-tire-service, .term-plastic, .term-levers-pegs,
.term-seals, .term-filters, .term-brake-pads
) .e24-shop-sidebar {
position: static !important;
max-height: none;
overflow-y: visible;
}
}
.e24-shop-main .e24-cat-row {
display:flex; justify-content:space-between; align-items:center; gap:20px;
margin:0 0 24px; flex-wrap:nowrap;
}
.e24-shop-main .e24-cat-row .e24-sort { margin:0; flex-shrink:0; }
.e24-shop-main .e24-cat-row .e24-sort select {
border:1px solid #ddd; border-radius:8px; padding:9px 14px; background:#fff;
font-size:.9rem; color:var(--e24-dark); font-weight:600; cursor:pointer;
}
.e24-shop-main .e24-cat-title { margin:0; padding:0; }
.e24-shop-main .e24-cat-title h2.badge-title .b { font-size:3.15rem; padding:34px 50px 36px; }
.e24-breadcrumb { font-size:.85rem; color:#666; }
.e24-breadcrumb a { color:var(--e24-purple); text-decoration:none; }
.e24-breadcrumb a:hover { text-decoration:underline; }
.e24-shop-wrap {
max-width:min(1584px,94vw); margin:20px auto 60px; padding:0 24px;
display:grid; grid-template-columns:280px 1fr; gap:30px; align-items:flex-start;
}
.e24-shop-sidebar { position:static; align-self:start; }
/* Mobile: collapse sidebar into a yellow "Фильтры" button at the top */
.e24-filters-toggle { display:none; }
@media (max-width:1200px) {
.e24-shop-wrap {
grid-template-columns:1fr;
grid-template-areas: "toggle" "sidebar" "main";
}
.e24-filters-toggle {
grid-area:toggle;
display:flex; align-items:center; justify-content:center; gap:10px;
width:100%; padding:14px 20px;
background:var(--e24-yellow); color:#111; font-weight:800;
font-size:1rem; letter-spacing:.02em;
border:0; border-radius:14px; cursor:pointer;
box-shadow:0 4px 12px rgba(255,214,10,.35);
transition:background .15s, transform .15s;
}
.e24-filters-toggle:hover { background:var(--e24-yellow-dark); }
.e24-filters-toggle .ico { font-size:1.15rem; }
.e24-filters-toggle::after {
content:""; width:12px; height:12px; margin-left:4px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:contain;
transition:transform .2s ease;
}
.e24-filters-toggle[aria-expanded="true"]::after { transform:rotate(180deg); }
/* Animated reveal: show element, animate max-height + opacity from 0 → expanded */
.e24-shop-sidebar {
grid-area:sidebar;
display:block;
overflow:hidden;
max-height:0;
opacity:0;
transform:translateY(-8px);
transition:max-height .4s ease, opacity .25s ease, transform .3s ease, margin .3s ease;
margin-top:0; margin-bottom:0;
pointer-events:none;
}
.e24-shop-wrap.filters-open .e24-shop-sidebar {
max-height:3000px;
opacity:1;
transform:translateY(0);
margin-top:14px; margin-bottom:6px;
pointer-events:auto;
}
/* Wrap каталога — на ширину экрана, 8 px по краям как у шапки */
.e24-shop-wrap {
max-width:none !important;
width:auto !important;
margin-left:8px !important;
margin-right:8px !important;
padding-left:0 !important;
padding-right:0 !important;
}
/* На мобильном скрываем строку с названием раздела и сортировкой */
.e24-shop-main .e24-cat-row,
.e24-shop-main .e24-cat-title,
.e24-shop-main .e24-sort { display:none !important; }
.e24-shop-main { grid-area:main; margin-top:0 !important; padding-top:0 !important; }
/* Минимальный отступ между кнопкой "Фильтры" и сеткой товаров.
Применяется ко всем разделам каталога — приводим к виду как в Эндуро. */
.e24-shop-wrap {
gap:8px !important; /* было 30px — почти нулевой зазор между rows */
margin-top:8px !important;
}
/* WooCommerce header (пустой + opacity crossfade — no src swap, no flicker.
The hover image lives inside the same figure as the primary image, so the
figure's overflow:hidden / border-radius / aspect-ratio clip it correctly. */
ul.products li.product figure img.e24-hover-img {
position:absolute !important;
top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
width:100% !important;
max-width:100% !important;
height:100% !important;
aspect-ratio:auto !important;
object-fit:cover !important;
object-position:center center !important;
border-radius:0 !important;
opacity:0 !important;
pointer-events:none !important;
transition:opacity .25s ease !important;
z-index:2 !important;
margin:0 !important;
padding:0 !important;
display:block !important;
background:transparent !important;
transform:none !important;
}
ul.products li.product:hover figure img.e24-hover-img { opacity:1 !important; }
/* Apply the catalog-card zoom treatment to hover image too (same scale 1.1) */
body:is(.term-motorcycles, .term-enduro, .term-mopeds, .term-pitbikes, .term-road, .post-type-archive-product) ul.products li.product figure img.e24-hover-img {
transform:scale(1.1) !important;
transform-origin:center center !important;
}
ul.products li.product a { text-decoration:none; }
/* Blocksy wraps image in
— target the figure */
ul.products li.product > figure,
ul.products li.product > .ct-media-container,
ul.products li.product figure:first-child {
margin:-18px -18px 14px !important;
padding:0 !important;
border-radius:14px 14px 0 0 !important;
overflow:hidden !important;
display:block !important;
width:calc(100% + 36px) !important;
max-width:calc(100% + 36px) !important;
aspect-ratio:1 / 1 !important; /* square — bike fills the card */
background:#fff;
}
ul.products li.product figure .ct-media-container,
ul.products li.product figure a { display:block; width:100%; height:100%; }
ul.products li.product figure img,
ul.products li.product img.wp-post-image {
width:100% !important; height:100% !important; max-width:100% !important;
object-fit:cover !important; object-position:center !important;
margin:0 !important; display:block !important; border-radius:0 !important;
}
/* === ЕДИНОЕ ПОВЕДЕНИЕ КАТАЛОЖНЫХ МИНИАТЮР (для всех остальных каталогов) ===
Цель: предмет (мотоцикл / шлем / бутылка масла) виден ЦЕЛИКОМ внутри карточки
с небольшими белыми отступами от краёв. Никакой обрезки, никаких per-product
корректировок зума — всё через `object-fit:contain`. */
body:is(.term-motorcycles, .term-enduro, .term-mopeds, .term-pitbikes, .term-road, .term-liquids, .term-ekipirovka, .term-motor-oil, .term-fork-oil, .term-cleaners, .term-lubricants, .term-brake-fluid, .post-type-archive-product, .archive) ul.products li.product figure,
body:is(.term-motorcycles, .term-enduro, .term-mopeds, .term-pitbikes, .term-road, .term-liquids, .term-ekipirovka, .term-motor-oil, .term-fork-oil, .term-cleaners, .term-lubricants, .term-brake-fluid, .post-type-archive-product, .archive) ul.products li.product > figure {
background:#fff !important;
padding:8px !important;
box-sizing:border-box !important;
}
body:is(.term-motorcycles, .term-enduro, .term-mopeds, .term-pitbikes, .term-road, .term-liquids, .term-ekipirovka, .term-motor-oil, .term-fork-oil, .term-cleaners, .term-lubricants, .term-brake-fluid, .post-type-archive-product, .archive) ul.products li.product figure img,
body:is(.term-motorcycles, .term-enduro, .term-mopeds, .term-pitbikes, .term-road, .term-liquids, .term-ekipirovka, .term-motor-oil, .term-fork-oil, .term-cleaners, .term-lubricants, .term-brake-fluid, .post-type-archive-product, .archive) ul.products li.product img.wp-post-image {
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
transition:transform .25s ease, opacity .25s ease !important;
}
/* Лёгкий hover-эффект — масштаб 1.04 для тактильности */
body:is(.term-motorcycles, .term-enduro, .term-mopeds, .term-pitbikes, .term-road, .term-liquids, .term-ekipirovka, .term-motor-oil, .term-fork-oil, .term-cleaners, .term-lubricants, .term-brake-fluid, .post-type-archive-product, .archive) ul.products li.product:hover figure img:not(.e24-hover-img),
body:is(.term-motorcycles, .term-enduro, .term-mopeds, .term-pitbikes, .term-road, .term-liquids, .term-ekipirovka, .term-motor-oil, .term-fork-oil, .term-cleaners, .term-lubricants, .term-brake-fluid, .post-type-archive-product, .archive) ul.products li.product:hover img.wp-post-image {
transform:scale(1.04) !important;
}
/* === Мерч + Эндуро + Дорожные + Мопеды + Питбайки + Мотоциклы + ЭКИПИРОВКА
(включая шлемы/маски/перчатки/мотоботы/рюкзак-гидропак — по term-id) —
ПЕРЕОПРЕДЕЛЕНИЕ: фото на всю карточку, без белых полей.
В Экипировке цепляемся по term-id (32/40/63/105/106/118) т.к. slug-и
урленкодены кириллицей и body class получается нечитаемым. */
body:is(.term-merch, .term-enduro, .term-road, .term-mopeds, .term-pitbikes, .term-motorcycles,
.term-ekipirovka, .term-maski,
.term-32, .term-40, .term-63, .term-105, .term-106, .term-118) ul.products li.product > figure,
body:is(.term-merch, .term-enduro, .term-road, .term-mopeds, .term-pitbikes, .term-motorcycles,
.term-ekipirovka, .term-maski,
.term-32, .term-40, .term-63, .term-105, .term-106, .term-118) ul.products li.product figure {
background:#fff !important;
padding:0 !important;
}
body:is(.term-merch, .term-enduro, .term-road, .term-mopeds, .term-pitbikes, .term-motorcycles,
.term-ekipirovka, .term-maski,
.term-32, .term-40, .term-63, .term-105, .term-106, .term-118) ul.products li.product figure img,
body:is(.term-merch, .term-enduro, .term-road, .term-mopeds, .term-pitbikes, .term-motorcycles,
.term-ekipirovka, .term-maski,
.term-32, .term-40, .term-63, .term-105, .term-106, .term-118) ul.products li.product img.wp-post-image {
object-fit:cover !important;
object-position:center center !important;
transform:none !important;
}
body:is(.term-merch, .term-enduro, .term-road, .term-mopeds, .term-pitbikes, .term-motorcycles,
.term-ekipirovka, .term-maski,
.term-32, .term-40, .term-63, .term-105, .term-106, .term-118) ul.products li.product:hover figure img:not(.e24-hover-img),
body:is(.term-merch, .term-enduro, .term-road, .term-mopeds, .term-pitbikes, .term-motorcycles,
.term-ekipirovka, .term-maski,
.term-32, .term-40, .term-63, .term-105, .term-106, .term-118) ul.products li.product:hover img.wp-post-image {
transform:scale(1.04) !important;
}
/* Per-product overrides убраны — теперь все каталожные миниатюры используют
object-fit: contain, и предмет всегда вписывается целиком с белыми отступами. */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
font-size:1rem !important; font-weight:700 !important; color:var(--e24-dark) !important; padding:0 !important; margin:0 0 8px !important; line-height:1.3 !important; min-height:2.6em;
}
ul.products li.product .price {
color:var(--e24-purple) !important; font-weight:800 !important; font-size:1.15rem !important; display:block; margin:4px 0 12px !important;
}
ul.products li.product .button,
ul.products li.product a.button.add_to_cart_button {
background:#1a1a1a !important; color:#fff !important; font-weight:700 !important;
border-radius:10px !important; border:0 !important; padding:11px 16px !important;
font-size:.9rem !important; letter-spacing:0 !important; text-transform:none !important;
margin-top:auto !important; transition:background .15s, transform .15s !important;
display:inline-block !important;
}
ul.products li.product .button:hover,
ul.products li.product a.button.add_to_cart_button:hover {
background:#000 !important; transform:translateY(-1px);
}
.single_add_to_cart_button {
background:var(--e24-yellow) !important; color:#111 !important; font-weight:700 !important; border-radius:8px !important; border:0 !important;
}
/* Stock badge — red circle top-right of product image */
ul.products li.product { position:relative !important; }
.e24-stock-badge {
position:absolute; top:14px; right:14px; z-index:5;
background:#E53935; color:#fff; font-weight:900; font-size:.72rem; text-transform:uppercase;
border-radius:50%; width:72px; height:72px; display:flex; align-items:center; justify-content:center;
text-align:center; line-height:1.1; letter-spacing:.02em; padding:4px;
box-shadow:0 4px 14px rgba(229,57,53,.35);
}
/* Sale badge "СУПЕР ЦЕНА" — red circle top-right, both catalog cards & single product */
ul.products li.product .onsale,
ul.products li.product span.onsale,
.woocommerce ul.products li.product .onsale,
body.single-product .onsale,
body.single-product .product .onsale,
body.single-product .images .onsale,
body.single-product .woocommerce-product-gallery .onsale {
position:absolute !important; top:14px !important; right:14px !important; left:auto !important; z-index:6 !important;
background:#E53935 !important; color:#fff !important;
font-weight:900 !important; font-size:.72rem !important; text-transform:uppercase !important;
border-radius:50% !important;
width:72px !important; height:72px !important;
min-width:72px !important; min-height:72px !important;
max-width:72px !important; max-height:72px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
text-align:center !important; line-height:1.05 !important; letter-spacing:.02em !important;
padding:4px !important; margin:0 !important;
box-shadow:0 4px 14px rgba(229,57,53,.35) !important;
border:0 !important;
}
/* Slightly larger badge on single product page */
body.single-product .onsale,
body.single-product .product .onsale,
body.single-product .images .onsale,
body.single-product .woocommerce-product-gallery .onsale {
width:96px !important; height:96px !important;
min-width:96px !important; min-height:96px !important;
max-width:96px !important; max-height:96px !important;
font-size:.9rem !important; top:18px !important; right:18px !important;
}
body.single-product .woocommerce-product-gallery { position:relative !important; }
/* Diff variant: показываем разницу старой и новой цены, например «−2 300» / «BYN» */
ul.products li.product .onsale.e24-onsale-diff,
.woocommerce ul.products li.product .onsale.e24-onsale-diff,
body.single-product .onsale.e24-onsale-diff {
flex-direction:column !important;
font-size:.95rem !important;
letter-spacing:.005em !important;
text-transform:none !important;
line-height:1.05 !important;
padding:2px !important;
gap:2px;
}
body.single-product .onsale.e24-onsale-diff { font-size:1.18rem !important; gap:3px; }
/* Hide the inline
(we use flex-direction:column instead) */
.onsale.e24-onsale-diff br { display:none; }
.onsale.e24-onsale-diff .e24-onsale-cur {
display:block;
font-size:.9em; /* на 10% меньше основной суммы */
font-weight:900;
letter-spacing:.02em;
opacity:1;
}
/* Product short description inside card — same case as the full description */
ul.products li.product .e24-short-desc {
font-size:.88rem; color:#666; line-height:1.45;
margin:4px 0 12px; min-height:3.6em;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
text-transform:none; letter-spacing:0; font-weight:500;
}
/* Price area: new (black) + old (grey, struck through), one line. */
/* Sale prices: NEW price first, OLD crossed-out after, single space gap. */
/* Цены в каталоге — возвращены к прежнему размеру (до последнего уменьшения) */
ul.products li.product .price,
ul.products li.product .price .sale-price {
color:#000 !important;
font-weight:900 !important;
font-size:1.5rem !important;
display:inline-flex !important;
flex-wrap:nowrap !important;
gap:.45em !important;
align-items:baseline;
white-space:nowrap;
}
ul.products li.product .price del {
color:#999 !important; font-weight:700 !important;
font-size:1.05rem !important;
text-decoration:line-through !important; opacity:1 !important; order:2;
white-space:nowrap;
}
ul.products li.product .price ins {
text-decoration:none !important; color:#000 !important;
font-weight:900 !important; font-size:1.5rem !important; order:1;
white-space:nowrap;
}
/* Single product page — keep prices side-by-side too */
body.single-product .price {
display:inline-flex !important;
flex-wrap:nowrap !important;
gap:.5em !important;
align-items:baseline;
white-space:nowrap;
}
body.single-product .price del {
font-size:.78em !important; color:#999 !important; font-weight:700 !important;
text-decoration:line-through !important; opacity:1 !important;
margin:0 !important; order:2; white-space:nowrap;
}
body.single-product .price ins { text-decoration:none !important; color:#000 !important; order:1; white-space:nowrap; }
/* Button row: Подробнее (outline) + Купить (solid black) */
ul.products li.product .e24-btn-row { display:flex; gap:8px; margin-top:auto; padding-top:12px; flex-wrap:wrap; }
ul.products li.product .e24-btn-row a,
ul.products li.product .e24-btn-row button {
flex:1 1 auto; min-width:110px; text-align:center;
padding:11px 12px !important; border-radius:8px !important;
font-weight:800 !important; font-size:.78rem !important; text-transform:uppercase !important; letter-spacing:.03em !important;
text-decoration:none !important; transition:.15s; display:inline-block !important;
}
.e24-btn-row .e24-btn-details { background:#fff !important; color:var(--e24-dark) !important; border:1.5px solid var(--e24-dark) !important; }
.e24-btn-row .e24-btn-details:hover { background:var(--e24-dark) !important; color:#fff !important; }
.e24-btn-row .e24-btn-buy { background:#1a1a1a !important; color:#fff !important; border:1.5px solid #1a1a1a !important; }
.e24-btn-row .e24-btn-buy:hover { background:#000 !important; border-color:#000 !important; color:#fff !important; }
/* Hide WC default add-to-cart in loop (we render our own buttons) */
ul.products li.product .added_to_cart,
ul.products li.product .button.add_to_cart_button:not(.e24-btn-buy):not(.e24-btn-details) { display:none !important; }
/* === FEATURE ICONS === */
.e24-feat {
display:flex;
gap:12px;
align-items:center;
min-width:0;
}
.e24-feat .dot {
width:54px; height:54px;
border-radius:50%; background:var(--e24-yellow);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
color:var(--e24-dark);
}
.e24-feat .dot svg { width:28px; height:28px; display:block; }
.e24-feat .lbl {
font-weight:800;
font-size:.84rem;
line-height:1.18;
text-transform:uppercase;
letter-spacing:.01em;
color:var(--e24-dark);
flex:1; min-width:0;
}
/* Trust bar under hero — 4 ровных колонки на белой карточке */
.e24-trust-bar {
max-width:min(1584px,94vw);
margin:0 auto 14px;
padding:22px 32px;
background:#fff; border:1px solid #eee; border-radius:14px;
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:24px 28px;
align-items:center;
}
/* Mobile: 2x2 сетка, центрированный блок — равные отступы по обоим краям */
@media (max-width:760px){
.e24-trust-bar {
grid-template-columns: max-content max-content;
justify-content: center; /* колонки прижаты к центру, равный пробел слева и справа */
column-gap: 32px;
row-gap: 18px;
padding: 20px 16px;
}
.e24-feat { gap:10px; }
.e24-feat .dot { width:46px; height:46px; }
.e24-feat .dot svg { width:24px; height:24px; }
.e24-feat .lbl { font-size:.78rem; line-height:1.15; }
}
@media (max-width:380px){
.e24-trust-bar { column-gap: 22px; padding: 18px 12px; }
.e24-feat .dot { width:42px; height:42px; }
.e24-feat .dot svg { width:22px; height:22px; }
.e24-feat .lbl { font-size:.72rem; }
}
/* Fix wc gallery on single product */
.woocommerce div.product .product_title { color:var(--e24-dark); }
/* === GLOBAL: все названия товаров — чистый чёрный #000 === */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3,
ul.products li.product .woocommerce-loop-product__link,
ul.products li.product .woocommerce-loop-product__link h2,
.e24-similar-card .woocommerce-loop-product__title,
.e24-similar-card h2,
.e24-similar-card .woocommerce-loop-product__link,
.e24-similar-card .woocommerce-loop-product__link h2,
.e24-gear-recs-card .woocommerce-loop-product__title,
.e24-gear-recs-card h2,
.e24-special li.product .woocommerce-loop-product__title,
.e24-special li.product h2,
.e24-recent li.product .woocommerce-loop-product__title,
.e24-recent li.product h2,
.woocommerce div.product .product_title,
body.single-product .product_title {
color:#000 !important;
}
/* Ссылки-обёртки названий тоже чёрные (на случай если обёрнуто ) */
ul.products li.product a.woocommerce-loop-product__link,
.e24-similar-card a.woocommerce-loop-product__link,
.e24-gear-recs-card a {
color:#000 !important;
}
/* Цена на странице товара — на 30% меньше: 3.3rem × 0.7 = 2.31rem */
body.single-product .summary .price,
body.single-product .entry-summary .price,
body.single-product .product .price {
font-size:2.31rem !important;
font-weight:900 !important;
color:#000 !important;
margin:14px 0 18px !important;
line-height:1 !important;
display:flex !important;
flex-wrap:wrap;
align-items:baseline;
gap:3.6em;
}
body.single-product .summary .price ins,
body.single-product .entry-summary .price ins {
text-decoration:none !important; color:#000 !important; font-size:inherit !important; font-weight:900 !important; order:1;
}
body.single-product .summary .price del,
body.single-product .entry-summary .price del {
font-size:inherit !important; color:#999 !important; font-weight:700 !important; text-decoration:line-through !important; opacity:1 !important; margin:0 !important; order:2;
}
/* Hide tabs section (reviews + duplicate description) on single product page */
.woocommerce-tabs,
body.single-product .wc-tabs-wrapper,
body.single-product .related,
body.single-product #reviews,
body.single-product .comment-respond { display:none !important; }
/* Hide product meta block (Артикул / Категории / Метки) on single product page */
body.single-product .product_meta,
body.single-product .summary .product_meta,
body.single-product .entry-summary .product_meta { display:none !important; }
/* Hide category labels on catalog product cards (Blocksy "meta-categories") */
ul.products li.product .meta-categories,
ul.products li.product [class*="meta-element-categories"],
ul.products li.product .ct-meta-element-categories,
ul.products li.product .product-categories,
ul.products li.product .posted_in,
ul.products li.product .tagged_as,
ul.products li.product .sku_wrapper { display:none !important; }
/* Collapsible specs table — full width, centered below product */
/* Specs + credit wrap: fixed 1200px width, centered */
.e24-specs-wrap, body .e24-specs-wrap {
max-width:min(1584px,94vw) !important; margin:30px auto 24px !important; padding:0 18px !important; box-sizing:border-box !important;
}
/* Hi-Tech (postid 629) — narrower specs block (-25%), centered.
PROTOTYPE — позже распространить на все товары. */
body.e24-moto .e24-specs-wrap {
max-width:min(1188px,70.5vw) !important;
margin-left:auto !important; margin-right:auto !important;
}
/* Hi-Tech: heading centered, "+" button placed right next to the label (not flushed right) */
body.e24-moto .e24-specs summary {
justify-content:center !important;
}
body.e24-moto .e24-specs summary .lbl {
flex:0 0 auto !important;
}
body.e24-moto .e24-specs summary .plus {
margin-left:6px !important;
}
/* Hi-Tech: characteristics rows centered within the module
(labels right-aligned + values left-aligned meet in the middle) */
body.e24-moto .e24-specs-table {
width:80% !important;
margin:0 auto !important;
}
body.e24-moto .e24-specs-table th {
text-align:right !important;
width:50% !important;
padding-right:22px !important;
}
body.e24-moto .e24-specs-table td {
text-align:left !important;
padding-left:22px !important;
}
/* Hi-Tech: credit-calc — ONE unified block, info left + calculator right (separated by divider). */
/* Width is −10% of the standard 1584px container to give the block more breathing room. */
body.e24-moto .e24-credit-wrap--split {
max-width:min(1426px,84.6vw) !important;
margin:30px auto 24px !important;
padding:0 18px !important;
box-sizing:border-box !important;
}
/* Title INSIDE the unified credit block — spans both columns at the top */
body.e24-moto .e24-credit-title {
grid-column:1 / -1 !important;
margin:0 !important;
padding:28px 36px 22px !important;
font-size:1.85rem !important;
font-weight:900 !important;
line-height:1.2 !important;
color:var(--e24-dark) !important;
text-align:center !important;
letter-spacing:.005em !important;
border-bottom:1px solid #ececf0 !important;
}
@media (max-width:880px) {
body.e24-moto .e24-credit-title { font-size:1.4rem !important; padding:22px 24px 18px !important; }
}
/* Outer card — single rounded container that wraps BOTH columns */
body.e24-moto .e24-credit-row {
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:0 !important;
align-items:stretch !important;
background:#fff !important;
border:1px solid #ececf0 !important;
border-radius:14px !important;
overflow:hidden !important;
box-shadow:0 1px 3px rgba(0,0,0,.04) !important;
}
@media (max-width:880px) {
body.e24-moto .e24-credit-row { grid-template-columns:1fr !important; }
body.e24-moto .e24-credit-info { border-right:0 !important; border-bottom:1px solid #ececf0 !important; }
}
/* Left column — flat (no own border/bg), only inner padding + a vertical divider */
body.e24-moto .e24-credit-info {
background:transparent !important;
border:0 !important;
border-right:1px solid #ececf0 !important;
border-radius:0 !important;
padding:32px 36px !important;
font-size:.97rem;
line-height:1.6;
color:#333;
box-shadow:none !important;
}
body.e24-moto .e24-credit-info h3 {
margin:0 0 14px !important;
font-size:1.4rem;
color:var(--e24-dark);
font-weight:900;
letter-spacing:.01em;
}
body.e24-moto .e24-credit-info p { margin:0 0 12px; }
body.e24-moto .e24-credit-info p:last-of-type { margin-bottom:18px; }
body.e24-moto .e24-credit-info strong { color:var(--e24-dark); font-weight:800; }
/* Perks bullet list — checkmark prefix, brand styling */
body.e24-moto .e24-credit-perks {
list-style:none !important;
margin:0 0 14px !important;
padding:0 !important;
}
body.e24-moto .e24-credit-perks li {
position:relative;
padding:4px 0 4px 28px;
font-weight:700;
color:var(--e24-dark);
font-size:.97rem;
line-height:1.45;
}
body.e24-moto .e24-credit-perks li::before {
content:"✓";
position:absolute;
left:0; top:50%; transform:translateY(-50%);
width:20px; height:20px;
display:flex; align-items:center; justify-content:center;
background:var(--e24-yellow);
color:#111;
font-weight:900; font-size:.78rem;
border-radius:50%;
line-height:1;
}
body.e24-moto .e24-credit-cta {
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--e24-yellow); color:#111 !important;
font-weight:900; font-size:1rem; letter-spacing:.01em;
padding:14px 28px; border:0; border-radius:11px; cursor:pointer;
text-decoration:none !important;
transition:background .15s, transform .15s, box-shadow .15s;
box-shadow:0 6px 18px rgba(255,214,10,.35);
width:auto; align-self:flex-start;
}
body.e24-moto .e24-credit-cta:hover { background:var(--e24-yellow-dark); transform:translateY(-1px); box-shadow:0 8px 22px rgba(255,214,10,.5); }
body.e24-moto .e24-credit-cta:active { transform:translateY(0); }
/* Right column — flat (no own border/bg), padding matches left */
body.e24-moto .e24-credit-calc-col {
padding:32px 36px !important;
background:transparent !important;
}
body.e24-moto .e24-credit-calc-col h3 {
margin:0 0 14px !important;
font-size:1.4rem;
color:var(--e24-dark);
font-weight:900;
letter-spacing:.01em;
}
/* Strip the inner calculator's own card styling — it's now part of the outer block */
body.e24-moto .e24-credit-calc-col .e24-credit-calc {
border:0 !important;
background:transparent !important;
padding:0 !important;
border-radius:0 !important;
}
/* Calculator's inner h3 ("Расчёт кредита") is redundant — we already show the column heading. Hide it. */
body.e24-moto .e24-credit-calc-col .e24-credit-calc > h3 { display:none !important; }
/* Похожие модели — обёртка + сетка. Сами карточки наследуют общие стили
ul.products li.product из каталога, чтобы оформление было идентичным. */
body.e24-moto .e24-similar-wrap {
max-width:min(1426px, 84.6vw) !important;
margin:40px auto 30px !important;
padding:0 18px !important;
box-sizing:border-box !important;
}
body.e24-moto .e24-similar-title {
margin:0 0 6px !important;
font-size:1.65rem !important;
font-weight:900 !important;
line-height:1.2 !important;
color:var(--e24-dark) !important;
text-align:center !important;
}
body.e24-moto .e24-similar-sub {
margin:0 0 22px !important;
text-align:center !important;
color:#666;
font-size:.95rem;
line-height:1.4;
}
/* Сетка: 4 в ряд на десктопе, перекрывает дефолтный ul.products grid */
body.e24-moto ul.products.e24-similar-grid {
list-style:none !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:repeat(4, 1fr) !important;
gap:20px !important;
}
@media (max-width:1100px) {
body.e24-moto ul.products.e24-similar-grid { grid-template-columns:repeat(2, 1fr) !important; }
}
@media (max-width:560px) {
body.e24-moto ul.products.e24-similar-grid { grid-template-columns:1fr !important; }
body.e24-moto .e24-similar-title { font-size:1.3rem !important; }
}
/* Hover-image crossfade in recommendations cards (same behaviour as catalog) */
.e24-similar-card figure {
position:relative;
overflow:hidden;
}
.e24-similar-card figure a {
position:relative;
display:block;
width:100%;
height:100%;
}
.e24-similar-card figure img.e24-similar-primary,
.e24-similar-card figure img.e24-similar-hover {
position:absolute;
inset:0;
width:100% !important;
height:100% !important;
object-fit:cover;
object-position:center;
transition:opacity .35s ease;
}
.e24-similar-card figure img.e24-similar-hover {
opacity:0;
pointer-events:none;
}
.e24-similar-card:hover figure img.e24-similar-hover { opacity:1; }
.e24-similar-card:hover figure img.e24-similar-primary { opacity:0; }
body .e24-credit-wrap {
max-width:min(1584px,94vw) !important; margin:30px auto 24px !important; padding:0 18px !important; box-sizing:border-box !important;
}
.e24-specs {
margin:0; border:1px solid #ececf0; border-radius:12px;
background:#fff; overflow:hidden;
}
.e24-specs summary {
list-style:none; cursor:pointer;
display:flex; align-items:center; gap:10px;
padding:18px 22px; font-weight:800; font-size:1rem; color:var(--e24-dark);
user-select:none; transition:background .15s;
}
.e24-specs summary::-webkit-details-marker { display:none; }
.e24-specs summary:hover { background:#fafafa; }
.e24-specs summary .ico { font-size:1.15rem; }
.e24-specs summary .lbl { flex:1; }
.e24-specs summary .plus {
width:30px; height:30px; border-radius:50%; background:#f0f0f3;
display:flex; align-items:center; justify-content:center;
font-size:1.3rem; font-weight:700; color:var(--e24-dark); transition:.2s;
}
.e24-specs[open] summary .plus { transform:rotate(45deg); background:var(--e24-yellow); }
.e24-specs-table {
width:100%; border-collapse:collapse; margin:0; border-top:1px solid #ececf0;
}
.e24-specs-table tr { border-bottom:1px solid #f4f4f7; }
.e24-specs-table tr:last-child { border-bottom:0; }
.e24-specs-table tr:nth-child(even) { background:#fafafa; }
.e24-specs-table th {
padding:11px 22px; font-weight:600; color:#666; font-size:.92rem; text-align:left; width:42%;
vertical-align:top; line-height:1.4;
}
.e24-specs-table td {
padding:11px 22px; font-weight:600; color:var(--e24-dark); font-size:.92rem; line-height:1.4;
vertical-align:top;
}
/* Description block inside summary (right of gallery) */
.e24-product-fulldesc {
margin:18px 0 22px; line-height:1.55; color:#333; font-size:.95rem;
}
.e24-product-fulldesc p { margin:0 0 12px; }
.e24-product-fulldesc ul, .e24-product-fulldesc ol { margin:8px 0 14px 20px; }
/* Single product gallery — show photos in their real (landscape) aspect, no cropping */
.woocommerce-product-gallery,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a,
body.single-product .ct-media-container {
aspect-ratio:auto !important;
}
.woocommerce-product-gallery img,
.woocommerce-product-gallery__image img,
body.single-product .ct-media-container img {
width:100% !important;
height:auto !important;
aspect-ratio:auto !important;
object-fit:contain !important;
max-width:100% !important;
}
/* === FREE CONSULTATION block === */
.e24-consult {
max-width:min(1584px,94vw); margin:60px auto;
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center;
}
.e24-consult-body { min-width:0; }
.e24-consult-body .lead { word-wrap:break-word; }
@media (max-width:1100px){
.e24-consult { grid-template-columns:1fr; gap:28px; }
.e24-consult-body { order:1; }
.e24-consult-photo { order:2; }
}
.e24-consult-photo {
background-size:cover; background-position:center; background-repeat:no-repeat;
border-radius:18px; aspect-ratio:16/10; min-height:320px; box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.e24-consult-body .lead { font-size:1.05rem; color:#555; margin:24px 0 20px; max-width:100%; }
.e24-consult-body .note { font-size:.82rem; color:#888; margin:14px 0 0; max-width:100%; }
.e24-consult-btns { display:flex; gap:14px; flex-wrap:wrap; }
.e24-btn-tg, .e24-btn-ig {
flex:1 1 200px; min-width:0;
display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px;
border-radius:12px; text-decoration:none; font-weight:700; font-size:1rem; color:#fff !important;
transition:transform .15s, box-shadow .15s;
}
.e24-btn-tg:hover, .e24-btn-ig:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.15); }
.e24-btn-tg,
.e24-btn-ig { background:linear-gradient(135deg, #3D2DCC 0%, #7F3FCD 60%, #B73FCD 100%); }
/* === MAP BLOCK === */
.e24-map { max-width:min(1584px,94vw); margin:60px auto; }
.e24-map-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:20px; flex-wrap:wrap; }
.e24-map-link { color:var(--e24-purple); text-decoration:none; font-weight:700; }
.e24-map-wrap { position:relative; border-radius:14px; overflow:hidden; }
/* Карта: блокируем зум скроллом до клика — страница продолжает скроллиться */
.e24-map-iframe-wrap { position:relative; }
.e24-map-iframe-wrap iframe {
pointer-events:none;
transition:filter .25s;
}
.e24-map-iframe-wrap.is-active iframe {
pointer-events:auto;
}
.e24-map-blocker {
position:absolute; inset:0; z-index:2;
cursor:pointer;
display:flex; align-items:flex-end; justify-content:center;
padding-bottom:24px;
background:transparent;
transition:background .25s;
}
.e24-map-iframe-wrap.is-active .e24-map-blocker { display:none; }
.e24-map-blocker-hint {
background:rgba(20,20,30,.85);
color:#fff;
padding:9px 16px;
border-radius:999px;
font-weight:700; font-size:.85rem;
letter-spacing:.01em;
opacity:0;
transform:translateY(8px);
transition:opacity .2s, transform .2s;
pointer-events:none;
box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.e24-map-iframe-wrap:hover .e24-map-blocker-hint {
opacity:1; transform:translateY(0);
}
.e24-map-info {
position:absolute; top:24px; left:24px; z-index:5;
background:#fff; border-radius:12px; padding:22px 24px 18px; max-width:300px;
box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.e24-map-info h3 { margin:0 0 10px; font-size:1.1rem; }
.e24-map-info p { margin:0 0 10px; font-size:.9rem; color:#555; line-height:1.45; }
.e24-map-info .e24-map-call {
display:inline-block; background:var(--e24-yellow); color:#111 !important;
padding:10px 18px; border-radius:8px; font-weight:800; text-decoration:none; font-size:.95rem; margin-top:4px;
}
.e24-map-info .e24-map-call:hover { background:var(--e24-yellow-dark); }
/* Branded purple pin with logo */
.e24-pin-wrapper { background:transparent; border:0; }
.e24-pin { position:relative; width:80px; display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 6px 12px rgba(108,31,174,.35)); }
.e24-pin-head {
width:80px; height:80px; border-radius:50%;
background:linear-gradient(135deg, var(--e24-purple) 0%, var(--e24-purple-dark) 100%);
border:3px solid #fff; display:flex; align-items:center; justify-content:center;
}
.e24-pin-head img { max-width:64px; max-height:42px; height:auto; width:auto; object-fit:contain; }
.e24-pin-tail {
width:0; height:0; margin-top:-4px;
border-left:12px solid transparent; border-right:12px solid transparent;
border-top:22px solid var(--e24-purple-dark);
}
/* === REVIEWS CAROUSEL === */
.e24-reviews { max-width:min(1584px,94vw); margin:60px auto; }
.e24-reviews-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; gap:20px; flex-wrap:wrap; }
.e24-reviews-head > div:first-child { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.e24-reviews-ctrls { display:flex; gap:12px; align-items:center; }
.e24-reviews-all { color:var(--e24-purple); text-decoration:none; font-weight:700; }
.e24-reviews-ctrls button {
width:44px; height:44px; border-radius:50%; border:1.5px solid #ddd; background:#fff;
font-size:1.6rem; line-height:1; color:var(--e24-dark); cursor:pointer; transition:.15s;
display:flex; align-items:center; justify-content:center; padding-bottom:3px;
}
.e24-reviews-ctrls button:hover { background:var(--e24-purple); border-color:var(--e24-purple); color:#fff; }
.e24-reviews-track { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:8px; }
.e24-reviews-track::-webkit-scrollbar { display:none; }
.e24-review-card {
flex:0 0 360px; scroll-snap-align:start;
background:#fff; border:1px solid #ececf0; border-radius:14px; padding:22px 24px 20px;
display:flex; flex-direction:column; gap:12px;
box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.e24-review-stars { display:flex; gap:2px; }
.e24-review-text { margin:0; font-size:.92rem; line-height:1.5; color:#333; flex:1; }
.e24-review-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:10px; border-top:1px solid #f0f0f3; }
.e24-review-name { font-weight:800; font-size:.9rem; color:var(--e24-dark); }
.e24-review-date { font-size:.78rem; color:#888; }
@media (max-width:600px){ .e24-review-card { flex-basis:280px; } }
/* === SPECIAL OFFERS — заголовок + (опц.) карусель === */
.e24-special { max-width:min(1584px,94vw); margin:34px auto 30px; padding:0 18px; box-sizing:border-box; }
.e24-special-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 18px; flex-wrap:wrap; }
.e24-special-head h2.badge-title { margin:0; }
.e24-special-ctrls { display:flex; gap:12px; align-items:center; }
.e24-special-ctrls button {
width:44px; height:44px; border-radius:50%; border:1.5px solid #ddd; background:#fff;
font-size:1.6rem; line-height:1; color:var(--e24-dark); cursor:pointer; transition:.15s;
display:flex; align-items:center; justify-content:center; padding-bottom:3px;
}
.e24-special-ctrls button:hover { background:var(--e24-dark); border-color:var(--e24-dark); color:#fff; transform:scale(1.04); }
.e24-special-ctrls button:active { transform:scale(.96); }
.e24-special-body { width:100%; }
/* By default: standard 4-column WC grid (when ≤4 cards) */
ul.products.e24-special-track { /* falls back to default WC grid */ }
/* Carousel mode: horizontal scroll with snap, hides scrollbar */
.e24-special.has-carousel ul.products.e24-special-track {
display:flex !important;
flex-wrap:nowrap !important;
gap:20px;
grid-template-columns:none !important;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scrollbar-width:none;
padding-bottom:8px;
margin:0 !important;
}
.e24-special.has-carousel ul.products.e24-special-track::-webkit-scrollbar { display:none; }
.e24-special.has-carousel ul.products.e24-special-track li.product {
flex:0 0 calc((100% - 20px * 3) / 4);
scroll-snap-align:start;
margin:0 !important;
width:auto !important;
max-width:none !important;
}
@media (max-width:1100px) {
.e24-special.has-carousel ul.products.e24-special-track li.product {
flex-basis:calc((100% - 20px * 2) / 3);
}
}
@media (max-width:760px) {
.e24-special.has-carousel ul.products.e24-special-track li.product {
flex-basis:calc((100% - 20px) / 2);
}
}
@media (max-width:480px) {
.e24-special.has-carousel ul.products.e24-special-track li.product {
flex-basis:78%;
}
}
/* === Популярные модели на мобильной версии — НЕ слайдер,
а обычная сетка 2x3 (6 карточек, как в основном каталоге) === */
@media (max-width:600px) {
/* Скрыть стрелки слайдера */
.e24-popular .e24-special-ctrls { display:none !important; }
/* Превратить трек обратно в grid 2 колонки */
.e24-popular.has-carousel ul.products.e24-special-track,
.e24-popular ul.products.e24-special-track {
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:6px !important;
flex-wrap:initial !important;
overflow-x:visible !important;
overflow-y:visible !important;
scroll-snap-type:none !important;
padding:0 !important;
margin:0 !important;
width:auto !important;
max-width:none !important;
box-sizing:border-box !important;
}
/* Карточки — обычные грид-ячейки, не flex-фиксированные */
.e24-popular.has-carousel ul.products.e24-special-track li.product,
.e24-popular ul.products.e24-special-track li.product {
flex:initial !important;
flex-basis:auto !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
scroll-snap-align:none !important;
}
/* Только первые 6 карточек видны */
.e24-popular ul.products.e24-special-track li.product:nth-child(n+7) {
display:none !important;
}
}
/* ============================================================
УНИФИКАЦИЯ КАРТОЧЕК МОТОЦИКЛОВ — все блоки (каталог /enduro/,
Популярные модели, Специальное предложение, Вы недавно смотрели)
показывают мотоциклы с одинаковой раскладкой:
• фото на ВСЮ ширину карточки (full-bleed)
• aspect-ratio 1:1 (квадрат — мотоцикл максимально крупно)
• верхние углы скруглены под радиус карточки
Применяется и через product_cat-* классы (для каталога),
и через контекст блоков e24-special/popular/recent (для главной/товара).
============================================================ */
/* === ВАРИАНТ 1: через product_cat-* классы карточки === */
ul.products li.product:is(
[class*="product_cat-motorcycles"],
[class*="product_cat-enduro"],
[class*="product_cat-road"],
[class*="product_cat-pitbikes"],
[class*="product_cat-mopeds"]
) > figure,
ul.products li.product:is(
[class*="product_cat-motorcycles"],
[class*="product_cat-enduro"],
[class*="product_cat-road"],
[class*="product_cat-pitbikes"],
[class*="product_cat-mopeds"]
) figure:first-of-type,
ul.products li.product:is(
[class*="product_cat-motorcycles"],
[class*="product_cat-enduro"],
[class*="product_cat-road"],
[class*="product_cat-pitbikes"],
[class*="product_cat-mopeds"]
) > .ct-media-container {
margin: -6px -6px 8px !important;
width: calc(100% + 12px) !important;
max-width: calc(100% + 12px) !important;
aspect-ratio: 1 / 1 !important; /* квадрат — мотоцикл крупнее */
border-radius: 10px 10px 0 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Картинка внутри figure — растянуть и обрезать (cover) */
ul.products li.product:is(
[class*="product_cat-motorcycles"],
[class*="product_cat-enduro"],
[class*="product_cat-road"],
[class*="product_cat-pitbikes"],
[class*="product_cat-mopeds"]
) figure img,
ul.products li.product:is(
[class*="product_cat-motorcycles"],
[class*="product_cat-enduro"],
[class*="product_cat-road"],
[class*="product_cat-pitbikes"],
[class*="product_cat-mopeds"]
) .wp-post-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* === ВАРИАНТ 2: через контекстные секции (Специальное / Популярные / Недавно смотрели)
и страницы каталогов мотоциклов — для гарантии что попадает на ВСЕ карточки
независимо от того, какие product_cat-* классы у каждого товара. === */
/* САМА КАРТОЧКА — убираем внутренний padding (фото пойдёт от края до края) */
.e24-special li.product,
.e24-popular li.product,
.e24-recent li.product,
body.term-motorcycles ul.products li.product,
body.term-enduro ul.products li.product,
body.term-road ul.products li.product,
body.term-pitbikes ul.products li.product,
body.term-mopeds ul.products li.product {
padding: 0 0 14px !important;
overflow: hidden !important;
}
/* ФОТО — на полную ширину карточки, без полей */
.e24-special li.product > figure,
.e24-special li.product figure:first-of-type,
.e24-popular li.product > figure,
.e24-popular li.product figure:first-of-type,
.e24-recent li.product > figure,
.e24-recent li.product figure:first-of-type,
body.term-motorcycles ul.products li.product > figure,
body.term-motorcycles ul.products li.product figure:first-of-type,
body.term-enduro ul.products li.product > figure,
body.term-enduro ul.products li.product figure:first-of-type,
body.term-road ul.products li.product > figure,
body.term-road ul.products li.product figure:first-of-type,
body.term-pitbikes ul.products li.product > figure,
body.term-pitbikes ul.products li.product figure:first-of-type,
body.term-mopeds ul.products li.product > figure,
body.term-mopeds ul.products li.product figure:first-of-type {
margin: 0 0 12px !important;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 1 / 1 !important;
border-radius: 10px 10px 0 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* ТЕКСТ И КНОПКИ ВНУТРИ КАРТОЧКИ — даём горизонтальный отступ 12px,
чтобы они не упирались в края (фото уже без отступа) */
.e24-special li.product > *:not(figure):not(:first-child),
.e24-popular li.product > *:not(figure):not(:first-child),
.e24-recent li.product > *:not(figure):not(:first-child),
body.term-motorcycles ul.products li.product > *:not(figure):not(:first-child),
body.term-enduro ul.products li.product > *:not(figure):not(:first-child),
body.term-road ul.products li.product > *:not(figure):not(:first-child),
body.term-pitbikes ul.products li.product > *:not(figure):not(:first-child),
body.term-mopeds ul.products li.product > *:not(figure):not(:first-child) {
padding-left: 12px !important;
padding-right: 12px !important;
}
.e24-special li.product figure img,
.e24-special li.product .wp-post-image,
.e24-popular li.product figure img,
.e24-popular li.product .wp-post-image,
.e24-recent li.product figure img,
.e24-recent li.product .wp-post-image,
body.term-motorcycles ul.products li.product figure img,
body.term-motorcycles ul.products li.product .wp-post-image,
body.term-enduro ul.products li.product figure img,
body.term-enduro ul.products li.product .wp-post-image,
body.term-road ul.products li.product figure img,
body.term-road ul.products li.product .wp-post-image,
body.term-pitbikes ul.products li.product figure img,
body.term-pitbikes ul.products li.product .wp-post-image,
body.term-mopeds ul.products li.product figure img,
body.term-mopeds ul.products li.product .wp-post-image {
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* === Отступ между header'ом и галереей на странице товара === */
body.single-product main#main,
body.single-product .ct-container-full,
body.single-product article {
padding-top: 24px !important;
}
@media (max-width: 768px) {
body.single-product main#main,
body.single-product .ct-container-full,
body.single-product article {
padding-top: 14px !important;
}
}
/* ============================================================
УНИФИКАЦИЯ ГАЛЕРЕИ ТОВАРА — для всех мотоциклов:
• Главное фото: горизонтальный формат 3:2, центрирование, object-fit cover
(даже если оригинальная фотография портретная — обрезается до горизонтали)
• Миниатюры: всегда ОДНА горизонтальная строка с прокруткой
(а не сетка 5+5 как было дефолтно)
============================================================ */
/* === ГАЛЕРЕЯ ТОВАРА — для ВСЕХ устройств (десктоп + мобильная) ===
Применяется ко всем single-product страницам. Унифицированное оформление
как у Hi-Tech: главное фото горизонтальное 3:2, миниатюры в ОДНУ строку
с горизонтальной прокруткой. Структура Blocksy:
.flexy-view (рамка)
.flexy-items (flex-row track, JS сдвигает translateX)
.flexy-item × N (каждый слайд = 100% ширины view) */
/* Главное фото — горизонтальный 3:2, центровка, object-fit cover */
body.single-product .woocommerce-product-gallery .flexy-view {
aspect-ratio: 3 / 2 !important;
overflow: hidden !important;
border-radius: 14px !important;
background: #f5f5f5;
position: relative !important;
}
body.single-product .woocommerce-product-gallery .flexy-items {
display: flex !important;
flex-wrap: nowrap !important;
height: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.single-product .woocommerce-product-gallery .flexy-item {
flex: 0 0 100% !important;
height: 100% !important;
min-width: 100% !important;
aspect-ratio: auto !important;
}
body.single-product .woocommerce-product-gallery .flexy-item figure,
body.single-product .woocommerce-product-gallery .flexy-item .ct-media-container {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
aspect-ratio: auto !important;
}
body.single-product .woocommerce-product-gallery .flexy-item img,
body.single-product .woocommerce-product-gallery .flexy-item .wp-post-image {
width: 100% !important;
height: 100% !important;
aspect-ratio: 3 / 2 !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* Миниатюры — одна строка с горизонтальной прокруткой */
body.single-product .woocommerce-product-gallery .flexy-pills {
margin-top: 12px !important;
}
body.single-product .woocommerce-product-gallery .flexy-pills ol {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
padding: 2px 2px 8px !important;
margin: 0 !important;
list-style: none !important;
}
body.single-product .woocommerce-product-gallery .flexy-pills ol::-webkit-scrollbar { height: 4px; }
body.single-product .woocommerce-product-gallery .flexy-pills ol::-webkit-scrollbar-thumb {
background: #ccc; border-radius: 3px;
}
body.single-product .woocommerce-product-gallery .flexy-pills li {
flex: 0 0 auto !important;
width: 90px !important;
height: 60px !important;
aspect-ratio: 3 / 2 !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 8px !important;
overflow: hidden !important;
cursor: pointer;
scroll-snap-align: start;
border: 2px solid transparent;
transition: border-color .15s, transform .15s;
}
body.single-product .woocommerce-product-gallery .flexy-pills li.active {
border-color: var(--e24-yellow, #FFC107) !important;
}
body.single-product .woocommerce-product-gallery .flexy-pills li:hover {
transform: scale(1.04);
}
body.single-product .woocommerce-product-gallery .flexy-pills li img {
width: 100% !important;
height: 100% !important;
aspect-ratio: 3 / 2 !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
border-radius: 6px !important;
}
/* Mobile — миниатюры чуть меньше */
@media (max-width: 768px) {
body.single-product .woocommerce-product-gallery .flexy-pills li {
width: 72px !important;
height: 48px !important;
}
}
/* === «Вы недавно смотрели» на мобильной версии — НЕ слайдер,
а обычная сетка 2x3 (последние 6 просмотренных, как основной каталог) === */
@media (max-width:600px) {
/* Скрыть стрелки слайдера */
.e24-recent .e24-special-ctrls,
.e24-recent [data-recent-ctrls] { display:none !important; }
/* Трек → grid 2 колонки */
.e24-recent.has-carousel ul.products.e24-special-track,
.e24-recent ul.products.e24-special-track {
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:6px !important;
flex-wrap:initial !important;
overflow-x:visible !important;
overflow-y:visible !important;
scroll-snap-type:none !important;
padding:0 !important;
margin:0 !important;
width:auto !important;
max-width:none !important;
box-sizing:border-box !important;
}
/* Карточки — обычные ячейки */
.e24-recent.has-carousel ul.products.e24-special-track li.product,
.e24-recent ul.products.e24-special-track li.product {
flex:initial !important;
flex-basis:auto !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
scroll-snap-align:none !important;
}
/* Только первые 6 (самые свежие — JS делает unshift, новые в начале) */
.e24-recent ul.products.e24-special-track li.product:nth-child(n+7) {
display:none !important;
}
}
/* === Бесплатная консультация — фикс 8px от обоих краёв на мобильной === */
@media (max-width:900px) {
body .entry-content > .e24-consult,
body.home .entry-content > .e24-consult,
.e24-consult {
width:auto !important;
max-width:none !important;
margin:30px 8px !important; /* 8px горизонталь, 30px вертикаль */
padding:0 !important; /* убираем внутренний паддинг — рамкой служит margin */
box-sizing:border-box !important;
overflow-x:hidden !important; /* страховка от внутреннего overflow */
}
/* Фото и тело — ничего не выпирает */
.e24-consult-photo,
.e24-consult-body {
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* Картинка консультации — нормальная высота под мобильную ширину */
.e24-consult-photo {
aspect-ratio:16/10 !important;
min-height:0 !important;
height:auto !important;
}
/* Кнопки — вертикальный стек, чтобы точно не вылезали */
.e24-consult-btns { flex-direction:column !important; gap:10px !important; }
.e24-btn-tg, .e24-btn-ig { flex:none !important; width:100% !important; }
}
/* === NEWS CAROUSEL === */
.e24-news { max-width:min(1584px,94vw); margin:70px auto 60px; }
.e24-news-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; gap:20px; flex-wrap:wrap; }
.e24-news-ctrls { display:flex; gap:12px; align-items:center; }
.e24-news-all { color:var(--e24-purple); text-decoration:none; font-weight:700; }
.e24-news-ctrls button {
width:44px; height:44px; border-radius:50%; border:1.5px solid #ddd; background:#fff;
font-size:1.6rem; line-height:1; color:var(--e24-dark); cursor:pointer; transition:.15s;
display:flex; align-items:center; justify-content:center; padding-bottom:3px;
}
.e24-news-ctrls button:hover { background:var(--e24-purple); border-color:var(--e24-purple); color:#fff; }
.e24-news-track {
display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; padding-bottom:8px;
/* Свайп пальцем — только горизонтальный, чтобы вертикальный скролл страницы не «дёргался» */
touch-action:pan-x pan-y;
overscroll-behavior-x:contain; /* свайп до конца не «прокидывает» событие в окно */
}
.e24-news-track::-webkit-scrollbar { display:none; }
.e24-news-card {
flex:0 0 340px; scroll-snap-align:start;
background:#fff; border:1px solid #ececf0; border-radius:14px; overflow:hidden;
text-decoration:none; color:var(--e24-dark); display:flex; flex-direction:column;
box-shadow:0 1px 3px rgba(0,0,0,.04); transition:transform .2s, box-shadow .2s, border-color .2s;
}
@media (max-width:600px){
/* Одна карточка новости на всю ширину — пользователь свайпает к следующим */
.e24-news-track {
gap:8px !important; /* минимальный зазор между карточками — едва виден за краем при свайпе */
padding-bottom:4px !important;
scroll-padding:0 !important;
}
.e24-news-card {
flex:0 0 100% !important; /* одна карточка = 100% ширины контейнера */
width:100% !important;
max-width:100% !important;
scroll-snap-align:start !important;
scroll-snap-stop:always !important;
}
}
.e24-news-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(108,31,174,.12); border-color:var(--e24-purple); }
.e24-news-img { width:100%; aspect-ratio:16/10; background-size:cover; background-position:center; }
.e24-news-body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.e24-news-date { font-size:.78rem; color:var(--e24-purple); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.e24-news-title { font-size:1.1rem; font-weight:800; margin:0; line-height:1.25; }
.e24-news-excerpt { font-size:.9rem; color:#666; margin:0; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.e24-news-more { margin-top:auto; font-weight:700; color:var(--e24-purple); font-size:.9rem; padding-top:8px; }
/* === INSTAGRAM CAROUSEL (legacy, unused) === */
.e24-insta { max-width:min(1584px,94vw); margin:70px auto 40px; }
.e24-insta-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:20px; flex-wrap:wrap; }
.e24-insta-ctrls { display:flex; gap:10px; }
.e24-insta-ctrls button {
width:44px; height:44px; border-radius:50%; border:1.5px solid #ddd; background:#fff;
font-size:1.6rem; line-height:1; color:var(--e24-dark); cursor:pointer; transition:.15s;
display:flex; align-items:center; justify-content:center; padding-bottom:3px;
}
.e24-insta-ctrls button:hover { background:var(--e24-purple); border-color:var(--e24-purple); color:#fff; }
.e24-insta-track {
display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; padding-bottom:6px;
}
.e24-insta-track::-webkit-scrollbar { display:none; }
.e24-insta-card {
flex:0 0 280px; scroll-snap-align:start;
background:#fff; border-radius:14px; overflow:hidden; text-decoration:none;
box-shadow:0 2px 10px rgba(0,0,0,.06); transition:.2s; border:1px solid #eee;
display:flex; flex-direction:column;
}
.e24-insta-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(108,31,174,.15); border-color:var(--e24-purple); }
.e24-insta-img {
width:100%; aspect-ratio:1/1;
background-size:cover; background-position:center;
position:relative; display:flex; align-items:flex-end; justify-content:flex-end; padding:10px;
}
.e24-insta-img::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%, rgba(0,0,0,.35) 100%); }
.e24-insta-icon { position:relative; z-index:1; color:#fff; opacity:.9; }
.e24-insta-cap {
padding:14px 16px 16px; font-size:.88rem; line-height:1.35; color:var(--e24-dark);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.e24-insta-follow {
display:inline-flex; align-items:center; gap:10px; margin-top:26px;
padding:13px 24px; border-radius:12px; text-decoration:none; font-weight:700; color:#fff !important;
background:linear-gradient(135deg, #3D2DCC 0%, #7F3FCD 60%, #B73FCD 100%);
transition:transform .15s, box-shadow .15s;
}
.e24-insta-follow:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.15); }
@media (max-width:600px){ .e24-insta-card { flex-basis:240px; } }
/* === FLUID CONTAINERS — stretch to viewport on wide monitors === */
.ct-container, .ct-container-narrow, .entry-content > .alignwide, .entry-content {
max-width: min(1584px, 94vw) !important;
width: 100% !important;
}
body.home .content-area, body.home .site, body.home main, body.home .entry-content {
max-width: 100% !important;
}
body.home .entry-content > * { max-width: min(1584px, 94vw); margin-left:auto; margin-right:auto; }
/* Hero — ширина совпадает с блоком разделов (.e24-cats); .e24-full остаётся full-bleed */
body.home .entry-content > .e24-full { max-width: none; }
/* Desktop only: hero ограничен той же шириной, что блок разделов.
На мобильном (≤900px) он растягивается на всю ширину viewport — см. правило выше. */
@media (min-width: 901px) {
body.home .entry-content > .e24-hero { max-width: min(1584px, 94vw) !important; }
}
/* Category shop pages, archive, product list */
body.archive .ct-container,
body.post-type-archive-product .ct-container,
body.tax-product_cat .ct-container,
body.woocommerce-shop .ct-container,
body.single-product .ct-container { max-width: min(1584px, 94vw) !important; }
/* Product grid — fit more columns on wide monitors */
/* === Глобальное выравнивание ширины контента — ТОЛЬКО МОБИЛЬНЫЕ ===========
На широких экранах оставляем исходные размеры (max-width: min(1584px, 94vw)
и padding 0 24px), на узких ≤900px все блоки тянутся до 98vw с 10/8px
отступом и идеально выравниваются по краям. */
@media (max-width:900px) {
:root {
--e24-max: min(1760px, 98vw);
--e24-pad: 10px;
--wp--style--global--content-size: var(--e24-max) !important;
--wp--style--global--wide-size: var(--e24-max) !important;
}
.e24-topbar .inner,
.e24-header .inner,
.e24-megamenu-inner,
.e24-hero,
.e24-cats,
.e24-st,
.e24-section-title,
.e24-trust-bar,
.e24-credit-wrap,
.e24-similar-wrap,
.e24-special,
.e24-popular,
.e24-recent,
.e24-news,
.e24-reviews,
.e24-map,
.e24-insta,
.e24-consult,
.entry-content > .e24-hero,
body.home .entry-content > * {
max-width: var(--e24-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--e24-pad) !important;
padding-right: var(--e24-pad) !important;
box-sizing: border-box !important;
}
.ct-container,
.ct-container-narrow,
.entry-content,
body.home .entry-content,
body.archive .ct-container,
body.post-type-archive-product .ct-container,
body.tax-product_cat .ct-container,
body.woocommerce-shop .ct-container,
body.single-product .ct-container,
body.page .ct-container,
body.single .ct-container {
max-width: var(--e24-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important; /* родитель не имеет паддинга — отступы дают сами блоки */
padding-right: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* Full-bleed элементы — на всю ширину без отступов */
.e24-full { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width:480px) {
:root { --e24-pad: 8px; }
}
/* === Жёсткое выравнивание мобильных контейнеров — выкорчёвываем
все унаследованные max-width из темы Blocksy и Gutenberg === */
@media (max-width:900px) {
/* Обёртки темы — full-bleed, никаких боковых паддингов */
body > main, .site-main, .ct-container-full,
body.home .ct-container, body.home .ct-container-full,
body article, body article.post, body article.page, body article.product,
body article > .entry-content,
body article > .entry-header,
body .blocksy-woo-messages-default,
body.home .woocommerce,
body.home .hero-section {
max-width:100% !important;
width:100% !important;
padding-left:0 !important;
padding-right:0 !important;
margin-left:0 !important;
margin-right:0 !important;
box-sizing:border-box !important;
}
/* Все блоки контента — единый margin 8px от края экрана.
Padding не трогаем — каждый блок сохраняет свой внутренний отступ.
ИСКЛЮЧЕНИЕ: .e24-hero остаётся full-bleed (отдельное правило выше с calc-trick) */
body .entry-content > .e24-trust-bar,
body .entry-content > .e24-cats,
body .entry-content > .e24-special,
body .entry-content > .e24-popular,
body .entry-content > .e24-recent,
body .entry-content > .e24-news,
body .entry-content > .e24-reviews,
body .entry-content > .e24-map,
body .entry-content > .e24-consult,
body .entry-content > .e24-team,
body .entry-content > .e24-insta,
body .entry-content > section[class*="e24-"]:not(.e24-hero) {
width:auto !important;
max-width:none !important;
margin-left:8px !important;
margin-right:8px !important;
padding-left:0 !important; /* свой внутренний 24px-паддинг тоже зануляем — нужен только 8px от края */
padding-right:0 !important;
box-sizing:border-box !important;
}
/* Каталоги: .e24-shop-wrap уже получает 8px (см. ≤1200px правило выше) */
/* === ШАБЛОН карточки товара (применён ко всем single-product страницам) ====
Изначально оттестировано на Hi-Tech (postid 629), затем расширено
на все товары через body.single-product.
Все блоки внутри single-product страницы получают 8px от обоих краёв. */
body.single-product .product-entry-wrapper,
body.single-product .woocommerce-product-gallery,
body.single-product .summary,
body.single-product .entry-summary,
body.single-product .e24-product-fulldesc,
body.single-product .product_meta,
body.single-product .e24-specs-wrap,
body.single-product .e24-credit-wrap,
body.single-product .e24-credit-wrap--split,
body.single-product .e24-similar-wrap,
body.single-product .related,
body.single-product .upsells,
body.single-product .woocommerce-tabs,
body.single-product .wc-tabs-wrapper,
body.single-product article > div,
body.single-product article > section {
width:auto !important;
max-width:none !important;
margin-left:8px !important;
margin-right:8px !important;
padding-left:0 !important;
padding-right:0 !important;
box-sizing:border-box !important;
}
/* Контейнеры темы — full-bleed, отступы дают сами блоки */
body.single-product article,
body.single-product .product-entry-wrapper.is-width-constrained,
body.single-product .ct-container,
body.single-product .ct-container-full {
max-width:100% !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
padding-left:0 !important;
padding-right:0 !important;
box-sizing:border-box !important;
}
/* На случай, если внутренние блоки имели свой padding 18-32px — оставляем
визуально только 8px от края экрана. Внутренние списки/таблицы берут 100%. */
body.single-product .e24-credit-calc,
body.single-product .e24-credit-info,
body.single-product .e24-credit-calc-col,
body.single-product .e24-specs-table {
max-width:100% !important;
width:100% !important;
box-sizing:border-box !important;
}
/* === Hi-Tech: галерея — основная фотка большая, миниатюры в один ряд ===
Blocksy flexy-gallery: .flexy-items — основное фото, .flexy-pills — миниатюры */
body.single-product .ct-product-gallery-container,
body.single-product .flexy-container,
body.single-product .flexy {
width:100% !important;
max-width:100% !important;
}
/* Основная фотка — на всю ширину контейнера (минус 16px от глобальных margin'ов) */
body.single-product .flexy-view,
body.single-product .flexy-items,
body.single-product .flexy-item,
body.single-product .flexy-item .ct-media-container,
body.single-product .flexy-item img {
width:100% !important;
max-width:100% !important;
}
/* === Миниатюры: ВСЕ влезают в ОДИН ряд под основным фото === */
body.single-product .flexy-pills {
width:100% !important;
max-width:100% !important;
margin-top:6px !important;
overflow:hidden !important; /* срезаем возможный wrap, чтобы строго в один ряд */
}
body.single-product .flexy-pills ol {
display:flex !important;
flex-wrap:nowrap !important; /* строго в одну строку */
gap:2px !important; /* минимальный зазор */
margin:0 !important;
padding:0 !important;
list-style:none !important;
width:100% !important;
}
body.single-product .flexy-pills li {
flex:1 1 0 !important; /* делим ширину поровну между всеми миниатюрами */
min-width:0 !important;
margin:0 !important;
padding:0 !important;
aspect-ratio:1/1;
}
body.single-product .flexy-pills li .ct-media-container,
body.single-product .flexy-pills li img {
width:100% !important;
height:100% !important;
aspect-ratio:1/1 !important;
object-fit:cover !important;
display:block !important;
border-radius:3px;
}
/* Активная миниатюра — лёгкая жёлтая рамка */
body.single-product .flexy-pills li.active img {
outline:2px solid var(--e24-yellow) !important;
outline-offset:-2px;
}
/* === Hi-Tech mobile: компактные отступы вокруг хлебных крошек ===
В 3 раза меньше дефолтного Blocksy-промежутка (60→20, 50→17). */
body.single-product .hero-section,
body.single-product .hero-section[data-type="type-1"] {
padding-top:8px !important;
padding-bottom:6px !important;
--container-padding:8px 0 6px 0 !important;
}
body.single-product .entry-header {
margin-top:0 !important;
margin-bottom:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
body.single-product .ct-breadcrumbs {
margin:0 !important;
padding:0 !important;
line-height:1.2 !important;
}
/* Article (контейнер галереи) — поджимаем верхний отступ */
body.single-product article,
body.single-product .ct-container-full[data-vertical-spacing*="top"] {
padding-top:6px !important;
--theme-content-vertical-spacing:18px !important; /* было 60px → /3 ≈ 20px */
}
body.single-product .product-entry-wrapper {
margin-top:0 !important;
padding-top:0 !important;
}
/* === Hi-Tech mobile: цена — слева, старая сразу за новой и в 2 раза меньше === */
body.single-product .summary .price,
body.single-product .entry-summary .price,
body.single-product .product .price {
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:baseline !important;
justify-content:flex-start !important;
gap:.4em !important; /* было 3.6em — сжимаем плотно */
text-align:left !important;
}
/* Новая цена — крупная (как было), слева */
body.single-product .summary .price ins,
body.single-product .entry-summary .price ins,
body.single-product .product .price ins {
order:1 !important;
font-size:inherit !important;
font-weight:900 !important;
color:#000 !important;
text-decoration:none !important;
white-space:nowrap !important;
}
/* Старая цена — сразу справа от новой, в 2 раза меньше */
body.single-product .summary .price del,
body.single-product .entry-summary .price del,
body.single-product .product .price del {
order:2 !important;
font-size:.5em !important; /* в 2 раза меньше новой */
color:#999 !important;
font-weight:700 !important;
text-decoration:line-through !important;
margin:0 !important;
white-space:nowrap !important;
}
/* === Hi-Tech mobile: убрать «коробку» вокруг строк результата калькулятора ===
В PHP-шаблоне у #e24cc-result есть inline-style с белым фоном, серой рамкой
и padding 16px. Снимаем — пусть строки выглядят как поля ввода выше. */
body.single-product #e24cc-result,
body.single-product #e24cc-result.e24cc-result,
body.single-product .e24-credit-calc #e24cc-result {
background:transparent !important;
border:0 !important;
border-radius:0 !important;
padding:0 !important;
box-shadow:none !important;
margin-top:14px !important;
gap:10px !important; /* зазор между строками внутри */
}
/* Сами строки тянутся на всю ширину — соответствуют по ширине полям ввода */
body.single-product #e24cc-result .e24cc-row {
width:100% !important;
box-sizing:border-box !important;
}
/* === Hi-Tech mobile: жёлтая плашка кредита «от X BYN/мес» — на 50% крупнее === */
body.single-product .e24-credit-plate-wrap-single .e24-credit-plate,
body.single-product .e24-credit-plate {
font-size:1.725rem !important; /* было 1.15rem × 1.5 */
padding:15px 21px !important; /* было 10px 14px × 1.5 */
gap:11px !important; /* было 7px × 1.5 */
border-radius:14px !important;
}
body.single-product .e24-credit-plate-icon svg {
width:1.3em !important; /* иконка тоже крупнее, чтобы пропорции */
height:1.3em !important;
}
body.single-product .e24-credit-plate-arrow {
font-size:1.2em !important;
}
/* === Hi-Tech mobile: похожие модели — как основной каталог,
2 карточки в ряду + 8px от краёв === */
body.single-product .e24-similar-wrap {
margin-left:8px !important;
margin-right:8px !important;
padding-left:0 !important;
padding-right:0 !important;
width:auto !important;
max-width:none !important;
box-sizing:border-box !important;
}
body.single-product ul.products.e24-similar-grid,
body.e24-moto ul.products.e24-similar-grid {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:6px !important; /* как в основном каталоге */
padding:0 !important;
margin:0 !important;
width:auto !important;
max-width:none !important;
box-sizing:border-box !important;
}
/* Карточки наследуют все мобильные стили от ul.products li.product
(название, цена, описание, плашка кредита) — ничего отдельно не задаём */
body.single-product ul.products.e24-similar-grid li.product {
min-width:0 !important;
width:auto !important;
max-width:none !important;
}
/* Header inner — те же 8px от края, своё внутреннее устройство сохраняем */
body .e24-header > .inner {
max-width:none !important;
margin-left:8px !important;
margin-right:8px !important;
padding-left:0 !important;
padding-right:0 !important;
box-sizing:border-box !important;
}
}