#buy_dialog .card__buttons {
    --display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}

#buy_dialog .card__button {
    margin-block: 0.25rem;
}

dialog.close_btn {
    margin-block: 0 0.25rem;
}

.pain {
    width: 100%;
}

#buy_dialog .spa_tab {
    text-align: center;
}

#buy_dialog .spa_tab[data-product-tab-content-name] {
    --display: flex;
}

#buy_dialog .spa_tab[data-time-buy-tab-name] {
    --display: grid;
}

.product__iconizer {
    --icon-size: 15px;

    --overlap: 0.35;   /* 0..1 (higher = more overlap) */
    --spread: 0.30;    /* 0..1 (higher = more space on hover) */

    display: grid;
    grid-template-columns: var(--icon-size) auto max-content;
    justify-content: center;
    align-items: center;
    gap: calc(var(--icon-size) / 2);
}


.product__iconizer > img {
    height: var(--icon-size);
    width: var(--icon-size);
    align-self: center;
}

.product__iconizer-icons {
    display: flex;
    align-items: center;
}

/* icon base */
.product__iconizer-icons > img {
    /*width: var(--icon-size);*/
    height: var(--icon-size);
    position: relative;
    transition: margin-left 160ms ease, transform 160ms ease;
}

/* stacked (overlapped) state */
.product__iconizer-icons > img + img {
    margin-left: calc(var(--icon-size) * -1 * var(--overlap));
}

/* unstack on hover of the whole product__iconizer */
.mainoption:hover > .product__iconizer > .product__iconizer-icons > img + img {
    margin-left: calc(var(--icon-size) * var(--spread));
}

/* optional: make a hovered icon appear above neighbors */
.product__iconizer-icons > img:hover {
    z-index: 2;
    transform: scale(1.05);
}

dialog.card {
    color: var(--color-text);
    flex-direction: column;
    gap: 0.25rem;
    z-index: 1;
    display: none !important;
    padding-block: .5rem;
}

dialog[open] {
    display: flex !important;
}