/* =====================================================================
   oVideo - front-end widget styles
   All rules namespaced under .ovid-w to avoid clashing with the theme.
   Per-widget tokens (--ovid-brand, offsets, radius) are set inline by JS.
   ===================================================================== */

.ovid-w, .ovid-w * { box-sizing: border-box; }

.ovid-w {
    position: fixed;
    z-index: 999990;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ovid-brand: #635d9a;
    --ovid-btn-text: #fff;
    --ovid-radius: 22px;
    --ovid-dx: 30px; --ovid-dy: 30px;
    --ovid-mx: 20px; --ovid-my: 80px;
}

/* corners (desktop) */
.ovid-w.ovid-bottom-left  { bottom: var(--ovid-dy); left:  var(--ovid-dx); }
.ovid-w.ovid-bottom-right { bottom: var(--ovid-dy); right: var(--ovid-dx); }
.ovid-w.ovid-top-left     { top:    var(--ovid-dy); left:  var(--ovid-dx); }
.ovid-w.ovid-top-right    { top:    var(--ovid-dy); right: var(--ovid-dx); }

/* ---------- COLLAPSED PREVIEW ---------- */
.ovid-w-preview {
    display: block; padding: 0; border: none; cursor: pointer; background: #000;
    width: var(--ovid-pw, 118px); height: var(--ovid-ph, 210px); border-radius: var(--ovid-radius); overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.28); position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
    animation: ovid-pop .35s cubic-bezier(.2,.8,.35,1);
}
.ovid-w-preview:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,.34); }
.ovid-w-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ovid-w.ovid-shape-circle .ovid-w-preview { width: min(var(--ovid-pw, 92px), var(--ovid-ph, 92px)); height: min(var(--ovid-pw, 92px), var(--ovid-ph, 92px)); border-radius: 50%; }
.ovid-w-preview-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.9);
    display: flex; align-items: center; justify-content: center;
}
.ovid-w-preview-play svg { width: 18px; height: 18px; margin-left: 2px; fill: var(--ovid-brand); }
.ovid-w-preview-ring {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: none; /* no ring by default; shown only when "Show frame" is on */
}
.ovid-w-preview-close {
    position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border: none; padding: 0;
    border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: none;
    align-items: center; justify-content: center; z-index: 3;
}
.ovid-w-preview:hover .ovid-w-preview-close { display: flex; }
.ovid-w-preview-close svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.4; fill: none; }
/* on a circle preview the top-right corner is clipped by border-radius+overflow,
   so tuck the close button inward to keep it fully inside the circle */
.ovid-w.ovid-shape-circle .ovid-w-preview-close { top: 16%; right: 16%; }

/* ---------- INLINE (shortcode) MODE ---------- */
/* a widget mounted in page content flows in place instead of fixed-to-corner */
.ovid-inline-mount { display: block; margin: 16px 0; }
.ovid-w.ovid-inline { position: relative; z-index: 1; display: inline-block; max-width: 100%; vertical-align: top; }
.ovid-w.ovid-inline .ovid-w-preview-close { display: none; } /* no dismiss-nag for an embedded widget */
/* embedded in content -> no drop shadow (clicking opens the fullscreen version) */
.ovid-w.ovid-inline .ovid-w-preview,
.ovid-w.ovid-inline .ovid-w-preview:hover,
.ovid-w.ovid-inline .ovid-w-panel { box-shadow: none; }
/* no hover-zoom for an in-content widget */
.ovid-w.ovid-inline .ovid-w-preview:hover { transform: none; }
/* in-content lightbox: keep only Close - drop minimize + collapse buttons */
.ovid-w.ovid-inline .ovid-w-min,
.ovid-w.ovid-inline .ovid-w-expand { display: none; }

/* ---------- FRAME (box-shadow on the preview ring overlay; width in px) ---------- */
.ovid-w.ovid-framed .ovid-w-preview-ring { box-shadow: inset 0 0 0 var(--ovid-bw, 3px) var(--ovid-brand); opacity: 1; }
/* gallery has no .ovid-w-preview-ring - frame the deck cards (collapsed) + the lightbox window directly (box-sizing:border-box keeps the size) */
.ovid-w.ovid-framed .ovid-deck-card { border: var(--ovid-bw, 3px) solid var(--ovid-brand); }
.ovid-w.ovid-framed .ovid-gal-stage { border: var(--ovid-bw, 3px) solid var(--ovid-brand); }

