/* =========================================================
   DRHERBO — DESIGN SYSTEM
   Premium Ayurvedic & Natural Wellness — editorial, botanical,
   restrained. No business logic lives in CSS; only presentation.
   ========================================================= */

/* -----------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------- */
:root{
  /*
   * Color system — brand primary is DrHerbo's deep botanical teal-green
   * (#025043), used strategically for CTAs, links and accents against a
   * warm ivory/cream ground — per the brand brief, NOT applied as a
   * wall-to-wall green site. --df-forest (near-black botanical green) is
   * reserved for headings/dark sections; --df-bronze is a secondary earth
   * accent for quality/trust touches.
   */
  --df-ivory:        #F6F1E6;
  --df-ivory-deep:   #EEE5D2;
  --df-paper:        #FBF8F2;
  --df-forest:       #24312A;
  --df-forest-deep:  #182019;
  --df-primary:      #025043; /* DrHerbo brand primary — deep botanical teal-green */
  --df-primary-deep: #013A31; /* hover/active state */
  --df-primary-soft: #E1EBE8; /* pale tint for subtle backgrounds/badges */
  --df-bronze:       #A9814A;
  --df-bronze-soft:  #D8C39C;
  --df-charcoal:     #2A2A24;
  --df-stone:        #7B7568;
  --df-stone-light:  #A69F8F;
  --df-line:         #DED2B4;
  --df-line-dark:    #3B4A3F;
  --df-white:        #FFFFFF;
  --df-success:      #4C6B4F;
  --df-error:        #A5402C;

  /* Type */
  --df-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --df-font-body:    "Inter", "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /*
   * MOBILE-FIRST FLUID TYPE SCALE.
   * clamp(min, preferred-vw, max) means these sizes already scale smoothly
   * between a 320px phone and a 1440px+ desktop with zero breakpoint jumps —
   * this replaces the old fixed-px-then-patch-for-mobile approach.
   */
  --df-fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --df-fs-sm:   clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --df-fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --df-fs-md:   clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --df-fs-lg:   clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --df-fs-xl:   clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  --df-fs-2xl:  clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  --df-fs-3xl:  clamp(1.85rem, 1.4rem + 2.4vw, 3rem);
  --df-fs-4xl:  clamp(2.1rem, 1.5rem + 3.2vw, 3.75rem);
  --df-lh-tight: 1.15;
  --df-lh-snug:  1.35;
  --df-lh-normal:1.6;

  /*
   * MOBILE-FIRST FLUID SPACING. Section/paragraph rhythm scales down
   * naturally on small screens instead of desktop padding being crammed in.
   */
  --df-sp-1: 0.25rem;
  --df-sp-2: 0.5rem;
  --df-sp-3: 0.75rem;
  --df-sp-4: 1rem;
  --df-sp-5: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --df-sp-6: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --df-sp-7: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --df-sp-8: clamp(2.5rem, 1.7rem + 4vw, 4rem);
  --df-sp-9: clamp(3rem, 1.8rem + 6vw, 6rem);
  --df-sp-10: clamp(3.5rem, 2rem + 7.5vw, 8rem);

  /* Layout */
  --df-container: 1280px;
  --df-container-narrow: 860px;
  --df-gutter: clamp(1rem, 0.85rem + 0.75vw, 3rem);
  --df-radius-sm: 2px;
  --df-radius-md: 6px;
  --df-radius-pill: 999px;
  --df-shadow-soft: 0 16px 32px -20px rgba(24,32,25,0.28);
  --df-shadow-lift: 0 24px 48px -24px rgba(24,32,25,0.32);
  --df-border: 1px solid var(--df-line);
  --df-transition: 220ms cubic-bezier(.4,0,.2,1);

  /* Mobile header is shorter than desktop — see .df-header__inner. */
  --df-header-height: 60px;
  --df-bottom-nav-height: 64px;
}

@media (min-width: 640px){
  :root{ --df-header-height: 84px; }
}

/*
 * ROOT CAUSE FIX — CSS Grid overflow bug:
 * `repeat(N, 1fr)` alone does NOT prevent a track from growing past 1fr when
 * its content (a long unbroken product name, a badge, Hindi text with no
 * spaces) is wider than the available column. Grid items default to
 * min-width:auto (their content's min-content size), so a single long word
 * can force the whole grid — and therefore the page — wider than the
 * viewport. Every grid/flex track in this file uses minmax(0, 1fr) / a
 * min-width:0 reset for exactly this reason; see sections 3, 17, 20.
 */

/* Respect reduced motion preference globally */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------
   2. RESET / BASE
   ----------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--df-ivory);
  color: var(--df-charcoal);
  font-family: var(--df-font-body);
  font-size: var(--df-fs-base);
  line-height: var(--df-lh-normal);
  -webkit-font-smoothing: antialiased;
  /*
   * Defense-in-depth, applied AFTER the real fixes below (minmax(0,1fr)
   * grid tracks, min-width:0 flex children, flexible header/AI-widget/
   * gallery markup) — not a substitute for them. If something we haven't
   * anticipated still tries to push wider than the viewport, this clips it
   * instead of producing a page-level horizontal scrollbar.
   */
  overflow-x: hidden;
}
img, svg, video{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }

h1,h2,h3,h4{
  font-family: var(--df-font-display);
  font-weight: 500;
  line-height: var(--df-lh-tight);
  color: var(--df-forest);
  overflow-wrap: break-word; /* long / unbroken words (incl. Hindi) never force overflow */
}
h1{ font-size: var(--df-fs-4xl); }
h2{ font-size: var(--df-fs-2xl); }
h3{ font-size: var(--df-fs-xl); }
h4{ font-size: var(--df-fs-md); }

p, a, span, button, input, li{ overflow-wrap: break-word; }

/* Hindi (Devanagari) sets slightly taller-looking due to matras/conjuncts —
   nudge line-height up a touch so it doesn't feel cramped, without affecting
   Latin text sizing. */
:lang(hi){ line-height: 1.7; }

/* Visible keyboard focus everywhere — accessibility requirement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--df-primary);
  outline-offset: 3px;
  border-radius: var(--df-radius-sm);
}

/* Screen-reader-only utility used throughout templates */
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.skip-link{
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--df-forest);
  color: var(--df-paper);
  padding: 0.75rem 1.25rem;
  border-radius: var(--df-radius-sm);
  z-index: 10000;
  transition: top var(--df-transition);
}
.skip-link:focus{ top: 1rem; }

/* -----------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ----------------------------------------------------------- */
.df-container{
  width: 100%;
  max-width: var(--df-container);
  margin-inline: auto;
  padding-inline: var(--df-gutter);
}
.df-container--narrow{ max-width: var(--df-container-narrow); }

/* Mobile-first section rhythm — --df-sp-9/7 are already fluid (see tokens),
   so no separate mobile override is needed here. */
