/**
 * bazeh-components.css
 *
 * Modular, opt-in visual features layered on top of bazeh-sliders.css.
 *
 * Layout groups in this file:
 *   1. Badges — 5 style variants above the section title.
 *   2. First-card message box — 5 templates, rendered as the first swiper-slide.
 *   3. Side-strip — circular product thumbs under the slider with fade mask,
 *      hover stacking, and typing-tooltip slot.
 *
 * All styles here assume Vazirmatn + CSS variables defined in bazeh-sliders.css
 * are already available. Keep this file focused on these three features so the
 * core stylesheet stays focused on the slider scaffold itself.
 */

/* ────────────────────────────────────────────────────────────
   1. Badges (8 templates)

   Shared base: generous padding, proper clearance from the title (16px
   margin-bottom so the badge doesn't feel stuck to the h2), 13px font for
   readability. Each variant layers on its own surface treatment.
   ──────────────────────────────────────────────────────────── */

.bzh-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    border-radius: 999px;
    text-transform: none;
    white-space: nowrap;
    /* Key fix: breathing room between badge and the h2 below it. Previously
       10px felt cramped; 18px matches our section-header rhythm. */
    margin-bottom: 18px;
    align-self: flex-start;
    position: relative;
    vertical-align: middle;
}
/* In single-row headers the heading is a ROW flex with title/subtitle
   sitting next to the badge; vertical margin and align-self: flex-start
   would push the badge above the text baseline. Reset both so the flex
   `align-items: center` on the heading can actually center the badge. */
.bzh-header--split .bzh-badge,
.bzh-header--inline .bzh-badge,
.bzh-header--bar .bzh-badge,
.bzh-header--chip .bzh-badge {
    margin-bottom: 0;
    align-self: center;
    /* Nudge the pill's optical center to the cap-height of the title so a
       horizontal ruler through the text also passes through the badge. */
    vertical-align: middle;
}

/* Solid — orange→coral gradient pill with a soft bottom shadow. */
.bzh-badge--solid {
    background: linear-gradient(135deg, #f05823 0%, #ff7a45 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(240,88,35,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Outline — crisp 2px border, inner tinted background. */
.bzh-badge--outline {
    background: rgba(240,88,35,0.06);
    color: var(--bzh-sp);
    border: 2px solid var(--bzh-sp);
    padding: 7px 17px; /* compensate for 2px border */
}

/* Glow — brand gradient with concentric glow rings. */
.bzh-badge--glow {
    background: linear-gradient(135deg, var(--bzh-sp) 0%, var(--bzh-ps) 100%);
    color: #fff;
    box-shadow:
        0 0 0 4px rgba(240,88,35,0.14),
        0 0 0 8px rgba(240,88,35,0.06),
        0 8px 20px rgba(26,93,58,0.28);
}

/* Ribbon — banner flag with a notched tail on the visual-left (RTL). */
.bzh-badge--ribbon {
    background: linear-gradient(135deg, #f05823, #d94818);
    color: #fff;
    border-radius: 6px 999px 999px 6px;
    padding: 8px 22px 8px 18px;
    box-shadow: 0 4px 12px rgba(240,88,35,0.24);
}
.bzh-badge--ribbon::after {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #d94818;
}

/* Dot — minimal pill with a gently-pulsing brand dot. */
.bzh-badge--dot {
    background: rgba(15,23,42,0.04);
    color: var(--bzh-text);
    padding: 7px 16px 7px 14px;
    font-weight: 600;
}
.bzh-badge--dot::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bzh-sp);
    box-shadow: 0 0 0 4px rgba(240,88,35,0.22);
    display: inline-block;
    animation: bzh-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes bzh-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(240,88,35,0.22); }
    50%      { box-shadow: 0 0 0 6px rgba(240,88,35,0.08); }
}

/* Sharp — architectural flat label, slight chamfer at the RTL-leading edge. */
.bzh-badge--sharp {
    background: var(--bzh-text);
    color: #fff;
    border-radius: 2px 8px 8px 2px;
    padding: 8px 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 3px 10px rgba(15,23,42,0.2);
}
.bzh-badge--sharp::after {
    content: '';
    position: absolute;
    top: 6px; bottom: 6px;
    right: 4px;
    width: 2px;
    background: var(--bzh-sp);
    border-radius: 2px;
}

/* Ticket — rounded pill with two small notches (coupon look). */
.bzh-badge--ticket {
    background: #fff6f0;
    color: var(--bzh-sp);
    border: 1.5px dashed rgba(240,88,35,0.45);
    padding: 8px 18px;
    font-weight: 700;
}
.bzh-badge--ticket::before,
.bzh-badge--ticket::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bzh-white);
    border: 1.5px dashed rgba(240,88,35,0.45);
    transform: translateY(-50%);
}
.bzh-badge--ticket::before { right: -6px; }
.bzh-badge--ticket::after  { left: -6px; }

