/* Hero banners of the home page (js/hero-banner.js). The same file styles the admin's live preview, so what you preview is what the shop shows.
   No inline styles anywhere: fixed visuals are classes; per-banner numbers and custom colours are CSS custom properties that the page sets through the
   CSSOM (element.style.setProperty) or that the prerender writes into a generated stylesheet (css/banners.<hash>.css), never as style="" attributes.

   Sizing: the stage is drawn at its design size (1440 x 560 desktop, 450 x 550 mobile) and scales with its own width: --u = stage width / design width, so
   "calc(66 * var(--u))" is the 66px of the reference at design width. The layout switches at 768px of the CONTAINER width (the admin preview resizes the
   container, the shop's container is the viewport). Browsers without container query units (@supports not (width: 1cqw)) get the same layout with
   viewport-based sizes and media queries instead. Positions are logical (inline-start / inline-end), so Arabic mirrors the layout. */

/* ---------- themes: colours of the four presets (a banner's own colours override these through --hb-* properties) ---------- */
.hb-theme-blush, .hb-theme-custom {
  --hb-bg-1: #fbf1ec; --hb-bg-2: #f5ddd6; --hb-bg-3: #eac1b9; --hb-stop-d: 52%; --hb-stop-m: 55%;
  --hb-glow: rgba(255, 255, 255, 0.85); --hb-glow-y: 45%; --hb-glow-hold: 0%; --hb-glow-mid: 41%; --hb-glow-midpos: 62%; --hb-glow-end: 72%;
  --hb-ring: rgba(122, 46, 58, 0.28); --hb-shadow: rgba(110, 50, 45, 0.30);
  --hb-eyebrow: #7a2e3a; --hb-headline: #2a1a33; --hb-ar: #5b2a44; --hb-body: #4a3340; --hb-lead: #2a1a33; --hb-cta-bg: #6b4c93; --hb-cta-fg: #ffffff; --hb-note: #5b2a44;
  --hb-dot: rgba(122, 46, 58, 0.10);
}
.hb-theme-lime {
  --hb-bg-1: #faf8dc; --hb-bg-2: #f3f2be; --hb-bg-3: #eeefaa; --hb-stop-d: 48%; --hb-stop-m: 50%;
  --hb-glow: #eeefaa; --hb-glow-y: 50%; --hb-glow-hold: 40%; --hb-glow-mid: 100%; --hb-glow-midpos: 40%; --hb-glow-end: 70%;
  --hb-ring: rgba(80, 86, 20, 0.22); --hb-shadow: rgba(80, 86, 20, 0.25);
  --hb-eyebrow: #4f5410; --hb-headline: #26280f; --hb-ar: #3f3a5e; --hb-body: #3a3d1a; --hb-lead: #26280f; --hb-cta-bg: #6b4c93; --hb-cta-fg: #ffffff; --hb-note: #3a3d1a;
}
.hb-theme-plum {
  --hb-bg-1: #2b1d3f; --hb-bg-2: #3a2756; --hb-bg-3: #4b3470; --hb-stop-d: 55%; --hb-stop-m: 55%;
  --hb-glow: rgba(255, 226, 170, 0.55); --hb-glow-y: 50%; --hb-glow-hold: 0%; --hb-glow-mid: 33%; --hb-glow-midpos: 48%; --hb-glow-end: 70%;
  --hb-ring: rgba(251, 244, 232, 0.22); --hb-shadow: rgba(8, 2, 20, 0.55);
  --hb-eyebrow: #f2c98a; --hb-headline: #fbf4e8; --hb-ar: #f2c98a; --hb-body: #e7ddf0; --hb-lead: #ffffff; --hb-cta-bg: #fbf4e8; --hb-cta-fg: #2b1d3f; --hb-note: #e7ddf0;
}
.hb-theme-lavender {
  --hb-bg-1: #f6f1fb; --hb-bg-2: #e9e0f4; --hb-bg-3: #d9ccec; --hb-stop-d: 52%; --hb-stop-m: 55%;
  --hb-glow: rgba(255, 255, 255, 0.9); --hb-glow-y: 50%; --hb-glow-hold: 0%; --hb-glow-mid: 44%; --hb-glow-midpos: 55%; --hb-glow-end: 72%;
  --hb-ring: rgba(107, 76, 147, 0.30); --hb-shadow: rgba(60, 30, 100, 0.30);
  --hb-eyebrow: #5a3e82; --hb-headline: #2a1a33; --hb-ar: #5a3e82; --hb-body: #4a3a58; --hb-lead: #2a1a33; --hb-cta-bg: #6b4c93; --hb-cta-fg: #ffffff; --hb-note: #4a3a58; --hb-streak: #f4e86b;
}

