/* Matches Next `globals.css` + layout “site-canvas” visuals */

:root {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --muted: #a1a1aa;
  --border: #3f3f46;
  --font-dm-sans: "DM Sans", system-ui, sans-serif;
  --font-cormorant: "Cormorant Garamond", Georgia, serif;
  --font-graffiti: "Rock Salt", cursive;
}

html {
  scroll-behavior: smooth;
}

html[data-age-verified] #age-verification-overlay {
  display: none !important;
  pointer-events: none;
}

body.site-canvas {
  background-color: #0a0a0a;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% -20%, rgba(255, 255, 255, 0.07), transparent 52%),
    radial-gradient(ellipse 60% 48% at 100% 5%, rgba(255, 255, 255, 0.04), transparent 48%),
    radial-gradient(ellipse 55% 42% at 0% 60%, rgba(255, 255, 255, 0.03), transparent 42%),
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(10, 10, 10, 0.75), transparent 55%);
  background-attachment: fixed;
}

::selection {
  background: #fafafa;
  color: #0a0a0a;
}

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float-slow {
  animation: float-slow 10s ease-in-out infinite;
}
@keyframes fh-icon-glow {
  0%, 100% {
    opacity: 0.5;
    filter: drop-shadow(0 0 4px rgba(250,248,245,0.1));
  }
  50% {
    opacity: 0.75;
    filter: drop-shadow(0 0 12px rgba(250,248,245,0.2));
  }
}

.fh-journey-icon {
  animation: fh-icon-glow 4s ease-in-out infinite;
}

.fh-journey-icon-2 {
  animation: fh-icon-glow 4s ease-in-out infinite 1.3s;
}

.fh-journey-icon-3 {
  animation: fh-icon-glow 4s ease-in-out infinite 2.6s;
}


.graffiti-title {
  font-family: var(--font-graffiti), "Impact", "Arial Black", sans-serif;
  letter-spacing: 0.01em;
  font-weight: 400;
  line-height: 1.28;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hero-graffiti-headline {
  isolation: isolate;
  transform: translateZ(0);
}

.spray-overlay {
  background-image:
    radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.18) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 66%, rgba(255, 255, 255, 0.14) 0 1.4px, transparent 2px),
    radial-gradient(circle at 40% 82%, rgba(255, 255, 255, 0.16) 0 1.5px, transparent 2px);
  background-size: 210px 180px, 190px 160px, 170px 140px;
}

.graffiti-card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 36px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html.a11y-large-text {
  font-size: 106.25%;
}

@media (min-width: 768px) {
  html.a11y-large-text {
    font-size: 112.5%;
  }
}

html.a11y-highlight-links main a,
html.a11y-highlight-links #main-content a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #0a0a0a;
  border-radius: 0.375rem;
  outline: 2px solid #0a0a0a;
}

/* ── Cannabis rotating warning ── */
/* One warning displayed per page load, randomly selected via JS. */
.rotating-warning {
  /* Reserve height so layout doesn't shift before JS runs */
  min-height: 2.5em;
}

.map-embed-visit iframe {
  filter: grayscale(1) contrast(1.1) brightness(0.82);
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP SECTION — Premium Dark Editorial
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shop: Section heading ── */
#fh-shop .fh-section-head {
  position: relative;
}
#fh-shop .fh-section-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4d4d8 15%, #d4d4d8 85%, transparent);
}
#fh-shop .fh-section-head span {
  position: relative;
  display: inline-block;
  background: #fff;
  padding-right: 1rem;
}


/* ── Shop: Filter bar ── */
#fh-filters {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5ddd0;
  padding: 1rem 0;
  margin: 0 -1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px) {
  #fh-filters {
    margin: 0 -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ── Shop: Category filter buttons ── */
.fh-cat-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid #d4d4d8;
  background: #fff;
  color: #171717;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  transition: all 200ms ease;
  cursor: pointer;
}
.fh-cat-btn:hover {
  background: #faf8f5;
  border-color: #b8b0a6;
}
.fh-cat-btn.fh-cat-active {
  background: #1a1a1a;
  color: #fafafa;
  border-color: #1a1a1a;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}


/* ── Shop: Species filter pills ── */
.fh-species-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid #d4d4d8;
  background: #fff;
  padding: 0.375rem 0.875rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: all 180ms ease;
  cursor: pointer;
}
.fh-species-btn:hover {
  background: #faf8f5;
  border-color: #b8b0a6;
}
.fh-species-btn.fh-species-active {
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.fh-species-btn[data-species="indica"].fh-species-active {
  background-color: #8B1A3E;
  color: #fff;
  border-color: #8B1A3E;
}
.fh-species-btn[data-species="sativa"].fh-species-active {
  background-color: #2D5A27;
  color: #fff;
  border-color: #2D5A27;
}
.fh-species-btn[data-species="hybrid"].fh-species-active {
  background-color: #A67C00;
  color: #fff;
  border-color: #A67C00;
}

/* On-sale toggle */
#fh-sale-toggle {
  accent-color: #b8860b;
}


