/** Shopify CDN: Minification failed

Line 8771:14 Expected identifier but found whitespace
Line 8771:15 Unexpected "var("

**/
@charset "UTF-8";
/**
 * Swiper 8.4.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2022 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 12, 2022
 */
@font-face {
  font-family: "swiper-icons";
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
  /* Direction multiplier for transforms logical properties can't express (e.g. slide-in
     translateX). LTR = 1, RTL = -1. See references/css-conversion.md's Motion pattern. */
  --dir: 1;
}
[dir="rtl"] {
  --dir: -1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3D Effects */
.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
}

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-button-lock {
  display: none;
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}

/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev,
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  backface-visibility: hidden;
  overflow: hidden;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
body {
  margin: 0;
}

/**
   * Render the `main` element consistently in IE.
   */
main {
  display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
     ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
  background-color: transparent;
  color: var(--color-link);
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
  font-weight: var(--font-body-weight-bold);
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */
small {
  font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
     ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
  border-style: none;
}

/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
   * Correct the padding in Firefox.
   */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
  vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
  overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
  display: block;
  transition: all 0.3s ease;
}

/*
   * Add the correct display in all browsers.
   */
summary {
  display: list-item;
}

/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
  display: none;
}

/**
   * Add the correct display in IE 10.
   */
[hidden] {
  display: none;
}

ul {
  list-style-type: none;
}

ol {
  margin-inline-start: 18px;
}

li {
  margin-bottom: 8px;
  color: var(--color-text);
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  letter-spacing: var(--body-letter-spacing);
}
@media (max-width: 767px) {
  li {
    font-size: calc(var(--font-body-scale) * 14px);
    line-height: calc(var(--font-body-scale) * 14px * var(--body-line-height));
    letter-spacing: var(--body-letter-spacing);
  }
}

p {
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  letter-spacing: var(--body-letter-spacing);
  font-weight: var(--font-body-weight);
  margin-bottom: 8px;
  word-break: break-word;
}

blockquote {
  font-size: calc(var(--font-body-scale) * 20px);
  line-height: calc(var(--font-body-scale) * 20px * var(--body-line-height));
  padding-block: 10px;
  padding-inline-start: 24px;
  color: var(--color-text);
  position: relative;
  margin-bottom: 8px;
}
blockquote::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: rgba(var(--color-text-rgb));
  position: absolute;
  inset-inline-start: 0;
  top: 0;
}

select {
  border: none;
  width: 100%;
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  letter-spacing: var(--body-letter-spacing);
  padding-block: 13px;
  padding-inline: 18px 30px;
  border: 1px solid var(--color-input-color);
  background-color: transparent;
  color: var(--color-input-color);
  /* Firefox */
  /* Safari and Chrome */
  appearance: none;
  border-radius: var(--radius-base);
  position: relative;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  select {
    padding: 9px 38px 9px 18px;
  }
}

