:root {
  --bg: #0b0c0b;
  --panel: #101310;
  --panel-2: #0e100e;
  --card: #141714;
  --card-alt: #181c18;
  --border: rgba(255, 255, 255, .09);
  --border-soft: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --accent: #0f7a5a;
  --accent-bright: #35d996;
  --accent-wash: rgba(15, 122, 90, .18);
  --warn: #e0713a;
  --warn-wash: rgba(224, 113, 58, .12);
  --text: #f2f4f1;
  --text-bright: #f7f9f6;
  --text-dim: #9aa197;
  --text-mute: #7e857c;
  --text-faint: #80877e; /* the mockup's #6e756c fell short of 4.5:1 on the cards (3.8) */

  --font-display: "Unbounded", sans-serif;
  --font-ui: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }

/* Nothing a supplier typed (a URL as a characteristic, a long article in a
   description) may push the page sideways on a phone: clip, not hidden, so
   sticky headers and sidebars keep working. */
html { background: var(--bg); overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  font-family: var(--font-ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-bright); text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
a:hover { color: #5ce9b0; }

.placeholder-photo {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px 14px);
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font: 500 10.5px var(--font-mono);
}

.photo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The photo's <picture> takes no box of its own: the <img> sizes as it did. */
picture:has(> .photo-img) { display: contents; }
/* A frame holding a photo is white like the photo's own padding (Product
   image variants), so a card a little wider or narrower than the variant's
   shape shows no dark edges; the striped placeholder stays for no photo. */
:is(.product-card__photo, .product-row__photo, .cart-item__photo, .cart-modal__item-photo, .search-result__product-photo, .xsell-card__photo, .compare-product__photo, .product-page__main-photo):has(> .photo-img, > picture > .photo-img) { background: #fff; }

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 26px;
  background: var(--accent);
  color: #fff;
  font: 600 11.5px var(--font-ui);
  letter-spacing: .02em;
  flex-wrap: wrap;
  gap: 8px;
}
.topbar__group { display: flex; gap: 22px; }
.topbar__phone { font-family: var(--font-mono); }

/* Header */
.site-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 26px;
  background: var(--panel);
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.site-header__logo { display: flex; align-items: baseline; gap: 9px; }
.site-header__mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent); display: grid; place-items: center;
  font: 800 12px var(--font-mono); color: #fff;
}
.site-header__name { font: 800 15px/1 var(--font-display); color: var(--text); letter-spacing: -.01em; }
.site-header__name em { color: var(--accent-bright); font-style: normal; }
/* Slim strip under the main bar on category/product/search pages — the
   catalog button + search box now stay put on every page, so this is an
   addition below them rather than a replacement for them. */
.site-header__breadcrumb-row { padding: 10px 26px; background: var(--panel-2); border-bottom: 1px solid var(--border-soft); }
.site-header__breadcrumb { font: 500 11.5px var(--font-mono); color: var(--text-faint); }

/* Sticky so the cart badge (and its just-added count) stays visible after
   adding a product from anywhere down a long catalog/product list —
   without this, "+" clicks give no feedback once the header has scrolled
   out of view. */
/* Only the controllers' element: the phone's info line, its first child,
   scrolls away above the wrap (shared/_header). */
.site-header-host { display: contents; }
.site-header-wrap { position: sticky; top: 0; z-index: 80; background: var(--panel); }
/* Pieces of the phone header that the desktop one doesn't show. */
.mobile-infobar, .mobile-search-btn, .search-back, .header-actions__icon, .site-header__tagline { display: none; }
.search-start[hidden] { display: none; }
.search-start__label { font: 600 10.5px var(--font-ui); color: var(--text-mute); letter-spacing: .06em; text-transform: uppercase; }
.search-start__label + .search-start__chips { margin-top: 10px; }
.search-start__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.search-start__chip { padding: 8px 12px; border-radius: 20px; background: var(--card-alt); border: 1px solid var(--border-strong); font: 600 12.5px var(--font-ui); color: var(--text); text-decoration: none; }
.search-start__recent { display: flex; flex-direction: column; margin-top: 4px; }
.search-start__item { padding: 11px 0; border-bottom: 1px solid var(--border-soft); font: 500 13.5px var(--font-ui); color: var(--text); text-decoration: none; }


.catalog-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--accent); border-radius: 10px;
  font: 700 12.5px var(--font-ui); color: #fff; border: 0; cursor: pointer;
}
.catalog-btn[aria-expanded="true"] { background: var(--accent-bright); color: var(--bg); }
.hamburger { display: flex; flex-direction: column; gap: 3px; }
.hamburger span { width: 13px; height: 2px; background: #fff; display: block; }
.catalog-btn[aria-expanded="true"] .hamburger span { background: var(--bg); }

/* Catalog mega-menu: full-width panel anchored under the header */
.catalog-menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 90;
  background: var(--panel); border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .4);
  max-height: 72vh; overflow-y: auto;
}
.catalog-menu[hidden] { display: none; }
/* The desktop's menu (shared/_catalog_menu): plain columns. Everything
   hangs off one 40px text line — the section's 30px plaque plus its gap —
   so a subcategory's name starts where the section's does, its smaller
   plaque centred under the section's. A title takes two lines' height even
   when it needs one, so a long name («Одежда, обувь и аксессуары») doesn't
   push its list below the neighbouring columns'. Plaques are --card-alt with
   a border: the mockup's --card would vanish on the menu's own --panel. */
.catalog-menu__classic { padding: 28px 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 22px; }
.catalog-menu__group-title { display: flex; align-items: center; gap: 10px; min-height: 36px; font: 700 13.5px/1.3 var(--font-ui); color: var(--text); margin-bottom: 12px; }
.catalog-menu__group-title:hover { color: var(--accent-bright); }
.catalog-menu__group-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--card-alt); border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent-bright); }
.catalog-menu__group-icon svg { width: 17px; height: 17px; }
.catalog-menu__group-title:hover .catalog-menu__group-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.catalog-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.catalog-menu__list a { display: flex; align-items: flex-start; gap: 13px; padding-left: 3px; font: 500 12.5px/16px var(--font-ui); color: var(--text-dim); }
.catalog-menu__item-name { padding-top: 4px; }
.catalog-menu__item-icon { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--card-alt); border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent-bright); }
.catalog-menu__item-icon svg { width: 14px; height: 14px; }
.catalog-menu__list a:hover { color: var(--accent-bright); }
.catalog-menu__list a:hover .catalog-menu__item-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.catalog-menu__more { display: inline-block; margin: 10px 0 0 40px; font: 700 11.5px var(--font-ui); color: var(--accent-bright); }
/* The phone's menu: an accordion of the sections (shared/_catalog_menu). */
.catalog-menu__phone { display: none; }
.catalog-menu__phone-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.catalog-menu__phone-title { font: 800 19px var(--font-display); color: var(--text-bright); letter-spacing: -.02em; }
.catalog-menu__phone-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card-alt); color: var(--text-dim); font-size: 14px; cursor: pointer; }
.catalog-acc { border-bottom: 1px solid var(--border-soft); }
.catalog-acc__head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; list-style: none; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.catalog-acc__head::-webkit-details-marker { display: none; }
a.catalog-acc__head { border-bottom: 1px solid var(--border-soft); }
.catalog-acc__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent-bright); }
.catalog-acc__icon svg { width: 19px; height: 19px; }
.catalog-acc[open] .catalog-acc__icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.catalog-acc__name { flex: 1; min-width: 0; font: 600 14px/1.3 var(--font-ui); color: var(--text); }
.catalog-acc[open] .catalog-acc__name { font-weight: 700; color: var(--text-bright); }
.catalog-acc__count { font: 500 11px var(--font-mono); color: var(--text-faint); }
.catalog-acc__chevron { flex: none; width: 18px; height: 18px; color: var(--text-mute); transition: transform .2s ease; }
.catalog-acc[open] .catalog-acc__chevron { transform: rotate(180deg); color: var(--accent-bright); }
.catalog-acc__body { display: flex; flex-direction: column; padding: 0 16px 12px 64px; }
.catalog-acc__link { display: flex; align-items: center; gap: 10px; padding: 9px 0; font: 500 13.5px/1.3 var(--font-ui); color: var(--text-dim); text-decoration: none; }
.catalog-acc__link + .catalog-acc__link { border-top: 1px solid var(--border-soft); }
.catalog-acc__link-icon { flex: none; display: grid; color: var(--text-mute); }
.catalog-acc__link-icon svg { width: 16px; height: 16px; }
.catalog-acc__link--all { justify-content: space-between; font-weight: 700; color: var(--accent-bright); }
.catalog-acc__link--all span { font: 500 11px var(--font-mono); color: var(--text-faint); }
@media (max-width: 560px) {
  .catalog-menu__classic { display: none; }
  .catalog-menu__phone { display: block; padding-bottom: 40px; }
}

/* Wraps the search <form> + its live dropdown so the dropdown can anchor
   (position: absolute) to the box regardless of where it sits in the
   header — see search_controller.js. */
.search-wrap { position: relative; flex: 1; min-width: 200px; }
.search-form {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 16px; background: var(--card-alt); border: 1px solid var(--border-strong);
  border-radius: 10px; box-sizing: border-box;
}
.search-form input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  font: 500 13px var(--font-ui); color: var(--text);
}
.search-form input::placeholder { color: var(--text-mute); }

.search-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 95;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .4);
  max-height: 75vh; overflow-y: auto; padding: 10px;
}
.search-panel[hidden] { display: none; }
.search-results__empty { padding: 20px 10px; text-align: center; font: 500 12.5px var(--font-ui); color: var(--text-mute); }
.search-results__group + .search-results__group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.search-results__group-label {
  display: block; padding: 0 6px 8px;
  font: 700 10.5px var(--font-ui); color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase;
}
.search-results__link { display: block; padding: 9px 10px; border-radius: 8px; font: 600 12.5px var(--font-ui); color: var(--text); }
.search-results__link:hover { background: var(--card-alt); color: var(--accent-bright); }
.search-results__footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); text-align: center; }
.search-results__footer a { display: block; padding: 9px 10px; border-radius: 8px; font: 700 12px var(--font-ui); color: var(--accent-bright); }
.search-results__footer a:hover { background: var(--card-alt); }

.search-result__product { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 8px; }
.search-result__product:hover { background: var(--card-alt); }
.search-result__product-photo {
  flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
  background: var(--card-alt); display: block;
}
.search-result__product-info { flex: 1; min-width: 0; }
.search-result__product-name {
  font: 600 12.5px/1.35 var(--font-ui); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-result__product-meta { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; }
.search-result__product-price { font: 700 12px var(--font-mono); color: var(--accent-bright); }
.search-result__product-sku { font: 500 11px var(--font-mono); color: var(--text-dim); }
.search-result__add {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  font: 700 16px var(--font-ui); line-height: 1; cursor: pointer;
}
.search-result__add:hover { background: var(--accent-bright); }

.header-actions { display: flex; gap: 16px; align-items: center; }
/* The visitor's city before the search on a desktop (on a phone it is the
   line above the bar); a click opens the city dialog. */
.header-city { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 170px; padding: 8px 6px; background: none; border: 0; border-radius: 8px; cursor: pointer; font: 600 12.5px var(--font-ui); color: var(--text-mute); }
.header-city span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px dashed currentColor; }
.header-city svg { width: 17px; height: 17px; flex: none; color: var(--accent-bright); }
.header-city:hover { color: var(--text); }
/* A grid item's 100% is its own track, sized to its content — so the
   width is capped by the viewport itself, not by max-width: 100%. */
.city-picker .modal-card { width: min(520px, calc(100vw - 40px)); box-sizing: border-box; }
/* The chat's button sits above the header's layer: out of the way while
   the city is being chosen. */
html.has-city-picker .support-chat { display: none; }
.city-picker__lede { margin: 8px 0 14px; font: 500 12.5px/1.55 var(--font-ui); color: var(--text-mute); }
.city-picker__input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: 600 14px var(--font-ui); }
.city-picker__input:focus { outline: none; border-color: var(--accent); }
.city-picker__options { display: flex; flex-direction: column; margin-top: 6px; }
.city-picker__options:empty { display: none; }
.city-picker__option { text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 600 13px var(--font-ui); color: var(--text); }
.city-picker__option:hover, .city-picker__option:focus-visible { background: var(--accent-wash); color: var(--accent-bright); outline: none; }
.city-picker__big { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.city-picker__chip { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--panel-2); cursor: pointer; font: 600 12px var(--font-ui); color: var(--text-mute); }
.city-picker__chip:hover { border-color: var(--accent); color: var(--accent-bright); }
.header-actions__link { font: 600 10.5px var(--font-ui); color: var(--text-mute); text-align: center; }
.header-actions__divider { width: 1px; height: 22px; background: var(--border-strong); }
/* The guest Войти/Регистрация pair needs its own data-controller="auth-
   modal" wrapper (to scope the modal to both triggers) — a plain <div>
   there breaks out of .header-actions' own flex/gap, so the two buttons
   rendered with zero space between them, touching edge to edge. */
.header-actions__auth { display: flex; align-items: center; gap: 8px; }

/* «ЛК» — the cabinet's menu as a header dropdown (shared/_header). The
   panel's ::before bridges the gap under the trigger, so the pointer can
   travel down to it without leaving the element and closing a menu that
   hover opened. */
