:root{
    --primary: #4f46e5;
    --primary-600: #4338ca;
    --muted: #94a3b8;
    --text: #1e293b;
    --bg: #ffffff;
    --card-radius: 16px;
    --gap-sm: 12px;
    --gap-md: 24px;
}

/* ==========================================================================
   СТОРІНКА КАТЕГОРІЇ - PRODUCT GRID & CARDS
   ========================================================================== */

/* Layout wrapper - used instead of inline paddings */
.category-wrapper{
    padding-top: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.breadcrumb-nav{ margin-bottom: 22px; font-size: 14px; color: #64748b; }
.breadcrumb-nav .sep{ margin: 0 8px; opacity: 0.5; }
.breadcrumb-nav .current{ color: var(--text); font-weight: 600; }
.breadcrumb-nav .breadcrumb-link{ text-decoration: none; color: inherit; }

.category-header{ margin-bottom: 30px; border-bottom: 1px solid #e2e8f0; padding-bottom: 20px; }
.category-header-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; }
.category-title-wrap{ display:flex; align-items:baseline; gap:12px; }
.category-title{ margin:0; font-size:28px; font-weight:800; color:var(--text); }
.cat-count{ background:#f1f5f9; color:#6366f1; padding:4px 10px; border-radius:12px; font-size:13px; font-weight:700; }

.sort-controls{ display:flex; align-items:center; gap:8px; }
.sort-controls label{ font-size:13px; color:#64748b; }
.sort-controls select{ padding:6px 10px; border:1px solid #cbd5e1; border-radius:6px; color:#334155; font-size:14px; outline:none; cursor:pointer; }

.subcategories-list{ display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }
.subcategory-pill{ background:#fff; border:1px solid #e2e8f0; padding:6px 16px; border-radius:20px; text-decoration:none; color:#475569; font-size:13px; font-weight:500; transition:all 0.2s; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.subcategory-pill:hover{ border-color:var(--primary); color:var(--primary); }

.category-special-note {
    margin-top: 15px;
    padding: 15px;
    /* Ультра-ніжний фоновий колір (майже білий зефір) */
    background: #fffafa; 
    /* Тонка пастельна лінія кольору пудри */
    border-left: 3px solid #f9dce2; 
    /* М'який колір тексту (сіро-коричневий з рожевим підтоном) */
    color: #7a656a; 
    font-size: 14px;
    border-radius: 0 8px 8px 0;
    line-height: 1.6;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); /* Додає візуальної м'якості */
}
/* Корекція для мобільних телефонів (екрани до 768px) */
@media (max-width: 768px) {
    .category-special-note {
        margin-top: 10px;    /* Зменшуємо верхній відступ */
        padding: 12px;       /* Трохи компактніші внутрішні відступи */
        font-size: 13px;     /* Трохи менший шрифт для економії місця */
        line-height: 1.4;    /* Компактніший міжрядковий інтервал */
    }

    .category-special-note section h1 {
        font-size: 1.3rem !important; /* Зменшуємо заголовок, щоб не займав багато рядків */
        margin-bottom: 8px;
    }

    .category-special-note h3 {
        font-size: 1.1rem;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .category-special-note ul {
        padding-left: 20px;  /* Щоб маркери списку не вилітали за межі */
        display: block;      /* На мобільних список краще розгорнути на всю ширину */
    }
}


.product-grid {
    display: grid;
    /* Жорстко 2 колонки */
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px; /* Трохи зменшив gap для безпеки на вузьких екранах */
    width: 100%;
    margin-bottom: 40px;
}

.product-card {
    background: #ffffff; /* Чистий білий */
    border-radius: 16px;
    border: none; /* ПРИБРАНО: жодних сірих рамок */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    position: relative;
    box-shadow: none; /* ПРИБРАНО: жодних тіней навколо */
}

.product-card:hover { 
    transform: translateY(-5px); /* Тільки легкий підйом вгору */
    box-shadow: none !important; /* Гарантуємо відсутність тіні при наведенні */
}

.out-of-stock-card { 
    opacity: 0.7; 
    filter: grayscale(0.5); 
}

/* Оновлений контейнер для фото: суворо квадратний та білий */
.product-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Квадрат під фото 1200х1200 */
    padding: 10px;       /* Невеликий відступ, щоб фото "дихало" */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff !important; /* ТІЛЬКИ БІЛИЙ ФОН */
    overflow: hidden;
}

/* Стилі для зображення: не обрізати, центрувати */
.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* ВАЖЛИВО: показує все фото цілком, не обрізаючи краї */
    object-position: center;
    transition: transform 0.4s ease;
    background-color: #ffffff; /* Страховка, щоб саме фото теж було на білому */
}

/* При наведенні легке збільшення */
.product-card:hover .product-img-wrapper img {
    transform: scale(1.05); /* Зменшив масштаб, щоб при збільшенні не вилазило за межі */
}

.product-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title-link { 
    text-decoration: none; 
    color: inherit; 
}

.product-content h3 {
    font-size: clamp(14px, 4vw, 16px); /* Адаптивний шрифт */
    line-height: 1.5;
    margin: 0 0 8px 0;
    font-weight: 600;
    
    /* Обрізання тексту, щоб картки були рівні */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3em; /* Фіксована висота для вирівнювання */
}

.meta-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:5px; }
.meta-row .vendor{ color:var(--muted); }
.stock-indicator.in{ color:#10b981; font-weight:600; }
.stock-indicator.out{ color:#ef4444; font-weight:600; }

.empty-state{ grid-column:1/-1; text-align:center; padding:60px 20px; color:#64748b; }
.empty-state-title{ font-size:18px; margin-bottom:20px; }
.btn-view-all{ display:inline-block; padding:10px 24px; background:#fff; border:1px solid #cbd5e1; color:#334155; text-decoration:none; border-radius:30px; font-weight:600; transition:all 0.2s; }

/* subtle feedback when hitting stock limit */
.btn-limit{ animation: btn-pulse 0.35s ease; }
@keyframes btn-pulse{ 0%{ transform:scale(1); }50%{ transform:scale(0.98); }100%{ transform:scale(1); } }


.card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.price-box { 
    display: flex; 
    flex-direction: row; /* Змінюємо column на row, щоб було в один рядок */
    align-items: baseline; /* Вирівнюємо по нижньому краю тексту */
    gap: 4px; /* Невеликий відступ між числом і значком */
}

.price-val {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 800;
    color: var(--primary);
}

.currency-val { 
    font-size: 12px; 
    color: var(--text-muted); 
    font-weight: 600; 
}

/* Гарантуємо видимість іконки в категоріях */
.btn-add-cart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px; /* Фіксований розмір для круглої/квадратної кнопки */
    height: 42px;
    cursor: pointer;
    background: #4f46e5; /* Фіолетовий колір */
    color: white !important;
    border: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-add-cart:hover {
    background: #4338ca;
    transform: translateY(-2px);
}

.btn-add-cart svg {
    display: block !important;
    width: 20px;
    height: 20px;
    stroke: #ffffff; /* Білий колір іконки */
    fill: none;
}


/* ==========================================================================
   КАТЕГОРІЇ - СПИСОК КАТЕГОРІЙ
   ========================================================================== */

.category-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 40px 30px; 
    box-sizing: border-box;
}

.main-cat { 
    display: flex; 
    align-items: center; 
    background: white; 
    padding: 24px; 
    border-radius: 20px; 
    text-decoration: none; 
    color: #1e293b; 
    border: 1px solid #e2e8f0; 
    transition: all 0.3s ease; 
    box-sizing: border-box;
}

.main-cat:hover { 
    border-color: #4f46e5; 
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(79, 70, 229, 0.1); 
}

.cat-info h3 { 
    font-size: 19px; 
    font-weight: 800; 
    margin: 0; 
    line-height: 1.2; 
}

.view-all { 
    font-size: 13px; 
    font-weight: 700; 
    color: #4f46e5; 
    margin-top: 4px; 
    display: block; 
}

.subcategories-box { 
    padding-left: 24px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    border-left: 2px solid #f1f5f9; 
    margin-top: -5px; 
}

.is-subcat { 
    padding: 14px 18px; 
    border-radius: 14px; 
    background: #f8fafc; 
    border: 1px solid transparent; 
    text-decoration: none; 
    display: flex; 
    align-items: center;
    transition: 0.2s;
    box-sizing: border-box;
}

.is-subcat:hover { 
    background: #fff; 
    border-color: #cbd5e1; 
    padding-left: 22px; 
}

.cat-icon-sub { 
    margin-right: 12px; 
    color: #94a3b8; 
}

.is-subcat h3 { 
    font-size: 15px; 
    font-weight: 600; 
    color: #475569; 
    margin: 0; 
}

/* ==========================================================================
   MOBILE ADAPTIVE (Category)
   ========================================================================== */

@media (min-width: 768px) {
    .product-grid {
        /* Автоматичне заповнення: мінімум 220px на картку */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 24px;
    }
    
    .product-content { padding: 16px; }
    
    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--card-shadow);
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 0; /* Прибираємо зайві падінги, щоб не звужувати картки */
    }
    
    /* На мобільних вимикаємо hover-ефект, щоб не було дивної поведінки при натисканні */
    .product-card:hover { transform: none; }

    .product-content { padding: 12px; }
    .product-content h3 { font-size: 14px; }
    .price-val { font-size: 16px; }
    
    .btn-add-cart {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
    
    .category-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .main-cat { padding: 16px; border-radius: 15px; }
    .cat-info h3 { font-size: 17px; }
    .is-subcat { padding: 12px 15px; border-radius: 12px; }
    .is-subcat h3 { font-size: 14px; }
}
@media (max-width: 360px) {
    .product-grid {
        gap: 8px; /* Ще менший відступ */
    }
    .product-content h3 {
        font-size: 13px; /* Трохи менший шрифт, щоб назва влізла */
    }
}

.category-description {
    white-space: pre-line !important; /* Це критично важливо для обробки \n */
    text-align: left;
    line-height: 1.5;
    padding: 15px;
    font-style: italic; /* Можна додати курсив, щоб підкреслити особистий характер тексту */
}