/** Shopify CDN: Minification failed

Line 314:0 All "@import" rules must come first

**/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ======================================================
THE VINESCAPE
Launch Timer
======================================================*/

:root{
    --black:#c49545;
    --white:#ffffff;
    --gold:#B89652;
    --red:#2f0914;
    --border:#E9E9E9;
}

/* =============================
SECTION
============================= */

.vs-launch-timer{
    background:#ffffff;
    padding: 0 0 20px 0 !important; /* Decreased bottom padding to tighten space below button */
    overflow:hidden;
}

/* =============================
MARQUEE
============================= */

.vs-marquee{
    border: none !important;
    background-color: #f5ece3 !important; /* Warm Ivory background */
    padding: 12px 0 !important;
    overflow:hidden;
}

.vs-marquee__content{
    display:flex;
    width:max-content;
    animation:marquee 320s linear infinite !important; /* Slower speed */
}

.vs-marquee__content span {
    margin-right:80px !important;
    font-family: 'Inter', sans-serif !important;
    font-size:13px !important; /* Clean premium size */
    text-transform:uppercase !important;
    letter-spacing:0.18em !important; /* Tighter elegant spacing */
    color:#2f0914 !important; /* Deep Wine color */
    white-space:nowrap !important;
    font-weight:500 !important;
}

@keyframes marquee{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
}

/* =============================
CONTENT
============================= */

.vs-launch-wrapper{
    max-width:1200px;
    margin:0 auto;
    padding:40px 20px 10px !important; /* Decreased bottom padding to tighten space below button */
    text-align:center;
}

.vs-launch-subtitle{
    font-family: 'Inter', sans-serif !important;
    color:#2f0914 !important; /* Deep Wine color */
    letter-spacing:0.22em !important; /* Elegant wide spacing */
    text-transform:uppercase !important;
    font-size:15px !important; /* Increased subtitle font size */
    font-weight:500 !important;
    margin-top:20px !important;
    margin-bottom:35px !important;
    line-height:1.4 !important;
}

.vs-launch-title{
    display: none !important; /* Removed text header */
}

/* =============================
COUNTDOWN
============================= */

.vs-countdown{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:35px !important; /* Reduced bottom margin to tighten layout */
}

/* Monaco style: no cards — open numerals with thin vertical dividers */
.vs-time-box{
    width:200px !important;
    flex: 0 0 auto;
    border:none !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:transparent !important;
    box-sizing: border-box !important;
}

.vs-time-box span{
    font-family: 'Playfair Display', serif !important; /* Elegant serif numerals */
    font-size:86px !important; /* 105px reduced by 18% */
    font-weight:400 !important; /* Light serif styling */
    color:#2f0914 !important; /* Deep Wine color */
    line-height:1;
}

.vs-time-box small{
    margin-top:18px !important;
    color:#2f0914 !important;
    opacity: 0.8 !important;
    font-size:17px !important;
    letter-spacing:0.01em !important;
    text-transform: lowercase !important;
}

/* Separator ":" rendered as a thin vertical divider line */
.vs-separator{
    font-size:0 !important; /* Hides the ":" glyph */
    width:1px !important;
    height:190px !important;
    background:rgba(47, 9, 20, 0.15) !important;
    flex: 0 0 auto;
    align-self:center;
}

/* =============================
BUTTON
============================= */

.vs-btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:16px 48px !important; /* Spacious block styling */
    border-radius:0px !important; /* Sharp corners like Monaco button */
    background:#2f0914 !important; /* Deep Wine color */
    color:#ffffff !important;
    text-decoration:none;
    font-size:12px !important;
    letter-spacing:0.2em !important;
    text-transform: uppercase !important;
    font-weight:500 !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border: 1px solid #2f0914 !important;
    margin-bottom: 0px !important; /* Tighten bottom space */
    cursor: pointer;
}

.vs-btn:hover{
    background:transparent !important;
    color:#2f0914 !important; /* Transparent outline swap */
}

/* =============================
TABLET / COMPACT DESKTOP
============================= */

@media (max-width: 1100px) {
  .vs-time-box {
    width: 140px !important;
  }

  .vs-time-box span {
    font-size: 64px !important;
  }

  .vs-separator {
    height: 120px !important;
  }

  .vs-countdown {
    gap: 16px;
  }
}

/* =============================
MOBILE — keep countdown in one horizontal row
============================= */

@media (max-width: 768px) {
  .vs-launch-timer {
    padding: 16px 0 20px !important;
  }

  .vs-launch-wrapper {
    padding: 20px 12px 24px !important;
  }

  .vs-launch-subtitle {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
    padding: 0 8px !important;
  }

  .vs-launch-title {
    font-size: 42px;
    margin-bottom: 25px;
  }

  /* 4 units side-by-side; button full-width under them */
  .vs-countdown {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    row-gap: 18px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  .vs-time-box {
    /* 4 boxes fit on ~320px: ~18vw each with small gaps */
    width: clamp(58px, 18vw, 78px) !important;
    height: clamp(58px, 18vw, 78px) !important;
    flex: 0 0 clamp(58px, 18vw, 78px) !important;
    max-width: 78px !important;
    min-width: 0 !important;
    padding: 4px !important;
  }

  .vs-time-box:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .vs-time-box span {
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1 !important;
  }

  .vs-time-box small {
    font-size: 8px !important;
    letter-spacing: 0.08em !important;
    margin-top: 4px !important;
  }

  /* Hide colons on small screens to free width */
  .vs-separator {
    display: none !important;
  }

  /* Button on its own row under the timer */
  .vs-countdown .vs-btn,
  .vs-btn {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }

  .vs-marquee {
    padding: 10px 0 !important;
  }

  .vs-marquee__content span {
    margin-right: 28px !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .vs-time-box {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
  }

  .vs-time-box span {
    font-size: 20px !important;
  }

  .vs-time-box small {
    font-size: 7px !important;
    letter-spacing: 0.04em !important;
  }

  .vs-countdown {
    gap: 4px !important;
  }
}

/* ======================================================
VINESCAPE TYPOGRAPHY
====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root{

    --vs-body:'Inter',sans-serif;

    --vs-heading:'Cormorant Garamond',serif;

}

/* ======================================================
GLOBAL TYPOGRAPHY
====================================================== */

body{

    font-family:var(--vs-body);

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

h1,
h2,
h3,
h4,
h5{

    font-family:var(--vs-heading);

    font-weight:600;

    letter-spacing:-0.02em;

}

a{

    transition:.35s ease;

}

/* ======================================================
HERO BANNER - MONACO CUSTOMIZATION
====================================================== */

#Hero-hero_jVaWmY {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#Hero-hero_jVaWmY .hero__content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
}

/* Center all child blocks */
#Hero-hero_jVaWmY .text-block,
#Hero-hero_jVaWmY .text-block > * {
  text-align: center !important;
  align-items: center !important;
  margin-inline: auto !important;
}

/* Hero Title typography styling like Monaco */
#Hero-hero_jVaWmY .text-block h1,
#Hero-hero_jVaWmY .text-block h2,
#Hero-hero_jVaWmY .text-block p {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(38px, 6vw, 78px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 25px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Monaco Style Button - Wildcard Overrides to force styling */
#Hero-hero_jVaWmY a[class*="button"],
#Hero-hero_jVaWmY button,
#Hero-hero_jVaWmY .button,
#Hero-hero_jVaWmY .button-custom,
.button-custom--button_H9gpTf,
.btn-monaco {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #ffffff !important; /* solid white */
  color: #111111 !important; /* dark text */
  border: 1px solid #ffffff !important;
  padding: 16px 42px !important;
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  border-radius: 0px !important; /* Sharp corners */
  transition: all 0.4s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;

  /* Force variables to override inline theme settings */
  --button-background-color: #ffffff !important;
  --button-color: #111111 !important;
  --button-border-color: #ffffff !important;
  --button-border-radius: 0px !important;
  --style-border-radius-buttons-primary: 0px !important;
}

#Hero-hero_jVaWmY a[class*="button"]:hover,
#Hero-hero_jVaWmY button:hover,
#Hero-hero_jVaWmY .button:hover,
#Hero-hero_jVaWmY .button-custom:hover,
.button-custom--button_H9gpTf:hover,
.btn-monaco:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;

  /* Force hover variables */
  --button-background-color: transparent !important;
  --button-color: #ffffff !important;
  --button-border-color: #ffffff !important;
}


