/* ===== Store Lock: modal (new design) ===== */
.hsl-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
.hsl-modal[hidden] { display: none; }
.hsl-modal__overlay { position: absolute; inset: 0; background: rgba(15,12,10,.62); backdrop-filter: blur(4px); animation: hslFade .25s ease; }
.hsl-modal__box {
  position: relative; width: 430px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.3); max-height: 92vh; overflow-y: auto;
  animation: hslPop .42s cubic-bezier(.2,.9,.25,1.05);
}
@keyframes hslPop { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hslFade { from { opacity: 0; } to { opacity: 1; } }
/* Head */
.hsl-head { background: #1c1c1e; padding: 24px 24px 20px; text-align: center; }
.hsl-head__flags { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.hsl-bigflag { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2.5px solid rgba(255,255,255,.9); box-shadow: 0 3px 12px rgba(0,0,0,.5); }
.hsl-bigflag--act { border-color: #f18833; }
.hsl-head__arrow { color: #6b6b70; font-size: 20px; }
.hsl-modal__title { margin: 0; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.hsl-head__sub { margin: 5px 0 0; font-size: 12px; color: #9a9aa0; }
/* Compare cards */
.hsl-cmp { display: flex; align-items: center; padding: 18px 22px 8px; gap: 10px; }
.hsl-card { flex: 1; border: 1.5px solid #ededed; border-radius: 13px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hsl-card--add { border-color: #c5dd8f; background: #f6fbec; }
.hsl-card img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 1px 5px rgba(0,0,0,.15); }
.hsl-card__lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #aaa; margin: 8px 0 3px; font-weight: 700; }
.hsl-card__nm { font-size: 13.5px; font-weight: 800; color: #1f1f1f; }
.hsl-cmp__arrow { color: #d0d0d0; font-size: 18px; font-weight: 800; }
/* Note (double cream strip + rows with icons) */
.hsl-note { margin: 6px 22px 16px; background: #f7f7f8; border: 1px solid #e8e8ea; border-left: 4px solid #1c1c1e; border-right: 4px solid #1c1c1e; border-radius: 10px; padding: 4px 16px; }
.hsl-note__row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; font-size: 12.5px; color: #444; line-height: 1.7; }
.hsl-note__row + .hsl-note__row { border-top: 1px solid #e8e8ea; }
.hsl-note__ic { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.hsl-note__ic svg { width: 13px; height: 13px; stroke: #555; }
.hsl-note b { color: #1f1f1f; font-weight: 700; }
.hsl-fi { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: -3px; margin: 0 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
/* Actions */
.hsl-modal__actions { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.hsl-modal .hc-btn { border-radius: 12px; padding: 13px 14px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 7px; transition: background .15s, border-color .15s; border: 1.5px solid transparent; }
.hsl-modal .hc-btn .hsl-bi { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.hsl-modal .hsl-btn-switch { background: #f6fbec; color: #3d6b1a; border-color: #c5dd8f; }
.hsl-modal .hsl-btn-switch:hover { background: #eaf4d6; border-color: #aacb6e; color: #3d6b1a; }
.hsl-modal .hsl-btn-keep { background: #eef1f5; color: #3a4250; border-color: #cfd6e0; }
.hsl-modal .hsl-btn-keep:hover { background: #e3e8ef; border-color: #bcc6d4; color: #3a4250; }
.hsl-modal .hsl-btn-save { background: #f5f5f5; color: #888; border-color: #ececec; font-size: 13px; padding: 11px; }
.hsl-modal .hsl-btn-save:hover { background: #e9e9e9; border-color: #dcdcdc; color: #888; }
.hsl-btn-switch[disabled], .hsl-btn-save[disabled] { opacity: .6; cursor: wait; }
body.hsl-modal-open { overflow: hidden; }


/* ---------- Header chip ---------- */
.hsl-chip {
  /* 0.3.7: bottom 20px -> 84px; it overlapped the theme scroll-to-top arrow (#kt-scroll-up, right 30 / bottom 30, 39px). */
  position: fixed; bottom: 84px; right: 20px; top: auto; left: auto; z-index: 9999;
  background: #1f1f1f; color: #fff;
  border: none; border-radius: 12px;
  padding: 10px 16px; font-size: 12.5px; font-weight: 500; letter-spacing: .2px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.hsl-chip:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.32); }
.hsl-chip:focus-visible { outline: 2px solid #f18833; outline-offset: 2px; }
.hsl-chip strong { color: #f9a14e; font-weight: 700; }
.hsl-chip img.emoji { width: 18px; height: 18px; vertical-align: middle; }
.hsl-chip .hsl-flag { width: 20px; height: 20px; border-radius: 3px; flex: 0 0 auto; display: inline-block; }
.hsl-chip .hsl-chip__text { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* ---------- Mobile: slide-out tab ---------- */
@media (max-width: 768px) {
  .hsl-chip {
    /* 0.3.8: in iOS Chrome the bottom bar grows by the safe area; the badge moves up by the same amount. */
    right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); top: auto; left: auto;
    border-radius: 10px 0 0 10px;
    padding: 10px 14px;
    max-width: 240px; overflow: hidden; white-space: nowrap;
    transition: max-width .35s cubic-bezier(.4,0,.2,1), padding .35s ease;
  }
  .hsl-chip.hsl-collapsed {
    max-width: 46px; padding: 10px;
    justify-content: center;
  }
  .hsl-chip.hsl-collapsed .hsl-chip__text {
    opacity: 0; width: 0; overflow: hidden;
  }
  .hsl-chip .hsl-chip__text { transition: opacity .2s ease; }
}

/* NOTE: fixed position is a phase 2 placeholder; phase 3 moves the chip into the real header. */

/* ---------- Cart banner & checkout block ---------- */
.hsl-cart-banner {
  background: var(--hc-primary-soft, #fdf3e7); border: 1px solid var(--hc-primary, #f18833);
  border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; font-size: .95rem;
}
.hsl-ships-from {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--hc-bg-soft, #f6f6f6); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 16px;
}
.hsl-ships-from__flag { font-size: 1.4rem; line-height: 1; }
.hsl-ships-from__text small { color: var(--hc-text-muted, #6b6b6b); }
.hsl-order-store { margin-top: 10px; }

/* ===== Store Lock: badge + info popup + draggable =====
   The chip is an INFO-ONLY badge: a circular cart-store flag with an orange
   site-colour ring and a small orange lock badge in the corner. Tapping it opens
   an info popup (no store switch, no navigation; the existing modal flow stays
   the authority). The badge is draggable (pointer events, mobile + desktop) and
   its position is remembered via localStorage. This block supersedes the old
   collapsible pill behaviour (max-width / hsl-collapsed / transition). */
#hsl-chip.hsl-chip{
  max-width:none; width:auto; padding:0; gap:0;
  background:transparent; box-shadow:none; border-radius:50%;
  overflow:visible; cursor:grab; touch-action:none; transition:none;
}
#hsl-chip.hsl-chip.hsl-dragging{ cursor:grabbing; }
#hsl-chip.hsl-chip .hsl-chip__text{ display:none; }
#hsl-chip.hsl-chip strong{ display:none; }
#hsl-chip.hsl-chip .hsl-flag{
  /* 0.3.9: 46 -> 56px; same size as the WeChat and chat buttons */
  width:56px; height:56px; border-radius:50%;
  border:2px solid #f18833; box-shadow:0 4px 14px rgba(0,0,0,.3);
  pointer-events:none;
}
#hsl-chip.hsl-chip::before{
  content:""; position:absolute; top:-2px; right:-2px;
  width:20px; height:20px; border-radius:50%; background:#f18833;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>');
  background-position:center; background-repeat:no-repeat; background-size:11px;
  border:2px solid #fff; z-index:5; pointer-events:none;
}
/* neutralise old collapsible rules if they appear earlier */
#hsl-chip.hsl-chip.hsl-collapsed{ max-width:none; }

/* 0.5.0: half outside on the right edge ("peek"); JS --hsl-peek = half width up to the right edge.
   1st tap full size, 2nd tap popup; outside tap slides it back. No ring. Lock is now top left (right half hidden at the edge). */
#hsl-chip.hsl-chip{ transition:transform .28s ease; }
#hsl-chip.hsl-chip.hsl-dragging{ transition:none; }
#hsl-chip.hsl-chip.hsl-peek, #hsl-chip.hsl-chip.hsl-peek:hover{ transform:translateX(var(--hsl-peek, 44px)); }
#hsl-chip.hsl-chip::before{ right:auto; left:-2px; }
@media (prefers-reduced-motion: reduce){ #hsl-chip.hsl-chip{ transition:none; } }

/* Info popup */
#hsl-popup{
  position:fixed; z-index:10000; background:#1f1f1f; color:#fff;
  border-radius:18px; padding:22px 22px 20px; width:300px;
  box-shadow:0 16px 46px rgba(0,0,0,.42); font-size:15px; line-height:1.55;
  opacity:0; transform:translateY(8px) scale(.96); pointer-events:none;
  transition:opacity .22s, transform .22s;
}
#hsl-popup.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#hsl-popup .hsl-pop-close{
  position:absolute; top:13px; right:13px; width:30px; height:30px; border:none;
  background:rgba(255,255,255,.12); color:#fff; border-radius:50%; cursor:pointer;
  font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center;
}
#hsl-popup .hsl-pop-close:hover{ background:rgba(255,255,255,.22); }
#hsl-popup .hsl-pop-title{ font-weight:700; font-size:16px; margin:0 0 9px; display:flex; align-items:center; gap:8px; padding-right:34px; white-space:nowrap; }
#hsl-popup .hsl-pop-title strong{ color:#f9a14e; }
#hsl-popup .hsl-pop-flag{ width:22px; height:22px; border-radius:4px; flex:0 0 auto; }
#hsl-popup p{ margin:0; color:#cfcfcf; font-size:14px; }

/* 0.5.1 (design A): white card, soft shadow, arrow pointing at the badge. Opens to the left of the badge
   (JS: --hsl-arrow = badge centre); if there is no room, above it (.hsl-pop--above, arrow at bottom). Texts unchanged. */
#hsl-popup{
  background:#fff; color:#1f1d1b; border-radius:16px; padding:16px 16px 14px; width:280px; max-width:calc(100vw - 24px);
  box-shadow:0 12px 32px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.04); font-size:14px; line-height:1.5;
  transform:translateX(6px) scale(.97); transform-origin:right bottom;
}
#hsl-popup.is-open{ transform:none; }
#hsl-popup::after{
  content:""; position:absolute; right:-6px; top:var(--hsl-arrow, 50%); margin-top:-7px; width:14px; height:14px;
  background:inherit; border-radius:3px; transform:rotate(45deg); box-shadow:2px -2px 4px rgba(0,0,0,.04);
}
#hsl-popup.hsl-pop--above{ transform-origin:center bottom; transform:translateY(6px) scale(.97); }
#hsl-popup.hsl-pop--above.is-open{ transform:none; }
#hsl-popup.hsl-pop--above::after{ right:auto; top:auto; bottom:-6px; left:var(--hsl-arrow-x, 50%); margin:0 0 0 -7px; box-shadow:2px 2px 4px rgba(0,0,0,.04); }
#hsl-popup .hsl-pop-close, #hsl-popup .hsl-pop-close:hover, #hsl-popup .hsl-pop-close:focus, #hsl-popup .hsl-pop-close:active{
  top:10px; right:10px; width:26px; height:26px; padding:0; border:0; background:#f3eee8; color:#6b645d; font-size:16px; box-shadow:none;
}
#hsl-popup .hsl-pop-close:hover{ background:#ebe3da; color:#1f1d1b; }
#hsl-popup .hsl-pop-title{ font-weight:600; font-size:14.5px; line-height:1.35; margin:0 0 6px; gap:9px; padding-right:30px; white-space:normal; color:#1f1d1b; }
#hsl-popup .hsl-pop-title strong{ color:#d8782a; font-weight:600; }
#hsl-popup .hsl-pop-flag{ width:24px; height:24px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
#hsl-popup p{ color:#5c5650; font-size:13.5px; line-height:1.5; }
html[data-theme="dark"] #hsl-popup{ background:#1f1b18; color:#ece7e1; box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 0 1px #34302c; }
html[data-theme="dark"] #hsl-popup .hsl-pop-title{ color:#ece7e1; }
html[data-theme="dark"] #hsl-popup .hsl-pop-title strong{ color:#f0a35e; }
html[data-theme="dark"] #hsl-popup p{ color:#b5ada4; }
html[data-theme="dark"] #hsl-popup .hsl-pop-close, html[data-theme="dark"] #hsl-popup .hsl-pop-close:focus, html[data-theme="dark"] #hsl-popup .hsl-pop-close:active{ background:#2a2420; color:#b5ada4; }
html[data-theme="dark"] #hsl-popup .hsl-pop-close:hover{ background:#34302c; color:#ece7e1; }


/* ===== 0.4.0 — switch transition (11 Oct 2026): A steps · B flag · C cart. Demo: ?hsl_demo=1 ===== */
.hsl-modal__box--t { animation: none; }
.hslt { --o:#f18833; --g:#5a9a2a; --gl:#eaf4d6; }
.hslt .hslt-donetitle { display:none; }
.hslt[data-step="4"] .hslt-title, .hslt[data-step="4"] .hslt-b__title:not(.hslt-donetitle), .hslt[data-step="4"] .hslt-c__title:not(.hslt-donetitle) { display:none; }
.hslt[data-step="4"] .hslt-donetitle { display:block; animation: hsltIn .35s ease; }
@keyframes hsltIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } }
@keyframes hsltSpin { to { transform: rotate(360deg); } }

/* shared step list */
.hslt-steps { list-style:none; margin:0; padding:18px 24px 24px; text-align:start; display:flex; flex-direction:column; gap:12px; }
.hslt-step { display:flex; align-items:center; gap:12px; font-size:13.5px; line-height:1.45; color:#b3b3b8; transition: color .3s; }
.hslt-step b { font-weight:700; }
.hslt-ic { position:relative; width:24px; height:24px; flex:0 0 24px; border-radius:50%; border:2px solid #e3e3e6; display:flex; align-items:center; justify-content:center; transition: background .3s, border-color .3s; }
.hslt-ic svg { width:13px; height:13px; stroke:#fff; opacity:0; transform: scale(.4); transition: opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.hslt-spin { position:absolute; inset:-2px; border-radius:50%; border:2px solid transparent; border-top-color: var(--o); opacity:0; }
.hslt[data-step="1"] .hslt-step[data-n="1"], .hslt[data-step="2"] .hslt-step[data-n="2"], .hslt[data-step="3"] .hslt-step[data-n="3"] { color:#1f1f1f; }
.hslt[data-step="1"] .hslt-step[data-n="1"] .hslt-spin, .hslt[data-step="2"] .hslt-step[data-n="2"] .hslt-spin, .hslt[data-step="3"] .hslt-step[data-n="3"] .hslt-spin { opacity:1; animation: hsltSpin .8s linear infinite; }
.hslt[data-step="2"] .hslt-step[data-n="1"], .hslt[data-step="3"] .hslt-step[data-n="1"], .hslt[data-step="3"] .hslt-step[data-n="2"], .hslt[data-step="4"] .hslt-step { color:#3d6b1a; }
.hslt[data-step="2"] .hslt-step[data-n="1"] .hslt-ic, .hslt[data-step="3"] .hslt-step[data-n="1"] .hslt-ic, .hslt[data-step="3"] .hslt-step[data-n="2"] .hslt-ic, .hslt[data-step="4"] .hslt-step .hslt-ic { background: var(--g); border-color: var(--g); }
.hslt[data-step="2"] .hslt-step[data-n="1"] svg, .hslt[data-step="3"] .hslt-step[data-n="1"] svg, .hslt[data-step="3"] .hslt-step[data-n="2"] svg, .hslt[data-step="4"] .hslt-step svg { opacity:1; transform:none; }

/* A — steps: dark head, old flag fades, spinning ring around the new flag */
.hslt--a .hsl-head { padding-bottom:22px; }
.hslt--a .hslt-from { transition: opacity .5s, filter .5s, transform .5s; }
.hslt--a[data-step="1"] .hslt-from, .hslt--a[data-step="2"] .hslt-from, .hslt--a[data-step="3"] .hslt-from, .hslt--a[data-step="4"] .hslt-from { opacity:.35; filter: grayscale(1); transform: scale(.85); }
.hslt-arrow { color:#6b6b70; font-size:20px; }
.hslt-ring { position:relative; display:inline-flex; border-radius:50%; }
.hslt-ring::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:3px solid rgba(241,136,51,.25); border-top-color: var(--o); animation: hsltSpin .9s linear infinite; }
.hslt--a[data-step="4"] .hslt-ring::after { animation:none; border-color: var(--g); }
.hslt--a[data-step="4"] .hslt-ring { animation: hsltPulse .5s ease; }
@keyframes hsltPulse { 50% { transform: scale(1.12); } }

/* B — flag coin flips inside a progress ring */
.hslt--b { padding:30px 24px 26px; text-align:center; }
.hslt-b__stage { position:relative; width:120px; height:120px; margin:0 auto 18px; }
.hslt-b__ring { position:absolute; inset:0; transform: rotate(-90deg); }
.hslt-b__track { fill:none; stroke:#eee; stroke-width:6; }
.hslt-b__arc { fill:none; stroke: var(--o); stroke-width:6; stroke-linecap:round; stroke-dasharray:339.3; stroke-dashoffset:339.3; transition: stroke-dashoffset .7s ease, stroke .3s; }
.hslt--coin[data-step="1"] .hslt-b__arc { stroke-dashoffset:254; }
.hslt--coin[data-step="2"] .hslt-b__arc { stroke-dashoffset:150; }
.hslt--coin[data-step="3"] .hslt-b__arc { stroke-dashoffset:60; }
.hslt--coin[data-step="4"] .hslt-b__arc { stroke-dashoffset:0; stroke: var(--g); }
.hslt-b__coin { position:absolute; inset:16px; perspective:500px; }
.hslt-b__face { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; box-shadow:0 4px 14px rgba(0,0,0,.18); backface-visibility:hidden; transition: transform .7s cubic-bezier(.45,.05,.3,1); }
.hslt-b__face--to { transform: rotateY(180deg); }
.hslt--coin[data-step="3"] .hslt-b__face--from, .hslt--coin[data-step="4"] .hslt-b__face--from { transform: rotateY(-180deg); }
.hslt--coin[data-step="3"] .hslt-b__face--to, .hslt--coin[data-step="4"] .hslt-b__face--to { transform: rotateY(0); }
.hslt--coin[data-step="1"] .hslt-b__face--from, .hslt--coin[data-step="2"] .hslt-b__face--from { filter: grayscale(.6); }
.hslt-b__ok { position:absolute; right:6px; bottom:6px; width:30px; height:30px; border-radius:50%; background: var(--g); border:3px solid #fff; display:flex; align-items:center; justify-content:center; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.hslt-b__ok svg { width:15px; height:15px; stroke:#fff; }
.hslt--coin[data-step="4"] .hslt-b__ok { transform: scale(1); }
.hslt-b__title { margin:0 0 6px; font-size:18px; font-weight:800; color:#1f1f1f; }
.hslt-b__cap { position:relative; min-height:48px; }
.hslt-b__cap p { position:absolute; left:0; right:0; top:0; margin:0; font-size:13.5px; line-height:1.5; color:#666; opacity:0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.hslt--b[data-step="1"] .hslt-b__cap p[data-n="1"], .hslt--b[data-step="2"] .hslt-b__cap p[data-n="2"], .hslt--b[data-step="3"] .hslt-b__cap p[data-n="3"] { opacity:1; transform:none; }
.hslt-b__dots { display:flex; justify-content:center; gap:7px; margin-top:10px; }
.hslt-b__dots i { width:7px; height:7px; border-radius:50%; background:#e1e1e4; transition: background .3s, width .3s; }
.hslt--b[data-step="1"] .hslt-b__dots i[data-n="1"], .hslt--b[data-step="2"] .hslt-b__dots i[data-n="2"], .hslt--b[data-step="3"] .hslt-b__dots i[data-n="3"] { background: var(--o); width:18px; border-radius:4px; }
.hslt--b[data-step="2"] .hslt-b__dots i[data-n="1"], .hslt--b[data-step="3"] .hslt-b__dots i[data-n="1"], .hslt--b[data-step="3"] .hslt-b__dots i[data-n="2"], .hslt--b[data-step="4"] .hslt-b__dots i { background: var(--g); }

/* C — cart scene: old items fly out, new item drops in, store badge flips */
.hslt--c { padding:26px 0 0; text-align:center; }
.hslt-c__title { margin:0 24px; font-size:18px; font-weight:800; color:#1f1f1f; }
.hslt-c__scene { position:relative; height:130px; margin:14px 24px 0; }
.hslt-c__cart { position:absolute; left:50%; top:30px; width:86px; height:86px; margin-left:-43px; border-radius:22px; background:#f6f6f7; border:1.5px solid #ececee; display:flex; align-items:center; justify-content:center; }
.hslt-c__cart svg { width:46px; height:46px; stroke:#1c1c1e; }
.hslt-c__badge { position:absolute; right:-10px; top:-10px; width:32px; height:32px; border-radius:50%; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.2); overflow:hidden; background:#fff; }
.hslt-c__bf { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: opacity .35s, transform .45s cubic-bezier(.3,1.5,.5,1); }
.hslt-c__bf--to { opacity:0; transform: scale(.3); }
.hslt--c[data-step="3"] .hslt-c__bf--from, .hslt--c[data-step="4"] .hslt-c__bf--from { opacity:0; transform: scale(.3); }
.hslt--c[data-step="3"] .hslt-c__bf--to, .hslt--c[data-step="4"] .hslt-c__bf--to { opacity:1; transform:none; }
.hslt--c[data-step="4"] .hslt-c__badge { box-shadow:0 0 0 4px rgba(90,154,42,.35); }
.hslt-c__old, .hslt-c__new { position:absolute; width:26px; height:26px; border-radius:50%; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.2); border:2px solid #fff; }
.hslt-c__old img, .hslt-c__new img { width:100%; height:100%; object-fit:cover; display:block; }
.hslt-c__old { left:50%; top:60px; margin-left:-13px; opacity:0; }
.hslt--c[data-step="1"] .hslt-c__old--1 { animation: hsltOut 1s ease forwards; }
.hslt--c[data-step="1"] .hslt-c__old--2 { animation: hsltOut 1s .15s ease forwards; }
.hslt--c[data-step="1"] .hslt-c__old--3 { animation: hsltOut 1s .3s ease forwards; }
@keyframes hsltOut { 0% { opacity:1; transform: translate(0,0) scale(1); } 100% { opacity:0; transform: translate(-130px,-40px) scale(.6) rotate(-40deg); } }
.hslt-c__new { left:50%; top:-10px; margin-left:-13px; opacity:0; }
.hslt--c[data-step="2"] .hslt-c__new { animation: hsltDrop .8s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes hsltDrop { 0% { opacity:0; transform: translate(120px,-10px) scale(.7); } 30% { opacity:1; } 100% { opacity:0; transform: translate(0,70px) scale(.9); } }
.hslt--c[data-step="2"] .hslt-c__cart { animation: hsltBump .35s .65s ease; }
@keyframes hsltBump { 50% { transform: scale(1.08); } }
.hslt-c__bar { height:4px; background:#eee; margin:4px 24px 0; border-radius:3px; overflow:hidden; }
.hslt-c__bar i { display:block; height:100%; width:0; background: var(--o); border-radius:3px; transition: width .7s ease, background .3s; }
.hslt--c[data-step="1"] .hslt-c__bar i { width:30%; } .hslt--c[data-step="2"] .hslt-c__bar i { width:62%; } .hslt--c[data-step="3"] .hslt-c__bar i { width:88%; }
.hslt--c[data-step="4"] .hslt-c__bar i { width:100%; background: var(--g); }
.hslt-steps--c { padding-top:16px; }

@media (prefers-reduced-motion: reduce) { .hslt *, .hslt *::after { animation-duration: .01s !important; transition-duration: .01s !important; } }

/* demo bar */
.hslt-demo { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index:100000; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; padding:8px 10px; background:#1c1c1e; color:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.35); font:600 12px/1.2 -apple-system, system-ui, sans-serif; max-width:calc(100vw - 24px); }
.hslt-demo span { opacity:.75; margin-right:4px; }
.hslt-demo button { border:0; border-radius:9px; padding:8px 11px; background:#f18833; color:#fff; font:700 12px/1 inherit; cursor:pointer; }
body.hsl-modal-open .hslt-demo { display:none; }


/* ===== 0.4.0 mixed variants (A's stacked descriptions + B's ticked finish) ===== */
.hslt-h { margin:0; font-size:18px; font-weight:800; color:#1f1f1f; letter-spacing:-.01em; }
.hslt[data-step="4"] .hslt-h.hslt-title { display:none; }
/* D: light; coin + ring on top, step list below */
.hslt--d { padding:28px 0 0; text-align:center; }
.hslt--d .hslt-b__stage { width:104px; height:104px; margin:0 auto 16px; }
.hslt--d .hslt-b__coin { inset:14px; }
/* E: coin + ring inside the dark header (A's header), step list below */
.hslt--e .hsl-head { padding:24px 24px 20px; }
.hslt--e .hslt-b__stage { width:88px; height:88px; margin:0 auto 12px; }
.hslt--e .hslt-b__coin { inset:12px; }
.hslt--e .hslt-b__track { stroke:#3a3a3e; }
.hslt--e .hslt-b__ok { border-color:#1c1c1e; width:26px; height:26px; right:2px; bottom:2px; }
.hslt--e .hslt-b__ok svg { width:13px; height:13px; }
.hslt--e .hslt-h { color:#fff; }
/* F: side by side; coin left, title + steps right */
.hslt--f { padding:22px 20px 20px; }
.hslt-f__row { display:flex; align-items:flex-start; gap:16px; }
.hslt--f .hslt-b__stage { width:76px; height:76px; margin:0; flex:0 0 76px; }
.hslt--f .hslt-b__coin { inset:10px; }
.hslt--f .hslt-b__track, .hslt--f .hslt-b__arc { stroke-width:7; }
.hslt--f .hslt-b__ok { width:24px; height:24px; right:-2px; bottom:-2px; border-width:2px; }
.hslt--f .hslt-b__ok svg { width:12px; height:12px; }
.hslt-f__col { flex:1; min-width:0; text-align:start; }
.hslt--f .hslt-h { font-size:16.5px; margin-top:4px; }
.hslt--f .hslt-steps { padding:12px 0 0; gap:10px; }
.hslt--f .hslt-step { font-size:13px; }
.hslt--f .hslt-ic { width:22px; height:22px; flex-basis:22px; }
/* on finish the new flag grows slightly (B's ticked transition) */
.hslt--coin[data-step="4"] .hslt-b__stage { animation: hsltPulse .5s ease; }
.hslt-demo .hslt-demo--new { background:#5a9a2a; }

/* 0.4.1: background clicks do not close the window during the switch (JS); wait cursor */
.hsl-modal:has(.hslt) .hsl-modal__overlay { cursor: progress; }