/* Daniel's House — Shared Components */
/* Used by all pages: free shipping bar, sticky cart, popup, search */

:root {
  --cream: #FAF6F0;
  --cream-warm: #F2EBDD;
  --ink: #1F1B17;
  --ink-soft: #4A433B;
  --sage: #5D6E5C;
  --gold: #B89968;
  --tan: #E8E1D5;
  --rule: #D4C9B6;
}

/* ═══ CRED STRIP BANNER ═══ */
/* Dark horizontal banner with brand-promise trust signals — used near the
   top of every product/collection page for instant credibility. */
.cred-strip {
  background: var(--ink);
  color: var(--cream);
  padding: 22px 40px;
  text-align: center;
  overflow: hidden;
}
.cred-strip-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}
.cred-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.cred-item .cred-dot {
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .cred-strip { padding: 18px 20px; }
  .cred-strip-inner { gap: 18px 26px; }
  .cred-item { font-size: 10px; letter-spacing: 0.14em; gap: 7px; }
}

/* ═══ FREE SHIPPING / TOP BAR ═══ */
/* Permanent top bar — fixed at viewport top. Unified uppercase typography
   across all segments for a clean, editorial look. */
.shipping-bar {
  background: var(--ink);
  color: var(--cream);
  padding: 0;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  height: var(--shipping-bar-height);
  z-index: 99;
  overflow: hidden;
  border-bottom: 1px solid rgba(184, 153, 104, 0.18);
  line-height: 1;
}
.shipping-bar-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  padding: 0 16px;
  max-width: 1400px;
  margin: 0 auto;
}
.shipping-bar-text {
  white-space: nowrap;
  font-weight: 500;
  color: var(--cream);
  opacity: 0.95;
  line-height: 1;
}
.shipping-bar-text strong {
  color: var(--gold);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.shipping-bar-divider {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
  flex-shrink: 0;
}
.shipping-bar-pill {
  white-space: nowrap;
  color: var(--cream);
  opacity: 0.7;
  font-weight: 500;
  transition: opacity 0.3s;
}
.shipping-bar-pill:hover { opacity: 1; }
.shipping-bar-progress {
  position: absolute;
  inset: 0;
  background: rgba(184, 153, 104, 0.18);
  width: 0%;
  transition: width 0.5s ease;
  z-index: 1;
}
.shipping-bar.complete .shipping-bar-progress {
  width: 100% !important;
  background: rgba(93, 110, 92, 0.25);
}

/* Responsive — hide pills on smaller viewports, keep text comfortably readable */
@media (max-width: 980px) {
  .shipping-bar-inner { gap: 10px; padding: 0 12px; }
  .shipping-bar { font-size: 8.5px; letter-spacing: 0.16em; }
  .shipping-bar-pill,
  .shipping-bar-divider { display: none !important; }
}
@media (max-width: 720px) {
  .shipping-bar-inner { gap: 8px; padding: 0 10px; }
  .shipping-bar { font-size: 8.5px; letter-spacing: 0.14em; }
  .shipping-bar-text strong { font-size: 9.5px; }
}
.shipping-bar-text { position: relative; z-index: 2; }
.shipping-bar-text strong { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 11px; }
.shipping-bar-progress {
  position: absolute;
  inset: 0;
  background: rgba(184, 153, 104, 0.18);
  width: 0%;
  transition: width 0.5s ease;
  z-index: 1;
}
.shipping-bar.complete .shipping-bar-progress { width: 100% !important; background: rgba(93, 110, 92, 0.25); }

/* ═══ STICKY CART ICON IN NAV ═══ */
.cart-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 10px 14px;
  transition: color 0.3s;
}
.cart-trigger:hover { color: var(--sage); }
.cart-trigger-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--cream);
  border-radius: 50%;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

/* ═══ CART DRAWER ═══ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 23, 0.4);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--cream);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
}
.cart-title em { font-style: italic; color: var(--sage); }
.cart-close {
  background: var(--ink);
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--cream);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, transform 0.25s;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(31, 27, 23, 0.15);
}
.cart-close:hover { background: var(--gold); transform: scale(1.08); }
.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
}
.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
}
.cart-empty-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  margin-bottom: 18px;
}
.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.cart-item-img {
  width: 64px;
  height: 64px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { min-width: 0; }
.cart-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 4px;
}
.cart-item-name em { font-style: italic; color: var(--sage); }
.cart-item-meta { font-size: 11px; color: var(--ink-soft); margin-bottom: 6px; }
.cart-item-meta.subscribe { color: var(--gold); font-weight: 500; }
.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
}
.cart-qty button {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 14px;
}
.cart-qty button:hover { background: var(--cream-warm); }
.cart-qty span {
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
}
.cart-item-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0;
  margin-left: 8px;
}
.cart-item-remove:hover { color: var(--gold); }
.cart-item-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  text-align: right;
}
.cart-footer {
  padding: 20px 28px 28px;
  border-top: 1px solid var(--rule);
  background: var(--cream-warm);
}
.cart-totals {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 13px;
}
.cart-totals-line { display: flex; justify-content: space-between; }
.cart-totals-line.total {
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  margin-top: 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
}
.cart-totals-line.total .amount { color: var(--sage); }
.cart-checkout {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.cart-checkout:hover { background: var(--sage); }
.cart-shipping-note {
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 12px;
  font-style: italic;
}
.cart-shipping-note.unlocked { color: var(--sage); font-weight: 500; }

/* ═══ EMAIL CAPTURE POPUP ═══ */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 23, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.popup {
  background: var(--cream);
  max-width: 480px;
  width: 90%;
  padding: 50px 40px 40px;
  text-align: center;
  position: relative;
  border: 1px solid var(--gold);
  transform: scale(0.95);
  transition: transform 0.4s ease;
}
.popup-overlay.open .popup { transform: scale(1); }
.popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--ink);
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--cream);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, transform 0.25s;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(31, 27, 23, 0.15);
  z-index: 10;
}
.popup-close:hover { background: var(--gold); transform: scale(1.08); }
.popup-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 14px;
}
.popup-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 12px;
}
.popup-title em { font-style: italic; color: var(--sage); }
.popup-blurb {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 28px;
}
.popup-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popup-input {
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: var(--cream-warm);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s;
}
.popup-input:focus { border-color: var(--gold); }
.popup-submit {
  padding: 14px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.3s;
}
.popup-submit:hover { background: var(--sage); }
.popup-skip {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 10px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 14px;
}
.popup-success {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--sage);
  padding: 20px 0;
}

/* ═══ SEARCH MODAL ═══ */
.search-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.3s;
}
.search-trigger.active { color: var(--gold); }

/* ═══ ACCOUNT NAV LINK — mirrors search/cart trigger style ═══ */
.account-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s;
  display: inline-flex;
  align-items: center;
}
.account-trigger:hover { color: var(--sage); }
.account-trigger[data-state="signed-in"] { color: var(--gold); }
.account-trigger[data-state="signed-in"]:hover { color: var(--sage); }

/* ═══ PAGE FILTER (floating search button → centered modal) ═══ */
.page-filter {
  position: fixed !important;
  top: 14px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  z-index: 1100;
}

/* ── COLLAPSED: small circular toggle button ── */
.page-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(31, 27, 23, 0.22);
  transition: transform 0.2s ease, background 0.2s ease;
  font-family: 'Poppins', sans-serif;
  z-index: 110;
}
.page-filter-toggle:hover {
  background: var(--ink-soft);
  transform: scale(1.06);
}
.page-filter-toggle-icon { line-height: 1; }
.page-filter-toggle-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--gold);
  color: var(--cream);
  font-size: 10px;
  font-weight: 600;
  min-width: 19px;
  height: 19px;
  border-radius: 100px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--ink);
}
.page-filter.has-active .page-filter-toggle-badge { display: inline-flex; }
.page-filter.expanded .page-filter-toggle-icon::before {
  content: '✕';
}
.page-filter.expanded .page-filter-toggle-icon {
  font-size: 18px;
}
.page-filter.expanded .page-filter-toggle-icon span { display: none; }
.page-filter.expanded { z-index: 1200; }
.page-filter.expanded .page-filter-toggle { z-index: 1200; }

/* ── BACKDROP (dim overlay) ── */
.page-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 23, 0.55);
  z-index: 1150;
}
.page-filter.expanded .page-filter-overlay {
  display: block;
  animation: pf-fade-in 0.25s ease;
}
@keyframes pf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── PANEL (centered modal) ── */
.page-filter-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 84vh;
  background: var(--cream);
  border: 1px solid var(--gold);
  box-shadow: 0 24px 80px rgba(31, 27, 23, 0.35);
  z-index: 1180;
  overflow-y: auto;
  padding: 22px 24px;
}
.page-filter.expanded .page-filter-panel {
  display: block;
  animation: pf-zoom-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(-50%, -50%);
}
@keyframes pf-zoom-in {
  from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);     opacity: 1; }
}

/* ── HEAD ── */
.page-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.page-filter-head-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-style: italic;
  color: var(--ink);
}
.page-filter-head-title em { color: var(--sage); font-style: italic; }
.page-filter-close {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.page-filter-close:hover { border-color: var(--ink); color: var(--ink); }

/* ── SEARCH BAR ── */
.page-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--gold);
  padding: 0 0 12px;
  margin-bottom: 18px;
}
.page-filter-icon {
  font-size: 18px;
  color: var(--gold);
  flex-shrink: 0;
}
.page-filter-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  outline: none;
  padding: 4px 0;
  min-width: 0;
}
.page-filter-input::placeholder { color: var(--ink-soft); opacity: 0.55; }
.page-filter-clear {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  display: none;
}
.page-filter.has-query .page-filter-clear { display: inline-block; }

/* ── CATEGORIES (5 stacked sections) ── */
.page-filter-categories {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.page-filter-category {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.page-filter-category:last-child { border-bottom: none; padding-bottom: 0; }
.page-filter-category-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 10px;
}
.page-filter-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 7px;
}
.filter-chip {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 100px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--gold); color: var(--ink); }
.filter-chip.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ── SITE-WIDE RESULTS ── */
.page-filter-results {
  margin-bottom: 16px;
  display: none;
  max-height: 320px;
  overflow-y: auto;
  background: var(--cream-warm);
  padding: 14px;
  border: 1px solid var(--rule);
}
.page-filter-results.show { display: block; }
.page-filter-results-title {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 12px;
}
.page-filter-results-list { display: grid; gap: 8px; }
.page-filter-result {
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  background: var(--cream);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--ink);
  align-items: center;
  transition: border-color 0.2s;
}
.page-filter-result:hover { border-color: var(--gold); }
.page-filter-result img { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; }
.page-filter-result-info { flex: 1; min-width: 0; }
.page-filter-result-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  margin-bottom: 2px;
}
.page-filter-result-name em { font-style: italic; color: var(--sage); }
.page-filter-result-meta {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.page-filter-result-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--gold);
  font-weight: 500;
  padding-left: 8px;
}
.page-filter-empty {
  text-align: center;
  padding: 24px 16px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}

/* ── FOOT ── */
.page-filter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.page-filter-count {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.page-filter-clear-all {
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-filter-clear-all:hover { color: var(--ink); }

/* Lock body scroll when modal open */
body.has-page-filter-modal {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

@media (max-width: 760px) {
  /* .page-filter position is set defensively inline by JS (top: 12px, right: 12px) */
  .page-filter-toggle { width: 44px; height: 44px; font-size: 19px; }
  .page-filter-panel {
    width: calc(100vw - 24px);
    max-height: 86vh;
    padding: 18px 18px;
  }
  .page-filter-input { font-size: 18px; }
  .page-filter-head-title { font-size: 22px; }
}

/* ═══ EXPANDING SEARCH PANEL ═══ */

/* ═══ EXPANDING SEARCH PANEL ═══ */

/* ═══ EXPANDING SEARCH PANEL ═══ */
.search-panel {
  position: fixed;
  top: calc(var(--shipping-bar-height) + var(--nav-height));
  left: 0;
  right: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 8px 32px rgba(31, 27, 23, 0.08);
  z-index: 98;
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
  max-height: 70vh;
  overflow-y: auto;
}
.search-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.search-panel-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 40px 26px;
}
.search-panel-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.search-panel-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  outline: none;
  font-weight: 400;
  padding: 4px 0;
}
.search-panel-input::placeholder {
  color: var(--ink-soft);
  opacity: 0.6;
}
.search-panel-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 10px;
  font-family: 'Poppins', sans-serif;
  transition: color 0.3s;
}
.search-panel-close:hover { color: var(--ink); }

.search-panel-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-panel-results.has-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-panel-result {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.search-panel-result:hover {
  border-color: var(--gold);
  background: var(--cream-warm);
}
.search-panel-result img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
}
.search-panel-result-info { flex: 1; min-width: 0; }
.search-panel-result-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  margin-bottom: 4px;
  font-weight: 500;
}
.search-panel-result-name em { font-style: italic; color: var(--sage); }
.search-panel-result-tag {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.search-panel-result-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--gold);
  font-weight: 500;
  margin-left: auto;
  padding-left: 8px;
}

