/* DUVA final polish pass — 2026-08-14
   Loaded last so it safely normalizes legacy duplicate rules without rewriting the main stylesheet. */

:root {
  --duva-header-h: 82px;
  --duva-drawer-w: 620px;
}

html, body { overflow-x: clip; }

/* ---------- ONE CONSISTENT STOREFRONT HEADER ---------- */
header.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 120000 !important;
  display: grid !important;
  grid-template-columns: 48px 148px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  height: var(--duva-header-h) !important;
  min-height: var(--duva-header-h) !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: #0a0a0a !important;
  border-bottom: 1px solid #e4e4e1 !important;
  box-shadow: none !important;
}

header.site-header .desktop-nav { display: none !important; }

header.site-header .menu-button {
  grid-column: 1 !important;
  justify-self: start !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 9px !important;
  color: #111 !important;
}

header.site-header .duva-wordmark,
header.site-header .logo.duva-wordmark,
header.site-header .duva-v38-brand {
  grid-column: 2 !important;
  position: static !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 138px !important;
  max-width: 138px !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  text-decoration: none !important;
}

header.site-header .header-wordmark-image {
  display: block !important;
  width: 138px !important;
  max-width: 138px !important;
  height: auto !important;
  max-height: 38px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

header.site-header .header-actions,
header.site-header .about-header-actions,
header.site-header .product-header-actions,
header.site-header .duva-v38-actions {
  grid-column: 3 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

header.site-header .header-search,
header.site-header .product-header-search,
header.site-header .duva-v38-search {
  position: relative !important;
  display: flex !important;
  flex: 1 1 520px !important;
  align-items: center !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 720px !important;
  height: 50px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 6px 0 17px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: #fff !important;
  border: 1px solid #cfcfcb !important;
  border-radius: 999px !important;
  transform: none !important;
}

header.site-header .header-search input,
header.site-header .product-header-search input,
body.about-inner-page #siteHeader .header-search input {
  position: static !important;
  order: 1 !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #111 !important;
  font: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

header.site-header .header-search input::placeholder,
header.site-header .product-header-search input::placeholder { color: #777 !important; opacity: 1 !important; }

header.site-header .header-search .icon-button,
header.site-header .product-header-search .icon-button,
body.about-inner-page #siteHeader .header-search .icon-button {
  position: static !important;
  order: 2 !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 8px !important;
  transform: none !important;
}

header.site-header .header-search-results,
header.site-header .product-header-search-results,
body.about-inner-page #siteHeader .header-search-results {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: min(520px, 70vh) !important;
  overflow-y: auto !important;
  z-index: 120100 !important;
  background: #fff !important;
  border: 1px solid #dededb !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.10) !important;
}

header.site-header .account-header-link,
header.site-header #favoritesButton,
header.site-header #cartButton,
header.site-header .product-favorites-link,
header.site-header .product-cart-link,
header.site-header > .header-actions > a.icon-button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 9px !important;
  color: #111 !important;
  background: transparent !important;
}

header.site-header .ui-svg { width: 25px !important; height: 25px !important; stroke-width: 1.7 !important; }

/* ---------- SIDE MENU ---------- */
.mobile-menu,
.product-mobile-menu,
.duva-shell-menu {
  width: min(520px, 88vw) !important;
  max-width: 100vw !important;
  padding: 86px 34px 36px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  background: #fff !important;
}
.mobile-menu > a,
.product-mobile-menu > a,
.duva-shell-menu > a {
  font-size: clamp(30px, 4.3vw, 52px) !important;
  line-height: 1.05 !important;
  padding: 24px 0 !important;
}

/* ---------- CART + FAVORITES DRAWERS ---------- */
.drawer,
.duva-shell-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: min(var(--duva-drawer-w), calc(100vw - 18px)) !important;
  max-width: calc(100vw - 18px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: -18px 0 46px rgba(0,0,0,.13) !important;
  will-change: transform !important;
}

.drawer.open,
.duva-shell-drawer.open { transform: translate3d(0,0,0) !important; }
.drawer.open.drawer-minimized,
.duva-shell-drawer.open.drawer-minimized {
  transform: translate3d(0, calc(100dvh - 92px), 0) !important;
  box-shadow: 0 -10px 34px rgba(0,0,0,.12) !important;
}
.drawer.drawer-dragging,
.duva-shell-drawer.drawer-dragging { transition: none !important; }

.drawer-drag-handle {
  position: absolute !important;
  z-index: 20 !important;
  top: 10px !important;
  left: 50% !important;
  width: 48px !important;
  height: 5px !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #b7b7b2 !important;
  cursor: ns-resize !important;
  touch-action: none !important;
}
.drawer-drag-handle::after {
  content: "DRAG DOWN TO MINIMIZE";
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #999;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}

#cartDrawer .drawer-header,
#favoritesDrawer .drawer-header,
.duva-shell-drawer__header {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 132px !important;
  padding: 40px 36px 24px !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #dededb !important;
  background: #fff !important;
}

#cartDrawer .drawer-header h2,
#favoritesDrawer .drawer-header h2,
.duva-shell-drawer__header h2 {
  margin: 8px 0 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  font-size: clamp(38px, 5vw, 58px) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  white-space: normal !important;
}

.drawer .drawer-close,
.duva-shell-drawer .duva-shell-close {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 36px !important;
  line-height: 1 !important;
}

.drawer-content,
.duva-shell-drawer__body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fff !important;
}

#cartDrawer .drawer-content { max-height: 32dvh !important; }
#favoritesDrawer .drawer-content { max-height: calc(100dvh - 225px) !important; }
.duva-shell-drawer__body { height: calc(100dvh - 250px) !important; }

#cartDrawer .mini-item,
#favoritesDrawer .mini-item,
.duva-shell-item {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) 34px !important;
  gap: 18px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 22px 30px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border-bottom: 1px solid #e2e2df !important;
  background: #fff !important;
}

#favoritesDrawer .mini-item,
.duva-shell-drawer#duvaShellFavorites .duva-shell-item {
  grid-template-columns: 150px minmax(0, 1fr) 34px !important;
}

.mini-item-image,
.duva-shell-item > a:first-child { min-width: 0 !important; width: 100% !important; }
.mini-item-image img,
.duva-shell-item > a:first-child img {
  display: block !important;
  width: 100% !important;
  height: 166px !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: #f5f5f3 !important;
}
#favoritesDrawer .mini-item-image img,
.duva-shell-drawer#duvaShellFavorites .duva-shell-item > a:first-child img { height: 190px !important; }

.mini-item-details,
.duva-shell-item > div { min-width: 0 !important; width: 100% !important; }
.mini-item-details h3,
.duva-shell-item h3 {
  max-width: 100% !important;
  margin: 0 0 9px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 20px !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}