/* ======================================================
NAVBAR - MONACO DYNAMIC TRANSPARENT HEADER REWORK
====================================================== */

/*
  Overlay header: always fixed so it never depends on theme sticky IO.
  Solid background is driven by .vs-scrolled (scrollY) OR :hover/:focus-within
  (theme underlay paints white on header hover — we must flip text to dark then).
*/
#header-component {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.25s ease, transform 0.35s ease !important;
    border-bottom: 1px solid transparent !important;
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Hide on scroll down, reveal on scroll up (class toggled by vinescape.js) */
#header-component.vs-header-hidden {
    transform: translateY(-100%) !important;
    pointer-events: none !important;
}

/* Keep open drawers (cart, etc.) above the fixed header's z-index: 100.
   Base theme puts drawers at ~layer-sticky(8)+stack-order, which our header override buried. */
theme-drawer[open] .theme-drawer__dialog {
    z-index: calc(101 + var(--drawer-stack-order, 0)) !important;
}

/* Shared solid surface (scrolled OR header hover at top) */
#header-component.vs-scrolled,
#header-component:not(.vs-scrolled):hover,
#header-component:not(.vs-scrolled):focus-within {
    background-color: rgba(255, 255, 255, 0.98) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.03) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* STATE 1: True idle top-of-page only — no scroll, no hover */
#header-component:not(.vs-scrolled):not(:hover):not(:focus-within) {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* HOME: white text/logo only while truly transparent (not hovered, not scrolled) */
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) h1,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) h2,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) p,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) a,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) span,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) summary,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) svg,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) .menu-list__link-title,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) .account-button__text,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) cart-icon span,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) .search-action button span {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) svg {
    fill: none !important;
}

body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):not(:hover):not(:focus-within) .header-logo__image {
    filter: brightness(0) invert(1) !important;
}

/* Non-home idle: dark text on transparent (over light page content) */
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) h1,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) h2,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) p,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) a,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) span,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) summary,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) svg,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .menu-list__link-title,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .account-button__text,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) cart-icon span,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .search-action button span {
    color: #111111 !important;
    stroke: #111111 !important;
}

body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) svg {
    fill: none !important;
}

body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .header-logo__image {
    filter: none !important;
}

/* Solid surface text/logo (scrolled OR hovered header) — dark for contrast on white */
#header-component.vs-scrolled h1,
#header-component.vs-scrolled h2,
#header-component.vs-scrolled p,
#header-component.vs-scrolled a,
#header-component.vs-scrolled span,
#header-component.vs-scrolled summary,
#header-component.vs-scrolled svg,
#header-component.vs-scrolled .menu-list__link-title,
#header-component.vs-scrolled .account-button__text,
#header-component.vs-scrolled cart-icon span,
#header-component.vs-scrolled .search-action button span,
#header-component:not(.vs-scrolled):hover h1,
#header-component:not(.vs-scrolled):hover h2,
#header-component:not(.vs-scrolled):hover p,
#header-component:not(.vs-scrolled):hover a,
#header-component:not(.vs-scrolled):hover span,
#header-component:not(.vs-scrolled):hover summary,
#header-component:not(.vs-scrolled):hover svg,
#header-component:not(.vs-scrolled):hover .menu-list__link-title,
#header-component:not(.vs-scrolled):hover .account-button__text,
#header-component:not(.vs-scrolled):hover cart-icon span,
#header-component:not(.vs-scrolled):hover .search-action button span,
#header-component:not(.vs-scrolled):focus-within h1,
#header-component:not(.vs-scrolled):focus-within h2,
#header-component:not(.vs-scrolled):focus-within p,
#header-component:not(.vs-scrolled):focus-within a,
#header-component:not(.vs-scrolled):focus-within span,
#header-component:not(.vs-scrolled):focus-within summary,
#header-component:not(.vs-scrolled):focus-within svg,
#header-component:not(.vs-scrolled):focus-within .menu-list__link-title,
#header-component:not(.vs-scrolled):focus-within .account-button__text,
#header-component:not(.vs-scrolled):focus-within cart-icon span,
#header-component:not(.vs-scrolled):focus-within .search-action button span {
    color: #111111 !important;
    stroke: #111111 !important;
}

#header-component.vs-scrolled svg,
#header-component:not(.vs-scrolled):hover svg,
#header-component:not(.vs-scrolled):focus-within svg {
    fill: none !important;
}

#header-component.vs-scrolled .header-logo__image,
#header-component:not(.vs-scrolled):hover .header-logo__image,
#header-component:not(.vs-scrolled):focus-within .header-logo__image {
    filter: none !important;
}

/* Kill theme underlay “flash white” fighting our colors; we own the surface paint */
#header-component .header__underlay-closed,
#header-component .header__underlay-open {
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Kill theme sibling-dimming — non-hovered items looked like they disappeared */
@media (hover: hover) {
  #header-component .header__column:has(header-menu:hover) header-menu:not(:hover),
  #header-component .header__column:has(.header-actions__action:hover) .header-actions__action:not(:hover),
  #header-component .header__column:has(.header__icon--menu:hover) .header__icon--menu:not(:hover),
  #header-component header-menu,
  #header-component .header-actions__action,
  #header-component .header__icon--menu,
  #header-component search-button,
  #header-component .search-action,
  #header-component cart-icon,
  #header-component .account-button {
    opacity: 1 !important;
  }
}

/* Offset main content wrapper to prevent header overlap on templates without hero banners */
body:not(.template-index):not(.template-collection) #MainContent {
    padding-top: 85px !important; /* Pushes content down so it starts exactly below the absolute header! */
}

/* Logo Sizing (Clean elegance) */
.header-logo__image {
    max-height: 38px !important; /* Monaco compact size logo height increased */
    transition: filter 0.3s ease, transform 0.4s ease !important;
}

