/* ============================================================
   KSmartShops — marketplace UI on the KSMART PAY design system
   Obsidian dark surfaces · sapphire→gold accent · glass + glow
   Self-contained: nothing here is shared with the rest of the site.
   ============================================================ */
:root {
  /* surfaces (from ksmartpay tokens) */
  --bg-0: #06080a;
  --bg-1: #0b0e12;
  --bg-2: #11151b;
  --bg-3: #171c24;

  /* ink */
  --ink: #eef3f6;
  --ink-dim: #9aa8b4;
  --ink-faint: #5d6b77;

  /* brand */
  --blue: #3d8bff;
  --blue-deep: #1f5fd6;
  --gold: #f6c54d;
  --gold-deep: #d99b1f;
  --accent-grad: linear-gradient(100deg, var(--blue) 0%, #7fb2ff 45%, var(--gold) 100%);

  /* commerce states */
  --hot: #ff4d5e;
  --ok: #34d399;
  --warn: #ffb84d;

  /* glass */
  --glass: rgba(255,255,255,.045);
  --glass-strong: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.09);
  --stroke-soft: rgba(255,255,255,.055);

  --glow-blue: 0 0 60px -12px rgba(61,139,255,.45);
  --glow-gold: 0 0 60px -12px rgba(246,197,77,.35);

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg-0); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
::selection { background: rgba(61,139,255,.28); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: #232a33; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2e3742; }

.ks-wrap { width: min(1240px, 94vw); margin-inline: auto; }
.grad-text { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- ambient background ---------- */
.ks-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ks-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .32; }
.ks-blob-1 { width: 520px; height: 520px; top: -160px; left: -120px; background: radial-gradient(circle, #3d8bff, transparent 68%); animation: floatA 22s ease-in-out infinite; }
.ks-blob-2 { width: 460px; height: 460px; top: 40%; right: -140px; background: radial-gradient(circle, #f6c54d, transparent 68%); animation: floatB 26s ease-in-out infinite; }
.ks-grid-bg {
  position: absolute; inset: 0; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 35%, transparent 78%);
}
.ks-amb-ico { position: absolute; font-size: 26px; opacity: .13; animation: floatA 18s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translate(0,0) } 50% { transform: translate(28px,-34px) } }
@keyframes floatB { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-34px,26px) } }

/* ---------- header ---------- */
.ks-header { position: sticky; top: 0; z-index: 60; }
.ks-topbar {
  background: rgba(8,11,16,.86); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--stroke);
}
.ks-topbar-inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.ks-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ks-brand-word { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.5px; white-space: nowrap; }
.ks-brand-word em { font-style: normal; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ks-search { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; position: relative; }
.ks-search-box {
  flex: 1; display: flex; align-items: center; background: var(--bg-2);
  border: 1px solid var(--stroke); border-radius: 999px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s; min-width: 0;
}
.ks-search-box:focus-within { border-color: rgba(61,139,255,.55); box-shadow: 0 0 0 3px rgba(61,139,255,.12); }
.ks-search-box input { flex: 1; background: none; border: 0; outline: none; padding: 11px 16px; min-width: 0; }
.ks-search-box input::placeholder { color: var(--ink-faint); }
.ks-search-box button {
  border: 0; background: var(--accent-grad); color: #051027; font-weight: 700;
  padding: 0 20px; align-self: stretch; cursor: pointer; font-family: var(--font-display);
}
.ks-search-box button:hover { filter: brightness(1.08); }

.ks-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ks-iconbtn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid var(--stroke); color: var(--ink);
  border-radius: 999px; padding: 9px 15px; cursor: pointer; font-weight: 600;
  font-family: var(--font-display); font-size: 14px; white-space: nowrap;
  transition: transform .2s var(--ease-out), background .2s, border-color .2s;
}
.ks-iconbtn:hover { background: var(--glass-strong); border-color: rgba(255,255,255,.18); transform: translateY(-2px); }
.ks-iconbtn.primary { background: var(--accent-grad); color: #051027; border-color: transparent; box-shadow: 0 6px 22px -8px rgba(61,139,255,.6); }
.ks-cart-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  background: var(--hot); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; padding: 0 5px; box-shadow: 0 0 0 2px var(--bg-0);
}
.ks-cart-badge.bump { animation: bump .45s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(1) } 45% { transform: scale(1.45) } 100% { transform: scale(1) } }