.no-js .required {
  display: none !important;
}
.no-js .optional {
  display: block !important;
}
.no-js .main-product .gift__card-form .recipient-form .recipient-fields {
  display: block;
}
.no-js .main-product .recipient-checkbox {
  display: none;
}
.no-js .js-element {
  display: none !important;
}
.no-js .accordion__item[open] .accordion__item__head::after {
  transform: rotate(0deg);
  opacity: 0;
  transition: 0.4s ease transform, 0.6s ease opacity;
}
.no-js .beforeAfter__section.slider-enabled {
  padding-bottom: 0;
}
.no-js .beforeAfter__section.slider-enabled .beforeAfter__media {
  padding-bottom: 16px;
}
.no-js .beforeAfter__section .swiper-wrapper {
  flex-direction: column;
  row-gap: 16px;
}
.no-js .lookBook__foregroundContainer {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.no-js .lookBook__foregroundContainer:not(:first-child) {
  display: none;
}
.no-js .lookBook__foregroundBlock {
  position: relative;
}
.no-js .lookBook__foregroundHeading {
  top: 100%;
  bottom: unset;
}
.no-js .lookBook__productsWrp {
  overflow: auto;
  margin: 0 15px;
  scroll-snap-type: x mandatory;
}
@media screen and (min-width: 768px) {
  .no-js .lookBook__productsWrp {
    margin-inline-start: 0;
  }
}
.no-js .lookBook__productsSlider {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0 15px 15px;
}
.no-js .lookBook__productsSlider .swiper-slide {
  width: calc(50% - 12px);
  scroll-snap-align: start;
}
@media screen and (min-width: 768px) {
  .no-js .lookBook__productsSlider {
    margin: 0 15px 15px 0;
  }
  .no-js .lookBook__productsSlider .swiper-slide {
    width: calc(47% - 12px);
  }
}
.no-js .slideshow__slideImg default-player {
  position: absolute;
}

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

*:focus {
  outline: none;
}

*:focus-visible {
  outline: var(--COLOR-CYAN-BLUE) auto 2px;
}

body {
  font-family: var(--font-body-family);
  font-size: calc(var(--font-body-scale) * 16px);
  font-weight: var(--font-body-weight);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  letter-spacing: var(--body-letter-spacing);
}

/* The class half of this rule - .h1 through .h6 - has been removed with the
   rest of the legacy heading classes. The element half stays: it is the
   theme base heading typography and is not part of the merchant scale. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-head-family);
  color: var(--color-text);
  margin-bottom: 8px;
  word-break: break-word;
  font-weight: var(--font-header-weight);
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
}

.mt-auto {
  margin-top: auto;
}

.m-0 {
  margin: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-1 {
  margin-bottom: 1rem;
}
@media (max-width: 991px) {
  .mb-1 {
    margin-bottom: 0.5rem;
  }
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-3 {
  margin-bottom: 3rem;
}

.me-1 {
  margin-inline-end: 0.5rem;
}

.me-2 {
  margin-inline-end: 8px;
}

.ml-2 {
  margin-inline-start: 8px;
}

.ml-12 {
  margin-inline-start: 12px;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mb-5 {
  margin-bottom: 5 !important;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mt-7 {
  margin-top: 7px;
}

.mb-4 {
  margin-bottom: 4px;
}

.mt-4 {
  margin-top: 4px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .mt-md-0 {
    margin-top: 0;
  }
}

.fnt-heading {
  font-family: var(--font-head-family);
}

.fnt-body {
  font-family: var(--font-body-family) !important;
}

.fnt-heading-weight {
  font-weight: var(--font-header-weight) !important;
}

.fnt-body-weight-regular {
  font-weight: var(--font-body-weight) !important;
}

.fnt-body-weight-bold {
  font-weight: var(--font-body-weight-bold) !important;
}

.line-height-none {
  line-height: 0 !important;
}

.line-height-unset {
  line-height: unset !important;
}

/* This was ".fnt-14, .footer__text-content p". The .fnt-14 half goes with the
   rest of the legacy size ladder; this half stays, because it is a plain
   descendant selector rather than a size utility and nothing in the
   merchant-controlled scale reaches it. The values are the literals the
   shared rule resolved to: a 1.1 body scale on a 14px base, at the 1.3 body
   line-height. font-weight is deliberately not restated - the p element rule
   earlier in this file already sets the same var(--font-body-weight), so
   repeating it would only look meaningful. */
.footer__text-content p {
  font-size: 15.4px;
  line-height: 20.02px;
  letter-spacing: 0.01em;
}

.clr-w {
  color: var(--white);
}

.text-clr-secondary {
  color: var(--COLOR-TEXT-SECONDARY);
}

.text-color {
  color: var(--color-text);
}

.text-color {
  color: var(--color-text);
}

.clr-black {
  color: var(--color-text);
}

.clr-white {
  color: var(--white);
}

.clr-17 {
  color: var(--clr-17);
}

.clr-3a {
  color: var(--COLOR-3A);
}

.clr-73 {
  color: var(--clr-73) !important;
}

.text-center {
  text-align: center;
}
@media (max-width: 767px) {
  .text-center-md {
    text-align: center !important;
  }
}
.text-left {
  text-align: start;
}
@media (max-width: 767px) {
  .text-left-md {
    text-align: start !important;
  }
}
.text-right {
  text-align: end;
}
@media (max-width: 767px) {
  .text-right-md {
    text-align: end !important;
  }
}
.text-upper {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-lower {
  text-transform: lowercase;
}

@media (min-width: 768px) {
  .margin-center {
    margin-inline: auto !important;
  }
}
@media (max-width: 767px) {
  .margin-center-md {
    margin-inline: auto !important;
  }
}
@media (min-width: 768px) {
  .margin-left {
    margin-inline-end: auto !important;
  }
}
@media (max-width: 767px) {
  .margin-left-md {
    margin-inline-end: auto !important;
  }
}
@media (min-width: 768px) {
  .margin-right {
    margin-inline-start: auto !important;
  }
}
@media (max-width: 767px) {
  .margin-right-md {
    margin-inline-start: auto !important;
  }
}

.text-decoration-underline {
  text-decoration: underline;
}
.text-decoration-line-through {
  text-decoration: line-through;
}
.text-decoration-none {
  text-decoration: none;
}

.container {
  max-width: var(--container-width);
  width: 100%;
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.right-container {
  max-width: 100%;
  margin-inline-start: auto;
  margin-inline-end: 0;
  padding-inline-start: 15px;
}
@media (min-width: 1300px) {
  .right-container {
    max-width: calc((100% - var(--container-width)) / 2 + var(--container-width));
  }
}

@media screen and (min-width: 992px) {
  .container-fixed {
    padding-inline: 84px;
  }
}

.row,
.d-flex {
  display: flex;
}
.row-dir-r,
.d-flex-dir-r {
  flex-direction: row;
}
.row-dir-c,
.d-flex-dir-c {
  flex-direction: column !important;
}
.row-shrink-0,
.d-flex-shrink-0 {
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .row-md-row,
.d-flex-md-row {
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .row-md-row-reverse,
.d-flex-md-row-reverse {
    flex-direction: row-reverse;
  }
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

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

.flex-start {
  justify-content: flex-start !important;
}

.res-flex {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .res-flex {
    flex-direction: row;
  }
}

.flex-reverse {
  display: flex;
  flex-direction: column;
}
@media (min-width: 767px) {
  .flex-reverse {
    flex-direction: row-reverse;
  }
}

.d-v-center {
  display: flex;
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}
.justify-content-space-btw {
  justify-content: space-between;
}
.justify-content-space-around {
  justify-content: space-around;
}
.justify-content-start {
  justify-content: start;
}
.justify-content-end {
  justify-content: end !important;
}
.justify-content-space-evenly {
  justify-content: space-evenly;
}

.justify-content-left {
  justify-content: start;
}
@media (max-width: 767px) {
  .justify-content-left-md {
    justify-content: start !important;
  }
}
.justify-content-center {
  justify-content: center;
}
@media (max-width: 767px) {
  .justify-content-center-md {
    justify-content: center !important;
  }
}
.justify-content-right {
  justify-content: end;
}
@media (max-width: 767px) {
  .justify-content-right-md {
    justify-content: end !important;
  }
}

.align-item-center {
  align-items: center;
}
@media (max-width: 767px) {
  .align-item-center-md {
    align-items: center !important;
  }
}
.align-item-start, .align-item-left {
  align-items: flex-start;
}
@media (max-width: 767px) {
  .align-item-start-md, .align-item-left-md {
    align-items: flex-start !important;
  }
}
.align-item-end, .align-item-right {
  align-items: flex-end;
}
@media (max-width: 767px) {
  .align-item-end-md, .align-item-right-md {
    align-items: flex-end !important;
  }
}

.column-gap-2 {
  column-gap: 2px;
}
.column-gap-4 {
  column-gap: 4px;
}
.column-gap-6 {
  column-gap: 6px;
}
.column-gap-8 {
  column-gap: 8px;
}

.row-gap-2 {
  row-gap: 2px;
}
.row-gap-4 {
  row-gap: 4px;
}
.row-gap-6 {
  row-gap: 6px;
}
.row-gap-8 {
  row-gap: 8px;
}

.error__drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  transition: all 0.3s ease-out;
}
.error__drawer.header__toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: unset;
  z-index: 101;
  transform: translateY(-100%);
  text-align: center;
}
.error__drawer.header__toast.active {
  transform: translateY(0);
}
.error__drawer.error {
  color: var(--error-text-color);
  background: var(--error-background-color);
}
.error__drawer.success {
  color: var(--success-text-color);
  background: var(--success-background-color);
}
.error__drawer p {
  margin: 0;
}
.error__drawer__wrapper {
  padding: 24px;
}
.error__drawer.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(100%);
  transition: all 0.3s ease-in;
}

.custom__message {
  color: var(--text-color);
  background: var(--bg-color);
}
.custom__message.error {
  --text-color: var(--error-text-color);
  --bg-color: var(--error-background-color);
}
.custom__message.success {
  --text-color: var(--success-text-color);
  --bg-color: var(--success-background-color);
}
.custom__message .close__message {
  cursor: pointer;
  inset-inline-end: 9px;
  top: 5px;
}
.custom__message p {
  margin: 0;
}
.custom__message__wrapper {
  padding: 10px 24px;
}
.custom__message .icon-wrap {
  margin-top: 2px;
}

.accordion__item__head {
  padding-block: 16px;
  padding-inline: 0 20px;
  cursor: pointer;
  position: relative;
}
.accordion__item__head::before {
  position: absolute;
  content: "";
  width: 15px;
  height: var(--icon-thickness, 2px);
  background-color: var(--color-text);
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
}
.accordion__item__head::after {
  position: absolute;
  content: "";
  inset-inline-end: 0;
  top: 50%;
  width: 15px;
  height: var(--icon-thickness, 2px);
  background-color: var(--color-text);
  opacity: 1;
  transition: 0.4s ease transform, 0.4s ease opacity;
  transform: rotate(90deg);
}
.accordion__item__head p {
  color: var(--color-text);
  margin: 0;
}
.accordion__item[aria-expanded=true] .accordion__item__head::after, .accordion__item[aria-expanded=true].active .accordion__item__head::after {
  transform: rotate(0deg);
  opacity: 0;
}
.accordion__item__body {
  padding-bottom: 16px;
}
.accordion__item__body p {
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
}
@media (max-width: 767px) {
  .accordion__item__body p {
    font-size: calc(var(--font-body-scale) * 14px);
    line-height: calc(var(--font-body-scale) * 14px * var(--body-line-height));
  }
}
.accordion__item__body p,
.accordion__item__body h5 {
  color: var(--color-text);
}
.accordion__item__body.active {
  transition: max-height 0.3s ease-in;
}
.accordion__item__image {
  width: var(--desktop-image-width);
}
@media screen and (max-width: 767px) {
  .accordion__item__image {
    width: var(--mobile-image-width);
  }
}

.shimmer {
  background: #dbdbdb;
  background-image: linear-gradient(to right, #dbdbdb 0%, #d8d8d8 20%, #dbdbdb 40%, #dbdbdb 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  display: inline-block;
  position: relative;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}

.image__box {
  width: 100%;
  min-height: 136px;
}

.head__box {
  width: 100%;
  height: 40px;
}

.head__box {
  width: 100%;
  min-height: 30px;
}

.text__box {
  width: 50%;
  min-height: 30px;
}

@keyframes placeholderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.grid-layout {
  display: grid;
  gap: var(--gap, 20px);
}
.grid-layout li {
  margin-bottom: 0;
}
.grid-layout--1-desktop {
  grid-template-columns: repeat(1, 1fr) !important;
}
.grid-layout--2-desktop {
  grid-template-columns: repeat(2, 1fr) !important;
}
.grid-layout--3-desktop {
  grid-template-columns: repeat(3, 1fr) !important;
}
.grid-layout--4-desktop {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1024px) {
  .grid-layout--4-desktop {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
.grid-layout--5-desktop {
  grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 991px) {
  .grid-layout--5-desktop {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 656px) {
  .grid-layout--1-mobile {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .grid-layout--2-mobile {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .grid-layout--3-mobile {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.show-only--desktop {
  display: none;
}
@media screen and (min-width: 1025px) {
  .show-only--desktop {
    display: block !important;
  }
}
.show-only--tab {
  display: none;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .show-only--tab {
    display: block;
  }
}
.show-only--sm-mobile {
  display: none;
}
@media screen and (max-width: 520px) {
  .show-only--sm-mobile {
    display: block;
  }
}
.show-only--mobile {
  display: none;
}
@media screen and (min-width: 521px) and (max-width: 767px) {
  .show-only--mobile {
    display: block;
  }
}
.show-only--from-mobile {
  display: none;
}
@media screen and (min-width: 521px) {
  .show-only--from-mobile {
    display: block;
  }
}
.show-only--from-tab {
  display: none;
}
@media screen and (min-width: 768px) {
  .show-only--from-tab {
    display: block;
  }
}

.aspect-ratio-portrait {
  aspect-ratio: 0.8;
}
.aspect-ratio-portrait-9-16 {
  aspect-ratio: 0.6;
}
.aspect-ratio-square {
  aspect-ratio: 1/1;
}
.aspect-ratio-landscape {
  aspect-ratio: 1.3;
}
.aspect-ratio-adapt {
  aspect-ratio: var(--aspect-ratio);
}
@media screen and (min-width: 768px) {
  .aspect-ratio-md-portrait {
    aspect-ratio: 0.8;
  }
  .aspect-ratio-md-portrait-9-16 {
    aspect-ratio: 0.6;
  }
  .aspect-ratio-md-square {
    aspect-ratio: 1;
  }
  .aspect-ratio-md-landscape {
    aspect-ratio: 1.3;
  }
  .aspect-ratio-md-adapt {
    aspect-ratio: var(--aspect-ratio);
  }
}
@media screen and (max-width: 767px) {
  .aspect-ratio-mobile-portrait {
    aspect-ratio: 0.8;
  }
  .aspect-ratio-mobile-square {
    aspect-ratio: 1;
  }
  .aspect-ratio-mobile-landscape {
    aspect-ratio: 1.3;
  }
  .aspect-ratio-mobile-adapt {
    aspect-ratio: var(--aspect-ratio-mobile);
  }
}

.pb-0 {
  padding-bottom: 0 !important;
}

.h-auto {
  height: auto;
}

.h-100 {
  height: 100% !important;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.d-center {
  display: flex;
  justify-content: center;
}

.d-v-center {
  display: flex;
  align-items: center;
}

.RTE-content {
  word-wrap: break-word;
}
.RTE-content > * {
  color: var(--color-text);
}
.RTE-contentul,
.RTE-content ul {
  list-style-type: disc;
  margin-inline-start: 18px;
}
.RTE-content ol {
  margin-inline-start: 24px;
}
.RTE-content h1,
.RTE-content h2,
.RTE-content h3,
.RTE-content h4,
.RTE-content h5,
.RTE-content h6 {
  margin: 8px 0;
}
.RTE-content table {
  border: 1px solid rgba(var(--color-border-rgba));
  border-collapse: collapse;
}
.RTE-content table th,
.RTE-content table td {
  border: 1px solid rgba(var(--color-border-rgba));
  padding: 8px;
}
.RTE-content video,
.RTE-content iframe,
.RTE-content img {
  max-width: 100%;
  height: auto;
}
.RTE-content video,
.RTE-content iframe {
  aspect-ratio: 16/9;
  width: 100%;
}
.RTE-content .scroll-table-wrapper {
  overflow: auto;
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none;
  }
}

@media (min-width: 992px) {
  .mobile-only {
    display: none !important;
  }
}

@media (min-width: 1220px) {
  .mobile-lg {
    display: none !important;
  }
}

@media (max-width: 1219px) {
  .desktop-lg {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .desktop-only {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .tab-only {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .mobile-sm-only {
    display: none !important;
  }
}

.d-none {
  display: none !important;
}

.w-100 {
  width: 100% !important;
}

.d-inline {
  display: inline;
}

.w-50 {
  width: 50%;
}
@media (max-width: 767px) {
  .w-50 {
    width: 100%;
  }
}

@media (max-width: 1335px) {
  .desktop-lg-xl {
    display: none;
  }
}

@media (min-width: 1336px) {
  .mobile-lg-xl {
    display: none;
  }
}

.no-select {
  -webkit-user-select: none;
  user-select: none;
}

.visibility-hidden {
  visibility: hidden;
}

.visually-hidden {
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.skip-to-content-link:focus {
  z-index: 9999 !important;
  overflow: auto !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: unset !important;
  position: absolute;
  transform: translateY(50px);
  padding: 18px 32px;
}

.btn {
  --timing-duration: 0.4s;
  padding: 18px 32px;
  font-family: var(--font-button-family);
  font-weight: var(--font-button-weight);
  font-size: var(--button-font-size);
  line-height: calc(var(--button-font-size) * var(--button-line-height));
  letter-spacing: var(--button-letter-spacing);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius-base);
  position: relative;
  transition: var(--timing-duration) ease all;
  overflow: hidden;
  z-index: 1;
}
@media (max-width: 767px) {
  .btn {
    padding: 14px 16px;
    font-size: calc(var(--button-font-size) - 0.125rem);
  }
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  inset-inline-start: 0;
  width: 0;
  padding-top: 95%;
  border-radius: 50%;
  transform: scale(1.15) rotate(-20deg);
  transform-origin: left bottom;
  transition-property: width, transform;
  transition-duration: var(--timing-duration);
  background-color: var(--color-hover-button-background);
}
/* RTL: negate rotate angle AND mirror transform-origin so the sweep is a true bilateral mirror
   of the LTR geometry. Changing only transform-origin (as in the previous attempt) pivots the
   same CCW rotation from the wrong corner, producing a different slant — not a mirror. */
[dir="rtl"] .btn::after {
  transform: scale(1.15) rotate(20deg);
  transform-origin: right bottom;
}
@media screen and (min-width: 992px) {
  .btn:hover {
    color: var(--color-hover-button-label);
  }
  .btn:hover::after {
    width: 130%;
  }
}
.btn--sm {
  padding: 11px 20px;
  font-size: calc(var(--button-font-size) - 0.125rem);
}
.btn--lg {
  width: 140px;
}
.btn--small {
  padding: 14px 16px;
  font-size: calc(var(--button-font-size) - 0.125rem);
}
.btn--fill {
  border: 1px solid var(--color-button-border);
  color: var(--color-button-text);
  background-color: var(--color-button-background);
  text-transform: uppercase;
}
@media screen and (max-width: 991px) {
  .btn--fill {
    transition: unset;
  }
}
.btn--fill:hover {
  color: var(--color-hover-button-label);
  border: 1px solid var(--color-hover-button-background);
}
.btn--fill:hover::before {
  background-color: var(--color-hover-button-background);
}
@media screen and (min-width: 991px) {
  .btn--fill:hover::before {
    transition: background-color 0.2s ease;
    transition-delay: 0.1s;
  }
}
.btn--fill::before {
  background-color: var(--color-button-background);
}
.btn--fill.disable, .btn--fill[disabled] {
  pointer-events: none;
  opacity: 0.5;
}
.btn--fill.loadingState {
  background-color: var(--color-button-background);
}
.btn--no-style {
  padding: 0;
  background: none;
  border: none;
  color: var(--color-button-text);
}
.btn--no-style.loadingState {
  opacity: 0.6;
}
.btn--w-transparent {
  background: #ffffff;
  color: var(--clr-6f);
  padding: 12px;
  border: 1px solid var(--COLOR-AB);
  transition: 0.5s ease all;
}
.btn--w-transparent .btn--preloader--circular {
  border-color: var(--COLOR-AB) !important;
}
.btn--w-transparent .checkmark:after {
  border-right: 2px solid var(--COLOR-AB) !important;
  border-top: 2px solid var(--COLOR-AB) !important;
}
.btn--border {
  border: 1px solid var(--color-button-border-outline);
  color: var(--color-button-text-outline);
  background-color: transparent;
  transition: all 0.2s ease-in;
  text-transform: uppercase;
}
@media screen and (max-width: 991px) {
  .btn--border {
    transition: unset;
  }
}
.btn--border::before {
  background-color: transparent;
}
.btn--border:hover {
  color: var(--color-hover-button-label);
  border-color: var(--color-hover-button-background);
  background-color: var(--color-hover-button-background);
}
@media screen and (min-width: 992px) {
  .btn--border:hover {
    background-color: transparent;
  }
}
.btn--border:hover::after {
  display: block;
  border-width: 2px;
}
.btn--border.disable, .btn--border[disabled] {
  color: var(--color-button-text-outline);
  border: 1px solid var(--color-button-border-outline);
  pointer-events: none;
  opacity: 0.5;
}
.btn--border.loadingState .btn--preloader--circular {
  border-color: var(--color-button-border-outline) !important;
}
.btn--border.completedState .btn--preloader .checkmark {
  display: none;
}
.btn--border.completedState .btn--preloader .checkmark:after {
  border-right: 2px solid var(--color-button-border-outline) !important;
  border-top: 2px solid var(--color-button-border-outline) !important;
}
.btn.loadingState .btn--text {
  display: none;
}
.btn.loadingState .btn--preloader {
  display: none;
  display: block;
}
.btn.loadingState .btn--preloader .btn--preloader--circular {
  border: 1px solid var(--color-button-text);
  border-left-color: var(--color-button-text);
  animation: loader-spin 1.2s infinite linear;
  position: relative;
  vertical-align: top;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-block;
}
.btn.loadingState .btn--preloader .checkmark {
  display: none;
}
.btn.loadingState .btn--preloader .checkmark.draw:after {
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}
.btn.loadingState .btn--preloader .checkmark:after {
  opacity: 1;
  height: 9px;
  width: 4px;
  transform-origin: left top;
  border-right: 2px solid var(--color-button-text);
  border-top: 2px solid var(--color-button-text);
  content: "";
  left: 3.25px;
  top: 10px;
  position: absolute;
}
.btn.completedState .btn--preloader .btn--preloader--circular {
  animation: none;
  border-color: var(--color-button-text);
  transition: border 500ms ease-out;
}
.btn.completedState .btn--preloader .checkmark {
  display: block;
}
@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 4px;
    opacity: 1;
  }
  40% {
    height: 9px;
    width: 4px;
    opacity: 1;
  }
  100% {
    height: 9px;
    width: 4px;
    opacity: 1;
  }
}
.btn--transparent {
  background-color: transparent;
  border: none;
}
.btn--icon {
  border-radius: var(--radius-base);
  overflow: hidden;
}
.btn--icon::after {
  padding-top: 115%;
  top: 8px;
}
.btn--icon:hover path,
.btn--icon:hover circle,
.btn--icon:hover rect {
  --color-button-text: var(--color-hover-button-label) ;
}

.btn-icon-with-content::after {
  padding-top: 115%;
  top: 8px;
}
.btn-icon-with-content:hover path,
.btn-icon-with-content:hover circle,
.btn-icon-with-content:hover rect {
  --color-button-text: var(--color-hover-button-label) ;
}

.link {
  font-family: var(--font-button-family);
  font-size: var(--button-font-size);
  line-height: calc(var(--button-font-size) * var(--button-line-height));
  background-color: transparent;
  border: none;
  transition: 0.5s ease all;
  font-weight: var(--font-button-weight);
  cursor: pointer;
  color: var(--color-link);
  text-decoration: none;
  transition: 0.1s ease all;
  letter-spacing: var(--button-letter-spacing);
}
.link span {
  position: relative;
}
.link span::after {
  position: absolute;
  content: "";
  bottom: -2px;
  height: 1px;
  left: 0;
  width: 100%;
  background-color: var(--color-link);
}
.link:hover {
  opacity: 0.5;
}
.link--xs {
  font-size: calc(var(--button-font-size) - 0.25rem);
  font-weight: var(--font-button-weight);
  line-height: calc(var(--button-font-size) - 0.25rem * var(--button-line-height));
}

.tag-icon {
  position: absolute;
  padding: 6px 9px;
  background: var(--color-button-background);
  border-radius: var(--radius-base);
  inset-inline-start: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--color-button-border);
  transition: 0.5s ease all;
  overflow: hidden;
}
.tag-icon span::after {
  display: none;
}
.tag-icon:hover {
  border: 1px solid var(--color-button-border-outline);
  transition: 0.5s ease all;
}
.tag-icon img {
  margin-inline-end: 7px;
}
.tag-icon span {
  font-weight: var(--font-body-weight-bold);
  font-size: calc(var(--font-body-scale) * 14px);
  line-height: calc(var(--font-body-scale) * 14px * var(--body-line-height));
  color: var(--color-button-text);
}

h1 {
  font-size: var(--heading-font-size-h1);
  line-height: calc(var(--heading-font-size-h1) * var(--font-heading-line-height-h1));
  letter-spacing: var(--heading-letter-spacing-h1);
}
@media (max-width: 991px) {
  h1 {
    font-size: calc(var(--heading-font-size-h1) - 0.25rem);
    line-height: calc((var(--heading-font-size-h1) - 0.25rem) * var(--font-heading-line-height-h1));
    letter-spacing: var(--heading-letter-spacing-h1);
  }
}

h2 {
  font-size: var(--heading-font-size-h2);
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--color-text);
  line-height: calc(var(--heading-font-size-h2) * var(--font-heading-line-height-h2));
  letter-spacing: var(--heading-letter-spacing-h2);
}
@media (max-width: 991px) {
  h2 {
    font-size: calc(var(--heading-font-size-h2) - 0.25rem);
    line-height: calc((var(--heading-font-size-h2) - 0.25rem) * var(--font-heading-line-height-h2));
    letter-spacing: var(--heading-letter-spacing-h2);
    margin-bottom: 16px;
  }
}

h3 {
  font-size: var(--heading-font-size-h3);
  line-height: calc(var(--heading-font-size-h3) * var(--font-heading-line-height-h3));
  letter-spacing: var(--heading-letter-spacing-h3);
}
@media (max-width: 991px) {
  h3 {
    font-size: calc(var(--heading-font-size-h3) - 0.25rem);
    line-height: calc((var(--heading-font-size-h3) - 0.25rem) * var(--font-heading-line-height-h3));
    letter-spacing: var(--heading-letter-spacing-h3);
  }
}

h4 {
  font-size: var(--heading-font-size-h4);
  line-height: calc(var(--heading-font-size-h4) * var(--font-heading-line-height-h4));
  letter-spacing: var(--heading-letter-spacing-h4);
}
@media (max-width: 991px) {
  h4 {
    font-size: calc(var(--heading-font-size-h4) - 0.25rem);
    line-height: calc((var(--heading-font-size-h4) - 0.25rem) * var(--font-heading-line-height-h4));
    letter-spacing: var(--heading-letter-spacing-h4);
  }
}

h5 {
  font-size: var(--heading-font-size-h5);
  line-height: calc(var(--heading-font-size-h5) * var(--font-heading-line-height-h5));
  letter-spacing: var(--heading-letter-spacing-h5);
}
@media (max-width: 991px) {
  h5 {
    font-size: calc(var(--heading-font-size-h5) - 0.25rem);
    line-height: calc((var(--heading-font-size-h5) - 0.25rem) * var(--font-heading-line-height-h5));
    letter-spacing: var(--heading-letter-spacing-h5);
  }
}

h6 {
  font-size: var(--heading-font-size-h6);
  line-height: calc(var(--heading-font-size-h6) * var(--font-heading-line-height-h6));
  letter-spacing: var(--heading-letter-spacing-h6);
}
@media (max-width: 991px) {
  h6 {
    font-size: calc(var(--heading-font-size-h6) - 0.25rem);
    line-height: calc((var(--heading-font-size-h6) - 0.25rem) * var(--font-heading-line-height-h6));
    letter-spacing: var(--heading-letter-spacing-h6);
  }
}

input,
optgroup,
select,
textarea {
  font-family: var(--font-body-family);
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  letter-spacing: var(--body-letter-spacing);
}

.p-0 {
  padding: 0 !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.border-0 {
  border: 0 !important;
}

.position-sticky {
  position: sticky;
}

.position-relative {
  position: relative;
}

.position-sticky {
  position: sticky;
}

.position-absolute {
  position: absolute;
}

.section-header {
  margin-bottom: 24px;
}
.section-heading {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.section-heading.link_position-end {
  justify-content: space-between;
}
@media (max-width: 767px) {
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}
.section-heading a {
  margin-inline-start: 16px;
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .section-heading a {
    margin-inline-start: 0;
  }
}
.section-heading a svg {
  transition: 0.5s ease all;
}
.section-heading a:hover svg {
  transform: translate(5px, -5px);
  transition: 0.5s ease all;
}
.section-heading h2 {
  margin: 0;
}
.section__subContent {
  margin-top: 16px;
}
.section__subContent, .section-subheading, .section-container {
  max-width: 512px;
  width: 100%;
}
.section-viewall-text {
  transition: all 0.3s ease-in;
}
.section-viewall-text:hover {
  text-decoration: none;
  transition: all 0.3s ease-in;
}

/* Opt-in modifier, emitted only when a caller passes inline_view_all_mobile.
   Below 768px the base rule stacks this row into a column; here it stays a row
   so the link sits opposite the heading, as the phone mockup draws it.
   The underline the mockup shows is deliberately NOT restated here. Every .link
   in the theme already carries one, drawn as a 1px bar by .link span::after in
   var(--color-link) at the exact width of the text - which is what the mockup
   measures. Adding text-decoration on top of it rendered two parallel lines
   about a pixel apart. justify-content is deliberately not set either - the
   merchant's view_all_link_position keeps driving it, as it does on desktop. */
@media screen and (max-width: 767px) {
  .section-heading--inline-link {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .section-heading--inline-link > * {
    min-width: 0;
  }
  .section-heading--inline-link .section-viewall-text {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.breadcrumbs {
  display: flex;
  padding: 0;
  margin-top: 0;
  margin-bottom: 24px;
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs__item a,
.breadcrumbs__item span {
  font-size: calc(var(--font-body-scale) * 14px);
  line-height: calc(var(--font-body-scale) * 14px * var(--body-line-height));
  color: color-mix(in srgb, rgba(var(--color-text-rgba)), transparent 50%);
  text-decoration: none;
}
.breadcrumbs__item:not(:last-child):after {
  border-style: solid;
  border-width: 0 0 0 1px;
  border-color: rgba(var(--color-text-rgba));
  content: "";
  display: inline-block;
  height: 10px;
  margin: 3px 0 0;
  position: relative;
  transform: rotate(23deg);
  vertical-align: middle;
  width: 6px;
}
.breadcrumbs__item.active a,
.breadcrumbs__item.active span {
  color: var(--color-text);
}

.overflow-y {
  overflow-y: scroll;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  gap: 8px;
}
.tags__item {
  padding: 8px 12px;
  border: 1px solid rgba(var(--color-border-rgba));
  color: var(--color-text);
  border-radius: 37px;
}
.tags a {
  font-weight: 400;
  text-decoration: none;
  color: var(--color-text);
}

.row-wrp {
  display: flex;
  flex-wrap: wrap;
}

.col-50 {
  width: 100%;
}
@media (min-width: 992px) {
  .col-50 {
    width: 49%;
  }
}

@media (min-width: 992px) {
  .pagination-wrp {
    display: none !important;
  }
}

.pagination .page-item.active {
  color: var(--white);
  background-color: var(--color-link);
}
.pagination .page-item.active a {
  color: var(--white);
}
.pagination .page-item:last-child a {
  color: var(--color-link);
}

.error-ms {
  background-color: var(--error-background-color);
  padding: 4px 0;
  margin-top: 24px;
  border-radius: var(--radius-base);
}
.error-ms a {
  color: var(--color-link);
}

#RegisterForm-email:target {
  scroll-margin-top: 10rem;
}

.field-error-text {
  margin-inline-start: 0 !important;
  margin-top: 8px;
}

.error-text {
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  color: var(--error-text-color);
  margin-inline-start: 8px;
}
.error-text ul li:last-child {
  margin-bottom: 0;
}

.success-ms {
  background-color: var(--success-background-color);
  padding: 4px 0;
  margin-top: 24px;
  border-radius: var(--radius-base);
}

.success-text {
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  color: var(--success-text-color);
  margin-inline-start: 8px;
}

.link-bold {
  font-weight: var(--font-body-weight-bold);
}
.link-bold:hover {
  text-decoration: none;
}

carousel-component,
carousel-with-tabs,
product-card {
  display: block;
}

product-card {
  height: 100%;
}

.p_badge {
  padding: 4px 9px;
  /* Size comes from the theme-level badge control. The literals are today's
     computed values and reference no legacy variable, so Phase 9 has nothing to
     unpick. Badges inside a product card do not use this: the card threads a
     utility class from its section, and that class is declared later in this
     file at the same specificity, so it wins there. */
  font-size: var(--badge-font-size, 13.2px);
  font-weight: var(--font-body-weight-bold);
  line-height: var(--badge-line-height, 17.16px);
  letter-spacing: var(--badge-letter-spacing, normal);
  text-transform: uppercase;
  display: inline-block;
  position: absolute;
  z-index: 1;
  margin: 2px;
  border-radius: var(--radius-base);
}
.p_badge.top_right {
  top: max(var(--block-border-radius) / 2, 8px);
  inset-inline-end: max(var(--block-border-radius) / 2, 8px);
}
.p_badge.top_left {
  top: max(var(--block-border-radius) / 2, 8px);
  inset-inline-start: max(var(--block-border-radius) / 2, 8px);
}
.p_badge.bottom_left {
  bottom: max(var(--block-border-radius) / 2, 8px);
  inset-inline-start: max(var(--block-border-radius) / 2, 8px);
}
.p_badge.bottom_right {
  bottom: max(var(--block-border-radius) / 2, 8px);
  inset-inline-end: max(var(--block-border-radius) / 2, 8px);
}
.p_badge.on_sale {
  background: var(--bg-sale-badge-color);
  color: var(--text-sale-badge-color);
}
.p_badge.animmate_product_badge {
  position: relative !important;
  overflow: hidden;
}
.p_badge.animmate_product_badge::after {
  background-image: linear-gradient(90deg, transparent, hsla(0deg, 0%, 100%, 0.45), transparent);
  content: "";
  height: 100%;
  left: 150%;
  position: absolute;
  top: 0;
  transform: skew(-20deg);
  width: 200%;
  animation: badge_shine 2.2s cubic-bezier(0.01, 0.56, 1, 1) infinite;
}
@keyframes badge_shine {
  100% {
    left: -200%;
  }
}
.p_badge.out_of_stock {
  background: var(--bg-soldout-badge-color);
  color: var(--text-soldout-badge-color);
}

.product-tags-container {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  will-change: opacity;
}
.product-tags-container .p_badge {
  position: unset;
}
.product-tags-container.top_right {
  top: max(var(--block-border-radius) / 2, 8px);
  inset-inline-end: max(var(--block-border-radius) / 2, 8px);
  justify-content: flex-end;
}
.product-tags-container.top_left {
  top: max(var(--block-border-radius) / 2, 8px);
  inset-inline-start: max(var(--block-border-radius) / 2, 8px);
}
.product-tags-container.bottom_left {
  bottom: max(var(--block-border-radius) / 2, 8px);
  inset-inline-start: max(var(--block-border-radius) / 2, 8px);
}
.product-tags-container.bottom_right {
  bottom: max(var(--block-border-radius) / 2, 8px);
  inset-inline-end: max(var(--block-border-radius) / 2, 8px);
  justify-content: flex-end;
}

.custom-product-tag {
  background-color: var(--tag-background-color);
  color: var(--tag-text-color);
}

.d_badge {
  padding: 4px;
  border-radius: var(--radius-base);
  font-weight: var(--font-body-weight-bold);
  text-transform: uppercase;
  background: rgba(var(--color-discount-badge-background));
  color: var(--color-discount-badge-text);
  --text-sale-badge-color: var(--color-discount-badge-text);
  border: 1px dashed var(--color-discount-badge-text);
}
.d_badge .icon {
  max-width: 10px;
  width: 100%;
  max-height: 10px;
  margin-inline-end: 5px;
}
.d_badge .icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.image--aspectSize {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
}

.image-responsive, model-3d-component .shopify-model-viewer-ui {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  object-fit: cover;
}

.text-decor-none {
  text-decoration: none;
}

.sliderControl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 767px) {
  .sliderControl {
    display: none;
  }
}
.sliderControl .swiper-thumbnails {
  width: 100%;
}
.sliderControl .sliderPagination.swiper-pagination-lock {
  margin-top: 0;
}
.sliderControl .sliderPagination__next, .sliderControl .sliderPagination__prev {
  margin-top: 32px;
  background-image: none;
  max-width: 40px;
  max-height: 40px;
  cursor: pointer;
  transition: 0.5s ease all;
}
@media (max-width: 767px) {
  .sliderControl .sliderPagination__next, .sliderControl .sliderPagination__prev {
    display: none;
  }
}
.sliderControl .sliderPagination__next svg, .sliderControl .sliderPagination__prev svg {
  display: block;
}
.sliderControl .sliderPagination > div:last-child {
  margin-inline-start: 36px;
}
.sliderControl .swiper-button-disabled .sliderPagination__next, .sliderControl .swiper-button-disabled .sliderPagination__prev {
  pointer-events: none;
  opacity: 0.5;
}
.sliderControl .sliderProgressBar {
  margin-top: 32px;
  max-width: 957px;
  width: 100%;
  background: rgba(var(--color-slider-progress)/0.3);
  height: 2px;
  position: relative;
  margin-inline-end: 16px;
}
.sliderControl .sliderProgressBar.swiper-pagination-lock {
  margin-top: 0;
}
.sliderControl .sliderProgressBar.swiper-pagination-bullets {
  bottom: 24px;
  display: flex;
  justify-content: center;
  background-color: transparent;
}
.sliderControl .sliderProgressBar .swiper-pagination-progressbar-fill {
  height: 2px;
  background-color: rgba(var(--color-slider-progress)/1);
}
.sliderControl .sliderProgressBar .swiper-pagination-bullet {
  width: 80px;
  height: 4px;
  border-radius: 0;
  background: rgba(var(--color-slider-progress)/0.3);
  opacity: 1;
  margin-inline-end: 4px;
  position: relative;
}
@media (max-width: 991px) {
  .sliderControl .sliderProgressBar .swiper-pagination-bullet {
    width: 62px;
  }
}
.sliderControl .sliderProgressBar .swiper-pagination-bullet::after {
  position: absolute;
  content: "";
  inset: 0;
  width: 0;
  transition: all ease 0.5s;
  background-color: rgba(var(--color-slider-progress)/1);
}
.sliderControl .sliderProgressBar .swiper-pagination-bullet-active::after {
  background-color: rgba(var(--color-slider-progress)/1);
  width: 100%;
  transition: all ease 0.5s;
}

.hide--navigation--arrows .sliderPagination {
  display: none;
}

/* Carousel arrow, matched to the approved designer mockup: a bare 45-degree
   chevron with no circle, no border and no background chip. The container is
   now only a centring box and hit target - it paints nothing itself, so the
   circle radius and the overflow clip that used to shape it are both gone
   (the clip would crop the taller glyph).

   The arrow has NO hover state, by decision rather than omission. Three were
   tried and each read badly once there was no chrome to contain it: the
   original colour switch resolved to the page background on scheme-1 and went
   invisible, and both a directional nudge and the rotateY flip-in read as the
   glyph flickering. The affordance is carried by cursor: pointer on the hit
   target and by the global focus-visible outline. There is no transition here
   either - nothing about this element changes state any more. */
.arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
}

.arrow-wrap {
  z-index: 2;
  height: 38px;
  width: 20px;
  overflow: hidden;
  display: flex;
}

.select-wrapper {
  position: relative;
}
.select-wrapper select {
  z-index: 2;
  background-color: transparent;
}
.select-wrapper svg {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  z-index: 1;
  width: 12px;
  height: 12px;
}

input[type=number]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

[type=search] {
  -webkit-appearance: none;
  border-radius: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

variant-picker select {
  border: 1px solid rgba(var(--color-input-variant-color));
  color: rgba(var(--color-input-variant-color));
}

/* Quantity selector, matched to the mockup: no outer box at all. The label sits
   at the inline-start of the same row and the stepper at the inline-end, with
   the minus and plus as filled circles either side of the number. Everything
   here is shared, so the control has a single appearance across the store; only
   --qty-gap is set per surface further down.
   The circles are the approved third exception to --radius-base 0px, alongside
   the swatch circle.
   The circle is sized from the quantity number rather than fixed, so the two
   stay in proportion when the merchant changes the Body tier: both mockups draw
   it at 1.355 x the number's font-size, agreeing to four decimal places. The
   number carries its tier as a class on the input, which is why :has selects on
   it - all five surfaces that render this control tag the input that way.
   max() holds the WCAG 2.5.8 24px target: the ratio alone would fall under it
   at the Small and Medium tiers, so the floor binds there and the ratio takes
   over at Large. The tier variables already step at 992px, so the diameter
   follows the type across breakpoints without a media query of its own.
   Only the gap stays per-surface below - spacing is not proportion. */
.product-quantity__selector-wrapper {
  --qty-button-size: max(24px, calc(var(--type-body-m-font-size) * 1.355));
  --qty-gap: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.product-quantity__selector-wrapper:has(input.type-body--s) {
  --qty-button-size: max(24px, calc(var(--type-body-s-font-size) * 1.355));
}
.product-quantity__selector-wrapper:has(input.type-body--m) {
  --qty-button-size: max(24px, calc(var(--type-body-m-font-size) * 1.355));
}
.product-quantity__selector-wrapper:has(input.type-body--l) {
  --qty-button-size: max(24px, calc(var(--type-body-l-font-size) * 1.355));
}
@media screen and (max-width: 767px) {
  .product-quantity__selector-wrapper {
    --qty-gap: 8px;
  }
}
.product-quantity__selector-wrapper label {
  font-weight: var(--font-body-weight-bold);
  display: block;
  font-size: calc(var(--font-body-scale) * 16px);
}
.product-quantity__selector-wrapper .product-quantity__selector {
  background: transparent;
  border: none;
  padding: 0;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qty-gap);
}
.product-quantity__selector-wrapper .product-quantity__selector label {
  font-weight: var(--font-body-weight-bold);
  display: block;
}
.product-quantity__selector-wrapper .product-quantity__selector button {
  cursor: pointer;
  color: rgba(var(--color-text-rgba));
}
.product-quantity__selector-wrapper .product-quantity__selector button:hover {
  opacity: 0.7;
}
.product-quantity__selector-wrapper .product-quantity__selector button,
.product-quantity__selector-wrapper .product-quantity__selector input {
  background-color: transparent;
  border: none;
  text-align: center;
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: 0;
}
.product-quantity__selector-wrapper .product-quantity__selector input {
  width: 60px;
  padding-block: 4px;
  border-radius: 0;
  border: none;
}
.product-quantity__selector-wrapper .product-quantity__selector input::-webkit-inner-spin-button {
  display: none;
}
.product-quantity__selector-wrapper .product-quantity__selector input:focus {
  outline: none;
  box-shadow: none;
}

/* These must stay BELOW the button/input reset above, which sets
   background-color: transparent at the same specificity. Declared any earlier
   and the reset wins on source order and the circle loses its fill.
   The chip is the input colour at 15%, not at full strength: rendering the
   mockup and sampling its pixels gives a light beige, and solving the composite
   shows it is that brown laid over the page at 14.8% alpha. The vector metadata
   reports the source brown with fill_opacity 1.0, which is what an earlier read
   of this control took at face value and inverted the design.
   The glyph is the mockup's own black. On the tint that is 15.33:1, so no
   substitution is needed for contrast. */
.product-quantity__selector-wrapper .product-quantity__selector button {
  width: var(--qty-button-size);
  height: var(--qty-button-size);
  flex-shrink: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, rgba(var(--color-input-color-rgba)), transparent 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.product-quantity__selector-wrapper .product-quantity__selector button svg {
  width: 34%;
  height: auto;
}
.product-quantity__selector-wrapper .product-quantity__selector button svg path {
  stroke: var(--color-text);
}

model-3d-component .shopify-model-viewer-ui model-viewer {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product__xr-button.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  transition: 0.5s ease all;
  opacity: 1;
}
.product__xr-button.btn .btn__icon {
  margin-inline-end: 10px;
}
.product__xr-button.btn .btn__icon svg {
  display: block;
  width: 40px;
  height: auto;
}
.product__xr-button.btn .btn__icon svg rect {
  fill: transparent;
  stroke: none;
}
.product__xr-button.btn .btn__text {
  font-size: calc(var(--font-body-scale) * 16px);
}
.product__xr-button.btn:hover {
  opacity: 0.7;
  transition: 0.5s ease all;
}
.product__xr-button[data-shopify-xr-hidden] {
  display: none;
}

.empty__cart__para {
  line-height: 24px;
  margin-bottom: 24px;
  color: var(--color-text);
}
.empty__cart__cta {
  max-width: 248px;
  width: 100%;
  min-height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

shop-login-button {
  --buttons-radius: var(--radius-base);
}

.account-form {
  max-width: 400px;
  width: 100%;
  padding-top: 48px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023px) {
  .account-form {
    padding-top: 24px;
    padding-bottom: 32px;
  }
}
.account-form .form-group {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}
.account-form label {
  font-size: var(--account-label-font-size);
  line-height: var(--account-label-line-height);
  color: var(--color-text);
  margin-bottom: 8px;
  display: inline-block;
}
.account-form input {
  display: inline-block;
  padding: 14px 16px;
  border: 1px solid var(--color-input-color);
  background-color: transparent;
  border-radius: var(--radius-base);
}
.account-form input[aria-invalid=true] {
  border: 1px solid var(--error-text-color);
}
/* The page headings inside these forms used to carry class="h2", which supplied
   margin-top: 0 and margin-bottom: 24px alongside its !important sizes. That class
   had to go so the typography scale could size them, so the spacing it also
   carried is restated here. Without this they would fall back to the 8px the
   h1..h6 group gives every heading. */
.account-form h1,
.account-form h2 {
  margin-top: 0;
  margin-bottom: 24px;
}

.account-form .forrm-sub-text {
  margin-top: 32px;
  margin-bottom: 16px;
}

#recover {
  display: none;
}
#recover:target {
  display: block;
}
#recover:target ~ #login {
  display: none;
}

#recover,
#login {
  scroll-margin-top: 10rem;
}

.sign-with-shop {
  margin-bottom: 16px;
}

.tabs__container {
  display: none;
}
.tabs__container.active {
  display: block;
}

.aspect-size-media,
.media-ratio-16-9 {
  aspect-ratio: 16/9;
}

.media-ratio-1-1 {
  aspect-ratio: 1;
}

.media-ratio-3-4 {
  aspect-ratio: 3/4;
}

.set-100-percentage-size-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-loader-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 99;
  background: var(--color-background);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-loader-container.hide {
  display: none;
}

.page-loader {
  border: 3px solid var(--COLOR-SECONDARY);
  border-left-color: var(--color-button-text);
  animation: loader-spin 1.2s infinite linear;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 999;
}

.icon-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-content {
  display: block;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-color: var(--COLOR-F4);
  margin: 0 auto;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 800px 100%;
}
.loading-content.product-card-item__head {
  height: 20px;
}
.loading-content.img-placeholder {
  position: relative;
  height: 270px;
}
.loading-content.original-price {
  display: inline-block;
}
.loading-content.price, .loading-content.original-price, .loading-content.discount {
  height: 15px;
  width: 25%;
  margin-inline-end: 4px;
  margin-inline-start: 0;
}
.loading-content.btn {
  border: none;
}

.default-card .product-price__wrapper {
  display: flex;
}
.default-card .btn {
  margin-inline-start: 0;
}

@keyframes placeholderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.swiper-container {
  visibility: hidden;
  opacity: 0;
  transition: 0.5s ease opacity;
}
.swiper-container.swiper-initialized {
  visibility: visible;
  opacity: 1;
}

.text-color {
  color: var(--color-text);
}

.text-label-bg-color {
  color: var(--bg-sale-badge-color);
}

.count__circular--style {
  margin-inline-start: 8px;
  color: var(--color-text);
}

.shopify-challenge__message {
  margin-bottom: 24px;
}

.newsletterForm {
  margin-top: 32px;
  display: flex;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .newsletterForm {
    flex-direction: column;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .newsletterForm button {
    margin-block-start: 8px;
  }
}
.newsletterForm__input {
  border: 1px solid var(--color-input-color);
  color: var(--color-text);
  background-color: transparent;
  padding: 12px;
  margin-inline-end: 10px;
  border-radius: var(--radius-base);
}

show-more-ui [elements--hidden] {
  display: none !important;
}

.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
  border-color: color-mix(in srgb, rgba(var(--color-button-border-rgba)), transparent 95%) !important;
  color: rgba(var(--color-button-text-rgba)) !important;
  background: var(--color-button-background) !important;
}
@media screen and (max-width: 980px) {
  .shopify-model-viewer-ui .shopify-model-viewer-ui__button {
    width: 40px !important;
    height: 40px !important;
  }
  .shopify-model-viewer-ui .shopify-model-viewer-ui__button .shopify-model-viewer-ui__poster-control-icon {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Swatch grids put the swatches first and the "SHADE: <value>" line beneath, as
   the mockup draws it. Order only - the label's text, casing and its own mb-2
   are untouched, which does mean that 8px now trails the label instead of
   separating it from the swatches; the row-gap supplies the real separation.
   Scoped to the swatch grid by a Liquid-set modifier, so dropdown and
   swatch-dropdown pickers keep their label above the control where it belongs. */
.variant-swatches-first {
  display: flex;
  flex-direction: column;
  row-gap: 19px;
}
.variant-swatches-first .product-variant__head {
  order: 2;
}
@media screen and (max-width: 767px) {
  .variant-swatches-first {
    row-gap: 16px;
  }
}

.product-variant__head {
  gap: 4px;
}
.product-variant__head span[product-variant-option-value] {
  text-transform: capitalize;
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
}
.product-variant__head .select__label {
  font-weight: var(--font-body-weight-bold);
  font-size: calc(var(--font-body-scale) * 16px);
}

.product-variant__label-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-group label {
  align-items: center;
}
.form-group .checkbox {
  opacity: 0;
  transition: 0.3s ease all;
}
.form-group input[type=checkbox] {
  padding: 0;
  margin-bottom: 0;
  cursor: pointer;
  position: absolute;
  cursor: pointer;
  width: 22px;
  height: 22px;
}
.form-group .icon-checkbox-wrapper {
  margin-inline-end: 8px;
}
.form-group .icon-checkbox-wrapper .icon-checkbox {
  border-radius: var(--radius-base);
  border: var(--icon-thickness) solid var(--color-icon);
}
.form-group .icon-checkbox-wrapper .icon-checkbox .icon-checkbox-inner {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  border-radius: calc(var(--input-border-radius) - var(--icon-thickness));
}
.form-group .icon-checkbox-wrapper .icon-checkbox .icon-checkbox-inner svg {
  width: 100%;
  height: 100%;
}
.form-group input:checked + label .icon-checkbox-inner {
  background-color: var(--color-icon);
}

.media-size {
  min-height: 375px;
}
.media-size--adapt {
  aspect-ratio: var(--aspect-ratio);
}
@media screen and (max-width: 767px) {
  .media-size--adapt {
    aspect-ratio: var(--mobile-aspect-ratio, var(--aspect-ratio));
  }
}
.media-size--sm {
  min-height: 375px;
}
@media screen and (min-width: 700px) {
  .media-size--sm {
    min-height: 400px;
  }
}
@media screen and (min-width: 1400px) {
  .media-size--sm {
    min-height: 440px;
  }
}
@media screen and (max-width: 767px) {
  .media-size--sm .swiper-slide default-player,
.media-size--sm .swiper-slide video-player,
.media-size--sm .swiper-slide vimoe-player,
.media-size--sm .swiper-slide svg,
.media-size--sm .swiper-slide img {
    min-height: 100%;
  }
}
.media-size--md {
  min-height: 475px;
}
@media screen and (min-width: 700px) {
  .media-size--md {
    min-height: 460px;
  }
}
@media screen and (min-width: 1400px) {
  .media-size--md {
    min-height: 500px;
  }
}
@media screen and (max-width: 767px) {
  .media-size--md .swiper-slide default-player,
.media-size--md .swiper-slide video-player,
.media-size--md .swiper-slide vimoe-player,
.media-size--md .swiper-slide svg,
.media-size--md .swiper-slide img {
    min-height: 100%;
  }
}
.media-size--lg {
  min-height: 550px;
}
@media screen and (min-width: 700px) {
  .media-size--lg {
    min-height: 560px;
  }
}
@media screen and (min-width: 1400px) {
  .media-size--lg {
    min-height: 640px;
  }
}
@media screen and (max-width: 767px) {
  .media-size--lg .swiper-slide default-player,
.media-size--lg .swiper-slide video-player,
.media-size--lg .swiper-slide vimoe-player,
.media-size--lg .swiper-slide svg,
.media-size--lg .swiper-slide img {
    min-height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .media-size--aspect-video {
    aspect-ratio: 16/9;
  }
}
@media screen and (max-width: 767px) {
  .media-size--aspect-video .swiper-slide default-player,
.media-size--aspect-video .swiper-slide video-player,
.media-size--aspect-video .swiper-slide vimoe-player,
.media-size--aspect-video .swiper-slide svg,
.media-size--aspect-video .swiper-slide img {
    aspect-ratio: 16/9;
  }
}
.media-size--fill-screen {
  min-height: 100vh;
}
@media screen and (min-width: 768px) {
  .media-size--fill-screen {
    min-height: 100vh;
  }
}
.media-size--fill-screen .swiper-slide default-player,
.media-size--fill-screen .swiper-slide video-player,
.media-size--fill-screen .swiper-slide vimoe-player,
.media-size--fill-screen .swiper-slide svg,
.media-size--fill-screen .swiper-slide img {
  min-height: 100%;
}
@media screen and (max-width: 767px) {
  .media-size--fill-screen .swiper-slide default-player,
.media-size--fill-screen .swiper-slide video-player,
.media-size--fill-screen .swiper-slide vimoe-player,
.media-size--fill-screen .swiper-slide svg,
.media-size--fill-screen .swiper-slide img {
    min-height: 100%;
  }
}

@media screen and (max-width: 767px) {
  .media-size-mobile--adapt {
    aspect-ratio: var(--mobile-aspect-ratio, var(--aspect-ratio));
  }
}
@media screen and (max-width: 767px) {
  .media-size-mobile--sm {
    min-height: 375px;
  }
}
@media screen and (max-width: 767px) {
  .media-size-mobile--md {
    min-height: 450px;
  }
}
@media screen and (max-width: 767px) {
  .media-size-mobile--lg {
    min-height: 500px;
  }
}
@media screen and (max-width: 767px) {
  .media-size-mobile--auto {
    min-height: auto;
  }
}
@media screen and (max-width: 767px) {
  .media-size-mobile--aspect-video {
    min-height: auto;
  }
}
@media screen and (max-width: 767px) {
  .media-size-mobile--fill-screen {
    min-height: calc(100vh - (var(--announcement-height, 0) + var(--header-height, 0)));
  }
}

.section,
.bg-color-gradient {
  background: var(--color-background) var(--gradient-background) no-repeat 100%;
}

.shopify-payment-button__button--hidden {
  display: none;
}

.image-height {
  min-height: var(--media-height);
}
.image-height--auto {
  --media-height: auto;
}
.image-height--lg {
  --media-height: 560px;
}
@media screen and (min-width: 700px) {
  .image-height--lg {
    --media-height: 560px;
  }
}
@media screen and (min-width: 1400px) {
  .image-height--lg {
    --media-height: 640px;
  }
}
.image-height--md {
  --media-height: 480px;
}
@media screen and (min-width: 700px) {
  .image-height--md {
    --media-height: 460px;
  }
}
@media screen and (min-width: 1400px) {
  .image-height--md {
    --media-height: 500px;
  }
}
.image-height--sm {
  --media-height: 375px;
}
@media screen and (min-width: 700px) {
  .image-height--sm {
    --media-height: 400px;
  }
}
@media screen and (min-width: 1400px) {
  .image-height--sm {
    --media-height: 440px;
  }
}
.image-height--fill {
  --media-height: 100svh;
}

.image-max-height {
  max-height: var(--media-height);
}

.image-fixed-height {
  height: var(--media-height);
}

@media screen and (max-width: 699px) {
  .image-height-mobile--auto {
    --media-height: auto;
  }
  .image-height-mobile--lg {
    --media-height: 560px;
  }
  .image-height-mobile--md {
    --media-height: 480px;
  }
  .image-height-mobile--sm {
    --media-height: 375px;
  }
}
@media screen and (max-width: 699px) and (max-width: 699px) {
  .image-height-mobile--fill {
    --media-height: 100svh;
  }
}

@media screen and (min-width: 700px) {
  .image-height-desktop {
    min-height: var(--media-height);
  }
}
@media screen and (min-width: 700px) {
  .image-height-desktop--auto {
    --media-height: auto;
  }
}
@media screen and (min-width: 700px) {
  .image-height-desktop--lg {
    --media-height: 560px;
  }
}
@media screen and (min-width: 1400px) {
  .image-height-desktop--lg {
    --media-height: 640px;
  }
}
@media screen and (min-width: 700px) {
  .image-height-desktop--md {
    --media-height: 460px;
  }
}
@media screen and (min-width: 1400px) {
  .image-height-desktop--md {
    --media-height: 500px;
  }
}
@media screen and (min-width: 700px) {
  .image-height-desktop--sm {
    --media-height: 400px;
  }
}
@media screen and (min-width: 1400px) {
  .image-height-desktop--sm {
    --media-height: 440px;
  }
}
@media screen and (min-width: 700px) {
  .image-height-desktop--fill {
    --media-height: 100svh;
  }
}

.block-media-size {
  min-height: 375px;
}
.block-media-size--adapt {
  aspect-ratio: var(--mobile-aspect-ratio, var(--aspect-ratio));
}
@media screen and (min-width: 700px) {
  .block-media-size--adapt {
    aspect-ratio: var(--aspect-ratio);
  }
}
.block-media-size--sm {
  min-height: 250px;
}
@media screen and (min-width: 900px) {
  .block-media-size--sm {
    min-height: 440px;
  }
}
.block-media-size--md {
  min-height: 300px;
}
@media screen and (min-width: 900px) {
  .block-media-size--md {
    min-height: 500px;
  }
}
.block-media-size--lg {
  min-height: 350px;
}
@media screen and (min-width: 900px) {
  .block-media-size--lg {
    min-height: 640px;
  }
}
.block-media-size--fill-screen {
  min-height: calc(100vh - (var(--announcement-height, 0) + var(--header-height, 0)));
}
@media screen and (max-width: 767px) {
  .block-media-size-mobile--sm {
    min-height: 375px;
  }
}
@media screen and (max-width: 767px) {
  .block-media-size-mobile--md {
    min-height: 450px;
  }
}
@media screen and (max-width: 767px) {
  .block-media-size-mobile--lg {
    min-height: 500px;
  }
}
@media screen and (max-width: 767px) {
  .block-media-size-mobile--auto {
    min-height: auto;
  }
}
@media screen and (max-width: 767px) {
  .block-media-size-mobile--aspect-video {
    min-height: auto;
  }
}
@media screen and (max-width: 767px) {
  .block-media-size-mobile--fill-screen {
    min-height: calc(100vh - (var(--announcement-height, 0) + var(--header-height, 0)));
  }
}

input,
textarea {
  color: var(--color-input-color);
}
input::placeholder,
textarea::placeholder {
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  color: color-mix(in srgb, rgba(var(--color-input-color-rgba)), transparent 70%);
}

.localization-dropdown__list {
  padding: 8px 8px !important;
  background-color: var(--white);
  z-index: 1;
  border-radius: var(--radius-base);
}
.localization-dropdown__list .localization-dropdown__item-link {
  color: var(--black);
  display: flex;
}
.localization-dropdown__list .localization-dropdown__item {
  padding: 8px 12px;
}

.element-cover {
  position: absolute;
  inset: 0;
}

.account-link {
  text-decoration: none;
  background-color: transparent;
  border: none;
  transition: 0.5s ease all;
  cursor: pointer;
  color: var(--color-link);
  font-size: calc(var(--font-body-scale) * 14px);
  position: relative;
}
.account-link::after {
  position: absolute;
  content: "";
  bottom: -2px;
  height: 1px;
  left: 0;
  width: 100%;
  background-color: var(--color-link);
}

.object-fit-cover {
  object-fit: cover !important;
}
.object-fit-contain {
  object-fit: contain !important;
}

.border-top {
  border-top: 1px solid rgba(var(--color-border-rgba));
}

.border-bottom {
  border-bottom: 1px solid rgba(var(--color-border-rgba));
}

.border-radius {
  overflow: hidden;
}
.border-radius--none {
  border-radius: 0 !important;
  overflow: visible !important;
}
.border-radius--block {
  border-radius: var(--radius-base);
}
@media screen and (max-width: 767px) {
  .border-radius--block {
    border-radius: var(--radius-base);
  }
}
.border-radius--input {
  border-radius: var(--radius-base);
}
.border-radius--button {
  border-radius: var(--radius-base);
}
.border-radius--menu-drawer {
  border-radius: var(--radius-base);
}
.border-radius--right-box-corner {
  border-radius: 0 var(--block-border-radius) var(--block-border-radius) 0;
}
@media screen and (max-width: 767px) {
  .border-radius--right-box-corner {
    border-radius: 0;
  }
}

.dummy-content {
  position: relative !important;
  z-index: 0 !important;
}

input[type=radio]:checked + label .swatch::before {
  opacity: 1;
}

.filter-swatch-label {
  width: 40px;
}
.filter-swatch-label .swatch--circle {
  aspect-ratio: 1/1;
  --swatch-border-radius: 50%;
  border-radius: var(--swatch-border-radius);
}
.filter-swatch-label .swatch--circle::before {
  border-radius: var(--swatch-border-radius) !important;
}

.swatch {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--swatch--background);
  border-radius: min(var(--input-border-radius), 4px);
  background-position: var(--swatch-focal-point, center);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  border: 1px solid rgb(var(--swatch-border-white)/0.2);
}
.swatch--circle {
  aspect-ratio: 1/1;
  --swatch-border-radius: 50%;
  border-radius: var(--swatch-border-radius);
}
.swatch--circle::before {
  border-radius: var(--swatch-border-radius) !important;
}
.swatch::before {
  transition: 0.4s ease opacity;
  position: absolute;
  content: "";
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border: 2px solid rgba(var(--color-input-variant-color));
  opacity: 0;
  border-radius: min(var(--input-border-radius) + 2px, 6px);
}

.swatch-input__label {
  padding: 6px !important;
  width: 50px;
  display: block;
  border-color: transparent !important;
  border-radius: unset !important;
  margin: 0;
}
.swatch-input__label::before {
  display: none;
}

.swatch-dropdown {
  position: relative;
}
.swatch-dropdown .select {
  padding-inline-start: 30px;
}
.swatch-dropdown .dropdown-swatch {
  position: absolute;
  width: 20px;
  inset-inline-start: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.fix-width-container {
  padding: 36px 64px;
}
@media (max-width: 1335px) {
  .fix-width-container {
    padding: 36px 60px;
  }
}
@media (max-width: 991px) {
  .fix-width-container {
    padding: 36px;
  }
}
@media (max-width: 767px) {
  .fix-width-container {
    padding: 36px 14px;
  }
}

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-block-size: 57px;
  --shopify-accelerated-checkout-button-border-radius: var(--radius-base);
  --shopify-accelerated-checkout-button-box-shadow: none;
  --shopify-accelerated-checkout-skeleton-background-color: #dedede;
  --shopify-accelerated-checkout-skeleton-animation-opacity-start: 1;
  --shopify-accelerated-checkout-skeleton-animation-opacity-end: 0.5;
  --shopify-accelerated-checkout-skeleton-animation-duration: 4s;
  --shopify-accelerated-checkout-skeleton-animation-timing-function: ease;
}
@media screen and (max-width: 767px) {
  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-block-size: 49px;
  }
}

shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 57px;
  --shopify-accelerated-checkout-button-inline-size: 57px;
  --shopify-accelerated-checkout-button-border-radius: var(--radius-base);
  --shopify-accelerated-checkout-button-box-shadow: none;
  --shopify-accelerated-checkout-inline-alignment: center;
  --shopify-accelerated-checkout-row-gap: 8px;
  --shopify-accelerated-checkout-skeleton-background-color: #dedede;
  --shopify-accelerated-checkout-skeleton-animation-opacity-start: 1;
  --shopify-accelerated-checkout-skeleton-animation-opacity-end: 0.5;
  --shopify-accelerated-checkout-skeleton-animation-duration: 4s;
  --shopify-accelerated-checkout-skeleton-animation-timing-function: ease;
}
@media screen and (max-width: 767px) {
  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-button-block-size: 49px;
    --shopify-accelerated-checkout-button-inline-size: 49px;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.button-rest-styles {
  border: none;
  background: none;
  outline: 0;
  margin: 0;
  padding: 0;
  text-align: start;
}
.button-rest-styles:focus-visible {
  padding: 1px;
  outline: var(--COLOR-CYAN-BLUE) auto 2px;
}

.truncate-text-container {
  display: block;
}
.truncate-text-container .truncated-text {
  max-height: var(--truncate-height);
  overflow: hidden;
  transition: 0.5s ease max-height;
}
.truncate-text-container .truncated-text::after {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-background) 97.7%);
  display: none;
  transition: 0.5s ease all;
}
.truncate-text-container .truncated-text.active {
  position: relative;
}
.truncate-text-container .truncated-text.active::after {
  display: block;
}

animation-reveal {
  display: block;
}

.content-width {
  max-width: var(--content-width, 100%);
  width: 100%;
  margin: 0 auto;
}

.img-100 {
  width: 100%;
  height: 100%;
}

.circle-pagination.sliderControl {
  display: none;
}
@media screen and (max-width: 767px) {
  .circle-pagination.sliderControl {
    display: block;
  }
}
.circle-pagination.sliderControl .sliderProgressBar {
  bottom: 0;
}
.circle-pagination.sliderControl .sliderProgressBar .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.circle-pagination.sliderControl .sliderProgressBar .swiper-pagination-bullet::after {
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  transition: opacity ease 0.5s;
}
.circle-pagination.sliderControl .sliderProgressBar .swiper-pagination-bullet-active::after {
  visibility: visible;
  opacity: 1;
  transition: opacity ease 0.5s;
}
@media screen and (max-width: 767px) {
  .circle-pagination.sliderControl .sliderProgressBar {
    margin-inline-end: 0;
    background: none;
    display: flex;
    justify-content: center;
    height: auto;
  }
}

.preloader-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border: none;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  padding: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  --gradient-color:
      conic-gradient(#0000 10%, #000),
      linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--gradient-color);
  mask: var(--gradient-color);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}

.dropdown-arrow {
  width: 12px;
  height: 12px;
  transform: rotate(180deg);
}

.icon-container {
  width: 16px;
  display: inline-block;
  height: 16px;
}
.icon-container svg {
  width: 100%;
  height: 100%;
}

.bg-transparent {
  background-color: transparent;
}

.timer_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 16px 0;
}
@media screen and (max-width: 480px) {
  .timer_container {
    margin: 10px 0;
  }
}
.timer_container .timer-box {
  color: var(--count-color, --color-text);
}
.timer_container .timer-box__container {
  display: flex;
  flex-direction: column;
  min-width: 57px;
  padding: 10px 12px;
  border-radius: var(--radius-base);
  align-items: center;
  background-color: var(--count-bg, --color-background);
}
@media screen and (max-width: 480px) {
  .timer_container .timer-box__container {
    padding: 8.5px 10px;
  }
}
@media screen and (max-width: 380px) {
  .timer_container .timer-box__container {
    min-width: 60px;
  }
}
/* The divider is a div, so the h1-h6 element selector never matched it: the
   heading font, weight, word-break and the 8px bottom margin all reached it
   through the class half of that group rule, by way of the legacy size class
   the timer used to emit. That class is gone, so the non-size half is stated
   here. Size is deliberately not set: the tier utility on the element now
   supplies it, which is what the divider size control was always meant to do
   before the legacy class defeated it with !important. */
.timer_container .timer-box__divider {
  color: var(--count-color, --color-text);
  font-family: var(--font-head-family);
  font-weight: var(--font-header-weight);
  word-break: break-word;
  margin-bottom: 8px;
}
.timer_container .timer-box__timer {
  word-break: keep-all;
  margin-bottom: 0;
  color: var(--count-color, --color-text);
  font-size: calc(var(--heading-font-size-h3) + 0.5rem);
  line-height: calc((var(--heading-font-size-h3) + 0.5rem) * var(--font-heading-line-height-h3));
  font-family: var(--font-head-family);
  letter-spacing: var(--heading-letter-spacing-h3);
  overflow: hidden;
  position: relative;
  font-weight: var(--font-body-weight-bold);
}
@media screen and (max-width: 480px) {
  .timer_container .timer-box__timer {
    font-size: calc(var(--heading-font-size-h3) + 0.25rem);
    line-height: calc((var(--heading-font-size-h3) + 0.25rem) * var(--font-heading-line-height-h3));
  }
}
@media screen and (max-width: 380px) {
  .timer_container .timer-box__timer {
    font-size: calc(var(--heading-font-size-h3) - 0.25rem);
    line-height: calc((var(--heading-font-size-h3) - 0.25rem) * var(--font-heading-line-height-h3));
  }
}

.group {
  display: flex;
  gap: var(--group-gap, 16px);
  padding-bottom: var(--bottom-spacing-mobile);
}
@media screen and (min-width: 768px) {
  .group {
    gap: var(--group-gap-desktop, var(--group-gap, 16px));
    padding-bottom: var(--bottom-spacing-desktop);
  }
}
.group-row {
  flex-direction: row;
}
.group-column {
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .group-mobile-column {
    flex-direction: column;
    align-items: unset;
  }
}

.promo-card {
  will-change: transform, opacity;
}
.promo-card-link {
  text-decoration: none;
  display: grid;
}
.promo-card__item, .promo-card__video__poster {
  width: 100%;
  height: 100%;
  position: relative;
}
.promo-card__image-wrapper {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-base);
}
.promo-card__image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--promo-background-overlay);
  z-index: 1;
  border-radius: var(--radius-base);
}
.promo-card__image-wrapper .card-hover {
  transition: transform 0.8s ease;
}
.promo-card__content-wrapper {
  grid-area: 1/1;
  display: flex;
  z-index: 2;
  padding: 20px 16px;
  align-items: var(--vertical-alignment);
  width: 100%;
}
@media (max-width: 767px) {
  .promo-card__content-wrapper {
    align-items: var(--mobile-vertical-alignment);
  }
}
.promo-card__content-wrapper p {
  color: var(--color-text);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
@media (max-width: 767px) {
  .promo-card__content-wrapper p {
    font-size: 14px;
  }
}
.promo-card__content-wrapper:hover + .promo-card__image-wrapper .card-hover {
  transform: scale(1.07);
}
.promo-card__preview-element {
  inset: 0;
}
.promo-card__preview-element.video-elements-hidden {
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .promo-card {
    height: var(--mobile-height, auto);
  }
}

.active .readmore-extra {
  display: inline !important;
}

show-button .active .show-less-text {
  display: inline;
}

show-button .active .show-more-text {
  display: none;
}

.readmore-extra,
.show-less-text {
  display: none;
}

.show-more-text,
.show-less-text {
  transition: 0.3s ease-in-out;
  white-space: nowrap;
}

.estimate-delivery label,
.estimate-delivery select,
.estimate-delivery input {
  font-size: calc(var(--font-body-scale) * 14px);
  line-height: calc(var(--font-body-scale) * 14px * var(--body-line-height));
}
.estimate-delivery label:focus-visible,
.estimate-delivery select:focus-visible,
.estimate-delivery input:focus-visible {
  outline: 1px solid rgba(var(--color-input-color-rgba));
}
.estimate-delivery select {
  padding: 10px 30px 10px 12px;
}
.estimate-delivery input {
  padding: 10px 12px;
  border: 1px solid var(--color-input-color);
  border-radius: var(--radius-base);
  background-color: transparent !important;
  color: var(--color-input-color) !important;
}
.estimate-delivery .shipping-rates__error,
.estimate-delivery .shipping-rates__list-container {
  background-color: var(--error-background-color);
  color: var(--error-text-color);
  padding: 12px;
  border-radius: var(--radius-base);
  text-align: center;
  font-size: calc(var(--font-body-scale) * 14px);
  line-height: calc(var(--font-body-scale) * 14px * var(--body-line-height));
  font-weight: var(--font-body-weight-medium);
  margin-top: 16px;
}
.estimate-delivery .shipping-rates__error {
  background-color: var(--error-background-color);
  color: var(--error-text-color);
}
.estimate-delivery .shipping-rates__error .shipping-rates__price,
.estimate-delivery .shipping-rates__error .shipping-rates__name,
.estimate-delivery .shipping-rates__error .shipping-rates__delivery-date {
  color: var(--error-text-color);
}
.estimate-delivery .shipping-rates__list-container {
  background-color: var(--success-background-color);
}
.estimate-delivery .shipping-rates__list-container .shipping-rates__list-header,
.estimate-delivery .shipping-rates__list-container .shipping-rates__price,
.estimate-delivery .shipping-rates__list-container .shipping-rates__name,
.estimate-delivery .shipping-rates__list-container .shipping-rates__delivery-date {
  color: var(--success-text-color);
}
.estimate-delivery .shipping-rates__list {
  margin-top: 8px;
  list-style-type: disc;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: 30px;
}
.estimate-delivery .shipping-rates__item {
  color: var(--success-text-color);
}
.estimate-delivery .shipping-rates__item:last-child {
  border-bottom: none;
}
.estimate-delivery .shipping-rates__item-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.estimate-delivery .shipping-rates__price, .estimate-delivery .shipping-rates__name, .estimate-delivery .shipping-rates__delivery-date {
  color: inherit;
  font-size: calc(var(--font-body-scale) * 14px);
  line-height: calc(var(--font-body-scale) * 14px * var(--body-line-height));
}

.line-item-property {
  padding: 16px 0;
}
.line-item-property .line-item-input {
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: 1px solid rgba(var(--color-input-color-rgba));
  border-radius: var(--radius-base);
  margin-top: 8px;
}
.line-item-property .line-item-text-area-input {
  min-height: 140px;
}
.line-item-property .line-item-checkbox .icon-checkbox-wrapper .icon-checkbox .icon-checkbox-inner {
  width: 24px;
  height: 24px;
  margin: 0;
}

.header {
  transition: ease transform 0.5s;
}
.header__nav-list {
  list-style-type: none;
  padding-inline-start: 0;
  flex-direction: column;
  gap: 12px 40px;
}
@media (min-width: 992px) {
  .header__nav-list {
    margin-top: 0;
    margin-bottom: 0;
    flex-wrap: wrap;
    flex-direction: row;
  }
}
@media (min-width: 992px) {
  .header__nav-list > li {
    padding-block: 0;
  }
}
.header__nav-list > .nav-item {
  margin-bottom: 0;
  font-size: calc(var(--font-body-scale) * 14px);
}
.header__nav-list > .nav-item summary a,
.header__nav-list > .nav-item .parent-menu__link > span, .header__nav-list > .nav-item > a.menu-main-link {
  position: relative;
  z-index: 2;
}
.header__nav-list > .nav-item summary a:focus-visible::after, .header__nav-list > .nav-item summary a:hover::after,
.header__nav-list > .nav-item .parent-menu__link > span:focus-visible::after,
.header__nav-list > .nav-item .parent-menu__link > span:hover::after, .header__nav-list > .nav-item > a.menu-main-link:focus-visible::after, .header__nav-list > .nav-item > a.menu-main-link:hover::after {
  width: 100%;
}
.header__nav-list > .nav-item summary a::after,
.header__nav-list > .nav-item .parent-menu__link > span::after, .header__nav-list > .nav-item > a.menu-main-link::after {
  width: 0;
  transition: 0.4s width ease;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  z-index: 9;
  background-color: var(--color-text);
}
.header__nav-list > .nav-item .parent-menu__link:focus-visible > span::after {
  width: 100%;
}
.header .logo-left-menu-center .header__nav-list {
  justify-content: center;
}
.header__nav-item a {
  text-decoration: none;
}
.header__hamberger {
  border: none;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  z-index: 2;
}
@media (min-width: 992px) {
  .header__hamberger {
    display: none;
  }
}
.header__hamberger span {
  position: absolute;
  width: 15px;
  height: 1px;
  background-color: var(--color-icon);
  transition: ease all 0.5s;
}
.header__hamberger span:nth-child(1) {
  top: 13px;
}
.header__hamberger span:nth-child(2) {
  top: 17px;
}
.header__hamberger span:last-child {
  bottom: 12px;
}
.header__hamberger.active span {
  position: absolute;
  top: 17px;
  transition: ease all 0.5s;
}
.header__hamberger.active span:nth-child(2) {
  display: none;
}
.header__hamberger.active span:first-child {
  transform: rotate(45deg);
}
.header__hamberger.active span:last-child {
  transform: rotate(-45deg);
}
@media (max-width: 991px) {
  .header__menuContainer .row {
    flex-direction: column;
  }
}
.header .nav-link {
  text-decoration: none;
}
@media (max-width: 991px) {
  .header .nav-link {
    display: inherit;
  }
}
@media (min-width: 992px) {
  .header .nav-link:hover::after {
    width: 100%;
  }
}
.header .accordion-header {
  margin: 0;
}
@media (max-width: 991px) {
  .header .accordion-header {
    display: flex;
    justify-content: space-between;
  }
}
.header .accordion-header .arrow-icon {
  transform: rotate(0deg);
  transition: 0.5s ease transform;
}
.header .accordion-header.active .arrow-icon {
  transform: rotate(180deg);
  transition: 0.5s ease transform;
}
@media (max-width: 991px) {
  .header .accordion-collapse {
    display: none;
  }
}
.header .close-btn {
  padding: 24px 24px 16px;
}
.header__search-button {
  border-bottom: 1px solid rgba(var(--color-border-rgba));
  z-index: 99;
}
.header .mobile-search-drawer {
  position: fixed;
  inset: 0;
  background: var(--color-background) var(--gradient-background) none 100%;
  z-index: 999;
  transform: translateX(-100%);
  transition: 0.5s ease all;
}
.header .mobile-search-drawer.active {
  transform: translateX(0);
  transition: 0.5s ease all;
}
.header .logo-text {
  color: var(--color-text);
  word-break: break-all;
}
@media screen and (max-width: 767px) {
  .header .logo-text {
    font-size: calc(var(--font-body-scale) * 14px);
    line-height: calc(var(--font-body-scale) * 14px * var(--body-line-height));
  }
}
.header [nav-dropdown]:has(.dropdown-menu__wrapper) {
  position: relative;
}
.header [data-identefier=parent-element] details summary .icon {
  display: inline-block;
  transition: transform 0.2s ease-in;
  margin-inline-start: 4px;
}
.header [data-identefier=parent-element] details[open] summary .icon {
  display: inline-block;
  transition: transform 0.2s ease-in;
}
.header [transparent-header]:not(.loaded-transparent-header) .transparent-logo {
  display: none;
}
.header [transparent-header].loaded-transparent-header {
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header .transparent-logo {
  display: block;
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header .transparent-logo ~ .main-logo {
  display: none;
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header .navbar {
  background: var(--header-overlay-bg, transparent);
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header .navbar::after {
  background: var(--header-overlay-bg, transparent);
}
.header [transparent-header].loaded-transparent-header .menu-main-link {
  color: var(--header-text-color);
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header .logo-text {
  color: var(--header-text-color);
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header .btn--border {
  border: 1px solid var(--transparent-btn-color);
  color: var(--transparent-btn-color);
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header .btn--border:hover {
  border: 1px solid var(--color-hover-button-background) !important;
  color: var(--color-hover-button-label) !important;
}
.header [transparent-header].loaded-transparent-header .btn--fill {
  background-color: transparent;
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header .btn--fill:hover {
  border: 1px solid var(--color-hover-button-background) !important;
}
.header [transparent-header].loaded-transparent-header .header__iconGroup path {
  stroke: var(--header-text-color);
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header .header__hamberger line {
  stroke: var(--header-text-color);
}
.header [transparent-header].loaded-transparent-header .icon-caret path {
  stroke: var(--header-text-color);
  transition: 0.5s ease all;
}
.header [transparent-header].loaded-transparent-header.fill-header .navbar, .header [transparent-header].loaded-transparent-header.header-scrolled .navbar, .header [transparent-header].loaded-transparent-header:hover .navbar {
  background: var(--bg-color);
}
.header [transparent-header].loaded-transparent-header.fill-header .navbar::after, .header [transparent-header].loaded-transparent-header.header-scrolled .navbar::after, .header [transparent-header].loaded-transparent-header:hover .navbar::after {
  background: var(--bg-color);
}
.header [transparent-header].loaded-transparent-header.fill-header .menu-main-link, .header [transparent-header].loaded-transparent-header.header-scrolled .menu-main-link, .header [transparent-header].loaded-transparent-header:hover .menu-main-link {
  color: var(--color-text);
  --color-arrow: var(--color-text);
}
.header [transparent-header].loaded-transparent-header.fill-header .logo-text, .header [transparent-header].loaded-transparent-header.header-scrolled .logo-text, .header [transparent-header].loaded-transparent-header:hover .logo-text {
  color: var(--color-text);
}
.header [transparent-header].loaded-transparent-header.fill-header .btn--fill, .header [transparent-header].loaded-transparent-header.header-scrolled .btn--fill, .header [transparent-header].loaded-transparent-header:hover .btn--fill {
  border: 1px solid var(--color-button-border);
  color: var(--color-button-text);
  background-color: var(--color-button-background);
}
.header [transparent-header].loaded-transparent-header.fill-header .btn--border, .header [transparent-header].loaded-transparent-header.header-scrolled .btn--border, .header [transparent-header].loaded-transparent-header:hover .btn--border {
  border: 1px solid var(--color-button-border-outline);
  color: var(--color-button-text-outline);
}
.header [transparent-header].loaded-transparent-header.fill-header .header__iconGroup path, .header [transparent-header].loaded-transparent-header.header-scrolled .header__iconGroup path, .header [transparent-header].loaded-transparent-header:hover .header__iconGroup path {
  stroke: var(--color-icon);
}
.header [transparent-header].loaded-transparent-header.fill-header .header__hamberger line, .header [transparent-header].loaded-transparent-header.header-scrolled .header__hamberger line, .header [transparent-header].loaded-transparent-header:hover .header__hamberger line {
  stroke: var(--color-icon);
}
.header [transparent-header].loaded-transparent-header.fill-header .icon-caret path, .header [transparent-header].loaded-transparent-header.header-scrolled .icon-caret path, .header [transparent-header].loaded-transparent-header:hover .icon-caret path {
  stroke: var(--color-icon);
}
.header [transparent-header].loaded-transparent-header.fill-header .transparent-logo, .header [transparent-header].loaded-transparent-header.header-scrolled .transparent-logo, .header [transparent-header].loaded-transparent-header:hover .transparent-logo {
  display: none;
}
.header [transparent-header].loaded-transparent-header.fill-header .transparent-logo ~ .main-logo, .header [transparent-header].loaded-transparent-header.header-scrolled .transparent-logo ~ .main-logo, .header [transparent-header].loaded-transparent-header:hover .transparent-logo ~ .main-logo {
  display: block;
}
.header .heading-brand-logo-text {
  line-height: 0;
}

.transparent-header .shopify-section:first-child {
  margin-top: calc(-1 * (var(--header-height) + 1px));
}

.search-icon a {
  display: block;
}

.announcement-bar {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
}
.announcement-bar__text {
  font-weight: var(--font-header-weight);
  font-size: var(--heading-font-size-h6);
  line-height: calc(var(--heading-font-size-h6) * var(--font-heading-line-height-h6));
  color: var(--color-text);
  margin: 0;
}
.announcement-bar__text a {
  text-decoration: none;
}
.announcement-bar__text p {
  margin-bottom: 0;
}
.announcement-bar__container {
  display: grid;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
}
@media screen and (max-width: 991px) {
  .announcement-bar__container {
    grid-template-columns: 100%;
  }
}
.announcement-bar__container.full-width {
  grid-template-columns: 100%;
}
@media screen and (min-width: 992px) {
  .announcement-bar__container.fixed-width {
    grid-template-columns: 1fr 450px 1fr;
  }
}
@media screen and (min-width: 1336px) {
  .announcement-bar__container.fixed-width {
    grid-template-columns: 1fr 700px 1fr;
  }
}
.announcement-bar__content {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}
.announcement-bar__content.hasGradient .marquee::after, .announcement-bar__content.hasGradient .marquee::before {
  display: none;
}
.announcement-bar .announcement-bar-slider-container {
  width: 100%;
}
@media screen and (min-width: 992px) {
  .announcement-bar .announcement-bar-slider-container {
    width: var(--carousel-width);
  }
}
.announcement-bar .announcement-bar-slider-container .marquee {
  --gap: 16px;
}
.announcement-bar .announcement-bar-slider-container .marquee__content {
  --gap: 16px;
}
.announcement-bar .announcement-bar-slider-container .marquee::after, .announcement-bar .announcement-bar-slider-container .marquee::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 68px;
  z-index: 9;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--color-background) 100%);
}
.announcement-bar .announcement-bar-slider-container .marquee::before {
  inset-inline-start: -1px;
  transform: rotate(180deg);
}
.announcement-bar .announcement-bar-slider-container .marquee::after {
  inset-inline-end: -1px;
}
.announcement-bar__social-media-icons .social-links {
  display: flex;
  column-gap: 12px;
}
.announcement-bar__social-media-icons .social-links .social-links__item {
  margin: 0;
}
.announcement-bar__social-media-icons .social-links .social-links__item a {
  display: flex;
  align-items: center;
}
.announcement-bar .marquee {
  position: relative;
}
@media screen and (max-width: 991px) {
  .announcement-bar__localization {
    display: none;
  }
}
.announcement-bar__localization ul {
  column-gap: 16px;
  align-items: center;
  justify-content: flex-end;
}
.announcement-bar__localization ul li {
  margin-bottom: 0;
}
.announcement-bar__localization .localization-dropdown__list {
  inset-inline-end: 0;
}
.announcement-bar__custom-link {
  display: flex;
  align-items: center;
  column-gap: 16px;
}
.announcement-bar__custom-link li {
  margin-bottom: 0;
}
.announcement-bar .Marquee-tag.marquee__text-color {
  position: relative;
}
.announcement-bar .circle-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: var(--icon-thickness, 1px) solid var(--color-text);
  inset-inline-start: -5rem;
}
.announcement-bar .announcement-carousel {
  margin-inline: auto;
  width: 100%;
  padding-inline: 36px;
}
@media screen and (max-width: 767px) {
  .announcement-bar .announcement-carousel {
    padding-inline: 30px;
  }
}
.announcement-bar .announcement-carousel .swiper-wrapper {
  align-items: center;
}
.announcement-bar .announcement-carousel [slide-prev],
.announcement-bar .announcement-carousel [slide-next] {
  position: absolute;
  top: 50%;
  z-index: 99;
  cursor: pointer;
  padding: 10px;
}
.announcement-bar .announcement-carousel [slide-prev] svg,
.announcement-bar .announcement-carousel [slide-next] svg {
  width: 12px;
}
.announcement-bar .announcement-carousel .swiper-button-disabled .sliderPagination__prev,
.announcement-bar .announcement-carousel .swiper-button-disabled .sliderPagination__next {
  opacity: 0.5;
  cursor: auto;
}
.announcement-bar .announcement-carousel [slide-prev] {
  inset-inline-start: 0;
  transform: translateY(-50%) rotate(-90deg);
}
.announcement-bar .announcement-carousel [slide-next] {
  inset-inline-end: 0;
  transform: translateY(-50%) rotate(90deg);
}
.announcement-bar .announcement-carousel .announcement-controls {
  visibility: hidden;
  opacity: 0;
}
.announcement-bar .announcement-carousel.carousel-active .announcement-controls {
  visibility: visible;
  opacity: 1;
  transition: all 0.3s ease-in;
}
.announcement-bar .countdown-timer__wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap);
  justify-content: var(--horizontal-alignment, center);
}
.announcement-bar .countdown-timer__wrapper--carousel {
  flex-direction: var(--flex-direction);
}
@media (max-width: 767px) {
  .announcement-bar .countdown-timer__wrapper--carousel {
    flex-direction: column;
  }
}
.announcement-bar .countdown-timer__wrapper.timer_font_body {
  --font-family: var(--font-body-family);
}
.announcement-bar .countdown-timer__wrapper.timer_font_heading {
  --font-family: var(--font-head-family);
}
.announcement-bar .countdown-timer__wrapper .timer_container {
  margin: 0;
}
.announcement-bar .countdown-timer__wrapper .timer-box {
  font-size: 8px;
}
.announcement-bar .countdown-timer__wrapper .timer-box__container {
  flex-direction: row;
  gap: 2px;
  padding: 4px 8px;
  min-width: unset;
  font-family: var(--font-family);
}
.announcement-bar .countdown-timer__wrapper .timer-box__timer {
  font-size: 14px !important;
  line-height: 1.1 !important;
  padding: 4px 0;
  min-width: 20px;
  display: flex;
}
.announcement-bar .countdown-timer__wrapper .timer-box__divider {
  font-size: 20px;
}

.dropdown-nav-item {
  position: relative;
}

.navbar-brand {
  position: relative;
  display: inline-block;
  text-decoration: none;
  z-index: 2;
}

@media (max-width: 992px) {
  .logo-container {
    text-align: center;
  }
}

.header__links {
  flex-grow: unset;
}

.header .dropdown-toggle::after {
  display: none;
}

.header__dropdown {
  position: relative;
}

.header__dropdown--fullwidth {
  position: unset;
}

.header .header__menu {
  width: 100%;
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: inherit;
  display: none;
  /* z-index: -1; */
  /* top: 100%; */
  transition: ease all 0.4s;
}

.header .navbar {
  padding-top: 16px;
  padding-bottom: 16px;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
}
.header .navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
  opacity: 1;
  transition: 0.2s cubic-bezier(0.6, 0, 0.4, 1) opacity 0.1s;
  pointer-events: none;
}

.header .nav-link {
  font-weight: var(--font-header-weight);
  font-size: var(--heading-font-size-h6);
  line-height: calc(var(--heading-font-size-h6) * var(--font-heading-line-height-h6));
  color: var(--color-text) !important;
  padding: 0 !important;
  position: relative;
}

@media (min-width: 1024px) {
  .header .nav-item:first-child {
    padding-inline-start: 0px !important;
  }
}

.header__iconGroup {
  list-style: none;
  display: flex;
  z-index: 1;
  gap: 0 20px;
  margin-bottom: 0;
  position: relative;
  flex: 1;
  justify-content: flex-end;
}
.header__iconGroup > ul {
  display: flex;
  gap: 0 20px;
  align-items: center;
}
.header__iconGroup > ul > li {
  margin-bottom: 0;
}
@media screen and (min-width: 992px) {
  .header__iconGroup .desktop-highlight-btn {
    display: flex;
  }
}

.header__menu {
  padding-top: 40px;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
}

.header__iconGroup .icon-label {
  font-weight: var(--font-header-weight);
  font-size: var(--heading-font-size-h6);
  line-height: calc(var(--heading-font-size-h6) * var(--font-heading-line-height-h6));
  color: var(--color-text);
  text-decoration: none;
  transition: 0.5s ease all;
  vertical-align: middle;
}

.header__iconGroup > li {
  margin-inline-start: 16px;
}
@media screen and (min-width: 992px) {
  .header__iconGroup > li {
    margin-inline-start: 24px;
  }
}

.header__icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.header__icon svg {
  transition: ease all 0.5s;
  vertical-align: middle;
}
.header__icon svg:hover {
  opacity: 0.6;
}
.header__icon .header__cart__icon-count {
  position: absolute;
  top: 4px;
  inset-inline-end: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-icon);
  font-size: 10px;
  line-height: 18px;
  color: var(--color-background);
  text-align: center;
  vertical-align: middle;
  transform: translate(50%, -50%);
}

.menu-item {
  list-style-type: none;
  padding-inline-start: 0;
}

.menu-item__link {
  font-size: var(--heading-font-size-h6);
  line-height: calc(var(--heading-font-size-h6) * var(--font-heading-line-height-h6));
  color: var(--color-link);
  text-decoration: none;
}

.menu-item__link:not(:last-child) {
  margin-bottom: 10px;
}

.js-accordion-button {
  padding: 0;
}

.js-accordion-button:focus {
  border: none;
  box-shadow: none;
}

.js-accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  border: none;
}

.header__accordion {
  display: flex;
  flex-wrap: wrap;
}

.header__accordion .accordion-item {
  border: none;
  margin-bottom: 48px;
}

.header-products {
  padding: 0;
}

.header-products__Card {
  display: flex;
  margin-bottom: 14px;
}

.header-products__img {
  width: 190px;
  height: 140px;
  object-fit: cover;
}

.header-products__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline-start: 20px;
}

.header-products__link {
  font-family: "Americana-bold";
  font-weight: var(--font-header-weight);
  font-size: var(--heading-font-size-h5);
  line-height: calc(var(--heading-font-size-h5) * var(--font-heading-line-height-h5));
  text-decoration: none;
  color: #000000;
}

.header-products__link img {
  transition: 0.5s ease all;
}

.header-products__link:hover img {
  transition: 0.5s ease all;
  margin-inline-start: 8px;
}

.navbar-toggler {
  border: none;
}

.header-drawer {
  flex: 1;
}
@media (min-width: 992px) {
  .header-drawer {
    display: none;
  }
}
@media (min-width: 992px) {
  .header-drawer--desktop {
    display: block;
  }
}
.header-drawer--desktop .header__hamberger {
  display: flex !important;
}

.hide-nav {
  display: none;
}

.hamberger-drawer .drawer__wrapper {
  overflow: hidden;
}
.hamberger-drawer .drawer__footer {
  position: relative;
  padding: 0;
  z-index: 0;
}
.hamberger-drawer .drawer__footer > li {
  padding: 16px 24px;
  margin-bottom: 0;
}
.hamberger-drawer .login-btn {
  text-decoration: none;
}

.hamberger-accordion {
  flex-direction: column;
  padding: 24px 0px;
  margin-top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex-wrap: nowrap;
}
.hamberger-accordion .accordion__item {
  margin-bottom: 0;
  width: 100%;
}
.hamberger-accordion .hamberger-accordion--childElement li {
  padding-inline: 24px;
}
.hamberger-accordion .accordion__item__head {
  padding: 0;
  border-bottom: none;
  background-color: transparent;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  word-break: break-all;
}
@media (min-width: 992px) {
  .hamberger-accordion .header__hamberger {
    display: flex !important;
  }
}
.hamberger-accordion .header__nav-list {
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}
.hamberger-accordion .nav-item {
  margin: 22px 0;
}

@media (min-width: 992px) {
  .active-drawer-mobile {
    display: none;
  }
}

@media (max-width: 991px) {
  .active-drawer-desktop {
    display: none;
  }
}

.hamberger-mobile--drawer.active-drawer .header-drawer .header__hamberger,
.hamberger-desktop--drawer.active-drawer .header__hamberger {
  z-index: 99;
  position: fixed;
  top: 30px;
  inset-inline-start: 15px;
}

.hamberger-accordion {
  gap: 24px;
}
.hamberger-accordion li {
  padding-inline: 30px;
  margin-bottom: 0;
}
.hamberger-accordion__head {
  color: var(--color-link) !important;
}
.hamberger-accordion__item .accordion__item__body {
  transition: 0.5s ease all;
  border-top: 1px solid transparent;
}
.hamberger-accordion__item .accordion__item__body.active {
  visibility: visible;
}
.hamberger-accordion__link {
  text-decoration: none;
  color: var(--color-link) !important;
  word-wrap: break-word;
}
.hamberger-accordion__link-black {
  color: var(--color-link) !important;
  text-decoration: none;
}
.hamberger-accordion__link-black.active {
  font-weight: var(--font-body-weight-bold);
}
.hamberger-accordion--childElement {
  padding-inline-start: 0;
}
.hamberger-accordion .hamberger-accordion--childElement .accordion__item__body {
  border-top: none;
}
.hamberger-accordion--innerAccordion .accordion__item__head.active .caret-icon {
  margin-inline-end: 8px;
  transform: rotate(180deg);
  transition: 0.3s ease all;
}
.hamberger-accordion--innerAccordion .accordion__item__head .caret-icon {
  inset-inline-end: 0;
  top: 0;
  transform: rotate(0deg);
  transition: 0.3s ease all;
}
.hamberger-accordion--innerAccordion .accordion__item__head::after, .hamberger-accordion--innerAccordion .accordion__item__head::before {
  display: none;
}
.hamberger-accordion--innerAccordion[open] .caret-icon {
  transform: rotate(180deg);
  transition: 0.3s ease all;
}

/* ==========================================================================
   MOBILE MENU DRAWER - target layout
   The sub-menus used to be full-screen panels that slid over the drawer, which
   is why a Back control existed. They now expand in place, using the theme's
   own accordion-tab disclosure, so every rule below concerns rows in normal
   flow rather than an overlay.
   24px is the rhythm at both levels. It is not an arbitrary pick: the nav list
   already pads itself 24px, the footer rows already pad 24px, and the child
   items already carried a 24px margin. DESIGN.md records that this theme
   defines no spacing custom properties, so the block's own dominant value is
   the closest thing to a token.
   Everything here uses logical properties, so the whole drawer mirrors in
   Arabic with no direction-specific rule.
   ========================================================================== */

/* Close control: the short dash from the target, at the top inline-start */
.hamberger-drawer__close {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* No sizing rule here on purpose. close-dash carries its own 24px width and
   height, the same as on every other close control in the theme, so this button
   is sized by the glyph rather than by a rule unique to this drawer. */

/* Disclosure row: label at the inline-start, affordance at the inline-end */
.hamberger-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.hamberger-accordion__disclosure .accordion__item {
  margin-bottom: 0;
  width: 100%;
}

/* One plus that turns through 45 degrees when the row opens. It used to swap to
   a minus, but the dash is now the theme's close glyph, and having the drawer's
   close control and its accordions share a glyph with two different meanings in
   the same view was the ambiguity. A rotating plus never renders a bare
   horizontal rule, so the two controls stay distinct.
   details carries open natively, so the state needs no script. */
.hamberger-accordion__affordance {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.hamberger-accordion__affordance svg {
  transition: transform 0.3s ease;
}

.hamberger-accordion__disclosure details[open] .hamberger-accordion__affordance svg {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .hamberger-accordion__affordance svg {
    transition: none;
  }
}

/* Sub-items: one rhythm with the primary rows, indented by the same 24px */
.hamberger-accordion--childElement {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-inline-start: 24px;
  padding-block-start: 24px;
}

.hamberger-accordion--childElement li {
  padding-inline: 0;
  margin-bottom: 0;
}

.hamberger-accordion__disclosure .accordion__item__body {
  padding-bottom: 0;
}

/* Footer pinned to the bottom, leaving the flexible gap the target draws */
.hamberger-drawer .drawer__wrapper {
  display: flex;
  flex-direction: column;
}

.hamberger-drawer .drawer__body {
  flex: 1 1 auto;
  min-height: 0;
}

.hamberger-drawer .drawer__footer {
  margin-block-start: auto;
  flex-shrink: 0;
}

/* One divider, between the country row and the language row */
.hamberger-drawer .drawer__footer > li + li {
  border-top: 1px solid rgba(var(--color-border-rgba));
}

/* No rule under the close control - the target has none. The border lives on
   the shared .drawer__header, which twelve other drawers and two sections also
   use, so it is switched off here rather than removed there.
   The header's own inline padding stays at 24px, keeping the dash on the same
   inline edge as the nav rows.
   Spacing works in half-steps of the drawer's 24px rhythm. Headroom above the
   dash is 36px, one and a half units, so the dash sits clearly below the top
   edge. Below it the header's 12px meets the list's 12px, so the dash and the
   first nav row stay exactly one full 24px unit apart - growing the headroom
   deliberately does not disturb that gap. */
.hamberger-drawer .drawer__header {
  padding-block: 36px 12px;
  border-bottom: none;
}

.hamberger-drawer .hamberger-accordion {
  padding-block-start: 12px;
}

/* Weight carries the hierarchy now that both levels share the m tier.
   These selectors were removed from the header's font-weight 500 block, which
   sits later in the stylesheet and carries !important - they could not be
   overridden from here while they were still listed there. The two values are
   the theme's own body weight tokens, not picked numbers. */
.hamberger-accordion__head,
.hamberger-accordion__link-black {
  font-weight: var(--font-body-weight-bold);
}

.hamberger-accordion__link {
  font-weight: var(--font-body-weight);
}

.logo-left-menu-center .header__menu-wrp {
  order: 2;
  flex: 1;
}
@media (max-width: 991px) {
  .logo-left-menu-center .header__menu-wrp {
    display: none;
  }
}
@media (max-width: 991px) {
  .logo-left-menu-center .align-logo-logo-left-menu-center {
    flex: 1;
  }
}
.logo-left-menu-center .header__iconGroup {
  flex: none;
}
@media (max-width: 991px) {
  .logo-left-menu-center .header__iconGroup {
    flex: 1;
  }
}
@media (max-width: 991px) {
  .logo-left-menu-center .header__iconGroup .desktop-only {
    display: none;
  }
}

@media (max-width: 991px) {
  .logo-center-menu-left > .header__menu-wrp {
    display: none;
  }
}

.menu-left {
  margin-inline-start: 80px;
}
@media (max-width: 991px) {
  .menu-left {
    display: none;
  }
}

/* Unitless ratio, not a fixed px value. 21px against the previous 15.4px font was a 1.3636
   ratio; 1.35 reproduces that to within 0.1px at the current size while scaling with the
   typography-scale tiers. A fixed 21px clipped descenders and collided rows once the header
   font passed ~20px, which is the failure this replaces. */
.menu-main-link {
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 991px) {
  .dropdown-menu {
    display: none;
  }
}
.dropdown-menu__item a:hover {
  transform: 0.5s ease all;
}
.dropdown-menu__item a:hover:hover {
  opacity: 0.8;
}
.dropdown-menu__item--first-child {
  padding: 6px 24px;
  position: relative;
}
.dropdown-menu__item--first-child .menu-main-link {
  display: flex;
  padding: 0;
}
.dropdown-menu__mega-menu-dropdown {
  position: relative !important;
  top: 0 !important;
  column-gap: 22px;
}
.dropdown-menu__mega-menu-dropdown .mega-menu__list {
  box-shadow: none !important;
  border-radius: 0;
}
.dropdown-menu__mega-menu-dropdown, .dropdown-menu__wrapper {
  position: absolute;
  inset-inline-start: 0;
  top: 30px;
  z-index: 0;
}
.dropdown-menu__mega-menu-dropdown > .dropdown-menu__list, .dropdown-menu__wrapper > .dropdown-menu__list {
  box-shadow: 0 2rem 4rem rgba(50, 50, 71, 0.08);
}
.dropdown-menu__mega-menu-dropdown summary, .dropdown-menu__wrapper summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dropdown-menu__mega-menu-dropdown .menu-main-link, .dropdown-menu__wrapper .menu-main-link {
  position: relative;
  color: var(--color-text) !important;
}
.dropdown-menu__mega-menu-dropdown .menu-main-link::after, .dropdown-menu__wrapper .menu-main-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-bottom: 1px solid var(--color-text);
  width: 0;
  transition: 0.5s ease all;
  inset-inline-start: 0;
}
.dropdown-menu__mega-menu-dropdown details[open] summary > span, .dropdown-menu__wrapper details[open] summary > span {
  opacity: 0.5;
}
.dropdown-menu__mega-menu-dropdown details[open] summary > span:first-child::after, .dropdown-menu__wrapper details[open] summary > span:first-child::after {
  width: 100%;
  opacity: 0.5;
}
.dropdown-menu__mega-menu-dropdown details[open] .menu-main-link:hover, .dropdown-menu__mega-menu-dropdown details[open] .menu-main-link:focus-visible, .dropdown-menu__wrapper details[open] .menu-main-link:hover, .dropdown-menu__wrapper details[open] .menu-main-link:focus-visible {
  opacity: 0.5;
}
.dropdown-menu__mega-menu-dropdown details[open] .menu-main-link:hover::after, .dropdown-menu__mega-menu-dropdown details[open] .menu-main-link:focus-visible::after, .dropdown-menu__wrapper details[open] .menu-main-link:hover::after, .dropdown-menu__wrapper details[open] .menu-main-link:focus-visible::after {
  width: 100%;
}
.dropdown-menu__mega-menu-dropdown summary:focus-visible > span,
.dropdown-menu__mega-menu-dropdown summary:hover > span, .dropdown-menu__wrapper summary:focus-visible > span,
.dropdown-menu__wrapper summary:hover > span {
  opacity: 0.5;
}
.dropdown-menu__wrapper {
  z-index: 3;
}
.dropdown-menu__list {
  padding-block: 12px;
  position: relative;
  inset-inline-start: 0;
  top: 100%;
  width: 215px;
  background: var(--color-background) var(--gradient-background) 100%;
  border-inline-end: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px 0;
  border-radius: var(--radius-base);
}
.dropdown-menu__list .dropdown-menu__item {
  padding: 6px 24px;
  margin-bottom: 0;
}
.dropdown-menu__list--child-list {
  inset-inline-start: 102%;
  top: 0;
  z-index: 0;
  position: absolute;
  box-shadow: 0 2rem 4rem rgba(50, 50, 71, 0.08);
  overflow: auto;
  max-height: calc(85vh - (var(--header-height, 0) + var(--announcement-height, 0)));
  padding-top: 12px;
  padding-bottom: 12px;
}
.dropdown-menu__list--child-list .dropdown-menu__item {
  padding: 6px 24px;
  display: flex;
}
.dropdown-menu__list--child-list a {
  font-size: calc(var(--font-body-scale) * 14px);
  line-height: calc(var(--font-body-scale) * 14px * var(--body-line-height));
  text-decoration: none;
}
.dropdown-menu__list .arrow-icon {
  position: relative;
  inset-inline-end: -10px;
  transform: rotate(90deg);
  transition: 0.3s ease all;
}
.dropdown-menu__list .arrow-icon svg {
  width: 12px;
  height: 12px;
}
.dropdown-menu__list .dropdown-menu__item:hover .arrow-icon {
  transition: 0.3s ease all;
  display: block;
}

.mega-menu__item {
  position: relative;
}
.mega-menu__item--child-item {
  width: 150px;
}
.mega-menu__item .link-head {
  font-weight: var(--font-body-weight-bold);
}
.mega-menu .mega-menu-container {
  max-height: calc(100vh - 90px);
  padding-top: var(--header-height, 0);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
  background: var(--color-background) var(--gradient-background) no-repeat 100%;
  border-radius: 0 0 var(--menu-drawer-border-radius) var(--menu-drawer-border-radius);
  box-shadow: 0 15px 15px rgba(50, 50, 71, 0.0784313725);
  padding-bottom: 48px;
}
.mega-menu .mega-menu-container .bundle__Wrp .bundle {
  margin-top: 0;
}
.mega-menu .mega-menu-dropdown__container {
  display: flex;
  padding-top: 24px;
}
.mega-menu .mega-menu-dropdown .dropdown-menu__list--child-list a {
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  letter-spacing: var(--body-letter-spacing);
}
.mega-menu__list {
  flex-grow: 1;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 0fr));
  height: -moz-fit-content;
  height: fit-content;
  gap: 48px 20px;
}
@media (min-width: 1336px) {
  .mega-menu__list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 0fr));
    gap: 48px 60px;
  }
}
@media (min-width: 1440px) {
  .mega-menu__list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 0fr));
  }
}
.mega-menu__list > .mega-menu__item > a {
  font-size: calc(var(--heading-font-size-h5) + 0.125rem);
  letter-spacing: var(--heading-letter-spacing-h5);
  font-family: var(--font-head-family);
  display: inline-block;
}
.mega-menu__list--product {
  row-gap: 16px;
  flex-grow: unset;
  padding-inline-end: 52px;
  grid-template-columns: 163px;
  display: flex;
  flex-direction: column;
}
.mega-menu__list--product [menu-item] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 170px;
}
.mega-menu__list--product [menu-item].menu-main-link {
  line-height: 32px;
  font-weight: var(--font-body-weight);
}
.mega-menu__list--product [menu-item] .menu-main-link {
  margin-bottom: 0 !important;
  line-height: 32px;
  font-weight: var(--font-body-weight);
}
.mega-menu__list--product .link-head {
  font-size: calc(var(--font-body-scale) * 16px);
  font-family: var(--font-body-family);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  letter-spacing: var(--body-letter-spacing);
}
.mega-menu__list--product .dropdown-menu__item--first-child .dropdown-menu__list {
  padding: 16px;
  box-shadow: 0 2rem 4rem rgba(50, 50, 71, 0.08);
  border: none;
  margin-inline-start: 20px;
}
.mega-menu__list--product .dropdown-menu__item--first-child .dropdown-menu__list .dropdown-menu__item:not(:last-child) {
  margin-bottom: 16px;
}
.mega-menu__list--product .dropdown-menu__item {
  padding: 0;
}
.mega-menu__list--product .dropdown-menu__item .menu-main-link {
  margin: 0 !important;
}
.mega-menu__list--product + .product-promotions {
  flex-grow: 1;
}
.mega-menu__list--product + .product-promotions ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 30px;
}
/* Removed: .mega-menu__list--product + .product-promotions .h4 — it targeted the mega-menu
   sub-heading's old .h4 class, was always defeated by the .h4 !important rule so never took
   effect, and no longer has any target now that the sub-heading uses the typography scale. */
