/*
Theme Name:  DIY Naturals
Description: Lightweight, SEO-rich natural-beauty blogging theme for DIY, soap, haircare & essential-oil websites. Fully responsive, sticky post sidebar, schema markup and security hardening built in. Works standalone — no parent theme required.
Author:      Your Name
Version:     2.4.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diy-naturals
Tags:        blog, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar
*/

/* Fonts are enqueued from functions.php as a parallel <link>, not @import.
   An @import here would serialise the requests and delay first paint. */

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  --sage:      #6B8F6E;
  --sage-dk:   #3D5E40;
  --sage-lt:   #EBF2EB;
  --cream:     #FAF7F2;
  --cream-dk:  #F0EBE1;
  --terra:     #C4714A;
  --terra-lt:  #FBF0EB;
  --text:      #2C2C2A;
  --text-md:   #5A5A57;
  --text-lt:   #9A9A97;
  --border:    rgba(107,143,110,0.15);
  --border-md: rgba(107,143,110,0.30);
  --white:     #FFFFFF;
  --shadow-sm: 0 1px 4px rgba(44,44,42,0.08);
  --shadow-md: 0 4px 16px rgba(44,44,42,0.10);
  --shadow-lg: 0 8px 32px rgba(44,44,42,0.12);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22,1,0.36,1);
  --dur: 0.25s;
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --max-w: 1240px;
  --header-h: 74px;
}

/* ================================================================
   2. RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;              /* kills sideways scroll without breaking sticky */
  overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; }

/* Accessibility helpers */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.dn-skip-link {
  position: absolute; top: -60px; left: 1rem; z-index: 2000;
  background: var(--sage-dk); color: var(--white);
  padding: .6rem 1rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .85rem; font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.dn-skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ================================================================
   3. TYPOGRAPHY
   ================================================================ */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: 600; line-height: 1.25; color: var(--text); }
h1 { font-size: clamp(1.85rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ================================================================
   4. LAYOUT UTILITIES
   ================================================================ */
.dn-container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.dn-section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.dn-section--white { background: var(--white); }
.dn-section--cream { background: var(--cream); }
.dn-section--sage  { background: var(--sage-lt); }
.dn-section--dark  { background: var(--sage-dk); }

/* Section call-to-action row — centred, wraps on small screens */
.dn-section-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

/* Responsive grids. Real column counts (not auto-fill) so rows stay aligned. */
.dn-grid-2, .dn-grid-3, .dn-grid-4 { display: grid; gap: 1.5rem; }
.dn-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dn-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.dn-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.25rem; }
.dn-grid-2 > *, .dn-grid-3 > *, .dn-grid-4 > * { min-width: 0; }

.dn-section-header { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.dn-section-header .eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage); display: block; margin-bottom: .4rem;
}
.dn-section-header h2 { margin-bottom: .6rem; }
.dn-section-header p { color: var(--text-md); max-width: 540px; margin-inline: auto; font-size: .95rem; }

/* ================================================================
   5. BUTTONS
   ================================================================ */
.dn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .75rem 1.75rem; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  text-decoration: none; text-align: center;
  min-height: 44px;                       /* comfortable tap target */
}
.dn-btn-primary { background: var(--sage); color: var(--white); border-color: var(--sage); }
.dn-btn-primary:hover { background: var(--sage-dk); border-color: var(--sage-dk); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dn-btn-outline { background: transparent; color: var(--sage-dk); border-color: var(--sage); }
.dn-btn-outline:hover { background: var(--sage); color: var(--white); transform: translateY(-2px); }
.dn-btn-white { background: var(--white); color: var(--sage-dk); border-color: var(--white); }
.dn-btn-white:hover { background: var(--cream); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dn-btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* ================================================================
   6. ANNOUNCEMENT BAR
   ================================================================ */
.dn-announce {
  background: var(--sage-dk); color: var(--white);
  text-align: center; padding: .55rem 1rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .04em;
  line-height: 1.5;
}
.dn-announce a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }

/* ================================================================
   7. HEADER — logo left / menu centre / search right
   ================================================================ */
.dn-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 900;
  transition: box-shadow var(--dur) var(--ease);
}
.dn-header.scrolled { box-shadow: var(--shadow-md); }

.dn-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* true optical centre for the menu */
  align-items: center;
  gap: 1rem;
  padding-block: .875rem;
  min-height: var(--header-h);
}
.dn-header-left   { justify-self: start;  min-width: 0; }
.dn-header-center { justify-self: center; min-width: 0; }
.dn-header-right  { justify-self: end; display: flex; align-items: center; gap: .5rem; min-width: 0; }

