/* MyStickers.ge — shop layer on top of broadsheet.css (DS tokens + components).
   Order: 1 tokens · 2 base · 3 utilities · 4 layout · 5 components · 6 pages · 7 motion. Mobile < 900px. */

/* 1 ─ project token overrides (handoff README) */
:root {
  --font-heading: "Noto Sans Georgian", system-ui, sans-serif;
  --font-body: "Noto Sans Georgian", system-ui, sans-serif;
  --font-serif: "Noto Serif Georgian", Georgia, serif;
  --font-heading-weight: 700;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;
  --ease-out: cubic-bezier(.2, .8, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pad-x: var(--space-8);
  --star: #e8a317;
  --wa: #25D366; --ms: #0084FF;
}
@media (max-width: 899.98px) { :root { --pad-x: var(--space-4); } }

/* 2 ─ base */
body { margin: 0; background: var(--color-bg); color: var(--color-text); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }
button { font-family: inherit; }
h1, h2, h3, h4 { line-height: 1.28; }
h1, h2 { letter-spacing: -0.02em; }
[hidden] { display: none !important; }
.btn { transition: transform .15s ease, background .15s; }
.btn:active:not(:disabled) { transform: scale(.96); }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--color-text); color: var(--color-bg); padding: 8px 14px; border-radius: var(--radius-md); }
.skip-link:focus { left: 8px; color: var(--color-bg); }

/* 3 ─ small utilities (Bootstrap utilities cover display/flex/alignment) */
.fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-15 { font-size: 15px; } .fs-16 { font-size: 16px; }
.fs-17 { font-size: 17px; } .fs-18 { font-size: 18px; } .fs-20 { font-size: 20px; } .fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; } .fs-26 { font-size: 26px; }
.fw-600 { font-weight: 600; }
.lh-16 { line-height: 1.6; }
.muted-12, .muted-13, .muted-14 { color: var(--color-neutral-700); }
.muted-12 { font-size: 12px; } .muted-13 { font-size: 13px; } .muted-14 { font-size: 14px; }
.muted, .text-muted-700 { color: var(--color-neutral-700); }
.text-ink { color: var(--color-text); }
.text-neutral-800 { color: var(--color-neutral-800); }
.min-w-0 { min-width: 0; } .min-w-180 { min-width: 180px; } .min-w-560 { min-width: 560px; } .min-w-720 { min-width: 720px; }
.min-h-36 { min-height: 36px; }
.flex-1 { flex: 1; }
.w-76 { width: 76px; }
.gap-6 { gap: 6px; } .gap-10 { gap: var(--space-2); } .gap-15 { gap: var(--space-3); }
.mt-4px { margin-top: 4px; } .mt-10 { margin-top: var(--space-2); } .mt-15 { margin-top: var(--space-3); } .mt-20 { margin-top: var(--space-4); }
.mb-10 { margin-bottom: var(--space-2); } .mb-15 { margin-bottom: var(--space-3); } .mb-30 { margin: 0 0 var(--space-6); }
.ms-6 { margin-left: 6px; }
.pt-30 { padding-top: var(--space-6); } .py-30 { padding: var(--space-6) 0; }
.mw-420 { max-width: 420px; } .mw-520 { max-width: 520px; } .mw-640 { max-width: 640px; }
.wrap-620 { max-width: 620px; } .wrap-720 { max-width: 720px; } .wrap-1120 { max-width: 1120px; }
.stack-15, .stack-20, .stack-40 { display: flex; flex-direction: column; }
.stack-15 { gap: var(--space-3); } .stack-20 { gap: var(--space-4); } .stack-40 { gap: var(--space-8); }
.grid-fit-150 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.grid-fit-220 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.link-plain { text-decoration: none; }
.only-mobile { display: none !important; }
@media (max-width: 899.98px) {
  .only-mobile { display: flex !important; }
  .only-desktop { display: none !important; }
}
.only-wide { display: none; }
@media (min-width: 1280px) { .only-wide { display: inline; } }

