/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/GolosText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Golos Text";
  src: url("../fonts/GolosText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  /* Golos Text ships 400/500 only: headings left at the default bold would get
     a smeared, synthesized 700. This renders them with the real 500 face. */
  font-synthesis-weight: none;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background-color: var(--color-text-light);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2L14 14M14 2L2 14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2L14 14M14 2L2 14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

ul {
  list-style: none;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* colors that stay constant across themes (fixed surfaces, on-photo/on-fill content) */
  --color-bg-light: #d9d9d9;
  --color-header-bg: #eeeeee;
  --color-text-white: #ffffff;
  --color-text-dark: #131313;
  --color-text-muted-2: #393939;
  --color-accent: #e96912;
  --color-card-bg-strong: #272727;
  --color-badge-bg: #474747;
  --color-badge-border: #414141;
  --color-error: #e34848;

  /* colors that flip between themes */
  --color-bg: #131313;
  --color-bg-elevated: #1c1c1c;
  --color-text-light: #eeeeee;
  --color-text-muted: #979797;
  --color-border: #535353;
  --color-border-light: rgba(238, 238, 238, 0.4);
  --color-card-bg: rgba(217, 217, 217, 0.02);

  /* type */
  --font-heading: "Golos Text", "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;

  /* layout */
  --container-max: 1720px;
  --container-pad: 100px;
  --header-height: 67px;
  --radius-sm: 5px;
  --radius-md: 13px;
  --radius-lg: 40px;
}

:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-elevated: #f3f3f3;
  --color-text-light: #131313;
  --color-text-muted: #6b6b6b;
  --color-border: #e0e0e0;
  --color-border-light: rgba(19, 19, 19, 0.12);
  --color-card-bg: rgba(19, 19, 19, 0.03);
}

/* The only Wildberries asset we have is a white logo, so it needs flipping
   wherever it lands on a light surface. Drop this once a colour one exists. */
:root[data-theme="light"] img[alt="Wildberries"] {
  filter: invert(1);
}

@media (max-width: 1199px) {
  :root {
    --container-pad: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --container-pad: 20px;
  }
}

/* ==========================================================================
   Preloader — once per session (see the inline script in <head> and
   js/main.js). Letters rise one by one, the orange T drops in, a hairline
   fills with the load, then the dark curtain lifts with an orange edge.
   Always dark, whatever the theme.
   ========================================================================== */
.preloader {
  --pl-ease: cubic-bezier(0.76, 0, 0.24, 1);

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      60% 45% at 50% 55%,
      rgba(233, 105, 18, 0.1),
      rgba(233, 105, 18, 0) 70%
    ),
    #0e0e0e;
  color: var(--color-text-white);
  transition: transform 0.9s var(--pl-ease) 0.15s;
  /* failsafe: if the script never finishes, get out of the way anyway */
  animation: pl-failsafe 0.6s ease 6s forwards;
}

html[data-preloaded] .preloader {
  display: none;
}

/* the orange edge that runs along the bottom of the lifting curtain */
.preloader::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(233, 105, 18, 0) 0%,
    var(--color-accent) 30%,
    var(--color-accent) 70%,
    rgba(233, 105, 18, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}

.preloader__inner {
  display: grid;
  gap: 28px;
  width: clamp(260px, 24vw, 320px);
  transition:
    opacity 0.45s ease,
    transform 0.6s var(--pl-ease);
}

.preloader__logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* start hidden below the line even before the animation kicks in */
.preloader__logo path {
  transform-box: fill-box;
  transform: translateY(140%);
  animation: pl-letter 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.15s + var(--i) * 0.07s);
}

.preloader__logo .preloader__accent {
  opacity: 0;
  transform: translateY(-160%);
  animation:
    pl-accent 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) 0.75s forwards,
    pl-glow 1.4s ease-out 1.1s both;
}

.preloader__meta {
  display: grid;
  gap: 12px;
  animation: pl-fade 0.8s ease 0.6s both;
}

.preloader__bar {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.preloader__bar span {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform 0.35s ease-out;
}

.preloader__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.45);
}

.preloader__count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-text-white);
}

/* done: the content drifts up and fades, then the curtain lifts */
.preloader.is-done {
  transform: translateY(-100%);
  pointer-events: none;
}

.preloader.is-done::after {
  opacity: 1;
}

.preloader.is-done .preloader__inner {
  opacity: 0;
  transform: translateY(-24px);
}

@keyframes pl-letter {
  to {
    transform: none;
  }
}

