/* Gluvera TikTok Store — Material 3 build.
   Color: M3 tonal schemes generated (material-color-utilities) from seed #1FA35C,
   with a harmonized custom "buy" color from #FF3355.
   Shape, motion, state-layer values from @material/web v0.192 sys tokens. */

.gts-shell{
  /* ---- M3 dark scheme (feed) ---- */
  --md-primary:#65DD8F; --md-on-primary:#00391B;
  --md-primary-container:#00522A; --md-on-primary-container:#82FAA9;
  --md-secondary:#B6CCB8; --md-secondary-container:#384B3C; --md-on-secondary-container:#D2E8D3;
  --md-surface:#111411; --md-surface-container-low:#191C19; --md-surface-container:#1D201D;
  --md-surface-container-high:#282B28; --md-surface-container-highest:#333532;
  --md-on-surface:#E1E3DE; --md-on-surface-variant:#C1C9BF;
  --md-outline:#8B938A; --md-outline-variant:#414941;
  --md-inverse-surface:#E1E3DE; --md-inverse-on-surface:#2E312E; --md-inverse-primary:#006D39;
  --md-error:#FFB4AB;
  --md-buy:#E42D01; --md-on-buy:#FFFFFF; --md-buy-container:#8C1800; --md-on-buy-container:#FFDAD3;
  --md-focus:var(--md-secondary);

  /* ---- shape (md.sys.shape) ---- */
  --md-shape-xs:4px; --md-shape-s:8px; --md-shape-m:12px; --md-shape-l:16px; --md-shape-xl:28px; --md-shape-full:9999px;

  /* ---- motion (md.sys.motion) ---- */
  --md-ease-emph:cubic-bezier(.2,0,0,1);
  --md-ease-emph-dec:cubic-bezier(.05,.7,.1,1);
  --md-ease-emph-acc:cubic-bezier(.3,0,.8,.15);
  --md-ease-std:cubic-bezier(.2,0,0,1);
  --md-dur-s:150ms; --md-dur-m:300ms; --md-dur-l:500ms;

  /* ---- elevation ---- */
  --md-elev-1:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3:0 1px 3px rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15);

  --md-font:"Roboto Flex","Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;

  position:fixed; inset:0; z-index:99990; background:#000;
  color:var(--md-on-surface); font:400 14px/20px var(--md-font); letter-spacing:.25px;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; color-scheme:dark;
}
/* light scheme scope: checkout sheet + tracking */
.gts-light{
  --md-primary:#006D39; --md-on-primary:#FFFFFF;
  --md-primary-container:#82FAA9; --md-on-primary-container:#00210D;
  --md-secondary:#4F6353; --md-secondary-container:#D2E8D3; --md-on-secondary-container:#0D1F13;
  --md-surface:#F9FAF5; --md-surface-container-low:#F3F4EF; --md-surface-container:#EDEEE9;
  --md-surface-container-high:#E7E9E4; --md-surface-container-highest:#E1E3DE;
  --md-on-surface:#191C19; --md-on-surface-variant:#414941;
  --md-outline:#717971; --md-outline-variant:#C1C9BF;
  --md-inverse-surface:#2E312E; --md-inverse-on-surface:#F0F1EC; --md-inverse-primary:#65DD8F;
  --md-error:#BA1A1A; --md-error-container:#FFDAD6; --md-on-error-container:#410002;
  --md-buy:#CD2800; --md-on-buy:#FFFFFF; --md-buy-container:#FFDAD3; --md-on-buy-container:#3D0500;
  --md-focus:var(--md-secondary);
  color:var(--md-on-surface); color-scheme:light;
}