/* Logo */
.dn-logo { display: flex; flex-direction: column; flex-shrink: 0; text-decoration: none; line-height: 1.1; }
.dn-logo-name { font-family: var(--font-head); font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 700; color: var(--sage-dk); }
.dn-logo-tag  { font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.dn-logo img  { max-height: 50px; width: auto; }

/* Desktop nav */
.dn-nav { display: flex; align-items: center; gap: .125rem; flex-wrap: nowrap; }
.dn-nav > li { position: relative; }
.dn-nav > li > a {
  display: block; padding: .45rem .75rem; font-size: .875rem; font-weight: 500;
  color: var(--text); border-radius: var(--r-sm); white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dn-nav > li > a:hover,
.dn-nav > li.current-menu-item > a,
.dn-nav > li.current_page_item > a,
.dn-nav > li.current-menu-ancestor > a { color: var(--sage-dk); background: var(--sage-lt); }

/* Dropdown */
.dn-nav .sub-menu {
  position: absolute; top: calc(100% + .375rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--white); border: 1px solid var(--border-md);
  border-radius: var(--r-md); padding: .375rem; min-width: 190px;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur), transform var(--dur) var(--ease);
  z-index: 10;
}
.dn-nav > li:hover > .sub-menu,
.dn-nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dn-nav .sub-menu li a {
  display: block; padding: .5rem .8rem; font-size: .82rem; font-weight: 500;
  border-radius: var(--r-sm); white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dn-nav .sub-menu li a:hover { background: var(--sage-lt); color: var(--sage-dk); }

/* ================================================================
   8. ADVANCED SEARCH
   ================================================================ */
.dn-search-wrap { position: relative; min-width: 0; }

.dn-search {
  display: flex; align-items: stretch;
  background: var(--cream);
  border: 1px solid var(--border-md);
  border-radius: var(--r-pill);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dn-search:focus-within { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(107,143,110,.15); }

/* Category select */
.dn-search-cat { position: relative; flex-shrink: 0; display: flex; align-items: center; }
.dn-search-cat::after {
  content: ""; position: absolute; right: .6rem; top: 50%;
  width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.5px solid var(--text-md); border-bottom: 1.5px solid var(--text-md);
  transform: rotate(45deg); pointer-events: none;
}
.dn-search-cat select {
  appearance: none; -webkit-appearance: none;
  border: none; background: transparent;
  padding: .55rem 1.5rem .55rem .95rem;
  font-size: .78rem; font-weight: 600; color: var(--text-md);
  cursor: pointer; outline: none;
  max-width: 130px; text-overflow: ellipsis;
  border-right: 1px solid var(--border-md);
}

.dn-search-field { flex: 1 1 auto; display: flex; min-width: 0; }
.dn-search-field input {
  width: 100%; min-width: 0;
  border: none; background: transparent; outline: none;
  padding: .55rem .5rem .55rem .95rem;
  font-size: .84rem; color: var(--text);
}
.dn-search-field input::placeholder { color: var(--text-lt); }
.dn-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

.dn-search-submit {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 42px; cursor: pointer; color: var(--white); background: var(--sage);
  transition: background var(--dur) var(--ease);
}
.dn-search-submit:hover { background: var(--sage-dk); }

/* Header search sizing */
.dn-search-wrap--header { width: clamp(240px, 26vw, 340px); }

/* Suggestions dropdown */
.dn-search-results {
  position: absolute; top: calc(100% + .5rem); right: 0;
  width: min(400px, calc(100vw - 2rem));
  background: var(--white);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: .375rem;
  max-height: min(60vh, 420px); overflow-y: auto;
  z-index: 950;
  -webkit-overflow-scrolling: touch;
}
.dn-search-results[hidden] { display: none; }
.dn-search-wrap--drawer .dn-search-results,
.dn-search-wrap--mobile .dn-search-results { left: 0; right: 0; width: auto; }

.dn-search-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem; border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}
.dn-search-item:hover, .dn-search-item.is-active { background: var(--sage-lt); }
.dn-search-item-thumb {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--r-sm); object-fit: cover; background: var(--cream-dk);
}
.dn-search-item-body { min-width: 0; }
.dn-search-item-title {
  font-size: .85rem; font-weight: 600; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dn-search-item-meta { font-size: .68rem; color: var(--text-md); text-transform: uppercase; letter-spacing: .06em; margin-top: .15rem; }
.dn-search-msg { padding: .85rem .6rem; font-size: .82rem; color: var(--text-md); text-align: center; }
.dn-search-all {
  display: block; text-align: center; padding: .6rem;
  margin-top: .25rem; border-top: 1px solid var(--border);
  font-size: .76rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sage-dk);
}
.dn-search-all:hover { color: var(--sage); }

/* Collapsible mobile search row */
.dn-mobile-search {
  border-top: 1px solid var(--border);
  background: var(--white);
  padding-block: .75rem;
}
.dn-mobile-search[hidden] { display: none; }
.dn-header-actions .dn-search-toggle { display: none; }

/* ================================================================
   9. HEADER ACTIONS + HAMBURGER
   ================================================================ */
.dn-header-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }

.dn-icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 1rem; position: relative;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dn-icon-btn:hover { background: var(--sage-lt); color: var(--sage-dk); }
.dn-drawer-close { font-size: 1.6rem; line-height: 1; }

.dn-cart-count {
  position: absolute; top: 4px; right: 4px;
  background: var(--terra); color: var(--white);
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--r-pill);
  font-size: .58rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Hamburger — hidden on desktop, hard right on mobile */
