/* ==========================================================================
   ZOVARIN VISUAL OPTIMIZATION & FLUID WARM EDITORIAL MOTION SYSTEM (v2.1)
   - Strictly preserves Zovarin's signature Warm Palette:
     Warm Alabaster (#FAF8F5), Warm Travertine Sand (#F4EFEA),
     Rich Warm Espresso (#241B16 / #221A15), Warm Caramel/Amber (#8C6239 / #D4AF7A),
     Deep Warm Forest Accent (#8C6239)
   - Product-First Homepage & Card Hierarchy: Minimal text, maximum product imagery
   - 1280px Desktop Header Anti-Wrap & Discoverable Search Pill
   - GPU-Accelerated Micro-Interactions (Scroll Reveal, 3D Card Poise, Warm Sheen,
     Hero Progress Bar, Magnetic CTA)
   ========================================================================== */

:root {
  --zv-bg-alabaster: #FAF8F5;
  --zv-bg-travertine: #F4EFEA;
  --zv-bg-elevated: #FFFFFF;
  --zv-ink-espresso: #241B16;
  --zv-ink-charcoal: #221A15;
  --zv-ink-muted: #6C5D52;
  --zv-ink-subtle: #8C7E74;
  --zv-accent-amber: #8C6239;
  --zv-accent-champagne: #D4AF7A;
  --zv-accent-laurel: #8C6239;
  --zv-accent-laurel-soft: #F4EFEA;
  --zv-accent-laurel-border: #DFD3C3;
  --zv-border-hairline: #EAE3D9;
  --zv-border-strong: #D6C8B7;

  --zv-ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --zv-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  --zv-ease-silk: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. 1280PX HEADER ANTI-WRAP & WARM SEARCH PILL
   ========================================================================== */
@media screen and (min-width: 960px) {
  .header__container {
    max-width: 1440px !important;
    padding-left: clamp(16px, 2.5vw, 36px) !important;
    padding-right: clamp(16px, 2.5vw, 36px) !important;
    column-gap: clamp(8px, 1.2vw, 20px) !important;
  }

  .header__inline-nav {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .header__inline-menus {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(2px, 0.5vw, 8px) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-inline-menus__item {
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .header-inline-menus__item > a.header-inline-menus__link {
    padding: 10px clamp(8px, 0.95vw, 14px) !important;
    font-size: clamp(12.5px, 0.95vw, 13.5px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    color: var(--zv-ink-espresso) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  @media screen and (max-width: 1320px) {
    .header__localization .dropdown-menu__button {
      font-size: 11.5px !important;
      padding: 4px 6px !important;
    }
    .header__heading {
      margin-inline-end: 6px !important;
    }
  }
}

.zv-header-search-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: var(--zv-bg-travertine) !important;
  border: 1px solid var(--zv-border-hairline) !important;
  border-radius: 9999px !important;
  color: var(--zv-ink-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: all 220ms var(--zv-ease-fluid) !important;
  white-space: nowrap !important;
}

.zv-header-search-pill:hover {
  background: #FFFFFF !important;
  border-color: var(--zv-accent-amber) !important;
  color: var(--zv-ink-espresso) !important;
  box-shadow: 0 4px 12px rgba(36, 27, 22, 0.06) !important;
  transform: translateY(-1px) !important;
}

.zv-header-search-pill svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--zv-ink-espresso) !important;
  flex-shrink: 0 !important;
}

.zv-header-search-kbd {
  font-size: 11px;
  font-weight: 600;
  color: var(--zv-ink-subtle);
  background: #FFFFFF;
  border: 1px solid var(--zv-border-hairline);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.2;
}

@media screen and (max-width: 1180px) {
  .zv-header-search-kbd {
    display: none !important;
  }
  .zv-header-search-pill {
    padding: 0 10px !important;
  }
}

@media screen and (max-width: 959px) {
  .zv-header-search-pill-text,
  .zv-header-search-kbd {
    display: none !important;
  }
  .zv-header-search-pill {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    background: transparent !important;
    border-color: transparent !important;
  }
}

/* ==========================================================================
   2. FLUID WARM EDITORIAL MOTION PRIMITIVES
   ========================================================================== */
.zv-reveal-ready [data-zv-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 640ms var(--zv-ease-fluid),
    transform 640ms var(--zv-ease-fluid);
  transition-delay: calc(var(--zv-stagger, 0) * 65ms);
  will-change: opacity, transform;
}

.zv-reveal-ready [data-zv-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) and (pointer: fine) {
  .zv-interactive-tilt {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 320ms var(--zv-ease-fluid), box-shadow 320ms var(--zv-ease-fluid), border-color 320ms ease !important;
  }

  .zv-interactive-tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
      420px circle at var(--zv-mouse-x, 50%) var(--zv-mouse-y, 20%),
      rgba(255, 248, 238, 0.36),
      rgba(212, 175, 122, 0.08) 42%,
      transparent 75%
    );
    opacity: 0;
    transition: opacity 320ms ease;
    z-index: 3;
  }

  .zv-interactive-tilt:hover::after {
    opacity: 1;
  }
}

.zv-magnetic-btn {
  transform: translate3d(var(--zv-mag-x, 0px), var(--zv-mag-y, 0px), 0);
  transition: transform 180ms var(--zv-ease-fluid), background-color 220ms ease, box-shadow 220ms ease !important;
}

/* ==========================================================================
   3. UNIFIED WARM PRODUCT CARD SYSTEM (4:5 RATIO, PRODUCT-FIRST)
   ========================================================================== */
.product-card-wrapper {
  background: var(--zv-bg-elevated) !important;
  border: 1px solid var(--zv-border-hairline) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  transition:
    transform 320ms var(--zv-ease-fluid),
    box-shadow 320ms var(--zv-ease-fluid),
    border-color 260ms ease !important;
  box-shadow: 0 3px 12px rgba(36, 27, 22, 0.04) !important;
  position: relative !important;
}

@media (hover: hover) and (pointer: fine) {
  .product-card-wrapper:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 38px -6px rgba(36, 27, 22, 0.11) !important;
    border-color: var(--zv-border-strong) !important;
  }
}

.product-card-wrapper .card__content {
  padding: 10px 4px 4px !important;
  margin-block-start: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.zv-card-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.zv-card-category-kicker {
  font-family: var(--zv-font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zv-accent-amber);
  line-height: 1.2;
}

.zv-card-stock-dot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--zv-accent-amber);
}

