/* Customer order page (/order) and status page. Phone first. Every colour, size and duration comes from
   /shared/tokens.css (semantic roles only); see the reference at the top of that file. */
:root { --top-h: 64px; --bar-h: 76px; --wrap: 1120px; --gutter: 16px;
  /* the notch / rounded corners in landscape (viewport-fit=cover): content never sits under them */
  --sa-l: max(var(--gutter), env(safe-area-inset-left, 0px)); --sa-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px); }
@media (min-width: 768px) { :root { --gutter: 24px; } }
/* Type: FiraGO (Georgian by Akaki Razmadze, SIL OFL — /fonts/FiraGO-OFL.txt), subset to Latin + Georgian, for all text;
   Cormorant stays only for the Latin wordmark and the variety names (the logo's hand). Customer page only. */
@font-face { font-family: "FiraGO"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/firago-regular.woff2) format("woff2"); }
@font-face { font-family: "FiraGO"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/firago-medium.woff2) format("woff2"); }
@font-face { font-family: "FiraGO"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/firago-semibold.woff2) format("woff2"); }
@font-face { font-family: "FiraGO"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/firago-bold.woff2) format("woff2"); }
@font-face { font-family: "VAZA Order Display"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant-latin.woff2) format("woff2");
  size-adjust: 116%; unicode-range: U+0041-005A, U+0061-007A, U+00C0-00FF, U+0131, U+0152-0153, U+2018-201E; }
@font-face { font-family: "VAZA Order Display"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/firago-medium.woff2) format("woff2");
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
:root { --font: "FiraGO", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "VAZA Order Display", "FiraGO", "Noto Sans Georgian", Georgia, serif; }
/* Erik Kennedy / Vitaly Friedman: nothing that scrolls into view or gets focus may hide under the sticky header. */
html { scroll-padding-top: calc(var(--top-h) + var(--sa-t) + 64px); scroll-padding-bottom: calc(var(--bar-h) + 24px); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--sa-l); padding-right: var(--sa-r); }
.wrap.narrow { max-width: calc(680px - 2 * var(--gutter) + var(--sa-l) + var(--sa-r)); }
.skip:focus { position: fixed; left: 8px; top: 8px; width: auto; height: auto; clip: auto; z-index: var(--z-skip); background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: var(--r-pill); }
.eyebrow { margin: 0 0 var(--s-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold); flex-shrink: 0; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; padding-top: var(--sa-t); z-index: var(--z-header); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.3) blur(10px); -webkit-backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.top-in { display: flex; align-items: center; justify-content: space-between; min-height: var(--top-h); gap: var(--s-3); }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); color: var(--ink); text-decoration: none; }
.brand img { width: 40px; height: 40px; margin-left: -4px; }
.wm { font: 600 27px/1 var(--brand); letter-spacing: .14em; margin-right: -.14em; color: var(--ink); padding-top: 2px; }
.call { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; transition: border-color var(--dur-2), background-color var(--dur-2); }
.call svg { color: var(--accent); }
/* hover only where there is a mouse: on a phone a tapped button would keep the hover look ("sticky hover") */
@media (hover: hover) { .call:hover, .btn.ghost:hover, .kind:hover { border-color: var(--accent-line); } }
/* touch: no text selection or iOS callout on a long press, no double-tap zoom, a visible press */
.call, .kind, .btn, .step, .brand { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.step input { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
.call:active, .kind:active { background-color: var(--surface-3); }

/* ---------- hero — editorial: a quiet eyebrow, one headline, three blooms; facts, not pills ---------- */
.hero-text { min-width: 0; }
.hero h1 { overflow-wrap: break-word; }
.hero { position: relative; display: grid; gap: var(--s-4); margin: var(--s-4) 0 var(--s-2); padding: var(--s-5) var(--s-5) var(--s-5); border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--petal-soft) 92%, transparent) 0%, transparent 62%), linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 55%, var(--bg)) 100%);
  border: 1px solid var(--line); }
.hero h1 { font: var(--fw-semibold) var(--fs-display)/1.14 var(--font); letter-spacing: -.012em; text-wrap: balance; }
.lead { color: var(--muted); margin: var(--s-2) 0 var(--s-4); max-width: 34ch; font-size: var(--fs-md); line-height: var(--lh-snug); }
.promise { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.promise li { display: inline-flex; align-items: center; gap: 7px; }
.shopline > span:last-child { white-space: nowrap; }
.shopline { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
/* a returning florist: the pitch shrinks to one line so the price list starts higher */
.hero.compact { padding-block: var(--s-4); }
.hero.compact .lead, .hero.compact .promise, .hero.compact .eyebrow { display: none; }
.hero.compact h1 { font-size: var(--fs-2xl); }
.hero.compact .shopline { margin-top: var(--s-2); }
.hero.compact .hero-art { display: none; }
.hero.compact h1, .hero.compact .hero-text { padding-right: 0; }
@media (min-width: 768px) { .hero.compact { grid-template-columns: 1fr; padding: var(--s-5) var(--s-6); } }
.promise svg { color: var(--green); flex-shrink: 0; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--green-soft); box-sizing: content-box; }
/* three round blooms on photo tiles; multiply melts the white studio background into the tile */
.hero-art { position: absolute; z-index: -1; right: 6px; top: 6px; width: 132px; height: 116px; pointer-events: none; }
.bloom { position: absolute; display: block; border-radius: 50%; background: var(--photo-tile); overflow: hidden; box-shadow: 0 0 0 3px var(--surface), var(--shadow-1); }
.bloom img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: var(--photo-filter); }
.b1 { width: 72px; height: 72px; right: 10px; top: 22px; }
.b2 { width: 52px; height: 52px; right: 70px; top: 10px; }
.b3 { width: 40px; height: 40px; right: 62px; top: 70px; }
.hero h1 { padding-right: 112px; }
/* the small white bloom reaches down to the lead's first line on phones: only that line steps aside (a one-line float) */
.hero .lead::before { content: ""; float: right; width: 92px; height: 1.3em; }
.hero .eyebrow { display: none; }
@media (min-width: 560px) { .hero .eyebrow { display: flex; } .hero h1 { padding-right: 0; } .hero .lead::before { display: none; } .hero-text { padding-right: 140px; } }
@media (max-width: 374px) { .hero-art { display: none; } .hero h1 { padding-right: 0; } .hero .lead::before { display: none; } .hero { padding: var(--s-5) var(--s-4) var(--s-4); } }
@media (min-width: 768px) {
  .hero { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; margin-top: var(--s-5); padding: var(--s-7) var(--s-7); }
  .hero-text { padding-right: 0; }
  .lead { font-size: var(--fs-lg); max-width: 40ch; }
  .hero-art .bloom { box-shadow: 0 0 0 4px var(--surface), var(--shadow-2); }
  .hero-art { position: relative; z-index: 0; right: auto; top: auto; width: 300px; height: 220px; }
  .b1 { width: 168px; height: 168px; right: 8px; top: 18px; }
  .b2 { width: 112px; height: 112px; right: 160px; top: 0; }
  .b3 { width: 90px; height: 90px; right: 150px; top: 124px; }
  .hero-art::before { content: ""; position: absolute; right: -24px; top: -30px; width: 280px; height: 280px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
}

/* ---------- notices & toast ---------- */
.notice { margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--surface-2); line-height: var(--lh-snug); }
.notice.ok, .notice.info, .notice.error { display: flex; gap: 10px; align-items: flex-start; }
.notice svg { flex-shrink: 0; margin-top: 1px; }
.notice.error { background: var(--red-soft); color: var(--red); }
.notice.error strong, .notice.error .btn { color: var(--ink); }
.notice.ok { background: var(--green-soft); color: var(--ink); }
.notice.ok svg { color: var(--green); }
.notice.info svg { color: var(--accent); }
#status.error { flex-wrap: wrap; align-items: center; justify-content: space-between; font-weight: var(--fw-semibold); }
/* the "only N in stock" line floats above the sticky bar, where the thumb is */
#status:not(.error) { --tx: -50%; position: fixed; z-index: var(--z-toast); left: 50%; bottom: calc(var(--bar-h) + 22px + var(--sa-b)); transform: translateX(-50%); width: min(calc(100% - 32px), 520px); margin: 0; padding: 12px 18px; border-radius: var(--r-lg); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); animation: rise var(--dur-3) var(--ease-out); }
.repeat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px var(--s-3); margin: var(--s-3) 0; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.repeat p { margin: 0; flex: 1 1 200px; font-size: var(--fs-sm); color: var(--muted); }
.repeat strong { display: block; color: var(--ink); font-size: var(--fs-md); }
.repeat-what { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); overflow-wrap: anywhere; }
.repeat-meta { display: block; margin-top: 2px; }
.repeat-link { color: var(--accent); font-weight: var(--fw-semibold); text-underline-offset: 3px; }
#editing { background: var(--petal-soft); border-color: color-mix(in srgb, var(--petal) 55%, var(--line)); margin-top: var(--s-4); box-shadow: none; }