/* ---------- the banner ---------- */
.hb-wrap { container: hbw / inline-size; inline-size: 100%; }
.hb {
  position: relative; inline-size: 100%; overflow: hidden; line-height: normal; color: var(--hb-body); font-family: 'Manrope', var(--font-sans, system-ui), sans-serif;
  background: linear-gradient(100deg, var(--hb-bg-1) 0%, var(--hb-bg-2) var(--hb-stop-d), var(--hb-bg-3) 100%);
}
.hb-stage {
  container: hbs / inline-size; position: relative; inline-size: 100%; max-inline-size: 1440px; margin-inline: auto; aspect-ratio: 1440 / 560;
  --u: calc(100cqw / 1440);
  /* the active set of per-device numbers (desktop by default; the compact layout below switches to the mobile set) */
  --h: var(--hb-d-h); --r: var(--hb-d-r); --t: var(--hb-d-t); --b: var(--hb-d-b); --rot: var(--hb-d-rot); --ox: var(--hb-d-ox); --oy: var(--hb-d-oy);
  --bd-s: var(--hb-d-bd-s); --bd-r: var(--hb-d-bd-r); --bd-t: var(--hb-d-bd-t); --bd-b: var(--hb-d-bd-b);
  --sk-w: var(--hb-d-sk-w); --sk-h: var(--hb-d-sk-h); --sk-r: var(--hb-d-sk-r); --sk-t: var(--hb-d-sk-t); --sk-b: var(--hb-d-sk-b); --sk-rot: var(--hb-d-sk-rot); --sk-op: var(--hb-d-sk-op);
  --flip: 1;
}
.hb[dir='rtl'] .hb-stage { --flip: -1; }

/* decoration: a soft glow, a ring and a small dot, placed per theme (design pixels) */
.hb-deco { position: absolute; border-radius: 50%; pointer-events: none; }
.hb-glow {
  inset-inline-end: calc(120 * var(--u)); inset-block-start: calc(20 * var(--u)); inline-size: calc(520 * var(--u)); block-size: calc(520 * var(--u));
  background: radial-gradient(circle at 50% 50%, var(--hb-glow), transparent 70%);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .hb-glow {
    background: radial-gradient(circle at 50% var(--hb-glow-y), var(--hb-glow) 0%, var(--hb-glow) var(--hb-glow-hold),
      color-mix(in srgb, var(--hb-glow) var(--hb-glow-mid), transparent) var(--hb-glow-midpos), transparent var(--hb-glow-end));
  }
}
.hb-ring { inset-inline-end: calc(70 * var(--u)); inset-block-start: calc(70 * var(--u)); inline-size: calc(170 * var(--u)); block-size: calc(170 * var(--u)); border: 2px solid var(--hb-ring); }
.hb-dot { display: none; background: var(--hb-dot); }
.hb-theme-blush .hb-dot, .hb-theme-custom .hb-dot { display: block; inset-inline-end: calc(470 * var(--u)); inset-block-end: calc(56 * var(--u)); inline-size: calc(92 * var(--u)); block-size: calc(92 * var(--u)); }
.hb-theme-lime .hb-glow { inset-inline-end: calc(150 * var(--u)); inset-block-start: calc(-40 * var(--u)); inline-size: calc(640 * var(--u)); block-size: calc(640 * var(--u)); }
.hb-theme-lime .hb-ring { inset-inline-end: calc(168 * var(--u)); inset-block-start: calc(52 * var(--u)); inline-size: calc(456 * var(--u)); block-size: calc(456 * var(--u)); }
.hb-theme-plum .hb-glow { inset-inline-end: calc(90 * var(--u)); inset-block-start: calc(-60 * var(--u)); inline-size: calc(680 * var(--u)); block-size: calc(680 * var(--u)); }
.hb-theme-plum .hb-ring { inset-inline-end: calc(150 * var(--u)); inset-block-start: calc(40 * var(--u)); inline-size: calc(480 * var(--u)); block-size: calc(480 * var(--u)); }
.hb-theme-plum .hb-dot { display: block; background: none; border: 2px solid var(--hb-ring); inset-inline-end: calc(70 * var(--u)); inset-block-end: calc(70 * var(--u)); inline-size: calc(110 * var(--u)); block-size: calc(110 * var(--u)); }
.hb-theme-lavender .hb-glow { inset-inline-end: calc(80 * var(--u)); inset-block-start: calc(-30 * var(--u)); inline-size: calc(620 * var(--u)); block-size: calc(620 * var(--u)); }
.hb-theme-lavender .hb-ring { inset-inline-end: calc(120 * var(--u)); inset-block-start: calc(60 * var(--u)); inline-size: calc(140 * var(--u)); block-size: calc(140 * var(--u)); }