@keyframes pl-accent {
  from {
    opacity: 0;
    transform: translateY(-160%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pl-glow {
  0% {
    filter: drop-shadow(0 0 0 rgba(233, 105, 18, 0));
  }
  30% {
    filter: drop-shadow(0 0 6px rgba(233, 105, 18, 0.9));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(233, 105, 18, 0));
  }
}

@keyframes pl-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pl-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Less motion: no rising letters or lifting curtain, just a fade */
@media (prefers-reduced-motion: reduce) {
  .preloader__logo path,
  .preloader__logo .preloader__accent,
  .preloader__meta {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .preloader {
    transition: opacity 0.4s ease;
  }

  .preloader.is-done {
    transform: none;
    opacity: 0;
  }
}

/* ==========================================================================
   Toasts — "Добавлено в лист заказа" in the top right corner, under the
   header. Built by js/main.js (no markup in the pages). The bar at the
   bottom runs the timer; hovering or focusing the toast pauses it.
   ========================================================================== */
.toasts {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  left: 12px;
  right: 12px;
  z-index: 350;
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: none;
}

.toast {
  --toast-ms: 5000ms;

  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  padding: 14px 14px 18px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-elevated);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  color: var(--color-text-light);
  pointer-events: auto;
  animation: toast-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* a quick pulse when the same product is added again */
.toast.is-bumped {
  animation: toast-bump 0.35s ease;
}

.toast.is-leaving {
  animation: toast-out 0.3s ease both;
  pointer-events: none;
}

.toast__media {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-card-bg-strong);
}

.toast__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* no photo (several positions at once) — an accent tick instead */
.toast__media--icon {
  display: grid;
  place-items: center;
  background: rgba(233, 105, 18, 0.15);
  color: var(--color-accent);
}

.toast__media--icon svg {
  width: 24px;
  height: 24px;
}

.toast__body {
  min-width: 0;
}

.toast__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #3fb27f;
}

.toast__title svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.toast__name {
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
}

.toast__meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.toast__open {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.toast__open:hover {
  text-decoration-color: currentColor;
}

.toast__close {
  position: relative;
  width: 28px;
  height: 28px;
  margin: -4px -4px 0 0;
  border-radius: 8px;
  color: var(--color-text-muted);
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.toast__close::before,
.toast__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
}

.toast__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.toast__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.toast__close:hover,
.toast__close:focus-visible {
  color: var(--color-text-light);
  background: var(--color-card-bg);
  outline: none;
}

/* the timer: a thin accent bar that shrinks to nothing */
.toast__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--color-border);
}

.toast__timer span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform-origin: left;
  animation: toast-timer var(--toast-ms) linear forwards;
}

/* paused while hovered or focused from the keyboard (a mouse click on the
   cross must not freeze it) */
.toast:hover .toast__timer span,
.toast:has(:focus-visible) .toast__timer span {
  animation-play-state: paused;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(32px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(32px) scale(0.98);
  }
}

@keyframes toast-bump {
  50% {
    transform: scale(1.02);
  }
}

