/* Local static-mirror fixes and interactions.
   The original Hermès styles stay untouched; this file only adds what a
   script-less copy needs (sticky header, local menu layers, mobile drawer). */

html,
body {
  max-width: 100%;
}

body {
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
}

/* Keep the original header visible while scrolling. */
header.header-container {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #fcf7f1;
  transition: box-shadow 0.25s ease;
}

header.header-container.dsh-scrolled {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.header-main-container,
.header-main-container.transparent,
.header-main-container.full-transparent {
  background: #fcf7f1 !important;
}

/* The SSR header hides its mega-menu until the Angular app adds .show. */
.header-main-container .sub-menu.show {
  display: block;
  position: fixed;
  inset-block-start: 110px;
  inset-inline-start: 0;
  inline-size: 100%;
  max-height: calc(100vh - 110px);
  overflow: auto;
  background: #fff;
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.1);
  z-index: 2100;
}

.header-main-container.menu-open {
  z-index: 2100;
}

.dsh-mega-overlay {
  position: fixed;
  inset: 110px 0 0 0;
  z-index: 1900;
  background: rgba(20, 18, 16, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.dsh-mega-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

body.dsh-mega-open {
  overflow: hidden;
}

/* Any destination we could not mirror must never navigate away. */
a.dsh-disabled-link,
a[href="javascript:;"] {
  cursor: default;
}

a.dsh-disabled-link:focus-visible {
  outline: 1px dotted #777;
  outline-offset: 2px;
}

/* Mobile navigation drawer built from the desktop mega-menu. */
.dsh-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1c1b19;
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0.28s;
}

.dsh-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

body.dsh-nav-open {
  overflow: hidden;
}

.dsh-mobile-head {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e7e0d7;
  background: #fcf7f1;
}

.dsh-mobile-title {
  font: 500 11px/1 "Overpass Mono", "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dsh-mobile-close {
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #1c1b19;
}

.dsh-mobile-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 48px;
}

.dsh-mobile-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid #e7e0d7;
  background: transparent;
  color: #1c1b19;
  text-align: left;
  font: 400 15px/1.2 "Manrope", Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.dsh-mobile-cat .dsh-plus {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.dsh-mobile-cat .dsh-plus::before,
.dsh-mobile-cat .dsh-plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.2s ease;
}

.dsh-mobile-cat .dsh-plus::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 1px;
}

.dsh-mobile-cat .dsh-plus::after {
  left: 6px;
  top: 0;
  width: 1px;
  height: 14px;
}

.dsh-mobile-cat[aria-expanded="true"] .dsh-plus::after {
  transform: scaleY(0);
}

.dsh-mobile-panel {
  display: none;
  padding: 4px 0 18px;
}

.dsh-mobile-panel.is-open {
  display: block;
}

.dsh-mobile-group {
  margin: 16px 0 0;
}

.dsh-mobile-group-title {
  margin: 0 0 8px;
  color: #6b655d;
  font: 500 10px/1.3 "Overpass Mono", "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dsh-mobile-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dsh-mobile-links li {
  margin: 0;
}

.dsh-mobile-links a {
  display: block;
  padding: 6px 0;
  color: #1c1b19;
  font: 400 13px/1.4 "Manrope", Arial, sans-serif;
  text-decoration: none;
}

.dsh-mobile-links a.dsh-disabled-link {
  color: #8a847b;
}

.dsh-mobile-utility {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #e7e0d7;
  display: grid;
  gap: 10px;
}

.dsh-mobile-utility a {
  color: #1c1b19;
  font: 400 12px/1.4 "Manrope", Arial, sans-serif;
  text-decoration: none;
}

/* Small toast for controls whose backend was not captured. */
.dsh-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 6000;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px;
  transform: translate(-50%, 16px);
  background: #1c1b19;
  color: #fff;
  font: 400 12px/1.45 "Manrope", Arial, sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dsh-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Make the static first frame of video blocks look intentional. */
h-video .btn-container {
  display: none !important;
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .dsh-mobile-nav,
  .dsh-mega-overlay,
  .dsh-toast,
  header.header-container {
    transition: none !important;
  }
}