.df-section{ padding-block: var(--df-sp-9); }
.df-section--tight{ padding-block: var(--df-sp-7); }
.df-section--forest{ background: var(--df-forest); color: var(--df-paper); }
.df-section--forest h2, .df-section--forest h3{ color: var(--df-paper); }
.df-section--alt{ background: var(--df-ivory-deep); }

.df-section-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--df-sp-4);
  margin-bottom: var(--df-sp-6);
  flex-wrap: wrap;
}
.df-section-head__label{
  display: block;
  font-size: var(--df-fs-sm);
  color: var(--df-primary);
  margin-bottom: var(--df-sp-2);
  font-weight: 600;
}
.df-section-head__link{
  font-size: var(--df-fs-sm);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
}

/*
 * MOBILE-FIRST GRID SYSTEM.
 * Base (no media query) = phone. Each breakpoint only ADDS columns as space
 * allows — this is the "base mobile → tablet enhancement → desktop
 * enhancement" strategy called for, replacing the old desktop-first grid
 * that had to be patched down for narrow screens.
 *
 * minmax(0, 1fr) — not bare 1fr — on every track: without the explicit 0
 * minimum, a grid track can never shrink below its content's min-content
 * size, so one long unbroken string (a product name, a badge, unspaced
 * Hindi text) silently forces the whole grid past the viewport edge. This
 * was the single most common cause of horizontal overflow in the audit.
 */
.df-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--df-sp-5);
}
/* Card-style grids (categories, products, herbs, goals): 2-up on phones
   per the mobile card spec, not 1-up — a single wide list of tiny 4–8-item
   cards feels compressed and empty, two columns reads as intentional. */
.df-grid--3, .df-grid--4{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px){
  .df-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .df-grid--4{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .df-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Content-pair grids (related herbs / reorder, why-product blocks): stay
   stacked on phones and tablets, since these hold paragraphs, not cards. */
@media (min-width: 800px){
  .df-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------
   4. BUTTONS
   ----------------------------------------------------------- */
.df-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--df-sp-2);
  padding: 0.9rem 1.75rem;
  min-height: 48px; /* comfortable touch target on every screen size */
  font-size: var(--df-fs-sm);
  font-weight: 600;
  border-radius: var(--df-radius-sm);
  border: 1px solid transparent;
  transition: background var(--df-transition), color var(--df-transition), border-color var(--df-transition), transform var(--df-transition);
  white-space: nowrap;
}
/* Button GROUPS (hero CTAs, product add-to-cart/buy-now) stack full-width
   on narrow phones instead of wrapping into two cramped half-width buttons. */
@media (max-width: 420px){
  .df-hero__ctas, .df-product-summary__ctas{
    flex-direction: column;
    align-items: stretch;
  }
  .df-hero__ctas .df-btn, .df-product-summary__ctas .df-btn{
    width: 100%;
  }
}
.df-btn:active{ transform: translateY(1px); }
.df-btn--primary{ background: var(--df-primary); color: var(--df-paper); }
.df-btn--primary:hover{ background: var(--df-primary-deep); }
.df-btn--dark{ background: var(--df-forest); color: var(--df-paper); }
.df-btn--dark:hover{ background: var(--df-forest-deep); }
.df-btn--outline{ background: transparent; color: var(--df-forest); border-color: var(--df-forest); }
.df-btn--outline:hover{ background: var(--df-forest); color: var(--df-paper); }
.df-btn--ghost-light{ background: transparent; color: var(--df-paper); border-color: rgba(251,248,242,0.5); }
.df-btn--ghost-light:hover{ background: rgba(251,248,242,0.12); border-color: var(--df-paper); }
.df-btn--sm{ padding: 0.6rem 1.25rem; font-size: var(--df-fs-xs); }
.df-btn--block{ width: 100%; }
.df-btn:disabled{ opacity: 0.5; cursor: not-allowed; }

/* -----------------------------------------------------------
   5. CARDS / BADGES / FORMS  (shared primitives)
   ----------------------------------------------------------- */
.df-card{
  background: var(--df-paper);
  border: var(--df-border);
  border-radius: var(--df-radius-md);
  overflow: hidden;
}
.df-card--flat{ border-radius: 0; }

.df-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--df-fs-xs);
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--df-radius-pill);
  background: var(--df-ivory-deep);
  color: var(--df-forest);
  border: 1px solid var(--df-line);
}
.df-badge--clay{ background: var(--df-primary); color: var(--df-paper); border-color: transparent; }
.df-badge--verified{ background: var(--df-forest); color: var(--df-paper); border-color: transparent; }
.df-badge--demo{ background: transparent; color: var(--df-stone); border: 1px dashed var(--df-stone-light); }

.df-field{
  display: block;
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-size: var(--df-fs-sm);
  font-family: var(--df-font-body);
  color: var(--df-charcoal);
  background: var(--df-paper);
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius-sm);
  transition: border-color var(--df-transition);
}
.df-field:focus{ border-color: var(--df-primary); outline: none; }
.df-field::placeholder{ color: var(--df-stone-light); }

/* Demo-content notice — required so placeholder data is never mistaken for real data */
.df-demo-note{
  font-size: var(--df-fs-xs);
  color: var(--df-stone);
  font-style: italic;
}

/* -----------------------------------------------------------
   6. HEADER
   ----------------------------------------------------------- */
.df-announcement{
  background: var(--df-forest);
  color: var(--df-paper);
  text-align: center;
  font-size: var(--df-fs-xs);
  padding: 0.55rem var(--df-gutter);
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
}

.df-header{
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(246,241,230,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--df-line); /* subtle definition, per brand brief, always visible */
  transition: border-color var(--df-transition), box-shadow var(--df-transition), background var(--df-transition);
}
.df-header.is-scrolled{
  border-bottom-color: var(--df-line);
  box-shadow: 0 8px 24px -20px rgba(24,32,25,0.4);
}
/*
 * Mobile header row: [Logo]  [Search][Account][Cart][Menu]
 * `gap` is intentionally small on phones and `min-width:0` on the logo lets
 * it truncate with an ellipsis in the (rare) worst case instead of pushing
 * the icon cluster off-screen — the real fix is the compact 36px icon
 * sizing + reduced gap below, this is just a safety net for it.
 */