/* Split — two-tone badge: brand orange + forest green, divided diagonally. */
.bzh-badge--split {
    background: linear-gradient(100deg, var(--bzh-sp) 0%, var(--bzh-sp) 50%, var(--bzh-ps) 50%, var(--bzh-ps) 100%);
    color: #fff;
    padding: 8px 20px;
    box-shadow: 0 5px 14px rgba(26,93,58,0.22);
}

/* ── Extended badges (v1.4): 10 additional modern styles. ── */

/* Pill — soft pastel gradient with subtle inner shine. */
.bzh-badge--pill {
    background: linear-gradient(135deg, #ffe4d1 0%, #ffd0b5 100%);
    color: #9a3412;
    padding: 9px 22px;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 8px rgba(154,52,18,0.14);
}

/* Chip — minimalist chip with a star glyph. */
.bzh-badge--chip {
    background: #fff;
    color: var(--bzh-sp);
    border: 1px solid rgba(240,88,35,0.24);
    padding: 7px 14px 7px 28px;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.bzh-badge--chip::before {
    content: '★';
    position: absolute;
    inset-inline-start: 10px;
    top: 50%; transform: translateY(-50%);
    font-size: 11px;
    color: #f59e0b;
}

/* Neon — dark pill with an outer glow and animated edge. */
.bzh-badge--neon {
    background: #0b1020;
    color: #fef3c7;
    padding: 8px 20px;
    border: 1px solid rgba(251,191,36,0.65);
    box-shadow: 0 0 0 3px rgba(251,191,36,0.12), 0 0 18px rgba(251,191,36,0.45);
    letter-spacing: 0.5px;
}

/* Stamp — zig-zag-edged postal stamp feel. */
.bzh-badge--stamp {
    background: #fef3c7;
    color: #92400e;
    padding: 9px 18px;
    border: 2px dashed #d97706;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(217,119,6,0.18);
    transform: rotate(-2deg);
}

/* Bolt — high-energy badge with a moving shine. */
.bzh-badge--bolt {
    background: linear-gradient(90deg, #f59e0b 0%, #f05823 55%, #ef4444 100%);
    background-size: 200% 100%;
    color: #fff;
    padding: 8px 22px;
    box-shadow: 0 6px 14px rgba(240,88,35,0.28);
    animation: bzhBadgeBolt 3.2s ease-in-out infinite;
}
@keyframes bzhBadgeBolt {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}

/* Frame — glassy double-line frame. */
.bzh-badge--frame {
    background: rgba(255,255,255,0.55);
    color: var(--bzh-sp);
    padding: 7px 18px;
    border: 1px solid rgba(240,88,35,0.35);
    outline: 1px solid rgba(255,255,255,0.9);
    outline-offset: 2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Arrow — flag-shaped badge with a pointed tail. */
.bzh-badge--arrow {
    background: linear-gradient(135deg, #f05823, #c2410c);
    color: #fff;
    padding: 8px 26px 8px 16px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
    border-radius: 0;
}

/* Gold — subtle luxury strip. */
.bzh-badge--gold {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #f59e0b 100%);
    color: #78350f;
    padding: 8px 22px;
    border: 1px solid rgba(217,119,6,0.4);
    box-shadow: 0 2px 10px rgba(217,119,6,0.18);
    letter-spacing: 0.4px;
}

/* Tag — notched price-tag with a hole. */
.bzh-badge--tag {
    background: #fff;
    color: var(--bzh-sp);
    padding: 8px 16px 8px 28px;
    border: 1px solid rgba(240,88,35,0.28);
    position: relative;
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.bzh-badge--tag::before {
    content: '';
    position: absolute;
    inset-inline-start: 6px;
    top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px;
    background: #fff;
    border: 1px solid rgba(240,88,35,0.4);
    border-radius: 50%;
}

/* Metro — two-tone transit ticket look. */
.bzh-badge--metro {
    background: linear-gradient(90deg, #1a5d3a 0 38%, #f05823 38% 100%);
    color: #fff;
    padding: 8px 16px 8px 14px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    letter-spacing: 0.3px;
}

/* ────────────────────────────────────────────────────────────
   2. First-card message box (5 templates)
   ──────────────────────────────────────────────────────────── */

.bzh-first-card-slide { display: flex; height: auto; }

/* Whole card is one link when CTA URL is set (no nested <a> on the button). */
a.bzh-first-card.bzh-first-card--is-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline-offset: 2px;
}
a.bzh-first-card.bzh-first-card--is-link:hover,
a.bzh-first-card.bzh-first-card--is-link:focus-visible {
    color: inherit;
}
a.bzh-first-card.bzh-first-card--is-link .bzh-first-card-title,
a.bzh-first-card.bzh-first-card--is-link .bzh-first-card-subtitle {
    text-decoration: none;
}

.bzh-first-card {
    position: relative;
    width: 100%;
    /* Match the product-card aspect so it doesn't read as a broken product
       slot. The card *fills* its slide with confident typography + a large
       decorative mark, instead of floating text in a half-empty box. */
    min-height: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--bzh-radius, 16px);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    isolation: isolate;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}

/* Optional product/cover image — poster band + text block (all templates). */
.bzh-first-card--has-media {
    flex-direction: column;
}
.bzh-first-card--has-media .bzh-first-card-media {
    position: relative;
    z-index: 2;
    /* Taller band when a cover image is shown (~+50px vs 38% alone). */
    flex: 0 0 calc(38% + 50px);
    min-height: 158px;
    max-height: calc(44% + 50px);
    width: 100%;
    box-sizing: border-box;
    /* Keep artwork off the top/bottom edges of the band. */
    padding: 16px 14px;
    overflow: hidden;
    /* Base card wrap uses white; tone down gutters when using `contain`. */
    background: rgba(15, 23, 42, 0.06);
}
.bzh-first-card--has-media .bzh-first-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 40%, rgba(15, 23, 42, 0.28));
}
.bzh-first-card--has-media .bzh-first-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    transform: scale(1.02);
    transition: transform 0.45s ease;
}
.bzh-first-card--has-media:hover .bzh-first-card-media img {
    transform: scale(1.04);
}
.bzh-first-card--has-media .bzh-first-card-body {
    flex: 1;
    min-height: 0;
    padding-top: 18px;
    padding-bottom: 22px;
}
/* Dark templates: letterboxing matches the card instead of a grey band. */
.bzh-first-card--dark.bzh-first-card--has-media .bzh-first-card-media,
.bzh-first-card--neon.bzh-first-card--has-media .bzh-first-card-media,
.bzh-first-card--waves.bzh-first-card--has-media .bzh-first-card-media {
    background: rgba(255, 255, 255, 0.06);
}

.bzh-first-card-body {
    position: relative;
    z-index: 2;
    padding: 28px 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    width: 100%;
}
.bzh-first-card-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.2px;
    max-width: 16ch;
}
.bzh-first-card-subtitle {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.85;
    opacity: 0.92;
    max-width: 22ch;
}
/* Decorative divider between title and subtitle. Echoes the "underline"
   header style so the card feels like part of the brand system, not a
   foreign element. Hidden entirely when the card has no subtitle — no
   point drawing a separator with nothing underneath. */
.bzh-first-card-body::before {
    content: '';
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--bzh-divider, currentColor);
    opacity: 0.35;
    order: 1;
    margin: 2px 0;
}
.bzh-first-card--no-sub .bzh-first-card-body::before { display: none; }
.bzh-first-card-title    { order: 0; }
.bzh-first-card-subtitle { order: 2; }
.bzh-first-card-cta      { order: 3; }

