/* ============================================================================
   DREAM BOOK — Premium Bookstore Theme Overlay
   Scope: Home (banner / offers / categories / published) + product cards.
   - Layers on top of theme_aster. Inherits brand color from admin (--bs-primary).
   - RTL-safe (logical properties + [dir=rtl] guards), dark-mode aware,
     reduced-motion + focus-visible accessible, no layout-shift hovers.
   Load AFTER custom.css.
   ========================================================================== */

:root {
    /* Surface + elevation scale (premium, soft) */
    --dream-radius-sm: 0.625rem;   /* 10px */
    --dream-radius: 0.875rem;      /* 14px */
    --dream-radius-lg: 1.25rem;    /* 20px */
    --dream-radius-pill: 50rem;

    --dream-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --dream-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --dream-shadow-md: 0 8px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .05);
    --dream-shadow-lg: 0 18px 46px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06);

    /* Brand-derived accents (no hardcoded brand hue — uses admin color) */
    --dream-primary: var(--bs-primary, #92400E);
    --dream-primary-rgb: var(--bs-primary-rgb, 146, 64, 14);
    --dream-on-primary: #ffffff;
    --dream-surface: #ffffff;
    --dream-ink: #1f2430;
    --dream-ink-soft: #6b7280;
    --dream-line: rgba(15, 23, 42, .08);
    --dream-tint: rgba(var(--dream-primary-rgb), .07);
    --dream-tint-strong: rgba(var(--dream-primary-rgb), .14);

    /* Rhythm */
    --dream-section-gap: clamp(1.25rem, 3vw , 2.25rem);
    --dream-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Dark-mode token remap (theme_aster sets body[theme="dark"]) */
body[theme="dark"] {
    --dream-surface: #1d2126;
    --dream-ink: #e8eaed;
    --dream-ink-soft: #9aa3af;
    --dream-line: rgba(255, 255, 255, .10);
    --dream-shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
    --dream-shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
    --dream-shadow-lg: 0 18px 46px rgba(0, 0, 0, .55);
}

/* ----------------------------------------------------------------------------
   1. Section rhythm + premium card surfaces
   -------------------------------------------------------------------------- */
.main-content > section {
    scroll-margin-top: 5rem;
}

.main-content .card {
    border: 1px solid var(--dream-line);
    border-radius: var(--dream-radius-lg);
    box-shadow: var(--dream-shadow-sm);
    background-color: var(--dream-surface);
    transition: box-shadow .25s var(--dream-ease);
}

/* Tinted "offer" bands get a warm gradient wash instead of flat fill */
.bg-primary-light {
    background-image: linear-gradient(180deg,
        rgba(var(--dream-primary-rgb), .10),
        rgba(var(--dream-primary-rgb), .03));
}

/* ----------------------------------------------------------------------------
   2. Section headings — consistent literary header pattern
   -------------------------------------------------------------------------- */
.main-content h2,
.styled-title {
    color: var(--dream-ink);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.styled-title::after {
    block-size: 0.1875rem !important;
    inline-size: 2.75rem;
    border-radius: var(--dream-radius-pill);
    background-image: linear-gradient(90deg,
        var(--dream-primary), rgba(var(--dream-primary-rgb), .35)) !important;
}

/* "view all" links: pill on hover, clear affordance */
.btn-link {
    --bs-btn-color: var(--dream-primary);
    color: var(--dream-primary);
    font-weight: 600;
    border-radius: var(--dream-radius-pill);
    padding-inline: .25rem;
    transition: color .2s var(--dream-ease), gap .2s var(--dream-ease);
}
.btn-link:hover {
    color: var(--dream-primary);
    text-decoration: none;
    gap: .5rem;
}
.btn-link .bi-chevron-right {
    transition: transform .2s var(--dream-ease);
}
.btn-link:hover .bi-chevron-right {
    transform: translateX(2px);
}
[dir="rtl"] .btn-link:hover .bi-chevron-right {
    transform: translateX(-2px) scaleX(-1);
}

/* ----------------------------------------------------------------------------
   3. Main banner — rounded, elevated, branded pagination
   -------------------------------------------------------------------------- */
.banner .card {
    border-radius: var(--dream-radius-lg);
    box-shadow: var(--dream-shadow-md);
}
.banner .swiper-container {
    border-radius: var(--dream-radius) !important;
    overflow: hidden;
}
.banner .swiper-slide img {
    aspect-ratio: 16 / 7;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}
.banner .swiper-pagination-bullet {
    background: #ffffff;
    opacity: .55;
    width: 8px;
    height: 8px;
    transition: width .25s var(--dream-ease), opacity .25s var(--dream-ease);
}
.banner .swiper-pagination-bullet-active {
    opacity: 1;
    width: 22px;
    border-radius: var(--dream-radius-pill);
    background: var(--dream-primary);
}
/* Side / footer ad tiles: hover lift */
.ad-hover {
    display: block;
    border-radius: var(--dream-radius);
    overflow: hidden;
    transition: transform .3s var(--dream-ease), box-shadow .3s var(--dream-ease);
}
.ad-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--dream-shadow-md);
}

