@font-face {
  font-family: "Tenor Sans";
  src: url(fonts/tenor-sans-cyrillic-400-normal.woff2) format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Tenor Sans";
  src: url(fonts/tenor-sans-latin-ext-400-normal.woff2) format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Tenor Sans";
  src: url(fonts/tenor-sans-latin-400-v2.woff2) format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF;
}
@font-face {
  font-family: "Onest";
  src: url(fonts/onest-cyrillic-wght-normal.woff2) format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  /* only the ruble sign: 1 KB instead of the 28 KB Latin Extended file */
  src: url(fonts/onest-rub-wght-normal.woff2) format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+20BD;
}
@font-face {
  font-family: "Onest";
  src: url(fonts/onest-latin-wght-v2.woff2) format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF;
}

/* Fallbacks sized to match the web fonts, so text does not jump when the real font arrives */
@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans");
  size-adjust: 103.1%; ascent-override: 94.1%; descent-override: 29.6%; line-gap-override: 0%;
}
@font-face {
  font-family: "Tenor Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans");
  size-adjust: 107.4%; ascent-override: 85.7%; descent-override: 23.3%; line-gap-override: 0%;
}

:root {
  --paper: #ECEDEA;
  --glass: #F6F6F3;
  --ink: #1D1B22;
  --muted: #67646D;
  --line: #D2D2CD;
  --accent: #6D1F2E;

  --display: "Tenor Sans", "Tenor Fallback", sans-serif;
  --sans: "Onest", "Onest Fallback", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --radius: 22px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Same thin quiet scrollbar as inside the cards */
html { background: var(--paper); scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 24%, transparent) transparent; -webkit-text-size-adjust: 100%; }
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.has-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 12px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); }
.skip:focus { left: 12px; }

/* Header */
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
/* Frosted background on a pseudo-element: Safari 26 then tints the status bar from the page color, not a half-transparent layer */
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.topbar.scrolled { border-color: var(--line); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { font-family: var(--display); font-size: 22px; letter-spacing: .02em; color: inherit; text-decoration: none; }

.top-actions { display: flex; align-items: center; gap: 8px; }
.fav-btn {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass);
  cursor: pointer;
}
.fav-count {
  position: absolute; top: -4px; right: -4px;
  display: grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-weight: 600; font-size: 11px; font-variant-numeric: tabular-nums;
}
.fav-count:empty { display: none; }
.fav-count.bump { animation: bump .35s ease-out; }
.heart path { fill: transparent; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
[aria-pressed="true"] > .heart path { fill: var(--accent); stroke: var(--accent); }
.pop > .heart { animation: heart-pop .35s ease-out; }

.cart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass);
  font-weight: 500; font-size: 15px;
  cursor: pointer;
}
.count {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.count.bump { animation: bump .35s ease-out; }
/* Both labels share one grid cell: the button is as wide as the longer one and never resizes */
.cart-label { display: inline-grid; }
.cart-label > span { grid-area: 1 / 1; transition: opacity .2s; }
.cart-label > span + span, .cart-btn.flash .cart-label > span:first-child { opacity: 0; }
.cart-btn.flash .cart-label > span + span { opacity: 1; }

/* Hero */
/* Compact on purpose: the catalog is the point of the page, so the hero only names the shop
   and offers the quiz — on a phone it leaves the shelf and the toolbar on the first screen. */
.hero { padding-block: clamp(20px, 4.5vw, 56px) 0; }
.hero-title {
  margin: 0;
  max-width: 10ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 8vw, 104px);
  line-height: .92;
  letter-spacing: -.025em;
}
.hero-lead {
  margin: 14px 0 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.45;
}
.hero-cta {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 18px; padding: 12px 22px;
  border: 1px solid var(--ink); border-radius: 999px;
  background: none;
  font-weight: 500; font-size: 16px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.hero-cta span { color: var(--muted); font-weight: 400; font-size: 14px; transition: color .2s; }
@media (hover: hover) {
  .hero-cta:hover { background: var(--ink); color: var(--paper); }
  .hero-cta:hover span { color: color-mix(in srgb, var(--paper) 70%, transparent); }
}

/* Sets live under the catalog; this is their entry on the first screen. Same pill as the quiz,
   so both labels start on one line, but quieter: light border, no ink — one primary action. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-actions .hero-cta { margin-top: 0; }
.hero-sets { border-color: var(--line); background: var(--glass); color: var(--ink); text-decoration: none; }
@media (hover: hover) {
  .hero-sets:hover { border-color: var(--ink); background: var(--glass); color: var(--ink); }
  .hero-sets:hover span { color: var(--muted); }
}
/* Phone: two tiles side by side, not two more pills stacked on top of the search pill — three
   identical pills read as one group with a hole in it. Different shape, own group, shorter hero. */
@media (max-width: 759px) {
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .hero-cta {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 13px 14px; border-radius: 18px;
    text-align: left;
    line-height: 1.3;
  }
  .hero-actions .hero-cta span { font-size: 13px; }
  /* The picture sits on top, like the media of a card; bottom-aligned so both tiles share a baseline */
  .hero-actions .hero-cta .cta-art {
    display: flex; align-items: flex-end; gap: 3px;
    height: 40px; margin-bottom: 8px;
  }
  .cta-art .bottle { width: 18px; }
  .cta-art .set-shelf { padding: 0 3px; border-bottom-width: 1.5px; }
  .cta-art .set-shelf .bottle { width: 15px; }
}
@media (min-width: 760px) { .cta-art { display: none; } }

/* Shelf */
/* Phone: the shelf is a showcase, and it pushed the catalog off the first screen. The cards
   below carry the same bottles, so on a small screen the catalog goes first instead. */
@media (max-width: 759px) { .shelf-sec { display: none; } }
.shelf-sec { margin-top: clamp(20px, 4vw, 48px); }
.shelf-rail { position: relative; max-width: 1240px; margin-inline: auto; }
.shelf-rail::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0;
  height: 2px; background: var(--ink); border-radius: 2px;
}
.shelf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(6px, 1vw, 12px);
  padding: 16px var(--gutter) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }
@media (max-width: 1099px) {
  .shelf {
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
}
.bottle-btn {
  flex: 0 0 auto;
  width: clamp(32px, 3.4vw, 42px);
  padding: 0; border: 0; background: none;
  cursor: pointer;
  transition: transform .2s ease;
}
@media (hover: hover) {
  .bottle-btn:hover { transform: translateY(-4px); }
}
.bottle-btn:focus-visible { outline-offset: 4px; border-radius: 6px; }
.bottle { display: block; width: 100%; height: auto; }
.shelf .juice {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: fill 1.1s cubic-bezier(.25, .8, .25, 1) both;
  animation-delay: calc(var(--i) * 35ms + 60ms);
}
@media (min-width: 1100px) {
  .bottle-btn { flex: 1 1 0; min-width: 0; max-width: 42px; }
}
.shelf-note { margin-top: 10px; margin-bottom: 0; color: var(--muted); font-size: 13px; }
.shelf-note span { display: block; max-width: 60ch; text-wrap: balance; }

/* Catalog */
/* When a filter leaves few results the page does not collapse under the finger */
.catalog { min-height: 100svh; scroll-margin-top: calc(var(--bar-top, 61px) + 12px); }
/* Search, then the facets, then sorting. The search field takes whatever space is left,
   so the row never opens a hole in the middle.

   Sticky split, by measurement: header + the whole toolbar is 12% of a desktop screen but
   18.8% of a phone, and a sticky bar past ~10% — or two of them stacked — costs more than
   it gives. So the phone keeps exactly one sticky bar, the filters, and lets the header
   scroll away; the cart stays reachable through the fixed bottom bar, which appears
   precisely when the cart has something in it. Search is never sticky: it is set once,
   while filters and sorting are what gets adjusted mid-scroll.

   Whichever element is NOT the sticky one is display:contents, so the sticky one is always
   a direct child of the catalog. A sticky element can only travel inside its parent's box,
   and a wrapper only as tall as two rows would carry the bar straight off the screen. */
.bar {
  z-index: 15;
  margin-inline: calc(var(--gutter) * -1);
  padding: 6px var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
/* Phone: the header is not sticky here, the filter row is */
.controls { display: contents; }
.search { display: block; margin-block: 26px 10px; }
.toolbar {
  position: sticky; top: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 759px) { .topbar { position: static; } }

/* Desktop: the header stays, and the whole row (search included) docks under it */
@media (min-width: 760px) {
  .controls {
    position: sticky; top: var(--bar-top, 61px);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-block: clamp(32px, 5vw, 56px) 14px;
  }
  .search { flex: 1 1 180px; min-width: 180px; margin: 0; }
  .toolbar { display: contents; }
}
/* Waiting for app.js to apply the filters from the link: the space is kept, only the
   contents are held back, so nothing moves once they arrive */
[data-prefilter] .controls, [data-prefilter] .toolbar,
[data-prefilter] .grid, [data-prefilter] .chips, [data-prefilter] .result-line { visibility: hidden; }

.dock-sentinel { height: 0; }
/* Docked: only the border changes. Touching the height would change the space the sticky
   element still holds in flow, and the page under it would jump. */
.is-docked { border-bottom-color: var(--line); }
.search input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass);
  font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--muted); }
@media (min-width: 760px) {
  .search { flex: 1 1 180px; min-width: 180px; order: 0; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
}
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card-wrap { position: relative; display: flex; }
/* Top-left, opposite the heart; over the picture, so adding to the cart moves nothing in the grid */
.in-cart {
  position: absolute; top: 17px; left: 10px; z-index: 1;
  max-width: calc(100% - 66px);
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
@media (max-width: 759px) {
  .in-cart { top: 14px; padding: 3px 8px; font-size: 11.5px; }
  .in-cart-fmt { display: none; }
}
.card-wrap > .card { flex: 1; }
.fav {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--glass) 78%, transparent);
  color: var(--ink);
  cursor: pointer;
}
@media (hover: hover) {
  .fav:hover .heart path { stroke: var(--accent); }
}
.card {
  display: flex; flex-direction: column;
  padding: 0; border: 0; border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass);
  text-align: left;
  cursor: pointer;
}
.card-media {
  display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 5 / 4;
  padding-bottom: 9%;
  background: color-mix(in srgb, var(--c) 17%, var(--glass));
}
.card-media .bottle { width: 26%; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 14px 14px 16px; }
.brand { color: var(--muted); font-size: 13px; line-height: 1.3; }
.name {
  margin: 4px 0 6px;
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.15;
}
.notes { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 2px 8px;
  margin-top: auto; padding-top: 12px;
  font-size: 14px;
}
.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.stock { color: var(--muted); font-size: 12.5px; }
.stock.low { color: var(--accent); }

