/* Dev Crow Egg · Journey. One design's journey: a dusk sky in the hero, warm paper everywhere else, one amber
   accent (the route) and a teal secondary. Phone first; logical properties throughout so Arabic mirrors. */
:root {
  --paper: #f3eadb; --paper-2: #e9ddc7; --card: #faf4ea; --field: #fffbf4;
  --ink: #23201c; --ink-2: #4a433b; --muted: #6b6157; --line: #dccfb9; --line-2: #c6b58f;
  --amber: #e3a93c; --amber-2: #d5962a; --amber-ink: #8a5a0c; --amber-soft: #f6e4bb;
  --teal: #2b6670; --teal-ink: #245760; --teal-soft: #d9e6e5; --teal-deep: #17313b;
  --sky-1: #1d3e4a; --sky-2: #0d1e26; --on-dark: #f1e8d8; --on-dark-muted: #b4c3c3;
  --ok: #3c7a5c; --bad: #a3402a; --bad-bg: #f7e3dc;
  --gut: 16px; --r-s: 10px; --r: 14px; --r-l: 22px;
  --sh-1: 0 1px 2px rgba(70, 50, 20, .06), 0 10px 26px -16px rgba(70, 50, 20, .3);
  --sh-2: 0 2px 6px rgba(70, 50, 20, .07), 0 24px 50px -24px rgba(70, 50, 20, .4);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --f-body: "Source Sans 3", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-display: "Fraunces", Georgia, serif; --w-display: 500; --lh-display: 1.08;
  --f-arabic: "IBM Plex Sans Arabic";
  --hdr: 60px; --tabbar: 0px;
  /* drawn product art (art.js) */
  --art-shade-dark: #1e1a16; --art-shade-light: #ffffff; --art-paper: #faf4ea; --art-white: #fff; --art-black: #000;
  --art-wood: #c9a27a; --art-leaf: #6f8c69; --art-leaf-light: #86a37c; --art-leaf-dark: #5d7a59; --art-glow: #ffd6a0; --art-glow-2: #ffc98a;
  --art-sand: #d8bf94; --art-cream: #fbf6ee; --art-putty: #e9dfcf; --art-linen-wall: #eee2cf; --art-linen-light: #f8efe2; --art-linen-deep: #e2d2bb;
  --art-mist-wall: #dbe3e6; --art-mist-light: #eef2f3; --art-mist-deep: #c9d4d8; --art-blush-wall: #f0dcd1; --art-blush-light: #f9ede6; --art-blush-deep: #e5cabd;
  --art-oat-wall: #e9dfcc; --art-oat-light: #f6efe2; --art-oat-deep: #dacdb4; --art-oak: #d6b18a; --art-oak-edge: #bf946a; --art-oak-dark: #a77d55;
  --art-ink: #2e2b27; --art-blue: #5f8a93; --art-clay: #d6a28c; --art-pearl: #f3eee6; --art-charcoal: #3b3a3c; --art-shadow: #3a2a1a; --art-lantern-light: #ffe3b0;
  --art-paper-edge: #e3d8c8; --art-box-edge: #b48a60; --art-box: #d8b48c; --art-mustard: #e2c27a; --art-rug: #cfd9dc; --art-cushion: #e6dac6; --art-blue-soft: #9bb6bc;
  --art-graphite: #55535a; --art-tile-line: #d4c3ab; --art-globe: #dfe8ea; --art-button: #2b6670; --art-knob: #e9d29a; --art-nameplate-edge: #ddd2c0; --art-soil: #7a5c43;
  --art-water: #b9cbd4; --art-falcon-1: #d7bb93; --art-falcon-2: #c3a37a; --art-falcon-3: #ad8d64; --art-falcon-4: #e6d1b0; --art-falcon-5: #9a7b55; --art-falcon-beak: #5b4a36;
  --art-vase: #d9b48f; --art-stem: #bfa47a; --art-pod: #e9dcc3; --art-picture: #2b6670; --art-picture-hill: #8fb0b6; --art-dhow-post: #ddd3c3; --art-dhow-hull: #efe9df; --art-dhow-mast: #c7bba8;
  --art-book-pale: #e2d6c2; --art-crow-tail: #2a292b; --art-crow-outline: #262528; --art-crow-wing: #5a585e; --art-crow-beak: #4a4846; --art-pencup: #cf8a6c; --art-stand: #e3d2b8;
  --art-phone-screen: #33465e; --art-phone-sun: #f3d9b0; --art-honey-1: #f1ebe1; --art-honey-2: #e4dacb; --art-honey-3: #ebe3d6; --art-flame: #f2b061; --art-pale-blue: #cfdadd;
  --art-window-sky: #cfe0e6; --art-window-hill: #a9bfc6; --art-sky-top: #bcd0d8; --art-sky-bottom: #f6e3cb; --art-skyline: #b7c5cc; --art-board: #ead9c2; --art-lamp-beam: #fff3d6;
  --art-balcony-wall: #f3e2cc; --art-balcony-light: #bfd2d8; --art-skyline-2: #c3cfd4; --art-skyline-3: #b3c2c8; --art-terrace: #e4d6c2; --art-glow-soft: #ffe2b6; --art-terracotta: #c98a1d;
  --art-nozzle: #ffb36b; --art-door: #5f8a93;
  --logo-house: #2b6670; --logo-egg: #f3eadb; --logo-shine: #e3a93c;
  /* the globe's SVG poster (keep in step with theme.js globe.*) */
  --poster-globe-lit: #2f5f6c; --poster-globe-sea: #1b3f4a; --poster-globe-shade: #0d2129; --poster-globe-grid: #8fc0ca; --poster-globe-land: #e2cfae; --poster-globe-arc: #e0a438; --poster-globe-ring: #fff1c9;
  --mat-pla: #c9a27a; --mat-petg: #2b6670;
  /* See it in your room */
  --rv-bg: #f3eadb; --rv-surface: #faf4ea; --rv-text: #23201c; --rv-muted: #6b6157; --rv-line: #dccfb9; --rv-accent: #2b6670; --rv-accent-text: #fff; --rv-radius: 16px; --rv-font: var(--f-body); --rv-font-display: var(--f-display);
}
html[lang="ar"] { --f-body: "IBM Plex Sans Arabic", "Source Sans 3", system-ui, sans-serif; --f-display: "IBM Plex Sans Arabic", system-ui, sans-serif; --w-display: 600; --lh-display: 1.35; }
html[lang="ar"] * { letter-spacing: 0 !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hdr) + 12px); -webkit-text-size-adjust: 100%; background: var(--paper); }
html:not(.rm) { scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.5 var(--f-body); color: var(--ink); background: var(--paper); padding-bottom: var(--tabbar); }
h1, h2, h3 { font-family: var(--f-display); font-weight: var(--w-display); line-height: var(--lh-display); margin: 0; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 30; }
h1 { font-size: clamp(34px, 7.4vw, 60px); }
h2 { font-size: clamp(26px, 4.6vw, 38px); }
h3 { font-size: 19px; }
p { margin: 0; }
a { color: var(--teal-ink); text-underline-offset: .14em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, dt, address { margin: 0; font-style: normal; }
bdi { unicode-bidi: isolate; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; inset-inline-start: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 8px; }
h1[tabindex="-1"]:focus-visible { outline: none; }   /* headings focused by script after an action, not by the keyboard */
.ico { width: 20px; height: 20px; flex: none; }
html[dir="rtl"] .ico--dir { transform: scaleX(-1); }
.wrap { width: min(1200px, 100% - 2 * var(--gut)); margin-inline: auto; }
.skip { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 100; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; background: var(--ink); color: var(--paper); border-radius: 10px; transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; }

/* ---------- buttons, chips, prices ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; transition: background .18s, color .18s, transform .18s var(--ease), box-shadow .2s; }
.btn--primary { background: var(--amber); color: var(--ink); box-shadow: 0 8px 20px -12px rgba(140, 90, 12, .6); }
.btn--primary:hover { background: var(--amber-2); }
.btn--line { border-color: var(--teal); color: var(--teal-ink); }
.btn--line:hover { background: var(--teal-soft); }
.btn--light { background: var(--on-dark); color: var(--teal-deep); }
.btn--ghost { border-color: rgba(241, 232, 216, .5); color: var(--on-dark); }
.btn--ghost:hover { background: rgba(241, 232, 216, .12); }
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.is-done { background: var(--ok); color: #fff; }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); }
.iconbtn:hover { background: var(--paper-2); }
.mat { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #ecdcc6; color: #6d4c2c; }
.mat--petg { background: var(--teal-soft); color: var(--teal-ink); }
.pr { position: relative; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-variant-numeric: tabular-nums; }
.pr__now { font-weight: 700; }
.pr__was { color: var(--muted); font-size: max(12px, .8em); font-weight: 500; text-decoration-thickness: 1.5px; }
.pr__off { align-self: center; display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 6px; background: var(--amber-ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.pr--hero .pr__now { font-size: 32px; font-weight: 600; font-family: var(--f-display); font-variation-settings: "opsz" 72; }
.pr--hero .pr__was { font-size: 16px; }
.pr--col { flex-direction: column; align-items: flex-end; gap: 2px; }
.rates { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 7px; background: var(--amber-soft); color: var(--amber-ink); font-size: 13px; font-weight: 600; }
.note { padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.note--warn { background: var(--amber-soft); border-color: transparent; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(243, 234, 219, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; gap: 6px; height: var(--hdr); }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); min-height: 44px; margin-inline-end: auto; }
.logo__mark { width: 30px; height: 30px; }
.logo__word { font-family: var(--f-display); font-weight: 600; font-size: 19px; white-space: nowrap; }
.nav { display: none; gap: 4px; margin-inline: 12px auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); background: var(--paper-2); }
.srch { display: none; align-items: center; gap: 6px; height: 42px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--field); border: 1px solid var(--line-2); }
.srch input { border: 0; background: none; width: 150px; min-width: 0; font-size: 16px; outline: none; }
.srch .ico { color: var(--muted); }
.srch button { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--teal-ink); }
.srch button:hover { background: var(--teal-soft); }
.search-open .srch--phone { display: flex; margin: 0 var(--gut) 10px; height: 46px; }
.srch--phone { width: auto; }
.srch--phone input { flex: 1; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper-2); }
.lang button { min-height: 38px; min-width: 44px; padding: 0 10px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--ink-2); }
.lang button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.lang [lang="ar"] { font-family: var(--f-arabic), sans-serif; }
.cartlink { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); }
.cartlink:hover { background: var(--paper-2); }
.badge { position: absolute; top: 3px; inset-inline-end: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--amber-ink); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 19px; text-align: center; }
.badge.is-zero { display: none; }
.badge.is-bump { animation: bump .4s var(--ease); }
@keyframes bump { 50% { transform: scale(1.3); } }
.hdr-search { display: inline-grid; }
.langtoggle { font-weight: 700; font-size: 15px; }
.langtoggle[lang="ar"] { font-family: var(--f-arabic), sans-serif; }
.hdr .lang { display: none; }
@media (min-width: 720px) {
  .hdr-search, .hdr .srch--phone, .search-open .srch--phone, .langtoggle { display: none; }
  .hdr .lang { display: inline-flex; }
  .nav { display: flex; }
  .srch { display: inline-flex; margin-inline-end: 8px; }
}
@media (min-width: 1000px) { .srch input { width: 200px; } }

/* ---------- phone tab bar ---------- */
.tabbar { position: fixed; bottom: 0; inset-inline: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(250, 244, 234, .96); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); backdrop-filter: blur(10px); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; text-decoration: none; color: var(--ink-2); font-size: 12.5px; font-weight: 600; position: relative; }
.tab[aria-current] { color: var(--teal-ink); }
.tab .badge { inset-inline-end: calc(50% - 24px); top: 4px; }
body { --tabbar: calc(58px + env(safe-area-inset-bottom, 0px)); }
.toasts { bottom: calc(var(--tabbar) + 10px); }
@media (min-width: 720px) { .tabbar { display: none; } body { --tabbar: 0px; } }