/* category rail */
.ks-catbar { background: rgba(8,11,16,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--stroke-soft); }
.ks-catbar-inner { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.ks-catbar-inner::-webkit-scrollbar { display: none; }
.ks-chip {
  border: 1px solid var(--stroke); background: var(--glass); color: var(--ink-dim);
  border-radius: 999px; padding: 7px 15px; white-space: nowrap; cursor: pointer;
  font-size: 13.5px; font-weight: 600; font-family: var(--font-display);
  transition: all .2s var(--ease-out);
}
.ks-chip:hover { color: var(--ink); border-color: rgba(61,139,255,.5); transform: translateY(-2px); }
.ks-chip.active { background: var(--accent-grad); color: #051027; border-color: transparent; }

/* ---------- layout ---------- */
main { position: relative; z-index: 1; padding: 24px 0 80px; }
.ks-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 34px 0 16px; flex-wrap: wrap; }
.ks-section-head h2 { font-size: 24px; display: flex; align-items: center; gap: 10px; }
.ks-section-head .sub { color: var(--ink-dim); font-size: 13.5px; }
.ks-card { background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-lg); backdrop-filter: blur(16px); padding: 20px; }

/* ---------- hero carousel ---------- */
.ks-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--stroke); box-shadow: var(--glow-blue); }
.ks-hero-track { display: flex; transition: transform .7s var(--ease-out); }
.ks-hero-slide { min-width: 100%; }
.ks-hero-slide img { width: 100%; height: auto; aspect-ratio: 1200/480; object-fit: cover; cursor: pointer; }
.ks-hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.ks-hero-dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: all .3s; padding: 0; }
.ks-hero-dots button.on { width: 26px; background: var(--gold); }
.ks-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--stroke); background: rgba(6,8,10,.55);
  color: #fff; cursor: pointer; backdrop-filter: blur(8px); font-size: 18px; display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.ks-hero-arrow:hover { background: rgba(6,8,10,.85); }
.ks-hero-arrow.prev { left: 14px; } .ks-hero-arrow.next { right: 14px; }

/* ---------- trust strip ---------- */
.ks-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.ks-trust-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-md);
  transition: transform .25s var(--ease-out), border-color .25s;
}
.ks-trust-item:hover { transform: translateY(-3px); border-color: rgba(61,139,255,.4); }
.ks-trust-item .ico { font-size: 24px; }
.ks-trust-item b { font-family: var(--font-display); font-size: 14px; display: block; }
.ks-trust-item span { color: var(--ink-dim); font-size: 12px; }

/* ---------- categories ---------- */
.ks-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ks-cat {
  position: relative; text-align: center; padding: 20px 8px 16px; cursor: pointer; overflow: hidden;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-md);
  transition: transform .28s var(--ease-out), border-color .28s, box-shadow .28s;
}
.ks-cat:hover { transform: translateY(-5px); border-color: rgba(246,197,77,.45); box-shadow: var(--glow-gold); }
.ks-cat .ico {
  width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 16px; display: grid; place-items: center;
  font-size: 27px; background: linear-gradient(145deg, rgba(61,139,255,.22), rgba(246,197,77,.18));
  border: 1px solid var(--stroke); transition: transform .3s var(--ease-spring);
}
.ks-cat:hover .ico { transform: scale(1.12) rotate(-6deg); }
.ks-cat .nm { font-size: 12.5px; font-weight: 600; font-family: var(--font-display); line-height: 1.3; }
.ks-cat .ct { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

/* ---------- product grid ---------- */
.ks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; }
.ks-prod {
  position: relative; display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--stroke); border-radius: var(--r-md);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.ks-prod:hover { transform: translateY(-6px); border-color: rgba(61,139,255,.5); box-shadow: 0 18px 44px -18px rgba(61,139,255,.55); }