/* buttons: size variants used by the design */
.btn-lg-ms { padding: 12px 20px; font-size: 15px; border-radius: var(--radius-md); }
.btn-sm-ms { padding: 6px 12px; }
.btn-xs { padding: 4px 6px; }
.btn-32 { width: 32px; height: 32px; }
.btn-paper { background: var(--color-bg); border-color: transparent; }
.btn-block.btn-lg-ms { padding: 12px; }
.tag-sm { padding: 1px 7px; }
.page-title { font-size: 40px; margin: 0; text-wrap: balance; }
@media (max-width: 899.98px) { .page-title { font-size: 30px; } }
.form-err { font-size: 14px; color: var(--color-accent-2-700); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.legend { display: block; font-size: 12px; margin-bottom: 5px; padding: 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.mb-40 { margin-bottom: var(--space-8); }

/* 4 ─ app shell */
.app { min-height: 100vh; display: flex; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { padding: var(--space-6) var(--pad-x) var(--space-8); flex: 1; outline: none; animation: view-in .3s var(--ease-out); }

.side {
  position: sticky; top: 0; z-index: 61; width: 264px; height: 100vh; flex: none;
  overflow: hidden auto; background: var(--color-surface); display: flex; flex-direction: column;
}
.side-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-4); text-decoration: none; color: var(--color-text); }
.side-brand:hover { color: var(--color-text); }
.side-word { font-family: var(--font-heading); font-weight: 700; font-size: 22px; letter-spacing: .06em; line-height: 1; }
.side-word span { color: var(--color-accent-2-600); }
.side-tag { font-size: 13px; color: var(--color-neutral-700); }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-3); flex: 1; }
.cat-link {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 42px; padding: 8px var(--space-3);
  border-radius: var(--radius-md); color: var(--color-text); font-size: 14px; text-decoration: none;
  transition: background .2s, transform .2s;
}
.cat-link i { font-size: 20px; }
.cat-link:hover { background: var(--color-accent-100); color: var(--color-text); transform: translateX(3px); }
.cat-link.is-active { background: var(--color-bg); box-shadow: var(--shadow-sm); color: var(--color-accent-800); font-weight: 600; }
.cat-link--accent { color: var(--color-accent-700); font-weight: 600; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count { font-size: 12px; color: var(--color-neutral-700); flex: none; }
.side-guide { flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-3) 0; }
.side-mascot { display: flex; justify-content: center; padding: var(--space-6) var(--space-4) var(--space-8); }
.side-mascot img {
  height: 197px; width: 137px; object-fit: contain; filter: grayscale(1); opacity: .18; transform: rotate(-3deg);
  transition: filter 1.4s ease, opacity 1.4s ease, transform 1.4s var(--ease-out);
}
.side-mascot:hover img { filter: grayscale(0) drop-shadow(0 10px 16px rgba(0, 73, 97, .18)); opacity: 1; transform: translateY(-8px) rotate(2deg); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); }

@media (max-width: 899.98px) {
  .side { position: fixed; left: 0; top: 0; box-shadow: var(--shadow-lg); transform: translateX(-105%); transition: transform .3s var(--ease-out); visibility: hidden; }
  .side.is-open { transform: none; visibility: visible; }
}

.topbar { position: sticky; top: 0; z-index: 30; background: var(--color-bg); box-shadow: var(--shadow-sm); }
.topbar-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--pad-x); min-height: 64px; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; padding-left: var(--space-6); }
.topbar-actions .btn { white-space: nowrap; }
.brand-mini { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--color-text); font-weight: 600; font-size: 17px; }
.brand-mini img { height: 40px; width: auto; }
.search { position: relative; flex: 1; min-width: 200px; max-width: 560px; }
.search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--color-neutral-700); pointer-events: none; }
.search .input { padding-left: 38px; min-height: 42px; }
.search--mobile { padding: 0 var(--space-4) var(--space-3); max-width: none; }
.search--mobile i { left: 30px; top: 21px; }
.guide-link { white-space: nowrap; color: var(--color-accent-700); margin-left: var(--space-2); }
.cart-btn { position: relative; width: 44px; height: 44px; }
.cart-count {
  position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--color-accent-2); color: var(--color-bg); font-size: 11px; font-weight: 600; display: grid; place-items: center; line-height: 1;
}

