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

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

html {
  scroll-behavior: smooth;
  font-family: var(--ff-base);
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  overflow-x: hidden;
  margin: 0;
  background-color: var(--body-bgc);
  color: var(--body-color);
  font-family: var(--ff-base);
  font-size: var(--default-font-size);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

[tabindex='-1']:focus:not(:focus-visible) {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  border: 0;
  border-top: 1px solid;
  color: var(--hr-color, var(--primary-alpha-16));
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 0;
}

ol,
ul,
dl {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

b,
strong {
  font-weight: bold;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

button {
  border-radius: 0;
  cursor: pointer;
}

button:focus {
  outline: 0 none;
}

input,
button,
select,
textarea {
  margin: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

input,
button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role='button'] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[hidden] {
  display: none !important;
}

:root {
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e4e4e7;
  --gray-250: $gray-250;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #141313;
  --primary-25: #fff6f6;
  --primary-50: #fdf5f5;
  --primary-100: #fbdcdc;
  --primary-200: #f6b9b9;
  --primary-300: #f08b8c;
  --primary-400: #e94f51;
  --primary-500: #d32129;
  --primary-600: #b01b23;
  --primary-700: #8d151c;
  --primary-800: #6a0f15;
  --primary-900: #47090e;
  --secondary-50: #fff8ec;
  --secondary-100: #feecd1;
  --secondary-200: #fddfae;
  --secondary-300: #fcd18b;
  --secondary-400: #fac46a;
  --secondary-500: #f49a1a;
  --secondary-600: #c97c15;
  --secondary-700: #9e5e10;
  --secondary-800: #73400b;
  --secondary-900: #482205;
  --error-25: #fff5f5;
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-300: #fca5a5;
  --error-400: #f87171;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-800: #991b1b;
  --error-900: #7f1d1d;
  --warning-25: #fffef0;
  --warning-50: #fefce8;
  --warning-100: #fef9c3;
  --warning-200: #fef08a;
  --warning-300: #fde047;
  --warning-400: #fcd34d;
  --warning-500: #facc15;
  --warning-600: #ca8a04;
  --warning-700: #a16207;
  --warning-800: #854d0e;
  --warning-900: #713f12;
  --info-25: #f5f9ff;
  --info-50: #eff6ff;
  --info-100: #dbeafe;
  --info-200: #bfdbfe;
  --info-300: #93c5fd;
  --info-400: #60a5fa;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;
  --info-800: #1e40af;
  --info-900: #1e3a8a;
  --success-25: #f0fdf4;
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #14532d;
  --primary-alpha-20: rgba(211,33,41,0.2);
  --secondary-alpha-16: rgba(0,160,102,0.16);
  --error-alpha-16: rgba(202,3,3,0.16);
  --error-alpha-48: rgba(202,3,3,0.48);
  --white: #fff;
  --white-alpha-48: rgba(255,255,255,0.48);
  --black: #121314;
  --default-font-size: 16px;
  --ff-base: 'Fira Sans', sans-serif;
  --ff-accent: 'Work Sans', sans-serif;
  --font-weight-base: 400;
  --line-height-base: 1.2;
  --fw-lighter: lighter;
  --fw-thin: 100;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-book: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
  --fw-bolder: bolder;
  --body-color: var(--gray-900);
  --body-bgc: var(--gray-100);
  --gutter: 1.5rem;
  --btn-max-width: 26.25rem;
  --ease-custom-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-transition-main: cubic-bezier(0.11, 0.82, 0.39, 0.92);
  --ease-btn: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-scale: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-scale-hover: ease;
}

.is-menu-open {
  overflow: hidden;
}

.site-main {
  overflow: hidden;
  padding-bottom: 3.75rem;
}

.wrapper {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.fade {
  transition: opacity 0.15s linear;
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

@-moz-keyframes showText {
  0% {
    opacity: 0;
    transform: translateY(140px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes showText {
  0% {
    opacity: 0;
    transform: translateY(140px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-o-keyframes showText {
  0% {
    opacity: 0;
    transform: translateY(140px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes showText {
  0% {
    opacity: 0;
    transform: translateY(140px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes jumping {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes jumping {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

@-o-keyframes jumping {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes jumping {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

@-moz-keyframes upRight {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 70% -70%;
  }

  50.1% {
    translate: -70% 70%;
  }
}

@-webkit-keyframes upRight {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 70% -70%;
  }

  50.1% {
    translate: -70% 70%;
  }
}

@-o-keyframes upRight {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 70% -70%;
  }

  50.1% {
    translate: -70% 70%;
  }
}

@keyframes upRight {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 70% -70%;
  }

  50.1% {
    translate: -70% 70%;
  }
}

@-moz-keyframes upRightLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -70% 70%;
  }

  50.1% {
    translate: 70% -70%;
  }
}

@-webkit-keyframes upRightLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -70% 70%;
  }

  50.1% {
    translate: 70% -70%;
  }
}

@-o-keyframes upRightLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -70% 70%;
  }

  50.1% {
    translate: 70% -70%;
  }
}

@keyframes upRightLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -70% 70%;
  }

  50.1% {
    translate: 70% -70%;
  }
}

@-moz-keyframes linkUpRight {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: 0.9em -0.9em;
  }

  50.1% {
    mask-position: -0.9em 0.9em;
  }
}

@-webkit-keyframes linkUpRight {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: 0.9em -0.9em;
  }

  50.1% {
    mask-position: -0.9em 0.9em;
  }
}

@-o-keyframes linkUpRight {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: 0.9em -0.9em;
  }

  50.1% {
    mask-position: -0.9em 0.9em;
  }
}

@keyframes linkUpRight {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: 0.9em -0.9em;
  }

  50.1% {
    mask-position: -0.9em 0.9em;
  }
}

@-moz-keyframes linkUpRightLeaves {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: -0.9em 0.9em;
  }

  50.1% {
    mask-position: 0.9em -0.9em;
  }
}

@-webkit-keyframes linkUpRightLeaves {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: -0.9em 0.9em;
  }

  50.1% {
    mask-position: 0.9em -0.9em;
  }
}

@-o-keyframes linkUpRightLeaves {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: -0.9em 0.9em;
  }

  50.1% {
    mask-position: 0.9em -0.9em;
  }
}

@keyframes linkUpRightLeaves {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: -0.9em 0.9em;
  }

  50.1% {
    mask-position: 0.9em -0.9em;
  }
}

@-moz-keyframes linkToRight {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: 1em 0;
  }

  50.1% {
    mask-position: -1em 0;
  }
}

@-webkit-keyframes linkToRight {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: 1em 0;
  }

  50.1% {
    mask-position: -1em 0;
  }
}

@-o-keyframes linkToRight {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: 1em 0;
  }

  50.1% {
    mask-position: -1em 0;
  }
}

@keyframes linkToRight {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: 1em 0;
  }

  50.1% {
    mask-position: -1em 0;
  }
}

@-moz-keyframes linkToRightLeaves {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: -1em 0;
  }

  50.1% {
    mask-position: 1em 0;
  }
}

@-webkit-keyframes linkToRightLeaves {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: -1em 0;
  }

  50.1% {
    mask-position: 1em 0;
  }
}

@-o-keyframes linkToRightLeaves {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: -1em 0;
  }

  50.1% {
    mask-position: 1em 0;
  }
}

@keyframes linkToRightLeaves {
  0% {
    mask-position: 0 0;
  }

  50% {
    mask-position: -1em 0;
  }

  50.1% {
    mask-position: 1em 0;
  }
}

@-moz-keyframes toRight {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 90% 0;
  }

  50.1% {
    translate: -90% 0;
  }
}

@-webkit-keyframes toRight {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 90% 0;
  }

  50.1% {
    translate: -90% 0;
  }
}

@-o-keyframes toRight {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 90% 0;
  }

  50.1% {
    translate: -90% 0;
  }
}

@keyframes toRight {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 90% 0;
  }

  50.1% {
    translate: -90% 0;
  }
}

@-moz-keyframes toRightLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -90% 0;
  }

  50.1% {
    translate: 90% 0;
  }
}

@-webkit-keyframes toRightLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -90% 0;
  }

  50.1% {
    translate: 90% 0;
  }
}

@-o-keyframes toRightLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -90% 0;
  }

  50.1% {
    translate: 90% 0;
  }
}

@keyframes toRightLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -90% 0;
  }

  50.1% {
    translate: 90% 0;
  }
}

@-moz-keyframes toLeft {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -90% 0;
  }

  50.1% {
    translate: 90% 0;
  }
}

@-webkit-keyframes toLeft {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -90% 0;
  }

  50.1% {
    translate: 90% 0;
  }
}

@-o-keyframes toLeft {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -90% 0;
  }

  50.1% {
    translate: 90% 0;
  }
}

@keyframes toLeft {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -90% 0;
  }

  50.1% {
    translate: 90% 0;
  }
}

@-moz-keyframes toLeftLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 90% 0;
  }

  50.1% {
    translate: -90% 0;
  }
}

@-webkit-keyframes toLeftLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 90% 0;
  }

  50.1% {
    translate: -90% 0;
  }
}

@-o-keyframes toLeftLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 90% 0;
  }

  50.1% {
    translate: -90% 0;
  }
}

@keyframes toLeftLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 90% 0;
  }

  50.1% {
    translate: -90% 0;
  }
}

@-moz-keyframes toDown {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 90%;
  }

  50.1% {
    translate: 0 -90%;
  }
}

@-webkit-keyframes toDown {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 90%;
  }

  50.1% {
    translate: 0 -90%;
  }
}

@-o-keyframes toDown {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 90%;
  }

  50.1% {
    translate: 0 -90%;
  }
}

@keyframes toDown {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 90%;
  }

  50.1% {
    translate: 0 -90%;
  }
}

@-moz-keyframes toDownLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 -90%;
  }

  50.1% {
    translate: 0 90%;
  }
}

@-webkit-keyframes toDownLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 -90%;
  }

  50.1% {
    translate: 0 90%;
  }
}

@-o-keyframes toDownLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 -90%;
  }

  50.1% {
    translate: 0 90%;
  }
}

@keyframes toDownLeaves {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 -90%;
  }

  50.1% {
    translate: 0 90%;
  }
}

@-moz-keyframes fadeOutInX {
  0% {
    opacity: 1;
    transform: translate(0);
  }

  50% {
    opacity: 0;
    transform: translate(calc(var(--keyframe-direction) * 20px));
  }

  51% {
    opacity: 0;
    transform: translate(calc(var(--keyframe-direction) * -20px));
  }

  to {
    opacity: 1;
    transform: translate(0);
  }
}

@-webkit-keyframes fadeOutInX {
  0% {
    opacity: 1;
    transform: translate(0);
  }

  50% {
    opacity: 0;
    transform: translate(calc(var(--keyframe-direction) * 20px));
  }

  51% {
    opacity: 0;
    transform: translate(calc(var(--keyframe-direction) * -20px));
  }

  to {
    opacity: 1;
    transform: translate(0);
  }
}

@-o-keyframes fadeOutInX {
  0% {
    opacity: 1;
    transform: translate(0);
  }

  50% {
    opacity: 0;
    transform: translate(calc(var(--keyframe-direction) * 20px));
  }

  51% {
    opacity: 0;
    transform: translate(calc(var(--keyframe-direction) * -20px));
  }

  to {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes fadeOutInX {
  0% {
    opacity: 1;
    transform: translate(0);
  }

  50% {
    opacity: 0;
    transform: translate(calc(var(--keyframe-direction) * 20px));
  }

  51% {
    opacity: 0;
    transform: translate(calc(var(--keyframe-direction) * -20px));
  }

  to {
    opacity: 1;
    transform: translate(0);
  }
}

@-moz-keyframes fadeOutInY {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 0;
    transform: translateY(calc(var(--keyframe-direction) * 20px));
  }

  51% {
    opacity: 0;
    transform: translateY(calc(var(--keyframe-direction) * -20px));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes fadeOutInY {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 0;
    transform: translateY(calc(var(--keyframe-direction) * 20px));
  }

  51% {
    opacity: 0;
    transform: translateY(calc(var(--keyframe-direction) * -20px));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@-o-keyframes fadeOutInY {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 0;
    transform: translateY(calc(var(--keyframe-direction) * 20px));
  }

  51% {
    opacity: 0;
    transform: translateY(calc(var(--keyframe-direction) * -20px));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutInY {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 0;
    transform: translateY(calc(var(--keyframe-direction) * 20px));
  }

  51% {
    opacity: 0;
    transform: translateY(calc(var(--keyframe-direction) * -20px));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.u-gap-0 {
  gap: 0;
}

.u-gap-1 {
  gap: 0.25rem;
}

.u-gap-2 {
  gap: 0.5rem;
}

.u-gap-3 {
  gap: 1rem;
}

.u-gap-4 {
  gap: 1.5rem;
}

.u-gap-5 {
  gap: 3rem;
}

.u-d-none {
  display: none;
}

.u-d-block {
  display: block;
}

.u-d-inline {
  display: inline;
}

.u-d-inline-block {
  display: inline-block;
}

.u-d-flex {
  display: flex;
}

.u-d-inline-flex {
  display: inline-flex;
}

.u-d-grid {
  display: grid;
}

.btn-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.25rem, 0.382vw + 1.1562rem, 1.5rem);
  border: 0.25rem solid var(--primary-500);
  border-radius: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
  background-color: var(--primary-600);
}

.btn-all:hover {
  --btn-bg-scale: 0.857;
}

.btn-all .btn-all__button {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--gray-900);
}

.btn-all .btn-all__button:after {
  content: '';
  position: absolute;
  z-index: -1;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--gray-100);
  scale: var(--btn-bg-scale, 1);
  transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-all .btn-all__button svg {
  width: 1.75rem;
  height: 1.75rem;
}

.btn-all .btn-all__label {
  color: var(--gray-100);
  font-family: var(--ff-accent);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-align: center;
  text-transform: uppercase;
}

.btn-all.loading {
  pointer-events: none;
  filter: grayscale(1);
  background-color: var(--primary-500);
  background-image: url("../img/cbs-symbol.svg");
  background-repeat: no-repeat;
  background-size: 120%;
  background-position: center bottom -6.875rem;
  animation: loadpulse 1s ease infinite alternate;
  transition: none;
}

.btn-all.loading .btn-all__button,
.btn-all.loading .btn-all__label {
  transition: none;
  opacity: 0;
}

.btn-hamburger {
  position: relative;
  z-index: 10;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  gap: 1.125rem;
  width: 3rem;
  height: 3rem;
  border: 0.125rem solid var(--primary-400);
  border-radius: 50%;
  background-color: var(--primary-500);
}

.btn-hamburger .btn-hamburger__label {
  display: inline-flex;
  justify-content: flex-end;
  color: var(--gray-100);
  font-family: var(--ff-accent);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.btn-hamburger .btn-hamburger__label span:last-child {
  opacity: 0;
  display: none;
}

.btn-hamburger .btn-hamburger__wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 1.5rem;
  height: 1rem;
}

.btn-hamburger .btn-hamburger__wrap span {
  position: absolute;
  top: 0.4375rem;
  left: 0;
  display: inline-flex;
  width: 0.75rem;
  height: 0.125rem;
  border-radius: 0.125rem 0 0 0.125rem;
  background-color: var(--gray-100);
  transition: background-color 0.3s ease-in-out;
}

.is-menu-open .btn-hamburger .btn-hamburger__wrap span {
  background-color: transparent;
}

.btn-hamburger .btn-hamburger__wrap span:before,
.btn-hamburger .btn-hamburger__wrap span:after {
  content: '';
  position: absolute;
  width: 0.75rem;
  height: 0.125rem;
  background-color: var(--gray-100);
  transition-duration: 0.5s;
}

.btn-hamburger .btn-hamburger__wrap span:before {
  top: -0.4375rem;
}

.btn-hamburger .btn-hamburger__wrap span:after {
  top: 0.4375rem;
}

.btn-hamburger .btn-hamburger__wrap span:first-child:before,
.btn-hamburger .btn-hamburger__wrap span:first-child:after {
  border-radius: 0.125rem 0 0 0.125rem;
}

.is-menu-open .btn-hamburger .btn-hamburger__wrap span:first-child:before {
  transform: rotateZ(45deg) translate(1px, 1px) scaleX(1.4);
}

.is-menu-open .btn-hamburger .btn-hamburger__wrap span:first-child:after {
  transform: rotateZ(-45deg) translate(1px, -1px) scaleX(1.4);
}

.btn-hamburger .btn-hamburger__wrap span:last-child {
  left: 0.75rem;
  border-radius: 0 0.125rem 0.125rem 0;
}

.btn-hamburger .btn-hamburger__wrap span:last-child:before,
.btn-hamburger .btn-hamburger__wrap span:last-child:after {
  left: 0;
  border-radius: 0 0.125rem 0.125rem 0;
}

.is-menu-open .btn-hamburger .btn-hamburger__wrap span:last-child:before {
  transform: rotateZ(-45deg) translate(-1px, 1px) scaleX(1.4);
}

.is-menu-open .btn-hamburger .btn-hamburger__wrap span:last-child:after {
  transform: rotateZ(45deg) translate(-1px, -1px) scaleX(1.4);
}

.btn-social {
  display: grid;
  align-items: center;
  justify-content: center;
}

.btn-social svg {
  justify-self: center;
  width: 1.25rem;
  height: 1.25rem;
  grid-column: 1/-1;
  grid-row: 1/-1;
}

.btn-social:before {
  content: '';
  display: inline-flex;
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  border: 0.0575rem solid var(--primary-400);
  scale: var(--btn-bg-scale, 1);
  transition-duration: 0.4s;
  transition-property: scale;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-social:hover {
  --btn-bg-scale: 0.923;
}

.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--btn-gap, 0.5rem);
  padding: var(--btn-padding, 1rem clamp(1.5rem, 0.7641vw + 1.3123rem, 2rem));
  color: var(--btn-color, var(--gray-900));
  font-family: var(--btn-font-family, var(--ff-accent));
  font-size: var(--btn-font-size, 1rem);
  font-weight: var(--btn-font-weight, var(--fw-medium));
  line-height: var(--btn-line-height, 1.5);
  letter-spacing: -0.06em;
  text-align: center;
  text-transform: uppercase;
  border: none;
  background: none;
}

.btn:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  scale: var(--btn-bg-width-scale, 1) var(--btn-bg-height-scale, 1);
  display: block;
  border: 0.125rem solid var(--btn-border-color, var(--gray-200));
  border-radius: var(--btn-border-radius, 6.25rem);
  background-color: var(--btn-bg, var(--gray-100));
  transition-duration: 0.4s;
  transition-property: scale;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn .btn__label {
  display: inline-flex;
  padding-inline: 0.5rem;
}

.btn svg {
  width: 1.5em;
  height: 1.5em;
}

.btn svg path {
  fill: currentColor;
}

.btn:hover {
  --btn-bg-width-scale: 0.956;
  --btn-bg-height-scale: 0.857;
}

.btn.btn--primary {
  --btn-bg: var(--primary-500);
  --btn-color: var(--gray-100);
  --btn-border-color: var(--primary-400);
}

.btn.btn--neutral {
  --btn-bg: var(--gray-100);
  --btn-color: var(--primary-600);
  --btn-border-color: var(--gray-100);
}

.btn.btn--tag {
  --btn-padding: clamp(0.25rem, 0.382vw + 0.1562rem, 0.5rem) clamp(0.5rem, 0.7641vw + 0.3123rem, 1rem);
  --btn-border-radius: 0.5rem;
}

.btn.btn--add:after {
  border: 0.125rem dashed var(--btn-border-color, var(--gray-300));
}

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

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  color: var(--bl-color, var(--gray-100));
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-decoration: underline;
}

.btn-link:hover {
  --translate: -0.25rem;
}

.btn-link svg {
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  transform: translateX(var(--translate));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: none;
  background: none;
  gap: 0.75rem;
}

.btn-icon:hover {
  --btn-bg-scale: 0.857;
}

.btn-icon .btn-icon__icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
}

