/* Stopkick Stories — Discover block + highlight row. */
.sks-strip{position:relative;display:flex;align-items:center;gap:28px;background:#f7f7f9;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);padding:22px 60px 22px 24px}
.sks-discover{flex:none;display:flex;flex-direction:column;gap:5px;width:150px;position:relative;padding-right:36px}
.sks-discover-eyebrow{font-size:9px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:#8a8a92}
.sks-discover-title{font-size:23px;font-weight:900;line-height:.98;letter-spacing:-.5px;text-transform:uppercase;color:#0a0a0c}
.sks-discover-sub{font-size:10px;line-height:1.5;letter-spacing:1.6px;text-transform:uppercase;color:#9a9aa2;white-space:pre-line;margin-top:3px}
.sks-discover-arrow{position:absolute;top:50%;right:0;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:#fff;color:#111;font-size:17px;line-height:24px;text-align:center}
@media(max-width:640px){.sks-discover{display:none}.sks-strip{margin:0;padding:16px 48px 16px 14px}}
.sks-scroller{flex:1;min-width:0}
/* top padding leaves room for the NEW badge so overflow-x never clips it */
.sks-row{display:flex;gap:16px;overflow-x:auto;padding:12px 0 8px;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.sks-row::-webkit-scrollbar{display:none}
.sks-item{scroll-snap-align:start;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;width:104px;padding:0;color:#111;font:inherit;transition:transform .18s ease}
.sks-item:active{transform:scale(.92)}
.sks-item:focus-visible{outline:2px solid #ff3b3b;outline-offset:4px}
.sks-ring{position:relative;width:96px;height:96px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#ff2d2d,#ff7a18,#ff2d55,#ff2d2d);box-shadow:0 3px 14px rgba(225,29,46,.3);transition:box-shadow .2s ease}
.sks-item:hover .sks-ring{box-shadow:0 4px 22px rgba(225,29,46,.55)}
.sks-item.sks-viewed .sks-ring{background:#d6d6db;box-shadow:none}
.sks-item.sks-viewed{opacity:.6}
.sks-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;display:block;background:#e6e6ea}
.sks-new{position:absolute;top:-2px;right:2px;z-index:2;background:#e11d2e;color:#fff;font-size:9px;font-weight:800;letter-spacing:.6px;padding:3px 7px;border-radius:99px;box-shadow:0 2px 6px rgba(225,29,46,.5)}
.sks-name{font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;margin-top:2px}
.sks-sub{font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#9a9aa2;max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sks-item.sks-viewed .sks-sub{color:#b6b6bc}
.sks-scrollbtn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:#fff;color:#111;font-size:18px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.08);z-index:2}
@media(min-width:900px){.sks-scrollbtn{display:flex}}
.sks-scroll-prev{left:14px}.sks-scroll-next{right:14px}
/* Viewer — full-bleed media, UI overlaid like Instagram */
.sks-viewer{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center}
.sks-viewer[hidden]{display:none}
.sks-viewer-bg{position:absolute;inset:0;background:#000}
.sks-viewer-box{position:relative;width:min(430px,100vw);min-height:100dvh;max-height:100dvh;background:#000;color:#fff;overflow:hidden}
@media(min-width:768px){.sks-viewer-box{min-height:90dvh;max-height:90dvh;border-radius:20px}}
.sks-progress{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;gap:5px;padding:calc(10px + env(safe-area-inset-top)) 14px 0}
.sks-progress i{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:99px;overflow:hidden;position:relative}
.sks-progress i b{position:absolute;inset:0;background:#fff;border-radius:99px;transform-origin:left;transform:scaleX(0)}
.sks-head{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(24px + env(safe-area-inset-top)) 14px 26px;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent)}
.sks-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5);flex:none;background:#333}
.sks-brandline{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.sks-title{font-weight:800;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.sks-byline small{font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.65)}
.sks-byline{flex:1;min-width:0}
.sks-tag{font-size:9.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#e11d2e,#ff5a3c);padding:5px 11px;border-radius:999px;flex:none;box-shadow:0 2px 12px rgba(225,29,46,.5)}
.sks-tag[hidden]{display:none}
.sks-count{font-size:11px;font-weight:600;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:999px;flex:none}
.sks-close{width:42px;height:42px;flex:none;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sks-close:active{transform:scale(.9)}
.sks-stage{position:absolute;inset:0}
.sks-slide{position:absolute;inset:0;animation:sksIn .32s ease}
@keyframes sksIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.sks-mediawrap{position:absolute;inset:0;background:#111}
.sks-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Desktop: 9:16 stage centred, no ugly full-width stretch-crop */
@media(min-width:768px){
  .sks-stage{display:flex;align-items:center;justify-content:center}
  .sks-slide{position:relative;width:min(430px,52dvh * 0.5625 + 430px);max-width:100%;height:100%}
  .sks-mediawrap{position:absolute;inset:0;border-radius:18px;overflow:hidden}
}
/* Reference layout: bottom-left title block + pill CTA row */
.sks-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:70px 18px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.88) 25%,transparent)}
.sks-slide-title{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#ff6b6b;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.sks-headline{font-size:clamp(30px,9vw,44px);font-weight:900;line-height:.95;letter-spacing:-.5px;text-transform:uppercase;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7);max-width:100%}
.sks-variant{font-size:15px;font-weight:300;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.85)}
.sks-size{font-size:11px;font-weight:600;letter-spacing:2.5px;color:rgba(255,255,255,.75)}
.sks-slide-sub{font-size:13px;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.sks-price{font-size:15px;font-weight:700;display:flex;align-items:baseline;gap:10px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.sks-price s{color:rgba(255,255,255,.65);font-weight:400;font-size:13px}
.sks-price strong{color:#fff;font-size:18px}
.sks-sku{font-size:10.5px;letter-spacing:1.5px;opacity:.6;text-transform:uppercase}
.sks-actions{display:flex;gap:10px;width:100%;align-items:center;margin-top:4px}
.sks-cta{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff;font-weight:700;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;padding:15px 14px;border-radius:999px;text-decoration:none;backdrop-filter:blur(6px)}
.sks-cta .sks-wa{width:18px;height:18px;flex:none}
.sks-cta .sks-go{font-size:15px;opacity:.8}
.sks-cta:active{transform:scale(.98)}
.sks-fav{flex:none;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.sks-fav svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2}
.sks-fav.sks-liked svg{fill:#ff2d55;stroke:#ff2d55}
.sks-fav:active{transform:scale(.9)}
.sks-byline{display:flex;flex-direction:column;gap:0}
.sks-byline small{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.sks-prev,.sks-next{position:absolute;top:110px;bottom:0;width:30%;background:none;border:0;cursor:pointer;color:transparent;z-index:3}
.sks-prev{left:0}.sks-next{right:0}
/* Hide site's own floating buttons (theme/chat/WhatsApp) while viewer is open */
body.sks-open a[href*="wa.me"]:not(.sks-cta),
body.sks-open a[href*="api.whatsapp.com"]:not(.sks-cta),
body.sks-open [class*="whatsapp" i],
body.sks-open [id*="whatsapp" i],
/* OneClick Chat to Order floating button */
body.sks-open .wcco-floating-btn,
body.sks-open #wcco-floating-btn,
body.sks-open [class*="wcco" i],
body.sks-open [id*="wcco" i]{display:none!important}
@media(prefers-reduced-motion:reduce){.sks-slide{animation:none}.sks-progress i b{transition:none!important}}