.dn-hamburger {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 42px; height: 42px;
  border: 1px solid var(--border-md); border-radius: var(--r-sm);
  cursor: pointer; flex-shrink: 0;
  margin-left: .15rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dn-hamburger:hover { background: var(--sage-lt); border-color: var(--sage); }
.dn-hamburger span {
  display: block; width: 18px; height: 2px; background: var(--text);
  border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.dn-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dn-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dn-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   10. MOBILE DRAWER — slides in from the RIGHT
   ================================================================ */
.dn-drawer {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; justify-content: flex-end;
  visibility: hidden; pointer-events: none;
}
.dn-drawer.is-open { visibility: visible; pointer-events: auto; }

.dn-drawer-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.dn-drawer.is-open .dn-drawer-overlay { opacity: 1; }

.dn-drawer-panel {
  position: relative; z-index: 1; background: var(--white);
  width: min(330px, 88vw); height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  display: flex; flex-direction: column; gap: 1.15rem;
}
.dn-drawer.is-open .dn-drawer-panel { transform: translateX(0); }

.dn-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

.dn-drawer-nav { display: block; }
.dn-drawer-nav li { border-bottom: 1px solid var(--border); }
.dn-drawer-nav > li:last-child { border-bottom: none; }
.dn-drawer-nav li a {
  display: block; padding: .8rem 0;
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--text);
}
.dn-drawer-nav li a:hover { color: var(--sage-dk); }
.dn-drawer-nav .sub-menu { padding-left: 1rem; border-top: 1px solid var(--border); }
.dn-drawer-nav .sub-menu li a { font-family: var(--font-body); font-size: .9rem; font-weight: 500; padding: .55rem 0; }
.dn-drawer-cta { margin-top: auto; }

/* Drawer search sits inline */
.dn-search-wrap--drawer { width: 100%; }
.dn-search-wrap--drawer .dn-search-cat select { max-width: 110px; }

/* ================================================================
   11. HERO
   ================================================================ */
.dn-hero {
  background: linear-gradient(130deg, var(--sage-lt) 0%, var(--cream) 55%, #FDF4E3 100%);
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.25rem, 6vw, 4rem);
  overflow: hidden;
}
.dn-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.dn-hero-inner > * { min-width: 0; }

/* No hero image set → single centred column */
.dn-hero--noimg .dn-hero-inner { grid-template-columns: minmax(0, 720px); justify-content: center; text-align: center; }
.dn-hero--noimg .dn-hero-sub { margin-inline: auto; }
.dn-hero--noimg .dn-hero-btns,
.dn-hero--noimg .dn-hero-trust { justify-content: center; }

.dn-hero-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--sage); color: var(--white);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .875rem; border-radius: var(--r-pill); margin-bottom: 1rem;
  line-height: 1.4;
}
.dn-hero h1 { margin-bottom: 1.1rem; }
.dn-hero h1 em { font-style: italic; color: var(--sage-dk); }
.dn-hero-sub { font-size: clamp(.92rem, 2vw, 1rem); color: var(--text-md); max-width: 480px; margin-bottom: 1.75rem; line-height: 1.8; }
.dn-hero-btns { display: flex; gap: .875rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.dn-hero-trust { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.dn-hero-trust-item { display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 500; color: var(--text-md); }

.dn-hero-img-wrap { position: relative; }
.dn-hero-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.dn-hero-float {
  position: absolute; bottom: 1.75rem; left: -1.25rem;
  background: var(--white); border-radius: var(--r-md);
  padding: .75rem; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: .625rem; min-width: 170px;
}
.dn-hero-float-icon { width: 38px; height: 38px; background: var(--sage-lt); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.dn-hero-float strong { display: block; font-size: .8rem; font-weight: 600; }
.dn-hero-float span { font-size: .7rem; color: var(--text-md); }

/* ================================================================
   12. CATEGORY TILES — flex so the row always centres
   ================================================================ */
.dn-cat-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center;      /* fixes the desktop left-hug / mis-alignment */
  align-items: stretch;
  gap: 1rem;
}
.dn-cat-tile {
  flex: 0 1 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .6rem;
  padding: 1.25rem .75rem; border-radius: var(--r-lg); border: 1px solid transparent;
  text-decoration: none; text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dn-cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.dn-cat-icon {
  width: 54px; height: 54px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  transition: transform var(--dur) var(--ease); flex-shrink: 0;
}
.dn-cat-tile:hover .dn-cat-icon { transform: scale(1.08); }
.dn-cat-name  { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.dn-cat-count { font-size: .68rem; color: var(--text-md); }

.dn-cat-beauty   { background: #FBF0F5; border-color: #F4C0D1; }
.dn-cat-beauty   .dn-cat-icon { background: #FBEAF0; }
.dn-cat-beauty   .dn-cat-name { color: #72243E; }
.dn-cat-blog     { background: #F4F4F2; border-color: #D3D1C7; }
.dn-cat-blog     .dn-cat-icon { background: #EEEDE8; }
.dn-cat-blog     .dn-cat-name { color: #3C3C38; }
.dn-cat-diy      { background: #FDF7EC; border-color: #F5C870; }
.dn-cat-diy      .dn-cat-icon { background: #FAEEDA; }
.dn-cat-diy      .dn-cat-name { color: #63380A; }
.dn-cat-haircare { background: #EBF5F1; border-color: #9FD9C4; }
.dn-cat-haircare .dn-cat-icon { background: #E1F2EB; }
.dn-cat-haircare .dn-cat-name { color: #0A4F3C; }
.dn-cat-eoil     { background: #FBF0EC; border-color: #F5C0A8; }
.dn-cat-eoil     .dn-cat-icon { background: #FAECE7; }
.dn-cat-eoil     .dn-cat-name { color: #71280C; }
.dn-cat-soap     { background: #F0EFFE; border-color: #CBCAF4; }
.dn-cat-soap     .dn-cat-icon { background: #EEEDFE; }
.dn-cat-soap     .dn-cat-name { color: #3A3389; }

/* ================================================================
   13. BLOG CARDS + SHOW MORE
   ================================================================ */
.dn-blog-card {
  background: var(--white); border-radius: var(--r-lg);
  border: 1px solid var(--border); overflow: hidden;
  height: 100%; display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dn-blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.dn-blog-img { aspect-ratio: 16/9; overflow: hidden; background: var(--cream-dk); }
.dn-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.dn-blog-card:hover .dn-blog-img img { transform: scale(1.04); }
.dn-blog-img--empty { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--sage); }
.dn-blog-body { padding: 1.125rem; display: flex; flex-direction: column; flex: 1; }
.dn-blog-meta {
  display: flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-md); margin-bottom: .4rem; flex-wrap: wrap;
}
.dn-blog-meta .sep { color: var(--text-lt); }
.dn-blog-cat-pill { font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .55rem; border-radius: var(--r-pill); }
.dn-blog-title { font-family: var(--font-head); font-size: 1.02rem; font-weight: 600; line-height: 1.35; margin-bottom: .4rem; }
.dn-blog-title a:hover { color: var(--sage-dk); }
.dn-blog-excerpt {
  font-size: .84rem; color: var(--text-md); line-height: 1.6; margin-bottom: .875rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dn-read-more { font-size: .76rem; font-weight: 600; color: var(--sage-dk); text-transform: uppercase; letter-spacing: .05em; margin-top: auto; }
.dn-read-more:hover { color: var(--sage); }

/* Batch reveal */
.dn-blog-item-wrap { display: flex; min-width: 0; }
.dn-blog-item-wrap > * { width: 100%; }
.dn-blog-item-wrap.is-hidden { display: none; }
.dn-blog-item-wrap.is-revealing { animation: dnFadeUp .45s var(--ease) both; }
@keyframes dnFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   14. FEATURES / TESTIMONIALS
   ================================================================ */
.dn-feature { background: var(--cream-dk); border-radius: var(--r-lg); padding: 1.5rem; border: 1px solid var(--border); height: 100%; }
.dn-feature-icon { font-size: 1.75rem; margin-bottom: .875rem; }
.dn-feature h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }
.dn-feature p { font-size: .84rem; color: var(--text-md); margin: 0; line-height: 1.6; }

.dn-testi { background: var(--white); border-radius: var(--r-lg); padding: 1.5rem; border: 1px solid var(--border); height: 100%; display: flex; flex-direction: column; }
.dn-testi-stars { color: #E4A832; font-size: .875rem; margin-bottom: .75rem; }
.dn-testi-text { font-family: var(--font-head); font-style: italic; font-size: .95rem; line-height: 1.65; color: var(--text); margin-bottom: .875rem; }
.dn-testi-author { display: flex; align-items: center; gap: .625rem; margin-top: auto; }
.dn-testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sage-lt); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; color: var(--sage-dk); flex-shrink: 0; }
.dn-testi-name { font-weight: 600; font-size: .84rem; margin: 0; }
.dn-testi-loc { font-size: .72rem; color: var(--text-md); margin: 0; }

/* ================================================================
   15. NEWSLETTER
   ================================================================ */
.dn-newsletter { background: var(--sage-dk); border-radius: var(--r-xl); padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2rem); text-align: center; }
.dn-newsletter h2 { color: var(--white); margin-bottom: .625rem; }
.dn-newsletter p { color: rgba(255,255,255,.75); max-width: 460px; margin-inline: auto; margin-bottom: 1.5rem; font-size: .9rem; }
.dn-nl-form { display: flex; gap: .625rem; max-width: 440px; margin-inline: auto; flex-wrap: wrap; }
.dn-nl-form input[type="email"] {
  flex: 1 1 200px; min-width: 0; border: none; border-radius: var(--r-pill);
  padding: .8rem 1.125rem; font-size: .875rem;
  background: rgba(255,255,255,.14); color: var(--white);
  outline: 2px solid transparent; transition: outline-color var(--dur) var(--ease);
}
.dn-nl-form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.dn-nl-form input[type="email"]:focus { outline-color: rgba(255,255,255,.4); }
.dn-nl-form button {
  background: var(--white); color: var(--sage-dk); border-radius: var(--r-pill);
  padding: .8rem 1.5rem; font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap; min-height: 44px;
}
.dn-nl-form button:hover { background: var(--cream); transform: translateY(-1px); }
.dn-nl-note { font-size: .72rem; color: rgba(255,255,255,.55); margin-top: .75rem; }

/* ================================================================
   16. SIDEBAR + POST LAYOUT
   ================================================================ */
.dn-with-sidebar { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 2rem; align-items: start; }
.dn-sidebar { min-width: 0; }
.dn-sidebar-widget { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.dn-sidebar-widget:last-child { margin-bottom: 0; }
.dn-widget-title { font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-dk); padding-bottom: .625rem; border-bottom: 1px solid var(--border); margin-bottom: .875rem; }
.dn-cat-list li { border-bottom: 1px solid var(--border); }
.dn-cat-list li:last-child { border-bottom: none; }
.dn-cat-list a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem 0; font-size: .84rem; font-weight: 500; transition: color var(--dur); }
.dn-cat-list a:hover { color: var(--sage-dk); }
.dn-cat-list .dn-cat-count { background: var(--sage-lt); color: var(--sage-dk); font-size: .68rem; font-weight: 600; padding: .12rem .45rem; border-radius: var(--r-pill); flex-shrink: 0; }

.dn-page-banner { background: linear-gradient(135deg, var(--sage-lt), var(--cream)); padding-block: clamp(1.75rem, 5vw, 2.5rem); text-align: center; border-bottom: 1px solid var(--border); }
.dn-page-banner h1 { margin-bottom: .5rem; }
.dn-page-banner p { color: var(--text-md); max-width: 480px; margin-inline: auto; font-size: .95rem; }
.dn-breadcrumb { font-size: .75rem; color: var(--text-md); padding-block: .75rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.dn-breadcrumb a:hover { color: var(--sage-dk); }
.dn-breadcrumb .sep { color: var(--text-lt); }
.dn-breadcrumb .current { color: var(--text); font-weight: 500; }

.dn-entry-header { margin-bottom: 1.5rem; }
.dn-entry-badge { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .7rem; border-radius: var(--r-pill); margin-bottom: .625rem; }
.dn-entry-title { font-size: clamp(1.5rem, 4vw, 2.7rem); margin-bottom: .875rem; }
.dn-entry-meta { display: flex; align-items: center; gap: .875rem; font-size: .76rem; color: var(--text-md); flex-wrap: wrap; }
.dn-featured-img { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.75rem; aspect-ratio: 16/8; }
.dn-featured-img img { width: 100%; height: 100%; object-fit: cover; }

.dn-entry-content { font-size: 1rem; line-height: 1.8; color: var(--text); }
.dn-entry-content h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-top: 2rem; margin-bottom: .75rem; }
.dn-entry-content h3 { font-size: clamp(1.1rem, 2.5vw, 1.2rem); margin-top: 1.5rem; margin-bottom: .5rem; }
.dn-entry-content p { margin-bottom: 1.125rem; }
.dn-entry-content ul, .dn-entry-content ol { list-style: revert; padding-left: 1.5rem; margin-bottom: 1.125rem; }
.dn-entry-content li { margin-bottom: .3rem; }
.dn-entry-content a { color: var(--sage-dk); text-decoration: underline; text-underline-offset: 3px; }
.dn-entry-content a:hover { color: var(--sage); }
.dn-entry-content blockquote { border-left: 4px solid var(--sage); background: var(--sage-lt); padding: 1rem 1.25rem; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 1.5rem 0; font-family: var(--font-head); font-style: italic; color: var(--sage-dk); }
.dn-entry-content img { border-radius: var(--r-md); margin-block: 1.25rem; }
.dn-entry-content table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.dn-entry-content pre { overflow-x: auto; background: var(--cream-dk); padding: 1rem; border-radius: var(--r-md); }

.dn-author-box { background: var(--sage-lt); border-radius: var(--r-lg); padding: 1.25rem; display: flex; gap: .875rem; align-items: flex-start; margin-top: 2rem; flex-wrap: wrap; }
.dn-author-av { width: 52px; height: 52px; border-radius: 50%; background: var(--sage); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; flex-shrink: 0; }
.dn-author-box strong { display: block; font-weight: 600; margin-bottom: .25rem; }
.dn-author-box p { font-size: .84rem; color: var(--text-md); margin: 0; }

.dn-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.dn-post-nav a { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; display: block; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur); }
.dn-post-nav a:hover { border-color: var(--border-md); box-shadow: var(--shadow-sm); color: var(--sage-dk); }
.dn-post-nav .nav-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-lt); display: block; margin-bottom: .25rem; }
.dn-post-nav .nav-title { font-size: .875rem; font-weight: 500; line-height: 1.3; }
.dn-post-nav .dn-next { text-align: right; }

/* ================================================================
   17. FOOTER — layout driven by the Customizer
   ================================================================ */
.dn-footer { background: var(--text); color: rgba(255,255,255,.65); }
.dn-footer-top { padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.5rem); }

.dn-footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: var(--dn-grid-desktop, repeat(4, minmax(0,1fr)));
}
.dn-footer-grid > * { min-width: 0; }

.dn-footer-brand-name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--white); display: block; margin-bottom: .4rem; }
.dn-footer-desc { font-size: .84rem; line-height: 1.7; max-width: 300px; }
.dn-footer-social { display: flex; gap: .4rem; margin-top: 1.25rem; flex-wrap: wrap; }
.dn-social-btn {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: rgba(255,255,255,.65);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dn-social-btn:hover { background: var(--sage); color: var(--white); transform: translateY(-2px); }

.dn-footer-heading { font-family: var(--font-body); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: .875rem; }
.dn-footer-links { display: flex; flex-direction: column; gap: .1rem; }
.dn-footer-links a { display: inline-block; padding-block: .3rem; font-size: .84rem; color: rgba(255,255,255,.6); transition: color var(--dur); }
.dn-footer-links a:hover { color: var(--white); }
.dn-footer-widget { margin-bottom: 1.25rem; }
.dn-footer-widget a { color: rgba(255,255,255,.6); }

.dn-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: 1.125rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  font-size: .76rem; color: rgba(255,255,255,.4);
}

/* ================================================================
   18. WOOCOMMERCE OVERRIDES (guarded — harmless without Woo)
   ================================================================ */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 1.25rem !important; margin: 0 !important; }
.woocommerce ul.products li.product { float: none !important; width: auto !important; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin: 0 !important; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.woocommerce ul.products li.product a img { margin-bottom: 0; transition: transform .4s var(--ease); }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-head) !important; font-size: .95rem !important; font-weight: 600 !important; padding: .875rem .875rem .25rem !important; color: var(--text) !important; }
.woocommerce ul.products li.product .price { font-size: .95rem !important; font-weight: 700 !important; color: var(--sage-dk) !important; padding: 0 .875rem .875rem !important; display: block !important; }
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--sage) !important; color: var(--white) !important; border: none !important;
  border-radius: var(--r-pill) !important; font-family: var(--font-body) !important;
  font-size: .76rem !important; font-weight: 600 !important; letter-spacing: .04em !important;
  text-transform: uppercase !important; padding: .6rem 1rem !important; box-shadow: none !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--sage-dk) !important; color: var(--white) !important; }
.woocommerce ul.products li.product .button { margin: 0 .875rem .875rem !important; width: calc(100% - 1.75rem) !important; }
.woocommerce .single_add_to_cart_button { background: var(--sage) !important; color: var(--white) !important; border-radius: var(--r-pill) !important; border: none !important; padding: .875rem 2rem !important; font-size: .875rem !important; font-weight: 600 !important; }
.woocommerce .single_add_to_cart_button:hover { background: var(--sage-dk) !important; }
.woocommerce .woocommerce-message { border-top-color: var(--sage) !important; }
.woocommerce .woocommerce-message::before { color: var(--sage) !important; }
.single-product .product_title { font-family: var(--font-head); font-size: clamp(1.4rem,3vw,2.2rem); font-weight: 700; }
.single-product .price { color: var(--sage-dk) !important; font-size: 1.4rem !important; font-weight: 700 !important; }
.woocommerce-tabs .tabs li.active a { color: var(--sage-dk) !important; border-bottom-color: var(--sage) !important; }
.dn-product-badge { position: absolute; top: .625rem; left: .625rem; background: var(--terra); color: var(--white); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: var(--r-pill); z-index: 2; }
.dn-product-badge-new { background: var(--sage); }

/* ================================================================
   19. BACK TO TOP + PAGINATION
   ================================================================ */
.dn-back-top {
  position: fixed; bottom: 1.25rem; right: 1.25rem;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--sage); color: var(--white); cursor: pointer;
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), visibility var(--dur), transform var(--dur) var(--ease), background var(--dur);
  z-index: 400;
}
.dn-back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.dn-back-top:hover { background: var(--sage-dk); }

.dn-pagination, .navigation.pagination { margin-top: 2rem; display: flex; justify-content: center; }
.dn-pagination .nav-links, .navigation.pagination .nav-links { display: flex; gap: .375rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.dn-pagination .page-numbers, .navigation.pagination .page-numbers {
  min-width: 42px; height: 42px; padding-inline: .5rem; border-radius: var(--r-pill);
  border: 1px solid var(--border-md); background: var(--white); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: .84rem; font-weight: 500; transition: background var(--dur), color var(--dur);
}
.dn-pagination .page-numbers.current, .navigation.pagination .page-numbers.current { background: var(--sage); color: var(--white); border-color: var(--sage); }
.dn-pagination .page-numbers:hover:not(.current), .navigation.pagination .page-numbers:hover:not(.current) { background: var(--sage-lt); color: var(--sage-dk); }
.dn-pagination .page-numbers.dots { border: none; background: transparent; }
.screen-reader-text + .nav-links { margin: 0 auto; }

/* ================================================================
   20. REVEAL ANIMATION
   ================================================================ */
.dn-reveal { opacity: 1; transform: none; }
.dn-js .dn-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.dn-js .dn-reveal.visible { opacity: 1; transform: translateY(0); }

/* Narrow reading column for static pages */
.dn-container--narrow { max-width: 780px; }
.dn-footer-col { min-width: 0; }
.dn-post-nav .dn-prev { text-align: left; }

/* ================================================================
   20b. SHARED PAGE PARTS (banners, empty states, 404, tags)
   ================================================================ */
.dn-with-sidebar > * { min-width: 0; }

.dn-breadcrumb-bar { background: var(--cream-dk); border-bottom: 1px solid var(--border); }
.dn-banner-icon { font-size: clamp(1.75rem, 5vw, 2.25rem); margin-bottom: .5rem; line-height: 1; }

.dn-empty { text-align: center; padding-block: clamp(2rem, 6vw, 3rem); }
.dn-empty-icon { font-size: clamp(2rem, 7vw, 2.75rem); margin-bottom: 1rem; line-height: 1; }
.dn-empty h2 { margin-bottom: .5rem; }
.dn-empty p { color: var(--text-md); font-size: .92rem; max-width: 420px; margin-inline: auto; }

.dn-404 { text-align: center; padding-block: clamp(3rem, 9vw, 5rem); }
.dn-404 .dn-container { max-width: 560px; }
.dn-404 h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); margin-bottom: 1rem; }
.dn-404-text { color: var(--text-md); margin-bottom: 1.75rem; }
.dn-404-search { max-width: 440px; margin-inline: auto; }
.dn-search-wrap--404 { width: 100%; }
.dn-search-wrap--404 .dn-search-results { left: 0; right: 0; width: auto; text-align: left; }

.dn-cat-list a.is-current { color: var(--sage-dk); font-weight: 600; }

.dn-entry-tags { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.dn-entry-tags-label { font-size: .72rem; font-weight: 600; color: var(--text-md); }
.dn-entry-tags a {
  font-size: .74rem; padding: .2rem .65rem; border-radius: var(--r-pill);
  background: var(--sage-lt); color: var(--sage-dk); transition: background var(--dur);
}
.dn-entry-tags a:hover { background: var(--border-md); }

/* Sidebar call-to-action card */
.dn-sidebar-cta { background: var(--sage-dk); border-color: transparent; }
.dn-sidebar-cta .dn-widget-title { color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.12); }
.dn-sidebar-cta-text { font-size: .82rem; color: rgba(255,255,255,.75); margin-bottom: .875rem; }
.dn-nl-form--side { display: flex; flex-direction: column; gap: .5rem; max-width: none; }
.dn-nl-form--side input[type="email"] {
  flex: 1 1 auto; width: 100%; border-radius: var(--r-pill); border: none;
  padding: .65rem 1rem; font-size: .82rem; background: var(--white); color: var(--text);
}
.dn-nl-form--side input[type="email"]::placeholder { color: var(--text-lt); }
.dn-nl-form--side button { width: 100%; padding: .65rem 1rem; font-size: .75rem; }

.page-links { margin-top: 1.5rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: .8rem; }
.page-links a { padding: .25rem .6rem; border-radius: var(--r-sm); background: var(--sage-lt); color: var(--sage-dk); }

/* ================================================================
   20c. STICKY POST SIDEBAR  (desktop only — normal flow on phones)
   ================================================================ */
.dn-sidebar-inner { display: block; }

@media (min-width: 1025px) {
  /* The aside must stretch to the full height of the article, otherwise the
     sticky child fills its own container and has no distance to travel. */
  .dn-sidebar--sticky { align-self: stretch; }

  .dn-sidebar--sticky .dn-sidebar-inner {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    max-height: calc(100vh - var(--header-h) - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-md) transparent;
    padding-right: 2px;   /* room for the scrollbar so cards aren't clipped */
  }
  .dn-sidebar--sticky .dn-sidebar-inner::-webkit-scrollbar { width: 6px; }
  .dn-sidebar--sticky .dn-sidebar-inner::-webkit-scrollbar-thumb {
    background: var(--border-md); border-radius: var(--r-pill);
  }
  .dn-sidebar--sticky .dn-sidebar-inner::-webkit-scrollbar-track { background: transparent; }
}

/* Below 1025px the sidebar drops under the article and scrolls normally. */
@media (max-width: 1024px) {
  .dn-sidebar--sticky .dn-sidebar-inner {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

/* ================================================================
   20d. READING PROGRESS BAR
   ================================================================ */
.dn-progress {
  position: sticky;
  top: var(--header-h);
  z-index: 850;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.dn-progress-bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--sage), var(--terra));
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  transition: width .12s linear;
}

/* ================================================================
   20e. SHARE ROW
   ================================================================ */
.dn-share {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  margin-top: 2rem; padding-block: 1.25rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dn-share-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-md);
}
.dn-share-btns { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.dn-share-btn {
  width: 42px; height: 42px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--sage-lt); color: var(--sage-dk); font-size: .95rem;
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur);
}
.dn-share-btn:hover { background: var(--sage); border-color: var(--sage); transform: translateY(-2px); }
.dn-share-btn.is-copied { background: var(--sage-dk); }
.dn-share-btn.is-copied::after {
  content: "✓"; position: absolute; margin-top: -2.6rem;
  background: var(--text); color: var(--white);
  font-size: .64rem; padding: .15rem .5rem; border-radius: var(--r-sm);
}

/* Post meta author chip */
.dn-meta-author { display: inline-flex; align-items: center; gap: .45rem; }
.dn-meta-avatar { width: 26px; height: 26px; border-radius: 50%; }
.dn-entry-meta .sep { color: var(--text-lt); }
.dn-meta-updated { color: var(--sage-dk); font-weight: 600; }
a.dn-entry-badge { transition: opacity var(--dur); }
a.dn-entry-badge:hover { opacity: .8; }
.dn-featured-img figcaption {
  font-size: .76rem; color: var(--text-md); text-align: center;
  padding-top: .5rem;
}
.dn-featured-img { aspect-ratio: auto; }
.dn-featured-img img { aspect-ratio: 16/8; object-fit: cover; border-radius: var(--r-lg); }
img.dn-author-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ================================================================
   20f. HOMEPAGE POLISH — divider, stats, blobs, richer cards
   ================================================================ */

/* Small leaf divider under section headings */
.dn-divider {
  display: block; width: 64px; height: 10px; margin: .9rem auto 1rem;
  position: relative;
}
.dn-divider::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-md), transparent);
}
.dn-divider::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--sage); border-radius: 50% 0 50% 50%;
  transform: rotate(45deg);
}

