/* ============================================================
 * Bazeh Sliders — shared primitives
 * Scope: every element under .bzh-section
 * Theme: orange #F05823 + green #1a5d3a, RTL, Vazirmatn
 * ============================================================ */

.bzh-section,
.bzh-section * {
    box-sizing: border-box;
    font-family: "Vazirmatn", "Vazir", Tahoma, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bzh-section {
    --bzh-sp:        #F05823;
    --bzh-sp2:       #ff7a45;
    --bzh-ss:        #1a5d3a;
    --bzh-ss2:       #2d8a5a;
    --bzh-white:     #ffffff;
    --bzh-bg:        #fafbfc;
    --bzh-text:      #0f172a;
    --bzh-muted:     #64748b;
    --bzh-border:    rgba(15,23,42,0.06);
    --bzh-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.05);
    --bzh-shadow-md: 0 24px 50px rgba(240,88,35,0.18), 0 10px 22px rgba(15,23,42,0.08);
    --bzh-grad:      linear-gradient(135deg, #F05823 0%, #ff7a45 100%);
    --bzh-grad-mix:  linear-gradient(135deg, #F05823 0%, #1a5d3a 100%);
    --bzh-radius:    22px;
    --bzh-radius-sm: 14px;
    --bzh-ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --bzh-transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);

    direction: rtl;
    width: 100%;
    padding: 28px 0 48px;
    margin: 30px 0;
    position: relative;
    color: var(--bzh-text);
}

/* Ambient brand-tinted glow behind every section, unless disabled */
.bzh-section:not(.bzh-section--hero):not(.bzh-section--stats)::before,
.bzh-section:not(.bzh-section--hero):not(.bzh-section--stats)::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
    z-index: 0;
}
.bzh-section:not(.bzh-section--hero):not(.bzh-section--stats)::before {
    top: -40px; right: 8%;
    background: radial-gradient(circle, rgba(240,88,35,0.08) 0%, transparent 70%);
}
.bzh-section:not(.bzh-section--hero):not(.bzh-section--stats)::after {
    bottom: 0; left: 8%;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(26,93,58,0.07) 0%, transparent 70%);
}

/* ── Section header (title / subtitle / "view all" CTA) ─────── */
.bzh-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}
.bzh-section-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--bzh-ss);
    letter-spacing: -0.3px;
    position: relative;
    display: inline-block;
}
.bzh-section-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 0;
    width: 42px;
    height: 3px;
    border-radius: 2px;
    /* Admin-selectable divider colour. Falls back to the brand gradient
       so un-configured sections look identical to pre-v1.7 releases. */
    background: var(--bzh-divider, var(--bzh-grad));
}
.bzh-section-subtitle {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--bzh-muted);
    font-weight: 500;
}
.bzh-section-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 40px;
    background: rgba(240,88,35,0.08);
    border: 1px solid rgba(240,88,35,0.2);
    color: var(--bzh-sp);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--bzh-transition);
}
.bzh-section-cta svg { width: 16px; height: 16px; fill: currentColor; transition: transform 0.3s var(--bzh-ease); }
.bzh-section-cta:hover {
    background: var(--bzh-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(240,88,35,0.35);
    transform: translateY(-2px);
}
.bzh-section-cta:hover svg { transform: translateX(-3px); }

/* ── Slider scaffolding (track / clip / wrapper / nav / progress) ── */
.bzh-slider-track {
    position: relative;
    width: 100%;
    padding: 0 60px;
    z-index: 1;
}
.bzh-slider-clip {
    overflow: hidden;
    padding: 32px 0 60px;
    margin: -32px 0 -60px;
}
.bzh-swiper {
    overflow: visible !important;
    width: 100%;
}
.bzh-swiper .swiper-wrapper { align-items: stretch; }
.bzh-swiper .swiper-slide   { height: auto; display: flex; padding: 0 9px; }

.bzh-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: var(--bzh-transition);
    box-shadow:
        0 8px 24px rgba(15,23,42,0.12),
        0 2px 6px rgba(15,23,42,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9);
    padding: 0;
    isolation: isolate;
}
.bzh-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--bzh-grad);
    opacity: 0;
    transition: opacity 0.35s var(--bzh-ease);
    z-index: -1;
}
.bzh-nav:hover {
    border-color: transparent;
    box-shadow: 0 12px 32px rgba(240,88,35,0.45), 0 4px 10px rgba(240,88,35,0.22);
    transform: translateY(-50%) scale(1.12);
}
.bzh-nav:hover::before { opacity: 1; }
.bzh-nav:active { transform: translateY(-50%) scale(1.04); }
.bzh-nav svg {
    width: 22px;
    height: 22px;
    fill: var(--bzh-text);
    transition: fill 0.3s ease, transform 0.3s var(--bzh-ease);
}
.bzh-nav:hover svg { fill: #fff; }
.bzh-nav-prev:hover svg { transform: translateX(-3px); }
.bzh-nav-next:hover svg { transform: translateX(3px); }
.bzh-nav-prev { left: 2px; }
.bzh-nav-next { right: 2px; }
.bzh-nav.swiper-button-disabled { opacity: 0.3; cursor: not-allowed; transform: translateY(-50%) !important; }
.bzh-nav.swiper-button-disabled:hover::before { opacity: 0; }
.bzh-nav.swiper-button-disabled:hover svg { fill: var(--bzh-text); }

/* Theme/Woo `button { border-color }` overrides (red square frames on nav). */
button.bzh-nav,
.bzh-section button.bzh-nav,
.woocommerce button.bzh-nav,
.elementor button.bzh-nav {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1e293b !important;
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.12),
        0 2px 6px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    outline: none !important;
    line-height: 0 !important;
}
button.bzh-nav:focus,
button.bzh-nav:active {
    border-color: rgba(255, 255, 255, 0.85) !important;
    outline: none !important;
}
button.bzh-nav:focus-visible {
    outline: 3px solid rgba(240, 88, 35, 0.35) !important;
    outline-offset: 2px;
    border-color: transparent !important;
}
button.bzh-nav svg {
    fill: #1e293b !important;
}
button.bzh-nav:hover:not(.swiper-button-disabled) svg {
    fill: #fff !important;
}

.bzh-progress {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 3px;
    margin: 26px auto 0;
    background: rgba(15,23,42,0.08);
    border-radius: 40px;
    overflow: hidden;
    z-index: 1;
}
.bzh-progress-bar {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: 6%;
    background: var(--bzh-grad-mix);
    border-radius: 40px;
    transition: width 0.4s var(--bzh-ease);
    box-shadow: 0 0 10px rgba(240,88,35,0.4);
}

/* ── Skeleton loaders ───────────────────────────────────────── */
/* IMPORTANT: the skeleton MUST mirror the hydrated slider's horizontal
   padding + inter-card gap so cards don't visibly jump or resize when
   Swiper replaces the placeholder. Track uses `0 60px` (desktop) with
   18px effective gap per slide (9px x 2 swiper-slide padding). */
.bzh-skeleton {
    display: grid;
    /* Column count is admin-tunable: the section may inject
       `--bzh-sk-cols-d` (desktop), `--bzh-sk-cols-t` (tablet) and
       `--bzh-sk-cols-m` (mobile) custom properties via inline style
       to match the Swiper's slidesPerView. When no override is set,
       the shortcode-specific fallback kicks in via `.bzh-skeleton--<type>`
       rules below. */
    grid-template-columns: repeat(var(--bzh-sk-cols-d, 4), 1fr);
    gap: 18px;
    padding: 0 60px;
    position: relative;
    z-index: 1;
}
/* Testimonials ship slidesPerView:3 on desktop (see breakpoints in
   testimonials-slider.php). The shared 4-col skeleton produced an empty
   cell on the left — match the real row with 3 cols instead. Still
   overridable via `--bzh-sk-cols-d`. */
.bzh-skeleton--testimonial { grid-template-columns: repeat(var(--bzh-sk-cols-d, 3), 1fr); }
/* Category tiles render in a wider row — 5 up on desktop. */
.bzh-skeleton--category { grid-template-columns: repeat(var(--bzh-sk-cols-d, 5), 1fr); }
/* Section is "loading" until JS adds .is-hydrated. Track is hidden while
   loading, skeleton is hidden once hydrated.
   Historical note: this used to be `position: absolute; left: -9999px` to
   "park" the track off-screen while keeping it in the DOM. That worked as
   long as a 2.5s watchdog forced every still-loading section into
   `.is-fallback` shortly after DOMContentLoaded — the off-screen track
   never lingered. Once we removed that blanket watchdog (multi-slider
   pages legitimately stay loading until the user scrolls), the -9999px
   parking hack started accumulating: each unvisited slider contributed
   a 9999px absolute-positioned box, and since `<body>` has default
   `overflow-x: visible`, the browser happily extended the horizontal
   scrollable region to cover them, producing a huge empty strip next to
   the page. `display: none` is the simpler, overflow-safe answer — the
   sibling `.bzh-skeleton` keeps the layout slot occupied, and
   `hydrate()` removes `.is-loading` BEFORE constructing Swiper so
   measurement still happens against a laid-out container. */
.bzh-section.is-loading .bzh-slider-track { display: none; }
.bzh-section.is-revealed .bzh-skeleton,
.bzh-section.is-hydrated .bzh-skeleton    { display: none; }
.bzh-section.is-revealed .bzh-slider-track,
.bzh-section.is-hydrated .bzh-slider-track { display: block; }

/* ── Fallback layout ────────────────────────────────────────
 * Applied when Swiper is unavailable (draft-page preview inside the
 * block-editor iframe, very slow networks, watchdog fired after 2.5s).
 * Turns the slider into a native horizontal scroll row so the section
 * still looks coherent instead of stacking slides vertically. */
.bzh-section.is-fallback .bzh-slider-clip {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 8px 16px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    /* `touch-action: pan-x` tells the browser this element is a horizontal
       scroller first and foremost. Without it, some Android builds wait
       300ms to see if the gesture is a tap, a vertical page-scroll, or a
       horizontal swipe — which is exactly the "hard to scroll on phones"
       complaint we get when there are multiple fallback sliders stacked
       on a page. `pan-x` unlocks immediate horizontal panning and keeps
       vertical page-scroll routed to the outer body. */
    touch-action: pan-x;
    scrollbar-width: thin;
    scrollbar-color: rgba(240,88,35,0.4) transparent;
    /* Hint the user that the strip is grabbable with a mouse. Paired with
       the `wireFallbackDrag()` JS helper that translates mouse-pointer
       drags into `scrollLeft` updates so cards can be dragged
       horizontally, matching the behaviour of real Swiper sliders.
       Touch devices keep native overflow momentum — they don't see the
       cursor change. */
    cursor: grab;
    /* Kill iOS/Chrome's long-press text-selection highlight while dragging
       (mouse-drag sometimes lands on a product title and selects it). */
    -webkit-user-select: none;
            user-select: none;
}
/* Hide the WebKit scrollbar on touch viewports: the thin default scroll
   indicator draws a distracting strip below every card row and, on iOS,
   can overlap the card shadow. Mouse-user scrollbar stays visible via
   `scrollbar-width: thin` above for the "you can scroll this" affordance. */
@media (hover: none) and (pointer: coarse) {
    .bzh-section.is-fallback .bzh-slider-clip::-webkit-scrollbar { display: none; }
    .bzh-section.is-fallback .bzh-slider-clip { scrollbar-width: none; }
}
.bzh-section.is-fallback .bzh-slider-clip.is-grabbing {
    cursor: grabbing;
    /* `scroll-behavior: auto` overrides any theme-level `scroll-behavior: smooth`
       that would otherwise lerp every `scrollLeft` assignment we make during
       the drag, producing a laggy "catching up" feel. */
    scroll-behavior: auto;
}
/* Prevent product links (<a>) from hijacking the drag with the browser's
   native image-drag / link-drag ghost. Same defence Swiper uses. */
.bzh-section.is-fallback .bzh-slider-clip img,
.bzh-section.is-fallback .bzh-slider-clip a {
    -webkit-user-drag: none;
            user-drag: none;
}
.bzh-section.is-fallback .bzh-swiper {
    overflow: visible !important;
    width: max-content;
    min-width: 100%;
}
.bzh-section.is-fallback .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap;
    transform: none !important;
    gap: 12px;
    width: max-content;
}
.bzh-section.is-fallback .swiper-slide {
    flex: 0 0 auto;
    width: clamp(180px, 28vw, 260px);
    padding: 0;
}
.bzh-section.is-fallback .bzh-slider-track { padding: 0 16px; }
.bzh-section.is-fallback .bzh-nav,
.bzh-section.is-fallback .bzh-progress,
.bzh-section.is-fallback .swiper-pagination { display: none; }
/* Hero + stats have different internals; in fallback just show the first slide/row. */
.bzh-section--hero.is-fallback .swiper-slide:not(:first-child),
.bzh-section--stats.is-fallback .swiper-slide:not(:first-child) { display: none; }
.bzh-section--hero.is-fallback .swiper-slide { width: 100%; }
/* Category tiles render a min-width of their own — let them flow naturally. */
.bzh-section--category.is-fallback .swiper-slide { width: auto; }