.bzh-first-card-cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bzh-first-card-cta:hover { transform: translateX(-4px); } /* RTL: "forward" = LEFT */
/* No scaleX flip — the chevron SVG points LEFT natively, which is the RTL
   "next / go forward" direction. Flipping it (the previous behaviour) made
   the arrow point AWAY from the reading flow, which is what the user flagged. */
.bzh-first-card-cta svg { width: 14px; height: 14px; fill: currentColor; }

.bzh-first-card-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
/* NOTE: the previously-shared crescent blob on ::after was removed here.
   Every template now draws its OWN unique decoration inside its scoped
   rule block below, so no two templates look alike. */

/* Template 1 — gradient (orange→coral) with a diagonal lighting sweep. */
.bzh-first-card--gradient { background: linear-gradient(135deg, #f05823 0%, #f2994a 100%); color: #fff; }
.bzh-first-card--gradient .bzh-first-card-cta { background: rgba(255,255,255,0.95); color: #f05823; }
.bzh-first-card--gradient .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    top: -30%; left: -20%;
    width: 140%; height: 80%;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent);
    transform: rotate(-18deg);
}

/* Template 2 — glass with a corner shimmer highlight. */
.bzh-first-card--glass {
    background:
        linear-gradient(135deg, rgba(240,88,35,0.06), rgba(26,93,58,0.08)),
        rgba(255,255,255,0.6);
    color: var(--bzh-text);
    border: 1px solid rgba(255,255,255,0.8);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
}
.bzh-first-card--glass .bzh-first-card-cta {
    background: var(--bzh-sp);
    color: #fff;
    box-shadow: 0 6px 16px rgba(240,88,35,0.25);
}
.bzh-first-card--glass .bzh-first-card-decor::before,
.bzh-first-card--glass .bzh-first-card-decor::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
}
.bzh-first-card--glass .bzh-first-card-decor::before {
    top: 12%; right: 10%; width: 110px; height: 110px;
    background: rgba(240,88,35,0.35);
}
.bzh-first-card--glass .bzh-first-card-decor::after {
    bottom: 15%; left: 10%; width: 90px; height: 90px;
    background: rgba(26,93,58,0.28);
}