.btn-icon .btn-icon__icon:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  scale: var(--btn-bg-scale, 1);
  display: block;
  border: 0.1rem solid var(--btn-border-color, #e1676c);
  border-radius: var(--btn-border-radius, 50%);
  background-color: var(--btn-bg, transparent);
  transition-duration: 0.4s;
  transition-property: scale;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-icon .btn-icon__icon svg {
  width: clamp(1.1875rem, 1.0506vw + 0.9294rem, 1.875rem);
  height: clamp(1.1875rem, 1.0506vw + 0.9294rem, 1.875rem);
}

.btn-icon .btn-icon__icon svg path {
  fill: var(--btn-icon-color, var(--gray-100));
}

.btn-icon .btn-icon__label {
  color: var(--gray-100);
  font-size: 0.75rem;
  letter-spacing: 0;
  line-height: 1.5;
}

.btn-edit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 0.8125rem;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

.btn-edit:hover {
  --btn-edit-bg-scale: 0.857;
}

.btn-edit .btn-edit__icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  color: var(--gray-100);
}

.btn-edit .btn-edit__icon:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  scale: var(--btn-edit-bg-scale, 1);
  display: inline-block;
  border: none;
  border-radius: 50%;
  background-color: var(--primary-500);
  transition-duration: 0.4s;
  transition-property: scale;
  transition-timing-function: var(--ease-btn);
}

.btn-edit .btn-edit__icon svg {
  width: 100%;
  height: 100%;
}

.btn-edit .btn-edit__label {
  color: var(--btn-edit-color, var(--gray-500));
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.btn-delete {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

.btn-delete:hover {
  --btn-delete-bg-scale: 0.857;
}

.btn-delete .btn-delete__icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  color: var(--gray-100);
}

.btn-delete .btn-delete__icon:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  scale: var(--btn-delete-bg-scale, 1);
  display: inline-block;
  border: none;
  border-radius: 50%;
  background-color: var(--primary-500);
  transition-duration: 0.4s;
  transition-property: scale;
  transition-timing-function: var(--ease-btn);
}

.btn-delete .btn-delete__icon svg {
  width: 100%;
  height: 100%;
}

.btn-delete.btn-delete--sm {
  scale: 1;
}

.title {
  color: var(--title-color, var(--gray-900));
  font-family: var(--title-ff, var(--ff-accent));
  font-size: var(--title-fz, clamp(2.25rem, 1.9102vw + 1.7808rem, 3.5rem));
  font-weight: var(--title-fw, var(--fw-semibold));
  letter-spacing: -0.055em;
  line-height: var(--title-lh, 1);
  text-align: var(--text-align, left);
  text-transform: uppercase;
  text-wrap: var(--title-wp, balance);
}

.title em {
  font-family: var(--ff-accent);
  font-size: 1em;
  font-style: normal;
  font-weight: var(--fw-normal);
  line-height: 1.0625;
  letter-spacing: 0;
}

.subtitle {
  color: var(--title-color, var(--gray-900));
  font-family: var(--title-ff, var(--ff-accent));
  font-size: var(--title-fz, clamp(2.25rem, 1.9102vw + 1.7808rem, 3.5rem));
  font-weight: var(--title-fw, var(--fw-semibold));
  letter-spacing: -0.055em;
  line-height: var(--title-lh, 1);
  text-align: var(--text-align, left);
  text-transform: uppercase;
  text-wrap: var(--title-wp, balance);
  --title-fz: 1.25rem;
  --title-lh: 1.5;
}

.subtitle em {
  font-family: var(--ff-accent);
  font-size: 1em;
  font-style: normal;
  font-weight: var(--fw-normal);
  line-height: 1.0625;
  letter-spacing: 0;
}

.u-align-top {
  align-items: flex-start;
}

.u-align-middle {
  align-items: center;
}

.u-align-bottom {
  align-items: flex-end;
}

.u-justify-start {
  justify-content: flex-start;
}

.u-justify-center {
  justify-content: center;
}

.u-justify-end {
  justify-content: flex-end;
}

.u-justify-between {
  justify-content: space-between;
}

.u-justify-around {
  justify-content: space-around;
}

.u-justify-evenly {
  justify-content: space-evenly;
}

.u-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-footer {
  --editor-color: var(--gray-100);
  position: relative;
}

.site-footer:before {
  content: '';
  display: block;
  aspect-ratio: 1440/95;
}

.site-footer:after {
  content: '';
  position: absolute;
  top: 0.0625rem;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440/95;
  background-image: url("../img/footer-top.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 101%;
}

.site-footer .site-footer__inner {
  padding-block: 5.625rem 3.75rem;
  background-color: var(--primary-600);
}

.site-footer .site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}

.site-footer .site-footer__about {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 0.7641vw + 1.3123rem, 2rem);
}

.site-footer .site-footer__brand {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: clamp(10.3125rem, 4.0115vw + 9.3272rem, 12.9375rem);
  height: clamp(3rem, 1.1461vw + 2.7185rem, 3.75rem);
}

.site-footer .site-footer__brand svg {
  width: 100%;
  height: 100%;
}

.site-footer .site-footer__text {
  color: var(--gray-100);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.site-footer .site-footer__nav {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.8125rem, 0.2865vw + 0.7421rem, 1rem);
}

