/* Start:/local/templates/lentriNew/styles.css?1793654678119286*/
@charset "UTF-8";
/* ==========================================================================
ФАЙЛ: main.scss
НАЗНАЧЕНИЕ: Точка входа компиляции. Управляет порядком загрузки стилей.
ПРАВИЛА:
1. Строгий порядок: abstracts → base → layout → components → blocks → theme.
2. Никакого CSS-кода здесь, только @use.
КОМПИЛЯЦИЯ:
sass scss/main.scss css/main.css --watch
========================================================================== */
/* ==========================================================================
ФАЙЛ: abstracts/_variables.scss
НАЗНАЧЕНИЕ: Единый источник всех чисел, цветов и breakpoints.
ПРАВИЛА:
- Здесь хранятся ТОЛЬКО переменные, никакого CSS-кода.
- Все компоненты импортируют этот файл через @use.
========================================================================== */
/* ==========================================================================
ФАЙЛ: abstracts/_mixins.scss
НАЗНАЧЕНИЕ: Переиспользуемые блоки CSS-логики.
ПРАВИЛА:
- Миксин = шаблон стилей, который можно вставить в любой селектор.
- Используется для устранения дублирования кода.
========================================================================== */
/* ==========================================================================
ФАЙЛ: base/_reset.scss
НАЗНАЧЕНИЕ: Глобальный сброс браузерных стилей и базовые правила.
ПРИНЦИПЫ:
- box-sizing: border-box для всех элементов.
- Сброс margin/padding у блочных элементов.
- Устранение артефактов браузеров в полях форм.
========================================================================== */
:root {
/* Заголовки */
--font-heading: Tenor Sans, sans-serif;
/* Основной текст */
--font-body: var(--font-heading);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
}
ul {
list-style-type: none;
}
.list-marked {
list-style-type: circle;
}
ul, ol {
margin-left: 0; /* Убираем внешний отступ, список начинается на уровне текста */
padding-left: 1.5em; /* Добавляем внутренний отступ, текст смещается вправо */
}
body, p, span {
font-family: var(--font-body);
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #f0f2f5;
font-family: var(--font-body);
padding-bottom: 4.375rem;
color: #333333;
line-height: 1.5;
}
@media (min-width: 56.25rem) {
body {
padding-bottom: 0;
}
}
.state-toggle {
display: none;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
input, button, textarea, select {
font: inherit;
color: inherit;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.5rem;
}
input:-moz-ui-invalid {
box-shadow: none !important;
}
input:-moz-focusring {
outline: none !important;
box-shadow: none !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus {
-webkit-box-shadow: 0 0 0 1.875rem #f2f2f2 inset !important;
-moz-box-shadow: 0 0 0 1.875rem #f2f2f2 inset !important;
box-shadow: 0 0 0 1.875rem #f2f2f2 inset !important;
-webkit-text-fill-color: #333333 !important;
-moz-text-fill-color: #333333 !important;
transition: background-color 5000s ease-in-out 0s;
border-radius: inherit !important;
}
input:focus:-webkit-autofill,
input:focus:-moz-autofill {
-webkit-box-shadow: 0 0 0 1.875rem #ffffff inset !important;
-moz-box-shadow: 0 0 0 1.875rem #ffffff inset !important;
box-shadow: 0 0 0 1.875rem #ffffff inset !important;
}
/* ==========================================================================
ФАЙЛ: base/_typography.scss
НАЗНАЧЕНИЕ: Базовая типографика (заголовки, параграфы).
ПРИНЦИПЫ:
- Размеры в rem для глобального масштабирования.
- Цвета через переменные для темизации.
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
color: #333333;
margin-bottom: 1rem;
}
h1 {
font-size: 2.6rem;
}
h2 {
font-size: 2.4rem;
}
h3 {
font-size: 1.625rem;
}
h4 {
font-size: 1.3rem;
}
p {
margin-bottom: 1rem;
line-height: 1.6;
color: #333333;
}
p:last-child {
margin-bottom: 0;
}
@font-face {
font-family: Montserrat;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-400-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Montserrat;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-400-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: Montserrat;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-400-vietnamese.woff2") format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Montserrat;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-400-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Montserrat;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-500-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-500-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-500-vietnamese.woff2") format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-500-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Montserrat;
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-600-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Montserrat;
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-600-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: Montserrat;
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-600-vietnamese.woff2") format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Montserrat;
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-600-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Montserrat;
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-700-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-700-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-700-vietnamese.woff2") format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-700-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("/local/templates/lentriNew/fonts/montserrat/montserrat-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
ФАЙЛ: layout/_page.scss
НАЗНАЧЕНИЕ: Глобальные обёртки страницы (page-container, main, sidebar).
ОТВЕТСТВЕННОСТЬ: ТОЛЬКО геометрия (ширина, отступы, grid).
========================================================================== */
.page-container {
width: 100%;
max-width: 110rem;
margin-left: auto;
margin-right: auto;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.main-full-width {
width: 100%;
background: #ffffff;
}
:root {
--header-height: 148px; /* Высота вашей шапки из старого скрипта */
--sidebar-gap: 1.25rem; /* Используем переменную $gap (20px) */
}
.content-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
align-items: start;
position: relative;
}
.main-layout {
width: 100%;
max-width: 90rem;
min-width: 0;
padding: 0;
}
.sidebar-layout {
display: none;
width: 16.875rem;
min-width: 0;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
/* STICKY: блок фиксируется внутри границ .content-grid */
position: sticky;
top: calc(var(--header-height) + var(--sidebar-gap));
/* Внутренний скролл, если меню длиннее экрана */
max-height: calc(100vh - var(--header-height) - var(--sidebar-gap) * 2);
overflow-y: auto;
overflow-x: hidden;
/* Стилизация скроллбара */
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.sidebar-layout::-webkit-scrollbar {
width: 4px;
}
.sidebar-layout::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-layout::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
@media (min-width: 51.875rem) {
.content-grid {
grid-template-columns: 1fr 16.875rem;
gap: 1.25rem;
}
.content-grid::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(100% - 16.875rem - 1.25rem - 1.25rem / 4);
width: 1px;
background-color: #d1d1d1;
pointer-events: none;
}
.sidebar-layout {
display: block;
}
}
/* ==========================================================================
ФАЙЛ: layout/_sections.scss
НАЗНАЧЕНИЕ: Утилитарные классы секций и контейнеров сетки.
ПРИНЦИП РАЗДЕЛЕНИЯ ОТВЕТСТВЕННОСТИ:
- .layout-section — ТОЛЬКО контекст для @container
- .section-padded — ТОЛЬКО вертикальные отступы
- .grid-container — ТОЛЬКО свойства сетки (display: grid, gap)
- .grid-N — модификаторы количества колонок
ПРАВИЛА:
✅ Можно комбинировать: .layout-section.section-padded > .grid-container.grid-4
❌ Нельзя добавлять padding в .grid-container или .layout-section
❌ Нельзя убирать container-type у .layout-section
========================================================================== */
.layout-section {
container-type: inline-size;
container-name: section;
width: 100%;
}
.section-padded {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.section-padded--no-bottom {
padding-bottom: 0;
}
.grid-container {
display: grid;
gap: 1.25rem;
width: 100%;
}
.grid-6 {
grid-template-columns: 1fr;
}
@container section (min-width: 31.25rem) {
.grid-6 {
grid-template-columns: repeat(2, 1fr);
}
}
@container section (min-width: 50rem) {
.grid-6 {
grid-template-columns: repeat(3, 1fr);
}
}
@container section (min-width: 75rem) {
.grid-6 {
grid-template-columns: repeat(6, 1fr);
}
}
.grid-4 {
grid-template-columns: 1fr;
}
@container section (min-width: 31.25rem) {
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@container section (min-width: 56.25rem) {
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}
.grid-3 {
grid-template-columns: 1fr;
}
@container section (min-width: 43.75rem) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
.grid-2 {
grid-template-columns: 1fr;
}
@container section (min-width: 42.375rem) {
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
}
.grid-4-3 {
grid-template-columns: 1fr;
}
@container section (min-width: 31.25rem) {
.grid-4-3 {
grid-template-columns: repeat(2, 1fr);
}
.grid-4-3 > :last-child:nth-child(odd) {
grid-column: 1/-1;
}
}
@container section (min-width: 56.25rem) {
.grid-4-3 {
grid-template-columns: repeat(12, 1fr);
}
.grid-4-3 > :nth-child(-n+3) {
grid-column: span 4;
}
.grid-4-3 > :nth-child(n+4):nth-child(-n+7) {
grid-column: span 3;
}
.grid-4-3 > :nth-child(n+8) {
grid-column: span 3;
}
}
/* ==========================================================================
ФАЙЛ: components/_header-top.scss
НАЗНАЧЕНИЕ: Верхняя строка шапки (location + menu-contact + icons).
ОТВЕТСТВЕННОСТЬ:
- Селектор города с выпадающим списком
- Навигационное меню + контакты (умный контейнер)
- Иконки (избранное, карта, личный кабинет)
АДАПТИВНОСТЬ:
- @container menu-contact-container — перенос меню и контактов
- На мобильном скрывается (управляется через _header-mobile.scss)
========================================================================== */
.header-full-width {
position: sticky;
top: var(--header-top-sticky-top, 0);
z-index: var(--header-top-z-index, 200);
}
.header-row-1-full-width {
width: var(--header-top-full-width, 100%);
height: var(--header-top-height, 65px);
background: var(--header-top-bg, #ffffff);
border-bottom: var(--header-top-border, 1px solid #e0e0e0);
display: var(--header-top-display, flex);
}
.header-row-1 {
display: none;
display: grid;
grid-template-columns: var(--header-top-grid-columns, auto 1fr 16.875rem);
grid-template-areas: "location menu-contact icons";
gap: var(--header-top-gap, 1.25rem);
padding: var(--header-top-padding, 0.625rem 0);
height: var(--header-top-row-height, 100%);
align-items: var(--header-top-align-items, center);
}
.area-location {
grid-area: location;
}
.area-menu-contact {
grid-area: menu-contact;
}
.area-icons {
grid-area: icons;
}
.area-location {
position: var(--header-top-location-position, relative);
color: var(--header-top-location-color, #333333);
display: var(--header-top-location-display, flex);
align-items: var(--header-top-location-align-items, center);
}
.location-selector {
display: var(--header-top-selector-display, flex);
align-items: var(--header-top-selector-align-items, center);
gap: var(--header-top-selector-gap, 0.4em);
background: var(--header-top-selector-bg, transparent);
border: var(--header-top-selector-border, none);
cursor: var(--header-top-selector-cursor, pointer);
padding: var(--header-top-selector-padding, 0.4em 0.8em);
border-radius: var(--header-top-selector-radius, 0.5rem);
transition: var(--header-top-selector-transition, background-color 0.2s ease, color 0.2s ease);
color: var(--header-top-selector-color, #333333);
font-weight: var(--header-top-selector-font-weight, 500);
white-space: var(--header-top-selector-white-space, nowrap);
}
.location-selector svg:first-child {
width: var(--header-top-selector-svg-width, 1em);
height: var(--header-top-selector-svg-height, 1em);
flex-shrink: var(--header-top-selector-svg-flex-shrink, 0);
}
.location-selector .location-current {
font-weight: var(--header-top-selector-current-font-weight, 600);
}
.location-selector .location-arrow {
width: var(--header-top-selector-arrow-width, 0.7em);
height: var(--header-top-selector-arrow-height, 0.7em);
transition: var(--header-top-selector-arrow-transition, transform 0.2s ease);
}
.location-selector:hover {
background-color: var(--header-top-selector-hover-bg, rgba(0, 0, 0, 0.05));
color: var(--header-top-selector-hover-color, #ff8c42);
}
.location-selector[aria-expanded=true] {
background-color: var(--header-top-selector-expanded-bg, rgba(0, 0, 0, 0.05));
color: var(--header-top-selector-expanded-color, #ff8c42);
}
.location-selector[aria-expanded=true] .location-arrow {
transform: var(--header-top-selector-expanded-arrow-transform, rotate(180deg));
}
.location-dropdown {
position: var(--header-top-dropdown-position, absolute);
top: var(--header-top-dropdown-top, calc(100% + 0.5rem));
left: var(--header-top-dropdown-left, 0);
min-width: var(--header-top-dropdown-min-width, 17.5rem);
max-width: var(--header-top-dropdown-max-width, 21.875rem);
max-height: var(--header-top-dropdown-max-height, 25rem);
background: var(--header-top-dropdown-bg, #ffffff);
border-radius: var(--header-top-dropdown-radius, 0.75rem);
box-shadow: var(--header-top-dropdown-shadow, 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15));
z-index: var(--header-top-dropdown-z-index, 300);
opacity: var(--header-top-dropdown-opacity, 0);
visibility: var(--header-top-dropdown-visibility, hidden);
transform: var(--header-top-dropdown-transform, translateY(-0.625rem));
transition: var(--header-top-dropdown-transition, opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease);
overflow: var(--header-top-dropdown-overflow, hidden);
display: var(--header-top-dropdown-display, flex);
flex-direction: var(--header-top-dropdown-flex-direction, column);
}
.location-selector[aria-expanded=true] + .location-dropdown {
opacity: var(--header-top-dropdown-expanded-opacity, 1);
visibility: var(--header-top-dropdown-expanded-visibility, visible);
transform: var(--header-top-dropdown-expanded-transform, translateY(0));
}
.location-search {
padding: var(--header-top-search-padding, 0.8em);
border-bottom: var(--header-top-search-border, 1px solid #f0f0f0);
background: var(--header-top-search-bg, #fafafa);
}
.location-search-input {
width: var(--header-top-search-input-width, 100%);
padding: var(--header-top-search-input-padding, 0.6em 0.8em);
border: var(--header-top-search-input-border, 1px solid #e0e0e0);
border-radius: var(--header-top-search-input-radius, 0.5rem);
font-size: var(--header-top-search-input-font-size, 0.95em);
outline: var(--header-top-search-input-outline, none);
transition: var(--header-top-search-input-transition, border-color 0.2s ease);
}
.location-search-input:focus {
border-color: var(--header-top-search-input-focus-border-color, #ff8c42);
}
.location-list {
list-style: var(--header-top-list-style, none);
margin: var(--header-top-list-margin, 0);
padding: var(--header-top-list-padding, 0.5em 0);
max-height: var(--header-top-list-max-height, 18.75rem);
overflow-y: var(--header-top-list-overflow-y, auto);
}
.location-item {
padding: var(--header-top-item-padding, 0.7em 1em);
cursor: var(--header-top-item-cursor, pointer);
transition: var(--header-top-item-transition, background-color 0.2s ease);
color: var(--header-top-item-color, #333333);
}
.location-item:hover {
background-color: var(--header-top-item-hover-bg, #f5f5f5);
}
.location-item.active {
background-color: var(--header-top-item-active-bg, rgba(255, 140, 66, 0.1));
color: var(--header-top-item-active-color, #ff8c42);
font-weight: var(--header-top-item-active-font-weight, 600);
}
.area-menu-contact {
grid-area: menu-contact;
width: var(--header-top-menu-contact-width, 100%);
container-type: var(--header-top-menu-contact-container-type, inline-size);
container-name: var(--header-top-menu-contact-container-name, menu-contact-container);
display: var(--header-top-menu-contact-display, flex);
flex-wrap: var(--header-top-menu-contact-flex-wrap, nowrap);
align-items: var(--header-top-menu-contact-align-items, center);
gap: var(--header-top-menu-contact-gap, 4rem);
}
.area-menu {
flex: var(--header-top-menu-flex, 1 1 auto);
min-width: var(--header-top-menu-min-width, 21.875rem);
}
.area-menu .header__top-nav {
display: var(--header-top-nav-display, flex);
flex-wrap: var(--header-top-nav-flex-wrap, nowrap);
gap: var(--header-top-nav-gap, 1.5rem);
align-items: var(--header-top-nav-align-items, center);
width: var(--header-top-nav-width, 100%);
justify-content: var(--header-top-nav-justify-content, space-between);
}
@container menu-contact-container (max-width: 40.4375rem) {
.area-menu .header__top-nav {
flex-wrap: var(--header-top-nav-mobile-flex-wrap, wrap);
gap: var(--header-top-nav-mobile-gap, 0.75rem);
}
}
.area-menu .header__top-link {
display: var(--header-top-link-display, inline-block);
color: var(--header-top-link-color, #333333);
text-decoration: var(--header-top-link-text-decoration, none);
transition: var(--header-top-link-transition, color 0.2s ease);
white-space: var(--header-top-link-white-space, nowrap);
}
.area-menu .header__top-link:hover {
color: var(--header-top-link-hover-color, #ff8c42);
}
.area-contact {
display: var(--header-top-contact-display, flex);
flex-direction: var(--header-top-contact-flex-direction, row);
gap: var(--header-top-contact-gap, 1rem);
align-items: var(--header-top-contact-align-items, center);
}
@container menu-contact-container (max-width: 47.9375rem) {
.area-contact {
flex-direction: var(--header-top-contact-mobile-flex-direction, column);
align-items: var(--header-top-contact-mobile-align-items, flex-end);
gap: var(--header-top-contact-mobile-gap, 0.25rem);
}
}
.area-contact .contact-link {
color: var(--header-top-contact-link-color, #333333);
text-decoration: var(--header-top-contact-link-text-decoration, none);
transition: var(--header-top-contact-link-transition, color 0.2s ease);
white-space: var(--header-top-contact-link-white-space, nowrap);
}
.area-contact .contact-link:hover {
color: var(--header-top-contact-link-hover-color, #ff8c42);
}
.area-icons {
display: var(--header-top-icons-display, flex);
align-items: var(--header-top-icons-align-items, center);
gap: var(--header-top-icons-gap, 2rem);
--form-height: var(--header-top-icons-form-height, 28px);
--var-stroke-width: var(--header-top-icons-stroke-width, 2);
--var-stroke: var(--header-top-icons-stroke, #FF6800);
--var-fill: var(--header-top-icons-fill, transparent);
}
/* ==========================================================================
ФАЙЛ: components/_header-bottom.scss
НАЗНАЧЕНИЕ: Нижняя строка шапки (logo + sq + catalog + search + socials + cart).
ОТВЕТСТВЕННОСТЬ:
- Логотип
- Кнопка каталога (иконка + текст)
- Поле поиска
- Соцсети
- Корзина с badge
АДАПТИВНОСТЬ:
- @container header-row-2 — скрытие соцсетей при нехватке места
- На мобильном упрощается до logo + search + hamburger
========================================================================== */
.header-row-2-full-width {
width: var(--header-bottom-full-width, 100%);
height: var(--header-bottom-height, 8.4375rem);
z-index: var(--header-bottom-z-index, 200);
background: var(--header-bottom-bg, #fdde8c) url("/local/templates/lentriNew/images/bg.svg") center/var(--header-bottom-bg-size, 1880px 85px) no-repeat;
box-shadow: var(--header-bottom-shadow, 0 4px 10px rgba(0, 0, 0, 0.3));
}
@media (min-width: 56.25rem) {
.header-row-2-full-width {
height: var(--header-bottom-height-desktop, 5.3125rem);
}
}
.header-row-2 {
display: var(--header-bottom-row-display, grid);
gap: var(--header-bottom-row-gap, 1.25rem);
padding: var(--header-bottom-row-padding, 0.9375rem 0);
height: var(--header-bottom-row-height, 100%);
align-items: var(--header-bottom-row-align-items, center);
container-type: var(--header-bottom-row-container-type, inline-size);
container-name: var(--header-bottom-row-container-name, header-row-2);
--form-height: var(--header-bottom-form-height, 36px);
grid-template-columns: var(--header-bottom-grid-columns, 13.71875rem auto auto minmax(15em, 1fr) auto 16.875rem);
grid-template-areas: "logo sq catalog search socials cart";
}
.area-logo {
grid-area: logo;
}
.area-sq {
grid-area: sq;
}
.area-catalog {
grid-area: catalog;
}
.area-search {
grid-area: search;
}
.area-socials {
grid-area: socials;
}
.area-user {
grid-area: user;
}
.area-cart {
grid-area: cart;
}
.area-hamburger {
grid-area: hamburger;
}
@container header-row-2 (max-width: 65em) {
.area-socials {
display: var(--header-bottom-socials-display, none) !important;
}
}
.area-search {
min-width: var(--header-bottom-search-min-width, 15em);
}
.area-logo {
display: var(--header-bottom-logo-display, flex);
align-items: var(--header-bottom-logo-align-items, center);
justify-content: var(--header-bottom-logo-justify-content, flex-start);
}
.header-logo-img {
width: var(--header-bottom-logo-img-width, 13.71875rem);
height: var(--header-bottom-logo-img-height, 3.4625rem);
object-fit: var(--header-bottom-logo-img-object-fit, contain);
}
.area-hamburger {
display: var(--header-bottom-hamburger-display, flex);
align-items: var(--header-bottom-hamburger-align-items, center);
justify-content: var(--header-bottom-hamburger-justify-content, center);
width: var(--header-bottom-hamburger-width, 2.75rem);
height: var(--header-bottom-hamburger-height, 2.75rem);
min-width: var(--header-bottom-hamburger-min-width, 2.75rem);
min-height: var(--header-bottom-hamburger-min-height, 2.75rem);
background: var(--header-bottom-hamburger-bg, #ffffff);
border-radius: var(--header-bottom-hamburger-radius, 0.5rem);
color: var(--header-bottom-hamburger-color, #333333);
cursor: var(--header-bottom-hamburger-cursor, pointer);
border: var(--header-bottom-hamburger-border, none);
transition: var(--header-bottom-hamburger-transition, background-color 0.2s ease);
}
.area-hamburger svg {
width: var(--header-bottom-hamburger-svg-width, 1.5rem);
height: var(--header-bottom-hamburger-svg-height, 1.5rem);
stroke: var(--header-bottom-hamburger-svg-stroke, currentColor);
}
.area-hamburger:hover {
background-color: var(--header-bottom-hamburger-hover-bg, #e0e0e0);
}
.area-hamburger:focus-visible {
outline: var(--header-bottom-hamburger-focus-outline, 2px solid #ff8c42);
outline-offset: var(--header-bottom-hamburger-focus-outline-offset, 2px);
}
.area-hamburger:focus:not(:focus-visible) {
outline: var(--header-bottom-hamburger-focus-none-outline, none);
}
.area-cart {
--form-height: var(--header-bottom-cart-form-height, 28px);
}
.area-cart__container {
display: flex;
flex-direction: row;
align-items: center;
}
.area-cart__container .header__cart {
width: 100%;
justify-content: left;
}
.area-cart__container-badge {
display: flex;
flex-direction: column;
padding-left: 1.25rem;
}
.area-catalog button, .area-sq button {
background: var(--header-bottom-button-bg, linear-gradient(180deg, #FFA35D 0%, #FF6800 100%));
}
.area-catalog .form-btn {
width: var(--header-bottom-form-btn-width, 160px);
}
.area-sq button {
padding: var(--header-bottom-sq-button-padding, 0 0);
}
.area-sq button svg {
--form-height: 30px;
}
@media (max-width: 56.1875rem) {
.header-row-2 {
grid-template-columns: var(--header-bottom-mobile-grid-columns, 1fr auto auto);
grid-template-areas: "logo . hamburger" "search search search";
gap: var(--header-bottom-mobile-gap, 0.625rem);
}
.area-sq, .area-catalog, .area-socials, .area-user, .area-cart {
display: var(--header-bottom-mobile-display, none) !important;
}
.area-hamburger {
display: var(--header-bottom-mobile-hamburger-display, flex) !important;
}
}
@media (min-width: 56.25rem) {
.area-hamburger {
display: var(--header-bottom-desktop-hamburger-display, none) !important;
}
}
/* ==========================================================================
ФАЙЛ: components/_header-mobile.scss
НАЗНАЧЕНИЕ: Оформление мобильного drawer БЕЗ изменения HTML.
СТИЛЬ: Аккуратный список, оранжевые акценты, вертикальное расположение.
========================================================================== */
.header-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 225;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
cursor: pointer;
}
@media (max-width: 56.1875rem) {
.header-row-1-full-width {
display: block !important;
position: fixed;
top: 0;
left: 0;
transform: translateX(-100%);
width: 85vw;
max-width: 21.875rem;
height: 100vh;
z-index: 250;
background: #ffffff;
overflow-y: auto;
transition: transform 0.3s ease;
will-change: transform;
box-shadow: 0.3125rem 0 1.25rem rgba(0, 0, 0, 0.1);
}
#toggle-mobile-menu:checked ~ .header-overlay,
#toggle-mobile-menu:checked ~ .page-wrapper .header-overlay,
#toggle-mobile-menu:checked ~ header .header-overlay {
display: block !important;
opacity: 1 !important;
pointer-events: auto !important;
}
#toggle-mobile-menu:checked ~ .header-row-1-full-width,
#toggle-mobile-menu:checked ~ .page-wrapper .header-row-1-full-width,
#toggle-mobile-menu:checked ~ header .header-row-1-full-width {
transform: translateX(0) !important;
}
.header-row-1 {
display: flex !important;
flex-direction: column;
gap: 0;
padding: 0;
min-height: auto;
}
.block-close-mobile {
display: flex !important;
position: absolute;
top: 1rem;
right: 1rem;
width: 2.5rem;
height: 2.5rem;
min-width: 2.5rem;
min-height: 2.5rem;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 270;
border-radius: 50%;
background: #f0f0f0;
transition: background-color 0.2s ease;
}
.block-close-mobile::before {
content: "✕" !important;
background: transparent !important;
color: #666666;
padding: 0 !important;
line-height: 1;
}
.block-close-mobile:hover {
background-color: #e0e0e0;
}
.area-location {
position: relative !important;
padding: 1.25rem 1.25rem 1rem 1.25rem;
border-bottom: 1px solid #e5e5e5;
}
.area-location .location-selector {
display: flex;
align-items: center;
gap: 0.5em;
background: transparent;
border: none;
cursor: pointer;
padding: 0.5em 0.8em;
border-radius: 0.5rem;
color: #333333;
}
.area-location .location-selector svg:first-child {
width: 1.2em;
height: 1.2em;
color: #ff8c42;
}
.area-location .location-selector .location-arrow {
width: 0.8em;
height: 0.8em;
transition: transform 0.2s ease;
}
.area-location .location-selector:hover {
background-color: #f0f0f0;
}
.area-location .location-dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
min-width: auto !important;
max-width: none !important;
max-height: 20rem !important;
z-index: 250 !important;
background: #ffffff;
border-radius: 0 0 0.75rem 0.75rem;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
margin-top: 0.5rem;
border: 1px solid #e5e5e5;
border-top: none;
}
.area-location .location-selector[aria-expanded=true] + .location-dropdown {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.area-menu-contact {
display: flex;
flex-direction: column;
gap: 0;
}
.area-menu {
min-width: auto !important;
padding: 0;
}
.area-menu .header__top-nav {
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.area-menu .header__top-link {
display: block;
padding: 1rem 1.25rem;
color: #333333;
text-decoration: none;
text-align: center;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s ease, color 0.2s ease;
cursor: pointer;
}
.area-menu .header__top-link:last-child {
border-bottom: none;
}
.area-menu .header__top-link:hover, .area-menu .header__top-link:active {
background-color: #f9f9f9;
color: #ff8c42;
}
.area-contact {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.5rem;
padding: 1.25rem;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.area-contact .contact-link {
display: block;
text-decoration: none;
transition: color 0.2s ease;
line-height: 1.3;
}
.area-contact .contact-link:hover {
color: #ff6b35;
}
.area-contact .contact-link--phone {
color: #ff8c42;
}
.area-contact .contact-link--email {
color: #666666;
}
.area-icons {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start;
gap: 1.5rem;
padding: 1.5rem 1.25rem 2rem 1.25rem;
}
.area-icons .header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: #333333;
transition: color 0.2s ease, transform 0.2s ease;
}
.area-icons .header-icon svg {
width: 1.5rem;
height: 1.5rem;
stroke: currentColor;
}
.area-icons .header-icon:hover {
color: #ff8c42;
transform: scale(1.1);
}
.header-row-2 {
grid-template-columns: 1fr auto auto !important;
grid-template-areas: "logo . hamburger" "search search search" !important;
gap: 0.625rem;
}
.area-sq, .area-catalog, .area-socials, .area-user, .area-cart {
display: none !important;
}
.area-hamburger {
display: flex !important;
}
}
@media (min-width: 56.25rem) {
.header-row-1 {
display: grid !important;
}
.block-close-mobile,
.header-overlay,
.area-hamburger {
display: none !important;
}
}
/* ==========================================================================
ФАЙЛ: components/_footer.scss
НАЗНАЧЕНИЕ: Футер (2 секции) + мобильная нижняя панель.
СТРУКТУРА HTML:
АДАПТИВНОСТЬ:
- @media (min-width: 56.3125rem) — 4 колонки
- @media (max-width: 56.25rem) — 2 колонки
- @media (max-width: 37.5rem) — 1 колонка
========================================================================== */
.footer-full-width {
width: 100%;
}
.footer-top-full-width {
width: 100%;
padding: 2.5rem 0;
background: #f0f0f0;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.875rem;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 0.9375rem;
}
.footer-bottom-full-width {
width: 100%;
padding: 1.25rem 0;
background: #000000;
}
@media (max-width: 56.25rem) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 37.5rem) {
.footer-grid {
grid-template-columns: 1fr;
}
.footer-top-full-width {
padding: 1.875rem 0;
}
}
.block-footer-copyright {
background: transparent;
min-height: 1.875rem;
}
.block-footer-copyright::before {
background: transparent;
color: #ffffff;
font-size: 0.875rem;
white-space: normal;
}
.mobile-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 4.375rem;
background: #ffffff;
border-top: 1px solid #e0e0e0;
display: grid;
grid-template-columns: repeat(4, 1fr);
z-index: 900;
box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}
@media (min-width: 56.25rem) {
.mobile-bottom-nav {
display: none;
}
}
.mobile-bottom-nav > .test-block {
border-radius: 0;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #ecf0f1;
cursor: pointer;
transition: background-color 0.2s ease;
}
.mobile-bottom-nav > .test-block:hover {
background: #dfe6e9;
}
.mobile-bottom-nav > .test-block[data-label=Каталог] {
background: linear-gradient(180deg, #FFA35D 0%, #FF6800 100%);
}
.mobile-bottom-nav > .test-block[data-label=Каталог]::before {
color: #ffffff;
background: rgba(0, 0, 0, 0.2);
}
.mobile-bottom-nav > .test-block[data-label=Каталог]:hover {
background: linear-gradient(180deg, #FF8C42 0%, #FF6800 100%);
}
.mobile-bottom-nav > .test-block::before {
background: rgba(44, 62, 80, 0.1);
color: #2c3e50;
}
.block-footer-title {
font-size: 20px;
font-weight: 700;
padding-bottom: 20px;
line-height: 21px;
}
/* ==========================================================================
ФАЙЛ: components/_forms.scss
НАЗНАЧЕНИЕ: Стандартные инпуты, кнопки, чекбоксы.
ПРИНЦИПЫ:
- Размеры в em (масштабируются от font-size родителя).
- Цвета через переменные.
========================================================================== */
.form-input {
width: 100%;
height: var(--form-height, 2.5rem);
padding: 0 1em;
border-radius: 0.5rem;
border: 1px solid #d1d1d1;
background-color: #f2f2f2;
outline: none;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.form-input::placeholder {
color: #666666;
}
.form-input:focus {
border-color: #ff8c42;
background-color: #ffffff;
}
.form-btn {
--var-stroke: white;
--var-fill: transparent;
--var-stroke-width: 1.1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
height: var(--form-height, 2.5rem);
padding: 0 1rem;
border-radius: 10px;
border: none;
background-color: #ff8c42;
background: linear-gradient(180deg, #FFA35D 0%, #FF6800 100%);
color: #ffffff;
font-weight: 600;
font-size: var(--form-font-size, 1rem);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.form-btn:hover {
background-color: #ff6b35;
}
.form-btn:active {
transform: scale(0.98);
}
.form-btn svg {
width: 1.2em;
height: 1.2em;
fill: currentColor;
}
.contact-block {
container-type: inline-size;
container-name: contact-block;
display: flex;
flex-direction: column;
gap: 1em;
}
.contact-block .contact-block__title {
margin: 0;
font-size: 1.2em;
}
.contact-block .contact-block__phone {
display: inline-block;
font-size: 1.1em;
font-weight: 700;
color: #2ecc71;
text-decoration: none;
}
.contact-block .contact-block__phone:hover {
text-decoration: underline;
}
@container contact-block (min-width: 25em) {
.contact-block .contact-block__actions {
display: flex;
align-items: center;
gap: 1em;
}
.contact-block .contact-block__actions .form-btn {
width: auto;
min-width: 10em;
}
}
.form-checkbox-wrapper {
display: flex;
align-items: flex-start;
gap: 0.75em;
margin: 1em 0;
font-size: 0.9em;
color: #333333;
}
.form-checkbox-wrapper input[type=checkbox] {
width: 1.2em;
height: 1.2em;
margin-top: 0.15em;
flex-shrink: 0;
cursor: pointer;
}
.form-checkbox-wrapper a {
color: #ff8c42;
text-decoration: underline;
}
.search-page form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
margin-bottom: 1.5em;
}
.search-page form input[type=text][name=q] {
flex: 1;
min-width: 12.5rem;
height: 2.5rem;
padding: 0 1em;
border-radius: 0.5rem;
border: 1px solid #d1d1d1;
background-color: #f2f2f2;
font-size: 1em;
outline: none;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.search-page form input[type=text][name=q]:focus {
border-color: #ff8c42;
background-color: #ffffff;
}
.search-page form select[name=where] {
height: 2.5rem;
padding: 0 1em;
border-radius: 0.5rem;
border: 1px solid #d1d1d1;
background-color: #ffffff;
font-size: 1em;
cursor: pointer;
}
.search-page form input[type=submit][value=Искать] {
height: 2.5rem;
padding: 0 1.5rem;
border-radius: 10px;
border: none;
background-color: #ff8c42;
color: #ffffff;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.search-page form input[type=submit][value=Искать]:hover {
background-color: #ff6b35;
}
.search-page form input[type=submit][value=Искать]:active {
transform: scale(0.98);
}
.search-page .notetext {
display: block;
padding: 1em;
background-color: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 0.5rem;
color: #856404;
font-size: 1em;
text-align: center;
font-family: inherit;
}
.search-page .search-result {
margin-bottom: 1.5em;
padding-bottom: 1.5em;
border-bottom: 1px solid #eee;
}
.search-page .search-result:last-child {
border-bottom: none;
}
.search-page .search-result .search-title {
font-size: 1.1em;
font-weight: 500;
margin-bottom: 0.5em;
}
.search-page .search-result .search-title a {
color: #ff8c42;
text-decoration: none;
}
.search-page .search-result .search-title a:hover {
text-decoration: underline;
}
.search-page .search-result .search-body {
font-size: 0.95em;
color: #666666;
line-height: 1.5;
}
.form-checkbox-wrapper {
display: flex;
align-items: flex-start;
gap: 0.75em;
margin: 1em 0;
font-size: 0.9em;
color: #333333;
position: relative;
padding-left: 40px;
cursor: pointer;
}
.form-checkbox-wrapper input[type=checkbox] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
cursor: pointer;
}
.form-checkbox-wrapper input[type=checkbox]:checked + span::before {
background-color: #ff8c42;
border-color: #ff8c42;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 18px;
background-position: center;
background-repeat: no-repeat;
}
.form-checkbox-wrapper input[type=checkbox]:focus-visible + span::before {
outline: 2px solid #ff8c42;
outline-offset: 2px;
}
.form-checkbox-wrapper span {
position: relative;
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #2c3439;
cursor: pointer;
}
.form-checkbox-wrapper span::before {
position: absolute;
top: 0;
left: -40px;
width: 30px;
height: 30px;
content: "";
background-color: #f2f2f2;
border: 1px solid #b0b0b0;
border-radius: 10px;
transition: all 0.2s ease;
flex-shrink: 0;
}
.form-checkbox-wrapper span::after {
content: "*";
color: #d32f2f;
font-weight: 700;
margin-right: 0.25em;
}
.form-checkbox-wrapper span a {
color: inherit;
text-decoration: underline;
text-decoration-color: #b0b0b0;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.form-checkbox-wrapper span a:hover {
color: #ff8c42;
text-decoration-color: #ff8c42;
}
.form-checkbox-wrapper:hover input[type=checkbox] + span::before {
border-color: #ff8c42;
}
.form-success--help {
color: #2ecc71;
margin-bottom: 1rem;
font-weight: 600;
}
.form-errors--help {
color: #e74c3c;
margin-bottom: 1rem;
}
.form-btn--secondary {
margin-top: 1em;
width: auto;
background: #f0f0f0;
color: #333333;
}
/* ==========================================================================
ФАЙЛ: components/_search.scss
НАЗНАЧЕНИЕ: Поле поиска с кнопкой внутри + Bitrix Dropdown.
ПРИНЦИПЫ:
- Контейнер для @container (адаптация внутренней структуры).
- Размеры в em.
========================================================================== */
.form-search {
container-type: inline-size;
container-name: search-form;
position: relative;
}
.form-search .form-search__input {
width: 100%;
height: var(--form-height, 2.5em);
padding: 0 3em 0 1em;
border-radius: 0.5rem;
border: 1px solid #d1d1d1;
background-color: #f2f2f2;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.form-search .form-search__input::placeholder {
color: #666666;
}
.form-search .form-search__input:focus {
outline: none;
border-color: #ff8c42;
background-color: #ffffff;
}
.form-search .form-search__btn {
position: absolute;
right: 0.5em;
top: 50%;
transform: translateY(-50%);
width: 2em;
height: 2em;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
color: #666666;
transition: color 0.2s ease;
}
.form-search .form-search__btn:hover {
color: #ff8c42;
}
.form-search .form-search__btn svg {
width: 1.2em;
height: 1.2em;
fill: currentColor;
}
.form-search .title-search-result {
display: none !important;
}
.form-search .title-search-result.search-dropdown--active {
display: block !important;
}
.form-search .search-dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
margin-top: 0.5em;
z-index: 1000;
background-color: #ffffff;
border: 1px solid #d1d1d1;
border-radius: 0.5rem;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
overflow: hidden;
max-height: 70vh;
overflow-y: auto;
}
.form-search .search-dropdown .title-search-item {
border-bottom: 1px solid #f0f0f0;
}
.form-search .search-dropdown .title-search-item:last-child {
border-bottom: none;
}
.form-search .search-dropdown .title-search-item a {
display: flex;
align-items: center;
padding: 0.75em 1em;
text-decoration: none;
color: #333333;
font-size: 0.9em;
transition: background-color 0.2s ease;
}
.form-search .search-dropdown .title-search-item a:hover {
background-color: #f9f9f9;
color: #ff8c42;
}
.form-search .search-dropdown .title-search-all {
display: block;
padding: 0.75em 1em;
text-align: center;
font-size: 0.85em;
font-weight: 600;
color: #ff8c42;
text-decoration: none;
background-color: #fafafa;
border-top: 1px solid #f0f0f0;
}
.form-search .search-dropdown .title-search-all:hover {
background-color: #f0f0f0;
text-decoration: underline;
}
.form-search .search-dropdown .title-search-nothing {
padding: 1em;
text-align: center;
color: #666666;
font-size: 0.9em;
}
/* ==========================================================================
ФАЙЛ: components/_socials.scss
НАЗНАЧЕНИЕ: Контейнер соцсетей и универсальные круглые кнопки-иконки.
ИСПОЛЬЗУЕТСЯ В: шапке, футере, блоке контактов, корзине.
========================================================================== */
.social-links {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 2rem;
margin: 0 1rem;
align-items: center;
--form-height: 28px;
--var-stroke-width:3;
}
.social-link,
.header-icon,
.header__cart,
.area-sq .form-btn {
width: var(--form-height, 3.5em);
height: var(--form-height, 3.5em);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #333333;
text-decoration: none;
border: none;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.social-link:hover,
.header-icon:hover,
.header__cart:hover,
.area-sq .form-btn:hover {
color: #ff8c42;
}
.social-link svg,
.header-icon svg,
.header__cart svg,
.area-sq .form-btn svg {
width: var(--form-height, 2.5em);
height: var(--form-height, 2.5em);
display: block;
fill: var(--var-fill, transparent);
stroke: var(--var-stroke, currentColor);
stroke-width: var(--var-stroke-width, 2);
stroke-linecap: round;
stroke-linejoin: round;
}
.area-cart__container-badge {
display: inline-grid;
grid-template-columns: auto auto;
column-gap: 6px;
justify-items: end;
}
.area-cart__container-badge .header__cart-badge {
display: contents;
font-variant-numeric: tabular-nums;
}
.area-cart__container-badge .header__cart-badge::after {
content: attr(data-unit);
justify-self: start;
}
.icon-stroke {
fill: var(--var-fill, none);
stroke: var(--var-stroke, currentColor);
stroke-width: var(--var-stroke-width, 2);
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-fill {
fill: var(--var-fill, currentColor);
stroke: var(--var-stroke, none);
}
svg use {
fill: inherit;
stroke: inherit;
}
.social-link svg use,
.header-icon svg use,
.header__cart svg use,
.area-sq .form-btn svg use {
fill: var(--var-fill, none);
stroke: var(--var-stroke, currentColor);
stroke-width: var(--var-stroke-width, 2);
stroke-linecap: round;
stroke-linejoin: round;
}
/* ==========================================================================
ФАЙЛ: components/_catalog-tiles.scss
НАЗНАЧЕНИЕ: Плитки категорий каталога на главной странице.
ОСОБЕННОСТИ:
- Скругления 45px 11.23px 45px 11.23px (специфичный дизайн).
- Подложка под текстом растягивается на всю ширину через margin: 0 -36px.
- Картинка увеличивается при наведении (scale 1.2).
========================================================================== */
.main-catalog__title {
margin: var(--catalog-tiles-title-margin, 0);
color: var(--catalog-tiles-title-color, #333333);
}
.main-catalog-elem {
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
border-radius: var(--catalog-tiles-border-radius, 2.8125rem 0.699375rem 2.8125rem 0.699375rem);
padding: var(--catalog-tiles-padding, 2.25rem);
width: var(--catalog-tiles-width, 100%);
height: var(--catalog-tiles-height, 15.5rem);
cursor: pointer;
text-decoration: none;
background-color: var(--catalog-tiles-bg-color, #f0f0f0);
}
.main-catalog-elem__title {
position: relative;
z-index: 2;
margin: var(--catalog-tiles-title-margin-inner, 0 -2.25rem);
padding: var(--catalog-tiles-title-padding, 0.4375rem 2.25rem);
background-color: var(--catalog-tiles-title-bg-color, rgba(255, 255, 255, 0.6));
font-weight: var(--catalog-tiles-title-font-weight, 600);
line-height: var(--catalog-tiles-title-line-height, 1.95rem);
color: var(--catalog-tiles-title-color-inner, #000000);
min-height: var(--catalog-tiles-title-min-height, 2.8125rem);
display: flex;
align-items: center;
}
.main-catalog-elem img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
z-index: 1;
transform: scale(var(--catalog-tiles-img-scale, 1));
transition: transform var(--catalog-tiles-img-transition, 0.5s ease);
}
.main-catalog-elem:hover img {
transform: scale(var(--catalog-tiles-img-hover-scale, 1.2));
}
.catalog-tiles__error {
color: #e74c3c;
padding: 1rem;
border: 1px solid #e74c3c;
border-radius: 0.5rem;
background-color: #fdf2f2;
text-align: center;
font-weight: 500;
}
/* ==========================================================================
ФАЙЛ: components/_catalog-section.scss
НАЗНАЧЕНИЕ: Страница раздела каталога + шахматная раскладка подразделов.
СТРУКТУРА:
- .catalog-section__title — H1 заголовок
- .catalog-section__description — описание раздела
- .subcategories-chess — шахматная сетка подразделов
- .subcategory-card — карточка подраздела (нечётная/чётная)
- .breadcrumbs — хлебные крошки
========================================================================== */
.catalog-section__title {
font-size: 2.5em;
font-weight: 700;
margin: 0 0 1em 0;
padding: 0 1rem;
color: #333333;
}
.catalog-section__description {
font-size: 1.1em;
line-height: 1.6;
color: #666666;
}
.catalog-section__description h2, .catalog-section__description h3, .catalog-section__description h4 {
margin-top: 1.5em;
margin-bottom: 0.75em;
}
.catalog-section__description p {
margin-bottom: 1rem;
}
.subcategories-chess {
display: grid;
gap: 3em;
width: 100%;
}
.subcategory-card {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2.5em;
align-items: center;
text-decoration: none;
color: inherit;
}
.subcategory-card--even {
grid-template-columns: 2fr 1fr;
}
.subcategory-card__image {
grid-column: 1;
display: block;
border-radius: 1em;
overflow: hidden;
}
.subcategory-card--even .subcategory-card__image {
grid-column: 2;
}
.subcategory-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4/3;
transition: transform 0.4s ease;
display: block;
}
.subcategory-card__image:hover img {
transform: scale(1.05);
}
.subcategory-card__image-placeholder {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
border-radius: 1em;
}
.subcategory-card__content {
grid-column: 2;
}
.subcategory-card--even .subcategory-card__content {
grid-column: 1;
}
.subcategory-card__title {
font-size: 1.75em;
font-weight: 700;
margin: 0 0 1em 0;
line-height: 1.2;
}
.subcategory-card__title a {
color: #333333;
text-decoration: none;
transition: color 0.2s ease;
}
.subcategory-card__title a:hover {
color: #ff8c42;
}
.subcategory-card__text {
font-size: 1em;
line-height: 1.6;
color: #666666;
margin: 0;
}
.subcategory-card__text p {
margin-bottom: 1rem;
}
.subcategory-card__text p:last-child {
margin-bottom: 0;
}
@media (max-width: 48rem) {
.subcategory-card,
.subcategory-card--even {
grid-template-columns: 1fr;
gap: 1.5em;
}
.subcategory-card__image,
.subcategory-card--even .subcategory-card__image {
grid-column: 1;
}
.subcategory-card__content,
.subcategory-card--even .subcategory-card__content {
grid-column: 1;
}
.subcategory-card__title {
font-size: 1.4em;
}
}
.breadcrumbs {
font-size: 0.9em;
color: #666666;
}
.breadcrumbs a {
color: #ff8c42;
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs span {
color: #666666;
}
/* ==========================================================================
ФАЙЛ: components/_sidebar-menu.scss
НАЗНАЧЕНИЕ: Древовидное меню каталога в сайдбаре.
ПРАВИЛА:
- 1 уровень: uppercase, bold.
- 2 уровень: обычный вес.
- 3+ уровни: увеличенный отступ.
- 1 и 2 уровни открыты по умолчанию (is-open).
========================================================================== */
.sidebar-menu {
font-size: 1rem;
}
.sidebar-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-menu__item {
margin: 0;
padding: 0;
}
.sidebar-menu__item.has-childs > .sidebar-menu__row {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar-menu__item.is-active > .sidebar-menu__row > .sidebar-menu__link {
color: #ff8c42;
font-weight: 700;
}
.sidebar-menu__row {
display: flex;
align-items: center;
padding: 0.6em 0.75em;
border-radius: 0.5rem;
transition: background-color 0.2s ease;
cursor: pointer;
}
.sidebar-menu__row:hover {
background-color: #f0f0f0;
}
.sidebar-menu__link {
flex: 1;
text-decoration: none;
color: #333333;
transition: color 0.2s ease;
}
.sidebar-menu__link:hover {
color: #ff8c42;
}
.sidebar-menu__arrow {
background: none;
border: none;
cursor: pointer;
padding: 0.25em;
color: #666666;
transition: transform 0.3s ease, color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transform: rotate(180deg);
}
.sidebar-menu__arrow svg {
width: 0.75rem;
height: 0.75rem;
stroke: currentColor;
}
.sidebar-menu__arrow:hover {
color: #ff8c42;
}
.is-open > .sidebar-menu__row .sidebar-menu__arrow {
transform: rotate(0deg);
}
.sidebar-menu__sublist {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.sidebar-menu__sublist.is-open {
max-height: 125rem;
}
.sidebar-menu .depth-level-1 > .sidebar-menu__row {
padding-left: 0.75em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03125rem;
}
.sidebar-menu .depth-level-2 > .sidebar-menu__row {
padding-left: 1.5em;
font-weight: 500;
font-size: 0.9em;
text-transform: none;
}
.sidebar-menu .depth-level-3 > .sidebar-menu__row {
padding-left: 2.5em;
font-size: 0.8em;
}
.sidebar-menu .depth-level-4 > .sidebar-menu__row {
padding-left: 3.5em;
font-size: 0.7em;
}
/* ==========================================================================
ФАЙЛ: components/_catalog-dropdown.scss
НАЗНАЧЕНИЕ: Выпадающее меню каталога (виртуальное aside).
ПРАВИЛА:
- Показывается при клике на кнопку "КАТАЛОГ" в шапке
- На мобильной версии - при клике на кнопку "Каталог" внизу
- Многоуровневое меню с аккордеоном
========================================================================== */
.catalog-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 299;
opacity: 0;
transition: opacity 0.3s ease;
}
.catalog-overlay.is-active {
display: block;
opacity: 1;
}
.catalog-aside {
position: fixed;
top: 0;
right: 0;
width: 20rem;
max-width: 85vw;
height: 100vh;
background: #ffffff;
z-index: 300;
transform: translateX(100%);
transition: transform 0.3s ease;
overflow-y: auto;
overflow-x: hidden;
box-shadow: -0.3125rem 0 1.25rem rgba(0, 0, 0, 0.15);
padding: 1.5rem;
}
.catalog-aside.is-active {
transform: translateX(0);
}
.catalog-aside__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e5e5;
}
.catalog-aside__title {
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
color: #333333;
margin: 0;
}
.catalog-aside__close {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
min-width: 2.5rem;
min-height: 2.5rem;
background: #f0f0f0;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.2s ease;
color: #666666;
font-size: 1.25rem;
line-height: 1;
}
.catalog-aside__close:hover {
background-color: #e0e0e0;
}
.catalog-aside__close::before {
content: "✕";
}
.catalog-aside__content .sidebar-menu {
font-size: 1rem;
}
.catalog-aside__content .sidebar-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.catalog-aside__content .sidebar-menu__item {
margin: 0;
padding: 0;
}
.catalog-aside__content .sidebar-menu__item.has-childs > .sidebar-menu__row {
display: flex;
align-items: center;
justify-content: space-between;
}
.catalog-aside__content .sidebar-menu__item.is-active > .sidebar-menu__row > .sidebar-menu__link {
color: #ff8c42;
font-weight: 700;
}
.catalog-aside__content .sidebar-menu__row {
display: flex;
align-items: center;
padding: 0.75em 0.5em;
border-radius: 0.5rem;
transition: background-color 0.2s ease;
cursor: pointer;
}
.catalog-aside__content .sidebar-menu__row:hover {
background-color: #f0f0f0;
}
.catalog-aside__content .sidebar-menu__link {
flex: 1;
text-decoration: none;
color: #333333;
transition: color 0.2s ease;
}
.catalog-aside__content .sidebar-menu__link:hover {
color: #ff8c42;
}
.catalog-aside__content .sidebar-menu__arrow {
background: none;
border: none;
cursor: pointer;
padding: 0.25em;
color: #666666;
transition: transform 0.3s ease, color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transform: rotate(180deg);
}
.catalog-aside__content .sidebar-menu__arrow svg {
width: 0.75rem;
height: 0.75rem;
stroke: currentColor;
}
.catalog-aside__content .sidebar-menu__arrow:hover {
color: #ff8c42;
}
.is-open > .sidebar-menu__row .catalog-aside__content .sidebar-menu__arrow {
transform: rotate(0deg);
}
.catalog-aside__content .sidebar-menu__sublist {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.catalog-aside__content .sidebar-menu__sublist.is-open {
max-height: 125rem;
}
.catalog-aside__content .sidebar-menu .depth-level-1 > .sidebar-menu__row {
padding-left: 0.5em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03125rem;
}
.catalog-aside__content .sidebar-menu .depth-level-2 > .sidebar-menu__row {
padding-left: 1.5em;
font-weight: 500;
font-size: 0.9em;
text-transform: none;
}
.catalog-aside__content .sidebar-menu .depth-level-3 > .sidebar-menu__row {
padding-left: 2.5em;
font-size: 0.8em;
}
.catalog-aside__content .sidebar-menu .depth-level-4 > .sidebar-menu__row {
padding-left: 3.5em;
font-size: 0.7em;
}
.catalog-aside__loader {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
color: #666666;
font-size: 0.9rem;
}
.catalog-aside__loader::before {
content: "";
display: inline-block;
width: 1.5rem;
height: 1.5rem;
border: 2px solid #e0e0e0;
border-top-color: #ff8c42;
border-radius: 50%;
margin-right: 0.75rem;
animation: catalog-loader-spin 0.8s linear infinite;
}
@keyframes catalog-loader-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 48rem) {
.catalog-aside {
width: 18rem;
}
}
@media (max-width: 56.1875rem) {
.catalog-aside {
width: 100%;
max-width: 100vw;
padding: 1.25rem;
}
.catalog-aside__header {
margin-bottom: 1rem;
padding-bottom: 0.75rem;
}
.catalog-aside__title {
font-size: 1.1rem;
}
}
/* ==========================================================================
ФАЙЛ: components/_slider.scss
НАЗНАЧЕНИЕ: Hero-слайдер (главный баннер).
ОСОБЕННОСТИ:
- Пропорции через aspect-ratio + CSS-переменные.
- Скругления применяются к .main-hero__slide.
- Стрелки и пагинация стилизованы под дизайн.
========================================================================== */
.main-hero {
--swiper-navigation-sides-offset: 0;
width: 100%;
position: relative;
overflow: hidden;
}
.main-hero__container {
width: 100%;
}
.main-hero__swiper {
width: 100%;
aspect-ratio: var(--hero-ar-mob-w)/var(--hero-ar-mob-h);
}
@media (min-width: 768px) {
.main-hero__swiper {
aspect-ratio: var(--hero-ar-md-w)/var(--hero-ar-md-h);
}
}
@media (min-width: 1200px) {
.main-hero__swiper {
aspect-ratio: var(--hero-ar-xl-w)/var(--hero-ar-xl-h);
}
}
@media (min-width: 1400px) {
.main-hero__swiper {
aspect-ratio: var(--hero-ar-xxl-w)/var(--hero-ar-xxl-h);
}
}
.main-hero__slide {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
border-radius: var(--hero-radius-mob-tl, 10px) var(--hero-radius-mob-tr, 10px) var(--hero-radius-mob-br, 10px) var(--hero-radius-mob-bl, 10px);
}
@media (min-width: 768px) {
.main-hero__slide {
border-radius: var(--hero-radius-md-tl, 5px) var(--hero-radius-md-tr, 60px) var(--hero-radius-md-br, 60px) var(--hero-radius-md-bl, 5px);
}
}
@media (min-width: 1200px) {
.main-hero__slide {
border-radius: var(--hero-radius-xl-tl, 8px) var(--hero-radius-xl-tr, 100px) var(--hero-radius-xl-br, 100px) var(--hero-radius-xl-bl, 8px);
}
}
@media (min-width: 1400px) {
.main-hero__slide {
border-radius: var(--hero-radius-xxl-tl, 10px) var(--hero-radius-xxl-tr, 120px) var(--hero-radius-xxl-br, 120px) var(--hero-radius-xxl-bl, 10px);
}
}
.main-hero__link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.main-hero__picture {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.main-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.main-hero__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 1.5em;
height: 5em;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #333333;
transition: all 0.2s ease;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}
.main-hero__nav svg {
width: 1.2em;
height: 1.2em;
stroke: currentColor;
}
.main-hero__nav:hover {
background: rgba(255, 255, 255, 0.95);
color: #ff8c42;
transform: translateY(-50%) scale(1.05);
}
.main-hero__nav:active {
transform: translateY(-50%) scale(0.95);
}
@container hero-slider (max-width: 37.5rem) {
.main-hero__nav {
display: none;
}
}
.main-hero__nav--prev {
left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0.75em;
border-bottom-right-radius: 0.75em;
}
.main-hero__nav--next {
right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0.75em;
border-bottom-left-radius: 0.75em;
}
.main-hero__pagination {
position: relative;
bottom: auto;
left: auto;
transform: none;
margin-top: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 0.6em;
padding: 0;
background: transparent;
backdrop-filter: none;
border-radius: 0;
width: 100%;
--swiper-pagination-top: -2rem;
}
.main-hero .swiper-pagination-bullet {
position: relative;
width: 0.5rem;
height: 0.5rem;
margin: 0 !important;
background: #d1d1d1;
opacity: 1;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
}
.main-hero .swiper-pagination-bullet:hover {
background: #b0b0b0;
}
.main-hero .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 2rem;
height: 0.5rem;
background: #d1d1d1;
border-radius: 0.25rem;
}
.main-hero .main-hero__progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background: #ff8c42;
border-radius: 0.125rem;
transition: width 0.1s linear;
}
/**
* ═══════════════════════════════════════════════════════════════
* basket.scss — стили корзины на CSS Grid (замена )
* ═══════════════════════════════════════════════════════════════
*
* Компилировать в: /local/templates/lentriNew/css/basket.css
* Подключить в header.php перед закрывающим :
*
*
* Структура HTML (без inline-стилей):
*
* .basket ← корневой контейнер всей корзины
* .basket__title ← заголовок "Корзина"
* .basket__empty ← блок пустой корзины
* .basket__empty-text ← текст "Ваша корзина пуста"
* .basket__empty-link ← ссылка "Продолжить покупки"
*
* .basket__header ← ШАПКА (скрыта на мобильном)
* .basket__col ← ячейка шапки
* .basket__col--photo ← колонка "Фото"
* .basket__col--name ← колонка "Товар"
* .basket__col--params ← колонка "Параметры"
* .basket__col--price ← колонка "Цена"
* .basket__col--qty ← колонка "Количество"
* .basket__col--sum ← колонка "Сумма"
* .basket__col--actions ← пустая колонка под кнопку удалить
*
* .basket__body ← ТЕЛО — список товаров
* .basket__item ← одна строка/карточка товара
* .basket__cell ← ячейка внутри строки
* .basket__cell--photo ← фото товара (80×80)
* .basket__link ← ссылка-обёртка фото
* .basket__img ← ![]()
или placeholder
* .basket__cell--name ← название товара
* .basket__link--name ← ссылка на товар
* .basket__name-text ← текст названия (если нет ссылки)
* .basket__cell--params ← параметры (размеры, цвет)
* .basket__params ← flex-контейнер параметров
* .basket__param ← один параметр (10 мм, 50 м)
* .basket__param--empty ← прочерк "—" если параметров нет
* .basket__cell--price ← цена за единицу
* .basket__mob-label ← мобильная метка "Цена:"
* .basket__price ← собственно цена
* .basket__cell--qty ← количество
* .basket__mob-label ← мобильная етка "Количество:"
* .basket__counter ← обёртка счётчика
* .counter ← БЭМ-блок счётчика
* .counter__btn ← кнопка +/-
* .counter__btn--dec← минус
* .counter__btn--inc← плюс
* .counter__input ← поле ввода количества
* .basket__cell--sum ← сумма по строке
* .basket__mob-label ← мобильная метка "Сумма:"
* .basket__sum ← сумма (жирный текст)
* .basket__cell--actions ← кнопка удалить
* .basket__remove ← кнопка «корзина» с SVG-иконкой
*
* .basket__footer ← ПОДВАЛ
* .basket__total ← строка итого
* .basket__total-label ← "Итого:"
* .basket__total-sum ← общая сумма
* .basket__bottom ← блок кнопок
* .basket__continue ← ссылка "← Продолжить покупки"
* .basket__checkout ← кнопка "Оформить заказ"
*/
.basket {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
color: #333;
}
.basket__title {
font-size: 1.75rem;
font-weight: 600;
margin: 0 0 1.5rem;
}
.basket__empty {
text-align: center;
padding: 3rem 1rem;
}
.basket__empty-text {
font-size: 1.1rem;
color: #666;
margin: 0 0 1rem;
}
.basket__empty-link {
color: #0066cc;
text-decoration: none;
}
.basket__empty-link:hover {
text-decoration: underline;
}
.basket__header {
display: grid;
grid-template-columns: 90px 2fr 1.5fr 120px 140px 120px 50px;
gap: 1rem;
padding: 0.75rem 1rem;
border-bottom: 2px solid #ddd;
font-weight: 600;
font-size: 0.9rem;
color: #666;
}
@media (max-width: 1024px) {
.basket__header {
grid-template-columns: 70px 2fr 1fr 100px 120px 100px 40px;
gap: 0.5rem;
font-size: 0.8rem;
}
}
@media (max-width: 768px) {
.basket__header {
display: none;
}
}
.basket__item {
display: grid;
grid-template-columns: 90px 2fr 1.5fr 120px 140px 120px 50px;
gap: 1rem;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #eee;
transition: background-color 0.15s ease;
}
.basket__item:hover {
background-color: #fafafa;
}
@media (max-width: 1024px) {
.basket__item {
grid-template-columns: 70px 2fr 1fr 100px 120px 100px 40px;
gap: 0.5rem;
padding: 0.75rem 0.5rem;
}
}
@media (max-width: 768px) {
.basket__item {
position: relative;
grid-template-columns: 80px 1fr;
grid-template-rows: auto auto auto;
grid-template-areas: "photo name" "photo params" "qty sum-price";
gap: 0.5rem 1rem;
padding: 1rem;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-bottom: 0.75rem;
background: #fff;
}
.basket__item .basket__cell {
padding: 0;
}
.basket__item .basket__cell--photo {
grid-area: photo;
align-self: start;
}
.basket__item .basket__cell--name {
grid-area: name;
align-self: start;
}
.basket__item .basket__cell--params {
grid-area: params;
}
.basket__item .basket__cell--qty {
grid-area: qty;
align-self: end;
}
.basket__item .basket__cell--price,
.basket__item .basket__cell--sum {
grid-area: sum-price;
justify-self: end;
text-align: right;
}
.basket__item .basket__cell--price {
margin-bottom: 0.25rem;
}
.basket__item .basket__cell--actions {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
}
.basket__cell--price {
text-align: right;
white-space: nowrap;
}
.basket__cell--qty {
text-align: center;
}
.basket__cell--sum {
text-align: right;
white-space: nowrap;
font-weight: 600;
}
.basket__cell--actions {
text-align: center;
}
.basket__img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
display: block;
background: #f5f5f5;
}
.basket__img--placeholder {
background: #eee;
}
@media (max-width: 768px) {
.basket__img {
width: 70px;
height: 70px;
}
}
.basket__link {
color: #333;
text-decoration: none;
transition: color 0.15s ease;
}
.basket__link:hover {
color: #0066cc;
}
.basket__link--name {
font-weight: 500;
line-height: 1.4;
}
.basket__name-text {
font-weight: 500;
line-height: 1.4;
}
.basket__params {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.75rem;
margin: 0;
font-size: 0.85rem;
color: #666;
}
@media (max-width: 768px) {
.basket__params {
flex-direction: column;
gap: 0.15rem;
}
}
.basket__param {
display: inline;
}
.basket__param:not(:last-child)::after {
content: "·";
margin-left: 0.25rem;
opacity: 0.4;
}
@media (max-width: 768px) {
.basket__param:not(:last-child)::after {
content: none;
}
}
.basket__param--empty {
color: #aaa;
}
.basket__param--color:not(:last-child)::after {
content: none;
}
.basket__color-circle {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.12);
vertical-align: middle;
flex-shrink: 0;
}
.basket__price {
font-size: 0.95rem;
}
.basket__sum {
font-size: 1rem;
font-weight: 600;
}
.basket__mob-label {
display: none;
font-size: 0.75rem;
color: #666;
margin-bottom: 0.25rem;
}
@media (max-width: 768px) {
.basket__mob-label {
display: block;
}
}
.counter {
display: inline-flex;
align-items: center;
border: 1px solid #e5e5e5;
border-radius: 4px;
overflow: hidden;
}
.counter__btn {
width: 32px;
height: 36px;
border: none;
background: #f8f8f8;
cursor: pointer;
font-size: 1rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
user-select: none;
}
.counter__btn:hover {
background: #eee;
}
.counter__btn:active {
background: #ddd;
}
@media (max-width: 768px) {
.counter__btn {
width: 28px;
height: 32px;
}
}
.counter__input {
width: 48px;
height: 36px;
border: none;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
text-align: center;
font-size: 0.9rem;
-moz-appearance: textfield;
}
.counter__input::-webkit-outer-spin-button, .counter__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
@media (max-width: 768px) {
.counter__input {
width: 42px;
height: 32px;
}
}
.basket__remove {
width: 36px;
height: 36px;
border: none;
background: transparent;
color: #aaa;
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.basket__remove:hover {
color: #dc3545;
background: rgba(220, 53, 69, 0.08);
}
.basket__remove svg {
display: block;
pointer-events: none;
}
.basket__footer {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid #ddd;
}
.basket__total {
text-align: right;
margin-bottom: 1.5rem;
font-size: 1.25rem;
}
@media (max-width: 768px) {
.basket__total {
text-align: center;
}
}
.basket__total-label {
font-weight: 400;
color: #666;
margin-right: 0.5rem;
}
.basket__total-sum {
font-weight: 700;
font-size: 1.5rem;
}
.basket__bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
@media (max-width: 768px) {
.basket__bottom {
flex-direction: column-reverse;
align-items: stretch;
}
}
.basket__continue {
color: #0066cc;
text-decoration: none;
font-size: 0.95rem;
transition: opacity 0.15s ease;
}
.basket__continue:hover {
opacity: 0.8;
text-decoration: underline;
}
@media (max-width: 768px) {
.basket__continue {
text-align: center;
padding: 0.75rem;
}
}
.basket__checkout {
background: #0066cc;
color: #fff;
border: none;
padding: 1rem 2.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s ease;
}
.basket__checkout:hover {
background: #0052a3;
}
@media (max-width: 768px) {
.basket__checkout {
width: 100%;
padding: 1rem;
}
}
/* ==========================================================================
ФАЙЛ: components/_product-card.scss
НАЗНАЧЕНИЕ: Универсальная карточка товара.
ИСПОЛЬЗУЕТСЯ В: каталоге, слайдерах табов, рекомендациях ("С этим покупают").
ВХОДНЫЕ ДАННЫЕ: массив $product с ключами URL, NAME, ARTICLE, PRICE, UNIT,
IN_STOCK, PICTURE.
========================================================================== */
.product-card {
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-0.25rem);
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}
.product-card__img {
position: relative;
width: 100%;
aspect-ratio: 4/3;
border-radius: var(--product-card-img-radius, 1rem);
overflow: hidden;
margin-bottom: var(--product-card-img-margin-bottom, 1rem);
background: var(--product-card-img-bg, #f5f5f5);
}
.product-card__img img {
height: 100%;
object-fit: cover;
transition: transform var(--product-card-img-transition, 0.4s ease);
display: block;
}
.product-card__img-placeholder {
width: 100%;
height: 100%;
background: var(--product-card-placeholder-bg, linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%));
}
.product-card:hover .product-card__img img {
transform: scale(var(--product-card-img-hover-scale, 1.03));
}
.product-card__title {
margin: var(--product-card-title-margin, 0 0 0.75rem 0);
line-height: var(--product-card-title-line-height, 1.3);
color: var(--product-card-title-color, #000000);
}
.product-card__info {
display: grid;
grid-template-areas: "art nal" "price link" "measurement link";
gap: var(--product-card-info-gap, 0.25rem 0.5rem);
align-items: center;
}
.product-card__art {
grid-area: art;
color: var(--product-card-art-color, #666666);
}
.product-card__stock {
grid-area: nal;
color: var(--product-card-stock-color, #2ecc71);
justify-self: end;
font-weight: var(--product-card-stock-font-weight, 500);
}
.product-card__price {
grid-area: price;
font-weight: var(--product-card-price-font-weight, 700);
color: var(--product-card-price-color, #000000);
line-height: var(--product-card-price-line-height, 1.1);
}
.product-card__unit {
grid-area: measurement;
color: var(--product-card-unit-color, #666666);
}
.product-card__action {
grid-area: link;
justify-self: end;
align-self: center;
}
.product-card__action button {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--product-card-button-radius, 0.75rem);
color: var(--product-card-button-color, #ff8c42);
border: var(--product-card-button-border, 0.1875rem solid #ff8c42);
background: var(--product-card-button-bg, transparent);
font-weight: var(--product-card-button-font-weight, 600);
font-size: var(--product-card-button-font-size, 1rem);
line-height: var(--product-card-button-line-height, 1.2);
height: var(--product-card-button-height, 2.75rem);
padding: var(--product-card-button-padding, 0 1rem);
cursor: pointer;
transition: all var(--product-card-button-transition, 0.3s ease);
white-space: nowrap;
}
.product-card__action button:hover {
color: var(--product-card-button-hover-color, #ffffff);
background-color: var(--product-card-button-hover-bg, #ff6b35);
border-color: var(--product-card-button-hover-border-color, #ff6b35);
}
/* ==========================================================================
Селектор вариантов в карточке виртуального товара (цвет/размер)
========================================================================== */
.variant-selector-card {
position: absolute;
top: 0.625rem;
right: 0.625rem;
z-index: 10;
}
.variant-selector-card__button {
width: 2.5rem;
height: 2.5rem;
border: 0.125rem solid #ffffff;
background: #ffffff;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.variant-selector-card__button:hover {
transform: scale(1.1);
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}
.variant-selector-card__button--color {
border-radius: 50%;
}
.variant-selector-card__button--size {
border-radius: 1rem;
background: #f5f5f5;
}
.variant-selector-card__circle {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: block;
}
.variant-selector-card__size-text {
font-size: 0.875rem;
font-weight: 600;
color: #000000;
}
.variant-selector-card__dropdown {
display: none;
position: absolute;
top: 3.125rem;
right: 0;
background: #ffffff;
border-radius: 1rem;
box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
min-width: 11.25rem;
max-height: 18.75rem;
overflow-y: auto;
z-index: 100;
}
.variant-selector-card__list {
list-style: none;
margin: 0;
padding: 0.5rem 0;
}
.variant-selector-card__item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.variant-selector-card__item:hover {
background-color: #f5f5f5;
}
.variant-selector-card__item-circle {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
border: 0.125rem solid #e0e0e0;
flex-shrink: 0;
}
.variant-selector-card__item-name {
font-size: 0.875rem;
color: #000000;
white-space: nowrap;
}
.variant-selector-card__item-size {
font-size: 0.875rem;
font-weight: 600;
color: #000000;
}
/* ==========================================================================
ФАЙЛ: components/_product-tabs.scss
НАЗНАЧЕНИЕ: Табы с торговыми предложениями (слайдеры).
СТРУКТУРА:
- .product-tabs__header — табы + общие стрелки в одной строке
- .product-tabs__content — панели табов
- .product-slider — слайдер внутри таба (без своих стрелок)
========================================================================== */
.product-tabs__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2em;
flex-direction: column;
align-items: baseline;
}
.product-tabs__nav {
display: flex;
gap: 2em;
flex: 1;
}
.product-tabs__tab {
background: none;
border: none;
padding: 0.75em 0;
font-size: 1.25rem;
font-weight: 500;
color: #666666;
cursor: pointer;
position: relative;
transition: color 0.3s ease;
}
.product-tabs__tab:hover {
color: #333333;
}
.product-tabs__tab.active {
color: #ff8c42;
}
.product-tabs__tab.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: #ff8c42;
}
.product-tabs__arrows {
display: flex;
gap: 0.5em;
margin-left: 1em;
}
.product-tabs__arrow {
width: 2.5em;
height: 2.5em;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e0e0e0;
border-radius: 0.5rem;
background: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
color: #666666;
}
.product-tabs__arrow svg {
width: 1.2em;
height: 1.2em;
stroke: currentColor;
}
.product-tabs__arrow:hover:not(.disabled) {
background: #ff8c42;
border-color: #ff8c42;
color: #ffffff;
}
.product-tabs__arrow.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.product-tabs__content {
position: relative;
}
.product-tab-pane {
display: none;
}
.product-tab-pane.active {
display: block;
}
.product-tab-pane__empty {
text-align: center;
padding: 3em;
color: #666666;
}
.product-slider .swiper-wrapper {
align-items: stretch;
height: auto;
}
@media (max-width: 48rem) {
.product-tabs__header {
flex-direction: column;
align-items: flex-start;
gap: 1em;
}
.product-tabs__nav {
gap: 1em;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.product-tabs__nav::-webkit-scrollbar {
display: none;
}
.product-tabs__nav {
width: 100%;
}
.product-tabs__tab {
white-space: nowrap;
}
.product-tabs__arrows {
align-self: flex-end;
margin-left: 0;
}
}
/* ==========================================================================
ТАБЫ ТОВАРА (Чистый CSS + Переменные)
========================================================================== */
.product-tabs__nav {
display: flex;
border-bottom: 2px solid var(--color-border, #e0e0e0);
margin-bottom: 1.5rem;
gap: 1rem;
}
.product-tabs__tab {
padding: 1rem 1.5rem;
background: none;
border: none;
border-bottom: 2px solid transparent; /* Прозрачная граница по умолчанию */
font-weight: 600;
cursor: pointer;
color: var(--color-text-muted, #666);
transition: color 0.2s ease, border-color 0.2s ease;
margin-bottom: -2px; /* Чтобы перекрывать линию контейнера */
}
.product-tabs__tab:hover {
color: var(--color-text, #333);
}
.product-tabs__tab {
/* Активное состояние управляется классом .is-active */
}
.product-tabs__tab.is-active {
color: var(--color-primary, #ff8c42);
border-bottom-color: var(--color-primary, #ff8c42);
}
.product-tabs__pane {
display: none; /* Скрыто по умолчанию */
line-height: 1.6;
color: var(--color-text, #555);
/* Показываем только активную панель */
}
.product-tabs__pane.is-active {
display: block;
}
.product-positions {
border: 1px solid #e5e5e5;
border-radius: 4px;
overflow: visible;
margin-bottom: 1rem;
}
.product-positions__header {
display: none;
}
.product-position {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: stretch;
gap: 0.75rem 1rem;
padding: 0.75rem;
border-bottom: 1px solid #f0f0f0;
}
.product-position:last-child {
border-bottom: none;
}
.product-position__cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-width: 0;
position: relative;
text-align: center;
}
.product-position__cell:has(.dim-dropdown.is-open) {
z-index: 20;
}
.product-position__cell[data-label]::before {
content: attr(data-label);
display: block;
min-height: 1.4em;
line-height: 1.4;
font-size: 0.65rem;
font-weight: 500;
color: #666;
margin-bottom: 0.3rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.product-position__cell:not([data-label]) {
padding-top: calc(1.4em + 0.3rem);
justify-content: center;
}
.product-position__cell--checkbox {
flex: 0 0 auto;
min-width: 40px;
padding-top: 0 !important;
order: -1;
appearance: auto;
}
.product-position__cell:nth-child(2), .product-position__cell:nth-child(3) {
flex: 1 1 calc(33.333% - 1rem);
min-width: 80px;
}
.product-position__cell:nth-child(4) {
flex: 0 0 auto;
min-width: 44px;
}
.product-position__cell:nth-child(5), .product-position__cell:nth-child(7) {
flex: 1 1 calc(25% - 1rem);
min-width: 70px;
}
.product-position__cell:nth-child(6) {
flex: 0 0 auto;
min-width: 120px;
}
.product-position__cell:nth-child(8) {
flex: 0 0 auto;
min-width: 44px;
}
.product-position__cell[data-label=Цена] .product-positions__price,
.product-position__cell[data-label=Цена] strong, .product-position__cell[data-label=Сумма] .product-positions__price,
.product-position__cell[data-label=Сумма] strong {
display: block;
line-height: 36px;
font-weight: 600;
}
.product-position__cell[data-label=Количество] {
align-items: center;
}
.product-position__cell[data-label=Цвет] .product-colors__circle {
margin: 0 auto;
}
.product-position__actions {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
@container product-detail (min-width: 29.5rem) {
.product-position {
display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 48px;
grid-template-areas: "check dim-w dim-l color action" "check price qty sum action";
gap: 0.75rem 1rem;
align-content: flex-start;
align-items: center;
justify-content: space-evenly;
}
.product-position__cell {
flex: none;
min-width: auto;
}
.product-position__cell:nth-child(1) {
grid-area: check;
}
.product-position__cell:nth-child(2) {
grid-area: dim-w;
}
.product-position__cell:nth-child(3) {
grid-area: dim-l;
}
.product-position__cell:nth-child(4) {
grid-area: color;
}
.product-position__cell:nth-child(5) {
grid-area: price;
}
.product-position__cell:nth-child(6) {
grid-area: qty;
}
.product-position__cell:nth-child(7) {
grid-area: sum;
}
.product-position__cell:nth-child(8) {
grid-area: action;
}
.product-position__actions {
grid-area: action;
align-self: center;
}
}
@container product-detail (min-width: 56.25rem) {
.product-positions {
display: grid;
grid-template-columns: 40px auto auto auto auto auto auto 44px;
gap: 0 1rem;
padding: 0;
}
.product-positions__header {
display: grid;
grid-template-columns: subgrid;
grid-column: 1/-1;
padding: 0.75rem 1rem;
background: #f8f8f8;
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
}
.product-positions__header-cell {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.8rem;
font-weight: 600;
color: #666;
line-height: 1.2;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
.product-position {
display: grid;
grid-template-columns: subgrid;
grid-column: 1/-1;
padding: 0.75rem 1rem;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.12s;
}
.product-position:hover {
background-color: #fafafa;
}
.product-position:last-child {
border-bottom: none;
}
.product-position {
grid-template-areas: none;
}
.product-position__cell {
display: flex;
align-items: center;
justify-content: center;
min-width: auto;
flex: none;
box-sizing: border-box;
grid-area: unset;
grid-row: 1;
}
.product-position__cell:nth-child(1) {
grid-column: 1;
}
.product-position__cell:nth-child(2) {
grid-column: 2;
}
.product-position__cell:nth-child(3) {
grid-column: 3;
}
.product-position__cell:nth-child(4) {
grid-column: 4;
}
.product-position__cell:nth-child(5) {
grid-column: 5;
}
.product-position__cell:nth-child(6) {
grid-column: 6;
}
.product-position__cell:nth-child(7) {
grid-column: 7;
}
.product-position__cell:nth-child(8) {
grid-column: 8;
}
.product-position__cell[data-label]::before {
display: none;
}
.product-position__cell:not([data-label]) {
padding-top: 0;
}
.product-position__cell[data-label=Цена] .product-positions__price,
.product-position__cell[data-label=Цена] strong, .product-position__cell[data-label=Сумма] .product-positions__price,
.product-position__cell[data-label=Сумма] strong {
line-height: 1.2;
}
.product-position__actions {
justify-content: center;
}
}
@container product-detail (min-width: 56.25rem) {
.product-positions--size-grouping {
grid-template-columns: 40px auto auto auto auto 44px;
}
.product-positions--size-grouping .product-positions__header {
grid-template-columns: subgrid;
grid-column: 1/-1;
}
.product-positions--size-grouping .product-position {
grid-template-columns: subgrid;
grid-column: 1/-1;
}
.product-positions--size-grouping .product-position__cell:nth-child(1) {
grid-column: 1;
}
.product-positions--size-grouping .product-position__cell:nth-child(2) {
grid-column: 2;
}
.product-positions--size-grouping .product-position__cell:nth-child(3) {
grid-column: 3;
}
.product-positions--size-grouping .product-position__cell:nth-child(4) {
grid-column: 4;
}
.product-positions--size-grouping .product-position__cell:nth-child(5) {
grid-column: 5;
}
.product-positions--size-grouping .product-position__cell:nth-child(6) {
grid-column: 6;
}
}
.product-positions__counter {
display: inline-flex;
align-items: center;
border: 1px solid #e5e5e5;
border-radius: 4px;
overflow: hidden;
height: 36px;
}
.product-positions__counter button,
.product-positions__counter .product-positions__btn {
width: 32px;
height: 100%;
border: none;
background: #f8f8f8;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
user-select: none;
}
.product-positions__counter button:hover,
.product-positions__counter .product-positions__btn:hover {
background: #eee;
}
.product-positions__counter button:active,
.product-positions__counter .product-positions__btn:active {
background: #ddd;
}
.product-positions__counter input,
.product-positions__counter .product-positions__input {
width: 48px;
height: 100%;
border: none;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
text-align: center;
font-size: 0.85rem;
-moz-appearance: textfield;
}
.product-positions__counter input::-webkit-outer-spin-button, .product-positions__counter input::-webkit-inner-spin-button,
.product-positions__counter .product-positions__input::-webkit-outer-spin-button,
.product-positions__counter .product-positions__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.product-positions__select {
width: 100%;
padding: 0.35rem 0.5rem;
border: 1px solid #e5e5e5;
border-radius: 4px;
font-size: 0.85rem;
background: #fff;
cursor: pointer;
height: 36px;
}
.product-positions__select:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.product-positions__select:focus {
outline: none;
border-color: #ff8c42;
}
.dim-dropdown {
position: relative;
width: 100%;
z-index: 10;
}
.dim-dropdown.is-disabled {
opacity: 0.5;
pointer-events: none;
}
.dim-dropdown.is-error .dim-dropdown__trigger {
border-color: #dc3545;
background: rgba(220, 53, 69, 0.04);
}
.dim-dropdown.is-error .dim-dropdown__error {
display: block;
}
.dim-dropdown.is-open {
z-index: 100;
}
.dim-dropdown__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.35rem 0.5rem;
border: 1px solid #e5e5e5;
border-radius: 4px;
font-size: 0.85rem;
background: #fff;
cursor: pointer;
height: 36px;
transition: border-color 0.12s;
}
.dim-dropdown__trigger:hover {
border-color: #ff8c42;
}
.dim-dropdown__trigger.is-open {
border-color: #ff8c42;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dim-dropdown__trigger .dim-dropdown__value {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dim-dropdown__trigger .dim-dropdown__arrow {
flex-shrink: 0;
width: 12px;
height: 12px;
margin-left: 0.5rem;
transition: transform 0.2s;
}
.dim-dropdown__trigger .dim-dropdown__arrow svg {
width: 100%;
height: 100%;
}
.dim-dropdown__trigger.is-open .dim-dropdown__arrow {
transform: rotate(180deg);
}
.dim-dropdown__panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
background: #fff;
border: 1px solid #ff8c42;
border-top: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
display: none;
}
.dim-dropdown__panel.is-open {
display: block;
}
.dim-dropdown__search {
padding: 0.5rem;
border-bottom: 1px solid #f0f0f0;
}
.dim-dropdown__search input {
width: 100%;
padding: 0.35rem 0.5rem;
border: 1px solid #e5e5e5;
border-radius: 4px;
font-size: 0.85rem;
box-sizing: border-box;
}
.dim-dropdown__search input:focus {
outline: none;
border-color: #ff8c42;
}
.dim-dropdown__search input::placeholder {
color: #999;
}
.dim-dropdown__list {
list-style: none;
margin: 0;
padding: 0;
max-height: 200px;
overflow-y: auto;
}
.dim-dropdown__list li {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.1s;
}
.dim-dropdown__list li:hover {
background: #f8f8f8;
}
.dim-dropdown__list li.is-active {
background: rgba(255, 140, 66, 0.08);
color: #ff8c42;
font-weight: 500;
}
.dim-dropdown__list li.is-hidden {
display: none;
}
.dim-dropdown__list li.dim-dropdown__custom-input {
padding: 0.5rem;
border-top: 1px solid #f0f0f0;
cursor: default;
}
.dim-dropdown__list li.dim-dropdown__custom-input:hover {
background: transparent;
}
.dim-dropdown__list li.dim-dropdown__custom-input input {
width: 100%;
padding: 0.35rem 0.5rem;
border: 1px solid #e5e5e5;
border-radius: 4px;
font-size: 0.85rem;
box-sizing: border-box;
}
.dim-dropdown__list li.dim-dropdown__custom-input input:focus {
outline: none;
border-color: #ff8c42;
}
.dim-dropdown__list li.dim-dropdown__custom-input input::placeholder {
color: #999;
}
.dim-dropdown__list li.dim-dropdown__custom-input.is-match {
background: rgba(255, 140, 66, 0.04);
}
.dim-dropdown__list li.dim-dropdown__custom-input.is-match input {
border-color: #ff8c42;
}
.dim-dropdown__list li.dim-dropdown__custom-input.is-invalid {
background: rgba(220, 53, 69, 0.04);
}
.dim-dropdown__list li.dim-dropdown__custom-input.is-invalid input {
border-color: #dc3545;
}
.dim-dropdown__error {
display: none;
margin-top: 0.25rem;
font-size: 0.75rem;
color: #dc3545;
line-height: 1.3;
}
.dim-dropdown__suffix {
margin-top: 0.25rem;
font-size: 0.75rem;
color: #666;
text-align: center;
}
.product-positions__btn {
width: 34px;
height: 34px;
border: none;
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: all 0.12s;
}
.product-positions__btn--add {
background: #ff8c42;
color: #fff;
}
.product-positions__btn--add:hover {
background: #ff6b35;
}
.product-positions__btn--add:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.product-positions__btn--remove {
background: transparent;
color: #aaa;
}
.product-positions__btn--remove:hover {
color: #dc3545;
background: rgba(220, 53, 69, 0.08);
}
.product-positions__add-row {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 1rem;
border: 1px dashed #e5e5e5;
border-radius: 4px;
background: transparent;
color: #ff8c42;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.12s;
margin-bottom: 1rem;
}
.product-positions__add-row:hover {
border-color: #ff8c42;
background: rgba(255, 140, 66, 0.04);
}
.product-positions__add-row:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.product-positions__add-row span {
font-size: 1.1rem;
line-height: 1;
}
.product-detail__header {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-detail__title {
order: -1;
margin: 0;
font-size: 1.7rem;
font-weight: 700;
line-height: 1.2;
}
.product-detail__meta {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 0.5rem 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e0e0e0;
}
.product-detail__article {
margin-right: auto;
color: #4d4d4d;
font-size: 17px;
font-weight: 500;
}
.product-detail__right {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 0.25rem;
}
.product-detail__price-base {
display: flex;
align-items: flex-end;
gap: 0.25rem;
color: #4d4d4d;
font-size: 17px;
}
.product-detail__stock {
color: #2ecc71;
font-weight: 500;
font-size: 0.875rem;
text-align: right;
}
.product-main-image {
width: 100%;
border-radius: 1rem;
}
.product-colors {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.product-colors__label {
font-size: 0.9rem;
color: #666;
font-weight: 500;
width: 100%;
margin-bottom: 0.25rem;
}
.product-colors__list {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.product-colors__item {
border-radius: 50%;
cursor: pointer;
width: 35px;
height: 35px;
padding: 0;
border: 1px solid #6a6a6a;
}
.product-colors__item:hover {
border-color: #ddd;
}
.product-colors__item.is-active {
border-color: #ff8c42;
border-width: 2px;
width: 37px;
height: 37px;
transition: border-color 0.12s;
}
.product-colors__circle {
width: 33px;
height: 33px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #e0e0e0;
background-color: var(--var-bg-color, transparent);
}
.product-colors__circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-variants {
margin-bottom: 1.5rem;
}
.product-variants__label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: #666;
margin-bottom: 0.5rem;
}
.product-variants__list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.product-variants__item {
cursor: pointer;
transition: all 0.12s;
}
.product-variants__square {
width: 35px;
height: 35px;
border-radius: 6px;
background-color: #f5f5f5;
border: 1px solid #6a6a6a;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
color: #333;
transition: border-color 0.12s;
}
.product-variants__square:hover {
border-color: #ddd;
}
.product-variants__item--size.is-active .product-variants__square {
border-color: #ff8c42;
border-width: 2px;
width: 37px;
height: 37px;
}
.product-position__cell--checkbox,
.product-positions__header-cell--checkbox {
width: 40px;
min-width: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.product-position__checkbox,
.product-positions__select-all {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #ff8c42;
margin: 0;
display: block;
appearance: auto;
}
.product-position__checkbox:disabled,
.product-positions__select-all:disabled {
cursor: not-allowed;
opacity: 0.4;
}
.product-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
padding-top: 1rem;
border-top: 1px solid #e5e5e5;
margin-top: 0.5rem;
}
.product-actions__total {
text-align: center;
font-size: 1.25rem;
font-weight: 600;
}
.product-actions__btn {
width: 100%;
max-width: 150px;
background: #ff8c42;
color: #fff;
border: none;
padding: 1rem;
font-size: 1rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: background 0.12s;
margin: auto;
}
.product-actions__btn:hover {
background: #ff6b35;
}
.product-actions__btn:disabled {
opacity: 0.6;
cursor: wait;
}
.product-main-grid {
container-type: inline-size;
container-name: product-detail;
--pd-grid-columns: 1fr;
--pd-grid-areas:
"gallery"
"header"
"colors"
"positions"
"actions";
--pd-grid-gap: 1.5rem;
--pd-grid-align: start;
display: grid;
grid-template-columns: var(--pd-grid-columns);
grid-template-areas: var(--pd-grid-areas);
gap: var(--pd-grid-gap);
align-items: var(--pd-grid-align);
}
@container (min-width: 50rem) {
.product-main-grid {
--pd-grid-columns: minmax(280px, 0.5fr) 1fr;
--pd-grid-areas:
"gallery header"
"gallery colors"
"positions positions"
"actions actions";
}
.product-info-col,
.product-form {
display: contents;
}
.product-gallery-col {
grid-area: gallery;
}
.product-detail__header {
grid-area: header;
}
.product-colors {
grid-area: colors;
}
.product-positions {
grid-area: positions;
}
.product-actions {
grid-area: actions;
}
}
/* ==========================================================================
ФАЙЛ: blocks/_main-express.scss
НАЗНАЧЕНИЕ: Экспресс-блок CTA с параллакс-фоном.
СТРУКТУРА:
- .main-express — обёртка с фоном
- .main-express-text — grid с текстом и кнопкой
- .title — заголовки с анимацией появления
- .express-btn — кнопка CTA
========================================================================== */
.main-express {
position: relative;
min-height: 26.25rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
max-width: 90rem;
margin: 0 auto;
border-radius: 1.40625rem;
}
.main-express::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--express-bg);
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: 0;
background-repeat: no-repeat;
}
.main-express .container {
position: relative;
z-index: 2;
width: 100%;
padding: 0 1rem;
}
.main-express .main-express-text {
display: grid;
align-items: center;
gap: 1rem;
max-width: 90rem;
margin: 0 auto;
grid-template-columns: 1fr auto;
grid-template-areas: "left1 right" "left2 right" "left3 right";
justify-items: start;
}
.main-express .main-express-text .area-left1 {
grid-area: left1;
}
.main-express .main-express-text .area-left2 {
grid-area: left2;
}
.main-express .main-express-text .area-left3 {
grid-area: left3;
}
.main-express .main-express-text .area-right {
grid-area: right;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.main-express .title {
margin: 0;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.0625rem;
line-height: 1.2;
text-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.6);
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
font-size: 2.125rem;
}
.main-express .title:nth-child(1) {
animation-delay: 0.1s;
}
.main-express .title:nth-child(2) {
animation-delay: 0.3s;
}
.main-express .title:nth-child(3) {
animation-delay: 0.5s;
}
.main-express .express-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.703125rem;
color: #ff8c42;
border: 0.1875rem solid #ff8c42;
background: transparent;
height: 2.75rem;
padding: 0 1.5rem;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.main-express .express-btn:hover {
color: #ffffff;
background-color: #ff6b35;
border-color: #ff6b35;
}
@media (max-width: 48rem) {
.main-express {
border-radius: 0.703125rem;
min-height: 18.75rem;
}
.main-express::before {
background-attachment: scroll;
}
.main-express .main-express-text {
grid-template-columns: 1fr;
grid-template-areas: "left1" "left2" "left3" "right";
justify-items: center;
text-align: center;
gap: 0.75rem;
}
.main-express .area-right {
justify-content: center;
margin-top: 0.5rem;
}
.main-express .express-btn {
width: 100%;
max-width: 17.5rem;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(1.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
ФАЙЛ: components/_help-section.scss
НАЗНАЧЕНИЕ: Оформление блока "Помощь специалиста".
ПРИМЕЧАНИЕ: Сетка (grid-2) управляется глобально через layout/_sections.scss
========================================================================== */
.help-info-block {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1em;
padding: 1em;
}
.help-info-block__title {
line-height: 48px;
margin: 0;
color: #2c3439;
}
.help-info-block__text {
font-size: 20px;
color: #666666;
margin: 0;
}
.help-info-block__phone {
display: inline-block;
color: #ff8c42;
text-decoration: none;
transition: opacity 0.2s ease;
font-weight: 600;
font-size: 32px;
}
.help-info-block__phone:hover {
opacity: 0.8;
text-decoration: underline;
}
.help-info-block__socials {
display: flex;
gap: 1em;
margin-top: 0.5em;
}
.help-info-block__socials .social-links {
margin: 0 0;
justify-content: var(--header-top-nav-justify-content, space-evenly);
width: 100%;
}
@container section (min-width: 42.375rem) {
.help-info-block__socials .social-links {
--header-top-nav-justify-content:left;
}
}
.help-info-block__socials .social-links svg {
max-height: 59px;
}
.help-info-block__socials .social-link {
width: 7em;
height: 7em;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
border-radius: 50%;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.help-info-block__socials .social-link svg {
fill: #333333;
}
.help-info-block__socials .social-link:hover {
transform: translateY(-0.125rem);
background-color: #e0e0e0;
}
.help-form-block {
background: #ffffff;
border-radius: 0.5rem;
padding: 1em;
box-shadow: 0 0.25rem 1.25rem hex-to-rgba(#000000, 0.05);
}
.help-form-block .web-form {
margin: 0;
}
.help-form-block h2 {
margin-bottom: 1rem;
}
.help-form-block .help-section__form {
display: flex;
flex-direction: column;
gap: 1em;
}
.help-form-block .help-section__form .form-group {
margin-bottom: 0;
}
.help-form-block .help-section__form .web-form-input-title {
display: none;
}
.help-form-block--large {
--form-height: 59px;
--form-font-size: 21px;
}
.tex-social {
max-width: 59px;
}
/* ==========================================================================
ФАЙЛ: theme/_dev-blocks.scss
НАЗНАЧЕНИЕ: Визуализация тестовых блоков для разработки.
ВАЖНО: Этот файл используется ТОЛЬКО в режиме разработки.
В продакшене он должен быть отключён.
========================================================================== */
.test-block {
position: relative;
width: 100%;
min-height: 3.125rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.test-block::before {
content: attr(data-label);
font-size: 0.75rem;
font-weight: 700;
color: #ffffff;
background: rgba(0, 0, 0, 0.6);
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
text-align: center;
white-space: nowrap;
}
.area-location {
width: 13.71875rem;
min-width: 13.71875rem;
}
.area-logo {
display: flex;
align-items: center;
justify-content: flex-start;
}
.header-logo-img {
width: 13.71875rem;
height: 3.4625rem;
object-fit: contain;
}
.area-hamburger {
background: #ffffff;
}
.block-close-mobile,
.block-close {
background: #f0f0f0;
border-radius: 50%;
min-width: 2.5rem;
min-height: 2.5rem;
}
.block-close-mobile::before,
.block-close::before {
background: rgba(0, 0, 0, 0.1);
color: #333333;
}
.block-mm-item {
background: #34495e;
min-height: 3.75rem;
}
.footer-col .test-block {
width: 100%;
border-radius: 0.5rem;
min-height: 1.875rem;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-bottom-nav > .test-block {
background: #ecf0f1;
}
.mobile-bottom-nav > .test-block::before {
background: rgba(44, 62, 80, 0.1);
color: #2c3e50;
}
.svg1round {
vector-effect: non-scaling-stroke;
fill: var(--var-fill, transparent);
stroke: var(--var-stroke, currentColor);
stroke-width: var(--var-stroke-width, 2);
stroke-linecap: round;
}
.svg1square {
vector-effect: non-scaling-stroke;
fill: var(--var-fill, transparent);
stroke-width: var(--var-stroke-width, 2);
stroke-linecap: square;
stroke-linejoin: round;
stroke: var(--var-stroke, currentColor);
}
/*# sourceMappingURL=styles.css.map */
/* End */
/* /local/templates/lentriNew/styles.css?1793654678119286 */