/* Подключение современного шрифта */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
/* ========== Тонкие скруглённые шрифты ========== */

/* 1) Quicksand (скруглённый, лёгкий) */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700&display=swap'); 

        

.logo {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 500;
  font-size: 60px;
}



/* Общие стили */
body {
    font-family: 'Nunito Sans', sans-serif;
    padding-top: 200px;
}

.logo-link {
    text-decoration: none;
}

.logo-link:hover, .logo-link:focus {
    text-decoration: none;
}
.header {
  background-color: rgb(252, 252, 252) !important;
}


.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  background: #fff; /* чтобы перекрывала */
}

.header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgb(14, 12, 12);
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 50px;
    filter: brightness(0.2);
    height: auto;
    margin-right: 12px;
}

.logo {
    font-size: 60px;
    display: contents;
    font-weight: 700;
    color: rgb(44, 49, 46) !important;
}

/* Навигация */
.navigation {
    display: flex;
    gap: 30px;
}

.navigation__link {
    text-decoration: none;
    color: rgb(123, 26, 26) !important;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.3s;
}

.navigation__link:hover {
    color: #ce3f3f !important;
}

.separator {
    width: 1px;
    background-color: #2c1b1b;
    height: 100%;
    margin: 1 16px;
}

/* Кнопка "Зателефонувати" */
.button--primary {
    background: white !important;
    color: #C64138!important;
    border: 1.5px solid rgb(232, 225, 225) !important;
    border-radius: 30px;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.button--primary:hover {
    background: #f0f0f0 !important;
    color: #C64138 !important;
}

/* Стилі для блоку дій у хедері */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Стилі для кошика в хедері */
.header-cart {
    position: relative;
}

.cart-link {
    display: flex;
    align-items: center;
    color: #333;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    position: relative;
    padding: 8px 12px;
}

.cart-link:hover {
    color: #d32f2f; /* Колір при наведенні */
}

.cart-count {
    background: #d32f2f;
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    TEXT-ALIGN: CENTER;
    align-content: center;
    justify-content: center;
    font-size: 10px;
    position: absolute;
    top: -7px;
    right: -7px;
}

/* Випадаюче меню кошика */
.cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    color: #333;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 15px;
    z-index: 1000;
    display: none;
}

.cart-icon-wrapper:hover .cart-dropdown {
    display: block;
}

.cart-dropdown-header h4 {
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 1.2rem;
    color: #333;
}

.cart-dropdown-items {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.cart-dropdown-item {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: center;
}

.cart-dropdown-item:last-child {
    border-bottom: none;
}

.cart-dropdown-item-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 3px;
}

.cart-dropdown-item-info {
    flex: 1;
}

.cart-dropdown-item-name {
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.cart-dropdown-item-price {
    color: #666;
    font-size: 0.8rem;
}

.cart-dropdown-item-quantity {
    color: #666;
    font-size: 0.8rem;
}

.cart-dropdown-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1rem;
}

.empty-cart-message {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 0.9rem;
}
/* Каталог-меню под шапкой */
.header-catalog-dropdown {
    display: none;
    position: absolute;
    top: 75px;
    left: 16px;      /* <-- ОТСТУП СЛЕВА */
    min-width: 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(44, 20, 20, 0.12);
    z-index: 1200;
    animation: dropdownAppear 0.28s cubic-bezier(.6,1.7,.38,.92);
}

@keyframes dropdownAppear {
    from { opacity: 0; transform: translateY(-13px);}
    to   { opacity: 1; transform: translateY(0);}
}
.catalog-sidebar {
    background: #fff;
    border: 1px solid #ececec;
    padding: 24px 18px;
    width: 100%;
    max-width: 280px;
    min-width: 220px;
}

.catalog-sidebar h3 {
    font-size: 18px;
    margin-bottom: 14px;
    color: #C64138;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.catalog-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.catalog-sidebar .category {
    font-size: 16px;
    font-weight: 500;
    color: #232323;
    padding: 7px 0;
    cursor: pointer;
    line-height: 1.35;
    user-select: none;
    transition: color 0.17s;
    /* НЕ flex! */
    display: block;
    position: relative;
}
.catalog-sidebar .toggle-symbol {
    margin-left: 6px;
    color: #C64138;
    font-size: 14px;
    vertical-align: middle;
    transition: transform 0.2s;
    display: inline-block;
}

.catalog-sidebar .category:not(:last-child) {
    border-bottom: 1px solid #f2f2f2;
}

.catalog-sidebar .category:hover,
.catalog-sidebar .category > a:hover {
    color: #C64138;
    background: none;
}