/* the product picture (a transparent cutout): size, offset and tilt come from the banner's layout numbers */
.hb-img {
  position: absolute; block-size: calc(var(--h) * var(--u)); inline-size: auto; max-inline-size: none;
  inset-inline-end: calc(var(--r) * var(--u)); inset-block-start: calc(var(--t) * var(--u)); inset-block-end: calc(var(--b) * var(--u));
  transform: rotate(calc(var(--rot) * var(--flip) * 1deg)); transform-origin: calc(var(--ox) * 1%) calc(var(--oy) * 1%);
  filter: drop-shadow(0 calc(26 * var(--u)) calc(28 * var(--u)) var(--hb-shadow));
}
.hb[dir='rtl'] .hb-img { transform-origin: calc((100 - var(--ox)) * 1%) calc(var(--oy) * 1%); }
.hb-full { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } /* kind "image": a full picture */

.hb-badge {
  position: absolute; inset-inline-end: calc(var(--bd-r) * var(--u)); inset-block-start: calc(var(--bd-t) * var(--u)); inset-block-end: calc(var(--bd-b) * var(--u));
  inline-size: calc(var(--bd-s) * var(--u)); block-size: calc(var(--bd-s) * var(--u)); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--hb-badge-bg, #6b4c93); color: var(--hb-badge-fg, #fff); transform: rotate(calc(var(--hb-badge-rot, -10) * var(--flip) * 1deg));
}
.hb-badge-big { font-size: calc(var(--bd-s) * 0.25 * var(--u)); font-weight: 800; line-height: 1; }
.hb-badge-small { font-size: calc(var(--bd-s) * 0.092 * var(--u)); font-weight: 800; letter-spacing: 0.1em; margin-block-start: calc(var(--bd-s) * 0.033 * var(--u)); white-space: pre-line; line-height: 1.15; }
.hb-streak {
  position: absolute; border-radius: 999px; background: var(--hb-streak, #f4e86b); pointer-events: none;
  inline-size: calc(var(--sk-w) * var(--u)); block-size: calc(var(--sk-h) * var(--u)); inset-inline-end: calc(var(--sk-r) * var(--u)); inset-block-start: calc(var(--sk-t) * var(--u)); inset-block-end: calc(var(--sk-b) * var(--u));
  opacity: var(--sk-op, 0.55); transform: rotate(calc(var(--sk-rot) * var(--flip) * 1deg));
}

/* the copy: eyebrow, headline in the page language, the other language as a second line, text, button, note */
.hb-copy {
  position: absolute; inset-inline-start: calc(96 * var(--u)); inset-block: 0; inline-size: calc(700 * var(--u));
  display: flex; flex-direction: column; justify-content: center; gap: calc(18 * var(--u)); z-index: 2; text-align: start;
}
.hb-text { display: contents; } /* desktop: its children are items of the copy column */
.hb-eyebrow { margin: 0; font-size: max(12px, calc(14 * var(--u))); font-weight: 800; letter-spacing: 0.22em; color: var(--hb-eyebrow); text-transform: none; }
.hb-title { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: max(30px, calc(66 * var(--u))); line-height: 1.06; font-weight: 700; color: var(--hb-headline); white-space: pre-line; }
.hb-title:lang(ar) { font-family: 'Cairo', system-ui, sans-serif; font-size: max(30px, calc(56 * var(--u))); line-height: 1.25; }
.hb-second { margin: 0; font-size: max(17px, calc(30 * var(--u))); font-weight: 700; color: var(--hb-ar); white-space: pre-line; font-family: 'Playfair Display', Georgia, serif; }
.hb-second :lang(ar) { font-family: 'Cairo', system-ui, sans-serif; }
.hb-body { margin: 0; font-size: max(14px, calc(17 * var(--u))); line-height: 1.5; color: var(--hb-body); max-inline-size: calc(480 * var(--u)); min-inline-size: min(100%, 260px); }
.hb-lead { font-weight: 800; color: var(--hb-lead); }
.hb-actions { display: flex; align-items: center; gap: calc(22 * var(--u)); margin-block-start: calc(6 * var(--u)); flex-wrap: wrap; }
.hb-cta {
  display: inline-flex; align-items: center; gap: calc(14 * var(--u)); min-block-size: max(44px, calc(54 * var(--u))); padding-inline: max(20px, calc(30 * var(--u))); border-radius: 999px;
  background: var(--hb-cta-bg); color: var(--hb-cta-fg); font-size: max(14px, calc(16 * var(--u))); font-weight: 800; text-decoration: none; white-space: nowrap;
}
.hb-cta:hover { filter: brightness(1.08); }
.hb-cta:focus-visible { outline: 3px solid var(--hb-headline); outline-offset: 3px; }
.hb-cta-sep { inline-size: 1px; block-size: 18px; background: currentColor; opacity: 0.5; }
.hb-cta :lang(ar) { font-family: 'Cairo', system-ui, sans-serif; font-weight: 700; font-size: 1.06em; }
.hb-note { margin: 0; font-size: max(12px, calc(14 * var(--u))); font-weight: 700; color: var(--hb-note); }

/* ---------- compact layout (mobile design, 450 x 550) ---------- */
@container hbw (max-width: 767px) {
  .hb { background: linear-gradient(160deg, var(--hb-bg-1) 0%, var(--hb-bg-2) var(--hb-stop-m), var(--hb-bg-3) 100%); }
  .hb-stage {
    aspect-ratio: 450 / 550; max-inline-size: 560px; --u: calc(100cqw / 450);
    --h: var(--hb-m-h); --r: var(--hb-m-r); --t: var(--hb-m-t); --b: var(--hb-m-b); --rot: var(--hb-m-rot); --ox: var(--hb-m-ox); --oy: var(--hb-m-oy);
    --bd-s: var(--hb-m-bd-s); --bd-r: var(--hb-m-bd-r); --bd-t: var(--hb-m-bd-t); --bd-b: var(--hb-m-bd-b);
    --sk-w: var(--hb-m-sk-w); --sk-h: var(--hb-m-sk-h); --sk-r: var(--hb-m-sk-r); --sk-t: var(--hb-m-sk-t); --sk-b: var(--hb-m-sk-b); --sk-rot: var(--hb-m-sk-rot); --sk-op: var(--hb-m-sk-op);
  }
  .hb-glow, .hb-theme-lime .hb-glow, .hb-theme-plum .hb-glow, .hb-theme-lavender .hb-glow { inset-inline-end: calc(-40 * var(--u)); inset-block-start: auto; inset-block-end: calc(-60 * var(--u)); inline-size: calc(420 * var(--u)); block-size: calc(420 * var(--u)); }
  .hb-theme-lime .hb-glow { inset-inline-end: calc(-60 * var(--u)); inset-block-end: calc(-80 * var(--u)); inline-size: calc(460 * var(--u)); block-size: calc(460 * var(--u)); }
  .hb-theme-plum .hb-glow { inset-inline-end: calc(-70 * var(--u)); inset-block-end: calc(-90 * var(--u)); inline-size: calc(480 * var(--u)); block-size: calc(480 * var(--u)); }
  .hb-theme-lavender .hb-glow { inset-inline-end: calc(-60 * var(--u)); inset-block-end: calc(-70 * var(--u)); inline-size: calc(460 * var(--u)); block-size: calc(460 * var(--u)); }
  .hb-ring, .hb-theme-blush .hb-ring { inset-inline-end: calc(28 * var(--u)); inset-block-start: auto; inset-block-end: calc(150 * var(--u)); inline-size: calc(90 * var(--u)); block-size: calc(90 * var(--u)); }
  .hb-theme-lime .hb-ring { inset-block-start: auto; inset-inline-end: calc(12 * var(--u)); inset-block-end: calc(6 * var(--u)); inline-size: calc(300 * var(--u)); block-size: calc(300 * var(--u)); }
  .hb-theme-plum .hb-ring { inset-block-start: auto; inset-inline-end: calc(20 * var(--u)); inset-block-end: calc(20 * var(--u)); inline-size: calc(290 * var(--u)); block-size: calc(290 * var(--u)); }
  .hb-theme-lavender .hb-ring { inset-block-start: auto; inset-inline-end: calc(24 * var(--u)); inset-block-end: calc(270 * var(--u)); inline-size: calc(80 * var(--u)); block-size: calc(80 * var(--u)); }
  .hb-theme-blush .hb-dot, .hb-theme-custom .hb-dot, .hb-theme-plum .hb-dot { display: none; }
  .hb-img { filter: drop-shadow(0 calc(18 * var(--u)) calc(20 * var(--u)) var(--hb-shadow)); }
  .hb-copy { display: contents; }
  .hb-text { display: flex; flex-direction: column; gap: calc(12 * var(--u)); position: absolute; inset-inline: calc(28 * var(--u)); inset-block-start: calc(34 * var(--u)); z-index: 2; }
  .hb-eyebrow { font-size: max(11px, calc(11 * var(--u))); letter-spacing: 0.2em; }
  .hb-lead { font-weight: inherit; color: inherit; } /* the mobile design shows the text in one plain weight */
  .hb-badge { z-index: 3; } /* on the phone the round badge is IN FRONT of the product picture (the reference puts it behind, where the tube hides most of it); the copy (z-index 2) stays clear of it by position */
  .hb-title { font-size: max(30px, calc(40 * var(--u))); line-height: 1.08; }
  .hb-title:lang(ar) { font-size: max(28px, calc(34 * var(--u))); line-height: 1.3; }
  .hb-second { font-size: max(16px, calc(19 * var(--u))); }
  .hb-body { font-size: max(13px, calc(14 * var(--u))); line-height: 1.45; max-inline-size: calc(226 * var(--u)); min-inline-size: 0; }
  .hb-actions { position: absolute; inset-inline-start: calc(28 * var(--u)); inset-block-end: calc(34 * var(--u)); flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); margin: 0; z-index: 2; }
  .hb-cta { min-block-size: max(44px, calc(48 * var(--u))); gap: calc(12 * var(--u)); padding-inline: max(20px, calc(24 * var(--u))); font-size: max(14px, calc(15 * var(--u))); }
  .hb-note { font-size: max(12px, calc(12 * var(--u))); max-inline-size: calc(150 * var(--u)); line-height: 1.35; }
}