.zv-card-stock-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--zv-accent-amber);
}

.product-card-wrapper .product__title {
  font-family: var(--zv-font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.36 !important;
  color: var(--zv-ink-charcoal) !important;
  margin: 0 0 6px 0 !important;
  min-height: 2.72em !important;
  text-align: left !important;
}

.product-card-wrapper .card__content .card__content-bottom {
  justify-content: flex-start !important;
  margin-top: auto !important;
}

/* Warm Factual Card Badges */
.zv-badge--set {
  background: rgba(36, 27, 22, 0.9) !important;
  color: #FAF8F5 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(212, 175, 122, 0.3) !important;
}

.zv-badge--knit {
  background: rgba(140, 98, 57, 0.92) !important;
  color: #FAF8F5 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.zv-badge--savings {
  background: rgba(140, 98, 57, 0.92) !important;
  color: #FFFFFF !important;
}

.zv-rec-reason-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--zv-accent-amber);
  background: var(--zv-bg-travertine);
  border: 1px solid var(--zv-border-strong);
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 1.3;
  margin-top: 4px;
}

/* ==========================================================================
   4. CART DRAWER SEPARATION & WARM STYLING
   ========================================================================== */
.zv-drawer-cross-sell {
  margin: 16px 16px 12px !important;
  padding: 14px !important;
  background: linear-gradient(180deg, #F4EFEA 0%, #FAF8F5 100%) !important;
  border: 1px solid var(--zv-border-strong) !important;
  border-radius: 10px !important;
  position: relative;
}

.zv-cross-sell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.zv-cross-sell-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zv-ink-espresso);
}

.zv-cross-sell-sub {
  font-size: 11.5px;
  color: var(--zv-ink-muted);
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.zv-cross-reason-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--zv-accent-amber);
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .zv-reveal-ready [data-zv-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .zv-interactive-tilt,
  .zv-magnetic-btn {
    transform: none !important;
    transition: none !important;
  }
}
/* The platform filter negative margin exceeds the new 24px page gutter. */
.main-collection-container > .facets-wrapper { margin-inline: 0 !important; max-width: 100%; box-sizing: border-box; padding-inline: 0 !important; }

/* Show product comparisons immediately; retain motion on editorial cards. */
.zv-reveal-ready .product-card-wrapper[data-zv-reveal] { opacity: 1; transform: none; transition-delay: 0ms; will-change: auto; }