.gts-shell [hidden]{display:none!important}
.gts-shell *,.gts-shell *::before,.gts-shell *::after{box-sizing:border-box}
.gts-shell :where(button){font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.gts-shell :where(a){color:inherit;text-decoration:none}
.gts-shell :where(h1,h2,h3,p,ul,ol){margin:0}
.gts-shell img,.gts-shell video{max-width:100%;display:block}
.gts-shell :focus-visible{outline:3px solid var(--md-focus);outline-offset:2px}
.ic{width:24px;height:24px;fill:currentColor;flex:none;display:block}

/* ---- M3 typescale ---- */
.t-display-s{font-size:36px;line-height:44px;font-weight:700;letter-spacing:-.25px;font-variation-settings:"wdth" 112}
.t-headline-m{font-size:28px;line-height:36px;font-weight:700;letter-spacing:0;font-variation-settings:"wdth" 110}
.t-headline-s{font-size:24px;line-height:32px;font-weight:700;letter-spacing:0;font-variation-settings:"wdth" 108}
.t-title-l{font-size:22px;line-height:28px;font-weight:600}
.t-title-m{font-size:16px;line-height:24px;font-weight:600;letter-spacing:.15px}
.t-title-s{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.1px}
.t-body-l{font-size:16px;line-height:24px;letter-spacing:.5px}
.t-body-m{font-size:14px;line-height:20px;letter-spacing:.25px}
.t-body-s{font-size:12px;line-height:16px;letter-spacing:.4px}
.t-label-l{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.1px}
.t-label-m{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.5px}
.t-label-s{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.5px}
.muted{color:var(--md-on-surface-variant)}
.num{font-variant-numeric:tabular-nums}

/* ---- state layer (md.sys.state: hover .08, focus/pressed .12) ---- */
.sl{position:relative;overflow:hidden;isolation:isolate}
.sl::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--md-dur-s) linear;z-index:-1;border-radius:inherit}
@media (hover:hover){.sl:hover::before{opacity:.08}}
.sl:focus-visible::before,.sl:active::before{opacity:.12}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 24px;border-radius:var(--md-shape-full);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.1px;white-space:nowrap;transition:border-radius var(--md-dur-m) var(--md-ease-emph)}
.btn .ic{width:18px;height:18px}
.btn-l{height:56px;padding:0 28px;font-size:16px;line-height:24px;border-radius:var(--md-shape-l)}
.btn-l .ic{width:24px;height:24px}
.btn-l:active{border-radius:var(--md-shape-m)} /* M3 Expressive shape morph on press */
.btn-block{width:100%}
.btn-filled{background:var(--md-primary);color:var(--md-on-primary)}
.btn-buy{background:var(--md-buy);color:var(--md-on-buy)}
.btn-tonal{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.btn-outlined{border:1px solid var(--md-outline);color:var(--md-primary)}
.btn-text{color:var(--md-primary);padding:0 12px}
.btn[disabled]{opacity:.38;pointer-events:none}
.btn-wa{background:#1FA855;color:#fff}
.iconbtn{width:48px;height:48px;border-radius:var(--md-shape-full);display:grid;place-items:center;color:var(--md-on-surface-variant)}

/* circular progress (indeterminate) */
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:gtsSpin .8s linear infinite}
@keyframes gtsSpin{to{transform:rotate(360deg)}}

/* ---- chips ---- */
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 8px;border-radius:var(--md-shape-s);border:1px solid var(--md-outline-variant);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.5px;color:var(--md-on-surface-variant);white-space:nowrap}
.chip .ic{width:18px;height:18px;color:var(--md-primary)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ================= STAGE & FEED ================= */
.gts-stage{position:relative;height:100%;max-width:480px;margin:0 auto;overflow:hidden;background:var(--md-surface)}
.gts-demo{position:absolute;top:0;left:0;right:0;z-index:30;background:#FFDEA6;color:#271900;text-align:center;padding:4px 16px;padding-top:calc(4px + env(safe-area-inset-top,0px))}
.gts-has-demo .gts-top{top:24px}

.gts-top{position:absolute;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(rgba(0,0,0,.6),transparent)}
.gts-topbar{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;height:56px;padding:0 4px}
.gts-tabs{display:flex;justify-content:center;gap:4px;height:48px}
.gts-tab{position:relative;padding:0 16px;color:var(--md-on-surface-variant)}
.gts-tab[aria-selected="true"]{color:var(--md-on-surface)}
.gts-tab[aria-selected="true"]::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--md-primary)}
.gts-topmeta{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 16px 0}
.gts-promo{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 8px;border-radius:var(--md-shape-s);background:var(--md-buy-container);color:var(--md-on-buy-container)}
.gts-promo .ic{width:18px;height:18px}
.gts-toast{display:flex;align-items:center;gap:10px;max-width:100%;min-height:40px;padding:6px 14px 6px 6px;border-radius:var(--md-shape-full);background:rgba(40,43,40,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:gtsIn var(--md-dur-l) var(--md-ease-emph-dec)}
.gts-toast i{width:28px;height:28px;border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container);font-style:normal;display:grid;place-items:center;flex:none}
@keyframes gtsIn{from{opacity:0;transform:translateY(-8px) scale(.96)}}