.bzh-skeleton-card {
    background: var(--bzh-white);
    border-radius: var(--bzh-radius);
    border: 1px solid var(--bzh-border);
    overflow: hidden;
    box-shadow: var(--bzh-shadow-sm);
}
.bzh-skeleton-image,
.bzh-skeleton-line {
    background: linear-gradient(90deg,#f1f3f5 25%,#e8ebed 50%,#f1f3f5 75%);
    background-size: 200% 100%;
    animation: bzh-shimmer 1.8s ease-in-out infinite;
}
.bzh-skeleton-image { width: 100%; aspect-ratio: 1; }
.bzh-skeleton-content { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.bzh-skeleton-line { height: 14px; border-radius: 6px; }
.bzh-skeleton-line:nth-child(1) { width: 100%; }
.bzh-skeleton-line:nth-child(2) { width: 80%; }
.bzh-skeleton-line:nth-child(3) { width: 55%; height: 24px; margin-top: 6px; border-radius: 40px; }
@keyframes bzh-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ── Product card (shared by featured/bestsellers/sale/new) ── */
.bzh-card {
    display: flex;
    flex-direction: column;
    background: var(--bzh-white);
    border-radius: var(--bzh-radius);
    border: 1px solid var(--bzh-border);
    box-shadow: var(--bzh-shadow-sm);
    text-align: center;
    transition: var(--bzh-transition);
    overflow: hidden;
    position: relative;
    height: 100%;
    text-decoration: none;
    width: 100%;
    isolation: isolate;
    color: inherit;
}
/* Slider product cards: outer <div> + inner link (invalid <a> nesting broke clicks/layout). */
.bzh-card.bzh-card--product:not(.bzh-card--shop) .bzh-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    color: inherit;
    text-decoration: none;
    text-align: center;
}
.bzh-card-extra.bzh-card-extra--review.js-bzh-review-badge {
    cursor: pointer;
}
.bzh-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--bzh-grad-mix);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s var(--bzh-ease);
    z-index: 2;
}
.bzh-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--bzh-radius);
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(240,88,35,0.45), rgba(26,93,58,0.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s var(--bzh-ease);
    pointer-events: none;
    z-index: 3;
}
/* Hover: keep it ultra-subtle. No lift, no scale, no top accent reveal, no
   gradient-border flash. Just a softer/deeper shadow on all four sides so
   nothing bleeds under the slider-clip edges. This matches the "static but
   polished" brief the user asked for after multiple revisions. */
.bzh-swiper .swiper-slide:hover .bzh-card {
    box-shadow: 0 6px 14px rgba(15,23,42,0.05), 0 18px 30px rgba(15,23,42,0.07);
    border-color: transparent;
}
/* Top accent bar + gradient border were reveal-on-hover before. They were
   the "cutting edge from top" the user complained about — disabling the
   reveal transitions entirely so the card never visibly changes shape. */
.bzh-card::after  { display: none !important; }
.bzh-card::before { display: none !important; }

.bzh-card-badge,
.bzh-card-rank {
    position: absolute;
    top: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 5px 12px;
    border-radius: 40px;
    z-index: 4;
    color: #fff;
    background: var(--bzh-grad);
    box-shadow: 0 4px 12px rgba(240,88,35,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
.bzh-card-badge { right: 14px; }
.bzh-card-rank  { left: 14px; background: var(--bzh-grad-mix); box-shadow: 0 4px 12px rgba(26,93,58,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }

.bzh-card-image-wrap {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bzh-white);
    padding: 10px;
    position: relative;
}

/* بج‌های اضافه کارت (جدید / امتیاز / نظر) — داخل تصویر، پایین */
.bzh-card-meta-badges {
    position: absolute;
    z-index: 5;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
}
.bzh-card-meta-badges .bzh-card-extra {
    pointer-events: auto;
}
.bzh-card-extra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
.bzh-card-extra--new {
    background: linear-gradient(135deg, #22c55e, #15803d);
}
.bzh-card-extra--new.bzh-card-extra--ribbon {
    border-radius: 2px 8px 8px 2px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 70%);
    padding-inline: 10px 8px;
}
.bzh-card-extra--new.bzh-card-extra--dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    overflow: hidden;
    text-indent: -9px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.bzh-card-extra--credits {
    background: linear-gradient(135deg, #6366f1, #4338ca);
    cursor: help;
}
.bzh-card-extra--review {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff !important;
}
.bzh-card-extra--review:hover {
    filter: brightness(1.06);
}
/* Group-buy — teal pill; high specificity so theme/Elementor cannot strip background */
.bzh-card-meta-badges .bzh-card-extra.bzh-card-extra--group-buy,
.bzh-card-meta-badges > .bzh-gb-badge:not(.bzh-gb-badge--pill) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    border-radius: 999px;
    color: #fff !important;
    white-space: nowrap;
    max-width: calc(100% - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 45%, #14b8a6 100%) !important;
    box-shadow:
        0 2px 10px rgba(15, 118, 110, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    -webkit-background-clip: border-box;
    background-clip: border-box;
}
.bzh-card-extra--group-buy {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 45%, #14b8a6 100%);
    color: #fff;
    white-space: nowrap;
    max-width: calc(100% - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    box-shadow:
        0 2px 10px rgba(15, 118, 110, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.bzh-card-meta-badges .bzh-card-extra.bzh-card-extra--group-buy.is-completed,
.bzh-card-meta-badges > .bzh-gb-badge.bzh-gb-badge--completed {
    background: linear-gradient(135deg, #475569, #94a3b8) !important;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.35);
}
.bzh-card-extra--group-buy.is-completed {
    background: linear-gradient(135deg, #475569, #94a3b8);
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.35);
}
/* Specificity bump: many WooCommerce / storefront themes apply
   `img { border-radius: 0 }` on product image wrappers. Using the parent
   class + `!important` keeps our 5px radius locked in. */
.bzh-card .bzh-card-image-wrap .bzh-card-image,
.bzh-section .bzh-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 5px !important;
}
/* Side-strip thumbs must stay circular (theme `img { border-radius:0 }` overrides). */
.bzh-section .bzh-side-strip a.bzh-side-item,
.bzh-section .bzh-side-strip .bzh-side-item-media {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
}
.bzh-section .bzh-side-strip .bzh-side-item-media {
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.bzh-section .bzh-side-strip a.bzh-side-item img {
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* Hover zoom + orange tint + shimmer sweep intentionally disabled per brand feedback;
   the card still lifts via translateY + gets a border glow, which is enough motion. */

.bzh-card-body {
    padding: 18px 16px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 12px;
    background: linear-gradient(to bottom, var(--bzh-white) 0%, var(--bzh-bg) 100%);
}
.bzh-card-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--bzh-text);
    line-height: 1.7;
    min-height: 2.9em;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.3s ease;
    letter-spacing: -0.1px;
}
.bzh-swiper .swiper-slide:hover .bzh-card-title { color: var(--bzh-sp); }

.bzh-card-price-wrap {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}
.bzh-card-price-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    direction: rtl;
}
.bzh-card-price-row .bzh-card-price {
    flex: 0 0 auto;
}
.bzh-card-price-row .bzh-price-equiv--shop {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    justify-content: center;
}
.bzh-card-price-wrap .bzh-price-equiv,
.bzh-card-price-row .bzh-price-equiv {
    font-size: 11px;
    font-weight: 600;
    color: var(--bzh-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1.35;
    white-space: nowrap;
    max-width: 100%;
}
.bzh-card-price-wrap .bzh-price-equiv__sym,
.bzh-card-price-row .bzh-price-equiv__sym {
    font-weight: 800;
    font-size: 12px;
    color: var(--bzh-sp, #f05823);
}
.bzh-card-price-wrap .bzh-price-equiv__text,
.bzh-card-price-row .bzh-price-equiv__text {
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    text-align: center;
}
.bzh-card-price-wrap .bzh-price-equiv__icon-emoji { font-size: 14px; }
.bzh-card-price-wrap .bzh-price-equiv__icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.bzh-card-price-wrap .bzh-price-equiv__icon-svg {
    width: 18px;
    height: 18px;
}
.bzh-card-price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: linear-gradient(135deg, rgba(240,88,35,0.08) 0%, rgba(240,88,35,0.04) 100%);
    border-radius: 40px;
    border: 1px solid rgba(240,88,35,0.2);
    transition: var(--bzh-transition);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Price pill: no shimmer, no lift. Quiet, readable pill. */
.bzh-card-price::before { display: none; }
.bzh-card-price,
.bzh-card-price ins {
    color: var(--bzh-sp);
    background: none;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    position: relative; z-index: 1;
}
.bzh-card-price del {
    color: var(--bzh-muted);
    font-size: 12px;
    font-weight: 500;
    text-decoration: line-through;
    opacity: 0.6;
    position: relative; z-index: 1;
}

.bzh-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--bzh-muted);
    font-size: 14px;
    background: var(--bzh-bg);
    border: 1px dashed var(--bzh-border);
    border-radius: var(--bzh-radius-sm);
}

/* ── Rating row (shared by shop cards, product title, any consumer of
   Bazeh_Renderer::render_rating_row). Must live in the shared bundle
   because render_rating_row is a cross-cutting renderer — putting it
   in a module-specific stylesheet meant unstyled stars anywhere the
   module CSS wasn't enqueued. Uses fill="currentColor" + two stacked
   layers (gray underneath, orange on top) so partial ratings render
   pixel-accurate on both light and dark card templates. */
.bzh-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 8px;
    justify-content: center;
    font-size: 12px;
    color: var(--bzh-muted);
    line-height: 1;
}
.bzh-card-rating.bzh-card-rating--empty { opacity: 0.75; }
.bzh-rating-stars {
    position: relative;
    display: inline-flex;
    gap: 1px;
    line-height: 1;
    /* Explicit size so the absolute fill overlay has a stable frame
       even when themes collapse flex containers with weird line-heights. */
    width: 74px;
    height: 14px;
}
.bzh-rating-stars-empty,
.bzh-rating-stars-fill {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}
.bzh-rating-stars-empty {
    /* Neutral gray that reads on both light and dark card templates
       (neon / shadow / etc). currentColor would otherwise inherit the
       card text color — often near-white on dark templates — making
       empty stars indistinguishable from filled ones. */
    color: rgba(148, 163, 184, 0.55);
}
.bzh-rating-stars-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Logical start edge so fill grows from the first star in both
       LTR and RTL. Avoids the `inset:0 + width:X%` RTL ambiguity. */
    inset-inline-start: 0;
    overflow: hidden;
    width: 0;
    color: #f59e0b;
    pointer-events: none;
}
.bzh-rating-star {
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    fill: currentColor !important;
    vertical-align: middle;
}
.bzh-rating-star path { fill: currentColor !important; }
.bzh-rating-count {
    font-weight: 600;
    color: var(--bzh-muted);
    font-size: 11px;
}

/* ── Add-to-cart button (rendered by Bazeh_Renderer::render_atc_button).
   Lives in the shared bundle because `shop_card` — the card primitive
   that uses this button — is consumed by the shop page, all slider
   rows (sale, bestsellers, categories), AND the new recommendation
   rows. When these styles lived only in bazeh-shop.css, the SVG icon
   had no size constraint anywhere else and rendered at its intrinsic
   viewBox size (huge). Selectors include :link/:visited/:hover/:focus/
   :active so the button stays white when rendered as an <a> (variable
   / non-purchasable products) even against themes shipping
   `a { color:<brand blue> }` with high specificity. Colours use
   --bzh-sp / --bzh-sp2 (defined on .bzh-section) with brand-orange
   fallbacks so the same rules work outside a section (shop grid). */
.bzh-card-atc,
.bzh-card-atc:link,
.bzh-card-atc:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 14px 14px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--bzh-sp, #F05823), var(--bzh-sp2, #ff7a3d));
    color: #fff !important;
    font-family: "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(240, 88, 35, 0.24);
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    text-decoration: none !important;
    box-sizing: border-box;
}
.bzh-card-atc:hover,
.bzh-card-atc:focus,
.bzh-card-atc:active {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(240, 88, 35, 0.36);
    color: #fff !important;
    text-decoration: none !important;
}
/* Explicit width/height is CRITICAL — the SVG ships without intrinsic
   attrs (just a viewBox) so without these rules themes render it at
   100% of the container. `max-width` reins it in even if a theme CSS
   reset wipes our width. `!important` defeats theme utility classes. */
.bzh-card-atc .bzh-card-atc-icon,
.bzh-card-atc-icon {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    flex: 0 0 16px !important;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
}
.bzh-card-atc .bzh-card-atc-icon path,
.bzh-card-atc .bzh-card-atc-icon circle {
    stroke: currentColor;
    fill: none;
}
.bzh-card-atc-label { white-space: nowrap; color: #fff; }
.bzh-card-atc.is-loading { opacity: 0.7; pointer-events: none; }
.bzh-card-atc.is-added {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.28);
}
.bzh-card-atc.is-added::before {
    content: '✓';
    font-weight: 900;
    font-size: 14px;
}
.bzh-card-atc.is-added .bzh-card-atc-icon { display: none; }

/* "انتخاب گزینه‌ها" variant (rendered as <a> for variable / external /
   out-of-stock products). Same hard-override for white text/icon. */
.bzh-card-atc.bzh-card-atc--link,
.bzh-card-atc.bzh-card-atc--link:link,
.bzh-card-atc.bzh-card-atc--link:visited,
.bzh-card-atc.bzh-card-atc--link:hover,
.bzh-card-atc.bzh-card-atc--link:focus,
.bzh-card-atc.bzh-card-atc--link:active {
    background: #111827;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
    color: #fff !important;
    text-decoration: none !important;
}
.bzh-card-atc.bzh-card-atc--link:hover {
    background: #374151;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.32);
}
.bzh-card-atc.bzh-card-atc--link .bzh-card-atc-icon,
.bzh-card-atc.bzh-card-atc--link .bzh-card-atc-label {
    color: #fff !important;
}

/* ── Category tiles ─────────────────────────────────────────── */
.bzh-section--category .bzh-slider-track { padding: 0 52px; }
.bzh-section--category .bzh-slider-clip  { padding: 14px 0 20px; margin: -14px 0 -20px; }
/* Intrinsic-width slides for the 'auto' freeMode layout. Swiper's own
   inline width — set when the admin picks a numeric slides-per-view —
   is higher specificity and cleanly overrides this rule, giving editors
   a single switch: set desktop count to 0 for natural flow, or pick a
   number to force equal-width tiles at that viewport. */
.bzh-section--category .swiper-slide { width: auto; }
.bzh-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 10px 16px;
    border-radius: 20px;
    background: var(--bzh-white);
    border: 1px solid var(--bzh-border);
    text-decoration: none;
    color: var(--bzh-text);
    transition: var(--bzh-transition);
    text-align: center;
    min-width: 110px;
    box-shadow: var(--bzh-shadow-sm);
}
.bzh-cat-tile-image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 2px;
}
.bzh-cat-tile-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bzh-cat-tile-image--default {
    background: #fff;
    border: 1px dashed rgba(148,163,184,0.45);
    box-shadow: inset 0 2px 6px rgba(15,23,42,0.04);
}
.bzh-cat-tile-image .bzh-cat-default-svg {
    width: 68%; height: 68%;
    display: block;
    transition: transform 0.35s var(--bzh-ease);
}
.bzh-cat-tile:hover .bzh-cat-default-svg { transform: scale(1.1) rotate(-4deg); }
.bzh-cat-tile-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: var(--bzh-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s var(--bzh-ease);
}
.bzh-cat-tile-name { font-size: 13px; font-weight: 700; line-height: 1.4; }
.bzh-cat-tile-count { font-size: 11px; color: var(--bzh-muted); font-weight: 500; }
.bzh-cat-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(240,88,35,0.15); border-color: transparent; }
.bzh-cat-tile:hover .bzh-cat-tile-image::after { opacity: 1; }
.bzh-cat-tile:hover .bzh-cat-tile-name { color: var(--bzh-sp); }