/* 5 ─ components */

/* sticker thumbnails (.stk itself lives in sticker.css) */
.thumb { display: grid; place-items: center; flex: none; background: var(--color-surface); border-radius: var(--radius-md); }
.thumb-72 { width: 72px; height: 72px; } .thumb-64 { width: 64px; height: 64px; }
.thumb-44 { width: 44px; display: grid; place-items: center; flex: none; }

/* product card */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-4) var(--space-3); }
.pcard { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; animation: card-in .42s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: calc(var(--i) * 40ms); }
.pcard-tile {
  position: relative; width: 100%; max-width: 200px; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: #fff;
  border: 1px solid var(--color-accent-400); display: grid; place-items: center; cursor: pointer; overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.pcard-stk { transition: transform .45s var(--ease-spring); transform: rotate(var(--rot)); }
.pcard-stk .stk { --sz: 124px; }
.pcard-badge { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--color-bg); color: var(--color-accent-2-700); font-weight: 500; border-radius: var(--radius-md); }
.pcard-wish {
  position: absolute; top: var(--space-2); right: var(--space-2); width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; color: var(--color-neutral-700);
  opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--ease-spring), color .2s;
}
.pcard-wish i { font-size: 18px; }
.pcard-wish:hover, .pcard-wish.is-on { color: var(--color-accent-2); }
.pcard-wish.is-on, .pcard-wish:focus-visible { opacity: 1; transform: none; }
.pcard-bar {
  position: absolute; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding: 4px 4px 4px 12px; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(calc(100% + 12px)); transition: opacity .2s, transform .3s var(--ease-out);
}
.pcard-price { font-size: 16px; font-weight: 700; }
.pcard-add {
  width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-accent-100);
  cursor: pointer; color: var(--color-accent-700); transition: color .2s, background .2s;
}
.pcard-add i { font-size: 18px; }
.pcard-add:hover { background: var(--color-accent); color: #fff; }
.pcard-meta { width: 200px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; flex: 1; }
.pcard-name { color: var(--color-text); text-decoration: none; font-weight: 500; font-size: 12px; line-height: 1.35; text-wrap: pretty; padding: 0 2px; }
.pcard-name:hover { color: var(--color-accent-700); }
.stars { display: flex; align-items: center; gap: 1px; color: var(--star); }
.stars i { font-size: 13px; }
.stars span { font-size: 11px; color: var(--color-neutral-700); margin-left: 4px; }
@media (hover: hover) and (min-width: 900px) {
  .pcard:hover .pcard-tile { box-shadow: var(--shadow-md); transform: translateY(-4px); }
  .pcard:hover .pcard-stk { transform: translateY(-14px) rotate(0deg) scale(1.08); }
  .pcard:hover .pcard-wish { opacity: 1; transform: none; }
  .pcard:hover .pcard-bar, .pcard-tile:focus-within .pcard-bar { opacity: 1; transform: none; }
}
@media (max-width: 899.98px), (hover: none) {
  .pcard-wish, .pcard-bar { opacity: 1; transform: none; }
}
@media (max-width: 899.98px) {
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4) var(--space-2); }
  .pcard-stk .stk { --sz: 96px; }
}