.gts-feed{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.gts-feed::-webkit-scrollbar{display:none}
.gts-slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:var(--md-surface-container-low)}
.gts-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gts-media-contain{object-fit:contain;background:#000}
.gts-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 42%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.88))}
.gts-poster{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:96px 72px 240px 32px}
.gts-poster-inner{display:grid;gap:12px;justify-items:center}
.gts-poster .play{width:72px;height:72px;border-radius:var(--md-shape-xl);display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.gts-poster .play .ic{width:40px;height:40px}
.gts-sound{position:absolute;left:12px;top:calc(160px + env(safe-area-inset-top,0px));z-index:5;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 8px;border-radius:var(--md-shape-s);background:rgba(29,32,29,.72);backdrop-filter:blur(8px)}
.gts-sound .ic{width:18px;height:18px}
.gts-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.14);z-index:6}
.gts-progress i{display:block;height:100%;width:0;background:var(--md-primary);border-radius:0 2px 2px 0}

/* caption block */
.gts-cap{position:absolute;left:0;right:72px;bottom:0;z-index:4;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:8px}
.gts-handle{display:flex;align-items:center;gap:4px}
.gts-handle .ic{width:18px;height:18px;color:#5BC0F8}
.gts-text{color:var(--md-on-surface-variant);max-width:36ch}

/* product card (M3 filled card on scrim) */
.gts-pcard{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:8px 8px 8px 8px;border-radius:var(--md-shape-l);background:rgba(40,43,40,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);max-width:340px;text-align:left;margin-top:4px}
.gts-pcard img{width:48px;height:48px;border-radius:var(--md-shape-s);object-fit:cover;background:#fff}
.gts-pcard-txt{display:grid;min-width:0}
.gts-pcard-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gts-pcard .price{color:var(--md-primary)}
.gts-pcard .btn{height:40px;padding:0 18px}

/* right rail: M3 icon buttons + FAB */
.gts-rail{position:absolute;right:4px;bottom:calc(152px + env(safe-area-inset-bottom,0px));z-index:5;display:grid;justify-items:center;gap:4px;width:64px}
.gts-railbtn{display:grid;justify-items:center;gap:0;width:64px;padding:4px 0}
.gts-railbtn .ico{width:48px;height:48px;border-radius:var(--md-shape-full);display:grid;place-items:center}
.gts-railbtn .ic{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.gts-railbtn span.t-label-s{text-shadow:0 1px 2px rgba(0,0,0,.6)}
.gts-railbtn.is-liked .ic{color:#FF5C7A;animation:gtsPop var(--md-dur-m) var(--md-ease-emph-dec)}
@keyframes gtsPop{40%{transform:scale(1.25)}}
.gts-avatar{position:relative;width:48px;height:48px;border-radius:var(--md-shape-full);border:2px solid var(--md-on-surface);background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center;font-size:20px;font-weight:700;margin-bottom:12px}
.gts-avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.gts-avatar::after{content:"+";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:var(--md-buy);color:#fff;font:700 15px/20px var(--md-font);text-align:center}
.gts-fab{width:56px;height:56px;border-radius:var(--md-shape-l);background:var(--md-buy);color:var(--md-on-buy);display:grid;place-items:center;box-shadow:var(--md-elev-3);transition:border-radius var(--md-dur-m) var(--md-ease-emph);animation:gtsPulse 2.4s var(--md-ease-std) infinite}
.gts-fab .ic{width:26px;height:26px;filter:none}
.gts-fab:active{border-radius:var(--md-shape-xl)}
@keyframes gtsPulse{0%,70%,100%{box-shadow:var(--md-elev-3),0 0 0 0 rgba(228,45,1,.55)}35%{box-shadow:var(--md-elev-3),0 0 0 12px rgba(228,45,1,0)}}

/* panel slides */
.gts-panel{position:absolute;inset:0;padding:calc(184px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px;overflow-y:auto;scrollbar-width:none}
.gts-panel::-webkit-scrollbar{display:none}
.gts-panel-pad{padding-right:80px}
.gts-eyebrow{color:var(--md-primary)}
.gts-info{background:radial-gradient(120% 70% at 15% 10%,#0E3A22 0%,var(--md-surface) 62%)}
.gts-points{list-style:none;padding:0;display:grid;gap:4px}
.gts-points li{display:flex;gap:16px;align-items:center;min-height:56px;padding:8px 16px;background:var(--md-surface-container);border-radius:var(--md-shape-s)}
.gts-points li:first-child{border-radius:var(--md-shape-l) var(--md-shape-l) var(--md-shape-s) var(--md-shape-s)}
.gts-points li:last-child{border-radius:var(--md-shape-s) var(--md-shape-s) var(--md-shape-l) var(--md-shape-l)}
.gts-points .ic{color:var(--md-primary)}
.gts-offer{background:radial-gradient(100% 55% at 85% 0%,#3B1206 0%,var(--md-surface) 60%)}
.gts-pk{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;min-height:80px;padding:12px 16px 12px 12px;text-align:left;border-radius:var(--md-shape-l);border:1px solid var(--md-outline-variant);background:var(--md-surface-container-low)}
.gts-pk img{width:56px;height:56px;border-radius:var(--md-shape-m);object-fit:cover;background:#fff}
.gts-pk-feat{background:var(--md-primary-container);border-color:transparent;color:var(--md-on-primary-container)}
.gts-pk-feat .muted{color:var(--md-on-primary-container);opacity:.8}
.gts-pk-price{text-align:right;display:grid}
.gts-pk-price s{color:var(--md-on-surface-variant)}
.gts-pk-feat .gts-pk-price s{color:var(--md-on-primary-container);opacity:.7}
.gts-badge{justify-self:start;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block!important;margin-bottom:4px;height:20px;padding:0 8px;border-radius:var(--md-shape-full);background:var(--md-buy);color:var(--md-on-buy);display:inline-flex;align-items:center;font-size:11px;line-height:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.gts-rv-strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
.gts-rv-strip::-webkit-scrollbar{display:none}
.gts-rv-strip img,.gts-rv-ph{flex:none;width:70%;max-width:290px;aspect-ratio:9/16;object-fit:cover;border-radius:var(--md-shape-xl);scroll-snap-align:center;background:var(--md-surface-container)}
.gts-rv-ph{display:grid;place-items:center;text-align:center;padding:24px;border:1px dashed var(--md-outline-variant);color:var(--md-on-surface-variant)}
.gts-faq-list{display:grid;gap:4px}
.gts-faq details{background:var(--md-surface-container);border-radius:var(--md-shape-s)}
.gts-faq details:first-child{border-top-left-radius:var(--md-shape-l);border-top-right-radius:var(--md-shape-l)}
.gts-faq details:last-child{border-bottom-left-radius:var(--md-shape-l);border-bottom-right-radius:var(--md-shape-l)}
.gts-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 16px;border-radius:inherit}
.gts-faq summary::-webkit-details-marker{display:none}
.gts-faq summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--md-on-surface-variant);border-bottom:2px solid var(--md-on-surface-variant);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--md-dur-m) var(--md-ease-emph);flex:none}
.gts-faq details[open] summary::after{transform:rotate(-135deg)}
.gts-faq details p{padding:0 16px 16px;color:var(--md-on-surface-variant)}
.gts-disc{color:var(--md-outline);margin-top:auto}
.gts-hint{position:absolute;left:50%;top:60%;transform:translateX(-50%);z-index:4;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px 0 10px;border-radius:var(--md-shape-full);background:rgba(29,32,29,.72);backdrop-filter:blur(8px);animation:gtsBob 1.8s var(--md-ease-std) infinite}
.gts-hint .ic{width:18px;height:18px}
@keyframes gtsBob{50%{transform:translate(-50%,-6px)}}

/* snackbar (md.comp.snackbar: inverse-surface, corner-xs, elevation 3) */
.gts-snack{position:absolute;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:70;min-height:48px;display:flex;align-items:center;padding:14px 16px;border-radius:var(--md-shape-xs);background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);box-shadow:var(--md-elev-3);animation:gtsUp var(--md-dur-m) var(--md-ease-emph-dec)}
@keyframes gtsUp{from{opacity:0;transform:translateY(12px)}}

/* ================= BOTTOM SHEET (checkout) ================= */
.gts-scrim{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.32);opacity:0;transition:opacity var(--md-dur-m) linear;pointer-events:none}
.gts-scrim.is-on{opacity:1;pointer-events:auto}
.gts-sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;height:94%;display:flex;flex-direction:column;background:var(--md-surface-container-low);border-radius:var(--md-shape-xl) var(--md-shape-xl) 0 0;box-shadow:var(--md-elev-1);transform:translateY(105%);transition:transform 250ms var(--md-ease-emph-acc);will-change:transform}
.gts-sheet.is-open{transform:translateY(0);transition:transform var(--md-dur-l) var(--md-ease-emph-dec)}
.gts-sheet.is-drag{transition:none}
.gts-grab{flex:none;touch-action:none;cursor:grab;padding-bottom:4px}
.gts-handle-bar{width:32px;height:4px;border-radius:2px;background:var(--md-on-surface-variant);opacity:.4;margin:22px auto 12px}
.gts-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 24px}
.gts-steps{display:flex;gap:4px;padding:8px 24px 4px}
.gts-steps span{flex:1;display:grid;gap:6px;color:var(--md-on-surface-variant)}
.gts-steps span::before{content:"";height:4px;border-radius:2px;background:var(--md-surface-container-highest);transition:background var(--md-dur-m) var(--md-ease-std)}
.gts-steps span.on{color:var(--md-on-surface)}
.gts-steps span.on::before{background:var(--md-primary)}
.gts-sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 24px;display:grid;gap:24px;align-content:start}
.gts-sec{display:grid;gap:12px}
.gts-sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
.gts-sec-h .n{display:inline-flex;align-items:center;gap:10px}
.gts-sec-h .n i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;background:var(--md-surface-container-highest);color:var(--md-on-surface-variant);transition:background var(--md-dur-m),color var(--md-dur-m)}
.gts-sec-h .n i.done{background:var(--md-primary);color:var(--md-on-primary)}
.gts-sec-h .n i .ic{width:16px;height:16px}

/* selectable list rows (packages + payment): M3 list item w/ radio, grouped expressive list */
.gts-list{display:grid;gap:2px}
.gts-row{position:relative;display:grid;grid-template-columns:24px auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:72px;padding:12px 16px;cursor:pointer;background:var(--md-surface-container-highest);border-radius:var(--md-shape-xs);transition:background var(--md-dur-s) linear,border-radius var(--md-dur-m) var(--md-ease-emph)}
.gts-list .gts-row:first-child{border-radius:var(--md-shape-l) var(--md-shape-l) var(--md-shape-xs) var(--md-shape-xs)}
.gts-list .gts-row:last-child{border-radius:var(--md-shape-xs) var(--md-shape-xs) var(--md-shape-l) var(--md-shape-l)}
.gts-list .gts-row:only-child{border-radius:var(--md-shape-l)}
.gts-row.is-on{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:var(--md-shape-l)!important}
.gts-row input{position:absolute;opacity:0;pointer-events:none}
.gts-row img{width:48px;height:48px;border-radius:var(--md-shape-s);object-fit:cover;background:#fff}
.gts-row .noimg{width:0}
.gts-row .txt{display:grid;min-width:0}
.gts-row .end{text-align:right;display:grid;justify-items:end}
.gts-row s{color:var(--md-on-surface-variant)}
.gts-row .save{color:var(--md-buy)}
.gts-row .rb{width:20px;height:20px;border-radius:50%;border:2px solid var(--md-on-surface-variant);position:relative;justify-self:center}
.gts-row.is-on .rb{border-color:var(--md-primary)}
.gts-row.is-on .rb::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--md-primary);animation:gtsDot var(--md-dur-m) var(--md-ease-emph-dec)}
@keyframes gtsDot{from{transform:scale(0)}}

.gts-row input:focus-visible ~ .rb{outline:3px solid var(--md-focus);outline-offset:4px}
.gts-tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--md-shape-s);background:var(--md-primary-container);color:var(--md-on-primary-container);font-size:11px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.gts-tag.fee{background:var(--md-surface-container-high);color:var(--md-on-surface-variant)}