.df-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--df-sp-3);
  height: var(--df-header-height);
}
@media (min-width: 640px){
  .df-header__inner{ gap: var(--df-sp-5); }
}
.df-header__logo{
  font-family: var(--df-font-display);
  font-size: clamp(1.05rem, 0.9rem + 1.2vw, 1.75rem);
  color: var(--df-forest);
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df-header__logo a{ display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.df-header__logo img{ height: 28px; width: auto; max-width: 100%; }
@media (min-width: 640px){ .df-header__logo img{ height: 36px; } }
/*
 * Opt-in dark backdrop for a light/reversed logo mark. The theme cannot
 * detect a logo image's own colors, and the logo artwork itself must never
 * be modified — so this gives the light-header context the logo needs via
 * a Customizer toggle (Appearance → Customize → Site Identity → "Logo is
 * light-colored") instead. Off by default; only applies when enabled.
 */
.df-header__logo--chip{
  background: var(--df-forest);
  padding: 0.4rem 0.9rem;
  border-radius: var(--df-radius-md);
  display: inline-flex;
  align-items: center;
}
.df-header__logo--chip, .df-header__logo--chip a{ color: var(--df-paper); }

/* Desktop primary navigation — completely separate from the mobile menu
   markup/behaviour below, per the "don't force desktop nav into mobile"
   requirement. Below 1024px it isn't rendered at all (display:none), so it
   can never be a source of mobile overflow. */
/*
 * ROOT CAUSE FIX — vertical/broken navigation:
 * wp_nav_menu() renders the actual menu as a <ul class="df-nav__list">
 * nested ONE level inside this <nav class="df-nav"> wrapper. `display:flex`
 * only arranges an element's direct children — applying it to .df-nav
 * turned the single <ul> into one flex item, while its <li>s (block-level
 * by default, since the global reset only strips list markers/margins,
 * not display) kept stacking vertically inside it. That vertical stack,
 * inside a fixed-height sticky header, is what produced the overlap.
 * Flex must be applied to the list itself.
 */
.df-nav{ display: none; }
@media (min-width: 1024px){
  .df-nav{ display: block; }
  .df-nav__list{
    display: flex;
    align-items: center;
    gap: var(--df-sp-5);
    flex-wrap: wrap;
  }
  .df-nav a{
    font-size: var(--df-fs-sm);
    color: var(--df-forest);
    position: relative;
    padding-block: 0.25rem;
  }
  .df-nav a::after{
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -2px;
    height: 1px;
    background: var(--df-primary);
    transition: right var(--df-transition);
  }
  .df-nav a:hover::after{ right: 0; }
  .df-nav .menu-item-has-children{ position: relative; }
  .df-nav .sub-menu{
    display: none;
    position: absolute;
    top: 100%; left: -1rem;
    min-width: 220px;
    background: var(--df-paper);
    border: var(--df-border);
    border-radius: var(--df-radius-md);
    box-shadow: var(--df-shadow-soft);
    padding: var(--df-sp-3);
    margin-top: var(--df-sp-3);
  }
  .df-nav .menu-item-has-children:hover .sub-menu,
  .df-nav .menu-item-has-children:focus-within .sub-menu{ display: block; }
  .df-nav .sub-menu a{ display: block; padding: 0.5rem 0.5rem; }
  .df-nav .sub-menu a::after{ display: none; }
}

/*
 * Mobile action row. Fixed 36px icon buttons + tight gap were chosen
 * deliberately: 4 icons × 36px + 3 gaps × 6px = 162px, which — together
 * with a truncating logo — fits comfortably inside a 320px viewport's
 * ~288px content width (320 − 2×16px mobile gutter). The language switch
 * is intentionally NOT in this row on phones (it lives in the mobile menu,
 * see .df-mobile-menu__lang below) — that alone was the single biggest
 * contributor to header overflow in the previous version.
 */
.df-header__actions{
  display: flex;
  align-items: center;
  gap: var(--df-sp-2);
  flex-shrink: 0;
}
@media (min-width: 640px){
  .df-header__actions{ gap: var(--df-sp-3); }
}
.df-header__icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  color: var(--df-forest);
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 640px){
  .df-header__icon-btn{ width: 40px; height: 40px; }
}
.df-header__icon-btn svg{ width: 19px; height: 19px; }
.df-header__cart-count{
  position: absolute;
  top: 0; right: 0;
  background: var(--df-primary);
  color: var(--df-paper);
  font-size: 10px;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Language switcher — hidden from the mobile header row (see comment
   above); shown inline on tablet+ where there's room, and always shown
   inside the mobile drawer regardless of width. */
.df-lang-switch{
  display: none;
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius-pill);
  overflow: hidden;
  font-size: var(--df-fs-xs);
  flex-shrink: 0;
}
@media (min-width: 900px){ .df-lang-switch{ display: flex; } }
.df-lang-switch a{ padding: 0.35rem 0.7rem; }
.df-lang-switch a[aria-current="true"]{ background: var(--df-forest); color: var(--df-paper); }
.df-mobile-menu__lang.df-lang-switch{ display: flex; width: fit-content; } /* always visible inside the drawer */

/* Header search dropdown panel — previously unstyled (relying on default
   block display); now explicitly contained and mobile-safe. */
.df-search-panel{
  background: var(--df-paper);
  border-top: 1px solid var(--df-line);
  border-bottom: 1px solid var(--df-line);
  box-shadow: var(--df-shadow-soft);
}
.df-search-panel .df-search-form{ min-width: 0; }
.df-search-panel .df-field{ min-width: 0; }

.df-menu-toggle{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: var(--df-forest);
  background: none; border: none;
  flex-shrink: 0;
}
@media (min-width: 640px){ .df-menu-toggle{ width: 40px; height: 40px; } }
@media (min-width: 1024px){ .df-menu-toggle{ display: none; } }

/*
 * Mobile off-canvas drawer menu. 100% width/height with hidden overflow-x
 * so its own content can never create page-level horizontal scroll; the
 * inner list scrolls vertically only.
 */
.df-mobile-menu{
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  background: var(--df-ivory);
  transform: translateX(100%);
  transition: transform var(--df-transition);
  z-index: 900;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--df-sp-6) var(--df-gutter);
  padding-bottom: max(var(--df-sp-6), env(safe-area-inset-bottom, 0));
}
.df-mobile-menu.is-open{ transform: translateX(0); }
.df-mobile-menu__close{ background: none; border: none; width: 40px; height: 40px; margin-left: auto; display: block; }
.df-mobile-menu ul{ margin-top: var(--df-sp-6); }
.df-mobile-menu li{ border-bottom: 1px solid var(--df-line); }
.df-mobile-menu a{
  display: block;
  padding: 1rem 0;
  font-family: var(--df-font-display);
  font-size: var(--df-fs-lg);
  color: var(--df-forest);
  overflow-wrap: break-word;
}
.df-mobile-menu__utility{
  display: flex;
  align-items: center;
  gap: var(--df-sp-4);
  margin-top: var(--df-sp-6);
  padding-top: var(--df-sp-5);
  border-top: 1px solid var(--df-line);
  flex-wrap: wrap;
}
.df-mobile-menu__utility a{
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--df-font-body); font-size: var(--df-fs-sm); padding: 0.5rem 0;
}
@media (min-width: 1024px){ .df-mobile-menu{ display: none; } }