/* Happy Club coupon cards */
.club-card {
    border-radius: var(--dream-radius) !important;
    border: 1px dashed rgba(var(--dream-primary-rgb), .4) !important;
    background: var(--dream-surface);
    transition: transform .25s var(--dream-ease), box-shadow .25s var(--dream-ease);
}
.club-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dream-shadow-sm);
}

/* ----------------------------------------------------------------------------
   4. Product card — the heart of "amazing" (used across all sections)
   -------------------------------------------------------------------------- */
.product {
    border: 1px solid var(--dream-line) !important;
    border-radius: var(--dream-radius) !important;
    background: var(--dream-surface);
    transition: transform .28s var(--dream-ease), box-shadow .28s var(--dream-ease),
                border-color .28s var(--dream-ease);
}
.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--dream-shadow-lg);
    border-color: rgba(var(--dream-primary-rgb), .35) !important;
}

/* Image zoom contained inside the frame (no layout shift) */
.product__top {
    overflow: hidden;
    border-radius: var(--dream-radius) var(--dream-radius) 0 0;
    background: linear-gradient(160deg, var(--dream-tint), transparent 60%);
}
.product__thumbnail img {
    transition: transform .45s var(--dream-ease);
}
.product:hover .product__thumbnail img {
    transform: scale(1.06);
}

/* Discount badge → gradient pill */
.product__discount-badge {
    background: linear-gradient(135deg, var(--dream-primary),
        rgba(var(--dream-primary-rgb), .8)) !important;
    color: var(--dream-on-primary) !important;
    box-shadow: var(--dream-shadow-sm);
    font-weight: 700;
    padding: .15rem .55rem !important;
}

/* Quick actions: circular glass chips, reveal on hover, accessible focus */
.product__actions {
    gap: .5rem;
}
.product__actions > a {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--dream-ink);
    box-shadow: var(--dream-shadow-sm);
    backdrop-filter: blur(4px);
    transition: background .2s var(--dream-ease), color .2s var(--dream-ease),
                transform .2s var(--dream-ease);
}
body[theme="dark"] .product__actions > a {
    background: rgba(40, 44, 50, .92);
    color: var(--dream-ink);
}
.product__actions > a:hover,
.product__actions > a.wishlist_icon_active,
.product__actions > a.compare_list_icon_active {
    background: var(--dream-primary);
    color: var(--dream-on-primary);
    transform: scale(1.08);
}

/* Title + price hierarchy */
.product__title {
    color: var(--dream-ink);
    font-weight: 600;
}
.product:hover .product__title {
    color: var(--dream-primary);
}
.product__new-price,
.product__price ins {
    color: var(--dream-primary);
    font-weight: 800;
    text-decoration: none;
}
.product__old-price,
.product__price del {
    color: var(--dream-ink-soft);
    font-weight: 500;
}
.product__save-amount {
    display: inline-block;
    background: var(--dream-tint);
    color: var(--dream-primary);
    font-weight: 600;
    font-size: .75rem;
    padding: .15rem .55rem;
    border-radius: var(--dream-radius-pill);
}

/* ----------------------------------------------------------------------------
   5. Offers — flash deal, clearance, featured, today's best deal
   -------------------------------------------------------------------------- */
/* Flash deal countdown digits → boxed brand chips */
.countdown-timer > div > span,
.countdown-wrapper [class$="-value"],
.flash-deal-countdown .countdown-timer span {
    background: var(--dream-primary);
    color: var(--dream-on-primary);
}
.countdown-timer > div {
    color: var(--dream-ink-soft);
    font-weight: 600;
}

/* Today's best deal hero card */
.today-best-deal .title {
    font-weight: 800;
    letter-spacing: -0.01em;
}
.today-best-deal img {
    filter: drop-shadow(0 12px 28px rgba(var(--dream-primary-rgb), .22));
    transition: transform .4s var(--dream-ease);
}
.today-best-deal:hover img {
    transform: scale(1.03);
}

/* "Just for you" mini grid hover */
.hover-zoom-in img {
    transition: transform .35s var(--dream-ease);
}
.hover-zoom-in:hover img {
    transform: scale(1.07);
}

/* Swiper navigation buttons → circular, elevated, branded */
.swiper-button-next,
.swiper-button-prev {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    background: var(--dream-surface);
    box-shadow: var(--dream-shadow-md);
    border: 1px solid var(--dream-line);
    color: var(--dream-primary);
    transition: background .2s var(--dream-ease), color .2s var(--dream-ease),
                transform .2s var(--dream-ease);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--dream-primary);
    color: var(--dream-on-primary);
    transform: scale(1.05);
}
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1rem;
    font-weight: 700;
}

/* ----------------------------------------------------------------------------
   6. Categories — find-what-you-need + home category sliders
   -------------------------------------------------------------------------- */
