:root {
  --bg: #f7f9f7;
  --bg-shadow: rgba(247,249,247,0.8);
  --green: #55a711;
  --blue: #0bafe4;
  --red: #f21b3f;
  --gray: #919191;
  --transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  --box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  --box-shadow-top: 0 -2px 3px rgba(0,0,0,0.1);
  --mobile-menu-height: 45px;
  --container-padding: 15px;
  --rating: 0;
}
/* minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
div,
span,
button,
input,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
ul {
  list-style: none;
}
html {
  box-sizing: border-box;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
body {
  min-height: 100vh;
/*line-height: calc(2px + 2ex + 2px);*/
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  color: #000;
  background: var(--bg);
  font-family: "Segoe UI", Roboto, system-ui, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
img,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
iframe {
  display: block;
  width: 100%;
}
@media (max-width: 767px) {
  iframe {
    height: auto;
  }
}
label {
  cursor: pointer;
}
input,
button,
textarea,
select {
  font: inherit;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
a {
  color: unset;
  text-decoration: unset;
  text-decoration-skip-ink: auto;
  cursor: pointer;
}
:target {
  scroll-margin-block: 60px;
}
@media (min-width: 768px) {
  :target {
    scroll-margin-block: 80px;
  }
}
@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #f2f2f2;
  }
  ::-webkit-scrollbar-thumb {
    background: #bdbdbd;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #6e6e6e;
  }
}
:user-invalid {
  border: 2px solid #f00;
}
sticky-bar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: var(--box-shadow);
  background-color: var(--bg);
}
.flex-right {
  margin-left: auto;
}
.no-padding {
  padding: 0;
}
.relative {
  position: relative;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.gap-20 {
  gap: 20px;
  padding: 20px 0;
}
max-container {
  display: block;
  max-width: 1366px;
  margin: 0 auto;
  height: 100%;
}
@media (max-width: 1385px) {
  max-container:not([no-padding]) {
    padding: 0 var(--container-padding);
  }
}
max-container[white] {
  background: #fff;
}
center-container {
  display: flex;
  justify-content: center;
}
promo-bar {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  background-color: var(--green);
  align-items: center;
}
promo-bar promo-message {
  grid-column-start: 2;
  line-height: 15px;
  padding: 5px 0;
}
promo-bar close-button {
  text-align: right;
  cursor: pointer;
  padding-right: 10px;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 767px) {
  promo-bar {
    line-height: 20px;
  }
}
promo-bar coupon-code {
  outline: 1px dashed #fff;
  margin: 0 2px;
  padding: 0 3px;
}
facts-bar {
  display: flex;
  gap: 25px;
  line-height: 50px;
  font-size: 12px;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: auto;
}
@media (max-width: 767px) {
  facts-bar {
    gap: 10px;
    line-height: 30px;
  }
}
facts-bar > * {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjRweCcgaGVpZ2h0PScyNHB4JyB2aWV3Qm94PScwIDAgMjQgMjQnIGZpbGw9JyMwMDAwMDAnIHg9Jzc2LjUnIHk9Jzc2LjUnIHJvbGU9J2ltZycgc3R5bGU9J2Rpc3BsYXk6aW5saW5lLWJsb2NrO3ZlcnRpY2FsLWFsaWduOm1pZGRsZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZyBmaWxsPScjMDAwMDAwJz48cGF0aCBmaWxsPSdjdXJyZW50Q29sb3InIGQ9J00yMiA4YS43Ni43NiAwIDAgMCAwLS4yMXYtLjA4YS43Ny43NyAwIDAgMC0uMDctLjE2YS4zNS4zNSAwIDAgMC0uMDUtLjA4bC0uMS0uMTNsLS4wOC0uMDZsLS4xMi0uMDlsLTktNWExIDEgMCAwIDAtMSAwbC05IDVsLS4wOS4wN2wtLjExLjA4YS40MS40MSAwIDAgMC0uMDcuMTFhLjM5LjM5IDAgMCAwLS4wOC4xYS41OS41OSAwIDAgMC0uMDYuMTRhLjMuMyAwIDAgMCAwIC4xQS43Ni43NiAwIDAgMCAyIDh2OGExIDEgMCAwIDAgLjUyLjg3bDkgNWEuNzUuNzUgMCAwIDAgLjEzLjA2aC4xYTEuMDYgMS4wNiAwIDAgMCAuNSAwaC4xbC4xNC0uMDZsOS01QTEgMSAwIDAgMCAyMiAxNlY4em0tMTAgMy44N0w1LjA2IDhsMi43Ni0xLjUybDYuODMgMy45em0wLTcuNzJMMTguOTQgOEwxNi43IDkuMjVMOS44NyA1LjM0ek00IDkuN2w3IDMuOTJ2NS42OGwtNy0zLjg5em05IDkuNnYtNS42OGwzLTEuNjhWMTVsMi0xdi0zLjE4bDItMS4xMXY1Ljd6Jy8+PC9nPjwvc3ZnPg==");
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 30px;
  background-size: 20px;
  color: #000;
}
menu-bar {
  display: block;
  position: relative;
}
menu-bar menu-bar-elements {
  display: grid;
  grid-template-columns: 1fr min-content min-content 2fr min-content min-content min-content;
  grid-template-areas: "logo categories brands search settings fav cart";
  gap: 35px;
  line-height: 70px;
  font-size: 16px;
  color: #000;
  align-items: stretch;
  white-space: nowrap;
}
@media (max-width: 767px) {
  menu-bar menu-bar-elements {
    line-height: 50px;
    grid-template-areas: "menu logo search-toggle settings fav cart" "search search search search search search";
    grid-template-columns: 80px 1fr 43px 43px 43px 43px;
    column-gap: 0;
    row-gap: 0;
  }
  menu-bar menu-bar-elements .logo {
    aspect-ratio: unset !important;
  }
  menu-bar menu-bar-elements .search {
    line-height: 1;
    position: relative;
    top: -5px;
  }
  menu-bar menu-bar-elements .search input {
    padding: 0;
    border: 0 !important;
  }
  menu-bar menu-bar-elements .search search-results {
    left: calc(-1 * var(--container-padding));
    width: calc(100% + calc(2 * var(--container-padding)));
  }
}
menu-bar menu-bar-elements .logo {
  background: url("/image/catalog/mz-logo.svg") left center no-repeat;
  height: 100%;
  background-size: 100% 80%;
}
@media (max-width: 1200px) {
  menu-bar menu-bar-elements .logo {
    background: url("/image/catalog/mz.svg") center no-repeat;
    background-size: auto 40px;
  }
}
menu-bar menu-bar-elements > label:has(text-icon) {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  position: initial;
}
menu-bar menu-bar-elements label[for="cart-panel-toggle"],
menu-bar menu-bar-elements ader twig,
menu-bar menu-bar-elements label[for="fav-panel-toggle"] {
  display: flex;
  justify-content: center;
  align-items: center;
}
menu-bar menu-bar-elements .dropdown {
  text-transform: uppercase;
  font-weight: bold;
  position: initial;
}
menu-bar menu-bar-elements .dropdown.arrow:after {
  content: '';
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjRweCcgaGVpZ2h0PScyNHB4JyB2aWV3Qm94PScwIDAgMjQgMjQnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00xMi43MDcxIDE0LjcwNzFDMTIuMzE2NiAxNS4wOTc2IDExLjY4MzQgMTUuMDk3NiAxMS4yOTI5IDE0LjcwNzFMNi4yOTI4OSA5LjcwNzExQzUuOTAyMzcgOS4zMTY1OCA1LjkwMjM3IDguNjgzNDIgNi4yOTI4OSA4LjI5Mjg5QzYuNjgzNDIgNy45MDIzNyA3LjMxNjU4IDcuOTAyMzcgNy43MDcxMSA4LjI5Mjg5TDEyIDEyLjU4NThMMTYuMjkyOSA4LjI5Mjg5QzE2LjY4MzQgNy45MDIzNyAxNy4zMTY2IDcuOTAyMzcgMTcuNzA3MSA4LjI5Mjg5QzE4LjA5NzYgOC42ODM0MiAxOC4wOTc2IDkuMzE2NTggMTcuNzA3MSA5LjcwNzExTDEyLjcwNzEgMTQuNzA3MVonIGZpbGw9JyMwMDAwMDAnLz48L3N2Zz4=");
  background-position: center 23px;
  background-repeat: no-repeat;
  background-size: 20px;
  display: inline-block;
  width: 30px;
  height: 100%;
  vertical-align: middle;
}
@media (max-width: 767px) {
  menu-bar menu-bar-elements .dropdown.arrow:after {
    background: none;
    padding-right: 0;
  }
}
menu-bar menu-bar-elements .search {
  flex: 1;
  font-size: 15px;
  margin: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-search' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%2308b2e3' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0' /><path d='M21 21l-6 -6' /></svg>") 5px center no-repeat;
  background-size: 20px;
}
@media (min-width: 768px) {
  menu-bar menu-bar-elements .search {
    max-width: 400px;
  }
}
menu-bar menu-bar-elements .search input {
  border: none;
  border-bottom: 2px solid var(--gray);
  height: 30px;
  background: none;
  width: 100%;
  outline: 0;
  padding-left: 30px;
}
body:has(#categories-panel-toggle:checked) label.arrow[for="categories-panel-toggle"]:after {
  background-position: center 27px;
  transform: rotate(180deg);
}
body:has(#brands-panel-toggle:checked) label.arrow[for="brands-panel-toggle"]:after {
  background-position: center 27px;
  transform: rotate(180deg);
}
body[data-route="checkout-cart"] label[for="cart-panel-toggle"],
body[data-route="checkout-checkout"] label[for="cart-panel-toggle"] {
  opacity: 0.5;
  filter: grayscale(1);
  pointer-events: none;
}
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  visibility: hidden;
  opacity: 0;
  transform: translateY(15px) translateZ(0);
  pointer-events: none;
  z-index: 2;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .dropdown-panel {
    visibility: hidden;
    opacity: 0;
    transform: none !important;
    pointer-events: unset;
    z-index: 2;
  }
}
@media (max-width: 767px) {
  [mobile-shadow-end],
  .mobile-shadow-end {
    padding-right: 50px;
  }
  [mobile-shadow-end]:after,
  .mobile-shadow-end:after {
    content: "";
    position: absolute;
    height: 30px;
    margin: auto 0;
    width: calc(100vw / 4);
    border: 0;
    pointer-events: none;
    box-shadow: inset -80px 0 30px -30px var(--bg-shadow);
    right: 0;
  }
  [mobile-shadow-end][white-shadow]:after,
  .mobile-shadow-end[white-shadow]:after {
    box-shadow: inset calc(-0.285 * 100vw + 22.85px) 0 30px -30px rgba(255,255,255,0.8);
  }
  .mobile-hidden {
    display: none;
  }
  .mobile-hidden-important {
    display: none !important;
  }
  mobile-break {
    display: block;
  }
}
@media (min-width: 768px) {
  .desktop-hidden {
    display: none;
  }
}
ul.breadcrumbs-bar {
  display: flex;
  line-height: 40px;
  font-size: 12px;
  color: var(--gray);
  overflow-x: auto;
  white-space: nowrap;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
ul.breadcrumbs-bar > li {
  display: inline-block;
}
ul.breadcrumbs-bar > li + li:before {
  padding: 0 5px;
  content: "\00a0/\00a0";
}
.panel-toggle {
  display: none;
}
body:has(.panel-toggle:checked) {
  overflow: hidden;
}
body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel {
  visibility: visible;
  pointer-events: unset;
}
@media (min-width: 768px) {
  body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel[desktop-dropdown] {
    opacity: 1;
    transform: none !important;
    display: table;
  }
}
body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel side-panel-overlay {
  opacity: 1;
  pointer-events: unset;
}
body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel side-panel-content {
  translate: 0;
}
@media (min-width: 768px) {
  body:has(.panel-toggle:checked + side-panel[desktop-dropdown]) sticky-overlay {
    opacity: 1;
    pointer-events: unset;
  }
}
@media (max-width: 767px) {
  body:has(.panel-toggle:not(#menu-panel-toggle):checked) side-panel[name="menu-panel"] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}
side-panel {
  inset: 0;
  z-index: 999;
  contain: strict;
  visibility: hidden;
  transition: var(--transition);
  position: fixed;
}
@media (max-width: 767px) {
  side-panel {
    pointer-events: none;
  }
}
@media (min-width: 768px) {
  side-panel[desktop-dropdown] {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    transition: var(--transition);
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px) translateZ(0);
    pointer-events: none;
    z-index: 2;
  }
}
side-panel side-panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
  backdrop-filter: blur(1px);
}
side-panel side-panel-content {
  --width: 400px;
  display: block;
  width: var(--width);
  position: fixed;
  top: 0;
  height: 100%;
  left: 0;
  background: #fff;
  overflow: auto;
  max-width: 83vw;
  outline: 0;
  touch-action: pan-y;
  z-index: 4;
  padding: 0;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  transition: var(--transition);
  translate: calc(-1 * var(--width)) 0;
  overscroll-behavior: none;
}
side-panel[right] side-panel-content {
  left: unset;
  right: 0;
  translate: var(--width) 0;
}
@media (max-width: 767px) {
  side-panel side-panel-content {
    padding: 0;
    overflow: hidden;
  }
  side-panel side-panel-content > label {
    line-height: 50px;
    width: 100%;
    text-align: right;
    position: relative;
    padding-right: 20px;
    top: -15px;
  }
  side-panel side-panel-content ul {
    line-height: 40px;
    list-style: none;
  }
}
@media (min-width: 768px) {
  side-panel[name="filters"] {
    display: contents;
    visibility: visible;
  }
  side-panel[name="filters"] > label {
    display: none;
  }
  side-panel[name="filters"] side-panel-content {
    display: contents;
  }
  side-panel[name="filters"] side-panel-content > label {
    display: none;
  }
}
@media (min-width: 768px) {
  side-panel[desktop-dropdown] {
    display: block;
    visibility: visible;
  }
  side-panel[desktop-dropdown] > label {
    display: none;
  }
  side-panel[desktop-dropdown] side-panel-content {
    display: contents;
  }
  side-panel[desktop-dropdown] side-panel-content > label {
    display: none;
  }
  side-panel[name="side-panel"] side-panel-content ul {
    list-style: none;
    padding: 10px;
    line-height: 25px;
    color: #000;
    max-height: 500px;
    overflow-y: auto;
    overscroll-behavior-block: contain;
  }
  side-panel[name="side-panel"] side-panel-content li {
    padding: 0 10px;
  }
  side-panel[name="side-panel"] side-panel-content li a {
    display: block;
  }
  side-panel[name="side-panel"] side-panel-content li:hover {
    background: var(--bg);
  }
  side-panel[name="side-panel"] side-panel-content ul ul {
    display: none;
  }
  side-panel[name="side-panel"] side-panel-content ul li:has(ul):hover ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: absolute;
    left: 400px;
    top: 0;
    background: #fff;
    right: 0;
    height: 100%;
  }
}
@media (min-width: 768px) {
  side-panel[desktop-dropdown] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: var(--transition);
    pointer-events: none;
    z-index: 2;
  }
  body:has(.panel-toggle:checked) .panel-toggle:checked + side-panel[desktop-dropdown] {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  side-panel[desktop-dropdown] side-panel-content {
    display: block;
    width: 100%;
    position: static;
    transform: none !important; /* Ważne - wyłącz transform */
    translate: none !important; /* Wyłącz translate */
    box-shadow: none; /* Usuń shadow z content */
    background: transparent;
    overflow: visible;
    max-width: none;
    transition: none; /* Wyłącz transition na content */
  }
  side-panel[desktop-dropdown] side-panel-overlay {
    display: none;
  }
}
text-icon span {
  display: flex;
  line-height: 16px;
}
@media (max-width: 767px) {
  text-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
    aspect-ratio: 1/1;
    height: 50px;
    display: block;
  }
  text-icon span {
    display: none;
  }
  text-icon.svg-search {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0' /><path d='M21 21l-6 -6' /></svg>");
    background-size: 30px;
  }
  text-icon.svg-user {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' stroke-width='1.7' stroke='%23000000' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /><path d='M6 21v-2a4 4 0 0 1 4 -4h2.5' /><path d='M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M19.001 15.5v1.5' /><path d='M19.001 21v1.5' /><path d='M22.032 17.25l-1.299 .75' /><path d='M17.27 20l-1.3 .75' /><path d='M15.97 17.25l1.3 .75' /><path d='M20.733 20l1.3 .75' /></svg>");
    background-size: 30px;
  }
}
menu-bar label[for="cart-panel-toggle"],
menu-bar label[for="fav-panel-toggle"] {
  height: 100%;
  width: 50px;
  cursor: pointer;
}
@media (min-width: 768px) {
  menu-bar label[for="cart-panel-toggle"],
  menu-bar label[for="fav-panel-toggle"] {
    background-size: 34px;
  }
}
products-section {
  display: block;
  background: #fff;
  white-space: normal;
}
@media (min-width: 768px) {
  products-section:has(> section-banner) {
    display: grid;
    grid-template-areas: "banner content";
    grid-template-columns: 1fr 5fr;
    justify-items: unset;
    align-items: flex-start;
  }
  products-section:has(> section-banner) > div {
    margin-left: 10px;
  }
  products-section:has(> section-banner) products-listing > *:nth-child(n+6) {
    display: none;
  }
}
products-section > div {
  grid-area: content;
  padding: 30px 0 20px;
}
@media (max-width: 767px) {
  products-section > div {
    padding: 20px 0 10px;
  }
  products-section > div:has(section-description) {
    display: flex;
    flex-direction: column;
  }
  products-section > div:has(section-description) section-description {
    order: 1;
  }
}
products-section section-header {
  padding: 0 30px;
}
products-section section-header span {
  font-weight: 700;
}
@media (max-width: 767px) {
  products-section section-header {
    padding: 0 var(--container-padding);
  }
}
products-section section-banner {
  grid-area: banner;
  display: block;
  height: 100%;
  background-position: 0 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #f2f2f2;
}
section-header {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  margin-bottom: 25px;
/*&[small] {

        span, h1 {
            font-size: 16px;
            line-height: 16px;
            grid-column-start: 1;
            grid-column-end: span 3;
            text-align: left;

            &:after {
                left: 0;
            }
        }
    }*/
}
section-header span,
section-header h1,
section-header h2,
section-header h3 {
  display: block;
  text-align: center;
  grid-column-start: 2;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 22px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 768px) {
  section-header span:not(:has(+ a)):not(:has(+ label)),
  section-header h1:not(:has(+ a)):not(:has(+ label)),
  section-header h2:not(:has(+ a)):not(:has(+ label)),
  section-header h3:not(:has(+ a)):not(:has(+ label)) {
    grid-column-start: 1;
    grid-column-end: span 3;
  }
}
section-header span:after,
section-header h1:after,
section-header h2:after,
section-header h3:after {
  content: '';
  display: block;
  width: 100px;
  height: 2px;
  background: var(--green);
  position: absolute;
  top: calc(100% + 10px);
  left: calc(50% - 50px);
}
section-header a,
section-header label {
  text-align: right;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--blue);
  line-height: 14px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: right;
}
section-header label[x] {
  padding: 15px;
  position: absolute;
  right: 0;
  height: 50px;
  font-weight: bold;
  font-size: 20px;
}
@media (max-width: 767px) {
  section-header span,
  section-header h1 {
    font-size: 20px;
    grid-column-start: 1;
    grid-column-end: span 3;
    text-align: left;
  }
  section-header span:after,
  section-header h1:after {
    left: 0;
  }
  section-header span:has(+ a),
  section-header h1:has(+ a),
  section-header span:has(+ label),
  section-header h1:has(+ label) {
    grid-column-end: span 2;
  }
  section-header a,
  section-header label {
    font-size: 12px;
  }
}
section-header[left] span,
section-header[left] h1 {
  font-size: 20px;
  grid-column-start: 1;
  grid-column-end: span 3;
  text-align: left;
}
section-header[left] span:after,
section-header[left] h1:after {
  left: 0;
}
section-header[left] span:has(+ a),
section-header[left] h1:has(+ a),
section-header[left] span:has(+ label),
section-header[left] h1:has(+ label) {
  grid-column-end: span 2;
}
section-description {
  display: block;
  line-height: 1.5;
  padding: 20px 30px;
  font-size: 15px;
}
section-description * {
  padding: 0 !important;
  margin: 0 !important;
}
section-description a {
  color: var(--blue);
}
section-description p {
  margin: 1rem 0 !important;
}
section-description p:last-child {
  margin-bottom: 0 !important;
}
section-description h2,
section-description h3,
section-description h4 {
  margin: 1rem 0 !important;
  font-weight: 600;
}
section-description h2 {
  font-size: 150%;
}
section-description h3 {
  font-size: 117%;
}
section-description h4 {
  font-size: 100%;
}
section-description ul {
  list-style: disc;
  padding-left: 16px !important;
}
section-description li {
  padding-left: 2px !important;
}
section-description p.has-read-more~ *:not(.read-more) {
  display: none;
}
section-description p.has-read-more .read-more {
  color: var(--blue);
  text-transform: uppercase;
  margin-left: 6px !important;
  padding-left: 17px !important;
  cursor: pointer;
  white-space: nowrap;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAATlBMVEX///9pvOc+qt/f8Pnb7/lluuVguOXz+v3k8vrV7fik1u+My+xIruGGyeuCx+p5w+lZtuTO6fap2PCe1O9+xep0wehywOjp9PvS6/dTs+JkVz/gAAAAZklEQVQIHQXBhQHCQBAAsNxb3QXYf1ES6NeoNdYMnPNydN0xzSOcaQBKGulTBuhTtq0ALI82AFCayv6KatsJlT3U5vkR2gBAabYFgOmVUw/wSYUxFSCnC8Z5+nbdMM0XkO+IiLvgD1afA0VDf+OnAAAAAElFTkSuQmCC") left center no-repeat;
}
products-listing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  grid-column-gap: 10px;
  grid-row-gap: 30px;
  padding-bottom: 10px;
}
@media (min-width: 768px) {
  products-listing {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
products-listing.htmx-settling {
  opacity: 0.5;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
products-listing[mobile-horizontal] {
  --gap: 10px;
  --padding-end: 50px;
}
@media (max-width: 767px) {
  products-listing[mobile-horizontal] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap);
    overflow-x: auto;
/*scroll-snap-type: x mandatory;*/
    padding-right: var(--padding-end);
  }
  products-listing[mobile-horizontal] single-product {
    min-width: 175px;
    scroll-snap-align: center;
  }
  products-listing[mobile-horizontal]:after {
    content: "";
    position: absolute;
    height: 100%;
    margin: auto 0;
    width: calc(100vw / 4);
    border: 0;
    pointer-events: none;
    box-shadow: inset -70px 0 30px -30px var(--bg);
    right: 0;
  }
  products-listing[mobile-horizontal] + scroll-button {
    display: block;
    width: 40px;
    height: 40px;
    background: #fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-right' width='32' height='32' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23555' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 6l6 6l-6 6' /></svg>") center no-repeat;
    fill: #000;
    position: absolute;
    top: 30%;
    right: 20px;
    border: 2px solid #000;
    opacity: 0.2;
  }
  products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)) {
    --padding-end: 0;
  }
  products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)):after {
    display: none;
  }
  products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)) + scroll-button {
    display: none;
  }
  products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)):not(:has(single-product + single-product)) {
    justify-content: center;
  }
  products-listing[mobile-horizontal]:not(:has(single-product + single-product + single-product)):not(:has(single-product + single-product)) single-product {
    width: 50%;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  products-listing[mobile-horizontal] single-product {
    min-width: calc(50% + calc((var(--padding-end) - var(--gap)) / 2));
  }
}
products-listing single-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  text-align: center;
  padding: 0 10px;
}
products-listing single-product > a:has(img),
products-listing single-product img {
  width: 100%;
  display: block;
}
products-listing single-product > a:has(img) {
  padding: 15px 30px;
}
@media (max-width: 767px) {
  products-listing single-product > a:has(img) {
    padding: 10px;
  }
}
products-listing single-product product-name {
  display: block;
  color: #323232;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
}
products-listing single-product manufacturer-name {
  display: block;
  font-size: 12px;
  color: #777;
  font-weight: 600;
  text-transform: uppercase;
}
products-listing single-product product-brand {
  font-size: 12px;
  color: #777;
  font-weight: 600;
  text-transform: uppercase;
}
products-listing single-product product-price {
  font-weight: 600;
  color: var(--green);
  font-size: 18px;
  line-height: 30px;
}
products-listing single-product product-price[special] {
  color: var(--red);
}
products-listing single-product buy-button {
  display: block;
  color: #fff;
  background-color: var(--green);
  padding: 0 30px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
}
products-listing single-product buy-button:active {
  filter: brightness(0.95);
}
products-listing single-product product-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  margin-bottom: 20px;
  padding-top: 5px;
}
products-listing single-product[out-of-stock] img {
  opacity: 0.5;
}
products-listing single-product[out-of-stock] product-price {
  color: #808080;
}
products-listing single-product[out-of-stock] buy-button {
  background-color: #808080;
}
#categories-tree {
  font-size: 15px;
}
@media (max-width: 767px) {
  body:has([id^=cat-]:checked) .list-lvl1 > a,
  body:has([id^=cat-]:checked) .list-lvl1 > label {
    translate: -100%;
    pointer-events: none;
    opacity: 0;
  }
}
categories-list {
  text-transform: uppercase;
}
categories-list.relative {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
@media (max-width: 767px) {
  categories-list.relative {
    height: calc(100% - 62px);
  }
  categories-list nav {
    background: #fff;
    font-size: 14px;
  }
  categories-list nav input {
    display: none;
  }
  categories-list nav label {
    margin: 0;
    font-weight: bold;
  }
  categories-list nav label:has(> input:checked) + div {
    left: 0;
    visibility: visible;
    z-index: 1;
  }
  categories-list nav a {
    padding: 10px 15px;
    white-space: normal;
    min-height: var(--mobile-menu-height);
    display: flex;
    align-items: center;
    color: #333;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    line-height: 1.2;
    font-weight: bold;
  }
  categories-list nav a.grid-row {
    grid-column: 1/-1;
  }
  categories-list .list-lvl1 {
    display: grid;
    grid-template-columns: 1fr var(--mobile-menu-height);
  }
  categories-list .list-lvl1 > * {
    min-width: var(--mobile-menu-height);
  }
  categories-list .list-lvl1 > label {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: initial;
    border-bottom: 1px solid #ddd;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-right' width='32' height='32' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23555' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 6l6 6l-6 6' /></svg>") center no-repeat;
    background-size: 20px;
  }
  categories-list .list-lvl1,
  categories-list .list-lvl2 {
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    transition: all 0.15s cubic-bezier(0.07, 0.95, 0, 1);
  }
  categories-list .list-lvl2 {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 100%;
    height: 100%;
    visibility: hidden;
  }
  categories-list .list-lvl2 .go-back {
    padding: 10px 15px;
    line-height: 20px;
    white-space: normal;
    min-height: var(--mobile-menu-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    background: #ddd;
    font-weight: 700;
    font-size: 14px;
  }
  categories-list .list-lvl1 > a,
  categories-list .list-lvl1 > label {
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    translate: 0;
  }
  categories-list category-children :first-child {
    font-weight: bold;
  }
  categories-list category-children .grandchild {
    font-weight: normal !important;
    padding-left: 40px;
  }
}
@media (min-width: 768px) {
  categories-list {
    background: url("/catalog/view/theme/default/image/categories-banner.png") right center no-repeat;
  }
  categories-list nav {
    padding: 20px;
    line-height: 30px;
    color: #000;
    overflow-y: auto;
    overscroll-behavior-block: contain;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 600px;
  }
  categories-list nav > a {
    font-weight: bold;
    font-size: 15px;
  }
  categories-list nav a {
    padding: 0 10px;
    width: 340px;
  }
  categories-list nav a:hover {
    color: var(--blue);
  }
  categories-list nav a:has(+ label + div) {
    position: relative;
  }
  categories-list nav a:has(+ label + div):after {
    content: '＞';
    position: absolute;
    right: 20px;
  }
  categories-list nav a:has(+ label + div:hover) {
    color: var(--blue);
  }
  categories-list nav div {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    left: 350px;
    top: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-wrap: wrap;
    height: 100%;
    width: calc(100% - 362px - 350px);
    background-color: #fff;
    z-index: 1;
  }
  categories-list nav div:hover {
    visibility: visible;
    pointer-events: unset;
  }
  categories-list nav a:hover {
    background: var(--bg);
  }
  categories-list nav a:hover + label + div {
    visibility: visible;
    pointer-events: unset;
  }
  categories-list nav category-children {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    width: min-content;
  }
  categories-list nav category-children :first-child {
    font-weight: bold;
  }
  categories-list nav category-children a {
    width: unset !important;
    min-width: 250px;
  }
  categories-list nav category-children .grandchild {
    padding-left: 20px;
  }
}
.manufacturers white-container {
  padding: 30px 0 20px;
}
@media (max-width: 767px) {
  .manufacturers white-container {
    padding: 20px 0 10px;
  }
  .manufacturers white-container section-header {
    padding: 0 var(--container-padding);
  }
}
manufacturers-list {
  display: block;
  text-transform: uppercase;
  padding: 20px 30px;
  line-height: 35px;
  font-size: 15px;
  white-space: nowrap;
  overflow-y: auto;
  height: 100%;
}
manufacturers-list ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 767px) {
  manufacturers-list ul {
    grid-template-columns: 1fr;
  }
}
manufacturers-list ul.images {
  gap: 40px 0;
}
manufacturers-list ul.images a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  height: 100%;
}
manufacturers-list ul.images img {
  max-height: 80px;
  max-width: 150px;
}
@media (max-width: 767px) {
  manufacturers-list ul.images img {
    max-height: 100px;
    max-width: 70%;
  }
}
manufacturers-list li {
  overflow: hidden;
  text-overflow: ellipsis;
}
manufacturers-list .featured {
  font-weight: bold;
}
@media (max-width: 767px) {
  manufacturers-list {
    columns: unset;
  }
}
styled-select {
  display: block;
  position: relative;
}
styled-select select {
  border: none;
  width: 100%;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  background: var(--bg);
  color: #333;
  text-align: center;
  appearance: none;
  line-height: 2;
}
styled-select:after {
  content: '';
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjRweCcgaGVpZ2h0PScyNHB4JyB2aWV3Qm94PScwIDAgMjQgMjQnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00xMi43MDcxIDE0LjcwNzFDMTIuMzE2NiAxNS4wOTc2IDExLjY4MzQgMTUuMDk3NiAxMS4yOTI5IDE0LjcwNzFMNi4yOTI4OSA5LjcwNzExQzUuOTAyMzcgOS4zMTY1OCA1LjkwMjM3IDguNjgzNDIgNi4yOTI4OSA4LjI5Mjg5QzYuNjgzNDIgNy45MDIzNyA3LjMxNjU4IDcuOTAyMzcgNy43MDcxMSA4LjI5Mjg5TDEyIDEyLjU4NThMMTYuMjkyOSA4LjI5Mjg5QzE2LjY4MzQgNy45MDIzNyAxNy4zMTY2IDcuOTAyMzcgMTcuNzA3MSA4LjI5Mjg5QzE4LjA5NzYgOC42ODM0MiAxOC4wOTc2IDkuMzE2NTggMTcuNzA3MSA5LjcwNzExTDEyLjcwNzEgMTQuNzA3MVonIGZpbGw9JyMwMDAwMDAnLz48L3N2Zz4=");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 20px;
  position: absolute;
  right: 10px;
  height: 100%;
  width: 20px;
  top: 1px;
  pointer-events: none;
}
[loading="lazy"][onload] {
  opacity: 0;
  transition: 0.5s;
}
[loading="lazy"].loaded {
  opacity: 1;
}
footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  line-height: 1.5;
}
footer-columns ul {
  line-height: 20px;
}
@media (max-width: 767px) {
  footer-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  footer-columns ul {
    line-height: 30px;
  }
}
under-line {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
under-line:after {
  background-color: #ccc;
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 2px;
}
home-icon {
  display: block;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23919191' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M5 12l-2 0l9 -9l9 9l-2 0' /><path d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7' /><path d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6' /></svg>") center center no-repeat;
  background-size: 20px;
  width: 20px;
  height: 100%;
}
relative-container {
  display: block;
  position: relative;
}
footer {
  background: #000;
  color: #fff;
  padding: 40px 0;
  font-size: 14px;
}
sticky-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(100vh - 70px);
  background: rgba(0,0,0,0.7);
  opacity: 0;
  will-change: opacity;
  transition: var(--transition);
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(1px);
  display: block;
}
body:has(search-results:not(:empty)) {
  overflow: hidden;
}
body:has(search-results:not(:empty)) sticky-overlay {
  opacity: 1;
  pointer-events: unset;
}
search-results {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: var(--box-shadow);
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior-block: contain;
  max-height: calc(100vh - 75px);
}
@media (min-width: 768px) {
  search-results {
    max-height: calc(100vh - 150px);
  }
  search-results:has(products-section + products-section) {
    display: grid;
    grid-template-columns: 1fr 5fr;
  }
}
product-container {
  display: block;
}
product-container product-top {
  display: grid;
  grid-template-areas: "images title" "images details";
  grid-template-columns: 3fr 5fr;
  grid-template-rows: min-content 1fr;
  grid-column-gap: 20px;
}
@media (min-width: 768px) {
  product-container product-top:has(product-images ul) {
    grid-template-columns: 4fr 5fr;
  }
}
@media (max-width: 767px) {
  product-container product-top {
    grid-template-areas: "title" "images" "details";
    grid-template-columns: 1fr;
  }
}
product-container product-top product-title {
  display: block;
  grid-area: title;
  background: #fff;
  padding: 20px 25px 10px;
  position: relative;
}
@media (max-width: 767px) {
  product-container product-top product-title {
    background: none;
    padding: 10px;
    text-align: center;
  }
}
product-container product-top product-title .manufacturer {
  color: var(--blue);
  text-transform: uppercase;
}
product-container product-top product-title h1 .manufacturer {
  font-weight: bold;
}
product-container product-top product-title h1 span {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  word-spacing: -1px;
}
product-container product-top product-title h1 + h2 {
  line-height: 25px;
  font-style: italic;
}
product-container product-top product-images {
  display: flex;
  grid-area: images;
}
product-container product-top product-images main-image {
  display: block;
  padding: 10% 5%;
  background: #fff;
  flex: 1;
  position: relative;
}
product-container product-top product-images main-image img {
  margin: 0 auto;
}
@media (max-width: 767px) {
  product-container product-top product-images main-image {
    padding: 30px;
  }
}
product-container product-top product-images main-image fav-icon {
  display: block;
  width: 50px;
  line-height: 50px;
  font-size: 30px;
  cursor: pointer;
  text-align: center;
  position: absolute;
  top: 15px;
  right: 15px;
}
product-container product-top product-images ul {
  width: 100px;
  margin-right: 20px;
}
product-container product-top product-images ul li {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
}
product-container product-top product-images img {
  cursor: pointer;
}
@media (max-width: 767px) {
  product-container product-top product-images {
    flex-direction: column;
  }
  product-container product-top product-images ul {
    order: 2;
    display: flex;
    column-gap: 10px;
    width: 100%;
    margin: 10px 0 0;
  }
  product-container product-top product-images ul li {
    max-width: 100px;
  }
}
product-container product-top product-details {
  display: grid;
  grid-area: details;
  background: #fff;
  padding: 10px 25px 20px;
  grid-template-areas: "attrs price" "options options" "bottom bottom";
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  product-container product-top product-details[wide] {
    grid-template-columns: 2fr 1fr;
  }
}
@media (max-width: 767px) {
  product-container product-top product-details {
    grid-template-areas: "price" "options" "attrs" "bottom";
    grid-template-columns: 1fr;
  }
}
product-container product-top product-details product-attrs {
  display: flex;
  grid-area: attrs;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}