/*
 * Account — the header icon links straight to WooCommerce's native My
 * Account page, which already renders login/register/lost-password (when
 * logged out) or the dashboard/orders/addresses/logout (when logged in)
 * via WooCommerce core — no custom auth, no duplicated form markup. These
 * rules only style WooCommerce's own form classes with our design tokens
 * so that native page looks premium and works at every width.
 */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-form-lost-password{
  max-width: 420px;
  display: grid;
  gap: var(--df-sp-4);
}
.woocommerce-account .woocommerce-form-row{ min-width: 0; }
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label,
.woocommerce-account .woocommerce-form-lost-password label{
  display: block;
  font-size: var(--df-fs-sm);
  color: var(--df-forest);
  margin-bottom: 0.4rem;
}
.woocommerce-account .woocommerce-form-login input.input-text,
.woocommerce-account .woocommerce-form-register input.input-text,
.woocommerce-account .woocommerce-form-lost-password input.input-text{
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-size: var(--df-fs-sm);
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius-sm);
  background: var(--df-paper);
  min-height: 48px;
}
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button,
.woocommerce-account .woocommerce-form-lost-password .button{
  width: 100%;
}
.woocommerce-account .woocommerce-LostPassword,
.woocommerce-account .woocommerce-form-login-toggle{
  font-size: var(--df-fs-sm);
}
.woocommerce-account .woocommerce-form-login-toggle a,
.woocommerce-account .u-columns .col-2 h2 + p a{ color: var(--df-primary); }
.woocommerce-account .woocommerce-MyAccount-navigation ul{ display: grid; gap: var(--df-sp-2); }
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--df-sp-4);
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius-md);
  color: var(--df-forest);
  min-height: 48px;
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{ border-color: var(--df-primary); color: var(--df-primary); }
.woocommerce-account .woocommerce-MyAccount-content{ margin-top: var(--df-sp-6); }
@media (min-width: 900px){
  .woocommerce-account .woocommerce-MyAccount-navigation{ float: left; width: 26%; }
  .woocommerce-account .woocommerce-MyAccount-content{ float: right; width: 70%; margin-top: 0; }
  .woocommerce-account::after{ content: ""; display: block; clear: both; }
}

/* -----------------------------------------------------------
   7. MOBILE BOTTOM NAVIGATION
   ----------------------------------------------------------- */
.df-bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  display: flex;
  background: var(--df-paper);
  border-top: 1px solid var(--df-line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 1024px){ .df-bottom-nav{ display: none; } }
.df-bottom-nav a{
  flex: 1;
  min-width: 0; /* let long/translated labels ellipsis instead of overflow */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.65rem 0.25rem 0.55rem;
  min-height: 56px;
  font-size: 11px;
  color: var(--df-stone);
  text-align: center;
}
.df-bottom-nav a span{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df-bottom-nav a svg{ width: 21px; height: 21px; flex-shrink: 0; }
.df-bottom-nav a.is-active{ color: var(--df-primary); }
.df-bottom-nav a.is-ai{ color: var(--df-primary); }

/* Reserve space so bottom nav never overlaps content on mobile. Height is
   computed from the actual nav content (icon+label+padding) rather than a
   guessed constant, via the --df-bottom-nav-height token used consistently
   here and in inc/enqueue.php's viewport meta is not needed — pure CSS. */
body.has-bottom-nav{ padding-bottom: calc(var(--df-bottom-nav-height) + env(safe-area-inset-bottom, 0)); }
@media (min-width: 1024px){ body.has-bottom-nav{ padding-bottom: 0; } }

/* -----------------------------------------------------------
   8. HERO (editorial, asymmetric — not a centered stock hero)
   ----------------------------------------------------------- */
/*
 * Mobile-first hero: single column, content above image (matches the
 * markup order already in template-parts/hero/hero-home.php — eyebrow,
 * headline, copy, CTAs, AI teaser, then the image). Grid becomes the
 * asymmetric two-column editorial composition only at desktop widths.
 */
.df-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--df-sp-6);
  padding-block: var(--df-sp-6);
}
@media (min-width: 1024px){
  .df-hero{
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--df-sp-7);
    padding-block: var(--df-sp-8);
  }
}
.df-hero__eyebrow{ color: var(--df-primary); font-weight: 600; font-size: var(--df-fs-sm); margin-bottom: var(--df-sp-3); display: block; letter-spacing: 0.04em; }
.df-hero__title{ max-width: 16ch; }
.df-hero__copy{ max-width: 42ch; margin-block: var(--df-sp-5); color: var(--df-stone); font-size: var(--df-fs-md); }
.df-hero__ctas{ display: flex; flex-wrap: wrap; gap: var(--df-sp-3); }
.df-hero__ai-teaser{
  margin-top: var(--df-sp-6);
  display: flex;
  align-items: center;
  gap: var(--df-sp-3);
  padding: var(--df-sp-3) var(--df-sp-4);
  border: 1px dashed var(--df-bronze);
  border-radius: var(--df-radius-md);
  font-size: var(--df-fs-sm);
  color: var(--df-forest);
  max-width: 100%;
}
@media (min-width: 480px){ .df-hero__ai-teaser{ display: inline-flex; } }
.df-hero__ai-teaser svg{ flex-shrink: 0; }
/*
 * Hero image height is capped on phones (max-height + a shorter aspect
 * ratio) so it never pushes the fold down excessively on a 320–430px
 * screen — "no excessive hero height" from the mobile spec. Desktop keeps
 * the taller, more editorial 4:5 ratio.
 */
.df-hero__media{
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 60vh;
  border-radius: var(--df-radius-md);
  overflow: hidden;
  background: var(--df-ivory-deep);
}
@media (min-width: 1024px){
  .df-hero__media{ aspect-ratio: 4 / 5; max-height: none; }
}
.df-hero__media img{ width: 100%; height: 100%; object-fit: cover; }
.df-hero__media-caption{
  position: absolute;
  left: var(--df-sp-4); right: var(--df-sp-4); bottom: var(--df-sp-4);
  max-width: calc(100% - 2 * var(--df-sp-4));
  background: rgba(251,248,242,0.92);
  padding: 0.6rem 1rem;
  border-radius: var(--df-radius-sm);
  font-size: var(--df-fs-xs);
  color: var(--df-forest);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: fit-content;
}

/* -----------------------------------------------------------
   9. AI ENTRY WIDGET (UI shell only — no logic)
   ----------------------------------------------------------- */
.df-ai-widget{
  background: var(--df-forest);
  color: var(--df-paper);
  border-radius: var(--df-radius-md);
  padding: var(--df-sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--df-sp-6);
  align-items: center;
}
@media (min-width: 900px){
  .df-ai-widget{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: var(--df-sp-7);
    gap: var(--df-sp-7);
  }
}
/*
 * ROOT CAUSE FIX: the previous `flex: 1 1 240px` gave the input a 240px
 * minimum basis. On a 320–360px phone, once the widget's own padding and
 * the container gutter are subtracted, less than 240px of width remains —
 * so the input was mathematically guaranteed to overflow. Stacking the
 * form as a column below 480px and letting the field take min-width:0
 * removes the forced minimum entirely.
 */