.find-what-you-need-items a .img-wrap,
.find-what-you-need-items a {
    transition: transform .25s var(--dream-ease);
}
.find-what-you-need-items a:hover {
    transform: translateY(-3px);
}
.find-what-you-need-items a:hover .img-wrap {
    box-shadow: var(--dream-shadow-sm);
    border-radius: var(--dream-radius-sm);
}
.find-what-you-need-items .floting-text {
    background: rgba(var(--dream-primary-rgb), .9);
    color: var(--dream-on-primary);
    border-radius: var(--dream-radius-pill);
}

/* Category card (home category slider) */
.product-category-card,
.category-card {
    border-radius: var(--dream-radius) !important;
    transition: transform .25s var(--dream-ease), box-shadow .25s var(--dream-ease);
}
.product-category-card:hover,
.category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dream-shadow-md);
}

/* ----------------------------------------------------------------------------
   7. Published — recommended tabs (featured / best-selling / latest)
   -------------------------------------------------------------------------- */
.nav--tabs button,
.nav--tabs a {
    color: var(--dream-ink-soft);
    font-weight: 600;
    padding-block: .5rem;
    transition: color .2s var(--dream-ease);
}
.nav--tabs button.active,
.nav--tabs a.active {
    color: var(--dream-primary);
}
.nav--tabs button::after,
.nav--tabs a::after {
    background-image: linear-gradient(90deg,
        var(--dream-primary), rgba(var(--dream-primary-rgb), .4)) !important;
    border-radius: var(--dream-radius-pill);
}

/* ----------------------------------------------------------------------------
   8. Buttons — primary CTA polish (keeps admin brand color)
   -------------------------------------------------------------------------- */
.btn-primary {
    border-radius: var(--dream-radius-pill);
    box-shadow: 0 6px 16px rgba(var(--dream-primary-rgb), .25);
    transition: transform .2s var(--dream-ease), box-shadow .2s var(--dream-ease),
                filter .2s var(--dream-ease);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(var(--dream-primary-rgb), .32);
    filter: brightness(1.03);
}
.btn-primary:active {
    transform: translateY(0);
}

/* ----------------------------------------------------------------------------
   9. Accessibility — focus-visible rings, reduced motion
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.product:focus-visible,
.btn:focus-visible,
.product__actions > a:focus-visible {
    outline: 3px solid rgba(var(--dream-primary-rgb), .55);
    outline-offset: 2px;
    border-radius: var(--dream-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .product,
    .product__thumbnail img,
    .ad-hover,
    .club-card,
    .today-best-deal img,
    .hover-zoom-in img,
    .swiper-button-next,
    .swiper-button-prev,
    .btn-primary,
    .find-what-you-need-items a,
    .product-category-card,
    .category-card {
        transition: none !important;
    }
    .product:hover,
    .ad-hover:hover,
    .club-card:hover,
    .btn-primary:hover,
    .find-what-you-need-items a:hover,
    .product-category-card:hover,
    .category-card:hover {
        transform: none !important;
    }
    .product:hover .product__thumbnail img,
    .today-best-deal:hover img,
    .hover-zoom-in:hover img {
        transform: none !important;
    }
}

/* ----------------------------------------------------------------------------
   10. Performance — off-screen sections skip paint until near viewport.
   Excludes swiper sections (need width during init). Applies to plain bands.
   -------------------------------------------------------------------------- */