@media (max-width: 1023px) {
  .header-main-container .sub-menu.show {
    display: none !important;
  }

  .header-main-container {
    min-height: 50px;
  }
}

/* The captured header sits on the light header band (there is no JS theme
   switch any more), so force its originally-white controls to ink. */
header.header-container .white {
  color: #1c1b19 !important;
}

header.header-container h-logo.white,
header.header-container h-svg-icon.white {
  fill: #1c1b19 !important;
}

header.header-container .search-input.white {
  color: #1c1b19 !important;
  border-color: currentColor;
}

header.header-container .search-input.white::placeholder {
  color: #6b655d;
  opacity: 1;
}

header.header-container h-svg-icon.white {
  stroke: #1c1b19 !important;
}

/* The Angular shell pins html/body/.main-wrapper to 100% height. That caps the
   sticky header's containing block at one viewport, so let the shell grow with
   its content instead. */
html,
body,
h-root,
.accessibility-wrapper,
h-shell,
.main-wrapper {
  height: auto !important;
  min-height: 100%;
}

body {
  min-height: 100vh;
}

/* Reliable fixed header (the original shell's flex/height rules defeat
   position: sticky in some browsers). A spacer keeps the layout stable. */
.dsh-header-placeholder {
  display: block;
  height: 0;
}

header.header-container.dsh-fixed {
  position: fixed !important;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: 2000;
}

