/** Shopify CDN: Minification failed

Line 21:0 Unexpected "{"
Line 559:0 Expected "}" to go with "{"

**/
/*MEGA MENU*/

.mega-menu__content {
    padding-bottom: 25rem !important;
    padding-top: 3rem !important;
    line-height: 3rem;
}

:root {
  --font-heading-family: "adobe-garamond-pro", serif;
}

/*FONTS*/
h1, h2,
{
  letter-spacing: -0.03em !important;
}

h3, h4 {
  font-family: var(--font-body-family) !important;
}

h4 {
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
}

.announcement-bar__message {
  font-family: var(--font-body-family) !important;
  text-transform: uppercase !important;
  font-size: var(--font-nav-size);
  padding: 1rem 0;
}


/*BEGINNING of navigation*/

/* Mobile drawer links/icons must stay dark even when header is transparent */
@media (max-width: 989px){
  .homepage-transparent .header-wrapper .menu-drawer,
  .homepage-transparent .header-wrapper .menu-drawer a,
  .homepage-transparent .header-wrapper .menu-drawer .list-menu__item,
  .homepage-transparent .header-wrapper .menu-drawer .menu-drawer__menu-item,
  .homepage-transparent .header-wrapper .menu-drawer summary,
  .homepage-transparent .header-wrapper .menu-drawer button{
    color: #2C1E1D !important;
    filter: none !important;
  }

  .homepage-transparent .header-wrapper .menu-drawer .icon,
  .homepage-transparent .header-wrapper .menu-drawer svg{
    color: #2C1E1D !important;
    fill: currentColor !important;
    filter: none !important;
  }
}


/* Transparent header before scrolling past hero */
.homepage-transparent .header-wrapper {
  background: transparent !important;
  position: absolute !important;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease-in-out;
}

/* Solid header after scrolling past hero */
.homepage-transparent .header-wrapper.solid {
  background: var(--gradient-background, #FFFEF8) !important;
}

/* White elements for transparent state */
.homepage-transparent .header-wrapper:not(.solid) a,
.homepage-transparent .header-wrapper:not(.solid) .header__icon,
.homepage-transparent .header-wrapper:not(.solid) .header__icon .icon,
.homepage-transparent .header-wrapper:not(.solid) .logo svg,
.homepage-transparent .header-wrapper:not(.solid) .logo img {
  color: #FFFEF8 !important;
  fill: currentColor !important;
  filter: brightness(0) invert(1);
}

/* #2C1E1D elements for solid state */
.homepage-transparent .header-wrapper.solid a,
.homepage-transparent .header-wrapper.solid .header__icon,
.homepage-transparent .header-wrapper.solid .header__icon .icon,
.homepage-transparent .header-wrapper.solid .logo svg,
.homepage-transparent .header-wrapper.solid .logo img {
  color: #2C1E1D !important;
  fill: currentColor !important;
  filter: none !important;
}


/* Top-level links when header is transparent */
.homepage-transparent .header-wrapper:not(.solid) .header__menu-item,
.homepage-transparent .header-wrapper:not(.solid) .header__menu-item:visited {
  color: #FFFEF8 !important;          /* white text */
  filter: brightness(0) invert(1); /* flips icon SVGs to white */
}

/* Drop-down text inside the mega-menu should stay dark */
.homepage-transparent .header-wrapper:not(.solid) .mega-menu a,
.homepage-transparent .header-wrapper:not(.solid) .mega-menu__link {
  color: #2C1E1D !important;   /* dark text */
  filter: none !important;  /* cancel the invert */
}

/* Optional hover state if you want a subtle change */
.homepage-transparent .header-wrapper:not(.solid) .mega-menu a:hover,
.homepage-transparent .header-wrapper:not(.solid) .mega-menu__link:hover {
  opacity: .8;
}


/* palette */
:root{
  --svalr-header-solid-bg: var(--gradient-background, #FFFEF8);
  --svalr-header-solid-fg: #2C1E1D;
}

/* Make the bar flip only when a menu item is hovered (or open) */
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
){
  background: var(--svalr-header-solid-bg) !important;
}

/* When flipped because of hover/open, force dark text/icons (override the white !important) */
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
) a,
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
) .header__icon,
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
) .header__icon .icon,
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
) .logo svg,
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
) .logo img{
  color: var(--svalr-header-solid-fg) !important;
  fill: currentColor !important;
  filter: none !important;
}

/* Make the hovered top-level item itself turn dark even without :has support */
.homepage-transparent .header-wrapper:not(.solid) .header__menu-item:hover,
.homepage-transparent .header-wrapper:not(.solid) .list-menu__item:hover{
  color: var(--svalr-header-solid-fg) !important;
  filter: none !important;
}

