/**
 * Site surfaces that are not Elementor documents.
 *
 * Catalogue archives, ingredient pages, editorial pages (industries, trust pages,
 * Insights) and forms. Maps WooCommerce, Woostify and Contact Form 7 output onto the
 * design system, and styles the surfaces the Phase 2A/2B structural work left
 * unstyled: the page header, breadcrumbs, the specification block and the RFQ.
 *
 * The Elementor-specific adapter lives in elementor-bridge.css; the tokens and
 * components themselves live in design-system.css.
 */

/* ---------------------------------------------------------------------------
   Page header and breadcrumbs (rendered by the child theme on every template)
   --------------------------------------------------------------------------- */

body.mh .myherb-breadcrumbs {
  font-size: var(--mh-text-xs);
  color: var(--mh-text-muted);
  margin: 0;
  padding-block: var(--mh-space-6) var(--mh-space-2);
  opacity: 1;
}
body.mh .myherb-breadcrumbs a { color: var(--mh-text-secondary); text-decoration: none; }
body.mh .myherb-breadcrumbs a:hover { color: var(--mh-cedar); text-decoration: underline; }
body.mh .myherb-breadcrumbs .separator { margin-inline: var(--mh-space-2); color: var(--mh-border-strong); }
body.mh .myherb-breadcrumbs .last { color: var(--mh-text); font-weight: var(--mh-weight-medium); }

body.mh .myherb-page-header { margin: 0 0 var(--mh-space-6); }
body.mh .myherb-page-title {
  font-family: var(--mh-font-display);
  font-size: var(--mh-text-3xl);
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-tight);
  letter-spacing: var(--mh-tracking-display);
  margin: 0;
}

/* The archive description is the family's commercial introduction. */
body.mh .term-description,
body.mh .woocommerce-product-details__short-description {
  max-width: 42rem;
  font-size: var(--mh-text-lg);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-text-secondary);
}
body.mh .term-description p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Catalogue grid
   --------------------------------------------------------------------------- */

body.mh ul.products.myherb-catalogue {
  list-style: none;
  margin: var(--mh-space-10) 0 0;
  padding: 0;
}
body.mh ul.products.myherb-catalogue::before,
body.mh ul.products.myherb-catalogue::after { content: none; }

/* WooCommerce and Woostify both float/size loop items; the grid owns layout now. */
body.mh ul.products.myherb-catalogue > li.product {
  width: auto;
  margin: 0;
  float: none;
  clear: none;
}

body.mh .myherb-ingredient .mh-card__title { font-size: var(--mh-text-xl); }
body.mh .myherb-ingredient .mh-card__foot .mh-link-arrow { pointer-events: none; }

/* Retail residue that must never appear in a quote-only catalogue. */
body.mh .myherb-catalogue .price,
body.mh .myherb-catalogue .star-rating,
body.mh .myherb-catalogue .onsale,
body.mh .myherb-catalogue .add_to_cart_button { display: none !important; }

/* ---------------------------------------------------------------------------
   Empty family
   --------------------------------------------------------------------------- */

body.mh .myherb-empty {
  max-width: 42rem;
  margin-top: var(--mh-space-10);
  padding: var(--mh-space-8);
  background-color: var(--mh-bg-subtle);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
}
body.mh .myherb-empty__lead {
  font-size: var(--mh-text-lg);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-text-secondary);
  margin: 0 0 var(--mh-space-6);
}
body.mh .myherb-empty p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Hub sections below an archive
   --------------------------------------------------------------------------- */

body.mh .myherb-hub { margin-top: var(--mh-space-16); border-top: 1px solid var(--mh-border); }
body.mh .myherb-hub__links { margin-top: var(--mh-space-10); }
body.mh .myherb-hub-cta { margin-top: 0; }

/* The archive templates render inside the theme's content wrapper, so full-bleed bands
   have to break out of it. */
body.mh .myherb-hub-cta {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---------------------------------------------------------------------------
   Specification block on a single ingredient
   --------------------------------------------------------------------------- */

body.mh .myherb-spec { margin-block: var(--mh-space-10); }
body.mh .myherb-spec__heading {
  font-family: var(--mh-font-display);
  font-size: var(--mh-text-2xl);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-display);
  margin: 0 0 var(--mh-space-5);
}
body.mh .myherb-spec__tablewrap {
  overflow-x: auto;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
  background-color: var(--mh-white);
}
body.mh .myherb-spec__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mh-text-sm);
  font-variant-numeric: tabular-nums;
}
body.mh .myherb-spec__table th,
body.mh .myherb-spec__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--mh-space-4) var(--mh-space-5);
  border-bottom: 1px solid var(--mh-border);
}
body.mh .myherb-spec__table tr:last-child th,
body.mh .myherb-spec__table tr:last-child td { border-bottom: 0; }
body.mh .myherb-spec__table th {
  width: 38%;
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-text-secondary);
  background-color: var(--mh-limestone);
}
body.mh .myherb-spec__table td { color: var(--mh-text); font-weight: var(--mh-weight-medium); }

