/* ---------- ROOT ---------- */
:root {
  /* ---------- Base colors ---------- */
  --color-red: #e13122;
  --color-dark: #0e0c0c;
  --color-dark-soft: #191919;
  --color-white: #ffffff;
  --color-black: #000000;

  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-05: rgba(255, 255, 255, 0.05);

  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-35: rgba(0, 0, 0, 0.35);

  /* ---------- Theme colors ---------- */
  --theme-accent: var(--color-red);

  --theme-page-bg: var(--color-dark-soft);
  --theme-surface-bg: var(--color-dark);

  --theme-text-main: var(--color-white);
  --theme-text-soft: var(--color-white-60);
  --theme-text-muted: var(--color-white-40);
  --theme-text-inverted: var(--color-dark);

  --theme-border-soft: var(--color-white-60);
  --theme-border-muted: var(--color-white-40);
  --theme-border-subtle: var(--color-white-10);

  /* ---------- Layout ---------- */
  --container-max-width: 1728px;
  --container-pad-mobile: 20px;
  --container-pad-tablet: 35px;
  --container-pad-desktop-sm: 72px;
  --container-pad-desktop-md: 100px;
  --container-pad-desktop-lg: 145px;

  /* ---------- Typography ---------- */
  --font-main: "Alumni Sans", sans-serif;

  /*
    Typography scale:
    min = mobile mockup
    mid = 1025px+ custom intermediate
    max = 1400px+ desktop mockup
  */

  --fs-s-min: 14px;
  --fs-s-mid: 15px;
  --fs-s-max: 16px;

  --fs-m-min: 16px;
  --fs-m-mid: 18px;
  --fs-m-max: 21px;

  --fs-l-min: 21px;
  --fs-l-mid: 23px;
  --fs-l-max: 26px;

  --fs-xl-min: 34px;
  --fs-xl-mid: 44px;
  --fs-xl-max: 55px;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1;
  --lh-base: 1.2;
  --lh-body: 1.6;

  --ls-uppercase-min: 0.48px;
  --ls-uppercase-max: 0.63px;

  /* ---------- Header / page offsets ---------- */
  --header-height-mobile: 50px;
  --header-height-desktop: 64px;
  --header-height-compact-mobile: 50px;
  --header-height-compact-desktop: 48px;

  --page-top-offset-mobile: 0;
  --page-top-offset-desktop: var(--header-height-desktop);

  /* ---------- Motion ---------- */
  --duration-main: 0.25s;
  --ease-main: ease;

  --transition-color: color var(--duration-main) var(--ease-main);
  --transition-bg: background-color var(--duration-main) var(--ease-main);
  --transition-border: border-color var(--duration-main) var(--ease-main);
  --transition-opacity: opacity var(--duration-main) var(--ease-main);
  --transition-transform: transform var(--duration-main) var(--ease-main);

  --transition-interactive:
    color var(--duration-main) var(--ease-main),
    background-color var(--duration-main) var(--ease-main),
    border-color var(--duration-main) var(--ease-main),
    opacity var(--duration-main) var(--ease-main);

  /* ---------- Page ---------- */
  --page-bg: var(--theme-page-bg);
  --page-text: var(--theme-text-main);

  /* ---------- Header ---------- */
  --header-bg: var(--theme-surface-bg);
  --header-link-color: var(--theme-text-main);
  --header-link-hover-color: var(--theme-accent);
  --header-account-color: var(--theme-text-muted);
  --header-divider-color: var(--theme-border-soft);

  /* ---------- Footer ---------- */
  --footer-bg: var(--theme-accent);
  --footer-text: var(--theme-text-main);
  --footer-text-soft: var(--theme-text-soft);
  --footer-text-muted: var(--theme-text-muted);
  --footer-link-hover-opacity: 0.7;
  --footer-shadow-color: var(--color-black-30);
  --footer-shadow-color-strong: var(--color-black-35);

  /* ---------- Logo ---------- */
  --logo-color: var(--theme-text-main);
  --logo-hover-color: var(--theme-accent);

  /* ---------- Icon / arrow buttons ---------- */
  --icon-button-size-mobile: 24px;
  --icon-button-size-desktop: 32px;

  --arrow-bg: var(--color-white-05);
  --arrow-bg-hover: var(--color-white);
  --arrow-color: var(--color-white);
  --arrow-color-hover: var(--color-dark);
  --arrow-border: var(--color-white-40);
  --arrow-border-hover: var(--color-white);
}

