/** Shopify CDN: Minification failed

Line 680:66 Expected ":"
Line 1376:12 Unexpected "{"
Line 1376:17 Expected ":"

**/
/*******************************
  DYKE & DEAN — Complete Custom CSS
*******************************/

/* =========================
   0) TOKENS & GLOBALS
   ========================= */
:root {
  --dd-mint: #B9DBBF;
  --dd-gold: #9D8F75;
  --dd-grey: #5E5E5E;
  --dd-dark: #111;
  --dd-overlay: rgba(0 0 0 / .45);
  
  /* Header */
  --dd-frost: rgba(255,255,255,.72);
  --dd-frost-border: rgba(255,255,255,.85);
  
  /* Z-index stack */
  --z-announcement: 100;
  --z-header: 50;
  --z-burger: 60;
  --z-overlay: 80;
  --z-drawer: 90;
}

/* Remove Fabric's transparent header offset */
:root {
  --transparent-header-offset-boolean: 0 !important;
}

.content-for-layout {
  padding-block-start: 0 !important;
}

/* =========================
   1) ANNOUNCEMENT BAR
   ========================= */
.announcement-bar {
  position: relative;
  z-index: var(--z-announcement) !important;
  background: var(--dd-mint);
  text-align: center;
  padding: 12px 16px;
  font-weight: 500;
}

/* New: keep wrappers transparent; rows will provide the glass */
.shopify-section-group-header-group,
.section-site-header,
.site-header {
  background: transparent !important;
}

/* =========================
   3) BURGER ICON — THREE GOLD LINES + MINT HOVER
   ========================= */
.header__icon--menu,
summary.header__icon--menu,
.header__drawer summary {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--dd-frost);
  border: 1px solid var(--dd-frost-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, color .2s ease;
  color: var(--dd-gold) !important;
  -webkit-tap-highlight-color: transparent;
}

/* Hide any existing SVG/icon */
.header__icon--menu svg,
.header__icon--menu .icon,
summary.header__icon--menu svg,
summary.header__icon--menu .icon {
  display: none !important;
}

/* Create three gold lines */
.header__icon--menu::after,
summary.header__icon--menu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  z-index: 1;
}

/* Mint sweep effect */
.header__icon--menu::before,
summary.header__icon--menu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--dd-mint);
  transform: translateY(100%);
  transition: transform .35s ease;
  z-index: 0;
  mix-blend-mode: multiply;
}

.header__icon--menu:hover::before,
summary.header__icon--menu:hover::before,
.header__icon--menu:focus::before,
summary.header__icon--menu:focus::before {
  transform: translateY(0);
}

.header__icon--menu:hover,
summary.header__icon--menu:hover {
  transform: translateY(-1px);
  color: #63B783;
}

/* Hide burger when drawer is open */
.header__drawer[open] > summary.header__icon--menu,
header-drawer details[open] > summary.header__icon--menu
 {
  opacity: 0 !important;
  pointer-events: none !important;
}

/************ D&D — Drawer (Fabric DOM) ************/
/* Container = <details class="menu-drawer-container [menu-open]" open>
   Panel     = <div data-header-drawer class="menu-drawer">              */