/* Keep dropdown/mega contents dark (you already had this, repeated here to win specificity) */
.homepage-transparent .header-wrapper .mega-menu a,
.homepage-transparent .header-wrapper .mega-menu__link{
  color: var(--svalr-header-solid-fg) !important;
  filter: none !important;
}

/* Keyboard users: flip while a menu item has focus */
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:focus,
  .list-menu__item:focus,
  .header__menu-item:focus-within,
  .list-menu__item:focus-within
){
  background: var(--svalr-header-solid-bg) !important;
}

/* Keep the SHOP trigger dark while its mega menu is open */
.homepage-transparent .header-wrapper:not(.solid) .mega-menu[open] > summary.header__menu-item{
  color: #2C1E1D !important;      /* or var(--svalr-header-solid-fg) */
  filter: none !important;
}

/* Make the caret/icon on the trigger dark too */
.homepage-transparent .header-wrapper:not(.solid) .mega-menu[open] > summary.header__menu-item .icon,
.homepage-transparent .header-wrapper:not(.solid) .mega-menu[open] > summary.header__menu-item svg{
  color: #2C1E1D !important;
  fill: currentColor !important;
  filter: none !important;
}

/* (If some top-level items are <a> links instead of <summary>, cover them too) */
.homepage-transparent .header-wrapper:not(.solid) .list-menu__item:hover{
  color: #2C1E1D !important;
  filter: none !important;
}


/* When the header flips (hover another item or a menu is open),
   also turn ALL top-level items dark — including the SHOP <summary> */
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
) .header__menu-item,
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
) .list-menu__item {
  color: var(--svalr-header-solid-fg) !important;
  filter: none !important;
}

/* Make the caret/svg on SHOP dark in that same state */
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
) .header__menu-item .icon,
.homepage-transparent .header-wrapper:not(.solid):has(
  .header__menu-item:hover,
  .list-menu__item:hover,
  .mega-menu[open]
) .header__menu-item svg {
  color: var(--svalr-header-solid-fg) !important;
  fill: currentColor !important;
  filter: none !important;
}
/*end of navigation*/









/*FOR CART DRAWER*/
.drawer__footer {
    border-top: .1rem solid rgba(var(--color-foreground));
    padding: 10rem 0 !important;
}

button.drawer__close {
    font-style: italic;
    font-family: var(--font-heading-family);
    font-size: calc(var(--font-heading-scale) * 2.4rem);
    font-feature-settings: "swsh" 1;
}

.drawer__heading {
    font-feature-settings: "swsh" 1;
    font-style: italic;
}





@media screen and (min-width: 750px) {
    .cart-items {
        padding: 6rem 30rem !important;
    }
    .drawer__footer {
    padding: 10rem 30rem !important;
}
}



.drawer__header {
    padding: 1.5rem 3rem !important;
}

.drawer__close {
    padding: 0 3rem !important;
}


.cart-drawer .cart__checkout-button {
    border-bottom: 1px solid rgb(44, 30, 29);
    border-top: 1px solid rgb(44, 30, 29);
    color: var(--color-foreground) !important;
    background: transparent !important;
}

.cart-drawer .cart__checkout-button:hover {
  background: #C19F4D !important;
}

.cart-drawer .cart-items th {
    border-bottom: .1rem solid rgba(var(--color-foreground)) !important;
}

.cart-drawer thead {
    color: #2C1E1D !important;
}








/* BORDERS FOR PRODUCT PAGE*/
/* No inner padding so the outer grid lines touch the edges */
.collection.page-width { padding: 0 !important; }

/* Outer frame + 3-col grid */
ul#product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 !important;

  /* outer frame */
  border-top: 1px solid #2C1E1D;
  border-left: 1px solid #2C1E1D;
}

/* Single set of inner lines */
ul#product-grid .grid__item {
  box-sizing: border-box;
  width: 100% !important;              /* keep product cards from shrinking */
  border-right: 1px solid #2C1E1D;        /* vertical lines (no doubles) */
  border-bottom: 1px solid #2C1E1D;       /* horizontal lines */
}

/* Make the card contents use the full cell width */
ul#product-grid .grid__item > * { width: 100%; }

/* Tablet: 2 columns */
@media (max-width: 989px) {
  ul#product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Force 2 columns on phones */
@media (max-width: 749px) {
  .collection ul#product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  /* ensure each card takes exactly one track */
  .collection ul#product-grid .grid__item {
    grid-column: auto / span 1 !important;
    width: 100% !important;           /* fill its cell */
    box-sizing: border-box;
    border-right: 1px solid #2C1E1D;
    border-bottom: 1px solid #2C1E1D;
  }
}