/* ---------- RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-main);
  font-size: var(--fs-s-min);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  background: var(--page-bg);
  color: var(--page-text);
  -webkit-font-smoothing: antialiased;
}

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

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

address {
  font-style: normal;
}

ul {
  padding: 0;
  list-style: none;
}

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

@media (min-width: 768px) {
  body {
    font-size: var(--fs-s-mid);
  }
}

@media (min-width: 1025px) {
  body {
    font-size: var(--fs-s-max);
  }
}

/* ---------- Text utilities ---------- */

.text-s {
  font-size: var(--fs-s-min);
}

.text-m {
  font-size: var(--fs-m-min);
}

.text-l {
  font-size: var(--fs-l-min);
}

.text-xl {
  font-size: var(--fs-xl-min);
}

.fw-light {
  font-weight: var(--fw-light);
}

.fw-regular {
  font-weight: var(--fw-regular);
}

.fw-medium {
  font-weight: var(--fw-medium);
}

.fw-bold {
  font-weight: var(--fw-bold);
}

.fw-black {
  font-weight: var(--fw-black);
}

.lh-tight {
  line-height: var(--lh-tight);
}

.lh-base {
  line-height: var(--lh-base);
}

.lh-body {
  line-height: var(--lh-body);
}

.text-uppercase {
  text-transform: uppercase;
}

.text-center {
  text-align: center;
}

.ls-uppercase {
  letter-spacing: var(--ls-uppercase-min);
}

@media (min-width: 1025px) {
  .text-xs {
    font-size: var(--fs-xs-mid);
  }

  .text-s {
    font-size: var(--fs-s-mid);
  }

  .text-m {
    font-size: var(--fs-m-mid);
  }

  .text-l {
    font-size: var(--fs-l-mid);
  }

  .text-xl {
    font-size: var(--fs-xl-mid);
  }
}

@media (min-width: 1400px) {
  .text-xs {
    font-size: var(--fs-xs-max);
  }

  .text-s {
    font-size: var(--fs-s-max);
  }

  .text-m {
    font-size: var(--fs-m-max);
  }

  .text-l {
    font-size: var(--fs-l-max);
  }

  .text-xl {
    font-size: var(--fs-xl-max);
  }

  .ls-uppercase {
    letter-spacing: var(--ls-uppercase-max);
  }
}

/* ---------- Text combo utilities ---------- */
.text-upper-m-regular {
  font-size: var(--fs-m-min);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
}

