/** Shopify CDN: Minification failed

Line 6544:19 Expected identifier but found whitespace
Line 6544:20 Unexpected "3.6rem"

**/
/*
Author: The4 Studio
NOTE: most of the CSS variables used are defined in the "css-variables.liquid" snippet file
Media queries:
md: 768px
lg: 1024px
xl: 1150px
*/
/* -------------------------------------------
[Table of contents]
1. RESET
2. LAYER
3. LAYOUT
  3.1. Base
  3.2. Container
  3.3. Helper classes
    3.3.1. Display
    3.3.2. Spacing
    3.3.3. Text, justify, align, place,...
    3.3.4. Grid
    3.3.5. Reveal In View
    3.3.6. Color Schemes
    3.3.7. Ratio and Object
    3.3.8. Dialog
    3.3.9. Slider
    3.3.10. Section header
    3.3.11. Max height
  3.4. RTE (Richtext editor)
  3.5. Media overlay Content
  3.6. Buttons
  3.7. Input, textarea, select, checkbox, radio
  3.8. Pagination
  3.9. Socials
  3.10. Alert
4. THEME BLOCKS
5. SECTIONS
  5.1. Header
  5.2. Footer
  5.3. Slideshow
  5.4. Media Collage
  5.5. Text with column icon
  5.6. Gallery
  5.7. Marquee
  5.8. Media with text
  5.9. Testimonials
  5.10. Testimonials with image
  5.11. Scrolling media with text
  5.12. Image with text overlay
  5.13. Banner with text overlay
  5.14. Media cards
  5.14. Image hotspots
  5.14b. Hotspots with drawer
  5.15. Products story
  5.16. Scrolling hero media grid
  5.16. Blog posts
  5.17. Media lookbook
  5.18. Featured collections
  5.18a. Hero collections
  5.18b. Custom HTML
  5.18c. Contact form
  5.19. Products with countdown
  5.20. Feature stats showcase
  5.21. Before/after image
  5.22. Products compare
  5.23. Hero stack scroll
  5.24. FAQs
  5.25. Shop the look
  5.26. Shrink on scroll
  5.27.
  5.28.
  5.29. Age verification
  5.30. Newsletter popup
6. TEMPLATES
  6.1. Featured collections list
  6.2. Collection
  6.3. Product
------------------------------------------- */
/* ==========================================================================
  1. RESET
  https://www.joshwcomeau.com/css/custom-css-reset/
========================================================================== */
*,
::after, ::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--color-line-border);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
  -webkit-tap-highlight-color: transparent;
}
b,
strong {
  font-weight: bolder;
}
:where(code, kbd, pre, samp) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
:where(sub, sup) {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
:where(button, input, optgroup, select, textarea) {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  background-color: inherit;
  margin: 0;
  padding: 0;
}
:where(button, select) {
  text-transform: none;
}
:where([type="button"], [type="reset"], [type="submit"], button) {
  -webkit-appearance: button;
  appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
progress {
  vertical-align: baseline;
}
:where(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  list-style-type: none;
  &::-webkit-details-marker {
    display: none;
  }
}
:where(blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre, fieldset) {
  margin: 0;
}
:where(legend, fieldset) {
  padding: 0;
}
:where(menu, ol, ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
input::placeholder, textarea::placeholder{
  opacity: 1;
  color: color-mix(in srgb, var(--color-input-text, var(--color-foreground)), transparent 35%);
}
:where([role="button"], button) {
  cursor: pointer;
}
:disabled,
:disabled + label {
  cursor: default;
}
:where(button, label, summary, [role=button], [type=checkbox], [type=radio]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

:where(audio, canvas, embed, iframe, img, object, svg, video) {
  display: block;
  max-width: 100%;
}
img, video {
  height: auto;
}
p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}
:where(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  text-wrap: balance;
  font-size: inherit;
  font-weight: inherit;
}
picture source {
  display: contents !important;
}
[hidden]:not([open], [closing]) {
  display: none !important;
}
/* By default Firefox show the alt tag of image while image is loading, which is often not desirable */
img:-moz-loading {
  visibility: hidden;
}
svg foreignObject {
  display: none;
}
/* ==========================================================================
  2. LAYER
  ========================================================================== */
/* Define cascade layer order by breakpoint */
@media (max-width: 767px) {
  @layer themeh.styles.reset, themeh.styles.base, themeh.styles.tablet, themeh.styles.mobile;
}

@media (max-width: 1149.9px) {
  @layer themeh.styles.mobile, themeh.styles.reset, themeh.styles.base, themeh.styles.tablet;
}

@media (min-width: 1150px) {
  @layer themeh.styles.tablet, themeh.styles.mobile, themeh.styles.reset, themeh.styles.base;
}

/* sub-layers */
@layer themeh.styles.base.default,
themeh.styles.base.override,
themeh.styles.tablet.default,
themeh.styles.tablet.override,
themeh.styles.mobile.default,
themeh.styles.mobile.override;

/* ==========================================================================
  3. LAYOUT
========================================================================== */
/*================ 3.1. Base ================*/
html {
  font-size: 62.5%;
  height: 100%;
  --hdt-fill-height: 100vh;
  @supports (height: 100svh) {
    --hdt-fill-height: 100svh;
  }
}
/* Scrollbar */
@media (min-width: 1025px) and (pointer: fine) {
  .hdt-scrollbar {
    --y: 5px;
    --color-scrollbar: 0 0 0;
    --color-scrollbar-track: rgb(var(--color-scrollbar) / 0);
    --color-scrollbar-thumb: color-mix(in srgb, var(--color-foreground), transparent 80%);
  }
  .hdt-scroll-area {
    --y: 8px;
    --color-scrollbar-track: var(--color-background);
    --color-scrollbar-thumb: color-mix(in srgb, var(--color-foreground), transparent 60%);
  }
  .hdt-scrollbar-light {
    --color-scrollbar: 255 255 255;
  }
  .hdt-scrollbar::-webkit-scrollbar {
    height: 5px; /* height of horizontal scrollbar */
    width: var(--y);  /* width of vertical scrollbar */
  }
  .hdt-scrollbar::-webkit-scrollbar-track {
    background-color: var(--color-scrollbar-track);
  }
  .hdt-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar-thumb);
    border-radius: 8px;
  }
  @-moz-document url-prefix() {
    .hdt-scrollbar {
      --color-scrollbar-thumb: color-mix(in srgb, var(--color-foreground), transparent 60%);
    }
    .hdt-scroll-area {
      --color-scrollbar-track: var(--color-background);
    }
    .hdt-scrollbar {
      scrollbar-width: thin;
      scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
    }
  }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  letter-spacing: var(--font-body-spacing);
  font: var(--font-body-style) var(--font-body-weight) var(--text-base) / var(--font-body-line-height) var(--font-body-family);
  @supports (height: 100svh) {
    min-height: 100svh;
  }
}
#MainContent {
  flex: 1;
  scroll-padding-top: calc(var(--header-height, 0px) + 10px);
}
body:has(header hdt-sticky-header[sticky-type="always"]){
  --height-header-fixed: var(--header-height, 0px)
}
body:has(header hdt-sticky-header[sticky-type="always"].hdt-header--boxed){
  --offset-header-fixed: 2.4rem;
}
:where(.no-js,.no-js-inline) {
  display: none !important;
}

@media (scripting: none) {
  .no-js-hidden {
    display: none !important;
  }
  .no-js {
    display: block !important;
  }
  .no-js-inline {
    display: inline-block !important;
  }
}
:where(hdt-card-product, hdt-slider, hdt-slider-media, hdt-slideshow, hdt-gallery-modal, hdt-marquee, hdt-before-after, hdt-slider-reveal, hdt-max-height, hdt-resize, hdt-block-required, hdt-reval-items, hdt-video, hdt-video-hover, hdt-model, hdt-scroll-hint, hdt-shirk-scroll, hdt-testimonial-image, hdt-hero-scrollstack, hdt-media-lookbook, hdt-gallery-hero, hdt-main-collection, hdt-morph-footer, hdt-mediatext-scroll, hdt-collection-dynamic, hdt-safe-sticky) {
  display: block;
}
:where(hdt-richlist, hdt-richlist img, hdt-counter) {
  display: inline-block;
}

.dir--rtl body,
.dir--rtl :is(h1, h2, h3, h4, h5, h6, .hdt-h0, .hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6, .hdt-heading, .hdt-subheading) {
  letter-spacing: 0 !important;
}
:where(h1, h2, h3, h4, h5, h6, .hdt-h0, .hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6, .hdt-heading, .hdt-subheading, .hdt-header__font-heading) {
  letter-spacing: var(--font-heading-spacing);
  font: var(--font-heading-style) var(--font-heading-weight) var(--heading-size,var(--text-base)) / var(--font-heading-line-height) var(--font-heading-family);
  color: var(--color-foreground);
  word-break: break-word;
  display: block;
  --lt-spacing: calc(var(--heading-size) * .1);
}
:where(.hdt-h0) {
  --heading-size: var(--h0-size);
}
:where(h1:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h1) {
  --heading-size: var(--h1-size);
}
:where(h2:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h2) {
  --heading-size: var(--h2-size);
}
:where(h3:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h3) {
  --heading-size: var(--h3-size);
}
:where(h4:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h4) {
  --heading-size: var(--h4-size);
}
:where(h5:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h5) {
  --heading-size: var(--h5-size);
}
:where(h6:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h6) {
  --heading-size: var(--h6-size);
}
.hdt-heading.hdt-uppercase {
  letter-spacing: min(var(--lt-spacing), 0.44rem);
}
/* RFS: Responsive Font Sizes */
@media only screen and (min-width: 768px) {
  :where(.hdt-h0) {
    --heading-size: clamp(var(--h0-size), max(calc(var(--h0-size) + 1.5vw), calc(1.425rem + 2vw)), var(--h0-size-xl));
  }
  :where(h1:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h1) {
    --heading-size: clamp(var(--h1-size), max(calc(var(--h1-size) + .9vw), calc(1.375rem + 1.5vw)), var(--h1-size-xl));
  }
  :where(h2:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h2) {
    --heading-size: clamp(var(--h2-size), max(calc(var(--h2-size) + .6vw), calc(1.325rem + .9vw)), var(--h2-size-xl));
  }
  :where(h3:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h3) {
    --heading-size: clamp(var(--h3-size), max(calc(var(--h3-size) + .3vw), calc(1.3rem + .6vw)), var(--h3-size-xl));
  }
  :where(h4:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h4) {
    --heading-size: clamp(var(--h4-size), max(calc(var(--h4-size) + .2vw), calc(1.275rem + .3vw)), var(--h4-size-xl));
  }
  :where(h5:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h5) {
    --heading-size: clamp(var(--h5-size), max(calc(var(--h5-size) + .14vw), 1.25rem), var(--h5-size-xl));
  }
  :where(h6:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h6) {
    --heading-size: clamp(var(--h6-size), max(calc(var(--h6-size) + .1vw), 1rem), var(--h6-size-xl));
  }
}
@media only screen and (min-width: 1150px) {
  .hdt-h0 {
    --heading-size: var(--h0-size-xl);
  }
  :where(h1:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h1) {
    --heading-size: var(--h1-size-xl);
  }
  :where(h2:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h2) {
    --heading-size: var(--h2-size-xl);
  }
  :where(h3:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h3) {
    --heading-size: var(--h3-size-xl);
  }
  :where(h4:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h4) {
    --heading-size: var(--h4-size-xl);
  }
  :where(h5:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h5) {
    --heading-size: var(--h5-size-xl);
  }
  :where(h6:not(.hdt-h1, .hdt-h2, .hdt-h3, .hdt-h4, .hdt-h5, .hdt-h6), .hdt-h6) {
    --heading-size: var(--h6-size-xl);
  }
}
.hdt-text-xs {
  font-size: var(--text-xs);
  &.hdt-uppercase {
    letter-spacing: calc(var(--text-xs) * 0.1);
  }
}
.hdt-text-sm {
  font-size: var(--text-sm);
  &.hdt-uppercase {
    letter-spacing: calc(var(--text-sm) * 0.1);
  }
}
.hdt-text-base {
  font-size: var(--text-base);
  &.hdt-uppercase {
    letter-spacing: calc(var(--text-base) * 0.1);
  }
}
.hdt-text-lg {
  font-size: var(--text-lg);
  &.hdt-uppercase {
    letter-spacing: calc(var(--text-lg) * 0.1);
  }
}
.hdt-text-xl {
  font-size: var(--text-xl);
  &.hdt-uppercase {
    letter-spacing: calc(var(--text-xl) * 0.1);
  }
}
.hdt-text-2xl {
  font-size: var(--text-2xl)
}
.hdt-text-4xl {
  font-size: var(--text-4xl)
}
.hdt-text-6xl {
  font-size: var(--text-6xl)
}
.hdt-text-8xl {
  font-size: var(--text-8xl)
}
.hdt-text-10xl {
  font-size: var(--text-10xl)
}
.hdt-text-12xl {
  font-size: var(--text-12xl)
}
.hdt-uppercase {
  text-transform: uppercase;
}
.hdt-heading.hdt-uppercase {
  letter-spacing: min(var(--lt-spacing), 0.44rem);
}
.hdt-font-light {
  font-weight: var(--font-light)
}
.hdt-font-normal {
  font-weight: var(--font-normal)
}
.hdt-font-medium {
  font-weight: var(--font-medium)
}
.hdt-font-medium_bold {
  font-weight: var(--font-medium-or-bold)
}
.hdt-font-semibold {
  font-weight: var(--font-semibold)
}
.hdt-font-bold {
  font-weight: var(--font-bold)
}
.hdt-font-extrabold {
  font-weight: var(--font-extrabold)
}
.hdt-font-black {
  font-weight: var(--font-black)
}

.hdt-rounded-2xs {
  border-radius: var(--rounded-2xs);
}
.hdt-rounded-xs {
  border-radius: var(--rounded-xs);
}
.hdt-rounded-sm {
  border-radius: var(--rounded-sm);
}
.hdt-rounded {
  border-radius: var(--rounded);
}
.hdt-rounded-lg {
  border-radius: var(--rounded-lg);
}
.hdt-rounded-full {
  border-radius: var(--rounded-full);
}
.hdt-rounded-f {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.hdt-product-card-rounded {
  border-radius: var(--rounded-product-card);
}
.hdt-product-media-rounded {
  border-radius: var(--rounded-product-media);
  @media (max-width: 767.98px) {
    border-radius: min(var(--rounded-product-media), 2rem);
  }
}
.hdt-collection-card-rounded {
  border-radius: var(--rounded-collection-card);
  .hdt-collection-card__media {
    overflow: hidden;
    border-radius: var(--rounded-collection-card);
  }
}
.hdt-blog-card-rounded {
  border-radius: var(--rounded-blog-card);
}

.shopify-challenge__button {
  background-color: var(--color-button, var(--color-foreground));
  color: var(--color-button-text, var(--color-background));
  padding: var(--spacing-1) var(--spacing-2);
  letter-spacing: var(--font-body-spacing);
  line-height: var(--button-line-height);
  border-radius: var(--rounded-button);
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--hdt-caret-bg);
  background-position: right 2rem center;
  background-repeat: no-repeat;
  background-size: .87em .5em;
  padding-inline-end: 2.5rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.dir--rtl select {
  background-position: 1.8rem center;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}
.hdt-full-width-link,
.hdt-full-width-image {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hdt-media-cover,
.hdt-full-width-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ACCESSIBILITY */
.sr-only {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}
@media (max-width: 767px) {
  .sr-only-mobile {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    word-wrap: normal !important;
  }
}
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.sr-only--inline  {
  margin: 0;
  height: 1em;
}
:focus:not(:focus-visible) {
  outline: none;
}
*:focus-visible {
  outline: var(--color-focus) auto 1px;
  outline-offset: .2rem;
}
.focus-inset-1:focus-visible {
  outline-offset: -.19rem;
}
.focus-inset:focus-visible {
  outline-offset: -0.32rem;
}
.sr-only[type=checkbox]:focus-visible + label,
.sr-only[type=radio]:focus-visible + label {
  box-shadow: 0 0 0 0.15rem var(--color-focus),0 0 0 0.4rem transparent;
}
.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}
.sr-focus-fix-oh:focus-visible:after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0.2rem var(--color-focus) !important;
  z-index: 40;
  pointer-events: none;
}
hdt-tilt-card {
  display: block;
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
  transform: perspective(500px) rotateX(0deg) rotateY(0deg) translateZ(0);
}

.hdt-print-only {
  display: none;
}

@media print {
  .hdt-no-print {
    display: none !important;
  }
  .hdt-text-center--print {
    text-align: center;
  }
  .hdt-print-only {
    display: block;
  }
}
/*================ 3.2. Container ================*/
.hdt-container,
.hdt-container-xl,
.hdt-container-full,
.hdt-container-custom {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.hdt-container-custom {
  max-width: min(100%, var(--max-w-container, 110%));
}
.hdt-container-full {
  padding: 0;
}
.hdt-page-content {
  max-width: var(--hdt-content-width);
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .hdt-container, .hdt-container-xl {
    max-width: min(100%, var(--container-max-width-padding-md, 110%));
    padding-inline: 3rem;
  }
  .hdt-container-custom {
    padding-inline: 3rem;
  }
}
@media (min-width: 1150px) {
  .hdt-container {
    max-width: var(--container-max-width-padding-xl);
    padding-inline: 5rem;
  }
  .hdt-container-xl {
    max-width: 100%;
    padding-inline: var(--pd-container, 3rem);
  }
  .hdt-container-custom {
    padding-inline: 4.8rem;
  }
}

/*================ 3.3. Helper classes ================*/
  /*================ 3.3.1. Display ================*/
  .hdt-hidden {
    display: none;
  }
  .hdt-block {
    display: block;
  }
  .hdt-inline-block {
    display: inline-block;
  }
  .hdt-inline {
    display: inline;
  }
  .hdt-flex {
    display: flex;
  }
  .hdt-inline-flex {
    display: inline-flex;
  }
  .hdt-grid {
    display: grid;
  }
  .hdt-inline-grid {
    display: inline-grid;
  }
  .hdt-contents {
    display: contents;
  }
  .hdt-order-first {
    order: -9999;
  }
  .hdt-order-last {
    order: 9999;
  }
  .hdt-grayscale {
    filter: grayscale(1);
  }
  @media (min-width: 768px) {
    .md\:hdt-hidden {
      display: none;
    }
    .md\:hdt-block {
      display: block;
    }
    .md\:hdt-inline-block {
      display: inline-block;
    }
    .md\:hdt-inline {
      display: inline;
    }
    .md\:hdt-flex {
      display: flex;
    }
    .md\:hdt-inline-flex {
      display: inline-flex;
    }
    .md\:hdt-grid {
      display: grid;
    }
    .md\:hdt-inline-grid {
      display: inline-grid;
    }
    .md\:hdt-order-first {
      order: -9999;
    }
    .md\:hdt-order-last {
      order: 9999;
    }
  }
  @media (min-width: 1024px) {
    .lg\:hdt-hidden {
      display: none;
    }
    .lg\:hdt-block {
      display: block;
    }
    .lg\:hdt-inline-block {
      display: inline-block;
    }
    .lg\:hdt-inline {
      display: inline;
    }
    .lg\:hdt-flex {
      display: flex;
    }
    .lg\:hdt-inline-flex {
      display: inline-flex;
    }
    .lg\:hdt-grid {
      display: grid;
    }
    .lg\:hdt-inline-grid {
      display: inline-grid;
    }
    .lg\:hdt-order-first {
      order: -9999;
    }
    .lg\:hdt-order-last {
      order: 9999;
    }
  }
  @media (min-width: 1150px) {
    .xl\:hdt-hidden {
      display: none;
    }
    .xl\:hdt-block {
      display: block;
    }
    .xl\:hdt-inline-block {
      display: inline-block;
    }
    .xl\:hdt-inline {
      display: inline;
    }
    .xl\:hdt-flex {
      display: flex;
    }
    .xl\:hdt-inline-flex {
      display: inline-flex;
    }
    .xl\:hdt-grid {
      display: grid;
    }
    .xl\:hdt-inline-grid {
      display: inline-grid;
    }
    .xl\:hdt-order-first {
      order: -9999;
    }
    .xl\:hdt-order-last {
      order: 9999;
    }
  }
  @media screen and (max-width: 767px) {
    .hdt-hidden\@mobile {
      display: none !important;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1149.98px) {
    .hdt-hidden\@tablet {
      display: none !important;
    }
  }

  /*================ 3.3.2. Spacing ================*/
  .hdt-p-0 {
    padding: 0;
  }
  .hdt-p-10 {
    padding: 10px;
  }
  .hdt-p-15 {
    padding: 15px;
  }
  .hdt-p-20 {
    padding: 20px;
  }
  .hdt-pt-20 {
    padding-top: 20px;
  }
  .hdt-pb-20 {
    padding-bottom: 20px;
  }
  .hdt-px-0 {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
  .hdt-ps-15 {
    padding-inline-start: 15px;
  }
  .hdt-pe-15 {
    padding-inline-end: 15px;
  }
  .hdt-px-15 {
    padding-inline-start: 15px;
    padding-inline-end: 15px;
  }
  .hdt-p-custom {
    padding: var(--hdt-padding);
  }
  .hdt-section-spacing {
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
  }

  .hdt-content-spacer {
    * {
      margin-block-start: 1.5rem;
      + .hdt-heading {
        margin-block-start: .8rem;
      }
      + .hdt-button-group {
        margin-block-start: 2rem;
      }
      &:first-child {
        margin-block-start: 0;
      }
    }
    .hdt-heading + * {
      margin-block-start: .6rem;
    }
  }
  @media (min-width: 768px) {
    .md\:hdt-px-0 {
      padding-inline-start: 0;
      padding-inline-end: 0;
    }
    .md\:hdt-ps-30 {
      padding-inline-start: 30px;
    }
    .md\:hdt-pe-30 {
      padding-inline-end: 30px;
    }
    .md\:hdt-px-30 {
      padding-inline-start: 30px;
      padding-inline-end: 30px;
    }
    .md\:hdt-p-custom {
      padding: var(--hdt-padding-md);
    }
    .md\:hdt-ps-max {
      padding-inline-start: max(3rem, (100vw - var(--container-max-width) - var(--scrollbar-w)) / 2);
    }
    .md\:hdt-pe-max {
      padding-inline-end: max(3rem, (100vw - var(--container-max-width) - var(--scrollbar-w)) / 2);
    }
    .hdt-section-spacing {
      padding-top: max(calc(var(--section-pt-xl) * .85), var(--section-pt));
      padding-bottom: max(calc(var(--section-pb-xl) * .85), var(--section-pb));
    }
  }
  @media (min-width: 1150px) {
    .xl\:hdt-px-0 {
      padding-inline-start: 0;
      padding-inline-end: 0;
    }
    .xl\:hdt-px-30 {
      padding-inline-start: 30px;
      padding-inline-end: 30px;
    }
    .xl\:hdt-px-40 {
      padding-inline-start: 40px;
      padding-inline-end: 40px;
    }
    .xl\:hdt-px-50 {
      padding-inline-start: 50px;
      padding-inline-end: 50px;
    }
    .xl\:hdt-ps-50 {
        padding-inline-start: 50px;
    }
    .xl\:hdt-pe-50 {
        padding-inline-end: 50px;
    }
    .xl\:hdt-p-custom {
      padding: var(--hdt-padding-xl);
    }
    .xl\:hdt-ps-max {
      padding-inline-start: max(5rem, (100vw - var(--container-max-width) - var(--scrollbar-w)) / 2);
    }
    .xl\:hdt-pe-max {
      padding-inline-end: max(5rem, (100vw - var(--container-max-width) - var(--scrollbar-w)) / 2);
    }
    .hdt-section-spacing {
      padding-top: var(--section-pt-xl);
      padding-bottom: var(--section-pb-xl);
    }
  }

  /*================ 3.3.3. Text, justify, align, place,... ================*/
  .hdt-text-start, .hdt-text-left {
    text-align: start;
  }

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

  .hdt-text-end, .hdt-text-right {
    text-align: end;
  }

  .hdt-justify-start {
    justify-content: start;
  }

  .hdt-justify-center {
    justify-content: safe center;
  }

  .hdt-justify-end {
    justify-content: end;
  }

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

  .hdt-justify-items-start {
    justify-items: start;
  }

  .hdt-justify-items-center {
    justify-items: safe center;
  }

  .hdt-justify-items-end {
    justify-items: end;
  }

  .hdt-justify-self-start {
    justify-self: start;
  }

  .hdt-justify-self-center {
    justify-self: center;
  }

  .hdt-justify-self-end {
    justify-self: end;
  }

  .hdt-align-start {
    align-items: start;
  }

  .hdt-align-center {
    align-items: center;
  }

  .hdt-align-end {
    align-items: end;
  }

  .hdt-align-self-start {
    align-self: start;
  }

  .hdt-align-self-center {
    align-self: center;
  }

  .hdt-align-self-end {
    align-self: end;
  }

  .hdt-place-self-start {
    place-self: start;
  }

  .hdt-place-self-start-center {
    place-self: start center;
  }

  .hdt-place-self-start-end {
    place-self: start end;
  }

  .hdt-place-self-center {
    place-self: center;
  }

  .hdt-place-self-center-start {
    place-self: center start;
  }

  .hdt-place-self-center-end {
    place-self: center end;
  }

  .hdt-place-self-end {
    place-self: end;
  }

  .hdt-place-self-end-start {
    place-self: end start;
  }

  .hdt-place-self-end-center {
    place-self: end center;
  }
  .hdt-flex-wrap {
    flex-wrap: wrap;
  }
  @media (min-width: 768px) {
    .md\:hdt-text-start,
    .md\:hdt-text-left {
      text-align: start;
    }

    .md\:hdt-text-center {
      text-align: center;
    }

    .md\:hdt-text-end,
    .md\:hdt-text-right {
      text-align: end;
    }

    .md\:hdt-justify-start {
      justify-content: start;
    }

    .md\:hdt-justify-center {
      justify-content: safe center;
    }

    .md\:hdt-justify-end {
      justify-content: end;
    }

    .md\:hdt-justify-between {
      justify-content: space-between;
    }

    .md\:hdt-justify-items-start {
      justify-items: start;
    }

    .md\:hdt-justify-items-center {
      justify-items: safe center;
    }

    .md\:hdt-justify-items-end {
      justify-items: end;
    }

    .md\:hdt-justify-self-start {
      justify-self: start;
    }

    .md\:hdt-justify-self-center {
      justify-self: center;
    }

    .md\:hdt-justify-self-end {
      justify-self: end;
    }

    .md\:hdt-align-start {
      align-items: start;
    }

    .md\:hdt-align-center {
      align-items: center;
    }

    .md\:hdt-align-end {
      align-items: end;
    }

    .md\:hdt-align-self-start {
      align-self: start;
    }

    .md\:hdt-align-self-center {
      align-self: center;
    }

    .md\:hdt-align-self-end {
      align-self: end;
    }

    .md\:hdt-place-self-start {
      place-self: start;
    }

    .md\:hdt-place-self-start-center {
      place-self: start center;
    }

    .md\:hdt-place-self-start-end {
      place-self: start end;
    }

    .md\:hdt-place-self-center {
      place-self: center;
    }

    .md\:hdt-place-self-center-start {
      place-self: center start;
    }

    .md\:hdt-place-self-center-end {
      place-self: center end;
    }

    .md\:hdt-place-self-end {
      place-self: end;
    }

    .md\:hdt-place-self-end-start {
      place-self: end start;
    }

    .md\:hdt-place-self-end-center {
      place-self: end center;
    }

    .md\:hdt-flex-wrap {
      flex-wrap: wrap;
    }
  }
  @media (min-width: 1024px) {
    .lg\:hdt-text-start,
    .lg\:hdt-text-left {
      text-align: start;
    }

    .lg\:hdt-text-center {
      text-align: center;
    }

    .lg\:hdt-text-end,
    .lg\:hdt-text-right {
      text-align: end;
    }

    .lg\:hdt-justify-start {
      justify-content: start;
    }

    .lg\:hdt-justify-center {
      justify-content: safe center;
    }

    .lg\:hdt-justify-end {
      justify-content: end;
    }

    .lg\:hdt-justify-between {
      justify-content: space-between;
    }

    .lg\:hdt-justify-items-start {
      justify-items: start;
    }

    .lg\:hdt-justify-items-center {
      justify-items: safe center;
    }

    .lg\:hdt-justify-items-end {
      justify-items: end;
    }

    .lg\:hdt-justify-self-start {
      justify-self: start;
    }

    .lg\:hdt-justify-self-center {
      justify-self: center;
    }

    .lg\:hdt-justify-self-end {
      justify-self: end;
    }

    .lg\:hdt-align-start {
      align-items: start;
    }

    .lg\:hdt-align-center {
      align-items: center;
    }

    .lg\:hdt-align-end {
      align-items: end;
    }

    .lg\:hdt-align-self-start {
      align-self: start;
    }

    .lg\:hdt-align-self-center {
      align-self: center;
    }

    .lg\:hdt-align-self-end {
      align-self: end;
    }

    .lg\:hdt-place-self-start {
      place-self: start;
    }

    .lg\:hdt-place-self-start-center {
      place-self: start center;
    }

    .lg\:hdt-place-self-start-end {
      place-self: start end;
    }

    .lg\:hdt-place-self-center {
      place-self: center;
    }

    .lg\:hdt-place-self-center-start {
      place-self: center start;
    }

    .lg\:hdt-place-self-center-end {
      place-self: center end;
    }

    .lg\:hdt-place-self-end {
      place-self: end;
    }

    .lg\:hdt-place-self-end-start {
      place-self: end start;
    }

    .lg\:hdt-place-self-end-center {
      place-self: end center;
    }

    .lg\:hdt-flex-wrap {
      flex-wrap: wrap;
    }
  }
  @media (min-width: 1150px) {
    .xl\:hdt-text-start,
    .xl\:hdt-text-left {
      text-align: start;
    }

    .xl\:hdt-text-center {
      text-align: center;
    }

    .xl\:hdt-text-end,
    .xl\:hdt-text-right {
      text-align: end;
    }

    .xl\:hdt-justify-start {
      justify-content: start;
    }

    .xl\:hdt-justify-center {
      justify-content: safe center;
    }

    .xl\:hdt-justify-end {
      justify-content: end;
    }

    .xl\:hdt-justify-between {
      justify-content: space-between;
    }

    .xl\:hdt-justify-items-start {
      justify-items: start;
    }

    .xl\:hdt-justify-items-center {
      justify-items: safe center;
    }

    .xl\:hdt-justify-items-end {
      justify-items: end;
    }

    .xl\:hdt-justify-self-start {
      justify-self: start;
    }

    .xl\:hdt-justify-self-center {
      justify-self: center;
    }

    .xl\:hdt-justify-self-end {
      justify-self: end;
    }

    .xl\:hdt-align-start {
      align-items: start;
    }

    .xl\:hdt-align-center {
      align-items: center;
    }

    .xl\:hdt-align-end {
      align-items: end;
    }

    .xl\:hdt-align-self-start {
      align-self: start;
    }

    .xl\:hdt-align-self-center {
      align-self: center;
    }

    .xl\:hdt-align-self-end {
      align-self: end;
    }

    .xl\:hdt-place-self-start {
      place-self: start;
    }

    .xl\:hdt-place-self-start-center {
      place-self: start center;
    }

    .xl\:hdt-place-self-start-end {
      place-self: start end;
    }

    .xl\:hdt-place-self-center {
      place-self: center;
    }

    .xl\:hdt-place-self-center-start {
      place-self: center start;
    }

    .xl\:hdt-place-self-center-end {
      place-self: center end;
    }

    .xl\:hdt-place-self-end {
      place-self: end;
    }

    .xl\:hdt-place-self-end-start {
      place-self: end start;
    }

    .xl\:hdt-place-self-end-center {
      place-self: end center;
    }

    .xl\:hdt-flex-wrap {
      flex-wrap: wrap;
    }

  }
  .hdt-oh {
    overflow: hidden;
  }
  .hdt-ov {
    overflow: visible;
  }
  .hdt-pe-none, wrapp-discount-remove button * {
    pointer-events: none;
  }
  .hdt-pe-auto {
    pointer-events: auto;
  }
  .hdt-fixed {
    position: fixed;
  }
  .hdt-relative {
    position: relative;
  }
  .hdt-absolute {
    position: absolute;
  }
  .hdt-top-0 {
    top: 0;
  }
  .hdt-bottom-0 {
    bottom: 0;
  }
  .hdt-left-0 {
    inset-inline-start: 0;
  }
  .hdt-right-0 {
    inset-inline-end: 0;
  }
  .hdt-flex-col {
    flex-direction: column;
  }
  .hdt-grid-1x1 {
    grid-area: 1 / -1;
  }
  .hdt-w-full {
    width: 100%;
  }
  .hdt-h-full {
    height: 100%;
  }
  .hdt-h-auto {
    height: auto;
  }
  .hdt-mh-full {
    min-height: 100%;
  }
  .hdt-truncate {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
  }
  .hdt-line-clamp {
    -webkit-line-clamp: var(--line-clamp-count, 2);
    -webkit-box-orient: vertical;
    line-clamp: var(--line-clamp-count, 2);
    display: -webkit-box;
    overflow: hidden;
  }
  a.hdt-line-clamp {
    --line-clamp-count: var(--pr-clamp-count);
    transition: text-decoration-color .25s;
    text-decoration: underline solid transparent;
    text-underline-offset: 0.3rem;
  }
  [dir="rtl"] .hdt-icon--rtl {
    scale: -1;
  }
  [dir="rtl"] .hdt-icon--45rtl {
    transform: rotate(-90deg);
  }
  .hdt-border {
    border: 1px solid var(--color-line-border);
  }
  .hdt-inset-0 {
    inset: 0;
  }
  .hdt-opacity-0 {
    opacity: 0;
  }

  .hdt-quantity-wrapp input[type="number"] {
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    background: none;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      margin: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      text-align: center;
      background: none;
    }
    &:focus {
      box-shadow: none !important;
      outline: 0 !important;
    }
  }
  .hdt-quantity-wrapp button > * {
    pointer-events: none;
  }

  .hdt-point-area, .hdt-point-area--after {
    position: relative;
  }
  .hdt-point-area {
    &:before {
      content: '';
      position: absolute;
      inset: -1rem;
    }
  }
  .hdt-point-area--after {
    &:after {
      content: '';
      position: absolute;
      inset: -1rem;
    }
  }
  /*================ 3.3.4. Grid ================*/

  /*================ 3.3.4.1. Grid CSS ================*/
  .hdt-row-grid {
    display: grid;
    column-gap: var(--spacing-x);
    row-gap: var(--spacing-y);
    grid-template-columns: repeat(var(--cols,1), minmax(0, 1fr));
  }
  .hdt-row-grid--modify {
    --col-width: calc(100% / var(--cols) - var(--spacing-x) * ((var(--cols) - 1) / var(--cols)));
    --col-grid: auto / repeat(auto-fit, var(--col-width));
    grid: var(--col-grid);
  }
  .hdt-grid-cols-0,
  .hdt-grid-cols-1 {
    --cols: 1;
  }
  .hdt-grid-cols-2 {
    --cols: 2;
  }
  .hdt-grid-cols-3 {
    --cols: 3;
  }
  .hdt-grid-cols-4 {
    --cols: 4;
  }
  .hdt-grid-cols-5 {
    --cols: 5;
  }
  .hdt-grid-cols-6 {
    --cols: 6;
  }
  @media (min-width: 768px) {
    .md\:hdt-grid-cols-0,
    .md\:hdt-grid-cols-1 {
      --cols: 1;
    }
    .md\:hdt-grid-cols-2 {
      --cols: 2;
    }
    .md\:hdt-grid-cols-3 {
      --cols: 3;
    }
    .md\:hdt-grid-cols-4 {
      --cols: 4;
    }
    .md\:hdt-grid-cols-5 {
      --cols: 5;
    }
    .md\:hdt-grid-cols-6 {
      --cols: 6;
    }
    .md\:hdt-grid-cols-12 {
      --cols: 12;
    }
  }
  @media (min-width: 1150px) {
    .xl\:hdt-grid-cols-0,
    .xl\:hdt-grid-cols-1 {
      --cols: 1;
    }
    .xl\:hdt-grid-cols-2 {
      --cols: 2;
    }
    .xl\:hdt-grid-cols-3 {
      --cols: 3;
    }
    .xl\:hdt-grid-cols-4 {
      --cols: 4;
    }
    .xl\:hdt-grid-cols-5 {
      --cols: 5;
    }
    .xl\:hdt-grid-cols-6 {
      --cols: 6;
    }
    .xl\:hdt-grid-cols-12 {
      --cols: 12;
    }
  }

  /*================ 3.3.4.2. Flex CSS ================*/
  .hdt-row-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--spacing-x);
    row-gap: var(--spacing-y);
  }
  /* :where(.hdt-row-flex--10, .hdt-row-flex--12).hdt-row-flex {
      column-gap: 0;
      margin-inline: calc(-.5* var(--spacing-x));
    } */
  .hdt-row-flex .hdt-col {
    flex: 0 0 auto;
    max-width: 100%;
    width: calc(100% / var(--cols) - (var(--spacing-x, 0px) * calc( var(--cols) - 1) / var(--cols)));
  }
  /* :where(.hdt-row-flex--10, .hdt-row-flex--12).hdt-row-flex .hdt-col {
    padding-inline: calc(var(--spacing-x)* .5);
  } */
  .hdt-spacing-0 {
    --spacing-x: 0px;
    --spacing-y: 0px;
  }
  .hdt-flex-cols-1 {
    --cols: 1;
  }
  .hdt-flex-cols-2 {
    --cols: 2;
  }
  .hdt-flex-cols-3 {
    --cols: 3;
  }
  .hdt-flex-cols-4 {
    --cols: 4;
  }
  .hdt-flex-cols-5 {
    --cols: 5;
  }
  .hdt-flex-cols-6 {
    --cols: 6;
  }
  .hdt-flex-row {
    flex-direction: row;
  }
  .hdt-flex-col {
    flex-direction: column;;
  }
  .hdt-flex-row-reverse {
    flex-direction: row-reverse;
  }
  .hdt-flex-col-reverse {
    flex-direction: column-reverse;;
  }
  @media (min-width: 768px) {
    .md\:hdt-flex-cols-1 {
      --cols: 1;
    }
    .md\:hdt-flex-cols-2 {
      --cols: 2;
    }
    .md\:hdt-flex-cols-3 {
      --cols: 3;
    }
    .md\:hdt-flex-cols-4 {
      --cols: 4;
    }
    .md\:hdt-flex-cols-5 {
      --cols: 5;
    }
    .md\:hdt-flex-cols-6 {
      --cols: 6;
    }
    .md\:hdt-flex-row-reverse {
      flex-direction: row-reverse;
    }
    .md\:hdt-flex-col-reverse {
      flex-direction: column-reverse;;
    }
    .md\:hdt-flex-row {
      flex-direction: row;
    }
    .md\:hdt-flex-col {
      flex-direction: column;;
    }
  }
  @media (min-width: 1150px) {
    .xl\:hdt-flex-cols-1 {
      --cols: 1;
    }
    .xl\:hdt-flex-cols-2 {
      --cols: 2;
    }
    .xl\:hdt-flex-cols-3 {
      --cols: 3;
    }
    .xl\:hdt-flex-cols-4 {
      --cols: 4;
    }
    .xl\:hdt-flex-cols-5 {
      --cols: 5;
    }
    .xl\:hdt-flex-cols-6 {
      --cols: 6;
    }
    .xl\:hdt-flex-row-reverse {
      flex-direction: row-reverse;
    }
  }
  /*================ 3.3.5. Reveal In View ================*/
  @media (scripting: enabled) {
    hdt-reveal-items[reveal-on-scroll=true] :where(.hdt-card-product, .hdt-reveal-item),
    [reveal], .hdt-content-eff-reveal [can-reveal], .hdt-content-eff-reveal [can-reveal][aria-disabled="true"], [reveal-on-scroll=true] [can-reveal] {
      opacity: 0.01;
    }
  }
  .hdt-section .hdt-shirk-scroll[on-shirk-scroll]{
    --clip-path-off: 1.5rem;
  }
  @media (min-width: 768px) {
    .hdt-section .hdt-shirk-scroll[on-shirk-scroll]{
      --clip-path-off: 3rem;
      --scale-max: 1.3;
      .hdt-media-wrapper > :is(img, svg),.hdt-media-wrapper hdt-video > :is(img, video){
        transform: scale(var(--scale-max));
        will-change: transform;
        transform-style: preserve-3d;
      }
    }
  }
  @media (min-width: 1150px) {
    .hdt-section .hdt-shirk-scroll[on-shirk-scroll]{
      --clip-path-off: var(--pd-container, 3rem);
    }
  }
  /*================ 3.3.6. Color Schemes ================*/
  .hdt-s-gradient {
    background: var(--color-background);
    background: var(--gradient-background);
    color: var(--color-foreground);
  }
  .hdt-s-text {
    color: var(--color-foreground);
  }
  .hdt-s-text2 {
    color: var(--color-foreground2);
  }
  .hdt-s-pr-text {
    color: var(--color-pr-text);
  }
  /*================ 3.3.7. Ratio and Object ================*/
  .hdt-ratio > *:not(.zoom, .not-apply-ratio),
  .hdt-ratio model-viewer {
    display: block;
    max-width: 100%;
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hdt-ratio--contain .hdt-ratio > img,
  .hdt-object-contain {
    object-fit: contain;
  }
  .hdt-object-center {
    object-position: center;
  }
  .hdt-object-cover {
    object-fit: cover;
  }
  .hdt-object-fill {
    object-fit: fill;
  }
  .hdt-ratio {
    display: flex;
    width: 100%;
    position: relative;
    align-items: stretch;
    &::before {
      content: '';
      width: 0;
      height: 0;
      display: block !important;
      padding-bottom: var(--ratio-percent);
    }
  }
  .hdt-ratio--smart::before {
    content: '';
    display: block !important;
    padding-bottom: var(--ratio-percent);
    grid-area: 1/-1;
  }

  .hdt-ratio--9-16 {
    --ratio-percent: 177.7777778%
  }

  .hdt-ratio--16-9 {
    --ratio-percent: 56.25%
  }

  .hdt-ratio--3-2 {
    --ratio-percent: 150%;
  }

  .hdt-ratio--asos {
    --ratio-percent: 127.7777778%;
  }

  .hdt-ratio--portrait {
    --ratio-percent: 125%;
  }

  .hdt-ratio--square {
    --ratio-percent: 100%;
  }

  .hdt-ratio--4-3 {
    --ratio-percent: 75%;
  }

  .hdt-ratio--landscape {
    --ratio-percent: 66.67%;
  }

  .hdt-ratio--circle {
    --ratio-percent: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }

  .hdt-ratio--3-2-wide {
    --ratio-percent: 87.361677%;
  }

  .hdt-ratio--asos-wide {
    --ratio-percent:74.419206%;
  }

  .hdt-ratio--portrait-wide {
    --ratio-percent: 72.801397%;
  }

  .hdt-ratio--square-wide {
    --ratio-percent: 58.241118%;
  }

  .hdt-ratio--4-3-wide {
    --ratio-percent: 43.680838%;
  }

  .hdt-ratio--landscape-wide {
    --ratio-percent: 38.829353%;
  }

  :where(.hdt-ratio--adapt_image, .hdt-ratio--adapt_image_first) .hdt-ratio,
  .hdt-ratio--adapt_image.hdt-ratio {
    --ratio-percent: calc(100% / (var(--aspect-ratioapt)))
  }
  .hdt-ratio--full .hdt-ratio {
    --ratio-percent: var(--hdt-fill-height);
  }
  .hdt-section:first-child .hdt-ratio--full .hdt-ratio {
    --ratio-percent: var(--fill-height-first, calc(var(--hdt-fill-height) - (var(--header-height, 0px) * (1 - var(--hdt-logo-transparent))) - var(--header-group-height, 0px)))
  }
  .hdt-ratio--fixed .hdt-ratio {
    --ratio-percent: var(--aspect-ratioapt);
  }
  @media screen and (min-width: 768px) {
    :where(.md\:hdt-ratio--adapt_image, .md\:hdt-ratio--adapt_image_first) .hdt-ratio {
      --aspect-ratioapt: var(--aspect-ratioapt-md) !important;
      --ratio-percent: calc(100% / (var(--aspect-ratioapt)))
    }
    .md\:hdt-ratio--full .hdt-ratio {
      --ratio-percent: var(--hdt-fill-height);
    }
    .hdt-section:first-child .md\:hdt-ratio--full .hdt-ratio {
      --ratio-percent: var(--fill-height-first, calc(var(--hdt-fill-height) - (var(--header-height, 0px) * (1 - var(--hdt-logo-transparent))) - var(--header-group-height, 0px)))
    }
    .md\:hdt-ratio--fixed .hdt-ratio {
      --ratio-percent: var(--aspect-ratioapt-md);
    }
  }

  @media screen and (max-width: 767px) {
    .hdt-object-pos-mb {
      object-position: var(--object-pos-mb, 50% 50%) !important
    }
  }
  /*================ 3.3.8. Dialog ================*/
  html {
    &[scroll-lock], &:has(.hdt-menu-mobile[open]) {
      overflow: hidden;
      margin-right: var(--scrollbar-w);
    }
  }
  .hdt-dialog {
    position: fixed;
    inset: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    &::backdrop {
      transition: opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1);
      opacity: 0;
    }
    &:modal {
      display: flex;
      flex-direction: column;
    }
    &:focus-visible {
      box-shadow: none !important;
      outline: 0 !important;
    }
  }
  .hdt-hotspots-with-drawer__sidepanel {
    &::backdrop {
      transition: opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1);
      opacity: 0;
    }
  }
  .hdt-dialog[open], .hdt-hotspots-with-drawer__sidepanel[open] {
    &::backdrop {
      background-color: color-mix(in srgb, var(--color-overlay), transparent 70%);
      opacity: 1;
    }
    &:not(.dialog-closing)::backdrop {
      cursor: var(--cursor-close-icon) 25 25, auto;
    }
    &.dialog-closing::backdrop {
      opacity: 0;
    }
  }
  .hdt-drawer__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding:  1.5rem var(--padding-y, 2rem) 1.6rem;
    font-size: var(--text-6xl);
    font-weight: var(--font-medium-or-bold);
    border-bottom: 1px solid var(--color-line-border);
  }
  .hdt-drawer__footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--color-line-border);
    padding: 2rem 2.7rem 2.7rem;
    text-align: center;
  }
  .hdt-drawer__inner {
    position: relative;
    flex: 1 1 100%;
    overscroll-behavior-y: contain;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    padding: var(--padding-y, 2.8rem);
  }
  .hdt-drawer {
    inset: 0 auto auto auto;
    max-width: 90%;
    margin: 0 0 0 auto;
    overflow: hidden;
    background: var(--color-background);
    &[pos="left"] {
      inset-inline: 0 auto;
    }
    &[pos="right"] {
      inset-inline: auto 0;
    }
    .hdt-dialog-cart-action {
      height: auto;
      top: auto;
      inset-block-end: 0;
    }
    &:modal {
      max-height: 100vh;
      overflow-y: hidden;
    }
    @media screen and (width >= 480px) {
      max-width: 42rem;
      --padding-y: 2.5rem;
    }
    .hdt-drawer_wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
  .hdt-drawer--indent {
    max-width: min(100%, 44.8rem);
    padding: 1.5rem;
    background-color: transparent;
    .hdt-drawer_wrapper {
      background: var(--color-background);
      border-radius: var(--rounded-sm);
    }
  }
  .hdt-drawer--blur {
    background: color-mix(in srgb, var(--color-background), transparent 70%);
    -webkit-backdrop-filter: blur(55px);
    backdrop-filter: blur(55px);
    &.hdt-drawer--indent {
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      .hdt-drawer_wrapper {
        background: color-mix(in srgb, var(--color-background), transparent 70%);
        -webkit-backdrop-filter: blur(55px);
        backdrop-filter: blur(55px);
        border: 1px solid var(--color-line-border);
      }
    }
    &[open]:not(.dialog-closing)::backdrop {
      -webkit-backdrop-filter: blur(15px);
      backdrop-filter: blur(15px);
    }
  }
  @media (min-width: 768px) {
    .hdt-drawer--indent {
      padding: 3rem 2rem;
    }
  }
  .hdt-modal {
    margin: auto;
    max-width: min(90rem, 90vw);
    max-height: 80vh;
    height: fit-content;
    overflow: hidden;
    border-radius: .3rem;
    padding: 0;
    border-radius: var(--rounded);
    @media screen and (width >= 768px) {
      padding: 3.8rem 0 4rem;
    }
    &[open] {
      justify-content: center;
    }
    .hdt-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 2rem;
      @media screen and (width >= 768px) {
        padding: 2.7rem 2.6rem 2.1rem;
        border-bottom: 1px solid var(--color-line-border);
      }
    }
    .hdt-modal__inner {
      overscroll-behavior-y: contain;
      overflow-y: auto;
      padding: 2rem;
      @media screen and (width >= 768px) {
        padding: 3.1rem 2.4rem 3.5rem;
      }
    }
    &:modal {
      display: flex;
      flex-direction: column;
    }
    &.hdt-modal--blur{
      --color-line-border: color-mix(in srgb, var(--color-foreground), transparent 92%);
      --input-background: color-mix(in srgb, var(--color-foreground), transparent 96%);
      background-color: color-mix(in srgb, var(--color-background), transparent 70%);
      -webkit-backdrop-filter: blur(70px);
      backdrop-filter: blur(70px);
      border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 70%);
      &[open]:not(.dialog-closing)::backdrop{
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
      }
    }
  }
  .hdt-popover {
    --padding-x: 1rem;
    --padding-y: 1rem;
    position: absolute;
    inset: auto;
    margin: 0;
    overflow: visible !important;
    z-index: 999;
    background: var(--color-background);
    border-radius: var(--rounded-sm);
    width: max-content;
    max-width: min(100vw, 30rem);
    box-shadow: 0 0 1.8rem color-mix(in srgb,var(--color-overlay),transparent 80%);
    pointer-events: auto;
    padding: 0;
    .hdt-popover__inner{
      padding: var(--padding-x) var(--padding-y);
    }
    &[open-as-modal] {
      --padding-x: 1.5rem;
      --padding-y: 2.4rem;
      position: fixed;
      inset: 0 !important;
      inset-block-start: auto !important;
      width: 100%;
      max-width: 100%;
      box-shadow: none;
      border-radius: 0;
      .hdt-popover__arrow {
        display: none;
      }
      .hdt-popover__inner {
        -webkit-overflow-scrolling: touch;
        max-height: 80vh;
        overscroll-behavior-y: contain;
        overflow-y: auto;
        @supports (height: 1dvh) {
          max-height: 80dvh;
        }
      }
      .hdt-popover__header{
        align-items: center;
        padding: 0 var(--padding-y);
        margin-bottom: 0;
        button[ref="closeButton"]{
          width: 4rem;
          height: 4rem;
          display: inline-flex;
          align-items: center;
          justify-content: flex-end;
          pointer-events: auto;
        }
      }
    }
    .hdt-popover__arrow {
      position: absolute;
      width: 1rem;
      height: 1rem;
      transform: rotate(45deg);
      background: inherit;
    }
    .hdt-popover__header {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 2rem;
      padding: 1rem var(--padding-x);
      button[ref="closeButton"]{
        svg {
          transition: transform 0.3s linear;
        }
      }
      @media screen and (width >= 768px) {
        &.md\:hdt-hidden {
          display: none;
        }
      }
    }
    &[open] {
      &::backdrop {
        background-color: color-mix(in srgb, var(--color-overlay, #000), transparent 50%);
        opacity: 1;
      }
      &:not(.dialog-closing)::backdrop {
        cursor: var(--cursor-close-icon) 25 25, auto;
      }
      &.dialog-closing::backdrop {
        opacity: 0;
      }
      &[open-as-modal]::backdrop {
        opacity: var(--opacity, 0) !important;
      }
      &.dialog-closing[open-as-modal]::backdrop {
        pointer-events: none;
      }
    }
  }
  .hdt-popover-u[open-as-modal] {
    --w-u: 102px;
    --h-u: 31px;
    --padding: 1.5rem;
    padding: var(--padding);
    background-color: transparent;
    top: auto !important;
    transform: none !important;
    [ref="closeButton"] {
      position: absolute;
      width: 4rem;
      height: 4rem;
      left: 50%;
      transform: translateX(-50%);
      top: -2px;
      background-color: var(--color-background);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hdt-popover__body {
      margin-top: -1px;
      background-color: var(--color-background);
      padding: 0 2rem 4rem;
      border-bottom-left-radius: var(--rounded-sm);
      border-bottom-right-radius: var(--rounded-sm);
    }
    .hdt-popover-u__top{
      position: relative;
      display: grid;
      grid-template-columns: [start] minmax(0, 1fr) 9rem [end] minmax(0, 1fr);
      &::before, &::after {
        content: '';
        display: block;
        height: var(--h-u);
        width: 100%;
        background-color: var(--color-background);
      }
      &::before {
        grid-area: start;
        border-start-start-radius: var(--rounded-sm);
      }
      &::after {
        grid-area: end;
        border-start-end-radius: var(--rounded-sm);
      }
    }
    .hdt-icon-u {
      color: var(--color-background);
      width: var(--w-u);
      height: var(--h-u);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    &.hdt-popover-u--no-padding {
      padding: var(--padding) 0 0;
      .hdt-popover-u__top {
        --rounded-sm: var(--rounded-lg);
        --padding: 0rem;
      }
      .hdt-popover__body {
        --rounded-sm: 0;
      }
    }
    .hdt-popover__header{
      align-items: flex-start;
      padding-inline: 0;
    }
    .hdt-popover__inner{
      padding-inline: 0;
    }
  }
  .hdt-popover-u:not([open-as-modal]) {
    [ref="closeButton"], .hdt-icon-u {
      display: none;
    }
  }
  .hdt-close-dialog-btn {
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    border-radius: 50%;
    padding: .5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    svg{
      margin-block-start: 0;
    }
    &.hdt-btn-close-no-progress{
      border: 1px solid var(--color-foreground);
      svg {
        transition: transform 0.3s linear;
      }
    }
    .hdt-icon-circle-progress{
      position: absolute;
      inset: 0;
      width: 100%;
      height:100%;
      transition: transform 0.3s ease;
      .hdt-circle-progress{
        transition: stroke-dashoffset var(--hdt-remaining, 0.4s) cubic-bezier(0.7, 0, 0.3, 1);
      }
    }
  }

  .hdt-s-drawer-wrapper {
    margin-top: 2.1rem;
    .hdt-recent-view-products {
      margin-top: 2.1rem;
    }
  }

  .hdt-s-drawer-results {
    #predictive-search-results-queries-list {
      display: block;
      column-count: 2;
    }
    .hdt-slider--predictive-search {
      margin-bottom: 2.4rem;
      --slide-spacing: 2rem;
    }
    .hdt-predictive-search__heading {
      padding-bottom: .9rem;
    }
    .hdt-predictive-search__result-group {
      margin-bottom: 1.65rem;
    }
    .hdt-predictive-search__results-list {
      .hdt-predictive-search__list-item + .hdt-predictive-search__list-item {
        margin-top: .9rem;
        &.hdt-sd-pr-item {
          margin-top: 1.5rem;
        }
      }
    } 
    .hdt-predictive-search__result-tabs {
      display: block;
      position: relative;
    }
  }

  .hdt-drawer__inner {
    .hdt-input--search {
      background: color-mix(in srgb, var(--color-foreground), transparent 80%);;
    }
  }

  .hdt-s-drawer-show-when-empty {
    opacity: 1;
    transition: opacity 0.3s linear 0.3s;
  }

  .hdt-predictive-search {
    &:has(.hdt-reset-search__btn:not(.hidden)) {
      .hdt-s-drawer-show-when-empty {
        opacity: 0;
        pointer-events: none;
        user-select: none;
        transition: opacity 0.2s linear;
      }
    }
    &:has(.hdt-reset-search__btn.hidden) {
      .hdt-s-drawer-results-part {
        pointer-events: none;
        user-select: none;
      }
    }
  }

  .hdt-s-drawer-product-list {
    display: flex;
    flex-direction: column;
  }

  .hdt-sd-pr-item {
    display: flex;
    gap: .8rem;
    .hdt-sd-pr-img {
      width: 8rem;
      border-radius: var(--rounded-sm);
      overflow: hidden;
      flex: none;
      :where(img svg) {
        width: 100%;
        height: auto;
      }
    }
    + .hdt-sd-pr-item {
      margin-top: 1.4rem;
      padding-top: 1.4rem;
      border-top: 1px solid color-mix(in srgb, var(--color-foreground), transparent 70%);
    }
  }

  .hdt-collection-list--dynamic {
    position: relative;
    .hdt-collection-list__image {
      width: 5rem;
      border-radius: var(--rounded-full);
      overflow: hidden;
      .hdt-placeholder-svg{
        fill: currentColor;
      }
    }
    &.hdt-slider--s-drawer-collection-list {
      .hdt-collection-list__image {
        width: 3.9rem;
      }
    }
  }

  .hdt-search-drawer-title-wrap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
  }

  .hdt-search-drawer-title {
    --heading-size: var(--text-xl);
  }

  .hdt-s-drawer-sub-content {
    display: block;
    & + .hdt-s-drawer-sub-content {
      margin-top: 1.9rem;
    }
  }

  .hdt-search-drawer-title, .hdt-search-drawer-title-wrap {
    + .hdt-s-drawer-sub-content-inner {
      margin-top: 1.9rem;
    }
  }

  .hdt-collection-list--dynamic {
    &.hdt-start-slide-selected.hdt-last-slide-selected {
      mask-image: linear-gradient(calc(90deg * var(--dir, 1)), color-mix(in srgb, var(--color-background), transparent 50%) 8.96%, var(--color-background) 20%);
    }
    &.hdt-start-slide-selected:not(.hdt-last-slide-selected) {
      mask-image: linear-gradient(to right, transparent 0%, var(--color-background) 20%, var(--color-background) 80%, transparent 100%)
    }
    &:not(.hdt-last-slide-selected) {
      mask-image: linear-gradient(calc(-90deg * var(--dir, 1)), color-mix(in srgb, var(--color-background), transparent 50%) 8.96%, var(--color-background) 20%);
    }
    .hdt-slider {
      --slide-size-set: auto;
      --slide-spacing: 0.8rem;
    }
    .hdt-collection-dynamic-item{
      display: inline-flex;
      flex: 0 0 auto;
    }
    .hdt-collection-list__title{
      white-space: nowrap;
      display: inline-flex;
      sup{
        padding-inline-start: 0.4rem;
        top: 0rem;
        font-size: 68%;
        line-height: 1rem;
      }
    }
    .hdt-collection-list__link{
      display: inline-flex;
      gap: 1.3rem;
      align-items: center;
      --padding-button: 0.6rem 1.3rem 0.6rem 0.6rem;
      --thickness-block: 1px;
      --color-btn-primary: transparent;
      --color-btn-secondary-hover: var(--color-foreground);
      --color-btn-primary-hover: color-mix(in srgb, var(--color-foreground), transparent 92%);
      margin-block: 2px;
    }
    .hdt-collection-current {
      color: var(--color-background);
      background: var(--color-foreground);
    }
  }
  .hdt-drawer {
    .hdt-slider--s-drawer-collection-list {
      --slide-size-set: auto;
      --slide-spacing: 0.8rem;
    }
  }
  .hdt-cart__empty-collections {
    .hdt-cart__empty-collection {
      --slide-size-set: auto;
      --slide-spacing: 0.8rem;
      display: inline-flex;
      flex: 0 0 auto;
    }
  }
  .hdt-cart__empty-collection {
    .hdt-collection-list__title{
      white-space: nowrap;
      display: inline-flex;
      sup{
        padding-inline-start: 0.4rem;
        top: 0rem;
        font-size: 68%;
        line-height: 1rem;
      }
    }
    .hdt-collection-list__link{
      display: inline-flex;
      gap: 1.3rem;
      align-items: center;
      --padding-button: 0.6rem 1.3rem 0.6rem 0.6rem;
      --thickness-block: 1px;
      --color-btn-primary: transparent;
      --color-btn-secondary-hover: var(--color-foreground);
      --color-btn-primary-hover: color-mix(in srgb, var(--color-foreground), transparent 92%);
      margin-block: 2px;
    }
  }
  .dir--rtl {
    .hdt-collection-list--dynamic,
    .hdt-cart__empty-collection {
      .hdt-collection-list__link{
        --padding-button: 0.6rem 0.6rem 0.6rem 1.3rem;
      }
    }
  }

  @media screen and (width >= 768px) {
    .hdt-sd-pr-item {
      gap: 2rem;
      .hdt-sd-pr-img {
        width: 11.4rem;
      }
    }
  }

  /*================ 3.3.9. Slider ================*/
  .hdt-slider {
    --slide-spacing: 0px;
    --slide-size-set: 100%;
    --slide-size: var(--slide-size-set);
    position: relative;

    &.hdt-slider--has-controls {
      width: 100%;

      .hdt-slideshow__controls {
        position: absolute;
        z-index: 1;
        width: 100%;
        padding-inline: var(--control-padding, 1.5rem);
        bottom: var(--control-spacing, 1.5rem);
        pointer-events: none;
      }
    }

    &[autoheight] {
      .hdt-slider__container {
        align-items: flex-start;
        transition: height 0.2s;
      }
    }
  }
  .hdt-slides-2 {
    --slide-size-set: 50%;
  }
  .hdt-slides-3 {
    --slide-size-set: 33.3333%;
  }
  .hdt-slides-4 {
    --slide-size-set: 25%;
  }
  .hdt-slides-5 {
    --slide-size-set: 20%;
  }
  .hdt-slides-6 {
    --slide-size-set: 16.6666667%;
  }
  .hdt-slider__viewport {
    position: relative;
    overflow: hidden;
  }
  .hdt-slider__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* -webkit-backface-visibility: hidden;
    backface-visibility: hidden; */
    margin-inline-start: calc(var(--slide-spacing) * -1);
    transition-property: transform;
  }
  .hdt-slider__slide {
    transform: translate3d(0, 0, 0);
    flex: 0 0 var(--slide-size);
    min-width: 0px;
    padding-inline-start: var(--slide-spacing);
    position: relative;
  }
  .hdt-slide-spacing-10 {
    --slide-spacing: 10px;
  }
  .hdt-slide-spacing-15 {
    --slide-spacing: 15px;
  }
  .hdt-slide-spacing-20 {
    --slide-spacing: 20px;
  }
  .hdt-slide-spacing-30 {
    --slide-spacing: 30px;
  }
  .hdt-slide-spacing-x {
    --slide-spacing: var(--spacing-x);
  }
  .hdt-slider-nav button {
    display: grid;
    place-content: center;
    width: var(--btn-w, 3.5rem);
    height: var(--btn-h, 3.5rem);
    --rounded-button:50%;
    --padding-button: 0;
    border-radius: var(--rounded-button);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    position: absolute;
    top: calc(var(--gap-arrow, 50%));
    transform: translateY(-50%);
    &.hdt-btn--inner{
      width: auto;
      height: auto;
      [circle-bg-wrap]{
        width: var(--btn-w, 3.5rem);
        height: var(--btn-h, 3.5rem);
        clip-path: inset(0px round var(--rounded-button));
        border-radius: inherit;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
    }
    @media (min-width: 768px) {
      --btn-w: 4.5rem;
      --btn-h: 4.5rem;
    }
  }
  .hdt-slider-nav--solid button {
    background-color: var(--color-btn-primary);
    color: var(--color-btn-secondary);
    &.hdt-btn--inner{
      background: transparent;
    }
    .hdt-inner-btn{
      background-color: var(--color-btn-primary);
      color: var(--color-btn-secondary);
    }
  }
  .hdt-slider-nav--outline button .hdt-inner-btn{
    color: var(--color-btn-primary);
    border: 1px solid var(--color-btn-primary);    
  }
  .hdt-slider-nav[inited] button {
    opacity: 1;
    visibility: visible;
  }
  .hdt-slider-nav button[disabled] {
    opacity: .5;
    cursor: default;
    pointer-events: none;
  }
  .hdt-slider-nav button[name="previous"] {
    inset-inline-start: var(--inset, 0px);
  }
  .hdt-slider-nav button[name="next"] {
    inset-inline-end: var(--inset, 0px);
  }
  .hdt-slider-nav [circle-bg-wrap]{
    overflow: hidden;
  }
  .hdt-slider__overflow {
    overflow: hidden;
    .hdt-slider__viewport {
      overflow: visible;
    }
  }
  .hdt-slider__border:before {
    content: '';
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid rgb(var(--color-line-border));
    z-index: 1;
    pointer-events: none;
    display: block !important;
    background-color: transparent;
  }
  .hdt-slider__border .hdt-slider__slide:before {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset -1px -1px rgb(var(--color-line-border)), -1px -1px rgb(var(--color-line-border));
    pointer-events: none;
  }
  .hdt-slider[autoheight] .hdt-slider__border .hdt-slider__slide:before {
    height: 1000px;
  }
  /* Slide dots */
.hdt-slider-dots{
  display: flex;
  justify-content: center;
  margin-block-start: var(--dots-spacing, 4rem);
  gap: 0.6rem;
  margin-block-end: 0.3rem;
  @media (min-width: 768px){
    &.md\:hdt-hidden{display: none;}
  }
  @media (min-width: 1150px){
    &.lg\:hdt-hidden{display: none;}
  }
  .hdt-slider__dot{
    display: grid;
    width: var(--size-dot, 0.6rem);
    height: var(--size-dot, 0.6rem);
    background-color: color-mix(in srgb, var(--color-foreground), transparent 80%);
    border-radius: var(--rounded-full);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    &[aria-current=true]{
      background-color: var(--color-foreground);
    }
  }
}
  .hdt-slider-dots__progressbar .hdt-slider__dot{
    --size-dot: 0.4rem;
  }
  .hdt-slide_autoplay .hdt-slider-dots__progressbar .hdt-slider__dot[aria-current=true]{
    background-color: color-mix(in srgb, var(--color-foreground), transparent 92%);
  }
  .hdt-slider-dots__progressbar .hdt-slider__dot[aria-current=true] {
    width: 2.8rem;
  }
  .hdt-slide_autoplay .hdt-slider-dots__progressbar .hdt-slider__dot[aria-current=true]:after{
    content: "";
    grid-area: 1/-1;
    transform: scaleX(0);
    transform-origin: var(--value-origin-start);
    background-color: var(--color-foreground);
    border-radius: var(--rounded-full);
    animation: slideDotsProgress var(--hdt-remaining, 0) linear var(--hdt-play-state, paused) both;
    display: block;
    width: 100%;
    height: 100%;    
  }
  @keyframes slideDotsProgress{
    0%{
      transform: scaleX(0);
    }
    100%{
      transform: scaleX(1);
    }
  }
  /* Slide control mixed */
  .hdt-slide-control-mixed {
    --color-line-border: color-mix(in srgb, var(--color-foreground), transparent 92%);
    --color-btn-secondary-hover: var(--color-background);
    --color-btn-primary-hover: var(--color-foreground);
    border-radius: var(--rounded-button);
    background: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid var(--color-line-border);
    padding: var(--spacing-0-6);
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    button[name="next"], button[name="previous"]{
      overflow: hidden;
      position: relative;
    }
    svg{z-index: 2;}
    hdt-circle-bg{z-index: 1;}
  }
  .hdt-slide-control-mixed button[name="next"], .hdt-slide-control-mixed button[name="previous"]{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--color-line-border);
    border-radius: var(--rounded-full);
  }
  .hdt-slide-controls-vertical.hdt-slide-control-mixed {
    flex-direction: column;
    button[name="next"] > *, button[name="previous"] > *{
      transform: rotate(90deg);
    }
  }
  .dir--rtl .hdt-slide-controls-vertical.hdt-slide-control-mixed{flex-direction: column-reverse;}
  .hdt-slide-control-mixed .hdt-slider-progress_bar {
    background-color: var(--color-foreground);
  }
  hdt-slider-progress {
    width: 100%;
    display: grid;
    background-color: var(--color-line-border);
    height: 0.2rem;
    max-width: 20rem;
    margin: 6rem auto 0;
  }
  .hdt-slider-progress_bar {
    width: 100%;
    display: inline-block;
    background-color: var(--color-foreground);
    transform: scaleX(var(--scale-x, 0));
    will-change: transform;
    transform-origin: var(--value-origin-start);
    transition: all .25s linear;
    grid-area: 1 / -1;
  }
  .hdt-slide-control-mixed hdt-slider-progress{
    width: 4.4rem;
    height: 0.4rem;
    margin: 0;
    border-radius: 1rem;
    overflow: hidden;
  }
  .hdt-slide-control-mixed .hdt-slider-progress_bar{
    border-radius: 1rem;
  }
  .hdt-slide-control-mixed.hdt-slide-controls-vertical hdt-slider-progress {
    width: 0.4rem;
    height: 4.4rem;
    .hdt-slider-progress_bar {
      transform: scaleX(1) scaleY(var(--scale-x, 0));
      transform-origin: top;
    }
  }
  @media (max-width: 767.98px) {
    .hdt-slider__active-false .hdt-slider__container {
      flex-wrap: wrap;
      row-gap: var(--spacing-y);
    }
    .hdt-slider__active-false.hdt-slider__items-center .hdt-slider__container {
      justify-content: center;
    }
    /* This is the fix - round the size to a whole pixel */
    @supports (width: round(0px, 0px)) {
      .hdt-slider:not(.hdt-slider__active-false) .hdt-slider__slide {
        --slide-size: round(up, var(--slide-size-set), 1px);
      }
    }
    .mb\:hdt-slider__overflow {
      overflow: hidden;
      .hdt-slider__viewport {
        overflow: visible;
        &.mb\:hdt-slider__viewport--hidden {
          overflow: hidden;
        }
      }
    }
    .mb\:hdt-slider__overflow .hdt-slides-1:not(.hdt-slider__active-false) {
      --slide-size-set: var(--slide-size-set-mb, 90%);
    }
    .mb\:hdt-slider__overflow .hdt-slides-2:not(.hdt-slider__active-false) {
      --slide-size-set: var(--slide-size-set-mb, 48%);
    }
    .hdt-slider-nav {
      display: none;
      @media (max-width: 767.98px) {
        &.hdt-block{display: block;}
      }
    }
  }
  @media (max-width: 1024px) and (min-width: 768px) {
    .mb\:hdt-slider__overflow {
      overflow: hidden;
      .hdt-slider__viewport {
        overflow: visible;
        &.mb\:hdt-slider__viewport--hidden {
          overflow: hidden;
        }
      }
    }
    .mb\:hdt-slider__overflow .md\:hdt-slides-2:not(.md\:hdt-slider__active-false) {
      --slide-size-set: 45%;
    }
    .mb\:hdt-slider__overflow .md\:hdt-slides-3:not(.md\:hdt-slider__active-false) {
      --slide-size-set: 30%;
    }
    .hdt-slider-nav {
      display: none;
    }
  }
  @media (min-width: 768px) {
    .md\:hdt-slider__marquee {
      overflow: hidden;
      &.mb\:hdt-slider__overflow {
        padding-inline-end: 0;
      }
    }
    .md\:hdt-slider__marquee .hdt-slider__viewport {
      overflow: visible;
    }
    .md\:hdt-slider__active-false .hdt-slider__container {
      flex-wrap: wrap;
      row-gap: var(--spacing-y);
    }
    .md\:hdt-slider__active-false.md\:hdt-slider__items-center .hdt-slider__container {
      justify-content: center;
    }
    .md\:hdt-slides-1 {
      --slide-size-set: 100%;
    }
    .md\:hdt-slides-2 {
      --slide-size-set: 50%;
    }
    .md\:hdt-slides-3 {
      --slide-size-set: 33.3333%;
    }
    .md\:hdt-slides-4 {
      --slide-size-set: 25%;
    }
    .md\:hdt-slides-5 {
      --slide-size-set: 20%;
    }
    .md\:hdt-slides-6 {
      --slide-size-set: 16.6666667%;
    }
    .md\:hdt-slide-spacing-24 {
      --slide-spacing: 24px;
    }
  }
  @media (min-width: 768px) and (max-width: 1149.98px) {
    .md\:hdt-slider__active-false .hdt-slider__container {
      flex-wrap: wrap;
      row-gap: var(--spacing-y);
    }
    .md\:hdt-slider__active-false.md\:hdt-slider__items-center .hdt-slider__container {
      justify-content: center;
    }
    /* This is the fix - round the size to a whole pixel */
    @supports (width: round(0px, 0px)) {
      .hdt-slider:not(.md\:hdt-slider__active-false) .hdt-slider__slide {
        --slide-size: round(up, var(--slide-size-set), 1px);
      }
    }
  }
  @media (min-width: 1150px) {
    .xl\:hdt-slider__active-false .hdt-slider__container {
      flex-wrap: wrap;
      row-gap: var(--spacing-y);
    }
    .xl\:hdt-slider__active-false.xl\:hdt-slider__items-center .hdt-slider__container {
      justify-content: center;
    }
    /* This is the fix - round the size to a whole pixel */
    @supports (width: round(0px, 0px)) {
      .hdt-slider:not(.xl\:hdt-slider__active-false) .hdt-slider__slide {
        --slide-size: round(up, var(--slide-size-set), 1px);
      }
    }
    .xl\:hdt-slides-2 {
      --slide-size-set: 50%;
    }
    .xl\:hdt-slides-3 {
      --slide-size-set: 33.3333%;
    }
    .xl\:hdt-slides-4 {
      --slide-size-set: 25%;
    }
    .xl\:hdt-slides-5 {
      --slide-size-set: 20%;
    }
    .xl\:hdt-slides-6 {
      --slide-size-set: 16.6666667%;
    }
    .xl\:hdt-slides-7 {
      --slide-size-set: 14.285714%;
    }
    .xl\:hdt-slides-8 {
      --slide-size-set: 12.5%;
    }
  }

  /*================ 3.3.10. Section header ================*/
    .hdt-icon-customer-avatar {
      --avatar-size: 2.2rem;
      --avatar-fs: 1rem;
      --avatar-color: var(--color-foreground);
      width: var(--avatar-size);
      height: var(--avatar-size);
      line-height: 0;
      display: inline-block;
      border: 1px solid color-mix(in srgb, var(--avatar-color), transparent 70%);
      border-radius: 9999px;
      &.hdt-icon-customer-avatar--menu {
      --avatar-color: var(--color-btn-secondary);
      --avatar-size: 2rem;
      }
      &.hdt-icon-customer-avatar--navbar {
        --avatar-size: 1.5rem;
        height: var(--avatar-size);
        .hdt-centered-char {
          font-size: 1.2rem;
        }
      }
      .hdt-icon-background {
        fill: color-mix(in srgb, var(--avatar-color), transparent 90%);
      }
      .hdt-centered-char {
        text-anchor: middle;
        dominant-baseline: central;
        --normalized-size: clamp(1.5rem, var(--avatar-size), 3.2rem);
        font: 600 16px / 19px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        font-size: calc(var(--normalized-size) / 2);
        fill: currentColor;
      }
    }
    .hdt-header__icons shop-user-avatar {
      --shop-avatar-size: 2.4rem;
    }
    .hdt-menu-drawer shop-user-avatar {
      --shop-avatar-size: 1.8rem;
    }
    .hdt-navbar-mobile shop-user-avatar {
      --shop-avatar-size: 1.5rem;
      + .hdt-navbar-mobile__label {
        top: -8px;
        position: relative;
      }
    }
  .hdt-section__header {
    margin-bottom: 2.5rem;
  }
  .hdt-caption + .hdt-heading {
    margin-top: var(--spacing-header-cap, 1.8rem);
  }
  .hdt-caption + .hdt-description {
    margin-top: var(--spacing-header-text, 2rem)
  }
  .hdt-heading + .hdt-description {
    margin-top: var(--spacing-header-desc, 1.6rem);
  }
  @media (min-width: 768px) {
    .hdt-section__header {
      margin-bottom: 3.8rem;
    }
  }

  /*================ 3.3.11. Max height ================*/
.hdt-max-height {
  max-height: var(--max-height, none);
  position: relative;
  overflow: hidden;
  &[active-mh] {
    max-height: none;
    transition: height .5s ease;
    height: var(--max-height);
  }
  .hdt-read-more {
    position: absolute;
    z-index: 2;
    bottom: .5rem;
    opacity: 0;
  }
  &[active-mh] .hdt-read-more-mask {
    position: absolute;
    z-index: 1;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 6rem;
    pointer-events: none;
    margin: 0;
    height: 60%;
  }
}
  .hdt-max-height[active-mh]:not([open]) .hdt-read-more-mask {
    /* height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); */
    background-image: linear-gradient(rgba(255, 255, 255, 0.39), rgb(255, 255, 255) 71%);
  }
  .hdt-max-height[active-mh] .hdt-read-more {
    opacity: 1;
  }
  .hdt-max-height[active-mh][open] {
    height: var(--scroll-height);
    .hdt-read-more {
      span:first-child {
        display: none;
      }
      span:last-child {
        display: inline-flex;
      }
    }
  }
  /*================ 3.4. RTE (Richtext editor) ================*/
  .rte :where(h1):not(.hdt-heading) {
    --h1-size: var(--rte-h1-size);
    --h1-size-xl: var(--rte-h1-size-xl);
  }
  .rte :where(h2):not(.hdt-heading) {
    --h2-size: var(--rte-h2-size);
    --h2-size-xl: var(--rte-h2-size-xl);
  }
  .rte :where(h3):not(.hdt-heading) {
    --h3-size: var(--rte-h3-size);
    --h3-size-xl: var(--rte-h3-size-xl);
  }
  .rte :where(h4):not(.hdt-heading) {
    --h4-size: var(--rte-h4-size);
    --h4-size-xl: var(--rte-h4-size-xl);
  }
  .rte :where(h5):not(.hdt-heading) {
    --h5-size: var(--rte-h5-size);
    --h5-size-xl: var(--rte-h5-size-xl);
  }
  .rte :where(h6):not(.hdt-heading) {
    --h6-size: var(--rte-h6-size);
    --h6-size-xl: var(--rte-h6-size-xl);
  }
  .rte :where(:not(meta, span) + *) {
    margin-block-start: 1.4rem;
  }
  @media screen and (min-width: 768px) {
    .rte :where(:not(meta, span) + *) {
      margin-block-start: 2rem;
    }
  }

  .rte > *:first-child {
    margin-block-start: 0 !important;
  }
  .rte :last-child {
    margin-block-end: 0!important;
  }

  .rte img {
    height: auto;
    max-width: 100%;
    border-radius: var(--rounded-sm);
  }

  .rte :is(iframe[src*="youtube.com"], iframe[src*="youtu.be"], iframe[src*="player.vimeo"]) {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }

  .rte :where(ul, ol) {
    list-style: disc outside;
    margin-inline-start: 2rem;
  }
  .rte ul ul {
    list-style-type: circle;
    margin-inline-start: 2.5rem;
    ul {
      list-style-type: square
    }
  }

  .rte ol {
    list-style-type: decimal;
  }

  .rte li {
    list-style: inherit;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .rte a:not(.hdt-btn, .hdt-btn-link), .hdt-form__alert--error a{
    color: var(--color-foreground);
    display: inline;
    align-self: flex-start;
    background: linear-gradient(to right,currentColor,currentColor) 0 100%/100% 1px no-repeat;
    background-position-x: left;
    transition: background-size .5s cubic-bezier(.3, 1, .3, 1),color .3s .5s cubic-bezier(.3, 1, .3, 1);
  }
  
  .rte blockquote {
    padding-block: 5.3rem 3.5rem;
    padding-inline: min(11.3rem, 8vw);
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-color: var(--color-line-border);
    position: relative;
    text-align: center;
    margin-block-start: 7rem;
    margin-block-end: 2rem;
    display: inline-block;
    p{
      font-size: var(--h5-size);
      font-weight: var(--font-medium);
      @media (min-width: 768px) {
          font-size: var(--h5-size-xl);
      }
    }
    &:before {
      content: '';
      position: absolute;
      inset-inline-start: 50%;
      inset-block-start: 0;
      transform: translate(-50%, -50%);
      padding: 1.2rem 2rem;
      mask-image: url('icon-quote-rte.svg');
      -webkit-mask-image: url('icon-quote-rte.svg');
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: var(--color-foreground);
      width: 8.7rem;
      height: 5.4rem;
      z-index: 2;
    }
    &:after{
      content: '';
      position: absolute;
      inset-inline-start: 50%;
      inset-block-start: 0;
      transform: translate(-50%, -50%);
      padding: 1.2rem 2rem;
      width: 8.7rem;
      height: 5.4rem;
      z-index: 1;
      background-color: var(--color-background);
      border-radius: 50%;
    }
    > * {
      margin: -0.5rem 0 -0.5rem 0;
    }
  }

  .hdt-scrollable-wrapper {
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.1rem;
  }
  table:not(.not-style-table) {
    margin-bottom: 3.5rem;
    vertical-align: middle;
    text-align: start;
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    border-style: hidden;
    box-shadow: 0 0 0 0.1rem var(--color-line-border);
    border-radius: var(--rounded-sm);
    color: var(--color-foreground);
    overflow: hidden;
    :where(caption, th) {
      text-align: start;
    }
    :where(td, th) {
      padding: .7rem 1.5rem;
      border: 0.1rem solid var(--color-line-border);
    }
    thead :where(td, th) {
      background-color: color-mix(in srgb, var(--color-foreground2), transparent 90%);
      font-weight: var(--font-medium-or-bold);
    }
    th {
      font-weight: var(--font-medium-or-bold);
    }
  }
  /* :where(.rte--center,.rte--end) :is(ol,ul),
  :where(.hdt-text-center,.hdt-text-right,.hdt-text-end):not(.md\:hdt-text-center,.md\:hdt-text-right,.md\:hdt-text-end, .xl\:hdt-text-center,.xl\:hdt-text-right,.xl\:hdt-text-end) :is(ol,ul) {
    margin-inline-start: 0;
    list-style-position: inside;
  }
  @media (min-width: 767.98px) {
    :where(.hdt-text-center,.hdt-text-right,.hdt-text-end) .rte :is(ol,ul) {
      margin-inline-start: 0;
      list-style-position: inside;
    }
  }
  @media (min-width: 768px) {
    :where(.md\:hdt-text-center,.md\:hdt-text-right,.md\:hdt-text-end) .rte :is(ol,ul) {
      margin-inline-start: 0;
      list-style-position: inside;
    }
  }
  @media (min-width: 1150px) {
    :where(.xl\:hdt-text-center,.xl\:hdt-text-right,.xl\:hdt-text-end) .rte :is(ol,ul) {
      margin-inline-start: 0;
      list-style-position: inside;
    }
  } */

  /*================ 3.5. Media overlay Content ================*/
  .hdt-media-overlap-content {
    @layer themeh.styles.mobile.default {
    --media-overlap-content-gap-r: min(8vw, 50px);
    --media-overlap-content-gap-c: min(5vw, 50px);
    }
    @layer themeh.styles.tablet.default {
      --media-overlap-content-gap-r: min(5vw, 50px);
      --media-overlap-content-gap-c: min(5vw, 50px);
    }
    @layer themeh.styles.base.default {
      --media-overlap-content-gap-r: min(5vw, 50px);
      --media-overlap-content-gap-c: min(5vw, 50px);
    }
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template: [full-r-start] var(--media-overlap-content-gap-r) [content-r] minmax(0,1fr) var(--media-overlap-content-gap-r) [full-r-end] / [full-c-start] var(--media-overlap-content-gap-c) [content-c] minmax(0,1fr) var(--media-overlap-content-gap-c) [full-c-end];
    place-items: center;
    min-height: var(--media-overlap-content-h, auto);
  }
  .hdt-media-overlap-content > :is(picture, .hdt-media-wrapper) {
    display: contents;
  }
  .hdt-section__hero-media .hdt-media-wrapper >:is(img, video, iframe, svg, hdt-video) {
    aspect-ratio: var(--aspect-ratio, auto);
  }
  .hdt-media-overlap-content > :is(img, video, iframe, svg, hdt-video),
  .hdt-media-overlap-content > :is(picture, .hdt-media-wrapper) >:is(img, video, iframe, svg, hdt-video) {
    grid-area: full-r-start / full-c-start / full-r-end / full-c-end;
    height: var(--media-overlap-content-h, auto);
    min-height: 100%;
    max-height: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
  }
  .hdt-media-overlap-content > a {
    grid-area: full-r-start / full-c-start / full-r-end / full-c-end;
    z-index: 1;
    display: block;
    min-height: 100%;
    max-height: 100%;
    min-width: 100%;
  }
  .hdt-media-overlap-content > :not(img, video, iframe, svg, picture, .hdt-media-wrapper, a, hdt-video) {
    grid-area: content-r / content-c;
    position: relative;
    z-index: 2;
    max-width: var(--overlap-content-mw, 100%);
    width: 100%;
  }
  @media (min-width: 1150px) {
    .hdt-media-overlap-content--container {
      grid-template: [full-r-start] var(--media-overlap-content-gap-r) [content-r] minmax(0, 1fr) var(--media-overlap-content-gap-r) [full-r-end] / [full-c-start] var(--media-overlap-content-gap-c) [content-c] minmax(0, 1fr) [container] minmax(0, var(--container-max-width)) [content-c] minmax(0, 1fr) var(--media-overlap-content-gap-c) [full-c-end];
    }
    .hdt-media-overlap-content--container > :not(img, video, iframe, svg, picture, .hdt-media-wrapper, a, hdt-video) {
      grid-area: content-r / container;
    }
  }
  :where(hdt-video, hdt-video-hover) > :is(video, iframe,img) {
    position: absolute;
    inset: 0;
  }
  :where(hdt-video, hdt-video-hover) > :is(video,iframe,img) {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
  }
  :where(hdt-video, hdt-video-hover) > :is(video,img) {
    object-fit: cover;
    object-position: center;
  }
  :where(hdt-video, hdt-video-hover) > video[controls],
  .hdt-section__video :where(hdt-video, hdt-video-hover) > :is(video, iframe) {
    pointer-events: auto;
  }
  :where(hdt-video, hdt-video-hover)::part(control-play) {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    appearance: none;
    width: 5rem;
    height: 5rem;
    border-radius: var(--rounded-lg);
    background-color: var(--color-btn-primary);
    opacity: 0;
  }
  :where(hdt-video, hdt-video-hover)::part(control-play-icon) {
    color: var(--color-btn-secondary);
  }
  .hdt-media-overlap-content:before {
    content: "";
    position: absolute;
    top: 0;
    background: var(--color-overlay);
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .hdt-media-overlap-content:before {
    background: color-mix(in srgb, var(--color-overlay), transparent calc(100% - var(--color-overlay-opacity, 0)));
  }
  /* .hdt-media-content:not(.hdt-hide-bg-content) > .hdt-media-content-wrapp {
    max-width: var(--media-overlap-content-w, var(--container-max-width, 80rem));
    background-color: var(--color-background);
    background: var(--gradient-background);
    padding: var(--pading-media, 2.8rem 3rem 3.4rem);
    border-radius: var(--rounded-sm);
    display: inline-block;
  } */

  @media screen and (max-width: 767.98px) {
    .hdt-height--fixed {
      --media-overlap-content-h: var(--aspect-ratioapt, auto);
    }
    .hdt-height--full {
      --media-overlap-content-h: var(--hdt-fill-height);
    }
    .hdt-section:first-child .hdt-height--full {
      --media-overlap-content-h: var(--fill-height-first, calc(var(--hdt-fill-height) - (var(--header-height, 0px) * (1 - var(--hdt-logo-transparent))) - var(--header-group-height, 0px)))
    }
    .hdt-height--adapt_image_first.is-video {
      --aspect-ratioapt: 1.77777777778;
    }
    :is(.hdt-height--adapt_image, .hdt-height--adapt_image_first) .hdt-media-overlap-content > :is(img, video, iframe, svg, hdt-video),
    :is(.hdt-height--adapt_image, .hdt-height--adapt_image_first) .hdt-media-overlap-content > :is(picture, .hdt-media-wrapper) >:is(img, video, iframe, svg, hdt-video) {
      aspect-ratio: var(--aspect-ratioapt, auto);
    }
    @supports not (aspect-ratio: 1) {
      :is(.hdt-height--adapt_image, .hdt-height--adapt_image_first) .hdt-media-overlap-content > :is(.hdt-media-wrapper, picture, hdt-video):before {
        content: "";
        padding-block-end: calc(100% / var(--aspect-ratioapt));
        display: block;
        width: 0;
        height: 0;
        grid-area: full-r-start / full-c-start / full-r-end / full-c-end;
      }
      :is(.hdt-height--adapt_image, .hdt-height--adapt_image_first) .hdt-media-overlap-content > :is(.hdt-media-wrapper, picture, hdt-video) > * {
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
      }
    }
  }
  @media screen and (min-width: 768px) {
    .md\:hdt-height--fixed {
      --media-overlap-content-h: var(--aspect-ratioapt-md, auto);
    }
    .md\:hdt-height--full {
      --media-overlap-content-h: var(--hdt-fill-height);
    }
    .hdt-section:first-child .md\:hdt-height--full {
      --media-overlap-content-h: var(--fill-height-first, calc(var(--hdt-fill-height) - (var(--header-height, 0px) * (1 - var(--hdt-logo-transparent))) - var(--header-group-height, 0px)))
    }
    .md\:hdt-height--adapt_image_first.is-video {
      --aspect-ratioapt-md: 1.77777777778;
    }
    :is(.md\:hdt-height--adapt_image, .md\:hdt-height--adapt_image_first) .hdt-media-overlap-content > :is(img, video, iframe, svg, hdt-video),
    :is(.md\:hdt-height--adapt_image, .md\:hdt-height--adapt_image_first) .hdt-media-overlap-content > :is(picture, .hdt-media-wrapper) >:is(img, video, iframe, svg, hdt-video) {
      aspect-ratio: var(--aspect-ratioapt-md, auto);
    }
    @supports not (aspect-ratio: 1) {
      :is(.md\:hdt-height--adapt_image, .md\:hdt-height--adapt_image_first) .hdt-media-overlap-content > :is(.hdt-media-wrapper, picture, hdt-video):before {
        content: "";
        padding-block-end: calc(100% / var(--aspect-ratioapt-md));
        display: block;
        grid-area: full-r-start / full-c-start / full-r-end / full-c-end;
      }
      :is(.md\:hdt-height--adapt_image, .md\:hdt-height--adapt_image_first) .hdt-media-overlap-content > :is(.hdt-media-wrapper, picture, hdt-video) > * {
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
      }
    }
  }

  /*================ 3.6. Buttons ================*/
  .hdt-btn, .hdt-btn-link{
    font-size: var(--font-size-button, var(--text-lg));
    letter-spacing: var(--font-body-spacing);
    line-height: var(--button-line-height);
    font-weight: var(--font-medium);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    &.hdt-btn--with-icon{
      --height-btn-icon: calc(var(--font-size-button) * 1.286);
      .hdt-inner-btn{
        gap: var(--gap-btn-icon, 0.8rem);
      }
      svg:not(.hdt-icon-graphic--slide){
        width: auto;
        height: var(--height-btn-icon, 2rem);
      }
    }
    &.hdt-btn--with-icon.hdt-btn--icon-left .hdt-inner-btn{
      flex-direction: row-reverse;
    }
    &.hdt-uppercase{
      font-size: calc(var(--font-size-button, var(--text-lg)) - 0.2rem );
      letter-spacing: calc((var(--font-size-button, var(--text-lg)) - 0.2rem) * .1);
    }
  }
  .hdt-btn{
    display: inline-flex;
    align-items: center;
    border-radius: var(--rounded-button);
    --color-icon-btn: var(--color-btn-primary);
    --color-button-border: var(--color-btn-primary);
    color: var(--color-btn-secondary);
    padding: var(--padding-button, 1rem 2rem);
    min-height: var(--height-btn, 4.4rem);
    border: var(--thickness-btn) solid var(--color-button-border);
    background-color: var(--color-btn-primary);
    &[circle-bg-wrap]{
      clip-path: inset(0px round var(--rounded-button));
      &:focus-visible{
        clip-path: unset;
        overflow: hidden;
      }
    }
    &.hdt-btn--with-icon{
      gap: var(--gap-btn-icon, 0.8rem);
      &.hdt-btn--inner{gap: 0;}
    }
    &.hdt-btn--inner{
      padding: 0;
      min-height: auto;
      border:none;
      background-color: transparent;
      .hdt-inner-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--padding-button, 1rem 2rem);
        min-height: var(--height-btn, 4.4rem);
        border-radius: var(--rounded-button);
        clip-path: inset(0px round var(--rounded-button));
        min-width: 100%;
        border: var(--thickness-btn) solid var(--color-button-border);
        color: inherit;
        background-color: var(--color-btn-primary);
        transition: color 0.3s;
      }
    }
    &.hdt-btn-outline{
      --color-icon-btn: var(--color-background);
      --thickness-btn: 1px;
      color: var(--color-btn-primary);
      background: transparent;
      .hdt-inner-btn{
        background-color: transparent;
      }
    }    
    hdt-circle-bg{
      background-color: var(--color-btn-primary-hover);
    }
  }
  .hdt-btn-link{
    --color-icon-btn: var(--color-btn-secondary);
    .hdt-inner-btn{display: contents}
    &.hdt-btn--with-icon{
      gap: var(--gap-btn-icon, 0.8rem);
    }
  }
  .hdt-btn--size-s{
    --height-btn: 3.6rem;
    --padding-button: 0.6rem 2.4rem;
    --font-size-button: var(--text-base);
    --gap-btn-icon: 0.6rem;
    --transtextY: 50%
  }
  .hdt-btn--size-l{
    --height-btn: 5.2rem;
    --padding-button: 1.4rem 2.8rem;
    --font-size-button: var(--text-xl);
    --gap-btn-icon: 1rem;
    --transtextY: 80%
  }
  .hdt-btn-link{
    position: relative;
    color: var(--color-foreground);
    overflow: hidden;
    padding: 0.5rem 0;
    .hdt-icon-graphic {
      position: absolute;
      bottom: 0;
      inset-inline-start: 0;
      pointer-events: none;
      fill: none;
      stroke: var(--color-foreground);
      stroke-width: var(--svg-w, 2.5px);
      max-height: 3rem;
      max-width: none;
      transition: transform .7s;
      transition-timing-function: cubic-bezier(0,.25,.5,1);
    }
  }
  .hdt-btn-link.hdt-btn--with-icon{
    padding-block-end: 0.5rem;
  }
  .hdt-btn:disabled, .hdt-btn[aria-disabled=true],
  .hdt-btn-link:disabled, .hdt-btn-link[aria-disabled=true] {
    cursor: not-allowed;
    opacity: .5;
  }
  .hdt-link:not(.hdt-line-clamp){
    color: var(--color-foreground);
    position: relative;
    background: linear-gradient(to right,currentColor,currentColor) 0 100%/0 1px no-repeat;
    background-position-x: right;
    transition: background-size .5s cubic-bezier(.3, 1, .3, 1);
    display: inline;
  }
  .hdt-link-underline, .rte a:not(.hdt-line-clamp), .hdt-heading a, .hdt-marquee-item a {
      color: var(--color-foreground);
      display: inline;
      align-self: flex-start;
      background: linear-gradient(to right,currentColor,currentColor) 0 100%/100% 1px no-repeat;
      background-position-x: left;
      transition: background-size .5s cubic-bezier(.3, 1, .3, 1),color .3s .5s cubic-bezier(.3, 1, .3, 1);
  }
  .hdt-btn-effhover{
    overflow: hidden;
    position: relative;
    transition: transform 0.3s,color .3s, background-color .45s cubic-bezier(1,.007,1,.007);
    --color-btn-primary: transparent;
    --color-btn-secondary: var(--color-foreground);
    --color-btn-secondary-hover: var(--color-foreground);
    --color-btn-primary-hover: color-mix(in srgb, var(--color-foreground), transparent 92%);
    --color-icon-btn: var(--color-btn-primary);
    --rounded-block: var(--rounded-full);
    padding: var(--padding-button, 0.6rem 1.3rem);
    border: var(--thickness-block) solid var(--color-line-border);
    border-radius: var(--rounded-block);
    color: var(--color-btn-secondary);
    background: var(--color-btn-primary);
  }
  .hdt-btn-effect--none hdt-circle-bg,
  .hdt-btn-effect--fade hdt-circle-bg{
    display: none;
  }
  .hdt-btn-effect--none [circle-bg-wrap],
  .hdt-btn-effect--fade [circle-bg-wrap]{
    transform: unset!important;
  }
  .hdt-btn-effect--fade [circle-bg-wrap]{
    transition: background ease 0.3s, color ease 0.3s;
  }
  .hdt-media-wrapper{
    position: relative;
  }
  .hdt-btn-control_media {
    height: var(--hbtn, 3rem);
    width: var(--wbtn, 3rem);
    position: relative;
    display: grid;
    color: var(--color-foreground);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: var(--color-background);
    border-radius: var(--rounded-full);
    overflow: hidden;
    transition: all 0.3s;
    pointer-events: auto;
    cursor: pointer;
    align-self: center;
    &.hdt-btn-media-no-progress{
      border: 1px solid var(--color-line-border);
    }
    > span {
      grid-area: 1/1/2/2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      &.hdt-ic-pause-wrap svg, &.hdt-ic-play-wrap svg{
        max-width: 0.7rem;
      }
      &.hdt-ic-video_progress .hdt-icon-circle-progress{
        --cricle-width: 4px;
        width: 100%;
        height: 100%;
      }
    }
    &:focus-visible{
      outline-offset: -.1rem;
    }
  }
  .hdt-btn-video .hdt-ic-pause-wrap,
  .hdt-btn-video .hdt-ic-play-wrap{
    opacity: 0;
    visibility: hidden;
  }
  hdt-video:not([playing]) .hdt-btn-video .hdt-ic-play-wrap,
  hdt-video[playing] .hdt-btn-video .hdt-ic-pause-wrap {
    opacity: 1;
    visibility: visible;
  }
  hdt-video[playing] .hdt-ic-video_progress{
    --hdt-play-state: running;
  }
  hdt-video[data-loop="true"] .hdt-ic-video_progress{
    --hdt-play-infinite: infinite;
  }
  hdt-video[autoplay] .hdt-ic-video_progress .hdt-circle-progress{
    animation: circleProgress var(--hdt-media-duration, .5s) linear 0s var(--hdt-play-infinite, 1) both;
    animation-play-state: var(--hdt-play-state, paused);
  }
  hdt-video[not-controls-api] hdt-btn-video{display: none;}
.hdt-btn-ctrl_media-abs{
  position: absolute;
  z-index: 5;
  inset-inline-end: var(--pos-r, 1.6rem);
  inset-block-end: var(--pos-b, 1.9rem);
  &.hdt-pos-top {
    inset-block-end: auto;
    inset-inline-end: max(1rem, calc(var(--rounded)/2));
    inset-block-start: max(1rem, calc(var(--rounded)/2));
  }
  .hdt-btn-control_media{
    background: color-mix(in srgb, var(--color-foreground), transparent 80%);
  }
}
  .hdt-btn.hdt-btn--quickview {
    --height-btn: 2.1rem;
    --font-size-button: var(--text-xs);
    --padding-button: 0.3rem 0.8rem;
    --gap-btn-icon: 0.6rem;
    --height-btn-icon: 0.7rem;
    font-weight: var(--font-medium-or-bold);
  }
  .hdt-btn-full-width {
    width: 100%;
  }
  /*================ 3.7. Input, textarea, select, checkbox, radio ================*/

[type='checkbox'],
[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  position: relative;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-shrink: 0;
  height: var(--size-checkbox, 2rem);
  width: var(--size-checkbox, 2rem);
  color: var(--color-foreground);
  background-color: var(--color-background);
  border-color: color-mix(in srgb, var(--color-foreground), transparent 85%);
  border-width: 1px;
  & + label{
    margin-inline-start: 0.5rem;   
    margin-inline-end: 1.5rem;
  }
}
[type='checkbox'] {
  border-radius: min(calc(var(--rounded-input) * .5), 0.3rem);
  transition: border-color 0.3s ease;
  &:after{
    content: "";
    border-radius: min(calc(var(--rounded-input) * .5),.2rem);
    background: currentColor;
    position: absolute;
    inset: 0.3rem;
    transform: scale(0);
    transition: transform 0.3s ease;
  }
  &:checked:after{
    transform: scale(1);
  }
  &:indeterminate {
    box-shadow: inset 0 0.5em 0 0 var(--color-background), inset 0 -0.5em 0 0 var(--color-background), inset -0.3rem 0em 0 0 var(--color-background), inset 0.3rem 0em 0 0 var(--color-background);
    background-color: currentColor;
  }

  &:indeterminate:hover,
  &:indeterminate:focus {
    background-color: currentColor;
  }
  &:checked {
    border-color: currentColor;
  }
  &:checked:focus {
    border-color: currentColor;
  }
  @media (forced-colors: active) {
    &:checked,
    &:indeterminate {
      -webkit-appearance: auto;
      -moz-appearance: auto;
      appearance: auto;
    }
  }
}
[type='radio'] {
  border-radius: 100%;
  &:after{
    content: "";
    border-radius: min(calc(var(--rounded-input) * .5),.2rem);
    background: currentColor;
    position: absolute;
    inset: 0.4rem;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-radius: inherit;
  }
  &:checked:after{
    opacity: 1;
    transform: scale(1);
  }
  @media (forced-colors: active) {
    &:checked {
      -webkit-appearance: auto;
      -moz-appearance: auto;
      appearance: auto;
    }
  }
}
:where(.hdt-input, .hdt-textarea, .hdt-select) {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--rounded-input);
  background: var(--input-background, transparent);
  color: var(--color-input-text, var(--color-foreground));
  text-align: start;
  border: 1px solid var(--color-line-border);
  height: var(--height-input);
  padding: var(--padding-block-input) var(--padding-inline-input);
  transition: border-color .1s ease-in-out;
}
.hdt-textarea {
  min-height: 4lh;
  height: auto;
}
.hdt-select {
  padding-inline-start: 1.5rem;
  padding-inline-end: 3rem;
}
.hdt-select ~ svg {
  pointer-events: none;
  position: absolute;
  inset-inline-end: 1rem;
  width: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .25s ease;
  will-change: transform;
}
.hdt-select[aria-expanded="true"] ~ svg {
  transform: translateY(-50%) rotate(180deg);
}
:is(.hdt-input:focus,.hdt-textarea:focus,.hdt-select:focus-visible) {
  border-color: var(--color-focus);
  outline: none;
}
.is-uncheck :is(input, textarea) {
  border-color: var(--color-error-text) !important;
}

  :where(.hdt-input, .hdt-textarea, .hdt-select) {
    margin-block-start: 1.2rem;
  }
  select {
    option {
      background-color: var(--color-background);
    }
  }
.hdt-form--effect-text .hdt-field{
  display: grid;
  grid-template: "input btn"/ 1fr auto;
  margin-block-start: 1.2rem;
  label{
    grid-area: input;
    padding: var(--spacing-1-4) var(--padding-inline-input);
    pointer-events: none;
  }
  .hdt-field__input{
    grid-area: input;
    margin-block-start: 0;
  }
}
  /* Input */
  input[type="text"], input[type="number"], input[type="tel"],
  input[type="email"], input[type="password"], input[type="search"], .hdt-select, select, textarea{
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--rounded-input);
    background-color: var(--input-background, transparent);
    color: var(--color-input-text, var(--color-foreground));
    text-align: start;
    border: 1px solid var(--color-line-border);
    height: var(--height-input);
    padding: var(--padding-block-input) var(--padding-inline-input);
    transition: border-color .1s ease-in-out;
  }
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-foreground)!important;
    caret-color: var(--color-foreground)!important;
    color: var(--color-foreground)!important;
    transition: background-color 50000s ease-in-out 0s;
  }
  button.hdt-select{
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:after{
      content: "";
      width: 20px;
      height: 100%;
      background-color: var(--color-foreground);
      mask: url(icon-select-arrow.svg) no-repeat center/11px;
      -webkit-mask: url(icon-select-arrow.svg) no-repeat center/11px;
      pointer-events: none;
      transition: transform 0.3s ease;
    }
    &[aria-expanded="true"]:after{
      transform: rotate(180deg);
    }
  }

  .hdt-field--input-btn-group {
    display: inline-grid;
    grid-template-columns: 1fr auto;
    padding: 0.6rem;
    column-gap: 0.5rem;
    .hdt-input {
      grid-area: 1 / 1 / 2 / 3;
      margin: 0;
      border-radius: calc(var(--rounded-input) + 0.4rem);
      background: transparent;
      padding-block: 0;
      max-height: calc(var(--height-input) - 1.2rem)
    }
    .hdt-btn {
      grid-area: 1 / 2 / 2 / 3;
      z-index: 1;
      margin: 0rem !important;
      min-height: 100%;
      place-self: center end;
      --rounded-button: var(--rounded-input)
    }
    &.hdt-field--with-error {
      .hdt-form-field__msg {
        grid-area: 2 / 1 / 3 / 3;
        margin-top: .8rem;
      }
    }
  }
  /* Table responsive */
  @media (max-width: 767px) {
    .hdt-table--responsive thead, .hdt-table--responsive th, .hdt-table--responsive tfoot th:first-of-type {
      display: none;
    }
    .hdt-table--responsive {
      border: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      tbody {
        display: grid;
        gap: 1.5rem;
        border: none;
        > tr {
          display: grid;
          border: 1px solid rgb(var(--color-line-border));
          border-radius: var(--rounded-sm);
          overflow: hidden;
        }
        tr > :where(th, td) {
          display: flex;
          gap: 1rem;
          border-top: none !important;
          border-right: none !important;
          border-bottom: 1px solid rgb(var(--color-line-border)) !important;
          border-left: none !important;
          &:last-child {
            border-bottom: none !important;
          }
        }
      }
      tr > td:before {
        color: rgba(var(--color-foreground));
        content: attr(data-label);
        flex-grow: 1;
        text-align: start;
        font-weight: var(--font-bold);
      }
      tfoot {
        display: grid;
        border: none;
        margin-top: 3rem;
        > tr {
          display: grid;
          :where(th, td) {
            display: flex;
            gap: 1rem;
            border: none;
            padding: .5rem 0;
          }
        }
      }
    }
  }
  .hdt-form--move-text .hdt-field {
    display: grid;
    grid: "input btn" / 1fr auto;
    place-content: start;
    background: var(--input-background, transparent);
    border-radius: var(--rounded-input);
    border: 1px solid var(--color-line-border);
    align-items: center;
    margin-block-start: 1.2rem;
    &.hdt-contact__custom-field--options{
      display: flex;
      flex-direction: column;
      background: transparent;
      border-radius: 0;
      border: none;
      align-items: flex-start;
    }
    &:has(.hdt-textarea, textarea){
      border-radius: min(var(--rounded-input), 1rem)
    }
    &.hdt-field--checkbox{
      border: none;
      text-align: left;
    }
    .hdt-field__input, > .hdt-select{
      grid-area: input;
      height: var(--height-input);
      border: none;
      margin: 0;
      padding-inline-end: calc(var(--padding-inline-input) + 1rem);
    }
    textarea{
      border: none;
      margin: 0;
    }
    &:focus-within{
      outline: none;
      border-color: var(--color-focus);
    }
    > :where(.hdt-field-icon.hdt-field-icon--end){
      display: grid;
      grid-area: btn;
      place-self: center end;
      svg{
        grid-area: 2 / 2 / 2 / -1;
        place-self: center;
      }
      padding-inline-end: var(--padding-inline-input);
    }
  }
.hdt-show-pw {
  > * {
    transition: transform .3s ease;
    cursor: pointer;
    + * {
      transform: scale(0);
    }
  }
  &[display-password] {
    > *{
      transform: scale(0);
      + *{
        transform: scale(1);
      }
    }
  }
}
  /*================ 3.8. Pagination ================*/
  .hdt-pagination-wrapper {
    margin-top: var(--hdt-pagi-mt, 4.5rem);
    text-align: center;
  }
  .hdt-pagination__list{
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    .hdt-pagination__item{
      width: 4rem;
      height: 4rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      --padding-button: 0;
      --thickness-block: 1px;
      overflow: hidden;
      position: relative;
      &.hdt-pagination__item--current{
        color: var(--color-background);;
        background-color: var(--color-foreground);
        border-radius: var(--rounded-full);
      }
    }
    span.hdt-pagination__item{pointer-events: none;}
  }
  /*================ 3.9. Socials ================*/
  .hdt-social-links {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--link-gap, 3rem);
    flex-wrap: wrap;
    flex-direction: row;
    > a {
      position: relative;
      flex: none;
      display: inline-flex;
      height: var(--icon-size);
      color: var(--color-foreground);
      transition: all 0.3s;
      svg {
        height: 100%;
        width: auto;
      }
    }
    svg {
      position: relative;
      z-index: 2;
    }
  }
  .hdt-social-links--icon-small {
    --icon-size: 1.4rem;
    --link-gap: 1.8rem;
  }
  .hdt-social-links--icon-medium {
    --icon-size: 1.8rem;
  }
  .hdt-social-links--icon-large {
    --icon-size: 2.5rem;
  }

  /*================ 3.10. Alert ================*/
  .hdt-form__alert {
    text-align: start;
    color: var(--hdt-alert-color, var(--color-success-text));
    background-color: color-mix(in srgb, var(--hdt-alert-color, var(--color-success-text)), transparent 90%);
    border-inline-start: 0.3rem solid var(--hdt-alert-color, var(--color-success-text));
    border-radius: var(--rounded-2xs);
    padding-block: 2rem;
    padding-inline: 2rem;
    margin-bottom: 2rem;
  }
  .hdt-form__alert > span, .hdt-form-alert__title {
    display: inline-flex;
    align-items: baseline;
    gap: .8rem
  }
  .hdt-form__alert svg {
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    position: relative;
    top: .2rem;
  }
  .hdt-form-alert__title svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .hdt-form__alert a {
    color: var(--hdt-alert-color);
  }
  .hdt-form__alert > ul {
    display: grid;
    gap: .5rem;
    list-style: disc;
    padding-inline-start: 2rem;
  }
  .hdt-form__alert--error {
    --hdt-alert-color: var(--color-error-text);
  }
  .hdt-form__alert--warning {
    --hdt-alert-color: var(--color-warning-text);
  }
  .hdt-form-alert__title {
    margin-bottom: 1rem;
    color: var(--hdt-alert-color);
  }
  p[data-spam-detection-disclaimer] {
    color: var(--color-foreground2);
  }
.hdt-form-field__msg {
  display: inline-flex;
  gap: .6rem;
  align-items: baseline;
  text-align: start;
  svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    position: relative;
    top: 0.2rem;
  }
}
  .hdt-form-field__msg span {
    place-self: center start;
  }
/* ==========================================================================
  4. THEME BLOCKS
========================================================================== */
  /* .hdt-fixed-grid {
    container: hdt-fixed-grid / inline-size;
  } */
  .hdt-fixed-grid>.hdt-row-grid {
    --hdt-grid-col-gap: var(--hdt-grid-col-gap-mb);
    --hdt-grid-row-gap: var(--hdt-grid-row-gap-mb);
    grid-template-columns: repeat(auto-fit, minmax(var(--hdt-grid-col-min), 1fr));
    grid-template-rows: auto;
    column-gap: var(--hdt-grid-col-gap, var(--spacing-x));
    row-gap: var(--hdt-grid-row-gap, var(--spacing-y));
    grid-template-columns: repeat(var(--hdt-grid-col-count, 2),  minmax(0, 1fr));
    --hdt-col-span: 1;
    --hdt-row-span: 1;
  }
  .hdt-fixed-grid.has-10-cols>.hdt-row-grid {
    --hdt-grid-col-count: 10
  }
  .hdt-fixed-grid.has-12-cols>.hdt-row-grid {
    --hdt-grid-col-count: 12;
  }
  .hdt-cell {
    grid-column-start: var(--hdt-col-start);
    grid-column-end: span var(--hdt-col-span);
    grid-row-start: var(--hdt-row-start);
    grid-row-end: span var(--hdt-row-span);
  }
  .hdt-col-span-1 {
    --hdt-col-span: 1;
  }
  .hdt-col-span-2 {
    --hdt-col-span: 2;
  }
  .hdt-col-span-3 {
    --hdt-col-span: 3;
  }
  .hdt-col-span-4 {
    --hdt-col-span: 4;
  }
  .hdt-col-span-5 {
    --hdt-col-span: 5;
  }
  .hdt-col-span-6 {
    --hdt-col-span: 6;
  }
  .hdt-col-span-7 {
    --hdt-col-span: 7;
  }
  .hdt-col-span-8 {
    --hdt-col-span: 8;
  }
  .hdt-col-span-9 {
    --hdt-col-span: 9;
  }
  .hdt-col-span-10 {
    --hdt-col-span: 10;
  }
  .hdt-col-span-11 {
    --hdt-col-span: 11;
  }
  .hdt-col-span-12 {
    --hdt-col-span: 12;
  }
  @media screen and (min-width: 768px) {
    .hdt-fixed-grid>.hdt-row-grid {
      --hdt-grid-col-gap: var(--hdt-grid-col-gap-md);
      --hdt-grid-row-gap: var(--hdt-grid-row-gap-md);
    }
    .md\:hdt-col-span-1 {
      --hdt-col-span: 1;
    }
    .md\:hdt-col-span-2 {
      --hdt-col-span: 2;
    }
    .md\:hdt-col-span-3 {
      --hdt-col-span: 3;
    }
    .md\:hdt-col-span-4 {
      --hdt-col-span: 4;
    }
    .md\:hdt-col-span-5 {
      --hdt-col-span: 5;
    }
    .md\:hdt-col-span-6 {
      --hdt-col-span: 6;
    }
    .md\:hdt-col-span-7 {
      --hdt-col-span: 7;
    }
    .md\:hdt-col-span-8 {
      --hdt-col-span: 8;
    }
    .md\:hdt-col-span-9 {
      --hdt-col-span: 9;
    }
    .md\:hdt-col-span-10 {
      --hdt-col-span: 10;
    }
    .md\:hdt-col-span-11 {
      --hdt-col-span: 11;
    }
    .md\:hdt-col-span-12 {
      --hdt-col-span: 12;
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-fixed-grid>.hdt-row-grid {
      --hdt-grid-col-gap: var(--hdt-grid-col-gap-lg);
      --hdt-grid-row-gap: var(--hdt-grid-row-gap-lg);
    }
    .xl\:hdt-col-span-1 {
      --hdt-col-span: 1;
    }
    .xl\:hdt-col-span-2 {
      --hdt-col-span: 2;
    }
    .xl\:hdt-col-span-3 {
      --hdt-col-span: 3;
    }
    .xl\:hdt-col-span-4 {
      --hdt-col-span: 4;
    }
    .xl\:hdt-col-span-5 {
      --hdt-col-span: 5;
    }
    .xl\:hdt-col-span-6 {
      --hdt-col-span: 6;
    }
    .xl\:hdt-col-span-7 {
      --hdt-col-span: 7;
    }
    .xl\:hdt-col-span-8 {
      --hdt-col-span: 8;
    }
    .xl\:hdt-col-span-9 {
      --hdt-col-span: 9;
    }
    .xl\:hdt-col-span-10 {
      --hdt-col-span: 10;
    }
    .xl\:hdt-col-span-11 {
      --hdt-col-span: 11;
    }
    .xl\:hdt-col-span-12 {
      --hdt-col-span: 12;
    }
  }

  .hdt-closest-block {
    display: grid;
    justify-items: center;
  }
  .hdt-closest-block:where(.hdt-text-start, .hdt-text-left) {
    justify-items: start;
  }
  .hdt-closest-block:where(.hdt-text-end, .hdt-text-right) {
    justify-items: end;
  }
   /* Label emoij */
   .hdt-label-emoij{
    color: var(--color-foreground);
    border: 1px solid var(--color-line-border);
    border-radius: var(--rounded-button);
    padding: 0.7rem var(--spacing-1-6);
    width: fit-content;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: inline-flex;
  }
  /* Space block */
  .hdt-theme-blocks__spacing-small {
    --hdt-block-el: 1rem;
    --hdt-block-btn: 1.5rem;
  }
  .hdt-theme-block, .hdt-btn{
    --hdt-block-el: 0.8rem;
    --hdt-block-btn: 1.7rem;
    --hdt-block-medium: 1.4rem;
    --hdt-block-hafl: 1.2rem;
    --hdt-block-space: 2.5rem;   
  }
  .hdt-theme-block + .hdt-theme-block{
    margin-block-start: var(--hdt-block-space);
  }
  .hdt-label-emoij + .hdt-heading-block{
    margin-block-start: var(--hdt-block-medium);
  }
  .hdt-theme-block + .hdt-text-block{
    margin-block-start: var(--hdt-block-btn);
  }
  .hdt-text-block + .hdt-theme-block{
    margin-block-start: var(--hdt-block-btn);
  }
  .hdt-text-block + .hdt-text-block{
    margin-block-start: var(--hdt-block-hafl);
  }
  .hdt-heading-block + .hdt-theme-block{
    margin-block-start: var(--hdt-block-medium);
  }
  .hdt-subtext-block + .hdt-heading-block,
  .hdt-text-block + .hdt-heading-block,
  .hdt-heading-block + .hdt-text-block{
    margin-block-start: var(--hdt-block-el);
  }
  .hdt-theme-block  + .hdt-btn{
   margin-block-start: var(--hdt-block-space);
  }
  .hdt-text-block  + .hdt-btn{
    margin-block-start: var(--hdt-block-btn);
  }
 
  @media screen and (min-width: 768px) {
    .hdt-theme-block {
      --hdt-block-el: 1.1rem;
      --hdt-block-btn: 2.2rem;
      --hdt-block-medium: 1.8rem;
      --hdt-block-hafl: 1.5rem;
      --hdt-block-space: 3rem;   
    }
    .hdt-theme-blocks__spacing-small .hdt-theme-block {
      --hdt-block-el: 1rem;
      --hdt-block-btn: 1.5rem;
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-theme-blocks__spacing-small .hdt-group-button-block {
      --hdt-block-btn: 2.5rem;
    }
  }

  /* Row block */
  .hdt-row-block {
    width: 100%;
    max-width: var(--max-w-row, inherit);
    margin: 0 auto;
  }

  /* Column block */
.hdt-column-block {
  --pd-t-col: var(--pd-t-col-mb);
  --pd-b-col: var(--pd-b-col-mb);
  --pd-l-col: var(--pd-l-col-mb);
  --pd-r-col: var(--pd-r-col-mb);
  display: grid;
  &:not(.hdt-column-block-overlay) {
    padding-block: var(--pd-t-col, 0px) var(--pd-b-col, 0px);
    padding-inline: var(--pd-l-col, 0px) var(--pd-r-col, 0px);
  }
}
  .hdt-column-block-overlay {
    grid-template: [full-r-start] var(--pd-t-col) [content-r] minmax(0, 1fr) var(--pd-b-col) [full-r-end] / [full-c-start] var(--pd-l-col) [content-c] minmax(0, 1fr) var(--pd-r-col) [full-c-end];
  }
  @media screen and (min-width: 768px) {
    .hdt-column-block {
      --pd-t-col: var(--pd-t-col-md);
      --pd-b-col: var(--pd-b-col-md);
      --pd-l-col: var(--pd-l-col-md);
      --pd-r-col: var(--pd-r-col-md);
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-column-block {
      --pd-t-col: var(--pd-t-col-xl);
      --pd-b-col: var(--pd-b-col-xl);
      --pd-l-col: var(--pd-l-col-xl);
      --pd-r-col: var(--pd-r-col-xl);
    }
  }
  .hdt-column-block-wrapp {
    width: 100%;
    max-width: var(--max-col, inherit) !important;
  }

  /* Spacer block */
  .hdt-spacer-block {
    height: var(--space);
  }
  @media (min-width: 768px) {
    .hdt-spacer-block {
      height: var(--space-md);
    }
  }
  @media (min-width: 1150px) {
    .hdt-spacer-block {
      height: var(--space-xl);
    }
  }
  /* Block heading */
  .hdt-closest-block {
    display: grid;
    justify-items: center;
  }
  /* Icon block */
  :where(.hdt-icon__type-square, .hdt-icon__type-cricle) {
    background-color: color-mix(in srgb, var(--color-foreground), transparent 95%);
    padding: min(2.2rem, calc(var(--icon-h)/3.3));
  }
  :where(.hdt-icon__type-cricle, .hdt-icon__type-border) {
    padding: min(2.5rem, calc(var(--icon-h)/3.3));
  }
  .hdt-icon__type-border {
    border: 2px solid var(--color-line-border);
  }
  :where(.hdt-icon__type-cricle, .hdt-icon__type-border),
  :is(.hdt-icon__type-cricle, .hdt-icon__type-border) img {
    border-radius: 50% !important;
  }
  .hdt-icon-block,
  .hdt-icon-wrapper {
    display: flex;
    fill: currentColor;
  }
  .hdt-icon-block > :where(svg, img) {
    --color-icon-btn: var(--color-background);
    width: auto;
    height: var(--height);
  }
  .hdt-icon-wrapper > :where(svg, img) {
    width: auto;
    height: var(--icon-h);
    min-width: var(--icon-mw, auto);
  }
  @media (min-width: 768px) {
    .hdt-icon-wrapper {
      --icon-h: var(--icon-h-md) !important;
    }
    .hdt-icon-block > :where(svg, img) {
      height: var(--height-md);
    }
    .hdt-icon-wrapper > :where(svg, img) {
      height: var(--icon-h-md);
      min-width: var(--icon-mw-md, auto);
    }
  }
  @media (min-width: 1150px) {
    .hdt-icon-block > :where(svg, img) {
      height: var(--height-xl, var(--height-md));
    }
    .hdt-icon-wrapper > :where(svg, img) {
      height: var(--icon-h-xl, var(--icon-h-md));
    }
  }

  /* Group button block */
  .hdt-group-button-block {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: calc(var(--gap-btns) * 0.8);
    justify-content: inherit;
    align-items: end;
    @media (min-width: 768px) {
      gap: var(--gap-btns);
    }
    &.hdt-has-btn-link {
      align-items: center;
    }
  }
  /* Image block */
  .hdt-image-block :where(img, svg) {
    width: 100%;
    height: auto;
    aspect-ratio: var(--aspect-ratio);
  }
  .hdt-image-block[custom-w] :where(img, svg) {
    max-width: var(--img-w);
  }
  @media (min-width: 768px) {
    .hdt-image-block[custom-w] :where(img, svg) {
      --img-w: var(--img-w-md);
    }
  }
  @media (min-width: 1150px) {
    .hdt-image-block[custom-w] :where(img, svg) {
      --img-w: var(--img-w-lg);
    }
  }

  /* Flex block - last  */
  .hdt-flex-block {
    display: flex;
  }
  :where(.hdt-text-center) .hdt-media-content-wrapp > .hdt-flex-block,
  :where(.hdt-text-center) > .hdt-flex-block {
    justify-content: center;
  }
  :where(.hdt-text-start, .hdt-text-left) .hdt-media-content-wrapp > .hdt-flex-block,
  :where(.hdt-text-start, .hdt-text-left) > .hdt-flex-block {
    justify-content: start;
  }
  :where(.hdt-text-end, .hdt-text-right) .hdt-media-content-wrapp > .hdt-flex-block,
  :where(.hdt-text-end, .hdt-text-right) > .hdt-flex-block {
    justify-content: end;
  }
  :where(.hdt-text-center) .hdt-media-content-wrapp > .hdt-flex-block.hdt-flex-col,
  :where(.hdt-text-center) > .hdt-flex-block.hdt-flex-col {
    align-items: center;
  }
  :where(.hdt-text-start, .hdt-text-left) .hdt-media-content-wrapp > .hdt-flex-block.hdt-flex-col,
  :where(.hdt-text-start, .hdt-text-left) > .hdt-flex-block.hdt-flex-col {
    align-items: start;
  }
  :where(.hdt-text-end, .hdt-text-right) .hdt-media-content-wrapp > .hdt-flex-block.hdt-flex-col,
  :where(.hdt-text-end, .hdt-text-right) > .hdt-flex-block.hdt-flex-col {
    align-items: end;
  }
  @media (min-width: 768px) {
    :where(.md\:hdt-text-center) .hdt-media-content-wrapp > .hdt-flex-block,
    :where(.md\:hdt-text-center) > .hdt-flex-block {
      justify-content: center;
    }
    :where(.md\:hdt-text-start, .md\:hdt-text-left) .hdt-media-content-wrapp > .hdt-flex-block,
    :where(.md\:hdt-text-start, .md\:hdt-text-left) > .hdt-flex-block {
      justify-content: start;
    }
    :where(.md\:hdt-text-end, .md\:hdt-text-right) .hdt-media-content-wrapp > .hdt-flex-block,
    :where(.md\:hdt-text-end, .md\:hdt-text-right) > .hdt-flex-block {
      justify-content: end;
    }
    :where(.md\:hdt-text-center) .hdt-media-content-wrapp > .hdt-flex-block.hdt-flex-col,
    :where(.md\:hdt-text-center) > .hdt-flex-block.hdt-flex-col {
      align-items: center;
    }
    :where(.md\:hdt-text-start, .md\:hdt-text-left) .hdt-media-content-wrapp > .hdt-flex-block.hdt-flex-col,
    :where(.md\:hdt-text-start, .md\:hdt-text-left) > .hdt-flex-block.hdt-flex-col {
      align-items: start;
    }
    :where(.md\:hdt-text-end, .md\:hdt-text-right) .hdt-media-content-wrapp > .hdt-flex-block.hdt-flex-col,
    :where(.md\:hdt-text-end, .md\:hdt-text-right) > .hdt-flex-block.hdt-flex-col {
      align-items: end;
    }
  }

  @media (min-width: 1150px) {
    :where(.xl\:hdt-text-center) .hdt-media-content-wrapp > .hdt-flex-block,
    :where(.xl\:hdt-text-center) > .hdt-flex-block {
      justify-content: center;
    }
    :where(.xl\:hdt-text-start, .xl\:hdt-text-left) .hdt-media-content-wrapp > .hdt-flex-block,
    :where(.xl\:hdt-text-start, .xl\:hdt-text-left) > .hdt-flex-block {
      justify-content: start;
    }
    :where(.xl\:hdt-text-end, .xl\:hdt-text-right) .hdt-media-content-wrapp > .hdt-flex-block,
    :where(.xl\:hdt-text-end, .xl\:hdt-text-right) > .hdt-flex-block {
      justify-content: end;
    }
    :where(.xl\:hdt-text-center) .hdt-media-content-wrapp > .hdt-flex-block.hdt-flex-col,
    :where(.xl\:hdt-text-center) > .hdt-flex-block.hdt-flex-col {
      align-items: center;
    }
    :where(.xl\:hdt-text-start, .xl\:hdt-text-left) .hdt-media-content-wrapp > .hdt-flex-block.hdt-flex-col,
    :where(.xl\:hdt-text-start, .xl\:hdt-text-left) > .hdt-flex-block.hdt-flex-col {
      align-items: start;
    }
    :where(.xl\:hdt-text-end, .xl\:hdt-text-right) .hdt-media-content-wrapp > .hdt-flex-block.hdt-flex-col,
    :where(.xl\:hdt-text-end, .xl\:hdt-text-right) > .hdt-flex-block.hdt-flex-col {
      align-items: end;
    }
  }
  /* Section header */
  .hdt-section-header, .hdt-section-title{
    margin-block-end: var(--header-bottom-margin, 2.8rem);
  }
  .hdt-section-header .hdt-section-title{
    margin-block-end: 0;
  }
  .hdt-section-title.hdt-section-title--b-fade .hdt-heading-block {
    mask-image: linear-gradient(to bottom, var(--color-foreground) 50%, transparent 100%);
  }
  .hdt-section-title .hdt-btn{
    width: fit-content;
    height: fit-content;
  }
  .hdt-title-horizontal{
    column-gap: var(--spacing-1);
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .hdt-section-title .hdt-inner-section-title {
    max-width: var(--title-custom-width, 100%);
    flex-direction: column;
  }
  .hdt-section-title:where(.hdt-text-left) .hdt-inner-section-title{
    margin-inline-start: 0;
  }
  .hdt-section-title:where(.hdt-text-center) .hdt-inner-section-title{
    margin-inline: auto;
  }
  .hdt-section-title:where(.hdt-text-right) .hdt-inner-section-title{
    margin-inline-start: auto;
  }
  .hdt-section-title:where(.hdt-text-center) .hdt-group-button-block{
    justify-content: center;
    align-items: center;
  }
  .hdt-section-title:where(.hdt-text-right) .hdt-group-button-block{
    justify-content: flex-end;
    align-items: flex-end;
  }
  .hdt-section-title:where(.hdt-text-left) .hdt-group-button-block{
    justify-content: flex-start;
    align-items: flex-start;
  }
  @media screen and (min-width: 768px) {
    .hdt-section-header, .hdt-section-title{
      margin-block-end: var(--header-bottom-margin-xl, 3.5rem);
    }
    .hdt-section-title:where(.md\:hdt-text-left) .hdt-group-button-block{
      justify-content: flex-start;
      align-items: flex-start;
    }
    .hdt-section-title:where(.md\:hdt-text-center) .hdt-group-button-block{
      justify-content: center;
      align-items: center;
    }
    .hdt-section-title:where(.md\:hdt-text-right) .hdt-group-button-block{
      justify-content: flex-end;
      align-items: flex-end;
    }
    .hdt-section-title:where(.md\:hdt-text-left) .hdt-inner-section-title{
      margin-inline-start: 0;
    }
    .hdt-section-title:where(.md\:hdt-text-center) .hdt-inner-section-title{
      margin-inline: auto;
    }
    .hdt-section-title:where(.md\:hdt-text-right) .hdt-inner-section-title{
      margin-inline-start: auto;
      margin-inline-end: 0;
    }
  }
  /* Countdown timer */
  hdt-countdown{
    --gap-cd: 0.6rem;
    display: inline-flex;
    align-items: center;
    text-align: center;
    gap: var(--gap-cd);
    color: var(--color-foreground);
  }
  hdt-countdown-item {
    position: relative;
    display: grid;
    gap: 1rem;
  }
  .hdt-countdown-timer-numbers {
    display: inline-flex;
    align-items: center;
    place-self: center;
    grid-area: 1 / -1;
  }
hdt-countdown-number{
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  &::part(numlist) {
    display: grid;
    pointer-events: none;
  }
  &::part(num) {
    grid-area: 1/-1;
  }
}
  span[part="tmp_num"] {
    grid-area: 1 / -1;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .hdt-coundtdown-box hdt-countdown-item {
    min-width: var(--w-countdown, 7rem);
    min-height: var(--h-countdown, 7.6rem);
    border-radius: var(--rounded-sm);
    padding: var(--spacing-0-6);
    color: var(--color-foreground);
    background: color-mix(in srgb, var(--color-foreground), transparent 60%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 60%);
    gap: 0;
  }
.hdt-coundtdown-inline{
  background: color-mix(in srgb, var(--color-foreground), transparent 60%);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 60%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 0.6rem 1rem;
  border-radius: var(--rounded-sm);
  justify-content: center;
  hdt-countdown-item{gap: 0}
  .hdt-countdown-timer-numbers,
  span[part=tmp_num]{
    grid-area: 1/1/2/2;
  }
  .hdt-countdown__text{
    grid-area: 1/2/2/3;
  }
}
  @media screen and (max-width: 575.98px) {
    hdt-countdown{
      --gap-cd: 0.4rem;
    }
    .hdt-coundtdown-box hdt-countdown-item {
      --w-countdown: 6rem;
      --h-countdown: 6rem;
      padding: var(--spacing-0-4);
    }
  }
  @media screen and (min-width: 768px) {
    .hdt-coundtdown-box hdt-countdown-item{
      --w-countdown: 10rem;
      --h-countdown: 10.6rem;
    }
    hdt-countdown{
      --gap-cd: 1rem;
    }
    .hdt-coundtdown-box hdt-countdown-item{
      padding: var(--spacing-1);
    }
    .hdt-coundtdown-inline{--gap-cd:0.5rem}
  }

/* ==========================================================================
  5. SECTIONS
========================================================================== */
  /*================ 5.1. Header ================*/
  .hdt-section-heade--main+#MainContent > .section-sp-transparent:first-child,
  .section-sp-transparent:first-child:not(:has(.hdt-section-header--main~.shopify-section-group-header-group)) {
    --gap-when-overlay-header: calc(var(--hdt-logo-transparent) * (var(--header-height, 0px) / 1.5));
    margin-block-start: calc(-1 * var(--hdt-logo-transparent) * var(--header-height));
  }
  .hdt-section-header--main~.shopify-section-group-header-group ~ #MainContent {
    > .section-sp-transparent:first-child {
      margin-block-start: 2.4rem;
    }
  }
  .section-sp-transparent:first-child .hdt-media-content {
    padding-top: var(--gap-when-overlay-header);
  }
  .hdt-nav-menu-open-backdrop {
    display: block;
    position: fixed;
    z-index: 4;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: calc(100vh + var(--header-height, 0px));
    pointer-events: none;
    background-color: color-mix(in srgb,var(--color-overlay),transparent 70%);
    transition: opacity .3s linear;
  }
  .hdt-section-header--main {
    .hdt-sticky-header {
      padding-block: 2rem;
      z-index: 5;
    }
    .hdt-sticky-header {
      &.hdt-header--full {
        .hdt-header-container {
          padding-block: 0;
          box-shadow: none;
          background: none;
        }
      }
      &.hdt-header--boxed {
        .hdt-header-container {
          box-shadow: inset 0 0 0 1px var(--color-line-border);
        }
        &.hdt-rounded-header {
          .hdt-header-container {
            border-radius: var(--rounded-full);
            transition: border-radius .3s linear, box-shadow .3s linear;
            &:has(.hdt-header__nav .hdt-mega-menu--mega[open]) { 
              border-radius: var(--rounded) var(--rounded) 0px 0px;
            }
          }
        }
      }
    }
    &.scrolled-past-header {
      .hdt-sticky-header {
        &.hdt-header--full {
          box-shadow: inset 0 -1px 0 var(--color-line-border);
        }
      }
    }
    .hdt-overlay-header-transparent {
      transition: background-color .3s linear;
    }
    .hdt-header--full:has(.hdt-header__nav .hdt-mega-menu[open]) {
      background: var(--color-background) !important;
      background: var(--gradient-background) !important;
      color: var(--color-foreground) !important;
    }
    &:not(.scrolled-past-header):has(~ #MainContent > .section-sp-transparent:first-child) {
      .hdt-overlay-header-transparent {
        background-color: transparent;
        &.hdt-header--boxed {
          .hdt-container--header-overlay {
            background: var(--color-background);
          }
        }
      }
    }
  }

  .scrolled-past-header:not(.shopify-section-header-hidden) {
    .hdt-sticky-header--glass {
      &.hdt-header--full, &.hdt-header--boxed > .hdt-header-container:not(:has(.hdt-mega-menu[open])) {
        background-color: color-mix(in srgb, var(--color-background), transparent 40%);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }
    }
  }
  .hdt-section-header--main.shopify-section-group-header-group {
    z-index: 32;
    --show-mega-duration: 0.4s;
    --hide-mega-duration: 0.2s;
  }
  .shopify-section-group-header-group.hdt-section-header--main {
    position: sticky;
    top: 0;
    margin-block-end: 0;
    &:has(.hdt-sticky-header[sticky-type="none"]) {
      position: relative;
    }
  }
  .hdt-sticky-header {
    position: relative;
    .hdt-header-container {
      padding: 1.5rem 0;
    }
    &[sticky-type="always"] {
      .hdt-header-container {
        padding: 1.5rem 0;
      }
    }
    &.hdt-overlay-header-solid {
      .hdt-header-container {
        padding: 1.5rem 2.5rem;
      }
    }
  }
  .hdt-sticky-header.hdt-overlay-header-solid .hdt-header-wrapper {
    padding: 0;
  }
  .scrolled-past-header .hdt-sticky-header .hdt-header-container {
    transition: box-shadow 0.32s linear;
    border-color: transparent;
    box-shadow: 0 4px 24px 0 color-mix(in srgb, var(--color-foreground, transparent), transparent 90%), 0 1.5px 5px 0 color-mix(in srgb, var(--color-foreground, transparent), transparent 95%);
  }
  .scrolled-past-header.shopify-section-header-hidden .hdt-sticky-header .hdt-header-container {
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0), 0 1.5px 5px 0 rgba(0,0,0,0);
  }
  .shopify-section-group-header-group.hdt-mega-content-is-showing .hdt-sticky-header .hdt-header-container,
  .shopify-section-group-header-group:has(.hdt-header__inline-menu .hdt-header__inline-list .hdt-mega-menu[open]) .hdt-header-container {
    box-shadow: none;
  }
  .shopify-section-group-header-group .hdt-sticky-header .hdt-nav-menu-bg-eff {
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0), 0 1.5px 5px 0 rgba(0,0,0,0);
  }
  .shopify-section-group-header-group.hdt-mega-content-is-showing .hdt-sticky-header .hdt-nav-menu-bg-eff {
    box-shadow: 0 4px 24px 0 color-mix(in srgb, var(--color-foreground, transparent), transparent 80%), 0 1.5px 5px 0 color-mix(in srgb, var(--color-foreground, transparent), transparent 90%);
  }
.hdt-header-container {
  padding-inline: 0;
  position: relative;
  z-index: 6;
  /* max-width: calc(100% - var(--pd-container, 3rem) * 2); */
  &.hdt-container-xl {
    max-width: calc(100% - var(--header-p-minus, 3rem));
    @media (max-width: 479.98px) {
      max-width: calc(100% - var(--header-p-minus, 3rem));
    }
  }
  &.hdt-container {
    max-width: calc(100% - 3rem);
  }
}
  .scrolled-past-header {
    --hdt-logo-transparent: 0;
    top: 0;
  }
  .hdt-section-header--main.shopify-section-header-hidden {
    transform: translateY(calc(-1 * var(--header-height)));
  }
  .hdt-section-header--main {
    will-change: transform;
    transition: transform 0.3s linear;
  }
  .hdt-header-wrapper {
    display: grid;
    grid: var(--header-layout);
    gap: 1.4rem;
  }
  .hdt-header__logo {
    grid-area: logo;
    justify-self: var(--logo-justify, start);
    
    display: inline-flex;
    align-items: center;
    .header__logo-img--transparent {
      + .header__logo-img {
        display: none;
      }
    }
    .header__logo-img-wrapper {
      img {
        width: var(--logo-width-mobile);
        max-width: 100%;
        height: auto;
        transition: opacity .2s;
      }
      @media (min-width: 1024px) {
        img {
          width: var(--logo-width);
        }
      }
    }
  }
  .hdt-section-header--main {
    &.scrolled-past-header, &:has(.hdt-header__nav .hdt-mega-menu[open], .hdt-header__nav .hdt-maybe-closing) {
      .hdt-header__logo {
        .header__logo-img--transparent {
          display: none;
          + .header__logo-img {
            display: block;
          }
        }
      }
    }
  }
  .hdt-header__nav {
    grid-area: nav;
    justify-self: var(--nav-justify, auto);;
  }
  .hdt-header__icons {
    grid-area: icons;
    justify-self: var(--icons-justify, end);;
  }
  .hdt-header__menu-item {
    font-weight: var(--font-medium-or-bold);
    position: relative;
    font-size: var(--text-lg);
  }
  .hdt-header__style-uppercase .hdt-header__menu-item {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: calc(var(--text-sm) * 0.1);
  }

  .hdt-header__font-heading .hdt-header__menu-item {
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
  }

  .hdt-header__icons-wrapper {
    gap: 1rem;
    > * {
      flex: none;
    }
    @media (min-width: 768px) {
      gap: 2rem;
    }
  }

  .hdt-cart-bubble {
    :where(hdt-cart-count, hdt-cart-dot) {
      --cart-bubble-size: 1rem;
      --cart-bubble-top:  0rem;
      --cart-bubble-right: -0.3rem;
      aspect-ratio: 1;
      border-radius: 50%;
      display: flex;
      line-height: 1;
      align-items: center;
      justify-content: center;
      z-index: var(--layer-flat);
      width: var(--cart-bubble-size, 2rem);
      top: var(--cart-bubble-top);
      inset-inline-end: var(--cart-bubble-right);
      color: var(--color-background);
      background: var(--color-foreground);
      border: 1px solid var(--color-background);
      transform: scale(0);
      transition: transform .2s ease-in-out;
      &.is-visible {
        transform: scale(1);
      }
    }
    hdt-cart-count {
      --cart-bubble-size: 1.6rem;
      --cart-bubble-top: -.6rem;
      --cart-bubble-right: -.8rem;
      font-size: .9rem;
      font-weight: var(--font-medium-or-bold);
    }
    @media (max-width: 767.98px) {
      &[cart-badge-mobile="none"] :is(hdt-cart-count, hdt-cart-dot),
      &[cart-badge-mobile="dot"] hdt-cart-count,
      &[cart-badge-mobile="count"] hdt-cart-dot {
        display: none;
      }
    }
    @media (min-width: 768px) {
      .hdt-header-wrapper {
        gap: 2.8rem;
      }
      &[cart-badge="none"] :is(hdt-cart-count, hdt-cart-dot),
      &[cart-badge="dot"] hdt-cart-count,
      &[cart-badge="count"] hdt-cart-dot {
        display: none;
      }
      hdt-cart-count {
        --cart-bubble-size: 2.4rem;
        --cart-bubble-top: -1rem;
        --cart-bubble-right: -1.5rem;
        font-size: var(--text-xs);
      }
    }
  }

  .hdt-section-separator {
    box-shadow: 0 1px var(--color-line-border) inset;
  }
  .hdt-section-separator-bottom {
    box-shadow: 0 -1px var(--color-line-border) inset;
  }
.hdt-slider-announcement {
  max-width: var(--announcement-mw, 100%);
  margin: 0 auto;
  padding-inline: 5rem;
  position: relative;
  .hdt-slider__container {
    align-items: center;
  }
}

  .hdt-section-toolbar {
    z-index: 33;
    &:has(+ .scrolled-past-header) {
      z-index: 1;
    }
  }

  .hdt-toolbar-parts {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 4rem;
    padding-block: .5rem;
  }
.hdt-toolbar-part {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  &.hdt-toolbar-part--menu {
    gap: 1.4rem;
  }
}
.hdt-toolbar__menu{
  font-weight: var(--font-medium);
  .hdt-shape-block {
    --fs: 1rem;
  }
}

  .hdt-toolbar__menu :where(.hdt-shape__circle, .hdt-shape__square, .hdt-shape__diamond) {
    margin-inline: .6rem;
  }

  .hdt-toolbar__menu.hdt-toolbar__menu--shape-none {
    gap: 1.4rem;
  }

.hdt-toolbar-part .hdt-btn--toolbar {
  --height-btn: 2rem;
  --padding-button: .2rem 1.2rem;
  --font-size-button: var(--text-sm);
  &.hdt-btn--with-icon svg {
    width: auto;
    height: .5rem;
  }
}

.hdt-toolbar-part .hdt-localization-selector-wrap {
  display: none;
  .hdt-localization-selector {
    height: 2.6rem;
    padding: 0 0.8rem 0 0.3rem;
    vertical-align: middle;
  }
}

  .hdt-toolbar-part--social, .hdt-toolbar-part--text {
    display: none;
  }

  .hdt-nav-hover-effect {
    display: flex;
    align-items: center;
  }

  .hdt-header__inline-list .hdt-header__menu-item {
    display: inline;
  }

  .hdt-nav-hover-effect .hdt-header__inline-list > li > .hdt-header__menu-item, .hdt-nav-hover-effect .hdt-header__inline-list > li summary.hdt-header__menu-item {
    display: flex;
    align-items: center;
    padding-block: .55rem;
    min-height: 3rem;
  }

  summary.hdt-header__menu-item:before {
    position: absolute;
    top: calc(100% - 1px);
    inset-inline-start: -2rem;
    content: "";
    z-index: 1;
    width: calc(100% + 4rem);
    height: 1.6rem;
    opacity: 0;
  }

  .hdt-mega-menu__content {
    inset-inline: 0;
    top: 100%;
    pointer-events: none;
    min-height: 20rem;
    max-height: calc(100vh - var(--header-height) - 20px);
    padding-block: 3.2rem 4.4rem;
    font-weight: var(--font-medium-or-bold);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 10;
    .hdt-card-product {
      .hdt-card-product__media {
        margin-block-end: 1rem;
        .hdt-group-btn-quickadd{
          flex-direction: column;
          @media (min-width: 1150px) and (max-width: 1399.98px) {
            .hdt-product-card-btn{
              --font-size-button: var(--text-sm);
              --padding-button: 0.4rem 1.8rem;
              height: 3.2rem
            }
          }
        }
      }
      .hdt-card-product__content{
        --sw-w: 1.9rem;
        --sw-pd: 0.3rem;
        gap: 0.2rem;
        .hdt-card-product__title{line-height: 1.6rem;}
        .hdt-price-wrapp {
          margin-top: 0.4rem;
          line-height: 1.7rem;
        }
        wrapp-hdt-swatches {
          margin-block-start: .5rem;
          line-height: 1;
          .hdt-color-list__item:not(:first-child){margin-inline-start: 0.8rem;}
        }
      }
    }
    [circle-bg-wrap]{overflow: hidden;}
    &.hdt-mega-menu--mega_collection {
      padding-block: 2.7rem 4.4rem;
    }
  }

  .hdt-mn-item-bg, .hdt-menu-eff-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: color-mix(in srgb, var(--color-foreground, transparent), transparent 85%);
    border-radius: var(--rounded);
    opacity: 0;
    z-index: 0;
    transform: scale(0.85);
    pointer-events: none;
    transition:
      width 0.28s linear,
      height 0.28s linear,
      transform 0.38s linear,
      opacity 0.18s linear;
  }

  .hdt-nav-menu-bg-eff {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: inset(0 0 0 0 round 0);
  }

  header {
    .hdt-localization-selector-wrap {
      display: none;
      .hdt-localization-selector {
        background: none;
      }
    }
    .hdt-localization-selector-wrap--drawer {
      display: block;
    }
  }

  .hdt-country-filter {
    width: 100%;
    .hdt-field {
      display: grid;
      grid: "input btn" / 1fr auto;
      place-content: start;
      background: var(--input-background, transparent);
      border-radius: var(--rounded-input);
      border: 1px solid var(--color-line-border);
      align-items: center;
      margin-block: 0;
      .hdt-input--search {
        grid-area: input;
        height: 100%;
        border: none;
        padding-inline: var(--padding-inline-input) 0;
      }
    }
    .hdt-country-filter__reset-button {
      width: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      &.hidden {
        opacity: 0;
      }
    }
  }

  .hdt-disclosure--group {
    --gap: 2rem;
    padding-block: var(--gap);
    .hdt-popover__header {
      border-bottom: 0;
      margin-bottom: 0;
      padding: 1rem var(--padding-x);
    }
    .hdt-disclosure__item {
      padding-inline: var(--gap);
    }
    button.hdt-disclosure__item[aria-selected=true] svg {
      margin-inline-start: auto;
    }
    .hdt-country-selector-label {
      padding-block: 1rem;
    }
    .hdt-language-selector-label {
      border-top: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
      padding: 1.5rem var(--gap) 1rem;
    }
    .hdt-country-selector__list {
      margin-bottom: 1rem;
    }
    &[data-language="true"][data-country="true"] {
      &:not([open-as-modal]) {
        --gap: 2rem;
      }
      .hdt-popover__header {
        padding: 0 var(--gap);
        border-bottom: 0;
        margin-bottom: 1.2rem;
      }
      .hdt-popover__inner--country {
        max-height: 38vh;
        @media (min-width: 1024px) and  (max-width: 1149.98px) {
          max-height: 32vh;
        }
      }
      .hdt-popover__inner--language {
        max-height: min(12rem, 28vh);
      }
    }
    &[data-language="false"] {
      [data-language-a] {
        display: none;
      }
    }
    &[data-country="false"] {
      [data-country-a], .hdt-language-selector-label {
        display: none;
      }
    }
    &[open-as-modal] {
      [data-language-a], [data-country-a] {
        display: block;
      }
      &[data-language-mobile="true"][data-country-mobile="true"] {
        .hdt-country-selector-label {
          display: block;
        }
        .hdt-popover__inner {
          max-height: calc(80vh - min(12rem, 28vh));
          @supports (height: 1dvh) {
            max-height: calc(80dvh - min(12rem, 28dvh));
          }
          &.hdt-popover__inner--language {
            max-height: min(12rem, 28vh);
            @supports (height: 1dvh) {
              max-height: min(12rem, 28dvh);
            }
          }
        }
      }
      &[data-country-mobile="true"] {
        .hdt-popover__body {
          container: popover__body_localization / inline-size;
        }
        @container popover__body_localization (min-width: 420px) {
          .hdt-country-selector__list {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            column-gap: 1rem; 
          }
        }
      }
      &[data-language-mobile="false"] {
        [data-language-a] {
          display: none;
        }
        .hdt-popover__header {
          display: flex;
          flex-direction: column;
          align-items: start;
          row-gap: 1.5rem;
          border-bottom: 1px solid color-mix(in srgb, var(--color-foreground), transparent 88%);
          padding-block: 0 var(--gap);
          margin-bottom: .5rem;
          .hdt-country-selector-label {
            display: block;
          }
        }
      }
      &[data-country-mobile="false"] {
        [data-country-a] {
          display: none;
        }
        .hdt-language-selector-label {
          border-top: none;
        }
      }
    }
  }

  @media (min-width: 768px) {
    .hdt-section-header--main {
      .hdt-sticky-header {
        padding-block: 2.4rem;
      }
    }
    .hdt-header-container.hdt-container-xl {
      max-width: calc(100% - var(--header-p-minus, 6rem));
    }
    .hdt-header-container.hdt-container {
      max-width: calc(100% - 3rem);
    }
    .hdt-container--header-overlay .hdt-header-container:not(.hdt-container-xl) {
      .hdt-header-wrapper {
        &.hdt-container--header-overlay {
          padding-inline: 1.5rem;
        }
      }
    }
    .hdt-toolbar-parts {
      justify-content: center;
      gap: 1rem;
      .hdt-toolbar-part {
        width: max-content;
        justify-content: center;
        .hdt-localization-selector-wrap {
          display: block;
        }
      }
    }
    .hdt-disclosure {
      .hdt-country-selector-label {
        display: none;
      }
    }
  }

  @media (min-width: 1024px) {
    .hdt-toolbar-parts {
      justify-content: space-between;
      .hdt-toolbar-part {
        flex: 1;
        &:first-child {
          justify-content: flex-start;
        }
        &:last-child {
          justify-content: flex-end;
          &:first-child {
            justify-content: center;
          }
        }
      }
      .hdt-toolbar-part--text {
        display: inline-flex;
        text-align: center;
      }
      .hdt-toolbar-part--social {
        display: inline-flex;
      }
    }
    .hdt-toolbar-parts--1 {
      justify-content: center;
    }
    .hdt-toolbar-parts--3 {
      .hdt-toolbar-part {
        width: 33.3333333%;
        &:nth-child(2) {
          width: max-content;
          max-width: 50%;
          flex: none;
        }
      }
    }
    .hdt-megamenu-content-wrap {
      display: contents;
    }
    .hdt-header__icons-wrapper {
      gap: 2.4rem;
    }
    .hdt-header-wrapper {
      align-items: center;
      > *  {
        z-index: 6;
      }
    }
    .hdt-header__inline-list {
      gap: .6rem 0;
      > li {
        > a, > .hdt-mega-menu-content-wrap > .hdt-mega-menu > .hdt-header__menu-item {
          padding-inline: 1.4rem;
        }
        details {
          .hdt-mega-menu__content {
            pointer-events: none;
          }
          &[open] {
            .hdt-mega-menu__content {
              pointer-events: auto;
            }
          }
        }
      }
    }
    .hdt-opening-content {
      .hdt-mega-menu__content, .hdt-dropdown__content {
        pointer-events: auto !important;
      }
    }
    .hdt-nav-menu-bg-eff {
      display: block;
      padding: 0;
      opacity: 0;
      width: 100%;
      height: 100vh;
      clip-path: inset(0 0 calc(100vh - var(--header-height, 0px)) 0 round 0 0 var(--rounded, 0) var(--rounded, 0));
      max-width: 100%;
      z-index: 5;
      transition: opacity 0.4s linear, clip-path 0.4s linear;
    }
    .hdt-nav-hover-effect {
      max-width: calc(100vw - var(--header-p-minus, 6rem) - max(var(--logo-width), 15rem) - 18.2rem);
    }
    .hdt-section-header--main {
      --bg-eff-org-height: calc(var(--mega-content-height, 0px) + var(--header-height, 0px) - 2.4rem);
      &:has(.hdt-header__inline-menu .hdt-mega-menu--mega[open]) {
        .hdt-nav-menu-bg-eff {
          will-change: clip-path, opacity;
          opacity: 1;
          clip-path: inset(0 0 calc(100vh - var(--bg-eff-org-height, 0px)) 0 round 0);
          transition: opacity 0.3s linear, clip-path 0.3s linear;
        }
        .hdt-nav-menu-open-backdrop {
          opacity: 1;
          transition: opacity 2s linear;
        }
      }
      &:has(.hdt-header__inline-menu .hdt-mega-menu--dropdown[open]) {
        .hdt-nav-menu-open-backdrop {
          opacity: 1;
          transition: opacity 2s linear;
        }
      }
      .hdt-header--boxed {
        .hdt-nav-menu-bg-eff {
          clip-path: inset(2.4rem calc(50% - var(--header-container-width) * 0.5) calc(100vh - var(--header-height, 0px)) calc(50% - var(--header-container-width) * 0.5) round var(--rounded, 0px));
        }
        &:has(.hdt-header__inline-menu .hdt-mega-menu--mega[open]) {
          .hdt-nav-menu-bg-eff {
            clip-path: inset(2.4rem calc(0.5 * var(--header-p-minus, 0px)) calc(100vh - var(--bg-eff-org-height, 0px)) calc(0.5 * var(--header-p-minus, 0px)) round var(--rounded, 0px));
          }
        }
      }
    }
    .hdt-slider-announcement {
      padding-inline: 10.55rem;
    }
    .hdt-logo-align--center-left .hdt-header__inline-list, .hdt-logo-align--left-inline .hdt-header__inline-list {
      margin-inline-start: -0.9rem;
    }

    .hdt-header__inline-list > li details {
      .hdt-dropdown__content { 
        pointer-events: none;
        min-width: 22.4rem;
        max-width: 28rem;
        margin-inline-start: .9rem;
        transition: box-shadow 0.32s linear;
        box-shadow: none;
      }
      &[open] {
        .hdt-dropdown__content {
          pointer-events: auto;
          padding: 1.8rem 2.2rem 2rem;
          top: calc(100% - 1px);
        }
      }
    }
    .hdt-header__inline-list .hdt-dropdown__content .hdt-dropdown__list {
      details.hdt-dropdown-menu {
        position: relative;
        width: 100%;
        .hdt-dropdown__link--level-2 {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: .5rem; 
          .hdt-dropdown__icon {
            display: inline-block;
            line-height: 2.3rem;
            flex: none;
            pointer-events: none;
          }
        }
        .hdt-dropdown__content--level-2 {
          position: absolute;
          z-index: 2;
          width: 100%;
          inset-inline-start: calc(100% + 2.5rem);
          top: 0;
          background: var(--color-background);
          border-radius: var(--rounded-xs, 0);
          padding: 2.5rem 2rem;
          opacity: 0;
        }
        &:after {
          content: '';
          display: block;
          position: absolute;
          z-index: 1;
          width: 2.5rem;
          height: 200%;
          inset-inline-start: 100%;
          top: 0;
        }
        &[open] {
          .hdt-dropdown__content--level-2 {
            opacity: 1;
          }
        }
      }
      .hdt-sub-dropdown-animated {
        .hdt-dropdown__content--level-2 {
          clip-path: unset !important;
          box-shadow: 0 4px 24px 0 color-mix(in srgb, var(--color-foreground, transparent), transparent 80%), 0 1.5px 5px 0 color-mix(in srgb, var(--color-foreground, transparent), transparent 90%);
          transition: box-shadow 0.5s linear;
        }
      }
      li {
        line-height: 2.4rem;
        font-weight: var(--font-medium);
         + li {
          margin-top: .4rem;
        }
      }
    }
    header {
      .hdt-localization-selector-wrap {
        display: block;
      }
    }
  }

  @media (min-width: 1150px) {
    .hdt-header-wrapper {
      gap: 3.8rem;
    }
    .hdt-header-container:not(.hdt-container-xl) {
      .hdt-header-wrapper {
        &.hdt-container--header-overlay {
          padding-inline: 3rem;
        }
      }
    }
    .hdt-container--header-overlay .hdt-mega-menu__wrrap.hdt-container:not(.hdt-container-xl) {
      padding-inline: 3rem;
    }
  }

  .hdt-header__inline-list > li details[open] .hdt-dropdown__content:has(details.hdt-dropdown-menu[open]), .hdt-header__inline-list > li.hdt-dropdown-animated .hdt-dropdown__content {
    clip-path: unset !important;
    border-radius: 0 0 var(--rounded, 0) var(--rounded, 0);
    transition: box-shadow 0.5s linear;
  }

  .hdt-mega-menu-content-wrap {
    .hdt-mega-menu__wrrap {
      display: flex;
      width: 100%;
      gap: 2.4rem;
    }
    .hdt-mega-menu__list {
      gap: 2.4rem;
      font-weight: normal;
      .hdt-mega-menu__link--level-2-wrap {
        display: block;
        margin-bottom: 0.7rem;
        font-weight: var(--font-medium-or-bold);
      }
      ul > li {
        line-height: 2.4rem;
        &[highlight] {
          margin-top: 1.2rem;
          font-weight: var(--font-medium-or-bold);
        }
        + li {
          margin-top: .4rem;
        }
      }
      .hdt-mega-menu__link--last-highlight.hdt-link-underline{
        padding-bottom: 0.3rem;
      }
    }
    .hdt-mega-menu__list--columns {
      --real-column-count: var(--column-count, 1);
      column-count: var(--real-column-count, 1);
      max-width: max(40rem, calc(var(--real-column-count, 1) * 40rem));
      > li {
        display: block;
        overflow: hidden;
        > ul {
          overflow: hidden;
          margin-bottom: 1.2rem;
        }
      }
      @container container_menu__list (min-width: 768px) {
        --real-column-count: min(3, var(--column-count, 1));
      }
      @container container_menu__list (min-width: 1200px) {
        --real-column-count: min(4, var(--column-count, 1));
      }
      @container container_menu__list (min-width: 1400px) {
        --real-column-count: min(5, var(--column-count, 1));
      }
      @container container_menu__list (min-width: 1600px) {
        --real-column-count: var(--column-count, 1);
      }
    }
    .hdt-mega-menu__list_wrap {
      flex-grow: 1;
      .hdt-mega-menu__list-inner {
        container: container_menu__list / inline-size;
      }
    }
    .hdt-mega-menu__aside.hdt-mega-menu__collections {
      container: container_menu__aside / inline-size;
      flex-grow: 1;
      text-align: center;
      > .hdt-btn {
        margin-top: 3rem;
      }
    }
    hdt-slider-progress {
      margin: 3rem auto 0;
    }
    @container container_menu__list (min-width: 350px) {
      .hdt-mega-menu__list-inner {
        .hdt-mega-menu__list > li {
          min-width: 18rem;
        }
      }
    }
    @container container_menu__list (max-width: 767.98px) {
      .hdt-mega-menu__list--columns {
        column-count: min(var(--column-count, 1), 2);
      }
    }
    @container container_menu__aside (min-width: 1400px) {
      .hdt-slides-count--large.xl\:hdt-slides-4, .hdt-slides-count--5.xl\:hdt-slides-4 {
        --slide-size-set: 20%;
      }
    }
    @container container_menu__aside (min-width: 1600px) {
      .hdt-slides-count--large.xl\:hdt-slides-4 {
        --slide-size-set: 16.66667%;
      }
    }
    @container container_menu__aside (max-width: 991.98px) {
      .xl\:hdt-slides-4, .xl\:hdt-slides-3 {
        --slide-size-set: 33.333333%;
      }
    }
    @container container_menu__aside (max-width: 767.98px) {
      .xl\:hdt-slides-4, .xl\:hdt-slides-3 {
        --slide-size-set: 50%;
      }
    }
    @container container_menu__aside (max-width: 479.98px) {
      .xl\:hdt-slides-4, .xl\:hdt-slides-3 {
        --slide-size-set: 100%;
      }
    }
  }

  .hdt-mega-menu__link--images {
    --color-btn-primary: color-mix(in srgb, var(--color-foreground, transparent), transparent 92%);
    --color-btn-secondary: var(--color-foreground);
    --color-btn-primary-hover: var(--color-foreground);
    display: flex;
    width: 100%;
    max-width: 35rem;
    border-radius: var(--rounded-full);
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1.2rem;
    gap: 1.5rem;
    .hdt-mmf-collection-item--img {
      width: 6.3rem;
      height: 6.3rem;
      border-radius: var(--rounded-full);
      overflow: hidden;
      flex: none;
      :where(img, svg) {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .hdt-mmf-collection-item--title {
      flex-grow: 1;
      text-wrap: wrap;
    }
    .hdt-mmf-collection-item--icon {
      flex: none;
      width: 3.3rem;
      height: 3.3rem;
      margin-inline-end: 1rem;
      opacity: 0;
      transition: opacity 0.3s linear;
      svg {
        width: 100% !important;
        height: auto !important;
      }
    }
  }

  .hdt-mega-menu--mega_menu_featured {
    .hdt-mega-menu_featured {
      display: flex;
      gap: 2.4rem;
    }
  }
  .hdt-mmf-collection-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    .hdt-mmf-collection-item {
      --thickness-block: 1px;
      --padding-button: 1rem;
      --color-btn-primary: color-mix(in srgb, var(--color-foreground, transparent), transparent 96%);
      --color-line-border: color-mix(in srgb, var(--color-foreground, transparent), transparent 92%);
      --color-btn-secondary: var(--color-foreground);
      --color-btn-secondary-hover: var(--color-background);
      --color-btn-primary-hover: var(--color-foreground);
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
      span {
        display: block;
      }
      .hdt-mmf-collection-item--img {
        width: 6.3rem;
        height: 6.3rem;
        border-radius: var(--rounded-full);
        overflow: hidden;
        flex: none;
        :where(img, svg) {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .hdt-mmf-collection-item--title {
        flex-grow: 1;
        text-wrap: wrap;
      }
      .hdt-mmf-collection-item--icon {
        flex: none;
        width: 3.3rem;
        height: 3.3rem;
        margin-inline-end: 1rem;
        opacity: 0;
        transition: opacity 0.3s linear;
        svg {
          width: 100%;
          height: auto;
        }
      }
    }
    .hdt-mmf-link-wrap {
      margin-top: .8rem;
    }
  }
  .hdt-mmf-product-list {
    padding: 2.5rem 1.9rem 2rem 1.6rem;
    border-radius: var(--rounded);
    background: color-mix(in srgb, var(--color-foreground, transparent), transparent 96%);
    border: 1px solid color-mix(in srgb, var(--color-foreground, transparent), transparent 92%);
    width: 36vw;
    min-width: 28rem;
    max-width: 60rem;
    place-self: start;
    .hdt-mmf-pl-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
      gap: 1.5rem;
      .hdt-slide-controls--mmf {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-block-start: 0.4rem;
        > button {
          /* display: inline-flex;
          flex: none;
          justify-content: center;
          align-items: center; */
          width: 2.4rem;
          height: 2.4rem;
          min-height: unset;
          --rounded-button: var(--rounded-full);
          --padding-button: 0;
          --color-btn-primary: var(--color-background);
          --color-btn-secondary: var(--color-foreground);
          --color-btn-primary-hover: var(--color-foreground);
          --color-btn-secondary-hover: var(--color-background);
          --color-button-border: var(--color-line-border);
          --thickness-btn: 1px;
          svg {
            width: .4rem;
            height: auto;
          }
        }
      }
    }
    > * + * {
      margin-top: 1.5rem;
    }
    .hdt-slider {
      --slide-spacing: 1.8rem;
      --slide-size-set: max(16rem, 40%);
    }
    .hdt-mmf-link-wrap {
      place-self: center;
      margin-block-start: 2.3rem;
    }
    .hdt-card-product__wrapper .hdt-card-product__title > a, .hdt-price-wrapp {
      font-size: var(--text-base);
    }
  }

  .hdt-mega-menu__collections {
    .hdt-mmc-link {
      display: grid;
      grid-template-rows: 6.75rem 6.75rem minmax(0, 1fr);
      grid-template-columns: 1fr;
      padding-top: .5rem;
      .hdt-media-wrapper {
        grid-area: 1 / 1 / 3 / 2;
        width: 13.5rem;
        height: 13.5rem;
        z-index: 2;
        border-radius: 50%;
        overflow: hidden;
        place-self: center;
        border: 2px solid transparent;
        transition: border-color .2s linear;
        :where(img, svg) {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .hdt-collection-card__content {
        grid-area: 2 / 1 / 4 / 2;
        width: 100%;
        height: 100%;
        padding: 8.75rem 2rem 2rem 2rem;
        background: color-mix(in srgb, var(--color-foreground, transparent), transparent 96%);
        border: 1px solid color-mix(in srgb, var(--color-foreground, transparent), transparent 92%);
        position: relative;
        overflow: hidden;
        .hdt-mmc-link-text {
          background-size: 100% 1px;
        }
        .hdt-collection-card__title + .hdt-mmc-link-text{
          margin-block-start: 0.5rem;
          display: inline-flex;
        }
        > * {
          position: relative;
          z-index: 2;
        }
        hdt-circle-bg {
          position: absolute;
          z-index: 1; 
        }
        &:after {
          content: '';
          display: block;
          position: absolute;
          z-index: 1;
          inset: auto 0% 0%;
          transition: transform .6s cubic-bezier(.77,0,.175,1);
          transform-origin: 50% 100%;
          height: 100%;
          animation: scaleCardBgOut .3s linear forwards;
          pointer-events: none;
        }
      }
    }
    .hdt-slider {
      --slide-spacing: 2.4rem;
      .hdt-slider-nav {
        --inset: .5rem;
        button {
          margin-top: -2.25rem;
          opacity: 0;
          &[name="previous"] {
            transform: translateX(-24px) translateY(3.375rem);
          }
          &[name="next"] {
            transform: translateX(24px) translateY(3.375rem);
          }
        }
      }
    }
  }

  .hdt-mmb-container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: min(calc(100vh - var(--header-height, 0px) - var(--header-group-height, 0px) - var(--navbar-mobile-height, 0px)), var(--mmb-container-height));
    inset-inline-start: 0;
    inset-block-start: 100%;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
  }

  .hdt-menu-mobile {
    display: none;
    flex: none;
    &[open] {
      .hdt-mmb-container {
        pointer-events: auto;
      }
    }
  }

  @media (min-width: 1150px) {
    .hdt-header-container.hdt-container {
      max-width: calc(var(--header-container-max-width, 100% - 5rem));
    }
    .hdt-header__inline-list {
      gap: .5rem 0;
      > li {
        > a, > .hdt-mega-menu-content-wrap > .hdt-mega-menu > .hdt-header__menu-item {
          padding-inline: 2rem;
        }
      }
    }
    .hdt-logo-align--center-left .hdt-header__inline-list, .hdt-logo-align--left-inline .hdt-header__inline-list {
      margin-inline-start: -2rem;
    }
    .hdt-header__inline-list > li details .hdt-dropdown__content {
      margin-inline-start: -2rem;
    }
  }
  @media (min-width: 1360px) {

  }
  @media (max-width: 1023.98px) {
    .hdt-slider-announcement .hdt-slider-nav {
      display: inline;
    }

    .hdt-menu-mobile {
      display: block;
      .hdt-drawer__inner {
        padding: 2.8rem 0;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        gap: 3rem;
      }
      .hdt-icon-hamburger {
        rect {
          transform-box: fill-box;
          transform-origin: center;
          transition: transform .28s ease, opacity .2s ease;
          &:nth-of-type(1) {
            width: 22px;
            transition: width .2s linear, transform .28s ease, opacity .2s ease;
          }
          &:nth-of-type(2) {
            width: 17px;
            transition: width .2s linear, transform .28s ease, opacity .2s ease;
          }
        }
      }
      &[open] {
        .hdt-icon-hamburger {
          rect:nth-of-type(1) {
            width: 17px;
            transform: translateY(6px) rotate(45deg);
          }
          rect:nth-of-type(3) {
            opacity: 0;
            transform: scaleX(0.6);
            transition: transform .2s ease, opacity .18s ease;
          }
          rect:nth-of-type(2) {
            width: 17px;
            transform: translateY(-6px) rotate(-45deg);
          }
        }
      }
      .hdt-menu-drawer__header{
        font-size: var(--text-xl);
      }
      .hdt-drawer__header {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s linear;
        justify-content: flex-start;
        border: none;
        padding-inline: 0;
        &:has(+ .hdt-drawer__inner .hdt-menu-drawer__nav[hidden]) {
          position: relative;
          opacity: 1;
          pointer-events: auto;
        }
        .hdt-menu-drawer__prev {
          flex: none;
        }
        &:after {
          content: '';
          display: block;
          border-bottom: 1px solid color-mix(in srgb, var(--color-foreground), transparent 70%);
          width: 100%;
          position: absolute;
          z-index: 1;
          inset-inline-start: 0;
          inset-block-end: 0;
        }
      }
      .hdt-menu-drawer__panel {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
      }
      .hdt-menu-drawer__menu {
        > li {
          + li {
            margin-top: 1.5rem;
          }
          > a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            svg {
              flex: none;
            }
          }
        }
      }
      .hdt-menu-drawer__panel-menu {
        > li {
          + li {
            margin-top: 1rem;
          }
        }
        details {
          > ul {
            padding-inline-start: 1.2rem;
            margin-top: 1rem;
            margin-inline-start: 1.2rem;
            border-inline-start: 1px solid var(--color-foreground);
            > li + li {
              margin-top: .5rem;
            }
          }
          summary {
            svg {
              transition: rotate .2s linear;
              margin-inline-end: 2px;
            }
            &[aria-expanded="true"] {
              svg {
                rotate: 90deg;
              }
            }
          }
        }
      }
      .hdt-menu-drawer__panel-menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
      }
      .hdt-menu-drawer-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 2.4rem;
        justify-content: space-between;
        .hdt-btn--mmb-customer {
          min-width: 11.2rem;
          width: auto;
          flex: none;
        }
        .hdt-localization-group {
          width: auto;
          flex: none;
          display: inline-flex;
          gap: 1rem;
          flex-grow: 1;
          justify-content: flex-end;
          .hdt-localization-selector-wrap {
            flex: none;
          }
        }
        .hdt-social-links {
          width: 100%;
          flex-grow: 2;
          border-top: 1px solid color-mix(in srgb, var(--color-foreground), transparent 70%);
          padding-top: 2.8rem;
          justify-content: flex-start;
        }
      }
      .hdt-mega-menu__collections {
        .hdt-slider + * {
          margin-top: 2.4rem;
        }
      }
      .hdt-mega-menu__aside {
        container: container_menu__aside / inline-size;
        > * + * {
          margin-top: 2.4rem;
        }
        @container container_menu__aside (max-width: 991.98px) {
          .xl\:hdt-slides-4, .xl\:hdt-slides-3 {
            --slide-size-set: 33.333333%;
          }
        }
        @container container_menu__aside (max-width: 767.98px) {
          .xl\:hdt-slides-4, .xl\:hdt-slides-3 {
            --slide-size-set: 50%;
          }
        }
        @container container_menu__aside (max-width: 479.98px) {
          .xl\:hdt-slides-4, .xl\:hdt-slides-3 {
            --slide-size-set: 100%;
          }
        }
      }
      .hdt-mmf-collection-list {
        display: block;
        column-count: 2;
        .hdt-mmf-collection-item {
          margin-bottom: 1.2rem;
          .hdt-mmf-collection-item--img {
            width: 5.3rem;
            height: 5.3rem;
          }
          .hdt-mmf-collection-item--icon {
            display: none;
          }
          .hdt-mmf-collection-item--title {
            text-wrap: unset;
          }
        }
        .hdt-mmf-link-wrap {
          column-span: all;
        }
        @container container_menu__aside (max-width: 479.98px) {
          column-count: 1;
        }
      }
      .hdt-mmf-product-list {
        width: 100%;
        min-width: unset;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .hdt-icon-hamburger rect{ transition: none; }
    }

    .hdt-nav-menu-bg-eff {
        display: block;
        height: 100vh !important;
        max-height: 100vh !important;
        opacity: 0 !important;
        clip-path: inset(0 calc(50% - 0.5 * var(--bg-eff-org-width)) 25% calc(50% - 0.5 * var(--bg-eff-org-width)) round var(--rounded, 0)) !important;
        pointer-events: none;
        transition: opacity .4s linear, clip-path .3s linear !important;
        &:has(+ .hdt-header-container .hdt-menu-mobile[open]) {
          opacity: 1 !important;
          clip-path: inset(0 0 0 0 round 0) !important;
          transition: opacity .2s linear, clip-path .3s linear !important;
        }
    }
    .scrolled-past-header .hdt-sticky-header .hdt-header-container:has(.hdt-menu-mobile[open]) {
      box-shadow: none;
      background: var(--color-background);
    }
  }

  /*================ 5.2. Footer ================*/
  .hdt-footer{position: relative;}
  .hdt-footer__content-top{
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--spacing-x)/2 * -1);
  }
  .hdt-footer .hdt-section-separator {
    box-shadow: 0 1px var(--color-line-border) inset;
  }
  .hdt-footer__content-bottom {
    margin-top: 1rem;
    padding-top: 2.2rem;
    gap: 1.5rem 3rem;
  }
  .hdt-policies .hdt-copyright__content{text-align: center;}
  .hdt-policies li:not(:first-child):before {
    content: "\b7";
    padding: 0 .8rem;
    line-height: 1;
  }
  .hdt-footer__content-top .hdt-footer-block{
    max-width: 100%;
    padding-inline: calc(var(--spacing-x)/2);
    width: 100%;
    padding-block-end: 2.4rem;
  }
  .hdt-footer-block__news-img{
    margin-block-end: 2rem;
  }
  .hdt-footer-block--newsletter .rte :where(:not(meta, span) + *){
    margin-block-start: 1rem;
  }
  .hdt-footer-block--newsletter .hdt-footer-block__details-content{
    width: 445px;
    max-width: 100%;
  }
  .hdt-footer-block--newsletter .hdt-newsletter-form{
    margin-block-start: 2.4rem;
  }
.hdt-field--newsletter{
  display: flex;
  border-radius: var(--rounded-input);
  padding: 0.8rem;
  border: 1px solid var(--color-foreground);
  .hdt-btn {
    --rounded-button: var(--rounded-input);
    .hdt-btn-text {
      border-radius: inherit;
    }
  }
  .hdt-field__input{
    border: none;
    margin: 0;
    padding: 0 0.8rem;
    --height-input: 3.6rem
    &::placeholder{
      color: inherit;
      opacity: 1;
    }
    &:-moz-placeholder{
      color: inherit;
      opacity: 1;
    }
  }
  .hdt-newsletter-form__button{
    flex: 0 0 auto;
    --padding-button: 0.6rem 1.6rem
  }
}
  .hdt-list-payment {
    gap: .8rem;
  }
  .hdt-footer__content-top :where(.hdt-social-links--footer,.hdt-footer__follow-on-shop,.hdt-localization-selector-group) {
    margin-top: 2.4rem;
  }
  .hdt-footer-block--link_list ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .hdt-footer-block summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hdt-footer-block .hdt-footer__icon-carret {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--rounded-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
  }
  .hdt-footer-block__heading:not([hidden]) + .hdt-footer-block__details-content{
    margin-block-start: 1rem;
  }
  .hdt-footer-block__heading[aria-expanded=true] .hdt-footer__icon-carret {
    transform: rotate(180deg);
    background: color-mix(in srgb,var(--color-foreground),transparent 95%);
  }
  .hdt-footer__logo{
    margin-inline: auto;
    margin-block-start: var(--section-pb);
  }
  @media (max-width: 767px) {
    .hdt-footer-block:not(.hdt-footer-block--no-heading):not([open-default-mobile]):not([resized]) .hdt-footer-block__details-content {
      display: none;
    }
  }
  @media screen and (min-width: 768px) {
    .hdt-footer-block__heading:not([hidden]) + .hdt-footer-block__details-content{
      margin-block-start: 2rem;
    }
    .hdt-footer__content-top .hdt-footer-block{
      width: calc(100%/12 * var(--col-tb));
      padding-block-end: 1.4rem
    }
    .hdt-footer-block summary {
      pointer-events: none;
    }
    .hdt-footer-block__news-img{
      margin-block-end: 2.5rem;
    }
    .hdt-footer-block--newsletter .rte :where(:not(meta, span) + *){
      margin-block-start: 1.5rem;
      font-size: var(--text-lg);
    }
    .hdt-footer-block .hdt-footer__icon-carret{
      display: none;
    }
    .hdt-footer__content-top .hdt-footer-block {
      padding-block-end: 2.4rem;
    }
    .hdt-footer__logo{
      margin-block-start: var(--section-pb-xl);
    }
    .hdt-field--newsletter .hdt-newsletter-form__button{
      --padding-button: 0.6rem 2.4rem
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-footer__content-top .hdt-footer-block{
      width: calc(100%/12 * var(--col-dk));
    }
  }
  /* Localization selector */
  .hdt-disclosure{
    --padding-x: 2rem;
    --padding-y: 2rem;
    padding-block: var(--padding-x);    
    &[open-as-modal] {
      .hdt-popover__header{
        margin-block-end: 1.3rem;
        padding-block-end: 1.3rem;
        border-bottom: 1px solid var(--color-line-border);
        flex-direction: column;
        #GlobalCountryLabel{
          width: 100%;
        }
      }
      .hdt-popover__body{
        padding-bottom: 2.7rem;
        padding-inline: 2.9rem;
      }
      .hdt-disclosure__item {
        padding: .6rem 1rem; 
        &[aria-selected="true"]{
          background-color: var(--color-background2);
        }
      }
      .hdt-language-selector-label {
        padding-inline: 0; 
      }
    }
    .hdt-popover__inner{
      padding-inline: 0; 
      padding-block: 0;
    }
    .hdt-country-no-results{
      padding: 0.8rem var(--padding-y) 0;
    }
    &.hdt-disclosure--country-filter {
      .hdt-popover__header {
        margin-bottom: 0;
      }
    }
    &[data-country-mobile="true"] {
      &[open-as-modal] {
        .hdt-popover__header {
          border-bottom: none;
          margin-block-end: 0;
          padding-inline: 0;
          padding-bottom: 1.5rem;
        }
      }
    }
  }
  .hdt-localization-selector-group {
    gap: 1rem;
  }
  .hdt-localization-selector-wrap .hdt-localization-selector{
    border-radius: var(--rounded-2xs);
    border: 1px solid var(--color-line-border);
    padding: 0.3rem 0.8rem 0.3rem 0.3rem;
    white-space: nowrap;
    font-weight: var(--font-semibold);
  }
  header .hdt-localization-selector-wrap .hdt-localization-selector{
    background: color-mix(in srgb, var(--color-foreground, transparent), transparent 92%);
    border: none;
  }
  .hdt-localization-selector, .hdt-disclosure__item {
    color: var(--color-foreground);
    column-gap: .8rem;
    font-size: var(--text-sm);
  }
  .hdt-disclosure__flag {
    flex: none;
    height: auto;
    width: 20px;
    border-radius: calc(var(--rounded-2xs) * 0.8);
    overflow: hidden;
  }
  .hdt-disclosure__item {
    padding: .8rem var(--padding-y);
    text-align: start;
    svg {
      margin-inline-start: auto;
    }
  }

  .hdt-disclosure .hdt-field-search{
    --height-input: 3.6rem;
    --padding-inline-input: 1rem;
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--color-line-border);
    border-radius: var(--rounded-input);
    /* padding-inline-end: var(--padding-inline-input); */
    height: var(--height-input);
    margin-block-start: 0;
    .hdt-input--search{
      border: none;
      height: 100%;
      padding: var(--padding-block-input) var(--padding-inline-input);
    }
    .hdt-field__label{display: none;}
    .hdt-country-filter__reset-button {
      width: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 1;
      transition: opacity .5s cubic-bezier(.19,1,.22,1);
      &.hidden{opacity: 0;}
    }
  }
  @media (min-width: 768px) {
    .hdt-disclosure .hdt-popover__inner{
      max-height: 42rem;
      overflow-y: auto;
    }
    .hdt-disclosure .hdt-popover__arrow{z-index: -1;}
  }
  /* navbar-mobile */
  .hdt-section-navbar-mobile {
    height: var(--bar-mobile-height, 5.8rem);
  }
.hdt-navbar-mobile {
  position: fixed;
  z-index: 32;
  inset-inline: 0;
  bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem;
    line-height: 1;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
  &:not(.hdt-navbar-mobile--label) .hdt-navbar-mobile__label {
    display: none;
  }
}
.hdt-navbar-mobile__item {
  flex: 1 0 20%;
  width: 100%;
  display: grid;
  place-content: center;
  place-items: center;
  row-gap: .7rem;
  min-height: 4.8rem;
  font-size: var(--text-sm);
  svg {
    width: auto;
    height: 1.5rem;
  }
}
  .hdt-navbar-mobile__item--menu svg {
    height: 1.1rem;
  }
.hdt-navbar-mobile__count {
  top: -.6rem;
  inset-inline-start: 1.7rem;
  transform: scale(0);
  transition: transform .2s ease-in-out;
  &.is-visible {
    transform: scale(1);
  }
}
  @media (min-width: 1025px) {
    .hdt-section-navbar-mobile {
        display: none;
    }
  }
  /*================ 5.3. Slideshow ================*/
  .hdt-slideshow[type="overlay"] .hdt-media-wrapper :where(hdt-video, img, svg) {
    transform: scale(1.5);
    filter: blur(50px);
  }
  .hdt-slideshow .hdt-media-overlap-content--container > :not(img, video, iframe, svg, picture, .hdt-media-wrapper, a, hdt-video) {
    grid-area: 2 / 2 / 3 / 3;
  }
  .hdt-slideshow__controls .hdt-slider-controls {
    display: inline-flex;
  }
  .hdt-slideshow__controls--bars .hdt-slider-controls {
    gap: 1.8rem;
    > button {
      display: block;
      width: 4rem;
      height: .2rem;
      background: color-mix(in srgb, var(--color-foreground), transparent 80%);
      transition: background-color .3s ease;
      position: relative;
      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        width: 0;
        height: 100%;
        background: var(--color-foreground);
      }
      &[aria-current="true"]:before {
        animation: slideBarAni var(--animation-duration, var(--hdt-remaining, 0)) linear var(--hdt-play-state, paused);
      }
    }
  }
  .hdt-slideshow:not([autoplay]) .hdt-slideshow__controls--bars .hdt-slider-controls > button[aria-current="true"]:before {
    width: 100%;
  }
  .hdt-slider-control--counter {
    display: inline-flex;
    border-radius: var(--rounded-xs);
    overflow: hidden;
    .hdt-slider-counter {
      color: color-mix(in srgb, var(--color-foreground), transparent 10%);
      background: color-mix(in srgb, var(--color-foreground), transparent 88%);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      display: grid;
      grid-template: 1fr / 1fr;
      min-width: 5rem;
      padding: 1rem;
      .hdt-slider-counter--current {
        grid-area: 1 / 1 / 2 / 2;
        place-self: start start;
      }
      .hdt-slider-counter--total {
        grid-area: 1 / 1 / 2 / 2;
        place-self: end end;
      }
    }
    .hdt-slider-counter--sep {
      grid-area: 1 / 1 / 2 / 2;
      place-self: center;
      width: 2.5rem;
      height: .1rem;
      background: color-mix(in srgb, var(--color-foreground), transparent 10%);
      rotate: 135deg;
    }
    .hdt-slider-nav--back-next {
      display: inline-flex;
      > button {
        color: color-mix(in srgb, var(--color-foreground), transparent 10%);
        background: color-mix(in srgb, var(--color-foreground), transparent 88%);
        -webkit-backdrop-filter: blur(.1rem);
        backdrop-filter: blur(.1rem);
        height: 100%;
        padding: 1.7rem 2rem;
        transition: color .3s ease, background-color .3s ease;
        position: relative;
        + button:before {
          content: '';
          display: block;
          width: .1rem;
          height: calc(100% - 1.6rem);
          background: color-mix(in srgb, var(--color-foreground), transparent 88%);
          position: absolute;
          top: .8rem;
          inset-inline-start: -0.05rem;
          transition: background-color .3s ease;
        }
      }
    }
  }
  [dir="rtl"] .hdt-slider-control--counter .hdt-slider-counter--sep {
    rotate: -135deg;
  }
  .hdt-slideshow__controls--dots .hdt-slider-controls {
    gap: 1.2rem;
    > button {
      position: relative;
      &:before {
        content: '';
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: .8rem;
        height: .8rem;
        background: color-mix(in srgb, var(--color-foreground), transparent 60%);
        border-radius: 50%;
        transition: background-color .3s ease;
      }
      &[aria-current="true"]:before {
        background: var(--color-foreground);
      }
    }
  }
  .hdt-slider-controls [aria-current="true"] .hdt-progress__path {
    stroke-dasharray: 1;
    stroke: var(--progress-active);
    animation: slideDotsProgressAni var(--hdt-remaining, 0) linear var(--hdt-play-state, paused) both;
  }
  .hdt-slideshow__controls--dots .hdt-slider-controls .hdt-icon-progress {
    width: 2.2rem;
    height: 2.2rem;
  }
  .hdt-slider-control--pause-play,
  .hdt-slider-control--counter,
  .hdt-slideshow .hdt-slider-controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease 0.15s;
    &[color-scheme] {
      pointer-events: auto;
      opacity: 1;
    }
  }
  .hdt-slider-control--pause-play {
    display: inline-flex;
    align-items: center;
    column-gap: .8rem;
    --stroke-width: 1px;
    pointer-events: auto;
    .hdt-slider-nav--back-next {
      background: color-mix(in srgb, var(--color-btn-primary), transparent 80%);
      border-radius: min(var(--rounded-button), 1.5rem);
      display: inline-flex;
      gap: .3rem;
      padding: .35rem;
      max-height: 3rem;
      border: 1px solid color-mix(in srgb, var(--color-btn-primary), transparent 80%);
      button {
        position: relative;
        background: var(--color-btn-primary);
        color: var(--color-btn-secondary);
        border-radius: min(var(--rounded-button), 1.05rem);
        width: 4rem;
        height: 2.1rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        &:focus-visible{
          outline-offset: -0.1rem;
        }
      }
    }
  }
  .hdt-pause-play-btn {
    position: relative;
    width: 3rem;
    height: 3rem;
    display: inline-grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    color: var(--color-btn-primary);
    background: color-mix(in srgb, var(--color-btn-primary), transparent 80%);
    border-radius: 50%;
    place-self: center;
    &:focus-visible{
      outline-offset: -0.1rem;
    }
  }
  .hdt-pause-play-btn svg {
    grid-area: 1 / 1 / 2 / 2;
    place-self: center;
  }
  .hdt-pause-play-btn .hdt-icon-progress {
    width: 100%;
    height: 100%;
  }
  .hdt-slider-play[running] .hdt-progress__path {
    animation: slideDotsProgressAni var(--hdt-remaining, 0) linear var(--hdt-play-state, paused) forwards;
  }
  .hdt-slider-play .hdt-icon-play {
    opacity: 1;
    animation: zoomInSpring 0.48s cubic-bezier(.3,1.5,.4,1) both;
  }
  .hdt-slider-play[playing] .hdt-icon-play {
    opacity: 0;
    animation: zoomOutSpring 0.38s cubic-bezier(.33,1.25,.56,1) both;
  }
  .hdt-slider-play .hdt-icon-pause {
    opacity: 0;
    animation: zoomOutSpring 0.38s cubic-bezier(.33,1.25,.56,1) both;
  }
  .hdt-slider-play[playing] .hdt-icon-pause {
    opacity: 1;
    animation: zoomInSpring 0.48s cubic-bezier(.3,1.5,.4,1) both;
  }
  .hdt-icon-progress {
    --progress-color: var(--color-btn-primary);
    --progress-active: var(--color-btn-primary);
    --cricle-width: 4px;
  }
  .hdt-progress__circle,
  .hdt-progress__path {
    fill: none;
    stroke: var(--progress-color);
    stroke-width: var(--cricle-width);
    transition: stroke .3s ease;
  }
  .hdt-progress__circle {
    stroke: color-mix(in srgb, var(--progress-color), transparent 80%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .hdt-progress__path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-width: var(--cricle-width);
  }
  .hdt-slideshow:not([autoplay]) .hdt-slider-controls [aria-current="true"] .hdt-progress__path {
    stroke-dasharray: 0;
    stroke: var(--progress-active);
  }

  @keyframes slideBarAni {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes slideDotsProgressAni {
    0% {
        stroke-dashoffset: 1;
    }
    100% {
        stroke-dashoffset: 0;
    }
  }
  @keyframes zoomInSpring {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    60% {
      opacity: 1;
      transform: scale(1.12);
    }
    80% {
      opacity: 1;
      transform: scale(0.96);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes zoomOutSpring {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    30% {
      opacity: 1;
      transform: scale(1.18);
    }
    100% {
      opacity: 0;
      transform: scale(0.6);
    }
  }
  @media (min-width: 768px) {
    .hdt-slider .hdt-slideshow__controls {
      --control-padding: 3rem;
      --control-spacing: 3rem;
      max-width: var(--container-max-width-padding-lg);
    }
  }
    @media (min-width: 1150px) {
    .hdt-slideshow .hdt-media-overlap-content--container > :not(img, video, iframe, svg, picture, .hdt-media-wrapper, a, hdt-video) {
      grid-area: 2 / 2 / 3 / 5;
    }
    .hdt-slider .hdt-slideshow__controls {
      --control-padding: 5rem;
      --control-spacing: 5rem;
    }
    .hdt-slider-control--counter .hdt-slider-nav--back-next > button {
      padding: 2rem;
    }
    }
  @media (min-width: 1400px) {
    .hdt-slider .hdt-slideshow__controls {
      --control-padding: 10.5rem;
      max-width: 100%;
    }
    .hdt-slideshow .hdt-slideshow__controls {
      --control-padding: 5rem;
    }
  }
  /*================ 5.4. Media Collage ================*/
  .hdt-collage-wrapp{
    grid-auto-flow: dense;
    grid-auto-rows: var(--collage-row-height, var(--row-height));
    grid-template-columns: repeat(var(--collage-cols, 2), minmax(0, 1fr));
    gap: var(--spacing);
    .hdt-media-content{
      padding: 2rem;
      grid-area: full-r-start/full-c-start/full-r-end/full-c-end;
      min-height: 50%;
      display: flex;
      flex-direction: column;
      position: relative;
      &:is(.hdt-place-self-center-start, .hdt-place-self-center-end, .hdt-place-self-center){
        justify-content: center;
      }
      &:is(.hdt-place-self-end-start, .hdt-place-self-end-center, .hdt-place-self-end){
        justify-content: flex-end;
      }
      &:is(.hdt-place-self-start, .hdt-place-self-start-center, .hdt-place-self-start-end){
        justify-content: flex-start;
      }
      > *{
        position: relative;
        z-index: 3;
      }
    }
    a.hdt-collage-item{
      cursor: var(--cursor-open-link) 33 33, auto;
    }
  }
  .hdt-collage-item {
    container: collage-item / inline-size;
    grid-area: span var(--collage-row-ident, var(--collage-row-ident-xs)) / span var(--collage-col-ident, var(--collage-col-ident-xs));
    .hdt-btn-link, .hdt-btn{
      margin-block-start: var(--spacing-1-8);
      width: fit-content;
    }
    .hdt-theme-block + .hdt-theme-block{
      margin-block-start: var(--spacing-0-8);
    }
  }
  @media screen and (max-width: 767.98px) {
    .hdt-collage-item .hdt-media-content.hdt-text-center .hdt-btn,
    .hdt-collage-item .hdt-media-content.hdt-text-center .hdt-btn-link{
      align-self: center;
    }
    .hdt-collage-item .hdt-media-content.hdt-text-end .hdt-btn,
    .hdt-collage-item .hdt-media-content.hdt-text-end .hdt-btn-link{
      align-self: flex-end;
    }
  }
  @media screen and (min-width: 768px) {
    .hdt-collage-wrapp {
      --collage-cols: var(--collage-cols-md);
      --collage-row-height: var(--row-height-md);
      --spacing: var(--spacing-md);
      .hdt-media-content:is(.md\:hdt-place-self-center-start, .md\:hdt-place-self-center-end, .md\:hdt-place-self-center){
        justify-content: center;
      }
      .hdt-media-content:is(.md\:hdt-place-self-end-start, .md\:hdt-place-self-end-center, .md\:hdt-place-self-end){
        justify-content: flex-end;
      }
      .hdt-media-content:is(.md\:hdt-place-self-start, .md\:hdt-place-self-start-center, .md\:hdt-place-self-start-end){
        justify-content: flex-start;
      }
    }
    .hdt-collage-item {
      --collage-row-ident: var(--collage-row-ident-md);
      --collage-col-ident: var(--collage-col-ident-md);
      .hdt-media-content.md\:hdt-text-center .hdt-btn, .hdt-media-content.md\:hdt-text-center .hdt-btn-link{
        align-self: center;
      }
      .hdt-media-content.md\:hdt-text-end .hdt-btn, .hdt-media-content.md\:hdt-text-end .hdt-btn-link{
        align-self: flex-end;
      }
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-collage-wrapp {
      --collage-row-height: var(--row-height-xl);
      --spacing: var(--spacing-xl);
      .hdt-media-content{
        padding: 3.8rem;
      }
    }
    .hdt-collage-item {
      --collage-row-ident: var(--collage-row-ident-xl);
      --collage-col-ident: var(--collage-col-ident-xl);
    }
  }
  @container collage-item (width >= 25rem) {
    .hdt-collage-wrapp .hdt-btn:not(.hdt-btn-link) {
      min-width: 13.8rem;
    }
  }
  /*================ 5.5. Text with column icon ================*/
  @media (max-width: 767.98px) {
    .hdt-text--with-icon .hdt-slider__active-false .hdt-slider__container {
        --spacing-y: var(--spacing-2)
    }
  }
  .hdt-text-with-icons--border{
    padding: var(--spacing-2) var(--spacing-1);
    border-radius: var(--rounded);
    outline: 1px solid var(--color-line-border);
    outline-offset: -1.5px;
    .hdt-slider__container{
      margin-inline-start: 0;
    }
    .hdt-slider__slide{
      padding-inline-start: 0;
    }
    .hdt-icon-item-inner{
      padding: 0 calc(var(--slide-spacing) * .5);
    }
  }
  .hdt-icon-item{
    .hdt-icon-wrap{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-block-end: var(--spacing-1);
      &:not(.hdt-icon__type-none){
        padding: var(--spacing-1-4);
      }
    }
    .hdt-heading{
      padding-block-end: var(--spacing-0-6);
    }
    :where(.hdt-btn, .hdt-btn-link){
      margin-block-start: var(--spacing-1);
      margin-block-end: 0.3rem;
    }
  }
    
  :where(.hdt-icon__type-square,.hdt-icon__type-cricle) {
    background-color: color-mix(in srgb, var(--color-foreground), transparent 94%);
  }
  :where(.hdt-icon__type-border,.hdt-icon__type-cricle){
    border-radius: var(--rounded-full);
  }
  .hdt-iconbox-wrap .hdt-icon-wrap > :where(svg,img) {
    width: auto;
    height: var(--icon-h);
    min-width: var(--icon-mw, var(--icon-h));
  }
  @media (min-width: 768px) {
    .hdt-text-with-icons--border{
      padding: var(--spacing-3) var(--spacing-2-6);
    }
    .hdt-iconbox-wrap .hdt-icon-wrap > :where(svg,img) {
      height: var(--icon-h-md);
      min-width: var(--icon-mw-md, var(--icon-h-md));
    }
    :where(.hdt-icon--pos-left, .hdt-icon--pos-left_middle){
      display: flex;
      flex-direction: row;
      gap: 1rem;
    }
    .hdt-icon-item{
      .hdt-icon--pos-left{
        align-items: flex-start;
      }
      .hdt-icon--pos-left_middle{
        align-items: center;
      }
      .hdt-icon--pos-left .hdt-icon-wrap, .hdt-icon--pos-left_middle .hdt-icon-wrap{
        margin-block-end: 0;
      }
    }
  }
  @media (min-width: 1150px) {
    .hdt-iconbox-wrap .hdt-icon-wrap > :where(svg,img) {
      height: var(--icon-h-xl, var(--icon-h-md));
    }
  }
  /*================ 5.6. Gallery ================*/
  .hdt-section-header-gallery > .hdt-group-button-block {
    display: inline-flex;
    gap: 1rem;
    flex-wrap: wrap;
    place-self: center;
    margin-top: var(--spacing-2-4);
    justify-self: start;
  }
  .hdt-section-header-gallery.hdt-text-center > .hdt-group-button-block {
    justify-self: center;
    justify-content: center;
  }
  .hdt-section-header-gallery.hdt-text-right > .hdt-group-button-block {
    justify-self: end;
    justify-content: flex-end;
  }
  .hdt-section-header-gallery > .hdt-group-button-block .hdt-btn {
    margin-top: 0;
  }
  .hdt-section__gallery .hdt-btn-control_media {
    margin-inline-start: auto;
    margin-bottom: 1.3rem;
  }
  .hdt-pause-play-slider--gallery {
    display: none;
  }
  .hdt-section__gallery .hdt-slider__viewport{
    padding-block-end: 0.3rem;
  }
  @media (min-width: 768px) {
    .hdt-title-horizontal.hdt-section-header-gallery > .hdt-group-button-block {
      grid-column: 2;
      grid-row: 1/-1;
      margin-top: 0;
    }
  }
  @media (min-width: 1024px) {
    .hdt-pause-play-slider--gallery {
      display: block;
    }
    .hdt-container-xl {
      &.md\:hdt-slider__marquee.mb\:hdt-slider__overflow {
        .hdt-title-horizontal {
          padding-inline-end: var(--pd-container, 3rem);
        }
        .hdt-pause-play-slider--gallery {
          padding-inline-end: var(--pd-container, 3rem);
        }
      }
    }
  }
  /*================ 5.7. Marquee ================*/
  .hdt-marquee {
    white-space: nowrap;
    overflow: hidden;
    direction: ltr;
    unicode-bidi: isolate;
    &::part(wrapper) {
      min-width: max-content;
      display: inline-flex;
      align-items: center;
      position: relative;
      will-change: transform;
    }
  }
  .no-js .hdt-marquee {
    overflow-x: scroll;
  }
  .hdt-marquee-item {
    width: max-content;
    > * {
      margin: 0 calc(var(--gap-item, 2rem) / 2);
    }
    > :where(.hdt-shape-block, .hdt-icon-wrapper) {
      flex: none;
    }
    > .hdt-shape__diamond {
      margin: calc(var(--gap-item, 2rem) / 2);
    }
  }
  .hdt-shape__slash,
  .hdt-shape__line,
  .hdt-shape__line-horizontal
    {
    width: max(calc(var(--fs, 1rem) * .9), 1.5rem);
    height: max(calc(var(--fs, 1rem) * .9), 1.5rem);
    display: inline-flex;
    overflow: hidden;
    position: relative;
  }
  .hdt-shape__line:before,
  .hdt-shape__slash:before,
  .hdt-shape__line-horizontal:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: .1rem;
    height: 100%;
    background-color: color-mix(in srgb, var(--color-foreground) 25%, transparent 80%);
  }
  .hdt-shape__slash:before {
    transform-origin: 50%;
    transform: skewX(calc(-45deg * var(--value-logical-flip)));
  }
  .hdt-shape__line-horizontal:before{
    width: 100%;
    height: 0.1rem;
  }
  .hdt-shape__circle,
  .hdt-shape__square,
  .hdt-shape__diamond {
    width: max(calc(var(--fs) / 2.5), .5rem);
    height: max(calc(var(--fs) / 2.5), .5rem);
    background-color: color-mix(in srgb, var(--color-foreground) 25%, transparent 80%);
  }
  .hdt-shape__circle {
    border-radius: var(--rounded-full);
  }
  .hdt-shape__diamond {
    transform: rotateZ(45deg);
  }
  .hdt-marquee-item__mess {
    font-size: var(--fs);
    &.hdt-uppercase {
      letter-spacing: calc(var(--fs) * 0.2);
    }
  }
  .hdt-marquee .hdt-icon-wrapper img {
    min-width: var(--icon-mw);
    border-radius: var(--rounded-2xs);
    &.hdt-rounded-full {
      border-radius: var(--rounded-full);
    }
  }
  .hdt-marquee-item .hdt-outline-text {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-foreground);
  }
  @media (min-width: 768px) {
    .hdt-marquee-item {
      --gap-item: var(--gap-item-lg)
    }
    .hdt-marquee-item__mess, .hdt-shape-block {
      --fs: var(--fs-lg)
    }
    .hdt-marquee .hdt-icon-wrapper img {
      min-width: var(--icon-mw-md);
    }
  }

  /*================ 5.8. Media with text ================*/
  .hdt-section__media-w-text{position: relative;}
  .hdt-custom-background{
    position: absolute;
    inset: 0;
    pointer-events: none;
    .hdt-background-overlay{
      position: absolute;
      inset: 0;
      pointer-events: none;
      &.hdt-overlaytype--solid{
        background: var(--color-bg-overlay);
      }
      &.hdt-overlaytype--gradient{
        background: linear-gradient(var(--overlay-direction),var(--color-bg-overlay),var(--overlay-color--end))
      }
    }
    .hdt-media-wrapper{
      width: 100%;
      height: 100%;
    }
  }
  .hdt-s-background :where(img, svg){
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hdt-section__media-w-text .hdt-media-text-slide{
    position: relative;
  }
  .hdt-item-media-w-text .hdt-inner-media-text{
    background: var(--color-background);
    border-radius: var(--rounded);
    overflow: hidden;
    --hdt-block-btn: 2.4rem;
    flex-direction: column;
    display: flex;
    width: 100%;
  }
  .hdt-item-media-w-text .hdt-banner-media{
    position: relative;
  }
  .hdt-item-media-w-text .hdt-banner-media, .hdt-item-media-w-text .hdt-content {
    flex: 0 0 auto;
    width: 100%;
  }
  .hdt-item-media-w-text .hdt-content{
    padding: 2.8rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    [circle-bg-wrap]{overflow: hidden;}
    .hdt-inner-content{
      width: 100%;
    }
  }
  .hdt-item-media-w-text  .hdt-text-block{
    color: var(--color-foreground);
    --hdt-block-el: 1.6rem;
  }
  .hdt-item-media-w-text .hdt-banner-media > :is(img, video, iframe, svg, hdt-video, .hdt-media-wrapper),
  .hdt-item-media-w-text .hdt-banner-media > :is(picture, .hdt-media-wrapper, hdt-video) >:is(img, video, iframe, svg, hdt-video){
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hdt-banner-media hdt-video > :is(iframe){
    width: 100%!important;
    margin-left: 0!important;
    height: 100%!important;
    max-width: 100%!important;
  }
  .hdt-content.hdt-text-center .hdt-label-emoij{
    align-self: center;
  }
  .hdt-content.hdt-text-right .hdt-label-emoij{
    align-self: flex-end;
  }
  .hdt-content.hdt-text-left .hdt-label-emoij{
    align-self: flex-start;
  }
  .hdt-section__media-w-text > .hdt-container-xl{
    padding-inline: 0
  }
  .hdt-section__media-w-text .hdt-media-text-slide hdt-slider{
    padding: 0 1.5rem
  }
  @media screen and (max-width: 767.98px) {
    .hdt-media-text-scrollstack .hdt-slider{
      padding-inline: 1.5rem;
      .hdt-slider__viewport:not(.mb\:hdt-slider__viewport--hidden){overflow: visible;}
      &.hdt-slider__active-true{
        --slide-size-set: var(--slide-size-set-mb, 90%)
      }
    }
    .hdt-section__media-w-text{overflow: hidden;}
    .hdt-item-media-w-text .hdt-banner-media{
      height: var(--height-item);
    }
    .hdt-item-media-w-text .hdt-inner-media-text{
      border-radius: var(--rounded) var(--rounded) 0 var(--rounded);
      .hdt-content{
        border-inline: 1px solid var(--color-line-border);
        border-block-end: 1px solid var(--color-line-border);
        border-end-start-radius: var(--rounded);
        border-end-end-radius: var(--rounded);
      }
    }
    .hdt-media-text-scrollstack .hdt-ground-media-text{
      --slide-spacing: var(--spacing-x);
      --gap-hero: 0;
    }
  }
  @media screen and (min-width: 768px) {
    .hdt-media-text-scrollstack .hdt-inner-full{
      position: sticky;
      height: 100vh;
      top: 0;
      display: block;
    }
    .hdt-item-media-w-text .hdt-banner-media, .hdt-item-media-w-text .hdt-content {
      flex: 0 0 50%;
      width: 50%;
      height: 100%;
    }
    .hdt-item-media-w-text .hdt-inner-media-text{
      flex-direction: row;
    }
    .hdt-pos-media-second .hdt-item-media-w-text .hdt-inner-media-text{
      flex-direction: row-reverse;
    }
    .hdt-media-text-scrollstack{
      height: var(--height-stack);
      position: relative;
      max-width: 100%;
      &.hdt-no-scroll{
        height: auto;
        .hdt-inner-full{position: relative;height: auto;}
        .hdt-stack-sticky{position: static;}
        .hdt-ground-media-text{justify-content: center;}
      }
    }
    .hdt-media-text-scrollstack .hdt-stack-sticky {
      position: sticky;
      top: calc((100vh - var(--height-item))/2 - max(calc(var(--section-pt-xl) * .85), var(--section-pt)));
      overflow: hidden;
      transform-style: preserve-3d;
    }
    
    .hdt-section__media-w-text > .hdt-container-xl{
      padding-inline: 0
    }
    .hdt-media-text-scrollstack.hdt-item-fullwidth .hdt-stack-sticky{
      border-radius: var(--rounded);
    }
    .hdt-media-text-scrollstack .hdt-slider__viewport{
      overflow: visible;
      padding-inline: var(--pd-container, 30px);
    }
    .hdt-media-text-scrollstack .hdt-ground-media-text{
      --slide-spacing: 0;
      --gap-hero: var(--spacing-x);
      display: flex;
      will-change: transform;
      transform-style: preserve-3d;
      column-gap: var(--gap-hero);
    }
    .hdt-ground-media-text .hdt-item-media-w-text{
      display: flex;
      width: min(var(--width-item), 1025px);
      flex: 0 0 auto;
      will-change: transform;
      min-height: 100%;
    }
    .hdt-item-fullwidth .hdt-media-text-scrollstack .hdt-ground-media-text{
      --gap-hero: max(var(--pd-container, 30px), var(--spacing-x));
    }
    .hdt-item-fullwidth .hdt-ground-media-text .hdt-item-media-w-text{
      width: 100%;
    }
    .hdt-item-media-w-text .hdt-content{
      padding: 2.8rem;
      overflow-y: auto;
      &.md\:hdt-text-center{
        justify-content: center;
      }
      &.md\:hdt-text-left{
        justify-content: start;
      }
      &.md\:hdt-text-right{
        justify-content: end;
      }
    }
    .hdt-content.md\:hdt-text-center .hdt-label-emoij{
      align-self: center;
    }
    .hdt-content.md\:hdt-text-right .hdt-label-emoij{
      align-self: flex-end;
    }
    .hdt-content.md\:hdt-text-left .hdt-label-emoij{
      align-self: flex-start;
    }
    .hdt-item-media-w-text .hdt-label-emoij + .hdt-theme-block{
      --hdt-label-spacing: 2.2rem
    }
    .hdt-item-media-w-text .hdt-content{
      border-inline-end: 1px solid var(--color-line-border);
      border-block: 1px solid var(--color-line-border);
      border-start-end-radius: var(--rounded);
      border-end-end-radius: var(--rounded);
    }
    .hdt-pos-media-second .hdt-item-media-w-text .hdt-content{
      border-inline-end: none;
      border-inline-start: 1px solid var(--color-line-border);
      border-start-start-radius: var(--rounded);
      border-end-start-radius: var(--rounded);
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    .hdt-ground-media-text .hdt-item-media-w-text .hdt-inner-media-text{
      height: var(--height-item);
      min-height: auto;
    }
    .hdt-item-media-w-text .hdt-content .hdt-inner-content{
      max-width: var(--max-width-content, 100%);
    }
  }
  @media screen and (min-width: 1150px){
    .hdt-item-media-w-text .hdt-content{
      padding: 4.4rem;
    }
    .hdt-media-text-scrollstack .hdt-stack-sticky {
      top: calc((100vh - var(--height-item))/2 - var(--section-pt-xl, 0));
    }
  }
  /*================ 5.9. Testimonials ================*/
  .hdt-testimonial-item{
    .hdt-star-wrap {
      margin-bottom: var(--spacing-1-4);
    }
    .hdt-name-client{
      gap: 0.6rem;
      .hdt-icon-wrap{
        color: var(--icon-color-author, var(--color-foreground));
      }
    }
    .hdt-star-wrap {
      margin-bottom: var(--spacing-1-4);
    }
    .hdt-heading {
      margin-bottom: var(--spacing-1);
    }
    .hdt-auth-quote {
      margin-bottom: var(--spacing-1-4);
    }
  }
  .hdt-section-testimonial-product{
    .hdt-testimonial-item {
      border-radius: var(--rounded);
      border: 1px solid var(--color-line-border);
      padding: var(--spacing-2);
    }
    .hdt-testiminial-product {
      padding-top: var(--spacing-2);
      border-top: 1px solid var(--color-line-border);
      margin-top: var(--spacing-1-6);
    }
    .hdt-slider__viewport{
      padding: 1px;
    }
  }
  .hdt-testiminial-product{
    .hdt-pr-image {
      flex: 0 0 45px;
    }
    .hdt-pr-wrap{
      gap: 1.5rem;
    }
    .hdt-open-quickview-btn{
      margin-top: var(--spacing-1);
    }
  }
  .hdt-star-wrap{
    .hdt-star {
      display: inline-flex;
      position: relative;
      background-color: color-mix(in srgb, var(--color-foreground), transparent 85%);
      height: 12px;
      width: 80px;
      -webkit-mask-image: url('icon-star.svg');
      mask-image: url('icon-star.svg');
      -webkit-mask-repeat: repeat-x;
      mask-repeat: repeat-x;
      -webkit-mask-size: 16px 12px;
      mask-size: 16px 12px;
      &:after {
        content: "";
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: var(--rating-color, #FC9B2C);
        -webkit-mask-image: url('icon-star.svg');
        mask-image: url('icon-star.svg');
        -webkit-mask-repeat: repeat-x;
        mask-repeat: repeat-x;
        -webkit-mask-size: 16px 12px;
        mask-size: 16px 12px;
      }
    }
    &[data-rate="5"] .hdt-star:after{
      width: 100%;
    }
    &[data-rate="4.5"] .hdt-star:after{
      width: 90%;
    }
    &[data-rate="4"] .hdt-star:after{
      width: 80%;
    }
    &[data-rate="3.5"] .hdt-star:after{
      width: 70%;
    }
    &[data-rate="3"] .hdt-star:after{
      width: 60%;
    }
    &[data-rate="2.5"] .hdt-star:after{
      width: 50%;
    }
    &[data-rate="2"] .hdt-star:after{
      width: 40%;
    }
    &[data-rate="1.5"] .hdt-star:after{
      width: 30%;
    }
    &[data-rate="1"] .hdt-star:after{
      width: 20%;
    }
    &[data-rate="0.5"] .hdt-star:after{
      width: 10%;
    }
    &[data-rate="0"] .hdt-star:after{
      width: 0%;
    }
  }
  
  @media screen and (min-width: 768px) {
    .hdt-section-testimonial-product .hdt-section-title.hdt-text-center + .md\:hdt-slider__active-false .hdt-slider__container{
      justify-content: center;
      flex-wrap: wrap;
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-section-testimonial-product .hdt-section-title.hdt-text-center + .xl\:hdt-slider__active-false .hdt-slider__container{
      justify-content: center;
      flex-wrap: wrap;
    }
  }
  /*================ 5.10. Testimonials with image ================*/
  .hdt-section-testimonials-with-image .hdt-inner-content-testimonial{
    .hdt-container-full{
      padding-inline: min(8vw, 140px);
    }
  }
  .hdt-section-testimonials-with-image .hdt-inner-s-background .hdt-s-background{
    position: absolute;
    inset: 0;
  }  
  .hdt-testimonials-w-image-wrapper{
    flex-direction: column;
    row-gap: var(--spacing-2-4);
    padding-inline: 1.5rem;
    .hdt-testimonial-item{
      padding-block-start: 3rem;
      @media (min-width: 768px) {
        padding-block-start: 0;
      }
    }
    .hdt-testimonial-info{
      .hdt-ic-testimonial{
        display: flex;
        margin-bottom: var(--spacing-2-8);
        color: color-mix(in srgb, var(--color-foreground), transparent 80%);
      }
      .hdt-auth-quote {
        font-size: var(--text-xl);
      }
      .hdt-name-client {
        margin-bottom: var(--spacing-1);
      }
    }
    .hdt-slide-control-mixed {
      margin-block-start: 3rem;
    }
    .hdt-list-images-testimonial {
      width: 80%;
      max-width: 340px;
    }
    .hdt-slider{
      max-width: 100%;
    }
  }
  .hdt-inner-list-images-testimonial{
    display: grid;
    .hdt-testimonial-image{
      grid-area: 1/-1;
      border-radius: var(--rounded-sm);
      .hdt-media-wrapper{
        transform: rotate(var(--rotate));
      }
    }
  }
  .hdt-section-testimonials-with-image .hdt-slide-control-mixed {
    --color-line-border: color-mix(in srgb, var(--color-background), transparent 92%);
    background: var(--color-foreground);
    color: var(--color-background);
    --color-btn-secondary-hover: var(--color-foreground);
    --color-btn-primary-hover: var(--color-background);
    .hdt-slider-progress_bar{
      background: var(--color-background);
    }
  }
  @media screen and (min-width: 768px) {
    .hdt-testimonials-w-image-wrapper {
      flex-direction: row;
      padding-inline: 0;
      .hdt-testimonial-item{
        padding-inline-start: var(--gap-col, 3.5rem);
      }
      .hdt-slider__viewport{
        padding-block: 3rem;
      }
      .hdt-list-images-testimonial {
        flex: 0 0 min(310px, 37%);
        max-width: min(310px, 37%);
      }
      .hdt-slider{
        flex: 1;
        overflow: hidden;
      }
      .hdt-testimonial-info .hdt-ic-testimonial{
        margin-bottom: var(--spacing-3-8);
      }
    }
    hdt-testimonial-image[reveal-on-scroll] .hdt-container{
      padding-inline: 5rem;
      max-width: min(calc(100vw - var(--clip-path-off) - 2rem), var(--container-max-width-padding-md, 110%));
    }
    .hdt-section-testimonials-with-image .hdt-slide-control-mixed {
      margin-inline-start: var(--gap-col, 3.5rem);
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-testimonials-w-image-wrapper{
      .hdt-testimonial-item{
        padding-inline-start: var(--gap-col-md, 3.5rem);
      }
      .hdt-list-images-testimonial{
        flex: 0 0 min(338px, 37%);
        max-width: min(338px, 37%);
      }
      .hdt-testimonial-info .hdt-auth-quote {
        font-size: var(--text-4xl);
      }
    }
    hdt-testimonial-image[reveal-on-scroll] .hdt-container{
      max-width: min(var(--container-max-width-padding-xl), calc(100vw - var(--clip-path-off) - 2rem));
      padding-inline: calc(var(--pd-container, 3rem) + 2rem);
    }
    .hdt-section-testimonials-with-image .hdt-slide-control-mixed {
      margin-inline-start: var(--gap-col-md, 3.5rem);
    }
  }
  @media (min-width: 1650px){
    hdt-testimonial-image[reveal-on-scroll] .hdt-container{
      padding-inline: 5rem;
    }
  }
  /*================ 5.11. Scrolling media with text ================*/
  .hdt-scroll-clip {
    --clip-x: 1.5rem;
  }
  .hdt-section-scroll-media-with-text {
    height: 250vh;
    .hdt-custom-background {
      position: relative;
      grid-area: 1 / -1;
      z-index: 0;
      height: 100%;
      width: 100%;
      max-height: 100vh;
      pointer-events: none;
      .hdt-media-wrapper {
        display: block;
      }
    }
  }
  .hdt-scroll-media-with-text {
    display: grid;
    height: 100vh;
    position: sticky;
    top: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .hdt-scroll-media-with-text__bg-img {
    grid-area: 1 / -1;
    z-index: 0;
    height: 100%;
    width: 100%;
    max-height: 100vh;
    pointer-events: none;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  .hdt-scroll-media-with-text__text {
    grid-area: 1 / -1;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 100%;
    place-self: center;
    &:has(.hdt-scrolling-mwt-marquee-inner:empty) {
      display: none;
    }
  }
  .hdt-scroll-media-with-text__media {
    grid-area: 1 / -1;
    z-index: 1;
    height: 100%;
    width: 100%;
    max-height: var(--hdt-fill-height);
    display: flex;
    justify-content: center;
    align-items: center;
    .hdt-media-wrapper {
      width: 100%;
      height: 100%;
      --media-radius: 35px;
      clip-path: inset(calc(50% - var(--media-radius)) calc(50% - var(--media-radius)) round var(--media-radius));
      >:where(svg, img, hdt-video) {
        height: 100%;
        width: 100%;
        object-fit: cover;
        transform: scale(0.5);
      }
    }
  }
  .hdt-scroll-media-with-text__content {
    grid-area: 1 / -1;
    place-self: center;
    opacity: 0;
    position: relative;
    z-index: 2;
  }
  @supports (height: 100svh) {
    .hdt-section-scroll-media-with-text {
      height: 250svh;
    }
    .hdt-scroll-media-with-text {
      height: 100svh;
    }
    .hdt-scroll-media-with-text__media {
      max-height: 100svh;
    }
  }
.hdt-scrolling-mwt-inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: sticky;
  top: 0;
  > * {
    grid-area: 1 / 1 / 2 / 2;
  }
  hdt-video > :is(video, iframe,img) {
    inset: auto;
  }
}
  .hdt-scrolling-mwt-marquee {
    width: calc(100% + 8rem);
    margin-inline: auto;
    overflow: hidden;
  }
  .hdt-scrolling-mwt-marquee--border {
    padding: 0.1rem;
    --color-scolling-border: var(--color-foreground);
    .hdt-scrolling-mwt-marquee-inner {
      border-radius: var(--rounded);
      border: 1px solid var(--color-scolling-border);
      overflow: hidden;
    }
  }
  .hdt-block__scrolling-content {
    position: relative;
  }
  .hdt-two-end-fade {
    mask-image: linear-gradient(to right, transparent 0%, var(--color-background) 20%, var(--color-background) 80%, transparent 100%);
  }
  .hdt-scrolling-mwt-marquee--border .hdt-block__scrolling-content + .hdt-block__scrolling-content {
    border-top: 1px solid var(--color-scolling-border);
  }
.hdt-scrolling-mwt-content {
  z-index: 2;
  place-self: center;
  text-align: center;
  max-width: 100%;
  width: min(calc(100% - 3rem), var(--content-max-width));
  opacity: 0;
  > .hdt-heading + .rte {
    margin-top: .8rem;
  }
  > .hdt-heading + .hdt-btn {
    margin-top: 1.3rem;
  }
  > .rte + .hdt-btn {
    margin-top: 2.4rem;
  }
}
  .hdt-scrolling-mwt-marquee--border {
    width: 100%;
    max-width: calc(100% - 3rem);
  }

  @media (min-width: 768px) {
    .hdt-scrolling-mwt-marquee--border {
      max-width: calc(100% - 6rem);
    }
    .hdt-scroll-clip {
      --clip-x: 3rem;
    }

    .hdt-scroll-media-with-text__media .hdt-media-wrapper {
      --media-radius: 65px;
    }
  }

  @media (min-width: 1150px) {
    .hdt-scroll-clip {
      --clip-x: var(--pd-container, 3rem);
    }
  }
  /*================ 5.12. Image with text overlay ================*/
.hdt-slider--images-wto {
  --border-radius: var(--rounded-lg);
  --slide-spacing: var(--spacing-x);
  .hdt-slider__container {
    align-items: stretch !important;
    height: auto !important;
  }
  .hdt-iwto {
    min-height: var(--item-height, 40rem);
    overflow: hidden;
    position: relative;
    transition: flex-grow .6s ease, margin .8s ease;
    display: grid;
    grid-template: 1fr / 1fr;
    border-radius: var(--border-radius);
  }
  .hdt-iwto-image  {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    grid-area: 1 / 1 / 2 / 2;
    border-radius: var(--border-radius);
    overflow: hidden;
    :where(img, svg) {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  .hdt-iwto-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: max(3rem, var(--border-radius, 0px));
    align-self: var(--content-align, start);
    grid-area: 1 / 1 / 2 / 2;
  }
}
  .hdt-iwto-content .hdt-heading + * {
    margin-top: .5rem;
  }
  .hdt-mask-wrap--max-content {
    width: max-content;
  }
  .hdt-iwto-content .rte + :where(.hdt-btn, .hdt-mask-wrap, .hdt-mask-wrap--max-content) {
    margin-top: 1.5rem;
    overflow: hidden;
  }
  .hdt-iwto-content .rte + .hdt-smwt-btn-wrap {
    margin-top: 1.5rem;
  }
  .hdt-iwto.hdt-has-btn .hdt-iwto-content {
    margin-bottom: -5.9rem;
    transition: margin .5s ease;
  }
  @media (min-width: 768px) {
    .hdt-slider--images-wto.md\:hdt-slider__active-false {
      --slide-spacing: 0;
      .hdt-iwto {
        flex: 1;
        &:not(:last-child) {
          margin-inline-end: calc(var(--overlay-space, 10%) * -1);
        }
      }
      .hdt-iwto-image {
        width: var(--img-w);
      }
      .hdt-iwto-content {
        width: calc(var(--img-w) - var(--border-radius) * 2 - var(--overlay-space, 10%));
      }
    }
    .hdt-slider--images-wto.md\:hdt-slider__active-true .hdt-iwto-content {
      width: 100%;
    }
  }
  @media (min-width: 1150px) {
    .hdt-slider--images-wto.xl\:hdt-slider__active-false {
      --slide-spacing: 0;
    }
    .hdt-slider--images-wto {
      .hdt-iwto {
        position: relative;
        flex: 1;
        transition: flex-grow .6s ease, margin 1s ease;
        &:not(:last-child) {
          margin-inline-end: calc(var(--overlay-space, 10%) * -1);
        }
      }
      .hdt-iwto-image {
        width: var(--img-w);
      }
    }
    .hdt-slider--images-wto.xl\:hdt-slider__active-false .hdt-iwto-content {
      width: calc(var(--img-w, 0px) - var(--border-radius, 0px) * 2 - var(--overlay-space, 10%));
    }
  }
  @media (max-width: 599.98px) {
    .hdt-slider.hdt-slider--images-wto {
      --slide-size-set: 90% !important;
    }
  }

  /*================ 5.13. Banner with text overlay ================*/
  .hdt-section__hero-media .hdt-media-overlap-content {
    @layer themeh.styles.base.default {
      --media-overlap-content-gap-r: min(5vw, 70px);
      --media-overlap-content-gap-c: min(5vw, 90px);
    }
  }
  .hdt-section__hero-media.hdt-media-content{
    --hdt-block-el: 2.4rem
  }
.hdt-section__hero-media .hdt-content-horizontal{
  width: 100%;
  max-width: none;
  .hdt-media-content-wrapp{
    max-width: var(--overlap-content-mw, auto);
  }
}
  .hdt-section__hero-media hdt-video{
    position: relative;
  }
  .hdt-content-horizontal .hdt-btn-ground{
    height: fit-content;
    align-self: flex-end;
    margin-block-start: 2rem;
  }
  @media screen and (max-width: 767.98px) {
    .hdt-section__hero-media .hdt-mobile-content-below{
      display: block;
      .hdt-media-content {
        border-radius: 0;
        background: var(--color-background);
        background: var(--gradient-background);
        padding: 4rem min(5vw, 3rem);
        max-width: 100%;
      }
      .hdt-content-horizontal .hdt-media-content-wrapp{
        max-width: 100%;
      }
    }
  }
  @media screen and (min-width: 768px) {
    .md\:hdt-text-center .hdt-group-button-block{
      justify-content: center;
    }
    .hdt-section__hero-media .hdt-content-horizontal{
      display: grid;
      grid-template: auto / 1fr auto;
      align-self: flex-end;
      gap: var(--spacing-x);
    }
    .hdt-content-horizontal .hdt-btn,
    .hdt-content-horizontal .hdt-btn-link{
      margin-block-start: 0;
    }
  }
  /*================ 5.14. Media cards ================*/
  .hdt-section_media-cards .hdt-media-overlap-content {
    @layer themeh.styles.tablet.default {
      --media-overlap-content-gap-r: min(5vw, 20px);
      --media-overlap-content-gap-c: min(5vw, 20px);
    }
    @layer themeh.styles.base.default {
      --media-overlap-content-gap-r: min(5vw, 25px);
      --media-overlap-content-gap-c: min(5vw, 25px);
    }
  }
  .hdt-section_media-cards .hdt-slider{
    --slide-spacing: var(--spacing-x);
  }
  .hdt-section_media-cards .hdt-media-wrapper >:is(img, video, iframe, svg, hdt-video) {
    aspect-ratio: var(--aspect-ratio, auto);
  }
  .hdt-media-card-item .hdt-theme-block,.hdt-media-card-item .hdt-btn{
    --hdt-block-el: 0.7rem;
    --hdt-block-btn: 1.2rem;
    --hdt-block-hafl: 0.6rem;
    --hdt-block-space: 2rem;
  }
  .hdt-media-card-item .hdt-hover-effblur .hdt-media-content:before{
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
  }
  @media screen and (min-width: 768px) {
    .hdt-section_media-cards .md\:hdt-slider__active-false .hdt-slider__container {
      justify-content: center;
    }
    .hdt-section_media-cards .hdt-media-wrapper >:is(img, video, iframe, svg, hdt-video){
      aspect-ratio: var(--aspect-ratio-md, auto);
    }
    hdt-tilt-card.hdt-media-card-item {
      margin: 30px 0;
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-section_media-cards .xl\:hdt-slider__active-false .hdt-slider__container {
      justify-content: center;
    }
  }

  /* Hover effblur */
  .hdt-hover-effblur .hdt-media-content {
    padding: 2rem;
    grid-area: full-r-start/full-c-start/full-r-end/full-c-end;
    min-height: 50%;
    display: flex;
    flex-direction: column;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      inset: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 2;
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      width: 100%;
      opacity: 1;
    }
    > .hdt-content {
      position: relative;
      z-index: 3;
    }
    &:is(.hdt-place-self-end-start, .hdt-place-self-end-center, .hdt-place-self-end) {
      justify-content: flex-end;
    }
    &:is(.hdt-place-self-center-start, .hdt-place-self-center-end, .hdt-place-self-center){
      justify-content: center;
    }
    &:is(.hdt-place-self-start, .hdt-place-self-start-center, .hdt-place-self-start-end){
      justify-content: flex-start;
    }
  }
  .hdt-hover-effblur:focus-visible{outline: none;}
  @media screen and (max-width: 767.98px) {
    .hdt-hover-effblur .hdt-media-content{
      &.hdt-text-center .hdt-btn, &.hdt-text-center .hdt-btn-link{
        align-self: center;
      }
      &.hdt-text-end .hdt-btn, &.hdt-text-end .hdt-btn-link{
        align-self: flex-end;
      }
      &:is(.hdt-place-self-center-start, .hdt-place-self-center-end, .hdt-place-self-center):before{
        mask-image: linear-gradient(180deg, color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 50%, color-mix(in srgb, var(--color-foreground), transparent 100%) 100%);
      }
      &:is(.hdt-place-self-end-start, .hdt-place-self-end-center, .hdt-place-self-end):before{
        mask-image: linear-gradient(180deg,  color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 49.04%, var(--color-foreground) 100%);
      }
      &:is(.hdt-place-self-start, .hdt-place-self-start-center, .hdt-place-self-start-end):before{
        mask-image: linear-gradient(360deg,  color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 49.04%, var(--color-foreground) 100%);
        -webkit-mask-image: linear-gradient(360deg,  color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 49.04%, var(--color-foreground) 100%);
      }
    }
  }
  @media screen and (min-width: 768px) {
    .hdt-hover-effblur .hdt-media-content{
      &:is(.md\:hdt-place-self-center-start, .md\:hdt-place-self-center-end, .md\:hdt-place-self-center){
        justify-content: center;
        min-height: 100%;
      }
      &:is(.md\:hdt-place-self-end-start, .md\:hdt-place-self-end-center, .md\:hdt-place-self-end){
        justify-content: flex-end;
      }
      &:is(.md\:hdt-place-self-start, .md\:hdt-place-self-start-center, .md\:hdt-place-self-start-end){
        justify-content: flex-start;
      }
      &:is(.md\:hdt-place-self-center-start, .md\:hdt-place-self-center-end, .md\:hdt-place-self-center):before{
        mask-image: linear-gradient(180deg, color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 50%, color-mix(in srgb, var(--color-foreground), transparent 100%) 100%);
      }
      &:is(.md\:hdt-place-self-end-start, .md\:hdt-place-self-end-center, .md\:hdt-place-self-end):before{
        mask-image: linear-gradient(180deg,  color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 49.04%, var(--color-foreground) 100%);
      }
      &:is(.md\:hdt-place-self-start, .md\:hdt-place-self-start-center, .md\:hdt-place-self-start-end):before{
        mask-image: linear-gradient(360deg,  color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 49.04%, var(--color-foreground) 100%);
        -webkit-mask-image: linear-gradient(360deg,  color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 49.04%, var(--color-foreground) 100%);
      }
    }
  }
  /*================ 5.14. Image hotspots ================*/
  .hdt-hotspot {
    --x-pos: var(--x-pos-mb);
    --y-pos: var(--y-pos-mb);
    --btn-hotspot-w: 1.8rem;
    inset-inline-start: min(var(--x-pos), calc(100% - var(--btn-hotspot-w, 1.8rem)));
    inset-block-start: min(var(--y-pos), calc(100% - var(--btn-hotspot-w, 1.8rem)));
  }
  .hdt-always-show-hc {
    position: relative;
    z-index: 3; 
    --animation-speed: 1s;
  }
  .hdt-image-hotspots-container:not(.hdt-header-inside):not(.hdt-container-full) .hdt-section-title {
    padding-inline: 0;
  }

  .hdt-image-hotspots-container .hdt-media-wrapper :where(img, svg) {
    pointer-events: none;
  }
  
  .hdt-hotspots-area:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: color-mix(in srgb, var(--color-overlay), transparent calc(100% - var(--color-overlay-opacity, 0)));
    pointer-events: none;
    border-radius: var(--rounded-lg);
  }
  .hdt-container-full {
    .hdt-hotspots-area:after {
      border-radius: 0;
    }
  }
  .hdt-hotspot__btn {
    position: relative;
    z-index: 1;
    background: var(--color-hotspots-secondary, #fff);
    color: var(--color-hotspots-primary, #000);
    border-radius: 50%;
    width: var(--btn-hotspot-w, 1.8rem);
    height: var(--btn-hotspot-w, 1.8rem);
    transition: width .5s ease, height .5s ease, background-color .5s ease;
    .hdt-hotspots__sonar {
      position: absolute;
      top: -1.1rem;
      right: -1.1rem;
      bottom: -1.1rem;
      left: -1.1rem;
      background-color: var(--color-hotspots-secondary, #fff);
      transition: background-color .5s ease;
      border-radius: 50%;
      z-index: 1;
      animation: hdt-Sonar 2s ease infinite;
    }
    .hdt-hotspots__dot {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: block;
      background-color: var(--color-hotspots-primary, #000);
      transition: background-color .5s ease;
      padding: .4rem;
      border-radius: 50%;
      animation: hdt-Pulse 2s ease-in-out infinite;
      svg {
        content: "";
        display: block;
        color: var(--color-hotspots-secondary, #fff);
        transition: color .5s ease;
        height: 100%;
        width: 100%;
        border-radius: inherit;
      }
    }
    &[aria-expanded=true] {
      --btn-hotspot-w: 2.4rem;
      pointer-events: none;
      z-index: 3;
      .hdt-hotspots__dot {
        background-color: var(--color-hotspots-secondary, #fff);
        svg {
          color: var(--color-hotspots-primary, #000);
        }
      }
    }
    &.hdt-hotspot__btn--plus{
      --btn-hotspot-w: 3rem;
      --btn-hotspot-w: 3rem;
      .hdt-hotspots__dot{
        padding: 1.1rem;
      }
      svg.hdt-icon-hotspot-plus{
        width: auto;
        height: 0.8rem;
      }
    }
  }

  .hdt-hotspot__popover {
    --pd-content: 1.5rem;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    .hdt-popover__inner {
      padding: 0;
    }
    @media (max-width: 767.98px) {
      &.hdt-popover-u {
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;
      }
    }
  }
  .hdt-always-show-hc {
    display: contents;
    @media (min-width: 768px) {
      display: inline;
    }
  }
  .hdt-hotspot__popover.hdt-hidden::part(content) {
    border: 1px solid var(--color-line-border);
    border-radius: var(--rounded);
    transition: border-color 0.3s ease;
  }

  .hdt-hotspot-popover-inner {
    gap: 1.4rem;
    align-items: center;
    padding: 2.4rem 0 0 0;
    .hdt-hotspot-media{
      border-radius: var(--rounded-xs);
    }
    @media (min-width: 768px) {
      padding: 1.2rem;
      &:has(.hdt-hotspot-media){
        padding: 0.6rem;
      }
    }
  }
  .hdt-hotspot-product.hdt-hotspot-popover-inner{
    .hdt-hotspot-media{
      width: 7.1rem;
    }
    .hdt-price-wrapp{line-height: 1; margin-block-start: 0.5rem;}
    .hdt-btn--quickview{margin-block-start: 0.8rem;}
  }
  .hdt-hotspot-media {
    flex: none;
    width: 5.5rem;
  }

  .hdt-always-show-hc .hdt-hotspot-media {
    width: 7.3rem;
  }

  .hdt-always-show-hc .hdt-hotspot-media :where(img, svg) {
    width: 100%;
    height: auto;
  }

  .hdt-hotspot-content > * + * {
    margin-top: .6rem;
  }
  .hdt-hotspot-content > svg + * {
    margin-top: 1.2rem;
  }

  .hdt-hotspot-content .rte {
    overflow: clip;
  }

  .hdt-always-show-hc .hdt-container {
    --pd-container: 1.5rem;
  }

  .hdt-always-show-hc .hdt-container-full {
    --pd-container: 1.5rem;
  }

  .hdt-hotspots-area {
    border-radius: var(--rounded-lg);
    .hdt-hotspot__popover {
      &[open-as-modal] .hdt-popover__inner .hdt-btn-close-x {
        position: absolute;
        padding: 1rem;
        inset-inline-end: .5rem;
        inset-block-start: .5rem;
      }
      .hdt-popover__arrow {
        display: none;
      }
    }
    @media (min-width:768px) {
      .hdt-hotspot__popover .hdt-popover__inner .hdt-btn-close-x {
        display: none;
      }
    }
  }

  .hdt-section__image-hotspots {
    position: relative;
    .hdt-image-hotspots-container {
      position: relative;
      z-index: 2;
    }
    .hdt-container-full {
      .hdt-hotspots-area {
        border-radius: 0;
      }
    }
    .hdt-popover-contents {
      display: contents;
    }
    .hdt-popover-as-contents {
      display: none;
    }
    .hdt-media-wrapper {
      transform: scaleX(var(--value-logical-flip));
    }
    @media (min-width: 768px) {
      .hdt-hotspot__popover {
        background: var(--color-background);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-radius: 0;
      }
      .hdt-popover-as-contents {
        display: contents;
        + .hdt-popover-contents {
          display: none;
        }
      }
      &.hdt-section__image-hotspots--glassy {
        .hdt-hotspot__popover {
          background: color-mix(in srgb,var(--color-foreground),transparent 70%);
          -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
        }
      }
    }
  }

  .hdt-container > .hdt-hotspots-area .hdt-media-wrapper :where(img, svg) {
    border-radius: var(--rounded-lg);
  }

.hdt-always-show-hc .hdt-hotspot {
  display: inline-flex;
  width: calc(100% - var(--x-pos) - var(--pd-container));
  min-height: 2.4rem;
  align-items: center;
  pointer-events: none;
  > * {
    pointer-events: auto;
  }
}

  .hdt-always-show-hc .hdt-hotspot--active {
    --btn-hotspot-w: 2.4rem;
    z-index: 10 !important;
     .hdt-hotspot__btn {
      pointer-events: none;
      z-index: 3;
    }
  }

  .hdt-always-show-hc {
    .hdt-popover-as-contents {
      .hdt-hotspot__popover {
        display: block;
        flex: none;
        z-index: 2;
        border: 1px solid var(--color-line-border);
        border-radius: var(--rounded-sm);
        overflow: hidden;
        box-shadow: 0 0 0 transparent; 
        transition: border-color 0.4s ease;
      }
      .hdt-hotspot__btn {
        flex: none;
        z-index: 1;
      }
    }
    .hdt-hotspot--active {
      .hdt-popover-as-contents {
        .hdt-hotspot__popover {
          border-color: var(--color-hotspots-primary);
          transition: border-color calc(var(--line-ani-dur, 0s) + 0.3s) ease var(--line-ani-dur, 0s);
        }
        .hdt-hotspot__btn:not(.hdt-hotspot__btn--plus) {
          .hdt-hotspots__dot {
            background-color: var(--color-hotspots-secondary, #fff);
            svg {
              color: var(--color-hotspots-primary, #000);
            }
          }
        }
      }
    }
  }
  
  .hdt-always-show-hc .hdt-hotspot:nth-child(odd) {
    inset-inline: auto 0;
    margin-inline: auto var(--pd-container, 3rem);
    justify-content: flex-start;
  }

  .hdt-always-show-hc .hdt-hotspot:nth-child(even) {
    width: calc(var(--x-pos) - var(--pd-container) + var(--btn-hotspot-w));
    inset-inline: 0 auto;
    margin-inline: var(--pd-container, 3rem) auto;
    justify-content: flex-end;
    transition: width .3s linear;
  }

  .hdt-always-show-hc .hdt-hotspot:nth-child(odd) .hdt-hotspot__btn {
    order: 1;
  }

  .hdt-always-show-hc .hdt-hotspot:nth-child(even) .hdt-hotspot__btn {
    order: 2;
  }

  .hdt-always-show-hc .hdt-hotspot:nth-child(odd) .hdt-hotspot__popover {
    inset-inline: auto 0;
    order: 3;
  }

  .hdt-always-show-hc .hdt-hotspot:nth-child(even) .hdt-hotspot__popover {
    inset-inline: 0 auto;
    order: 1;
  }

  .hdt-always-show-hc--layered {
    .hdt-hotspot:nth-child(odd) .hdt-hotspot__popover {
      inset-inline: auto calc(-1 * var(--hsa-distance, 0px));
    }
    .hdt-hotspot:nth-child(even) .hdt-hotspot__popover {
      inset-inline: calc(-1 * var(--hsa-distance, 0px)) auto;
    }
  }

  .hdt-always-show-hc {
    --line-ani-dur: 1s;
    .hdt-hotspot {
      .hdt-hs-line {
        inset-inline: auto 0;
        inset-block: 1.2rem 0;
        width: 0;
        height: 0;
        display: block;
        z-index: 1;
        background-color: var(--color-foreground);
        --hs-popover-w-half: calc(0.5 * var(--hs-popover-w));
        --btn-hotspot-w-half: calc(0.5 * var(--btn-hotspot-w));
        display: grid;
        &:before {
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          background: var(--color-hotspots-primary);
          grid-area: 1 / 1 / 2 / 2;
          will-change: transform;
        }
        &.hdt-hs-line--1 {
          width: max(0px, calc(var(--hs-dx-abs, 0) - 0.5 * var(--hs-popover-w) - 0.5 * var(--btn-hotspot-w) + .3rem));
          height: 1px;
          --transform-origin: left center;
          &:before {
            transform: scaleX(0);
            transition: transform calc(var(--line-ani-dur) * 0.5) ease-out calc(var(--line-ani-dur) * 0.5);
            transform-origin: var(--transform-origin);
          }
        }
        &.hdt-hs-line--2 {
          width: 1px;
          height: max(0px, calc(var(--hs-dy-abs, 0) - var(--hs-popover-h) * 0.5));
          --transform-origin: top center;
          &:before {
            transform: scaleY(0);
            transition: transform calc(var(--line-ani-dur) * 0.5) ease-out;
            transform-origin: var(--transform-origin);
          }
        }
      }
      &:nth-child(even) {
        .hdt-hs-line {
          inset-inline: auto calc(var(--btn-hotspot-w));
          &.hdt-hs-line--1 {
            --transform-origin: right center;
          }
        }
      }
      &:nth-child(odd) {
        .hdt-hs-line {
          inset-inline: var(--btn-hotspot-w) auto;
          &.hdt-hs-line--1 {
            --transform-origin: left center;
          }
        }
      }
      &.hdt-hs-pos-left {
        .hdt-hs-line {
          inset-inline: auto calc(var(--btn-hotspot-w));
          &.hdt-hs-line--1 {
            --transform-origin: right center;
          }
        }
      }
      &.hdt-hs-pos-right {
        .hdt-hs-line {
          inset-inline: var(--btn-hotspot-w) auto;
          &.hdt-hs-line--1 {
            --transform-origin: left center;
          }
        }
      }
      &.hdt-hs-force-pos-left {
        .hdt-hs-line {
          inset-inline: auto calc(var(--btn-hotspot-w));
          &.hdt-hs-line--1 {
            --transform-origin: right center;
          }
        }
      }
      &.hdt-hs-force-pos-right {
        .hdt-hs-line {
          inset-inline: var(--btn-hotspot-w) auto;
          &.hdt-hs-line--1 {
            --transform-origin: left center;
          }
        }
      }
      &.hdt-hs-pos-top {
        .hdt-hs-line {
          &.hdt-hs-line--2 {
            --transform-origin: bottom center;
          }
        }
      }
      &.hdt-hs-pos-bottom {
        .hdt-hs-line {
          &.hdt-hs-line--2 {
            --transform-origin: top center;
          }
        }
      }
      &.hdt-hotspot--active {
        .hdt-hs-line  {
          &.hdt-hs-line--1 {
            &:before {
              transform: scaleX(1);
              transition: transform calc(var(--line-ani-dur) * 0.5) ease-in;
            }
          }
          &.hdt-hs-line--2 {
            &:before {
              transform: scaleY(1);
              transition: transform calc(var(--line-ani-dur) * 0.5) ease-in calc(var(--line-ani-dur) * 0.5);
            }
          }
        }
      }
    }
    @media (max-width: 1023.98px) {
      .hdt-hotspot {
        .hdt-hs-line {
          background: none;
          &.hdt-hs-line--1 {
            width: calc(var(--hs-dx-abs, 0) - var(--btn-hotspot-w) * 0.5);
          }
          &.hdt-hs-line--2 {
            height: calc(var(--hs-dy-abs, 0) - var(--hs-popover-h) * 0.5);
          }
        }
        &.hdt-hs-pos-left, &.hdt-negative-dir-line-1 {
          .hdt-hs-line--2 {
            inset-inline: auto calc(var(--hs-dx-abs, 0) + var(--btn-hotspot-w) * 0.5);
          }
        }
        &.hdt-hs-pos-right, &.hdt-positive-dir-line-1 {
          .hdt-hs-line--2 {
            inset-inline: calc(var(--hs-dx-abs, 0) + var(--btn-hotspot-w) * 0.5) auto;
          }
        }
        &.hdt-hs-pos-bottom {
          .hdt-hs-line {
            inset-block: calc(var(--btn-hotspot-w) * 0.5) auto;
            transition: inset-block .3s linear;
          }
        }
        &.hdt-hs-pos-top {
          .hdt-hs-line {
            inset-block: auto calc(var(--btn-hotspot-w) * 0.5);
          }
        }
        &.hdt-hs-force-pos-left {
          .hdt-hs-line--2 {
            inset-inline: auto calc(var(--hs-dx-abs, 0) + var(--btn-hotspot-w) * 0.5);
          }
        }
        &.hdt-hs-force-pos-right {
          .hdt-hs-line--1 {
            inset-inline: var(--btn-hotspot-w) auto;
          }
          .hdt-hs-line--2 {
            inset-inline: calc(var(--hs-dx-abs, 0) + var(--btn-hotspot-w) * 0.5) auto;
          }
        }
      }
    }
  }

  .hdt-always-show-hc .hdt-hotspot.hdt-hs-force-pos-right {
    width: calc(100% - var(--x-pos) - var(--pd-container, 3rem));
  }
  .hdt-always-show-hc .hdt-hotspot.hdt-hs-force-pos-left {
    width: min(calc(var(--x-pos) - var(--pd-container) + var(--btn-hotspot-w)), calc(100% - var(--pd-container)));
  }

  .hdt-image-hotspots-container.hdt-header-outside {
    .hdt-section-title {
      --color-foreground: var(--color-foreground-outside);
      --color-btn-primary: var(--color-btn-primary-outside);
      --color-btn-secondary: var(--color-btn-secondary-outside);
      --color-btn-primary-hover: var(--color-btn-primary-hover-outside);
      --color-btn-secondary-hover: var(--color-btn-secondary-hover-outside);
      --color-btn-icon-background: var(--color-btn-icon-background-outside);
      --color-btn-icon: var(--color-btn-icon-outside);
    }
  }

  @keyframes pulse-ring {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    70% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2);
      opacity: 0;
    }
  }

  .hdt-section__image-hotspots--layered {
    .hdt-image-hotspots-container.hdt-header-inside {
      display: grid;
      grid-template-rows: auto var(--spacing-to-header, 0) 1fr var(--spacing-to-header, 0) auto;
      grid-template-columns: 1fr;
      .hdt-hotspots-area {
        grid-area: 3 / 1 / 4 / 2;
        place-self: center;
        overflow: visible;
        border-radius: unset;
        width: 100%;
        max-width: var(--image-max-width, 100%); 
        z-index: 2;
        .hdt-media-wrapper {
          margin-inline: auto;
          img, svg {
            border-radius: unset;
          }
        }
        &:after {
          display: none;
        }
      }
      .hdt-section-title {
        place-self: unset;
        z-index: 1;
        text-align: center;
      }
      .hdt-section-title--start {
        grid-area: 1 / 1 / 2 / 2;
      }
      .hdt-section-title--end {
        grid-area: 5 / 1 / 6 / 2;
      }

    }
  }

  @media (min-width: 768px) {
    .hdt-always-show-hc .hdt-container {
      --pd-container: 3rem;
    }
    .hdt-always-show-hc .hdt-container-full {
      --pd-container: 3rem;
    }
    .hdt-image-hotspots-container.hdt-header-inside {
      --hs-header-spacing: 3rem;
    }
    .hdt-hotspot {
        --x-pos: var(--x-pos-md);
        --y-pos: var(--y-pos-md);
    }
    .hdt-hotspot__popover {
        padding: 0;
        position: absolute;
        right: auto;
        min-width: 32rem;
        max-width: 40rem;
        width: max-content;
        overflow-y: visible;
    }
    .hdt-hotspot__popover::part(outside-close-button), .hdt-hotspot__popover::part(overlay) {
      display: none;
    }
  }
  @media (min-width: 1024px) {
    .hdt-image-hotspots-container.hdt-header-inside {
      display: grid;
      --hs-header-spacing: 2rem;
      grid-template-rows: var(--hs-header-spacing) 1fr var(--hs-header-spacing);
      grid-template-columns: 1fr;
      .hdt-section-title {
        grid-area: 2 / 1 / 3 / 2;
        z-index: 2;
        pointer-events: none;
        place-self: var(--place-self);
        text-align: center;
        margin: 0 auto;
        .hdt-btn {
          pointer-events: auto;
        }
      }
    }
    .hdt-image-hotspots-container.hdt-header-inside .hdt-hotspots-area {
      grid-area: 1 / 1 / 4 / 2;
      z-index: 1;
    }
    .hdt-image-hotspots-container .hdt-section-title {
      width: 100%;
    }
    .hdt-image-hotspots-container.hdt-header-inside .hdt-section-title {
      max-width: calc(var(--max-width) + var(--pd-container, 3rem) * 2);
    }
    .hdt-image-hotspots-container .hdt-section-title:has(.hdt-title-content:empty) {
      display: none;
    }
    .hdt-image-hotspots-container.hdt-header-inside .hdt-media-wrapper {
      display: block;
      height: 100%;
      :where(img, svg) {
        height: 100%;
        object-fit: cover;
      }
    }
    .hdt-always-show-hc .hdt-hotspot__popover {
        min-width: 28rem;
        max-width: 32rem;
        &.hdt-is-over-top {
          inset-block: 0 auto;
        }
        &.hdt-is-over-bottom {
          inset-block: auto 0;
        }
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-force-pos-right {
      inset-inline: auto 0;
      margin-inline: 0 var(--pd-container, 3rem);
      justify-content: flex-start;
      .hdt-hotspot__btn {
        order: 1;
      }
      .hdt-hotspot__popover {
        order: 3;
        inset-inline: auto 0;
      }
      &:after {
        inset-inline: auto 0;
      }
    }
    .hdt-always-show-hc--layered {
      .hdt-hotspot.hdt-hs-force-pos-right .hdt-hotspot__popover {
        inset-inline: auto calc(-1 * var(--hsa-distance, 0px));
      }
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-force-pos-left {
      inset-inline: 0 auto;
      margin-inline: var(--pd-container, 3rem) 0;
      justify-content: flex-end;
      .hdt-hotspot__btn {
        order: 3;
      }
      .hdt-hotspot__popover {
        order: 1;
        inset-inline: 0 auto;
      }
      &:after {
        inset-inline: 0 auto;
      }
    }
    .hdt-always-show-hc--layered {
      .hdt-hotspot.hdt-hs-force-pos-left .hdt-hotspot__popover {
        inset-inline: calc(-1 * var(--hsa-distance, 0px)) auto;
      }
    }
  }
  @media (min-width: 1150px) {
    .hdt-always-show-hc .hdt-hotspot__popover {
      box-shadow: 0 0 0 transparent;
    }
    .hdt-always-show-hc .hdt-container {
      --pd-container: 4.8rem;
    }
    .hdt-always-show-hc .hdt-hotspot__popover {
        min-width: 32rem;
        max-width: 40rem;
    }
    .hdt-always-show-hc .hdt-hotspot-richtext .hdt-hotspot-media {
        width: 13.4rem;
    }
    .hdt-image-hotspots-container.hdt-header-inside {
      --hs-header-spacing: 6rem;
    }
  }
  @media (min-width: 1540px) {
    .hdt-always-show-hc .hdt-container-full {
      --pd-container: 4.8rem;
    }
  }
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .hdt-always-show-hc .hdt-hotspot__popover {
        min-width: 28rem;
        max-width: 32rem;
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-pos-top {
      height: calc(min(var(--y-pos), 100% - var(--pd-container)) + var(--pd-container, 3rem));
      align-items: flex-end;
      inset-block-start: 0;
      padding-top: var(--pd-container, 3rem);
    }
    .hdt-always-show-hc.hdt-hotspot.hdt-hs-pos-bottom {
      height: calc(100% - var(--y-pos));
      align-items: flex-start;
      padding-bottom: var(--pd-container, 3rem);
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-pos-top .hdt-hotspot__popover {
      align-self: flex-start;
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-pos-bottom .hdt-hotspot__popover {
      align-self: flex-end;
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-pos-top:before {
      width: 0;
      margin-bottom: calc(var(--btn-hotspot-w) * 0.5);
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-pos-top:after {
      height: 0;
      width: 1px;
      inset-block: auto calc(var(--btn-hotspot-w) * 0.5);
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-pos-bottom:before {
      width: 0;
      margin-top: calc(var(--btn-hotspot-w) * 0.5);
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-pos-bottom:after {
      height: 0;
      width: 1px;
      inset-block: calc(var(--btn-hotspot-w) * 0.5) auto;
    }
    .hdt-always-show-hc .hdt-hotspot:nth-child(odd):after {
      inset-inline: calc(100% - 14rem) auto;
    }
    .hdt-always-show-hc .hdt-hotspot:nth-child(even):after {
      inset-inline: auto calc(100% - 14rem);
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-force-pos-left {
      width: calc(min(var(--x-pos), 100% - var(--btn-hotspot-w)) - var(--pd-container) + var(--btn-hotspot-w));
      inset-inline: 0 auto;
      justify-content: flex-end;
      margin-inline: var(--pd-container, 3rem) auto;
      .hdt-hotspot__btn {
        order: 3;
      }
      .hdt-hotspot__popover {
        inset-inline: 0 auto;
        order: 1;
      }
      &:after {
          inset-inline: auto calc(100% - 14rem);
      }
    }
    .hdt-always-show-hc--layered {
      .hdt-hotspot.hdt-hs-force-pos-left .hdt-hotspot__popover {
        inset-inline: calc(-1 * var(--hsa-distance, 0px)) auto;
      }
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hs-force-pos-right {
      width: calc(100% - var(--x-pos) - var(--pd-container, 3rem));
      inset-inline: auto 0;
      justify-content: flex-start;
      margin-inline: 0 var(--pd-container, 3rem);
      .hdt-hotspot__btn {
        order: 1;
      }
      .hdt-hotspot__popover {
        inset-inline: auto 0;
        order: 3;
      }
      &:after {
        inset-inline: calc(100% - 14rem) auto;
      }
    }
    .hdt-always-show-hc--layered {
      .hdt-hotspot.hdt-hs-force-pos-right .hdt-hotspot__popover {
        inset-inline: auto calc(-1 * var(--hsa-distance, 0px));
      }
    }
    .hdt-always-show-hc .hdt-hotspot {
      z-index: 2;
      pointer-events: none;
      > * {
        pointer-events: auto;
      }
    }
    .hdt-hotspot__btn[aria-expanded="true"]::after, .hdt-hotspot--active .hdt-hotspot__btn::after {
      animation: pulse-ring 1.5s ease-out infinite;
    }
    .hdt-always-show-hc .hdt-hotspot:before {
      pointer-events: auto;
      background-color: var(--color-hotspots-primary);
      transition: width calc(var(--animation-speed) * 0.5) linear calc(var(--animation-speed) * 0.5);
    }
    .hdt-always-show-hc .hdt-hotspot:after {
      background-color: var(--color-hotspots-primary);
      transition: height calc(var(--animation-speed) * 0.5) linear;
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hotspot--active:before {
      transition: width calc(var(--animation-speed) * 0.5) linear;
      width: calc(100% - 14rem - var(--btn-hotspot-w));
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hotspot--active:after {
      transition: height calc(var(--animation-speed) * 0.5) linear calc(var(--animation-speed) * 0.5);
      height: calc(100% - 10.5rem - var(--btn-hotspot-w) * 0.5);
    }
    .hdt-always-show-hc .hdt-hotspot .hdt-popover-as-contents .hdt-hotspot__popover {
      opacity: 0;
      clip-path: inset(50% 50% 50% 50%);
      transition: opacity calc(var(--animation-speed) * 0.5) ease-out, clip-path calc(var(--animation-speed) * 0.5) ease-out;
      position: absolute;
    }
    .hdt-always-show-hc .hdt-hotspot.hdt-hotspot--active .hdt-popover-as-contents .hdt-hotspot__popover {
      opacity: 1;
      clip-path: inset(0% 0% 0% 0%);
      transition-delay: calc(var(--animation-speed) * 0.5), calc(var(--animation-speed) * 0.5);
    }
    .hdt-container.hdt-header-inside .hdt-section-title {
      padding-inline: 0;
    }
  }
  @media (max-width: 1023.98px) {
    .hdt-image-hotspots-container .hdt-section-title {
      --color-foreground: var(--color-foreground-outside);
      --color-btn-primary: var(--color-btn-primary-outside);
      --color-btn-secondary: var(--color-btn-secondary-outside);
      --color-btn-primary-hover: var(--color-btn-primary-hover-outside);
      --color-btn-secondary-hover: var(--color-btn-secondary-hover-outside);
      --color-btn-icon-background: var(--color-btn-icon-background-outside);
      --color-btn-icon: var(--color-btn-icon-outside);
      .hdt-heading-block {
        mask-image: none;
      }
    }
  }

  /*================ 5.14b. Hotspots with drawer ================*/
  .hdt-hotspots-with-drawer__header {
    padding: 0 1.5rem 2.8rem;
    .hdt-btn {
      margin-top: 2.5rem;
    }
  }
  .hdt-hotspots-with-drawer__image-wrap {
    overflow: clip;
  }
  .hdt-hotspots-with-drawer__image {
    pointer-events: none;
    :where(img, svg) {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .hdt-drawer--hotspots {
    .hdt-drawer__inner {
      padding: 0;
    }
  }
  .hdt-hotspots-with-drawer__sidepanel {
    --panel-spacing: 0rem;
    inset-block: var(--panel-spacing);
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    grid-auto-rows: minmax(0, 1fr) auto;
    background: none;
    display: grid;
    .hdt-slider-hs-drawer-wrap {
      position: relative;
      z-index: 2;
      display: grid;
      grid-auto-rows: minmax(0,1fr) auto;
      overflow: hidden;
    }
    @media (min-width: 768px) {
      --panel-spacing: 2.5rem;
      .hdt-slider-hs-drawer-wrap {
        border-radius: var(--rounded-sm);
      }
    }
  }
  .hdt-hotspots-with-drawer__close {
    position: absolute;
    inset-block-start: 1.4rem;
    inset-inline-end: 1.4rem;
    place-items: center;
    z-index: 3;
    width: 4rem;
    height: 4rem;
    border-radius: var(--rounded-full);
    background: var(--color-btn-primary);
    color: var(--color-btn-secondary);
    transition: all .25s ease;
    svg {
      display: inline;
    }
  }
  .hdt-hs-drawer-media-clone {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    inset-inline: 0 auto;
    inset-block: 0 auto;
    img, svg {
      pointer-events: none;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .hdt-hotspots-with-drawer__items {
    z-index: 2;
    min-width: 0;
  }
  .hdt-hotspots-with-drawer__nav-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4rem 2.4rem 2.4rem 2.4rem;
    gap: 0; 
    position: relative;
    z-index: 2;
    min-width: 0;
    .hdt-heading--pn {
      opacity: 0;
      inset-block: auto 3rem;
      display: none;
    }
    .hdt-heading--pre {
      grid-area: 1 / 1 / 2 / 2;
      pointer-events: none;
      position: absolute;
      z-index: 1;
      inset-inline: 5.2rem auto;
      text-align: start; 
    }
    .hdt-heading--next {
      grid-area: 1 / 2 / 2 / 3;
      pointer-events: none;
      position: absolute;
      z-index: 1;
      inset-inline: auto 5.2rem;
      text-align: end;
    }
    button {
      width: 4rem;
      height: 4rem;
      border-radius: var(--rounded-full);
      place-items: center;
      border: 1px solid;
      &[name="previous"] {
        grid-area: 1 / 1 / 2 / 2;
      }
      &[name="next"] {
        grid-area: 1 / 2 / 2 / 3;
        justify-self: end;
      }
      svg {
        display: inline;
      }
    }
  }
  .hdt-hotspots-with-drawer__content {
    padding: 7rem 2.4rem 1rem;
    .hdt-hs-drawer-heading + .rte {
      margin-top: 1.8rem;
    }
  }
  .hdt-hotspots-with-drawer__sidepanel :where(.hdt-slider__viewport, .hdt-slider__container) {
    height: 100%;
  }
  .hdt-scroll-content {
    position: absolute;
    inset: 0;
    max-height: 100%;
    overscroll-behavior: none;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hdt-hotspots-with-drawer__hotspot {
    --x: min(calc(100% - 1.8rem), var(--x-pos-mb));
    --y: min(calc(100% - 1.8rem), var(--y-pos-mb));
    position: absolute;
    z-index: 1;
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    transform: translate(calc(var(--x) * -1), calc(var(--y) * -1));
    background: var(--hotspot-main-color, #000);
    color: var(--hotspot-second-color, #fff);
    border-radius: var(--rounded-full);
    width: 1.8rem;
    height: 1.8rem;
    transition: width .5s ease, height .5s ease;
    &[aria-expanded="true"] {
      pointer-events: none;
      width: 2.4rem;
      height: 2.4rem;
      z-index: 3;
      .hdt-hotspots-with-drawer__dot {
        background-color: var(--hotspot-second-color, #fff);
        svg {
          color: var(--hotspot-main-color, #000);;
        }
      }
    }
  }
  .hdt-floating--hs-drawer {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    background: color-mix(in srgb,var(--color-foreground),transparent 70%);
    -webkit-backdrop-filter: blur(40rem);
    backdrop-filter: blur(40rem);
    color: var(--color-foreground);
    padding: .4rem .8rem;
    transform: translateY(4px);
    border-radius: var(--rounded-sm);
    padding: 1.5rem;
    max-width: 36rem;
    transition: all .18s ease-out .18s;
    &[open] {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .hdt-hotspot-media {
      flex: none;
      width: 5.5rem;
      border-radius: var(--rounded-xs);
    }
  }
  .hdt-floating__arrow--hs-drawer {
    position: absolute;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: color-mix(in srgb,var(--color-foreground),transparent 70%);
    -webkit-backdrop-filter: blur(40rem);
    backdrop-filter: blur(40rem);
    display: none;
  }
  .hdt-hotspots-with-drawer__sonar {
    position: absolute;
    inset: -1.1rem;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: var(--rounded-full);
    z-index: 1;
    animation: hdt-Sonar 2s ease infinite;
  }
  .hdt-hotspots-with-drawer__dot {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--hotspot-second-color, #fff);
    padding: .4rem;
    border-radius: var(--rounded-full);
    animation: hdt-Pulse 2s ease-in-out infinite;
    svg {
      content: '';
      display: block;
        color: var(--hotspot-main-color, #000);
      height: 100%;
      width: 100%;
      border-radius: inherit;
    }
  }
  .hdt-hotspot-with-drawer-detail {
    display: flex;
    flex-direction: column;
    .hdt-hotspots-with-drawer__media {
      max-height: 40%;
      overflow: hidden;
      flex: none;
      img, svg {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }
  .hdt-hotspots-with-drawer--inside {
    .hdt-hotspots-with-drawer__header {
      text-align: center;
    }
  }
  .hdt-hotspots-with-drawer--outside {
    .hdt-hotspots-with-drawer__header {
      margin-bottom: 3.5rem;
      padding-bottom: 0; 
    }
  }
  @media (min-width: 768px) {
    .hdt-hotspots-with-drawer__hotspot {
      --x: min(calc(100% - 1.8rem), var(--x-pos));
      --y: min(calc(100% - 1.8rem), var(--y-pos));
    }
  }
  @media (min-width: 1024px) {
    .hdt-hotspots-with-drawer {
      .hdt-hotspots-with-drawer__image {
        display: block;
      }
    }
    .hdt-hotspots-with-drawer__header {
      padding-bottom: 4.5rem;
    }
    .hdt-hotspots-with-drawer--inside {
      .hdt-hotspots-with-drawer__wrap {
        grid-template-areas: "image header";
        grid-template-columns: 1fr;
      }
      .hdt-hotspots-with-drawer__image-wrap {
        grid-area: image;
      }
      .hdt-hotspots-with-drawer__header {
        grid-area: image;
        align-self: end;
        justify-self: center;
        max-width: 54rem;
        padding: 6rem 2rem;
        margin: 0;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.25s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s ease;
        z-index: 2;
        pointer-events: none;
        a {
          pointer-events: auto;
        }
      }
      &[open] .hdt-hotspots-with-drawer__header {
        pointer-events: none;
      }
    }
    .hdt-hotspots-with-drawer--inside-top .hdt-hotspots-with-drawer__header {
      align-self: start;
    }
    .hdt-hotspots-with-drawer__item--product {
      .hdt-hotspots-with-drawer__content {
        padding-top: 4.4rem;
      }
    }
    .hdt-hotspots-with-drawer__item--richtext {
      .hdt-hotspots-with-drawer__content {
        padding-top: 6rem;
      }
    }
  }
  @media screen and (min-width: 1025px) and (pointer: fine) {
    .hdt-hotspots-with-drawer__close:hover {
      background: color-mix(in srgb, var(--color-btn-primary), var(--color-btn-secondary) 8%);
      transform: rotate(90deg);
    }
  }
  @media (max-width: 1023.98px) {
    .hdt-hotspots-with-drawer {
      .hdt-section-title.hdt-section-title--b-fade .hdt-heading-block {
        mask-image: none;
      }
    }
    .hdt-hotspots-with-drawer--inside {
      .hdt-hotspots-with-drawer__header {
        margin-bottom: 3.5rem;
        padding-bottom: 0; 
      }
    }
  }
  @keyframes hdt-Sonar {
    0% {
      opacity: 0;
      transform: scale(0.2)
    }

    50% {
      opacity: .8
    }

    100% {
      opacity: 0;
      transform: scale(1)
    }
  }
  @keyframes hdt-Pulse {
    0%,100% {
      transform: scale(1)
    }

    50% {
      transform: scale(1.2)
    }
  }
  .hdt-tooltip-des {
    position: fixed;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    transform: translate(-50%, -120%);
    white-space: nowrap;
    display: none;
    transition: opacity 0.2s ease;
  }

  /*================ 5.15. Products story ================*/
  .hdt-bg-image {
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .hdt-bg-image :where(img, svg) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hdt-container--story {
    position: relative;
    z-index: 2;
  }
  .hdt-modal--products-story {
    .hdt-dialog--story {
      padding: 0;
      --width-threshold: 58rem;
      height: var(--height, 80vh);
      max-width: var(--max-width, min(45vh, var(--width-threshold)));
      &.hdt-dialog--ratio-16-9 {
        --max-width: min(45vh, 58rem, calc(100vw - 3rem));
        --height: calc(var(--max-width) * 1.77778);
      }
      &.hdt-dialog--ratio-3-2{
        --max-width: min(53.33333vh, var(--width-threshold), calc(100vw - 3rem));
        --height: calc(var(--max-width) * 1.5);
      }
      &.hdt-dialog--ratio-asos {
        --max-width: min(62.609vh, var(--width-threshold), calc(100vw - 3rem));
        --height: calc(var(--max-width) * 1.277777778);
      }
      &.hdt-dialog--ratio-portrait {
        --max-width: min(64vh, var(--width-threshold), calc(100vw - 3rem));
        --height: calc(var(--max-width) * 1.25);
      }
      &.hdt-dialog--ratio-square {
        --max-width: min(80vh, var(--width-threshold), calc(100vw - 3rem));
        --height: min(80vh, var(--width-threshold));
      }
      &.hdt-dialog--ratio-4-3 {
        --max-width: min(106.6667vh, var(--width-threshold), calc(100vw - 3rem));
        --height: calc(var(--max-width) * .75);
      }
      &.hdt-dialog--ratio-landscape {
        --max-width: min(120vh, var(--width-threshold), calc(100vw - 3rem));
        --height: calc(var(--max-width) * .6667);
      }
      &:modal {
        background: none;
      }
      .hdt-modal__header {
        padding: 0;
      }
      .hdt-modal__inner {
        padding: 0;
      }
    }
  }
  .hdt-dialog--story-inner {
    width: 100%;
    max-height: unset;
    display: grid;
    padding: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-columns: 1fr;
    border-radius: var(--rounded-product-card);
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.4,0,0.2,1);
  }
.hdt-modal--products-story {
  --part-author: 1 / 1 / 2 / 2;
  --part-close: 1 / 1 / 2 / 2;
  --part-nav: 2 / 1 / 3 / 2;
  --part-header: 1 / 1 / 2 / 2;
  --part-body: 1 / 1 / 4 / 2;
  &::part(wrapper) {
    align-items: center;
  }
  .hdt-modal__header {
    grid-area: var(--part-header);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    padding: max(1.5rem, var(--rounded-product-card)) max(1.9rem, var(--rounded-product-card));
    margin: 0;
    border-bottom: none;
  }
  .hdt-close-modal-btn {
    position: absolute;
    top: 50%;
    inset-inline-end: max(1.9rem, var(--rounded-product-card));
    transform: translateY(-50%);
    border: none;
  }
  .hdt-story-author {
    grid-area: var(--part-author);
    z-index: 2;
    padding: 1.5rem 4.2rem 1.5rem 1.8rem;
    &:empty {
      margin-top: 1.5rem;
    }
  }
  .hdt-story-nav {
    grid-area: var(--part-nav);
    z-index: 12;
    width: calc(100% - 3.6rem);
    margin-inline: auto;
  }
  .hdt-modal__inner {
    grid-area: var(--part-body);
    padding: 0;
    position: relative;
    overflow: hidden;
  }
}
  .hdt-indicators--products-story {
    width: 100%;
  }

  .hdt-slider--ps-items {
    display: block;
    width: 100%;
    overflow: hidden;
    --item-width: min(calc(100% - 7rem), 25rem);
    position: absolute;
    z-index: 3;
    inset-block: auto 0;
    inset-inline: 0;
    padding-inline-start: max(1.9rem, var(--rounded-product-card));
    padding-top: 1rem;
    margin-bottom: 2.2rem;
    .hdt-ss-item {
      flex: 0 0 var(--item-width);
      width: var(--item-width);
      user-select: none;
    }
    .hdt-ps-item .hdt-ps-img {
      width: 4.4rem;
      border-radius: var(--rounded-full);
      border: 1px solid rgba(var(--color-foreground));
    }
    .hdt-ps-item .hdt-ps-item-part-top {
      display: inline-flex;
      gap: 1rem;
      align-items: center;
    }
    .hdt-ps-item .hdt-ps-item-part-bottom .hdt-ps-item-title {
      font-size: 85%;
      font-weight: var(--font-medium-or-bold);
    }
    .hdt-ps-item .hdt-ps-item-part-bottom  .hdt-price {
      font-size: 85%;
      font-weight: var(--font-black);
    }
  }

  hdt-products-story-modal {
    --auto-rotate-dur: 80;
  }

  .hdt-product-story-item {
    cursor: pointer;
    .hdt-story-author {
      visibility: hidden;
      position: absolute;
      pointer-events: none;
      top: 0;
    }
  }

  .hdt-story-author {
    min-height: 3.3rem;
  }

  .hdt-story-author-profile {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
  }

  .hdt-story-author-avatar {
    display: grid;
    grid-template: 1fr / 1fr;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    > * {
      grid-area: 1 / 1 / 2 / 2;
    }
    .hdt-icon-story-avatar-ring {
      width: 100%;
      height: 100%;
    }
    > span {
      display: block;
      width: 2.1rem;
      height: 2.1rem;
      place-self: center;
    }
    .hdt-sa-avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
  }

  .hdt-story-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
    button {
      flex: 1 1 0;
      background: none;
      border: none;
      padding: 0;
      height: 1px;
      cursor: pointer;
      position: relative;
      outline: none;
      min-width: 0;
      background-color: color-mix(in srgb, var(--color-foreground), transparent 70%);
      &::before {
        content: "";
        display: block;
        width: 0%;
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--color-foreground);
        pointer-events: none;
        transition: width clamp(0.2s, calc(var(--auto-rotate-dur) * 0.1), 0.5s) linear;
      }
      &[aria-current="true"]::before {
        width: 100%;
        transition: width var(--auto-rotate-dur) linear;
      }
    }
  }
  .hdt-psi-inner {
    position: relative;
  }
  .hdt-psi-inner-bottom {
    position: absolute;
    z-index: 1;
    inset-block: auto max(1.5rem, var(--rounded-product-card));
    inset-inline: max(1.5rem, var(--rounded-product-card)) auto;
    width: 100%;
    max-width: calc(100% - calc(max(1.5rem, var(--rounded-product-card)) * 2));
    display: flex;
    flex-direction: column;
  }
  .hdt-slider--products-story .hdt-product-story-item--has-btn .hdt-psi-inner-bottom {
    transform: translateY(var(--height-btn, 3.6rem));
    transition: .3s ease-in;
    transition-property: transform;
  }
  .hdt-psi-inner .hdt-products-story {
    display: flex;
    justify-content: flex-start;
    z-index: 1;
    width: 100%;
  }
  .hdt-psi-inner .hdt-btn--item-story {
    width: 100%;
    max-width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: .3s ease-in;
    transition-property: opacity,margin;
  }
  .hdt-story-slider .hdt-psi-inner .hdt-btn--item-story {
    display: none;
  }
  .hdt-psi-inner {
    .hdt-products-story {
      .hdt-ps-img {
        width: 3.2rem;
        border-radius: 50%;
      }

      .hdt-ps-item-title,
      .hdt-price-wrapp,
      .hdt-open-qv {
        display: none;
      }

      .hdt-ps-item {
        flex: none;
        width: 3.6rem;
        height: 3.6rem;
        padding: 0.2rem;
        background-color: var(--color-foreground);
        margin-inline-start: -1.6rem;
        border-radius: 50%;
        overflow: hidden;
        z-index: var(--z-index, 1);
        transition: margin 0.3s ease-in-out var(--anim-delay, 0s) !important;
        &:first-child {
          margin-inline-start: 0 !important;
        }
        &:nth-child(n+7) {
          display: none;
        }
      }
    }
  }

  .hdt-modal--products-story .hdt-psi-inner:after {
    content: '';
    display: block;
    background: color-mix(in srgb, var(--color-background), transparent 90%);
    width: 100%;
    height: 100%;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    z-index: 1;
    pointer-events: none;
  }

  .hdt-modal--products-story .hdt-psi-inner--has-products:after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-background), transparent 90%) 17.48%, color-mix(in srgb, var(--color-background), transparent 100%) 35%, color-mix(in srgb, var(--color-background), transparent 80%) 70%, color-mix(in srgb, var(--color-background), transparent 20%) 90.23%);
  }

  .hdt-slider--story .hdt-product-story-item {
    --slide-size: 100% !important;
  }

  .hdt-psi-wrap {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .hdt-story-slider .hdt-psi-wrap {
    border-radius: 0;
  }

  hdt-hover-video-image :where(img, svg) {
    z-index: 2;
  }

  hdt-hover-video-image video {
    opacity: 0;
    z-index: 1;
  }

  hdt-hover-video-image.hdt-hvi-is-playing :where(img, svg) {
    opacity: 0;
    pointer-events: none;
  }

  hdt-hover-video-image.hdt-hvi-is-playing video {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }

  @media (max-width: 767.98px) {
    .hdt-slider--products-story.hdt-slides-1:not(.hdt-slider__active-false) {
      --slide-size-set: max(32rem, 45%);
    }
  }

  @keyframes hdtFadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
  }
  @keyframes hdtFadeOut {
      0% { opacity: 1; }
      100% { opacity: 0; }
  }

  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeOutRight {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(20px);
    }
  }

  /*================ 5.16. Scrolling hero media grid ================*/
  .hdt-section-scroll-hero-media-grid {
    height: clamp(300vh, calc(var(--total-media, 0) * 130vh), 800vh);
  }
  .hdt-scroll-hero-media { 
    display: grid;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
  }
  .hdt-scroll-hero-media__media {
    .hdt-hero-media-wrapper {
      pointer-events: none;
      height: 100%;
      .hdt-video {
        height: 100%;
      }
    }
  }
  .hdt-shrink-on-sroll--smg {
    grid-area: 1 / -1;
    height: 100%;
    width: 100%;
    max-height: 100vh;
    .hdt-shrink-on-sroll-inner {
      display: grid;
      height: 100%;
      width: 100%;
    }
  }
  .hdt-scroll-hero-media__first, .hdt-scroll-hero-media__second {
    grid-area: 1 / -1;
    height: 100%;
    width: 100%;
    max-height: 100vh;
    svg, img, video {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    .hdt-scroll-hero-media__content {
      opacity: 0;
    }
    .hdt-hero-media-wrapper {
      &:after {
        content: '';
        background-color: color-mix(in srgb, var(--color-overlay), transparent var(--overlay-opacity));
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        inset-inline-start: 0;
        z-index: 0;
        pointer-events: none;
      }
    }
  }
  .hdt-scroll-hero-media__second {
    clip-path: inset(70% round 100px);
  }
  .hdt-scroll-hero-media__items {
    grid-area: 1 / -1;
  }
  .hdt-scroll-hero-media__item {
    --top-start: calc(1% * var(--ty-start));
    --left-start: calc(1% * var(--tx-start));
    --ty-start1: calc(var(--ty-start) * 1vh);
    --tx-start1: calc(var(--tx-start) * 1vw);
    --ty-end1: calc(var(--ty-end) * 1vh);
    --tx-end1: calc(var(--tx-end) * 1vw);
    position: absolute;
    top: var(--top-start);
    inset-inline-start: var(--left-start);
    transform: translate(calc(-1 * var(--left-start)), calc(-1 * var(--top-start)));
    width: 8rem;
    opacity: 0;
    transition: all 2.5s ease;
    pointer-events: none;
    overflow: hidden;
    iframe, img, svg {
      height: 100%;
    }
    .hdt-hero-gallery-video {
      video {
        position: relative;
        height: auto;
      }
    }
    @media (min-width: 480px) {
      width: 10rem;
    }
    @media (min-width: 768px) {
      width: 24.3rem;
    }
  }
  .hdt-scroll-hero-media__media {
    max-height: 100vh; 
  }
  .hdt-scroll-hero-media__content {
    .hdt-media-content-wrapp {
      max-width: var(--overlap-content-mw, unset);
    }
  }
  @supports (height: 100svh) {
    .hdt-section-scroll-hero-media-grid {
      height: clamp(300svh, calc(var(--total-media, 0) * 110svh), 750svh);
    }
    .hdt-scroll-hero-media {
      height: 100svh;
    }
    .hdt-shrink-on-sroll--smg {
      max-height: 100svh;
    }
    :where(.hdt-scroll-hero-media__first, .hdt-scroll-hero-media__second),
    .hdt-scroll-hero-media__media {
      max-height: 100svh;
    }
    .hdt-scroll-hero-media__item {
      --ty-start1: calc(var(--ty-start) * 1svh);
    }
  }

  /*================ 5.16. Blog posts ================*/
  .hdt-ratio--portrait .hdt-post-card{
    --ratio-percent: 110%;
  }
  .hdt-section__main-blog .hdt-page-title{
    margin-block-end: 3rem;
  }
  .hdt-section_latest-post .hdt-blog-posts{
    --slide-spacing: var(--spacing-x)
  }
  .hdt-post-card{
    .hdt-post-cats{
      margin-block-end: 1.4rem;
      display: flex;
      gap: 1rem;
      .item-post-cat{
        display: inline-flex;
        font-size: var(--text-sm);
        text-decoration: none;
        position: relative;
        
        font-weight: var(--font-semibold);
        --height-btn: 2.4rem;
        --padding-button: 0.2rem 1rem;
        &::after{
          z-index: -1;
        }
      }
    }
    .hdt-post-title{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      padding-block-end: 1px;
    }
    .hdt-inner-post-card{
      display: grid;
      .hdt-post-card-media{
        grid-area: 1/1/2/2;
        &::after{
          content: "";
          position: absolute;
          inset: 0;
          --color-gradiend-1: color-mix(in srgb, var(--color-overlay), transparent 100%);
          --color-gradiend-2: color-mix(in srgb, var(--color-overlay), transparent 80%);
          --color-gradiend-3: color-mix(in srgb, var(--color-overlay), transparent 60%);
          background: linear-gradient(180deg, var(--color-gradiend-1) 47.1%, var(--color-gradiend-2) 72.75%, var(--color-gradiend-3) 100%);
        }
        :is(svg, img){
          width: 100%;
        }
      }
      .hdt-post-card-info {
        grid-area: 1/1/2/2;
        z-index: 2;
        position: relative;
        place-self: end start;
        justify-content: flex-end;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 50%;
        padding: var(--spacing-2) var(--spacing-2);
        border-radius: var(--rounded-blog-card);
        overflow: hidden;
        .hdt-post-card-inner-info{
          display: grid;
          grid-template-columns: 1fr auto;
          .hdt-post-cats{grid-area: 1/1/2/2;}
          .hdt-post-title{
            grid-area: 2/1/3/2;
            a:focus-visible{
              outline-offset: -0.1rem;
            }
          }
          .hdt-post-card-date{grid-area: 3/2/4/3;}
          .hdt-post-readmore{
            grid-area: 4/1/5/2;
            width: fit-content;
          }
          @media (max-width: 575.98px), (min-width: 768px) and (max-width: 991.98px){
            .hdt-post-cats{grid-area: 1/1/2/3;}
            .hdt-post-title{grid-area: 2/1/3/3;}
            .hdt-post-readmore{
              grid-area: 4/1/5/3;
            }
          }
        }
        > *{
          position: relative;
          z-index: 3;
        }
        &::before{
          content: "";
          position: absolute;
          inset: 0;
          z-index: 2;
          opacity: 1;
          -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
          transition: all 0.3s ease;
          mask-image: linear-gradient(180deg,  color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 49.04%, var(--color-foreground) 100%);
          -webkit-mask-image: linear-gradient(180deg,  color-mix(in srgb, var(--color-foreground), transparent 100%) 0%, var(--color-foreground) 49.04%, var(--color-foreground) 100%);
        }
        .hdt-post-card-date{
          align-self: flex-end;
          display: inline-flex;
          align-items: center;
          gap: 0.6rem;
          margin-block-start: 0.9rem;
          font-size: var(--text-sm);
        }
        .hdt-post-readmore{
          align-self: flex-start;
        }
        .hdt-post-card-date{
          align-self: flex-end;
          display: inline-flex;
          align-items: center;
          gap: 0.6rem;
          margin-block-start: 0.9rem;
          font-size: var(--text-sm);
        }
        .hdt-post-readmore{
          align-self: flex-start;
        }
      }
    }
  }
  
  .hdt-section_latest-post .hdt-slider{
    --inset: 1.7rem
  }
  .hdt-section_latest-post .hdt-slider-nav{display: none;}
  @media screen and (max-width: 767.98px) {
    .hdt-btn-mobile{
      margin-block-start: 3rem;
      text-align: center;
    }
    .hdt-section_latest-post .hdt-slider-nav{
      --inset: -1.5rem;
      &.hdt-block{display: block;}
      .hdt-btn--inner [circle-bg-wrap]{
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-btn-secondary), transparent 70%);  
      }
    }
  }
  @media (min-width: 768px) and (max-width: 999.98px) {
    .hdt-section_latest-post .hdt-slider__active-true .hdt-slider__container {
      flex-wrap: nowrap;
    }
    .hdt-section_latest-post .hdt-slider__active-true.hdt-slides-1 {
      --slide-size-set: 70%;
    }
  }
  @media (min-width: 1000px) and (max-width: 1399.98px) {
    .hdt-section_latest-post .md\:hdt-slider__active-true .hdt-slider__container {
      flex-wrap: nowrap;
    }
    .hdt-section_latest-post .md\:hdt-slider__active-true.md\:hdt-slides-2 {
      --slide-size-set: 41.6667%;
    }
  }
  @media (min-width: 1400px) {
    .hdt-section_latest-post .xl\:hdt-slider__active-true.xl\:hdt-slides-2 {
      --slide-size-set: 41.6667%;
    }
    .hdt-section_latest-post .xl\:hdt-slider__active-true.xl\:hdt-slides-3 {
      --slide-size-set: 30%;
    }
    .hdt-section_latest-post .xl\:hdt-slider__active-true.xl\:hdt-slides-4{
      --slide-size-set: 23%;
    }
    .hdt-section_latest-post .hdt-slider-nav{display: block;}
  }
  /*================ 5.17. Media lookbook ================*/
  .hdt-tab-lookbook-media{
    --small-column: 9.4rem;
    display: grid;
    grid-template: auto / var(--small-column) minmax(0, 1fr);
    row-gap: 3.5rem;
    overflow: hidden;
    > * {
      min-width: 0;
    }
    .hdt-list-imagetab{
      padding-inline-end: var(--spacing-1-4);
      z-index: 5;
      display: flex;
      flex-direction: column;
      row-gap: 1.9rem;
      align-self: center;
      button{
        display: grid;
        width: 100%;
        &:not(:last-child){
          margin-block-end: 1.2rem;
        }
        &[aria-current="true"] .hdt-image-tab{
          clip-path: inset(0.7rem round 50%);
        }
        &[aria-current="false"] .hdt-progress-circle{
          opacity: 0;
        }
        &:focus-visible{
          outline-offset: -0.1rem;
        }
      }
      .hdt-image-tab{
        clip-path: inset(1.3rem round 50%);
        grid-area: 1/1;
        transition: all 0.3s;
      }
      .hdt-progress-circle{
        grid-area: 1/1;
      }
      .hdt-icon-circle{
        width: 100%;
        height: auto;
      }
    }
    .hdt-tab-image-holder{
      align-self: center;
      display: grid;
      .hdt-lookbook-media{
        grid-area: 1/1;
        align-self: stretch;
        border-radius: var(--rounded-lg);
        &[hidden]{
          display: flex!important;
          visibility: hidden;
          opacity: 0;
        }
        .hdt-lb-image,.hdt-media-wrapper{
          height: 100%;
        }
        .hdt-pin-item {
          --w-pin: 2.7rem;
          --h-pin: 2.7rem;
          --inset: 0.5rem;
          --offset: 0.55rem;
          width: 2.7rem;
          height: 2.7rem;
          display: flex;
          justify-content: center;
          align-items: center;
          top: min(var(--x-pos-mb), calc(100% - var(--h-pin) + var(--inset)));
          left: min(var(--y-pos-mb), calc(100% - var(--w-pin)) + var(--inset));
          &:has(button[aria-current="true"]){
            --inset: 0rem;
            --offset: 0.8rem;
          }
          > button {
            width: calc(var(--w-pin) - 2 * var(--inset));
            height: calc(var(--h-pin) - 2 * var(--inset));
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 0.3s ease;
            .hdt-hotspots-dot{
              width: 100%;
              height: 100%;
              border-radius: var(--rounded-full);
              background: var(--pin-btn-secondary-color);
              display: block;
              z-index: 2;
              padding: var(--offset);
              animation: hdt-Pulse 2s ease-in-out infinite;
              &::before{
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                border-radius: inherit;
                background: var(--pin-btn-primary-color);
                border-radius: var(--rounded-full);
              }
            }
            .hdt-hotspots-pulse-ring{
              position: absolute;
              inset: -1.1rem;
              background-color: color-mix(in srgb, var(--pin-btn-secondary-color), transparent 60%);
              border-radius: var(--rounded-full);
              z-index: 1;
              animation: hdt-Sonar 2s ease infinite;
            }
          }
        }
      }
    }
    .hdt-tab-content-wrapper{
      display: grid;
      .hdt-tab-content{
        grid-area: 1/1;
        min-width: 0;
        &[hidden]{
          display: flex!important;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }
      }
    }
  }
  .hdt-tab-lookbook__notablist{
    --small-column: 0rem!important;
  }
  .hdt-section__media-lookbook .hdt-slide-lookbook-product{
    display: grid;
    grid-template-columns: 1fr auto;
    min-width: 100%;
  }
  .hdt-slide-lookbook-product .hdt-slide-control-mixed{
    margin-inline-start: 2rem;
    margin-inline-end: 0rem;
    position: relative;
    place-self: center;
    height: fit-content;
  }    
  .hdt-icon-circle-progress {
    --progress-color: color-mix(in srgb, var(--color-foreground), transparent 85%);
    --progress-active: var(--color-foreground);
    --cricle-width: 2px;
    .hdt-circle, .hdt-circle-progress{
      fill: none;
      stroke: var(--progress-color);
      stroke-width: var(--cricle-width);
      transition: stroke .3s ease;
    }
    .hdt-circle-progress{
      stroke-dasharray: 1.02;
      stroke-dashoffset: 1;
      stroke-width: var(--cricle-width);
      stroke: var(--progress-active);
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
      opacity: 0;
    }
  }
  .hdt-list-imagetab:not([autoplay]) .hdt-circle-progress{
    transition: stroke-dashoffset var(--hdt-remaining, 0.4s) cubic-bezier(0.7, 0, 0.3, 1);
  }
  .hdt-list-imagetab:not([autoplay]) button[aria-current="true"] .hdt-circle-progress{
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .hdt-list-imagetab[autoplay] button[aria-current="true"] .hdt-circle-progress{
    opacity: 1;
    animation: circleProgress var(--hdt-remaining, .5s) linear var(--hdt-play-state, paused) both;
  }
  @keyframes circleProgress{
    0% {
      stroke-dashoffset: 1;
    }
    100% {
        stroke-dashoffset: 0;
    }
  }
    
  .hdt-hotspot__popover_product[open-as-modal] .hdt-popover__inner{
    padding: 2.8rem 0 0;
    .hdt-btn-close-x{
      position: absolute;
      padding: 1rem;
      inset-inline-end: 0.5rem;
      inset-block-start: 0.5rem;
    }
  }
  .hdt-hotspot__popover_product .hdt-product-lookbook{
    display: flex;
    gap: 2rem;
    flex-direction: row;
    .hdt-open-quickview-btn{
      --height-btn-icon: 1.1rem;
      margin-block-start: 1.2rem;
    }
  }
  .hdt-hotspot__popover_product .hdt-product-lookbook .hdt-product-image{
    max-width: 100px;
    border-radius: var(--rounded-product-card);
    overflow: hidden;
  }
  @media (max-width: 575.98px){
    .hdt-tab-lookbook-media{
      --small-column: 7.4rem;
    }
  }
  @media (max-width: 767.98px) {
    .hdt-tab-lookbook-media{
      --rounded-lg: var(--rounded) 
    }
  }
  @media (min-width: 768px){
    .hdt-tab-lookbook-media{
      --small-column: 9.4rem;
      --small-column-2: 2.5rem;
      --w-column-end: minmax(270px, 38%);
      grid-template: 1fr/var(--small-column) 1fr var(--small-column-2) var(--w-column-end);
      .hdt-list-imagetab {
        grid-area: 1/1/1/1;
        align-self: center;
        padding-inline-end: var(--spacing-2-4);
      }
      .hdt-tab-image-holder{
        grid-area: 1/2/1/2;
      }
      .hdt-tabs-lookbook-product{
        grid-area: 1/4/1/4;
        .hdt-card-product__border{padding: 1px;}
      }
    }
    .hdt-slide-lookbook-product .hdt-slide-control-mixed{margin-inline-end: 0}
    .hdt-hotspot__popover_product{display: none;}
  }
  @media (min-width: 1150px) {
    .hdt-tab-lookbook-media{
      --small-column: 14.4rem;
      --small-column-2: minmax(4.4rem, 12%);
      --w-column-end: 45.5rem;
    }
    .hdt-slide-lookbook-product .hdt-slide-control-mixed{
      margin-inline-end: 3.5rem;
    }
  }
  .hdt-tab-image-holder .hdt-lookbook-media .hdt-lb-image{
    clip-path: inset(0 0 0 0 round var(--rounded-lg));
  }
  hdt-media-lookbook[reveal-on-scroll] .hdt-tab-image-holder .hdt-lookbook-media .hdt-lb-image{
    clip-path: inset(0 100% 0 0 round var(--rounded-lg));
  }
  hdt-media-lookbook[reveal-on-scroll] .hdt-tab-content-wrapper > .hdt-tab-content{
    opacity: 0;
  }
  hdt-media-lookbook[reveal-on-scroll] .hdt-list-imagetab button{
    opacity: 0;
    transform: translateX(-30px);
  }
  hdt-media-lookbook[reveal-on-scroll] .hdt-lookbook-media .hdt-pin-item{
    opacity: 0;
    transform: scale(0.3);
  }
  /*================ 5.18. Featured Collections ================*/
  .hdt-tab-collection{
    display: inline-flex;
    position: relative;
    margin-block-start: 2.2rem;
    max-width: 100%;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    overflow: auto hidden;
    &.hdt-tabstyle__inline{
      margin-block-end: 1rem;
    }
    button{
      display: inline-flex;
      border-radius: var(--rounded-button);
      padding:  0.6rem 1.4rem;
      font-weight: var(--font-semibold);
      min-height: 3.6rem;
      font-size: var(--text-lg);
      position: relative;
      z-index: 2;
      white-space: nowrap;
      align-items: center;
      transition: background 0.3s ease, color 0.3s ease;
      &[aria-selected="true"]{
        color: var(--color-btn-secondary);
        background: transparent;
      }
    }
    &.hdt-tabstyle__button{
      gap: 0.8rem;
      > button{
        border: 1px solid var(--color-line-border);
      }
    }
    &:after{
      content: "";
      pointer-events: none;
      background: var(--color-btn-primary);
      height: 100%;
      width: var(--ink-bar-w, 10px);
      border-radius: var(--rounded-button);
      will-change: transform,width;
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(var(--ink-bar-x, 0px));
    }
  }
  .hdt__featured-collections-wrapper .hdt-btn__collection-viewall{
    display: flex;
    width: fit-content;
    margin-inline: auto;
    margin-block-start: 3rem;
  }
  .hdt__featured-collections-wrapper .hdt-slider__viewport{
    padding-block: 2px;
  }
  @media screen and (min-width: 768px){
    .hdt-tab-collection.hdt-tabstyle__inline{
      border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%);
      padding: 0.4rem;
      border-radius: var(--rounded-button);
      background: color-mix(in srgb, var(--color-foreground), transparent 96%);
      &:after{
        top: 0.4rem;
        height: calc(var(--ink-bar-y) - 3px);
      }
    }
    .hdt-section__featured-collections .hdt-slider-nav{
      --inset: 1.7rem
    }
    .hdt__featured-collections-wrapper:has(.hdt-btn__collection-viewall){
      display: grid;
      grid-template: 1fr auto/1fr;
      .hdt-btn__collection-viewall{
        grid-area: 1/2/2/3;
        height: fit-content;
        margin-block-start: 1rem;
      }
      .hdt-section-header{
        grid-area: 1/1/2/2;
      }
      .hdt-collections__body{
        grid-area: 2/1/3/3;
      }
    }
  }

  @media (min-width: 768px) and (max-width: 1149.98px){
    .hdt-slider__overflow .hdt-collections__product .md\:hdt-slides-2:not(.md\:hdt-slider__active-false) {
      --slide-size-set: 45%;
    }
    .hdt-slider__overflow .hdt-collections__product .md\:hdt-slides-3:not(.md\:hdt-slider__active-false) {
      --slide-size-set: 30%;
    }
    .hdt-section__featured-collections .hdt-section-header.md\:hdt-text-center + .hdt-collections__body .hdt-slider.md\:hdt-slider__active-false .hdt-slider__container{
      justify-content: center;
      flex-wrap: wrap;
    }
  }
  @media screen and (min-width: 1150px){
    .hdt-slider__overflow .hdt-collections__product .xl\:hdt-slides-2:not(.xl\:hdt-slider__active-false) {
      --slide-size-set: 45%;
    }
    .hdt-slider__overflow .hdt-collections__product .xl\:hdt-slides-3:not(.xl\:hdt-slider__active-false) {
      --slide-size-set: 30%;
    }
    .hdt-slider__overflow .hdt-collections__product .xl\:hdt-slides-4:not(.xl\:hdt-slider__active-false) {
      --slide-size-set: 22.43%;
    }
    .hdt-slider__overflow .hdt-collections__product .xl\:hdt-slides-5:not(.xl\:hdt-slider__active-false) {
      --slide-size-set: 18.5%;
    }
    .hdt-section__featured-collections .hdt-section-header.md\:hdt-text-center + .hdt-collections__body .hdt-slider.xl\:hdt-slider__active-false .hdt-slider__container{
      justify-content: center;
      flex-wrap: wrap;
    }
  }
  /*================ 5.18a. Hero collections ================*/
  .hdt-hero-collections {
    max-width: 100%;
    height: clamp(200vh, calc(50vh * var(--total-items)), 1000vh);
    padding-inline: 0;
    --angle: 7deg;
    --pb-content: 1.5rem;
    --padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .hdt-hero-bg-animate {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: 100vh;
    position: sticky;
    z-index: 1;
    top: 0;
    clip-path: inset(0 0 0 0 round 0);
    display: grid;
    opacity: 1;
    &.hdt-hide-fade-ani {
      opacity: 0;
    }
  }
  .hdt-hero-collections-viewport {
    grid-area: 1/ 1 / 2 / 2;
    display: flex;
    position: sticky;
    z-index: 2;
    top: 0;
    width: 100%;
    /* max-width: calc(100% - var(--pd-container, 3rem) * 2); */
    height: 100vh;
    margin-inline: auto;
    align-items: center;
    overflow: clip;
  }
  .hdt-hero-collections-content {
    --gap: var(--pb-content);
    --head-width: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--gap, 2.5rem);
    padding-block: var(--pb-content);
    position: sticky;
    inset-block: 3rem;
    margin-block: 3rem;
    .hdt-custom-background {
      background: var(--color-background);
      background: var(--gradient-background);
      color: var(--color-foreground);
      opacity: 0;
      height: 100vh;
      top: calc(0.5*(var(--content-height, 0)) - 50vh);
    }
    &.hdt-show-bg-fade-ani {
      .hdt-custom-background {
        opacity: 1;
      }
    }
  }
  .hdt-hero-collections-content .hdt-section__header-wrap {
    width: 100%;
    flex: none;
    padding-inline: var(--padding-inline);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }

  .hdt-hero-collections-content .hdt-section__header {
    transform-origin: left top;
    > * + .hdt-btn {
      margin-top: 3rem;
    }
  }
  .hdt-hero-collections.hdt-has-least-items .hdt-hero-collections-content .hdt-section__header {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .hdt-collections-tilted-scroll {
    flex: none;
    flex-grow: 1;
    width: calc(100vw - var(--head-width) - 2.5rem);
    --card-width: min(calc(100vw - 3rem - var(--pd-container, 3rem) - var(--padding-inline) * 3), 55rem);
    --pis: 2.4rem;
    padding-inline: 1.5rem;
    position: relative;
    z-index: 1;
    &.hdt-has-cards:after {
      content: '';
      position: absolute;
      z-index: 2;
      inset-block: -3rem auto;
      inset-inline: auto 0;
      width: min(34rem, 20%);
      height: calc(100% + 6rem);
      pointer-events: none;
      background-image: linear-gradient(calc(90deg * var(--value-logical-flip)), transparent 0, var(--color-background) 100%);
      opacity: clamp(0, calc(1 - var(--opacity-progress, 1)), 1);
    }
  }

  .hdt-section__hero-collections--with-bg {
    .hdt-collections-tilted-scroll.hdt-has-cards:after {
      display: none;
    }
  }

  .hdt-collections-tilted-scroll-inner {
    display: flex;
    position: relative;
    width: max-content;
  }

  .hdt-collection-card--ch {
    width: var(--card-width);
    flex: none;
    & + .hdt-collection-card--ch {
      margin-inline-start: var(--pis);
    }
  }

  .hdt-collections-tilted-scroll .hdt-cl-tilted-card {
    isolation: isolate; 
    perspective: 1000px;
    perspective-origin: calc(50% + 50% * var(--value-logical-flip)) 50%;
    --angle-percent: 1;
    .hdt-cl-tilted-card-inner {
      --tilt: calc(var(--value-logical-flip) * var(--angle) * var(--angle-percent));
      transform-origin: calc(50% - 50% * var(--value-logical-flip)) center;
      transform: scaleX(calc(1 / cos(var(--tilt)))) rotateY(var(--tilt));
      backface-visibility: hidden;
      will-change: transform;
    }
    &.hdt-cl-tilted-card--right {
      .hdt-cl-tilted-card-inner {
        transform-origin: right center;  
      }
    }
  }
  .hdt-hero-collections .hdt-collection-card__content {
      position: absolute;
      z-index: 2;
      inset-inline-start: 0;
      bottom: 0;
      width: 100%;
      padding-inline: 2.5rem;
      padding-bottom: var(--card-content-pb, 2.5rem);
  }

  .hdt-hero-collections {
    @media (max-width: 1023.98px) {
      height: max-content;
      .hdt-hero-bg-animate {
        height: auto;
        clip-path: unset !important;
      }
      .hdt-hero-collections-viewport {
        height: auto;
      }
      .hdt-hero-collections-content {
        clip-path: unset !important;
        position: relative;
        inset-block: unset;
        .hdt-section__header-wrap {
          padding-inline: 1.5rem;
        }
      }
      .hdt-collections-tilted-scroll {
        scrollbar-width: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        width: 100%;
        padding-inline: 0;
      }
      .hdt-collections-tilted-scroll-inner {
        --pis: 1.5rem;
        --angle: 0;
        padding-inline: 1.5rem;
        @media (min-width: 768px) {
          --pis: 3rem;
          padding-inline: 3rem;
        }
        .hdt-collection-card--ch {
          scroll-snap-align: center;
          scroll-snap-stop: always;
        }
      }
    }
    @media (min-width: 768px) and (max-width: 1023.98px) {
      .hdt-collections-tilted-scroll-inner {
        --pis: 3rem;
          padding-inline: 3rem;
      }
      .hdt-hero-collections-content {
        .hdt-section__header-wrap {
          padding-inline: 3rem;
        }
      }
    }
  }

  @media (min-width: 768px) {
    .hdt-collections-tilted-scroll {
      --card-width: 45vw;
      padding-inline: 3rem;
    }
    .hdt-hero-collections {
      --padding-inline: 3rem;
    }
  }

  @media (min-width: 1150px) {
    .hdt-hero-collections-content {
      flex-direction: row;
      --gap: 2.5rem;
      --head-width: min(40vw, 50rem);
    }
    .hdt-hero-collections {
      --padding-inline: 5rem;
      --pb-content: 7.2rem;
    }
    .hdt-hero-collections-content .hdt-section__header-wrap {
      width: var(--head-width);
      padding-inline: var(--padding-inline) 0;
    }
    .hdt-collections-tilted-scroll {
      padding-inline: 0;
    }
  }

  @media (min-width: 1400px) {
    .hdt-collections-tilted-scroll {
      --card-width: min(32vw, 75rem);
    }
  }

  @media (max-width: 1149.98px) {
    .hdt-hero-collections .hdt-section__header {
      opacity: 1 !important;
      transform: scale(1) !important;
    }
  }
  /*================ 5.18b. Custom HTML ================*/
  .hdt-custom-html iframe {
    width: 100%;
  }
  .hdt-custom-html-wrap--rounded {
    overflow: hidden;
  }

  /*================ 5.18c. Contact form ================*/
  .hdt-contact-form-wrap {
    &:not(.hdt-contact-form--two-cols) {
      max-width: 100rem;
      margin-inline: auto;
    }
    .hdt-field {
      .hdt-property-option-wrap {
        margin-block-start: 1.2rem;
        .hdt-property-option {
          + .hdt-property-option {
            margin-top: .5rem;
          }
        }
      }
      &.hdt-contact__custom-field {
        > select, > input, > textarea {
          margin-block-start: 0;
        }
      }
    }
    .hdt-form-row, .hdt-field {
      + .hdt-contact__custom-field {
        margin-top: 1.2rem;
      }
    }
  }
.hdt-form {
  padding: 3rem 2rem;
  border-radius: var(--rounded-sm);
  background: color-mix(in srgb, var(--color-foreground), transparent 96%);
  border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%);;
  .hdt-btn[type="submit"] {
    margin-top: 1.8rem;
    & + p {
      margin-top: 3rem;
    }
  }
}

  .hdt-contact-form--two-cols {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .hdt-theme-block--icon-with-text + .hdt-theme-block--icon-with-text {
    margin-top: 1.8rem;
  }

  .hdt-iwt--wrap {
    display: inline-flex;
    align-items: center;
    gap: 1.8rem;
  }

  .hdt-text-right .hdt-iwt--wrap {
    flex-direction: row-reverse;
  }

  .hdt-iwt--text {
    text-align: start;
  }

  .hdt-text-right .hdt-iwt--text {
    text-align: end;
  }

  .hdt-iwi--icon {
    width: var(--icon-h);
    height: var(--icon-h);
    min-width: var(--icon-mw, auto);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--color-foreground), transparent 96%);
    border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%);
    border-radius: 50%;
  }

  .hdt-iwi--icon > :where(svg, img) {
    width: auto;
    height: 100%;
    max-width: 100%;
  }

  @media (min-width: 480px) {
    .hdt-form {
        padding: 4.4rem 3rem;
        border-radius: var(--rounded-lg);
    }
  }

  @media (min-width: 768px) {
    .hdt-contact-form--two-cols {
      flex-direction: row;
      justify-content: space-between;
      .hdt-section-header--contact {
        width: 40%;
      }
      .hdt-form-wrap--contact {
        width: 60%;
      }
    }
    .hdt-iwi--icon {
      padding: 1.5rem;
      width: var(--icon-h-md);
      height: var(--icon-h-md);
    }
  }

  @media (min-width: 1150px) {
    .hdt-contact-form--two-cols {
      .hdt-section-header--contact {
        width: max(54rem, 50%);
      }
      .hdt-form-wrap--contact {
        width: max(54rem, 50%);
      }
    }
    .hdt-iwi--icon {
      width: var(--icon-h-lg, var(--icon-h-md));
      height: var(--icon-h-lg, var(--icon-h-md));
    }
  }

  /*================ 5.19. Products with countdown ================*/
  .hdt-products-w-countdown-wrapper{
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-y);
    column-gap: var(--spacing-x);
    .hdt-countdown-offer-card{
      flex: 0 0 100%;
      border-radius: var(--rounded-product-card);
      overflow: hidden;
      .hdt-coundtdown-inline{
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 100%;
        padding: 0.6rem 0.4rem;
      }
      .hdt-media-content{
        display: flex;
        align-items: center;
        flex-direction: column;
        min-height: 100%;
        padding-block-end: 3.2rem;
        text-align: center;
        .hdt-label-emoij{
          margin-block-end: auto;
          width: 100%;
          justify-content: center;
          background: var(--color-btn-primary);
          color: var(--color-btn-secondary);
          padding: 0.5rem 1.6rem;
          min-height: 3.7rem;
          border-radius: 0 0 2rem 2rem;
        }
      }
    }
    .hdt-slider__products{
      max-width: 100%;
      flex: 1;
    }
  }
  .hdt-countdown-offer-card .hdt-media-overlap-content {
    @layer themeh.styles.mobile.default {
    --media-overlap-content-gap-r: min(8vw, 0px);
    --media-overlap-content-gap-c: min(8vw, 28px);
    }
    @layer themeh.styles.tablet.default {
      --media-overlap-content-gap-r: min(5vw, 0px);
      --media-overlap-content-gap-c: min(2vw, 28px);
    }
    @layer themeh.styles.base.default {
      --media-overlap-content-gap-r: min(5vw, 0px);
      --media-overlap-content-gap-c: min(2vw, 30px);
    }
  }
  @media screen and (min-width: 768px) {
    .hdt-products-w-countdown-wrapper{
      position: relative;
      flex-direction: row;
      .hdt-countdown-offer-card{
        position: relative;
        z-index: 2;
        flex: 0 0 var(--fixed-col);
      }
      .hdt-media-overlap-content{
        min-height: 100%;
      }
      .hdt-slider__products{
        max-width: calc(100% - var(--fixed-col) - var(--spacing-x))
      }
    }
  }

  @media (min-width: 768px) and (max-width: 1149.98px) {
    .hdt-section__products-with-countdown.md\:hdt-products-slider__false .hdt-products-w-countdown-wrapper{
      --fixed-col: calc(100% / 3);
    }
    .hdt-section__products-with-countdown.md\:hdt-products-slider__true .hdt-products-w-countdown-wrapper{
      --fixed: min(8vw, 100px);
      --fixed-col: calc((100% - var(--fixed) - var(--spacing-x))/ 3);
    }
    .hdt-slider__products.md\:hdt-slider__active-true.hdt-slider{
      --slide-size-set: calc((100% - var(--fixed)) / 2)
    }
    .hdt-section__products-with-countdown.md\:hdt-products-slider__false .hdt-products-w-countdown-wrapper{
      justify-content: center;
    }
    .hdt-slider__products.md\:hdt-slides-2[data-sizes="1"]{
      max-width: var(--fixed-col);
      --slide-size-set: 100%
    }
    .hdt-section__products-with-countdown.md\:hdt-products-slider__true .hdt-container-xl{
      padding-inline-end: 0;
      .hdt-slider__products{
        overflow: hidden;
      }
    }
    .hdt-section__products-with-countdown.md\:hdt-products-slider__true .hdt-container{
      padding-inline-end: 0;
      .hdt-slider__products{
        overflow: hidden;
      }
    }
  }
  @media (min-width: 1150px){
    .hdt-section__products-with-countdown.xl\:hdt-products-slider__false .hdt-products-w-countdown-wrapper{
      --fixed-col: calc(100% / var(--col-xl));
    }
    .hdt-section__products-with-countdown.xl\:hdt-products-slider__true .hdt-products-w-countdown-wrapper{
      --fixed: min(8vw, 125px);
      --fixed-col: calc((100% - var(--fixed) + var(--spacing-x))/ var(--col-xl) - var(--spacing-x));
    }
    .hdt-slider__products.xl\:hdt-slider__active-true.hdt-slider{
      --slide-size-set: calc( (100% - var(--fixed)) / (var(--col-xl) - 1 ) )
    }
    .hdt-slider__products.xl\:hdt-slides-3[data-sizes="2"]{
      max-width: calc(2*var(--fixed-col));
      --slide-size-set: 50%
    }
    .hdt-slider__products.xl\:hdt-slides-2[data-sizes="1"],
    .hdt-slider__products.xl\:hdt-slides-3[data-sizes="1"]{
      max-width: var(--fixed-col);
      --slide-size-set: 100%
    }
    .hdt-section__products-with-countdown.xl\:hdt-products-slider__false .hdt-products-w-countdown-wrapper{
      justify-content: center;
    }
    .hdt-section__products-with-countdown.xl\:hdt-products-slider__true .hdt-container{
      padding-inline-end: 0;
      max-width: 100%;
      .hdt-slider__products{
        overflow: hidden;
      }
    }
    .hdt-section__products-with-countdown.xl\:hdt-products-slider__true .hdt-container-xl{
      padding-inline-end: 0;
      .hdt-slider__products{
        overflow: hidden;
      }
    }
    .hdt-section__products-with-countdown.xl\:hdt-products-slider__true .hdt-container .hdt-products-w-countdown-wrapper{
      width: calc(100vw - (100vw - min(var(--container-max-width-padding-xl), 100%))/2 - 5rem);
      margin-left: auto;
    }
  }
  /*================ 5.20. Feature stats showcase ================*/
  .hdt-section-feature-stats .hdt-media-overlap-content {
    @layer themeh.styles.mobile.default {
    --media-overlap-content-gap-r: min(8vw, 50px);
    --media-overlap-content-gap-c: min(5vw, 30px);
    }
    @layer themeh.styles.tablet.default {
      --media-overlap-content-gap-r: min(5vw, 50px);
      --media-overlap-content-gap-c: min(5vw, 50px);
    }
    @layer themeh.styles.base.default {
      --media-overlap-content-gap-r: min(5vw, 50px);
      --media-overlap-content-gap-c: min(5vw, 50px);
    }
  }
  .hdt-section__keyfeatures{
    margin-bottom: var(--section-mb);
    @media (min-width: 768px) {
      margin-bottom: calc(var(--section-mb-xl) * 0.85);
    }
    @media (min-width: 1150px) {
      margin-bottom: var(--section-mb-xl);
    }
  }
.hdt-keyfeature-media{
  margin-block-start: var(--space-content);
  display: block;
  .hdt-media-wrapper{
    display: block;
    width: 100%;
    overflow: hidden;
  }
}
  .hdt-section-feature-stats .hdt-media-content{
    padding-inline: 3rem;
    .hdt-btn, .hdt-btn-link{
      margin-block-start: 4.5rem;
    }
  }
  .hdt-list-featurebox{
    --slide-spacing: 4rem;
    /* max-width: 100rem; */
    margin-inline: auto;
    .hdt-slider__container{
      align-items: stretch;
    }
    .hdt-feature-box{
      /* min-width: 14.5rem; */
      /* max-width: calc(29rem + var(--slide-spacing)); */
      &.hdt-feature-bg .hdt-inner-feature-box{
        --bg-gradient-1: color-mix(in srgb, var(--color-foreground), transparent 84%);
        --bg-gradient-2: color-mix(in srgb, var(--color-foreground), transparent 100%);
        background: radial-gradient(106.32% 228.79% at 0.9% 2.98%, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 100%);
      }
      .hdt-inner-feature-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: var(--rounded-sm);
        backdrop-filter: blur(42);
        --webkit-backdrop-filter: blur(42);
        padding: 1.8rem 1.5rem;
        min-height: 100%;
        width: 100%;
        border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
      }
      .hdt-feature__icon .hdt-icon-wrap{
        display: flex;
        justify-content: center;
        color: var(--color-foreground);
        > svg{
          --icon-h-mb: calc(var(--icon-h) * 0.85);
          height: var(--icon-h-mb);
          width: var(--icon-h-mb);
        }
      }
      .hdt-feature-head{margin-block-end: 0.4rem; font-weight: var(--font-semibold);}
      .hdt-feature__icon{
        margin-block-end: 2rem;
        animation: plushIcon ease 1s infinite;
      }
    }
    .hdt-feature-box-heading {
      margin-bottom: 1px;
      font-weight: var(--font-semibold);
      font-size: var(--mb-font-title);
      &.hdt-font-body{
        font-family: var(--font-body-family);
        font-weight: normal;
      }
    }
  }
  @media (max-width: 767.98px) {
    .hdt-section-feature-stats .hdt-mobile-content-below {
      display: block;
    }
    .hdt-list-featurebox.hdt-slider__active-false.hdt-slides-2 .hdt-feature-box:nth-child(2n+1){
      border-inline-start: none;
    }
    .hdt-list-featurebox.hdt-slider__active-false .hdt-slider__container{
      justify-content: center;
    }
    .hdt-section-feature-stats .hdt-mobile-content-below .hdt-media-content{
      background: var(--color-background);
      background: var(--gradient-background);
      padding: 2.8rem min(5vw, 3rem);
      max-width: 100%;
    }
    .hdt-list-featurebox{
      --slide-spacing: 2rem;
    }
    .hdt-section-feature-stats .hdt-list-featurebox .hdt-feature-box{
      --slide-size: 50%;
    }
  }
  @media (max-width: 575.98px) {
    .hdt-section-feature-stats .hdt-list-featurebox .hdt-feature-box{
      --slide-size: 100%;
    }
  }
  @media (min-width: 768px) {
    .hdt-feature__icon .hdt-icon-wrap > svg{
        height: var(--icon-h);
        width: var(--icon-h);
    }
    .hdt-list-featurebox.md\:hdt-slider__active-false .hdt-slider__container{
      justify-content: center;
    }
    .hdt-feature-box{
      max-width: calc(29rem + var(--slide-spacing));
      .hdt-feature-box-heading {
        font-size: var(--font-title);
      }
    }
  }
  @media(min-width: 768px) and (max-width: 1149.98px){
    .hdt-list-featurebox.md\:hdt-slider__active-false.md\:hdt-slides-3 .hdt-feature-box:nth-child(3n+1){
      border-inline-start: none;
    }
    .hdt-list-featurebox.md\:hdt-slider__active-false.md\:hdt-slides-2 .hdt-feature-box:nth-child(2n+1){
      border-inline-start: none;
    }
  }
  /*=========== 5.21. Before/after image ============*/
  .hdt-bf-image-last {
    will-change: clip-path;
    clip-path: inset(0 0 0 var(--percent-val, 0%));
  }
  .hdt-bf-range {
    position: relative;
    grid-area: 1/-1;
    z-index: 2;
    margin: 0;
    writing-mode: horizontal-tb;
    -ms-touch-action: auto;
    touch-action: auto;
    cursor: ew-resize;
    &[orient=vertical] {
      writing-mode: vertical-lr;
      direction: rtl;
      transform: rotate(180deg);
      cursor: ns-resize;
    }
  }
  .hdt-bf-image-handle {
    --bf-w-handle: 3rem;
    --bf-h-handle: 4.5rem;
    width: var(--bf-w-handle);
    height: 100%;
    pointer-events: none;
    transform: translateX(calc(-50% * var(--value-logical-flip)));
    inset-block: 0;
    inset-inline: var(--percent-val, 0%) 0;
    display: grid;
    grid: 1fr var(--bf-w-handle) 1fr / none;
    place-items: center;
    &:before, &:after {
      content: '';
      width: .2rem;
      background-color: var(--bg-bf);
      display: inline-block;
      height: 100%;
      z-index: 1;
    }
    > span:not(.sr-only) {
      width: var(--bf-w-handle);
      height: var(--bf-h-handle);
      color: var(--icon-bf);
      text-align: center;
      background-color: var(--bg-bf);
      border-radius: var(--rounded-full);
      transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      z-index: 2;
    }
  }
  .dir--rtl .hdt-bf-image-last{
    clip-path: inset(0 calc(var(--percent-val, 0%)) 0 0);
  }
  .hdt-before-after[vertical]{
    .hdt-bf-image-last {
      clip-path: inset(calc(var(--percent-val, 0%)) 0 0 0);
    }
    .hdt-bf-image-handle {
      height: var(--bf-w-handle);
      width: 100%;
      transform: translateY(-50%);
      inset-inline: 0;
      inset-block: calc(var(--percent-val, 0%)) 0;
      grid: none / 1fr var(--bf-h-handle) 1fr;
      > span > svg{
        transform: rotate(90deg);
      }
      &:before, &:after {
        height: .2rem;
        width: 100%;
      }
      > span:not(.sr-only){
        height: var(--bf-w-handle);
        width: var(--bf-h-handle);
      }
    }
    .hdt-bf-image-first .hdt-bf-image_caption {
      inset: var(--bf-pos) auto auto var(--bf-pos);
    }
  }
    
  .hdt-ratio > .hdt-bf-image_caption {
    --bf-pos: 1.5rem;
    position: absolute;
    inset-block: auto var(--bf-pos);
    inset-inline-start: var(--bf-pos);
    background-color: transparent;
    color: var(--color-foreground);
    padding: 0;
    max-width: calc(50% - (var(--bf-pos) * 2));
    z-index: 2;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    @media screen and (max-width: 767.98px) {
      &{
        font-size: var(--text-sm);
      }
    }
  }
  .hdt-before-after[dragging] .hdt-ratio > .hdt-bf-image_caption {
    opacity: 0;
    transition-delay: 0s;
  }
  .hdt-bf-image-last > .hdt-bf-image_caption {
    inset-inline: auto var(--bf-pos);
  }
  hdt-before-after:focus-within .hdt-bf-image-handle > span {
    outline: var(--color-focus) auto 1px;
  }
  @media (min-width: 768px) {
    .hdt-ratio>.hdt-bf-image_caption {
      --bf-pos: 2rem;
    }
    .hdt-bf-image-handle {
      --bf-w-handle: 3.5rem;
      --bf-h-handle: 5rem;
    }
  }
  /*============== 5.22. Products compare =============*/
  .hdt-compare-wrapper{
    border-radius: var(--rounded-lg);
    overflow: hidden;
    max-width: 100%;
    box-shadow: 0 -1px 0 0 var(--color-line-border),0 1px 0px 0 var(--color-line-border),-1px 0px 0 0px var(--color-line-border), 1px 0px 0 0px var(--color-line-border);
    &.hdt-compare__card{
      --w-color-variant: 2.2rem;
      --gap-col: 1.6rem;
    }
    .hdt-compare-inner{
      overflow-x: auto;
      width: 100%;
      scroll-behavior: auto;
      -webkit-overflow-scrolling: touch;
      &::part(hdt-row){
        position: relative;
      }
      &::part(hdt-pr-info-slot){
        display: flex;
      }
      &[dragging] {
        cursor: grabbing;
        :where(a, img) {
        pointer-events: none;
        }
      }
      .hdt-row-last .hdt-btn{overflow: hidden;}
    }
    .hdt-price-wrapp{
      font-size: var(--text-base);
      font-weight: var(--font-semibold)
    }
    .hdt-pr-image{
      border-radius: var(--rounded-sm);
      overflow: hidden;
    }
    .hdt-pr-variant-swatches{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      row-gap: 0.6rem;
      .hdt-size-swatch{
        width: 3.2rem;
        height: 3.2rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--color-line-border);
        background: var(--color-background);
        border-radius: var(--rounded-xs);
        &:not(:last-child){
          margin-inline-end: 0.6rem;
        }
      }
      &:has(.hdt-color-swatch){
        row-gap: 0.8rem;
      }
      .hdt-color-swatch{
        display: inline-flex;
        margin-inline-start: 0.8rem;
        align-items: center;
        &:first-child{
          margin-inline-start: 0;
        }
        &::after{
          content: "";
          width: var(--w-color-variant, 1.2rem);
          height: var(--w-color-variant, 1.2rem);
          border: 1px solid var(--color-line-border);
          border-radius: var(--rounded-full);
          background-image: var(--hdt-bg-image);
          background-color: var(--bg-color);
          background-repeat: no-repeat;
          background-size: cover;
        }
      }
      .hdt-color-swatch + .hdt-text-swatch, .hdt-text-swatch + .hdt-text-swatch, .hdt-text-swatch + .hdt-color-swatch{
        margin-inline-start: 0;
        align-items: center;
        &:before{
          content: ",";
          margin-inline-end: 0.5rem;
        }
      }      
    }
    .hdt-compare-row{
      display: flex;
    }
    .hdt-icon-metafield{
      color: var(--icon-color, #36A151);
      margin-inline-end: 0.8rem;
      padding-block-start: 0.3rem;
      flex-shrink: 0;
      svg{
        width: auto;
        height: var(--icon-height, 16px);
        fill: var(--icon-color);
      }
    }
  }
  
  .hdt-rating-star {
    --star-size: 1.6rem;
    --star-height: 1.2rem;
    display: inline-flex;
    position: relative;
    width: calc(5 * var(--star-size));
    height: var(--star-height);
    background: color-mix(in srgb, var(--color-foreground), transparent 85%);
    mask-image: url('icon-star.svg');
    -webkit-mask-image: url('icon-star.svg');
    mask-size: var(--star-size) var(--star-height);
    mask-repeat: repeat-x;
    &::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
      width: calc((var(--rating) + var(--rating-decimal)) / var(--rating-max) * 100%);
      height: 100%;
      background: var(--color-rating,#FC9B2C);
    }
  }
  .hdt-rating-text{
    margin-inline-start: 0.8rem;
  }  
  /* Style table */
  .hdt-compare__table .hdt-compare-col{
    background: color-mix(in srgb, var(--color-foreground), #ffffff 98%);
    padding: var(--spacing-1-6) var(--spacing-2);
    flex: 0 0 80%;
    position: relative;
    box-shadow: inset -1px -1px 0 var(--color-line-border);
    &.hdt-col-first{
      display: none;
    }
    &.hdt-row-last {
      box-shadow: inset -1px 0 0 var(--color-line-border);
    }
    &.hdt-col-rowfirst{
      background-color: color-mix(in srgb, var(--color-foreground), #ffffff 96%);
    }
    &.hdt-col-first.hdt-col-rowfirst{
      background: color-mix(in srgb, var(--color-foreground), #ffffff 96%);
    }
  }
  /* Style card */
  .hdt-compare__card{
    --pading-col: 2.5rem;
    .hdt-compare-col{
      flex: 0 0 80%;
      padding: 1rem var(--pading-col) 2.8rem;
      position: relative;
      &.hdt-compare-col-info{
        padding-block-end: 2.2rem;
      }
      &:after{
        content: "";
        height: 1px;
        display: flex;
        background: var(--color-line-border);
        position: absolute;
        inset: 0 var(--pading-col) auto;
      }
      &.hdt-col-rowfirst::before, &.hdt-col-rowfirst::after{
        display: none;
      }
      &.hdt-col-rowfirst{
        padding-top: var(--spacing-2-8);
        padding-block-end: var(--spacing-2);
      }
      &.hdt-row-even{
        background: color-mix(in srgb, var(--color-foreground), transparent 96%);
      }
      &.hdt-compare-col-btn{
        padding-top: 0;
        padding-bottom: 3.2rem;
      }
      &.hdt-compare-col-btn::before, &.hdt-compare-col-btn:after{
        display: none;
      }
    }
    .hdt-cprow-base .hdt-compare-col:before, .hdt-row-btn-detail .hdt-compare-col:before{
      display: none;
    }
    .hdt-compare-row.hdt-row-btn-detail .hdt-compare-col:after{
      display: none;
    }
    .hdt-row-btn-detail .hdt-compare-col{
      padding-top: 0.5rem
    }
    .hdt-compare-row:last-child .hdt-compare-col{
      padding-bottom: var(--spacing-3-2);
    }
    .hdt-pr-image{
      margin-block-end: var(--spacing-1-4);
    }
    .hdt-price-wrapp{
      margin-block-start: var(--spacing-0-2);
      font-size: var(--text-lg);
    }
    .hdt-pr-color-swatches label{
      width: 2.2rem;
      height: 2.2rem;
    }
    .hdt-rating .hdt-rating-text:before{
      display: inline-flex;
      content:"(";
    }
    .hdt-rating .hdt-rating-text:after{
      display: inline-flex;
      content:")";
    }
  }
  .hdt-compare__table .hdt-compare-col:before,
  .hdt-compare__card .hdt-compare-col:before{
    content: attr(data-title);
    display: flex;
    margin-bottom: var(--spacing-0-8);
    font-weight: var(--font-semibold);
  }
  @media (min-width: 576px){
    .hdt-compare__card .hdt-compare-col,
    .hdt-compare__table .hdt-compare-col{
      flex: 0 0 65%;
    }
  }
  @media (min-width: 768px) {
    .hdt-compare__card{
      --pading-col: 3.7rem;
      .hdt-compare-col{
        flex: 0 0 calc(100% / 2);
      }
    }
    .hdt-compare__table{
      --width-col-1: 18rem;
      .hdt-compare-col{
        flex: 0 0 calc((100% - var(--width-col-1))/2);
        background: color-mix(in srgb, var(--color-foreground), transparent 98%);
        padding: var(--spacing-1) var(--spacing-2);
        flex: 0 0 calc((100% - var(--width-col-1))/2);
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        &.hdt-col-first{
          position: sticky;
          inset-inline-start: 0;
          flex: 0 0 var(--width-col-1);
          z-index: 3;
          display: inline-flex;
          background: color-mix(in srgb, var(--color-foreground), #ffffff 98%);
          &:before{
            content: attr(data-title);
            font-weight: var(--font-semibold);
          }
        }
        &:not(.hdt-col-first):before{
          display: none;
        }
        &.hdt-compare-col-image{
          padding-block: var(--spacing-1-8);
        }
        &.hdt-compare-col-btn{
          padding-block: var(--spacing-1-4);
        }
        &:before{
          margin-bottom: 0;
        }
      }
    }
  }
  @media (min-width: 1150px) {
    .hdt-compare__card{
      --pading-col: 5.7rem;
      .hdt-compare-col{
        flex: 0 0 calc(100% / 3);
      }
    }
    .hdt-compare__table .hdt-compare-col{
      flex: 0 0 calc((100% - var(--width-col-1))/3);
    }
  }

  /*================ 5.23. Hero stack scroll ================*/
  .hdt-scroll-stack-wrapper{
    position: relative;
    height: var(--height-stack);
    max-width: 100%;
    .hdt-stack-sticky{
      position: sticky;
      top: max(calc(var(--hdt-fill-height) - var(--height-item))/2, var(--height-header-fixed, 0px));
      overflow: hidden;
      transform-style: preserve-3d;
      height: var(--height-item);
    }
  }
  
  .hdt-group-stack-scroll{
    --gap-hero: 3rem;
    display: flex;
    will-change: transform;
    transform-style: preserve-3d;
    column-gap: var(--gap-hero);
    height: 100%;
    .hdt-hero-media{
      display: flex;
      width: 100%;
      flex: 0 0 auto;
      min-height: 100%;
      will-change: transform;
      .hdt-media-overlap-content{
        width: 100%;
      }
      .hdt-media-wrapper{
        transform-style: preserve-3d;
        img{
          max-width: 125%;
          min-width: 125%;
          will-change: transform;
          z-index: -1;
        }
      }
    }
    .hdt-media-overlap-content {
      @layer themeh.styles.tablet.default {
        --media-overlap-content-gap-r: min(5vw, 50px);
        --media-overlap-content-gap-c: min(6vw, 50px);
      }
      @layer themeh.styles.base.default {
        --media-overlap-content-gap-r: min(5vw, 50px);
        --media-overlap-content-gap-c: min(7vw, 100px);
      }
    }
  }
  /*========= 5.24. FAQs =========*/
  hdt-accordion.hdt-accordion {
    box-sizing: content-box;
    display: block;
  }
  .hdt-faqs-wrapper .hdt-section-title{
    --header-bottom-margin-md: 0;
    --header-bottom-margin: 3.5rem;
  }
  .hdt-faqs-content hdt-accordion {
    display: block;
    border-block-end: 1px solid var(--color-line-border);
    .hdt-accordion-heading{
      gap: 1.6rem;
      align-items: flex-start;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      padding-block: 2.2rem;
      min-height: 9.3rem;
    }
    .hdt-accordion-content {
      margin-block-start: -1.25rem;
      padding-block-end: 2.5rem;
      padding-inline-end: 1.25rem;
    }
    &:first-child .hdt-accordion-heading{
      padding-block-start: 0;
      min-height: auto;
    }
    &:last-child{
      border-block-end: none;
    }
  }
  .hdt-accordion-heading .hdt-icon-wrap{
    width: 3.3rem;
    height: 3.3rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounded-full);
    background: color-mix(in srgb, var(--color-foreground), transparent 92%);
    color: var(--color-foreground);
    transition: transform 0.3s;
    will-change: transform;
  }
  .hdt-accordion-heading[aria-expanded="true"] .hdt-icon-wrap{
    transform: rotate(45deg);
  }
  @media screen and (min-width: 768px) {
    .hdt-faqs-wrapper{
      display: flex;
      gap: min(calc(var(--gap-content)*0.6), 40px);
      > div{
        flex: 0 1 50%;
      }
      .hdt-section-title .hdt-inner-section-title{
        position: sticky;
        top: 200px;
      }
      &.hdt-title__right{
        flex-direction: row-reverse;
      }
    }
    
  }
  @media screen and (min-width: 1150px) {
    .hdt-faqs-wrapper{
      gap: var(--gap-content);
    }
  }
  /*=========== 5.25. Shop the look ===========*/
  .hdt-shop-the-look-wrapper{
    .hdt-shop-the-look-image{
      margin-block-end: 3.5rem;
      display: inline-flex;
      padding-inline: 0.2rem;
      .hdt-media-overlap-content{width: 100%;}
    }
    .hdt-section-title{
      margin-block-end: 0;
    }
    .hdt-shop-the-look-products{
      .hdt-slider__viewport{padding: 0.2rem;}
    }
  }
  .hdt-shop-the-look-products.hdt-slider__active-true{
    --slide-size-set: 75%
  }
  @media screen and (min-width: 768px) {
    .hdt-shop-the-look-image .hdt-media-overlap-content{
      top: calc(var(--height-header-fixed, 0px) + 30px - var(--offset-header-fixed,0px));
      max-height:calc(var(--hdt-fill-height) - var(--height-header-fixed, 0px) - 30px + var(--offset-header-fixed,0px) - 30px - var(--bar-mobile-height, 0px));
      position: sticky;
    }
    .hdt-shop-the-look-wrapper{
      display: flex;
      flex-direction: row;
      gap: 7.4rem;
      .hdt-shop-the-look-image{
        flex: 0 0 55%;
        margin-block-end: 0;
        .hdt-media-content{
          padding-inline: 5rem;
          transition: padding 0.3s;
          padding-block-end: 6.5rem;
        }
        hdt-tilt-card .hdt-media-content{
          padding-block-end: 1.5rem;
        }
      }
      .hdt-shop-the-look-products{
        flex: 1;
        align-self: flex-start;
        padding-block-start: 6.2rem;
        &.hdt-slider__active-true{
          --slide-size-set: 100%
        }
        &.md\:hdt-slider__active-false .hdt-slider__container{
          row-gap: 4rem
        }
      }
      .hdt-theme-block{
        --hdt-block-el: 0.3rem
      }
      .hdt-btn{
        --hdt-block-sp-btn: 1.5rem
      }
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-shop-the-look-wrapper{
      gap: 14.4rem;
    }
  }

  /*=========== 5.26. Shrink on scroll ===========*/
  .hdt-shrink-on-sroll {
    display: block;
    width: 100%;
    --clip-x: 1.5rem;
  }
  .hdt-shrink-on-sroll-inner {
    position: sticky;
    inset: 0;
    &.hdt-sos-high-index {
      z-index: 31;
    }
  }
  .hdt-shrink-on-sroll[mobile="true"] .hdt-shrink-on-sroll-inner {
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .hdt-shrink-on-sroll {
      --clip-x: 3rem;
    }
    .hdt-shrink-on-sroll-inner {
      overflow: hidden;
    }
  }

  @media (min-width: 1150px) {
    .hdt-shrink-on-sroll {
      --clip-x: var(--pd-container, 3rem);
    }
  }

  /*================ 5.27. Recommended products ================*/
  .hdt-slider-recommended, .hdt-slider-recently{
    --inset: 1.4rem
  }
  @media screen and (max-width: 575.98px) {
    .hdt-slider-recommended.hdt-slider.hdt-slider__active-true,
    .hdt-slider-recently.hdt-slider.hdt-slider__active-true{
      --slide-size-set: 80%
    }
  }
  @media screen and (max-width: 767.98px) {
    .hdt-slider-recommended.sm\:hdt-slider__active-true,
    .hdt-slider-recently.sm\:hdt-slider__active-true{
      --slide-size-set: 44%
    }
  }
  @media screen and (min-width: 768px) {
    .hdt-section-title.md\:hdt-text-center + .hdt-slider-recommended.md\:hdt-slider__active-false .hdt-slider__container,
    .hdt-section-title.md\:hdt-text-center + .hdt-slider-recently.md\:hdt-slider__active-false .hdt-slider__container{
      justify-content: center;
    }
    .hdt-section-recommened-product .hdt-slider-nav {
      display: block;
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-section-title.xl\:hdt-text-center + .hdt-slider-recommended.xl\:hdt-slider__active-false .hdt-slider__container,
    .hdt-section-title.xl\:hdt-text-center + .hdt-slider-recently.xl\:hdt-slider__active-false .hdt-slider__container{
      justify-content: center;
    }
  }
  /*================ 5.28. Cart drawner ================*/
  .hdt-dialog-cart-action button[ref="closeButton"]{
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    svg{
      transition: transform 0.3s;
    }
  }
  .hdt-drawer.hdt-dialog-drawer--cart{
    --padding-y: 2rem;
    .hdt-drawer__inner{
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .hdt-marquee{
        padding: 1.1rem var(--padding-y);
        border-bottom: 1px solid var(--color-line-border);
      }
      .hdt-free-shipping-bar{
        padding: 2.4rem var(--padding-y) 0;
        display: block;
        .hdt-progress-msg{
          margin-block-start: 0.7rem;
          display: block;
        }
      }
      .hdt-inner-card-drawer{
        padding: 2rem var(--padding-y) 2.4rem;
        overscroll-behavior-y: contain;
        overflow-y: auto;
        flex: 1;
        .hdt-cart-drawer-items + .hdt-cart__add-gift{
          margin-block-start: 2.4rem;
          .hdt-cart-gift-tick{margin-block-start: 0;}
        }
        .hdt-cart-complementary{margin-block-start: 1.4rem;}
        .hdt-cart__add-gift[hidden] + .hdt-cart-complementary{
          margin-block-start: 2.4rem;
        }
      }
      .hdt-cart-drawer__footer{
        border-top: 1px solid var(--color-line-border);
        align-self: flex-end;
        width: 100%;
        .hdt-cart-actions{
          padding: 1.4rem var(--padding-y);
          border-bottom: 1px solid var(--color-line-border);
          display: flex;
          align-items: center;
          gap: 0.6rem;
          overflow: hidden;
          hdt-cart-action{display: none;}
          hdt-cart-action:has([open]){display: contents;}
          .hdt-btn-cart-action{
            --color-btn-primary: var(--color-background2);
            --color-btn-secondary: var(--color-foreground);
            --color-btn-secondary-hover: var(--color-foreground);
            --color-btn-primary-hover: color-mix(in srgb, var(--color-foreground), transparent 70%);
            --color-button-border: color-mix(in srgb, var(--color-foreground), transparent 80%);
            --padding-button: 1.2rem 1.5rem;
            --thickness-btn: 1px;
            --height-btn: 4rem;
            --gap-btn-icon: 0.6rem;
            --font-size-button: var(--text-base);
            font-weight: var(--font-medium);
            align-items: center;
            flex-grow: 1;
            flex-basis: 0;
            min-width: 0;
            height: var(--height-btn);
            span{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            svg{
              width: auto;
              height: 1.6rem;
              max-width: 1.6rem;
              flex-shrink: 0;
            }
            &.hdt-btn-cart-note{
              .hdt-lb-note, .hdt-lb-shownote{
                display: flex;
                gap: var(--gap-btn-icon);
              }
              .hdt-lb-shownote{
                display: none;
              }
              &.has-noted{
                .hdt-lb-note{
                  display: none;
                }
                .hdt-lb-shownote{
                  display: flex;
                }
              }
            }
          }
        }
        .hdt-cart-group{
          padding: 2.2rem var(--padding-y);
          .hdt-cart-totals{
            display: flex;
            justify-content: space-between;
          }
        }
        .hdt-cart__ctas{
          padding: 0 var(--padding-y) 2.8rem;
          display: flex;
          .hdt-btn{
            flex: 1;
            overflow: hidden;
          }
          &.hdt-cart-ctas-both{
            gap: 0.9rem;
          }
        }
      }
      .hdt-icwt-cart{
        display: inline-flex;
        gap: 0.6rem;
        align-items: center;
        a {
          display: inline; 
          margin: 0;
        }
      }
    }
    .hdt-pc-cart--wrapper{
      padding: 1.6rem;
      background: var(--color-background2);
      .hdt-product__complementary-title{
        margin-block-end: 1.4rem;
      }
      .hdt-price-wrapp{
        font-size: var(--text-base);
      }
    }
    &.is-empty{
      .hdt-marquee, .hdt-cart-drawer__footer, .hdt-inner-card-drawer, .hdt-free-shipping-bar{
        display: none;
      }
      .hdt-drawer__inner{
        grid-template-rows: auto;
      }
    }
    .hdt-dialog-cart-action{
      .hdt-drawer_wrapper{
        background: var(--color-background);
        border-radius: inherit;
        padding: 2rem var(--padding-y);
      }
      .hdt-drawer__header {
        padding: 0;
        border: none;
        margin-block-end: 1rem;
      }
      .hdt-select, .hdt-textarea{
        margin-block-start: 0;
      }
      .hdt-cart__note .hdt-textarea{
        border-radius: min(var(--rounded-input), 1rem);
      }
    }
  }
  .hdt-shipping-calculator{
    .hdt-field--fieldset{
      border-radius: var(--rounded-input);
      padding: 0rem 0rem 0rem 0.9rem;
      margin-block-end: 1.4rem;
      legend{
        padding-inline: 0.3rem;
        font-size: 1.1rem;
        margin-inline: 1.2rem;
      }
      &.hdt-field-has-legend{
        padding-block-end: .8rem
      }
      legend + .hdt-select, legend + .hdt-input{
        padding: 0 1.5rem;
        --height-input:  3rem;
      }
      .hdt-select, .hdt-input{
        border: none;
        margin-block-start: 0;
        padding-inline: 1.5rem;
        --height-input: 4.4rem;
        border-radius: inherit;
        &::placeholder{
          color: inherit;
          opacity: 0.5;
        }
        &:-webkit-autofill{
          background: var(--color-background);
          -webkit-box-shadow: 0 0 0px 1000px var(--color-background) inset !important;
          box-shadow: 0 0 0px 1000px var(--color-background) inset !important;
        }
      }
      &:focus-within {
        outline: none;
        border-color: var(--color-focus);
      }
    }
    .hdt-response__rates{
      margin-block-start: 1.5rem;
      &:empty{margin-block-start: 0; display: none;}
    }
  }
  .hdt-mess__rates {
    animation: fadeIn .3s ease;
    &.is--rates-success {
      color:var(--color-success-text);
    }
    &.is--rates-error {
      color: var(--color-error-text);
    }
    p {
      color: var(--color-foreground);
      margin-bottom: .5rem;
    }
    ul {
      list-style: inside;
      font-size: var(--text-sm);
    }
  }
  .hdt-cart-item{
    display: flex;
    gap: 1.6rem;
    &:not(:last-child){
      border-bottom: 1px solid var(--color-line-border);
      margin-block-end: 1.4rem;
      padding-block-end: 1.4rem;
    }
    .hdt-cart-item__media{
      width: 9.8rem;
      display: inline-flex;
      align-items: start;
    }
    .hdt-cart-item__details{
      flex: 1;
      .hdt-cart-quantity{
        padding: 0.5rem;
        background: var(--color-background2);
        border-color: var(--color-line-border);
        align-items: center;
        min-width: 9.9rem;
        button{
          width: 2.2rem;
          height: 2.2rem;
          color: var(--color-btn-primary);
          background: var(--color-btn-secondary);
        }
      }
      .hdt-pr-title{
        color: var(--color-pr-text, var(--color-foreground));
      }
      .hdt-cart-item-ft{
        margin-block-start: 0.6rem;
      }
      :where(.hdt-cart-item__price, .hdt-cart-item__discounted-prices) {
        color: var(--color-pr-text);
      }
      .hdt-cart-item__old-price {
        color: var(--color-pr-sale-price);
      }
    }
  }
  .hdt-cart-item.is-gift-wrap, .hdt-main-cart-item.is-gift-wrap{
    .hdt-cart-item-ft-wrap{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .hdt-cart-item__quantity-wrapper{display: none;}
  }
  .hdt-cart-item, .hdt-main-cart-item__details{
    .hdt-product-options{
      margin-block-end: 0.3rem;
      .hdt-product-option{
        display: flex;
        gap: 0.5rem;
      }
      &:has(.hdt-line-vertical){
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        .hdt-product-option{display: inline-flex;}
      }
      .hdt-line-vertical{
        display: inline-flex;
        width: 1px;
        height: 1.4rem;
        background: color-mix(in srgb, var(--color-foreground), transparent 70%);
      }
      .hdt-product-properties{display: flex; width: 100%;}
    }
  }
  .hdt-main-cart-item, .hdt-cart-item  {
    .hdt-discounts {
      display: inline-flex;
      flex-wrap: wrap;
      gap: .5rem;
    }
  }
  .hdt-cart-item__error {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin-top: 1rem;
    column-gap: .5rem;
    width: min-content;
    min-width: 100%;
    .hdt-svg-wrapper {
      flex-shrink: 0;
      width: 1.5rem;
      height: 1.5rem;
      margin-top: .25rem;
    }
  }

  .hdt-cart-discounts {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-block-end: 1.4rem;
  }

  .hdt-discounts__discount, .hdt-cart-discounts__discount {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: var(--text-sm);
    text-transform: uppercase;
    padding: .2rem .7rem;
    background-color: color-mix(in srgb, var(--color-foreground), transparent 96%); 
    border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%); 
    border-radius: var(--rounded);
    margin-block: .35rem;
    svg {
      flex: none;
      width: auto;
      height: 1.4rem;
    }
  }

  .hdt-cart-discounts__discount {
    padding: .6rem 1.3rem; 
  }

  .hdt-cart-discount__codes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-block-start: 1.4rem;
    .hdt-cart-discount__pill {
      display: inline-flex;
    }
    .wrapp-discount-remove {
      display: contents;
    }
    .hdt-cart-discount__pill-remove {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: .8rem;
      font-size: var(--text-sm);
      text-transform: uppercase;
      padding-block: .6rem;
      padding-inline: 1.3rem;
      background-color: color-mix(in srgb, var(--color-foreground), transparent 96%); 
      border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 92%); 
      border-radius: var(--rounded);
      svg {
        flex: none;
        width: auto;
        height: 1.62rem;
        &.hdt-icon-close {
          width: auto;
          height: .8rem;
          transition: transform .3s linear;
        }
      }
    }
  }

  .hdt-cart-discount__error {
    display: flex;
    justify-content: flex-start;
    gap: .8rem;
    svg {
      flex: none;
      margin-block-start: .2rem;
    }
    .hdt-cart-discount__error-text {
      font-size: var(--text-sm);
    }
  }

  .hdt-cart-discount__form {
    + .hdt-cart-discount__error {
      margin-block-start: 1.4rem;
    }
  }

  .hdt-cart-remove-button{
    --icon-stroke-width: 1.5px;
    cursor: pointer;
    .remove-icon-bottom, .remove-icon-top {
      transition: transform 0.125s ease-in-out;
    }
    &:focus-within .remove-icon-top {
      transform: translate(calc(-1 * var(--icon-stroke-width)),var(--icon-stroke-width)) rotate(-15deg);
    }
    &:focus-within .remove-icon-bottom {
      transform: translateY(var(--icon-stroke-width));
    }
    >a:focus-visible{
      outline: none;
    }
  }
  .hdt-drawer.hdt-dialog-drawer--cart .hdt-cart-drawer-empty{
   display: none;
    .hdt-header-cart-empty{
      padding: 0 var(--padding-y);
      max-width: 288px;
      margin-block-end: 2rem;
      margin-inline: auto;
      .hdt-cart__empty-text{
        margin-block-end: 1.8rem;
        line-height: 1.3;
      }
      .hdt-icon-cart-empty{
        display: flex;
        justify-content: center;
        margin-block-end: 1rem;
        svg{
          width: 40px;
          height: auto;
        }
      }
    }
    .hdt-list-collection-cart{
      width: 100%;
      overflow: hidden;
      padding: 0 var(--padding-y);
      .hdt-cart__empty-text{
        margin-block-end: 1.2rem;
      }
      .hdt-slider__viewport{
        overflow: visible;
        margin-inline-start: -0.8rem;
      }
      &:has(.hdt-cart__empty-collections .hdt-slider__container:empty){display: none;}
    }
  }
  .hdt-drawer.hdt-dialog-drawer--cart.is-empty .hdt-cart-drawer-empty{
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1;
  }
  .hdt-cart__empty-collections{
    position: relative;
    .hdt-collection-list__image{
      width: 3.8rem;
      border-radius: var(--rounded-full);
      overflow: hidden;
    }
    .hdt-slider__container > .hdt-cart__empty-collection:first-child{
      margin-inline-start: auto;
    }
    .hdt-slider__container > .hdt-cart__empty-collection:last-child{
      margin-inline-end: auto;
    }
  }
  .hdt-cart__empty-collection .hdt-collection-list__link{
    padding: 0.45rem;
    padding-inline-end: 2.4rem;
  }
  .hdt-field--discount{
    border-radius: var(--rounded-input);
    border: 1px solid var(--color-line-border);
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    .hdt-field__input{
      border: none;
      flex: 1;
      --height-input: 3.6rem;
      padding-block: 0;
    }
    .hdt-btn{
      --rounded-button: var(--rounded-input)
    }
  }
  .hdt-cart__add-gift .hdt-cart-gift-tick{
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: 1.5rem;
    border-radius: var(--rounded-sm);
    border: 1px solid var(--color-line-border);
    margin-block-start: 1.4rem;
    .hdt-checkbox-wrapp {
      margin-top: .2rem;
      flex: 0 0 1.8rem;
      input[type=checkbox] {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        margin: 1px;
        border: 1px solid;
        background: transparent;
        box-shadow: none;
        &:after{
          border-radius: inherit;
          inset: 0.4rem;
        }
      }
      .hdt-facke-check{
        clip-path: inset(5px round 50%);
        background: transparent;
        align-self: center;
        width: 100%;
        height: 100%;
      }
      #hdt-cart-gift-checkbox:checked + .hdt-facke-check{
         background: var(--color-foreground);
      }
    }
  }
  .hdt-cart-lv-discount-app{
    border-bottom: 1px solid var(--color-line-border);
    padding-block-end: 1rem;
    margin-block-end: 1rem;
    summary{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block-end: 0.5rem;
    }
    .hdt-cart-discounts .hdt-cart-discounts__discount{
      display: flex;
      gap: 0.5rem;
      align-items: center;
      justify-content: space-between;
      svg{margin-inline-end: 0.5rem;}
    }
  }
  @media (min-width: 768px) {
    .hdt-drawer.hdt-dialog-drawer--cart{
      --padding-y: 2.5rem;
      .hdt-dialog-cart-action{
        &.hdt-drawer--indent {
          border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);
        }
        &:focus-visible{
          outline: none;
        }
      }
    }
  }

  /*=========== 5.29. Age verification ===========*/
  .hdt-age-modal {
    width: calc(100% - 3rem);
    max-width: 43.1rem;
    padding: 3rem 2rem;
    font-weight: var(--font-medium-or-bold);
    background-color: color-mix(in srgb, var(--color-background), transparent 70%);
    border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 70%);
    -webkit-backdrop-filter: blur(7rem);
    backdrop-filter: blur(7rem);
    overflow: hidden auto;
    .hdt-age-modal__heading {
      font-weight: var(--font-medium-or-bold);
    }
    .hdt-age-modal__fields {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      .hdt-select {
        font-weight: var(--font-medium-or-bold);
      }
    }
    #hdt-age-modal_form {
      > * {
        margin-inline: auto;
        + * {
          margin-top: 1.6rem;
          &.hdt-age-modal__message {
            margin-top: 2.4rem;
          }
        }
      }
      .hdt-age-modal__text, .hdt-age-modal__actions, .hdt-age-modal__message {
        max-width: 32rem;
      }
      .hdt-age-modal__fieldset {
        --height-input: 4.6rem;
        margin-top: 1.9rem;
        .hdt-age-modal__select {
          background-color: color-mix(in srgb, var(--color-foreground), transparent 96%);
        }
      }
      .hdt-age-modal__actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
        max-width: unset;
        .hdt-btn, .hdt-btn-link {
          align-self: center;
        }
        .hdt-btn {
          --height-btn: 4.6rem;
          --font-size-button: var(--text-lg)
        }
        .hdt-btn-link {
          --font-size-button: var(--text-base);
        }
      }
      .hdt-age-modal__fieldset {
        + .hdt-age-modal__actions {
          margin-top: 1.5rem;
        }
      }
    }
    @media (min-width: 540px) {
      padding: 3.9rem 2.2rem;
    }
    &::backdrop {
      -webkit-backdrop-filter: blur(15px);
      backdrop-filter: blur(15px);
    }
  }

  /*=========== 5.30. Newsletter popup ===========*/
  .hdt-modal-u {
    --w-u: 10.2rem;
    --h-u: 3rem;
    --padding: 2.2rem;
    padding: var(--padding);
    background-color: transparent;
    transform: none!important;
    [ref=closeButton] {
      position: absolute;
      width: 4rem;
      height: 4rem;
      left: 50%;
      transform: translate(-50%);
      top: 5px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: color-mix(in srgb, var(--color-background), transparent 30%);
      border: 1px solid color-mix(in srgb,var(--color-foreground),transparent 70%);
      -webkit-backdrop-filter: blur(70px);
      backdrop-filter: blur(70px);
    }
    .hdt-modal-u__top {
      position: relative;
      display: grid;
      grid-template-columns: [start] minmax(0,1fr) 9rem [end] minmax(0,1fr);
      border-top-left-radius: var(--rounded-sm);
      border-top-right-radius: var(--rounded-sm);
      padding-top: 2.2rem;
      height: calc(var(--h-u) + 1.9rem);
      overflow: hidden;
      flex: none;
      &:before, &:after {
        content: "";
        display: block;
        height: var(--h-u);
        width: 100%;
        background-color: color-mix(in srgb,var(--color-background), transparent 40%);
        border-top: 1px solid color-mix(in srgb,var(--color-foreground),transparent 70%);
      }
      &:before {
        grid-area: start;
        border-start-start-radius: var(--rounded-sm);
        border-inline-start: 1px solid color-mix(in srgb,var(--color-foreground),transparent 70%);
      }
      &:after {
        grid-area: end;
        border-start-end-radius: var(--rounded-sm);
        border-inline-end: 1px solid color-mix(in srgb,var(--color-foreground),transparent 70%);
      }
    }
    .hdt-icon-u {
      color: color-mix(in srgb,var(--color-background), transparent 40%);
      width: var(--w-u);
      height: var(--h-u);
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
    .hdt-icon-u--2 {
      .hdt-notch__stroke {
        fill: none;
        stroke: var(--notch-stroke, color-mix(in srgb,var(--color-foreground),transparent 70%));
        stroke-width: 1.8px;
        vector-effect: non-scaling-stroke;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    }
    .hdt-modal__body {
      background-color: color-mix(in srgb,var(--color-background), transparent 40%);
      border-inline: 1px solid color-mix(in srgb,var(--color-foreground),transparent 70%);
      border-bottom: 1px solid color-mix(in srgb,var(--color-foreground),transparent 70%); 
      border-bottom-left-radius: var(--rounded-sm);
      border-bottom-right-radius: var(--rounded-sm);
    }
  }
  .hdt-newsletter-popup {
    --max-width: 45rem;
    --padding: 2.2rem 0;
    width: calc(100% - 3rem);
    max-width: var(--max-width);
    font-weight: var(--font-medium-or-bold);
    .hdt-modal-u__top {
      grid-template-columns: [start] calc(50% - 4.5rem) [mid] 9rem [end] minmax(0,1fr);
      .hdt-icon-u, [ref=closeButton] {
        position: relative;
        inset-inline-start: auto;
        transform: none;
        grid-area: mid;
        place-self: start center;
      }
      .hdt-icon-u--2 {
        top: -1px;
        .hdt-notch__stroke {
          stroke-width: 1px;
        }
      }
      [ref=closeButton] {
        pointer-events: auto;
        top: -2.1rem;
      }
    }
    .hdt-modal__body {
      margin-top: 0;
      z-index: 1;
      padding: 1.5rem;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .hdt-newsletter-popup__group {
      display: flex;
      flex-direction: column;
      gap: 0;
      justify-content: space-between;
      align-items: center;
      .hdt-newsletter-popup__image {
        width: 100%;
        img {
          width: 100%;
          height: auto;
          border-radius: calc(var(--rounded-sm) * .7);
        }
      }
      .hdt-newsletter-popup__content {
        padding: 2rem 0;
        .hdt-newsletter-form__field-wrapper {
          display: flex;
          flex-direction: column;
          gap: 1.2rem;
          margin-top: 2rem;
          .hdt-privacy-terms-notice {
            margin-top: .5rem;
          }
        }
        .hdt-newsletter-popup__description {
          margin-top: 1.6rem;
        }
        .hdt-field--newsletter {
          padding: .4rem 2rem;
          background-color: color-mix(in srgb, var(--color-foreground), transparent 96%);
          -webkit-backdrop-filter: blur(70px);
          backdrop-filter: blur(70px);
          .hdt-field__input {
            background: none;
           }
        }
        .hdt-newsletter-form__button {
          --height-btn: 4.6rem;
          --font-size-button: var(--text-lg);
          overflow: hidden;
        }
        .hdt-form__alert {
          margin-block: 1.5rem 0;
        }
      }
    }
    .hdt-form__alert {
      background-color: color-mix(in srgb,var(--hdt-alert-color, var(--color-success-text)), #fff 90%);
    }
    &::backdrop {
      background-color: var(--color-background);
      -webkit-backdrop-filter: blur(15px);
      backdrop-filter: blur(15px);
    }
    @media (min-width: 768px) {
      .hdt-newsletter-popup__group {
        .hdt-newsletter-popup__content {
          max-height: min(calc(80vh - 11rem),60rem); 
        }
      }
      &.hdt-newsletter-popup--ver {
        .hdt-newsletter-popup__group {
          .hdt-newsletter-popup__content {
            padding: 2rem 0;
          }
        }
      }
      &.hdt-newsletter-popup--hor {
        --max-width: 70.5rem;
        .hdt-modal-u__top {
          grid-template-columns: [start] calc(75% - 4.5rem) [mid] 9rem [end] minmax(0,1fr);
        }
        .hdt-modal__body {
          padding: 0 1.5rem 1.5rem 1.5rem;
          overflow: visible;
        }
        .hdt-newsletter-popup__group {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 2rem 1.5rem;
          .hdt-newsletter-popup__image {
            width: 100%;
            height: calc(100% + 1.1rem);
            position: relative;
            overflow: hidden;
            text-align: center;
            margin-top: -1.1rem;
            img {
              object-fit: cover;
              height: 100%;
              min-height: 100%;
              max-height: 100%;
              min-width: 100%;
              max-width: 100%;
              position: absolute;
              inset: 0;
            }
          }
          .hdt-newsletter-popup__content {
            padding: 2rem 1.5rem;
            overflow: hidden auto;
          }
        }
      }
    }
  }

  /* ==========================================================================
    6. TEMPLATES
  ========================================================================== */
  /*================ 6.1. Featured collections list ================*/
  .hdt-collection-list .hdt-collection-card-rounded {
    display: grid;
    grid-template: 1fr auto / 1fr;
    .hdt-collection-card__media{
      grid-area: 1/1/2/2;
    }
    .hdt-collection-card__content{
      grid-area: 2/1/3/2;
    }
  }
  .hdt-collection-card-inner {
    .hdt-collection-card__content {
      pointer-events: none;
      .hdt-btn {
        pointer-events: auto;
        max-width: 100%;
      }
    }
  }
  .hdt-collection-list:not(.hdt-collection-card--rounded-full) .hdt-collection-card-inner {
    position: relative;
  }
  .hdt-collection-list .hdt-collection-card__content {
    width: 100%;
  }
  .hdt-collection-card--hover-show-btn, .hdt-collection-card--overlay-text {
    --card-content-pb: 3.4rem;
  }
  .hdt-collection-list:not(.hdt-collection-card--rounded-full) .hdt-collection-card__content {
    position: absolute;
    z-index: 2;
    inset-inline-start: 0;
    bottom: 0;
    width: 100%;
    padding-inline: 2.5rem;
    padding-bottom: var(--card-content-pb, 2.5rem);
  }
  .hdt-collection-card--hover-show-btn {
    .hdt-collection-card__content {
      margin-bottom: -5.1rem;
    }
    .hdt-collection-card__title {
      transition: all .5s ease;
    }
    .hdt-collection-card-btn-wrap {
      margin-top: 1.5rem;
      opacity: 0;
      animation: fadeOutDown 0.4s ease-in forwards;
    }
  }
  .hdt-collection-card--rounded-full .hdt-slider{
    --inset: 0.3rem;
    .hdt-slider__slide {
      --slide-size: max(12.5%, 16rem);
      max-width: 19rem;
    }
    .hdt-slider-nav button{
      --btn-w: 3.4rem;
      --btn-h: 3.4rem;
    }
  }
  .hdt-collection-card--rounded-full .hdt-collection-card-rounded {
    border-radius: 0;
  }
  .hdt-collection-card--rounded-full .hdt-collection-card__content {
    margin-top: .6rem;
  }
  .hdt-collection-card--rounded-full .hdt-collection-card-rounded .hdt-collection-card__media {
    width: 100%;
    max-width: 12rem;
    margin-inline: auto;
    border-radius: var(--rounded-full);
    overflow: hidden;
    margin-block-start: 2px;
  }
  .hdt-collection-list:not(.hdt-collection-card--rounded-full ) .hdt-collection-card-inner:after, .hdt-collections-tilted-scroll .hdt-collection-card-inner:after {
    content: '';
    position: absolute;
    z-index: 1;
    inset-inline-start: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  :where(.hdt-collection-card--overlay-text, .hdt-collection-card--hover-show-btn) .hdt-collection-card-inner:after {
    height: 50% !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-overlay), transparent 100%) 42.46%, color-mix(in srgb, var(--color-overlay), transparent 76%) 70.4%, color-mix(in srgb, var(--color-overlay), transparent 52%) 100%);
  }
  .hdt-ratio--adapt_image .hdt-collection-card-inner {
    --aspect-ratioapt: var(--aspect-ratioapt-origin);
  }

  .hdt-scl-tilted .hdt-slider__overflow {
    padding-inline-end: unset;
    .hdt-slider-nav {
      display: none;
    }
  }

  .hdt-scl-tilted .hdt-collection-list-wrap {
    display: flex;
    width: 100%;
    gap: var(--gap, 2.5rem);
  }

  .hdt-scl-tilted .hdt-section__header {
    width: min(30%, 55rem);
    margin-bottom: 0;
  }

  .hdt-scl-tilted .hdt-collection-list {
    flex: none;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
  }

  .hdt-scl-tilted .hdt-slider .hdt-slider__slide {
    /* --slide-size-set: 80%; */
    --angle: 10deg;
  }

  .hdt-scl-tilted .hdt-collection-list .hdt-slider__slide:hover {
    --angle: 0deg;
  }

  .hdt-scl-tilted .hdt-collection-list:before, .hdt-scl-tilted .hdt-collection-list:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    pointer-events: none;
    width: min(20%, 35rem);
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    opacity: 0;
    transition: opacity .3s ease;
  }

  .hdt-scl-tilted .hdt-collection-list:before {
    inset-inline: 0 auto;
    transform: rotate(-180deg);
  }
  .hdt-scl-tilted .hdt-collection-list:after {
    inset-inline: auto 0;
  }

  .hdt-scl-tilted .hdt-collection-list:has(.hdt-slider__slide.is-in-view:not(.is-selected) + .is-in-view.is-selected):before {
    opacity: 1;
  }
  .hdt-scl-tilted .hdt-collection-list:has(.hdt-slider__slide.is-selected.is-in-view + .is-in-view:not(.is-selected)):after {
    opacity: 1;
  }

  .hdt-scl-tilted .hdt-collection-card {
    perspective: 1000px;
    perspective-origin: 100% 50%;
    .hdt-cl-tilted-card-inner {
      transform-origin: left center;
      transform: scaleX(calc(1 / cos(var(--angle)))) rotateY(var(--angle));
      transition: transform 0.4s cubic-bezier(.4,2,.6,1);
    }
  }

  @media (min-width: 768px) {
    .hdt-collection-list {
      --inset: -2.25rem;
      .hdt-slider-dots--round-collections {
        display: none;
      }
    }
    .hdt-container-xl > .hdt-collection-list {
      --inset: 1.5rem;
    }
    .hdt-section__header.hdt-text-center + .hdt-collection-list .md\:hdt-slider__active-false .hdt-slider__container {
      justify-content: center;
    }
    .hdt-section__header.hdt-text-center + .hdt-collection-list--hightlight .md\:hdt-slider__active-false .hdt-slider__container {
      margin-inline: auto;
    }
    .hdt-collection-list--hightlight .md\:hdt-slider__active-false .hdt-slider__container {
      max-width: var(--tablet-max-w, 100%);
    }
    .hdt-collection-list--hightlight .hdt-slider {
      --slide-per-view-calc: min(3, var(--slide-per-view));
      --slide-size-set: calc((100% - (var(--slide-per-view-calc) - 1) * var(--slide-spacing)) / (1.717 + (var(--slide-per-view-calc) - 1)));
      --adj-w: calc(0.00125 * (var(--slide-per-view-calc) * var(--slide-per-view-calc)) - 0.02 * var(--slide-per-view-calc) + 0.765);
    }
    .hdt-collection-list--hightlight .hdt-slider__slide {
      flex-grow: 1;
      &:first-child {
        --slide-size: calc(var(--slide-size-set) * 1.717 - var(--slide-spacing) * var(--adj-w));
        flex-grow: 1.717;
      }
    }
    .hdt-collection-list--hightlight .hdt-ratio--adapt_image:first-child .hdt-collection-card-inner {
      --aspect-ratioapt: calc(var(--aspect-ratioapt-origin) * 1.717);
    }
    .hdt-section__collection-list--hide-md {
      display: none;
    }
    .hdt-scl-tilted .hdt-slider .hdt-slider__slide {
      --slide-size-set: 80%;
    }
  }
  @media (min-width: 1150px) {
    .hdt-section__header.hdt-text-center + .hdt-collection-list .xl\:hdt-slider__active-false .hdt-slider__container {
      justify-content: center;
    }
    .hdt-section__header.hdt-text-center + .hdt-collection-list--hightlight .xl\:hdt-slider__active-false .hdt-slider__container {
      margin-inline: auto;
      transform: translateX(calc(-0.5 * var(--slide-spacing, 0)));
    }
    .hdt-collection-list--hightlight .hdt-slider {
      --slide-per-view-calc: min(5, var(--slide-per-view));
    }
    .hdt-scl-tilted .hdt-slider .hdt-slider__slide {
      --slide-size-set: 40%;
    }
  }
  @media (min-width: 1400px) {
    .hdt-collection-list--hightlight .hdt-slider {
      --slide-per-view-calc: var(--slide-per-view);
    }
    .hdt-collection-list--hightlight .xl\:hdt-slider__active-false .hdt-slider__container {
      max-width: var(--desktop-max-w, 100%);
    }
    .hdt-scl-tilted .hdt-slider .hdt-slider__slide {
      --slide-size-set: 30%;
    }
  }
  @media (max-width: 767.98px) {
    .hdt-collection-list--hightlight .hdt-ratio--portrait-wide {
      --ratio-percent: 125%;
    }

    .hdt-collection-list--hightlight .hdt-ratio--square-wide {
      --ratio-percent: 100%;
    }
    .hdt-scl-tilted .hdt-collection-list-wrap {
      flex-direction: column;
      gap: 2.5rem;
    }
    .hdt-scl-tilted .hdt-section__header {
      width: 100%;
    }
  }
  .hdt-section__collection-list .hdt-collection-list hdt-slider-reveal{
    margin-inline: -2px;
    --inset: 0.5rem;
    .hdt-slider__viewport{
      padding: 2px;
    }
  }
  /*================ 6.2. Collection ================*/

  /*================ 6.3. Product ================*/
  .hdt-stamp {
    position: absolute;
    z-index: 2;
    top: -3.5rem;
    inset-inline-end: 1.5rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    &.hdt-circular-text {
      top: -4.3rem;
      width: 9rem;
      height: 9rem;
      padding: 1.65rem;
      .hdt-circular-text__icon{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        svg{
          width: 1.4rem;
          height: auto;
        }
        &:after{
          content: "";
          position: absolute;
          border-radius: inherit;
          inset: 1rem;
          border: 1px solid var(--primary-color);
        }
      }
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hdt-rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .hdt-stamp--rotate {
      animation: hdt-rotate 4s linear infinite;
    }
  }
  .hdt-circular-text {
    --size: 1.2rem;
    font-weight: var(--font-semibold);
    background-color: var(--bg-color);
    color: var(--primary-color);
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hdt-circular-text__circle {
    position: absolute;
    width: 100%;
    height: 100%;
      span {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-origin: 0 0;
      font-size: var(--size);
    }
    .hdt-large-dot {
      font-size: large;
      font-weight: bold;
      line-height: 1;
    }
  }
  @media (min-width: 768px) {
    .hdt-stamp.hdt-circular-text {
      inset-inline-end: 3rem;
    }
    .hdt-stamp {
      top: -4.3rem;
      inset-inline-end: 3rem;
      width: 9.7rem;
      height: 9.7rem;
      &.hdt-circular-text {
        width: 9.7rem;
        height: 9.7rem;
      }
    }
  }
  hdt-model .shopify-model-viewer-ui {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  hdt-model model-viewer[reveal] {
    opacity: 1 !important;
  }
  .hdt-product-info__item {
    display: block;
    position: relative;
    --product-info-space: 2rem;
  }
  .hdt-product-info__item--text + .hdt-product-info__item--text {
    --product-info-space: 1.3rem;
  }
  .hdt-product-info__item--box + .hdt-product-info__item--text, .hdt-product-info__item--text + .hdt-product-info__item--box {
    --product-info-space: 1.8rem;
  }
  .hdt-product-info__item--text-bottom + .hdt-product-info__item--text-top {
    --product-info-space: 1.3rem;
  }
  .hdt-product-info__item--text-bottom + .hdt-product-info__item--box-top, .hdt-product-info__item--box-bottom + .hdt-product-info__item--text-top {
    --product-info-space: 1.8rem;
  }
  .hdt-product-info__item + .hdt-product-info__item {
    margin-top: var(--product-info-space);
  }
  .hdt-product-info__item:empty {
    display: none;
  }
  .hdt-product-info__item:first-child {
    margin-top: 0;
  }
  .hdt-product-info__item:empty:first-child + .hdt-product-info__item, .hdt-product-info__item:empty:first-child + .hdt-product-info__item:empty + .hdt-product-info__item {
    margin-top: 0;
  }
  /* Product card */
  .hdt-card-product {
    .hdt-card-product__media {
      border-radius: var(--rounded-product-card);
      margin-block-end: 1.6rem;
      overflow: hidden;
      position: relative;
    }
  }
  .hdt-product-grid-wrapper .hdt-card-product .hdt-card-product__wrapper{
    align-self: flex-start;
  }
  .hdt-card-product .hdt-card-product__content{
    color: var(--color-pr-text);
    display: grid;
    justify-items: start;
    height: fit-content;
    .hdt-card-product__title a{
      color: inherit;
    }
    &.hdt-text-center{
      justify-items: center;
    }
    wrapp-hdt-swatches{
      margin-block-start: var(--spacing-0-8)
    }
  }
  .hdt-card-product__border .hdt-card-product__media{
    border-radius: 0;
    margin-block-end: 0;
  }
  .hdt-card-product .hdt-card-product__wrapper{
    display: grid;
    grid-template-rows: auto 1fr;
  }
  .hdt-card-product.hdt-card-product__border .hdt-card-product__wrapper{
    border: 1px solid var(--color-line-border);
    border-radius: var(--rounded-product-card);
    height: 100%;
    .hdt-card-product__media{
      border-radius: var(--rounded-product-card) var(--rounded-product-card) 0 0;
    }
  }
  .hdt-card-product__border .hdt-card-product__content{
    background: var(--color-pr-background);
    padding: 1.2rem 1rem 1.6rem;
  }
  .hdt-card-product .hdt-card-product__vendor{
    color: color-mix(in srgb, var(--color-pr-text), transparent 50%);
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: calc(var(--text-xs) * 0.1);
    font-weight: var(--font-medium);
    margin-block-end: var(--spacing-0-4);
  }
  .hdt-card-product__media {
    .hdt-badge__wrapp {
      position: absolute;
      inset-block-start: max(1.8rem, var(--rounded-product-card));
      inset-inline-end: 0rem;
      display: grid;
      justify-items: flex-end;
      row-gap: .9rem;
      z-index: 5;
      &.hdt-badge--rectangle{
        inset-inline-end: 1rem;
        .hdt-badge{
          border-radius: 0;
        }
      }
    }
    @container container_card (max-width: 200px) {
      .hdt-badge__wrapp {
        inset-block-start: max(1rem,var(--rounded-product-card));
        row-gap: .5rem;
        .hdt-badge {
          padding: .2rem .5rem;
        }
      }
    } 
  }
  .hdt-card-product__wrapper {
    container: container_card / inline-size;
  }
  .hdt-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 1rem;
    border-radius: var(--rounded) 0 0 var(--rounded);
  }
  .dir--rtl .hdt-badge{
    border-radius: 0 var(--rounded) var(--rounded) 0;
  }
  .hdt-badge__on-sale {
    color: var(--color-on-sale-badge-text);
    background: var(--color-on-sale-badge-background);
  }
  .hdt-badge__pre_order {
    color: var(--color-pre-order-badge-text);
    background: var(--color-pre-order-badge-background);
  }
  .hdt-badge__sold_out {
    color: var(--color-sold-out-badge-text);
    background: var(--color-sold-out-badge-background);
  }
  .hdt-badge__new {
    color: var(--color-new-badge-text);
    background: var(--color-new-badge-background);
  }
  .hdt-badge__bestseller, .hdt-badge__custom {
    color: var(--color-custom-badge-text);
    background: var(--color-custom-badge-background);
  }

  .hdt-price-wrapp {
    margin-top: .3rem;
    --color-pr-price: var(--color-pr-text);
  }
  .hdt-product-info__item--text .hdt-price-wrapp {
    --color-pr-price: var(--color-foreground);
  }
  .hdt-price, .hdt-unit-price{
    color: var(--color-pr-price);
  }
  .hdt-compare-at-price {
    text-decoration: line-through;
    color: color-mix(in srgb, var(--color-pr-price), transparent 40%);
    &:not([hidden]) + .hdt-price {
      margin-inline-start: .5rem;
      .hdt-money {
        color: var(--color-pr-sale-price);
      }
    }
  }
  .hdt-card-product__media .hdt-card-product__media--hover {
    opacity: 0;
    transform: scale(1.2);
    transform-origin: 50% 50%;
    background-color: var(--color-background);
    content-visibility: hidden;
    will-change: transform;
  }
  .hdt-card-product__media .hdt-group-btn-quickadd{
    display: flex;
    gap: 0.8rem;
    z-index: 5;
    position: absolute;
    transition: all 0.5s;
    inset-block-end: 1.5rem;
    inset-inline-end: 1rem;
    flex-direction: column;
    .hdt-product-card-btn{
      width: 3.6rem;
      height: 3.6rem;
      gap: 0;
      --padding-button: 1rem;
      box-shadow: inset 0 0 0.3rem color-mix(in srgb, var(--color-btn-secondary), transparent 85%);
      svg{
        max-width: 1.4rem;
      }
      .sr-only-mobile{
        display: none;
      }
    }
  }
  .hdt-product-card-btn .hdt-loading-area__spinner, .hdt-product-form__submit .hdt-loading-area__spinner{
    display: none;
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    place-self: center;
  }
  .hdt-loading-area__spinner{
    width: 1.6rem;
    position: relative;
    z-index: 1;
  }
  @media (min-width: 768px) {
    .hdt-card-product__media .hdt-group-btn-quickadd{
      inset-block-end: 1.5rem;
      inset-inline: 2.3rem;
      flex-direction: row;
      justify-content: center;
      .hdt-product-card-btn{
        width: auto;
        gap: 0.6rem;
        flex: 1;
        transition: all 0.3s;
        box-shadow: inset 0 0 10px color-mix(in srgb, var(--color-btn-secondary), transparent 90%);
        max-width: 132px;
        span:first-child{
          flex-shrink: 0;
        }
        .sr-only-mobile{
          display: inline;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
  @media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .hdt-card-product__media .hdt-group-btn-quickadd{
      opacity: 0;
      inset-block-end: -4.5rem;
      visibility: hidden;
      .hdt-product-card-btn.hdt-btn--inner{
        transform: translateY(20px);
      }
    }
    .hdt-card-product__media:focus-within .hdt-group-btn-quickadd,
    .hdt-card-product__media:hover .hdt-group-btn-quickadd{
      opacity: 1;
      visibility: visible;
      inset-block-end: 1.5rem;
      .hdt-product-card-btn.hdt-btn--inner{
        transform: translateY(0);
        transition-delay: 0.2s;
        &.hdt-product-card-btn--atc{
          transition-delay: 0.4s;
        }
      }
    }
  }
  /* Color swatch */
  .hdt-color-list{
    display: flex;
    align-items: center;
    row-gap: 1rem;
    flex-wrap: wrap;
    margin-inline-start: 0.2rem;
  }
  .hdt-swatch__color {
    --color-shadow: transparent;
    width: var(--sw-w, 2.4rem);
    height: var(--sw-w, 2.4rem);
    padding: var(--sw-pd, .4rem);
    position: relative;
    display: block;
    transition: box-shadow 0.5s ease;
    margin: 1.5px;
    box-shadow: 0 0 0 1.5px var(--color-shadow), 0 0 0 4.5px transparent;
  }
  [type=radio]:checked+.hdt-swatch__color{
    --color-shadow: var(--color-foreground);
  }  
  .hdt-color-list__item input[type="radio"] + label{
    display: inline-flex;
    gap: 0;
    margin-inline-end: 0;
    margin-inline-start: 0;
  }
  .hdt-swatch__color .hdt-color-bg {
    width: 100%;
    height: 100%;
    background-image: var(--swatch-background);
    background-color: var(--swatch-color, rgba(222 222 222 / 1.0));
    background-position: var(--swatch-focal-point);
    background-size: cover;
    border: 1px solid var(--color-line-border);
    position: relative;
  }
  .hdt-swatch__color[is-disabled] .hdt-color-bg:after{
    content: "";
    position: absolute;
    inset: 1px;
    background-color: var(--color-foreground);
    clip-path: polygon(0 calc(100% - 1px),100% -1px,100% 0,0 100%);
    display: block;
  }
  .hdt-swatch__color .hdt-bg-color-white {
    border-color: color-mix(in srgb, var(--color-foreground), transparent 85%);
  }
  .hdt-color-list--cricle .hdt-swatch__color .hdt-color-bg {
    border-radius: 50%;
  }
  [type=radio]:checked+.hdt-swatch__color .hdt-color-bg:not(.hdt-bg-color-white) {
    border-color: transparent;
  }
  .hdt-color-list__item:not(:last-child){
    margin-inline-end: 1rem;
  }
  .hdt-color-list__item.is--color-limit, .is--color-limit~:not(.is--color-link) {
    width: 0;
    opacity: 0;
    transition: all 0.5s;
    transform-origin: left;
    margin-inline-end: 0;
    pointer-events: none;
  }
  wrapp-hdt-swatches[auto-limit] {
    display: block;
    overflow: hidden;
    width: 100%;
    &[no-limit="true"] .is--color-link {
      scale: 0;
      width: 0px;
    }
  }
  .hdt-color-list__item.is--color-link .hdt-link-underline {
    padding-inline: .2rem;
  }
  .hdt-card-product__content.hdt-text-center wrapp-hdt-swatches{
    .hdt-color-list{
      justify-content: center;
    }
  }
  .hdt-product__price.hdt-product-info__item .hdt-price-wrapp{
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
  }
  @media screen and (min-width: 768px) {
    .hdt-card-product__border .hdt-card-product__content{
      padding: 1.2rem 1.5rem 1.6rem;
    }
    .hdt-product__price.hdt-product-info__item .hdt-price-wrapp{
      font-size: var(--text-2xl);
    }
  }
  @media screen and (min-width: 1150px) {
    .hdt-card-product__border .hdt-card-product__content{
      background: var(--color-pr-background);
      padding: 1.2rem 2rem 1.6rem;
    }
  }
  /*================ 6.4. Product page ================*/
  .hdt-loading-bar {
    pointer-events: none;
    background-color: var(--color-success-text);
    box-shadow: 0 0 6px var(--color-success-text), 0 0 0px var(--color-success-text);
    width: 100%;
    height: 2px;
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    z-index: 999;
    transform: scaleX(0);
    transform-origin: var(--value-origin-start);
    @media screen and (min-width: 768px) {
      height: 3px;
    }
  }
  .hdt-main-product:not(:has(.hdt-product-medias)){
    grid: "pr-info" / min(100%, 100rem);
    justify-content: center;
  }
  .hdt-main-product{
    display: grid;
    gap: 2.5rem;
    grid: "pr-media" "pr-info" / minmax(0, 1fr);
    .hdt-product-medias {
      grid-area: pr-media;
    }
    .hdt-product__info-wrapp {
      grid-area: pr-info;
      border-radius: var(--rounded);
      border: 1px solid var(--color-line-border);
      padding: 2rem 2.2rem 1.8rem;
      &.hdt-no-border{
        padding: 0;
        border: none;
      }
    }
    .hdt-product-medias-wrap {
      display: contents;
    }
    .hdt-slider--product-testimonials {
      align-items: stretch;
      container: container_product_testimonials / inline-size;
      --slide-spacing: 1.6rem;
      --dots-spacing: 2rem;
      .hdt-slider__slide { 
        align-self: stretch;
      }
      .hdt-testimonial-item {
        background-color: color-mix(in srgb, var(--color-foreground), transparent 96%);
        border-radius: var(--rounded-product-media);
        position: relative;
        padding: 3rem 2rem 2rem 2rem; 
        height: 100%;
        .hdt-quote-icon-wrap {
          color: color-mix(in srgb, var(--color-foreground), transparent 90%);
          position: absolute;
          z-index: 1;
          pointer-events: none;
          inset-block-start: 1.1rem;
          inset-inline: auto 2.2rem;
        }
        .hdt-star-wrap {
          margin-bottom: var(--spacing-2);
        }
        .hdt-auth-quote {
          font-weight: var(--font-medium-or-bold);
          font-size: var(--text-lg);
          margin-bottom: var(--spacing-2); 
        }
        .hdt-test-info {
          position: relative;
          z-index: 2;
        }
        .hdt-testimonial-author {
          justify-content: space-between;
          column-gap: 1.5rem;
          font-weight: var(--font-medium-or-bold);
          font-size: var(--text-sm);
        }
        .hdt-testimonial-author-info {
          display: inline-flex;
          justify-content: flex-start;
          align-items: center;
          column-gap: 1rem;
          .hdt-testimonial-author-avatar {
            width: 3.5rem;
            flex: none;
            border-radius: 1.75rem;
            overflow: hidden;
            img {
              width: 100%;
              height: auto;
            }
          }
        }
      }
      .hdt-text-right {
        .hdt-testimonial-item {
          .hdt-quote-icon-wrap {
            inset-inline: 2.2rem auto;
          }
          .hdt-testimonial-author {
            flex-direction: row-reverse;
          }
          .hdt-testimonial-author-info {
            flex-direction: row-reverse;
          }
        }
      }
      .hdt-text-center {
        .hdt-testimonial-author:not(.hdt-has-verified) {
          justify-content: center;
        }
      }
      .hdt-slider__viewport {
        @container container_product_testimonials (min-width: 740px) {
          --slide-size-set: min(50%, 66rem);
        }
        &:before, &:after {
          content: "";
          position: absolute;
          z-index: 2;
          inset-block: 0 auto;
          width: min(21rem, 20%);
          height: 100%;
          pointer-events: none;
          display: none;
        }
        &:before {
          background-image: linear-gradient(calc(-90deg * var(--value-logical-flip)),transparent 0,var(--color-background) 100%);
          inset-inline: 0 auto;
        }
        &:after {
          background-image: linear-gradient(calc(90deg * var(--value-logical-flip)),transparent 0,var(--color-background) 100%);
          inset-inline: auto 0;
        }
        &:has(.is-in-view + .is-in-view) {
          &:before, &:after {
            display: block;
          }
        }
      }
      @media (min-width: 992px) {
        margin-block-start: 2rem;
      }
    }
    .hdt-verified-text {
      color: var(--color-success-text);
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      column-gap: .4rem;
    }
    @media screen and (min-width: 1024px) {
        gap: min(var(--product-gap), 3.5rem);
        grid:  "pr-media pr-info" / minmax(0, 0.6fr) minmax(0, 0.4fr);
        .hdt-product-medias, .hdt-product__info-wrapp {
          position: sticky;
          top: 3rem;
          align-self: start;
          z-index: 2;
          &[is-hdt-safe-bottom] {
            top: auto;
            bottom: 3rem;
            align-self: end;
          }
        }
        &:has(.hdt-slider--product-testimonials) {
          .hdt-product-medias-wrap {
            display: block;
            grid-area: pr-media;
            position: sticky;
            top: 3rem;
            align-self: start;
            z-index: 2;
            .hdt-product-medias {
              position: static;
            }
          }
        }
    }
    @media screen and (min-width: 1150px) {
        gap: var(--product-gap, 4rem);
        grid: var(--product-layout, "pr-media pr-info" / minmax(0, 0.5fr) minmax(0, 0.5fr));
    }
  }
  .shopify-model-viewer-ui {
    width: 100%;
    height: 100%;
    model-viewer {
      opacity: 1
    }
  }
  .hdt-product-info-group_vendor-rate{
    display: flex;
    align-items: center;
    gap: 1rem;
    .hdt-rating-text, .hdt-rating-count{
      margin-inline-start: 0.6rem;
    }
  }
  .hdt-product__info-wrapp{
    --product-info-space: 2rem;
    --product-info-text-space: 1rem;
    --product-info-box-space: 1.5rem;
    --product-info-box-box-space: 3rem;
    .hdt-product-info__item{
      position: relative;
      margin-block-start: var(--product-info-space, 1.5rem);
      &.hdt-product-info__item--text {
        --product-info-space: var(--product-info-text-space);
      }
      &.hdt-product-info__item--text-box{
        --product-info-space: var(--product-info-box-space);
      }
      &.hdt-product-info__item--box + .hdt-product-info__item--text, &.hdt-product-info__item--text + .hdt-product-info__item--box {
        --product-info-space: var(--product-info-box-space);
      }
      &.hdt-product__price + .hdt-product-info__item--box{--product-info-space: 1.2rem;}
      &:first-child{margin-block-start: 0;}
      &.hdt-product__line-item-property .hdt-property-option-wrap .hdt-property-option:not(:last-child){margin-block-end: 0.5rem;}
      &.hdt-product__line-item-property .hdt-line-item-property--options > label{
        display: block;
        margin-block-end: 1rem;
        + .hdt-select{
          margin-block-start: 0;
        }
      }
    }
    .hdt-product__buy-buttons{
      .hdt-recipient-form{margin-block-end: 1rem;}
    }
    .hdt-product__badges{
      display: flex;
      gap: 0.5rem;
      .hdt-badge{
        border-radius: var(--rounded-xs);
      }
    }
    .hdt-product__description--collapsible{
      .hdt-accordion{
        flex: 0 0 100%;
        summary{
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid var(--color-line-border);
          padding-block-end: 0.8rem;
          svg{
            transition: transform 0.3s;
            will-change: transform;
          }
        }
        .hdt-inner-content{
          padding-block-start: 1.2rem;
        }
        details[open] summary svg{
          transform: rotate(180deg);
        }
      }
    }
    .hdt-product__separator + .hdt-product__description--collapsible{
      --product-info-space: 0
    }
  }
  .hdt-product-info__item--text + .hdt-product-info__item--text-box{
    --product-info-space: var(--product-info-box-space);
  }
  .hdt-main-product__vendor{
    display: inline-flex;
    background: var(--color-background2);
    font-size: var(--text-sm);
    border-radius: var(--rounded-xs);
    padding: var(--spacing-0-4) var(--spacing-1);
  }
  .hdt-quantity-wrapp {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.15rem 0.8rem;
    min-width: 12.7rem;
    width: max-content;
    border-radius: var(--rounded-button);
    border: 1px solid var(--color-line-border);
    button {
      display: inline-grid;
      justify-content: center;
      align-items: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background-color: color-mix(in srgb, var(--color-foreground), transparent 96%);
    }
    input[type=number]{
      border: none;
      padding: 0;
      height: 100%;
      min-height: auto;
      width: auto;
    }
  }
  .hdt-quantity-wrapp input[type=number] {
    margin: 0;
    appearance: textfield; /* Firefox */
    text-align: center;
    background: none;
  }

  /* Update variant*/
  .hdt-variant-picker .hdt-select{margin-block-start: 0;}
  .hdt-product__variant-picker{
    --variant-border-color: color-mix(in srgb, var(--color-foreground), transparent 80%);
  }
  .hdt-variant-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    --swatch-size: 2rem;
    .hdt-product-form__input[swatch-shape="circle"]{
      --swatch-radius: 50%;
    }
    .hdt-product-form_value{
      &:before, &:after{
        display: none;
      }
      .hdt-block-swatch__color{
        border-radius: var(--swatch-radius);
        background: var(--hdt-bg-image, none) center / cover;
        background-color: var(--hdt-bg-color, #e5e5e5);
        content: "";
        width: 1.5rem;
        height: 1.5rem;
        display: inline-block;
        vertical-align: middle;
        padding: 0;
        &.hdt-bg-color-white{
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-foreground), transparent 90%)
        }
      }
    }
    .hdt-product-form__label{
      margin-block-end: 1.8rem;
      &.hdt-product-form__label--size_chart {
        display: flex;
        justify-content: space-between;
        width: 100%;
        column-gap: 2rem;
        .hdt-open-size-chart-btn{
          --height-btn-icon: 1.4rem
        }
      }
    }
    .hdt-popover {
      max-width: 100%;
      width: 100%;
      box-shadow: 0 .4rem 1.6rem color-mix(in srgb,var(--color-overlay),transparent 80%);
      &.hdt-popover-u[open-as-modal] .hdt-popover__body{
        padding-bottom: 1rem;
      }
      .hdt-richlist--variant {
        width: 100%;
        display: block;
        overflow: hidden;
        :is(button,a){
          display: block;
          height: 4rem;
          line-height: 4rem;
          width: 100%;
          padding-inline: 1rem;
          position: relative;
          transition: color .3s ease,background-color .25s ease;
          text-align: start;
          border-radius: var(--rounded-2xs);
          color: var(--color-foreground);
          &.is-disabled{
            opacity: 0.5;
            text-decoration: line-through;
          }
        }
        :is(button[aria-selected=true],a[selected]) {
          color: var(--color-foreground);
          background-color: color-mix(in srgb, var(--color-foreground), transparent 92%);
        }
      }
    }
    > fieldset.hdt-product-form__input{flex: 0 0 100%;}
  }
  .hdt-product-form__input[picker-style=dropdown_swatch] .hdt-product-form__values .hdt-product-form_value{
    gap: 1rem;
    display: flex;
    align-items: center;
  }
  .hdt-product-form__input[picker-style^=block] .hdt-product-form__values {
    gap: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    --block-border-radius: var(--rounded-2xs);
    .hdt-product-form_value{
      display: inline-flex;
      min-width: 6rem;
      padding: .8rem 1.5rem;
      align-items: center;
      justify-content: center;
      border-radius: var(--block-border-radius);
      box-shadow: 0 0 0 1px var(--variant-border-color);
      margin-inline-end: 0;
      font-size: var(--text-lg);
      transition: all 0.3s ease;
      margin: 1px;
      position: relative;
      gap: 0;
    }
    .is-disabled + .hdt-product-form_value::after{
        content: "";
        display: inline-flex;
        inset: 0.4rem;
        position: absolute;
        width: auto;
        height: calc(100% - 0.8rem);
        background: color-mix(in srgb, var(--color-foreground), transparent 70%);
        clip-path: polygon(0 calc(100% - 1px),100% -1px,100% 0,0 100%);
        opacity: 1;
        border-radius: 0;
    }
    input[type=radio]:checked + .hdt-product-form_value, .hdt-product-form_value[selected]{
      --variant-border-color: var(--color-foreground)
    }
  }
  .hdt-product-form__input[picker-style=block_swatch] .hdt-product-form__values .hdt-product-form_value{
    gap: 1rem;
  }
  .hdt-product-form__input[picker-style=swatch]{
    .hdt-product-form__values{
      display: flex;
      flex-wrap: wrap;
      padding-block: 0.7rem;
      padding-inline-start: 0.85rem;
      row-gap: 1.8rem;
      .hdt-bg-color-white:not(.hdt-has-img-white){
        box-shadow: 0 0 0 1px var(--color-foreground);
      }
      a.hdt-product-form_value[selected]:after,
      input[type="radio"]:checked + .hdt-product-form_value:after{
        clip-path: none;
        opacity: 1;
        transform: scale(1);
      }
      input.is-disabled + .hdt-product-form_value:before{
        display: block;
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: var(--swatch-radius);
        background: var(--color-foreground);
        clip-path: polygon(0 calc(100% - 1px),100% -1px,100% 0,0 100%);
        transition: all 0.3s ease;
      }
      input.is-disabled:checked + .hdt-product-form_value:before{
        inset: calc(var(--size-offset)/2 * -1);
        width: calc(100% + var(--size-offset));
        height: calc(100% + var(--size-offset));
      }
      .hdt-product-form_value{
        --size-offset: 1.4rem;
        display: inline-flex;
        background-color: var(--hdt-bg-color, var(--color-line-border));
        background-image: var(--hdt-bg-image);
        background-size: cover;
        background-position: center;
        width: var(--swatch-size);
        height: var(--swatch-size);
        border-radius: var(--swatch-radius);
        margin-inline-end: 2rem;
        position: relative;
        &:after {
          display: inline-flex;
          content: "";
          position: absolute;
          inset: calc(var(--size-offset)/2 * -1);
          box-shadow: inset 0 0 0 1.5px var(--color-foreground);
          opacity: 0;
          transform: scale(0.8);
          transition: opacity 0.3s ease, transform 0.3s ease;
          border-radius: var(--swatch-radius);
          width: calc(var(--swatch-size) + var(--size-offset));
          height: calc(var(--swatch-size) + var(--size-offset));
          clip-path: none;
          background: none;
        }
      }
    }
    &[variant-image=true]{
      --swatch-size: 3.8rem;
      .hdt-product-form__values{
        padding: 0;
        .hdt-product-form_value{
          --size-offset: 0rem;
        }
      }
    }
}

  /* Chrome, Safari, Edge, Opera */
  .hdt-quantity-wrapp input[type='number']::-webkit-inner-spin-button,
  .hdt-quantity-wrapp input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }
    
  .hdt-product__buy-buttons .hdt-quantity__label{
    margin-block-end: 1rem;
    display: block;
  }
  .hdt-product-form__buttons{
    .hdt-btn{
      font-size: var(--text-lg);
      font-weight: var(--font-semibold);
    }
    :where(button,input[type=button]){
      text-transform: inherit;
    }
    &.hdt-has-both-btn{
      display: grid;
      gap: 1.2rem;
      grid-template: 1fr 1fr / auto 1fr ;
      .shopify-payment-button{
        grid-area: 2/ span 2;
      }
    }
    &.hdt-has-quantity{
      display: grid;
      grid-template: auto / 1fr;
      row-gap: 2rem;
    }
    &.hdt-has-btn-dynamic{
      display: grid;
      row-gap: 1.2rem;
    }
    &.hdt-only-add-to-cart{
      display: grid;
      grid-template: 1fr / 1fr;
      row-gap: 1.2rem;
    }
  }
  button.shopify-payment-button__button--unbranded{
    --color-btn-secondary: var(--color-foreground);
    --color-button-border: var(--color-foreground);
    font-weight: var(--font-semibold);
    border-radius: var(--rounded-button);
    background: transparent;
    border: 2px solid var(--color-button-border);
    color: var(--color-btn-secondary);
    padding: 1.4rem 2.8rem;
    font-size: var(--text-lg);
    min-height: 5.2rem;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .hdt-product-info__iwt{
    background: var(--color-background2);
    border-radius: var(--rounded-sm);
    &.hdt-product__iwt-vertical{
      padding: 1.2rem;
      .hdt-product__icon-with-text{
        padding-block: 0.5rem;
      }
    }
  }
  .hdt-pi-icon-with-text {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    gap: 0.7rem;
    .hdt-pi-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .hdt-marquee.hdt-product-info__item{
    padding-block: 1.2rem;
    .hdt-product__icon-with-text{
      display: inline-flex;
    }
    .hdt-line-horizontal{
      width: 1px;
      height: 25px;
      display: inline-flex;
      background-color: color-mix(in srgb, var(--color-foreground), transparent 90%);
    }
  }
  .hdt-product-info__item--iwtl {
    font-size: var(--text-base);
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    justify-content: space-between;
    border: 1px solid var(--color-line-border);
    border-radius: var(--rounded-sm); 
    padding: 2rem 1.6rem;
    container: container_product_icon_list / inline-size;
    .hdt-product__icon-with-text {
      width: 100%;
      max-width: 100%;
      flex-grow: 1;
    }
    .hdt-pi-icon-with-text {
      grid-template-columns: 2.4rem 1fr;
      .hdt-pi-icon {
        min-height: 2.4rem;
      }
    }
    @container container_product_icon_list (min-width: 380px) {
      .hdt-product__icon-with-text {
        width: calc(50% - 1.5rem);
        max-width: 22rem;
      }
    }
  }
  .hdt-pickup-availability {
    padding: 1.3rem 1.6rem;
    background: var(--color-background2);
    @media screen and (min-width: 1150px) {
      padding: 1.3rem 1.6rem;
    }
    .hdt-caption-large + .hdt-caption{
      margin-block-start: 0.2rem;
    }
    .hdt-btn-link{
      justify-content: flex-end;
      margin-block-end: 0;
      margin-block-start: 0.8rem;
    }
    .hdt-pickup-availability__preview{
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      width: 100%;
      > svg{
        margin-block-start: 0.3rem;
      }
      >svg[class*=hdt-icon-checked] {
        color: var(--color-success-text);
      }
      .hdt-pickup-availability__info{
        flex: 1;
      }
    }
  }
  .hdt-link-noline-icon{
    padding: 0;
    span:first-child{
      padding-block: 0.2rem;
    }
  }
  .hdt-drawer-pickup-availability .hdt-pickup-availability__preview {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
    padding: 0.8rem 1.6rem;
    border-radius: var(--rounded-full);
    font-size: var(--text-sm);
    color: var(--hdt-color-pickup);
    background-color: color-mix(in srgb, var(--hdt-color-pickup), #fff 85%);
    >svg{margin-block-start: 0;}
    &.hdt-pickup-availability__preview--success {
      --hdt-color-pickup:  var(--color-success-text)
    }
    &.hdt-pickup-availability__preview--error{
      --hdt-color-pickup: var(--color-error-text);
    }
    .hdt-pickup-availability__info{
      flex: 1;
    }    
  }
  .hdt-drawer--blur .hdt-pickup-availability__preview > svg[class*=hdt-icon-checked] .hdt-path-check{
     fill: var(--color-foreground)!important;
  }
  .hdt-drawer-pickup-availability{
    .hdt-drawer__inner{
      padding: 1rem 0;
      display: flex;
      flex-direction: column;
    }
    .hdt-pickuplist-wrapper{
      flex: 1;
      padding-bottom: 1rem;
      overscroll-behavior-y: contain;
      overflow-y: auto;
    }
    .hdt-pickup-availability-product {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 1rem var(--padding-y, 2.4rem) 2.2rem;
      .hdt-pickup-availability__media {
        overflow: hidden;
        flex: none;
        width: 9rem;
        place-self: flex-start;
        @media (min-width: 480px) {
            width: 12rem;
        }
      }
      .hdt-pickup-availability__variant{
        display: flex;
        align-items: center;
        margin-block-start: 0.7rem;
        .hdt-line-vertical{
          display: inline-flex;
          width: 1px;
          height: 1.4rem;
          margin-inline: 0.8rem;
          background: color-mix(in srgb, var(--color-foreground), transparent 70%);
        }
      }
    }
    .hdt-pickup-availability-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding-inline: var(--padding-y, 2.4rem);
      gap: 2.2rem;
      .hdt-pickup-availability-list__item {
        background-color: color-mix(in srgb, var(--color-foreground), transparent 95%);
        padding: 1.8rem;
        overflow: hidden;
        &>*:not(:first-child) {
          margin-top: 1.4rem;
        }
      }
      .hdt-pickup-availability-address{
        display: flex;
        flex-direction: column;
        font-style: normal;
        .hdt-line-address{
          gap: 1.2rem;
          margin-block-end: 1rem;
          svg{
            flex-shrink: 0;
            margin-block-start: 0.3rem;
            width: auto;
            height: 1.4rem;
          }
        }
        .hdt-pickup-availability-map-link{
          align-self: flex-end;
        }
      }
    }
    &.hdt-drawer--blur{
      .hdt-pickup-availability-list .hdt-pickup-availability-list__item {
        background-color: color-mix(in srgb, var(--color-foreground), transparent 80%);
        border: 1px solid color-mix(in srgb, var(--color-foreground), transparent 80%);
      }
    }
    @media (max-width: 768px) {
      .hdt-pickup-availability-list{
        gap: 1.8rem;
        .hdt-pickup-availability-list__item {
          padding: 1.8rem 2.2rem;
        }
      }
    }
  }
  .hdt-variant-inventory{
    border: 1px solid var(--color-line-border);
    padding: 1rem 1.6rem 1.3rem;
    border-radius: var(--rounded-sm);
    display: block;
    .hdt-stock-status{
      line-height: 1;
    }
    span.hdt-stock-status{
      padding-block: 1rem 0.7rem;
    }
    &:has(.hdt-stock-success) {
      --color-stock: var(--color-success-text);
    }
    &:has(.hdt-stock-warning) {
      --color-stock: var(--color-warning-text);
    }
    &:has(.hdt-stock-error) {
      --color-stock: var(--color-error-text);
    }
    .hdt-icon-progress{
      min-width: 15px;
      color: var(--color-stock);
      flex: none;
    }
    > legend{
      padding-inline: 1rem;
      margin-inline-start: 0.6rem;
    }
    &.hdt-progress-bar--empty{
      .hdt-stock-status{
        > span{
          display: flex;
          gap: 0.8rem;
          align-items: center;
        }
      }
    }
    .hdt-progress-wrap{
      --progress-bar: var(--color-error-text);
      display: flex;
      align-items: center;
      gap: 1.5rem;
      min-height: 1.8rem;
    }
  }
  .hdt-x-progress {
    overflow: hidden;
    display: block;
    width: 100%;
    height: .4rem;
    border-radius: var(--rounded-xs);
    --progress-bar: var(--color-error-text);
    background-color: color-mix(in srgb, var(--color-foreground), transparent 90%);
    &:before {
      content: "";
      display: block;
      height: inherit;
      border-radius: inherit;
      transform-origin: var(--value-origin-start);
      transform: scaleX(var(--percent-val, 0%));
      background: var(--progress-bar);
    }
  }
  .hdt-x-progress + .hdt-progress-msg{
    margin-block-start: 0.7rem;
    display: block;
  }
  .is-unreached .hdt-x-progress {
    --progress-bar: var(--color-warning-text);
  }
  .is-success .hdt-x-progress {
    --progress-bar: var(--color-success-text);
  }
  .hdt-stock-success+.hdt-progress-wrap .hdt-x-progress {
    --progress-bar: var(--color-success-text);
  }
  .hdt-stock-warning+.hdt-progress-wrap .hdt-x-progress {
    --progress-bar: var(--color-warning-text);
  }
  .hdt-stock-error+.hdt-progress-wrap .hdt-x-progress {
    --progress-bar: var(--color-error-text);
  }
  .hdt-modal__product{
    padding: 0;
    min-height: 20rem;
    width: 100%;
    .hdt-modal__header{
      &>button{
        margin-block-start: 0;
      }
    }
    .hdt-modal__inner{
      min-height: 18rem;
    }
    &.hdt-modal__ask{
      max-width: min(48.2rem,90vw);
      .hdt-modal__inner{
        [circle-bg-wrap]{
          overflow: hidden;
        }
        .hdt-form--move-text .hdt-field{
          margin-block-start: 0;
          margin-block-end: 1.4rem;
        }
      }
    }
  }
  .hdt-product-info__accordion{
    display: flex;
    padding-block-end: var(--spacing-1);
    padding-block-start: var(--spacing-1);
    border-top: 1px solid var(--color-line-border);
    margin-top: var(--product-info-space);
    details{flex: 0 0 100%;}
    .hdt-accordion-heading{
      gap: 1rem;
      display: flex;
      align-items: center;
      font-size: var(--text-base);
      .hdt-icon-wrap{
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.8rem;
      }
    }
    .hdt-accordion-content{
      padding-block-start: 1rem;
    }
    & + .hdt-product-info__accordion{
      margin-top: 0;
    }
    &.hdt-product-info__accordion--standalone {
      border-bottom: .1rem solid var(--color-line-border);
      & + .hdt-product-info__accordion{
        border-top: none;
      }
    }
  }
  .hdt-product-info__item:not(.hdt-product-info__accordion) + .hdt-product-info__accordion:not([class*="--standalone"]){
    border-top: none;
  }
  .hdt-product__tax a {
    color: inherit !important;
  }
  .hdt-recipient-fields {
    background-color: var(--color-background2);
    padding: 1.5rem 1.8rem;
    display: none;
  }
  .hdt-recipient-form .hdt-recipient-checkbox[type=checkbox]{
    --size-checkbox: 1.8rem;
    margin-block-start: 0.2rem;
    border-radius: 50%;
    & + label{
      margin-block-end: 1rem;
      display: inline-flex;
    }
    &:after{
      border-radius: inherit;
      inset: 0.4rem;
      transform: scale(0.4);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3 ease;
    }
    &:hover:after{
      opacity: 1;
    }
    &:checked:after{
      opacity: 1;
      transform: scale(1);
    }
  }  
  .hdt-recipient-form>input[type=checkbox]:checked~.hdt-recipient-fields {
    display: block;
    animation: fadeIn .4s ease-out forwards;
    margin-bottom: var(--product-info-box-box-space);
  }
  .hdt-recipient-fields__field .hdt-field--date{
    display: grid;
    grid-template-areas: "input";
    width: 22rem;
    max-width: 100%;
    .hdt-field__input{
      grid-area: input;
      --height-input: 6.5rem;
      padding-block-start: 2rem;
    }
    .hdt-field__label{
      height: 100%;
      grid-area: input;
      padding: 1.2rem 0;
      font-size: 75%;
      pointer-events: none;
      padding-inline-start: var(--padding-inline-input);
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* Recomendproduct */
  .hdt-product__complementary .hdt-pc--fieldset{
    display: flex;
    padding: 3.3rem 1.6rem 3.3rem;
    > legend{
      padding-inline: 1.5rem;
      margin-inline-start: 3rem;
    }
  }
  .hdt-pc--fieldset{
    .hdt-pc--slide-container{
      &.hdt-pc--slide-container-single{
        .hdt-product__complementary-product{
          display: grid;
          grid: 1fr / 11.4rem minmax(0, 1fr);
          column-gap: 2rem;
          .hdt-open-quickview-btn{
            margin-block-start: 1.1rem;
            --height-btn-icon: 1rem;
          }
          .hdt-product__complementary-product-title{
            margin-block-end: 0.4rem;
          }
        }
      .hdt-slider-dots{
          justify-content: flex-end;
        }
      }
    }

    .hdt-product__complementary-products{
      --dots-spacing: 1.4rem;
      display: grid;
    }
  }
  .hdt-product__share{
    display: flex;
    gap: 1rem;
    .hdt-share-button, .hdt-ask-button{
      gap: 0.8rem;
      flex-direction: row;
      align-items: center;
    }
    .hdt-popover--share{
      min-width: 320px;
      box-shadow: 0 1rem 2.2rem rgba(0,0,0,0.15);
      padding: 2rem;
      .hdt-popover__header{
        padding: 0;
        margin-bottom: 1.5rem;
      }
      .hdt-popover__inner{
        padding: 0;
        .hdt-share-button__links{padding-block-start: 0.2rem;}
      }
    }
  }
  .hdt-form--move-text button[type="submit"]{
    margin-block-start: 2.4rem;
  }
  .hdt-share-button__defaultcolor{
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    overflow: hidden;
    --w: 4.5rem;
    a {
      width: var(--w);
      height: var(--w);
      min-width: var(--w);
      display: inline-flex;
      background-color: var(--color-social, #999);
      color: #fff;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-block: 0.1rem;
      svg {
        width: auto;
        height: 2.25rem;
        fill: currentColor;
      }
    }
    @media (min-width: 768px) {
        justify-content: flex-start;
        --w: 2.8rem;
        margin-bottom: 1.5rem;
        a > svg{
          height: 1.4rem;
        }
    }
  }
  .hdt-share-button__defaultcolor{
    .hdt-social--facebook{
      --color-social: #4267B2;
    }
    .hdt-social--twitter{
      --color-social: #14171A;
    }
    .hdt-social--telegram{
      --color-social: #31a8e0;
    }
    .hdt-social--twitter{
      --color-social: #14171A;
    }
    .hdt-social--pinterest{
      --color-social: #E60023;
    }
    .hdt-social--tumblr{
      --color-social: #34475c;
    }
    .hdt-social--telegram{
      --color-social: #31a8e0;
    }
    .hdt-social--whatsapp{
      --color-social: #25D366;
    }
    .hdt-social--linkedin{
      --color-social: #0a66c2;
    }
    .hdt-social--snapchat{
      --color-social: #fffc00;
    }
    .hdt-social--tiktok{
      --color-social: #010101;
    }
    .hdt-social--vimeo{
      --color-social: #1ab7ea;
    }
    .hdt-social--youtube{
      --color-social: #ff0000;
    }
    .hdt-social--instagram{
      --blue: #3051f1;
      --purple: #c92bb7;
      --red: #f73344;
      --orange: #fa8e37;
      --yellow: #fcdf8f;
      --yellow_to: #fbd377;
      --color-social: radial-gradient(
        circle farthest-corner at 28% 100%,
        var(--yellow) 0%,
        var(--yellow_to) 10%,
        var(--orange) 22%,
        var(--red) 35%,
        transparent 65%
      ),
      linear-gradient(145deg, var(--blue) 10%, var(--purple) 70%);
    }
  }
  .hdt-social--email{
      --color-social: #5fb7e0;
  }
  .hdt-share-button__wrapp {
    display: flex;
    width: 100%;
    padding: .4rem;
    gap: 0.5rem;
    border-radius: var(--rounded-input, .3rem);
    .hdt-share-button__input {
      width: 100%;
      padding: .6rem 1rem;
      border: none;
      --height-input: 3.6rem
    }
    .hdt-share-button__copy{
      min-height: unset;
      min-width: 7rem;
      --font-size-button: var(--text-sm);
      --padding-button: 0 1.5rem;
      --rounded-button: calc(var(--rounded-input, .3rem)* .65);
    }
  }
  .hdt-product-info-discount{
    padding: 2rem 1.6rem;
    border-radius: var(--rounded-sm);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 1rem;
    row-gap: 1rem;
    .hdt-coundtdown-box hdt-countdown-item{
      border-radius: var(--rounded-xs);
    }
    .hdt-pr-cd-text{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .hdt-code-coupon-wrap{
      display: grid;
      grid-template-columns: auto 6.1rem;
      width: 145px;
      gap: 0.5rem;
      border: 1px dashed color-mix(in srgb, var(--color-foreground), transparent 60%);
      border-radius: var(--rounded-input);
      padding: 0.4rem;
      .hdt-discount-button__input{
        --height-input: 1.8rem;
        padding-inline: 0;
        color: inherit;
        border: none;
        min-width: 0;
        max-width: none;
        &:focus{
          outline: none;
        }
      }
      .hdt-discount-button__copy{
        display: flex;
        --font-size-button: var(--text-sm);
        --padding-button: 0 1rem;
        --gap-btn-icon: 0.5rem;
        --height-btn: 1.8rem;
        --rounded-button: calc(var(--rounded-input)* .65);
        align-items: center;
        min-height: unset;
        .hdt-icon-copy{
          flex: 0 0 0.7rem;
        }
      }
    }
  }
  @media (max-width: 575.98px) {
    .hdt-product-info-discount{
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .hdt-code-coupon-wrap{
        margin-inline: auto;
      }
    }    
  }
  .hdt-coundtdown-product{
    --gap-cd: 0.6rem;
    hdt-countdown-item{
      --w-countdown: 5.1rem;
      --h-countdown: 5.1rem;
      background: var(--color-btn-primary);
      color: var(--color-btn-secondary);
      padding: 0.5rem;
      border: none;
      > *{
        color: inherit;
        line-height: 1;
      }
    }
  }

  /* Form mess */
  .hdt-form__message-wrapper {
    --form-msg-pb: 1.5rem;
    --form-msg-pi: 1.5rem;

    &:not([hidden]) {
      text-align: start;
      color: var(--hdt-msg-color, var(--color-success-text));
      background-color: color-mix(in srgb, var(--hdt-msg-color, var(--color-success-text)), transparent 90%);
      border-inline-start: 0.3rem solid var(--hdt-msg-color, var(--color-success-text));
      padding-block: var(--form-msg-pb);
      padding-inline: var(--form-msg-pi);
      margin-bottom: var(--form-msg-pb);
      border-radius: var(--rounded-xs);
    }

    .hdt-form__message {
      display: inline-flex;
      align-items: baseline;
      gap: .8rem;
      color: var(--hdt-msg-color);
      margin-bottom: 1rem;

      svg {
        flex-shrink: 0;
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    ul {
      list-style: disc;
      padding-inline-start: 2rem;
    }

    > svg {
      width: 1.2rem;
      height: 1.2rem;
      flex: none;
      margin-top: .3rem;
    }
  }
  form {
    .hdt-form__message-wrapper {
      margin-top: 1.6rem;
    }
  }
  .hdt-form__message {
    display: flex;
    justify-content: flex-start;
    gap: .8rem;
    margin-bottom: .5rem;

    &.hdt-form__message--error {
      --hdt-msg-color: var(--color-error-text);
      align-items: baseline;
    }

    svg {
      width: 1.2rem;
      height: 1.2rem;
      flex: none;
      margin-top: .3rem;
    }

    .hdt-success-message {
      color: var(--color-success-text);
    }

    .hdt-error-message {
      color: var(--color-error-text);
    }
  }
  /* Product media */
  .hdt-product-medias{
    position: relative;
    border-radius: var(--rounded-product-media);
    --thumb-rounded: calc(var(--rounded-product-media)/2);
    .hdt-product-media__thumb{
      .hdt-slider{
        --slide-spacing: 0.8rem;
        --thumb-hover-spacing: .5rem;
        --effect-timming: .25s;
      }
      .hdt-thumbnail__media{
        --slide-size: var(--slide-size-set);
        border-radius: var(--thumb-rounded);
        overflow: hidden;
        > .hdt-ratio{
          --color-shadow: transparent;
          box-shadow: inset 0 0 0 2px var(--color-shadow);
          transition: border var(--effect-timming) linear var(--effect-timming);
          border-radius: var(--thumb-rounded);
          overflow: hidden;
          cursor: pointer;
          > :where(img,svg){
            transition: all var(--effect-timming) linear;
          }
        }
        &.is-thumb-selected{
          > .hdt-ratio{
            --color-shadow: var(--color-foreground);
            > :where(img,svg){
              clip-path: inset(var(--thumb-hover-spacing) round calc(var(--thumb-rounded) * 0.65));
              padding: var(--thumb-hover-spacing);
            }
          }
        }
      }
    }
    .hdt-product-media__main{
      .hdt-product__media{overflow: hidden;}
      .hdt-slide-control-mixed{
        position: absolute;
        inset-inline-end: 1.8rem;
        inset-block-start: 50%;
        transform: translateY(-50%);
        @media (max-width: 767.98px) {
          display: none;
        }
      }
      .hdt-product-media__zoom{
        width: 3.8rem;
        height: 3.8rem;
        border-radius: 50%;
        border: 1px solid var(--color-line-border);
        background-color: var(--color-background);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset-block-start: 1.5rem;
        inset-inline-end: 1.8rem;
        pointer-events: none;
        cursor: pointer;
        @media (min-width: 1024px){
          display: none;
        }
      }
      &:has(.hdt-stamp) .hdt-product-media__zoom{
        inset-inline-start: 1.8rem;
        inset-inline-end: auto;
      }
    }
    .hdt-product-media__thumb{
      margin-inline: auto;
      margin-block-start:2.4rem;
      .hdt-slider-dots{
        --dots-spacing: 2.4rem;
      }
      .hdt-thumbnail__badge {
        --thumb-badge-size: 2.6rem;
        --thumb-badge-icon: 1.2rem;
        --thumb-video-icon: 1.2rem;
        color: var(--color-btn-secondary);
        background-color: color-mix(in srgb,var(--color-btn-secondary),transparent 80%);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 2;
        position: absolute;
        width: var(--thumb-badge-size);
        height: var(--thumb-badge-size);
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 0 0 5px rgba(0,0,0,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--rounded-full);
        opacity: 1;
        transition: transform .6s,opacity .6s;
        cursor: pointer;
      }
      :is([data-media-type=video],[data-media-type=external_video]) .hdt-thumbnail__badge svg {
        width: var(--thumb-video-icon);
        height: var(--thumb-video-icon);
      }
    }
    &.hdt-product-media--thumbnail_bottom .hdt-product-media__thumb{
      max-width: 100%;
      width: 55.6rem;
    }
    .hdt-product-media__view-in-space{
      margin-top: 1.5rem;
      --font-size-button: var(--text-base);
      background-color: color-mix(in srgb,var(--color-foreground),transparent 92%);
      color: var(--color-foreground);
      transition: none;
      svg.hdt-icon {
        height: 2.5rem;
        width: 2.5rem;
        fill: transparent;
        .icon-3d-badge-full-color-element {
          fill: var(--color-foreground);
          opacity: 1;
        }
      }
      &:after{display: none;}
      @media (min-width: 1024px) {
        display: none;
      }
    }
    @media (max-width: 767.98px){
      &[layout-mb="thumbnails"] .hdt-slider-thumb .hdt-slider__container { justify-content: safe center; }
    }
    @media (max-width: 1149.98px) {
      .hdt-product-media__thumb{
        max-width: 100%;
        width: 55.6rem;
      }
    }
    &.hdt-product-media--dots[layout-mb='thumbnails'] .hdt-product-media__thumb .hdt-slider-dots{display: none;}
    @media (min-width: 768px){
      &[layout="thumbnail_bottom"] .hdt-slider-thumb .hdt-slider__container { justify-content: safe center; }
      &.hdt-product-media--dots[layout-mb='thumbnails'] .hdt-product-media__thumb .hdt-slider-dots{
        display: flex;
      }
      &[layout="dots"] .hdt-product-media__thumb hdt-slider-thumb,
      &[layout="thumbnail_bottom"] .hdt-product-media__thumb .hdt-slider-dots,
      &[layout="thumbnail_left"] .hdt-product-media__thumb .hdt-slider-dots,
      &[layout="thumbnail_right"] .hdt-product-media__thumb .hdt-slider-dots{display: none;}
    }
    @media (min-width: 992px) {
      &[layout="stacked"] .hdt-product-media__thumb,
      &[layout="columns"] .hdt-product-media__thumb,      
      &[layout="column_sticky"] .hdt-product-media__thumb{display: none;}
    }
  }

  .hdt-product-medias[image-zoom=lightbox] .hdt-product__media {
    cursor: var(--cursor-zoom-in-icon) 22 22,zoom-in;
  }
  .hdt-product-media--column_sticky .hdt-product-media__thumb{
    display: block;
  }
  .hdt-product-media--column_sticky .hdt-product-media-rounded,
  .hdt-product-media--stacked .hdt-product-media-rounded,
  .hdt-product-media--columns .hdt-product-media-rounded{
    border-radius: clamp(0rem,var(--rounded-product-media),var(--media-gap, 0rem))
  }
  
  @media (min-width: 768px){
    .hdt-product-medias .hdt-product-media__thumb .hdt-slider{
      --slide-spacing: 2rem;
      --thumb-hover-spacing: .8rem;
    }
    .hdt-product-medias.hdt-product-media--thumbnail_left .hdt-product-media__thumb .hdt-slider,
    .hdt-product-medias.hdt-product-media--thumbnail_bottom .hdt-product-media__thumb .hdt-slider,
    .hdt-product-medias.hdt-product-media--thumbnail_right .hdt-product-media__thumb .hdt-slider{
      --slide-spacing: 1.6rem;
      display: block;
    }
    .hdt-product-medias.hdt-product-media--thumbnail_left,.hdt-product-medias.hdt-product-media--thumbnail_right{
      display: grid;
      gap: var(--slide-spacing, 1.2rem);
      .hdt-product-media__main{
        grid-area: pr-media-main;
      }
      .hdt-product-media__thumb{
        grid-area: pr-media-thumb;
        width: 100%;
        margin-block-start: 0;
        .hdt-slider__container{
          flex-direction: column;
          align-items: normal;
          transition: height .2s,max-height .2s;
          margin-inline-start: 0;
          margin-block-start: calc(var(--slide-spacing) * -1);
          .hdt-thumbnail__media{
            padding-block-start: var(--slide-spacing);
            padding-inline-start: 0;
          }
        }
      }
    }
    .hdt-product-medias.hdt-product-media--thumbnail_left{
      grid-template: "pr-media-thumb pr-media-main" / 11.4rem minmax(0,1fr);
    } 
    .hdt-product-medias.hdt-product-media--thumbnail_right{
      grid-template: "pr-media-main pr-media-thumb" / minmax(0,1fr) 11.4rem;
    }
  }
  @media (min-width: 992px) {
    .hdt-product-media--columns .hdt-product-media__main .hdt-slider__container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--media-gap);
        border-radius: 0;
        position: relative;
        overflow: hidden;
        transform: translateZ(0);
    }
    .hdt-product-media--columns .hdt-product-media__main.hdt-columns-layout-columns_big_1st .hdt-slider__slide:first-child{
      grid-column: span 2;
    }
    .hdt-media--coloum-sticky .hdt-media-list .hdt-slider__container{
      display: grid;
      gap: var(--media-gap);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hdt-product-media--column_sticky .hdt-product-media__thumb{
      display: none;
    }
    .hdt-product-media--stacked .hdt-product-media__main .hdt-slider__container{
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--media-gap);
    }
  }
  @media (min-width: 1150px){
    .hdt-media--coloum-sticky{
      display: grid;
      grid-template-columns: 1fr 0.33fr;
      gap: 1.2rem;
      .hdt-media-sticky{
        position: sticky;
        top: 3rem;
        align-self: flex-start;
        display: grid;
        &.hdt-sticky__slide{
          display: block!important;
          grid-area: 1/-1;
          transition: opacity 0.3s ease;
          &[hidden]{
            opacity: 0;
          }
        }
      }
      .hdt-media-list{
        .hdt-product__media-item.hdt-media-first{
          display: none;
        }
        .hdt-slider__container{
          grid-template-columns: repeat(1, minmax(0, 1fr));
        }
      }
    }
  }
  /*================ 6.5. Quick view ================*/
  
  .hdt-quick-view-modal{
    max-width: min(92rem,90vw);
    width: 100%;
    width: 100%;
    padding: 2rem 0 1.5rem 2rem;
    border-radius: var(--rounded);
    @supports (height: 100dvh) {
      max-height: calc(100dvh - 50px);
    }
    .hdt-modal__inner {
      padding: 0 1.5rem 0 0;
      [circle-bg-wrap]{overflow: hidden;}
    }
    .hdt-main-product{
      .hdt-product-medias{
        top: 0;
      }
      .hdt-product__info-wrapp {
        border-radius: 0;
        border: none;
        padding: 0;
        top: 0;
        .hdt-quantity-wrapp{
          background: var(--color-background2);
          button{
            background: var(--color-background2);
          }
        }
        .hdt-product__title > .hdt-h4{
          font-size: var(--h5-size);
        }
      }
      .hdt-slide-control-mixed{
        padding: var(--spacing-0-4);
        button[name="next"], button[name="previous"]{
          width: 1.6rem;
          height: 1.6rem;
          border-color: var(--color-line-border);
        }
        &.hdt-slide-controls-vertical{
          hdt-slider-progress {
            width: 0.21rem;
            height: 3rem;
          }
        }
      }
      .hdt-product-media__zoom{display: none;}
    }
    > .hdt-close-dialog-btn{
      display: none;
    }
    .hdt-dialog-modal__header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1.5rem 2rem 0;
    }
    &.hdt-modal--blur{
      --color-background2: color-mix(in srgb, var(--color-foreground), transparent 80%);
      svg.hdt-icon-arrow-long{
        .hdt-arrow-path{
          fill: var(--color-background);
        }
      }
      .hdt-slide-control-mixed{
        --color-line-border: color-mix(in srgb, var(--color-foreground), transparent 80%);
        background: color-mix(in srgb, var(--color-background), transparent 70%);
      }
    }
  }
  @media (min-width: 768px) {
    .hdt-quick-view-modal{
      .hdt-product-medias {
        padding-inline-end: 0;
        .hdt-product-media__thumb {
          --thumb-rounded: calc(var(--rounded-product-media)/4);
          padding-inline: 3.8rem;
          margin-block-start: 1.2rem;
          .hdt-slider {
              --slide-spacing: 1.6rem;
              --thumb-hover-spacing: .5rem;
          }
        }
      }
      .hdt-main-product{
        .hdt-product__info-wrapp {
          .hdt-product__info-container{
            padding-inline-end: 3.4rem;
          }
          .hdt-product__title > .hdt-h4{
            font-size: var(--h5-size-xl);
          }
        }
      }
    }
    .hdt-quick-view-modal{
      overflow: hidden;
      padding: 6.4rem 0 3.4rem 3.4rem;
      max-height: 92vh;
      @media (min-width: 1150px) {
        padding-top: 4.4rem;
      }
      .hdt-dialog-modal__header {
        display: none;
      }
      > .hdt-close-dialog-btn{
        display: inline-flex;
        position: absolute;
        top: 1.3rem;
        inset-inline-end: 1.4rem;
      }
    }
  }

  /*================ 6.4. Privacy policy ================*/
  .content-for-layout .shopify-policy__container {
  padding: 4rem 1.5rem;
  max-width: 100%;
  }
.shopify-policy__title {
padding-block: 0 4rem;
  h1 {
  --heading-size: var(--h4-size);
  }
}
  .pc--show-email-field input[type="checkbox"]{
  margin-block-start: 0.3rem;
  }
  @media only screen and (min-width: 768px) {
  .content-for-layout .shopify-policy__container {
    max-width: min(100%,var(--container-max-width-padding-md, 110%));
    padding: 5rem 3rem 6rem;
  }
  }

  @media only screen and (min-width: 1150px) {
  .content-for-layout .shopify-policy__container {
    max-width: var(--container-max-width-padding-xl);
    padding: 5rem 3rem 7rem;
  }
.shopify-policy__title {
  padding-block: 0 5rem;
  h1 {
    --heading-size: var(--h4-size-xl);
  }
}
  }