/* Ensure product card allows absolute positioning */
ul#product-grid .grid__item {
  position: relative;
  overflow: hidden;
}

/* Keep product title/price at top */
ul#product-grid .grid__item .card__content {
  order: -1;
}



/* Button styling */
ul#product-grid .grid__item .quick-add .button,
ul#product-grid .grid__item .card__actions .button {
  display: block;
  width: 100%;
  height: var(--qa-h);
  line-height: var(--qa-h);
  text-align: center;
  background-color: transparent; /* match your product card bg */
  color: #111;
}

/* Show button on hover */
ul#product-grid .grid__item:hover .quick-add,
ul#product-grid .grid__item:hover .card__actions {
  opacity: 1;
  pointer-events: auto;
}

/* inside product cards only */
ul#product-grid .grid__item .quick-add .button,
ul#product-grid .grid__item .card__actions .button,
ul#product-grid .grid__item .quick-add__submit {
  border-top: 1px solid #2C1E1D !important;       /* remove border */
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0;
  background-color: #C19F4D; /* your card bg */
}


@media screen and (max-width: 750px) {
  ul#product-grid .grid__item .quick-add .button,
ul#product-grid .grid__item .card__actions .button,
ul#product-grid .grid__item .quick-add__submit {
  border-top: 1px solid #2C1E1D !important;       /* remove border */
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0;
  background-color: transparent !important; /* your card bg */
}
}

/* remove Dawn's inner border / ring created with pseudo-elements */
ul#product-grid .grid__item .quick-add .button::before,
ul#product-grid .grid__item .quick-add .button::after,
ul#product-grid .grid__item .card__actions .button::before,
ul#product-grid .grid__item .card__actions .button::after,
ul#product-grid .grid__item .quick-add__submit::before,
ul#product-grid .grid__item .quick-add__submit::after {
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* also disable focus ring on tap/keyboard if you don't want it */
ul#product-grid .grid__item .quick-add .button:focus,
ul#product-grid .grid__item .card__actions .button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Button at bottom, hidden by default */
ul#product-grid .grid__item .quick-add,
ul#product-grid .grid__item .card__actions {
  position: absolute;
  left: 0;             /* was -1px */
  right: 0;            /* was -1px */
  bottom: 0;           /* was -1px */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile/tablet: show button, no hover, still bottom-fixed */
@media (max-width: 989px) {
  /* leave space for the button so it doesn't cover text/image */
  ul#product-grid .grid__item .card,
  ul#product-grid .grid__item .card-wrapper {
    padding-bottom: var(--qa-h, 20px);
  }

  /* keep the same absolute bottom positioning, just visible */
  ul#product-grid .grid__item .quick-add,
  ul#product-grid .grid__item .card__actions {
    opacity: 1;
    pointer-events: auto;
    transition: none;      /* no fade/hover effect */
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
  }
}




/* Desktop: promo spans 2 cols */
@media (min-width: 990px) {
  #product-grid > li.collection-promo { grid-column: 3 / span 2; }
}

/* Mobile/tablet: make promo full width */
@media (max-width: 989px) {
  #product-grid > li.collection-promo { grid-column: 1 / -1 !important; }
}

/* Fill the row height and avoid the “half-empty” cell */
#product-grid > li.collection-promo {
  align-self: stretch;            /* make the grid item match the row height */
}
#product-grid > li.collection-promo img {
  display: block;
  width: 100%;
  height: 100%;                   /* fill the stretched tile */
  object-fit: cover;              /* crop nicely */
}





.facet-filters__label {
    display: block;
    color: rgba(var(--color-foreground), .85);
    font-size: 2rem !important;
    font-family: var(--font-heading-family);
    font-style: italic;
    font-feature-settings: "swsh" 1;




/* Ensure the new image link actually receives clicks */
.card__media a.media,
.card__media a.media * { pointer-events: auto; }

/* Optional: stop the title overlay from intercepting clicks */
.card__heading .full-unstyled-link::after { pointer-events: none; }



/* Let the overlay cover the whole inner card, not just content */
.card__inner { position: relative; }
.card__heading .full-unstyled-link::after {
  content:"";
  position:absolute;
  inset:0;                /* stretch */
  z-index:10;             /* above image/decor */
}

/* Quick-add stays usable but only over its own strip */
.grid__item .quick-add,
.grid__item .card__actions { position:absolute; left:0; right:0; bottom:0; z-index:20; }

/* In sliders specifically, don’t let the overlay be blocked */
slider-component .card__heading .full-unstyled-link::after { pointer-events:auto; }