/* Template 3 — minimal (white with right-edge accent bar, no blob). */
.bzh-first-card--minimal {
    background: #fff;
    color: var(--bzh-text);
    border: 1px solid rgba(15,23,42,0.08);
}
.bzh-first-card--minimal::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--bzh-sp), var(--bzh-ps));
    z-index: 1;
}
.bzh-first-card--minimal .bzh-first-card-cta { background: var(--bzh-text); color: #fff; }
.bzh-first-card--minimal .bzh-first-card-subtitle { color: rgba(15,23,42,0.7); }

/* Template 4 — dark with diagonal line pattern (no circles). */
.bzh-first-card--dark { background: #0f172a; color: #fff; }
.bzh-first-card--dark .bzh-first-card-title { color: #fff; }
.bzh-first-card--dark .bzh-first-card-subtitle { color: rgba(255,255,255,0.78); }
.bzh-first-card--dark .bzh-first-card-cta {
    background: var(--bzh-sp);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(240,88,35,0.18);
}
.bzh-first-card--dark .bzh-first-card-decor {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(240,88,35,0.06) 0 10px,
        transparent 10px 22px
    );
}

/* Template 5 — festive with confetti dots scattered asymmetrically. */
.bzh-first-card--festive {
    background: linear-gradient(135deg, #fff 0%, #fff6f0 100%);
    color: var(--bzh-text);
    border: 1px solid rgba(240,88,35,0.2);
}
.bzh-first-card--festive .bzh-first-card-cta { background: linear-gradient(135deg, var(--bzh-sp), var(--bzh-ps)); color: #fff; }
.bzh-first-card--festive .bzh-first-card-decor {
    background:
        radial-gradient(circle 8px at 22% 16%, #f05823 50%, transparent 51%),
        radial-gradient(circle 6px at 82% 28%, #1a5d3a 50%, transparent 51%),
        radial-gradient(circle 5px at 60% 84%, #f05823 50%, transparent 51%),
        radial-gradient(circle 4px at 32% 74%, #f2994a 50%, transparent 51%),
        radial-gradient(circle 6px at 86% 78%, #f2994a 50%, transparent 51%),
        radial-gradient(circle 3px at 16% 54%, #1a5d3a 50%, transparent 51%);
    opacity: 0.55;
}

/* Template 6 — waves (horizontal SVG-style wave bottom). */
.bzh-first-card--waves {
    background: linear-gradient(180deg, #1a5d3a 0%, #0f4328 100%);
    color: #fff;
}
.bzh-first-card--waves .bzh-first-card-cta { background: #fff; color: #0f4328; }
.bzh-first-card--waves .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46%;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(240,88,35,0.35) 0%, transparent 60%),
        linear-gradient(to top, rgba(240,88,35,0.15), transparent);
}
.bzh-first-card--waves .bzh-first-card-decor::after {
    content: '';
    position: absolute;
    left: -10%; right: -10%;
    bottom: 30%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(240,88,35,0.55), transparent);
    filter: blur(1px);
}

/* Template 7 — grid (subtle dot-grid pattern on off-white). */
.bzh-first-card--grid {
    background: #fafbfc;
    color: var(--bzh-text);
    border: 1px solid rgba(15,23,42,0.08);
}
.bzh-first-card--grid .bzh-first-card-cta {
    background: var(--bzh-sp);
    color: #fff;
}
.bzh-first-card--grid .bzh-first-card-subtitle { color: rgba(15,23,42,0.65); }
.bzh-first-card--grid .bzh-first-card-decor {
    background-image: radial-gradient(circle 1.5px at center, rgba(15,23,42,0.18) 100%, transparent 100%);
    background-size: 18px 18px;
    opacity: 0.7;
}

/* Template 8 — neon (dark ink with pink/cyan glowing concentric rings). */
.bzh-first-card--neon {
    background: radial-gradient(ellipse at center, #1e1b3a 0%, #0b0920 100%);
    color: #fff;
}
.bzh-first-card--neon .bzh-first-card-title { text-shadow: 0 0 18px rgba(240,88,35,0.45); }
.bzh-first-card--neon .bzh-first-card-cta {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.85);
    box-shadow: 0 0 12px rgba(240,88,35,0.35), inset 0 0 8px rgba(240,88,35,0.15);
}
.bzh-first-card--neon .bzh-first-card-decor {
    background:
        radial-gradient(circle at 50% 50%, transparent 38%, rgba(240,88,35,0.15) 39%, rgba(240,88,35,0.15) 40%, transparent 41%),
        radial-gradient(circle at 50% 50%, transparent 55%, rgba(255,122,69,0.12) 56%, rgba(255,122,69,0.12) 57%, transparent 58%),
        radial-gradient(circle at 50% 50%, transparent 72%, rgba(26,93,58,0.12) 73%, rgba(26,93,58,0.12) 74%, transparent 75%);
}

/* Template 9 — pastel with diagonal brand stripes. */
.bzh-first-card--pastel {
    background: linear-gradient(135deg, #fff2e8 0%, #e8f5ec 100%);
    color: var(--bzh-text);
}
.bzh-first-card--pastel .bzh-first-card-cta {
    background: #fff;
    color: var(--bzh-sp);
    box-shadow: 0 6px 14px rgba(240,88,35,0.18);
}
.bzh-first-card--pastel .bzh-first-card-subtitle { color: rgba(15,23,42,0.68); }
.bzh-first-card--pastel .bzh-first-card-decor {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(240,88,35,0.08) 0 6px,
        transparent 6px 18px,
        rgba(26,93,58,0.07) 18px 22px,
        transparent 22px 40px
    );
}

/* Template 10 — spotlight (centered radial highlight against a deep base). */
.bzh-first-card--spotlight {
    background: #111827;
    color: #fff;
}
.bzh-first-card--spotlight .bzh-first-card-cta {
    background: linear-gradient(135deg, var(--bzh-sp), var(--bzh-ps));
    color: #fff;
}
.bzh-first-card--spotlight .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 50% 40%, rgba(240,88,35,0.35) 0%, rgba(240,88,35,0) 45%);
}
.bzh-first-card--spotlight .bzh-first-card-decor::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 40%);
}

/* ── Extended first-card templates (v1.4): 10 additional. ── */

/* Ribbon — clean card with a diagonal ribbon across the top. */
.bzh-first-card--ribbon {
    background: #fff;
    color: var(--bzh-text);
    border: 1px solid rgba(240,88,35,0.14);
}
.bzh-first-card--ribbon .bzh-first-card-cta {
    background: linear-gradient(135deg, var(--bzh-sp), var(--bzh-ps));
    color: #fff;
}
.bzh-first-card--ribbon .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    top: 18px;
    inset-inline-start: -40px;
    width: 200px; height: 28px;
    background: linear-gradient(90deg, var(--bzh-sp), var(--bzh-ps));
    transform: rotate(-18deg);
    box-shadow: 0 6px 14px rgba(240,88,35,0.22);
}

/* Aurora — purple/teal gradient with glowing orbs. */
.bzh-first-card--aurora {
    background: linear-gradient(135deg, #1f1147 0%, #2a3c7d 55%, #0ea5e9 100%);
    color: #fff;
}
.bzh-first-card--aurora .bzh-first-card-cta {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
}
.bzh-first-card--aurora .bzh-first-card-subtitle { color: rgba(255,255,255,0.85); }
.bzh-first-card--aurora .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    top: -20%; inset-inline-end: -10%;
    width: 70%; height: 70%;
    background: radial-gradient(closest-side, rgba(236,72,153,0.55), transparent 70%);
    filter: blur(14px);
}
.bzh-first-card--aurora .bzh-first-card-decor::after {
    content: '';
    position: absolute;
    bottom: -10%; inset-inline-start: -10%;
    width: 60%; height: 60%;
    background: radial-gradient(closest-side, rgba(56,189,248,0.5), transparent 70%);
    filter: blur(14px);
}

/* Paper — warm cream with horizontal rule lines. */
.bzh-first-card--paper {
    background:
        repeating-linear-gradient(0deg, #fffaf2 0 29px, rgba(0,0,0,0.05) 29px 30px);
    color: var(--bzh-text);
    border: 1px solid rgba(0,0,0,0.06);
}
.bzh-first-card--paper .bzh-first-card-cta {
    background: #111827;
    color: #fff;
}

/* Mesh — pastel blobs like modern hero sections. */
.bzh-first-card--mesh {
    background:
        radial-gradient(50% 45% at 10% 10%, rgba(251,146,60,0.45), transparent 60%),
        radial-gradient(45% 50% at 95% 20%, rgba(139,92,246,0.35), transparent 60%),
        radial-gradient(50% 55% at 60% 100%, rgba(16,185,129,0.32), transparent 60%),
        #fdfbf7;
    color: var(--bzh-text);
}
.bzh-first-card--mesh .bzh-first-card-cta {
    background: linear-gradient(135deg, var(--bzh-sp), var(--bzh-ps));
    color: #fff;
}

/* Brand — bold orange with graphic signature. */
.bzh-first-card--brand {
    background: linear-gradient(135deg, var(--bzh-sp), var(--bzh-ps) 140%);
    color: #fff;
}
.bzh-first-card--brand .bzh-first-card-cta {
    background: #fff;
    color: var(--bzh-sp);
}
.bzh-first-card--brand .bzh-first-card-subtitle { color: rgba(255,255,255,0.9); }
.bzh-first-card--brand .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    bottom: -40px; inset-inline-end: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
}
.bzh-first-card--brand .bzh-first-card-decor::after {
    content: 'BAZEH';
    position: absolute;
    bottom: 16px; inset-inline-start: 16px;
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.5);
}

/* Mono — editorial black & white. */
.bzh-first-card--mono {
    background: #111;
    color: #fff;
    border: 1px solid #000;
}
.bzh-first-card--mono .bzh-first-card-cta {
    background: #fff;
    color: #111;
}
.bzh-first-card--mono .bzh-first-card-subtitle { color: rgba(255,255,255,0.7); }
.bzh-first-card--mono .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    inset: 10%;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 6px;
}
.bzh-first-card--mono .bzh-first-card-decor::after {
    content: '';
    position: absolute;
    top: 0; inset-inline-end: 20%;
    width: 2px; height: 100%;
    background: rgba(255,255,255,0.08);
}

/* Forest — deep green with leaf accents. */
.bzh-first-card--forest {
    background: linear-gradient(180deg, #0f3d26 0%, #1a5d3a 100%);
    color: #fff;
}
.bzh-first-card--forest .bzh-first-card-cta {
    background: #fef3c7;
    color: #0f3d26;
}
.bzh-first-card--forest .bzh-first-card-subtitle { color: rgba(236,253,245,0.85); }
.bzh-first-card--forest .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    top: -20%; inset-inline-start: -10%;
    width: 220px; height: 220px;
    border-radius: 60% 40% 70% 30%;
    background: radial-gradient(closest-side, rgba(134,239,172,0.35), transparent 70%);
}

/* Sunset — red to gold gradient. */
.bzh-first-card--sunset {
    background: linear-gradient(160deg, #991b1b 0%, #ea580c 55%, #f59e0b 100%);
    color: #fff;
}
.bzh-first-card--sunset .bzh-first-card-cta {
    background: #fff;
    color: #991b1b;
}
.bzh-first-card--sunset .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    bottom: -40%; inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 140%; height: 100%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,0.25), transparent 70%);
}

