:root {
  /* Colors */

  --color-white: rgba(255, 255, 255, 1);
  --color-gray: rgba(247, 247, 247, 1);
  --color-gray-light: rgba(248, 248, 248, 1);
  --color-black: rgba(19, 19, 19, 1);
  --color-red: rgba(204, 0, 0, 1);
  --color-placeholder: rgba(99, 115, 118, 1);
  --color-border: rgba(255, 255, 255, 1);
  --color-border-gray: rgba(224, 224, 224, 1);
  --color-border-input: rgba(217, 217, 217, 1);
  --color-placeholder-gray: rgba(168, 168, 168, 1);
  --color-text-gray: rgba(174, 174, 174, 1);
  --color-slider-track: rgba(207, 217, 229, 1);
  --color-arrow: rgba(157, 156, 156, 0.3);
  --color-icon-gray: rgba(131, 130, 130, 1);
  --color-blue: rgba(51, 107, 184, 1);
  --color-green: rgba(34, 197, 94, 1);
  --color-yellow: rgba(242, 194, 0, 1);
  --color-teal: #2dd4bf;
  --color-header-scrolled: rgba(255, 255, 255, 0.9);
  --color-modal-backdrop: rgba(234, 234, 234, 0.95);
  --color-red-hover: rgba(197, 34, 29, 1);
  --color-gray-text: rgba(121, 120, 120, 1);
  --color-soft-red-hover: rgba(253, 240, 240, 1);
  --color-hpower-card-bg: var(--color-gray-light);
  --color-hpower-note-text: rgba(67, 71, 77, 1);
  --color-hpower-counter-minus-bg: color-mix(in srgb, var(--color-red) 15%, transparent);
  --color-hpower-counter-btn-bg: color-mix(in srgb, var(--color-red) 5%, transparent);
  --color-hpower-counter-btn-hover-bg: color-mix(in srgb, var(--color-red) 10%, transparent);

  /* Effects */

  --blur-header: blur(10px);
  --blur-focus: 5.5px;

  /* Typography */

  --font-family: "Montserrat", sans-serif;
  --font-size-h1: 2.375rem;
  --font-size-48: 3rem;
  --font-size-40: 2.5rem;
  --font-size-h2: 1.5rem;
  --font-size-36: 2.25rem;
  --font-size-34: 2.125rem;
  --font-size-30: 1.875rem;
  --font-size-h3: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-24: 1.5rem;
  --font-size-22: 1.375rem;
  --font-size-20: 1.25rem;
  --font-size-md: 1.25rem;
  --font-size-18: 1.125rem;
  --font-size-p: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-13: 0.8125rem;
  --font-size-12: 0.75rem;
  --font-size-10: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-xs: 0.8125rem;
  --line-height-15: 0.9375rem;
  --letter-spacing-1: 0.0625rem;

  /* Layout */

  --top-bar-height: 2.75rem;
  --logo-height: 3rem;
  --logo-height-mobile: 1.5rem;
  --logo-width-header: 280px;
  --logo-width-footer: 240px;
  --logo-width-mobile: 200px;

  /* Aspect Ratios */

  --aspect-ratio-5-3: 5 / 3;
  --aspect-ratio-4-4: 4 / 4;

  /* Breakpoints */

  --breakpoint-mobile-min: 0px;
  --breakpoint-mobile-max: 767px;
  --breakpoint-tablet-min: 768px;
  --breakpoint-tablet-max: 1023px;
  --breakpoint-desktop-min: 1024px;
  --breakpoint-desktop-max: 1279px;
  --breakpoint-large-min: 1280px;

  /* Icon Sizes */

  --icon-size-md: 1.875rem;
  --header-burger-size: 24px;
  --header-feedback-icon-size: 24px;
  --header-search-icon-size: 26px;
  --header-icons-gap: var(--spacing-10);

  /* Phone */

  --header-phone-font-size: 1.188rem;
  --header-phone-font-weight: 700;
  --header-phone-white-space: nowrap;
  --header-phone-color: var(--color-black);
  --header-phone-color-hover: var(--color-red);
  --header-phone-gap: 2rem;

  /* Border Radius */

  --border-radius-xs: 0.25rem;
  --border-radius-sm: 0.5rem;
  --border-radius-16: 1rem;
  --border-radius-lg: 1.25rem;
  --border-radius-md: 1.5rem;

  /* Z-index */

  --z-index-modal: 9999;
  --z-index-header: 1001;
  --z-index-table-sticky-header: 970;
  --z-index-table-popup: 960;

  /* Spacing */

  --spacing-2: 0.125rem;
  --spacing-4: 0.25rem;
  --spacing-6: 0.375rem;
  --spacing-8: 0.5rem;
  --spacing-10: 0.625rem;
  --spacing-12: 0.75rem;
  --spacing-14: 0.875rem;
  --spacing-16: 1rem;
  --spacing-18: 1.125rem;
  --spacing-20: 1.25rem;
  --spacing-22: 1.375rem;
  --spacing-24: 1.5rem;
  --spacing-26: 1.625rem;
  --spacing-28: 1.75rem;
  --spacing-30: 1.875rem;
  --spacing-32: 2rem;
  --spacing-34: 2.125rem;
  --spacing-36: 2.25rem;
  --spacing-38: 2.375rem;
  --spacing-40: 2.5rem;
  --spacing-42: 2.625rem;
  --spacing-44: 2.75rem;
  --spacing-46: 2.875rem;
  --spacing-48: 3rem;
  --spacing-50: 3.125rem;
  --spacing-52: 3.25rem;
  --spacing-56: 3.5rem;
  --spacing-58: 3.625rem;
  --spacing-60: 3.75rem;
  --spacing-64: 4rem;
  --spacing-68: 4.25rem;
  --spacing-70: 4.375rem;
  --spacing-72: 4.5rem;
  --spacing-74: 4.625rem;
  --spacing-76: 4.75rem;
  --spacing-80: 5rem;
  --spacing-88: 5.5rem;
  --spacing-90: 5.625rem;
  --spacing-92: 5.75rem;
  --spacing-96: 6rem;
  --spacing-100: 6.25rem;
  --spacing-110: 6.875rem;
  --spacing-112: 7rem;
  --spacing-114: 7.125rem;
  --spacing-150: 9.375rem;
  --spacing-170: 10.625rem;
  --spacing-220: 13.75rem;
  --spacing-224: 14rem;
  --spacing-260: 16.25rem;
  --spacing-280: 17.5rem;
  --spacing-298: 18.625rem;
  --spacing-300: 18.75rem;
  --spacing-318: 19.875rem;
  --spacing-320: 20rem;
  --spacing-334: 20.875rem;
  --spacing-340: 21.25rem;
  --spacing-354: 22.125rem;
  --spacing-368: 23rem;
  --spacing-384: 24rem;
  --spacing-420: 26.25rem;
  --spacing-458: 28.625rem;
  --spacing-500: 31.25rem;
  --spacing-540: 33.75rem;
  --spacing-800: 50rem;
}