/* ---------- toasts ---------- */
.toasts { position: fixed; inset-inline: var(--gut); z-index: 90; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; width: min(100%, 440px); padding: 8px 10px 8px 8px; border-radius: 14px; background: var(--ink); color: var(--paper); box-shadow: var(--sh-2); opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .3s var(--ease); pointer-events: auto; }
.toast.is-on { opacity: 1; transform: none; }
.toast__art { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none; }
.toast__art .vig { width: 100%; height: 100%; }
.toast__msg { flex: 1; display: grid; font-size: 15px; line-height: 1.3; }
.toast__msg span { color: #cfc5b5; font-size: 13.5px; }
.toast__btn { min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--amber); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
.toast__btn:hover { background: rgba(255, 255, 255, .08); }
.rm .toast { transition: none; }

/* ---------- sections ---------- */
.sec { padding-block: 44px; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sec__sub { color: var(--muted); margin-top: 6px; max-width: 56ch; }
.sec__link { font-weight: 600; white-space: nowrap; }
@media (min-width: 900px) { .sec { padding-block: 64px; } }

/* ---------- hero: the dusk sky and the globe ---------- */
.sky { position: relative; color: var(--on-dark); background: radial-gradient(120% 80% at 70% 0%, var(--sky-1), var(--sky-2) 70%); overflow: clip; }
.sky::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 40px; background: var(--paper); clip-path: ellipse(60% 100% at 50% 100%); }
.hero { display: grid; gap: 26px; padding: 28px 0 70px; }
.hero__copy { display: grid; gap: 16px; align-content: center; }
.hero h1 { color: var(--on-dark); }
.hero__sub { color: var(--on-dark-muted); font-size: 17px; max-width: 46ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.globe { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; outline-offset: 10px; }
.globe__poster, .globe__canvas { position: absolute; inset: 0; }
.globe__poster svg { width: 100%; height: 100%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); }
.globe__canvas canvas { position: absolute; inset: -10%; width: 120% !important; height: 120% !important; cursor: grab; }
.globe.is-dragging .globe__canvas canvas { cursor: grabbing; }
.globe.is-live .globe__poster { opacity: 0; transition: opacity .5s; }
.globe__labels { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.glabel { position: absolute; top: 0; left: 0; margin: -11px 0 0 12px; padding: 1px 8px; border-radius: 999px; background: rgba(13, 30, 38, .72); color: var(--on-dark); font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1.6; will-change: transform; opacity: 0; }
.glabel.is-flip { margin-left: 0; translate: calc(-100% - 12px) 0; }
.glabel--studio { background: var(--amber); color: var(--ink); margin-top: 8px; }
.tick { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 14px; border-radius: 999px; background: rgba(13, 30, 38, .6); border: 1px solid rgba(241, 232, 216, .18); font-size: 15px; color: var(--on-dark-muted); max-width: 100%; }
.tick b { color: var(--on-dark); white-space: nowrap; }
.tick .km { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 600; }
.tick.is-tick b { animation: tick .5s var(--ease); }
@keyframes tick { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; box-shadow: 0 0 0 0 rgba(227, 169, 60, .5); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(227, 169, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 169, 60, 0); } }
.hint { position: absolute; bottom: -34px; inset-inline-start: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--on-dark-muted); white-space: nowrap; transition: opacity .3s; }
html[dir="rtl"] .hint { translate: 50% 0; }
.globe.is-touched .hint { opacity: 0; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; min-height: 600px; padding: 40px 0 90px; }
  .globe { width: min(100%, 520px); }
}