.mini-item-option,
.duva-shell-item p { margin: 4px 0 !important; font-size: 12px !important; line-height: 1.35 !important; color: #6e6e69 !important; }
.mini-item-price,
.duva-shell-item strong { display: block !important; margin: 11px 0 !important; font-size: 18px !important; color: #111 !important; }

.favorite-colors { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; max-width: 100% !important; }
.favorite-colors .color-swatch { width: 23px !important; height: 23px !important; flex: 0 0 23px !important; }
.favorite-colors .color-count { flex: 1 0 100% !important; margin-top: 3px !important; font-size: 11px !important; white-space: normal !important; }
.favorite-add-button,
.duva-shell-add {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 158px !important;
  max-width: 100% !important;
  min-height: 45px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  font-size: 10px !important;
}

.duva-shell-selects { display: grid !important; grid-template-columns: 1fr 82px !important; gap: 8px !important; margin: 12px 0 !important; }
.duva-shell-selects select { min-width: 0 !important; width: 100% !important; }

#cartDrawer .drawer-footer,
.duva-shell-drawer__footer {
  width: 100% !important;
  min-width: 0 !important;
  padding: 24px 30px 28px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  background: #fff !important;
  border-top: 1px solid #dededb !important;
}
#cartDrawer .drawer-footer { max-height: 55dvh !important; overflow-y: auto !important; }
#cartDrawer .subtotal,
.duva-shell-drawer__footer .subtotal {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 0 18px !important;
}
#cartDrawer .subtotal strong,
.duva-shell-drawer__footer .subtotal strong { margin-left: auto !important; white-space: nowrap !important; }

.shipping-progress { width: 100% !important; margin: 0 0 22px !important; }
.shipping-progress p { margin: 0 0 12px !important; font-size: 12px !important; line-height: 1.35 !important; letter-spacing: .11em !important; white-space: normal !important; }
.shipping-progress-track { width: 100% !important; }

.payment-options { width: 100% !important; margin: 0 0 20px !important; }
.payment-option-list { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; }
.payment-pill { flex: 0 1 auto !important; min-width: 0 !important; padding: 11px 14px !important; }
.payment-note { display: block !important; width: 100% !important; margin-top: 12px !important; white-space: normal !important; font-size: 11px !important; line-height: 1.45 !important; }
#cartDrawer .button-full,
#cartDrawer .view-full-bag-button,
.duva-shell-drawer__footer .button-full { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
#cartDrawer .track-order-link { display: block !important; text-align: center !important; margin: 18px 0 0 !important; }

/* ---------- ABOUT: IMAGE UP TOP + SAME HEADER ---------- */
body.about-inner-page .about-main { padding-top: 0 !important; }
body.about-inner-page .about-intro { padding: 28px 0 58px !important; }
body.about-inner-page .about-intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px) !important;
  gap: clamp(48px, 7vw, 94px) !important;
  align-items: start !important;
}
body.about-inner-page .about-intro-copy { padding-top: 24px !important; }
body.about-inner-page .about-intro-photo {
  width: 100% !important;
  max-width: 390px !important;
  aspect-ratio: 4 / 5 !important;
  margin: 0 !important;
  justify-self: end !important;
  align-self: start !important;
  overflow: hidden !important;
  background: #f1f1ef !important;
}
body.about-inner-page .about-intro-photo img { object-position: center 24% !important; }
body.about-inner-page .about-intro h1 { font-size: clamp(48px, 5.4vw, 78px) !important; }
body.about-inner-page .quote-break { margin-top: 0 !important; }

/* ---------- OPENING D -> DUVA ANIMATION ---------- */
.duva-intro-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  opacity: 1;
  pointer-events: all;
  transition: opacity .32s cubic-bezier(.4,0,.2,1);
}
.duva-intro-screen.is-leaving { opacity: 0; pointer-events: none; }
.duva-intro-stage {
  position: relative;
  width: min(58vw, 330px);
  aspect-ratio: 254 / 92;
  overflow: hidden;
}
.duva-intro-logo {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  clip-path: inset(0 72% 0 0);
  transform: translate3d(0,0,0) scale(1.08);
  transform-origin: left center;
  will-change: clip-path, transform, opacity;
}
.duva-intro-screen.is-running .duva-intro-logo {
  animation: duvaLogoUnfold 1.02s cubic-bezier(.2,.82,.2,1) forwards;
}
@keyframes duvaLogoUnfold {
  0% { opacity: 0; clip-path: inset(0 72% 0 0); transform: scale(1.08); }
  14% { opacity: 1; clip-path: inset(0 72% 0 0); transform: scale(1.08); }
  52% { opacity: 1; clip-path: inset(0 72% 0 0); transform: scale(1); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}

@media (max-width: 900px) {
  header.site-header {
    grid-template-columns: 46px 124px minmax(0,1fr) !important;
    gap: 12px !important;
    padding: 0 18px !important;
  }
  header.site-header .duva-wordmark,
  header.site-header .logo.duva-wordmark,
  header.site-header .duva-v38-brand,
  header.site-header .header-wordmark-image { width: 122px !important; max-width: 122px !important; }
  header.site-header .header-search,
  header.site-header .product-header-search { min-width: 180px !important; margin-right: 2px !important; }
  body.about-inner-page .about-intro-grid { grid-template-columns: minmax(0,1fr) 330px !important; gap: 44px !important; }
}

@media (max-width: 600px) {
  :root { --duva-header-h: 72px; }
  header.site-header {
    grid-template-columns: 44px 112px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 0 10px !important;
  }
  header.site-header .duva-wordmark,
  header.site-header .logo.duva-wordmark,
  header.site-header .duva-v38-brand,
  header.site-header .header-wordmark-image { width: 108px !important; max-width: 108px !important; }
  header.site-header .header-actions,
  header.site-header .about-header-actions,
  header.site-header .product-header-actions { gap: 0 !important; }
  header.site-header .header-search,
  header.site-header .product-header-search,
  body.about-inner-page #siteHeader .header-search {
    flex: 0 0 40px !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  header.site-header .header-search input,
  header.site-header .product-header-search input,
  body.about-inner-page #siteHeader .header-search input {
    position: fixed !important;
    top: 82px !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100vw - 24px) !important;
    height: 48px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-5px) !important;
    border: 1px solid #cececa !important;
    border-radius: 999px !important;
    background: #fff !important;
    z-index: 120200 !important;
  }
  header.site-header .header-search:focus-within input,
  header.site-header .product-header-search:focus-within input { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
  header.site-header .header-search-results,
  header.site-header .product-header-search-results,
  body.about-inner-page #siteHeader .header-search-results {
    position: fixed !important;
    top: 138px !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100vw - 24px) !important;
  }
  header.site-header .account-header-link,
  header.site-header #favoritesButton,
  header.site-header #cartButton,
  header.site-header .product-favorites-link,
  header.site-header .product-cart-link,
  header.site-header > .header-actions > a.icon-button {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 8px !important;
  }

  .drawer,
  .duva-shell-drawer { width: 100vw !important; max-width: 100vw !important; }
  #cartDrawer .drawer-header,
  #favoritesDrawer .drawer-header,
  .duva-shell-drawer__header { min-height: 116px !important; padding: 37px 20px 20px !important; }
  #cartDrawer .drawer-header h2,
  #favoritesDrawer .drawer-header h2,
  .duva-shell-drawer__header h2 { font-size: clamp(34px, 10vw, 48px) !important; }
  #cartDrawer .mini-item,
  #favoritesDrawer .mini-item,
  .duva-shell-item,
  #favoritesDrawer .mini-item,
  .duva-shell-drawer#duvaShellFavorites .duva-shell-item {
    grid-template-columns: 104px minmax(0, 1fr) 28px !important;
    gap: 12px !important;
    padding: 17px 16px !important;
  }
  .mini-item-image img,
  .duva-shell-item > a:first-child img,
  #favoritesDrawer .mini-item-image img,
  .duva-shell-drawer#duvaShellFavorites .duva-shell-item > a:first-child img { height: 136px !important; }
  #cartDrawer .drawer-footer,
  .duva-shell-drawer__footer { padding: 20px 18px 24px !important; }
  .payment-pill { padding: 10px 11px !important; font-size: 10px !important; }

  body.about-inner-page .about-intro { padding: 18px 0 46px !important; }
  body.about-inner-page .about-intro-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  body.about-inner-page .about-intro-photo {
    order: -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16 / 11 !important;
  }
  body.about-inner-page .about-intro-photo img {
    object-position: center 8% !important;
  }
  body.about-inner-page .about-intro-copy { padding-top: 0 !important; }
  body.about-inner-page .about-intro h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .duva-intro-screen { display: none !important; }
  .drawer, .duva-shell-drawer { transition: none !important; }
}

/* =========================================================
   ACCOUNT V2 — focused storefront account experience
   ========================================================= */