/* ---------- EXPANDED PANEL ---------- */
.ovid-w-panel {
    position: relative; width: var(--ovid-ew, 300px); height: var(--ovid-eh, 533px); max-height: calc(100vh - 40px);
    border-radius: var(--ovid-radius); overflow: hidden; background: #000;
    box-shadow: 0 20px 60px rgba(0,0,0,.4); display: none;
    animation: ovid-pop .3s cubic-bezier(.2,.8,.35,1);
    transition: height .28s cubic-bezier(.2,.8,.35,1);
}
.ovid-w.ovid-open .ovid-w-panel { display: block; }
.ovid-w.ovid-open .ovid-w-preview { display: none; }
.ovid-w-video {
    width: 100%; height: 100%; object-fit: cover; display: block; background: #000; cursor: pointer;
    /* Promote the video onto its own GPU layer. Without this the rounded/clipped
       video can freeze on a stale frame while currentTime keeps advancing, until
       a forced repaint (e.g. opening DevTools / resizing) - a Chrome compositing
       quirk for <video> inside an overflow:hidden + border-radius ancestor. */
    transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: inherit;
}
/* Keep-alive: some Chrome + GPU-driver combos stall the hardware video decoder
   on first play (both picture AND sound freeze) until a forced repaint - opening
   DevTools, resizing or scrolling. A tiny perpetual opacity animation while the
   player panel is open keeps the compositor presenting frames and prevents the
   stall. Imperceptible (1 -> .99); runs only while a widget is open & playing. */
@keyframes ovid-keepalive { 0%, 100% { opacity: 1; } 50% { opacity: .99; } }
.ovid-w.ovid-open .ovid-w-video { animation: ovid-keepalive 2s linear infinite; }
/* centered play overlay (shown only while paused) */
.ovid-w-playpause {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.85);
    width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center; z-index: 4; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.ovid-w.ovid-paused .ovid-w-playpause { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.ovid-w-playpause svg { width: 13px; height: 13px; margin-left: 2px; fill: #fff; stroke: none; }
/* shared translucent "pill" for the control groups */
.ovid-w-controls, .ovid-w-vol {
    position: absolute; top: 10px; z-index: 6; display: flex; flex-direction: row; align-items: center;
    /* solid-ish pill instead of backdrop-filter: blurring the moving video on
       every frame caused heavy playback jank in desktop Chrome while hovered */
    background: rgba(18,20,28,.62); border-radius: 18px; padding: 2px;
}
.ovid-w-controls { right: 10px; gap: 0; }       /* minimize / expand / close in one block */
.ovid-w-vol     { left: 10px; gap: 0; overflow: hidden; }  /* collapses tight around the speaker until hover */

/* icon buttons inside the pills - transparent, subtle hover highlight */
.ovid-w-ctrl {
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; transition: background .15s, transform .1s;
}
.ovid-w-ctrl:hover { background: rgba(255,255,255,.16); }
.ovid-w-ctrl:active { transform: scale(.9); }
.ovid-w-ctrl svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ovid-w-vol .ovid-w-ctrl { flex: 0 0 30px; }

/* volume slider (slides out on hover, stays within the pill).
   !important + min-width/border/padding resets override any theme input[type=range] rule
   (those have higher specificity than a single class) so it truly collapses to 0 when idle. */
.ovid-w-vol-slider {
    -webkit-appearance: none !important; appearance: none !important; height: 4px; border-radius: 4px; cursor: pointer;
    width: 0 !important; min-width: 0 !important; opacity: 0; margin: 0 !important; padding: 0 !important;
    border: 0 !important; box-shadow: none !important;
    transition: width .2s ease, opacity .2s ease, margin .2s ease;
    background: rgba(255,255,255,.5); outline: none; vertical-align: middle;
}
.ovid-w-vol:hover .ovid-w-vol-slider, .ovid-w-vol:focus-within .ovid-w-vol-slider { width: 76px !important; opacity: 1; margin: 0 8px 0 4px !important; }
.ovid-w-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: pointer; }
.ovid-w-vol-slider::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: pointer; }

/* auto-hide: control pills appear only while the widget is hovered - in both
   normal AND expanded mode. Touch screens (no hover) keep them visible. */