/* ---------- loading ---------- */
.skeleton { height: 236px; border-radius: var(--r-lg); margin: var(--s-3) 0; background: linear-gradient(100deg, var(--surface-2) 40%, color-mix(in srgb, var(--surface-2) 50%, var(--surface)) 50%, var(--surface-2) 60%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
@keyframes rise { from { transform: translate(var(--tx, 0), 12px); opacity: 0; } }

/* ---------- catalogue — a sticky kind filter for 30 varieties; less, but better ---------- */
#catalog { display: grid; gap: var(--s-4); margin-top: var(--s-1); }
@media (min-width: 720px) { #catalog { grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; } #catalog > :not(.variety) { grid-column: 1 / -1; } }
@media (min-width: 960px) { #catalog { gap: var(--s-5); } }
.kinds { position: sticky; top: calc(var(--top-h) + var(--sa-t)); z-index: var(--z-sticky); display: flex; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(-1 * var(--sa-r)) 0 calc(-1 * var(--sa-l)); padding: 10px var(--sa-r) 10px var(--sa-l); scroll-padding-inline: var(--sa-l) var(--sa-r); background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.kinds::-webkit-scrollbar { display: none; }
.kind { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px 0 16px; font-size: var(--fs-btn); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-weight: var(--fw-semibold); cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.kind:not(:has(.n)) { padding-right: 16px; }
.kind[aria-pressed="true"], .kind[aria-pressed="true"]:active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.kind[aria-pressed="true"] .n { background: color-mix(in srgb, var(--accent-ink) 20%, transparent); color: inherit; }

.variety { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.v-head { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); }
.v-photo { flex-shrink: 0; width: 88px; height: 88px; border-radius: var(--r); background: var(--photo-tile); overflow: hidden; }
.v-photo img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: var(--photo-filter); }
.v-title { min-width: 0; }
.v-kind { margin: 0 0 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .02em; }
.v-head h2 { font: var(--fw-semibold) 25px/1.15 var(--font-display); letter-spacing: .005em; overflow-wrap: anywhere; }
.v-spec { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }
@media (min-width: 768px) { .v-photo { width: 104px; height: 104px; } .v-head h2 { font-size: 27px; } }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row { position: relative; display: grid; grid-template-columns: minmax(64px, max-content) 1fr auto; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px 8px var(--s-4); border-bottom: 1px solid var(--line); transition: background-color var(--dur-2) var(--ease); }
.row:last-child { border-bottom: 0; }
/* Von Restorff: what's in the order stands out while scrolling 30 varieties — a petal wash and a leaf mark */
.row.has { background: var(--petal-soft); }
.row.has::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.len { font-weight: var(--fw-bold); font-size: var(--fs-lg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.price { font-weight: var(--fw-bold); font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price small { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-xs); }
/* Refactoring UI: only the exceptions get colour — "in stock" stays quiet, "few left" and "sold out" speak up */
.lvl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 20px; }
.lvl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lvl.in { display: none; }   /* every listed length is in stock (out-of-stock ones are not shown) */
.lvl.low, .lvl.out { padding: 0 8px 0 7px; border-radius: var(--r-pill); }
.lvl.low { color: var(--amber); background: var(--amber-soft); }
.lvl.out { color: var(--red); background: var(--red-soft); }
.row.out .len, .row.out .price { color: var(--muted); }
.row.out .step { opacity: .5; }

/* stepper: − number + ; "+" invites in leaf colour */
.step { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--surface-2); transition: background-color var(--dur-2), border-color var(--dur-2); }
.row.has .step { background: var(--surface); border-color: var(--accent-line); }
.step button { width: var(--tap); height: var(--tap); border: 0; background: none; color: var(--ink); border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--dur-1), transform var(--dur-1); }
.step button svg { width: 20px; height: 20px; }
.step [data-d="1"]:not(:disabled) { color: var(--accent); }
@media (hover: hover) { .step button:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } }
.step button:not(:disabled):active { transform: scale(.9); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.step button:disabled { opacity: .3; cursor: not-allowed; }
.step input { width: 40px; height: var(--tap); text-align: center; border: 0; background: none; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; appearance: textfield; border-radius: var(--r-xs); }
.row:not(.has) .step input { color: var(--muted); font-weight: var(--fw-semibold); }
.step input::-webkit-outer-spin-button, .step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.step input:focus-visible { outline-offset: -2px; }

/* ---------- sticky bar — the total is the thing; one obvious next step ---------- */
.bar { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-bar); padding: 0 max(10px, env(safe-area-inset-right, 0px)) calc(10px + var(--sa-b)) max(10px, env(safe-area-inset-left, 0px)); pointer-events: none; animation: bar-in var(--dur-3) var(--ease-out); }
@keyframes bar-in { from { transform: translateY(110%); } }
.bar-in { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--bar-h); max-width: calc(var(--wrap) - 2 * var(--gutter) + 20px); padding: 10px 10px 10px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.bar-sum { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bar-sum strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bar-sum span { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.bar-sum strong { white-space: nowrap; }
.bar .btn { min-height: 52px; padding-inline: 22px 18px; flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
.bar-sum { flex: 0 0 auto; }   /* the total never slides under the button; the button's label wraps instead */
#next::after { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform var(--dur-2) var(--ease); }
@media (hover: hover) { #next:hover::after { transform: translateX(2px); } }
:root { --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
main { padding-bottom: calc(var(--bar-h) + 48px + var(--sa-b)); }
/* typing a quantity on a phone: the bar steps aside so it never sits on the keyboard or over the field being typed in
   (order.js sets .kb while a quantity field has focus on a touch screen); it comes back with the new total on "Done". */
.kb .bar, .kb #status:not(.error) { visibility: hidden; }

/* ---------- buttons ---------- */
.btn { min-height: var(--btn-h); padding: 0 22px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-btn); font-weight: var(--fw-bold); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; text-align: center; line-height: 1.3; transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-1); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 1px 2px rgb(0 0 0 / .12); }
@media (hover: hover) { .btn.primary:hover:not(:disabled) { background: var(--accent-hover); } }
.btn.primary:active:not(:disabled) { background: var(--accent-hover); }
.btn.ghost:active:not(:disabled), .btn.quiet:active { background-color: var(--surface-3); }
.btn.primary:disabled { opacity: .6; cursor: wait; }
.btn.ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn.quiet { background: none; color: var(--muted); padding-inline: 14px; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 4px; }
@media (hover: hover) { .btn.quiet:hover { color: var(--red); } }
.btn.danger { background: var(--red); color: var(--surface); }
.btn.danger:disabled { opacity: .6; cursor: wait; }
.btn.small { min-height: var(--tap); padding: 0 16px; font-size: var(--fs-sm); }

/* ---------- checkout — short form, labels on top, the order summary beside it on big screens ---------- */
.checkout { margin: var(--s-5) 0 0; }
.co-head { margin-bottom: var(--s-4); }
.checkout h2 { font: var(--fw-semibold) var(--fs-3xl)/1.2 var(--font); letter-spacing: -.01em; outline: none; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.co-aside { display: grid; gap: var(--s-3); align-content: start; }
/* phones: summary, then the form, then "what happens next" — the form is never three screens down */
@media (max-width: 959px) { .co-aside { display: contents; } .next-box { order: 3; } }
@media (min-width: 960px) {
  .co-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-6); align-items: start; }
  .co-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--top-h) + 16px); }
  #form { grid-column: 1; grid-row: 1; }
}
.next-box { padding: var(--s-4); border-radius: var(--r-lg); background: var(--accent-soft); }
.next-t { font-weight: var(--fw-bold); font-size: var(--fs-sm); margin: 0 0 var(--s-2); }
.next { margin: 0; padding: 0; list-style: none; counter-reset: n; font-size: var(--fs-sm); line-height: var(--lh-snug); display: grid; gap: var(--s-2); }
.next li { counter-increment: n; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.next li::before { content: counter(n); width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--accent); font-weight: var(--fw-bold); font-size: var(--fs-xs); display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 1px var(--accent-line) inset; }
.summary { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-1) var(--s-4); box-shadow: var(--shadow-1); }
.summary .line > :first-child { min-width: 0; overflow-wrap: anywhere; }
.summary .line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 11px 0; border-bottom: 1px solid var(--line); line-height: var(--lh-snug); }
.summary .line > :last-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.summary .line:last-child { border-bottom: 0; border-top: 1px solid var(--ink); margin-top: -1px; font-weight: var(--fw-bold); font-size: var(--fs-lg); padding: 14px 0 12px; }
.summary .q { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
#form { padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
@media (min-width: 640px) { #form { padding: var(--s-5); } }
.grid { display: grid; gap: 0 var(--s-4); }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } .grid > .f { justify-content: flex-end; } }
.f { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--s-4); border: 0; padding: 0; min-width: 0; }
.f > span, .f legend { font-weight: var(--fw-semibold); font-size: var(--fs-sm); padding: 0; line-height: var(--lh-snug); }
.f small { font-weight: var(--fw-regular); color: var(--muted); font-size: var(--fs-xs); }
.f .req { color: var(--petal-ink); }
.f input, .f select, .f textarea { min-height: calc(var(--field-h) + 4px); padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); width: 100%; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
@media (hover: hover) { .f input:hover, .f select:hover { border-color: var(--ink); } }
.f input::placeholder { color: var(--faint); opacity: 1; }
.f input:focus, .f select:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.f input:focus-visible, .f select:focus-visible { outline: none; }
.f select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.f textarea { resize: vertical; }
.f [aria-invalid="true"], .f [aria-invalid="true"]:focus { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.f-err { display: flex; gap: 6px; align-items: flex-start; color: var(--red); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.f-err::before { content: "!"; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--red); color: var(--surface); font-size: 12px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.check { display: flex; gap: var(--s-3); align-items: center; min-height: var(--tap); font-size: var(--fs-sm); cursor: pointer; margin-bottom: var(--s-1); }
.check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.fine { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; margin: var(--s-2) 0 var(--s-4); }
.err { color: var(--red); background: var(--red-soft); padding: 12px 14px; border-radius: var(--r-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.actions .primary { flex: 1 1 180px; min-height: 52px; }
.send-t { font-variant-numeric: tabular-nums; white-space: nowrap; }
#send[aria-busy="true"] .send-t { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.foot { margin: var(--s-8) 0 0; padding: var(--s-5) 0 var(--s-2); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); display: grid; gap: 2px; position: relative; }
.foot::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--gold) inset; }
.foot:empty { display: none; }
.foot strong { color: var(--ink); font: 600 22px/1.2 var(--brand); letter-spacing: .06em; margin-bottom: 4px; }
.foot a { color: var(--accent); font-weight: var(--fw-semibold); min-height: var(--tap); display: inline-flex; align-items: center; justify-self: start; font-variant-numeric: tabular-nums; }

/* ---------- status page — where you are, what happens next, what you can still do ---------- */
.hero-title { font: var(--fw-semibold) var(--fs-3xl)/1.2 var(--font); letter-spacing: -.01em; margin: var(--s-5) 0 var(--s-1); }
/* columns 1 : 1.5 : 1 so the long middle word never breaks; the track runs between the three dot centres */
.steps { position: relative; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 0; margin: var(--s-5) 0 var(--s-4); padding: var(--s-5) var(--s-2) var(--s-4); list-style: none; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.steps::before { content: ""; position: absolute; top: calc(var(--s-5) + 17px); left: 16%; right: 16%; height: 2px; border-radius: 2px; background: var(--line); }
.steps::after { content: ""; position: absolute; top: calc(var(--s-5) + 17px); left: 16%; width: 30%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 20%, var(--line))); }
.steps.all-done::after { width: 68%; background: var(--green); }
.steps li { position: relative; z-index: 1; text-align: center; font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
@media (min-width: 480px) { .steps li { font-size: var(--fs-sm); } }
.steps .dot { position: relative; width: 36px; height: 36px; margin: 0 auto var(--s-2); border-radius: 999px; border: 2px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; }
.steps .done { color: var(--ink); font-weight: var(--fw-bold); }
.steps .done .dot { background: var(--green); border-color: var(--green); color: var(--surface); }
.steps [aria-current="step"]:not(:last-child) + li .dot { border-color: var(--accent); border-style: dashed; }
.steps [aria-current="step"]:not(:last-child) + li .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s var(--ease) infinite; }
.steps [aria-current="step"]:not(:last-child) + li { color: var(--ink); font-weight: var(--fw-semibold); }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
.card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-4) var(--s-4) var(--s-3); margin: var(--s-4) 0; box-shadow: var(--shadow-1); }
.card h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--s-1); }
.card .summary { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin: var(--s-1) 0 0; padding-top: var(--s-3); border-top: 1px dashed var(--line); color: var(--muted); font-size: var(--fs-sm); }
.meta b { color: var(--ink); font-weight: var(--fw-semibold); }
.meta.who { border-top: 0; padding-top: var(--s-1); overflow-wrap: anywhere; }
.notice.stale { display: flex; gap: 8px; align-items: center; margin-top: 0; font-size: var(--fs-sm); color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.row-actions.main { margin: var(--s-4) 0; }
.row-actions.main .primary { flex: 1 1 220px; min-height: 52px; }
.help { display: grid; gap: var(--s-3); padding-bottom: var(--s-4); background: var(--accent-soft); border-color: transparent; box-shadow: none; }
.help p { margin: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.help .row-actions .btn { flex: 1 1 140px; border-color: transparent; }
.help .btn svg { color: var(--accent); }
.confirm { margin: var(--s-3) 0 0; padding: var(--s-4); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--red) 45%, var(--line)); background: var(--red-soft); animation: rise var(--dur-2) var(--ease-out); }
.confirm p { margin: 0 0 var(--s-3); line-height: var(--lh-snug); }
.confirm .row-actions .btn { flex: 1 1 auto; white-space: nowrap; }
.after { margin: var(--s-5) 0 0; text-align: center; }

