:root {
  --ink: #2b2825;
  --ink-soft: #40382d;
  --muted: #766a59;
  --muted-2: #8b8275;
  --cream: #f9f5f0;
  --cream-2: #faf8f6;
  --beige: #eee8da;
  --announce-bg: #6a6257;
  --announce-text: #d9cdbb;
  --button-text: #f4eee4;
  --join-btn-bg: #dbd4c9;
  --border-light: #ddd6c9;
  --footer-bg: #2b2825;
  --footer-text: #b9b2a7;
  --footer-heading: #a8a093;
  --divider-color: #c9b08a;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --pablo-color: #7c7264;
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
  color-scheme: light;
  background: var(--cream-2);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream-2);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
}
p {
  margin: 0;
}

.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 18px;
}
.eyebrow.center {
  text-align: center;
  margin-bottom: 14px;
}

/* Buttons */
.btn {
  display: inline-block;
  max-width: 100%;
  padding: 16px 34px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  transition: opacity 0.2s ease;
}
.btn:hover {
  opacity: 0.85;
}
.btn-dark {
  background: var(--ink);
  color: var(--button-text);
}
.btn-cream {
  background: #f6f1e8;
  color: var(--ink);
  border: 1px solid #dcd3c4;
  transition: 0.4s all ease;
}
a.btn.btn-cream:hover {
  background-color: var(--ink);
  color: #dbd4c9;
}
.btn-taupe {
  background: var(--join-btn-bg);
  color: var(--ink-soft);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  font-size: 13px;
}
.center-btn {
  display: block;
  width: max-content;
  margin: 44px auto 0;
}
.center-btn:hover {
  background-color: #dbd4c9;
  border-color: #dbd4c9;
}
/* Announcement bar */
.announce-bar {
  background: var(--announce-bg);
  color: var(--announce-text);
  text-align: center;
  padding: 11px 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* Header */
.site-header {
  position: absolute;
  top: var(--announce-h, 35px);
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
  color: var(--ink);
}
.site-header-static {
  position: relative;
  top: 0;
  background: var(--cream-2);
  border-bottom: 1px solid var(--border-light);
}
.nav-links a:hover,
.nav-links a.is-active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 34px;
  flex: 1;
}
.nav-right {
  justify-content: flex-end;
  gap: 26px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
/* wp_nav_menu() always wraps each item in <li class="menu-item">, even with
   items_wrap stripped down to just the items — reset the default marker so
   it doesn't show as a bullet in front of each nav link. */
.nav-links li,
.drawer-nav li,
.footer-links li,
.footer-policy li,
.drawer-social li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 26px;
  height: 22px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  /* <button> doesn't reliably inherit color from .site-header on its own —
     iOS Safari in particular falls back to its own default system-blue
     button tint without this, which is exactly the blue hamburger bug. */
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}
.logo {
  text-align: center;
  line-height: 1;
}
.logo-main {
  display: block;
  font-family: var(--font-serif);
  font-size: 32px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.logo-sub {
  display: block;
  font-size: 12px;
  letter-spacing: 0.35em;
  margin-top: 5px;
  color: var(--muted);
}
.currency {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  cursor: pointer;
}
.icon-link {
  position: relative;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  font-size: 10px;
  background: var(--ink);
  color: var(--button-text);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero */
.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, #d8cbb4 0%, #c9bba4 45%, #b6a58b 100%);
}
.hero-img {
  position: absolute;
  /* inset: 0; */
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  /* object-position: center 100%; */
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(230, 220, 203, 0.55) 0%,
    rgba(230, 220, 203, 0.32) 38%,
    rgba(230, 220, 203, 0) 62%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 48px 48px 0;
}
.hero-content .eyebrow {
  color: var(--muted);
}
.hero h1 {
  font-size: var(--atg-title-size, 56px);
  line-height: 1.12;
  color: var(--atg-title-color, var(--ink));
  font-weight: 500;
  margin-bottom: 26px;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: #6b6156;
}
.hero-copy {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: #7c7264;
  margin-bottom: 34px;
}

/* Feature bar */
.feature-bar {
  position: relative;
  background: var(--beige);
  width: 100%;
  border-bottom: 1px solid #6b61553b;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}
.feature-row {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.feature {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 34px 40px;
  border-left: 1px solid var(--border-light);
}
.feature:first-child {
  border-left: none;
}
.feature svg,
.feature img {
  color: var(--ink);
  flex-shrink: 0;
  width: 55px;
  height: 55px;
}
.feature svg path {
  stroke-width: 0.6px !important;
}
.feature span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 2.5;
}

/* Split section (Every detail) */
.split-section {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--beige);
  min-height: 620px;
}
.split-section.split-reverse .split-image {
  order: 2;
}
.split-section.split-reverse .split-copy {
  order: 1;
}
.split-image {
  overflow: hidden;
}
.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 90px;
  background-color: #f0ebe3;
}
.split-copy h2 {
  font-size: var(--atg-heading-size, 38px);
  line-height: 1.2;
  margin-bottom: 22px;
}
.split-copy h2 em {
  font-style: italic;
  font-weight: 400;
}
.divider {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--divider-color);
  margin-bottom: 26px;
}
.split-copy p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.75;
  color: var(--pablo-color);
  max-width: 420px;
  margin-bottom: 16px;
}
.split-copy p.bold {
  font-weight: 600;
  color: var(--ink);
}

/* Standard section */
.standard-section {
  position: relative;
  background: var(--cream);
  padding: 90px 48px 100px;
}
.standard-grid {
  max-width: 1180px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.standard-col {
  text-align: center;
  padding: 0 50px;
  border-left: 1px solid var(--border-light);
}
.standard-col:first-child {
  border-left: none;
}
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #2c282236;
  margin-bottom: 22px;
  color: var(--ink);
}
.standard-col h3 {
  font-size: 26px;
  margin-bottom: 14px;
}
.standard-col p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.7;
  color: var(--pablo-color);
}

/* Product section */
.product-section {
  position: relative;
  background: var(--cream-2);
  padding: 90px 48px 110px;
}
.product-grid {
  max-width: 1280px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 45px 26px;
}

/* ── Generic page heading (Cart / Checkout / My Account / Wishlist — pages
   with no ACF block header of their own) + Wishlist page container ──────── */
.entry-content > .page-heading {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 32px;
}
.wishlist-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 48px 110px;
}
.wishlist-page .cart-empty {
  padding: 60px 20px;
}
@media (max-width: 700px) {
  .entry-content > .page-heading {
    font-size: 28px;
    margin-bottom: 24px;
  }
  .wishlist-page {
    padding: 40px 20px 70px;
  }
}