/* ── Grouped results (Products / Routines / Bundles) ────────────── */
.search-panel-group-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  padding: 16px 4px 8px;
  border-bottom: 1px solid rgba(184, 153, 104, 0.25);
  margin-bottom: 10px;
}
.search-panel-group-label:first-child { padding-top: 4px; }
.search-panel-results > .search-panel-result + .search-panel-group-label,
.search-panel-results > .search-panel-result-bundle + .search-panel-group-label {
  margin-top: 18px;
}

/* Routine/bundle results — no thumbnail, replaced with a "kind" pill */
.search-panel-result-bundle {
  padding: 12px 14px;
}
.search-panel-result-kind {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 2px;
  flex-shrink: 0;
  line-height: 1;
}
.search-panel-result-kind.kind-routine {
  background: var(--gold);
  color: var(--cream);
}
.search-panel-result-kind.kind-bundle {
  color: var(--gold);
  border: 1px solid var(--gold);
  background: transparent;
  padding: 4px 8px;
}
.search-panel-result-arrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--gold);
  margin-left: auto;
  padding-left: 8px;
}
.search-panel-result-bundle .search-panel-result-name {
  font-size: 18px;
}
.search-panel-result-bundle .search-panel-result-name em { color: var(--gold); }
.search-panel-empty,
.search-panel-hint {
  text-align: center;
  padding: 28px 20px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}
@media (max-width: 720px) {
  .search-panel-inner { padding: 18px 22px 22px; }
  .search-panel-input { font-size: 18px; }
  .search-panel-results { grid-template-columns: 1fr; }
}
.search-trigger:hover { color: var(--sage); }
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(250, 246, 240, 0.96);
  z-index: 997;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 100px 40px 40px;
  overflow-y: auto;
}
.search-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.search-inner {
  max-width: 720px;
  margin: 0 auto;
}
.search-input-wrap {
  border-bottom: 1px solid var(--ink);
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.search-input {
  flex: 1;
  padding: 16px 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-style: italic;
  color: var(--ink);
}
.search-input::placeholder { color: var(--ink-soft); opacity: 0.6; }
.search-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--ink-soft);
}
.search-results {
  display: grid;
  gap: 4px;
}
.search-result {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: transparent;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.search-result:hover {
  background: var(--cream-warm);
  border-color: var(--gold);
}
.search-result-img {
  width: 60px;
  height: 60px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.search-result-img img { width: 100%; height: 100%; object-fit: cover; }
.search-result-cat {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 4px;
}
.search-result-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
}
.search-result-name em { font-style: italic; color: var(--sage); }
.search-result-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}
.search-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
}

@media (max-width: 640px) {
  .cart-drawer { width: 100vw; }
  .popup { padding: 40px 24px 30px; }
  .popup-title { font-size: 30px; }
  .search-overlay { padding: 60px 20px 20px; }
  .search-input { font-size: 22px; }
}

/* ═══ GLOBAL PRODUCT HOVER (grow on hover) ═══ */
/* Apply to product image containers across all pages */
.bundle-thumb,
.fbt-product-img,
.result-product-img,
.search-result-img,
.related-img,
.concern-thumb,
.concern-product-img {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
  cursor: pointer;
  will-change: transform;
}
.bundle-thumb:hover,
.fbt-product-img:hover,
.result-product-img:hover,
.search-result-img:hover,
.related-img:hover,
.concern-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 38px rgba(31, 27, 23, 0.22);
  z-index: 5;
  position: relative;
}

/* Skincare/supplements row image hover (image scales inside container) */
.row-img { overflow: hidden; }
.row-img img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.row:hover .row-img img,
.row-img:hover img { transform: scale(1.08); }

/* Click affordance overlay icon on hoverable thumbs */
.bundle-thumb::after,
.concern-thumb::after,
.concern-product-img::after {
  content: '⤢';
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--ink);
  color: var(--cream);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 6;
}
.bundle-thumb:hover::after,
.concern-thumb:hover::after,
.concern-product:hover .concern-product-img::after { opacity: 0.92; }

/* ═══ SHARED LIGHTBOX / CAROUSEL ═══ */
/* Reusable across bundles.html, shop.html, and any other page */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 23, 0.93);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 40px 20px;
}
.lightbox-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.lightbox {
  background: var(--cream);
  max-width: 1080px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transition: transform 0.3s ease;
  border: 1px solid var(--gold);
  overflow: hidden;
}
.lightbox-overlay.open .lightbox { transform: scale(1); }

.lightbox-header {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  background: var(--cream-warm);
  flex-shrink: 0;
}
.lightbox-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
}
.lightbox-title strong {
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
}
.lightbox-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 28px;
  color: var(--ink-soft);
  width: 36px;
  height: 36px;
  line-height: 1;
  transition: color 0.3s;
}
.lightbox-close:hover { color: var(--ink); }

.lightbox-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.lightbox-image-side {
  background: var(--cream-warm);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 420px;
}
.lightbox-image {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border: 1px solid var(--rule);
}
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--cream);
  border: 1px solid var(--rule);
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 20px;
  color: var(--ink);
  transition: all 0.3s;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-arrow:hover {
  background: var(--gold);
  color: var(--cream);
  border-color: var(--gold);
}
.lightbox-arrow.prev { left: 16px; }
.lightbox-arrow.next { right: 16px; }

.lightbox-info-side {
  padding: 36px 36px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.lightbox-counter {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 14px;
}
.lightbox-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 10px;
}
.lightbox-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 12px;
}
.lightbox-name em { font-style: italic; color: var(--sage); }
.lightbox-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 20px;
  line-height: 1.45;
}
.lightbox-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 18px;
}
.lightbox-price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.lightbox-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 500;
}
.lightbox-size {
  font-size: 12px;
  color: var(--ink-soft);
}
.lightbox-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.lightbox-btn {
  padding: 14px 20px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: block;
  transition: all 0.3s;
}
.lightbox-btn.primary {
  background: var(--ink);
  color: var(--cream);
}
.lightbox-btn.primary:hover { background: var(--sage); }
.lightbox-btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.lightbox-btn.secondary:hover {
  background: var(--ink);
  color: var(--cream);
}

.lightbox-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--cream-warm);
}
.lightbox-dot {
  width: 8px;
  height: 8px;
  background: var(--rule);
  cursor: pointer;
  border-radius: 50%;
  border: none;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.lightbox-dot:hover { transform: scale(1.4); }
.lightbox-dot.active { background: var(--gold); transform: scale(1.3); }

@media (max-width: 880px) {
  .lightbox-body { grid-template-columns: 1fr; }
  .lightbox-image-side { min-height: 280px; padding: 20px; }
  .lightbox-image { max-height: 280px; }
  .lightbox-info-side { padding: 24px 24px 20px; }
  .lightbox-name { font-size: 28px; }
  .lightbox-arrow { width: 36px; height: 36px; }
}

/* ═══ BUNDLE SUBSCRIBE TOGGLE ═══ */
/* A refined two-button selector with a sliding gold indicator. */
/* Used on bundle cards (curated, concern, build-your-own). */
.bundle-subscribe-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  margin-bottom: 14px;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

/* Sliding gold indicator at the top */
.bundle-subscribe-toggle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 3px;
  background: var(--gold);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 2;
  pointer-events: none;
}
.bundle-subscribe-toggle.subscribe-mode::after {
  transform: translateX(100%);
}
/* Collapse the gap below the toggle when the cadence selector is anchored beneath it */
.bundle-subscribe-toggle.subscribe-mode { margin-bottom: 0; }

/* Vertical separator between the two options */
.bundle-subscribe-toggle::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  background: var(--rule);
  z-index: 1;
  pointer-events: none;
}

.bundle-subscribe-toggle button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 16px 12px 14px;
  text-align: center;
  transition: background 0.35s ease;
  position: relative;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0; /* allow children to shrink within grid column */
}
.bundle-subscribe-toggle button:hover {
  background: rgba(184, 153, 104, 0.06);
}
.bundle-subscribe-toggle button.active {
  background: var(--cream);
}

/* Radio mark + label inline */
.bundle-subscribe-toggle .toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap; /* if needed, badge can wrap to a new line on tiny screens */
  row-gap: 6px;
}

/* Refined radio mark */
.bundle-subscribe-toggle .toggle-mark {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.3s;
  flex-shrink: 0;
}
.bundle-subscribe-toggle button.active .toggle-mark {
  border-color: var(--gold);
}
.bundle-subscribe-toggle button.active .toggle-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: dh-toggle-lock-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dh-toggle-lock-in {
  0% { transform: translate(-50%, -50%) scale(0); }
  60% { transform: translate(-50%, -50%) scale(1.35); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Option name in italic Cormorant — matches the brand voice */
.bundle-subscribe-toggle .toggle-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1;
  transition: color 0.35s;
  white-space: nowrap;
}
.bundle-subscribe-toggle button.active .toggle-name {
  color: var(--ink);
}

/* "+10% OFF" gold pill badge — injected only on the Monthly button via CSS,
   so the HTML for the toggle stays simple. Sits inline next to the label. */
.bundle-subscribe-toggle button[data-mode="subscribe"] .toggle-row::after {
  content: '+10% OFF';
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 8px;
  letter-spacing: 0.16em;
  font-weight: 600;
  padding: 3px 7px 2px;
  border-radius: 100px;
  background: var(--cream-warm);
  color: var(--gold);
  border: 1px solid rgba(184, 153, 104, 0.4);
  line-height: 1;
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.35s;
  white-space: nowrap;
  flex-shrink: 0;
}
.bundle-subscribe-toggle button[data-mode="subscribe"].active .toggle-row::after {
  background: var(--gold);
  color: var(--cream);
  border-color: var(--gold);
  transform: scale(1.04);
}

/* Tiny uppercase meta below — now just "Cancel anytime" / "Single delivery",
   so it fits comfortably with no overflow risk. */
.bundle-subscribe-toggle .toggle-meta {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  opacity: 0.55;
  transition: opacity 0.35s, color 0.35s;
  line-height: 1.2;
}
.bundle-subscribe-toggle button.active .toggle-meta {
  opacity: 1;
  color: var(--gold);
}

/* Mobile — slightly tighter padding, smaller pill */
@media (max-width: 640px) {
  .bundle-subscribe-toggle button { padding: 14px 8px 12px; gap: 5px; }
  .bundle-subscribe-toggle .toggle-name { font-size: 16px; }
  .bundle-subscribe-toggle .toggle-row { gap: 7px; }
  .bundle-subscribe-toggle button[data-mode="subscribe"] .toggle-row::after {
    font-size: 7.5px;
    letter-spacing: 0.14em;
    padding: 2.5px 6px 1.5px;
  }
  .bundle-subscribe-toggle .toggle-meta { font-size: 8.5px; letter-spacing: 0.18em; }
}

/* Very small phones — let the badge wrap below the label if needed */
@media (max-width: 360px) {
  .bundle-subscribe-toggle .toggle-row { flex-direction: column; gap: 4px; }
}

/* ═══ BUNDLE CADENCE SELECTOR ═══ */
/* Appears below the One-Time/Subscribe toggle ONLY when Subscribe is active.
   2x2 grid of cadence options: Monthly / Every 2 Mo / Every 3 Mo / Smart Refill.
   Smart Refill ships monthly with per-product replenishment based on product runtime. */
.bundle-cadence {
  margin: 0 0 14px;
  padding: 18px 18px 16px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-top: 0; /* visually anchors to the toggle above */
  font-family: 'Poppins', sans-serif;
  animation: cadence-fadein 0.35s ease both;
}
.bundle-cadence[hidden] { display: none; }
@keyframes cadence-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cadence-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 11px;
  text-align: center;
}
.cadence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* When Smart Refill is disabled, the 3rd cadence button (Every 3 Months)
   is left alone in row 2. Span it across both columns so it doesn't look orphaned. */