/* ── Hero slider ────────────────────────────────────────────── */
.bzh-section--hero { padding: 0; margin: 0 0 30px; }
.bzh-hero-slide {
    position: relative;
    width: 100%;
    aspect-ratio: 21/9;
    min-height: 320px;
    overflow: hidden;
    border-radius: var(--bzh-radius);
}
.bzh-section--hero .bzh-hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    animation: bzh-hero-kenburns 12s ease-in-out infinite alternate;
}
.bzh-hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15,23,42,0.65) 0%, rgba(15,23,42,0.2) 60%, transparent 100%);
    z-index: 1;
}
.bzh-hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8% 8% 8% 40%;
    color: #fff;
    gap: 14px;
}
.bzh-hero-title { font-size: clamp(22px, 3.4vw, 44px); font-weight: 800; line-height: 1.3; margin: 0; letter-spacing: -0.5px; text-shadow: 0 2px 24px rgba(0,0,0,0.4); }
.bzh-hero-subtitle { font-size: clamp(14px, 1.6vw, 18px); font-weight: 500; margin: 0; max-width: 560px; opacity: 0.9; }
.bzh-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--bzh-grad);
    color: #fff;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 8px;
    width: fit-content;
    box-shadow: 0 12px 32px rgba(240,88,35,0.45);
    transition: var(--bzh-transition);
}
.bzh-hero-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(240,88,35,0.55); }
.bzh-hero-cta svg { width: 18px; height: 18px; fill: currentColor; }
@keyframes bzh-hero-kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }

.bzh-section--hero .swiper-pagination { bottom: 18px !important; left: 50% !important; right: auto !important; transform: translateX(-50%); z-index: 5; width: auto !important; }
.bzh-section--hero .swiper-pagination-bullet { width: 28px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.45); opacity: 1; transition: all 0.35s var(--bzh-ease); margin: 0 3px !important; }
.bzh-section--hero .swiper-pagination-bullet-active { width: 44px; background: var(--bzh-grad); box-shadow: 0 0 12px rgba(240,88,35,0.6); }

/* ── Flash sale overrides ──────────────────────────────────── */
.bzh-section--sale .bzh-section-title { color: #dc2626; }
.bzh-section--sale .bzh-section-title::after { background: linear-gradient(135deg, #dc2626, #F05823); }
.bzh-sale-countdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 40px;
    background: linear-gradient(135deg, #dc2626, #F05823);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-right: 12px;
    box-shadow: 0 8px 20px rgba(220,38,38,0.28);
}
.bzh-sale-countdown span { min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums; }
.bzh-sale-countdown em { opacity: 0.7; font-style: normal; }

/* ── Instructor cards ──────────────────────────────────────── */
.bzh-instructor-card {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: var(--bzh-radius);
    overflow: hidden;
    aspect-ratio: 3/4;
    width: 100%;
    text-decoration: none;
    color: #fff;
    transition: var(--bzh-transition);
    box-shadow: var(--bzh-shadow-sm);
    isolation: isolate;
}
.bzh-instructor-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.8s var(--bzh-ease); }
.bzh-instructor-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0.3) 50%, transparent 100%); z-index: 1; }
.bzh-instructor-body { position: relative; z-index: 2; margin-top: auto; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.bzh-instructor-name { font-size: 17px; font-weight: 800; margin: 0; }
.bzh-instructor-meta { font-size: 12px; opacity: 0.85; }
.bzh-swiper .swiper-slide:hover .bzh-instructor-card { transform: translateY(-6px); box-shadow: var(--bzh-shadow-md); }
.bzh-swiper .swiper-slide:hover .bzh-instructor-card img { transform: scale(1.08); }

/* ── Testimonials ──────────────────────────────────────────── */
.bzh-testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    background: var(--bzh-white);
    border: 1px solid var(--bzh-border);
    border-radius: var(--bzh-radius);
    box-shadow: var(--bzh-shadow-sm);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.bzh-testimonial-card::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 120px;
    font-family: Georgia, serif;
    color: rgba(240,88,35,0.1);
    line-height: 1;
    font-weight: 700;
}
.bzh-testimonial-stars { display: inline-flex; gap: 2px; color: #f59e0b; font-size: 14px; }
.bzh-testimonial-text {
    font-size: 14px;
    line-height: 1.85;
    color: var(--bzh-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bzh-testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bzh-border); }
.bzh-testimonial-author-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bzh-testimonial-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bzh-bg);
    border: 1px solid var(--bzh-border);
    flex-shrink: 0;
    display: block;
    transition: var(--bzh-transition);
    box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.bzh-testimonial-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(240,88,35,0.18);
    border-color: rgba(240,88,35,0.35);
}
.bzh-testimonial-thumb img,
.bzh-testimonial-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bzh-testimonial-name { font-size: 13px; font-weight: 700; color: var(--bzh-text); }
.bzh-testimonial-product {
    font-size: 11.5px;
    color: var(--bzh-muted);
    text-decoration: none;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.25s ease;
}
.bzh-testimonial-product:hover { color: var(--bzh-sp); }

/* ── Testimonial visual variants ──────────────────────────────
 * Each keyword maps to Bazeh_Renderer::testimonial_styles(). All
 * share the same DOM; only the chrome changes. `classic` is a no-op
 * so the original look stays the default.
 */
.bzh-testimonial-card--classic { /* default, no-op */ }

.bzh-testimonial-card--bordered {
    border-width: 1px 1px 1px 4px;
    border-right: 4px solid var(--bzh-sp);
    border-left: 1px solid var(--bzh-border);
    box-shadow: 0 10px 24px rgba(15,23,42,0.06);
}
.bzh-testimonial-card--bordered::before { opacity: 0.35; }