/* Stats band */
.dn-stats-section { padding-block: 0; margin-top: -2.25rem; position: relative; z-index: 5; }
.dn-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.dn-stat {
  background: var(--white); text-align: center;
  padding: 1.5rem 1rem;
  transition: background var(--dur) var(--ease);
}
.dn-stat:hover { background: var(--sage-lt); }
.dn-stat-value {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem); color: var(--sage-dk); line-height: 1.1;
}
.dn-stat-label {
  display: block; margin-top: .3rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-md);
}

/* Hero decorative blobs */
.dn-hero { position: relative; }
.dn-hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dn-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.dn-blob-1 { width: 320px; height: 320px; background: #C8DEC6; top: -90px; left: -80px; }
.dn-blob-2 { width: 260px; height: 260px; background: #F6DFC9; bottom: -70px; right: 12%; opacity: .55; }
.dn-blob-3 { width: 200px; height: 200px; background: #E4D3E8; top: 30%; right: -60px; opacity: .35; }
.dn-hero .dn-container { position: relative; z-index: 1; }
.dn-hero-badge { box-shadow: 0 4px 14px rgba(107,143,110,.28); }

/* Category tiles — softer lift and a focus ring */
.dn-cat-tile { position: relative; overflow: hidden; }
.dn-cat-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--dur) var(--ease);
}
.dn-cat-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.dn-cat-tile:hover::after { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.dn-cat-icon { box-shadow: var(--shadow-sm); }

/* Blog cards — accent bar and smoother media */
.dn-blog-card { position: relative; }
.dn-blog-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sage), var(--terra));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
  z-index: 3; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.dn-blog-card:hover::before { transform: scaleX(1); }