.mega-menu__list--product + .product-promotions .card-footer {
  margin-top: 16px;
}
.mega-menu__list--product + .product-promotions .product-card-link {
  text-decoration: none;
}
.mega-menu__list--product + .product-promotions .product-card-item__aspectSize {
  z-index: -1;
}
.mega-menu__list--child-list {
  flex-direction: column;
  padding: 0;
}
.mega-menu__list--child-list .mega-menu__item a {
  text-decoration: none;
  transform: 0.5s ease all;
}
.mega-menu__list--child-list .mega-menu__item a:hover {
  opacity: 0.8;
}
.mega-menu__list--child-list .mega-menu__item:not(:last-child) {
  margin-bottom: 10px;
}
.mega-menu__link {
  margin-bottom: 12px;
}
.mega-menu .mega-menu-dropdown {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s ease all;
}
.mega-menu .mega-menu-dropdown .menu-main-link {
  margin-bottom: 12px;
  color: var(--color-text) !important;
}
.mega-menu .mega-menu-dropdown::before {
  content: "";
  width: 100%;
  top: 0;
  position: absolute;
  height: 16px;
  transform: translateY(-100%);
}
.mega-menu .mega-menu-dropdown .mega-menu__heading {
  font-family: var(--font-head-family);
  font-size: calc(var(--heading-font-size-h5) + 0.125rem);
  line-height: calc(var(--heading-font-size-h5) + 0.125rem * var(--font-heading-line-height-h5));
  letter-spacing: var(--heading-letter-spacing-h5);
}
.mega-menu-collections__tabs {
  gap: 40px;
}
.mega-menu-collections__tab {
  font-weight: var(--font-header-weight) !important;
  cursor: pointer;
  opacity: 0.5;
  position: relative;
}
.mega-menu-collections__tab::after {
  position: absolute;
  content: "";
  bottom: -2px;
  height: 1px;
  inset-inline-start: 0;
  width: 0;
  background-color: var(--color-text);
  transition: all 0.2s;
}
.mega-menu-collections__tab.active {
  opacity: 1;
}
.mega-menu-collections__tab.active::after {
  width: 100%;
}
.mega-menu-collections .bundle__body {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: calc(var(--font-body-scale) * 16px);
}
.mega-menu-collections__swiper {
  transition: opacity 0.1s;
  z-index: 0;
}
.mega-menu-collections__swiper .dash_arrows {
  width: calc(100% + 96px);
  top: 50%;
  inset-inline-start: -48px;
  transform: translateY(calc(-50% - 21px));
}
.mega-menu-collections__swiper .dash_arrows .slideshow__next {
  inset-inline-end: 0;
}
.mega-menu-collections__swiper .dash_arrows .slideshow__prev {
  inset-inline-start: 0;
}
.mega-menu-collections__swiper .dash_arrows .swiper-button-disabled {
  opacity: 0.5;
}
.mega-menu-collections__swiper .dash_arrows .swiper-button-lock {
  display: none !important;
}
.mega-menu-collections__link {
  margin-top: 32px;
}
.mega-menu-collections__link::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50px;
  right: 50px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) and (max-width: 1335px) {
  .mega-menu-collection-slider-container {
    padding-inline: 44px;
  }
}

