/* =====================================================================
   meta-design: tokens + structure
   ---------------------------------------------------------------------
   This file is skin-independent. It holds:
     1. design tokens for the light and dark modes (data-mode on <html>)
     2. structural layout that every skin shares (grids, sticky bar,
        graphic sizing, switcher chrome)
   Decoration (colours, borders, radii, type) belongs to a skin; see
   skins.js. Native is the default skin and lives there too.
   ===================================================================== */

:root {
  /* brand palette, mode-independent */
  --amber: #F0A030;
  --amber-deep: #D98A12;
  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --t: .25s ease;
  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 72rem;

  /* light mode tokens */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #1B2430;
  --granite: #2A3540;
  --fog: #EEF1F4;
  --fog-deep: #D8DFE5;
  --muted: #5F6D79;
  --amber-tint: #FCEFD9;
  --ok: #1F7A4D;
  --err: #B3261E;
  --shadow: 0 10px 30px rgba(27, 36, 48, .08);
  --shadow-sm: 0 1px 2px rgba(27, 36, 48, .05), 0 6px 18px rgba(27, 36, 48, .07);
  --shadow-md: 0 2px 4px rgba(27, 36, 48, .06), 0 14px 34px rgba(27, 36, 48, .13);
  --shadow-glow: 0 8px 26px rgba(240, 160, 48, .38);

  /* graphics tokens (room + map) */
  --g-wall: #EEF1F4;
  --g-floor: #D8DFE5;
  --g-skirt: #C9D3DC;
  --g-line: #2A3540;
  --g-night: #2A3540;
  --g-night-deep: #1B2430;
  --g-paper: #FFFFFF;
  --g-cloth: #DCE3E9;
  --g-cloth-2: #E9EDF1;
  --g-wood: #B59A7C;
  --g-wood-deep: #A98A6B;
  --g-rubber: #B4433A;
  --g-card: #E3BE86;
  --g-card-deep: #C79A5A;
  --g-sea: #D6E2EA;
  --g-river: #B8CAD8;
  --g-label: #7A8B99;
  --g-steam: #AEBAC4;

  /* icon tokens (used by the icon renderers) */
  --icon-stroke: var(--granite);
  --icon-fill: var(--amber);
  --icon-fill-2: var(--amber-tint);
  --icon-depth: #7A4C0A;
  --icon-shadow: rgba(27, 36, 48, .18);

  /* declarations: the default icon style for the page; a skin or a theme
     can override, and any icon can be overridden individually with
     --icon-<name>, e.g.  --icon-box: "3d-dpd";  */
  --icon-style: line;

  color-scheme: light;
}

html[data-mode="dark"] {
  --bg: #0F151C;
  --surface: #161E27;
  --ink: #EEF1F4;
  --granite: #C9D3DC;
  --fog: #1E2731;
  --fog-deep: #2E3A47;
  --muted: #9AA7B3;
  --amber-tint: #3A2C15;
  --ok: #4CC38A;
  --err: #F28B82;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);

  --g-wall: #1E2731;
  --g-floor: #161E27;
  --g-skirt: #2E3A47;
  --g-line: #C9D3DC;
  --g-night: #0B1016;
  --g-night-deep: #05080B;
  --g-paper: #EEF1F4;
  --g-cloth: #33414F;
  --g-cloth-2: #3D4C5B;
  --g-wood: #8A7159;
  --g-wood-deep: #6F5A46;
  --g-rubber: #B4433A;
  --g-card: #C79A5A;
  --g-card-deep: #9A7440;
  --g-sea: #1C2A36;
  --g-river: #33506A;
  --g-label: #8A9AA8;
  --g-steam: #5F6D79;

  --icon-stroke: #C9D3DC;
  --icon-depth: #5A3706;
  --icon-shadow: rgba(0, 0, 0, .5);

  color-scheme: dark;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .5);
  --shadow-glow: 0 8px 28px rgba(240, 160, 48, .3);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:not([data-md-ready]) body { opacity: 0; }