.account-menu { position: relative; }
.account-menu__trigger {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px;
  background: var(--card-alt); border: 1px solid var(--border-strong); color: var(--text);
  font: 700 12.5px var(--font-ui); cursor: pointer;
}
.account-menu__trigger svg { width: 17px; height: 17px; flex: none; }
.account-menu__trigger::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 1px; border: solid var(--text-mute); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .15s ease; }
.account-menu__trigger:hover, .account-menu__trigger[aria-expanded="true"] { border-color: var(--accent-bright); }
.account-menu__trigger[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.account-menu__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 96; width: 290px; box-sizing: border-box;
  padding: 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .45);
}
.account-menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.account-menu__panel[hidden] { display: none; }
.account-menu__who { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.account-menu__name { font: 700 13px/1.3 var(--font-ui); color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__email { font: 500 11px var(--font-ui); color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__nav { display: flex; flex-direction: column; }
.account-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 9px; font: 600 13px var(--font-ui); color: var(--text-dim); text-decoration: none; }
.account-menu__link:hover { background: var(--card-alt); color: var(--text-bright); }
.account-menu__link--soon { color: var(--text-mute); }
.account-menu__link--admin { margin-top: 4px; border-top: 1px solid var(--border-soft); border-radius: 0 0 9px 9px; color: var(--accent-bright); }
.account-menu__soon { font: 600 9.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.account-menu__panel form { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-soft); }
.account-menu__logout { width: 100%; padding: 9px 10px; border-radius: 9px; background: none; border: 0; text-align: left; font: 600 13px var(--font-ui); color: var(--text-dim); cursor: pointer; }
.account-menu__logout:hover { background: var(--card-alt); color: var(--warn); }
.header-actions__cart { display: flex; align-items: center; }
.cart-badge {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  background: var(--card-alt); border: 1px solid var(--border-strong); border-radius: 10px;
  cursor: pointer;
}
.cart-badge__label { font: 600 11px var(--font-ui); color: var(--text); }
.cart-badge__icon { display: none; width: 19px; height: 19px; color: var(--text); }
.cart-badge__count {
  font: 700 11px var(--font-mono); color: var(--bg);
  background: var(--accent-bright); border-radius: 20px; padding: 2px 7px;
}

/* Pops the header cart count and a button's own "already in cart" badge
   whenever a cart_items#create turbo_stream response replaces them — the
   .pop modifier is only added on that response, not on a normal page
   render, so it plays once per actual add rather than on every visit. */
@keyframes cart-pop {
  0% { transform: scale(.55); opacity: .3; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}
.cart-badge__count--pop, .cart-qty-badge--pop { animation: cart-pop .4s cubic-bezier(.34, 1.56, .64, 1); }

/* Small count badge on an add-to-cart button showing how many of that
   product are already in the cart — see shared/_cart_qty_badge. */
.cart-qty-wrap { position: relative; display: inline-flex; }
.cart-qty-badge {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  font: 700 10.5px var(--font-mono); color: var(--bg);
  background: var(--accent-bright); border-radius: 20px; border: 2px solid var(--bg);
}
.cart-qty-badge[hidden] { display: none; }

/* Header cart preview offcanvas — slides in from the right, content loaded
   fresh into #cart_modal_panel on each open (cart_modal_controller.js) */
.offcanvas-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 100;
  display: flex; justify-content: flex-end;
  transition: background-color .25s ease;
}
.offcanvas-backdrop[hidden] { display: none; }
.offcanvas-backdrop.is-open { background: rgba(0, 0, 0, .6); }
.offcanvas-panel {
  width: 420px; max-width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--border);
  padding: 24px; box-shadow: -12px 0 32px rgba(0, 0, 0, .35);
  transform: translateX(100%); transition: transform .25s ease;
}
.offcanvas-backdrop.is-open .offcanvas-panel { transform: translateX(0); }
.offcanvas-panel__head { display: flex; align-items: center; justify-content: space-between; }
.offcanvas-panel__title { font: 800 22px/1.15 var(--font-display); color: var(--text-bright); letter-spacing: -.025em; margin: 0; }
.offcanvas-panel__close { font: 600 18px var(--font-ui); color: var(--text-mute); background: none; border: 0; cursor: pointer; }

/* The panel fills the screen's height: lines scroll, the foot stays down. */
.offcanvas-panel > turbo-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 10px; }
.cart-modal { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart-modal__list { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px 12px 0; }
.cart-modal__foot { flex: none; border-top: 1px solid var(--border-soft); padding-top: 14px; padding-bottom: env(safe-area-inset-bottom); }
.cart-modal__promo { display: flex; gap: 8px; align-items: center; }
.cart-modal__promo input[type="text"] {
  flex: 1; min-width: 0; box-sizing: border-box; height: 40px; padding: 0 12px; border-radius: 10px;
  background: var(--card-alt); border: 1px solid var(--border-strong); color: var(--text); font: 600 13px var(--font-mono); text-transform: uppercase;
}
.cart-modal__promo input[type="text"]:focus { outline: 0; border-color: var(--accent-bright); }
.cart-modal__promo .btn { height: 40px; box-sizing: border-box; margin: 0; }
.cart-modal__promo--applied { justify-content: space-between; padding: 10px 12px; border: 1px dashed var(--accent-bright); border-radius: 10px; background: var(--accent-wash); }
.cart-modal__promo-name { font: 700 12.5px var(--font-ui); color: var(--text-bright); }
.cart-modal__promo-code { font: 500 11px var(--font-mono); color: var(--text-dim); margin-top: 2px; }
.cart-modal__promo-remove { background: none; border: 0; cursor: pointer; color: var(--text-dim); font: 600 12px var(--font-ui); }
.cart-modal__promo-error { margin-top: 6px; font: 600 12px var(--font-ui); color: var(--warn); }
.cart-modal__summary-row { display: flex; justify-content: space-between; margin-top: 12px; font: 500 12.5px var(--font-ui); color: var(--text-dim); }
.cart-modal__discount { font: 700 12.5px var(--font-mono); color: var(--accent-bright); }
.cart-modal__foot .cart-modal__summary { border-top: 0; padding-top: 0; margin-top: 12px; }
/* While the cart panel is open the chat button stands just left of it; on
   a phone, where the panel takes the whole width, it steps aside. */
.support-chat { transition: right .25s ease; }
html.has-cart-panel .support-chat { right: calc(min(420px, 100vw) + 24px); z-index: 101; }
@media (max-width: 560px) { html.has-cart-panel .support-chat { display: none; } }
.cart-modal__item { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 12px; align-items: center; }
.cart-modal__remove-form { margin: 0; }
.cart-modal__remove {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--text-faint);
}
.cart-modal__remove:hover { color: var(--warn); border-color: var(--border-strong); background: var(--card-alt); }
.cart-modal__item > div:nth-child(2) { min-width: 0; }
.cart-modal__item-photo { width: 48px; height: 48px; border-radius: 8px; background: var(--card-alt); overflow: hidden; font-size: 8px; display: block; }
.cart-modal__item-name { display: block; font: 600 12.5px/1.35 var(--font-ui); color: var(--text); }
.cart-modal__item-qty { font: 500 11px var(--font-mono); color: var(--text-faint); margin-top: 4px; }
.cart-modal__item-total { font: 700 13px var(--font-mono); color: var(--text); white-space: nowrap; }
.cart-modal__summary {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  font: 600 13px var(--font-ui); color: var(--text-mute);
}
.cart-modal__summary-value { font: 800 16px var(--font-mono); color: var(--text-bright); }
.cart-modal__actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.cart-modal__empty { text-align: center; color: var(--text-dim); padding: 20px 0; font: 500 13px var(--font-ui); }

/* Checkout steps */
.steps { display: flex; align-items: center; gap: 18px; }
.step { display: flex; align-items: center; gap: 7px; }
.step__num {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font: 700 9px var(--font-ui);
  background: var(--card-alt); color: var(--text-dim);
}
.step--done .step__num, .step--active .step__num { background: var(--accent); color: #fff; }
.step__label { font: 600 12px var(--font-ui); color: var(--text-mute); }
.step--active .step__label { font-weight: 700; color: var(--text); }
.step__divider { width: 28px; height: 1px; background: var(--border-strong); }
.step__divider--done { background: var(--accent-bright); }
/* On a phone the checkout bar keeps the mark and the steps on one line:
   the name and the labels of the steps not current go (the numbers say
   enough), and the steps take the room the name had. */
@media (max-width: 560px) {
  .site-header--checkout { gap: 10px; }
  .site-header--checkout .site-header__name { display: none; }
  .site-header--checkout > div[style*="flex:1"] { display: none; }
  .site-header--checkout .steps { flex: 1; justify-content: flex-end; gap: 8px; min-width: 0; }
  .site-header--checkout .step:not(.step--active) .step__label { display: none; }
  .site-header--checkout .step__divider { width: 16px; flex: none; }
  .site-header--checkout .step__num { width: 22px; height: 22px; font-size: 10px; }
}

/* Hero slider — admin-managed HomeSlide records (see Admin::HomeSlidesController),
   home_slider_controller.js drives the prev/next/dots/tiles/autoplay. */
.hero-slider { padding: 18px 26px 0; background: var(--bg); }
/* A fixed height: a slide with a photo used to grow the card to the
   photo's own height, and the page jumped on every turn of the slider. */
.hero-slider__card {
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr; height: 440px;
  border-radius: 16px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border-soft);
}
.hero-slide { display: contents; }
.hero-slide[hidden] { display: none; }
/* min-height: 0 lets the column shrink to the card instead of pushing
   the arrows and dots out of its bottom edge. */
.hero-slide__text { position: relative; padding: 34px 36px 26px; display: flex; flex-direction: column; min-height: 0; }
.hero-slide__text::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 11px);
}
/* min-height on badges/headline/lede reserves space for the tallest
   possible slide (badges present, 2-line headline, 2-line description) so
   switching slides never shifts the headline/actions/controls position —
   a slide missing one of these just leaves blank space instead of
   everything below it jumping up. */
.hero-slide__badges { position: relative; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-height: 27px; }
.hero-slide__badge {
  padding: 6px 11px; border-radius: 20px; background: var(--accent-bright);
  font: 800 10.5px var(--font-mono); color: var(--bg); letter-spacing: .06em;
}
.hero-slide__validity {
  padding: 6px 11px; border-radius: 20px; border: 1px solid var(--border-strong);
  font: 700 10.5px var(--font-mono); color: var(--text); letter-spacing: .04em;
}
/* A block, not a flex box: as flex items the headline's text and its
   accent span became side-by-side columns, and on a phone the accent
   («на 8 %») was squeezed into a strip past the card's right edge. Slides
   are typed in the admin, so a long word is let to break rather than
   overflow. */
.hero-slide__headline {
  position: relative; font: 800 clamp(32px, 3.2vw, 46px)/1.04 var(--font-display); color: var(--text-bright);
  letter-spacing: -.03em; margin: 20px 0 0; overflow-wrap: break-word; hyphens: manual;
}
.hero-slide__accent { color: var(--accent-bright); }
.hero-slide__lede { position: relative; font: 500 15px/1.6 var(--font-ui); color: var(--text-dim); max-width: 460px; margin-top: 14px; }
.hero-slide__actions { position: relative; display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero-slide__controls { position: relative; display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 26px; }
.hero-slide__arrow {
  width: 42px; height: 42px; border-radius: 11px; background: var(--card-alt); border: 1px solid var(--border-strong);
  display: grid; place-items: center; font: 700 16px var(--font-ui); color: var(--text); cursor: pointer;
}
.hero-slide__dots { display: flex; align-items: center; gap: 6px; }
/* 4px tall to the eye, 24px to a finger: the padding is the tap area, the
   background stays on the content box. */
.hero-slide__dot {
  width: 16px; height: 24px; border-radius: 4px; background: var(--border-strong); border: 0; padding: 10px 0;
  background-clip: content-box; box-sizing: border-box;
  overflow: hidden; cursor: pointer; transition: width .15s ease;
}
.hero-slide__dot--active { width: 34px; }
.hero-slide__dot-fill { width: 0; height: 4px; background: var(--accent-bright); }
.hero-slide__dot--active .hero-slide__dot-fill { animation: hero-dot-fill 6s linear; }
@keyframes hero-dot-fill { from { width: 0; } to { width: 100%; } }
.hero-slide__counter { font: 700 12px var(--font-mono); color: var(--text); }
.hero-slide__counter span { color: var(--text); }
.hero-slide__photo {
  position: relative; background: var(--card-alt); display: grid; place-items: center; overflow: hidden; min-height: 0;
}
/* A slide with neither a photo nor a product: its text takes the whole
   card instead of leaving an empty half. */
.hero-slide__photo:empty { display: none; }
.hero-slide__text:has(+ .hero-slide__photo:empty) { grid-column: 1 / -1; }
/* Out of the flow, so the picture fills the cell and never sizes it. */
.hero-slide__photo > .photo-img, .hero-slide__photo > picture > .photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide__overlay-card {
  position: absolute; left: 18px; bottom: 18px; right: 18px; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; background: rgba(11, 12, 11, .86); border: 1px solid var(--border-soft);
}
.hero-slide__overlay-card .photo-img { width: 44px; height: 44px; border-radius: 8px; flex: none; object-fit: cover; }
.hero-slide__overlay-name { font: 600 12px var(--font-ui); color: var(--text); }
.hero-slide__overlay-price { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }
.hero-slide__overlay-price span { font: 700 15px var(--font-mono); color: var(--accent-bright); }
.hero-slide__overlay-old { font: 500 11px var(--font-mono); color: var(--text-faint); text-decoration: line-through; }
.hero-slide__overlay-add {
  width: 38px; height: 38px; border-radius: 10px; background: var(--accent); border: 0;
  display: grid; place-items: center; font: 700 18px var(--font-ui); color: #fff; cursor: pointer; flex: none;
}
/* As many columns as there are slides fit — five promos no longer leave
   one alone on a second row. */
.hero-slider__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.hero-tile {
  padding: 13px 14px; border-radius: 11px; background: var(--card-alt); border: 1px solid var(--border-soft);
  text-align: left; cursor: pointer;
}
.hero-tile--active { border-color: var(--accent-bright); }
.hero-tile__kicker { font: 700 10px var(--font-mono); color: var(--text-faint); letter-spacing: .05em; }
.hero-tile--active .hero-tile__kicker { color: var(--accent-bright); }
.hero-tile__title { font: 700 12.5px var(--font-ui); color: var(--text); margin-top: 5px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; border-radius: 11px; font: 700 13.5px var(--font-ui);
  border: 0; cursor: pointer; text-align: center;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .2); color: var(--text); }
.btn--block { width: 100%; }
.btn--sm { padding: 10px 14px; border-radius: 9px; font-size: 12px; }

/* Sections */
.section { padding: 30px 26px; background: var(--bg); border-top: 1px solid var(--border-soft); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.section__title { font: 800 22px/1 var(--font-display); color: var(--text); letter-spacing: -.02em; }
.section__more { font: 600 12.5px var(--font-ui); color: var(--accent-bright); }

/* StaticPage body (see static_pages/show, Admin::StaticPagesController) —
   dark-theme overrides for the Rails-generated actiontext.css's light-themed
   .trix-content rules. */
.static-page__body { max-width: 760px; margin-top: 18px; font: 500 15px/1.7 var(--font-ui); color: var(--text-dim); overflow-wrap: anywhere; }
.static-page__body h1, .static-page__body h2, .static-page__body h3 { font: 700 20px var(--font-display); color: var(--text-bright); margin: 24px 0 10px; }
.static-page__body h1:first-child, .static-page__body h2:first-child, .static-page__body h3:first-child { margin-top: 0; }
.static-page__body p { margin: 12px 0; }
/* The delivery page's Ozon calculator (static_pages/_delivery_calculator). */
.delivery-calc { margin-top: 36px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); }
.delivery-calc__title { font: 800 22px/1.15 var(--font-display); color: var(--text-bright); letter-spacing: -.025em; margin: 0; }
.delivery-calc__lead { font: 500 14px/1.5 var(--font-ui); color: var(--text-dim); margin: 8px 0 0; }
.delivery-calc__search { margin-top: 16px; }
.delivery-calc__search input {
  box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; background: var(--card-alt);
  border: 1px solid var(--border-strong); color: var(--text); font: 500 14px var(--font-ui);
}
.delivery-calc__search input:focus { outline: 0; border-color: var(--accent-bright); }
.delivery-calc__search .searchable-select__option small { display: block; font: 500 11.5px var(--font-mono); color: var(--text-dim); margin-top: 2px; }
.delivery-calc__product { font: 500 13px/1.5 var(--font-ui); color: var(--text-dim); margin: 12px 0 0; }
.delivery-calc__product-link { color: var(--accent-bright); font-weight: 600; }
.delivery-calc__sku { font-family: var(--font-mono); font-size: 12px; }
.delivery-calc__frame { display: block; margin-top: 4px; }
.delivery-calc .ozon-map { height: 420px; }
/* The picker's foot sticks to the bottom of its modal; on the page it is
   just the last line — stuck, it rode over the header while scrolling. */
.delivery-calc .delivery-picker__foot { position: static; z-index: auto; margin: 14px 0 0; padding: 12px 0 0; background: none; }
@media (max-width: 720px) {
  .delivery-calc { padding: 16px; border-radius: 12px; }
  .delivery-calc .ozon-map { height: 340px; }
}
.static-page__body a { color: var(--accent-bright); }
.static-page__body ul, .static-page__body ol { margin: 12px 0 12px 1.2em; }
.static-page__body strong { color: var(--text); }

/* Contacts: the page's text on a card over a map of the store. The map
   is the background on wide screens and a block under the card on narrow
   ones, where a card over it would hide the marker. */
.contacts-page { padding: 30px 26px; background: var(--bg); border-top: 1px solid var(--border-soft); }
.contacts-page--map { position: relative; padding: 0; min-height: 560px; display: flex; align-items: flex-start; }
.contacts-page--map .contacts-page__map { position: absolute; inset: 0; height: auto; z-index: 0; }
.contacts-page--map .contacts-page__card {
  position: relative; z-index: 1; margin: 34px 26px; padding: 26px 28px; max-width: 460px;
  background: rgba(11, 12, 11, .9); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
}
.contacts-page--map .static-page__body { max-width: none; }
.contacts-page__map--yandex [class*="ground-pane"] { filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(.85) saturate(.5); }
.contacts-marker span {
  display: block; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--accent-bright); border: 3px solid var(--bg); box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