.ks-thumb { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; font-size: 74px; overflow: hidden; }
.ks-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .75s var(--ease-out);
}
.ks-prod:hover .ks-thumb::after { transform: translateX(120%); }
.ks-prod:hover .ks-thumb .emo { transform: scale(1.14) rotate(4deg); }
.ks-thumb .emo { transition: transform .4s var(--ease-spring); filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.ks-flag {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; font-family: var(--font-display); letter-spacing: .3px;
}
.ks-flag.off { background: var(--hot); color: #fff; box-shadow: 0 4px 14px -4px rgba(255,77,94,.8); }
.ks-flag.soldout { background: rgba(6,8,10,.8); color: var(--ink-dim); border: 1px solid var(--stroke); left: auto; right: 10px; }
.ks-prod-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.ks-prod-title { font-size: 13.5px; line-height: 1.4; max-height: 2.8em; overflow: hidden; color: var(--ink); }
.ks-price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ks-price { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--gold); }
.ks-was { color: var(--ink-faint); text-decoration: line-through; font-size: 12px; }
.ks-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-dim); }
.ks-stars { color: var(--gold); letter-spacing: -1px; }
.ks-sold-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ks-sold-bar i { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; }
.ks-shop-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-faint); margin-top: auto; }
.ks-badge-official { background: rgba(61,139,255,.18); color: #9ec5ff; border: 1px solid rgba(61,139,255,.35); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; }

/* flash sale */
.ks-flash { background: linear-gradient(120deg, rgba(255,77,94,.14), rgba(246,197,77,.1)); border-color: rgba(255,77,94,.35); }
.ks-countdown { display: inline-flex; gap: 5px; align-items: center; font-family: var(--font-display); }
.ks-countdown b { background: var(--hot); color: #fff; border-radius: 7px; padding: 3px 8px; font-size: 14px; min-width: 32px; text-align: center; }

/* ---------- buttons / forms ---------- */
.ks-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px; padding: 12px 24px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px; white-space: nowrap;
  background: var(--accent-grad); color: #051027; box-shadow: 0 6px 22px -8px rgba(61,139,255,.55);
  transition: transform .25s var(--ease-out), box-shadow .25s, filter .2s, opacity .2s;
}
.ks-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px rgba(61,139,255,.7); }
.ks-btn:active { transform: scale(.97); }
.ks-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.ks-btn.ghost { background: var(--glass); border-color: var(--stroke); color: var(--ink); box-shadow: none; backdrop-filter: blur(12px); }
.ks-btn.ghost:hover { background: var(--glass-strong); border-color: rgba(255,255,255,.2); }
.ks-btn.gold { background: linear-gradient(100deg, var(--gold), var(--gold-deep)); color: #1a1204; box-shadow: 0 6px 22px -8px rgba(246,197,77,.6); }
.ks-btn.danger { background: linear-gradient(100deg, #ff7a86, var(--hot)); color: #fff; box-shadow: none; }
.ks-btn.sm { padding: 8px 16px; font-size: 13px; }
.ks-btn.block { width: 100%; }

.ks-field { display: block; margin-bottom: 14px; }
.ks-field > span, .ks-field > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-dim); margin-bottom: 6px; font-family: var(--font-display); }
.ks-field input, .ks-field select, .ks-field textarea {
  width: 100%; padding: 12px 15px; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--stroke); color: var(--ink); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ks-field input::placeholder, .ks-field textarea::placeholder { color: var(--ink-faint); }
.ks-field input:focus, .ks-field select:focus, .ks-field textarea:focus { border-color: rgba(61,139,255,.55); box-shadow: 0 0 0 3px rgba(61,139,255,.12); }
.ks-field select option { background: var(--bg-2); }

.ks-alert { padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 14px; font-weight: 600; font-size: 13.5px; }
.ks-alert.err { background: rgba(255,77,94,.14); color: #ff96a1; border: 1px solid rgba(255,77,94,.3); }
.ks-alert.ok { background: rgba(52,211,153,.14); color: #6ee7b7; border: 1px solid rgba(52,211,153,.3); }

.ks-empty { text-align: center; padding: 70px 20px; color: var(--ink-dim); }
.ks-empty .big { font-size: 56px; display: block; margin-bottom: 14px; opacity: .55; }

/* ---------- skeleton ---------- */
.ks-skel { background: var(--bg-2); border: 1px solid var(--stroke); border-radius: var(--r-md); overflow: hidden; }
.ks-skel .sk { background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.03) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.ks-skel .sk-thumb { aspect-ratio: 1/1; }
.ks-skel .sk-line { height: 11px; border-radius: 6px; margin: 10px 13px; }
@keyframes shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* ---------- tables ---------- */
.ks-table { width: 100%; border-collapse: collapse; }
.ks-table th, .ks-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--stroke-soft); vertical-align: middle; }
.ks-table th { color: var(--ink-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; font-family: var(--font-display); }
.ks-table tr:last-child td { border-bottom: 0; }
.ks-table input[type=number] { width: 82px; padding: 7px 9px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--stroke); color: var(--ink); }

.ks-pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: var(--font-display); letter-spacing: .3px; }
.p-to_pay { background: rgba(255,184,77,.16); color: #ffd28a; border: 1px solid rgba(255,184,77,.3); }
.p-to_ship { background: rgba(61,139,255,.16); color: #9ec5ff; border: 1px solid rgba(61,139,255,.32); }
.p-shipping, .p-picked_up, .p-in_transit, .p-out_for_delivery { background: rgba(167,139,250,.16); color: #c4b5fd; border: 1px solid rgba(167,139,250,.32); }
.p-delivered { background: rgba(52,211,153,.16); color: #6ee7b7; border: 1px solid rgba(52,211,153,.3); }
.p-cancelled, .p-failed { background: rgba(255,77,94,.16); color: #ff96a1; border: 1px solid rgba(255,77,94,.3); }
.p-awaiting_pickup { background: rgba(255,255,255,.07); color: var(--ink-dim); border: 1px solid var(--stroke); }
.p-ready_for_pickup { background: rgba(94,234,212,.14); color: #5eead4; border: 1px solid rgba(94,234,212,.3); }

/* ---------- stats ---------- */
.ks-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ks-stat {
  flex: 1; min-width: 165px; padding: 18px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--stroke); position: relative; overflow: hidden;
  transition: transform .25s var(--ease-out), border-color .25s;
}
.ks-stat:hover { transform: translateY(-4px); border-color: rgba(61,139,255,.4); }
.ks-stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--accent-grad); }
.ks-stat .lbl { color: var(--ink-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; font-family: var(--font-display); }
.ks-stat .val { font-size: 26px; font-weight: 700; margin-top: 5px; font-family: var(--font-display); }

/* ---------- qty ---------- */
.ks-qty { display: inline-flex; align-items: center; border: 1px solid var(--stroke); border-radius: 999px; overflow: hidden; background: var(--bg-2); }
.ks-qty button { border: 0; background: transparent; color: var(--ink); width: 36px; height: 36px; cursor: pointer; font-size: 17px; transition: background .2s; }
.ks-qty button:hover { background: var(--glass-strong); }
.ks-qty span { width: 44px; text-align: center; font-weight: 700; font-family: var(--font-display); }

/* ---------- modal ---------- */
.ks-modal { position: fixed; inset: 0; background: rgba(3,5,8,.78); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 200; }
.ks-modal.open { display: flex; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.ks-modal-card {
  background: var(--bg-1); border: 1px solid var(--stroke); border-radius: var(--r-lg);
  width: 100%; max-width: 460px; max-height: 90vh; overflow: auto;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.8); animation: pop .32s var(--ease-spring);
}
@keyframes pop { from { transform: scale(.93) translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
.ks-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--stroke-soft); }
.ks-modal-head h3 { font-size: 18px; }
.ks-modal-head button { background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--ink-faint); line-height: 1; transition: color .2s; }
.ks-modal-head button:hover { color: var(--ink); }
.ks-modal-body { padding: 20px; }

/* ---------- toast ---------- */
#ksToasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.ks-toast {
  display: flex; align-items: center; gap: 11px; padding: 13px 17px; min-width: 240px; max-width: 360px;
  background: var(--bg-2); border: 1px solid var(--stroke); border-left: 3px solid var(--ok);
  border-radius: var(--r-sm); box-shadow: 0 18px 44px -14px rgba(0,0,0,.7);
  animation: slideIn .35s var(--ease-spring); font-size: 14px;
}
.ks-toast.err { border-left-color: var(--hot); }
.ks-toast.out { animation: slideOut .3s var(--ease-out) forwards; }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes slideOut { to { transform: translateX(120%); opacity: 0 } }

/* ---------- timeline ---------- */
.ks-timeline { list-style: none; }
.ks-timeline li { padding: 9px 0 9px 20px; border-left: 2px solid var(--stroke); position: relative; }
.ks-timeline li::before { content: ''; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--stroke); }
.ks-timeline li:first-child::before { background: var(--accent-grad); box-shadow: 0 0 12px rgba(61,139,255,.8); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal.revealed { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.ks-footer { position: relative; z-index: 1; border-top: 1px solid var(--stroke); background: var(--bg-1); padding: 34px 0; margin-top: 40px; }
.ks-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; }
.ks-footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .7px; color: var(--ink-dim); margin-bottom: 12px; }
.ks-footer a, .ks-footer p { color: var(--ink-faint); font-size: 13.5px; display: block; margin-bottom: 7px; }
.ks-footer a:hover { color: var(--blue); }
.ks-footer-bottom { border-top: 1px solid var(--stroke-soft); margin-top: 24px; padding-top: 18px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .ks-cats { grid-template-columns: repeat(4, 1fr); }
  .ks-trust { grid-template-columns: repeat(2, 1fr); }
  .ks-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ks-topbar-inner { flex-wrap: wrap; gap: 10px; }
  .ks-search { order: 3; flex-basis: 100%; }
  .ks-nav-actions { margin-left: auto; }
  .ks-iconbtn span.lbl { display: none; }
  .ks-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
  .ks-thumb { font-size: 56px; }
  .ks-section-head h2 { font-size: 20px; }
  .ks-hero-arrow { display: none; }
  .ks-blob-1, .ks-blob-2 { width: 300px; height: 300px; }
}
@media (max-width: 460px) {
  .ks-cats { grid-template-columns: repeat(3, 1fr); }
  .ks-trust { grid-template-columns: 1fr; }
  .ks-footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Design pass — 2026-08-10
   Appended so the original rules above stay intact and diffable.
   ══════════════════════════════════════════════════════════════════════ */

/* Flash deals: the grid asked for 6 cards into a ~5-track auto-fill row, so the
   6th wrapped alone and left a large hole. A snapping strip fixes the stranding
   and matches how marketplaces actually present time-limited deals. */
.ks-grid.ks-strip{
  display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; padding-bottom:6px;
  scrollbar-width:thin; scrollbar-color:var(--stroke) transparent;
}
.ks-grid.ks-strip::-webkit-scrollbar{height:7px}
.ks-grid.ks-strip::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:7px}
.ks-grid.ks-strip::-webkit-scrollbar-track{background:transparent}
.ks-grid.ks-strip>.ks-prod{
  flex:0 0 212px; scroll-snap-align:start;
}
.ks-grid.ks-strip>.ks-prod:hover{transform:translateY(-4px)}
@media(max-width:640px){ .ks-grid.ks-strip>.ks-prod{flex-basis:158px} }

/* Product thumbnails: a flat tint behind a floating emoji reads as unfinished.
   A soft radial pedestal gives the object something to sit on. */
.ks-thumb{
  background-image:
    radial-gradient(120% 78% at 50% 108%, rgba(0,0,0,.42), transparent 62%),
    radial-gradient(78% 66% at 50% 34%, rgba(255,255,255,.10), transparent 70%);
}
.ks-thumb .emo{ filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)) }