.ovid-w-controls, .ovid-w-vol { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.ovid-w-panel:hover .ovid-w-controls,
.ovid-w-panel:hover .ovid-w-vol { opacity: 1; pointer-events: auto; }
@media (hover: none) {
    .ovid-w-controls, .ovid-w-vol { opacity: 1; pointer-events: auto; }
}

/* while the lead form is open, hide all player chrome (only the form's own close stays) */
.ovid-w.ovid-form-open .ovid-w-controls,
.ovid-w.ovid-form-open .ovid-w-vol,
.ovid-w.ovid-form-open .ovid-w-seek,
.ovid-w.ovid-form-open .ovid-w-time,
.ovid-w.ovid-form-open .ovid-w-playpause { display: none !important; }

/* seek / scrub bar at the very bottom: thin progress always visible,
   thickens + shows thumb & time on widget hover; click/drag to seek */
.ovid-w-seek { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 5; display: flex; align-items: flex-end; cursor: pointer; touch-action: none; }
.ovid-w-seek-track { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,.3); transition: height .15s ease; }
.ovid-w-panel:hover .ovid-w-seek-track { height: 6px; }
.ovid-w-seek-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--ovid-brand); }
.ovid-w-time { position: absolute; right: 10px; bottom: 14px; z-index: 5; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); opacity: 0; transition: opacity .15s ease; pointer-events: none; font-variant-numeric: tabular-nums; }
.ovid-w-panel:hover .ovid-w-time { opacity: 1; }

/* ---------- CTA ---------- */
.ovid-w-cta {
    position: absolute; left: 50%; bottom: 22px; z-index: 5;
    width: calc(100% - 32px); max-width: 360px;
    padding: 14px 18px; border: none; cursor: pointer; font-size: 15px; font-weight: 600;
    border-radius: calc(var(--ovid-radius) * .55); background: var(--ovid-brand); color: var(--ovid-btn-text);
    box-shadow: 0 6px 18px rgba(0,0,0,.3); opacity: 0; transform: translate(-50%, 14px);
    transition: opacity .3s ease, transform .3s ease; pointer-events: none;
    text-align: center; line-height: 1.2; white-space: normal;
}
.ovid-w-cta.ovid-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ovid-w-cta:hover { filter: brightness(1.05); }

/* ---------- LEAD FORM OVERLAY ---------- */
.ovid-w-form {
    position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column;
    justify-content: center; align-items: center; gap: 10px; padding: 18px 18px;
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.82));
    backdrop-filter: blur(2px);
}
.ovid-w-form.ovid-show { display: flex; }
/* keep fields at their natural height (don't let flex squeeze them) so the
   panel grows to fit instead of shrinking the inputs */