body.account-page-v2 { background:#f4f4f1 !important; }
.account-main-v2 { width:min(1240px, calc(100% - 56px)); margin:0 auto; padding:52px 0 92px; }
.account-auth-shell { display:grid; grid-template-columns:minmax(0,.92fr) minmax(420px,.78fr); min-height:650px; background:#fff; border:1px solid #d9d9d5; }
.account-brand-panel { display:flex; flex-direction:column; justify-content:space-between; min-width:0; padding:56px; background:#0a0a0a; color:#fff; }
.account-brand-panel .eyebrow { color:#aaa !important; }
.account-brand-panel h1 { max-width:650px; margin:12px 0 0; font-size:clamp(54px,6.2vw,90px); line-height:.88; letter-spacing:-.07em; font-weight:600; }
.account-brand-copy { max-width:500px; margin:54px 0 24px; color:#c8c8c3; font-size:16px; line-height:1.55; }
.account-back-link { width:max-content; padding-bottom:5px; border-bottom:1px solid #888; color:#fff; font-size:11px; font-weight:700; letter-spacing:.12em; }
.account-auth-card { align-self:center; width:min(100% - 72px, 500px); margin:48px auto; padding:0; }
.account-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:40px; border-bottom:1px solid #d9d9d5; }
.account-tab { position:relative; min-height:48px; padding:0 4px; border:0; background:transparent; color:#777; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.11em; }
.account-tab::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:#0a0a0a; transform:scaleX(0); transition:transform .2s ease; }
.account-tab.is-active { color:#0a0a0a; }
.account-tab.is-active::after { transform:scaleX(1); }
.account-pane .eyebrow { margin:0 0 10px; color:#777 !important; }
.account-pane h2 { margin:0 0 12px; font-size:clamp(38px,4vw,54px); line-height:.92; letter-spacing:-.055em; }
.account-pane-copy { max-width:390px; margin:0 0 28px; color:#666; font-size:14px; line-height:1.5; }
.account-form-v2 { gap:17px; }
.account-form-v2 label { gap:8px; }
.account-form-v2 input { height:56px; border-color:#c9c9c4; background:#fff; }
.account-form-v2 button[type="submit"] { min-height:56px; margin-top:4px; }
.account-switch-copy { margin:19px 0 0; color:#777; font-size:12px; }
.account-switch-copy button { padding:0; border:0; border-bottom:1px solid #111; background:transparent; color:#111; cursor:pointer; font:inherit; font-weight:700; }
.account-forgot-row { display:flex; justify-content:flex-end; margin-top:-8px; }
.account-forgot-row button { padding:0 0 3px; border:0; border-bottom:1px solid #777; background:transparent; color:#555; cursor:pointer; font-size:10px; font-weight:700; letter-spacing:.08em; }
.account-forgot-row button:hover, .account-forgot-row button:focus-visible { color:#111; border-color:#111; }
.account-trust-row { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:34px; padding-top:20px; border-top:1px solid #e2e2de; color:#777; font-size:9px; font-weight:700; letter-spacing:.11em; }
.account-dashboard-v2 { margin-bottom:18px; padding:34px; border:1px solid #d9d9d5; background:#fff; }
.account-dashboard-head { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; }
.account-dashboard-head h1 { margin:6px 0 5px; font-size:clamp(40px,5vw,64px); line-height:.9; letter-spacing:-.055em; }
.account-dashboard-head p:last-child { margin:0; color:#666; }
.account-dashboard-actions { display:flex; gap:10px; }
.account-dashboard-v2 h2 { margin:5px 0 0; font-size:clamp(30px,4vw,46px); line-height:.95; letter-spacing:-.045em; }

@media (max-width: 900px) {
  .account-main-v2 { width:min(100% - 32px, 760px); padding:30px 0 70px; }
  .account-auth-shell { grid-template-columns:1fr; }
  .account-brand-panel { min-height:330px; padding:36px; }
  .account-brand-panel h1 { font-size:clamp(48px,10vw,74px); }
  .account-brand-copy { margin-top:40px; }
  .account-auth-card { width:calc(100% - 64px); margin:42px auto 50px; }
}
@media (max-width: 560px) {
  .account-main-v2 { width:100%; padding:0 0 56px; }
  .account-auth-shell { border-width:0 0 1px; }
  .account-brand-panel { min-height:260px; padding:30px 22px; }
  .account-brand-panel h1 { font-size:46px; }
  .account-brand-copy { display:none; }
  .account-auth-card { width:calc(100% - 40px); margin:34px auto 42px; }
  .account-tabs { margin-bottom:30px; }
  .account-dashboard-v2 { margin:16px 16px 0; padding:24px 20px; }
  .account-dashboard-head,.account-dashboard-actions { flex-direction:column; }
  .account-dashboard-actions { width:100%; }
  .account-dashboard-actions .secondary-action { width:100%; }
}

/* ============================================================
   FINAL EXPLORE DRAWER — compact, high-contrast, easy to scan.
   This block intentionally comes last so older menu rules cannot
   enlarge or wash out the drawer again.
   ============================================================ */
.mobile-menu,
.product-mobile-menu,
.duva-shell-menu {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: min(420px, 92vw) !important;
  max-width: 420px !important;
  height: 100dvh !important;
  padding: 30px 32px 36px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  background: #fff !important;
  color: #0a0a0a !important;
  box-shadow: 18px 0 55px rgba(0,0,0,.16) !important;
  transform: translate3d(-105%,0,0) !important;
  transition: transform .28s cubic-bezier(.2,.7,.2,1) !important;
  z-index: 2147483646 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.mobile-menu.open,
.product-mobile-menu.open,
.duva-shell-menu.open { transform: translate3d(0,0,0) !important; }

.mobile-menu .drawer-close,
.product-mobile-menu .drawer-close,
.duva-shell-menu .duva-shell-close {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #0a0a0a !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.mobile-menu .eyebrow,
.product-mobile-menu .eyebrow,
.duva-shell-menu .eyebrow {
  margin: 8px 64px 34px 0 !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.mobile-menu > a,
.product-mobile-menu > a,
.duva-shell-menu > a {
  display: flex !important;
  align-items: center !important;
  min-height: 70px !important;
  padding: 18px 2px !important;
  border-top: 1px solid #dedede !important;
  color: #0a0a0a !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: clamp(24px, 3vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  opacity: 1 !important;
}
.mobile-menu > a:last-child,
.product-mobile-menu > a:last-child,
.duva-shell-menu > a:last-child { border-bottom: 1px solid #dedede !important; }
.mobile-menu > a:hover,
.product-mobile-menu > a:hover,
.duva-shell-menu > a:hover,
.mobile-menu > a:focus-visible,
.product-mobile-menu > a:focus-visible,
.duva-shell-menu > a:focus-visible {
  padding-left: 10px !important;
  background: #f7f7f5 !important;
  outline: none !important;
}

.page-overlay.open,
.page-overlay.active,
.duva-shell-overlay.open {
  background: rgba(0,0,0,.55) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The old intro is disabled at both JS and CSS levels. */
.duva-intro-screen { display: none !important; }

@media (max-width: 520px) {
  .mobile-menu,
  .product-mobile-menu,
  .duva-shell-menu {
    width: min(360px, 94vw) !important;
    padding: 24px 24px 30px !important;
  }
  .mobile-menu .drawer-close,
  .product-mobile-menu .drawer-close,
  .duva-shell-menu .duva-shell-close { top: 18px !important; right: 18px !important; }
  .mobile-menu .eyebrow,
  .product-mobile-menu .eyebrow,
  .duva-shell-menu .eyebrow { margin-top: 3px !important; margin-bottom: 28px !important; }
  .mobile-menu > a,
  .product-mobile-menu > a,
  .duva-shell-menu > a {
    min-height: 62px !important;
    padding: 15px 2px !important;
    font-size: 24px !important;
  }
}

/* Favorites drawer: match the Shopping Cart drawer exactly. */
#favoritesDrawer .mini-item,
.duva-shell-drawer#duvaShellFavorites .duva-shell-item {
  grid-template-columns: 132px minmax(0, 1fr) 34px !important;
  gap: 18px !important;
}

#favoritesDrawer .mini-item-image,
.duva-shell-drawer#duvaShellFavorites .duva-shell-item > a:first-child {
  width: 132px !important;
  height: 166px !important;
  overflow: hidden !important;
  background: #f4f4f4 !important;
}

#favoritesDrawer .mini-item-image img,
.duva-shell-drawer#duvaShellFavorites .duva-shell-item > a:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

@media (max-width: 760px) {
  #favoritesDrawer .mini-item,
  .duva-shell-drawer#duvaShellFavorites .duva-shell-item {
    grid-template-columns: 104px minmax(0, 1fr) 28px !important;
    gap: 12px !important;
  }
  #favoritesDrawer .mini-item-image,
  .duva-shell-drawer#duvaShellFavorites .duva-shell-item > a:first-child {
    width: 104px !important;
    height: 136px !important;
  }
}

/* ============================================================
   HEADER RESPONSIVE SAFETY FIX — 2026-08-14
   Keeps the full desktop header intact on small laptop / narrow
   browser windows. The compact search treatment starts only at
   true phone widths, preventing the search icon and account/cart
   controls from being pushed out of the header.
   ============================================================ */
@media (min-width: 601px) and (max-width: 900px) {
  header.site-header {
    grid-template-columns: 42px 116px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding-inline: 16px !important;
  }

  header.site-header .menu-button {
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
  }

  header.site-header .duva-wordmark,
  header.site-header .logo.duva-wordmark,
  header.site-header .duva-v38-brand,
  header.site-header .header-wordmark-image {
    width: 112px !important;
    max-width: 112px !important;
  }

  header.site-header .header-actions,
  header.site-header .about-header-actions,
  header.site-header .product-header-actions,
  header.site-header .duva-v38-actions {
    gap: 4px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  header.site-header .header-search,
  header.site-header .product-header-search,
  header.site-header .duva-v38-search,
  body.about-inner-page #siteHeader .header-search {
    flex: 1 1 220px !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: 560px !important;
    height: 44px !important;
    margin-right: 4px !important;
    padding: 0 5px 0 14px !important;
    overflow: visible !important;
  }

  header.site-header .header-search input,
  header.site-header .product-header-search input,
  body.about-inner-page #siteHeader .header-search input {
    position: static !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 15px !important;
  }

  header.site-header .header-search .icon-button,
  header.site-header .product-header-search .icon-button,
  body.about-inner-page #siteHeader .header-search .icon-button,
  header.site-header #searchButton {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 7px !important;
    inset: auto !important;
    transform: none !important;
  }

  header.site-header .account-header-link,
  header.site-header #favoritesButton,
  header.site-header #cartButton,
  header.site-header .product-favorites-link,
  header.site-header .product-cart-link,
  header.site-header > .header-actions > a.icon-button {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 7px !important;
  }
}


/* ============================================================
   REQUESTED SINGLE CHANGE — 2026-08-15
   Homepage hero/header state: keep the header controls WHITE.
   No layout, spacing, sizing, positioning, animation or JS changes.

   Scoped to desktop only (2026-08-18 fix): on mobile the header
   always has a solid white background (see the max-width:720px
   rules above), so forcing white icons/text there made them
   invisible — this is what looked like "the header disappearing"
   whenever the page scrolled back near the top.
   ============================================================ */
@media (min-width: 721px) {
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .menu-button,
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .header-search,
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .header-search input,
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .header-search input::placeholder,
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .header-search .icon-button,
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) #searchButton,
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .account-header-link,
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) #favoritesButton,
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) #cartButton {
    color: #fff !important;
  }
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .header-search {
    border-color: rgba(255,255,255,.72) !important;
  }
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .ui-svg,
  body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .menu-button svg {
    color: #fff !important;
    stroke: #fff !important;
  }
}

/* ============================================================
   CHECKOUT / PRODUCT MODAL INTERACTION FIX — 2026-08-17
   duva-clean.css intentionally raises #pageOverlay for navigation,
   but that also placed the shared overlay above every .modal and
   intercepted all pointer input. Keep actual modals above it.
   ============================================================ */
.modal.open {
  z-index: 2147483646 !important;
  pointer-events: auto !important;
}

.modal.open .modal-card {
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
}

/* PRODUCT COLOUR IMAGE SWITCHING — 2026-08-17
   Only makes the existing catalogue swatches act like buttons. */
.product-colors button.color-swatch {
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Interaction stability: prevent the page width from jumping when drawers/modals lock scroll. */
html { scrollbar-gutter: stable; }

/* Keep product imagery visually stable while a newly selected image decodes. */
.product-primary-image,
.quick-view-main-image img,
.quick-view-thumb img {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Selection clicks should never trigger browser tap highlight flashes. */
.color-swatch,
.quick-color,
.quick-size,
.product-dot,
.carousel-arrow,
.quick-view-thumb,
.quick-view-button {
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   QUICK VIEW — FULL SCROLL + CLEAN IMAGE PRESENTATION
   Applied globally to every Quick View instance.
   Keeps the modal fully scrollable so ADD TO BAG can always be
   reached, and removes the grey frame around product imagery.
   ============================================================ */
.quick-view-modal.open {
  align-items: start !important;
  justify-items: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}

.quick-view-card {
  width: min(940px, calc(100vw - 36px)) !important;
  max-width: 940px !important;
  max-height: none !important;
  height: auto !important;
  margin: auto !important;
  overflow: visible !important;
  background: #fff !important;
}

.quick-view-layout {
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-items: start !important;
  background: #fff !important;
}

.quick-view-gallery {
  max-height: none !important;
  overflow: visible !important;
  padding: 18px !important;
  background: #fff !important;
}

.quick-view-main-image,
.quick-view-main {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.quick-view-main-image img,
.quick-view-main img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
}

.quick-view-details {
  max-height: none !important;
  overflow: visible !important;
  align-self: start !important;
  padding: 34px 34px 46px !important;
}

.quick-view-add {
  scroll-margin-bottom: 34px !important;
}

@media (min-width: 721px) {
  .quick-view-layout {
    grid-template-columns: minmax(360px, .95fr) minmax(340px, 1fr) !important;
  }

  .quick-view-main-image,
  .quick-view-main {
    min-height: 520px !important;
  }
}

@media (max-width: 720px) {
  .quick-view-modal.open {
    padding: 0 !important;
  }

  .quick-view-card {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }

  .quick-view-layout {
    grid-template-columns: 1fr !important;
  }

  .quick-view-gallery {
    padding: 12px !important;
  }

  .quick-view-main-image,
  .quick-view-main {
    min-height: 0 !important;
  }

  .quick-view-details {
    padding: 28px 20px 46px !important;
  }
}

/* ============================================================
   PRODUCT / GLOBAL MENU STABILITY FIX — 2026-08-17
   Keep the hamburger drawer on its own compositor layer and stop
   opening/closing it from resizing or shifting the page behind it.
   Visual-only: no navigation links or click behavior changed.
   ============================================================ */
.mobile-menu,
.product-mobile-menu,
.duva-shell-menu {
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: min(420px, 92vw) !important;
  max-width: 420px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  transform: translate3d(-102%, 0, 0) !important;
  transition: transform .26s cubic-bezier(.22,.7,.2,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  contain: layout paint !important;
}

.mobile-menu.open,
.product-mobile-menu.open,
.duva-shell-menu.open {
  transform: translate3d(0, 0, 0) !important;
}

.mobile-menu .drawer-close,
.product-mobile-menu .drawer-close,
.duva-shell-menu .duva-shell-close {
  top: 22px !important;
  right: 22px !important;
  left: auto !important;
  transform: none !important;
}

/* The dark backdrop fades independently instead of affecting page layout. */
#pageOverlay.page-overlay,
.page-overlay,
.duva-shell-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  transition: opacity .22s ease, visibility .22s ease !important;
  will-change: opacity !important;
}

/* Locking the page must not create a horizontal jump. */
html { scrollbar-gutter: stable !important; }
body.drawer-open {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 520px) {
  .mobile-menu,
  .product-mobile-menu,
  .duva-shell-menu {
    width: min(360px, 94vw) !important;
    max-width: 94vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .product-mobile-menu,
  .duva-shell-menu,
  #pageOverlay.page-overlay,
  .page-overlay,
  .duva-shell-overlay {
    transition: none !important;
  }
}


/* ============================================================
   FINAL MENU CLICKABILITY FIX — 2026-08-17
   Keep the backdrop behind every menu so links remain clickable.
   Also prevent the menu itself from being visually dimmed.
   ============================================================ */
.mobile-menu,
.product-mobile-menu,
.duva-shell-menu {
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

#pageOverlay.page-overlay,
.page-overlay,
.duva-shell-overlay {
  z-index: 2147483600 !important;
}

.mobile-menu.open,
.product-mobile-menu.open,
.duva-shell-menu.open,
.mobile-menu.open *,
.product-mobile-menu.open *,
.duva-shell-menu.open * {
  pointer-events: auto !important;
}


/* ============================================================
   PRODUCT EXPLORE MENU — HARD CLICK-LAYER FIX — 2026-08-17
   When the product Explore drawer is open, it is the only
   interactive full-screen layer. Shared cart/modal backdrops are
   disabled so they cannot dim or intercept the menu.
   ============================================================ */
body.product-menu-open .product-mobile-menu.open {
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  background: #fff !important;
}
body.product-menu-open .product-mobile-menu.open,
body.product-menu-open .product-mobile-menu.open * {
  pointer-events: auto !important;
}
body.product-menu-open .duva-shell-overlay,
body.product-menu-open #pageOverlay,
body.product-menu-open #productPageOverlay {
  pointer-events: none !important;
  z-index: -1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ============================================================
   FILTER PANEL CLOSE BUTTON — 2026-08-17
   Gives the shop filter panel an obvious, always-visible way to
   dismiss it, next to Clear All.
   ============================================================ */
.filter-panel-heading-actions {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.filter-panel-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 1px solid var(--black, #111) !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  color: var(--black, #111) !important;
  background: none !important;
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease !important;
}

.filter-panel-close:hover,
.filter-panel-close:focus-visible {
  background: var(--black, #111) !important;
  color: #fff !important;
}

/* ============================================================
   PASSWORD VISIBILITY TOGGLE — 2026-08-17
   ============================================================ */
.password-field {
  position: relative !important;
  display: block !important;
}

.password-field input {
  width: 100% !important;
  padding-right: 62px !important;
}

.password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  background: none !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: #555 !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: #111 !important;
}

/* ============================================================
   BENEFIT BAR REFRESH — 2026-08-17
   Swap crude text glyphs for clean line icons and give the row
   proper breathing room instead of cramped left-aligned text.
   ============================================================ */
.benefit-bar-v2 {
  padding: 56px var(--gutter, 32px) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 36px !important;
}

.benefit-bar-v2 article {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.benefit-bar-v2 .benefit-icon {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 50% !important;
  color: #fff !important;
}

.benefit-bar-v2 .benefit-icon .ui-svg {
  width: 20px !important;
  height: 20px !important;
}

.benefit-bar-v2 h3 {
  margin: 0 0 6px !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  color: #fff !important;
}

.benefit-bar-v2 p {
  margin: 0 !important;
  color: #9c9c9c !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

@media (max-width: 900px) {
  .benefit-bar-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 24px !important;
  }
}

@media (max-width: 560px) {
  .benefit-bar-v2 {
    grid-template-columns: 1fr !important;
    padding: 40px 24px !important;
    gap: 26px !important;
  }
}

/* ============================================================
   FAVORITES + SHOPPING BAG — HOVER UNDERLINE
   Visual-only: no drawer/menu/cart/favorites behavior changed.
   ============================================================ */
#favoritesDrawer a,
#favoritesDrawer button:not(.drawer-close):not(.quantity-btn),
#cartDrawer a,
#cartDrawer button:not(.drawer-close):not(.quantity-btn),
.favorites-page a,
.cart-page a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color .18s ease;
}

#favoritesDrawer a:hover,
#favoritesDrawer button:not(.drawer-close):not(.quantity-btn):hover,
#cartDrawer a:hover,
#cartDrawer button:not(.drawer-close):not(.quantity-btn):hover,
.favorites-page a:hover,
.cart-page a:hover {
  text-decoration-color: currentColor;
}


/* Favorites: match Shopping Bag's bold underline hover treatment. */
#favoritesDrawer a:hover,
#favoritesDrawer button:not(.drawer-close):not(.quantity-btn):hover,
.favorites-page a:hover {
  font-weight: 700 !important;
  text-decoration-line: underline !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
}


/* ============================================================
   FAVORITES TITLE HOVER — exact Shopping Bag behavior
   Actual drawer markup:
   <h2><a class="favorites-title-link">FAVORITES</a></h2>
   ============================================================ */
#favoritesDrawer .favorites-title-link,
#favoritesDrawer .drawer-header h2 .favorites-title-link {
  color: inherit !important;
  font-weight: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#favoritesDrawer .favorites-title-link:hover,
#favoritesDrawer .favorites-title-link:focus-visible,
#favoritesDrawer .drawer-header h2 .favorites-title-link:hover,
#favoritesDrawer .drawer-header h2 .favorites-title-link:focus-visible {
  color: inherit !important;
  font-weight: inherit !important;
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: auto !important;
  text-underline-offset: 6px !important;
}


/* ============================================================
   FAVORITES RECOMMENDATIONS — EXACT SHOPPING CART LAYOUT
   Only this section is affected.
   ============================================================ */
.favorites-page .favorites-recommendations.cart-page-recommendations {
  border-top: 1px solid #dedede !important;
  margin-top: 65px !important;
  padding-top: 46px !important;
}

.favorites-page .favorites-recommendations.cart-page-recommendations > h2 {
  margin: 5px 0 28px !important;
  font-size: clamp(30px,4vw,54px) !important;
  letter-spacing: -.04em !important;
}

.favorites-page #favoritesRecommendations.cart-page-recommendation-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  overflow-x: visible !important;
  padding: 0 !important;
}

.favorites-page #favoritesRecommendations .cart-page-rec {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
}

.favorites-page #favoritesRecommendations .cart-page-rec > a {
  display: block !important;
  color: #111 !important;
  text-decoration: none !important;
}

.favorites-page #favoritesRecommendations .cart-page-rec img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  background: #f4f4f4 !important;
}

.favorites-page #favoritesRecommendations .cart-page-rec h3 {
  display: inline-block !important;
  margin: 12px 0 4px !important;
  padding: 2px 4px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  background: transparent !important;
  transition: background-color .16s ease !important;
}

.favorites-page #favoritesRecommendations .cart-page-rec > a:hover h3,
.favorites-page #favoritesRecommendations .cart-page-rec > a:focus-visible h3 {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background: #e9e9e9 !important;
}

.favorites-page #favoritesRecommendations .cart-page-rec p {
  margin: 0 0 12px !important;
  color: #555 !important;
  font-size: 15px !important;
}

.favorites-page #favoritesRecommendations .cart-page-rec button {
  width: 100% !important;
  border: 1px solid #111 !important;
  background: #111 !important;
  color: #fff !important;
  padding: 12px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  cursor: pointer !important;
}

@media (max-width: 980px) {
  .favorites-page #favoritesRecommendations.cart-page-recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .favorites-page #favoritesRecommendations.cart-page-recommendation-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   CART + FAVORITES RECOMMENDATIONS — SAME COMPACT LAYOUT
   Only recommendation sections are affected.
   ============================================================ */
.cart-page-recommendations,
.favorites-recommendations {
  margin: 48px 0 0 !important;
  padding: 30px 0 8px !important;
  border-top: 1px solid #ddd !important;
}

.cart-page-recommendations > h2,
.favorites-recommendations > h2 {
  margin: 5px 0 20px !important;
  font-size: clamp(26px,3vw,40px) !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

/* Same compact horizontal row on both pages. */
.cart-page-recommendation-grid,
.favorites-recommendation-row,
.favorites-page #favoritesRecommendations.cart-page-recommendation-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 14px !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Same card width on both pages. */
.cart-page-rec,
.favorites-rec-card,
.favorites-page #favoritesRecommendations .cart-page-rec {
  flex: 0 0 190px !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  scroll-snap-align: start !important;
}

/* Same image size on both pages. */
.cart-page-rec img,
.favorites-rec-card img,
.favorites-page #favoritesRecommendations .cart-page-rec img {
  display: block !important;
  width: 190px !important;
  height: 225px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  background: #f3f3f3 !important;
}

/* Same name/price spacing. */
.cart-page-rec h3,
.favorites-rec-card h3,
.favorites-page #favoritesRecommendations .cart-page-rec h3 {
  display: inline-block !important;
  margin: 8px 0 3px !important;
  padding: 2px 3px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  background: transparent !important;
  transition: background-color .16s ease !important;
}

.cart-page-rec p,
.favorites-rec-card p,
.favorites-page #favoritesRecommendations .cart-page-rec p {
  margin: 0 0 8px !important;
  font-size: 13px !important;
  color: #555 !important;
}

/* Highlight product name on hover instead of underline. */
.cart-page-rec > a,
.favorites-rec-card > a,
.favorites-page #favoritesRecommendations .cart-page-rec > a {
  color: #111 !important;
  text-decoration: none !important;
}

.cart-page-rec > a:hover h3,
.cart-page-rec > a:focus-visible h3,
.favorites-rec-card > a:hover h3,
.favorites-rec-card > a:focus-visible h3,
.favorites-page #favoritesRecommendations .cart-page-rec > a:hover h3,
.favorites-page #favoritesRecommendations .cart-page-rec > a:focus-visible h3 {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background: #e9e9e9 !important;
}

/* Same compact Add to Bag button. */
.cart-page-rec button,
.favorites-rec-card button,
.favorites-page #favoritesRecommendations .cart-page-rec button {
  width: 100% !important;
  padding: 10px !important;
  border: 1px solid #000 !important;
  background: #000 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
}


/* ============================================================
   FAVORITES RECOMMENDATIONS — ALIGN CARDS + SUBTLE TEXT HOVER
   Scope limited strictly to the recommendation cards in Favorites.
   ============================================================ */

/* Make every Favorites recommendation card use the same vertical structure
   so image, title, price and ADD TO BAG stay perfectly aligned. */
.favorites-page #favoritesRecommendations .favorites-rec-card,
.favorites-page #favoritesRecommendations .cart-page-rec {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: 100% !important;
}

/* Keep the product link as a vertical block. */
.favorites-page #favoritesRecommendations .favorites-rec-card > a,
.favorites-page #favoritesRecommendations .cart-page-rec > a {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  color: #222 !important;
  text-decoration: none !important;
}

/* Force identical image framing on every card. */
.favorites-page #favoritesRecommendations .favorites-rec-card img,
.favorites-page #favoritesRecommendations .cart-page-rec img {
  flex: 0 0 auto !important;
  width: 190px !important;
  height: 225px !important;
  object-fit: cover !important;
}

/* Reserve the same title height for one-line and two-line names.
   This keeps every price and every button on the same baseline. */
.favorites-page #favoritesRecommendations .favorites-rec-card h3,
.favorites-page #favoritesRecommendations .cart-page-rec h3 {
  display: block !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  margin: 8px 0 3px !important;
  padding: 0 !important;
  color: #222 !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
  transition: color .16s ease !important;
}

/* Price stays aligned below the reserved title area. */
.favorites-page #favoritesRecommendations .favorites-rec-card p,
.favorites-page #favoritesRecommendations .cart-page-rec p {
  flex: 0 0 auto !important;
  margin: 0 0 8px !important;
}