/* saved address card */
.gts-addr{display:grid;grid-template-columns:24px 1fr auto;gap:16px;align-items:start;padding:16px;border-radius:var(--md-shape-l);background:var(--md-surface-container-highest)}
.gts-addr .ic{color:var(--md-primary)}

/* outlined text field (md.comp.outlined-text-field: corner-xs, 1px outline, 2px focus) */
.gts-fields{display:grid;gap:16px}
.gts-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{position:relative;display:grid}
.fld input,.fld textarea,.fld select{width:100%;min-height:56px;padding:16px;border:1px solid var(--md-outline);border-radius:var(--md-shape-xs);background:transparent;color:var(--md-on-surface);font:400 16px/24px var(--md-font);letter-spacing:.5px;appearance:none;-webkit-appearance:none;outline:none;transition:border-color var(--md-dur-s)}
.fld textarea{min-height:88px;resize:vertical}
.fld select{padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--md-on-surface-variant) 50%),linear-gradient(135deg,var(--md-on-surface-variant) 50%,transparent 50%);background-position:calc(100% - 22px) 26px,calc(100% - 16px) 26px;background-size:6px 6px;background-repeat:no-repeat}
.fld label{position:absolute;left:12px;top:16px;padding:0 4px;color:var(--md-on-surface-variant);font:400 16px/24px var(--md-font);letter-spacing:.5px;background:var(--md-surface-container-low);pointer-events:none;transform-origin:left top;transition:transform var(--md-dur-s) var(--md-ease-std),color var(--md-dur-s)}
.fld input:focus,.fld textarea:focus,.fld select:focus{border:2px solid var(--md-primary);padding:15px}
.fld input:focus ~ label,.fld textarea:focus ~ label,.fld select:focus ~ label{color:var(--md-primary)}
.fld input:focus ~ label,.fld input:not(:placeholder-shown) ~ label,
.fld textarea:focus ~ label,.fld textarea:not(:placeholder-shown) ~ label,
.fld.is-float label{transform:translateY(-24px) scale(.75)}
.fld input::placeholder,.fld textarea::placeholder{color:transparent}
.fld input:focus::placeholder,.fld textarea:focus::placeholder{color:var(--md-on-surface-variant)}
.fld .pre{position:absolute;left:16px;top:16px;font:400 16px/24px var(--md-font);color:var(--md-on-surface-variant);opacity:0;transition:opacity var(--md-dur-s)}
.fld.has-pre input{padding-left:56px}
.fld.has-pre input:focus{padding-left:55px}
.fld.has-pre input:focus ~ .pre,.fld.has-pre input:not(:placeholder-shown) ~ .pre{opacity:1}
.fld .sup{padding:4px 16px 0;font-size:12px;line-height:16px;letter-spacing:.4px;color:var(--md-on-surface-variant)}
.fld.is-err input,.fld.is-err textarea,.fld.is-err select{border:2px solid var(--md-error);padding:15px}
.fld.is-err.has-pre input{padding-left:55px}
.fld.is-err label,.fld.is-err .sup{color:var(--md-error)}
.fld.is-ok input,.fld.is-ok textarea{border-color:var(--md-primary)}

