@font-face {
  font-family: "philly-sans";
  src:
    url("/__fh/fonts/philly-sans.woff2")
      format("woff2"),
    url("/__fh/fonts/philly-sans.woff")
      format("woff");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --fh-font-family: "philly-sans", "GtWalsheim", "Avenir Next", Arial, sans-serif;
  --fh-header-footer-color: #ffffff;
  --fh-age-gate-bg: #d8ebc7;
  --fh-age-gate-overlay: rgba(216, 235, 199, 0.72);
  --fh-age-gate-text: #2b5d6b;
  --fh-main-text-color: #2b5d6b;
  --fh-button-bg: #620674;
  --fh-button-text: #fde68a;
  --fh-landing-bg: #d8c1dd;
  --fh-neutral-bg: #f5f5f5;
  --fh-product-text-strong: #000000;
  --flowhub-header-background-color: var(--fh-header-footer-color);
  --flowhub-header-secondary-background-color: var(--fh-button-bg);
  --flowhub-main-text-color: var(--fh-main-text-color);
  --flowhub-button-background-color: var(--fh-button-bg);
  --flowhub-button-text-color: var(--fh-button-text);
  --flowhub-cart-button-background-color: var(--fh-header-footer-color);
  --flowhub-cart-button-background-color-gradient-from: var(--fh-header-footer-color);
  --flowhub-cart-button-background-color-gradient-to: var(--fh-header-footer-color);
  --flowhub-landing-page-background-color: var(--fh-landing-bg);
  --flowhub-neutral-background-color: var(--fh-neutral-bg);
  --mantine-font-family: var(--fh-font-family) !important;
  --mantine-font-family-headings: var(--fh-font-family) !important;
  --mantine-font-size-md: 1.1rem;
  --mantine-font-size-lg: 1.28rem;
  --mantine-font-size-xl: 1.55rem;
  --mantine-h2-font-size: 2.2rem;
  --mantine-line-height-md: 1.45;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--fh-font-family) !important;
}

/* Mantine injects runtime font styles; force custom family on rendered UI nodes. */
[class*="mantine-"],
.flowhub-product-card,
header,
footer {
  font-family: var(--fh-font-family) !important;
}

.mantine-Button-label,
.product-brand,
.product-name,
.product-category,
.product-potency,
.product-pricing {
  font-family: var(--fh-font-family) !important;
}

.flowhub-product-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  height: 100% !important;
  gap: 0.85rem !important;
}

.flowhub-product-card > div[style*="flex:1"] {
  min-height: 7.2rem;
}

.flowhub-product-card .product-brand {
  color: var(--fh-product-text-strong) !important;
  font-size: clamp(1.1rem, 0.9vw + 0.85rem, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin: 0 0 0.2rem !important;
}

.flowhub-product-card .product-name {
  color: var(--flowhub-main-text-color) !important;
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  min-height: 2.3em !important;
}

.flowhub-product-card .product-category,
.flowhub-product-card .product-potency,
.flowhub-product-card .product-pricing {
  color: var(--fh-product-text-strong) !important;
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.2rem) !important;
  line-height: 1.2 !important;
}

.flowhub-product-card .product-category {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  border: 1px solid var(--flowhub-main-text-color) !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  padding: 2px 6px !important;
  font-weight: 600 !important;
}

.flowhub-product-card .mantine-Flex-root {
  margin-top: auto !important;
  min-height: 2.1rem !important;
  display: flex !important;
  align-items: flex-end !important;
}

.flowhub-product-card > form {
  margin-top: auto !important;
  width: 100% !important;
}

.flowhub-product-card button.mantine-Button-root {
  min-height: 3rem !important;
  align-self: stretch !important;
}

.flowhub-product-card button.mantine-Button-root .mantine-Button-label {
  color: var(--flowhub-button-text-color) !important;
  font-size: 1.32rem !important;
  font-weight: 700 !important;
}

/* Keep age-gate styled even while header/footer are white. */
body:has(#age-gate-title) {
  --flowhub-header-background-color: var(--fh-age-gate-bg) !important;
  --flowhub-header-text-color: var(--fh-age-gate-text) !important;
  --flowhub-landing-page-background-color: var(--fh-age-gate-bg) !important;
}

body:has(#age-gate-title) .mantine-Modal-content,
[aria-labelledby="age-gate-title"] {
  background: var(--fh-age-gate-bg) !important;
  color: var(--fh-age-gate-text) !important;
}

body:has(#age-gate-title) #age-gate-title,
body:has(#age-gate-title) #age-gate-description,
body:has(#age-gate-title) #age-gate-description * {
  color: var(--fh-age-gate-text) !important;
  font-family: var(--fh-font-family) !important;
}

body:has(#age-gate-title) .mantine-Modal-overlay {
  background: var(--fh-age-gate-overlay) !important;
}

footer {
  background: var(--flowhub-header-background-color) !important;
  color: var(--flowhub-main-text-color) !important;
  max-width: min(1200px, calc(100% - 2rem)) !important;
  margin: 2.5rem auto 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(43, 93, 107, 0.2) !important;
  padding: 1.75rem 1.5rem !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 260px) minmax(260px, 1fr) minmax(220px, 320px) !important;
  column-gap: 2rem !important;
  row-gap: 0.35rem !important;
  align-items: start !important;
}

footer > a:first-child {
  grid-column: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
}

footer > a:first-child img {
  border-radius: 16px !important;
  background-color: rgba(43, 93, 107, 0.08) !important;
  padding: 0.75rem 1.5rem !important;
  max-width: min(100%, 230px) !important;
}

footer > div.mantine-Stack-root {
  grid-column: 2 / 4 !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px) !important;
  column-gap: 2rem !important;
  row-gap: 0.2rem !important;
  align-items: start !important;
}

footer address {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 0.38rem !important;
}

footer address a {
  color: inherit !important;
  text-decoration: none !important;
}

footer address .mantine-Group-root {
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}

footer address p {
  margin: 0 !important;
  line-height: 1.15 !important;
}

footer > div.mantine-Stack-root > p.mantine-Text-root {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  align-self: start !important;
}

footer > div.mantine-Stack-root > a.footer-heart {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
}

footer .footer-legal-links {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1rem !important;
  align-self: start !important;
}

footer .footer-legal-links a p {
  margin: 0 !important;
  line-height: 1.05 !important;
  font-weight: 500 !important;
}

@media (max-width: 62em) {
  footer {
    grid-template-columns: 1fr !important;
    max-width: calc(100% - 1rem) !important;
    padding: 1.25rem 1rem !important;
    row-gap: 0.8rem !important;
  }

  footer > div.mantine-Stack-root {
    grid-column: 1 !important;
    grid-template-columns: 1fr !important;
    row-gap: 0.5rem !important;
  }

  footer > a:first-child,
  footer address,
  footer > div.mantine-Stack-root > p.mantine-Text-root,
  footer .footer-legal-links {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}