body.mh .myherb-spec__section { margin-top: var(--mh-space-8); max-width: 42rem; }
body.mh .myherb-spec__section h3 {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-base);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-clay-700);
  margin: 0 0 var(--mh-space-2);
}

@media (max-width: 560px) {
  body.mh .myherb-spec__table th,
  body.mh .myherb-spec__table td { display: block; width: auto; }
  body.mh .myherb-spec__table th {
    border-bottom: 0;
    padding-bottom: var(--mh-space-1);
    font-size: var(--mh-text-xs);
    letter-spacing: var(--mh-tracking-label);
    text-transform: uppercase;
  }
  body.mh .myherb-spec__table td { padding-top: 0; }
}

/* ---------------------------------------------------------------------------
   RFQ actions on a single ingredient
   --------------------------------------------------------------------------- */

body.mh .myherb-rfq-actions { gap: var(--mh-space-3); margin-block: var(--mh-space-8); }
body.mh .myherb-rfq-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--mh-space-3) var(--mh-space-6);
  border: 1px solid var(--mh-cedar);
  border-radius: var(--mh-radius-md);
  background-color: var(--mh-cedar);
  color: var(--mh-white);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  text-decoration: none;
}
body.mh .myherb-rfq-actions .button:hover {
  background-color: var(--mh-cedar-700);
  border-color: var(--mh-cedar-700);
  color: var(--mh-white);
}
body.mh .myherb-rfq-actions .button + .button {
  background-color: transparent;
  color: var(--mh-cedar);
}
body.mh .myherb-rfq-actions .button + .button:hover {
  background-color: var(--mh-cedar-050);
  color: var(--mh-cedar-700);
}

/* ---------------------------------------------------------------------------
   Button component vs theme button styles.

   Woostify and WooCommerce both style `.button` and `a.button` with selectors that
   outrank a single `.mh-btn--primary` class, which left the primary button rendering
   its label in the theme's colour on our cedar fill — invisible. Restating the three
   ranks at `body.mh a.mh-btn` settles it without !important.
   --------------------------------------------------------------------------- */

body.mh a.mh-btn,
body.mh button.mh-btn,
body.mh input.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mh-space-2);
  min-height: 44px;
  padding: var(--mh-space-3) var(--mh-space-6);
  border: 1px solid transparent;
  border-radius: var(--mh-radius-md);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.01em;
}

body.mh a.mh-btn--primary,
body.mh button.mh-btn--primary {
  background-color: var(--mh-cedar);
  border-color: var(--mh-cedar);
  color: var(--mh-white);
}
body.mh a.mh-btn--primary:hover,
body.mh a.mh-btn--primary:focus-visible,
body.mh button.mh-btn--primary:hover {
  background-color: var(--mh-cedar-700);
  border-color: var(--mh-cedar-700);
  color: var(--mh-white);
}

body.mh a.mh-btn--secondary,
body.mh button.mh-btn--secondary {
  background-color: transparent;
  border-color: var(--mh-cedar);
  color: var(--mh-cedar);
}
body.mh a.mh-btn--secondary:hover,
body.mh a.mh-btn--secondary:focus-visible,
body.mh button.mh-btn--secondary:hover {
  background-color: var(--mh-cedar-050);
  border-color: var(--mh-cedar-700);
  color: var(--mh-cedar-700);
}

body.mh .mh-section--invert a.mh-btn--primary {
  background-color: var(--mh-white);
  border-color: var(--mh-white);
  color: var(--mh-cedar-900);
}
body.mh .mh-section--invert a.mh-btn--primary:hover {
  background-color: var(--mh-cedar-050);
  border-color: var(--mh-cedar-050);
  color: var(--mh-cedar-900);
}
body.mh .mh-section--invert a.mh-btn--secondary {
  border-color: var(--mh-cedar-300);
  color: var(--mh-white);
}
body.mh .mh-section--invert a.mh-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--mh-white);
  color: var(--mh-white);
}

/* Table sits flush inside its rounded wrapper (themes commonly add table margins). */
body.mh .myherb-spec__tablewrap { overflow: hidden; overflow-x: auto; }
body.mh .myherb-spec__table { margin: 0; }

/* Botanical name under the ingredient H1. */
body.mh .myherb-botanical {
  font-size: var(--mh-text-lg);
  color: var(--mh-text-muted);
  margin: 0 0 var(--mh-space-5);
}

/* Product meta (category) rendered as a quiet line rather than shop furniture. */
body.mh .product_meta {
  font-size: var(--mh-text-sm);
  color: var(--mh-text-muted);
  border-top: 1px solid var(--mh-border);
  padding-top: var(--mh-space-5);
  margin-top: var(--mh-space-6);
}
body.mh .product_meta a { color: var(--mh-cedar); }