/* summary card */
.gts-sum{display:grid;gap:8px;padding:16px;border-radius:var(--md-shape-l);background:var(--md-surface-container-highest);font-variant-numeric:tabular-nums}
.gts-sum div{display:flex;justify-content:space-between;gap:12px}
.gts-sum .disc{color:var(--md-buy)}
.gts-sum .tot{border-top:1px solid var(--md-outline-variant);padding-top:12px;margin-top:4px}
.gts-guar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gts-guar div{display:grid;justify-items:center;gap:6px;text-align:center;padding:12px 6px;border-radius:var(--md-shape-m);background:var(--md-surface-container)}
.gts-guar .ic{color:var(--md-primary)}
.gts-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gts-formerr{padding:12px 16px;border-radius:var(--md-shape-m);background:var(--md-error-container);color:var(--md-on-error-container)}

/* bottom action bar */
.gts-sheet-foot{flex:none;display:flex;align-items:center;gap:16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)) 24px;background:var(--md-surface-container);box-shadow:0 -1px 0 var(--md-outline-variant)}
.gts-sheet-foot .t{display:grid}
.gts-sheet-foot .t b{color:var(--md-on-surface)}
.gts-sheet-foot .btn{flex:1}

/* done state */
.gts-done{display:grid;gap:16px;justify-items:center;text-align:center;padding:24px 8px}
.gts-done-ic{width:88px;height:88px;border-radius:var(--md-shape-xl);background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center;animation:gtsMorph 700ms var(--md-ease-emph-dec)}
.gts-done-ic .ic{width:48px;height:48px}
@keyframes gtsMorph{from{border-radius:50%;transform:scale(.6)}}
.gts-done p{max-width:32ch}