/* ── Shop: Active filter chips ── */
#fh-active-filters .fh-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid #e5ddd0;
  background: #faf8f5;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  color: #574d47;
  transition: all 150ms ease;
}
#fh-active-filters .fh-filter-chip:hover {
  border-color: #b8b0a6;
}
#fh-active-filters .fh-filter-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  color: #a1a1aa;
  transition: color 150ms ease;
  cursor: pointer;
  background: none;
  border: none;
}
#fh-active-filters .fh-filter-chip button:hover {
  color: #171717;
}

/* ── Shop: Search bar ── */
.fh-filter-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.fh-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
@media (min-width: 768px) {
  .fh-search-wrap { max-width: 320px; }
}
.fh-search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: #a1a1aa;
  pointer-events: none;
}
.fh-search-input {
  width: 100%;
  border-radius: 9999px;
  border: 1px solid #d4d4d8;
  background: #fff;
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  font-size: 0.875rem;
  color: #171717;
  outline: none;
  transition: border-color 200ms ease;
}
.fh-search-input::placeholder { color: #a1a1aa; }
.fh-search-input:focus {
  border-color: #171717;
  box-shadow: 0 0 0 1px #171717;
}
.fh-sort-select {
  border-radius: 9999px;
  border: 1px solid #d4d4d8;
  background: #fff;
  padding: 0.625rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #57534e;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2357534e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
  transition: border-color 200ms ease;
}
.fh-sort-select:focus {
  border-color: #171717;
  box-shadow: 0 0 0 1px #171717;
}


/* ── Shop: Product cards ── */
#menu-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  #menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  #menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1280px) {
  #menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1536px) {
  #menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
#menu-grid article {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: #faf8f5;
  border: 1px solid #e5ddd0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
#menu-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.09);
  border-color: #cfc4b9;
}
#menu-grid article button { cursor: pointer; }

/* Card image wrapper */
#menu-grid article .fh-card-img-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f4eee6, #e5ddd0);
  aspect-ratio: 3/4;
}
#menu-grid article .fh-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
#menu-grid article:hover .fh-card-img-wrap img {
  transform: scale(1.04);
}

/* Cannabis leaf placeholder */
.fh-canna-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(244,238,230,0.9), rgba(229,221,208,0.9)),
    url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22%23b8b0a6%22 d=%22M50 5 C52 25 40 20 35 35 C30 20 20 25 22 40 C10 35 5 45 15 55 C5 60 10 70 25 65 C20 75 30 80 40 75 L48 95 L52 95 L60 75 C70 80 80 75 75 65 C90 70 95 60 85 55 C95 45 90 35 78 40 C80 25 70 20 65 35 C60 20 48 25 50 5 Z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto, cover;
}

