:root {
  --blue: #1557ff;
  --blue-deep: #0737b9;
  --ink: #101218;
  --muted: #6f7480;
  --paper: #f4f5f7;
  --white: #fff;
  --line: #dfe2e8;
  --lime: #c9ff35;
  --danger: #e43d36;
  --radius: 24px;
  --shadow: 0 22px 60px rgba(13, 25, 58, .11);
}

/* Display face for the two H1s and the watermark. Impact was the previous
   choice and it has no Cyrillic: Windows substituted Arial Black and macOS/
   Android something else again, so the Russian headline rendered in a
   different font on every device. Sofia Sans Condensed ships both subsets,
   so ru and uz look identical everywhere.
   Self-hosted rather than linked from fonts.googleapis.com: the H1 is the
   first thing painted, and a stylesheet on another origin puts a DNS lookup
   plus a round trip in front of it. Two subsets, 26 KB total; the browser
   fetches only the one the page's alphabet needs. */
@font-face {
  font-family: "Sofia Sans Condensed";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/sofia-sans-condensed-900-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/sofia-sans-condensed-900-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 0%, rgba(21, 87, 255, .1), transparent 25rem),
    linear-gradient(180deg, #fafbfc 0, var(--paper) 100%);
  font-family: "Trebuchet MS", "Aptos", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.site-shell { width: min(1180px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 18px; }
.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; }
/* The box matches the mark's own 360×258 aspect ratio (1.395), so `contain`
   letterboxes nothing and the visual size equals the box size. The old 120×82
   was both mismatched and too heavy for a 92px header. */
.brand { display: block; width: 96px; height: 69px; }
.brand img { width: 100%; height: 100%; object-fit: contain; }
.language-switch { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.75); backdrop-filter: blur(8px); }
/* 44px is the minimum comfortable touch target on a phone. */
.language-switch a { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 999px; text-decoration: none; }
.language-switch a.is-active { background: var(--ink); }
.language-flag { width: 25px; height: auto; overflow: hidden; border: 1px solid rgba(16,18,24,.14); border-radius: 3px; box-shadow: 0 2px 5px rgba(13,25,58,.16); }
.language-switch a.is-active .language-flag { border-color: rgba(255,255,255,.42); box-shadow: 0 2px 7px rgba(0,0,0,.3); }

/* Hero height is a conversion cost on a phone: every pixel here pushes the
   catalog down. No min-height, no decorative filler — the content sets the
   height, and on phones only the offer and the three numbers survive. */
