/* ============================================================
   ЧАЙ ИЗ КИТАЯ — style.css

   СОДЕРЖАНИЕ:
   1.  Сброс стилей браузера
   2.  Базовые элементы и контейнеры
   3.  Шапка и навигация
   4.  Главная страница и карточки товаров
   5.  Каталог, фильтры и пагинация
   6.  Страница товара
   7.  Корзина и оформление заказа
   8.  Контакты
   9.  Личный кабинет и профиль
   10. Вход, регистрация и избранное
   11. Подвал сайта
   12. Адаптивные стили
   13. Дополнительные стили страниц
   ============================================================ */


/* ============================================================
   1. СБРОС СТИЛЕЙ
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

input,
button,
textarea,
select {
    font: inherit;
}


/* ============================================================
   2. БАЗА
   ============================================================ */

body {
    font-family: Arial, sans-serif;
    background-color: #fbfbf9;;
    color: #19372f;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}


/* ============================================================
   ГЛАВНАЯ СТРАНИЦА — index.html
   СОДЕРЖАНИЕ:
   1. Контейнер
   2. Шапка
   3. Hero
   4. Популярные товары + карточка
   5. Футер
   6. Адаптив
   ============================================================ */


/* ============================================================
   1. КОНТЕЙНЕР — общий для всех секций
   ============================================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 24px);
}

.breadcrumbs {
    padding-top: 12px;
    padding-bottom: 12px;
}

.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: #71827e;
    font-size: 12px;
    line-height: 1.5;
    list-style: none;
}

.breadcrumbs-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs-item + .breadcrumbs-item::before {
    content: "/";
    color: #bbb;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: #173b32;
}

.breadcrumbs a:focus-visible {
    outline: 2px solid #173b32;
    outline-offset: 3px;
    border-radius: 2px;
}

.breadcrumbs [aria-current="page"] {
    color: #536b65;
}


/* ============================================================
   2. ШАПКА — три зоны в строку:
   [лого + название] [меню] [иконки]
   ============================================================ */

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
    gap: clamp(16px, 3vw, 40px);
    flex-wrap: wrap;
}


/* Лого + название */

.header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-brand img {
    width: 55px;
    height: auto;
}

.header-brand-text {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    margin-left: -12px;
}


/* Меню */

.header-nav {
    display: flex;
    gap: clamp(16px, 2vw, 30px);
    flex-wrap: wrap;
    margin-right: auto;
}

.header-link--active {
    color: #173b32;
    border-bottom: 2px solid #173b32;
}


/* Иконки */

.header-icons {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 16px);
    margin-left: -40px;
}

/* Поиск в шапке */
.header-search {
    position: relative;
}

.header-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    cursor: pointer;
    list-style: none;
}

.header-search-toggle::-webkit-details-marker {
    display: none;
}

.header-search-toggle img {
    width: 32px;
    height: 32px;
}

.header-search-toggle:focus-visible,
.header-search-form input:focus-visible,
.header-search-form button:focus-visible {
    outline: 2px solid #173b32;
    outline-offset: 3px;
}

.header-search-form {
    position: absolute;
    z-index: 20;
    top: 50%;
    right: calc(100% + 12px);
    display: none;
    transform: translateY(-50%);
    gap: 8px;
    width: min(460px, calc(100vw - 240px));
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.header-search[open] .header-search-form {
    display: flex;
}

.header-search-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
}

.header-search-form button {
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: #173b32;
    color: #fff;
    cursor: pointer;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.catalog-empty-state {
    grid-column: 1 / -1;
    padding: 24px;
    color: #687d77;
    text-align: center;
}


/* Бейдж на корзине */

.header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
}

.header-cart > img {
    width: 30px;
    height: 30px;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: #173b32;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


/* ============================================================
   3. HERO — картинка на фоне + текст поверх
   ============================================================ */

.hero {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 60px 0;
}

.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(237, 233, 233, 0.1);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding: 60px clamp(20px, 5vw, 80px);
    color: #000000;
}

.hero-content h1 {
    font-size: clamp(28px, 5vw, 52px);
    line-height: 1.1;
    margin: 16px 0;
    font-weight: 700;
}

.hero-content p {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.5;
    margin-bottom: 16px;
    opacity: 0.9;
}

.button-catalog {
    display: inline-block;
    margin-top: 16px;
    padding: 14px 32px;
    background-color: #173b32;
    color: rgb(244, 247, 244);
    border-radius: 4px;
    font-size: 16px;
    transition: background-color 0.2s;
}

.button-catalog:hover {
    background-color: #102e27;
}


/* ============================================================
   4. ПОПУЛЯРНЫЕ ТОВАРЫ
   ============================================================ */

.popular-products {
    padding: 40px 0;
}


/* Заголовок + ссылка */

.popular-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

.popular-all {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}


/* Сетка карточек */

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* Карточка */

.product-card {
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 254);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 16px;
    gap: 2px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.product-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    display: block;
    margin-bottom: 12px;
}

.product-name {
    height: calc(1.4em * 3);
    min-height: calc(1.4em * 3);
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.product-card .product-name a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.product-card .product-name a:focus-visible {
    outline: 2px solid #173b32;
    outline-offset: 3px;
    border-radius: 2px;
}

.product-title {
    display: -webkit-box;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    transition: color 0.2s ease;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.product-id {
    display: block;
    margin: 3px 0 6px;
    color: #687d77;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

.product-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 18px;
    margin: 0 0 4px;
}

.product-card-meta .product-price-unit,
.product-card-meta .product-id {
    margin: 0;
}

.product-card-meta .product-id {
    flex: 0 0 auto;
    text-align: right;
}

.product-id--detail {
    margin: 8px 0 14px;
    font-size: 13px;
}

.product-card:hover .product-title {
    color: #173b32;
}

.product-description {
    display: -webkit-box;
    min-height: calc(1.45em * 4);
    margin: 0 0 8px;
    color: #687d77;
    font-size: 12px;
    line-height: 1.45;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.product-card-weight {
    margin: 0 0 6px;
    color: #879691;
    font-size: 12px;
}

.product-price {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #173b32;
    margin: 0;
}

.product-price-currency {
    font-size: 16px;         /* меньше цены */
    font-weight: 500;        /* не жирный */
    color: #879691;             /* серый */
}

.product-price-unit {
    display: block;
    min-height: 18px;
    margin: 0 0 4px;
    color: #536b65;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
}


.product-btn {
    width: 100%;
    padding: 5px;
    margin-top: auto;
    background-color: #173b32;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.product-btn:disabled {
    background-color: #aeb4a5;
    cursor: not-allowed;
}

/* ============================================================
   КНОПКА «В ИЗБРАННОЕ» — на карточках товаров
   ============================================================ */

.product-grid .product-card {
    position: relative;
}

.product-grid .product-card-image {
    position: static;
}

.product-card-badges {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 76px);
    pointer-events: none;
}

.product-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 106px;
    height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    color: #fff;
    font: 600 12px/1 Arial, sans-serif;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.product-card-badge--new {
    background: #173b32;
}

.product-card-badge--new img {
    width: 20px;
    height: 15px;
    max-width: none;
    aspect-ratio: auto;
    flex: 0 0 auto;
    display: block;
    margin: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.product-card-badge--discount {
    background: #a83237;
}

.product-card-badge--discount i {
    font-size: 12px;
}

.product-card-image {
    position: relative;
}

.image-placeholder,
.image-missing::after {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 16px;
    color: #687d77;
    background: #f1f5f2;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}

.product-card-image .image-placeholder,
.product-card-image.image-missing::after {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    margin-bottom: 12px;
}

.image-missing::after {
    content: 'Фото скоро появится';
}

.gallery-main .image-placeholder,
.gallery-main.image-missing::after {
    min-height: 360px;
}

.product-grid .product-card-image .favorite-btn {
    top: 8px;
    right: 8px;
}


/* Кнопка-сердечко */

.favorite-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    font-size: 16px;
    color: #879691;
    cursor: pointer;
    transition: background-color 0.2s ease,
                color 0.2s ease,
                transform 0.15s ease;
    z-index: 2;                         /* поверх картинки */
}

.favorite-btn:hover {
    background-color: #ffffff;
    color: #d9534f;
    transform: scale(1.1);
}

.favorite-btn.active {
    color: #d9534f;
    background-color: #ffffff;
}


/* ============================================================
   5. ФУТЕР
   ============================================================ */

.footer {
    background-color: rgb(239, 238, 236);
    padding: 20px 0;
    font-size: 14px;
}


/* Три колонки */

.footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.footer-col-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-col-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


/* Лого + название */

.footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.footer-brand img {
    width: 52px;
    height: auto;
    display: block;
    margin-left: -12px;
}

.footer-header {
    font-weight: 800;
    font-size: 16px;
    margin: 0;
    padding: 0;
    margin-left: -10px;
}


/* Меню */

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.footer-cookie-settings {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* Соцсети */

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social img {
    width: 24px;
    height: auto;
}


/* Копирайт */

.footer-bottom {
    text-align: center;
    padding-top: 5px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 14px;
    opacity: 0.7;
}






/* ============================================================
   КАТАЛОГ — catalog.html
   СОДЕРЖАНИЕ:
   1. Раскладка (фильтр + товары)
   2. Фильтр — список категорий
   3. Фильтр — цена (поля + слайдер)
   4. Фильтр — сортировка
   5. Заголовок каталога
   6. Пагинация
   ============================================================ */


/* ============================================================
   1. РАСКЛАДКА — фильтр слева, товары справа
   ============================================================ */

.catalog-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 40px;
    align-items: flex-start;
}

.catalog-filter {
    background-color: rgb(244, 247, 244);
    padding: 24px;
}

.catalog-products {
    min-width: 0;
    /* чтобы grid не растягивался под контент */
}


/* ============================================================
   2. ФИЛЬТР — СПИСОК КАТЕГОРИЙ
   ============================================================ */

.filter-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 3px;
    border-radius: 4px;
    color: #19372f;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.filter-link:hover {
    background-color: #eef3ef;
    color: #173b32;
}

.filter-count {
    color: #879691;
    font-size: 13px;
}

.filter-link--active {
    background-color: #173b32;
    color: #ffffff;
    font-weight: 600;
}

.filter-link--active .filter-count {
    color: #e7f0ea;
}

.filter-link--active:hover {
    background-color: #173b32;
    color: #ffffff;
}

.filter-promotions {
    display: grid;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    color: #19372f;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
}

.filter-checkbox input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #173b32;
}


/* ============================================================
   3. ФИЛЬТР — ЦЕНА (поля + слайдер)
   ============================================================ */

.filter-price {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 20px;
    margin-top: 20px;
}

.filter-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.filter-price p {
    font-size: 14px;
    color: #536b65;
}


/* Поля «от» и «до» */

.price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.price-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.price-field span {
    font-size: 13px;
    color: #687d77;
    white-space: nowrap;
}

.price-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
    transition: border-color 0.2s;
}

