:root {
  --hdrh: 80px;
}
/* Custom Styles based on Design Language */
body {
  font-family: "Inter", sans-serif;
  background-color: #f7f5f9; /* Off-White */
  color: #31262b; /* Charcoal */
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
}
.bg-primary { background-color: #694052; } /* Deep Plum */
.text-primary { color: #694052; }
.border-primary { border-color: #694052; }
.bg-secondary { background-color: #4a624f; } /* Forest Green */
.text-secondary { color: #4a624f; }
.bg-accent { background-color: #a995a8; } /* Muted Mauve */
.border-accent { border-color: #a995a8; }
.bg-subtle { background-color: #93a48c; } /* Sage Green */
.text-subtle { color: #93a48c; }
.bg-subtle-light { background-color: #eaf0e8; }
.bg-background { background-color: #f7f5f9; } /* Off-White */
.text-main { color: #31262b; } /* Charcoal */
.border-light-grey { border-color: #d1d1d6; }

/* Component Styles */
.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem; /* rounded-lg */
  transition: all 0.2s ease-in-out;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  text-decoration: none;
    /* ensure button-like links have no underline */
}
.btn-primary { background-color: #694052; color: #f7f5f9; }
.btn-primary:hover { background-color: #7d5a6a; }
.btn-secondary { border: 2px solid #694052; color: #694052; background-color: transparent; }
.btn-secondary:hover { background-color: rgba(105, 64, 82, 0.1); }
.product-card { background-color: #f7f5f9; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0,0,0,0.05); transition: all 0.3s ease-in-out; overflow: hidden; border: 2px solid transparent; }
.product-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); border-color: #a995a8; transform: translateY(-4px); }
.form-input { background-color: #f7f5f9; border: 1px solid #d1d1d6; border-radius: 0.5rem; padding: 0.75rem 1rem; width: 100%; transition: border-color 0.2s ease-in-out; }
.form-input:focus { outline: none; border-color: #a995a8; }
.form-label { font-weight: 600; color: #31262b; margin-bottom: 0.5rem; display: block; }

/* Page transition */
.page { display: none; animation: fadeIn 0.5s ease-in-out; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Cart Panel Transition */
#cart-panel { transition: transform 0.3s ease-in-out; }
/* Dynamic aspect ratio container (defaults to square until image loads) */
.ratio-box { aspect-ratio: 1 / 1; position: relative; width: 100%; background-color: #f1eff3; }
.ratio-box img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Mobile swipe carousel for product lists */
@media (max-width: 767px) {
  #product-list, #home-product-list { display: flex !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: 1rem; padding-inline: 1rem; box-sizing: border-box; }
  #product-list .product-card, #home-product-list .product-card { min-width: calc(100% - 2rem); flex: 0 0 calc(100% - 2rem); scroll-snap-align: center; border: none; box-shadow: 0 6px 10px rgba(0,0,0,0.06); margin: 0; }
  #product-list .product-card.wide, #home-product-list .product-card.wide { box-sizing: border-box; min-width: calc(110% - 2rem); flex: 0 0 calc(110% - 2rem); overflow: hidden; }
  #product-list .product-card:not(.wide) .relative, #home-product-list .product-card:not(.wide) .relative { aspect-ratio: 3 / 4; height: auto; }
  #product-list .product-card.wide .relative, #home-product-list .product-card.wide .relative { aspect-ratio: 3 / 2; height: auto; }
  .mobile-carousel-dots { display: flex; gap: 6px; justify-content: center; margin-top: 0.75rem; }
  .mobile-carousel-dots button { width: 8px; height: 8px; border-radius: 999px; background: #d1d1d6; border: none; padding: 0; }
  .mobile-carousel-dots button[aria-pressed="true"] { background: #694052; }
}

/* Ensure the home collection aligns below sticky header and can fill the viewport */
#home-collection { scroll-margin-top: 4.5rem; min-height: calc(100vh - var(--hdrh, 80px)); }
@media (min-width: 768px) { #home-collection { scroll-margin-top: 5.5rem; } }

/* Spacer is zero by default; sized by JS to guarantee scroll room on snap */
#home-collection-spacer { height: 0px; }

/* Modal (content viewer) - follows design language */
#content-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#content-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: modal-overlay-fade 240ms ease-out forwards;
}

#content-modal .modal-panel {
  position: relative;
  background: #ffffff;
  color: var(--text-main, #31262b);
  border-radius: 0.75rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
  max-width: 56rem;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 1.25rem;
  transform-origin: center bottom;
  animation: modal-panel-pop 300ms cubic-bezier(.2, .9, .2, 1) forwards;
}

#content-modal .modal-close {
  background: transparent;
  border: none;
  color: #6b6b6b;
  font-weight: 600;
  cursor: pointer;
}

@keyframes modal-overlay-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-panel-pop {
  from {
    transform: translateY(8px) scale(.98);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Closing animation: reverse the open animations */
#content-modal.modal-closing .modal-overlay {
  animation: modal-overlay-fade 180ms linear reverse both;
}

#content-modal.modal-closing .modal-panel {
  animation: modal-panel-pop 220ms cubic-bezier(.2, .9, .2, 1) reverse both;
}

/* Ensure markdown content inherits typographic styles */
#content-modal .modal-panel h1,
#content-modal .modal-panel h2,
#content-modal .modal-panel h3 {
  font-family: "Playfair Display", serif;
  color: #31262b;
}

#content-modal .modal-panel p {
  color: #31262b;
  line-height: 1.6;
}

#content-modal .modal-panel a {
  color: #694052;
  font-weight: 600;
}

/* Focus ring consistent with design language */
.focus-ring:focus {
  outline: 3px solid rgba(169, 149, 168, 0.25);
  outline-offset: 3px;
}

/* Active nav link: emphasized text color */
.nav-link.text-main[aria-current="page"] {
  color: #694052;
  /* Deep Plum */
  font-weight: 700;
}
/* Prevent the confirmation toast from intercepting clicks when hidden */
#confirmation-message {
  pointer-events: none; /* don't block interactions while hidden */
}
#confirmation-message:not(.opacity-0) {
  pointer-events: auto; /* allow clicks when visible */
}

/* Base nav link styling for pages that don't load Tailwind (e.g., standalone 404) */
.nav-link {
  color: #31262b;
  /* text-main */
  text-decoration: none;
}

.nav-link:hover {
  color: #694052;
  /* text-primary */
}
/* Make the mobile menu fixed and sit beneath the sticky header on small screens */
@media (max-width: 767px) {
  #mobile-menu {
    position: fixed;
    /* sit directly under the header */
    top: var(--hdrh, 80px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 40; /* keep below the header (z-50) but above content */
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    background-color: var(--bg-mobile, #f7f5f9);
  margin-top: 0;
  border-top: none;
  }
  /* Respect the .hidden utility used by existing JS */
  #mobile-menu.hidden { display: none; }
  /* remove header bottom border on mobile so the menu sits flush */
  header { border-bottom-width: 0; }
}