.bzh-testimonial-card--quote {
    background: linear-gradient(180deg, #fff 0%, #fff8f3 100%);
    border-color: rgba(240,88,35,0.18);
}
.bzh-testimonial-card--quote::before {
    content: '\201D';
    font-size: 180px;
    top: -32px; left: auto; right: 14px;
    color: rgba(240,88,35,0.16);
    font-weight: 800;
}

.bzh-testimonial-card--glass {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(255,255,255,0.65);
    box-shadow: 0 20px 40px rgba(15,23,42,0.08);
}
.bzh-testimonial-card--glass::before { color: rgba(240,88,35,0.22); }

.bzh-testimonial-card--ribbon {
    padding-top: 34px;
}
.bzh-testimonial-card--ribbon::after {
    content: '★';
    position: absolute;
    top: 0; right: 16px;
    background: linear-gradient(135deg, var(--bzh-sp), #ffb07a);
    color: #fff;
    width: 34px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 6px 12px rgba(240,88,35,0.28);
}

.bzh-testimonial-card--split {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 16px;
    padding: 22px;
}
.bzh-testimonial-card--split::before { display: none; }
.bzh-testimonial-card--split .bzh-testimonial-stars { grid-column: 1 / -1; order: -1; }
.bzh-testimonial-card--split .bzh-testimonial-author {
    order: 0;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 0; border: none; margin: 0;
    grid-column: 1; grid-row: 2 / span 2;
}
.bzh-testimonial-card--split .bzh-testimonial-thumb { width: 84px; height: 84px; border-radius: 14px; }
.bzh-testimonial-card--split .bzh-testimonial-text {
    grid-column: 2;
    -webkit-line-clamp: 6;
    margin: 0;
}

.bzh-testimonial-card--minimal {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 18px 4px;
    border-bottom: 1px dashed var(--bzh-border);
    border-radius: 0;
}
.bzh-testimonial-card--minimal::before { display: none; }

.bzh-testimonial-card--cozy {
    background: #fdf7ef;
    border-color: #f1e3cf;
    box-shadow: inset 0 0 0 1px rgba(240,88,35,0.06);
}
.bzh-testimonial-card--cozy::before { color: rgba(217,119,6,0.15); }
.bzh-testimonial-card--cozy .bzh-testimonial-author {
    border-top-color: rgba(217,119,6,0.2);
}

/* ── Typewriter-on-hover ──────────────────────────────────────
 * Each word is wrapped server-side in `.bzh-tw-word` with an
 * index set via `--bzh-tw-i`. IMPORTANT UX decision: words are
 * fully visible by default (so the review is always readable)
 * and hovering RESTARTS a typing animation that reveals each
 * word with a staggered delay — feels like a reader re-reading
 * the quote out loud. This is driven by a keyframe (animation)
 * rather than a transition, because a keyframe can be re-run
 * on every hover via `animation-play-state` or by applying it
 * only inside the :hover selector (no need to reset state).
 *
 * Not triggered on touch (`@media(hover:hover)`) — phone users
 * just see the full quote from the start.
 *
 * Class is `.bzh-testimonial-typewriter` (NOT namespaced under
 * `bzh-testimonial-card--*`) so the admin live-preview's variant
 * swapper doesn't strip it when the user changes card style.
 */
.bzh-testimonial-typewriter .bzh-tw-word {
    display: inline-block;
    opacity: 1;
    transform: none;
    filter: none;
    white-space: pre;
    margin-inline-end: 3px;
}
@media (hover: hover) {
    .bzh-testimonial-typewriter:hover .bzh-testimonial-text .bzh-tw-word,
    .bzh-testimonial-typewriter:focus-within .bzh-testimonial-text .bzh-tw-word {
        animation: bzh-tw-reveal 0.35s ease both;
        animation-delay: calc(var(--bzh-tw-i, 0) * 55ms);
    }
    /* Subtle blinking caret at the tail of the text while hovering. */
    .bzh-testimonial-typewriter .bzh-testimonial-text::after {
        content: '';
        display: inline-block;
        width: 2px; height: 1em;
        vertical-align: -2px;
        margin-inline-start: 4px;
        background: var(--bzh-sp);
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .bzh-testimonial-typewriter:hover .bzh-testimonial-text::after {
        opacity: 1;
        animation: bzh-tw-caret 0.9s steps(2) infinite;
    }
}
@keyframes bzh-tw-reveal {
    0%   { opacity: 0; transform: translateY(4px); filter: blur(3px); }
    100% { opacity: 1; transform: none;            filter: none; }
}
@keyframes bzh-tw-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .bzh-testimonial-typewriter:hover .bzh-testimonial-text .bzh-tw-word,
    .bzh-testimonial-typewriter:focus-within .bzh-testimonial-text .bzh-tw-word {
        animation: none !important;
    }
}

/* ── Stats strip ───────────────────────────────────────────── */
.bzh-section--stats { padding: 32px 0; }
.bzh-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 16px; }
.bzh-stat {
    text-align: center;
    padding: 26px 18px;
    background: var(--bzh-white);
    border: 1px solid var(--bzh-border);
    border-radius: var(--bzh-radius);
    box-shadow: var(--bzh-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: var(--bzh-transition);
}
.bzh-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--bzh-grad-mix); }
.bzh-stat:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(240,88,35,0.16); }
.bzh-stat-value { font-size: 34px; font-weight: 800; color: var(--bzh-sp); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.bzh-stat-label { font-size: 13px; color: var(--bzh-muted); margin-top: 6px; font-weight: 500; }

/* ── Blog card ─────────────────────────────────────────────── */
.bzh-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bzh-white);
    border: 1px solid var(--bzh-border);
    border-radius: var(--bzh-radius);
    box-shadow: var(--bzh-shadow-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: var(--bzh-transition);
    isolation: isolate;
}
.bzh-blog-image { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--bzh-bg); }
.bzh-blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--bzh-ease); }
.bzh-blog-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.bzh-blog-cat { font-size: 11px; font-weight: 700; color: var(--bzh-sp); text-transform: none; }
.bzh-blog-title { font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--bzh-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bzh-blog-meta { font-size: 12px; color: var(--bzh-muted); margin-top: auto; }
.bzh-swiper .swiper-slide:hover .bzh-blog-card { transform: translateY(-6px); box-shadow: var(--bzh-shadow-md); }
.bzh-swiper .swiper-slide:hover .bzh-blog-image img { transform: scale(1.08); }

/* ── CTA banner ────────────────────────────────────────────── */
.bzh-cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--bzh-radius);
    padding: 44px 40px;
    background: var(--bzh-grad-mix);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 20px 50px rgba(240,88,35,0.3);
}
.bzh-cta-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
    border-radius: 50%;
}
.bzh-cta-text h3 { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.bzh-cta-text p  { margin: 0; opacity: 0.9; font-size: 14px; }
.bzh-cta-form { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.bzh-cta-form input[type="email"] { padding: 13px 18px; border-radius: 40px; border: none; font-size: 14px; min-width: 240px; background: rgba(255,255,255,0.95); color: var(--bzh-text); }
.bzh-cta-form button { padding: 13px 26px; border-radius: 40px; border: none; background: var(--bzh-text); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: var(--bzh-transition); }
.bzh-cta-form button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.bzh-cta-link {
    padding: 13px 28px; border-radius: 40px;
    background: var(--bzh-text); color: #fff;
    font-weight: 700; font-size: 14px;
    text-decoration: none;
    transition: var(--bzh-transition);
    display: inline-flex; align-items: center; gap: 8px;
}
.bzh-cta-link svg { width: 14px; height: 14px; fill: currentColor; transition: transform 0.2s ease; }
.bzh-cta-link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.25); color: #fff; }
.bzh-cta-link:hover svg { transform: translateX(-3px); /* RTL: nudge chevron leftward on hover */ }

/* ── Attached products (up to 3) ───────────────────────────────
 * Shared layout; templates adjust placement by overriding
 * `.bzh-cta-products` grid / flex rules. */
.bzh-cta-products {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative; z-index: 1;
    width: 100%;
    margin-top: 18px;
}
.bzh-cta-product {
    flex: 1 1 160px;
    max-width: 220px;
    min-width: 140px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
    color: var(--bzh-text);
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(15,23,42,0.14);
    transition: transform 0.28s var(--bzh-ease), box-shadow 0.28s var(--bzh-ease);
}
.bzh-cta-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(15,23,42,0.22);
    color: var(--bzh-text);
}
.bzh-cta-product-thumb {
    width: 56px; height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
}
.bzh-cta-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bzh-cta-product-name {
    font-size: 12.5px; font-weight: 700;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.bzh-cta-product-price {
    font-size: 11.5px; color: var(--bzh-muted);
    grid-column: 2;
}
.bzh-cta-product-price del { opacity: 0.55; margin-inline-end: 4px; }

/* ── 10 CTA templates ────────────────────────────────────────── */
.bzh-cta--classic { /* default, no-op */ }

.bzh-cta--split .bzh-cta-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
.bzh-cta--split .bzh-cta-products {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    width: auto; margin-top: 0;
    max-width: 260px;
}
.bzh-cta--split .bzh-cta-product { max-width: none; flex: none; }

.bzh-cta--stacked .bzh-cta-products {
    justify-content: flex-start;
    gap: 8px;
}
.bzh-cta--stacked .bzh-cta-product {
    margin-inline-start: -20px;
    transition: transform 0.3s var(--bzh-ease), margin 0.3s var(--bzh-ease);
}
.bzh-cta--stacked .bzh-cta-product:first-child { margin-inline-start: 0; }
.bzh-cta--stacked:hover .bzh-cta-product { margin-inline-start: 8px; }

.bzh-cta--glass .bzh-cta-banner {
    background: rgba(240,88,35,0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(240,88,35,0.25);
}
.bzh-cta--glass .bzh-cta-product { background: rgba(255,255,255,0.72); backdrop-filter: blur(6px); }

.bzh-cta--dark .bzh-cta-banner {
    background: radial-gradient(120% 180% at 0% 0%, #1f2937 0%, #0f172a 60%, #020617 100%);
    box-shadow: 0 20px 50px rgba(2,6,23,0.45);
}
.bzh-cta--dark .bzh-cta-text h3,
.bzh-cta--dark .bzh-cta-text p { color: #fff; }
.bzh-cta--dark .bzh-cta-form button,
.bzh-cta--dark .bzh-cta-link { background: var(--bzh-sp); }

.bzh-cta--ribbon .bzh-cta-banner { padding-top: 54px; }
.bzh-cta--ribbon .bzh-cta-banner::after {
    content: 'پیشنهاد ویژه';
    position: absolute;
    top: 18px; right: -42px;
    transform: rotate(35deg);
    background: #fff; color: var(--bzh-sp);
    padding: 6px 52px;
    font-weight: 800; font-size: 11px;
    letter-spacing: 1px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.bzh-cta--aurora .bzh-cta-banner {
    background:
        radial-gradient(circle at 0% 0%, rgba(139,92,246,0.9), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(56,189,248,0.9), transparent 50%),
        linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
}

.bzh-cta--magazine .bzh-cta-banner {
    background: #fef6ee;
    color: var(--bzh-text);
    box-shadow: inset 0 -4px 0 var(--bzh-sp), 0 16px 40px rgba(15,23,42,0.08);
}
.bzh-cta--magazine .bzh-cta-text h3 { font-size: 32px; }
.bzh-cta--magazine .bzh-cta-text h3::after {
    content: '';
    display: block;
    width: 60px; height: 4px;
    background: var(--bzh-sp);
    margin-top: 10px;
}
.bzh-cta--magazine .bzh-cta-form button,
.bzh-cta--magazine .bzh-cta-link { background: var(--bzh-text); }

.bzh-cta--promo .bzh-cta-banner {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
}
.bzh-cta--promo .bzh-cta-decor {
    position: absolute;
    inset: auto 10% -40% auto;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 60%);
    filter: blur(30px);
    animation: bzh-cta-promo 6s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes bzh-cta-promo {
    to { transform: translate(-40px, 40px) scale(1.1); }
}

.bzh-cta--minimal .bzh-cta-banner {
    background: #fff;
    color: var(--bzh-text);
    border: 1px solid var(--bzh-border);
    box-shadow: none;
}
.bzh-cta--minimal .bzh-cta-form button,
.bzh-cta--minimal .bzh-cta-link { background: var(--bzh-sp); }
.bzh-cta--minimal .bzh-cta-banner::before { display: none; }

.bzh-cta--neon .bzh-cta-banner {
    background: #0b1220;
    color: #fff;
    border: 2px solid transparent;
    background-image:
        linear-gradient(#0b1220, #0b1220),
        conic-gradient(from 180deg at 50% 50%, #f97316, #ec4899, #06b6d4, #f97316);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 30px rgba(240,88,35,0.35), 0 0 60px rgba(236,72,153,0.25);
}
.bzh-cta--neon .bzh-cta-form button,
.bzh-cta--neon .bzh-cta-link { background: #fff; color: var(--bzh-text); }

/* Mobile refinements — product row wraps below text, split layout collapses */
@media (max-width: 640px) {
    .bzh-cta--split .bzh-cta-banner { grid-template-columns: 1fr; }
    .bzh-cta--split .bzh-cta-products { grid-column: 1; flex-direction: row; max-width: none; width: 100%; margin-top: 14px; }
    .bzh-cta--stacked .bzh-cta-product { margin-inline-start: 0; }
    .bzh-cta--magazine .bzh-cta-text h3 { font-size: 22px; }
}

/* ── Product-layout presets ──────────────────────────────────
 * Admin picks ONE of 5 curated chip arrangements; every preset is
 * self-contained (no template-specific overrides needed) so editors can
 * freely combine any `.bzh-cta--<template>` with any
 * `.bzh-cta-layout--<preset>`.
 *
 * Shared polish: attached-products variants upgrade the flex shell to a
 * CSS grid so the headline, CTA button and products reserve predictable
 * gutters regardless of copy length. */
.bzh-cta--has-products .bzh-cta-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) auto;
    grid-template-areas:
        "text cta"
        "products products";
    column-gap: 28px;
    row-gap: 22px;
    align-items: center;
}
.bzh-cta--has-products .bzh-cta-text { grid-area: text; }
.bzh-cta--has-products .bzh-cta-form { grid-area: cta; justify-self: end; }
.bzh-cta--has-products .bzh-cta-products { grid-area: products; margin-top: 4px; }

/* Preset 1 — Row (default). Three equal clickable cards flowing under
 * the headline. Clean, readable, the "safe pick". */
.bzh-cta-layout--row .bzh-cta-products {
    justify-content: flex-start;
    gap: 14px;
}
.bzh-cta-layout--row .bzh-cta-product { flex: 1 1 200px; }

/* Preset 2 — Stack (fan). Cards slightly overlap with a playful tilt;
 * hover un-fans them so products stay browsable. */
.bzh-cta-layout--stack .bzh-cta-products {
    justify-content: flex-start;
    gap: 0;
    padding-inline-start: 20px;
}
.bzh-cta-layout--stack .bzh-cta-product {
    margin-inline-start: -26px;
    transform: rotate(-4deg);
    transition: transform 0.35s var(--bzh-ease), margin 0.35s var(--bzh-ease), box-shadow 0.35s var(--bzh-ease);
}
.bzh-cta-layout--stack .bzh-cta-product:nth-child(2) { transform: rotate(2deg);  margin-top: 10px; }
.bzh-cta-layout--stack .bzh-cta-product:nth-child(3) { transform: rotate(-2deg); margin-top: -6px; }
.bzh-cta-layout--stack:hover .bzh-cta-product {
    transform: rotate(0);
    margin-inline-start: 10px;
    margin-top: 0;
}
.bzh-cta-layout--stack .bzh-cta-product:first-child { margin-inline-start: 0; }

/* Preset 3 — Pillar. Two-column grid: text+cta on one side, a vertical
 * column of product cards on the other. Ideal for "split" / "magazine"
 * style banners that want a strong right-edge. */
.bzh-cta--has-products.bzh-cta-layout--pillar .bzh-cta-banner {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr);
    grid-template-areas:
        "text products"
        "cta  products";
    row-gap: 16px;
    column-gap: 32px;
}
.bzh-cta-layout--pillar .bzh-cta-form { justify-self: start; }
.bzh-cta-layout--pillar .bzh-cta-products {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    gap: 10px;
}
.bzh-cta-layout--pillar .bzh-cta-product {
    max-width: none;
    flex: 0 0 auto;
}

/* Preset 4 — Orbit. Products arc around the headline in an asymmetric
 * cluster. Uses absolute positioning within the banner so the text
 * keeps its centred look while products "float". Reverts to a clean
 * stacked list on mobile. */
.bzh-cta--has-products.bzh-cta-layout--orbit .bzh-cta-banner {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "text"
        "cta";
    padding-block: 60px;
    text-align: center;
}
.bzh-cta-layout--orbit .bzh-cta-text { text-align: center; }
.bzh-cta-layout--orbit .bzh-cta-form { justify-self: center; }
.bzh-cta-layout--orbit .bzh-cta-products {
    position: absolute;
    inset: 0;
    pointer-events: none;
    margin: 0;
    display: block;
}
.bzh-cta-layout--orbit .bzh-cta-product {
    position: absolute;
    pointer-events: auto;
    max-width: 180px;
    transition: transform 0.35s var(--bzh-ease), box-shadow 0.35s var(--bzh-ease);
}
.bzh-cta-layout--orbit .bzh-cta-product:nth-child(1) {
    top: 16px; inset-inline-start: 4%;
    transform: rotate(-6deg);
}
.bzh-cta-layout--orbit .bzh-cta-product:nth-child(2) {
    bottom: 16px; inset-inline-start: 18%;
    transform: rotate(3deg);
}
.bzh-cta-layout--orbit .bzh-cta-product:nth-child(3) {
    top: 40%; inset-inline-end: 4%;
    transform: translateY(-50%) rotate(4deg);
}
.bzh-cta-layout--orbit .bzh-cta-product:hover { transform: translateY(-4px) rotate(0); }

/* Preset 5 — Showcase. One hero product stretches tall on the side;
 * the other two stack vertically next to it. Perfect for campaigns
 * with a clear "star" SKU. */
.bzh-cta--has-products.bzh-cta-layout--showcase .bzh-cta-banner {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
    grid-template-areas:
        "text products"
        "cta  products";
    column-gap: 32px;
    row-gap: 18px;
}
.bzh-cta-layout--showcase .bzh-cta-form { justify-self: start; }
.bzh-cta-layout--showcase .bzh-cta-products {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    margin-top: 0;
    align-items: stretch;
}
.bzh-cta-layout--showcase .bzh-cta-product { max-width: none; min-width: 0; }
.bzh-cta-layout--showcase .bzh-cta-product:first-child {
    grid-row: 1 / span 2;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    text-align: center;
    padding: 14px;
}
.bzh-cta-layout--showcase .bzh-cta-product:first-child .bzh-cta-product-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto 10px;
}
.bzh-cta-layout--showcase .bzh-cta-product:first-child .bzh-cta-product-name,
.bzh-cta-layout--showcase .bzh-cta-product:first-child .bzh-cta-product-price {
    grid-column: 1;
}
.bzh-cta-layout--showcase .bzh-cta-product:first-child .bzh-cta-product-name {
    font-size: 13.5px;
    -webkit-line-clamp: 2;
}

/* Mobile — every preset collapses to the row-like flow so the banner
 * stays readable on narrow screens. Keeps the admin-picked template
 * intact (only chip arrangement relaxes). */
@media (max-width: 640px) {
    .bzh-cta--has-products .bzh-cta-banner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "cta"
            "products";
        row-gap: 14px;
    }
    .bzh-cta--has-products .bzh-cta-form { justify-self: start; }
    .bzh-cta-layout--pillar .bzh-cta-products,
    .bzh-cta-layout--showcase .bzh-cta-products {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .bzh-cta-layout--showcase .bzh-cta-product:first-child .bzh-cta-product-thumb { aspect-ratio: auto; height: 56px; width: 56px; }
    .bzh-cta-layout--showcase .bzh-cta-product:first-child { padding: 10px 14px; text-align: right; grid-template-columns: 56px 1fr; grid-template-rows: auto; }
    .bzh-cta-layout--orbit .bzh-cta-banner { padding-block: 32px; }
    .bzh-cta-layout--orbit .bzh-cta-products {
        position: static;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
    }
    .bzh-cta-layout--orbit .bzh-cta-product {
        position: static;
        transform: none;
        max-width: 220px;
    }
    .bzh-cta-layout--stack .bzh-cta-product {
        margin-inline-start: 0;
        margin-top: 0;
        transform: none;
    }
    .bzh-cta-layout--stack .bzh-cta-product:nth-child(n) {
        margin-top: 0;
        transform: none;
    }
}

/* ============================================================
 * Header style variants (5)
 * Activate via `.bzh-header--<key>` on the section wrapper.
 * .bzh-header--classic is the default shipped with v1.0.
 * ============================================================ */

/* Pretitle: only visible in header_style='badge' */
.bzh-section-pretitle { display: none; }
.bzh-header--badge .bzh-section-pretitle {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 40px;
    background: var(--bzh-grad);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    box-shadow: 0 6px 14px rgba(240,88,35,0.28);
}
.bzh-header--badge .bzh-section-title::after { display: none; }

/* Centered: all heading elements centered, CTA moves below */
.bzh-header--centered .bzh-section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bzh-header--centered .bzh-section-title::after {
    right: 50%;
    transform: translateX(50%);
    width: 56px;
}
.bzh-header--centered .bzh-section-cta { margin-top: 4px; }

/* Underline: big decorative line under title that spans further */
.bzh-header--underline .bzh-section-title { padding-bottom: 12px; display: block; }
.bzh-header--underline .bzh-section-title::after {
    bottom: 0;
    width: 100%;
    max-width: 200px;
    height: 4px;
    background: linear-gradient(90deg, var(--bzh-sp), var(--bzh-ss));
    border-radius: 4px;
}

/* Split: title and subtitle on the same line with a pipe separator */
.bzh-header--split .bzh-section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.bzh-header--split .bzh-section-title::after { display: none; }
.bzh-header--split .bzh-section-subtitle {
    margin: 0;
    padding-right: 14px;
    border-right: 2px solid var(--bzh-divider, rgba(240,88,35,0.35));
    line-height: 1.5;
}

/* ============================================================
 * Compact one-row header variants (3)
 * These layouts collapse title + subtitle + CTA into a single
 * horizontal row so the header block occupies much less vertical
 * space. Ideal when you want more products in the viewport.
 * ============================================================ */

/* Inline — everything on a single row with a soft vertical divider
   between title and subtitle. Title wears a tiny accent dot, CTA
   stays on the opposite end of the row. */
.bzh-header--inline .bzh-section-header {
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(240,88,35,0.06), transparent 55%);
    border-radius: 14px;
}
.bzh-header--inline .bzh-section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.bzh-header--inline .bzh-section-title {
    font-size: 19px;
    padding-right: 14px;
    position: relative;
}
.bzh-header--inline .bzh-section-title::after { display: none; }
.bzh-header--inline .bzh-section-title::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bzh-divider, var(--bzh-sp));
    box-shadow: 0 0 0 4px rgba(240,88,35,0.18);
}
.bzh-header--inline .bzh-section-subtitle {
    margin: 0;
    padding-right: 14px;
    border-right: 1px solid var(--bzh-divider, rgba(15,23,42,0.12));
    font-size: 12.5px;
    line-height: 1.5;
}

/* Bar — full-width brand bar. Title + subtitle on the right, CTA on
   the left. Title wears a vertical brand stripe, subtitle is a chip.
   Heavy visual presence while still single-row. */
.bzh-header--bar .bzh-section-header {
    align-items: center;
    padding: 12px 18px;
    /* 10px breathing room from the section's left/right/top edges so the
       bar doesn't hug the section border (design review, image 3). The
       default header uses padding for gutters; the bar variant needs
       margin instead because it has its own background. */
    margin: 10px;
    background: linear-gradient(90deg, rgba(240,88,35,0.1) 0%, rgba(26,93,58,0.06) 100%);
    border: 1px solid rgba(240,88,35,0.18);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(240,88,35,0.06);
}
.bzh-header--bar .bzh-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 14px;
    border-right: 3px solid var(--bzh-divider, var(--bzh-sp));
}
.bzh-header--bar .bzh-section-title {
    font-size: 18px;
    line-height: 1.25;
}
.bzh-header--bar .bzh-section-title::after { display: none; }
.bzh-header--bar .bzh-section-subtitle {
    margin: 0;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--bzh-ss);
    background: rgba(26,93,58,0.08);
    border-radius: 999px;
}