@keyframes toast-timer {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (min-width: 768px) {
  .toasts {
    left: auto;
    right: 20px;
    width: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-bumped {
    animation: toast-fade-in 0.2s ease both;
  }

  .toast.is-leaving {
    animation: toast-fade-out 0.2s ease both;
  }

  @keyframes toast-fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes toast-fade-out {
    to {
      opacity: 0;
    }
  }
}

/* ==========================================================================
   Floating menu (≥1200px) — js/main.js adds html.is-header-away once the
   page is scrolled past the top: the header slides up, the "Меню" badge
   drops in top left, the phone + cart pill slides in top right. The badge
   opens a menu card that unfolds from its corner. Always on the light
   header surface, whatever the theme — same as the header itself.
   ========================================================================== */
.float-menu,
.float-bar {
  display: none;
}

@media (min-width: 1200px) {
  .site-header {
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
  }

  .is-header-away .site-header {
    transform: translateY(-110%);
  }

  .float-menu,
  .float-bar {
    --fm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --fm-surface: var(--color-header-bg);
    --fm-text: var(--color-text-dark);
    --fm-cut: 16px;

    display: block;
    position: fixed;
    top: 20px;
    z-index: 150;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 0.35s ease,
      transform 0.55s var(--fm-ease),
      visibility 0s linear 0.55s;
  }

  .is-header-away .float-menu,
  .is-header-away .float-bar {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0.15s, 0.15s, 0s;
  }

  /* ---- badge ---- */
  /* the shadow sits on the wrapper: clip-path on the badge and the card
     would cut a shadow of their own */
  .float-menu {
    left: 24px;
    transform: translateY(-130%);
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.4));
  }

  .float-menu__btn {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: 84px;
    padding: 12px 0 18px;
    background: var(--fm-surface);
    color: var(--fm-text);
    border-radius: 12px 12px 0 0;
    /* shield: the bottom corners are cut, like the brand's badges */
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--fm-cut)),
      calc(100% - var(--fm-cut)) 100%,
      var(--fm-cut) 100%,
      0 calc(100% - var(--fm-cut))
    );
    transition:
      transform 0.35s var(--fm-ease),
      opacity 0.25s ease;
  }

  .float-menu__btn:hover {
    transform: translateY(3px);
  }

  .float-menu__btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
  }

  .float-menu__label {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .float-menu__mark {
    width: 50px;
    height: 25px;
    transition: transform 0.45s var(--fm-ease);
  }

  .float-menu__btn:hover .float-menu__mark {
    transform: translateY(2px) scale(1.06);
  }

  /* ---- menu card: unfolds from the badge's corner ---- */
  .float-menu__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px 28px 40px;
    background: var(--fm-surface);
    color: var(--fm-text);
    border-radius: 14px 14px 0 0;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 26px),
      calc(100% - 26px) 100%,
      26px 100%,
      0 calc(100% - 26px)
    );
    transform-origin: 42px 42px;
    transform: scale(0.2);
    opacity: 0;
    visibility: hidden;
    transition:
      transform 0.5s var(--fm-ease),
      opacity 0.3s ease,
      visibility 0s linear 0.5s;
  }

  .float-menu.is-open .float-menu__panel {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .float-menu.is-open .float-menu__btn {
    opacity: 0;
    pointer-events: none;
  }

  .float-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
  }

  .float-menu__logo img {
    width: 120px;
    height: auto;
  }

  .float-menu__close {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fm-text);
  }

  .float-menu__close-x {
    position: relative;
    width: 16px;
    height: 16px;
    transition: transform 0.35s var(--fm-ease);
  }

  .float-menu__close-x::before,
  .float-menu__close-x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
  }

  .float-menu__close-x::before {
    transform: rotate(45deg);
  }

  .float-menu__close-x::after {
    transform: rotate(-45deg);
  }

  .float-menu__close:hover .float-menu__close-x {
    transform: rotate(90deg);
  }

  .float-menu__close:focus-visible,
  .float-menu__link:focus-visible,
  .float-menu__foot a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  .float-menu__list {
    border-top: 1px dashed rgba(19, 19, 19, 0.25);
  }

  .float-menu__list li,
  .float-menu__foot {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.3s ease,
      transform 0.4s var(--fm-ease);
  }

  .float-menu.is-open .float-menu__list li,
  .float-menu.is-open .float-menu__foot {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.12s + var(--i) * 0.035s);
  }

  .float-menu__list li {
    border-bottom: 1px dashed rgba(19, 19, 19, 0.25);
  }

  .float-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition:
      color 0.2s ease,
      padding 0.3s var(--fm-ease);
  }

  .float-menu__link svg {
    width: 18px;
    height: 18px;
    color: rgba(19, 19, 19, 0.35);
    transition:
      color 0.2s ease,
      transform 0.3s var(--fm-ease);
  }

  .float-menu__link:hover {
    color: var(--color-accent);
    padding-left: 6px;
  }

  .float-menu__link:hover svg {
    color: var(--color-accent);
    transform: translateX(4px);
  }

  .float-menu__link[aria-current="page"] {
    color: var(--color-accent);
  }

  .float-menu__foot {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin-top: 26px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.04em;
  }

  .float-menu__foot a:hover {
    color: var(--color-accent);
  }

  /* ---- phone + cart pill, top right ---- */
  .float-bar {
    right: 24px;
    display: flex;
    align-items: center;
    gap: 4px;
    isolation: isolate;
    padding: 6px 6px 6px 22px;
    color: var(--fm-text);
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.4));
    transform: translateX(130%);
  }

  /* the cut-corner shape lives on a layer, so the cart badge isn't clipped */
  .float-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--fm-surface);
    border-radius: 12px 12px 12px 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  }

  .float-bar__search {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: -12px;
    border-radius: 9px;
    color: var(--fm-text);
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .float-bar__search svg {
    width: 20px;
    height: 20px;
  }

  .float-bar__search:hover {
    background: rgba(19, 19, 19, 0.08);
    color: var(--color-accent);
  }

  .float-bar__search:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .float-bar__phone {
    padding-right: 10px;
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s ease;
  }

  .float-bar__phone:hover {
    color: var(--color-accent);
  }

  .float-bar__cart {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: var(--color-accent);
    color: var(--color-text-white);
    transition: transform 0.2s ease;
  }

  .float-bar__cart:hover {
    transform: scale(1.05);
  }

  .float-bar__cart svg {
    width: 20px;
    height: 20px;
  }

  /* inverted on the accent square, as on the mobile cart bubble */
  .float-bar__cart .cart-badge {
    top: -6px;
    right: -6px;
    background: var(--color-text-dark);
    color: var(--color-text-white);
  }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .site-header,
  .float-menu,
  .float-bar,
  .float-menu__panel,
  .float-menu__list li,
  .float-menu__foot {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: 60px;
}

@media (min-width: 1200px) {
  .section {
    padding-block: 110px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 21px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.btn--light {
  background: var(--color-header-bg);
  color: var(--color-text-dark);
}

.btn--light:hover {
  opacity: 0.85;
}

.btn--outline {
  border: 1px solid var(--color-text-light);
  color: var(--color-text-light);
  padding: 15px 24px;
}

.btn--outline:hover {
  background: var(--color-text-light);
  color: var(--color-bg);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-text-white);
}

.btn--accent:hover {
  opacity: 0.9;
}

.btn--muted {
  background: #3a3a3a;
  color: var(--color-text-white);
}

.btn--muted:hover {
  opacity: 0.85;
}

.btn--dark {
  background: #363636;
  color: var(--color-text-white);
}

.btn--dark:hover {
  opacity: 0.85;
}

.btn--block {
  width: 100%;
}

/* On phones every button spans the full width. */
@media (max-width: 767px) {
  .btn {
    width: 100%;
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
}

.link-arrow img {
  width: 16px;
  height: 12px;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
  padding-top: 20px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.breadcrumbs a:hover {
  color: var(--color-text-light);
}

.breadcrumbs__sep {
  margin: 0 6px;
  color: var(--color-text-muted-2);
}

/* ==========================================================================
   Page head
   ========================================================================== */
.page-head__title {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(28px, 6vw, 74px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-bottom: 150px;
}

/* ==========================================================================
   Page hero (photo or video header shared by inner pages)
   ========================================================================== */
.page-hero {
  --hero-fade: 90px;

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 68vh, 760px);
  margin-bottom: 80px;
  /* Bottom padding keeps the title clear of the fade, so it stays readable
     once the fade turns white in the light theme. */
  padding-block: 40px calc(var(--hero-fade) + 40px);
  overflow: hidden;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Melts the bottom edge into the page, over a scrim that keeps the title
   readable whatever the photo does — bright workshop shots included. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      var(--color-bg) 0,
      rgba(0, 0, 0, 0) var(--hero-fade)
    ),
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.25) 100%
    );
}

/* Phones: the fade, the padding under the title and the gap to the content
   add up to an empty screen-third, so each is shortened. */
@media (max-width: 767px) {
  .page-hero {
    --hero-fade: 56px;

    margin-bottom: 32px;
    /* the light theme has no fade — keep the title off the photo's edge */
    padding-bottom: max(calc(var(--hero-fade) + 12px), 28px);
  }
}

/* Dark footage fading into a white page only turns to grey mush, so the light
   theme gets a clean edge and a lighter scrim that keeps the colour. */
:root[data-theme="light"] .page-hero {
  --hero-fade: 0px;
}

:root[data-theme="light"] .page-hero::after {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.5) 45%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.page-hero__inner {
  width: 100%;
}

.page-hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-text-white);
  margin-top: 12px;
}