html { overflow-x: clip; } /* the 100vw hero is a scrollbar's width too wide on desktop */
body { margin: 0; background: var(--bg); color: var(--ink); transition: background var(--t), color var(--t); }
button { font: inherit; }
svg text { font-family: var(--font); }
[hidden] { display: none !important; }

/* ---------- structure shared by every skin ---------- */
/* ---------- layout (the tonymagnetic pattern) ----------
   A fixed, full-width header over a full-height hero; a wide shell for the
   header, hero copy and footer; a narrower column for the page body; sections
   separated by generous, viewport-scaled space. Everything here is structure
   and behaviour; colour and type come from the tokens and the active skin. */
:root {
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section: clamp(3.5rem, 6vw, 6rem);
  --top-h: 5.25rem;
  --shell: 86rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
html { scroll-padding-top: calc(var(--top-h) + 1rem); }
.md-shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.md-skip { position: fixed; inset-inline-start: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: var(--bg); padding: .75rem 1.25rem; text-decoration: none; border-radius: 999px; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.md-skip:focus { clip-path: none; opacity: 1; pointer-events: auto; }

/* header */
.md-top { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--ink); transition: background .5s var(--ease), box-shadow .5s var(--ease), color .3s var(--ease); }
.md-top.is-scrolled, .md-top--solid {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent);
}
/* over the hero photograph the bar runs in white until the page scrolls */
html[data-page="home"] .md-top:not(.is-scrolled) { color: #FFFFFF; }
html[data-page="home"] .md-top:not(.is-scrolled) .md-brand-place { color: #FFFFFF; opacity: .78; }
html[data-page="home"] .md-top:not(.is-scrolled) [data-md~="nav"] { color: #FFFFFF; }
html[data-page="home"] .md-top:not(.is-scrolled) .md-seg, html[data-page="home"] .md-top:not(.is-scrolled) .md-sel select { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #FFFFFF; }
html[data-page="home"] .md-top:not(.is-scrolled) .md-seg button { color: rgba(255, 255, 255, .8); }
html[data-page="home"] .md-top:not(.is-scrolled) .md-seg button[aria-pressed="true"] { background: #FFFFFF; color: #1B2430; }
html[data-page="home"] .md-top:not(.is-scrolled) .md-sel > svg, html[data-page="home"] .md-top:not(.is-scrolled) .md-sel::after { color: #FFFFFF; border-color: #FFFFFF; }
html[data-page="home"] .md-top:not(.is-scrolled) .md-sel select option { color: #1B2430; background: #FFFFFF; }
.md-top-inner { height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.md-brand { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: inherit; flex: none; }
.md-brand-name { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.md-brand-place { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.md-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.md-nav-list { display: flex; gap: clamp(1.25rem, 2.5vw, 3rem); list-style: none; margin: 0; padding: 0; }
[data-md~="nav"] { position: relative; text-decoration: none; color: inherit; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; padding-bottom: .3rem; white-space: nowrap; }
[data-md~="nav"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
[data-md~="nav"]:hover::after, [data-md~="nav"][aria-current="page"]::after { transform: scaleX(1); }
.md-menu-toggle { display: none; position: relative; width: 2.75rem; height: 2.75rem; background: none; border: 0; cursor: pointer; color: inherit; padding: 0; flex: none; }
.md-menu-toggle span, .md-menu-toggle::before, .md-menu-toggle::after { content: ""; position: absolute; left: .5rem; width: 1.75rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease), opacity .3s var(--ease); }
.md-menu-toggle::before { top: .9rem; }
.md-menu-toggle span { top: 1.37rem; }
.md-menu-toggle::after { top: 1.85rem; }
.md-menu-toggle[aria-expanded="true"]::before { transform: translateY(.47rem) rotate(45deg); }
.md-menu-toggle[aria-expanded="true"] span { opacity: 0; }
.md-menu-toggle[aria-expanded="true"]::after { transform: translateY(-.48rem) rotate(-45deg); }
@media (max-width: 56rem) {
  :root { --top-h: 4.25rem; }
  .md-menu-toggle { display: block; order: 3; }
  .md-nav { position: fixed; inset: var(--top-h) 0 0; z-index: 59; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2rem; padding: 2rem var(--gutter) 3rem; background: var(--bg); color: var(--ink); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
  .md-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .md-nav-list { flex-direction: column; gap: 1.25rem; }
  .md-nav-list [data-md~="nav"] { font-size: 1.4rem; letter-spacing: .04em; text-transform: none; font-weight: 700; }
  html[data-page="home"] .md-top:not(.is-scrolled) .md-nav.is-open, html[data-page="home"] .md-top:not(.is-scrolled) .md-nav.is-open [data-md~="nav"] { color: var(--ink); }
  html[data-page="home"] .md-top:not(.is-scrolled) .md-nav.is-open .md-seg, html[data-page="home"] .md-top:not(.is-scrolled) .md-nav.is-open .md-sel select { background: var(--surface); border-color: var(--fog-deep); color: var(--ink); }
  html[data-page="home"] .md-top:not(.is-scrolled) .md-nav.is-open .md-seg button { color: var(--muted); }
  html[data-page="home"] .md-top:not(.is-scrolled) .md-nav.is-open .md-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  html[data-page="home"] .md-top:not(.is-scrolled) .md-nav.is-open .md-sel > svg, html[data-page="home"] .md-top:not(.is-scrolled) .md-nav.is-open .md-sel::after { color: var(--muted); border-color: var(--muted); }
  html .md-top.menu-open, html[data-page="home"] .md-top.menu-open:not(.is-scrolled), html[data-page="home"] .md-top.menu-open:not(.is-scrolled) .md-brand-place { background: var(--bg); color: var(--ink); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent); transition: none; }
  html[data-page="home"] .md-top.menu-open:not(.is-scrolled) .md-brand-place { background: none; box-shadow: none; color: var(--muted); }
  body.menu-open { overflow: hidden; }
  .md-switcher { flex-wrap: wrap; }
}

/* hero: full height, full bleed, copy lower-left inside the shell */
.md-slides { position: relative; width: 100vw; margin-inline-start: calc(50% - 50vw); min-height: min(100svh, 56rem); isolation: isolate; overflow: hidden; background: var(--granite); color: #FFFFFF; display: flex; }
.md-slides-track { position: absolute; inset: 0; z-index: -2; }
.md-slides-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 21, 24, .82) 0%, rgba(20, 21, 24, .45) 42%, rgba(20, 21, 24, 0) 78%),
              linear-gradient(180deg, rgba(20, 21, 24, .55) 0%, rgba(20, 21, 24, .18) 32%, rgba(20, 21, 24, .85) 100%); }
.md-slides-copy { position: relative; width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--top-h) + 4rem) 0 clamp(2.5rem, 6vw, 5rem); }
.md-slides-copy [data-md~="eyebrow"] { color: #FFFFFF; opacity: .82; }
.md-slides-copy [data-md~="h1"] { color: #FFFFFF; font-size: clamp(2.8rem, 7.5vw, 7rem); line-height: .92; letter-spacing: -.03em; margin: 0 0 clamp(1.25rem, 3vw, 2.25rem); max-width: 14ch; text-wrap: balance; font-variation-settings: "opsz" 96; }
.md-slides-copy [data-md~="lead"] { color: #FFFFFF; max-width: 38ch; font-size: clamp(1rem, 1.4vw, 1.2rem); margin: 0; }
.md-slides-copy [data-md~="terms"] { color: #FFFFFF; opacity: .8; max-width: 52ch; margin: .75rem 0 0; }
.md-slides-foot { margin-top: clamp(1.75rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; justify-content: space-between; border-top: 1px solid rgba(251, 249, 244, .3); padding-top: 1.25rem; }
.md-slides-items { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 24rem; }
.md-slides-nav { display: flex; align-items: center; gap: 8px; }
@media (max-width: 56rem) {
  .md-slides { min-height: min(100svh, 44rem); }
  .md-slides-copy { padding-top: calc(var(--top-h) + 3rem); }
  .md-slides-copy [data-md~="terms"] { display: none; }
  .md-slides-items { flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .md-slides-items::-webkit-scrollbar { display: none; }
}

/* page body */
.md-main { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); padding-bottom: 120px; }
html[data-page]:not([data-page="home"]) .md-main { padding-top: var(--top-h); }
.md-page-heading { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2rem, 4.5vw, 4rem); border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.md-page-heading [data-md~="h1"] { font-size: clamp(2.4rem, 6vw, 5rem); line-height: .95; letter-spacing: -.03em; margin: 0 0 clamp(1rem, 2vw, 1.5rem); max-width: 16ch; text-wrap: balance; font-variation-settings: "opsz" 96; }
[data-md~="eyebrow"] { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--amber-deep); margin-bottom: clamp(.75rem, 1.5vw, 1.25rem); }
html[data-mode="dark"] [data-md~="eyebrow"] { color: var(--amber); }

/* footer */
.md-foot { padding: clamp(2.5rem, 4.5vw, 4rem) 0 2rem; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); }
.md-foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.md-foot-about { max-width: 34rem; }
.md-foot-brand { font-weight: 800; font-size: clamp(2.25rem, 5vw, 5rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 1rem; font-variation-settings: "opsz" 96; }
.md-foot-tag { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.md-foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; align-content: start; }
.md-foot-links a { color: inherit; text-decoration: none; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.md-foot-links a:hover { text-decoration: underline; }
.md-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.md-langhint { display: block; }
.md-langhint:empty { display: none; }
.md-langhint:not(:empty) { position: fixed; top: calc(var(--top-h) + .5rem); left: 50%; transform: translateX(-50%); z-index: 58; }
.md-langhint a { display: inline-block; background: var(--amber-tint); color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.md-langhint button { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; }

.md-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; padding: 24px 0 8px; }
.md-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.md-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.md-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.md-kits { display: grid; gap: 12px; }
.md-addons { display: grid; gap: 8px; }
.md-section { padding: calc(var(--section) * .5) 0 .5rem; }
@media (max-width: 720px) {
  .md-hero, .md-cols, .md-steps { grid-template-columns: 1fr; }
  .md-hero { gap: 18px; }
}
@media (max-width: 460px) { .md-two { grid-template-columns: 1fr; } }

/* graphics */
md-graphic { display: block; }
md-graphic svg { display: block; width: 100%; height: auto; direction: ltr; }
md-graphic[name="room"] svg { border-radius: 18px; background: var(--g-wall); }
md-graphic[name="map"] svg { max-width: 300px; margin: 0 auto; }
md-graphic[name="room"] .g-arrival, md-graphic[name="room"] .g-winter { opacity: 0; transition: opacity var(--t); }
md-graphic[name="room"][state~="arrival"] .g-arrival, md-graphic[name="room"][state~="winter"] .g-winter { opacity: 1; }
md-graphic[name="room"] .g-base { opacity: 1; transition: opacity var(--t); }
md-graphic[name="room"][state~="arrival"] .g-base { opacity: 0; }
md-graphic[name="map"] .stop circle { transition: r var(--t), fill var(--t); }
md-graphic[name="map"] .stop text { font-size: 12px; fill: var(--g-label); }
md-graphic[name="map"] .stop.on circle { fill: var(--amber); r: 9; }
md-graphic[name="map"] .stop.on text { fill: var(--ink); font-weight: 700; }
md-graphic[name="map"] .anywhere { opacity: 0; transition: opacity var(--t); }
md-graphic[name="map"][state~="anywhere"] .anywhere { opacity: 1; }

/* icons: every renderer produces <md-icon><svg/></md-icon> */
md-icon { display: inline-block; width: 1em; height: 1em; line-height: 0; vertical-align: -0.15em; }
md-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
md-icon .md-ico--photo { display: block; width: 100%; height: 100%; }
md-icon .md-ico--photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
md-icon[size="s"] { width: 24px; height: 24px; }
md-icon[size="m"] { width: 34px; height: 34px; }
md-icon[size="l"] { width: 44px; height: 44px; }
/* geometry sheet: shapes inherit fill/stroke from the <use> that instantiates them */
#md-icon-defs rect, #md-icon-defs circle, #md-icon-defs ellipse { fill: var(--md-shape-fill, none); }
#md-icon-defs path { fill: var(--md-path-fill, none); }

/* packages */
md-package { display: inline-block; }
md-package[name="PaymentGateway"] { display: block; }
.md-pay { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 12px 20px; border: 0; cursor: pointer; font-size: 16px; line-height: 1.2; }
.md-pay svg { width: 22px; height: 22px; flex: none; }
.md-pay .md-pay-amount { font-weight: 800; }
.md-pay-note { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.md-pay[data-provider="monobank"] { background: #111111; color: #FFFFFF; }
.md-pay[data-provider="stripe"] { background: #635BFF; color: #FFFFFF; }
.md-pay[data-provider="paypal"] { background: #FFC439; color: #003087; }
.md-pay[data-provider="none"] { background: var(--fog); color: var(--ink); }
.md-pay[data-provider="checkout"] { background: var(--ink); color: var(--bg); }

/* switcher (mode / language / skin) */
.md-switcher { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-switcher { gap: 6px; flex-wrap: nowrap; }
.md-seg { display: inline-flex; border: 2px solid var(--fog-deep); border-radius: 999px; padding: 2px; background: var(--surface); }
.md-seg button { border: 0; background: transparent; color: var(--muted); border-radius: 999px; width: 34px; height: 30px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.md-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.md-seg button:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }
.md-seg svg { width: 18px; height: 18px; }
.md-switcher .md-ico use { stroke: currentColor; }
.md-sel { position: relative; display: inline-flex; align-items: center; }
.md-sel select {
  appearance: none; -webkit-appearance: none; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 2px solid var(--fog-deep); border-radius: 999px; padding: 6px 30px 6px 34px; cursor: pointer; max-width: 170px;
}
.md-sel select:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }
.md-sel > svg { position: absolute; left: 11px; width: 16px; height: 16px; pointer-events: none; color: var(--muted); }
.md-sel::after { content: ""; position: absolute; right: 13px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); pointer-events: none; }
[dir="rtl"] .md-sel select { padding: 6px 34px 6px 30px; }
[dir="rtl"] .md-sel > svg { left: auto; right: 11px; }
[dir="rtl"] .md-sel::after { right: auto; left: 13px; }
.md-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header switcher: compact on the desktop bar, full-size inside the phone menu */
.md-switcher { flex: 0 0 auto; }
.md-sel select { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 72rem) and (min-width: 56.01rem) {
  .md-sel select { max-width: 44px; color: transparent; padding-inline: 34px 0; }  /* icon-only: the flag and the brush say enough */
  .md-sel::after { display: none; }
}
@media (max-width: 56rem) {
  .md-nav .md-switcher { order: 2; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 10px; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } }

/* =====================================================================
   Elevation and flow. Cards lift off the live wallpaper with gentle shadows,
   interactive ones rise on hover, the order steps are numbered, and the
   reserve button glows: a path down the page and into the order.
   ===================================================================== */
body [data-md~="kit"], body [data-md~="item"], body [data-md~="addon"], body [data-md~="compare"], body [data-md~="storage"], body [data-md~="step"],
body [data-md~="faq-item"], body [data-md~="done"], body .md-card, body .md-cta, body .md-langhint a, body [data-md~="nudge"] {
  box-shadow: var(--shadow-sm); transition: box-shadow var(--t), transform var(--t), border-color var(--t), background var(--t);
}
html[data-wallpaper] [data-md~="item"]:not(.winter):not([data-state~="on"]), html[data-wallpaper] [data-md~="step"], html[data-wallpaper] [data-md~="compare"],
html[data-wallpaper] [data-md~="storage"], html[data-wallpaper] [data-md~="faq-item"], html[data-wallpaper] .md-card { background: var(--surface); }
body label[data-md~="kit"]:hover, body button[data-md~="item"]:hover, body [data-md~="addon"]:hover, body .md-card:hover, body [data-md~="faq-item"]:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
body [data-md~="kit"][data-state~="on"] { box-shadow: var(--shadow-md), 0 0 0 3px var(--amber-tint); }
[data-md~="sticky"] { box-shadow: 0 -8px 30px rgba(27, 36, 48, .1); }
html[data-mode="dark"] [data-md~="sticky"] { box-shadow: 0 -8px 30px rgba(0, 0, 0, .5); }
[data-md~="sticky"] [data-md~="btn"].primary, .md-cta [data-md~="btn"].primary { box-shadow: var(--shadow-glow); }
[data-md~="sticky"] [data-md~="btn"].primary:hover, .md-cta [data-md~="btn"].primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow), var(--shadow-md); }
[data-md~="field"] input, [data-md~="field"] select, [data-md~="field"] textarea { box-shadow: var(--shadow-sm); }

/* the order form is a wizard: one numbered step on screen at a time (form[data-step]); the indicator above it */
form#order .md-section[data-step] { display: none; }
form#order[data-step="1"] .md-section[data-step="1"], form#order[data-step="2"] .md-section[data-step="2"], form#order[data-step="3"] .md-section[data-step="3"] { display: block; }
.md-wizard { list-style: none; margin: calc(var(--section) * .5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.md-wizard li { display: block; }
.md-wizard button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--fog-deep); border-radius: 12px; background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; text-align: start; cursor: pointer; box-shadow: var(--shadow-sm); }
.md-wizard button i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: inline-grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; background: var(--fog); color: var(--ink); }
.md-wizard li[aria-current] button { color: var(--ink); border-color: var(--amber); }
.md-wizard li[aria-current] button i, .md-wizard li.is-done button i { background: var(--amber); color: #1B2430; }
.md-wizard li.is-done button { color: var(--ink); }
.md-wizard button:disabled { cursor: default; opacity: .6; }
@media (max-width: 560px) { .md-wizard button span { display: none; } .md-wizard li[aria-current] button span { display: inline; } .md-wizard { grid-template-columns: auto auto 1fr; } .md-wizard li[aria-current] { grid-column: span 1; } .md-wizard li:not([aria-current]) button { width: auto; } }
.md-sticky-btns { display: flex; align-items: center; gap: 8px; }
.md-parent-hint { margin-top: 12px; }
#winter-add-price { white-space: nowrap; font-size: .9em; }
.md-trust { padding-bottom: 0; }
.md-trust [data-md~="compare"] { margin-top: 14px; }
.md-group { margin-top: 20px !important; margin-bottom: 0 !important; }
form#order .md-section > [data-md~="h2"] { display: flex; align-items: center; gap: 12px; }
form#order .md-section > [data-md~="h2"]::before { content: attr(data-n); flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--amber); color: #1B2430; font-size: 15px; font-weight: 800; display: inline-grid; place-items: center; box-shadow: var(--shadow-glow); }

/* scroll cue in the hero: a soft bounce toward the first step */
.md-scrollcue { display: inline-flex; align-items: center; gap: 8px; background: var(--amber); color: #1B2430; border: 0; border-radius: 999px; padding: 9px 16px 9px 18px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-glow); white-space: nowrap; }
.md-scrollcue svg { width: 16px; height: 16px; animation: md-nudge 2.2s ease-in-out infinite; }
@keyframes md-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .md-scrollcue svg { animation: none; } label[data-md~="kit"]:hover, button[data-md~="item"]:hover, [data-md~="addon"]:hover, .md-card:hover { transform: none; } }