/* ADD TO BAG always sits at the same vertical position. */
.favorites-page #favoritesRecommendations .favorites-rec-card button,
.favorites-page #favoritesRecommendations .cart-page-rec button {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* No underline and no gray highlight.
   Only a small darkening of the product title on hover/focus. */
.favorites-page #favoritesRecommendations .favorites-rec-card > a:hover h3,
.favorites-page #favoritesRecommendations .favorites-rec-card > a:focus-visible h3,
.favorites-page #favoritesRecommendations .cart-page-rec > a:hover h3,
.favorites-page #favoritesRecommendations .cart-page-rec > a:focus-visible h3 {
  color: #000 !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
}


/* ============================================================
   CART + FAVORITES RECOMMENDATIONS — TEXT-ONLY HOVER
   No gray background, no underline. Only slight text darkening.
   ============================================================ */

/* Keep recommendation product titles free of highlight backgrounds. */
.cart-page-recommendations .cart-page-rec h3,
.cart-page-recommendations .favorites-rec-card h3,
.favorites-recommendations .cart-page-rec h3,
.favorites-recommendations .favorites-rec-card h3,
#cartRecommendations .cart-page-rec h3,
#favoritesRecommendations .cart-page-rec h3,
#favoritesRecommendations .favorites-rec-card h3 {
  background: transparent !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  color: #222 !important;
  transition: color .16s ease !important;
}