.bundle-cadence[data-no-smart] .cadence-grid .cadence-btn:nth-child(3) {
  grid-column: 1 / -1;
}
.cadence-btn {
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  padding: 12px 10px 11px;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
}
.cadence-btn:hover { border-color: rgba(184, 153, 104, 0.45); background: var(--cream); }
.cadence-btn.active {
  border-color: var(--gold);
  background: var(--cream);
  box-shadow: inset 0 -3px 0 var(--gold);
}
.cadence-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}
.cadence-meta {
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}
.cadence-btn.active .cadence-meta { color: var(--gold); }
/* Smart Refill has a subtle "RECOMMENDED" feel — slightly different border */
.cadence-btn-smart::after {
  content: 'NEW';
  position: absolute;
  top: -7px;
  right: 8px;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: var(--gold);
  color: var(--cream);
  padding: 2px 6px 1.5px;
  border-radius: 2px;
}
.cadence-note {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(184, 153, 104, 0.08);
  border-left: 3px solid var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.cadence-note[hidden] { display: none; }
.cadence-note strong {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}
/* Mobile — smaller text in cadence buttons */
@media (max-width: 480px) {
  .bundle-cadence { padding: 16px 14px 14px; }
  .cadence-btn { padding: 11px 8px 10px; }
  .cadence-name { font-size: 11px; }
  .cadence-meta { font-size: 7.5px; letter-spacing: 0.14em; }
  .cadence-note { font-size: 13px; }
}

/* ═══ SMART REFILL · 6-MONTH PROJECTED PAYMENTS ═══ */
/* Revealed alongside the cadence-note when Smart Refill is selected.
   Shows the actual cash-out for each of the first 6 months and a total. */
.cadence-projection {
  margin-top: 10px;
  padding: 14px 14px 12px;
  background: rgba(184, 153, 104, 0.05);
  border: 1px solid rgba(184, 153, 104, 0.22);
  border-radius: 4px;
}
.cadence-projection[hidden] { display: none; }
.cadence-projection-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 10px;
  text-align: center;
}
.cadence-projection-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.cadence-projection-grid .proj-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 7px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.06);
}
.cadence-projection-grid .proj-cell-first {
  background: rgba(184, 153, 104, 0.10);
  border-color: rgba(184, 153, 104, 0.35);
}
.cadence-projection-grid .proj-m {
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft, #6B6258);
}
.cadence-projection-grid .proj-amt {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.cadence-projection-grid .proj-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 9.5px;
  color: var(--gold);
  line-height: 1;
}
.cadence-projection-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 10px 6px;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 4px;
}
.cadence-projection-total-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.cadence-projection-total-amt {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.cadence-projection-foot {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft, #6B6258);
  text-align: center;
  margin-top: 4px;
  line-height: 1.4;
}
.cadence-projection-foot span {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
/* Mobile — stack to 3 columns × 2 rows so amounts stay legible */
@media (max-width: 480px) {
  .cadence-projection-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .cadence-projection-grid .proj-cell { padding: 8px 6px; }
  .cadence-projection-grid .proj-amt { font-size: 13px; }
  .cadence-projection-foot { font-size: 12px; }
}

/* ═══ SMART REFILL PROJECTION — trigger button + popup ═══ */
/* The trigger is injected into every .bundle-cadence by shared.js.
   It only becomes visible when Smart Refill is the active cadence. */
.cadence-projection-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(184, 153, 104, 0.08);
  border: 1px solid rgba(184, 153, 104, 0.4);
  color: var(--ink, #1F1B17);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  width: 100%;
  justify-content: center;
}
.cadence-projection-trigger[hidden] { display: none; }
.cadence-projection-trigger:hover {
  background: rgba(184, 153, 104, 0.18);
  border-color: var(--gold, #B89968);
  transform: translateY(-1px);
}
.cadence-projection-trigger .cpt-icon {
  font-size: 14px;
  line-height: 1;
}
.cadence-projection-trigger .cpt-arrow {
  font-size: 12px;
  color: var(--gold, #B89968);
  transition: transform 0.2s;
}
.cadence-projection-trigger:hover .cpt-arrow {
  transform: translateX(3px);
}

/* New always-visible inline projection trigger — used site-wide.
   Lighter visual weight than the (now-deprecated) .cadence-projection-trigger
   so it doesn't compete with primary purchase CTAs. */
.projection-trigger-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 11px 18px;
  background: rgba(184, 153, 104, 0.08);
  border: 1px solid rgba(184, 153, 104, 0.85);
  border-radius: 4px;
  color: var(--ink, #1F1B17);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  width: auto;
}
.projection-trigger-inline:hover {
  background: rgba(184, 153, 104, 0.18);
  border-color: var(--gold, #B89968);
  transform: translateY(-1px);
}
.projection-trigger-inline .ptl-icon { font-size: 14px; line-height: 1; }
.projection-trigger-inline .ptl-text { white-space: nowrap; }
.projection-trigger-inline .ptl-arrow {
  font-size: 12px; color: var(--gold, #B89968);
  transition: transform 0.2s;
}
.projection-trigger-inline:hover .ptl-arrow { transform: translateX(3px); }
/* Dark-background context (PM ritual column, hero on dark) */
.ritual.pm .projection-trigger-inline,
.bundle-hero .projection-trigger-inline,
.featured .projection-trigger-inline {
  color: var(--cream, #F2EBDD);
  background: rgba(196, 164, 124, 0.14);
  border-color: rgba(196, 164, 124, 0.85);
}
.ritual.pm .projection-trigger-inline:hover,
.bundle-hero .projection-trigger-inline:hover,
.featured .projection-trigger-inline:hover {
  background: rgba(196, 164, 124, 0.26);
  border-color: var(--gold, #C4A47C);
}
/* Mobile: allow text to wrap rather than overflow so it stays readable */
@media (max-width: 480px) {
  .projection-trigger-inline {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
  }
  .projection-trigger-inline .ptl-text { white-space: normal; }
}

/* Empty-month styling for product-level projection (months with no shipment) */
.smart-projection-popup .proj-cell-empty,
.cadence-projection-grid .proj-cell-empty {
  opacity: 0.42;
}
.smart-projection-popup .proj-cell-empty .proj-tag,
.cadence-projection-grid .proj-cell-empty .proj-tag {
  font-style: italic;
}

/* The popup itself — fixed overlay rendered at the body level. */
.smart-projection-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: spp-fade-in 0.2s ease-out;
}
.smart-projection-popup[hidden] { display: none; }
@keyframes spp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.smart-projection-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 27, 23, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.smart-projection-card {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 48px);
  background: var(--cream, #FAF6F0);
  border: 1px solid var(--rule, #D4C9B6);
  box-shadow: 0 30px 80px rgba(31, 27, 23, 0.3);
  padding: 36px 36px 28px;
  overflow-y: auto;
  animation: spp-rise 0.22s ease-out;
}
@keyframes spp-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.smart-projection-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: 1px solid var(--rule, #D4C9B6);
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft, #4A433B);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.smart-projection-close:hover {
  border-color: var(--ink, #1F1B17);
  color: var(--ink, #1F1B17);
}
.smart-projection-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold, #B89968);
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}
.smart-projection-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  margin: 0 0 10px;
  color: var(--ink, #1F1B17);
}
.smart-projection-title em {
  font-style: italic;
  color: var(--sage, #5D6E5C);
}
.smart-projection-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft, #4A433B);
  text-align: center;
  margin: 0 0 22px;
  line-height: 1.45;
}
/* The grid reuses .cadence-projection-grid styles for visual consistency,
   but the popup gives it more breathing room. */
.smart-projection-popup .cadence-projection-grid {
  margin-bottom: 18px;
  gap: 6px;
}
.smart-projection-popup .cadence-projection-grid .proj-cell {
  padding: 10px 6px 8px;
}
.smart-projection-popup .cadence-projection-grid .proj-amt {
  font-size: 14px;
}
.smart-projection-summary {
  background: rgba(184, 153, 104, 0.08);
  border: 1px solid rgba(184, 153, 104, 0.22);
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 3px;
}
.smart-projection-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(184, 153, 104, 0.22);
  margin-bottom: 8px;
}
.smart-projection-total-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink, #1F1B17);
}
.smart-projection-total-amt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink, #1F1B17);
}
.smart-projection-compare-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft, #4A433B);
}
.smart-projection-compare-row .spp-strike {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  letter-spacing: 0;
  text-decoration: line-through;
  text-transform: none;
  color: var(--ink-soft, #4A433B);
  font-weight: 400;
}
.smart-projection-savings {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  text-align: center;
  color: var(--sage, #5D6E5C);
  margin-top: 10px;
  line-height: 1.4;
}
.smart-projection-savings strong {
  font-style: normal;
  font-weight: 600;
  color: var(--ink, #1F1B17);
}
.smart-projection-savings em {
  font-style: italic;
  color: var(--ink-soft, #4A433B);
}
.smart-projection-foot {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft, #4A433B);
  text-align: center;
  line-height: 1.5;
  padding-top: 4px;
}
/* Lock body scroll when popup is open */
body.spp-open { overflow: hidden; }

@media (max-width: 600px) {
  .smart-projection-popup { padding: 12px; }
  .smart-projection-card { padding: 28px 22px 22px; }
  .smart-projection-title { font-size: 24px; }
  .smart-projection-sub { font-size: 14px; margin-bottom: 18px; }
  .smart-projection-total-amt { font-size: 20px; }
  .smart-projection-popup .cadence-projection-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═══ SMART REFILL ANNUAL SAVINGS TEASER ═══ */
/* Editorial line above the subscribe toggle that telegraphs how much customers
   save per year by picking Smart Refill. Hidden when savings are $0 (all-monthly bundles). */
.smart-savings-teaser {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 14px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.2;
}
.smart-savings-teaser .smart-rule {
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: 0.32;
  max-width: 56px;
}
.smart-savings-teaser .smart-savings-text strong {
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.smart-savings-teaser .smart-savings-text .smart-prefix {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 8px;
  padding: 2.5px 7px 2px;
  background: rgba(184, 153, 104, 0.10);
  border-radius: 2px;
  vertical-align: 2px;
}
@media (max-width: 480px) {
  .smart-savings-teaser { font-size: 13px; gap: 8px; margin: 12px 0; }
  .smart-savings-teaser .smart-rule { max-width: 32px; }
  .smart-savings-teaser .smart-savings-text .smart-prefix {
    font-size: 8px;
    letter-spacing: 0.18em;
    padding: 2px 5px 1.5px;
    margin-right: 6px;
  }
}


/* Polished "save with the bundle" callout — name, pricing row, subscribe toggle, CTA */
.bundle-footnote {
  max-width: 640px;
  margin: 64px auto 0;
  padding: 0 40px;
}

/* When two routine purchase boxes need to sit side-by-side directly under
   a .split (e.g., Foundation/Longevity rituals on the supplements page) —
   the boxes line up with their matching ritual column above. Stacks on mobile. */
.bundle-footnotes-split {
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.bundle-footnotes-split .bundle-footnote {
  max-width: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1000px) {
  .bundle-footnotes-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ═══ DAILY STACK MOBILE INTERLEAVING ═══
   Desktop layout: rituals row 1 (Foundation | Longevity), purchase boxes row 2
   (Foundation | Longevity) — each footnote sits under its matching ritual via two
   side-by-side grids.

   Mobile (≤1000px): users want to see Foundation ritual *immediately* followed by
   the Foundation purchase box (so you can add it right after reading what's in it),
   THEN the Longevity ritual followed by its purchase box. To do that without
   duplicating markup, we flatten both inner grids with `display: contents` so all
   four elements become direct flex children of `.daily-stack-pair`, then assign
   `order` 1–4 to interleave: F-ritual → F-footnote → L-ritual → L-footnote. */
@media (max-width: 1000px) {
  .daily-stack-pair {
    display: flex;
    flex-direction: column;
  }
  .daily-stack-pair > .split,
  .daily-stack-pair > .bundle-footnotes-split {
    display: contents;
  }
  /* When flattened, footnotes lose their grid-cell sizing — restore the standalone
     bundle-footnote styling (centered, max-width 640px, side padding for mobile). */
  .daily-stack-pair .bundle-footnotes-split > .bundle-footnote {
    padding: 0 20px;
    margin: 32px auto 0;
    max-width: 640px;
  }
  /* Interleave order — F-ritual, F-footnote, L-ritual, L-footnote */
  .daily-stack-pair .ritual.foundation                                { order: 1; }
  .daily-stack-pair .bundle-footnotes-split > .bundle-footnote:nth-child(1) { order: 2; }
  .daily-stack-pair .ritual.longevity                                 { order: 3; }
  .daily-stack-pair .bundle-footnotes-split > .bundle-footnote:nth-child(2) { order: 4; }
}

/* Featured variant — used for the "Or get both together" upsell box that follows
   a .bundle-footnotes-split (Daniel's Daily Supplements on the supplements page).
   Larger, elevated, gold-accented to read as the natural upgrade path. */
.bundle-footnote-featured {
  max-width: 760px;
  margin-top: 32px;
}
.bundle-footnote-featured .bundle-footnote-inner {
  background: var(--night, var(--ink));
  color: var(--cream);
  padding: 44px 50px 36px;
}
.bundle-footnote-featured .bundle-footnote-inner::before {
  background: linear-gradient(to right, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
  height: 3px;
}
.bundle-footnote-featured .bundle-footnote-name {
  color: var(--cream);
}
.bundle-footnote-featured .bundle-footnote-name em {
  color: var(--gold);
}
.bundle-footnote-featured .bundle-footnote-was {
  color: rgba(255, 255, 255, 0.45);
}
.bundle-footnote-featured .bundle-footnote-now {
  color: var(--gold);
}
.bundle-footnote-featured .bundle-footnote-savings {
  color: rgba(255, 255, 255, 0.7);
}
.bundle-footnote-featured .bundle-footnote-pricing {
  border-top-color: rgba(255, 255, 255, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.bundle-footnote-featured .bundle-footnote-view {
  color: var(--cream);
  border-color: rgba(255, 255, 255, 0.35);
}
.bundle-footnote-featured .bundle-footnote-view:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold);
  color: var(--gold);
}
.bundle-footnote-featured .bundle-footnote-cta {
  background: var(--gold);
  color: var(--ink);
}
.bundle-footnote-featured .bundle-footnote-cta:hover {
  background: var(--cream);
}
.bundle-footnote-featured .bundle-subscribe-toggle button {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--cream);
}
.bundle-footnote-featured .bundle-subscribe-toggle button.active {
  background: rgba(184, 153, 104, 0.18);
  border-color: var(--gold);
}
.bundle-footnote-featured .toggle-name { color: var(--cream); }
.bundle-footnote-featured .toggle-meta { color: rgba(255, 255, 255, 0.55); }

/* Cadence selector dark-mode overrides — when the Daniel's Daily Supplements
   cadence picker appears inside the dark featured box, it needs cream-on-dark
   text and gold accents instead of the default cream-background look. */
.bundle-footnote-featured .bundle-cadence {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.22);
}
.bundle-footnote-featured .cadence-btn {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.2);
}
.bundle-footnote-featured .cadence-btn:hover {
  background: rgba(184, 153, 104, 0.12);
  border-color: rgba(184, 153, 104, 0.5);
}
.bundle-footnote-featured .cadence-btn.active {
  background: rgba(184, 153, 104, 0.18);
  border-color: var(--gold);
}
.bundle-footnote-featured .cadence-name { color: var(--cream); }
.bundle-footnote-featured .cadence-meta { color: rgba(255, 255, 255, 0.55); }
.bundle-footnote-featured .cadence-btn.active .cadence-meta { color: var(--gold); }
.bundle-footnote-featured .cadence-note {
  background: rgba(184, 153, 104, 0.08);
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(184, 153, 104, 0.3);
}
.bundle-footnote-featured .cadence-note strong { color: var(--gold); }

/* Eyebrow + prose-sub for the featured box */
.bundle-footnote-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
}
.bundle-footnote-featured .bundle-footnote-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
  line-height: 1.55;
  max-width: 560px;
  margin: 6px auto 22px;
}
.bundle-footnote-inner {
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  padding: 36px 40px 32px;
  position: relative;
  text-align: center;
}
.bundle-footnote-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent 0%, var(--gold) 25%, var(--gold) 75%, transparent 100%);
}
.bundle-footnote-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 18px;
  color: var(--ink);
}
.bundle-footnote-name em {
  font-style: italic;
  color: var(--sage);
}
.bundle-footnote-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin: -8px 0 18px;
}
.bundle-footnote-pricing {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.bundle-footnote-was {
  font-size: 16px;
  color: var(--ink-soft);
  text-decoration: line-through;
}
.bundle-footnote-now {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.bundle-footnote-savings {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--sage);
  margin-left: 4px;
}
.bundle-footnote .bundle-subscribe-toggle {
  max-width: 460px;
  margin: 0 auto 16px;
}
.bundle-footnote-cta {
  display: inline-block;
  width: 100%;
  max-width: 460px;
  padding: 16px 26px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.3s;
  border: none;
  cursor: pointer;
  text-align: center;
}
.bundle-footnote-cta:hover { background: var(--sage); }
/* Actions row — pairs primary "Add to Cart" CTA with secondary "View Details" link */
.bundle-footnote-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.bundle-footnote-actions .bundle-footnote-cta {
  flex: 2 1 240px;
  max-width: none;
  width: auto;
  margin: 0;
}
.bundle-footnote-view {
  flex: 1 1 140px;
  padding: 16px 18px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bundle-footnote-view:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ═══ BUNDLE TRUST BADGE ═══
   Injected by shared.js below every bundle purchase CTA (curated cards,
   footnotes, Ultimate hero, BYO popup). Reinforces the 30-day return policy
   at the exact moment of decision. Cream-on-ink variant for the dark popup. */
.bundle-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 12px auto 0;
  max-width: 480px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0.78;
  letter-spacing: 0.005em;
}
.bundle-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--gold);
  font-size: 11px;
  flex-shrink: 0;
  font-style: normal;
}
/* Dark-surface variant (BYO popup is ink/cream) */
.byo-popup .bundle-trust {
  color: rgba(250, 246, 240, 0.7);
  margin-top: 14px;
}
.byo-popup .bundle-trust-icon { color: var(--gold); }
/* Ultimate hero variant — hero has its own cream background */
.hero-bundle .bundle-trust {
  margin-top: 14px;
  font-size: 13px;
}
@media (max-width: 720px) {
  .bundle-trust {
    font-size: 11.5px;
    gap: 6px;
    padding: 0 10px;
    line-height: 1.4;
  }
}

@media (max-width: 720px) {
  .bundle-footnote { padding: 0 20px; }
  .bundle-footnote-inner {
    padding: 26px 22px 24px;
  }
  .bundle-footnote-name { font-size: 26px; margin-bottom: 14px; }
  .bundle-footnote-now { font-size: 30px; }
}

/* ═══ PRODUCT DETAIL — BEST FOR PILLS ═══ */
.best-for-section {
  max-width: 1200px;
  margin: 60px auto 0;
  padding: 0 40px;
}
.best-for-eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 14px;
  text-align: center;
}
.best-for-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.best-for-pill {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 9px 18px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: border-color 0.3s, color 0.3s, transform 0.3s;
}
.best-for-pill:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* ═══ PRODUCT DETAIL — DANIEL'S NOTES ═══ */
.daniels-note {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 40px;
}
.daniels-note-inner {
  background: var(--ink);
  color: var(--cream);
  padding: 50px 56px;
  position: relative;
  border: 1px solid var(--gold);
}
.daniels-note-mark {
  position: absolute;
  top: 16px;
  left: 32px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 92px;
  color: var(--gold);
  line-height: 1;
  opacity: 0.4;
}
.daniels-note-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.daniels-note-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.5;
  color: var(--cream);
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}
.daniels-note-attr {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.daniels-note-attr::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.daniels-note-attr strong {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--cream);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

@media (max-width: 720px) {
  .daniels-note { padding: 0 20px; }
  .daniels-note-inner { padding: 36px 28px; }
  .daniels-note-mark { font-size: 60px; left: 18px; top: 8px; }
}

/* ═══ PRODUCT DETAIL — RESULTS TIMELINE ═══ */
.timeline-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.timeline-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
}
.timeline-item {
  padding: 36px 28px;
  border-right: 1px solid var(--rule);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.timeline-item:last-child { border-right: none; }
.timeline-week {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.timeline-marker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.timeline-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
@media (max-width: 720px) {
  .timeline-section { padding: 0 20px; }
  .timeline-item { padding: 26px 22px; border-right: none; border-bottom: 1px solid var(--rule); }
  .timeline-item:last-child { border-bottom: none; }
}

/* ═══ PRODUCT DETAIL — PRO TIP CALLOUT ═══ */
.pro-tip-section {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 40px;
}
.pro-tip {
  display: flex;
  gap: 22px;
  padding: 28px 32px;
  background: var(--cream);
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  align-items: center;
}
.pro-tip-icon {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 44px;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}
.pro-tip-body {
  flex: 1;
}
.pro-tip-eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 6px;
}
.pro-tip-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 600px) {
  .pro-tip { flex-direction: column; align-items: flex-start; padding: 22px; gap: 12px; }
  .pro-tip-text { font-size: 16px; }
}

/* ═══ PRODUCT DETAIL — FREE FROM BADGES ═══ */
.free-from-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.free-from-eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 18px;
}
.free-from-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  align-items: center;
}
.free-from-badge {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 9px 18px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 0.3s, color 0.3s;
}
.free-from-badge::before {
  content: '✓';
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
}
.free-from-badge:hover {
  border-color: var(--gold);
  color: var(--ink);
}

/* ═══ MOBILE LAYOUT — STACK & CENTER (skincare, supplements, bundles) ═══ */
/* Every section centered, every grid collapsed, every padding even left/right */
@media (max-width: 760px) {

  /* ── 1. PAGE HEADERS (top section of each page) ── */
  .page-header {
    padding: 50px 20px 36px !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  .page-header-eyebrow {
    font-size: 10.5px !important;
    letter-spacing: 0.2em !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
  }
  .page-header h1 {
    font-size: clamp(34px, 9vw, 50px) !important;
    line-height: 1.05 !important;
    margin: 0 auto 18px !important;
  }
  .page-header p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* ── 2. CREDIBILITY STRIP — 1 col on mobile, each stat full-width centered ── */
  .credibility,
  .cred-strip-inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 30px 20px 40px !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cred-item,
  .credibility > div,
  .cred-strip-inner > div {
    text-align: center !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 18px 8px !important;
    border-bottom: 1px solid var(--rule) !important;
    box-sizing: border-box !important;
  }
  .cred-item:last-child,
  .credibility > div:last-child,
  .cred-strip-inner > div:last-child {
    border-bottom: none !important;
  }
  .cred-num {
    font-size: 50px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
  }
  .cred-label {
    font-size: 10.5px !important;
    letter-spacing: 0.16em !important;
    word-break: normal;
    white-space: normal !important;
    line-height: 1.4 !important;
  }
  /* cred-strip on home page (different structure) */
  .cred-item .cred-dot {
    display: inline-block;
    margin-right: 8px;
  }

  /* ── 3. SECTION HEADERS (sec-header, ritual-header, builder-header) ── */
  .sec-header,
  .ritual-header,
  .builder-header,
  .research-header {
    padding: 50px 20px 0 !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  .sec-header h2,
  .ritual-header h2,
  .builder-header h2 {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.1 !important;
    margin: 12px auto !important;
  }
  .sec-blurb,
  .ritual-blurb {
    font-size: 15px !important;
    max-width: 100% !important;
    margin: 14px auto 0 !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* ── 4. AM/PM RITUAL SPLIT on skincare ── */
  .split {
    grid-template-columns: 1fr !important;
    margin: 28px 0 0 !important;
    max-width: 100% !important;
  }
  .ritual {
    padding: 28px 20px !important;
    border-left: none !important;
    border-bottom: 1px solid var(--rule);
    text-align: center !important;
  }
  .ritual:last-child { border-bottom: none; }
  .ritual-icon { margin: 0 auto 14px !important; }
  .ritual-sub { text-align: center !important; }

  /* ── 5. PRODUCT ROWS (supplements list + skincare list) ── */
  .row {
    grid-template-columns: 76px 1fr !important;
    gap: 14px !important;
    padding: 18px 16px !important;
    align-items: center;
  }
  .row-img { width: 76px !important; height: 76px !important; }
  .row-shop {
    grid-column: 1 / -1 !important;
    padding: 12px 0 0 !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }
  .stack-list,
  .row-list {
    max-width: 100% !important;
    margin: 30px auto 0 !important;
    padding: 0 16px !important;
  }

  /* ── 6. BUNDLE-FOOTNOTE SECTIONS (AM, PM, Glow on skincare; Daniels-Daily etc. on supplements) ── */
  .bundle-footnote {
    padding: 40px 20px !important;
    text-align: center !important;
  }
  .bundle-footnote-inner {
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .bundle-footnote-name {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.15 !important;
    margin: 0 auto 12px !important;
  }
  .bundle-footnote-pricing {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 8px 12px;
  }
  .bundle-footnote-cta {
    width: 100% !important;
    max-width: 320px;
    margin: 18px auto 0 !important;
  }
  .bundle-subscribe-toggle {
    margin: 14px auto 0 !important;
    justify-content: center !important;
  }

  /* ── 7. BUNDLES — HERO ULTIMATE ── */
  .hero-section {
    padding: 0 16px !important;
    margin-top: 60px !important;
    max-width: 100% !important;
  }
  .hero-bundle {
    grid-template-columns: 1fr !important;
  }
  .hero-bundle-content,
  .hero-bundle-visual {
    padding: 32px 22px !important;
    text-align: center !important;
  }
  .hero-product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 280px !important;
    margin: 22px auto 0 !important;
    gap: 6px !important;
  }
  .hero-bundle-title {
    font-size: clamp(34px, 9vw, 50px) !important;
    text-align: center !important;
  }

  /* ── 8. BUNDLES — CURATED CARDS ── */
  .bundle-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    gap: 24px !important;
    margin: 40px auto 0 !important;
    max-width: 100% !important;
  }
  .bundle-card {
    max-width: 480px;
    margin: 0 auto;
  }
  .bundle-body {
    padding: 26px 20px !important;
    text-align: center !important;
  }
  .bundle-product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 240px !important;
    margin: 18px auto !important;
    gap: 6px !important;
  }
  .bundle-product-grid.cols-5,
  .bundle-product-grid.cols-7,
  .bundle-product-grid.cols-8 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── 9. BUILDER (BYO) SECTION ── */
  .builder-section,
  .builder-section-inner {
    padding: 50px 16px !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  .builder-tracker {
    flex-direction: column;
    gap: 14px;
    text-align: center !important;
    padding: 20px !important;
  }
  .builder-tabs {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .builder-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin-top: 24px !important;
  }
  .builder-cta {
    width: 100% !important;
    max-width: 320px;
    margin: 16px auto 0 !important;
  }

  /* ── 10. RESEARCH / WEEKLY SECTIONS ── */
  .research,
  .research-inner,
  .weekly-section,
  .alt-banner {
    padding: 50px 20px !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  .weekly-card { text-align: center !important; }

  /* ── 11. GENERAL SAFETY ── */
  section, .section {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Anything that was max-width: 1080/1200/1320 gets reset to fit viewport */
  [class*="-inner"], [style*="max-width: 10"], [style*="max-width: 11"], [style*="max-width: 12"] {
    max-width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   PRE-LAUNCH COMING SOON BANNER
   Translucent red, sticky at top, sits above the shipping bar.
   Injected on every page via shared.js.
   ═══════════════════════════════════════════════════════════ */
.coming-soon-banner {
  position: relative;
  z-index: 1090;
  background: rgba(178, 34, 34, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFCF7;
  padding: 16px 24px 18px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 24px rgba(140, 20, 20, 0.28);
  overflow: hidden;
}
/* Subtle diagonal stripe texture for that "construction zone" feel */
.coming-soon-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 28px,
      rgba(255, 255, 255, 0.045) 28px,
      rgba(255, 255, 255, 0.045) 56px
    );
  pointer-events: none;
}
.coming-soon-banner > * { position: relative; z-index: 1; }

.coming-soon-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 4.5vw, 38px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}
.coming-soon-headline em {
  font-style: italic;
  color: #FFE9CC;
}
.coming-soon-tagline {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 8px;
  color: rgba(255, 252, 247, 0.92);
}
.coming-soon-tagline .dot {
  color: #FFE9CC;
  margin: 0 6px;
}

/* Note: previously had .coming-soon-active rules that bumped .shipping-bar top
   and added margin-top to nav. With headers now non-sticky (position: relative)
   those rules created phantom whitespace and have been removed. The Coming Soon
   banner sits naturally in the document flow above the shipping bar. */

@media (max-width: 600px) {
  .coming-soon-banner {
    padding: 12px 16px 14px;
  }
  .coming-soon-headline { font-size: clamp(22px, 6vw, 30px); }
  .coming-soon-tagline {
    font-size: 9px;
    letter-spacing: 0.22em;
    margin-top: 6px;
  }
}
   Mirrors .page-filter styling, positioned just to the LEFT
   of the search button. Click → dark overlay + centered modal
   with a complete payment layout.
   ═══════════════════════════════════════════════════════════ */
.cart-floating {
  position: fixed !important;
  top: 74px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  z-index: 1100;
}
.cart-floating-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(31, 27, 23, 0.22);
  transition: transform 0.2s ease, background 0.2s ease;
  font-family: 'Poppins', sans-serif;
  z-index: 110;
}
.cart-floating-toggle:hover {
  background: var(--ink-soft);
  transform: scale(1.06);
}
.cart-floating-toggle-icon { line-height: 1; }
.cart-floating-toggle-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--gold);
  color: var(--cream);
  font-size: 10px;
  font-weight: 600;
  min-width: 19px;
  height: 19px;
  border-radius: 100px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--ink);
}
.cart-floating.has-items .cart-floating-toggle-badge { display: inline-flex; }
.cart-floating.expanded { z-index: 1200; }
.cart-floating.expanded .cart-floating-toggle { z-index: 1200; }
.cart-floating.expanded .cart-floating-toggle-icon::before { content: '✕'; }
.cart-floating.expanded .cart-floating-toggle-icon span { display: none; }
.cart-floating.expanded .cart-floating-toggle-icon { font-size: 18px; }

/* Backdrop — same dim as search */
.cart-floating-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 23, 0.55);
  z-index: 1150;
}
.cart-floating.expanded .cart-floating-overlay {
  display: block;
  animation: cf-fade-in 0.25s ease;
}
@keyframes cf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Centered payment modal */
.cart-floating-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 620px;
  max-width: calc(100vw - 24px);
  max-height: 88vh;
  background: var(--cream);
  border: 1px solid var(--gold);
  box-shadow: 0 24px 80px rgba(31, 27, 23, 0.35);
  z-index: 1180;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cart-floating.expanded .cart-floating-panel {
  display: block;
  animation: cf-zoom-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(-50%, -50%);
}
@keyframes cf-zoom-in {
  from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);     opacity: 1; }
}