/* Hidden base */
details.menu-drawer-container > [data-header-drawer].menu-drawer{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: clamp(320px, 92vw, 400px) !important;
  height: 100svh !important;
  background: var(--dd-mint, #B9DBBF) !important;
  border-right: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
  transform: translateX(-100%) !important;
  transition: transform .35s ease, opacity .35s ease, visibility .35s ease !important;
  z-index: var(--z-drawer, 9999) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Open (theme adds .menu-open) OR native [open] */
details.menu-drawer-container.menu-open > [data-header-drawer].menu-drawer,
details.menu-drawer-container[open]        > [data-header-drawer].menu-drawer{
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Backdrop (Fabric uses .menu-drawer__backdrop) */
details.menu-drawer-container > .menu-drawer__backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: var(--dd-overlay, rgba(0 0 0 / .45)) !important;
  z-index: calc(var(--z-drawer, 9999) - 1) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s ease !important;
}
details.menu-drawer-container.menu-open > .menu-drawer__backdrop,
details.menu-drawer-container[open]      > .menu-drawer__backdrop{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Content layout */
details.menu-drawer-container > [data-header-drawer].menu-drawer .menu-drawer__content{
  display: grid !important;
  grid-template-rows: auto auto auto !important; /* footer now sits under nav */

  /* nav | scroll | footer */
  min-height: 100% !important;
  padding: 2rem 1.5rem !important; /* py-8 px-6 like live */
  overflow: hidden !important;
}
details.menu-drawer-container > [data-header-drawer].menu-drawer .menu-drawer__navigation{ margin-top: .5rem !important; }
details.menu-drawer-container > [data-header-drawer].menu-drawer .menu-drawer__close-button{
  position: absolute !important; top: .75rem !important; right: .75rem !important;
  width: 40px !important; height: 40px !important; display: grid !important; place-items: center !important;
  border: 1px solid rgba(0,0,0,.2) !important; border-radius: 999px !important; background: #fff !important;
}

/* Main nav = 2 columns */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 1.5rem 2rem !important; /* gap-y-6 feel */
  padding: 0 !important;
}
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li{ list-style: none !important; border: 0 !important; }

/* Top-level link style (small, wider tracking, medium) */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > a,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > summary{
  display: inline-block !important;
  font-family: var(--font-body-family, 'Lato', sans-serif) !important;
  font-size: .9375rem !important;  /* ~15px */
  font-weight: 600 !important;     /* medium */
  letter-spacing: .05em !important;/* tracking-wider */
  line-height: 1.35 !important;
  color: var(--dd-dark,#111) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > a:hover,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > summary:hover{
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Hide plus/caret for minimalist live look */
details.menu-drawer-container [data-header-drawer] .icon-plus,
details.menu-drawer-container [data-header-drawer] .icon-caret{ display: none !important; }
details.menu-drawer-container [data-header-drawer] summary{ list-style: none !important; }
details.menu-drawer-container [data-header-drawer] summary::-webkit-details-marker{ display: none !important; }

/* Child submenus (flat, single column) */
details.menu-drawer-container [data-header-drawer] .menu-drawer__submenu{
  background: transparent !important; max-height: none !important; padding: .5rem 0 0 0 !important;
}
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--childlist,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--grandchildlist{
  display: grid !important; grid-template-columns: 1fr !important; gap: .5rem !important; padding: 0 !important;
}
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--childlist .menu-drawer__menu-item--child,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child{
  font-size: .9375rem !important; font-weight: 500 !important; letter-spacing: .02em !important;
  color: #333 !important; text-decoration: none !important;
}

/* Collection image tiles (70×70) */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--grid .menu-drawer__link-image{
  aspect-ratio: 1 / 1 !important; width: 70px !important; height: 70px !important;
  border-radius: 6px !important; object-fit: cover !important; background: #f5f5f5 !important; margin-bottom: .5rem !important;
}
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--grid .menu-drawer__menu-item--child{
  display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important;
  background: transparent !important; padding: 0 !important;
}

/* Footer (secondary links) */
details.menu-drawer-container [data-header-drawer] .dd-secondary-footer{ margin-top: auto !important; padding: 0 !important; }
details.menu-drawer-container [data-header-drawer] .dd-secondary-divider{
  height: 1px !important; background: rgba(0,0,0,.12) !important; border: 0 !important; margin: 1.25rem 0 !important;
}
details.menu-drawer-container [data-header-drawer] .dd-secondary-menu{
  display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: .75rem 2rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
details.menu-drawer-container [data-header-drawer] .dd-secondary-link{
  display: inline-block !important; font-family: var(--font-body-family, 'Lato', sans-serif) !important;
  font-size: .9rem !important; font-weight: 400 !important; letter-spacing: .02em !important; color: #555 !important; text-decoration: none !important;
}
details.menu-drawer-container [data-header-drawer] .dd-secondary-link:hover{
  text-decoration: underline !important; text-underline-offset: 2px !important;
}

/* Small screens */
@media (max-width: 600px){
  details.menu-drawer-container > [data-header-drawer].menu-drawer{ width: 92vw !important; }
  details.menu-drawer-container [data-header-drawer] .menu-drawer__menu{ gap: 1.25rem 1.25rem !important; }
  details.menu-drawer-container [data-header-drawer] .dd-secondary-menu{ grid-template-columns: 1fr 1fr !important; gap: .5rem 1.25rem !important; }
}


/* =========================
   5) BUTTONS — MINT SLIDE OVERLAY
   ========================= */
.button,
.button-secondary,
.variant-option__button-label,
.product-form__submit,
button[type="submit"],
a.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .25s ease;
}

.button::before,
.button-secondary::before,
.variant-option__button-label::before,
.product-form__submit::before,
button[type="submit"]::before,
a.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dd-mint);
  transform: translateY(100%);
  transition: transform .35s ease;
  z-index: 0;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

.button:hover::before,
.button:focus-visible::before,
.button-secondary:hover::before,
.button-secondary:focus-visible::before,
.variant-option__button-label:hover::before,
.variant-option__button-label:focus-visible::before,
.product-form__submit:hover::before,
.product-form__submit:focus-visible::before,
button[type="submit"]:hover::before,
button[type="submit"]:focus-visible::before,
a.button:hover::before,
a.button:focus-visible::before {
  transform: translateY(0);
}

.button > *,
.button-secondary > *,
.variant-option__button-label > *,
.product-form__submit > *,
button[type="submit"] > *,
a.button > * {
  position: relative;
  z-index: 1;
  transition: color .25s ease;
}

.button:hover,
.button:focus-visible,
.button-secondary:hover,
.button-secondary:focus-visible,
.variant-option__button-label:hover,
.variant-option__button-label:focus-visible,
.product-form__submit:hover,
.product-form__submit:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
a.button:hover,
a.button:focus-visible{
  color: var(--dd-gold,#9D8F75) !important;
}


/* Selected variant button = mint */
label.variant-option__button-label:has(:checked),
.variant-option__button-label--selected{
  background: var(--dd-mint,#B9DBBF) !important;
  border-color: transparent !important;
  color: var(--dd-gold,#9D8F75) !important;
}

/* ATC button becomes a 1x1 grid so both labels overlap */
add-to-cart-component .button {
  position: relative;
  overflow: hidden;
  display: grid;                 /* <— critical */
  place-items: center;           /* keep label centered while stacked */
  isolation: isolate;
}

/* Make the "Added ✓" label overlay the default label */
add-to-cart-component .add-to-cart-text--added {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;      /* fill button box */
  line-height: 1 !important;     /* kill baseline sag */
  opacity: 0;
  pointer-events: none;          /* don't trap clicks during transition */
  transition: opacity var(--animation-speed, .25s)
              var(--animation-easing, ease);
}


/* =========================
   6) SLIDESHOW ARROWS — ROUND + MINT HOVER

    ========================= */

   :root{ --dd-gold:#857756; --dd-mint:#B9DBBF; }

.slideshow-control,
.slider-button,
.carousel__button,
.slideshow__button,
.swiper-button-prev, .swiper-button-next,
.splide__arrow {
  position:relative; aspect-ratio:1/1; width:48px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; isolation:isolate;
  padding:0 !important;
  background: transparent;
  border: 2px solid var(--dd-gold);
  box-shadow:none; transition:none;
}

.slideshow-control::before,
.slider-button::before,
.carousel__button::before,
.slideshow__button::before,
.swiper-button-prev::before, .swiper-button-next::before,
.splide__arrow::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(to top, var(--dd-mint) 0 50%, transparent 50% 100%);
  background-size:100% 200%; background-position:0 100%;
  transition: background-position .16s ease;
  z-index:0;
}

.slideshow-control:hover::before,
.slider-button:hover::before,
.carousel__button:hover::before,
.slideshow__button:hover::before,
.swiper-button-prev:hover::before, .swiper-button-next:hover::before,
.splide__arrow:hover::before { background-position:0 0; }

.slideshow-control svg,
.slider-button svg,
.carousel__button svg,
.slideshow__button svg,
.swiper-button-prev svg, .swiper-button-next svg,
.splide__arrow svg {
  position:relative; z-index:1; width:40% !important; height:auto !important;
}


.slideshow-control:hover,
.slider-button:hover,
.carousel__button:hover,
.slideshow__button:hover,
.swiper-button-prev:active, .swiper-button-next:active,
.splide__arrow:active { transform:none !important; }


/* =========================
   7) A) SALE BADGES — ORANGE CIRCLE
   ========================= */
.product-badges__badge.color-scheme-4,
.product-badges__badge--rectangle.color-scheme-4,
.product-badge--sale,
.badge--sale {
  background: #FF6A00 !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

.product-badges__badge.color-scheme-4:hover,
.product-badges__badge--rectangle.color-scheme-4:hover,
.product-badge--sale:hover,
.badge--sale:hover {
  background: #E85C00 !important;
}

/* =========================
   7) B) /* SOLD OUT (grey) — same circular style as SALE */
.product-badges__badge.color-scheme-3,
.product-badges__badge--rectangle.color-scheme-3,
.badge--sold-out,
.tag--sold-out {
  background: #E7E7E7 !important;   /* light grey */
  color: #5E5E5E !important;         /* dark grey text */
  border-color: #E7E7E7 !important;
  border-radius: 50% !important;     /* make it a circle */
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: .75rem !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
}


/* Disabled buttons (keep consistent with SOLD OUT tone) */
button[disabled],
button:disabled,
.product-form__submit[disabled],
.btn--disabled,
.is-disabled {
  background: #E7E7E7 !important;
  color: #5E5E5E !important;
  border-color: #E7E7E7 !important;
  opacity: 1 !important;
}


/* =========================
   8) UTILITY & FIXES
   ========================= */

/* Prevent body scroll when drawer is open */
body:has(details.menu-drawer-container.menu-open),
body:has(details.menu-drawer-container[open])
 {
  overflow: hidden !important;
}

/* Fallback for browsers without :has() support */
@supports not (selector(:has(*))) {
  .drawer-open {
    overflow: hidden !important;
  }
}

/* Remove any conflicting desktop menu styles */
header-menu,
.overflow-menu,
.header-menu {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .header__icon--menu,
  summary.header__icon--menu {
    width: 44px !important;
    height: 44px !important;
  }
  
  header-drawer .menu-drawer__submenu-list {
    grid-template-columns: 1fr !important;
  }
  
  header-drawer .menu-drawer__submenu-image {
    width: 60px !important;
    height: 60px !important;
  }
}

@media (max-width: 360px) {
  .header__icon--menu,
  summary.header__icon--menu {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Cap product media width at 1300px */
.product__media-wrapper,
.product__media,
.product-media,
.product__media-list,
.product__media-gallery{
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/*******************************
  D&D — HEADER + DRAWER FIXES
  - sticky header
  - frosted/blurred top bar with thin white line
  - burger <details> fallback (opens drawer even if JS misses)
*******************************/

/* ---------- Burger/search/account: circular hitbox (unchanged shapes elsewhere) ---------- */
.header__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #5E5E5E;
  overflow: hidden;
  isolation: isolate;
}

/* keep icons nicely sized */
.header__icon .svg-wrapper, .header__icon svg { width: 1.25rem; height: 1.25rem; }

/* ---------- (Optional) mint “slide-up” overlay on ICONS ONLY (buttons untouched) ---------- */
.header__icon::before{
  content:"";
  position:absolute; inset:0;
  background: var(--dd-mint, #B9DBBF);
  transform: translateY(100%);
  transition: transform .35s ease;
  z-index:0;
  mix-blend-mode: multiply;
}
.header__icon > *{ position:relative; z-index:1; }
.header__icon:hover::before, .header__icon:focus-visible::before{ transform: translateY(0); }

/* D&D — exactly one add-to-cart label visible */
.product-form button .add-to-cart-text--default { display: inline; }

.product-form button[aria-live="polite"][data-state="added"] .add-to-cart-text--default { display: none !important; }


/* D&D — Exclude toolbar/filter actions from mint overlay */
.facets__actions .button::before,
.facets__actions .button-secondary::before,
.facets__clear-all::before,
.facets__see-results::before,
.facet-remove-component button::before,
.boost-pfs-filter-clear-all a::before,
.boost-pfs-filter-button a::before,
.boost-pfs-filter-button::before,
.boost-pfs-toolbar-item a::before { content: none !important; }

/* Close button placement (works for both overlay/backdrop approaches) */
header-drawer .menu-drawer__close-button { position:absolute; top:10px; right:10px; }

/* Sticky header — force it on the real section element (and header-section as backup) */
#shopify-section-header{ position:sticky !important; top:0 !important; z-index:9999 !important; }


/* Wrappers must be transparent; rows render the glass */
.shopify-section-group-header-group,
.section-site-header,
.site-header,
.header-section,
#header-component {
  background: transparent !important;
}

/* Kill common sticky blockers */
#header-group,
#MainContent,
.content-for-layout {
  overflow: visible !important;
}
html, body, #header-group, #MainContent, .content-for-layout {
  transform: none !important;
  perspective: none !important;
  filter: none !important;
}

/* Frosted glass on rows */
.header__row {
  background: linear-gradient(to bottom, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 100%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  border-bottom: 1px solid rgba(255,255,255,.55) !important;drawer
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

/* Opaque when sticky is active or menus are hovered/open */
.header-section:has(> #header-component[sticky][data-sticky-state='active']) .header__row,
.header:has(.mega-menu__list:hover) .header__row,
.header:has(.menu-list__link[aria-expanded='true']) .header__row {
  background: #fff !important;
  border-bottom: 1px solid #e9e9e9 !important;
}
/* Always keep the header section pinned */
#shopify-section-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

html, body, #app, #PageContainer, .page-width, #MainContent, #header-group {
  overflow: visible !important;
}
/* Force header sticky */
#shopify-section-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Kill blockers */
html, body, #MainContent, #app, #PageContainer, #header-group {
  overflow: visible !important;
  transform: none !important;
  perspective: none !important;
}
/* Kill sticky blockers on ancestors (overflow/transform/perspective/contain) */
html,
body,
#site-header,
.shopify-section-group-header-group,
.section-site-header,
.site-header,
#header-group,
#MainContent,
.content-for-layout,
#PageContainer {
  overflow: visible !important;
  transform: none !important;
  perspective: none !important;
  contain: none !important;
}
/* Drawer layout & scrolling */
.menu-drawer{
  height: 100dvh;              /* full viewport height incl. mobile chrome */
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* keep backdrop/edge clean */
}
.menu-drawer__content{
  min-height: 0;               /* allow child to shrink */
  overflow-y: auto;            /* THIS is the scroller */
  -webkit-overflow-scrolling: touch;
}
.skip-to-content-link {
  position: absolute !important;
  top: 0 !important;
  left: -9999px !important;
  z-index: 0 !important;
  /* neutralize any button visuals it inherited */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.skip-to-content-link:focus,
.skip-to-content-link:focus-visible {
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 10px 14px !important;     /* show a proper focus target */
  background: #000 !important;
  color: #fff !important;
  border-radius: 6px !important;
  z-index: 10000 !important;
}
/* ========================= DRAWER FOOTER SPACING ========================= */

/* Add space between secondary footer links and currency/language selector */
details.menu-drawer-container [data-header-drawer] .dd-secondary-footer nav {
  margin-bottom: 1.5rem; /* adjust as needed */
}

/* OR if you prefer only targeting the currency/language form */
details.menu-drawer-container [data-header-drawer] .dd-secondary-footer .localization-form {
  margin-top: 1.5rem;
}

 .menu-drawer__menu-item-text {
  color: #857756; /* gold */
}

.menu-drawer__menu-item-text:hover {
  text-decoration: underline;
  color: #5e5e5e; /* optional darker shade on hover */
}

/* ========================= DRAWER MENU LINK UNIFICATION ========================= */

/* Top-level links (anchors + accordion summaries) */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > a,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > summary {
  color: #857756 !important; /* gold */
  font-family: var(--font-body-family, 'Lato', sans-serif) !important;
  font-size: .9375rem !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

/* Hover / focus state */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > a:hover,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > summary:hover {
  color: #9D8F75 !important; /* darker on hover */
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* =========================
   DRAWER — unify all menu item typography + colors
   ========================= */

/* Put the real styles on the text span */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu-item-text {
  font-family: var(--font-body-family, 'Lato', sans-serif) !important;
  font-size: .9375rem !important;      /* ~15px */
  font-weight: 600 !important;          /* same everywhere */
  letter-spacing: .05em !important;     /* same tracking */
  line-height: 1.35 !important;
  color: #857756 !important;            /* gold */
}

/* Make the clickable wrappers inherit from the span above */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > a,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > summary,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--childlist .menu-drawer__menu-item--child,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child {
  font: inherit !important;
  color: inherit !important;
}

/* Normalize the theme's "active" bump (keeps weight consistent) */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu-item--active .menu-drawer__menu-item-text {
  font-weight: 600 !important;
}

/* Unified hover (all levels) */
details.menu-drawer-container [data-header-drawer] :is(a, summary):hover .menu-drawer__menu-item-text {
  color: #5e5e5e !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
/* ==== DRAWER: enable scrolling in the middle area ==== */
details.menu-drawer-container [data-header-drawer] .menu-drawer__navigation {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
/* ==== DRAWER: 3-up grid for collection/product tiles inside accordion ==== */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* small screens: drop to 2 columns */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer] .menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* ==== DRAWER: make accordion image grids span full width & show 3 columns ==== */

/* 1) Ensure the LI that holds the accordion + its child UL spans both main columns */
details.menu-drawer-container [data-header-drawer] .menu-drawer__list-item--deep,
details.menu-drawer-container [data-header-drawer] .menu-drawer__list-item--flat {
  grid-column: 1 / -1 !important; /* take the full row in the top-level 2-col grid */
}

/* 2) The child/grandchild UL that has images becomes a 3-up grid across the full width */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--childlist.menu-drawer__menu--grid,
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
  grid-column: 1 / -1 !important;                  /* span both columns */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;                            /* no side padding so it hits drawer padding */
}

/* 3) Make each tile behave nicely in a grid cell */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grid .menu-drawer__menu-item--child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 4) Very small screens: fall back to 2 columns */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--childlist.menu-drawer__menu--grid,
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* ==== FIX: keep top-level menu 2 columns; only image-grid rows span full width ==== */

/* 1) Reset every top-level li back to normal 2-col behavior */
/* Only keep normal items to one column — EXCEPT rows that contain an image grid */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li:not(:has(.menu-drawer__menu--grid)) {
  grid-column: auto !important;
  width: auto !important;
}


/* 2) Now ONLY the items that contain an image grid should span full width */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li:has(.menu-drawer__menu--grid) {
  grid-column: 1 / -1 !important;
}

/* (Keep the 3-up tile grid across the drawer) */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--childlist.menu-drawer__menu--grid,
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}

/* Tiny screens: 2-up */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--childlist.menu-drawer__menu--grid,
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* === Drawer: keep top-level menu 2 columns; only image-grids span full width === */

/* Make sure the UL is a 2-col grid and items wrap across columns */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important; /* fill left-to-right, then wrap */
}

/* Every top-level item gets a single grid cell by default */
/* Only keep normal items to one column — EXCEPT rows that contain an image grid */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li:not(:has(.menu-drawer__menu--grid)) {
  grid-column: auto !important;
  width: auto !important;
}


/* ONLY items that actually contain an image grid should span full width */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li:has(.menu-drawer__menu--grid) {
  grid-column: 1 / -1 !important;
}

/* Keep the 3-up image grid across the whole drawer (unchanged) */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--childlist.menu-drawer__menu--grid,
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}

/* Tiny screens: 2-up */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--childlist.menu-drawer__menu--grid,
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* === Drawer: force 2-col layout for top-level items; only image-grids span full width === */

/* Ensure the UL is a 2-col grid and fills left→right */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;
}

/* By default every top-level LI occupies one column */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li {
  grid-column: span 1 !important;
  width: auto !important;              /* kill any 100% widths */
}

/* Top-level “mainlist” buttons (links/summary) should not force full width */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu > li > .menu-drawer__menu-item--mainlist {
  display: inline-block !important;
  width: auto !important;
}
/* Keep the image grid 3-up across the drawer */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--childlist.menu-drawer__menu--grid,
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* Small screens: 2-up */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--childlist.menu-drawer__menu--grid,
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* =========================
   DRAWER — FORCE 2-COLUMN TOP LEVEL
   ========================= */

/* Make sure the top list is a 2-col grid */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem 2rem !important;
}

/* Stop any item from spanning both columns */
/* Only keep normal items to one column — EXCEPT rows that contain an image grid */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li:not(:has(.menu-drawer__menu--grid)) {
  grid-column: auto !important;
  width: auto !important;
}


/* Belt-and-braces: specifically cancel theme’s “span 2” rule */
details.menu-drawer-container [data-header-drawer] 
  .menu-drawer__menu > li.menu-drawer__menu-item--mainlist {
  grid-column: auto !important;
}

/* Keep the label itself from stretching like a block */
details.menu-drawer-container [data-header-drawer] 
  .menu-drawer__menu > li > summary,
details.menu-drawer-container [data-header-drawer] 
  .menu-drawer__menu > li > a {
  display: inline-block !important;
  width: auto !important;
}
/* =========================
   DRAWER — MAKE TOP LEVEL 2 COLS (NO FULL-WIDTH SPANS)
   ========================= */

/* 1) UL is a 2-column grid */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;   /* pack left→right, then next row */
  gap: 1.5rem 2rem !important;
}

/* 2) Some themes make wrappers 'display: contents' → cancel that so LI is the grid item */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > details {
  display: block !important;              /* stop flattening */
}

/* 3) Ensure NO item spans across both columns */
/* Only keep normal items to one column — EXCEPT rows that contain an image grid */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li:not(:has(.menu-drawer__menu--grid)) {
  grid-column: auto !important;
  width: auto !important;
}


/* 4) Belt-and-braces: if SUMMARY is still the grid item, kill the span there too */
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > summary,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > details > summary,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > li > details > summary,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > summary.menu-drawer__menu-item,
details.menu-drawer-container [data-header-drawer] .menu-drawer__menu > details > summary.menu-drawer__menu-item {
  grid-column: auto !important;
  width: auto !important;
}

/* 5) Target the problematic “mainlist” class specifically (some themes set it to span) */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu > * .menu-drawer__menu-item--mainlist {
  grid-column: auto !important;
}

/* === Drawer: keep top-level list in 2 columns; only image-grid rows go full width === */

/* 1) Make the *top* UL a 2-col grid */
details.menu-drawer-container [data-header-drawer] ul.menu-drawer__menu.has-submenu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem 2rem !important;
}

/* 2) Cancel the theme rule that forces every LI to span both columns */
details.menu-drawer-container [data-header-drawer] ul.menu-drawer__menu.has-submenu > li {
  grid-column: auto !important;   /* <-- key fix */
  width: auto !important;         /* guard against 100% width wrappers */
}

/* 3) Keep the clickable label from stretching the full row */
details.menu-drawer-container [data-header-drawer] ul.menu-drawer__menu.has-submenu > li > summary,
details.menu-drawer-container [data-header-drawer] ul.menu-drawer__menu.has-submenu > li > a {
  display: inline-block !important;
  width: auto !important;
}

/* 4) ONLY rows that actually contain an image grid should span across both columns */
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu.has-submenu > li:has(> details > ul.menu-drawer__menu--childlist.menu-drawer__menu--grid),
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu.has-submenu > li:has(> details > ul.menu-drawer__menu--grandchildlist.menu-drawer__menu--grid) {
  grid-column: 1 / -1 !important;  /* let the image grid use the full drawer width */
}

/* 5) Make those image grids show 3 columns across the drawer */
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu--childlist.menu-drawer__menu--grid,
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}

/* Small screens: 2-up */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer]
  ul.menu-drawer__menu--childlist.menu-drawer__menu--grid,
  details.menu-drawer-container [data-header-drawer]
  ul.menu-drawer__menu--grandchildlist.menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* === Drawer: make only the IMAGE-GRID rows span the full drawer === */

/* 1) If a top-level <li> contains an accordion whose summary is followed by a UL.grid,
      make that whole row span both columns */
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu.has-submenu > li:has(> details > summary + ul.menu-drawer__menu--grid) {
  grid-column: 1 / -1 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Belt & braces: if the theme flattens the <li>, ensure the grid UL itself occupies
      the full drawer width */
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu--grid {
  grid-column: 1 / -1 !important;   /* safe even when not needed */
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}

/* 3) Tiny screens → 2-up */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer]
  ul.menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Make the internal image grid 3-up across the drawer */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}