/* Category tiles: 6 rigid columns squeeze the labels at midrange widths.
   Let them breathe and wrap naturally instead. */
.ks-cats{ grid-template-columns:repeat(auto-fill,minmax(146px,1fr)) }
@media(max-width:980px){ .ks-cats{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))} }
.ks-cat .nm{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em;
}

/* Section headers were carrying the whole hierarchy on font-size alone. */
.ks-sec-head{ align-items:baseline }
.ks-sec-head h2::after{
  content:''; display:block; width:34px; height:3px; border-radius:3px; margin-top:7px;
  background:linear-gradient(90deg,var(--blue),var(--gold));
}

/* Keyboard users could not see where they were. */
.ks-prod:focus-visible,.ks-cat:focus-visible,.ks-iconbtn:focus-visible,.ks-btn:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  .ks-prod,.ks-cat,.ks-thumb .emo,.ks-thumb::after{transition:none!important;animation:none!important}
  .ks-amb-ico,.ks-blob{animation:none!important}
}

/* ── Mobile pass — 2026-08-10 ──────────────────────────────────────────
   On a 390px screen the four trust badges stacked full-width and ate the
   entire first viewport, pushing every product below the fold. 2x2 compact
   tiles say the same thing in a quarter of the height. */
@media(max-width:640px){
  .ks-trust{ grid-template-columns:1fr 1fr; gap:8px; margin-top:12px }
  .ks-trust-item{ padding:10px 11px; gap:8px; align-items:flex-start }
  .ks-trust-item .ico{ font-size:18px; line-height:1 }
  .ks-trust-item b,.ks-trust-item strong{ font-size:12.5px; line-height:1.25 }
  .ks-trust-item span{ font-size:11px; line-height:1.3 }
}

