/* =========================================================
   LINDEN HAVEN — GLOBAL HEADER
   DESKTOP + MOBILE DRAWER (UNDER HEADER)
   ========================================================= */

:root {
  --lh-cream: #f6f1e8;
  --lh-cream-soft: rgba(248, 244, 237, 0.96);

  --lh-olive: #657055;
  --lh-olive-deep: #4a5342;
  --lh-olive-hover: #7a846d;

  --lh-brown: #3e2a1f;
  --lh-white-soft: #f7f3ec;

  --lh-brand-light: #f5f1e8;
  --lh-brand-dark: #657055;

  --lh-header-bg-scrolled: rgba(248, 244, 237, 0.94);
  --lh-header-bg-solid: rgba(250, 246, 239, 0.96);
  --lh-header-border: rgba(95, 105, 85, 0.12);
  --lh-header-border-soft: rgba(62, 42, 31, 0.08);
  --lh-header-shadow: 0 10px 28px rgba(34, 32, 27, 0.06);
  --lh-header-shadow-soft: 0 8px 24px rgba(34, 32, 27, 0.05);

  --lh-icon-border: rgba(62, 42, 31, 0.08);
  --lh-icon-border-strong: rgba(62, 42, 31, 0.10);
  --lh-icon-bg: rgba(255, 255, 255, 0.58);
  --lh-icon-bg-hover: rgba(255, 255, 255, 0.84);
  --lh-icon-bg-solid: rgba(255, 255, 255, 0.74);

  --lh-badge-bg: #6f7863;
  --lh-badge-text: #ffffff;

  --lh-mobile-bg: rgba(247, 243, 236, 0.98);
}


/* =========================================================
   HEADER SHELL
   ========================================================= */

.lh-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1300;

  border-bottom: 1px solid transparent;
  box-shadow: none;

  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease;
}

.lh-header--overlay {
  background: transparent;
}

.lh-header--solid {
  background: var(--lh-header-bg-solid);
  border-bottom: 1px solid var(--lh-header-border);
  box-shadow: var(--lh-header-shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lh-header.is-scrolled,
.lh-header--overlay.is-scrolled,
.lh-header--solid.is-scrolled {
  background: var(--lh-header-bg-scrolled);
  border-bottom: 1px solid var(--lh-header-border-soft);
  box-shadow: var(--lh-header-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* =========================================================
   INNER LAYOUT
   ========================================================= */

.lh-header__inner {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  min-height: 92px;

  display: grid;
  align-items: center;
  gap: 28px;
}

.lh-header__inner--split {
  grid-template-columns: auto 1fr auto;
}


/* =========================================================
   BRAND / LOGO
   ========================================================= */

.lh-brand-logo-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  text-decoration: none;
  height: 44px;
  flex-shrink: 0;
}

.lh-brand-logo {
  display: block;
  width: auto;
  height: 31px;
  max-width: none;
  object-fit: contain;
  transition: opacity 0.35s ease, transform 0.25s ease;
}

.lh-brand-logo--dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.lh-brand-logo--light {
  opacity: 1;
}

.lh-header--overlay .lh-brand-logo--light {
  opacity: 1;
}

.lh-header--overlay .lh-brand-logo--dark {
  opacity: 0;
}

.lh-header--overlay.is-scrolled .lh-brand-logo--light,
.lh-header--solid .lh-brand-logo--light {
  opacity: 0;
}

.lh-header--overlay.is-scrolled .lh-brand-logo--dark,
.lh-header--solid .lh-brand-logo--dark {
  opacity: 1;
  height: 28.5px;
  top: 5px;
}

.lh-brand-logo-link:hover .lh-brand-logo {
  transform: translateY(-1px);
}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.lh-nav {
  display: flex;
  align-items: center;
}

.lh-nav--main {
  justify-content: flex-end;
  gap: 28px;
}

.lh-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;

  text-decoration: none;
  font-family: "Nunito", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  opacity: 0.92;
  padding: 6px 0;

  transition:
    color 0.35s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.lh-header--overlay .lh-nav-link {
  color: var(--lh-brand-light);
}

.lh-header--overlay.is-scrolled .lh-nav-link,
.lh-header--solid .lh-nav-link,
.lh-header--solid.is-scrolled .lh-nav-link {
  color: var(--lh-brand-dark);
}

.lh-nav-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.lh-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.72;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s ease;
}

.lh-nav-link:hover::after {
  transform: scaleX(1);
}


/* =========================================================
   ICON LINKS
   ========================================================= */

.lh-account-link,
.lh-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}

.lh-account-icon,
.lh-bag-icon {
	display: inline-flex;
	position: relative;
	width: 38px;
	height: 38px;
	margin-right: 2px;
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, .34);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
	display: grid;
	place-items: center;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.lh-account-link:hover .lh-account-icon,
.lh-cart-link:hover .lh-bag-icon {
  transform: translateY(-1px);
  background: var(--lh-icon-bg-hover);
  border-color: rgba(62, 42, 31, 0.12);
  box-shadow: 0 8px 20px rgba(62, 42, 31, 0.07);
}

.lh-account-image,
.lh-bag-image {
	width: 24px;
    height: 24px;
}


/* =========================================================
   CART BADGE
   ========================================================= */

.lh-cart-link--badge {
  position: relative;
}

.lh-cart-badge {
  position: absolute;
  top: -4px;
  right: -5px;

  min-width: 18px;
  height: 18px;
  padding: 0 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: var(--lh-badge-bg);
  color: var(--lh-badge-text);

  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;

  box-shadow: 0 4px 10px rgba(30, 30, 25, 0.10);
  pointer-events: none;
  z-index: 2;
}


/* =========================================================
   MOBILE ACTIONS
   ========================================================= */

.lh-header-actions {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  z-index: 1400;
}

.lh-mobile-cart-icon {
  display: none;
}


/* =========================================================
   MENU TOGGLE
   ========================================================= */

.lh-menu-toggle {
  display: none;
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 42px;
  height: 42px;
  cursor: pointer;
  justify-self: end;
  align-items: center;
  justify-content: center;
  z-index: 1401;
}

.lh-menu-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 24px;
  height: 1.5px;
  border-radius: 999px;
  transform-origin: center;
  transition:
    transform 0.28s ease,
    opacity 0.28s ease,
    background 0.35s ease;
}