/*
  Item hover: gold accent on the active control only.
  Specificity must beat white/black state rules above.
*/
#header-component a:hover,
#header-component a:hover span,
#header-component a:hover svg,
#header-component .menu-list__link:hover,
#header-component .menu-list__link:hover .menu-list__link-title,
#header-component .menu-list__link:hover span,
#header-component .header-actions__action:hover,
#header-component .header-actions__action:hover span,
#header-component .header-actions__action:hover svg,
#header-component .account-button:hover,
#header-component .account-button:hover span,
#header-component .account-button:hover svg,
#header-component .search-action button:hover,
#header-component .search-action button:hover span,
#header-component .search-action button:hover svg,
#header-component cart-icon:hover,
#header-component cart-icon:hover > span,
#header-component cart-icon:hover svg,
#header-component.vs-scrolled a:hover,
#header-component.vs-scrolled a:hover span,
#header-component.vs-scrolled .menu-list__link:hover .menu-list__link-title,
#header-component.vs-scrolled .header-actions__action:hover,
#header-component.vs-scrolled .header-actions__action:hover span,
#header-component.vs-scrolled .account-button:hover,
#header-component.vs-scrolled .account-button:hover span,
#header-component.vs-scrolled .search-action button:hover,
#header-component.vs-scrolled .search-action button:hover span,
#header-component.vs-scrolled cart-icon:hover,
#header-component.vs-scrolled cart-icon:hover > span,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover a:hover,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover a:hover span,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover .menu-list__link:hover .menu-list__link-title,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover .header-actions__action:hover,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover .header-actions__action:hover span,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover .account-button:hover,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover .account-button:hover span,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover .search-action button:hover,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover .search-action button:hover span,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover cart-icon:hover,
body:is(.template-index, .template-collection) #header-component:not(.vs-scrolled):hover cart-icon:hover > span,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) a:hover,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) a:hover span,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) a:hover svg,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .menu-list__link:hover .menu-list__link-title,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .header-actions__action:hover span,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .header-actions__action:hover svg,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .account-button:hover span,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .account-button:hover svg,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .search-action button:hover span,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) .search-action button:hover svg,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) cart-icon:hover > span,
body:not(.template-index):not(.template-collection) #header-component:not(.vs-scrolled) cart-icon:hover svg {
    color: #c49545 !important;
    stroke: #c49545 !important;
    opacity: 1 !important;
}

/* Do not fade the whole control on hover — that looked like “disappear” */
#header-component .search-action button:hover,
#header-component .account-button:hover,
#header-component cart-icon:hover,
#header-component .header-actions__action:hover {
    opacity: 1 !important;
}

/* 1. Spacing & layout gaps between header items (desktop menu only) */
.menu-list__list {
    display: flex !important;
    gap: 36px !important;
    align-items: center !important;
}

header-actions,
.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CRITICAL: only force column flex on desktop.
   Mobile / drawer mode needs display:contents so children can
   participate in the 5-slot mobile grid (hamburger | search | logo | account | cart). */
@media screen and (min-width: 750px) {
  #header-component[data-menu-style='menu'] .header__column--right {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }
}

/* Restore theme mobile/drawer grid when columns must flatten */
@media screen and (max-width: 749px) {
  #header-component .header__column,
  #header-component .header__column--left,
  #header-component .header__column--center,
  #header-component .header__column--right {
    display: contents !important;
  }
}

#header-component[data-menu-style='drawer'] .header__column,
#header-component[data-menu-style='drawer'] .header__column--left,
#header-component[data-menu-style='drawer'] .header__column--center,
#header-component[data-menu-style='drawer'] .header__column--right {
  display: contents !important;
}

/* Remove duplicate search option on the left (desktop only) */
@media screen and (min-width: 750px) {
  #header-component[data-menu-style='menu'] .header__column--left .search-action,
  #header-component[data-menu-style='menu'] .header__column--left search-button {
    display: none !important;
  }
}

/* 2. Style each action item and button uniformly */
.header-actions__action,
.account-button,
.search-action,
.action__cart,
.search-action button,
cart-icon,
shopify-account {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* 3. Typography — desktop text labels */
.menu-list__link-title,
.header-actions__action span,
.account-button__text,
cart-icon > span,
.search-action button > span,
.header-actions__text-style,
.header-actions__text-style span,
.header-actions__cart-icon span,
.header-actions__action,
.cart-bubble,
.cart-bubble__text,
.cart-bubble__text-count {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease !important;
}

/* Underline link effect (desktop nav only) */
.menu-list__link {
    position: relative !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Anchor the underline to the text span, not the full-height link,
   so it hugs the text like the CART underline */
.menu-list__link .menu-list__link-title {
    position: relative !important;
}

.menu-list__list-item:not([slot='overflow']) .menu-list__link-title {
    padding-inline: 0 !important;
    margin-inline: calc(var(--gap-xl) / 2) !important;
}

.menu-list__link .menu-list__link-title::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    width: 0 !important;
    height: 1px !important;
    background-color: currentColor !important;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), left 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.menu-list__link:hover .menu-list__link-title::before {
    width: 100% !important;
    left: 0 !important;
}

/* 4. Search control */
.search-action button {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    gap: 8px !important; /* Same gap as the Home icon + text */
}

/* Theme's .svg-wrapper has a fixed touch-target size that bloats the icon/text gap */
.search-action button .svg-wrapper {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.search-action button svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 1.5px !important;
    fill: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Hover underline on right-side actions, matching the nav links */
.search-action button,
.account-button__text,
#header-component cart-icon {
    position: relative !important;
}

.search-action button::before,
.account-button__text::before,
#header-component cart-icon::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    width: 0 !important;
    height: 1px !important;
    background-color: currentColor !important;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), left 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.search-action button:hover::before,
.account-button:hover .account-button__text::before,
#header-component cart-icon:hover::before {
    width: 100% !important;
    left: 0 !important;
}

/* 5. Desktop: text-only Account/Cart (Monaco). Mobile/drawer: icons only. */
@media screen and (min-width: 750px) {
  #header-component[data-menu-style='menu'] .account-button .svg-wrapper,
  #header-component[data-menu-style='menu'] .account-button svg,
  #header-component[data-menu-style='menu'] .account-button__icon,
  #header-component[data-menu-style='menu'] cart-icon .svg-wrapper,
  #header-component[data-menu-style='menu'] cart-icon svg {
    display: none !important;
  }

  /* Inline CART (0) label style on desktop */
  #header-component[data-menu-style='menu'] .cart-bubble__background {
    display: none !important;
  }

  #header-component[data-menu-style='menu'] cart-icon {
    gap: 4px !important;
  }

  #header-component[data-menu-style='menu'] .cart-bubble {
    background: transparent !important;
    position: static !important;
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: unset !important;
    width: auto !important; /* theme snippet forces width:20px + aspect-ratio:1 — "(0)" wraps inside it */
    aspect-ratio: auto !important;
    white-space: nowrap !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
  }

  #header-component[data-menu-style='menu'] .cart-bubble__text {
    position: static !important;
    display: inline-flex !important;
  }

  /* Empty cart: bubble stays visually-hidden — label reads just "CART".
     Non-empty: count in a small gold badge instead of brackets. */
  #header-component[data-menu-style='menu'] .cart-bubble:not(.visually-hidden) {
    background: var(--gold) !important;
    border-radius: 999px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Doubled id beats the gold hover rules — the badge number stays white on hover */
  #header-component#header-component .cart-bubble:not(.visually-hidden) .cart-bubble__text-count {
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  /* Hide hamburger when full desktop menu is shown */
  #header-component[data-menu-style='menu'] .header__drawer,
  #header-component[data-menu-style='menu'] .menu-drawer-container,
  #header-component[data-menu-style='menu'] .header__icon--menu {
    display: none !important;
  }

  header-actions,
  .header-actions {
    gap: 25px !important;
  }

  .header-actions__action,
  .account-button,
  .search-action button,
  cart-icon {
    padding: 8px 10px !important;
  }
}