/* dialogs */
.dialog-backdrop { z-index: 70; animation: fade-in .2s ease; }
.pd {
  width: min(920px, 100%); max-height: 92vh; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); position: relative; align-content: start;
  background: var(--color-bg); animation: pop-in .32s var(--ease-out);
}
.pd-close { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; }
.pd-preview { display: grid; place-items: center; border-radius: var(--radius-lg); min-height: 380px; padding: var(--space-6); background: var(--tint, var(--color-accent-100)); }
.pd-preview .stk { --sz: 220px; }
.pd-preview .stk-rect { --sz: 260px; }
.pd-body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pd-cat { font-size: 13px; color: var(--color-accent-700); }
.pd-name { margin: var(--space-1) 0; font-size: 28px; padding-right: var(--space-6); }
.pd-desc { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.qty-input { width: 70px; text-align: center; margin: 0 4px; }
.tiers { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: 12px; color: var(--color-neutral-700); }
.tiers .is-on { color: var(--color-accent-700); font-weight: 600; }
.pd-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.pd-total { font-size: 30px; font-weight: 600; line-height: 1.1; }
@media (max-width: 899.98px) {
  .pd-backdrop { padding: 0; }
  .pd { grid-template-columns: minmax(0, 1fr); max-height: 100vh; height: 100%; border-radius: 0; }
  .pd-preview { min-height: 220px; }
  .pd-preview .stk { --sz: 170px; }
}
.dot.mt-4px { margin-top: 4px; }

/* OTP phone-style dialog */
.otp-backdrop { z-index: 90; }
.otp {
  width: min(340px, 100%); background: #fff; padding: var(--space-4) var(--space-6) var(--space-6); border-radius: 28px;
  border: 1px solid var(--color-accent-400); display: flex; flex-direction: column; gap: var(--space-3); max-height: calc(100vh - 32px); overflow: auto;
  animation: pop-in .28s cubic-bezier(.34, 1.4, .64, 1);
}
.otp-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.otp-back { margin-left: -8px; } .otp-x { margin-right: -8px; }
.otp-screen { background: var(--color-accent-100); border-radius: 16px; padding: var(--space-4); box-shadow: inset 0 2px 6px rgba(0, 40, 60, .12); display: flex; flex-direction: column; gap: var(--space-2); min-height: 112px; }
.otp-screen-label { display: flex; justify-content: space-around; align-items: center; font-size: 11px; color: var(--color-accent-800); text-align: center; }
.otp-phone { display: flex; align-items: baseline; gap: 8px; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-accent-900); letter-spacing: .03em; white-space: nowrap; }
.otp-cc { font-size: 16px; color: var(--color-accent-700); }
.otp-cells { display: flex; align-items: flex-end; gap: 3px; }
.otp-cells span { width: .62em; height: 1.25em; display: grid; place-items: end center; border-bottom: 1px solid var(--color-accent); line-height: 1.1; }
.otp-cells span.is-filled { border-color: transparent; }
.otp-cells span.gap { margin-right: 8px; }
.otp-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.otp-code span { height: 40px; display: grid; place-items: end center; font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--color-accent-900); border-bottom: 1px solid var(--color-accent); }
.otp-code span.is-filled { border-color: transparent; }
.otp-msg { font-size: 12px; color: var(--color-accent-800); line-height: 1.4; min-height: 17px; text-align: center; }
.otp-msg.is-err { color: var(--color-accent-2-700); }
.otp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; padding: 0 var(--space-2); }
.otp-key {
  height: 50px; border: 0; border-radius: 999px; background: var(--color-neutral-100); color: var(--color-text); font-size: 24px; font-weight: 500;
  cursor: pointer; display: grid; place-items: center; font-variant-numeric: tabular-nums; transition: background .15s, transform .1s;
}
.otp-key:hover { background: var(--color-accent-200); }
.otp-key:active, .otp-key.is-pressed { transform: scale(.92); background: var(--color-accent-300); }
.otp-key--icon { background: transparent; color: var(--color-neutral-700); }
.otp-key--icon i { font-size: 24px; }
.otp-key.is-invisible { visibility: hidden; }
.otp-ok { padding: 13px; border-radius: 999px; font-size: 15px; }
.otp-foot { font-size: 12px; color: var(--color-neutral-700); text-align: center; min-height: 17px; }