@media (min-width: 992px) {
  [drawer-type=header] .drawer__body__wrapper {
    height: calc(100vh - 130px);
  }
}

.align-logo-cente-grid-item {
  grid-column-start: 2;
}

.bundle {
  margin-inline-start: 24px;
  margin-top: 16px;
  display: flex;
  gap: 14px;
}
.bundle-vertical {
  max-height: var(--bundle-height);
  overflow: auto;
  padding-inline-end: 15px;
}
.bundle__container img {
  transition: all 0.3s ease-in-out;
}
.bundle__container img:hover {
  transform: scale(1.1);
}
.bundle__Wrp::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: -25px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}
.bundle__title {
  font-weight: var(--font-header-weight);
  font-size: var(--heading-font-size-h5);
  line-height: calc(var(--heading-font-size-h5) * var(--font-heading-line-height-h5));
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: 16px;
}
.bundle__item {
  width: 256px;
}
.bundle__item:not(:last-child) {
  margin-bottom: 14px;
}
@media (max-width: 1335px) {
  .bundle__item {
    width: 230px;
  }
}
@media (max-width: 1024px) {
  .bundle__item {
    width: 156px;
  }
}
.bundle__image {
  background-color: rgba(var(--color-border-rgba));
  line-height: 0;
  border-radius: var(--radius-base);
  overflow: hidden;
}
.bundle__image svg {
  width: 100%;
  height: 100%;
}
.bundle__imgWrp {
  overflow: hidden;
}
.bundle__link {
  font-weight: var(--font-body-weight-bold);
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  color: var(--color-text);
  text-decoration: none;
  display: block;
}
.bundle__link .collection-img {
  overflow: hidden;
  border-radius: var(--radius-base);
  display: flex;
  margin-bottom: 12px;
}
.bundle__link img {
  transition: 0.3s ease all;
}
.bundle__link:hover img {
  transform: scale(1.1);
}
.bundle .arrow-icon {
  margin-inline-start: 4px;
}
.bundle .arrow-icon svg {
  width: 12px;
  height: 12px;
}
.bundle__body {
  margin-block-start: 8px;
}