/* ── PANEL CONTENT ── */
.cf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--cream);
  z-index: 5;
}
.cf-head-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
}
.cf-head-title em { color: var(--gold); font-style: italic; }
.cf-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}
.cf-close:hover { border-color: var(--ink); color: var(--ink); }

.cf-body { padding: 20px 24px 30px; }

/* Section headers inside the modal */
.cf-section { margin-bottom: 28px; }
.cf-section:last-child { margin-bottom: 0; }
.cf-section-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cf-section-label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--gold);
}
.cf-section-label .step-num {
  background: var(--ink);
  color: var(--gold);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 500;
}

/* Empty cart state */
.cf-empty {
  text-align: center;
  padding: 60px 20px;
}
.cf-empty-icon {
  font-size: 32px;
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  margin-bottom: 14px;
}
.cf-empty-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.cf-empty a {
  display: inline-block;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: all 0.18s ease;
}
.cf-empty a:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

/* Cart items inside modal */
.cf-items { margin-bottom: 10px; }
.cf-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.cf-item:last-child { border-bottom: none; }
.cf-item-img {
  width: 56px; height: 56px;
  background: var(--cream-warm);
  overflow: hidden;
}
.cf-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cf-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 3px;
}
.cf-item-name em { font-style: italic; color: var(--sage); }
.cf-item-meta {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.cf-item-meta.discount {
  color: var(--gold);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
}
.cf-item-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.cf-item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  font-size: 11px;
  background: #fff;
}
.cf-item-qty button {
  width: 24px; height: 22px;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}