/* Editorial copy sits on photography; keep it legible across bright frames. */
h-block-media .text .title,
h-block-media .text .description {
  color: #fff !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

/* Local static shopping bag */
.h-cart-layer { position: fixed; inset: 0; z-index: 7000; visibility: hidden; pointer-events: none; }
body.h-cart-open .h-cart-layer { visibility: visible; pointer-events: auto; }
.h-cart-scrim { position: absolute; inset: 0; background: rgba(20,18,16,.32); opacity: 0; transition: opacity .2s ease; }
body.h-cart-open .h-cart-scrim { opacity: 1; }
.h-cart { position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); background: #fcf7f1; color: #1c1b19; display: flex; flex-direction: column; transform: translateX(102%); transition: transform .28s ease; box-shadow: -12px 0 40px rgba(0,0,0,.12); }
body.h-cart-open .h-cart { transform: translateX(0); }
.h-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #e7e0d7; font: 600 11px/1 "Overpass Mono","Courier New",monospace; letter-spacing: .1em; text-transform: uppercase; }
.h-cart-close { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.h-cart-body { flex: 1 1 auto; overflow: auto; padding: 6px 22px; }
.h-cart-empty { padding: 40px 0; color: #6b655d; font-size: 13px; }
.h-cart-item { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid #e7e0d7; }
.h-cart-item img { width: 92px; aspect-ratio: 3/4; object-fit: contain; background: #f1ece4; }
.h-cart-info p { margin: 0 0 6px; font-size: 13px; line-height: 1.4; }
.h-cart-info span { display: block; font-size: 12px; margin-bottom: 10px; }
.h-cart-info button { border: 0; background: transparent; padding: 0; border-bottom: 1px solid currentColor; font: 500 9px/1.4 "Overpass Mono","Courier New",monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.h-cart-foot { padding: 18px 22px 24px; border-top: 1px solid #e7e0d7; background: #fcf7f1; }
.h-cart-total { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; font-size: 13px; }
.h-cart-checkout { width: 100%; border: 1px solid #1c1b19; background: #1c1b19; color: #fff; min-height: 46px; font: 600 11px/1 "Overpass Mono","Courier New",monospace; letter-spacing: .12em; cursor: pointer; }
.h-cart-note { margin: 12px 0 0; color: #6b655d; font-size: 10px; line-height: 1.5; }
.h-cart-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 8000; background: #1c1b19; color: #fff; padding: 12px 18px; font-size: 12px; max-width: calc(100vw - 32px); text-align: center; }
@media (max-width: 767px) { .h-cart-body { padding: 4px 18px; } .h-cart-foot { padding: 16px 18px 24px; } }

/* Static approximation of the Angular PDP gallery. */
.h-cart-layer { overflow: hidden; }
h-product-page-carousel .carousel-container,
h-product-page-carousel .swiper-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
h-product-page-carousel .swiper-container { display: block !important; height: auto !important; }
h-product-page-carousel swiper-slide {
  display: none;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
h-product-page-carousel swiper-slide.is-static-active { display: block !important; }
h-product-page-carousel .asset-wrapper,
h-product-page-carousel .asset-wrapper h-image,
h-product-page-carousel .asset-wrapper img { width: 100% !important; height: 100% !important; }
h-product-page-carousel .asset-wrapper { aspect-ratio: 3 / 4; }
h-product-page-carousel .images-gallery-container { display: none !important; }
@media (min-width: 1024px) {
  h-product-page-carousel .swiper-container { display: flex !important; align-items: stretch; }
  h-product-page-carousel swiper-slide.is-static-active,
  h-product-page-carousel swiper-slide.is-static-next {
    display: block !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 1023px) {
  h-product-page-carousel .carousel-container { height: auto !important; }
  h-product-page-carousel .swiper-container { aspect-ratio: 3 / 4; }
  h-product-page-carousel swiper-slide { height: auto !important; }
}

/* Add-to-cart for the shared product fallback pages */
.stub-add-to-cart { display:inline-flex; align-items:center; justify-content:center; width:100%; margin:0 0 18px; min-height:48px; border:1px solid #1c1b19; background:#1c1b19; color:#fff; font:600 11px/1 "Overpass Mono","Courier New",monospace; letter-spacing:.12em; cursor:pointer; }
.stub-add-to-cart:hover { background:#333; }

/* The SSR snapshot may keep the Angular add-to-cart button in its loading state. */
button.add-to-cart-button[aria-busy="true"] .button-label,
button.add-to-cart-button[aria-busy="true"] .button-icon { opacity: 1 !important; visibility: visible !important; }
button.add-to-cart-button h-loader-spinner { display: none !important; }

/* Mobile PDP sticky CTA must not force a desktop width. */
h-sticky-wrapper-deprecated,
.sticky-wrapper,
.sticky-inner,
.sticky-wrapper-responsive,
.call-to-action-container,
.actions,
.add-to-cart-wrapper,
h-call-to-action-add-to-cart { width: 100% !important; max-width: 100% !important; }
@media (max-width: 767px) {
  h-sticky-wrapper-deprecated,
  .sticky-wrapper,
  .sticky-inner,
  .sticky-wrapper-responsive { position: static !important; }
}

/* Keep horizontal product carousels inside the viewport. */
.keep-exploring,
.keep-exploring-list { max-width: 100% !important; }
.keep-exploring { overflow: hidden; }
.keep-exploring-list { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Long collection names in fallback PDP breadcrumb/back link */
.back { max-width: 62% !important; white-space: normal !important; text-align: right; line-height: 1.35; }

/* ---------------------------------------------------------------- size picker */
.dsh-size-layer{position:fixed;inset:0;z-index:2600;display:flex;align-items:flex-end;justify-content:center}
.dsh-size-scrim{position:absolute;inset:0;background:rgba(20,18,16,.36);opacity:0;transition:opacity .2s}
.dsh-size-layer.is-open .dsh-size-scrim{opacity:1}
.dsh-size-sheet{position:relative;background:#fff;width:100%;max-width:520px;max-height:72vh;overflow:auto;
  transform:translateY(16px);opacity:0;transition:transform .22s ease,opacity .22s ease;padding:0 0 12px}
.dsh-size-layer.is-open .dsh-size-sheet{transform:none;opacity:1}
@media(min-width:1024px){.dsh-size-layer{align-items:center}.dsh-size-sheet{max-height:70vh}}
.dsh-size-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 12px;font-size:15px}
.dsh-size-close{font-size:22px;line-height:1;background:none;border:0;cursor:pointer;padding:0 4px}
.dsh-size-list{display:flex;flex-direction:column}
.dsh-size-option{background:none;border:0;border-top:1px solid #e6ddd3;text-align:left;padding:16px 24px;
  font:inherit;cursor:pointer;letter-spacing:.02em}
.dsh-size-option:hover,.dsh-size-option.is-active{background:#fcf7f1}
.dsh-size-empty{padding:8px 24px 20px;color:#696969}
body.dsh-size-open{overflow:hidden}