/* Glass-lux — frosted glass with gold frame. */
.bzh-first-card--glass-lux {
    background:
        linear-gradient(135deg, rgba(240,88,35,0.08), rgba(26,93,58,0.06)),
        rgba(255,255,255,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid #d4af37;
    box-shadow: inset 0 0 0 2px rgba(212,175,55,0.25);
    color: var(--bzh-text);
}
.bzh-first-card--glass-lux .bzh-first-card-cta {
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #fff;
}

/* Magazine — oversized typography with accent bar. */
.bzh-first-card--magazine {
    background: #fafafa;
    color: #111;
    border: 1px solid rgba(0,0,0,0.06);
    padding-inline-start: 20px;
}
.bzh-first-card--magazine .bzh-first-card-title {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}
.bzh-first-card--magazine .bzh-first-card-cta {
    background: #111;
    color: #fff;
}
.bzh-first-card--magazine .bzh-first-card-decor::before {
    content: '';
    position: absolute;
    inset-inline-start: 0; top: 8%;
    width: 6px; height: 84%;
    background: var(--bzh-sp);
}

/* ────────────────────────────────────────────────────────────
   3. Side-strip (10+ circular product thumbs)
   ──────────────────────────────────────────────────────────── */

/* Layout: [ caption text ] ←gap→ [ overlapping thumb cluster ]
   The caption lives on the LEFT in RTL, thumbs cluster on the RIGHT.
   On mobile the caption stacks above the thumbs. */
.bzh-side-strip {
    position: relative;
    width: 100%;
    /* Big vertical padding is intentional: hovered thumbs scale 1.25x + lift
       -6px, AND the tooltip floats 12+~44px above each thumb. We need all
       of that to live INSIDE the strip's own box so no ancestor overflow
       hidden (theme containers, WP page shells) can ever clip it.
       Top  = tooltip height (~44) + gap (12) + scale-lift (~13) ≈ 70px
       Bot  = scale-lift + breathing ≈ 30px */
    padding: 70px 60px 30px;
    margin-top: 8px;
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: visible;
}

.bzh-side-caption {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.85;
    /* Colour resolves to the inline `--bzh-side-text` when the admin
     * sets a per-slider override; otherwise uses the template default. */
    color: var(--bzh-side-text, #475569);
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(15,23,42,0.04);
    border-right: 3px solid var(--bzh-sp);
    max-width: 44%;
}
.bzh-bg--night .bzh-side-caption,
.bzh-bg--sunset .bzh-side-caption {
    background: rgba(255,255,255,0.12);
    color: var(--bzh-side-text, rgba(255,255,255,0.92));
    border-right-color: rgba(255,255,255,0.7);
}

.bzh-side-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    direction: rtl;
    flex: 0 0 auto;
    position: relative;
    /* CRITICAL: no mask-image here. A CSS mask creates a compositing
       context whose clip region is the element's box — when an item
       scales/translates on hover it extends outside that box and the
       browser clips the overflow against the mask. Using a pseudo-element
       gradient on the strip (below) gives us the same visual "trailing
       off" look without clipping the hovered thumb or its tooltip. */
    overflow: visible;
}
/* (No fade overlay — relied on CSS mask before, which clipped hover
   expansion. Caption on the visual-left plus the overlap pattern on the
   right already reads as "here's a glimpse of many more"; a visual fade
   is a nice-to-have that isn't worth losing hover room over.) */

.bzh-side-item {
    position: relative;
    display: block;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    aspect-ratio: 1 / 1;
    /* RTL overlap: subsequent (left-of-previous) items pull their RIGHT edge
       into the previous item via negative margin-right. margin-left doesn't
       do what we want here because in RTL flex the item-to-item gap sits
       between item N's LEFT edge and item N+1's RIGHT edge. */
    margin-right: -16px;
    border-radius: 50% !important;
    border: 3px solid #fff;
    overflow: visible;
    background: #fafafa;
    box-shadow: 0 2px 8px rgba(15,23,42,0.12);
    transition: transform 0.35s var(--bzh-ease), border-color 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
    z-index: 1;
    text-decoration: none;
}
.bzh-side-item:first-child { margin-right: 0; } /* rightmost sits flush */

/* Inner ring clips the product photo; tooltip stays outside (sibling). */
.bzh-side-strip .bzh-side-item-media,
.bzh-side-strip a.bzh-side-item .bzh-side-item-media {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #fafafa;
    line-height: 0;
}
.bzh-side-strip .bzh-side-item-media img,
.bzh-side-strip a.bzh-side-item img,
.bzh-side-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    display: block !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.bzh-side-item:hover {
    transform: translateY(-6px) scale(1.25);
    z-index: 20;
    border-color: var(--bzh-sp);
    box-shadow: 0 10px 22px rgba(240,88,35,0.28);
}
/* Push siblings to the LEFT (in DOM order = visually further left in RTL)
   a little further so the hovered thumb gets room. */
.bzh-side-item:hover ~ .bzh-side-item { transform: translateX(-16px); }

/* Typing-tooltip: floats ABOVE the thumb so it never gets clipped by the
   section's bottom edge. Mobile keeps the same placement. */
.bzh-side-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 8px 14px;
    min-width: 140px;
    max-width: 220px;
    background: #0f172a;
    color: #fff;
    border-radius: 10px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.75;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 100;
}
.bzh-side-tooltip::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #0f172a;
}
.bzh-side-item:hover .bzh-side-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Blinking caret inside the tooltip while typing. JS removes .is-typing
   when the final word is committed. */