.price-field input:focus {
    outline: none;
    border-color: #173b32;
}

.price-field input::-webkit-outer-spin-button,
.price-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Ползунок выбора цены */

.noUi-target {
    background: #e0ddd6;
    border: none;
    box-shadow: none;
    height: 4px;
    border-radius: 2px;
}

.noUi-connect {
    background: #173b32;
}

.noUi-handle {
    width: 16px !important;
    height: 16px !important;
    background: #173b32;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    right: -8px !important;
    top: -6px !important;
    transition: transform 0.15s ease;
}

.noUi-handle:hover {
    transform: scale(1.1);
}

.noUi-handle::before,
.noUi-handle::after {
    display: none;
}


/* ============================================================
   4. ФИЛЬТР — СОРТИРОВКА
   ============================================================ */

.filter-sort {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 20px;
    margin-top: 20px;
}

.filter-sort label {
    font-size: 14px;
    color: #687d77;
}

.filter-name {
    padding: 1px;
}

.sort-select {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5d3a' d='M6 9L2 5h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s;
}

.sort-select:focus {
    outline: none;
    border-color: #173b32;
}


/* ============================================================
   5. ЗАГОЛОВОК КАТАЛОГА
   ============================================================ */

.catalog-title {
    padding: 20px 0;
}

.catalog-title h1 {
    font-size: clamp(28px, 4vw, 42px);
    margin-bottom: 8px;
}

.catalog-title p {
    color: #687d77;
}


/* ============================================================
   6. ПАГИНАЦИЯ
   ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.pagination-page,
.pagination-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    color: #19372f;
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination-page:hover,
.pagination-arrow:hover {
    background-color: #eef3ef;
    color: #173b32;
}

.pagination-page--active {
    background-color: #173b32;
    color: #ffffff;
    font-weight: 700;
}

.pagination-page--active:hover {
    background-color: #102e27;
    color: #ffffff;
}



/* ============================================================
   СТРАНИЦА ТОВАРА — product.html
   СОДЕРЖАНИЕ:
   1. Раскладка (галерея + инфо)
   2. Галерея (миниатюры + большое фото)
   3. Информация о товаре
   4. Покупка (цена, счётчик, кнопка)
   5. Фичи товара
   6. Табы + характеристики
   ============================================================ */


/* ============================================================
   1. РАСКЛАДКА — галерея слева, инфо справа
   ============================================================ */

.product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.product {
    padding-bottom: 40px;
    /* отступ до секции похожих товаров */
}


/* ============================================================
   2. ГАЛЕРЕЯ — миниатюры | большое фото + сердечко
   ============================================================ */

.product-gallery {
    display: grid;
    grid-template-columns: 80px 1fr;      /* миниатюры | большое фото */
    gap: 16px;
}

.gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-thumbs button {
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.gallery-thumbs button:hover {
    border-color: #173b32;
}

.gallery-thumbs img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}


/* --- Большое фото + сердечко --- */

.gallery-main {
    position: relative;                    /* точка отсчёта для кнопки */
}

.gallery-main img {
    width: 100%;
    border-radius: 8px;
    display: block;
}


/* Кнопка «В избранное» */

.favorite-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    font-size: 18px;
    color: #879691;
    cursor: pointer;
    transition: background-color 0.2s ease,
                color 0.2s ease,
                transform 0.15s ease;
}

.favorite-btn:hover {
    background-color: #ffffff;
    color: #d9534f;
    transform: scale(1.1);
}

.favorite-btn.active {
    color: #d9534f;
    background-color: #ffffff;
}


/* ============================================================
   3. ИНФОРМАЦИЯ О ТОВАРЕ
   ============================================================ */

.product-info {
    min-width: 0;
    /* защита от разъезда grid */
}

.product-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0 0 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #e8f3eb;
    color: #1f674b;
    font-size: 13px;
    line-height: 1.2;
}

.product-category-leaf {
    width: 24px;
    height: 20px;
    flex: 0 0 24px;
    object-fit: contain;
}

.product-stock-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0;
    background: transparent;
    color: #1f674b;
    font: 500 12px/1.2 Arial, sans-serif;
    white-space: nowrap;
}

.product-stock-pill.is-unavailable {
    color: #b63a35;
}

.product-stock-check {
    color: #173b32;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.product-price-summary {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 6px;
}

.product-price-summary .product-price-unit {
    display: inline;
    min-height: 0;
    margin: 0;
}

.product-price-summary .product-stock-pill {
    align-self: flex-end;
}

.product-info h1 {
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.1;
    margin-bottom: 16px;
}

/* ============================================================
   4. ПОКУПКА — цена, счётчик, кнопка
   ============================================================ */

.product-purchase {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.purchase-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.purchase-option {
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid #e4e6e1;
    border-radius: 8px;
    background: #f4f5f2;
    color: #173b32;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.purchase-option:hover:not(:disabled),
.purchase-option.active {
    border-color: #173b32;
    background: #173b32;
    color: #fff;
}

.purchase-option:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.purchase-option--cake {
    border-color: #e4e6e1;
    background: #f4f5f2;
}

.product-price-block {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.product-price-block .product-price {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    color: #19372f;
    margin: 0;
}

.cake-regular-price {
    margin-right: 8px;
    color: #879691;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: line-through;
    vertical-align: middle;
}

.cake-discount {
    display: inline-block;
    margin-right: 8px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #fff0e5;
    color: #d66e32;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
}

.product-price-regular {
    margin-right: 5px;
    color: #879691;
    font-size: .68em;
    font-weight: 400;
}

.product-card-discount {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #fff0e5;
    color: #d66e32;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

.cake-regular-price[hidden],
.cake-discount[hidden] {
    display: none !important;
}

.product-weight {
    font-size: 13px;
    color: #879691;
}

.product-control {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-control .quantity {
    flex: 0 0 auto;
}

.product-control .quantity-btn {
    flex: 0 0 40px;
}

.product-control .quantity-unit {
    flex: 0 0 auto;
}

.product-control .product-btn {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}


/* ============================================================
   5. ФИЧИ ТОВАРА — три пункта под ценой
   ============================================================ */

.product-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #536b65;
}

.feature i {
    font-size: 24px;
    color: #173b32;
    flex-shrink: 0;
}

.feature svg {
    width: 24px;
    height: 24px;
    color: #173b32;
    flex-shrink: 0;
    transform: scaleX(-1);
}


/* ============================================================
   6. ТАБЫ + ХАРАКТЕРИСТИКИ
   ============================================================ */

.product-layout-down {
    padding-top: 40px;
    /* отступ от верха страницы */
}

.tabs-nav {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    padding: 10px;
}

.tabs-nav a {
    font-size: 15px;
    color: #687d77;
    transition: color 0.2s ease;
}

.tabs-nav a:hover {
    color: #173b32;
}

.tabs-nav a.active {
    color: #19372f;
    font-weight: 600;
}


/* Раскладка табов: описание | характеристики */

.tabs-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.tab-panel p {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 16px;
}


/* Карточка характеристик */

.product-specs {
    background-color: rgb(241, 244, 241);
    border-radius: 12px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spec-row {
    display: grid;
    grid-template-columns: 24px 130px 1fr;
    /* иконка | название | значение */
    gap: 12px;
    align-items: center;
    font-size: 14px;
    padding: 4px 0;
}

.spec-icon {
    font-size: 20px;
    color: #173b32;
    flex-shrink: 0;
}

.spec-label {
    color: #19372f;
}

.spec-value {
    color: #879691;
}


/* ============================================================
   12. КОРЗИНА
   ============================================================ */

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 32px;
    align-items: flex-start;
}

.cart-items,
.cart-total {
    min-width: 0;
}

.cart-block-1 {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 24px;
}


/* Шапка таблицы */

.cart-head {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(170px, 190px) minmax(180px, 220px) minmax(90px, 110px) 30px;
    padding: 10px;
    gap: 12px;
    align-items: center;
}


/* Строка товара */

.cart-item {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(170px, 190px) minmax(180px, 220px) minmax(90px, 110px) 30px;
    padding: 10px;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    min-width: 0;
}

.cart-item-info {
    display: flex;
    gap: 16px;
    align-items: center;
    min-width: 0;
}

.cart-item-info>div {
    min-width: 0;
}

.cart-item-info img {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
}

.cart-item-price,
.cart-item-total {
    margin: 0;
    white-space: nowrap;
}

.cart-item-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    word-break: break-word;
}

.cart-item-desc {
    font-size: 13px;
    color: #879691;
    margin: 0;
    word-break: break-word;
}

.cart-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #879691;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cart-item-remove:hover {
    background-color: #f5e8e6;
    color: #d9534f;
}

.cart-item-remove:active {
    background-color: #efd9d6;
}

.cart-clear-2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    padding-top: 2px;
    cursor: pointer;
    font-size: 14px;
    transition: color 0.2s ease;
}

.cart-clear-2 p {
    margin: 0;
}

.cart-clear-2:hover {
    color: #d9534f;
}

@media (max-width: 1200px) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cart-total {
        width: min(100%, 480px);
        justify-self: end;
    }
}


/* Фичи под корзиной */

.cart-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 120px;
    padding: 24px;
    background-color: rgb(244, 247, 244);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
}