/* ── Toast (brief confirmation, e.g. wishlist add/remove) ──────────────── */
.lum-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9999;
  transform: translate(-50%, 8px);
  background: var(--ink);
  color: var(--button-text);
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  max-width: calc(100vw - 40px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.lum-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.product-card {
  text-align: left;
}
.product-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 18px;
  background: #efe3d6;
}
.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wishlist {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.wishlist svg {
  transition: fill 0.15s ease;
}
.wishlist.is-active svg {
  fill: var(--ink);
}
.product-card h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.product-card .weight {
  font-size: 12px;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.product-card .price {
  font-size: 13px;
  font-weight: 500;
}

/* Join section — 3 columns: image | heading+text | form (far right).
   The section itself stays full-bleed (background spans edge to edge,
   matching every other section on the page); .join-inner is what's
   actually capped + centered — previously the max-width/margin sat on
   .join-section directly, which also shrank its own *background*,
   making this the one section on the page that visibly boxed in short
   of full width next to its full-bleed siblings on wide viewports. */
.join-section {
  position: relative;
  background: var(--cream);
}
.join-inner {
  display: grid;
  grid-template-columns: 30% 1fr auto;
  align-items: center;
  column-gap: 64px;
  max-width: 1320px;
  margin: 0 auto;
}
.join-section form {
  padding-right: 40px;
}
.join-form .btn {
  border: unset;
}
.join-form .btn:hover {
  background-color: var(--ink);
  color: #dbd4c9;
}

.join-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.join-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.join-text h2 {
  font-size: 34px;
  margin-bottom: 18px;
}
.join-text p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 320px;
}
.join-form {
  display: flex;
  justify-self: end;
  width: 440px;
  max-width: 100%;
}
.join-form input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 1px solid var(--border-light);
  background: #fff;
  padding: 0 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.join-form input::placeholder {
  color: var(--muted-2);
}
.join-form .btn {
  white-space: nowrap;
  padding: 0 28px;
  display: flex;
  align-items: center;
}

/* Homepage "Join Lumea Labs" instance — per-block override (targets this
   specific block's auto-generated ID, not the .join-section class). */
#atg-block-block_0ada2f1ecb5869c0f364efcfccc8e55b {
  background-color: #f0ebe3;
  max-width: 1300px;
  margin: 0 auto;
}

/* Closing section */
.closing-section {
  position: relative;
  background: var(--cream-2);
  text-align: center;
  padding: 100px 24px 110px;
}
.shell-icon {
  margin: 0 auto 26px;
  opacity: 0.85;
}
.closing-section h2 {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 22px;
}
.closing-section h2 em {
  font-style: italic;
  font-weight: 400;
}
.closing-section .caption {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* Footer */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 80px 48px 0;
}
.footer-top {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
}
.footer-logo {
  width: 150px;
  margin-bottom: 22px;
}
.footer-brand .tagline {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--footer-text);
  margin-bottom: 26px;
}
.social-icons {
  display: flex;
  gap: 16px;
}
.social-icons a {
  color: var(--footer-text);
}
.footer-contact .social-icons {
  margin-top: 8px;
}
.footer-links h5 {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 22px;
  font-weight: 600;
}
.footer-links a {
  display: block;
  font-size: 13.5px;
  color: var(--footer-text);
  transform: 0.4s ease all;
  margin-bottom: 14px;
}
.footer-links a:hover,
.footer-policy a:hover {
  text-decoration: underline;
}
.payment-icons {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-bottom: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 30px;
}
.payment-icons img {
  height: 26px;
  width: auto;
  border-radius: 3px;
}
.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
  font-size: 11.5px;
  color: var(--footer-text);
}
.footer-policy {
  display: flex;
  gap: 24px;
}

/* =========================================================
   User dropdown
   ========================================================= */
.user-menu {
  position: relative;
  display: flex;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  width: 230px;
  background: #fff;
  border: 1px solid var(--border-light);
  box-shadow: 0 18px 44px rgba(43, 40, 37, 0.14);
  padding: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.user-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 16px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
  transform: rotate(45deg);
}
.user-greeting {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.user-greeting strong {
  font-weight: 600;
}
.user-item {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 9px 4px;
  border-radius: 3px;
}
.user-item:hover {
  background: var(--cream);
}
.user-item.center {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.user-action {
  display: block;
  margin-top: 10px;
  width: 100%;
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.2s;
}
.user-action.solid {
  background: var(--ink);
  color: var(--button-text);
  border-color: var(--ink);
}
.user-action:hover {
  opacity: 0.85;
}

/* =========================================================
   Drawers & backdrop
   ========================================================= */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 24, 0.42);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 90;
}
.drawer-backdrop.is-visible {
  opacity: 1;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  width: 420px;
  max-width: 90vw;
  background: var(--cream-2);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -14px 0 40px rgba(43, 40, 37, 0.12);
}
.drawer.is-open {
  transform: translateX(0);
}

.drawer--left {
  position: fixed;
  top: 0;
  height: 100%;
  height: 100dvh;
  width: 420px;
  max-width: 90vw;
  left: 0;
  right: auto;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 14px 0 40px rgba(43, 40, 37, 0.12);
}
.drawer--left.is-open {
  transform: translateX(0);
}

/* =========================================================
   Floating WhatsApp button (site-wide, footer.php)
   ========================================================= */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  z-index: 80;
  transition: transform 0.2s ease;
}
.whatsapp-float:hover {
  transform: scale(1.06);
}
@media (max-width: 700px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
  }
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.drawer-title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
}
.cart-head-count {
  color: var(--muted-2);
  font-size: 15px;
}
.drawer-close {
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 4px;
  display: flex;
}

/* Menu drawer */
.menu-drawer {
  width: 360px;
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 14px 26px;
  flex: 1;
}
.drawer-nav a {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ink);
  padding: 16px 0;
  border-bottom: 1px solid rgba(43, 40, 37, 0.08);
  text-transform: uppercase;
  display: block;
}
.drawer-menu-foot {
  padding: 22px 26px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-social {
  display: flex;
  gap: 16px;
  color: var(--ink);
}
.drawer-social a {
  color: var(--ink);
  display: flex;
}

/* Cart drawer */
.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 26px;
}
.cart-item {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-light);
}
.cart-item-img {
  width: 78px;
  height: 90px;
  background: #efe3d6;
  overflow: hidden;
}
.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item-info {
  display: flex;
  flex-direction: column;
}
.cart-item-info h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.cart-item-weight {
  font-size: 12px;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.cart-item-price {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-light);
  width: max-content;
}
.qty-btn {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}
.qty-val {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  line-height: 30px;
}
.cart-item-remove {
  background: none;
  border: none;
  color: var(--muted-2);
  cursor: pointer;
  align-self: flex-start;
  padding: 2px;
}
.cart-item-remove:hover {
  color: var(--ink);
}

.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: var(--muted);
  padding: 40px;
}