.empty { padding: 40px 0; }
.empty p { margin: 0 0 16px; font-size: 17px; }

.section-title {
  margin: 0 0 28px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
}

/* "Как мы работаем": the same quiet rows as the rest of the page — a hairline, a bold line, a muted line */
.trust { padding-block: clamp(56px, 9vw, 104px) 0; }
.trust-list { display: grid; margin: 0; padding: 0; list-style: none; }
.trust-list li { display: grid; gap: 4px; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.trust-list strong { font-size: 17px; font-weight: 600; }
.trust-list span { max-width: 44ch; color: var(--muted); }
@media (min-width: 760px) { .trust-list { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.trust-more { margin: 8px 0 0; font-size: 15px; }
.trust-more a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--line); }
/* Product sheet: the returns promise right by the volumes and the Add button, where doubt peaks */
.sheet-trust { margin: 10px 0 0; font-size: 13.5px; }
.sheet-trust a { color: var(--muted); text-underline-offset: 3px; }

.footer {
  margin-top: clamp(64px, 10vw, 112px);
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  color: var(--muted); font-size: 14px; line-height: 1.5;
}
.footer a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .footer a:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* Stacked on a phone (no accordions: two short columns do not need hiding), side by side on a desktop */
/* The dividers sit on the inner blocks, not on .footer: its border would run through the page
   gutters and come out wider than the line above the copyright */
.foot-cols { display: grid; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.foot-title { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.foot-list { margin: 0; padding: 0; list-style: none; }
/* Rows tall enough to tap without hitting the neighbour */
.foot-list a { display: inline-block; padding-block: 6px; }
.foot-seller { margin: 0; }
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Legal pages: one readable column, headings from the shop's type scale */
.doc { max-width: 72ch; padding-block: clamp(24px, 5vw, 56px) 0; line-height: 1.6; }
.doc-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 5vw, 48px); line-height: 1.1; }
.doc-lead { margin: 12px 0 0; color: var(--muted); font-size: 17px; }
.doc-edition { margin: 8px 0 28px; color: var(--muted); font-size: 13.5px; }
.doc h2 { margin: 32px 0 10px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 1.2em; }
.doc li { margin-bottom: 4px; }
.doc a { color: var(--accent); text-underline-offset: 3px; }
.doc-req { display: grid; gap: 6px; margin: 0; }
.doc-req div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; }
.doc-req dt { color: var(--muted); }
.doc-req dd { margin: 0; overflow-wrap: anywhere; }
.doc-back { color: var(--ink); font-weight: 500; font-size: 15px; text-decoration: none; }

