/* WooCommerce defaults we override wherever its own markup is used. */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

.woocommerce ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hb-line);
    border-radius: 22px;
    transition: transform .22s ease, box-shadow .22s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 36px rgba(var(--hb-rose-rgb, 201, 37, 106), .12);
}

.woocommerce div.product {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--hb-line);
    border-radius: 26px;
}

.woocommerce div.product .price,
.woocommerce ul.products li.product .price {
    color: var(--hb-gold-ink);
    font-weight: 900;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    padding: 13px 22px;
    background: linear-gradient(115deg, var(--hb-gold-ink), var(--hb-rose) 60%, var(--hb-lilac));
    color: #fff;
    font-weight: 800;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    filter: brightness(1.06);
    color: #fff;
}

.woocommerce-message {
    border-top-color: var(--hb-mint);
}

.woocommerce-error {
    border-top-color: var(--hb-rose);
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .woocommerce div.product { padding: 14px; }
}