.ovid-w-form > * { flex-shrink: 0; }
/* cap content width + center it so fields/buttons stay compact in a big (expanded) panel */
.ovid-w-form > * { width: 100%; max-width: 360px; }
.ovid-w-form-title { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 4px; text-align: center; }
.ovid-w-input {
    width: 100%; height: 44px; border: none; border-radius: 10px; padding: 0 14px; font-size: 14px;
    background: rgba(255,255,255,.95); color: #1a1a1a; outline: none;
}
.ovid-w-input:focus { box-shadow: 0 0 0 2px var(--ovid-brand); }
.ovid-w-submit {
    width: 100%; height: 46px; border: none; border-radius: 10px; cursor: pointer; margin-top: 4px;
    background: var(--ovid-brand); color: var(--ovid-btn-text); font-size: 15px; font-weight: 600;
}
.ovid-w-submit:disabled { opacity: .6; cursor: default; }
.ovid-w-consent { display: flex; align-items: flex-start; gap: 8px; color: rgba(255,255,255,.85); font-size: 11.5px; line-height: 1.4; }
.ovid-w-consent input { margin-top: 2px; }
.ovid-w-consent a { color: #fff; text-decoration: underline; }
.ovid-w-msg { color: #fff; font-size: 14px; text-align: center; min-height: 18px; }
.ovid-w-msg.ovid-err { color: #ffd2cc; }
.ovid-w-thanks { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 20px; text-align: center; }
.ovid-w-thanks-msg { color: #fff; font-size: 17px; font-weight: 600; line-height: 1.4; }
/* form / thanks close button - same style as the widget control buttons */
.ovid-w-form-close, .ovid-w-thanks-close {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: none; cursor: pointer; padding: 0;
    border-radius: 50%; background: rgba(18,20,28,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; transition: background .15s, transform .1s;
}
.ovid-w-form-close:hover, .ovid-w-thanks-close:hover { background: rgba(18,20,28,.62); }
.ovid-w-form-close:active, .ovid-w-thanks-close:active { transform: scale(.9); }
.ovid-w-form-close svg, .ovid-w-thanks-close svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- EXPANDED (enlarge + center, like oChat) ---------- */
.ovid-w-backdrop {
    position: fixed; inset: 0; background: rgba(10,12,20,.6); z-index: 999989;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ovid-fade .2s ease;
}
.ovid-w.ovid-expanded {
    position: fixed !important; /* override inline 'relative' so shortcode widgets also go fullscreen */
    /* Center the lightbox with a full-viewport flex box, NOT transform:
       a transformed ancestor breaks <video> frame presentation in Chrome
       (video freezes, audio keeps playing) even when the video has its own
       GPU layer. inset:0 + flex centers the panel without any transform. */
    inset: 0 !important; transform: none !important;
    display: flex !important; align-items: center; justify-content: center;
    z-index: 999991; pointer-events: none; /* empty-area clicks fall through to the backdrop (close) */
}
.ovid-w.ovid-expanded .ovid-w-panel { pointer-events: auto; }
.ovid-w.ovid-expanded .ovid-w-panel {
    width: min(92vw, calc(92vh * 9 / 16)); height: min(92vh, calc(92vw * 16 / 9)); max-height: 92vh;
    transition: none; /* expand/collapse changes both dimensions - keep it instant */
}
html.ovid-has-expanded { overflow: hidden; }
@keyframes ovid-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
    .ovid-w.ovid-bottom-left  { bottom: var(--ovid-my); left:  var(--ovid-mx); }
    .ovid-w.ovid-bottom-right { bottom: var(--ovid-my); right: var(--ovid-mx); }
    .ovid-w.ovid-top-left     { top:    var(--ovid-my); left:  var(--ovid-mx); }
    .ovid-w.ovid-top-right    { top:    var(--ovid-my); right: var(--ovid-mx); }
    /* clamp the configured (desktop) sizes to the viewport, keeping aspect ratio */
    .ovid-w-preview { width: min(var(--ovid-pw, 118px), 42vw); height: auto; aspect-ratio: var(--ovid-par, 118 / 210); }
    .ovid-w.ovid-shape-circle .ovid-w-preview { width: min(var(--ovid-pw, 92px), var(--ovid-ph, 92px), 28vw); height: auto; aspect-ratio: 1; }
    .ovid-w-panel { width: min(var(--ovid-ew, 300px), 92vw); height: auto; aspect-ratio: var(--ovid-ear, 300 / 533); max-height: calc(100vh - 24px); }
}

/* ---------- 16:9 LANDSCAPE FORMAT ---------- */
/* preview/panel dimensions come from the per-widget size vars (--ovid-pw etc.);
   only the landscape-specific tweaks remain here */
.ovid-w.ovid-fmt-16x9 .ovid-w-input { height: 48px; font-size: 15px; }
.ovid-w.ovid-fmt-16x9 .ovid-w-submit { height: 50px; }
/* fullscreen expand keeps a viewport-fit 16:9 box (independent of the configured size) */
.ovid-w.ovid-fmt-16x9.ovid-expanded .ovid-w-panel {
    width: min(92vw, calc(92vh * 16 / 9)); height: min(92vh, calc(92vw * 9 / 16));
}

/* ---------- CARD-DECK PREVIEW (gallery collapsed state) ---------- */
.ovid-deck {
    --ovid-deck-dx: 2px; --ovid-deck-dy: 2px; --ovid-deck-rot: 2deg;
    --ovid-deck-fan: 2px; --ovid-deck-frot: 2deg;
    position: relative; cursor: pointer; display: block;
    width: var(--ovid-pw, 118px); height: var(--ovid-ph, 210px);
    animation: ovid-pop .35s cubic-bezier(.2,.8,.35,1);
}
.ovid-deck:focus-visible { outline: 2px solid var(--ovid-brand); outline-offset: 3px; }
.ovid-deck-card {
    position: absolute; inset: 0; overflow: hidden; background: #000;
    border-radius: var(--ovid-radius); box-shadow: 0 10px 30px rgba(0,0,0,.28);
    transform:
        translate(calc(var(--ovid-i) * var(--ovid-deck-dx)), calc(var(--ovid-i) * var(--ovid-deck-dy)))
        rotate(calc(var(--ovid-i) * var(--ovid-deck-rot)));
    transform-origin: 50% 100%;
    transition: transform .28s cubic-bezier(.2,.8,.35,1), box-shadow .2s ease;
}
.ovid-deck-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ovid-deck:hover .ovid-deck-card {
    transform:
        translate(calc(var(--ovid-i) * (var(--ovid-deck-dx) + var(--ovid-deck-fan))), calc(var(--ovid-i) * var(--ovid-deck-dy)))
        rotate(calc(var(--ovid-i) * (var(--ovid-deck-rot) + var(--ovid-deck-frot))));
}
.ovid-deck:hover .ovid-deck-card:last-child { box-shadow: 0 16px 40px rgba(0,0,0,.34); }
.ovid-deck-count {
    position: absolute; bottom: 8px; right: 8px; z-index: 3;
    padding: 2px 9px; border-radius: 18px; background: rgba(18,20,28,.62);
    color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none;
}
.ovid-w.ovid-shape-circle .ovid-deck-card { border-radius: 50%; }
.ovid-w.ovid-open .ovid-deck { display: none; }   /* collapsed deck hidden once the lightbox opens (mirror of .ovid-w-preview) */

/* ---------- GALLERY LIGHTBOX (reuses .ovid-w-backdrop + .ovid-expanded shell) ---------- */
/* The gallery panel reuses .ovid-w-panel, so by default it is display:none and is
   revealed ONLY inside the expanded lightbox by this gated rule. High specificity
   (0,5,0) also beats .ovid-w.ovid-expanded .ovid-w-panel sizing so the panel sizes
   to its content (empty area around it falls through to the backdrop -> close) and
   overflow:visible stops the thumb-strip / dots / CTA being clipped. */
.ovid-w.ovid-mode-gallery.ovid-expanded .ovid-w-panel.ovid-gal {
    display: flex; width: auto; height: auto;
    max-width: 100vw; max-height: 100vh; overflow: visible;
}
.ovid-gal {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: max(24px, 4vh) 16px; box-shadow: none; background: transparent;
}
.ovid-gal-live {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ovid-gal-stage {
    position: relative; max-width: 92vw;
    border-radius: var(--ovid-radius); overflow: hidden; background: #000;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    animation: ovid-pop .3s cubic-bezier(.2,.8,.35,1);
}
.ovid-gal-hero {
    display: block; max-width: 92vw; max-height: 70vh; width: auto; height: auto;
    object-fit: contain; transition: opacity .2s ease;
}
.ovid-gal-hero.ovid-fading { opacity: 0; }
.ovid-gal-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
    background: rgba(18,20,28,.62); display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .1s; z-index: 2;
}
.ovid-gal-nav:hover  { background: rgba(18,20,28,.82); }
.ovid-gal-nav:active { transform: translateY(-50%) scale(.9); }
.ovid-gal-nav svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ovid-gal-prev { left: 12px; } .ovid-gal-next { right: 12px; }
.ovid-gal-close {
    position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
    border: none; cursor: pointer; padding: 0; border-radius: 50%;
    background: rgba(18,20,28,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 3;
    transition: background .15s, transform .1s;
}
.ovid-gal-close:hover  { background: rgba(18,20,28,.62); }
.ovid-gal-close:active { transform: scale(.9); }
.ovid-gal-close svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ovid-gal-thumbs {
    display: flex; gap: 8px; max-width: 92vw; overflow-x: auto; overflow-y: hidden; padding: 4px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.ovid-gal-thumb {
    flex: 0 0 auto; width: 64px; height: 64px; border: none; padding: 0; cursor: pointer;
    border-radius: calc(var(--ovid-radius) * .45); overflow: hidden; background: #000;
    opacity: .55; transition: opacity .15s ease, box-shadow .15s ease;
}
.ovid-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ovid-gal-thumb:hover { opacity: .85; }
.ovid-gal-thumb.ovid-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--ovid-brand); }
.ovid-gal-thumb:focus-visible { outline: 2px solid var(--ovid-brand); outline-offset: 2px; }
.ovid-gal-dots { display: flex; gap: 7px; align-items: center; }
.ovid-gal-dot {
    width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.35); transition: background .15s ease, transform .15s ease;
}
.ovid-gal-dot.ovid-active { background: var(--ovid-brand); transform: scale(1.25); }

@media (max-width: 768px) {
    .ovid-deck { width: min(var(--ovid-pw,118px), 42vw); height: auto; aspect-ratio: var(--ovid-par, 118 / 210); }
    .ovid-gal-hero  { max-height: 56vh; }
    .ovid-gal-nav   { width: 38px; height: 38px; }
    .ovid-gal-thumb { width: 52px; height: 52px; }
}

@keyframes ovid-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .ovid-w-preview, .ovid-w-panel, .ovid-w-cta,
    .ovid-deck, .ovid-deck-card,
    .ovid-gal-stage, .ovid-gal-hero, .ovid-gal-nav, .ovid-gal-dot, .ovid-gal-thumb { animation: none; transition: none; }
}