/* Order tracking page: status first, then the stages, the parcel, the contents, and who to ask */
.order-page { max-width: 640px; padding-block: clamp(24px, 5vw, 56px) 0; }
.order-loading { color: var(--muted); }
.order-date { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.order-status { margin: 14px 0 0; }
.order-pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--glass)); color: var(--accent);
  font-size: 14px; font-weight: 600;
}
.order-pill-delivered { background: color-mix(in srgb, #2F6B45 12%, var(--glass)); color: #2F6B45; }
.order-pill-cancelled, .order-pill-refunded { background: var(--glass); color: var(--muted); }
.order-next { margin: 12px 0 24px; font-size: 16px; line-height: 1.5; }
.order-banner { margin: 0 0 24px; padding: 14px 16px; border-radius: 14px; background: var(--glass); color: var(--muted); }
/* Stages: a vertical line of dots — five labels do not fit side by side on a 360px phone */
.order-steps { margin: 0 0 28px; padding: 0; list-style: none; }
.order-step { position: relative; display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding-bottom: 18px; }
.order-step:last-child { padding-bottom: 0; }
.order-step::before {
  content: ""; position: absolute; left: 10px; top: 16px; bottom: -2px; width: 2px; background: var(--line);
}
.order-step:last-child::before { display: none; }
.order-step.is-done::before { background: var(--accent); }
.order-dot { grid-row: span 2; width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--line); background: var(--paper); position: relative; z-index: 1; }
.is-done .order-dot { border-color: var(--accent); background: var(--accent); }
.is-current .order-dot { border-color: var(--accent); background: var(--paper); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 11px var(--accent); }
.order-step-label { font-weight: 500; line-height: 22px; }
.is-todo .order-step-label { color: var(--muted); font-weight: 400; }
.order-step-at { color: var(--muted); font-size: 13px; }
.order-h { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 22px; }
.order-track { margin-bottom: 28px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
.order-track p { margin: 0; }
.order-track-num { margin-right: 12px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.order-muted { display: block; color: var(--muted); font-size: 14px; }
.order-items { margin: 0; padding: 0; list-style: none; }
.order-items li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.order-item-title { display: block; font-weight: 500; }
.order-item-sum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-page .co-summary { margin-bottom: 8px; }
.order-help { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); line-height: 1.55; }
.order-help p { margin: 0; }
.order-help a, .order-page .link-btn { color: var(--accent); }

/* "Вы смотрели" */
.seen { padding-block: clamp(28px, 5vw, 48px) 0; }
.seen-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.seen-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3vw, 30px); line-height: 1.1; }
.seen-head .link-btn { color: var(--muted); font-size: 14px; }
.seen-row {
  display: flex; gap: 8px;
  min-height: 62px; /* ряд карточек: 46px флакон + 12px поля + 4px отступы ряда */
  margin-inline: calc(var(--gutter) * -1);
  padding: 2px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.seen-row::-webkit-scrollbar { display: none; }
.seen-item {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 38px auto; align-items: center; gap: 10px;
  max-width: 240px;
  padding: 6px 16px 6px 6px;
  border: 0; border-radius: 14px;
  background: var(--glass);
  text-align: left;
  cursor: pointer;
}
.seen-item .sim-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Под историей — тот же шаг, что и над ней (clamp у .seen): иначе блок висит между полкой
   и каталогом. Когда истории нет, у фильтров остаётся их обычный отступ. */
.seen:not([hidden]) + .catalog .controls { margin-top: clamp(28px, 5vw, 48px); }
@media (min-width: 1080px) {
  /* Четыре карточки в ряд по колонкам каталога — тот же шаг, что у .grid, поэтому история
     стоит ровно над карточками. Рядов заранее известное число, значит известна и высота. */
  .seen-row { flex-wrap: wrap; gap: clamp(10px, 2vw, 20px); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .seen-item { flex: 0 0 calc((100% - 3 * clamp(10px, 2vw, 20px)) / 4); max-width: none; }
  :root[data-seen="2"] .seen-row { min-height: 140px; } /* два ряда по 58px + отступ 20px + поля 4px */
}

/* Sample sets: all five visible at once, a vertical list on phones, one row on desktop */
.sets { padding-block: clamp(56px, 9vw, 104px) 0; scroll-margin-top: 72px; }
.sets .section-title { margin-bottom: 10px; }
.section-lead { margin: 0 0 22px; max-width: 52ch; color: var(--muted); font-size: 16.5px; }
.set-row { display: grid; gap: 10px; }
.set {
  display: grid; grid-template-columns: 124px minmax(0, 1fr);
  padding: 0; border: 0; border-radius: 18px;
  overflow: hidden;
  background: var(--glass);
  text-align: left;
  cursor: pointer;
}
.set-media {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 14px 10px 16px;
  background: color-mix(in srgb, var(--c) 16%, var(--glass));
}
.set-shelf {
  display: flex; align-items: flex-end; gap: 3px;
  padding: 0 4px;
  border-bottom: 2px solid var(--ink);
}
.set-shelf .bottle { width: 17px; }
.set-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 13px; }
.set-name { font-family: var(--display); font-size: 20px; line-height: 1.15; }
.set-items {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--muted); font-size: 13px; line-height: 1.4;
}
.set-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.set-from { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.save {
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent); font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.save:empty { display: none; }
@media (hover: hover) {
  .set { transition: transform .2s ease; }
  .set:hover { transform: translateY(-2px); }
}
@media (min-width: 760px) {
  .set-row { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
  .set { grid-template-columns: none; grid-template-rows: auto 1fr; }
  .set-media { height: 84px; padding: 0 12px; }
  .set-shelf .bottle { width: 24px; }
  .set-body { padding: 14px 16px 16px; }
}
@media (min-width: 1080px) {
  .set-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Note chips inside the product sheet ("похоже на это") */
.fam {
  flex: none;
  padding: 7px 13px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--glass);
  font-size: 14px; white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.fam .n { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fam[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--glass)); color: var(--accent); }
.fam[aria-pressed="true"] .n { color: inherit; }
.fam:disabled { opacity: .4; cursor: default; }
.fam.sm { padding: 5px 11px; background: var(--paper); font-size: 13.5px; }
@media (hover: hover) {
  .fam:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--line); }
}
/* Facets. Every one of them is the same pill, so the toolbar reads as one control, not four rows.
   The panel is anchored to the facet row, not to its own pill, so it can never hang off the edge. */
.facets { position: relative; z-index: 15; display: none; gap: 6px; }
@media (min-width: 760px) { .facets { display: flex; } }
.facet > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 15px; white-space: nowrap;
  cursor: pointer; list-style: none;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}
.facet[open] > summary { border-color: var(--ink); }
.facet[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.facet-panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: max-content; min-width: 210px; max-width: min(88vw, 560px);
  max-height: 58vh;
  padding: 8px;
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass);
  box-shadow: 0 20px 46px -24px rgba(29, 27, 34, .5);
}
/* The last facets open leftwards, so a panel never runs past the edge of a narrow window */
.facet[data-facet="brand"] .facet-panel, .facet[data-facet="price"] .facet-panel { left: auto; right: 0; }
/* 19 brands in one column would need scrolling; two columns fit the whole list at once,
   flowing top to bottom so the alphabet still reads down the page */
.facet-panel.cols2 { display: grid; grid-auto-flow: column; grid-template-rows: repeat(10, auto); }

/* The count badge keeps its slot while empty: turning a facet on must not resize the pill,
   which would shove every control to its right and restretch the search field */