/* chat widget */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.chat-list { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.34, 1.4, .64, 1); }
.chat.is-open .chat-list { opacity: 1; transform: none; pointer-events: auto; }
.chat-wa {
  display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-md);
  color: var(--color-text); text-decoration: none; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform .2s;
}
.chat-wa:hover { transform: translateX(-4px); color: var(--color-text); }
.chat-wa span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #fff; font-size: 20px; }
.chat-ms { width: 46px; height: 46px; margin-right: 5px; border-radius: 50%; display: grid; place-items: center; background: var(--ms); color: #fff; box-shadow: var(--shadow-md); text-decoration: none; font-size: 24px; transition: transform .2s; }
.chat-ms:hover { transform: scale(1.08); color: #fff; }
.chat-toggle {
  width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--color-accent); color: #fff; box-shadow: var(--shadow-lg);
  cursor: pointer; display: grid; place-items: center; font-size: 28px; transition: background .2s, transform .2s;
}
.chat-toggle:hover { background: var(--color-accent-600); transform: scale(1.06); }
.chat-toggle:active { transform: scale(.94); }

/* toast */
.toast-ms {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; background: var(--color-text); color: var(--color-bg);
  padding: 10px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: 14px; display: flex; align-items: center;
  gap: var(--space-3); white-space: nowrap; max-width: calc(100vw - 32px); animation: toast-in .26s var(--ease-out);
}
.toast-ms a { color: var(--color-accent-300); }

/* summary card, rows, tabs, empty states */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; }
.summary { padding: var(--space-4); gap: var(--space-3); position: sticky; top: 96px; }
.summary-title { font-weight: 600; font-size: 18px; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-2); }
.sum-big { font-size: 28px; font-weight: 600; }
.free-hint { font-size: 13px; color: var(--color-accent-700); }
@media (max-width: 899.98px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
}
.empty { padding: var(--space-8) 0; max-width: 46ch; }
.empty-sm { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); color: var(--color-neutral-700); max-width: 46ch; }
.empty-sm > i { font-size: 32px; color: var(--color-accent); }
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; margin-bottom: var(--space-6); box-shadow: inset 0 -1px 0 var(--color-divider); }
.tab {
  display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px var(--space-3); color: var(--color-neutral-800);
  font-size: 15px; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .2s, color .2s;
}
.tab:hover { color: var(--color-accent-800); }
.tab.is-active { color: var(--color-accent-800); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-accent); }
.row-link { cursor: pointer; }

/* 6 ─ pages */
.hero {
  position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); min-height: 280px;
  border-radius: var(--radius-lg); background: var(--color-accent-100); border: 1px solid var(--color-accent-300); margin-bottom: var(--space-8); overflow: hidden;
}
.hero-copy { position: relative; z-index: 1; max-width: 520px; min-width: 0; }
.hero-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--color-accent-800); background: var(--color-bg); padding: 4px 12px; border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.hero-pill i { font-size: 16px; }
.hero-title { font-size: 26px; margin: 0 0 var(--space-2); color: var(--color-accent-900); }
.hero-lede { font-size: 16px; max-width: 42ch; color: var(--color-accent-900); margin-bottom: var(--space-4); }
.hero-mascot { display: none; position: absolute; top: 3px; right: 70px; height: 285px; width: 190px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 73, 97, .18)); animation: float 3.4s ease-in-out infinite alternate; }
@media (min-width: 1180px) {
  .hero { padding-right: 300px; }
  .hero-title { font-size: 32px; white-space: nowrap; }
  .hero-mascot { display: block; }
}
@media (max-width: 899.98px) {
  .hero { min-height: 0; }
  .hero-title { font-size: 24px; }
}
.list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.sort { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.sort label { margin: 0; white-space: nowrap; }
.sort .input { width: auto; min-width: 180px; }

.cart-head, .cart-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 130px 100px 40px; gap: var(--space-3); }
.cart-head { padding-bottom: var(--space-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); box-shadow: 0 1px 0 var(--color-divider); }
.cart-row { align-items: center; padding: var(--space-4) 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent); }
.cart-prod { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.qty-val { min-width: 34px; text-align: center; }
@media (max-width: 899.98px) {
  .cart-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cart-prod { grid-column: 1 / -1; }
}
.addr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); }
@media (max-width: 480px) { .addr-grid { grid-template-columns: minmax(0, 1fr); } }
.done-icon { font-size: 56px; color: var(--color-accent); }