.main-content > section:last-child {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

/* ============================================================================
   DREAM HOME — Literary editorial identity (scoped to the home <main>)
   Matches the product-detail bp-* palette: brown brand + gold accent + cream,
   serif display headings. Recolors the whole home by overriding the theme's
   CSS custom properties, then layers premium editorial styling on top.
   ========================================================================== */
.dream-home {
    /* Literary palette tokens */
    --bp-bg: #F6F1EA;
    --bp-bg-tint: #EFE7DC;
    --bp-surface: #FFFFFF;
    --bp-ink: #1C1613;
    --bp-ink-soft: #4A3F37;
    --bp-muted: #8A7D70;
    --bp-line: #E8DFD2;
    --bp-line-soft: #F0E8DC;
    --bp-brand: #4A2E1C;
    --bp-brand-hover: #32200F;
    --bp-accent: #B78845;
    --bp-accent-soft: #E8D4AD;

    --bp-radius: 12px;
    --bp-radius-sm: 8px;
    --bp-radius-lg: 18px;
    --bp-pill: 50rem;
    --bp-shadow-sm: 0 1px 2px rgba(28, 22, 19, .05);
    --bp-shadow: 0 8px 30px -10px rgba(28, 22, 19, .14);
    --bp-shadow-lg: 0 24px 60px -22px rgba(28, 22, 19, .26);
    --bp-ease: cubic-bezier(.22, .61, .36, 1);

    --bp-serif: 'Playfair Display', 'Amiri', Georgia, serif;
    --bp-sans: 'Tajawal', 'Nunito', 'Almarai', system-ui, sans-serif;

    /* Recolor the theme's primary system → brown/gold (auto-cascades to
       text-primary, btn-primary, bg-primary-light, swiper accents, etc.) */
    --bs-primary: #4A2E1C;
    --bs-primary-rgb: 74, 46, 28;
    --primary-light: #EFE7DC;
    --primary-dark: #32200F;
    --bs-secondary: #B78845;
    --bs-secondary-rgb: 183, 136, 69;
    /* Keep the global overlay tokens in sync */
    --dream-primary: #4A2E1C;
    --dream-primary-rgb: 74, 46, 28;
    --dream-tint: rgba(74, 46, 28, .07);
    --dream-line: var(--bp-line);

    /*background-color: var(--bp-bg);*/
    background-image:
        radial-gradient(1100px 480px at 92% -8%, rgba(183, 136, 69, .10), transparent 60%),
        radial-gradient(900px 480px at -8% 14%, rgba(74, 46, 28, .06), transparent 60%);
    color: var(--bp-ink);
    font-family: var(--bp-sans);
    font-weight: 400;
    padding-inline: clamp(0px, 1vw, 8px);
    row-gap: clamp(1.5rem, 3.5vw, 2.75rem) !important;
}

/* ---- Editorial typography ------------------------------------------------ */
.dream-home h1,
.dream-home h2,
.dream-home h3,
.dream-home .styled-title,
.dream-home .today-best-deal .title {
    font-family: var(--bp-serif) !important;
    color: var(--bp-ink);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.dream-home h2 {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.dream-home .text-primary { color: var(--bp-brand) !important; }

/* Section header: gold eyebrow rule + serif title (applied via styled-title) */
.dream-home .styled-title::after {
    inline-size: 3.25rem;
    block-size: 0.1875rem !important;
    background-image: linear-gradient(90deg, var(--bp-accent), rgba(183, 136, 69, .25)) !important;
}

/* ---- Surfaces / cards ---------------------------------------------------- */
.dream-home .card {
    background-color: var(--bp-surface);
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow-sm);
}
.dream-home .bg-primary-light {
    background-image: linear-gradient(180deg, var(--bp-bg-tint), rgba(239, 231, 220, .35));
    border-radius: var(--bp-radius-lg);
}

/* ---- "view all" links → gold-on-hover, refined affordance --------------- */
.dream-home .btn-link {
    color: var(--bp-brand);
    font-weight: 600;
    font-family: var(--bp-sans);
}
.dream-home .btn-link:hover { color: var(--bp-accent); }
.dream-home .btn-link .bi-chevron-right,
.dream-home .btn-link .text-primary { color: var(--bp-accent) !important; }

/* ---- Banner -------------------------------------------------------------- */
.dream-home .banner .card { box-shadow: var(--bp-shadow); }
.dream-home .banner .swiper-pagination-bullet-active { background: var(--bp-accent); }

/* ---- Product cards (editorial) ------------------------------------------ */
.dream-home .product {
    border: 1px solid var(--bp-line) !important;
    border-radius: var(--bp-radius) !important;
    background: var(--bp-surface);
}
.dream-home .product:hover {
    border-color: var(--bp-accent) !important;
    box-shadow: var(--bp-shadow-lg);
}
.dream-home .product__top {
    background: linear-gradient(160deg, rgba(183, 136, 69, .10), transparent 62%);
}
.dream-home .product__title {
    font-family: var(--bp-sans);
    font-weight: 600;
    color: var(--bp-ink);
}
.dream-home .product:hover .product__title { color: var(--bp-brand); }
.dream-home .product__new-price,
.dream-home .product__price ins {
    color: var(--bp-brand);
    font-weight: 800;
}
.dream-home .product__discount-badge {
    background: linear-gradient(135deg, var(--bp-accent), #9c6f33) !important;
    color: #fff !important;
}
.dream-home .product__save-amount {
    background: var(--bp-accent-soft);
    color: var(--bp-brand);
}
.dream-home .product__actions > a:hover,
.dream-home .product__actions > a.wishlist_icon_active,
.dream-home .product__actions > a.compare_list_icon_active {
    background: var(--bp-brand);
    color: #fff;
}
.dream-home .star-rating,
.dream-home .text-gold { color: var(--bp-accent) !important; }

/* ---- Offers: flash countdown, today's deal, swiper nav ------------------ */
.dream-home .countdown-timer > div > span,
.dream-home .flash-deal-countdown .countdown-timer span {
    background: var(--bp-brand);
    color: #fff;
    border-radius: var(--bp-radius-sm);
}
.dream-home .today-best-deal img {
    filter: drop-shadow(0 14px 30px rgba(183, 136, 69, .28));
}
.dream-home .swiper-button-next,
.dream-home .swiper-button-prev {
    background: var(--bp-surface);
    border: 1px solid var(--bp-line);
    color: var(--bp-brand);
    box-shadow: var(--bp-shadow);
}
.dream-home .swiper-button-next:hover,
.dream-home .swiper-button-prev:hover {
    background: var(--bp-brand);
    color: #fff;
}

/* ---- Categories ---------------------------------------------------------- */
.dream-home .find-what-you-need-items .floting-text {
    background: rgba(74, 46, 28, .92);
    color: #fff;
}
.dream-home .club-card {
    border: 1px dashed var(--bp-accent) !important;
}

/* ---- Published: recommended tabs ---------------------------------------- */
.dream-home .nav--tabs button.active,
.dream-home .nav--tabs a.active { color: var(--bp-brand); }
.dream-home .nav--tabs button::after,
.dream-home .nav--tabs a::after {
    background-image: linear-gradient(90deg, var(--bp-accent), rgba(183, 136, 69, .4)) !important;
}

/* ---- Buttons ------------------------------------------------------------- */
.dream-home .btn-primary {
    background: var(--bp-brand);
    border-color: var(--bp-brand);
    border-radius: var(--bp-pill);
    box-shadow: 0 6px 16px -4px rgba(74, 46, 28, .4);
}
.dream-home .btn-primary:hover {
    background: var(--bp-brand-hover);
    border-color: var(--bp-brand-hover);
    box-shadow: 0 10px 22px -4px rgba(74, 46, 28, .5);
}

/* ---- Dark mode remap (keep cohesion with site dark theme) --------------- */
body[theme="dark"] .dream-home {
    --bp-bg: #15110D;
    --bp-bg-tint: #1E1812;
    --bp-surface: #211B14;
    --bp-ink: #F1EADF;
    --bp-ink-soft: #CDBFAE;
    --bp-muted: #9C8E7D;
    --bp-line: #352C22;
    --bp-line-soft: #2A2219;
    --bp-accent: #D7A85B;
    --bp-accent-soft: #3A2E1C;
    --primary-light: #1E1812;
    --bp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --bp-shadow: 0 8px 30px -10px rgba(0, 0, 0, .6);
    --bp-shadow-lg: 0 24px 60px -22px rgba(0, 0, 0, .7);
    background-image:
        radial-gradient(1100px 480px at 92% -8%, rgba(215, 168, 91, .10), transparent 60%),
        radial-gradient(900px 480px at -8% 14%, rgba(74, 46, 28, .18), transparent 60%);
}
body[theme="dark"] .dream-home .product__new-price,
body[theme="dark"] .dream-home .product__price ins,
body[theme="dark"] .dream-home .product:hover .product__title,
body[theme="dark"] .dream-home .text-primary { color: var(--bp-accent) !important; }

/* ---- Accessibility: focus rings + reduced motion ----------------------- */
.dream-home a:focus-visible,
.dream-home button:focus-visible,
.dream-home .btn:focus-visible,
.dream-home .product:focus-visible,
.dream-home .swiper-button-next:focus-visible,
.dream-home .swiper-button-prev:focus-visible {
    outline: 3px solid var(--bp-accent);
    outline-offset: 2px;
    border-radius: var(--bp-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
    .dream-home *,
    .dream-home *::before,
    .dream-home *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
}

/* ---- Small phones: tighten editorial rhythm ---------------------------- */
@media (max-width: 575.98px) {
    .dream-home { row-gap: 1.25rem !important; }
    .dream-home h2 { font-size: 1.35rem; }
}

/* ============================================================================
   ADVANCED PRODUCT CARD (home) — fixed, centered book-cover area
   Base theme leaves the cover frame height = image height (no --height set),
   so short covers look tiny and rows are uneven. Lock a fixed height, center
   the cover, contain it (never stretch), and give it a lifted 3D book shadow.
   Applies to all large product cards on the home (top-rated, clearance,
   featured, recommended) for a consistent, premium grid.
   ========================================================================== */
.dream-home .product {
    overflow: hidden;
}

/* Fixed, centered image stage with a neutral pedestal.
   Neutral (not gold-tinted) so colored / branded product images read true. */
.dream-home .product__top {
    block-size: clamp(170px, 18vw, 240px);
    max-block-size: none;
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 18px 10px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(183, 136, 69, .05), transparent 70%),
        linear-gradient(180deg, var(--bp-surface), var(--bp-bg-tint));
    border-bottom: 1px solid var(--bp-line-soft);
}

.dream-home .product__thumbnail {
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* International image handling — works for ANY aspect / size:
   - object-fit:contain → never crop, never distort (square, portrait, landscape)
   - width/height auto + max 100% → scale DOWN to fit; small images stay crisp
     (no blurry upscaling)
   - drop-shadow (not box-shadow) → follows the real image shape AND respects
     transparent PNG silhouettes (common for non-book products) */
.dream-home .product__thumbnail img {
    max-block-size: 100%;
    max-inline-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 6px;
    filter:
        drop-shadow(0 10px 18px rgba(28, 22, 19, .30))
        drop-shadow(0 2px 4px rgba(28, 22, 19, .16));
    transition: transform .4s var(--bp-ease), filter .4s var(--bp-ease);
}
.dream-home .product:hover .product__thumbnail img {
    transform: translateY(-5px) scale(1.04);
    filter:
        drop-shadow(0 18px 30px rgba(28, 22, 19, .38))
        drop-shadow(0 4px 8px rgba(28, 22, 19, .2));
}

/* Body: tidy spacing + 2-line title so every card aligns */
.dream-home .product__summary {
    padding: 6px 12px 14px;
    gap: 6px;
}
.dream-home .product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;       /* override theme's .text-truncate (nowrap) */
    overflow: hidden;
    min-block-size: 2.4em;     /* reserve 2 lines → equal card heights */
    line-height: 1.2;
    font-size: .95rem;
    text-align: center;
}
.dream-home .product__price {
    margin-block-start: 2px;
    font-size: 1rem;
}

/* Smaller cover stage on phones (2-up grid) */
@media (max-width: 575.98px) {
    .dream-home .product__top {
        block-size: 158px;
        padding: 14px 14px 8px;
    }
}

/* Reduced-motion: no cover lift */
@media (prefers-reduced-motion: reduce) {
    .dream-home .product:hover .product__thumbnail img {
        transform: none !important;
    }
}

/* ============================================================================
   CATEGORY CAROUSEL CARD (home categories slider) — _product-category-card
   Uses .store-product / .store-product__top with .img-fit (cover) and no fixed
   height, so short images make uneven cards. Lock a fixed square stage, center,
   contain (no crop/upscale) — same international handling as the main card.
   ========================================================================== */
.dream-home .store-product__top {
    inline-size: clamp(128px, 15vw, 158px);
    block-size: clamp(128px, 15vw, 158px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(183, 136, 69, .05), transparent 70%),
        linear-gradient(180deg, var(--bp-surface), var(--bp-bg-tint));
    border: 1px solid var(--bp-line) !important;
    border-radius: var(--bp-radius) !important;
}
.dream-home .store-product__top img {
    inline-size: auto !important;
    block-size: auto !important;
    max-inline-size: 100% !important;
    max-block-size: 100% !important;
    object-fit: contain !important;     /* override .img-fit (cover) */
    aspect-ratio: auto !important;      /* override .aspect-1 */
    border-radius: 5px;
    filter: drop-shadow(0 8px 14px rgba(28, 22, 19, .26));
    transition: transform .4s var(--bp-ease), filter .4s var(--bp-ease);
}
.dream-home .store-product:hover .store-product__top img {
    transform: translateY(-4px) scale(1.05);
    filter: drop-shadow(0 14px 24px rgba(28, 22, 19, .34));
}
.dream-home .store-product .product__new-price { color: var(--bp-brand); }

@media (prefers-reduced-motion: reduce) {
    .dream-home .store-product:hover .store-product__top img { transform: none !important; }
}

/* ============================================================================
   RTL CAROUSELS — visual mirror (Swiper stays internally LTR)
   Swiper 8.4.6 native RTL is broken (loop/finite mis-translate → blank or
   white-space). So Swiper runs LTR (loop is seamless) and we mirror the strip:
   flip the host horizontally, then un-flip each slide so its content stays
   upright. Result: right-to-left order + direction WITH a working infinite loop,
   no trailing white-space, no jump-back.
   ========================================================================== */
[dir="rtl"] .dream-home .swiper {
    transform: scaleX(-1);
}
[dir="rtl"] .dream-home .swiper > .swiper-wrapper > .swiper-slide {
    transform: scaleX(-1);
}
/* Pagination bullets read left-to-right visually after the flip — restore order */
[dir="rtl"] .dream-home .swiper > .swiper-pagination {
    transform: scaleX(-1);
}

/* ----------------------------------------------------------------------------
   11. Product-list filter sidebar — accordion groups, sticky desktop,
       in-list search, segmented product-type pills. RTL-safe (logical props),
       dark-mode via dream tokens. Markup: product/view.blade.php
---------------------------------------------------------------------------- */

.dream-filter-aside {
    border: 1px solid var(--dream-line);
    border-radius: var(--dream-radius-lg);
    box-shadow: var(--dream-shadow-sm);
    background: var(--dream-surface);
}

/* Sticky on desktop only — under 992px the theme turns it into an
   off-canvas drawer (style.css .filter-toggle-aside) */
@media (min-width: 992px) {
    .dream-filter-aside {
        position: sticky;
        top: 1rem;
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--dream-line) transparent;
    }
    .dream-filter-aside::-webkit-scrollbar { inline-size: 6px; }
    .dream-filter-aside::-webkit-scrollbar-thumb {
        background: var(--dream-line);
        border-radius: 999px;
    }
}

/* Header: title + clear-all */
.dream-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem .5rem;
    border-bottom: 1px solid var(--dream-line);
    position: sticky;
    top: 0;
    background: var(--dream-surface);
    z-index: 2;
    border-start-start-radius: var(--dream-radius-lg);
    border-start-end-radius: var(--dream-radius-lg);
}

.dream-filter-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: var(--bold, 700);
    color: var(--dream-ink);
    font-size: 1rem;
}