.feature-delivery,
.feature-garant {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-right: 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.feature-delivery i,
.feature-garant i {
    font-size: 28px;
    color: #173b32;
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-delivery span,
.feature-garant span {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #19372f;
    margin-bottom: 4px;
}

.feature-delivery p,
.feature-garant p {
    font-size: 13px;
    color: #879691;
    line-height: 1.4;
    margin: 0;
}

.feature-natur {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.feature-natur svg {
    width: 24px;
    height: 24px;
    color: #173b32;
    flex-shrink: 0;
    margin-top: 2px;
    transform: scaleX(-1);
}

.feature-natur span {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #19372f;
    margin-bottom: 4px;
}

.feature-natur p {
    font-size: 13px;
    color: #879691;
    line-height: 1.4;
    margin: 0;
}


/* Итого */

.cart-features-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 24px;
    background-color: rgb(244, 247, 244);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
}

.cart-text {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
}

.cart-info-2,
.cart-discount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.cart-info-2 p,
.cart-discount p {
    font-size: 13px;
    color: #879691;
    line-height: 1.4;
    margin: 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-family: 'Playfair Display', serif;
}

.summary-total span:first-child {
    font-size: 18px;
    color: #000;
    font-weight: 400;
}

.summary-total span:last-child {
    font-size: 22px;
    color: #19372f;
    font-weight: 700;
}


/* ============================================================
   13. ОБЩИЕ ЭЛЕМЕНТЫ — счётчик, кнопка «В корзину»
   ============================================================ */

.quantity {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}

.quantity-btn {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    font-size: 18px;
    color: #19372f;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quantity-btn:hover {
    background-color: #eef3ef;
}

.quantity-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.quantity-input {
    width: 32px;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    background-color: transparent;
    outline: none;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-input {
    -moz-appearance: textfield;
}

.quantity-input--product {
    width: 58px;
    min-width: 58px;
    font-variant-numeric: tabular-nums;
}

.quantity-unit {
    padding: 0 8px;
    color: #687d77;
    font-size: 13px;
    white-space: nowrap;
}


/* Модификатор — маленький счётчик (для корзины) */

.quantity--small .quantity-btn {
    width: 28px;
    height: 32px;
    font-size: 15px;
}

.quantity--small .quantity-input {
    width: 24px;
    height: 32px;
    font-size: 14px;
}


/* Кнопка «В корзину» / «Оформить заказ» */

.btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    padding: 0 24px;
    background-color: #173b32;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-cart:hover {
    background-color: #102e27;
}

.btn-cart i {
    font-size: 18px;
}

.product-weight {
    color: #879691;
    font-size: 13px;
}

/* ============================================================
   ОФОРМЛЕНИЕ ЗАКАЗА — checkout
   ============================================================ */

/* --- ОБЩИЕ --- */

.order-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: flex-start;
}

.order-header {
    margin-bottom: 20px;
}

.order-text {
    font-size: 14px;
    color: #687d77;
}


/* ============================================
   ЛЕВАЯ КОЛОНКА — ФОРМА
   ============================================ */

.order-items {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}


/* Блок формы (Контакты / Доставка / Оплата) */

.order-block {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 24px;
    margin-bottom: 24px;
}


/* Шапка блока: цифра + заголовок */

.order-head {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.order-one {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background-color: #173b32;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.order-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}


/* Строка Имя + Телефон */

.order-name-fone {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 4px;
    margin-bottom: 4px;
}


/* Поля формы */

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.form-field:last-child {
    margin-bottom: 0;
}

.form-field label {
    font-size: 13px;
    color: #536b65;
}

.required {
    color: #d9534f;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background-color: transparent;
    font-size: 14px;
    font-family: inherit;
    color: #19372f;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #bbb;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #173b32;
    box-shadow: 0 0 0 3px rgba(74, 93, 58, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}


/* Радио-кнопки */

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-desc {
    font-size: 12px;
    color: #879691;
    margin: 0 0 4px;
}


/* Кнопка подтверждения */

.btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    margin-top: 8px;
    background-color: #173b32;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-checkout:hover {
    background-color: #102e27;
}

.btn-checkout i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-checkout:hover i {
    transform: translateX(4px);
}


/* ============================================
   ПРАВАЯ КОЛОНКА — ИТОГ
   ============================================ */

.order-summary {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    position: sticky;
    top: 20px;
}

.order-summary-title {
    font-size: 22px;
    margin-bottom: 20px;
}


/* Товары */

.order-summary-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.order-summary-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 12px;
    align-items: flex-start;
}

.order-summary-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #ffffff;
}

.order-summary-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-summary-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.order-summary-desc {
    font-size: 12px;
    color: #879691;
    margin: 0 0 4px;
}

.order-summary-price {
    font-size: 14px;
    font-weight: 700;
    color: #173b32;
    margin: 0;
    white-space: nowrap;
}


/* Подытог */

.order-summary-totals {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: #666;
    gap: 12px;
}

.order-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-family: 'Playfair Display', serif;
}

.order-summary-total span:first-child {
    font-size: 18px;
    color: #19372f;
}

.order-summary-total span:last-child {
    font-size: 22px;
    font-weight: 700;
    color: #19372f;
}


/* Блок доставки */

.order-summary-delivery {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    background-color: #f5f1ea;
    border-radius: 8px;
}

.order-summary-delivery i {
    font-size: 22px;
    color: #173b32;
    flex-shrink: 0;
    margin-top: 2px;
}

.order-summary-delivery-title {
    font-size: 13px;
    font-weight: 600;
    color: #19372f;
    margin: 0 0 2px;
}

.order-summary-delivery-desc {
    font-size: 12px;
    color: #879691;
    line-height: 1.4;
    margin: 0;
}


/* Ссылка «Вернуться» */

.order-summary-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
    transition: color 0.2s ease;
}

.order-summary-back:hover {
    color: #173b32;
}




/* ============================================================
   О НАС — about.html
   СОДЕРЖАНИЕ:
   1. Hero — текст + фото
   2. Фичи — 4 пункта
   3. История — фото + текст
   4. Адаптив
   ============================================================ */


/* ============================================================
   1. HERO — текст слева, фото справа
   ============================================================ */

.about-hero {
    padding: 40px 0 60px;
}

.about-hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-hero-content h1 {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
    margin: 12px 0 20px;
}

.about-hero-lead {
    font-size: 17px;
    font-weight: 600;
    color: #19372f;
    margin-bottom: 16px;
}

.about-hero-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #536b65;
    margin-bottom: 16px;
}

.about-hero-image img {
    width: 100%;
    border-radius: 12px;
    display: block;
}


/* ============================================================
   2. ФИЧИ — 4 пункта в строку
   ============================================================ */