/* 6. Mobile + drawer: compact icon header that fits narrow viewports */
@media screen and (max-width: 749px) {
  #header-component .header__drawer,
  #header-component .menu-drawer-container,
  #header-component .header__icon--menu,
  #header-component header-drawer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-area: leftA;
  }

  #header-component .header-logo {
    grid-area: center !important;
    justify-self: center !important;
    max-width: min(52vw, 180px) !important;
  }

  #header-component .header-logo__image {
    max-height: 28px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  #header-component .search-action {
    grid-area: leftB !important;
  }

  #header-component header-actions {
    grid-area: rightB !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  /* Icon-only actions — hide verbose text labels */
  #header-component .account-button__text,
  #header-component cart-icon > span:not(.svg-wrapper):not(.cart-bubble),
  #header-component .header-actions__cart-icon > span:not(.svg-wrapper):not(.cart-bubble) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #header-component .account-button .svg-wrapper,
  #header-component .account-button svg,
  #header-component .account-button__icon,
  #header-component cart-icon .svg-wrapper,
  #header-component cart-icon svg {
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
  }

  #header-component .search-action button {
    flex-direction: row !important;
    gap: 0 !important;
    padding: 10px !important;
  }

  #header-component .header-actions__action,
  #header-component .account-button,
  #header-component cart-icon {
    padding: 10px 8px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Cart count as badge over icon (not "CART (0)" text) */
  #header-component .header-actions__cart-icon {
    position: relative !important;
  }

  #header-component cart-icon .cart-bubble,
  #header-component .cart-bubble,
  #header-component .cart-bubble span,
  #header-component .cart-bubble__text,
  #header-component .cart-bubble__text-count {
    position: absolute !important;
    top: -2px !important;
    right: -4px !important;
    margin: 0 !important;
    background-color: #2f0914 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    border-radius: 50% !important;
    min-width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    z-index: 2 !important;
    padding: 0 !important;
  }

  #header-component .cart-bubble span,
  #header-component .cart-bubble__text,
  #header-component .cart-bubble__text-count {
    position: static !important;
    min-width: 0 !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    color: #ffffff !important;
  }

  #header-component .cart-bubble__text-count::before,
  #header-component .cart-bubble__text-count::after {
    content: none !important;
  }

  #header-component .cart-bubble__background {
    display: none !important;
  }

  #header-component .header__columns {
    padding-inline: 4px 6px !important;
    column-gap: 0 !important;
  }
}

/* Drawer mode on tablet/desktop (touch / overflow) — same compact treatment */
#header-component[data-menu-style='drawer'] .header__drawer,
#header-component[data-menu-style='drawer'] .menu-drawer-container,
#header-component[data-menu-style='drawer'] .header__icon--menu,
#header-component[data-menu-style='drawer'] header-drawer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-area: leftA;
}

#header-component[data-menu-style='drawer'] .header-logo {
  grid-area: center !important;
  justify-self: center !important;
}

#header-component[data-menu-style='drawer'] .search-action {
  grid-area: leftB !important;
}

#header-component[data-menu-style='drawer'] header-actions {
  grid-area: rightB !important;
  gap: 4px !important;
}

#header-component[data-menu-style='drawer'] .account-button__text,
#header-component[data-menu-style='drawer'] cart-icon > span:not(.svg-wrapper):not(.cart-bubble) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#header-component[data-menu-style='drawer'] .account-button .svg-wrapper,
#header-component[data-menu-style='drawer'] .account-button svg,
#header-component[data-menu-style='drawer'] cart-icon .svg-wrapper,
#header-component[data-menu-style='drawer'] cart-icon svg {
  display: inline-flex !important;
  width: 20px !important;
  height: 20px !important;
}

#header-component[data-menu-style='drawer'] cart-icon .cart-bubble,
#header-component[data-menu-style='drawer'] .cart-bubble {
  position: absolute !important;
  top: -2px !important;
  right: -4px !important;
  margin: 0 !important;
  background-color: #2f0914 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
  border-radius: 50% !important;
  min-width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  padding: 0 !important;
}

#header-component[data-menu-style='drawer'] .cart-bubble span,
#header-component[data-menu-style='drawer'] .cart-bubble__text,
#header-component[data-menu-style='drawer'] .cart-bubble__text-count {
  position: static !important;
  min-width: 0 !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  letter-spacing: 0 !important;
}

#header-component[data-menu-style='drawer'] .cart-bubble__text-count::before,
#header-component[data-menu-style='drawer'] .cart-bubble__text-count::after {
  content: none !important;
}

.header__icon--menu svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 1.5px !important;
    fill: none !important;
}

/* Hover effect on action buttons */
/* Header action hover opacity intentionally not reduced (see gold hover rules above). */


.header-actions__action,
.account-button,
.search-action button,
cart-icon {
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  min-width: unset !important;
  min-height: unset !important;
  cursor: pointer !important;
}

/* Cart icon positioning base */
.header-actions__cart-icon {
  position: relative !important;
}

/* Header: Home menu item rendered as house icon + text */
.menu-list__link-title--home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.menu-list__home-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
}

/* ======================================================
/* ======================================================
THE VINESCAPE - BRAND GUIDELINE FOOTER (CUSTOM CODE v4 - MONACO BALANCED)
====================================================== */

#shopify-section-footer_m9NzUG,
.vs-premium-footer {
  background-color: #2B0A18 !important; /* Luxury deep wine — swap to #1a1a1a for charcoal */
  color: #F6F1EA !important;
  padding: 45px 80px 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: 'Inter', 'Montserrat', sans-serif !important;
}

/* Centered brand header above divider */
.vs-footer-brand {
  text-align: center !important;
  padding-bottom: 38px !important;
  border-bottom: 1px solid rgba(246, 241, 234, 0.1) !important;
  margin-bottom: 45px !important;
}

.vs-footer-brand-title {
  font-family: 'Playfair Display', 'Didot', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: #F6F1EA !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.vs-footer-brand-title__top {
  font-size: 18px !important;
  letter-spacing: 0.22em !important;
  text-indent: 0.22em !important; /* Recenters the tracked text */
}

.vs-footer-brand-title__main {
  font-size: clamp(30px, 4vw, 46px) !important;
  letter-spacing: 0.12em !important;
  text-indent: 0.12em !important;
}

.vs-footer-top {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr !important;
  column-gap: 60px !important;
  row-gap: 40px !important;
  border-bottom: 1px solid rgba(246, 241, 234, 0.1) !important;
  padding-bottom: 60px !important;
  text-align: left !important;
}

/* Newsletter feature column */
.vs-footer-newsletter-heading {
  margin: 0 0 25px 0 !important;
  line-height: 1.15 !important;
}

.vs-footer-newsletter-heading span {
  display: block !important;
}

