/* FAICHAK SPORT STORE - catalog, product page and cart (pages built by tools/build.py).
   Loaded after style.css and reuses its tokens, header, .price and .display. The backdrops behind products
   (.stage) and the gallery live in stage.css, the filters in filters.css. Desktop sizes are design pixels
   from design/site-2.svg: calc(N * var(--u)); below 1152px the phone layout applies. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Page: black fading into the night brown, as in the design */
.shop {
  min-height: 100svh;
  padding: calc(var(--head, 96px) + 20px) 20px 96px;
  background: #000 linear-gradient(rgba(29, 28, 26, .05), rgba(33, 24, 19, .48) 12%, rgba(36, 21, 15, .78) 26%, rgba(38, 19, 12, .95) 46%, var(--night));
}

/* Discount mark, on cards and on the product page */
.pcard__tag, .product__tag {
  padding: .2em .45em .1em;
  border-radius: 8px;
  background: var(--yellow);
  color: #000;
  font: italic 900 20px/1 var(--display);
}

/* Catalog */
.catalog__title { margin-bottom: 24px; font-size: 34px; text-align: center; text-transform: uppercase; }
.catalog__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.catalog__count { font-weight: 600; }
.catalog__empty { padding: 60px 0; font-size: 18px; font-weight: 600; text-align: center; }
.catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 36px 20px; }
.pcard__link { --r: 28px; position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 16px; filter: drop-shadow(4px 4px 18px rgba(0, 0, 0, .31)); }
/* The panel behind the photo's lower part carries the price; its tint follows the product type (stage.css sets --panel) */
.pcard__link::before { content: ''; position: absolute; inset: 70% 0 0; border-radius: 0 0 var(--r) var(--r); background: var(--panel, rgba(95, 28, 14, .75)); }
.pcard__photo { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 520 / 600; border-radius: var(--r); overflow: hidden; }
/* Bare layout until stage.css and gallery.js take over (zero specificity, so theirs wins): photos fit their
   box, gallery slides scroll sideways */
:where(.pcard__photo, .gallery__slide) :where(.stage__product) { width: 100%; height: 100%; object-fit: contain; }
:where(.gallery__track) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
:where(.gallery__slide) { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: start; }
.pcard__tag { position: absolute; z-index: 1; top: 16px; left: 16px; }
.pcard__text { position: absolute; z-index: 1; inset: auto 12px 14px; display: grid; justify-items: center; gap: 10px; }
.pcard__name { color: #fff; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: center; text-wrap: balance; }
/* Phones: the price block's height, icon and figures follow the card's width at 0.88 of the desktop card's
   proportions, never more than on desktop (Milush 29.10: "цена слишком маленькая относительно карточки
   товара", then in full proportions "слишком большие... чуть поменьше"); it stays wider than the desktop's
   73%, so "from 10 800 UAH" fits */
.pcard { container-type: inline-size; }
.pcard .price { position: relative; width: 82%; height: min(14.5cqi, 64px); margin-top: 16px; }
.pcard .price__icon { flex-basis: min(20cqi, 88px); }
.pcard .price__icon img { width: min(9.3cqi, 41px); }
.pcard .price__sum { font-size: min(5cqi, 22px); }
.price--sale .price__sum { flex-direction: column; line-height: 1.05; }
.price__old { font-size: .62em; font-weight: 600; }
/* The basket over a card's price icon (build.py card(), the home page's six) is a button of its own: it puts the
   product in the cart, the price beside it still opens the product (cart.js). A tick while it is in the cart, a
   cross while its sizes are open; the tick alone in the moment the last size puts it in and they fold (Milush 01.11:
   "на милисекунды одновременно видно и галочку и крестик") */
.pcard, .item { position: relative; }
.pcard__add, .item__add { position: absolute; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; background: var(--yellow); color: #000; cursor: pointer; }
.pcard__add { bottom: 16px; left: 9%; width: min(20cqi, 88px); height: min(14.5cqi, 64px); border-radius: 6px 0 0 6px; }
.pcard__add > * { width: min(9.3cqi, 41px); }
.item__add { bottom: 0; left: 0; width: 44px; height: 44px; border-radius: 6px 0 0 6px; }
.item__add > * { width: 26px; }
:is(.pcard__add, .item__add) svg { display: none; height: auto; }
:is(.pcard__add, .item__add).is-in img, :is(.pcard__add, .item__add).is-open img { display: none; }
:is(.pcard__add, .item__add).is-in .add__tick, :is(.pcard__add, .item__add).is-open:not(.is-in) .add__cross { display: block; }
:is(.pcard__add, .item__add).is-busy img { opacity: .5; }
:is(.pcard__add, .item__add):hover { filter: brightness(1.08); }
:is(.pcard__add, .item__add):focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.price__sum { position: relative; }

/* A card's sizes or grips (cart.js): the product page's value boxes over the photo's lower part, right above the
   price, on the dark of the phone's "Buy" bar */
.pick { position: absolute; z-index: 3; right: 4%; bottom: calc(16px + min(14.5cqi, 64px) + 10px); left: 4%; padding: 14px 14px 16px; border: 1px solid rgba(253, 248, 238, .12); border-radius: 14px; background: rgba(30, 15, 10, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; translate: 0 10px; transition: opacity .25s var(--ease), translate .25s var(--ease); }
/* a home card is half the row wide on a phone: its values take the whole row, over the other card too */
.item .pick { right: 0; bottom: 54px; left: 0; }
.item:nth-child(odd) .pick { right: calc(-100% - 12px); }
.item:nth-child(even) .pick { left: calc(-100% - 12px); }
.pick.is-on { opacity: 1; translate: 0 0; }
.pick .opt + .opt { margin-top: 14px; }
.pick__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.pick .opt__chip { background: none; font: inherit; }
.pick .opt__chip[aria-pressed="true"]::before { opacity: 1; }
.pick .opt__chip:disabled { border-color: rgba(253, 248, 238, .08); cursor: not-allowed; }
.pick .opt__chip:disabled span { opacity: .4; text-decoration: line-through; }
.pick .opt__chip:focus-visible { outline: none; }
.pick .opt__chip:focus-visible::after { content: ''; position: absolute; inset: -6px; border: 2px solid var(--yellow); border-radius: 12px; }
.pick__guide { display: grid; place-items: center; min-width: 48px; height: 44px; padding: 0 6px; border: 0; background: none; color: var(--cream); cursor: pointer; }
.pick__guide svg { width: 30px; height: auto; }
.pick__guide:hover { color: var(--yellow); }
.pick__guide:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  .pick { transition: none; }
}

/* "Added" (cart.js flash()): the yellow wipes over the button that put the product in the cart and back */
.done { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--yellow); color: #000; pointer-events: none; }
.done svg { width: 1.25em; height: auto; }

/* Breadcrumbs */
.crumbs { margin-bottom: 12px; font-size: 13px; font-weight: 500; }
.crumbs ol { display: flex; flex-wrap: wrap; row-gap: 4px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--olive); }
.crumbs a:hover { color: var(--yellow); }
.crumbs [aria-current] { font-weight: 700; }
/* Phones: one line, the product's own name (it heads the page below anyway) cut short */
@media (max-width: 1151.98px) {
  .crumbs ol { flex-wrap: nowrap; white-space: nowrap; }
  .crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* the price shows on the first screen: the photo takes at most 46% of it */
  .product .gallery { width: 100%; max-height: 46svh; }
}

/* Product page: the stage with the gallery, the choices and the facts beside it */
.product { display: grid; gap: 28px; max-width: 560px; margin: 0 auto; }
.product__kind { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* The name in the text face, the price in the display face, so they read apart (Milush 28.10: "цена сливается с названием") */
.product__name { margin-top: 8px; font-size: 24px; font-weight: 700; line-height: 1.2; }
/* A Ukrainian name says what the product is, so no kind line above it (build.py says_kind) */
.product__name:first-child { margin-top: 0; }
.product__price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; }
.product__now { font: italic 900 40px/1 var(--display); letter-spacing: .01em; }
.product__old { font-size: 18px; font-weight: 600; }
.product__buy { margin-top: 26px; }
.product__sub { margin: 44px 0 14px; font-size: 28px; text-transform: uppercase; }
.specs div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid rgba(253, 248, 238, .16); }
.specs dt { font-weight: 500; }
.specs dd { margin: 0; font-weight: 700; text-align: right; }
.product__desc { margin-top: 28px; color: var(--paper); font-size: 16px; line-height: 1.55; }
.product__desc p + p { margin-top: 12px; }

/* Similar products under the product page (build.py similar(), Milush 30.10): the catalog's cards, after the page's
   content on the night its backdrop ends in, the category's link (Baymard) beside the title, under it on a phone
   (Milush 30.10: "перенеси наверх"), underlined like the chart's button ("подчеркнем ссылку на каталог"); what goes with
   the product (build.py extras(), Milush 01.11: "давай советовать аксессуары") comes after them in the same look */
.similar { padding: 0 20px 96px; background: var(--night); }
.similar__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 24px; }
.similar__title { font-size: 28px; text-transform: uppercase; }
.similar__more { font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (min-width: 600px) and (max-width: 1151.98px) {
  .similar .catalog__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Phones: one row swiped sideways out to the screen's edges, the next card showing at the right (Milush 30.10:
   "каруселью. А то длинная лента так себе"); a card keeps one photo here (gallery.js), so a swipe always moves the
   row; the room above and below keeps the cards' shadow */
@media (max-width: 599.98px) {
  .similar .catalog__grid { display: flex; gap: 20px; margin: -16px -20px -28px; padding: 16px 20px 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 20px; }
  .similar .pcard { flex: 0 0 max(240px, 78%); scroll-snap-align: start; }
}

/* Choices: every value its own outlined box, the chosen one a yellow frame; a yellow fill is left to "Buy" alone
   (Milush 28.10, variant A: the design's gold bar was "рябое" and the same colour as the order buttons; then the
   cream frame of the chosen value turned yellow again, "добавим тот салатовый акцент") */
.opt { min-width: 0; margin: 0; padding: 0; border: 0; }
.opt + .opt { margin-top: 20px; }
.opt:has(.order) { margin-top: 28px; }
.opt__title { display: block; margin-bottom: 10px; padding: 0; font: 700 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; }
/* One row of chips, or chips of one width in rows filled evenly: build.py gives the columns (--cols-xs
   phones under 360px, --cols-s under 390px, --cols-m wider ones, --cols desktop) */
.opt__bar { position: relative; display: inline-grid; grid-template-columns: var(--cols-xs); gap: 8px; max-width: 100%; }
.opt__chip { position: relative; display: grid; place-items: center; min-width: 48px; height: 44px; padding: 0 10px; border: 1px solid rgba(253, 248, 238, .28); border-radius: 10px; cursor: pointer; transition: border-color .2s; }
.opt__chip:hover { border-color: rgba(253, 248, 238, .6); }
.opt__chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt__chip span { position: relative; color: var(--cream); font-size: 16px; font-weight: 700; white-space: nowrap; }
/* The chosen value's yellow frame fades out while the next one fades in (Milush 28.10: the sliding frame was
   "так себе", the jump "слишком резко", "давай классику") */
.opt__chip::before { content: ''; position: absolute; inset: -1px; border: 2px solid var(--yellow); border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.opt__chip:has(:checked)::before, .opt__chip[aria-current]::before { opacity: 1; }
.is-still .opt__chip::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .opt__chip, .opt__chip::before { transition: none !important; }
}
/* A value out of stock keeps no frame, so it does not look like something to press */
.opt__chip:has(:disabled) { border-color: rgba(253, 248, 238, .08); cursor: not-allowed; }
.opt__chip:has(:disabled) span { opacity: .4; text-decoration: line-through; }
.opt__chip:has(:focus-visible)::after, a.opt__chip:focus-visible::after { content: ''; position: absolute; inset: -6px; border: 2px solid var(--yellow); border-radius: 12px; }
/* A racket line's head and weight: this page's frame, the others as links to theirs */
a.opt__chip { text-decoration: none; outline: none; }
.opt__chip[aria-current] { cursor: default; }
.opt.is-missing .opt__bar { outline: 2px solid var(--yellow); outline-offset: 5px; }
/* A choice's chart (build.py guide(), Milush 30.10): a ruler and an underlined word right under the values open the
   brand's size chart or the grip sizes in the cart's panel (cart.js); as large as the values ("не делай ее супер
   маленькой"), no frame, so it is not taken for one more value */
.opt__guide { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--cream); font: 700 16px/1 var(--text); cursor: pointer; }
.opt__guide svg { flex: none; width: 30px; height: auto; }
.opt__guide span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.opt__guide:hover { color: var(--yellow); }
.opt__guide:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.guide__text { margin-top: 18px; font-size: 15px; line-height: 1.5; }
.guide__scroll { margin-top: 22px; overflow-x: auto; }
.guide__table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.guide__table caption { padding-bottom: 8px; font-weight: 800; text-align: left; }
.guide__table th { padding: 10px 6px; border-bottom: 1px solid rgba(253, 248, 238, .28); font-size: 13px; font-weight: 700; vertical-align: bottom; }
.guide__table td { padding: 9px 6px; border-bottom: 1px solid rgba(253, 248, 238, .16); white-space: nowrap; }
.guide__table td:first-child { font-weight: 800; }
@media (max-width: 419.98px) {
  .guide__table { font-size: 14px; }
  .guide__table th, .guide__table td { padding-inline: 4px; }
}
@media (min-width: 360px) {
  .opt__bar { grid-template-columns: var(--cols-s); }
}
@media (min-width: 390px) {
  .opt__bar { grid-template-columns: var(--cols-m); }
}

/* Switching a department's category or a racket's head or weight: the next page fades in over this one instead
   of a reload (cart.js lets every other way to another page load as before) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
}

/* Order pair (product page and cart): the main action the one yellow thing, the side one an outline */
.order { display: flex; gap: 10px; }
.order > * {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 12px;
  border: 2px solid transparent;
  border-radius: 10px;
  font: 800 16px/1 var(--text);
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s, border-color .15s;
}
.order__main { background: var(--yellow); color: #000; }
.order__main:hover { filter: brightness(1.08); }
.order__side { position: relative; border-color: rgba(253, 248, 238, .55); background: none; color: var(--cream); }
.order__side .done { inset: -2px; border-radius: inherit; }
.order__side:hover { border-color: var(--cream); }
.order__side svg { width: 20px; height: auto; }
.opt__note { min-height: 1.4em; margin-top: 12px; color: var(--yellow); font-size: 15px; font-weight: 500; }

/* Phones: "Buy" waits at the screen's foot while the page's own pair is out of sight, the price beside it once
   the page's price is too (cart.js) */
.buybar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9; display: flex; align-items: center; gap: 16px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(253, 248, 238, .12); background: rgba(30, 15, 10, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); visibility: hidden; translate: 0 110%; transition: translate .3s var(--ease), visibility .3s; }
.buybar.is-on { visibility: visible; translate: 0 0; }
.buybar__price { flex: 1 1 0; font: italic 900 28px/1 var(--display); white-space: nowrap; }
.buybar:not(.has-price) .buybar__price { display: none; }
.buybar__go { flex: 1 1 0; height: 50px; border: 0; border-radius: 10px; background: var(--yellow); color: #000; font: 800 16px/1 var(--text); text-transform: uppercase; cursor: pointer; }
@media (max-width: 1151.98px) {
  body:has(.buybar) { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1152px) {
  .buybar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .buybar { transition: none; }
}

/* Header basket count */
.header__cart { position: relative; }
.header__count {
  position: absolute;
  top: -8px;
  right: -12px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--yellow);
  color: #000;
  font: 800 12px/20px var(--text);
  text-align: center;
}
.header__count:empty { display: none; }

/* Cart panel */
.cart { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
.cart.is-open { visibility: visible; }
.cart__veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; }
.cart.is-open .cart__veil { opacity: 1; }
.cart__panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(100%, 460px);
  padding: 22px 20px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #000 linear-gradient(rgba(36, 21, 15, .78), var(--night) 60%);
  box-shadow: -10px 0 40px rgba(0, 0, 0, .5);
  translate: 100% 0;
}
.cart.is-open .cart__panel { translate: 0 0; }
.cart__head { display: flex; align-items: center; justify-content: space-between; }
.cart__title { font-size: 30px; text-transform: uppercase; }
.cart__close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--cream); cursor: pointer; }
.cart__close:hover { color: var(--yellow); }
.cart__close svg { width: 22px; height: 22px; }
.cart__list { flex: 1; display: grid; align-content: start; gap: 18px; margin-top: 22px; }
.cart__empty { margin-top: 22px; font-size: 16px; font-style: italic; }
.citem { display: grid; grid-template-columns: 72px 1fr auto; gap: 6px 14px; align-items: start; }
.citem__photo { grid-row: span 3; width: 72px; aspect-ratio: 1; border-radius: 12px; object-fit: contain; background: rgba(253, 248, 238, .06); }
.citem__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.citem__name:hover { color: var(--yellow); }
.citem__meta { grid-column: 2; font-size: 14px; }
.citem__remove { grid-column: 3; grid-row: 1; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--cream); cursor: pointer; }
.citem__remove:hover { color: var(--yellow); }
.citem__remove svg { width: 14px; height: 14px; }
.citem__row { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Framed like the product page's choices; yellow stays with the order */
.qty { display: flex; align-items: center; height: 34px; border: 1px solid rgba(253, 248, 238, .28); border-radius: 8px; }
.qty button { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--cream); font: 800 18px/1 var(--text); cursor: pointer; }
.qty button:hover { color: var(--yellow); }
.qty output { min-width: 22px; color: var(--cream); font-weight: 800; text-align: center; }
.citem__sum { font-weight: 800; white-space: nowrap; }
.cart__foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(253, 248, 238, .16); }
.cart__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; font-size: 18px; font-weight: 500; }
.cart__total b { font-size: 24px; font-weight: 800; }
.cart:not(.has-items) .cart__foot, .cart.has-items .cart__empty { display: none; }