/* Narrow phones (320px) and 200% zoom: the stepper never covers the price, the header never scrolls sideways,
   and on a short screen only the header stays put. */
@media (max-width: 374px) {
  :root { --gutter: 12px; }
  .row { grid-template-columns: 46px 1fr auto; gap: 6px; padding-inline: 12px 6px; }
  .len { font-size: var(--fs-md); }
  .row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .step input { width: 32px; }
  .price { white-space: normal; }
  .call { padding: 0 12px; }
  .call span { display: none; }
  .wm { font-size: 23px; }
  .v-photo { width: 72px; height: 72px; }
  .v-head { gap: var(--s-3); }
  .v-head h2 { font-size: 22px; }
  .bar-in { padding-left: 14px; }
  .bar .btn { padding-inline: 16px 14px; }
}
/* Very narrow: a 320px phone with Android's font size at 130% (≈ 250 CSS px) or 200% zoom. Length and price stack
   on the left, the full-size stepper stays on the right; the headline and the bar shrink instead of overflowing. */
@media (max-width: 309px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 0; padding-block: 10px; }
  .len { grid-column: 1; grid-row: 1; }
  .pr { grid-column: 1; grid-row: 2; }
  .step { grid-column: 2; grid-row: 1 / span 2; }
  .hero h1 { font-size: var(--fs-2xl); }
  .shopline > span:last-child { white-space: normal; }
  .v-photo { width: 56px; height: 56px; }
  .v-head h2 { font-size: 20px; }
  .bar-in { padding: 8px 8px 8px 12px; gap: var(--s-2); }
  .bar-sum strong { font-size: var(--fs-lg); }
  .bar .btn { padding-inline: 12px; }
  #next::after { display: none; }
  .call { padding: 0; width: var(--tap); justify-content: center; }
}
/* Landscape phones (e.g. 844×390): only the content scrolls; the header and chips stop sticking, the bar is slimmer. */
@media (max-height: 520px) {
  :root { --bar-h: 60px; }
  .kinds { position: static; }
  .top { position: static; }
  .bar-in { padding-block: 6px; }
  .bar .btn { min-height: var(--tap-md); }
}
#status.error .grow { flex: 1 1 180px; }
#status.error .btn { margin-left: auto; }

/* Phones 375–430: the headline breaks between its two words, never inside one (beside the three blooms). */
@media (min-width: 375px) and (max-width: 559px) {
  .hero h1 { overflow-wrap: normal; font-size: clamp(26px, 7.2vw, 32px); padding-right: 96px; }
}
/* 320px: the status labels and the day picker fit without colliding or cutting. */
.steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 359px) {
  .steps li { font-size: 12px; letter-spacing: -.01em; }
  .f select { padding-right: 32px; background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; }
}
/* A failed cancel says so inside the confirm box, where the thumb is. */
.confirm .c-err { margin: 0 0 var(--s-3); color: var(--red); font-weight: var(--fw-semibold); }

/* Language picker in the header (ქართ / Рус / Eng), next to the phone */
.top-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lang { appearance: none; -webkit-appearance: none; min-height: var(--tap, 44px); padding: 0 26px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface)
  linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 15px) 52% / 5px 5px no-repeat; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lang { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.lang:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 374px) { .lang { padding: 0 22px 0 10px; font-size: 13px; } }
/* With the language picker the header holds three things: on phones the phone pill shows its icon only
   (the number is on the page and in the footer), so nothing runs off the screen. */
@media (max-width: 479px) { .call { padding: 0 12px; } .call span { display: none; } }
/* (the lead's first line steps aside from the blooms — see the hero section) */

/* ---------- 2026-10-16 wholesale refresh: flowers first, cleaner colours, a name search ---------- */
/* The shop's pitch is one quiet strip: the price list starts on the first screen. */
.hero { display: block; padding: var(--s-4) var(--s-5); margin: var(--s-3) 0 var(--s-2); background: var(--surface); }
.hero-art, .hero .lead, .hero .eyebrow, .hero .lead::before { display: none; }
.hero h1 { padding-right: 0; font-size: var(--fs-2xl); line-height: 1.2; }
.hero .promise { margin-top: var(--s-2); gap: 4px 14px; font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-semibold); }
.hero .promise svg { width: 12px; height: 12px; }
.hero .shopline { margin-top: var(--s-2); font-size: var(--fs-xs); }
@media (min-width: 768px) { .hero { padding: var(--s-5) var(--s-6); } }

/* Search + kinds: one sticky strip. */
.filters { position: sticky; top: calc(var(--top-h) + var(--sa-t)); z-index: var(--z-sticky); margin: 0 calc(-1 * var(--sa-r)) 0 calc(-1 * var(--sa-l)); padding: 8px var(--sa-r) 6px var(--sa-l); background: var(--bg); box-shadow: 0 1px 0 var(--line); }
@media (min-width: 720px) { .filters { grid-column: 1 / -1; } }
.filters .kinds { position: static; margin: 0; padding: 6px 0 2px; background: none; box-shadow: none; }
.find { display: block; }
.find input { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface) no-repeat 14px 50% / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a776e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); font: inherit; font-size: 16px; color: var(--ink); }
.find input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Cards and rows: crisper, a little denser — more flowers per screen. */
.variety { box-shadow: 0 1px 2px rgb(30 25 15 / .05); }
.v-head { padding: var(--s-3); gap: var(--s-3); }
.v-photo { width: 72px; height: 72px; }
.v-head h2 { font-size: 23px; }
.row { min-height: 56px; padding-block: 6px; }
.len { font-size: var(--fs-md); }
.row.has::before { background: var(--accent); }
.step { background: var(--surface); border-color: var(--line); }
.row:not(.has) .step input { color: var(--faint, var(--muted)); }
.row.has .step { border-color: var(--accent); }
.step [data-d="1"]:not(:disabled) { color: var(--accent); }
/* the three promises on one quiet line, dot-separated */
.hero .promise { display: block; }
.hero .promise li { display: inline; }
.hero .promise li + li::before { content: " · "; }
.hero .promise svg { display: none; }

/* "+" alone until a length is chosen: no row of greyed "− 0"; the count and "−" appear with the first tap. */
.row:not(.has) .step [data-d="-1"], .row:not(.has) .step input { display: none; }
.row:not(.has) .step { border-color: var(--accent-line); }
/* the unit is said once, in the card head ("price per bundle"), not after every price */
.price small { display: none; }
.price { font-size: var(--fs-lg); }
/* bigger photos on one cream tile: the rose is the hero of the card */
.v-photo { width: 84px; height: 84px; background: var(--photo-tile); }

/* ---------- 2026-10-16 "light premium" (owner's pick, mock-up P; FLOWERBX / Alexandra Farms direction in the logo colours) ---------- */
html:root:root {
  color-scheme: light;
  --bg: #f2f4ee; --surface: #ffffff; --surface-2: #eef1e9; --surface-3: #e5e9df; --photo-tile: #e8ece2; --photo-filter: none;   /* eucalyptus mist (owner's pick, 2026-10-16) */
  --line: #e1e6da; --line-strong: #cbd2c1;
  --ink: #23241d; --muted: #66645a; --faint: #9a978b;   /* (muted 4.18 → 5.4:1 on the page — tester f8) */
  --accent: #4f5440; --accent-hover: #3e4232; --accent-ink: #ffffff; --accent-soft: #eff0e9; --accent-line: #a3aa8c;
  --petal: #e1ac9d; --petal-soft: #eff0e9; --petal-ink: #9b5446; --gold: #b5a079;
  --green: #2f6b45; --green-soft: #e7f1ea; --amber: #94630b; --amber-soft: #fdf1d8; --red: #b3261e; --red-soft: #fbe9e7;
  --focus: #4f5440; --scrim: rgb(35 36 29 / .4);
  --shadow-1: none; --shadow-2: 0 18px 36px -18px rgb(35 36 29 / .45);
}
body { background: var(--bg); }
.top { background: rgb(242 244 238 / .9); backdrop-filter: blur(14px); border-bottom: 0; }
.wm { color: var(--accent); }
.wm::after { content: "FLOWER SHOP"; display: block; margin-top: 3px; font: 600 7.5px/1 var(--font); letter-spacing: .42em; color: var(--muted); }