.df-ai-widget__form{ display: flex; flex-direction: column; gap: var(--df-sp-3); }
@media (min-width: 480px){
  .df-ai-widget__form{ flex-direction: row; flex-wrap: wrap; }
  .df-ai-widget__form .df-field{ flex: 1 1 200px; }
  .df-ai-widget__form button{ flex: 0 0 auto; }
}
.df-ai-widget__form .df-field{
  background: rgba(251,248,242,0.08);
  border-color: rgba(251,248,242,0.3);
  color: var(--df-paper);
  min-width: 0;
  width: 100%;
}
.df-ai-widget__form .df-field::placeholder{ color: rgba(251,248,242,0.55); }
.df-ai-widget__form button{ width: 100%; }
@media (min-width: 480px){ .df-ai-widget__form button{ width: auto; } }
.df-ai-widget__chips{ display: flex; flex-wrap: wrap; gap: var(--df-sp-2); margin-top: var(--df-sp-4); }
.df-ai-widget__chip{
  font-size: var(--df-fs-xs);
  padding: 0.45rem 0.9rem;
  min-height: 36px;
  border-radius: var(--df-radius-pill);
  border: 1px solid rgba(251,248,242,0.35);
  color: var(--df-paper);
  background: transparent;
}
.df-ai-widget__chip:hover{ background: rgba(251,248,242,0.12); }
.df-ai-widget__result{
  min-height: 96px;
  border: 1px dashed rgba(251,248,242,0.35);
  border-radius: var(--df-radius-md);
  padding: var(--df-sp-4);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: rgba(251,248,242,0.7);
  font-size: var(--df-fs-sm);
}
.df-ai-widget__result[data-state="loading"]::before{
  content: "";
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(251,248,242,0.3);
  border-top-color: var(--df-paper);
  animation: df-spin 800ms linear infinite;
  margin-right: 0.6rem;
}
.df-ai-widget__result[data-state="error"]{
  border-style: solid;
  border-color: var(--df-error);
  color: #E8B8AE;
}
@keyframes df-spin{ to{ transform: rotate(360deg); } }

/* "Why this product?" component — placeholder only */
.df-why-product{
  border: var(--df-border);
  border-radius: var(--df-radius-md);
  padding: var(--df-sp-5);
  background: var(--df-ivory-deep);
}
.df-why-product h4{ margin-bottom: var(--df-sp-3); }
.df-why-product ul{ display: grid; gap: var(--df-sp-2); }
.df-why-product li{ display: flex; gap: 0.6rem; font-size: var(--df-fs-sm); color: var(--df-stone); }
.df-why-product li::before{ content: "✓"; color: var(--df-primary); font-weight: 700; }

/* -----------------------------------------------------------
   10. FIND YOUR SOLUTION / GOAL CARDS
   ----------------------------------------------------------- */
.df-goal-card{
  display: flex;
  flex-direction: column;
  gap: var(--df-sp-3);
  padding: var(--df-sp-5);
  border: var(--df-border);
  transition: border-color var(--df-transition), transform var(--df-transition);
}
@media (hover: hover) and (pointer: fine){
  .df-goal-card:hover{ border-color: var(--df-primary); transform: translateY(-3px); }
}
.df-goal-card:active{ border-color: var(--df-primary); } /* touch feedback equivalent */
.df-goal-card__icon{ width: 40px; height: 40px; color: var(--df-primary); }

/* -----------------------------------------------------------
   11. CATEGORY / PRODUCT CARDS
   ----------------------------------------------------------- */
.df-category-card{ position: relative; overflow: hidden; min-width: 0; }
.df-category-card__media{ aspect-ratio: 3/4; background: var(--df-ivory-deep); overflow: hidden; }
.df-category-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
/* Hover-only interactions must have sensible mobile behavior — scope the
   zoom effect to devices that actually support :hover so touch users never
   depend on it (and never get a "stuck" hover state after a tap). */
@media (hover: hover) and (pointer: fine){
  .df-category-card:hover .df-category-card__media img{ transform: scale(1.04); }
}
.df-category-card__label{ padding-block: var(--df-sp-3); display: flex; justify-content: space-between; align-items: center; gap: var(--df-sp-2); }
.df-category-card__label h4{ min-width: 0; overflow-wrap: break-word; }

