@charset "UTF-8";
/* CSS Document */

:root {
  --mobile-sticky-cart-height: 135px;
}

.pdp-main-carousel ul,
.pdp-main-carousel li,
.slick-list {
  overflow: clip;
}

.page-header-main {
  z-index: 998;
}

@media (min-width: 1023px) {
  .user-contextual-sidepanel[data-panel-name=view_minicart] {
    z-index: 1090;
  }
}

.product-description-add #viewer-container {
  display: none;
}

.power-viewer-container * {
  box-sizing: border-box;
}

power-viewer {
  display: block;
  width: 100%;
  height: 100%;
}

.pdp-main-carousel li {
  position: relative;
}

.power-viewer-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: AvantGarde, helvetica, Arial, serif;
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05rem;
  overflow: clip;
}

@media (max-width: 1024px) {
  .power-viewer-container > power-viewer {
    height: 100%;
  }
}

.pdp-main-carousel .pdpCarousel-container .image-content:not(.image-zoom) a {
  position: relative;
  overflow: clip;
}

.power-viewer-wrapper {
  position: relative;
}

.viewer-overlay {
  position: absolute;
  z-index: 501;
  display: none;
  background: transparent;
  width: 100%;
  top: 0;
  height: 100%;
  left: 0;
}

.power-viewer-container.has-qr .viewer-overlay {
  display: block;
}

power-viewer-switch {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.power-viewer-switch {
  position: sticky !important;
  bottom: calc(var(--add-to-cart-height) + 16px) !important;
  left: 0 !important;
}

@media (min-width: 1200px) {
  .power-viewer-ar-button:hover {
    background: #000;
    color: #fff;
    fill: #fff;
  }

  .sidepanel-overlay.show {
    z-index: 1080;
  }

  .power-viewer-switch {
    bottom: 16px !important;
  }
}

@media (max-width: 767px) {
  .power-viewer-container:before,
  .power-viewer-container:after {
    content: "";
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    z-index: 1;
  }
}

.power-viewer-container:before {
  left: 0;
}

.power-viewer-container:after {
  right: 0;
}

body .qrAR {
  white-space: pre;
  text-align: center;
  display: flex;
  grid-gap: 16px;
}

body .qrAR .qrtxt,
body .power-viewer-ar-qrcode .qrtxt {
  display: none;
}

.qrAR.svelte-1jd3mvr.svelte-1jd3mvr,
.power-viewer-container .power-viewer-ar-qrcode,
.power-viewer-ar-qrcode {
  background-color: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  color: #fff;
  pointer-events: none;
}

html[lang="fr"] .qrAR:before,
html[lang="fr"] .power-viewer-container .power-viewer-ar-qrcode:before {
  content: "Scannez le QRCode pour afficher\00000al'expérience sur votre mobile";
}

html[lang="en"] .qrAR:before,
html[lang="en"] .power-viewer-container .power-viewer-ar-qrcode:before {
  content: "Scan the QRCode to view\00000athe experience on your mobile phone";
}

html[lang="es"] .qrAR:before,
html[lang="es"] .power-viewer-container .power-viewer-ar-qrcode:before {
  content: "Escanee el código QR para visualizar\00000ala experiencia en su teléfono móvil";
}

html[lang="it"] .qrAR:before,
html[lang="it"] .power-viewer-container .power-viewer-ar-qrcode:before {
  content: "Scannerizzare il codice QR per\00000avisualizzare l'esperienza sul cellulare";
}

html[lang="de"] .qrAR:before,
html[lang="de"] .power-viewer-container .power-viewer-ar-qrcode:before {
  content: "Scannen Sie den QR-Code,\00000aum das Erlebnis auf Ihrem Handy anzuzeigen.";
}

html[lang="fr"] .power-viewer-ar-button:after {
  content: "Voir en réalité augmentée";
}

html[lang="en"] .power-viewer-ar-button:after {
  content: "View in augmented reality";
}

html[lang="es"] .power-viewer-ar-button:after {
  content: "Ver en realidad aumentada";
}

html[lang="de"] .power-viewer-ar-button:after {
  content: "In Augmented Reality ansehen";
}

html[lang="it"] .power-viewer-ar-button:after {
  content: "Visualizza in realà aumentata";
}

body.didomi-popup-open {
  overflow: scroll !important;
}

html[lang="fr"] .power-viewer-interaction-button:after {
  content: "Voir le contenant du sac";
}

html[lang="en"] .power-viewer-interaction-button:after {
  content: "See the container of the bag";
}

html[lang="es"] .power-viewer-interaction-button:after {
  content: "Ver el contenedor del bolso";
}

html[lang="de"] .power-viewer-interaction-button:after {
  content: "Den Behälter der Tasche sehen";
}

html[lang="it"] .power-viewer-interaction-button:after {
  content: "Vedere il contenitore della borsa";
}

.power-viewer-interaction-button:before {
  content: "";
  width: 24px;
  height: 24px;
  -webkit-mask-image: var(--XRrayIcons);
  mask-image: var(--XRrayIcons);
  mask-repeat: no-repeat;
  background: #000;
  display: block;
}

.power-viewer-interaction-button.svelte-1xekwnr:hover:before,
.power-viewer-interaction-button.active.svelte-1xekwnr:before {
  background-color: #fff;
}

.power-viewer-interaction-button .material-symbols-outlined {
  display: none;
}

.power-viewer-interaction-button.svelte-1xekwnr {
  border-radius: 4px;
  opacity: 1;
  display: block;
}

.power-buttons {
  display: flex;
  padding: min(2vw, 32px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  flex-direction: column-reverse;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .power-buttons {
    height: 130px;
    top: auto;
    bottom: 0;
    align-items: center;
    grid-gap: 8px;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }
}

@media (max-width: 1024px) {
  .products-slider-nav .slick-cloned .power-viewer-container,
  .products-slider-nav .slick-cloned power-viewer {
    display: none !important;
  }
}