.vs-footer-newsletter-heading-line1 {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

.vs-footer-newsletter-heading-line2 {
  font-family: 'Playfair Display', 'Didot', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 400 !important;
  color: #F6F1EA !important;
}

.vs-footer-newsletter-text {
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: rgba(246, 241, 234, 0.75) !important;
  margin: 0 0 30px 0 !important;
  max-width: 420px !important;
}

.vs-footer-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.vs-footer-section-title {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 12px !important; /* Small clean uppercase headers */
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #ffffff !important; /* Pure white headers for contrast */
  margin: 0 0 25px 0 !important;
  line-height: 1.2 !important;
}

.vs-footer-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.vs-footer-menu a {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(246, 241, 234, 0.7) !important; /* Subdued ivory for premium look */
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
  transition: color 0.25s ease, padding-left 0.25s ease !important;
}

.vs-footer-menu a:hover {
  color: #B89652 !important; /* Highlights gold on hover */
  padding-left: 4px !important;
}

/* Contact Details */
.vs-footer-contact-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

.vs-footer-contact-item {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(246, 241, 234, 0.7) !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.vs-footer-contact-item:hover {
  color: #B89652 !important;
}

/* Newsletter styling — boxed input + block JOIN button (Monaco style) */
.vs-footer-newsletter-wrap {
  width: 100% !important;
  max-width: 400px !important;
}

.vs-footer-newsletter-form {
  width: 100% !important;
  margin: 0 !important;
}

.vs-footer-email-input-reference {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 1px solid rgba(246, 241, 234, 0.35) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  padding: 18px 20px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.vs-footer-email-input-reference:focus {
  border-color: rgba(246, 241, 234, 0.7) !important;
}

.vs-footer-email-input-reference::placeholder {
  color: rgba(246, 241, 234, 0.45) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.vs-footer-email-submit-reference {
  display: block !important;
  width: 100% !important;
  background: #F6F1EA !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  cursor: pointer !important;
  padding: 17px 20px !important;
  margin-top: 12px !important;
  transition: background 0.25s ease !important;
}

.vs-footer-email-submit-reference:hover {
  background: #ffffff !important;
}

.vs-newsletter-success {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  color: #B89652 !important;
  margin-top: 10px !important;
}

.vs-newsletter-error {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  color: #E22D28 !important;
  margin-top: 10px !important;
}

.vs-footer-consent {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  color: rgba(246, 241, 234, 0.55) !important;
  line-height: 1.5 !important;
  margin-top: 18px !important;
}

/* Footer Bottom Copyright & Actions */
.vs-footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 40px !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.vs-footer-promo {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #F6F1EA !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.vs-footer-copyright {
  font-family: 'Inter', 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  color: rgba(246, 241, 234, 0.5) !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* Social icon row (last column) */
.vs-footer-socials {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 28px !important;
}

.vs-footer-socials a {
  color: rgba(246, 241, 234, 0.75) !important;
  transition: color 0.25s ease !important;
  display: inline-flex !important;
}

.vs-footer-socials a svg {
  width: 22px !important;
  height: 22px !important;
}

.vs-footer-socials a:hover {
  color: #ffffff !important;
}

.vs-footer-payments {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.vs-footer-payments svg {
  width: 38px !important;
  height: 24px !important;
}

/* Responsive configurations */
@media (max-width: 1100px) {
  .vs-premium-footer {
    padding: 60px 40px 40px !important;
  }
  
  .vs-footer-top {
    grid-template-columns: repeat(2, 1fr) !important; /* 2x2 grid on tablets */
    gap: 50px !important;
  }

  .vs-footer-col--newsletter {
    grid-column: 1 / -1 !important; /* Newsletter spans full row on tablets */
  }
}

@media (max-width: 768px) {
  .vs-premium-footer {
    padding: 50px 20px 30px !important;
  }
  
  .vs-footer-top {
    grid-template-columns: 1fr !important; /* Single column on mobile */
    gap: 35px !important;
    padding-bottom: 40px !important;
  }
  
  .vs-footer-bottom {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
  }
}

/* Global Pricing Uniformity */
.price,
.price-item,
.price-item--regular,
.price-item--sale,
.sale-price,
.vs-qv-price,
.vs-monaco-product-price,
.compare-price,
.vs-qv-compare {
  font-family: 'Montserrat', sans-serif !important;
}

.price,
.price-item,
.price-item--regular,
.price-item--sale,
.sale-price,
.vs-qv-price,
.vs-monaco-product-price {
  color: #c49545 !important;
}

/* ==========================================================
   COLLECTION PAGE REVAMP (Monaco Inspired)
========================================================== */

/* 1. Force tight 4px column/row gaps in the collection grids */
.product-grid-container .grid,
.product-grid-container .product-grid,
.collection-wrapper .grid {
    gap: 4px !important;
    row-gap: 24px !important; /* vertical spacing for card metadata */
}

/* 2. Set collection card image aspect ratio to 0.68 (premium elongated vertical crop) */
.card-gallery {
    --gallery-aspect-ratio: 0.68 !important;
    aspect-ratio: 0.68 !important;
    position: relative !important;
    overflow: hidden !important;
}

.card-gallery img,
.card-gallery .slideshow,
.card-gallery .product-media-container {
    object-fit: cover !important;
    height: 100% !important;
    width: 100% !important;
}

/* 3. Style quick add button as Monaco-exact QUICK VIEW hover button (Solid White Block, Flush Bottom) - ONLY on Collection/Shop templates */
body.template-collection .card-gallery quick-add-component {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding: 0 !important; /* Sitting flush against bottom/sides - no padding gaps! */
    box-sizing: border-box !important;
    z-index: 10 !important;
    opacity: 0 !important;
    transform: translateY(0) !important; /* Clean fade-in */
    transition: opacity 0.3s ease !important;
    pointer-events: none !important; /* Allow hover through when hidden */
}

body.template-collection .card-gallery:hover quick-add-component {
    opacity: 1 !important;
    pointer-events: auto !important; /* Enable clicks */
}

/* Base button styling - hide both buttons by default */
body.template-collection .card-gallery .quick-add__button {
    display: none !important;
    position: relative !important; /* Reset to relative to sit inside parent padding */
    width: 100% !important;
    height: 48px !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    background-color: #ffffff !important; /* Solid White background */
    color: #111111 !important; /* Solid Black text */
    border: none !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important; /* Sharp corners as in reference website */
    transition: background-color 0.25s ease, color 0.25s ease !important;
}

/* Show ONLY the single active button (Add or Choose) based on active state (prevents double buttons display bug) */
body.template-collection .card-gallery product-form-component[data-quick-add-button='add'] .quick-add__button--add,
body.template-collection .card-gallery product-form-component[data-quick-add-button='choose'] .quick-add__button--choose {
    display: flex !important; /* Centered content display */
    align-items: center !important;
    justify-content: center !important;
}

body.template-collection .card-gallery .quick-add__button:hover {
    background-color: #111111 !important; /* Invert colors to black background on hover */
    color: #ffffff !important;
}

/* Force button text to uniformly say QUICK VIEW */
body.template-collection .card-gallery .quick-add__button * {
    display: none !important;
}

body.template-collection .card-gallery .quick-add__button::after {
    content: "QUICK VIEW" !important;
    display: block !important;
    color: inherit !important;
}

/* Hide Quick View / Quick Add on all other templates by default */
body:not(.template-collection) quick-add-component,
body:not(.template-collection) .quick-add,
body:not(.template-collection) .quick-add__button,
body:not(.template-collection) [class*="quick-add"] {
    display: none !important;
}

/* 4. Style product details metadata below grid cards (Stacked Monaco Layout) */
.product-grid__card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.product-grid__card > :first-child,
.product-grid__card > .card-gallery,
.product-grid__card > quick-add-component {
    width: 100% !important;
}

/* Direct child title block only */
.product-grid__card > .product-title,
.product-grid__card > [class*="title"],
.product-grid__card > [id*="title"] {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Force card titles to be clean, non-italic, sans-serif Montserrat/Inter font style */
.product-grid__card .card__heading,
.product-grid__card .card__heading a,
.product-grid__card .full-unstyled-link,
.product-grid__card > .product-title *,
.product-grid__card > [class*="title"] *,
.product-grid__card > [id*="title"] * {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-style: normal !important; /* Remove italics completely! */
    text-transform: capitalize !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    color: #111111 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin: 0 !important;
    display: block !important;
}

/* Direct child price block only - on its own line under title */
.product-grid__card > .price,
.product-grid__card > [class*="price"],
.product-grid__card > [id*="price"] {
    width: 100% !important;
    margin-top: 6px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Sale price - bold & slightly larger */
.product-grid__card .price-item--sale,
.product-grid__card [class*="price"] .price-item--sale {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important; /* Bold sale price */
    color: #c49545 !important; /* Premium Antique Gold */
}

/* Original compare-at price strike-through */
.product-grid__card .price-item--regular,
.product-grid__card [class*="price"] [class*="compare"] {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: #999999 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* Swatches block spans full width under price */
.product-grid__card > [class*="swatch"],
.product-grid__card > .swatches,
.product-grid__card > .product-card-swatches {
    width: 100% !important;
    margin-top: 8px !important;
    display: flex !important;
    justify-content: flex-start !important;
}

/* Force header links to be visible (black) when header is scrolled */
#header-component.vs-scrolled .menu-list__link,
#header-component.vs-scrolled .menu-list__item,
#header-component.vs-scrolled .header-actions__action,
#header-component.vs-scrolled .dropdown-localization .button,
#header-component.vs-scrolled .header-actions__action span,
#header-component.vs-scrolled .menu-list__item span {
    color: #111111 !important;
}

/* ======================================================
MOBILE MENU DRAWER FIXES
====================================================== */
@media screen and (max-width: 749px) {
  /* Featured products follow the links instead of pinning to the screen bottom:
     the (empty) utility-links element carries margin-block auto, pushing
     everything after it down and leaving a dead gap with clipped text */
  .menu-drawer__utility-links {
    margin-block-start: 40px !important;
  }

  /* Keep card text clear of the scrollbar and iOS home-indicator area */
  .menu-drawer__featured-content-list {
    padding-block-end: calc(var(--padding-lg, 16px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    scrollbar-width: none;
  }

  .menu-drawer__featured-content-list::-webkit-scrollbar {
    display: none;
  }
}

/* ======================================================
MEGA MENU / DRAWER - MONACO FULL WIDTH DROPDOWN STYLING
====================================================== */

@media screen and (min-width: 750px) {
  /* 1. Transform drawer into a full screen slide-down dropdown */
  .menu-drawer {
    position: fixed !important;
    top: 0 !important; /* Starts from very top */
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    transform: translateY(-100%) !important; /* Slide down transition */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease !important;
    background-color: #ffffff !important;
    padding-top: 100px !important; /* Space for the header row */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border: none !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    z-index: 99 !important; /* Behind header components */
  }

  /* Slide down behavior when active */
  .menu-open > .menu-drawer {
    transform: translateY(0) !important;
    visibility: visible !important;
  }

  /* Hide backdrop and drawer close buttons on desktop */
  .menu-drawer__backdrop,
  .menu-drawer__close-button {
    display: none !important;
  }

  /* 2. Style Nav layout (Row Flexbox) */
  .menu-drawer__navigation {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 60px 80px 80px 80px !important;
    box-sizing: border-box !important;
  }

  .menu-drawer__navigation-container {
    display: block !important;
    height: auto !important;
    overflow-y: visible !important;
    width: 70% !important; /* Left columns */
  }

  /* Navigation menu column layout */
  .menu-drawer__menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 100px !important; /* Spacing between columns */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  /* Style columns */
  .menu-drawer__menu > li {
    flex: 1 !important;
    min-width: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Column Titles (Shop, Collections, Lookbook in playfair italic) */
  .menu-drawer__menu > li > a,
  .menu-drawer__menu > li > details > summary {
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(24px, 3vw, 36px) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #111111 !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none !important; /* Display only */
  }

  /* Hide arrows/plus sign icons on parent summaries */
  .menu-drawer__menu > li > details > summary svg,
  .menu-drawer__menu > li > details > summary .icon-plus,
  .menu-drawer__menu > li > details > summary .icon-caret {
    display: none !important;
  }

  /* Force child menu lists to display */
  .menu-drawer__menu > li > details {
    display: block !important;
  }

  .menu-drawer__menu > li > details > div,
  .menu-drawer__menu > li > details > ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: static !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    list-style: none !important;
  }

  /* Child links styles */
  .menu-drawer__menu .menu-drawer__menu-item-text,
  .menu-drawer__menu li li a {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    text-transform: capitalize !important;
    color: #555555 !important;
    padding: 8px 0 !important;
    display: block !important;
    transition: color 0.3s ease !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
  }

  .menu-drawer__menu .menu-drawer__menu-item-text:hover,
  .menu-drawer__menu li li a:hover {
    color: #c49545 !important;
  }

  /* 3. Featured Image on the Right Column */
  .menu-drawer__featured-product-monaco {
    width: 25% !important; /* Right column width */
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    box-sizing: border-box !important;
  }

  .featured-product-monaco__image-wrapper {
    aspect-ratio: 3/4 !important;
    overflow: hidden !important;
    width: 100% !important;
    background-color: #f7f7f7 !important;
  }

  .featured-product-monaco__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .featured-product-monaco__image-wrapper:hover .featured-product-monaco__image {
    transform: scale(1.03) !important;
  }

  .featured-product-monaco__details {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .featured-product-monaco__title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111111 !important;
  }

  .featured-product-monaco__price {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #c49545 !important;
  }

  /* 4. Drawer Social Footer */
  .menu-drawer__footer-monaco {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 30px 80px !important;
    width: 100% !important;
    background-color: #ffffff !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  .footer-monaco__links {
    display: flex !important;
    gap: 30px !important;
  }

  .footer-monaco__links a {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #555555 !important;
    transition: color 0.3s ease !important;
  }

  .footer-monaco__links a:hover {
    color: #c49545 !important;
  }

  .footer-monaco__contact {
    display: flex !important;
    gap: 30px !important;
  }

  .footer-monaco__contact span,
  .footer-monaco__contact a {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: #777777 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
  }

  .footer-monaco__contact a:hover {
    color: #c49545 !important;
  }

  .footer-monaco__socials {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
  }

  .footer-monaco__socials a {
    color: #555555 !important;
    transition: color 0.3s ease !important;
    display: inline-flex !important;
  }

  .footer-monaco__socials a:hover {
    color: #c49545 !important;
  }

  .footer-monaco__socials svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
  }
}

/* 5. Trigger Close Icon Color swaps when open */
details.menu-open .header__icon--menu .header-drawer-icon--close {
  display: inline-flex !important;
}

details.menu-open .header__icon--menu .header-drawer-icon--open {
  display: none !important;
}

/* Hide theme's default mobile footer when menu drawer is open on desktop */
@media screen and (min-width: 750px) {
  .menu-drawer__utility-links,
  .menu-drawer__localization {
    display: none !important;
  }
}

/* By default, hide the Monaco megamenu elements completely on all views when the drawer is closed */
.menu-drawer__featured-product-monaco,
.menu-drawer__footer-monaco {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Only display them when the menu drawer is actively open on desktop */
@media screen and (min-width: 750px) {
  .menu-open .menu-drawer__featured-product-monaco {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
  }
  
  .menu-open .menu-drawer__footer-monaco {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
  }
}

/* ======================================================
PRODUCT PAGE - PREMIUM MONACO ALLURE LAYOUT REVAMP

Design tokens: ONE type scale (ratio ~1.28) + an 8px spacing rhythm drive the
whole details column, so every element pulls from the same handful of steps
instead of ad-hoc px values. Change a token here, the whole column follows.
====================================================== */

body.template-product .product-details {
    /* Ink */
    --pdp-ink: #111111;       /* primary text */
    --pdp-ink-soft: #6b6b6b;  /* labels, secondary */
    --pdp-ink-mute: #9a9a9a;  /* strikethrough, disabled */
    --pdp-line: #e5e5e5;      /* hairlines */

    /* Type scale */
    --pdp-title: clamp(28px, 3.4vw, 38px); /* Playfair display */
    --pdp-price: 24px;   /* current price */
    --pdp-was: 17px;     /* compare-at */
    --pdp-body: 15px;    /* description, size options, quantity */
    --pdp-meta: 13px;    /* stock, field labels */
    --pdp-micro: 12px;   /* buttons, read-more, pill */

    /* Uppercase tracking, optically scaled (smaller = more tracking) */
    --pdp-track-micro: 0.16em;
    --pdp-track-meta: 0.14em;
    --pdp-track-body: 0.08em;

    /* Spacing rhythm (8px base) */
    --pdp-space-1: 8px;
    --pdp-space-2: 16px;
    --pdp-space-3: 24px;
    --pdp-space-4: 32px;
}

body.template-product .product-information {
    max-width: 1350px !important;
    margin: 0 auto !important;
    padding-inline: var(--padding-md) !important;
}

/* The store's body font is set to an italic variant (type_body_font: sans_serif_i4),
   so every detail below inherits italic. Force the whole details column upright;
   nothing here is meant to be slanted. */
body.template-product .product-details,
body.template-product .product-details * {
    font-style: normal !important;
}

/* 1. Stacked Image Grid styles */
body.template-product .product-media-container,
body.template-product .media-gallery__grid,
body.template-product .product-media-container * {
    border-radius: 0px !important; /* Sharp corners */
    border: none !important;
    box-shadow: none !important;
}

/* 2. Title & Header Block Sizing */
body.template-product .product-details h1,
body.template-product .product-details [class*="title"] h1,
body.template-product .product-details [class*="title"] h2,
body.template-product .product-details [class*="title"] * {
    font-family: 'Inter', sans-serif !important; /* Same family as the price for a clean, cohesive header */
    font-size: var(--pdp-title) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--pdp-ink) !important;
    margin: 0 0 var(--pdp-space-2) !important;
    text-transform: none !important; /* Elegant natural capitalization */
    text-align: left !important;
}

/* 3. Pricing Row styles */
/* Only the two row containers — matching every [class*="price"] descendant un-hid the
   theme's hidden regular price and stacked 20px margin on each nested span */
body.template-product .product-details .price__regular:not(.price__hidden),
body.template-product .product-details .price__sale:not(.price__hidden) {
    display: flex !important;
    align-items: center !important;
    gap: var(--pdp-space-2) !important;
    margin: 0 !important; /* rhythm handled by the header group gap */
    justify-content: flex-start !important;
}

body.template-product .product-details .price-item--sale {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-price) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: -0.01em !important;
    color: var(--pdp-ink) !important; /* Pure clean dark price matching Monaco */
}

body.template-product .product-details .price-item--regular {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-was) !important;
    color: var(--pdp-ink-mute) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: -0.01em !important;
}

/* Discount percent pill next to the price (Monaco reference) */
body.template-product .vs-discount-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--pdp-ink) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-micro) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: 0.02em !important;
    margin-left: var(--pdp-space-1) !important;
}

/* 3b. Inventory status — bell icon + spaced uppercase text */
body.template-product .product-details .product-inventory__status {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--pdp-space-1) !important;
}

body.template-product .product-details .product-inventory__icon svg {
    width: 13px !important;
    height: 13px !important;
    color: var(--pdp-ink-soft) !important;
}

body.template-product .product-details .product-inventory__text {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;          /* match Size Guide */
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;   /* match Size Guide */
    text-transform: uppercase !important;
    color: var(--pdp-ink-soft) !important;
}

/* 4. Variant Picker — field labels ("Size", "Colour") share the meta step */
body.template-product .product-details .variant-option--buttons legend,
body.template-product .product-details .variant-option--dropdowns > label,
body.template-product .product-details .variant-option[data-testid='variant-option-single'],
body.template-product .product-details .variant-option__label {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-meta) !important;
    font-weight: 600 !important;
    letter-spacing: var(--pdp-track-meta) !important;
    text-transform: uppercase !important;
    color: var(--pdp-ink) !important;
    margin-bottom: var(--pdp-space-2) !important;
}

/* Theme's equal-width grid stretches columns to fill; with the 44px buttons below that leaves huge gaps — use compact flex instead */
body.template-product .variant-option--equal-width-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

/* Monaco reference: plain text size options, selected = underline */
body.template-product .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    border: none !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--pdp-ink-soft) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-body) !important;
    font-weight: 500 !important;
    letter-spacing: var(--pdp-track-body) !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
    padding: 0 2px var(--pdp-space-1) !important;
    margin-right: var(--pdp-space-3) !important;
    margin-bottom: var(--pdp-space-1) !important;
    box-shadow: none !important;
}