/* Safety: ensure LI is actually a grid item, not flattened */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu > li,
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu > li > details {
  display: block !important;
}

/* Small screens → 2-up */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* ==== DRAWER: make rows with image grids span the FULL drawer ==== */

/* Make the top UL a 2-col grid and let it pack left→right */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu.has-submenu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem 2rem !important;
  grid-auto-flow: row dense !important;
}

/* Default: every direct child (li OR details) uses one column */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu.has-submenu > :where(li, details) {
  grid-column: auto !important;
  width: auto !important;
  display: block !important; /* ensure it’s an actual grid item */
}

/* KEY FIX: when the direct child is a <details> that contains an image grid,
   span it across both columns so the tiles can use the full drawer width */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu.has-submenu > details:has(.menu-drawer__menu--grid) {
  grid-column: 1 / -1 !important;
}

/* Also cover the case "li > details" (some themes wrap details in li) */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu.has-submenu > li:has(> details .menu-drawer__menu--grid) {
  grid-column: 1 / -1 !important;
}

/* Inside the image grid: 3-up across the full drawer */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}

/* Small screens → 2-up */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer]
    .menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* === DRAWER: make only rows with an IMAGE GRID span the full drawer === */

/* 1) Ensure the top UL is a 2-col grid (harmless if already set) */
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu.has-submenu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem 2rem !important;
  grid-auto-flow: row dense !important;
}