/* Long titles (legal documents) at a size that still fits a few lines. */
.page-hero__title--long {
  font-size: clamp(26px, 4.5vw, 56px);
  line-height: 1;
  max-width: 1100px;
}

.page-hero .breadcrumbs {
  padding-top: 0;
  color: rgba(255, 255, 255, 0.7);
}

.page-hero .breadcrumbs a:hover {
  color: var(--color-text-white);
}

/* Same header without a photo: title and breadcrumbs on the page background. */
.page-hero--plain {
  min-height: 0;
  padding-block: 0;
  overflow: visible;
}

/* First thing under the header (the search row used to give this gap) */
main > .page-hero--plain:first-child {
  padding-top: 32px;
}

main > .container:first-child > .breadcrumbs:first-child {
  padding-top: 32px;
}

.page-hero--plain::after {
  content: none;
}

.page-hero--plain .page-hero__title {
  color: var(--color-text-light);
}

.page-hero--plain .breadcrumbs {
  color: var(--color-text-muted);
}

.page-hero--plain .breadcrumbs a:hover {
  color: var(--color-text-light);
}

/* ==========================================================================
   Glow card — lifts on hover while a tinted glow spreads from the corner.
   Set --glow-color (border, accents) and --glow-tint (the glow) per card.
   Used by the marketplace cards and the wholesale stats.
   ========================================================================== */
.glow-card {
  --glow-color: var(--color-accent);
  --glow-tint: rgba(233, 105, 18, 0.3);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    120% 120% at 100% 0%,
    var(--glow-tint) 0%,
    transparent 62%
  );
  opacity: 0.7;
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.glow-card:hover,
.glow-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--glow-color);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.glow-card:hover::before,
.glow-card:focus-visible::before {
  opacity: 1;
  transform: scale(1.4) translate(-8%, 8%);
}

@media (prefers-reduced-motion: reduce) {
  .glow-card,
  .glow-card::before {
    transition: none;
  }

  .glow-card:hover,
  .glow-card:hover::before {
    transform: none;
  }
}

/* ==========================================================================
   Marketplace cards (OZON / Wildberries) — on the "Где купить" page and
   in the retail modal on every page
   ========================================================================== */
/* hover lift and glow come from the shared .glow-card */
.market-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 28px;
}

/* Phones: the cards stack, so the fixed height only adds an empty gap
   between the caption and the link. */
@media (max-width: 767px) {
  .market-card {
    min-height: 0;
    padding: 24px;
  }
}

.market-card--ozon {
  --glow-color: #005bff;
  --glow-tint: rgba(0, 91, 255, 0.35);
}

.market-card--wb {
  --glow-color: #cb11ab;
  --glow-tint: rgba(203, 17, 171, 0.32);
}

.market-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.market-card__logo img {
  display: block;
  height: 26px;
  width: auto;
}