.df-product-card{ display: flex; flex-direction: column; min-width: 0; transition: box-shadow var(--df-transition); }
@media (hover: hover) and (pointer: fine){
  .df-product-card:hover{ box-shadow: var(--df-shadow-soft); }
}
.df-product-card__media{ position: relative; aspect-ratio: 1/1; background: var(--df-ivory-deep); overflow: hidden; }
.df-product-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.df-product-card__media .is-hover-image{ position: absolute; inset: 0; opacity: 0; transition: opacity var(--df-transition); }
@media (hover: hover) and (pointer: fine){
  .df-product-card:hover .is-hover-image{ opacity: 1; }
}
.df-product-card__badges{ position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; max-width: calc(100% - 2.6rem); }
.df-product-card__wishlist{
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,248,242,0.9);
  border-radius: 50%;
}
@media (min-width: 640px){
  .df-product-card__badges{ top: 0.6rem; left: 0.6rem; }
  .df-product-card__wishlist{ top: 0.6rem; right: 0.6rem; width: 34px; height: 34px; }
}
.df-product-card__body{ padding: var(--df-sp-3); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; }
@media (min-width: 640px){ .df-product-card__body{ padding: var(--df-sp-4); } }
.df-product-card__rating{ font-size: var(--df-fs-xs); color: var(--df-bronze); }
.df-product-card__category{ font-size: var(--df-fs-xs); color: var(--df-stone); text-transform: uppercase; letter-spacing: 0.04em; }
.df-product-card__title{
  font-family: var(--df-font-display);
  font-size: var(--df-fs-md);
  color: var(--df-forest);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.df-product-card__desc{ font-size: var(--df-fs-xs); color: var(--df-stone); }
.df-product-card__price{ margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.df-product-card__price .is-sale{ color: var(--df-primary); font-weight: 600; }
.df-product-card__price .was-price{ color: var(--df-stone-light); text-decoration: line-through; font-size: var(--df-fs-sm); }
.df-product-card__cta{ margin-top: 0.5rem; width: 100%; }
/*
 * Quick View is a hover-reveal affordance with no equivalent touch
 * gesture — rather than fake a permanently-visible overlay that would
 * crowd a 2-column mobile card, the theme relies on the card's own
 * wrapping link for navigation on touch devices and hides this overlay
 * there entirely (it only ever appears for mouse/trackpad users).
 */
.df-product-card__quickview{ display: none; }
@media (hover: hover) and (pointer: fine){
  .df-product-card__quickview{
    display: block;
    position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem;
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--df-transition), transform var(--df-transition);
  }
  .df-product-card:hover .df-product-card__quickview{ opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------
   12. TRUST / WHY-DRHERBO / QUALITY SECTIONS
   ----------------------------------------------------------- */
.df-pillar{ display: flex; gap: var(--df-sp-4); align-items: flex-start; }
.df-pillar__icon{ width: 44px; height: 44px; flex-shrink: 0; color: var(--df-bronze); }
.df-pillar h4{ margin-bottom: 0.4rem; }
.df-pillar p{ color: var(--df-stone); font-size: var(--df-fs-sm); }

.df-quality-slot{
  border: 1px dashed var(--df-line-dark);
  border-radius: var(--df-radius-md);
  padding: var(--df-sp-5);
  color: var(--df-stone);
  font-size: var(--df-fs-sm);
}

/*
 * From Nature to You — intentional horizontal carousel (this is content
 * that SHOULD scroll sideways, unlike the grids elsewhere). scroll-snap
 * gives each step a clean resting position when swiped; the negative
 * margin + matching padding trick lets the strip bleed to the screen edge
 * while staying inside .df-container's own overflow-safe box (the overflow
 * happens on this inner element, never on <body>). Last card gets trailing
 * padding so it doesn't end flush against the viewport edge.
 */
.df-process{
  display: flex;
  gap: var(--df-sp-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--df-sp-3);
  margin-inline: calc(-1 * var(--df-gutter));
  padding-inline: var(--df-gutter);
  scrollbar-width: thin;
}
.df-process::-webkit-scrollbar{ height: 6px; }
.df-process::-webkit-scrollbar-thumb{ background: rgba(216,195,156,0.35); border-radius: var(--df-radius-pill); }
.df-process__step{ flex: 0 0 220px; scroll-snap-align: start; }
.df-process__step:last-child{ margin-right: var(--df-gutter); }
.df-process__step .step-index{ font-family: var(--df-font-display); font-size: var(--df-fs-lg); color: var(--df-bronze); display: block; margin-bottom: var(--df-sp-2); }

/* -----------------------------------------------------------
   13. KNOWLEDGE / VIDEO
   ----------------------------------------------------------- */
.df-article-card__media{ aspect-ratio: 16/10; background: var(--df-ivory-deep); overflow: hidden; margin-bottom: var(--df-sp-3); }
.df-article-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.df-article-card__meta{ font-size: var(--df-fs-xs); color: var(--df-stone); margin-top: 0.3rem; }

.df-video-card{ position: relative; aspect-ratio: 16/9; background: var(--df-forest); border-radius: var(--df-radius-md); overflow: hidden; }
.df-video-card img{ width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.df-video-card__play{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.df-video-card__play span{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(251,248,242,0.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--df-forest);
}

/* -----------------------------------------------------------
   14. REVIEWS
   ----------------------------------------------------------- */
.df-review-card{ padding: var(--df-sp-5); border: var(--df-border); }
.df-review-card__head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--df-sp-3); }
.df-review-card__stars{ color: var(--df-bronze); font-size: var(--df-fs-sm); }
.df-review-card__body{ color: var(--df-charcoal); font-size: var(--df-fs-sm); }
.df-review-card__foot{ margin-top: var(--df-sp-3); display: flex; justify-content: space-between; font-size: var(--df-fs-xs); color: var(--df-stone); }

/* -----------------------------------------------------------
   15. REWARDS / MEMBERSHIP TEASER
   ----------------------------------------------------------- */
.df-rewards-teaser{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--df-sp-6);
  background: var(--df-ivory-deep);
  padding: var(--df-sp-6);
  align-items: center;
}
@media (min-width: 900px){
  .df-rewards-teaser{ grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--df-sp-7); }
}

/* -----------------------------------------------------------
   16. NEWSLETTER
   ----------------------------------------------------------- */
.df-newsletter{ text-align: center; max-width: 560px; margin-inline: auto; }
.df-newsletter form{ display: flex; flex-direction: column; gap: var(--df-sp-3); margin-top: var(--df-sp-5); }
@media (min-width: 560px){ .df-newsletter form{ flex-direction: row; } }
.df-newsletter form .df-field{ min-width: 0; }

/* -----------------------------------------------------------
   17. FOOTER
   ----------------------------------------------------------- */
.df-footer{ background: var(--df-forest-deep); color: var(--df-bronze-soft); padding-block: var(--df-sp-8) var(--df-sp-6); }
/*
 * Mobile-first: single column stack on phones (accordion-ready — the
 * `<details>`/`<summary>` treatment below activates automatically at the
 * same breakpoint if a plugin/child theme swaps the <h4> for a <summary>;
 * the theme itself keeps footer content always-visible for accessibility,
 * per WCAG guidance against hiding primary navigation behind extra taps by
 * default). 2 columns at tablet, full 5-column layout at desktop.
 */
.df-footer__top{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--df-sp-7); }
@media (min-width: 640px){
  .df-footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--df-sp-6); }
}
@media (min-width: 1024px){
  .df-footer__top{ grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
}
.df-footer h4{ color: var(--df-paper); font-size: var(--df-fs-sm); margin-bottom: var(--df-sp-3); }
.df-footer a{ color: var(--df-bronze-soft); font-size: var(--df-fs-sm); opacity: 0.85; display: inline-block; padding: 0.2rem 0; }
.df-footer a:hover{ opacity: 1; text-decoration: underline; }
.df-footer li{ margin-bottom: 0.3rem; }
.df-footer__brand p{ color: var(--df-bronze-soft); font-size: var(--df-fs-sm); max-width: 32ch; margin-top: var(--df-sp-3); }
.df-footer__social{ display: flex; flex-wrap: wrap; gap: var(--df-sp-3); margin-top: var(--df-sp-4); }
.df-footer__bottom{
  border-top: 1px solid rgba(216,195,156,0.2);
  margin-top: var(--df-sp-7);
  padding-top: var(--df-sp-5);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--df-sp-3);
  font-size: var(--df-fs-xs);
}

/* -----------------------------------------------------------
   18. PRODUCT PAGE FOUNDATION
   ----------------------------------------------------------- */
.df-product-page{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--df-sp-6); }
@media (min-width: 960px){
  .df-product-page{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--df-sp-8); }
}

