/* ============================================================
   Simply Desserts — SEO Content Pages
   Shared styles for recipes, guides, answers, comparisons
   V2: Cream article card on purple bg
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg-deep:    #2d1d5b;
  --bg-dark:    #231550;
  --bg-mid:     #572d86;
  --bg-card:    #352266;
  --purple:     #623493;
  --purple-lt:  #7B4BA8;
  --teal:       #00afae;
  --teal-lt:    #1dc5c4;
  --teal-dark:  #009090;
  --choc:       #7B4A1E;
  --van:        #C8A84B;
  --ban:        #D4B820;
  --text-light: #F5F0E8;
  --text-muted: #c4b8d9;
  --text-dark:  #1A1025;
  --white:      #ffffff;
  --border:     rgba(255,255,255,0.08);

  --font: 'Arial Narrow', Arial, sans-serif;
  --font-heading: 'Anton', sans-serif;
  --font-heading-light: 'Antonio', sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 12px;
  --radius-sm: 8px;
  --max-w: 1300px;
  --max-w-wide: 1300px;

  /* FunnelKit Cart theming — copied from live WP page so the sidecart matches
     site branding on static pages that load cart-bootstrap.js. */
  --fkcart-primary-bg-color: #492f23;
  --fkcart-primary-font-color: #ffffff;
  --fkcart-primary-text-color: #483729;
  --fkcart-secondary-text-color: #24272dbe;
  --fkcart-strike-through-price-text-color: #483729;
  --fkcart-saving-text-price-color: #5BA238;
  --fkcart-coupon-text-price-color: #5BA238;
  --fkcart-accent-color: #492f23;
  --fkcart-border-color: #eaeaec;
  --fkcart-error-color: #B00C0C;
  --fkcart-error-bg-color: #FFF0F0;
  --fkcart-reward-color: #f1b51e;
  --fkcart-progress-bar-icon-color: #353030;
  --fkcart-progress-bar-active-icon-color: #ffffff;
  --fkcart-progress-bar-bg-color-active-icon: #2DA815;
  --fkcart-progress-bar-active-color: #2DA815;
  --fkcart-bg-color: #ffffff;
  --fkcart-slider-desktop-width: 400px;
  --fkcart-slider-mobile-width: 95%;
  --fkcart-animation-duration: 0.4s;
  --fkcart-panel-color: #e2f8f9;
  --fkcart-color-black: #000000;
  --fkcart-success-color: #5BA238;
  --fkcart-success-bg-color: #EFF6EB;
  --fkcart-toggle-bg-color: #492f23;
  --fkcart-toggle-icon-color: #ffffff;
  --fkcart-toggle-count-bg-color: #f7cbe6;
  --fkcart-toggle-count-font-color: #492f23;
  --fkcart-progressbar-active-color: #492f23;
  --fkcart-toggle-border-radius: 50%;
  --fkcart-toggle-size: 31;
  --fkcart-border-radius: 25px;
  --fkcart-menu-icon-size: 25px;
  --fkcart-menu-text-size: 25px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: #5c378e;
  color: #453025;
  font-family: var(--font);
  font-size: 1.25rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1 { font-family: var(--font-heading); font-weight: 400; text-transform: uppercase; }
h2 { font-family: var(--font-heading); font-weight: 400; text-transform: uppercase; }
h3, h4, h5, h6 { font-family: var(--font-heading-light); font-weight: 600; text-transform: uppercase; }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: var(--teal-lt); transition: color 0.2s; }
a:hover { color: var(--teal); }
ul, ol { list-style: none; }