/* The category rail scrolls but gave no hint that it did — content simply
   ran off the edge. A fade on the right edge reads as "more this way". */
.ks-catbar{ position:relative }
.ks-catbar::after{
  content:''; position:absolute; top:0; right:0; bottom:0; width:46px;
  pointer-events:none; z-index:2;
  /* Matches .ks-catbar's own rgba(8,11,16,.72) tint — there is no --bg token,
     and fading to a solid colour banded against the backdrop blur. */
  background:linear-gradient(90deg,rgba(8,11,16,0),rgba(8,11,16,.92));
}

/* Same story for the deal strips. */
.ks-grid.ks-strip{ scroll-padding-left:2px }

/* Hero controls were 14px from the edge on a phone and overlapped the art. */
@media(max-width:640px){
  .ks-hero-arrow{ width:32px; height:32px }
  .ks-hero-arrow.prev{ left:6px } .ks-hero-arrow.next{ right:6px }
  .ks-hero-dots{ bottom:8px }
}

/* ── Reviews + search suggestions — 2026-08-10 ───────────────────────── */
.ks-input{
  background:rgba(255,255,255,.04); border:1px solid var(--stroke);
  border-radius:var(--r-sm,10px); padding:10px 13px; color:var(--ink);
  font-size:13.5px; outline:none;
}
.ks-input:focus{ border-color:rgba(61,139,255,.55); box-shadow:0 0 0 3px rgba(61,139,255,.12) }
.ks-input::placeholder{ color:var(--ink-faint) }