@media (max-width: 991px) {
  .search-drop {
    position: fixed !important;
    height: 100vh;
    width: 100vw !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    transform: translateX(-100%);
    transition: 0.5s ease all;
    display: block;
  }
}
@media screen and (max-width: 991px) and (max-width: 991px) {
  .search-drop.active {
    transform: translateX(0%);
    transition: 0.5s ease all;
  }
}
.search-drop__form-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
  padding-top: 24px;
  padding-bottom: 24px;
  background: var(--color-background) var(--gradient-background) none 100%;
  transform: translateY(-100%);
  transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s all;
}
@media screen and (max-width: 991px) {
  .search-drop__contentWrp {
    overflow-x: scroll;
    width: 100%;
  }
}
.search-drop .header__menuContainer {
  padding-top: 34px;
  padding-bottom: 34px;
}
@media screen and (max-width: 991px) {
  .search-drop .header__menuContainer {
    background: var(--color-background) var(--gradient-background) none 100%;
    width: 95%;
    margin-inline-start: 0;
    height: 100%;
    padding-top: 85px !important;
    padding-inline: 0;
  }
}
.search-drop__wrp {
  display: none;
  position: absolute;
}
.search-drop__wrp.active {
  display: block;
  position: relative;
}
.search-drop__ContentWrp {
  padding: 0 24px;
}
.search-drop__container .btn-wrp {
  padding: 0 24px;
}
@media (max-width: 991px) {
  .search-drop__container .btn-wrp,
.search-drop__container .btn--border {
    width: 95%;
  }
}
.search-drop__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 991px) {
  .search-drop__content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
.search-drop__types {
  padding: 0;
}
@media screen and (max-width: 991px) {
  .search-drop__types {
    display: flex;
    padding: 0 24px;
    border-bottom: 1px solid rgba(var(--color-border-rgba));
    padding-bottom: 16px;
  }
}
.search-drop__types li:not(:last-child) {
  margin-bottom: 48px;
}
@media screen and (max-width: 991px) {
  .search-drop__types li:not(:last-child) {
    margin-bottom: 0;
    margin-inline-end: 21px;
  }
}
.search-drop__types li {
  font-weight: var(--font-header-weight);
  font-size: var(--heading-font-size-h4);
  line-height: calc(var(--heading-font-size-h4) * var(--font-heading-line-height-h4));
  cursor: pointer;
}
@media screen and (max-width: 991px) {
  .search-drop__types li {
    font-size: calc(var(--heading-font-size-h4) - 0.125rem);
    line-height: calc(var(--heading-font-size-h4) - 0.125rem * var(--font-heading-line-height-h4));
  }
}
.search-drop__types li.active {
  color: var(--color-text);
}
.search-drop__products {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-top: 30px;
}
.search-drop__products li {
  margin-inline-end: 24px;
  width: 235px;
}
@media (max-width: 1335px) {
  .search-drop__products li {
    width: 184px;
  }
}
@media (max-width: 991px) {
  .search-drop__products li {
    width: 100%;
  }
}
.search-drop__products li:nth-child(4n) {
  margin-inline-end: 0;
}
@media (max-width: 991px) {
  .search-drop__products li .trending-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }
}
@media (max-width: 991px) {
  .search-drop__products li .trending-item__body {
    margin-inline-start: 8px;
  }
}
@media (max-width: 991px) {
  .search-drop__products li .trending-item__head {
    margin-top: 0;
    margin-bottom: 8px;
  }
}
.search-drop__products li .trending-item__img {
  width: 100%;
  height: 314px !important;
}
@media (max-width: 1335px) {
  .search-drop__products li .trending-item__img {
    height: 200px !important;
  }
}
@media (max-width: 991px) {
  .search-drop__products li .trending-item__img {
    width: 60px;
    height: 60px !important;
  }
}

.predictive-search {
  visibility: hidden;
  display: none;
}
.predictive-search .product-card-item__aspectSize {
  height: 256px;
}

.search-form {
  position: relative;
}
.search-form__container {
  padding: 16px 24px;
}
.search-form__wrp {
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 991px) {
  .search-form__wrp {
    margin-top: 0;
  }
}
.search-form__back {
  background-color: transparent;
  border: none;
  position: absolute;
  padding: 0;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}
.search-form__input {
  width: 100%;
  padding: 18px 24px;
  color: var(--color-text);
  border: 1px solid rgba(var(--color-border-rgba));
}
.search-form__input::-webkit-search-cancel-button {
  display: none;
}
.search-form__input-clear {
  background-color: transparent;
  border: none;
  position: absolute;
  top: 50%;
  inset-inline-end: 16px;
  display: flex;
  cursor: pointer;
  transform: translateY(-50%) rotate(0deg);
  transition: ease transform 0.5s;
}
.search-form__input-clear:hover {
  transform: translateY(-50%) rotate(360deg);
  transition: ease transform 0.5s;
}

.search-form-container[open=true] .predictive-search {
  visibility: visible;
  display: block;
}
.search-form-container[open=true] .predictive-search__footer {
  display: flex;
}

.js-search-btn {
  border-top: 1px solid rgba(var(--color-border-rgba));
}

.search-page-result .search-drop__contentWrp {
  border-bottom: 0 !important;
}

.search-filter {
  padding: 40px 0 !important;
}

.predictive-search-results {
  display: flex;
}

.searchpage-drop-types li {
  position: relative;
}
.searchpage-drop-types li::after {
  position: absolute;
  content: "";
  bottom: -18px;
  height: 2px;
  inset-inline-start: 0;
  width: 0;
  background-color: var(--color-text);
  transition: 0.5s ease all;
}
.searchpage-drop-types li:hover::after {
  width: 100%;
  transition: 0.5s ease all;
}
.searchpage-drop-types li.active::after {
  width: 100%;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
@media (min-width: 992px) {
  .header-container.logo-center-menu-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
}
.header-container.logo-center-menu-bottom .header__iconGroup {
  justify-content: end;
  grid-column-start: 3;
  flex-wrap: wrap;
}
.header-container.logo-center-menu-bottom .localization-dropdown__list {
  top: 30px;
}
.header-container .localization-dropdown__list {
  top: 30px;
}
@media screen and (max-width: 1023px) {
  .header-container .localization-dropdown__list {
    top: 38px;
  }
}

.drawer-active .search-drop__form-container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  transform: translateY(0);
  transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s all;
  height: auto;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
}
@media (max-width: 991px) {
  .drawer-active .bundle {
    flex-direction: column;
  }
}

.hide-header {
  transform: translateY(-160%);
}

@media (min-width: 992px) {
  .menu-bottom {
    margin-block-start: 16px;
  }
}
.menu-bottom .dropdown-menu__wrapper {
  top: 38px;
}
@media (max-width: 992px) {
  .menu-bottom .header__menu-wrp {
    display: none;
  }
}

.align-logo-logo-center-menu-bottom {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 992px) {
  .align-logo-logo-left-menu-left {
    align-items: center;
    display: flex;
  }
}

@media (min-width: 992px) {
  .logo-left-menu-left {
    display: grid;
    grid-template-columns: auto auto;
  }
}

@media (min-width: 992px) {
  .logo-center-menu-left .header__menu-wrp,
.logo-center-menu-left .header__iconGroup {
    flex: 1;
  }
}
@media (min-width: 992px) {
  .logo-center-menu-left .header__iconGroup {
    justify-content: end;
  }
}

[drawer-type=header] .drawer__overlay,
[drawer-type=search-drawer] .drawer__overlay {
  height: 100vh;
}

details summary {
  list-style: none;
  cursor: pointer;
}
details summary::-webkit-details-marker {
  display: none;
}