.market-card__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--glow-color);
  transition: transform 0.35s ease;
}

.market-card:hover .market-card__icon {
  transform: translateY(-3px) rotate(-6deg);
}

.market-card__caption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 240px;
}

.market-card__action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
  font-size: 15px;
  font-weight: 500;
}

.market-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.market-card__arrow svg {
  width: 16px;
  height: 16px;
}

.market-card:hover .market-card__arrow {
  background: var(--glow-color);
  border-color: var(--glow-color);
  color: var(--color-text-white);
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .market-card__icon,
  .market-card__arrow {
    transition: none;
  }

  .market-card:hover .market-card__icon,
  .market-card:hover .market-card__arrow {
    transform: none;
  }
}

/* ==========================================================================
   Facts row — big figure, dotted rule, title and explanation.
   Shared by the homepage advantages and the wholesale "in numbers" block.
   ========================================================================== */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

/* each item spans three shared rows, so the dotted rules and titles line
   up across the row even when one value wraps */
.facts > li {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}

/* space between rows of items (mobile/tablet: 2 per row) */
.facts > li:nth-child(n + 3) {
  margin-top: 40px;
}

.facts__value {
  align-self: end;
  padding-bottom: 20px;
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  /* a longer value wraps instead of running into the next column */
  overflow-wrap: anywhere;
  /* dotted rule under the figure */
  background: radial-gradient(
      circle,
      var(--color-text-muted) 1px,
      transparent 1.3px
    )
    left bottom / 6px 3px repeat-x;
}

.facts__title {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.facts__text {
  max-width: 280px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (min-width: 1200px) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 40px;
  }

  .facts > li:nth-child(n + 3) {
    margin-top: 0;
  }

  .facts__text {
    font-size: 14px;
  }
}

/* ==========================================================================
   Photo placeholder (used until real photography is wired up)
   ========================================================================== */
.photo-placeholder {
  position: relative;
  background: repeating-linear-gradient(
    135deg,
    #1a1a1a,
    #1a1a1a 18px,
    #212121 18px,
    #212121 36px
  );
}

.photo-placeholder::before {
  content: "Фото";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted-2);
}

/* ==========================================================================
   Media split — text card beside a photo (wholesale terms, about history)
   ========================================================================== */
.media-split {
  display: grid;
  gap: 12px;
  margin-top: 80px;
}

.media-split__card {
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  border-radius: 24px;
  background: var(--color-bg-elevated);
}

.media-split__title {
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.media-split__text {
  max-width: 520px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.media-split__card .btn {
  margin-top: 16px;
  padding: 18px 40px;
  font-size: 16px;
}

/* the text sets the height; the photo fills whatever that is */
.media-split__photo {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 280px;
  border-radius: 24px;
}

.media-split__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1200px) {
  .media-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 110px;
  }

  .media-split__card {
    justify-content: center;
    padding: 48px 56px;
  }

  .media-split__card .btn {
    align-self: flex-start;
    min-width: 280px;
    margin-top: 24px;
  }

  .media-split__photo {
    min-height: 0;
  }
}

/* History carousel inside .media-split__photo */
.story-photo {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-photo__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.story-photo__slide.is-active {
  opacity: 1;
}

.story-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 55%);
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-bg);
  height: var(--header-height);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__logo img {
  height: 22px;
  width: auto;
  aspect-ratio: 134 / 25;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text-dark);
  white-space: nowrap;
}

.site-nav__link img {
  width: 6px;
  height: 4px;
  transition: transform 0.2s ease;
}

.site-nav__link[aria-expanded="true"] img {
  transform: rotate(180deg);
}

.site-header__logo {
  flex-shrink: 0;
}

/* ==========================================================================
   Small nav dropdowns: «Бизнесу», «Помощь», «О компании» (desktop only)
   ========================================================================== */
.site-nav__item--drop {
  position: relative;
}

.nav-drop {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 10;
  min-width: 220px;
  margin-top: 22px;
  padding: 8px;
  border-radius: 0 0 12px 12px;
  background: var(--color-header-bg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
    visibility 0s linear 0.25s;
}

.nav-drop.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
    visibility 0s;
}

.nav-drop__link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--color-text-dark);
  transition: background-color 0.15s ease;
}

.nav-drop__link:hover,
.nav-drop__link:focus-visible {
  background: rgba(19, 19, 19, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .nav-drop,
  .nav-drop.is-open {
    transition: none;
  }
}

/* ==========================================================================
   Catalog mega menu (desktop only)
   ========================================================================== */
.site-nav__item--catalog {
  position: static;
}

.mega-menu {
  display: none;
}

@media (min-width: 1200px) {
  .mega-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
    z-index: 90;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  .mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

body.has-mega-overlay {
  overflow: hidden;
}

.mega-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 8, 8, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s;
}

.mega-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mega-menu__inner {
  padding-block: 44px;
}

.mega-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 32px;
}

.mega-menu__divider {
  height: 1px;
  background: var(--color-border);
  margin-bottom: 32px;
}

