.bs-card {
    --pc-ink: #1b1530;
    --pc-muted: #5f5a70;
    --pc-brand: var(--brand, #692c91);
    --pc-brand-dark: var(--brand-dark, #4f216e);
    --pc-img-bg: #f0eef3;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(27, 21, 48, .06);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--pc-ink);
    min-width: 0;
}
.bs-card .bs-img { display: flex; align-items: center; justify-content: center; background: var(--pc-img-bg); aspect-ratio: 1 / .98; padding: 13px; }
.bs-card .bs-img img { width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bs-wish { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer; color: #14141c; border: 0; padding: 0; text-decoration: none; box-shadow: 0 2px 8px rgba(27, 21, 48, .10); opacity: 1; }
.bs-wish i { font-size: 18px; line-height: 1; }
.bs-wish:hover { color: var(--pc-brand); }
.bs-wish.glow, .bs-wish.glow:hover { color: #e11d48; }
/* The logged-in heart carries the theme's .wish-icon class (custom.css), which sets
   opacity:0 and is only revealed by .ec-product-inner:hover .wish-icon. Guests get a
   plain .bs-wish link, so only logged-in users lost the heart. Pin it visible here. */
.bs-card .bs-wish, .bs-card .bs-wish.wish-icon { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; opacity: 1; transform: none; }
/* legacy theme cards keep the same heart visible without needing a hover */
.ec-product-inner .bs-wish.wish-icon { opacity: 1; transform: none; z-index: 2; }
/* Logged-in and guest hearts must share the exact same solid white circle.
   The theme styles button surfaces as transparent, so pin the background back. */
.bs-card .bs-wish.wish-icon,
.ec-product-inner .bs-wish.wish-icon {
    background: #fff;
    border-radius: 50%;
}
/* legacy theme cards (.ec-product-inner) hold the heart outside the image link;
   they need a positioned box so the heart sits on the image instead of floating away */
.ec-product-inner:has(> .bs-wish) { position: relative; }
.bs-card .bs-disc { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--pc-brand); color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.bs-card .bs-oos { position: absolute; top: 12px; left: 12px; z-index: 3; background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.bs-card.has-oos .bs-disc { top: 42px; }
.bs-card .bs-body { padding: 14px 13px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bs-card .bs-rate { font-size: .75rem; font-weight: 600; color: #6b4a00; margin-bottom: 4px; }
.bs-card .bs-rate span { color: var(--pc-muted); font-weight: 500; }
.bs-card .bs-title { font-size: 1rem; font-weight: 700; margin: 0 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-card .bs-title a { color: var(--pc-ink); text-decoration: none; }
.bs-card .bs-price { font-size: 1.1rem; font-weight: 700; color: var(--pc-brand); margin-bottom: 12px; min-height: 1.5em; }
.bs-card .bs-price del { color: var(--pc-muted); font-weight: 500; font-size: .75rem; margin-left: 4px; }
.bs-card .bs-actions { display: flex; gap: 6px; margin-top: auto; }
.bs-card .bs-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 6px; font-size: .72rem; font-weight: 600; text-decoration: none; border: 0; line-height: 1.2; width: auto; }
.bs-card .bs-btn.bs-btn-light { background: #ebe9ee; color: var(--pc-ink); }
.bs-card .bs-btn.bs-btn-light:hover { background: #dedbe4; }
.bs-card .bs-btn.bs-btn-primary { background: var(--pc-brand); color: #fff; }
.bs-card .bs-btn.bs-btn-primary:hover { background: var(--pc-brand-dark); }
/* logged-in (add-to-cart-btn2) and guest (add-to-cart-btn) add-to-cart must look identical */
.bs-card .bs-btn.add-to-cart-btn, .bs-card .bs-btn.add-to-cart-btn2 { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--pc-brand); color: #fff; border: 0; box-shadow: none; border-radius: 6px; padding: 9px 6px; font-size: .72rem; font-weight: 600; line-height: 1.2; width: auto; text-decoration: none; }
.bs-card .bs-btn.add-to-cart-btn:hover, .bs-card .bs-btn.add-to-cart-btn2:hover { background: var(--pc-brand-dark); color: #fff; }
/* already in the cart: calm lavender outline, still a working link to the cart */
.bs-card .bs-btn.bs-in-cart,
.bs-card .bs-btn.bs-in-cart:hover,
.bs-card .bs-btn.add-to-cart-btn.bs-in-cart,
.bs-card .bs-btn.add-to-cart-btn2.bs-in-cart,
.bs-card .bs-btn.add-to-cart-btn.bs-in-cart:hover,
.bs-card .bs-btn.add-to-cart-btn2.bs-in-cart:hover {
    background: #f3ecfb;
    color: var(--pc-brand);
    border: 1px solid rgba(105, 44, 145, .45);
    box-shadow: none;
    font-weight: 700;
}
/* legacy theme cards outside .bs-card (sale page etc.) */
.add-to-cart-btn.bs-in-cart,
.add-to-cart-btn2.bs-in-cart,
.add-to-cart-btn.bs-in-cart:hover,
.add-to-cart-btn2.bs-in-cart:hover {
    background: #f3ecfb !important;
    color: #692c91 !important;
    border: 1px solid rgba(105, 44, 145, .45) !important;
    font-weight: 700;
}

.bs-card .bs-btn:disabled,
.bs-card .bs-btn.is-disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
    box-shadow: none;
}
.bs-card .bs-btn:disabled:hover,
.bs-card .bs-btn.is-disabled:hover { background: #d1d5db; color: #6b7280; }
.bs-card .bs-buy, .bs-card .bs-buy.buy-now-btn, .bs-card .bs-buy.Buy-product { flex: 1; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; box-shadow: none; padding: 9px 6px; border-radius: 6px; color: #15803d; font-size: .72rem; font-weight: 600; text-decoration: none; width: auto; transition: background .2s, color .2s; }
.bs-card .bs-buy:hover, .bs-card .bs-buy.buy-now-btn:hover, .bs-card .bs-buy.Buy-product:hover { background: #f0eef3; color: #166534; text-decoration: none; }

/* Related products grid on the product detail page */
.ec-releted-product .related-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.ec-releted-product .related-product-grid > .bs-card { height: 100%; }

/* ------------------------------------------------------------------
   MOBILE (< 992px): the home page product sections are the reference for
   every product listing (home, catalog, category, search, sale, wishlist,
   related products): 2 columns, one card text scale, no page-level gaps.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    /* --- Related products: same lilac + heading scale as the home sections --- */
    .ec-releted-product {
        /* the blade puts background:#F6F2F7 inline, so only !important beats it */
        background-color: #f4f0fa !important;
        /* responsive.css:1428 adds margin-bottom:30px below 768px, which is what
           showed the white body strip between this section and the footer */
        margin-bottom: 0;
    }
    .ec-releted-product .section-title { text-align: left; }
    .ec-releted-product .section-title .ec-title {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25;
        color: #14141c;
        letter-spacing: 0;
        padding: 0;
    }
    .ec-releted-product .section-title .sub-title {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
        color: #6b6b7a;
        letter-spacing: 0;
        padding: 0;
    }
    .ec-releted-product .related-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* --- one card text scale for every .bs-card page --- */
    .bs-card .bs-title { font-size: 14px; font-weight: 700; }
    .bs-card .bs-rate { font-size: 11px; }
    .bs-card .bs-price { font-size: 13px; line-height: 1.3; white-space: nowrap; letter-spacing: -0.01em; }
    .bs-card .bs-btn,
    .bs-card .bs-btn.add-to-cart-btn,
    .bs-card .bs-btn.add-to-cart-btn2,
    .bs-card .bs-buy { font-size: 12px; padding: 9px 8px; }

    /* --- sale page still uses the legacy .ec-product-inner card --- */
    .ec-grocery-sec .ec-product-inner .ec-pro-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
    .ec-grocery-sec .ec-product-inner .ec-pro-title a {
        display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ec-grocery-sec .ec-product-inner { overflow: hidden; }
    .ec-grocery-sec .ec-product-inner .ec-price { font-size: 13px; white-space: nowrap; line-height: 1.3; }
    .ec-grocery-sec .ec-product-inner .ec-price .new-price {
        display: block; font-size: 13px; max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ec-grocery-sec .ec-product-inner .ec-pro-rating { font-size: 11px; line-height: 1.4; }
    .ec-grocery-sec .ec-product-inner .add-to-cart-btn,
    .ec-grocery-sec .ec-product-inner .add-to-cart-btn2,
    .ec-grocery-sec .ec-product-inner .view-more,
    .ec-grocery-sec .ec-product-inner .buy-now-btn { font-size: 12px; padding: 9px 8px; }
}

/* two-column cards are too narrow for side-by-side buttons: stack them */
@media (max-width: 575px) {
    .bs-card .bs-actions { flex-direction: column; gap: 6px; }
    .bs-card .bs-actions .bs-btn,
    .bs-card .bs-actions .bs-buy { width: 100%; flex: none; }
}

/* Mobile pricing: two-column cards are too narrow for "Rs. 400 - 1,000" at the
   desktop size, so it used to break over two lines. Keep it on one line and let
   the struck-through old price drop underneath instead of widening the line. */
@media (max-width: 575px) {
    .bs-card .bs-price {
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
        letter-spacing: -0.01em;
    }
    .bs-card .bs-price del {
        display: block;
        margin-left: 0;
        font-size: 11px;
        line-height: 1.3;
    }
}
@media (max-width: 360px) {
    .bs-card .bs-price { font-size: 12px; }
}