/* 2) Default: every direct child stays in a single column */
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu.has-submenu > li {
  grid-column: auto !important;
  width: auto !important;
}

/* Span FULL width only when that accordion is OPEN */
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu.has-submenu > li:has(> accordion-custom > details[open] > summary + ul.menu-drawer__menu--grid),
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu.has-submenu > li:has(> details[open] > summary + ul.menu-drawer__menu--grid) {
  grid-column: 1 / -1 !important;
}


/* 4) Inside the image grid, show 3-up across the full drawer */
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu--grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Small screens → 2-up */
@media (max-width: 420px) {
  details.menu-drawer-container [data-header-drawer]
  ul.menu-drawer__menu--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* Keep closed accordions as single-column items (belt & braces) */
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu.has-submenu > li:has(> accordion-custom > details:not([open])),
details.menu-drawer-container [data-header-drawer]
ul.menu-drawer__menu.has-submenu > li:has(> details:not([open])) {
  grid-column: auto !important;
}
/* ==== DRAWER: submenu images → larger circular backgrounds ==== */

/* Circle container */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grid .menu-drawer__link-image {
  border-radius: 50% !important;     
  background: #E7E7E7 !important; /* or set a color like #fff */
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* control circle size here */
  width: 100px !important;   /* adjust this up/down */
  height: 100px !important;
  margin: 0 auto !important; /* center in the grid cell */
}

/* The actual <img> inside */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grid .menu-drawer__link-image img {
  width: 20% !important;     /* shrink the image relative to the circle */
  height: auto !important;
  object-fit: contain !important;
}/* Make the image itself behave like a circle background */
details.menu-drawer-container [data-header-drawer]
  .menu-drawer__menu--grid .menu-drawer__link-image {
  border-radius: 50% !important;
  background: #E7E7E7 !important;
  width: 100px !important;
  height: 100px !important;
  object-fit: contain !important;   /* show the whole image */
  padding: 15px !important;         /* shrinks the visible image */
  box-sizing: border-box !important;
}
/* == Neutralize blend modes where we actually need it (NOT on buttons) == */
.header__icon::before,
.slideshow-control::before,
.slider-button::before,
.carousel__button::before,
.slideshow__button::before,
.product-card .media::before,
.product-grid-item .media::before,
.card--product .media::before {
  mix-blend-mode: normal !important;                  /* stop the invert/darken effect */
  background: rgba(185, 219, 191, 0.9) !important;    /* mint with alpha */
}

/* Kill any residual darken overlays on cards */
.product-card .media::after,
.product-grid-item .media::after,
.card--product .media::after {
  background: none !important;
  opacity: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}


/* If any theme overlay still darkens from ::after, kill it outright */
.product-card .media::after,
.product-grid-item .media::after,
.card--product .media::after {
  background: none !important;
  opacity: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
 /* Kill the theme’s drop-in/bounce just for this section */
#dd-slider-{{ sid }} .slideshow-control {
  transition: none !important;   /* prevents sneaky transform tweens */
  transform: none !important;
}
/* === Equalize padding for all menu drawer links === */
.menu-drawer__menu-item,
.menu-drawer__menu-item--has-submenu summary {
  padding: 0px 0px !important;   /* adjust values as needed */
}

/* If nested (child) links are indented too far, reduce their left padding */
.menu-drawer__menu-item--child,
.menu-drawer__menu-item--sub {
  padding-left: 0px !important;
}

/* Remove any extra space Shopify adds for submenu toggles */
.menu-drawer__menu-item--has-submenu summary::after {
  margin-left: 0 !important;
}