/* ---------- old browsers without container query units: the same two layouts from the viewport width ---------- */
@supports not (width: 1cqw) {
  .hb-stage { --u: calc(min(100vw, 1440px) / 1440); }
  @media (max-width: 767px) {
    .hb { background: linear-gradient(160deg, var(--hb-bg-1) 0%, var(--hb-bg-2) var(--hb-stop-m), var(--hb-bg-3) 100%); }
    .hb-stage {
      aspect-ratio: 450 / 550; max-inline-size: 560px; --u: calc(min(100vw, 560px) / 450);
      --h: var(--hb-m-h); --r: var(--hb-m-r); --t: var(--hb-m-t); --b: var(--hb-m-b); --rot: var(--hb-m-rot); --ox: var(--hb-m-ox); --oy: var(--hb-m-oy);
      --bd-s: var(--hb-m-bd-s); --bd-r: var(--hb-m-bd-r); --bd-t: var(--hb-m-bd-t); --bd-b: var(--hb-m-bd-b);
      --sk-w: var(--hb-m-sk-w); --sk-h: var(--hb-m-sk-h); --sk-r: var(--hb-m-sk-r); --sk-t: var(--hb-m-sk-t); --sk-b: var(--hb-m-sk-b); --sk-rot: var(--hb-m-sk-rot); --sk-op: var(--hb-m-sk-op);
    }
    .hb-glow, .hb-theme-lime .hb-glow, .hb-theme-plum .hb-glow, .hb-theme-lavender .hb-glow { inset-inline-end: calc(-40 * var(--u)); inset-block-start: auto; inset-block-end: calc(-60 * var(--u)); inline-size: calc(420 * var(--u)); block-size: calc(420 * var(--u)); }
    .hb-ring, .hb-theme-blush .hb-ring, .hb-theme-lime .hb-ring, .hb-theme-plum .hb-ring, .hb-theme-lavender .hb-ring { inset-inline-end: calc(24 * var(--u)); inset-block-start: auto; inset-block-end: calc(150 * var(--u)); inline-size: calc(90 * var(--u)); block-size: calc(90 * var(--u)); }
    .hb-theme-blush .hb-dot, .hb-theme-custom .hb-dot, .hb-theme-plum .hb-dot { display: none; }
    .hb-img { filter: drop-shadow(0 calc(18 * var(--u)) calc(20 * var(--u)) var(--hb-shadow)); }
    .hb-copy { display: contents; }
    .hb-text { display: flex; flex-direction: column; gap: calc(12 * var(--u)); position: absolute; inset-inline: calc(28 * var(--u)); inset-block-start: calc(34 * var(--u)); z-index: 2; }
    .hb-eyebrow { font-size: max(11px, calc(11 * var(--u))); letter-spacing: 0.2em; }
    .hb-lead { font-weight: inherit; color: inherit; }
    .hb-badge { z-index: 3; }
    .hb-title { font-size: max(30px, calc(40 * var(--u))); line-height: 1.08; }
    .hb-title:lang(ar) { font-size: max(28px, calc(34 * var(--u))); line-height: 1.3; }
    .hb-second { font-size: max(16px, calc(19 * var(--u))); }
    .hb-body { font-size: max(13px, calc(14 * var(--u))); line-height: 1.45; max-inline-size: calc(226 * var(--u)); min-inline-size: 0; }
    .hb-actions { position: absolute; inset-inline-start: calc(28 * var(--u)); inset-block-end: calc(34 * var(--u)); flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); margin: 0; z-index: 2; }
    .hb-cta { min-block-size: max(44px, calc(48 * var(--u))); gap: calc(12 * var(--u)); padding-inline: max(20px, calc(24 * var(--u))); font-size: max(14px, calc(15 * var(--u))); }
    .hb-note { font-size: max(12px, calc(12 * var(--u))); max-inline-size: calc(150 * var(--u)); line-height: 1.35; }
  }
}