.cart-foot {
  flex-shrink: 0;
  padding: 22px 26px 26px;
  border-top: 1px solid var(--border-light);
  background: var(--cream);
}
.cart-subtotal {
/*   display: flex; */
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.cart-subtotal span:last-child {
  font-size: 17px;
}
.cart-note {
  font-size: 12px;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.cart-checkout {
  width: 100%;
  border: none;
  cursor: pointer;
}
.cart-continue {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Large desktop down — tighten outer gutters */
@media (max-width: 1200px) {
  .site-header {
    padding: 24px 32px;
  }
  .hero-content {
    padding-left: 32px;
    padding-right: 32px;
  }
  .standard-section,
  .product-section {
    padding-left: 32px;
    padding-right: 32px;
  }
  .split-copy {
    padding: 50px 56px;
  }
}

/* Tablet / small desktop — collapse nav to hamburger */
@media (max-width: 1000px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-left {
    flex: 0 0 auto;
  }
  .nav-right {
    flex: 0 0 auto;
  }
  .site-header {
    justify-content: space-between;
  }

  .feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature:nth-child(3),
  .feature:nth-child(4) {
    border-top: 1px solid var(--border-light);
  }
  .feature:nth-child(3) {
    border-left: none;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }

  .hero h1 {
    font-size: var(--atg-title-size, 44px);
  }
}

/* Tablet portrait */
@media (max-width: 992px) {
  .split-section {
    grid-template-columns: 1fr;
  }
  .split-image {
    height: 340px;
  }
  .split-copy {
    padding: 44px 40px;
  }

  .join-inner {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }
  .join-image {
    width: 100%;
    height: 240px;
  }
  .join-text,
  .join-section form {
    max-width: 460px;
    padding: 5px 40px;
  }
  .join-text p {
    max-width: 460px;
  }
  .join-form {
    justify-self: stretch;
    width: 100%;
    max-width: 460px;
  }

  .standard-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 0;
  }
  .standard-col {
    border-left: none;
    padding: 32px 20px;
    border-bottom: 1px solid var(--border-light);
  }
  .standard-col:last-child {
    border-bottom: none;
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 767px) {
  /* The TRANSPARENT header's top offset (--announce-h, set by main.js via
     ResizeObserver on #announceBar) tracks the announce bar's real rendered
     height — which changes here since its text wraps to 2 lines at this
     width — so no fixed `top` override is needed. The static header variant
     (shop/product/checkout) is position:relative, already correctly in
     normal flow, and never had this offset applied — giving it the same
     `top` shift moves it visually without reserving that space, silently
     overlapping the breadcrumb/content directly below it. */
  .announce-bar {
    font-size: 9px;
    letter-spacing: 0.06em;
    padding: 9px 12px;
  }
  .site-header {
    padding: 18px 20px;
  }
  .nav-right .currency {
    display: none;
  }
  .nav-right {
    gap: 20px;
  }
  .logo-main {
    font-size: 22px;
  }
  .logo-sub {
    font-size: 8px;
    letter-spacing: 0.3em;
  }

  .hero {
    min-height: 0;
  }
  .hero-img {
    position: relative;
    height: 300px;
  }
  .hero-overlay {
    display: none;
  }
  .hero {
    display: block;
    background: var(--beige);
  }
  .join-text,
  .join-section form {
    max-width: 100%;
    padding: 10px;
  }
  .hero-content {
    max-width: none;
    padding: 40px 20px 48px;
  }
  .hero h1 {
    font-size: var(--atg-title-size, 40px);
  }
  .hero h1 br.soft-break {
    display: none;
  }
  .hero-copy br {
    display: none;
  }
  .btn {
    padding: 15px 26px;
  }

  .feature-row {
    grid-template-columns: 1fr 1fr;
  }
  .feature {
    padding: 24px 18px;
    gap: 12px;
  }
  .feature span {
    font-size: 11px;
  }

  .split-copy {
    padding: 36px 20px;
  }
  .split-copy h2 {
    font-size: var(--atg-heading-size, 32px);
  }

  .standard-section {
    padding: 60px 20px 66px;
  }
  .product-section {
    padding: 60px 20px 70px;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
  .product-card h4 {
    font-size: 11px;
  }

  .join-section {
    padding: 50px 20px;
  }
  .join-inner {
    row-gap: 26px;
  }
  .join-text h2 {
    font-size: 30px;
  }

  .closing-section {
    padding: 70px 20px 76px;
  }
  .closing-section h2 {
    font-size: 27px;
  }

  .site-footer {
    padding: 60px 20px 0;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 34px 20px;
    padding-bottom: 44px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  /* "© 2026 Lumea Labs · Research Use Only · Not for Human Consumption" used
     &nbsp; around every separator to keep it on one line on desktop — at
     mobile widths that just forces the whole string to run off the edge
     instead of wrapping. Break it into its 3 natural segments instead. */
  .footer-copyright {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .footer-copyright .sep {
    display: none;
  }
  .footer-policy {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .payment-icons {
    flex-wrap: wrap;
    justify-content: center;
  }

  .drawer,
  .menu-drawer {
    width: 100%;
    max-width: 100%;
  }
}

/* Very small */
@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: var(--atg-title-size, 34px);
  }
  .product-grid {
    gap: 20px 12px;
  }
}

/* =========================================================
   Shop / Product listing page
   ========================================================= */
.shop-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, #d8cbb4 0%, #c9bba4 45%, #b6a58b 100%);
}
.shop-hero-img {
  position: absolute;
  /* inset: 0; */
  right: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
}
.shop-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(230, 220, 203, 0.55) 0%,
    rgba(230, 220, 203, 0.32) 38%,
    rgba(230, 220, 203, 0) 62%
  );
}
.shop-hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 0 48px;
}
.shop-hero-content .eyebrow {
  color: var(--muted);
}
.shop-hero-content h1 {
  font-size: 56px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 22px;
}
.shop-hero-content h1 em {
  font-style: italic;
  font-weight: 400;
}
.shop-hero-content p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 460px;
}

/* Ticker */
.ticker {
  background: var(--announce-bg);
  color: var(--announce-text);
  overflow: hidden;
  white-space: nowrap;
  padding: 13px 0;
}
.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 28s linear infinite;
}
.ticker-track span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding-right: 0;
}
@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }
}

/* Shop main layout */
.shop-main {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 48px 40px;
  align-items: start;
}

/* Defensive: prevent grid items' intrinsic min-content width from
   blowing out their tracks (classic CSS Grid overflow pitfall). */
.shop-grid > *,
.favourites-grid > *,
.related-grid > *,
.feature-row > *,
.footer-top > *,
.catalogue-stats > *,
.standard-grid > *,
.product-grid > *,
.filter-panel > *,
.policy-layout > *,
.contact-section > *,
.contact-cards-grid > * {
  min-width: 0;
}
.shop-main > * {
  min-width: 0;
}
.filter-panel {
  min-width: 0;
}
.filter-group,
.select-wrap,
.checkbox {
  min-width: 0;
}
.filter-panel {
  position: sticky;
  top: 24px;
}
/* #lumFilterDrawer only behaves as an actual off-canvas drawer below
   1100px (see the max-width:1100px block below). Above that it must stay
   a plain wrapper so the sticky .filter-panel inside it keeps its normal
   inline sidebar spot — the ID override beats the .drawer/.drawer--left
   classes that are always present on the element. */