.footer {
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
}
.footer__logoWrp {
  width: var(--custom-width, 100%);
}
@media (max-width: 991px) {
  .footer__logoWrp {
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .footer__logoWrp {
    margin-bottom: 16px;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .footer__logoWrp.not-first-block {
    margin-top: 16px;
  }
}
.footer .footer__logo {
  max-width: min(var(--footer-logo-width, 1px), 100%);
  width: 100%;
  margin-block-end: 35px;
}
@media (max-width: 767px) {
  .footer .footer__logo {
    margin-block-end: 16px;
  }
}
.footer .footer__logo img {
  width: 100%;
  height: auto;
}
.footer .footer__logo a {
  display: inline-block;
}
.footer .footer__logo-placeholder {
  width: 100px;
}
.footer .footer__logo-placeholdersvg {
  display: block;
  width: 100%;
  height: 100%;
}
.footer__content {
  margin-bottom: 70px;
}
@media (max-width: 767px) {
  .footer__content {
    margin-bottom: 24px;
  }
}
.footer__wrapper {
  gap: 20px;
  display: grid;
}
.footer__wrapper.grid-layout--5-desktop > :last-child {
  grid-column: 1/-1;
}
@media screen and (min-width: 768px) {
  .footer__wrapper.grid-layout--5-desktop {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 992px) {
  .footer__wrapper.grid-layout--5-desktop {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .footer__wrapper.grid-layout--4-desktop {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .footer__wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 0;
  }
}
@media (max-width: 767px) {
  .footer .footerlink-head {
    font-size: var(--heading-font-size-h5);
  }
}
@media (max-width: 767px) {
  .footer .footers-linkList {
    flex-basis: 100%;
  }
}
.footer .new-letter {
  width: var(--custom-width, 100%);
}
@media screen and (max-width: 767px) {
  .footer .new-letter {
    width: 100%;
  }
}
@media (max-width: 991px) {
  .footer .new-letter {
    margin-top: 16px;
  }
}
.footer ul {
  margin-top: 0;
  padding-inline-start: 0;
}
.footer .footerlink-link:not(:last-child) {
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .footer .footerlink-link:not(:last-child) {
    margin-bottom: 16px;
  }
}
@media (max-width: 767px) {
  .footer .footerlink-link a {
    font-size: calc(var(--font-body-scale) * 16px);
  }
}
.footer__links {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  margin-inline-start: 7rem;
}
.footer .list-payment {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.footer .list-payment__item {
  margin-bottom: 0;
}
.footer__bottom {
  padding: 14px 0;
  border-top: 0.5px solid rgba(var(--color-border-rgba));
}
@media screen and (max-width: 991px) {
  .footer__bottom {
    padding: 23px 0;
  }
}
.footer__bottomWrp {
  display: flex;
  justify-content: space-between;
  column-gap: 16px;
}
@media (max-width: 991px) {
  .footer__bottomWrp {
    flex-direction: column;
    align-items: center;
    row-gap: 22px;
  }
}
.footer__bottomWrp a {
  color: var(--color-text);
  text-decoration: none;
}
.footer__bottomWrp a:hover {
  text-decoration: underline;
}
.footer__bottomWrp--item {
  flex: 1 1 33%;
}
.footer__cardsList {
  display: flex;
  margin: 0;
}
@media (max-width: 991px) {
  .footer__cardsList {
    margin-bottom: 12px;
  }
}
.footer__cardsList li {
  margin-inline-start: 6px;
}
.footer .social-links {
  display: flex;
  margin-top: 30px;
  align-items: center;
}
@media (max-width: 991px) {
  .footer .social-links {
    margin-top: 16px;
  }
}
.footer .social-links__item:not(:last-child) {
  margin-inline-end: 15px;
}
.footer .social-links__item a {
  display: flex;
}
.footer__default-wrapper {
  margin-bottom: 24px;
}
@media screen and (max-width: 991px) {
  .footer__default-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}
.footer__language-currency {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 991px) {
  .footer__language-currency {
    order: 2;
  }
}
@media screen and (max-width: 991px) {
  .footer__followShop.add__bottom-spacing {
    margin-bottom: 10px;
  }
}
.footer__language {
  margin-inline-start: 24px;
}
.footer__language .localization-dropdown__list {
  bottom: 42px;
}
.footer .accordion__item {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(var(--color-border-rgba));
}
.footer .accordion__item__head .footerlink-head {
  margin-bottom: 0;
}
.footer__text-content {
  width: var(--custom-width, 100%);
}
@media screen and (max-width: 767px) {
  .footer__text-content {
    width: 100%;
  }
}
.footer__country .localization-dropdown__list {
  bottom: 42px;
  min-width: 210px;
}
.footer__ending {
  overflow: hidden;
  padding: 21px 0 35px 0;
}
@media screen and (max-width: 590px) {
  .footer__ending {
    padding: 18px 0 35px 0;
  }
}
.footer__ending--image img {
  object-fit: contain;
  height: 100%;
}
.footer__ending--image svg {
  width: var(--footer__image--width);
  display: block;
  height: auto;
  margin: 0 auto;
}
.footer__ending.half-crop {
  padding-bottom: 0;
}
.footer__ending.half-crop .footer__ending--image {
  margin-bottom: calc(var(--footer-height) * var(--bottom__image--margin__bottom) / 100 * -1);
}
.footer__sublinks {
  gap: 16px;
  display: flex;
}
@media screen and (max-width: 991px) {
  .footer__sublinks {
    order: 1;
  }
}
@media screen and (max-width: 991px) {
  .footer__payment {
    order: 2;
  }
}
@media screen and (max-width: 991px) {
  .footer .paragraph-item {
    order: 3;
  }
}
.footer__info-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  border-radius: 25px;
  align-items: center;
  order: 1;
}
.footer__info-tags__email {
  text-transform: none;
}
.footer__info-tags--item {
  border-radius: 50px;
  padding: 9px 11px;
}
.footer__info-tags--item:hover::after {
  border-radius: 50px;
}
@media screen and (max-width: 991px) {
  .footer__info-tags {
    order: 1;
    margin-bottom: 14px;
  }
}
.footer__link-list {
  width: var(--custom-width, 100%);
}
@media screen and (max-width: 767px) {
  .footer__link-list {
    width: 100%;
  }
}

.newsletter__email-input {
  flex: 1;
  margin-inline-end: 8px;
}
.newsletter__email-input input {
  width: 100%;
  /* Input already sits inside .newsletter__email-input, which reserves the trailing gap before
     the submit button via its own margin-inline-end above. The input's own margin-inline-end
     (set generically on .newsletterForm__input) would double up on top of that here, overflowing
     this wrapper's box in the trailing direction and colliding with the button next to it —
     harmless-looking in LTR with the English label's width but visibly overlapping in RTL with
     the Arabic label. Zeroed here so there is exactly one gap-defining margin, mirroring cleanly
     in both directions. */
  margin-inline-end: 0;
}

.newsletterForm + .success-ms {
  margin-top: 16px;
}
.newsletterForm .btn {
  height: 100%;
}

.localization-dropdown {
  position: relative;
}
/* The country name and the currency code are two adjacent spans with nothing
   between them, so a flex row with no gap renders them run together as
   "Saudi ArabiaSAR". This is deliberately the shared rule rather than a drawer
   scoped one: the header selector carries the same defect today, and the footer
   only escapes it because its country name is switched off, leaving a flag and
   a currency code that also read better apart. */
.localization-dropdown__btn {
  cursor: pointer;
  background-color: transparent;
  border: none;
  font-weight: var(--font-body-weight-bold);
  font-size: calc(var(--font-body-scale) * 14px);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.localization-dropdown__btn svg {
  width: 12px;
  transition: all 0.2s ease-in;
  margin-inline-start: 8px;
}
.localization-dropdown__currency {
  white-space: nowrap;
  line-height: normal;
}
.localization-dropdown__list {
  position: absolute;
  max-height: 150px;
  overflow-y: auto;
  box-shadow: 0 2rem 4rem rgba(50, 50, 71, 0.08);
  z-index: 2;
}
.localization-dropdown__list[hidden] {
  visibility: hidden;
  opacity: 0;
}
.localization-dropdown__item {
  margin-bottom: 0;
}
.localization-dropdown__item-link {
  text-decoration: none;
  font-size: calc(var(--font-body-scale) * 14px);
}
.localization-dropdown .dropdown-active .localization-dropdown__btn svg {
  transform: rotate(360deg);
  transition: transform 0.2s ease-in;
}
.localization-dropdown.country-selector .localization-dropdown__list {
  min-width: 210px;
}
.localization-dropdown.country-selector .localization-dropdown__item-link {
  display: flex;
  align-items: center;
}

.drawer[aria-hidden=true] {
  visibility: hidden;
}
.drawer[aria-hidden=false] {
  visibility: visible;
}
.drawer__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition: 0.6s ease all;
  backdrop-filter: blur(15px);
}
.drawer__wrapper {
  display: flex;
  flex-direction: column;
  max-width: 410px;
  width: 90%;
  height: 100%;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
  transition: 0.6s cubic-bezier(0.75, 0, 0.175, 1) transform;
  position: fixed;
  z-index: 100;
  overflow: hidden;
}
.drawer__wrapper--animation-position-right {
  transform: translateX(calc(100% * var(--dir)));
  margin-inline-start: auto;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  border-start-start-radius: var(--menu-drawer-border-radius);
  border-end-start-radius: var(--menu-drawer-border-radius);
}
.drawer__wrapper--animation-position-center {
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.93);
  bottom: inherit;
  right: inherit;
  opacity: 0;
  visibility: hidden;
  border-radius: var(--radius-base);
}
.drawer__wrapper--animation-position-left {
  right: inherit;
  top: 0;
  inset-inline-start: 0;
  transform: translateX(calc(-100% * var(--dir)));
  border-start-end-radius: var(--menu-drawer-border-radius);
  border-end-end-radius: var(--menu-drawer-border-radius);
}
.drawer__wrapper--animation-postion-bottom {
  transform: translateY(120%);
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: var(--menu-drawer-border-radius) var(--menu-drawer-border-radius) 0 0;
}
@media screen and (max-width: 767px) {
  .drawer__wrapper--animation-postion-bottom-only-mobile {
    transform: translateY(120%);
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: var(--menu-drawer-border-radius) var(--menu-drawer-border-radius) 0 0;
  }
}
@media screen and (max-width: 768px) {
  .drawer__wrapper--animation-postion-bottom-from-tablet {
    transform: translateY(120%);
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: var(--menu-drawer-border-radius) var(--menu-drawer-border-radius) 0 0;
  }
}
.drawer__wrapper--animation-position-bottom-right {
  top: inherit;
  bottom: 15px;
  inset-inline-end: 15px;
  height: auto;
  transform: translateX(calc((100% + 15px) * var(--dir)));
  opacity: 0;
  transition: 0.6s ease all;
}
.drawer__wrapper--animation-position-bottom-left {
  top: inherit;
  bottom: 15px;
  inset-inline-start: 15px;
  height: auto;
  transform: translateX(calc((-100% - 15px) * var(--dir)));
  opacity: 0;
  transition: 0.6s ease all;
}
.drawer .overflow-y {
  overflow-y: auto;
  position: relative;
}
.drawer__header {
  padding: 16px 24px;
  display: flex;
  border-bottom: 1px solid rgba(var(--color-border-rgba));
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
}
.drawer__header img {
  cursor: pointer;
}
.drawer__header__right {
  flex-shrink: 0;
}
.drawer__head {
  /* word-break belongs here, not on .h2. Several drawer heads are <p> elements
     that used to borrow it from the h1..h6/.h1..h6 group via a .h2 class; as
     each one adopted the typography scale that class went away and the long-word
     guard went with it. Declaring it on the drawer head itself covers every one
     of them and is a no-op for the heads that are real heading elements. */
  word-break: break-word;
  font-weight: var(--font-header-weight);
  display: flex;
  align-items: center;
  color: var(--color-text);
  margin-inline-start: 16px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-head-family);
}
.drawer__body {
  overflow-y: auto;
  flex: 1;
  height: 100%;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
}
.drawer__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  padding: 24px;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
}
.drawer__footer--hidden {
  opacity: 0;
  position: relative;
}
.drawer__footer .localization-dropdown {
  z-index: 999;
}
.drawer__footer .localization-dropdown__list {
  bottom: 30px;
  padding: 8px;
}
.drawer__footer-languageSelector {
  position: relative;
}
.drawer__close__btn {
  cursor: pointer;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
}
.drawer.drawer-active .drawer__overlay {
  visibility: visible;
  opacity: 1;
  transition: 0.4s cubic-bezier(0.75, 0, 0.175, 1) all;
}
.drawer.drawer-active .drawer__wrapper--animation-position-right {
  transform: translateX(0%);
}
.drawer.drawer-active .drawer__wrapper--animation-position-center {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
  transition: 0.4s ease transform;
}
.drawer.drawer-active .drawer__wrapper--animation-position-left {
  transform: translateX(0%);
}
.drawer.drawer-active .drawer__wrapper--animation-postion-bottom {
  transform: translateY(0);
}
.drawer.drawer-active .drawer__wrapper--animation-postion-bottom-only-mobile {
  transform: translateY(0);
}
.drawer.drawer-active .drawer__wrapper--animation-position-bottom-right, .drawer.drawer-active .drawer__wrapper--animation-position-bottom-left {
  opacity: 1;
  transform: translateX(0%);
}
.drawer__action__btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-background) var(--gradient-background) no-repeat 100% 100%;
  padding: 24px 24px 0;
}
.drawer[drawer-type=search-drawer] .drawer__body {
  overflow-y: hidden;
}
.pagination__contiainer {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .pagination__contiainer {
    margin-top: 24px;
  }
}
.pagination__contiainer .visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination__contiainer .navigation {
  margin-top: 24px;
}
.pagination__contiainer .pagination {
  display: flex;
  gap: 24px;
  margin-top: 48px;
}
.pagination__contiainer .pagination li {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--font-body-scale) * 14px);
}
.pagination__contiainer .pagination li.active {
  color: var(--color-link);
}
.pagination__contiainer .pagination li.active span {
  border-bottom: 1px solid var(--color-link);
}
.pagination__contiainer .pagination li.disabled {
  color: color-mix(in srgb, rgba(var(--color-border-rgba)), transparent 70%);
}
.pagination__contiainer .pagination a {
  text-decoration: none;
  color: var(--color-link);
  display: inherit;
}
.pagination__contiainer .pagination a:link {
  color: var(--color-link);
}

.free__shipping-progress__bar {
  padding: 0 24px;
}
.free__shipping-progress__bar p {
  margin-top: 0;
  margin-bottom: 8px;
}
.free__shipping-progress__bar .progressBar {
  max-width: 360px;
  width: 100%;
  height: 5px;
  background: color-mix(in srgb, rgba(var(--free-shipping-color-text)), transparent 75%);
  border-radius: 30px;
  margin-left: auto;
  margin-right: auto;
}
.free__shipping-progress__bar .progressBar__handle {
  width: 0%;
  height: 100%;
  background-color: rgba(var(--free-shipping-color-text));
  display: block;
  border-radius: 30px;
  transition: width 0.3s ease-in;
}

.product-card-item {
  height: 100%;
  text-decoration: none;
}
.product-card-item .w-100.position-relative {
  overflow: hidden;
  border-radius: var(--radius-base);
}
@media screen and (max-width: 767px) {
  .product-card-item .w-100.position-relative {
    border-radius: var(--radius-base);
  }
}
.product-card-item .product-top-info a {
  text-decoration: none;
}
.product-card-item .image--aspectSize {
  overflow: hidden;
  border-radius: var(--radius-base);
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .product-card-item .image--aspectSize {
    border-radius: var(--radius-base);
  }
}
.product-card-item .image--aspectSize img {
  background-color: var(--card-image-background);
}
@media screen and (width >= 768px) {
  .product-card-item .image--aspectSize img {
    transform: translateZ(0);
  }
}
.product-card-item__aspectSize {
  overflow: hidden;
  border-radius: var(--radius-base);
}
@media screen and (max-width: 767px) {
  .product-card-item__aspectSize {
    border-radius: var(--radius-base);
  }
}
.product-card-item__aspectSize .product_second_media_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale3d(1.08, 1.08, 1);
  visibility: hidden;
  transition: 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card-item__aspectSize .product-first-image {
  opacity: 1;
  transition: opacity 1.2s ease;
}
.product-card-item__aspectSize:hover .product-first-image {
  opacity: 0;
}
.product-card-item__aspectSize:hover .product_second_media_image {
  opacity: 1;
  transform: scaleZ(1);
  visibility: visible;
}
.product-card-item__aspectSize:has(a:focus-visible) {
  outline: var(--COLOR-CYAN-BLUE) auto 2px;
}
.product-card-item__img {
  width: 100%;
}
.product-card-item__body {
  margin-top: 10px;
  flex: 1;
}
@media screen and (max-width: 767px) {
  .product-card-item__body {
    margin-top: 8px;
  }
}
.product-card-item__head {
  font-weight: var(--font-body-weight-bold);
  font-size: calc(var(--font-body-scale) * 18px);
  line-height: calc(var(--font-body-scale) * 18px * var(--body-line-height));
  color: var(--color-text);
  margin-bottom: 12px;
  margin-top: 0;
  flex: 1;
  text-decoration: none;
}
@media (max-width: 767px) {
  .product-card-item__head {
    font-size: calc(var(--font-body-scale) * 16px);
    line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  }
}
.product-card-item .product-price__wrapper {
  margin-bottom: 16px;
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  color: var(--color-text);
  margin-inline-end: 12px;
}
@media (max-width: 767px) {
  .product-card-item .product-price__wrapper {
    margin-bottom: 8px;
  }
}
.product-card-item .product-price__wrapper .original-price {
  color: color-mix(in srgb, rgba(var(--color-text-rgba)), transparent 50%);
  margin-inline-start: 8px;
  display: inline-block;
}
.product-card-item .product-price__wrapper .offer {
  color: var(--offer-text);
  margin-inline-start: 8px;
}
.product-card-item .product-price__wrapper .product-price_top.add-bottom-spacing {
  margin-bottom: 4px;
}
.product-card-item .product-price__wrapper .product-unit-price__measurment {
  margin-bottom: 0px;
}
.product-card-item_quantity span {
  font-size: calc(var(--font-body-scale) * 16px);
  line-height: calc(var(--font-body-scale) * 16px * var(--body-line-height));
  color: var(--color-text);
}
.product-card-item:hover .quick-view-button {
  visibility: visible;
  opacity: 1;
}
.product-card-item .quick-buttons-wrapper {
  position: absolute;
  inset-inline-end: max(var(--block-border-radius) / 2, 8px);
  bottom: max(var(--block-border-radius) / 2, 8px);
  gap: 8px;
}
.product-card-item .quick-buttons-wrapper .quick-view-icon:focus-visible {
  transform: scale(1);
  opacity: 1;
  outline: var(--COLOR-CYAN-BLUE) auto 2px;
}
.product-card-item .quick-view-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  cursor: pointer;
  transition: 0.3s ease all;
  z-index: 2;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  border-radius: var(--radius-base);
  will-change: transform, opacity;
}
.product-card-item .quick-view-icon .btn--preloader {
  display: none;
}
.product-card-item .quick-view-icon.loadingState {
  width: 32px;
  height: 32px;
  background-color: var(--color-button-background);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-item .quick-view-icon.loadingState .btn--preloader {
  display: flex;
}
.product-card-item .quick-view-icon:focus-visible {
  opacity: 1;
  transform: scale(1);
}
@media screen and (max-width: 991px) {
  .product-card-item .quick-view-icon {
    opacity: 1;
    transform: scale(1);
  }
}
.product-card-item .quick-view-icon.loadingState {
  opacity: 0.5 !important;
}
.product-card-item .quick-view-icon.completedState {
  opacity: 1;
}
.product-card-item .quick-view-icon .quick-view-button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  position: static;
  opacity: 1;
  visibility: visible;
}
.product-card-item .quick-view-icon svg rect {
  rx: var(--radius-base);
}
.product-card-item .quick-view-button {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  bottom: 12px;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s ease all;
}
.product-card-item .quick-view-button:focus, .product-card-item .quick-view-button:focus-visible {
  visibility: visible;
  opacity: 1;
}
.product-card-item .quick-view-button.loadingState {
  opacity: 0.5 !important;
}
.product-card-item .quick-view-button.completedState {
  opacity: 1;
}
.product-card-item .product-card-link {
  text-decoration: none;
  display: block;
}
.product-card-item .product-card-link:focus-visible .quick-view-icon,
.product-card-item .product-card-link:hover .quick-view-icon {
  transform: scale(1);
  opacity: 1;
}
@-moz-document url-prefix() {
  .product-card-item .quick-view-button {
    width: 92%;
  }
}
.product-card-item .product-cart-no-image-container {
  display: flex;
  align-items: center;
  background-color: var(--card-image-background);
  padding: 8px;
}
/* Capped-proportional swatch sizing, measured from the approved mockup: the
   circle is 7.9362% of the card content width and the gap is 3.1710% of it,
   which is 0.4 x the diameter. Six swatches plus their six gaps therefore
   occupy 8.4 x 7.9362% = 66.66% of the card, leaving a third of the card for
   the "+N" overflow label - so that label can never wrap onto a second line
   at any card width the theme produces. The px ceiling stops the circle
   growing past the size the mockup draws on its own card width. Percentages
   resolve against the flex container, which is why .desktop-lg / .mobile-lg
   below are given the full card width. */
.product-card-item__swatch {
  --card-swatch-size: min(25px, 7.9362%);
  --card-swatch-gap: min(10px, 3.1710%);
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-swatch-gap);
  padding: 0;
  border: none;
}
.product-card-item__swatch .desktop-lg,
.product-card-item__swatch .mobile-lg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-swatch-gap);
  align-items: center;
  width: 100%;
}
.product-card-item__swatch .swatch-input__label {
  width: var(--card-swatch-size);
  flex-shrink: 0;
  padding: 0 !important;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .product-card-item__swatch {
    --card-swatch-size: min(21px, 7.9362%);
    --card-swatch-gap: min(8.4px, 3.1710%);
  }
}
/* ==========================================================================
   PRODUCT CARD REDESIGN
   Title and price share one row, subtitle sits under it, quick-add closes
   the card. The subtitle row and the quick-add button both carry a fixed
   height so that changing their S/M/L tier moves the label size without
   moving the card height - card outer dimensions must not shift per tier.
   Heights are set to clear the LARGE tier, so S and M occupy the same box.
   ========================================================================== */
.product-card-item__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.product-card-item__title-row .product-card-item__title-link {
  min-width: 0;
  text-decoration: none;
}
.product-card-item__title-row .product-card-item__head {
  margin-bottom: 0;
}
/* The price block is a flex child here rather than a full-width row, so it
   must not stretch; it sits at the end of the line, which mirrors in RTL
   on its own because the row follows the inline direction. */
.product-card-item__title-row .product-card-item__price,
.product-card-item__title-row .price {
  flex: 0 0 auto;
  text-align: end;
  white-space: nowrap;
}
/* The price wrapper is a flex item of the title row, so its own bottom margin
   inflates that row's cross-size and its inline-end margin pulls the price off
   the card edge. Both are neutralised here so the row height comes only from
   the type, and the price ends flush with the card content edge as drawn. */
.product-card-item__title-row .product-price__wrapper {
  margin-bottom: 0;
  margin-inline-end: 0;
}

.product-card-item__subtitle {
  display: flex;
  align-items: center;
  min-height: 26px;
  margin-block: 0;
  opacity: 0.85;
}

/* Card-scoped replacements for the global .mb-4 / .mb-2 utilities, so the card
   rhythm can be tuned without moving every other component that uses them. */
.product-card-item__rating {
  margin-bottom: 4px;
}
.product-card-item__swatch-row {
  margin-block: 13px 0;
}

.product-card-item__quick-add {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding-block: 0;
  /* Overrides the 32px inline padding .btn supplies. At the global value the
     label does not fit the two-up grid card on a phone. Set here rather than
     on .btn, which every button in the theme shares. */
  padding-inline: 8px;
  margin-block-start: 19px;
}
.product-card-item__quick-add[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

@media screen and (max-width: 767px) {
  .product-card-item__title-row {
    gap: 6px;
  }
  .product-card-item__subtitle {
    min-height: 24px;
  }
  .product-card-item__swatch-row {
    margin-block: 12px 0;
  }
  .product-card-item__quick-add {
    /* The design draws this at ~23.5px. Held at 32px so the tap target
       clears the WCAG 2.5.8 minimum and the LARGE button tier still fits. */
    height: 32px;
    margin-block-start: 22px;
  }
}

.product-card-item__swatch .swatch-input__label.disabled {
  opacity: 0.6;
}
/* left+right+width all set together here is CSS's own over-constrained case — 'right' is
   silently ignored under direction:ltr (which this element always has; direction never actually
   flips here). Effective position doesn't change between LTR/RTL pages as currently written, so
   left as physical properties rather than risk changing that resolution. Flagged for a closer
   look if this ever visually looks wrong in RTL. */
.product-card-item__swatch .swatch-input__label.disabled .swatch::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 121%;
  right: 0;
  bottom: 0;
  top: -2px;
  left: 50%;
  background: var(--color-background);
  transform: rotate(45deg) translate(-50%);
}
/* The selection ring scales with the swatch instead of taking the global fixed
   -4px offset. The mockup draws it 11.48% of the diameter outside the circle;
   because the row gap is 0.4 x the diameter, that leaves a constant 28.52% of
   the diameter between the ring and its neighbour at every card width. The
   fixed offset left only 0.28px on the narrowest mobile card. Single-value
   inset is equal on all four sides, so it needs no RTL mirroring, and the ring
   is absolutely positioned, so it does not affect the row's wrap arithmetic. */
.product-card-item__swatch .swatch-input__label .swatch::before {
  border-width: 1px;
  inset: calc(var(--card-swatch-size) * -0.1148);
}
.product-card-item .product-swatch-container {
  overflow: hidden;
  display: block;
}
.product-card-item .product-swatch-container .product-swatch-wrapper {
  transition: 0.5s ease transform;
}
@media screen and (min-width: 1220px) {
  .product-card-item .product-swatch-container .product-swatch-wrapper.swatch-active {
    transform: translateY(var(--translateHight));
  }
}
.product-card-item .product-bottom-info {
  margin-top: auto;
}

.rating {
  display: inline-block;
  margin: 0;
  margin-inline-end: 4px;
  --star-size: 15px;
  --star-background: var(--color-text);
  --base-star-color: color-mix(in srgb, rgba(var(--color-text-rgba)), transparent 30%);
}
.rating-star {
  --percent: calc(var(--rating) / var(--rating-max) * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;
}
.rating-star::before {
  content: "★★★★★";
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--base-star-color) var(--percent));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.progressBar {
  margin-top: 16px;
  height: var(--bar-height, 5px);
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--progress-bar-color);
}
.progressBar__handle {
  width: 0;
  border-radius: 10px;
  height: 100%;
  display: block;
  background-color: var(--progress_bar_width_color);
  transition: width 0.3s ease-in;
  animation: progressBarLoading 0.9s ease forwards;
}

@keyframes progressBarLoading {
  0% {
    width: 0;
  }
  100% {
    width: var(--bar-width);
  }
}
.tooltip {
  position: relative;
  display: flex;
  margin-inline-start: 8px;
}
.tooltip .tooltiptext {
  visibility: hidden;
  max-width: 250px;
  width: max-content;
  background-color: #000000;
  color: #fff;
  text-align: center;
  padding: 4px;
  border-radius: var(--radius-base);
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 2;
}
@media (max-width: 767px) {
  .tooltip .tooltiptext {
    max-width: 200px;
  }
}
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* .tooltip__right / .tooltip__left position+transform pairs left as physical properties
   deliberately — the combined left+translateX math is non-obvious to reverse-engineer with
   confidence from static reading alone (Phase 4 RTL conversion pass), flagged for a dedicated
   look with live inspection rather than guessed. */
