/* ================= v5: deal-led hero, offer rail, tighter cards ================= */

/* HERO: dark and high contrast. The product sits on a white card, because the
   studio shots have white backgrounds and multiply cannot work on a dark field. */
.hero{background:
    radial-gradient(120% 90% at 12% 0%, rgba(29,78,216,.30), transparent 58%),
    radial-gradient(90% 70% at 92% 8%, rgba(217,165,33,.16), transparent 60%),
    linear-gradient(165deg,#101C33,#0A1120 62%);
  color:#fff;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:70px;
  background:linear-gradient(180deg,transparent,var(--paper));pointer-events:none}
.hero__in{grid-template-columns:1fr 1fr;align-items:center;padding-block:clamp(26px,4vw,64px)}
.hero h1{font-size:clamp(2rem,4.6vw,3.5rem);color:#fff;margin:14px 0 10px}
.hero__c>p{color:rgba(255,255,255,.72);font-size:.98rem;max-width:38ch}
.hero__t{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;padding-top:0;border-top:0}
.hero__t li{display:flex;align-items:center;gap:7px;font-size:.79rem;font-weight:600;color:rgba(255,255,255,.8)}
.hero__t svg{width:15px;height:15px;color:#7FA5FF;flex:none}
.hero__b{margin-top:22px}
.btn--g{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.btn--g:hover{background:#fff;color:var(--ink);border-color:#fff}

/* deal carousel */
.deal{position:relative}
.deal__pg{display:flex;gap:4px;margin-bottom:10px}
.dpg{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;padding:0}
.dpg i{display:block;height:100%;width:0;background:#fff;border-radius:99px}
.dpg.done i{width:100%}
@keyframes dfill{from{width:0}to{width:100%}}
.deal__vp{overflow:hidden;border-radius:var(--rl)}
.deal__tr{display:flex;transition:transform .5s var(--eo)}
.dsl{flex:0 0 100%;background:#fff;color:var(--ink);cursor:pointer;display:flex;flex-direction:column}
.dsl__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 0}
.dsl__bg{background:var(--ink);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 11px;border-radius:99px}
.dsl__st{display:flex;align-items:center;gap:5px;background:var(--hot-t);color:var(--hot);
  font-size:.7rem;font-weight:800;padding:5px 10px;border-radius:99px}
.dsl__st::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--hot);animation:bl 1.6s infinite}
.dsl__im{height:190px;display:grid;place-items:center;padding:6px 16px}
.dsl__im img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.dsl__b{padding:0 18px 18px;display:flex;flex-direction:column}
.dsl__br{height:13px;width:auto;opacity:.45;margin-bottom:7px}
.dsl__br[alt=Samsung]{height:9px}
.dsl h3{font-size:1.32rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.dsl__m{font-size:.79rem;color:var(--ink2);margin-top:3px}
.dsl__sv{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:13px 0;padding:12px 14px;
  border-radius:12px;background:linear-gradient(100deg,var(--ok-t),#F2FBF7);border:1px solid #BFE6D4}
.dsl__sv span{font-size:.65rem;font-weight:800;letter-spacing:.1em;color:var(--ok)}
.dsl__sv b{font-size:1.75rem;font-weight:800;letter-spacing:-.045em;color:var(--ok);line-height:1}
.dsl__sv i{font-style:normal;font-size:.72rem;color:var(--ink2);width:100%}
.dsl__pr{margin-bottom:14px}
.dsl__from{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.dsl__from span{font-size:.82rem;color:var(--ink2);font-weight:600}
.dsl__from b{font-size:1.6rem;font-weight:800;letter-spacing:-.04em}
.dsl__from em{font-style:normal;font-size:.76rem;color:var(--ink2)}
.dsl__from .tby{height:17px;margin-left:1px}
.dsl__full{font-size:.79rem;color:var(--ink3);margin-top:3px}
.deal__nv{position:absolute;top:calc(50% + 6px);transform:translateY(-50%);z-index:3;width:38px;height:38px;
  border-radius:99px;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;
  box-shadow:var(--sh);opacity:0;transition:.2s var(--e)}
.deal__nv svg{width:19px;height:19px}
.deal:hover .deal__nv{opacity:1}
.deal__nv--p{left:-14px}
.deal__nv--n{right:-14px}

/* auto scrolling offer rail, so nothing is missed without swiping */
.orail{background:var(--paper);padding-block:20px 4px;overflow:hidden}
.orail__h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.orail__h b{font-size:.95rem;font-weight:800;letter-spacing:-.02em}
.orail__h span{font-size:.76rem;color:var(--ink3)}
.orail__vp{overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.orail__t{display:flex;gap:10px;width:max-content;animation:oslide 52s linear infinite;padding-inline:10px}
.orail__vp:hover .orail__t,.orail__t:active{animation-play-state:paused}
@keyframes oslide{to{transform:translateX(-50%)}}
.ochip{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:9px 15px 9px 9px;background:#fff;
  border:1px solid var(--line);border-radius:99px;text-align:left;transition:.2s var(--e)}
.ochip:hover{border-color:var(--blue);box-shadow:var(--sh)}
.ochip__im{width:38px;height:44px;flex:none;display:grid;place-items:center}
.ochip__im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ochip b{display:block;font-size:.82rem;font-weight:700;line-height:1.2;white-space:nowrap}
.ochip__f{display:block;font-size:.78rem;font-weight:800;white-space:nowrap}
.ochip__f em{font-style:normal;font-weight:600;color:var(--ink3);font-size:.72rem}
.ochip__s{display:inline-block;margin-top:2px;font-size:.68rem;font-weight:800;color:var(--ok);
  background:var(--ok-t);padding:2px 7px;border-radius:99px;white-space:nowrap}

/* decluttered product card */
.cd__sw{display:flex;align-items:center;gap:9px;margin-top:9px;min-height:26px}
.cd__sw .sw{margin-top:0;flex:none}
.cd__c{margin-top:0;font-size:.72rem;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd__p{margin-top:auto;padding-top:10px;align-items:baseline}
.cd__sv{display:block;margin-top:5px;font-size:.76rem;font-weight:800;color:var(--ok);background:none;padding:0;border-radius:0}
.cd__sv em{font-style:normal;font-weight:600;color:var(--ink3)}
.cd__i{margin-top:6px;font-size:.75rem;color:var(--ink2)}
.tby__l b{font-weight:800;color:var(--ink)}
.cd__x{margin-top:11px}

/* in grid gift tile, a capture surface that is always on screen */
.gtile{background:linear-gradient(160deg,#12203A,#0A1120);border-color:#1E2C46;color:#fff}
.gtile:hover{transform:translateY(-4px)}
.gtile__in{padding:20px 18px;display:flex;flex-direction:column;height:100%;justify-content:center;
  text-align:center;align-items:center}
.gtile__i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:12px;
  background:linear-gradient(160deg,#F0C24B,#C4890E);color:#3A2A02}
.gtile__i svg{width:24px;height:24px;stroke-width:2}
.gtile__tag{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F0C24B}
.gtile h3{font-size:1.05rem;font-weight:800;letter-spacing:-.025em;margin:6px 0 5px;line-height:1.2}
.gtile p{font-size:.78rem;color:rgba(255,255,255,.66);margin-bottom:14px}
.gtile .btn{background:linear-gradient(100deg,#E0AE28,#C4890E);color:#2E2202;border:0}
.gtile--done .gtile__i{background:var(--ok);color:#fff}

/* pdp tabby explainer */
.pdp__tby{margin-top:10px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf)}
.pdp__tby-r{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pdp__tby-r span{font-size:.82rem;color:var(--ink2);font-weight:600}
.pdp__tby-r b{font-size:1.28rem;font-weight:800;letter-spacing:-.035em}
.pdp__tby-r em{font-style:normal;font-size:.76rem;color:var(--ink2)}
.pdp__tby-r .tby{height:17px}
.pdp__tby-q{margin-top:7px;font-size:.78rem;font-weight:700;color:var(--blue);text-decoration:underline;padding-block:4px}
.pdp__tby-x{display:none;margin-top:9px;font-size:.79rem;color:var(--ink2);line-height:1.55}
.pdp__tby.open .pdp__tby-x{display:block}

/* floating WhatsApp, always reachable. Cart bar appears only when it has to. */
.wafab{position:fixed;right:16px;bottom:16px;z-index:69;width:54px;height:54px;border-radius:99px;
  background:#0D6E36;color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 28px -10px rgba(13,110,54,.7);transition:.22s var(--e)}
.wafab svg{width:26px;height:26px}
.wafab:hover{transform:translateY(-3px)}
body.has-bar .wafab{bottom:80px}
.sbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;
  display:flex;align-items:center;gap:11px;height:56px;padding:0 10px 0 12px;border-radius:99px;
  background:var(--blue);color:#fff;box-shadow:0 16px 34px -12px rgba(29,78,216,.7);
  animation:sbup .34s var(--eo);text-align:left}
.sbar[hidden]{display:none}
@keyframes sbup{from{transform:translateY(120%);opacity:0}}
.sbar__ic{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center}
.sbar__ic svg{width:21px;height:21px}
.sbar__ic b{position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:#fff;color:var(--blue);font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}
.sbar__l{flex:1;min-width:0;font-size:.92rem;font-weight:800;line-height:1.15}
.sbar__l em{display:block;font-style:normal;font-size:.72rem;font-weight:600;opacity:.85}
.sbar__p{font-weight:800;font-size:1rem;white-space:nowrap}
.sbar__a{width:20px;height:20px;flex:none;opacity:.8}

@media(max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:24px}
  .hero__m{order:2;max-width:none;margin:0}
  .hero__c{order:1}
  .deal__nv{display:none}
}
@media(max-width:760px){
  body{padding-bottom:0}
  .hero__in{padding-block:20px 26px}
  .hero h1{font-size:1.95rem;margin:10px 0 8px}
  .hero__c>p{font-size:.92rem}
  .hero__b{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .hero__b .btn{width:100%;padding-inline:10px;font-size:.85rem}
  .dsl__im{height:170px}
  .dsl h3{font-size:1.2rem}
  .dsl__sv b{font-size:1.55rem}
  .dsl__from b{font-size:1.42rem}
  .gtile__in{padding:22px 14px}
}
@media(max-width:440px){
  .cd__sw{gap:6px}
  .cd__c{display:none}
}
@media(prefers-reduced-motion:reduce){
  .orail__t,.dpg i{animation:none!important}
  .dpg i{width:100%}
}