.dn-blog-img { position: relative; }
.dn-blog-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(44,44,42,.12));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.dn-blog-card:hover .dn-blog-img::after { opacity: 1; }
.dn-blog-card:hover .dn-blog-img img { transform: scale(1.06); }
.dn-read-more { display: inline-flex; align-items: center; gap: .3rem; }
.dn-read-more span { transition: transform var(--dur) var(--ease); }
.dn-blog-card:hover .dn-read-more span { transform: translateX(4px); }

/* Feature cards — gradient icon tile */
.dn-feature {
  background: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.dn-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-md); }
.dn-feature-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sage-lt), #FBF0E8);
  font-size: 1.5rem; margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

/* Testimonials — decorative quote */
.dn-testi { position: relative; overflow: hidden; }
.dn-testi-quote {
  position: absolute; top: -.75rem; right: .75rem;
  font-family: var(--font-head); font-size: 5rem; line-height: 1;
  color: var(--sage-lt); pointer-events: none; user-select: none;
}
.dn-testi > * { position: relative; }
.dn-testi:hover { border-color: var(--border-md); box-shadow: var(--shadow-md); }

/* Newsletter — decorative rings */
.dn-newsletter { position: relative; overflow: hidden; }
.dn-newsletter > *:not(.dn-nl-decor) { position: relative; z-index: 1; }
.dn-nl-decor { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.10); }
.dn-nl-decor-1 { width: 280px; height: 280px; top: -140px; left: -90px; }
.dn-nl-decor-2 { width: 200px; height: 200px; bottom: -110px; right: -50px; background: rgba(255,255,255,.04); border-color: transparent; }