.track-form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--space-8); }
.track-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.track-total { font-size: 22px; font-weight: 600; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 18px; height: 18px; border-radius: 50%; margin-top: 3px; flex: none; background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-neutral-400); }
.is-done .tl-dot { background: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); }
.tl-line { flex: 1; width: 2px; min-height: 28px; background: var(--color-neutral-300); }
.tl-line.is-done { background: var(--color-accent); }
.tl-line.is-last { background: transparent; }
.tl-body { padding-bottom: var(--space-4); }
.tl-label { font-weight: 600; color: var(--color-neutral-600); }
.is-done .tl-label { color: var(--color-text); }
.is-cur .tl-label { color: var(--color-accent-700); }

.cab-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.cab-designs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 1179.98px) { .cab-designs { grid-template-columns: minmax(0, 1fr); } }
.drop {
  position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1.5px dashed var(--color-neutral-500);
  border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; transition: border-color .2s, background .2s;
}
.drop:hover, .drop.is-over, .drop:focus-within { border-color: var(--color-accent); background: var(--color-accent-100); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop-thumb { width: 72px; height: 72px; flex: none; display: grid; place-items: center; background: var(--color-bg); border-radius: var(--radius-md); overflow: hidden; }
.drop-thumb i { font-size: 30px; color: var(--color-accent); }
.drop-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.est-big { font-size: 26px; font-weight: 600; }
.design-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.addr-add summary { list-style: none; display: inline-flex; }
.addr-add summary::-webkit-details-marker { display: none; }

/* guide article */
.guide { max-width: 1080px; display: flex; flex-direction: column; gap: 96px; padding-bottom: var(--space-8); }
.guide-intro { display: flex; flex-direction: column; gap: var(--space-4); max-width: 780px; }
.kicker-2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-2-700); font-weight: 600; }
.guide-h1 { margin: 0; font-size: 64px; line-height: 1.1; }
.guide-h2 { font-size: 36px; }
.guide-lede { margin: 0; font-size: 20px; line-height: 1.5; color: var(--color-neutral-800); text-wrap: pretty; }
.guide-toc { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-4); }
.guide-toc a { display: flex; align-items: baseline; gap: var(--space-4); padding: 6px 0; color: var(--color-text); font-size: 17px; text-decoration: none; }
.guide-toc a:hover { color: var(--color-accent-700); }
.toc-no { font-variant-numeric: tabular-nums; color: var(--color-accent); font-weight: 700; min-width: 28px; }
.toc-ink { color: var(--color-neutral-700); font-size: 14px; }
.guide-tech { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; scroll-margin-top: 90px; }
#g-compare { scroll-margin-top: 90px; }
.guide-photo { aspect-ratio: 4 / 3; width: 100%; position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.guide-photo img { width: 100%; height: 100%; object-fit: cover; }
.guide-photo figcaption { position: absolute; right: 8px; bottom: 8px; margin: 0; font-size: 11px; background: color-mix(in srgb, var(--color-bg) 85%, transparent); padding: 2px 8px; border-radius: var(--radius-sm); }
.guide-photo figcaption a { color: var(--color-neutral-800); text-decoration: none; }
.photo-ph { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--color-neutral-700); font-size: 14px; }
.photo-ph i { font-size: 32px; }
.inks { display: flex; flex-wrap: wrap; gap: 6px var(--space-3); }
.ink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ink-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 25%, transparent); }
.tech-no { font-size: 44px; font-weight: 700; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.guide-short { margin: 0; font-family: var(--font-serif); font-size: 19px; line-height: 1.5; font-style: italic; color: var(--color-neutral-800); text-wrap: pretty; }
.guide-p { margin: 0; font-size: 16px; line-height: 1.7; max-width: 64ch; text-wrap: pretty; }
.rates { display: grid; grid-template-columns: auto minmax(0, 220px) auto; gap: 8px var(--space-4); align-items: center; font-size: 14px; margin-top: var(--space-2); justify-content: start; }
.seg-bars { display: flex; gap: 3px; }
.seg-bar { flex: 1; height: 6px; border-radius: var(--radius-sm); background: var(--color-neutral-200); }
.seg-bar.is-on { background: var(--color-accent); }
.seg-bar.is-low { background: var(--color-accent-2); }
.mx { min-width: 640px; display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(var(--n), minmax(96px, 1fr)); gap: 4px; font-size: 14px; }
.mx-h { padding: 8px 4px; font-weight: 600; text-align: center; }
.mx-h.text-start { padding-left: 0; }
.mx-name { padding: 8px 0; }
.mx-cell { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-md); font-size: 12px; min-height: 40px; }
.mx-cell i { font-size: 18px; }
.mx-no { color: var(--color-neutral-500); }
.mx-yes { background: var(--color-accent-100); color: var(--color-accent-800); }
.mx-white { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-6); }
.pick { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: var(--color-text); }
.pick:hover { color: var(--color-accent-700); }
.pick > i { font-size: 32px; color: var(--color-accent); }
.pick-q { font-size: 17px; font-weight: 600; line-height: 1.35; }
.pick-a { font-size: 15px; color: var(--color-accent-700); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 899.98px) {
  .guide-h1 { font-size: 40px; }
  .guide-h2 { font-size: 28px; }
  .guide-tech { grid-template-columns: minmax(0, 1fr); }
}