@media (min-width: 1101px) {
  #lumFilterDrawer {
    position: static;
    display: block;
    height: auto;
    width: auto;
    max-width: none;
    transform: none;
    transition: none;
    box-shadow: none;
  }
  #lumFilterDrawer .drawer-head {
    display: none;
  }
}
.filter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 22px;
}
.clear-all {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  cursor: pointer;
}
.filter-group {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
}
.filter-group h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-group-toggle {
  cursor: pointer;
}
.filter-group-toggle-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-group-chevron {
  display: flex;
  transition: transform 0.25s ease;
  transform: rotate(180deg);
}
.filter-group.is-collapsed .filter-group-chevron {
  transform: rotate(0deg);
}
.filter-group-body {
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease;
}
.filter-group.is-collapsed .filter-group-body {
  max-height: 0;
  opacity: 0;
}
.filter-clear-x {
  background: none;
  border: none;
  color: var(--muted-2);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  display: none;
}
.select-wrap {
  position: relative;
  border: 1px solid var(--border-light);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select-wrap select {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
  width: 100%;
  cursor: pointer;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 12px;
  cursor: pointer;
}
.checkbox input {
  width: 14px;
  height: 14px;
  accent-color: var(--ink);
  cursor: pointer;
}

.shop-results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border-light);
}
.shop-results-head p {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.filter-toggle {
  display: none;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 9px 16px;
  cursor: pointer;
}
.view-toggle {
  display: flex;
  gap: 8px;
}
.view-toggle button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.view-toggle button.active {
  color: var(--ink);
  border-color: var(--ink);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 26px;
}

/* List view (.view-toggle, lumea-filters.js) — .shop-card's own markup is
   shared with the homepage Product Collection block, so this only
   reflows it via CSS Grid line placement; nothing about the card's HTML
   changes, keeping that shared markup untouched. */
.shop-grid.is-list-view {
  grid-template-columns: 1fr;
  gap: 14px;
}
.shop-grid.is-list-view .shop-card {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  grid-template-rows: repeat(3, auto);
  align-items: center;
  column-gap: 24px;
  padding: 14px;
  border: 1px solid var(--border-light);
}
.shop-grid.is-list-view .shop-card-img {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 110px;
  height: 110px;
  margin-bottom: 0;
}
.shop-grid.is-list-view .lorem-tag {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}
.shop-grid.is-list-view h4 {
  grid-column: 2;
  grid-row: 2;
  margin-bottom: 0;
  min-width: 0;
}
.shop-grid.is-list-view h4 a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-grid.is-list-view .weight {
  grid-column: 2;
  grid-row: 3;
  margin-bottom: 0;
}
.shop-grid.is-list-view .shop-card-foot {
  grid-column: 3;
  grid-row: 1 / 4;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}
/* The image thumbnail shrinks to 110px/84px in list view — the badge's
   intrinsic width (unconstrained, sized to its text) collides with the
   wishlist heart button on any label longer than a couple of letters
   ("POPULAR", "NEW 100MG"). Grid view has ~280px of width to keep both
   comfortably apart; list view doesn't, so the badge is dropped there —
   the wishlist heart (an actual action) keeps its full tap target. */
.shop-grid.is-list-view .shop-card-img .badge {
  display: none;
}
.shop-grid.is-list-view .wishlist {
  width: 22px;
  height: 22px;
  top: 8px;
  right: 8px;
}
.shop-grid.is-list-view .wishlist svg {
  width: 11px;
  height: 11px;
}

article.shop-card:hover .shop-card-img img {
  scale: 1.1;
}
.shop-card {
  text-align: left;
}
.shop-card-img {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin-bottom: 14px;
  background: #efe3d6;
}
.shop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s ease all;
}
.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  text-transform: uppercase;
}
.badge-dark {
  background: var(--ink);
  color: var(--button-text);
}
.badge-black {
  background-color: var(--ink);
  color: #dbd4c9;
}
.badge-taupe {
  background: var(--join-btn-bg);
  color: var(--ink);
}
.lorem-tag {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.stars {
  font-size: 11px;
  color: #c9a45c;
  letter-spacing: 1px;
  display: none;
  margin-bottom: 8px;
}
.stars span {
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: normal;
  margin-left: 4px;
}
.shop-card h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.shop-card .weight {
  font-size: 11.5px;
  color: var(--muted-2);
  margin-bottom: 12px;
}
.shop-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.shop-card-foot .price {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.btn-add {
  border: 1px solid var(--border-light);
  background: #fff;
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn-add:hover {
  background-color: var(--ink);
  color: #dbd4c9;
  border-color: var(--ink);
}
.load-more-btn {
  margin: 50px auto 0;
}

/* Catalogue (dark) */
.catalogue-section {
  background: var(--footer-bg);
  color: var(--footer-text);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  padding: 80px 48px;
  align-items: center;
}
.catalogue-copy .eyebrow {
  color: var(--footer-heading);
}
.catalogue-copy h2 {
  font-size: 38px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 20px;
}
.catalogue-copy h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--footer-text);
}
.catalogue-copy p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--footer-text);
  max-width: 480px;
  margin-bottom: 30px;
}
.catalogue-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.link-arrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.catalogue-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.stat-tile {
  background: #34312e;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-num {
  font-family: var(--font-serif);
  font-size: 32px;
  color: #fff;
}
.stat-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--footer-heading);
}

/* Community favourites */
.favourites-section {
  padding: 90px 48px 100px;
  background: #f4f0e9;
}
.favourites-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1320px;
  margin: 0 auto 40px;
}
.favourites-head h2 {
  font-size: 34px;
  margin-top: 12px;
}
.favourites-head h2 em {
  font-style: italic;
  font-weight: 400;
}
.favourites-head .link-arrow {
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
}
.favourites-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.fav-card {
  text-align: left;
}
.fav-num {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.fav-img {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #efe3d6;
  margin-bottom: 14px;
}
.fav-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fav-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}
.fav-info h4 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.fav-price-stars {
  text-align: right;
}
.fav-price-stars .price {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.fav-price-stars .stars {
  font-size: 10px;
  margin-bottom: 0;
}

/* FAQ */
.faq-section {
  background-color: #f0ebe3;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  max-width: unset;
  margin: 0 auto;
  padding: 112px 80px;
}
.faq-intro h2 {
  font-size: 34px;
  line-height: 1.25;
  margin-bottom: 18px;
}
.faq-intro h2 em {
  font-style: italic;
  font-weight: 400;
}
.faq-intro p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 26px;
  max-width: 340px;
}
.faq-intro .btn-outline:hover {
  background: var(--join-btn-bg);
  color: var(--ink-soft);
  opacity: 1;
}
.faq-list h3 {
  font-size: 26px;
  margin-bottom: 24px;
}
.faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 20px 0;
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-icon {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted-2);
  flex-shrink: 0;
  margin-left: 20px;
  transition: transform 0.2s ease;
}
/* Rotating the "+" 45° reads as "×" when the item is open — driven by the
   native <details open> attribute, so it tracks every toggle, not just the
   page-load state (a hardcoded ×/+ in the PHP only matched item 0 and never
   updated again once the user opened a different item). */
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}
.faq-item p {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 640px;
}

/* ---- Shop responsive ---- */
@media (max-width: 1100px) {
  .shop-main {
    grid-template-columns: 1fr;
  }
  .filter-panel {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 30px;
  }
  .filter-group {
    grid-column: span 1;
  }
  /* Below 1100px the panel no longer renders inline in .shop-main — it
     lives inside #lumFilterDrawer (see .drawer--left above) and only
     shows there, opened via #lumFilterToggle. */
  #lumFilterPanel {
    display: none;
  }
  #lumFilterDrawer #lumFilterPanel {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding: 22px 26px;
  }
  .filter-toggle {
    display: block;
  }
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalogue-section {
    grid-template-columns: 1fr;
  }
  .favourites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faq-section {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .shop-hero-content h1 {
    font-size: 42px;
  }
  .shop-main {
    padding: 40px 20px;
  }
  .filter-panel {
    grid-template-columns: 1fr 1fr;
  }
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }
  .shop-grid.is-list-view {
    grid-template-columns: 1fr;
  }
  .shop-grid.is-list-view .shop-card {
    grid-template-columns: 84px 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: 4px;
  }
  .shop-grid.is-list-view .shop-card-img {
    width: 84px;
    height: 84px;
    grid-row: 1 / 4;
  }
  .shop-grid.is-list-view .shop-card-foot {
    grid-column: 1 / -1;
    grid-row: 4;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
  }
  .catalogue-section {
    padding: 60px 20px;
  }
  .catalogue-stats {
    grid-template-columns: 1fr 1fr;
  }
  .favourites-section {
    padding: 60px 20px 70px;
  }
  .favourites-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .favourites-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .faq-section {
    padding: 60px 20px 70px;
    gap: 40px;
  }
}
@media (max-width: 480px) {
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-panel {
    grid-template-columns: 1fr;
  }
  .shop-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .btn-add {
    width: fit-content;
  }
  .join-section form {
    flex-direction: column;
  }
  .join-form input,
  .join-form button {
    height: 50px !important;
    flex: unset;
    margin-top: 10px;
  }
  .join-form .btn {
    justify-content: center;
  }
}

