/* v3 */
    :root {
      --choco: #42221a;
      --choco-mid: #5c3028;
      --choco-light: #7a4a40;
      --berry: #42221a;
      --berry-bright: #5c3028;
      --cream: #f5ede8;
      --white: #ffffff;
      --gold: #42221a;
      --pink-soft: #f0e8e0;
    }
    * { scroll-behavior: smooth; box-sizing: border-box; }
 
    /* ── Основа: чистый белый фон, коричневый текст ── */
    body { font-family: 'DM Sans', sans-serif; background-color: #ffffff; color: #42221a; overflow-x: hidden; }
    h1,h2,h3,h4 { font-family: 'Playfair Display', serif; color: #42221a; }
 
    /* ── Навбар: белый, тонкая бежевая линия снизу ── */
    nav { background: #ffffff; backdrop-filter: none; border-bottom: 1px solid #ebdfd5; }
    .nav-link { position: relative; color: #42221a; transition: color 0.3s; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; background: none; border: none; cursor: pointer; font-family: 'DM Sans',sans-serif; }
    .nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px; background:#42221a; transition:width 0.3s ease; border-radius:2px; }
    .nav-link:hover { color: #5c3028; }
    .nav-link.active { color: #42221a; }
    .nav-link:hover::after, .nav-link.active::after { width:100%; }
 
    /* ── Герой: тёплый бежевый фон как на референсе ── */
    .hero-bg { background: #f5ede8; position:relative; overflow:hidden; }
    .hero-bg::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 80% 40%, rgba(235,223,213,0.6) 0%, transparent 65%); }
 
    .floating { animation: float 6s ease-in-out infinite; }
    @keyframes float { 0%,100%{transform:translateY(0px) rotate(-2deg);} 50%{transform:translateY(-18px) rotate(2deg);} }
 
    .choco-drop { position:absolute; font-size:2rem; opacity:0.08; animation:drift 8s ease-in-out infinite; }
    @keyframes drift { 0%,100%{transform:translateY(0) rotate(0deg);} 33%{transform:translateY(-20px) rotate(10deg);} 66%{transform:translateY(10px) rotate(-5deg);} }
 
    /* ── Главная кнопка: коричневый фон, белый текст ── */
    .btn-primary { background: #42221a; color:#ffffff; border: none; border-radius:50px; padding:14px 36px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 20px rgba(66,34,26,0.18); text-decoration:none; display:inline-block; }
    .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(66,34,26,0.28); background: #5c3028; }
 
    /* ── Вторичная кнопка: белый, коричневый бордер (как "Записаться" на референсе) ── */
    .btn-gold { background: #ffffff; color:#42221a; border: 1.5px solid #42221a; border-radius:50px; padding:13px 36px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:all 0.3s ease; text-decoration:none; display:inline-block; }
    .btn-gold:hover { transform:translateY(-2px); background:#f5ede8; box-shadow: 0 16px 16px rgba(66,34,26,0.1); }
 
    /* ── Заголовки секций ── */
    .section-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:900; color:#42221a; line-height:1.1; }
    .section-title span { color: #42221a; opacity:0.7; }
    .title-line { width:50px; height:2px; background:#42221a; opacity:0.2; border-radius:2px; margin:16px 0 24px; }
 
    /* ── Карточки: белые, тонкий бежевый бордер ── */
    /* .product-card { background:#ffffff; border-radius:20px; overflow:hidden; box-shadow:0 2px 20px rgba(66,34,26,0.06); transition:all 0.4s cubic-bezier(0.23,1,0.32,1); border:1px solid #ebdfd5; }
    .product-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(66,34,26,0.1); } */
    /* ── Карточки: белые, тонкий бежевый бордер ── */
    .product-card { 
        background:#ffffff; 
        border-radius:20px; 
        overflow:hidden; 
        box-shadow:0 2px 20px rgba(66, 34, 26, 0.116); 
        transition:all 0.4s cubic-bezier(0.23,1,0.32,1); 
        border:1px solid #ebdfd5; 
        
        /* ДОБАВЛЕНО: Делаем карточку колонкой на всю высоту сетки */
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .product-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(66,34,26,0.5); }

    /* ДОБАВЛЕНО: Растягиваем нижнюю часть карточки (блок с классом p-5) */
    .product-card > div:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex-grow: 1; /* Забирает всё свободное место */
    }

    /* ДОБАВЛЕНО: Отталкиваем блок с кнопками "В корзину" и "+" / "-" в самый низ */
    .product-card > div:nth-child(2) > .flex.items-center.justify-between {
        margin-top: auto; 
    }
    /* ── Превью товара: тёплый бежевый ── */
    .product-img-wrap { 
        position:relative;
        width:100%;
        aspect-ratio: 1 / 1;
        overflow: hidden; 
        background:#ffffff; 
        display:flex; 
        align-items:center; 
        justify-content:center;
        cursor: zoom-in;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px; 
    }
    .product-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease-in-out; 
    }
    .product-img-wrap:hover img {
        transform: scale(1.1); 
    }
    /* Стили для затемняющего фона модального окна */
    .modal-overlay {
      display: none; /* Изначально скрыто */
      position: fixed; /* Фиксировано поверх всего */
      z-index: 9999; /* Очень высокий приоритет слоя */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto; /* Позволяет скроллить, если картинка не влезает */
      background-color: rgba(0, 0, 0, 0.85); /* Полупрозрачный черный фон */
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    /* Стили для самой большой картинки внутри окна */
    .modal-overlay img {
      display: block;
      margin: auto;
      max-width: 90%;  /* Не больше 90% ширины экрана */
      max-height: 90%; /* Не больше 90% высоты экрана */
      box-shadow: 0 5px 30px rgba(0,0,0,0.5);
      transition: transform 0.2s; /* Для плавного появления (можно добавить) */
    }

    /* Снопка закрытия (крестик) */
    .modal-close {
      position: absolute;
      top: 20px;
      right: 35px;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.2s;
    }

    .modal-close:hover {
      color: #FFE4D6; /* Светло-бежевый при наведении */
    }
    .icon-wrapper {
      height: 80px; /* Высота зоны иконок */
      display: flex;
      align-items: center; /* Центруем иконку по вертикали */
      justify-content: flex-start; /* Прижимаем к левому краю (как в макете) */
      margin-bottom: 1rem;
    }
    .icon-wrapper img, .icon-wrapper span {
      max-height: 100%; /* Картинка не вылезет за пределы 80px */
      width: auto;
      display: block;
    }

    /* ── Бейдж остатка: белый/коричневый ── */
    .badge-stock { position:absolute; top:12px; right:12px; background:#ffffff; color:#42221a; border:1px solid #ebdfd5; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600; }
    .badge-stock.low { background:#ebdfd5; color:#42221a; border-color:#42221a; }
    .product-mark-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 5;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    }

    .badge-hit {
      background: #c64233;
      color: #fff;
    }

    .badge-new {
      background: #2a6e46;
      color: #fff;
    }

    .badge-popular {
      background: #d5c290;
      color: #fff;
    }
    /* ── Счётчик количества ── */
    .qty-control { display:flex; align-items:center; border:1.5px solid #ebdfd5; border-radius:50px; overflow:hidden; background:#ffffff; }
    .qty-btn { width:36px; height:36px; background:#ffffff; border:none; cursor:pointer; font-size:18px; font-weight:600; color:#42221a; transition:background 0.2s; display:flex; align-items:center; justify-content:center; }
    .qty-btn:hover { background:#f5ede8; }
    .qty-num { width:40px; text-align:center; font-weight:700; font-size:15px; color:#42221a; }
 
    /* ── В корзину ── */
    .add-cart-btn { background:#ebdfd5; color:#42221a; border:none; border-radius:50px; padding:10px 18px; font-weight:600; font-size:13px; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:6px; white-space:nowrap; font-family:'DM Sans',sans-serif; letter-spacing:0.03em; }
    .add-cart-btn:hover { background:#fff; box-shadow:0 6px 20px rgba(66,34,26,0.22); transform:scale(1.03); }
 
    /* ── Заказать ── */
    .order-btn { width:100%; background: #ebdfd5; color: #42221a; border:none; border-radius:50px; padding:12px; font-weight:700; font-size:14px; cursor:pointer; transition:all 0.3s; letter-spacing:0.05em; text-transform:uppercase; font-family:'DM Sans',sans-serif; }
    .order-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(66,34,26,0.22); background:#ffffff; }
 
    /* ── Feature карточки: бежевый фон, коричневый текст ── */
    .feature-card { background:#f5ede8; border-radius:20px; padding:32px 24px; color:#42221a; position:relative; overflow:hidden; transition:transform 0.3s; border:1px solid #ebdfd5; }
    .feature-card::before { content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; background:rgba(66,34,26,0.04); }
    .feature-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(66,34,26,0.08); }
 
    /* ── Оверлей корзины ── */
    .cart-overlay { position:fixed; inset:0; background:rgba(66,34,26,0.25); z-index:1000; opacity:0; pointer-events:none; transition:opacity 0.3s; }
    .cart-overlay.open { opacity:1; pointer-events:all; }
    .cart-drawer { position:fixed; top:0; right:0; width:min(420px,100vw); height:100vh; background:#ffffff; z-index:1001; transform:translateX(100%); transition:transform 0.4s cubic-bezier(0.23,1,0.32,1); display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(66,34,26,0.1); border-left:1px solid #ebdfd5; }
    .cart-drawer.open { transform:translateX(0); }
 
    /* ── Модалка ── */
    .modal-overlay { position:fixed; inset:0; background:rgba(66,34,26,0.3); z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity 0.3s; }
    .modal-overlay.open { opacity:1; pointer-events:all; }
    .modal-box { background:#ffffff; border-radius:24px; padding:36px 32px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; transform:scale(0.9); transition:transform 0.3s; position:relative; border:1px solid #ebdfd5; }
    .modal-overlay.open .modal-box { transform:scale(1); }
 
    /* ── Инпуты ── */
    .form-input { width:100%; border:1.5px solid #ebdfd5; border-radius:12px; padding:12px 16px; font-family:'DM Sans',sans-serif; font-size:15px; color:#42221a; background:#ffffff; outline:none; transition:border-color 0.25s; }
    .form-input:focus { border-color:#42221a; }
    .form-input::placeholder { color:#b8a89e; }
 
    .page { display:none; }
    .page.active { display:block; }
 
    /* ── Отзывы / контакты ── */
    .testimonial-card { background:#ffffff; border-radius:20px; padding:28px; box-shadow:0 2px 16px rgba(66,34,26,0.05); border-left:3px solid #42221a; }
    .contact-card { background:#ffffff; border-radius:20px; padding:28px; box-shadow:0 2px 16px rgba(66,34,26,0.05); border-top:3px solid #42221a; }
 
    /* ── Бейдж корзины ── */
    .cart-badge { position:absolute; top:-6px; right:-6px; background:#42221a; color:#ffffff; border-radius:50%; width:20px; height:20px; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
 
    .price-tag { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:900; color:#42221a; }
    .stars { color:#a07860; letter-spacing:2px; }
 
    .reveal { opacity:0; transform:translateY(30px); transition:all 0.6s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
 
    /* ── Мобильное меню: белое ── */
    .mobile-menu { max-height:0; overflow:hidden; transition:max-height 0.4s ease; background:#ffffff; border-top:1px solid #ebdfd5; }
    .mobile-menu.open { max-height:400px; }
 
    .success-anim { animation:pop-in 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }
    @keyframes pop-in { 0%{transform:scale(0);} 100%{transform:scale(1);} }
 
    /* ── Фильтр-кнопки ── */
    .filter-btn { background:#ffffff; color:#42221a; border:1.5px solid #ebdfd5; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.2s; }
    .filter-btn:hover { border-color:#42221a; background:#f5ede8; }
    .filter-btn.active { background:#42221a; color:#ffffff; border-color:#42221a; }
 
    .timeline-dot { width:14px; height:14px; border-radius:50%; background:#42221a; border:3px solid #ebdfd5; flex-shrink:0; margin-top:4px; }
 
    @keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
    .pulse-dot { animation:pulse-dot 2s infinite; background:#42221a; }
 
    /* ── Скроллбар ── */
    ::-webkit-scrollbar { width:5px; }
    ::-webkit-scrollbar-track { background:#ffffff; }
    ::-webkit-scrollbar-thumb { background:#ebdfd5; border-radius:3px; }