.text-upper-m-medium {
  font-size: var(--fs-m-min);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

.text-upper-m-bold {
  font-size: var(--fs-m-min);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.text-upper-m-black {
  font-size: var(--fs-m-min);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}

.text-upper-l-regular {
  font-size: var(--fs-l-min);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
}

.text-upper-l-medium {
  font-size: var(--fs-l-min);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

.text-upper-l-bold {
  font-size: var(--fs-l-min);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.text-upper-l-black {
  font-size: var(--fs-l-min);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}

.text-upper-xl-regular {
  font-size: var(--fs-xl-min);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
}

.text-upper-xl-medium {
  font-size: var(--fs-xl-min);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

.text-upper-xl-bold {
  font-size: var(--fs-xl-min);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.text-upper-xl-black {
  font-size: var(--fs-xl-min);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}

@media (min-width: 1025px) {
  .text-upper-m-regular,
  .text-upper-m-medium,
  .text-upper-m-bold,
  .text-upper-m-black {
    font-size: var(--fs-m-mid);
  }

  .text-upper-l-regular,
  .text-upper-l-medium,
  .text-upper-l-bold,
  .text-upper-l-black {
    font-size: var(--fs-l-mid);
  }

  .text-upper-xl-regular,
  .text-upper-xl-medium,
  .text-upper-xl-bold,
  .text-upper-xl-black {
    font-size: var(--fs-xl-mid);
  }
}

@media (min-width: 1400px) {
  .text-upper-m-regular,
  .text-upper-m-medium,
  .text-upper-m-bold,
  .text-upper-m-black {
    font-size: var(--fs-m-max);
  }

  .text-upper-l-regular,
  .text-upper-l-medium,
  .text-upper-l-bold,
  .text-upper-l-black {
    font-size: var(--fs-l-max);
  }

  .text-upper-xl-regular,
  .text-upper-xl-medium,
  .text-upper-xl-bold,
  .text-upper-xl-black {
    font-size: var(--fs-xl-max);
  }
}

/* ---------- Reusable ---------- */
.page {
  overflow-x: clip;
  padding-top: var(--page-top-offset-mobile);
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-pad-mobile);
}

.page-location {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;

  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
}

.page-location__text {
  font-size: var(--fs-m-min);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-uppercase-min);
  text-transform: uppercase;
}

.page-location__base,
.page-location__separator {
  color: var(--theme-text-muted);
}

.page-location__current {
  color: var(--theme-text-main);
}

.section-title {
  font-size: var(--fs-xl-min);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  text-align: center;
  color: var(--theme-text-muted);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 20px;

  font-size: var(--fs-m-min);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-uppercase-min);
  text-transform: uppercase;
  text-align: center;

  color: var(--button-color);
  background: var(--button-bg);
  border: 1px solid var(--button-border);

  transition:
    color var(--duration-main) var(--ease-main),
    background var(--duration-main) var(--ease-main),
    border-color var(--duration-main) var(--ease-main),
    opacity var(--duration-main) var(--ease-main);
}

.button:focus-visible {
  color: var(--button-hover-color);
  background: var(--button-hover-bg);
  border-color: var(--button-hover-border);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    color: var(--button-hover-color);
    background: var(--button-hover-bg);
    border-color: var(--button-hover-border);
  }
}

.button--primary {
  --button-color: #ffffff;
  --button-bg: #e13122;
  --button-border: #e13122;

  --button-hover-color: #ffffff;
  --button-hover-bg:
    linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%),
    #e13122;
  --button-hover-border: transparent;
}

.button--light {
  --button-color: #0e0c0c;
  --button-bg: #ffffff;
  --button-border: #ffffff;

  --button-hover-color: #0e0c0c;
  --button-hover-bg:
    linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%),
    #ffffff;
  --button-hover-border: transparent;
}

.button--dark-red {
  --button-color: #ffffff;
  --button-bg: #0e0c0c;
  --button-border: #e13122;

  --button-hover-color: #ffffff;
  --button-hover-bg: rgba(225, 49, 34, 0.1);
  --button-hover-border: #e13122;
}

.button--dark-light {
  --button-color: #ffffff;
  --button-bg: #0e0c0c;
  --button-border: #ffffff;

  --button-hover-color: #ffffff;
  --button-hover-bg: rgba(255, 255, 255, 0.1);
  --button-hover-border: #ffffff;
}

.page-head {
  position: relative;
}

.page-head__inner {
  position: relative;
  z-index: 1;
}

.site-logo {
  --logo-color: var(--theme-text-main);
  --logo-hover-color: var(--theme-accent);

  display: inline-block;
  width: 127px;
  aspect-ratio: 129 / 30;
  color: var(--logo-color);
  transition: var(--transition-color);
}

.site-logo:hover,
.site-logo:focus-visible,
.footer__logo-link:hover .site-logo,
.footer__logo-link:focus-visible .site-logo {
  color: var(--logo-hover-color);
  outline: none;
}

.site-logo__image {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask: url("../images/logo.svg") center / contain no-repeat;
  -webkit-mask: url("../images/logo.svg") center / contain no-repeat;
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-pad-tablet);
  }
}