/* Shopping Cart + Favorites: slight text darkening only. */
.cart-page-recommendations .cart-page-rec > a:hover h3,
.cart-page-recommendations .cart-page-rec > a:focus-visible h3,
.cart-page-recommendations .favorites-rec-card > a:hover h3,
.cart-page-recommendations .favorites-rec-card > a:focus-visible h3,
.favorites-recommendations .cart-page-rec > a:hover h3,
.favorites-recommendations .cart-page-rec > a:focus-visible h3,
.favorites-recommendations .favorites-rec-card > a:hover h3,
.favorites-recommendations .favorites-rec-card > a:focus-visible h3,
#cartRecommendations .cart-page-rec > a:hover h3,
#cartRecommendations .cart-page-rec > a:focus-visible h3,
#favoritesRecommendations .cart-page-rec > a:hover h3,
#favoritesRecommendations .cart-page-rec > a:focus-visible h3,
#favoritesRecommendations .favorites-rec-card > a:hover h3,
#favoritesRecommendations .favorites-rec-card > a:focus-visible h3 {
  background: transparent !important;
  color: #000 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}


/* ============================================================
   FINAL TEXT-ONLY HOVER FIX — CART + FAVORITES
   Handles both linked-title and card-hover markup.
   ============================================================ */

/* Never paint a hover background on recommendation names/cards. */
.cart-page-recommendations .cart-page-rec:hover,
.cart-page-recommendations .cart-page-rec:hover h3,
.cart-page-recommendations .cart-page-rec:hover .product-name,
.cart-page-recommendations .cart-page-rec:hover .product-title,
#cartRecommendations .cart-page-rec:hover,
#cartRecommendations .cart-page-rec:hover h3,
#cartRecommendations .cart-page-rec:hover .product-name,
#cartRecommendations .cart-page-rec:hover .product-title,
.favorites-recommendations .cart-page-rec:hover,
.favorites-recommendations .cart-page-rec:hover h3,
.favorites-recommendations .favorites-rec-card:hover,
.favorites-recommendations .favorites-rec-card:hover h3,
#favoritesRecommendations .cart-page-rec:hover,
#favoritesRecommendations .cart-page-rec:hover h3,
#favoritesRecommendations .favorites-rec-card:hover,
#favoritesRecommendations .favorites-rec-card:hover h3 {
  background: transparent !important;
  text-decoration: none !important;
}

/* Normal recommendation title: near-black. */
.cart-page-recommendations .cart-page-rec h3,
.cart-page-recommendations .cart-page-rec .product-name,
.cart-page-recommendations .cart-page-rec .product-title,
#cartRecommendations .cart-page-rec h3,
#cartRecommendations .cart-page-rec .product-name,
#cartRecommendations .cart-page-rec .product-title,
.favorites-recommendations .cart-page-rec h3,
.favorites-recommendations .favorites-rec-card h3,
#favoritesRecommendations .cart-page-rec h3,
#favoritesRecommendations .favorites-rec-card h3 {
  color: #242424 !important;
  background: transparent !important;
  transition: color .16s ease !important;
}