body.mh .myherb-related { margin-top: var(--mh-space-12); }
body.mh .myherb-related .mh-container { padding-inline: 0; }
body.mh .myherb-hub .mh-container { padding-inline: 0; }

/* Ingredient summary column: keep the reading measure sane next to the gallery. */
body.mh .single-product div.product .summary { max-width: 42rem; }
body.mh .single-product div.product .entry-title,
body.mh .single-product div.product .product_title {
  font-family: var(--mh-font-display);
  font-size: var(--mh-text-3xl);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-display);
  line-height: var(--mh-leading-tight);
  margin: 0 0 var(--mh-space-2);
}

/* WooCommerce tab chrome, restrained. */
body.mh .woocommerce-tabs { margin-top: var(--mh-space-12); }
body.mh .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--mh-border); padding: 0; }
body.mh .woocommerce-tabs ul.tabs li a {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-text-secondary);
}
body.mh .woocommerce-tabs .panel { max-width: 42rem; color: var(--mh-text-secondary); }
body.mh .woocommerce-tabs .panel h2 {
  font-size: var(--mh-text-xl);
  margin-top: var(--mh-space-8);
}

/* Reveal the product description panel.

   Woostify hides every tab panel (style.css: `.woocommerce-tabs .woocommerce-Tabs-panel
   { display: none }`) and relies on WooCommerce's `wc-single-product` script to show the
   active one. That script is dequeued in woostify_child_dequeue_retail_scripts(), because
   the same file also drives add-to-cart, variation and quantity behaviour that a quote-only
   catalogue has no use for. Nothing was visibly wrong while the ingredient descriptions were
   empty. Once all 27 gained long copy the tab appeared, the panel stayed hidden, and the
   description sat in the HTML unreadable — the tab label with nothing beneath it.

   Only the panel is unhidden here. The tab strip stays, because it *is* the "DESCRIPTION"
   heading: Woostify hides the panel's own <h2> (style.css `.woocommerce-Tabs-panel >
   h2:first-child`) precisely so the two do not both show. Hiding the strip instead would
   leave the description with no heading at all.

   There is no empty-state to guard. Reviews are removed by MyHerb_B2B_Mode, Additional
   information by woostify_child_remove_product_tabs(), and that same filter unsets
   Description when post_content is empty — so with no copy WooCommerce prints no strip and
   no panel, and the section collapses entirely rather than leaving a blank gap.

   Specificity beats the parent rule regardless of load order: three classes plus an element
   against the parent's two classes. */
body.mh .woocommerce-tabs .woocommerce-Tabs-panel { display: block; }

/* Woostify centres the tab strip and auto-centres the panel (style.css: `.tabs
   { text-align: center }`, panel `margin-left/right: auto`). That suits a centred tab UI;
   this page is left-aligned throughout, and with the panel finally visible the centring
   left the description sitting ~290px right of every other section with an empty gutter
   beside it. Aligned to the same edge as the specification table and Related ingredients. */
body.mh .woocommerce-tabs ul.tabs { text-align: left; }
body.mh .woocommerce-tabs ul.tabs li { margin-left: 0; }
body.mh .woocommerce-tabs .woocommerce-Tabs-panel { margin-left: 0; margin-right: 0; }

/* ===========================================================================
   Editorial pages — industries, trust pages, Insights articles.

   These are written as post_content rather than Elementor documents: they are prose
   with a few dynamic blocks, and keeping them out of the builder avoids loading its
   CSS and JS on nine more pages for no editing benefit. The trade-off is that their
   layout comes from here rather than from per-page settings.
   =========================================================================== */

/* Woostify renders page content directly inside <article> with no .entry-content
   wrapper, so the measure is applied to the article's own children. */
body.mh.myherb-content .site-main > article > p,
body.mh.myherb-content .site-main > article > ul,
body.mh.myherb-content .site-main > article > ol,
body.mh.myherb-content .site-main > article > h2,
body.mh.myherb-content .site-main > article > h3,
body.mh.myherb-content .site-main > article > blockquote,
body.mh.myherb-content .site-main > article > table,
body.mh.myherb-content .site-main > article > .entry-content > p,
body.mh.myherb-content .site-main > article > .entry-content > ul,
body.mh.myherb-content .site-main > article > .entry-content > ol,
body.mh.myherb-content .site-main > article > .entry-content > h2,
body.mh.myherb-content .site-main > article > .entry-content > h3 { max-width: 42rem; }

body.mh.myherb-content .site-main > article > * + * { margin-top: var(--mh-space-5); }

body.mh.myherb-content .site-main > article > h2,
body.mh.myherb-content .site-main .mh-section__title {
  font-family: var(--mh-font-display);
  font-size: var(--mh-text-2xl);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-display);
  line-height: var(--mh-leading-tight);
  margin-top: var(--mh-space-12);
  margin-bottom: var(--mh-space-4);
}
/* Prose subheadings only. Card and step titles inside embedded blocks keep the
   component's own type, so this must not reach them. */