/* Three columns: section → subsection → type. Each column shows the
   children of the item hovered (or focused) in the column before it. */
.catmenu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  min-height: 360px;
}

.catmenu__col {
  min-height: 100%;
  padding-inline: 12px;
}

.catmenu__col + .catmenu__col {
  border-left: 1px solid var(--color-border);
}

.catmenu__col--root {
  padding-left: 0;
}

.catmenu__list[hidden] {
  display: none;
}

.catmenu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.25;
  color: var(--color-text-muted);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.catmenu__col--root .catmenu__item {
  font-size: 20px;
  font-weight: 500;
}

.catmenu__item:hover,
.catmenu__item:focus-visible,
.catmenu__item.is-active {
  background: var(--color-bg-elevated);
  color: var(--color-text-light);
}

.catmenu__item.is-active .catmenu__arrow {
  color: var(--color-accent);
}

.catmenu__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.site-header__phone {
  display: none;
  font-size: 14px;
  color: var(--color-text-dark);
  white-space: nowrap;
}

.header-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.header-burger__icon,
.header-burger__icon::before,
.header-burger__icon::after {
  display: block;
  width: 19px;
  height: 2px;
  background: var(--color-text-dark);
  position: relative;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.header-burger__icon::before,
.header-burger__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.header-burger__icon::before {
  top: -6px;
}

.header-burger__icon::after {
  top: 6px;
}

/* ==========================================================================
   Theme toggle
   ========================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-text-dark);
  transition: opacity 0.2s ease;
}

.theme-toggle:hover {
  opacity: 0.7;
}

.theme-toggle__icon {
  display: none;
  width: 19px;
  height: 19px;
}

:root[data-theme-mode="light"] .theme-toggle__icon--light,
:root[data-theme-mode="dark"] .theme-toggle__icon--dark,
:root[data-theme-mode="system"] .theme-toggle__icon--system {
  display: block;
}

@media (min-width: 1200px) {
  .site-nav {
    display: block;
  }

  .site-header__phone {
    display: block;
  }

  .header-burger {
    display: none;
  }
}

/* ==========================================================================
   Header actions: search · theme · «Войти» · order list (on the light header
   surface in both themes). On phones the order list button leaves the
   header and floats in the bottom right corner, as before.
   ========================================================================== */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.header-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--color-text-dark);
  transition: background-color 0.2s ease;
}

.header-icon:hover {
  background: rgba(19, 19, 19, 0.07);
}

.header-icon svg {
  width: 20px;
  height: 20px;
}

.site-header__actions .theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.site-header__actions .theme-toggle:hover {
  opacity: 1;
  background: rgba(19, 19, 19, 0.07);
}

.header-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-dark);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.header-account svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.header-account:hover {
  background: rgba(19, 19, 19, 0.07);
}

.header-account[aria-current="page"] {
  color: var(--color-accent);
}

/* phones: icon only */
.header-account__label {
  display: none;
}

.header-cart .cart-badge {
  top: 2px;
  right: 0;
}

.header-icon:focus-visible,
.header-account:focus-visible,
.site-header__actions .theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .header-cart {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 250;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-white);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  }

  .header-cart:hover {
    background: var(--color-accent);
  }

  .header-cart svg {
    width: 22px;
    height: 22px;
  }

  /* inverted — an accent badge on the accent bubble would disappear */
  .header-cart .cart-badge {
    top: -4px;
    right: -4px;
    background: var(--color-text-white);
    color: var(--color-accent);
  }
}

@media (min-width: 768px) {
  .header-account__label {
    display: inline;
  }
}

@media (min-width: 1200px) {
  .site-header__actions {
    margin-left: 0;
  }
}

/* ==========================================================================
   Search panel — drops from under the header over a dimmed page
   ========================================================================== */
.search-panel {
  position: fixed;
  inset: 0;
  z-index: 320;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.35s;
}

.search-panel.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.search-panel__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.search-panel.is-open .search-panel__overlay {
  opacity: 1;
}

.search-panel__box {
  position: relative;
  padding-block: 20px 22px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.search-panel.is-open .search-panel__box {
  transform: none;
}

.search-panel__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-panel__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}

.search-panel__form input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: none;
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.4vw, 28px);
  color: var(--color-text-light);
  outline: none;
  transition: border-color 0.2s ease;
}

/* one cross is enough — the panel has its own close button */
.search-panel__form input::-webkit-search-cancel-button {
  display: none;
}

.search-panel__form input::placeholder {
  color: var(--color-text-muted);
}

.search-panel__form input:focus {
  border-color: var(--color-accent);
}

.search-panel__form .btn {
  display: none;
}

.search-panel__close {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--color-text-light);
  transition: background-color 0.2s ease;
}

.search-panel__close::before,
.search-panel__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: currentColor;
}

.search-panel__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.search-panel__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.search-panel__close:hover {
  background: var(--color-card-bg);
}

.search-panel__hints {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
}

.search-panel__hints span {
  margin-right: 4px;
  color: var(--color-text-muted);
}

