/* RapitwebGreen - product card (Catalog/Partials/ProductOverview, Modern-style markup:
   .product-box.rwg-card, .rwg-card__badges, .rwg-card__actions, .rwg-card__buy,
   .rwg-card__icon, .rwg-card__add, .rwg-badge). Used anywhere a product grid renders -
   catalog pages, search results, "new arrivals" on the home page, etc.
   GrandNode classes (card, card-body, card-footer, btn, badge, alert, form-control) keep
   working as-is; this theme restyles them through tokens, same approach as elsewhere. */

.product-box.rwg-card {
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease;
}

    .product-box.rwg-card .card-body {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
        padding: 14px 0 0;
    }

    .product-box.rwg-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

/* ===== picture area: square crop, quick-view + action buttons =====
   No image-swap-on-hover: the second image (hover-img) stays out of the layout entirely,
   the card only ever shows DefaultPictureModel. */
.picture-container {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gray);
}

.img-container {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
}

.picture-container .card-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.picture-container .hover-img {
    display: none;
}

.product-box.rwg-card:hover .main-product-img {
    transform: scale(1.04);
}

/* quick view: icon button positioned at bottom center of image */
.quick-view-button {
    position: absolute;
    inset-block-end: .75rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 2;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--white);
    color: var(--muted);
    box-shadow: var(--shadow-sm);
    transition: background .2s, color .2s;
}

    .quick-view-button:hover {
        background: var(--main);
        color: var(--white);
    }

/* badges: sale %, custom flag - stacked at the picture's start corner */
.rwg-card__badges {
    position: absolute;
    inset-block-start: .6rem;
    inset-inline-start: .6rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    z-index: 2;
}

.rwg-badge {
    display: inline-block;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--white);
}

.rwg-badge--sale {
    background: var(--danger);
}

.product-label .badge {
    border-radius: 999px;
    font-weight: 500;
    background: var(--dark) !important;
    color: var(--bg) !important;
}

/* wishlist / compare: column of icon circles at the picture's start corner, always visible */
.rwg-card__actions {
    align-items: end;
    left: 10px;
    position: absolute;
    inset-block-start: .6rem;
    inset-inline-start: .6rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    z-index: 2;
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.rwg-card__icon {
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--white);
    color: var(--muted);
    box-shadow: var(--shadow-sm);
    transition: background .2s, color .2s;
    background: var(--gray);
    border-radius: 1rem;
}

    .rwg-card__icon:hover {
        background: var(--main);
        color: var(--white);
    }

/* ===== body: title, sku, rating, price, qty, add-to-cart ===== */
.card-body {
    padding: 1rem;
}

.card-title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 10px !important;
}

    .card-title a {
        color: var(--text);
        text-decoration: none;
    }

        .card-title a:hover {
            color: var(--main);
        }

.sku {
    display: block;
    font-size: .72rem;
    color: var(--muted);
    margin-block: .15rem .3rem;
}

.prices-rating {
    margin-block-start: .4rem;
}

.rating {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--muted);
    margin-block-end: .5rem;
}

    .rating a {
        color: inherit;
        text-decoration: none;
    }

        .rating a:hover {
            color: var(--main);
        }

.countdown-box.alert-info {
    --bs-alert-bg: var(--gray);
    --bs-alert-color: var(--text);
    --bs-alert-border-color: transparent;
    border-radius: var(--radius);
    font-size: .78rem;
    text-align: center;
}

.rwg-card__buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}

.prices {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.actual-price.price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.old-price.price {
    font-size: .8rem;
    color: var(--muted);
    text-decoration: line-through;
}

.catalog-quantity {
    inline-size: 56px;
    text-align: center;
    padding-inline: .3rem;
    flex-shrink: 0;
}

.rwg-card__add {
    inline-size: 38px;
    block-size: 38px;
    padding: 0;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--main);
    color: var(--bg);
    box-shadow: 0 4px 12px rgb(22 22 25 / .2);
    transition: background .2s;
}

    .rwg-card__add:hover {
        background: var(--gray);
    }

/* ===== footer: spec/attribute tables + swatches + short description ===== */
.card-footer {
    background: transparent;
    border-block-start: 1px solid var(--gray);
    padding: .85rem 1rem;
}

.spec-container table, .attr-container table {
    inline-size: 100%;
    border-collapse: collapse;
}

.spec-container tr, .attr-container tr {
    font-size: .78rem;
}

.spec-name, .attr-name {
    color: var(--muted);
    padding-block: .2rem;
    white-space: nowrap;
}

.spec-value, .attr-value {
    padding-block: .2rem;
    padding-inline-start: .5rem;
    color: var(--text);
}

.attr-value {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

    .attr-value .name {
        border-radius: 999px;
        font-size: .75rem;
        padding: .25rem .6rem;
        background: var(--gray);
        color: var(--text);
        border: 0;
    }

        .attr-value .name:hover {
            background: var(--main);
            color: var(--white);
        }

.color-container .color {
    display: inline-block;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0 0 0 1px var(--gray);
}

.image-container img {
    inline-size: 24px;
    block-size: 24px;
    object-fit: cover;
    border-radius: 50%;
}

.desc {
    font-size: .8rem;
    color: var(--muted);
    margin-block-start: .6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}