body.template-product .variant-option__button-label:not(.variant-option__button-label--has-swatch):hover {
    color: var(--pdp-ink) !important;
    background-color: transparent !important;
}

/* Selected size: dark text with underline */
body.template-product .variant-option__button-label:not(.variant-option__button-label--has-swatch):has(:checked) {
    background-color: transparent !important;
    color: var(--pdp-ink) !important;
    border-bottom-color: var(--pdp-ink) !important;
}

/* Disable the default checked ring styling elements */
body.template-product .variant-option__button-label::before,
body.template-product .variant-option__button-label::after {
    display: none !important;
}

/* Hide the theme's sliding black pill behind the selected size */
body.template-product .variant-option__button-label:not(.variant-option__button-label--has-swatch) .variant-option__button-label__pill {
    display: none !important;
}

/* 5. Quantity selector styles */
body.template-product .quantity-selector {
    border-radius: 0px !important; /* Sharp corners */
    border: 1px solid #e5e5e5 !important;
    background-color: #ffffff !important;
    height: 52px !important;
    max-width: 140px !important;
    box-shadow: none !important;
}

body.template-product .quantity-selector input[type='number'] {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-body) !important;
    font-weight: 500 !important;
    color: var(--pdp-ink) !important;
}

/* 6. Buy Buttons Revamp (Monaco reference: qty + outlined ADD TO CART on one row, solid BUY IT NOW below) */
body.template-product .product-form-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: var(--pdp-space-2) !important;
    margin-top: 0 !important; /* section rhythm handled by the details column gap */
}