/* ── Header (matches landing page) ───────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto;
  padding: 1rem 0;
}
.header-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #e3d4ff;
}
.header-wrap.scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.mobile-nav-logo {
  display: none;
}
.header-logo img { height: 56px; width: auto; }
.header-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 1.2rem;
  font-weight: 500;
}
.header-nav .nav-cta,
.header-nav .header-cta {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
}
.header-nav a { color: #453025; transition: color 0.2s; text-decoration: none; }
.header-nav a:hover { color: #5c378e; }
.header-nav .nav-active { color: #453025; text-decoration: underline; text-underline-offset: 4px; }
.header-nav .nav-cta,
.header-nav .header-cta {
  color: #fff !important;
  background: #3a2a1a;
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s;
}
.header-nav .nav-cta:hover,
.header-nav .header-cta:hover {
  background: #5c378e;
}
.header-nav .nav-cta-secondary,
.header-nav .header-cta-secondary {
  background: transparent !important;
  color: #453025 !important;
  border: 1.5px solid #453025;
}
.header-nav .nav-cta-secondary:hover,
.header-nav .header-cta-secondary:hover {
  background: #453025 !important;
  color: #fff !important;
}

/* ── Article Layout ──────────────────────────────────────── */
.article-header {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.25rem 4vw 1.25rem;
  text-align: center;
}
.article-header h1 {
  font-size: 2.7rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #fff;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.5rem;
}
.article-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Back to recipes link — inline with meta */
.back-to-recipes {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 0.2s;
}
.back-to-recipes:hover { color: #fff; }
.back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: border-color 0.2s;
}
.back-to-recipes:hover .back-icon { border-color: #fff; }

.article-hero {
  max-width: var(--max-w-wide);
  margin: 1.5rem auto 2rem;
  padding: 0 20px;
}
.article-hero img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ── Guide hero — centralized so guide/blog pages need NO per-page spacing ── */
.guide-hero {
  max-width: var(--max-w-wide);
  margin: 2rem auto;
  padding: 0;
}
.guide-hero img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
/* When a hero sits directly above the title block, the hero's even margin
   supplies the gap, so the title's own top padding is dropped — keeps the
   space above/below the hero and the H1 symmetrical automatically. */
.guide-hero + .index-header { padding-top: 0; }

/* ── Article Body — Cream card on purple ─────────────────── */
.article-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem 2rem 2rem;
  background: #f5ede6;
  border-radius: 16px;
  margin-bottom: 2rem;
  color: #453025;
}
/* The first element inside a cream box must not stack its own top margin on top
   of the box's padding — otherwise the first heading/paragraph floats with a
   big gap above it. Keeps the top spacing of every cream box even. */
.article-body > *:first-child { margin-top: 0; }