.search-panel__hints a {
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.search-panel__hints a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .search-panel__box {
    padding-block: 28px 30px;
  }

  .search-panel__form {
    gap: 16px;
  }

  .search-panel__form .btn {
    display: inline-flex;
    height: 48px;
    padding-inline: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-panel__box {
    transition: none;
  }
}

/* ==========================================================================
   Mobile nav drawer
   ========================================================================== */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  padding: 20px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  /* stays visible until the slide-out finishes, then drops out of the tab order */
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease;
}

.nav-drawer__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.nav-drawer__close {
  width: 24px;
  height: 24px;
  position: relative;
}

.nav-drawer__close::before,
.nav-drawer__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text-light);
}

.nav-drawer__close::before {
  transform: rotate(45deg);
}

.nav-drawer__close::after {
  transform: rotate(-45deg);
}

/* underlined field with the search button inside it, on the right */
.nav-drawer__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
  transition: border-color 0.2s ease;
}

.nav-drawer__search:focus-within {
  border-color: var(--color-text-light);
}

.nav-drawer__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-text-light);
  font-size: 18px;
  padding-block: 12px;
}

.nav-drawer__search input::placeholder {
  color: var(--color-text-muted);
}

.nav-drawer__search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--color-text-light);
}

.nav-drawer__search button svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   Search typeahead (see main.js `data-search` handling) — dropdown shared
   by the header search panel and the mobile nav-drawer search. Has no
   counterpart in the reference design (it has no live-autocomplete feature
   at all), so it isn't part of the token-for-token port — restored here
   from the pre-redesign stylesheet, same design tokens.
   ========================================================================== */
.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
  padding: 8px;
  z-index: 120;
  max-height: 360px;
  overflow-y: auto;
}

.search-suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-sm);
}

.search-suggest__item:hover,
.search-suggest__item.is-active {
  background: var(--color-card-bg-strong);
}

.search-suggest__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-badge-bg);
}

.search-suggest__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-suggest__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-suggest__name {
  font-size: 14px;
  color: var(--color-text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest__sku {
  font-size: 12px;
  color: var(--color-text-muted);
}

.search-suggest__price {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-light);
  white-space: nowrap;
  display: none;
}

.search-suggest__empty {
  padding: 10px 8px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.search-suggest__more {
  display: block;
  text-align: center;
  padding: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-light);
}

.nav-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 32px;
}

.nav-drawer__link {
  font-family: var(--font-heading);
  font-size: 22px;
}

.nav-drawer__group > summary.nav-drawer__link {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.nav-drawer__group > summary::-webkit-details-marker {
  display: none;
}

.nav-drawer__group > summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-drawer__group[open] > summary::after {
  transform: rotate(-135deg);
}

/* Catalog tree inside the drawer: every level is an accordion, and opens
   with an "all in section" link since the summary itself can't navigate. */
.nav-drawer__tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
}

.nav-drawer__tree ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 8px;
  padding-left: 14px;
  border-left: 1px solid var(--color-border);
}

.nav-drawer__tree a,
.nav-drawer__branch > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 16px;
  color: var(--color-text-muted);
}

.nav-drawer__branch > summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-text-light);
}

.nav-drawer__branch > summary::-webkit-details-marker {
  display: none;
}

.nav-drawer__branch > summary::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-drawer__branch[open] > summary::after {
  transform: rotate(-135deg);
}

.nav-drawer__tree > li > .nav-drawer__branch > summary {
  font-family: var(--font-heading);
  font-size: 18px;
}

.nav-drawer__all {
  color: var(--color-accent) !important;
}

.nav-drawer__foot {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.nav-drawer__foot p + p {
  margin-top: 4px;
}

.nav-drawer__foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 20px;
}

.nav-drawer__foot-row .link-arrow {
  white-space: nowrap;
}

.nav-drawer__foot-row img {
  width: 110px;
  height: auto;
  aspect-ratio: 1715 / 320;
  margin-left: auto;
}

/* ==========================================================================
   KP request modal
   ========================================================================== */
.kp-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
}

.kp-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.kp-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kp-modal.is-open .kp-modal__overlay {
  opacity: 1;
}

.kp-modal__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 800px;
  height: 100%;
  background: var(--color-bg);
  padding: 24px 20px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.kp-modal.is-open .kp-modal__panel {
  transform: translateX(0);
}

.kp-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* no rule under the title: a line here read as an input field */
  margin-bottom: 24px;
}

.kp-modal__title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.kp-modal__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.kp-modal__close {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

.kp-modal__close::before,
.kp-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text-light);
}

.kp-modal__close::before {
  transform: rotate(45deg);
}

.kp-modal__close::after {
  transform: rotate(-45deg);
}

.kp-form {
  display: flex;
  flex-direction: column;
  max-width: 480px;
}

.kp-form__field {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  padding-block: 16px;
}

.kp-form__field input {
  width: 100%;
  background: none;
  border: 0;
  color: var(--color-text-light);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 17px;
}

.kp-form__field input::placeholder {
  color: var(--color-text-muted);
}