.catalog-hero { position: relative; display: flex; align-items: end; padding: 16px 18px 18px; overflow: hidden; color: #fff; border-radius: 24px; background: var(--blue); box-shadow: var(--shadow); }
.catalog-hero::before { content: ""; position: absolute; width: 210px; height: 210px; right: -70px; top: -95px; border: 40px solid rgba(255,255,255,.1); border-radius: 50%; }
/* Watermark, phones excluded. Sofia Sans Condensed is narrower than the Impact
   this used to be set in, so the word stopped bleeding off the right edge and
   landed in the middle of the hero instead — directly behind the lime stat
   figures. There is no room for decoration in a 113px hero anyway. */
.catalog-hero::after { content: "OSON"; display: none; position: absolute; right: -10px; bottom: -30px; color: rgba(255,255,255,.07); font: italic 900 104px/1 "Sofia Sans Condensed", Impact, sans-serif; letter-spacing: .01em; }
.hero-copy { position: relative; z-index: 1; max-width: 650px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 4px; background: var(--lime); border-radius: 4px; }
/* Tracking is positive, not negative: Impact needed tightening because it is
   already narrow, but a condensed face set at -.025em closes the counters and
   the uppercase Cyrillic turns into a wall. .02em opens it without costing a
   line — the face is condensed enough to absorb it at the same font-size. */
.catalog-hero h1 { max-width: 650px; margin: 0; font: italic 900 clamp(32px, 8vw, 66px)/.95 "Sofia Sans Condensed", Impact, "Arial Black", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.catalog-hero h1 i { color: var(--lime); font-style: normal; }
/* The lead is three lines of instruction on a phone ("choose your iPhone,
   the price is on the card") that the grid below states by simply existing.
   Hidden under 700px; the eyebrow keeps the city and the trust claim. */
.hero-lead { display: none; max-width: 540px; margin: 12px 0 0; color: rgba(255,255,255,.93); font-size: 15px; line-height: 1.45; }
/* On phones the three facts are plain text, not pills: a border plus padding
   costs ~66px of width across three tiles, which pushed the longer Uzbek
   labels onto a second row and added 77px of hero height. The pills come back
   at 700px, where there is width to spare. Separators are generated content so
   they are not read out; the dl still exposes each value/label pair. */
.hero-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0 0; padding: 0; }
.hero-stats div { display: flex; align-items: baseline; gap: 4px; }
.hero-stats div + div::before { content: "·"; margin-right: 6px; color: rgba(255,255,255,.5); }
.hero-stats dt { color: var(--lime); font-size: 14px; font-weight: 900; letter-spacing: -.02em; }
.hero-stats dd { margin: 0; color: rgba(255,255,255,.93); font-size: 11px; font-weight: 700; }
/* Ink on lime is 15.9:1 — the strongest pair available in this palette.
   Hidden on phones: at 375px the cards are already on the first screen, so a
   button that scrolls to them costs 70px of hero height and buys nothing. */
.hero-cta { display: none; align-items: center; gap: 9px; min-height: 44px; margin-top: 18px; padding: 0 20px; color: var(--ink); border-radius: 999px; background: var(--lime); font-size: 14px; font-weight: 900; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.hero-orbit { display: none; }

.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 26px 0 60px; }
.device-card { min-width: 0; overflow: hidden; border: 1px solid rgba(16,18,24,.07); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 10px 35px rgba(13,25,58,.06); transition: transform .25s ease, box-shadow .25s ease; }
.device-card:active { transform: scale(.985); }
.card-link { display: block; height: 100%; text-decoration: none; }
.device-photo { position: relative; aspect-ratio: 1/.93; overflow: hidden; background: linear-gradient(145deg, #eceef2, #fff); }
.device-photo::after { content: ""; position: absolute; inset: auto 15% 7% 15%; height: 12%; border-radius: 50%; background: rgba(6,16,45,.13); filter: blur(14px); }
.device-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 16px 12px 8px; transition: transform .35s ease; }
.device-card:hover .device-photo img { transform: translateY(-4px) scale(1.025); }
.sold-stamp { position: absolute; z-index: 4; right: 10px; top: 10px; padding: 7px 10px; color: #fff; border-radius: 999px; background: var(--danger); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: rotate(3deg); }
.sold-stamp-large { right: 22px; top: 22px; padding: 10px 15px; font-size: 12px; }
.card-body { padding: 15px; }
.card-body h2 { margin: 0; font-size: clamp(16px, 4.5vw, 23px); line-height: 1.05; letter-spacing: -.045em; }
.device-brief { min-height: 1.2em; margin: 7px 0 18px; color: var(--muted); font-size: 12px; }
.price-row { display: flex; flex-direction: column; gap: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.price-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.price-row small { color: var(--muted); font-size: 11px; }
.price-row strong { font-size: 21px; letter-spacing: -.05em; }
.installment-preview { flex-wrap: wrap; }
.installment-preview strong { color: var(--blue); font-size: 17px; }
.installment-preview span { width: 100%; color: var(--muted); font-size: 11px; text-align: right; }
.device-card.is-sold { order: 99; opacity: .68; filter: grayscale(.25); }

.back-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 14px 0 22px; color: var(--muted); font-size: 13px; font-weight: 800; text-decoration: none; }
.back-link span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: #fff; }
.back-link span svg { width: 19px; height: 19px; }
.back-link:hover span { border-color: rgba(21,87,255,.3); color: var(--blue); }
.product-layout { display: grid; gap: 22px; padding-bottom: 60px; }
.gallery { min-width: 0; }
.gallery-stage { position: relative; aspect-ratio: 1/1.02; overflow: hidden; border-radius: 28px; background: linear-gradient(145deg, #e9edf4, #fff 60%); box-shadow: var(--shadow); }
.gallery-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateX(12px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.gallery-slide.is-active { opacity: 1; transform: none; }
.gallery-slide img { width: 100%; height: 100%; padding: 32px; object-fit: contain; }
.gallery-arrow { position: absolute; z-index: 3; top: 50%; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; color: var(--ink); border: 0; border-radius: 50%; background: rgba(255,255,255,.88); box-shadow: 0 7px 20px rgba(0,0,0,.1); cursor: pointer; transform: translateY(-50%); }
.gallery-arrow .icon { width: 20px; height: 20px; }
.gallery-prev { left: 12px; }.gallery-next { right: 12px; }
/* The dot itself stays small, but the button keeps a 44px touch target: a 7px
   tap area is unusable on a phone, which is the only device most customers have. */
.gallery-dots { display: flex; justify-content: center; gap: 2px; padding: 7px; }
.gallery-dots button { display: grid; width: 30px; height: 44px; padding: 0; place-items: center; border: 0; background: none; cursor: pointer; }
.gallery-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #c7cad2; transition: width .2s ease, background .2s ease; }
.gallery-dots button.is-active::before { width: 26px; background: var(--blue); }
.product-panel { min-width: 0; }
.product-heading { padding: 5px 2px 25px; }
.product-heading .eyebrow { color: var(--blue); }
.product-heading h1 { margin: 0; font: italic 900 clamp(40px, 12vw, 66px)/.95 "Sofia Sans Condensed", Impact, "Arial Black", sans-serif; letter-spacing: .005em; }
.product-heading > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.passport, .purchase-choice, .flow-panel, .unavailable-panel { padding: 22px; border: 1px solid rgba(16,18,24,.07); border-radius: var(--radius); background: rgba(255,255,255,.94); box-shadow: 0 14px 45px rgba(13,25,58,.07); }
.purchase-choice, .flow-panel { margin-top: 16px; }
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 21px; }
.section-heading > span { display: grid; width: 30px; height: 30px; place-items: center; color: var(--blue); border: 1px solid rgba(21,87,255,.25); border-radius: 50%; font-size: 10px; font-weight: 900; }
.section-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.passport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.passport-grid div { min-width: 0; padding: 14px; background: #fff; }
.passport-grid dt { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.passport-grid dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 800; }
.cash-price { display: flex; align-items: end; justify-content: space-between; margin-top: 19px; }
.cash-price span { color: var(--muted); font-size: 12px; }
.cash-price strong { color: var(--blue); font-size: 35px; letter-spacing: -.06em; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-card { position: relative; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 17px; cursor: pointer; transition: border .2s ease, background .2s ease, transform .2s ease; }
.choice-card:has(input:checked) { color: #fff; border-color: var(--blue); background: var(--blue); transform: translateY(-2px); }
.choice-card:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.choice-card input { position: absolute; opacity: 0; }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { margin-top: 14px; font-size: 14px; }
.choice-card small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.choice-card:has(input:checked) small { color: rgba(255,255,255,.7); }
/* A tinted square holding an inline SVG. The previous version was a 24px text
   glyph, which inherited whatever fallback font the platform chose and sat
   off-centre; a fixed box keeps both cards' icons on the same optical line. */
.choice-mark { display: grid; width: 36px; height: 36px; place-items: center; color: var(--blue); border-radius: 12px; background: rgba(21,87,255,.09); transition: color .2s ease, background .2s ease; }
.choice-mark svg { width: 21px; height: 21px; }
.choice-card:has(input:checked) .choice-mark { color: #fff; background: rgba(255,255,255,.2); }
/* Every icon comes from views/partials/icon.ejs and inherits `currentColor`, so
   one size rule per context is enough — the dark, blue and light buttons need no
   separate icon variants. `flex: none` stops a long label from squashing it. */
.icon { display: block; width: 18px; height: 18px; flex: none; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 13px 18px; border: 0; border-radius: 15px; font-size: 13px; font-weight: 900; text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.button:active { transform: scale(.98); }
.button:disabled { opacity: .35; cursor: not-allowed; }
.button-primary { color: #fff; background: var(--ink); }
.button-primary span, .button-telegram span, .button-light span { margin-left: auto; }
.button-telegram { color: #fff; background: var(--blue); }
.button-light { color: var(--ink); background: #edf0f5; }
.button-wide { width: 100%; margin-top: 14px; background: var(--blue); }
/* 44px tall so the "change choice" link is a comfortable tap target on a phone;
   the negative left padding keeps the text optically aligned with the panel. */
.text-button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; margin: 0 0 8px; color: var(--muted); border: 0; background: none; font-size: 12px; font-weight: 800; cursor: pointer; }
.text-button .icon { width: 15px; height: 15px; }
.flow-lead { margin: -8px 0 23px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.contact-actions { display: grid; gap: 9px; }
.unavailable-panel strong { font-size: 21px; }.unavailable-panel p { color: var(--muted); line-height: 1.5; }

.down-payment-field label, .term-field legend { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 900; }
.money-input { display: flex; align-items: center; overflow: hidden; border: 2px solid var(--ink); border-radius: 16px; background: #fff; }
.money-input span { padding-left: 16px; color: var(--blue); font-size: 23px; font-weight: 900; }
.money-input input { width: 100%; padding: 14px 16px 14px 7px; border: 0; outline: 0; background: transparent; font-size: 24px; font-weight: 900; }
.money-input input::-webkit-outer-spin-button, .money-input input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
/* The visible track stays thin (5px) but the input itself is 44px tall so the
   whole strip is draggable — a 5px-tall slider is nearly impossible to grab on
   a touch screen. Track and thumb are drawn manually because `appearance: none`
   is required to make the element taller than its default control height. */
.payment-range { width: 100%; height: 44px; margin: 6px 0 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.payment-range::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: var(--line); }
.payment-range::-moz-range-track { height: 5px; border-radius: 999px; background: var(--line); }
.payment-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 2px 8px rgba(13,25,58,.28); appearance: none; -webkit-appearance: none; }
.payment-range::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 2px 8px rgba(13,25,58,.28); }
.field-meta { min-height: 30px; color: var(--muted); font-size: 12px; }
.field-error { display: block; margin-top: 4px; color: var(--danger); }
.term-field { min-width: 0; padding: 0; margin: 19px 0; border: 0; }
.month-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.month-options label { cursor: pointer; }.month-options input { position: absolute; opacity: 0; }
.month-options span { display: grid; min-height: 42px; padding: 6px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 11px; font-weight: 900; }
.month-options input:checked + span { color: #fff; border-color: var(--blue); background: var(--blue); }
.quote-loading, .quote-error { padding: 15px; border-radius: 13px; background: #f1f3f7; font-size: 12px; }
.quote-loading span { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid #ccd2df; border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }
.quote-error { color: #8a2c29; background: #fff0ef; }
.quote-card { margin-top: 17px; }
.monthly-hero { margin: 0 -22px; padding: 25px 22px; color: #fff; background: var(--blue); }
.monthly-hero > span { display: block; color: rgba(255,255,255,.72); font-size: 11px; }
.monthly-hero strong { display: block; margin-top: 3px; font-size: 49px; letter-spacing: -.07em; }
.monthly-hero strong b { font-weight: inherit; }.monthly-hero small { font-size: 14px; letter-spacing: 0; }
.quote-lines { margin: 0; padding: 13px 0; }
.quote-lines div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; color: var(--muted); font-size: 11px; }
.quote-lines dd { margin: 0; color: var(--ink); font-weight: 900; }
.quote-lines .quote-total { margin-top: 5px; padding-top: 15px; color: var(--ink); border-top: 1px solid var(--line); font-size: 13px; font-weight: 900; }
/* The disclaimer is the one line that limits what the shown price promises.
   It was the smallest text on the page; it now reads at normal fine-print size. */
.quote-note { padding: 13px; margin: 0; color: #4a515f; border-radius: 12px; background: #eef2fb; font-size: 12px; line-height: 1.5; }
.quote-note-soft { margin-top: 8px; background: #f3f5f9; }
.early-note { display: flex; align-items: center; gap: 6px; color: #39720c; font-size: 11px; font-weight: 800; }
.early-note .icon { width: 13px; height: 13px; flex: none; }
.copy-status { margin: 9px 0 0; color: #39720c; font-size: 11px; text-align: center; }

.empty-state { margin: 30px 0 70px; padding: 60px 24px; text-align: center; border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.empty-state > span { display: block; color: var(--blue); font-size: 50px; }.empty-state h1, .empty-state h2 { margin: 12px 0; }.empty-state p { max-width: 460px; margin: 0 auto 24px; color: var(--muted); line-height: 1.5; }
.unavailable-page { min-height: 54vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 28px 4px 40px; color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; }
/* Footer links are the fallback contact path on a phone, so they get the same
   44px tap height as the buttons instead of the 13px the text alone gives. */
.site-footer div { display: flex; align-items: center; gap: 14px; }
/* Padding, not width: the short "Адрес"/"Manzil" label is only ~32px of text,
   which is below the 44px minimum tap target on a phone. */
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 800; text-decoration: none; }

/* Keyboard focus. Nothing in the stylesheet defined it before, so every
   interactive element relied on the UA default — which is removed outright on
   the elements that set `outline: 0`. :focus-visible keeps mouse clicks clean
   while making the calculator and the contact buttons reachable by keyboard. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Radio inputs are visually hidden, so the ring has to go on their label. */
.choice-card:has(input:focus-visible),
.month-options input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
/* Round controls keep a round ring. */
.language-switch a:focus-visible,
.gallery-dots button:focus-visible,
.gallery-arrow:focus-visible { border-radius: 999px; }
/* A blue ring is invisible on the blue hero and the blue monthly card. */
.catalog-hero a:focus-visible,
.monthly-hero a:focus-visible { outline-color: #fff; }

.reveal { opacity: 0; transform: translateY(14px); animation: reveal .55s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--delay, 0ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 700px) {
  .site-shell { padding: 0 30px; }
  .site-header { height: 112px; }
  .brand { width: 116px; height: 83px; }
  .catalog-hero { padding: 44px 54px 40px; border-radius: 30px; }
  .catalog-hero::before { width: 310px; height: 310px; right: -85px; top: -115px; border-width: 56px; }
  .catalog-hero::after { display: block; right: -12px; bottom: -38px; font-size: 136px; }
  .hero-lead { display: block; margin-top: 18px; font-size: 16px; }
  .hero-stats { gap: 12px; margin-top: 22px; }
  .hero-stats div { gap: 8px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.1); }
  .hero-stats div + div::before { content: none; }
  .hero-stats dt { font-size: 20px; }
  .hero-stats dd { font-size: 12px; }
  .hero-cta { display: inline-flex; margin-top: 22px; padding: 0 26px; font-size: 15px; }
  .hero-orbit { position: absolute; right: 58px; top: 55px; display: block; }
  .hero-orbit span { position: absolute; z-index: 1; right: 44px; top: 44px; font-weight: 900; }
  .hero-orbit div { width: 120px; height: 120px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 38px; }
  .card-body { padding: 20px; }.price-row { gap: 16px; }
  .product-layout { grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); align-items: start; gap: 44px; }
  .gallery { position: sticky; top: 24px; }
  .passport, .purchase-choice, .flow-panel, .unavailable-panel { padding: 28px; }
  .monthly-hero { margin: 0 -28px; padding: 28px; }
}

@media (min-width: 1040px) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-layout { gap: 65px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}