body.mh.myherb-content .site-main > article h3:not(.mh-card__title):not(.mh-step__title) {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-lg);
  font-weight: var(--mh-weight-semibold);
  margin-top: var(--mh-space-8);
  margin-bottom: var(--mh-space-2);
}

body.mh.myherb-content .site-main > article > p,
body.mh.myherb-content .site-main > article > ul li,
body.mh.myherb-content .site-main > article > ol li { color: var(--mh-text-secondary); }

body.mh.myherb-content .site-main > article > p.mh-lead {
  font-size: var(--mh-text-lg);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-text-secondary);
  margin-bottom: var(--mh-space-10);
}

body.mh.myherb-content .site-main > article ul,
body.mh.myherb-content .site-main > article ol { padding-inline-start: var(--mh-space-6); }
body.mh.myherb-content .site-main > article li + li { margin-top: var(--mh-space-3); }
body.mh.myherb-content .site-main > article li strong,
body.mh.myherb-content .site-main > article p strong { color: var(--mh-text); }

body.mh.myherb-content .site-main > article a { color: var(--mh-cedar); text-underline-offset: 0.18em; }
body.mh.myherb-content .site-main > article a:hover { color: var(--mh-clay-700); }

/* Dynamic blocks embedded in prose keep the full column width and get room. */
body.mh.myherb-content .site-main > article .mh-grid,
body.mh.myherb-content .site-main > article .mh-steps {
  margin-top: var(--mh-space-8);
  margin-bottom: var(--mh-space-8);
  max-width: none;
}

body.mh.myherb-content .myherb-block__more { margin-top: var(--mh-space-6); }

/* The hub sections below an editorial page sit inside the theme container already. */
body.mh.myherb-content .myherb-hub .mh-container,
body.mh.myherb-content .myherb-hub-cta .mh-container { padding-inline: 0; }

/* ===========================================================================
   FORMS — Contact Form 7

   CF7 emits its own control classes (.wpcf7-text, .wpcf7-textarea, …) rather than the
   design system's, so the field component is applied to those instead. The markup
   itself carries .mh-field / .mh-label / .mh-hint from the form definition.
   =========================================================================== */

body.mh .wpcf7 { max-width: 46rem; }

body.mh .mh-fieldset {
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
  padding: var(--mh-space-6) var(--mh-space-6) var(--mh-space-2);
  margin: 0 0 var(--mh-space-8);
  min-inline-size: 0; /* fieldsets otherwise refuse to shrink inside a grid */
}

body.mh .mh-fieldset > legend {
  padding-inline: var(--mh-space-3);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-xs);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-clay-700);
}

body.mh .mh-form-grid { display: grid; gap: 0 var(--mh-space-5); }
@media (min-width: 720px) {
  body.mh .mh-form-grid--2 { grid-template-columns: 1fr 1fr; }
  body.mh .mh-form-grid .mh-field--full { grid-column: 1 / -1; }
}

body.mh .mh-field { margin: 0 0 var(--mh-space-5); }

body.mh .mh-label {
  display: block;
  margin-bottom: var(--mh-space-2);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-text);
}
body.mh .mh-label .mh-req { color: var(--mh-clay-700); margin-inline-start: 2px; }
body.mh .mh-label .mh-optional {
  font-weight: var(--mh-weight-regular);
  color: var(--mh-text-muted);
  margin-inline-start: var(--mh-space-2);
  text-transform: none;
  letter-spacing: 0;
}

body.mh .mh-hint {
  display: block;
  margin-top: var(--mh-space-2);
  font-size: var(--mh-text-xs);
  line-height: var(--mh-leading-normal);
  color: var(--mh-text-muted);
}
body.mh .mh-hint--block { margin-bottom: var(--mh-space-5); }

body.mh .wpcf7-form-control-wrap { display: block; }

body.mh .wpcf7 input[type="text"],
body.mh .wpcf7 input[type="email"],
body.mh .wpcf7 input[type="tel"],
body.mh .wpcf7 input[type="date"],
body.mh .wpcf7 select,
body.mh .wpcf7 textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--mh-space-3) var(--mh-space-4);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-base);
  line-height: var(--mh-leading-normal);
  color: var(--mh-text);
  background-color: var(--mh-white);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-radius-md);
  transition: border-color var(--mh-dur) var(--mh-ease), box-shadow var(--mh-dur) var(--mh-ease);
}

body.mh .wpcf7 textarea { min-height: 9rem; resize: vertical; }

body.mh .wpcf7 input:hover,
body.mh .wpcf7 select:hover,
body.mh .wpcf7 textarea:hover { border-color: var(--mh-ink-soft); }

body.mh .wpcf7 input:focus,
body.mh .wpcf7 select:focus,
body.mh .wpcf7 textarea:focus {
  border-color: var(--mh-cedar);
  box-shadow: 0 0 0 3px var(--mh-cedar-050);
  outline-offset: 1px;
}