.site-footer .site-footer__title {
  display: flex;
  color: var(--gray-100);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.site-footer .site-footer__menu {
  display: flex;
  flex-direction: column;
  gap: 0.09375rem;
}

.site-footer .site-footer__menu a {
  color: var(--gray-100);
  font-family: var(--ff-accent);
  font-size: clamp(1.25rem, 0.382vw + 1.1562rem, 1.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1.333333333333333;
  letter-spacing: -0.1em;
  text-transform: uppercase;
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-footer .site-footer__menu a:hover {
  opacity: 0.6;
}

.site-footer .site-footer__social {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer .site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.25rem 1rem;
}

.site-footer .site-footer__brandline {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-footer .site-footer__copy {
  color: var(--gray-100);
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.571428571428571;
}

.site-footer .site-footer__company {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  width: 10.875rem;
  height: 1.375rem;
}

.site-footer .site-footer__company img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
}

.site-footer .site-footer__legal {
  padding-bottom: 0.25rem;
}

.site-footer .site-footer__legal-menu {
  display: flex;
}

.site-footer .site-footer__legal-menu .menu-item:not(:last-child):after {
  content: '·';
  padding-inline: 0.5rem;
  color: var(--gray-100);
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.571428571428571;
}

.site-footer .site-footer__legal-menu a {
  color: var(--gray-100);
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.571428571428571;
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-footer .site-footer__legal-menu a:hover {
  opacity: 0.6;
}

.site-footer .site-footer__credit {
  display: flex;
  align-items: center;
  padding-bottom: 0.25rem;
  color: var(--gray-100);
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.571428571428571;
}

.site-footer .site-footer__credit a {
  display: inline-flex;
  margin-left: 0.5rem;
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-footer .site-footer__credit a:hover {
  opacity: 0.6;
}

.site-footer .site-footer__credit a img {
  width: 3.75rem;
  height: 1.375rem;
}

.site-footer .wrapper {
  display: grid;
  gap: clamp(3rem, 3.0564vw + 2.2493rem, 5rem);
  width: 100%;
}

.main-header {
  position: fixed;
  z-index: 1030;
  width: 100%;
  padding-block: 1.5rem;
  border-radius: 0 0 3rem 3rem;
  font-family: var(--ff-accent);
  transition: transform 0.5s var(--ease-transition-main) 0s, background-color 0.5s ease 0s;
}

.main-header.is-hidden {
  transform: translateY(-100%);
}

.main-header.has-scrolled {
  background-color: var(--primary-500);
  transition-delay: 0s, 0.5s;
}

.main-header.has-scrolled .header-nav {
  opacity: 0;
  transition-delay: 0s;
}

.main-header.has-scrolled .header-drawer {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition-delay: 0.4s;
}

.main-header .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  width: 100%;
  padding-inline: 1.5rem;
}

.main-header .logo {
  z-index: 10;
  display: flex;
  flex: 0 0 auto;
  width: clamp(5.25rem, 2.5788vw + 4.6166rem, 6.9375rem);
  height: clamp(3rem, 1.5282vw + 2.6246rem, 4rem);
}

.header-nav {
  transition: opacity 0.4s ease 0.1s;
}

.header-nav .menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-nav .menu .menu-item.current-menu-item {
  --menu-item-border-color: var(--gray-100);
}

.header-nav .menu a {
  position: relative;
  z-index: 0;
  padding: 1.125rem 2rem;
  color: var(--white);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.header-nav .menu a:before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  scale: var(--btn-bg-width-scale, 1) var(--btn-bg-height-scale, 1);
  display: block;
  border: 0.125rem solid var(--menu-item-border-color, var(--primary-400));
  border-radius: 6.25rem;
  background-color: var(--primary-500);
  transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-nav .menu a:hover {
  --btn-bg-width-scale: 0.97;
  --btn-bg-height-scale: 0.88;
}

.header-drawer {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  transition: opacity 0.4s var(--ease-transition-main);
}

.drawer-nav {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  opacity: 0;
  visibility: hidden;
  background-color: var(--primary-500);
  transform: translate3d(0, 100%, 0);
  transition: all 0.5s cubic-bezier(0.67, 0.04, 0.44, 0.84);
}

.drawer-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.drawer-nav.is-open .drawer-nav__social {
  opacity: 1;
  transition-delay: 0.8s;
}

.drawer-nav.is-open .drawer-menu .menu-item a {
  transform: translate3d(0, 0, 0);
  transition-delay: 0.5s, 0s;
}

.drawer-nav .drawer-nav__social {
  position: absolute;
  bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 0.8s var(--ease-transition-main);
}

.drawer-nav .drawer-nav__title {
  color: var(--gray-100);
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: center;
}

.drawer-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding-inline: 1.5rem;
}

.drawer-menu .menu-item {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.drawer-menu .menu-item a {
  display: inline-flex;
  opacity: 0.6;
  color: var(--gray-100);
  font-family: var(--ff-accent);
  font-size: clamp(2.75rem, 2.6743vw + 2.0931rem, 4.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.08em;
  text-align: center;
  text-transform: uppercase;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.8s var(--ease-transition-main), scale 0.4s var(--ease-btn) 0s;
}

.drawer-menu .menu-item a:hover {
  scale: 0.95;
}

.button-category {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(1rem, 0.5731vw + 0.8592rem, 1.375rem);
  border: none;
  background: none;
}

.button-category:after {
  content: '';
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  scale: var(--btn-bg-width-scale, 1) var(--btn-bg-height-scale, 1);
  border: 0.125rem solid var(--bc-border-color, var(--gray-200));
  border-radius: clamp(0.5rem, 0.7641vw + 0.3123rem, 1rem);
  background-color: var(--bc-bg-color, transparent);
  transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.button-category .button-category__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--bc-icon-size, 1.5rem);
  height: var(--bc-icon-size, 1.5rem);
}

.button-category .button-category__icon svg {
  width: 100%;
  height: 100%;
}

.button-category .button-category__icon svg path {
  fill: var(--bc-icon-color, var(--primary-500));
}

.button-category .button-category__label {
  color: var(--bc-color, var(--gray-900));
  font-family: var(--ff-accent);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  text-align: center;
}

.button-category:hover {
  --btn-bg-width-scale: 0.956;
  --btn-bg-height-scale: 0.857;
}

.button-category.is-active {
  --bc-color: var(--gray-100);
  --bc-bg-color: var(--primary-500);
  --bc-icon-color: var(--gray-100);
  --bc-border-color: var(--primary-400);
  pointer-events: none;
}

.c-collapse {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1rem;
}

.c-collapse .c-collapse__item {
  position: relative;
  height: fit-content;
  padding: clamp(0.625rem, 1.1461vw + 0.3435rem, 1.375rem) clamp(0.8125rem, 0.8596vw + 0.6014rem, 1.375rem);
  overflow: hidden;
  border: 0.125rem solid var(--gray-200);
  border-radius: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.c-collapse .c-collapse__item.hidden {
  display: none;
}

.c-collapse .c-collapse__toggle {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  width: 100%;
  padding: 0;
  border: none;
  color: var(--gray-900);
  font-family: var(--ff-accent);
  font-size: clamp(1.125rem, 0.191vw + 1.0781rem, 1.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: -0.06em;
  text-align: left;
  text-transform: uppercase;
  background: none;
}

.c-collapse .c-collapse__toggle:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
}

.c-collapse .c-collapse__toggle[aria-expanded='true'] .c-collapse__icon:before {
  transform: rotate(90deg);
}

.c-collapse .c-collapse__icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: clamp(1.125rem, 0.9551vw + 0.8904rem, 1.75rem);
  height: clamp(1.5rem, 0.382vw + 1.4062rem, 1.75rem);
}

.c-collapse .c-collapse__icon:before,
.c-collapse .c-collapse__icon:after {
  content: '';
  position: absolute;
  display: inline-flex;
  border-radius: 0.125rem;
  background-color: var(--primary-500);
  transition: 0.4s var(--ease-btn);
}

.c-collapse .c-collapse__icon:before {
  width: 0.125rem;
  height: clamp(0.6875rem, 0.8596vw + 0.4764rem, 1.25rem);
}

.c-collapse .c-collapse__icon:after {
  width: clamp(0.6875rem, 0.8596vw + 0.4764rem, 1.25rem);
  height: 0.125rem;
}

.c-collapse .c-collapse__content {
  padding-top: clamp(0.625rem, 0.382vw + 0.5312rem, 0.875rem);
  color: var(--gray-900);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.card-brand-resource {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 2.2923vw + 0.937rem, 3rem);
  align-items: center;
  padding: 1.375rem;
  border: 0.125rem solid var(--gray-200);
  border-radius: 1rem;
}

.card-brand-resource .card-brand-resource__media {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0.05625rem solid var(--primary-400);
  border-radius: 0.5rem;
  background-color: var(--primary-500);
}

.card-brand-resource .card-brand-resource__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card-brand-resource .card-brand-resource__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-brand-resource .card-brand-resource__title {
  font-family: var(--ff-accent);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.card-brand-resource .card-brand-resource__description {
  max-width: 32.5rem;
  font-weight: var(--fw-normal);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.card-brand-resource .btn {
  justify-self: end;
}

.card-instagram {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  border-radius: 2.5rem;
  aspect-ratio: 1080/1350;
}

.card-instagram:before,
.card-instagram:after {
  content: '';
  position: absolute;
  display: block;
  transition: opacity 0.35s cubic-bezier(0.74, 0.24, 0.06, 0.88);
}

.card-instagram:before {
  inset: 0;
  background-color: rgba(20,19,19,0.72);
  opacity: var(--hover-opacity, 0);
}

.card-instagram:after {
  width: 6.25rem;
  height: 6.25rem;
  opacity: var(--hover-opacity, 0);
  background-image: url("../img/icons/instagram.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition-delay: 0.1s;
}

.card-instagram:hover {
  --hover-opacity: 1;
}

.card-instagram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card-link {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: 0.5rem;
  padding: 1.375rem clamp(2.5rem, 2.5764vw, 2rem);
}

.card-link:hover {
  --btn-bg-width-scale: 0.956;
  --btn-bg-height-scale: 0.9;
}

.card-link:after {
  content: '';
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  scale: var(--btn-bg-width-scale, 1) var(--btn-bg-height-scale, 1);
  border: 0.125rem solid var(--bc-border-color, var(--gray-200));
  border-radius: 1.5rem;
  background-color: var(--bc-bg-color, transparent);
  transition: 0.4s var(--ease-btn);
}

.card-link .card-link__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  width: 2rem;
  height: 2rem;
}

.card-link .card-link__icon svg {
  width: 100%;
  height: 100%;
}

.card-link .card-link__icon svg path {
  fill: var(--primary-500);
}

.card-link .card-link__title {
  color: var(--gray-900);
  font-family: var(--ff-accent);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.card-news {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border-radius: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
  border: 0.25rem solid #e0dfdc;
  aspect-ratio: 389/292;
}

.card-news:hover {
  --image-scale: 1.2;
  --ca-ease: var(--ease-scale);
}

.card-news .card-news__media {
  position: relative;
  z-index: -1;
  grid-column: 1/-1;
  grid-row: 1/-1;
}

.card-news .card-news__media:after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, rgba(20,19,19,0) 50%, #141313 83%);
}

.card-news .card-news__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: var(--image-scale, 1);
  transition: scale 0.4s var(--ca-ease, var(--ease-scale-hover));
}

.card-news .card-news__content {
  position: relative;
  grid-column: 1/-1;
  grid-row: 1/-1;
  padding: 1.25rem;
  align-self: end;
}

.card-news .card-news__title {
  color: var(--gray-100);
  font-family: var(--ff-accent);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.card-product {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 1.1461vw + 1.2185rem, 2.25rem);
  width: 100%;
  height: 100%;
  padding: 2.75rem 2.25rem 2.25rem;
  border: 0.25rem solid var(--primary-400);
  border-radius: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
  color: var(--gray-100);
  background-color: var(--primary-500);
  background-image: url("../img/cbs-symbol.svg");
  background-repeat: no-repeat;
  background-size: 120%;
  background-position: center bottom -6.875rem;
  transition: all 0.3s ease;
}

.card-product:hover {
  --img-scale: 1.1;
  --img-rotation: 10deg;
}

.card-product .card-product__title {
  font-family: var(--ff-accent);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  transition: opacity 0.4s 0.3s ease;
}

.card-product .card-product__media {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  transition: opacity 0.4s 0.4s ease;
}

.card-product .card-product__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--img-scale, 1)) rotate(var(--img-rotation, 0));
  transition: transform 0.4s var(--ease-btn);
}

.card-product.loading {
  pointer-events: none;
  filter: grayscale(1);
  animation: loadpulse 1s ease infinite alternate;
  transition: none;
}

.card-product.loading .card-product__title,
.card-product.loading .card-product__media {
  transition: none;
  opacity: 0;
}

.card-product.inactive:not(.loading) {
  display: none;
}

@-moz-keyframes loadpulse {
  from {
    opacity: 0.75;
  }

  to {
    opacity: 0.45;
  }
}

@-webkit-keyframes loadpulse {
  from {
    opacity: 0.75;
  }

  to {
    opacity: 0.45;
  }
}

@-o-keyframes loadpulse {
  from {
    opacity: 0.75;
  }

  to {
    opacity: 0.45;
  }
}

@keyframes loadpulse {
  from {
    opacity: 0.75;
  }

  to {
    opacity: 0.45;
  }
}

.card-recipe-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.875rem, 0.7641vw + 0.6873rem, 1.375rem) 0;
}

.card-recipe-category:hover {
  --media-scale: 1.1;
}

.card-recipe-category .card-recipe-category__media {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
}

.card-recipe-category .card-recipe-category__media:before {
  content: '';
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 74%;
  aspect-ratio: 187/103;
  background-image: url("../img/bg-cat-recipe.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.card-recipe-category .card-recipe-category__media img {
  width: 75%;
  height: 100%;
  max-width: 100%;
  scale: var(--media-scale, 1);
  transition: scale 0.4s var(--ease-btn);
  aspect-ratio: 1;
}

.card-recipe-category .card-recipe-category__title {
  color: var(--gray-900);
  font-family: var(--ff-accent);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.card-recipe {
  position: relative;
  display: grid;
  grid-template-areas: 'stack';
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  border: 0.25rem solid var(--gray-200);
  border-radius: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
  overflow: hidden;
}

.card-recipe:hover {
  --image-scale: 1.2;
  --cr-ease: var(--ease-scale);
}

.card-recipe .card-recipe__media {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: stack;
  z-index: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 286/380;
}

.card-recipe .card-recipe__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  scale: var(--image-scale, 1);
  transition: scale 0.4s var(--cr-ease, var(--ease-scale-hover));
}

.card-recipe .card-recipe__overlay {
  z-index: 1;
  grid-area: stack;
  display: grid;
  grid-template-rows: 1fr;
  align-items: end;
  padding: 1.25rem 1.25rem;
}

.card-recipe .card-recipe__overlay:before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  opacity: 0.8;
  background: linear-gradient(180deg, rgba(20,19,19,0) 50%, #141313 83%);
}

.card-recipe .card-recipe__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(0.5625rem, 0.6686vw + 0.3983rem, 1rem);
  grid-template-columns: minmax(0, 1fr);
}

.card-recipe .card-recipe__title {
  color: var(--gray-100);
  font-family: var(--ff-accent);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}

.card-recipe .card-recipe__infos {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

.card-recipe .card-recipe__info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-100);
  font-size: clamp(0.75rem, 0.191vw + 0.7031rem, 0.875rem);
  letter-spacing: 0;
  line-height: 1.571428571428571;
}

.card-recipe .card-recipe__info:before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1rem, 0.5731vw + 0.8592rem, 1.375rem);
  height: clamp(1rem, 0.5731vw + 0.8592rem, 1.375rem);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: var(--gray-100);
}

.card-recipe .card-recipe__info--time:before {
  mask-image: url("../img/icons/alarm.svg");
}

.card-recipe .card-recipe__info--difficulty-easy:before,
.card-recipe .card-recipe__info--difficulty-1:before {
  mask-image: url("../img/icons/d-easy.svg");
}

.card-recipe .card-recipe__info--difficulty-medium:before,
.card-recipe .card-recipe__info--difficulty-2:before {
  mask-image: url("../img/icons/d-medium.svg");
}

.card-recipe .card-recipe__info--difficulty-hard:before,
.card-recipe .card-recipe__info--difficulty-3:before {
  mask-image: url("../img/icons/d-hard.svg");
}

.card-related-family {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
  align-items: center;
  width: 100%;
  max-width: 24.375rem;
  padding: clamp(0.875rem, 0.7641vw + 0.6873rem, 1.375rem);
  border: 0.125rem solid var(--btn-border-color, var(--gray-200));
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.4s var(--ease-btn);
}

.card-related-family:hover {
  --btn-translate: -16%;
  --btn-border-color: var(--primary-400);
}

.card-related-family .card-related-family__media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  aspect-ratio: 1;
  padding: 0.5rem;
  border: 0.05625rem solid var(--primary-400);
  border-radius: 0.5625rem;
  overflow: hidden;
  background-color: var(--primary-500);
  background-image: url("../img/cbs-symbol.svg");
  background-repeat: no-repeat;
  background-size: 132%;
  background-position: 0.3125rem -0.375rem;
}

.card-related-family .card-related-family__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-related-family .card-related-family__title {
  color: var(--gray-900);
  font-family: var(--ff-accent);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.card-related-family .card-related-family__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0.1rem solid var(--primary-400);
  background-color: var(--primary-500);
  translate: var(--btn-translate, 150%);
  transition: translate 0.4s var(--ease-btn);
}

.card-related-family .card-related-family__button svg {
  width: 1.625rem;
  height: 1.625rem;
}

.card-related-family .card-related-family__button svg path {
  fill: var(--gray-100);
}

.card-text {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.75rem, 0.382vw + 0.6562rem, 1rem);
}

.card-text .card-text__title {
  color: var(--primary-500);
  font-family: var(--ff-accent);
  font-size: clamp(1.125rem, 0.191vw + 1.0781rem, 1.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.card-timeline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: clamp(0.5rem, 4.0115vw + -0.4853rem, 3.125rem);
}

.card-timeline:before,
.card-timeline:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.5rem;
  display: flex;
  width: 0.25rem;
  height: 100%;
  transform-origin: top center;
  translate: -50% -50%;
}

.card-timeline:before {
  background: var(--line-color, var(--gray-200));
}

.card-timeline:after {
  background-color: var(--primary-500);
  transform: scaleY(var(--progressLine, 0));
}

.card-timeline .card-timeline__dot {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0.5rem;
  z-index: 1;
  translate: -50% -50%;
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--gray-200);
}

.card-timeline .card-timeline__dot:before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  display: var(--dot-before-display, none);
  width: 0.25rem;
  height: 31.25rem;
  background-color: var(--gray-100);
}

.card-timeline .card-timeline__wrap {
  padding: clamp(1.375rem, 0.9551vw + 1.1404rem, 2rem);
  border: 0.125rem solid var(--gray-200);
  border-radius: 1.5rem;
  will-change: transform, opacity;
}