/* Hover anywhere on the recommendation card -> title darkens to black. */
.cart-page-recommendations .cart-page-rec:hover h3,
.cart-page-recommendations .cart-page-rec:hover .product-name,
.cart-page-recommendations .cart-page-rec:hover .product-title,
#cartRecommendations .cart-page-rec:hover h3,
#cartRecommendations .cart-page-rec:hover .product-name,
#cartRecommendations .cart-page-rec:hover .product-title,
.favorites-recommendations .cart-page-rec:hover h3,
.favorites-recommendations .favorites-rec-card:hover h3,
#favoritesRecommendations .cart-page-rec:hover h3,
#favoritesRecommendations .favorites-rec-card:hover h3 {
  color: #000 !important;
  background: transparent !important;
  text-decoration: none !important;
}


/* ============================================================
   FINAL VISIBLE TEXT-DARKENING HOVER — CART + FAVORITES
   No background highlight. No underline.
   ============================================================ */

/* Normal state: deliberately a touch lighter so the hover change is visible. */
.cart-page-recommendations .cart-page-rec > a,
.cart-page-recommendations .cart-page-rec h3,
#cartPageRecommendations .cart-page-rec > a,
#cartPageRecommendations .cart-page-rec h3,
#cartRecommendations .cart-page-rec > a,
#cartRecommendations .cart-page-rec h3,
.favorites-recommendations .favorites-rec-card > a,
.favorites-recommendations .favorites-rec-card h3,
.favorites-recommendations .cart-page-rec > a,
.favorites-recommendations .cart-page-rec h3,
#favoritesRecommendations .favorites-rec-card > a,
#favoritesRecommendations .favorites-rec-card h3,
#favoritesRecommendations .cart-page-rec > a,
#favoritesRecommendations .cart-page-rec h3 {
  color: #3a3a3a !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: color .16s ease !important;
}

/* Hover/focus: darken the product-name text only. */
.cart-page-recommendations .cart-page-rec:hover > a,
.cart-page-recommendations .cart-page-rec:hover h3,
.cart-page-recommendations .cart-page-rec > a:hover,
#cartPageRecommendations .cart-page-rec:hover > a,
#cartPageRecommendations .cart-page-rec:hover h3,
#cartPageRecommendations .cart-page-rec > a:hover,
#cartRecommendations .cart-page-rec:hover > a,
#cartRecommendations .cart-page-rec:hover h3,
#cartRecommendations .cart-page-rec > a:hover,
.favorites-recommendations .favorites-rec-card:hover > a,
.favorites-recommendations .favorites-rec-card:hover h3,
.favorites-recommendations .favorites-rec-card > a:hover,
.favorites-recommendations .cart-page-rec:hover > a,
.favorites-recommendations .cart-page-rec:hover h3,
.favorites-recommendations .cart-page-rec > a:hover,
#favoritesRecommendations .favorites-rec-card:hover > a,
#favoritesRecommendations .favorites-rec-card:hover h3,
#favoritesRecommendations .cart-page-rec:hover > a,
#favoritesRecommendations .cart-page-rec:hover h3 {
  color: #111 !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Kill any lingering gray hover background from older rules. */
.cart-page-recommendations .cart-page-rec:hover h3,
#cartPageRecommendations .cart-page-rec:hover h3,
#cartRecommendations .cart-page-rec:hover h3,
.favorites-recommendations .favorites-rec-card:hover h3,
.favorites-recommendations .cart-page-rec:hover h3,
#favoritesRecommendations .favorites-rec-card:hover h3,
#favoritesRecommendations .cart-page-rec:hover h3 {
  background: transparent !important;
}


/* ============================================================
   FINAL PRODUCT-NAME HOVER — CART + FAVORITES RECOMMENDATIONS
   Text-only: no gray box, no underline.
   ============================================================ */
.cart-page-recommendations .cart-page-rec h3,
#cartPageRecommendations .cart-page-rec h3,
#cartRecommendations .cart-page-rec h3,
.favorites-recommendations .favorites-rec-card h3,
.favorites-recommendations .cart-page-rec h3,
#favoritesRecommendations .favorites-rec-card h3,
#favoritesRecommendations .cart-page-rec h3 {
  color: #4a4a4a !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
  font-weight: 700 !important;
  transition: color .16s ease, font-weight .16s ease !important;
}

/* Hovering the image/link/title area makes only the name visibly darker. */
.cart-page-recommendations .cart-page-rec:hover h3,
#cartPageRecommendations .cart-page-rec:hover h3,
#cartRecommendations .cart-page-rec:hover h3,
.favorites-recommendations .favorites-rec-card:hover h3,
.favorites-recommendations .cart-page-rec:hover h3,
#favoritesRecommendations .favorites-rec-card:hover h3,
#favoritesRecommendations .cart-page-rec:hover h3 {
  color: #000 !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
  font-weight: 800 !important;
}

/* Prevent any older hover rule from painting a gray highlight. */
.cart-page-recommendations .cart-page-rec:hover h3,
#cartPageRecommendations .cart-page-rec:hover h3,
#cartRecommendations .cart-page-rec:hover h3,
.favorites-recommendations .favorites-rec-card:hover h3,
.favorites-recommendations .cart-page-rec:hover h3,
#favoritesRecommendations .favorites-rec-card:hover h3,
#favoritesRecommendations .cart-page-rec:hover h3 {
  box-shadow: none !important;
  background-image: none !important;
}


/* ============================================================
   FINAL RECOMMENDATION HOVER CONSISTENCY
   Cart + Favorites behave identically:
   - title only darkens
   - price never changes
   - no gray highlight
   - no underline
   ============================================================ */
.cart-page-recommendations .cart-page-rec > a,
.favorites-recommendations .favorites-rec-card > a,
.favorites-recommendations .cart-page-rec > a,
#cartPageRecommendations .cart-page-rec > a,
#favoritesRecommendations .favorites-rec-card > a,
#favoritesRecommendations .cart-page-rec > a {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}

.cart-page-recommendations .cart-page-rec h3,
.favorites-recommendations .favorites-rec-card h3,
.favorites-recommendations .cart-page-rec h3,
#cartPageRecommendations .cart-page-rec h3,
#favoritesRecommendations .favorites-rec-card h3,
#favoritesRecommendations .cart-page-rec h3 {
  color: #3a3a3a !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
  transition: color .16s ease !important;
}

.cart-page-recommendations .cart-page-rec p,
.favorites-recommendations .favorites-rec-card p,
.favorites-recommendations .cart-page-rec p,
#cartPageRecommendations .cart-page-rec p,
#favoritesRecommendations .favorites-rec-card p,
#favoritesRecommendations .cart-page-rec p {
  color: #555 !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: none !important;
}

/* Hover anywhere over either recommendation card: TITLE darkens only. */
.cart-page-recommendations .cart-page-rec:hover h3,
.favorites-recommendations .favorites-rec-card:hover h3,
.favorites-recommendations .cart-page-rec:hover h3,
#cartPageRecommendations .cart-page-rec:hover h3,
#favoritesRecommendations .favorites-rec-card:hover h3,
#favoritesRecommendations .cart-page-rec:hover h3 {
  color: #111 !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
}

/* Explicitly freeze price during hover so Favorites cannot highlight/darken it. */
.cart-page-recommendations .cart-page-rec:hover p,
.favorites-recommendations .favorites-rec-card:hover p,
.favorites-recommendations .cart-page-rec:hover p,
#cartPageRecommendations .cart-page-rec:hover p,
#favoritesRecommendations .favorites-rec-card:hover p,
#favoritesRecommendations .cart-page-rec:hover p {
  color: #555 !important;
  background: transparent !important;
  text-decoration: none !important;
}


/* ============================================================
   ONE IDENTICAL HEADER ON EVERY STOREFRONT PAGE
   Normalizes the hamburger + search control regardless of old
   page-specific product/cart/favorites/account selectors.
   ============================================================ */
body #siteHeader.site-header {
  display: grid !important;
  grid-template-columns: 48px 148px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 18px !important;
  width: 100% !important;
  height: 94px !important;
  min-height: 94px !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: #111 !important;
  border-bottom: 1px solid #e4e4e1 !important;
}

/* Exact same three-line button everywhere. */
body #siteHeader.site-header #menuButton,
body #siteHeader.site-header .menu-button,
body #siteHeader.site-header #productMenuButton {
  position: static !important;
  grid-column: 1 !important;
  justify-self: start !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 5px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 9px !important;
  border: 0 !important;
  background: transparent !important;
  color: #111 !important;
  transform: none !important;
}

body #siteHeader.site-header #menuButton span,
body #siteHeader.site-header .menu-button span,
body #siteHeader.site-header #productMenuButton span {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  min-height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  transform: none !important;
}

/* Exact same search shell everywhere. */
body #siteHeader.site-header .header-actions,
body #siteHeader.site-header .product-header-actions,
body #siteHeader.site-header .about-header-actions,
body #siteHeader.site-header .duva-v38-actions {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body #siteHeader.site-header .header-search,
body #siteHeader.site-header .product-header-search,
body #siteHeader.site-header .duva-v38-search {
  position: relative !important;
  display: flex !important;
  flex: 1 1 520px !important;
  align-items: center !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 720px !important;
  height: 50px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 6px 0 17px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 1px solid #cfcfcb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111 !important;
  transform: none !important;
}

