/* ============================================
   CATEGORY CARDS - ГИБКОЕ ПОЗИЦИОНИРОВАНИЕ С ПОЛНЫМ КОНТРОЛЕМ
   Адаптирован под существующую HTML структуру
   Использует CSS переменные для настройки всех параметров
   ============================================ */

/* ============================================
   НАСТРОЙКИ - ВСЕ ПАРАМЕТРЫ ЗДЕСЬ
   Меняйте эти значения для настройки карточек
   ============================================ */
:root {
    /* === СЕТКА КАТЕГОРИЙ === */
    --categories-grid-gap: 28px;
    /* Расстояние между карточками */
    --categories-grid-min-width: 210px;
    /* Минимальная ширина карточки */

    /* === КАРТОЧКА КАТЕГОРИИ === */
    --category-card-width: 100%;
    /* Ширина карточки */
    --category-card-height: 328px;
    /* Высота карточки */
    --category-card-bg: #FFFFFF;
    /* Цвет фона карточки */
    --category-card-border-radius: 10px;
    /* Скругление углов карточки */
    --category-card-shadow: 0px 4px 4px rgba(0, 0, 0, 0.09);
    /* Тень карточки */
    --category-card-shadow-hover: 0px 6px 8px rgba(0, 0, 0, 0.12);
    /* Тень при наведении */
    --category-card-transform-hover: translateY(-2px);
    /* Трансформация при наведении */

    /* === ЗАГОЛОВОК КАТЕГОРИИ === */
    --category-title-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Шрифт */
    --category-title-font-size: 18px;
    /* Размер шрифта */
    --category-title-font-weight: 500;
    /* Толщина шрифта */
    --category-title-line-height: 120%;
    /* Высота строки */
    --category-title-color: #231F20;
    /* Цвет текста */
    --category-title-left: 15px;
    /* Отступ слева */
    --category-title-top: 20px;
    /* Отступ сверху */
    --category-title-max-width: 198px;
    /* Максимальная ширина */

    /* === ОБЛАСТЬ ИЗОБРАЖЕНИЯ === */
    --category-image-wrapper-width: 210px;
    /* Ширина области изображения */
    --category-image-wrapper-height: 246px;
    /* Высота области изображения */
    --category-image-wrapper-right: 0px;
    /* Отступ справа (позиционирование от правого края) */
    --category-image-wrapper-bottom: 0px;
    /* Отступ снизу (позиционирование от нижнего края) */
    --category-image-wrapper-border-radius: 8px;
    /* Скругление углов */
    --category-image-wrapper-bg: #f8f8f8;
    /* Цвет фона */

    /* === КНОПКА КАТЕГОРИИ === */
    --category-btn-width: 85px;
    /* Ширина кнопки */
    --category-btn-height: 32px;
    /* Высота кнопки */
    --category-btn-bg:#F4F4F4;
    ;
    /* Цвет фона */
    --category-btn-bg-hover:#EE2722;
    ;
    /* Цвет фона при наведении */
    --category-btn-border-radius: 32px;
    /* Скругление углов */
    --category-btn-shadow: 0px 4px 7px rgba(0, 0, 0, 0.11);
    /* Тень */
    --category-btn-left: 15px;
    /* Отступ слева */
    --category-btn-top: 278px;
    /* Отступ сверху */
    --category-btn-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Шрифт */
    --category-btn-font-size: 14px;
    /* Размер шрифта */
    --category-btn-font-weight: 400;
    /* Толщина шрифта */
    --category-btn-color:#231F20;
    ;
    /* Цвет текста */
    --category-btn-color-hover: #FFFFFF;
    /* Цвет текста при наведении */

    /* === СТРЕЛКА КНОПКИ === */
    --category-btn-arrow-width: 16px;
    /* Ширина стрелки */
    --category-btn-arrow-height: 16px;
    /* Высота стрелки */
    --category-btn-arrow-left: 95px;
    /* Отступ слева */
    --category-btn-arrow-top: 8px;
    /* Отступ сверху */
    --category-btn-arrow-opacity: 0.7;
    /* Прозрачность */

    /* === ЗАГОЛОВОК СЕКЦИИ === */
    --categories-title-font-size: 28px;
    /* Размер шрифта */
    --categories-title-font-weight: 500;
    /* Толщина шрифта */
    --categories-title-color: #231F20;
    /* Цвет текста */
    --categories-title-margin-bottom: 30px;
    /* Отступ снизу */

    /* === ПЕРЕХОДЫ === */
    --category-card-transition: 0.2s ease;
    /* Скорость переходов */
}

/* ============================================
   КОНТЕЙНЕРЫ
   ============================================ */
