/* AL AYN homepage hero + product slider. Scoped plain CSS; the frozen Tailwind bundle is untouched.
   JS hooks (assets/js/home-promotion.js): [data-home-promo] [data-promo-stage|slide|page|prev|next|toggle|controls],
   .is-active, .is-ready, [data-playing]. Falls back to --al-* tokens from storefront-tokens.min.css. */
.al-promo {
    --promo-paper: #f5f0e7;
    --promo-panel: var(--al-surface, #fff);
    --promo-ink: var(--al-ink, #111827);
    --promo-text: var(--al-text, #1f2937);
    --promo-muted: var(--al-text-muted, #4b5563);
    --promo-subtle: var(--al-text-subtle, #6b7280);
    --promo-line: var(--al-line, #e5e7eb);
    --promo-line-strong: var(--al-line-strong, #d1d5db);
    --promo-gold: var(--al-accent, #d4a537);
    --promo-gold-strong: var(--al-accent-strong, #b8891a);
    --promo-gold-deep: var(--al-accent-deep, #8a6b24);
    --promo-tint: var(--al-accent-tint, #fffbeb);
    --promo-sale: var(--al-sale, #dc2626);
    --promo-save: #047857;
    --promo-radius: var(--al-radius-xl, 20px);
    --promo-ease: cubic-bezier(.22, .61, .36, 1);
    --promo-duration: 700ms;
    --promo-dwell: 7000ms;
    color-scheme: light;
    position: relative;
    overflow: hidden;
    color: var(--promo-text);
    background-color: var(--promo-paper);
    /* jamdani-style gold lattice over cream, plus a soft glow behind the panel */
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23b8891a' stroke-opacity='.13'%3E%3Cpath d='M28 4 52 28 28 52 4 28z'/%3E%3Cpath d='M28 16 40 28 28 40 16 28z'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='1.5' fill='%23b8891a' fill-opacity='.2'/%3E%3C/svg%3E"),
        radial-gradient(70% 60% at 50% 0%, rgba(212, 165, 55, .22), rgba(212, 165, 55, 0) 70%);
}
.al-promo *, .al-promo *::before, .al-promo *::after { box-sizing: border-box; }
.al-promo [hidden] { display: none !important; }
.al-promo__inner {
    max-width: var(--al-container, 80rem);
    margin: 0 auto;
    padding: 12px 16px 20px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}
.al-promo__panel {
    position: relative;
    padding: 16px;
    background: var(--promo-panel);
    border: 1px solid rgba(212, 165, 55, .3);
    border-radius: var(--promo-radius);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 24px 48px -28px rgba(138, 107, 36, .4);
    overflow: hidden;
}

/* ---- head ---- */
.al-promo__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed rgba(212, 165, 55, .5); }
.al-promo__heading { min-width: 0; }
.al-promo__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 10px 4px 8px; border: 1px solid rgba(212, 165, 55, .45); border-radius: 999px; background: var(--promo-tint); color: var(--promo-gold-deep); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; }
.al-promo__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--promo-sale); box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); animation: al-promo-pulse 2s ease-in-out infinite; }
.al-promo__title { margin: 0; font-family: var(--al-font-heading, 'Playfair Display', Georgia, serif); font-size: clamp(1.5rem, 1.05rem + 2vw, 2.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--promo-ink); overflow-wrap: anywhere; }
.al-promo__title strong { color: var(--promo-gold-deep); font-weight: 700; }
.al-promo__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; color: var(--promo-ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.al-promo__all svg { width: 18px; height: 18px; transition: transform 150ms; }

/* ---- stage + slides (stacked in one grid cell, so the hero never jumps in height) ---- */
.al-promo__stage { display: grid; isolation: isolate; touch-action: pan-y pinch-zoom; }
.al-promo__slide {
    grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(24px, 0, 0);
    transition: opacity var(--promo-duration) var(--promo-ease), transform var(--promo-duration) var(--promo-ease), visibility 0s linear var(--promo-duration);
}
.al-promo__slide.is-active { z-index: 1; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }

.al-promo__figure { position: relative; min-width: 0; }
.al-promo__photo { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 70vh; border-radius: 16px; overflow: hidden; background: var(--promo-paper); box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .06); -webkit-tap-highlight-color: transparent; }
@supports not (aspect-ratio: 1 / 1) { .al-promo__photo { height: 0; padding-bottom: 100%; max-height: none; } }
.al-promo__photo img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.al-promo.is-ready .is-active .al-promo__photo img { animation: al-promo-drift var(--promo-dwell) var(--promo-ease) both; }
.al-promo[data-playing="false"] .al-promo__photo img { animation-play-state: paused; }
.al-promo__badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 11px; border-radius: 999px; background: var(--promo-sale); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; box-shadow: 0 8px 16px -8px rgba(220, 38, 38, .7); pointer-events: none; }

.al-promo__copy { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.al-promo__kicker { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--promo-gold-deep); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.al-promo__kicker span:last-child { color: var(--promo-subtle); font-variant-numeric: tabular-nums; }
.al-promo__name { margin: 0; font-family: var(--al-font-heading, 'Playfair Display', Georgia, serif); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); font-weight: 600; line-height: 1.25; color: var(--promo-ink); overflow-wrap: anywhere; }
.al-promo__name a { color: inherit; text-decoration: none; }
.al-promo__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-variant-numeric: tabular-nums; }
.al-promo__now { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700; line-height: 1.1; color: var(--promo-ink); }
.al-promo__was { font-size: 15px; color: var(--promo-subtle); }
.al-promo__save { padding: 3px 8px; border-radius: 6px; background: rgba(4, 120, 87, .1); color: var(--promo-save); font-size: 13px; font-weight: 600; line-height: 1.4; }
.al-promo__actions { display: flex; gap: 10px; margin-top: 4px; }
.al-promo__cta, .al-promo__ghost { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 8px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color 150ms, border-color 150ms, color 150ms, transform 150ms; -webkit-tap-highlight-color: transparent; }
.al-promo__cta { background: var(--promo-ink); color: #fff; border: 1px solid var(--promo-ink); box-shadow: 0 12px 24px -14px rgba(17, 24, 39, .7); }
.al-promo__cta svg { width: 18px; height: 18px; flex: 0 0 18px; transition: transform 150ms; }
.al-promo__ghost { background: #fff; color: var(--promo-ink); border: 1px solid var(--promo-line-strong); }
.al-promo__terms { margin: 0; color: var(--promo-subtle); font-size: 12px; line-height: 1.5; }
.al-promo__usp { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.al-promo__usp li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--promo-paper); color: var(--promo-text); font-size: 12px; font-weight: 500; line-height: 1.3; }
.al-promo__usp svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--promo-gold-deep); }

/* ---- controls: product thumbnails + transport ---- */
.al-promo__controls { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--promo-line); }
.al-promo__pages { flex: 1 1 auto; display: flex; gap: 8px; min-width: 0; margin: -6px; padding: 6px; scroll-padding: 6px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.al-promo__pages::-webkit-scrollbar { display: none; }
.al-promo__page { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 56px; min-height: 56px; margin: 0; padding: 4px; border: 1px solid var(--promo-line); border-radius: 12px; background: #fff; color: var(--promo-text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; transition: border-color 150ms, box-shadow 150ms; }
.al-promo__page.is-active { border-color: var(--promo-gold-strong); box-shadow: 0 0 0 1px var(--promo-gold-strong); }
.al-promo__thumb { flex: 0 0 46px; width: 46px; height: 46px; display: block; border-radius: 8px; object-fit: cover; background: var(--promo-paper); }
.al-promo__page-text { display: none; min-width: 0; padding-right: 8px; }
.al-promo__page-name { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.3; }
.al-promo__page-price { display: block; color: var(--promo-muted); font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.al-promo__track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(212, 165, 55, .18); }
.al-promo__track > span { display: block; width: 100%; height: 100%; background: var(--promo-gold-strong); transform: scaleX(0); transform-origin: left center; }
.al-promo[data-playing="true"] .al-promo__page.is-active .al-promo__track > span { animation: al-promo-progress var(--promo-dwell) linear forwards; }
.al-promo__transport { flex: 0 0 auto; display: flex; gap: 6px; margin-left: auto; }
.al-promo__transport button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--promo-line-strong); border-radius: 50%; background: #fff; color: var(--promo-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 150ms, border-color 150ms, color 150ms, transform 150ms; }
.al-promo__transport svg { width: 20px; height: 20px; }

/* ---- states ---- */
@media (hover: hover) {
    .al-promo__all:hover svg, .al-promo__cta:hover svg { transform: translateX(3px); }
    .al-promo__cta:hover { background: var(--promo-gold-deep); border-color: var(--promo-gold-deep); }
    .al-promo__ghost:hover { border-color: var(--promo-ink); }
    .al-promo__name a:hover { text-decoration: underline; text-decoration-color: var(--promo-gold); text-underline-offset: 3px; }
    .al-promo__page:hover { border-color: var(--promo-gold); }
    .al-promo__transport button:hover { background: var(--promo-ink); border-color: var(--promo-ink); color: #fff; }
}
.al-promo__cta:active, .al-promo__ghost:active, .al-promo__transport button:active { transform: translateY(1px); }
.al-promo a:focus, .al-promo button:focus { outline: 3px solid rgba(212, 165, 55, .75); outline-offset: 2px; }
.al-promo a:focus:not(:focus-visible), .al-promo button:focus:not(:focus-visible) { outline: none; }

/* ---- Bengali typography: Hind Siliguri, no tracking (letter-spacing breaks conjuncts) ---- */
html[lang="bn"] .al-promo__title, html[lang="bn"] .al-promo__name { font-family: var(--al-font-bengali, 'Hind Siliguri', 'Inter', sans-serif); letter-spacing: 0; }
html[lang="bn"] .al-promo__title { line-height: 1.3; }
html[lang="bn"] .al-promo__name { line-height: 1.4; }
html[lang="bn"] .al-promo__eyebrow, html[lang="bn"] .al-promo__kicker { letter-spacing: 0; text-transform: none; }

/* ---- breakpoints ---- */
@media (min-width: 40rem) {
    .al-promo__inner { padding: 16px 24px 24px; }
    .al-promo__panel { padding: 20px; }
    .al-promo__slide { grid-template-columns: minmax(0, 7fr) minmax(0, 10fr); gap: 24px; align-items: center; }
    .al-promo__photo { aspect-ratio: 4 / 5; max-height: 34rem; max-height: min(34rem, 58vh); }
    @supports not (aspect-ratio: 1 / 1) { .al-promo__photo { padding-bottom: 125%; } }
    .al-promo__page-text { display: block; }
    .al-promo__usp li { font-size: 13px; }
}
@media (min-width: 64rem) {
    .al-promo__inner { padding: 20px 32px 28px; }
    .al-promo__panel { padding: 24px 28px; }
    .al-promo__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
    .al-promo__eyebrow { margin: 0; }
    .al-promo__slide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
    .al-promo__copy { gap: 14px; padding-right: 8px; }
    .al-promo__actions { gap: 12px; }
    .al-promo__cta, .al-promo__ghost { flex: 0 1 auto; min-width: 180px; padding: 8px 22px; }
    .al-promo__controls { margin-top: 20px; }
}

/* ---- motion / accessibility ---- */
@keyframes al-promo-drift { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes al-promo-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes al-promo-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, .06); } }
@media (prefers-reduced-motion: reduce) {
    .al-promo__slide, .al-promo__cta, .al-promo__ghost, .al-promo__page, .al-promo__transport button, .al-promo__all svg, .al-promo__cta svg { transition: none; }
    .al-promo__slide { transform: none; }
    .al-promo.is-ready .is-active .al-promo__photo img, .al-promo__dot, .al-promo[data-playing="true"] .al-promo__page.is-active .al-promo__track > span { animation: none; }
}
@media (forced-colors: active) {
    .al-promo__page.is-active, .al-promo__cta { outline: 2px solid; outline-offset: 1px; }
}