/* Target the direct flex child that CONTAINS each control, whatever wrapper
   content_for emits — so the flex sizing always lands on the right element. */
body.template-product .product-form-buttons > *:has(.quantity-selector) {
    flex: 0 0 auto !important;
}

body.template-product .product-form-buttons > *:has(.add-to-cart-button) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
}

/* The <add-to-cart-component> between the flex span and the button is block/content-width
   by default — stretch it so the button can fill the row. */
body.template-product .product-form-buttons add-to-cart-component {
    flex: 1 1 auto !important;
    width: 100% !important;
    display: block !important;
}

body.template-product .product-form-buttons .add-to-cart-button {
    width: 100% !important;
    max-width: none !important;
}

/* BUY IT NOW / dynamic checkout wraps to its own full-width row below */
body.template-product .product-form-buttons > .accelerated-checkout-block,
body.template-product .product-form-buttons > *:has(.accelerated-checkout-block),
body.template-product .product-form-buttons > *:has(.shopify-payment-button) {
    flex: 0 0 100% !important;
}

body.template-product .add-to-cart-button,
body.template-product .buy-buttons button,
body.template-product .shopify-payment-button__button {
    border-radius: 0px !important; /* Sharp corners */
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-micro) !important;
    font-weight: 600 !important;
    letter-spacing: var(--pdp-track-micro) !important;
    text-transform: uppercase !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* Add to Cart - White with Black Border (Monaco reference) */
body.template-product .add-to-cart-button {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
}