.facet > summary .n, .filters-btn .n {
  display: grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: var(--accent); color: var(--paper);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.facet > summary .n:empty, .filters-btn .n:empty { visibility: hidden; }

/* One option = one row: label left, count right. Pills of different widths would wrap
   into ragged rows and re-wrap every time a count changes. */
.fopt {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: 10px;
  background: none;
  color: var(--ink); font: inherit; font-size: 14.5px; text-align: left;
  cursor: pointer;
}
.fopt-box {
  flex: none;
  width: 17px; height: 17px;
  border: 1.5px solid var(--line); border-radius: 5px;
  background: var(--paper);
  transition: background-color .15s, border-color .15s;
}
.fopt[role="radio"] .fopt-box { border-radius: 999px; }
.fopt[aria-checked="true"] .fopt-box {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6l3 3L10 1' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 9px no-repeat;
}
.fopt[role="radio"][aria-checked="true"] .fopt-box {
  background: radial-gradient(circle at center, var(--paper) 0 2.6px, var(--accent) 3.2px);
}
.fopt-label { flex: 1; white-space: nowrap; }
/* Counts keep a fixed width, so a row does not shift when 13 turns into 2 */
.fopt-n {
  flex: none; min-width: 2ch;
  color: var(--muted); font-variant-numeric: tabular-nums; text-align: right;
}
/* «Когда»: time of day above, seasons below — a hairline, not a heading, keeps the panel short */
.fopt-sep { display: block; height: 1px; margin: 6px 10px; background: var(--line); }
.fopt:disabled { opacity: .42; cursor: default; }
.fopt:disabled .fopt-box { background: transparent; }
@media (hover: hover) {
  .fopt:not(:disabled):hover { background: var(--paper); }
}

/* On a phone the four pills become one button; a popover would cover the results it filters */
.filters-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent;
  font: inherit; font-size: 15px; white-space: nowrap;
  cursor: pointer;
}
@media (min-width: 760px) { .filters-btn { display: none; } }

/* Sorting. The label stays outside the control, so the current order reads without opening it. */
.sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sort-label { color: var(--muted); font-size: 14px; white-space: nowrap; }
.sort select {
  padding: 9px 32px 9px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2367646D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--ink); font: inherit; font-size: 15px;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  width: 202px; max-width: 100%; /* widest option ("Сначала дешёвые"), so picking one moves nothing */
}
/* Phone: sorting takes whatever the Фильтры button leaves. The width comes from the row, not
   from the chosen option, so nothing moves — and a 360px screen no longer wraps it to a new line. */
@media (max-width: 759px) {
  .sort { flex: 1 1 0; min-width: 0; }
  .sort select { width: 100%; padding-block: 9px; }
}
/* Five facets + search + sort make one row only from 1080px, and only without the visible
   "Сортировка" word (the select reads as sorting anyway; screen readers still get the label) */
@media (max-width: 1279px) {
  .sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* Tablet: sorting joins the search row, the facets get the second row to themselves — two even
   rows instead of three ragged ones */
@media (min-width: 760px) and (max-width: 1079px) {
  .sort { order: 1; }
  .facets { order: 2; }
}

/* Applied filters: what is on stays visible without reopening anything */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:not(:empty) { margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--glass));
  color: var(--accent); font-size: 13.5px; white-space: nowrap;
  cursor: pointer;
}
.chip-x { opacity: .6; transition: opacity .2s; }
@media (hover: hover) {
  .chip:hover .chip-x { opacity: 1; }
}

/* Filter sheet (phone) */
.filters-sheet {
  width: 100%;
  max-height: 88dvh;
  margin: auto auto 0;
  border-radius: 24px 24px 0 0;
  overscroll-behavior: contain;
}
.filters-sheet[open] { display: flex; flex-direction: column; animation: sheet-up .42s cubic-bezier(.32, .72, 0, 1); }
.filters-sheet[open].closing { animation: sheet-down .28s cubic-bezier(.4, 0, 1, 1) forwards; }
.fs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.fs-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; }
.fs-body { flex: 1; padding: 4px 20px 20px; overflow: auto; overscroll-behavior: contain; }
.fgroup { padding-top: 20px; }
.fgroup-title { margin: 0 0 10px; color: var(--muted); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.fgroup-opts { display: flex; flex-direction: column; }
.fgroup-opts .fopt { font-size: 16px; padding: 11px 8px; }
.fs-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--glass);
}
.fs-foot .btn-primary { flex: 1; }
.fs-foot .link-btn:disabled {
  color: var(--muted); text-decoration-color: transparent;
  cursor: default;
}