.cf-item-qty span {
  min-width: 22px;
  text-align: center;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding: 3px 0;
  font-size: 11px;
}
.cf-item-remove {
  background: none;
  border: none;
  font-size: 10px;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.cf-item-remove:hover { color: var(--rose); }
.cf-item-price {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}

/* Discount code row */
.cf-discount-row {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.cf-discount-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink);
  outline: none;
}
.cf-discount-input:focus { border-color: var(--gold); }
.cf-discount-input::placeholder { color: var(--ink-soft); opacity: 0.55; }
.cf-discount-btn {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
}
.cf-discount-btn:hover { background: var(--ink); color: var(--cream); }

/* Totals breakdown */
.cf-totals {
  background: var(--cream-warm);
  padding: 18px 20px;
  margin-top: 14px;
  border: 1px solid var(--rule);
}
.cf-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 5px 0;
  color: var(--ink-soft);
}
.cf-totals-row.total {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.cf-totals-row.total .cf-totals-value { color: var(--gold); }
.cf-totals-row.savings .cf-totals-value { color: var(--sage); font-weight: 600; }
.cf-totals-row.savings { color: var(--ink); }
.cf-totals-row.after-discount {
  border-top: 1px dashed var(--rule);
  padding-top: 9px;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 500;
}
.cf-totals-row.after-discount .cf-totals-value { color: var(--ink); font-weight: 600; }
.cf-totals-sub-meta { color: var(--ink-soft); font-size: 11.5px; font-weight: 400; opacity: 0.75; }
/* "Applied automatically" pill on the savings line — reinforces no-code-needed UX */
.cf-totals-auto {
  display: inline-block;
  background: var(--sage);
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 2px;
  margin-left: 6px;
  vertical-align: 1px;
  line-height: 1.3;
}

/* ═══ SMART REFILL CHECKOUT EXPLAINER ═══
   Inserted into the cart whenever at least one cadence='smart' line item is present.
   Explains: today's full shipment vs. subsequent-month refill cadence, the $30
   minimum-shipment rule, plus a 6-month preview grid showing which months ship
   how many items at what cost. */
.cf-smart-explainer {
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: 18px 20px 16px;
  margin-top: 14px;
}
.cf-sr-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.cf-sr-icon {
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.cf-sr-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 3px;
}
.cf-sr-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.cf-sr-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  counter-reset: sr-step;
}
.cf-sr-steps li {
  counter-increment: sr-step;
  position: relative;
  padding: 6px 0 6px 28px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cf-sr-steps li strong {
  color: var(--ink);
  font-weight: 600;
}
.cf-sr-steps li::before {
  content: counter(sr-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 700;
}
.cf-sr-schedule-label {
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 10px 0 8px;
}
.cf-sr-schedule {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.cf-sr-month {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 8px 4px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  position: relative;
}
.cf-sr-month.today {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.cf-sr-month.empty {
  opacity: 0.55;
  background: transparent;
}
.cf-sr-month-label {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.cf-sr-month.today .cf-sr-month-label { color: var(--gold); }
.cf-sr-month-count {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.cf-sr-month.today .cf-sr-month-count { color: var(--cream); }
.cf-sr-month-unit {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 9px;
  margin-left: 2px;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.cf-sr-month-note {
  font-size: 9.5px;
  color: var(--ink-soft);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.cf-sr-month.today .cf-sr-month-note { color: var(--cream); opacity: 0.75; }

/* Cadence-specific item meta — keep "Smart Refill" visually distinct */
.cf-item-meta.cf-cadence-smart {
  color: var(--gold) !important;
  font-weight: 600;
}

/* Express payment buttons */
.cf-express {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.cf-express button {
  height: 44px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s ease;
}
.cf-express button.gpay {
  background: #fff;
  color: var(--ink);
  border-color: var(--rule);
}
.cf-express button.gpay strong { color: #4285F4; }
.cf-express button.gpay strong:nth-child(2) { color: #EA4335; }
.cf-express button.gpay strong:nth-child(3) { color: #FBBC04; }
.cf-express button.gpay strong:nth-child(4) { color: #34A853; }
.cf-express button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31, 27, 23, 0.18); }

.cf-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cf-divider::before,
.cf-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Form fields */
.cf-field {
  margin-bottom: 12px;
}
.cf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.cf-field-row.triple { grid-template-columns: 2fr 1fr 1fr; }
.cf-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
.cf-input,
.cf-select {
  width: 100%;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--rule);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.18s ease;
  border-radius: 0;
  appearance: none;
}
.cf-input:focus,
.cf-select:focus { border-color: var(--gold); }
.cf-input::placeholder { color: var(--ink-soft); opacity: 0.5; }
.cf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234A433B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 32px;
}

/* Card preview / card icons */
.cf-card-icons {
  display: inline-flex;
  gap: 5px;
  margin-left: 8px;
  vertical-align: middle;
}
.cf-card-icon {
  width: 26px; height: 17px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-weight: 600;
}

/* Shipping method tiles */
.cf-shipping-options {
  display: grid;
  gap: 8px;
}
.cf-ship-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
}
.cf-ship-option:hover { border-color: var(--ink-soft); }
.cf-ship-option.selected {
  border-color: var(--gold);
  background: rgba(184, 153, 104, 0.05);
}
.cf-ship-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: #fff;
  position: relative;
  flex-shrink: 0;
}
.cf-ship-option.selected .cf-ship-radio {
  border-color: var(--gold);
}
.cf-ship-option.selected .cf-ship-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--gold);
}
.cf-ship-name {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
}
.cf-ship-name strong {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.cf-ship-name span {
  font-size: 11px;
  color: var(--ink-soft);
}
.cf-ship-price {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  color: var(--gold);
}

/* Place order button */
.cf-place-order {
  width: 100%;
  padding: 18px;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.18s ease;
}
.cf-place-order:hover {
  background: var(--gold);
  color: var(--cream);
  border-color: var(--gold);
}
.cf-place-order:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cf-trust-line {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 14px;
}
.cf-trust-line span { color: var(--gold); }

/* Cart Trust Strip - 4 icons below place order */
.cf-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
  padding: 16px 8px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cf-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.35;
}
.cf-trust-icon {
  width: 22px;
  height: 22px;
  color: var(--gold);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .cf-trust-strip { gap: 4px; padding: 14px 4px; }
  .cf-trust-item { font-size: 9px; gap: 5px; }
  .cf-trust-icon { width: 20px; height: 20px; }
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .page-filter {
    top: 12px !important;
    right: 12px !important;
  }
  .cart-floating {
    /* Mobile: search top (12px) + search height (44px) + 8px gap = 64px */
    top: 64px !important;
    right: 12px !important;
  }
  .cart-floating-toggle { width: 44px; height: 44px; font-size: 17px; }
  .cart-floating-panel {
    max-height: 92vh;
    width: calc(100vw - 16px);
  }
  .cf-head { padding: 18px 18px 14px; }
  .cf-head-title { font-size: 22px; }
  .cf-body { padding: 16px 18px 24px; }
  .cf-field-row { grid-template-columns: 1fr; }
  .cf-field-row.triple { grid-template-columns: 1fr 1fr; }
  .cf-express { grid-template-columns: 1fr; }
  .cf-item { grid-template-columns: 50px 1fr auto; gap: 10px; }
  .cf-item-img { width: 50px; height: 50px; }
}
/* ═══ SITE-WIDE "VIEW DETAILS" DROPDOWN PANEL ═══
   Base styles for the expandable details panel injected by shared.js below any
   .row element when its .row-view-link is clicked. Skincare.html provides
   additional ritual.am / ritual.pm color overrides inline (which take
   precedence). These base styles are what supplements.html and any other page
   with the same .row + .row-view-link structure see. */
.row-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.row-details.open {
  max-height: 1600px;
  border-color: var(--rule);
  background: rgba(184, 153, 104, 0.04);
}
.row-details-inner {
  padding: 28px 24px 36px 114px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 44px;
}
.rd-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rd-label::before { content: ''; width: 16px; height: 1px; background: var(--gold); }
.rd-block { margin-bottom: 24px; }
.rd-block:last-child { margin-bottom: 0; }
.rd-ingredient { padding: 10px 0; border-bottom: 1px solid rgba(212, 201, 182, 0.5); }
.rd-ingredient:last-child { border-bottom: none; }
.rd-ing-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  margin-bottom: 3px;
  color: var(--ink);
}
.rd-ing-name em { color: var(--sage); font-style: italic; }
.rd-ing-role {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
  font-weight: 500;
}
.rd-ing-desc { font-size: 12px; line-height: 1.55; opacity: 0.72; }
.rd-howto {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.85;
}
.rd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-tag {
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--cream);
}
.rd-protip { border-left: 2px solid var(--gold); padding: 4px 0 4px 14px; margin-top: 6px; }
.rd-protip-label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 500;
}
.rd-protip-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.88;
}
.rd-freefrom { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rd-ff-badge {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 9px;
  opacity: 0.55;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-weight: 500;
}
.rd-full-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  font-weight: 500;
  transition: color 0.3s, border-color 0.3s;
}
.rd-full-link:hover { color: var(--sage); border-color: var(--sage); }

/* Stronger CTA banner that lives at the bottom of the inline dropdown,
   telling users the full product page has the deeper content — studies,
   timeline, FAQs, Daniel's notes. Makes the navigation obvious. */
.rd-full-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 24px 8px 114px;
  padding: 18px 22px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background 0.3s, transform 0.2s ease, border-color 0.3s;
}
.rd-full-cta:hover {
  background: var(--sage);
  border-color: var(--sage);
  transform: translateY(-1px);
}
.rd-full-cta-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 4px;
}
.rd-full-cta-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cream);
  opacity: 0.92;
}
.rd-full-cta-arrow {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.rd-full-cta:hover .rd-full-cta-arrow { transform: translateX(4px); }

/* In the dark PM ritual context, the CTA's background already matches — keep
   the gold accent prominent so it still stands out against the dark backdrop. */
.ritual.pm .rd-full-cta {
  border-color: var(--gold);
  background: rgba(31, 27, 23, 0.85);
}
.ritual.pm .rd-full-cta:hover {
  background: var(--gold);
}
.ritual.pm .rd-full-cta:hover .rd-full-cta-label { color: var(--ink); }
.ritual.pm .rd-full-cta:hover .rd-full-cta-sub   { color: var(--ink); }
.ritual.pm .rd-full-cta:hover .rd-full-cta-arrow { color: var(--ink); }

.row-view-link.expanded { color: var(--sage); }

@media (max-width: 720px) {
  .rd-full-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 14px 6px;
    padding: 16px 18px;
  }
  .rd-full-cta-arrow { align-self: flex-end; }
}

