/* ===== VARIABLES ===== */
:root {
--color-primary: #1a6b50;
--color-primary-light: #2d9970;
--color-primary-dark: #14503c;
--color-accent: #c41e3a;
--color-accent-light: #e63950;
--color-accent-dark: #a01830;
--color-gold: #d4a84b;
--color-gold-light: #e6c14f;
--color-white: #ffffff;
--color-black: #0a0a0a;
--color-gray-100: #f8f9fa;
--color-gray-200: #e9ecef;
--color-gray-300: #dee2e6;
--color-gray-600: #6c757d;
--color-gray-800: #343a40;
--color-festive-bg: #fdf8f0;
--color-heading: #0a0a0a;
--font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--header-height: 134px;
--header-height-scrolled: 70px;
/* Gradients */
--gradient-hero-overlay: linear-gradient(135deg, rgba(5, 132, 88, 0.75) 0%, rgba(5, 132, 88, 0.6) 50%, rgba(5, 132, 88, 0.4) 100%);
--gradient-cta-overlay: linear-gradient(135deg, rgba(5, 132, 88, 0.85) 0%, rgba(5, 132, 88, 0.6) 100%);
--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.catalog {
padding-top: 0 !important;
}
.footer__bottom a,
.footer__bottom p{
color: white !important;
}
/* ===== RESET ===== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
font-size: 16px;
line-height: 1.6;
color: var(--color-gray-800);
background: var(--color-white);
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
}
/* ===== GLOBAL TYPOGRAPHY ===== */
h1 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
color: var(--color-heading);
line-height: 1.2;
margin-bottom: 16px;
}
h2 {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--color-heading);
line-height: 1.3;
margin-bottom: 16px;
}
h3 {
font-size: clamp(18px, 2.5vw, 22px);
font-weight: 700;
color: var(--color-heading);
line-height: 1.4;
margin-bottom: 12px;
}
h4 {
font-size: 16px;
font-weight: 700;
color: var(--color-heading);
line-height: 1.4;
margin-bottom: 8px;
}
p {
font-size: 16px;
line-height: 1.8;
color: var(--color-gray-600);
margin-bottom: 16px;
}
p:last-child {
margin-bottom: 0;
}
strong,
b {
font-weight: 700;
color: var(--color-gray-800);
}
ul,
ol {
padding-left: 24px;
margin-bottom: 16px;
}
ul {
list-style: disc;
padding-left: 0;
margin-bottom: 0;
}
ol {
list-style: decimal;
}
li {
font-size: 16px;
line-height: 1.8;
color: var(--color-gray-600);
margin-bottom: 8px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
}
th,
td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--color-gray-200);
font-size: 15px;
}
th {
font-weight: 700;
color: var(--color-heading);
background: var(--color-gray-100);
}
td {
color: var(--color-gray-600);
}
blockquote {
border-left: 4px solid var(--color-primary);
padding: 16px 24px;
margin: 16px 0;
background: var(--color-gray-100);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-style: italic;
color: var(--color-gray-600);
}
/* ===== UTILITIES ===== */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}
.section-title {
font-size: clamp(24px, 4vw, 36px);
font-weight: 700;
color: var(--color-heading);
text-align: left;
margin-bottom: 32px;
}
.faq .section-title {
text-align: center;
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
border-radius: var(--radius-sm);
transition: var(--transition);
cursor: pointer;
gap: 8px;
border: none;
}
.btn--primary {
background: var(--color-accent);
color: var(--color-white);
}
.btn--primary:hover {
background: var(--color-accent-light);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn--accent {
background: var(--color-accent);
color: var(--color-white);
font-weight: 700;
box-shadow: var(--shadow-sm);
}
.btn--accent:hover {
background: var(--color-accent-light);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn--outline {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.btn--outline:hover {
background: var(--color-primary);
color: var(--color-white);
}
/* White variant for dark backgrounds (hero, cta-banner) */
.hero .btn--outline {
color: var(--color-white);
border-color: var(--color-white);
}
.hero .btn--outline:hover {
background: var(--color-white);
color: var(--color-primary);
}
.btn--cart {
background: var(--color-accent);
color: var(--color-white);
padding: 10px 20px;
font-size: 14px;
}
.btn--cart:hover {
background: var(--color-accent-light);
}
/* ===== HEADER ===== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--color-white);
box-shadow: var(--shadow-sm);
}
/* Header Top Bar - hidden, info moved to main bar */
.header__top {
display: none;
}
.header__top-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__info {
display: flex;
align-items: center;
gap: 24px;
}
.header__work-time {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
}
.header__email {
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
transition: var(--transition);
}
.header__email:hover {
color: var(--color-gold);
}
.header__social {
display: flex;
gap: 12px;
}
.header__social-link {
color: rgba(255, 255, 255, 0.8);
transition: var(--transition);
}
.header__social-link:hover {
color: var(--color-gold);
}
/* Header Main */
.header__main {
padding: 12px 0;
border-bottom: 1px solid var(--color-gray-200);
}
.header__main .header__work-time {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-gray-600);
font-size: 13px;
}
.header__main .header__social {
display: flex;
gap: 10px;
}
.header__main .header__social-link {
color: var(--color-gray-600);
transition: var(--transition);
}
.header__main .header__social-link:hover {
color: var(--color-primary);
}
.header__main-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.header__logo {
display: flex;
align-items: center;
gap: 12px;
color: var(--color-primary);
}
.header__logo-icon {
width: 40px;
height: 40px;
}
.header__logo-text {
font-size: 22px;
font-weight: 800;
letter-spacing: 1px;
}
.header__phone {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-gray-800);
font-size: 18px;
font-weight: 700;
transition: var(--transition);
}
.header__phone:hover {
color: var(--color-primary);
}
.header__cart {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-gray-800);
font-weight: 500;
position: relative;
padding: 8px 16px;
background: var(--color-gray-100);
border-radius: var(--radius-sm);
transition: var(--transition);
}
.header__cart:hover {
background: var(--color-gray-200);
}
.header__cart-count {
position: absolute;
top: -4px;
left: 28px;
width: 20px;
height: 20px;
background: var(--color-accent);
color: var(--color-white);
font-size: 11px;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.header__cart-text {
font-size: 14px;
}
.header__mobile-contact {
display: none;
flex-direction: column;
align-items: flex-end;
}
.header__mobile-phone {
font-size: 16px;
font-weight: 700;
color: var(--color-black);
white-space: nowrap;
}
.header__mobile-work {
font-size: 11px;
color: var(--color-primary);
}
.header__burger {
display: none;
flex-direction: column;
gap: 5px;
padding: 5px;
}
.header__burger span {
width: 24px;
height: 2px;
background: var(--color-gray-800);
transition: var(--transition);
}
/* Header Navigation */
.header__nav {
background: var(--color-primary);
}
.header__nav-inner {
display: flex;
align-items: center;
gap: 0;
}
.header__nav-item {
position: relative;
}
.header__nav-link {
display: flex;
align-items: center;
gap: 6px;
padding: 16px 20px;
color: var(--color-white);
font-size: 14px;
font-weight: 500;
transition: var(--transition);
background: none;
border: none;
cursor: pointer;
}
.header__nav-link:hover {
background: rgba(255, 255, 255, 0.1);
}
.header__nav-link--active {
background: var(--color-accent);
}
.header__nav-link--active:hover {
background: var(--color-accent-light);
}
.header__nav-arrow {
transition: var(--transition);
}
.header__nav-item:hover .header__nav-arrow {
transform: rotate(180deg);
}
/* Mega Menu */
.mega-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--color-white);
box-shadow: var(--shadow-lg);
border-radius: 0 0 var(--radius-md) var(--radius-md);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 100;
min-width: 600px;
}
.mega-menu__list {
padding-left: 0;
}
.header__nav-item:hover .mega-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega-menu__inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
padding: 32px;
}
.mega-menu__column {
display: flex;
flex-direction: column;
gap: 12px;
}
.mega-menu__title {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid var(--color-primary);
}
.mega-menu__title:hover {
color: var(--color-primary-light);
}
.mega-menu__link {
display: block;
font-size: 14px;
color: var(--color-gray-600);
padding: 6px 0;
transition: var(--transition);
}
.mega-menu__link:hover {
color: var(--color-primary);
padding-left: 8px;
}
.mega-menu__group {
margin-bottom: 20px;
}
.mega-menu__subtitle {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 8px;
}
.mega-menu__subtitle:hover {
color: var(--color-primary);
}
.mega-menu__list {
list-style: none;
}
.mega-menu__list li {
margin-bottom: 6px;
}
.mega-menu__list a {
font-size: 14px;
color: var(--color-gray-600);
transition: var(--transition);
}
.mega-menu__list a:hover {
color: var(--color-primary);
padding-left: 8px;
}
/* ===== MOBILE MENU ===== */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: var(--color-white);
z-index: 1001;
display: flex;
flex-direction: column;
transition: var(--transition);
}
.mobile-menu.active {
right: 0;
}
.mobile-menu__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--color-gray-200);
}
.mobile-menu__logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
transition: var(--transition);
}
.mobile-menu__logo:hover {
opacity: 0.8;
}
.mobile-menu__logo-icon {
width: 32px;
height: 32px;
color: var(--color-primary);
}
.mobile-menu__logo-text {
font-size: 18px;
font-weight: 700;
color: var(--color-primary);
}
.mobile-menu__close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-600);
transition: var(--transition);
}
.mobile-menu__close:hover {
color: var(--color-primary);
}
.mobile-menu__nav {
flex: 1;
overflow-y: auto;
padding: 16px 0;
}
.mobile-menu__link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
font-size: 16px;
font-weight: 500;
color: var(--color-gray-800);
border-bottom: 1px solid var(--color-gray-100);
transition: var(--transition);
}
.mobile-menu__link:hover {
background: var(--color-gray-100);
color: var(--color-primary);
}
.mobile-menu__submenu {
display: none;
background: var(--color-gray-100);
padding: 8px 0;
}
.mobile-menu__submenu.active {
display: block;
}
.mobile-menu__sublink {
display: block;
padding: 12px 24px;
font-size: 14px;
color: var(--color-gray-600);
transition: var(--transition);
}
.mobile-menu__sublink:hover {
color: var(--color-primary);
}
.mobile-menu__sublink--title {
font-weight: 600;
color: var(--color-primary);
padding-top: 16px;
}
.mobile-menu__footer {
padding: 24px;
border-top: 1px solid var(--color-gray-200);
text-align: center;
}
.mobile-menu__phone {
display: block;
font-size: 20px;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 16px;
}
.mobile-menu__social {
display: flex;
justify-content: center;
gap: 16px;
}
.mobile-menu__social a {
color: var(--color-gray-600);
transition: var(--transition);
}
.mobile-menu__social a:hover {
color: var(--color-primary);
}
/* ===== SNOWFALL CANVAS ===== */
.snow-canvas {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.footer > .container,
.about-hero > .container {
position: relative;
z-index: 3;
}
/* ===== HERO ===== */
.hero {
position: relative;
height: 500px;
margin-top: var(--header-height);
display: flex;
align-items: center;
}
.hero__bg {
position: absolute;
inset: 0;
background: url('../img/bg.webp') center/cover no-repeat;
}
.hero__overlay {
position: absolute;
inset: 0;
background: var(--gradient-hero-overlay);
}
.hero__content {
position: relative;
z-index: 10;
max-width: 700px;
padding: 0 24px;
margin: 0 auto;
text-align: center;
}
.hero__title {
font-size: clamp(24px, 5vw, 34px);
font-weight: 800;
color: var(--color-white);
line-height: 1.2;
margin-bottom: 20px;
}
.hero__subtitle {
font-size: clamp(14px, 2vw, 16px);
color: rgba(255, 255, 255, 0.9);
margin-bottom: 32px;
line-height: 1.7;
}
.hero__buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ===== ADVANTAGES ===== */
.advantages {
padding: 48px 0;
background: var(--color-white);
}
.advantages__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.advantage-card {
text-align: center;
padding: 32px 24px;
background: var(--color-gray-100);
border-radius: var(--radius-lg);
transition: var(--transition);
}
.advantage-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.advantage-card__icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
}
.advantage-card__title {
font-size: 18px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 8px;
}
.advantage-card__subtitle {
font-size: 15px;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 12px;
}
.advantage-card__desc {
font-size: 14px;
color: var(--color-gray-600);
line-height: 1.6;
}
/* ===== CATALOG ===== */
.catalog {
padding: 48px 0;
background: var(--color-gray-100);
}
.catalog__layout {
display: flex;
flex-direction: column;
gap: 32px;
}
.catalog__filters {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 24px;
}
.cta-banner__checkbox span {
text-align: start;
}
.catalog__filters-title {
font-size: 18px;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
}
.catalog__filters-content {
display: grid;
grid-template-columns: 1fr;
/* gap: 32px; */
}
.catalog__filters-content.hidden {
display: none;
}
.catalog__content {
min-width: 0;
}
.catalog__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* Filter Groups */
.filter-group {
display: flex;
flex-direction: column;
}
.filter-group__title {
font-size: 16px;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 12px;
}
.filter-group__options {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-checkbox {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 14px;
color: var(--color-gray-700);
transition: var(--transition);
}
.filter-checkbox:hover {
color: var(--color-primary);
}
.filter-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--color-primary);
}
/* Product Card */
.product-card {
background: var(--color-white);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.product-card__badge {
position: absolute;
top: 12px;
left: 12px;
padding: 6px 12px;
background: var(--color-accent);
color: var(--color-white);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
border-radius: 4px;
z-index: 2;
}
.product-card__badge--premium {
background: var(--color-gold);
color: var(--color-black);
}
.product-card__image {
display: block;
height: 290px;
overflow: hidden;
}
.product-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.product-card:hover .product-card__image img {
transform: scale(1.05);
}
.product-card__content {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
}
.product-card__title {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 12px;
line-height: 1.4;
transition: var(--transition);
}
.product-card__title:hover {
color: var(--color-primary);
}
.product-card__size-selector {
margin-bottom: 12px;
}
.size-select {
width: 100%;
padding: 10px 12px;
font-size: 13px;
font-family: inherit;
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-sm);
background: var(--color-white);
color: var(--color-gray-800);
cursor: pointer;
transition: var(--transition);
}
.size-select:focus {
outline: none;
border-color: var(--color-primary);
}
.product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
}
.product-card__price {
font-size: 18px;
font-weight: 700;
color: var(--color-accent);
}
/* ===== CTA BANNER ===== */
.cta-banner {
position: relative;
padding: 40px 0;
overflow: hidden;
}
.cta-banner__bg {
position: absolute;
inset: 0;
background: var(--cta-bg) center top / cover no-repeat;
}
.cta-banner__bg::after {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-cta-overlay);
}
.cta-banner__inner {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.cta-banner__form-wrapper {
color: var(--color-white);
}
.cta-banner__title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: inherit;
margin-bottom: 12px;
}
.cta-banner__subtitle {
font-size: 15px;
color: inherit;
opacity: 0.9;
margin-bottom: 24px;
}
.cta-banner__form {
display: flex;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.cta-banner__input {
flex: 1;
min-width: 150px;
padding: 14px 18px;
font-size: 15px;
font-family: inherit;
border: none;
border-radius: var(--radius-sm);
background: var(--color-white);
}
.cta-banner__input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.cta-banner__btn {
white-space: nowrap;
}
.cta-banner__checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 11px;
color: var(--color-white);
cursor: pointer;
}
.cta-banner__checkbox input {
margin-top: 2px;
}
.cta-banner__checkbox a {
color: var(--color-gold);
text-decoration: none;
}
.cta-banner__checkbox a:hover {
color: var(--color-gold-light);
text-decoration: underline;
}
.cta-banner__privacy {
font-size: 11px;
color: var(--color-white);
}
.cta-banner__privacy a {
color: var(--color-gold);
text-decoration: none;
}
.cta-banner__privacy a:hover {
color: var(--color-gold-light);
text-decoration: underline;
}
.cta-banner__timer-wrapper {
text-align: center;
}
.cta-banner__timer-label {
font-size: 22px;
font-weight: 600;
color: var(--color-white);
margin-bottom: 20px;
line-height: 1.5;
}
.cta-banner__timer-accent {
display: block;
font-size: 32px;
font-weight: 800;
color: var(--color-gold);
}
.cta-banner__year {
font-size: 48px;
font-weight: 800;
color: var(--color-gold);
display: block;
}
/* Countdown */
.countdown {
display: flex;
gap: 12px;
justify-content: center;
}
.countdown__item {
background: var(--color-white);
border-radius: var(--radius-sm);
padding: 16px 12px;
min-width: 70px;
}
.countdown__value {
display: block;
font-size: 28px;
font-weight: 800;
color: var(--color-accent);
line-height: 1;
}
.countdown__label {
font-size: 11px;
color: var(--color-gray-600);
text-transform: uppercase;
}
/* ===== DELIVERY INFO ===== */
.delivery-info {
padding: 48px 0;
background: var(--color-white);
}
.delivery-info__text {
max-width: 800px;
margin: 0 0 32px;
text-align: left;
font-size: 16px;
color: var(--color-gray-600);
line-height: 1.7;
}
.delivery-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.delivery-card {
display: flex;
flex-direction: column;
padding: 32px;
background: var(--color-gray-100);
border-radius: var(--radius-lg);
border: 2px solid transparent;
transition: var(--transition);
text-decoration: none;
}
.delivery-card:hover {
border-color: var(--color-primary);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.delivery-card__icon {
width: 64px;
height: 64px;
background: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
margin-bottom: 20px;
}
.delivery-card__title {
font-size: 18px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 16px;
}
.delivery-card__list {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
flex-grow: 1;
}
.delivery-card__list li {
position: relative;
padding-left: 24px;
font-size: 14px;
color: var(--color-gray-600);
margin-bottom: 10px;
line-height: 1.5;
}
.delivery-card__list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: 700;
}
.delivery-card__link {
font-size: 14px;
font-weight: 600;
color: var(--color-primary);
margin-top: auto;
}
@media (max-width: 992px) {
.delivery-cards {
grid-template-columns: 1fr;
}
}
/* ===== ABOUT SECTION ===== */
.about-section {
padding: 48px 0;
background: var(--color-gray-100);
}
.about-section__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.about-section__title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--color-heading);
margin-bottom: 24px;
line-height: 1.3;
}
.about-section__text {
font-size: 15px;
color: var(--color-gray-600);
margin-bottom: 16px;
line-height: 1.8;
}
.about-section__text strong {
color: var(--color-primary);
}
.about-section__content .btn {
margin-top: 16px;
color: var(--color-primary);
border-color: var(--color-primary);
}
.about-section__content .btn:hover {
background: var(--color-primary);
color: var(--color-white);
}
.about-section__gallery {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.about-section__gallery-img {
border-radius: var(--radius-lg);
overflow: hidden;
height: 320px;
}
.about-section__gallery-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.contacts-content {
padding: 60px 0 60px;
}
/* ===== REVIEWS ===== */
.reviews {
padding: 48px 0;
background: var(--color-white);
}
/* 2-колоночный layout */
.reviews__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}
.reviews__col--left {
display: flex;
flex-direction: column;
gap: 24px;
}
/* ── Плитки платформ ── */
.reviews__platforms-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.reviews__platform-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 12px;
background: var(--color-gray-100);
border-radius: var(--radius-md);
text-decoration: none;
transition: var(--transition);
text-align: center;
border: 1px solid transparent;
}
.reviews__platform-card:hover {
background: var(--color-white);
border-color: var(--color-gray-200);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.reviews__platform-card-logo {
width: 56px;
display: flex;
align-items: center;
justify-content: center;
}
.reviews__platform-card-logo img,
.reviews__platform-card-logo svg {
width: 56px;
height: auto;
}
.reviews__platform-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 18px;
font-weight: 700;
}
.reviews__platform-card-rating {
font-size: 28px;
font-weight: 800;
color: var(--color-gray-900);
line-height: 1;
}
.reviews__platform-card-stars {
display: flex;
align-items: center;
}
.reviews__platform-card-desc {
font-size: 12px;
color: var(--color-gray-600);
line-height: 1.3;
}
/* ── Заголовок галереи ── */
.reviews__photos-title {
font-size: 16px;
font-weight: 700;
color: var(--color-gray-800);
margin: 0;
}
.reviews__photos-empty {
font-size: 13px;
color: var(--color-gray-500);
font-style: italic;
}
/* ── Слайдер фото отзывов ── */
.reviews-slider {
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
}
.reviews-slider__track {
display: flex;
gap: 12px;
transition: transform 0.35s ease;
will-change: transform;
}
.reviews-slider__item {
flex: 0 0 calc(50% - 6px);
border-radius: var(--radius-sm);
overflow: hidden;
height: auto;
}
.reviews-slider__item img {
width: 100%;
height: auto;
display: block;
}
.reviews-slider__link {
display: block;
width: 100%;
}
.reviews-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-800);
z-index: 2;
transition: var(--transition);
}
.reviews-slider__btn:hover {
background: var(--color-white);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.reviews-slider__btn--prev { left: 8px; }
.reviews-slider__btn--next { right: 8px; }
.reviews-slider__btn:disabled {
opacity: 0.4;
cursor: default;
}
/* ===== Reviews Media Slider (полноширинный, фото + видео) ===== */
.reviews-media {
padding: 40px 0 64px;
}
.reviews-media .section-title {
margin-bottom: 28px;
}
.reviews-media-slider {
position: relative;
padding: 0 56px;
}
.reviews-media-slider__viewport {
overflow: hidden;
}
.reviews-media-slider__track {
display: flex;
gap: 16px;
transition: transform 0.35s ease;
will-change: transform;
}
.reviews-media-slider__item {
flex: 0 0 calc((100% - 48px) / 3.5); /* 3.5 items на десктопе */
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
background: #f2f2f2;
}
.reviews-media-slider__link {
display: block;
width: 100%;
position: relative;
}
.reviews-media-slider__link img,
.reviews-media-slider__link .reviews-media-slider__video-preview {
width: 100%;
height: auto;
display: block;
}
.reviews-media-slider__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(0,0,0,0.25);
transition: background .2s ease;
pointer-events: none;
}
.reviews-media-slider__play svg {
width: 56px;
height: 56px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.reviews-media-slider__item.is-video:hover .reviews-media-slider__play {
background: rgba(0,0,0,0.45);
}
.reviews-media-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-800);
z-index: 2;
transition: var(--transition);
}
.reviews-media-slider__btn:hover {
background: var(--color-white);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.reviews-media-slider__btn--prev { left: 8px; }
.reviews-media-slider__btn--next { right: 8px; }
.reviews-media-slider__btn:disabled {
opacity: 0.4;
cursor: default;
}
@media (max-width: 900px) {
.reviews-media-slider { padding: 0 48px; }
.reviews-media-slider__item { flex: 0 0 calc((100% - 16px) / 2); } /* 2 на планшете */
}
@media (max-width: 600px) {
.reviews-media-slider { padding: 0 16px; }
.reviews-media-slider__item { flex: 0 0 100%; } /* 1 на мобилке */
.reviews-media-slider__btn { width: 38px; height: 38px; }
.reviews-media-slider__btn--prev { left: 4px; }
.reviews-media-slider__btn--next { right: 4px; }
}
/* ── Виджет Яндекс (правая колонка) ── */
.reviews__col--right {
position: sticky;
top: 80px;
}
.reviews__widget {
width: 100%;
height: 900px;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--color-gray-200);
background: var(--color-white);
}
.reviews__widget iframe {
width: 100%;
height: 100%;
border: none;
}
/* ── Адаптив ── */
@media (max-width: 1024px) {
.reviews__layout {
grid-template-columns: 1fr;
}
.reviews__col--right {
position: static;
}
.reviews__widget {
height: 750px;
}
}
@media (max-width: 640px) {
.reviews__platforms-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.reviews__platform-card-rating {
font-size: 22px;
}
.reviews-slider__item {
flex: 0 0 calc(50% - 6px);
}
.reviews__widget {
height: 600px;
}
}
/* ===== FAQ ===== */
.faq {
padding: 48px 0;
background: var(--color-gray-100);
}
.faq__list {
max-width: 800px;
margin: 0 auto;
}
.faq__item {
background: var(--color-white);
border-radius: var(--radius-md);
margin-bottom: 12px;
overflow: hidden;
border-left: 4px solid var(--color-primary);
}
.faq__question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
font-size: 16px;
font-weight: 600;
color: var(--color-gray-800);
text-align: left;
cursor: pointer;
transition: var(--transition);
}
.faq__question:hover {
color: var(--color-primary);
}
.faq__icon {
flex-shrink: 0;
color: var(--color-primary);
transition: var(--transition);
}
.faq__item.active .faq__icon {
transform: rotate(180deg);
}
.faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq__item.active .faq__answer {
max-height: 300px;
}
.faq__answer p {
padding: 0 24px 20px;
font-size: 14px;
color: var(--color-gray-600);
line-height: 1.8;
}
/* ===== DEFAULT PAGE ===== */
.page-content-section {
padding: 40px 0 80px;
}
.page-content__body {
max-width: 800px;
font-size: 16px;
line-height: 1.7;
color: var(--color-gray-800);
}
.page-content__body h2,
.page-content__body h3 {
color: var(--color-heading);
margin: 32px 0 16px;
}
.page-content__body p {
margin: 0 0 16px;
}
.page-content__body ul,
.page-content__body ol {
margin: 0 0 16px;
padding-left: 24px;
}
.page-content__body img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
}
/* ===== 404 PAGE ===== */
.error-page {
padding: 80px 0;
}
.error-page__inner {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.error-page__code {
font-size: 120px;
font-weight: 900;
color: var(--color-primary);
line-height: 1;
margin: 0 0 16px;
}
.error-page__title {
font-size: 28px;
font-weight: 700;
color: var(--color-heading);
margin: 0 0 16px;
}
.error-page__text {
font-size: 16px;
color: var(--color-gray-600);
margin: 0 0 32px;
line-height: 1.6;
}
.error-page__actions {
display: flex;
gap: 16px;
justify-content: center;
}
@media (max-width: 768px) {
.error-page {
padding: 48px 0;
}
.error-page__code {
font-size: 80px;
}
.error-page__title {
font-size: 22px;
}
.error-page__actions {
flex-direction: column;
align-items: center;
}
}
/* ===== FOOTER ===== */
.footer {
position: relative;
overflow: hidden;
background: var(--color-primary-dark);
color: var(--color-white);
padding: 48px 0 32px;
}
.footer__top {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 48px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
margin-bottom: 24px;
}
.footer__logo {
display: flex;
align-items: center;
gap: 12px;
color: var(--color-white);
font-size: 22px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 16px;
}
.footer__logo-icon {
width: 40px;
height: 40px;
}
.footer__tagline {
color: var(--color-white);
font-size: 14px;
line-height: 1.7;
margin-bottom: 20px;
}
.footer__bottom {
color: var(--color-white) !important;
}
.footer__social {
display: flex;
gap: 12px;
}
.footer__social a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
transition: var(--transition);
}
.footer__social a:hover {
background: var(--color-primary);
}
.footer__links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.footer__col h4 {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
color: var(--color-gold);
}
.footer__col a,
.footer__col p {
display: flex;
font-size: 14px;
/* color: rgba(255, 255, 255, 0.7); */
margin-bottom: 12px;
transition: var(--transition);
}
.footer__col a:hover {
color: var(--color-white);
}
.footer__social {
display: flex;
gap: 12px;
margin-top: 12px;
}
.footer__social-link {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
transition: color 0.2s;
}
.footer__social-link:hover {
color: var(--color-white);
}
.footer__worktime {
color: var(--color-primary-light) !important;
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.footer__bottom p,
.footer__bottom a {
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
}
.footer__bottom-brand {
font-size: 15px !important;
font-weight: 700;
color: var(--color-white) !important;
margin-bottom: 4px;
}
.footer__bottom-left a {
text-decoration: underline;
text-underline-offset: 3px;
}
.footer__bottom a:hover {
color: var(--color-white);
}
.footer__bottom-right {
text-align: right;
}
/* ===== MOBILE BOTTOM NAV ===== */
.mobile-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--color-white);
padding: 8px 0;
padding-bottom: calc(8px + env(safe-area-inset-bottom));
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
z-index: 1000;
justify-content: space-around;
align-items: center;
}
.mobile-nav__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 12px;
color: var(--color-gray-600);
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: var(--transition);
position: relative;
min-height: 60px;
flex: 1;
}
.mobile-nav__item svg {
width: 24px;
height: 24px;
}
.mobile-nav__item--accent {
background: var(--color-primary);
border-radius: 50%;
width: 56px;
height: 56px;
margin: -20px 0 -8px 0;
padding: 0;
box-shadow: 0 4px 15px rgba(26, 95, 74, 0.4);
min-height: auto;
flex: 0 0 auto;
}
.mobile-nav__item--accent svg {
color: var(--color-white);
}
.mobile-nav__item--accent span {
display: none;
}
.mobile-nav__cart-count {
position: absolute;
top: 8px;
right: 8px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--color-accent);
color: var(--color-white);
font-size: 10px;
font-weight: 700;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* ===== MODAL ===== */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}
.modal__content {
position: relative;
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 30px;
max-width: 440px;
width: 100%;
transform: translateY(20px);
transition: var(--transition);
}
.modal.active .modal__content {
transform: translateY(0);
}
.modal__content--cart {
max-width: 500px;
}
.modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-600);
transition: var(--transition);
}
.modal__close:hover {
color: var(--color-gray-800);
}
.modal__title {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
text-align: center;
}
.modal__subtitle {
font-size: 14px;
color: var(--color-gray-600);
text-align: center;
margin-bottom: 24px;
}
.modal__form {
display: flex;
flex-direction: column;
gap: 16px;
}
.modal__input {
padding: 16px;
font-size: 16px;
font-family: inherit;
border: 2px solid var(--color-gray-200);
border-radius: var(--radius-sm);
transition: var(--transition);
}
.modal__input:focus {
outline: none;
border-color: var(--color-primary);
}
.modal__btn {
width: 100%;
}
.modal__privacy {
font-size: 12px;
color: var(--color-gray-600);
text-align: center;
margin-top: 16px;
}
.modal__privacy a {
color: var(--color-gold);
text-decoration: underline;
}
/* Cart */
.cart__empty {
text-align: center;
padding: 40px;
color: var(--color-gray-600);
}
.cart__item {
display: flex;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--color-gray-200);
}
.cart__item-image {
width: 80px;
height: 80px;
border-radius: var(--radius-sm);
object-fit: cover;
}
.cart__item-info {
flex: 1;
}
.cart__item-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.cart__item-size {
font-size: 12px;
color: var(--color-gray-600);
margin-bottom: 8px;
}
.cart__item-price {
font-size: 16px;
font-weight: 700;
color: var(--color-accent);
}
.cart__item-remove {
color: var(--color-gray-600);
transition: var(--transition);
}
.cart__item-remove:hover {
color: var(--color-accent);
}
.cart__footer {
padding-top: 20px;
}
.cart__total {
display: flex;
justify-content: space-between;
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
.cart__checkout {
width: 100%;
}
/* ===== PRIVACY PAGE ===== */
.privacy-page {
padding: 60px 0 80px;
margin-top: var(--header-height);
}
.privacy-page__hero {
text-align: center;
margin-bottom: 50px;
}
.privacy-page__title {
font-size: 32px;
font-weight: 700;
color: var(--color-dark);
line-height: 1.3;
}
.privacy-page__content {
max-width: 820px;
margin: 0 auto;
}
.privacy-page__section {
margin-bottom: 36px;
}
.privacy-page__section h2 {
font-size: 20px;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 16px;
line-height: 1.3;
}
.privacy-page__section p {
font-size: 15px;
line-height: 1.8;
color: var(--color-text);
margin-bottom: 12px;
}
.privacy-page__section ul {
list-style: none;
padding: 0;
margin: 0 0 12px;
}
.privacy-page__section ul li {
font-size: 15px;
line-height: 1.8;
color: var(--color-text);
padding-left: 20px;
position: relative;
margin-bottom: 8px;
}
.privacy-page__section ul li::before {
content: '—';
position: absolute;
left: 0;
color: var(--color-accent);
}
.privacy-page__section a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.privacy-page__section a:hover {
color: var(--color-accent);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
.catalog__grid {
grid-template-columns: repeat(3, 1fr);
}
.advantages__grid {
gap: 24px;
}
.container {
padding: 0 12px;
}
}
@media (max-width: 992px) {
:root {
--header-height: 80px;
}
.header__main .header__work-time,
.header__main .header__social {
display: none;
}
.header__nav {
display: none;
}
.mega-menu__inner {
grid-template-columns: 1fr;
gap: 24px;
padding: 24px;
}
.header__burger {
display: flex;
}
.header__cart-text {
display: none;
}
.catalog__grid {
grid-template-columns: repeat(2, 1fr);
}
.advantages__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.advantage-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 0 8px;
text-align: left;
padding: 24px;
}
.advantage-card__icon {
margin: 0;
grid-row: span 3;
width: 60px;
height: 60px;
}
.advantage-card__icon svg {
width: 36px;
height: 36px;
}
.advantage-card__title {
font-size: 16px;
}
.cta-banner__inner {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.cta-banner__form {
justify-content: center;
}
.delivery-info__cards {
grid-template-columns: 1fr;
}
.about-section__inner {
grid-template-columns: 1fr;
}
.footer__top {
grid-template-columns: 1fr;
gap: 40px;
}
.footer__links {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.hero__subtitle,
.hero__title {
text-align: start;
}
.modal__content {
padding: 16px;
}
:root {
--header-height: 80px;
}
.mobile-nav {
display: flex;
}
body {
padding-bottom: 80px;
}
.section-title {
margin-bottom: 36px;
}
.header__phone,
.header__cart,
.header__burger {
display: none;
}
.header__logo img {
max-width: 140px;
}
.header__mobile-contact {
display: flex;
margin-left: auto;
}
.catalog__grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.catalog__filters {
padding: 12px;
margin-bottom: 0 !important;
}
.catalog__filters-content {
grid-template-columns: 1fr;
/* gap: 20px; */
}
.catalog__filters-title svg {
transition: transform 0.3s ease;
}
.catalog__filters-title {
margin-bottom: 20px;
}
.product-card__image {
height: 290px;
}
.product-card__content {
padding: 12px;
}
.product-card__title {
font-size: 13px;
}
.product-card__price {
font-size: 15px;
}
.btn--cart {
padding: 8px 12px;
font-size: 12px;
}
.countdown__item {
padding: 12px 8px;
min-width: 60px;
}
.countdown__value {
font-size: 22px;
}
.footer__links {
grid-template-columns: 1fr;
gap: 24px;
}
.footer__bottom {
flex-direction: column;
gap: 20px;
text-align: center;
align-items: center;
}
.footer__bottom-right {
text-align: center;
}
/* Уменьшаем padding секций на мобилке */
.hero,
.advantages,
.catalog,
.reviews,
.about-content,
.about-stats,
.about-team,
.delivery-info,
.page-content,
.seo-text {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
@media (max-width: 480px) {
.hero__buttons {
flex-direction: column;
}
.btn {
width: 100%;
}
.catalog__grid {
grid-template-columns: 1fr;
}
.product-card__image {
height: 290px;
}
.product-card__footer {
flex-direction: column;
align-items: stretch;
}
.product-card__price {
text-align: center;
margin-bottom: 8px;
}
.cta-banner__form {
flex-direction: column;
}
.countdown {
gap: 8px;
}
.countdown__item {
min-width: 50px;
padding: 10px 6px;
}
.countdown__value {
font-size: 18px;
}
.countdown__label {
font-size: 9px;
}
}
/* ===== PAGE CONTENT (INNER PAGES) ===== */
.page-content {
padding: 40px 0 60px;
background: var(--color-white);
}
.page-content__title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
color: var(--color-heading);
margin-bottom: 16px;
text-align: left;
}
.page-content__subtitle {
font-size: 16px;
color: var(--color-gray-600);
text-align: left;
margin-bottom: 32px;
max-width: 630px;
}
/* ===== DELIVERY PAGE ===== */
/* Tabs Navigation */
.delivery-tabs {
display: flex;
gap: 8px;
margin-bottom: 32px;
border-bottom: 2px solid var(--color-gray-200);
padding-bottom: 0;
}
.delivery-tabs__btn {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
font-family: var(--font-family);
color: var(--color-gray-600);
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: var(--transition);
}
.delivery-tabs__btn:hover {
color: var(--color-primary);
}
.delivery-tabs__btn--active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.delivery-tabs__btn svg {
flex-shrink: 0;
}
/* Tab Content */
.delivery-tab {
display: none;
}
.delivery-tab--active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Delivery Tab Intro */
.delivery-tab__intro {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 24px;
background: var(--color-festive-bg);
border-radius: var(--radius-md);
border-left: 4px solid var(--color-primary);
margin-bottom: 32px;
}
.delivery-tab__intro svg {
color: var(--color-primary);
flex-shrink: 0;
margin-top: 2px;
}
.delivery-tab__intro p {
font-size: 16px;
line-height: 1.7;
color: var(--color-gray-800);
margin: 0;
}
/* Delivery Sections Grid */
.delivery-sections {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.delivery-section {
background: var(--color-gray-100);
border-radius: var(--radius-md);
padding: 28px;
}
.delivery-section--wide {
grid-column: 1 / -1;
}
.delivery-section__title {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 16px;
}
.delivery-section__title svg {
color: var(--color-primary);
flex-shrink: 0;
}
.delivery-section__list {
list-style: none;
padding: 0;
margin: 0;
}
.delivery-section__list li {
position: relative;
padding: 10px 0 10px 20px;
font-size: 15px;
line-height: 1.6;
color: var(--color-gray-800);
border-bottom: 1px solid var(--color-gray-200);
}
.delivery-section__list li:last-child {
border-bottom: none;
}
.delivery-section__list li::before {
content: '';
position: absolute;
left: 0;
top: 17px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary);
}
.delivery-section__text p {
font-size: 15px;
line-height: 1.7;
color: var(--color-gray-800);
margin: 0 0 12px;
}
.delivery-section__text p:last-child {
margin-bottom: 0;
}
/* Services Table */
.delivery-services-table {
width: 100%;
}
.delivery-services-table__header {
display: grid;
grid-template-columns: 1fr 140px 140px;
gap: 12px;
padding: 12px 16px;
background: var(--color-primary);
border-radius: var(--radius-sm);
margin-bottom: 4px;
}
.delivery-services-table__header span {
font-size: 13px;
font-weight: 600;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.delivery-services-table__row {
display: grid;
grid-template-columns: 1fr 140px 140px;
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--color-gray-200);
transition: var(--transition);
}
.delivery-services-table__row:hover {
background: var(--color-white);
}
.delivery-services-table__row:last-child {
border-bottom: none;
}
.delivery-services-table__name {
font-size: 15px;
font-weight: 600;
color: var(--color-gray-800);
}
.delivery-services-table__price {
font-size: 15px;
font-weight: 700;
color: var(--color-primary);
}
/* Pickup Tab */
.pickup-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 32px;
}
.pickup-card {
display: flex;
align-items: center;
gap: 20px;
padding: 28px;
background: var(--color-gray-100);
border-radius: var(--radius-md);
transition: var(--transition);
}
.pickup-card:hover {
box-shadow: var(--shadow-md);
}
.pickup-card__icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--gradient-primary);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pickup-card__label {
font-size: 13px;
font-weight: 600;
color: var(--color-gray-600);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.pickup-card__value {
font-size: 20px;
font-weight: 700;
color: var(--color-heading);
}
/* Pickup Features */
.pickup-features {
display: grid;
gap: 0;
}
.pickup-features__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid var(--color-gray-200);
transition: var(--transition);
}
.pickup-features__item:last-child {
border-bottom: none;
}
.pickup-features__item:hover {
background: var(--color-gray-100);
border-radius: var(--radius-sm);
}
.pickup-features__item svg {
color: var(--color-primary);
flex-shrink: 0;
margin-top: 2px;
}
.pickup-features__item span {
font-size: 15px;
line-height: 1.6;
color: var(--color-gray-800);
}
/* CTA Compact */
.cta--compact {
padding: 40px 0;
background: var(--color-primary);
}
.cta--compact .cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.cta--compact .cta__title {
font-size: 24px;
font-weight: 700;
color: var(--color-white);
margin-bottom: 4px;
}
.cta--compact .cta__subtitle {
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.cta--compact .cta__form {
display: flex;
gap: 12px;
}
.cta--compact .cta__form input {
padding: 14px 20px;
font-size: 16px;
border: 2px solid transparent;
border-radius: var(--radius-sm);
min-width: 260px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.cta--compact .cta__form input:focus {
outline: none;
border-color: var(--color-white);
box-shadow: var(--shadow-md);
}
.cta--compact .cta__form .btn {
white-space: nowrap;
padding: 14px 32px;
font-size: 16px;
}
.breadcrumbs__list {
margin-bottom: 0;
padding-left: 0;
}
/* Responsive for delivery page */
@media (max-width: 992px) {
.delivery-sections {
grid-template-columns: 1fr;
}
.delivery-services-table__header,
.delivery-services-table__row {
grid-template-columns: 1fr 120px 120px;
}
.pickup-cards {
grid-template-columns: 1fr;
}
.cta--compact .cta__inner {
flex-direction: column;
text-align: center;
}
.cta--compact .cta__form {
width: 100%;
max-width: 400px;
}
.cta--compact .cta__form input {
flex: 1;
min-width: auto;
}
}
@media (max-width: 768px) {
.delivery-tabs__btn {
flex: 1;
justify-content: center;
padding: 12px 16px;
font-size: 15px;
}
.delivery-services-table__header,
.delivery-services-table__row {
grid-template-columns: 1fr;
gap: 4px;
}
.delivery-services-table__header span:first-child {
display: none;
}
.delivery-services-table__row {
padding: 16px;
background: var(--color-white);
border-radius: var(--radius-sm);
margin-bottom: 8px;
border-bottom: none;
}
.delivery-services-table__name {
font-size: 14px;
margin-bottom: 4px;
}
.delivery-services-table__price {
font-size: 14px;
}
.delivery-services-table__price::before {
font-size: 12px;
color: var(--color-gray-600);
font-weight: 400;
}
.delivery-services-table__row .delivery-services-table__price:nth-child(2)::before {
content: 'до 2м: ';
}
.delivery-services-table__row .delivery-services-table__price:nth-child(3)::before {
content: 'более 2м: ';
}
.pickup-card__value {
font-size: 17px;
}
.cta--compact .cta__form {
flex-direction: column;
}
.cta--compact .cta__form input {
width: 100%;
}
}
/* ===== SCROLL TO TOP ===== */
.scroll-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
z-index: 900;
}
.scroll-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top:hover {
background: var(--color-primary-dark);
}
@media (max-width: 768px) {
.scroll-top {
bottom: 80px;
right: 16px;
width: 40px;
height: 40px;
}
}
/* ===== BREADCRUMBS ===== */
.breadcrumbs {
padding: 20px 0;
background: var(--color-gray-100);
margin-top: var(--header-height);
}
.breadcrumbs__list {
display: flex;
gap: 12px;
align-items: center;
list-style: none;
font-size: 15px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.breadcrumbs__list::-webkit-scrollbar {
display: none;
}
.breadcrumbs__item {
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
flex-shrink: 0;
}
.breadcrumbs__item::after {
content: '/';
color: var(--color-gray-600);
font-size: 14px;
}
.breadcrumbs__item:last-child::after {
display: none;
}
.breadcrumbs__link {
color: var(--color-gray-600);
transition: var(--transition);
text-decoration: none;
}
.breadcrumbs__link:hover {
color: var(--color-primary);
}
.breadcrumbs__current {
color: var(--color-gray-800);
font-weight: 500;
white-space: nowrap;
}
@media (max-width: 768px) {
.breadcrumbs {
padding: 12px 0;
}
.breadcrumbs__list {
font-size: 13px;
gap: 6px;
}
.breadcrumbs__item {
gap: 6px;
}
}
/* ===== PAYMENT PAGE ===== */
.payment-methods {
margin-bottom: 60px;
}
.payment-methods__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.payment-method {
background: var(--color-gray-100);
border-radius: var(--radius-lg);
padding: 24px;
transition: var(--transition);
text-align: center;
display: flex;
flex-direction: column;
border: 2px solid transparent;
}
.payment-method:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.payment-method__icon {
color: var(--color-primary);
margin: 0 auto 16px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-white);
border-radius: 50%;
}
.payment-method__title {
font-size: 16px;
font-weight: 700;
color: var(--color-gray-800);
margin-bottom: 12px;
}
.payment-method__desc {
font-size: 13px;
color: var(--color-gray-600);
line-height: 1.5;
margin-bottom: 16px;
flex: 1;
}
.payment-method__features {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.payment-method__features li {
font-size: 12px;
color: var(--color-gray-600);
padding: 6px 12px 6px 28px;
position: relative;
background: var(--color-white);
border-radius: var(--radius-sm);
}
.payment-method__features li::before {
content: '✓';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--color-primary);
font-weight: 700;
font-size: 14px;
}
/* Payment Guarantee */
.payment-guarantee {
margin-bottom: 60px;
}
.payment-guarantee__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.payment-guarantee__item {
display: flex;
gap: 16px;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
padding: 24px;
border-radius: var(--radius-md);
}
.payment-guarantee__icon {
color: var(--color-primary);
flex-shrink: 0;
}
.payment-guarantee__content h3 {
font-size: 16px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 8px;
}
.payment-guarantee__content p {
font-size: 14px;
color: var(--color-gray-600);
line-height: 1.6;
}
/* Payment FAQ */
.payment-faq {
margin-bottom: 40px;
}
/* Responsive for payment page */
@media (max-width: 1200px) {
.payment-methods__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.payment-methods__grid {
grid-template-columns: 1fr;
}
.payment-guarantee__grid {
grid-template-columns: 1fr;
}
.payment-method {
padding: 20px;
}
}
/* ===== ABOUT PAGE ===== */
.about-hero {
position: relative;
overflow: hidden;
background: var(--gradient-primary);
color: var(--color-white);
padding: 60px 0 60px;
text-align: center;
}
.about-hero__title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
color: inherit;
margin-bottom: 16px;
}
.about-hero__subtitle {
font-size: 18px;
color: inherit;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.about-content {
padding: 60px 0;
}
.about-content__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.about-content__text h2 {
font-size: 28px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 24px;
}
.about-content__text p {
font-size: 15px;
color: var(--color-gray-600);
line-height: 1.8;
margin-bottom: 16px;
}
.about-content__grid--reverse {
direction: rtl;
}
.about-content__grid--reverse > * {
direction: ltr;
}
.about-content__image {
border-radius: var(--radius-lg);
overflow: hidden;
}
.about-content__image img {
width: 100%;
/* height: 400px; */
object-fit: cover;
}
.about-content__video {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 590 / 500;
}
.about-content__video iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* About Stats */
.about-stats {
padding: 60px 0;
background: var(--color-gray-100);
}
.about-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.about-stat {
text-align: center;
padding: 32px;
background: var(--color-white);
border-radius: var(--radius-md);
}
.about-stat__number {
font-size: 48px;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 8px;
}
.about-stat__label {
font-size: 14px;
color: var(--color-gray-600);
}
/* About Team */
.about-team {
padding: 60px 0;
}
.about-team__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.team-member {
text-align: center;
}
.team-member__photo {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 16px;
border: 4px solid var(--color-primary);
}
.team-member__name {
font-size: 18px;
font-weight: 700;
color: var(--color-gray-800);
margin-bottom: 4px;
}
.team-member__role {
font-size: 14px;
color: var(--color-gray-600);
}
/* About Certificates */
.about-certs {
padding: 60px 0;
background: var(--color-gray-50, #f8f9fa);
}
.about-certs .section-title {
text-align: center;
margin-bottom: 40px;
}
.about-certs__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.about-cert {
display: block;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--color-gray-200);
transition: var(--transition);
background: var(--color-white);
}
.about-cert:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.12);
transform: translateY(-2px);
}
.about-cert img {
width: 100%;
height: 450px;
object-fit: cover;
display: block;
}
/* About Media (СМИ) Slider */
.about-media {
padding: 60px 0;
}
.about-media .section-title {
text-align: center;
margin-bottom: 40px;
}
.media-slider {
position: relative;
padding: 0 52px;
}
.media-slider__viewport {
overflow: hidden;
}
.media-slider__track {
display: flex;
gap: 24px;
transition: transform 0.4s ease;
will-change: transform;
}
.media-slider__item {
flex: 0 0 100%;
min-width: 0;
}
.media-card {
display: flex;
flex-direction: column;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--color-gray-200);
background: var(--color-white);
transition: var(--transition);
}
.media-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.12);
transform: translateY(-2px);
}
.media-card__screenshot {
display: block;
overflow: hidden;
flex: 1;
}
.media-card__screenshot img {
width: 100%;
height: 440px;
object-fit: cover;
object-position: top;
display: block;
transition: transform 0.3s ease;
}
.media-card:hover .media-card__screenshot img {
transform: scale(1.03);
}
.media-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-top: 1px solid var(--color-gray-100);
background: var(--color-white);
}
.media-card__name {
font-size: 14px;
font-weight: 600;
color: var(--color-gray-700);
}
.media-card__link {
font-size: 13px;
font-weight: 500;
color: var(--color-primary);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: var(--transition);
}
.media-card__link:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
.media-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-gray-600);
transition: var(--transition);
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.media-slider__btn:hover:not(:disabled) {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.media-slider__btn:disabled {
opacity: 0.4;
cursor: default;
}
.media-slider__btn--prev { left: 4px; }
.media-slider__btn--next { right: 4px; }
/* ── Логотипы СМИ ── */
.media-logos {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-bottom: 32px;
}
.media-logos__item {
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 80px;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-md);
padding: 12px 20px;
transition: var(--transition);
text-decoration: none;
}
a.media-logos__item:hover {
border-color: var(--color-primary);
box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.media-logos__item img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.media-logos__name {
font-size: 13px;
font-weight: 600;
color: var(--color-gray-600);
text-align: center;
}
@media (max-width: 992px) {
.about-content__grid {
grid-template-columns: 1fr;
}
.about-content__grid--reverse {
direction: ltr;
}
.about-stats__grid {
grid-template-columns: repeat(2, 1fr);
}
.about-team__grid {
grid-template-columns: repeat(2, 1fr);
}
.about-certs__grid {
grid-template-columns: repeat(2, 1fr);
}
.media-slider {
display: none;
}
.media-logos {
gap: 12px;
}
.media-logos__item {
width: 140px;
height: 70px;
}
}
@media (max-width: 480px) {
.about-stats__grid {
grid-template-columns: 1fr;
}
.about-certs__grid {
grid-template-columns: repeat(2, 1fr);
}
.about-cert img {
height: 240px;
}
.about-team__grid {
grid-template-columns: 1fr;
}
.contacts-content {
padding: 40px 0 40px;
}
.promo-grid,
.reviews-page-list {
margin-bottom: 0 !important;
}
.faq {
padding-bottom: 24px;
padding-top: 24px;
}
}
/* ===== CONTACTS PAGE ===== */
.contacts-content__grid {
display: grid;
grid-template-columns: 1.5fr 3.5fr;
gap: 48px;
}
.contacts-info__title {
font-size: 28px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 32px;
}
.contacts-info__list {
display: flex;
flex-direction: column;
gap: 24px;
}
.contacts-info__item {
display: flex;
gap: 16px;
}
.contacts-info__icon {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
background: var(--color-primary);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contacts-info__label {
font-size: 14px;
color: var(--color-gray-600);
margin-bottom: 4px;
}
.contacts-info__value {
font-size: 18px;
font-weight: 600;
color: var(--color-gray-800);
}
.contacts-info__value a {
color: var(--color-gray-800);
transition: var(--transition);
}
.contacts-info__value a:hover {
color: var(--color-primary);
}
.contacts-info__social {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.contacts-social__link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--color-gray-100);
color: var(--color-gray-600);
transition: var(--transition);
text-decoration: none;
}
.contacts-social__link:hover {
background: var(--color-primary);
color: var(--color-white);
}
/* Share button */
.contacts-share-btn {
cursor: pointer;
transition: var(--transition);
}
.contacts-share-btn:hover {
opacity: 0.85;
}
.contacts-share-tooltip {
position: absolute;
left: 56px;
top: 50%;
transform: translateY(-50%);
background: var(--color-gray-800);
color: var(--color-white);
font-size: 13px;
padding: 6px 12px;
border-radius: var(--radius-sm);
white-space: nowrap;
animation: shareTooltipFade 2s ease forwards;
pointer-events: none;
}
@keyframes shareTooltipFade {
0%, 70% { opacity: 1; }
100% { opacity: 0; }
}
/* Contacts Gallery (inside grid) */
.contacts-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.contacts-gallery__item {
display: block;
border-radius: var(--radius-sm);
overflow: hidden;
aspect-ratio: 5 / 3;
cursor: pointer;
}
.contacts-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.contacts-gallery__item:hover img {
transform: scale(1.05);
}
/* Contacts Map (full-width section) */
.contacts-map-section {
line-height: 0;
}
.contacts-map-section iframe {
width: 100%;
height: 450px;
border: none;
display: block;
}
@media (max-width: 768px) {
.contacts-content__grid {
grid-template-columns: 1fr;
}
.contacts-map-section iframe {
height: 300px;
}
.payment-method {
padding: 16px;
}
}
/* ===== SEO TEXT ===== */
.seo-text {
padding: 40px 0;
background: var(--color-white);
}
.seo-text__title {
font-size: 28px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 20px;
text-align: left;
}
.seo-text__content {
margin: 0 auto;
}
.seo-text__visible {
margin-bottom: 0;
}
.seo-text__visible p {
font-size: 16px;
line-height: 1.8;
color: var(--color-gray-700);
margin: 0;
}
.seo-text__hidden {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease;
}
.seo-text__hidden.active {
display: block;
max-height: 5000px;
opacity: 1;
margin-top: 20px;
}
.seo-text__hidden h3 {
font-size: 22px;
font-weight: 600;
color: var(--color-heading);
margin: 32px 0 16px 0;
}
.seo-text__hidden h3:first-child {
margin-top: 0;
}
.seo-text__hidden p {
font-size: 16px;
line-height: 1.8;
color: var(--color-gray-700);
margin-bottom: 16px;
}
.seo-text__hidden ul {
list-style: none;
padding: 0;
margin: 16px 0;
}
.seo-text__hidden ul li {
font-size: 16px;
line-height: 1.8;
color: var(--color-gray-700);
margin-bottom: 12px;
padding-left: 24px;
position: relative;
}
.seo-text__hidden ul li::before {
content: '•';
position: absolute;
left: 8px;
color: var(--color-primary);
font-weight: 700;
font-size: 20px;
}
.seo-text__toggle {
display: block;
margin: 24px auto 0;
padding: 12px 32px;
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
border-radius: var(--radius-sm);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.seo-text__toggle:hover {
background: var(--color-primary);
color: var(--color-white);
}
.seo-text__toggle.active {
background: var(--color-primary);
color: var(--color-white);
}
@media (max-width: 768px) {
.seo-text {
padding: 40px 0;
}
.seo-text__title {
font-size: 24px;
margin-bottom: 20px;
}
.seo-text__visible p,
.seo-text__hidden p,
.seo-text__hidden ul li {
font-size: 15px;
}
.seo-text__hidden h3 {
font-size: 20px;
margin: 24px 0 12px 0;
}
}
/* ===== PAGINATION ===== */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 40px;
padding: 20px 0;
}
.pagination__btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--color-white);
border: 2px solid var(--color-gray-200);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
color: var(--color-primary);
}
.pagination__btn:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.pagination__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pagination__pages {
display: flex;
align-items: center;
gap: 4px;
}
.pagination__page {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
background: var(--color-white);
border: 2px solid var(--color-gray-200);
border-radius: var(--radius-sm);
font-size: 16px;
font-weight: 600;
color: var(--color-gray-700);
cursor: pointer;
transition: var(--transition);
}
.pagination__page:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.pagination__page--active {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
.pagination__page--active:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-white);
}
.pagination__dots {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
font-size: 16px;
font-weight: 600;
color: var(--color-gray-500);
}
@media (max-width: 768px) {
.pagination {
margin-top: 30px;
gap: 4px;
}
.pagination__btn,
.pagination__page {
width: 40px;
height: 40px;
min-width: 40px;
}
.pagination__dots {
min-width: 32px;
height: 40px;
}
}
/* ===== PRODUCT PAGE STYLES ===== */
/* Product Section */
.product {
padding: 40px 0 60px;
background: var(--color-white);
}
.product__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
/* Gallery */
.product__gallery {
position: sticky;
top: calc(var(--header-height) + 20px);
max-width: 650px;
min-width: 0;
display: flex;
flex-direction: row-reverse;
gap: 16px;
align-items: flex-start;
}
.product__gallery-main {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-gray-100);
max-height: 560px;
cursor: zoom-in;
flex: 1;
min-width: 0;
}
.product__gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product__gallery-slider {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-shrink: 0;
width: 80px;
}
.product__gallery-thumbs-wrap {
overflow: hidden;
flex: 1;
min-width: 0;
max-height: 460px;
width: 100%;
}
.product__gallery-thumbs {
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.3s ease;
}
.product__gallery-arrow {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--color-gray-300);
background: var(--color-white);
color: var(--color-gray-600);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
padding: 0;
}
.product__gallery-arrow:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.product__gallery-arrow:disabled {
opacity: 0.3;
cursor: default;
}
.product__gallery-arrow--prev svg {
transform: rotate(90deg);
}
.product__gallery-arrow--next svg {
transform: rotate(90deg);
}
.product__thumb {
width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: var(--radius-sm);
overflow: hidden;
border: 2px solid transparent;
transition: var(--transition);
cursor: pointer;
padding: 0;
}
.product__thumb.active {
border-color: var(--color-primary);
}
.product__thumb:hover {
border-color: var(--color-primary-light);
}
.product__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Product Info */
.product__info {
min-width: 0;
}
.product__title {
font-size: 28px;
font-weight: 700;
color: var(--color-gray-800);
margin-bottom: 16px;
line-height: 1.3;
}
/* Sizes */
.product__sizes {
margin-bottom: 16px;
}
.product__sizes-label {
font-size: 15px;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 16px;
}
.product__sizes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.product__size {
padding: 14px 16px;
text-align: center;
font-size: 14px;
font-weight: 500;
color: var(--color-gray-800);
background: var(--color-white);
border: 2px solid var(--color-gray-200);
border-radius: var(--radius-sm);
transition: var(--transition);
cursor: pointer;
}
.product__size:hover {
border-color: var(--color-primary);
}
.product__size.active {
border-color: var(--color-primary);
background: var(--color-primary);
color: var(--color-white);
}
/* Stock */
.product__stock {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--color-primary);
margin-bottom: 16px;
}
/* Purchase */
.product__purchase {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 16px;
}
.product__price-block {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.product__price-label {
font-size: 14px;
color: var(--color-gray-600);
}
.product__price {
font-size: 28px;
font-weight: 800;
color: var(--color-accent);
}
.product__cart-btn {
padding: 16px 32px;
font-size: 16px;
}
.product__callback {
font-size: 14px;
color: var(--color-primary);
text-decoration: underline;
background: none;
border: none;
cursor: pointer;
transition: var(--transition);
}
.product__callback:hover {
color: var(--color-primary-dark);
}
/* Product Tabs */
.product-tabs {
margin-top: 32px;
padding: 24px;
background: var(--color-gray-100);
border-radius: var(--radius-lg);
}
.product-tabs__nav {
display: flex;
gap: 8px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.product-tabs__btn {
padding: 14px 24px;
font-size: 12px;
font-weight: 600;
color: var(--color-gray-600);
background: var(--color-white);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
}
.product-tabs__btn:hover {
background: var(--color-gray-200);
}
.product-tabs__btn.active {
background: var(--color-primary);
color: var(--color-white);
}
.product-tabs__pane {
display: none;
background: var(--color-white);
padding: 32px;
border-radius: var(--radius-lg);
}
.product-tabs__pane.active {
display: block;
}
.product-tabs__pane h3 {
font-size: 18px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 16px;
}
.product-tabs__pane h3:not(:first-child) {
margin-top: 24px;
}
.product-tabs__pane ul {
list-style: none;
margin-bottom: 16px;
}
.product-tabs__pane li {
position: relative;
padding-left: 20px;
font-size: 15px;
color: var(--color-gray-600);
margin-bottom: 10px;
line-height: 1.6;
}
.product-tabs__pane li::before {
content: '•';
position: absolute;
left: 0;
color: var(--color-primary);
}
.product-tabs__pane p {
font-size: 15px;
color: var(--color-gray-600);
line-height: 1.7;
}
/* Related Products */
.related-products {
/* padding: 60px 0; */
background: var(--color-white);
}
.related-products__subtitle {
text-align: center;
font-size: 16px;
color: var(--color-gray-600);
margin-top: -32px;
margin-bottom: 40px;
}
.related-products__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.product-card-mini {
background: var(--color-gray-100);
border-radius: var(--radius-md);
padding: 20px;
text-align: center;
transition: var(--transition);
}
.product-card-mini:hover {
box-shadow: var(--shadow-md);
}
.product-card-mini img {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: var(--radius-sm);
margin-bottom: 16px;
}
.product-card-mini h4 {
font-size: 14px;
font-weight: 600;
color: var(--color-heading);
margin-bottom: 12px;
min-height: 40px;
}
.product-card-mini__price {
font-size: 18px;
font-weight: 700;
color: var(--color-accent);
margin-bottom: 16px;
}
/* SEO Text (product page override) */
.product .seo-text {
padding: 60px 0;
}
.product .seo-text__content {
max-width: 800px;
margin: 0 auto;
}
.product .seo-text__content p {
font-size: 15px;
color: var(--color-gray-600);
line-height: 1.8;
margin-bottom: 16px;
}
.seo-text__hidden {
display: none;
}
.seo-text__content.expanded .seo-text__hidden {
display: block;
}
.seo-text__btn {
display: block;
margin: 24px auto 0;
padding: 12px 32px;
font-size: 14px;
font-weight: 600;
color: var(--color-white);
background: var(--color-primary);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
}
.seo-text__btn:hover {
background: var(--color-primary-light);
}
/* Advantages Compact */
.advantages--compact {
padding: 60px 0;
}
.advantages--compact .advantages__grid {
grid-template-columns: repeat(3, 1fr);
}
.advantages--compact .advantage-card {
display: flex;
align-items: flex-start;
gap: 20px;
text-align: left;
padding: 24px;
}
.advantages--compact .advantage-card__icon {
width: 56px;
height: 56px;
flex-shrink: 0;
margin: 0;
}
.advantages--compact .advantage-card__title {
font-size: 15px;
margin-bottom: 4px;
}
.advantages--compact .advantage-card__subtitle {
font-size: 13px;
margin-bottom: 8px;
}
.advantages--compact .advantage-card__desc {
font-size: 13px;
}
.catalog__grid.catalog-main {
margin: 0 auto;
max-width: 1008px;
grid-template-columns: 1fr 1fr 1fr;
}
/* Product page responsive */
@media (max-width: 992px) {
.product__inner {
grid-template-columns: 1fr;
gap: 16px;
}
.catalog__grid.catalog-main {
max-width: 1008px;
grid-template-columns: 1fr 1fr;
}
.product__gallery {
position: static;
flex-direction: column;
gap: 0;
max-width: 100%;
overflow: hidden;
align-items: stretch;
}
.product__gallery-main {
margin-bottom: 16px;
flex: none;
width: 100%;
}
.product__gallery-slider {
flex-direction: row;
width: auto;
}
.product__gallery-thumbs-wrap {
max-height: none;
}
.product__gallery-thumbs {
flex-direction: row;
}
.product__gallery-arrow--prev svg,
.product__gallery-arrow--next svg {
transform: none;
}
.product__sizes-grid {
grid-template-columns: repeat(3, 1fr);
}
.related-products__grid {
grid-template-columns: repeat(2, 1fr);
}
.advantages--compact .advantages__grid {
grid-template-columns: 1fr;
}
}
.product__title.mobile-title {
display: none;
}
@media (max-width: 768px) {
.product {
padding: 24px 0 24px;
}
.product__title.mobile-title {
display: block;
}
.desktop-title {display: none;}
.product__info {
padding: 16px 0;
min-width: 0;
}
.product__title {
font-size: 22px;
margin-bottom: 12px;
}
.product__stock {
margin-bottom: 12px;
}
.product__sizes-grid {
grid-template-columns: repeat(3, 1fr);
}
.product__size {
padding: 10px 8px;
font-size: 12px;
}
.product__purchase {
flex-direction: column;
align-items: stretch;
}
.product__price-block {
justify-content: start;
margin-bottom: 8px;
}
.product-tabs {
padding: 16px;
margin-top: 24px;
}
.product-tabs__nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 20px;
}
.product-tabs__btn {
padding: 10px 12px;
font-size: 12px;
}
.product-tabs__btn:first-child {
grid-column: 1 / -1;
}
.product-tabs__pane {
padding: 16px;
}
.related-products__grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.product-card-mini {
padding: 16px;
}
.product-card-mini img {
height: 240px;
}
.related-products .product-card-mini img {
height: 160px;
}
.product-card-mini h4 {
font-size: 12px;
min-height: 32px;
}
.product-card-mini__price {
font-size: 15px;
}
}
@media (max-width: 480px) {
.catalog__grid.catalog-main {
max-width: 1008px;
grid-template-columns: 1fr;
}
.product__sizes-grid {
grid-template-columns: repeat(3, 1fr);
}
.product__thumb {
width: 60px;
height: 60px;
}
}
/* ===== REVIEWS PAGE ===== */
.reviews-page-platforms {
margin-bottom: 64px;
}
.reviews-page-platforms__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.reviews-page-platform {
display: flex;
align-items: center;
gap: 16px;
padding: 24px;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
transition: var(--transition);
}
.reviews-page-platform:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.reviews-page-platform__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.reviews-page-platform__icon svg {
width: 40px;
height: 40px;
}
.reviews-page-platform__name {
font-weight: 700;
font-size: 16px;
color: var(--color-gray-800);
}
.reviews-page-platform__meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.reviews-page-platform__stars {
color: var(--color-gold);
font-size: 14px;
line-height: 1;
}
.reviews-page-platform__rating {
font-weight: 800;
font-size: 16px;
color: var(--color-primary);
}
.reviews-page-platform__count {
font-size: 13px;
color: var(--color-gray-500);
margin-top: 2px;
}
/* Reviews list */
.reviews-page-list {
margin-bottom: 64px;
}
.reviews-page-list__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.review-card {
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
padding: 24px;
display: flex;
flex-direction: column;
transition: var(--transition);
}
.review-card:hover {
box-shadow: var(--shadow-md);
}
.review-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.review-card__author {
display: flex;
align-items: center;
gap: 12px;
}
.review-card__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
}
.review-card__name {
font-weight: 600;
font-size: 15px;
color: var(--color-gray-800);
}
.review-card__date {
font-size: 13px;
color: var(--color-gray-500);
margin-top: 2px;
}
.review-card__stars {
color: var(--color-gold);
font-size: 16px;
flex-shrink: 0;
}
.review-card__text {
font-size: 14px;
line-height: 1.6;
color: var(--color-gray-700);
flex: 1;
margin-bottom: 12px;
}
.review-card__source {
font-size: 12px;
color: var(--color-gray-400);
padding-top: 12px;
border-top: 1px solid var(--color-gray-200);
}
/* Yandex widget */
.reviews-page-widget {
margin-bottom: 24px;
}
.reviews-page-widget__frame {
width: 100%;
max-width: 900px;
height: 800px;
margin: 0 auto;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
background: var(--color-white);
}
.reviews-page-widget__frame iframe {
width: 100%;
height: 100%;
border: none;
}
@media (max-width: 1024px) {
.reviews-page-platforms__grid {
grid-template-columns: repeat(2, 1fr);
}
.reviews-page-list__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.reviews-page-platforms__grid {
grid-template-columns: 1fr;
}
.reviews-page-list__grid {
grid-template-columns: 1fr;
}
.reviews-page-widget__frame {
height: 600px;
}
}
/* ===== PROMO PAGE ===== */
.promo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 60px;
}
.promo-card {
position: relative;
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 32px 24px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-gray-200);
transition: transform 0.2s, box-shadow 0.2s;
display: flex;
flex-direction: column;
}
.promo-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.promo-card--inactive {
opacity: 0.6;
}
.promo-card--inactive:hover {
transform: none;
box-shadow: var(--shadow-sm);
}
.promo-card__badge {
position: absolute;
top: 16px;
right: 16px;
background: var(--color-accent);
color: var(--color-white);
font-size: 13px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.promo-card__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-festive-bg);
border-radius: var(--radius-md);
margin-bottom: 16px;
color: var(--color-primary);
}
.promo-card__icon svg {
width: 32px;
height: 32px;
}
.promo-card__title {
font-size: 18px;
font-weight: 700;
color: var(--color-heading);
margin: 0 0 8px;
}
.promo-card__text {
font-size: 14px;
line-height: 1.6;
color: var(--color-gray-700);
flex: 1;
}
.promo-card__text p {
margin: 0 0 8px;
}
.promo-card__text p:last-child {
margin-bottom: 0;
}
.promo-card__text ul {
margin: 8px 0;
padding-left: 20px;
}
.promo-card__text li {
margin-bottom: 4px;
}
.promo-card__expired {
display: inline-block;
margin-top: 12px;
font-size: 13px;
font-weight: 600;
color: var(--color-gray-400);
text-transform: uppercase;
}
/* Steps */
.promo-steps {
margin-bottom: 20px;
}
.promo-steps__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.promo-step {
text-align: center;
padding: 24px;
}
.promo-step__number {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
background: var(--color-primary);
color: var(--color-white);
font-size: 20px;
font-weight: 700;
border-radius: 50%;
}
.promo-step__title {
font-size: 16px;
font-weight: 700;
color: var(--color-heading);
margin: 0 0 8px;
}
.promo-step__desc {
font-size: 14px;
line-height: 1.5;
color: var(--color-gray-700);
margin: 0;
}
@media (max-width: 1024px) {
.promo-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.promo-grid {
grid-template-columns: 1fr;
}
.promo-steps__grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ── Promo Gallery Slider ── */
.promo-gallery {
padding: 60px 0;
background: var(--color-gray-50);
}
.promo-gallery-slider {
position: relative;
padding: 0 52px;
}
.promo-gallery-slider__viewport {
overflow: hidden;
}
.promo-gallery-slider__track {
display: flex;
gap: 16px;
transition: transform 0.4s ease;
will-change: transform;
}
.promo-gallery-slider__item {
flex: 0 0 calc((100% - 32px) / 3);
min-width: 0;
}
.promo-gallery-slider__link {
display: block;
border-radius: var(--radius-md);
overflow: hidden;
}
.promo-gallery-slider__link img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.promo-gallery-slider__link:hover img {
transform: scale(1.04);
}
.promo-gallery-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-gray-600);
transition: var(--transition);
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.promo-gallery-slider__btn:hover:not(:disabled) {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.promo-gallery-slider__btn:disabled {
opacity: 0.4;
cursor: default;
}
.promo-gallery-slider__btn--prev { left: 4px; }
.promo-gallery-slider__btn--next { right: 4px; }
@media (max-width: 768px) {
.promo-gallery-slider__item {
flex: 0 0 100%;
}
.promo-gallery-slider__link img {
height: 240px;
}
}
/* ===== SITEMAP PAGE ===== */
.sitemap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px 48px;
margin-bottom: 40px;
}
.sitemap__heading {
font-size: 20px;
font-weight: 700;
color: var(--color-heading);
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-primary);
}
.sitemap__heading a {
color: inherit;
text-decoration: none;
}
.sitemap__heading a:hover {
color: var(--color-primary);
}
.sitemap__category {
margin-bottom: 20px;
}
.sitemap__subheading {
font-size: 16px;
font-weight: 600;
color: var(--color-heading);
margin: 0 0 8px;
}
.sitemap__subheading a {
color: inherit;
text-decoration: none;
}
.sitemap__subheading a:hover {
color: var(--color-primary);
}
.sitemap__list {
list-style: none;
margin: 0;
padding: 0;
}
.sitemap__list li {
padding: 6px 0;
border-bottom: 1px solid var(--color-gray-100);
}
.sitemap__list li:last-child {
border-bottom: none;
}
.sitemap__list a {
color: var(--color-gray-700);
text-decoration: none;
font-size: 15px;
transition: color 0.2s;
}
.sitemap__list a:hover {
color: var(--color-primary);
}
@media (max-width: 768px) {
.sitemap {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* ===================================================
СТРАНИЦА ДОСТАВКИ И САМОВЫВОЗА
=================================================== */
/* ── Секции ── */
.del-section {
padding: 56px 0 64px;
background: var(--color-white);
}
.del-section--pickup {
background: var(--color-gray-100);
}
.del-section__h1 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
margin-bottom: 36px;
color: var(--color-heading);
}
.del-section__h2 {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
margin-bottom: 36px;
color: var(--color-heading);
}
/* ── 2-колоночный layout доставки ── */
.del-layout {
display: grid;
grid-template-columns: 1fr 500px;
gap: 48px;
align-items: start;
}
/* Вводной абзац */
.del-intro {
background: var(--color-festive-bg);
border-left: 4px solid var(--color-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 16px 20px;
font-size: 15px;
line-height: 1.75;
color: var(--color-gray-800);
margin-bottom: 20px;
font-style: italic;
}
/* ── Карточка блока (Время / Стоимость / Услуги) ── */
.del-card {
display: flex;
gap: 20px;
align-items: flex-start;
background: var(--color-white);
border: 1.5px solid var(--color-gray-200);
border-radius: var(--radius-lg);
padding: 24px;
margin-bottom: 16px;
transition: var(--transition);
}
.del-card:last-child {
margin-bottom: 0;
}
.del-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.del-card__icon {
width: 52px;
height: 52px;
min-width: 52px;
background: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
}
.del-card__body {
flex: 1;
}
.del-card__title {
font-size: 16px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 12px;
line-height: 1.3;
}
/* Список в карточке */
.del-card__list {
list-style: none;
padding: 0;
margin: 0;
}
.del-card__list li {
position: relative;
padding-left: 24px;
font-size: 14px;
color: var(--color-gray-600);
line-height: 1.6;
margin-bottom: 8px;
}
.del-card__list li:last-child {
margin-bottom: 0;
}
.del-card__list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: 700;
font-size: 13px;
}
/* Список услуг — с ценами */
.del-card__list--services li {
padding-left: 0;
margin-bottom: 12px;
border-bottom: 1px dashed var(--color-gray-200);
padding-bottom: 12px;
}
.del-card__list--services li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.del-card__list--services li::before {
display: none;
}
.del-service__name {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 4px;
}
.del-service__prices {
font-size: 13px;
color: var(--color-gray-600);
}
.del-card__note {
background: var(--color-festive-bg);
border-left: 4px solid var(--color-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 12px 16px;
font-size: 13px;
line-height: 1.75;
color: var(--color-gray-800);
margin-top: 12px;
font-style: italic;
}
/* ── Правая колонка: фото + преимущества ── */
.del-photo {
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 16px;
box-shadow: var(--shadow-md);
}
.del-photo img {
width: 100%;
height: auto;
display: block;
}
.del-benefits {
display: flex;
flex-direction: column;
gap: 10px;
}
.del-benefit {
display: flex;
align-items: flex-start;
gap: 16px;
background: var(--color-white);
border: 1.5px solid var(--color-gray-200);
border-radius: var(--radius-lg);
padding: 18px 20px;
transition: var(--transition);
}
.del-benefit__icon {
width: 48px;
height: 48px;
min-width: 48px;
background: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-white);
}
.del-benefit__body {
display: flex;
flex-direction: column;
gap: 4px;
}
.del-benefit__title {
font-size: 14px;
font-weight: 700;
color: var(--color-text);
margin: 0;
line-height: 1.3;
}
.del-benefit__sub {
font-size: 13px;
line-height: 1.5;
color: var(--color-text-muted);
margin: 0;
}
/* ── Layout самовывоза ── */
.pickup-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
/* Карточки адреса и времени */
.pickup-meta-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 28px;
}
.pickup-meta-card {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--color-white);
border-radius: var(--radius-md);
padding: 20px;
box-shadow: var(--shadow-sm);
}
.pickup-meta-card__icon {
width: 44px;
height: 44px;
min-width: 44px;
background: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
}
.pickup-meta-card__icon--green {
background: var(--color-primary);
}
.pickup-meta-card__label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-gray-600);
margin-bottom: 4px;
}
.pickup-meta-card__value {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--color-heading);
line-height: 1.3;
}
.pickup-meta-card__value--accent {
color: var(--color-primary);
}
/* Список преимуществ самовывоза */
.pickup-features-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.pickup-features-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
line-height: 1.65;
color: var(--color-gray-800);
padding: 12px 0;
border-bottom: 1px solid var(--color-gray-200);
}
.pickup-features-list li:first-child {
padding-top: 0;
}
.pickup-features-list li:last-child {
border-bottom: none;
}
.pickup-features-list__icon {
color: var(--color-primary);
flex-shrink: 0;
margin-top: 4px;
}
/* ── Галерея склада ── */
.pickup-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.pickup-gallery__item {
display: block;
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 4 / 3;
position: relative;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.pickup-gallery__item::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,0);
transition: var(--transition);
border-radius: var(--radius-md);
}
.pickup-gallery__item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.pickup-gallery__item:hover::after {
background: rgba(0,0,0,0.12);
}
.pickup-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── Лайтбокс ── */
.del-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.del-lightbox[hidden] { display: none; }
.del-lightbox__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.9);
cursor: pointer;
}
.del-lightbox__img-wrap {
position: relative;
z-index: 1;
max-width: min(90vw, 920px);
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.del-lightbox__img {
max-width: 100%;
max-height: 90vh;
border-radius: var(--radius-md);
display: block;
box-shadow: var(--shadow-xl);
object-fit: contain;
}
.del-lightbox__close {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: background 0.2s;
}
.del-lightbox__close:hover { background: rgba(255,255,255,0.28); }
.del-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: background 0.2s;
}
.del-lightbox__nav:hover { background: rgba(255,255,255,0.28); }
.del-lightbox__nav--prev { left: 16px; }
.del-lightbox__nav--next { right: 16px; }
/* ===== Map modal (Fancybox inline) ===== */
.map-modal {
width: min(720px, 92vw);
padding: 28px;
background: #fff;
border-radius: var(--radius-lg);
}
.map-modal__title {
margin: 0 0 8px;
font-size: 22px;
line-height: 1.2;
}
.map-modal__address {
margin: 0 0 16px;
color: var(--color-muted, #6b6b6b);
}
.map-modal__frame-wrap {
position: relative;
width: 100%;
aspect-ratio: 14 / 10;
overflow: hidden;
border-radius: var(--radius-md);
}
.map-modal__frame-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Кликабельный адрес самовывоза */
.pickup-meta-card__value--link,
.pickup-meta-card__value--link:hover,
.pickup-meta-card__value--link:focus,
.pickup-meta-card__value--link:active {
color: inherit;
text-decoration: none;
border-bottom: 0;
box-shadow: none;
cursor: pointer;
}
.pickup-meta-card__value--link:hover {
color: var(--color-primary, #219653);
}
/* ===== Универсальный триггер попапа карты ===== */
.js-map-trigger {
cursor: pointer;
transition: color .2s ease;
}
.js-map-trigger:hover {
color: var(--color-primary, #219653);
}
/* Футер: с триггером наследует белый цвет от .footer, ховер не меняет (белая тема) */
.footer__address.js-map-trigger,
.footer__address.js-map-trigger:hover {
color: var(--color-white);
}
.footer__address.js-map-trigger:hover {
opacity: 0.85;
}
/* Контакты:
с триггером — никаких доп. стилей, только курсор из базового правила */
/* Чекаут: подсказка интерактивна — пунктир */
.checkout-radio__hint.js-map-trigger {
text-decoration: underline dotted;
text-underline-offset: 3px;
}
/* Адрес внутри прозы (, внедрённый elki_linkify_address) — ненавязчивый пунктир */
p .js-map-trigger,
li .js-map-trigger,
.faq__answer .js-map-trigger,
.advantage-card__subtitle .js-map-trigger,
.seo-text__content .js-map-trigger,
.woocommerce-Tabs-panel .js-map-trigger {
text-decoration: underline dotted;
text-underline-offset: 3px;
}
/* ── CTA: форма перезвона ── */
.cta-banner__form--callback {
flex-direction: row;
gap: 12px;
flex-wrap: nowrap;
}
.cta-banner__privacy-note {
font-size: 12px;
color: rgba(255,255,255,0.55);
margin-top: 12px;
display: block;
line-height: 1.5;
}
.cta-banner__privacy-note a {
color: rgba(255,255,255,0.75);
text-decoration: underline;
}
/* ── Адаптив ── */
@media (max-width: 1100px) {
.del-layout {
grid-template-columns: 1fr 420px;
gap: 36px;
}
}
@media (max-width: 900px) {
.del-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.del-layout__media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
.del-photo { margin-bottom: 0; }
.pickup-layout {
grid-template-columns: 1fr;
gap: 36px;
}
}
@media (max-width: 680px) {
.pickup-meta-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.del-section { padding: 40px 0 48px; }
.del-layout__media { grid-template-columns: 1fr; }
.pickup-gallery { gap: 8px; }
.del-lightbox__nav--prev { left: 6px; }
.del-lightbox__nav--next { right: 6px; }
.cta-banner__form--callback { flex-direction: column; }
.del-card {
flex-direction: column;
gap: 12px;
padding: 18px;
}
.del-card__icon {
width: 40px;
height: 40px;
min-width: 40px;
}
.del-card__icon svg {
width: 20px;
height: 20px;
}
}
.catalog {
padding-top: 0 !important;
}
.reviews-slider__link {
height: 100%;
}
.reviews-slider__link img {
height: 100%;
object-fit: cover;
object-position: center;
}
.del-section {
padding-top: 40px;
}
.page-id-79 .promo-gallery {
padding-top: 0;
}
.page-id-79 .page-content {
padding-bottom: 0;
}
/* ===== Fancybox html5video — адаптивный контейнер ===== */
.fancybox__container.has-html5video .fancybox__content,
.has-html5video .fancybox__content {
width: auto;
height: auto;
max-width: 95vw;
max-height: 90vh;
background: transparent;
padding: 0;
}
.fancybox__html5video {
display: block;
width: auto;
height: auto;
max-width: 95vw;
max-height: 90vh;
background: transparent;
}
.fancybox__container.is-compact .has-html5video .fancybox__content,
.fancybox__container.is-compact .fancybox__html5video {
max-width: 100vw;
max-height: 100vh;
}
.fancybox__container .fancybox__slide.has-html5video .fancybox__content {
max-width: min(92vw, 420px);
width: 100%;
aspect-ratio: 9 / 16;
max-height: 90vh;
}
.fancybox__container .fancybox__slide.has-html5video .fancybox__content video {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
@media (max-width: 600px) {
.fancybox__container .fancybox__slide.has-html5video .fancybox__content {
max-width: 92vw;
}
}