.result-line {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
  color: var(--muted); font-size: 14.5px;
}
.result-count { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.result-reset { flex: none; margin-left: auto; transition: opacity .2s; }
.result-reset[inert] { opacity: 0; }
.link-btn {
  padding: 0; border: 0; background: none;
  color: var(--ink); font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.empty-hint { color: var(--muted); font-size: 15px !important; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1;
  height: 52px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-weight: 600; font-size: 16px;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .15s;
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
.btn-primary.wide { width: 100%; }
.btn-ghost {
  height: 46px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: 999px;
  background: none;
  font-weight: 500; font-size: 15px;
  cursor: pointer;
}
.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass);
  cursor: pointer;
}

.stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper);
}
.stepper button {
  width: 44px; height: 50px;
  border: 0; background: none;
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.stepper button:disabled { color: var(--line); cursor: default; }
.stepper output { min-width: 22px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper.sm button { width: 34px; height: 34px; font-size: 17px; }

/* Cart bar: the only cart entry on phones, the header button is the only one on desktop */
.cart-bar {
  position: fixed; z-index: 30;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  padding: 0;
  border: 0; border-radius: 999px;
  /* iOS 26 Safari tints its bottom toolbar with the background of fixed elements near the edge.
     The element itself stays transparent; the dark pill is a pseudo-element, which Safari ignores. */
  background: transparent; color: var(--paper);
  isolation: isolate;
  font-weight: 500; font-size: 16px; text-align: left;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 24px));
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, visibility 0s linear .4s;
}
.cart-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--ink);
}
.cart-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, visibility 0s;
}
.bar-main {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 22px;
  transition: opacity .25s ease, transform .25s ease;
}
.bar-note {
  position: absolute; inset: 0;
  padding: 15px 22px;
  overflow: hidden;
  text-align: center; white-space: nowrap; text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.cart-bar.flash .bar-main { opacity: 0; transform: translateY(-10px); }
.cart-bar.flash .bar-note { opacity: 1; transform: none; }
.bar-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-btn { transition: border-color .2s; }
.cart-btn.flash { border-color: var(--ink); }

@media (max-width: 759px) {
  .cart-btn { display: none; }
}

/* Back to top: bottom right, where people look for it; on a phone it rides above the cart bar.
   Same trick as the cart bar: the element is transparent and the pill is a pseudo-element,
   so iOS Safari does not tint its toolbar with it. */
.to-top {
  position: fixed; z-index: 29;
  right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--ink);
  isolation: isolate;
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility 0s linear .2s, bottom .4s cubic-bezier(.2, .8, .2, 1);
}
.to-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--line); border-radius: inherit;
  background: color-mix(in srgb, var(--glass) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -14px rgba(29, 27, 34, .45);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 759px) {
  body.has-bar .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 760px) { .to-top { right: 24px; bottom: 24px; } }
@media (min-width: 760px) {
  .cart-bar { display: none; }
  body.has-bar { padding-bottom: 0; }
}

/* Dialogs */
dialog {
  max-width: none; max-height: none;
  padding: 0; border: 0;
  background: var(--glass); color: var(--ink);
}
dialog::backdrop { background: rgba(29, 27, 34, .36); animation: fade-in .35s ease-out; }

.sheet {
  width: 100%;
  max-height: 92dvh;
  margin: auto auto 0;
  border-radius: 24px 24px 0 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.sheet[open] { animation: sheet-up .42s cubic-bezier(.32, .72, 0, 1); }
.sheet[open].closing { animation: sheet-down .28s cubic-bezier(.4, 0, 1, 1) forwards; }
.sheet-in { position: relative; display: grid; }
.sheet .close { position: absolute; top: 12px; right: 12px; z-index: 1; }
.sheet-media {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 40px 0 24px;
  background: color-mix(in srgb, var(--c) 20%, var(--glass));
}
.sheet-media .bottle { width: 62px; }
.sheet-body { padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.sheet-body > p { margin: 0; }
/* Headings are focused on open only to move the screen reader there, so they must not
   draw a focus ring for everyone else */
.sheet-name:focus, .drawer-head h2:focus, .fs-head h2:focus { outline: none; }
.sheet-name {
  margin: 4px 0 8px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.05;
}
.sheet-meta { color: var(--muted); font-size: 15px; }
.sheet-notes { margin-top: 10px !important; font-size: 16px; }
.sheet-price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 2px; }
/* ♡ стоит в одной липкой полосе с «Добавить в корзину»: рядом с основным действием его находят,
   но оно заметно вторичнее — контур против заливки. Ширина фиксированная, поэтому кнопка
   покупки не меняет размер при нажатии. */
.fav-buy {
  flex: 0 0 52px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  cursor: pointer;
  transition: border-color .2s;
}
.fav-buy[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.sheet-price { margin-top: 0 !important; font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
.sheet-media .set-shelf { gap: 6px; padding: 0 8px; }
.sheet-media .set-shelf .bottle { width: 30px; }
.sheet .seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; padding: 3px; border-radius: 999px; background: var(--paper); }
.sheet .seg button {
  height: 40px; border: 0; border-radius: 999px;
  background: none; color: var(--muted); font-weight: 500; font-size: 15px;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.sheet .seg [aria-checked="true"] { background: var(--glass); color: var(--ink); box-shadow: 0 1px 3px rgba(29, 27, 34, .12); }
.set-price { display: flex; align-items: center; gap: 8px; margin-top: 14px !important; font-variant-numeric: tabular-nums; }
.set-price strong { font-size: 24px; font-weight: 600; }
.set-price s { color: var(--muted); font-size: 15px; }
.bundle { margin-top: 24px; }
.bundle h3, .similar h3 { margin: 0 0 8px; color: var(--muted); font-weight: 400; font-size: 14px; }
.bundle-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--glass));
  text-align: left;
  cursor: pointer;
}
.bundle-shelf { display: flex; align-items: flex-end; gap: 2px; padding: 0 3px; border-bottom: 1.5px solid var(--ink); }
.bundle-shelf .bottle { width: 14px; }
.bundle-price { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.bundle-price strong { font-size: 15px; }
.bundle-price s { color: var(--muted); font-size: 12.5px; }
.bundle-add { margin-top: 10px; color: var(--accent); font-weight: 500; font-size: 14.5px; }
.sheet-fams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }

/* Performance: a short label/value table right under the notes */
.perf { display: grid; margin: 18px 0 0; border-top: 1px solid var(--line); }
.perf > div {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 40px; padding-block: 6px;
  border-bottom: 1px solid var(--line);
}
.perf dt { color: var(--muted); font-size: 14px; }
.perf dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 15px; }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 18px; height: 6px; border-radius: 3px; background: var(--line); }
.meter i.on { background: var(--accent); }
/* Scent finder */
.quiz { display: block !important; }
.quiz .sheet-body { padding-top: 16px; }
.quiz-top { display: flex; align-items: center; gap: 14px; min-height: 40px; padding-right: 52px; color: var(--muted); font-size: 14px; }
.quiz-top .link-btn { color: var(--ink); }
.quiz-progress { height: 4px; margin: 8px 0 22px; overflow: hidden; border-radius: 2px; background: var(--line); }
.quiz-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .35s ease; }
.quiz .sheet-name { font-size: clamp(26px, 4vw, 34px); }
.quiz-hint { margin: 6px 0 0 !important; color: var(--muted); font-size: 14.5px; }
.quiz-options { display: grid; gap: 8px; margin-top: 18px; }
.quiz-options.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-opt {
  display: grid; align-content: center; gap: 2px;
  min-height: 58px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.quiz-opt strong { font-weight: 500; font-size: 16px; line-height: 1.25; }
.quiz-opt span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.quiz-options.two .quiz-opt { padding: 10px 12px; }
.quiz-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--glass); box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) {
  .quiz-opt:not([aria-pressed="true"]):hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
}
.quiz-results { margin-top: 20px; }
.quiz-results .sim-sub { white-space: normal; }
.quiz-again { margin: 22px 0 4px !important; }
@media (min-width: 760px) {
  .sheet.is-quiz { width: min(600px, calc(100% - 48px)); }
}

.perf-note { margin-top: 6px !important; color: var(--muted); font-size: 12.5px; }
.similar { margin-top: 24px; }
.sim-list { display: grid; gap: 6px; }
.sim {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  width: 100%; padding: 6px 12px 6px 6px;
  border: 0; border-radius: 12px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}