/* Theme overrides */

.theme-hpower {
  --color-red: var(--color-blue);
  --color-red-hover: rgba(75, 111, 176, 1);
  --color-hpower-link-hover: rgba(172, 33, 35, 1);
  --color-hpower-disabled-fill: rgba(188, 187, 187, 1);
  --color-hpower-outline: rgba(75, 111, 176, 1);
  --color-hpower-card-bg: rgba(30, 75, 156, 0.05);
  --font-family: "Montserrat", sans-serif;
}

.theme-hpower a:not(.btn):hover {
  color: var(--color-hpower-link-hover);
}

.theme-hpower a:not(.btn):hover svg {
  color: var(--color-red-hover);
}

.theme-hpower a:focus-visible,
.theme-hpower button:focus-visible,
.theme-hpower input:focus-visible,
.theme-hpower textarea:focus-visible,
.theme-hpower select:focus-visible,
.theme-hpower .btn:focus-visible {
  box-shadow: 0 0 var(--blur-focus) var(--color-hpower-outline);
}

.theme-hpower .btn-outlined:hover {
  background-color: var(--color-red-hover);
  border-color: var(--color-red-hover);
}

.theme-hpower .btn-solid:hover {
  background-color: var(--color-red-hover);
  border-color: var(--color-red-hover);
}

.theme-hpower .btn:disabled,
.theme-hpower .btn[aria-disabled="true"],
.theme-hpower .news-pagination__btn--disabled,
.theme-hpower .news-pagination__item--disabled {
  background: var(--color-hpower-disabled-fill);
  border-color: var(--color-hpower-disabled-fill);
}

/* Base */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-p);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border-gray);
  margin: var(--spacing-24) 0;
}

@media (max-width: 1023px) {
  :root {
    --top-bar-height: 0rem;
  }

  h2,
  .banner-title,
  .about-subtitle,
  .about-order-title,
  .product-specifications-title {
    font-size: var(--font-size-h2) !important;
  }

  .section-title {
    font-family: var(--font-family);
    font-weight: 500 !important;
    font-size: var(--font-size-h2) !important;
    line-height: 100%;
    letter-spacing: 0;
  }
}

main {
  flex: 1;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

img {
  user-select: none;
}

a[class*=""][style*="color"][style*="white"],
a.footer-email,
a.footer-link,
a.footer-nav-link,
a.top-bar-email {
  color: var(--color-white);
}

a[class*=""][style*="color"][style*="white"]:hover,
a.footer-email:hover,
a.footer-link:hover,
a.footer-nav-link:hover,
a.top-bar-email:hover {
  color: var(--color-red);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 var(--blur-focus) var(--color-red);
}

/* Container */

.container {
  width: 100%;
}

.container-banner {
  width: 100%;
}

.container-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-60);
  padding-right: var(--spacing-60);
}

.container-narrow {
  max-width: 51.25rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-20);
  padding-right: var(--spacing-20);
}

.container-narrow p {
  margin-bottom: var(--spacing-16);
}

.container-narrow h2,
.container-narrow h3 {
  margin-bottom: var(--spacing-24);
}

.container-narrow a {
  display: inline;
  font-size: var(--font-size-p);
  font-weight: 400;
  color: var(--color-red);
  text-decoration: underline;
  transition: opacity 0.3s;
}

.container-narrow a:hover {
  opacity: 0.8;
}

.mobile-menu + .container:has(h1):not(:has(.breadcrumbs)),
.catalog-dropdown + .container:has(h1):not(:has(.breadcrumbs)) {
  padding-top: var(--spacing-40);
}

@media (max-width: 1023px) {
  .mobile-menu + .container:has(h1):not(:has(.breadcrumbs)),
  .catalog-dropdown + .container:has(h1):not(:has(.breadcrumbs)) {
    padding-top: var(--spacing-24);
  }

  .container-content {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}