.dream-filter-title .bi {
    color: var(--dream-primary);
    font-size: .9375rem;
}

.dream-filter-clear {
    font-size: .75rem;
    font-weight: var(--semi-bold, 600);
    color: var(--dream-ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    transition: color .2s var(--dream-ease);
}

.dream-filter-clear:hover { color: var(--bs-secondary, #db3022); }

.dream-filter-aside .filter-aside-close {
    color: var(--dream-ink);
    min-inline-size: 2.25rem;
    min-block-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .2s var(--dream-ease);
}

.dream-filter-aside .filter-aside-close:hover { background: var(--dream-tint); }

/* Accordion groups */
.dream-filter-groups { padding: 0 .875rem .5rem; }

.dream-filter-group {
    border-bottom: 1px solid var(--dream-line);
}

.dream-filter-group:last-child { border-bottom: 0; }

.dream-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem .125rem;
    min-block-size: 2.25rem;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    font-size: .875rem;
    font-weight: var(--bold, 700);
    color: var(--dream-ink);
}

.dream-filter-summary::-webkit-details-marker,
.dream-filter-summary::marker { display: none; content: ""; }

.dream-filter-summary:hover { color: var(--dream-primary); }

.dream-filter-chevron {
    color: var(--dream-ink-soft);
    font-size: .75rem;
    transition: transform .25s var(--dream-ease);
    flex-shrink: 0;
}

details[open] > .dream-filter-summary .dream-filter-chevron {
    transform: rotate(180deg);
}

.dream-filter-body { padding: 0 0 .625rem; }

/* Mini labels + price inputs */
.dream-filter-mini-label {
    display: block;
    font-size: .6875rem;
    font-weight: var(--semi-bold, 600);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dream-ink-soft);
    margin-block-end: .25rem;
}

.dream-filter-dash {
    color: var(--dream-ink-soft);
    padding-block-end: .5rem;
}

.dream-filter-body .form-control--sm {
    border-radius: var(--dream-radius-sm);
    border-color: var(--dream-line);
    font-variant-numeric: tabular-nums;
}

.dream-filter-body .form-control--sm:focus {
    border-color: var(--dream-primary);
    box-shadow: 0 0 0 3px var(--dream-tint);
}

.dream-filter-body .action-search-products-by-price {
    border-radius: var(--dream-radius-sm);
    font-weight: var(--semi-bold, 600);
}

/* In-list search */
.dream-filter-search {
    position: relative;
    margin-block-end: .5rem;
}

.dream-filter-search .bi {
    position: absolute;
    inset-inline-start: .75rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--dream-ink-soft);
    font-size: .8125rem;
    pointer-events: none;
}