.kp-form.was-validated .kp-form__field:has(input:invalid) {
  border-color: var(--color-error);
}

.kp-form.was-validated .kp-form__field:has(input:invalid) input {
  color: var(--color-error);
}

.kp-form.was-validated .kp-form__field:has(input:invalid) input::placeholder {
  color: var(--color-error);
}

.kp-form__field input:focus {
  outline: none;
}

/* Custom select ("Сфера бизнеса", "Что интересует") */
.kp-form__select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  color: var(--color-text-muted);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 17px;
}

.kp-form__field.is-filled .kp-form__select-trigger {
  color: var(--color-text-light);
}

.kp-form__select-icon {
  width: 14px;
  height: 8px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.kp-form__field.is-open .kp-form__select-icon {
  transform: rotate(180deg);
}

.kp-form__select-list {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: none;
}

.kp-form__field.is-open .kp-form__select-list {
  display: block;
}

.kp-form__select-list li {
  padding: 14px 16px;
  font-size: 15px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.kp-form__select-list li:last-child {
  border-bottom: 0;
}

.kp-form__select-list li:hover,
.kp-form__select-list li.is-active {
  color: var(--color-text-light);
  font-weight: 700;
}

/* Multi-select variant ("Действующие каналы продаж") */
.kp-form__select-list li:has(.kp-form__select-option) {
  padding: 0;
}

.kp-form__select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  cursor: pointer;
}

.kp-form__select-option input {
  width: auto;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.kp-form__select-option:has(input:checked) span {
  color: var(--color-text-light);
  font-weight: 700;
}

.kp-form__note {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  padding-block: 20px;
}

.kp-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-top: 20px;
  cursor: pointer;
}

.kp-form__checkbox + .kp-form__checkbox {
  margin-top: 12px;
}

.kp-form__checkbox input {
  margin-top: 3px;
  accent-color: var(--color-accent);
}

.kp-form__checkbox a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kp-form__checkbox a:hover {
  color: var(--color-text-light);
}

/* Not scoped to .kp-form specifically — the same "policy"/"consent"
   checkboxes (and this class) are reused as-is inside .help-form (the
   feedback form on the help page). */
.was-validated .kp-form__checkbox:has(input:invalid) {
  color: var(--color-error);
}

.was-validated .kp-form__checkbox:has(input:invalid) input {
  accent-color: var(--color-error);
  outline: 1px solid var(--color-error);
  outline-offset: 2px;
}

.kp-form__submit {
  width: 100%;
  margin-top: 28px;
  text-transform: uppercase;
}

.kp-form__success {
  display: none;
  padding-top: 32px;
  font-size: 16px;
}

.kp-form__success.is-visible {
  display: block;
}

.kp-form__success .kp-form__submit {
  display: flex;
}

.kp-form.is-hidden {
  display: none;
}

@media (min-width: 768px) {
  .kp-modal__panel {
    padding: 32px 40px 40px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding-block: 60px 0;
  background: var(--color-bg);
}

.site-footer__layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
}

.site-footer__links a:hover {
  color: var(--color-accent);
}

.site-footer__contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Same label → value treatment as the phone/email rows below. */
.site-footer__contact-label {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.site-footer__contact-value {
  font-size: 15px;
  color: var(--color-text-light);
  max-width: 300px;
}

.site-footer__meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
}

.site-footer__meta-item p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--color-text-muted);
}

.site-footer__meta-item a {
  color: var(--color-text-light);
  white-space: nowrap;
}

.site-footer__meta-item a:hover {
  color: var(--color-accent);
}

.site-footer__logo {
  width: 100%;
  padding-block: 20px 30px;
}

.site-footer__logo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1715 / 320;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 40px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.site-footer__legal-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__legal-links a:hover {
  color: var(--color-accent);
}

.site-footer__copyright {
  color: var(--color-text-muted);
}

/* Nav and social links are short enough to share a row even at 320px. */
@media (max-width: 767px) {
  .site-footer__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 16px;
  }

  .site-footer__layout > * {
    grid-column: 1 / -1;
  }

  .site-footer__layout > .site-footer__links {
    grid-column: auto;
  }

  /* Office | warehouse and phone | email follow the same two columns,
     each as label over value. */
  .site-footer__contacts,
  .site-footer__meta-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }

  .site-footer__meta-item p {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
  }
}

@media (min-width: 768px) {
  .site-footer__layout {
    display: grid;
    grid-template-columns: 1fr 160px 160px;
    column-gap: 60px;
    row-gap: 32px;
    align-items: start;
  }

  .site-footer__meta-item {
    align-self: end;
  }

  .site-footer__logo {
    grid-column: 1 / -1;
  }

  .site-footer__legal {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 0;
  }

  .site-footer__copyright {
    text-align: right;
  }
}

@media (min-width: 1200px) {
  .site-footer__layout {
    grid-template-columns: 1fr 300px 300px;
    column-gap: 96px;
  }

  .site-footer__contacts {
    max-width: 320px;
  }
}