/* Chip — the most minimal. Title + subtitle glued together as a
   single phrase with a bullet separator, CTA stripped to an arrow
   chip on the far edge. Reads like a breadcrumb/section tag. */
.bzh-header--chip .bzh-section-header {
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px dashed rgba(15,23,42,0.1);
}
.bzh-header--chip .bzh-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.bzh-header--chip .bzh-section-title {
    font-size: 17px;
    font-weight: 800;
}
.bzh-header--chip .bzh-section-title::after { display: none; }
.bzh-header--chip .bzh-section-subtitle {
    margin: 0;
    font-size: 12.5px;
    position: relative;
    padding-right: 14px;
    color: var(--bzh-muted);
}
.bzh-header--chip .bzh-section-subtitle::before {
    content: '•';
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    color: var(--bzh-divider, var(--bzh-sp));
    font-size: 14px;
    line-height: 1;
}

/* ------------------------------------------------------------
 * No-subtitle housekeeping
 *
 * When the subtitle is blank the PHP renderer skips the <p> tag
 * and tags the header with .bzh-no-sub. But WP templates (or a
 * cached HTML snapshot) can sometimes slip an empty pill onto
 * the page. These rules make sure nothing decorative is drawn
 * either way:
 *   1. `.bzh-no-sub` removes the vertical separator on split/
 *      inline variants that only make sense next to a subtitle.
 *   2. `.bzh-section-subtitle:empty` hides any pill-shaped
 *      subtitle markup that somehow renders with no text.
 * ------------------------------------------------------------ */
.bzh-section-header.bzh-no-sub .bzh-section-subtitle,
.bzh-section-header .bzh-section-subtitle:empty {
    display: none !important;
}
.bzh-header--inline .bzh-section-header.bzh-no-sub .bzh-section-title,
.bzh-header--split  .bzh-section-header.bzh-no-sub .bzh-section-title {
    padding-right: 0;
}
.bzh-header--chip .bzh-section-header.bzh-no-sub .bzh-section-title::after {
    display: none;
}
.bzh-header--chip .bzh-section-cta {
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: var(--bzh-sp);
}
.bzh-header--chip .bzh-section-cta:hover {
    background: var(--bzh-grad);
    color: #fff;
    border-color: transparent;
    transform: none;
}