.ks-starpick{ display:flex; gap:4px }
.ks-starpick button{
  background:none; border:0; cursor:pointer; font-size:26px; line-height:1;
  color:var(--ink-faint); padding:2px; transition:transform .12s, color .12s;
}
.ks-starpick button.on{ color:var(--gold) }
.ks-starpick button:hover{ transform:scale(1.18) }

/* header search suggestions */
.ks-search{ position:relative }
.ks-suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80;
  background:var(--bg-2); border:1px solid var(--stroke); border-radius:var(--r-md);
  box-shadow:0 18px 44px -12px rgba(0,0,0,.65); overflow:hidden; display:none;
}
.ks-suggest.open{ display:block }
.ks-suggest button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:10px 14px; color:var(--ink);
}
.ks-suggest button:hover,.ks-suggest button.hot{ background:rgba(61,139,255,.10) }
.ks-suggest .s-emo{ font-size:22px; flex:none }
.ks-suggest .s-title{ flex:1; min-width:0; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ks-suggest .s-price{ color:var(--gold); font-weight:700; font-size:13px; flex:none }

/* The topbar's backdrop-filter creates a stacking context, so the suggestion
   dropdown (z-index inside it) painted BELOW the sibling category bar. Lift the
   whole topbar above the catbar instead. */
.ks-topbar{ position:relative; z-index:3 }