/* Checkbox group: real targets, not 12px squares. */
body.mh .mh-checkboxes .wpcf7-checkbox { display: grid; gap: var(--mh-space-3); }
body.mh .mh-checkboxes .wpcf7-list-item { margin: 0; display: block; }
body.mh .mh-checkboxes .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-space-3);
  min-height: 44px;
  padding: var(--mh-space-2) 0;
  font-size: var(--mh-text-sm);
  color: var(--mh-text-secondary);
  cursor: pointer;
}
body.mh .mh-checkboxes input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px var(--mh-space-3) 0 0;
  accent-color: var(--mh-cedar);
  flex: 0 0 auto;
}
/* CF7 wraps the visible text in its own span, which the flex gap does not reach
   consistently across browsers — the margin above is what actually separates them. */
body.mh .mh-checkboxes .wpcf7-list-item-label { display: inline-block; }

/* --- Validation -----------------------------------------------------------
   Errors are never signalled by colour alone: the field border changes, the message
   carries a warning glyph, and CF7's own aria-invalid / aria-describedby wiring
   announces it. */

body.mh .wpcf7 [aria-invalid="true"] { border-color: var(--mh-clay-700); }

body.mh .wpcf7-not-valid-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-space-2);
  margin-top: var(--mh-space-2);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-medium);
  color: var(--mh-clay-700);
}
body.mh .wpcf7-not-valid-tip::before { content: "\26A0"; flex: 0 0 auto; }

body.mh .wpcf7-response-output {
  margin: var(--mh-space-6) 0 0;
  padding: var(--mh-space-4) var(--mh-space-5);
  border: 1px solid var(--mh-border-strong);
  border-left-width: 4px;
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
  background-color: var(--mh-bg-subtle);
  color: var(--mh-text);
}
body.mh .wpcf7 form.invalid .wpcf7-response-output,
body.mh .wpcf7 form.unaccepted .wpcf7-response-output,
body.mh .wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--mh-clay-700); }
body.mh .wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--mh-cedar); }

/* --- Submit --------------------------------------------------------------- */

body.mh .mh-form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mh-space-3);
  margin-top: var(--mh-space-8);
}

body.mh .wpcf7 input[type="submit"] {
  min-height: 48px;
  padding: var(--mh-space-3) var(--mh-space-8);
  border: 1px solid var(--mh-cedar);
  border-radius: var(--mh-radius-md);
  background-color: var(--mh-cedar);
  color: var(--mh-white);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--mh-dur) var(--mh-ease);
  width: auto;
}
body.mh .wpcf7 input[type="submit"]:hover {
  background-color: var(--mh-cedar-700);
  border-color: var(--mh-cedar-700);
}

@media (max-width: 480px) {
  body.mh .wpcf7 input[type="submit"] { width: 100%; }
  body.mh .mh-fieldset { padding-inline: var(--mh-space-4); }
}

/* CF7's spinner sits inline and must not shift the layout. */
body.mh .wpcf7-spinner { margin-inline-start: var(--mh-space-3); }

/* ---------------------------------------------------------------------------
   Contact page
   --------------------------------------------------------------------------- */

body.mh .myherb-contact-grid { display: grid; gap: var(--mh-space-12); align-items: start; }
@media (min-width: 900px) {
  body.mh .myherb-contact-grid { grid-template-columns: 22rem 1fr; gap: var(--mh-space-16); }
}

body.mh .myherb-contact-list h3 {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-xs);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-clay-700);
  margin: var(--mh-space-6) 0 var(--mh-space-1);
}
body.mh .myherb-contact-list h3:first-child { margin-top: 0; }
body.mh .myherb-contact-list p { margin: 0; color: var(--mh-text); }
body.mh .myherb-contact-list a { color: var(--mh-cedar); }

/* The phone and email entries are the page's primary actions on a phone, not prose
   links: browser measurement put them at 17px tall, well under a usable tap target.
   Only tel:/mailto: are widened, so ordinary inline links in this block are untouched. */
body.mh .myherb-contact-list a[href^="tel:"],
body.mh .myherb-contact-list a[href^="mailto:"] {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  font-weight: var(--mh-weight-semibold);
}

/* The map is decorative context, not a control surface — it is kept out of the
   first screen and given a fixed ratio so it cannot shift the layout as it loads. */
body.mh .myherb-contact-map iframe {
  width: 100%;
  aspect-ratio: 16 / 7;
  height: auto;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
  display: block;
}

/* ---------------------------------------------------------------------------
   Insights article footer
   --------------------------------------------------------------------------- */

body.mh .myherb-insights-footer {
  margin-top: var(--mh-space-16);
  border-top: 1px solid var(--mh-border);
}
body.mh .myherb-insights-footer .mh-container { padding-inline: 0; }
body.mh .myherb-insights-footer__links { margin-top: var(--mh-space-8); }
body.mh .myherb-insights-footer__more {
  margin-top: var(--mh-space-16);
  margin-bottom: var(--mh-space-6);
  font-size: var(--mh-text-2xl);
}