/* Section CTA buttons keep a little breathing room from the grid */
.dn-blog-cta { margin-top: 2.5rem; }

/* ================================================================
   20g. POST TOOLBAR — text size / share / follow / preferred badge
   ================================================================ */
.dn-post-tools {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.dn-tools-actions { display: flex; align-items: center; gap: .5rem; }

.dn-tool-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--border-md);
  color: var(--text); cursor: pointer; position: relative;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dn-tool-btn:hover { background: var(--sage-lt); color: var(--sage-dk); border-color: var(--sage); transform: translateY(-1px); }
.dn-tool-btn[aria-expanded="true"] { background: var(--sage); border-color: var(--sage); color: var(--white); }

/* Text-size button shows the current level */
.dn-tool-font .dn-fs-level {
  position: absolute; right: 5px; bottom: 4px;
  font-size: .56rem; font-weight: 700; line-height: 1;
  color: var(--sage-dk); background: var(--white);
  border-radius: var(--r-pill); padding: 1px 3px;
}
.dn-tool-btn:hover .dn-fs-level { background: var(--sage-lt); }

/* Share dropdown */
.dn-share-wrap { position: relative; }
.dn-share-menu {
  position: absolute; top: calc(100% + .5rem); left: 0;
  min-width: 190px; z-index: 60;
  background: var(--white); border: 1px solid var(--border-md);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: .35rem;
}
.dn-share-menu[hidden] { display: none; }
.dn-share-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .65rem; border-radius: var(--r-sm);
  font-size: .84rem; font-weight: 500; color: var(--text);
  text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dn-share-item:hover { background: var(--sage-lt); color: var(--sage-dk); }