.card-timeline .card-timeline__year {
  margin-bottom: clamp(1.25rem, 1.1461vw + 0.9685rem, 2rem);
  color: var(--primary-500);
  font-family: var(--ff-accent);
  font-size: clamp(2.75rem, 2.6743vw + 2.0931rem, 4.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.card-timeline .card-timeline__title {
  margin-bottom: clamp(0.375rem, 1.7192vw + -0.0473rem, 1.5rem);
  color: var(--gray-900);
  font-family: var(--ff-accent);
  font-size: clamp(1.125rem, 0.191vw + 1.0781rem, 1.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.card-timeline .card-timeline__editor {
  color: var(--gray-700);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.editor {
  color: var(--editor-color, var(--gray-900));
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.editor p {
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.editor p + p {
  margin-top: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.editor p + h2 {
  margin-top: clamp(3rem, 1.1461vw + 2.7185rem, 3.75rem);
}

.editor h2 {
  color: var(--primary-500);
  font-family: var(--ff-accent);
  font-size: clamp(1.5rem, 1.1461vw + 1.2185rem, 2.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.editor h2 + p {
  margin-top: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.editor img {
  margin-block: clamp(3rem, 1.1461vw + 2.7185rem, 3.75rem);
  max-width: 100%;
  border-radius: 1rem;
}

.editor ul,
.editor ol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.editor ul li,
.editor ol li {
  display: list-item;
  align-items: center;
  font-weight: var(--fw-normal);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.editor ul {
  list-style: disc;
  padding-left: 1.25rem;
}

.gallery {
  position: relative;
}

.gallery .gallery__full {
  width: 100%;
  aspect-ratio: 694/475;
  border-radius: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.gallery .gallery__full .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery .gallery__full .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.gallery .gallery__thumbs {
  padding: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem) 1.5rem;
  width: 100%;
}

.gallery .gallery__thumbs .swiper-wrapper {
  justify-content: center;
}

.gallery .gallery__thumbs .swiper-slide {
  overflow: hidden;
  width: clamp(3rem, 3.0564vw + 2.2493rem, 5rem);
  aspect-ratio: 1;
  border-radius: clamp(0.3475rem, 0.233vw + 0.2903rem, 0.5rem);
  border: clamp(0.1737rem, 0.1165vw + 0.1451rem, 0.25rem) solid transparent;
  opacity: 0.64;
  transition: 0.4s ease;
  cursor: pointer;
}

.gallery .gallery__thumbs .swiper-slide:last-child {
  margin-right: 0 !important;
}

.gallery .gallery__thumbs .swiper-slide:hover {
  opacity: 1;
}

.gallery .gallery__thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.gallery .gallery__thumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--secondary-500);
}

.order-by {
  display: flex;
  align-items: center;
}

.order-by:after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  margin-left: -1.5rem;
  mask-image: url("../img/icons/chevron-down.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background-color: var(--gray-900);
}

.order-by .order-by__label {
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.order-by .order-by__select {
  display: flex;
  appearance: none;
  padding: 0 2rem 0 0;
  margin-left: 1rem;
  border: none;
  color: var(--gray-900);
  line-height: 1.5;
  letter-spacing: -0.02em;
  background: none;
}

.pagination-wrap {
  display: flex;
  flex: 1;
  justify-content: center;
}

.pagination-wrap .screen-reader-text {
  display: none;
}

.pagination-wrap > nav,
.pagination-wrap .nav-links {
  display: flex;
  padding: 0;
  gap: clamp(0.5rem, 0.7641vw + 0.3123rem, 1rem);
}

.pagination-wrap .page-numbers {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.25rem;
  color: var(--pg-color, var(--gray-900));
  font-family: var(--ff-accent);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-align: center;
  transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pagination-wrap .page-numbers:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.125rem solid var(--pg-border-color, var(--gray-200));
  background-color: var(--pg-bg-active, transparent);
  scale: var(--btn-bg-scale, 1);
  transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pagination-wrap .page-numbers.prev svg,
.pagination-wrap .page-numbers.next svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pagination-wrap .page-numbers.prev svg path,
.pagination-wrap .page-numbers.next svg path {
  fill: var(--gray-900);
}

.pagination-wrap .page-numbers.current {
  --pg-border-color: var(--primary-400);
  --pg-color: var(--gray-100);
  --pg-bg-active: var(--primary-500);
  pointer-events: none;
}

.pagination-wrap .page-numbers:hover {
  --btn-bg-scale: 0.923;
}

.product-categories {
  --swiper-navigation-sides-offset: 0;
  --swiper-navigation-size: 3rem;
  display: flex;
  align-items: center;
  padding-top: var(--pc-gap-top, 0);
  padding-bottom: var(--pc-gap-bottom, clamp(1.5rem, 2.2923vw + 0.937rem, 3rem));
}

.product-categories.is-locked .swiper-button-prev,
.product-categories.is-locked .swiper-button-next {
  display: none;
}

.product-categories .swiper {
  width: 100%;
}

.product-categories .swiper-slide {
  display: inline-flex;
  height: auto;
  flex: 0 0 auto;
  width: fit-content;
  min-width: 10rem;
}

.product-categories .swiper-button-prev,
.product-categories .swiper-button-next {
  position: relative;
  flex: 0 0 auto;
  margin-top: 0;
  top: 0;
  padding: 0.125rem;
  color: var(--swiper-button-color, var(--gray-100));
}

.product-categories .swiper-button-prev:before,
.product-categories .swiper-button-next:before {
  content: '';
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.1rem solid var(--swiper-button-border-color, var(--primary-400));
  background-color: var(--swiper-button-bg-color, var(--primary-500));
  scale: var(--btn-bg-scale, 1);
  transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-categories .swiper-button-prev:hover,
.product-categories .swiper-button-next:hover {
  --btn-bg-scale: 0.857;
}

.product-categories .swiper-button-prev svg,
.product-categories .swiper-button-next svg {
  width: 1.8125rem;
  height: 1.8125rem;
}

.product-categories .swiper-button-prev.swiper-button-disabled,
.product-categories .swiper-button-next.swiper-button-disabled {
  --swiper-button-border-color: rgba(20,19,19,0.12);
  --swiper-button-bg-color: transparent;
  --swiper-button-color: var(--gray-900);
  opacity: 1;
}

.product-categories .swiper-button-next {
  margin-inline: 2.1875rem 1.125rem;
}

.product-categories .swiper-button-prev {
  margin-inline: 1.125rem 2.1875rem;
}

.social-links .social-links__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-check {
  display: flex;
  flex: 0 0 auto;
  column-gap: 1rem;
}

.form-check .form-check__input {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  appearance: none;
  border: 0.125rem solid var(--input-border-color, var(--gray-200));
  border-radius: var(--form-check-input-border-radius, 0);
  background-color: var(--form-check-bg, var(--gray-100));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  box-shadow: var(--input-box-shadow, );
  transition: var(--input-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
}

.form-check .form-check__input:hover {
  --input-border-color: var(--secondary-500);
  --form-check-bg: var(--secondary-25);
}

.form-check .form-check__input:focus {
  --input-border-color: var(--secondary-500);
  --input-box-shadow: 0 0.0625rem 0.125rem 0 rgba(244,154,26,0.05), 0 0 0 0.25rem rgba(244,154,26,0.16);
}

.form-check .form-check__input:checked,
.form-check .form-check__input:indeterminate {
  --input-border-color: var(--secondary-500);
  --form-check-bg: var(--secondary-500);
  background-image: var(--form-check-bg-img);
}

.form-check .form-check__input:disabled {
  --input-border-color: var(--gray-50);
  --form-check-bg: var(--gray-25);
  pointer-events: none;
  filter: none;
  opacity: 1;
}

.form-check .form-check__input:disabled ~ .form-check__label {
  --input-color: var(--gray-100);
}

.form-check .form-check__input[disabled] ~ .form-check__label,
.form-check .form-check__input:disabled ~ .form-check__label {
  cursor: default;
}

.form-check .form-check__input[type='checkbox'] {
  --form-check-input-border-radius: 0.375rem;
}

.form-check .form-check__input[type='checkbox']:indeterminate {
  --form-check-bg-img: url("../img/minus.svg");
}

.form-check .form-check__input[type='checkbox']:checked {
  --form-check-bg-img: url("../img/icons/check.svg");
}

.form-check .form-check__input[type='checkbox']:disabled {
  --form-check-bg-img: url("../img/icons/check-disabled.svg");
}

.form-check .form-check__input[type='radio'] {
  --form-check-input-border-radius: 50%;
}

.form-check .form-check__label {
  color: var(--input-color, var(--gray-700));
  font-size: var(--input-font-size, 1rem);
  font-size: var(--input-font-size, 1rem);
  font-weight: var(--input-font-weight, normal);
  letter-spacing: var(--input-letter-spacing, -0.02em);
  line-height: var(--input-line-height, 1.5);
}

.form-check .form-check__label a {
  color: var(--input-color, var(--gray-700));
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: text-decoration-style 0.35s;
}

.form-check .form-check__label a:hover {
  text-decoration-style: dotted;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.875rem 0.875rem;
  border: var(--input-border-width, 0.125rem) solid var(--input-border-color, var(--gray-200));
  border-radius: var(--input-border-radius, 0.5rem);
  color: var(--input-color, var(--gray-700));
  font-size: var(--input-font-size, 1rem);
  font-weight: var(--input-font-weight, normal);
  line-height: var(--input-line-height, 1.5);
  letter-spacing: -0.02em;
  box-shadow: var(--input-box-shadow, 0 0.0625rem 0.125rem 0 rgba(10,13,18,0.05));
  background-color: var(--input-bg, var(--gray-100));
  transition: var(--input-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
  appearance: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.form-control::placeholder {
  color: var(--input-placeholder-color, var(--gray-500));
  opacity: 1;
  text-overflow: ellipsis;
}

.form-control:hover {
  --input-border-color: var(--gray-300);
}

.form-control:focus {
  --input-border-color: var(--secondary-500);
  --input-box-shadow: 0 0.0625rem 0.125rem 0 rgba(244,154,26,0.05), 0 0 0 0.25rem rgba(244,154,26,0.16);
}

.form-control:disabled {
  --input-color: var(--gray-500);
  --input-border-color: var(--gray-50);
  --input-bg: var(--gray-25);
  opacity: 1;
}

.form-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  grid-auto-rows: min-content;
  grid-row-gap: 1rem;
}

.form-file {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-file input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 3.5rem;
}

.form-file input:hover + .form-file__wrap {
  --input-border-color: var(--gray-300);
}

.form-file input:focus + .form-file__wrap {
  --input-border-color: var(--secondary-500);
  --input-box-shadow: 0 0.0625rem 0.125rem 0 rgba(244,154,26,0.05), 0 0 0 0.25rem rgba(244,154,26,0.16);
}

.form-file input:disabled + .form-file__wrap {
  --form-file-bg-img: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20C0 31.0457 8.95431 40 20 40C31.0457 40 40 31.0457 40 20C40 8.95431 31.0457 0 20 0C8.95431 0 0 8.95431 0 20Z' fill='%23E5E8EB'/%3E%3Cpath d='M12 25.333V22C12 21.4477 12.4477 21 13 21C13.5523 21 14 21.4477 14 22V25.333C14 25.5311 14.0741 25.7085 14.1865 25.8291C14.2969 25.9473 14.4315 26 14.5557 26H25.4443C25.5685 26 25.7031 25.9473 25.8135 25.8291C25.9259 25.7085 26 25.5311 26 25.333V22C26 21.4477 26.4477 21 27 21C27.5523 21 28 21.4477 28 22V25.333C28 26.0188 27.7463 26.6898 27.2754 27.1943C26.8023 27.7011 26.1452 28 25.4443 28H14.5557C13.8548 28 13.1977 27.7011 12.7246 27.1943C12.2537 26.6898 12 26.0188 12 25.333Z' fill='%23adb3b8'/%3E%3Cpath d='M18.999 21V15.0547C18.4727 15.5275 17.8315 15.9228 17.3457 16.1914C17.0829 16.3367 16.8511 16.4543 16.6836 16.5352C16.5996 16.5757 16.5308 16.6068 16.4824 16.6289C16.4582 16.64 16.4386 16.6491 16.4248 16.6553C16.4182 16.6582 16.4132 16.6613 16.4092 16.6631C16.4071 16.664 16.4047 16.6645 16.4033 16.665L16.4023 16.666C16.4022 16.6661 16.4007 16.6662 16 15.75L15.9629 15.666L16.4004 16.666C15.8944 16.8872 15.3053 16.6563 15.084 16.1504C14.8628 15.6444 15.0937 15.0553 15.5996 14.834L15.6084 14.8291C15.617 14.8253 15.6309 14.819 15.6494 14.8105C15.6866 14.7935 15.7428 14.7675 15.8135 14.7334C15.9552 14.665 16.1545 14.5655 16.3789 14.4414C16.8418 14.1855 17.3561 13.8577 17.7158 13.5205C18.0738 13.1849 18.4202 12.7063 18.6904 12.2764C18.8214 12.0679 18.9269 11.8833 18.999 11.752C19.0349 11.6866 19.0623 11.6347 19.0801 11.6006C19.089 11.5835 19.0957 11.5702 19.0996 11.5625C19.1015 11.5588 19.1029 11.556 19.1035 11.5547L19.1045 11.5537C19.2736 11.2147 19.6201 11.0002 19.999 11C20.3778 11 20.7242 11.214 20.8936 11.5527L20.8984 11.5625C20.9024 11.5703 20.9092 11.5828 20.918 11.5996C20.9358 11.6338 20.9631 11.6856 20.999 11.751C21.0713 11.8824 21.1773 12.0668 21.3086 12.2754C21.5793 12.7054 21.926 13.1847 22.2842 13.5205C22.6439 13.8577 23.1582 14.1855 23.6211 14.4414C23.8455 14.5655 24.0448 14.665 24.1865 14.7334C24.2572 14.7675 24.3134 14.7935 24.3506 14.8105C24.3691 14.819 24.383 14.8253 24.3916 14.8291C24.3958 14.831 24.3988 14.8333 24.4004 14.834L24.4922 14.8799C24.9336 15.1288 25.1233 15.6761 24.916 16.1504C24.6947 16.6563 24.1056 16.8872 23.5996 16.666L24.0371 15.666C24.0252 15.6932 24.0127 15.7211 24 15.75L23.5996 16.666H23.5977L23.5967 16.665C23.5953 16.6645 23.5929 16.664 23.5908 16.6631C23.5868 16.6613 23.5818 16.6582 23.5752 16.6553C23.5614 16.6491 23.5418 16.64 23.5176 16.6289C23.4692 16.6068 23.4004 16.5757 23.3164 16.5352C23.1489 16.4543 22.9171 16.3367 22.6543 16.1914C22.1679 15.9225 21.5258 15.5263 20.999 15.0527V21C20.999 21.5523 20.5513 22 19.999 22C19.4468 21.9999 18.999 21.5522 18.999 21Z' fill='%23adb3b8'/%3E%3C/svg%3E%0A");
  --input-color: var(--gray-500);
  --input-placeholder-color: var(--gray-500);
  --input-border-color: var(--gray-50);
  background-color: var(--gray-25);
}

.form-file .form-file__wrap {
  width: 100%;
  padding: var(--input-padding-y, 0.875rem) var(--form-file-indicator-padding, 3rem) var(--input-padding-y, 0.875rem) var(--input-padding-x, 0.875rem);
  border: var(--input-border-width, 0.125rem) solid var(--input-border-color, var(--gray-200));
  border-radius: var(--input-border-radius, 0.5rem);
  box-shadow: var(--input-box-shadow, 0 0.0625rem 0.125rem 0 rgba(10,13,18,0.05));
  background-color: var(--input-bg, var(--gray-100));
  background-image: var(--form-file-bg-img, url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 17.333V14C4 13.4477 4.44772 13 5 13C5.55228 13 6 13.4477 6 14V17.333C6 17.5311 6.07415 17.7085 6.18652 17.8291C6.29688 17.9473 6.43146 18 6.55566 18H17.4443C17.5685 18 17.7031 17.9473 17.8135 17.8291C17.9259 17.7085 18 17.5311 18 17.333V14C18 13.4477 18.4477 13 19 13C19.5523 13 20 13.4477 20 14V17.333C20 18.0188 19.7463 18.6898 19.2754 19.1943C18.8023 19.7011 18.1452 20 17.4443 20H6.55566C5.85481 20 5.19769 19.7011 4.72461 19.1943C4.2537 18.6898 4 18.0188 4 17.333ZM10.999 13V7.05469C10.4727 7.52748 9.83151 7.92283 9.3457 8.19141C9.08289 8.3367 8.8511 8.45427 8.68359 8.53516C8.59964 8.5757 8.53079 8.60676 8.48242 8.62891C8.45822 8.63999 8.43861 8.6491 8.4248 8.65527C8.41821 8.65822 8.41319 8.66131 8.40918 8.66309C8.40712 8.664 8.40466 8.66445 8.40332 8.66504L8.40234 8.66602H8.40039C7.89443 8.88717 7.30526 8.65633 7.08398 8.15039C6.86292 7.64464 7.09312 7.05547 7.59863 6.83398C7.60022 6.83328 7.6042 6.83098 7.6084 6.8291C7.61697 6.82527 7.63095 6.819 7.64941 6.81055C7.68657 6.79353 7.74282 6.76751 7.81348 6.7334C7.9552 6.66496 8.15453 6.56545 8.37891 6.44141C8.84183 6.18546 9.35613 5.85766 9.71582 5.52051C10.0738 5.18493 10.4202 4.70625 10.6904 4.27637C10.8214 4.06795 10.9269 3.88331 10.999 3.75195C11.0349 3.68662 11.0623 3.63474 11.0801 3.60059C11.089 3.58352 11.0957 3.57025 11.0996 3.5625C11.1015 3.55883 11.1029 3.556 11.1035 3.55469C11.2724 3.21496 11.6196 3.00018 11.999 3C12.3778 2.99995 12.7242 3.21397 12.8936 3.55273L12.8984 3.5625C12.9024 3.57028 12.9092 3.5828 12.918 3.59961C12.9358 3.63379 12.9631 3.68557 12.999 3.75098C13.0713 3.88239 13.1773 4.06681 13.3086 4.27539C13.5793 4.70542 13.926 5.18469 14.2842 5.52051C14.6439 5.85766 15.1582 6.18546 15.6211 6.44141C15.8455 6.56545 16.0448 6.66496 16.1865 6.7334C16.2572 6.76751 16.3134 6.79353 16.3506 6.81055C16.3691 6.819 16.383 6.82527 16.3916 6.8291C16.3958 6.83098 16.3988 6.83328 16.4004 6.83398L16.4922 6.87988C16.9336 7.12885 17.1233 7.67608 16.916 8.15039C16.6947 8.65633 16.1056 8.88717 15.5996 8.66602H15.5977L15.5967 8.66504C15.5953 8.66445 15.5929 8.664 15.5908 8.66309C15.5868 8.66131 15.5818 8.65822 15.5752 8.65527C15.5614 8.6491 15.5418 8.63999 15.5176 8.62891C15.4692 8.60676 15.4004 8.5757 15.3164 8.53516C15.1489 8.45427 14.9171 8.3367 14.6543 8.19141C14.1679 7.92248 13.5258 7.52635 12.999 7.05273V13C12.999 13.5523 12.5513 14 11.999 14C11.4468 13.9999 10.999 13.5522 10.999 13Z' fill='%23717980'/%3E%3C/svg%3E")), var(--form-file-bg-icon, none);
  background-position: var(--form-file-bg-position, right 1rem center);
  background-repeat: no-repeat;
  background-size: var(--form-file-bg-size, 1.5rem);
  transition: var(--input-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
}

.form-file .form-file__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-file .form-file__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--gray-500);
}

.form-filename {
  color: var(--input-placeholder-color, var(--gray-500));
  font-size: var(--input-font-size, 1rem);
  font-weight: var(--input-font-weight, normal);
  line-height: var(--input-line-height, 1.5);
  letter-spacing: var(--input-letter-spacing, -0.02em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form__loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border: 0.125rem solid var(--gray-200);
  border-radius: 6.25rem;
  color: var(--gray-900);
  font-family: var(--ff-accent);
  font-weight: var(--fw-medium);
  letter-spacing: -0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  background-color: var(--gray-100);
}

.form-search {
  --btn-padding: 1rem 3.25rem;
  display: grid;
  gap: 1rem;
}

.form-search .form-field {
  position: relative;
}

.form-search .form-field:before {
  content: '';
  position: absolute;
  z-index: 10;
  left: 1rem;
  top: 1rem;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  mask-image: url("../img/icons/search.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--gray-900);
}

.form-search .form-control {
  padding-left: 3.375rem;
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.875rem var(--form-select-indicator-padding, 2.5rem) 0.875rem var(--input-padding-x, 0.875rem);
  border: var(--input-border-width, 0.125rem) solid var(--input-border-color, var(--gray-200));
  border-radius: var(--input-border-radius, 0.5rem);
  color: var(--input-placeholder-color, var(--gray-500));
  font-size: var(--input-font-size, 1rem);
  font-weight: var(--input-font-weight, normal);
  line-height: var(--input-line-height, 1.5);
  letter-spacing: var(--input-letter-spacing, -0.02em);
  box-shadow: var(--input-box-shadow, 0 0.0625rem 0.125rem 0 rgba(10,13,18,0.05));
  appearance: none;
  background-color: var(--input-bg, var(--gray-100));
  background-image: var(--form-select-bg-img, url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.2929 8.29289C17.6834 7.90237 18.3164 7.90237 18.707 8.29289C19.0975 8.68342 19.0975 9.31643 18.707 9.70696L12.707 15.707C12.3164 16.0975 11.6834 16.0975 11.2929 15.707L5.29289 9.70696C4.90237 9.31643 4.90237 8.68342 5.29289 8.29289C5.68342 7.90237 6.31643 7.90237 6.70696 8.29289L11.9999 13.5859L17.2929 8.29289Z' fill='%23717980'/%3E%3C/svg%3E")), var(--form-select-bg-icon, none);
  background-position: var(--form-select-bg-position, right 0.875rem center);
  background-repeat: no-repeat;
  background-size: var(--form-select-bg-size, 1.5rem);
  transition: var(--input-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
}

.form-select:valid {
  --input-color: var(--gray-700);
}

.form-select:hover {
  --input-border-color: var(--gray-300);
}

.form-select:focus {
  outline: 0;
  --input-border-color: var(--secondary-500);
  --input-box-shadow: 0 0.0625rem 0.125rem 0 rgba(244,154,26,0.05), 0 0 0 0.25rem rgba(244,154,26,0.16);
}

.form-select:disabled {
  --input-color: var(--gray-500);
  --input-border-color: var(--gray-50);
  --input-bg: var(--gray-25);
  --form-select-bg-img: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20C0 31.0457 8.95431 40 20 40C31.0457 40 40 31.0457 40 20C40 8.95431 31.0457 0 20 0C8.95431 0 0 8.95431 0 20Z' fill='%23E5E8EB'/%3E%3Cpath d='M25.2929 16.293C25.6834 15.9024 26.3164 15.9024 26.707 16.293C27.0975 16.6835 27.0975 17.3165 26.707 17.707L20.707 23.707C20.3164 24.0975 19.6834 24.0975 19.2929 23.707L13.2929 17.707C12.9024 17.3165 12.9024 16.6835 13.2929 16.293C13.6834 15.9024 14.3164 15.9024 14.707 16.293L19.9999 21.5859L25.2929 16.293Z' fill='%23adb3b8'/%3E%3C/svg%3E");
  opacity: 1;
}

.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 0 var(--gray-700);
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group:not(:has(>.input-group__icon)) > input:not(:first-child) {
  margin-left: calc(-1 * 2px);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group>:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .form-control,
.input-group > .select-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group .input-group__text {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem;
  color: var(--gray-500);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  border: 0.125rem solid var(--input-border-color, var(--gray-200));
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
  background-color: var(--white);
}

.input-group .input-group__icon {
  position: absolute;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-inline: 1rem;
  pointer-events: none;
}

.input-group .input-group__icon + input {
  padding-left: 3.5rem;
}

.input-group .input-group__icon svg {
  width: var(--input-icon-size, 1.5rem);
  height: var(--input-icon-size, 1.5rem);
  fill: var(--input-icon-color, var(--gray-500));
}

.form-label {
  color: var(--gray-900);
  font-family: var(--ff-accent);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.form-label small {
  font-size: inherit;
  font-weight: var(--fw-normal);
}

.form.form--validated .form-control.is-invalid,
.form.form--validated .form-control:invalid {
  --input-border-color: var(--error-200);
  padding-right: 3.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23db3030'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23db3030' stroke='none'/%3e%3c/svg%3e");
  background-position: right 1rem top 0.875rem;
  background-repeat: no-repeat;
  background-size: 1.5rem;
}

.form.form--validated .form-control.is-invalid:focus,
.form.form--validated .form-control:invalid:focus {
  --input-border-color: var(--error-200);
  --input-box-shadow: 0 0.0625rem 0.125rem 0 rgba(10,13,18,0.05), 0 0 0 0.25rem var(--error-50);
}

.form.form--validated .form-control.is-invalid:focus-visible,
.form.form--validated .form-control:invalid:focus-visible {
  --input-border-color: var(--error-200);
}

.form.form--validated .form-select.is-invalid,
.form.form--validated .form-select:invalid {
  --input-border-color: var(--error-200);
  --form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ca0303'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ca0303' stroke='none'/%3e%3c/svg%3e");
  --form-select-bg-position: right 0.875rem center, right 3rem center;
  --form-select-bg-size: 1.5rem, 1.5rem;
  --form-select-indicator-padding: 3.958333333333333rem;
}

.form.form--validated .form-select.is-invalid:focus,
.form.form--validated .form-select:invalid:focus {
  --input-box-shadow: 0 0.0625rem 0.125rem 0 rgba(10,13,18,0.05), 0 0 0 0.25rem var(--error-50);
}

.form.form--validated .form-file input.is-invalid + .form-file__wrap,
.form.form--validated .form-file input:invalid + .form-file__wrap {
  --input-border-color: var(--error-200);
  --form-file-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ca0303'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ca0303' stroke='none'/%3e%3c/svg%3e");
  --form-file-bg-position: right 1rem center, right 3rem center;
  --form-file-bg-size: 1.5rem, 1.5rem;
  --form-file-indicator-padding: 3.958333333333333rem;
}

.form.form--validated .form-file input.is-invalid:focus + .form-file__wrap,
.form.form--validated .form-file input:invalid:focus + .form-file__wrap {
  --input-border-color: var(--error-200);
  --input-box-shadow: 0 0.0625rem 0.125rem 0 rgba(10,13,18,0.05), 0 0 0 0.25rem var(--error-50);
}

.sac-actions {
  display: flex;
  gap: 1rem;
  grid-column: 1/-1;
  justify-content: var(--sa-justify-content, space-between);
  align-items: center;
}

.sac-product-card {
  display: flex;
  flex-direction: column;
  grid-column: 1/-1;
  gap: 1.3125rem;
  width: 100%;
  padding: 1.25rem 1.375rem 1.375rem;
  border: 0.125rem solid var(--gray-200);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(10,13,18,0.05);
}

.sac-product-card .sac-product-card__header {
  display: flex;
  flex: 1;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.sac-product-card .sac-product-card__header .form-sec-title {
  padding: 0;
}

.sac-product-card .sac-product-card__body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.sac-product-card .sac-product-card__field {
  display: flex;
  flex-direction: column;
}

.sac-product-card .sac-product-card__label {
  font-family: var(--ff-accent);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.sac-product-card .sac-product-card__value {
  color: var(--gray-700);
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.sac-product-data {
  position: relative;
}

.sac-product-data + .sac-product-data {
  margin-top: 0.5rem;
}

.sac-product-data + .sac-product-data:before {
  content: '';
  display: block;
  width: 100%;
  height: 0.125rem;
  background-color: var(--gray-200);
  margin-bottom: 0.75rem;
}

.sac-product-data + .sac-product-data >.btn-delete {
  transform: translateY(2.25rem);
}

.sac-product-data >.btn-delete {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(1.375rem);
}

.sac-steps {
  padding-top: clamp(1.875rem, 2.8653vw + 1.1712rem, 3.75rem);
  padding-bottom: 2.25rem;
}

.sac-steps .wrapper {
  max-width: 56rem;
}

.sac-steps .steps-title-mob {
  padding-top: 3rem;
}

.sac-steps .steps-nav {
  --step: 1;
  --step-size: clamp(2.5rem, 1.5282vw + 2.1246rem, 3.5rem);
  position: relative;
  display: flex;
  justify-content: space-between;
}

.sac-steps .steps-nav li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sac-steps .steps-nav--1 li:nth-child(1) .step {
  --bg-color: var(--primary-500);
  --bd-color: var(--primary-400);
  --tx-color: var(--gray-100);
}

.sac-steps .steps-nav--2 {
  --step: 2;
}

.sac-steps .steps-nav--2 li:not(:last-child) .step {
  --bg-color: var(--primary-500);
  --bd-color: var(--primary-400);
  --tx-color: var(--gray-100);
}

.sac-steps .steps-nav--3 {
  --step: 3;
}

.sac-steps .steps-nav--3 li .step {
  --bg-color: var(--primary-500);
  --bd-color: var(--primary-400);
  --tx-color: var(--gray-100);
}

.sac-steps .steps-nav .step {
  --bg-color: var(--gray-100);
  --bd-color: var(--gray-200);
  --tx-color: var(--gray-900);
  display: flex;
  width: var(--step-size);
  height: var(--step-size);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--bd-color);
  background-color: var(--bg-color);
  font-weight: 500;
  color: var(--tx-color);
  font-size: 1rem;
  line-height: 1;
  transition: all 0.3s 0.3s;
}

.sac-steps .steps-nav:before {
  content: '';
  display: block;
  height: 0.125rem;
  background-image: linear-gradient(to right, var(--primary-500) 50%, var(--gray-200) 50%);
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: calc(100% - (50% * (var(--step) - 1))) 0;
  position: absolute;
  top: calc((var(--step-size) / 2) - 1px);
  left: var(--step-size);
  right: var(--step-size);
  transition: background 0.3s;
  z-index: -1;
}

.sac-steps .steps-nav .title {
  --text-align: center;
  --title-fw: var(--fw-medium);
  --title-fz: 1rem;
  --title-lh: 1.5;
  display: none;
  width: calc(var(--step-size) * 2.5);
  padding-top: 1.5rem;
}

.header-product {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: var(--page-header-min-height, 34rem);
  margin-bottom: 3.75rem;
  overflow: hidden;
  background-color: var(--primary-500);
}

.header-product:after {
  content: '';
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  aspect-ratio: 1440/72;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: url("../img/mask-header.svg");
  background-position: bottom center;
  background-size: 101%;
}

.header-product .wrapper {
  display: grid;
  align-items: center;
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: 100%;
  padding-top: 1.5rem;
}

.header-product .btn-link {
  grid-column: 1/span 2;
  width: 100%;
  align-self: start;
  margin-bottom: clamp(1.5rem, 2.2923vw + 0.937rem, 3rem);
}

.header-product .btn.btn--tag {
  justify-self: start;
  align-self: end;
}

.header-product .header-product__info {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-column: 1/span 2;
  height: 100%;
  padding-top: 1.5rem;
}

.header-product .header-product__media {
  display: grid;
  grid-column: 1/span 2;
  height: 100%;
}

.header-product .header-product__pic {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  aspect-ratio: 1;
  max-height: 30.625rem;
}

.header-product .header-product__pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.header-product .header-product__bg {
  position: relative;
  z-index: -1;
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.header-product .header-product__bg img {
  width: max-content;
  height: 100%;
}

.header-product .header-product__title {
  padding-top: clamp(1rem, 0.382vw + 0.9062rem, 1.25rem);
  color: var(--gray-100);
  font-family: var(--ff-accent);
  font-size: clamp(2.75rem, 2.6743vw + 2.0931rem, 4.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  text-wrap: balance;
  align-self: start;
}

.header-product .header-product__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 3.125rem;
}

.home-about {
  position: relative;
  z-index: 9;
  height: auto;
  padding-block: clamp(21.75rem, 1.1461vw + 21.4685rem, 22.5rem);
  background-color: var(--primary-500);
}

.home-about:before,
.home-about:after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 1.875rem;
  background-repeat: no-repeat;
  background-size: 100%;
}

.home-about:before {
  z-index: 10;
  top: 0;
  background-position: center top;
  background-image: url("../img/home-about-top.svg");
}

.home-about:after {
  z-index: -1;
  bottom: 0;
  background-position: center bottom;
  background-image: url("../img/home-about-bottom.svg");
}

.home-about .wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.home-about .wrapper > img {
  position: absolute;
  z-index: 2;
  display: block;
  border: clamp(0.25rem, 0.382vw + 0.1562rem, 0.5rem) solid var(--secondary-500);
  border-radius: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
  overflow: hidden;
  width: var(--img-width);
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1;
  will-change: transform;
  transform: translateZ(0);
  pointer-events: none;
}

.home-about .wrapper > img:nth-child(1) {
  --img-width: clamp(11.875rem, 25.0239vw + 5.7285rem, 28.25rem);
  top: 7%;
  left: 9%;
}

.home-about .wrapper > img:nth-child(2) {
  --img-width: clamp(8.375rem, 17.9561vw + 3.9645rem, 20.125rem);
  top: 16%;
  left: 55%;
}

.home-about .wrapper > img:nth-child(3) {
  --img-width: clamp(9.75rem, 14.7087vw + 6.1372rem, 19.375rem);
  bottom: 14%;
  left: 9%;
}

.home-about .wrapper > img:nth-child(4) {
  --img-width: clamp(11.5rem, 17.192vw + 7.2772rem, 22.75rem);
  bottom: 8%;
  left: 43%;
}

.home-about .editor {
  --editor-color: var(--gray-100);
  margin-block: 1.5rem clamp(1.5rem, 2.2923vw + 0.937rem, 3rem);
  max-width: 24.375rem;
  text-align: center;
}

.home-about .home-about__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-about .home-about__title img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.home-products {
  position: relative;
  z-index: 10;
  padding-block: clamp(3.75rem, 5.7307vw + 2.3424rem, 7.5rem) 3.75rem;
  background-color: var(--gray-100);
}

.home-products .title {
  margin-bottom: clamp(1.5rem, 2.2923vw + 0.937rem, 3rem);
}

.home-products .home-products__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.home-products .home-products__items .swiper {
  width: 100%;
}

.main-hero {
  --swiper-pagination-bottom: 1.5rem;
  --swiper-pagination-color: var(--white);
  --swiper-pagination-bullet-inactive-color: var(--white);
  --swiper-pagination-bullet-size: clamp(1rem, 1.5282vw + 0.6246rem, 2rem);
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bullet-opacity: 1;
  position: relative;
  z-index: 0;
}

.main-hero:not(.is-only-slide-video) {
  height: calc((var(--vh, 1vh) * 100));
  max-height: clamp(18.5rem, 75.2627vw + 0.0136rem, 67.75rem);
}

.main-hero.is-only-slide-video {
  aspect-ratio: 16/9;
}

.main-hero:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440/26;
  background-image: url("../img/main-hero-bottom.svg");
  background-position: bottom -1px center;
  background-repeat: no-repeat;
  background-size: cover;
}

.main-hero .main-hero__wrap {
  display: flex;
  height: 100%;
}

.main-hero .main-hero__slider {
  flex: 0 0 auto;
  width: 100%;
}

.main-hero .main-hero-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.main-hero .main-hero-slide__pic {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.main-hero .main-hero-slide__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.main-hero .swiper-pagination {
  display: flex;
  justify-content: center;
  gap: clamp(0.5rem, 0.7641vw + 0.3123rem, 1rem);
}

.main-hero iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--gray-900);
}

.nutrition-info {
  padding-block: 3.75rem;
}

.nutrition-info .wrapper {
  display: grid;
}

.nutrition-info .nutrition-info__aside .title {
  margin-bottom: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.nutrition-info .nutrition-info__aside .editor p + p {
  margin-top: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.nutrition-info .nutrition-info__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.nutrition-info .nutrition-info__table-wrap {
  margin: 0;
  padding-bottom: 1.5rem;
}

.nutrition-info .nutrition-info__table-content {
  overflow-x: auto;
}

.nutrition-info .nutrition-info__table-content::-webkit-scrollbar {
  display: none;
}

.nutrition-info table {
  width: 100%;
  border-collapse: collapse;
  color: var(--gray-900);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.nutrition-info table thead th {
  padding: 1rem 0 clamp(1.25rem, 0.7641vw + 1.0623rem, 1.75rem);
  border-top: none;
  border-bottom: 0.25rem solid;
  font-family: var(--ff-accent);
  font-weight: var(--fw-medium);
  letter-spacing: -0.06em;
  text-align: center;
  text-transform: uppercase;
}

.nutrition-info table thead th:first-child {
  text-align: left;
}

.nutrition-info table thead th:not(:first-child) {
  padding-inline: 0.625rem;
}

.nutrition-info table tbody th:last-child td {
  border-bottom-width: 0.125rem;
}

.nutrition-info table tbody td {
  padding: 0.75rem 0;
  border-bottom: 0.0625rem solid;
  color: var(--gray-650);
  text-align: center;
  padding-right: 1rem;
}

.nutrition-info table tbody td:not(:first-child) {
  padding-inline: 0.625rem;
}

.nutrition-info table tbody td:first-child {
  text-align: left;
}

.nutrition-info table tbody td:not(:last-child) {
  border-right: 0.0625rem solid;
}

.nutrition-info .nutrition-info__others {
  padding-block: clamp(1.125rem, 0.5731vw + 0.9842rem, 1.5rem) 1.25rem;
}

.nutrition-info .nutrition-info__others .subtitle {
  margin-bottom: 1.125rem;
}

.page-header {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  margin-bottom: clamp(1.875rem, 2.8653vw + 1.1712rem, 3.75rem);
  overflow: hidden;
  background-color: var(--primary-500);
  background-image: url("../img/cbs-symbol.svg");
  background-position: var(--page-header-bg-position, bottom -107% center);
  background-repeat: no-repeat;
  background-size: 122%;
}

.page-header:after {
  content: '';
  position: absolute;
  bottom: -0.03125rem;
  display: block;
  width: 100%;
  aspect-ratio: 1440/72;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: url("../img/mask-header.svg");
  background-position: bottom center;
  background-size: 125%;
}

.page-header .wrapper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content;
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: 100%;
  gap: 1.5rem;
}

.page-header .btn-link {
  align-self: start;
}

.page-header .page-header__content {
  display: grid;
  margin-bottom: 0;
  grid-template-columns: minmax(0, 1fr);
  height: fit-content;
}

.page-header .page-header__content:has(.page-header__pic) {
  padding-top: 1.5rem;
}

.page-header .page-header__pic {
  display: flex;
}

.page-header .page-header__pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.page-header .page-header__title {
  color: var(--gray-100);
  font-family: var(--ff-accent);
  font-size: clamp(2.75rem, 2.6743vw + 2.0931rem, 4.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  text-wrap: balance;
  align-self: start;
}

.page-header .page-header__title span {
  display: block;
  font-weight: var(--fw-normal);
}

.page-header .page-header__editor {
  color: var(--gray-100);
  line-height: 1.5;
  letter-spacing: -0.02em;
  padding-bottom: 1.5rem;
}

.recipe-categories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.recipe-categories .swiper {
  width: 100%;
}

.recipe-categories .swiper-button-next,
.recipe-categories .swiper-button-prev {
  --swiper-navigation-sides-offset: 0;
  --swiper-navigation-size: 3rem;
  position: relative;
  margin: -1.25rem 1.125rem 0;
  top: 0;
  padding: 0.25rem;
  color: var(--swiper-button-color, var(--gray-100));
}

.recipe-categories .swiper-button-next:hover,
.recipe-categories .swiper-button-prev:hover {
  --btn-bg-scale: 0.857;
}

.recipe-categories .swiper-button-next:before,
.recipe-categories .swiper-button-prev:before {
  content: '';
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.1rem solid var(--swiper-button-border-color, var(--primary-400));
  background-color: var(--swiper-button-bg-color, var(--primary-500));
  scale: var(--btn-bg-scale, 1);
  transition: scale 0.4s var(--ease-btn);
}

.recipe-categories .swiper-button-next svg,
.recipe-categories .swiper-button-prev svg {
  width: 1.875rem;
  height: 1.875rem;
}

.recipe-categories .swiper-button-next.swiper-button-disabled,
.recipe-categories .swiper-button-prev.swiper-button-disabled {
  --swiper-button-border-color: rgba(20,19,19,0.12);
  --swiper-button-bg-color: transparent;
  --swiper-button-color: var(--gray-900);
  opacity: 1;
}

.recipes-search {
  padding-block: 3.75rem;
}

.recipes-search .title {
  max-width: 37.5rem;
  margin-bottom: clamp(1.5rem, 2.2923vw + 0.937rem, 3rem);
}

.recipes-search .form-search {
  margin-bottom: clamp(2.4375rem, 4.68vw + 1.288rem, 5.5rem);
}

.related-family {
  padding-block: 3.75rem;
}

.related-family .title {
  margin-bottom: clamp(1.5rem, 2.2923vw + 0.937rem, 3rem);
}

.related-products {
  padding-block: clamp(3rem, 1.1461vw + 2.7185rem, 3.75rem) 3.75rem;
}

.related-products .wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(1.5rem, 2.2923vw + 0.937rem, 3rem);
}

.related-products .title {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.related-products .related-products__list {
  grid-column: 1/span 2;
  width: 100%;
  overflow: visible;
}

.form-sec {
  padding-block: clamp(1.875rem, 0.7641vw + 1.6873rem, 2.375rem);
}

.form-sec .wrapper {
  max-width: 52.625rem;
}

.section-generic {
  --title-wp: auto;
  padding-block: clamp(1.5rem, 6.3037vw + -0.0484rem, 5.625rem) clamp(3.75rem, 2.8653vw + 3.0462rem, 5.625rem);
}

.section-generic .wrapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5.125rem 1rem;
}

.section-generic .section-generic__media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 1/span 4;
  padding: 0;
  margin: 0;
}

.section-generic .section-generic__media img {
  max-width: 100%;
  height: auto;
}

.section-generic .section-generic__content {
  display: flex;
  flex-direction: column;
  grid-column: 1/span 4;
  gap: 1.5rem;
  justify-content: center;
}

.section-instagram {
  padding-block: 3.75rem;
}

.section-instagram .section-instagram__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.section-instagram .wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 0.7641vw + 1.3123rem, 2rem);
}

.section-instagram .instagram-list {
  width: 100%;
  overflow: visible;
}

.section-instagram .btn {
  justify-self: center;
}

.section-recipes {
  padding-block: 3.75rem;
}

.section-recipes .wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-row-gap: clamp(1.5rem, 0.7641vw + 1.3123rem, 2rem);
}

.section-recipes .title {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.section-recipes .recipes-list {
  grid-column: 1/span 2;
  width: 100%;
  overflow: visible;
}

.section-usage {
  padding-block: 2.5rem clamp(3rem, 1.1461vw + 2.7185rem, 3.75rem);
}

.section-usage .wrapper {
  display: grid;
  row-gap: 2.6875rem;
}

.usage-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  counter-reset: item;
}

.usage-steps .usage-steps__item {
  position: relative;
  display: flex;
  counter-increment: item;
  gap: 5.125rem;
  padding-block: clamp(1.25rem, 0.382vw + 1.1562rem, 1.5rem) 1.5rem;
}

.usage-steps .usage-steps__item:first-child {
  padding-top: 0;
}

.usage-steps .usage-steps__item:after {
  content: '';
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 0.0625rem;
  background-color: var(--gray-200);
}

.usage-steps .usage-steps__item:before {
  content: '0' counter(item);
  color: var(--primary-500);
  font-family: var(--ff-accent);
  font-size: clamp(1.125rem, 0.191vw + 1.0781rem, 1.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  letter-spacing: -0.06em;
}

.usage-steps .usage-steps__body {
  display: grid;
  gap: 1rem;
}

.usage-steps .usage-steps__title {
  color: var(--gray-900);
  font-family: var(--ff-accent);
  font-size: clamp(1.125rem, 0.191vw + 1.0781rem, 1.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.usage-steps .usage-steps__text {
  color: var(--gray-900);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.ca-login {
  --text-align: center;
  --title-fz: clamp(2.75rem, 2.6743vw + 2.0931rem, 4.5rem);
}

.ca-login .form-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  justify-self: center;
  justify-content: center;
  max-width: 24.375rem;
  width: 100%;
  margin-inline: auto;
  padding-top: 3rem;
}

.ca-login .btn {
  margin-top: 1.5rem;
}

.ca-news {
  padding-block: clamp(1.875rem, 2.8653vw + 1.1712rem, 3.75rem) 3.75rem;
}

.ca-news .ca-news__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(1.5rem, 3.4384vw + 0.6554rem, 3.75rem);
}

.ca-news .title {
  margin-bottom: clamp(1.5rem, 2.2923vw + 0.937rem, 3rem);
}

.page-commercial-area-single-news .page-header {
  --btn-border-color: var(--gray-100);
}

.page-commercial-area-single-news .page-header .page-header__bg {
  position: absolute;
  min-height: 34rem;
  height: 100%;
}

.page-commercial-area-single-news .page-header .page-header__bg:after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: radial-gradient(56.66% 43% at 57.66% 50%, rgba(26,25,23,0) 0%, rgba(26,25,23,0.8) 100%);
}

.page-commercial-area-single-news .page-header .page-header__bg img {
  width: 100%;
  object-fit: cover;
}

.page-commercial-area-single-news .page-header .page-header__title {
  grid-column: 1/span 2;
  grid-row: 2;
  align-self: center;
  padding: 0 0 clamp(0.25rem, 6.4947vw + -1.3453rem, 4.5rem);
}

.page-commercial-area-single-news .page-header .page-header__title br {
  display: block;
}

.page-commercial-area-single-news .page-header .wrapper {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
}

.page-commercial-area-single-news .page-header .btn-link {
  margin-top: 1.5rem;
  grid-column: 1;
  grid-row: 1;
}

.page-commercial-area-single-news .page-header .btn-icon {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  margin-top: 1rem;
}

.page-commercial-area-single-news .page-header .btn-icon .btn-icon__label {
  display: none;
}

.ca-entry {
  padding-block: clamp(1.875rem, 2.8653vw + 1.1712rem, 3.75rem);
}

.ca-entry .wrapper {
  max-width: 52.625rem;
}

.ca-entry .btn {
  display: flex;
  margin-inline: auto;
  margin-top: clamp(1.875rem, 2.8653vw + 1.1712rem, 3.75rem);
}

.sac-review {
  padding-top: 1.5625rem;
}

.page-404 {
  padding-block: clamp(7.5rem, 4.9666vw + 6.2801rem, 10.75rem) 3.75rem;
}

.section-404 {
  padding-block: clamp(2.25rem, 2.2923vw + 1.687rem, 3.75rem) 3.75rem;
}

.section-404 .wrapper {
  display: grid;
  justify-content: center;
  gap: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.section-404 h1 {
  justify-self: center;
  font-size: 0;
  display: inline-flex;
  width: clamp(21.5625rem, 42.8844vw + 11.029rem, 49.625rem);
  height: clamp(8.8125rem, 17.765vw + 4.449rem, 20.4375rem);
  margin-bottom: calc(0rem - clamp(6.125rem, 8.787vw + 3.9667rem, 11.875rem));
  background-image: url("../img/404.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.section-404 h2 {
  justify-self: center;
  font-family: var(--ff-accent);
  font-size: clamp(2.75rem, 2.6743vw + 2.0931rem, 4.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.08em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.section-404 .editor {
  justify-self: center;
  max-width: 24.375rem;
  text-align: center;
}

.section-404 .btn {
  justify-self: center;
  margin-top: clamp(0.5rem, 1.5282vw + 0.1246rem, 1.5rem);
}

.page-about .page-header {
  margin-bottom: 3.75rem;
}

.page-about .page-header br {
  display: block !important;
}

.timeline {
  padding-block: 3.75rem 4rem;
}

.timeline .title {
  margin-bottom: clamp(1rem, 1.3372vw + 0.6716rem, 1.875rem);
}

.timeline .card-timeline:first-child {
  --dot-before-display: block;
  --line-color: linear-gradient(0deg, #e4e4e7 50%, rgba(217,217,217,0) 50%);
}

.timeline .card-timeline:first-child .card-timeline__dot:before {
  top: 0;
  transform: translate(-50%, -100%);
}

.timeline .card-timeline:last-child {
  --dot-before-display: block;
  --line-color: linear-gradient(0deg, rgba(217,217,217,0) 50%, #e4e4e7 50%);
}

.timeline .card-timeline:last-child .card-timeline__dot:before {
  bottom: 0;
  transform: translate(-50%, 100%);
}

.timeline .timeline__list {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.section-quality {
  --title-color: var(--gray-100);
  --editor-color: var(--gray-100);
  position: relative;
  padding-block: clamp(6.75rem, 4.9666vw + 5.5301rem, 10rem) 0;
  background-color: var(--primary-500);
  background-image: url("../img/cbs-symbol.svg");
  background-position: 43% -228%;
  background-repeat: no-repeat;
  background-size: 200%;
  overflow: hidden;
}

.section-quality:before,
.section-quality:after {
  content: '';
  position: absolute;
  z-index: 0;
  display: block;
  width: 100%;
  height: 1.75rem;
  background-repeat: no-repeat;
  background-size: 100%;
}

.section-quality:before {
  top: 0;
  background-image: url("../img/home-about-top.svg");
  background-position: center top;
}

.section-quality:after {
  bottom: -0.0625rem;
  background-image: url("../img/home-about-bottom.svg");
  background-position: center bottom;
}

.section-quality .wrapper {
  display: grid;
  gap: clamp(1.5rem, 1.5764vw, 1rem);
}

.section-quality .media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  grid-column: 1/-1;
  height: clamp(17.5rem, 37.7268vw + 8.2333rem, 42.1875rem);
  margin-top: 1.25rem;
}

.section-quality .media img {
  position: absolute;
  bottom: 0;
  left: 50%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.section-quality .media img:nth-child(1),
.section-quality .media img:nth-child(2),
.section-quality .media img:nth-child(3),
.section-quality .media img:nth-child(4),
.section-quality .media img:nth-child(5),
.section-quality .media img:nth-child(6) {
  transform-origin: bottom center;
}

.section-quality .media img:nth-child(1) {
  width: clamp(9.0625rem, 24.9284vw + 2.9395rem, 25.375rem);
  height: clamp(11.875rem, 33.0468vw + 3.7579rem, 33.5rem);
  transform: translate3d(-24%, -18%, 0) rotate(3.84deg);
}

.section-quality .media img:nth-child(2) {
  width: clamp(8.75rem, 24.1643vw + 2.8146rem, 24.5625rem);
  height: clamp(11.75rem, 32.5692vw + 3.7502rem, 33.0625rem);
  transform: translate3d(-85%, -8.5%, 0) rotate(-6.94deg);
}

.section-quality .media img:nth-child(3) {
  width: clamp(3.875rem, 10.6972vw + 1.2475rem, 10.875rem);
  height: clamp(10.25rem, 28.7488vw + 3.1886rem, 29.0625rem);
  transform: translate3d(-224%, 4.6%, 0) rotate(-13.08deg);
}

.section-quality .media img:nth-child(4) {
  width: clamp(5.75rem, 16.1414vw + 1.7853rem, 16.3125rem);
  height: clamp(9.1875rem, 25.5014vw + 2.9237rem, 25.875rem);
  transform: translate3d(-62%, -2%, 0) rotate(-4.62deg);
}

.section-quality .media img:nth-child(5) {
  width: clamp(6.5rem, 18.0516vw + 2.0661rem, 18.3125rem);
  height: clamp(9.75rem, 27.1251vw + 3.0874rem, 27.5rem);
  transform: translate3d(37%, 1%, 0) rotate(11.99deg);
}

.section-quality .media img:nth-child(6) {
  width: clamp(3.8125rem, 10.3152vw + 1.2788rem, 10.5625rem);
  height: clamp(6.0625rem, 16.5234vw + 2.0039rem, 16.875rem);
  transform: translate3d(1%, 4%, 0) rotate(5.68deg);
}

.section-pillars {
  margin-block: 3.75rem;
}

.section-pillars .title {
  width: 100%;
  max-width: 30.625rem;
  margin-bottom: clamp(2.75rem, 0.382vw + 2.6562rem, 3rem);
}

.section-pillars .section-pillars__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2.8125rem;
}

.brand-resources {
  padding-block: clamp(1.875rem, 2.8653vw + 1.1712rem, 3.75rem);
}

.brand-resources .wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.page-commercial-area {
  padding-block: clamp(9.75rem, 7.2588vw + 7.967rem, 14.5rem) 7.5rem;
}

.page-commercial-area-news .page-header .wrapper {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding-block: clamp(1.125rem, 10.6972vw + -1.5025rem, 8.125rem) clamp(4.5rem, 6.8768vw + 2.8109rem, 9rem);
}

.page-commercial-area-news .page-header .btn-link {
  margin-top: 0.375rem;
  grid-column: 1;
  grid-row: 1;
}

.page-commercial-area-news .page-header form {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
}

.page-commercial-area-news .page-header .btn-icon .btn-icon__label {
  display: none;
}

.page-commercial-area-news .page-header .page-header__title {
  grid-column: 1/span 2;
  grid-row: 2;
  align-self: center;
  padding: 0;
}

.page-commercial-area-news .page-header .page-header__title br {
  display: block;
}

.page-commercial-area-news .page-header .btn {
  grid-column: 1/-1;
  grid-row: 3;
  align-self: end;
  justify-self: end;
}

.form-grid {
  display: grid;
  grid-gap: 1.5rem 1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.form-grid .col--1 {
  grid-column: auto/span 1;
}

.form-grid .col--2 {
  grid-column: auto/span 2;
}

.form-grid .col--3 {
  grid-column: auto/span 3;
}

.form-grid .col--4 {
  grid-column: auto/span 4;
}

.form-grid .col--5 {
  grid-column: auto/span 5;
}

.form-grid .col--6 {
  grid-column: auto/span 6;
}

.form-grid .col--7 {
  grid-column: auto/span 7;
}

.form-grid .col--8 {
  grid-column: auto/span 8;
}

.form-grid .col--9 {
  grid-column: auto/span 9;
}

.form-grid .col--10 {
  grid-column: auto/span 10;
}

.form-grid .col--11 {
  grid-column: auto/span 11;
}

.form-grid .col--12 {
  grid-column: auto/span 12;
}

.form-grid .col--wide {
  grid-column: 1/-1;
}

.form-grid .col--new-row {
  grid-column-start: 1 !important;
}

.form-grid .col--jss {
  justify-self: start;
}

.form-grid .col--asc {
  align-self: center;
}

.form-grid .form-sec-title {
  --title-color: var(--primary-500);
  --title-fz: clamp(1.125rem, 0.191vw + 1.0781rem, 1.25rem);
  padding-block: 1.75rem 0.25rem;
  color: var(--title-color, var(--gray-900));
  font-family: var(--title-ff, var(--ff-accent));
  font-size: var(--title-fz, clamp(2.25rem, 1.9102vw + 1.7808rem, 3.5rem));
  font-weight: var(--title-fw, var(--fw-semibold));
  letter-spacing: -0.055em;
  line-height: var(--title-lh, 1);
  text-align: var(--text-align, left);
  text-transform: uppercase;
  text-wrap: var(--title-wp, balance);
}

.form-grid .form-sec-title em {
  font-family: var(--ff-accent);
  font-size: 1em;
  font-style: normal;
  font-weight: var(--fw-normal);
  line-height: 1.0625;
  letter-spacing: 0;
}

.form-grid .btn {
  min-width: 11.625rem;
}

.section-form-sent {
  margin-top: clamp(6rem, 7.2588vw + 4.217rem, 10.75rem);
  padding-block: 3.75rem;
}

.section-form-sent .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.0625rem, 2.1968vw + -0.4771rem, 1.5rem);
}

.section-form-sent .wrapper .icon {
  margin-bottom: 1.5rem;
  width: clamp(3.75rem, 5.7307vw + 2.3424rem, 7.5rem);
  height: clamp(3.75rem, 5.7307vw + 2.3424rem, 7.5rem);
}

.section-form-sent .wrapper .icon svg {
  width: 100%;
  height: 100%;
}

.section-form-sent .wrapper .btn {
  margin-top: 1.5rem;
}

.section-form-sent .wrapper .title {
  --title-fz: clamp(2.75rem, 2.6743vw + 2.0931rem, 4.5rem);
  max-width: 46.25rem;
  text-align: center;
}

.section-form-sent .wrapper .editor {
  max-width: 25rem;
  text-align: center;
}

.locator {
  padding-block: clamp(1.875rem, 2.8653vw + 1.1712rem, 3.75rem);
}

.locator .locator__content {
  width: 100%;
  height: clamp(28.75rem, 13.3715vw + 25.4656rem, 37.5rem);
  border-radius: 1rem;
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.locator .locator__content p,
.locator .locator__content iframe {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
}

.page-privacy-terms .page-header .page-header__title {
  align-self: center;
  padding: 0;
  margin-block: clamp(0.625rem, 1.3372vw + 0.2966rem, 1.5rem) 1.5rem;
}

.privacy-terms {
  padding-block: clamp(1.875rem, 2.8653vw + 1.1712rem, 3.75rem);
}

.privacy-terms .wrapper {
  max-width: 52.5rem;
}

.privacy-terms .editor h2 {
  margin-block: clamp(3rem, 1.1461vw + 2.7185rem, 3.75rem) clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
  color: var(--primary-500);
  font-family: var(--ff-accent);
  font-size: clamp(1.5rem, 1.1461vw + 1.2185rem, 2.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.333333333333333;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.privacy-terms .editor p + p {
  margin-top: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.privacy-terms .editor li + li {
  margin-top: clamp(1rem, 0.7641vw + 0.8123rem, 1.5rem);
}

.privacy-terms .editor ul {
  list-style-type: disc;
  padding-left: 1rem;
}

.privacy-terms .editor ul li {
  padding-left: 0.5rem;
}

.privacy-terms .editor ul li::marker {
  font-size: 1.5rem !important;
  line-height: 1;
}

.categories-and-prodcuts {
  --bc-icon-size: clamp(1.5rem, 0.9551vw + 1.2654rem, 2.125rem);
  --pc-gap-top: clamp(1.875rem, 1.7192vw + 1.4527rem, 3rem);
  --pc-gap-bottom: 3rem;
}

.products-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-block: clamp(1.5rem, 2.2923vw + 0.937rem, 3rem) clamp(2rem, 2.6743vw + 1.3431rem, 3.75rem);
}

.page-products .page-header .page-header__pic {
  justify-content: center;
}

.page-products .page-header .page-header__pic img {
  object-position: bottom center;
}

.page-recipes-results .page-header {
  margin-bottom: 3.75rem;
}

.page-recipes-results .page-header .page-header__title {
  grid-column: 1/-1;
}

.recipes-results {
  padding-block: clamp(0.0063rem, 5.7211vw + -1.399rem, 3.75rem) 3.75rem;
}

.recipes-results .recipes-results__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(1.5rem, 2.2923vw + 0.937rem, 3rem);
}

.recipes-results .recipes-results__grid {
  display: grid;
  gap: 1rem;
}

.recipes-results .pagination-wrap {
  padding-top: clamp(1.5rem, 3.4384vw + 0.6554rem, 3.75rem);
}

.found-results {
  color: var(--gray-900);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.page-vue-sac {
  padding-bottom: clamp(3.75rem, 5.7307vw + 2.3424rem, 7.5rem);
}

.sac-step .wrapper {
  max-width: 52.625rem;
}

.sac-step.sac-step--1 {
  --sa-justify-content: end;
}

.single-recipe {
  padding-block: 3.75rem;
}

.recipe-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  height: fit-content;
  padding: 1rem clamp(1.5rem, 3.8204vw + 0.5616rem, 4rem);
  border-radius: 4.375rem;
  background-color: var(--rm-bg-color, var(--gray-100));
}

.recipe-meta .recipe-meta__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.recipe-meta .recipe-meta__item:before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1rem, 0.5731vw + 0.8592rem, 1.375rem);
  height: clamp(1rem, 0.5731vw + 0.8592rem, 1.375rem);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: var(--primary-500);
}

.recipe-meta .recipe-meta__item--time:before {
  mask-image: url("../img/icons/alarm.svg");
}

.recipe-meta .recipe-meta__item--difficulty-easy:before,
.recipe-meta .recipe-meta__item--difficulty-1:before {
  mask-image: url("../img/icons/d-easy.svg");
}

.recipe-meta .recipe-meta__item--difficulty-medium:before,
.recipe-meta .recipe-meta__item--difficulty-2:before {
  mask-image: url("../img/icons/d-medium.svg");
}

.recipe-meta .recipe-meta__item--difficulty-hard:before,
.recipe-meta .recipe-meta__item--difficulty-3:before {
  mask-image: url("../img/icons/d-hard.svg");
}

.recipe-meta .recipe-meta__item--servings:before {
  mask-image: url("../img/icons/servings.svg");
}

.recipe-main .recipe-main__content h2,
.recipe-main .recipe-main__content h3 {
  font-family: var(--ff-accent);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

.recipe-main .recipe-main__content h2 {
  margin-top: clamp(6.5rem, 6.920299999999999vw, 3.75rem);
  margin-bottom: clamp(1.25rem, 1.1461vw + 0.9685rem, 2rem);
  font-size: clamp(2.25rem, 1.9102vw + 1.7808rem, 3.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.recipe-main .recipe-main__content h3 {
  margin-bottom: clamp(0.75rem, 1.1461vw + 0.4685rem, 1.5rem);
  font-size: clamp(1.125rem, 0.191vw + 1.0781rem, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.06em;
}

.recipe-main .recipe-main__content ul,
.recipe-main .recipe-main__content ol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 1.9102vw + 0.7808rem, 2.5rem);
  padding-left: 0;
}

.recipe-main .recipe-main__content ul li,
.recipe-main .recipe-main__content ol li {
  display: flex;
  align-items: center;
  font-weight: var(--fw-normal);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.recipe-main .recipe-main__content ul li label,
.recipe-main .recipe-main__content ol li label {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.recipe-main .recipe-main__content ul li input,
.recipe-main .recipe-main__content ol li input {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  appearance: none;
  border: 0.125rem solid var(--input-border-color, var(--gray-200));
  border-radius: 0.375rem;
  background-color: var(--form-check-bg, var(--gray-100));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
}

.recipe-main .recipe-main__content ul li input:checked,
.recipe-main .recipe-main__content ol li input:checked,
.recipe-main .recipe-main__content ul li input:indeterminate,
.recipe-main .recipe-main__content ol li input:indeterminate {
  --input-border-color: var(--secondary-500);
  --form-check-bg: var(--secondary-500);
  background-image: url("../img/icons/check.svg");
}

.recipe-main .recipe-main__content ol {
  counter-reset: item;
}

.recipe-main .recipe-main__content ol li {
  position: relative;
  display: flex;
  counter-increment: item;
}

.recipe-main .recipe-main__content ol li::before {
  content: counter(item) '. ';
  position: absolute;
  top: 0;
  opacity: 0.8;
  font-family: var(--ff-base);
  font-size: clamp(1.25rem, 1.1461vw + 0.9685rem, 2rem);
  font-variant-numeric: normal;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.recipe-main .recipe-main__content a {
  display: contents;
  color: var(--primary-500);
  text-decoration: underline;
}

.recipe-products {
  padding-top: 6.25rem;
}

.recipe-products .title {
  margin-bottom: 1.5rem;
}

.recipe-products .recipe-products__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.recipe-summary {
  --text-align: center;
  position: sticky;
  top: 1.5rem;
  height: fit-content;
  text-align: center;
}

.recipe-summary .title {
  margin-bottom: 0.5rem;
}

.recipe-summary .recipe-meta {
  margin-bottom: 2rem;
}

.support-faq {
  padding-block: clamp(1.875rem, 2.8653vw + 1.1712rem, 3.75rem);
}

.support-faq .wrapper {
  display: grid;
  gap: clamp(1.5rem, 1.5764vw, 1rem);
}

.support-contact {
  padding-block: 3.75rem;
}

.support-contact .wrapper {
  display: grid;
  gap: 1rem;
}

.support-contact .editor {
  text-wrap: auto;
}

.support-contact .support-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media only screen and (min-width: 576px) {
  .form-grid .col--sm-1 {
    grid-column: auto/span 1;
  }

  .form-grid .col--sm-2 {
    grid-column: auto/span 2;
  }

  .form-grid .col--sm-3 {
    grid-column: auto/span 3;
  }

  .form-grid .col--sm-4 {
    grid-column: auto/span 4;
  }

  .form-grid .col--sm-5 {
    grid-column: auto/span 5;
  }

  .form-grid .col--sm-6 {
    grid-column: auto/span 6;
  }

  .form-grid .col--sm-7 {
    grid-column: auto/span 7;
  }

  .form-grid .col--sm-8 {
    grid-column: auto/span 8;
  }

  .form-grid .col--sm-9 {
    grid-column: auto/span 9;
  }

  .form-grid .col--sm-10 {
    grid-column: auto/span 10;
  }

  .form-grid .col--sm-11 {
    grid-column: auto/span 11;
  }

  .form-grid .col--sm-12 {
    grid-column: auto/span 12;
  }
}

@media (min-width: 768px) {
  .md\:u-d-none {
    display: none;
  }

  .md\:u-d-block {
    display: block;
  }

  .md\:u-d-inline {
    display: inline;
  }

  .md\:u-d-inline-block {
    display: inline-block;
  }

  .md\:u-d-flex {
    display: flex;
  }

  .md\:u-d-inline-flex {
    display: inline-flex;
  }

  .md\:u-d-grid {
    display: grid;
  }

  .md\:u-text-center {
    text-align: center;
  }

  .md\:u-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .md\:u-justify-end {
    justify-content: flex-end;
  }
}

@media only screen and (min-width: 768px) {
  .btn-all {
    flex-direction: column;
  }

  .btn-hamburger {
    justify-content: flex-end;
    width: 8.8125rem;
    height: auto;
    padding: 0.875rem 1.375rem 0.875rem 1.875rem;
    border-radius: 6.25rem;
  }

  .btn-icon {
    justify-content: center;
  }

  .btn-icon .btn-icon__label {
    display: none;
  }

  .title {
    letter-spacing: -0.08em;
  }

  .subtitle {
    letter-spacing: -0.08em;
  }

  .site-footer .site-footer__inner {
    padding-block: 1.5625rem 1.25rem;
  }

  .site-footer .site-footer__top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
  }

  .site-footer .site-footer__about {
    grid-column: 1/span 3;
  }

  .site-footer .site-footer__nav {
    grid-column: 6/span 3;
  }

  .site-footer .site-footer__menu {
    gap: 0.5rem;
  }

  .site-footer .site-footer__menu a {
    letter-spacing: -0.06em;
  }

  .site-footer .site-footer__social {
    grid-column: 10/span 3;
  }

  .site-footer .wrapper {
    gap: 5rem;
  }

  .drawer-menu .menu-item a {
    line-height: 1.1;
  }

  .button-category {
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
  }

  .card-brand-resource {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .card-brand-resource .card-brand-resource__media {
    width: 8rem;
    height: 8rem;
  }

  .card-instagram {
    border-radius: 1.5rem;
  }

  .card-recipe-category .card-recipe-category__title {
    padding-inline: 1rem;
  }

  .card-timeline {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .card-timeline:before,
  .card-timeline:after {
    left: 50%;
  }

  .card-timeline .card-timeline__dot {
    left: 50%;
  }

  .card-timeline .card-timeline__wrap {
    grid-column: var(--card-timeline-grid-column, 2/span 10);
  }

  .editor h2 {
    line-height: 1.333333333333333;
  }

  .gallery .gallery__thumbs {
    position: absolute;
    bottom: 0;
  }

  .form-search {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sac-product-card .sac-product-card__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .sac-steps .steps-title-mob {
    display: none;
  }

  .sac-steps .steps-nav .title {
    display: block;
  }

  .header-product .wrapper {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    grid-auto-rows: max-content;
    gap: 1rem;
    padding-block: 7rem 4.5rem;
  }

  .header-product .btn-link {
    grid-column: 1/span 6;
    margin-block: 1.5rem 0.5rem;
  }

  .header-product .btn-icon {
    position: absolute;
    top: 50%;
  }

  .header-product .btn-icon.btn-prev {
    left: 2.1875rem;
    transform: translateY(2rem);
  }

  .header-product .btn-icon.btn-next {
    right: 2.1875rem;
    transform: translateY(2rem);
  }

  .header-product .header-product__info {
    grid-column: 1/span 6;
  }

  .header-product .header-product__media {
    grid-column: 8/span 5;
    grid-row: 1/span 2;
    padding-top: 2.8125rem;
  }

  .header-product .header-product__actions {
    align-items: flex-end;
  }

  .home-about:before,
  .home-about:after {
    aspect-ratio: 1440/72;
    height: auto;
  }

  .home-about .wrapper > img:nth-child(1) {
    top: -10%;
    left: 10%;
  }

  .home-about .wrapper > img:nth-child(2) {
    top: 5%;
    left: 67%;
  }

  .home-about .wrapper > img:nth-child(3) {
    bottom: 15%;
    left: 8%;
  }

  .home-about .wrapper > img:nth-child(4) {
    bottom: 10%;
    left: 68%;
  }

  .home-products .home-products__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .home-products .home-products__items .swiper {
    grid-column: 1/span 3;
  }

  .home-products .home-products__items .btn-all {
    grid-column: 4;
  }

  .main-hero {
    --swiper-pagination-color: var(--primary-500);
    --swiper-pagination-bullet-inactive-color: var(--primary-500);
    --swiper-pagination-top: 0;
    --swiper-pagination-bottom: unset;
  }

  .main-hero .swiper-pagination {
    flex-direction: column;
    right: 1.5rem;
    left: unset;
    width: auto;
    height: 100%;
  }

  .nutrition-info .wrapper {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
  }

  .nutrition-info .nutrition-info__aside {
    grid-column: 1/span 4;
  }

  .nutrition-info .nutrition-info__wrap {
    grid-column: 7/span 6;
  }

  .nutrition-info .nutrition-info__others .subtitle {
    margin-bottom: 0.875rem;
  }

  .page-header {
    min-height: var(--page-header-min-height, 34rem);
    background-position: 213% 50%;
    background-size: 75%;
  }

  .page-header:after {
    background-size: 100%;
  }

  .page-header .wrapper {
    align-items: center;
    gap: 1rem;
    padding-block: 8.5rem 0;
  }

  .page-header .page-header__content {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    align-items: center;
    align-self: center;
    margin-top: -3.875rem;
  }

  .page-header .page-header__pic {
    grid-column: 8/span 5;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: -4rem;
    margin-bottom: -2.625rem;
  }

  .page-header .page-header__pic img {
    width: 86%;
    object-position: right center;
  }

  .page-header .page-header__title {
    grid-column: 1/span 6;
    align-self: center;
  }

  .page-header .page-header__editor {
    grid-column: 9/span 4;
    align-self: end;
    justify-self: end;
    max-width: 24.375rem;
    padding-bottom: 0.75rem;
  }

  .recipe-categories {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .recipe-categories .swiper {
    padding-inline: 1rem;
  }

  .recipe-categories:has(.swiper-button-lock) {
    grid-template-columns: minmax(0, 1fr);
  }

  .related-products .wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .related-products .wrapper > .btn {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: end;
  }

  .section-generic .wrapper {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .section-generic .section-generic__media {
    grid-column: 1/span 6;
    aspect-ratio: 1;
  }

  .section-generic .section-generic__content {
    grid-column: 8/span 5;
  }

  .section-instagram .section-instagram__header {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .section-instagram .title {
    grid-column: 1/span 6;
  }

  .section-instagram .editor {
    grid-column: 10/span 3;
    align-self: end;
  }

  .section-recipes .wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-recipes .wrapper > .btn {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: end;
  }

  .section-usage .wrapper {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
  }

  .section-usage .title {
    grid-column: 1/span 3;
  }

  .usage-steps {
    grid-column: 7/span 6;
  }

  .usage-steps .usage-steps__body {
    gap: 0.875rem;
  }

  .usage-steps .usage-steps__title {
    line-height: 1.5;
  }

  .ca-login .btn {
    justify-self: center;
  }

  .ca-news .ca-news__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-commercial-area-single-news .page-header .btn-icon {
    margin-top: 0.625rem;
  }

  .page-commercial-area-single-news .page-header .btn-icon .btn-icon__label {
    display: inline-flex;
    font-size: 1rem;
  }

  .timeline {
    --text-align: center;
    padding-block: 3.75rem 0.375rem;
  }

  .timeline .card-timeline:nth-child(odd) {
    --card-timeline-grid-column: 2/span 4;
  }

  .timeline .card-timeline:nth-child(even) {
    --card-timeline-grid-column: 8/span 4;
  }

  .section-quality {
    background-size: 125%;
    background-position: center -52%;
  }

  .section-quality:before,
  .section-quality:after {
    aspect-ratio: 1440/72;
    height: auto;
    max-height: 4.5rem;
  }

  .section-quality .wrapper {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .section-quality .title {
    grid-column: 1/span 5;
  }

  .section-quality .editor {
    grid-column: 9/span 4;
  }

  .section-quality .media {
    width: 100%;
  }

  .section-pillars .section-pillars__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .section-pillars .section-pillars__list .card-text:nth-child(1) {
    grid-column: 1/span 3;
  }

  .section-pillars .section-pillars__list .card-text:nth-child(2) {
    grid-column: 5/span 3;
  }

  .section-pillars .section-pillars__list .card-text:nth-child(3) {
    grid-column: 9/span 3;
  }

  .page-commercial-area-news .page-header .wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
  }

  .page-commercial-area-news .page-header .btn-icon .btn-icon__label {
    display: inline-flex;
    font-size: 1rem;
  }

  .page-commercial-area-news .page-header .page-header__title {
    grid-column: 1;
    align-self: end;
  }

  .page-commercial-area-news .page-header .btn {
    align-self: end;
    grid-column: 2;
    grid-row: 2;
  }

  .form-grid .col--md-1 {
    grid-column: auto/span 1;
  }

  .form-grid .col--md-2 {
    grid-column: auto/span 2;
  }

  .form-grid .col--md-3 {
    grid-column: auto/span 3;
  }

  .form-grid .col--md-4 {
    grid-column: auto/span 4;
  }

  .form-grid .col--md-5 {
    grid-column: auto/span 5;
  }

  .form-grid .col--md-6 {
    grid-column: auto/span 6;
  }

  .form-grid .col--md-7 {
    grid-column: auto/span 7;
  }

  .form-grid .col--md-8 {
    grid-column: auto/span 8;
  }

  .form-grid .col--md-9 {
    grid-column: auto/span 9;
  }

  .form-grid .col--md-10 {
    grid-column: auto/span 10;
  }

  .form-grid .col--md-11 {
    grid-column: auto/span 11;
  }

  .form-grid .col--md-12 {
    grid-column: auto/span 12;
  }

  .form-grid .col--md-jse {
    justify-self: end;
  }

  .form-grid .form-sec-title {
    letter-spacing: -0.08em;
  }

  .form-grid .form-sec-title {
    letter-spacing: -0.06em;
  }

  .page-privacy-terms .page-header .wrapper {
    padding-block: 7rem 3rem;
  }

  .categories-and-prodcuts {
    padding-bottom: 3.75rem;
  }

  .categories-and-prodcuts .title {
    margin-top: 3.75rem;
  }

  .products-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .page-header .page-header__pic {
    grid-column: 7/span 6;
    margin: 0 3% -10% -2.5%;
  }

  .page-products .page-header .page-header__pic img {
    width: 118%;
  }

  .recipes-results .recipes-results__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-single-recipe {
    overflow: visible;
  }

  .page-single-recipe .page-header .recipe-meta {
    grid-column: 8/span 5;
    justify-self: end;
    align-self: end;
  }

  .single-recipe .wrapper {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
  }

  .recipe-meta {
    width: fit-content;
  }

  .recipe-main {
    grid-column: 1/span 7;
  }

  .recipe-main .recipe-main__content h2 {
    letter-spacing: -0.08em;
  }

  .recipe-main .recipe-main__content ol li {
    padding-left: 1.75rem;
    margin-left: 1.75rem;
    align-items: center;
  }

  .recipe-main .recipe-main__content ol li::before {
    left: -1.75rem;
    top: auto;
  }

  .recipe-aside {
    grid-column: 9/span 4;
  }

  .recipe-products {
    padding-top: 1rem;
    margin-bottom: 6rem;
  }

  .support-faq .wrapper {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .support-faq .title {
    grid-column: 1/span 4;
  }

  .support-faq .support-faq__list {
    grid-column: 7/span 6;
  }

  .support-contact .wrapper {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: 3rem;
  }

  .support-contact .title {
    grid-column: 1/span 4;
  }

  .support-contact .editor {
    grid-column: 10/span 3;
    align-self: end;
  }

  .support-contact .support-contact__grid {
    grid-column: 1/span 12;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 992px) {
  .header-drawer {
    top: 1.75rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .section-pillars .section-pillars__list {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .products-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 1200px) {
  .recipes-results .recipes-results__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 1512px) {
  .section-quality:before {
    background-position: center bottom;
  }

  .section-quality:after {
    background-position: center top;
  }
}

@media only screen and (min-width: 1920px) {
  .header-product .header-product__bg {
    justify-content: flex-end;
  }
}

@media only screen and (max-width: 991.98px) {
  .header-nav {
    display: none;
  }

  .nutrition-info table {
    min-width: 32.5rem;
    margin-left: 1.5rem;
  }
}

@media only screen and (max-width: 767.98px) {
  .btn-all br {
    display: none;
  }

  .btn-hamburger .btn-hamburger__label {
    display: none;
  }

  .btn-edit .btn-edit__label {
    display: none;
  }

  .site-footer .site-footer__social {
    margin-top: -0.25rem;
  }

  .site-footer .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid var(--primary-400);
    padding-top: 3rem;
  }

  .site-footer .site-footer__legal-menu {
    flex-direction: column;
    gap: 0.5rem;
  }

  .card-related-family .card-related-family__title {
    grid-column: 2/span 2;
  }

  .card-related-family .card-related-family__button {
    display: none;
  }

  .card-timeline {
    padding-left: 2.5rem;
  }

  .product-categories .swiper {
    overflow: visible;
  }

  .product-categories .swiper-slide {
    width: max-content;
  }

  .product-categories .swiper-button-prev,
  .product-categories .swiper-button-next {
    display: none;
  }

  .sac-actions {
    flex-direction: column-reverse;
  }

  .header-product {
    margin-top: 6rem;
    padding-bottom: 2rem;
  }

  .header-product .btn-link {
    grid-row: 1;
  }

  .header-product .btn-icon {
    grid-row: 4;
  }

  .header-product .btn-icon.btn-prev {
    grid-column: 1;
  }

  .header-product .btn-icon.btn-next {
    grid-column: 2;
    justify-self: end;
  }

  .header-product .header-product__info {
    grid-row: 3;
  }

  .header-product .header-product__media {
    grid-row: 2;
  }

  .header-product .header-product__bg {
    margin-top: -20%;
    margin-left: -9%;
  }

  .header-product .header-product__actions {
    flex-direction: column;
    margin-top: 1.5rem;
  }

  .header-product .header-product__actions .btn {
    width: 100%;
  }

  .home-products .home-products__items .swiper {
    overflow: visible;
  }

  .main-hero {
    margin-top: 6rem;
  }

  .nutrition-info .wrapper {
    row-gap: 2rem;
  }

  .nutrition-info .nutrition-info__table-wrap {
    margin-inline: -1.5rem;
  }

  .nutrition-info table tbody td:first-child {
    white-space: nowrap;
  }

  .page-header {
    margin-top: 6rem;
    max-height: calc(100svh - 96px);
    min-height: 21.25rem;
  }

  .page-header .btn-link {
    margin-top: 1.5rem;
  }

  .page-header .page-header__content {
    align-self: end;
  }

  .page-header .page-header__content .recipe-meta,
  .page-header .page-header__content >.btn {
    margin-block: 3rem 1.5rem;
  }

  .page-header .page-header__pic {
    justify-content: center;
    margin-top: 3.75rem;
  }

  .page-header .page-header__title {
    padding-block: 1.5rem;
  }

  .page-header:not(:has(.page-header__pic)) {
    padding-bottom: 2.25rem;
  }

  .page-header:has(.page-header__content .recipe-meta),
  .page-header:has(.page-header__content >.btn) {
    min-height: 25.5rem;
  }

  .recipe-categories .swiper {
    overflow: visible;
  }

  .recipe-categories .swiper-button-next,
  .recipe-categories .swiper-button-prev {
    display: none;
  }

  .related-family .related-family__list {
    overflow: visible;
  }

  .usage-steps .usage-steps__item {
    flex-direction: column;
    gap: 0.75rem;
  }

  .page-commercial-area-single-news .page-header .page-header__title {
    align-self: end;
    padding-top: 4.5rem;
  }

  .page-about .page-header {
    --page-header-bg-position: center -11.25rem;
    padding-bottom: 0;
  }

  .page-about .page-header .page-header__content {
    margin-top: 0;
    padding-block: 0 2.25rem;
    align-self: start;
  }

  .page-about .page-header .wrapper {
    gap: 20rem;
  }

  .section-quality .media {
    margin-inline: -1.5rem;
  }

  .page-brand-resources {
    padding-bottom: 5.625rem;
  }

  .page-commercial-area-news .page-header .btn {
    width: 100%;
  }

  .section-form-sent .wrapper .editor {
    margin-top: 1rem;
  }

  .page-privacy-terms .page-header {
    --page-header-min-height: 0;
  }

  .page-products .page-header {
    --page-header-bg-position: center 16.25rem;
  }

  .page-products .page-header .wrapper {
    gap: 3.75rem;
  }

  .page-products .page-header .page-header__content {
    margin-top: 0;
    padding-top: 0;
    align-self: start;
  }

  .page-products .page-header .page-header__pic {
    margin-top: 0;
    margin-inline: -1.5rem;
  }

  .page-recipes-results .page-header {
    --page-header-min-height: 0;
    --page-header-bg-position: 92% -25rem;
  }

  .recipes-results .recipes-results__toolbar {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }

  .page-single-recipe .page-header {
    --page-header-bg-position: 50% -200%;
  }

  .recipe-main .recipe-main__content ol li {
    padding-top: 1.5625rem;
  }

  .recipe-summary {
    display: none;
  }

  .support-contact .support-contact__grid {
    margin-top: 0.5rem;
  }
}

@media (max-width: 767.98px) {
  .lt-md\:u-center {
    --text-align: center;
  }
}

@media only screen and (max-width: 575.98px) {
  .card-brand-resource .btn {
    justify-content: center;
    width: 100%;
  }

  .form-grid .btn {
    width: 100%;
  }
}

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

  .collapsing {
    transition: none;
  }
}
/*# sourceMappingURL=app.min.css.map */