/* intro: a serif headline, the address, then three facts on hairlines (no card, no blooms) */
.hero { display: block; margin: var(--s-3) 0 0; padding: 6px 0 0; background: none; border: 0; border-radius: 0; }
.hero-art, .hero .eyebrow, .hero .lead { display: none; }
.hero h1 { font: 500 30px/1.18 var(--font); letter-spacing: -.015em; padding: 0; }
.hero .shopline { order: -1; margin: 6px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.hero-text { display: flex; flex-direction: column; }
.hero .shopline { order: 2; } .hero .promise { order: 3; }
.hero .promise { display: flex; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11.5px; line-height: 1.35; color: var(--muted); font-weight: var(--fw-semibold); }
.hero .promise li { display: flex; flex: 1; align-items: center; justify-content: center; text-align: center; padding: 10px 6px; }
.hero .promise li + li { border-left: 1px solid var(--line); }
.hero .promise li + li::before { content: none; }
.hero .promise svg { display: none; }
.hero.compact h1 { font-size: 24px; } .hero.compact .promise { display: none; }

/* search · colours · kinds */
.filters { margin-top: var(--s-4); padding: 10px var(--sa-r) 10px var(--sa-l); background: var(--bg); }
.find input { background-color: var(--surface); border-color: var(--line); }
.hues { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; }
.hues::-webkit-scrollbar { display: none; }
.hue { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; }
.hue i { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); background: conic-gradient(#be223b, #f0a9bd, #f2c4a8, #f3d36b, #f4efe2, #a98bc2, #be223b); }
.hue[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.hue[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.filters .kinds { gap: 18px; padding-top: 10px; }
.kind { min-height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--muted); font-weight: var(--fw-semibold); }
.kind[aria-pressed="true"], .kind[aria-pressed="true"]:active { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* a variety: no box — a hairline list, a big bloom photo, lengths as 2 × 2 tiles */
#catalog { gap: 0; }
.variety { padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow: visible; }
.v-head { gap: 16px; padding: 0; }
.v-photo { width: 112px; height: 112px; border-radius: 18px; background: var(--photo-tile); }
.v-photo img { transform: scale(1.3); }   /* close on the bloom: every photo reads the same, whatever was behind it */
.v-kind { letter-spacing: .2em; text-transform: uppercase; font-size: 10.5px; }
.v-head h2 { font-size: 28px; }
.rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; border-top: 0; }
/* a length tile — card "M" + button "5 · ink & gold" (owner's picks, 2026-10-16; after Diptyque / Byredo): a crisp white
   card (a hairline + a quiet shadow, 12 px corners), the length small above a big price with a light "₾"; a near-black
   round "+" in gold, set in a thin gold ring. The whole card adds (the button's hit area is stretched over it).
   Added: the card gets an ink hairline and the "+" grows into an ink pill "− 2 +" (gold signs, white count). */
.row { --ink-btn: #1f201a; --gold-sign: #d8c7a0; --gold-ring: rgb(181 160 121 / .5); }
.rows { gap: 10px; }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "len step" "pr step"; align-items: center; gap: 0 8px;
  min-height: 66px; padding: 9px 12px 9px 15px; border: 0; border-radius: 12px; background: var(--surface);
  box-shadow: 0 0 0 1px rgb(35 36 29 / .05), 0 1px 2px rgb(35 36 29 / .05), 0 10px 22px -16px rgb(35 36 29 / .32);
  transition: box-shadow var(--dur-2), transform var(--dur-1); }
.row:last-child { border-bottom: 0; }
.row::before, .row.has::before { display: none; }
.row .len { grid-area: len; align-self: end; font-size: 12.5px; font-weight: var(--fw-regular); color: var(--muted); line-height: 1.2; }
.row .pr { grid-area: pr; align-self: start; gap: 2px; }
.row .price { font-size: 20px; font-weight: var(--fw-semibold); color: var(--ink); line-height: 1.25; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.row .price .cur { margin-left: 3px; font-size: 15px; font-weight: var(--fw-medium); color: var(--muted); letter-spacing: 0; }
.row .lvl { font-size: 10.5px; line-height: 16px; }
.row .step { grid-area: step; background: transparent; border: 0; border-radius: 99px; }
.row:not(.has) .step [data-d="1"] { position: static; width: 44px; height: 44px; border-radius: 50%; background: var(--ink-btn); color: var(--gold-sign);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--gold-ring), 0 10px 18px -10px rgb(0 0 0 / .6); }
.row:not(.has) .step [data-d="1"] svg { width: 18px; height: 18px; stroke-width: 1.6; }
.row:not(.has) .step [data-d="1"]::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.row:not(.has) .step button:not(:disabled):active { transform: none; }
@media (hover: hover) {
  .row:not(.has):not(.out):hover { box-shadow: 0 0 0 1px var(--gold-ring), 0 1px 2px rgb(35 36 29 / .05), 0 14px 26px -16px rgb(35 36 29 / .4); }
  .row:not(.has) .step button:not(:disabled):hover { background: #000; color: #eadcb9; }
}
.row:not(.has):not(.out):active { transform: scale(.98); }
.row.out { box-shadow: 0 0 0 1px rgb(35 36 29 / .05); background: transparent; }
.row.has { background: var(--surface); box-shadow: 0 0 0 1px var(--ink-btn), 0 10px 22px -16px rgb(35 36 29 / .32); padding: 9px 6px 9px 12px; gap: 0 4px; }
.row.has .price { font-size: 17px; }
@media (max-width: 389px) { .row.has { padding-left: 10px; } .row.has .len { font-size: 11.5px; } .row.has .price { font-size: 15px; } .row.has .price .cur { font-size: 12px; margin-left: 2px; } .row.has .step input { width: 16px; } }
.row.has .step { background: var(--ink-btn); box-shadow: 0 0 0 1px var(--gold-ring), 0 10px 18px -10px rgb(0 0 0 / .6); }
.row.has .step button { width: 44px; height: 44px; border-radius: 50%; color: var(--gold-sign); } .row.has .step input { width: 20px; height: 44px; color: #fff; }
.row.has .step button svg { width: 15px; height: 15px; stroke-width: 1.8; }
@media (hover: hover) { .row.has .step button:not(:disabled):hover { background: rgb(216 199 160 / .12); } }
@media (max-width: 359px) { .rows { grid-template-columns: 1fr; } }
@media (min-width: 720px) { .variety { padding: 18px; } }

/* cart: an olive bar with a cream button */
.bar-in { background: var(--accent); border-color: var(--accent); color: #fbf8f4; box-shadow: var(--shadow-2); }
.bar-sum span { color: rgb(251 248 244 / .78); }
.bar .btn.primary, #next { background: #fbf8f4; color: var(--accent); border-color: #fbf8f4; }
#catalog { grid-template-columns: minmax(0, 1fr); }
.filters { margin-inline: 0; padding-inline: 0; }
@media (min-width: 720px) { #catalog { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-5); } }

/* FiraGO is a heavier Georgian than Noto at the same weight: quiet the secondary text so only the headline,
   the prices and the selected tab carry weight (as in the chosen mock-up). */
.hero .promise { font-weight: var(--fw-regular); }
.kind { font-weight: var(--fw-regular); }
.kind[aria-pressed="true"] { font-weight: var(--fw-semibold); }

/* F1 · "logo only" front (owner's pick, 2026-10-16; after Byredo / Le Labo): language left, the logo centred (mark over the
   wordmark), the phone as a round icon right; under it one small spaced mtavruli line instead of a headline, the
   three facts and the address (the address stays in the footer and behind the phone). The h1 stays for screen
   readers and search engines; the visible line is drawn from CSS per language (and hidden from screen readers). */
:root { --top-h: 88px; }
.top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.top-r { display: contents; }
#lang-slot { grid-column: 1; grid-row: 1; justify-self: start; }
.brand { grid-column: 2; grid-row: 1; flex-direction: column; gap: 4px; padding: 10px 0 8px; }
.brand img { width: 30px; height: 30px; margin: 0; }
.wm { font-size: 24px; letter-spacing: .3em; margin-right: -.3em; padding-top: 0; text-align: center; }
.wm::after { margin-top: 4px; font-size: 7px; letter-spacing: .44em; margin-right: -.44em; }
.call { grid-column: 3; grid-row: 1; justify-self: end; width: var(--tap); padding: 0; justify-content: center; }
.call span { display: none; }
.hero { margin: 8px 0 0; padding: 0; }
.hero h1, .hero .promise { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* FiraGO has no mtavruli (U+1C90…): those letters come from the Noto Georgian file alone (19 KB), the spaces stay FiraGO */
@font-face { font-family: "VAZA Mtavruli"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/noto-georgian.woff2) format("woff2"); unicode-range: U+1C90-1CBF; }
.hero::before { content: "ᲡᲐᲑᲘᲗᲣᲛᲝ ᲧᲕᲐᲕᲘᲚᲔᲑᲘ" / ""; display: block; text-align: center; font: 500 10px/1 "VAZA Mtavruli", var(--font); letter-spacing: .34em; margin-right: -.34em; color: var(--muted); }
html:lang(ru) .hero::before { content: "ЦВЕТЫ ОПТОМ" / ""; font-family: var(--font); }
html:lang(en) .hero::before { content: "WHOLESALE FLOWERS" / ""; font-family: var(--font); }
.filters .find input { font-weight: var(--fw-regular); }

/* the optional note in the checkout: full width, three lines, grows by hand */
.f-note { display: flex; margin-top: var(--s-4); }
.f-note[hidden] { display: none; }
.f textarea { min-height: 88px; font: inherit; line-height: 1.45; color: var(--ink); }
.f textarea::placeholder { color: var(--faint); opacity: 1; }
.f textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
@media (hover: hover) { .f textarea:hover { border-color: var(--ink); } }

/* a variety name never splits inside a word ("ცალთავიან|ი"): on a narrow phone the photo and the name get smaller
   instead; only a word longer than the whole line may still wrap */
.v-head h2 { overflow-wrap: break-word; }
@media (max-width: 359px) { .v-photo { width: 88px; height: 88px; border-radius: 16px; } .v-head { gap: 12px; } .v-head h2 { font-size: 22px; } }

/* landscape phones (≤ 520 px tall): the header does not stick there, so neither does the search + colour + kind block —
   a sticky block under a header that scrolled away left a see-through gap and covered most of a 390 px screen */
@media (max-height: 520px) { .filters { position: static; } }

/* ---------- night mode (2026-10-17): the same page in the logo colours at night — leaf-black, cream ink, sage, gold.
   Follows the phone (prefers-color-scheme) unless the customer picked with the switch (<html data-theme>). Beats the
   light block above by one more class in the selector. ---------- */
@media (prefers-color-scheme: dark) {
  html:root:root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131510; --surface: #1c1f18; --surface-2: #23271f; --surface-3: #2b3026; --photo-tile: #dfe3d8; --photo-filter: brightness(.93);
    --line: #2d3228; --line-strong: #4b5243;
    --ink: #eeebe2; --muted: #a8a99c; --faint: #85877a;
    --accent: #c3cba6; --accent-hover: #d4dbbb; --accent-ink: #171a12; --accent-soft: #252a1e; --accent-line: #6d7656;
    --petal: #d79b8c; --petal-soft: #2c2220; --petal-ink: #e7a998; --gold: #c9b17e;
    --green: #6cc490; --green-soft: #183024; --amber: #f2be6a; --amber-soft: #3a2c14; --red: #ff8a80; --red-soft: #3f1d1b;
    --focus: #c3cba6; --scrim: rgb(0 0 0 / .6);
    --shadow-1: none; --shadow-2: 0 18px 36px -18px rgb(0 0 0 / .8);
  }
}
html:root:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131510; --surface: #1c1f18; --surface-2: #23271f; --surface-3: #2b3026; --photo-tile: #dfe3d8; --photo-filter: brightness(.93);
  --line: #2d3228; --line-strong: #4b5243;
  --ink: #eeebe2; --muted: #a8a99c; --faint: #85877a;
  --accent: #c3cba6; --accent-hover: #d4dbbb; --accent-ink: #171a12; --accent-soft: #252a1e; --accent-line: #6d7656;
  --petal: #d79b8c; --petal-soft: #2c2220; --petal-ink: #e7a998; --gold: #c9b17e;
  --green: #6cc490; --green-soft: #183024; --amber: #f2be6a; --amber-soft: #3a2c14; --red: #ff8a80; --red-soft: #3f1d1b;
  --focus: #c3cba6; --scrim: rgb(0 0 0 / .6);
  --shadow-1: none; --shadow-2: 0 18px 36px -18px rgb(0 0 0 / .8);
}
/* the parts drawn with fixed colours: header glass, cards, the round button (gold on the dark card — an ink button
   would vanish there), the cart bar */
:is(html[data-theme="dark"]) .top { background: rgb(19 21 16 / .9); }
:is(html[data-theme="dark"]) .row { --ink-btn: #d8c7a0; --gold-sign: #1c1d16; --gold-ring: rgb(216 199 160 / .45);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .05), 0 10px 22px -16px rgb(0 0 0 / .9); }
:is(html[data-theme="dark"]) .row:not(.has) .step [data-d="1"] { background: linear-gradient(160deg, #e4d6b3, #c8b27f); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--gold-ring), 0 10px 18px -10px rgb(0 0 0 / .8); }
:is(html[data-theme="dark"]) .row.has { box-shadow: 0 0 0 1px #c8b27f, 0 10px 22px -16px rgb(0 0 0 / .9); }
:is(html[data-theme="dark"]) .row.has .step { background: linear-gradient(160deg, #e4d6b3, #c8b27f); }
:is(html[data-theme="dark"]) .row.has .step input { color: #1c1d16; }
:is(html[data-theme="dark"]) .row.out { box-shadow: 0 0 0 1px rgb(255 255 255 / .05); }
@media (hover: hover) { :is(html[data-theme="dark"]) .row:not(.has) .step button:not(:disabled):hover { background: #ecdfc0; color: #1c1d16; } }
:is(html[data-theme="dark"]) .bar-in { background: #2b3122; border-color: #3a4130; color: #f3efe4; }
:is(html[data-theme="dark"]) .bar .btn.primary, :is(html[data-theme="dark"]) #next { background: linear-gradient(160deg, #e4d6b3, #c8b27f); color: #1c1d16; border-color: transparent; }
:is(html[data-theme="dark"]) .brand img { filter: brightness(1.25) saturate(1.1); }
:is(html[data-theme="dark"]) .v-photo img { filter: var(--photo-filter); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .top { background: rgb(19 21 16 / .9); }
  html:not([data-theme="light"]) .row { --ink-btn: #d8c7a0; --gold-sign: #1c1d16; --gold-ring: rgb(216 199 160 / .45);
    box-shadow: 0 0 0 1px rgb(255 255 255 / .05), 0 10px 22px -16px rgb(0 0 0 / .9); }
  html:not([data-theme="light"]) .row:not(.has) .step [data-d="1"] { background: linear-gradient(160deg, #e4d6b3, #c8b27f); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--gold-ring), 0 10px 18px -10px rgb(0 0 0 / .8); }
  html:not([data-theme="light"]) .row.has { box-shadow: 0 0 0 1px #c8b27f, 0 10px 22px -16px rgb(0 0 0 / .9); }
  html:not([data-theme="light"]) .row.has .step { background: linear-gradient(160deg, #e4d6b3, #c8b27f); }
  html:not([data-theme="light"]) .row.has .step input { color: #1c1d16; }
  html:not([data-theme="light"]) .row.out { box-shadow: 0 0 0 1px rgb(255 255 255 / .05); }
  html:not([data-theme="light"]) .bar-in { background: #2b3122; border-color: #3a4130; color: #f3efe4; }
  html:not([data-theme="light"]) .bar .btn.primary, html:not([data-theme="light"]) #next { background: linear-gradient(160deg, #e4d6b3, #c8b27f); color: #1c1d16; border-color: transparent; }
  html:not([data-theme="light"]) .brand img { filter: brightness(1.25) saturate(1.1); }
  html:not([data-theme="light"]) .v-photo img { filter: var(--photo-filter); }
}

/* the switch at the foot of the list */
.theme-row { display: flex; justify-content: center; margin: 4px 0 24px; }
.theme-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.theme-btn .ti { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .sun { display: none; } .theme-btn[aria-pressed="true"] .sun { display: inline; } .theme-btn[aria-pressed="true"] .moon { display: none; }
.theme-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#checkout:not([hidden]) ~ .theme-row, .theme-row:has(~ #checkout:not([hidden])) { display: none; }

/* the address and the phone under the mtavruli line (owner, 2026-10-17): one small centred line, the phone a call link */
.hero .hero-text { display: block; }
.hero .shopline { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.hero .shopline[hidden] { display: none; }
.hero .shopline a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.hero .shopline span { white-space: nowrap; }
.hero .shopline .sep { padding: 0 7px; }

/* the length leads, the price follows (owner, 2026-10-17): "60 სმ" big and dark, "40 ₾" small under it */
.row .len { font-size: 18px; font-weight: var(--fw-semibold); color: var(--ink); letter-spacing: -.005em; }
.row .price { font-size: 14px; font-weight: var(--fw-medium); color: var(--muted); letter-spacing: 0; }
.row .price .cur { font-size: 12px; margin-left: 2px; }
.row.has .len { font-size: 16px; } .row.has .price { font-size: 13px; }
@media (max-width: 389px) { .row.has .len { font-size: 15px; } .row.has .price { font-size: 12.5px; } .row.has .price .cur { font-size: 11px; } }

/* under 5 bundles: the bar says how many more, the button is visibly not ready (it still explains on a tap) */
.bar.short #bar-n { color: #f2d9a6; font-weight: var(--fw-semibold); }
.bar.short #next { opacity: .55; }

/* "რეალური ფოტო" (owner, 2026-10-17): a small pill under the variety's facts, and the photo full screen */
.real-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 8px; padding: 0 14px 0 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: var(--fw-medium); cursor: pointer; position: relative; }
.real-btn::after { content: ""; position: absolute; inset: -5px -4px; }   /* a 44 px tall target around the 36 px pill */
.real-btn svg { color: var(--muted); }
@media (hover: hover) { .real-btn:hover { border-color: var(--gold, #b5a079); } }
.real-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.real-box { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; overflow: hidden; }
.real-box::backdrop { background: rgb(12 13 10); }
.real-box { --focus: #e9e4d2; }   /* light focus rings on the dark viewer, in both themes */
.real-box :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.real-box .real-strip:focus, .real-box .real-strip:focus-visible { outline: none; }   /* the strip takes focus only so the arrow keys swipe; no frame round the photo */
.real-box figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: calc(56px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); box-sizing: border-box; }
.real-strip { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.real-strip::-webkit-scrollbar { display: none; }
.real-strip img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; border-radius: 12px; clip-path: inset(0 round 12px); }
/* a slow line: a soft ring instead of a black screen until the photo arrives */
.real-strip img.loading { background: #1c1d19 radial-gradient(circle at 50% 50%, transparent 15px, rgb(243 239 228 / .55) 16px, rgb(243 239 228 / .55) 18px, transparent 19px) no-repeat; }
@media (prefers-reduced-motion: no-preference) { .real-strip img.loading { animation: realPulse 1.1s ease-in-out infinite; } }
@keyframes realPulse { 50% { opacity: .55; } }
.real-box figcaption { color: #f3efe4; font-size: 14px; letter-spacing: .02em; }
.real-x { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- news (23.10.2026): big slides, the „only wholesale“ statement, a running line ---------- */
.news { color: var(--ink); }
/* 5 — refined big slides + a running line (owner, 23.10: „more polished, and a moving banner too“) */
.news.nb5 { background: transparent; border-bottom: 0; padding-top: 12px; }
.nb5 { display: grid; gap: 10px; }
.nb5-stage { position: relative; height: clamp(236px, 64vw, 270px); border-radius: 24px; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgb(255 255 255 / .4) inset, 0 18px 40px -18px rgb(30 34 20 / .45); }
.nb5-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; opacity: 0; transform: translateX(6%); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.nb5-slide.off { transform: translateX(-6%); }
.nb5-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.nb5-slide.t-leaf { --a: #33502a; --b: #7a9a52; --fg: #fbf8ef; --chip: rgb(255 255 255 / .16); --cta-bg: #fbf8ef; --cta-fg: #24331b; }
.nb5-slide.t-ink { --a: #15170f; --b: #3d4131; --fg: #fbf8ef; --chip: rgb(255 255 255 / .12); --cta-bg: #d9b77a; --cta-fg: #1a1b14; }
.nb5-slide.t-petal { --a: #f3d3c6; --b: #e7a993; --fg: #3a2620; --chip: rgb(58 38 32 / .1); --cta-bg: #3a2620; --cta-fg: #fbf3ee; }
.nb5-slide { background: linear-gradient(125deg, var(--a), var(--b)); color: var(--fg); }
.nb5-slide::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1.4px); background-size: 14px 14px; mask-image: linear-gradient(90deg, #000, transparent 70%); pointer-events: none; }
.nb5-glow { position: absolute; width: 70%; aspect-ratio: 1; right: -12%; top: 50%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .28), transparent 65%); pointer-events: none; }
.nb5-text { position: relative; z-index: 1; padding: 18px 6px 34px 22px; display: grid; gap: 6px; justify-items: start; align-content: center; min-width: 0; }
.nb5-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--chip); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(4px); }
.nb5-big { margin: 2px 0 0; font-family: var(--font-display, inherit); font-weight: 700; font-size: clamp(22px, 6.4vw, 34px); line-height: 1.14; letter-spacing: -.005em; text-wrap: balance; }
.nb5-small { margin: 0; font-size: clamp(13.5px, 3.6vw, 16px); line-height: 1.4; opacity: .88; }
.nb5-cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 18px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font: 600 14px var(--font, inherit); background: var(--cta-bg); color: var(--cta-fg); box-shadow: 0 6px 16px -6px rgb(0 0 0 / .45); transition: transform .2s; }
.nb5-cta span { transition: transform .2s; }
@media (hover: hover) { .nb5-cta:hover span { transform: translateX(3px); } }
.nb5-cta:active { transform: scale(.97); }
.nb5-art { position: relative; height: 100%; }
.nb5-art .ring { position: absolute; right: -8%; top: 50%; width: 92%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; overflow: hidden; padding: 0; box-shadow: 0 0 0 5px rgb(255 255 255 / .35), 0 14px 30px -8px rgb(0 0 0 / .4); }
.nb5-art .ring.sm { width: 46%; right: 52%; top: 76%; box-shadow: 0 0 0 4px rgb(255 255 255 / .45), 0 10px 22px -8px rgb(0 0 0 / .4); }
.nb5-art img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.nb5-slide.on .nb5-art img { animation: nb5-kb 7s ease-out forwards; }
@keyframes nb5-kb { from { transform: scale(1.04); } to { transform: scale(1.16); } }
.nb5-bars { position: absolute; z-index: 2; left: 22px; bottom: 12px; display: flex; gap: 6px; }
.nb5-bar { width: 26px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.nb5-bar::before, .nb5-bar i { grid-area: 1 / 1; height: 3px; border-radius: 2px; }
.nb5-bar::before { content: ""; background: rgb(255 255 255 / .35); }
.nb5-stage:has(.t-petal.on) .nb5-bar::before { background: rgb(58 38 32 / .2); }
.nb5-bar i { width: 0; background: currentColor; color: #fff; }
.nb5-stage:has(.t-petal.on) .nb5-bar i { color: #3a2620; }
.nb5-bar.past i { width: 100%; }
.nb5-bar.on i { animation: nb5-fill 6s linear forwards; }
.nb5-stage:hover .nb5-bar.on i, .nb5-stage:focus-within .nb5-bar.on i { animation-play-state: paused; }
@keyframes nb5-fill { to { width: 100%; } }
/* the running line */
.nb5-ticker { overflow: hidden; border-radius: 999px; background: var(--ink); color: var(--bg); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.nb5-run { display: inline-flex; align-items: center; gap: 18px; padding: 9px 0; white-space: nowrap; font-size: 13.5px; font-weight: 500; animation: nb5-run 38s linear infinite; }
.nb5-run i { font-style: normal; color: #d9b77a; font-size: 11px; }
.nb5-ticker:hover .nb5-run { animation-play-state: paused; }
@keyframes nb5-run { to { transform: translateX(-50%); } }
@media (min-width: 900px) { .nb5-stage { height: 250px; } .nb5-text { padding-left: 40px; } .nb5-bars { left: 40px; } .nb5-art .ring { width: 74%; right: 4%; } .nb5-art .ring.sm { width: 36%; right: 58%; } }
@media (prefers-reduced-motion: reduce) {
  .nb5-slide, .nb5-slide.off { transition: none; transform: none; }
  .nb5-slide.on .nb5-art img { animation: none; }
  .nb5-bar.on i { animation: none; width: 100%; }
  .nb5-run { animation: none; flex-wrap: wrap; white-space: normal; justify-content: center; padding-inline: 16px; }
}
.nb5-bars { left: auto; right: 16px; bottom: auto; top: 12px; }
@media (min-width: 900px) { .nb5-bars { left: auto; right: 22px; } }
@media (min-width: 900px) {
  .nb5-art .ring { width: auto; height: 84%; right: 6%; }
  .nb5-art .ring.sm { width: auto; height: 46%; right: calc(6% + 190px); top: 72%; }
}
.news.nb5 { padding-bottom: 10px; }
/* the big running statement: „only wholesale“ — every other copy outlined, a flower between */
.nb5-big-run { overflow: hidden; margin-inline: calc(-1 * var(--sa-l, 16px)); padding-block: 2px; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.nb5-big-track { display: inline-flex; align-items: center; gap: 28px; white-space: nowrap; animation: nb5-big 30s linear infinite; font-family: var(--font-display, inherit); font-weight: 800; font-size: clamp(30px, 8.5vw, 64px); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.nb5-big-track span.o { color: transparent; -webkit-text-stroke: 1.4px var(--accent); }
.nb5-big-track i { font-style: normal; font-size: .55em; color: var(--petal, #d98c7a); }
@keyframes nb5-big { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nb5-big-track { animation: none; white-space: normal; flex-wrap: wrap; } .nb5-big-track > :not(:first-child) { display: none; } }
/* QA round 23.10: slides stack in one grid cell, so the stage is as tall as the tallest slide (a 320 px iPhone, Russian
   text — nothing is cut off); the running line keeps its dark look in night mode; „reduce motion“ shows one calm copy */
.nb5-stage { height: auto; min-height: clamp(236px, 64vw, 270px); display: grid; }
.nb5-slide { position: relative; inset: auto; grid-area: 1 / 1; }
.nb5-text { padding-top: 24px; }
@media (min-width: 900px) { .nb5-stage { min-height: 250px; } .nb5-text { padding-top: 24px; } }
.nb5-cta { white-space: nowrap; }
.nb5-ticker { background: #1f211b; color: #f3efe4; }
@media (prefers-reduced-motion: reduce) {
  .nb5-big-run, .nb5-ticker { mask-image: none; }
  .nb5-big-run { margin-inline: 0; }
  .nb5-big-track { font-size: clamp(22px, 6.4vw, 40px); }
  .nb5-big-track .dup, .nb5-run .dup { display: none; }
  .nb5-ticker { border-radius: 16px; }
  .nb5-run { gap: 6px 14px; padding: 10px 16px; }
}

/* ---------- design variants to compare (?nv=1|2|3, local only, 23.10) ---------- */
.nb5-bg { display: none; }
/* 1 — editorial: the photo fills the slide, a dark veil from the left, a serif headline over a thin gold rule */
.nv1 .nb5-stage { border-radius: 20px; }
.nv1 .nb5-slide { background: #14160f; color: #f6f1e4; grid-template-columns: minmax(0, 1fr); }
.nv1 .nb5-bg { display: block; position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; transform: scale(1.03); }
.nv1 .nb5-slide.on .nb5-bg { animation: nb5-kb 8s ease-out forwards; }
.nv1 .nb5-slide::before { background: linear-gradient(95deg, rgb(14 15 10 / .92) 0%, rgb(14 15 10 / .72) 45%, rgb(14 15 10 / .15) 100%); mask-image: none; z-index: 0; }
.nv1 .nb5-glow, .nv1 .nb5-art { display: none; }
.nv1 .nb5-text { max-width: 78%; padding-block: 28px 30px; }
.nv1 .nb5-chip { background: transparent; padding: 0; font-size: 12px; letter-spacing: .14em; color: #d9b77a; }
.nv1 .nb5-chip svg { display: none; }
.nv1 .nb5-big { font-family: "Cormorant Garamond", var(--font-display, serif); font-weight: 600; font-size: clamp(26px, 7.6vw, 42px); line-height: 1.08; padding-bottom: 10px; border-bottom: 1px solid rgb(217 183 122 / .7); }
.nv1 .nb5-small { opacity: .8; }
.nv1 .nb5-cta { background: transparent; color: #f6f1e4; box-shadow: none; padding: 0; min-height: 36px; border-bottom: 1px solid currentColor; border-radius: 0; }
.nv1 .nb5-big-track { font-family: "Cormorant Garamond", var(--font-display, serif); font-weight: 600; font-style: italic; }
.nv1 .nb5-big-track span.o { -webkit-text-stroke-color: #b5a079; }
.nv1 .nb5-ticker { background: transparent; color: var(--ink); border-block: 1px solid var(--line); border-radius: 0; }
.nv1 .nb5-run i { color: #b5a079; }
/* 2 — paper & petal: warm cream card, a tilted photo print, leaf-green ink */
.nv2 .nb5-stage { border-radius: 28px; box-shadow: 0 1px 0 #fff inset, 0 20px 40px -24px rgb(80 60 30 / .45); }
.nv2 .nb5-slide { background: linear-gradient(160deg, #fbf6ec, #f3e7d6); color: #2f3a22; }
.nv2 .nb5-slide.t-ink { background: linear-gradient(160deg, #f4efe3, #e6e1cf); }
.nv2 .nb5-slide.t-petal { background: linear-gradient(160deg, #fbefe9, #f3d9cf); color: #4a2c24; }
.nv2 .nb5-slide::before { background-image: radial-gradient(rgb(120 90 40 / .07) 1px, transparent 1.4px); }
.nv2 .nb5-glow { background: radial-gradient(circle, rgb(234 185 168 / .45), transparent 65%); }
.nv2 .nb5-chip { background: #fff; color: #5d7a3d; box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.nv2 .nb5-big { font-family: "Cormorant Garamond", var(--font-display, serif); font-weight: 700; font-size: clamp(26px, 7.4vw, 40px); line-height: 1.05; color: #33502a; }
.nv2 .t-petal .nb5-big { color: #7a3b2b; }
.nv2 .nb5-cta { background: #33502a; color: #fbf6ec; }
.nv2 .t-petal .nb5-cta { background: #7a3b2b; }
.nv2 .nb5-art .ring { border-radius: 6px; padding: 8px 8px 26px; background: #fff; box-shadow: 0 14px 28px -10px rgb(60 40 20 / .4); transform: translateY(-50%) rotate(4deg); width: 74%; right: 4%; }
.nv2 .nb5-art .ring img { border-radius: 2px; }
.nv2 .nb5-art .ring.sm { transform: translateY(-50%) rotate(-7deg); width: 40%; right: 52%; top: 70%; padding: 5px 5px 16px; }
.nv2 .nb5-slide.on .nb5-art img { animation: none; }
.nv2 .nb5-bar::before { background: rgb(51 80 42 / .18); }
.nv2 .nb5-bar i { color: #33502a; }
.nv2 .nb5-big-track { color: #33502a; font-family: "Cormorant Garamond", var(--font-display, serif); }
.nv2 .nb5-big-track i { color: #e7a993; }
.nv2 .nb5-ticker { background: #33502a; color: #fbf6ec; }
/* 3 — bold modern: a solid colour block with a huge word, the photo filling the right half on a slant */
.nv3 .nb5-stage { border-radius: 18px; }
.nv3 .nb5-slide { grid-template-columns: minmax(0, 1fr); background: #1d2a17; }
.nv3 .nb5-slide.t-leaf { background: #2f6b3a; } .nv3 .nb5-slide.t-ink { background: #121410; } .nv3 .nb5-slide.t-petal { background: #e0614a; color: #fff; --cta-bg: #fff; --cta-fg: #e0614a; }
.nv3 .nb5-bg { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: var(--bg) center / cover no-repeat; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.nv3 .nb5-art, .nv3 .nb5-glow, .nv3 .nb5-slide::before { display: none; }
.nv3 .nb5-text { max-width: 60%; }
.nv3 .nb5-chip { background: #fff; color: #121410; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 6px; }
.nv3 .nb5-big { font-weight: 900; font-size: clamp(26px, 8vw, 46px); line-height: 1; letter-spacing: -.02em; }
.nv3 .nb5-cta { border-radius: 10px; }
.nv3 .nb5-big-track { font-weight: 900; letter-spacing: -.03em; }
.nv3 .nb5-big-track span:not(.o) { background: linear-gradient(transparent 58%, #f4d35e 58%, #f4d35e 90%, transparent 90%); }
.nv3 .nb5-ticker { background: #e0614a; color: #fff; border-radius: 10px; }
.nv3 .nb5-run i { color: #fff; }
.nv1 .nb5-slide::before { background: linear-gradient(95deg, rgb(14 15 10 / .96) 0%, rgb(14 15 10 / .9) 50%, rgb(14 15 10 / .45) 78%, rgb(14 15 10 / .1) 100%); }
.nv1 .nb5-bg { left: 30%; }
.nv1 .nb5-big, .nv2 .nb5-big, .nv1 .nb5-big-track, .nv2 .nb5-big-track { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.nv1 .nb5-bg { z-index: 0; left: 0; }
.nv1 .nb5-slide::before { z-index: 1; }
.nv1 .nb5-text { z-index: 2; }
.nv1 .nb5-big, .nv2 .nb5-big, .nv1 .nb5-big-track, .nv2 .nb5-big-track { font-family: var(--font); font-weight: 700; letter-spacing: -.01em; }

/* ---------- 4 — flagship (?nv=4): the shop's own photos full-bleed, editorial type, glass button ---------- */
.nv4 .nb5-stage { min-height: clamp(330px, 92vw, 420px); border-radius: 26px; background: #0e0f0b; box-shadow: 0 30px 60px -30px rgb(20 22 14 / .6); }
.nv4 .nb5-slide { display: block; color: #fbf7ec; background: none; transform: none; transition: opacity .9s ease; }
.nv4 .nb5-slide::before { display: none; }
.t4-bg { position: absolute; inset: -2%; background: #22251c center / cover no-repeat; transform: scale(1.06); filter: saturate(1.08) contrast(1.04); }
.nb5-slide.on .t4-bg { animation: t4-kb 9s ease-out forwards; }
@keyframes t4-kb { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-1.5%, -1%, 0); } }
.t4-veil { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgb(10 11 8 / .55) 0%, rgb(10 11 8 / 0) 26%, rgb(10 11 8 / .1) 46%, rgb(10 11 8 / .82) 78%, rgb(10 11 8 / .94) 100%),
  radial-gradient(120% 80% at 0% 100%, rgb(10 11 8 / .5), transparent 60%); }
.t4-veil::after { content: ""; position: absolute; inset: 0; opacity: .13; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.t4-top { position: absolute; z-index: 2; inset: 16px 18px auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.t4-count { font: 600 13px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; color: #fff; }
.t4-count i { font-style: normal; opacity: .55; }
.t4-real { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 6px 10px; border-radius: 999px; color: #fff; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.t4-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 22px 46px; display: grid; gap: 8px; justify-items: start; }
.t4-chip { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #e4c78d; display: inline-flex; align-items: center; gap: 10px; }
.t4-chip::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.t4-big { margin: 0; font-family: var(--font); font-weight: 800; font-size: clamp(30px, 9vw, 52px); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.t4-big .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.t4-big .w > span { display: inline-block; transform: translateY(105%); transition: transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.15s + var(--i) * .08s); }
.nb5-slide.on .t4-big .w > span { transform: none; }
.t4-small { margin: 0; font-size: clamp(14px, 3.8vw, 17px); line-height: 1.45; color: rgb(251 247 236 / .82); max-width: 40ch; opacity: 0; transform: translateY(8px); transition: opacity .7s .45s, transform .7s .45s; }
.nb5-slide.on .t4-small { opacity: 1; transform: none; }
.t4-cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 20px; border-radius: 999px; cursor: pointer; text-decoration: none; font: 600 15px var(--font); color: #fff; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transform: translateY(8px); transition: opacity .7s .6s, transform .7s .6s, background .25s, color .25s; }
.nb5-slide.on .t4-cta { opacity: 1; transform: none; }
.t4-cta span { transition: transform .25s; }
@media (hover: hover) { .t4-cta:hover { background: #fbf7ec; color: #14160f; } .t4-cta:hover span { transform: translateX(4px); } }
.t4-bars { left: 22px; right: 22px; top: auto; bottom: 18px; gap: 6px; }
.t4-bars .nb5-bar { flex: 1; width: auto; height: 14px; }
.t4-bars .nb5-bar::before { background: rgb(255 255 255 / .28); height: 2px; }
.t4-bars .nb5-bar i { height: 2px; color: #fff; }
.nv4 .nb5-bar.on i { animation-duration: 6.5s; }
/* the statement: two lines running opposite ways, filled ink and gold outline */
.t4-state { display: grid; gap: 0; margin-inline: calc(-1 * var(--sa-l, 16px)); overflow: hidden; padding-block: 6px 2px; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.t4-row { overflow: hidden; }
.t4-run { display: inline-flex; align-items: center; gap: 26px; white-space: nowrap; font-family: var(--font); font-weight: 800; font-size: clamp(26px, 7.8vw, 58px); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); animation: nb5-big 34s linear infinite; }
.t4-row.rev .t4-run { animation-direction: reverse; animation-duration: 40s; }
.t4-run span.o { color: transparent; -webkit-text-stroke: 1.2px #b5a079; }
.t4-run i { font-style: normal; font-size: .5em; color: #d98c7a; }
.nv4 .nb5-ticker { margin-top: 2px; }
@media (min-width: 900px) {
  .nv4 .nb5-stage { min-height: 380px; }
  .t4-text { padding: 0 48px 56px; max-width: 760px; }
  .t4-top { inset: 22px 28px auto; }
  .t4-bars { left: 48px; right: auto; width: 240px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb5-slide.on .t4-bg { animation: none; }
  .t4-big .w > span, .t4-small, .t4-cta { transition: none; transform: none; opacity: 1; }
  .t4-run { animation: none; white-space: normal; flex-wrap: wrap; } .t4-run .dup { display: none; } .t4-row.rev { display: none; } .t4-state { mask-image: none; margin-inline: 0; }
}
/* one motion only (owner, 23.10: „too many moving banners — keep one beautiful effect“): the statement stands still */
.t4-tag { margin: 4px 0 2px; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; font-size: clamp(14px, 3.9vw, 18px); font-weight: 600; letter-spacing: .01em; line-height: 1.4; color: var(--ink); text-wrap: balance; }
.t4-tag i { font-style: normal; font-size: 13px; color: #c99a86; flex: none; }
.t4-tag::before, .t4-tag::after { content: ""; flex: 1 1 24px; max-width: 80px; height: 1px; background: linear-gradient(90deg, transparent, #b5a079); }
.t4-tag::after { background: linear-gradient(270deg, transparent, #b5a079); }
.news.nv4 { padding-bottom: 6px; }
/* all the real photos (23.10): one thin progress line, invisible tap zones left/right for previous / next */
.t4-line { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 18px; height: 2px; background: rgb(255 255 255 / .25); border-radius: 2px; overflow: hidden; }
.t4-line i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); animation: t4-line 6.5s linear forwards; }
@keyframes t4-line { to { transform: scaleX(1); } }
.t4-nav { position: absolute; z-index: 1; top: 0; bottom: 0; width: 22%; border: 0; padding: 0; background: none; cursor: pointer; }
.t4-nav.prev { left: 0; } .t4-nav.next { right: 0; }
.t4-real { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .t4-line { left: 48px; right: auto; width: 240px; bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .t4-line i { animation: none; transform: scaleX(1); } }
/* the running line (owner, 23.10): one row going round and round without a seam — „მხოლოდ ყვავილების მაღაზიისთვის ✿“ */
.t4-tag { display: none; }
.t4-marq { margin: 14px calc(-1 * var(--sa-l, 16px)) 4px; overflow: hidden; padding-block: 12px; border-block: 1px solid rgb(181 160 121 / .35);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.t4-marq-run { display: flex; width: max-content; animation: t4-marq 40s linear infinite; }
.t4-marq-half { display: flex; align-items: center; flex: none; }
.t4-marq span { padding-inline: 22px; white-space: nowrap; font-family: var(--font); font-weight: 600; font-size: clamp(17px, 4.6vw, 24px); letter-spacing: .01em; color: var(--ink); }
.t4-marq i { font-style: normal; font-size: 14px; color: #c99a86; }
@keyframes t4-marq { to { transform: translateX(-50%); } }
@media (hover: hover) { .t4-marq:hover .t4-marq-run { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .t4-marq-run { animation: none; justify-content: center; width: auto; } .t4-marq .dup, .t4-marq-half span ~ span, .t4-marq-half i ~ i { display: none; } .t4-marq-half i { display: none; } .t4-marq { mask-image: none; -webkit-mask-image: none; } }
/* polish: a clean cross-fade (no sideways slide), legible small labels over bright petals */
.nv4 .nb5-slide, .nv4 .nb5-slide.on, .nv4 .nb5-slide.off { transform: none !important; opacity: 0; transition: opacity 1.1s ease; }
.nv4 .nb5-slide.on { opacity: 1; z-index: 1; }
.t4-veil { background:
  linear-gradient(180deg, rgb(10 11 8 / .5) 0%, rgb(10 11 8 / 0) 24%, rgb(10 11 8 / .12) 42%, rgb(10 11 8 / .78) 70%, rgb(10 11 8 / .95) 100%),
  radial-gradient(120% 80% at 0% 100%, rgb(10 11 8 / .55), transparent 60%); }
.t4-chip { color: #f0d9a8; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
.t4-count { text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
.t4-real { background: rgb(14 15 10 / .35); }
/* the day / night switch at the top (owner, 23.10: day first, night if the customer wants), left of the phone */
.theme-top { grid-column: 3; grid-row: 1; justify-self: end; transform: translateX(calc(-1 * (var(--tap) + 8px))); width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.theme-top .ti { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-top .sun { display: none; } .theme-top[aria-pressed="true"] .sun { display: inline; } .theme-top[aria-pressed="true"] .moon { display: none; }
.theme-top:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.top-r:has(.call[hidden]) .theme-top { transform: none; }
@media (max-width: 300px) { .theme-top { display: none; } }   /* folded Galaxy Fold: no room beside the logo — the switch at the foot of the list stays */

/* ---------- the shop's account (owner, 23.10.2026) ---------- */
.acct { margin: 6px 0 0; }
.acct-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-block: 10px; border-block: 1px solid var(--line); }
.acct-q { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); line-height: var(--lh-snug); flex: 1 1 180px; }
.acct-q svg { color: var(--accent); flex: none; }
.acct-b { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.btn.small { min-height: var(--tap); padding: 0 16px; font-size: var(--fs-sm); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.acct-me { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.acct-me svg { color: var(--accent); flex: none; }
.acct-n { font-weight: var(--fw-bold); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-l { font-size: var(--fs-sm); color: var(--accent); font-weight: var(--fw-semibold); white-space: nowrap; }
/* the list without an account: a card with the way to the prices, a lock instead of each price */
.gate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: var(--s-3) 0 var(--s-4); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--accent-line, var(--line)); box-shadow: var(--shadow-1); }
.gate p { margin: 0; flex: 1 1 240px; display: grid; gap: 4px; }
.gate strong { font-size: var(--fs-md); }
.gate span { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug); }
.gate-b { display: flex; gap: 8px; flex-wrap: wrap; }

.lock { justify-self: end; display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; }
.lock svg { color: var(--accent); }
@media (hover: hover) { .lock:hover { border-style: solid; border-color: var(--accent); } }
/* the sheet */
.auth-box { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .45); overflow: auto; }
.auth-box::backdrop { background: rgb(14 15 10 / .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@media (max-width: 520px) { .auth-box { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); } }
.auth { position: relative; padding: 24px 20px 20px; display: grid; }
.auth h2 { margin: 0 44px 4px 0; font-size: var(--fs-xl, 24px); }
.auth-p { margin: 0 0 var(--s-4); color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.auth-x { position: absolute; top: 12px; right: 12px; width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); cursor: pointer; }
.pw { position: relative; display: block; }
.pw input { padding-right: 52px; }
.pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; }
.pw-eye[aria-pressed="true"] { color: var(--accent); }
.auth-err { margin: 0 0 var(--s-3); padding: 10px 12px; border-radius: var(--r-sm); background: var(--red-soft); color: var(--red); font-size: var(--fs-sm); }
.auth .f input[aria-invalid] { border-color: var(--red); }
.auth-go { width: 100%; }
.auth-sw, .auth-fine { margin: var(--s-3) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.auth-fine a { color: var(--ink); font-weight: var(--fw-semibold); white-space: nowrap; }
.linkish { border: 0; background: none; padding: 6px 4px; min-height: 36px; font: inherit; font-weight: var(--fw-bold); color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* checkout: who the request comes from */
.who { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-4); padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); }
.who svg { color: var(--accent); flex: none; }
/* my page */
.acct-page { padding-block: var(--s-4) var(--s-6, 48px); }
.acct-page h2 { margin: 2px 0 0; }
.acct-ph { margin: 2px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.acct-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s-4) 0 var(--s-5, 28px); }
.acct-h { margin: 0 0 var(--s-3); font-size: var(--fs-md); }
.acct-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acct-orders a, .ao-shop > summary { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "no d t" "no s s"; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
@media (hover: hover) { .acct-orders a:hover, .ao-shop > summary:hover { border-color: var(--accent-line, var(--ink)); } }
.ao-shop > summary { cursor: pointer; list-style: none; }
.ao-shop > summary::-webkit-details-marker { display: none; }
.ao-shop[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ao-lines { list-style: none; margin: 0; padding: 8px 14px 10px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: var(--surface); font-size: var(--fs-sm); }
.ao-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.ao-lines b { font-variant-numeric: tabular-nums; }
.ao-no { grid-area: no; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ao-d { grid-area: d; font-size: var(--fs-sm); color: var(--muted); }
.ao-t { grid-area: t; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
/* an order's marks, each its own chip (owner, 27.10): confirmed · paid / to pay · sent · from the site / in the shop */
.ao-s { grid-area: s; justify-self: start; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ao-c { font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ao-c.s-accepted, .ao-c.ok { background: rgb(47 107 58 / .12); color: #2f6b3a; }
.ao-c.s-rejected, .ao-c.s-cancelled { background: var(--red-soft); color: var(--red); }
.ao-c.due { background: rgb(176 112 20 / .14); color: #8a5208; }
.ao-c.src { background: none; padding-inline: 2px; font-weight: var(--fw-regular); }
.row.locked { grid-template-columns: minmax(0, 1fr); grid-template-areas: "len" "pr"; gap: 6px; }
.row.locked .len { grid-area: len; }
.row.locked .lock { grid-area: pr; justify-self: start; max-width: 100%; min-height: 40px; padding: 0 12px; }
.row.locked .lock span { overflow: hidden; text-overflow: ellipsis; }
@media (pointer: coarse) { .row.locked .lock { min-height: var(--tap); } }
/* tester round (23.10): the radio itself is not a text field; badges in the dark; a calmer strip; the sheet on small screens */
:is(html[data-theme="dark"]) :is(.ao-c.s-accepted, .ao-c.ok) { background: rgb(143 209 158 / .14); color: #8fd19e; }
:is(html[data-theme="dark"]) .ao-c.due { background: rgb(230 170 80 / .16); color: #f0c27a; }
.acct-in { border-block: 0; border-bottom: 1px solid var(--line); }
.acct + .news { margin-top: 8px; }
.linkish { min-height: var(--tap); }
@media (max-height: 620px), (max-width: 340px) {
  .auth { padding: 16px 16px 14px; }
  .auth-p { display: none; }
  .auth .f { margin-bottom: 10px; }
  .auth .f input { min-height: 44px; padding-block: 8px; }
}
/* forgot the password → WhatsApp (23.10) */
.auth-fine .wa-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: #1f8a4c; font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; }
:is(html[data-theme="dark"]) .auth-fine .wa-link { color: #6fd39a; }
/* audit round (23.10): contrast in the light theme; the sign-up card's title is a heading */
.auth-fine .wa-link { color: #17703d; }
.acct-page .eyebrow, .acct-ph { color: var(--ink-2, #5c5a50); }
.gate-t { flex: 1 1 240px; display: grid; gap: 4px; }
.gate-h { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); }
.gate-t p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug); }
/* audit (a10): the strip's line stays inside the page column */
.acct-in { border-bottom: 0; background: linear-gradient(var(--line), var(--line)) left var(--sa-l) bottom 0 / calc(100% - var(--sa-l) - var(--sa-r)) 1px no-repeat; }
/* audit (a5): the WhatsApp line wraps on narrow phones */
.auth-fine .wa-link { white-space: normal; text-align: left; align-items: flex-start; max-width: 100%; }
.auth-fine .wa-link svg { flex: none; margin-top: 3px; }
/* audit (a6): with reduced motion the line wraps instead of running off both sides */
@media (prefers-reduced-motion: reduce) { .t4-marq span { white-space: normal; text-align: center; } .t4-marq-half { flex-wrap: wrap; justify-content: center; } }
/* my page's heading takes the focus for screen readers — no heavy box drawn for it (tester f2) */
#acct-title:focus { outline: none; }
/* tester f3: at 360 px the length beside an open stepper stays whole */
@media (max-width: 389px) { .row.has .len { font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: visible; } }
/* tester f1: the left / right tap zones cover the photo, not the text and its button (a click on „ნახეთ ფასები“ went back a slide) */
.t4-nav { bottom: 50%; z-index: 3; }
/* tester f10: the small label stays readable over a bright photo */
.t4-chip { background: rgb(14 15 10 / .45); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* tester f8: a focus ring that shows on every control; my page's small texts follow the theme */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #2f6b3a; outline-offset: 2px; }
:is(html[data-theme="dark"]) :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: #8fd19e; }
.acct-page .eyebrow, .acct-ph { color: var(--muted); }
.t4-pause { pointer-events: auto; width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: rgb(14 15 10 / .35); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }
.news.paused .t4-marq-run, .news.paused .nb5-slide.on .t4-bg { animation-play-state: paused !important; }
.t4-top { pointer-events: none; }
/* feedback (owner, 25.10): a quiet link in the footer, the sheet like sign-in */
.fb-open { justify-self: start; min-height: var(--tap); margin-top: 6px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
@media (hover: hover) { .fb-open:hover { border-color: var(--accent); } }
.auth textarea { width: 100%; min-height: 96px; resize: vertical; }
.fb-mode { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s-3); padding: 0; border: 0; }
.fb-mode label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); cursor: pointer; }
.fb-mode label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--surface-2); }
.fb-mode input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
/* „← მთავარ გვერდზე“ (owner, 25.10): on the checkout and the status page — a clear way back to the list */
.back-home { display: inline-flex; align-items: center; min-height: var(--tap); margin: 0 0 var(--s-3); padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; }
@media (hover: hover) { .back-home:hover { border-color: var(--accent); } }
.back-row { margin: var(--s-4) 0 0; }

/* sold out (owner, 27.10): the variety stays with its photo, the length says „ამოიწურა“ where the stepper was */
.row .sold { grid-area: step; justify-self: end; align-self: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--red); padding: 4px 10px; border-radius: 999px; background: var(--red-soft); white-space: nowrap; }
.row.locked .sold { grid-area: pr; justify-self: start; }
.v-out { display: inline-block; margin: 6px 0 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--red); padding: 2px 9px; border-radius: 999px; background: var(--red-soft); }
.variety.sold-out .v-photo img { filter: grayscale(.55) opacity(.75); }
.row .sold.sold-in { grid-area: len; justify-self: end; font-size: var(--fs-xs); padding: 2px 8px; }
/* (an amount never breaks inside a chip — tester a5) */
.ao-c { white-space: nowrap; }
.ao-ord { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--muted); }
/* consents (owner, 27.10) */
.check.consent { align-items: flex-start; line-height: 1.45; margin: 8px 0; }
.check.consent input { margin-top: 1px; }
.check.consent a { color: var(--accent); font-weight: var(--fw-semibold); }
.check.consent small { color: var(--muted); }
.acct-legal { margin: var(--s-5) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.acct-legal a, .acct-legal .linkish { color: var(--accent); font-weight: var(--fw-semibold); }
.foot-pol { font-weight: var(--fw-regular) !important; font-size: var(--fs-sm); }