/* Feedback correction: comfortable proportions on large displays. */
@media (min-width: 1200px) {
 #MainContent .page-width, #MainContent .zv-capsule-container, #MainContent .zv-lookbook-container, #MainContent .zv-proof-container, #MainContent .zv-philosophy-container { max-width: 1600px !important; }
 #MainContent .product-card-wrapper .product__title { font-size: 16px !important; line-height: 1.4 !important; }
 #MainContent .product-card-wrapper .price-item--sale { font-size: 18px !important; }
 #MainContent .zv-card-heading, #MainContent .zv-garment-title { font-size: 17px !important; line-height: 1.4 !important; }
 #MainContent .zv-card-price, #MainContent .zv-garment-price { font-size: 18px !important; }
 #MainContent .zv-garment-role, #MainContent .zv-summary-label { font-size: 12px !important; }
}
@media (min-width: 1480px) {
 .header__container { max-width: 1640px !important; }
 .header__inline-menu > .list-menu > li > a, .header__inline-menu > .list-menu > li > details > summary { font-size: 15px !important; }
}
#MainContent .zv-lookbook-section a.zv-summary-cta,
#MainContent .zv-lookbook-section a.zv-summary-cta:visited {
 color: #FAF8F5 !important; -webkit-text-fill-color: #FAF8F5 !important; background: #241B16 !important;
 font-size: 13px !important; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
#MainContent .zv-lookbook-section a.zv-summary-cta:hover { background: #64472F !important; }

#MainContent .zv-fbt-item-title, #MainContent .zv-fbt-item-title-link { font-size: 13.5px !important; line-height: 1.38 !important; height: auto !important; min-height: 2.76em; }
#MainContent .zv-fbt-select { font-size: 13px !important; min-height: 42px; }
#MainContent [id^="zv-fbt-price-"] { font-size: 16px !important; }