/* Badges on cards */
.fh-sale-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 10;
  border-radius: 9999px;
  background: #b8860b;
  color: #fff;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.fh-species-badge {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 10;
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.fh-species-badge.indica { background: rgba(139,26,62,0.9); color: #fff; }
.fh-species-badge.sativa { background: rgba(45,90,39,0.9); color: #fff; }
.fh-species-badge.hybrid { background: rgba(166,124,0,0.9); color: #fff; }
.fh-species-badge.default { background: rgba(26,26,26,0.75); color: #fafafa; }

/* Card body */
.fh-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem;
}
.fh-card-category {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #a1a1aa;
}
.fh-card-name {
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  text-wrap: balance;
}
.fh-card-brand {
  font-size: 0.75rem;
  color: #8a847e;
}
.fh-card-weight {
  font-size: 0.6875rem;
  color: #b0a99e;
}
.fh-card-potency {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: #7a726a;
  background: rgba(0,0,0,0.04);
}
.fh-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.fh-card-price {
  font-family: var(--font-dm-sans), system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}
.fh-card-price-sale {
  color: #b8860b;
}
.fh-card-price-was {
  font-size: 0.875rem;
  color: #a1a1aa;
  text-decoration: line-through;
}

/* Quick-add button */
.fh-card-btn {
  margin-top: 0.5rem;
  width: 100%;
  border-radius: 9999px;
  border: 1px solid #1a1a1a;
  background: transparent;
  color: #1a1a1a;
  padding: 0.25rem 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: all 200ms ease;
  cursor: pointer;
}
.fh-card-btn:hover {
  background: #1a1a1a;
  color: #fafafa;
}


/* ── Shop: Loading skeleton ── */
#fh-loading .animate-pulse {
  border-radius: 1.5rem;
  border: 1px solid #e5ddd0;
  background: #faf8f5;
  padding: 1rem;
}
#fh-loading .animate-pulse > div {
  border-radius: 1rem;
  background: #e5ddd0;
}


/* ── Shop: Empty / Error states ── */
#fh-empty, #fh-error {
  padding: 4rem 1rem;
  text-align: center;
  color: #a1a1aa;
}
#fh-error {
  color: #991b1b;
}


/* ── Shop: Deals section ── */
#fh-deals-grid {
  display: grid;
  gap: 1rem;
}
#fh-deals-grid article {
  border-radius: 1.5rem;
  border: 1px solid #e5ddd0;
  background: #faf8f5;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 200ms ease;
}
#fh-deals-grid article:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}
#fh-deals-grid article h3 {
  font-family: var(--font-cormorant), Georgia, serif;
  font-weight: 600;
  color: #1a1a1a;
}


/* ── Shop: Product Count ── */
#fh-count {
  font-size: 0.8125rem;
  color: #a1a1aa;
  letter-spacing: 0.05em;
}


/* ── Shop: Load More Button ── */
#fh-load-more {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid #1a1a1a;
  padding: 0.75rem 2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: #1a1a1a;
  background: transparent;
  transition: all 200ms ease;
  cursor: pointer;
}
#fh-load-more:hover {
  background: #1a1a1a;
  color: #fafafa;
}


/* ── Shop: Modal overlay ── */
.fh-modal-overlay { position: fixed; z-index: 150; transition: opacity 200ms ease; }
.fh-modal-backdrop { position: absolute; inset: 0; z-index: 1; transition: background-color 200ms ease; }
.fh-modal-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fh-slide-in 250ms ease-out;
  /* Mobile: full-height slide-in from right */
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  background: #faf8f5;
  box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}

/* Mobile: close button sticks to top-right, always visible above scroll */
#fh-detail-close {
  position: sticky;
  top: 0;
  right: 0;
  z-index: 20;
  float: right;
  margin: 0.75rem;
}
/* Desktop: centered modal */
@media (min-width: 768px) {
  .fh-modal-panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 36rem;
    max-height: 90vh;
    border-radius: 1.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
    animation: fh-modal-center-in 250ms ease-out;
  }
}
@keyframes fh-modal-center-in {
  from { transform: translate(-50%, -50%) scale(0.97); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes fh-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ── Shop: Detail Modal ── */
#fh-detail-content {
  flex: 1 1 0%;
  overflow-y: auto;
  scroll-behavior: smooth;
}
#fh-detail-content .fh-detail-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(135deg, #f4eee6, #e5ddd0);
}
#fh-detail-content .fh-detail-img-wrap img {
  width: 100%;
  object-fit: cover;
}
#fh-detail-content .fh-detail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(244,238,230,0.9), rgba(229,221,208,0.9)),
    url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22%23b8b0a6%22 d=%22M50 5 C52 25 40 20 35 35 C30 20 20 25 22 40 C10 35 5 45 15 55 C5 60 10 70 25 65 C20 75 30 80 40 75 L48 95 L52 95 L60 75 C70 80 80 75 75 65 C90 70 95 60 85 55 C95 45 90 35 78 40 C80 25 70 20 65 35 C60 20 48 25 50 5 Z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25% auto, cover;
}
#fh-detail-content .fh-detail-cat {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #a1a1aa;
}
#fh-detail-content .fh-detail-name {
  font-family: var(--font-cormorant), Georgia, serif;
  font-weight: 700;
  color: #1a1a1a;
}
#fh-detail-content .fh-detail-variant-btn {
  border-radius: 9999px;
  border: 1px solid #d4d4d8;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  transition: all 180ms ease;
  cursor: pointer;
  background: #fff;
  color: #574d47;
}
#fh-detail-content .fh-detail-variant-btn:hover {
  border-color: #b8b0a6;
}
/* Selected variant — warm dark */
#fh-detail-content .fh-detail-variant-btn.border-neutral-900,
#fh-detail-content .fh-detail-variant-btn.bg-neutral-900 {
  border-color: #574d47;
  background: #574d47;
  color: #faf8f5;
}
#fh-detail-content .fh-detail-variant-btn.border-neutral-900:hover,
#fh-detail-content .fh-detail-variant-btn.bg-neutral-900:hover {
  border-color: #3d3530;
  background: #3d3530;
}