/* Dark-bg legibility for compact variants. */
.bzh-bg--night .bzh-header--inline .bzh-section-subtitle,
.bzh-bg--night .bzh-header--bar .bzh-section-subtitle,
.bzh-bg--night .bzh-header--chip .bzh-section-subtitle { color: rgba(226,232,240,0.92); }
.bzh-bg--night .bzh-header--inline .bzh-section-subtitle { border-right-color: rgba(255,255,255,0.35); }
.bzh-bg--night .bzh-header--bar .bzh-section-header {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
}
.bzh-bg--night .bzh-header--bar .bzh-section-subtitle { background: rgba(255,255,255,0.14); color: #fff; }
.bzh-bg--sunset .bzh-header--inline .bzh-section-subtitle,
.bzh-bg--sunset .bzh-header--bar .bzh-section-subtitle,
.bzh-bg--sunset .bzh-header--chip .bzh-section-subtitle { color: #fff; }
.bzh-bg--sunset .bzh-header--inline .bzh-section-subtitle { border-right-color: rgba(255,255,255,0.55); }
.bzh-bg--sunset .bzh-header--bar .bzh-section-header {
    background: rgba(0,0,0,0.15);
    border-color: rgba(255,255,255,0.28);
}
.bzh-bg--sunset .bzh-header--bar .bzh-section-heading { border-right-color: #fff; }
.bzh-bg--sunset .bzh-header--bar .bzh-section-subtitle { background: rgba(255,255,255,0.2); }

/* ============================================================
 * Background templates (5)
 * Activate via `.bzh-bg--<key>` on the section wrapper.
 * ============================================================ */

/* default: rely on the ambient glow pseudo-elements defined above */

.bzh-bg--warm {
    background: linear-gradient(135deg, #fff4ec 0%, #fff9f5 60%, #ffffff 100%);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    margin: 30px 0;
}
.bzh-bg--warm::before,
.bzh-bg--warm::after { display: none; }

.bzh-bg--forest {
    background: linear-gradient(135deg, #eefaf3 0%, #f4fbf7 60%, #ffffff 100%);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    margin: 30px 0;
}
.bzh-bg--forest::before { background: radial-gradient(circle, rgba(26,93,58,0.15) 0%, transparent 70%); }
.bzh-bg--forest .bzh-section-title { color: var(--bzh-ss); }
.bzh-bg--forest .bzh-section-title::after { background: linear-gradient(90deg, var(--bzh-ss), var(--bzh-ss2)); }

.bzh-bg--sunset {
    background: linear-gradient(135deg, #dc2626 0%, #F05823 50%, #ff7a45 100%);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    margin: 30px 0;
    color: #fff;
    box-shadow: 0 20px 50px rgba(220,38,38,0.28);
}
.bzh-bg--sunset::before,
.bzh-bg--sunset::after { display: none; }
.bzh-bg--sunset .bzh-section-title         { color: #fff; }
.bzh-bg--sunset .bzh-section-title::after  { background: rgba(255,255,255,0.85); }
.bzh-bg--sunset .bzh-section-subtitle      { color: rgba(255,255,255,0.92); }
.bzh-bg--sunset .bzh-section-cta {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
}
.bzh-bg--sunset .bzh-section-cta:hover {
    background: #fff;
    color: #dc2626;
}
.bzh-bg--sunset .bzh-sale-countdown {
    background: rgba(15,23,42,0.85);
    box-shadow: 0 10px 22px rgba(15,23,42,0.25);
}

.bzh-bg--night {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    margin: 30px 0;
    color: #e2e8f0;
    box-shadow: 0 20px 50px rgba(15,23,42,0.35);
}
.bzh-bg--night::before,
.bzh-bg--night::after { display: none; }
.bzh-bg--night .bzh-section-title         { color: #fff; }
.bzh-bg--night .bzh-section-title::after  { background: var(--bzh-grad); }
.bzh-bg--night .bzh-section-subtitle      { color: rgba(226,232,240,0.85); }
.bzh-bg--night .bzh-nav                   { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); }
.bzh-bg--night .bzh-nav svg               { fill: #fff; }
/* On the dark-navy background the default CTA (rgba-orange 0.08 on dark =
   barely visible) fails the readability bar. Bump opacity and swap to a
   light border so the pill reads clearly. Inner text already used orange
   which had decent contrast — keep it. */
.bzh-bg--night .bzh-section-cta {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.28);
    color: #ffd9c7;
}
.bzh-bg--night .bzh-section-cta:hover {
    background: #fff;
    color: #0f172a;
    border-color: transparent;
}
/* Split divider (the vertical line between title + subtitle in split layout)
   was 0.35-alpha orange. On dark-navy that's nearly invisible. */
.bzh-bg--night .bzh-header--split .bzh-section-subtitle { border-right-color: rgba(255,255,255,0.4); }
/* Ensure all badge styles stay legible against the dark bg. */
.bzh-bg--night .bzh-badge--dot     { color: #fff; }
.bzh-bg--night .bzh-badge--outline { color: #fff; border-color: rgba(255,255,255,0.55); }

/* Same treatment for the sunset (red→orange) background. */
.bzh-bg--sunset .bzh-header--split .bzh-section-subtitle { border-right-color: rgba(255,255,255,0.55); }
.bzh-bg--sunset .bzh-badge--dot     { color: #fff; }
.bzh-bg--sunset .bzh-badge--dot::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
.bzh-bg--sunset .bzh-badge--outline { color: #fff; border-color: rgba(255,255,255,0.7); }

/* ── Extended background templates (v1.4) ────────────────────
   Each template owns its own surface, glow and optional overlay
   pattern. Text/CTA contrast is preserved for dark variants. */
.bzh-bg--aurora {
    background: linear-gradient(135deg, #1f1147 0%, #2a3c7d 45%, #0ea5e9 100%);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    color: #fff;
    overflow: hidden;
}
.bzh-bg--aurora::before {
    content: '';
    position: absolute; inset: -40% -10% auto -10%; height: 60%;
    background: radial-gradient(60% 80% at 50% 0%, rgba(236,72,153,0.55), transparent 70%),
                radial-gradient(60% 80% at 80% 20%, rgba(56,189,248,0.55), transparent 70%);
    filter: blur(40px); opacity: 0.9; pointer-events: none;
}
.bzh-bg--aurora .bzh-section-title       { color: #fff; }
.bzh-bg--aurora .bzh-section-subtitle    { color: rgba(255,255,255,0.88); }
.bzh-bg--aurora .bzh-section-cta         { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); color: #fff; }
.bzh-bg--aurora .bzh-section-cta:hover   { background: #fff; color: #1f1147; border-color: transparent; }
.bzh-bg--aurora .bzh-nav                 { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.25); }
.bzh-bg--aurora .bzh-nav svg             { fill: #fff; }

.bzh-bg--paper {
    background: repeating-linear-gradient(0deg, #fffaf2 0 31px, rgba(0,0,0,0.04) 31px 32px);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    border: 1px solid rgba(0,0,0,0.05);
}
.bzh-bg--paper .bzh-section-title::after { background: #1a1a1a; }

.bzh-bg--mesh {
    background:
        radial-gradient(45% 40% at 12% 18%, rgba(251,146,60,0.35), transparent 60%),
        radial-gradient(42% 45% at 88% 22%, rgba(139,92,246,0.28), transparent 60%),
        radial-gradient(50% 50% at 60% 92%, rgba(16,185,129,0.26), transparent 60%),
        #fdfbf7;
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
}

.bzh-bg--terrazzo {
    background-color: #fafaf7;
    background-image:
        radial-gradient(circle at 20% 30%, #f0582333 0 6px, transparent 7px),
        radial-gradient(circle at 70% 60%, #1a5d3a33 0 5px, transparent 6px),
        radial-gradient(circle at 40% 85%, #f59e0b33 0 4px, transparent 5px),
        radial-gradient(circle at 85% 20%, #0ea5e933 0 5px, transparent 6px);
    background-size: 180px 180px;
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
}

.bzh-bg--cosmos {
    background: radial-gradient(ellipse at top, #0f172a 0%, #020617 100%);
    background-image:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 70%, #fff, transparent),
        radial-gradient(1px 1px at 80% 20%, #fff, transparent),
        radial-gradient(2px 2px at 30% 80%, rgba(255,255,255,0.8), transparent),
        radial-gradient(ellipse at top, #0f172a 0%, #020617 100%);
    background-size: 200px 200px, 180px 180px, 220px 220px, 250px 250px, 100% 100%;
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    color: #fff;
}
.bzh-bg--cosmos .bzh-section-title       { color: #fff; }
.bzh-bg--cosmos .bzh-section-subtitle    { color: rgba(226,232,240,0.85); }
.bzh-bg--cosmos .bzh-section-cta         { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); color: #e2e8f0; }
.bzh-bg--cosmos .bzh-section-cta:hover   { background: #fff; color: #0f172a; border-color: transparent; }
.bzh-bg--cosmos .bzh-nav                 { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.24); }
.bzh-bg--cosmos .bzh-nav svg             { fill: #fff; }

.bzh-bg--mint {
    background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 100%);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    border: 1px solid rgba(16,185,129,0.1);
}

.bzh-bg--lavender {
    background: linear-gradient(180deg, #f5f3ff 0%, #faf5ff 100%);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    border: 1px solid rgba(139,92,246,0.12);
}

.bzh-bg--coral {
    background: linear-gradient(135deg, #fff1f2 0%, #ffedd5 100%);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    border: 1px solid rgba(249,115,22,0.14);
}

.bzh-bg--glass {
    background:
        linear-gradient(135deg, rgba(240,88,35,0.10) 0%, rgba(26,93,58,0.06) 100%),
        rgba(255,255,255,0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    box-shadow: 0 20px 40px rgba(15,23,42,0.06);
}

.bzh-bg--grid-lux {
    background-color: #0b0f1a;
    background-image:
        linear-gradient(rgba(212,175,55,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,175,55,0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    color: #f5f3e6;
}
.bzh-bg--grid-lux .bzh-section-title       { color: #f5e9c7; }
.bzh-bg--grid-lux .bzh-section-title::after{ background: linear-gradient(90deg, #d4af37, #b8860b); }
.bzh-bg--grid-lux .bzh-section-subtitle    { color: rgba(245,243,230,0.78); }
.bzh-bg--grid-lux .bzh-section-cta         { background: rgba(212,175,55,0.15); border-color: rgba(212,175,55,0.5); color: #f5e9c7; }
.bzh-bg--grid-lux .bzh-section-cta:hover   { background: #d4af37; color: #0b0f1a; border-color: transparent; }
.bzh-bg--grid-lux .bzh-nav                 { background: rgba(212,175,55,0.14); border-color: rgba(212,175,55,0.35); }
.bzh-bg--grid-lux .bzh-nav svg             { fill: #f5e9c7; }

/* ── Luxury grid variants (v1.7) ─────────────────────────────
 * All share the same dark canvas + 48px grid pattern as grid-lux.
 * Each variant only overrides the accent hue (grid-line RGBA,
 * title tint, CTA chrome) so the page keeps a cohesive dark-theme
 * rhythm while editors can still differentiate sections at a glance.
 * ─────────────────────────────────────────────────────────── */
.bzh-bg--grid-silver,
.bzh-bg--grid-emerald,
.bzh-bg--grid-rose,
.bzh-bg--grid-azure {
    background-color: #0b0f1a;
    background-size: 48px 48px;
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    color: #f5f3e6;
}

/* Silver / platinum */
.bzh-bg--grid-silver {
    background-image:
        linear-gradient(rgba(203,213,225,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(203,213,225,0.09) 1px, transparent 1px);
}
.bzh-bg--grid-silver .bzh-section-title       { color: #e2e8f0; }
.bzh-bg--grid-silver .bzh-section-title::after{ background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
.bzh-bg--grid-silver .bzh-section-subtitle    { color: rgba(226,232,240,0.78); }
.bzh-bg--grid-silver .bzh-section-cta         { background: rgba(203,213,225,0.12); border-color: rgba(203,213,225,0.45); color: #e2e8f0; }
.bzh-bg--grid-silver .bzh-section-cta:hover   { background: #cbd5e1; color: #0b0f1a; border-color: transparent; }
.bzh-bg--grid-silver .bzh-nav                 { background: rgba(203,213,225,0.14); border-color: rgba(203,213,225,0.35); }
.bzh-bg--grid-silver .bzh-nav svg             { fill: #e2e8f0; }

/* Emerald */
.bzh-bg--grid-emerald {
    background-image:
        linear-gradient(rgba(52,211,153,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52,211,153,0.1) 1px, transparent 1px);
}
.bzh-bg--grid-emerald .bzh-section-title       { color: #d1fae5; }
.bzh-bg--grid-emerald .bzh-section-title::after{ background: linear-gradient(90deg, #34d399, #10b981); }
.bzh-bg--grid-emerald .bzh-section-subtitle    { color: rgba(209,250,229,0.78); }
.bzh-bg--grid-emerald .bzh-section-cta         { background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.5); color: #d1fae5; }
.bzh-bg--grid-emerald .bzh-section-cta:hover   { background: #34d399; color: #0b0f1a; border-color: transparent; }
.bzh-bg--grid-emerald .bzh-nav                 { background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.35); }
.bzh-bg--grid-emerald .bzh-nav svg             { fill: #d1fae5; }

/* Rose / rose-gold */
.bzh-bg--grid-rose {
    background-image:
        linear-gradient(rgba(251,113,133,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(251,113,133,0.1) 1px, transparent 1px);
}
.bzh-bg--grid-rose .bzh-section-title       { color: #ffe4e6; }
.bzh-bg--grid-rose .bzh-section-title::after{ background: linear-gradient(90deg, #fb7185, #e11d48); }
.bzh-bg--grid-rose .bzh-section-subtitle    { color: rgba(255,228,230,0.78); }
.bzh-bg--grid-rose .bzh-section-cta         { background: rgba(251,113,133,0.15); border-color: rgba(251,113,133,0.5); color: #ffe4e6; }
.bzh-bg--grid-rose .bzh-section-cta:hover   { background: #fb7185; color: #0b0f1a; border-color: transparent; }
.bzh-bg--grid-rose .bzh-nav                 { background: rgba(251,113,133,0.14); border-color: rgba(251,113,133,0.35); }
.bzh-bg--grid-rose .bzh-nav svg             { fill: #ffe4e6; }

/* Azure / ice */
.bzh-bg--grid-azure {
    background-image:
        linear-gradient(rgba(56,189,248,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,189,248,0.1) 1px, transparent 1px);
}
.bzh-bg--grid-azure .bzh-section-title       { color: #e0f2fe; }
.bzh-bg--grid-azure .bzh-section-title::after{ background: linear-gradient(90deg, #38bdf8, #0284c7); }
.bzh-bg--grid-azure .bzh-section-subtitle    { color: rgba(224,242,254,0.78); }
.bzh-bg--grid-azure .bzh-section-cta         { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.5); color: #e0f2fe; }
.bzh-bg--grid-azure .bzh-section-cta:hover   { background: #38bdf8; color: #0b0f1a; border-color: transparent; }
.bzh-bg--grid-azure .bzh-nav                 { background: rgba(56,189,248,0.14); border-color: rgba(56,189,248,0.35); }
.bzh-bg--grid-azure .bzh-nav svg             { fill: #e0f2fe; }

/* Dots — same dark canvas, gold *dots* instead of lines. Uses a single
   radial-gradient tile to keep the file weight identical to the line
   variants. */
.bzh-bg--grid-dots {
    background-color: #0b0f1a;
    background-image: radial-gradient(rgba(212,175,55,0.35) 1.2px, transparent 1.5px);
    background-size: 24px 24px;
    border-radius: var(--bzh-radius);
    padding: 32px 4px 56px;
    color: #f5f3e6;
}
.bzh-bg--grid-dots .bzh-section-title       { color: #f5e9c7; }
.bzh-bg--grid-dots .bzh-section-title::after{ background: linear-gradient(90deg, #d4af37, #b8860b); }
.bzh-bg--grid-dots .bzh-section-subtitle    { color: rgba(245,243,230,0.78); }
.bzh-bg--grid-dots .bzh-section-cta         { background: rgba(212,175,55,0.15); border-color: rgba(212,175,55,0.5); color: #f5e9c7; }
.bzh-bg--grid-dots .bzh-section-cta:hover   { background: #d4af37; color: #0b0f1a; border-color: transparent; }
.bzh-bg--grid-dots .bzh-nav                 { background: rgba(212,175,55,0.14); border-color: rgba(212,175,55,0.35); }
.bzh-bg--grid-dots .bzh-nav svg             { fill: #f5e9c7; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bzh-slider-track { padding: 0 52px; }
    /* Tablet column count: admin override via --bzh-sk-cols-t wins. */
    .bzh-skeleton { grid-template-columns: repeat(var(--bzh-sk-cols-t, 3), 1fr); padding: 0 52px; }
    .bzh-stats-row { grid-template-columns: repeat(2, 1fr); }
    .bzh-hero-content { padding: 8% 6% 8% 30%; }
}
@media (max-width: 768px) {
    .bzh-section { padding: 20px 0 36px; margin: 20px 0; }
    .bzh-slider-track { padding: 0 44px; }
    /* Phone column count: admin override via --bzh-sk-cols-m wins. */
    .bzh-skeleton { grid-template-columns: repeat(var(--bzh-sk-cols-m, 2), 1fr); gap: 14px; padding: 0 44px; }
    .bzh-nav { width: 42px; height: 42px; }
    .bzh-nav svg { width: 19px; height: 19px; }

    /* Mobile section header: two tidy rows.
       Row 1 — badge + title inline, aligned to the start.
       Row 2 — CTA pill, aligned to the end (or full-width when it
               runs long). Subtitle, if present, sits between them.
       This replaces the older layout where the badge, title and CTA
       stacked into 3 awkward lines on phones. */
    .bzh-section-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        margin: 0 12px 18px;
        padding: 12px 14px;
        background: linear-gradient(135deg, rgba(240,88,35,0.08) 0%, rgba(26,93,58,0.05) 100%);
        border: 1px solid rgba(240,88,35,0.18);
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(240,88,35,0.08);
    }
    .bzh-section-heading {
        flex: 1 1 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }
    .bzh-section-heading .bzh-badge {
        margin: 0;
        padding: 4px 10px;
        font-size: 11px;
        align-self: center;
        flex: 0 0 auto;
        order: 0;
    }
    .bzh-section-title {
        font-size: 16px;
        line-height: 1.3;
        color: var(--bzh-ss);
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }
    .bzh-section-title::after {
        bottom: -3px;
        width: 24px;
        height: 2.5px;
    }
    .bzh-section-subtitle {
        flex: 1 1 100%;
        margin: 0;
        order: 2;
        font-size: 12px;
        line-height: 1.55;
    }
    .bzh-section-cta {
        flex: 0 0 auto;
        margin-inline-start: auto;
        padding: 6px 12px;
        font-size: 12px;
    }
    .bzh-section-cta svg { width: 13px; height: 13px; }

    .bzh-card-body { padding: 14px 12px 18px; }
    .bzh-card-title { font-size: 13.5px; }
    .bzh-card-price, .bzh-card-price ins { font-size: 15px; }
    .bzh-card-image-wrap { padding: 8px; }
    .bzh-hero-content { padding: 24px 24px 56px; }
    .bzh-hero-slide::after { background: linear-gradient(to top, rgba(15,23,42,0.8) 0%, rgba(15,23,42,0.2) 100%); }
    .bzh-cta-banner { padding: 28px 22px; }
    .bzh-cta-form input[type="email"] { min-width: 0; flex: 1 1 160px; }
}
@media (max-width: 480px) {
    .bzh-slider-track { padding: 0 36px; }
    .bzh-skeleton { padding: 0 36px; }
    .bzh-nav { width: 36px; height: 36px; }
    .bzh-nav svg { width: 16px; height: 16px; }
    .bzh-progress { max-width: 160px; margin-top: 20px; }
    .bzh-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .bzh-stat-value { font-size: 26px; }
}

/* ── Drag affordances ────────────────────────────────────────
 * Explicit `touch-action: pan-y` on the swiper element lets the OS
 * forward horizontal pointer drags to Swiper while still allowing
 * vertical page scroll from inside the slider. Without this, mobile
 * Safari used to swallow the drag on some devices. */
.bzh-swiper { touch-action: pan-y; }
.bzh-swiper.swiper-grab-cursor, .bzh-swiper-grab-cursor { cursor: grab; }
.bzh-swiper.swiper-grab-cursor:active, .bzh-swiper-grab-cursor:active { cursor: grabbing; }

/* After a horizontal drag, the browser may still emit a `click` on the card
 * under the cursor. JS adds `.bzh-post-drag-nav-cooldown` on `.bzh-section`
 * for ~500ms so links / JS review chips cannot receive that ghost click. */
.bzh-section.bzh-post-drag-nav-cooldown .swiper-slide a[href],
.bzh-section.bzh-post-drag-nav-cooldown .swiper-slide area[href],
.bzh-section.bzh-post-drag-nav-cooldown .swiper-slide .js-bzh-review-badge,
.bzh-section.bzh-post-drag-nav-cooldown.is-fallback .bzh-slider-clip a[href],
.bzh-section.bzh-post-drag-nav-cooldown.is-fallback .bzh-slider-clip area[href],
.bzh-section.bzh-post-drag-nav-cooldown.is-fallback .bzh-slider-clip .js-bzh-review-badge {
    pointer-events: none !important;
}

/* Mouse-drag fix (desktop/laptop).
 * The browser's NATIVE image-drag hijacks mousedown on every <img> inside
 * a slide: the user grabs a card, the browser shows a ghost image and
 * Swiper never sees mousemove. Same story for text selection. Disable
 * both so Swiper's simulateTouch pipeline actually receives the pointer
 * stream. Touch devices are unaffected. */
.bzh-swiper .swiper-slide img        { -webkit-user-drag: none; user-drag: none; pointer-events: auto; }
.bzh-swiper .swiper-slide a          { -webkit-user-drag: none; user-drag: none; }
.bzh-swiper .swiper-wrapper,
.bzh-swiper .swiper-slide            { user-select: none; -webkit-user-select: none; }
/* Re-enable selection/interaction on form fields and content that NEEDS
 * them (e.g. the testimonial body text users may want to quote). */
.bzh-swiper .swiper-slide input,
.bzh-swiper .swiper-slide textarea,
.bzh-swiper .swiper-slide [contenteditable] { user-select: text; -webkit-user-select: text; }

/* ── On-scroll entry animations ─────────────────────────────
 * Each `.bzh-anim-<name>` class scopes a keyframe that plays once
 * when `.is-animated` is added (IntersectionObserver, see
 * wireEntryAnimation in bazeh-sliders.js). Slides are staggered via
 * :nth-child delays so the row feels alive, not identical.
 *
 * Before activation: slides are hidden-with-transform so they don't
 * flicker unstyled. After `.is-animated` lands, the keyframe runs
 * forward and the final frame holds via `animation-fill-mode: both`.
 */
/* Initial hidden state — only applied when the section has BOTH a
   `bzh-anim-*` class AND has been hydrated. We deliberately scope to
   `.is-hydrated` so that:
     • If JS fails to load entirely, slides stay visible (no anim trap).
     • If Swiper fails but `wireEntryAnimation()` still runs (it's
       outside the Swiper try-block), `.is-animated` lands and the
       slides reveal as expected.
   The :not(.is-animated) guard keeps slides hidden until the
   IntersectionObserver fires. */
.bzh-section.is-hydrated[class*="bzh-anim-"]:not(.is-animated) .bzh-swiper .swiper-slide {
    opacity: 0;
}
.bzh-section.is-hydrated.bzh-anim-slide:not(.is-animated) .bzh-swiper .swiper-slide { transform: translateX(48px); }
.bzh-section.is-hydrated.bzh-anim-rise:not(.is-animated)  .bzh-swiper .swiper-slide { transform: translateY(28px); }
.bzh-section.is-hydrated.bzh-anim-zoom:not(.is-animated)  .bzh-swiper .swiper-slide { transform: scale(0.92); }
.bzh-section.is-hydrated.bzh-anim-blur:not(.is-animated)  .bzh-swiper .swiper-slide { filter: blur(10px); }
.bzh-section.is-hydrated.bzh-anim-flip:not(.is-animated)  .bzh-swiper .swiper-slide { transform: perspective(800px) rotateY(-25deg); transform-origin: right center; }
.bzh-section.is-hydrated.bzh-anim-stagger:not(.is-animated) .bzh-swiper .swiper-slide { transform: translateX(60px) scale(0.95); }

/* Defensive: if a section ends up in fallback (Swiper script missing /
   broken), force every slide visible regardless of anim state. */
.bzh-section.is-fallback .bzh-swiper .swiper-slide {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* Final safety-net: reveal slides after 3s regardless of whether
   `.is-animated` ever lands. This covers exotic cases where the
   IntersectionObserver callback is stuck behind a long task and
   the JS timeout (bazeh-sliders.js) hasn't flushed yet. The CSS
   animation only runs forward, never resets, so if the real
   reveal DID fire earlier this rule is a no-op. */
.bzh-section.is-hydrated[class*="bzh-anim-"]:not(.is-animated) .bzh-swiper .swiper-slide {
    animation: bzh-anim-fail-safe 0.01s 3s linear both;
}
@keyframes bzh-anim-fail-safe {
    to { opacity: 1; transform: none; filter: none; }
}

.is-animated .bzh-swiper .swiper-slide {
    animation-duration: 620ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
}
.bzh-anim-slide.is-animated  .bzh-swiper .swiper-slide { animation-name: bzh-anim-slide; }
.bzh-anim-fade.is-animated   .bzh-swiper .swiper-slide { animation-name: bzh-anim-fade; }
.bzh-anim-rise.is-animated   .bzh-swiper .swiper-slide { animation-name: bzh-anim-rise; }
.bzh-anim-zoom.is-animated   .bzh-swiper .swiper-slide { animation-name: bzh-anim-zoom; }
.bzh-anim-blur.is-animated   .bzh-swiper .swiper-slide { animation-name: bzh-anim-blur; }
.bzh-anim-flip.is-animated   .bzh-swiper .swiper-slide { animation-name: bzh-anim-flip; animation-duration: 780ms; }
.bzh-anim-stagger.is-animated .bzh-swiper .swiper-slide { animation-name: bzh-anim-stagger; animation-duration: 720ms; }

/* Stagger: delay each slide by 80ms so a row of 4-5 cards feels like
   a cascade, not a synchronous reveal. Only the visible slides on
   first paint get the delay; Swiper's virtual slides after scroll
   don't carry it (they'd appear delayed mid-interaction). */
.is-animated .bzh-swiper .swiper-slide:nth-child(1) { animation-delay: 0ms; }
.is-animated .bzh-swiper .swiper-slide:nth-child(2) { animation-delay: 80ms; }
.is-animated .bzh-swiper .swiper-slide:nth-child(3) { animation-delay: 160ms; }
.is-animated .bzh-swiper .swiper-slide:nth-child(4) { animation-delay: 240ms; }
.is-animated .bzh-swiper .swiper-slide:nth-child(5) { animation-delay: 320ms; }
.is-animated .bzh-swiper .swiper-slide:nth-child(6) { animation-delay: 400ms; }
.is-animated .bzh-swiper .swiper-slide:nth-child(7) { animation-delay: 480ms; }
.is-animated .bzh-swiper .swiper-slide:nth-child(8) { animation-delay: 560ms; }

@keyframes bzh-anim-slide  { from { opacity: 0; transform: translateX(48px); }                              to { opacity: 1; transform: translateX(0); } }
@keyframes bzh-anim-fade   { from { opacity: 0; }                                                           to { opacity: 1; } }
@keyframes bzh-anim-rise   { from { opacity: 0; transform: translateY(28px); }                              to { opacity: 1; transform: translateY(0); } }
@keyframes bzh-anim-zoom   { from { opacity: 0; transform: scale(0.92); }                                   to { opacity: 1; transform: scale(1); } }
@keyframes bzh-anim-blur   { from { opacity: 0; filter: blur(10px); }                                       to { opacity: 1; filter: blur(0); } }
@keyframes bzh-anim-flip   { from { opacity: 0; transform: perspective(800px) rotateY(-25deg); }            to { opacity: 1; transform: perspective(800px) rotateY(0); } }
@keyframes bzh-anim-stagger{ from { opacity: 0; transform: translateX(60px) scale(0.95); }                  to { opacity: 1; transform: translateX(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .bzh-section *,
    .bzh-section *::before,
    .bzh-section *::after { animation: none !important; transition: none !important; }
    .bzh-hero-slide img { animation: none !important; }
    [class*="bzh-anim-"] .bzh-swiper .swiper-slide {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Site-wide setting (Bazeh → اسلایدرها): skip entry animations on mobile.
   JS adds .is-animated immediately; these rules are the CSS safety net. */
@media (max-width: 767px) {
    body.bzh-motion-mobile-off .bzh-section.is-hydrated[class*="bzh-anim-"] .bzh-swiper .swiper-slide {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}

/* ──────────────────────────────────────────────────────────── */
/*  Product-card display templates (10 professional variants).  */
/*                                                               */
/*  Controlled from the admin settings page via the             */
/*  product_card_style dropdown. Each variant is a pure-CSS     */
/*  layer on top of the shared .bzh-card / .bzh-card--product   */
/*  markup, so the exact same DOM renders every look without    */
/*  shortcode changes.                                           */
/*                                                               */
/*  The `classic` variant is the long-standing default and      */
/*  deliberately has NO additional rules here — every other     */
/*  site that didn't pick a template must render exactly as     */
/*  before.                                                      */
/* ──────────────────────────────────────────────────────────── */

/* ── 2) overlay — full-bleed image with headline & price floating on top ── */
.bzh-card--overlay.bzh-card--product { aspect-ratio: 3 / 4; background: #0f172a; }
/* Match card bg + flex so thumbnails show in full (`contain`): base `.bzh-card-image-wrap`
   uses white — without this, portrait covers get grey side bars. `contain` avoids
   `cover` cropping course/DVD artwork. */
.bzh-card--overlay .bzh-card-image-wrap {
    position: absolute; inset: 0; padding: 0; aspect-ratio: auto; height: 100%;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bzh-card--overlay .bzh-card-image-wrap img,
.bzh-card--overlay .bzh-card-image {
    width: 100% !important; height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    border-radius: 0 !important;
    transition: transform 0.6s var(--bzh-ease);
}
.bzh-card--overlay:hover .bzh-card-image { transform: scale(1.03); }
.bzh-card--overlay .bzh-card-body {
    position: absolute; inset: auto 0 0 0; padding: 70px 16px 18px;
    background: linear-gradient(to top, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.6) 55%, rgba(15,23,42,0) 100%);
    text-align: right; gap: 10px; z-index: 2;
}
.bzh-card--overlay .bzh-card-title {
    color: #fff; min-height: 0; font-size: 15px; font-weight: 700;
    -webkit-line-clamp: 2;
}
.bzh-card--overlay .bzh-card-price-wrap { justify-content: flex-start; }
.bzh-card--overlay .bzh-card-price {
    background: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
}
.bzh-card--overlay .bzh-card-price,
.bzh-card--overlay .bzh-card-price ins { color: var(--bzh-sp); }
.bzh-card--overlay .bzh-card-badge,
.bzh-card--overlay .bzh-card-rank { z-index: 5; }

/* ── 3) compact — small square image beside the title (dense rows) ── */
.bzh-card--compact.bzh-card--product {
    flex-direction: row; align-items: stretch; text-align: right;
    padding: 10px; gap: 12px;
    background: #fff; border-radius: 18px;
}
.bzh-card--compact .bzh-card-image-wrap {
    flex: 0 0 96px; width: 96px; aspect-ratio: 1; padding: 0;
    border-radius: 14px; overflow: hidden; background: var(--bzh-bg);
}
.bzh-card--compact .bzh-card-image { border-radius: 14px !important; }
.bzh-card--compact .bzh-card-body {
    padding: 2px 2px 2px 0; gap: 8px; flex: 1;
    background: transparent; align-items: flex-start;
}
.bzh-card--compact .bzh-card-title {
    min-height: 0; font-size: 13.5px; text-align: right; line-height: 1.55;
    -webkit-line-clamp: 2;
}
.bzh-card--compact .bzh-card-price-wrap { justify-content: flex-start; }
.bzh-card--compact .bzh-card-price {
    padding: 5px 12px; font-size: 14px; border-radius: 28px;
}
.bzh-card--compact .bzh-card-price,
.bzh-card--compact .bzh-card-price ins { font-size: 14px; }
.bzh-card--compact .bzh-card-badge,
.bzh-card--compact .bzh-card-rank { top: 6px; padding: 3px 8px; font-size: 10px; }
.bzh-card--compact .bzh-card-badge { right: 8px; }
.bzh-card--compact .bzh-card-rank  { left: 8px; }

/* ── 4) framed — luxurious double border with warm gold accent ── */
.bzh-card--framed.bzh-card--product {
    border: 1px solid rgba(212,175,55,0.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 8px 24px rgba(15,23,42,0.05);
    background: linear-gradient(180deg, #fffdf7 0%, #fff 60%);
    border-radius: 22px;
}
.bzh-card--framed .bzh-card-image-wrap {
    margin: 10px; padding: 0; border-radius: 14px;
    border: 1px dashed rgba(212,175,55,0.55);
    width: calc(100% - 20px);
}
.bzh-card--framed .bzh-card-body {
    background: transparent; padding: 14px 18px 20px;
}
.bzh-card--framed .bzh-card-title { font-weight: 700; letter-spacing: -0.2px; }
.bzh-card--framed .bzh-card-price {
    background: linear-gradient(135deg, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.06) 100%);
    border-color: rgba(212,175,55,0.5);
    color: #8a6d1e;
}
.bzh-card--framed .bzh-card-price,
.bzh-card--framed .bzh-card-price ins { color: #8a6d1e; }

/* ── 5) minimal — no border, clean whitespace, animated underline ── */
.bzh-card--minimal.bzh-card--product {
    background: transparent; border: 0; box-shadow: none;
    border-radius: 8px;
}
.bzh-card--minimal .bzh-card-image-wrap {
    padding: 0; border-radius: 12px; overflow: hidden; background: transparent;
}
.bzh-card--minimal .bzh-card-image { border-radius: 12px !important; }
.bzh-card--minimal .bzh-card-body {
    background: transparent; padding: 14px 4px 6px;
}
.bzh-card--minimal .bzh-card-title {
    position: relative; display: inline-block; align-self: center;
    padding-bottom: 6px; min-height: 0; font-weight: 600;
}
.bzh-card--minimal .bzh-card-title::after {
    content: ''; position: absolute; right: 0; bottom: 0; height: 2px; width: 0;
    background: var(--bzh-grad); transition: width 0.45s var(--bzh-ease);
}
.bzh-card--minimal:hover .bzh-card-title::after { width: 100%; }
.bzh-card--minimal .bzh-card-price {
    background: transparent; border-color: transparent; padding: 2px 0;
    box-shadow: none; color: var(--bzh-sp);
}

/* ── 6) shadow — elevated floating card with deep soft shadow + lift ── */
.bzh-card--shadow.bzh-card--product {
    border: 0; border-radius: 22px;
    box-shadow: 0 4px 10px rgba(15,23,42,0.04), 0 24px 48px -12px rgba(15,23,42,0.18);
    background: #fff;
    transition: transform 0.5s var(--bzh-ease), box-shadow 0.5s var(--bzh-ease);
}
.bzh-card--shadow:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 14px rgba(15,23,42,0.06), 0 34px 60px -12px rgba(15,23,42,0.28);
}
.bzh-card--shadow .bzh-card-image-wrap { padding: 12px 12px 6px; }
.bzh-card--shadow .bzh-card-body {
    background: transparent; padding: 10px 18px 22px;
}

/* ── 7) magazine — editorial typography with corner price chip ── */
.bzh-card--magazine.bzh-card--product {
    background: #fff; border: 0; border-radius: 4px;
    box-shadow: 0 2px 0 #0f172a;
}
.bzh-card--magazine .bzh-card-image-wrap { padding: 0; border-radius: 0; aspect-ratio: 4 / 3; }
.bzh-card--magazine .bzh-card-image { border-radius: 0 !important; }
.bzh-card--magazine .bzh-card-body {
    background: #fff; padding: 14px 16px 20px; text-align: right;
    gap: 8px; position: relative;
}
.bzh-card--magazine .bzh-card-title {
    font-family: inherit; font-size: 16px; font-weight: 800;
    line-height: 1.45; letter-spacing: -0.3px; color: #0f172a;
    text-transform: none; min-height: 0; -webkit-line-clamp: 2;
    text-align: right;
}
.bzh-card--magazine .bzh-card-title::before {
    content: ''; display: block; width: 38px; height: 2px;
    background: #0f172a; margin: 0 0 10px auto;
}
.bzh-card--magazine .bzh-card-price-wrap { justify-content: flex-start; }
.bzh-card--magazine .bzh-card-price {
    background: #0f172a; color: #fff; border-color: #0f172a;
    border-radius: 2px; padding: 6px 14px; font-size: 14px;
    box-shadow: none;
}
.bzh-card--magazine .bzh-card-price,
.bzh-card--magazine .bzh-card-price ins { color: #fff; font-size: 14px; }
.bzh-card--magazine .bzh-card-price del { color: rgba(255,255,255,0.55); }

/* ── 8) neon — dark card with glowing brand-accent border ── */
.bzh-card--neon.bzh-card--product {
    background: #0b1220;
    border: 1px solid rgba(240,88,35,0.5);
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(240,88,35,0.25) inset,
                0 10px 30px rgba(240,88,35,0.2),
                0 0 40px rgba(240,88,35,0.15);
    transition: box-shadow 0.5s var(--bzh-ease), transform 0.5s var(--bzh-ease);
}
.bzh-card--neon:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(240,88,35,0.6) inset,
                0 14px 40px rgba(240,88,35,0.35),
                0 0 60px rgba(240,88,35,0.25);
}
.bzh-card--neon .bzh-card-image-wrap { background: #0b1220; }
.bzh-card--neon .bzh-card-body {
    background: linear-gradient(to bottom, #0b1220 0%, #050a16 100%);
    padding: 16px 14px 20px;
}
.bzh-card--neon .bzh-card-title { color: #f8fafc; }
.bzh-card--neon .bzh-card-title { font-weight: 600; }
.bzh-card--neon .bzh-swiper .swiper-slide:hover & .bzh-card-title,
.bzh-card--neon:hover .bzh-card-title { color: #ffb08a; }
.bzh-card--neon .bzh-card-price {
    background: rgba(240,88,35,0.1); border-color: rgba(240,88,35,0.55);
    color: #ffb08a;
}
.bzh-card--neon .bzh-card-price,
.bzh-card--neon .bzh-card-price ins { color: #ffb08a; }
.bzh-card--neon .bzh-card-price del { color: rgba(248,250,252,0.45); }

/* ── 9) glass — frosted backdrop with blur (sits over colorful bg templates) ── */
.bzh-card--glass.bzh-card--product {
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.65);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 32px rgba(15,23,42,0.08),
                inset 0 1px 0 rgba(255,255,255,0.9);
    border-radius: 22px;
}
.bzh-card--glass .bzh-card-image-wrap {
    background: rgba(255,255,255,0.4); padding: 12px; border-radius: 16px;
    margin: 8px; width: calc(100% - 16px);
}
.bzh-card--glass .bzh-card-body {
    background: transparent; padding: 8px 16px 18px;
}
.bzh-card--glass .bzh-card-price {
    background: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
}

/* ── 10) split — image on one half, content on the other (horizontal) ── */
.bzh-card--split.bzh-card--product {
    flex-direction: row-reverse; align-items: stretch;
    padding: 0; background: #fff; border-radius: 20px; text-align: right;
    overflow: hidden;
}
.bzh-card--split .bzh-card-image-wrap {
    flex: 0 0 48%; width: 48%; padding: 0; aspect-ratio: auto; height: 100%;
    border-radius: 0; background: var(--bzh-bg);
}
.bzh-card--split .bzh-card-image-wrap img,
.bzh-card--split .bzh-card-image {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    border-radius: 0 !important;
}
.bzh-card--split .bzh-card-body {
    flex: 1; padding: 18px 18px 20px; gap: 12px;
    background: linear-gradient(180deg, #fff 0%, var(--bzh-bg) 100%);
    justify-content: center;
}
.bzh-card--split .bzh-card-title { min-height: 0; -webkit-line-clamp: 3; }
.bzh-card--split .bzh-card-price-wrap { justify-content: flex-start; }
.bzh-card--split .bzh-card-badge,
.bzh-card--split .bzh-card-rank { z-index: 4; }

/* ── Mobile refinements: keep single-column variants readable on small screens ── */
@media (max-width: 479px) {
    .bzh-card--split.bzh-card--product,
    .bzh-card--compact.bzh-card--product { border-radius: 14px; }
    .bzh-card--compact .bzh-card-image-wrap { flex-basis: 82px; width: 82px; }
    .bzh-card--split .bzh-card-body { padding: 14px 14px 16px; }
    .bzh-card--split .bzh-card-title { -webkit-line-clamp: 2; font-size: 13.5px; }
    .bzh-card--overlay.bzh-card--product { aspect-ratio: 4 / 5; }
}