/* Andrey Shoppable Video — STAGING-ONLY block (Ultimate / OCTemplates Deals look). v3: compact cards 4/3/1+, compact mobile player */
.asv,.asv-modal{--asv-accent:var(--ds-primary-color,#00a8e8);--asv-text:#171a1f;--asv-muted:#5b6470;--asv-radius:12px;--asv-gap:20px;font-family:var(--ds-main-font,inherit);color:var(--asv-text)}
.asv{margin:24px 0 28px}
.asv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.asv-title{font-size:20px;font-weight:700;margin:0;line-height:1.2;color:var(--asv-text)}
.asv-nav{display:flex;gap:8px}
.asv-arrow{width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.14);background:#fff;color:var(--asv-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;padding:0}
.asv-arrow:hover,.asv-arrow:focus-visible{border-color:var(--asv-accent);color:var(--asv-accent);outline:none;box-shadow:0 0 0 3px rgba(0,168,232,.25)}
.asv-arrow[disabled]{opacity:.35;cursor:default;box-shadow:none}
.asv-track{list-style:none;margin:0;padding:4px 2px;display:flex;gap:var(--asv-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.asv-track::-webkit-scrollbar{display:none}
.asv-track:focus-visible{outline:2px solid var(--asv-accent);outline-offset:2px;border-radius:8px}
/* 4 cards ≥1200px (max 280px each), 3 cards 768–1199px, 1 card + peek below 768px */
.asv-card{flex:0 0 calc((100% - 3*var(--asv-gap))/4);max-width:280px;scroll-snap-align:start;min-width:0}
@media (max-width:1199px){.asv{--asv-gap:16px}.asv-card{flex-basis:calc((100% - 2*var(--asv-gap))/3);max-width:300px}}
@media (max-width:767px){.asv{--asv-gap:12px}.asv-card{flex-basis:74%;max-width:320px}.asv-title{font-size:18px}.asv-nav{display:none}}
/* 2026.10.13-2 — home carousel only (product page untouched): 480–767px ≈ 2 cards + peek; < 480px one card ≈ 69% of the block,
   ~30% of the block shows the next card; snap stops on every card; product row: name 2 lines + price under it inside the card */
@media (max-width:767px){
.asv-page-home{--asv-gap:10px}
.asv-page-home .asv-track{scroll-padding-left:2px}
.asv-page-home .asv-card{flex-basis:calc((100% - 2*var(--asv-gap))/2.35);max-width:300px;scroll-snap-stop:always}
.asv-page-home .asv-card-product{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:center}
.asv-page-home .asv-card-product img{grid-row:1 / span 2}
.asv-page-home .asv-price{grid-column:2;text-align:left;white-space:normal}
.asv-page-home .asv-price s,.asv-page-home .asv-price b{white-space:nowrap}
}
@media (max-width:479px){.asv-page-home .asv-card{flex-basis:69%;max-width:none}}
/* product page: the slot lives in the narrow buy column → 2 cards per row on desktop/tablet */
@media (min-width:768px){.asv-page-product{--asv-gap:12px;margin:8px 0 4px}.asv-page-product .asv-card{flex-basis:calc((100% - var(--asv-gap))/2);max-width:240px}.asv-page-product .asv-title{font-size:17px}}
.asv-poster{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--asv-radius);overflow:hidden;background:#111;color:#fff;text-decoration:none}
.asv-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.asv-poster:hover img,.asv-poster:focus-visible img{transform:scale(1.03)}
.asv-poster:focus-visible{outline:3px solid var(--asv-accent);outline-offset:2px}
.asv-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.7) 100%)}
.asv-play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.93);color:#111;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:.15s}
.asv-play svg{margin-left:3px;width:22px;height:22px}
.asv-poster:hover .asv-play{background:var(--asv-accent);color:#fff}
.asv-card-title{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;font-weight:600;font-size:13px;line-height:1.3;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.asv-card-product{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--asv-text);text-decoration:none;font-size:12px;line-height:1.3;min-height:44px}
.asv-card-product:hover .asv-card-product-name,.asv-card-product:focus-visible .asv-card-product-name{color:var(--asv-accent);text-decoration:underline}
.asv-card-product img{width:36px;height:36px;border-radius:8px;object-fit:contain;background:#f4f5f7;flex:0 0 auto}
.asv-card-product-name{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--asv-text)}
.asv-price{white-space:nowrap;text-align:right}.asv-price s{color:var(--asv-muted);font-size:11px}.asv-price b{color:var(--asv-accent);font-size:13px}
/* ---------- overlay player ---------- */
.asv-modal{position:fixed;inset:0;z-index:100000;background:rgba(6,8,12,.86);display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}
.asv-modal[hidden]{display:none}
.asv-dialog{display:grid;grid-template-columns:minmax(0,380px) minmax(280px,360px);max-width:760px;width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.asv-stage{position:relative;background:#000;aspect-ratio:9/16;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:hidden}
.asv-stage video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.asv-stage-btn{position:absolute;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;padding:0}
.asv-stage-btn:hover,.asv-stage-btn:focus-visible{background:var(--asv-accent);color:#fff;outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.asv-stage-btn[disabled]{opacity:.35;cursor:default}
.asv-close{top:10px;right:10px}
.asv-sound{bottom:12px;right:10px}
.asv-mprev,.asv-mnext{top:50%;margin-top:-20px;width:40px;height:40px;background:rgba(255,255,255,.8)}
.asv-mprev{left:8px}.asv-mnext{right:8px}
.asv-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25);z-index:2}
.asv-progress i{display:block;height:100%;width:0;background:var(--asv-accent)}
.asv-panel{padding:14px 16px 16px;overflow:auto;display:flex;flex-direction:column;gap:10px;font-family:var(--ds-main-font,inherit);color:var(--asv-text);-webkit-overflow-scrolling:touch}
.asv-panel-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--asv-muted)}
.asv-panel-title{font-size:15px;font-weight:700;line-height:1.3;color:var(--asv-text)}
.asv-product{display:flex;gap:10px;padding:10px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:#fff}
.asv-product-main{border-color:var(--asv-accent);box-shadow:0 0 0 2px rgba(0,168,232,.18)}
.asv-product-img img{width:72px;height:72px;object-fit:contain;border-radius:8px;background:#f4f5f7;display:block}
.asv-product-extra .asv-product-img img{width:56px;height:56px}
.asv-product-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.asv-product-name{font-weight:600;font-size:13px;line-height:1.3;color:var(--asv-text)!important;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.asv-product-name:hover,.asv-product-name:focus-visible{color:var(--asv-accent)!important;text-decoration:underline}
.asv-product-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.asv-product-price{font-size:14px;color:var(--asv-text)}.asv-product-price s{color:var(--asv-muted);font-size:12px;margin-right:6px}.asv-product-price b{color:var(--asv-accent);font-size:16px}
.asv-stock{font-size:11px;font-weight:700}.asv-stock-in{color:#168a43}.asv-stock-out{color:#b8321f}
.asv-product-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.asv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;line-height:1.1;text-decoration:none;cursor:pointer;border:1.5px solid var(--asv-accent);transition:.15s;flex:1 1 auto}
.asv-btn-sm{min-height:40px;font-size:12px;padding:6px 10px}
.asv-btn-outline{background:#fff;color:var(--asv-accent)!important}.asv-btn-outline:hover,.asv-btn-outline:focus-visible{background:var(--asv-accent);color:#fff!important;outline:none;box-shadow:0 0 0 3px rgba(0,168,232,.3)}
.asv-btn-primary{background:var(--asv-accent);color:#fff!important}.asv-btn-primary:hover,.asv-btn-primary:focus-visible{filter:brightness(.92);outline:none;box-shadow:0 0 0 3px rgba(0,168,232,.3)}.asv-btn-primary[disabled]{opacity:.6;cursor:default}
.asv-more{border-top:1px solid rgba(0,0,0,.08);padding-top:6px}
.asv-more summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--asv-text);padding:8px 0;min-height:44px;display:flex;align-items:center;gap:6px;list-style:none}
.asv-more summary::-webkit-details-marker{display:none}
.asv-more summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:.15s;margin-right:4px}
.asv-more[open] summary::before{transform:rotate(45deg)}
.asv-more summary:focus-visible{outline:2px solid var(--asv-accent);outline-offset:2px;border-radius:6px}
.asv-more .asv-product{margin-top:8px}
/* mobile overlay: full-height sheet, video ~45% of the viewport, controls in safe areas, page behind locked (JS) */
@media (max-width:767px){
  .asv-modal{padding:0;align-items:stretch}
  .asv-dialog{grid-template-columns:1fr;grid-template-rows:auto 1fr;border-radius:0;max-width:none;max-height:none;height:100vh;height:100dvh}
  .asv-stage{aspect-ratio:auto;height:45svh;height:45dvh;max-height:none;padding-top:env(safe-area-inset-top)}
  .asv-close{top:calc(8px + env(safe-area-inset-top));right:8px;width:44px;height:44px}
  .asv-sound{bottom:10px;right:8px;width:44px;height:44px}
  .asv-mprev,.asv-mnext{top:auto;bottom:10px;margin-top:0;width:44px;height:44px;background:rgba(255,255,255,.9)}
  .asv-mprev{left:8px}.asv-mnext{left:60px;right:auto}
  .asv-panel{padding:12px 14px calc(28px + env(safe-area-inset-bottom));gap:8px}
}
body.asv-open{overflow:hidden}
/* the STAGING badge (nginx-injected, staging only) must not cover overlay controls: dim it while the player is open */
body.asv-open #ultimate-staging-banner{opacity:.2!important;pointer-events:none}
/* 2026-10-08: prev/next only for 2+ videos; fullscreen toggle (four arrows out / in) — in-page CSS fullscreen, no Fullscreen API */
.asv-modal.asv-single .asv-mprev,.asv-modal.asv-single .asv-mnext{display:none}
.asv-fsbtn{bottom:12px;right:62px}
.asv-fsbtn .asv-fs-in,.asv-modal.asv-is-fs .asv-fsbtn .asv-fs-out{display:none}
.asv-modal.asv-is-fs .asv-fsbtn .asv-fs-in{display:block}
.asv-modal.asv-is-fs{padding:0;background:#000}
.asv-modal.asv-is-fs .asv-dialog{grid-template-columns:1fr;grid-template-rows:1fr;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0;background:#000;box-shadow:none}
.asv-modal.asv-is-fs .asv-panel{display:none}
.asv-modal.asv-is-fs .asv-stage{aspect-ratio:auto;width:100%;height:100%;max-height:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.asv-modal.asv-is-fs .asv-stage video{object-fit:contain}
@media (max-width:767px){.asv-fsbtn{bottom:10px;right:60px;width:44px;height:44px}.asv-modal.asv-is-fs .asv-sound,.asv-modal.asv-is-fs .asv-fsbtn,.asv-modal.asv-is-fs .asv-mprev,.asv-modal.asv-is-fs .asv-mnext{bottom:calc(10px + env(safe-area-inset-bottom))}}
/* the theme sets html{scrollbar-gutter:stable}: a fixed inset:0 overlay would leave a 15 px page strip on the right */
.asv-modal{right:auto;width:100vw}