/* Поворот стрелки при открытии */
.catalog-sidebar .category.open > .toggle-symbol,
.catalog-sidebar .category.open .toggle-symbol {
    transform: rotate(90deg);
}

/* Скрытие/раскрытие подкатегорий */
.catalog-sidebar .subcategory-list {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s cubic-bezier(0.4,0.1,0.2,1), opacity 0.18s;
    margin-top: 2px;
    padding-left: 16px;
    border-left: 2px solid #f1f1f1;
}

.catalog-sidebar .subcategory-list.open {
    max-height: 500px; /* Подбери по количеству пунктов */
    opacity: 1;
    transition: max-height 0.32s cubic-bezier(0.4,0.1,0.2,1), opacity 0.17s;
}

.catalog-sidebar .subcategory-list li {
    font-size: 14px;
    padding: 4px 0;
}

.catalog-sidebar .subcategory-list a {
    color: #5a5a5a !important;
    text-decoration: none;
    transition: color 0.16s;
    cursor: pointer;
    display: inline-block;
    padding-left: 2px;
}

.catalog-sidebar .subcategory-list a:hover {
    color: #C64138 !important;
}

.catalog-sidebar .category > a {
    color: inherit !important;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    flex: 1 1 auto;
}

.catalog-sidebar .category > a:hover {
    color: #C64138 !important;
}

.checkboxtoggler {
    position: fixed;
    top: 22px; /* подбери нужную высоту по своему header */
    width: 2.3em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    cursor: pointer;
    margin-left: 20px;
    background: none;
    border: none;
}
.line-1, .line-2, .line-3 {
    background: #df6447;
    height: 0.29em;
    border-radius: 10em;
    width: 2.1em;
    transition-duration: 500ms;
}

/* Анімація для оновлення лічильника */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.cart-count.update {
    animation: pulse 0.5s ease;
}
.phone-btn i{
  font-size: 16px;
  margin-right: 8px;
}

/* По умолчанию (десктоп) */
:root{ --header-height: var(--header-height-desktop); }
.header{ height: var(--header-height); }
body{ padding-top: var(--header-height); }