.bzh-side-tooltip.is-typing::after {
    content: '|';
    margin-inline-start: 2px;
    animation: bzh-caret 0.9s step-end infinite;
    color: var(--bzh-sp);
    font-weight: 700;
}
@keyframes bzh-caret {
    0%, 50% { opacity: 1; }
    51%,100% { opacity: 0; }
}

/* Responsive tightening for the side-strip. Top padding scales with the
   tooltip size at each breakpoint so tooltips always fit in-box. */
@media (max-width: 1024px) {
    .bzh-side-strip { padding: 64px 52px 24px; gap: 14px; }
    .bzh-side-caption { max-width: 40%; font-size: 12px; padding: 8px 12px; }
}
@media (max-width: 768px) {
    /* column-reverse → caption (DOM order 2) appears ABOVE the thumbs row
       on narrow viewports, which reads better than the thumbs-first stack. */
    .bzh-side-strip { padding: 60px 24px 20px; flex-direction: column-reverse; align-items: stretch; gap: 12px; }
    .bzh-side-caption { max-width: none; text-align: center; border-right: none; border-top: 3px solid var(--bzh-sp); }
    .bzh-side-row { justify-content: flex-start; }
    .bzh-side-item {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin-right: -12px;
    }
    .bzh-first-card { aspect-ratio: auto; min-height: 240px; }
    .bzh-first-card-title { font-size: 19px; }
}
@media (max-width: 480px) {
    .bzh-side-strip { padding: 54px 20px 18px; }
    .bzh-side-item {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        margin-right: -10px;
    }
    .bzh-side-tooltip { min-width: 120px; max-width: 180px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .bzh-side-item,
    .bzh-side-tooltip,
    .bzh-first-card-cta { transition: none !important; }
    .bzh-side-tooltip.is-typing::after { animation: none; }
    .bzh-first-card--has-media .bzh-first-card-media img { transition: none !important; }
    .bzh-first-card--has-media:hover .bzh-first-card-media img { transform: none !important; }
}

/* ────────────────────────────────────────────────────────────
   4. Pro features (opt-in per slider)

   Each feature is activated by a `.bzh-pro-<name>` class on the
   `.bzh-section` wrapper. Stacking is fine — a slider can use
   e.g. `bzh-pro-tilt bzh-pro-shapes` together.

   • bzh-pro-tilt    — 3D perspective tilt on product-card hover.
                       JS writes custom props --rx/--ry on mousemove.
   • bzh-pro-shapes  — ambient animated decorative blobs behind the
                       slider for a modern SaaS/landing-page feel.
   • bzh-pro-marquee — continuous slow auto-scroll. Swiper autoplay
                       handles the motion; this rule only tweaks the
                       cursor / nav visibility so the vibe fits.
   ──────────────────────────────────────────────────────────── */

/* 4.1 Tilt */
.bzh-pro-tilt .bzh-swiper .swiper-slide { perspective: 900px; }
.bzh-pro-tilt .bzh-swiper .swiper-slide .bzh-card {
    transform: perspective(900px)
               rotateX(var(--bzh-rx, 0deg))
               rotateY(var(--bzh-ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out, box-shadow 0.3s ease;
    will-change: transform;
}
.bzh-pro-tilt .bzh-swiper .swiper-slide .bzh-card:hover {
    box-shadow: 0 22px 48px rgba(15,23,42,0.14), 0 8px 18px rgba(240,88,35,0.12);
}
/* Inner image pops slightly forward for a real "card depth" feel. */
.bzh-pro-tilt .bzh-swiper .swiper-slide .bzh-card .bzh-card-image-wrap {
    transform: translateZ(18px);
}

/* 4.2 Shapes — decorative floating blobs rendered behind the section.
   We drive the animations entirely with CSS so there's zero JS cost,
   and we constrain them to the section box via overflow:hidden on the
   shapes container. */
.bzh-pro-shapes { overflow: hidden; }
.bzh-section-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.bzh-section-shapes span {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.55;
    will-change: transform;
}
.bzh-section-shapes .bzh-shape-1 {
    top: -80px; right: -40px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(240,88,35,0.55), transparent 65%);
    animation: bzh-shape-float-1 18s ease-in-out infinite;
}
.bzh-section-shapes .bzh-shape-2 {
    bottom: -60px; left: 10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(26,93,58,0.5), transparent 65%);
    animation: bzh-shape-float-2 22s ease-in-out infinite;
}
.bzh-section-shapes .bzh-shape-3 {
    top: 40%; left: -60px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(242,153,74,0.5), transparent 65%);
    animation: bzh-shape-float-3 26s ease-in-out infinite;
}
@keyframes bzh-shape-float-1 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-40px, 30px) scale(1.15); }
}
@keyframes bzh-shape-float-2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(40px, -30px) scale(1.1); }
}
@keyframes bzh-shape-float-3 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(30px, -20px) scale(0.9); }
}
/* Section content MUST sit above the shapes layer. */
.bzh-pro-shapes > *:not(.bzh-section-shapes) { position: relative; z-index: 1; }