/* ---------------------------------------------------------------------------
   Phase 4 — tap targets

   Two controls rendered below the 24x24 minimum (WCAG 2.5.8). Both are fixed by
   growing the hit area only; neither changes visually.

   The header logo link wraps an image 17px tall at mobile widths. Vertical padding
   gives it a 24px target without resizing the logo.

   Archive pagination appeared when the families gained enough ingredients to
   paginate — the "Next" link measured 37x22.
   --------------------------------------------------------------------------- */

.custom-logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 4px;
}

body.mh .woocommerce-tabs .tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

body.mh .woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 2px 8px;
}

/* ---------------------------------------------------------------------------
   Phase 4 — a product with no verified image

   Twenty-five of twenty-seven ingredients have no photograph, and the placeholder
   gallery is suppressed for them. The summary column reclaims the full width so the
   page does not open with an empty half.
   --------------------------------------------------------------------------- */

body.myherb-product--no-image .woostify-single-product-container,
body.myherb-product--no-image .site-main .product .summary {
  width: 100%;
  max-width: none;
  float: none;
  margin-left: 0;
}
body.myherb-product--no-image .woostify-single-product-gallery { display: none; }

/* ===========================================================================
   Phase 7 — header and primary navigation

   The problem: header-layout-1 lays branding, navigation and tools out as
   ordinary block/inline-block elements rather than as one row. With twelve
   top-level menu items the nav wrapped onto a second line, the logo sat 61px
   from the top, and the search icon floated on its own — a 181px header, most
   of it empty.

   The menu now has eight top-level items with the catalogue families nested
   under Products (tools/phase7-header-menu.php), and this makes the header a
   single flex row.

   Scoped to `body.mh-header` so nothing here can reach the admin bar, the
   off-canvas sidebar menu or any other theme layout.
   =========================================================================== */

:root {
  --mh-header-h: 72px;
  --mh-header-h-sm: 60px;
  --mh-nav-gap: clamp(1rem, 1.6vw, 1.75rem);
}

/* ---------- the row itself ---------- */

@media (min-width: 1024px) {

  body.mh-header .site-header-inner {
    display: flex;
    align-items: center;
    gap: var(--mh-nav-gap);
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    min-height: var(--mh-header-h);
  }

  /*
   * The theme wraps the skip links and the hamburger in .woostify-container,
   * which would otherwise become a flex child and consume a slot in the row.
   * `display: contents` lets its children participate directly.
   */
  body.mh-header .site-header-inner > .woostify-container {
    display: contents;
  }

  body.mh-header .site-branding {
    flex: 0 0 auto;
    margin: 0;
    text-align: left;
  }

  body.mh-header .site-header-inner .site-navigation {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
    margin: 0;
  }

  body.mh-header .mh-header-actions,
  body.mh-header .site-header-inner .site-tools {
    flex: 0 0 auto;
    margin: 0;
  }

  /* Search and CTA read as one group on the right, not two floating things. */
  body.mh-header .site-header-inner .site-tools {
    order: 98;
    display: flex;
    align-items: center;
  }

  body.mh-header .mh-header-actions {
    order: 99;
    display: flex;
    align-items: center;
    margin-left: 0.25rem;
  }

  /* The hamburger belongs to the mobile layout only. */
  body.mh-header .wrap-toggle-sidebar-menu {
    display: none !important;
  }

  /* ---------- the nav list ---------- */

  body.mh-header .primary-navigation {
    display: flex;
    flex-wrap: nowrap;          /* a second row is the bug being fixed */
    align-items: center;
    gap: var(--mh-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.mh-header .primary-navigation > li {
    position: relative;
    margin: 0;
    padding: 0;
  }

  body.mh-header .primary-navigation > li > a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: var(--mh-header-h);
    padding: 0;
    white-space: nowrap;        /* no wrapping at normal desktop widths */
    font-size: var(--mh-text-sm);
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  /*
   * Hover and current state are drawn with a border on a pseudo-element rather
   * than by changing padding or font-weight, so nothing reflows and the row
   * height never changes.
   */
  body.mh-header .primary-navigation > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 2px;
    background: currentColor;
    opacity: 0;
    transition: opacity 120ms ease;
  }

  body.mh-header .primary-navigation > li:hover > a::after,
  body.mh-header .primary-navigation > li:focus-within > a::after,
  body.mh-header .primary-navigation > li.current-menu-item > a::after,
  body.mh-header .primary-navigation > li.current-menu-ancestor > a::after,
  body.mh-header .primary-navigation > li.current-menu-parent > a::after {
    opacity: 1;
  }

  /* ---------- dropdowns ---------- */

  body.mh-header .primary-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 15rem;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-md);
    box-shadow: 0 12px 28px rgba(20, 35, 29, 0.12);

    /*
     * Hidden with opacity + visibility rather than display:none so the panel is
     * laid out at all times. It therefore opens with no reflow, and it stays in
     * the accessibility tree for `:focus-within` to work.
     */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 130ms ease, transform 130ms ease, visibility 0s linear 130ms;
  }

  /* Opens on hover AND on keyboard focus anywhere inside. */
  body.mh-header .primary-navigation > li:hover > .sub-menu,
  body.mh-header .primary-navigation > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  body.mh-header .primary-navigation .sub-menu a {
    display: block;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  body.mh-header .primary-navigation .sub-menu li:hover > a,
  body.mh-header .primary-navigation .sub-menu a:focus-visible {
    background: var(--mh-bg-subtle);
  }

  /* Last items would otherwise open past the viewport edge. */
  body.mh-header .primary-navigation > li:nth-last-child(-n+3) .sub-menu {
    left: auto;
    right: 0;
  }
}

