/* Tvora Studio — storefront widget styles. Scoped under .shopreel-* + the
   [data-shopreel-widget] host. Accent via --shopreel-accent (default red). */
[data-shopreel-widget] { --sr-accent: var(--shopreel-accent, #e11d2a); --sr-cta: var(--shopreel-cta, var(--sr-accent)); --sr-ink:#0a0a0b; font-family: var(--shopreel-font, inherit); display:block; min-width:0; max-width:100%; box-sizing:border-box; }
/* modal + spotlight render at the body root, so re-declare the look vars there */
.shopreel-modal, .shopreel-spotlight { --sr-accent: var(--shopreel-accent, #e11d2a); --sr-cta: var(--shopreel-cta, var(--sr-accent)); font-family: var(--shopreel-font, inherit); }

.shopreel-skeleton { padding: 16px 0; }
.shopreel-skeleton-h { display:block; font-weight:700; font-size:20px; margin-bottom:14px; color:var(--sr-ink); }
.shopreel-skeleton-row, .shopreel-skeleton-bubbles { display:flex; gap:12px; }
.shopreel-skeleton-row i { width:150px; height:260px; border-radius:14px; background:linear-gradient(110deg,#eee 8%,#f6f6f6 18%,#eee 33%); background-size:200% 100%; animation:sr-sh 1.2s linear infinite; }
.shopreel-skeleton-bubbles i { width:64px; height:64px; border-radius:50%; background:linear-gradient(110deg,#eee 8%,#f6f6f6 18%,#eee 33%); background-size:200% 100%; animation:sr-sh 1.2s linear infinite; }
@keyframes sr-sh { to { background-position:-200% 0; } }

/* Force our widgets to a stable full width AND override the theme Section's
   alignment (align-self:stretch beats the section's align-items:left/center/right)
   so our reels ALWAYS centre internally — independent of the Section's setting. */
[data-shopreel-widget] { width:100%; align-self:stretch !important; box-sizing:border-box; }
/* The Horizon theme wraps each block in its own div (.shopify-block) that shrinks
   to content + sits left. Force ONLY width:100% so it fills the theme's page-width
   column — do NOT touch max-width (that's the theme's page-width cap; overriding it
   made our reels break out full-bleed, wider than the products). */
:has(> [data-shopreel-widget]) { width:100% !important; align-self:stretch !important; }
:has(> * > [data-shopreel-widget]) { align-self:stretch !important; }

/* ---- Rail ---- */
/* tile-size% uses cqw units that resolve against THIS widget's host column — so the
   same % looks right on the wide homepage and inside a narrow product-page column.
   Only sets a container context; doesn't change the box's own size. */
[data-shopreel-widget] { container-type: inline-size; }
/* text-align:center centers the inline-flex track regardless of parent layout. */
.shopreel-rail { padding: 18px 0; min-width:0; max-width:100%; text-align:center; }
.shopreel-rail-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.shopreel-h { margin:0; font-size:22px; font-weight:700; letter-spacing:-0.02em; color:var(--sr-ink); }
.shopreel-sub { margin:4px 0 0; font-size:13px; color:#6b7280; }
.shopreel-tag { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sr-accent); border:1px solid color-mix(in srgb, var(--sr-accent) 30%, transparent); padding:4px 8px; border-radius:999px; white-space:nowrap; }
/* width:fit-content + margin:auto = centred when the cards fit; caps at 100% and
   scrolls from the left (arrows appear) when they overflow. */
.shopreel-track { display:flex; flex-wrap:nowrap; width:fit-content; margin-inline:auto; gap:var(--sr-gap,16px); overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-left:2px; padding:4px 2px 8px; -webkit-overflow-scrolling:touch; min-width:0; max-width:100%; box-sizing:border-box; scrollbar-width:none; }
/* keep the rail head's heading/nav left/right (flex), not centered by text-align */
.shopreel-rail-head { text-align:left; }
.shopreel-track::-webkit-scrollbar { display:none; }

/* ===== Heading alignment (theme editor) — MOBILE ONLY ===== */
/* Moves ONLY the "Shop the reels" heading text, and ONLY on phones — on desktop the
   heading stays left. Nav arrows keep their right-side spot in both (rail-head stays
   space-between; the title wrapper flex-grows to fill). Reel tiles are untouched. */
.shopreel-rail-head > div:first-child { flex:1 1 auto; min-width:0; }
@media (max-width: 768px) {
  [data-shopreel-widget].sr-align-center .shopreel-h, [data-shopreel-widget].sr-align-center .shopreel-sub { text-align:center; }
  [data-shopreel-widget].sr-align-right .shopreel-h, [data-shopreel-widget].sr-align-right .shopreel-sub { text-align:right; }
  [data-shopreel-widget].sr-align-left .shopreel-h, [data-shopreel-widget].sr-align-left .shopreel-sub { text-align:left; }
}

/* ===== Product-image shape on the card thumbnail (theme editor: circle / square) ===== */
[data-shopreel-widget].shopreel-pimg-circle .shopreel-card-prod img,
[data-shopreel-widget].shopreel-pimg-circle .shopreel-card-prod-ph { border-radius:50%; }
[data-shopreel-widget].shopreel-pimg-square .shopreel-card-prod img,
[data-shopreel-widget].shopreel-pimg-square .shopreel-card-prod-ph { border-radius:6px; }

/* a reel with no tagged product → no empty padded card box below/above the video */
.shopreel-card-below .shopreel-card-info:empty, .shopreel-card-top .shopreel-card-info:empty { display:none; }

/* ===== Card border (theme editor: optional framed card, custom colour) — boAt-style =====
   Frames each reel tile (video + product card) in a white bordered box. box-sizing keeps
   the card at its --sr-cardw width and the media is set to 100% so padding never overflows. */
/* Concentric corners: the card's outer radius = the video's (corner-radius setting) +
   the gap, so the border keeps an EQUAL distance from the video all the way around —
   including the rounded corners (uneven-looking corners happen when they aren't concentric). */
.shopreel-cardborder .shopreel-card { border:1px solid var(--sr-cardborder, #e5e5e8); border-radius:calc(var(--shopreel-radius, 16px) + var(--sr-cardpad, 5px)); padding:var(--sr-cardpad, 5px); background:#fff; box-sizing:border-box; overflow:hidden; }
/* !important beats the mobile `.shopreel-track.sr-tsize .shopreel-card-media{width:--sr-cardw}`
   rule (same specificity, later in file) so the media fits INSIDE the padded border. */
.shopreel-cardborder .shopreel-card-media { width:100% !important; border-radius:var(--shopreel-radius, 16px); box-shadow:none; }
.shopreel-cardborder .shopreel-card:hover .shopreel-card-media { transform:none; box-shadow:none; }
.shopreel-cardborder .shopreel-card-below .shopreel-card-info,
.shopreel-cardborder .shopreel-card-top .shopreel-card-info { padding-left:5px; padding-right:5px; }

/* ===== Showcase layout (Pro): premium "video + product card below" =====
   Reuses the carousel engine with the product card forced BELOW the video, then
   upcards it: lifted video, a bigger centred product thumbnail, wrapping name,
   bold price + strikethrough compare, and a pill Add-to-cart. */
.shopreel-showcase .shopreel-card-media { box-shadow:0 12px 30px -14px rgba(10,10,11,.38); }
.shopreel-showcase .shopreel-card-below .shopreel-card-info { padding:14px 10px 4px; gap:10px; align-items:center; }
.shopreel-showcase .shopreel-card-below .shopreel-card-prod { flex-direction:column; align-items:center; gap:8px; text-align:center; width:100%; }
.shopreel-showcase .shopreel-card-below .shopreel-card-prod img,
.shopreel-showcase .shopreel-card-below .shopreel-card-prod-ph { width:48px; height:48px; margin-top:-34px; border:3px solid #fff; box-shadow:0 6px 16px -6px rgba(10,10,11,.4); position:relative; z-index:2; }
.shopreel-showcase .shopreel-card-below .shopreel-card-prod-tx { align-items:center; text-align:center; width:100%; }
.shopreel-showcase .shopreel-card-below .shopreel-card-prod-tx b { font-size:13px; white-space:normal; line-height:1.28; }
.shopreel-showcase .shopreel-card-below .shopreel-card-prod-tx i { font-size:14.5px; font-weight:800; margin-top:3px; }
.shopreel-showcase .shopreel-card-below .shopreel-card-cta { border-radius:999px; font-size:13px; padding:11px 12px; margin-top:2px; }

/* rail/story left-right scroll arrows (desktop only) */
.shopreel-rail-head, .shopreel-stories-head { align-items:center; }
/* arrows are hidden by default — only shown when the track overflows the layout
   width (host gets .shopreel-has-nav from fitScroller) AND on desktop (>=641px). */
.shopreel-railnav { display:none; gap:8px; flex:none; }
@media (min-width:641px) { .shopreel-has-nav .shopreel-railnav { display:flex; } }
.shopreel-rnav { width:38px; height:38px; border-radius:50%; border:1px solid #e4e4e7; background:#fff; color:#0a0a0b; cursor:pointer; display:grid; place-items:center; box-shadow:0 1px 3px rgba(10,10,11,.08); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; padding:0; line-height:0; }
.shopreel-rnav svg { display:block; }
.shopreel-rnav:hover { background:#f7f7f8; border-color:#d4d4d8; box-shadow:0 2px 8px rgba(10,10,11,.14); }
.shopreel-rnav:active { transform:scale(.93); }
/* stories: scroll arrows live in the head (top-right), same as the carousel —
   they no longer overlay the circle row. */
.shopreel-storywrap { display:flex; justify-content:center; }
.shopreel-ring-media img, .shopreel-ring-media video { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.shopreel-ring-blank { width:100%; height:100%; border-radius:50%; display:block; background:#e4e4e7; }

/* flex-column (not block) so a stretched card's content stays TOP-aligned. A <button>
   vertically-CENTERS its content when taller than its content, which pushed the video
   down on shorter-name cards (uneven top gap in a row of mixed-height cards). */
.shopreel-card { scroll-snap-align:start; flex:0 0 auto; width:200px; border:0; background:transparent; padding:0; cursor:pointer; text-align:left; display:flex; flex-direction:column; }
.shopreel-card-media { position:relative; display:block; flex:0 0 auto; width:200px; aspect-ratio:var(--sr-aspect, 9/16); min-height:var(--sr-minh, 0); border-radius:16px; background:#101019; background-image:linear-gradient(150deg,#191922 0%,#0c0c11 62%); overflow:hidden; box-shadow:var(--shopreel-shadow, 0 8px 24px -10px rgba(10,10,11,.4)); transition:transform .18s ease, box-shadow .18s ease; }
/* poster-less / still-loading tile: a faint play glyph on a subtle dark gradient
   instead of a stark black box. The video/img paints over it the moment it's ready. */
.shopreel-card-media::before { content:"\25B6"; position:absolute; inset:0; z-index:0; display:grid; place-items:center; color:rgba(255,255,255,.16); font-size:26px; pointer-events:none; }
/* rail "reels per view" sets card width via --sr-cardw (grid overrides to 100%) */
.shopreel-track .shopreel-card, .shopreel-track .shopreel-card-media { width:var(--sr-cardw, 200px); }
.shopreel-card:hover .shopreel-card-media { transform:translateY(-3px); box-shadow:0 18px 38px -12px rgba(10,10,11,.5); }
/* Reel Carousel → Hover lift: off */
.shopreel-nohover .shopreel-card:hover .shopreel-card-media { transform:none; box-shadow:var(--shopreel-shadow, 0 8px 24px -10px rgba(10,10,11,.4)); }
.shopreel-badge { position:absolute; top:10px; left:10px; z-index:2; font-size:10px; font-weight:700; letter-spacing:.02em; color:#fff; background:rgba(10,10,11,.62); padding:4px 9px; border-radius:999px; }
.shopreel-badge::first-letter { color:var(--sr-accent); }
.shopreel-vicon { position:absolute; top:10px; right:10px; z-index:2; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; background:rgba(10,10,11,.55); }
.shopreel-card-grad { position:absolute; left:0; right:0; bottom:0; height:66%; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(7,7,9,.94) 8%, rgba(7,7,9,.74) 38%, rgba(7,7,9,.12) 78%, transparent); }
.shopreel-card-info { position:absolute; left:10px; right:10px; bottom:10px; z-index:2; display:flex; flex-direction:column; gap:8px; }
.shopreel-card-title { font-size:13px; font-weight:700; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 3px rgba(0,0,0,.45); }
.shopreel-card-prod { display:flex; align-items:center; gap:8px; }
.shopreel-card-prod img, .shopreel-card-prod-ph { width:30px; height:30px; border-radius:8px; object-fit:cover; background:rgba(255,255,255,.16); flex:0 0 auto; }
.shopreel-card-prod-tx { display:flex; flex-direction:column; min-width:0; }
.shopreel-card-prod-tx b { font-size:11.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shopreel-card-prod-tx i { font-size:11px; font-weight:700; font-style:normal; color:#fff; opacity:.92; }
.shopreel-card-cta { display:block; text-align:center; font-size:12.5px; font-weight:700; color:var(--sr-tilecta-fg, #fff); background:var(--sr-tilecta-bg, var(--sr-cta)); border-radius:10px; padding:9px 10px; line-height:1; }
/* cart button size (Customizations → CTA → Button size) */
.shopreel-card-cta.shopreel-sz-sm { padding:6px 9px; font-size:11px; }
.shopreel-card-cta.shopreel-sz-lg { padding:12px 12px; font-size:14px; }
/* Reel Carousel → "Show cart button on hover": reveal the CTA only on hover (desktop).
   Overlay: the hidden button collapses to ZERO height (no empty gap — product info sits
   at the very bottom); on hover it expands and the product info slides up. Below/Top:
   keep the button's space reserved so the tile height never jumps on hover. */
.shopreel-cta-hoveronly .shopreel-card-cta { opacity:0; max-height:0; margin-top:-8px; overflow:hidden; transition:opacity .18s ease, max-height .24s ease, margin-top .24s ease; pointer-events:none; }
.shopreel-cta-hoveronly:hover .shopreel-card-cta, .shopreel-cta-hoveronly:focus-within .shopreel-card-cta { opacity:1; max-height:60px; margin-top:0; pointer-events:auto; }
.shopreel-card-below.shopreel-cta-hoveronly .shopreel-card-cta, .shopreel-card-top.shopreel-cta-hoveronly .shopreel-card-cta { max-height:60px; margin-top:0; }
@media (hover:none) { .shopreel-cta-hoveronly .shopreel-card-cta { opacity:1; max-height:60px; margin-top:0; pointer-events:auto; } }
/* Reel Carousel → Thumbnail overlay image (merchant PNG/badge on every tile) */
.shopreel-overlay { position:absolute; z-index:2; width:var(--sr-ov-w, 25%); height:auto; pointer-events:none; }
.shopreel-ov-top-left { top:8px; left:8px; }
.shopreel-ov-top-right { top:8px; right:8px; }
.shopreel-ov-bottom-left { bottom:8px; left:8px; }
.shopreel-ov-bottom-right { bottom:8px; right:8px; }
.shopreel-ov-center { top:50%; left:50%; transform:translate(-50%,-50%); }
/* live enrichment: compare-at strikethrough, stock status, sold-out + discount */
.shopreel-card-prod-tx i .shopreel-cmp { margin-left:5px; font-size:10px; font-weight:600; opacity:.7; text-decoration:line-through; }
.shopreel-stk { margin-top:2px; font-size:9.5px; font-weight:700; letter-spacing:.02em; color:#4ade80; }
.shopreel-stk.shopreel-stk-out { color:#fca5a5; }
.shopreel-card-below .shopreel-stk { color:#16a34a; }
.shopreel-card-below .shopreel-stk.shopreel-stk-out { color:#dc2626; }
.shopreel-oos { position:absolute; top:10px; right:10px; z-index:3; font-size:10px; font-weight:700; letter-spacing:.02em; color:#fff; background:rgba(10,10,11,.84); padding:4px 9px; border-radius:999px; }
.shopreel-disc { position:absolute; top:10px; right:10px; z-index:3; font-size:10.5px; font-weight:800; color:#fff; background:var(--sr-accent); padding:4px 8px; border-radius:999px; box-shadow:0 2px 6px rgba(10,10,11,.28); }
/* brand watermark across the reel (Branding → Watermark; forced on for Free) */
.shopreel-watermark { position:absolute; inset:0; z-index:2; margin:auto; height:fit-content; text-align:center; font-size:19px; font-weight:800; letter-spacing:.02em; color:rgba(255,255,255,.14); transform:rotate(-18deg); pointer-events:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Card: product info + button BELOW the video (merchant layout option) ---- */
.shopreel-card-below .shopreel-card-info { position:static; left:auto; right:auto; bottom:auto; padding:9px 2px 2px; gap:7px; }
.shopreel-card-below .shopreel-card-grad { display:none; }
.shopreel-card-below .shopreel-card-title { color:var(--sr-ink); text-shadow:none; }
.shopreel-card-below .shopreel-card-prod-tx b, .shopreel-card-below .shopreel-card-prod-tx i { color:var(--sr-ink); }
.shopreel-card-below .shopreel-card-prod img, .shopreel-card-below .shopreel-card-prod-ph { background:#f1f1f3; }
/* ---- Card: product info + button ABOVE the video (Top position option) ---- */
.shopreel-card-top .shopreel-card-info { position:static; left:auto; right:auto; bottom:auto; padding:2px 2px 9px; gap:7px; }
.shopreel-card-top .shopreel-card-grad { display:none; }
.shopreel-card-top .shopreel-card-title { color:var(--sr-ink); text-shadow:none; }
.shopreel-card-top .shopreel-card-prod-tx b, .shopreel-card-top .shopreel-card-prod-tx i { color:var(--sr-ink); }
.shopreel-card-top .shopreel-card-prod img, .shopreel-card-top .shopreel-card-prod-ph { background:#f1f1f3; }
.shopreel-card-top .shopreel-stk { color:#16a34a; }
.shopreel-card-top .shopreel-stk.shopreel-stk-out { color:#dc2626; }

/* ---- Grid ---- */
.shopreel-gridwrap { padding:18px 0; min-width:0; max-width:100%; }
/* "Shop-the-look" wall of CAROUSEL-SIZED tiles: Tile size % → an absolute card width
   (--sr-cardw, same formula as the carousel), and the grid auto-fills as many tiles
   as the row holds. So the same % renders the same size in Carousel and Grid. Media
   height is capped so wide cards never become giant portraits. */
.shopreel-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--sr-cardw, 200px), 1fr)); gap:var(--sr-gap,16px); width:100%; max-width:100%; }
.shopreel-grid .shopreel-card, .shopreel-grid .shopreel-card-media { width:100%; }
.shopreel-grid .shopreel-card-media { max-height:460px; }
/* one-row-by-default: extra tiles hide until "View more" clears data-collapsed */
.shopreel-grid[data-collapsed="1"] .shopreel-card[data-extra="1"] { display:none; }
.shopreel-viewmore { display:block; margin:14px auto 0; padding:10px 22px; font:inherit; font-size:13px; font-weight:600; color:var(--sr-ink); background:#fff; border:1px solid #e3e3e6; border-radius:999px; cursor:pointer; transition:background .15s,border-color .15s; }
.shopreel-viewmore:hover { background:#f7f7f8; border-color:#cfcfd4; }

/* ---- Stories ---- */
.shopreel-stories { padding:12px 0; min-width:0; max-width:100%; text-align:left; }
.shopreel-stories-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
/* Center the stories by centering the SCROLLER itself: fit-content shrinks the
   row to its content and margin:auto centers it when it's narrower than the
   layout; when it overflows it caps at 100% and scrolls from the left (no clip).
   (justify-content:center can't be used here — with overflow-x it left-aligns.) */
/* width:fit-content + margin:auto = CENTER the row when it fits; when it's wider
   than the layout it caps at 100% and scrolls from the left (arrows appear). */
.shopreel-bubbles { display:flex; flex-wrap:nowrap; width:fit-content; margin-inline:auto; gap:16px; overflow-x:auto; padding-bottom:8px; min-width:0; max-width:100%; box-sizing:border-box; scrollbar-width:none; }
.shopreel-bubbles::-webkit-scrollbar { display:none; }
/* story shape: square / rounded-square — corner radius set from the theme block
   (--sr-story-radius). Default stays a circle. */
[data-shopreel-widget][data-shape="square"] .shopreel-ring,
[data-shopreel-widget][data-shape="square"] .shopreel-ring > span,
[data-shopreel-widget][data-shape="square"] .shopreel-ring-media img,
[data-shopreel-widget][data-shape="square"] .shopreel-ring-media video,
[data-shopreel-widget][data-shape="square"] .shopreel-ring-blank { border-radius: var(--sr-story-radius, 16px); }
.shopreel-bubble { border:0; background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; width:var(--sr-storyw, 76px); flex:0 0 auto; }
.shopreel-ring { width:var(--sr-storyw, 68px); height:var(--sr-storyw, 68px); border-radius:50%; padding:3px; background:conic-gradient(from 210deg, var(--sr-story-ring, var(--sr-accent)), #ff8a92, var(--sr-story-ring, var(--sr-accent))); display:grid; place-items:center; }
/* Story Bar → Ring style: solid flat brand ring instead of the two-tone gradient */
.shopreel-stories[data-ring="solid"] .shopreel-ring { background:var(--sr-story-ring, var(--sr-accent)); }
.shopreel-ring > span { width:100%; height:100%; border-radius:50%; border:2px solid #fff; background:#0a0a0b center/cover no-repeat; display:block; }
.shopreel-bubble-t { font-size:11px; color:var(--sr-ink); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ---- Floating Spotlight (rounded reel card) ---- */
.shopreel-spotlight { position:fixed; right:18px; bottom:18px; z-index:2147483000; width:var(--sr-spot-w,140px); aspect-ratio:9/16; border-radius:var(--shopreel-radius,16px); cursor:pointer; padding:0; overflow:hidden; box-shadow:var(--shopreel-shadow, 0 16px 40px -12px rgba(10,10,11,.55)); background:#0a0a0b; border:0; }
/* Spotlight → Corner position (base is bottom-right) */
.shopreel-spot-pos-bottom-left { left:18px; right:auto; }
.shopreel-spot-pos-top-right { top:18px; bottom:auto; }
.shopreel-spot-pos-top-left { top:18px; left:18px; right:auto; bottom:auto; }
.shopreel-spot-media { position:absolute; inset:0; }
.shopreel-spot-badge { position:absolute; top:8px; left:8px; z-index:2; font-size:9px; font-weight:700; letter-spacing:.02em; color:#fff; background:rgba(10,10,11,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:3px 7px; border-radius:999px; }
.shopreel-spot-badge::first-letter { color:var(--sr-accent, #e11d2a); }
.shopreel-spot-close { position:absolute; top:6px; right:6px; z-index:5; width:24px; height:24px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); background:rgba(10,10,11,.72); color:#fff; font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); box-shadow:0 2px 8px -2px rgba(0,0,0,.5); }
.shopreel-spot-grad { position:absolute; left:0; right:0; bottom:0; height:48%; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(7,7,9,.92), rgba(7,7,9,.2) 60%, transparent); }
.shopreel-spot-cta { position:absolute; left:8px; right:8px; bottom:8px; z-index:2; text-align:center; font-size:12px; font-weight:700; color:#fff; background:var(--sr-cta, var(--sr-accent, #e11d2a)); border-radius:9px; padding:7px 8px; }
@media (max-width:640px) {
  .shopreel-spotlight { width:min(var(--sr-spot-w,140px),124px); right:12px; bottom:12px; }
  .shopreel-spot-pos-bottom-left { left:12px; right:auto; }
  .shopreel-spot-pos-top-right { top:12px; bottom:auto; }
  .shopreel-spot-pos-top-left { top:12px; left:12px; right:auto; bottom:auto; }
}

/* ---- Modal: Instagram-style vertical reel feed (scroll-snap) ---- */
.shopreel-modal { position:fixed; inset:0; z-index:2147483600; display:flex; align-items:center; justify-content:center; gap:18px; }
.shopreel-modal-backdrop { position:absolute; inset:0; background:rgba(8,8,10,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.shopreel-modal-box { position:relative; z-index:1; aspect-ratio:9/16; height:88vh; max-height:920px; max-width:96vw; background:#000; border-radius:18px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); }
.shopreel-reels { height:100%; width:100%; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior:contain; }
.shopreel-reels::-webkit-scrollbar { display:none; }
.shopreel-slide { position:relative; height:100%; width:100%; scroll-snap-align:start; scroll-snap-stop:always; background:#000; overflow:hidden; }
.shopreel-slide-media { position:absolute; inset:0; width:100%; height:100%; }
.shopreel-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shopreel-live { position:absolute; top:14px; left:14px; z-index:3; font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.shopreel-live::first-letter { color:var(--sr-accent); }
/* store logo overlay ("Show store logo") — matches the dashboard preview */
.shopreel-mlogo { position:absolute; top:14px; left:14px; z-index:4; display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:13px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.shopreel-mlogo-right { left:auto; right:56px; }
.shopreel-mlogo-mark { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); font-size:11px; font-weight:800; }
.shopreel-mlogo-name { display:inline-flex; align-items:center; gap:5px; }
.shopreel-mverified { width:16px; height:16px; border-radius:50%; display:grid; place-items:center; background:var(--shopreel-accent2,#2563eb); color:#fff; font-size:9px; }
/* if the logo sits top-left, nudge the LIVE badge below it so they don't overlap */
.shopreel-modal-box:has(.shopreel-mlogo:not(.shopreel-mlogo-right)) .shopreel-live { top:48px; }
.shopreel-x { position:absolute; top:14px; right:14px; z-index:6; width:38px; height:38px; border-radius:50%; border:0; background:rgba(10,10,11,.44); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s ease, transform .12s ease; }
.shopreel-mute { position:absolute; top:60px; right:14px; z-index:6; width:38px; height:38px; border-radius:50%; border:0; background:rgba(10,10,11,.44); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; cursor:pointer; font-size:15px; display:grid; place-items:center; transition:background .15s ease, transform .12s ease; }
.shopreel-x:hover, .shopreel-mute:hover { background:rgba(10,10,11,.66); }
.shopreel-x:active, .shopreel-mute:active { transform:scale(.92); }
/* up/down scroll buttons — a column OUTSIDE the reel, to its right (desktop only;
   hidden on mobile, which swipes). Sits in the dark backdrop next to the player. */
.shopreel-mnav-col { position:relative; z-index:2; display:flex; flex-direction:column; gap:16px; flex:none; }
.shopreel-mnav { width:48px; height:48px; border-radius:50%; border:0; background:rgba(40,40,44,.92); color:#fff; font-size:21px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s ease, transform .12s ease; }
.shopreel-mnav:hover { background:rgba(64,64,70,1); }
.shopreel-mnav:active { transform:scale(.92); }
@media (max-width:640px) { .shopreel-mnav-col { display:none; } }

.shopreel-actions { position:absolute; right:14px; bottom:150px; z-index:4; display:flex; flex-direction:column; align-items:center; gap:15px; }
.shopreel-act { background:none; border:0; padding:0; cursor:pointer; color:#fff; display:flex; flex-direction:column; align-items:center; gap:5px; transition:transform .12s ease; }
.shopreel-act > svg { box-sizing:content-box; width:24px; height:24px; padding:9px; border-radius:50%; background:rgba(10,10,11,.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .15s ease, transform .12s ease; }
.shopreel-act:hover > svg { background:rgba(10,10,11,.62); transform:scale(1.06); }
.shopreel-act:active { transform:scale(.9); }
.shopreel-act i { font-size:11px; font-style:normal; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.shopreel-like.on { color:var(--sr-accent); }
.shopreel-like.on > svg { background:rgba(225,29,42,.16); }
.shopreel-like.on svg path { fill:var(--sr-accent); }
.shopreel-foot { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:24px 14px 16px; background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.15) 60%, transparent); display:flex; flex-direction:column; gap:11px; }
.shopreel-foot-title { color:#fff; font-size:14px; font-weight:600; }
.shopreel-foot-prod { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; cursor:pointer; }
.shopreel-foot-prod:hover .shopreel-foot-pt { text-decoration:underline; }
.shopreel-foot-prod img { width:46px; height:46px; border-radius:10px; object-fit:cover; background:#222; flex:0 0 auto; }
.shopreel-foot-pinfo { min-width:0; }
.shopreel-foot-pt { color:#fff; font-weight:600; font-size:13px; text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shopreel-foot-pp { color:#fff; font-weight:800; font-size:16px; margin-top:1px; }
/* glass product card + CTA (matches the dashboard live preview) */
.shopreel-pcard { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--shopreel-radius,14px); background:rgba(12,12,14,.55); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.shopreel-pcard-prod { display:flex; align-items:center; gap:10px; min-width:0; flex:1; text-decoration:none; color:#fff; }
.shopreel-pcard-prod img { width:44px; height:44px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:#222; }
.shopreel-pcard-info { display:flex; flex-direction:column; min-width:0; gap:1px; }
.shopreel-pcard-name { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shopreel-pcard-prod:hover .shopreel-pcard-name { text-decoration:underline; }
.shopreel-pcard-price { font-size:13.5px; font-weight:800; color:#fff; }
.shopreel-pcard-cta { flex:none; border:0; cursor:pointer; padding:9px 15px; font-size:12.5px; font-weight:700; color:#fff; background:var(--sr-cta); white-space:nowrap; line-height:1; transition:transform .12s ease; }
.shopreel-pcard-cta:active { transform:scale(.96); }
/* "Order on WhatsApp" — free wa.me click-to-chat, full-width under the product card */
.shopreel-pcard-wa { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; border-radius:var(--shopreel-radius,14px); background:#25D366; color:#fff; font-size:13px; font-weight:700; text-decoration:none; line-height:1; transition:filter .15s ease, transform .12s ease; }
.shopreel-pcard-wa:hover { filter:brightness(1.06); }
.shopreel-pcard-wa:active { transform:scale(.98); }
.shopreel-pcard-wa svg { flex:0 0 auto; }
/* card layout (Product Card → Card layout) — matches the dashboard preview */
.shopreel-pcard-compact { padding:7px 9px; gap:8px; }
.shopreel-pcard-luxury { background:rgba(8,8,10,.72); border-color:rgba(184,134,11,.5); }
.shopreel-pcard-minimal { background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; padding:2px 2px; }
@media (max-width:640px) {
  .shopreel-modal-box { width:100vw; height:100dvh; max-height:none; max-width:none; aspect-ratio:auto; border-radius:0; }
  .shopreel-modal-backdrop { background:#000; }
  /* keep actions clear of the footer + respect the notch / home-bar safe areas */
  .shopreel-actions { bottom:132px; }
  /* full-screen mobile: raise the product card so the progress bar + "Powered by
     Tvora Studio" credit have room to stack cleanly BELOW it. (The progress + credit
     positions live in a block AFTER their base rules — see below — so the cascade
     doesn't revert them.) */
  .shopreel-foot { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .shopreel-x { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .shopreel-mute { top: calc(56px + env(safe-area-inset-top, 0px)); }
}

/* ---- Empty (editor only) ---- */
.shopreel-empty { display:flex; flex-direction:column; gap:4px; padding:22px; border:1px dashed #d4d4d8; border-radius:14px; text-align:center; color:#6b7280; }
.shopreel-empty b { color:var(--sr-accent); font-size:14px; }
/* "Enable the Tvora Studio Engine" gate (shown in the theme editor when the app embed is off) */
.shopreel-engineoff, .shopreel-gated { border-style:solid; border-color:var(--sr-accent, #e11d2a); background:rgba(225,29,42,.045); color:#4b5563; }
.shopreel-engineoff b, .shopreel-gated b { color:var(--sr-accent, #e11d2a); }

@media (max-width:640px) {
  .shopreel-card, .shopreel-card-media { width:160px; }
  /* on mobile the rail cards stay a comfortable fixed width regardless of "reels per view" */
  .shopreel-track .shopreel-card, .shopreel-track .shopreel-card-media { width:160px; }
  /* …unless the merchant set a Tile size % — then honour it (via --sr-cardw / cqw) on mobile too */
  .shopreel-track.sr-tsize .shopreel-card, .shopreel-track.sr-tsize .shopreel-card-media { width:var(--sr-cardw); }
  .shopreel-grid { grid-template-columns:repeat(auto-fill, minmax(46%, 1fr)); gap:10px; }
  .shopreel-grid .shopreel-card-media { max-height:none; }
}

/* ---- media fill (real video/img — replaces broken inline-bg posters) ---- */
.shopreel-fill { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0; }
.shopreel-fill-empty { display:grid; place-items:center; background:#0a0a0b; color:#fff; font-size:24px; }
.shopreel-ring > span { position:relative; overflow:hidden; }

/* ---- Spotlight bubble variant (merchant-chosen shape) + radius control ---- */
.shopreel-spot-bubble { width:64px !important; aspect-ratio:1 !important; border-radius:50% !important; border:3px solid #fff; }
.shopreel-spot-dot { position:absolute; top:4px; right:4px; z-index:2; width:11px; height:11px; border-radius:50%; background:var(--sr-accent,#e11d2a); border:2px solid #fff; }
.shopreel-card-media { border-radius:var(--shopreel-radius,16px); }

/* ---- Spotlight: minimize on scroll (merchant opt-in) ---- */
.shopreel-spotlight { transition: width .22s ease, height .22s ease, border-radius .22s ease; }
.shopreel-spot-min { width:56px !important; height:56px !important; aspect-ratio:auto !important; border-radius:50% !important; }
.shopreel-spot-min .shopreel-spot-badge, .shopreel-spot-min .shopreel-spot-grad, .shopreel-spot-min .shopreel-spot-cta { display:none; }
/* keep a small dismiss X on the minimized bubble so the shopper can always close it */
.shopreel-spot-min .shopreel-spot-close { top:-5px; right:-5px; width:20px; height:20px; font-size:13px; }
/* Spotlight → Ultraminimize: shrink to a tiny corner dot on scroll */
.shopreel-spot-ultra { width:40px !important; height:40px !important; }

/* ---- Banner Video (content-width hero, homepage + product pages) ---- */
/* Content-width banner: even margin all around (default 16px), never edge-to-edge.
   width has a 160px floor so a small width% + large gap on a narrow phone can never
   collapse the banner to an invisible sliver (max-width:100% still prevents overflow). */
.shopreel-banner { position:relative; width:max(160px, calc(var(--sr-banner-w, 100%) - 2 * var(--sr-banner-gap, 16px))); max-width:100%; margin:var(--sr-banner-gap, 16px) auto; min-height:var(--sr-banner-minh, 480px); border-radius:var(--shopreel-radius, 12px); overflow:hidden; background:#0a0a0b; }
.shopreel-banner-track { position:relative; min-height:var(--sr-banner-minh, 480px); }
.shopreel-banner-slide { display:block; position:absolute; inset:0; border:0; padding:0; margin:0; background:transparent; cursor:pointer; overflow:hidden; }
.shopreel-banner-slide[hidden] { display:none; }
/* smooth prev/next: the outgoing/incoming slides glide horizontally, clipped by the
   banner's overflow:hidden (JS toggles this class only during a transition). */
.shopreel-banner-slide.sr-banner-anim { transition:transform .55s cubic-bezier(.5,0,.1,1); will-change:transform; }
@media (prefers-reduced-motion: reduce) { .shopreel-banner-slide.sr-banner-anim { transition:none; } }
.shopreel-banner-media { position:absolute; inset:0; }
.shopreel-banner-media .shopreel-fill { width:100%; height:100%; object-fit:cover; display:block; }
.shopreel-banner-media .shopreel-fill-empty { display:grid; place-items:center; color:#fff; font-size:40px; }
.shopreel-banner-grad { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(7,7,9,.42), transparent 42%); }
.shopreel-banner-cta { position:absolute; left:50%; bottom:32px; transform:translateX(-50%); z-index:3; display:inline-block; padding:13px 34px; border-radius:999px; background:var(--sr-banner-cta, var(--sr-cta, var(--sr-accent, #e11d2a))); color:#fff; font-size:15px; font-weight:700; line-height:1; box-shadow:0 8px 24px -8px rgba(10,10,11,.5); }
.shopreel-banner-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:42px; height:42px; border-radius:50%; border:0; background:rgba(10,10,11,.4); color:#fff; cursor:pointer; display:grid; place-items:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .15s ease; }
.shopreel-banner-nav:hover { background:rgba(10,10,11,.62); }
.shopreel-banner-nav svg { display:block; }
.shopreel-banner-prev { left:16px; }
.shopreel-banner-next { right:16px; }
.shopreel-banner-dots { position:absolute; left:0; right:0; bottom:14px; z-index:4; display:flex; justify-content:center; gap:7px; }
.shopreel-banner-dot { width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.5); cursor:pointer; transition:width .2s ease, background .2s ease; }
.shopreel-banner-dot.on { width:22px; border-radius:999px; background:#fff; }
/* Skeleton must occupy the banner's real content-width footprint (same width calc +
   margin) so there's no edge-to-edge -> content-width jump (CLS) when reels load. */
.shopreel-banner-skeleton { width:max(160px, calc(var(--sr-banner-w, 100%) - 2 * var(--sr-banner-gap, 16px))); max-width:100%; margin:var(--sr-banner-gap, 16px) auto; padding:0; background:#0a0a0b; border-radius:var(--shopreel-radius, 12px); }
@media (max-width:640px) {
  .shopreel-banner, .shopreel-banner-track, .shopreel-banner-slide { min-height:min(var(--sr-banner-minh, 480px), 64vw); }
  .shopreel-banner-cta { bottom:20px; padding:11px 26px; font-size:14px; }
  .shopreel-banner-nav { width:34px; height:34px; }
}

/* ---- Cinematic lightbox (Banner tap → big "movie" player, gap on all sides) ---- */
.shopreel-cine { position:fixed; inset:0; z-index:2147483600; display:grid; place-items:center; }
.shopreel-cine-back { position:absolute; inset:0; background:rgba(8,8,10,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.shopreel-cine-box { position:relative; z-index:1; width:92vw; height:90vh; max-width:1280px; }
.shopreel-cine-slide { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.shopreel-cine-slide[hidden] { display:none; }
/* smooth prev/next: incoming glides in from the side + crossfades (JS toggles this). */
.shopreel-cine-slide.sr-cine-anim { transition:transform .46s cubic-bezier(.22,.61,.36,1), opacity .32s ease; will-change:transform, opacity; }
@media (prefers-reduced-motion: reduce) { .shopreel-cine-slide.sr-cine-anim { transition:none; } }
.shopreel-cine-stage { flex:1 1 auto; min-height:0; width:100%; display:grid; place-items:center; cursor:pointer; }
.shopreel-cine-vid { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:16px; background:#000; box-shadow:0 40px 90px -30px rgba(0,0,0,.75); }
.shopreel-cine-empty { display:grid; place-items:center; width:min(56vh,340px); height:min(56vh,340px); color:#fff; font-size:52px; }
/* Desktop: EVERY reel shows in the SAME fixed 16:9 frame (capped at 72vh tall / the
   stage width) — object-fit:contain fits any aspect inside, so a landscape reel fills
   the frame while portrait/square reels sit centred with letterbox bars. Result: all
   reels are one consistent size, no matter their own aspect ratio. Mobile keeps the
   native fill (100%) so a vertical reel fills the phone. */
@media (min-width:641px) {
  .shopreel-cine-vid { width:min(100%, calc(72vh * 16 / 9)); height:auto; aspect-ratio:16 / 9; max-width:100%; max-height:72vh; object-fit:contain; }
}
.shopreel-cine-x { position:absolute; top:-2px; right:-2px; z-index:6; width:40px; height:40px; border-radius:50%; border:0; background:rgba(20,20,24,.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.shopreel-cine-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:46px; height:46px; border-radius:50%; border:0; background:rgba(20,20,24,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .15s ease; }
.shopreel-cine-nav:hover { background:rgba(30,30,36,.9); }
.shopreel-cine-nav svg { display:block; }
.shopreel-cine-prev { left:24px; }
.shopreel-cine-next { right:24px; }
.shopreel-cine-card { flex:0 0 auto; margin:12px auto 0; z-index:5; display:flex; align-items:center; gap:12px; width:max-content; max-width:min(520px, 92%); padding:9px 11px; border-radius:14px; background:rgba(12,12,14,.62); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.shopreel-cine-prod { display:flex; align-items:center; gap:10px; min-width:0; flex:1; text-decoration:none; color:#fff; }
.shopreel-cine-prod img { width:46px; height:46px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:#222; }
.shopreel-cine-info { display:flex; flex-direction:column; min-width:0; gap:1px; }
.shopreel-cine-name { font-size:13.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shopreel-cine-prod:hover .shopreel-cine-name { text-decoration:underline; }
.shopreel-cine-price { font-size:13.5px; font-weight:800; color:#fff; }
.shopreel-cine-cta { flex:none; border:0; cursor:pointer; padding:11px 18px; border-radius:999px; font-size:13px; font-weight:700; color:#fff; background:var(--sr-cta, var(--sr-accent, #e11d2a)); white-space:nowrap; line-height:1; transition:transform .12s ease; }
.shopreel-cine-cta:active { transform:scale(.96); }
.shopreel-cine-title { flex:0 0 auto; margin:12px auto 0; z-index:5; text-align:center; color:#fff; font-size:15px; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.6); }
@media (max-width:640px) {
  .shopreel-cine-box { width:100vw; height:100dvh; max-width:none; }
  .shopreel-cine-vid { border-radius:0; }
  .shopreel-cine-x { top:calc(10px + env(safe-area-inset-top,0px)); right:10px; }
  .shopreel-cine-prev { left:2px; }
  .shopreel-cine-next { right:2px; }
  .shopreel-cine-card { margin-bottom:calc(10px + env(safe-area-inset-bottom,0px)); }
}

/* ---- Modal: tap-for-sound cue ---- */
.shopreel-soundcue { position:absolute; left:50%; top:46%; z-index:6; border:0; cursor:pointer; background:rgba(10,10,11,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:14px; font-weight:700; padding:12px 20px; border-radius:999px; box-shadow:0 6px 22px rgba(0,0,0,.45); animation:sr-cuepulse 1.5s ease-in-out infinite; }
@keyframes sr-cuepulse { 0%,100% { transform:translate(-50%,-50%) scale(1); opacity:.96; } 50% { transform:translate(-50%,-50%) scale(1.07); opacity:1; } }

/* ---- Customizations: button style (CTA shape) ---- */
.shopreel-btn-pill { border-radius:999px; }
.shopreel-btn-solid { border-radius:8px; }
.shopreel-btn-outline { background:transparent; color:var(--sr-cta); border:1.5px solid var(--sr-cta); }

/* ---- Customizations: CTA animation (CTA Settings → Animation) ---- */
.shopreel-anim-pulse { animation: sr-pulse 1.6s ease infinite; }
.shopreel-anim-bounce { animation: sr-bounce 1.3s ease infinite; }
.shopreel-anim-glow { animation: sr-glow 1.8s ease infinite; }
@keyframes sr-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes sr-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes sr-glow { 0%,100% { box-shadow:0 0 0 0 transparent; } 50% { box-shadow:0 0 12px 1px var(--sr-cta); } }

/* ---- Customizations: play-button style (Controls → Play button) ---- */
.shopreel-play-square { border-radius:8px; }
.shopreel-play-circle { border-radius:50%; }
.shopreel-play-floating { background:var(--sr-cta); border-radius:50%; box-shadow:0 6px 16px -6px var(--sr-cta); }

/* ---- Customizations: modal progress bar (Controls → Progress bar) ---- */
.shopreel-progress { position:absolute; left:14px; right:14px; z-index:5; height:3px; border-radius:3px; background:rgba(255,255,255,.28); overflow:hidden; pointer-events:none; }
.shopreel-progress > span { display:block; height:100%; width:0; background:var(--sr-cta, #e11d2a); border-radius:3px; transition:width .15s linear; }
.shopreel-progress-top { top:14px; }
.shopreel-progress-bottom { bottom:118px; }

/* ---- Instagram-style story segments (multi-video story viewer) ---- */
.shopreel-segs { position:absolute; top:9px; left:10px; right:10px; z-index:14; display:flex; gap:4px; pointer-events:none; }
.shopreel-segs span { flex:1 1 0; min-width:0; height:3px; border-radius:3px; background:rgba(255,255,255,.34); overflow:hidden; }
.shopreel-segs span i { display:block; height:100%; width:0; background:#fff; border-radius:3px; }
.shopreel-story-head { position:absolute; top:22px; left:13px; z-index:14; display:flex; align-items:center; gap:9px; pointer-events:none; }
.shopreel-story-av { width:32px; height:32px; border-radius:50%; overflow:hidden; flex:none; background:#222; box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.shopreel-story-av img { width:100%; height:100%; object-fit:cover; display:block; }
.shopreel-story-name { color:#fff; font-weight:700; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,.6); white-space:nowrap; }
/* story mode: no manual vertical scroll-snap; tapping the media moves segments */
.shopreel-reels-story { scroll-snap-type:none; overflow:hidden; }
.shopreel-reels-story .shopreel-slide-media { cursor:pointer; }
/* "Under card" — below the product card, inset on both sides (matches the preview) */
.shopreel-progress-under { left:14px; right:14px; bottom:7px; border-radius:3px; }
@media (max-width:640px) { .shopreel-progress-bottom { bottom:calc(118px + env(safe-area-inset-bottom, 0px)); } }

/* ---- Customizations: "Powered by Tvora Studio" footer in the player ---- */
/* solid footer bar BELOW the reel content (not overlapping the video/product) */
/* box + credit share a column so the credit is centered UNDER the reel (not the viewport,
   which is off-centre because the up/down nav sits to the right of the box) */
.shopreel-modal-stack { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; flex:none; }
/* "Powered by [logo] Tvora Studio" — centered directly below the reel card, on the dark backdrop */
.shopreel-powered { position:absolute; top:100%; left:0; right:0; margin-top:12px; z-index:2; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; letter-spacing:.01em; color:rgba(255,255,255,.66); text-shadow:0 1px 3px rgba(0,0,0,.5); pointer-events:none; }
.shopreel-powered b { color:#fff; font-weight:700; }
.shopreel-powered-logo { width:16px; height:16px; border-radius:4px; display:block; }
/* full-screen mobile bottom stack (MUST be after the base .shopreel-progress-under +
   .shopreel-powered rules above, or equal-specificity cascade reverts them): the
   product card is raised (foot padding), the "under" progress bar sits below it, and
   the "Powered by Tvora Studio" credit sits at the very bottom below the progress bar. */
@media (max-width:640px) {
  .shopreel-progress-under { bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
  .shopreel-powered { top:auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); margin-top:0; font-size:11px; transition:opacity .2s ease; }
  .shopreel-powered-logo { width:14px; height:14px; }
  /* quick-shop sheet is up → hide the credit (it sits z-above the reel and would
     otherwise show through the sheet's bottom "Sold out / More info" buttons) */
  .shopreel-modal.shopreel-sn-active .shopreel-powered { opacity:0; visibility:hidden; }
}

/* ---- SHOP NOW quick-shop popup — bottom sheet that rises from within the reel ---- */
.shopreel-shopnow { position:absolute; inset:0; z-index:40; overflow:hidden; pointer-events:none; font-family:var(--shopreel-font, inherit); }
.shopreel-shopnow.shopreel-sn-open { pointer-events:auto; }
.shopreel-sn-backdrop { position:absolute; inset:0; background:rgba(6,6,9,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .28s ease; }
.shopreel-sn-open .shopreel-sn-backdrop { opacity:1; }
/* the sheet — anchored to the reel's bottom edge, slides UP from within (clipped by the reel's overflow:hidden) */
.shopreel-sn-sheet { position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; flex-direction:column; max-height:88%;
  background:#fff; color:#111; border-radius:22px 22px 0 0; overflow:hidden; box-shadow:0 -18px 50px -12px rgba(6,6,9,.5);
  transform:translateY(100%); will-change:transform; transition:transform .40s cubic-bezier(.16,1.02,.29,1); }
.shopreel-sn-open .shopreel-sn-sheet { transform:translateY(0); }
.shopreel-sn-sheet.shopreel-sn-dragging { transition:none; }
.shopreel-sn-sheet::before { content:""; position:absolute; top:0; left:22px; right:22px; height:3px; border-radius:0 0 3px 3px; background:var(--sr-accent,#e11d2a); opacity:.9; z-index:4; }
/* banner cinematic box → center + cap width, still bottom-anchored */
.shopreel-sn-centered .shopreel-sn-sheet { left:50%; right:auto; width:min(440px,94%); transform:translate(-50%,100%); }
.shopreel-sn-centered.shopreel-sn-open .shopreel-sn-sheet { transform:translate(-50%,0); }
.shopreel-sn-grab { flex:none; display:flex; justify-content:center; align-items:center; height:26px; cursor:grab; touch-action:none; }
.shopreel-sn-grab:active { cursor:grabbing; }
.shopreel-sn-grabbar { width:40px; height:4px; border-radius:999px; background:#d8d8de; transition:background .15s, width .15s; }
.shopreel-sn-grab:hover .shopreel-sn-grabbar { background:#b9b9c1; width:52px; }
.shopreel-sn-x { position:absolute; top:9px; right:10px; z-index:3; width:30px; height:30px; border:0; border-radius:999px; background:rgba(0,0,0,.05); color:#333; font-size:20px; line-height:1; cursor:pointer; transition:background .15s, transform .15s; }
.shopreel-sn-x:hover { background:rgba(0,0,0,.1); transform:rotate(90deg); }
.shopreel-sn-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:2px 16px 14px; }
.shopreel-sn-load { display:flex; justify-content:center; padding:60px 0; }
.shopreel-sn-spin { width:30px; height:30px; border-radius:50%; border:3px solid #e6e6ea; border-top-color:var(--sr-accent,#e11d2a); animation:shopreel-sn-spin 1s linear infinite; }
@keyframes shopreel-sn-spin { to { transform:rotate(360deg); } }
/* gallery: native scroll-snap carousel, fully mouse-usable */
.shopreel-sn-gal { position:relative; margin-top:4px; }
.shopreel-sn-galview { overflow:hidden; border-radius:16px; }
.shopreel-sn-galtrack { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; cursor:grab; border-radius:16px; }
.shopreel-sn-galtrack.shopreel-sn-grabbing { cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.shopreel-sn-galtrack::-webkit-scrollbar { display:none; }
.shopreel-sn-galcell { flex:0 0 86%; scroll-snap-align:start; aspect-ratio:1/1; overflow:hidden; border-radius:14px; background:#f3f3f6; }
.shopreel-sn-galimg { width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.shopreel-sn-galempty { display:block; width:100%; height:100%; background:#f3f3f6; }
.shopreel-sn-arrow { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:999px; background:rgba(255,255,255,.92); color:#111; box-shadow:0 3px 12px rgba(0,0,0,.18); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1; opacity:0; transition:opacity .18s, background .15s, transform .12s; z-index:2; }
.shopreel-sn-gal:hover .shopreel-sn-arrow { opacity:1; }
.shopreel-sn-arrow:hover { background:#fff; }
.shopreel-sn-arrow:active { transform:translateY(-50%) scale(.9); }
.shopreel-sn-prev { left:8px; } .shopreel-sn-next { right:8px; }
.shopreel-sn-arrow[disabled] { opacity:0 !important; pointer-events:none; }
@media (pointer:coarse) { .shopreel-sn-arrow { display:none; } }
.shopreel-sn-dots { display:flex; justify-content:center; gap:6px; margin-top:10px; }
.shopreel-sn-dot { width:6px; height:6px; border-radius:999px; background:#d5d5db; cursor:pointer; transition:background .18s, width .18s; }
.shopreel-sn-dot.on { background:var(--sr-accent,#e11d2a); width:18px; }
/* info: title + price */
.shopreel-sn-info { margin-top:14px; }
.shopreel-sn-title { display:inline-flex; align-items:flex-start; gap:6px; font-size:15.5px; font-weight:650; line-height:1.3; color:#111; text-decoration:none; }
.shopreel-sn-title:hover { text-decoration:underline; }
.shopreel-sn-ext { flex:none; margin-top:3px; opacity:.42; }
.shopreel-sn-price { margin-top:8px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:17px; }
.shopreel-sn-price.shopreel-sn-flash { animation:shopreel-sn-pricepulse .32s ease; }
@keyframes shopreel-sn-pricepulse { 0% { transform:translateY(-3px); opacity:.35; } 100% { transform:none; opacity:1; } }
.shopreel-sn-now { font-weight:800; }
.shopreel-sn-was { font-size:13px; font-weight:600; color:#9a9aa2; text-decoration:line-through; }
.shopreel-sn-disc { align-self:center; font-size:11px; font-weight:800; color:#fff; background:var(--sr-accent,#e11d2a); padding:2px 7px; border-radius:999px; }
.shopreel-sn-napr { color:#a6a6ad; font-size:14px; font-weight:700; }
/* variant pills */
.shopreel-sn-opts { margin-top:16px; display:flex; flex-direction:column; gap:14px; }
.shopreel-sn-optname { display:flex; gap:6px; font-size:12px; font-weight:700; color:#565660; margin-bottom:8px; }
.shopreel-sn-optpick { color:#111; font-weight:600; }
.shopreel-sn-optvals { display:flex; flex-wrap:wrap; gap:8px; }
.shopreel-sn-optval { font:inherit; font-size:12.5px; font-weight:600; color:#222; background:#fff; border:1.5px solid #dcdce1; border-radius:11px; padding:9px 14px; cursor:pointer; transition:border-color .14s, background .14s, color .14s, transform .1s; }
.shopreel-sn-optval:hover { border-color:#111; }
.shopreel-sn-optval.on { border-color:var(--sr-accent,#e11d2a); background:var(--sr-accent,#e11d2a); color:#fff; animation:shopreel-sn-pop .22s cubic-bezier(.3,1.4,.5,1); }
@keyframes shopreel-sn-pop { 0% { transform:scale(.9); } 60% { transform:scale(1.06); } 100% { transform:scale(1); } }
.shopreel-sn-optval.dim { color:#b6b6bd; border-color:#ececf0; }
.shopreel-sn-optval.oos { position:relative; color:#a6a6ad; border-color:#ececf0; }
.shopreel-sn-optval.oos::after { content:""; position:absolute; left:8%; right:8%; top:50%; height:1.5px; background:#c4c4cc; transform:rotate(-9deg); }
.shopreel-sn-optval.oos.on { background:rgba(225,29,42,.06); border-color:var(--sr-accent,#e11d2a); color:var(--sr-accent,#e11d2a); }
/* sticky buy bar — sibling of the scroller so it stays pinned */
.shopreel-sn-buybar { flex:none; display:flex; gap:10px; padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px)); background:#fff; border-top:1px solid #f0f0f3; box-shadow:0 -6px 16px -10px rgba(0,0,0,.18); }
.shopreel-sn-atc { flex:1.4 1 0; min-width:0; font:inherit; font-size:14.5px; font-weight:800; color:#fff; background:var(--sr-cta,var(--sr-accent,#e11d2a)); border:0; border-radius:13px; padding:14px 12px; cursor:pointer; line-height:1.1; transition:transform .1s, filter .15s; }
.shopreel-sn-atc:hover { filter:brightness(1.06); }
.shopreel-sn-atc:active { transform:scale(.98); }
.shopreel-sn-atc.shopreel-sn-oos, .shopreel-sn-atc[disabled] { background:#a2a2aa; cursor:not-allowed; filter:none; transform:none; }
.shopreel-sn-atc.is-added { background:#1c9d5b; }
.shopreel-sn-more { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:700; color:#111; background:#fff; border:1.5px solid #d7d7de; border-radius:13px; padding:14px 12px; text-decoration:none; line-height:1.1; transition:background .15s, border-color .15s; }
.shopreel-sn-more:hover { background:#f6f6f8; border-color:#111; }
@media (max-width:560px) {
  .shopreel-sn-sheet { max-height:90%; }
  .shopreel-sn-optval { padding:10px 16px; font-size:13.5px; }
  .shopreel-sn-atc, .shopreel-sn-more { padding:15px 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .shopreel-sn-sheet, .shopreel-sn-backdrop, .shopreel-sn-galtrack { transition-duration:.01ms; }
  .shopreel-sn-optval.on, .shopreel-sn-price.shopreel-sn-flash, .shopreel-sn-x { animation:none; }
}

/* real like count on the action-rail heart */
.shopreel-like-n { font-variant-numeric:tabular-nums; letter-spacing:.01em; }

/* ---- Share — bottom sheet inside the reel with all share options ---- */
.shopreel-shareui { position:absolute; inset:0; z-index:42; overflow:hidden; pointer-events:none; font-family:var(--shopreel-font, inherit); }
.shopreel-shareui.shopreel-sh-open { pointer-events:auto; }
.shopreel-sh-backdrop { position:absolute; inset:0; background:rgba(6,6,9,.42); opacity:0; transition:opacity .24s ease; }
.shopreel-sh-open .shopreel-sh-backdrop { opacity:1; }
.shopreel-sh-sheet { position:absolute; left:0; right:0; bottom:0; z-index:1; background:#fff; color:#111; border-radius:20px 20px 0 0; overflow:hidden; box-shadow:0 -16px 44px -12px rgba(6,6,9,.5); transform:translateY(100%); transition:transform .32s cubic-bezier(.16,1,.29,1); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
.shopreel-sh-open .shopreel-sh-sheet { transform:translateY(0); }
.shopreel-sh-grab { display:flex; justify-content:center; padding:9px 0 7px; cursor:grab; touch-action:none; }
.shopreel-sh-grab:active { cursor:grabbing; }
.shopreel-sh-grab span { width:40px; height:4px; border-radius:999px; background:#d8d8de; }
.shopreel-sh-head { position:relative; display:flex; align-items:center; justify-content:center; padding:6px 16px 12px; border-bottom:1px solid #f0f0f3; }
.shopreel-sh-head b { font-size:14px; font-weight:700; color:#111; }
.shopreel-sh-x { position:absolute; right:10px; top:1px; width:30px; height:30px; border:0; border-radius:999px; background:rgba(0,0,0,.05); color:#333; font-size:19px; line-height:1; cursor:pointer; transition:background .15s; }
.shopreel-sh-x:hover { background:rgba(0,0,0,.1); }
.shopreel-sh-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 4px; padding:16px 12px 6px; }
.shopreel-sh-opt { display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:0; cursor:pointer; font:inherit; padding:6px 2px; border-radius:12px; transition:background .14s ease, transform .1s ease; }
.shopreel-sh-opt:hover { background:#f5f5f7; }
.shopreel-sh-opt:active { transform:scale(.94); }
.shopreel-sh-ic { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.shopreel-sh-opt i { font-size:11.5px; font-weight:600; color:#444; font-style:normal; }
.shopreel-sh-copy .shopreel-sh-ic { background:#3f3f46; }
.shopreel-sh-wa .shopreel-sh-ic { background:#25d366; }
.shopreel-sh-fb .shopreel-sh-ic { background:#1877f2; }
.shopreel-sh-tw .shopreel-sh-ic { background:#000; }
.shopreel-sh-tg .shopreel-sh-ic { background:#2aabee; }
.shopreel-sh-em .shopreel-sh-ic { background:#ea4335; }
.shopreel-sh-more .shopreel-sh-ic { background:#8b8b93; }
@media (prefers-reduced-motion:reduce) { .shopreel-sh-sheet, .shopreel-sh-backdrop { transition-duration:.01ms; } }

/* ===== Coverflow — cinematic 3D "centre stage" layout ===== */
.shopreel-coverflow { padding:22px 0 26px; }
.shopreel-cf { position:relative; width:100%; max-width:1120px; margin:6px auto 0; }
.shopreel-cf-stage { position:relative; height:calc(var(--sr-cfw,280px) * 16 / 9 + 8px); margin:0 auto; perspective:1700px; transform-style:preserve-3d; overflow:hidden; touch-action:pan-y; }
/* Coverflow with "product info below": taller stage so the framed card under the centre
   reel (name / price / Add to cart) isn't clipped; only the centre card's info is shown. */
/* Fallback height before JS measures the centre card (renderCoverflow.place sets the exact
   height so the Add-to-cart button + card-border bottom are never clipped). Roomy enough
   for a two-line name + price + CTA. */
.shopreel-cf-below .shopreel-cf-stage { height:calc(var(--sr-cfw,280px) * 16 / 9 + 196px); }
/* same premium below-card look as Showcase: overlapping product circle, centred wrapping
   name, bold price + strikethrough compare, pill Add-to-cart. */
.shopreel-cf-below .shopreel-card-below .shopreel-card-info { padding:14px 10px 4px; gap:10px; align-items:center; }
.shopreel-cf-below .shopreel-card-below .shopreel-card-prod { flex-direction:column; align-items:center; gap:8px; text-align:center; width:100%; }
.shopreel-cf-below .shopreel-card-below .shopreel-card-prod img,
.shopreel-cf-below .shopreel-card-below .shopreel-card-prod-ph { width:48px; height:48px; margin-top:-34px; border:3px solid #fff; box-shadow:0 6px 16px -6px rgba(10,10,11,.4); position:relative; z-index:2; }
.shopreel-cf-below .shopreel-card-below .shopreel-card-prod-tx { align-items:center; text-align:center; width:100%; }
.shopreel-cf-below .shopreel-card-below .shopreel-card-prod-tx b { font-size:13px; white-space:normal; line-height:1.28; }
.shopreel-cf-below .shopreel-card-below .shopreel-card-prod-tx i { font-size:14.5px; font-weight:800; margin-top:3px; }
.shopreel-cf-below .shopreel-card-below .shopreel-card-cta { border-radius:999px; font-size:13px; padding:11px 12px; margin-top:4px; align-self:stretch; text-align:center; }
.shopreel-cf .shopreel-card { display:block; position:absolute; top:4px; left:50%; width:var(--sr-cfw,280px); transform:translateX(-50%); transform-origin:50% 50%; transform-style:preserve-3d; backface-visibility:hidden; transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease; will-change:transform, opacity; }
.shopreel-cf .shopreel-card-media { width:var(--sr-cfw,280px); border-radius:var(--shopreel-radius,18px); box-shadow:0 12px 32px -14px rgba(10,10,11,.55); filter:brightness(.72) saturate(.92); transition:filter .45s ease, box-shadow .45s ease; }
.shopreel-cf .shopreel-cf-active .shopreel-card-media { filter:none; box-shadow:0 28px 64px -20px rgba(10,10,11,.62), 0 0 0 1px rgba(255,255,255,.06); }
.shopreel-cf .shopreel-card:hover .shopreel-card-media { transform:none; }
/* product info + CTA only on the centre reel */
.shopreel-cf .shopreel-card:not(.shopreel-cf-active) .shopreel-card-info, .shopreel-cf .shopreel-card:not(.shopreel-cf-active) .shopreel-card-grad { opacity:0; transition:opacity .3s ease; }
.shopreel-cf .shopreel-cf-active .shopreel-card-info, .shopreel-cf .shopreel-cf-active .shopreel-card-grad { opacity:1; transition:opacity .4s ease .12s; }
/* Coverflow-below: side (non-centre) reels DROP the product card entirely — so a framed side
   reel is just the video (no empty gap under it). Only the centre reel keeps the card.
   Opt in to "show product card on side reels" (shopreel-cf-allcards) to bring it back on all. */
.shopreel-cf-below .shopreel-card:not(.shopreel-cf-active) .shopreel-card-info { display:none; }
.shopreel-cf-below.shopreel-cf-allcards .shopreel-card:not(.shopreel-cf-active) .shopreel-card-info { display:flex; opacity:1; }
/* nav arrows */
.shopreel-cf-nav { position:absolute; top:calc(var(--sr-cfw,280px) * 16 / 9 / 2 + 4px); transform:translateY(-50%); z-index:40; width:44px; height:44px; border-radius:50%; border:1px solid #e4e4e7; background:#fff; color:#0a0a0b; cursor:pointer; display:grid; place-items:center; box-shadow:0 4px 14px rgba(10,10,11,.16); transition:background .15s ease, transform .12s ease, box-shadow .15s ease; padding:0; line-height:0; }
.shopreel-cf-nav:hover { background:#f7f7f8; box-shadow:0 6px 18px rgba(10,10,11,.22); }
.shopreel-cf-nav:active { transform:translateY(-50%) scale(.92); }
.shopreel-cf-nav svg { display:block; }
.shopreel-cf-prev { left:6px; }
.shopreel-cf-next { right:6px; }
/* dots */
.shopreel-cf-dots { display:flex; justify-content:center; gap:7px; margin-top:18px; }
.shopreel-cf-dot { width:7px; height:7px; padding:0; border:0; border-radius:999px; background:rgba(10,10,11,.18); cursor:pointer; transition:width .25s ease, background .25s ease; }
.shopreel-cf-dot.on { width:22px; background:var(--sr-accent,#e11d2a); }
@media (max-width:700px) { .shopreel-cf-nav { width:38px; height:38px; } .shopreel-cf-prev { left:0; } .shopreel-cf-next { right:0; } }
@media (prefers-reduced-motion:reduce) { .shopreel-cf .shopreel-card { transition-duration:.01ms; } }