/* Cart, checkout, account, tracking, auth, confirmation */
.narrow{max-width:820px}
/* Cart */
.cart-layout{display:grid;gap:20px;margin-top:12px}
.cart-lines{display:flex;flex-direction:column;gap:10px}
.cart-line{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:12px;border-radius:var(--sh-radius);background:#fff;border:1px solid var(--sh-line)}
.skel-line-wrap{display:block;padding:0;border:0;background:none}
.cart-line .thumb{width:88px;height:88px;border-radius:12px;overflow:hidden;background:var(--sh-surface-2)}
.cart-line .thumb img{width:100%;height:100%;object-fit:cover}
.cl-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cl-title{font-weight:600;font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cl-title:hover{color:var(--sh-primary)}
.cl-variant,.cl-seller{font-size:13px;color:var(--sh-ink-2)}
.cl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.cl-price{font-weight:700;font-size:16px}
.cl-actions{display:flex;flex-wrap:wrap;gap:4px 12px}
.cl-actions button{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--sh-ink-2);min-height:36px}
.cl-actions button:hover{color:var(--sh-primary)}
.cl-actions .rm:hover{color:var(--sh-danger)}
.cl-notice{font-size:12.5px;padding:4px 8px;border-radius:6px;background:#FFF4E0;color:#7A4A00;width:fit-content}
.cl-notice.down{background:var(--sh-primary-soft);color:var(--sh-primary)}
.cl-notice.err{background:var(--sh-rose-soft);color:var(--sh-rose)}
.cart-saved{margin-top:28px}
.cart-saved .h3{margin-bottom:12px}
.coupon{display:flex;gap:8px;margin-top:12px}
.coupon .input{min-height:42px;font-size:15px;text-transform:uppercase}
.totals{display:flex;flex-direction:column;gap:8px;margin:14px 0;padding-block:12px;border-block:1px solid var(--sh-line)}
.totals div{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.totals dt{color:var(--sh-ink-2)}
.totals dd{margin:0;font-weight:600}
.totals .grand{font-size:18px;padding-top:8px;border-top:1px dashed var(--sh-line-2)}
.totals .grand dt{color:var(--sh-ink);font-weight:700}
.totals .grand dd{font-weight:700}
.totals .disc dd{color:var(--sh-success)}
.totals .alt{font-size:13px;color:var(--sh-ink-2);justify-content:flex-end}
.cart-summary .field{margin-bottom:6px}
.cart-summary .btn-lg{margin-top:12px}
.cart-assure{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:13px;color:var(--sh-ink-2)}
.cart-assure li{display:flex;gap:8px;align-items:center}
.cart-assure .ic{color:var(--sh-primary)}
@media (min-width:900px){.cart-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}.cart-summary{position:sticky;top:calc(var(--hdr-h) + 64px)}.cart-line{grid-template-columns:110px 1fr}.cart-line .thumb{width:110px;height:110px}}
/* Mini cart */
.mc-line{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding-block:10px;border-bottom:1px solid var(--sh-line)}
.mc-line img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--sh-surface-2)}
.mc-line a{font-size:14px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-total{display:flex;justify-content:space-between;font-weight:700;font-size:16px}
/* Checkout */
.co-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:20px 12px}
.co-head .h1{display:flex;align-items:center;gap:10px;font-size:clamp(24px,3vw,32px)}
.co-steps{display:flex;gap:6px;font-size:13px;color:var(--sh-ink-2);flex-wrap:wrap}
.co-steps li{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--sh-radius-pill);background:var(--sh-surface-2)}
.co-steps li span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;font-weight:700;font-size:12px}
.co-steps li.done{background:var(--sh-primary-soft);color:var(--sh-primary)}
.co-steps li.done span{background:var(--sh-primary);color:#fff}
.co-layout{display:grid;gap:16px}
.co-main{display:flex;flex-direction:column;gap:14px}
.co-step .h4{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.co-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sh-primary);color:#fff;font-size:14px}
.co-signin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:var(--sh-bg);margin-bottom:12px}
.co-who{display:flex;gap:8px;align-items:center;font-weight:600}
.addr-saved{display:grid;gap:8px;margin-bottom:14px}
.addr-opt{display:flex;gap:12px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--sh-line-2);cursor:pointer;align-items:flex-start}
.addr-opt input{margin-top:4px;accent-color:var(--sh-primary);width:18px;height:18px}
.addr-opt:has(input:checked){border-color:var(--sh-primary);background:var(--sh-primary-soft)}
.addr-opt strong{display:block}
.addr-opt span{font-size:13.5px;color:var(--sh-ink-2)}
.addr-form{border:0;padding:0;margin:0}
.addr-form[disabled]{display:none}
.map-pick{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.map-box{width:100%;height:280px;border-radius:12px;overflow:hidden;border:1px solid var(--sh-line);margin-top:4px}
.co-delivery{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--sh-primary-soft);color:var(--sh-primary-hover)}
.pay-methods{display:grid;gap:8px}
.pay-card{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1.5px solid var(--sh-line-2);cursor:pointer;transition:border-color var(--fast),background var(--fast)}
.pay-card input{position:absolute;opacity:0}
.pay-card:has(input:checked){border-color:var(--sh-primary);background:var(--sh-primary-soft)}
.pay-card:has(input:focus-visible){outline:3px solid rgba(14,122,95,.4);outline-offset:2px}
.pay-card.disabled{opacity:.5;pointer-events:none}
.pay-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff;color:var(--sh-primary);border:1px solid var(--sh-line)}
.pay-txt{flex:1;display:flex;flex-direction:column}
.pay-check{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--sh-line-2);color:transparent}
.pay-card:has(input:checked) .pay-check{background:var(--sh-primary);border-color:var(--sh-primary);color:#fff}
.pay-instructions:empty{display:none}
.pay-instructions{white-space:pre-line}
.co-items{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.co-item{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;font-size:14px}
.co-item img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--sh-surface-2)}
.co-item .q{color:var(--sh-ink-2);font-size:13px}
@media (min-width:640px){.pay-methods{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.co-layout{grid-template-columns:minmax(0,1fr) 380px;align-items:start}.co-side{position:sticky;top:calc(var(--hdr-h) + 64px)}}
/* Confirmation */
.confirm{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px;padding:32px 20px}
.confirm-ic{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--sh-primary);color:#fff;box-shadow:0 0 0 10px var(--sh-primary-soft);animation:pop .5s cubic-bezier(.2,.8,.2,1.4)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.confirm-next{width:100%;text-align:start;margin-top:8px}
.confirm-steps{display:grid;gap:8px;width:100%;text-align:start;margin-block:8px}
.confirm-steps li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--sh-bg);font-size:14px}
.confirm-steps .ic{color:var(--sh-primary)}
.confirm-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.proof-form{max-width:440px}
/* Auth */
.auth-page{display:grid;gap:24px;padding-block:28px;max-width:980px}
.auth-card{max-width:460px;width:100%;margin-inline:auto;padding:28px 24px}
.auth-mark{margin-bottom:10px}
.auth-perks{display:grid;gap:12px;align-content:center}
.auth-perks li{display:flex;gap:12px;padding:14px;border-radius:var(--sh-radius);background:#fff;border:1px solid var(--sh-line);font-size:14px;color:var(--sh-ink-2)}
.auth-perks strong{display:block;color:var(--sh-ink)}
.auth-perks .ic{color:var(--sh-primary)}
@media (min-width:900px){.auth-page{grid-template-columns:460px 1fr;align-items:center;gap:48px}.auth-card{margin:0}}
/* Account */
.acct{display:grid;gap:20px;padding-bottom:24px}
.acct-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.acct-nav a,.acct-logout{flex:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border-radius:12px;font-size:14px;font-weight:500;color:var(--sh-ink-2);white-space:nowrap;background:#fff;border:1px solid var(--sh-line)}
.acct-nav a[aria-current]{background:var(--sh-primary-soft);border-color:transparent;color:var(--sh-primary);font-weight:700}
.acct-hello{display:none}
.count-inline{margin-inline-start:auto;min-width:22px;padding:1px 7px;border-radius:11px;background:var(--sh-rose);color:#fff;font-size:12px;font-weight:700;text-align:center}
.avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sh-primary-soft);color:var(--sh-primary);font-weight:700;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.acct-main{min-width:0}
.acct-main>.h2{margin-bottom:12px}
@media (min-width:900px){.acct{grid-template-columns:250px minmax(0,1fr);gap:36px}.acct-nav{flex-direction:column;overflow:visible;position:sticky;top:calc(var(--hdr-h) + 64px);align-self:start}.acct-nav a,.acct-logout{border:0;background:none}.acct-nav a:hover,.acct-logout:hover{background:#fff}.acct-hello:not([hidden]){display:flex;gap:10px;align-items:center;padding:6px 6px 14px;margin-bottom:6px;border-bottom:1px solid var(--sh-line)}.acct-hello strong{display:block}}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.stat{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:var(--sh-radius);background:#fff;border:1px solid var(--sh-line);transition:box-shadow var(--base)}
.stat:hover{box-shadow:var(--sh-shadow-2)}
.stat .ic{color:var(--sh-primary);margin-bottom:6px}
.stat strong{font-size:24px}
.stat span{font-size:13px;color:var(--sh-ink-2)}
@media (min-width:640px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.list{display:flex;flex-direction:column;gap:10px}
.order-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:14px 16px;border-radius:var(--sh-radius);background:#fff;border:1px solid var(--sh-line);transition:box-shadow var(--base)}
.order-row:hover{box-shadow:var(--sh-shadow-2)}
.order-row .imgs{display:flex;gap:4px;margin-top:8px}
.order-row .imgs img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--sh-surface-2)}
.order-row strong{font-size:15px}
.order-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--sh-ink-2)}
.tabs-inline{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
.tabs-inline button{flex:none;min-height:38px;padding:6px 14px;border-radius:var(--sh-radius-pill);background:#fff;border:1px solid var(--sh-line);font-size:13.5px;font-weight:600;color:var(--sh-ink-2)}
.tabs-inline button[aria-pressed=true]{background:var(--sh-ink);color:#fff;border-color:var(--sh-ink)}
.od-grid{display:grid;gap:14px}
@media (min-width:1000px){.od-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.od-items li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding-block:10px;border-bottom:1px solid var(--sh-line)}
.od-items li:last-child{border-bottom:0}
.od-items img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--sh-surface-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.saved-row{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:12px;border-radius:var(--sh-radius);background:#fff;border:1px solid var(--sh-line)}
.saved-row img{width:84px;height:84px;border-radius:12px;object-fit:cover;background:var(--sh-surface-2)}
.saved-row .t{font-weight:600;font-size:15px}
.chg{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;padding:2px 8px;border-radius:6px}
.chg.down{background:var(--sh-primary-soft);color:var(--sh-success)}
.chg.up{background:var(--sh-rose-soft);color:var(--sh-rose)}
.chg.flat{background:var(--sh-surface-2);color:var(--sh-ink-2)}
.watch-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.notif{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px;border-radius:var(--sh-radius);background:#fff;border:1px solid var(--sh-line)}
.notif.unread{border-color:var(--sh-primary);background:var(--sh-primary-soft)}
.notif .ni{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sh-primary-soft);color:var(--sh-primary)}
.notif time{font-size:12px;color:var(--sh-ink-2)}
.addr-card{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--sh-radius);background:#fff;border:1px solid var(--sh-line);font-size:14px}
.addr-card .btn-row{margin-top:8px}
.addr-grid{display:grid;gap:12px}
@media (min-width:700px){.addr-grid{grid-template-columns:1fr 1fr}}
.device{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--sh-radius);background:#fff;border:1px solid var(--sh-line)}
.device .ic{color:var(--sh-ink-2)}
.device div{flex:1}
.danger-zone{border-color:#F5C2C2}
.danger-zone .h4{color:var(--sh-danger)}
.btn-danger{background:var(--sh-danger);color:#fff}
.btn-danger:hover{background:#A51F1F}
/* Tracking */
.track-form-wrap{display:grid;gap:24px;padding-block:12px 32px}
.track-intro .form{max-width:480px}
.track-perks{display:grid;gap:12px;align-content:center}
.track-perks li{display:flex;gap:12px;padding:16px;border-radius:var(--sh-radius);background:#fff;border:1px solid var(--sh-line);font-size:14px;color:var(--sh-ink-2)}
.track-perks strong{display:block;color:var(--sh-ink)}
.track-perks .ic{color:var(--sh-primary)}
@media (min-width:900px){.track-form-wrap{grid-template-columns:1fr 1fr;gap:48px}}
.track-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-block:8px 16px}
.track-eta{display:flex;flex-direction:column;padding:12px 18px}
.track-eta strong{font-size:20px;color:var(--sh-primary)}
.track-grid{display:grid;gap:16px}
.track-side{display:flex;flex-direction:column;gap:14px}
@media (min-width:900px){.track-grid{grid-template-columns:minmax(0,1fr) 420px;align-items:start}}
.timeline{position:relative;display:flex;flex-direction:column;gap:0}
.tl{position:relative;display:grid;grid-template-columns:32px 1fr;gap:12px;padding-bottom:22px}
.tl::before{content:"";position:absolute;inset-inline-start:15px;top:30px;bottom:-2px;width:2px;background:var(--sh-line)}
.tl:last-child::before{display:none}
.tl.done::before{background:var(--sh-primary)}
.tl-dot{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--sh-line-2);color:var(--sh-ink-3);z-index:1}
.tl.done .tl-dot{background:var(--sh-primary);border-color:var(--sh-primary);color:#fff}
.tl.current .tl-dot{background:#fff;border-color:var(--sh-primary);color:var(--sh-primary);box-shadow:0 0 0 6px var(--sh-primary-soft);animation:ring 2s ease infinite}
@keyframes ring{50%{box-shadow:0 0 0 10px rgba(14,122,95,.08)}}
.tl strong{display:block;padding-top:4px}
.tl time{font-size:13px;color:var(--sh-ink-2)}
.tl:not(.done):not(.current) strong{color:var(--sh-ink-2);font-weight:500}
.live-card{padding:0;overflow:hidden}
.live-head{display:flex;align-items:center;gap:8px;padding:12px 16px}
.live-head .fine{margin-inline-start:auto}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--sh-rose);box-shadow:0 0 0 0 rgba(192,38,75,.5);animation:live 1.6s ease infinite}
@keyframes live{70%{box-shadow:0 0 0 10px rgba(192,38,75,0)}100%{box-shadow:0 0 0 0 rgba(192,38,75,0)}}
.live-map{height:300px;background:var(--sh-surface-2)}
.live-meta{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;font-weight:600;font-size:14px}
.live-card [data-live-stale]{padding:0 16px 12px}
.courier-marker{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sh-primary);color:#fff;border:3px solid #fff;box-shadow:0 6px 16px rgba(14,122,95,.45);transition:transform .9s linear}
.dest-marker{display:grid;place-items:center;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--sh-rose);border:3px solid #fff;box-shadow:var(--sh-shadow-2)}
.code-card{text-align:center;background:var(--sh-accent-soft);border-color:#F0D9AE}
.delivery-code{font-size:40px;font-weight:700;letter-spacing:.3em;color:var(--sh-ink);margin-block:4px}
.courier{display:flex;align-items:center;gap:12px}
.courier div{flex:1}
.leaflet-container{font:inherit}

.pay-ic.has-logo,.pay-card[data-pay=sham_cash] .pay-ic{width:auto;min-width:64px;padding-inline:8px}
.pay-ic .pay-logo{height:26px;max-width:80px}
.pay-ic .pay-textchip{font-size:11px;line-height:1.2;white-space:normal;text-align:center}
.pay-mark{display:inline-flex;align-items:center;vertical-align:middle;margin-inline-end:6px}

/* Jasmine Rewards */
.rw-hero{display:grid;gap:18px;padding:22px;border-radius:var(--sh-radius-lg);color:#fff;background:radial-gradient(120% 140% at 100% 0,#14936f 0,#0E7A5F 45%,#0a5a46 100%);box-shadow:var(--sh-shadow-2);position:relative;overflow:hidden}
.rw-hero::after{content:"";position:absolute;inset:0;background:var(--damask);opacity:.5;filter:brightness(4);pointer-events:none}
.rw-hero.tier-silver{background:radial-gradient(120% 140% at 100% 0,#6f7d88 0,#4f5b66 50%,#36404a 100%)}
.rw-hero.tier-gold{background:radial-gradient(120% 140% at 100% 0,#d9a440 0,#b07d1e 50%,#7f5810 100%)}
.rw-hero>*{position:relative;z-index:1}
.rw-hero .fine{color:rgba(255,255,255,.85)}
.rw-bal{display:flex;align-items:center;gap:16px}
.rw-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.16);flex:0 0 64px}
.rw-num{font-size:44px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.rw-worth{font-size:14px;opacity:.92}
.rw-pill{background:rgba(255,255,255,.2);color:#fff}
.rw-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden;margin-block:10px 6px}
.rw-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FBF1DE,#C8912E);transition:width .8s cubic-bezier(.2,.8,.2,1)}
@media (min-width:900px){.rw-hero{grid-template-columns:1fr 1.1fr;align-items:center;padding:28px 32px}}
.rw-hist{display:flex;flex-direction:column;margin-top:8px}
.rw-row{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding-block:12px;border-bottom:1px solid var(--sh-line)}
.rw-row:last-child{border-bottom:0}
.rw-row time{display:block}
.rw-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-weight:700}
.rw-dot.pos{background:var(--sh-primary-soft);color:var(--sh-primary)}.rw-dot.neg{background:var(--sh-rose-soft);color:var(--sh-rose)}
.rw-pts{font-variant-numeric:tabular-nums}.rw-pts.pos{color:var(--sh-success)}.rw-pts.neg{color:var(--sh-rose)}
.rw-steps{display:grid;gap:12px;margin-block:12px}
.rw-steps li{display:flex;gap:12px;align-items:flex-start}
.rw-n{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--sh-accent-soft);color:#8A5A00;font-weight:700;font-size:14px}
@media (min-width:900px){.rw-steps{grid-template-columns:1fr 1fr}}
/* Invites */
.inv-hero{display:grid;gap:16px;align-items:center;padding:22px;border-radius:var(--sh-radius-lg);background:linear-gradient(135deg,var(--sh-accent-soft),#fff 70%);border:1px solid var(--sh-line)}
.inv-code{padding:14px 18px;border-radius:var(--sh-radius);background:#fff;border:2px dashed var(--sh-accent);text-align:center}
.inv-code-v{font-size:28px;font-weight:700;letter-spacing:.12em;color:var(--sh-ink)}
@media (min-width:900px){.inv-hero{grid-template-columns:1fr auto;padding:28px}}
.copy-row{display:flex;gap:8px;align-items:center;margin-top:6px}
.copy-row .input{flex:1;min-width:0}
.copy-row .btn{margin:0;flex:0 0 auto}
.share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.share-row .btn{margin:0;flex:0 0 auto}
.btn-wa{color:#128C7E}
.inv-stats{margin-top:14px}
.inv-stats .stat{cursor:default}
.share-list{margin-top:0;margin-bottom:14px}
.share-list-h{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.share-list-h h2{display:flex;align-items:center;gap:8px}
.share-list [data-sl-body]{margin-top:12px}
.danger-text{color:var(--sh-danger)}
.phone-verify{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.phone-verify .code-input{font-size:18px!important}
[data-phone-verify] .pill{margin-top:8px}
/* Checkout: points + COD OTP */
.co-points{margin-top:14px;padding:14px;border-radius:14px;border:1.5px solid var(--sh-line-2);background:linear-gradient(135deg,#fff,var(--sh-accent-soft))}
.co-points-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.co-points-h strong{display:flex;align-items:center;gap:8px}
.pts-ctrl{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center;margin-top:10px}
.pts-ctrl button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--sh-line-2);background:#fff;font-size:20px;font-weight:700}
.pts-ctrl button:disabled{opacity:.4}
.pts-ctrl input[type=range]{width:100%;accent-color:var(--sh-accent)}
.pts-out{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:14px}
.pts-out strong{color:var(--sh-rose)}
.totals .pts dd{color:var(--sh-rose)}
.cod-otp{margin-top:12px;padding:14px;border-radius:14px;background:var(--sh-accent-soft);border:1px solid color-mix(in srgb,var(--sh-accent) 30%,transparent)}
.cod-otp .copy-row{margin-top:10px}
/* Qty stepper on the cart page (product.css is not loaded there) */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--sh-line-2);border-radius:var(--sh-radius-pill);background:#fff;height:52px}
.qty button{display:grid;place-items:center;width:44px;height:100%;color:var(--sh-ink-2)}
.qty button:hover{color:var(--sh-primary)}
.qty input{width:40px;border:0;text-align:center;font-weight:700;font-size:16px;-moz-appearance:textfield;appearance:textfield;background:none}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-sm{height:40px}
.qty-sm button{width:36px}

/* Following (SPEC §21.5) */
.fl-group+.fl-group{margin-top:22px}
.fl-group .h4{margin-bottom:10px}
.fl-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.fl-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-radius)}
.fl-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:44px}
.fl-main:hover .fl-name{color:var(--sh-primary)}
.fl-logo{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;overflow:hidden;background:var(--sh-surface-2);border:1px solid var(--sh-line);font-weight:700;color:var(--sh-primary)}
.fl-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.fl-name{display:inline-flex;align-items:center;gap:6px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-name .ic{color:var(--sh-trusted);flex:none}
.fl-un{flex:none;min-height:44px}
.fl-mini{margin:4px 0 22px}
.fl-mini-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.fl-mini-head .linkish{min-height:44px}
.fl-chips{display:flex;flex-wrap:wrap;gap:8px}
.fl-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;border:1px solid var(--sh-line);font-size:14px;font-weight:600;transition:border-color var(--fast)}
.fl-chip:hover{border-color:var(--sh-primary)}
.fl-chip .fl-logo{width:30px;height:30px;border-radius:50%;font-size:13px}

/* ── Smart lifecycle marketing (SPEC §23.6): preferences, My offers, birthday badge, checkout gift banner, unsubscribe ── */
.lc-btn{min-height:44px}
.acct-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:28px;padding-top:10px;border-top:1px solid var(--sh-line);color:var(--sh-ink-2)}
.acct-foot .ic{color:var(--sh-ink-3)}
.acct-foot .linkish{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
/* preference centre */
.lc-sec-sub{margin-top:4px}
.lc-list{display:flex;flex-direction:column;margin-top:6px}
.lc-switch{display:flex;align-items:flex-start;gap:12px;width:100%;padding-block:10px}
.lc-switch .track{margin-top:2px}
.lc-sw-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.lc-list .lc-switch+.lc-switch{border-top:1px solid var(--sh-line)}
.lc-freq{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.lc-freq legend{padding:0;margin-bottom:8px}
.lc-radio{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:12px 14px;border:1.5px solid var(--sh-line);border-radius:12px;cursor:pointer;transition:border-color var(--fast),background var(--fast)}
.lc-radio:has(input:checked){border-color:var(--sh-primary);background:var(--sh-primary-soft)}
.lc-radio input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--sh-primary);flex:none}
.lc-radio>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lc-danger{color:var(--sh-danger)}
.lc-danger:hover:not(:disabled){background:var(--sh-rose-soft)}
.lc-state{margin-block:0 14px}
.lc-inline-btn{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.lc-service{margin-top:14px}
.lc-bday-card .h4{display:flex;align-items:center;gap:8px}
.lc-bday-card .h4 .ic{color:#8A5A00}
.lc-bday-card .form{margin-top:12px}
.lc-bday-cur{margin-top:10px}
.lc-lock{display:flex;align-items:flex-start;gap:6px;margin-top:10px}
.lc-lock .ic{margin-top:4px;flex:none}
/* My offers */
.lc-lead{margin-bottom:14px}
.lc-offers{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));align-items:stretch}
.lc-offer{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px;background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-radius);box-shadow:var(--sh-shadow-1)}
.lc-offer.is-bday{background:linear-gradient(180deg,var(--sh-accent-soft),#fff 70%)}
.lc-offer-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.lc-offer-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--sh-primary-soft);color:var(--sh-primary)}
.is-bday .lc-offer-ic{background:#fff;color:#8A5A00}
.lc-offer-kind{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--sh-ink-2)}
.lc-cd{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--sh-radius-pill);background:var(--sh-rose-soft);color:var(--sh-rose);font-size:12.5px;font-weight:600;white-space:nowrap}
.lc-offer-val{font-size:22px;font-weight:700;line-height:1.3}
.lc-offer-desc{margin-top:-4px}
.lc-offer-facts{display:flex;flex-wrap:wrap;gap:6px}
.lc-offer-facts li{padding:4px 10px;border-radius:var(--sh-radius-pill);background:var(--sh-surface-2);color:var(--sh-ink-2);font-size:13px;line-height:1.5;max-width:100%;overflow-wrap:anywhere}
.lc-code-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.lc-code{flex:1 1 100%;display:flex;align-items:center;justify-content:center;min-height:48px;border:1.5px dashed var(--sh-line-2);border-radius:12px;background:var(--sh-bg);font:700 18px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em}
.lc-code-row .lc-btn{flex:1 1 0;min-width:0}
.lc-cta{display:flex;align-items:center;gap:12px;margin-top:14px;font-weight:600}
.lc-cta .ic{color:#8A5A00;flex:none}
.lc-cta:hover{border-color:var(--sh-line-2)}
.lc-foot-note{display:flex;align-items:center;gap:6px;margin-top:10px}
.lc-foot-note .linkish{display:inline-flex;align-items:center;min-height:44px}
.lc-empty+.lc-cta{max-width:520px;margin-inline:auto}
/* birthday-week badge (account header) + checkout gift banner */
.lc-badge,.lc-sugg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:var(--sh-radius);background:var(--sh-accent-soft);border:1px solid #F0DDB5}
.lc-badge{margin-bottom:14px}
.lc-badge-ic,.lc-sugg-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#fff;color:#8A5A00}
.lc-badge-txt{display:flex;flex-direction:column;min-width:0}
.lc-badge>.lc-x,.lc-sugg>.lc-x{grid-column:3;grid-row:1}
.lc-badge>.lc-btn,.lc-sugg>.lc-btn{grid-column:2;grid-row:2;justify-self:start}
@media (min-width:640px){.lc-badge{grid-template-columns:auto minmax(0,1fr) auto auto}.lc-badge>.lc-btn{grid-column:3;grid-row:1}.lc-badge>.lc-x{grid-column:4}}
.lc-x{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;color:var(--sh-ink-3);transition:background var(--fast)}
.lc-x:hover{background:rgba(22,24,29,.06);color:var(--sh-ink)}
.lc-sugg-host{margin-top:12px}
.lc-sugg{padding:8px 8px 8px 10px;border-radius:12px}
.lc-sugg-ic{width:36px;height:36px}
.lc-sugg-txt{min-width:0;font-size:14.5px;font-weight:600;line-height:1.4}
.lc-sugg .lc-btn{padding-inline:16px}
/* /unsubscribe */
.unsub-page{display:grid;place-items:center;padding-block:32px 48px}
.unsub-card{width:100%;max-width:520px;padding:28px 24px;text-align:center}
.unsub-card .auth-mark{margin-inline:auto}
.unsub-state{display:flex;flex-direction:column;align-items:center;gap:10px}
.unsub-state form{width:100%;margin-top:8px}
.unsub-state h1:focus{outline:0}
.unsub-ok{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--sh-primary-soft);color:var(--sh-primary)}
.unsub-service{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:var(--sh-surface-2);text-align:start}
.unsub-service .ic{margin-top:3px;flex:none;color:var(--sh-primary)}
.unsub-actions{justify-content:center}
.unsub-working{display:flex;align-items:center;gap:10px}
.unsub-spin{width:18px;height:18px;border:2px solid var(--sh-line-2);border-top-color:var(--sh-primary);border-radius:50%;animation:lcspin .8s linear infinite}
@keyframes lcspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.unsub-spin{animation:none}}