#fh-detail-content .fh-detail-price {
  font-family: var(--font-dm-sans), system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}
#fh-detail-content .fh-detail-potency-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #a1a1aa;
}
#fh-detail-content .fh-detail-potency-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
#fh-detail-content .fh-detail-potency-item {
  border-radius: 0.5rem;
  background: #faf8f5;
  border: 1px solid #e5ddd0;
  padding: 0.5rem 0.75rem;
}
#fh-detail-content .fh-detail-potency-item p:first-child {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a1a1aa;
}
#fh-detail-content .fh-detail-potency-item p:last-child {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a1a;
}
#fh-detail-content .fh-detail-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #574d47;
}


/* ── Shop: Cart panel ── */
#fh-cart-panel {
  position: fixed;
  inset: 0;
  z-index: 160;
}
.fh-cart-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 200ms ease;
}
.fh-cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 28rem;
  background: #0a0a0a;
  color: #fafafa;
  border-left: 1px solid #1f1f1f;
  box-shadow: -8px 0 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  z-index: 2;
  animation: fh-cart-slide 250ms ease-out;
  overflow: hidden;
}
@keyframes fh-cart-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

#fh-cart-panel .fh-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #44403c;
  padding: 1.25rem 1.5rem;
  flex-shrink: 0;
}
#fh-cart-panel .fh-cart-header h2 {
  font-size: 1.125rem;
}
#fh-cart-panel .fh-cart-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid #57534e;
  color: #d4d4d8;
  background: transparent;
  cursor: pointer;
  transition: all 150ms ease;
}
#fh-cart-panel .fh-cart-close-btn:hover {
  border-color: #fafafa;
  color: #fafafa;
}

#fh-cart-items {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.5rem;
  min-height: 0;
}
#fh-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #a1a1aa;
}
#fh-cart-empty svg { margin-bottom: 0.75rem; width: 3rem; height: 3rem; }
#fh-cart-empty p { font-size: 0.875rem; }

#fh-cart-items .fh-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-bottom: 1px solid #1f1f1f;
  padding: 1rem 0;
}
#fh-cart-items .fh-cart-thumb {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  object-fit: cover;
  background: linear-gradient(135deg, #1a1a1a, #111);
}
#fh-cart-items .fh-cart-placeholder {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #525252;
  background: linear-gradient(135deg, #1a1a1a, #111);
}
#fh-cart-items .fh-cart-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fafafa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fh-cart-items .fh-cart-variant {
  font-size: 0.75rem;
  color: #a1a1aa;
}
#fh-cart-items .fh-cart-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: #cfc4b9;
}
#fh-cart-items .fh-cart-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 1px solid #44403c;
  color: #a1a1aa;
  background: transparent;
  transition: all 150ms ease;
  cursor: pointer;
}
#fh-cart-items .fh-cart-qty-btn:hover {
  border-color: #fafafa;
  color: #fafafa;
}