@media (max-width: 1024px) {
  .page {
    padding-top: var(--page-top-offset-mobile);
  }

  .page-head {
    background: var(--header-bg);
  }

  .page-head__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 10px;
  }

  .page-head .page-location {
    margin-top: 0;
    margin-bottom: 20px;
  }

  .page-head__inner {
    z-index: 91;
  }

  .page-head .header__tooth-wrap {
    position: absolute;
    top: auto;
    right: 0;
    bottom: -15px;
    left: 0;
    display: block;
    height: 40px;
    overflow: visible;
    opacity: 1;
    transform: none;
    pointer-events: none;
  }
}

@media (min-width: 1025px) {
  .page {
    padding-top: var(--page-top-offset-desktop);
  }

  .container {
    padding-inline: var(--container-pad-desktop-sm);
  }

  .page-location {
    margin-top: 60px;
    margin-bottom: 30px;
  }

  .page-location__text {
    font-size: var(--fs-m-mid);
  }

  .section-title {
    font-size: var(--fs-xl-mid);
  }
}

@media (min-width: 1400px) {
  .container {
    padding-inline: var(--container-pad-desktop-md);
  }

  .page-location {
    margin-bottom: 40px;
  }

  .page-location__text {
    font-size: var(--fs-m-max);
    letter-spacing: var(--ls-uppercase-max);
  }

  .section-title {
    font-size: var(--fs-xl-max);
  }
}

@media (min-width: 1600px) {
  .container {
    padding-inline: var(--container-pad-desktop-lg);
  }
}

/* ---------- HEADER ---------- */
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
}

.header__wrap {
  position: relative;
}

.header__bar {
  background: var(--header-bg);
}

.header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height-mobile);
  max-width: 1440px;
  margin: 0 auto;
  transition: height var(--duration-main) var(--ease-main);
}

.header__nav {
  display: none;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__nav-link,
.header__account-link {
  font-size: var(--fs-m-mid);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  color: var(--header-link-color);
  text-transform: uppercase;
  transition: var(--transition-color);
}

.header__nav-link:hover,
.header__nav-link:focus-visible,
.header__account-link:hover,
.header__account-link:focus-visible {
  color: var(--header-link-hover-color);
  outline: none;
}

.header__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  --logo-hover-color: var(--theme-accent);
}

.header__mobile-left,
.header__mobile-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header__desktop-actions {
  display: none;
  align-items: center;
  gap: 14px;
}

.header__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size-mobile);
  height: var(--icon-button-size-mobile);
}

.header__icon-button:focus-visible {
  outline: none;
}

.header__icon {
  width: var(--icon-button-size-mobile);
  height: var(--icon-button-size-mobile);
}

@media (max-width: 1024px) {
  .header .container {
    max-width: 100vw;
  }

  .header__inner {
    max-width: 100%;
  }
}

.header__divider {
  display: none;
  width: 1px;
  height: 30px;
  background: var(--header-divider-color);
}

.header__tooth {
  position: relative;
  left: 50%;
  width: 120px;
  height: 40px;
  margin-top: -1px;
  transform: translateX(-50%);
  pointer-events: none;
}

.header__tooth-wrap {
  position: fixed;
  top: 25px;
  right: 0;
  left: 0;
  z-index: 90;
  display: none;
  height: 40px;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-main) var(--ease-main),
    transform var(--duration-main) var(--ease-main),
    top var(--duration-main) var(--ease-main);
}