/* =========================================================
   Single product page
   ========================================================= */
.breadcrumb {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 48px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}
.breadcrumb a {
  color: var(--muted-2);
}
.breadcrumb .current {
  color: var(--ink);
  font-weight: 600;
}

.product-detail {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px 90px;
}
.product-gallery-main {
  position: relative;
  aspect-ratio: 1/1;
  background: #efe3d6;
  overflow: hidden;
  margin-bottom: 16px;
}
.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dose-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.1;
}
.dose-badge span {
  font-family: var(--font-sans);
  font-size: 7px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.gallery-thumbs button {
  aspect-ratio: 1/1;
  padding: 0;
  border: 1px solid var(--border-light);
  background: #efe3d6;
  overflow: hidden;
  cursor: pointer;
}
.gallery-thumbs button.active {
  border-color: var(--ink);
}
.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info .badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.badge-outline {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border: 1px solid var(--border-light);
  color: var(--muted-2);
  text-transform: uppercase;
}
.product-info .eyebrow {
  margin-bottom: 8px;
}
.product-info h1 {
  font-size: 42px;
  color: var(--ink);
  margin-bottom: 2px;
}
.product-info .sub-mg {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  display: block;
}
.product-short-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.tag-line {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.rating-row .stars {
  margin-bottom: 0;
}
.rating-row .rating-count {
  color: var(--muted-2);
}
.rating-row .badge-outline {
  font-size: 9px;
}
.price-row {
  font-size: 30px;
  color: var(--ink);
  margin-bottom: 26px;
}
.price-row .unit {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted-2);
  margin-left: 8px;
}
.dose-select h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 12px;
  font-weight: 700;
}
.dose-select h5 .current-dose {
  font-weight: 400;
  color: var(--muted-2);
  text-transform: none;
  letter-spacing: 0;
}
.dose-options {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.dose-options button {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--border-light);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.dose-options button.active {
  background: var(--ink);
  color: var(--button-text);
  border-color: var(--ink);
}
.purchase-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.purchase-row .qty {
  height: 52px;
}
.purchase-row .qty-btn {
  width: 44px;
  height: 100%;
  font-size: 18px;
}
.purchase-row .qty-val {
  flex: 1;
  line-height: 50px;
  min-width: 34px;
}
input.qty-val {
  border-top: none;
  border-bottom: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
input.qty-val::-webkit-outer-spin-button,
input.qty-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.purchase-row .btn-add-cart {
  flex: 1;
  border: none;
  background: var(--ink);
  color: var(--button-text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 16px 20px;
}
.subscribe-btn {
  width: 100%;
  padding: 15px;
  border: 1px solid var(--border-light);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 24px;
}
/* Subscribe & Save popup — centered dialog, driven by the same open()/
   close()/#backdrop machinery as the menu/cart drawers (main.js), just with
   its own transform (scale+fade) instead of a sliding side panel. */
.subscribe-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 101;
  width: 440px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px rgba(43, 40, 37, 0.22);
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.24s ease,
    opacity 0.24s ease,
    visibility 0s linear 0.24s;
}
.subscribe-modal.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.24s ease,
    opacity 0.24s ease;
}
.subscribe-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  color: var(--muted-2);
  cursor: pointer;
  padding: 4px;
}
.subscribe-modal .eyebrow {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.subscribe-modal h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}
.subscribe-modal-copy {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.subscribe-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.subscribe-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.subscribe-option:has(input:checked) {
  border-color: var(--ink);
}
.subscribe-option input {
  accent-color: var(--ink);
  width: 15px;
  height: 15px;
  margin: 0;
}
.subscribe-modal-note {
  font-size: 12px;
  color: var(--muted-2);
  text-align: center;
  margin: 16px 0 0;
}
@media (max-width: 620px) {
  .subscribe-modal {
    padding: 28px 24px;
  }
}

.trust-row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  font-size: 11.5px;
  color: var(--muted-2);
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.info-block {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-light);
}
.info-block h5 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 8px;
}
.info-block p,
.info-block ul {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  padding: 0;
  list-style: none;
}
.info-block.accordion summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.info-block.accordion summary h5 {
  flex: 1;
  min-width: 0;
}
.info-block.accordion summary::-webkit-details-marker {
  display: none;
}
.info-block.accordion[open] .faq-icon {
  transform: rotate(45deg);
}

/* Research (dark) section reuses .catalogue-section styles */
.research-section {
  background: var(--footer-bg);
  color: var(--footer-text);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  padding: 80px 48px;
  align-items: start;
}
.research-section .eyebrow {
  color: var(--footer-heading);
}
.research-section h2 {
  font-size: 36px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 18px;
}
.research-section h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--footer-text);
}
.research-section > .research-copy > p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--footer-text);
  margin-bottom: 24px;
  max-width: 480px;
}
.citations {
  margin-top: 26px;
}
.citations div {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--footer-text);
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 560px;
}
.citations sup {
  color: var(--footer-heading);
}

/* Frequently bought together / related products grid reuses .shop-grid pattern in a simpler card */
.related-section {
  padding: 90px 48px 100px;
  background: var(--cream-2);
}
.related-head {
  max-width: 1320px;
  margin: 0 auto 40px;
}
.related-head .eyebrow {
  text-align: left;
}
.related-head h2 {
  font-size: 34px;
}
.related-head h2 em {
  font-style: italic;
  font-weight: 400;
}
.related-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.related-card {
  text-align: left;
}
.related-img {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #efe3d6;
  margin-bottom: 14px;
}
.related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.related-card h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.related-card .weight {
  font-size: 11.5px;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.related-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.related-foot .price {
  font-size: 13px;
  font-weight: 500;
}
.related-foot .stars {
  margin-bottom: 0;
}

/* ---- Single product responsive ---- */
@media (max-width: 1000px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .research-section {
    grid-template-columns: 1fr;
  }
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .breadcrumb {
    padding: 14px 20px;
  }
  .product-detail {
    padding: 0 20px 60px;
  }
  .product-info h1 {
    font-size: 34px;
  }
  .dose-options {
    flex-wrap: wrap;
  }
  .research-section {
    padding: 60px 20px;
  }
  .related-section {
    padding: 60px 20px 70px;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  /* Qty stepper + Add to cart stack into their own full-width rows instead of
     squeezing the button into a narrow flex:1 slot (forcing its label to wrap
     onto 3 lines next to the stepper). */
  .purchase-row {
    flex-wrap: wrap;
  }
  .purchase-row .qty {
    flex: 1 1 100%;
  }
  .purchase-row .btn-add-cart {
    flex: 1 1 100%;
  }
}

/* =========================================================
   Interior page hero — Contact / Terms & Conditions / About
   (pagehero block)
   ========================================================= */
.content-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, #d8cbb4 0%, #c9bba4 45%, #b6a58b 100%);
}
.content-hero .content-hero-img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 62%;
  object-fit: cover;
  object-position: left center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
}
.content-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(230, 220, 203, 0.5) 0%,
    rgba(230, 220, 203, 0.22) 45%,
    rgba(230, 220, 203, 0) 70%
  );
}
.content-hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 0 48px;
}
.content-hero-content .eyebrow {
  color: var(--muted);
}
.content-hero-content h1 {
  font-size: 48px;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 18px;
}
.content-hero-content h1 em {
  font-style: italic;
  font-weight: 400;
}
.content-hero-content p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 460px;
}
.content-hero-meta {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--muted-2) !important;
  margin-top: 18px !important;
}