/* Cart footer & inner elements */
.fh-cart-browse-btn {
  display: inline-flex;
  border-radius: 9999px;
  border: 1px solid #57534e;
  padding: 0.5rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fafafa;
  text-decoration: none;
  transition: all 150ms ease;
  margin-top: 1rem;
}
.fh-cart-browse-btn:hover { background: #fff; color: #0a0a0a; }

#fh-cart-footer {
  border-top: 1px solid #44403c;
  padding: 1.25rem 1.5rem;
  flex-shrink: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 50vh;
}
.fh-cart-pricing { display: flex; flex-direction: column; gap: 0.5rem; }
.fh-cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
.fh-cart-row-muted { color: #a1a1aa; }
.fh-cart-discount { color: #d97706; }
.fh-cart-total {
  border-top: 1px solid #44403c;
  padding-top: 0.5rem;
  font-weight: 700;
  color: #fafafa;
  font-size: 1rem;
}

.fh-cart-promo {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.fh-cart-promo-input {
  flex: 1;
  border-radius: 9999px;
  border: 1px solid #44403c;
  background: transparent;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #fafafa;
  outline: none;
  transition: border-color 150ms ease;
}
.fh-cart-promo-input::placeholder { color: #525252; }
.fh-cart-promo-input:focus { border-color: #fafafa; }
.fh-cart-promo-btn {
  border-radius: 9999px;
  border: 1px solid #57534e;
  padding: 0.5rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #d4d4d8;
  background: transparent;
  cursor: pointer;
  transition: all 150ms ease;
}
.fh-cart-promo-btn:hover { border-color: #fafafa; color: #fafafa; }

.fh-checkout-btn {
  width: 100%;
  border-radius: 9999px;
  background: #44403c;
  padding: 0.875rem 1.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: #a1a1aa;
  border: none;
  cursor: not-allowed;
}
.fh-cart-note {
  text-align: center;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #525252;
  margin-top: 0.5rem;
}

#fh-discounts-list { margin-top: 0.75rem; }

#fh-discounts-list .fh-cart-discount-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: #d97706;
  padding: 0.25rem 0;
}
#fh-discounts-list .fh-cart-discount-item button {
  color: #737373;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  transition: color 150ms ease;
}
#fh-discounts-list .fh-cart-discount-item button:hover { color: #fafafa; }



/* ── Shop: Toast ── */
#fh-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(5rem);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 200;
  pointer-events: none;
}
#fh-toast.fh-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.fh-toast-inner {
  pointer-events: auto;
  background: #1a1a1a;
  color: #fafafa;
  border: 1px solid #292524;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ── Homepage: Category Nav Buttons ── */
.fh-nav-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 3rem;
}
@media (min-width: 640px) {
  .fh-nav-btns { gap: 0.75rem; }
}
.fh-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  min-width: 8.5rem;
  border-radius: 9999px;
  border: 1.5px solid #574d47;
  background: rgba(250,248,245,0.65);
  color: #1c1917;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms ease;
}
.fh-nav-btn:hover {
  background: rgba(28,25,23,0.85);
  border-color: #1c1917;
  color: #faf8f5;
  transform: translateY(-1px);
  }
}


/* On Sale section */
.fh-sale-section {
  background-color: #0d0d0d;
}

/* Sale carousel */
.fh-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fh-carousel-track-wrap {
  overflow: hidden;
  flex: 1;
  border-radius: 1rem;
}
.fh-carousel-track {
  display: flex;
  gap: 0.5rem;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}
.fh-carousel-track > * {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 640px) {
  .fh-carousel-track > * {
    flex: 0 0 calc(50% - 0.25rem);
    max-width: calc(50% - 0.25rem);
  }
}
@media (min-width: 1024px) {
  .fh-menu-carousel .fh-carousel-track > * {
    flex: 0 0 calc(33.333% - 0.34rem);
    max-width: calc(33.333% - 0.34rem);
  }
}

.fh-carousel-prev,
.fh-carousel-next {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  color: #fafafa;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.fh-carousel-prev:hover,
.fh-carousel-next:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}
.fh-carousel-prev:hover,
.fh-carousel-next:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}
/* Light-background carousel nav (menu page sale section) */
.fh-sale-light-section .fh-carousel-prev,
.fh-sale-light-section .fh-carousel-next {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: #574d47;
}
.fh-sale-light-section .fh-carousel-prev:hover,
.fh-sale-light-section .fh-carousel-next:hover {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.25);
}
.fh-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0 3rem;
}
.fh-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.fh-carousel-dot.active {
  background: #fafafa;
  transform: scale(1.25);
}
/* Menu page sale section has light background — use dark dots */
.fh-sale-light-section .fh-carousel-dot {
  background: rgba(0,0,0,0.15);
}
.fh-sale-light-section .fh-carousel-dot.active {
  background: #574d47;
}

/* Sale card */
.fh-sale-card {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #faf8f5;
  border: 1px solid rgba(87, 77, 71, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 300ms ease, box-shadow 300ms ease;
  cursor: pointer;
}
.fh-sale-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

/* Sale card image area */
.fh-sale-card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f4eee6;
}
.fh-sale-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.fh-sale-card:hover .fh-sale-card-img-wrap img {
  transform: scale(1.04);
}

