/*
Theme Name: Your Theme Name
Theme URI: http://yourwebsite.com
Author: Your Name
Author URI: http://yourwebsite.com
Description: A custom theme for your website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: your-theme-name
*/
/* ==========================================================
Общие стили темы
========================================================== */
/* ----- Основные стили ----- */
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
line-height: 1.7;
color: var(--dark);
background: var(--light);
overflow-x: hidden;
box-sizing: border-box;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: inherit;
}
:root {
--primary: #3A6EA5;
--secondary: #FFC857;
--accent: #EB5E55;
--light: #F8F9FA;
--dark: #2D3436;
--gradient: linear-gradient(135deg, var(--primary) 0%, #5FA8D3 100%);
--transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--shadow-small: 0 5px 15px rgba(0, 0, 0, 0.08);
--shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* ----- Секции и заголовки ----- */
.section {
/* Уменьшен вертикальный padding для меньшего отступа между секциями */
padding: 2rem 2rem;
scroll-margin-top: 100px; /* Отступ для якорей из-за фиксированного хедера */
max-width: 1200px;
margin: 0 auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
box-sizing: border-box;
}
.section-title {
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
color: var(--primary);
margin-bottom: 4rem;
position: relative;
text-transform: uppercase;
}
.section-title::after {
content: '';
position: absolute;
bottom: -1rem;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--secondary);
border-radius: 2px;
}
/* ----- Кнопки (CTA) - общие стили ----- */
.cta-button,
.cta-button-price {
background: var(--secondary);
color: var(--dark);
padding: 1.2rem 2.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
display: inline-block;
transition: var(--transition);
border: 2px solid transparent;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
box-shadow: var(--shadow-small);
}
.cta-button:hover,
.cta-button-price:hover {
transform: translateY(-3px);
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: var(--shadow-medium);
}
/* ==========================================================
Стили хедера и навигации
========================================================== */
/* ----- Хедер ----- */
.header {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.9));
backdrop-filter: blur(10px);
box-shadow: var(--shadow-small);
position: fixed;
width: 100%;
left: 0;
z-index: 99;
transition: var(--transition);
top: 0;
height: 97px;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.logo {
display: flex;
align-items: center;
gap: 0.8rem;
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--primary);
text-decoration: none;
transition: var(--transition);
}
.logo:hover {
transform: translateY(-2px);
color: var(--accent);
}
/* ----- Бургер-меню ----- */
.burger {
display: none;
cursor: pointer;
padding: 1rem;
z-index: 100;
position: relative;
background: none;
border: none;
}
.burger-line {
width: 30px;
height: 3px;
background: var(--primary);
margin: 6px 0;
transition: var(--transition);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.burger.active .burger-line:nth-child(1) {
transform: rotate(-45deg) translate(-6px, 6px);
}
.burger.active .burger-line:nth-child(2) {
opacity: 0;
}
.burger.active .burger-line:nth-child(3) {
transform: rotate(45deg) translate(-6px, -6px);
}
/* ----- Навигационное меню ----- */
.nav-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 2.5rem;
transition: var(--transition);
flex-wrap: nowrap;
align-items: center;
box-sizing: border-box;
}
.nav-menu li,
.menu-item-has-children {
position: relative; /* Для позиционирования подменю */
}
.nav-menu a {
color: var(--dark);
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
padding: 0.5rem 0;
transition: color 0.3s ease;
}
.nav-menu a i {
font-size: 1.1rem;
color: var(--secondary);
line-height: 1;
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--secondary);
transition: width 0.3s ease;
}
.nav-menu li:hover > a::after {
width: 100%;
}
.nav-menu li:hover > a {
color: var(--primary);
}
/* Выпадающее меню */
.menu-item-has-children > a .dropdown-icon {
font-size: 0.8rem;
margin-left: 0.5rem;
transition: transform 0.3s ease;
}
.menu-item-has-children:hover > a .dropdown-icon {
transform: rotate(180deg);
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #fff;
box-shadow: var(--shadow-medium);
min-width: 220px;
z-index: 1001;
border-radius: 10px;
padding: 0.5rem 0;
opacity: 0;
visibility: hidden;
margin-top: 5px;
transition: opacity 0.3s ease, visibility 0.3s ease, margin-top 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
list-style: none;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}
.menu-item-has-children:hover > .sub-menu {
display: block;
opacity: 1;
visibility: visible;
margin-top: 0;
}
.sub-menu li { }
.sub-menu a {
display: block;
padding: 0.8rem 1.5rem;
font-size: 1rem;
transition: background-color 0.2s ease, color 0.2s ease;
font-weight: 500;
color: var(--dark);
white-space: nowrap;
text-align: left;
}
.sub-menu a i {
margin-right: 0.8rem;
width: 18px;
text-align: center;
font-size: 1rem;
color: var(--secondary);
display: inline-block;
vertical-align: middle;
}
.sub-menu a::after {
display: none;
}
.sub-menu a:hover {
background: rgba(58, 110, 165, 0.05);
color: var(--primary);
}
.cart-counter {
background: var(--accent);
color: white;
font-size: 0.75rem;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0.5rem;
padding: 0 5px;
font-weight: 600;
}
body.menu-open {
overflow: hidden;
}
/* ==========================================================
Стили слайдера (герой-секции) - ИЗМЕНЕНО
========================================================== */
.hero-slider {
position: relative;
min-height: 100vh; /* Слайдер занимает всю высоту экрана */
margin-top: 0; /* Убираем внешний отступ */
width: 100%;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease-in-out;
visibility: hidden;
}
.slide.active {
opacity: 1;
z-index: 1;
visibility: visible;
}
.slide-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
z-index: 1;
}
.slide-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
color: white;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Добавляем внутренний отступ сверху, равный высоте хедера */
padding-top: 97px; /* <<< ДОБАВЛЕНО */
box-sizing: border-box; /* <<< ВАЖНО */
}
.slide-content h1 {
font-family: 'Playfair Display', serif;
font-size: 4rem;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
line-height: 1.2;
}
.slide-content p {
font-size: 1.2rem;
margin-bottom: 2.5rem;
opacity: 0.9;
max-width: 700px;
}
.dots-container {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.dot.active {
background: var(--secondary);
transform: scale(1.2);
border-color: transparent;
}
.slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 2rem;
pointer-events: none;
}
.slider-nav button {
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
font-size: 2.5rem;
cursor: pointer;
opacity: 0.7;
transition: var(--transition);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-small);
pointer-events: auto;
backdrop-filter: blur(3px);
}
.slider-nav button:hover {
opacity: 1;
transform: scale(1.1) translateY(-50%);
background: rgba(255, 255, 255, 0.3);
}
/* --- КОНЕЦ ИЗМЕНЕНИЙ СЛАЙДЕРА --- */
/* ==========================================================
Стили секций контента
========================================================== */
/* Услуги */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
}
.service-card {
background: #fff;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
transition: var(--transition);
box-shadow: var(--shadow-small);
border: 1px solid rgba(58, 110, 165, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-medium);
}
.card-icon {
font-size: 3rem;
color: var(--primary);
margin-bottom: 1.5rem;
transition: color 0.3s ease, transform 0.3s ease;
line-height: 1;
}
.service-card:hover .card-icon {
color: var(--accent);
transform: scale(1.1);
}
.service-card h3 {
font-size: 1.5rem;
color: var(--primary);
margin-top: 0;
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
}
.service-card p {
font-size: 1rem;
color: var(--dark);
line-height: 1.6;
margin-bottom: 0;
flex-grow: 1;
}
/* Цены (таблица) */
.price-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
margin-bottom: 2rem;
}
.price-table {
width: 100%;
min-width: 600px;
border-collapse: collapse;
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-small);
border: 1px solid rgba(58, 110, 165, 0.1);
}
.price-table th,
.price-table td {
padding: 1.5rem;
text-align: left;
border-bottom: 1px solid rgba(58, 110, 165, 0.1);
vertical-align: middle;
}
.price-table th {
background: var(--primary);
color: #fff;
font-weight: 600;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.price-table .price-col,
.price-table .action-col {
text-align: center;
}
.price-table tbody tr:nth-child(even) {
background: rgba(58, 110, 165, 0.03);
}
.price-table tbody tr:hover {
background: rgba(58, 110, 165, 0.07);
}
.price-table td:last-child,
.price-table th:last-child {
border-right: none;
}
.price-table td:first-child,
.price-table th:first-child {
border-left: none;
}
/* Контакты */
.contact-wrapper {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
align-items: stretch; /* ИЗМЕНЕНО: Растягиваем элементы по высоте */
}
.contact-info {
display: flex;
flex-direction: column;
gap: 2rem;
background: #fff;
padding: 2.5rem;
border-radius: 15px;
box-shadow: var(--shadow-small);
border: 1px solid rgba(58, 110, 165, 0.1);
}
.contact-item {
display: flex;
align-items: center;
gap: 1.5rem;
font-size: 1.1rem;
color: var(--dark);
}
.contact-item i {
font-size: 1.5rem;
color: var(--primary);
transition: color 0.3s ease;
width: 25px;
text-align: center;
flex-shrink: 0;
}
.contact-item a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-item a:hover {
color: var(--accent);
}
.contact-item a:hover i {
color: var(--accent);
}
.social-links {
display: flex;
gap: 1.5rem;
margin-top: 1rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(58, 110, 165, 0.1);
}
.social-links a {
font-size: 1.8rem;
color: var(--primary);
transition: var(--transition);
line-height: 1;
}
.social-links a:hover {
transform: scale(1.2) translateY(-2px);
color: var(--accent);
}
/* ИЗМЕНЕНИЯ ДЛЯ КАРТЫ */
.map-container {
position: relative;
width: 100%;
height: 100%; /* ДОБАВЛЕНО: Заполнять высоту ячейки grid */
border-radius: 15px; /* Переносим радиус сюда */
overflow: hidden; /* Обрезаем iframe по радиусу */
box-shadow: var(--shadow-medium); /* Переносим тень сюда */
}
.map-container iframe {
width: 100%;
height: 100%; /* ИЗМЕНЕНО: Заполнять высоту контейнера .map-container */
border: none;
/* Убираем стили оформления отсюда */
display: block;
}
/* КОНЕЦ ИЗМЕНЕНИЙ ДЛЯ КАРТЫ */
/* Футер */
.footer {
background: var(--gradient);
color: #fff;
padding: 5rem 2rem 3rem 2rem;
margin-top: 4rem; /* Уменьшен отступ */
width: 100%;
box-sizing: border-box;
position: relative;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
}
.footer-section { }
.footer-section h4 {
margin-top: 0;
margin-bottom: 1.5rem;
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 1.5rem;
border-bottom: 2px solid var(--secondary);
padding-bottom: 0.8rem;
display: inline-block;
}
.footer-section p {
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section ul li {
margin-bottom: 0.8rem;
}
.footer-section ul li a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: color 0.3s ease, padding-left 0.3s ease;
display: inline-block;
position: relative;
}
.footer-section ul li a:hover {
color: var(--secondary);
padding-left: 10px;
}
.footer-section ul li a::before {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: -5px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.3s ease, left 0.3s ease;
color: var(--secondary);
}
.footer-section ul li a:hover::before {
opacity: 1;
left: -15px;
}
.newsletter-form {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.newsletter-form input {
flex: 1;
padding: 0.9rem 1.2rem;
border-radius: 8px;
border: none;
font-size: 1rem;
background: rgba(255, 255, 255, 0.15);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: background-color 0.3s ease;
}
.newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.7);
opacity: 1;
}
.newsletter-form input:focus {
background: rgba(255, 255, 255, 0.25);
outline: none;
}
.newsletter-form button {
background: var(--secondary);
color: var(--dark);
border: none;
font-size: 1rem;
padding: 0.9rem 1.5rem;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
font-weight: 600;
flex-shrink: 0;
}
.newsletter-form button:hover {
transform: translateY(-2px);
background: var(--accent);
color: #fff;
box-shadow: var(--shadow-small);
}
/* footer-bottom УДАЛЕН из CSS, так как его нет в HTML */
/* О нас */
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
box-sizing: border-box;
position: relative;
align-items: stretch;
}
.about-image-wrapper {
position: relative;
width: 100%;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-small);
box-sizing: border-box;
}
.about-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
min-height: 400px;
}
.experience-badge {
position: absolute;
bottom: -25px;
right: -25px;
background: var(--secondary);
padding: 1.8rem;
border-radius: 15px;
z-index: 2;
box-shadow: var(--shadow-medium);
text-align: center;
line-height: 1.2;
}
.experience-badge span:first-child {
display: block;
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
font-weight: 700;
color: var(--dark);
}
.experience-badge span:last-child {
display: block;
font-size: 1rem;
opacity: 0.9;
color: var(--dark);
margin-top: 0.3rem;
}
.about-text {
background: #fff;
padding: 2.5rem;
border-radius: 15px;
box-shadow: var(--shadow-small);
border: 1px solid rgba(58, 110, 165, 0.1);
width: 100%;
box-sizing: border-box;
position: relative;
z-index: 1;
align-self: start;
}
.about-block {
margin-bottom: 2rem;
}
.about-block:last-child {
margin-bottom: 0;
}
/* Добавлен стиль для обертки заголовка в "О нас" */
.about-block .title-wrapper {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--secondary);
padding-bottom: 0.5rem;
}
.about-block .title-wrapper i {
font-size: 1.8rem;
color: var(--primary);
line-height: 1;
}
.about-block h3 {
color: var(--primary);
margin: 0; /* Убираем margin у h3 */
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
border-bottom: none; /* Убираем border у h3 */
padding-bottom: 0; /* Убираем padding у h3 */
display: inline-block; /* Оставляем */
}
.about-block p {
font-size: 1.1rem;
line-height: 1.8;
color: var(--dark);
margin-bottom: 1rem;
}
.about-block p:last-child {
margin-bottom: 0;
}
/* Стиль для выделенного текста */
.about-block .highlight-text {
font-size: 1.1rem; /* Можно сделать чуть крупнее */
line-height: 1.8;
color: var(--dark);
}
.about-block .highlight-text strong {
font-weight: 700;
color: var(--primary); /* Выделяем цветом */
}
.highlight-phone {
font-size: 1.5rem;
margin-top: 1.5rem;
font-weight: 600;
}
.highlight-phone a {
color: var(--accent);
text-decoration: none;
transition: color 0.3s ease;
}
.highlight-phone a:hover {
color: var(--primary);
text-decoration: underline;
}
.features-list {
list-style: none;
padding: 0;
margin: 0; /* Убираем отступ сверху, т.к. он у .about-block */
}
.features-list li {
margin-bottom: 1rem;
padding: 0.8rem 1rem 0.8rem 2.5rem; /* Уменьшен padding */
background: rgba(58, 110, 165, 0.04);
border-radius: 10px;
transition: background-color 0.3s ease, border-color 0.3s ease;
font-size: 1.05rem;
color: var(--dark);
border-left: 4px solid var(--primary);
position: relative;
}
.features-list li .check-icon { /* Используем span для иконки */
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--primary);
transition: color 0.3s ease;
font-size: 0.9em; /* Размер иконки */
}
.features-list li:hover {
background: rgba(58, 110, 165, 0.08);
border-color: var(--secondary);
}
.features-list li:hover .check-icon {
color: var(--secondary);
}
.cta-phone {
margin-top: 2.5rem;
}
.phone-link {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-size: 1.2rem;
color: var(--accent);
text-decoration: none;
padding: 1rem 2rem;
border-radius: 50px;
background: rgba(235, 94, 85, 0.1);
transition: var(--transition);
font-weight: 600;
box-shadow: var(--shadow-small);
}
.phone-link i {
font-size: 1.3rem;
line-height: 1;
}
.phone-link:hover {
background: var(--accent);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(235, 94, 85, 0.3);
}
/* Партнеры */
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Меньше мин. ширина для большего кол-ва */
gap: 1rem; /* Меньше gap */
align-items: center;
}
.partner-item {
padding: 1rem; /* Меньше padding */
background: rgba(58, 110, 165, 0.04); /* Фон как у списка */
border-radius: 10px;
text-align: center;
font-weight: 600;
transition: var(--transition);
box-shadow: none; /* Убираем тень */
border: 1px solid transparent; /* Убираем границу */
min-height: 50px; /* Меньше высота */
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem; /* Меньше шрифт */
color: var(--dark);
}
.partner-item:hover {
background: rgba(58, 110, 165, 0.08);
transform: translateY(-3px);
box-shadow: var(--shadow-small); /* Тень при наведении */
}
/* Анимации */
.animated-block {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-block.visible {
opacity: 1;
transform: translateY(0);
}
/* Цена (карточки) */
.price-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
}
.price-card {
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-small);
transition: transform 0.4s ease, box-shadow 0.4s ease;
position: relative;
border: 1px solid rgba(58, 110, 165, 0.1);
display: flex;
flex-direction: column;
}
.price-card.featured {
border: 2px solid var(--primary);
transform: scale(1.03);
box-shadow: var(--shadow-medium);
}
.price-card.featured:hover {
transform: scale(1.05) translateY(-10px);
}
.price-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-medium);
}
.card-header {
padding: 2rem;
background: var(--secondary);
color: var(--dark);
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.price-card.featured .card-header {
background: var(--primary);
color: #fff;
}
/* Добавлен стиль для иконки в заголовке цены */
.card-header > i {
font-size: 2.5rem; /* Размер иконки */
margin-bottom: 1rem; /* Отступ под иконкой */
color: var(--primary);
display: block; /* На новой строке */
}
.price-card.featured .card-header > i {
color: var(--secondary); /* Цвет иконки для выделенной карточки */
}
.card-header h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
margin: 0 0 0.5rem 0;
color: var(--primary);
}
.price-card.featured .card-header h3 {
color: #fff;
}
.price-badge {
font-size: 1.8rem;
font-weight: 700;
color: var(--dark);
display: block;
margin-top: 0.5rem;
}
.price-badge .currency {
font-size: 1.2rem;
vertical-align: super;
margin-right: 2px;
}
.price-badge .period {
font-size: 1rem;
font-weight: 400;
opacity: 0.8;
margin-left: 5px;
}
.price-card.featured .price-badge {
color: var(--secondary);
}
.price-features {
list-style: none;
padding: 2rem;
margin: 0;
text-align: left;
background: #fff;
flex-grow: 1;
}
.price-features li {
padding: 0.8rem 0 0.8rem 2rem;
font-size: 1.05rem;
position: relative;
color: var(--dark);
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.price-features li i.fa-check { /* Используем иконку */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: var(--primary);
font-size: 0.9em;
}
.price-features li.unavailable {
color: #aaa;
text-decoration: line-through;
}
.price-features li.unavailable i.fa-check::before { /* Меняем иконку на крестик */
content: '\f00d';
color: #ccc;
}
.price-features li:last-child {
border-bottom: none;
}
.price-hint {
padding: 1.5rem 2rem;
background: rgba(58, 110, 165, 0.03);
text-align: center;
font-size: 0.95rem;
color: var(--dark);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.card-footer {
padding: 2rem;
margin-top: auto;
border-top: 1px solid rgba(0, 0, 0, 0.05);
background: #fff;
}
.cta-button-price {
display: block;
width: 100%;
text-align: center;
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.cta-button-price:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.price-card.featured .cta-button-price {
background: var(--secondary);
color: var(--dark);
border-color: var(--secondary);
}
.price-card.featured .cta-button-price:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.ribbon {
position: absolute;
top: 15px;
right: -5px;
width: 150px;
height: 35px;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(45deg);
z-index: 1;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
transform-origin: top right;
overflow: hidden;
}
.ribbon::before, .ribbon::after {
content: '';
position: absolute;
border-style: solid;
}
.ribbon::before {
border-width: 0 5px 5px 0;
border-color: transparent #a84940 transparent transparent;
right: 0;
bottom: 0;
}
.ribbon::after {
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #a84940;
left: 0;
top: 0;
}
/* ==========================================================
Стили WooCommerce - Общие и страница магазина
========================================================== */
/* ----- Общие стили WooCommerce ----- */
.woocommerce {}
.woocommerce-page .site-content {}
.woocommerce-page .entry-header { display: none; }
#primary.content-area,
#main.site-main {
max-width: 100%;
padding: 0;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.woocommerce-page h1.page-title,
.woocommerce-page h2.section-title {
font-size: 2.8rem;
color: var(--primary);
text-align: center;
margin-bottom: 4rem;
font-family: 'Playfair Display', serif;
position: relative;
text-transform: uppercase;
}
.woocommerce-page h1.page-title::after,
.woocommerce-page h2.section-title::after {
content: ''; position: absolute; bottom: -1rem; left: 50%;
transform: translateX(-50%); width: 100px; height: 4px;
background-color: var(--secondary); border-radius: 2px;
}
/* ----- Стилизация элементов сортировки и результатов ----- */
.woocommerce-result-count,
.woocommerce-ordering {
font-family: 'Montserrat', sans-serif; margin-bottom: 2rem;
color: var(--dark); font-size: 1rem;
}
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select:focus {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-color: #fff; color: var(--dark); border: 1px solid var(--secondary);
padding: 0.8rem 3rem 0.8rem 1.5rem; border-radius: 8px; font-family: 'Montserrat', sans-serif;
font-size: 1rem; cursor: pointer; outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: var(--shadow-small);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em;
line-height: 1.5; min-width: 200px;
}
.woocommerce .woocommerce-ordering select:hover { border-color: var(--primary); }
.woocommerce-shop-controls {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 1rem; padding: 1rem 0; margin-bottom: 2rem;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.woocommerce-result-count { margin-bottom: 0; }
.woocommerce-ordering { margin-bottom: 0; }
/* ----- Стилизация списка товаров на странице магазина ----- */
.woocommerce ul.products,
.woocommerce-page ul.products {
list-style: none; padding: 0; margin: 0 auto; clear: both;
display: grid; gap: 2rem; width: 100%; max-width: 1200px;
}
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after {
content: none; display: none;
}
.woocommerce ul.products li.product {
margin: 0; padding: 0; box-sizing: border-box; float: none; width: 100%;
position: relative; text-align: center; background-color: #fff; border-radius: 10px;
overflow: hidden; box-shadow: var(--shadow-small);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(58, 110, 165, 0.1); display: flex; flex-direction: column;
}
.woocommerce ul.products li.product:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
.woocommerce ul.products li.product a { text-decoration: none; color: inherit; display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; margin-bottom: 1rem; overflow: hidden; position: relative; }
.woocommerce ul.products li.product img { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.4s ease; }
.woocommerce ul.products li.product:hover img { transform: scale(1.05); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 1.15rem; color: var(--primary); margin: 0 1rem 0.5rem 1rem; font-weight: 600;
line-height: 1.4; transition: color 0.3s ease; font-family: 'Montserrat', sans-serif;
min-height: 3.2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--accent); }
.woocommerce ul.products li.product .price {
font-size: 1.3rem; color: var(--secondary); margin: 0 1rem 1.5rem 1rem; font-weight: 700;
display: block; line-height: 1; font-family: 'Montserrat', sans-serif;
}
.woocommerce ul.products li.product .price del { color: var(--dark); opacity: 0.6; font-size: 1rem; font-weight: 400; margin-right: 0.5rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; background: none; }
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol { margin-right: 2px; }
.woocommerce ul.products li.product .button {
display: block; padding: 0.8rem 1.5rem; background-color: var(--primary); color: #fff;
text-decoration: none; border-radius: 8px; text-align: center;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
border: none; cursor: pointer; font-size: 0.95rem; font-weight: 600;
margin: auto 1rem 1rem 1rem; font-family: 'Montserrat', sans-serif;
box-shadow: var(--shadow-small); line-height: 1.5;
}
.woocommerce ul.products li.product .button:hover { background-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
.woocommerce ul.products li.product .added_to_cart { display: block; margin: auto 1rem 1rem 1rem; padding: 0.8rem 1.5rem; font-size: 0.95rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.woocommerce ul.products li.product .added_to_cart:hover { color: var(--accent); text-decoration: underline; }
.woocommerce span.onsale {
position: absolute; top: 1rem; left: 1rem; background-color: var(--accent); color: #fff;
padding: 0.4rem 0.8rem; border-radius: 5px; font-size: 0.8rem; font-weight: 700;
z-index: 2; text-transform: uppercase; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); line-height: 1;
}
/* Пагинация WooCommerce */
.woocommerce nav.woocommerce-pagination { text-align: center; margin-top: 4rem; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; list-style: none; padding: 0; margin: 0; border: 1px solid rgba(58, 110, 165, 0.2); border-radius: 8px; overflow: hidden; }
.woocommerce nav.woocommerce-pagination ul li { margin: 0; border-right: 1px solid rgba(58, 110, 165, 0.2); }
.woocommerce nav.woocommerce-pagination ul li:last-child { border-right: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; padding: 0.8rem 1.2rem; min-width: 40px; min-height: 40px; text-decoration: none; color: var(--primary); background-color: #fff; transition: background-color 0.3s ease, color 0.3s ease; font-weight: 600; }
.woocommerce nav.woocommerce-pagination ul li a:hover { background-color: rgba(58, 110, 165, 0.1); color: var(--accent); }
.woocommerce nav.woocommerce-pagination ul li span.current { background-color: var(--primary); color: #fff; cursor: default; }
/* ==========================================================
Стили WooCommerce (Остальные страницы)
========================================================== */
/* ----- Кнопки WooCommerce (общие стили) ----- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.woocommerce .button {
display: inline-block; padding: 1rem 2.5rem; background-color: var(--secondary); color: var(--dark);
text-decoration: none; border-radius: 8px; text-align: center;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid transparent; cursor: pointer; font-size: 1.1rem; line-height: 1.5;
font-family: 'Montserrat', sans-serif; font-weight: 600; box-shadow: var(--shadow-small); vertical-align: middle;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #place_order:hover,
.woocommerce .button:hover {
background-color: var(--primary); color: #fff; transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(58, 110, 165, 0.2); border-color: var(--primary);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce #place_order.alt {
background-color: var(--primary); color: #fff; border-color: var(--primary);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #place_order.alt:hover {
background-color: var(--accent); border-color: var(--accent);
box-shadow: 0 10px 20px rgba(235, 94, 85, 0.3);
}
.woocommerce a.button:disabled, .woocommerce button.button:disabled, .woocommerce input.button:disabled,
.woocommerce #respond input#submit:disabled, .woocommerce #place_order:disabled,
.woocommerce a.button.disabled, .woocommerce button.button.disabled, .woocommerce input.button.disabled,
.woocommerce #respond input#submit.disabled, .woocommerce #place_order.disabled {
opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}
/* ----- Страница корзины ----- */
.woocommerce-cart .woocommerce { max-width: 1200px; margin: 0 auto; }
.woocommerce-cart-form { margin-bottom: 3rem; }
.woocommerce table.shop_table.cart { width: 100%; border-collapse: collapse; margin-bottom: 2rem; background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-small); border: 1px solid rgba(58, 110, 165, 0.1); }
.woocommerce table.shop_table.cart thead th { background-color: var(--primary); color: #fff; font-weight: 600; padding: 1.2rem 1.5rem; text-align: left; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid rgba(255, 255, 255, 0.1); }
.woocommerce table.shop_table.cart thead .product-name { text-align: left; }
.woocommerce table.shop_table.cart thead .product-price,
.woocommerce table.shop_table.cart thead .product-quantity,
.woocommerce table.shop_table.cart thead .product-subtotal { text-align: center; width: 15%; }
.woocommerce table.shop_table.cart thead .product-remove { width: 5%; text-align: center; }
.woocommerce table.shop_table.cart tbody td { padding: 1.5rem; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(58, 110, 165, 0.1); }
.woocommerce table.shop_table.cart tbody tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table.cart td.product-remove a.remove { color: var(--accent); font-size: 1.2rem; transition: color 0.3s ease, transform 0.3s ease; text-decoration: none; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: rgba(235, 94, 85, 0.1); }
.woocommerce table.shop_table.cart td.product-remove a.remove:hover { color: #fff; background: var(--accent); transform: scale(1.1); }
.woocommerce table.shop_table.cart td.product-thumbnail img { max-width: 80px; height: auto; border-radius: 8px; box-shadow: var(--shadow-small); display: block; }
.woocommerce table.shop_table.cart td.product-name a { font-size: 1.1rem; color: var(--primary); font-weight: 600; text-decoration: none; transition: color 0.3s ease; }
.woocommerce table.shop_table.cart td.product-name a:hover { color: var(--accent); }
.woocommerce table.shop_table.cart dl.variation { font-size: 0.9rem; color: #666; margin-top: 0.5rem; padding-left: 0; }
.woocommerce table.shop_table.cart dl.variation dt,
.woocommerce table.shop_table.cart dl.variation dd { display: inline-block; margin: 0 0.5rem 0 0; padding: 0; }
.woocommerce table.shop_table.cart dl.variation dt { font-weight: bold; }
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal { color: var(--secondary); font-weight: 700; font-size: 1.2rem; text-align: center; }
.woocommerce table.shop_table.cart td.product-quantity .quantity { display: inline-flex; align-items: center; border: 1px solid var(--secondary); border-radius: 8px; overflow: hidden; }
.woocommerce table.shop_table.cart td.product-quantity .qty { width: 50px; height: 40px; text-align: center; padding: 0.5rem; border: none; font-size: 1rem; background: #fff; color: var(--dark); font-weight: 600; box-shadow: none; -moz-appearance: textfield; }
.woocommerce table.shop_table.cart td.product-quantity .qty::-webkit-outer-spin-button,
.woocommerce table.shop_table.cart td.product-quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .cart-collaterals .actions,
.woocommerce table.cart td.actions { padding: 1.5rem; background-color: rgba(58, 110, 165, 0.03); border-top: 1px solid rgba(58, 110, 165, 0.1); }
.woocommerce .cart-collaterals .actions .coupon,
.woocommerce table.cart td.actions .coupon { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.woocommerce .cart-collaterals .actions .coupon label,
.woocommerce table.cart td.actions .coupon label { display: none; }
.woocommerce .cart-collaterals .actions .coupon input.input-text,
.woocommerce table.cart td.actions .coupon input.input-text { padding: 1rem; border: 1px solid var(--secondary); border-radius: 8px; font-size: 1rem; background: #fff; box-shadow: var(--shadow-small); flex-grow: 1; min-width: 150px; }
.woocommerce .cart-collaterals .actions .button,
.woocommerce table.cart td.actions .button { margin-left: 1rem; flex-shrink: 0; }
.woocommerce .cart-collaterals .actions > .button,
.woocommerce table.cart td.actions > .button { float: right; }
/* ----- Блок "Итого" в корзине ----- */
.woocommerce .cart-collaterals { margin-top: 3rem; display: flex; justify-content: flex-end; }
.woocommerce .cart-collaterals .cart_totals { background-color: #fff; padding: 2.5rem; border-radius: 12px; box-shadow: var(--shadow-medium); border: 1px solid rgba(58, 110, 165, 0.1); width: 100%; max-width: 450px; box-sizing: border-box; }
.woocommerce .cart-collaterals .cart_totals h2 { font-size: 1.8rem; color: var(--primary); margin-top: 0; margin-bottom: 2rem; font-family: 'Playfair Display', serif; border-bottom: 2px solid var(--secondary); padding-bottom: 0.8rem; text-align: left; }
.woocommerce .cart-collaterals .cart_totals table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; font-size: 1.1rem; }
.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td { padding: 1rem 0; text-align: left; border-bottom: 1px solid rgba(58, 110, 165, 0.1); color: var(--dark); }
.woocommerce .cart-collaterals .cart_totals table tr:last-child th,
.woocommerce .cart-collaterals .cart_totals table tr:last-child td { border-bottom: none; }
.woocommerce .cart-collaterals .cart_totals table th { font-weight: 600; color: var(--primary); padding-right: 1rem; }
.woocommerce .cart-collaterals .cart_totals table td { text-align: right; font-weight: 600; }
.woocommerce .cart-collaterals .cart_totals table .order-total th,
.woocommerce .cart-collaterals .cart_totals table .order-total td { font-size: 1.3rem; color: var(--secondary); font-weight: 700; padding-top: 1.5rem; }
.woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-totals th,
.woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-totals td { font-size: 1rem; font-weight: normal; }
.woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-calculator { text-align: right; font-size: 0.9rem; }
.woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-calculator a { color: var(--primary); text-decoration: none; }
.woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-calculator a:hover { text-decoration: underline; color: var(--accent); }
.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; padding: 1.2rem; font-size: 1.2rem; }
/* ----- Страница оформления заказа (Checkout) ----- */
/* --- Checkout Layout Fixes --- */
.woocommerce-page.woocommerce-checkout #primary {
padding-top: 105px; /* <<< ИЗМЕНЕННЫЙ ОТСТУП СВЕРХУ */
margin-top: 0;
padding-left: 0;
padding-right: 0;
max-width: none;
}
.woocommerce-page.woocommerce-checkout main#main {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.woocommerce-page.woocommerce-checkout .entry-content .wp-block-group.alignwide {
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.woocommerce-page.woocommerce-checkout .entry-content .wp-block-group__inner-container {
max-width: 1200px; /* <<< Ваша стандартная ширина контента */
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 2rem; /* <<< Ваши стандартные боковые отступы */
padding-right: 2rem;
box-sizing: border-box;
}
.woocommerce-page.woocommerce-checkout .entry-content .wp-block-group__inner-container > div.woocommerce {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* --- Конец Checkout Layout Fixes --- */
/* --- Остальные стили Checkout --- */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.woocommerce-checkout .col-left { grid-column: 1 / 2; }
.woocommerce-checkout .col-right { grid-column: 2 / 3; }
.woocommerce-checkout h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--primary); margin-top: 0; margin-bottom: 1.5rem; border-bottom: 2px solid var(--secondary); padding-bottom: 0.5rem; }
.woocommerce-checkout #order_review { background-color: #fff; padding: 2rem; border-radius: 12px; box-shadow: var(--shadow-small); border: 1px solid rgba(58, 110, 165, 0.1); }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; font-size: 1rem; }
.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td { padding: 1rem; border-bottom: 1px solid rgba(58, 110, 165, 0.1); text-align: left; font-weight: 600; color: var(--primary); background-color: rgba(58, 110, 165, 0.03); }
.woocommerce-checkout-review-order-table thead th:last-child,
.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce-checkout-review-order-table tbody td { padding: 1rem; border-bottom: 1px solid rgba(58, 110, 165, 0.1); color: var(--dark); vertical-align: middle; }
.woocommerce-checkout-review-order-table tbody .product-name { font-weight: 600; }
.woocommerce-checkout-review-order-table tbody .product-total { text-align: right; font-weight: 600; }
.woocommerce-checkout-review-order-table tbody .product-quantity { padding-left: 0.5rem; font-size: 0.9em; color: #666; }
.woocommerce-checkout #payment { background-color: rgba(58, 110, 165, 0.03); padding: 2rem; border-radius: 12px; border: 1px solid rgba(58, 110, 165, 0.1); }
.woocommerce-checkout #payment ul.wc_payment_methods { list-style: none; padding: 0; margin: 0 0 1.5rem 0; border-bottom: 1px solid rgba(58, 110, 165, 0.1); }
.woocommerce-checkout #payment li.wc_payment_method { margin-bottom: 1rem; }
.woocommerce-checkout #payment li.wc_payment_method label { display: inline-block; font-weight: 600; cursor: pointer; font-family: 'Montserrat', sans-serif; color: var(--dark); font-size: 1.1rem; margin-left: 0.5rem; }
.woocommerce-checkout #payment li.wc_payment_method label img { max-height: 24px; vertical-align: middle; margin-left: 0.5rem; box-shadow: none; }
.woocommerce-checkout #payment li.wc_payment_method input[type="radio"] { margin-right: 0.5rem; vertical-align: middle; width: 18px; height: 18px; }
.woocommerce-checkout #payment div.payment_box { margin-top: 1rem; padding: 1.5rem; background-color: #fff; border: 1px solid rgba(58, 110, 165, 0.1); border-radius: 8px; color: var(--dark); font-size: 1rem; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); position: relative; }
.woocommerce-checkout #payment div.payment_box::before { content: ''; display: block; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #fff transparent; position: absolute; top: -8px; left: 20px; z-index: 1; }
.woocommerce-checkout #payment div.payment_box p { font-size: 1rem; margin: 0 0 1rem 0; line-height: 1.6; }
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment .form-row.place-order { padding: 0; margin-top: 1.5rem; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1.5rem; font-size: 0.95rem; color: #666; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-link { color: var(--primary); text-decoration: none; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-link:hover { text-decoration: underline; color: var(--accent); }
.woocommerce-checkout #place_order { display: block; width: 100%; padding: 1.2rem; font-size: 1.2rem; font-weight: 700; }
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields { margin-bottom: 2rem; }
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 { margin-bottom: 1.5rem; }
.woocommerce form .form-row { padding: 0; margin-bottom: 1.5rem; position: relative; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 48%; float: left; overflow: visible; box-sizing: border-box; }
.woocommerce form .form-row-first { margin-right: 4%; clear: left; }
.woocommerce form .form-row-last { margin-right: 0; }
.woocommerce form .form-row-wide { clear: both; width: 100%; }
.woocommerce form .form-row label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--dark); font-family: 'Montserrat', sans-serif; font-size: 1rem; }
.woocommerce form .form-row label .required { color: var(--accent); font-weight: bold; margin-left: 3px; text-decoration: none; }
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="search"],
.woocommerce form .form-row input[type="url"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-input-wrapper > .input-text { width: 100%; padding: 1rem 1.2rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; font-size: 1rem; color: var(--dark); background-color: #fff; box-sizing: border-box; font-family: 'Montserrat', sans-serif; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); transition: border-color 0.3s ease, box-shadow 0.3s ease; line-height: 1.5; }
.woocommerce form .form-row select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; padding-right: 3rem; cursor: pointer; }
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(58, 110, 165, 0.15); }
.woocommerce form .form-row textarea { resize: vertical; min-height: 120px; }
.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"] { margin-right: 0.8rem; vertical-align: middle; width: 18px; height: 18px; margin-top: -2px; }
.woocommerce form .form-row input[type="checkbox"] + label,
.woocommerce form .form-row input[type="radio"] + label { display: inline-block; margin-bottom: 0; font-weight: normal; }
.select2-container .select2-selection--single { height: calc(2rem + 2px + 1.5em); border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(2rem + 1.5em); padding-left: 1.2rem; color: var(--dark); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(2rem + 2px + 1.5em); right: 1rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--primary) transparent transparent transparent; border-width: 6px 5px 0 5px; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--primary) transparent; border-width: 0 5px 6px 5px; }
.select2-dropdown { border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); box-shadow: var(--shadow-small); }
/* Сообщения WooCommerce (уведомления, ошибки) */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice,
div.woocommerce > .woocommerce-message, div.woocommerce > .woocommerce-info,
div.woocommerce > .woocommerce-error, div.woocommerce > .woocommerce-notice {
padding: 1.5rem 2rem 1.5rem 4rem; margin: 0 0 2rem 0; border-radius: 10px; color: #fff; list-style: none inside; border: none; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; box-shadow: var(--shadow-small); position: relative; line-height: 1.6; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-notice::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 1.5rem; top: 1.5rem; font-size: 1.2em; }
.woocommerce-message { background-color: #4CAF50; } .woocommerce-message::before { content: '\f058'; }
.woocommerce-info { background-color: #2196F3; } .woocommerce-info::before { content: '\f05a'; }
.woocommerce-error { background-color: #f44336; } .woocommerce-error::before { content: '\f071'; }
.woocommerce-notice { background-color: #ff9800; } .woocommerce-notice::before { content: '\f06a'; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a, .woocommerce-notice a { color: #fff; font-weight: bold; text-decoration: underline; }
.woocommerce-message a:hover, .woocommerce-info a:hover, .woocommerce-error a:hover, .woocommerce-notice a:hover { text-decoration: none; }
.woocommerce-error li { margin: 0.5rem 0 0.5rem 1rem; padding: 0; }
/* Стили для валидации форм */
.woocommerce form .form-row.woocommerce-validated .input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated textarea { border-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15); }
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea { border-color: #f44336; box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.15); }
.woocommerce form .form-row.woocommerce-invalid label { color: #f44336; }
.woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection--single { border-color: #f44336; }
/* ==========================================================
Стилизация страницы "Мой аккаунт" WooCommerce
========================================================== */
.woocommerce-account .woocommerce { max-width: 1200px; margin: 4rem auto; padding: 2.5rem; background-color: #fff; border-radius: 15px; box-shadow: var(--shadow-medium); display: flex; gap: 3rem; border: 1px solid rgba(58, 110, 165, 0.1); position: relative; }
.woocommerce-account .woocommerce::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--gradient); border-radius: 15px 15px 0 0; }
.woocommerce-account .woocommerce-MyAccount-navigation { width: 250px; flex-shrink: 0; border-right: 1px solid rgba(58, 110, 165, 0.1); padding-right: 2rem; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 0.5rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 0.8rem 1.5rem; color: var(--dark); text-decoration: none; border-radius: 8px; transition: background-color 0.3s ease, color 0.3s ease, border-left-color 0.3s ease; font-size: 1.05rem; font-weight: 500; border-left: 4px solid transparent; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background-color: rgba(58, 110, 165, 0.05); color: var(--primary); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a { background-color: rgba(58, 110, 165, 0.1); color: var(--primary); font-weight: 600; border-left-color: var(--primary); }
.woocommerce-account .woocommerce-MyAccount-content { flex: 1; }
.woocommerce-account .woocommerce-MyAccount-content p:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content address { margin-bottom: 1.5rem; line-height: 1.8; font-size: 1.1rem; color: var(--dark); }
.woocommerce-account .woocommerce-MyAccount-content address { font-style: normal; border-left: 3px solid var(--secondary); padding-left: 1rem; }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { color: var(--primary); margin-top: 2rem; margin-bottom: 1.5rem; font-family: 'Playfair Display', serif; font-size: 1.8rem; border-bottom: 2px solid var(--secondary); padding-bottom: 0.5rem; }
.woocommerce-account .woocommerce-MyAccount-content h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content h3:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; font-size: 1rem; border: 1px solid rgba(58, 110, 165, 0.1); border-radius: 8px; overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th { background-color: rgba(58, 110, 165, 0.05); color: var(--primary); font-weight: 600; padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid rgba(58, 110, 165, 0.1); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td { padding: 1rem 1.2rem; border-bottom: 1px solid rgba(58, 110, 165, 0.1); vertical-align: middle; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td .button { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
.woocommerce-account .woocommerce-MyAccount-content form { margin-top: 2rem; padding: 2rem; border: 1px solid rgba(58, 110, 165, 0.1); border-radius: 10px; background: rgba(58, 110, 165, 0.02); }
.woocommerce-account .woocommerce-MyAccount-content form legend { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--primary); margin-bottom: 1rem; font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-content form .button { margin-top: 1rem; }
/* ==========================================================
Стилизация заголовков страниц WooCommerce (переопределение)
========================================================== */
.woocommerce-page h1.page-title,
.single-product div.product .product_title,
.woocommerce-order-received .entry-title,
.woocommerce-account .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title { font-family: 'Playfair Display', serif !important; font-size: 2.8rem !important; color: var(--primary) !important; text-align: center !important; margin-top: 0 !important; margin-bottom: 4rem !important; line-height: 1.2 !important; border-bottom: none !important; padding-bottom: 0 !important; text-transform: uppercase !important; position: relative !important; }
.woocommerce-page h1.page-title::after,
.single-product div.product .product_title::after,
.woocommerce-order-received .entry-title::after,
.woocommerce-account .entry-title::after,
.woocommerce-cart .entry-title::after,
.woocommerce-checkout .entry-title::after { content: '' !important; position: absolute !important; bottom: -1rem !important; left: 50% !important; transform: translateX(-50%) !important; width: 100px !important; height: 4px !important; background: var(--secondary) !important; border-radius: 2px !important; }
/* ==========================================================
Стилизация категорий товаров WooCommerce
========================================================== */
.woocommerce ul.products li.product-category { text-align: center; }
.woocommerce ul.products li.product-category img { aspect-ratio: 4 / 3; }
.woocommerce ul.products li.product-category .woocommerce-loop-category__title { margin-top: 1rem; min-height: auto; display: block; }
.woocommerce ul.products li.product-category mark.count { display: inline-block; background-color: var(--secondary); color: var(--dark); border-radius: 5px; padding: 0.2rem 0.6rem; font-size: 0.8rem; font-weight: 600; margin-left: 0.5rem; vertical-align: middle; }
.woocommerce .product-categories { margin-bottom: 3rem; }
.woocommerce .product-categories ul.products { max-width: 1200px; }
/* ==========================================================
Стили для сгруппированных товаров (Grouped Products)
========================================================== */
.woocommerce div.product form.cart.grouped_form { margin-bottom: 2rem; border: 1px solid rgba(58, 110, 165, 0.1); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow-small); }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list { width: 100%; border-collapse: collapse; }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list thead th { background-color: rgba(58, 110, 165, 0.05); color: var(--primary); font-weight: 600; padding: 1rem 1.5rem; text-align: left; border-bottom: 1px solid rgba(58, 110, 165, 0.1); }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list tbody tr { border-bottom: 1px solid rgba(58, 110, 165, 0.1); transition: background-color 0.3s ease; }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list tbody tr:last-child { border-bottom: none; }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list tbody tr:hover { background-color: rgba(58, 110, 165, 0.03); }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list td { padding: 1.5rem; vertical-align: middle; font-size: 1rem; color: var(--dark); }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list td.quantity .quantity { display: inline-block; }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list td.quantity .input-text.qty { width: 70px; height: 40px; padding: 0.5rem; text-align: center; border: 1px solid var(--secondary); border-radius: 8px; font-size: 1rem; background: #fff; box-shadow: var(--shadow-small); font-weight: 600; -moz-appearance: textfield; }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list td.quantity .input-text.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list td.quantity .input-text.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list td.label { text-align: left; }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list td.label a { color: var(--primary); text-decoration: none; font-weight: 600; transition: color 0.3s ease; }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list td.label a:hover { color: var(--accent); }
.woocommerce div.product form.cart.grouped_form table.woocommerce-grouped-product-list td.price { color: var(--secondary); font-weight: 700; font-size: 1.1rem; text-align: right; }
.woocommerce div.product form.cart.grouped_form .button.single_add_to_cart_button { margin: 1.5rem; float: right; }
.woocommerce div.product form.cart.grouped_form table .product-thumbnail { display: none; }
/* ==========================================================
Медиа-запросы для адаптивности
========================================================== */
/* Планшеты и средние экраны (991px и ниже) */
@media (max-width: 991px) {
/* ----- Общие ----- */
.section {
padding: 5rem 1.5rem; /* Уменьшаем еще паддинги секций */
}
.section-title {
font-size: 2.5rem;
margin-bottom: 3rem;
}
.section-title::after {
bottom: -0.8rem;
width: 80px;
}
.container {
padding: 0 1.5rem;
}
/* ----- Хедер и Навигация ----- */
.header {
height: 85px; /* Немного уменьшим хедер */
}
/* Слайдер уже настроен на 100vh, отступы не нужны */
.slide-content {
padding-top: 85px; /* Отступ контента под хедером */
}
.slide-content h1 { font-size: 2.8rem; } /* Меньше заголовок слайдера */
.slide-content p { font-size: 1.1rem; }
.nav-container {
padding: 0.5rem 1.5rem;
}
.burger {
display: block;
z-index: 100;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 80%;
max-width: 320px;
background: var(--light);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
z-index: 98;
padding: 4rem 1.5rem 2rem 1.5rem;
box-sizing: border-box;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-menu.active { right: 0; }
body.menu-open { overflow: hidden; }
.nav-menu li { width: 100%; text-align: center; }
.nav-menu a { font-size: 1.3rem; padding: 0.8rem 0; justify-content: center; }
.nav-menu a::after { left: 50%; transform: translateX(-50%); }
/* Мобильное Подменю */
.sub-menu {
position: static; display: none; width: 100%; max-width: 100%;
transform: none; box-shadow: none; border: none;
background: rgba(58, 110, 165, 0.05); padding: 0.5rem 0;
margin-top: 0.8rem; margin-left: 0; margin-right: 0;
opacity: 1; visibility: visible; border-radius: 8px; z-index: auto;
}
.menu-item-has-children.open > .sub-menu { display: block; }
.sub-menu a { font-size: 1.1rem; padding: 0.6rem 1rem; text-align: center; display: block; }
.sub-menu a i { margin-right: 0.5rem; width: auto; }
.sub-menu a:hover { background: rgba(58, 110, 165, 0.1); }
.dropdown-icon {}
/* ----- Секция "О нас" ----- */
.about-content {
grid-template-columns: 1fr;
gap: 2.5rem;
padding: 0 1.5rem;
}
.about-image-wrapper {
order: 1;
min-height: 350px;
aspect-ratio: 16 / 10;
height: auto;
}
.about-image { height: 100%; min-height: unset; }
.about-text { order: 2; padding: 2rem; align-self: start; }
.experience-badge { padding: 1.5rem; bottom: -20px; right: 10px; }
.experience-badge span:first-child { font-size: 2.2rem; }
/* ----- Услуги / Карточки цен ----- */
.services-grid, .price-cards { gap: 2rem; }
/* ----- Таблица цен ----- */
.price-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { min-width: 700px; }
/* ----- WooCommerce Товары/Категории ----- */
.woocommerce ul.products { /* Применяем ко всем сеткам */
grid-template-columns: repeat(2, 1fr); /* 2 колонки */
gap: 1.5rem;
padding: 0 1.5rem; /* Добавляем боковые отступы к сетке */
}
.woocommerce ul.products li.product { min-height: auto; }
/* ----- Контакты ----- */
.contact-wrapper { grid-template-columns: 1fr; gap: 2.5rem; }
/* Высота карты будет подстраиваться автоматически благодаря align-items: stretch */
.map-container iframe {}
/* ----- Футер ----- */
.footer-content { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.5rem; }
.footer { padding: 4rem 1.5rem 2rem 1.5rem; margin-top: 3rem;} /* Уменьшен отступ над футером */
/* ----- Корзина ----- */
.woocommerce table.shop_table.cart {
display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
border: none; box-shadow: none; border-radius: 0; background: none;
}
.woocommerce table.shop_table.cart thead { display: table-header-group; }
.woocommerce table.shop_table.cart tbody { display: table-row-group; }
.woocommerce table.shop_table.cart tr { display: table-row; border: none; box-shadow: none; background: none; margin: 0;}
.woocommerce table.shop_table.cart td { display: table-cell; width: auto !important; text-align: left !important; border-bottom: 1px solid rgba(58, 110, 165, 0.1); }
.woocommerce table.shop_table.cart td::before { display: none; }
.woocommerce table.shop_table.cart td.product-thumbnail img { max-width: 60px; }
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal,
.woocommerce table.shop_table.cart td.product-remove { text-align: center !important; }
.woocommerce table.shop_table.cart td.product-quantity .quantity { display: inline-flex; }
.woocommerce table.cart td.actions { display: table-cell; }
.woocommerce table.cart td.actions .coupon { flex-direction: row; margin-bottom: 0;}
.woocommerce table.cart td.actions .coupon .button { width: auto; margin-left: 1rem; }
.woocommerce table.cart td.actions > .button { float: right; width: auto;}
/* ----- Checkout ----- */
/* Отступ сверху для #primary */
.woocommerce-page.woocommerce-checkout #primary { padding-top: 100px; } /* Отступ для планшета */
/* Центрирование контейнера */
.woocommerce-page.woocommerce-checkout .entry-content .wp-block-group__inner-container { padding-left: 1.5rem; padding-right: 1.5rem; } /* Уменьшаем боковые отступы */
.woocommerce-checkout form.checkout {
grid-template-columns: 1fr; /* 1 колонка */
gap: 2.5rem;
}
.woocommerce-checkout .col-left,
.woocommerce-checkout .col-right { grid-column: 1 / -1; }
.woocommerce-checkout #order_review { margin-top: 1rem; }
/* ----- Мой Аккаунт ----- */
/* Отступ сверху для #primary */
.woocommerce-page.woocommerce-account #primary { padding-top: 100px; } /* Отступ для планшета */
.woocommerce-account .woocommerce {
padding: 2rem; gap: 2rem; flex-direction: column; /* 1 колонка */
}
.woocommerce-account .woocommerce-MyAccount-navigation {
width: 100%; border-right: none; padding-right: 0;
border-bottom: 1px solid rgba(58, 110, 165, 0.1);
padding-bottom: 1.5rem; margin-bottom: 1.5rem;
}
.woocommerce-account .woocommerce-MyAccount-content { padding-left: 0; }
}
/* Маленькие экраны (767px и ниже) */
@media (max-width: 767px) {
/* ----- Общие ----- */
.section { padding: 4rem 1rem; }
.section-title { font-size: 2rem; margin-bottom: 2.5rem; }
.section-title::after { bottom: -0.6rem; width: 70px; }
.container { padding: 0 1rem; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.4rem; }
.cta-button, .cta-button-price, .woocommerce .button { padding: 0.8rem 1.6rem; font-size: 0.9rem; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order { padding: 0.9rem 1.8rem; font-size: 0.95rem; }
/* ----- Хедер и Навигация ----- */
.header { height: 70px; }
.slide-content { padding-top: 70px; } /* Отступ контента под хедером */
.hero-slider { min-height: 65vh; }
.slide-content h1 { font-size: 1.6rem; margin-bottom: 1rem;}
.slide-content p { font-size: 0.9rem; margin-bottom: 1.5rem;}
.slider-nav { padding: 0 1rem; }
.slider-nav button { width: 35px; height: 35px; font-size: 1.8rem; } /* Меньше кнопки */
.dots-container { bottom: 0.8rem; }
.dot { width: 10px; height: 10px; }
.nav-container { padding: 0.5rem 1rem; }
.logo { font-size: 1.5rem; }
.burger-line { width: 25px; height: 2px;} /* Меньше бургер */
/* ----- Секция "О нас" ----- */
.about-content { gap: 1.5rem; padding: 0 1rem; }
.about-image-wrapper { aspect-ratio: 4 / 3; }
.about-text { padding: 1.5rem; }
.about-block h3 { font-size: 1.4rem; }
.about-block p { font-size: 0.95rem; }
.features-list li { font-size: 0.9rem; padding: 0.7rem 1rem 0.7rem 2rem;}
.experience-badge { padding: 0.8rem 1rem; bottom: -15px; right: 5px; }
.experience-badge span:first-child { font-size: 1.6rem; }
.experience-badge span:last-child { font-size: 0.85rem; }
.phone-link { font-size: 1rem; padding: 0.8rem 1.5rem;}
/* ----- Услуги / Цены (карточки) --- */
.services-grid, .price-cards { grid-template-columns: 1fr; gap: 1.5rem; }
.service-card, .price-card { padding: 1.8rem 1.2rem; }
.card-header { padding: 1.2rem; }
.card-header h3 { font-size: 1.3rem; }
.price-badge { font-size: 1.3rem; }
.price-features { padding: 1.2rem; }
.price-features li { font-size: 0.9rem; padding: 0.5rem 0 0.5rem 1.6rem; }
.card-footer { padding: 1.2rem; }
/* ----- Таблицы (Цены, Корзина) - Блочный вид ----- */
.price-table, .woocommerce table.shop_table.cart { display: block; border: none; box-shadow: none; background: none; border-radius: 0; }
.price-table thead, .woocommerce table.shop_table.cart thead { display: none; }
.price-table tbody, .price-table tr, .woocommerce table.shop_table.cart tbody, .woocommerce table.shop_table.cart tr { display: block; width: 100%; }
.price-table tr, .woocommerce table.shop_table.cart tr { margin-bottom: 1.5rem; border: 1px solid rgba(58, 110, 165, 0.1); border-radius: 10px; background: #fff; box-shadow: var(--shadow-small); overflow: hidden; }
.price-table td, .woocommerce table.shop_table.cart td { display: block; width: 100% !important; text-align: right !important; padding: 0.8rem 1rem; border: none; border-bottom: 1px dotted rgba(58, 110, 165, 0.1); position: relative; min-height: 40px; box-sizing: border-box; }
.price-table td:last-child, .woocommerce table.shop_table.cart td:last-child { border-bottom: none; }
.price-table td::before, .woocommerce table.shop_table.cart td::before { content: attr(data-title); float: left; font-weight: bold; margin-right: 1rem; color: var(--primary); text-align: left; text-transform: uppercase; font-size: 0.8em; width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; padding-top: 2px; }
.woocommerce table.shop_table.cart td.product-remove { padding: 1rem; min-height: auto; border-bottom: none; }
.woocommerce table.shop_table.cart td.product-remove a.remove { position: absolute; top: 0.5rem; right: 0.5rem; width: 25px; height: 25px; line-height: 25px; font-size: 1rem;}
.woocommerce table.shop_table.cart td.product-remove::before { display: none; }
.woocommerce table.shop_table.cart td.product-thumbnail { text-align: center !important; padding-bottom: 0.5rem; }
.woocommerce table.shop_table.cart td.product-thumbnail::before { display: none; }
.woocommerce table.shop_table.cart td.product-thumbnail img { max-width: 50px; margin: 0 auto;}
.woocommerce table.shop_table.cart td.product-name { text-align: right !important; }
.woocommerce table.shop_table.cart td.product-name a { font-size: 0.95rem; }
.woocommerce table.shop_table.cart td.product-price, .woocommerce table.shop_table.cart td.product-subtotal { font-size: 1rem; }
.woocommerce table.shop_table.cart td.product-quantity .quantity { display: inline-block; margin: 0; }
.woocommerce table.shop_table.cart td.product-quantity .qty { height: 32px; width: 40px; padding: 0.3rem;}
.woocommerce table.cart td.actions { background: none; padding: 1rem 1rem 0 1rem; border: none; }
.woocommerce table.cart td.actions::before { display: none; }
.woocommerce table.cart td.actions .coupon { flex-direction: column; align-items: stretch; gap: 0.5rem; margin-bottom: 1rem; }
.woocommerce table.cart td.actions .coupon input.input-text { width: 100%; }
.woocommerce table.cart td.actions .coupon .button { width: 100%; margin-left: 0; }
.woocommerce table.cart td.actions > .button { width: 100%; float: none; }
/* ----- WooCommerce Товары/Категории ----- */
.woocommerce ul.products { grid-template-columns: 1fr; gap: 1rem; padding: 0 1rem; }
.woocommerce .woocommerce-shop-controls { padding: 1rem 0; margin-bottom: 1.5rem; }
.woocommerce-result-count { text-align: center; margin-bottom: 0.5rem;}
.woocommerce-ordering select { font-size: 0.95rem; } /* Меньше шрифт */
/* ----- Итого в корзине ----- */
.woocommerce .cart-collaterals { justify-content: center; margin-top: 2rem; }
.woocommerce .cart-collaterals .cart_totals { max-width: 100%; padding: 1.8rem 1.2rem; }
.woocommerce .cart-collaterals .cart_totals h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }
.woocommerce .cart-collaterals .cart_totals table.shop_table { font-size: 0.95rem; }
.woocommerce .cart-collaterals .cart_totals table .order-total th,
.woocommerce .cart-collaterals .cart_totals table .order-total td { font-size: 1.05rem; }
/* ----- Checkout ----- */
/* Отступ сверху */
.woocommerce-page.woocommerce-checkout #primary { padding-top: 85px; } /* Отступ для мобильного */
/* Центрирование контейнера */
.woocommerce-page.woocommerce-checkout .entry-content .wp-block-group__inner-container { padding-left: 1rem; padding-right: 1rem; } /* Меньше боковые отступы */
.woocommerce-checkout form.checkout { gap: 2rem; }
.woocommerce-checkout h3 { font-size: 1.4rem; }
.woocommerce-checkout #order_review, .woocommerce-checkout #payment { padding: 1.5rem; }
.woocommerce-checkout #payment li.wc_payment_method label { font-size: 1rem; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; }
.woocommerce form .form-row { margin-bottom: 1rem; }
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { padding: 0.8rem 1rem; font-size: 0.9rem; }
.woocommerce form .form-row label { font-size: 0.9rem; }
/* ----- Мой Аккаунт ----- */
.woocommerce-page.woocommerce-account #primary { padding-top: 85px; } /* Отступ для мобильного */
.woocommerce-account .woocommerce { padding: 1.5rem; gap: 1.5rem;}
.woocommerce-account .woocommerce-MyAccount-navigation { padding-bottom: 1rem; margin-bottom: 1rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { font-size: 1rem; padding: 0.7rem 1rem; }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 1.4rem; }
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content address { font-size: 1rem;}
/* ----- Футер ----- */
.footer { padding: 3rem 1rem 1.5rem 1rem; margin-top: 3rem;}
.footer-content { grid-template-columns: 1fr; gap: 1.5rem; } /* Меньше gap */
.footer-section h4 { font-size: 1.2rem; }
.footer-section p, .footer-section ul li a { font-size: 0.9rem; }
.newsletter-form { gap: 0.8rem; }
.newsletter-form input, .newsletter-form button { font-size: 0.9rem; padding: 0.8rem 1rem; }
.footer-bottom { padding: 1.5rem 1rem; font-size: 0.85rem; margin-top: 2rem;}
.payment-methods { font-size: 1.6rem; }
}
/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
/* ----- Общие ----- */
.section { padding: 3rem 1rem; }
.section-title { font-size: 1.8rem; margin-bottom: 2rem; }
.section-title::after { bottom: -0.5rem; width: 60px; height: 3px; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
.cta-button, .cta-button-price, .woocommerce .button { padding: 0.7rem 1.4rem; font-size: 0.85rem; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order { padding: 0.8rem 1.6rem; font-size: 0.9rem; }
/* ----- Хедер и Навигация ----- */
.header { height: 60px; }
.slide-content { padding-top: 60px; }
.hero-slider { min-height: 55vh; }
.slide-content h1 { font-size: 1.4rem; }
.slide-content p { font-size: 0.8rem; margin-bottom: 1.2rem;}
.logo { font-size: 1.3rem; }
.burger { padding: 0.6rem; }
.burger-line { width: 22px; height: 2px; margin: 4px 0;}
.burger.active .burger-line:nth-child(1) { transform: rotate(-45deg) translate(-3px, 4px); }
.burger.active .burger-line:nth-child(3) { transform: rotate(45deg) translate(-3px, -4px); }
.nav-menu { max-width: 240px; } /* Еще меньше меню */
.nav-menu a { font-size: 0.95rem; }
.sub-menu a { font-size: 0.85rem; }
/* ----- Секция "О нас" ----- */
.about-content { gap: 1.2rem; } /* Меньше */
.about-text { padding: 1rem; } /* Меньше */
.about-block h3 { font-size: 1.3rem; }
.about-block p { font-size: 0.9rem; }
.features-list li { font-size: 0.85rem; padding: 0.6rem 0.8rem 0.6rem 1.8rem;}
.experience-badge { padding: 0.6rem 0.8rem; bottom: -10px; right: -5px; }
.experience-badge span:first-child { font-size: 1.3rem; }
.experience-badge span:last-child { font-size: 0.75rem; }
.phone-link { font-size: 0.9rem; padding: 0.7rem 1.3rem;}
/* ----- WooCommerce Карточка товара ----- */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.9rem; min-height: 2.6em; }
.woocommerce ul.products li.product .price { font-size: 1rem; }
.woocommerce ul.products li.product .price del { font-size: 0.8rem; }
.woocommerce ul.products li.product .button { padding: 0.6rem 1rem; font-size: 0.8rem; }
.woocommerce span.onsale { font-size: 0.6rem; padding: 0.2rem 0.5rem; top: 0.4rem; left: 0.4rem; }
/* ----- Таблицы в блочном виде ----- */
.price-table td, .woocommerce table.shop_table.cart td { padding: 0.6rem 0.8rem; }
.price-table td::before, .woocommerce table.shop_table.cart td::before { font-size: 0.75em; width: 45%; } /* Ширина подписи */
.woocommerce table.shop_table.cart td.product-name a { font-size: 0.85rem; }
.woocommerce table.shop_table.cart td.product-price, .woocommerce table.shop_table.cart td.product-subtotal { font-size: 0.9rem; }
/* ----- Checkout ----- */
/* Отступ сверху */
.woocommerce-page.woocommerce-checkout #primary { padding-top: 70px; } /* Отступ для самого маленького */
/* Центрирование контейнера */
.woocommerce-page.woocommerce-checkout .entry-content .wp-block-group__inner-container { padding-left: 0.8rem; padding-right: 0.8rem; }
.woocommerce-checkout #order_review, .woocommerce-checkout #payment { padding: 1rem; }
.woocommerce-checkout #payment div.payment_box { padding: 0.8rem; font-size: 0.85rem;}
.woocommerce-checkout #payment li.wc_payment_method label { font-size: 0.9rem; }
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { padding: 0.7rem 0.9rem; font-size: 0.85rem; }
.woocommerce form .form-row label { font-size: 0.85rem; }
/* ----- Сообщения WC ----- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
padding: 0.8rem 1rem 0.8rem 2.5rem; font-size: 0.85rem; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-notice::before {
left: 0.8rem; top: 0.8rem; font-size: 1em; }
/* ----- Футер ----- */
.footer { padding: 2.5rem 1rem 1rem 1rem;}
.footer-content { gap: 1.5rem; }
.footer-section h4 { font-size: 1.1rem; }
.footer-section p, .footer-section ul li a { font-size: 0.8rem; }
.newsletter-form input, .newsletter-form button { font-size: 0.85rem; padding: 0.7rem 1rem; }
.footer-bottom { padding: 1rem; font-size: 0.75rem; margin-top: 1.5rem;}
.payment-methods { font-size: 1.4rem; }
}