.lh-menu-toggle span:nth-child(1) {
  transform: translate(-50%, -7px);
}

.lh-menu-toggle span:nth-child(2) {
  transform: translate(-50%, 0);
}

.lh-menu-toggle span:nth-child(3) {
  transform: translate(-50%, 7px);
}

.lh-header--overlay .lh-menu-toggle span {
  background: var(--lh-white-soft);
}

.lh-header--overlay.is-scrolled .lh-menu-toggle span,
.lh-header--solid .lh-menu-toggle span,
.lh-header--solid.is-scrolled .lh-menu-toggle span {
  background: var(--lh-olive-deep);
}

.lh-menu-toggle.is-active span:nth-child(1) {
  transform: translate(-50%, 0) rotate(45deg);
}

.lh-menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, 0);
}

.lh-menu-toggle.is-active span:nth-child(3) {
  transform: translate(-50%, 0) rotate(-45deg);
}


/* =========================================================
   MOBILE MENU — FLOATING DRAWER UNDER HEADER
   ========================================================= */

   .lh-mobile-menu {
     position: fixed;
     top: 82px;
     right: 0;
     width: min(86vw, 420px);
     height: auto;
     max-height: min(520px, calc(100vh - 96px));
     background: var(--lh-mobile-bg);
     border-left: 1px solid rgba(95, 105, 85, 0.08);
     border-radius: 24px 0 0 24px;
     box-shadow: -22px 24px 50px rgba(34, 32, 27, 0.16);

     transform: translateX(100%);
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     overflow: hidden;

     z-index: 1250;

     transition:
       transform 0.38s ease,
       opacity 0.28s ease,
       visibility 0.28s ease;
   }

   .lh-mobile-menu.is-open {
     transform: translateX(0);
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
   }

   .lh-mobile-nav {
     padding: 30px 30px 30px;
     display: flex;
     flex-direction: column;
     gap: 4px;
     overflow-y: auto;
     max-height: min(520px, calc(100vh - 96px));
   }

   .lh-mobile-nav__eyebrow {
     font-size: 0.68rem;
     text-transform: uppercase;
     letter-spacing: 0.22em;
     color: rgba(74, 83, 66, 0.58);
     text-align: center;
     margin-bottom: 18px;
   }

   .lh-mobile-nav a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	text-decoration: none;
	color: var(--lh-olive-deep);
	font-family: "DM Serif Display", serif;
	font-size: 1.12rem;
	font-weight: 200;
	letter-spacing: 0.03em;
	line-height: 1.2;
	padding: 20px 8px;
	border-radius: 14px;
	transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
   }

   .lh-mobile-nav a::after {
     content: "";
     position: absolute;
     left: 8px;
     right: 8px;
     bottom: 0;
     height: 1px;
     background: linear-gradient(
       to right,
       transparent,
       rgba(74, 83, 66, 0.18),
       transparent
     );
   }

   .lh-mobile-nav a:last-child::after {
     display: none;
   }

   .lh-mobile-nav a:hover {
     background: rgba(101, 112, 85, 0.05);
     transform: translateX(3px);
   }

   .lh-mobile-nav__icon {
     width: 16px;
     min-width: 16px;
     height: 16px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     opacity: 0.55;
   }

   .lh-mobile-nav__icon svg {
     width: 16px;
     height: 16px;
     display: block;
   }

   .lh-mobile-nav__label {
     display: inline-block;
   }