.sim-thumb {
  display: flex; align-items: flex-end; justify-content: center;
  height: 46px; padding-bottom: 5px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--c) 22%, var(--glass));
}
.sim-thumb .bottle { width: 20px; }
.sim-name { display: block; font-family: var(--display); font-size: 16px; line-height: 1.2; }
.sim-sub { display: block; color: var(--muted); font-size: 12.5px; }
.sim-price { color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.opts { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; border: 0; }
.opts legend { margin-bottom: 8px; padding: 0; color: var(--muted); font-size: 14px; }
.opt {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper);
  cursor: pointer;
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt.is-checked { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--glass); }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt .p { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Per-ml price: findable for whoever compares volumes, quiet for everyone else */
.opt-label small { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.sheet-stock { margin-top: 14px !important; color: var(--muted); font-size: 13.5px; }
/* Buy row sticks to the bottom; it is the last block, so the body drops its bottom padding
   instead of pulling the row down with a negative margin (that made it cover the last item) */
.sheet-body:has(> .buy) { padding-bottom: 0; }
.buy {
  position: sticky; bottom: 0;
  display: flex; gap: 10px;
  margin: 16px -20px 0;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--glass);
}

@media (min-width: 760px) {
  /* Desktop: the window stays put, only the text column scrolls, with a thin quiet scrollbar */
  .sheet {
    width: min(880px, calc(100% - 48px));
    margin: auto;
    border-radius: 24px;
    overflow: hidden;
  }
  .sheet-in { max-height: 92dvh; }
  .sheet .sheet-body {
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .2s;
    /* text fades out under the top edge instead of being cut */
    -webkit-mask-image: linear-gradient(transparent, #000 28px);
    mask-image: linear-gradient(transparent, #000 28px);
  }
  .sheet .sheet-body:hover, .sheet .sheet-body:focus-within { scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
  .sheet[open] { animation: pop-in .26s ease-out; }
  .sheet[open].closing { animation: pop-out .22s ease-in forwards; }
  .sheet-in { grid-template-columns: 5fr 6fr; }
  .sheet-media { align-items: center; padding: 48px 0; }
  .sheet-media .bottle { width: 104px; }
  .sheet-body { padding: 36px 36px 32px; }
  .buy { margin: 20px -36px 0; padding: 14px 36px 24px; }
}

.drawer {
  width: min(440px, 100%);
  height: 100dvh; max-height: 100dvh;
  margin: 0 0 0 auto;
}
.drawer[open] { display: flex; flex-direction: column; animation: slide-in .42s cubic-bezier(.32, .72, 0, 1); }

/* Closing: listed after the open rules and more specific, so they win */
dialog[open].closing::backdrop { animation: fade-out .28s ease-in forwards; }
.drawer[open].closing { animation: slide-out .28s cubic-bezier(.4, 0, 1, 1) forwards; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px;
  border-bottom: 1px solid var(--line);
}
.drawer-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; }
.drawer-list { flex: 1; margin: 0; padding: 0 20px; overflow: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
.line {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.line-thumb {
  display: flex; align-items: flex-end; justify-content: center;
  height: 64px; padding-bottom: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 20%, var(--paper));
}
.line-thumb .bottle { width: 24px; }
.set-thumb { gap: 2px; }
.set-thumb .bottle { width: 15px; }
.line p { margin: 0; }
.line-title { font-family: var(--display); font-size: 17px; line-height: 1.2; }
.line-link, .line-name {
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.line-link { display: block; border-radius: 12px; }
.line-name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
/* Photo and title react together, so it reads as one link */
.line:has(.line-link:hover, .line-name:hover) .line-name { text-decoration-color: currentColor; }
.line:has(.line-link:hover, .line-name:hover) .line-thumb { background: color-mix(in srgb, var(--c) 30%, var(--paper)); }
.line-thumb { transition: background-color .2s; }
.line-sub { color: var(--muted); font-size: 13px; }
.line-controls { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.remove {
  padding: 4px; border: 0; background: none;
  color: var(--muted); font-size: 13.5px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.line-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drawer-foot {
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}
.total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 18px; }
.total strong { font-variant-numeric: tabular-nums; }
.foot-note { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; }
/* Header «Заказы»: shown only once this browser has placed an order */
.orders-btn {
  height: 42px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass);
  font: inherit; font-weight: 500; font-size: 15px;
  cursor: pointer;
}

/* Cart footer: how far free delivery is */
.ship-hint { margin-bottom: 14px; }
.ship-hint p { margin: 0 0 8px; font-size: 14px; }
.ship-bar { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ship-bar span { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s; }

/* Checkout: one scrolling column, the total and the button stay pinned at the bottom */
.checkout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.co-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.co-group { margin: 0; padding: 18px 0 0; border: 0; }
.co-group legend { padding: 0; margin-bottom: 12px; font-family: var(--display); font-size: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--glass); color: var(--ink);
  font: inherit; font-size: 16px; /* 16px: iOS does not zoom into the field */
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 64px; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.field-optional { color: var(--muted); font-weight: 400; }
.field-hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.field-error { margin: 0; color: var(--accent); font-size: 13px; }
.field-error:not(:empty) { margin-top: 6px; }
.field.has-error input, .field.has-error textarea { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.co-services { display: grid; gap: 8px; margin-bottom: 14px; }
.co-summary { display: grid; gap: 6px; margin: 8px 0 18px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.co-summary div { display: flex; justify-content: space-between; gap: 12px; }
.co-summary dt { color: var(--muted); }
.co-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.co-summary .co-total { margin-top: 4px; font-size: 18px; }
.co-summary .co-total dt { color: var(--ink); }
.co-summary .co-total dd { font-weight: 600; }
/* Consent: a real checkbox (keyboard, screen readers), drawn like the filter boxes */
.field .co-consent { position: relative; display: flex; margin: 0; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400; line-height: 1.45; cursor: pointer; }
.co-consent input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; }
.co-check {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--line); border-radius: 6px; background: var(--glass);
  transition: background-color .15s, border-color .15s;
}
.co-consent input:checked + .co-check {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6l3 3L10 1' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
}
.co-consent input:focus-visible + .co-check { outline: 2px solid var(--accent); outline-offset: 2px; }
.has-error .co-check { border-color: var(--accent); }
.co-consent { padding-block: 4px; }
.co-consent-doc { margin-left: 30px; }
.co-consent-doc a, .checkout .foot-note a { color: inherit; text-underline-offset: 3px; }
/* Honeypot: off-screen for people, visible to naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.co-form-error { margin: 0; color: var(--accent); font-size: 14px; }
.co-form-error:not(:empty) { margin-bottom: 12px; }
.btn-primary:disabled { opacity: .7; cursor: progress; }

/* Order placed */
.co-done { display: flex; flex-direction: column; gap: 12px; padding: 28px 20px; overflow: auto; }
.co-done-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--glass)); color: var(--accent); }
.co-done-number { margin: 6px 0 0; font-family: var(--display); font-size: 28px; line-height: 1.1; }
.co-done-sum { margin: 0; color: var(--muted); }
.co-next { margin: 6px 0 8px; padding-left: 1.2em; line-height: 1.5; }
.co-next li + li { margin-top: 6px; }
.co-done .foot-note { margin-top: 0; }
.co-done .btn-primary { flex: none; }
.btn-ghost.wide { width: 100%; }

/* «Заказы» in the drawer */
.orders-list li { border-bottom: 1px solid var(--line); }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; color: inherit; text-decoration: none; }
.order-row-num { display: block; font-family: var(--display); font-size: 18px; }
.order-row-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.order-row-go svg { transform: rotate(180deg); color: var(--muted); }
.drawer-note { margin: 0; padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 13.5px; }

.drawer-empty { padding: 32px 20px; }
.drawer-empty p { margin: 0 0 18px; font-size: 17px; }

@keyframes fill { from { transform: scaleY(0); } }
@keyframes heart-pop { 40% { transform: scale(1.3); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes slide-out { to { transform: translateX(100%); } }
@keyframes bump { 50% { transform: scale(1.25); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes pop-in { from { transform: scale(.97); opacity: 0; } }
@keyframes pop-out { to { transform: scale(.97); opacity: 0; } }
@keyframes slide-in { from { transform: translateX(100%); } }

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

/* Product sheet: four-digit candle prices must fit next to the stepper on one line */
.buy .btn-primary { white-space: nowrap; padding: 0 12px; font-size: clamp(14px, 3.9vw, 16px); }

/* Order page: the payment call to action sits right under the status */
.order-pay { display: grid; gap: 8px; margin: 18px 0 26px; }
.order-pay .order-muted, .order-pay .field-error { margin: 0; }
.order-pay .field-error:empty { display: none; }