/* ===== МОБИЛЬНЫЕ СТИЛИ ===== */
@media (max-width: 768px){

  .phone-btn{
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ececec !important;

    /* прячем текст, не трогая иконку */
    font-size: 0;
  }
  .phone-btn i{
    margin: 0;
    font-size: 18px;
    line-height: 1;
    color: #C64138 !important;
  }
  .phone-btn .btn-text{
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0; /* доступно для скринридеров */
  }
  
  /* 1) Фиксируем корректный отступ под фикс-хедер */
  :root{ --header-height: var(--header-height-mobile); }
  .header{ height: var(--header-height-mobile); }
  body{ padding-top: var(--header-height-mobile); }

  /* 2) Компоновка хедера в одну полосу: [бургер] [лого (по центру)] [действия справа] */
  .header__content{
    padding: 8px 12px;
    gap: 0;
    position: relative;
    min-height: var(--header-height-mobile);
  }

  /* Бургер отдельно от лого — слева, не “влипает” */
  .checkboxtoggler{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 28px;
    gap: 5px;
    z-index: 2;
  }
  .line-1, .line-2, .line-3{
    height: 3px;
    width: 100%;
  }

  /* Лого по центру, не display: contents (ломает выравнивание) */
  .logo-container{
    margin-left: 40px;
    pointer-events: auto;
  }
  .logo{
    display: inline-block;
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
        margin-bottom: 1px;
  }
  .logo-img{
    width: 34px;
    margin-right: 8px;
    filter: brightness(0.2);
  }

  /* Блок действий справа: корзина + телефон */
  .header-actions{
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    gap: 12px;
  }

  /* Телефон — круглая иконка вместо текста */
  .button--primary{
    border-radius: 999px;
    padding: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ececec !important;
    font-size: 0; /* прячем текст, если он есть */
  }
  /* Если используете <i class="fa fa-phone"> — масштабируем иконку */
  .button--primary i,
  .phone-icon{
    font-size: 18px;
    line-height: 1;
    color: #C64138 !important;
  }

  /* Корзина компактнее */
  .cart-link{
    padding: 6px 8px;
    font-size: 20px;
  }
  .cart-count{
    width: 18px; height: 18px; font-size: 9px;
    top: -6px; right: -6px;
  }

  /* 3) Прячем лишнюю навигацию на мобиле */
  .navigation,
  .separator{
    display: none !important;
  }

  /* 4) Дропдаун корзины — во всю ширину экрана, удобный клик */
  .cart-dropdown{
    right: -12px;
    left: -12px;
    width: auto;
    max-height: 60vh;
    border-radius: 10px;
    padding: 12px;
  }

  /* 5) Каталог под шапкой — адаптивный */
  .header-catalog-dropdown{
    left: 0;
    right: 0;
    top: var(--header-height-mobile);
    width: 100%;
    min-width: 0;
    border-radius: 12px;
  }
  .catalog-sidebar{
    max-width: none;
    width: 100%;
    border: none;
    padding: 14px 12px;
  }
  .catalog-sidebar h3{
    font-size: 16px;
    margin-bottom: 10px;
  }
  .catalog-sidebar .category{
    font-size: 15px;
    padding: 8px 0;
  }
  .catalog-sidebar .subcategory-list{
    padding-left: 12px;
    border-left: 2px solid #f5f5f5;
  }

  /* 6) Общая типографика компактнее */
  body{
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
  }
  
  /* Иконка корзины в хедере */
  .header-cart{ position: relative; }

  .cart-link{
    padding: 6px 8px;           /* компактнее */
    font-size: 20px;            /* читаемая иконка */
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .cart-count{
    width: 18px; height: 18px;
    font-size: 10px;
    top: -6px; right: -6px;
    display: grid; place-items: center;  /* выравнивание цифры */
  }

  /* чтобы абсолютное позиционирование не сжимало попап внутри иконки */
  .header-cart{ position: static; }

  /* дропдаун во всю ширину экрана */
  .cart-dropdown{
        position: fixed;
    top: var(--header-height-mobile);   /* или 64px */                       /* ← чем больше число, тем левее окно */
    left: auto;
    width: 320px;                       /* любая удобная ширина */
    max-width: calc(100vw - 24px);      /* чтобы не вылезало за экран */
    margin-top: 8px;
    z-index: 1200;
    width: 300px !important;
    max-width: none;
    max-height: 60vh;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    padding: 12px;
    z-index: 1200;
    display: none;  /* открываем классом .is-open */
    overflow: hidden;
  }

  /* убираем hover-открытие на мобиле, открываем классом */
  .cart-icon-wrapper:hover .cart-dropdown{ display: none; }
  .cart-icon-wrapper.is-open .cart-dropdown{ display: block; }
}

  /* Шапка мини-корзины */
  .cart-dropdown-header h4{
    margin: 0 0 8px;
    padding-bottom: 8px;
    font-size: 16px;
  }

  /* Список товаров: карточная сетка под палец */
  .cart-dropdown-items{
    max-height: 44vh;
    margin: 0 -4px 10px;
    padding: 0 4px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cart-dropdown-item{
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
  }
  .cart-dropdown-item-image{
    width: 56px; height: 56px; border-radius: 8px; object-fit: cover;
  }
  .cart-dropdown-item-name{
    font-size: 14px; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cart-dropdown-item-price,
  .cart-dropdown-item-quantity{ font-size: 12px; color: #666; }

  /* Нижняя часть: итоги + кнопки */
  .cart-dropdown-footer{
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 12px);
  }
  .cart-total{
    font-size: 15px; margin-bottom: 10px;
  }

  /* Кнопки действий крупнее и удобнее для тача */
  .cart-actions{
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .btn-outline, .btn-primary{
    height: 42px; border-radius: 12px; font-size: 14px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Сообщение "пусто" */
  .empty-cart-message{
    padding: 16px 8px; font-size: 14px;
  }
  
    .catalog-sidebar{
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* шрифт уже задан у тебя, не трогаю */
  }

  .catalog-sidebar h3{
    /* было 18px */
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.25;
    letter-spacing: 0.4px; /* капсам комфортнее на мобиле */
  }

  .catalog-sidebar .category{
    /* было 16px */
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.4; /* палец попадает легче, читабельнее */
    /* font-weight оставляю 500 как у тебя */
  }

  .catalog-sidebar .toggle-symbol{
    /* было 14px */
    font-size: clamp(13px, 3.6vw, 15px);
  }

  .catalog-sidebar .subcategory-list li{
    /* было 14px */
    font-size: clamp(13px, 3.7vw, 16px);
    line-height: 1.35;
  }

  .catalog-sidebar .subcategory-list a{
    /* сам текст ссылок внутри подкатегорий */
    font-size: inherit;       /* берёт из li */
    line-height: inherit;
  }

}

/* Мелкая “страховка”, если где-то переопределяется: */
.header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: #fff;
}