/* ==============================================
   recommended_categories_common 
   ============================================== */

.ddd-recommended-common-wrapper {
    margin: 0;
}

/* ----- СЕТКА (базовая) ----- */
.ddd-categories-grid {
    display: grid;
    gap: 20px;
}

 

/* ----- КОЛОНКИ (все варианты) ----- */
.ddd-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ddd-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ddd-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ddd-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.ddd-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ----- КАРТОЧКА-КНОПКА "В КАТАЛОГ" ----- */
.ddd-category-item--button {
    background: var(--global-palette8, #f5f7fa) !important;
    border: 2px dashed var(--global-palette7, #d5dce4) !important;
    transition: all 0.3s ease !important;
}

.ddd-category-item--button:hover {
    background: var(--global-palette14, #3BAD0C) !important;
    border-color: var(--global-palette14, #3BAD0C) !important;
}

.ddd-category-item--button a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 200px !important;
    text-decoration: none !important;
    color: var(--global-palette3, #052f44) !important;
}

.ddd-category-item--button:hover a {
    color: #ffffff !important;
}

.ddd-category-button-text {
    font-size: 1.1em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* ----- ИКОНКА (стрелка) ----- */
.ddd-category-button-icon svg {
    width: 48px !important;
    height: 48px !important;
    margin-top: 12px !important;
    stroke: var(--global-palette3, #052f44) !important;
    transition: stroke 0.3s ease !important;
}

.ddd-category-item--button:hover .ddd-category-button-icon svg {
    stroke: #ffffff !important;
}

/* ----- КНОПКА НА ВСЮ ШИРИНУ (при 2 колонках) ----- */
.ddd-category-item--button-fullwidth {
    grid-column: 1 / -1 !important;
    border: 2px dashed var(--global-palette7, #d5dce4) !important;
}

.ddd-category-item--button-fullwidth a {
    flex-direction: row !important;
    min-height: 80px !important;
    gap: 20px !important;
    padding: 0 30px !important;
}

.ddd-category-item--button-fullwidth .ddd-category-button-text {
    font-size: 1.2em !important;
}

.ddd-category-item--button-fullwidth .ddd-category-button-icon svg {
    width: 32px !important;
    height: 32px !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}