product-container product-top product-details product-attrs span {
  font-weight: normal;
}
product-container product-top product-details product-attrs span.bold {
  font-weight: bold;
}
product-container product-top product-details product-attrs .green {
  color: var(--green);
}
product-container product-top product-details product-attrs .red {
  color: var(--red);
}
product-container product-top product-details product-attrs .blue {
  color: var(--blue);
}
product-container product-top product-details product-attrs product-features {
  display: block;
  line-height: 25px;
  font-size: 15px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 20px;
}
product-container product-top product-details product-attrs product-features ul {
  list-style: disc;
  padding-left: 14px;
}
product-container product-top product-details product-price {
  display: block;
  grid-area: price;
  text-align: right;
}
@media (max-width: 767px) {
  product-container product-top product-details product-price {
    margin-bottom: 20px;
  }
}
product-container product-top product-details product-price price-normal {
  display: inline-block;
  font-size: 48px;
  color: var(--green);
  font-weight: 700;
  letter-spacing: -2px;
}
product-container product-top product-details product-price preorder-info {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: var(--blue);
  text-transform: uppercase;
  line-height: 2;
}
product-container product-top product-details product-price special-info {
  display: block;
  font-size: 10.5px;
  color: #4c4c4c;
  text-transform: uppercase;
}
product-container product-top product-details product-price price-old {
  display: inline-block;
  font-size: 25px;
  color: #050505;
  text-decoration: line-through;
  font-weight: 600;
  letter-spacing: -2px;
  vertical-align: bottom;
}
product-container product-top product-details product-price special-percent {
  display: inline-block;
  font-size: 28px;
  color: #fff;
  background: var(--red);
  padding: 0 6px;
  font-weight: 700;
  vertical-align: bottom;
  line-height: 36px;
  margin: 0 5px 0 10px;
}
product-container product-top product-details product-price special-percent.preorder {
  background: var(--blue);
}
product-container product-top product-details product-price price-new {
  display: inline-block;
  font-size: 48px;
  color: var(--red);
  font-weight: 700;
  letter-spacing: -2px;
  vertical-align: bottom;
  position: relative;
  top: 3px;
}
product-container product-top product-details product-price price-new + portion-text {
  color: var(--red);
  margin-top: 3px;
}
product-container product-top product-details product-price portion-text {
  display: block;
  font-size: 14px;
  color: var(--green);
}
product-container product-top product-details product-options {
  grid-area: options;
}
product-container product-top product-details product-variants {
  grid-area: variants;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 10px;
}
product-container product-top product-details product-variants a,
product-container product-top product-details product-variants span {
  background: var(--bg);
  font-size: 15px;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--bg);
  cursor: pointer;
  text-align: center;
}
product-container product-top product-details product-variants a.selected,
product-container product-top product-details product-variants span.selected,
product-container product-top product-details product-variants a[selected],
product-container product-top product-details product-variants span[selected] {
  border: 2px solid var(--green);
  background: var(--green);
  color: #fff;
  font-weight: bold;
}
product-container product-top product-details product-variants a.disabled,
product-container product-top product-details product-variants span.disabled,
product-container product-top product-details product-variants a[disabled],
product-container product-top product-details product-variants span[disabled] {
  color: #d3d3d3;
  pointer-events: none;
}
product-container product-top product-details product-variants a.disabled.selected,
product-container product-top product-details product-variants span.disabled.selected,
product-container product-top product-details product-variants a[disabled].selected,
product-container product-top product-details product-variants span[disabled].selected,
product-container product-top product-details product-variants a.disabled[selected],
product-container product-top product-details product-variants span.disabled[selected],
product-container product-top product-details product-variants a[disabled][selected],
product-container product-top product-details product-variants span[disabled][selected] {
  border: 2px solid var(--red);
}
product-container product-top product-details product-variants option.out-of-stock {
  color: #d3d3d3;
}
@media (max-width: 767px) {
  product-container product-top product-details product-variants {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
product-container product-top product-details product-buy {
  grid-area: buy;
  margin-top: auto;
}
product-container product-top product-details product-buy form {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
}
product-container product-top product-details product-buy form [name="quantity"] {
  width: 100px;
  height: 100%;
  vertical-align: bottom;
  text-align: left;
  padding-left: 40px;
}
product-container product-top product-details product-buy form button {
  flex: 1;
  background: var(--blue);
  color: #fff;
  border: 0;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 600;
}
product-container product-top product-details product-buy form button:active {
  filter: brightness(0.95);
}
product-container product-top product-details product-buy form button[readonly] {
  background: var(--green);
  color: #fff;
}
@media (max-width: 767px) {
  product-container product-top product-details product-buy {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    box-shadow: var(--box-shadow-top);
  }
  product-container product-top product-details product-buy form [name="quantity"] {
    width: 70px;
    padding-left: 20px;
  }
  product-container product-top product-details product-buy form button {
    font-size: 16px;
    font-weight: 700;
  }
  product-container product-top product-details product-buy form button svg {
    display: none;
  }
}
product-container sticky-shortcuts {
  display: block;
  position: sticky;
  top: 70px;
  z-index: 2;
  box-shadow: 0 1px 0px rgba(0,0,0,0.1);
  background-color: #fff;
  line-height: 50px;
  font-size: 15px;
  margin-top: 20px;
}
@media (max-width: 767px) {
  product-container sticky-shortcuts {
    top: 50px;
  }
}
product-container sticky-shortcuts > div {
  display: flex;
  max-width: 758px;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}
product-container sticky-shortcuts span {
  padding: 0 20px;
  cursor: pointer;
}
product-container sticky-shortcuts span.active {
  border-bottom: 2px solid var(--green);
}
product-container sticky-shortcuts span:hover {
  background: #fafafa;
}
product-container sticky-shortcuts span + span {
  border-left: 1px solid var(--bg);
}
product-container products-section {
  margin-top: 20px;
}
product-container product-description {
  display: block;
  background: #fff;
  line-height: 1.5;
  font-size: 15px;
  margin: 10px auto 0;
  padding: 0;
  max-width: 758px;
}
product-container product-description p {
  margin: 1rem 0;
}
product-container product-description p:last-child {
  margin-bottom: 0;
}
product-container product-description h2 {
  margin: 1rem 0;
  font-weight: bold;
}
product-container product-description ul {
  list-style: disc;
  padding-left: 16px;
}
product-container product-description li {
  padding-left: 2px;
}
product-container details {
  font-size: 15px;
  line-height: 1.5;
}
product-container details summary {
  font-size: 24px;
  line-height: 22px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  margin-top: 15px;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  product-container details summary {
    font-size: 20px;
  }
}
product-container details[open] summary {
  margin-bottom: 25px;
}
product-container details[open] summary:after {
  content: '';
  display: block;
  width: 100px;
  height: 2px;
  background: var(--green);
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
}
rating-info {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}
rating-stars {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: 20px;
  font-family: Times, serif;
  vertical-align: sub;
}
rating-stars::before {
  content: '★★★★★';
  letter-spacing: 3px;
  background: linear-gradient(90deg, #f5d710 var(--percent), #393a3d var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
lab-info {
  display: inline-block;
  position: absolute;
  top: 20px;
  right: 25px;
  padding-left: 30px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAEbElEQVQ4jXWUXYhUZRzGn/O+7/me79nd2S+0XV3dTVHSNAWzJKWIwhsviqCMKAi60EIwKOnOAqFCEKG6sTWRxAIpkbKPi9RKF/xYXTfX2l3XnNnZnZkzZ86Zc8573rcLF7aUnpv/zf95+P8vnp8ipcR9isI4aPI4jmPOCaGEapohDUO7fxOAck9EEIb1qufH0zRR4nBjxQtRpDJBmp1GsCyZTCVSpqL8f0Rtls/6F28a70WsuDj9rIZ0hFkXIwpoiEYzcpL1rW3eS7mCpavzF7G5KVEsVgL9kug6A3G5Wh8f4ze62PMENkUBEBy3ffVKM3dB2MOivDuX6TJN/a6V3B0zZf+2emA0u83FaDd5sTVdiFiFoakiloAEVORtPEiQr+hfFNvema5NRlE8H9Fwm6687uYHa6LckOMW8t7EwODuxLGDJQI9AQJoDLaBdhO9DEtq9Ptq9rPZqWDuESml6/jV1kEXo3k8VFA2aYivnyNHP+AnyFlLz7/w8mIB14VFIDVkCYgHp6TvJ2af7T2XsCzS9HhJPVFk+3PY0kfesNDjo7ZkjbK0XyNK8PWhS0cGxw3YSaQlAFApmYo2BUoz97Nf4wDoWzvfvqXtj4zLi7BLR4ePyQBeNusMPMHuXE3/NVI5+8OIoPTRdb06wCGlAgVEICTEthobLD1Nd+x8vageCvWJAI6htDMkOVwff69s7ch3rrt27WYySb75/Do3sXL1ApXZMQwFhMMxlJTFVxqim4DGSbuTKlYlHhqTH07jtI3eDPpn3CXHPvm1eKscUa5a+GjXL1tXHb14vpIDiTHTgi1J9DfpDSFAhBLnycbl2NfDXiWKXsVvNZymMD/d+8exL39qyXVsfmp9NpPxZG346pRmhz7GVORMdMdwBSIoYCQ20czE1p8GCv3YU8V5guKFofHDB08BytOvpPa8tj10zei4/+b7q3sHuI9cBqs4agS2yhdSDcRgmaaYKuHbABNMJrJ4uICNV875pVnnge78bWf4wFd7Qz7z+GNrVzzSQ6AmsEJDTiJS4lbmL1J1hegWUZsDBDkBIsAU1DmmxkdmdKpRnZz8WDsyeJ613ejuM+tFNUbdxXAdIyUc96OyRVsYY8ww1YSzKopWm6ppKWykfPndHd/9eLhGICbHHIbUgmUZAVHozFXL/qzLSeL3Eoo6TKO+PpFMzDU1CINb05fsrlEL5tDE6d3bT3mu15ZpDcM4YsXAVZ1iVBVhR4+67/Dm5V39ZVwzG0+mnW2FjtR82auVhiOumvnJaXEmCutUJbZYeic+6WBIRkYj8nnk6yTXke+3SLvpbbKqzxTaWigj82XPZG1UBpySrrWMN40TKayRtOSp5zTY0ggspE10WujjIMLto5UNbe1z/n/xAshkE6gucu7YRtLgZlWwpoWFEkIiTmOTHi8GN9TZ5a10bbpTJ3SeXPeCT8SyXvc8v8HVSa5NSiViMBXeGvsZk+YzqYxuMvxX90bMMUzIIIhiDikgAcqg6YSxe8139Q9axRCh/8Iu6QAAAABJRU5ErkJggg==") left center no-repeat;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  line-height: 22px;
}
@media (max-width: 767px) {
  lab-info {
    position: unset;
  }
}
menu-container {
  display: block;
  padding: var(--container-padding);
}
filterable-container {
  display: block;
}
@media (min-width: 768px) {
  filterable-container:has(filters-container) {
    display: grid;
    grid-template-columns: 1fr 5fr;
    column-gap: 20px;
  }
}
filterable-container filters-container {
  display: block;
  background: #fff;
}
@media (max-width: 767px) {
  filterable-container filters-container {
    position: fixed;
    inset: 0;
    overflow-y: auto;
  }
}
filterable-container filters-container filter-container {
  display: block;
  padding: var(--container-padding);
}
filterable-container filters-container filter-container ul {
  line-height: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 15px;
  list-style-position: inside;
  font-weight: 500;
  list-style: disc;
  list-style-position: inside;
  text-indent: -15px;
  padding-left: 19px;
}
@media (max-width: 768px) {
  filterable-container filters-container filter-container ul {
    gap: 10px;
  }
}
@media (min-width: 768px) {
  filterable-container filters-container filter-container {
    padding: 20px;
  }
}
white-container {
  display: block;
  background: #fff;
}
article.blog h1 {
  font-size: 34px;
  font-weight: 600;
  text-transform: none;
  text-align: center;
  margin: 10px 0 30px;
}
@media (max-width: 767px) {
  article.blog h1 {
    margin-bottom: 20px;
  }
}
article.blog white-container {
  padding: 30px 0 100px;
}
@media (max-width: 767px) {
  article.blog white-container {
    padding-top: 15px;
  }
}
article.blog .main_thumb {
  position: relative;
}
article.blog .main_thumb .article-img {
  width: 100%;
  max-width: 100%;
  max-height: 300px;
  object-fit: cover;
  aspect-ratio: 1;
}
article.blog .main_thumb .date_added {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  color: #111;
  box-shadow: 0 0 9px rgba(0,0,0,0.1);
  min-width: 53px;
  padding: 7px 4px 10px;
  text-align: center;
  line-height: 1;
}
article.blog .main_thumb .date_added .day {
  display: block;
  font-size: 24px;
  margin-bottom: 3px;
}
article.blog .main_thumb .date_added .year {
  display: block;
  font-size: 12px;
  margin-top: 7px;
}
article.blog .stats {
  margin: 20px;
  color: #777;
}
article.blog .stats i + i::before {
  content: "/";
  margin: 0 9px 0 8px;
  font-size: 9px;
  vertical-align: middle;
}
@media (max-width: 767px) {
  article.blog .stats {
    margin: 20px 0;
  }
}
article.blog h1,
article.blog h2,
article.blog h3,
article.blog h4,
article.blog h5,
article.blog h6 {
  font-weight: 600;
  line-height: 1.3;
}
article.blog h1 b,
article.blog h2 b,
article.blog h3 b,
article.blog h4 b,
article.blog h5 b,
article.blog h6 b {
  font-weight: inherit;
  display: contents;
}
article.blog h2,
article.blog h3,
article.blog h4 {
  margin-block: 20px;
}
article.blog h2 {
  font-size: 150%;
}
article.blog h3,
article.blog h4 {
  font-size: 117%;
}
article.blog .main_description {
  line-height: 1.7;
  font-size: 15px;
}
article.blog .main_description p {
  margin-block: 20px;
}
article.blog .main_description p:empty {
  display: none;
}
article.blog .main_description p span {
  display: contents;
}
article.blog .main_description ul,
article.blog .main_description ol {
  list-style: square;
  margin: 20px 30px;
}
article.blog .main_description ul li,
article.blog .main_description ol li {
  padding-left: 10px;
}
article.blog .main_description ul li p,
article.blog .main_description ol li p {
  margin: 0;
}
article.blog .main_description ul.collapsed,
article.blog .main_description ol.collapsed {
  display: none;
}
article.blog .main_description a {
  color: var(--blue);
  text-decoration: underline;
}
article.blog .main_description img {
  margin-block: 20px 0;
}
article.blog .main_description br {
  display: none;
}
article.blog .main_description button[data-target] {
  margin: 20px 0;
  padding: 10px 20px;
  display: block;
  cursor: pointer;
}
article.blog prev-next-articles {
  display: flex;
  flex-direction: row;
}
article.blog prev-next-articles a {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: min-content 1fr;
  grid-column-gap: 15px;
  grid-template-areas: "image text text" "image title title";
  text-align: left;
}
article.blog prev-next-articles a.next {
  grid-template-areas: "text text image" "title title image";
  text-align: right;
}
article.blog prev-next-articles a img {
  grid-area: image;
}
article.blog prev-next-articles a span {
  grid-area: text;
}
article.blog prev-next-articles a h4 {
  grid-area: title;
}
notifications-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  transition: var(--transition);
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(1px);
  visibility: hidden;
}
notifications-container:not(:empty) {
  opacity: 1;
  pointer-events: initial;
  visibility: visible;
}
body:has(notifications-container:not(:empty)) {
  overflow: hidden;
}
notification-dialog {
  padding: 20px;
  background: #fff;
  font-size: 16px;
  min-width: 300px;
  max-width: 90%;
  line-height: 1.3;
  position: relative;
}
@media (min-width: 768px) {
  notification-dialog {
    min-width: 500px;
  }
}
notification-dialog img {
  margin: 40px auto 20px;
}
@media (max-width: 767px) {
  notification-dialog img {
    display: none;
  }
}
notification-dialog .bold {
  font-weight: bold;
}
notification-dialog input[type="email"] {
  display: block;
  color: #000;
  background-color: #eee;
  padding: 0 30px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
  width: 100%;
  margin-top: 20px;
}
notification-dialog button,
notification-dialog buy-button {
  display: block;
  color: #fff;
  background-color: var(--green, #64bd12);
  padding: 0 30px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
}
notification-dialog button[blue],
notification-dialog buy-button[blue] {
  background-color: var(--blue);
}
notification-dialog button:active,
notification-dialog buy-button:active {
  filter: brightness(0.95);
}
notification-dialog a button,
notification-dialog a buy-button {
  margin-top: 20px;
}
crypted-email {
  cursor: pointer;
}
crypted-email:after {
  content: attr(data-name) "@" attr(data-domain);
}
.latest-articles {
  display: block;
  background: #fff;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .latest-articles single-product {
    margin: 0 20px;
  }
}
.blue-heading {
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  transform: skew(-5deg, 0deg);
  width: auto;
  padding-right: 20px;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .blue-heading {
    font-size: 20px;
    width: 80%;
  }
}
.blue-heading:before {
  content: '';
  display: block;
  width: 100%;
  background: #40a8de;
  transform: skew(-5deg, 0deg);
  z-index: -1;
  position: absolute;
  top: -3px;
  left: -10px;
  height: calc(100% + 8px);
}
/* roboto-regular - latin_latin-ext */
@font-face {
  font-display: fallback; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/roboto-v30-latin_latin-ext-regular.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin_latin-ext */
@font-face {
  font-display: fallback; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/roboto-v30-latin_latin-ext-700.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}