.PRODUCT_CATEGORIES {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.drag-block.container.PRODUCT_CATEGORIES,
.drag-block.container.grey.PRODUCT_CATEGORIES,
.drag-block.container.grey.PRODUCT_CATEGORIES.grey_block {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Убираем margin-left на главной странице - переопределяем стили из catalog-page.css */
.front .PRODUCT_CATEGORIES,
.front .drag-block.container.PRODUCT_CATEGORIES,
.front .drag-block.container.grey.PRODUCT_CATEGORIES,
.front .drag-block.container.grey.PRODUCT_CATEGORIES.grey_block,
.front .PRODUCT_CATEGORIES.drag-block.container,
.front .PRODUCT_CATEGORIES.drag-block.container.grey,
.front .PRODUCT_CATEGORIES.drag-block.container.grey.grey_block {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.PRODUCT_CATEGORIES .maxwidth-theme,
.drag-block.container.PRODUCT_CATEGORIES .maxwidth-theme,
.drag-block.container.grey.PRODUCT_CATEGORIES .maxwidth-theme,
.drag-block.container.grey.PRODUCT_CATEGORIES.grey_block .maxwidth-theme {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.product-categories-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================
   ЗАГОЛОВОК СЕКЦИИ
   ============================================ */
.categories-title {
    font-size: var(--categories-title-font-size) !important;
    font-weight: var(--categories-title-font-weight) !important;
    margin-bottom: var(--categories-title-margin-bottom) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: var(--categories-title-color) !important;
}

/* ============================================
   СЕТКА КАТЕГОРИЙ
   ============================================ */
.categories-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(var(--categories-grid-min-width), 1fr)) !important;
    gap: var(--categories-grid-gap) !important;
    row-gap: var(--categories-grid-gap) !important;
    column-gap: var(--categories-grid-gap) !important;
    margin-bottom: 30px !important;
    justify-items: start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* ============================================
   ССЫЛКА КАТЕГОРИИ
   ============================================ */
.category-card-link {
    text-decoration: none !important;
    display: contents !important;
    color: inherit !important;
}

/* На десктопе ссылка карточки не работает, работает только кнопка */
@media (min-width: 769px) {
    .category-card-link {
        pointer-events: none !important;
    }
    
    .category-btn-link {
        pointer-events: auto !important;
    }
}

/* ============================================
   КАРТОЧКА КАТЕГОРИИ
   ============================================ */
.category-card {
    position: relative !important;
    width: var(--category-card-width) !important;
    height: var(--category-card-height) !important;
    background: var(--category-card-bg) !important;
    border-radius: var(--category-card-border-radius) !important;
    filter: drop-shadow(var(--category-card-shadow)) !important;
    overflow: hidden !important;
    transition: transform var(--category-card-transition), filter var(--category-card-transition) !important;
    box-sizing: border-box !important;
}

/* На мобильных устройствах разрешаем overflow для кнопки */
@media (max-width: 768px) {
    .category-card {
        overflow: visible !important;
    }
}

.category-card-link:hover .category-card {
    transform: var(--category-card-transform-hover) !important;
    filter: drop-shadow(var(--category-card-shadow-hover)) !important;
}

/* ============================================
   ЗАГОЛОВОК КАТЕГОРИИ
   ============================================ */
.category-title {
    position: absolute !important;
    left: var(--category-title-left) !important;
    top: var(--category-title-top) !important;
    width: auto !important;
    max-width: var(--category-title-max-width) !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--category-title-font-family) !important;
    font-style: normal !important;
    font-weight: var(--category-title-font-weight) !important;
    font-size: var(--category-title-font-size) !important;
    line-height: var(--category-title-line-height) !important;
    color: var(--category-title-color) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ============================================
   ОБЛАСТЬ ИЗОБРАЖЕНИЯ
   ============================================ */
.category-image-wrapper {
    position: absolute !important;
    width: var(--category-image-wrapper-width) !important;
    height: var(--category-image-wrapper-height) !important;
    right: var(--category-image-wrapper-right) !important;
    bottom: var(--category-image-wrapper-bottom) !important;
    overflow: hidden !important;
    border-radius: var(--category-image-wrapper-border-radius) !important;
    background: var(--category-image-wrapper-bg) !important;
    box-sizing: border-box !important;
}

.category-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.category-image-wrapper > div {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--category-image-wrapper-bg) !important;
}

/* ============================================
   ОБЕРТКА КНОПКИ
   ============================================ */
.category-btn-wrapper {
    position: absolute !important;
    left: var(--category-btn-left) !important;
    top: var(--category-btn-top) !important;
    width: var(--category-btn-width) !important;
    height: var(--category-btn-height) !important;
}

.category-btn-wrapper a,
.category-btn-link {
    text-decoration: none !important;
    display: block !important;
    position: relative !important;
}

/* ============================================
   КНОПКА КАТЕГОРИИ
   ============================================ */
.category-btn {
    position: absolute !important;
    width: var(--category-btn-width) !important;
    height: var(--category-btn-height) !important;
    left: 0 !important;
    top: 0 !important;
    background: var(--category-btn-bg) !important;
    box-shadow: var(--category-btn-shadow) !important;
    border-radius: var(--category-btn-border-radius) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background-color var(--category-card-transition) !important;
    box-sizing: border-box !important;
}

.category-btn:hover {
    background-color: var(--category-btn-bg-hover) !important;
}

.category-btn span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-family: var(--category-btn-font-family) !important;
    font-style: normal !important;
    font-weight: var(--category-btn-font-weight) !important;
    font-size: var(--category-btn-font-size) !important;
    line-height: var(--category-title-line-height) !important;
    color: var(--category-btn-color) !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: color var(--category-card-transition) !important;
}

.category-btn:hover span {
    color: var(--category-btn-color-hover) !important;
}

/* ============================================
   СТРЕЛКА КНОПКИ
   ============================================ */
.category-btn-arrow {
    position: absolute !important;
    width: var(--category-btn-arrow-width) !important;
    height: var(--category-btn-arrow-height) !important;
    left: var(--category-btn-arrow-left) !important;
    top: var(--category-btn-arrow-top) !important;
    pointer-events: none !important;
    opacity: var(--category-btn-arrow-opacity) !important;
}

/* ============================================
   ПУСТОЕ СОСТОЯНИЕ
   ============================================ */
.categories-empty {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 40px !important;
    color: #666666 !important;
}

/* ============================================
   АДАПТИВНОСТЬ
   
   ВНИМАНИЕ: Медиа-запросы ниже переопределяют переменные из :root
   на определенных размерах экрана. Если вы меняете переменные в :root
   (строки 11-117), они будут работать только на экранах больше 1200px.
   Для экранов <=1200px, <=768px, <=480px переменные переопределяются
   в соответствующих @media блоках ниже.
   
   Если нужно изменить параметры для всех размеров экрана, меняйте
   переменные в :root И в соответствующих @media блоках.
   ============================================ */

@media (max-width: 1200px) {
    :root {
        --categories-grid-min-width: 200px;
        --category-card-width: 200px;
        --category-card-height: 270px;
        --category-image-wrapper-width: 184px;
        --category-image-wrapper-height: 180px;
        --category-image-wrapper-right: 16px;
        --category-image-wrapper-bottom: 20px;
        --category-title-font-size: 16px;
        --category-title-left: 12px;
        --category-title-top: 18px;
        --category-btn-width: 75px;
        --category-btn-height: 28px;
        --category-btn-left: 12px;
        --category-btn-top: 230px;
        --category-btn-font-size: 12px;
        --category-btn-arrow-width: 14px;
        --category-btn-arrow-height: 14px;
        --category-btn-arrow-left: 90px;
        --category-btn-arrow-top: 7px;
    }
}

@media (max-width: 768px) {
    :root {
        --categories-grid-min-width: calc(50% - var(--categories-grid-gap) / 2);
        --categories-grid-gap: 12px;
        --category-card-width: 100%;
        --category-card-height: 240px;
        --category-image-wrapper-width: calc(100% - 32px);
        --category-image-wrapper-height: 160px;
        --category-image-wrapper-right: 14px;
        --category-image-wrapper-bottom: 20px;
        --category-title-font-size: 15px;
        --category-title-left: 10px;
        --category-title-top: 16px;
        --category-title-max-width: calc(100% - 20px);
        --categories-title-font-size: 24px;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--categories-grid-gap) !important;
        row-gap: var(--categories-grid-gap) !important;
        column-gap: var(--categories-grid-gap) !important;
    }
    
    .category-card-link {
        display: block !important;
    }
    
    /* Показываем кнопку на мобильных */
    .category-btn-wrapper {
        display: block !important;
    }
}

@media (max-width: 480px) {
    :root {
        --categories-grid-min-width: calc(50% - var(--categories-grid-gap) / 2);
        --categories-grid-gap: 8px;
        --category-card-width: 100%;
        --category-card-height: 308px;
        --category-image-wrapper-width: calc(100% - 36px);
        --category-image-wrapper-height: 206px;
        --category-image-wrapper-right: 18px;
        --category-image-wrapper-bottom: 20px;
        --category-title-font-size: 18px;
        --category-title-left: 15px;
        --category-title-top: 20px;
        --category-title-max-width: calc(100% - 30px);
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--categories-grid-gap) !important;
        row-gap: var(--categories-grid-gap) !important;
        column-gap: var(--categories-grid-gap) !important;
    }
    
    .category-card-link {
        display: block !important;
    }
    
    .category-card {
        max-width: 228px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    
    /* Показываем кнопку на мобильных */
    .category-btn-wrapper {
        display: block !important;
    }
    
    .category-image-wrapper {
        max-width: 210px !important;
    }
}