#shop-categories {
    --tile-fill: linear-gradient(148deg, #2c202b, #211920 72%);
    --tile-line: #513b4b;
    --tile-rule: #473642;
    --tile-label: #f5eaf1;
    --tile-arrow: #df9bbc;
}
:root[data-theme="light"] #shop-categories {
    --tile-fill: linear-gradient(148deg, #fffafd, #f3eaf0);
    --tile-line: #d9c6d2;
    --tile-rule: #e1d3dc;
    --tile-label: #30232e;
    --tile-arrow: #9c3067;
}
#shop-categories .ss-section-heading,
#shop-categories .mg-smoky-categories {
    max-inline-size: 1160px;
    margin-inline: auto;
}
#shop-categories .mg-smoky-categories { gap: 10px; margin-block-start: 16px; }
#shop-categories .mg-smoky-card { border-radius: 11px; }
#shop-categories .mg-smoky-card__frame,
#shop-categories .mg-smoky-card__body { clip-path: none; }
#shop-categories .mg-smoky-card__frame { background: var(--tile-line); }
#shop-categories .mg-smoky-card__body { background: var(--tile-fill); border-radius: 10px; }
#shop-categories .mg-smoky-card__image {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: clamp(62px, 7vw, 94px);
    object-fit: contain;
    padding: 11px 13px 7px;
}
#shop-categories .mg-smoky-card__caption {
    margin-inline: 9px;
    padding-block: 7px;
    min-height: 45px;
    box-sizing: border-box;
    align-items: center;
    color: var(--tile-label);
    font-size: 14px;
    line-height: 1.16;
}
#shop-categories .mg-smoky-card__caption::before { height: 1px; background: var(--tile-rule); }
#shop-categories .mg-smoky-card__arrow { color: var(--tile-arrow); }
#shop-categories .mg-smoky-card:is(:hover, :focus-visible) .mg-smoky-card__frame { background: var(--tile-arrow); }
@media (max-width: 600px) {
    #shop-categories .mg-smoky-categories { gap: 7px; margin-block-start: 12px; }
    #shop-categories .mg-smoky-card__image { height: 58px; padding: 8px 7px 4px; }
    #shop-categories .mg-smoky-card__caption { margin-inline: 4px; font-size: 12px; min-height: 39px; }
}