body #siteHeader.site-header .header-search input,
body #siteHeader.site-header .product-header-search input,
body #siteHeader.site-header .duva-v38-search input {
  position: static !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #111 !important;
  font: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

body #siteHeader.site-header .header-search .icon-button,
body #siteHeader.site-header .product-header-search .icon-button,
body #siteHeader.site-header #searchButton,
body #siteHeader.site-header #productSearchButton {
  position: static !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #111 !important;
  transform: none !important;
}

/* Keep tablet/mobile header behavior identical too. */
@media (min-width: 601px) and (max-width: 900px) {
  body #siteHeader.site-header {
    grid-template-columns: 42px 116px minmax(0,1fr) !important;
    column-gap: 10px !important;
    padding: 0 16px !important;
  }
  body #siteHeader.site-header #menuButton,
  body #siteHeader.site-header .menu-button,
  body #siteHeader.site-header #productMenuButton {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
  }
  body #siteHeader.site-header .header-search,
  body #siteHeader.site-header .product-header-search,
  body #siteHeader.site-header .duva-v38-search {
    flex: 1 1 220px !important;
    min-width: 150px !important;
    max-width: 560px !important;
  }
}

@media (max-width: 600px) {
  body #siteHeader.site-header {
    grid-template-columns: 44px 112px minmax(0,1fr) !important;
    column-gap: 7px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 10px !important;
  }
  body #siteHeader.site-header #menuButton,
  body #siteHeader.site-header .menu-button,
  body #siteHeader.site-header #productMenuButton {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
  }
}


/* FINAL SINGLE CHANGE — hamburger/three lines white */
body #siteHeader.site-header #menuButton,
body #siteHeader.site-header .menu-button,
body #siteHeader.site-header #productMenuButton {
  color: #fff !important;
}

body #siteHeader.site-header #menuButton span,
body #siteHeader.site-header .menu-button span,
body #siteHeader.site-header #productMenuButton span {
  background: #fff !important;
}


/* FINAL SINGLE CORRECTION — hamburger contrast only */

/* White/light header background -> black three lines */
body #siteHeader.site-header #menuButton,
body #siteHeader.site-header .menu-button,
body #siteHeader.site-header #productMenuButton {
  color: #111 !important;
}
body #siteHeader.site-header #menuButton span,
body #siteHeader.site-header .menu-button span,
body #siteHeader.site-header #productMenuButton span {
  background: #111 !important;
}

/* Dark/transparent hero header -> white three lines */
body #siteHeader.site-header.is-hero #menuButton,
body #siteHeader.site-header.is-hero .menu-button,
body #siteHeader.site-header.is-hero #productMenuButton,
body #siteHeader.site-header.hero-header #menuButton,
body #siteHeader.site-header.hero-header .menu-button,
body #siteHeader.site-header.hero-header #productMenuButton,
body.home-page #siteHeader.site-header:not(.scrolled) #menuButton,
body.home-page #siteHeader.site-header:not(.scrolled) .menu-button,
body.home-page #siteHeader.site-header:not(.scrolled) #productMenuButton {
  color: #fff !important;
}
body #siteHeader.site-header.is-hero #menuButton span,
body #siteHeader.site-header.is-hero .menu-button span,
body #siteHeader.site-header.is-hero #productMenuButton span,
body #siteHeader.site-header.hero-header #menuButton span,
body #siteHeader.site-header.hero-header .menu-button span,
body #siteHeader.site-header.hero-header #productMenuButton span,
body.home-page #siteHeader.site-header:not(.scrolled) #menuButton span,
body.home-page #siteHeader.site-header:not(.scrolled) .menu-button span,
body.home-page #siteHeader.site-header:not(.scrolled) #productMenuButton span {
  background: #fff !important;
}


/* ============================================================
   EXPLORE DRAWER — ONE VISUAL VERSION ACROSS THE WHOLE SITE
   Styling only. Does not change open/close behavior or navigation.
   ============================================================ */

/* All Explore drawer implementations get the same frame. */
body .mobile-menu,
body .product-mobile-menu,
body .duva-shell-menu,
body #mobileMenu,
body #productMobileMenu,
body #favoritesMobileMenu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(520px, 88vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  box-sizing: border-box !important;
  padding: 86px 32px 36px !important;
  background: #fff !important;
  color: #111 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Same X button position/size everywhere. */
body .mobile-menu > .drawer-close,
body .product-mobile-menu > .drawer-close,
body .duva-shell-menu > .duva-shell-close,
body #mobileMenu > .drawer-close,
body #productMobileMenu > .drawer-close,
body #favoritesMobileMenu > .drawer-close {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  right: auto !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #d4d4d4 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #111 !important;
  font: inherit !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

/* Same EXPLORE DUVA label everywhere. */
body .mobile-menu > .eyebrow,
body .product-mobile-menu > .eyebrow,
body .duva-shell-menu > .eyebrow,
body #mobileMenu > .eyebrow,
body #productMobileMenu > .eyebrow,
body #favoritesMobileMenu > .eyebrow {
  margin: 0 0 64px !important;
  padding: 0 !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .17em !important;
}

/* Same menu rows everywhere. */
body .mobile-menu > a,
body .product-mobile-menu > a,
body .duva-shell-menu > a,
body #mobileMenu > a,
body #productMobileMenu > a,
body #favoritesMobileMenu > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 26px 4px !important;
  border: 0 !important;
  border-top: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #111 !important;
  font-size: clamp(30px, 3.4vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  text-decoration: none !important;
  text-underline-offset: 7px !important;
}

/* Same bottom divider on every menu. */
body .mobile-menu > a:last-of-type,
body .product-mobile-menu > a:last-of-type,
body .duva-shell-menu > a:last-of-type,
body #mobileMenu > a:last-of-type,
body #productMobileMenu > a:last-of-type,
body #favoritesMobileMenu > a:last-of-type {
  border-bottom: 1px solid #d8d8d8 !important;
}

/* Same hover/focus behavior everywhere: underline only, no gray block. */
body .mobile-menu > a:hover,
body .mobile-menu > a:focus-visible,
body .product-mobile-menu > a:hover,
body .product-mobile-menu > a:focus-visible,
body .duva-shell-menu > a:hover,
body .duva-shell-menu > a:focus-visible,
body #mobileMenu > a:hover,
body #mobileMenu > a:focus-visible,
body #productMobileMenu > a:hover,
body #productMobileMenu > a:focus-visible,
body #favoritesMobileMenu > a:hover,
body #favoritesMobileMenu > a:focus-visible,
body .mobile-menu > a[aria-current="page"],
body .product-mobile-menu > a[aria-current="page"] {
  background: transparent !important;
  color: #111 !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: currentColor !important;
  font-weight: 700 !important;
}

/* Keep narrower screens visually identical, only reduce drawer width/padding. */
@media (max-width: 600px) {
  body .mobile-menu,
  body .product-mobile-menu,
  body .duva-shell-menu,
  body #mobileMenu,
  body #productMobileMenu,
  body #favoritesMobileMenu {
    width: min(390px, 94vw) !important;
    padding: 82px 24px 30px !important;
  }

  body .mobile-menu > .eyebrow,
  body .product-mobile-menu > .eyebrow,
  body .duva-shell-menu > .eyebrow,
  body #mobileMenu > .eyebrow,
  body #productMobileMenu > .eyebrow,
  body #favoritesMobileMenu > .eyebrow {
    margin-bottom: 52px !important;
  }

  body .mobile-menu > a,
  body .product-mobile-menu > a,
  body .duva-shell-menu > a,
  body #mobileMenu > a,
  body #productMobileMenu > a,
  body #favoritesMobileMenu > a {
    padding: 22px 4px !important;
    font-size: 30px !important;
  }
}


/* ============================================================
   EXPLORE DRAWER — CART CONSISTENCY FIX ONLY
   Keeps the cart-triggered drawer aligned exactly like every other page.
   Makes the hover underline consistently bold.
   ============================================================ */

/* Prevent any older hover rule from nudging drawer links sideways. */
body .mobile-menu > a,
body .product-mobile-menu > a,
body .duva-shell-menu > a,
body #mobileMenu > a,
body #productMobileMenu > a,
body #favoritesMobileMenu > a {
  transform: none !important;
  translate: none !important;
  left: auto !important;
  text-indent: 0 !important;
}

body .mobile-menu > a:hover,
body .mobile-menu > a:focus-visible,
body .product-mobile-menu > a:hover,
body .product-mobile-menu > a:focus-visible,
body .duva-shell-menu > a:hover,
body .duva-shell-menu > a:focus-visible,
body #mobileMenu > a:hover,
body #mobileMenu > a:focus-visible,
body #productMobileMenu > a:hover,
body #productMobileMenu > a:focus-visible,
body #favoritesMobileMenu > a:hover,
body #favoritesMobileMenu > a:focus-visible {
  padding-left: 4px !important;
  transform: none !important;
  translate: none !important;
  text-indent: 0 !important;
  background: transparent !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 4px !important;
  text-underline-offset: 8px !important;
  text-decoration-color: #111 !important;
  font-weight: 700 !important;
}

/* Cart can render the shared drawer inside an overlay/panel.
   Lock its visible drawer edge to the viewport exactly like the homepage. */
body.cart-page .mobile-menu,
body.cart-page .product-mobile-menu,
body.cart-page .duva-shell-menu,
body:has(.cart-page) .mobile-menu,
body:has(.cart-page) .product-mobile-menu,
body:has(.cart-page) .duva-shell-menu {
  left: 0 !important;
  margin-left: 0 !important;
  transform-origin: left center !important;
}