/* ── Typography ──────────────────────────────────────────── */
.article-body h2 {
  font-size: 1.5rem;
  margin: 2rem 0 0.5rem;
  color: #453025;
  border-bottom: none;
  padding-bottom: 0;
  display: block;
}
.article-body h3 {
  font-size: 1.3rem;
  margin: 2rem 0 0.75rem;
  color: #5c378e;
}
.article-body p {
  margin-bottom: 1.25rem;
  color: #453025;
  opacity: 1;
}
.article-body ul, .article-body ol {
  margin: 0 0 1.5rem 1.25rem;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body ol.method-steps { list-style: none; margin-left: 0; padding-left: 0; }
.article-body li {
  margin-bottom: 0.5rem;
  color: #453025;
  opacity: 1;
}
.article-body strong { color: #453025; font-weight: 600; }
.article-body a { color: #5c378e; font-weight: 600; text-decoration: underline; }
.article-body a:hover { color: #7B4BA8; }
.article-body a.btn-cta { text-decoration: none; }
.article-body blockquote {
  border-left: 3px solid #5c378e;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(92,55,142,0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: #5e4d42;
}

/* ── Recipe Card ─────────────────────────────────────────── */
.recipe-card {
  background: #fff;
  border: 1px solid rgba(69,48,37,0.1);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 1px 4px rgba(69,48,37,0.06);
}
.recipe-card h3 {
  color: #5c378e;
  margin-top: 0;
  font-weight: 500;
}
.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(69,48,37,0.1);
}
.recipe-meta-item {
  text-align: center;
}
.recipe-meta-label {
  display: block;
  font-size: 0.75rem;
  color: #7a6b5f;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.recipe-meta-value {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: #5c378e;
}
.recipe-card ol {
  margin-left: 1.25rem;
  list-style: decimal;
}
.recipe-card li { margin-bottom: 0.75rem; }

/* ── Variation Card ─────────────────────────────────────── */
.variation-card {
  background: #fff;
  border: 1px solid rgba(69,48,37,0.1);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.variation-card h4 {
  color: #5c378e;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.variation-card p {
  font-size: 1.2rem;
  color: #5e4d42;
  margin-bottom: 0;
}

/* ── Tip Box ────────────────────────────────────────────── */
.tip-box {
  background: rgba(92,55,142,0.06);
  border-left: 3px solid #5c378e;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* ── Nutrition Table ─────────────────────────────────────── */
.nutrition-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
.nutrition-table th,
.nutrition-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(69,48,37,0.12);
}
.nutrition-table th {
  color: #5c378e;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nutrition-table td { color: #453025; }
.nutrition-table tr:hover { background: rgba(92,55,142,0.04); }
.nutrition-table .highlight { color: #5c378e; font-weight: 600; }

/* ── FAQ Section ─────────────────────────────────────────── */
.faq-section {
  margin: 3rem 0 2rem;
}
.faq-section h2 {
  display: block;
}
.faq-item {
  border-bottom: 1px solid rgba(69,48,37,0.1);
  padding: 1.25rem 0;
}
.faq-item:first-of-type { border-top: none; }
.faq-item:last-of-type { border-bottom: none; }
.faq-question {
  font-weight: 500;
  color: #453025;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}
.faq-answer {
  color: #5e4d42;
  line-height: 1.7;
}
/* Guide/hub FAQs use <h3> inside .hpd-faq, which was inheriting the uppercase
   heading font + purple .article-body h3 colour. Normalise to match the recipe
   .faq-question look so every FAQ question across the site is uniform. */
.hpd-faq .faq-item h3 {
  font-family: var(--font);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.3rem;
  color: #453025;
  line-height: 1.4;
}

/* ── Product CTA Card ────────────────────────────────────── */
.product-cta {
  background: linear-gradient(135deg, #e3d4ff 0%, #d4c1f5 100%);
  border: 1px solid rgba(69,48,37,0.08);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 1rem auto;
  max-width: 1300px;
  text-align: center;
}
.product-cta h3 {
  color: #453025;
  font-size: 1.7rem;
  margin: 0 0 0.5rem;
}
.product-cta p {
  color: #5e4d42;
  margin-bottom: 1.25rem;
  font-size: 1.2rem;
}
.product-cta .cta-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.product-cta .cta-chip {
  background: #d8c1af;
  color: #453025;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 500;
}
.product-cta .btn-cta { color: #fff; }
.btn-cta {
  display: inline-block;
  background: #3a2a1a;
  color: #fff;
  padding: 10px 26px;
  border-radius: 100px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.2s;
}
.btn-cta:hover,
.product-cta .btn-cta:hover {
  background: #5c378e;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ── Related Content (outside cream card, on purple bg) ─── */
.related-content {
  border-top: none;
  max-width: var(--max-w);
  margin: 1.5rem auto 2rem;
  padding: 0;
}
.related-content h2 {
  color: #fff;
  border-bottom: none;
  display: block;
  margin: 0 0 1rem;
  padding-bottom: 0;
  text-align: center;
  font-size: 2.5rem;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.related-card {
  background: #f5ede6;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
  transition: transform 0.2s;
}
.related-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.related-card h4,
.related-card p {
  padding: 0 1.25rem;
  text-align: center;
}
.related-card:hover {
  border-color: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}
.related-card h4 {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #453025;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  line-height: 1.3;
}
.related-card p {
  font-size: 1.1rem;
  color: #453025;
  margin-bottom: 1rem;
  padding-bottom: 0;
  line-height: 1.3;
}
.related-card .card-meta {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.25rem 1.25rem;
}
.related-card .card-meta span {
  background: #d8c1af;
  color: #453025;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  font-size: 0.9rem;
}

/* ── Recipes Index ───────────────────────────────────────── */
.index-header {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 2rem 0;
  text-align: center;
}
.index-header h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
  color: #fff;
}
.index-header h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 0.5rem;
  color: #fff;
}
.index-header p {
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.4rem;
}
.recipe-grid {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.recipe-grid-card {
  background: #f5ede6;
  border: 1px solid rgba(69,48,37,0.1);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}
.recipe-grid-card:hover {
  border-color: rgba(69,48,37,0.1);
  transform: translateY(-3px);
}
.recipe-grid-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.recipe-grid-card .card-body {
  padding: 1.25rem 1.5rem;
  text-align: center;
}
.recipe-grid-card h3 {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #453025;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.recipe-grid-card p {
  font-size: 1.1rem;
  color: #453025;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.recipe-grid-card .card-meta {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.recipe-grid-card .card-meta span {
  background: #d8c1af;
  color: #453025;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  font-size: 0.9rem;
}
.header-nav .nav-active {
  color: #453025;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Footer (matches landing page exactly) ───────────────── */
.site-footer {
  background: #e3d4ff;
  border-top: none;
  padding: 3rem 8vw 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.footer-logo {
  height: 65px;
  width: auto;
  opacity: 0.85;
  margin-bottom: 0.75rem;
}
.footer-socials {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(69,48,37,0.1);
  color: #453025;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.social-icon svg { width: 16px; height: 16px; }
.social-icon:hover {
  background: #453025;
  color: #e3d4ff;
  transform: translateY(-2px);
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}
.footer-links a {
  color: #453025;
  transition: color 0.2s;
  text-decoration: none;
}
.footer-links a:hover { color: #5c378e; }
.footer-sep { color: #453025; }
.footer-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: #453025;
}
.footer-contact a { color: #453025; text-decoration: none; transition: color 0.2s; }
.footer-contact a:hover { color: #5c378e; }
.footer-copy {
  font-size: 1rem;
  color: #453025;
  text-align: center;
  max-width: 60ch;
}
/* Trademark disclaimer: present and legible, but quieter than the copyright. */
.footer-disclaimer {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-top: 0.4rem;
  max-width: 72ch;
}

/* ── Back to Top (matches index.html) ────────────────────── */
.back-to-top {
  position: fixed;
  /* Sit directly above the FKCart floating toggler (computed bottom: 36px, 62x62px). */
  bottom: 118px;
  right: 45px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(69,48,37,0.2);
  background: rgba(227, 212, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #5c378e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: #5c378e;
  border-color: #5c378e;
  color: #fff;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Hamburger ────────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  position: relative;
  z-index: 120;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #453025;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .hamburger { display: flex; width: 28px; height: 28px; gap: 4px; }
  .hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .site-header { padding: 0.6rem 20px; }
  .header-logo img { height: 44px; }
  .mobile-nav-logo { display: block; margin-bottom: 1.5rem; }
  .mobile-nav-logo img { height: 64px; width: auto; }

  .header-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(227, 212, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 100px;
    align-items: center;
    gap: 1.4rem;
    font-size: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 110;
  }

  .header-nav::before {
    display: none;
  }

  .header-nav.open { opacity: 1; visibility: visible; }

  .header-nav a {
    font-size: 1.1rem;
    letter-spacing: 0;
    color: #453025;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease, color 0.2s;
  }
  .header-nav.open a { transform: translateY(0); opacity: 1; }
  .header-nav.open a:nth-child(1) { transition-delay: 0.05s; }
  .header-nav.open a:nth-child(2) { transition-delay: 0.1s; }
  .header-nav.open a:nth-child(3) { transition-delay: 0.15s; }
  .header-nav.open a:nth-child(4) { transition-delay: 0.2s; }

  .header-nav .nav-cta,
  .header-nav .header-cta {
    margin-top: 0.5rem;
    font-size: 1rem;
    padding: 0.75rem 2rem;
    min-width: 200px;
    text-align: center;
  }

  .index-header { padding: 0.75rem 20px 1.5rem; }

  .article-hero { margin: 1rem auto 1rem; padding: 0 20px; }
  .guide-hero { margin: 1.25rem auto; padding: 0 20px; }
  .hero-gradient { padding: 1.5rem 20px 0; margin-bottom: 1rem; }
  .article-header { padding: 0.5rem 20px 0.5rem; }
  .article-header h1 { font-size: 1.8rem; line-height: 1.15; }
  .article-meta { gap: 0.4rem 0.8rem; line-height: 1.3; }
  .article-body { padding: 1.5rem 1.25rem 2rem; border-radius: 12px; margin-left: 20px; margin-right: 20px; }
  .article-body h2 { font-size: 1.3rem; line-height: 1.2; margin: 1.5rem 0 0.5rem; }
  .related-content { padding: 0 20px; margin: 1.5rem auto 2rem; }
  .related-grid { grid-template-columns: 1fr; }
  .site-footer { padding: 2rem 6vw 2rem; }
  .recipe-meta { gap: 1rem; }
  .product-cta { padding: 1.5rem; }
  .recipe-grid { grid-template-columns: 1fr; padding: 0 20px 1.5rem; }
}

/* ============================================================
   HUB BAND SYSTEM — full-bleed colour bands + drip "melt" waves
   Ported from the /ninja-creami/ homepage so guide, Fix-It and
   sub-hub pages share its banded look. Purely additive: only
   affects pages whose markup opts in with these classes.
   ============================================================ */
.band { width: 100vw; margin-left: calc(50% - 50vw); position: relative; }
/* Bottom padding is deliberately deep: the next band's wave rises ~37px into
   this one, so the content needs to clear it rather than sit flush. */
.band-inner { max-width: var(--max-w); margin: 0 auto; padding: 3rem 20px 6.5rem; }
.band-deep  { background: #2d1d5b; }
.band-dark  { background: #231550; }
.band-cream { background: #f5ede6; }
.band-lav   { background: #efe7f7; }

/* Seamless wave divider. Each wave is painted the colour of its OWN section
   (the one BELOW the seam) and lifted up so it rises into the section above.
   Its flat edge meets its own band, so that seam is invisible; the wavy edge
   pokes up into the section above. Set each <path fill> = the band it sits on. */
.drip {
  display: block; width: 100%; height: 38px;
  margin-top: -37px; margin-bottom: 0;
  transform: scaleY(-1);
  position: relative; z-index: 3; pointer-events: none;
}
/* Inside a band the wave must be absolutely positioned: as a first child its
   negative margin would collapse into the section's own margin, dragging the
   whole band up instead of lifting the wave out of it (which hid the wave on
   its own matching background). Absolute takes it out of flow, so it sits
   exactly above the band, flat edge overlapping its own band by 1px. */
.band > .drip {
  position: absolute; top: -37px; left: 0; margin-top: 0;
}
.drip-flip { transform: scaleY(-1) scaleX(-1); }
/* The footer supplies the wave's own colour, so overlap it by 1px to close
   any sub-pixel seam between the wave's flat edge and the footer. */
.drip + .site-footer { margin-top: -1px; }

/* Cream reading cards keep their own look but drop their side margins and
   width cap when they sit inside a full-bleed band (band-inner frames them). */
.band .band-inner > .article-body {
  margin-left: 0; margin-right: 0; max-width: 100%;
}

/* Teal ticker tape (SD brand marquee) */
.ticker {
  width: 100vw; margin-left: calc(50% - 50vw); background: var(--teal);
  overflow: hidden; padding: 0.8rem 0;
  border-top: 3px solid #06282b; border-bottom: 3px solid #06282b;
}
.ticker-track {
  display: flex; align-items: center; gap: 2.25rem; width: max-content;
  animation: ticker-scroll 32s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  font-family: var(--font-heading); text-transform: uppercase; color: #06282b;
  font-size: 1.1rem; letter-spacing: 0.14em; white-space: nowrap;
}
.tick-dot { width: 9px; height: 9px; border-radius: 50%; background: #f5ede6; flex: 0 0 auto; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* In-article product CTA restyled as the teal -> purple shop band.
   Vertical gradient so the band's top edge is a uniform teal, letting the
   teal wave above it read as perfectly seamless across the full width. */
.shop-band { background: linear-gradient(180deg, var(--teal-dark) 0%, var(--teal) 16%, #5a2f96 78%, #3a1f74 100%); }
.shop-band .band-inner { text-align: center; }
.shop-band .product-cta {
  background: transparent; border: none; max-width: 760px; padding: 0; margin: 0 auto;
}
.shop-band .product-cta h3 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.shop-band .product-cta p { color: rgba(255,255,255,0.92); }
.shop-band .product-cta .cta-chip {
  background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.28);
}
.shop-band .product-cta .btn-cta { background: #fff; color: #3a1f74; box-shadow: 0 8px 22px rgba(15,8,40,0.28); }
.shop-band .product-cta .btn-cta:hover { background: #06282b; color: #fff !important; }

/* Related content when it sits inside a dark band; tighten the space beneath
   the cards so the footer wave sits close under them. */
.band .related-content { margin-top: 0; margin-bottom: 0; padding: 0; }

/* Headings flip with the lightness of the band they sit in, so a section can
   be dropped into any coloured band and stay readable. */
.band-dark .section-heading h2, .band-deep .section-heading h2 { color: #fff; }
.band-dark .section-heading p,  .band-deep .section-heading p  { color: rgba(245,240,232,0.86); }
.band-cream .section-heading h2, .band-lav .section-heading h2, .band-subtle .section-heading h2 { color: #3a2566; }
.band-cream .section-heading p,  .band-lav .section-heading p,  .band-subtle .section-heading p  { color: #5e4d42; }
.band-cream .index-header h1, .band-lav .index-header h1, .band-subtle .index-header h1 { color: #3a2566; }
.band-cream .index-header p,  .band-lav .index-header p,  .band-subtle .index-header p  { color: #5e4d42; }

/* Cards lift inside any band; the category chip picks up the band's flavour. */
.band .recipe-grid-card { box-shadow: 0 6px 22px rgba(15,8,40,0.16); }
.band .recipe-grid-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,8,40,0.28); }
.band-deep  .recipe-grid-card .card-meta span:first-child { background: #cdeeed; color: #045958; }
.band-lav   .recipe-grid-card .card-meta span:first-child { background: #e5d4f5; color: #4d2580; }
.band-cream .recipe-grid-card .card-meta span:first-child { background: #eddfa9; color: #574208; }
.band-dark  .recipe-grid-card .card-meta span:first-child { background: #f0e2be; color: #5c451a; }
.band .band-diabetic-note { text-align: center; color: rgba(245,240,232,0.85); margin: 1.75rem 0 0; }
.band .band-diabetic-note a { color: var(--teal-lt); font-weight: 700; text-decoration: underline; }

@media (max-width: 768px) {
  .drip { height: 26px; margin-top: -25px; }
  .band > .drip { top: -25px; margin-top: 0; }
  .ticker-track span { font-size: 1rem; }
  .band-inner { padding: 2.25rem 20px 4rem; }
  .band .band-inner > .article-body { margin-left: 0; margin-right: 0; }
}
/* Footer's own rising wave (footer colour, poking up into the dark band above) */
.site-footer > .drip { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }