/* FAICHAK SPORT STORE - showcase page.
   Desktop sizes come from the 1920px design and scale with the window:
   calc(N * var(--u)) = N design pixels. Below 1152px the mobile layout applies. */

:root {
  --u: clamp(0.6px, calc(100vw / 1920), 1px);
  --yellow: #fff171;
  --olive: #a59c4a;
  --grey: #c2c2c2;
  --cream: #fdf8ee;
  --paper: #fef9ef;
  --brown: #460d11;
  --night: #27130c;
  --display: 'Fira Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --text: 'Montserrat', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --head: 56px;  /* the phone header's height; the shop pages start below it */
}

*, *::before, *::after { box-sizing: border-box; }
/* No visible scrollbars (Milush); everything still scrolls */
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: #000;
  color: var(--cream);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--head) + 16px); }

.display {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 8px;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn--yellow { background: var(--yellow); color: #000; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.btn--grey { background: var(--grey); color: #000; }

/* Header. Phones: one slim row that stays on top while the page scrolls (Milush: the tall one took too
   much room and scrolled away), dark once the page moves under it. The "Catalog" button opens the sections
   over the page as the usual shop menu that drills down (assets/js/menu.js): one row per section, a section
   with categories slides them in over the list (Milush: sections and categories in one list were "каша").
   Desktop: the sections in a row, each one's categories drop down on hover or focus */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--head);
  padding: 0 16px;
  transition: background-color .3s;
}
.header.is-scrolled, .header.is-open { background: #000; }
/* The brand's short F mark on every screen (Milush 28.10; the full stacked logo is in the footer) */
.header__logo img { width: auto; height: 32px; }
.header__menu {
  position: relative;
  padding: 10px 0 10px 28px;
  border: 0;
  background: none;
  color: inherit;
  font: 800 14px var(--text);
  cursor: pointer;
}
/* Two bars that cross while the sections are open */
.header__menu::before, .header__menu::after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  translate: 0 -4px;
}
.header__menu::after { translate: 0 4px; }
.header__menu[aria-expanded="true"]::before { translate: 0; rotate: 45deg; }
.header__menu[aria-expanded="true"]::after { translate: 0; rotate: -45deg; }
.header__menu:hover, .header__menu[aria-expanded="true"] { color: var(--yellow); }
.nav {
  position: fixed;
  inset: var(--head) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #000;
  visibility: hidden;
  opacity: 0;
}
.header.is-open .nav { visibility: visible; opacity: 1; }
.nav__group { font-weight: 500; }
.nav__group a { display: block; }
.nav__head { font-weight: 800; }  /* a category over who it is for */
.nav__back, .nav__all { display: none; }  /* the phone list's own rows (menu.js) */
.header__tools { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.lang { display: flex; gap: 12px; font-size: 14px; font-weight: 800; }
.lang [aria-current] { color: var(--yellow); }
.nav a:hover, .nav [aria-current], .lang a:hover { color: var(--yellow); }
@media (prefers-reduced-motion: no-preference) {
  .nav { transition: opacity .2s, visibility 0s .2s; }
  .header.is-open .nav { transition: opacity .2s; }
  .header__menu::before, .header__menu::after { transition: translate .2s, rotate .2s; }
}
@media (max-width: 1151.98px) {
  .nav__list, .nav__drop { padding: 8px 16px 48px; }
  .nav__list > li + li, .nav__all, .nav__group li { border-top: 1px solid rgba(253, 248, 238, .12); }
  .nav__link, .nav__back, .nav__all, .nav__group a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    font: 500 20px/1.2 var(--text);  /* weights every page has loaded already (the home pages have no 600/700) */
  }
  /* A section with categories: an arrow, and its categories over the list with a row back on top */
  .nav__link[aria-expanded] { justify-content: space-between; }
  .nav__link[aria-expanded]::after, .nav__back::before {
    content: '';
    flex: none;
    width: 9px;
    height: 9px;
    margin: 0 4px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    rotate: 45deg;
  }
  .nav__drop {
    position: fixed;
    inset: var(--head) 0 0;
    z-index: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #000;
    translate: 100% 0;
    visibility: hidden;
  }
  .nav__link[aria-expanded="true"] + .nav__drop { translate: 0; visibility: visible; }
  .nav__back { padding: 0; border: 0; background: none; color: inherit; font-weight: 800; cursor: pointer; }
  .nav__back::before { rotate: -135deg; }
  .nav__back:hover { color: var(--yellow); }
  /* Who a category is for: chips on its page, not rows here; shoes have no categories, only who they are for */
  .nav__group:has(.nav__head) li:not(:has(> .nav__head)) { display: none; }
}
@media (max-width: 1151.98px) and (prefers-reduced-motion: no-preference) {
  .nav__drop { transition: translate .25s var(--ease), visibility 0s .25s; }
  .nav__link[aria-expanded="true"] + .nav__drop { transition: translate .25s var(--ease); }
  /* Closing the menu: the categories stay while it fades, then the sections are back for next time */
  .header:not(.is-open) .nav__drop { transition: translate 0s .2s, visibility 0s .2s; }
}
.header__cart, .header__search { display: block; }
.header__cart svg { display: block; width: 26px; height: auto; }
.header__search svg { display: block; width: 24px; height: auto; }
.header__cart:hover, .header__search:hover { color: var(--yellow); }

/* Hero */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding-top: 60px;
  overflow: hidden;
  background: #6b2a14;
}
.hero picture, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 30%;
  background: linear-gradient(rgba(18, 16, 14, .9), rgba(18, 16, 14, 0));
}
.hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.hero__title { display: flex; flex-direction: column; align-items: flex-start; line-height: .92; }
.hero__title span:first-child { font-size: 11.5vw; }
.hero__title span:last-child { font-size: 16vw; }
.hero .btn { margin-top: 40px; height: 52px; padding: 0 26px; font-size: 18px; }

/* Categories + top models share one dark background */
.dark { background: linear-gradient(#000 0, #000 35%, var(--night) 75%); }

.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 72px 20px 0; }
.cats__lead { grid-column: 1 / -1; margin-bottom: 4px; font-size: 16px; }
.cat { position: relative; aspect-ratio: 316 / 468; border-radius: 12px; overflow: hidden; }
.cat img { width: 100%; height: 100%; object-fit: cover; }
.cat span {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-size: 20px;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.cat--padel { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.cat--padel span { font-size: 26px; }

.top { padding: 88px 20px 96px; }
.top__title { margin-bottom: 40px; font-size: 44px; text-align: center; }
/* Phones: the heading and text over the cards, "View all" under them (Milush) */
.row { display: flex; flex-direction: column; align-items: center; }
.row + .row { margin-top: 72px; }
.row__info { display: contents; }
.row__info h3 { font-size: 34px; text-align: center; text-transform: uppercase; }
.row__info p { max-width: 520px; margin-top: 14px; font-size: 15px; line-height: 1.5; text-align: center; }
.row .btn { order: 1; margin-top: 24px; height: 38px; padding: 0 16px; font-size: 13px; border-radius: 7px; }
.row__items { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.item { display: flex; flex-direction: column; align-items: center; }
/* Product cards show the design photos. For its scene (assets/js/scenes.js) a card may have layers over
   its photo: tennis - the court with the balls taken away and the balls' soft shadows (tools/balls.py,
   hidden until the scene plays; the balls are drawn by the script); shoes - a patch that restores the
   backdrop where the shoe was, and the shoe (tools/lift.swift). The photo opens the product as its name and price do
   (Milush 01.11: "логично делать кликабельной фотографию тоже"), out of the keys' and a screen reader's way. */
.item__photo { --r: 18px; position: relative; width: 100%; aspect-ratio: 1080 / 1318; border-radius: var(--r); overflow: hidden; isolation: isolate; }
.item__photo img, .item__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item__patch { opacity: 0; }
.item__scene { visibility: hidden; }
.item__ball, .item__tint { position: absolute; }
/* the product's name as the catalog has it; it takes up the slack, so the two prices of a row stay level */
.item__name { flex: 1; margin-top: 10px; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center; text-wrap: balance; }
.price { display: flex; width: 100%; height: 44px; margin-top: 12px; border-radius: 6px; overflow: hidden; }
.item__name + .price { margin-top: 10px; }
/* a price that depends on the weight: a small "from" over it, laid out like an old price over a sale one */
.price--from .price__sum { flex-direction: column; line-height: 1.05; }
.price__from { font-size: .62em; font-weight: 600; }
.price__icon { flex: 0 0 44px; display: grid; place-items: center; background: var(--yellow); }
.price__icon img { width: 26px; }
.price__sum {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  background: var(--olive);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

/* Footer of every page (tools/build.py footer()): logo, the catalog's departments, the contacts, the year, as
   store footers have them (Milush 28.10, no store blurb). Vlad: no social networks yet, so the design's socials
   column and its Instagram phone are gone; the contact card holds the four channels, each with its number or
   address to read or copy */
.footer { padding: 56px 20px 0; background: var(--paper); color: #000; }
.footer__grid { display: grid; align-items: start; gap: 40px; }
.footer__logo { justify-self: start; }
.footer__logo img { width: 110px; height: auto; }
.footer__head { color: var(--brown); font-size: 18px; font-weight: 800; text-transform: uppercase; }
/* Two columns read top to bottom */
.footer__nav ul { display: grid; grid-auto-flow: column; grid-template: repeat(4, auto) / 1fr 1fr; gap: 14px 20px; max-width: 360px; margin-top: 18px; }
.footer__nav a { font-size: 16px; font-weight: 500; }
.footer__nav a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer__copy {
  margin-top: 48px;
  padding: 20px 0 28px;
  border-top: 1px solid #e2d6ce;  /* the brown at 15% on the paper */
  font-size: 14px;
  font-weight: 500;
}

.contact {
  width: min(100%, 360px);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
.contact__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 24px;
  background: var(--yellow);
  color: var(--brown);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
}
.contact__links a {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 54px;
  padding: 0 24px;
  background: #fef181;
  color: #26231a;
  font-size: 16px;
  font-weight: 600;
  transition: filter .15s;
}
.contact__links li:nth-child(even) a { background: #fef39e; }
.contact__links a:hover { filter: brightness(.97); }
.contact__links svg { flex: none; width: 26px; height: 26px; }

/* Desktop: the 1920px design, scaled */
@media (min-width: 1152px) {
  [id] { scroll-margin-top: calc(170 * var(--u)); }

  /* The menu midway between the logo and the right group, equal room on both sides (Milush 29.10: with the
     search added, page-centred it pressed Контакти against UA); the logo's column keeps its width when scrolled */
  .header {
    display: grid;
    grid-template-columns: calc(80 * var(--u)) 1fr auto;
    align-items: start;
    height: auto;
    padding: calc(53 * var(--u)) calc(65 * var(--u)) calc(24 * var(--u)) calc(66 * var(--u));
  }
  .header__logo { margin-top: calc(7 * var(--u)); }
  .header__logo img { width: calc(80 * var(--u)); height: auto; }
  .header__menu, .nav__item--all { display: none; }
  .nav { position: static; grid-column: 2; justify-self: center; overflow: visible; padding: 0; background: none; visibility: visible; opacity: 1; transition: none; }
  .nav__list { display: flex; gap: calc(90 * var(--u)); font-size: calc(23 * var(--u)); font-weight: 800; }
  .nav__item { position: relative; }
  .nav__link { font: inherit; }
  /* A section's categories: one list in a panel under its name (the catalog filters' panel, filters.css), who
     a category is for indented under it; open while the pointer or focus is on either. Milush 28.10: columns
     side by side, some with rows under them and some without, looked crooked */
  .nav__drop {
    position: absolute;
    top: 100%;
    left: calc(-28 * var(--u));
    margin-top: calc(18 * var(--u));
    padding: calc(12 * var(--u)) calc(28 * var(--u));
    border: 1px solid rgba(253, 248, 238, .12);
    border-radius: calc(16 * var(--u));
    background: #160b07;
    box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, .55);
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
  }
  .nav__drop::before { content: ''; position: absolute; inset: calc(-18 * var(--u)) 0 100%; }  /* the gap above still counts */
  .nav__item:hover > .nav__drop, .nav__item:focus-within > .nav__drop { visibility: visible; opacity: 1; }
  .nav__group { font-size: calc(20 * var(--u)); font-weight: 800; }
  .nav__group a { padding: calc(8 * var(--u)) 0; }
  .nav__group:has(li + li):not(:last-child) { margin-bottom: calc(6 * var(--u)); }
  /* tennis and padel over a department's categories, a line between them */
  .nav__group--sport { padding-bottom: calc(6 * var(--u)); border-bottom: 1px solid rgba(253, 248, 238, .12); }
  .nav__group:has(.nav__head) li + li a { padding: calc(5 * var(--u)) 0 calc(5 * var(--u)) calc(20 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; }
  .header__tools { justify-self: end; margin-top: calc(-2 * var(--u)); gap: calc(44 * var(--u)); }  /* UA EN on the menu's line */
  .lang { gap: calc(20 * var(--u)); font-size: calc(23 * var(--u)); }
  .header__cart svg { width: calc(34 * var(--u)); }
  .header__search svg { width: calc(31 * var(--u)); }
  /* Scrolled: a slim translucent bar instead of the tall top header */
  .header.is-scrolled {
    align-items: center;
    padding-top: calc(14 * var(--u));
    padding-bottom: calc(14 * var(--u));
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .header.is-scrolled .header__logo, .header.is-scrolled .header__tools { margin-top: 0; }
  .header.is-scrolled .header__logo img { width: calc(58 * var(--u)); }
  @media (prefers-reduced-motion: no-preference) {
    .header { transition: background-color .3s, padding .3s; }
    .header__logo img { transition: width .3s; }
    /* opens at once, closes a moment after the pointer leaves */
    .nav__drop { transition: opacity .15s .1s, visibility 0s .25s; }
    .nav__item:hover > .nav__drop, .nav__item:focus-within > .nav__drop { transition: opacity .15s; }
  }

  .hero { min-height: calc(1048 * var(--u)); padding-top: calc(234 * var(--u)); }
  .hero__title span:first-child { font-size: calc(134 * var(--u)); }
  .hero__title span:last-child { font-size: calc(180 * var(--u)); }
  .hero .btn {
    margin-top: calc(71 * var(--u));
    height: calc(71 * var(--u));
    padding: 0 calc(28 * var(--u));
    font-size: calc(29 * var(--u));
    border-radius: calc(8 * var(--u));
  }

  .dark { background: linear-gradient(#000 0, #000 calc(1900 * var(--u)), var(--night) calc(3400 * var(--u))); }

  .cats {
    position: relative;
    left: calc(29 * var(--u));
    width: calc(1213 * var(--u));
    margin: 0 auto;
    padding: calc(300 * var(--u)) 0 0;
    grid-template-columns: calc(316 * var(--u)) calc(317 * var(--u)) calc(497 * var(--u));
    grid-template-rows: calc(75 * var(--u)) calc(468 * var(--u));
    gap: 0 calc(41.5 * var(--u));
  }
  .cats__lead { grid-column: 1 / 3; grid-row: 1; margin: 0; font-size: calc(29 * var(--u)); }
  .cat { grid-row: 2; aspect-ratio: auto; border-radius: calc(14 * var(--u)); }
  .cat span { left: calc(20 * var(--u)); bottom: calc(14 * var(--u)); font-size: calc(36 * var(--u)); }
  .cat--padel { grid-column: 3; grid-row: 1 / 3; }
  .cat--padel span { left: calc(33 * var(--u)); font-size: calc(50 * var(--u)); }

  .top { width: calc(1693 * var(--u)); margin: 0 auto; padding: calc(408 * var(--u)) 0 calc(293 * var(--u)); }
  .top__title { margin-bottom: calc(84 * var(--u)); font-size: calc(66 * var(--u)); }
  .row {
    display: grid;
    grid-template-columns: calc(1094 * var(--u)) calc(547 * var(--u));
    column-gap: calc(51 * var(--u));
    align-items: center;
  }
  .row--flip { grid-template-columns: calc(547 * var(--u)) calc(1094 * var(--u)); }
  .row:not(.row--flip) .row__info { order: 2; }
  .row + .row { margin-top: calc(272 * var(--u)); }
  /* Text centred on the photo (the price under it is 118 tall) */
  .row__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(520 * var(--u));
    margin: 0 0 calc(118 * var(--u)) calc(14 * var(--u));
  }
  .row__info h3 { font-size: calc(60 * var(--u)); }
  .row__info p {
    max-width: none;
    margin-top: calc(36 * var(--u));
    font-size: calc(27 * var(--u));
    line-height: calc(32 * var(--u));
    text-align: justify;
    text-wrap: pretty;
    hyphens: auto;
  }
  .row .btn {
    margin-top: calc(35 * var(--u));
    height: calc(49 * var(--u));
    padding: 0 calc(27 * var(--u));
    font-size: calc(20 * var(--u));
    border-radius: calc(8 * var(--u));
  }
  .row__items { align-self: auto; grid-template-columns: repeat(2, calc(517 * var(--u))); column-gap: calc(60 * var(--u)); margin-top: 0; }
  .item__photo { --r: calc(36 * var(--u)); }
  .price {
    width: calc(376 * var(--u));
    height: calc(87 * var(--u));
    margin-top: calc(31 * var(--u));
    border-radius: calc(6 * var(--u));
  }
  .price__icon { flex-basis: calc(120 * var(--u)); }
  .price__icon img { width: calc(56 * var(--u)); }
  .price__sum { padding: 0 calc(10 * var(--u)); font-size: calc(30 * var(--u)); }
  .item__name { margin-top: calc(24 * var(--u)); font-size: calc(22 * var(--u)); }
  .item__name + .price { margin-top: calc(20 * var(--u)); }

  /* Three columns on the catalog pages' edges; the catalog's heading sits level with the card's */
  .footer { padding: calc(150 * var(--u)) 0 0; }
  .footer__grid, .footer__copy { width: calc(1666 * var(--u)); margin-inline: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr calc(460 * var(--u)); gap: 0; }
  .footer__logo img { width: calc(188 * var(--u)); }
  .footer__head { display: flex; align-items: center; height: calc(88 * var(--u)); font-size: calc(32 * var(--u)); }
  .footer__nav ul { grid-auto-flow: row; grid-template: none / 1fr; gap: calc(14 * var(--u)); margin-top: calc(10 * var(--u)); }
  .footer__nav a { font-size: calc(22 * var(--u)); }
  .footer__copy { margin-top: calc(150 * var(--u)); padding: calc(40 * var(--u)) 0 calc(50 * var(--u)); font-size: calc(18 * var(--u)); }
  .contact { width: calc(460 * var(--u)); border-radius: calc(10 * var(--u)); }
  .contact__title { height: calc(88 * var(--u)); padding: 0 calc(32 * var(--u)); font-size: calc(32 * var(--u)); }
  .contact__links a { gap: calc(22 * var(--u)); height: calc(66 * var(--u)); padding: 0 calc(36 * var(--u)); font-size: calc(22 * var(--u)); }
  .contact__links svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
}

/* Motion, the common kind (Milush: as the reference sites do it, nothing invented): blocks fade in and
   rise a little, once, as they come into view (the page script marks them .rv, then .is-in), in 0.4 s,
   under the half second interface motion is usually kept to. The first screen is there at once. Each
   product row plays its own short scene (assets/js/scenes.js, GSAP). Nothing moves with the scroll itself
   or under the pointer. Nothing runs with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .rv:not(.is-in) { opacity: 0; translate: 0 16px; }
  .rv.is-in { transition: opacity .4s var(--ease), translate .4s var(--ease), filter .15s; }
  /* The headings' slant leans past their box, and Chrome draws a fading block only within it ("КАТАЛОГ"
     lost the top of its Г): room on the right keeps the last letter whole */
  .rv.display { padding-right: .12em; }

  /* Products: the scenes are in assets/js/scenes.js */
  .item--shoe .item__patch { opacity: 1; }
  .item__cut, .item__ball, .item__tint, .item__shadow { will-change: transform; }
}