/* Policy sub-nav (Terms & Conditions / Privacy Policy / …) */
.policy-tabs {
  display: flex;
  gap: 40px;
  padding: 0 48px;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  background: var(--cream-2);
}
.policy-tabs a {
  display: block;
  padding: 20px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.policy-tabs a.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* =========================================================
   Policy content — sticky TOC + numbered sections
   (policycontent block)
   ========================================================= */
.policy-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 60px;
  padding: 60px 80px 110px;
  align-items: start;
  background: var(--cream-2);
}
.policy-toc {
  position: sticky;
  top: 24px;
}
.policy-toc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  margin-bottom: 18px;
}
.policy-toc nav {
  display: flex;
  flex-direction: column;
}
.policy-toc a {
  font-size: 13.5px;
  color: var(--ink-soft);
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
}
.policy-toc a:last-child {
  border-bottom: none;
}
.policy-toc a:hover {
  color: var(--ink);
}

.policy-section {
  padding: 32px 0;
  border-bottom: 1px solid var(--border-light);
}
.policy-section:first-child {
  padding-top: 0;
}
.policy-section:last-child {
  border-bottom: none;
}
.policy-section .num {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.policy-section h2 {
  font-size: 30px;
  margin-bottom: 20px;
}
.policy-section h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}
.policy-section p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 16px;
  max-width: 880px;
}
.policy-callout {
  background: var(--cream);
  border-left: 3px solid var(--muted);
  padding: 22px 26px;
  margin: 22px 0;
  max-width: 880px;
}
.policy-callout p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 0;
}
.policy-callout strong {
  color: var(--ink);
}
.policy-section ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  max-width: 880px;
}
.policy-section ul li {
  display: flex;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  padding: 6px 0;
}
.policy-section ul li::before {
  content: "\2014";
  color: var(--muted-2);
  flex-shrink: 0;
}

/* =========================================================
   Contact page — form + details (contactform block)
   ========================================================= */
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.contact-form-panel {
  background: var(--cream-2);
  padding: 90px 80px 100px;
}
.contact-info-panel {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 90px 80px 100px;
}
.contact-form-panel h2,
.contact-info-panel h2 {
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 18px;
}
.contact-form-panel h2 em,
.contact-info-panel h2 em {
  font-style: italic;
  font-weight: 400;
}
.contact-info-panel h2 {
  color: #fff;
}
.contact-info-panel h2 em {
  color: #c9b896;
}
.contact-info-panel > .eyebrow {
  color: var(--footer-heading);
}
.contact-form-panel > p,
.contact-info-panel > p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 34px;
  max-width: 420px;
}
.contact-form-panel > p {
  color: var(--ink-soft);
}
.contact-info-panel > p {
  color: var(--footer-text);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 20px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field--full {
  grid-column: 1 / -1;
}
.form-field p {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.form-field br {
  display: none;
}
.form-field label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-light);
  padding: 14px 16px;
  width: 100%;
}
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23766A59' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.form-field textarea {
  resize: vertical;
  min-height: 130px;
  font-family: var(--font-sans);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted-2);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(43, 40, 37, 0.08);
}
.form-consent {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 460px;
}
.form-consent a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-submit-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.form-submit-row .btn {
  border: none;
  cursor: pointer;
}
.form-submit-row .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.form-submit-note {
  font-size: 12px;
  color: var(--muted-2);
}
.form-submit-note.is-success {
  color: #4b6b4e;
}
.form-submit-note.is-error {
  color: #a94442;
}

/* Contact Form 7 — the plugin's own wrapper/response/validation elements,
   left as plain <form>/<input> tags carrying the .form-grid/.form-field
   classes above (see the form's own template), so only CF7's non-field
   chrome (spinner, response banner, per-field errors) needs styling here. */
.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  color: #a94442;
  margin-top: 6px;
}
.wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: 13px;
  border: 1px solid var(--border-light);
  color: var(--ink-soft);
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: #4b6b4e;
  color: #4b6b4e;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
  border-color: #a94442;
  color: #a94442;
}
.wpcf7 .ajax-loader {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}
.lum-block-notice {
  font-size: 13px;
  color: var(--muted-2);
  font-style: italic;
}

.contact-details {
  display: flex;
  flex-direction: column;
}
.contact-detail-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-detail-row:first-child {
  padding-top: 0;
}
.contact-detail-icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text);
  flex-shrink: 0;
}
.contact-detail-row h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--footer-heading);
  margin-bottom: 6px;
}
.contact-detail-row .value {
  font-family: var(--font-sans);
  font-size: 15px;
  color: #fff;
  margin-bottom: 4px;
}
.contact-detail-row .note {
  font-size: 12.5px;
  color: var(--footer-text);
}

.support-hours {
  margin-top: 8px;
}
.support-hours h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--footer-heading);
  margin-bottom: 16px;
}
.support-hours-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--footer-text);
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.support-hours-row .closed {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
}

/* =========================================================
   Contact method cards (contactcards block)
   ========================================================= */
