/* Shared viewport and interaction fixes. Loaded after legacy component styles.
   This file is independent of the outdated Sass output; keep it after main.css. */
:root { --store-viewport: 100vh; }
@supports (height: 100dvh) { :root { --store-viewport: 100dvh; } }
.hero {
  height: var(--store-viewport);
  min-height: 320px;
  background: #292824;
  margin-top: 0;
  padding-top: 0;
}
.hero .hero-video { height: 100%; }
.hero .hero-content { margin-bottom: max(2rem, env(safe-area-inset-bottom)); }
.hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.1) 35%, rgba(0,0,0,.5)); }
.hero .scroll-text { opacity: 1; font-weight: 400; }
#main-content { scroll-margin-top: 80px; }
#main-content:focus { outline: none; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* A single sizing model for the menu: fixed header/footer, one scrolling body. */
#drawerNav, #drawerNav.active, #drawerNav.mega-active {
  top: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  margin: 0 !important;
  width: min(420px, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  height: calc(var(--store-viewport) - 2rem) !important;
  max-height: calc(var(--store-viewport) - 2rem) !important;
  z-index: 10002 !important;
  transition: transform .25s ease, opacity .25s ease !important;
}
#drawerNav.mega-active { width: min(980px, calc(100vw - 2rem)) !important; }
#drawerNav .drawer-header { padding: 8px 16px !important; min-height: 60px !important; height: auto !important; flex: 0 0 auto !important; }
#drawerNav .drawer-close {
  position: static !important; border: 0; background: transparent; font: inherit;
  min-height: 44px; padding: 8px 12px; color: #111;
}
#drawerNav .drawer-close::before { content: none; }
#drawerNav .drawer-content { height: auto !important; min-height: 0 !important; flex: 1 1 0 !important; }
#drawerNav .menu-items-container { height: 100%; padding: 4px 0 16px; overflow-y: auto; overscroll-behavior: contain; }
#drawerNav .menu-item { width: 100%; border: 0; background: #fff; font: inherit; text-align: left; min-height: 48px; }
#drawerNav .menu-item:hover { background: #f6f6f4; }
#drawerNav .menu-items-container.submenu-active { display: none !important; }
#drawerNav .submenu { position: absolute !important; inset: 0 !important; height: 100% !important; width: 100% !important; max-height: 100% !important; }
#drawerNav .submenu:not(.active) { display: none !important; }
#drawerNav .submenu.active { display: flex !important; }
#drawerNav .submenu-content {
  display: flex !important; flex-direction: row !important; align-items: stretch !important;
  height: 100% !important; max-height: 100% !important; min-height: 0 !important;
  overflow: auto !important; overscroll-behavior: contain; padding: 0 !important; margin: 0 !important;
}
#drawerNav .submenu-text { flex: 0 0 38% !important; width: 38% !important; height: auto !important; max-height: none !important; min-width: 0 !important; overflow: visible !important; padding: 0 0 24px !important; }
#drawerNav .submenu-gallery { flex: 1 1 62% !important; width: 62% !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; min-width: 0 !important; }
#drawerNav .submenu-back-button { position: sticky !important; top: 0; width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid #eee; background: white; color: #333; font: inherit; text-align: left; padding: 16px 20px !important; }
#drawerNav .submenu-item { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; min-height: 40px; padding: 10px 20px !important; }
#drawerNav .gallery-grid { height: auto !important; min-height: 0 !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; padding: 16px !important; }
#drawerNav .gallery-item { min-width: 0 !important; min-height: 140px !important; aspect-ratio: 3/4; }
#drawerNav .drawer-footer { flex: 0 0 auto; position: static !important; padding-bottom: env(safe-area-inset-bottom); }
#drawerNav .footer-tab { min-height: 44px; font-family: inherit; white-space: normal; }
#drawerNav .footer-tab:focus-visible { outline: 2px solid #111; outline-offset: -3px; }
body.drawer-open .navbar { z-index: 10000 !important; }
.luxury-modal { height: var(--store-viewport) !important; }
.luxury-modal .modal-container { padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
#searchModal .modal-close, #bagModal .modal-close, #userModal .modal-close, #wishlistModal .modal-close { width: 44px !important; height: 44px !important; }
#userModal .user-container { overflow-y: auto !important; overscroll-behavior: contain; }
#bagModal .bag-summary { flex-shrink: 0; }
@media (max-width: 767px) {
  .navbar .nav-icon-btn { min-width: 36px; min-height: 44px; }
  .navbar .nav-left, .navbar .nav-icons { gap: 0 !important; padding: 0; }
  /* Centre the wordmark on the viewport, independently of the unequal icon groups. */
  .navbar { display: flex; padding-inline: 8px !important; }
  .navbar .logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .navbar .logo a { padding: 6px 0; }
  .navbar .logo img { width: clamp(112px, 34vw, 144px) !important; height: auto !important; }
  #drawerNav, #drawerNav.active, #drawerNav.mega-active {
    top: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important;
    height: var(--store-viewport) !important; max-height: var(--store-viewport) !important; border-radius: 0 !important;
  }
  #drawerNav .submenu-content { flex-direction: column !important; }
  #drawerNav .submenu-text, #drawerNav .submenu-gallery { flex: 0 0 auto !important; width: 100% !important; }
  #drawerNav .submenu-text { padding-bottom: 16px !important; }
  #drawerNav .gallery-item { min-height: 0 !important; }
  #searchModal input, #userModal input, .auth-container input, .checkout-container input { font-size: 16px; }
}
@media (max-height: 450px) {
  .hero .hero-content { margin-bottom: 1rem; }
  .hero .hero-subheading { margin-bottom: .5rem; }
  .hero .hero-description { margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.filter-modal { max-height: var(--store-viewport); }
.filter-modal .filter-content { max-height: calc(var(--store-viewport) - 2rem); }
.filter-bar button { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.sort-menu .sort-option { width: 100%; text-align: left; }
.filter-option:focus-visible { outline: 2px solid #111; outline-offset: -2px; }
.catalog-status { grid-column: 1/-1; padding: 2rem; text-align: center; font-size: .875rem; }
#productCount { white-space: normal; }

/* Restrained tablet scale, with the same viewport-centred alignment. */
@media (min-width: 768px) and (max-width: 1366px) {
  .navbar .logo img { width: clamp(210px, 26vw, 240px) !important; height: auto !important; }
}
@media (max-width: 359px) {
  .navbar .nav-icon-btn { min-width: 32px; }
  .navbar .logo img { width: min(120px, calc(100vw - 216px)) !important; }
}

/* Reserve the fixed header once; the hero keeps its intentional overlay. */
body.nav-solid > #main-content { padding-top: 60px; }
#main-content > .product-page, #main-content > .product-view-page { padding-top: 0; }
#drawerNav .gallery-grid { grid-template-rows: none !important; grid-auto-rows: max-content !important; max-height: none !important; overflow: visible !important; align-content: start; }
#drawerNav .gallery-item { height: auto !important; min-height: 0 !important; aspect-ratio: 3 / 4 !important; align-self: start; }
a.search-result-item { color: inherit; text-decoration: none; }
button.suggestion-tag { font-family: inherit; color: inherit; }

[hidden]:not([hidden="until-found"]) { display: none !important; }

#filterIndicator:not(.active) { display: none !important; }

/* The House submenu follows its editorial chapters on every storefront page. */
#drawerNav #dome-del-loto-submenu .submenu-divider { height: 1px !important; min-height: 1px !important; margin: 18px 24px !important; width: calc(100% - 48px); background: #deddd8 !important; }
#drawerNav #dome-del-loto-submenu .submenu-section-label { font-size: 10px !important; font-weight: 400 !important; letter-spacing: .12em; color: #666; }
#drawerNav #dome-del-loto-submenu .gallery-item { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#drawerNav #dome-del-loto-submenu .gallery-item:hover { transform: none; }
#drawerNav #dome-del-loto-submenu .gallery-item>a { display: block; height: 100%; }
#drawerNav #dome-del-loto-submenu .gallery-item img { height: calc(100% - 42px); object-position: center 35%; }
#drawerNav #dome-del-loto-submenu .gallery-overlay { top: auto !important; bottom: 0; left: 0 !important; transform: none !important; width: 100%; height: 42px; padding: 12px 3px !important; border-radius: 0 !important; color: #171717; background: #fff; font-size: 10px !important; font-weight: 400 !important; letter-spacing: .035em !important; }