/* Search (assets/js/search.js): a panel from the top over the page, the whole screen on phones; the field framed
   like the product page's choices, a found product as a cart row whose name turns yellow when pointed at or picked;
   on a catalog section the line that opens it above the rows, "All results" under them */
.search { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
.search.is-open { visibility: visible; }
.search__veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; }
.search.is-open .search__veil { opacity: 1; }
.search__panel {
  position: absolute;
  inset: 0;
  padding: 12px 16px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #000 linear-gradient(rgba(36, 21, 15, .78), var(--night) 60%);
  translate: 0 -100%;
}
.search.is-open .search__panel { translate: 0 0; }
.search__form { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 4px 0 16px; border: 1px solid rgba(253, 248, 238, .28); border-radius: 12px; transition: border-color .2s; }
.search__form:focus-within { border-color: rgba(253, 248, 238, .6); }
.search__form > svg { flex: none; width: 22px; height: 22px; }
.search__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--cream); font: 500 16px var(--text); outline: none; -webkit-appearance: none; appearance: none; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__close { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--cream); cursor: pointer; }
.search__close:hover { color: var(--yellow); }
.search__close[hidden] { display: none; }
.search__close svg { width: 20px; height: 20px; }
/* Phones: the loupe is a yellow button at the field's end that searches (Baymard: the keyboard's key is missed),
   desktop: Enter, the loupe at the start as before */