/* =========================================================
   PAGE OFFSET / OVERLAY
   ========================================================= */

.has-lh-header-offset {
  padding-top: 88px;
}

body.menu-open {
  overflow: hidden;
}

body.menu-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1200;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 980px) {
  .lh-header__inner {
    grid-template-columns: 1fr auto;
    min-height: 82px;
    gap: 16px;
  }

  .lh-nav {
    display: none;
  }

  .lh-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .lh-mobile-cart-icon {
    display: inline-flex;
    position: relative;
    width: 38px;
    height: 38px;
    margin-right: 2px;
	
	    appearance: none;
	    -webkit-appearance: none;
	    width: 44px;
	    height: 44px;
	    padding: 0;
	    border-radius: 14px;
	    border: 1px solid rgba(0, 0, 0, .10);
	    background: rgba(255, 255, 255, .34);
	    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
	    display: grid;
	    place-items: center;
	    cursor: pointer;
	    text-decoration: none;
	    position: relative;
	    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
	
	
  }

  .lh-mobile-cart-icon .lh-bag-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .lh-mobile-cart-icon .lh-bag-image {
    width: 17px;
    height: 17px;
  }

  .lh-mobile-cart-icon .lh-cart-badge {
    top: -1px;
    right: -1px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    font-size: 0.62rem;
    z-index: 2;
  }

  .lh-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .lh-brand-logo-link,
  .lh-brand-logo {
    height: 24px;
  }

  .lh-header--overlay.is-scrolled .lh-brand-logo--dark,
  .lh-header--solid .lh-brand-logo--dark {
    height: 22.5px;
    top: 0;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

   @media (max-width: 640px) {
     .lh-header__inner {
       width: min(100% - 24px, 1240px);
       min-height: 78px;
     }

     .lh-mobile-menu {
       top: 78px;
       width: min(90vw, 380px);
       max-height: min(480px, calc(100vh - 90px));
     }

     .lh-mobile-nav {
       padding: 24px 22px 24px;
       max-height: min(480px, calc(100vh - 90px));
     }

     .lh-mobile-nav a {
		font-size: 20px;
		padding: 19px 6px;
     }

     .lh-mobile-nav__eyebrow {
		font-size: 27px;
		margin-bottom: 14px;
		font-family: "Cormorant Garamond", serif;
		font-weight: 500;
     }

     .lh-account-icon,
     .lh-bag-icon {
       width: 40px;
       height: 40px;
       flex: 0 0 40px;
     }

     .lh-account-image,
     .lh-bag-image {
       width: 17px;
       height: 17px;
	   background: none;
     }

     .lh-mobile-cart-icon .lh-bag-icon {
       width: 36px;
       height: 36px;
	   background: none;
       flex: 0 0 36px;
     }

     .lh-mobile-cart-icon .lh-bag-image {
		width: 25px;
		height: 25px;
		background: none;
     }

     .lh-mobile-cart-icon .lh-cart-badge {
       top: -5px;
       right: -3px;
     }
   }
   
   .lh-mobile-nav__icon {
     width: 42px;
     height: 42px;
     flex: 0 0 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
   }

   .lh-mobile-nav__icon img,
   .lh-mobile-nav__icon .value-icon-image {
     width: 34px !important;
     height: 34px !important;
     max-width: 34px !important;
     max-height: 34px !important;
     object-fit: contain;
     display: block;
   }
   
   body.cart-is-opening::before {
     opacity: 0 !important;
     visibility: hidden !important;
     pointer-events: none !important;
     display: none !important;
   }

   body.cart-is-opening .lh-mobile-menu {
     opacity: 0 !important;
     visibility: hidden !important;
     pointer-events: none !important;
     transform: translateX(100%) !important;
   }