/* ============================================================
   EXPLORE DRAWER — SAME SLIGHT HOVER NUDGE EVERYWHERE
   ============================================================ */
body .mobile-menu > a:hover,
body .mobile-menu > a:focus-visible,
body .product-mobile-menu > a:hover,
body .product-mobile-menu > a:focus-visible,
body .duva-shell-menu > a:hover,
body .duva-shell-menu > a:focus-visible,
body #mobileMenu > a:hover,
body #mobileMenu > a:focus-visible,
body #productMobileMenu > a:hover,
body #productMobileMenu > a:focus-visible,
body #favoritesMobileMenu > a:hover,
body #favoritesMobileMenu > a:focus-visible {
  transform: translateX(8px) !important;
  translate: none !important;
}

/* Purchase History cancellation controls */
.account-page .account-order-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 22px}
.account-page .account-order-primary,.account-page .account-order-meta{display:flex;align-items:center;gap:14px}
.account-page .account-order-meta{justify-content:flex-end;flex-wrap:wrap}
.account-page .account-cancel-order{white-space:nowrap}
.account-page .account-order-note{font-size:10px!important;font-weight:700;letter-spacing:.08em;color:#777!important}
.account-page .account-order-message{grid-column:1/-1;margin:0;font-size:12px}
.account-page .account-order-message:empty{display:none}
.account-page .account-order-message.status-progress,.account-page .account-order-message.status-success{color:#22743b}
.account-page .account-order-message.status-error{color:#b42318}
@media(max-width:720px){
  .account-page .account-order-row{grid-template-columns:1fr}
  .account-page .account-order-primary,.account-page .account-order-meta{align-items:flex-start;flex-direction:column}
  .account-page .account-order-meta{justify-content:flex-start}
  .account-page .account-cancel-order{width:100%}
}

/* Homepage hero: dark utility icons remain visible over the light campaign photo. */
body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .account-header-link,
body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) #favoritesButton,
body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) #cartButton,
body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) .account-header-link .ui-svg,
body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) #favoritesButton .ui-svg,
body:not(.inner-page):not(.favorites-page):not(.cart-page):not(.account-page) #siteHeader:not(.scrolled) #cartButton .ui-svg {
  color: #111 !important;
  stroke: #111 !important;
}

/* Final homepage icon-color lock. */
#siteHeader:not(.scrolled) .account-header-link,
#siteHeader:not(.scrolled) #favoritesButton,
#siteHeader:not(.scrolled) #cartButton,
#siteHeader:not(.scrolled) .account-header-link svg,
#siteHeader:not(.scrolled) #favoritesButton svg,
#siteHeader:not(.scrolled) #cartButton svg,
#siteHeader:not(.scrolled) .account-header-link svg *,
#siteHeader:not(.scrolled) #favoritesButton svg *,
#siteHeader:not(.scrolled) #cartButton svg * {
  color: #000 !important;
  stroke: #000 !important;
}

/* Admin-controlled launch countdown. It is not inserted until the setting is enabled. */
.duva-countdown-gate{position:fixed;inset:0;z-index:200000;display:grid;place-items:center;height:100dvh;padding:clamp(16px,3vw,40px);overflow:hidden;background-color:#202020;background-image:url("../images/campaign/countdown-group-portrait.png?v=20260826-countdown-img-element");background-position:center 20%;background-size:cover;background-repeat:no-repeat;color:#fff;text-align:center}.duva-countdown-background{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:1}.duva-countdown-gate::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.35)}.duva-countdown-inner{position:relative;z-index:2;width:min(1120px,100%);max-height:100%;overflow:auto}.duva-countdown-kicker{margin:0 0 clamp(8px,1.6vw,20px);font-size:clamp(10px,1.2vw,16px);font-weight:700;letter-spacing:.19em}.duva-countdown-gate h1{margin:0;font-size:clamp(32px,6vw,96px);font-weight:600;line-height:.9;letter-spacing:-.06em}.duva-countdown-copy{margin:clamp(10px,2vw,24px) 0 0;font-size:clamp(13px,1.6vw,22px);font-weight:500}.duva-countdown-clock{display:flex;justify-content:center;gap:clamp(16px,4vw,60px);margin:clamp(16px,4vw,44px) auto 0}.duva-countdown-clock div{min-width:62px}.duva-countdown-clock strong{display:block;font-size:clamp(26px,4vw,56px);line-height:1;font-weight:700}.duva-countdown-clock span{display:block;margin-top:clamp(6px,1vw,12px);color:#d5d5d5;font-size:clamp(8px,.9vw,12px);font-weight:700;letter-spacing:.14em}.duva-countdown-notify{margin:clamp(18px,4vw,36px) auto 0;width:min(460px,100%)}.duva-countdown-notify-label{display:block;margin:0 0 clamp(6px,1.2vw,12px);font-size:clamp(10px,1vw,12px);font-weight:700;letter-spacing:.14em;color:#e6e6e6;text-transform:uppercase}.duva-countdown-notify-row{display:flex;gap:10px}.duva-countdown-notify-row input{flex:1;min-width:0;padding:clamp(10px,1.6vw,15px) 16px;border-radius:2px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-size:14px}.duva-countdown-notify-row input::placeholder{color:rgba(255,255,255,.6)}.duva-countdown-notify-row input:focus{outline:none;border-color:#fff}.duva-countdown-notify-row button{padding:clamp(10px,1.6vw,15px) 20px;border:none;border-radius:2px;background:#fff;color:#111;font-weight:700;font-size:12px;letter-spacing:.08em;cursor:pointer;white-space:nowrap}.duva-countdown-notify-row button:disabled{opacity:.6;cursor:default}.duva-countdown-notify-status{min-height:18px;margin:10px 0 0;font-size:12px;color:#e6e6e6}@media(max-width:650px){.duva-countdown-gate{background-position:center center;padding:16px}.duva-countdown-gate h1{font-size:clamp(32px,11vw,56px)}.duva-countdown-copy{margin-top:10px}.duva-countdown-clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px;margin-top:18px}.duva-countdown-clock div{min-width:0}.duva-countdown-clock strong{font-size:clamp(20px,6vw,32px)}.duva-countdown-notify{margin-top:18px}.duva-countdown-notify-row{flex-direction:column}.duva-countdown-notify-row button{width:100%}}

/* Favorites responsive card: keep product photos large, complete, and uncropped. */
@media (max-width: 720px) {
  body.favorites-page .favorite-page-card {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  body.favorites-page .favorite-page-image,
  body.favorites-page .favorite-page-image img {
    width: 180px !important;
    height: 225px !important;
  }
  body.favorites-page .favorite-page-image {
    overflow: hidden !important;
    background: #f4f4f4 !important;
  }
  body.favorites-page .favorite-page-image img {
    object-fit: contain !important;
    object-position: center center !important;
  }
  body.favorites-page .favorite-page-copy,
  body.favorites-page .favorite-page-copy h2 {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 520px) {
  body.favorites-page .favorite-page-card {
    grid-template-columns: 1fr !important;
  }
  body.favorites-page .favorite-page-image,
  body.favorites-page .favorite-page-image img {
    width: min(240px, 100%) !important;
    height: 300px !important;
  }
  body.favorites-page .favorite-page-image {
    justify-self: center !important;
  }
  body.favorites-page .favorite-page-card > strong {
    grid-column: 1 !important;
  }
}
/* Real DUVA support form inside the existing chat panel. */
.chat-support-form{display:grid!important;border:0!important;gap:8px!important}.chat-support-form>input[type="email"]{width:100%!important;box-sizing:border-box!important;border:1px solid var(--line)!important;padding:12px!important;outline:none!important}.chat-support-form .chat-message-row{display:flex!important;border:1px solid var(--line)!important}.chat-support-form .chat-message-row input{flex:1!important;min-width:0!important;border:0!important;padding:12px!important;outline:none!important}.chat-support-form .chat-message-row button{width:48px!important;min-height:46px!important;border:0!important;background:#111!important;color:#fff!important;cursor:pointer!important}.chat-support-form .chat-message-row button:disabled{opacity:.55!important;cursor:wait!important}.chat-support-form .chat-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
/* Chat placement: compact, lower on screen, and always above header icons. */
#chatPanel.chat-panel{right:22px!important;top:auto!important;bottom:20px!important;z-index:2147483647!important;isolation:isolate!important;max-height:calc(100dvh - 40px)!important;overflow:hidden!important;box-sizing:border-box!important}.chat-panel.open{display:flex!important;flex-direction:column!important}.chat-panel .chat-header{position:relative!important;z-index:2!important;flex:0 0 auto!important;background:#fff!important}.chat-panel .chat-messages{min-height:100px!important;max-height:220px!important;overflow-y:auto!important;overscroll-behavior:contain!important;flex:0 1 auto!important}.chat-panel .chat-support-form{flex:0 0 auto!important;background:#fff!important}.chat-panel [data-close-chat]{position:relative!important;z-index:3!important}.chat-panel.open~* .header-actions{z-index:auto!important}@media(max-width:600px){#chatPanel.chat-panel{right:12px!important;bottom:12px!important;max-height:calc(100dvh - 24px)!important}.chat-panel .chat-messages{max-height:180px!important}}

/* Lift the countdown portrait slightly so more of the seated model stays visible. */
.duva-countdown-gate{background-position:center 28%!important}
.duva-countdown-background{object-position:center 28%!important}