/* ---------- the route motif: dotted amber line with stations ---------- */
.why { display: grid; gap: 20px; }
.why p { font-size: 18px; max-width: 58ch; color: var(--ink-2); }
.stats { display: grid; gap: 10px; }
.stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; padding: 14px 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stat.is-in, .rm .stat { opacity: 1; transform: none; }
.stat b { font: 600 36px/1 var(--f-display); color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.stat__note { color: var(--muted); font-size: 13.5px; }
@media (min-width: 720px) { .why { grid-template-columns: 1fr 1fr; align-items: start; } .stats { gap: 12px; } }

.stations { position: relative; display: grid; gap: 18px; padding-inline-start: 0; }
.stations::before { content: ""; position: absolute; inset-inline-start: 43px; top: 44px; bottom: 44px; width: 0; border-inline-start: 3px dotted var(--amber); opacity: .8; }
.station { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; }
.station__scene { position: relative; width: 88px; aspect-ratio: 1; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 8px; }
.station__scene::after { content: ""; position: absolute; inset-inline-start: 50%; bottom: -9px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); border: 3px solid var(--paper); translate: -50% 0; }
html[dir="rtl"] .station__scene::after { translate: 50% 0; }
.stscene { width: 100%; height: 100%; }
.station__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: var(--ink); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.station h3 { margin-bottom: 4px; }
.station p { color: var(--ink-2); }
.station__cap { color: var(--amber-ink); font-weight: 600; margin-top: 6px; font-size: 15px; }
.station { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.station.is-in, .rm .station { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .stations { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .stations::before { inset-inline: 12.5% 12.5%; top: 150px; bottom: auto; width: auto; height: 0; border-inline-start: 0; border-top: 3px dotted var(--amber); }
  .station { grid-template-columns: 1fr; justify-items: start; }
  .station__scene { width: 100%; max-width: 260px; aspect-ratio: 4 / 3; padding: 14px; margin-bottom: 18px; }
  .station__scene::after { bottom: -8px; }
}
/* station motion: short, soft loops (none under reduced motion) */
.st-float { animation: stFloat 5s ease-in-out infinite; }
@keyframes stFloat { 50% { transform: translateY(-3px); } }
.st-dot { offset-path: path("M70 56C96 30 122 34 146 50"); animation: stRun 4.5s ease-in-out infinite; }
@keyframes stRun { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.st-pop { transform-origin: 112px 86px; animation: stPop 5s ease-in-out infinite; }
@keyframes stPop { 0%, 30% { transform: scale(0); opacity: 0; } 42%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
.st-nozzle { animation: stNozzle 3.2s ease-in-out infinite alternate; }
@keyframes stNozzle { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
.st-layer { animation: stLayer 6s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); opacity: 0; }
@keyframes stLayer { 0% { opacity: 0; } 12%, 75% { opacity: 1; } 95%, 100% { opacity: 0; } }
.st-van { animation: stVan 4s ease-in-out infinite; }
@keyframes stVan { 50% { transform: translate(6px, -1px); } }
.st-wheel { transform-box: fill-box; transform-origin: center; animation: stWheel 2s linear infinite; }
@keyframes stWheel { to { transform: rotate(360deg); } }
.rm .st-float, .rm .st-dot, .rm .st-pop, .rm .st-nozzle, .rm .st-layer, .rm .st-van, .rm .st-wheel { animation: none; }
.rm .st-dot { offset-distance: 60%; }
.rm .st-pop, .rm .st-layer { opacity: 1; }

/* ---------- shop by category: stall signs, then the goods slide in ---------- */
.signs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 14px 2px 10px; margin: 0 calc(-1 * var(--gut)); padding-inline: var(--gut); scrollbar-width: none; }
.signs::-webkit-scrollbar { display: none; }
.sign { position: relative; flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 12px; border-radius: 4px 4px 14px 14px; background: var(--card); color: var(--ink); border-top: 6px solid var(--c); font-weight: 700; font-size: 15px; box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s; transform-origin: top center; }
.sign::before { content: ""; position: absolute; top: -10px; inset-inline-start: 50%; width: 2px; height: 10px; background: var(--line-2); translate: -50% 0; }
.sign__art { width: 28px; height: 28px; border-radius: 6px; overflow: hidden; background: var(--c); }
.sign__art .vig { width: 100%; height: 100%; }
.sign:hover { transform: translateY(2px); }
.sign[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); transform: translateY(3px); }
.sign:focus-visible { outline-offset: 4px; }
@media (min-width: 720px) { .signs { flex-wrap: wrap; overflow: visible; margin: 0; padding-inline: 2px; } }
.goods { margin-top: 14px; }
.goods__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--ink-2); font-weight: 600; }
.goods__clear { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
.goods__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; transition: opacity .3s var(--ease), transform .35s var(--ease); }
.goods.is-swap .goods__grid { opacity: 0; transform: translateY(14px); transition: none; }
.rm .goods__grid { transition: none; }
.goods__empty { padding: 24px; border-radius: var(--r); background: var(--card); border: 1px dashed var(--line-2); color: var(--ink-2); text-align: center; }
@media (min-width: 720px) { .goods__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .goods__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- product cards and rows ---------- */
.pc { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-l); border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s; }
.pc:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.pc__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }
.pc__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-l) var(--r-l) 0 0; overflow: hidden; background: var(--paper-2); }
.pc__media .vig, .vig { width: 100%; height: 100%; }
.pc__body { display: grid; gap: 3px; padding: 12px 14px 14px; }
.pc__price { font-size: 17px; }
.pc__name { font-weight: 600; line-height: 1.3; }
.pc__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 15px; margin-top: 3px; }
.pc__add { position: absolute; top: 10px; inset-inline-end: 10px; width: 44px; height: 44px; border-radius: 50%; background: rgba(250, 244, 234, .92); color: var(--teal-ink); display: grid; place-items: center; box-shadow: var(--sh-1); }
.pc__add:hover { background: var(--amber); color: var(--ink); }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 260px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 0 14px; margin: 0 calc(-1 * var(--gut)); padding-inline: var(--gut); scrollbar-width: none; }
.row::-webkit-scrollbar { display: none; }
.row > * { scroll-snap-align: start; }
@media (min-width: 720px) { .row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, 1fr); gap: 16px; overflow: visible; margin: 0; padding: 0; } }