.header__tooth::before,
.header__tooth::after {
  position: absolute;
  top: 0;
  width: 32px;
  height: 40px;
  content: "";
  background-image: url("../images/tooth-header.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.header__tooth::before {
  left: 0;
}

.header__tooth::after {
  right: 0;
}

.header__spacer {
  display: block;
  height: 65px;
}

.header--compact .header__inner {
  height: 44px;
}

.header--compact + .header__tooth-wrap {
  top: 44px;
  opacity: 0;
  transform: translateY(-12px);
}

@media (max-width: 1024px) {
  .header--compact .header__inner {
    height: var(--header-height-compact-mobile);
  }
}

@media (min-width: 1025px) {
  .header__inner {
    height: var(--header-height-desktop);
  }

  .header__nav {
    display: flex;
  }

  .header__mobile-left,
  .header__menu-button {
    display: none;
  }

  .header__desktop-actions {
    display: flex;
  }

  .header__icon-button,
  .header__icon {
    width: var(--icon-button-size-desktop);
    height: var(--icon-button-size-desktop);
  }

  .header__brand {
    width: 154px;
  }

  .header__divider,
  .header__account-link {
    display: block;
  }

  .header__account-link {
    color: var(--header-account-color);
  }

  .header__tooth-wrap {
    display: block;
    top: var(--header-height-desktop);
    height: 52px;
  }

  .page-head .header__tooth-wrap {
    display: none;
  }

  .header__tooth {
    width: 530px;
    height: 52px;
  }

  .header__tooth::before,
  .header__tooth::after {
    width: 42px;
    height: 52px;
  }

  .header--compact .header__inner {
    height: var(--header-height-compact-desktop);
  }

  .header--compact + .header__tooth-wrap {
    top: var(--header-height-compact-desktop);
    opacity: 0;
    transform: translateY(-18px);
  }

  .header__spacer {
    height: 116px;
  }
}

@media (min-width: 1400px) {
  .header__nav-link,
  .header__account-link {
    font-size: var(--fs-m-max);
  }
}

/* ---------- FOOTER ---------- */
.footer {
  --footer-card-w: 220px;
  --footer-card-h: 333px;
  --footer-card-gap: 16px;
  --footer-arrow-size: 32px;

  position: relative;
  isolation: isolate;
  margin-top: 0;
  padding-top: 48px;
  padding-bottom: 48px;
  background: var(--footer-bg);
  box-shadow: none;
}

.footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 48px;
  content: "";
  pointer-events: none;
  background: var(--footer-bg);
  box-shadow: 0 -10px 10px var(--footer-shadow-color);
}

.footer__tooth {
  position: absolute;
  z-index: 0;
  top: -36px;
  left: 50%;
  width: 213px;
  height: 72px;
  transform: translateX(-50%);
  pointer-events: none;
}

.footer__tooth::before,
.footer__tooth::after {
  content: "";
  position: absolute;
  top: 0;
  width: 56.887px;
  height: 72px;
  background: var(--footer-bg);
  clip-path: polygon(52.14% 0, 100% 100%, 0 100%);
}

.footer__tooth::before {
  left: 0;
}

.footer__tooth::after {
  left: 156.113px;
}