.contact-cards-section {
  background: var(--beige);
  padding: 60px 48px;
}
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contact-card {
  background: var(--cream-2);
  padding: 40px 36px;
  border-right: 1px solid var(--border-light);
}
.contact-card:last-child {
  border-right: none;
}
.contact-card-icon {
  width: 46px;
  height: 46px;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  margin-bottom: 20px;
}
.contact-card .label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.contact-card h3 {
  font-size: 24px;
  margin-bottom: 12px;
}
.contact-card p {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.contact-card .link-arrow {
  color: var(--ink);
  font-size: 11.5px;
  text-decoration: none;
}

/* ---- Interior page / policy / contact responsive ---- */
@media (max-width: 1100px) {
  .policy-layout {
    grid-template-columns: 1fr;
    padding: 50px 32px 80px;
  }
  .policy-toc {
    position: static;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px;
  }
  .policy-toc nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 22px;
  }
  .policy-toc a {
    border-bottom: none;
    padding: 4px 0;
  }
  .contact-section {
    grid-template-columns: 1fr;
  }
  .contact-form-panel,
  .contact-info-panel {
    padding: 60px 32px;
  }
  .contact-cards-grid {
    grid-template-columns: 1fr;
  }
  .contact-card {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .contact-card:last-child {
    border-bottom: none;
  }
}
@media (max-width: 700px) {
  .content-hero {
    min-height: 380px;
  }
  .content-hero-content {
    padding: 0 20px;
  }
  .content-hero-content h1 {
    font-size: 36px;
  }
  .policy-tabs {
    padding: 0 20px;
    gap: 26px;
  }
  .policy-layout {
    padding: 40px 20px 60px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-submit-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .content-hero-content h1 {
    font-size: 30px;
  }
}

/* =========================================================
   Thank You / Order Received page (woocommerce/checkout/thankyou.php)
   ========================================================= */
.order-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 420px;
  overflow: hidden;
  background: linear-gradient(120deg, #f8f2ec 0%, #f3e9e0 60%, #eee1d3 100%);
}
.order-hero-content {
  position: relative;
  z-index: 2;
  width: 54%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 70px 64px;
}
.order-hero-content h1 {
  font-size: 47px;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 6px;
}
.order-hero-content p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 480px;
}
.status-pill {
  font-weight: 600;
}
.status-pending,
.status-on-hold {
  color: #b3812f;
}
.status-processing {
  color: #3b6e8f;
}
.status-completed {
  color: #4b7a4e;
}
.status-cancelled,
.status-failed {
  color: #a94442;
}
.status-refunded {
  color: var(--muted);
}
.order-hero-image {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.order-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Page body: main column + sticky order-summary sidebar */
.order-page-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 48px 100px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
.order-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* PayID summary cards */
.payid-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.payid-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 30px 24px;
  text-align: center;
}
.payid-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--beige);
  color: var(--ink);
  margin-bottom: 18px;
}
.payid-icon--glyph {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
}
.payid-label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.payid-value {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 18px;
}
.payid-value span {
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--muted);
}
.payid-value--small {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  word-break: break-word;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.copy-btn:hover {
  background: var(--beige);
}
.copy-btn.is-copied {
  background: var(--ink);
  color: var(--button-text);
  border-color: var(--ink);
}

/* Info notice */
.payid-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px 22px;
}
.payid-notice-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.payid-notice p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* How to pay with PayID */
.payid-instructions {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 40px;
}
.payid-steps h2 {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 22px;
}
.payid-steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payid-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--ink-soft);
}
.step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--button-text);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.payid-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-left: 1px solid var(--border-light);
  padding-left: 40px;
}
.payid-phone-mock {
  width: 140px;
  height: 220px;
  border: 2px solid var(--ink);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 22px;
}
.payid-phone-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  background: var(--ink);
  color: var(--button-text);
  border-radius: 5px;
}
.payid-phone-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.payid-phone p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 240px;
}

/* What happens next */
.order-next {
  text-align: center;
}
.next-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.next-step {
  flex: 1;
  max-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.next-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--cream);
  color: var(--ink);
  margin-bottom: 16px;
}
.next-step h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.next-step p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.next-arrow {
  color: var(--border-light);
  font-size: 18px;
  margin-top: 26px;
  flex-shrink: 0;
}

/* Need assistance */
.order-assistance {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 26px 30px;
}
.assistance-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.assistance-copy {
  flex: 1;
}
.assistance-copy h4 {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 6px;
}
.assistance-copy p {
  font-size: 13px;
  color: var(--muted);
}
.assistance-copy a {
  text-decoration: underline;
  color: var(--ink-soft);
}
.assistance-btn {
  flex-shrink: 0;
  padding: 14px 26px;
  white-space: nowrap;
}

