/* ============================================================================
   App-style Product Listing & Product Detail — matches the Flutter app UI:
   light-grey background, white rounded card panels, app product cards, brand
   blue prices/CTAs. Scoped to body.page-product-listing / body.page-product-page
   so nothing else is affected. Brand: blue #1E3A8A + teal #14B8A6.
   ========================================================================== */

body.page-product-listing,
body.page-product-page {
    background: #F1F5F9;
}

/* Breadcrumb strip: drop the coloured background so it sits on the grey page. */
body.page-product-listing section.wrapper.bg-soft-grape,
body.page-product-page section.wrapper.bg-soft-grape {
    background: transparent !important;
    padding-top: 10px;
    padding-bottom: 0;
}
body.page-product-listing .breadcrumb-item a,
body.page-product-page .breadcrumb-item a {
    color: #1E3A8A;
}

/* ── PRODUCT LISTING ────────────────────────────────────────────────────────*/
body.page-product-listing section.listing-page.bg-light {
    background: transparent !important;
}

/* Product image becomes an app-style rounded card with hover lift. */
body.page-product-listing .product-image.item figure {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 3px 8px rgba(2, 6, 23, 0.05);
    padding: 8px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
body.page-product-listing .product-image.item:hover figure {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(30, 58, 138, 0.12);
}
body.page-product-listing .product-image.item figure img {
    border-radius: 10px;
}
body.page-product-listing .list-product-title a,
body.page-product-listing .product-content .title a {
    color: #0F172A;
    font-weight: 500;
}
body.page-product-listing .list-product-title a:hover {
    color: #1E3A8A;
}
body.page-product-listing .product-content .price #price,
body.page-product-listing .product-content .price span:first-child {
    color: #1E3A8A;
    font-weight: 700;
}

/* Filter sidebar / panels → white rounded cards. */
body.page-product-listing .listing-page aside,
body.page-product-listing .listing-page .filter,
body.page-product-listing .listing-page .sidebar,
body.page-product-listing .offcanvas .offcanvas-body {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
}
body.page-product-listing .listing-page aside,
body.page-product-listing .listing-page .filter {
    padding: 14px;
}

/* Sort / per-page dropdown + heading. */
body.page-product-listing h2.display-6 {
    font-weight: 700;
    color: #0F172A;
}

/* ── PRODUCT DETAIL ─────────────────────────────────────────────────────────*/
/* Wrap the main product block and the related/tabs block in white cards. */
body.page-product-page section.wrapper.bg-light > .container {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 5px 14px rgba(2, 6, 23, 0.05);
    padding: 22px;
    margin-top: 8px;
    margin-bottom: 16px;
}

/* Gallery images rounded to match the card language. */
body.page-product-page .gallery-top-1 img,
body.page-product-page .preview-image-swiper img,
body.page-product-page .swiper-img img {
    border-radius: 14px;
}
body.page-product-page .swiper-img {
    border-radius: 12px;
    overflow: hidden;
}

/* Price = brand blue & bold; struck price stays muted. */
body.page-product-page .price #price,
body.page-product-page .price > span:first-child {
    color: #1E3A8A !important;
    font-weight: 700;
    font-size: 1.4rem;
}

/* Tabs: brand-coloured active tab underline. */
body.page-product-page .nav-tabs .nav-link.active {
    color: #1E3A8A;
    border-bottom-color: #1E3A8A;
}

/* ── CTA buttons: recolour the yellow "Add to cart" to the brand blue ───────*/
body.page-product-listing .btn-yellow,
body.page-product-page .btn-yellow {
    --bs-btn-bg: #1E3A8A;
    --bs-btn-border-color: #1E3A8A;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #16306e;
    --bs-btn-hover-border-color: #16306e;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #16306e;
    --bs-btn-active-border-color: #16306e;
    background-color: #1E3A8A;
    border-color: #1E3A8A;
    color: #fff;
}
body.page-product-listing .btn-yellow:hover,
body.page-product-page .btn-yellow:hover {
    background-color: #16306e;
    border-color: #16306e;
    color: #fff;
}