/* breadcrumbs, category intro */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--color-neutral-700); margin-bottom: var(--space-2); }
.crumbs a { color: var(--color-neutral-700); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent-700); text-decoration: underline; }
.crumbs i { font-size: 12px; }
.crumbs [aria-current] { color: var(--color-text); }
.cat-intro { max-width: 70ch; margin: var(--space-2) 0 0; color: var(--color-neutral-800); font-size: 15px; }

/* product page (/stikeri/{slug}) */
.pp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; max-width: 1120px; margin-top: var(--space-3); }
.pp-preview { position: sticky; top: 96px; min-height: 420px; }
.pp-preview .stk { --sz: 240px; }
.pp-preview .stk-rect { --sz: 300px; }
.pp-img { width: 100%; max-width: 420px; height: auto; object-fit: contain; }
.pp-name { font-size: 32px; padding-right: 0; }
.pp-facts { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-4) 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--color-neutral-800); box-shadow: inset 0 1px 0 var(--color-divider); }
.pp-facts li { display: flex; align-items: center; gap: var(--space-2); }
.pp-facts i { font-size: 20px; color: var(--color-accent); flex: none; }
.pp-related { margin-top: var(--space-8); max-width: 1120px; }
.pp-h2 { font-size: 24px; margin: 0 0 var(--space-4); }
.pd-more { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.pcard-link { text-decoration: none; color: var(--color-text); }
.pcard-link .pcard-tile { display: grid; }
.pcard-link:hover .pcard-tile { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pcard-link:hover .pcard-name { color: var(--color-accent-700); }
@media (max-width: 899.98px) {
  .pp { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pp-preview { position: static; min-height: 260px; }
  .pp-preview .stk { --sz: 180px; }
  .pp-name { font-size: 26px; }
}

/* 404 */
.nf { display: flex; align-items: center; gap: var(--space-8); max-width: 820px; padding: var(--space-6) 0; }
.nf-code .stk { transform: rotate(-6deg); }
.nf-search { max-width: 420px; flex: none; width: 100%; }
@media (max-width: 599.98px) { .nf { flex-direction: column; align-items: flex-start; gap: var(--space-4); } .nf-code .stk { --sz: 110px !important; } }

/* 7 ─ motion */
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes float { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-12px) rotate(2deg); } }
@keyframes bump { 30% { transform: scale(1.28) rotate(-10deg); } 65% { transform: scale(.94) rotate(4deg); } }
.is-bump { animation: bump .48s ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}