:root{--navy:#071326;--navy2:#102744;--red:#ed1938;--ice:#e8f0ff;--muted:#aab9cf;--header:65px;--filters:48px;--bottom:67px;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background:#071326;color:#fff;-webkit-font-smoothing:antialiased}button,a,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,.reel-feed:focus-visible{outline:2px solid #ff4965;outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}button[hidden],[hidden]{display:none!important}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.reels-shell{height:100dvh;display:flex;flex-direction:column;isolation:isolate;background:radial-gradient(ellipse at 46% 50%,#193150 0,#0a172b 52%,#050c18 100%)}
.reels-header{height:var(--header);flex:none;position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:8px max(16px,calc((100vw - 1160px)/2));border-bottom:1px solid #ffffff17;background:#091628f5;gap:10px}.reels-brand{display:flex;gap:10px;align-items:center;min-width:0}.reels-brand img{height:40px;width:75px;object-fit:contain;background:#fff;border-radius:6px;padding:3px}.reels-brand span{display:flex;flex-direction:column;gap:4px}.reels-brand b{font-size:16px;letter-spacing:1.3px;white-space:nowrap}.reels-brand b em{font-style:normal;color:#f2394f}.reels-brand small{font-size:8px;font-weight:750;letter-spacing:1.4px;color:#a5b8d5}.header-actions{display:flex;gap:10px;align-items:center}.live-tag{font-size:9px;letter-spacing:1px;color:#dbe9f7;font-weight:800;display:flex;gap:7px;align-items:center}.live-tag i{width:7px;height:7px;border-radius:100%;background:#ff405a;box-shadow:0 0 0 4px #ff405a21}.small-icon-btn{width:38px;height:38px;border:1px solid #ffffff28;border-radius:13px;color:#e8f0fb;background:#ffffff0a;display:grid;place-items:center;font-size:18px;position:relative}.small-icon-btn svg{width:21px;height:21px}.bag-bubble{position:absolute;top:-5px;right:-6px;background:#ed1938;color:#fff;border-radius:50%;font-weight:800;font-size:10px;min-width:19px;height:19px;padding:3px;display:grid;place-items:center}
.filter-row{height:var(--filters);flex:none;z-index:7;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:7px max(14px,calc((100vw - 560px)/2));overflow-x:auto;scrollbar-width:none;white-space:nowrap;background:#0a172acb;border-bottom:1px solid #ffffff13}.filter-row::-webkit-scrollbar{display:none}.filter-pill{border:1px solid #ffffff25;background:#ffffff0a;color:#bbcadf;white-space:nowrap;border-radius:999px;padding:8px 13px;font-size:11px;font-weight:750;flex:none}.filter-pill.active{background:#f5f8fe;color:#0a1930;border-color:#fff}.filter-pill:active{transform:scale(.98)}
.reel-feed{height:0;flex:1;min-height:0;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:contain;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative;max-width:560px;width:100%;margin:0 auto;border-left:1px solid #ffffff08;border-right:1px solid #ffffff08;touch-action:pan-y}.reel-feed::-webkit-scrollbar{display:none}.reel{height:100%;height:100%;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;background:#172744;isolation:isolate}.reel-stage{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(circle at 58% 35%,#253e61,#0b1727 75%)}.reel-stage img.reel-back{width:100%;height:100%;object-fit:cover;filter:blur(38px) brightness(.48) saturate(.8);transform:scale(1.25)}.reel-stage img.reel-photo{position:absolute;inset:15% 3% 21%;width:94%;height:62%;object-fit:contain;z-index:1;filter:drop-shadow(0 24px 26px #0005);transition:opacity .2s}.reel-stage .reel-cover-img{inset:10% 0 26%;width:100%;height:64%;object-fit:cover}.reel-stage:after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,#06132666 0%,transparent 23%,transparent 47%,#071324b5 71%,#061221 100%);pointer-events:none}.reel-glow{position:absolute;top:22%;left:15%;width:70%;height:40%;border:1px solid #ffffff15;border-radius:50%;z-index:0;filter:blur(.3px);pointer-events:none}.reel-top-tags{position:absolute;left:19px;right:19px;top:14px;z-index:4;display:flex;justify-content:space-between;gap:12px;align-items:center}.reel-index{border:1px solid #ffffff55;background:#0b1b32ad;padding:7px 10px;border-radius:8px;font-size:9px;font-weight:850;letter-spacing:1.4px;backdrop-filter:blur(8px)}.reel-img-counter{font-size:10px;font-weight:750;border-radius:999px;background:#02091765;padding:7px 10px;color:#e2e8f4}.reel-tint{position:absolute;right:-42px;top:37%;width:160px;height:220px;border:1px solid #ffffff08;border-radius:40px;transform:rotate(25deg);pointer-events:none}
.reel-side{position:absolute;z-index:5;right:12px;bottom:161px;display:flex;flex-direction:column;gap:16px;align-items:center}.reel-side-item{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;min-width:54px;padding:2px;filter:drop-shadow(0 2px 7px #000a)}.reel-side-item .side-circle{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#07182e9e;border:1px solid #ffffff3b;backdrop-filter:blur(10px)}.reel-side-item svg{width:23px;height:23px}.reel-side-item small{font-weight:800;font-size:10px;letter-spacing:.1px}.reel-side-item.liked .side-circle{background:#d90c30;border-color:#e13353}.reel-side-item.liked svg{fill:white}
.reel-info{position:absolute;z-index:4;left:21px;bottom:15px;right:76px;max-width:450px}.reel-brandname{font-size:10px;color:#c8dcf2;font-weight:800;letter-spacing:2px;text-transform:uppercase;display:inline-block;margin-bottom:9px}.reel-name{font-size:clamp(24px,5vw,36px);font-weight:870;letter-spacing:-.045em;line-height:1.1;margin:0 0 8px;max-height:2.25em;overflow:hidden;text-wrap:balance}.reel-meta{font-size:12px;color:#c2d4e8;line-height:1.35;margin-bottom:11px}.reel-price{font-size:26px;font-weight:850;letter-spacing:-.05em;display:flex;align-items:center;gap:9px;line-height:1.15}.reel-price small{font-size:10px;color:#ccd9e7;background:#ffffff1d;border-radius:6px;padding:6px 8px;letter-spacing:0;font-weight:700}.reel-price.unpriced{font-size:20px}.reel-original{font-size:11px;color:#b5c3d4;margin:3px 0 0;text-decoration:line-through}.reel-cta{display:flex;gap:7px;align-items:stretch;margin-top:14px}.reel-cart-btn{min-height:48px;flex:1;min-width:0;background:#f7f8fb;color:#10223b;border:1px solid #fff;border-radius:13px;font-size:12px;font-weight:850;padding:10px 11px;white-space:nowrap}.reel-wa-btn{height:48px;min-width:48px;display:grid;place-items:center;background:#1ba865;border-radius:13px;border:1px solid #34d38a;color:#fff;font-size:12px;font-weight:750;padding:0 10px}.reel-wa-btn svg{width:21px;height:21px}.reel-hint{position:absolute;top:72px;left:0;right:0;z-index:5;text-align:center;font-size:10px;color:#eef4fb;letter-spacing:1.2px;pointer-events:none;animation:hintFade 2s 2 ease both}.reel-hint span{display:block;font-size:20px;line-height:16px;margin-top:6px;animation:hintMove 1s infinite alternate}.reel-image-tap{position:absolute;inset:17% 12% 37%;z-index:3;background:transparent;border:0;color:transparent;cursor:pointer}
.reel-progress{height:2px;background:#ffffff14;flex:none;position:relative;z-index:7}.reel-progress span{display:block;height:100%;width:0;background:#fa2648;transition:width .25s}
.reels-nav{height:calc(var(--bottom) + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);flex:none;z-index:7;border-top:1px solid #ffffff1c;background:#091628f5;padding:4px max(12px,calc((100vw - 560px)/2)) calc(5px + env(safe-area-inset-bottom));gap:0}.nav-button{appearance:none;border:0;background:transparent;color:#94a9c6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:2px}.nav-button svg{height:22px;width:22px}.nav-button span{font-size:9px;font-weight:750}.nav-button.active{color:#ff4a65}.nav-button.active svg{stroke:#ff4a65}
.feed-status{height:100%;min-height:260px;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:12px;padding:30px;color:#dfeafd}.feed-status strong{font-size:18px;max-width:270px}.feed-status small{font-size:12px;line-height:1.65;color:#9eb2ca;max-width:300px}.feed-status button{border:1px solid #ffffff4d;color:#fff;background:#ffffff18;padding:12px 22px;border-radius:12px;margin-top:9px}.spinner{width:38px;height:38px;border-radius:50%;border:3px solid #ffffff20;border-top-color:#fc3454;animation:spin .6s linear infinite}.end-marker{text-align:center;font-size:11px;color:#90a4bf;padding:18px 4px;scroll-snap-align:end}
.sheet-dialog{position:fixed;z-index:30;width:min(460px,100%);max-width:100%;height:min(85dvh,760px);max-height:85dvh;top:auto;bottom:0;margin:0 auto 0;left:0;right:0;border:1px solid #ffffff22;border-bottom:0;padding:0;background:#f9fafc;color:#0d2039;border-radius:24px 24px 0 0;box-shadow:0 -18px 60px #02060c8a;overflow:hidden}.sheet-dialog::backdrop{background:#030b19bb;backdrop-filter:blur(6px)}.sheet-dialog[open]{display:flex;flex-direction:column}.sheet-header{padding:18px 20px 13px;border-bottom:1px solid #e4e8ee;display:flex;justify-content:space-between;gap:15px;align-items:flex-start;flex:none}.sheet-header small{font-size:9px;letter-spacing:1.6px;font-weight:800;color:#a31b35}.sheet-header h2{font-size:23px;margin:6px 0 0;line-height:1.1;letter-spacing:-.04em}.close-sheet{flex:none;height:35px;width:35px;display:grid;place-items:center;border:1px solid #d9e1e9;border-radius:50%;background:#fff;color:#19304a;font-size:25px}.sheet-body{padding:17px 20px 25px;min-height:0;overflow:auto;flex:1}.sheet-product-image{height:180px;width:100%;object-fit:contain;background:#e9edf3;border-radius:13px;margin-bottom:16px}.sheet-description{font-size:12px;line-height:1.7;color:#586c80}.sheet-spec-row{padding:12px 0;border-top:1px solid #e2e7ed;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;font-size:12px}.sheet-spec-row span{color:#687a8d;flex:1}.sheet-spec-row strong{text-align:right;max-width:60%;overflow-wrap:anywhere;font-weight:750}.sheet-footer{padding:12px 19px max(16px,env(safe-area-inset-bottom));border-top:1px solid #e1e6ec;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#fff;flex:none}.btn-main,.btn-second{min-height:47px;border-radius:12px;display:grid;place-items:center;font-size:11px;font-weight:800;text-align:center;padding:9px 12px}.btn-main{background:#d10b29;color:#fff;border:0}.btn-second{color:#172a40;background:#edf1f6;border:1px solid #e3e7ee}.bag-footer{display:flex;flex-direction:column}.bag-footer p{font-size:10px;color:#8290a3;line-height:1.4;margin:0 0 2px}.bag-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #e6ebef}.bag-row img{height:73px;width:76px;object-fit:contain;background:#edf2f8;border-radius:9px}.bag-row-info{flex:1;min-width:0}.bag-row strong{font-size:12px;line-height:1.3;display:block}.bag-row small{display:block;margin:5px 0;color:#667b8f}.bag-control{margin-top:9px;display:flex;align-items:center;gap:10px}.bag-control button{height:30px;width:30px;border-radius:8px;background:#e6ebf1;border:0;color:#0e233e}.bag-control .remove{margin-left:auto;font-size:11px;background:transparent;width:auto;text-decoration:underline;color:#a61e35}.bag-control span{font-size:13px;font-weight:800}.bag-empty{text-align:center;color:#75879c;font-size:13px;padding:38px 0;line-height:1.6}.reels-toast{position:fixed;z-index:55;left:50%;bottom:calc(var(--bottom) + 18px);transform:translate(-50%,15px);max-width:calc(100vw - 30px);color:#12213a;background:#f8fbff;padding:12px 17px;border-radius:12px;font-size:12px;font-weight:750;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 8px 35px #02091485;white-space:nowrap}.reels-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:600px){.live-tag{display:none}.reels-header{padding:8px 13px}.reel-name{font-size:clamp(23px,6vw,32px)}.reel-info{left:18px}.reel-price{font-size:23px}.reel-side{right:8px;bottom:152px}.reel-side-item .side-circle{width:42px;height:42px}.reel-side-item svg{width:21px}.reel-stage img.reel-photo{inset:14% 3% 23%;height:61%}.reel-stage .reel-cover-img{inset:11% 0 27%;height:62%}}
@media(max-height:690px){:root{--header:55px;--filters:43px;--bottom:56px}.reels-brand img{height:34px;width:67px}.reel-info{bottom:9px}.reel-meta{margin-bottom:6px}.reel-cta{margin-top:9px}.reel-cart-btn,.reel-wa-btn{height:42px;min-height:42px}.reel-side{bottom:130px;gap:10px}.reel-name{font-size:24px}.reel-side-item .side-circle{width:39px;height:39px}}
@media(max-width:345px){.reel-info{right:67px;left:12px}.reel-name{font-size:22px}.reel-cart-btn{font-size:10px}.reel-meta{font-size:10px}.reel-price{font-size:20px}.reels-brand b{font-size:14px}.reel-side-item .side-circle{width:39px;height:39px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes hintMove{to{transform:translateY(-6px)}}@keyframes hintFade{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0}}