/* Placeholder */
.fh-sale-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(244,238,230,0.9), rgba(229,221,208,0.9)),
    url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath fill=%22%23b8b0a6%22 d=%22M50 5 C52 25 40 20 35 35 C30 20 20 25 22 40 C10 35 5 45 15 55 C5 60 10 70 25 65 C20 75 30 80 40 75 L48 95 L52 95 L60 75 C70 80 80 75 75 65 C90 70 95 60 85 55 C95 45 90 35 78 40 C80 25 70 20 65 35 C60 20 48 25 50 5 Z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto, cover;
}

/* Sale badge */
.fh-sale-card-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 10;
  border-radius: 9999px;
  background: #b8860b;
  color: #fff;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Card body */
.fh-sale-card-body {
  padding: 1rem;
}

/* Category label */
.fh-sale-card-cat {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #574d47;
  margin-bottom: 0.375rem;
}

/* Product name */
.fh-sale-card-name {
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  color: #1a1a1a;
  margin: 0;
}

/* Brand */
.fh-sale-card-brand {
  font-size: 0.75rem;
  color: #78716c;
  margin-top: 0.25rem;
}

/* Price row */
.fh-sale-card-price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

/* Original price */
.fh-sale-card-price-was {
  font-size: 0.8125rem;
  color: #a8a29e;
  text-decoration: line-through;
}

/* Sale price */
.fh-sale-card-price-now {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #b8860b;
}

/* Potency */
.fh-sale-card-potency {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: #78716c;
}
/* ═══════════════════════════════════════════════════════════════════
   MENU WHAT'S ON SALE GRID
   ═══════════════════════════════════════════════════════════════════ */
.fh-sale-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .fh-sale-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .fh-sale-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.fh-sale-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(0,0,0,0.08);
  background: #faf8f5;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.fh-sale-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.fh-sale-card-img-wrap {
  position: relative;
  height: 12rem;
  overflow: hidden;
  background: #edeae5;
}
.fh-sale-card-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.fh-sale-card:hover .fh-sale-card-img-wrap img {
  transform: scale(1.04);
}

.fh-sale-card-placeholder {
  height: 12rem;
  background: linear-gradient(135deg, #edeae5, #e3ded5);
}

.fh-sale-card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  background: #b8860b;
  border: 1px solid rgba(184,134,11,0.35);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 2;
}

.fh-sale-card-body {
  padding: 1rem 1.1rem 1.15rem;
}

.fh-sale-card-cat {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #b8860b;
  margin-bottom: 0.4rem;
}

.fh-sale-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  color: #111111;
  margin: 0;
}

.fh-sale-card-brand {
  font-size: 0.75rem;
  color: #78716c;
  margin: 0.25rem 0 0 0;
}

.fh-sale-card-price-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.fh-sale-card-price-was {
  font-size: 0.85rem;
  color: #a8a29e;
  text-decoration: line-through;
}

.fh-sale-card-price-now {
  font-size: 1.05rem;
  font-weight: 700;
  color: #b8860b;
}

.fh-sale-card-potency {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.fh-sale-card-potency span {
  font-size: 0.7rem;
  color: #78716c;
  background: rgba(0,0,0,0.04);
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
}

/* ═══════════════════════════════════════════════════════════════════
   HIGHLIGHTS SECTION — Latest additions (dark section on homepage)
   ═══════════════════════════════════════════════════════════════════ */
.fh-hl-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fh-hl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.fh-hl-placeholder {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fh-hl-placeholder::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23444" stroke-width="1.5"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-1 14.5v-5h2v5h-2zm0-7V7h2v2.5h-2z"/></svg>') center/contain no-repeat;
  opacity: 0.5;
}

.fh-hl-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 1;
}
.fh-hl-cat {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #a8a29e;
}
.fh-hl-name {
  font-family: var(--font-graffiti), 'Rock Salt', cursive;
  font-size: 1.1rem;
  color: #fafafa;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  line-height: 1.2;
}
.fh-hl-brand {
  font-size: 0.6875rem;
  color: #d4d4d4;
  letter-spacing: 0.05em;
}
.fh-hl-price {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fafafa;
  margin-top: 0.2rem;
}