.search__form > svg { display: none; }
.search__go { display: grid; flex: none; place-items: center; width: 44px; height: 44px; margin-left: -8px; padding: 0; border: 0; border-radius: 9px; background: var(--yellow); color: #000; cursor: pointer; }
.search__go svg { width: 22px; height: 22px; }
.search__list { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
/* Phones: the price under the name, as in a cart row; desktop: on the right */
.sitem__link { display: grid; grid-template-columns: 64px 1fr; gap: 6px 14px; align-items: start; padding: 8px 0; }
.sitem__photo { grid-row: span 2; width: 64px; aspect-ratio: 1; border-radius: 12px; object-fit: contain; background: rgba(253, 248, 238, .06); }
.sitem__text { display: grid; gap: 4px; min-width: 0; }
.sitem__name { font-size: 15px; font-weight: 500; line-height: 1.3; }
.sitem__kind { font-size: 13px; line-height: 1.3; }
.sitem__link:hover .sitem__name, .sitem.is-active .sitem__name { color: var(--yellow); }
.sitem__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-weight: 800; white-space: nowrap; }
.sitem__price s { font-size: 13px; font-weight: 500; }
/* Nothing found: the departments in a row, the shop's Telegram under a line as "All results" is */
.search__empty { margin: 22px 0 0; font-size: 16px; }
.search__empty p { font-style: italic; }
.search__ways { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 20px; font-weight: 800; }
.search__ways a:hover, .search__ask:hover, .catalog__ask:hover { color: var(--yellow); }
.search__scope, .search__all, .search__ask { display: block; font-weight: 800; }
.search__scope { margin-top: 10px; padding: 16px 0; border-bottom: 1px solid rgba(253, 248, 238, .16); }
.search__all, .search__ask { margin-top: 8px; padding: 16px 0 4px; border-top: 1px solid rgba(253, 248, 238, .16); }
.search__ask { margin-top: 20px; }
.search__scope:hover, .search__all:hover, .catalog__all:hover, .similar__more:hover { color: var(--yellow); }
.search__scope[hidden], .search__all[hidden], .catalog__all[hidden], .catalog__none[hidden] { display: none; }
/* The results page with nothing found: the department tiles and the Telegram under "Nothing found" */
.catalog__none { display: grid; justify-items: center; gap: 24px; margin-top: -36px; padding-bottom: 40px; }
.catalog__none .tiles { width: 100%; margin: 0; }
.catalog__ask { font-size: 18px; font-weight: 800; }
/* The results page's own field (catalog.js): in place of the department tiles, on desktop in the title's row;
   on a section "All results" beside it (under it on phones) */
.catalog__search { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin: -8px 0 24px; }
.catalog__search .search__form { flex: 1 1 100%; }
.catalog__all { font-weight: 800; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .search { transition: visibility 0s .35s; }
  .search.is-open { transition: none; }
  .search__veil { transition: opacity .35s var(--ease); }
  .search__panel { transition: translate .35s var(--ease); }
}
@media (min-width: 1152px) {
  .search__panel {
    bottom: auto;
    max-height: 100%;
    padding: calc(40 * var(--u)) max(16px, (100% - 960 * var(--u)) / 2) calc(36 * var(--u));
    box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, .55);
  }
  .search__form { gap: calc(16 * var(--u)); height: calc(68 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(22 * var(--u)); border-radius: calc(12 * var(--u)); }
  .search__form > svg { display: block; width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
  .search__go { display: none; }
  .search__input { font-size: max(16px, calc(22 * var(--u))); }
  .search__close { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
  .search__close svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .search__list { margin-top: calc(16 * var(--u)); }
  .sitem__link { grid-template-columns: calc(80 * var(--u)) 1fr auto; gap: calc(20 * var(--u)); align-items: center; padding: calc(10 * var(--u)) 0; }
  .sitem__photo { grid-row: auto; width: calc(80 * var(--u)); border-radius: calc(12 * var(--u)); }
  .sitem__name { font-size: calc(19 * var(--u)); }
  .sitem__kind { font-size: calc(16 * var(--u)); }
  .sitem__price { flex-direction: column; align-items: flex-end; font-size: calc(19 * var(--u)); }
  .sitem__price s { font-size: calc(16 * var(--u)); }
  .search__empty { margin-top: calc(26 * var(--u)); font-size: calc(19 * var(--u)); }
  .search__ways { gap: calc(14 * var(--u)) calc(40 * var(--u)); margin-top: calc(24 * var(--u)); }
  .search__scope { margin-top: calc(16 * var(--u)); padding: calc(20 * var(--u)) 0; }
  .search__all { margin-top: calc(10 * var(--u)); padding-top: calc(20 * var(--u)); }
  .search__ask { margin-top: calc(24 * var(--u)); padding-top: calc(20 * var(--u)); }
  .search__scope, .search__all { font-size: calc(19 * var(--u)); }
  .catalog__none { grid-column: 1 / -1; gap: calc(30 * var(--u)); margin-top: calc(-40 * var(--u)); padding-bottom: calc(50 * var(--u)); }
  .catalog__ask { font-size: calc(20 * var(--u)); }
  .catalog__search { flex-wrap: nowrap; gap: calc(36 * var(--u)); margin: 0 0 calc(26 * var(--u)); }
  .catalog__search .search__form { flex: 0 1 calc(640 * var(--u)); }
  .catalog__all { font-size: calc(20 * var(--u)); }
  .catalog:has(.subcats) .catalog__search { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .cart { transition: visibility 0s .45s; }
  .cart.is-open { transition: none; }
  .cart__veil { transition: opacity .45s var(--ease); }
  .cart__panel { transition: translate .45s var(--ease); }
  .header__count.is-bumped { animation: bump .5s var(--ease); }

  /* Catalog title wipes in like the home headings */
  .catalog__title.rv {
    -webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) 0 0 / 300% 100% no-repeat;
    mask: linear-gradient(90deg, #000 45%, transparent 55%) 0 0 / 300% 100% no-repeat;
  }
  .catalog__title.rv:not(.is-in) { opacity: 1; translate: none; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  .catalog__title.rv.is-in { transition: -webkit-mask-position 1.3s var(--ease), mask-position 1.3s var(--ease); }
  .product__info { --dx: 30px; --dy: 0px; }
}

@keyframes bump { 40% { scale: 1.35; } }

/* Desktop: design pixels */
@media (min-width: 1152px) {
  .shop { padding: calc(170 * var(--u)) 0 calc(150 * var(--u)); }
  .pcard__tag, .product__tag { border-radius: calc(10 * var(--u)); font-size: calc(30 * var(--u)); }

  /* One left edge (Milush: crumbs, a centred title and chips on the right read as a mess): the crumbs,
     the title with its subcategories after it, then the filter bar */
  .catalog {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: calc(36 * var(--u));
    width: calc(1666 * var(--u));
    margin: 0 auto;
  }
  .catalog > .crumbs, .catalog__layout { grid-column: 1 / -1; }
  .catalog > .crumbs { margin-bottom: calc(10 * var(--u)); }
  .crumbs { margin-bottom: calc(24 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }
  .catalog__title { margin-bottom: calc(26 * var(--u)); font-size: calc(46 * var(--u)); line-height: calc(55 * var(--u)); text-align: left; }
  .catalog__bar { margin-bottom: calc(40 * var(--u)); font-size: calc(20 * var(--u)); }
  /* Four a row (Milush): the design's 520 px card at 0.74, its photo a little shorter */
  .catalog__grid { grid-template-columns: repeat(4, 1fr); gap: calc(64 * var(--u)) calc(40 * var(--u)); }
  .pcard__link { --r: calc(40 * var(--u)); padding-bottom: calc(18 * var(--u)); filter: drop-shadow(calc(5 * var(--u)) calc(5 * var(--u)) calc(27 * var(--u)) rgba(0, 0, 0, .31)); }
  .pcard__link::before { inset: calc(383 * var(--u)) 0 0; }
  .pcard__tag { top: calc(20 * var(--u)); left: calc(20 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(22 * var(--u)); }
  .pcard__text { inset: auto calc(18 * var(--u)) calc(16 * var(--u)); gap: calc(12 * var(--u)); }
  .pcard__name { font-size: calc(20 * var(--u)); }
  .pcard .price { width: 73%; height: calc(64 * var(--u)); margin-top: calc(20 * var(--u)); border-radius: calc(5 * var(--u)); }
  .pcard .price__icon { flex-basis: calc(88 * var(--u)); }
  .pcard .price__icon img { width: calc(41 * var(--u)); }
  .pcard .price__sum { padding: 0 calc(7 * var(--u)); font-size: calc(22 * var(--u)); }
  .pcard__add { bottom: calc(18 * var(--u)); left: 13.5%; width: calc(88 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(5 * var(--u)) 0 0 calc(5 * var(--u)); }
  .pcard__add > * { width: calc(41 * var(--u)); }
  .pick { bottom: calc(94 * var(--u)); }
  .item__add { left: calc(50% - 188 * var(--u)); width: calc(120 * var(--u)); height: calc(87 * var(--u)); border-radius: calc(6 * var(--u)) 0 0 calc(6 * var(--u)); }
  .item__add > * { width: calc(56 * var(--u)); }
  .item .pick, .item:nth-child(n) .pick { right: calc(50% - 188 * var(--u)); bottom: calc(101 * var(--u)); left: calc(50% - 188 * var(--u)); }

  .product {
    grid-template-columns: calc(820 * var(--u)) calc(640 * var(--u));
    column-gap: calc(110 * var(--u));
    align-items: start;
    max-width: none;
    width: calc(1570 * var(--u));
    margin-top: calc(10 * var(--u));
  }
  /* The crumbs and the photo hold exactly where they start, from the first pixel of scroll, while the facts on
     the right scroll (Milush: "Пусть не двигается", 28.10: "Левая сторона должна быть закреплена полностью"),
     until the right column's last line comes level with the photo's bottom (28.10: "последний ряд
     характеристик - низ карточки"); from there all of it scrolls on together. The photo fits the screen: its
     height --photo, its top 216 = the page's top room 170 + the crumbs' line 22 + their margin 24, so the
     crumbs keep to one line in the photo's width, the product's own name cut short (it heads the facts
     anyway). The crumbs hold within the page's content and the photo within the product's, so the page's
     content ends a photo's height above the product's end and both let go at the same moment; the page's
     bottom room takes that height back (and no screen-tall minimum, which would stretch the page's content) */
  .shop--product { --photo: min(860 * var(--u), 100svh - 240 * var(--u)); min-height: 0; padding-bottom: calc(150 * var(--u) + var(--photo)); }
  .shop--product > .crumbs { position: sticky; top: calc(170 * var(--u)); width: calc(820 * var(--u)); margin-left: calc(50% - 785 * var(--u)); }
  .shop--product > .crumbs ol { flex-wrap: nowrap; white-space: nowrap; }
  .shop--product > .crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .product { margin-bottom: calc(-1 * var(--photo)); }
  .product .gallery { position: sticky; top: calc(216 * var(--u)); max-height: calc(100svh - 240 * var(--u)); }
  .product__kind { font-size: calc(18 * var(--u)); }
  .product__name { margin-top: calc(10 * var(--u)); font-size: calc(38 * var(--u)); }
  .product__price { gap: calc(10 * var(--u)) calc(20 * var(--u)); margin-top: calc(20 * var(--u)); }
  .product__now { font-size: calc(62 * var(--u)); }
  .product__old { font-size: calc(26 * var(--u)); }
  .product__buy { margin-top: calc(36 * var(--u)); }
  .opt + .opt { margin-top: calc(26 * var(--u)); }
  .opt__title { margin-bottom: calc(12 * var(--u)); font-size: calc(17 * var(--u)); }
  .opt__guide { gap: calc(12 * var(--u)); min-height: calc(48 * var(--u)); margin-top: calc(8 * var(--u)); font-size: max(14px, calc(20 * var(--u))); }
  .opt__guide svg { width: max(26px, calc(36 * var(--u))); }
  .opt__bar { grid-template-columns: var(--cols); gap: calc(10 * var(--u)); }
  .opt__chip { min-width: calc(61 * var(--u)); height: calc(54 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(12 * var(--u)); }
  .opt__chip span { font-size: calc(22 * var(--u)); }
  .opt__chip::before { border-radius: calc(12 * var(--u)); }
  .opt:has(.order) { margin-top: calc(36 * var(--u)); }
  .order { gap: calc(14 * var(--u)); }
  .order > * { height: calc(68 * var(--u)); gap: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(21 * var(--u)); }
  .order__side svg { width: calc(24 * var(--u)); }
  .opt__note { margin-top: calc(16 * var(--u)); font-size: calc(18 * var(--u)); }
  .product__sub { margin: calc(64 * var(--u)) 0 calc(18 * var(--u)); font-size: calc(37 * var(--u)); }
  .specs { font-size: calc(20 * var(--u)); }
  .specs div { padding: calc(14 * var(--u)) 0; }
  .product__desc { margin-top: calc(36 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.55; }
  .similar { padding: 0 calc(50% - 785 * var(--u)) calc(150 * var(--u)); }
  .similar__head { margin-bottom: calc(40 * var(--u)); }
  .similar__title { font-size: calc(37 * var(--u)); }
  .similar__more { font-size: max(14px, calc(20 * var(--u))); }

  .header__count { top: calc(-10 * var(--u)); right: calc(-14 * var(--u)); }
}