.tooltip__right .tooltiptext {
  left: 100%;
  transform: translateX(-100%);
}
@media (max-width: 767px) {
  .tooltip__right .tooltiptext {
    transform: translateX(-50%);
  }
}
.tooltip__right .tooltiptext::after {
  left: 95%;
}
@media (max-width: 767px) {
  .tooltip__right .tooltiptext::after {
    left: 48%;
    transform: translateX(-50%);
  }
}
.tooltip__left .tooltiptext {
  left: 0;
  transform: translateX(0);
}
.tooltip__left .tooltiptext::after {
  left: 8px;
}

bottom-sheet {
  position: fixed;
  width: 100%;
  max-width: var(--bottom-sheet-width);
  min-height: var(--bottom-sheet-height);
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.75, 0, 0.175, 2);
  z-index: 2;
  bottom: 0;
  inset-inline-end: 0;
  padding: 12px 12px 25px 12px;
}
bottom-sheet button svg {
  width: 26px;
  height: 26px;
}
bottom-sheet.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  background: var(--color-background);
  z-index: 102;
  transition: transform 0.6s cubic-bezier(0.75, 0, 0.175, 1);
}
bottom-sheet textarea {
  border: 1px solid color-mix(in srgb, rgba(var(--color-border-rgba)), transparent 30%);
  min-height: 186px;
  padding: 8px;
  resize: none;
  border-radius: var(--radius-base);
}
bottom-sheet textarea:focus-visible {
  outline: 1px solid rgba(var(--color-input-color-rgba));
}
bottom-sheet input {
  padding: 6px;
}
bottom-sheet input:focus-visible {
  outline: 1px solid rgba(var(--color-input-color-rgba));
}
bottom-sheet button[type=submit] {
  padding: 7px 44px;
}
@media screen and (max-width: 767px) {
  .mobile-hide-thumbnails {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  /* Quick view - full width square images with rounded corners like product card */
  .product__quick__view .drawer__body__wrapper {
    overflow-x: visible;
    padding-inline: 0;
  }

  .product__quick__view .drawer__body__wrapper > * {
    padding-inline: 24px;
  }

  .product__quick__view product-carousel {
    margin-inline-start: -24px !important;
    margin-inline-end: -48px !important;
    padding-inline: 0 !important;
  }

  .product__quick__view product-carousel .swiper {
    overflow: visible;
    padding-inline-start: 16px;
  }

  .product__quick__view product-carousel .swiper-slide {
    aspect-ratio: 0.8;
    border-radius: var(--radius-base);
    overflow: hidden;
  }

  .product__quick__view product-carousel .swiper-slide img,
  .product__quick__view product-carousel .swiper-slide video,
  .product__quick__view product-carousel .swiper-slide .media__container-size {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-base);
  }

  .product__quick__view product-carousel .sliderControl {
    padding-inline-start: 16px;
    padding-inline-end: 24px;
  }

  /* Hide navigation arrows on mobile */
  .product__quick__view .sliderPagination__prev,
  .product__quick__view .sliderPagination__next {
    display: none !important;
  }
}
/* ===== Header localization selectors ===== */
.header-localization {
  display: flex;
  align-items: center;
}

.header-localization__item {
  position: relative;
}

.header-localization__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.header-localization__btn:hover {
  border-color: var(--color-text);
}

.header-localization__flag {
  width: 22px;
  height: 16px;
  flex-shrink: 0;
  border-radius: var(--radius-base);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.header-localization__name {
  font-weight: 500;
}

.header-localization__currency {
  font-weight: 700;
  opacity: 0.85;
}

.header-localization__btn .dropdown-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.header-localization__item localization-component[open] .dropdown-arrow,
.header-localization__btn[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

.header-localization__list {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 220px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--color-background, #fff);
  border: 1px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: var(--radius-base);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 60;
  list-style: none;
  margin: 0;
}

.header-localization__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-base);
  text-decoration: none;
  color: var(--color-text);
  font-size: 13px;
  transition: background-color 0.15s ease;
}

.header-localization__link:hover {
  background: var(--color-border, rgba(0,0,0,0.06));
}

.header-localization__link[active-link] {
  background: var(--color-border, rgba(0,0,0,0.08));
  font-weight: 700;
}

.header-localization__link-name {
  flex: 1;
}

.header-localization__link-currency {
  font-weight: 700;
  opacity: 0.7;
  font-size: 12px;
}


/* ==========================================================================
   RTL fixes — Arabic & other right-to-left languages
   Comprehensive coverage across all theme CSS files
   ========================================================================== */

/* ===== 1. PAGE LEVEL ===== */
html[dir="rtl"] main {
  overflow-x: clip;
}

/* ===== 2. ARROWS & ICONS (horizontal flip only) ===== */
[dir="rtl"] .arrow-container svg,
[dir="rtl"] .arrow-wrap svg,
[dir="rtl"] .next-arrow svg,
[dir="rtl"] .prev-arrow svg,
[dir="rtl"] .sliderPagination__prev svg,
[dir="rtl"] .sliderPagination__next svg,
[dir="rtl"] .swiper-button-prev svg,
[dir="rtl"] .swiper-button-next svg,
[dir="rtl"] .btn-arrow svg,
[dir="rtl"] .view-all-arrow svg,
[dir="rtl"] a.btn-link svg,
[dir="rtl"] .caret-icon svg,
[dir="rtl"] .chevron-icon svg,
[dir="rtl"] .cart-drawer .arrow-icon svg {
  transform: scaleX(-1);
}

/* ===== 3. HEADER LOCALIZATION ===== */
/* RTL-only spacing nudge (no LTR equivalent to mirror — Arabic glyph shape needs a touch more
   room before the arrow) — kept as an explicit override, not a logical-property conversion. */
[dir="rtl"] .header-localization__btn .dropdown-arrow {
  margin-left: 0;
  margin-right: 2px;
}
/* .header-localization__list dropdown position converted to inset-inline-end in the base rule
   above — no override needed, logical property mirrors automatically. */

/* ===== 4. PRODUCT CARDS ===== */
[dir="rtl"] .product-card-item__content {
  text-align: right;
}

[dir="rtl"] .product-card-item__swatches__count {
  direction: ltr;
  unicode-bidi: isolate;
}

/* .quick-view-icon: base rule for this exact class/property could not be located (searched
   base.css and all section-*.css) — likely stale/dead CSS from a prior markup version, or the
   positioning now lives on a class this rule no longer matches. Left as-is rather than guessing;
   flagged for a follow-up dead-CSS check outside this RTL pass. */
[dir="rtl"] .quick-view-icon {
  right: auto;
  left: var(--card-icon-offset, 12px);
}

/* .product-card-item .quick-buttons-wrapper and the two price spans below converted to
   inset-inline-end / margin-inline-start in their base rules — overrides removed. */

/* ===== 5. FORM INPUTS ===== */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="search"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="number"],
[dir="rtl"] textarea {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
  text-align: right;
  direction: ltr;
}

/* ===== 6. PRICES & NUMBERS ===== */
[dir="rtl"] .price,
[dir="rtl"] .product__price,
[dir="rtl"] .price__regular {
  direction: ltr;
  text-align: right;
  unicode-bidi: embed;
}

[dir="rtl"] .header-localization__currency,
[dir="rtl"] .header-localization__link-currency {
  direction: ltr;
  display: inline-block;
}

[dir="rtl"] .pagination {
  direction: ltr;
}

[dir="rtl"] .pagination .prev,
[dir="rtl"] .pagination .next {
  transform: scaleX(-1);
}

[dir="rtl"] [data-counter] {
  unicode-bidi: embed;
}

/* ===== 7. PRODUCT DESCRIPTION ===== */
[dir="rtl"] .product__description,
[dir="rtl"] .product-single__description,
[dir="rtl"] .RTE-content,
[dir="rtl"] .rte {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .product__description *,
[dir="rtl"] .product-single__description *,
[dir="rtl"] .RTE-content *,
[dir="rtl"] .rte * {
  direction: rtl;
  text-align: right;
}

/* ===== 8. QUANTITY SELECTOR ===== */
/* margin converted to margin-inline-end in the base rule — override removed. */
[dir="rtl"] .product-quantity__selector-wrapper .product-quantity__selector input {
  direction: ltr;
  text-align: center;
}

/* ===== 9. NEWSLETTER FORM ===== */
/* margins converted to margin-inline-end in the base rules — override removed. */

/* ===== 10. ACCOUNT / LOGIN / FOOTER ===== */
[dir="rtl"] .login-form,
[dir="rtl"] .account-form,
[dir="rtl"] .footer__column,
[dir="rtl"] .footer__menu {
  text-align: right;
}

[dir="rtl"] .social-icons {
  direction: ltr;
}

/* ===== 11. BADGES ===== */
[dir="rtl"] .badge-sale,
[dir="rtl"] .product-badge {
  right: auto;
  left: 12px;
}
/* .p_badge / .product-tags-container corner variants converted to inset-inline-start/end in
   their base rules — mirrors automatically now, overrides removed. */

/* ===== 12. TOOLTIPS ===== */
/* margin converted to margin-inline-start in the base rule — override removed. */

/* ===== 13. BLOCKQUOTE & LISTS ===== */
/* blockquote padding, blockquote::before offset, ol/.RTE-content ul/ol margins all converted to
   logical properties in their base rules — overrides removed. */

/* ===== 14. SELECT DROPDOWN ===== */
/* select padding and .select-wrapper svg offset converted to logical properties — overrides
   removed. */

/* ===== 15. HAMBURGER DRAWER (open from right) ===== */
/* Position, slide-in transform (--dir multiplier), and corner radii all converted to logical
   properties in the base rule — overrides removed. */

/* ===== 16. SEARCH FORM ===== */
/* .search-form__input-clear, .search-form__back, .search-form__submit converted to
   inset-inline-start/end in their base rules — overrides removed. Note: the old override here
   grouped .search-form__submit with .search-form__back under one shared right:16px value, but
   .search-form__submit's own base value is right:20px, not 16px — that grouped override was
   already wrong for .search-form__submit before this conversion. Converting each rule from its
   own base value (as done here) fixes that latent mismatch. */
/* .search__input-wrap input / .search__submit: no matching base rule found anywhere in the
   theme's CSS (searched base.css and every section-*.css) — likely stale/dead selectors from a
   prior markup version. Left as-is rather than guessing; flagged for a follow-up dead-CSS check. */
[dir="rtl"] .search__input-wrap input {
  padding-left: 50px;
  padding-right: 20px;
}

[dir="rtl"] .search__submit {
  left: 20px;
  right: auto;
}

/* ===== 17. SLIDESHOW (section-slide-show.css) ===== */
/* Text-position classes, slideshow arrows (including the two breakpoint-mismatch bugs — the
   RTL override's breakpoints didn't match the base rule's own breakpoints, so mobile/tablet arrow
   offsets were silently wrong in RTL) and dash_arrows all converted to logical properties in
   their base rules — overrides removed. Icon-flip rule below is kept; it's a legitimate arrow
   direction fix, not a physical-property mirror. */
[dir="rtl"] .dash_arrows .slideshow__next svg,
[dir="rtl"] .dash_arrows .slideshow__prev svg {
  transform: scaleX(-1);
}

/* ===== 18. MEGA MENU COLLECTION ARROWS ===== */
/* Converted to logical properties in the base rule — note the old override's -40px also didn't
   match the base rule's actual -48px value, another latent mismatch now fixed by converting from
   the base value directly. Override removed. */

/* ===== 19. PRODUCT PAGE (section-product-highlights.css) ===== */
/* Converted to logical properties in the base rules — overrides removed.
   .cart-item__image (below, category 21) has no matching base rule anywhere in the theme's
   CSS — same stale-selector pattern as .quick-view-icon and .search__submit noted earlier.
   Left as-is. */

/* ===== 20. QUICK VIEW DRAWER (section-drawer-product-quick-view.css) ===== */
/* Position converted to inset-inline-start/end. The arrow buttons' centering transform also
   needed the --dir multiplier (transform doesn't auto-mirror with logical properties) — without
   it, the old override only flipped the anchor side and left translate(-50%/-50%) unchanged,
   which would have mis-centered both arrow buttons by a full width in RTL. Overrides removed. */

/* ===== 21. CART DRAWER (snippet-cart-drawer.css) ===== */
/* Converted to logical properties in the base rules — overrides removed. */
[dir="rtl"] .cart-item__image {
  margin-right: 0;
  margin-left: 16px;
}

/* ===== 22. MAIN CART PAGE (section-main-cart.css) ===== */
/* Converted to logical properties in the base rules — overrides removed. */

/* ===== 23. RICH TEXT (section-rich-text.css / new) ===== */
/* text-align converted to start/end in both section-rich-text.css and section-rich-text-new.css
   — overrides removed. */

/* ===== 24. VIDEO SECTION (section-video.css) ===== */
/* This entire override block is dead code: none of its 6 selectors match the theme's actual
   class name (.video__overlay__elements, plural) — each has a typo (missing/extra
   underscore or letter). Never applied in either direction. Left as-is rather than silently
   "fixing" the typo, which would introduce new visible behavior beyond this RTL-conversion pass;
   flagging for a follow-up decision on whether to fix or delete. */
[dir="rtl"] .video__section.content-middle-left .video__overlay__element,
[dir="rtl"] .video__section.content-top-left .video__overlay__elements__,
[dir="rtl"] .video__section.content-bottom-left .video__overlay__element {
  text-align: right;
}

[dir="rtl"] .video__section.content-middle-right .video__overlay__elemen,
[dir="rtl"] .video__section.content-top-right .video__overlay__elements_,
[dir="rtl"] .video__section.content-bottom-right .video__overlay__element {
  text-align: left;
}

/* ===== 25. COLLECTION BANNER (section-collection-banner.css) ===== */
/* Converted to text-align: start/end in the base rules — overrides removed. */

/* ===== 26. COLLECTION GRID (section-main-collection-product-grid.css) ===== */
/* Converted to logical properties in the base rules — overrides removed. */

/* ===== 27. FILTER DRAWER (section-drawer-filter.css) ===== */
/* Converted to logical properties in the base rules — overrides removed. */

/* ===== 28. STICKY ADD TO CART (section-sticky-add-to-cart.css) ===== */
/* Converted to logical properties (padding+border converted together as one interacting pair)
   in the base rules — overrides removed. */

/* ===== 29. FAQ MULTI-COLUMN (section-faq-multi-column.css) ===== */
/* Converted to logical properties (.faq-multi-column__tabs padding+border converted together)
   in the base rules — overrides removed. */

/* ===== 30. CONTACT FORM (section-contact-form.css) ===== */
/* Converted to logical properties in the base rules — overrides removed. */

/* ===== 31. ARTICLES / BLOG (section-articles.css) ===== */
/* Converted to logical properties in the base rules — overrides removed. */

/* ===== 32. ICON LIST ARROWS (section-icon-list.css) ===== */
/* Converted to logical properties in the base rules — overrides removed. */

/* ===== 33. FEATURE LIST (section-feature-list.css) ===== */
/* Converted to logical properties in the base rule — override removed. See also category 45
   below for the mobile !important variant, and the .accordion__item__head padding (not
   previously covered by any override) converted alongside it as an interacting-group fix. */

/* ===== 34. CART RECOMMENDATION (snippet-cart-recommendation.css) ===== */
/* .cart__recommendation__position cart-recommendation .recomme: no matching class found
   anywhere in the theme (selector looks truncated/typo'd) — same stale-selector pattern noted
   earlier. Left as-is. */
[dir="rtl"] .cart__recommendation__position cart-recommendation .recomme {
  margin-right: 0;
  margin-left: 16px;
}

/* ===== 35. ACCOUNT PAGES (section-account.css) ===== */
/* Converted to logical properties / text-align: start in the base rules — overrides removed. */

/* ===== 36. LOOK BOOK (section-look-book.css) ===== */
/* Converted to logical properties in the base rule. Also extended the same conversion to the
   sibling .lookBook__contentWrp rule in the same mobile block, which had never had an RTL
   override at all — same interacting-group as .lookBook__lookWrp, now consistent. Override
   removed. */

/* ===== 37. UTILITY CLASSES (swap left↔right only, center untouched) ===== */
/* text-align and margin utilities converted to logical properties. justify-content-left/right
   needed NO base change at all — their base rules already use justify-content: start/end, which
   is inherently direction-aware; the RTL override was mirroring a value that was never
   direction-dependent in the first place. All overrides in this category removed. */

/* ===== 38. SECTION HEADING LINK (swap margin only) ===== */
/* Converted to logical properties in the base rules — overrides removed. */

/* ===== 39. TAG ICON POSITION ===== */
/* Converted to logical properties in the base rules — overrides removed. */

/* ===== 40. ACCORDION HEAD (flip +/- icons to left side) ===== */
/* Converted to logical properties (padding split via padding-block/padding-inline) in the base
   rule — overrides removed. Section-specific .feature-list .accordion__item__head (higher
   specificity, wins over this general rule within feature-list) handled separately in category 33. */

/* ===== 41. SHOPPABLE FEED AUDIO ICON ===== */
/* Converted to logical properties in the base rule — override removed. */

/* ===== 42. D_BADGE ICON ===== */
/* Converted to logical properties in the base rule — override removed. */

/* ===== 43. HEADER DETAILS ICON ===== */
/* Converted to logical properties in the base rule — override removed. */

/* ===== 44. FEATURED COLLECTION SLIDER (section-feature-product-collection.css) ===== */
/* Converted to logical properties in the base rules — overrides removed. Per the Stage 1 audit,
   this Swiper-adjacent negative-margin mobile bleed was flagged as a possible (but structurally
   different from testimonials) double-flip risk — converting from the base value directly, as
   done here, sidesteps that risk entirely regardless. */

/* ===== 45. !important OVERRIDES for section CSS conflicts ===== */
/* .account__table-reorder / .account__table thead th: same text-align: start conversion as
   category 35, already covers these (no separate !important needed — base has none either).
   .main-product .productSubSlider .productChildSlider__price del: base rule is actually
   SYMMETRIC (margin-left: 8px AND margin-right: 8px, both sides equal) — this override, which
   zeroes the right margin and sets left to 10px !important, doesn't correspond to any real
   asymmetry and would have made RTL spacing wrong (a latent bug, likely drifted from an older
   asymmetric base value). No conversion needed; override removed as dead weight.
   .feature-list .accordion-icon: covered by category 33's conversion — override removed.
   .cart__recommendation__position cart-recommendation .set--as-side-panel: no matching class
   found anywhere in the theme — same stale-selector pattern as category 34. Left as-is. */
@media screen and (min-width: 768px) {
  [dir="rtl"] .cart__recommendation__position cart-recommendation .set--as-side-panel {
    padding: 20px 24px 20px 0 !important;
  }
}
/* ========== FINAL FIXES (Arabic + English) ========== */

/* --- FIX (Both): Remove white space at page bottom --- */
main {
  overflow-x: clip;
}


/* --- FIX (Both): Space for sticky add-to-cart --- */
.footer {
  padding-bottom: 90px !important;
}

@media screen and (max-width: 767px) {
  .footer {
    padding-bottom: 100px !important;
  }
}

/* .right-container's own bleed-side margin/padding converted to logical properties in its base
   rule (assets/base.css ~line 1650) — mirrors automatically now for lookbook and every other
   consumer, general override removed.

   RTL FIX (kept): testimonials' .right-container wraps a Swiper carousel that now handles its own
   direction at init (see assets/base.js CarouselComponent.initSlider — sets dir explicitly and
   Swiper mirrors internally). Forcing the base rule to logical properties would make this
   container auto-mirror too, double-flipping the carousel against Swiper's own correct RTL
   layout. This override uses PHYSICAL properties deliberately, to force the original LTR bleed
   side unconditionally regardless of dir — Swiper stays the single source of truth for direction
   on this carousel. Scoped to .testimonials only; unaffected by the base rule's conversion above
   since a more specific selector wins the cascade regardless of property type. */
[dir="rtl"] .testimonials .right-container {
  margin-left: auto;
  margin-right: 0;
  padding-left: 15px;
  padding-right: 0;
}

/* .product_collection .swiper mobile bleed and .swiper-tabs-wrapper already converted to logical
   properties in section-feature-product-collection.css (category 44) — overrides removed.
   .gallery .swiper / .multi-column .swiper: no matching base rule found anywhere in the theme's
   CSS — same stale-selector pattern noted elsewhere in this file. Left as-is. */
[dir="rtl"] .gallery .swiper {
  margin-right: 0;
  margin-left: -15px;
}

[dir="rtl"] .multi-column .swiper {
  margin-right: 0;
  margin-left: -15px;
}

/* .product__quick__view product-carousel mobile bleed converted to logical properties in its
   base rule — override removed. */

/* .button-rest-styles converted to text-align: start in its base rule — override removed. */

/* ==========================================================================
   TYPOGRAPHY SCALE — utility classes
   Consume the --type-heading, --type-body and --type-button custom properties
   defined in snippets/typography-scale.liquid. Self-contained block; no
   existing .h1-.h6, .fnt-, .btn or .link rule was touched.

   Take care with glob characters in this comment. An asterisk followed by a
   slash terminates the comment wherever it appears, and everything after it
   becomes part of the next rule's selector - which makes that selector invalid
   and drops the rule entirely, with no error anywhere. That is exactly what
   happened here: the block used to spell the property names with trailing
   globs, which closed the comment early and silently removed the
   .type-heading--s rule below for as long as it was shipped.
   ========================================================================== */

.type-heading--s {
  font-size: var(--type-heading-s-font-size);
  line-height: calc(var(--type-heading-s-font-size) * var(--type-heading-s-line-height));
  letter-spacing: var(--type-heading-s-letter-spacing);
}

.type-heading--m {
  font-size: var(--type-heading-m-font-size);
  line-height: calc(var(--type-heading-m-font-size) * var(--type-heading-m-line-height));
  letter-spacing: var(--type-heading-m-letter-spacing);
}

.type-heading--l {
  font-size: var(--type-heading-l-font-size);
  line-height: calc(var(--type-heading-l-font-size) * var(--type-heading-l-line-height));
  letter-spacing: var(--type-heading-l-letter-spacing);
}

.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

.type-button--s {
  font-size: var(--type-button-s-font-size);
  line-height: calc(var(--type-button-s-font-size) * var(--type-button-s-line-height));
  letter-spacing: var(--type-button-s-letter-spacing);
}

.type-button--m {
  font-size: var(--type-button-m-font-size);
  line-height: calc(var(--type-button-m-font-size) * var(--type-button-m-line-height));
  letter-spacing: var(--type-button-m-letter-spacing);
}

.type-button--l {
  font-size: var(--type-button-l-font-size);
  line-height: calc(var(--type-button-l-font-size) * var(--type-button-l-line-height));
  letter-spacing: var(--type-button-l-letter-spacing);
}

/* .product-card-item .product-price__wrapper (line ~7577) is a (0,2,0) descendant selector,
   equal-or-higher specificity than a bare .type-body--* utility class alone, so simply adding
   the class to that element would lose the tie. These combined-class rules match the SAME
   (0,2,0) specificity and, being defined after the original rule, win the source-order tie —
   letting price.liquid's optional container_class param opt individual callers into the new
   sizing without touching the original rule (still governs every caller that doesn't pass it). */
.product-price__wrapper.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.product-price__wrapper.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.product-price__wrapper.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* ==========================================================================
   HEADER TYPOGRAPHY SCALE — cascade neutralizations
   Each original rule below out-specifies a bare .type-* utility class (0,1,0), so adding the
   utility alone would silently lose. These combined-class rules match or exceed the original
   specificity and are defined after it, so they win. No original rule is modified — each still
   governs any element that has not opted in via a .type-* class.
   The cart count badge (.header__icon .header__cart__icon-count) is deliberately NOT listed:
   it is excluded from the typography scale and keeps its fixed 10px in an 18px circle.
   ========================================================================== */

/* Trap 1 — .header__nav-list > .nav-item (0,2,0) */
.header__nav-list > .nav-item.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}
.header__nav-list > .nav-item.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}
.header__nav-list > .nav-item.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Trap 2 — .dropdown-menu__list--child-list a (0,1,1)
   Trap 3 — .mega-menu .mega-menu-dropdown .dropdown-menu__list--child-list a (0,3,1)
   Trap 5 — .mega-menu__list > .mega-menu__item > a (0,2,1)
   All three are beaten by scoping to the mega-menu ancestor plus the opted-in class. */
.mega-menu .mega-menu-dropdown .dropdown-menu__list--child-list a.type-body--s,
.mega-menu .mega-menu-dropdown .mega-menu__list > .mega-menu__item > a.type-body--s,
.dropdown-menu__list--child-list a.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}
.mega-menu .mega-menu-dropdown .dropdown-menu__list--child-list a.type-body--m,
.mega-menu .mega-menu-dropdown .mega-menu__list > .mega-menu__item > a.type-body--m,
.dropdown-menu__list--child-list a.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}
.mega-menu .mega-menu-dropdown .dropdown-menu__list--child-list a.type-body--l,
.mega-menu .mega-menu-dropdown .mega-menu__list > .mega-menu__item > a.type-body--l,
.dropdown-menu__list--child-list a.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Trap 4 — .mega-menu__list--product .link-head (0,2,0) */
.mega-menu__list--product .link-head.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}
.mega-menu__list--product .link-head.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}
.mega-menu__list--product .link-head.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Trap 6 — the four <=767px drawer rules that cancel the mobile step-down.
   Those rules are (0,1,0) and (0,2,0) inside a max-width media query, so the override must
   also sit inside an equivalent query to beat them at mobile widths. */
@media screen and (max-width: 767px) {
  .hamberger-accordion__head.type-body--s,
  .hamberger-accordion__link.type-body--s,
  .hamberger-accordion__link-black.type-body--s,
    font-size: var(--type-body-s-font-size);
    line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
    letter-spacing: var(--type-body-s-letter-spacing);
  }
  .hamberger-accordion__head.type-body--m,
  .hamberger-accordion__link.type-body--m,
  .hamberger-accordion__link-black.type-body--m,
    font-size: var(--type-body-m-font-size);
    line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
    letter-spacing: var(--type-body-m-letter-spacing);
  }
  .hamberger-accordion__head.type-body--l,
  .hamberger-accordion__link.type-body--l,
  .hamberger-accordion__link-black.type-body--l,
    font-size: var(--type-body-l-font-size);
    line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
    letter-spacing: var(--type-body-l-letter-spacing);
  }
}