/* ---------- the CTA, at every width ---------- */

body.mh-header .mh-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 1.15rem;
  border-radius: var(--mh-radius-md);
  background: var(--mh-cedar);
  color: var(--mh-white);
  font-size: var(--mh-text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 130ms ease, transform 130ms ease;
}

body.mh-header .mh-header-cta:hover,
body.mh-header .mh-header-cta:focus-visible {
  background: var(--mh-cedar-700);
  color: var(--mh-white);
}

body.mh-header .mh-header-cta:active {
  transform: translateY(1px);
}

/* A focus ring that is visible on both the light header and the dark button. */
body.mh-header .site-header-inner a:focus-visible,
body.mh-header .site-header-inner button:focus-visible,
body.mh-header .site-header-inner .header-search-icon:focus-visible {
  outline: 2px solid var(--mh-cedar);
  outline-offset: 3px;
  border-radius: 3px;
}

body.mh-header .mh-header-cta:focus-visible {
  outline-color: var(--mh-ink);
}

/* The theme's search icon is a span; give it a real target and alignment. */
body.mh-header .site-tools .header-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}

/* ---------- below 1024px: one toggle, logo, CTA ---------- */

@media (max-width: 1023.98px) {

  body.mh-header .site-header-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--mh-header-h-sm);
    padding-inline: clamp(0.75rem, 4vw, 1.5rem);
  }

  body.mh-header .site-header-inner > .woostify-container {
    display: contents;
  }

  body.mh-header .wrap-toggle-sidebar-menu {
    order: 1;
    flex: 0 0 auto;
    margin: 0;
  }

  body.mh-header .site-branding {
    order: 2;
    flex: 1 1 auto;
    margin: 0;
    text-align: left;
  }

  body.mh-header .site-header-inner .site-tools {
    order: 3;
    flex: 0 0 auto;
  }

  body.mh-header .mh-header-actions {
    order: 4;
    flex: 0 0 auto;
  }

  /* Keep the CTA reachable without letting it crowd the logo on a phone. */
  body.mh-header .mh-header-cta {
    min-height: 38px;
    padding: 0 0.85rem;
    font-size: 0.875rem;
  }

  body.mh-header .toggle-sidebar-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  /*
   * The wordmark is a 970x227 image. Left to its intrinsic size it renders 327px
   * wide at 768px and 159px at 375px, which is what pushed the toggle, search and
   * CTA past the viewport edge. Capping it keeps the row on one line and takes the
   * tablet header from 88px down to the same height as the phone.
   */
  body.mh-header .custom-logo {
    max-height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
  }
}

@media (max-width: 480px) {
  /*
   * At 375px the row needed 413px: toggle 40 + logo 159 + search 55 + CTA 112 plus
   * gaps. The logo gives up the most width for the least loss of legibility, and the
   * gaps and CTA padding make up the rest. Nothing is hidden — the CTA has to stay
   * reachable, and the search icon is the only other affordance in the row.
   */
  body.mh-header .site-header-inner {
    gap: 0.5rem;
    padding-inline: 0.75rem;
  }

  body.mh-header .custom-logo {
    max-width: 108px;
  }

  body.mh-header .site-tools .header-search-icon {
    min-width: 34px;
  }

  body.mh-header .mh-header-cta {
    padding: 0 0.7rem;
    font-size: var(--mh-text-xs);
  }
}

/* ---------------------------------------------------------------------------
   Phase 7 — the mobile menu button

   The child theme replaced the theme's <span> toggle with a real <button> so the
   drawer could be opened by keyboard. Nothing reset the button chrome, so it
   rendered with the browser default grey fill and a 1px grey border — a boxed
   control next to the wordmark.

   The theme also paints its icon bars via `.woostify-icon-bar span`, which
   matches BOTH children: the aria-hidden bar and the visually-hidden label. The
   label is clipped so it was never seen, but it was being given a background and
   the full width of the viewport. Scoping the rule to the aria-hidden span fixes
   the markup/CSS mismatch rather than hiding the symptom.
   --------------------------------------------------------------------------- */