/* ================= TRACKING ================= */
.gts-track{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--md-surface);animation:gtsSlide var(--md-dur-l) var(--md-ease-emph-dec)}
@keyframes gtsSlide{from{transform:translateX(24px);opacity:0}}
.gts-appbar{display:flex;align-items:center;gap:4px;height:64px;padding:env(safe-area-inset-top,0px) 4px 0;box-sizing:content-box;background:var(--md-surface)}
.gts-track-body{flex:1;overflow-y:auto;padding:8px 16px 24px;display:grid;gap:16px;align-content:start}
.gts-card{display:grid;gap:16px;padding:16px;border-radius:var(--md-shape-l);background:var(--md-surface-container-low);box-shadow:var(--md-elev-1)}
.gts-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.gts-status{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--md-shape-s);background:var(--md-primary-container);color:var(--md-on-primary-container);font-size:12px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.gts-status.warn{background:#FFDEA6;color:#271900}
.gts-status.bad{background:var(--md-error-container);color:var(--md-on-error-container)}
.gts-track-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.gts-track-steps li{display:grid;gap:8px;text-align:center;color:var(--md-on-surface-variant)}
.gts-track-steps li::before{content:"";height:4px;border-radius:2px;background:var(--md-surface-container-highest)}
.gts-track-steps li.on{color:var(--md-on-surface)}
.gts-track-steps li.on::before{background:var(--md-primary)}
.gts-trk{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:12px 8px 12px 16px;border-radius:var(--md-shape-m);background:var(--md-surface-container-highest)}
.gts-trk b{font-family:ui-monospace,"Roboto Mono",SFMono-Regular,Menlo,monospace;font-size:16px;letter-spacing:.06em;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  .gts-shell *{animation:none!important;transition-duration:1ms!important}
}

.gts-card .fld label{background:var(--md-surface-container)}
.gts-pk .pk-txt{display:grid;min-width:0}
.gts-badge{line-height:20px}
.gts-row .txt,.gts-pk .pk-txt{grid-template-columns:minmax(0,1fr)}

/* ---- carousel slide (TikTok photo mode) ---- */
.gts-cr{position:absolute;inset:0;background:#000}
.gts-cr-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.gts-cr-track::-webkit-scrollbar{display:none}
.gts-cr-track>*{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
.gts-cr-track>img{align-self:flex-start;height:auto;aspect-ratio:9/16;margin-top:calc(68px + env(safe-area-inset-top,0px));object-fit:cover;object-position:top;background:#000}
.gts-cr-ph{display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;color:var(--md-on-surface-variant);background:repeating-linear-gradient(135deg,var(--md-surface-container-low) 0 16px,var(--md-surface-container) 16px 32px)}
.gts-cr-ph .ic{width:40px;height:40px;color:var(--md-primary)}
.gts-cr-count{position:absolute;right:12px;top:calc(80px + env(safe-area-inset-top,0px));z-index:5;height:24px;padding:0 10px;border-radius:var(--md-shape-full);background:rgba(29,32,29,.72);display:inline-flex;align-items:center}
.gts-cr-dots{position:absolute;left:0;right:0;top:calc(55px + env(safe-area-inset-top,0px));z-index:5;display:flex;justify-content:center;gap:6px;pointer-events:none}
.gts-cr-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.45);transition:width var(--md-dur-m) var(--md-ease-emph),background var(--md-dur-m)}
.gts-cr-dots i.on{width:18px;background:var(--md-primary)}
.gts-cr-hint{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);z-index:5;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--md-shape-full);background:rgba(29,32,29,.8);backdrop-filter:blur(8px);pointer-events:none;animation:gtsNudge 1.8s var(--md-ease-std) infinite}
.ic.rot{transform:rotate(-90deg);width:18px;height:18px}
@keyframes gtsNudge{50%{transform:translate(calc(-50% - 8px),-50%)}}
.gts-shade-soft{background:linear-gradient(transparent 52%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.94) 82%)}