/* Trap 9 — localization source-order collision: .header-localization__btn (13px) and
   .header-localization__link (13px) sit later in the stylesheet than the 15.4px
   .localization-dropdown__* rules and win. Both are (0,1,0); these are (0,2,0). */
.localization-dropdown__btn.header-localization__btn.type-body--s,
.localization-dropdown__item-link.header-localization__link.type-body--s,
.localization-dropdown__btn.type-body--s,
.localization-dropdown__item-link.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}
.localization-dropdown__btn.header-localization__btn.type-body--m,
.localization-dropdown__item-link.header-localization__link.type-body--m,
.localization-dropdown__btn.type-body--m,
.localization-dropdown__item-link.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}
.localization-dropdown__btn.header-localization__btn.type-body--l,
.localization-dropdown__item-link.header-localization__link.type-body--l,
.localization-dropdown__btn.type-body--l,
.localization-dropdown__item-link.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Mega-menu panel headings: .mega-menu .mega-menu-dropdown .mega-menu__heading (0,3,0) sized
   the products panel heading at 18px. Scoped override so the heading control governs it. */
.mega-menu .mega-menu-dropdown .mega-menu__heading.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}
.mega-menu .mega-menu-dropdown .mega-menu__heading.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}
.mega-menu .mega-menu-dropdown .mega-menu__heading.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Mega-menu card titles: .mega-menu-collections .bundle__body (0,2,0) and .bundle__link
   (0,1,0) sized the collection/promotion card titles. */
.mega-menu-collections .bundle__body.type-body--s,
.bundle__link.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}
.mega-menu-collections .bundle__body.type-body--m,
.bundle__link.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}
.mega-menu-collections .bundle__body.type-body--l,
.bundle__link.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Brand logo text: .header .logo-text (0,2,0) sets a font-size inside a max-width:767px
   query, so a bare utility class (0,1,0) would lose on phones. These are (0,3,0) inside an
   equivalent query. This element only renders when no logo image is set. */
@media screen and (max-width: 767px) {
  .header .logo-text.type-body--s {
    font-size: var(--type-body-s-font-size);
    line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
    letter-spacing: var(--type-body-s-letter-spacing);
  }
  .header .logo-text.type-body--m {
    font-size: var(--type-body-m-font-size);
    line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
    letter-spacing: var(--type-body-m-letter-spacing);
  }
  .header .logo-text.type-body--l {
    font-size: var(--type-body-l-font-size);
    line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
    letter-spacing: var(--type-body-l-letter-spacing);
  }
}

/* ==========================================================================
   END HEADER TYPOGRAPHY SCALE
   ========================================================================== */

/* ==========================================================================
   END TYPOGRAPHY SCALE
   ========================================================================== */


/* ==========================================================================
   HEADER FONT WEIGHT — uniform middle weight
   Roc Grotesk (Latin, Adobe kit uhq6yxp) ships exactly three weights: 300 Light,
   500 Medium, 600 Bold. Cairo (Arabic, Google Fonts) loads 200-900, so 500 is a
   real weight in both faces — no faux-bold is synthesised in either direction.
   500 is the middle weight and is applied uniformly to all header text.
   !important is required here only because two of the rules being overridden
   (.fnt-body-weight-bold and .mega-menu-collections__tab) are themselves
   !important. No original rule is modified; these are additive overrides.
   The cart count badge is excluded from this block, as from the whole session.
   ========================================================================== */
.header__nav-list > .nav-item,
.logo-text,
.menu-main-link,
.link-head,
.mega-menu__heading,
.mega-menu-collections__tab,
.bundle__body,
.bundle__link,
.section-viewall-text,
.header__iconGroup .icon-label,
.localization-dropdown__btn,
.localization-dropdown__item-link,
.header-localization__btn,
.header-localization__link,
.header-localization__name,
.header-localization__currency,
.header-localization__link-name,
.header-localization__link-currency,
.header-localization__link[active-link],
.mega-menu__item .link-head,
.mega-menu__list--product [menu-item].menu-main-link,
.mega-menu__list--product [menu-item] .menu-main-link {
  font-weight: 500 !important;
}

/* ==========================================================================
   END HEADER FONT WEIGHT
   ========================================================================== */

/* ==========================================================================
   SITE ELEMENTS — breadcrumbs and pagination
   Both appear on many pages with no owning section, so they read theme-level
   settings via custom properties rather than a parameter threaded through
   every caller. Declared here, after the rules they supersede, and at matching
   specificity.
   Take care with glob characters in this comment: an asterisk followed by a
   slash ends the comment early and silently swallows the next rule.
   ========================================================================== */

/* Supersedes the rule near line 2964. Targets .breadcrumbs__item a rather than
   .breadcrumbs__link deliberately: that class sits only on the current-page
   crumb, has no CSS rule anywhere in the theme, and using it would leave the
   four parent crumbs - emitted classless by the link_to filter - at a
   different size on the same line of text. */
.breadcrumbs__item a,
.breadcrumbs__item span {
  font-size: var(--breadcrumb-font-size);
  line-height: calc(var(--breadcrumb-font-size) * var(--breadcrumb-line-height));
  letter-spacing: var(--breadcrumb-letter-spacing);
}

/* Supersedes the rule near line 7439, which set font-size only. The visible
   page numbers are classless spans that inherit from this list item, and until
   now took their line-height and letter-spacing from the body default, so all
   three properties are supplied here rather than one being overridden. */
.pagination__contiainer .pagination li {
  font-size: var(--pagination-font-size);
  line-height: calc(var(--pagination-font-size) * var(--pagination-line-height));
  letter-spacing: var(--pagination-letter-spacing);
}

/* ==========================================================================
   PRODUCT PAGE - TYPOGRAPHY SCALE ADOPTION (Phase 2)
   Rules needed because a stylesheet linked from inside a section loads after
   base.css and therefore wins every equal-specificity tie. Anything below that
   restates a size does so at a specificity the later sheet cannot match.

   Take care with glob characters in this comment: an asterisk followed by a
   slash ends the comment wherever it appears, and everything after it becomes
   part of the next selector, which silently drops that rule.
   ========================================================================== */

/* Product title. The h2 class was removed because it carries !important, but it
   also supplied the heading's margins, which the h1-h6 group rule does not.
   Restated here so the box is unchanged: 24px below, 16px under 991px. */
.main-product__heading {
  margin-top: 0;
  margin-bottom: 24px;
}

/* Product title and price on one row, from the mockups. Baselines are aligned
   rather than box centres: with a subtitle present the title block is two lines
   tall, and centring would drop the price between them instead of onto the
   title's own line. On desktop the two are set at the same size, so baseline,
   centre and top all coincide there anyway.
   flex-direction row follows the inline axis, so the title stays at the
   inline-start and the price at the inline-end and the row mirrors in Arabic
   with no direction-specific rule. Nothing physical is used. */
.product-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--product-title-row-gap, 16px);
}
.product-title-row .main-product__price__wrapper {
  white-space: nowrap;
}
/* The heading's bottom margin separates it from whatever follows underneath.
   Nothing follows underneath here - the price is beside it - so it only pushes
   the row taller. Scoped to the row, so the Title block used on its own keeps
   its normal spacing. */
.product-title-row .main-product__heading {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .product-title-row--stack-mobile {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The subtitle sits on the line directly under the title - the mockup leaves no
   margin between them, so the heading drops its own bottom margin whenever one
   is present. The modifier is applied in Liquid rather than with :has, so the
   no-subtitle case is bit-for-bit what it was. The block wrapper still supplies
   the merchant's bottom spacing below the pair. */
.main-product__heading--has-subtitle {
  margin-bottom: 0;
}
.main-product__subtitle {
  margin: 0;
}

@media (max-width: 991px) {
  .main-product__heading {
    margin-bottom: 16px;
  }
}

/* Current price. section-product-highlights.css:38 owns
   ".main-product__price__wrapper .price" at (0,2,0) and loads later, so the tier
   class rides on the container and these three-class rules at (0,3,0) outrank
   it regardless of source order. */
.main-product__price__wrapper.type-body--s .price {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.main-product__price__wrapper.type-body--m .price {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.main-product__price__wrapper.type-body--l .price {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Variant option name label. base.css:3839 owns
   ".product-variant__head .select__label" at (0,2,0); these are (0,3,0) so they
   also outrank the quick-view sheet's (0,2,0) override, which loads later. */
.product-variant__head .select__label.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.product-variant__head .select__label.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.product-variant__head .select__label.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Selected option value. base.css:3835 pins line-height to 22.88px on 15.4px
   text at (0,2,1). These are (0,3,1), so the tier now supplies a proportional
   line-height and the mismatch goes away. */
.product-variant__head span[product-variant-option-value].type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.product-variant__head span[product-variant-option-value].type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.product-variant__head span[product-variant-option-value].type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Radio pill label. The quick-view sheet sizes it at (0,1,3); (0,2,1) wins on
   class count, so one rule covers the product page and the drawer alike. */
.product-variant__pill__item label.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.product-variant__pill__item label.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.product-variant__pill__item label.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Variant dropdown. The select element rule is (0,0,1) here and the quick-view
   sheet uses (0,1,2); (0,2,0) beats both. */
.select.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.select.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.select.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Quantity label. base.css:3477 owns it at (0,1,1); (0,2,1) appearing later in
   this file wins on class count. */
.product-quantity__selector-wrapper label.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.product-quantity__selector-wrapper label.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.product-quantity__selector-wrapper label.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Quantity input. font-size and letter-spacing only - line-height 0 from
   base.css:3505 is load-bearing for the 151px stepper and must survive, so this
   is a deliberate departure from the three-property pattern used everywhere
   else. */
.product-quantity__selector input.type-body--s {
  font-size: var(--type-body-s-font-size);
  letter-spacing: var(--type-body-s-letter-spacing);
}

.product-quantity__selector input.type-body--m {
  font-size: var(--type-body-m-font-size);
  letter-spacing: var(--type-body-m-letter-spacing);
}

.product-quantity__selector input.type-body--l {
  font-size: var(--type-body-l-font-size);
  letter-spacing: var(--type-body-l-letter-spacing);
}


/* Rich-text bodies - product description and collapsible text. The class sits
   on the wrapper because the content is merchant HTML, so these rules have to
   reach the paragraphs themselves: the bare p element rule at base.css:1129
   out-ranks plain inheritance, and .accordion__item__body p at base.css:1943
   sits at (0,1,1). Both lose to (0,2,1). */
.RTE-content.type-body--s,
.RTE-content.type-body--s p,
.RTE-content.type-body--s li,
.accordion__item__body .RTE-content.type-body--s p,
.accordion__item__body .RTE-content.type-body--s li {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.RTE-content.type-body--m,
.RTE-content.type-body--m p,
.RTE-content.type-body--m li,
.accordion__item__body .RTE-content.type-body--m p,
.accordion__item__body .RTE-content.type-body--m li {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.RTE-content.type-body--l,
.RTE-content.type-body--l p,
.RTE-content.type-body--l li,
.accordion__item__body .RTE-content.type-body--l p,
.accordion__item__body .RTE-content.type-body--l li {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Collapsible-text and description summary headings. The heading tag sits
   inside .accordion__item__head, which section-product-highlights.css sizes at
   (0,2,2) and which the heading would otherwise inherit. A class on the tag
   itself is enough for the tag, but the head also carries its own size for the
   bare text case, so the tier is restated at (0,3,2) to cover both. */
.main-product__details accordion-tab details .accordion__item__head .type-heading--s {
  font-size: var(--type-heading-s-font-size);
  line-height: calc(var(--type-heading-s-font-size) * var(--type-heading-s-line-height));
  letter-spacing: var(--type-heading-s-letter-spacing);
}

.main-product__details accordion-tab details .accordion__item__head .type-heading--m {
  font-size: var(--type-heading-m-font-size);
  line-height: calc(var(--type-heading-m-font-size) * var(--type-heading-m-line-height));
  letter-spacing: var(--type-heading-m-letter-spacing);
}

.main-product__details accordion-tab details .accordion__item__head .type-heading--l {
  font-size: var(--type-heading-l-font-size);
  line-height: calc(var(--type-heading-l-font-size) * var(--type-heading-l-line-height));
  letter-spacing: var(--type-heading-l-letter-spacing);
}


/* Sticky bar add-to-cart. section-sticky-add-to-cart.css:256 sizes the drawer
   button through its toggle-element attribute at (0,2,0) and loads after this
   file, so the tier is restated at (0,3,0). The class sits on the button
   element itself, never on .btn--text, because the sticky script replaces the
   button's text content outright when a variant goes unavailable. */
.sticky-add-to-cart-drawer [toggle-element="cart-drawer"].type-button--s,
.sticky-add-to-cart-drawer [toggle-element="options-drawer"].type-button--s {
  font-size: var(--type-button-s-font-size);
  line-height: calc(var(--type-button-s-font-size) * var(--type-button-s-line-height));
  letter-spacing: var(--type-button-s-letter-spacing);
}

.sticky-add-to-cart-drawer [toggle-element="cart-drawer"].type-button--m,
.sticky-add-to-cart-drawer [toggle-element="options-drawer"].type-button--m {
  font-size: var(--type-button-m-font-size);
  line-height: calc(var(--type-button-m-font-size) * var(--type-button-m-line-height));
  letter-spacing: var(--type-button-m-letter-spacing);
}

.sticky-add-to-cart-drawer [toggle-element="cart-drawer"].type-button--l,
.sticky-add-to-cart-drawer [toggle-element="options-drawer"].type-button--l {
  font-size: var(--type-button-l-font-size);
  line-height: calc(var(--type-button-l-font-size) * var(--type-button-l-line-height));
  letter-spacing: var(--type-button-l-letter-spacing);
}


/* Pickup drawer heading. The drawer is rendered from the theme layout on every
   page, so this rule lives here rather than in the pickup stylesheet, which
   only loads when the block is present. The h2 class was removed because it
   carries !important; .drawer__head already supplies family, colour, weight
   and margins, so only size is restated. The fallbacks reproduce h2 exactly,
   including its 0.25rem step under 991px. */
.pickup-drawer__head {
  font-size: var(--pickup-drawer-heading-font-size);
  line-height: var(--pickup-drawer-heading-line-height);
  letter-spacing: var(--pickup-drawer-heading-letter-spacing);
}

@media (max-width: 991px) {
  .pickup-drawer__head {
    font-size: var(--pickup-drawer-heading-font-size);
    line-height: var(--pickup-drawer-heading-line-height);
  }
}

/* Badge label. section-product-highlights.css:1233 owns
   ".product-badges .product-badge-text" at (0,2,0) and loads later, so this is
   restated at (0,3,0). */
.product-badges .product-badge-text.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.product-badges .product-badge-text.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.product-badges .product-badge-text.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Countdown timer. base.css:4654 sizes the digits at (0,2,0) with three
   breakpoint steps, and section-product-highlights.css sizes the unit labels
   and the dividers at (0,2,0) from a later sheet. All three are restated at
   (0,3,0), which also retires the breakpoint steps in favour of the scale's
   own desktop and mobile values. */
.timer_container .timer-box__timer.type-heading--s {
  font-size: var(--type-heading-s-font-size);
  line-height: calc(var(--type-heading-s-font-size) * var(--type-heading-s-line-height));
  letter-spacing: var(--type-heading-s-letter-spacing);
}

.timer_container .timer-box__timer.type-heading--m {
  font-size: var(--type-heading-m-font-size);
  line-height: calc(var(--type-heading-m-font-size) * var(--type-heading-m-line-height));
  letter-spacing: var(--type-heading-m-letter-spacing);
}

.timer_container .timer-box__timer.type-heading--l {
  font-size: var(--type-heading-l-font-size);
  line-height: calc(var(--type-heading-l-font-size) * var(--type-heading-l-line-height));
  letter-spacing: var(--type-heading-l-letter-spacing);
}

.countdown .timer-box.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.countdown .timer-box.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.countdown .timer-box.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

.countdown .timer-box__divider.type-heading--s {
  font-size: var(--type-heading-s-font-size);
  line-height: calc(var(--type-heading-s-font-size) * var(--type-heading-s-line-height));
}

.countdown .timer-box__divider.type-heading--m {
  font-size: var(--type-heading-m-font-size);
  line-height: calc(var(--type-heading-m-font-size) * var(--type-heading-m-line-height));
}

.countdown .timer-box__divider.type-heading--l {
  font-size: var(--type-heading-l-font-size);
  line-height: calc(var(--type-heading-l-font-size) * var(--type-heading-l-line-height));
}


/* ==========================================================================
   COLLECTION AND SEARCH - TYPOGRAPHY SCALE ADOPTION (Phase 3)
   Both section stylesheets load after this file, so anything they size wins
   every equal-specificity tie. Each rule below is raised just far enough to
   outrank the specific declaration it competes with, and no further.

   Take care with glob characters in this comment: an asterisk followed by a
   slash ends the comment wherever it appears, and everything after it becomes
   part of the next selector, which silently drops that rule.
   ========================================================================== */

/* Filter button label. section-main-collection-product-grid.css:73 sizes
   .collectionList__filter-btn at (0,1,0) from a later sheet, so a bare utility
   class on the inner paragraph would tie and lose. (0,2,0) settles it. */
.collectionList__filter-btn .type-button--s {
  font-size: var(--type-button-s-font-size);
  line-height: calc(var(--type-button-s-font-size) * var(--type-button-s-line-height));
  letter-spacing: var(--type-button-s-letter-spacing);
}

.collectionList__filter-btn .type-button--m {
  font-size: var(--type-button-m-font-size);
  line-height: calc(var(--type-button-m-font-size) * var(--type-button-m-line-height));
  letter-spacing: var(--type-button-m-letter-spacing);
}

.collectionList__filter-btn .type-button--l {
  font-size: var(--type-button-l-font-size);
  line-height: calc(var(--type-button-l-font-size) * var(--type-button-l-line-height));
  letter-spacing: var(--type-button-l-letter-spacing);
}

/* Price range inputs. section-drawer-filter.css:176 owns
   ".priceFilter--input .field__input" at (0,2,0) and loads later, so these are
   (0,3,0). */
.priceFilter--input .field__input.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.priceFilter--input .field__input.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.priceFilter--input .field__input.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Search field. section-search.css:15 sizes .search-form__input at (0,1,0)
   from a later sheet; (0,2,0) wins on class count. */
.search-form__input.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.search-form__input.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.search-form__input.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}


/* Collection banner title and the all-collections heading. Both dropped an
   h1-h6 class that carried !important, and those classes also supplied margins
   which the h1-h6 group rule does not. Restated so the boxes are unchanged:
   24px below, 16px under 991px. The collection card title needs nothing here,
   because m-0 already zeroes its margins. */
.collectionBanner__heading,
.listCollections__heading {
  margin-top: 0;
  margin-bottom: 24px;
}

@media (max-width: 991px) {
  .collectionBanner__heading,
  .listCollections__heading {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   CART PAGE - TYPOGRAPHY SCALE ADOPTION (Phase 4)
   section-main-cart.css is linked from inside the section, so it loads after
   this file and wins every equal-specificity tie. Each rule below is raised
   only as far as the declaration it competes with requires.

   Take care with glob characters in this comment: an asterisk followed by a
   slash ends the comment wherever it appears, and everything after it becomes
   part of the next selector, which silently drops that rule.
   ========================================================================== */

/* Page heading. The h2 class was removed because it carries !important, but it
   also supplied margins that the h1-h6 group rule does not - margin-top 0 and
   margin-bottom 24px, tightening to 16px under 991px. Restated so the box is
   unchanged. */
.cart-page__heading {
  margin-top: 0;
  margin-bottom: 24px;
}

@media (max-width: 991px) {
  .cart-page__heading {
    margin-bottom: 16px;
  }
}
/* Table header cells. section-main-cart.css:60 owns ".cart-table__wrp .thead
   .td" at (0,3,0) from a later sheet - the deepest competitor in this phase -
   so these are (0,4,0). */
.cart-table__wrp .thead .td.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.cart-table__wrp .thead .td.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.cart-table__wrp .thead .td.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Variant options. section-main-cart.css sizes these at (0,2,0) and steps them
   down again under 767px, so (0,3,0) is needed to beat both. The tier carries
   its own mobile value, which is what replaces that step. */
.cart-table__wrp .cartItem__options.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.cart-table__wrp .cartItem__options.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.cart-table__wrp .cartItem__options.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Quantity input. base.css already sizes ".product-quantity__selector input"
   with a tier at (0,2,1), but the cart page adds its own (0,3,1) rule, so this
   needs (0,4,1). font-size and letter-spacing only: the zero line-height the
   stepper depends on stays untouched, as on the product page. */
.cart-table .product-quantity__selector-wrapper .product-quantity__selector input.type-body--s {
  font-size: var(--type-body-s-font-size);
  letter-spacing: var(--type-body-s-letter-spacing);
}

.cart-table .product-quantity__selector-wrapper .product-quantity__selector input.type-body--m {
  font-size: var(--type-body-m-font-size);
  letter-spacing: var(--type-body-m-letter-spacing);
}

.cart-table .product-quantity__selector-wrapper .product-quantity__selector input.type-body--l {
  font-size: var(--type-body-l-font-size);
  letter-spacing: var(--type-body-l-letter-spacing);
}


/* Subtotal label and value. section-main-cart.css:410 and :416 own these at
   (0,2,0) from a later sheet, so (0,3,0) settles it. */
.cart-table__checkoutPrices .title.type-body--s,
.cart-table__checkoutPrices .price.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
  letter-spacing: var(--type-body-s-letter-spacing);
}

.cart-table__checkoutPrices .title.type-body--m,
.cart-table__checkoutPrices .price.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
  letter-spacing: var(--type-body-m-letter-spacing);
}

.cart-table__checkoutPrices .title.type-body--l,
.cart-table__checkoutPrices .price.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
  letter-spacing: var(--type-body-l-letter-spacing);
}

/* Shipping rate rows. The component builds these with createElement and
   hard-coded class names, so no class can be put on them. The page sets three
   properties on its own section wrapper and these rules read them, falling
   back to the value base.css:4871 already applied.

   Scoped to .cart-table so the cart drawer is untouched: the drawer has its
   own equivalent in snippet-cart-drawer.css, scoped to the drawer, and that
   rule is deliberately left alone. */
.cart-table .estimate-delivery .shipping-rates__list-container .shipping-rates__list-header,
.cart-table .estimate-delivery .shipping-rates__list-container .shipping-rates__name,
.cart-table .estimate-delivery .shipping-rates__list-container .shipping-rates__price,
.cart-table .estimate-delivery .shipping-rates__list-container .shipping-rates__delivery-date,
.cart-table .estimate-delivery .shipping-rates__error .shipping-rates__name,
.cart-table .estimate-delivery .shipping-rates__error .shipping-rates__price,
.cart-table .estimate-delivery .shipping-rates__error .shipping-rates__delivery-date {
  font-size: var(--cart-page-rates-font-size);
  line-height: var(--cart-page-rates-line-height);
  letter-spacing: var(--cart-page-rates-letter-spacing);
}


/* ---------------------------------------------------------------------------
   Phase 6 - blog and article typography.

   Three cascade rules. Every other Phase 6 control is delivered by a plain
   utility class that already wins on its own, so only the three elements whose
   existing rule outranks a single class need help here.

   Each selector is raised exactly as far as its own competitor requires and no
   further. Only font-size and line-height are restated: none of the three
   competitors sets letter-spacing, so the utility's own letter-spacing already
   applies unopposed, and font-family is deliberately left to the existing rules.
   --------------------------------------------------------------------------- */

/* Blog tab links. Competitor: .blogs__tabsList a in section-blogs.css (0,1,1),
   which also loads after this file, so matching its specificity would not be
   enough - the selector has to outrank it. */
.blogs__tabsList a.type-button--s {
  font-size: var(--type-button-s-font-size);
  line-height: calc(var(--type-button-s-font-size) * var(--type-button-s-line-height));
}
.blogs__tabsList a.type-button--m {
  font-size: var(--type-button-m-font-size);
  line-height: calc(var(--type-button-m-font-size) * var(--type-button-m-line-height));
}
.blogs__tabsList a.type-button--l {
  font-size: var(--type-button-l-font-size);
  line-height: calc(var(--type-button-l-font-size) * var(--type-button-l-line-height));
}

/* Card excerpts on the blog page. Competitor: .blogs .p-text in
   section-blogs.css (0,2,0). Outside a .blogs container the excerpt's plain
   utility class is unopposed and this rule simply does not apply. */
.blogs .p-text.type-body--s {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
}
.blogs .p-text.type-body--m {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
}
.blogs .p-text.type-body--l {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
}

/* Article body. The RTE emits bare p, li and span elements, so the class sits
   on the container and the size has to be pushed down onto the children.
   Competitor: .articles__content p, li, span in section-articles.css (0,1,1). */
.articles__content.type-body--s p,
.articles__content.type-body--s li,
.articles__content.type-body--s span {
  font-size: var(--type-body-s-font-size);
  line-height: calc(var(--type-body-s-font-size) * var(--type-body-s-line-height));
}
.articles__content.type-body--m p,
.articles__content.type-body--m li,
.articles__content.type-body--m span {
  font-size: var(--type-body-m-font-size);
  line-height: calc(var(--type-body-m-font-size) * var(--type-body-m-line-height));
}
.articles__content.type-body--l p,
.articles__content.type-body--l li,
.articles__content.type-body--l span {
  font-size: var(--type-body-l-font-size);
  line-height: calc(var(--type-body-l-font-size) * var(--type-body-l-line-height));
}