body.mh-header .toggle-sidebar-menu-btn {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--mh-radius-sm);
  padding: 0;
  color: var(--mh-ink);
  cursor: pointer;
}

/* Three bars, drawn only on the presentational span. */
body.mh-header .toggle-sidebar-menu-btn > [aria-hidden="true"] {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

body.mh-header .toggle-sidebar-menu-btn > [aria-hidden="true"]::before,
body.mh-header .toggle-sidebar-menu-btn > [aria-hidden="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}

body.mh-header .toggle-sidebar-menu-btn > [aria-hidden="true"]::before { top: -6px; }
body.mh-header .toggle-sidebar-menu-btn > [aria-hidden="true"]::after  { top: 6px; }

/* The visually-hidden label must never be painted. */
body.mh-header .toggle-sidebar-menu-btn > .mh-visually-hidden {
  background: none !important;
  width: 1px !important;
  height: 1px !important;
}

body.mh-header .toggle-sidebar-menu-btn:hover { color: var(--mh-cedar); }

/* ===========================================================================
   Sitewide footer

   The footer is a widget area, not an Elementor document. Its contents are built
   by tools/build-footer.php; everything below is its layout.

   Woostify floats the five widgets and clears every Nth to fake a row, which has
   two consequences. A widget count that does not divide into the configured
   column count leaves the remainder alone on a second row — which is what the
   fifth column, Enquiries, was doing. And every column gets an identical share,
   so the contact column could not be given the extra width its longest value
   (the email address) needs. Grid replaces the floats: one declaration sets both
   the track count and the unequal share, and the parent's `clear` rules cannot
   fire on a non-floated child.
   =========================================================================== */

body.mh .site-footer-widget {
  display: grid;
  gap: var(--mh-space-10) var(--mh-space-8);
}

/* Cancel the floats the parent theme sets at every breakpoint, so the grid, not
   the widget count, decides the layout. */
body.mh .site-footer-widget .widget {
  float: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 600px) {
  body.mh .site-footer-widget { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  /* Contact first and wider: it carries a 24-character email address, while the
     four menu columns carry short link labels. */
  body.mh .site-footer-widget {
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  }
}

/* Column headings. The theme renders widget titles with the document h2 style —
   36px display serif — which is title size, not footer-label size: at 1024 three
   of the five wrapped onto a second line, and the brand broke mid-word. A footer
   column heading labels a list; it is not a section title. */
body.mh .site-footer-widget .widget-title {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-snug);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-text);
  margin: 0 0 var(--mh-space-4);
}

body.mh .site-footer-widget .textwidget p {
  margin: 0 0 var(--mh-space-4);
  color: var(--mh-text-muted);
}

/* Footer menu links. The theme spaces the rows with a 36px line-height on a 14px
   font, which is fine until a label wraps — "Pharmaceutical & Nutraceutical" and
   "Cosmetics & Personal Care" then get 36px of leading between their two lines
   and read as two separate links. The row rhythm is kept, but as padding on the
   anchor rather than leading inside it, so a wrapped label sets snug. */
body.mh .site-footer-widget .widget_nav_menu li { line-height: var(--mh-leading-snug); }
body.mh .site-footer-widget .widget_nav_menu a {
  display: inline-block;
  line-height: var(--mh-leading-snug);
  padding-block: 9px;
}

/* ---------------------------------------------------------------------------
   Footer contact block

   The only contact details in the footer: the verified email, the verified phone
   and a WhatsApp link to the same number. No hours, availability or response
   time is stated, here or anywhere else on the site.

   Each row is a flex line rather than a two-column grid. A fixed label gutter
   would have forced the email to break mid-address in the narrower column the
   1024px viewport gives it; wrapping instead drops the whole value onto its own
   line, which stays readable and never splits a string a buyer has to copy.
   --------------------------------------------------------------------------- */

body.mh .mh-footer-contact__title {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-xs);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-label);
  text-transform: uppercase;
  color: var(--mh-clay-700);
  margin: var(--mh-space-6) 0 var(--mh-space-1);
}

body.mh ul.mh-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.mh .mh-footer-contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--mh-space-2);
  margin: 0;
}

body.mh .mh-footer-contact__label {
  flex: 0 0 auto;
  font-size: var(--mh-text-sm);
  color: var(--mh-text-muted);
}

/* Ranked at `body.mh a.mh-footer-contact__value` so it outranks the theme's own
   footer link colour without !important — the approach used for the buttons
   above and, before it was retired, for the hero phone. */
body.mh a.mh-footer-contact__value {
  display: inline-block;
  /* Phone and WhatsApp are real actions on a touch device, not prose links: 44px
     minimum tap target (WCAG 2.5.5), same treatment as the Contact page. */
  min-height: 44px;
  line-height: 44px;
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-cedar);
}

body.mh a.mh-footer-contact__value:hover,
body.mh a.mh-footer-contact__value:focus { color: var(--mh-cedar-700); }