.df-product-gallery__main{ aspect-ratio: 1/1; background: var(--df-ivory-deep); overflow: hidden; margin-bottom: var(--df-sp-3); }
.df-product-gallery__main img{ width: 100%; height: 100%; object-fit: cover; }
/*
 * ROOT CAUSE FIX: fixed 72px thumbnails in a non-wrapping flex row overflow
 * as soon as (thumb count × 72px + gaps) exceeds the available width — on a
 * 320px phone that's as few as 3 thumbnails. Making the row its own
 * horizontal scroller (flex-shrink:0 on the thumbs so they keep their
 * size and just scroll instead of squashing or overflowing) contains the
 * overflow locally instead of pushing the whole page wider.
 */
.df-product-gallery__thumbs{
  display: flex;
  gap: var(--df-sp-2);
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
}
.df-product-gallery__thumbs img{
  width: 64px; height: 64px;
  flex-shrink: 0;
  scroll-snap-align: start;
  object-fit: cover;
  border: 1px solid var(--df-line);
  cursor: pointer;
}
@media (min-width: 640px){ .df-product-gallery__thumbs img{ width: 72px; height: 72px; } }
.df-product-gallery__thumbs img.is-active{ border-color: var(--df-primary); }

.df-product-summary__title{ margin-bottom: var(--df-sp-2); }
.df-product-summary__meta{ display: flex; flex-wrap: wrap; gap: var(--df-sp-4); align-items: center; margin-bottom: var(--df-sp-4); }
.df-product-summary__price{ font-family: var(--df-font-display); font-size: var(--df-fs-2xl); color: var(--df-forest); margin-bottom: var(--df-sp-5); overflow-wrap: break-word; }
.df-product-summary__price .was-price{ font-size: var(--df-fs-md); color: var(--df-stone-light); text-decoration: line-through; margin-right: 0.6rem; }
.df-qty-cart{ display: flex; gap: var(--df-sp-3); align-items: stretch; margin-bottom: var(--df-sp-4); flex-wrap: wrap; }
.df-qty{ display: inline-flex; align-items: center; border: 1px solid var(--df-line); flex-shrink: 0; }
.df-qty button{ width: 40px; height: 48px; background: none; border: none; font-size: var(--df-fs-md); }
.df-qty input{ width: 44px; text-align: center; border: none; font-size: var(--df-fs-sm); }
/* Add to Cart / Buy Now: side-by-side once there's room, full-width stack
   below 420px via the shared rule in section 4 (BUTTONS). */
.df-product-summary__ctas{ display: flex; gap: var(--df-sp-3); flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
.df-product-summary__ctas .df-btn{ flex: 1 1 140px; }

.df-verify-slot{
  display: flex; align-items: center; gap: var(--df-sp-3);
  padding: var(--df-sp-4);
  border: 1px dashed var(--df-bronze);
  border-radius: var(--df-radius-md);
  margin-bottom: var(--df-sp-5);
  font-size: var(--df-fs-sm);
}

.df-tabs__list{ display: flex; gap: var(--df-sp-5); border-bottom: 1px solid var(--df-line); flex-wrap: wrap; }
.df-tabs__tab{ padding-block: var(--df-sp-3); font-size: var(--df-fs-sm); color: var(--df-stone); border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: none; border-left: none; border-right: none; }
.df-tabs__tab[aria-selected="true"]{ color: var(--df-forest); border-bottom-color: var(--df-primary); }
.df-tabs__panel{ padding-block: var(--df-sp-5); font-size: var(--df-fs-sm); color: var(--df-charcoal); }
.df-tabs__panel[hidden]{ display: none; }

.df-faq__item{ border-bottom: 1px solid var(--df-line); }
.df-faq__question{
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  padding-block: var(--df-sp-4);
  background: none; border: none;
  font-family: var(--df-font-display); font-size: var(--df-fs-md); color: var(--df-forest);
}
.df-faq__answer{ padding-bottom: var(--df-sp-4); color: var(--df-stone); font-size: var(--df-fs-sm); display: none; }
.df-faq__item.is-open .df-faq__answer{ display: block; }
.df-faq__item.is-open .df-faq__icon{ transform: rotate(45deg); }
.df-faq__icon{ transition: transform var(--df-transition); }

/* -----------------------------------------------------------
   19. VERIFY LANDING SLOT (marketing entry only)
   ----------------------------------------------------------- */
.df-verify-hero{
  text-align: center;
  padding-block: var(--df-sp-9);
  background: var(--df-forest);
  color: var(--df-paper);
}
.df-verify-hero form{
  display: flex;
  flex-direction: column;
  gap: var(--df-sp-3);
  max-width: 480px;
  margin: var(--df-sp-6) auto 0;
}
@media (min-width: 480px){ .df-verify-hero form{ flex-direction: row; } }
.df-verify-hero form .df-field{ min-width: 0; }

/* -----------------------------------------------------------
   20. WOOCOMMERCE BASE COMPATIBILITY
   ----------------------------------------------------------- */
/* Mobile-first, matching .df-grid--4's card-grid strategy: 2-up on phones,
   3-up on tablet, 4-up on desktop. minmax(0,1fr) prevents a long product
   title from blowing out the grid track (see the note in section 3). */
.woocommerce ul.products{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--df-sp-5); list-style: none; }
@media (min-width: 700px){ .woocommerce ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .woocommerce ul.products{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.woocommerce ul.products li.product{ list-style: none; min-width: 0; }
.woocommerce span.onsale{
  position: static;
  display: inline-flex;
  background: var(--df-primary); color: var(--df-paper);
  font-size: var(--df-fs-xs); padding: 0.3rem 0.6rem; border-radius: var(--df-radius-pill);
}
.woocommerce-message, .woocommerce-error, .woocommerce-info{
  border: 1px solid var(--df-line);
  border-left: 3px solid var(--df-primary);
  padding: var(--df-sp-4);
  background: var(--df-paper);
  list-style: none;
  font-size: var(--df-fs-sm);
}
.woocommerce-error{ border-left-color: var(--df-error); }
.woocommerce-breadcrumb{ font-size: var(--df-fs-xs); color: var(--df-stone); margin-bottom: var(--df-sp-5); }
.woocommerce-breadcrumb a{ color: var(--df-stone); }

/* -----------------------------------------------------------
   21. GENERIC ARCHIVE / SINGLE / 404 / SEARCH
   ----------------------------------------------------------- */
.df-page-header{ padding-block: var(--df-sp-7); border-bottom: 1px solid var(--df-line); margin-bottom: var(--df-sp-7); }
.df-breadcrumbs{ font-size: var(--df-fs-xs); color: var(--df-stone); margin-bottom: var(--df-sp-3); }
.df-breadcrumbs a{ color: var(--df-stone); }
.df-breadcrumbs span[aria-current]{ color: var(--df-forest); }
.df-entry{ max-width: 720px; margin-inline: auto; font-size: var(--df-fs-md); line-height: var(--df-lh-normal); }
.df-entry img{ border-radius: var(--df-radius-md); }
.df-404{ text-align: center; padding-block: var(--df-sp-10); }

/* -----------------------------------------------------------
   22. PHASE 3 — MINI-CART
   ----------------------------------------------------------- */
.df-mini-cart{
  position: fixed;
  z-index: 1000;
  background: var(--df-paper);
  border: 1px solid var(--df-line);
  box-shadow: var(--df-shadow-lift);
  overflow-y: auto;
}
/* Phone: full-width bottom sheet (mini-cart JS falls through to normal
   link navigation below 480px anyway — see mini-cart.js — this covers the
   rare case of it still being toggled open, e.g. via keyboard). */
.df-mini-cart{
  inset: auto 0 0 0;
  max-height: 80vh;
  border-radius: var(--df-radius-md) var(--df-radius-md) 0 0;
}
@media (min-width: 480px){
  .df-mini-cart{
    inset: auto var(--df-gutter) auto auto;
    top: calc(var(--df-header-height) + 8px);
    width: min(380px, calc(100vw - 2 * var(--df-gutter)));
    max-height: min(70vh, 560px);
    border-radius: var(--df-radius-md);
  }
}
.df-mini-cart__inner{ padding: var(--df-sp-5); }
.df-mini-cart .woocommerce-mini-cart{ display: grid; gap: var(--df-sp-4); }
.df-mini-cart .woocommerce-mini-cart-item{
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) auto;
  gap: var(--df-sp-3);
  align-items: center;
  position: relative;
  padding-bottom: var(--df-sp-3);
  border-bottom: 1px solid var(--df-line);
}
.df-mini-cart .woocommerce-mini-cart-item img{ width: 56px; height: 56px; object-fit: cover; border-radius: var(--df-radius-sm); }
.df-mini-cart .woocommerce-mini-cart-item a.remove{
  position: absolute; top: 0; right: 0;
  color: var(--df-stone); font-size: 18px; line-height: 1;
}
.df-mini-cart .quantity{ font-size: var(--df-fs-xs); color: var(--df-stone); display: block; }
.df-mini-cart .total{ font-weight: 600; padding-top: var(--df-sp-3); border-top: 1px solid var(--df-line); }
.df-mini-cart .woocommerce-mini-cart__buttons{ display: flex; flex-direction: column; gap: var(--df-sp-3); margin-top: var(--df-sp-4); }
.df-mini-cart .woocommerce-mini-cart__empty-message{ color: var(--df-stone); font-size: var(--df-fs-sm); text-align: center; padding-block: var(--df-sp-5); }

/* -----------------------------------------------------------
   23. PHASE 3 — SHOP FILTER DRAWER
   ----------------------------------------------------------- */
.df-shop-filter-trigger{ margin-bottom: var(--df-sp-5); }
.df-filter-drawer{
  position: fixed;
  inset: 0;
  z-index: 950;
  background: var(--df-ivory);
  overflow-y: auto;
  padding: var(--df-sp-5) var(--df-gutter);
}
@media (min-width: 900px){
  .df-filter-drawer{
    inset: auto 0 0 auto;
    top: 0;
    width: min(360px, 90vw);
    border-left: 1px solid var(--df-line);
    box-shadow: var(--df-shadow-lift);
  }
}
.df-filter-drawer__head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--df-sp-5); }
.df-filter-drawer__close{ background: none; border: none; font-size: 28px; line-height: 1; width: 40px; height: 40px; }
.df-shop-filter-widget{ margin-bottom: var(--df-sp-6); }
.df-shop-filter-widget h4{ margin-bottom: var(--df-sp-3); }
.df-shop-filter-widget ul{ display: grid; gap: 0.5rem; }
.df-shop-filter-widget .price_slider_wrapper{ margin-top: var(--df-sp-3); }