@media (max-width: 720px) {
  .row-details-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 14px 30px;
  }
  .rd-ing-name { font-size: 15px; }
  .rd-ing-desc { font-size: 11.5px; }
  .rd-howto { font-size: 13.5px; }
  .rd-protip-text { font-size: 13px; }
}

/* ═══ BUNDLE CARD CTA REPOSITIONING ═══
   On bundles.html, move the "Add Bundle to Cart" button up to sit immediately
   below the description (instead of after Included / Savings / Subscribe).
   Uses CSS flex order, so source order stays accessible for screen readers. */
.bundle-card .bundle-body { display: flex; flex-direction: column; }
.bundle-card .bundle-body > .bundle-eyebrow         { order: 1; }
.bundle-card .bundle-body > .bundle-title           { order: 2; }
.bundle-card .bundle-body > .bundle-sub             { order: 3; }
.bundle-card .bundle-body > .bundle-desc            { order: 4; }
.bundle-card .bundle-body > .bundle-view-link       { order: 5; margin-top: 14px; }
.bundle-card .bundle-body > .bundle-details         { order: 6; }
.bundle-card .bundle-body > .bundle-included        { order: 7; margin-top: 24px; }
.bundle-card .bundle-body > .bundle-savings         { order: 8; margin-top: 16px; }
.bundle-card .bundle-body > .bundle-subscribe-toggle{ order: 9; margin-top: 16px; }
.bundle-card .bundle-body > .bundle-cta             { order: 10; margin-top: 14px; }

/* ═══ BUNDLE DETAILS — VIEW DETAILS DROPDOWN ON BUNDLE CARDS ═══════════════
   Aesthetic: cream-warm panel with gold rule above, inline below description.
   Holds a bundle-level intro paragraph + tag pills + clickable product grid. */
.bundle-view-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  text-align: left;
  align-self: flex-start;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color 0.3s, border-color 0.3s;
}
.bundle-view-link:hover {
  color: var(--sage);
  border-color: var(--sage);
}
.bundle-view-link.expanded { color: var(--sage); border-color: var(--sage); }
.bundle-view-link .bvl-arrow {
  font-size: 12px;
  letter-spacing: 0;
  transition: transform 0.3s ease;
}

.bundle-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.3s ease, border-color 0.3s ease;
  border-top: 1px solid transparent;
  margin-top: 0;
}
.bundle-details.open {
  max-height: 2400px;
  margin-top: 20px;
  border-top: 1px solid var(--rule);
}
.bd-inner {
  padding: 20px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bd-block { display: flex; flex-direction: column; }
.bd-label {
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bd-label::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--gold);
}
.bd-intro {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.bd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bd-tag {
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--cream-warm);
}
.bd-tag:last-child {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184, 153, 104, 0.06);
}

/* Inside-this-bundle product grid */
.bd-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.bd-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.3s, background 0.3s, transform 0.2s ease;
}
.bd-product:hover {
  border-color: var(--gold);
  background: var(--cream);
  transform: translateY(-1px);
}
.bd-product-img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background: var(--cream);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.bd-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bd-product-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bd-product-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-product-meta {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bd-product-price {
  color: var(--gold);
  font-weight: 500;
}
.bd-full-link {
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  font-weight: 500;
  transition: color 0.3s, border-color 0.3s;
}
.bd-full-link:hover { color: var(--sage); border-color: var(--sage); }

/* Credibility row variants */
.credibility.credibility-single {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  padding: 32px 20px 40px;
  max-width: 1200px;
}
.credibility.credibility-single .cred-item {
  text-align: center;
  padding: 0;
  border: none;
}
.credibility.credibility-quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  text-align: center;
  margin: 0 auto;
  padding: 36px 20px 44px;
  max-width: 1200px;
  gap: 20px;
}
.credibility.credibility-quad .cred-item {
  text-align: center;
  padding: 8px 4px;
  border: none;
  border-right: 1px solid var(--rule);
}
.credibility.credibility-quad .cred-item:last-child { border-right: none; }
@media (max-width: 720px) {
  .credibility.credibility-quad {
    grid-template-columns: repeat(2, 1fr);
    padding: 24px 16px 28px;
    gap: 16px;
  }
  .credibility.credibility-quad .cred-item { border-right: none; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
  .credibility.credibility-quad .cred-item:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}

/* ── Rich bundle-detail sections (routines / mechanism / audience) ───────── */

/* Routine step list (AM/PM/Supplements) */
.bd-routine {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bd-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.bd-step:last-child { border-bottom: none; padding-bottom: 4px; }
.bd-step-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.bd-step-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.1;
}
.bd-step-note {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Why-this-stack-works mechanism rows */
.bd-why-lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.bd-mechanisms {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bd-mech {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 24px 1.2fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--cream-warm);
  border-left: 2px solid var(--gold);
}
.bd-mech-problem {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.bd-mech-arrow {
  font-size: 14px;
  color: var(--gold);
  text-align: center;
  line-height: 1;
}
.bd-mech-solution {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.45;
}

/* Audience yes/no cards */
.bd-audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bd-audience-card {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  background: var(--cream-warm);
}
.bd-audience-card.yes  { border-left: 3px solid var(--sage); }
.bd-audience-card.no   { border-left: 3px solid var(--gold); opacity: 0.85; }
.bd-audience-tag {
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.bd-audience-card.yes .bd-audience-tag { color: var(--sage); }
.bd-audience-card.no  .bd-audience-tag { color: var(--gold); }
.bd-audience-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

@media (max-width: 600px) {
  .bd-products { grid-template-columns: 1fr; }
  .bd-intro { font-size: 14px; }
  .bd-product-img { width: 44px; height: 44px; flex-basis: 44px; }
  .bd-product-name { font-size: 13.5px; }
  .bd-step { grid-template-columns: 32px 1fr; gap: 12px; }
  .bd-step-num  { font-size: 19px; }
  .bd-step-name { font-size: 17px; }
  .bd-step-note { font-size: 13px; }
  .bd-mech { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
  .bd-mech-arrow { display: none; }
  .bd-mech-solution { font-size: 13.5px; }
  .bd-audience { grid-template-columns: 1fr; }
  .bd-why-lead { font-size: 14px; }
}

/* ═══ OUR GUARANTEE STRIP — Returns/Refund policy summary ═══
   Appears near the bottom of bundles.html, skincare.html, supplements.html.
   Provides the 30-day, opened-OK, free-return-shipping promise in 4 cards. */
.guarantee-strip {
  background: var(--cream);
  padding: 90px 40px;
  border-top: 1px solid var(--rule);
}
.guarantee-strip-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.guarantee-strip-header { margin-bottom: 56px; }
.guarantee-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  font-weight: 500;
}
.guarantee-strip h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.5vw, 48px);
  font-weight: 400;
  margin: 0 0 18px;
  line-height: 1.1;
  color: var(--ink);
}
.guarantee-strip h2 em { font-style: italic; color: var(--sage); }
.guarantee-strip-header p {
  max-width: 620px;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 44px;
}
.guarantee-card {
  padding: 28px 18px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}
.guarantee-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.guarantee-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border: 1px solid var(--gold);
  border-radius: 100px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  background: var(--cream);
  line-height: 1;
}
.guarantee-title {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 10px;
}
.guarantee-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.guarantee-link {
  display: inline-block;
  padding: 14px 30px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  transition: background 0.3s, color 0.3s;
}
.guarantee-link:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 900px) {
  .guarantee-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .guarantee-strip { padding: 70px 20px; }
}
@media (max-width: 480px) {
  .guarantee-grid { grid-template-columns: 1fr; gap: 14px; }
  .guarantee-card { padding: 22px 18px; }
  .guarantee-strip-header { margin-bottom: 36px; }
}

/* ═══ INGREDIENTS GLOSSARY CTA STRIP ═══
   Appears at the bottom of skincare.html and supplements.html, just below the
   Guarantee strip. Drives traffic to the ingredient glossary. Cream-warm
   background so it visually separates from the white-cream Guarantee strip. */
.ingredients-cta-strip {
  background: var(--cream-warm);
  padding: 80px 40px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ingredients-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.ingredients-cta-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 16px;
}
.ingredients-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 18px;
}
.ingredients-cta-title em { font-style: italic; color: var(--sage); }
.ingredients-cta-blurb {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 auto 28px;
  max-width: 580px;
}
.ingredients-cta-link {
  display: inline-block;
  padding: 16px 32px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.3s;
}
.ingredients-cta-link:hover { background: var(--sage); }
@media (max-width: 640px) {
  .ingredients-cta-strip { padding: 60px 22px; }
  .ingredients-cta-title { font-size: 30px; }
  .ingredients-cta-blurb { font-size: 15.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FLOATING MENU BUTTON (top-left) + SLIDE-OUT NAV PANEL
   Mirrors the page-filter / cart-floating pattern but positioned top-left
   and opens a full directory of every page on the site.
   ═══════════════════════════════════════════════════════════════════ */

.dh-menu {
  position: fixed !important;
  top: 14px !important;
  left: 16px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1100;
}

/* ── COLLAPSED: small circular toggle button (matches search button visual) ── */
.dh-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  transition: background 0.2s, transform 0.2s;
}
.dh-menu-toggle:hover {
  background: var(--ink-soft);
  transform: scale(1.06);
}
.dh-menu-toggle-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.dh-menu-toggle-icon span {
  display: block;
  height: 2px;
  background: var(--cream);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}
.dh-menu.is-open .dh-menu-toggle-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.dh-menu.is-open .dh-menu-toggle-icon span:nth-child(2) {
  opacity: 0;
}
.dh-menu.is-open .dh-menu-toggle-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── OVERLAY (cream-tinted backdrop) ── */
.dh-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 23, 0.42);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.dh-menu.is-open .dh-menu-overlay {
  opacity: 1;
  pointer-events: all;
}

/* ── SLIDE-OUT PANEL (from left) ── */
.dh-menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: var(--cream);
  z-index: 1100;
  transform: translateX(-100%);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 6px 0 32px rgba(0,0,0,0.10);
}
.dh-menu.is-open .dh-menu-panel {
  transform: translateX(0);
}

