/*
 * Commerce Default design package
 * Visual appearance for product listing cards (colors, borders, button chrome).
 * Layout/geometry for canonical ProductCard is owned by storefront/components/product-card.css.
 */

/* ── Card shell (visual) ──────────────────────────────────── */
[data-storefront-shell="commerce"] .product-box-wrapper.row {
    margin: 0;
    padding: 0;
}

[data-storefront-shell="commerce"] .product-box {
    border: 1px solid var(--sf-border, var(--l-grey, #efeff0));
    border-radius: var(--sf-card-radius, 4px);
    background: var(--sf-product-card-bg, var(--sf-surface, #fff));
    box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.1);
}

[data-storefront-shell="commerce"] .product-box:hover {
    border-color: var(--sf-border, var(--l-grey, #efeff0));
    box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.1);
}

[data-storefront-shell="commerce"] .product-box a {
    color: var(--sf-text, var(--body-f, #000));
    text-decoration: none;
}

/* ── Typography / tokens (visual only) ───────────────────── */
[data-storefront-shell="commerce"] .p-title {
    color: var(--sf-text, var(--body-f, #000));
}

[data-storefront-shell="commerce"] .p-unit {
    color: var(--sf-text-muted, var(--grey, #808080));
}

[data-storefront-shell="commerce"] .p-review i {
    color: var(--sf-rating, var(--l-yellow, #fbb040));
}

[data-storefront-shell="commerce"] .p-price {
    color: var(--sf-price, var(--sf-text, #000));
}

[data-storefront-shell="commerce"] .p-price .p-old-p {
    color: var(--sf-price-old, var(--grey, #808080));
}

[data-storefront-shell="commerce"] .p-badges .Digital,
[data-storefront-shell="commerce"] .p-badges .Physical,
[data-storefront-shell="commerce"] .p-badges .Sell,
[data-storefront-shell="commerce"] .p-badges .Auction,
[data-storefront-shell="commerce"] .p-badges .Classified {
    padding: 1px 8px;
    border-radius: 6px;
    color: var(--sf-text-inverse, #fff);
    font-size: 11px;
    font-weight: 300;
}

[data-storefront-shell="commerce"] .p-badges .Digital { background: var(--l-orange, #fd7e14); }
[data-storefront-shell="commerce"] .p-badges .Physical { background: var(--green, #28a745); }
[data-storefront-shell="commerce"] .p-badges .Sale { background: var(--l-red, #dc3545); }
[data-storefront-shell="commerce"] .p-badges .Auction { background: var(--l-blue, #2680eb); }
[data-storefront-shell="commerce"] .p-badges .Classified { background: var(--d-yellow, #fbb040); }

/* ── Action row (visual) ─────────────────────────────────── */
[data-storefront-shell="commerce"] [data-storefront-component="ProductCard"] .sf-product-card__secondary-actions {
    border-top: 0;
}

[data-storefront-shell="commerce"] .p-action-btn {
    border-top: 1px solid var(--sf-divider, var(--l-grey, #efeff0));
}

[data-storefront-shell="commerce"] .p-action-btn .p-compare {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--sf-border, var(--white-smoke, #f5f5f5));
    border-radius: 20px;
    background: var(--sf-surface-subtle, var(--white-smoke, #f5f5f5));
    color: var(--sf-text-secondary, gray);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

[data-storefront-shell="commerce"] .p-action-btn .p-compare .compare-checkbox {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 3px;
}

[data-storefront-shell="commerce"] .p-action-btn .p-chat,
[data-storefront-shell="commerce"] .p-action-btn .p-view,
[data-storefront-shell="commerce"] .p-action-btn .p-fav,
[data-storefront-shell="commerce"] .p-action-btn .p-un-fav {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin: -5px 0 0 5px;
    padding: 2px 6px;
    border: 1px solid var(--sf-border, var(--white-smoke, #f5f5f5));
    border-radius: 4px;
    background: var(--sf-surface-subtle, var(--white-smoke, #f5f5f5));
    color: var(--sf-text-muted, gray);
    cursor: pointer;
}

[data-storefront-shell="commerce"] .p-action-btn .p-chat svg,
[data-storefront-shell="commerce"] .p-action-btn .p-view svg {
    width: 20px;
    height: 20px;
    fill: var(--sf-text-muted, gray);
}

.p-action-btn .p-view svg {
    stroke: var(--sf-text-muted, gray) !important;
}

[data-storefront-shell="commerce"] .p-action-btn .p-fav svg,
[data-storefront-shell="commerce"] .p-action-btn .p-un-fav svg {
    width: 20px;
    height: 20px;
}

[data-storefront-shell="commerce"] .p-action-btn .p-un-fav svg path {
    fill: none !important;
    stroke: var(--sf-text-muted, grey);
}

[data-storefront-shell="commerce"] .p-action-btn .p-fav svg path {
    fill: var(--sf-error, #e53935) !important;
    stroke: var(--sf-error, #e53935) !important;
}

/* ── Commerce footer (visual) ─────────────────────────────── */
[data-storefront-shell="commerce"] .p-conditional_div {
    border-top: 1px solid var(--sf-divider, var(--l-grey, #efeff0));
}

[data-storefront-shell="commerce"] [data-storefront-component="ProductCard"] .sf-product-card__cta-button.product-addtocart,
[data-storefront-shell="commerce"] [data-storefront-component="ProductCard"] .sf-product-card__cta-button.product-quickview {
    border: 1px solid transparent;
    border-radius: var(--sf-button-primary-radius, 10px) !important;
    background: linear-gradient(
        var(--sf-button-gradient-angle, 135deg),
        var(--sf-button-primary-start),
        var(--sf-button-primary-end)
    ) !important;
    color: var(--sf-button-primary-text, #fff) !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none !important;
}

[data-storefront-shell="commerce"] [data-storefront-component="ProductCard"] .sf-product-card__cta-button.product-addtocart:hover,
[data-storefront-shell="commerce"] [data-storefront-component="ProductCard"] .sf-product-card__cta-button.product-quickview:hover {
    background: linear-gradient(
        var(--sf-button-gradient-angle, 135deg),
        var(--sf-button-primary-hover-start),
        var(--sf-button-primary-hover-end)
    ) !important;
    color: var(--sf-button-primary-text, #fff) !important;
}

[data-storefront-shell="commerce"] [data-storefront-component="ProductCard"] .sf-product-card__cta-button.sf-product-card__cta-button--secondary,
[data-storefront-shell="commerce"] [data-storefront-component="ProductCard"] .sf-product-card__buy-now {
    border: 1px solid transparent;
    border-radius: var(--sf-button-secondary-radius, 10px) !important;
    background: linear-gradient(
        var(--sf-button-gradient-angle, 135deg),
        var(--sf-button-secondary-start),
        var(--sf-button-secondary-end)
    ) !important;
    color: var(--sf-button-secondary-text, var(--f-theme, #fff)) !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none !important;
}

[data-storefront-shell="commerce"] [data-storefront-component="ProductCard"] .sf-product-card__cta-button.sf-product-card__cta-button--secondary:hover,
[data-storefront-shell="commerce"] [data-storefront-component="ProductCard"] .sf-product-card__buy-now:hover {
    background: linear-gradient(
        var(--sf-button-gradient-angle, 135deg),
        var(--sf-button-secondary-hover-start),
        var(--sf-button-secondary-hover-end)
    ) !important;
    color: var(--sf-button-secondary-text, #fff) !important;
}

[data-storefront-shell="commerce"] .p-conditional_div .p-cart .qty input[type="number"] {
    border: 1px solid var(--sf-input-border, var(--l-grey, #efeff0)) !important;
    border-radius: var(--sf-radius, 5px);
    background-color: var(--sf-input-bg, #fff);
}

[data-storefront-shell="commerce"] .p-conditional_div .p-cart .qty input[type="number"]:focus,
[data-storefront-shell="commerce"] .p-conditional_div .p-cart .qty input[type="number"]:hover {
    border-color: var(--sf-input-focus, var(--theme-color)) !important;
    box-shadow: none;
}

[data-storefront-shell="commerce"] .p-conditional_div .p-cart .p-buy-now,
[data-storefront-shell="commerce"] .p-conditional_div .p-cart #btnbuynow {
    border: 1px solid transparent;
    border-radius: var(--sf-button-secondary-radius, 10px) !important;
    background: linear-gradient(
        var(--sf-button-gradient-angle, 135deg),
        var(--sf-button-secondary-start),
        var(--sf-button-secondary-end)
    ) !important;
    color: var(--sf-button-secondary-text, var(--f-theme, #fff)) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none !important;
}

[data-storefront-shell="commerce"] .p-conditional_div .p-cart .p-buy-now:hover,
[data-storefront-shell="commerce"] .p-conditional_div .p-cart #btnbuynow:hover {
    background: linear-gradient(
        var(--sf-button-gradient-angle, 135deg),
        var(--sf-button-secondary-hover-start),
        var(--sf-button-secondary-hover-end)
    ) !important;
    color: var(--sf-button-secondary-text, #fff) !important;
}

[data-storefront-shell="commerce"] .p-conditional_div .p-cart .p-cart-icon,
[data-storefront-shell="commerce"] .p-conditional_div .p-cart .product-addtocart:not(.sf-product-card__cta-button) {
    border: 1px solid transparent;
    border-radius: var(--sf-button-primary-radius, 10px) !important;
    background: linear-gradient(
        var(--sf-button-gradient-angle, 135deg),
        var(--sf-button-primary-start),
        var(--sf-button-primary-end)
    ) !important;
    color: var(--sf-button-primary-text, #fff) !important;
    cursor: pointer;
    box-shadow: none !important;
}

[data-storefront-shell="commerce"] .p-conditional_div .p-cart .p-cart-icon:hover,
[data-storefront-shell="commerce"] .p-conditional_div .p-cart .product-addtocart:not(.sf-product-card__cta-button):hover {
    background: linear-gradient(
        var(--sf-button-gradient-angle, 135deg),
        var(--sf-button-primary-hover-start),
        var(--sf-button-primary-hover-end)
    ) !important;
    color: var(--sf-button-primary-text, #fff) !important;
}

/* ── Responsive action visibility (legacy cards) ─────────── */
@media (max-width: 767.98px) {
    [data-storefront-shell="commerce"] .p-action-btn .p-chat,
    [data-storefront-shell="commerce"] .p-action-btn .p-view {
        display: none;
    }

    [data-storefront-shell="commerce"] .p-conditional_div .p-cart .qty {
        display: none;
    }
}

@media (max-width: 419.98px) {
    [data-storefront-shell="commerce"] .p-action-btn .p-fav,
    [data-storefront-shell="commerce"] .p-action-btn .p-un-fav {
        display: none;
    }
}