body.template-product .add-to-cart-button:hover {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}

/* Buy It Now - Solid Black */
body.template-product .shopify-payment-button__button {
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #111111 !important;
}

body.template-product .shopify-payment-button__button:hover {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
}

/* Product description — first few lines visible, rest folds out via READ MORE (vinescape.js) */
body.template-product .text-block--text_desc_full {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-body) !important;
    line-height: 1.7 !important;
    color: var(--pdp-ink-soft) !important;
}

body.template-product .text-block--text_desc_full.vs-desc-clamped {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
}

body.template-product .vs-desc-toggle {
    display: inline-block;
    margin-top: var(--pdp-space-2);
    border: none;
    background: none;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--pdp-micro);
    font-weight: 600;
    letter-spacing: var(--pdp-track-micro);
    text-transform: uppercase;
    color: var(--pdp-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

/* 7a. Product accordion (Description) — hairline rows, no box */
body.template-product .product-details .accordion {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

body.template-product .product-details .accordion details.details {
    border: none !important;
    border-bottom: 1px solid var(--pdp-line) !important;
}

body.template-product .product-details .accordion details.details:first-of-type {
    border-top: 1px solid var(--pdp-line) !important;
}

body.template-product .product-details .accordion summary.details__header {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-meta) !important;
    font-weight: 600 !important;
    letter-spacing: var(--pdp-track-meta) !important;
    text-transform: uppercase !important;
    color: var(--pdp-ink) !important;
    padding: var(--pdp-space-2) 0 !important;
    background: transparent !important;
}

body.template-product .product-details .accordion .details-content {
    padding: 0 0 var(--pdp-space-2) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-body) !important;
    line-height: 1.7 !important;
    color: var(--pdp-ink-soft) !important;
}

/* 7. Accordion Disclosure Rows */
body.template-product details.disclosure,
body.template-product disclosure-component details,
body.template-product disclosures-component details {
    border-top: 1px solid var(--pdp-line) !important;
    border-bottom: 1px solid var(--pdp-line) !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    padding: var(--pdp-space-2) 0 !important;
}

body.template-product details.disclosure summary,
body.template-product disclosure-component details summary,
body.template-product disclosures-component details summary {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--pdp-meta) !important;
    font-weight: 600 !important;
    letter-spacing: var(--pdp-track-meta) !important;
    text-transform: uppercase !important;
    color: var(--pdp-ink) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

body.template-product details.disclosure[open] summary,
body.template-product disclosure-component details[open] summary,
body.template-product disclosures-component details[open] summary {
    margin-bottom: var(--pdp-space-2) !important;
}

/* ======================================================
COLLECTION HERO BANNER - PREMIUM MONACO STYLING
====================================================== */

.collection-hero {
    position: relative;
    width: 100%;
    min-height: 400px !important;
    display: flex;
    align-items: stretch;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 0;
    padding-top: 120px; /* Clears the header */
    padding-bottom: 55px;
    box-sizing: border-box;
    overflow: hidden;
}

.collection-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 100%) !important;
    z-index: 1;
}

/* Monaco style: left-aligned content, no glass card */
.collection-hero__content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    width: 100%;
    padding: 0 clamp(20px, 4vw, 60px) !important; /* .page-width is a no-op in this theme */
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

.collection-hero__breadcrumbs {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    text-transform: none;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;
}

.collection-hero__breadcrumbs a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.collection-hero__breadcrumbs a:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

.collection-hero__breadcrumbs-separator {
    color: rgba(255, 255, 255, 0.45);
}

.collection-hero__title {
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(48px, 6.5vw, 84px) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin: clamp(35px, 7vh, 70px) 0 20px 0 !important; /* Pushes title below the breadcrumb, Monaco spacing */
    text-transform: capitalize !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.collection-hero__description {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 600px !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Fallback padding if a collection has no hero banner */
body.template-collection:not(:has(.collection-hero)) {
    padding-top: 120px !important;
}

/* 1. Force exactly 4 columns per row with minimalist borders (0 gap) on desktop */
@media screen and (min-width: 750px) {
    ul.product-grid,
    ul[data-testid="product-grid"],
    ul[class*="product-grid--"] {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0px !important; /* 0 gap for border layout */
        border-top: 1px solid rgba(0,0,0,0.06) !important;
        border-left: 1px solid rgba(0,0,0,0.06) !important;
        padding-inline: 0 !important;
        margin: 0 !important;
    }

    ul.product-grid > li,
    ul[data-testid="product-grid"] > li,
    ul[class*="product-grid--"] > li {
        border-right: 1px solid rgba(0,0,0,0.06) !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        padding: 40px 30px 30px 30px !important; /* Luxurious padding spaces */
        background-color: #ffffff !important;
        transition: background-color 0.4s ease, box-shadow 0.4s ease !important;
    }

    ul.product-grid > li:hover,
    ul[data-testid="product-grid"] > li:hover,
    ul[class*="product-grid--"] > li:hover {
        background-color: #fafaf8 !important; /* Subtle Monaco warm off-white */
        box-shadow: inset 0 0 30px rgba(0,0,0,0.02) !important;
    }
}

/* Mobile 2-column borders */
@media screen and (max-width: 749px) {
    ul.product-grid,
    ul[data-testid="product-grid"],
    ul[class*="product-grid--"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0px !important;
        border-top: 1px solid rgba(0,0,0,0.06) !important;
        border-left: 1px solid rgba(0,0,0,0.06) !important;
        padding-inline: 0 !important;
        margin: 0 !important;
    }

    ul.product-grid > li,
    ul[data-testid="product-grid"] > li,
    ul[class*="product-grid--"] > li {
        border-right: 1px solid rgba(0,0,0,0.06) !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        padding: 20px 15px !important;
        background-color: #ffffff !important;
    }
}

/* 2. Image zoom scale hover */
.card-gallery {
    overflow: hidden !important;
}

.card-gallery img {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.product-grid__card:hover .card-gallery img {
    transform: scale(1.05) !important;
}

/* 3. Luxury Outlined Badges */
.badge {
    background: none !important;
    border: 1px solid currentColor !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
}

.badge--sale {
    border-color: #c49545 !important; /* Antique Gold */
    color: #c49545 !important;
    background-color: rgba(196, 149, 69, 0.04) !important;
}

.badge--sold-out {
    border-color: #777777 !important;
    color: #777777 !important;
    background-color: rgba(119, 119, 119, 0.04) !important;
}

/* 4. Fade-in Up scroll stagger load reveal */
@keyframes fadeInUpReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

ul.product-grid > li,
ul[data-testid="product-grid"] > li,
ul[class*="product-grid--"] > li {
    animation: fadeInUpReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

ul.product-grid > li:nth-child(1) { animation-delay: 0.05s; }
ul.product-grid > li:nth-child(2) { animation-delay: 0.1s; }
ul.product-grid > li:nth-child(3) { animation-delay: 0.15s; }
ul.product-grid > li:nth-child(4) { animation-delay: 0.2s; }
ul.product-grid > li:nth-child(5) { animation-delay: 0.25s; }
ul.product-grid > li:nth-child(6) { animation-delay: 0.3s; }
ul.product-grid > li:nth-child(7) { animation-delay: 0.35s; }
ul.product-grid > li:nth-child(8) { animation-delay: 0.4s; }

/* Hide switcher & keep layout clean */
.column-options-wrapper,
[class*="column-options-wrapper"] {
    display: none !important;
}

/* Hide hover quick view buttons on product details template page grids */
body.template-product quick-add-component,
body.template-product .quick-add__button {
    display: none !important;
}