.dream-filter-search input {
    inline-size: 100%;
    block-size: 2rem;
    padding-inline: 2rem .625rem;
    font-size: .8125rem;
    color: var(--dream-ink);
    background: var(--bs-light, #f6f6f6);
    border: 1px solid transparent;
    border-radius: var(--dream-radius-sm);
    transition: border-color .2s var(--dream-ease), background .2s var(--dream-ease);
}

.dream-filter-search input:focus {
    outline: none;
    background: var(--dream-surface);
    border-color: var(--dream-primary);
    box-shadow: 0 0 0 3px var(--dream-tint);
}

.dream-filter-search input::placeholder { color: var(--dream-ink-soft); }

/* List rows — compact one-line rows, tint hover, soft count badges */
.dream-filter-body .common-nav > li > div,
.dream-filter-body .common-nav .flex-between-gap-3 {
    border-radius: var(--dream-radius-sm);
    padding: .25rem .375rem;
    min-block-size: 1.875rem;
    transition: background .15s var(--dream-ease);
}

/* Keep name + count on one line (base .flex-between-gap-3 wraps) */
.dream-filter-body .common-nav > li > div,
.dream-filter-body .common-nav .flex-between-gap-3 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .375rem;
}

.dream-filter-body .common-nav .flex-between-gap-3 .custom-checkbox {
    flex: 1 1 auto;
    min-inline-size: 0;
    inline-size: auto !important; /* override w-75 so the name can fill */
    margin-block-end: 0;
}

.dream-filter-body .common-nav .flex-between-gap-3 .badge {
    flex-shrink: 0;
}

.dream-filter-body .common-nav > li > div:hover,
.dream-filter-body .common-nav .flex-between-gap-3:hover {
    background: var(--dream-tint);
}

/* Names never wrap — single line with ellipsis */
.dream-filter-body .common-nav li > div > a,
.dream-filter-body .common-nav .custom-checkbox,
.dream-filter-body .common-nav .custom-checkbox a {
    flex: 1 1 auto;
    min-inline-size: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.dream-filter-body .common-nav a {
    color: var(--dream-ink-soft);
    font-size: .8125rem;
    line-height: 1.4;
    transition: color .15s var(--dream-ease);
}

/* Tighter nested category indentation */
.dream-filter-body .common-nav .sub_menu {
    padding-inline-start: .625rem;
}

.dream-filter-body .common-nav a:hover,
.dream-filter-body .common-nav a.text-primary {
    color: var(--dream-primary) !important;
}

.dream-filter-body .badge.bg-badge {
    background: var(--dream-tint) !important;
    color: var(--dream-primary) !important;
    font-weight: var(--semi-bold, 600);
    font-variant-numeric: tabular-nums;
    font-size: .6875rem;
    padding: .2em .55em;
    min-inline-size: 1.5rem;
}

/* Segmented product-type pills */
.dream-type-pills {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    background: var(--bs-light, #f6f6f6);
    border-radius: var(--dream-radius-sm);
}

.dream-type-pill {
    flex: 1 1 0;
    border: 0;
    background: transparent;
    border-radius: calc(var(--dream-radius-sm) - .125rem);
    padding: .375rem .25rem;
    min-block-size: 1.875rem;
    font-size: .8125rem;
    font-weight: var(--semi-bold, 600);
    color: var(--dream-ink-soft);
    cursor: pointer;
    transition: background .2s var(--dream-ease), color .2s var(--dream-ease),
        box-shadow .2s var(--dream-ease);
}

.dream-type-pill:hover { color: var(--dream-ink); }

.dream-type-pill.active {
    background: var(--dream-surface);
    color: var(--dream-primary);
    box-shadow: var(--dream-shadow-xs);
}

/* Reviews block (ajax partial) aligns with group rhythm */
.dream-filter-reviews { padding-block: .625rem .625rem; }

/* Dark mode: search field surface */
body[theme="dark"] .dream-filter-search input,
body[theme="dark"] .dream-type-pills {
    background: rgba(255, 255, 255, .06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dream-filter-chevron,
    .dream-type-pill,
    .dream-filter-clear,
    .dream-filter-search input { transition: none; }
}

/* ----------------------------------------------------------------------------
   12. Image loading shimmer — skeleton placeholder shown as the <img>
       background until the file arrives (class added by the head script in
       layouts/app.blade.php, removed on load/error). Classic sweeping
       highlight over a soft neutral base; GPU-cheap (background-position
       only), RTL-aware, dark-mode variant, reduced-motion safe.
---------------------------------------------------------------------------- */

img.dream-img-loading {
    background-color: #eceef1;
    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 36%,
        rgba(255, 255, 255, .75) 50%,
        rgba(255, 255, 255, 0) 64%);
    background-size: 200% 100%;
    background-position: 150% 0;
    background-repeat: no-repeat;
    border-radius: var(--dream-radius-sm);
    animation: dream-img-shimmer 1.5s var(--dream-ease) infinite;
    min-block-size: 2.5rem;
}

@keyframes dream-img-shimmer {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

/* Sweep follows reading direction */
[dir="rtl"] img.dream-img-loading {
    animation-direction: reverse;
}

body[theme="dark"] img.dream-img-loading {
    background-color: #262b31;
    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 36%,
        rgba(255, 255, 255, .08) 50%,
        rgba(255, 255, 255, 0) 64%);
}

@media (prefers-reduced-motion: reduce) {
    img.dream-img-loading { animation: none; }
}

/* ==========================================================================
   Header live-search results + skeleton/shimmer loader
   ========================================================================== */
.search-result-box .search-result-list { max-height: 60vh; overflow-y: auto; margin: 0; padding: 0 !important; list-style: none; }
.search-result-item { padding-right: 0 !important; padding-left: 0 !important; }
.search-result-item a { color: var(--bp-ink, #1C1613); transition: background .15s ease; }
.search-result-item a:hover { background: var(--bp-accent-soft, #E8D4AD); }
.search-result-name { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.search-result-meta { white-space: normal; overflow-wrap: anywhere; }
.search-result-thumb {
    width: 42px; height: 52px; border-radius: 6px; overflow: hidden;
    background: var(--bp-bg-tint, #f5f1ea); display: flex; align-items: center; justify-content: center;
}
.search-result-thumb img { width: 100%; height: 100%; object-fit: contain; }
.search-result-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.search-result-meta { font-size: 11px; line-height: 1.2; }

/* skeleton shimmer */
.search-skel {
    position: relative; overflow: hidden; display: block;
    background: #e9e6e1; border-radius: 6px;
}
.search-skel-thumb { width: 42px; height: 52px; flex-shrink: 0; }
.search-skel-line { height: 11px; border-radius: 4px; }
.search-skel::after {
    content: ""; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.65) 50%,
        rgba(255,255,255,0) 100%);
    animation: searchShimmer 1.2s infinite;
}
@keyframes searchShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .search-skel::after { animation: none; }
}