/* === MMB26 — Mobile-First CSS === */
/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100dvh; background-color: var(--body-bg);}
img, picture, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; }
hr {
border: none;
height: 1px;
background-color: #f3f3f3;
margin: 15px 0;
}
.v26-page h1 {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-color);
}
.v26-page h2 {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin-top: 24px;
margin-bottom: 12px;
}
.v26-page h3 {
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
margin-top: 20px;
margin-bottom: 8px;
}
/* --- Variables --- */
:root {
--green: #83b037;
--green-dark: #669524;
--green-light: #98c63c;
--magenta: #cc3399;
--magenta-dark: #a62a7a;
--red: #e53935;
--text: #262626;
--text-primary: #262626;
--text-secondary: #666;
--text-muted: #999;
--body-bg: rgba(245, 247, 250, 1);
--bg: #fff;
--bg-light: #f5f5f5;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e9ecef;
--border: #e5e5e5;
--border-color: #e5e5e5;
--radius: 8px;
--radius-sm: 4px;
--radius-lg: 12px;
--shadow: 0 1px 3px rgba(0,0,0,.08);
--shadow-hover: 0 4px 12px rgba(0,0,0,.12);
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--container: 1200px;
--gap: 12px;
--color-primary: #007a3a;
--color-primary-hover: #006a3d;
--color-primary-dark: #005c33;
--surface-primary: #fff;
--surface-secondary: #f5f5f5;
--warning-bg: #fffbeb;
--warning-border: #fde68a;
--warning-text: #92400e;
--warning-strong-bg: #fef3c7;
--warning-strong-border: #f59e0b;
--warning-strong-text: #92400e;
--surface-panel: rgba(0, 48, 120, 0.04);
--surface-panel-hover: rgb(214, 215, 222);
}
/* Dark mode foundation — activates via system preference (prefers-color-scheme: dark)
or manual toggle (.dark-mode class on ). Toggle via:
localStorage.setItem('theme', 'dark'/'light') and add/remove .dark-mode class.
All components automatically adapt because they use CSS custom properties. */
/* @media (prefers-color-scheme: dark) { */
/* :root:not(.light-mode) { */
/* --text: #e0e0e0; */
/* --text-primary: #f0f0f0; */
/* --text-secondary: #a0a0a0; */
/* --text-muted: #777; */
/* --body-bg: #222; */
/* --bg: #1a1a1a; */
/* --bg-light: #252525; */
/* --bg-secondary: #252525; */
/* --bg-tertiary: #333; */
/* --border: #333; */
/* --border-color: #333; */
/* --shadow: 0 1px 3px rgba(0,0,0,.3); */
/* --shadow-hover: 0 4px 12px rgba(0,0,0,.4); */
/* --surface-primary: #1a1a1a; */
/* --surface-secondary: #252525; */
/* --green: #8fc43c; */
/* --color-primary: #2ecc71; */
/* --color-primary-hover: #27ae60; */
/* --color-primary-dark: #219a52; */
/* --magenta-dark: #d44a9e; */
/* --warning-bg: #2d2a1b; */
/* --warning-border: #5c4d20; */
/* --warning-text: #fcd34d; */
/* --warning-strong-bg: #2d2a1b; */
/* --warning-strong-border: #5c4d20; */
/* --warning-strong-text: #fcd34d; */
/* --surface-panel: rgba(255, 255, 255, 0.04); */
/* --surface-panel-hover: rgba(255, 255, 255, 0.08); */
/* } */
}
/* Manual dark mode toggle (overrides system preference) */
:root.dark-mode {
--text: #e0e0e0;
--text-primary: #f0f0f0;
--text-secondary: #a0a0a0;
--text-muted: #777;
--body-bg: #222;
--bg: #1a1a1a;
--bg-light: #252525;
--bg-secondary: #252525;
--bg-tertiary: #333;
--border: #333;
--border-color: #333;
--shadow: 0 1px 3px rgba(0,0,0,.3);
--shadow-hover: 0 4px 12px rgba(0,0,0,.4);
--surface-primary: #1a1a1a;
--surface-secondary: #252525;
--green: #8fc43c;
--color-primary: #2ecc71;
--color-primary-hover: #27ae60;
--color-primary-dark: #219a52;
--magenta-dark: #d44a9e;
--warning-bg: #2d2a1b;
--warning-border: #5c4d20;
--warning-text: #fcd34d;
--warning-strong-bg: #2d2a1b;
--warning-strong-border: #5c4d20;
--warning-strong-text: #fcd34d;
--surface-panel: rgba(255, 255, 255, 0.04);
--surface-panel-hover: rgba(255, 255, 255, 0.08);
}
/* Dark mode component overrides — semantic colors for alerts, badges, etc. */
/* @media (prefers-color-scheme: dark) { */
/* .v26-alert--danger { background: #2d1b1b; border-color: #5c2020; color: #fca5a5; } */
/* .v26-alert--success { background: #1b2d1b; border-color: #205c20; color: #86efac; } */
/* .v26-alert--warning { background: #2d2a1b; border-color: #5c4d20; color: #fcd34d; } */
/* .attention-success { background: #1b2d1b !important; color: #86efac !important; } */
/* .attention-error { background: #2d1b1b !important; color: #fca5a5 !important; } */
/* .attention-warning { background: #2d2a1b !important; color: #fcd34d !important; } */
/* scrollbar-color: var(--border) transparent; */
/* ::-webkit-scrollbar { width: 8px; height: 8px; } */
/* ::-webkit-scrollbar-track { background: transparent; } */
/* ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } */
/* ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } */
/* ::-webkit-scrollbar-corner { background: transparent; } */
/* .city-dialog { background: var(--bg); color: var(--text); } */
/* .city-dialog-inner { background: var(--bg); } */
/* .city-dialog-header h3 { color: var(--text-primary); } */
/* .city-dialog-item.active { background: #1b2d1b; } */
/* .v26-news-nav a:hover { background: #1b2d1b; } */
/* .v26-404-search input { background: var(--bg-secondary); color: var(--text); border-color: var(--border); } */
/* .filter-slider-inputs input[type="text"] { background: var(--surface-primary) !important; color: var(--text) !important; border-color: var(--border-color) !important; } */
/* .footer-theme-toggle { border-color: var(--border-color); } */
/* .v26-cart-toast { background: var(--surface-secondary); color: var(--text); border-color: var(--border); } */
/* .v26-cart-toast a { color: var(--color-primary); } */
/* .noUi-handle { background: var(--surface-primary) !important; } */
/* #order_form_div .sale_data-table, */
/* #order_form_div .sale_data-table.summary td { background: var(--surface-primary) !important; } */
/* .bt2 { background: var(--surface-primary) !important; } */
/* .component-product-detail-mobile-fixedbottom-container { background: var(--surface-primary); } */
/* #order_form_div input[type="text"], */
/* #order_form_div input[type="password"], */
/* #order_form_div textarea, */
/* #order_form_div select { background: var(--surface-primary) !important; color: var(--text) !important; } */
/* .bx_ordercart input, */
/* .bx_ordercart textarea, */
/* .bx_ordercart select { background: var(--surface-primary) !important; color: var(--text) !important; } */
/* .v26-input { background: var(--surface-primary); color: var(--text); border-color: var(--border-color); } */
/* .v26-warning { background: #2d2a1b; border-color: #5c4d20; color: #fcd34d; } */
/* .v26-highlight { background: #1b2d1b; border-color: #205c20; } */
/* .attention1 { background: #2d2a1b; border-color: #5c4d20; color: #fcd34d; } */
/* .attention-warning { background: #2d2a1b !important; border-color: #5c4d20 !important; color: #fcd34d !important; } */
/* .banner-dot.active { background: var(--text-primary); } */
/* .item-label-in-stock { background: #1b2d1b; color: #86efac; } */
/* #catalogProducts.catalog-is-loading::before { background: rgba(0, 0, 0, 0.5); border-radius: var(--radius); margin-top: -10px; } */
/* } */
:root.dark-mode .v26-alert--danger { background: #2d1b1b; border-color: #5c2020; color: #fca5a5; }
:root.dark-mode .v26-alert--success { background: #1b2d1b; border-color: #205c20; color: #86efac; }
:root.dark-mode .v26-alert--warning { background: #2d2a1b; border-color: #5c4d20; color: #fcd34d; }
:root.dark-mode .attention-success { background: #1b2d1b !important; color: #86efac !important; }
:root.dark-mode .attention-error { background: #2d1b1b !important; color: #fca5a5 !important; }
:root.dark-mode .attention-warning { background: #2d2a1b !important; color: #fcd34d !important; }
:root.dark-mode { scrollbar-color: var(--border) transparent; }
:root.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; }
:root.dark-mode ::-webkit-scrollbar-track { background: transparent; }
:root.dark-mode ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
:root.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
:root.dark-mode ::-webkit-scrollbar-corner { background: transparent; }
:root.dark-mode .city-dialog { background: var(--bg); color: var(--text); }
:root.dark-mode .city-dialog-inner { background: var(--bg); }
:root.dark-mode .city-dialog-header h3 { color: var(--text-primary); }
:root.dark-mode .city-dialog-item.active { background: #1b2d1b; }
:root.dark-mode .v26-news-nav a:hover { background: #1b2d1b; }
:root.dark-mode .v26-404-search input { background: var(--bg-secondary); color: var(--text); border-color: var(--border); }
:root.dark-mode .filter-slider-inputs input[type="text"] { background: var(--surface-primary) !important; color: var(--text) !important; border-color: var(--border-color) !important; }
:root.dark-mode .footer-theme-toggle { border-color: var(--border-color); }
:root.dark-mode .v26-cart-toast { background: var(--surface-secondary); color: var(--text); border-color: var(--border); }
:root.dark-mode .v26-cart-toast a { color: var(--color-primary); }
:root.dark-mode .noUi-handle { background: var(--surface-primary) !important; }
:root.dark-mode #order_form_div .sale_data-table,
:root.dark-mode #order_form_div .sale_data-table.summary td { background: var(--surface-primary) !important; }
:root.dark-mode .bt2 { background: var(--surface-primary) !important; }
:root.dark-mode .component-product-detail-mobile-fixedbottom-container { background: var(--surface-primary); }
:root.dark-mode #order_form_div input[type="text"],
:root.dark-mode #order_form_div input[type="password"],
:root.dark-mode #order_form_div textarea,
:root.dark-mode #order_form_div select {
background: var(--surface-primary) !important;
color: var(--text) !important;
}
:root.dark-mode .bx_ordercart input,
:root.dark-mode .bx_ordercart textarea,
:root.dark-mode .bx_ordercart select {
background: var(--surface-primary) !important;
color: var(--text) !important;
}
:root.dark-mode .v26-input {
background: var(--surface-primary);
color: var(--text);
border-color: var(--border-color);
}
:root.dark-mode .v26-warning { background: #2d2a1b; border-color: #5c4d20; color: #fcd34d; }
:root.dark-mode .v26-highlight { background: #1b2d1b; border-color: #205c20; }
:root.dark-mode .attention1 { background: #2d2a1b; border-color: #5c4d20; color: #fcd34d; }
:root.dark-mode .attention-warning { background: #2d2a1b !important; border-color: #5c4d20 !important; color: #fcd34d !important; }
:root.dark-mode .banner-dot.active { background: var(--text-primary); }
:root.dark-mode .item-label-in-stock { background: #1b2d1b; color: #86efac; }
:root.dark-mode #catalogProducts.catalog-is-loading::before { background: rgba(0, 0, 0, 0.5); }
:root.dark-mode .product-card-photo { background: #fff;}
/* Light mode override (when user explicitly disables dark) */
:root.light-mode {
/* All light values are already the :root defaults — no override needed */
}
body {
font-family: var(--font);
font-size: 14px;
line-height: 1.5;
color: var(--text);
background: var(--body-bg);
-webkit-font-smoothing: antialiased;
}
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 12px;
}
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); border: 0;
}
/* --- Buttons --- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 11px 20px;
font-size: 14px;
font-weight: 600;
border: none; border-radius: var(--radius);
cursor: pointer; text-decoration: none;
transition: background .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-primary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-warning { background: #f0ad4e; color: #fff; cursor: default; }
.btn-outline {
background: transparent; color: var(--green);
border: 1px solid var(--green);
}
.btn-outline:hover { background: var(--green); color: #fff; }
.btn-outline:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-sm { padding: 8px 10px; font-size: 13px; }
.btn-block { width: 100%; }
/* --- Badge --- */
.badge {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 3px;
font-size: 12px; font-weight: 600; line-height: 1.4;
white-space: nowrap;
}
.badge-delivery { background: var(--green); color: #fff; }
.badge-sale { background: var(--magenta); color: #fff; }
.badge-hit { background: #ff9800; color: #fff; }
.badge-new { background: #2196f3; color: #fff; }
.badge-gift { background: var(--red); color: #fff; }
/* ============================================
HEADER
============================================ */
.site-header {
position: relative;
z-index: 100;
background: var(--bg);
border-bottom: 3px solid var(--green);
}
/* Top bar (#15) */
.header-topbar {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
font-size: 13px;
max-height: 50px;
}
.header-topbar-inner {
display: flex; align-items: center; justify-content: space-between;
max-width: var(--container); margin: 0 auto;
padding: 6px 12px;
}
.header-topbar-left {
display: flex; align-items: center; gap: 11px;
}
.header-topbar-right {
display: flex; align-items: center; gap: 12px;
}
.header-topbar-link {
display: inline-flex; align-items: center; gap: 4px;
color: var(--text-secondary); text-decoration: none;
font-size: 13px;
}
.header-topbar-link:hover { color: var(--green); }
.header-topbar-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
.header-topbar-link svg { flex-shrink: 0; }
.header-topbar-sep { color: var(--text-muted); margin: 0 2px; }
/* City selector — text-decoration for multiline underline (#10) */
.city-select {
display: inline-flex; align-items: center; gap: 4px;
cursor: pointer; font-size: 13px; color: var(--text-secondary);
background: none; border: none; padding: 0;
}
.city-select:hover { color: var(--green); }
.city-select svg { flex-shrink: 0; }
.city-name {
text-decoration: underline dashed;
text-underline-offset: 2px;
}
/* Main header row */
.header-main {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
max-width: var(--container); margin: 0 auto;
max-height: 80px;
}
.header-burger {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
background: none; border: none; cursor: pointer; color: var(--text);
flex-shrink: 0;
}
.header-logo { flex-shrink: 0; }
.header-logo img { height: 28px; width: auto; }
/* Search */
.header-search {
flex: 1; min-width: 0;
position: relative;
}
.header-search input {
width: 100%; height: 36px;
padding: 0 36px 0 12px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-size: 14px;
background: var(--bg-secondary);
color: var(--text);
outline: none;
transition: border-color .15s;
}
.header-search input:focus { border-color: var(--green); background: var(--bg); }
.header-search-btn {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: none; border: none; cursor: pointer; color: var(--text-muted);
}
.header-search-desktop { display: none; }
.header-search-mobile {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px 8px;
max-width: var(--container); margin: 0 auto;
max-height: 60px;
}
/* Header actions — mobile (inside header-search-mobile) */
.header-actions-mobile {
display: flex; align-items: center; gap: 4px;
flex-shrink: 0;
margin-left: auto;
}
/* Header actions — desktop (inside header-nav) */
.header-actions {
display: flex; align-items: center; gap: 4px;
flex-shrink: 0;
margin-left: auto;
}
.header-action {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
color: var(--text-secondary); text-decoration: none;
}
.header-action:hover { color: var(--green); }
.header-action-count {
position: absolute; top: 2px; right: 2px;
min-width: 16px; height: 16px;
display: flex; align-items: center; justify-content: center;
background: var(--magenta); color: #fff;
font-size: 12px; font-weight: 700;
border-radius: 8px; padding: 0 4px;
}
/* Phone + callback — desktop only */
.header-phone {
display: none;
flex-direction: column; align-items: flex-end;
white-space: nowrap; flex-shrink: 0;
}
.header-phone a { font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; }
.comagic_phone_number strong { color: var(--green); }
.header-callback-btn {
background: none; border: none; cursor: pointer;
font-size: 13px; color: var(--green);
border-bottom: 1px dashed var(--green);
padding: 0; margin-bottom: 4px;
}
.header-callback-btn:hover { color: var(--green-dark); }
/* Header nav — desktop menu bar */
.header-nav { display: none; background: var(--bg); max-height: 60px; }
.header-nav-inner {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 12px;
max-width: var(--container); margin: 0 auto;
padding: 0 12px;
position: relative;
}
/* Catalog dropdown wrapper */
.header-nav-catalog-wrap {
position: relative;
flex-shrink: 0;
align-self: stretch;
}
.header-nav-categories {
display: flex; align-items: center; gap: 6px;
padding: 8px 16px;
background: var(--green); color: #fff;
border: none; border-radius: 0;
font-weight: 600; font-size: 14px;
cursor: pointer; white-space: nowrap; height: 100%;
}
.header-nav-categories:hover { background: var(--green-dark); }
.catalog-chevron { transition: transform .2s; }
.header-nav-categories.open .catalog-chevron { transform: rotate(180deg); }
/* 3-level mega dropdown (#1) */
.catalog-dropdown {
display: none;
position: absolute;
top: 100%;
left: 12px;
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
z-index: 200;
}
.catalog-dropdown.open { display: block; }
.catalog-dd-layout {
display: flex;
min-height: 380px;
}
.catalog-dd-l1 {
width: 220px;
border-right: 1px solid var(--border);
padding: 8px 0;
flex-shrink: 0;
overflow-y: auto;
}
.catalog-dd-l1-item {
display: flex; align-items: center; gap: 8px;
padding: 14px 14px;
font-size: 15px; color: var(--text);
cursor: pointer;
transition: background .1s;
}
.catalog-dd-l1-item:hover,
.catalog-dd-l1-item.active {
background: var(--bg-secondary);
color: var(--green);
}
.catalog-dd-l1-item img {
width: 28px; height: 21px;
object-fit: contain; flex-shrink: 0;
}
.catalog-dd-l1-item svg:last-child {
margin-left: auto; flex-shrink: 0; opacity: .4;
}
.catalog-dd-l1-promo a {
display: flex; align-items: center; gap: 8px;
text-decoration: none; color: var(--magenta); font-weight: 600;
}
.catalog-dd-l1-promo a img { width: 28px; height: 21px; object-fit: contain; }
.catalog-dd-panels {
flex: 1;
padding: 12px 16px;
min-width: 0;
}
.catalog-dd-panel {
display: none;
gap: 16px;
}
.catalog-dd-panel.active {
display: flex;
}
.catalog-dd-col {
flex: 1;
min-width: 0;
}
.catalog-dd-group {
margin-bottom: 12px;
}
.catalog-dd-l2 {
display: block;
font-size: 15px; font-weight: 600;
color: var(--text);
text-decoration: none;
padding: 3px 0;
margin-bottom: 2px;
}
.catalog-dd-l2:hover { color: var(--green); }
.catalog-dd-group a:not(.catalog-dd-l2) {
display: block;
font-size: 14px;
color: var(--text-secondary);
text-decoration: none;
padding: 2px 0 2px 8px;
}
.catalog-dd-group a:not(.catalog-dd-l2):hover { color: var(--green); }
.header-nav-links,
.header-nav-links-desktop {
display: flex; align-items: center; gap: 0;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
}
.header-nav-links a,
.header-nav-links-desktop a {
display: flex; align-items: center;
padding: 10px 14px;
font-size: 13px; color: var(--text-secondary);
text-decoration: none; white-space: nowrap;
transition: color .15s;
}
.header-nav-links a:hover,
.header-nav-links-desktop a:hover { color: var(--green); }
.header-nav-links a.header-nav-link-promo,
.header-nav-links-desktop a.header-nav-link-promo { color: var(--magenta); font-weight: 700; }
.header-nav-links a.header-nav-link-promo:hover,
.header-nav-links-desktop a.header-nav-link-promo:hover { color: var(--red); }
/* Nav links in main row — desktop only */
.header-nav-links-desktop { display: none; }
@media (min-width: 1024px) {
.header-nav-links-desktop { display: flex; }
}
/* ============================================
MOBILE MENU (slide-in panel)
============================================ */
.mobile-menu {
position: fixed; top: 0; left: -300px;
width: 300px; height: 100%;
background: var(--bg);
z-index: 300;
will-change: left, box-shadow;
transition: left .3s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 4px 0 24px rgba(0,0,0,0);
}
.mobile-menu.open {
left: 0;
box-shadow: 4px 0 24px rgba(0,0,0,.15);
}
.mobile-menu-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
font-weight: 700; font-size: 16px;
border-bottom: 1px solid var(--border);
}
.mobile-menu-close {
background: none; border: none; cursor: pointer; color: var(--text);
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border-radius: 6px;
transition: background .15s;
}
.mobile-menu-close:hover { background: var(--bg-secondary); }
.mobile-menu-body { padding: 8px 16px 24px; }
.mobile-menu-body > a {
display: block; padding: 10px 0;
font-size: 14px; color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--border);
transition: color .15s, padding-left .15s;
}
.mobile-menu-body > a:hover { color: var(--color-primary); padding-left: 4px; }
.mobile-menu-body hr { border: none; border-top: 2px solid var(--border); margin: 8px 0; }
.mobile-menu-body .btn { margin-top: 12px; }
.mm-promo-link img { display: none; }
.mm-promo-link { border-bottom: none !important; }
.mm-login-link { border-bottom: none !important; }
.mm-login-link {
display: flex !important;
align-items: center;
gap: 8px;
font-weight: 600 !important;
color: var(--green) !important;
}
.mm-login-link svg { flex-shrink: 0; }
/* Mobile menu accordion */
.mm-accordion { border-bottom: 1px solid var(--border); }
.mm-accordion-toggle {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 10px 0;
background: none; border: none;
font-size: 14px; font-weight: 600;
color: var(--text); cursor: pointer;
text-align: left;
}
.mm-accordion-toggle svg { transition: transform .2s; flex-shrink: 0; }
.mm-accordion.open .mm-accordion-toggle svg { transform: rotate(180deg); }
.mm-accordion-body {
display: none;
padding: 0 0 8px 12px;
}
.mm-accordion.open .mm-accordion-body { display: block; }
.mm-accordion-body a {
display: block;
padding: 6px 0;
font-size: 13px;
color: var(--text-secondary);
text-decoration: none;
}
.mm-accordion-body a:hover { color: var(--green); }
.mobile-menu-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.4);
z-index: 299;
will-change: opacity;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.mobile-menu-overlay.open {
opacity: 1;
pointer-events: auto;
}
/* ============================================
CATEGORIES ICONS (horizontal scroll on mobile)
============================================ */
.categories-strip {
padding: 12px 0;
border-bottom: 1px solid var(--border);
position: relative;
background-color: var(--bg);
}
.categories-strip::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 40px;
background: linear-gradient(to left, var(--bg), transparent);
pointer-events: none;
opacity: 1;
transition: opacity 0.3s;
}
.categories-strip.scrolled-end::after { opacity: 0; }
.categories-strip-scroll {
display: flex; gap: 4px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
}
.categories-strip-scroll::-webkit-scrollbar { display: none; }
.categories-strip-scroll.grabbing { cursor: grabbing; }
@media (max-width: 767px) {
.categories-strip .categories-strip-scroll {
margin: 0 -12px;
padding: 0 12px;
}
}
/* Shake hint animation (#14) */
@keyframes shake-scroll {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-30px); }
30% { transform: translateX(20px); }
45% { transform: translateX(-15px); }
60% { transform: translateX(10px); }
75% { transform: translateX(-5px); }
}
.categories-strip-scroll.shake-hint {
animation: shake-scroll .8s ease-in-out;
}
.category-icon {
display: flex; flex-direction: column; align-items: center;
min-width: 72px;
min-height: 100px;
padding: 8px 4px;
text-decoration: none; color: var(--text-secondary);
scroll-snap-align: start;
transition: color .15s, transform .25s cubic-bezier(.25,.8,.25,1);
flex-shrink: 0;
transform-origin: center bottom;
}
.category-icon:hover { color: var(--green); transform: scale(1.08); }
.category-icon .category-icon-img-wrap {
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.category-icon img {
max-width: 70px;
max-height: 58px;
object-fit: contain;
border-radius: var(--radius);
}
.category-icon span { font-size: 13px; text-align: center; line-height: 1.2; }
.category-icon-promo { color: var(--magenta); }
.category-icon-promo:hover { color: var(--red); }
/* ============================================
H1
============================================ */
.page-h1 { font-size: 22px; font-weight: 700; padding: 16px 0 8px; }
/* Bitrix breadcrumb component */
.breadcrumb {
padding: 16px 0 0;
}
.breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
gap: 4px;
}
.breadcrumb-item {
display: flex;
align-items: center;
gap: 4px;
}
.breadcrumb-item::before {
content: '›';
color: var(--text-muted);
margin: 0 2px;
}
.breadcrumb-item:first-child::before {
display: none;
}
.breadcrumb-item a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s;
}
.breadcrumb-item a:hover {
color: var(--color-primary);
text-decoration: none;
}
.breadcrumb-item.active {
color: var(--text-primary);
font-weight: 500;
}
.breadcrumb-item[aria-current="page"],
.v26-breadcrumb [aria-current="page"] {
color: var(--text-muted);
font-weight: 500;
}
/* Catalog subcategories bar */
.catalog-subcategories {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 4px 12px 16px;
font-size: 13px;
}
.catalog-subcategories__label {
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
.catalog-subcategories__items {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.catalog-subcategories-item {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
color: var(--text-secondary);
background-color: var(--surface-panel);
text-decoration: none;
transition: all 0.15s;
white-space: nowrap;
}
.catalog-subcategories-item:hover {
background-color: var(--surface-panel-hover);
color: var(--color-primary);
text-decoration: none;
}
.catalog-subcategories-item.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
/*font-weight: 500;*/
}
/* Catalog footer — section description/SEO text */
.catalog-footer {
margin: 20px 0 0;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
}
.catalog-footer .h1 {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
/* Search results count */
.search-number {
font-size: 14px;
color: var(--text-muted);
padding: 8px 0;
}
.search-number span {
font-weight: 600;
color: var(--text-primary);
}
.catalog-subcategories-select {
display: none;
width: 100%;
margin-top: 8px;
padding: 8px 32px 8px 12px;
border: 1px solid var(--border-color, #ddd);
border-radius: var(--radius-sm, 8px);
background: var(--surface-primary, #fff);
color: var(--text-primary);
font-size: 14px;
appearance: none;
background-image: 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='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
@media (max-width: 767px) {
.catalog-subcategories.hidden-mobile {
display: flex;
}
.catalog-subcategories.hidden-mobile .catalog-subcategories__items {
display: none;
}
.catalog-subcategories-select {
display: block;
}
}
/* ============================================
BANNERS — 3-column layout
============================================ */
.banners-section {
padding: 0 12px 16px;
max-width: var(--container); margin: 0 auto;
}
.banners-layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 8px;
}
.banners-carousel {
grid-column: 1 / -1;
grid-row: 1;
position: relative;
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-secondary);
}
.banners-track { position: relative; aspect-ratio: 540 / 440; }
.banner-slide {
position: absolute; inset: 0;
opacity: 0; transition: opacity .5s;
will-change: opacity;
}
.banner-slide.active { opacity: 1; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Side promo banners (#13 — image fills full width) */
.banner-promo {
position: relative;
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
background: var(--bg-secondary);
}
.banner-promo img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .3s;
}
.banner-promo:hover img { transform: scale(1.03); }
.banner-promo-label {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 6px 8px;
background: rgba(0,0,0,.6);
color: #fff;
font-size: 13px; font-weight: 600;
line-height: 1.3;
}
.banner-promo-label em {
display: block; font-style: normal;
font-size: 14px; color: var(--green-light);
}
/* Carousel controls */
.banners-dots {
position: absolute; bottom: 12px;
left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; z-index: 2;
}
.banner-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(255,255,255,.5);
border: none; cursor: pointer;
transition: background .2s;
}
.banner-dot.active { background: #fff; }
/* Banner arrow: centered icon (#5) */
.banner-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px;
background: rgba(255,255,255,.7);
border: none; border-radius: 50%;
cursor: pointer; z-index: 2;
color: var(--text);
display: none;
align-items: center; justify-content: center;
}
.banner-arrow svg { display: block; }
.banner-arrow:hover { background: rgba(255,255,255,.9); }
.banner-prev { left: 12px; }
.banner-next { right: 12px; }
/* ============================================
PRODUCT CARD
============================================ */
.product-card {
display: flex; flex-direction: column;
background: var(--bg);
border-radius: var(--radius);
overflow: hidden;
transition: box-shadow .2s, transform .2s, border-color .2s;
position: relative;
content-visibility: auto;
contain-intrinsic-size: auto 350px;
}
@media (hover: hover) {
.product-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
border-color: rgba(0,122,58,.15);
}
}
.product-card-link { text-decoration: none; color: inherit; }
.product-card-photo-wrap {
position: relative;
}
.product-card-photo {
position: relative;
/* aspect-ratio: 1 / 1; */
overflow: hidden;
background: transparent;
padding: 0 4px;
}
.product-card-photo img {
width: 100%; height: 100%; object-fit: contain;
transition: transform .3s cubic-bezier(0.4,0,0.2,1);
}
@media (hover: hover) {
.product-card:hover .product-card-photo img {
transform: scale(1.02);
}
}
.product-card-badges {
position: absolute; top: 4px; left: 4px;
display: flex; flex-direction: column; align-items: flex-start; gap: 4px; z-index: 2;
opacity: 0.7;
transition: opacity .2s ease;
}
@media (max-width: 1024px) {
.product-card-badges {
flex-direction: row;
top: 2px; left: 2px;
}
}
@media (hover: hover) {
.product-card:hover .product-card-badges {
opacity: 0;
}
}
.product-card-fav {
position: absolute; top: 8px; right: 8px;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.72);
border-radius: 50%; border: none; cursor: pointer;
color: var(--text-muted); z-index: 2;
transition: color .15s;
}
@media (hover: hover) {
.product-card-fav:hover {
color: var(--magenta);
transform: scale(1.15);
}
}
.product-card-fav.active { color: var(--magenta); }
.product-card-fav.active svg { fill: var(--magenta); }
.product-card-fav:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 4px; }
.product-card-delivery { z-index: 2; }
/* Gallery dots — pointer-events enabled for hover (#3) */
.product-card-dots {
position: absolute; bottom: 8px;
left: 50%; transform: translateX(-50%);
display: flex; gap: 4px;
background: rgba(255,255,255,.6);
padding: 4px;
border-radius: 5px;
opacity: .3;
z-index: 3;
transition: opacity .2s ease;
}
@media (hover: hover) {
.product-card:hover .product-card-dots {
opacity: 1;
}
}
.product-card-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(0,0,0,.2);
transition: background .15s, transform .15s;
pointer-events: auto;
cursor: pointer;
}
.product-card-dot.active {
background: var(--green);
transform: scale(1.3);
}
.product-card-media { cursor: pointer; }
.product-card-media img { transition: opacity .15s; max-height: 240px; }
/* Mobile: horizontal swipe gallery with scroll-snap */
@media (max-width: 767px) {
.product-card-media.product-card-media--gallery {
overflow: hidden;
}
.product-card-media.product-card-media--gallery .product-card-media__slider {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
}
.product-card-media.product-card-media--gallery .product-card-media__slider::-webkit-scrollbar { display: none; }
.product-card-media.product-card-media--gallery .product-card-media__slider img {
flex-shrink: 0;
min-width: 100%;
width: 100%;
object-fit: contain;
scroll-snap-align: start;
max-height: 240px;
}
.product-card-media.product-card-media--gallery .product-card-dots {
opacity: 1;
background: rgba(255,255,255,.75);
}
}
/* Configurator chip on product photo */
.product-card-config-badge {
position: absolute;
bottom: 22px;
right: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
font-size: 11px;
line-height: 1.2;
font-weight: 500;
color: var(--text-secondary, #444);
background: rgba(255, 255, 255, .92);
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
pointer-events: none;
white-space: nowrap;
}
.product-card-config-badge__icon {
flex-shrink: 0;
opacity: .75;
}
/* Card body */
.product-card-body {
display: flex; flex-direction: column; gap: 3px;
padding: 8px 10px 10px; flex: 1;
}
.product-card-sku { font-size: 12px; color: var(--text-muted); letter-spacing: .3px; position: absolute; bottom: 2px; right: 2px; z-index: 2; opacity: .55; transition: opacity .2s ease; }
@media (hover: hover) {
.product-card-photo:hover .product-card-sku { opacity: 0; }
}
.product-card-title {
font-size: 13px; font-weight: 400; line-height: 1.35;
color: var(--text-secondary); text-decoration: none;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
transition: color .15s;
}
@media (hover: hover) {
.product-card:hover .product-card-title {
color: var(--color-primary);
}
}
.product-card-specs {
display: flex; flex-direction: row; gap: 4px;
font-size: 13px; color: var(--text-muted); line-height: 1.3;
margin-top: 2px;
}
@media (max-width: 1440px) {
.product-card-specs {
flex-direction: column; gap: 1px;
}
}
.product-card-specs dt { display: none; }
.product-card-specs dd { display: flex; align-items: center; gap: 4px; }
.product-card-specs dd svg { width: 12px; height: 12px; flex-shrink: 0; opacity: .5; }
.product-card-specs dd i { width: 14px; text-align: center; flex-shrink: 0; opacity: .5; font-size: 12px; }
.product-card-footer {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-top: auto; padding-top: 8px;
}
@media (max-width: 1024px) {
.product-card-footer { flex-direction: column; align-items: stretch; }
}
.product-card-prices {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.product-card-price-old { font-size: 13px; color: var(--text-muted); text-decoration: line-through; }
.product-card-price-label { font-size: 13px; line-height: 1.2; color: var(--text-muted); }
.product-card-price { font-size: 16px; font-weight: 700; color: var(--magenta); transition: color .15s; line-height: 1.15; margin: 0; }
@media (hover: hover) {
.product-card:hover .product-card-price { color: var(--color-primary); }
}
.product-card-price-prefix { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.product-card-credit { font-size: 13px; color: var(--text-muted); }
.product-card-btn { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.product-card-btn .btn-primary {
background: var(--bg);
color: var(--green);
border: 1px solid var(--green);
transition: background .15s, color .15s, transform .1s, box-shadow .15s;
}
@media (hover: hover) {
.product-card-btn .btn-primary:hover {
background: var(--green);
color: #fff;
}
}
.product-card-btn .btn-outline {
background: var(--bg);
border-style: dashed;
color: var(--text-secondary);
}
@media (hover: hover) {
.product-card-btn .btn-outline:hover {
background: rgba(0,122,58,.06);
color: var(--green);
}
}
.product-card-btn .btn-primary:active {
transform: scale(0.97);
}
/* ============================================
PRODUCT GRID
============================================ */
.section-title { font-size: 20px; font-weight: 700; padding: 16px 12px 8px; }
.products-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
padding: 0 12px 16px;
}
@media (max-width: 767px) {
.products-grid {
gap: 2px;
padding: 0 4px 16px;
}
}
/* Adaptive grid: 4 cols when desktop filter is open on 1024px+ */
@media (min-width: 1024px) {
.is-open-desktop-filter .products-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.categories-strip--cards {
background-color: var(--body-bg);
}
.categories-strip--cards .catalog-sections-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.categories-strip--cards .catalog-section-card {
display: flex;
flex-direction: column;
border-radius: var(--radius);
text-decoration: none;
color: var(--text);
min-height: 100%;
overflow: hidden;
background-color: var(--bg);
transition: box-shadow .2s, transform .2s, border-color .2s;
position: relative;
}
.categories-strip--cards .catalog-section-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.categories-strip--cards .catalog-section-card-thumb {
height: 130px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.categories-strip--cards .catalog-section-card-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.categories-strip--cards .catalog-section-card:hover img {
transform: scale(1.02);
}
.categories-strip--cards .catalog-section-card-info {
padding: 10px;
}
.categories-strip--cards .catalog-section-card-title {
font-size: 14px;
line-height: 1.25;
margin: 0 0 5px;
}
.categories-strip--cards .catalog-section-card-subtitle {
font-size: 14px;
font-weight: 400;
color: var(--text-muted);
margin: 0;
}
.categories-strip--cards .catalog-section-card-price {
color: var(--magenta);
font-weight: 600;
}
@media (min-width: 768px) {
.categories-strip--cards .catalog-sections-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.categories-strip--cards .catalog-sections-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Catalog sections grouped by root */
.categories-strip--cards .catalog-sections-group + .catalog-sections-group {
margin-top: 28px;
}
.categories-strip--cards .catalog-sections-group-title {
display: block;
font-size: 28px;
font-weight: 700;
color: var(--text);
text-decoration: none;
margin-bottom: 14px;
}
.categories-strip--cards .catalog-sections-group-title:hover {
color: var(--color-primary);
}
.catalog-sections-group {
scroll-margin-top: 40px;
}
/* Hidden product cards (show more functionality) */
.product-card-hidden { display: none; }
/* Show more button wrapper */
.products-show-more-wrapper {
display: flex;
justify-content: center;
padding: 0 12px 24px;
}
/* ============================================
TRUST BAR
============================================ */
.trust-bar {
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
}
.trust-bar__grid {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.trust-bar__grid::-webkit-scrollbar { display: none; }
.trust-bar__item {
display: flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
padding: 6px 10px;
border-radius: var(--radius);
text-decoration: none;
color: var(--text-muted);
white-space: nowrap;
transition: background .15s, color .15s;
}
.trust-bar__item:hover {
background: var(--bg-secondary);
color: var(--text);
}
.trust-bar__item svg {
flex-shrink: 0;
opacity: .6;
}
.trust-bar__item:hover svg {
opacity: 1;
color: var(--color-primary);
}
.trust-bar__text {
font-size: 12px;
line-height: 1.25;
font-weight: 500;
}
@media (min-width: 576px) {
.trust-bar__grid {
gap: 0;
justify-content: space-between;
overflow-x: visible;
}
.trust-bar__item {
flex: 1;
justify-content: center;
}
}
@media (min-width: 768px) {
.trust-bar__item {
gap: 8px;
padding: 8px 12px;
}
.trust-bar__text {
font-size: 13px;
}
}
/* ============================================
SUBSECTIONS OVERLAY (category cards with photo)
============================================ */
.subsections-overlay {
margin: 0 0 16px;
padding: 0 12px;
}
@media (min-width: 768px) {
.subsections-overlay { padding: 0 20px; }
}
.subsections-overlay__scroll {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 0 8px;
}
.subsections-overlay__scroll::-webkit-scrollbar { display: none; }
.subsections-overlay__card {
position: relative;
flex: 0 0 70vw;
height: 140px;
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
scroll-snap-align: start;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 12px;
color: #fff;
background: var(--bg);
}
.subsections-overlay__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform .3s ease-out;
}
.subsections-overlay__card:hover .subsections-overlay__img {
transform: scale(1.05);
}
.subsections-overlay__shade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 100%);
pointer-events: none;
}
.subsections-overlay__name {
position: relative;
z-index: 1;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.subsections-overlay__meta {
position: relative;
z-index: 1;
font-size: 14px;
font-weight: 400;
opacity: .85;
margin-top: 2px;
text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Tablet: 2 columns, wider cards */
@media (min-width: 576px) {
.subsections-overlay__card {
flex: 0 0 calc(50% - 5px);
height: 160px;
}
}
/* Desktop: grid layout */
@media (min-width: 768px) {
.subsections-overlay__scroll {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
overflow-x: visible;
padding: 0;
}
.subsections-overlay__card {
flex: unset;
height: 170px;
scroll-snap-align: unset;
}
}
@media (min-width: 1024px) {
.subsections-overlay__scroll {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.subsections-overlay__card {
height: 180px;
}
}
@media (min-width: 1280px) {
.subsections-overlay__scroll {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
/* Dark mode adjustments */
:root.dark-mode .subsections-overlay__shade {
background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 100%);
}
.products-show-more-btn {
padding: 12px 32px;
font-size: 15px;
font-weight: 500;
border-color: var(--border-color);
color: var(--text);
transition: all .15s;
}
.products-show-more-btn:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.products-show-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ============================================
WHY MMB
============================================ */
.why-mmb { padding: 24px 12px; background: var(--bg-secondary); margin-top: 24px; }
.why-mmb .section-title { padding: 0 0 12px; }
.why-mmb-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.why-mmb-item { display: flex; gap: 12px; padding: 12px; background: var(--bg); border-radius: var(--radius); }
.why-mmb-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: url(images/why/benefits.png) no-repeat;
background-position: 0 0;
}
.why-mmb-icon._check-icon { background-position: -97px -55px; }
.why-mmb-icon._car-icon { background-position: 0 -4px; }
.why-mmb-icon._payment-icon { background-position: -86px -6px; }
.why-mmb-icon._sale-icon { background-position: 0 -55px; }
.why-mmb-icon._return-icon { background-position: -53px -55px; }
.why-mmb-icon._question-icon { background-position: -53px -114px; }
.why-mmb-text { flex: 1; min-width: 0; }
.why-mmb-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.why-mmb-text p { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.why-mmb-text a { color: var(--green); text-decoration: underline; }
/* ============================================
FOOTER
============================================ */
/* полоса с силуэтами мебели над подвалом */
.footer-furniture {
margin-top: 54px;
width: 100%;
}
.footer-furniture-inner {
width: 100%;
/* max-width: var(--container); */
margin: 0 auto;
padding: 0 12px;
}
.footer-furniture .furniture {
position: relative;
margin: 0 auto;
width: 100%;
height: 45px;
background: transparent url("images/footer-furniture.png") no-repeat center 1px;
background-size: auto 100%;
}
@media print {
.not-printable { display: none !important; }
.site-header,
.v26-breadcrumb,
.v26-cart-item-actions,
.v26-cart-footer-right,
.v26-cart-header-right,
.header-topbar,
.header-main,
.header-bottom,
.site-footer,
.v26-back-to-top,
.v26-cart-toast,
.header-action,
.mobile-menu,
.mobile-overlay,
.callback-overlay,
.filter-row,
.v26-pager,
.mm-accordion-toggle,
.comp-catalog-filter-form,
.component-product-detail-mobile-fixedbottom-container {
display: none !important;
}
.v26-page {
padding-top: 0 !important;
}
.product-card {
break-inside: avoid;
}
.component-product-detail-cols-container {
display: block !important;
}
.component-product-detail-cols-container > div {
max-width: 100% !important;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 11px;
color: #666;
}
a[href^="#"]::after,
a[href^="javascript"]::after {
content: "";
}
body {
font-size: 12pt;
color: #000;
background: #fff;
}
img {
max-width: 100% !important;
page-break-inside: avoid;
}
.v26-mobnav,
.footer-theme-toggle,
.v26-spinner-overlay,
.v26-skeleton {
display: none !important;
}
}
/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.v26-back-to-top { display: none; }
}
.site-footer {
background: var(--bg-secondary);
border-top: 3px solid var(--green);
padding: 24px 0 16px;
margin-top: 0;
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
/* Accordion on mobile — no border-bottom (#16) */
.footer-section {}
.footer-section-title {
display: flex; align-items: center; justify-content: space-between;
padding: 12px;
font-size: 14px; font-weight: 600;
cursor: pointer; background: none; border: none;
width: 100%; text-align: left; color: var(--text);
}
.footer-section-title svg { transition: transform .2s; }
.footer-section.open .footer-section-title svg { transform: rotate(180deg); }
.footer-section-body { display: none; padding: 0 12px 12px; }
.footer-section.open .footer-section-body { display: block; }
.footer-section-body a {
display: block; padding: 4px 0;
font-size: 13px; color: var(--text-secondary); text-decoration: none;
}
.footer-section-body a:hover { color: var(--green); }
.footer-section-body a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
.footer-contacts { padding: 12px; }
.footer-contacts a { display: block; text-decoration: none; }
.footer-phone { font-size: 18px; font-weight: 700; color: var(--text); }
.footer-phone-small { font-size: 15px; margin-top: 4px; }
.footer-email { font-size: 13px; color: var(--green); margin-top: 8px; }
.footer-hours { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.footer-callback-btn { margin-top: 10px; }
/* VK icon fix (#8) — centered with proper viewBox */
.footer-social { display: flex; gap: 8px; margin-top: 12px; }
/* выше .footer-contacts a { display: block } */
.footer-contacts a.footer-social-link {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--border);
color: var(--text-secondary);
text-decoration: none;
transition: background .15s, color .15s;
font-size: 0;
line-height: 0;
}
.footer-contacts a.footer-social-link:hover { background: var(--green); color: #fff; }
.footer-contacts a.footer-social-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.footer-contacts a.footer-social-link svg {
width: 20px;
height: 20px;
display: block;
max-width: none;
flex-shrink: 0;
}
.footer-payments { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.footer-payments img { height: 20px; }
.footer-yandex-rating {
display: flex; align-items: center; gap: 8px;
margin-top: 12px; text-decoration: none;
color: var(--text); font-size: 13px; line-height: 1.1;
}
.footer-yandex-rating:hover { color: var(--green); }
.footer-yandex-stars { display: flex; gap: 2px; }
.footer-yandex-stars svg { width: 14px; height: 14px; }
.footer-yandex-text b { font-weight: 700; }
.footer-bottom {
padding: 16px 12px 0;
border-top: 1px solid var(--border);
margin-top: 12px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
text-align: center;
}
.footer-copy { font-size: 12px; color: var(--text-muted); }
.footer-theme-toggle {
background: none;
border: 1px solid var(--border-color);
border-radius: 50%;
width: 36px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-secondary);
transition: all 0.15s;
position: relative;
}
.header-theme-toggle {
width: 30px;
height: 30px;
border-radius: 8px;
}
/* Анимация подсказки темы — вращающееся кольцо */
.header-theme-toggle.animate-hint::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 11px;
padding: 2px;
background: conic-gradient(from 0deg, var(--color-primary), #ffb347, var(--color-primary));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
pointer-events: none;
animation: theme-hint-rotate 2s ease-in-out;
}
@keyframes theme-hint-rotate {
0% { transform: rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: rotate(720deg); opacity: 0; }
}
.footer-theme-toggle:hover {
background: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--color-primary);
}
.footer-theme-toggle:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Show sun icon in dark mode, moon icon in light mode */
.theme-icon-moon { display: block; }
.theme-icon-sun { display: none; }
.dark-mode .theme-icon-moon { display: none; }
.dark-mode .theme-icon-sun { display: block; }
.footer-oferta {
display: block;
max-width: 800px;
margin: 0 auto;
font-size: 11px;
line-height: 1.45;
color: var(--text-muted);
opacity: .7;
}
.footer-oferta::before {
content: 'Обращаем ваше внимание на то, что размещенные на интернет-сайте MnogoMeb.ru данные носят исключительно информационный характер и ни при каких условиях не являются публичной офертой, определяемой положениями Статьи 437 (2) Гражданского кодекса Российской Федерации. Для получения подробной информации о наличии и стоимости указанных товаров и услуг, пожалуйста, обращайтесь к менеджерам отдела продаж по телефону +7 (495) 021-97-17 .';
}
/* ============================================
CALLBACK DIALOG (#9 — centered, no name field)
============================================ */
.callback-dialog {
display: none;
position: fixed;
inset: 0;
z-index: 999990;
align-items: center;
justify-content: center;
}
.callback-dialog.is-open {
display: flex;
}
.callback-dialog-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.4);
}
.callback-dialog-inner { padding: 32px 24px 24px; position: relative; text-align: center; background: #fff; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.2); max-width: 400px; width: 90%; margin: 0 16px; }
.callback-dialog-close {
position: absolute; top: 12px; right: 12px;
background: none; border: none; cursor: pointer;
color: var(--text-muted);
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
}
.callback-dialog-close:hover { color: var(--text); }
.callback-dialog-icon { margin-bottom: 8px; display: flex; justify-content: center; }
.callback-dialog h3 { font-size: 20px; margin-bottom: 4px; text-align: center; }
.callback-dialog p { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; text-align: center; }
.callback-form { display: flex; flex-direction: column; gap: 12px; }
.callback-field { position: relative; }
.callback-input {
width: 100%; padding: 12px 14px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-size: 16px; outline: none;
transition: border-color .2s;
color: var(--text);
box-sizing: border-box;
}
.callback-input:focus { border-color: var(--green); }
.callback-submit {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px; font-size: 15px; font-weight: 600;
cursor: pointer; transition: opacity .2s;
}
.callback-submit:disabled { opacity: .6; cursor: default; }
.callback-consent { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin: 0; }
.callback-consent a { color: var(--green); text-decoration: underline; }
.callback-success {
flex-direction: column; align-items: center; gap: 12px;
padding: 16px 0;
}
.callback-success p { font-size: 16px; color: var(--text); margin: 0; }
.callback-or-call {
margin-top: 16px; padding-top: 16px;
border-top: 1px solid var(--border);
font-size: 13px; color: var(--text-muted); line-height: 1.6;
}
.callback-phone-link { font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; }
.callback-phone-link strong { color: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }
/* ============================================
CITY DIALOG (#17 — inner fills full height)
============================================ */
.city-chevron { flex-shrink: 0; opacity: .5; }
.city-dialog {
border: none; border-radius: 0;
padding: 0;
width: 100%; height: 100%;
max-width: 100%; max-height: 100%;
margin: 0;
}
.city-dialog::backdrop { background: rgba(0,0,0,.4); }
.city-dialog-inner {
display: flex; flex-direction: column;
height: 100%;
min-height: 100%;
}
.city-dialog-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.city-dialog-header h3 { font-size: 18px; }
.city-dialog-close {
background: none; border: none; cursor: pointer;
color: var(--text-muted); width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
}
.city-dialog-close:hover { color: var(--text); }
.city-dialog-search {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.city-dialog-search input {
width: 100%; padding: 10px 12px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-size: 15px; outline: none;
background: var(--bg-secondary);
}
.city-dialog-search input:focus { border-color: var(--green); background: var(--bg); }
.city-dialog-list {
flex: 1; overflow-y: auto;
padding: 8px 0;
-webkit-overflow-scrolling: touch;
}
.city-dialog-item {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
font-size: 15px; color: var(--text);
text-decoration: none;
transition: background .1s;
}
.city-dialog-item:hover { background: var(--bg-secondary); }
.city-dialog-item svg:first-child { flex-shrink: 0; color: var(--text-muted); }
.city-dialog-item.active { color: var(--green); font-weight: 600; background: #f0f7e6; }
.city-dialog-item.active svg:first-child { color: var(--green); }
.city-check { margin-left: auto; flex-shrink: 0; }
.city-dialog-item:not(.active) .city-check { display: none; }
/* ============================================
DESKTOP BREAKPOINTS
============================================ */
/* Tablet 768px+ */
@media (min-width: 768px) {
.city-dialog {
width: 420px; max-width: 90vw;
height: auto; max-height: 70vh;
border-radius: var(--radius);
margin: auto;
box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.city-dialog-inner { height: auto; max-height: 70vh; }
:root { --gap: 16px; }
body { font-size: 15px; }
.container { padding: 0 12px; }
.header-main { padding: 10px 20px; gap: 12px; }
.header-topbar-inner { padding: 6px 20px; }
.header-logo img { height: 32px; }
.products-grid {
grid-template-columns: repeat(4, 1fr);
padding: 0 10px 20px;
}
.section-title { padding: 20px 20px 10px; font-size: 22px; }
.categories-strip-scroll {
flex-wrap: wrap;
overflow-x: visible;
justify-content: center;
gap: 4px;
cursor: default;
}
.category-icon { min-width: 80px; }
.category-icon span { font-size: 13px; }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.footer-section-body { display: block; }
.footer-section-title svg { display: none; }
.footer-section-title { cursor: default; }
.why-mmb { padding: 24px 20px; }
.why-mmb-grid { grid-template-columns: repeat(2, 1fr); }
.banner-arrow { display: flex; align-items: center; justify-content: center; }
.banners-section { padding: 0 20px 20px; }
.banners-layout {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr;
}
.banners-carousel { grid-column: 2; grid-row: 1; }
.banner-promo-left { grid-column: 1; grid-row: 1; }
.banner-promo-right { grid-column: 3; grid-row: 1; }
.banner-promo-label { font-size: 13px; padding: 8px 10px; }
.banner-promo-label em { font-size: 16px; }
.banners-track { aspect-ratio: 540 / 440; }
.page-h1 { padding: 20px 8px 12px; font-size: 26px; }
}
/* Desktop 1024px+ */
@media (min-width: 1024px) {
.header-burger { display: none; }
.header-nav { display: block; }
.header-phone { display: flex; }
.header-search-mobile { display: none; }
.header-actions-mobile { display: none; }
.header-search-desktop { display: block; flex: 1; min-width: 0; }
.header-main { padding: 12px 20px; gap: 16px; }
.header-logo img { height: 36px; }
.header-search input { height: 40px; font-size: 15px; }
.products-grid { grid-template-columns: repeat(4, 1fr); }
.products-grid.products-grid--compact-desktop { grid-template-columns: repeat(4, 1fr); }
.product-card-title { font-size: 14px; }
.product-card-price { font-size: 14px; }
.catalog-sort-bar { padding: 12px 20px; }
.footer-grid { grid-template-columns: repeat(4, 1fr); }
.footer-bottom { flex-direction: row; justify-content: space-between; }
.why-mmb-grid { grid-template-columns: repeat(3, 1fr); }
.categories-strip { padding-top: 20px; padding-bottom: 20px; }
/* Категории: не больше 12 иконок в ряд на широком экране */
.categories-strip-scroll {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
justify-items: center;
align-items: start;
}
.catalog-root-nav .categories-strip-scroll {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.category-icon { min-width: 0; }
.banner-promo-label { font-size: 14px; padding: 10px 12px; }
.banner-promo-label em { font-size: 18px; }
}
/* Wide desktop 1200px+ */
@media (min-width: 1200px) {
.header-main { padding: 14px 20px; }
.section-title { font-size: 24px; }
.page-h1 { font-size: 28px; }
/* При открытом фильтре на 1200px+ оставляем 6 колонок */
}
/* Ultra-wide desktop 1800px+ — 6 колонок при открытом фильтре */
@media (min-width: 1800px) {
.is-open-desktop-filter .products-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* ============================================
CONTENT PAGES (about, oplata, kredit, etc.)
============================================ */
.v26-page { padding: 8px 0 24px; }
.v26-page.no-header { padding-top: 64px; }
/* Auth messages (ShowMessage output) */
.v26-register-form .errortext,
.v26-register-form p font.errortext {
display: block;
padding: 14px 18px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
margin: 0 0 20px;
background: #fef2f2;
color: var(--red);
border: 1px solid #fca5a5;
}
.v26-register-form .note,
.v26-register-form p font.note {
display: block;
padding: 14px 18px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
margin: 0 0 20px;
background: #f0f7e6;
color: var(--green-dark);
border: 1px solid var(--green);
}
.v26-page h2 {
font-size: 20px; font-weight: 700; color: var(--text);
margin: 24px 0 12px;
}
.v26-page h2:first-child { margin-top: 0; }
.v26-page h3 { font-size: 17px; font-weight: 600; margin: 20px 0 10px; }
.v26-page h4 { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
.v26-page h5 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; }
.v26-page table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 16px 0;
}
.v26-page table th,
.v26-page table td {
padding: 8px 12px;
border: 1px solid var(--border);
text-align: left;
}
.v26-page table th {
background: var(--bg-secondary);
font-weight: 600;
}
.v26-page fieldset {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
margin: 16px 0;
}
.v26-page legend {
font-weight: 600;
font-size: 15px;
padding: 0 8px;
color: var(--text);
}
.v26-page blockquote {
border-left: 4px solid var(--green);
margin: 16px 0;
padding: 12px 16px;
background: var(--bg-secondary);
border-radius: 0 var(--radius) var(--radius) 0;
color: var(--text-secondary);
font-style: italic;
}
.v26-page mark {
background: #fff3cd;
color: var(--text);
padding: 1px 4px;
border-radius: 2px;
}
.v26-page select {
padding: 8px 32px 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text);
font-size: 14px;
appearance: none;
background-image: 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='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
:root.dark-mode .v26-page select { background-image: 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='%23a0a0a0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
/* @media (prefers-color-scheme: dark) { */
/* .v26-page select { background-image: 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='%23a0a0a0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } */
/* } */
:root.dark-mode .v26-page mark { background: #5c4d20; color: #fcd34d; }
/* @media (prefers-color-scheme: dark) { */
/* .v26-page mark { background: #5c4d20; color: #fcd34d; } */
/* } */
.v26-page p {
margin: 0 0 10px; color: var(--text-secondary); line-height: 1.6;
}
.v26-page strong, .v26-page b { color: var(--text); }
.v26-page a { color: var(--green); text-decoration: underline; }
.v26-page a:hover { color: var(--green-dark); }
.v26-page a.btn,
.v26-page .btn { text-decoration: none; color: inherit; }
.v26-page a.btn-primary,
.v26-page .btn-primary { color: #fff; }
.v26-page a.btn-primary:hover { color: #fff; }
.v26-page a.v26-btn-danger,
.v26-page .v26-btn-danger { color: #fff; text-decoration: none; }
.v26-page a.v26-btn-danger:hover { color: #fff; text-decoration: none; }
.v26-page details {
border: 1px solid var(--border);
border-radius: var(--radius);
margin: 16px 0;
overflow: hidden;
}
.v26-page details summary {
padding: 12px 16px;
font-weight: 600;
cursor: pointer;
background: var(--bg-secondary);
color: var(--text);
list-style: none;
transition: background 0.15s;
}
.v26-page details summary::-webkit-details-marker { display: none; }
.v26-page details summary::marker { content: ''; }
.v26-page details summary::before {
content: '▸';
display: inline-block;
margin-right: 8px;
transition: transform 0.2s;
color: var(--green);
}
.v26-page details[open] summary::before { transform: rotate(90deg); }
.v26-page details summary:hover { background: var(--bg-tertiary); }
.v26-page details summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.v26-page details > :not(summary) { padding: 12px 16px; }
.v26-page figure {
margin: 16px 0;
padding: 0;
}
.v26-page figcaption {
margin-top: 6px;
font-size: 13px;
color: var(--text-muted);
text-align: center;
font-style: italic;
}
.v26-page .v26-icon-inline,
.v26-page h2 img,
.v26-page h3 img {
display: inline;
vertical-align: middle;
margin: 0 8px 0 0;
border-radius: 0;
}
.v26-small { font-size: 13px; color: var(--text-muted); }
.v26-page kbd {
display: inline-block;
padding: 2px 6px;
font-size: 12px;
font-family: inherit;
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: 0 1px 0 var(--border);
color: var(--text);
}
.v26-page sup, .v26-page sub { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
.v26-page sup { top: -0.5em; }
.v26-page sub { bottom: -0.25em; }
.v26-page ul, .v26-page ol {
padding-left: 20px; margin: 0 0 12px;
color: var(--text-secondary); line-height: 1.7;
}
.v26-page ul { list-style: disc; }
.v26-page ol { list-style: decimal; }
.v26-page li { margin-bottom: 4px; }
.v26-page ul li::marker { color: var(--green); }
.v26-page img { max-width: 100%; height: auto; margin: 12px 0; border-radius: var(--radius); }
.v26-page hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
/* Info cards for payment/delivery/etc methods */
.v26-info-cards { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; }
.v26-info-card {
background: var(--bg-secondary);
border-radius: var(--radius);
padding: 16px 20px;
margin: 12px 0;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.v26-info-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,.06);
transform: translateY(-1px);
}
.v26-info-card h3, .v26-info-card h4 { margin-top: 0; color: var(--text); }
.v26-info-card p:last-child { margin-bottom: 0; }
.v26-info-card ul { margin-bottom: 0; }
/* Styled list */
.v26-styled-list {
padding-left: 24px;
line-height: 1.8;
color: var(--text-secondary);
}
.v26-styled-list li::marker {
color: var(--green);
font-weight: bold;
}
.v26-styled-list strong {
color: var(--text);
}
/* Highlight box */
.v26-highlight {
background: #f0f7e6;
border: 1px solid var(--green);
border-radius: var(--radius);
padding: 16px;
margin: 16px 0;
}
.v26-highlight p:last-child { margin-bottom: 0; }
/* Warning box */
.v26-warning {
background: #fff3e0;
border: 1px solid #ff9800;
border-radius: var(--radius);
padding: 16px;
margin: 16px 0;
}
/* Contact info block */
.v26-contact-block {
display: flex; flex-direction: column; gap: 12px;
background: var(--bg-secondary);
border-radius: var(--radius);
padding: 16px;
margin: 16px 0;
}
.v26-contact-item {
display: flex; align-items: flex-start; gap: 10px;
}
.v26-contact-item svg { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.v26-contact-item a { font-weight: 600; color: var(--text); text-decoration: none; }
.v26-contact-item a:hover { color: var(--green); }
/* Table styling */
.v26-table-wrap {
overflow-x: auto;
margin: 16px 0;
-webkit-overflow-scrolling: touch;
}
.v26-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
background: var(--bg);
border-radius: var(--radius);
overflow: hidden;
}
.v26-table thead { background: var(--bg-secondary); }
.v26-table th {
padding: 10px 12px;
text-align: left;
font-weight: 600;
font-size: 13px;
color: var(--text);
border-bottom: 2px solid var(--border);
white-space: nowrap;
}
.v26-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--border);
color: var(--text-secondary);
line-height: 1.4;
}
.v26-table tbody tr:hover { background: var(--bg-secondary); }
.v26-table tbody tr:last-child td { border-bottom: none; }
/* Bitrix sitemap component */
.v26-page .map a {
color: var(--text);
text-decoration: none;
font-size: 15px;
line-height: 1.6;
}
.v26-page .map a:hover {
color: var(--green);
}
.v26-page .map ul {
list-style: none;
padding: 0;
margin: 0;
}
.v26-page .map li {
margin-bottom: 4px;
}
.v26-page .map .map-level-0 {
margin-bottom: 16px;
}
.v26-page .map .map-level-0 > a {
font-weight: 600;
font-size: 16px;
}
/* Requisites block */
.v26-requisites {
background: var(--bg-secondary);
border-radius: var(--radius);
padding: 20px;
margin: 24px 0 0;
}
.v26-requisites h2 { margin-top: 0; }
.v26-requisites p { color: var(--text-secondary); margin-bottom: 4px; }
.v26-requisites p b { color: var(--text); }
/* Region links list */
.v26-region-links { margin: 16px 0; }
.v26-region-links a {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
text-decoration: none;
color: var(--text-secondary);
border-radius: var(--radius-sm);
transition: background .1s, color .1s;
}
.v26-region-links a:hover { background: var(--bg-secondary); color: var(--green); }
.v26-region-links a svg { flex-shrink: 0; color: var(--text-muted); }
.v26-region-links a:hover svg { color: var(--green); }
/* Social links */
.v26-social { display: flex; gap: 12px; margin: 16px 0; }
.v26-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--bg-secondary);
transition: background 0.2s ease, transform 0.2s ease;
transition: background .15s;
}
.v26-social a:hover { background: var(--green); }
.v26-social a img { width: 28px; height: 28px; margin: 0; border-radius: 0; }
/* Breadcrumb */
/* YouTube video block */
/* v26-breadcrumb */
.v26-breadcrumb {
padding: 8px 0;
font-size: 13px;
color: var(--text-muted);
}
.v26-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.v26-breadcrumb a:hover { color: var(--green); }
.v26-breadcrumb a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
.v26-breadcrumb span { margin: 0 6px; }
/* YouTube video block */
.v26-video-link {
display: block;
position: relative;
border-radius: var(--radius);
overflow: hidden;
margin: 16px 0;
text-decoration: none;
}
.v26-video-link img { width: 100%; margin: 0; border-radius: var(--radius); }
.v26-video-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 80px; height: 80px;
background: rgba(255,0,0,.85);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.v26-video-link:hover .v26-video-play { background: rgba(255,0,0,.95); transform: translate(-50%, -50%) scale(1.05); }
@media (min-width: 768px) {
.v26-page h2 { font-size: 22px; }
.v26-info-cards { flex-direction: column; }
.v26-contact-block { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.v26-contact-item { flex: 1; min-width: 200px; }
.v26-region-links { columns: 2; column-gap: 16px; }
}
@media (min-width: 1024px) {
.v26-page h2 { font-size: 24px; }
.v26-region-links { columns: 3; }
}
/* ===== Cookie popup — compact bottom-left pill ===== */
#cookiePopup {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 1000;
background: var(--bg);
color: var(--text);
border-radius: var(--radius-lg);
box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
max-width: 380px;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 10px;
transform: translateY(20px) scale(.97);
opacity: 0;
transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
font-size: 13px;
line-height: 1.5;
}
#cookiePopup.show {
transform: translateY(0) scale(1);
opacity: 1;
}
#cookiePopup p {
margin: 0;
flex: 1;
}
#cookiePopup a {
color: var(--magenta);
text-decoration: underline;
}
#agreeButton {
flex-shrink: 0;
background: var(--magenta);
color: #fff;
border: none;
padding: 6px 16px;
border-radius: var(--radius);
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: opacity .2s, transform .15s;
}
#agreeButton:hover {
opacity: .88;
}
#agreeButton:active {
transform: scale(.95);
}
@media (max-width: 480px) {
#cookiePopup {
left: 12px;
right: 12px;
bottom: 12px;
max-width: none;
}
}
#agreeButton:hover {
opacity: .85;
}
/* ============================================
NEWS (actions, articles)
============================================ */
.v26-news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 8px 0 24px;
}
.v26-news-card {
content-visibility: auto;
contain-intrinsic-size: auto 300px;
display: flex;
flex-direction: column;
background: var(--bg);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow .2s, transform .2s;
}
.v26-news-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.v26-news-card-img {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg-secondary);
}
.v26-news-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.v26-news-card:hover .v26-news-card-img img {
transform: scale(1.03);
}
.v26-news-card-body {
padding: 12px 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.v26-news-card-date {
font-size: 13px;
color: var(--text-muted);
}
.v26-news-card-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
margin: 0;
}
.v26-news-card-text {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* News detail */
.v26-news-detail {
padding: 32px 24px 24px;
background: #fff;
border-radius: var(--radius-lg);
}
.v26-news-detail-date {
font-size: 13px;
color: var(--text-muted);
}
.v26-news-detail-img {
margin: 0 0 20px;
border-radius: var(--radius);
overflow: hidden;
}
.v26-news-detail-img img {
width: 100%;
height: auto;
display: block;
}
.v26-news-detail-preview {
font-size: 15px;
color: var(--text);
line-height: 1.6;
margin-bottom: 16px;
}
.v26-news-detail-text {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
}
.v26-news-detail-text p { margin: 0 0 12px; }
.v26-news-detail-text img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 12px 0; }
.v26-news-detail-props {
margin-top: 20px;
padding: 16px;
background: var(--bg-secondary);
border-radius: var(--radius);
font-size: 13px;
color: var(--text-secondary);
}
.v26-news-detail-props p { margin: 0 0 6px; }
/* News prev/next nav */
.v26-news-nav {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.v26-news-nav a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--green);
text-decoration: none;
font-weight: 500;
padding: 8px 12px;
border-radius: var(--radius);
background: var(--bg-secondary);
transition: background .15s;
}
.v26-news-nav a:hover { background: #f0f7e6; color: var(--green-dark); }
.v26-news-nav-prev { margin-right: auto; }
.v26-news-nav-next { margin-left: auto; }
/* Pager */
.v26-pager {
padding: 16px 0;
font-size: 13px;
color: var(--text-muted);
text-align: center;
}
.v26-pager font.text,
.v26-pager span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.v26-pager a {
display: inline-block;
min-width: 36px;
height: 36px;
line-height: 36px;
padding: 0 8px;
border-radius: 6px;
color: var(--text-primary);
text-decoration: none;
font-size: 14px;
transition: all 0.15s ease;
}
.v26-pager a:hover {
background: var(--bg-light);
color: var(--color-primary);
text-decoration: none;
}
.v26-pager a:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}
.v26-pager b,
.v26-pager font b {
display: inline-block;
min-width: 36px;
height: 36px;
line-height: 36px;
padding: 0 8px;
background: var(--color-primary);
color: #fff;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
}
@media (min-width: 768px) {
.v26-news-grid {
grid-template-columns: repeat(2, 1fr);
padding: 12px 0 32px;
}
}
@media (min-width: 1024px) {
.v26-news-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ============================================
FORMS (contacts_form, 911_form)
============================================ */
.v26-form {
margin: 16px 0;
}
.v26-form-fields {
display: flex;
flex-direction: column;
gap: 12px;
}
.v26-form-row {
display: flex;
flex-direction: column;
gap: 12px;
}
.v26-form-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.v26-input {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-size: 15px;
font-family: inherit;
color: var(--text);
outline: none;
transition: border-color .2s;
background: var(--bg);
-webkit-appearance: none;
}
.v26-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0,122,58,.15);
}
.v26-input::placeholder {
color: var(--text-muted);
}
textarea.v26-input {
resize: vertical;
min-height: 100px;
}
/* Honeypot (hidden) */
.v26-form-hp {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
}
/* File input */
.v26-form-file {
position: relative;
}
.v26-form-file input[type="file"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.v26-form-file-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1.5px dashed var(--border);
border-radius: var(--radius);
cursor: pointer;
font-size: 14px;
color: var(--text-secondary);
transition: border-color .15s, background .15s;
}
.v26-form-file-label:hover {
border-color: var(--green);
background: var(--bg-secondary);
}
.v26-form-file-text {
color: var(--text-secondary);
}
.v26-form-file-btn {
font-weight: 600;
color: var(--green);
}
/* Consent */
.v26-form-consent {
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
margin: 0;
}
.v26-form-consent a {
color: var(--green);
text-decoration: underline;
}
/* Recaptcha */
.v26-form-recaptcha {
transform: scale(0.88);
transform-origin: left top;
margin: 4px 0;
}
/* Form messages */
.v26-form-msg {
padding: 12px 16px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 500;
margin: 8px 0;
}
.v26-form-msg--success {
background: #f0f7e6;
color: var(--green-dark);
border: 1px solid var(--green);
}
.v26-form-msg--error {
background: #fef2f2;
color: var(--red);
border: 1px solid #fca5a5;
}
@media (min-width: 768px) {
.v26-form-row {
flex-direction: row;
gap: 12px;
}
.v26-form-row .v26-form-field {
flex: 1;
}
}
/* ============================================
REVIEWS (otzyvy)
============================================ */
.v26-reviews {
padding: 8px 0 24px;
}
.v26-reviews-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.v26-reviews-item {
content-visibility: auto;
contain-intrinsic-size: auto 200px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
}
.v26-reviews-header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
margin-bottom: 10px;
}
.v26-reviews-name {
font-weight: 600;
font-size: 15px;
color: var(--text);
}
.v26-reviews-date {
font-size: 13px;
color: var(--text-muted);
}
.v26-reviews-stars {
display: inline-flex;
gap: 1px;
margin-left: auto;
}
.v26-star {
color: #f5a623;
font-size: 16px;
line-height: 1;
}
.v26-star--empty {
color: var(--border);
}
.v26-reviews-body {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
.v26-reviews-text {
margin: 0 0 12px;
white-space: pre-line;
}
.v26-reviews-gallery {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.v26-reviews-gallery-link {
display: block;
width: 100px;
height: 100px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
}
.v26-reviews-gallery-link img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .2s;
}
.v26-reviews-gallery-link {
cursor: zoom-in;
}
.v26-reviews-gallery-link:hover img {
transform: scale(1.05);
}
/* ========================================
Lightbox (reviews + product detail gallery)
======================================== */
.v26-lightbox-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.v26-lightbox-img {
max-width: 95vw;
max-height: 85vh;
object-fit: contain;
border-radius: var(--radius);
user-select: none;
}
.v26-lightbox-counter {
color: #fff;
font-size: 0.85rem;
margin-bottom: 12px;
opacity: 0.7;
}
.v26-lightbox-close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: #fff;
font-size: 2rem;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.15s;
z-index: 2;
line-height: 1;
padding: 0;
}
.v26-lightbox-close:hover {
background: rgba(255, 255, 255, 0.15);
}
.v26-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
font-size: 2.5rem;
cursor: pointer;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.15s;
line-height: 1;
padding: 0;
}
.v26-lightbox-nav:hover {
background: rgba(255, 255, 255, 0.25);
}
.v26-lightbox-prev {
left: 16px;
}
.v26-lightbox-next {
right: 16px;
}
:root.dark-mode .v26-lightbox-overlay {
background: rgba(0, 0, 0, 0.92);
}
:root.dark-mode .v26-lightbox-close:hover,
:root.dark-mode .v26-lightbox-nav:hover {
background: rgba(255, 255, 255, 0.1);
}
.v26-reviews-form-section {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
/* Star rating input (reviews form) */
.v26-rating {
display: inline-flex;
align-items: center;
gap: 2px;
}
.v26-rating-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.v26-rating-star {
font-size: 24px;
color: var(--border);
cursor: pointer;
transition: color .15s, transform .15s;
line-height: 1;
}
.v26-rating-star:hover,
.v26-rating-star:hover ~ .v26-rating-star,
.v26-rating-input:checked ~ .v26-rating-star {
color: #f5a623;
}
.v26-rating-star--active {
color: #f5a623;
}
/* Note: reverse-order input/label for CSS-only hover: JS handles the active state */
/* ============================================
FAQ
============================================ */
.v26-faq {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.v26-faq-item {
padding: 0;
}
.v26-faq-title {
font-size: 15px;
font-weight: 400;
line-height: 1.5;
margin: 0;
}
.v26-faq-title a {
color: var(--text);
text-decoration: none;
display: block;
padding: 12px 16px;
background: var(--bg-secondary);
border-radius: var(--radius);
transition: background .15s, color .15s;
}
.v26-faq-title a:hover {
background: #f0f7e6;
color: var(--green);
}
/* ============================================
LEGAL PAGES (pkpd)
============================================ */
.v26-page--legal h2 {
font-size: 20px;
margin-bottom: 20px;
}
.v26-page--legal h3 {
font-size: 15px;
font-weight: 700;
margin: 24px 0 10px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.v26-page--legal h3:first-of-type {
padding-top: 0;
border-top: none;
margin-top: 16px;
}
.v26-page--legal p {
font-size: 13px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0 0 10px;
}
.v26-page--legal ul {
font-size: 13px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0 0 10px;
padding-left: 20px;
}
.v26-page--legal li {
margin-bottom: 4px;
}
.v26-page--legal a {
color: var(--green);
text-decoration: underline;
}
/* ============================================
404 PAGE
============================================ */
.v26-404 {
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh;
text-align: center;
padding: 40px 16px;
}
.v26-404-content {
max-width: 480px;
}
.v26-404-code {
display: block;
font-size: 80px;
font-weight: 800;
color: var(--border-color);
line-height: 1;
margin-bottom: 12px;
}
.v26-404 h1 {
font-size: 20px;
font-weight: 600;
color: var(--text);
margin: 0 0 8px;
}
.v26-404-text {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 20px;
}
.v26-404-search {
display: flex;
gap: 8px;
margin-bottom: 24px;
}
.v26-404-search input {
flex: 1;
padding: 10px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
font-family: var(--font);
outline: none;
}
.v26-404-search input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(0, 122, 58, 0.15);
}
.v26-404-links {
margin-bottom: 24px;
}
.v26-404-links-title {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 10px;
}
.v26-404-links-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.v26-404-link {
display: inline-block;
padding: 6px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 20px;
font-size: 13px;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.15s;
}
.v26-404-link:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.v26-404-home {
margin-top: 8px;
}
/* Override .v26-page a styles for buttons */
.v26-404-content .btn {
text-decoration: none;
color: #fff;
}
.v26-404-content .btn:hover,
.v26-404-content .btn:focus {
text-decoration: none;
color: #fff;
}
.v26-404-content .btn-outline {
color: var(--color-primary);
}
.v26-404-content .btn-outline:hover,
.v26-404-content .btn-outline:focus {
color: #fff;
}
/* ========================================
Catalog Filter Overrides (mmb3 compat)
These override Bootstrap-based mmb3 filter
styles to match the mmb26 design system.
======================================== */
/* Filter form reset */
.comp-catalog-filter-form {
background: var(--surface-secondary) !important;
border-radius: 8px !important;
padding: 0 !important;
margin: 0 !important;
font-family: inherit !important;
font-size: 14px !important;
color: var(--text-primary) !important;
}
/* Main filter container */
#main_filter {
margin: 0 !important;
padding: 16px !important;
background: var(--surface-primary) !important;
border-radius: 0 8px 8px 0;
}
/* Modal header (mobile filter) */
.comp-catalog-filter-modal-header-container {
padding: 16px !important;
background: var(--surface-primary);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0 !important;
}
.comp-catalog-filter-modal-header-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.comp-catalog-filter-modal-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 1.75rem;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
margin: -4px -8px 0 0;
line-height: 1;
padding: 0;
}
.comp-catalog-filter-modal-close:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
/* Reset / Apply buttons */
.jsClearFilter2,
.comp-catalog-filter-form .btn-success {
display: inline-block !important;
padding: 10px 24px !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
cursor: pointer;
border: none !important;
transition: all 0.2s ease;
text-align: center;
width: auto !important;
}
.jsClearFilter2,
.comp-catalog-filter-btn-reset-container-inner .btn-warning {
background: var(--bg-light) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-color) !important;
}
.jsClearFilter2:hover,
.comp-catalog-filter-btn-reset-container-inner .btn-warning:hover {
background: var(--border-color) !important;
color: var(--text-primary) !important;
}
.comp-catalog-filter-form .btn-success,
.comp-catalog-filter-btn-confirm-container-inner .btn-success {
background: var(--color-primary) !important;
color: #fff !important;
}
.comp-catalog-filter-form .btn-success:hover,
.comp-catalog-filter-btn-confirm-container-inner .btn-success:hover {
background: var(--color-primary-dark) !important;
}
/* Filter category breadcrumb chain */
.filter-cat-chain {
background: var(--surface-primary);
border: 1px solid var(--surface-panel);
border-radius: 6px;
padding: 12px;
margin-bottom: 12px;
}
.filter-cat-chain-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
padding-left: 2px;
}
.filter-cat-chain-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.filter-cat-chain-list li {
display: block;
}
.filter-cat-chain-list a {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 5px;
font-size: 15px;
color: var(--text-secondary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
line-height: 1.3;
}
.filter-cat-chain-list a::before {
content: '‹';
font-size: 17px;
line-height: 1;
color: var(--text-muted);
flex-shrink: 0;
}
.filter-cat-chain-list a:hover {
background: var(--bg-secondary);
color: var(--text);
}
.filter-cat-chain-current {
display: block;
padding: 6px 8px;
border-radius: 5px;
font-size: 15px;
font-weight: 500;
color: var(--text);
background: var(--bg-secondary);
line-height: 1.3;
}
/* Filter block containers */
.comp-catalog-filter-block-container {
background: var(--surface-primary);
border: 1px solid var(--surface-panel);
border-radius: 6px;
padding: 12px;
margin-bottom: 12px;
}
@media (hover: hover) {
.comp-catalog-filter-block-container:hover {
border-color: var(--surface-panel-hover);
}
}
.comp-catalog-filter-block-container.filter-block-open {
border-color: var(--surface-panel-hover);
}
.comp-catalog-filter-block-container-inner {
margin: 0 !important;
padding: 0 !important;
}
/* Filter block title */
.comp-catalog-filter-block-title-container {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
cursor: pointer;
user-select: none;
position: relative;
padding-right: 24px;
}
/* Open blocks: add space under title */
.comp-catalog-filter-block-container.filter-block-open > .comp-catalog-filter-block-container-inner > .comp-catalog-filter-block-title-container,
.comp-catalog-filter-block-container.filter-block-open > .comp-catalog-filter-block-title-container,
.comp-catalog-filter-block-container.filter-block-slider.filter-block-open .comp-catalog-filter-block-title-container {
margin-bottom: 10px;
padding-bottom: 0;
border-bottom: none;
}
/* Accordion: collapsed blocks hide their content */
.comp-catalog-filter-block-list-container {
display: none;
}
/* Open blocks show content */
.comp-catalog-filter-block-container.filter-block-open .comp-catalog-filter-block-list-container {
display: block;
}
/* Hide "Показать всё" toggle when filter block is collapsed */
.comp-catalog-filter-block-container:not(.filter-block-open) .comp-catalog-filter-block-toggle-container {
display: none;
}
/* Slider blocks: hide content when collapsed */
.comp-catalog-filter-block-container.filter-block-slider:not(.filter-block-open) .slider-range,
.comp-catalog-filter-block-container.filter-block-slider:not(.filter-block-open) .filter-slider-inputs {
display: none !important;
}
/* Accordion arrow indicator — closed: points down, open: points up */
.comp-catalog-filter-block-title-container::after {
content: '';
position: absolute;
right: 2px;
top: 35%;
transform: translateY(-50%) rotate(45deg);
border: solid var(--text-secondary);
border-width: 0 2px 2px 0;
padding: 3px;
transition: transform 0.2s ease;
}
.comp-catalog-filter-block-container.filter-block-open > .comp-catalog-filter-block-container-inner > .comp-catalog-filter-block-title-container::after,
.comp-catalog-filter-block-container.filter-block-open > .comp-catalog-filter-block-title-container::after {
transform: translateY(-50%) rotate(-135deg);
}
/* Filter checkbox/radio lists */
.comp-catalog-filter-block-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.comp-catalog-filter-block-list-item-container {
padding: 6px 0 !important;
border-bottom: 1px solid var(--bg-light) !important;
}
.comp-catalog-filter-block-list-item-container:last-child {
border-bottom: none !important;
}
.comp-catalog-filter-block-list-item-container label {
display: flex !important;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px !important;
color: var(--text-primary) !important;
margin: 0 !important;
}
.comp-catalog-filter-block-list-item-container label div {
flex-shrink: 0;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.comp-catalog-filter-block-list-item-container input[type="checkbox"],
.comp-catalog-filter-block-list-item-container input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--color-primary);
cursor: pointer;
margin: 0 !important;
}
/* Disabled items */
.item-is-disabled label {
opacity: 0.4 !important;
cursor: default !important;
}
.item-is-disabled input {
cursor: default !important;
}
/* Selected items */
.item-is-selected label span {
color: var(--color-primary) !important;
font-weight: 500 !important;
}
/* "Show all" toggle */
.comp-catalog-filter-block-toggle-container {
padding-top: 8px !important;
text-align: center !important;
}
.comp-catalog-filter-block-toggle {
font-size: 13px;
color: var(--color-primary);
cursor: pointer;
text-decoration: underline;
}
.comp-catalog-filter-block-toggle:hover {
color: var(--color-primary-dark);
}
/* Hidden items (expandable) */
.comp-catalog-filter-block-list-item-container.item-is-hidden {
display: none !important;
}
/* Slider range filter */
.filter-row {
margin-bottom: 8px !important;
}
.comp-catalog-filter-slider-inputs-container {
display: flex !important;
align-items: center;
gap: 8px;
font-size: 13px !important;
color: var(--text-secondary) !important;
margin-bottom: 8px !important;
}
.comp-catalog-filter-slider-inputs-container input[type="text"] {
width: 60px !important;
padding: 4px 8px !important;
border: 1px solid var(--border-color) !important;
border-radius: 4px !important;
font-size: 13px !important;
text-align: center;
background: var(--surface-primary) !important;
}
.comp-catalog-filter-slider-inputs-container input[type="text"]:focus {
border-color: var(--color-primary) !important;
outline: none;
}
/* Checkbox and radio filter blocks */
.comp-catalog-filter-block-checkbox,
.comp-catalog-filter-block-radio {
display: block;
}
/* Slider range */
.slider-range {
margin: 12px 0 0;
padding: 0 10px;
overflow: visible !important;
}
/* Slider inputs in a row */
.filter-slider-inputs {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 6px !important;
margin-top: 10px !important;
}
.filter-slider-inputs input[type="text"] {
width: 70px !important;
flex: 0 0 70px !important;
min-width: 0 !important;
padding: 4px 6px !important;
border: 1px solid var(--border-color) !important;
border-radius: 4px !important;
font-size: 13px !important;
text-align: center !important;
background: var(--surface-primary) !important;
box-sizing: border-box !important;
}
.filter-slider-inputs input[type="text"]:focus {
border-color: var(--color-primary) !important;
outline: none !important;
}
.filter-slider-inputs-sep {
color: var(--text-secondary) !important;
font-size: 14px !important;
flex-shrink: 0 !important;
}
/* Custom range slider */
.mmb-slider {
position: relative;
height: 28px;
padding: 0;
box-sizing: content-box;
user-select: none;
touch-action: none;
}
.mmb-slider-track {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 4px;
transform: translateY(-50%);
background: var(--border-color, #ddd);
border-radius: 2px;
cursor: pointer;
}
.mmb-slider-fill {
position: absolute;
top: 0;
height: 100%;
background: var(--color-primary);
border-radius: 2px;
pointer-events: none;
}
.mmb-slider-handle {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-primary);
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.25);
cursor: grab;
z-index: 2;
}
.mmb-slider-handle:active {
cursor: grabbing;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.mmb-slider-handle:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Confirm button container */
.comp-catalog-filter-btn-confirm-container {
padding-top: 12px !important;
}
.comp-catalog-filter-btn-reset-container {
padding: 12px 0 0 0 !important;
}
.comp-catalog-filter-btn-reset-container .btn {
width: 100%;
padding: 8px 16px !important;
font-size: 14px !important;
}
/* ========================================
Pagination (Bitrix system.pagenavigation)
======================================== */
.catalog-products + font.text,
.catalog-products ~ font.text,
#catalogProducts ~ font.text {
display: block;
text-align: center;
padding: 24px 0 16px;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
}
.catalog-products + font.text b,
.catalog-products ~ font.text b,
#catalogProducts ~ font.text b {
display: inline-block;
min-width: 36px;
height: 36px;
line-height: 36px;
padding: 0 8px;
background: var(--color-primary);
color: #fff;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
vertical-align: middle;
}
.catalog-products + font.text a,
.catalog-products ~ font.text a,
#catalogProducts ~ font.text a {
display: inline-block;
min-width: 36px;
height: 36px;
line-height: 36px;
padding: 0 8px;
border-radius: 6px;
font-size: 14px;
color: var(--text-primary);
text-decoration: none;
transition: all 0.15s ease;
vertical-align: middle;
}
.catalog-products + font.text a:hover,
.catalog-products ~ font.text a:hover,
#catalogProducts ~ font.text a:hover {
background: var(--bg-light);
color: var(--color-primary);
}
/* ========================================
Catalog Section Layout (3-column)
======================================== */
.catalog-section-cols-container {
display: flex;
gap: 20px;
margin: 0 !important;
padding: 0 !important;
}
.catalog-section-cols-container-inner {
display: contents !important;
width: 100% !important;
}
.catalog-section-col-filter-container {
flex: 0 0 280px;
max-width: 280px;
align-self: flex-start;
}
.catalog-section-col-list-container {
flex: 1;
min-width: 0;
}
/* Section title and description */
.catalog-section-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 20px;
}
/* Section SEO text at bottom */
.catalog-section-text-bottom {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border-color);
}
.catalog-section-text-bottom h2,
.catalog-section-text-bottom h3 {
color: var(--text-primary);
margin: 24px 0 12px;
font-size: 18px;
}
.catalog-section-text-bottom p {
margin: 0 0 12px;
}
/* Mobile: filter collapses to full-width */
@media (max-width: 991px) {
.catalog-section-cols-container {
flex-direction: column;
gap: 16px;
}
.catalog-section-col-filter-container {
flex: none;
max-width: 100%;
position: static;
max-height: none;
}
}
/* ========================================
Catalog Sort Bar
======================================== */
.catalog-sort-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px;
flex-wrap: wrap;
}
.catalog-category-filter {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 4px 12px 16px;
font-size: 13px;
}
.catalog-category-filter__label {
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
.catalog-category-filter__items {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.catalog-category-filter__item small {
opacity: 0.6;
margin-left: 2px;
}
.catalog-category-filter__item {
cursor: pointer;
}
.catalog-category-filter__select {
display: none;
width: 100%;
margin-top: 8px;
padding: 8px 32px 8px 12px;
border: 1px solid var(--border-color, #ddd);
border-radius: var(--radius-sm, 8px);
background: var(--surface-primary, #fff);
color: var(--text-primary);
font-size: 14px;
appearance: none;
background-image: 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='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
@media (max-width: 767px) {
.catalog-category-filter__items {
display: none;
}
.catalog-category-filter__select {
display: block;
}
}
.catalog-sort-bar select,
.catalog-sort-select {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 8px 32px 8px 12px;
background: var(--surface-primary, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3 L5 7 L9 3' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
font-size: 14px;
color: var(--text-primary);
cursor: pointer;
min-width: 180px;
}
.catalog-sort-bar select:focus,
.catalog-sort-select:focus {
outline: none;
border-color: var(--color-primary);
}
@media (max-width: 991px) {
.catalog-sort-select {
width: 100%;
min-width: 0;
}
}
@media (min-width: 992px) {
.comp-catalog-filter-btn-confirm-container {
display: none !important;
}
}
.catalog-filter-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid var(--color-primary);
border-radius: 8px;
background: transparent;
color: var(--color-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.catalog-filter-toggle-btn:hover {
background: var(--color-primary);
color: #fff;
}
html.is-open-desktop-filter .catalog-filter-toggle-btn {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.catalog-count-selector {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
font-size: 14px;
color: var(--text-primary);
}
.catalog-count-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 32px;
padding: 0 8px;
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
text-decoration: none;
font-size: 14px;
transition: background 0.15s, border-color 0.15s;
}
.catalog-count-link:hover {
border-color: var(--color-primary);
}
.catalog-count-link.count-active {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
@media (max-width: 991px) {
.catalog-filter-toggle-btn {
width: 100%;
justify-content: center;
}
.catalog-count-selector {
display: none;
}
}
/* ========================================
Mobile Filter Modal (overlay + fixed)
======================================== */
/* Mobile: hide filter by default, show as modal */
@media (max-width: 991px) {
.catalog-section-col-filter-container {
display: none;
}
.catalog-filter-toggle-btn span {
font-size: 0;
}
.catalog-filter-toggle-btn span::after {
content: 'Показать фильтр';
font-size: 14px;
}
html.is-open-modal-filter .catalog-filter-toggle-btn span {
font-size: 14px;
}
html.is-open-modal-filter .catalog-filter-toggle-btn span::after {
content: none;
}
}
html.is-open-modal-filter,
html.is-open-modal-filter body {
overflow: hidden;
}
.is-open-modal-filter .catalog-section-col-filter-container {
display: block;
overflow-x: hidden;
overflow-y: auto;
z-index: 1050;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
outline: 0;
background-color: var(--surface-primary);
animation: mmb-filter-slide-in 0.25s ease;
}
@keyframes mmb-filter-slide-in {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* Overlay behind the filter modal */
.is-open-modal-filter .catalog-section-cols-container::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1049;
animation: mmb-fade-in 0.2s ease;
}
@keyframes mmb-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Mobile: modal header is sticky at top */
@media (max-width: 991px) {
.is-open-modal-filter #main_filter {
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
overflow: scroll;
margin: 0;
padding: 0 !important;
border: none;
border-radius: 0;
background: var(--surface-primary);
padding-bottom: 80px !important;
}
.is-open-modal-filter .comp-catalog-filter-modal-header-container {
position: sticky;
top: 0;
z-index: 10;
background: var(--surface-primary);
border-radius: 0;
flex-shrink: 0;
display: flex !important;
}
.is-open-modal-filter .comp-catalog-filter-content-container {
flex: 1;
overflow-y: auto;
padding: 0 16px 100px;
}
/* Sticky bottom buttons: Reset + Apply */
.is-open-modal-filter .comp-catalog-filter-btn-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: var(--surface-primary);
padding: 12px 16px;
border-top: 1px solid var(--border-color);
display: flex;
gap: 12px;
}
.is-open-modal-filter .comp-catalog-filter-btn-container .btn {
flex: 1;
text-align: center;
}
.is-open-modal-filter .clear-filter.jsClearFilter2 {
height: 100%;
display: flex !important;
align-items: center;
justify-content: center;
padding: 10px 16px !important;
}
.is-open-modal-filter .comp-catalog-filter-btn-reset-container {
display: flex !important;
flex: 1;
padding: 0 !important;
margin: 0 !important;
}
.is-open-modal-filter .comp-catalog-filter-btn-confirm-container {
display: flex !important;
flex: 1;
padding: 0 !important;
margin: 0 !important;
}
.is-open-modal-filter .comp-catalog-filter-btn-confirm-container {
bottom: 0;
}
/* Hide filter on desktop page layout when modal is open on mobile */
.is-open-modal-filter .catalog-section-col-list-container {
display: none;
}
}
/* ========================================
Desktop Filter Toggle (slide in/out)
======================================== */
@media (min-width: 992px) {
.catalog-section-col-filter-container {
display: none;
}
.is-open-desktop-filter .catalog-section-cols-container-inner {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
width: 100%;
}
.is-open-desktop-filter .catalog-section-col-filter-container {
display: block;
flex: 0 0 280px;
max-width: 280px;
}
.is-open-desktop-filter .catalog-section-col-list-container {
flex: 1;
min-width: 0;
}
.catalog-section-col-filter-container[style*="display: none"] {
display: none !important;
}
}
/* --- Section Bottom SEO Description --- */
.section-bottom-description {
padding: 16px;
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary);
}
.section-bottom-description h2,
.section-bottom-description h3 {
color: var(--text-primary);
margin: 16px 0 8px;
font-size: 16px;
}
.section-bottom-description p { margin: 8px 0; }
.section-bottom-description ul { padding-left: 20px; margin: 8px 0; }
.section-bottom-description li { margin: 4px 0; }
/* --- Catalog Pagination --- */
@keyframes catalog-empty-fade-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.catalog-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px 80px;
text-align: center;
animation: catalog-empty-fade-in 0.35s ease both;
}
.catalog-empty-state-icon {
color: #c8d4cc;
margin-bottom: 20px;
}
.catalog-empty-state-title {
font-size: 20px;
font-weight: 600;
color: var(--text);
margin: 0 0 10px;
}
.catalog-empty-state-text {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
margin: 0 0 28px;
max-width: 380px;
}
.catalog-empty-state-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.catalog-empty-state-actions .btn {
text-decoration: none;
min-width: 160px;
}
.catalog-empty-state-actions .btn-primary { color: #fff; }
.catalog-empty-state-actions .btn-primary:hover { color: #fff; }
.catalog-empty-state-actions .btn-outline { color: var(--color-primary); }
.catalog-empty-state-actions .btn-outline:hover { color: #fff; }
:root.dark-mode .catalog-empty-state-icon { color: #3a4a40; }
.catalog-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 20px 0 32px;
flex-wrap: wrap;
}
.catalog-pagination-link,
.catalog-pagination-active {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 8px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
color: var(--text-primary);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.catalog-pagination-link:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.catalog-pagination-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
font-weight: 500;
}
.catalog-pagination-dots {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
color: var(--text-muted);
font-size: 14px;
}
@media (max-width: 767px) {
.catalog-pagination {
gap: 4px;
padding: 16px 0 24px;
}
.catalog-pagination-link,
.catalog-pagination-active {
min-width: 32px;
height: 32px;
padding: 0 6px;
font-size: 13px;
border-radius: 6px;
}
.catalog-pagination-dots {
min-width: 24px;
height: 32px;
font-size: 12px;
}
}
/* --- Infinite Scroll: "Показать ещё" --- */
/* Пагинация остаётся видимой для SEO и навигации */
.catalog-pagination {
display: flex;
}
/* Catalog loading overlay */
#catalogProducts {
position: relative;
}
#catalogProducts.catalog-is-loading::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.7);
border-radius: var(--radius);
margin-top: -10px;
z-index: 10;
animation: catalog-loading-fadein 0.2s ease 0.15s both;
}
#catalogProducts.catalog-is-loading::after {
content: '';
position: fixed;
top: 50%;
left: var(--catalog-loading-x, 50%);
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
border: 3px solid rgba(204, 51, 153, 0.2);
border-top-color: var(--color-primary, #c39);
border-radius: 50%;
animation: catalog-loading-spin 0.8s linear infinite, catalog-loading-fadein 0.2s ease 0.15s both;
z-index: 11;
}
@media (max-width: 991px) {
#catalogProducts.catalog-is-loading::after {
left: 50% !important;
}
}
@keyframes catalog-loading-spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes catalog-loading-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Контейнер для кнопки "Показать ещё" - между товарами и пагинацией */
.catalog-load-more-container {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 12px 24px;
}
.catalog-load-more {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
border: 1px solid var(--border-color);
border-radius: 24px;
background: var(--surface-primary);
transition: padding 0.3s ease, gap 0.3s ease;
}
/* Первый этап: кнопка стоп исчезла, таймер ещё отматывается */
.catalog-load-more.is-compact {
padding: 8px 12px 8px 16px;
gap: 8px;
}
/* Второй этап: таймер тоже исчез, осталась только кнопка */
.catalog-load-more.is-minimal {
padding: 8px 12px;
gap: 0;
}
.catalog-load-more-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
border: none;
border-radius: 16px;
background: var(--color-primary);
color: #fff;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.catalog-load-more-btn:hover {
background: var(--color-primary-dark, #2d8a3e);
}
.catalog-load-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Круговой таймер */
.catalog-load-more-timer {
position: relative;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
max-width: 32px;
overflow: hidden;
flex-shrink: 0;
transition: opacity 0.3s ease 0.7s, max-width 0.3s ease 0.7s, margin 0.3s ease 0.7s;
}
.timer-circle-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.timer-circle-bg circle {
fill: none;
stroke: var(--border-color);
stroke-width: 3;
}
.timer-circle-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.timer-circle-progress circle {
fill: none;
stroke: var(--color-primary);
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dashoffset 1s linear;
}
.timer-value {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
z-index: 1;
}
.catalog-load-more-stop {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
font-size: 14px;
padding: 0;
transition: color 0.15s, opacity 0.3s ease, transform 0.3s ease, max-width 0.3s ease, margin 0.3s ease;
opacity: 1;
max-width: 24px;
overflow: hidden;
flex-shrink: 0;
}
.catalog-load-more-stop.is-hiding {
opacity: 0;
transform: scale(0.8);
max-width: 0;
margin: 0;
pointer-events: none;
}
.catalog-load-more-timer.is-hiding {
opacity: 0;
max-width: 0;
margin: 0;
pointer-events: none;
}
.catalog-load-more-stop:hover {
color: var(--text-primary);
}
.catalog-load-more.is-loading .catalog-load-more-btn {
pointer-events: none;
opacity: 0.8;
}
/* Спиннер внутри кнопки при загрузке */
.catalog-load-more-btn .btn-spinner {
animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
/* Кружок-таймер в режиме спиннера при загрузке */
.catalog-load-more-timer.is-spinner {
transition: none;
animation: timer-spin 1s linear infinite;
}
@keyframes timer-spin {
to { transform: rotate(360deg); }
}
.catalog-load-more-timer.is-spinner .timer-value {
opacity: 0;
}
.catalog-load-more.is-done {
display: none;
}
/* ========================================
Product Detail Compatibility (mn_product_adaptive2)
These provide minimal styling to make the old
product detail template look acceptable within
the mmb26 frame. Full port is Phase 4.4.
======================================== */
/* Ensure product detail doesn't have odd margins */
.component-product-detail-container {
font-family: inherit !important;
}
/* Price styling consistency */
.actual_price,
.actual_price2 {
font-family: inherit !important;
color: var(--text-primary) !important;
}
/* Buttons: override Bootstrap defaults to mmb26 style */
.component-product-detail-order-container .btn-success {
background: var(--color-primary) !important;
border-color: var(--color-primary) !important;
border-radius: 8px !important;
font-weight: 500 !important;
}
.component-product-detail-order-container .btn-success:hover {
background: var(--color-primary-dark) !important;
}
.component-product-detail-order-container .btn-light {
background: var(--surface-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px !important;
color: var(--text-primary) !important;
}
/* Attention/warning boxes */
.attention,
.attention1 {
border-radius: 8px !important;
padding: 12px 16px !important;
font-size: 14px !important;
}
/* Alert boxes */
.alert {
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
margin-bottom: 16px;
}
.alert-danger {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
.alert-success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #166534;
}
/* Empty state (e.g. favorites with no items) */
.v26-state--empty {
text-align: center;
padding: 60px 24px;
background: var(--surface-primary);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.v26-state--empty::before {
content: '';
display: block;
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: var(--surface-secondary);
border-radius: 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center;
}
.v26-state--empty p {
font-size: 16px;
margin-bottom: 24px;
color: var(--text-secondary);
}
.v26-state--empty .btn {
min-width: 200px;
}
/* Static info pages — white background */
.v26-page--empty {
background: #fff;
border-radius: var(--radius-lg);
padding: 32px 24px;
}
/* Personal area — basic form overrides */
.v26-page form table {
width: 100%;
border-collapse: collapse;
}
.v26-page form table td {
padding: 8px 0;
vertical-align: top;
}
.v26-page form table td:first-child {
padding-right: 16px;
font-weight: 500;
font-size: 14px;
color: var(--text-primary);
white-space: nowrap;
}
.v26-page form input[type="text"],
.v26-page form input[type="email"],
.v26-page form input[type="password"],
.v26-page form input[type="tel"] {
width: 100%;
max-width: 320px;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--surface-primary);
color: var(--text-primary);
}
.v26-auth-card input[type="text"],
.v26-auth-card input[type="email"],
.v26-auth-card input[type="password"],
.v26-auth-card input[type="tel"],
.v26-register-card input[type="text"],
.v26-register-card input[type="email"],
.v26-register-card input[type="password"],
.v26-register-card input[type="tel"] {
width: 100% !important;
max-width: none !important;
padding: 10px 12px !important;
border-radius: var(--radius-sm) !important;
font-size: 15px !important;
border: 1px solid var(--border) !important;
background: var(--bg) !important;
box-sizing: border-box;
}
.v26-page form input[type="text"]:focus,
.v26-page form input[type="email"]:focus,
.v26-page form input[type="password"]:focus,
.v26-page form input[type="tel"]:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 2px rgba(131, 176, 55, 0.15);
}
.v26-page form input[type="submit"],
.v26-page form button[type="submit"] {
padding: 10px 24px;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.v26-page form input[type="submit"]:hover,
.v26-page form button[type="submit"]:hover {
background: var(--color-primary-dark);
}
/* Bitrix form elements */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.data-table thead td {
padding-bottom: 12px;
font-size: 16px;
}
.data-table tbody td {
padding: 8px 8px 8px 0;
vertical-align: top;
}
.starrequired {
color: #e53e3e;
margin-left: 2px;
}
/* Bitrix social auth icons */
.bx-auth-services {
margin-top: 20px;
}
.bx-auth-services form {
display: inline-flex;
gap: 12px;
}
/* Bitrix auth/reg form elements */
.bx-auth-reg {
max-width: 500px;
}
.bx-auth-reg .popup_form {
margin: 0;
}
.bx-auth-input {
width: 100%;
max-width: 320px;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--surface-primary);
color: var(--text-primary);
box-sizing: border-box;
}
.bx-auth-input:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 2px rgba(131, 176, 55, 0.15);
}
.bx-auth-secure {
display: inline-block;
vertical-align: middle;
margin-left: 6px;
}
.bx-auth-secure-icon {
width: 18px;
height: 18px;
background: url('data:image/svg+xml,') no-repeat;
background-size: contain;
}
.bx-auth-secure-unlock {
width: 18px;
height: 18px;
background: url('data:image/svg+xml,') no-repeat;
background-size: contain;
}
/* Bitrix profile form */
.bx-auth-profile {
max-width: 600px;
}
.bx-auth-profile form input[type="text"],
.bx-auth-profile form input[type="email"],
.bx-auth-profile form input[type="tel"],
.bx-auth-profile form input[type="password"],
.bx-auth-profile form select,
.bx-auth-profile form textarea {
width: 100%;
max-width: 400px;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--surface-primary);
color: var(--text-primary);
box-sizing: border-box;
}
.bx-auth-profile form input:focus,
.bx-auth-profile form select:focus,
.bx-auth-profile form textarea:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 2px rgba(131, 176, 55, 0.15);
}
.bx-auth-profile form select {
appearance: auto;
}
/* Order detail */
.sale-order-detail {
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
}
.sale-order-detail p {
margin-bottom: 8px;
}
/* Order history table */
.v26-page table.sale-order-list {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.v26-page table.sale-order-list th {
text-align: left;
padding: 10px 12px;
background: var(--bg-secondary);
font-weight: 600;
color: var(--text-primary);
border-bottom: 2px solid var(--border-color);
}
.v26-page table.sale-order-list td {
padding: 10px 12px;
border-bottom: 1px solid var(--border-color);
color: var(--text-secondary);
}
.v26-page table.sale-order-list a {
color: var(--color-primary);
text-decoration: none;
}
.v26-page table.sale-order-list a:hover {
text-decoration: underline;
}
/* Sale basket basic overrides */
.sale-basket-basket-list table {
width: 100%;
border-collapse: collapse;
}
.sale-basket-basket-list td {
padding: 10px 12px;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
.sale-basket-basket-list input[type="text"] {
width: 60px;
padding: 4px 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
text-align: center;
font-size: 14px;
}
/* ========================================
Checkout Bootstrap Compatibility
sale.order.ajax/mmb uses Bootstrap grid + utility classes.
These overrides make it work within mmb26 frame.
======================================== */
/* Bootstrap grid (used heavily by checkout) */
.bx_order_make .row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.bx_order_make .col-4,
.bx_order_make .col-6,
.bx_order_make .col-sm-12,
.bx_order_make .col-md-4,
.bx_order_make .col-md-8,
.bx_order_make .col-lg-5,
.bx_order_make .col-lg-6,
.bx_order_make .col-lg-7 {
padding: 0 10px;
box-sizing: border-box;
}
.bx_order_make .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.bx_order_make .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.bx_order_make .col-md-8 { flex: 0 0 66.667%; max-width: 66.667%; }
.bx_order_make .col-lg-5 { flex: 0 0 41.667%; max-width: 41.667%; }
.bx_order_make .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.bx_order_make .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.bx_order_make .col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.bx_order_make .col-6 { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 991px) {
.bx_order_make .col-md-4,
.bx_order_make .col-md-8,
.bx_order_make .col-lg-5,
.bx_order_make .col-lg-6,
.bx_order_make .col-lg-7 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (max-width: 767px) {
.bx_order_make .col-4,
.bx_order_make .col-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Bootstrap display utilities */
.bx_order_make .d-none { display: none !important; }
.bx_order_make .d-block { display: block !important; }
.bx_order_make .d-md-none { display: block !important; }
.bx_order_make .d-md-block { display: none !important; }
.bx_order_make .d-md-inline-block { display: none !important; }
@media (min-width: 768px) {
.bx_order_make .d-md-none { display: none !important; }
.bx_order_make .d-md-block { display: block !important; }
.bx_order_make .d-md-inline-block { display: inline-block !important; }
}
/* Bootstrap spacing */
.bx_order_make .mb-1 { margin-bottom: 4px; }
.bx_order_make .mb-2 { margin-bottom: 8px; }
.bx_order_make .mt-1 { margin-top: 4px; }
.bx_order_make .mt-2 { margin-top: 8px; }
.bx_order_make .mt-3 { margin-top: 16px; }
.bx_order_make .mt-4 { margin-top: 24px; }
.bx_order_make .pb-1 { padding-bottom: 4px; }
.bx_order_make .pb-3 { padding-bottom: 16px; }
.bx_order_make .pt-1 { padding-top: 4px; }
.bx_order_make .pt-3 { padding-top: 16px; }
.bx_order_make .pl-0 { padding-left: 0; }
.bx_order_make .pr-3 { padding-right: 16px; }
/* Bootstrap text utilities */
.bx_order_make .text-center { text-align: center; }
.bx_order_make .text-danger { color: #e53e3e; }
.bx_order_make .text-sm-left { text-align: left; font-size: 13px; }
.bx_order_make .small { font-size: 13px; }
.bx_order_make .w-100 { width: 100%; }
@media (min-width: 768px) {
.bx_order_make .text-md-right { text-align: right; }
}
/* Bootstrap buttons */
.bx_order_make .btn {
display: inline-block;
padding: 8px 20px;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
border: none;
cursor: pointer;
text-align: center;
text-decoration: none;
line-height: 1.5;
transition: all 0.15s;
}
.bx_order_make .btn-success {
background: var(--color-primary);
color: #fff;
}
.bx_order_make .btn-success:hover {
background: var(--color-primary-dark);
}
.bx_order_make .btn-default {
background: var(--surface-primary);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.bx_order_make .btn-lg { padding: 12px 28px; font-size: 16px; }
.bx_order_make .btn-sm { padding: 8px 14px; font-size: 13px; }
/* Bootstrap custom controls (radio buttons) */
.bx_order_make .custom-control {
position: relative;
display: flex;
align-items: center;
min-height: 28px;
padding-left: 28px;
margin-bottom: 8px;
}
.bx_order_make .custom-radio .custom-control-input {
position: absolute;
left: 0;
width: 20px;
height: 20px;
margin: 4px 0;
opacity: 0;
z-index: 1;
cursor: pointer;
}
.bx_order_make .custom-radio .custom-control-label {
position: relative;
font-size: 14px;
color: var(--text-primary);
cursor: pointer;
}
.bx_order_make .custom-radio .custom-control-label::before {
content: '';
position: absolute;
left: -28px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-radius: 50%;
background: var(--surface-primary);
}
.bx_order_make .custom-radio .custom-control-label::after {
content: '';
position: absolute;
left: -24px;
top: 50%;
transform: translateY(-50%) scale(0);
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-primary);
transition: transform 0.15s;
}
.bx_order_make .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
border-color: var(--color-primary);
}
.bx_order_make .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
transform: translateY(-50%) scale(1);
}
/* Bootstrap form controls */
.bx_order_make .form-control {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--surface-primary);
color: var(--text-primary);
box-sizing: border-box;
transition: border-color 0.15s;
}
.bx_order_make .form-control:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 2px rgba(131, 176, 55, 0.15);
}
.bx_order_make .custom-select {
appearance: auto;
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--surface-primary);
color: var(--text-primary);
box-sizing: border-box;
}
.bx_order_make .v26-order-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
}
.v26-order select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
padding: 10px 12px;
padding-right: 32px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 15px;
background: var(--bg);
color: var(--text-primary);
box-sizing: border-box;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
.v26-order select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
}
/* Checkout-specific */
.bx_order_make .errortext {
color: #e53e3e;
font-size: 13px;
margin-top: 4px;
}
.bx_order_make .border {
border: 1px solid var(--border-color);
}
.bx_order_make .sepa-20 {
height: 20px;
}
.bx_order_make .align-center {
text-align: center;
}
.bx_order_make .payment_systems_container label {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 4px;
border: 1px solid var(--border-color);
border-radius: 6px;
cursor: pointer;
transition: border-color 0.15s;
}
.bx_order_make .payment_systems_container label:hover {
border-color: var(--color-primary);
}
.bx_order_make .payment_systems_container input:checked + span {
font-weight: 600;
}
/* Bitrix checkout form (sale.order.ajax) */
#order_form_div {
font-family: var(--font) !important;
font-size: 14px !important;
color: var(--text-primary) !important;
}
#order_form_div .title {
font-family: var(--font) !important;
font-weight: 700 !important;
font-size: 16px !important;
color: var(--text-primary) !important;
border-bottom-color: var(--border-color) !important;
}
#order_form_div .title a {
color: var(--color-primary) !important;
}
#order_form_div input[type="text"],
#order_form_div input[type="password"],
#order_form_div textarea,
#order_form_div select {
font-family: var(--font) !important;
border-color: var(--border-color) !important;
border-radius: 6px !important;
box-shadow: none !important;
font-size: 14px !important;
padding: 10px 12px !important;
}
#order_form_div input:focus,
#order_form_div textarea:focus,
#order_form_div select:focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 58, 0.15) !important;
}
#order_form_div .sof-req {
color: #e53e3e !important;
font-size: 12px !important;
}
#order_form_div .section {
margin-bottom: 28px !important;
}
/* Order summary table */
#order_form_div .sale_order_table {
font-family: var(--font) !important;
font-size: 14px !important;
}
#order_form_div .sale_order_table.props td {
border-bottom-color: var(--border-color) !important;
}
#order_form_div .sale_order_table .name {
color: var(--text-secondary) !important;
font-weight: 500 !important;
}
#order_form_div .sale_data-table,
#order_form_div .sale_data-table.summary td {
font-family: var(--font) !important;
background: #fff !important;
}
#order_form_div .desc {
font-size: 13px !important;
color: var(--text-secondary) !important;
}
/* Order confirm/checkout button */
#order_form_div .sale_order_confirm {
font-family: var(--font) !important;
}
#order_form_div .sale_order_confirm .checkout {
background: var(--color-primary) !important;
color: #fff !important;
border-radius: 8px !important;
font-family: var(--font) !important;
text-shadow: none !important;
font-weight: 600 !important;
padding: 12px 24px !important;
box-shadow: 0 2px 8px rgba(0, 122, 58, 0.2) !important;
transition: background 0.15s, box-shadow 0.15s !important;
}
#order_form_div .sale_order_confirm .checkout:hover {
background: var(--color-primary-hover) !important;
box-shadow: 0 4px 12px rgba(0, 122, 58, 0.3) !important;
}
/* Delivery and paysystem rows */
#order_form_div .sale_order_table.delivery,
#order_form_div .sale_order_table.paysystem {
font-family: var(--font) !important;
}
/* Order auth section */
#order_form_div .order-auth {
padding: 20px !important;
background: var(--bg-secondary) !important;
border-radius: var(--radius) !important;
margin-bottom: 20px !important;
}
/* Order comment */
#order_form_div .order_comment textarea {
width: 100% !important;
min-height: 80px !important;
resize: vertical !important;
}
/* Error text */
#order_form_div .errortext {
color: #e53e3e !important;
font-size: 13px !important;
font-family: var(--font) !important;
}
/* Personal data info text */
.bx_order_make .personal-data-info {
font-size: 13px;
color: var(--text-secondary);
margin-top: 8px;
padding: 12px;
background: var(--bg-secondary);
border-radius: var(--radius);
}
.bx_order_make .not-printable {
display: none !important;
}
/* Order total */
.bx_order_make .total-cost-value {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
}
/* Order confirmation page */
.v26-order-confirm {
padding: 0;
}
.v26-order-confirm-banner {
background-color: #ff9501;
color: #fff;
display: flex;
align-items: center;
padding: 0 0 0 40px;
gap: 40px;
border-radius: var(--radius-lg, 12px);
border-top: 1px solid #7d7d7d;
margin-bottom: 24px;
overflow: hidden;
}
.v26-order-confirm-banner,
.v26-order-confirm-banner * {
color: #fff;
}
.v26-order-confirm-banner-content {
flex: 1;
}
.v26-order-confirm-banner-content h1 {
font-size: 32px;
margin-bottom: 14px;
font-weight: 700;
border: none;
color: #fff;
}
.v26-order-confirm-banner-content h1 strong {
font-weight: 700;
color: #fff;
}
.v26-order-confirm-banner .v26-order-confirm-text,
.v26-order-confirm-banner .v26-order-confirm-text * {
font-size: 18px;
opacity: 0.95;
margin-bottom: 24px;
color: #fff;
}
.v26-order-confirm-social,
.v26-order-confirm-social span {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 16px;
opacity: 0.9;
color: #fff;
}
.v26-order-confirm-social .share__block {
padding: 0;
gap: 8px;
}
.v26-order-confirm-social .share__icons {
display: inline-flex;
align-items: center;
gap: 6px;
}
.v26-order-confirm-social .share__label {
display: none;
}
.v26-order-confirm-social .share__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.3);
background: transparent;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
padding: 0;
}
.v26-order-confirm-social .share__btn:hover {
color: #fff;
border-color: #fff;
}
.v26-order-confirm-social .share__btn--vk:hover {
color: #fff;
border-color: #0077ff;
background: #0077ff;
}
.v26-order-confirm-social .share__btn--ok:hover {
color: #fff;
border-color: #ee8208;
background: #ee8208;
}
.v26-order-confirm-social .share__btn--telegram:hover {
color: #fff;
border-color: #28a5e5;
background: #28a5e5;
}
.v26-order-confirm-banner-img {
flex-shrink: 0;
display: flex;
align-items: center;
align-self: stretch;
margin-top: -1px;
}
.v26-order-confirm-banner-img img {
height: 100%;
width: auto;
max-height: 350px;
object-fit: contain;
margin: 0;
}
@media (max-width: 767px) {
.v26-order-confirm-banner {
flex-direction: column;
text-align: center;
padding: 0;
gap: 0;
}
.v26-order-confirm-banner-content {
padding: 20px;
}
.v26-order-confirm-banner-content h1 {
font-size: 22px;
}
.v26-order-confirm-social {
align-items: center;
}
.v26-order-confirm-banner-img {
order: -1;
width: 100%;
justify-content: center;
align-self: auto;
}
.v26-order-confirm-banner-img img {
max-height: none;
width: 100%;
height: auto;
object-fit: cover;
}
}
/* Auth form */
.v26-auth {
padding: 16px 0;
}
.v26-auth-card {
max-width: 420px;
margin: 0 auto;
padding: 40px 32px;
border: 1px solid var(--border);
border-radius: var(--radius-lg, 12px);
text-align: center;
background: var(--bg);
}
.v26-auth-card-icon {
display: flex;
justify-content: center;
color: var(--text-muted);
margin-bottom: 16px;
}
.v26-auth-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text-primary);
}
.v26-auth-subtitle {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 24px;
}
.v26-auth-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.v26-auth-field {
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
}
.v26-auth-input {
width: 100%;
box-sizing: border-box;
}
.v26-auth-label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
}
.v26-auth-input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 15px;
background: var(--bg);
color: var(--text-primary);
transition: border-color 0.15s;
box-sizing: border-box;
}
.v26-auth-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
}
.v26-auth-remember {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
cursor: pointer;
text-align: left;
}
.v26-auth-remember input {
margin: 0;
}
.v26-auth-btn {
margin-top: 4px;
}
.v26-auth-links {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
font-size: 13px;
}
.v26-auth-links a {
color: var(--text-muted);
text-decoration: none;
}
.v26-auth-links a:hover {
color: var(--green);
text-decoration: underline;
}
.v26-auth-error {
max-width: 420px;
margin: 0 auto 16px;
padding: 12px 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--radius-sm);
color: #b91c1c;
font-size: 14px;
}
.v26-auth-success {
margin-bottom: 16px;
padding: 12px 16px;
background: #f0f7e6;
border: 1px solid var(--green);
border-radius: var(--radius-sm);
color: var(--green-dark);
font-size: 14px;
}
.v26-auth-logged-in {
font-size: 16px;
color: var(--text-primary);
margin-bottom: 16px;
}
.v26-auth-logged-in a {
color: var(--green);
text-decoration: underline;
}
@media (max-width: 767px) {
.v26-auth-card {
padding: 32px 20px;
}
}
/* Personal section nav */
.v26-personal-nav {
display: flex;
align-items: center;
border-bottom: 1px solid var(--border);
margin-bottom: 24px;
padding-bottom: 0;
}
.v26-personal-nav-tabs {
display: flex;
gap: 0;
}
.v26-personal-nav-tab {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.v26-personal-nav-tab:hover {
color: var(--text-primary);
}
.v26-personal-nav-tab.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.v26-personal-nav-logout {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-muted);
text-decoration: none;
padding: 8px 4px;
transition: color 0.15s;
}
.v26-personal-nav-logout:hover {
color: var(--color-danger, #e53935);
}
/* Personal notice */
.v26-personal-notice {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--bg-secondary, #f8f9fa);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 15px;
color: var(--text-secondary);
margin-bottom: 20px;
}
.v26-personal-notice svg {
flex-shrink: 0;
color: var(--text-muted);
width: 18px;
height: 18px;
}
/* Orders list */
.v26-orders {
display: flex;
flex-direction: column;
gap: 8px;
}
.v26-order-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg, 12px);
overflow: hidden;
background: var(--bg);
}
.v26-order-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
user-select: none;
}
.v26-order-head-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.v26-order-head-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.v26-order-toggle {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 14px;
color: var(--text-primary);
text-align: left;
}
.v26-order-toggle-icon {
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.2s;
}
.v26-order-card.expanded .v26-order-toggle-icon {
transform: rotate(180deg);
}
.v26-order-num {
font-weight: 600;
}
.v26-order-date {
font-size: 13px;
color: var(--text-muted);
white-space: nowrap;
}
.v26-order-status {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
background: var(--bg-secondary, #f0f0f0);
color: var(--text-secondary);
}
.v26-order-status-stage-1 { background: #fff3e0; color: #e65100; }
.v26-order-status-stage-2 { background: #e3f2fd; color: #1565c0; }
.v26-order-status-stage-3 { background: #e8f5e9; color: #2e7d32; }
.v26-order-status-canceled { background: #fce4ec; color: #c62828; }
.v26-order-price {
font-weight: 600;
font-size: 15px;
white-space: nowrap;
}
.v26-order-cancel {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--text-muted);
transition: background 0.15s, color 0.15s;
}
.v26-order-cancel:hover {
background: #fce4ec;
color: #c62828;
}
.v26-order-items {
display: none;
border-top: 1px solid var(--border);
padding: 0 16px;
}
.v26-order-items.open {
display: block;
}
.v26-order-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.v26-order-item:last-child {
border-bottom: none;
}
.v26-order-item-img {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.v26-order-item-img img {
width: 100%;
object-fit: contain;
}
.v26-order-item-info {
flex: 1;
min-width: 0;
}
.v26-order-item-name {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
line-height: 1.35;
}
.v26-order-item-name a {
color: var(--text-primary);
text-decoration: none;
}
.v26-order-item-name a:hover {
color: var(--color-primary);
}
.v26-order-item-props {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 5px;
}
.v26-order-item-prop {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.4;
}
.v26-order-item-prop-name {
color: var(--text-muted);
}
.v26-order-item-qty {
flex-shrink: 0;
font-size: 14px;
color: var(--text-muted);
white-space: nowrap;
padding-top: 2px;
}
.v26-order-item-price {
flex-shrink: 0;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
padding-top: 2px;
}
/* Empty state */
.v26-personal-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 60px 20px;
text-align: center;
color: var(--text-muted);
}
.v26-personal-empty p {
font-size: 15px;
margin: 0;
}
@media (max-width: 767px) {
.v26-personal-nav-tab {
padding: 10px 12px;
font-size: 13px;
}
.v26-order-date {
display: none;
}
.v26-order-head {
flex-wrap: wrap;
}
.v26-order-head-left {
flex: 1 1 100%;
}
.v26-order-head-right {
gap: 6px;
flex: 1 1 100%;
justify-content: space-between;
}
.v26-order-head-right .btn,
.v26-order-head-right .v26-order-cancel {
margin-left: auto;
}
}
/* Profile card */
.v26-profile-card {
max-width: 480px;
text-align: left;
}
.v26-profile-card .v26-auth-card-icon {
justify-content: flex-start;
}
.v26-profile-card .v26-auth-title {
text-align: left;
}
.v26-profile-section-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: -4px;
}
.v26-profile-divider {
height: 1px;
background: var(--border);
margin: 8px 0;
}
/* Registration form */
.v26-register-form {
max-width: 460px;
margin: 0 auto;
padding: 16px 0;
}
.v26-register-card {
padding: 40px 32px;
border: 1px solid var(--border);
border-radius: var(--radius-lg, 12px);
text-align: center;
background: var(--bg);
}
.v26-register-card--success {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.v26-register-card--success .btn {
text-decoration: none;
}
.v26-register-card-icon {
display: flex;
justify-content: center;
color: var(--text-muted);
margin-bottom: 16px;
}
.v26-register-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text-primary);
}
.v26-register-subtitle {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 24px;
}
.v26-register-card .v26-form-fields {
text-align: left;
}
.v26-register-hint {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 4px;
}
.v26-register-section-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin: 8px 0;
padding-top: 12px;
border-top: 1px solid var(--border);
text-align: left;
}
.v26-register-submit {
margin-top: 8px;
}
.v26-register-policy {
font-size: 12px;
color: var(--text-muted);
margin: 12px 0 0;
text-align: left;
}
.v26-register-required-note {
font-size: 12px;
color: var(--text-muted);
margin: 4px 0 0;
text-align: left;
}
.v26-register-captcha-wrap {
display: flex;
align-items: center;
}
/* Social Auth */
.v26-register-social {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.v26-register-social-title {
font-size: 13px;
color: var(--text-muted);
display: block;
margin-bottom: 12px;
}
/* Secure auth icons */
.v26-register-form .bx-auth-secure {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
vertical-align: middle;
}
.v26-register-form .bx-auth-secure-icon {
width: 19px;
height: 18px;
background-repeat: no-repeat;
background-position: center;
}
@media (max-width: 767px) {
.v26-register-card {
padding: 32px 20px;
}
}
.v26-alert {
padding: 16px 20px;
border-radius: 8px;
font-size: 15px;
margin-bottom: 24px;
font-weight: 500;
}
.v26-alert--danger {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
.v26-alert--success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #166534;
}
/* ========================================
Product Detail Page — Layout Overrides
mn_product_adaptive2 component renders within mmb26 frame.
======================================== */
/* Main title */
.component-product-detail-title-container h1 {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 16px;
line-height: 1.3;
}
/* Two-column layout (image left, info right) */
.component-product-detail-cols-container {
display: flex;
gap: 24px;
margin-bottom: 24px;
}
.component-product-detail-cols-container .component-product-detail-leftcol-container {
flex: 0 0 calc((100% - 24px) / 2);
max-width: calc((100% - 24px) / 2);
min-width: 0;
}
.component-product-detail-cols-container .component-product-detail-rightcol-container {
flex: 0 0 calc((100% - 24px) / 2);
max-width: calc((100% - 24px) / 2);
min-width: 0;
}
@media (max-width: 767px) {
.component-product-detail-cols-container {
flex-direction: column;
}
.component-product-detail-cols-container .component-product-detail-leftcol-container,
.component-product-detail-cols-container .component-product-detail-rightcol-container {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Image gallery container */
.component-product-detail-images-container {
margin-bottom: 16px;
}
.component-product-detail-images-container img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
}
/* Thumbnail gallery — styles are in component product.css with proper scoping */
.component-product-detail-benefits-container {
margin-bottom: 24px;
}
/* Description block */
.component-product-detail-description-container {
margin-bottom: 24px;
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary);
}
.component-product-detail-description-container p {
margin: 0 0 12px;
}
.component-product-detail-description-container h2,
.component-product-detail-description-container h3 {
color: var(--text-primary);
margin: 20px 0 10px;
font-size: 18px;
}
/* Params/characteristics table */
.component-product-detail-params-container {
margin-bottom: 24px;
}
.component-product-detail-params-container .data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.component-product-detail-params-container .data-table th,
.component-product-detail-params-container .data-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--border-color);
text-align: left;
}
.component-product-detail-params-container .data-table th {
font-weight: 600;
color: var(--text-primary);
background: var(--bg-secondary);
white-space: nowrap;
}
/* Delivery info box */
.component-product-detail-delivery-container {
border-radius: 8px !important;
}
/* Product detail tabs */
.calc_tabs,
.item-tabs-link {
font-family: inherit !important;
font-size: 14px !important;
}
.item-tabs {
/* border-bottom: 2px solid var(--border-color); */
/* margin-bottom: 20px; */
}
.item-tabs-link {
display: inline-block;
padding: 10px 16px;
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color 0.15s, border-color 0.15s;
}
.item-tabs-link:hover {
color: var(--text-primary);
}
.item-tabs-link.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
/* Product detail labels (stock, sale, new) */
.item-labels {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.item-label-in-stock {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
background: #e8f5e9;
color: #2e7d32;
}
/* Product detail price blocks */
.actual_price {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
}
.actual_price2 {
font-size: 14px;
color: var(--text-secondary);
}
.base-price {
font-size: 14px;
color: var(--text-muted);
text-decoration: line-through;
}
/* Product info/meta */
.item-info {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 12px;
}
/* Product quantity input */
.item-quantity input {
width: 60px;
padding: 6px 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 14px;
text-align: center;
}
.component-product-detail-container .item-configuration #param_additional_chars .item-quantity input[type="text"] {
width: 100%;
max-width: none;
padding: 0;
border-radius: 0;
}
/* Attention/warning blocks */
.attention,
.attention1 {
padding: 12px 16px;
background: #fff8e1;
border: 1px solid #ffe082;
border-radius: 6px;
font-size: 13px;
color: #5d4037;
margin-bottom: 16px;
}
/* Mobile fixed bottom bar */
.component-product-detail-mobile-fixedbottom-container {
box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important;
}
/* Back to top button */
.v26-back-to-top {
position: fixed;
bottom: 110px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--magenta);
color: #fff;
border: none;
font-size: 20px;
line-height: 1;
will-change: opacity, transform;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
transform: translateY(10px);
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.v26-back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.v26-back-to-top:hover {
background: var(--magenta-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.v26-back-to-top:active {
transform: translateY(0);
}
@media (max-width: 768px) {
.v26-back-to-top {
bottom: 80px;
right: 16px;
width: 40px;
height: 40px;
font-size: 18px;
}
}
/* Add to cart toast notification */
.v26-cart-toast {
position: fixed;
top: 20px;
right: 20px;
background: var(--bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px 24px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 2000;
display: flex;
align-items: center;
gap: 16px;
font-size: 17px;
line-height: 1.45;
transform: translateX(calc(100% + 40px));
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
max-width: 400px;
}
.v26-cart-toast.visible {
transform: translateX(0);
opacity: 1;
}
.v26-cart-toast span {
color: var(--text-primary);
font-weight: 500;
font-size: inherit;
}
.v26-cart-toast a {
color: var(--color-primary);
text-decoration: none;
white-space: nowrap;
font-weight: 600;
font-size: inherit;
}
.v26-cart-toast a:hover {
text-decoration: underline;
}
.v26-cart-toast-close {
position: absolute;
top: 10px;
right: 14px;
background: none;
border: none;
font-size: 22px;
color: var(--text-muted);
cursor: pointer;
padding: 0;
line-height: 1;
}
.v26-cart-toast-close:hover {
color: var(--text-primary);
}
@media (max-width: 768px) {
.v26-cart-toast {
top: auto;
bottom: 70px;
right: 12px;
left: 12px;
max-width: none;
}
}
/* ========================================
Generic Toast Notification System
Usage: V26.toast.show(message, type, duration)
Types: success, error, info (default: info)
======================================== */
.v26-toast {
position: fixed;
top: 20px;
right: 20px;
max-width: 400px;
padding: 16px 46px 16px 18px;
background: var(--surface-primary);
color: var(--text);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
border-left: 4px solid var(--border);
font-size: 17px;
line-height: 1.45;
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateX(20px);
transition: opacity .3s, visibility .3s, transform .3s;
}
.v26-toast.visible {
opacity: 1; visibility: visible; transform: translateX(0);
}
.v26-toast--success { border-left-color: var(--color-primary); }
.v26-toast--error { border-left-color: var(--red, #e53e3e); }
.v26-toast--info { border-left-color: var(--color-primary); }
.v26-toast-close {
position: absolute; top: 10px; right: 12px;
background: none; border: none; font-size: 22px;
color: var(--text-muted); cursor: pointer; padding: 2px; line-height: 1;
}
.v26-toast-close:hover { color: var(--text-primary); }
@media (max-width: 768px) {
.v26-toast { left: 12px; right: 12px; max-width: none; }
.product-card-photo { padding-top: 12px; }
.product-card-footer { gap: 4px; padding-top: 6px; }
.product-card-prices {
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 6px;
}
.product-card-price-label { display: none; }
.product-card-price-old {
order: 2;
font-size: 12px;
}
.product-card-price {
order: 1;
font-size: 15px;
}
.product-card-credit {
order: 3;
width: 100%;
font-size: 12px;
}
.product-card-btn { display: none; }
.product-card-badges { opacity: .62; }
.product-card-fav {
width: 30px;
height: 30px;
background: rgba(255,255,255,.64);
}
}
/* ========================================
Bootstrap Compatibility (old components)
Scoped overrides for Bootstrap classes used by old Bitrix component templates
that render inside the mmb26 frame (product detail, catalog, etc.)
======================================== */
/* Grid columns used by product detail, catalog */
.col-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
.col-lg-2 { flex: 0 0 16.667%; max-width: 16.667%; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.container-fluid { width: 100%; padding: 0 12px; }
/* Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: 48px; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: 8px; }
.pt-4 { padding-top: 24px; }
.mb-3 { margin-bottom: 16px; }
.pl-lg-2 { padding-left: 8px; }
.pr-0 { padding-right: 0 !important; }
/* Text utilities */
.v26-icon-info {
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
margin-left: 4px;
opacity: .5;
}
.text-muted { color: var(--text-secondary); }
.text-nowrap { white-space: nowrap; }
.text-info { color: var(--color-primary); }
.text-left { text-align: left; }
.text-white { color: #fff; }
/* Alerts — used by product detail, checkout */
.alert {
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 16px;
font-size: 14px;
border: 1px solid transparent;
}
.alert-success {
background: #f0fdf4;
color: #166534;
border-color: #bbf7d0;
}
.alert-danger {
background: #fef2f2;
color: #991b1b;
border-color: #fecaca;
}
/* Tables — used by product detail, order list */
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid var(--border-color);
font-size: 14px;
}
.table th {
font-weight: 600;
color: var(--text-primary);
background: var(--bg-secondary);
}
.table td {
color: var(--text-secondary);
}
/* Card components — used by old product card components */
.card {
background: var(--bg);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.card-body {
padding: 16px;
}
.card-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.card-img-top {
width: 100%;
height: auto;
display: block;
}
/* Badge variants */
.badge-success { background: var(--color-primary); color: #fff; }
.badge-info { background: var(--color-primary); color: #fff; }
.badge-mn { background: #211c4d; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
/* Modal form inputs (PKPD page) */
.modal-form-input-pkpd-o,
.modal-form-input-pkpd-fo {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--surface-primary);
color: var(--text-primary);
box-sizing: border-box;
}
.modal-form-input-pkpd-o:focus,
.modal-form-input-pkpd-fo:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 2px rgba(131, 176, 55, 0.15);
}
@media (max-width: 991px) {
.col-md-1, .col-md-3, .col-md-6, .col-md-12,
.col-lg-2, .col-lg-3, .col-lg-10 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (max-width: 767px) {
.col-1, .col-3, .col-4, .col-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ========================================
Microsoft Word content compatibility
FAQ pages have content pasted from Word with Mso* classes.
These overrides normalize the appearance within .v26-page.
======================================== */
.v26-page .MsoNormal,
.v26-page .MsoListParagraph,
.v26-page .MsoListParagraphCxSpFirst,
.v26-page .MsoListParagraphCxSpMiddle,
.v26-page .MsoListParagraphCxSpLast {
font-family: var(--font) !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: var(--text-primary) !important;
margin: 0 0 12px !important;
padding: 0 !important;
text-align: left !important;
}
.v26-page .MsoNormal img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
margin: 16px 0;
}
.v26-page .MsoNormal a {
color: var(--color-primary);
text-decoration: none;
}
.v26-page .MsoNormal a:hover {
text-decoration: underline;
}
/* ========================================
Cart Page — bx_ordercart Overrides
Bitrix sale.basket.basket visual template within mmb26 frame.
Normalizes table, checkout button, coupon, and layout to mmb26 design.
======================================== */
/* Cart table container */
.bx_ordercart .bx_ordercart_order_table_container {
border-color: var(--border-color) !important;
border-radius: var(--radius) !important;
font-family: var(--font) !important;
}
.bx_ordercart .bx_ordercart_order_table_container table thead td {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Cart item title links */
.bx_ordercart .bx_ordercart_itemtitle a {
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
.bx_ordercart .bx_ordercart_itemtitle a:hover {
color: var(--color-primary) !important;
}
/* Current price */
.bx_ordercart .bx_ordercart_order_table_container tbody td.price .current_price {
color: var(--text-primary) !important;
font-family: var(--font) !important;
}
/* Old/discount price */
.bx_ordercart .bx_ordercart_order_table_container tbody td.price .old_price {
color: var(--text-muted) !important;
}
/* Sort/filter buttons */
.bx_ordercart .bx_sort_container {
color: var(--text-secondary) !important;
font-family: var(--font) !important;
}
.bx_ordercart .bx_sort_container a {
font-family: var(--font) !important;
color: var(--text-secondary) !important;
border-color: var(--border-color) !important;
background: var(--bg-secondary) !important;
}
.bx_ordercart .bx_sort_container a:hover {
background: var(--bg-tertiary) !important;
}
.bx_ordercart .bx_sort_container a.current {
background: var(--color-primary) !important;
color: #fff !important;
}
/* Coupon input */
.bx_ordercart .bx_ordercart_coupon input {
border-color: var(--border-color) !important;
border-radius: 6px !important;
font-family: var(--font) !important;
box-shadow: none !important;
height: auto !important;
padding: 8px 12px !important;
}
.bx_ordercart .bx_ordercart_coupon input:focus {
outline: none;
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 58, 0.15) !important;
}
/* Order summary table */
.bx_ordercart .bx_ordercart_order_sum tr td {
font-family: var(--font) !important;
color: var(--text-secondary) !important;
}
.bx_ordercart .bx_ordercart_order_sum tr td.fwb {
color: var(--text-primary) !important;
}
/* Checkout button */
.bx_ordercart .bx_ordercart_order_pay_center .checkout {
background: var(--color-primary) !important;
color: #fff !important;
border-radius: 8px !important;
font-family: var(--font) !important;
text-shadow: none !important;
font-weight: 600 !important;
box-shadow: 0 2px 8px rgba(0, 122, 58, 0.2) !important;
transition: background 0.15s, box-shadow 0.15s !important;
}
.bx_ordercart .bx_ordercart_order_pay_center .checkout:hover {
background: var(--color-primary-hover) !important;
box-shadow: 0 4px 12px rgba(0, 122, 58, 0.3) !important;
}
/* bt2 secondary button */
.bt2 {
font-family: var(--font) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-color) !important;
background: #fff !important;
border-radius: 6px !important;
text-shadow: none !important;
box-shadow: none !important;
}
/* Article number */
.bx_ordercart .bx_ordercart_itemart {
color: var(--text-muted) !important;
font-family: var(--font) !important;
}
/* Cart photo container */
.bx_ordercart .bx_ordercart_photo_container {
border-color: var(--border-color) !important;
border-radius: var(--radius) !important;
}
/* Quantity control */
.quantity_control a {
border-color: var(--border-color) !important;
}
/* Total price in pay center */
.bx_ordercart .bx_ordercart_order_pay_center span {
font-family: var(--font) !important;
color: var(--text-primary) !important;
}
/* Mobile responsive */
@media (max-width: 767px) {
.bx_ordercart .bx_ordercart_order_table_container {
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
}
}
/* ========================================
Quick Order Popup (Buy in 1 Click)
sys:sale.quickorder component renders within mmb26 frame.
======================================== */
.order-form {
font-family: var(--font) !important;
}
.order-form .form-item {
margin-bottom: 14px;
}
.custom-input,
.custom-input-small-w {
font-family: var(--font) !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
padding: 10px 12px !important;
font-size: 14px !important;
width: 100%;
box-sizing: border-box;
outline: none;
}
.custom-input:focus,
.custom-input-small-w:focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 58, 0.15) !important;
}
.custom-button,
.order-form-button,
.btn-success {
font-family: var(--font) !important;
background: var(--color-primary) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer;
text-shadow: none !important;
box-shadow: 0 2px 8px rgba(0, 122, 58, 0.2) !important;
transition: background 0.15s, box-shadow 0.15s !important;
}
.custom-button:hover,
.order-form-button:hover,
.btn-success:hover {
background: var(--color-primary-hover) !important;
box-shadow: 0 4px 12px rgba(0, 122, 58, 0.3) !important;
}
.short-form .custom-input-small-w {
max-width: 250px;
}
.rocketBuy .icon-auth-black {
display: none;
}
/* Modal form input (PKPD) */
.modal-form-input-pkpd-fo {
font-family: var(--font) !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
padding: 10px 12px !important;
font-size: 14px !important;
}
.modal-form-input-pkpd-fo:focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 58, 0.15) !important;
}
/* Personal data info */
.personal-data-info {
font-size: 12px !important;
color: var(--text-muted) !important;
margin-top: 10px;
}
.personal-data-info a {
color: var(--color-primary) !important;
}
/* Auth link */
.iconed-link.js-link {
font-family: var(--font) !important;
color: var(--color-primary) !important;
text-decoration: none !important;
}
.iconed-link.js-link:hover {
text-decoration: underline !important;
}
/* align-center utility */
.align-center {
text-align: center !important;
}
/* Skip-to-content link (accessibility) */
.v26-skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
padding: 10px 20px;
background: var(--color-primary);
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 8px 8px;
transition: top 0.15s;
}
.v26-skip-link:focus {
top: 0;
outline: none;
}
/* ========================================
Mobile Bottom Navigation Bar
Sticky bottom bar with 4 key actions:
Catalog, Favorites, Cart, Phone
Hidden on desktop (≥768px).
======================================== */
.v26-mobnav {
display: none;
}
@media (max-width: 767px) {
.v26-mobnav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
background: #fff;
border-top: 1px solid var(--border-color);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
padding: 6px 0 env(safe-area-inset-bottom, 0);
}
.v26-mobnav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 4px 0;
color: var(--text-secondary);
text-decoration: none;
font-size: 10px;
font-weight: 500;
line-height: 1.2;
transition: color .15s;
-webkit-tap-highlight-color: transparent;
}
.v26-mobnav-item:active {
color: var(--color-primary);
}
.v26-mobnav-item:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.v26-mobnav-item svg {
flex-shrink: 0;
}
/* Add spacing at bottom of page so content isn't hidden behind nav */
body {
padding-bottom: 60px;
}
}
/* ========================================
Personal Order History
sys:sale.personal.order.list/mn within mmb26 frame.
======================================== */
.history-list {
margin-top: 16px;
}
.history-list .inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--border-color);
font-family: var(--font);
}
.history-list .order-row:first-child .inner {
border-top: 1px solid var(--border-color);
}
.history-list .order-expand {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
cursor: pointer;
}
.history-list .order-expand:hover {
color: var(--color-primary);
}
.history-list .status {
font-size: 12px;
font-weight: 500;
padding: 2px 8px;
border-radius: 4px;
background: var(--bg-secondary);
}
.history-list .price {
font-size: 15px;
font-weight: 700;
color: var(--text-primary) !important;
margin-left: auto;
}
.history-list .magenta {
color: var(--text-primary) !important;
}
.history-list .button-gray {
display: inline-block;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
text-decoration: none;
font-family: var(--font);
transition: all 0.15s;
}
.history-list .button-gray:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.history-list .delete-btn {
display: inline-block;
width: 28px;
height: 28px;
text-decoration: none;
opacity: 0.4;
transition: opacity 0.15s;
}
.history-list .delete-btn:hover {
opacity: 1;
}
/* Personal menu */
.menu {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
padding: 12px 0;
border-bottom: 2px solid var(--border-color);
margin-bottom: 16px;
font-family: var(--font);
font-size: 14px;
}
.menu a,
.menu span {
color: var(--text-secondary);
text-decoration: none;
padding: 4px 0;
}
.menu .active span {
color: var(--color-primary);
font-weight: 600;
border-bottom: 2px solid var(--color-primary);
}
.menu .active {
border-bottom: none;
}
.menu .exit-from-personal a {
display: flex;
align-items: center;
gap: 4px;
color: var(--text-muted);
font-size: 13px;
margin-left: auto;
}
.menu .exit-from-personal a:hover {
color: var(--red, #e53e3e);
}
/* Order items (expanded) */
.history-list .order-items {
padding: 12px 0 16px;
}
.history-list .order-item {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
align-items: flex-start;
}
.history-list .order-item:last-child {
border-bottom: none;
}
.history-list .item-picture {
flex-shrink: 0;
}
.history-list .item-picture img {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
.history-list .item-inner {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.history-list .item-options {
font-size: 12px;
color: var(--text-muted);
}
.history-list .item-option {
display: inline;
}
.history-list .h2 a {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
}
.history-list .h2 a:hover {
color: var(--color-primary);
}
/* Utility */
.f-left { float: left; }
.clear { clear: both; }
/* ========================================
Personal Profile Form
bitrix:main.profile/mn_profile within mmb26 frame.
======================================== */
.personal-wr {
max-width: 600px;
margin: 16px 0;
}
.personal-row {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.personal-col {
flex: 1;
min-width: 250px;
}
.personal-form .label {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid var(--color-primary);
}
.personal-form .form-item {
margin-bottom: 14px;
}
.personal-form .form-item label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 4px;
}
.personal-form .form-item input[type="text"],
.personal-form .form-item input[type="email"],
.personal-form .form-item input[type="password"],
.personal-form .form-item input[type="tel"] {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
font-family: var(--font);
outline: none;
box-sizing: border-box;
}
.personal-form .form-item input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(0, 122, 58, 0.15);
}
.personal-button {
display: inline-block;
padding: 10px 24px;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
transition: background 0.15s;
}
.personal-button:hover {
background: var(--color-primary-hover);
}
.stripe {
display: none;
}
.u-right {
text-align: right;
}
@media (max-width: 767px) {
.personal-row {
flex-direction: column;
gap: 16px;
}
}
/* ========================================
Skeleton Loading Placeholders
Reusable shimmer animation for AJAX content loading states.
Usage:
======================================== */
@keyframes v26-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.v26-skeleton {
background: linear-gradient(90deg, var(--bg-secondary) 25%, #e8e8e8 37%, var(--bg-secondary) 63%);
background-size: 200% 100%;
animation: v26-shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-sm);
}
.v26-skeleton--text {
height: 14px;
margin-bottom: 8px;
}
.v26-skeleton--text-short {
height: 14px;
width: 60%;
margin-bottom: 8px;
}
.v26-skeleton--title {
height: 22px;
width: 50%;
margin-bottom: 16px;
}
.v26-skeleton--image {
width: 100%;
aspect-ratio: 1;
border-radius: var(--radius);
}
.v26-skeleton--avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.v26-skeleton--btn {
height: 40px;
width: 120px;
border-radius: 8px;
}
.v26-skeleton--card {
padding: 16px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.v26-skeleton--card .v26-skeleton--image {
margin-bottom: 12px;
}
/* Disable shimmer for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.v26-skeleton {
animation: none;
background: var(--bg-secondary);
}
}
/* ========================================
Loading Spinner
======================================== */
.v26-spinner {
display: inline-block;
width: 24px; height: 24px;
border: 3px solid var(--border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: v26-spin .6s linear infinite;
}
.v26-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.v26-spinner--lg { width: 40px; height: 40px; border-width: 4px; }
.v26-spinner-overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.7);
border-radius: inherit;
z-index: 10;
}
@keyframes v26-spin {
to { transform: rotate(360deg); }
}
/* Full-page loading */
.v26-loading-page {
display: flex; align-items: center; justify-content: center;
min-height: 200px; gap: 12px;
color: var(--text-muted); font-size: 14px;
}
/* ========================================
Scroll Reveal Animation
======================================== */
.v26-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.v26-reveal.visible {
opacity: 1;
transform: translateY(0);
}
.v26-reveal--left { transform: translateX(-16px); }
.v26-reveal--left.visible { transform: translateX(0); }
.v26-reveal--right { transform: translateX(16px); }
.v26-reveal--right.visible { transform: translateX(0); }
.v26-reveal--scale { transform: scale(0.95); }
.v26-reveal--scale.visible { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
.v26-reveal { opacity: 1; transform: none; transition: none; }
}
/* Copy button (pairs with V26.copyToClipboard) */
.v26-copy-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
transition: background .15s, color .15s;
}
.v26-copy-btn:hover { background: var(--border); color: var(--text-primary); }
.v26-copy-btn:active { transform: scale(.97); }
.v26-copy-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.v26-copy-btn svg { width: 14px; height: 14px; }
/* ========================================
Content Tabs Component
Usage: .v26-tabs > .v26-tabs-nav > button[data-tab]
.v26-tabs > .v26-tabs-panel[data-panel]
======================================== */
.v26-tabs-nav {
display: flex;
border-bottom: 2px solid var(--border);
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.v26-tabs-nav::-webkit-scrollbar { display: none; }
.v26-tabs-nav button {
padding: 10px 20px;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
transition: color .15s, border-color .15s;
}
.v26-tabs-nav button:hover { color: var(--text-primary); }
.v26-tabs-nav button[aria-selected="true"] {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.v26-tabs-nav button:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
border-radius: 2px;
}
.v26-tabs-panel { display: none; padding: 16px 0; }
.v26-tabs-panel[aria-hidden="false"] { display: block; }
/* Content Accordion Component */
.v26-accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.v26-accordion-item { border-bottom: 1px solid var(--border); }
.v26-accordion-item:last-child { border-bottom: none; }
.v26-accordion-trigger {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 14px 16px;
background: none; border: none;
font-size: 15px; font-weight: 600;
color: var(--text); cursor: pointer;
text-align: left;
transition: background .15s;
}
.v26-accordion-trigger:hover { background: var(--bg-secondary); }
.v26-accordion-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.v26-accordion-trigger svg {
width: 18px; height: 18px;
transition: transform .2s;
flex-shrink: 0; margin-left: 12px;
color: var(--text-muted);
}
.v26-accordion-item.open .v26-accordion-trigger svg { transform: rotate(180deg); }
.v26-accordion-body {
display: none; padding: 0 16px 16px;
color: var(--text-secondary); font-size: 14px; line-height: 1.6;
}
.v26-accordion-item.open .v26-accordion-body { display: block; }
/* === MMB26 Cart Page === */
.v26-cart-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0; border-bottom: 1px solid var(--border);
margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.v26-cart-header-left { order: 1; }
.v26-cart-header-right { order: 2; display: flex; gap: 8px; flex-wrap: wrap; }
.v26-cart-total { font-size: 16px; color: var(--text); }
.v26-cart-total b { font-size: 18px; color: var(--green); }
.v26-cart-print-btn { display: none; }
.v26-cart-items {
display: flex; flex-direction: column; gap: 12px;
}
.v26-cart-item {
display: flex; gap: 16px; padding: 16px;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius); transition: box-shadow .15s;
}
.v26-cart-item:hover { box-shadow: var(--shadow-hover); }
.v26-cart-item-img {
flex-shrink: 0; width: 120px; height: 120px;
border-radius: var(--radius-sm); overflow: hidden;
background: transparent;
}
.v26-cart-item-img img {
width: 100%; object-fit: contain;
}
.v26-cart-item-slider {
position: relative; width: 100%; height: 100%;
}
.v26-cart-item-slider img {
width: 100%; height: 100%; object-fit: contain;
}
.v26-cart-item-slider .product-card-dots {
height: 12px;
}
.v26-cart-item-slider .product-card-dot {
width: 6px; height: 6px;
background: rgba(0,0,0,.35);
box-shadow: 0 0 2px rgba(0,0,0,.15);
}
@media (min-width: 768px) {
.v26-cart-item-slider .product-card-dots {
bottom: 16px;
}
}
.v26-cart-item-slider .product-card-dot.active {
background: var(--green);
transform: scale(1.4);
}
.v26-cart-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.v26-cart-item-top {
display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.v26-cart-item-name {
font-size: 16px; font-weight: 600; color: var(--text);
text-decoration: none; line-height: 1.3;
}
.v26-cart-item-name:hover { color: var(--green); text-decoration: underline; }
.v26-cart-item-price {
flex-shrink: 0; font-size: 17px; font-weight: 700; color: var(--green);
white-space: nowrap;
}
.v26-cart-item-props {
font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}
.v26-cart-prop-name { font-weight: 600; color: var(--text); }
.v26-cart-item-actions {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-top: auto; padding-top: 8px;
flex-wrap: wrap;
}
.v26-cart-quantity {
display: flex; align-items: center; gap: 0;
border: 1px solid var(--border); border-radius: var(--radius-sm);
overflow: hidden;
}
.v26-cart-qty-btn {
display: flex; align-items: center; justify-content: center;
width: 72px; height: 36px; border: none; background: var(--bg-light);
color: var(--text); cursor: pointer; transition: background .15s;
}
.v26-cart-qty-btn:hover { background: var(--bg-tertiary); }
.v26-cart-qty-btn:active { transform: scale(.95); }
.v26-cart-qty-input {
width: 48px; height: 36px; text-align: center;
border: none; border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
font-size: 14px; font-weight: 600; color: var(--text);
background: var(--bg); -moz-appearance: textfield;
}
.v26-cart-qty-input::-webkit-inner-spin-button,
.v26-cart-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.v26-cart-qty-unit {
font-size: 13px; color: var(--text-muted);
margin: 0 6px;
}
.v26-cart-item-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.v26-btn-danger {
background: var(--red); color: #fff;
border: none; border-radius: var(--radius);
padding: 8px 14px; font-size: 13px; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: background .15s, transform .1s;
display: inline-flex; align-items: center; gap: 6px;
}
.v26-btn-danger:hover { background: #c62828; }
.v26-btn-danger:active { transform: scale(.97); }
.v26-btn-lg { padding: 14px 28px; font-size: 15px; }
.v26-cart-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 0; border-top: 2px solid var(--border);
margin-top: 16px; gap: 12px; flex-wrap: wrap;
}
.v26-cart-footer-left { order: 1; }
.v26-cart-footer-right { order: 2; }
.v26-cart-updated {
background: #fff3cd; border: 1px solid #ffc107;
border-radius: var(--radius); padding: 12px 16px;
margin-bottom: 16px;
}
.v26-cart-updated-title {
font-weight: 700; color: #856404; margin-bottom: 4px;
}
.v26-cart-updated ul { padding-left: 20px; }
.v26-cart-updated li {
color: #856404; font-size: 14px; list-style: disc;
margin-bottom: 2px;
}
.v26-cart-empty {
text-align: center;
padding: 60px 24px;
background: var(--surface-primary);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.v26-cart-empty::before {
content: '';
display: block;
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: var(--surface-secondary);
border-radius: 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") no-repeat center;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") no-repeat center;
}
.v26-cart-empty p {
margin-bottom: 24px;
color: var(--text-secondary);
font-size: 16px;
}
.v26-cart-empty .btn {
min-width: 200px;
}
.v26-cart-recommendations { margin-top: 32px; }
/* Cart — tablet+ */
@media (min-width: 768px) {
.v26-cart-header { flex-wrap: nowrap; }
.v26-cart-header-right { flex-wrap: nowrap; }
.v26-cart-print-btn { display: inline-flex; gap: 6px; align-items: center; }
.v26-cart-item { padding: 20px; gap: 20px; }
.v26-cart-item-img { width: 160px; height: 160px; }
.v26-cart-item-actions { flex-wrap: nowrap; }
}
/* Cart — desktop */
@media (min-width: 1024px) {
.v26-cart-item-img { width: 180px; height: 180px; }
.v26-cart-footer { flex-wrap: nowrap; }
}
/* Cart — dark mode */
:root.dark-mode .v26-cart-item { background: var(--bg); border-color: var(--border); }
:root.dark-mode .v26-cart-qty-input { background: var(--bg); color: var(--text); }
:root.dark-mode .v26-cart-qty-btn { background: var(--bg-secondary); color: var(--text); }
:root.dark-mode .v26-cart-qty-btn:hover { background: var(--bg-tertiary); }
:root.dark-mode .v26-cart-updated { background: #3d3520; border-color: #856404; }
:root.dark-mode .v26-cart-updated-title,
:root.dark-mode .v26-cart-updated li { color: #ffc107; }
/* @media (prefers-color-scheme: dark) { */
/* :root:not(.light-mode) .v26-cart-item { background: var(--bg); border-color: var(--border); } */
/* :root:not(.light-mode) .v26-cart-qty-input { background: var(--bg); color: var(--text); } */
/* :root:not(.light-mode) .v26-cart-qty-btn { background: var(--bg-secondary); color: var(--text); } */
/* :root:not(.light-mode) .v26-cart-qty-btn:hover { background: var(--bg-tertiary); } */
/* :root:not(.light-mode) .v26-cart-updated { background: #3d3520; border-color: #856404; } */
/* :root:not(.light-mode) .v26-cart-updated-title, */
/* :root:not(.light-mode) .v26-cart-updated li { color: #ffc107; } */
/* } */
:root.dark-mode .categories-strip--cards .catalog-section-card-thumb {
background: #fff;
}
/* Cart — print */
@media print {
.v26-cart-header-right, .v26-cart-item-buttons, .v26-cart-footer-right,
.v26-cart-print-btn { display: none !important; }
.v26-cart-item { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}
/* ============================================
QUICK ORDER DIALOG (global)
============================================ */
.quick-order-dialog {
display: none;
position: fixed;
inset: 0;
z-index: 999990;
}
.quick-order-dialog.is-open {
display: flex;
align-items: center;
justify-content: center;
}
.quick-order-dialog__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
}
.quick-order-dialog__inner {
position: relative;
padding: 32px;
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 500px;
width: 90%;
margin: 0 16px;
}
.quick-order-dialog__close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border: none;
background: #f5f5f5;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.quick-order-dialog__close:hover {
background: #e0e0e0;
}
.quick-order-dialog__header {
margin-bottom: 24px;
padding-right: 40px;
}
.quick-order-dialog__title {
font-size: 22px;
font-weight: 600;
margin: 0 0 8px;
color: #333;
}
.quick-order-dialog__subtitle {
font-size: 14px;
color: #666;
margin: 0;
}
.quick-order-dialog__loading {
text-align: center;
padding: 40px 20px;
color: #666;
}
.quick-order-dialog__error {
text-align: center;
padding: 40px 20px;
color: #dc3545;
}
.quick-order-dialog form {
display: flex;
flex-direction: column;
gap: 16px;
}
.quick-order-dialog .form-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.quick-order-dialog label {
font-size: 14px;
font-weight: 500;
color: #333;
}
.quick-order-dialog input[type="text"],
.quick-order-dialog input[type="tel"],
.quick-order-dialog input[type="email"] {
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 15px;
transition: border-color 0.2s;
}
.quick-order-dialog input[type="text"]:focus,
.quick-order-dialog input[type="tel"]:focus,
.quick-order-dialog input[type="email"]:focus {
outline: none;
border-color: #4a90d9;
}
.quick-order-dialog .required-mark {
color: #dc3545;
}
.quick-order-dialog form .order-form-button,
.quick-order-dialog .order-form-button:not(.btn):not(.btn-success):not(.custom-button) {
margin-top: 8px;
padding: 0;
background: transparent !important;
border: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
.quick-order-dialog form .order-form-button input {
width: 100%;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
color: #fff;
background: var(--magenta, #c4161c);
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.quick-order-dialog form .order-form-button input:hover {
background: #a81218;
}
.quick-order-dialog form .order-form-button input:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.quick-order-dialog .v26-form-msg {
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
margin-top: 8px;
}
.quick-order-dialog .v26-form-msg--error {
background: #fef2f2;
color: #dc3545;
border: 1px solid #fecaca;
}