.dh-menu-head {
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dh-menu-head-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.dh-menu-head-title em {
  font-style: italic;
  color: var(--sage);
}
.dh-menu-close {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.dh-menu-close:hover {
  background: var(--cream-warm);
  color: var(--ink);
}

.dh-menu-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 28px 32px;
}

.dh-menu-section {
  margin-top: 22px;
}
.dh-menu-section:first-child {
  margin-top: 6px;
}
.dh-menu-section-eyebrow {
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
  padding-left: 2px;
}
.dh-menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dh-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, padding-left 0.2s;
  border: 1px solid transparent;
}
.dh-menu-link:hover {
  background: var(--cream-warm);
  color: var(--ink);
  padding-left: 22px;
  border-color: var(--rule);
}
.dh-menu-link.is-current {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.dh-menu-link.is-current:hover {
  background: var(--ink-soft);
  color: var(--cream);
  padding-left: 22px;
}
.dh-menu-link-arrow {
  font-size: 13px;
  opacity: 0.4;
  transition: opacity 0.15s, transform 0.2s;
}
.dh-menu-link:hover .dh-menu-link-arrow {
  opacity: 0.8;
  transform: translateX(3px);
}
.dh-menu-link.is-current .dh-menu-link-arrow {
  opacity: 0.8;
}

/* Footer micro-line inside panel — quick brand stamp */
.dh-menu-foot {
  border-top: 1px solid var(--rule);
  padding: 16px 28px 20px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  text-align: center;
}
.dh-menu-foot em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--sage);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .dh-menu { top: 14px !important; left: 12px !important; }
  .dh-menu-toggle { width: 44px; height: 44px; }
  .dh-menu-toggle-icon { width: 17px; }
  .dh-menu-panel { width: 100vw; }
  .dh-menu-head { padding: 20px 22px 16px; }
  .dh-menu-head-title { font-size: 22px; }
  .dh-menu-body { padding: 12px 22px 26px; }
  .dh-menu-link { padding: 13px 14px; font-size: 13.5px; }
}

/* Prevent body scroll while menu is open */
body.dh-menu-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   SORT CONTROL (used across search results, bundles, concerns, glossary)
   ═══════════════════════════════════════════════════════════════════ */

.dh-sort-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.dh-sort-bar-spacer { flex: 1; }
.dh-sort-bar-count {
  flex: 1;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.dh-sort-bar-count strong {
  color: var(--ink);
  font-weight: 600;
}

.dh-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
}
.dh-sort-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}
.dh-sort-select-wrap {
  position: relative;
  display: inline-block;
}
.dh-sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--cream);
  border: 1px solid var(--ink-soft);
  padding: 9px 38px 9px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.2s, background 0.2s;
  min-width: 200px;
}
.dh-sort-select:hover { border-color: var(--gold); }
.dh-sort-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,153,104,0.18); }
.dh-sort-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 10px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .dh-sort-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .dh-sort { width: 100%; justify-content: space-between; }
  .dh-sort-select { flex: 1; min-width: 0; }
  .dh-sort-bar-count { text-align: left; }
}

/* ═════════════════════════════════════════════════════════════
   BUNDLE DIRECTIONS — "Routine Directions / How to Use" tab
   Collapsible block inside expanded bundle cards. Two visual groups
   (Skincare, Supplements) each with numbered steps (AM, PM, Weekly,
   Morning, Workout, Dinner, Evening).
   ═════════════════════════════════════════════════════════════ */
.bundle-directions {
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  margin: 18px 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* The clickable header tab — full width, behaves like a button */
.bundle-directions-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.25s ease;
}
.bundle-directions-toggle:hover { background: rgba(184, 153, 104, 0.08); }
.bundle-directions-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.bundle-directions-chevron {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 13px;
  transition: transform 0.35s ease;
  flex-shrink: 0;
}

/* Collapsed: hide content, chevron points down */
.bundle-directions.is-collapsed .bundle-directions-content { display: none; }
/* Expanded: show content, chevron rotates 180° */
.bundle-directions:not(.is-collapsed) .bundle-directions-chevron { transform: rotate(180deg); }
.bundle-directions:not(.is-collapsed) .bundle-directions-toggle {
  border-bottom: 1px solid rgba(184, 153, 104, 0.25);
}

/* Content area — padding only when expanded */
.bundle-directions-content {
  padding: 20px 24px 22px;
}

/* Section header (Skincare / Supplements) — major group divider */
.directions-section { margin-bottom: 22px; }
.directions-section:last-child { margin-bottom: 0; }
.directions-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(184, 153, 104, 0.35);
}
.directions-section-icon {
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
}
.directions-section-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  font-weight: 500;
  flex: 1;
}
.directions-section-count {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

/* Step layout — number + label/body */
.bundle-direction-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: baseline;
}
.bundle-direction-step:last-child { margin-bottom: 0; }
.bundle-direction-step .step-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--gold);
  font-weight: 600;
  line-height: 1;
  text-align: right;
}
.bundle-direction-step .step-content {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.bundle-direction-step .step-label {
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.bundle-direction-step .step-body {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14.5px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}
.bundle-direction-step .step-body strong {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--sage);
  font-weight: 600;
  font-size: 15px;
}
.bundle-direction-step .step-arrow {
  color: var(--gold);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  margin: 0 4px;
  vertical-align: 1px;
}
.bundle-direction-step .step-hint {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 6px;
  opacity: 0.75;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .bundle-directions-toggle { padding: 14px 18px; }
  .bundle-directions-content { padding: 16px 18px 18px; }
  .directions-section { margin-bottom: 18px; }
  .directions-section-name { font-size: 18px; }
  .bundle-direction-step { grid-template-columns: 18px 1fr; gap: 10px; margin-bottom: 12px; }
  .bundle-direction-step .step-num { font-size: 17px; }
  .bundle-direction-step .step-body { font-size: 13.5px; }
  .bundle-direction-step .step-body strong { font-size: 14px; }
}

/* ═════════════════════════════════════════════════════════════
   FLOATING-LAUNCHER SHIFT WHEN BYO POPUP IS OPEN
   The BYO bundle-preview popup has its own close ✕ at top-right;
   normally the floating Search button (~top:14px) and the floating
   Cart button (~top:74px) sit in the same corner and partially
   obscure that ✕. When the popup is open, shift them down so the
   close X is fully reachable.
   ═════════════════════════════════════════════════════════════ */
body.byo-popup-open .page-filter {
  top: 80px !important;  /* was 14px */
}
body.byo-popup-open .cart-floating {
  top: 140px !important; /* was 74px desktop / 64px mobile */
}
@media (max-width: 600px) {
  body.byo-popup-open .page-filter {
    top: 76px !important;
  }
  body.byo-popup-open .cart-floating {
    top: 134px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   TOP-RIGHT CLOSE BUTTON on expanded bundle/routine cards.
   Mirror of the bottom "Collapse" button — gives the user a second
   way to collapse the card without scrolling to its footer. Same
   data-card-toggle attr so it runs through the same handler.
   ═════════════════════════════════════════════════════════════ */
.card-close-top {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  background: var(--ink);
  border: 2px solid var(--cream);
  border-radius: 50%;
  color: var(--cream);
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
  transition: background 0.25s, transform 0.25s;
  box-shadow: 0 2px 10px rgba(31, 27, 23, 0.22);
  z-index: 3;
}
.card-close-top:hover {
  background: var(--gold);
  transform: scale(1.08);
}

/* Hidden when card is collapsed (only visible in expanded state) */
.concern-card.is-collapsed > .card-close-top,
.curated-card.is-collapsed > .card-close-top {
  display: none;
}

/* Push the savings ribbon and routine pill down so they don't sit
   on top of the new close button. (The close button takes the top
   corner; ribbon shifts ~50px down on its right; routine pill
   shifts ~50px down on its left.) */
.concern-card .concern-savings-ribbon,
.curated-card .concern-savings-ribbon {
  top: 64px;
}
.concern-card .routine-pill {
  /* routine-pill sits at top-left so it doesn't conflict with the
     top-right close, but shift slightly down to keep visual balance */
  top: 22px;
}

@media (max-width: 720px) {
  .card-close-top {
    width: 32px;
    height: 32px;
    top: 14px;
    right: 14px;
    font-size: 14px;
  }
  .concern-card .concern-savings-ribbon,
  .curated-card .concern-savings-ribbon {
    top: 56px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DH CHATBOT — Floating FAQ Assistant
   ════════════════════════════════════════════════════════════════════════
   Launcher button (gold pill, bottom-left); panel slides in from bottom-right
   on desktop, full-screen on mobile. Brand palette throughout. */

.dh-chat-wrap {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 1200;            /* sits above shipping bar (z=10) but below cart panel (z=1100) when collapsed */
  font-family: 'Poppins', sans-serif;
}

/* ── Launcher button ─────────────────────────────────────────────────── */
.dh-chat-launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 16px;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  position: relative;
}
.dh-chat-launcher:hover {
  transform: translateY(-2px);
  background: var(--night, var(--ink));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.dh-chat-launcher-icon {
  display: inline-flex;
  color: var(--gold);
}
.dh-chat-launcher-label { color: var(--cream); }
/* Subtle pulse dot to draw the eye on first paint */
.dh-chat-launcher-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(184, 153, 104, 0.55);
  animation: dh-chat-pulse 2.4s infinite;
}
@keyframes dh-chat-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 153, 104, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(184, 153, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 153, 104, 0); }
}
.dh-chat-wrap.expanded .dh-chat-launcher { display: none; }

/* ── Overlay (mobile dim background, hidden on desktop) ──────────────── */
.dh-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 23, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 1199;
}
.dh-chat-wrap.expanded .dh-chat-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel ───────────────────────────────────────────────────────────── */
.dh-chat-panel {
  position: fixed;
  bottom: 16px;
  left: 16px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 100px);
  background: var(--cream);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
  z-index: 1201;
}
.dh-chat-wrap.expanded .dh-chat-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
@media (max-width: 600px) {
  .dh-chat-panel {
    bottom: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border: 0;
  }
  .dh-chat-wrap { bottom: 12px; left: 12px; }
}

/* ── Panel header ────────────────────────────────────────────────────── */
.dh-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 2px solid var(--gold);
}
.dh-chat-head-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}
.dh-chat-head-text { flex: 1; min-width: 0; }
.dh-chat-head-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.dh-chat-head-title em { font-style: italic; color: var(--gold); }
.dh-chat-head-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 240, 0.6);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dh-chat-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6cc36c;
  box-shadow: 0 0 6px rgba(108, 195, 108, 0.6);
}
.dh-chat-close {
  background: transparent;
  border: 1px solid rgba(250, 246, 240, 0.25);
  color: var(--cream);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}
.dh-chat-close:hover {
  background: rgba(250, 246, 240, 0.08);
  border-color: var(--gold);
  color: var(--gold);
}

/* ── Message body ─────────────────────────────────────────────────────── */
.dh-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 10px;
  background: var(--cream);
  scroll-behavior: smooth;
}
.dh-chat-msg {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.dh-chat-msg-user {
  flex-direction: row-reverse;
}
.dh-chat-bubble-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.dh-chat-bubble {
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 10px 14px;
  max-width: 80%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.dh-chat-msg-user .dh-chat-bubble {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  border-bottom-right-radius: 3px;
}
.dh-chat-msg-bot .dh-chat-bubble {
  border-bottom-left-radius: 3px;
}
.dh-chat-bubble-text p {
  margin: 0 0 8px;
}
.dh-chat-bubble-text p:last-child { margin-bottom: 0; }
.dh-chat-bubble-text strong { font-weight: 600; color: inherit; }
.dh-chat-bubble-text em { font-style: italic; }
.dh-chat-bubble-meta {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.dh-chat-bullet {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.dh-chat-bullet li {
  padding: 3px 0 3px 14px;
  position: relative;
  font-size: 13px;
}
.dh-chat-bullet li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--gold);
  font-weight: 700;
}
.dh-chat-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 153, 104, 0.4);
  font-weight: 500;
  transition: border-color 0.2s, color 0.2s;
}
.dh-chat-link:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.dh-chat-msg-user .dh-chat-link {
  color: var(--gold);
  border-color: rgba(184, 153, 104, 0.5);
}

/* ── Suggestion chips ────────────────────────────────────────────────── */
.dh-chat-suggestions {
  margin: 0 0 14px 36px;   /* indent to align under the bot bubble */
}
.dh-chat-suggestions-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.dh-chat-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.dh-chat-suggestion {
  background: var(--cream);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  max-width: 100%;
}
.dh-chat-suggestion:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold);
}

/* ── Typing indicator ────────────────────────────────────────────────── */
.dh-chat-typing {
  padding: 12px 14px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.dh-chat-typing span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: dh-chat-bounce 1.2s infinite ease-in-out both;
}
.dh-chat-typing span:nth-child(1) { animation-delay: -0.32s; }
.dh-chat-typing span:nth-child(2) { animation-delay: -0.16s; }
@keyframes dh-chat-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.7); }
  40%           { opacity: 1;   transform: scale(1); }
}