.dn-share-item .dn-i { flex-shrink: 0; }

/* Follow on */
.dn-tools-follow { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.dn-tools-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-md); margin-right: .15rem;
}
.dn-follow-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage-lt); color: var(--sage-dk);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dn-follow-btn:hover { background: var(--sage); color: var(--white); transform: translateY(-2px); }
.dn-follow-wa:hover { background: #25D366; }

/* ---- Preferred on Google badge (rotates between two states) ---- */
.dn-preferred {
  display: inline-flex; align-items: center;
  padding: .5rem .9rem; min-height: 44px;
  border: 1px solid var(--border-md); border-radius: var(--r-md);
  background: var(--white); box-shadow: var(--shadow-sm);
  font-size: .82rem; font-weight: 500; color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dn-preferred:hover { border-color: var(--sage); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/**
 * Both slides live in the SAME grid cell, so the badge is permanently as wide
 * as its widest slide. Without this the toolbar would jump sideways every
 * time the text swaps.
 */
.dn-preferred-slides { display: grid; align-items: center; }
.dn-preferred-slide {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center; gap: .5rem;
  opacity: 0; visibility: hidden;
  transform: translateY(3px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.dn-preferred-slide.is-active { opacity: 1; visibility: visible; transform: translateY(0); }

/* No JS, or rotation switched off: show the first slide only. */
.dn-preferred:not(.dn-preferred--rotates) .dn-preferred-slide[data-slide="1"] { display: none; }

.dn-preferred-text { line-height: 1.3; }
.dn-preferred-brand { font-weight: 700; color: var(--sage-dk); white-space: nowrap; }
.dn-preferred-mark { display: inline-flex; align-items: center; flex-shrink: 0; }
.dn-preferred-img { width: 22px; height: 22px; object-fit: contain; }
.dn-preferred-g {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: .9rem; line-height: 1;
  color: var(--white);
  background: conic-gradient(from 140deg, #4285F4 0deg 90deg, #EA4335 90deg 180deg, #FBBC05 180deg 270deg, #34A853 270deg 360deg);
}

/* Rotation is decorative — hold on the first slide when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .dn-preferred-slide { transition: none; }
  .dn-preferred--rotates .dn-preferred-slide[data-slide="1"] { display: none; }
}

/* ================================================================
   20g-2. BRAND COLOURS FOR SHARE / FOLLOW ICONS
   ================================================================ */
:root {
  --c-whatsapp:  #25D366;
  --c-facebook:  #1877F2;
  --c-x:         #14171A;
  --c-pinterest: #E60023;
  --c-mail:      #6B8F6E;
  --c-news:      #4285F4;
}

/* Dropdown items: neutral until hovered, then the network's own colour */
.dn-share-item .dn-i { color: var(--text-md); transition: color var(--dur) var(--ease); }
.dn-share-whatsapp:hover  .dn-i { color: var(--c-whatsapp); }
.dn-share-facebook:hover  .dn-i { color: var(--c-facebook); }
.dn-share-x:hover         .dn-i { color: var(--c-x); }
.dn-share-pinterest:hover .dn-i { color: var(--c-pinterest); }
.dn-share-email:hover     .dn-i { color: var(--c-mail); }
.dn-share-copy:hover      .dn-i { color: var(--sage-dk); }

/* End-of-post share row: filled brand colour on hover */
.dn-share-btns .dn-share-btn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dn-share-btns .dn-share-whatsapp:hover  { background: var(--c-whatsapp);  color: #fff; }
.dn-share-btns .dn-share-facebook:hover  { background: var(--c-facebook);  color: #fff; }
.dn-share-btns .dn-share-x:hover         { background: var(--c-x);         color: #fff; }
.dn-share-btns .dn-share-pinterest:hover { background: var(--c-pinterest); color: #fff; }
.dn-share-btns .dn-share-email:hover     { background: var(--c-mail);      color: #fff; }
.dn-share-btns .dn-share-copy:hover      { background: var(--sage-dk);     color: #fff; }

.dn-follow-news:hover { background: var(--c-news); color: #fff; }

/* When the follow group is absent, push the badge right on its own */
.dn-post-tools > .dn-preferred:last-child { margin-left: auto; }
.dn-tools-follow ~ .dn-preferred { margin-left: 0; }

/* ================================================================
   20h. HIGHLIGHTED SUMMARY BOX
   ================================================================ */
.dn-entry-summary {
  background: linear-gradient(135deg, var(--sage-lt), var(--terra-lt));
  border-left: 4px solid var(--sage);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.1rem 1.25rem;
  margin-block: 1.75rem;
}
.dn-entry-summary p {
  margin: 0; font-size: 1.02rem; line-height: 1.7;
  color: var(--text); font-weight: 500;
}

/* ================================================================
   20i. READER TEXT-SIZE LEVELS
   ================================================================ */
.dn-entry-content { transition: font-size .18s var(--ease); }
.dn-fs-1 .dn-entry-content { font-size: 1.07rem; }
.dn-fs-2 .dn-entry-content { font-size: 1.16rem; }
.dn-fs-3 .dn-entry-content { font-size: 1.28rem; }
.dn-fs-1 .dn-entry-summary p { font-size: 1.08rem; }
.dn-fs-2 .dn-entry-summary p { font-size: 1.16rem; }
.dn-fs-3 .dn-entry-summary p { font-size: 1.26rem; }

/* Share row at the end of the post uses the same SVG icons */
.dn-share-btn .dn-i { pointer-events: none; }
.dn-share-btn.is-copied { background: var(--sage); color: var(--white); }

/* ================================================================
   21. RESPONSIVE — ≤1200px
   ================================================================ */
@media (max-width: 1200px) {
  .dn-nav > li > a { padding-inline: .55rem; font-size: .84rem; }
  .dn-search-wrap--header { width: clamp(200px, 22vw, 280px); }
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* ================================================================
   22. RESPONSIVE — ≤1024px (tablet: switch to drawer navigation)
   ================================================================ */
@media (max-width: 1024px) {
  .dn-header-inner {
    display: flex;
    justify-content: space-between;   /* logo hard left, actions hard right */
    align-items: center;
    gap: .75rem;
  }
  .dn-header-left  { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
  .dn-header-right { flex: 0 0 auto; margin-left: auto; }
  .dn-header-center { display: none; }        /* menu moves into the drawer */
  .dn-search-wrap--header { display: none; }  /* full search moves to the toggle row */

  .dn-header-actions .dn-search-toggle { display: flex; }
  .dn-hamburger { display: flex; }

  .dn-with-sidebar { grid-template-columns: minmax(0,1fr); }
  .dn-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dn-hero-inner { gap: 2rem; }
  .dn-grid-4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ================================================================
   23. RESPONSIVE — ≤900px
   ================================================================ */
@media (max-width: 900px) {
  .dn-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dn-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ================================================================
   24. RESPONSIVE — ≤768px (phones)
   ================================================================ */
@media (max-width: 768px) {
  :root { --header-h: 64px; }

  .dn-hero { padding-block: 2.5rem 2.25rem; }
  .dn-hero-inner { grid-template-columns: minmax(0,1fr); text-align: center; }
  .dn-hero-sub { margin-inline: auto; }
  .dn-hero-btns, .dn-hero-trust { justify-content: center; }
  .dn-hero-img-wrap { order: -1; max-width: 360px; width: 100%; margin-inline: auto; }
  .dn-hero-img { aspect-ratio: 4/3; }
  .dn-hero-float { display: none; }

  /* Category tiles — 3 per row, still centred */
  .dn-cat-grid { gap: .75rem; }
  .dn-cat-tile { flex: 0 0 calc((100% - 1.5rem) / 3); padding: 1rem .5rem; }
  .dn-cat-icon { width: 46px; height: 46px; font-size: 1.25rem; }
  .dn-cat-name { font-size: .76rem; }
  .dn-cat-count { font-size: .64rem; }

  .dn-grid-2, .dn-grid-3, .dn-grid-4 { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  .dn-post-nav { grid-template-columns: minmax(0,1fr); }
  .dn-post-nav .dn-next { text-align: left; }

  /* ---- FOOTER on mobile ---- */
  .dn-fmob-2 .dn-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.75rem 1.25rem; }
  .dn-fmob-1 .dn-footer-grid { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .dn-fmob-brand-full .dn-footer-brand { grid-column: 1 / -1; }
  .dn-fmob-align-center .dn-footer-grid { text-align: center; }
  .dn-fmob-align-center .dn-footer-desc { margin-inline: auto; }
  .dn-fmob-align-center .dn-footer-social { justify-content: center; }
  .dn-fmob-align-center .dn-footer-links { align-items: center; }
  .dn-footer-desc { max-width: 100%; }
  .dn-footer-bottom { flex-direction: column; text-align: center; }

  .dn-back-top { width: 42px; height: 42px; right: 1rem; }

  /* Stats + share on phones */
  .dn-stats-section { margin-top: -1.5rem; }
  .dn-stat { padding: 1.1rem .6rem; }
  .dn-share { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .dn-share-btns { margin-left: 0; }

  /* Post toolbar stacks so nothing is squashed on a phone */
  .dn-post-tools { gap: .75rem; }
  .dn-tools-follow { margin-left: 0; }
  .dn-post-tools > .dn-preferred:last-child { margin-left: 0; width: 100%; justify-content: center; }
  .dn-preferred-slides { justify-items: center; }
  .dn-preferred-slide { justify-content: center; text-align: center; }
  .dn-preferred-brand { white-space: normal; }
  .dn-share-menu { left: auto; right: 0; }
  .dn-entry-summary { padding: 1rem; }
  .dn-entry-summary p { font-size: .95rem; }
  .dn-blob-1, .dn-blob-3 { display: none; }
  .dn-blob-2 { width: 200px; height: 200px; }
  .dn-testi-quote { font-size: 3.5rem; }
}

/* ================================================================
   25. RESPONSIVE — ≤600px
   ================================================================ */
@media (max-width: 600px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .75rem !important; }
  .dn-search-cat select { max-width: 100px; font-size: .74rem; padding-inline: .7rem 1.35rem; }
  .dn-search-field input { font-size: 16px; }  /* stops iOS zooming on focus */
  .dn-logo img { max-height: 40px; }
}

/* ================================================================
   26. RESPONSIVE — ≤480px (small phones)
   ================================================================ */
@media (max-width: 480px) {
  .dn-hero-btns { flex-direction: column; align-items: stretch; width: 100%; }
  .dn-hero-btns .dn-btn { width: 100%; }
  .dn-section-cta { flex-direction: column; align-items: stretch; }
  .dn-section-cta .dn-btn { width: 100%; }

  /* Category tiles — 2 per row */
  .dn-cat-tile { flex: 0 0 calc((100% - .75rem) / 2); }

  .dn-nl-form { flex-direction: column; }
  .dn-nl-form input[type="email"], .dn-nl-form button { width: 100%; flex: 1 1 auto; }

  .dn-announce { font-size: .72rem; padding-inline: .75rem; }
  .dn-drawer-panel { width: min(320px, 92vw); }
  .dn-newsletter { border-radius: var(--r-lg); }
  .dn-hero-trust { gap: .75rem 1rem; font-size: .74rem; }
  .dn-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dn-share-btn { width: 44px; height: 44px; }
  .dn-tools-actions { width: 100%; }
  .dn-tools-follow { width: 100%; }
  .dn-share-menu { left: 0; right: auto; min-width: 200px; }
}

/* ================================================================
   27. RESPONSIVE — ≤380px (very small phones)
   ================================================================ */
@media (max-width: 380px) {
  .woocommerce ul.products { grid-template-columns: minmax(0,1fr) !important; }
  .dn-cat-tile { flex: 0 0 100%; flex-direction: row; justify-content: flex-start; text-align: left; gap: .75rem; }
  .dn-cat-tile .dn-cat-icon { width: 40px; height: 40px; font-size: 1.1rem; }
  .dn-header-actions { gap: .15rem; }
  .dn-icon-btn { width: 38px; height: 38px; }
  .dn-hamburger { width: 38px; height: 38px; }
}