.contacts-route { position: relative; display: inline-block; margin-top: 18px; }
.contacts-route summary { list-style: none; }
.contacts-route summary::-webkit-details-marker { display: none; }
.contacts-route__menu {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 210px; margin: 0; padding: 5px; list-style: none;
  background: var(--card-alt); border: 1px solid var(--border-strong); border-radius: 11px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.contacts-route__menu a { display: block; padding: 10px 12px; border-radius: 8px; font: 600 13px var(--font-ui); color: var(--text); text-decoration: none; }
.contacts-route__menu a:hover { background: var(--accent-wash); color: var(--accent-bright); }
@media (max-width: 760px) {
  .contacts-page--map { flex-direction: column; min-height: 0; }
  .contacts-page--map .contacts-page__map { position: relative; inset: auto; height: 320px; width: 100%; order: 2; }
  .contacts-page--map .contacts-page__card { margin: 16px; max-width: none; align-self: stretch; }
}

/* Category tiles */
/* Six across, as drawn: eleven sections and «Весь каталог» make two full rows. */
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1000px) { .category-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.category-tile {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px; text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.category-tile:hover, .category-tile:focus-visible { border-color: rgba(53, 217, 150, .45); background: #171b17; outline: 0; }
.category-tile__icon {
  width: 40px; height: 40px; border-radius: 10px; background: #1d221d; color: var(--accent-bright);
  display: grid; place-items: center; transition: background .15s, color .15s;
}
.category-tile__icon svg { width: 22px; height: 22px; }
.category-tile:hover .category-tile__icon, .category-tile:focus-visible .category-tile__icon { background: var(--accent); color: #fff; }
.category-tile--all { background: transparent; border-style: dashed; border-color: rgba(53, 217, 150, .35); font: inherit; }
.category-tile--all .category-tile__icon { background: var(--accent-wash); }
.category-tile--all .category-tile__name { color: var(--accent-bright); }
@media (max-width: 640px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .category-tile { padding: 11px; gap: 14px; border-radius: 11px; }
  .category-tile__icon { width: 34px; height: 34px; border-radius: 9px; }
  .category-tile__icon svg { width: 19px; height: 19px; }
  /* Three tiles to a row leave ~80px for a name: long Russian words are
     hyphenated where they break («электро-инструмента»), not cut anywhere
     («электроинс / трумента»); break-word only for what can't hyphenate. */
  .category-tile__name { font-size: 11.5px; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
  .category-tile__count { display: none; }
}
.category-tile__name { font: 700 13px var(--font-ui); color: var(--text); }
.category-tile__count { font: 500 11px var(--font-mono); color: var(--text-faint); margin-top: 4px; }

/* Product card (grid) */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.product-card { background: var(--card); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; display: flex; flex-direction: column; }
.product-card__photo { height: 150px; position: relative; }
.product-card__badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 6px; font: 700 10px var(--font-mono); color: var(--bg); }
.product-card__badge--hit { background: var(--accent-bright); }
.product-card__badge--sale { background: var(--warn); }
.product-card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__sku { font: 500 10.5px var(--font-mono); color: var(--text-faint); }
.product-card__name { font: 700 13.5px/1.35 var(--font-ui); color: var(--text); }
.product-card__stock { display: flex; align-items: center; gap: 6px; margin-top: 3px; font: 600 11px var(--font-ui); }
.stock-dot { width: 6px; height: 6px; border-radius: 50%; }
.stock-dot--ok, .product-card__stock--ok { color: var(--accent-bright); }
.stock-dot--ok { background: var(--accent-bright); }
.stock-dot--low, .product-card__stock--low { color: var(--warn); }
.stock-dot--low { background: var(--warn); }
.product-card__footer { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.price__value { font: 700 20px/1 var(--font-mono); color: var(--text); }
.price__old { font: 500 11px var(--font-mono); color: var(--text-faint); text-decoration: line-through; margin-top: 4px; }
.price__value--promo { color: var(--accent-bright); }
.price__unit { font: 500 11px var(--font-mono); color: var(--text-faint); margin-top: 4px; }
.add-btn {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent);
  display: grid; place-items: center; font: 700 20px var(--font-ui); color: #fff; border: 0; cursor: pointer;
}

/* Promo band */
.promo-band {
  margin: 0 26px 32px; padding: 28px; border-radius: 14px; background: var(--accent);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.promo-band__title { font: 800 26px/1.1 var(--font-display); color: #fff; letter-spacing: -.02em; }
.promo-band__lede { font: 500 13.5px/1.6 var(--font-ui); color: #fff; max-width: 520px; margin-top: 9px; }

/* «Присылать акции» under the sign-up and checkout forms: a quiet line. */
.promo-consent { display: flex; align-items: center; gap: 7px; margin-top: 10px; font: 500 11.5px/1.4 var(--font-ui); color: var(--text-faint); cursor: pointer; text-transform: none; letter-spacing: 0; }
.promo-consent__box { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); flex: none; }

/* Home: «Подписка на акции» — a dark card lit green from the right, the
   envelope, the pitch, and the address with its button in one pill. */
.promo-subscribe {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 26px 18px; padding: 30px 32px; border-radius: 18px;
  background: linear-gradient(120deg, var(--card) 0%, #0f1a15 100%); border: 1px solid rgba(53, 217, 150, .22);
  display: grid; grid-template-columns: auto 1fr minmax(320px, 440px); align-items: center; gap: 22px 26px;
}
.promo-subscribe__glow {
  position: absolute; z-index: -1; right: -120px; top: -160px; width: 520px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(53, 217, 150, .28), transparent); pointer-events: none;
}
.promo-subscribe__glow::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgba(53, 217, 150, .07) 0 5deg, transparent 5deg 15deg);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 75%);
}
.promo-subscribe__icon {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: var(--accent-bright);
  background: var(--accent-wash); border: 1px solid rgba(53, 217, 150, .35); box-shadow: 0 0 28px rgba(53, 217, 150, .18);
  transform: rotate(-6deg);
}
.promo-subscribe__icon svg { width: 28px; height: 28px; }
.promo-subscribe__eyebrow { font: 700 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); }
.promo-subscribe__title { margin: 6px 0 0; font: 800 26px/1.1 var(--font-display); letter-spacing: -.025em; color: var(--text); }
.promo-subscribe__lede { margin: 8px 0 0; font: 500 13.5px/1.6 var(--font-ui); color: var(--text-mute); max-width: 460px; }
.promo-subscribe__row {
  display: flex; gap: 6px; padding: 6px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border-strong);
  transition: border-color .15s, box-shadow .15s;
}
.promo-subscribe__row:focus-within { border-color: var(--accent-bright); box-shadow: 0 0 0 4px rgba(53, 217, 150, .12); }
.promo-subscribe__input {
  flex: 1; min-width: 0; padding: 0 12px; border: 0; background: none; outline: none;
  font: 500 16px var(--font-ui); color: var(--text);
}
.promo-subscribe__input::placeholder { color: var(--text-faint); }
.promo-subscribe__btn {
  flex: none; height: 46px; padding: 0 20px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent-bright); color: #06140e; font: 800 14px var(--font-ui);
  transition: transform .15s, filter .15s;
}
.promo-subscribe__btn:hover { filter: brightness(1.08); }
.promo-subscribe__btn:active { transform: scale(.97); }
.promo-subscribe__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.promo-subscribe__error { margin: 8px 2px 0; font: 600 12px var(--font-ui); color: #ff8a7a; }
.promo-subscribe__legal { margin: 9px 2px 0; font: 500 11px/1.5 var(--font-ui); color: var(--text-faint); }
.promo-subscribe__legal a { color: var(--text-mute); text-decoration: underline; }
.promo-subscribe__done {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--accent-wash); border: 1px solid rgba(53, 217, 150, .35); font: 500 13px/1.45 var(--font-ui); color: var(--text-mute);
}
.promo-subscribe__done b { display: block; font: 800 15px var(--font-ui); color: var(--text); }
.promo-subscribe__check {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-bright); color: #06140e; font: 800 17px var(--font-ui);
}
@media (max-width: 900px) {
  .promo-subscribe { padding: 22px 18px; grid-template-columns: auto 1fr; gap: 16px; }
  .promo-subscribe__icon { width: 48px; height: 48px; border-radius: 14px; align-self: start; }
  .promo-subscribe__icon svg { width: 24px; height: 24px; }
  .promo-subscribe__title { font-size: 21px; }
  .promo-subscribe__form, .promo-subscribe__done { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .promo-subscribe__row { flex-direction: column; padding: 6px; }
  .promo-subscribe__input { height: 46px; }
  .promo-subscribe__btn { width: 100%; }
}

/* Footer */
.site-footer {
  padding: 28px 26px; background: var(--panel); border-top: 1px solid var(--border-soft);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px;
  /* body is a flex column (min-height: 100vh) specifically so this can pin
     itself to the bottom of the viewport on short/empty pages — margin-top:
     auto on a flex item consumes all remaining free space above it. */
  margin-top: auto;
}
.site-footer h2 { font: 700 11px var(--font-ui); color: var(--text); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.site-footer p, .site-footer div { font: 500 12.5px var(--font-ui); color: var(--text-mute); }
/* The rule above greyed the logo's letters on its green square (1.4:1). */
.site-footer .site-header__mark { color: #fff; font-weight: 800; font-family: var(--font-mono); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 14px 26px; background: var(--panel); border-top: 1px solid var(--border-soft); font: 500 11.5px var(--font-ui); color: var(--text-faint); }
.site-footer__legal a { color: var(--text-faint); text-decoration: underline; }
/* Tap targets of at least 24px (PageSpeed: the footer's links were 17px
   tall, one under the other). */
.site-footer div > a:not(.footer-vk):not(.site-header__logo), .site-footer__legal a { display: inline-block; padding: 4px 0; }
.site-main { display: contents; }

/* Promotion banner */
.promo-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 16px 24px; background: var(--accent-wash); border-bottom: 1px solid var(--border-soft);
}
.promo-banner__title { font: 800 18px var(--font-display); color: var(--text-bright); letter-spacing: -.02em; }
.promo-banner__meta { font: 600 12.5px var(--font-ui); color: var(--text-dim); margin-top: 4px; }
.promo-banner__code { font: 700 12.5px var(--font-mono); color: var(--accent-bright); margin: 0 4px; }
.promo-banner__hint { font: 500 12px var(--font-ui); color: var(--text-mute); }

/* Catalog layout */
.catalog { display: grid; grid-template-columns: 250px 1fr; gap: 1px; background: var(--border-soft); }
.filters { padding: 22px 20px; background: var(--panel-2); }
/* Beside the list the sidebar stays in view with a scroll of its own: a
   long set of filters no longer leaves the products far above. Its top is
   the sticky header's height (--catalog-sticky-top, filter_sheet_controller). */
@media (min-width: 901px) {
  .filters {
    position: sticky; top: var(--catalog-sticky-top, 96px); align-self: start;
    max-height: calc(100vh - var(--catalog-sticky-top, 96px)); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  }
  /* The grid's 1px gap drew the divider on the catalog's own background;
     a sidebar no longer stretched to the bottom would leave that showing. */
  .catalog { gap: 0; background: var(--panel-2); }
  .catalog-main { border-left: 1px solid var(--border-soft); }
}
.filters__eyebrow { font: 500 11px var(--font-mono); color: var(--text-faint); }
.filters__title { font: 800 19px/1.2 var(--font-display); color: var(--text); margin-top: 8px; letter-spacing: -.02em; }
.filters__divider { height: 1px; background: var(--border-soft); margin: 20px 0; }
.filters__label { display: block; font: 700 11px var(--font-ui); color: var(--text); letter-spacing: .06em; text-transform: uppercase; }
/* Collapsible filter group (see shared/_filter_group, filter_group_controller.js)
   — button.filters__label resets the plain <div> label's look to work as a
   full-width clickable header, chevron shows the expanded/collapsed state. */
button.filters__label {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left;
}
.filters__chevron { flex: none; color: var(--text-faint); transition: transform .15s ease; }
.filters__chevron::after { content: "›"; font: 700 13px var(--font-ui); }
.filters__chevron--open { transform: rotate(90deg); }
/* Admin-only placeholder for a filter they've disabled on this category
   (see shared/_disabled_filter_placeholder) — a regular visitor never
   gets this markup at all, so no visibility toggle needed here. */
.filters__group--disabled { padding: 2px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filters__restore { flex: none; font: 600 11.5px var(--font-ui); color: var(--accent-bright); text-decoration: underline dotted; }
.filters__checks { display: flex; flex-direction: column; gap: 11px; margin-top: 13px; }
.filters__check { display: flex; align-items: center; gap: 10px; font: 500 12.5px var(--font-ui); color: var(--text); }
.filters__check input { accent-color: var(--accent); width: 16px; height: 16px; }
.filters__count { flex: 1; text-align: right; font: 500 11px var(--font-mono); color: var(--text-faint); }
.filters__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

/* Dual-handle numeric range slider (price, numeric characteristic facets)
   — see range_slider_controller.js. Two overlapping native <input
   type="range"> elements is the standard no-library way to get two
   independent thumbs: pointer-events:none on the track lets clicks pass
   through to whichever input's thumb is under the cursor, re-enabled only
   on the thumb pseudo-element itself. */
.range-slider__bounds { display: flex; justify-content: space-between; font: 600 11px var(--font-mono); color: var(--text-faint); }
.range-slider { position: relative; height: 20px; margin-top: 26px; }
.range-slider__track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px; background: var(--border-strong); border-radius: 2px; }
.range-slider__fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; background: var(--accent-bright); border-radius: 2px; }
/* Floating current-value label above each thumb — always visible, not
   just while dragging, so the slider's own position is legible without
   having to glance down at the number inputs. */
.range-slider__bubble {
  position: absolute; top: -24px; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 6px; background: var(--card-alt); border: 1px solid var(--border-strong);
  font: 700 10.5px var(--font-mono); color: var(--text); white-space: nowrap; pointer-events: none;
}
.range-slider input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none;
}
.range-slider input[type="range"]::-webkit-slider-runnable-track { appearance: none; background: transparent; }
.range-slider input[type="range"]::-moz-range-track { background: transparent; border: 0; }
.range-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent-bright); cursor: pointer;
}
.range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent-bright); cursor: pointer;
}
.chip {
  padding: 7px 11px; border-radius: 8px; background: var(--card-alt); border: 1px solid var(--border-strong);
  font: 600 11.5px var(--font-mono); color: var(--text-dim);
}
.chip--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filters__toggle-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.filters__toggle-label { font: 600 12.5px var(--font-ui); color: var(--text); }
.toggle { display: inline-block; width: 36px; height: 20px; border-radius: 20px; background: var(--card-alt); position: relative; border: 0; cursor: pointer; }
.toggle--on { background: var(--accent); }
.toggle__dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-faint); }
.toggle--on .toggle__dot { left: auto; right: 2px; background: #fff; }

/* min-width: 0 overrides the implicit "never shrink below content's
   natural width" grid default — without it, Safari (stricter about this
   than Chrome/Firefox) refuses to wrap a long product name and pushes
   the whole row, and everything after it, off the right edge instead. */
.catalog-main { padding: 22px 26px; background: var(--bg); min-width: 0; }
.catalog-main__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.catalog-main__count { font: 800 21px var(--font-display); color: var(--text); letter-spacing: -.02em; }
.catalog-main__sub { font: 500 12px var(--font-mono); color: var(--text-faint); }

.active-filters { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.active-filter {
  display: flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 20px;
  background: var(--accent-wash); border: 1px solid rgba(53, 217, 150, .35); font: 600 11.5px var(--font-ui); color: var(--accent-bright);
}
.active-filter__clear-all { padding: 6px 11px; font: 600 11.5px var(--font-ui); color: var(--text-mute); }
.active-filter__remove { font: 700 13px var(--font-ui); line-height: 1; color: var(--accent-bright); opacity: .7; }
.active-filter__remove:hover { opacity: 1; }

.product-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.product-row {
  display: grid; grid-template-columns: 96px 1fr 180px 224px; gap: 18px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
}
.product-row > div:nth-child(2) { min-width: 0; }
.product-row__photo { height: 80px; border-radius: 9px; font-size: 9px; }
.product-row__sku { font: 500 10.5px var(--font-mono); color: var(--text-faint); }
.product-row__name { font: 700 15px/1.3 var(--font-ui); color: var(--text); margin-top: 5px; }
.product-row__meta { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.product-row__meta span { font: 500 11.5px var(--font-ui); color: var(--text-mute); }
.product-row__buy { display: flex; gap: 8px; align-items: center; }

.qty-stepper {
  flex: none; display: flex; align-items: center; background: var(--card-alt);
  border: 1px solid var(--border-strong); border-radius: 9px;
}
.qty-stepper button { padding: 9px 10px; font: 700 13px var(--font-ui); color: var(--text-dim); background: transparent; border: 0; cursor: pointer; }
.qty-stepper input {
  width: 40px; padding: 9px 0; font: 700 13px var(--font-mono); color: var(--text); text-align: center;
  background: transparent; border: 0; outline: 0;
}

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; }
.pagination a, .pagination span {
  min-width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font: 600 12px var(--font-mono); color: var(--text-dim); background: var(--card-alt);
}
.pagination a.active, .pagination span.active { background: var(--accent); color: #fff; }
.pagination__gap { background: transparent; color: var(--text-faint); }

/* Product page */
.product-page { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1px; background: var(--border-soft); }
.product-page__gallery { background: var(--panel-2); padding: 24px; min-width: 0; }
.product-page__main-photo { height: 400px; border-radius: 12px; font-size: 11px; background: var(--card); overflow: hidden; cursor: zoom-in; }
/* A dozen photos would squeeze each thumb into a sliver; they keep their square and scroll instead. */
.product-page__thumbs { display: flex; gap: 9px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.product-page__thumbs::-webkit-scrollbar { display: none; }
.product-page__thumb { flex: none; width: 74px; height: 74px; border-radius: 9px; border: 1px solid var(--border-strong); cursor: pointer; overflow: hidden; background: #fff; display: grid; place-items: center; }
.product-page__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
@media (max-width: 720px) { .product-page__thumb { width: 60px; height: 60px; } }
.product-page__thumb--active { border-color: var(--accent-bright); border-width: 1.5px; }

/* Product page photo lightbox — see gallery_controller.js */
.gallery-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); z-index: 110; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 40px; }
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox__frame { max-width: min(900px, 100%); max-height: 100%; display: grid; place-items: center; }
.gallery-lightbox__frame img { max-width: 100%; max-height: 84vh; border-radius: 8px; object-fit: contain; }
.gallery-lightbox__close {
  position: absolute; top: 20px; right: 26px; font: 600 22px var(--font-ui); color: #fff;
  background: none; border: 0; cursor: pointer; line-height: 1;
}
.gallery-lightbox__nav {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--border-strong); color: #fff;
  font: 700 22px var(--font-ui); line-height: 1; cursor: pointer;
}
.gallery-lightbox__nav:hover { background: var(--card-alt); }
.product-page__info { background: var(--bg); padding: 26px; min-width: 0; }
.product-page__title { font: 800 30px/1.15 var(--font-display); color: var(--text-bright); letter-spacing: -.025em; margin-top: 14px; }
.product-page__rating { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 500 12px var(--font-ui); color: var(--text-mute); }
.product-page__rating strong { font: 700 12px var(--font-mono); color: var(--accent-bright); }

.buy-box { margin-top: 22px; padding: 20px; border-radius: 13px; background: var(--card); border: 1px solid var(--border); }
.buy-box__price-row { display: flex; align-items: flex-end; gap: 14px; }
.buy-box__price { font: 700 38px/1 var(--font-mono); color: var(--text-bright); }
.buy-box__old-price { font: 500 13px var(--font-mono); color: var(--text-faint); text-decoration: line-through; padding-bottom: 5px; }
.buy-box__per-unit { flex: 1; text-align: right; font: 600 12px var(--font-ui); color: var(--text-dim); }
.buy-box__controls { display: flex; gap: 8px; margin-top: 16px; }
.buy-box .qty-stepper { flex: 1; justify-content: space-between; background: var(--bg); }
.buy-box__add { flex: 1.3; }
.buy-box__controls .cart-qty-wrap { flex: 1.3; }
.buy-box__controls .cart-qty-wrap .buy-box__add { flex: none; width: 100%; }

.quick-order-cta {
  display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 13px 15px;
  border-radius: 10px; background: var(--bg); border: 1px solid rgba(53, 217, 150, .4); cursor: pointer;
}
.quick-order-cta__badge { font: 800 12px var(--font-mono); color: var(--accent-bright); background: var(--accent-wash); border-radius: 6px; padding: 4px 8px; }
.quick-order-cta__label { font: 700 13px var(--font-ui); color: var(--text); }
.quick-order-cta__hint { flex: 1; text-align: right; font: 500 11.5px var(--font-ui); color: var(--text-mute); }

.tiers { display: flex; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.tier { flex: 1; min-width: 100px; }
.tier__label { font: 700 11px var(--font-mono); color: var(--accent-bright); }
.tier__price { font: 700 14px var(--font-mono); color: var(--text); margin-top: 4px; }

.delivery-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.delivery-card { padding: 14px; border-radius: 11px; background: var(--card); border: 1px solid var(--border); }
.delivery-card--selected { border: 1.5px solid var(--accent-bright); }
.delivery-card__head { display: flex; align-items: center; justify-content: space-between; }
.delivery-card__title { font: 700 13.5px var(--font-ui); color: var(--text); }
.delivery-card__radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); }
.delivery-card--selected .delivery-card__radio { border: 4px solid var(--accent-bright); background: var(--bg); }
.delivery-card__desc { font: 500 12px/1.6 var(--font-ui); color: var(--text-dim); margin-top: 8px; }
.delivery-card__price { font: 700 13px var(--font-mono); color: var(--accent-bright); margin-top: 9px; }
.delivery-card__price--pending { color: var(--text-faint); }
.delivery-card__where { font: 500 11.5px var(--font-ui); color: var(--text-faint); margin-top: 4px; }

.product-page__description { font: 500 13px/1.7 var(--font-ui); color: var(--text-dim); margin-top: 14px; overflow-wrap: anywhere; }
.product-page__description p { margin: 0 0 12px; }
.product-page__description p:last-child { margin-bottom: 0; }

.spec-table { display: flex; flex-direction: column; margin-top: 6px; }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); }
.spec-row__label { font: 500 12.5px var(--font-ui); color: var(--text-mute); flex: none; max-width: 50%; }
.spec-row__value { font: 600 12.5px var(--font-ui); color: var(--text); min-width: 0; text-align: right; overflow-wrap: anywhere; }
.spec-row__value--mono { font-family: var(--font-mono); }

/* Order status */
.order-status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font: 700 11px var(--font-ui); white-space: nowrap; }
.order-status--active { background: var(--accent-wash); color: var(--accent-bright); }
.order-status--cancelled { background: var(--warn-wash); color: var(--warn); }

.order-status--warn { background: var(--warn-wash); color: var(--warn); }
.order-status--muted { background: rgba(255, 255, 255, .08); color: var(--text-dim); }

/* Mockup 2d: a bar of segments on the orders list, a timeline on the order page. */
.order-progress { display: flex; gap: 4px; margin-top: 12px; }
.order-progress__seg { flex: 1; height: 4px; border-radius: 4px; background: var(--border-strong); }
.order-progress__seg--on { background: var(--accent-bright); }

.order-timeline { margin-top: 18px; padding: 16px; border-radius: 12px; background: var(--card); border: 1px solid rgba(53, 217, 150, .3); }
.order-timeline__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.order-timeline__created { font: 500 11px var(--font-mono); color: var(--text-faint); }
.order-timeline__step { display: flex; gap: 11px; align-items: flex-start; margin-top: 13px; }
.order-timeline__dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--border-strong); flex: none; }
.order-timeline__step--done .order-timeline__dot { background: var(--accent-bright); }
.order-timeline__step--current .order-timeline__dot { width: 13px; height: 13px; margin: 2px 0 0 -2px; border: 4px solid var(--accent-bright); background: var(--bg); box-sizing: border-box; }
.order-timeline__label { font: 600 12.5px var(--font-ui); color: var(--text-faint); }
.order-timeline__step--done .order-timeline__label { color: var(--text); }
.order-timeline__step--current .order-timeline__label { font-weight: 700; color: var(--accent-bright); }
.order-timeline__meta { font: 500 11px var(--font-mono); color: var(--text-faint); margin-top: 2px; }

.stepper { display: flex; gap: 0; margin-top: 20px; }
.stepper__step { flex: 1; padding: 10px 0; text-align: center; font: 700 11.5px var(--font-ui); color: var(--text-faint); border-bottom: 2px solid var(--border-strong); }
.stepper__step--done { color: var(--accent-bright); border-color: var(--accent-bright); }
.stepper__step--current { color: var(--text-bright); border-color: var(--text-bright); }

/* Cart */
.cart-page { display: grid; grid-template-columns: 1fr 366px; gap: 1px; background: var(--border-soft); }
.cart-page__items { background: var(--bg); padding: 24px 26px; min-width: 0; }
.cart-page__title { font: 800 24px var(--font-display); color: var(--text); letter-spacing: -.025em; }
.cart-notice {
  margin-top: 16px; padding: 13px 16px; border-radius: 11px; background: var(--warn-wash);
  border: 1px solid rgba(224, 113, 58, .35); display: flex; align-items: center; gap: 12px;
  font: 500 12.5px/1.5 var(--font-ui); color: #f0c3aa;
}
.cart-notice__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }

.cart-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  display: grid; grid-template-columns: 74px 1fr 150px 110px; gap: 16px; align-items: center; margin-top: 10px;
  position: relative; padding-right: 40px;
}
/* Removing a line asks first (turbo_confirm on the form). */
.cart-item__remove-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.cart-item__remove {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--text-faint);
}
.cart-item__remove:hover { color: var(--warn); border-color: var(--border-strong); background: var(--card-alt); }
.cart-item > :nth-child(3) { min-width: 0; }
.cart-item__photo { display: block; height: 66px; border-radius: 9px; overflow: hidden; }
.cart-item__sku { font: 500 10.5px var(--font-mono); color: var(--text-faint); }
.cart-item__name { font: 700 14px/1.35 var(--font-ui); color: var(--text); margin-top: 5px; }
.cart-item__note { font: 600 11.5px var(--font-ui); margin-top: 6px; }
.cart-item__note--ok { color: var(--accent-bright); }
.cart-item__note--warn { color: var(--warn); }
.cart-item__total { font: 700 17px/1 var(--font-mono); color: var(--text); text-align: right; }
.cart-item__unit { font: 500 11px var(--font-mono); color: var(--text-faint); margin-top: 4px; text-align: right; }

/* «С этими товарами часто покупают» — the mockup's 1g, at the end of the
   delivery step's column (and under the cart lines). */
.xsell { margin-top: 22px; padding: 16px; border-radius: 13px; background: var(--panel); border: 1px solid rgba(53, 217, 150, .25); }
.xsell__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.xsell__title { flex: 1; margin: 0; font: 800 15px var(--font-display); color: var(--text); letter-spacing: -.02em; }
.xsell__note { font: 500 11px var(--font-ui); color: var(--text-mute); }
.xsell__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.xsell-card { display: flex; flex-direction: column; padding: 10px; border-radius: 11px; background: var(--card); border: 1px solid var(--border); min-width: 0; }
.xsell-card--added { border-color: rgba(53, 217, 150, .45); }
.xsell-card__photo { display: block; height: 84px; border-radius: 8px; overflow: hidden; }
.xsell-card__photo .photo-img { object-fit: contain; }
.xsell-card__photo--empty { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px 12px); }
.xsell-card__name {
  margin-top: 8px; min-height: 31px; font: 600 11.5px/1.35 var(--font-ui); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.xsell-card__why { margin-top: 3px; font: 500 10px var(--font-ui); color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xsell-card__foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 9px; }
.xsell-card__foot form { margin: 0; }
.xsell-card__price { flex: 1; min-width: 0; font: 700 12.5px var(--font-mono); color: var(--text); white-space: nowrap; }
.xsell-card__btn {
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent);
  font: 700 11px var(--font-ui); color: #fff; cursor: pointer; white-space: nowrap;
}
.xsell-card__btn--added { background: transparent; border-color: rgba(53, 217, 150, .45); color: var(--accent-bright); }
@media (max-width: 640px) { .xsell__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.order-summary { background: var(--panel); padding: 24px 22px; }
.order-summary__title { font: 800 17px var(--font-display); color: var(--text); letter-spacing: -.02em; }
.summary-row { display: flex; justify-content: space-between; margin-top: 11px; }
.summary-row__label { font: 500 12.5px var(--font-ui); color: var(--text-dim); }
.summary-row__value { font: 600 12.5px var(--font-mono); color: var(--text); }
.summary-row__value--accent { color: var(--accent-bright); }
.order-summary__divider { height: 1px; background: var(--border-strong); margin: 16px 0; }
.order-summary__total { display: flex; align-items: flex-end; justify-content: space-between; }
.order-summary__total-label { font: 700 13px var(--font-ui); color: var(--text); }
.order-summary__total-value { font: 700 28px/1 var(--font-mono); color: var(--text-bright); }
.order-summary__vat { font: 500 11.5px var(--font-mono); color: var(--text-faint); margin-top: 6px; text-align: right; }
/* The divider above already gives the gap; the total below has none of its own. */
.order-summary__promo { margin-bottom: 20px; padding: 15px; border-radius: 11px; background: var(--card); border: 1px dashed var(--border-strong); }
.order-summary__promo input[type="text"] {
  flex: 1; min-width: 0; box-sizing: border-box; height: 38px; margin: 0; padding: 0 10px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border-strong); color: var(--text-bright);
  font: 500 12px var(--font-mono); text-transform: uppercase;
}
.order-summary__promo input[type="text"]::placeholder { color: var(--text-mute); }
.order-summary__promo input[type="text"]:focus { outline: 0; border-color: var(--accent-bright); }
.order-summary__promo input[type="submit"] { box-sizing: border-box; height: 38px; margin: 0; padding: 0 13px; border-radius: 8px; background: var(--card-alt); border: 0; font: 700 12px var(--font-ui); color: var(--text); cursor: pointer; }
.payment-tabs { display: flex; gap: 7px; margin-top: 18px; }
.payment-tab { flex: 1; padding: 11px; border-radius: 9px; font: 700 11.5px var(--font-ui); text-align: center; background: var(--card-alt); border: 1px solid var(--border-strong); color: var(--text-dim); }
.payment-tab--active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Forms */
.field { margin-top: 14px; }
.field label { display: block; font: 600 10.5px var(--font-ui); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 9px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 10px; background: var(--card-alt);
  border: 1px solid var(--border-strong); color: var(--text); font: 600 13px var(--font-ui);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent-bright); }
.field-row { display: flex; flex-wrap: wrap; gap: 0 14px; }
.field-row .field { flex: 1 1 140px; }

/* Modal (quick order) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal-backdrop[hidden] { display: none; }
.modal-card { width: 452px; max-width: 100%; background: var(--panel); border-radius: 14px; padding: 24px; border: 1px solid var(--border); }
.modal-card__head { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-card__close { font: 600 18px var(--font-ui); color: var(--text-mute); background: none; border: 0; cursor: pointer; }
.modal-card__badge { display: inline-block; font: 800 11px var(--font-mono); color: var(--accent-bright); background: var(--accent-wash); border-radius: 6px; padding: 4px 8px; }
.modal-card__title { font: 800 24px/1.15 var(--font-display); color: var(--text-bright); letter-spacing: -.025em; margin-top: 12px; }

/* Responsive */
@media (max-width: 900px) {
  .catalog { grid-template-columns: 1fr; }
  .filters { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .product-page { grid-template-columns: 1fr; }
  .cart-page { grid-template-columns: 1fr; }
  .product-row { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  /* The narrow slider after the mockup's 1f: the photo on top, the text
     under it, dots at the bottom. All slides share one grid cell and the
     hidden ones keep their place, invisible, so the card is as tall as its
     tallest slide whatever the admin typed and the page doesn't jump as it
     turns. The stripes are the whole slide's, not the text's: a slide
     with no photo shows its product under the text, and the pattern used
     to end above it, leaving a bare band. */
  .hero-slider__card { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hero-slide, .hero-slide[hidden] {
    display: flex; flex-direction: column; grid-area: 1 / 1; min-width: 0;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 11px);
  }
  .hero-slide[hidden] { visibility: hidden; }
  .hero-slide__text { flex: 1; padding: 18px 18px 16px; }
  .hero-slide__text::before { display: none; }
  .hero-slide__photo { order: -1; flex: none; height: clamp(168px, 40vw, 280px); }
  .hero-slide__photo:empty { display: none; }
  .hero-slide__photo:not(:has(> .photo-img, > picture > .photo-img)) { order: 0; display: block; height: auto; background: none; padding: 0 16px 16px; }
  .hero-slide__photo:not(:has(> .photo-img, > picture > .photo-img)) .hero-slide__overlay-card { position: static; min-width: 0; }
  .hero-slide__badges, .hero-slide__headline, .hero-slide__lede { min-height: 0; }
  .hero-slide__headline { font-size: clamp(22px, 6.4vw, 36px); line-height: 1.08; margin-top: 14px; }
  .hero-slide__lede { font-size: 13px; line-height: 1.55; margin-top: 10px; max-width: none; }
  /* A shorter slide's spare height goes above its buttons, so they and
     the dots sit at the bottom of every slide alike. */
  .hero-slide__lede { margin-bottom: 16px; }
  .hero-slide__actions { margin-top: auto; gap: 8px; }
  .hero-slide__actions .btn { padding: 14px 16px; }
  .hero-slide__actions .btn--primary { flex: 1; }
  .hero-slide__controls { justify-content: center; margin-top: 0; padding-top: 16px; }
  .hero-slide__arrow, .hero-slide__counter { display: none; }
  .hero-slider__tiles { grid-template-columns: 1fr 1fr; }
}
/* .cart-item__row wraps the qty-stepper + total (see cart_items/_cart_item)
   so the mobile rule below can lay them out as one flex row without
   touching desktop — display:contents unwraps it from the box tree, so its
   two children keep landing in .cart-item's own grid tracks 3/4 exactly as
   if the wrapper weren't there. */
.cart-item__row { display: contents; }

/* Triggers/sheets for one column, hidden until the ≤900px block below turns
   them on — kept out of layout entirely above that width. */
.filters-trigger { display: none; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px; background: var(--accent); font: 700 11.5px var(--font-ui); color: #fff; white-space: nowrap; }
.filters-trigger__badge { background: #fff; color: var(--bg); border-radius: 20px; padding: 1px 6px; font: 700 10px var(--font-mono); }
.filters__sheet-cta { display: none; width: 100%; margin-top: 18px; padding: 16px; border-radius: 12px; background: var(--accent); border: 0; font: 800 14px var(--font-ui); color: #fff; text-align: center; cursor: pointer; }
@media (max-width: 900px) {
  /* One column: the filters sidebar becomes a bottom sheet (stacked above
     the list, a long set of filters pushed the products off the screen) — same content, toggled by
     filter_sheet_controller.js via the .is-open class (not [hidden], so the
     transform transition below can animate the slide). */
  .filters-trigger { display: flex; }
  .filters__sheet-cta { display: block; position: sticky; bottom: env(safe-area-inset-bottom); box-shadow: 0 -12px 16px -4px var(--panel-2); }
  .filters-backdrop { position: fixed; inset: 0; z-index: 94; background: rgba(0, 0, 0, .6); }
  .filters {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; max-height: 82vh; overflow-y: auto;
    border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .45);
    transform: translateY(100%); transition: transform .25s ease;
  }
  .filters.is-open { transform: translateY(0); }
}

@media (max-width: 560px) {
  .site-footer { grid-template-columns: 1fr; }
  .delivery-cards { grid-template-columns: 1fr; }
  /* The phone slider has dots and a swipe (mockup 1f), not the tiles: two
     tiles didn't fit across and ran under the chat button. */
  .hero-slider { padding: 12px 16px 0; }
  .hero-slider__tiles { display: none; }
  /* Fills the screen under the header bar. Sized for the bar alone, as it
     is once the info line has scrolled away; at the very top the panel
     runs 32px below the screen, which the accordion's bottom padding makes
     up for. */
  .catalog-menu { height: calc(100dvh - 56px); max-height: none; overscroll-behavior: contain; box-shadow: none; }


  /* Product list card — thumb left spanning the full card height, name/meta
     then price/buy stacked to its right (see categories/_product_row; no
     template change, just grid-area reassignment of its existing children). */
  /* align-items: start overrides the base rule's `center` (meant for the
     desktop single-row layout) — left as `center` here, the photo (grid-
     row 1/4, spanning all three text rows) centers *within* that spanned
     area instead of sitting flush at the top, floating below the name. */
  .product-row { grid-template-columns: 84px 1fr; grid-template-rows: auto auto auto; gap: 10px 12px; align-items: start; }
  .product-row__photo { grid-row: 1 / 4; grid-column: 1; height: auto; align-self: stretch; }
  .product-row > div:nth-child(2) { grid-column: 2; grid-row: 1; }
  .product-row > div:nth-child(3) { grid-column: 2; grid-row: 2; }
  .product-row__buy { grid-column: 2; grid-row: 3; }

  /* Cart item card — same thumb-left idea; .cart-item__row (qty stepper +
     total) becomes a real flex row spanning both columns underneath. */
  .cart-item { grid-template-columns: 64px 1fr; text-align: left; }
  .cart-item__total, .cart-item__unit { text-align: right; }
  .cart-item__photo { height: 64px; }
  .cart-item__row { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / 3; }

  /* Order total + CTA pin to the viewport bottom on cart/checkout pages,
     so the button to go on is always under the thumb.
     body.ctrl-carts/ctrl-checkout come from the layout's controller-name
     class (see layouts/application.html.slim). */
  body.ctrl-carts, body.ctrl-checkout { padding-bottom: 110px; }
  body.ctrl-carts .order-summary__promo, body.ctrl-checkout .order-summary__promo { margin-bottom: 0; }
  body.ctrl-carts .order-summary__sticky, body.ctrl-checkout .order-summary__sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--panel); border-top: 1px solid var(--border-soft);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }

  /* Quick-order ("1 клик") becomes a bottom sheet too, same visual language
     as the filters sheet above. */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-card { width: 100%; border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; }
  .city-picker .modal-card { width: 100vw; padding: 20px 16px 24px; }

  /* Header after the mockup's 4a–4d: an info line, then menu · logo ·
     green magnifier · sign-in · cart as 42px squares; the magnifier turns
     the bar into a full-width search box (.site-header--searching). */
  .mobile-infobar { display: flex; align-items: center; gap: 10px; height: 32px; box-sizing: border-box; padding: 0 16px; background: var(--panel-2); border-bottom: 1px solid var(--border-soft); font: 600 11.5px var(--font-ui); color: var(--text-dim); }
  .mobile-infobar__city { white-space: nowrap; flex: none; padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dashed currentColor; }
  .header-city { display: none; }
  .mobile-infobar__sep { width: 1px; height: 12px; background: var(--border-strong); }
  .mobile-infobar__note { font-weight: 500; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-infobar__phone { margin-left: auto; font: 700 11.5px var(--font-mono); color: var(--text); white-space: nowrap; text-decoration: none; }
  .topbar { display: none; }
  .site-header { position: relative; padding: 10px 14px; gap: 8px; flex-wrap: nowrap; }
  .catalog-btn { order: -1; width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 0; gap: 0; border-radius: 12px; background: var(--card-alt); border: 1px solid var(--border-strong); flex: none; }
  .site-header__logo { flex: 1; min-width: 0; align-items: center; }
  .site-header__mark { width: 34px; height: 34px; border-radius: 9px; font-size: 10.5px; flex: none; }
  .site-header__name { font-size: 15px; display: flex; flex-wrap: wrap; align-items: baseline; }
  .site-header__tagline { display: block; flex-basis: 100%; font: 500 9.5px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); margin-top: 3px; }
  .mobile-search-btn { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
  .mobile-search-btn svg { width: 19px; height: 19px; }
  .search-wrap { display: none; }
  span.header-actions__link, a.header-actions__link, .header-actions .btn--sm, .header-actions form { display: none; }
  .header-actions { gap: 8px; }
  .header-actions__divider { display: none; }
  .header-actions__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--card-alt); border: 1px solid var(--border-strong); color: var(--text); cursor: pointer; padding: 0; }
  .header-actions__icon svg { width: 19px; height: 19px; }
  /* The «ЛК» trigger becomes the profile square; its menu drops as a sheet
     across the whole bar (anchored to .site-header, not to the square), with
     rows tall enough for a finger. */
  .account-menu { position: static; }
  .account-menu__trigger { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 12px; }
  .account-menu__trigger svg { width: 19px; height: 19px; }
  .account-menu__label, .account-menu__trigger::after { display: none; }
  .account-menu__panel {
    top: 100%; left: 0; right: 0; width: auto; padding: 6px 8px 12px; border-radius: 0 0 18px 18px;
    border-width: 1px 0; max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain;
  }
  .account-menu__panel::before { display: none; }
  .account-menu__who { padding: 12px 12px 12px; }
  .account-menu__name { font-size: 14px; }
  .account-menu__email { font-size: 12px; }
  .account-menu__link, .account-menu__logout { min-height: 48px; box-sizing: border-box; padding: 12px; font-size: 15px; }
  .header-actions .account-menu__panel form { display: block; }
  /* The sign-in modal lives in the header too: its login, sign-up and
     reset forms were hidden with the bar's own buttons. */
  .header-actions .modal-card form { display: block; }
  /* So does the cart panel: its crosses and promo code were hidden too. */
  .header-actions .offcanvas-panel form { display: block; }
  .header-actions .offcanvas-panel form.cart-modal__promo { display: flex; }
  /* On a phone the panel is the whole screen, not a strip with the page showing at its edge. */
  .offcanvas-panel { width: 100%; border-left: 0; padding: 18px 16px; }
  .cart-badge { position: relative; width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 12px; }
  .cart-badge__label { display: none; }
  .cart-badge__icon { display: block; }
  .cart-badge__count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; border: 2px solid var(--panel); font-size: 10px; line-height: 14px; }
  .site-header--searching > :not(.search-wrap) { display: none; }
  .site-header--searching .search-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; position: static; }
  .site-header--searching { padding: 12px 16px; }
  /* While searching the city line goes, so the field sits at the very top. */
  .site-header-host:has(.site-header--searching) .mobile-infobar { display: none; }
  .site-header--searching .search-form { flex: 1; min-width: 0; border-color: var(--accent-bright); box-shadow: 0 0 0 4px rgba(53, 217, 150, .12); }
  /* 16px, not the desktop's 13: iOS zooms the page in on focusing a
     smaller input, and the box ran off the right edge of the screen. */
  .search-form input { font-size: 16px; text-overflow: ellipsis; }
  .search-back { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--card-alt); border: 1px solid var(--border-strong); color: var(--text); font-size: 18px; cursor: pointer; }
  .site-header--searching .search-panel, .search-start { position: absolute; left: 0; right: 0; top: 100%; max-height: 75vh; overflow-y: auto; }
  /* A screen of its own (mockup 4b), not a strip over the page. */
  .search-start { padding: 16px; background: var(--bg); z-index: 5; height: calc(100dvh - 56px); max-height: none; box-sizing: border-box; overscroll-behavior: contain; }
}

/* Ozon Доставка on the checkout delivery step (checkout/_ozon_delivery) */
.ozon-delivery { margin-top: 14px; }
.postpay-note { margin-top: 14px; padding: 13px 15px; border-radius: 11px; background: var(--accent-wash); border: 1px solid rgba(53, 217, 150, .3); font: 500 12.5px/1.55 var(--font-ui); color: var(--text); }
.postpay-note[hidden] { display: none; }
.postpay-note__title { font: 700 13px var(--font-ui); color: var(--accent-bright); margin-bottom: 3px; }
.account__credit { margin: 0 8px; padding: 12px 13px; border-radius: 11px; background: var(--card); border: 1px solid var(--border); }
.account__credit-label { font: 600 10.5px var(--font-ui); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; }
.account__credit-value { font: 800 18px var(--font-mono); color: var(--text-bright); margin-top: 4px; }
.account__credit-bar { height: 5px; border-radius: 3px; background: var(--card-alt); margin-top: 8px; overflow: hidden; }
.account__credit-bar span { display: block; height: 100%; background: var(--accent-bright); }
.account__credit-used { font: 500 11px var(--font-ui); color: var(--text-dim); margin-top: 6px; }

/* Личный кабинет: a side menu and the page beside it. */
.account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; min-height: 60vh; border-top: 1px solid var(--border-soft); }
.account__side { padding: 22px 14px; border-right: 1px solid var(--border-soft); background: var(--panel); display: flex; flex-direction: column; gap: 16px; }
.account__who { display: flex; align-items: center; gap: 11px; padding: 0 8px; }
.account__avatar { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--accent); display: grid; place-items: center; font: 800 12px var(--font-mono); color: #fff; }
.account__name { font: 700 13.5px/1.3 var(--font-ui); color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; }
.account__kind { font: 500 11px var(--font-ui); color: var(--text-dim); margin-top: 2px; }
.account__nav { display: flex; flex-direction: column; gap: 2px; }
.account__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 9px; font: 600 13px var(--font-ui); color: var(--text-dim); text-decoration: none; }
.account__link:hover { background: var(--card); color: var(--text); }
.account__link--on { background: var(--card-alt); color: var(--text-bright); }
.account__link--soon { color: var(--text-mute); }
.account__soon { font: 600 9.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.account__logout { margin: auto 8px 0; padding: 0; background: none; border: 0; font: 600 12px var(--font-ui); color: var(--text-dim); cursor: pointer; text-align: left; }
.account__logout:hover { color: var(--warn); }
.account__main { padding: 26px 28px 40px; min-width: 0; }
.account__title { font: 800 22px var(--font-display); color: var(--text-bright); letter-spacing: -.02em; margin: 0 0 16px; }
.account__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.account__title-row .account__title { margin: 0 auto 0 0; }
.account__subtitle { font: 800 14px var(--font-display); color: var(--text); letter-spacing: -.01em; margin: 22px 0 12px; }
.account__lede { font: 500 12.5px/1.6 var(--font-ui); color: var(--text-dim); max-width: 640px; margin: -6px 0 18px; }
.account-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border-strong); margin-bottom: 16px; overflow-x: auto; }
.account-tab { padding: 0 0 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; font: 600 13px var(--font-ui); color: var(--text-mute); text-decoration: none; white-space: nowrap; }
.account-tab--on { border-bottom-color: var(--accent-bright); color: var(--text); font-weight: 700; }
.account-tab__count { margin-left: 6px; font: 700 11px var(--font-mono); color: var(--accent-bright); }
.account-empty { padding: 34px 16px; border-radius: 12px; border: 1px dashed var(--border-strong); text-align: center; font: 500 12.5px/1.6 var(--font-ui); color: var(--text-dim); display: flex; flex-direction: column; align-items: center; }
.order-card { padding: 16px 18px; border-radius: 13px; background: var(--card); border: 1px solid var(--border); margin-bottom: 10px; }
.order-card__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-card__number { font: 700 14px var(--font-mono); color: var(--text-bright); text-decoration: none; }
.order-card__when { font: 500 11px var(--font-mono); color: var(--text-faint); }
.order-card__total { margin-left: auto; font: 700 16px var(--font-mono); color: var(--text-bright); }
.order-card__what { font: 500 12.5px/1.5 var(--font-ui); color: var(--text-dim); margin: 8px 0 12px; }
.order-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.order-card__actions form { display: inline-flex; }
.account-list { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.account-row__kind { font: 700 11px var(--font-ui); color: var(--accent-bright); }
.account-row__text { font: 600 13px/1.45 var(--font-ui); color: var(--text); margin-top: 3px; overflow-wrap: anywhere; }
.account-row__meta { font: 500 11px var(--font-ui); color: var(--text-faint); margin-top: 3px; }
.account-form { max-width: 640px; }
.account-form input:disabled { opacity: .6; }
@media (max-width: 860px) {
  .account { grid-template-columns: 1fr; }
  .account__side { border-right: 0; border-bottom: 1px solid var(--border-soft); padding: 14px 12px; gap: 10px; }
  .account__nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  .account__link { white-space: nowrap; padding: 8px 11px; }
  .account__logout { display: none; }
  .account__main { padding: 18px 16px 30px; }
}

/* «Список / Плитка» in a listing's toolbar. */
.view-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.view-switch__option { padding: 8px 13px; font: 600 12px var(--font-ui); color: var(--text-dim); background: var(--card-alt); cursor: pointer; }
.view-switch__option input { position: absolute; opacity: 0; pointer-events: none; }
.view-switch__option--on { background: var(--accent); color: #fff; }
.view-switch__option:not(.view-switch__option--on):hover { color: var(--text); }

/* Product page tabs. */
.product-tabs { margin-top: 20px; }
.product-tabs__strip { display: flex; gap: 20px; border-bottom: 1px solid var(--border-strong); overflow-x: auto; }
.product-tab { padding: 0 0 10px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: 600 13px var(--font-ui); color: var(--text-mute); cursor: pointer; white-space: nowrap; }
.product-tab:hover { color: var(--text); }
.product-tab--active { border-bottom-color: var(--accent-bright); font-weight: 700; color: var(--text); }
.product-tabs__soon { padding: 34px 16px; margin-top: 16px; border-radius: 12px; border: 1px dashed var(--border-strong); text-align: center; font: 500 12.5px/1.6 var(--font-ui); color: var(--text-dim); }
.product-tabs__soon[hidden] { display: none; }
.product-tabs__soon-title { font: 800 15px var(--font-display); color: var(--text); letter-spacing: -.02em; margin-bottom: 6px; }

/* Earlier delivery addresses, above the delivery form. */
.saved-addresses { margin-bottom: 18px; }
.saved-addresses__title { font: 600 10.5px var(--font-ui); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
/* A customer may have dozens: past two rows the list scrolls, latest first. */
.saved-addresses__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; max-height: 148px; overflow-y: auto; padding-right: 2px; }
.saved-address { display: flex; align-items: stretch; border-radius: 11px; background: var(--card); border: 1px solid var(--border-strong); overflow: hidden; }
.saved-address:hover { border-color: var(--accent); }
.saved-address--on { border-color: var(--accent-bright); background: var(--accent-wash); }
.saved-address__use { flex: 1; min-width: 0; padding: 11px 13px; background: none; border: 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.saved-address__kind { font: 700 11px var(--font-ui); color: var(--accent-bright); }
.saved-address__text { font: 600 12.5px/1.4 var(--font-ui); color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.saved-address form { display: flex; }
a.saved-address__forget { display: flex; align-items: center; text-decoration: none; }
.checkbox-line { display: flex; align-items: center; gap: 9px; margin-top: 4px; font: 600 12.5px var(--font-ui); color: var(--text); cursor: pointer; }
.checkbox-line input { accent-color: var(--accent); width: 16px; height: 16px; }
.saved-address__forget { padding: 0 11px; background: none; border: 0; border-left: 1px solid var(--border-soft); color: var(--text-faint); font: 500 17px var(--font-ui); cursor: pointer; }
.saved-address__forget:hover { color: var(--warn); }
.ozon-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ozon-tab {
  display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 13px 14px; cursor: pointer;
  border-radius: 11px; background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.ozon-tab:hover { border-color: var(--border-strong); }
.ozon-tab:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.ozon-tab--on { border: 1.5px solid var(--accent-bright); padding: 12.5px 13.5px; }
.ozon-tab__title { font: 700 13.5px var(--font-ui); }
.ozon-tab__hint { font: 500 12px var(--font-ui); color: var(--text-dim); }
.ozon-pane { border: 0; padding: 0; margin: 0; min-width: 0; }
.ozon-search { display: flex; align-items: stretch; gap: 10px; margin-top: 14px; }
.ozon-search__field { flex: 1; min-width: 0; }
/* One fixed height for the field and the button: .btn's generous padding
   made «Рядом со мной» taller than the input beside it. */
.ozon-search__field input {
  box-sizing: border-box; height: 46px; margin: 0;
  width: 100%; padding: 0 14px; border-radius: 10px; background: var(--card-alt);
  border: 1px solid var(--border-strong); color: var(--text); font: 500 13px var(--font-ui);
}
.ozon-search__field input:focus { outline: 0; border-color: var(--accent-bright); }
.ozon-search__near { box-sizing: border-box; height: 46px; margin: 0; padding: 0 18px; border-radius: 10px; white-space: nowrap; }
.ozon-map-wrap { position: relative; z-index: 0; margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
/* The map in the site's own dark: OpenStreetMap's tiles inverted and
   toned down rather than a second, paid set of dark tiles.
   Leaflet blends tiles with plus-lighter to hide the hairline gaps
   between them; on a dark page that draws a bright grid instead (a dark
   one once inverted). Plain blending and a pixel of overlap do it. */
.ozon-map { height: 440px; background: #151815; z-index: 0; font-family: var(--font-ui); }
.ozon-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(1.15) contrast(.85) saturate(.5); }
/* Tiles that are dark already (Mapbox) are shown as they are. */
.ozon-map--native-dark .leaflet-tile-pane { filter: none; }
/* Normal blending, not Leaflet's plus-lighter: under the inversion above
   that drew a bright seam along every tile edge. No resizing of the tiles
   here — stretching them by a pixel to hide seams blurred the labels. */
.ozon-map img.leaflet-tile { mix-blend-mode: normal; }
.ozon-map .leaflet-bar { border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.ozon-map .leaflet-bar a, .ozon-map .leaflet-bar a:hover {
  width: 34px; height: 34px; line-height: 34px; background: var(--bg); color: var(--text);
  border-bottom: 1px solid var(--border); font-size: 18px;
}
.ozon-map .leaflet-bar a:last-child { border-bottom: 0; }
.ozon-map .leaflet-bar a:hover { background: var(--card-alt); color: var(--accent-bright); }
.ozon-map .leaflet-bar a.leaflet-disabled { background: var(--bg); color: var(--text-faint); }
.ozon-map .leaflet-control-attribution { background: rgba(11, 12, 11, .72); color: var(--text-mute); font-size: 10px; border-radius: 6px 0 0 0; }
.ozon-map .leaflet-control-attribution a { color: var(--text-dim); }
.ozon-pin {
  position: relative; display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #2f7bff; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .55); transition: transform .12s, background .12s;
}
.ozon-pin::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.leaflet-marker-icon:hover .ozon-pin { transform: rotate(-45deg) scale(1.18); }
.ozon-pin--open { background: #ffb020; }
.ozon-pin--on { background: var(--accent-bright); }
.ozon-pin--on::after { background: var(--bg); }
/* A group of points: Ozon's blue, sized by how many (merged on screen by
   ozon_delivery_controller#merge), a white rim to stand off the dark map. */
.ozon-cluster {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-sizing: border-box;
  background: radial-gradient(circle at 35% 30%, #5b97ff, #2f6fe8); color: #fff; font: 700 12px var(--font-mono);
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 4px rgba(47, 123, 255, .22), 0 4px 12px rgba(0, 0, 0, .5); transition: transform .12s;
}
.leaflet-marker-icon:hover .ozon-cluster { transform: scale(1.1); }
.ozon-point {
  position: absolute; z-index: 500; top: 10px; right: 10px; width: min(300px, calc(100% - 20px)); padding: 14px;
  border-radius: 11px; background: var(--bg); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.ozon-point__close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--text-mute); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }
.ozon-point__name { font: 700 13.5px var(--font-ui); color: var(--text); padding-right: 22px; }
.ozon-point__address { font: 500 12.5px/1.5 var(--font-ui); color: var(--text-dim); margin-top: 6px; }
.ozon-point__way { font: 500 11.5px/1.5 var(--font-ui); color: var(--text-mute); margin-top: 6px; max-height: 5.2em; overflow-y: auto; }
.ozon-point__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ozon-point__facts span { font: 600 11px var(--font-ui); color: var(--text-dim); background: var(--card-alt); border-radius: 6px; padding: 4px 7px; }
.ozon-point__quote { font: 700 13px var(--font-mono); color: var(--accent-bright); margin: 11px 0 10px; }
.ozon-point__refusal { font: 600 12.5px/1.5 var(--font-ui); color: var(--warn); margin-top: 11px; }
.ozon-point__wait { font: 500 12.5px var(--font-ui); color: var(--text-dim); margin: 0; }
.ozon-hint { font: 500 12px/1.5 var(--font-ui); color: var(--text-dim); margin: 9px 0 0; }
.ozon-hint--warn { color: var(--warn); }
.ozon-chosen { margin-top: 12px; padding: 12px 14px; border-radius: 11px; background: var(--accent-wash); border: 1px solid rgba(53, 217, 150, .35); }
.ozon-chosen__label { font: 600 10.5px var(--font-ui); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; }
.ozon-chosen__text { font: 600 13px/1.5 var(--font-ui); color: var(--text); margin-top: 5px; }
.ozon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
.ozon-quote { margin-top: 14px; padding: 12px 14px; border-radius: 11px; background: var(--accent-wash); font: 700 13px var(--font-mono); color: var(--accent-bright); }
.ozon-quote--warn { background: var(--warn-wash); color: var(--warn); font-family: var(--font-ui); font-weight: 600; }
@media (max-width: 640px) {
  .ozon-search { flex-direction: column; }
  .ozon-map { height: 340px; }
  .ozon-point { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; }
  .ozon-grid { grid-template-columns: 1fr 1fr; }
}

/* The product page's Ozon card opens the checkout's picker in a modal
   (product_delivery_quotes/picker): wide enough for the map on a desktop,
   the whole screen on a phone, with «Выбрать» kept in reach at the foot. */
.delivery-card-picker { display: contents; }
.delivery-card--action { cursor: pointer; transition: border-color .12s; }
.delivery-card--action:hover { border-color: var(--accent); }
.delivery-card--action:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.delivery-card__change { font: 600 11.5px var(--font-ui); color: var(--accent-bright); }
.delivery-card__price--warn { color: var(--warn); font-family: var(--font-ui); font-weight: 600; }
html.has-sheet { overflow: hidden; }
.delivery-picker { z-index: 1000; }
.modal-card.delivery-picker__card {
  width: 820px; max-height: calc(100vh - 40px); padding: 0; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.delivery-picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border-soft); }
.delivery-picker__title { font: 800 22px/1.15 var(--font-display); color: var(--text-bright); letter-spacing: -.025em; margin: 10px 0 0; }
.delivery-picker__product { font: 500 12.5px/1.4 var(--font-ui); color: var(--text-dim); margin: 6px 0 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.delivery-picker__card > turbo-frame { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 0; }
.delivery-picker__wait { font: 500 13px var(--font-ui); color: var(--text-dim); padding: 120px 0; text-align: center; margin: 0; }
.delivery-picker .ozon-map { height: 380px; }
.delivery-picker__error { font: 600 12.5px/1.5 var(--font-ui); color: var(--warn); margin: 12px 0 0; }
.delivery-picker__error:empty { display: none; }
.delivery-picker__foot {
  position: sticky; bottom: 0; z-index: 600; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 16px -24px 0; padding: 14px 24px; background: var(--panel); border-top: 1px solid var(--border-soft);
}
.delivery-picker__note { font: 500 11.5px/1.5 var(--font-ui); color: var(--text-faint); margin: 0; }
.delivery-picker__foot .btn { flex: none; min-width: 140px; }
@media (max-width: 640px) {
  .delivery-picker.modal-backdrop { padding: 0; align-items: stretch; }
  .modal-card.delivery-picker__card { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .delivery-picker__head { padding: calc(14px + env(safe-area-inset-top)) 16px 12px; }
  .delivery-picker__title { font-size: 18px; margin-top: 8px; }
  .delivery-picker__card > turbo-frame { padding: 14px 16px 0; }
  .delivery-picker .ozon-map { height: 46vh; min-height: 280px; }
  .delivery-picker__foot { margin: 14px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 10px; }
  .delivery-picker__foot .btn { width: 100%; }
}

/* Link to the VK community (admin → Интеграции → VK для бизнеса). */
.footer-vk { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--border, rgba(255,255,255,.12)); font: 600 12.5px var(--font-ui, Manrope, sans-serif); color: var(--text, #f2f4f1); text-decoration: none; }
.footer-vk:hover { border-color: #35d996; color: #35d996; }

/* Cabinet → «Интеграция» (account/integrations/show). */
.account-card { max-width: 760px; padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); margin-bottom: 12px; }
.account-card p { font: 500 12.5px/1.6 var(--font-ui); color: var(--text-dim); margin: 0 0 12px; }
.account-card__title { font: 700 15px var(--font-ui); color: var(--text-bright); margin: 0 0 8px; }
.account-card__hint { font-size: 11.5px !important; color: var(--text-faint) !important; }
.integration-url { padding: 10px 12px; border-radius: 9px; background: var(--bg, #0b0c0b); border: 1px solid var(--border-strong); margin: 0 0 8px; overflow-x: auto; }
.integration-url code { font: 500 12px var(--font-mono); color: var(--accent-bright); white-space: nowrap; }
.api-docs { max-width: 900px; margin: 0 auto; padding: 28px 16px 60px; }
.api-docs h1 { font: 800 28px var(--font-display); color: var(--text-bright); margin: 0 0 10px; }
.api-docs h2 { font: 700 18px var(--font-ui); color: var(--text-bright); margin: 30px 0 10px; }
.api-docs h3 { font: 700 14px var(--font-mono); color: var(--accent-bright); margin: 22px 0 8px; }
.api-docs p, .api-docs li { font: 500 13.5px/1.7 var(--font-ui); color: var(--text-dim); }
.api-docs pre { padding: 12px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); overflow-x: auto; font: 500 12px/1.6 var(--font-mono); color: var(--text); }
.api-docs code { font: 500 12.5px var(--font-mono); color: var(--accent-bright); }
.api-docs table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.api-docs td, .api-docs th { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); font: 500 12.5px/1.5 var(--font-ui); color: var(--text-dim); vertical-align: top; }
.api-docs th { color: var(--text); font-weight: 700; }
.order-status--source { margin-left: 6px; background: rgba(53, 140, 217, .14); color: #8cc4f5; }

/* Support chat — mockup 5a (desktop window above the button) and 5b
   (full screen on a phone, the button in the bottom corner). */
.support-chat { position: fixed; right: 24px; bottom: 24px; z-index: 85; font-family: var(--font-ui); }
.support-chat [hidden] { display: none !important; }
.support-chat__fab {
  position: relative; width: 58px; height: 58px; border-radius: 18px; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--accent);
  box-shadow: 0 10px 30px rgba(15, 122, 90, .45), 0 0 0 1px rgba(53, 217, 150, .35) inset;
}
.support-chat__fab:hover { background: #128d68; }
.support-chat__fab-close { display: none; }
.support-chat--open .support-chat__fab { background: #1a1f1a; border: 1px solid var(--border-strong); box-shadow: none; color: var(--text); }
.support-chat--open .support-chat__fab-open { display: none; }
.support-chat--open .support-chat__fab-close { display: block; }
.support-chat__badge::after { content: attr(data-count); }
.support-chat__badge {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: var(--warn); border: 2px solid var(--bg); display: grid; place-items: center; font: 800 10px var(--font-mono); color: #fff;
}
.support-chat__tip {
  position: absolute; right: 70px; bottom: 10px; white-space: nowrap; padding: 10px 14px; border-radius: 12px 12px 4px 12px;
  background: var(--card); border: 1px solid rgba(255, 255, 255, .1); font: 600 12px var(--font-ui); color: var(--text);
}
.support-chat__window {
  position: absolute; right: 0; bottom: 72px; width: 384px; height: min(600px, calc(100vh - 120px));
  border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.support-chat__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--panel); border-bottom: 1px solid var(--border-soft); }
.support-chat__head-chat, .support-chat__head-history { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.support-chat__avatar {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent);
  display: grid; place-items: center; font: 800 10.5px var(--font-mono); color: #fff;
}
.support-chat__online { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-bright); border: 2px solid var(--panel); }
.support-chat__who { flex: 1; min-width: 0; }
.support-chat__name { font: 700 13.5px var(--font-ui); color: var(--text); }
.support-chat__head-history .support-chat__name { flex: 1; }
.support-chat__agent { font: 500 11px var(--font-ui); color: var(--accent-bright); margin-top: 2px; }
.support-chat__icon-btn {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 9px; border: 0; background: none;
  display: grid; place-items: center; color: var(--text-dim); cursor: pointer;
}
.support-chat__icon-btn:hover { background: #1a1f1a; color: var(--text); }
.support-chat__count { position: absolute; top: 4px; right: 3px; font: 700 9px var(--font-mono); color: var(--bg); background: var(--text-dim); border-radius: 6px; padding: 0 4px; }
.support-chat__view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.support-chat__scroll { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.support-chat__scroll > div[data-support-chat-target="messages"] { display: flex; flex-direction: column; gap: 10px; }
.support-chat__date { align-self: center; font: 600 10.5px var(--font-mono); color: var(--text-faint); padding: 3px 9px; border-radius: 6px; background: var(--card); }
.support-chat__msg { display: flex; flex-direction: column; gap: 3px; }
.support-chat__msg--store { align-items: flex-start; }
.support-chat__msg--customer { align-items: flex-end; }
.support-chat__bubble {
  max-width: 82%; padding: 9px 12px; font: 500 12.5px/1.5 var(--font-ui); white-space: pre-wrap; overflow-wrap: anywhere;
}
.support-chat__msg--store .support-chat__bubble { border-radius: 4px 14px 14px 14px; background: var(--card); border: 1px solid var(--border-soft); color: var(--text); }
.support-chat__msg--customer .support-chat__bubble { border-radius: 14px 4px 14px 14px; background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.support-chat__msg--customer .support-chat__bubble a { color: #fff; text-decoration: underline; }
.support-chat__meta { font: 500 10px var(--font-mono); color: #5c635a; padding: 0 4px; }
.support-chat__cart-link { display: inline-flex; align-items: center; margin-top: 3px; padding: 7px 13px; border-radius: 9px; background: var(--accent); font: 700 12px var(--font-ui); color: #fff; text-decoration: none; }
.support-chat__cart-link:hover { background: var(--accent-bright); color: #0b0c0b; }
.support-chat__typing {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; padding: 10px 14px;
  border-radius: 4px 14px 14px 14px; background: var(--card); border: 1px solid var(--border-soft);
  font: 600 12px var(--font-ui); color: var(--text-mute); animation: support-typing-in .25s ease-out;
}
.support-chat__typing[hidden] { display: none; }
.support-chat__draft { margin-top: 10px; }
.support-chat__typing--compact { margin-top: 6px; padding: 7px 11px; }
.support-chat__typing--compact .support-chat__typing-label { display: none; }
.support-chat__typing-dots { display: inline-flex; gap: 4px; }
.support-chat__typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); animation: support-typing-dot 1.2s infinite ease-in-out; }
.support-chat__typing-dots i:nth-child(2) { animation-delay: .15s; }
.support-chat__typing-dots i:nth-child(3) { animation-delay: .3s; }
.support-chat__typing-label { background: linear-gradient(90deg, var(--text-mute) 40%, var(--text) 50%, var(--text-mute) 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: support-typing-gleam 2.4s linear infinite; }
@keyframes support-typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes support-typing-gleam { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes support-typing-in { from { opacity: 0; transform: translateY(4px); } }
/* Reduced motion: the dots only fade, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .support-chat__typing { animation: none; }
  .support-chat__typing-dots i { animation-name: support-typing-fade; }
  .support-chat__typing-label { animation: none; color: var(--text-mute); background: none; }
}
@keyframes support-typing-fade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.support-chat__quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.support-chat__quick-btn { padding: 7px 11px; border-radius: 20px; border: 1px solid rgba(53, 217, 150, .35); background: none; font: 600 11.5px var(--font-ui); color: var(--accent-bright); cursor: pointer; }
.support-chat__quick-btn:hover { background: var(--accent-wash); }
.support-chat__closed { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel); border-top: 1px solid var(--border-soft); }
.support-chat__closed span { flex: 1; font: 500 11.5px var(--font-ui); color: var(--text-mute); }
.support-chat__new { padding: 8px 12px; border-radius: 9px; border: 0; background: var(--accent); font: 700 11.5px var(--font-ui); color: #fff; cursor: pointer; }
.support-chat__compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--panel); border-top: 1px solid var(--border-soft); }
.support-chat__input {
  flex: 1; min-width: 0; min-height: 40px; max-height: 120px; resize: none; padding: 10px 12px; border-radius: 10px;
  background: var(--bg); border: 1px solid rgba(255, 255, 255, .12); outline: none; font: 500 13px/1.4 var(--font-ui); color: var(--text);
}
.support-chat__input:focus { border-color: rgba(53, 217, 150, .45); }
.support-chat__send { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 0; background: #232823; display: grid; place-items: center; color: #fff; cursor: pointer; }
.support-chat__send--ready { background: var(--accent); }
.support-chat__history { overflow-y: auto; padding: 12px; gap: 8px; }
.support-chat__new-dashed {
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 11px;
  border: 1px dashed rgba(53, 217, 150, .4); background: none; font: 700 12px var(--font-ui); color: var(--accent-bright); cursor: pointer;
}
.support-chat__new-dashed:hover { background: rgba(15, 122, 90, .12); }
.support-chat__history > div[data-support-chat-target="sessions"] { display: flex; flex-direction: column; gap: 8px; }
.support-chat__session { text-align: left; width: 100%; padding: 12px; border-radius: 11px; background: var(--card); border: 1px solid var(--border-soft); cursor: pointer; font: inherit; }
.support-chat__session:hover { background: var(--card-alt); }
.support-chat__session--current { border-color: rgba(53, 217, 150, .45); }
.support-chat__session-top { display: flex; align-items: center; gap: 8px; }
.support-chat__session-title { flex: 1; min-width: 0; font: 600 12.5px var(--font-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-chat__status { font: 700 9.5px var(--font-ui); border-radius: 4px; padding: 2px 6px; }
.support-chat__status--open { color: var(--accent-bright); background: var(--accent-wash); }
.support-chat__status--manager { color: var(--warn); background: var(--warn-wash); }
.support-chat__status--closed { color: var(--text-mute); background: rgba(255, 255, 255, .06); }
.support-chat__session-last { font: 500 11px var(--font-ui); color: var(--text-mute); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-chat__session-meta { font: 500 10px var(--font-mono); color: #5c635a; margin-top: 6px; }
.support-chat__note { font: 500 10.5px/1.5 var(--font-ui); color: #5c635a; text-align: center; padding: 6px 10px; }

@media (max-width: 560px) {
  .support-chat { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  /* Above the order total pinned to the bottom of the cart and checkout. */
  body.ctrl-carts .support-chat, body.ctrl-checkout .support-chat { bottom: calc(126px + env(safe-area-inset-bottom)); }
  .support-chat__fab { width: 52px; height: 52px; border-radius: 16px; }
  .support-chat__tip { display: none !important; }
  /* The whole widget is one stacking context: raised above the sticky
     header while the chat covers the screen. */
  .support-chat--open { z-index: 120; }
  .support-chat__window { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; border: 0; }
  .support-chat--open .support-chat__fab { display: none; }
  .support-chat__input { font-size: 16px; }
}

/* «Избранное» и «Сравнение»: header counters, the toggles on cards, rows
   and the product page, and the two pages. */
.shelf-link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.shelf-link:hover { color: var(--text); }
.shelf-link__count { min-width: 17px; padding: 1px 5px; border-radius: 20px; background: var(--card-alt); border: 1px solid var(--border-strong); font: 700 10px var(--font-mono); color: var(--accent-bright); text-align: center; }

.shelf-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--text-mute); cursor: pointer; font: 600 11.5px var(--font-ui); }
.shelf-toggle svg { width: 16px; height: 16px; flex: none; transition: transform .15s, fill .15s; }
.shelf-toggle:hover { color: var(--text); }
.shelf-toggle:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 8px; }
.shelf-toggle[aria-pressed="true"] { color: var(--accent-bright); }
.shelf-toggle--favorites[aria-pressed="true"] svg { fill: currentColor; }
.shelf-toggle:active svg { transform: scale(.85); }
.shelf-toggle--icon {
  width: 32px; height: 32px; justify-content: center; border-radius: 50%;
  background: rgba(11, 12, 11, .78); border: 1px solid var(--border-strong); backdrop-filter: blur(4px);
}
.product-card { position: relative; }
.product-card__shelves { position: absolute; top: 9px; right: 9px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.product-row__shelves { display: flex; gap: 16px; margin-top: 9px; flex-wrap: wrap; }
.buy-box__shelves { display: flex; gap: 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.buy-box__shelves .shelf-toggle { font-size: 12.5px; }

.shelf-page__actions { display: flex; align-items: center; gap: 12px; }
.shelf-page__count { font: 600 12.5px var(--font-ui); color: var(--text-dim); }
.shelf-page__hint { margin: 0 0 14px; font: 500 12.5px var(--font-ui); color: var(--text-mute); }
.shelf-empty { padding: 34px 26px; border-radius: 14px; background: var(--card); border: 1px dashed var(--border-strong); text-align: center; }
.shelf-empty__title { font: 700 17px var(--font-display); color: var(--text-bright); }
.shelf-empty p { margin: 10px 0 18px; font: 500 13px var(--font-ui); color: var(--text-dim); }

.compare-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.compare-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border-strong); font: 600 12.5px var(--font-ui); color: var(--text-dim); text-decoration: none;
}
.compare-tab:hover { color: var(--text); }
.compare-tab--on { border-color: var(--accent-bright); color: var(--text-bright); }
.compare-tab__count { font: 700 10.5px var(--font-mono); color: var(--accent-bright); }
.compare-diff { margin-left: auto; font: 600 12px var(--font-ui); color: var(--accent-bright); }
.compare-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; background: var(--card); }
.compare-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font: 500 12.5px/1.45 var(--font-ui); color: var(--text); }
.compare-table th, .compare-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th { background: var(--card-alt); }
/* The characteristic names stay in view while the products scroll past. */
.compare-table th[scope="row"], .compare-table__corner {
  position: sticky; left: 0; z-index: 1; width: 190px; min-width: 150px; background: var(--card);
  font: 600 12px var(--font-ui); color: var(--text-dim); border-right: 1px solid var(--border);
}
.compare-table td { min-width: 200px; max-width: 260px; font-family: var(--font-mono); font-size: 12px; }
.compare-table__empty { color: var(--text-faint); }
.compare-product { position: relative; min-width: 200px; max-width: 260px; font-weight: 500; }
.compare-product form { margin: 0; }
.compare-product__remove {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--text-dim); font: 600 15px/1 var(--font-ui); cursor: pointer;
}
.compare-product__remove:hover { color: var(--warn); border-color: var(--warn); }
.compare-product__photo { display: block; height: 120px; margin-bottom: 10px; border-radius: 9px; overflow: hidden; font-size: 10px; }
.compare-product__sku { font: 500 10.5px var(--font-mono); color: var(--text-faint); }
.compare-product__name { display: block; margin: 4px 0 8px; font: 700 13px/1.35 var(--font-ui); color: var(--text); text-decoration: none; }
.compare-product__price { margin-bottom: 10px; font: 700 17px var(--font-mono); color: var(--text-bright); }
.compare-product__out { font: 600 12px var(--font-ui); color: var(--warn); }
@media (max-width: 640px) {
  .compare-diff { margin-left: 0; }
  .compare-table th[scope="row"], .compare-table__corner { width: 110px; min-width: 110px; }
  .compare-table td, .compare-product { min-width: 160px; }
}
/* Ratings and reviews. The stars are one string of ★ filled by a gradient
   up to --rating (a percentage), so 4,3 shows as four and a third stars. */
.rating { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--font-ui); color: var(--text-dim); }
.rating__stars { display: inline-block; font-size: 13px; letter-spacing: 1px; line-height: 1; }
.rating__stars::before {
  content: "★★★★★";
  background: linear-gradient(90deg, #f2b84b var(--rating), #3a413a var(--rating));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rating__value { font: 700 12px var(--font-mono); color: var(--text); }
.rating__count { color: var(--text-dim); }
a.rating__count { color: var(--accent-bright); }
.rating--page { margin: 6px 0 4px; }
.product-card .rating { margin-top: 6px; }

.reviews { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.reviews__summary { display: flex; align-items: center; gap: 14px; }
.reviews__score { font: 800 30px var(--font-display); color: var(--text); letter-spacing: -.02em; }
.reviews__hint { font: 500 12px var(--font-ui); color: var(--text-dim); margin-top: 4px; }
.review { padding: 14px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--border-soft); }
.review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review__author { font: 700 13px var(--font-ui); color: var(--text); }
.review__date { font: 500 11px var(--font-mono); color: var(--text-faint); }
.review__source { font: 700 10px var(--font-ui); color: #8cc4f5; background: rgba(53, 140, 217, .14); border-radius: 4px; padding: 2px 6px; }
.review__body { margin: 8px 0 0; font: 500 13px/1.6 var(--font-ui); color: var(--text); white-space: pre-line; }
.review__reply { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--accent-bright); background: var(--accent-wash); border-radius: 0 8px 8px 0; }
.review__reply-who { font: 700 11px var(--font-ui); color: var(--accent-bright); margin-bottom: 4px; }
.review__reply p { margin: 0; font: 500 12.5px/1.55 var(--font-ui); color: var(--text); white-space: pre-line; }
.review-form { margin-top: 6px; padding: 16px; border-radius: 12px; border: 1px dashed var(--border-strong); }
.review-form__title { font: 800 15px var(--font-display); color: var(--text); letter-spacing: -.02em; }
.review-form__foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; font: 500 11.5px var(--font-ui); color: var(--text-dim); }

/* Star picker: radios laid out 5→1 and drawn in reverse, so hovering or
   checking a star lights it and every star before it with sibling
   selectors alone. */
.star-input { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.star-input legend { font: 600 10.5px var(--font-ui); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 26px; line-height: 1; color: #3a413a; cursor: pointer; padding: 0 2px; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #f2b84b; }
.star-input input:focus-visible + label { outline: 2px solid var(--accent-bright); border-radius: 4px; }

/* The listing's sort (mockup: a dark chip «Сначала дешёвые ▾»): the
   browser's own arrow and light dropdown replaced by the site's. */
.sort-select {
  appearance: none; -webkit-appearance: none; color-scheme: dark; cursor: pointer;
  padding: 8px 32px 8px 13px; line-height: normal; border-radius: 9px; background-color: var(--card-alt);
  border: 1px solid var(--border-strong); font: 600 12px var(--font-ui); color: var(--text-bright);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa197' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.sort-select:hover { border-color: rgba(255, 255, 255, .22); }
.sort-select:focus-visible { outline: 0; border-color: var(--accent-bright); }
.sort-select option { background: var(--card-alt); color: var(--text); }

/* Bonus programme — the payment step's «Списать бонусы» (mockup 8a) */
.bonus-box { margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--card); border: 1px solid rgba(53, 217, 150, .45); }
.bonus-box__row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.bonus-box__badge { flex: none; width: 30px; height: 30px; border-radius: 8px; background: rgba(53, 217, 150, .14); display: grid; place-items: center; font: 800 13px var(--font-display); color: var(--accent-bright); }
.bonus-box__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bonus-box__title { font: 700 12.5px var(--font-ui); color: var(--text-bright); }
.bonus-box__meta { font: 500 11px var(--font-ui); color: var(--text-dim); margin-top: 2px; }
.bonus-box__input { position: absolute; opacity: 0; pointer-events: none; }
.bonus-box .toggle { flex: none; }
.bonus-box .toggle--off { opacity: .4; cursor: not-allowed; }
.bonus-box__note { font: 500 11px var(--font-ui); color: var(--warn, #f0a14a); margin-top: 8px; }
.bonus-box__note[hidden] { display: none; }
.bonus-box__earn { font: 500 11px/1.55 var(--font-ui); color: var(--text-faint); margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border); }
.bonus-box__earn--alone { margin-top: 0; padding-top: 0; border-top: 0; }
.bonus-box__earn b { color: var(--accent-bright); }
.summary-row[hidden] { display: none; }

/* The cabinet's «Бонусы» */
.bonus-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; max-width: 760px; margin-bottom: 18px; }
.bonus-card { padding: 14px 15px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.bonus-card--main { border-color: rgba(53, 217, 150, .45); }
.bonus-card__label { font: 600 10.5px var(--font-ui); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; }
.bonus-card__value { font: 800 22px var(--font-mono); color: var(--text-bright); margin-top: 6px; }
.bonus-card--main .bonus-card__value { color: var(--accent-bright); }
.bonus-card__meta { font: 500 11px/1.5 var(--font-ui); color: var(--text-dim); margin-top: 4px; }
.bonus-history { max-width: 760px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.bonus-history__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; border-top: 1px dashed var(--border); }
.bonus-history__row:first-child { border-top: 0; }
.bonus-history__what { font: 600 12.5px/1.4 var(--font-ui); color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.bonus-history__when { font: 500 11px var(--font-ui); color: var(--text-faint); margin-top: 2px; }
.bonus-history__amount { flex: none; font: 700 13px var(--font-mono); color: var(--text-bright); text-align: right; }
.bonus-history__amount--plus { color: var(--accent-bright); }
.bonus-history__amount--muted { color: var(--text-faint); }
.bonus-rules { max-width: 760px; margin: 0; padding-left: 18px; font: 500 12.5px/1.75 var(--font-ui); color: var(--text-dim); }
.bonus-rules b { color: var(--text); }
.account__bonus { margin: 10px 8px 0; padding: 10px 13px; border-radius: 11px; background: var(--card); border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; text-decoration: none; }
.account__bonus-label { font: 600 10.5px var(--font-ui); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; }
.account__bonus-value { font: 800 15px var(--font-mono); color: var(--accent-bright); }
.review__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.review__photo { display: block; width: 80px; height: 80px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); background: var(--card-alt); }
.review__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-form__photos { font: 500 12px var(--font-ui); color: var(--text-dim); }
.review-form__photos::file-selector-button { margin-right: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card-alt); color: var(--text); font: 600 12px var(--font-ui); cursor: pointer; }

/* Support chat attachments */
.support-chat__attach { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--text-dim); cursor: pointer; }
.support-chat__attach:hover { color: var(--accent-bright); background: var(--card-alt); }
.support-chat__files { display: flex; gap: 8px; padding: 8px 12px 0; background: var(--panel); border-top: 1px solid var(--border-soft); overflow-x: auto; }
.support-chat__files[hidden] { display: none; }
.support-chat__file { position: relative; flex: none; width: 56px; height: 56px; border-radius: 9px; overflow: hidden; background: var(--card-alt); border: 1px solid var(--border); display: grid; place-items: center; }
.support-chat__file img { width: 100%; height: 100%; object-fit: cover; }
.support-chat__file span { padding: 4px; font: 600 9px/1.2 var(--font-ui); color: var(--text-dim); word-break: break-all; text-align: center; }
.support-chat__file-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; font: 700 12px/18px var(--font-ui); padding: 0; cursor: pointer; }
.support-chat__attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.support-chat__bubble > .support-chat__attachments:first-child { margin-top: 0; }
.support-chat__attachment-photo { display: block; width: 120px; max-width: 100%; border-radius: 9px; overflow: hidden; }
.support-chat__attachment-photo img { display: block; width: 100%; height: auto; }
.support-chat__attachment-file { font: 600 12px var(--font-ui); color: inherit; text-decoration: underline; }

/* Bonuses in the «ЛК» dropdown and the cabinet's filter */
.account-menu__bonus { display: block; margin: 0 0 6px; padding: 10px; border-radius: 10px; background: var(--card-alt); border: 1px solid var(--border); text-decoration: none; }
.account-menu__bonus:hover { border-color: rgba(53, 217, 150, .45); }
.account-menu__bonus-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.account-menu__bonus-label { font: 600 10.5px var(--font-ui); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; }
.account-menu__bonus-value { font: 800 15px var(--font-mono); color: var(--accent-bright); }
.account-menu__bonus-note { font: 500 11px var(--font-ui); color: var(--text-dim); margin-top: 2px; }
.account-menu__bonus-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font: 500 11px var(--font-ui); color: var(--text-dim); }
.account-menu__bonus-row--pending { opacity: .6; }
.account-menu__bonus-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__bonus-amount { flex: none; font: 700 11px var(--font-mono); color: var(--text); }
.account-menu__bonus-amount--plus { color: var(--accent-bright); }
.account-menu__bonus-more { margin-top: 7px; font: 600 11px var(--font-ui); color: var(--accent-bright); }
.bonus-card__value--plus { color: var(--accent-bright); }
.bonus-filter { display: flex; gap: 6px; margin: -4px 0 12px; }
.bonus-filter__tab { padding: 6px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); font: 600 12px var(--font-ui); color: var(--text-dim); text-decoration: none; }
.bonus-filter__tab--on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Search: Claude's guess when nothing was found */
.ai-search { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--card); border: 1px solid rgba(53, 217, 150, .35); max-width: 860px; }
.ai-search__badge { flex: none; width: 30px; height: 30px; border-radius: 8px; background: rgba(53, 217, 150, .14); display: grid; place-items: center; font: 800 11px var(--font-display); color: var(--accent-bright); }
.ai-search--loading .ai-search__badge { animation: ai-search-pulse 1.2s ease-in-out infinite; }
@keyframes ai-search-pulse { 50% { opacity: .35; } }
.ai-search__title { font: 700 13.5px/1.45 var(--font-ui); color: var(--text-bright); }
.ai-search__hint { font: 500 11.5px/1.5 var(--font-ui); color: var(--text-faint); margin-top: 6px; }
.ai-search__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-search__chip { padding: 6px 11px; border-radius: 8px; background: var(--card-alt); border: 1px solid var(--border-strong); font: 600 12px var(--font-ui); color: var(--text); text-decoration: none; }
.ai-search__chip:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.ai-search__chip--section::before { content: "Раздел · "; color: var(--text-faint); font-weight: 500; }
.search-switched { margin: 0 0 12px; font: 500 12.5px var(--font-ui); color: var(--text-dim); }
.file-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.file-previews[hidden] { display: none; }
.file-previews__item { position: relative; width: 72px; height: 72px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); background: var(--card-alt); }
.file-previews__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-previews__remove { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0; background: rgba(0, 0, 0, .7); color: #fff; font: 700 13px/20px var(--font-ui); cursor: pointer; }
.api-docs__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.api-docs__tab { padding: 7px 13px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); font: 600 12.5px var(--font-ui); color: var(--text-dim); cursor: pointer; }
.api-docs__tab--on { background: var(--accent); border-color: var(--accent); color: #fff; }
.api-docs__code[hidden] { display: none; }

/* Suggestion lists (DaData at checkout and in the profile, the delivery
   calculator's product picker) — the same as the admin's. */
.searchable-select { position: relative; }
.searchable-select__list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--card-alt); border: 1px solid var(--border-strong); border-radius: 9px; padding: 4px; list-style: none; margin: 0; }
.searchable-select__list[hidden] { display: none; }
.searchable-select__option { padding: 8px 10px; border-radius: 6px; font: 600 13px var(--font-ui); color: var(--text); cursor: pointer; }
.searchable-select__option:hover, .searchable-select__option.is-active { background: var(--accent-wash); color: var(--accent-bright); }
.searchable-select__option[hidden] { display: none; }
.searchable-select__option--all { color: var(--text-dim); }
.searchable-select--filter { flex: 0 1 240px; min-width: 170px; }
.searchable-select--filter input[type="text"] { width: 100%; padding-right: 28px; text-overflow: ellipsis; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.searchable-select--filter input[type="text"]:focus { cursor: text; }
.searchable-select--filter .searchable-select__list { min-width: 320px; max-height: 360px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.searchable-select__add { padding: 8px 10px; border-radius: 6px; font: 700 12px var(--font-ui); color: var(--accent-bright); cursor: pointer; border-top: 1px solid var(--border); margin-top: 4px; }

/* 404 / 410 */
.error-page { max-width: 760px; margin: 0 auto; padding-top: 48px; padding-bottom: 48px; text-align: center; }
.error-page__code { font: 800 72px/1 var(--font-display); color: var(--accent-bright); letter-spacing: -.04em; }
.error-page__title { font: 800 26px/1.2 var(--font-display); color: var(--text-bright); margin: 14px 0 0; letter-spacing: -.02em; }
.error-page__text { font: 500 14px/1.6 var(--font-ui); color: var(--text-dim); margin: 12px auto 0; max-width: 520px; }
.error-page__search { display: flex; gap: 8px; max-width: 520px; margin: 22px auto 0; }
.error-page__search input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--border-strong); color: var(--text); font: 500 14px var(--font-ui); }
.error-page__sections { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.error-page__section { padding: 8px 13px; border-radius: 9px; background: var(--card); border: 1px solid var(--border); font: 600 12.5px var(--font-ui); color: var(--text); }
.error-page__section:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.error-page__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* «Поделиться» and the shared cart */
.share-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; background: var(--card-alt); border: 1px solid var(--border-strong); font: 600 12px var(--font-ui); color: var(--text); cursor: pointer; white-space: nowrap; }
.share-button:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.shared-cart { border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.shared-cart__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border-soft); }
.shared-cart__row:first-child { border-top: 0; }
.shared-cart__photo { flex: none; width: 56px; height: 56px; border-radius: 9px; overflow: hidden; background: #fff; }
.shared-cart__name { font: 600 13px/1.4 var(--font-ui); color: var(--text); }
.shared-cart__meta { font: 500 11px var(--font-mono); color: var(--text-faint); margin-top: 3px; }
.shared-cart__sum { flex: none; font: 700 13px var(--font-mono); color: var(--text-bright); }
.shared-cart__total { display: flex; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--border); font: 600 13px var(--font-ui); color: var(--text-dim); }
.shared-cart__total b { font: 800 16px var(--font-mono); color: var(--text-bright); }

/* Delivery step: rough prices by each way, and the carriers' pins */
.delivery-estimates { margin-bottom: 18px; padding: 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.delivery-estimates__title { font: 800 13px var(--font-display); color: var(--text-bright); margin-bottom: 8px; letter-spacing: -.01em; }
.delivery-estimates__wait { font: 500 12px var(--font-ui); color: var(--text-faint); }
.delivery-estimates__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--border-soft); font: 500 12.5px var(--font-ui); color: var(--text); }
.delivery-estimates__row:first-of-type { border-top: 0; }
.delivery-estimates__row--off { color: var(--text-faint); }
.delivery-estimates__price { flex: none; text-align: right; font: 700 12.5px var(--font-mono); color: var(--accent-bright); }
.delivery-estimates__row--off .delivery-estimates__price { color: var(--text-faint); font-weight: 500; }
.delivery-estimates__price small { display: block; font: 500 10.5px var(--font-ui); color: var(--text-dim); }
.delivery-estimates__note { margin-top: 8px; font: 500 10.5px/1.5 var(--font-ui); color: var(--text-faint); }
.carrier-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); border: 2px solid #fff; box-sizing: border-box; }
.carrier-pin span { transform: rotate(45deg); font: 900 9px/1 var(--font-ui); color: #fff; letter-spacing: -.02em; }
.carrier-pin--ozon { background: #005bff; }
.carrier-pin--cdek { background: #1ab248; }
.carrier-pin--open { outline: 3px solid rgba(255, 255, 255, .55); }
.carrier-pin--on { outline: 3px solid var(--accent-bright); }
.product-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 14px; }
.product-docs__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 11px; background: var(--card); border: 1px solid var(--border); text-decoration: none; }
.product-docs__item:hover { border-color: var(--accent-bright); }
.product-docs__icon { flex: none; display: grid; place-items: center; width: 40px; height: 46px; border-radius: 7px; background: var(--accent-wash); color: var(--accent-bright); font: 800 10px var(--font-mono); }
.product-docs__title { display: block; font: 600 13px/1.35 var(--font-ui); color: var(--text); overflow-wrap: anywhere; }
.product-docs__meta { display: block; font: 500 11px var(--font-mono); color: var(--text-faint); margin-top: 3px; }
.ozon-cluster--cdek { background: radial-gradient(circle at 35% 30%, #4fd27a, #149a3c); box-shadow: 0 0 0 4px rgba(26, 178, 72, .22), 0 4px 12px rgba(0, 0, 0, .5); }
.delivery-card__city { font: 500 11px var(--font-ui); color: var(--text-faint); margin-top: 2px; }
/* The live dropdown's AI guess (search/ai_suggest) */
.search-results__ai-pending { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 4px 10px 14px; font: 500 12px var(--font-ui); color: var(--text-faint); }
/* While Claude is asked: a twinkling star, the line lit by a passing
   gleam and three dots that bounce in turn — still for whoever asked the
   system for less motion. */
.search-results__ai-spark { color: var(--accent-bright); font-size: 13px; animation: ai-spark 1.6s ease-in-out infinite; }
.search-results__ai-text { background: linear-gradient(90deg, var(--text-faint) 0%, var(--text-faint) 40%, var(--accent-bright) 50%, var(--text-faint) 60%, var(--text-faint) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-gleam 2.2s linear infinite; }
.search-results__ai-dots { display: inline-flex; gap: 3px; }
.search-results__ai-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-bright); animation: ai-dot 1.2s ease-in-out infinite; }
.search-results__ai-dots span:nth-child(2) { animation-delay: .15s; }
.search-results__ai-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-spark { 0%, 100% { transform: scale(.85) rotate(0); opacity: .55; } 50% { transform: scale(1.15) rotate(90deg); opacity: 1; } }
@keyframes ai-gleam { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes ai-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .search-results__ai-spark, .search-results__ai-text, .search-results__ai-dots span { animation: none; }
  .search-results__ai-text { color: var(--text-faint); background: none; }
}
.search-results__group--ai .search-results__group-label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; }
.search-results__group--ai .ai-search__badge { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; }
.search-results__group--ai .ai-search__chips { margin: 4px 10px 8px; }
.search-results__ai-hint { padding: 6px 10px 2px; font: 500 11px var(--font-ui); color: var(--text-faint); }
.search-results__switched { padding: 8px 10px; font: 500 12px var(--font-ui); color: var(--text-mute); }
/* The delivery step's question before an addition (xsell_guard_controller.js) */
.xsell-guard__text { font: 500 14px/1.5 var(--font-ui); color: var(--text-mute); margin: 12px 0 20px; }
.xsell-guard__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* The delivery step's column (carts/_order_summary, step: :delivery): the
   estimates and the cart's lines scroll; the totals and «К оплате» stay at
   the bottom of the screen. */
.order-summary--delivery { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.order-summary--delivery .order-summary__lines { flex: 1 1 auto; min-height: 80px; overflow-y: auto; margin: 0 -22px 16px; padding: 0 22px; }
.order-summary--delivery > turbo-frame#delivery_estimates { flex: none; }
.order-summary__lines-title { font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 4px 0 8px; }
.summary-line { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); text-decoration: none; }
.summary-line__photo { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 7px; background: #fff; overflow: hidden; display: grid; place-items: center; }
.summary-line__photo img { width: 100%; height: 100%; object-fit: contain; }
.summary-line__name { font: 500 12px/1.35 var(--font-ui); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.summary-line__qty { font: 500 11.5px var(--font-mono); color: var(--text-dim); margin-top: 2px; }
.order-summary__pay { margin-top: 16px; font-size: 16px; padding: 16px; }
.order-summary__pay:disabled { opacity: .45; cursor: not-allowed; }
.order-summary__pay-hint { font: 500 11.5px var(--font-ui); color: var(--text-faint); text-align: center; margin-top: 8px; }
@media (max-width: 900px) {
  .order-summary--delivery { position: static; height: auto; overflow: visible; }
  .order-summary--delivery .order-summary__lines { max-height: 260px; }
}
.cart-page > turbo-frame#order_summary { display: block; background: var(--panel); }
/* The chat's button stands left of the delivery step's column, off «К оплате». */
@media (min-width: 901px) { body.ctrl-checkout .support-chat { right: calc(366px + 24px); } }
/* The checkout header's search (shared/_checkout_steps) */
.checkout-search { flex: 1; display: flex; align-items: center; max-width: 680px; margin: 0 28px; min-width: 0; }
@media (max-width: 560px) {
  .site-header--checkout { position: relative; }
  /* Mark · steps · magnifier: the steps size to their content (pushed by
     the mark's auto margin), so they never run under the magnifier. */
  .site-header--checkout .site-header__logo { margin-right: auto; }
  .site-header--checkout .steps { flex: 0 1 auto; justify-content: flex-start; overflow: hidden; }
  .checkout-search { flex: none; order: 3; margin: 0; max-width: none; }
  /* The bottom bar holds the total, «К оплате» and its hint: the page
     ends above it, and the chat's button stands over it. */
  body.ctrl-checkout { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
  body.ctrl-checkout .support-chat { bottom: calc(176px + env(safe-area-inset-bottom)); }
  body.ctrl-checkout .order-summary__pay { margin-top: 10px; padding: 14px; }
  body.ctrl-checkout .order-summary__pay-hint { margin-top: 6px; }
  .checkout-search.site-header--searching { position: absolute; inset: 0; z-index: 20; margin: 0; padding: 0 16px; background: var(--bg); }
}
.filters__apply { margin-top: 12px; }
.ozon-tab[hidden] { display: none; }
.delivery-calc__frame[hidden] { display: none; } .delivery-calc__tabs { margin: 14px 0 4px; }
@media (max-width: 400px) { .site-header--checkout .step__divider { width: 8px; } }
/* «Часто покупают» on a phone: the note under the title, the cards a row
   to swipe, so the delivery choice is on the first screen. */
@media (max-width: 560px) {
  .xsell__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .xsell__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .xsell__grid::-webkit-scrollbar { display: none; }
  .xsell__grid > .xsell-card { flex: 0 0 72%; scroll-snap-align: start; }
}

/* Telegram sign-in (OmniAuth's request phase, config/initializers/omniauth_telegram_page.rb):
   a page of its own, outside the layout, around Telegram's widget. */
.tg-login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; }
.tg-login__card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px 26px; box-sizing: border-box; text-align: center; }
.tg-login__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 22px; }
.tg-login__title { font: 800 22px/1.2 var(--font-display); color: var(--text-bright); margin: 0 0 12px; letter-spacing: -.01em; }
.tg-login__lede { font: 500 14px/1.6 var(--font-ui); color: var(--text-dim); margin: 0 0 22px; }
.tg-login__widget { min-height: 48px; display: flex; justify-content: center; margin-bottom: 18px; }
.tg-login__hint { font: 500 12px/1.5 var(--font-ui); color: var(--text-faint); margin: 0 0 18px; }
.tg-login__back { font: 600 13px var(--font-ui); color: var(--accent-bright); text-decoration: none; }
.tg-login__back:hover { text-decoration: underline; }

/* The store's own courier on the delivery step (CheckoutSettings). */
.own-delivery { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-wash); }
.own-delivery__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.own-delivery__title { font: 700 14px var(--font-ui); color: var(--text); }
.own-delivery__price { font: 700 15px var(--font-mono); color: var(--accent-bright); white-space: nowrap; }
.own-delivery__note { margin: 6px 0 12px; font: 600 12.5px/1.5 var(--font-ui); color: var(--warn); }
.own-delivery__form { display: flex; gap: 10px; flex-wrap: wrap; }
.own-delivery__form input[type=text] { flex: 1 1 240px; min-width: 0; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: 600 13.5px var(--font-ui); }
.order-summary__minimum { margin: 18px 0 0; padding: 11px 13px; border-radius: 10px; background: var(--warn-wash); color: var(--warn); font: 600 12.5px/1.5 var(--font-ui); }