/* ---------- seller band, trust, footer ---------- */
.band { display: grid; gap: 22px; padding: 28px var(--gut); border-radius: var(--r-l); background: radial-gradient(120% 90% at 100% 0%, var(--sky-1), var(--sky-2) 75%); color: var(--on-dark); }
.band h2 { color: var(--on-dark); }
.band p { color: var(--on-dark-muted); margin-top: 10px; max-width: 48ch; }
.band__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ex { align-self: center; padding: 18px; border-radius: var(--r); background: rgba(241, 232, 216, .08); border: 1px solid rgba(241, 232, 216, .18); }
.ex__top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--on-dark-muted); margin-bottom: 10px; }
.ex__top b { color: var(--on-dark); }
.ex__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(241, 232, 216, .14); }
.ex__rows dd { font-variant-numeric: tabular-nums; font-weight: 600; }
.ex__rows .is-earn dd { color: var(--amber); font-size: 26px; font-family: var(--f-display); }
@media (min-width: 900px) { .band { grid-template-columns: 1.3fr 1fr; padding: 44px; } }
.trust { display: grid; gap: 12px; }
.trust li { display: grid; grid-template-columns: 24px 1fr; gap: 12px 14px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.trust .ico { color: var(--amber-ink); width: 24px; height: 24px; }
.trust h3 { font: 600 16px/1.35 var(--f-body); }
.trust p { grid-column: 2; color: var(--muted); font-size: 15px; }
@media (min-width: 720px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.foot { margin-top: 40px; padding: 36px 0 32px; background: var(--paper-2); border-top: 1px solid var(--line); color: var(--ink-2); }
.foot__in { display: grid; gap: 28px; }
.foot__brand p { margin-top: 8px; color: var(--muted); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.foot h2 { font: 600 15px/1.4 var(--f-body); margin-bottom: 8px; color: var(--ink); }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.foot li a:hover { color: var(--teal-ink); text-decoration: underline; }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.foot__lang { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 10px; }
.foot .lang button { min-height: 44px; }

/* ---------- crumbs and page heads ---------- */
.crumb { padding: 14px 0 0; font-size: 15px; color: var(--muted); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crumb li { display: inline-flex; align-items: center; gap: 4px; }
.crumb a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
.crumb .ico { width: 16px; height: 16px; }
.pagehead { padding: 18px 0 8px; }
.pagehead p { color: var(--muted); margin-top: 6px; }

/* ---------- product page ---------- */
.rt { display: grid; gap: 0; margin: 18px 0 22px; padding: 16px 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); }
.rt__t { font: 600 14px/1.4 var(--f-body); color: var(--muted); margin-bottom: 10px; }
.rt__stops { display: grid; gap: 0; }
.rt__stop { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-block: 8px; }
.rt__stop::before { content: ""; position: absolute; inset-inline-start: 10px; top: 28px; bottom: -8px; border-inline-start: 2px dotted var(--amber); }
.rt__stop:last-child::before { display: none; }
.rt__dot { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--amber); background: var(--card); margin-top: 1px; }
.rt__stop--studio .rt__dot { background: var(--amber); }
.rt__stop b { display: block; font-weight: 600; }
.rt__stop span { color: var(--muted); font-size: 15px; }
.rt__note { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
@media (min-width: 720px) {
  .rt__stops { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .rt__stop { grid-template-columns: 1fr; gap: 8px; padding-block: 0; }
  .rt__stop::before { inset-inline-start: 28px; inset-inline-end: -16px; top: 10px; bottom: auto; border-inline-start: 0; border-top: 2px dotted var(--amber); }
}
.pdp { display: grid; gap: 24px; padding-bottom: 20px; }
.v3d { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; background: radial-gradient(90% 70% at 50% 40%, #fff9ee, var(--paper-2) 70%, #dfd1b9); border: 1px solid var(--line); }
.v3d__poster, .v3d__canvas { position: absolute; inset: 0; }
.v3d__poster .vig { width: 100%; height: 100%; }
.v3d__canvas canvas { width: 100% !important; height: 100% !important; cursor: grab; }
.v3d.is-live .v3d__poster { opacity: 0; transition: opacity .4s; }
.v3d.is-drawn .v3d__ctrls, .v3d.is-drawn .v3d__hint, .v3d.is-failed .v3d__ctrls { display: none; }
.v3d__ctrls { position: absolute; bottom: 12px; inset-inline-end: 12px; display: flex; gap: 6px; }
.v3d__ctrls button { width: 44px; height: 44px; border-radius: 12px; background: rgba(250, 244, 234, .92); color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-1); }
.v3d__ctrls button[aria-pressed="true"] { background: var(--ink); color: var(--amber); }
.v3d__hint { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: rgba(250, 244, 234, .8); }
.v3d.is-touched .v3d__hint { opacity: 0; transition: opacity .3s; }
.v3d__fail { position: absolute; bottom: 12px; inset-inline: 12px; text-align: center; font-size: 15px; color: var(--muted); }
.v3d__toast { position: absolute; top: 12px; inset-inline-start: 50%; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13.5px; opacity: 0; transition: opacity .2s; pointer-events: none; }
html[dir="rtl"] .v3d__toast { translate: 50% 0; }
.v3d__toast.is-on { opacity: 1; }
.buy { display: grid; gap: 12px; }
.buy__maker { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 15px; }
.buy__maker .ico { width: 18px; height: 18px; color: var(--amber-ink); }
.buy h1 { font-size: clamp(28px, 5vw, 40px); }
.buy__card { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); }
.buy__label { font-weight: 600; font-size: 15px; color: var(--ink-2); }
.matrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.matrow__note { color: var(--muted); font-size: 15px; }
details.petg { margin-top: 8px; font-size: 15px; }
details.petg summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: var(--teal-ink); font-weight: 600; list-style: none; }
details.petg summary::-webkit-details-marker { display: none; }
details.petg p { color: var(--ink-2); margin: 6px 0; }
.swatches { display: flex; gap: 10px; margin-top: 8px; }
.swatch { position: relative; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch__c { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(35, 32, 28, .2); transition: transform .15s; }
.swatch input:checked + .swatch__c { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.swatch input:focus-visible + .swatch__c { outline: 3px solid var(--teal); outline-offset: 3px; }
.pod { display: flex; align-items: center; gap: 8px; color: var(--amber-ink); font-weight: 600; font-size: 15px; }
.qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper { display: inline-flex; align-items: center; border-radius: 999px; background: var(--paper-2); }
.stepper button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; color: var(--ink); }
.stepper button:hover:not(:disabled) { background: var(--line); }
.stepper button:disabled { color: var(--line-2); cursor: default; }
.stepper .ico { width: 18px; height: 18px; }
.stepper output, .stepper .num { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.buy__acts { display: grid; gap: 10px; }
.rv-note { color: var(--muted); font-size: 15px; }
.pinfo, .specs { margin-top: 24px; }
.pinfo h2, .specs h2 { font-size: 22px; margin-bottom: 8px; }
.pinfo p { color: var(--ink-2); margin-bottom: 8px; max-width: 60ch; }
.specs dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.specs dt { color: var(--muted); }
.specs dd { font-weight: 600; text-align: end; }
@media (min-width: 720px) { .buy__acts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .pdp { grid-template-columns: 1.05fr .95fr; gap: 40px; } .v3d { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--hdr) + 16px); } }

/* ---------- sell page ---------- */
.sh { display: grid; gap: 28px; padding: 28px 0 10px; }
.sh__sub { font-size: 18px; color: var(--ink-2); max-width: 50ch; margin-top: 14px; }
.nos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nos li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.nos .ico { width: 16px; height: 16px; color: var(--bad); }
.sh__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rtpick { padding: 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); display: grid; gap: 12px; }
.rtpick label { font-weight: 600; }
.rtpick select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--field); font-size: 16px; }
.rtmap { width: 100%; height: auto; }
.rtmap text { font-family: var(--f-body); font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 6px; stroke-linejoin: round; }
.rt__km { font: 600 30px/1 var(--f-display); color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.rtpick__out { display: grid; gap: 4px; }
.rtpick__out span { color: var(--ink-2); }
.rtpick__note { color: var(--muted); font-size: 15px; }
@media (min-width: 900px) { .sh { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.steps { display: grid; gap: 10px; counter-reset: step; }
.pstep { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.pstep__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--amber-soft); color: var(--amber-ink); font-weight: 700; }
.pstep.is-done .pstep__n { background: var(--amber); color: var(--ink); }
.pstep__t { font: 600 16px/1.35 var(--f-body); }
.pstep__d { color: var(--muted); font-size: 15px; margin-top: 2px; }
.pstep__live { display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--teal-ink); }
.pstep__live.is-err { color: var(--bad); }
.pstep__live.is-wait { color: var(--muted); font-weight: 500; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.earn { padding: 22px 20px; border-radius: var(--r-l); background: var(--teal-deep); color: var(--on-dark); display: grid; gap: 6px; }
.earn__k { color: var(--on-dark-muted); font-weight: 600; }
.earn__v { font: 600 clamp(44px, 9vw, 64px)/1 var(--f-display); color: var(--amber); font-variant-numeric: tabular-nums; }
.earn.is-err .earn__v { font-size: 26px; color: var(--on-dark); }
.earn__rows { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(241, 232, 216, .16); }
.earn__rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--on-dark-muted); }
.earn__rows dd { color: var(--on-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.earn .rates { background: rgba(227, 169, 60, .18); color: var(--amber); }
.form-card { padding: 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); display: grid; gap: 22px; }
.fstep__h { display: flex; align-items: center; gap: 10px; font: 600 17px/1.3 var(--f-body); margin-bottom: 10px; }
.fstep__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: var(--ink); font-size: 15px; font-weight: 700; }
.drop { padding: 14px 16px; border-radius: 12px; border: 1.5px dashed var(--line-2); background: var(--field); display: grid; gap: 2px; color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.drop b { color: var(--ink); font-weight: 600; }
.files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; }
.file { position: relative; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--field); cursor: pointer; }
.file input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.file:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.file:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.file__art { grid-row: span 2; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; }
.file__art .vig { width: 100%; height: 100%; }
.file__name { font-weight: 600; font-size: 15px; }
.file__fn { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.est { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.est .ico { color: var(--ok); width: 18px; height: 18px; margin-top: 2px; }
.est.is-reading .ico { color: var(--muted); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; }
.matopt { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--field); cursor: pointer; }
.matopt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.matopt:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.matopt:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.matopt span { color: var(--muted); font-size: 15px; }
.mat-help { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; }
.price-field { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--field); font-size: 22px; font-weight: 600; }
.price-field input { flex: 1; width: 0; min-width: 0; align-self: stretch; border: 0; background: none; outline: none; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-field.is-err { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.price-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.field-hint { color: var(--muted); font-size: 15px; margin-top: 6px; }
.err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 15px; font-weight: 600; }
.err .btn { min-height: 36px; padding: 0 12px; background: var(--card); color: var(--bad); border-color: var(--bad); }
.res__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.res__head h3 { font: 600 16px/1.3 var(--f-body); }
.res dl div, .bd dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.res dd, .bd dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.res .is-earn dd { color: var(--amber-ink); }
.res .is-dim { color: var(--muted); }
.bd summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--teal-ink); }
.bd dt small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
.bd .is-total { font-weight: 700; }
.how-est { padding: 16px 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.how-est h3 { font: 600 16px/1.3 var(--f-body); margin-bottom: 6px; }
.how-est p { color: var(--ink-2); font-size: 15px; }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1.3fr; align-items: start; } .calc-side { display: grid; gap: 16px; position: sticky; top: calc(var(--hdr) + 16px); } }
.mg { border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); }
/* phones: the row name on its own line, PLA and PETG side by side under their headings (a wide table would zoom the page out) */
.mg__heads, .mg__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.mg__heads { border-top: 0; align-items: end; position: sticky; top: var(--hdr); background: var(--card); z-index: 1; }
.mg__heads > span:first-child { display: none; }
.mg__rh { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .mg__heads, .mg__row { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .mg__heads { position: static; }
  .mg__heads > span:first-child { display: block; }
  .mg__rh { grid-column: auto; }
}
.mg__h { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #efe2cf; }
.mg__h--petg { background: var(--teal-soft); }
.mg__h b { font-size: 18px; }
.mg__h span { color: var(--ink-2); font-size: 15px; }
.mg__rh { font-weight: 600; }
.mg__c { color: var(--ink-2); font-size: 15px; }
.mg__notes { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 720px) { .mg__notes { grid-template-columns: 1fr 1fr; } }
.sell-lower { display: grid; gap: 16px; }
.rules, .scta { padding: 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); }
.rules p { color: var(--ink-2); margin: 8px 0 14px; }
.rules h3 { font: 600 15px/1.3 var(--f-body); color: var(--bad); margin-bottom: 6px; }
.rules li { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.rules li .ico { width: 18px; height: 18px; color: var(--bad); }
.scta { background: var(--amber-soft); border-color: transparent; display: grid; gap: 8px; justify-items: start; }
.scta p { color: var(--ink-2); }
@media (min-width: 900px) { .sell-lower { grid-template-columns: 1.3fr 1fr; } }

/* ---------- cart and checkout: the order's route ---------- */
.prog { position: relative; margin: 20px 0 10px; }
.prog ol { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.prog::before, .prog__fill { content: ""; position: absolute; top: 11px; inset-inline: 12.5%; height: 3px; border-radius: 2px; background: var(--line-2); }
.prog__fill { background: var(--amber); inset-inline-end: auto; width: 0; transition: width .6s var(--ease); z-index: 1; }
.rm .prog__fill { transition: none; }
.prog li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); text-align: center; }
.prog li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--line-2); background: var(--paper); }
.prog li.is-done::before, .prog li[aria-current]::before { border-color: var(--amber); }
.prog li.is-done::before { background: var(--amber); }
.prog li[aria-current] { color: var(--ink); font-weight: 600; }
.order { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.olist { display: grid; gap: 10px; }
.oline { display: grid; grid-template-columns: 84px 1fr; grid-template-areas: "art info" "art price" "ctrl ctrl"; gap: 6px 14px; padding: 14px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); }
.oline.is-new { animation: flash 1.2s var(--ease); }
@keyframes flash { 0% { background: var(--amber-soft); } }
.oline__art { grid-area: art; width: 84px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.oline__info { grid-area: info; display: grid; gap: 2px; }
.oline__name { font: 600 16px/1.3 var(--f-body); }
.oline__name a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.oline__name a:hover { text-decoration: underline; }
.oline__by, .oline__spec { color: var(--muted); font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oline__sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); vertical-align: -2px; margin-inline-end: 4px; }
.oline__price { grid-area: price; font-size: 17px; }
.oline__each { display: block; color: var(--muted); font-size: 13.5px; font-weight: 400; }
.oline__ctrl { grid-area: ctrl; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.oline__rm { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--ink-2); font-weight: 600; }
.oline__rm:hover { background: var(--bad-bg); color: var(--bad); }
.oline__rm .ico { width: 18px; height: 18px; }
.oempty { padding: 32px 20px; border-radius: var(--r-l); background: var(--card); border: 1px dashed var(--line-2); text-align: center; display: grid; gap: 12px; justify-items: center; }
.oempty .ico { width: 36px; height: 36px; color: var(--amber-ink); }
.oempty p { color: var(--ink-2); }
.osum { padding: 20px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); display: grid; gap: 12px; }
.osum__t { font: 600 18px/1.3 var(--f-body); }
.osum__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.osum__rows dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.osum__rows .is-save dd { color: var(--ok); }
.osum__rows .is-deliv dt small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.osum__rows .is-deliv dd { font-weight: 500; color: var(--ink-2); font-size: 15px; }
.osum__rows .is-total { font-size: 17px; font-weight: 700; border-top-width: 2px; }
.osum__note { color: var(--muted); font-size: 15px; }
.osum__trust { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.osum__trust li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.osum__trust .ico { width: 20px; height: 20px; color: var(--amber-ink); }
.onext { padding: 20px; border-radius: var(--r-l); background: var(--amber-soft); }
.onext__t { font: 600 18px/1.3 var(--f-body); margin-bottom: 12px; }
.onext__steps { display: grid; gap: 10px; }
.onext__steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
.onext__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--card); color: var(--amber-ink); }
.onext__txt { display: grid; }
.onext__txt b { font-weight: 600; }
.onext__txt span { color: var(--ink-2); font-size: 15px; }
@media (min-width: 900px) {
  .order { grid-template-columns: 1.4fr 1fr; }
  .oline { grid-template-columns: 96px 1fr auto; grid-template-areas: "art info price" "art ctrl ctrl"; }
  .oline__art { width: 96px; }
  .oline__ctrl { justify-content: flex-start; gap: 18px; }
  .osum { position: sticky; top: calc(var(--hdr) + 16px); }
  .onext { grid-column: 1; }
}
/* checkout form */
.ck-form { display: grid; gap: 24px; }
.ck-sec { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); }
.ck-sec__t { display: flex; align-items: center; gap: 10px; font: 600 18px/1.3 var(--f-body); }
.ck-sec__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: var(--ink); font-size: 15px; font-weight: 700; }
.ck-sec__help { color: var(--muted); font-size: 15px; margin-top: -8px; }
.fld { display: grid; gap: 6px; }
.fld__label { font-weight: 600; font-size: 15px; }
.fld__opt { color: var(--muted); font-weight: 400; }
.fld__in { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--field); font-size: 16px; }
.fld__in:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.fld.is-err .fld__in, .fld.is-err .fld__box { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.fld__box { display: flex; align-items: center; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--field); }
.fld__box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.fld__box .fld__in { border: 0; box-shadow: none; flex: 1; }
.fld__pre { padding-inline-start: 14px; color: var(--muted); font-weight: 600; }
.fld__ta { min-height: 72px; resize: vertical; }
.fld__help { color: var(--muted); font-size: 15px; }
.fld__err { display: flex; gap: 6px; align-items: flex-start; color: var(--bad); font-size: 15px; font-weight: 600; }
.fld__err .ico { width: 18px; height: 18px; margin-top: 2px; }
.fld-row { display: grid; gap: 14px; }
@media (min-width: 600px) { .fld-row { grid-template-columns: 1fr 1fr; } }
.ck-check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; cursor: pointer; min-height: 44px; }
.ck-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--teal); }
.ck-pay, .ck-privacy { color: var(--ink-2); font-size: 15px; }
.ck-errs { margin: 0; }
.ck-lines { display: grid; gap: 10px; }
.ckl { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; }
.ckl__art { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.ckl__txt { display: grid; gap: 2px; min-width: 0; }
.ckl__name { font-weight: 600; color: inherit; text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; }
.ckl__name:hover { text-decoration: underline; }
.ckl__meta { color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ckl__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-pod { color: var(--amber-ink); font-weight: 600; font-size: 15px; }
.ck-sum__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ck-sum__head a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ck-done { display: grid; gap: 20px; padding: 20px 0; }
.ck-done__hero { display: grid; gap: 10px; justify-items: start; }
.ck-done__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ok); color: #fff; }
.ck-done__ico .ico { width: 30px; height: 30px; }
.ck-done__num { display: grid; gap: 2px; color: var(--muted); }
.ck-done__num b { font: 600 32px/1.1 var(--f-display); color: var(--ink); }
.ck-done__grid { display: grid; gap: 16px; }
.ck-done__box { padding: 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); display: grid; gap: 10px; }
.ck-done__box h2 { font: 600 17px/1.3 var(--f-body); }
.ck-done__box address { line-height: 1.6; color: var(--ink-2); }
.ck-done__end { display: grid; gap: 12px; justify-items: start; }
@media (min-width: 900px) { .ck-done__grid { grid-template-columns: 1fr 1fr; } }