/* 4.3 Marquee — nav arrows feel wrong on a continuous scroll strip.
   Hide them; the fade on the edges (that sells the "endless flow" look)
   is defined alongside the regular edge-fade block below so both share
   the same stability tricks. */
.bzh-pro-marquee .bzh-nav { display: none; }

/* 4.4 Edge fade — gentler variant applied to any slider (not just marquee)
   when `edge_fade` is enabled in the admin. Fades the first/last ~8% of
   the track so cards appear to slide in from beneath the section gutter
   instead of being cut off by a hard edge. The toggle in the admin adds
   or removes the `.bzh-edge-fade` class on the section wrapper.

   Previously this relied on a bare `mask-image` on `.bzh-slider-clip`, which
   — on pages with multiple sliders (e.g. homepage with bestsellers +
   testimonials + new-arrivals) — intermittently failed to render in
   Chromium/Safari because the mask composite was fighting the transforms
   that Swiper applies to the slides inside the clip. Forcing an isolated
   GPU-promoted layer (`isolation` + `translateZ` + `will-change`) makes
   the mask deterministic regardless of neighbour sliders or the current
   bg template, matching the behaviour marquee sliders already enjoyed. */
.bzh-edge-fade .bzh-slider-clip {
    /* 8% on each side — strong enough to be visibly different when the
       toggle is flipped, but not so much that it clips product cards. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    isolation: isolate;
    will-change: mask-image, -webkit-mask-image;
    transform: translateZ(0);
}
/* Marquee fade is more aggressive and should win when both classes
   are present on the same section. Same stability trio as above so the
   mask behaves consistently across templates. */
.bzh-edge-fade.bzh-pro-marquee .bzh-slider-clip,
.bzh-pro-marquee .bzh-slider-clip {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    isolation: isolate;
    will-change: mask-image, -webkit-mask-image;
    transform: translateZ(0);
}
/* Testimonials render 3 cards across, so an 8% edge fade sometimes sits
   entirely in the gutter and looks like nothing is happening. Pull the
   fade inward so it overlaps the first/last card a bit and the effect
   reads regardless of how many other sliders share the page. */
.bzh-section--testimonials.bzh-edge-fade .bzh-slider-clip {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.bzh-pro-marquee .bzh-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}
.bzh-pro-marquee .bzh-progress { display: none; }

@media (prefers-reduced-motion: reduce) {
    .bzh-section-shapes span { animation: none !important; }
    .bzh-pro-tilt .bzh-swiper .swiper-slide .bzh-card {
        transform: none !important;
    }
    .bzh-pro-tilt .bzh-swiper .swiper-slide .bzh-card .bzh-card-image-wrap {
        transform: none !important;
    }
}
/* Touch input: tilt maths would fire on every scroll-drag — skip it.
   `hover: none` matches phones/tablets reliably. */
@media (hover: none) {
    .bzh-pro-tilt .bzh-swiper .swiper-slide .bzh-card,
    .bzh-pro-tilt .bzh-swiper .swiper-slide .bzh-card .bzh-card-image-wrap {
        transform: none !important;
    }
}