/* -----------------------------------------------------------
   24. PHASE 3 — PRODUCT EDUCATION (Benefits / Trust)
   ----------------------------------------------------------- */
.df-benefits{ max-width: var(--df-container-narrow); }
.df-benefits__block{ margin-bottom: var(--df-sp-5); }
.df-benefits__block .df-badge{ margin-bottom: var(--df-sp-3); }
.df-benefits__block p{ color: var(--df-charcoal); font-size: var(--df-fs-sm); }

/* -----------------------------------------------------------
   25. PHASE 3 — CART / CHECKOUT (native WooCommerce classes)
   ----------------------------------------------------------- */
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--df-fs-sm);
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{
  padding: var(--df-sp-3);
  border-bottom: 1px solid var(--df-line);
  text-align: left;
}
.woocommerce-cart table.cart img{ width: 64px; height: 64px; object-fit: cover; border-radius: var(--df-radius-sm); }
.woocommerce-cart .quantity input.qty,
.woocommerce-checkout .quantity input.qty{
  width: 64px;
  padding: 0.6rem;
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius-sm);
  min-height: 44px;
}
.woocommerce-cart .coupon{ display: flex; flex-wrap: wrap; gap: var(--df-sp-3); align-items: center; }
.woocommerce-cart .coupon .input-text{ min-width: 0; flex: 1 1 200px; }
.woocommerce-cart .cart_totals{
  margin-top: var(--df-sp-7);
  max-width: 420px;
  margin-inline-start: auto;
}
.woocommerce-cart .cart_totals table{ width: 100%; }
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td{ padding: var(--df-sp-3); border-bottom: 1px solid var(--df-line); }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{
  display: flex; width: 100%; margin-top: var(--df-sp-4);
}
@media (max-width: 700px){
  .woocommerce-cart table.cart thead{ display: none; }
  .woocommerce-cart table.cart tr{ display: grid; grid-template-columns: 64px minmax(0,1fr); gap: var(--df-sp-3); padding-block: var(--df-sp-3); }
  .woocommerce-cart table.cart td{ border: none; padding: 0; }
  .woocommerce-cart table.cart td.product-remove{ grid-column: 1 / -1; order: 3; text-align: right; }
}

.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details{ display: grid; grid-template-columns: minmax(0,1fr); gap: var(--df-sp-6); }
@media (min-width: 900px){
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout #customer_details{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.woocommerce-checkout .form-row label{ display: block; font-size: var(--df-fs-sm); color: var(--df-forest); margin-bottom: 0.4rem; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea{
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius-sm);
  background: var(--df-paper);
  min-height: 48px;
}
.woocommerce-checkout #order_review{
  background: var(--df-ivory-deep);
  padding: var(--df-sp-5);
  border-radius: var(--df-radius-md);
  margin-top: var(--df-sp-6);
}
@media (min-width: 900px){ .woocommerce-checkout #order_review{ margin-top: 0; } }
.woocommerce-checkout #payment{ background: var(--df-paper); border: 1px solid var(--df-line); border-radius: var(--df-radius-md); padding: var(--df-sp-4); margin-top: var(--df-sp-4); }
.woocommerce-checkout #place_order{ width: 100%; margin-top: var(--df-sp-4); }