/* Order summary sidebar */
.order-summary-card {
  position: sticky;
  top: 24px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 32px 28px;
}
.order-summary-card h3 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 22px;
}
.order-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.summary-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.summary-order-num {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
}
.copy-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid var(--border-light);
  background: var(--cream);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.copy-icon-btn:hover {
  background: var(--beige);
}
.copy-icon-btn.is-copied {
  background: var(--ink);
  color: var(--button-text);
  border-color: var(--ink);
}
.summary-divider {
  height: 1px;
  background: var(--border-light);
  margin: 22px 0;
}
.summary-product {
  display: flex;
  align-items: center;
  gap: 14px;
}
.summary-product + .summary-product {
  margin-top: 16px;
}
.summary-product img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--cream);
  flex-shrink: 0;
}
.summary-product-info {
  flex: 1;
}
.summary-product-info h5 {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.summary-product-info p {
  font-size: 12px;
  color: var(--muted);
}
.summary-product-price {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.summary-line:last-child {
  margin-bottom: 0;
}
.summary-total {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.summary-total span:last-child {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
}
.summary-total em {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  color: var(--muted);
}
.summary-block .summary-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.summary-block .summary-address {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.summary-questions {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.summary-questions-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.summary-questions-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.summary-questions-email {
  font-size: 12.5px;
  color: var(--muted);
}

/* Trust badges row */
.trust-badges {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px 90px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.trust-badge .icon-circle {
  margin: 0 auto 18px;
}
.trust-badge h4 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.trust-badge p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .order-page-body {
    grid-template-columns: 1fr;
  }
  .order-summary-card {
    position: static;
    order: -1;
  }
  .payid-instructions {
    grid-template-columns: 1fr;
  }
  .payid-phone {
    border-left: none;
    border-top: 1px solid var(--border-light);
    padding-left: 0;
    padding-top: 30px;
  }
  .next-steps {
    flex-wrap: wrap;
    row-gap: 26px;
  }
  .next-step {
    max-width: 45%;
    flex: 1 1 45%;
  }
  .next-arrow {
    display: none;
  }
  .trust-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 20px;
  }
}
@media (max-width: 900px) {
  .order-hero {
    flex-direction: column;
    min-height: 0;
  }
  .order-hero-content {
    width: 100%;
    padding: 50px 32px 40px;
  }
  .order-hero-image {
    position: relative;
    width: 100%;
    height: 260px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .order-page-body {
    padding: 40px 32px 70px;
  }
  .payid-summary {
    grid-template-columns: 1fr;
  }
  .payid-instructions {
    padding: 30px;
  }
}
@media (max-width: 767px) {
  /* The floating header's real height (--header-h) + the space it sits below
     the announce bar (--announce-h, both set by main.js) determine exactly
     how much top padding the stacked hero content needs to clear it — a
     fixed guess here previously drifted out of sync whenever either of
     those actually changed (e.g. was tuned while viewing with the WP admin
     bar present, which doesn't exist for real visitors). */
  .order-hero-content {
    padding-top: calc(var(--announce-h, 0px) + var(--header-h, 70px) + 20px);
  }
}
@media (max-width: 620px) {
  .order-hero-content h1 {
    font-size: 32px;
  }
  .order-hero-content {
    padding: calc(var(--announce-h, 0px) + var(--header-h, 70px) + 20px) 20px
      32px;
  }
  .order-page-body {
    padding: 32px 20px 56px;
    gap: 32px;
  }
  .order-assistance {
    flex-wrap: wrap;
  }
  .assistance-btn {
    width: 100%;
    text-align: center;
  }
  .next-step {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .trust-badges {
    grid-template-columns: 1fr;
    padding: 0 20px 70px;
    gap: 30px;
  }
  .payid-instructions {
    padding: 24px;
  }
}

/* =========================================================
   Category Highlight (3 Tiles)
   ========================================================= */
.category-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0 48px;
  margin: 50px 0;
  background: var(--cream);
}
.category-highlight-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.category-highlight-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.category-highlight-tile {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.category-highlight-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.category-highlight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.category-highlight-tile:hover .category-highlight-image img {
  transform: scale(1.04);
}
.category-highlight-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f0ebe3;
  padding: 22px 24px;
}
.category-highlight-text h3 {
  font-size: var(--atg-heading-size, 20px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.category-highlight-text p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
}
.category-highlight-arrow {
  flex-shrink: 0;
  color: var(--ink);
  transition: transform 0.25s ease;
}
.category-highlight-tile:hover .category-highlight-arrow {
  transform: translateX(4px);
}
.category-highlight-label {
  margin: 28px 0 0;
}

@media (max-width: 1024px) {
  .category-highlight-grid,
  .category-highlight-grid.cols-2,
  .category-highlight-grid.cols-3,
  .category-highlight-grid.cols-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .category-highlight-grid,
  .category-highlight-grid.cols-2,
  .category-highlight-grid.cols-3,
  .category-highlight-grid.cols-4 {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 20px;
  }
  .category-highlight-info {
    padding: 18px 20px;
  }
}

/* =========================================================
   Resources (QR-only)
   ========================================================= */
.resources-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(90deg, #d8cbb4 0%, #c9bba4 45%, #b6a58b 100%);
}
.resources-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.resources-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(43, 40, 37, 0.38);
}
.resources-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}
.resources-hero-content .eyebrow {
  color: #ede6d8;
}
.resources-hero-content h1 {
  font-size: 48px;
  line-height: 1.1;
  color: #fff;
}

.resources-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 48px 90px;
}
.resources-empty {
  font-family: var(--font-sans);
  color: var(--muted);
  text-align: center;
  padding: 60px 0;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.resource-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-light);
  box-shadow: 0 12px 32px rgba(43, 40, 37, 0.08);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.resource-card:hover {
  box-shadow: 0 20px 44px rgba(43, 40, 37, 0.16);
  transform: translateY(-5px);
}
.resource-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-2);
}
.resource-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.resource-card:hover .resource-card-img img {
  transform: scale(1.05);
}
.resource-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.resource-card-date {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.resource-card h3 {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 10px;
}
.resource-card-excerpt {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 16px;
}
.resource-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-top: auto;
}
.resource-card-readmore svg {
  transition: transform 0.25s ease;
}
.resource-card:hover .resource-card-readmore svg {
  transform: translateX(4px);
}

/* Single resource — blog-post layout */
.resource-single-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(90deg, #d8cbb4 0%, #c9bba4 45%, #b6a58b 100%);
}
.resource-single-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.resource-single-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(43, 40, 37, 0.68) 0%,
    rgba(43, 40, 37, 0.1) 55%,
    rgba(43, 40, 37, 0) 100%
  );
}
.resource-single-hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 48px 44px;
  width: 100%;
  box-sizing: border-box;
}
.resource-single-hero-content .eyebrow {
  color: #ede6d8;
}
.resource-single-hero-content h1 {
  font-size: 40px;
  line-height: 1.15;
  color: #fff;
}
.resource-single {
  max-width: 780px;
  margin: 0 auto;
  padding: 52px 48px 90px;
}
.resource-single-body {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.resource-single-body p {
  margin-bottom: 20px;
}
.resource-single-body h2,
.resource-single-body h3 {
  margin: 36px 0 16px;
}
.resource-single-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.resource-single-back svg {
  transition: transform 0.25s ease;
}
.resource-single-back:hover svg {
  transform: translateX(-4px);
}

@media (max-width: 1024px) {
  .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .resources-hero-content h1 {
    font-size: 38px;
  }
  .resource-single-hero-content h1 {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .resource-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .resources-hero {
    min-height: 280px;
  }
  .resources-hero-content h1 {
    font-size: 30px;
  }
  .resources-page {
    padding: 40px 20px 60px;
  }
  .resource-single-hero {
    min-height: 300px;
  }
  .resource-single-hero-content,
  .resource-single {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================================================
   FAQ Block (full width, standalone) — reuses .faq-item /
   .faq-icon from the Shop/Single Product FAQ (see "FAQ"
   section above), just without the two-column intro layout.
   ========================================================= */
.faqblock {
  background-color: #f0ebe3;
  padding: 100px 48px;
}
.faqblock-inner {
  max-width: 820px;
  margin: 0 auto;
}
.faqblock-inner .eyebrow.center {
  text-align: center;
}
.faqblock-heading {
  font-size: var(--atg-heading-size, 34px);
  line-height: 1.25;
  text-align: center;
  margin-bottom: 48px;
}

@media (max-width: 700px) {
  .faqblock {
    padding: 60px 20px;
  }
  .faqblock-heading {
    font-size: 28px;
    margin-bottom: 32px;
  }
}

/* =========================================================
   Reconstitution Add-on Reminder (single product page)
   ========================================================= */
.addon-reminder {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--beige);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 16px 20px;
  margin: 20px 0;
}
.addon-reminder-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-light);
}
.addon-reminder-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.addon-reminder-body {
  flex: 1;
  min-width: 0;
}
.addon-reminder-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.addon-reminder-title {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 4px;
}
.addon-reminder-title a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.addon-reminder-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.addon-variation-select {
  display: block;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
  max-width: 100%;
}
.addon-variation-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.addon-toggle-btn {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}
.addon-toggle-btn:hover {
  opacity: 0.85;
}
.addon-toggle-btn[data-state="remove"] {
  background: var(--ink);
  color: var(--button-text);
}
.addon-toggle-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.addon-reminder-check {
  flex-shrink: 0;
  display: flex;
  margin-top: 2px;
}
.addon-reminder-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--muted-2);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.addon-reminder-check input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.addon-reminder-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--button-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.addon-reminder-check input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 600px) {
  .addon-reminder {
    flex-wrap: wrap;
    padding: 14px 16px;
    flex-direction: column;
  }
  .addon-reminder-check {
    order: -1;
    margin-left: auto;
  }
}

/* =========================================================
   Subscribe & Save modal — name/email fields + error state
   ========================================================= */
.subscribe-field {
  margin-bottom: 16px;
}
.subscribe-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.subscribe-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
}
.subscribe-field input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.subscribe-modal-error {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: #a3453a;
  margin: -8px 0 16px;
}

/* =========================================================
   Reconstitution Calculator (template-calculator.php)
   ========================================================= */
.calculator-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 60px 24px;
}
.calculator-header {
  text-align: center;
  margin-bottom: 40px;
}
.calculator-logo {
  max-height: 48px;
  margin-bottom: 16px;
}
.calculator-header h1 {
  font-family: var(--font-serif);
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
}
.calculator-header p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 10px;
}
.calculator-box {
  background: var(--cream-2);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 32px;
}
.calc-field {
  margin-bottom: 22px;
}
.calc-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.calc-input-row {
  display: flex;
  gap: 10px;
}
.calculator-box input,
.calculator-box select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
}
.calc-input-row select {
  max-width: 90px;
  flex-shrink: 0;
}
.calc-results {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}
.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  font-family: var(--font-sans);
}
.calc-result-row span {
  font-size: 13px;
  color: var(--muted);
}
.calc-result-row strong {
  font-size: 17px;
  color: var(--ink);
  font-weight: 600;
}
.calculator-disclaimer {
  margin-top: 20px;
  font-size: 11.5px;
  color: var(--muted-2);
  line-height: 1.5;
  text-align: center;
}