/* ---------- the slider: slides share one grid cell (the height is reserved by the stage's aspect ratio), cross-fade, controls in a row below ---------- */
.hb-section { background: var(--cream, #f7eedf); }
.hb-slider { position: relative; }
.hb-slides { display: grid; }
.hb-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.hb-slide[data-active] { opacity: 1; visibility: visible; transition: opacity 0.5s ease; z-index: 1; }
.hb-bar { display: none; align-items: center; justify-content: center; gap: 14px; padding-block: 10px; }
.hb-slider[data-multi] .hb-bar { display: flex; min-block-size: 64px; }
.hb-btn {
  inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1px solid var(--line, #e7dccb); background: var(--card, #fffefb); color: var(--ink, #140d1b);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.hb-btn:hover { border-color: var(--purple, #6b5198); }
.hb-dots { display: flex; gap: 2px; align-items: center; }
.hb-dot-btn { inline-size: 24px; block-size: 44px; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.hb-dot-btn::before { content: ''; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--line, #cfc3b0); border: 1px solid var(--muted, #655b6b); transition: transform 0.2s, background 0.2s; }
.hb-dot-btn[aria-current='true']::before { background: var(--purple, #6b5198); border-color: var(--purple, #6b5198); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .hb-slide, .hb-slide[data-active] { transition: none; }
  .hb-dot-btn::before { transition: none; }
}
.hb-prev .icon { transform: scaleX(-1); } /* the arrow icon points forward (right); the previous button mirrors it, and the whole pair mirrors in Arabic */
:root[dir='rtl'] .hb-prev .icon { transform: none; }
:root[dir='rtl'] .hb-next .icon { transform: scaleX(-1); }
.hb-toggle { font-size: 12px; letter-spacing: -1px; }
.hb-toggle-ico { display: inline-block; line-height: 1; }