/* ── Input row + disclaimer ──────────────────────────────────────────── */
.dh-chat-disclaimer {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 6px 16px;
  background: var(--cream);
  border-top: 1px solid var(--rule);
}
.dh-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  background: var(--cream);
  border-top: 1px solid var(--rule);
}
.dh-chat-input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  background: var(--cream-warm);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--ink);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.dh-chat-input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.dh-chat-input:focus {
  border-color: var(--gold);
  background: var(--cream);
}
.dh-chat-send {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dh-chat-send:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  transform: translateX(2px);
}

/* ════════════════════════════════════════════════════════════════════════
   DH CHATBOT v2 — ADVANCED COMPONENTS
   ════════════════════════════════════════════════════════════════════════
   Rich inline cards, capability chips, voice button, feedback buttons,
   reset button, side-by-side comparison tables, product grids inside
   bubbles. All on top of the v1 base styles above. */

/* ── Reset button in header ──────────────────────────────────────────── */
.dh-chat-reset {
  background: transparent;
  border: 1px solid rgba(250, 246, 240, 0.25);
  color: var(--cream);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  margin-right: 6px;
  transition: background 0.2s, border-color 0.2s, transform 0.4s;
}
.dh-chat-reset:hover {
  background: rgba(250, 246, 240, 0.08);
  border-color: var(--gold);
  color: var(--gold);
  transform: rotate(-90deg);
}

/* ── Capability chips row (right under header) ───────────────────────── */
.dh-chat-capabilities {
  display: flex;
  gap: 6px;
  padding: 10px 14px 10px;
  background: var(--cream-warm);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.dh-chat-capabilities::-webkit-scrollbar { display: none; }
.dh-chat-cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dh-chat-cap-chip:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold);
}

/* ── Bubble wrap + feedback row ──────────────────────────────────────── */
.dh-chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 90%;
}
.dh-chat-msg-user .dh-chat-bubble-wrap { align-items: flex-end; }
.dh-chat-feedback {
  display: flex;
  gap: 5px;
  padding-left: 4px;
}
.dh-chat-feedback-btn {
  background: transparent;
  border: 1px solid var(--rule);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  opacity: 0.55;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
}
.dh-chat-feedback-btn:hover { opacity: 1; background: var(--cream-warm); }
.dh-chat-feedback-btn.voted {
  opacity: 1;
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.08);
}

/* ── Voice button ───────────────────────────────────────────────────── */
.dh-chat-voice {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cream-warm);
  color: var(--ink);
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dh-chat-voice:hover { background: var(--cream); border-color: var(--gold); }
.dh-chat-voice.listening {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  animation: dh-chat-voice-pulse 1.4s infinite;
}
@keyframes dh-chat-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 153, 104, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(184, 153, 104, 0); }
}

/* ════════════════════════════════════════════════════════════════════════
   RICH INLINE CARDS — products, bundles, ingredients, actions, etc.
   These render INSIDE bot bubbles to give visual context to responses.
   ════════════════════════════════════════════════════════════════════════ */

.dh-chat-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 14px;
  margin-bottom: 10px;
}
.dh-chat-card:last-child { margin-bottom: 0; }
.dh-chat-card-cat {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.dh-chat-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
.dh-chat-card-name em { font-style: italic; color: var(--sage); }
.dh-chat-card-name-sm { font-size: 15px; line-height: 1.3; }
.dh-chat-card-alt {
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 6px;
}
.dh-chat-card-blurb {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 4px 0 10px;
}
.dh-chat-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 10px;
}
.dh-chat-card-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: var(--ink);
  font-weight: 500;
}
.dh-chat-card-was {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-right: 6px;
}
.dh-chat-card-pricing { display: inline-flex; align-items: baseline; gap: 4px; }
.dh-chat-card-btn {
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--ink);
  padding: 7px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.dh-chat-card-btn:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.dh-chat-card-link-btn {
  background: var(--cream-warm);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.dh-chat-card-link-btn:hover {
  background: var(--cream);
  color: var(--gold);
  border-color: var(--gold);
}
.dh-chat-card-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 153, 104, 0.4);
  padding-bottom: 2px;
}
.dh-chat-card-link:hover { color: var(--ink); border-color: var(--gold); }

/* ── Product card (image left, body right) ──────────────────────────── */
.dh-chat-card-product { display: flex; gap: 12px; padding: 12px; }
.dh-chat-card-img {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  background: var(--cream-warm);
  overflow: hidden;
}
.dh-chat-card-img img { width: 100%; height: 100%; object-fit: cover; }
.dh-chat-card-body { flex: 1; min-width: 0; }
.dh-chat-card-product .dh-chat-card-foot { margin-top: 6px; }

/* ── Bundle card ────────────────────────────────────────────────────── */
.dh-chat-card-bundle-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.dh-chat-card-bundle-products {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 4px;
}
.dh-chat-mini-prod {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 4px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink);
}
.dh-chat-mini-prod img {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--cream);
}
.dh-chat-mini-more {
  background: var(--ink);
  color: var(--gold);
  padding: 4px 10px;
  font-weight: 600;
  border-color: var(--ink);
}

/* ── Ingredient card ─────────────────────────────────────────────────── */
.dh-chat-card-studies-pill,
.dh-chat-card-ingredient-pill {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(184, 153, 104, 0.12);
  border: 1px solid rgba(184, 153, 104, 0.3);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin: 4px 4px 4px 0;
}

/* ── Action confirmation card ────────────────────────────────────────── */
.dh-chat-card-action {
  background: linear-gradient(180deg, rgba(184, 153, 104, 0.08) 0%, var(--cream) 100%);
  border-color: var(--gold);
}
.dh-chat-card-action-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dh-chat-card-action-icon {
  width: 36px;
  height: 36px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.dh-chat-card-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ── Compare card (side-by-side table) ───────────────────────────────── */
.dh-chat-card-compare { padding: 12px; }
.dh-chat-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 11.5px;
}
.dh-chat-compare-table thead th {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--rule);
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.dh-chat-compare-table thead th a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 153, 104, 0.4);
}
.dh-chat-compare-table thead th a:hover { color: var(--gold); }
.dh-chat-compare-sub {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-top: 2px;
}
.dh-chat-compare-table tbody th {
  text-align: left;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  padding: 9px 6px 9px 0;
  border-bottom: 1px solid var(--rule);
  width: 84px;
  vertical-align: top;
}
.dh-chat-compare-table tbody td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  vertical-align: top;
}

/* ── Product grid card (filter results) ──────────────────────────────── */
.dh-chat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.dh-chat-grid-item {
  display: block;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  padding: 6px;
  transition: border-color 0.2s, transform 0.2s;
}
.dh-chat-grid-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.dh-chat-grid-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--cream);
  margin-bottom: 6px;
  overflow: hidden;
}
.dh-chat-grid-img img { width: 100%; height: 100%; object-fit: cover; }
.dh-chat-grid-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 2px;
}
.dh-chat-grid-price {
  font-size: 10px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ── Info card (generic) ─────────────────────────────────────────────── */
.dh-chat-card-info { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* ════════════════════════════════════════════════════════════════════════
   CHATBOT SETTINGS MODAL + CLAUDE INTEGRATION UI
   ════════════════════════════════════════════════════════════════════════ */

/* Settings button (gear icon) in panel header — matches Reset button styling */
.dh-chat-settings {
  background: transparent;
  border: 1px solid rgba(250, 246, 240, 0.25);
  color: var(--cream);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dh-chat-settings:hover {
  background: rgba(250, 246, 240, 0.08);
  border-color: var(--gold);
  color: var(--gold);
}

/* "Connected to Claude" banner shown above the disclaimer when active */
.dh-chat-claude-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(184, 153, 104, 0.12), rgba(184, 153, 104, 0.04));
  border-top: 1px solid var(--rule);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.dh-chat-claude-banner[hidden] { display: none; }
.dh-chat-claude-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: dh-chat-pulse 2.4s infinite;
}
.dh-chat-claude-banner-model { color: var(--ink); font-weight: 500; }

/* Settings modal — sits over the chat panel */
.dh-chat-settings-modal {
  position: absolute;
  inset: 0;
  z-index: 10;
}
.dh-chat-settings-modal[hidden] { display: none; }
.dh-chat-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 27, 23, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.dh-chat-settings-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 22px 22px 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
.dh-chat-settings-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
}
.dh-chat-settings-close:hover { border-color: var(--gold); color: var(--gold); }
.dh-chat-settings-eyebrow {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.dh-chat-settings-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 10px;
  line-height: 1.15;
}
.dh-chat-settings-title em { font-style: italic; color: var(--sage); }
.dh-chat-settings-blurb {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.dh-chat-settings-blurb code {
  background: var(--cream-warm);
  padding: 1px 6px;
  border: 1px solid var(--rule);
  font-size: 10.5px;
  font-family: 'Courier New', monospace;
}
.dh-chat-settings-label {
  display: block;
  margin-bottom: 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.dh-chat-settings-label > span { display: block; margin-bottom: 6px; }
.dh-chat-settings-key,
.dh-chat-settings-model {
  width: 100%;
  padding: 9px 12px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.dh-chat-settings-key:focus,
.dh-chat-settings-model:focus {
  border-color: var(--gold);
  background: var(--cream);
}
.dh-chat-settings-help {
  display: block;
  font-size: 10px;
  color: var(--gold);
  text-decoration: none;
  margin: -6px 0 16px;
  letter-spacing: 0.04em;
  font-weight: 500;
  text-transform: none;
}
.dh-chat-settings-help:hover { color: var(--ink); }
.dh-chat-settings-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--cream-warm);
  border: 1px solid var(--rule);
  cursor: pointer;
  margin-bottom: 14px;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.dh-chat-settings-toggle:hover { border-color: var(--gold); }
.dh-chat-settings-toggle input { display: none; }
.dh-chat-settings-toggle-slider {
  width: 32px;
  height: 18px;
  background: var(--rule);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.dh-chat-settings-toggle-slider::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--cream);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
}
.dh-chat-settings-toggle input:checked + .dh-chat-settings-toggle-slider {
  background: var(--gold);
}
.dh-chat-settings-toggle input:checked + .dh-chat-settings-toggle-slider::after {
  left: 16px;
}
.dh-chat-settings-toggle-label {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
  color: var(--ink);
}
.dh-chat-settings-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: rgba(184, 153, 104, 0.08);
  border-left: 2px solid var(--gold);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-family: 'Poppins', sans-serif;
}
.dh-chat-settings-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
}
.dh-chat-settings-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
  flex-shrink: 0;
}
.dh-chat-settings-status-dot[data-state="ready"] { background: #6cc36c; box-shadow: 0 0 6px rgba(108, 195, 108, 0.6); }
.dh-chat-settings-status-dot[data-state="pending"] { background: var(--gold); animation: dh-chat-pulse 1.2s infinite; }
.dh-chat-settings-status-dot[data-state="error"] { background: #c66c6c; }
.dh-chat-settings-status-dot[data-state="idle"] { background: var(--ink-soft); }
.dh-chat-settings-actions {
  display: flex;
  gap: 8px;
}
.dh-chat-settings-save,
.dh-chat-settings-test {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.dh-chat-settings-save {
  background: var(--ink);
  color: var(--gold);
}
.dh-chat-settings-save:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.dh-chat-settings-test {
  background: transparent;
  color: var(--ink);
}
.dh-chat-settings-test:hover {
  background: var(--cream-warm);
  border-color: var(--gold);
}

/* Streaming cursor — blinking gold caret while Claude is mid-response */
.dh-chat-stream-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  vertical-align: text-bottom;
  background: var(--gold);
  margin-left: 2px;
  animation: dh-chat-cursor-blink 0.9s infinite;
}
@keyframes dh-chat-cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* "Claude coming soon" callout inside the welcome bubble */
.dh-chat-claude-callout {
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(184, 153, 104, 0.10), rgba(184, 153, 104, 0.04));
  border-left: 2px solid var(--gold);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dh-chat-claude-callout p { margin: 0 0 6px; }
.dh-chat-claude-callout p:last-child { margin-bottom: 0; }
.dh-chat-claude-callout-eyebrow {
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 6px;
  font-family: 'Poppins', sans-serif;
}
/* Inline link button — looks like a hyperlink but is a button for accessibility */
.dh-chat-inline-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 153, 104, 0.4);
  cursor: pointer;
  font-weight: 500;
  transition: color 0.2s, border-color 0.2s;
}
.dh-chat-inline-link:hover {
  color: var(--ink);
  border-color: var(--gold);
}

/* Daniel's Daily Skincare — combined AM+PM+Weekly purchase box on skincare page */
.bundle-footnote-combined {
  margin-top: 32px;
  margin-bottom: 32px;
}
.bundle-footnote-combined .bundle-footnote-inner {
  /* Slightly elevated treatment vs. the AM/PM boxes — same palette, more presence */
  border-color: var(--gold);
  background: linear-gradient(to bottom, var(--cream-warm) 0%, var(--cream) 100%);
  box-shadow: 0 12px 32px rgba(31, 27, 23, 0.08);
}
.bundle-footnote-combined .bundle-footnote-name {
  font-size: clamp(32px, 3.4vw, 42px);
  margin-bottom: 12px;
}
.bundle-footnote-blurb {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto 22px;
}
@media (max-width: 720px) {
  .bundle-footnote-blurb { font-size: 14.5px; }
}