/* Round-2 Fix: Enlarge Featured Collection View-All Button & Lock Light-on-Dark Contrast */
.featured-collection .collection__view-all a,
.featured-collection .collection__view-all .button,
.featured-collection .view-more-btn,
.featured-collection .center .button {
  min-height: 48px !important;
  padding: 0 32px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 7px !important;
  background-color: #241B16 !important;
  color: #FAF8F5 !important;
  -webkit-text-fill-color: #FAF8F5 !important;
  border: 1px solid #241B16 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
.featured-collection .collection__view-all a:hover,
.featured-collection .collection__view-all .button:hover,
.featured-collection .view-more-btn:hover,
.featured-collection .center .button:hover {
  background-color: #8C6239 !important;
  border-color: #8C6239 !important;
  color: #FAF8F5 !important;
  -webkit-text-fill-color: #FAF8F5 !important;
}
.zv-cross-reason-tag {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   5. QUICK-ADD MODAL & COLLECTION FACETS WARM EDITORIAL POLISH (v2.4)
   ========================================================================== */
.product-quick-modal__main {
  background: #FAF8F5 !important;
  border: 1px solid #E6DEC8 !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(36, 27, 22, 0.22) !important;
}
.product-quick-modal__close-btn {
  background: #F4EFEA !important;
  color: #241B16 !important;
  border: 1px solid #DFD3C3 !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.product-quick-modal__close-btn:hover {
  background: #241B16 !important;
  color: #FAF8F5 !important;
  border-color: #241B16 !important;
}
/* Keep Quick-Add Modal focused on fast variant selection + single Add to Cart */
product-quick-add-modal .zv-fbt-wrapper,
product-quick-add-modal .zv-bundle-tiers,
product-quick-add-modal .zv-unified-assurance-card,
product-quick-view-modal .zv-fbt-wrapper {
  display: none !important;
}

/* Collection Page Header & Filter Bar Polish */
.collection-hero {
  background: linear-gradient(180deg, #F4EFEA 0%, #FAF8F5 100%) !important;
  border-bottom: 1px solid #EAE3D9 !important;
  padding: 28px 0 22px !important;
}
.collection-hero__title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(28px, 2.8vw, 42px) !important;
  font-weight: 600 !important;
  color: #241B16 !important;
  letter-spacing: -0.015em !important;
}
.facets__summary,
.facets__SortBy select,
.mobile-facets__open {
  background: #FFFFFF !important;
  border: 1px solid #DFD3C3 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  color: #241B16 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.facets__summary:hover,
.mobile-facets__open:hover {
  border-color: #8C6239 !important;
  box-shadow: 0 3px 10px rgba(36, 27, 22, 0.06) !important;
}

/* "Save$77.00" -> "Save $77.00": the platform translation string has no space before the amount */
.price-item--save > .notranslate {
  margin-left: 0.25em;
}
/* Dark-on-hover controls: the global a:hover / button colour can otherwise win and leave dark text
   on the dark hover background (seen on the homepage category chips). Force light text on every
   control whose hover background is dark, for mouse hover and keyboard focus alike. */
.zv-proof-view-all:hover, .zv-proof-view-all:focus-visible,
.zv-footer-newsletter-btn:hover, .zv-footer-newsletter-btn:focus-visible,
.zv-cross-add-btn:hover, .zv-cross-add-btn:focus-visible,
.zv-empty-continue-btn:hover, .zv-empty-continue-btn:focus-visible,
.main-search__submit-button:hover, .main-search__submit-button:focus-visible,
.mobile-facets__footer .facets-js-confirm:hover,
.drawer-curated-chip:hover, .drawer-curated-chip:focus-visible,
.zv-search-pill:hover, .zv-search-pill:focus-visible,
.zv-pill:hover, .zv-pill:focus-visible,
#MainContent .zv-lookbook-section a.zv-summary-cta:hover,
#MainContent .zv-lookbook-section a.zv-summary-cta:focus-visible,
.button.button--primary:hover, .product-form__submit:hover, .btn-primary:hover,
.card__bottom-actions .button:hover, .zv-floating-add-btn:hover {
  color: #FAF8F5 !important;
}
.zv-proof-view-all:hover *, .zv-footer-newsletter-btn:hover *, .zv-cross-add-btn:hover *,
.zv-empty-continue-btn:hover *, .drawer-curated-chip:hover *, .zv-search-pill:hover *, .zv-pill:hover *,
#MainContent .zv-lookbook-section a.zv-summary-cta:hover * {
  color: inherit !important;
}
/* Very large displays (2200px+, e.g. 2560 monitors or a zoomed-out 1920 browser): the 1600px cap left
   wide empty margins and made everything read small, so widen the column and nudge type up. */
@media (min-width: 2200px) {
  #MainContent .page-width, #MainContent .zv-capsule-container, #MainContent .zv-lookbook-container,
  #MainContent .zv-proof-container, #MainContent .zv-philosophy-container, #MainContent .zv-pdp,
  #MainContent .complete-the-look, #MainContent .zv-trust-bar { max-width: 1880px !important; }
  .header__container { max-width: 1920px !important; }
  .zv-footer-container { max-width: 1640px !important; }
  #MainContent .product-card-wrapper .product__title, #MainContent .zv-card-heading,
  #MainContent .zv-garment-title, .zv-rec-title { font-size: 18px !important; }
  #MainContent .product-card-wrapper .price-item--sale, #MainContent .zv-card-price,
  #MainContent .zv-garment-price, .zv-rec-sale { font-size: 20px !important; }
  .header__inline-menu > .list-menu > li > a,
  .header__inline-menu > .list-menu > li > details > summary { font-size: 16px !important; }
}
/* Narrow slider cards squeezed the save pill into "Sav / e" — keep it on one line */
.price-item--save {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
/* "New In" rows swipe sideways on phones with plain CSS scroll-snap instead of the theme's splide
   slider, which cost an extra 64KB script on the homepage. Desktop keeps the normal 4-column grid. */
@media (max-width: 959px) {
  .featured-collection-new ul.product-grid:not(.splide__list) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    padding: 0 16px 6px !important;
    margin: 0 -16px !important;
    scrollbar-width: none;
  }
  .featured-collection-new ul.product-grid:not(.splide__list)::-webkit-scrollbar { display: none; }
  .featured-collection-new ul.product-grid:not(.splide__list) > li {
    flex: 0 0 44% !important;
    max-width: 44% !important;
    width: 44% !important;
    scroll-snap-align: start;
  }
}
/* With the mobile slider enabled, the tabbed collection's list keeps its -30px slider margins on
   desktop and pokes 6px past the viewport at ~1440px (a stray horizontal scrollbar). Clip it. */
@media (min-width: 960px) {
  .featured-collection.section-padding { overflow-x: clip; }
}
/* The logo PNG has a baked-in white background that showed as a white box on the warm header.
   multiply drops the white into the header colour and leaves the black wordmark untouched. */
.header__heading-logo,
.header__heading-link img,
.menu-drawer__logo img {
  mix-blend-mode: multiply;
}
/* Header injected into the quick-add sheet (zv-shopping.js): which product you're choosing for */
.zv-quick-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 52px 14px 0;
  margin-bottom: 14px;
  border-bottom: 1px solid #E8E4DC;
  color: #1C1917 !important;
  text-decoration: none !important;
}
.zv-quick-head img {
  width: 56px;
  height: 75px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
  background: #EDE6DD;
}
.zv-quick-head strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.zv-quick-head em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12.5px;
  color: #6B5D52;
}