.footer__inner {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.footer__logo-link {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.footer__logo {
  width: 154px;
  --logo-hover-color: var(--footer-text-soft);
}

.footer__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 4px;
}

.footer__column-title {
  margin-bottom: 20px;
  color: var(--footer-text-soft);
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer__nav-link {
  display: block;
  color: var(--footer-text);
  transition: var(--transition-opacity);
}

.footer__nav-link:hover,
.footer__nav-link:focus-visible {
  opacity: var(--footer-link-hover-opacity);
  outline: none;
}

.footer__column {
  min-width: 0;
}

.footer__column--client {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
}

.footer__products {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

.footer__products-title {
  margin-bottom: 16px;
  text-align: center;
  color: var(--footer-text);
}

.footer__products-wrap {
  position: relative;
}

.footer__products-viewport {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.footer__products-list {
  display: flex;
  gap: var(--footer-card-gap);
  width: max-content;
  padding-inline: 0;
  transform: translateX(
    calc(
      (100vw - var(--footer-card-w)) / 2 - var(--footer-card-w) -
        var(--footer-card-gap)
    )
  );
}

.footer__product-card {
  width: var(--footer-card-w);
  flex: 0 0 var(--footer-card-w);
}

.footer__product-link {
  display: block;
  color: inherit;
}

.footer__product-media {
  position: relative;
  width: var(--footer-card-w);
  height: var(--footer-card-h);
  overflow: hidden;
}

.footer__product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer__badges {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__badge {
  padding: 4px 8px;
}

.footer__badge--sale {
  width: fit-content;
  color: var(--theme-text-main);
  background: var(--theme-accent);
}

.footer__badge--new {
  min-width: 50px;
  color: var(--theme-accent);
  background: var(--color-white);
}

.footer__product-content {
  padding-top: 16px;
}

.footer__product-name {
  color: var(--footer-text);
}

.footer__product-price {
  color: var(--footer-text-soft);
}

.footer__products-wrap > .footer__arrow {
  position: absolute;
  top: calc((var(--footer-card-h) - var(--footer-arrow-size)) / 2);
  z-index: 2;
}

.footer__products-wrap > .footer__arrow:first-child {
  left: 0;
}

.footer__products-wrap > .footer__arrow:last-child {
  right: 0;
}

.footer__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--footer-arrow-size);
  height: var(--footer-arrow-size);
  color: var(--arrow-color);
  background: var(--arrow-bg);
  border: 0.5px solid var(--arrow-border);
  backdrop-filter: blur(1px);
  transition: var(--transition-interactive);
}

.footer__arrow:focus-visible {
  color: var(--arrow-color-hover);
  background: var(--arrow-bg-hover);
  border-color: var(--arrow-border-hover);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .footer__arrow:hover {
    color: var(--arrow-color-hover);
    background: var(--arrow-bg-hover);
    border-color: var(--arrow-border-hover);
  }
}

.footer__arrow-icon {
  width: var(--footer-arrow-size);
  height: var(--footer-arrow-size);
}

.footer__divider {
  width: 100%;
  height: 1px;
  margin-top: 32px;
  margin-bottom: 32px;
  background: var(--theme-border-soft);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.footer__legal {
  order: 2;
}

.footer__legal-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.footer__legal-link {
  color: var(--footer-text-soft);
}

.footer__legal-link:focus-visible {
  outline: none;
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.footer__contact-link:focus-visible {
  outline: none;
}

.footer__socials {
  display: flex;
  gap: 16px;
}

.footer__social-link,
.footer__social-icon {
  width: 48px;
  height: 48px;
}

.footer__social-link:focus-visible {
  outline: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .footer {
    --footer-card-w: 164px;
    --footer-card-h: 248px;
    --footer-card-gap: 16px;
    --footer-arrow-size: 32px;
  }

  .footer__body {
    grid-template-columns:
      minmax(0, 1fr)
      calc(var(--footer-card-w) * 2 + var(--footer-card-gap))
      minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .footer__column--catalog {
    justify-self: start;
  }

  .footer__column--client {
    grid-column: auto;
    grid-row: auto;
    justify-self: end;
    margin-left: 0;
    text-align: right;
  }

  .footer__column--client .footer__nav-list {
    align-items: flex-end;
  }

  .footer__column--catalog,
  .footer__column--client {
    width: auto;
  }

  .footer__products {
    grid-column: auto;
    grid-row: auto;
    justify-self: center;
    order: 0;
  }

  .footer__products-title {
    margin-bottom: 20px;
  }

  .footer__products-wrap {
    width: calc(var(--footer-card-w) * 2 + var(--footer-card-gap));
    margin-inline: auto;
  }

  .footer__products-viewport {
    width: calc(var(--footer-card-w) * 2 + var(--footer-card-gap));
    margin-inline: 0;
    overflow: hidden;
  }

  .footer__products-list {
    gap: var(--footer-card-gap);
    transform: none;
  }

  .footer__products-wrap > .footer__arrow {
    top: calc((var(--footer-card-h) - var(--footer-arrow-size)) / 2);
  }

  .footer__products-wrap > .footer__arrow:first-child {
    left: -50px;
  }

  .footer__products-wrap > .footer__arrow:last-child {
    right: -50px;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
  }

  .footer__legal {
    order: 0;
  }

  .footer__legal-list,
  .footer__contacts {
    flex-direction: row;
    gap: 20px;
  }

  .footer__socials {
    gap: 20px;
  }
}

@media (min-width: 1025px) {
  .footer {
    --footer-card-w: 164px;
    --footer-card-h: 248px;
    --footer-card-gap: 20px;
    --footer-arrow-size: 40px;
    padding-top: 50px;
    padding-bottom: 32px;
  }

  .footer__tooth {
    top: -60px;
    width: 747.159px;
    height: 293px;
  }

  .footer__tooth::before,
  .footer__tooth::after {
    width: 233.58px;
    height: 293px;
  }

  .footer__tooth::before {
    left: 0;
  }

  .footer__tooth::after {
    left: 513.579px;
  }

  .footer::before {
    height: 60px;
    box-shadow: 0 -30px 30px var(--footer-shadow-color-strong);
  }

  .footer__logo-link {
    margin-bottom: 50px;
  }

  .footer__body {
    grid-template-columns:
      minmax(130px, 1fr)
      calc(var(--footer-card-w) * 3 + var(--footer-card-gap) * 2)
      minmax(140px, 1fr);
    align-items: start;
    justify-content: space-between;
    gap: 20px;
  }

  .footer__column--catalog,
  .footer__column--client {
    width: auto;
  }

  .footer__column--client {
    grid-column: auto;
    grid-row: auto;
    margin-left: 0;
    text-align: right;
  }

  .footer__column--client .footer__nav-list {
    align-items: flex-end;
  }

  .footer__products {
    grid-column: auto;
    grid-row: auto;
  }

  .footer__products-wrap {
    width: calc(var(--footer-card-w) * 3 + var(--footer-card-gap) * 2);
    margin-inline: auto;
  }

  .footer__products-viewport {
    width: calc(var(--footer-card-w) * 3 + var(--footer-card-gap) * 2);
    margin-inline: auto;
    overflow: hidden;
  }

  .footer__products-list {
    gap: var(--footer-card-gap);
    padding-inline: 0;
    transform: none;
  }

  .footer__badges {
    top: 8px;
    left: 8px;
  }

  .footer__badge {
    min-width: 30px;
    padding: 4px 6px;
  }

  .footer__product-content {
    padding-top: 18px;
  }

  .footer__products-wrap > .footer__arrow:first-child {
    left: -60px;
  }

  .footer__products-wrap > .footer__arrow:last-child {
    right: -60px;
  }

  .footer__divider {
    margin-top: 36px;
    margin-bottom: 36px;
  }

  .footer__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
    text-align: left;
  }

  .footer__legal {
    order: 0;
  }

  .footer__legal-list {
    flex-direction: row;
    gap: 20px;
    align-items: center;
  }

  .footer__contacts {
    flex-direction: row;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
  }
}

@media (min-width: 1400px) {
  .footer {
    --footer-card-w: 177px;
    --footer-card-h: 268px;
    --footer-card-gap: 26px;
    --footer-arrow-size: 64px;
    padding-top: 60px;
    padding-bottom: 32px;
  }

  .footer__logo-link {
    margin-bottom: 60px;
  }

  .footer__body {
    grid-template-columns: minmax(190px, 1fr) 706px minmax(190px, 1fr);
    gap: 40px;
  }

  .footer__products-wrap {
    width: calc(var(--footer-card-w) * 3 + var(--footer-card-gap) * 2);
    margin-inline: auto;
  }

  .footer__products-wrap > .footer__arrow {
    top: calc((var(--footer-card-h) - var(--footer-arrow-size)) / 2);
    flex: none;
  }

  .footer__products-wrap > .footer__arrow:first-child {
    left: -93px;
  }

  .footer__products-wrap > .footer__arrow:last-child {
    right: -93px;
  }

  .footer__products-viewport {
    width: calc(var(--footer-card-w) * 3 + var(--footer-card-gap) * 2);
    margin-inline: 0;
    overflow: visible;
  }

  .footer__product-content {
    padding-top: 20px;
  }

  .footer__divider {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media (min-width: 1600px) {
  .footer__body {
    gap: 60px;
  }
}