.about-features {
    padding: 4px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.about-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.about-feature {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-feature i {
    align-self: flex-start;
    font-size: 28px;
    color: #173b32;
    margin-bottom: 4px;
}

.about-feature h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.about-feature p {
    font-size: 13px;
    color: #879691;
    line-height: 1.5;
    margin: 0;
}


/* ============================================================
   3. ИСТОРИЯ — фото слева, текст справа
   ============================================================ */

.about-story {
    padding: 80px 0;
}

.about-story-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-story-image img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.about-story-label {
    font-size: 12px;
    color: #879691;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.about-story-content h2 {
    font-size: clamp(26px, 3.5vw, 38px);
    line-height: 1.15;
    margin-bottom: 20px;
}

.about-story-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #536b65;
    margin-bottom: 16px;
}

.about-story-signature {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-style: italic;
    color: #173b32;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.about-story-signature svg {
    width: 24px;
    height: 24px;
    color: #173b32;
    transform: scaleX(-1);
}


/* ============================================================
   4. АДАПТИВ
   ============================================================ */

/* --- Планшеты (до 992px) --- */

@media (max-width: 992px) {

    .about-hero-layout,
    .about-story-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* На планшете — фото сверху, текст снизу */
    .about-hero-image {
        order: -1;
    }

    .about-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}


/* --- Телефоны (до 576px) --- */

@media (max-width: 576px) {

    .about-hero {
        padding: 20px 0 40px;
    }

    .about-story {
        padding: 40px 0;
    }

    .about-features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-feature i {
        font-size: 24px;
    }

    .about-story-signature {
        font-size: 16px;
    }
}

/* Newsletter signup and first-order offer */
.newsletter-popup[hidden] { display: none !important; }
.newsletter-popup { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 24px; }
.newsletter-popup__backdrop { position: absolute; inset: 0; background: rgba(20, 25, 22, .62); backdrop-filter: blur(2px); }
.newsletter-popup__dialog { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 744px); min-height: 462px; overflow: hidden; border-radius: 19px; background: #f7f5ec; box-shadow: 0 22px 70px rgba(0,0,0,.3); }
.newsletter-popup__photo { min-height: 462px; background: #35281d url('../img/about-hero.jpg') center / cover no-repeat; }
.newsletter-popup__content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px 34px 28px; text-align: center; color: #183d33; background: radial-gradient(ellipse at top left, rgba(255,255,255,.7), transparent 55%), #f7f5ec; }
.newsletter-popup__close { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #183d33; font: 30px/1 Arial, sans-serif; cursor: pointer; }
.newsletter-popup__ornament { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 3px 0 14px; }
.newsletter-popup__ornament span { width: 68px; height: 1px; background: #9eaa9b; }
.newsletter-popup__ornament img { width: 24px; height: 24px; object-fit: contain; }
.newsletter-popup__content h2 { margin: 0 0 15px; color: #193c34; font: 700 clamp(24px, 3.1vw, 30px)/1.16 'Playfair Display', Georgia, serif; text-transform: uppercase; }
.newsletter-popup__lead { max-width: 330px; margin: 0 0 26px; color: #262a27; font: 17px/1.45 'Playfair Display', Georgia, serif; }
.newsletter-popup__content form { width: 100%; }
.newsletter-popup__input-wrap { position: relative; }
.newsletter-popup__input-wrap input { width: 100%; height: 48px; padding: 0 44px 0 14px; border: 1px solid #36584e; border-radius: 10px; outline: 0; color: #183d33; background: rgba(255,255,255,.35); font: 16px 'Playfair Display', Georgia, serif; }
.newsletter-popup__input-wrap input:focus { box-shadow: 0 0 0 3px rgba(24,61,51,.13); }
.newsletter-popup__input-wrap input::placeholder { color: #8a928c; }
.newsletter-popup__input-wrap i { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-size: 18px; }
.newsletter-popup__submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 15px; border: 0; border-radius: 10px; color: #fff; background: #174536; font: 600 18px 'Playfair Display', Georgia, serif; cursor: pointer; }
.newsletter-popup__submit:hover { background: #10372b; }
.newsletter-popup__submit:disabled { opacity: .65; cursor: wait; }
.newsletter-popup__status { min-height: 0; margin: 0; color: #183d33; font-size: 14px; line-height: 1.4; }
.newsletter-popup__status:not(:empty) { margin-top: 12px; }
.newsletter-popup__status.is-error { color: #a42b2b; }
.newsletter-popup__status.is-success { padding: 10px 12px; border-radius: 8px; background: #e6eee5; }
.newsletter-popup__status strong { display: inline-block; margin-left: 4px; letter-spacing: .06em; }
.newsletter-popup__foot { width: 100%; margin-top: 5px; color: #254239; font: 12px/1.35 'Playfair Display', Georgia, serif; }
.newsletter-popup__foot .newsletter-popup__ornament { margin: 10px 0 6px; }
.newsletter-popup__foot .newsletter-popup__ornament span { width: 46px; }
.newsletter-popup__foot .newsletter-popup__ornament img { width: 18px; height: 18px; }
.newsletter-popup__foot p { margin: 0; }
.newsletter-popup-open { overflow: hidden; }
.checkout-promo { margin: 18px 0; padding: 16px; border: 1px solid #e5e9e5; border-radius: 12px; background: #f7f9f7; }
.checkout-promo > label { display: block; margin-bottom: 8px; color: #214238; font-weight: 600; }
.checkout-promo__controls { display: flex; gap: 8px; }
.checkout-promo__controls .form-input { min-width: 0; flex: 1; }
.checkout-promo__button { padding: 0 16px; border: 0; border-radius: 8px; color: white; background: #183f34; font-weight: 600; cursor: pointer; }
.checkout-promo__button:disabled { opacity: .6; }
.checkout-promo__message { margin: 8px 0 0; color: #75847d; font-size: 13px; }
.checkout-promo__message.is-error { color: #ad3434; }
.checkout-promo__message.is-success { color: #147647; }
@media (max-width: 640px) {
    .newsletter-popup { padding: 14px; }
    .newsletter-popup__dialog { display: block; width: min(100%, 410px); min-height: 0; max-height: min(90vh, 700px); overflow: auto; }
    .newsletter-popup__photo { min-height: 155px; height: 155px; background-position: center 56%; }
    .newsletter-popup__content { padding: 24px 24px 22px; }
    .newsletter-popup__ornament { margin-top: 0; }
    .newsletter-popup__content h2 { font-size: 24px; }
    .newsletter-popup__lead { margin-bottom: 18px; font-size: 16px; }
    .checkout-promo__controls { flex-direction: column; }
    .checkout-promo__button { min-height: 44px; }
}

/* Cookie consent banner */
.cookie-consent[hidden],
.cookie-consent__settings[hidden] {
    display: none !important;
}

.cookie-consent {
    position: fixed;
    z-index: 1200;
    right: max(16px, calc((100vw - 1440px) / 2));
    bottom: 16px;
    left: max(16px, calc((100vw - 1440px) / 2));
    padding: 14px 18px;
    border: 1px solid rgba(25, 55, 47, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 12px 36px rgba(19, 42, 35, .16);
    color: #19372f;
    backdrop-filter: blur(12px);
}

.cookie-consent__main {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 18px;
}

.cookie-consent__mark {
    display: grid;
    min-height: 48px;
    place-items: center;
    border-right: 1px solid #d9e1dc;
}

.cookie-consent__mark img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.cookie-consent__copy h2 {
    margin: 0 0 4px;
    color: #19372f;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px;
    line-height: 1.3;
}

.cookie-consent__copy p,
.cookie-consent__setting p {
    margin: 0;
    color: #687d77;
    font-size: 12px;
    line-height: 1.5;
}

.cookie-consent__copy a {
    color: #19372f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-consent__actions,
.cookie-consent__settings-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cookie-consent__button {
    min-height: 40px;
    padding: 8px 20px;
    border: 1px solid #aebdb6;
    border-radius: 999px;
    background: #fff;
    color: #19372f;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cookie-consent__button--accept {
    border-color: #173b32;
    background: #173b32;
    color: #fff;
}

.cookie-consent__button--accept:hover {
    border-color: #102e27;
    background: #102e27;
}

.cookie-consent__button--settings:hover {
    border-color: #173b32;
    background: #f2f6f3;
}

.cookie-consent__close {
    display: grid;
    width: 28px;
    height: 36px;
    place-items: center;
    border: 0;
    background: transparent;
    color: #879691;
    font-size: 18px;
    cursor: pointer;
}

.cookie-consent__close:hover {
    color: #19372f;
}

.cookie-consent__settings {
    display: grid;
    gap: 14px;
    margin: 14px 46px 0 86px;
    padding-top: 14px;
    border-top: 1px solid #e6ebe7;
}

.cookie-consent__setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #19372f;
    font-size: 13px;
}

.cookie-consent__setting strong {
    display: block;
    margin-bottom: 2px;
}

.cookie-consent__setting input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: #173b32;
}

.cookie-consent__required {
    color: #687d77;
    font-size: 12px;
    white-space: nowrap;
}

.cookie-consent__settings-actions {
    justify-content: flex-end;
    padding-top: 2px;
}

@media (max-width: 760px) {
    .cookie-consent {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 14px;
    }

    .cookie-consent__main {
        grid-template-columns: 48px minmax(0, 1fr) 28px;
        gap: 12px;
    }

    .cookie-consent__mark {
        grid-row: 1 / span 2;
        min-height: 44px;
    }

    .cookie-consent__mark img {
        width: 40px;
        height: 40px;
    }

    .cookie-consent__copy h2 {
        font-size: 15px;
    }

    .cookie-consent__actions {
        grid-column: 2 / 4;
        flex-wrap: wrap;
    }

    .cookie-consent__settings {
        margin: 14px 0 0 60px;
    }
}

@media (max-width: 480px) {
    .cookie-consent {
        right: 0;
        bottom: 0;
        left: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 16px 16px 0 0;
        padding: 14px 16px max(14px, env(safe-area-inset-bottom));
    }

    .cookie-consent__main {
        grid-template-columns: 38px minmax(0, 1fr) 24px;
        gap: 10px;
    }

    .cookie-consent__mark {
        min-height: 38px;
    }

    .cookie-consent__mark img {
        width: 34px;
        height: 34px;
    }

    .cookie-consent__copy h2 {
        font-size: 14px;
    }

    .cookie-consent__copy p {
        font-size: 11px;
    }

    .cookie-consent__actions,
    .cookie-consent__settings-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .cookie-consent__button {
        min-height: 38px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .cookie-consent__settings {
        margin-left: 0;
    }

    .cookie-consent__setting {
        gap: 10px;
        font-size: 12px;
    }
}



/* ============================================================
   HERO КОНТАКТОВ — картинка фоном, текст поверх
   ============================================================ */

.contacts-hero {
    position: relative;
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 60px 0;
}


/* Картинка — растянута на всю секцию */

.contacts-hero-img {
    position: absolute;
    inset: 0;                            /* отступы сверху, справа, снизу и слева */
    width: 100%;
    height: 100%;
    object-fit: cover;                   /* заполняет, обрезая лишнее */
    object-position: right center;       /* фокус на правой части */
    z-index: 0;                          /* под текстом */
}


/* Текст — поверх картинки */

.contacts-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding-left: max(24px, calc((100vw - 1200px) / 2));
    padding-right: 24px;
}

.contacts-hero-content h1 {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
    margin: 12px 0 16px;
    font-weight: 700;
}

.contacts-hero-lead {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.6;
    color: #536b65;
    opacity: 0.9;
}


/* ============================================================
   2. ОСНОВНОЙ БЛОК — 3 колонки:
   контакты | форма | карта
   ============================================================ */

.contacts-body {
    padding: 40px 0 60px;
}

.contacts-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 32px;
    align-items: flex-start;
}


/* --- ЛЕВАЯ КОЛОНКА: контактная информация --- */

.contacts-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contacts-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: flex-start;
}

.contacts-item i {
    font-size: 20px;
    color: #173b32;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f1ea;
    border-radius: 50%;
}

.contacts-item-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #19372f;
}

.contacts-item-value {
    font-size: 14px;
    color: #19372f;
    display: block;
    margin-bottom: 2px;
    transition: color 0.2s ease;
}

a.contacts-item-value:hover {
    color: #173b32;
}

.contacts-item-note {
    font-size: 12px;
    color: #879691;
    margin: 0;
    line-height: 1.4;
}


/* --- ЦЕНТР: форма --- */

.contacts-form-block {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 28px;
}

.contacts-form-block h2 {
    font-size: 22px;
    margin-bottom: 6px;
}

.contacts-form-desc {
    font-size: 13px;
    color: #687d77;
    margin-bottom: 20px;
}


/* Уведомления об успехе */
.form-messages {
    margin-bottom: 20px;
}

.alert-success {
    background-color: #e7f0ea;
    color: #173b32;
    border: 1px solid #c5dbbc;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
}

/* Поля с ошибками */
.has-error .form-input,
.has-error .form-textarea {
    border-color: #d9534f;
}

.error-text {
    color: #d9534f;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}


/* --- ПРАВАЯ КОЛОНКА: карта --- */

.contacts-map {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contacts-map-image {
    border-radius: 12px;
    overflow: hidden;
    background-color: #e8e5df;
}

.contacts-map-image iframe {
    width: 100%;
    height: 300px;
    border: 0;
    display: block;
}

.contacts-map-info {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: flex-start;
}

.contacts-map-info > i {
    font-size: 18px;
    color: #173b32;
    margin-top: 2px;
}

.contacts-map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: #173b32;
    transition: gap 0.2s ease;
}

.contacts-map-link:hover {
    gap: 10px;
}


/* ============================================================
   3. ПЛАШКА TELEGRAM
   ============================================================ */

.contacts-cta {
    padding: 0 0 60px;
}

.contacts-cta-block {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background-color: #f5f1ea;
    border-radius: 12px;
}

.contacts-cta-block > i {
    font-size: 32px;
    color: #173b32;
    flex-shrink: 0;
    transform: scaleX(-1);
}

.contacts-cta-text {
    flex: 1;
}

.contacts-cta-text h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
}

.contacts-cta-text p {
    font-size: 13px;
    color: #687d77;
    margin: 0;
}

.contacts-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #19372f;
    background-color: #ffffff;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.contacts-cta-btn:hover {
    background-color: #173b32;
    border-color: #173b32;
    color: #ffffff;
}

.contacts-cta-btn i {
    font-size: 16px;
}


/* ============================================================
   4. АДАПТИВ
   ============================================================ */

/* --- Планшеты (до 992px) --- */

@media (max-width: 992px) {

    /* Первый экран — в одну колонку */
    .contacts-hero {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 20px 0 40px;
    }

    /* Возвращаем боковые отступы контейнеру */
    .contacts-hero .container {
        padding-left: max(24px, calc((100vw - 1200px) / 2));
        padding-right: max(24px, calc((100vw - 1200px) / 2));
    }

    /* Картинка — сверху */
    .contacts-hero-image {
        order: -1;
    }

    .contacts-hero-image img {
        min-height: 280px;
    }

    /* Основной блок — 2 колонки, форма на всю ширину */
    .contacts-layout {
        grid-template-columns: 1fr 1fr;
    }

    .contacts-form-block {
        grid-column: 1 / -1;    /* форма на всю ширину */
        order: -1;              /* форма первая */
    }
}


/* --- Телефоны (до 576px) --- */

@media (max-width: 576px) {

    .contacts-hero {
        padding: 20px 0 40px;
    }

    .contacts-body {
        padding: 20px 0 40px;
    }

    /* Всё в одну колонку */
    .contacts-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contacts-form-block {
        padding: 20px;
    }

    /* Плашка Telegram — в столбик */
    .contacts-cta-block {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .contacts-cta-text {
        text-align: center;
    }

    .contacts-cta-btn {
        width: 100%;
        justify-content: center;
    }
}






/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ — account.html
   СОДЕРЖАНИЕ:
   1. Раскладка (сайдбар + контент)
   2. Сайдбар
   3. Профиль
   4. Последние заказы
   5. Адаптив
   ============================================================ */


/* ============================================================
   1. РАСКЛАДКА
   ============================================================ */

.account {
    padding: 40px 0 80px;
}

.account-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: flex-start;
}


/* ============================================================
   2. САЙДБАР
   ============================================================ */

.account-sidebar {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 20px;
}

.account-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: #19372f;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.account-menu-item i {
    font-size: 18px;
    color: #173b32;
    flex-shrink: 0;
}

.account-menu-item:hover {
    background-color: #f5f1ea;
    color: #173b32;
}

.account-menu-item--active {
    background-color: #eef3ef;
    font-weight: 600;
}


/* «Выйти» — отделён линией сверху */

.account-menu-logout {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    color: #879691;
}

.account-menu-logout i {
    color: #879691;
}

.account-menu-logout:hover {
    color: #d9534f;
    background-color: transparent;
}

.account-menu-logout:hover i {
    color: #d9534f;
}


/* ============================================================
   3. КОНТЕНТ
   ============================================================ */

.account-header {
    margin-bottom: 24px;
}

.account-header h1 {
    font-size: clamp(26px, 3vw, 36px);
    margin-bottom: 6px;
}

.account-subtitle {
    font-size: 14px;
    color: #687d77;
}


/* --- Карточка профиля --- */

.account-profile {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 40px;
}

.account-profile-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #d8dbd4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-avatar i {
    font-size: 32px;
    color: #173b32;
}

.account-avatar__image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.account-profile-info h2 {
    font-size: 18px;
    margin-bottom: 4px;
}

.account-profile-info p {
    font-size: 13px;
    color: #879691;
    margin-bottom: 8px;
}

.account-profile-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #173b32;
    transition: gap 0.2s ease;
}

.account-profile-edit:hover {
    gap: 10px;
}

.account-profile-edit i {
    font-size: 14px;
}


/* --- Статистика (3 блока) --- */

.account-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-left: 40px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.account-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.account-stat i {
    font-size: 22px;
    color: #173b32;
}

.account-stat-label {
    font-size: 12px;
    color: #879691;
    margin: 0;
}

.account-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #19372f;
    margin: 0;
}


/* ============================================================
   4. ПОСЛЕДНИЕ ЗАКАЗЫ
   ============================================================ */

.account-orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 20px;
}

.account-orders-header h2 {
    font-size: 22px;
    margin: 0;
}

.account-orders-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #173b32;
    transition: gap 0.2s ease;
}

.account-orders-all:hover {
    gap: 10px;
}


/* Список заказов */

.account-orders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-order {
    display: grid;
    grid-template-columns: 60px 1fr auto auto 24px;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.account-order:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
}

.account-order-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #f5f1ea;
}

.account-order-info {
    min-width: 0;
}

.account-order-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
    color: #19372f;
}

.account-order-desc {
    font-size: 12px;
    color: #879691;
    margin: 0 0 2px;
}

.account-order-num {
    font-size: 11px;
    color: #bbb;
    margin: 0;
}


/* Статус */

.account-order-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.account-order-status--done {
    background-color: #e7f0ea;
    color: #173b32;
}

.account-order-status--progress {
    background-color: #e2eaf4;
    color: #4a6da8;
}


/* Цена и дата */

.account-order-price {
    text-align: right;
    white-space: nowrap;
}

.account-order-sum {
    font-size: 15px;
    font-weight: 700;
    color: #19372f;
    margin: 0 0 2px;
}

.account-order-date {
    font-size: 12px;
    color: #879691;
    margin: 0;
}

.account-order-arrow {
    font-size: 14px;
    color: #bbb;
}


/* ============================================================
   5. АДАПТИВ
   ============================================================ */

/* --- Планшеты (до 992px) --- */

@media (max-width: 992px) {

    .account-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .account-sidebar {
        position: static;
    }

    /* Меню — в строку */
    .account-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .account-menu-item {
        flex: 1 1 auto;
        padding: 10px 14px;
        font-size: 13px;
    }

    .account-menu-logout {
        margin-top: 0;
        padding-top: 10px;
        border-top: none;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
    }

    /* Профиль — в столбик */
    .account-profile {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .account-stats {
        padding-left: 0;
        padding-top: 20px;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
}


/* --- Телефоны (до 576px) --- */

@media (max-width: 576px) {

    .account {
        padding: 20px 0 40px;
    }

    /* Заказ — карточка в столбик */
    .account-order {
        grid-template-columns: 60px 1fr auto;
        gap: 12px;
        padding: 16px;
    }

    .account-order-info {
        grid-column: 2;
    }

    .account-order-status {
        grid-column: 2;
        justify-self: start;
    }

    .account-order-price {
        grid-column: 3;
        text-align: right;
    }

    .account-order-arrow {
        display: none;              /* стрелку убираем на мобильном */
    }

    .account-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .account-stat {
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }
}



/* ============================================================
   ВХОД / РЕГИСТРАЦИЯ — login.html, register.html
   СОДЕРЖАНИЕ:
   1. Раскладка страницы (три колонки с фоном)
   2. Карточка входа
   3. Поля с иконками
   4. Чекбокс «Запомнить меня»
   5. Кнопки и ссылки
   6. Адаптив
   ============================================================ */


/* ============================================================
   1. РАСКЛАДКА — фон слева | карточка | фон справа
   ============================================================ */

.auth-page {
    background-color: rgb(244, 247, 244);
}

.auth-layout {
    display: grid;
    grid-template-columns: 1fr 480px 1fr;   /* фон | карточка | фон */
    min-height: 100vh;
}


/* Фоновые картинки по бокам */

.auth-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-bg--left {
    background-image: url('../img/about-story.jpg');   /* горный пейзаж */
    opacity: 0.7;
}

.auth-bg--right {
    background-image: url('../img/about-hero.jpg');  /* чайная церемония */
}


/* ============================================================
   2. КАРТОЧКА ВХОДА
   ============================================================ */

.auth-main {
    position: relative;                 /* точка отсчёта для absolute */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    overflow: hidden;                   /* обрезать картинку по краям */
}

.auth-main > img {
    position: absolute;
    inset: 0;                           /* отступы сверху, справа, снизу и слева */
    width: 100%;
    height: 100%;
    object-fit: cover;                  /* заполняет, обрезая лишнее */
    z-index: 0;
    opacity: 1;                       /* затемняем — чтобы карточка читалась */
}

.auth-card {
    position: relative;                 /* для z-index */
    z-index: 2;                         /* поверх картинки */
    width: 100%;
    max-width: 440px;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    text-align: center;
}


/* Логотип */

.auth-logo {
    display: inline-flex;
    margin-bottom: 20px;
}

.auth-logo img {
    width: 44px;
    height: auto;
}


/* Заголовок */

.auth-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
}

.auth-subtitle {
    font-size: 14px;
    line-height: 1.5;
    color: #687d77;
    margin-bottom: 28px;
}


/* ============================================================
   3. ФОРМА — поля с иконками
   ============================================================ */

.auth-form {
    text-align: left;
}

.input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-wrap > i:first-child {
    position: absolute;
    left: 14px;
    font-size: 16px;
    color: #879691;
    pointer-events: none;
    z-index: 1;
}

.form-input.input-with-icon {
    width: 100%;
    padding: 12px 16px 12px 42px;   /* слева — место под иконку */
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-size: 14px;
    background-color: #ffffff;
    color: #19372f;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input.input-with-icon::placeholder {
    color: #bbb;
}

.form-input.input-with-icon:focus {
    outline: none;
    border-color: #173b32;
    box-shadow: 0 0 0 3px rgba(74, 93, 58, 0.1);
}


/* Кнопка «показать пароль» */

.password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #879691;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #173b32;
}


/* ============================================================
   4. СТРОКА — чекбокс + ссылка «Забыли пароль»
   ============================================================ */

.auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 20px;
    gap: 12px;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #536b65;
    cursor: pointer;
    user-select: none;
}

/* Прячем нативный чекбокс */

.auth-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* Квадратик */

.auth-checkbox-mark {
    position: relative;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c5c5c5;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Галочка внутри */

.auth-checkbox-mark::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

.auth-checkbox input:checked ~ .auth-checkbox-mark {
    background-color: #173b32;
    border-color: #173b32;
}

.auth-checkbox input:checked ~ .auth-checkbox-mark::after {
    transform: rotate(45deg) scale(1);
}


/* Ссылка «Забыли пароль» */

.auth-forgot {
    font-size: 13px;
    color: #173b32;
    transition: color 0.2s ease;
}

.auth-forgot:hover {
    color: #102e27;
    text-decoration: underline;
}


/* ============================================================
   5. КНОПКА «ВОЙТИ» И ССЫЛКИ
   ============================================================ */

.btn-auth {
    width: 100%;
    padding: 14px 24px;
    background-color: #173b32;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-auth:hover {
    background-color: #102e27;
}


/* Разделитель «Нет аккаунта?» */

.auth-divider {
    position: relative;
    text-align: center;
    margin: 24px 0 14px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 80px);
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}

.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

.auth-divider span {
    display: inline-block;
    padding: 0 12px;
    font-size: 13px;
    color: #879691;
}


/* Ссылка «Зарегистрироваться» */

.auth-register-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #173b32;
    transition: color 0.2s ease;
}

.auth-register-link:hover {
    color: #102e27;
    text-decoration: underline;
}


/* ============================================================
   6. АДАПТИВ
   ============================================================ */

/* --- Планшеты (до 992px) --- */

@media (max-width: 992px) {

    /* Скрываем боковые фоны */
    .auth-layout {
        grid-template-columns: 1fr;
    }

    .auth-bg {
        display: none;
    }

    .auth-main {
        padding: 40px 20px;
    }
}


/* --- Телефоны (до 576px) --- */

@media (max-width: 576px) {

    .auth-card {
        padding: 28px 20px;
    }

    .auth-title {
        font-size: 22px;
    }

    .auth-subtitle {
        font-size: 13px;
    }

    .btn-auth {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ============================================================
   РЕГИСТРАЦИЯ — дополнительные стили
   ============================================================ */

/* Чекбокс с согласием — выше и с ссылками внутри */

.auth-checkbox--terms {
    align-items: flex-start;
    margin-bottom: 20px;
    line-height: 1.5;
}

.auth-checkbox--terms .auth-checkbox-mark {
    margin-top: 2px;                    /* чтобы галочка была на уровне первой строки */
}

.auth-checkbox-link {
    color: #173b32;
    text-decoration: underline;
    text-decoration-color: rgba(74, 93, 58, 0.4);
    transition: color 0.2s ease;
}

.auth-checkbox-link:hover {
    color: #102e27;
    text-decoration-color: #102e27;
}


/* Если карточка регистрации чуть выше — меньше отступы */

.auth-main .auth-card {
    padding: 36px 32px;                 /* чуть компактнее, чем у формы входа */
}




/* ============================================================
   ИЗБРАННОЕ — favorites.html
   ============================================================ */

/* Заголовок */

.favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 6px;
}

.favorites-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(26px, 3vw, 36px);
    margin: 0;
}

.favorites-header h1 i {
    font-size: 28px;
    color: #173b32;
}

.favorites-count {
    font-size: 13px;
    color: #879691;
    white-space: nowrap;
}

.favorites-subtitle {
    font-size: 14px;
    color: #687d77;
    margin-bottom: 32px;
}


/* Сетка карточек — 4 в ряд */

.favorites-grid {
    grid-template-columns: repeat(3, 1fr);   /* 3 в ряд — карточки крупнее */
    gap: 20px;
}


/* На карточках в избранном — сердце залитое */

.favorites-grid .favorite-btn {
    background-color: #ffffff;
    color: #d9534f;
}


/* Кнопка «В корзину» с иконкой */

.product-btn i {
    font-size: 15px;
    margin-right: 6px;
}


/* ============================================================
   АДАПТИВ — ЛИЧНЫЙ КАБИНЕТ И ИЗБРАННОЕ
   По убыванию ширины: 992 → 768 → 576
   ============================================================ */


/* ============================================================
   АДАПТИВ — ЛИЧНЫЙ КАБИНЕТ И ИЗБРАННОЕ
   По убыванию ширины: 992 → 768 → 576
   ============================================================ */


/* ============================================================
   Планшеты (до 992px)
   ============================================================ */

@media (max-width: 992px) {

    /* Раскладка — в одну колонку */
    .account-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Сайдбар — сверху, не sticky */
    .account-sidebar {
        position: static;
        padding: 12px;
    }

    /* Меню — в строку, с переносом */
    .account-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .account-menu-item {
        flex: 0 1 auto;
        padding: 10px 14px;
        font-size: 13px;
    }

    /* «Выйти» — сбоку, отделён линией слева */
    .account-menu-logout {
        margin-top: 0;
        padding-top: 10px;
        border-top: none;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        flex: 0 0 auto;
    }

    /* Профиль — в столбик */
    .account-profile {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }

    .account-stats {
        padding-left: 0;
        padding-top: 20px;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Избранное — 2 колонки */
    .favorites-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================
   Планшеты в портрете и крупные телефоны (до 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* Сайдбар — вертикально, компактно */
    .account-menu {
        flex-direction: column;
        gap: 2px;
    }

    .account-menu-item {
        flex: none;
        width: 100%;
        padding: 10px 12px;
        font-size: 13px;
    }

    .account-menu-logout {
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        margin-top: 4px;
        padding-top: 12px;
        width: 100%;
        border-radius: 8px;
    }

    /* Заказ — 3 колонки, стрелка скрыта */
    .account-order {
        grid-template-columns: 60px 1fr auto;
        gap: 12px;
        padding: 14px;
    }

    .account-order-status {
        grid-column: 2;
        justify-self: start;
    }

    .account-order-price {
        grid-column: 3;
        text-align: right;
    }

    .account-order-arrow {
        display: none;
    }
}


/* ============================================================
   Телефоны (до 576px)
   ============================================================ */

@media (max-width: 576px) {

    /* Сетка карточек — 2 колонки, БЕЗ растягивания */
    .product-grid,
    .favorites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));   /* ← minmax — защита от растягивания */
        gap: 10px;
    }

    /* Внутри карточки всё сжимается */
    .product-card {
        padding: 10px;
        min-width: 0;                       /* ← чтобы не растягивалась */
    }

    .product-card-image {
        min-width: 0;

    }

    .product-card-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

    .product-name {
        height: calc(1.3em * 3);
        min-height: calc(1.3em * 3);
        min-width: 0;
    }

    .product-title {
        display: -webkit-box;
        font-size: 13px;
        line-height: 1.3;
        word-break: break-word;             /* ← перенос длинных слов */
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-description {
        font-size: 11px;
    }

    .product-price {
        font-size: 15px;
    }

    .product-btn {
        font-size: 12px;
        padding: 6px 8px;
        white-space: nowrap;
    }

    /* Сердечко — меньше */
    .product-grid .product-card-image .favorite-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
        top: 6px;
        right: 6px;
    }

    .product-card-badges {
        top: 14px;
        left: 14px;
        gap: 4px;
        max-width: calc(100% - 52px);
    }

    .product-card-badge {
        gap: 5px;
        padding: 0 8px;
        font-size: 12px;
    }

    /* Заголовок избранного — в столбик */
    .favorites-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .favorites-header h1 {
        font-size: 20px;
    }

    .favorites-header h1 i {
        font-size: 20px;
    }

    .favorites-count {
        font-size: 12px;
    }

    .favorites-subtitle {
        font-size: 13px;
        margin-bottom: 20px;
    }

    /* Профиль — компактнее */
    .account-avatar {
        width: 48px;
        height: 48px;
    }

    .account-avatar i {
        font-size: 24px;
    }

    .account-profile-info h2 {
        font-size: 15px;
    }

    .account-profile-info p {
        font-size: 12px;
    }

    /* Статистика — в столбик */
    .account-stats {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .account-stat {
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }

    /* Общий контейнер — отступы меньше */
    .container {
        padding: 0 16px;
    }
}


/* ============================================================
   14. АДАПТИВ — все медиазапросы в конце
   По убыванию ширины: 992 → 768 → 576
   ============================================================ */

/* --- Планшеты и небольшие ноутбуки (до 992px) --- */

@media (max-width: 992px) {

    .header-inner {
        gap: 20px;
    }

    .header-nav {
        gap: 20px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Корзина — в одну колонку */
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-features {
        margin-bottom: 40px;
    }

    /* Товары и итог — друг под другом */
    .tabs-content {
        grid-template-columns: 1fr;
    }
}


/* --- Планшеты в портрете и крупные телефоны (до 768px) --- */

@media (max-width: 768px) {

    /* --- Шапка --- */
    .header-inner {
        flex-wrap: wrap;
        row-gap: 16px;
    }

    .header-brand {
        width: 100%;
    }

    .header-nav {
        order: 2;
        flex: 1;
        gap: 16px;
    }

    .header-icons {
        order: 3;
        margin-left: 0;
    }

    .header-search-form {
        top: calc(100% + 10px);
        right: 0;
        width: min(360px, calc(100vw - 32px));
        transform: none;
    }

    /* --- Первый экран --- */
    .hero {
        align-items: flex-start;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .hero-content {
        padding: 0 clamp(20px, 5vw, 80px);
    }

    /* --- Корзина: таблица → карточки --- */
    .cart-head {
        display: none;
    }

    .cart-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        margin-bottom: 12px;
        position: relative;
    }

    .cart-item-info {
        width: 100%;
        padding-right: 40px;
    }

    .cart-item-remove {
        position: absolute;
        top: 16px;
        right: 16px;
    }

    /* Подписи «Цена», «Количество», «Сумма» */
    .cart-item-price::before {
        content: 'Цена: ';
        color: #879691;
        font-size: 13px;
        font-weight: 400;
    }

    .cart-item-total::before {
        content: 'Сумма: ';
        color: #879691;
        font-size: 13px;
        font-weight: 400;
    }

    .quantity--small {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        border: none;
        padding: 0;
    }

    .quantity--small::before {
        content: 'Количество:';
        color: #879691;
        font-size: 13px;
    }

    .quantity--small .quantity-btn {
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }

    .quantity--small .quantity-btn:first-of-type {
        border-left: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 6px 0 0 6px;
    }

    .quantity--small .quantity-btn:last-of-type {
        border-right: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 0 6px 6px 0;
    }

    /* --- Фичи в корзине — в столбик --- */
    .cart-features {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .feature-delivery,
    .feature-garant {
        border-right: none;
        padding-right: 0;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .feature-natur {
        padding-bottom: 0;
        border-bottom: none;
    }
}


/* --- Телефоны (до 576px) --- */

@media (max-width: 576px) {

    /* --- Шапка --- */
    .header-nav {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .header-search-form {
        position: fixed;
        top: 96px;
        right: 12px;
        left: 12px;
        width: auto;
        transform: none;
    }

    .header-link {
        font-size: 14px;
    }

    /* --- Карточки товаров --- */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* --- Корзина --- */
    .cart-item-info img {
        width: 60px;
        height: 60px;
    }

    .cart-item-title {
        font-size: 13px;
    }

    .cart-item-desc {
        font-size: 12px;
    }

    .cart-block-1 {
        padding: 16px;
    }

    .cart-features-2 {
        padding: 16px;
    }

    .summary-total span:first-child {
        font-size: 16px;
    }

    .summary-total span:last-child {
        font-size: 18px;
    }
}


/* ============================================================
   АДАПТИВ — КАТАЛОГ
   ============================================================ */

/* --- Планшеты и небольшие ноутбуки (до 992px) --- */

@media (max-width: 992px) {

    .catalog-layout {
        grid-template-columns: 220px 1fr;
        /* фильтр уже */
        gap: 24px;
    }

    .catalog-filter {
        padding: 20px;
        /* меньше отступы */
    }
}


/* --- Планшеты в портрете и крупные телефоны (до 768px) --- */

@media (max-width: 768px) {

    .catalog-layout {
        grid-template-columns: 1fr;
        /* фильтры сверху, товары снизу */
        gap: 24px;
    }

    .catalog-filter {
        padding: 16px;
    }
}


/* --- Телефоны (до 576px) --- */

@media (max-width: 576px) {

    .catalog-filter {
        padding: 12px;
    }

    /* Поля цены — в столбик */
    .price-inputs {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .price-field {
        flex: none;
    }

    /* Пагинация — компактнее */
    .pagination-page,
    .pagination-arrow {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

/* ============================================================
   АДАПТИВ — СТРАНИЦА ТОВАРА
   ============================================================ */

/* --- Планшеты и небольшие ноутбуки (до 992px) --- */

@media (max-width: 992px) {

    /* Галерея и инфо — в одну колонку */
    .product-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Табы и характеристики — в одну колонку */
    .tabs-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-gallery {
        grid-template-columns: 80px 1fr;
        /* миниатюры слева — оставляем */
    }
}


/* --- Планшеты в портрете и крупные телефоны (до 768px) --- */

@media (max-width: 768px) {

    /* Фичи товара — в столбик */
    .product-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Табы — горизонтальный скролл */
    .tabs-nav {
        gap: 20px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .tabs-nav::-webkit-scrollbar {
        display: none;
    }

    /* Цена и заголовок — меньше */
    .product-price {
        font-size: 26px;
    }

    .product-info h1 {
        font-size: 24px;
    }
}


/* --- Телефоны (до 576px) --- */

@media (max-width: 576px) {

    /* Галерея — большое фото сверху, миниатюры в строку под ним */
    .product-gallery {
        grid-template-columns: 1fr;
    }

    .gallery-thumbs {
        flex-direction: row;
        order: 2;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
    }

    .gallery-thumbs button {
        flex-shrink: 0;
        width: 60px;
    }

    .gallery-main {
        order: 1;
    }

    /* Покупка — счётчик и кнопка в столбик */
    .product-control {
        flex-wrap: wrap;
        gap: 12px;
    }

    .btn-cart {
        flex: 1 1 100%;
    }

    /* Цена — в столбик */
    .product-price-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Характеристики — значение под названием */
    .spec-row {
        grid-template-columns: 20px 1fr;
        gap: 8px 12px;
        font-size: 13px;
    }

    .spec-value {
        grid-column: 2;
        text-align: left;
        color: #879691;
    }

    .product-specs {
        padding: 16px;
    }

    /* Табы — мельче */
    .tab-btn {
        font-size: 14px;
        padding: 10px 0;
    }
}



/* ============================================================
   АДАПТИВ — ОФОРМЛЕНИЕ ЗАКАЗА (checkout)
   ============================================================ */


/* --- Планшеты и небольшие ноутбуки (до 992px) --- */

@media (max-width: 992px) {

    /* Форма и «Ваш заказ» — в столбик */
    .order-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Итог больше не прилипает при скролле */
    .order-summary {
        position: static;
    }
}


/* --- Планшеты в портрете и крупные телефоны (до 768px) --- */

@media (max-width: 768px) {

    /* Отступы секции — меньше */
    .checkout {
        padding: 30px 0 60px;
    }

    /* Имя и Телефон — друг под другом */
    .order-name-fone {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .order-name-fone .form-field {
        width: 100%;
    }

    /* Блоки формы — меньше padding */
    .order-items {
        padding: 20px;
        margin-bottom: 16px;
    }

    /* Заголовки блоков — меньше */
    .order-title {
        font-size: 16px;
    }

    /* Итог — меньше padding */
    .order-summary {
        padding: 20px;
    }

    .order-summary-title {
        font-size: 20px;
    }

    /* Товары в итоге — фото меньше */
    .order-summary-item {
        grid-template-columns: 50px 1fr auto;
        gap: 10px;
    }

    .order-summary-item img {
        width: 50px;
        height: 50px;
    }
}


/* --- Телефоны (до 576px) --- */

@media (max-width: 576px) {

    /* Секция */
    .checkout {
        padding: 20px 0 40px;
    }

    .checkout-title {
        font-size: 26px;
    }

    .checkout-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    /* Блоки формы */
    .order-items {
        padding: 16px;
    }

    .order-head {
        gap: 10px;
        margin-bottom: 16px;
    }

    .order-one {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .order-title {
        font-size: 15px;
    }

    /* Поля — меньше padding */
    .form-input,
    .form-textarea {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Радио-кнопки */
    .radio-option {
        padding: 12px 14px;
        gap: 10px;
    }

    .radio-title {
        font-size: 13px;
    }

    .radio-desc {
        font-size: 12px;
    }

    /* Кнопка «Подтвердить заказ» */
    .btn-checkout {
        padding: 14px 20px;
        font-size: 14px;
    }

    /* Итог */
    .order-summary {
        padding: 16px;
    }

    .order-summary-title {
        font-size: 18px;
    }

    .order-summary-item {
        grid-template-columns: 44px 1fr auto;
        gap: 8px;
    }

    .order-summary-item img {
        width: 44px;
        height: 44px;
    }

    .order-summary-name {
        font-size: 13px;
    }

    .order-summary-price {
        font-size: 13px;
    }

    .order-summary-total span:first-child {
        font-size: 16px;
    }

    .order-summary-total span:last-child {
        font-size: 18px;
    }

    .order-summary-delivery {
        padding: 12px 14px;
    }

    .order-summary-back {
        font-size: 13px;
    }
}
/* =========================================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ СТРАНИЦ И КОМПОНЕНТОВ

   Разделы
   1. Общие модификаторы и шапка
   2. Ошибки форм
   3. Корзина и подтверждение заказа
   4. Страницы аккаунта
   5. Редактирование профиля
   6. Пароль и адреса
   7. Карта контактов
   8. Адаптивные правила
   ========================================================= */


/* 1. Общие модификаторы и шапка */

.icon--flipped {
    transform: scaleX(-1);
}

.header-user-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    gap: 5px;
}

.header-user-link > img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.header-user-avatar {
    display: block;
    overflow: hidden;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background-color: #e4e6e1;
}

.header-user-avatar__image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.header-user-avatar__image--default {
    padding: 6px;
    object-fit: contain;
}

.account-menu-logout-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    appearance: none;
}

.account-menu-logout-button {
    width: 100%;
    text-align: left;
}


/* 2. Ошибки и подсказки форм */

.form-error-summary {
    margin-bottom: 10px;
    color: #d9534f;
    font-size: 13px;
}

.form-error {
    color: #d9534f;
    font-size: 12px;
}


/* 3. Корзина и подтверждение заказа */

.cart-checkout-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.cart-empty-state {
    padding: 50px 0;
    text-align: center;
}

.cart-empty-state__description {
    margin: 20px 0;
    color: #687d77;
}

.order-summary-quantity {
    color: #879691;
    font-size: 12px;
}

.order-confirmation {
    padding: 100px 0;
    text-align: center;
}

.order-confirmation__title {
    margin-bottom: 20px;
    color: #173b32;
    font-size: 36px;
}

.order-confirmation__message {
    margin: 20px 0;
    font-size: 18px;
}

.order-confirmation__phone {
    margin-bottom: 30px;
    color: #687d77;
}

.order-confirmation__link {
    display: inline-block;
}


/* 4. Страницы аккаунта */

.account-order-img--empty {
    background: #eee;
}

.account-orders-list--spaced {
    margin-top: 30px;
}

.account-empty-state {
    width: 100%;
    padding: 50px 0;
    text-align: center;
}

.account-empty-message {
    margin-bottom: 20px;
    color: #687d77;
}


/* 5. Редактирование профиля */

.profile-edit__page-title i {
    margin-right: 10px;
}

.profile-edit__success-message {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 6px;
    background: #e7f0ea;
    color: #173b32;
}

.profile-edit__google-connect {
    margin-bottom: 20px;
}

.profile-edit__google-connect .btn-auth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    text-align: center;
    text-decoration: none;
}

.profile-edit__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 30px;
}

.profile-edit__card {
    padding: 30px;
    border-radius: 12px;
    background: #fff;
}

.profile-edit__card--personal {
    margin-bottom: 20px;
}

.profile-edit__section-title {
    margin-bottom: 20px;
    font-size: 20px;
}

.profile-edit__field {
    margin-bottom: 15px;
}

.profile-edit__field--last {
    margin-bottom: 0;
}

.profile-edit__subscription-label,
.profile-edit__subscription-copy,
.profile-edit__notice,
.profile-edit__metadata-row {
    display: flex;
    align-items: center;
}

.profile-edit__subscription-label {
    justify-content: space-between;
    cursor: pointer;
}

.profile-edit__subscription-copy {
    gap: 15px;
}

.profile-edit__subscription-icon {
    color: #687d77;
    font-size: 24px;
}

.profile-edit-page .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.profile-edit-page .switch-input {
    width: 0;
    height: 0;
    opacity: 0;
}

.profile-edit-page .slider {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: #ccc;
    cursor: pointer;
    transition: background-color 0.4s ease;
}

.profile-edit-page .slider::before {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: transform 0.4s ease;
}

.profile-edit-page .switch-input:checked + .slider {
    background: #173b32;
}

.profile-edit-page .switch-input:checked + .slider::before {
    transform: translateX(20px);
}

.profile-edit__notice {
    gap: 10px;
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 6px;
    background: #f5f1ea;
    color: #687d77;
    font-size: 12px;
}

.profile-edit__submit {
    width: 100%;
    margin-top: 20px;
}

.profile-edit__summary {
    height: fit-content;
    text-align: center;
}

.profile-edit__avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
}

.profile-edit__avatar i {
    font-size: 40px;
}

.profile-edit__avatar-control {
    margin: 0 auto 20px;
    text-align: left;
}

.profile-edit__avatar-control > label {
    display: block;
    margin-bottom: 8px;
    color: #19372f;
    font-size: 14px;
    font-weight: 600;
}

.profile-edit__avatar-input {
    width: 100%;
    padding: 10px;
    font-size: 13px;
}

.profile-edit__avatar-input::file-selector-button {
    margin-right: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: #f1eee8;
    color: #173b32;
    cursor: pointer;
}

.profile-edit__help {
    margin: 7px 0 0;
    color: #687d77;
    font-size: 12px;
}

.profile-edit__field-error {
    margin: 6px 0 0;
    color: #b42318;
    font-size: 13px;
}

.profile-edit__name {
    margin-bottom: 5px;
}

.profile-edit__email {
    margin-bottom: 25px;
    color: #687d77;
    font-size: 14px;
}

.profile-edit__divider {
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}

.profile-edit__metadata {
    color: #19372f;
    font-size: 14px;
    text-align: left;
}

.profile-edit__metadata-row {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}

.profile-edit__metadata-row--last {
    margin-bottom: 0;
}

.profile-edit__metadata-row > i {
    color: #687d77;
    font-size: 18px;
}

.profile-edit__metadata-label,
.profile-edit__metadata-value {
    margin: 0;
}

.profile-edit__metadata-label {
    margin-bottom: 2px;
    color: #687d77;
    font-size: 12px;
}

/* Политика конфиденциальности */
.privacy-page {
    padding-bottom: 88px;
    background: #f6f4ef;
}

.privacy-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background-image: linear-gradient(90deg, rgba(20, 31, 21, .88), rgba(20, 31, 21, .42)), url('../img/login.jpg');
    background-position: center 48%;
    background-size: cover;
}

.privacy-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-top: 58px;
    padding-bottom: 58px;
}

.privacy-hero__copy {
    max-width: 760px;
}

.privacy-eyebrow,
.privacy-updated {
    color: rgba(255, 255, 255, .78);
}

.privacy-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.privacy-hero h1 {
    max-width: 700px;
    margin: 0 0 18px;
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.08;
}

.privacy-hero__lead {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 17px;
    line-height: 1.7;
}

.privacy-updated {
    margin: 22px 0 0;
    font-size: 13px;
}

.privacy-hero__mark {
    width: 112px;
    height: 112px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    color: rgba(255, 255, 255, .9);
    font-size: 46px;
}

.privacy-content {
    padding-top: 42px;
}

.privacy-demo-note,
.privacy-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid #e4dccd;
    border-radius: 12px;
    background: #fffdf9;
    color: #4d5147;
}

.privacy-demo-note {
    margin-bottom: 28px;
    padding: 18px 22px;
}

.privacy-demo-note > i,
.privacy-footer-note > i {
    margin-top: 2px;
    color: #173b32;
    font-size: 20px;
}

.privacy-demo-note p,
.privacy-footer-note p {
    margin: 0;
    line-height: 1.65;
}

.privacy-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.privacy-toc {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 4px;
    padding: 22px 18px;
    border: 1px solid #e9e5dc;
    border-radius: 12px;
    background: #fff;
}

.privacy-toc__title {
    margin: 0 0 8px;
    color: #242820;
    font-weight: 700;
}

.privacy-toc a {
    padding: 8px 9px;
    border-radius: 6px;
    color: #5c6257;
    font-size: 14px;
    text-decoration: none;
}

.privacy-toc a:hover,
.privacy-toc a:focus-visible {
    background: #f4f2ec;
    color: #34452c;
}

.privacy-article {
    min-width: 0;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid #e9e5dc;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(45, 48, 37, .05);
}

.privacy-intro {
    margin: 0 0 30px;
    color: #536b65c50;
    font-size: 17px;
    line-height: 1.8;
}

.privacy-section {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    padding: 25px 0;
    border-top: 1px solid #eeece6;
    scroll-margin-top: 24px;
}

.privacy-section__number {
    padding-top: 3px;
    color: #849174;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px;
}

.privacy-section h2 {
    margin: 0 0 11px;
    color: #252a22;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(20px, 2.4vw, 25px);
    line-height: 1.3;
}

.privacy-section p {
    margin: 0 0 12px;
    color: #62675e;
    line-height: 1.75;
}

.privacy-section p:last-child {
    margin-bottom: 0;
}

.privacy-section a,
.privacy-form-notice a {
    color: #49613b;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.privacy-footer-note {
    margin-top: 18px;
    padding: 18px 20px;
    background: #f8f7f2;
    font-size: 14px;
}

.privacy-form-notice {
    margin: 14px 0;
    color: #6a6d65;
    font-size: 13px;
    line-height: 1.5;
}

.turnstile-widget {
    display: flex;
    justify-content: center;
    max-width: 100%;
    margin: 8px 0 16px;
}

@media (max-width: 760px) {
    .privacy-page {
        padding-bottom: 56px;
    }

    .privacy-hero {
        min-height: 300px;
    }

    .privacy-hero__inner {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .privacy-hero__mark {
        display: none;
    }

    .privacy-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .privacy-toc {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .privacy-toc__title {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .privacy-hero__lead {
        font-size: 15px;
    }

    .privacy-content {
        padding-top: 24px;
    }

    .privacy-demo-note {
        padding: 15px;
    }

    .privacy-article {
        padding: 22px 18px;
    }

    .privacy-section {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    .privacy-toc {
        grid-template-columns: 1fr;
    }
}


/* 6. Смена пароля и адреса */

.password-change-card,
.address-empty-card {
    padding: 30px;
    border-radius: 12px;
    background: #fff;
}

.password-change-card {
    max-width: 500px;
}

.password-change-field {
    margin-bottom: 15px;
}

.password-change-help,
.address-empty-message {
    color: #687d77;
}

.password-change-submit {
    width: 100%;
}

.address-empty-card {
    text-align: center;
}

.address-add-button {
    margin-top: 20px;
}


/* 7. Карта на странице контактов */

.contacts-map__frame {
    width: 100%;
    height: 300px;
    border: 0;
}


/* 8. Адаптивные правила */

@media (max-width: 768px) {
    .profile-edit__layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .profile-edit__card {
        padding: 24px;
    }
}

@media (max-width: 576px) {
    .order-confirmation {
        padding: 64px 0;
    }

    .order-confirmation__title {
        font-size: 30px;
    }

    .profile-edit__card {
        padding: 20px;
    }

    .profile-edit__subscription-label {
        align-items: flex-start;
        gap: 16px;
    }
}

/* ============================================================
   ИСПРАВЛЕНИЕ ГОРИЗОНТАЛЬНОЙ ПРОКРУТКИ НА МОБИЛЬНЫХ
   ============================================================ */

/* 1. Запрещаем сайту быть шире экрана */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Отключает горизонтальную прокрутку */
}

/* 2. Защищаем корзину от растягивания */
.cart-layout, 
.cart-block-1, 
.cart-item {
    max-width: 100%;
    box-sizing: border-box;
}

/* 3. На телефонах делаем корзину еще компактнее */
@media (max-width: 576px) {
    /* Отключаем лишние отступы внутри карточки товара в корзине */
    .cart-item {
        padding: 12px;
    }
    
    /* Уменьшаем картинку в корзине, если она слишком большая */
    .cart-item-info img {
        width: 50px;
        height: 50px;
    }

    /* Текст описания не должен вылезать за края */
    .cart-item-desc, 
    .cart-item-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Кнопка "Очистить корзину" на всю ширину */
    .cart-clear-2 {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   ФУТЕР НА МОБИЛЬНЫХ — ИСПРАВЛЕНИЕ
   ============================================================ */
@media (max-width: 768px) {
    .footer-columns {
        display: flex; /* Используем flex вместо grid для надежности */
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-col-left,
    .footer-col,
    .footer-col-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .footer-brand {
        justify-content: center;
        margin-left: 0;
    }

    .footer-header {
        margin-left: 0;
    }

    .footer-menu {
        align-items: center;
    }

    .footer-social {
        justify-content: center;
    }
}

/* ============================================================
   ИСПРАВЛЕНИЕ КНОПОК + И - В КОРЗИНЕ НА МОБИЛЬНЫХ
   ============================================================ */
@media (max-width: 768px) {
    /* Возвращаем кнопкам горизонтальное расположение */
    .quantity--small {
        flex-direction: row !important; /* Ставим в ряд */
        align-items: center !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important; /* Возвращаем общую рамку */
        border-radius: 6px !important;
        width: fit-content;
        padding: 0 !important;
    }

    /* Убираем надпись "Количество:", которая ломает вид */
    .quantity--small::before {
        content: none !important;
    }

    /* Делаем кнопки и инпут аккуратными */
    .quantity--small .quantity-btn {
        width: 32px;
        height: 32px;
        border: none !important; /* Убираем старые рамки */
    }

    .quantity--small .quantity-input {
        width: 30px;
        height: 32px;
        border: none !important;
    }
    
    /* Сбрасываем старые стили границ для первой и последней кнопки */
    .quantity--small .quantity-btn:first-of-type,
    .quantity--small .quantity-btn:last-of-type {
        border: none !important;
    }
}

/* ============================================================
   УЛУЧШЕНИЕ ЧИТАЕМОСТИ ТЕКСТА НА ФОНЕ КАРТИНКИ (КОНТАКТЫ)
   ============================================================ */

/* 1. Легкое затемнение, чтобы картинка была видна, но текст читался */
.contacts-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* 40% затемнения — картинка видна, текст контрастный */
    z-index: 1;
}

/* 2. Белый текст с тенью для надежности */
.contacts-hero-content {
    position: relative;
    z-index: 2; /* Текст поверх затемнения */
}

.contacts-hero-content h1,
.contacts-hero-content .contacts-hero-lead,
.contacts-hero-content .breadcrumbs,
.contacts-hero-content .breadcrumbs a,
.contacts-hero-content .breadcrumbs span {
    color: #ffffff !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9); /* Тень для контраста */
}

/* 3. Мобильная версия (чуть сильнее затемнение) */
@media (max-width: 768px) {
    .contacts-hero::before {
        background: rgba(0, 0, 0, 0.5); /* 50% — золотая середина */
    }
}

/* ============================================================
   ИСПРАВЛЕНИЕ БЕЙДЖА «НОВИНКА» НА КАРТОЧКАХ
   ============================================================ */

/* 1. На больших экранах просто сдвигаем его в угол */
.product-card-badges {
    top: 12px;
    left: 12px;
    z-index: 3; /* Чтобы был поверх картинки */
}

.product-card-badge {
    /* Уменьшаем ширину, чтобы он не растягивался */
    width: auto;
    min-width: 80px;
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
}

/* 2. На мобильных (до 576px) делаем его еще аккуратнее */
@media (max-width: 576px) {
    .product-card-badges {
        top: 8px;
        left: 8px;
        max-width: calc(100% - 40px); /* Чтобы не закрывал сердечко */
    }

    .product-card-badge {
        height: 22px;
        padding: 0 6px;
        font-size: 10px;
        gap: 3px;
    }

    .product-card-badge img {
        width: 14px;
        height: 10px;
    }
}