/* ---- how-to slide ---- */
.gts-howto{background:radial-gradient(110% 60% at 90% 0%,#123D2A 0%,var(--md-surface) 60%)}
.gts-howto-media{border-radius:var(--md-shape-xl);overflow:hidden;background:var(--md-surface-container);max-height:34vh;aspect-ratio:4/5;align-self:flex-start;width:min(100%,260px)}
.gts-howto-media video,.gts-howto-media img{width:100%;height:100%;object-fit:cover}
.gts-howto-list{list-style:none;padding:0;display:grid;gap:12px}
.gts-howto-list li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:center}
.gts-howto-list b{width:40px;height:40px;border-radius:var(--md-shape-m);display:grid;place-items:center;background:var(--md-primary-container);color:var(--md-on-primary-container)}

/* ---- click-to-play video (cover first) ---- */
.gts-vid{position:absolute;inset:0;background:#000;overflow:hidden}
.gts-vid-bg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(28px) brightness(.55);transform:scale(1.1)}
.gts-vid-cover{position:absolute;left:0;right:0;top:calc(96px + env(safe-area-inset-top,0px));margin:0 auto;width:100%;max-height:calc(100% - 96px - 150px);object-fit:contain}
.gts-vid-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 24px 0 16px;border-radius:var(--md-shape-full);background:rgba(17,20,17,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;box-shadow:var(--md-elev-3)}
.gts-vid-play .ic{width:32px;height:32px}
.gts-vid-player{position:absolute;left:0;right:0;top:calc(104px + env(safe-area-inset-top,0px));bottom:calc(190px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;z-index:4}
.gts-vid-player iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#000}
.gts-vid-player.is-tall iframe{width:auto;height:100%;aspect-ratio:9/16;border-radius:var(--md-shape-l)}
.gts-vid-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000;border-radius:var(--md-shape-l)}
.gts-slide:has(.gts-vid.is-playing) .gts-hint{display:none}
.gts-vid.is-playing .gts-vid-play,.gts-vid.is-playing .gts-vid-cover{display:none}

/* ---- product banner (TikTok Shop style) ---- */
.gts-pc2{position:relative;width:calc(100% + 56px);max-width:420px;margin-top:6px;border-radius:20px;background:rgba(40,43,40,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--md-elev-2);transition:opacity .25s,transform .25s}
.gts-pc2.is-gone{opacity:0;transform:translateY(8px)}
.gts-pc2-main{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;width:100%;padding:10px;text-align:left;border-radius:inherit}
.gts-pc2-img{position:relative;width:96px;height:96px;border-radius:14px;overflow:hidden;background:var(--md-surface-container-highest)}
.gts-pc2-img img{width:100%;height:100%;object-fit:cover}
.gts-pc2-hot{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 8px 0 4px;border-radius:14px 0 12px 0;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:800;font-style:italic}
.gts-pc2-hot .ic{width:14px;height:14px;color:#FF6A3D}
.gts-pc2-body{display:grid;grid-template-rows:auto auto 1fr;gap:4px;min-width:0}
.gts-pc2-title{padding-right:30px;font-size:15px;line-height:20px;font-weight:700;color:var(--md-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gts-pc2-meta{display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;min-width:0;white-space:nowrap;overflow:hidden}
.gts-pc2-meta .ok{display:inline-flex;align-items:center;gap:4px;color:var(--md-primary)}
.gts-pc2-meta .ok .ic{width:16px;height:16px}
.gts-pc2-meta i{font-style:normal;color:var(--md-on-surface-variant)}
.gts-pc2-meta .hot{color:#FFB4A4;overflow:hidden;text-overflow:ellipsis}
.gts-pc2-row{display:flex;align-items:flex-end;gap:8px}
.gts-pc2-price{font-size:22px;line-height:26px;font-weight:800;color:var(--md-on-surface);letter-spacing:-.2px}
.gts-pc2-sold{font-size:12px;line-height:18px;color:var(--md-on-surface-variant);margin-bottom:2px}
.gts-pc2-buy{margin-left:auto;display:inline-grid;place-items:center;height:38px;padding:0 22px;border-radius:12px;background:var(--md-buy);color:var(--md-on-buy);font-size:16px;font-weight:700}
.gts-pc2-x{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:var(--md-on-surface-variant)}
.gts-pc2-x .ic{width:16px;height:16px}

/* ---- voucher slide ---- */
.gts-vc{background:radial-gradient(100% 55% at 15% 0%,#3B1206 0%,var(--md-surface) 62%)}
.gts-vc-list{display:grid;gap:10px}
.gts-vc-item{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:76px;padding-right:12px;border-radius:14px;background:var(--md-surface-container);overflow:hidden;transition:background var(--md-dur-m)}
.gts-vc-l{align-self:stretch;display:grid;place-content:center;justify-items:center;gap:2px;background:var(--md-buy);color:#fff;border-right:2px dashed rgba(0,0,0,.35)}
.gts-vc-l .ic{width:24px;height:24px}
.gts-vc-l b{font-size:11px;letter-spacing:.8px}
.gts-vc-r{display:grid;gap:2px;min-width:0;padding:10px 0}
.gts-vc-btn{height:34px;padding:0 16px;border-radius:var(--md-shape-full);background:var(--md-buy);color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.gts-vc-btn .ic{width:16px;height:16px}
.gts-vc-item.is-on{background:var(--md-primary-container)}
.gts-vc-item.is-on .gts-vc-l{background:var(--md-primary);color:var(--md-on-primary)}
.gts-vc-item.is-on .gts-vc-btn{background:transparent;color:var(--md-on-primary-container);pointer-events:none}
.gts-vc-item.is-on .muted{color:var(--md-on-primary-container);opacity:.8}
.ic.ic-s{display:inline-block;width:16px;height:16px;vertical-align:-3px}