/* ============================================================
   Nutoast — WooCommerce (catalog + inquiry) styling
   Inherits design tokens from main.css (loaded as dependency).
   ============================================================ */

/* top offset clears the fixed header; .wrap supplies the max-width + centring */
.woocommerce-wrap { padding-block: clamp(6rem, 9vw, 7.5rem) clamp(2.5rem, 5vw, 4rem); }

/* breadcrumb */
.woocommerce-breadcrumb {
  font-size: .85rem; color: var(--muted); margin-bottom: 1.6rem;
  letter-spacing: .01em;
}
.woocommerce-breadcrumb a { color: var(--olive); }
.woocommerce-breadcrumb a:hover { color: var(--olive-deep); }

/* page heading */
.woocommerce-products-header__title,
.woocommerce-wrap h1.entry-title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2);
  color: var(--olive-deep); letter-spacing: -.015em; margin-bottom: .4rem;
}
.term-description { color: var(--muted); max-width: 60ch; margin-bottom: 1.5rem; }

/* toolbar */
.woocommerce-result-count { color: var(--muted); font-size: .9rem; }
.woocommerce-ordering select {
  font: inherit; padding: .5rem .9rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--cream); color: var(--olive-ink);
}

/* ---------- product grid ---------- */
ul.products { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.6rem; margin: 1.5rem 0 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after {
  content: none !important; display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important;
}
ul.products li.product {
  margin: 0; text-align: left;
  background: var(--cream); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
/* Framed product poster: the composite photo carries its OWN baked-in label, so we
   inset it on a cream mat with a hairline ring + soft shadow (gallery look) instead of
   full-bleed. Needs `.woocommerce` prefix + !important to beat WC core's
   `width:100%; margin:0 0 1em`. Inset matches the text inset (1.4rem) so photo, title,
   button and Compare all line up on one edge. */
.woocommerce ul.products li.product a img,
ul.products li.product a img {
  margin: 1.4rem 1.4rem .4rem !important;
  width: calc(100% - 2.8rem) !important;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px rgba(20,22,4,.07), 0 6px 18px rgba(20,22,4,.12);
  transition: box-shadow .5s var(--ease), transform .6s var(--ease-out);
}
.woocommerce ul.products li.product:hover a img,
ul.products li.product:hover a img {
  box-shadow: inset 0 0 0 1px rgba(20,22,4,.07), 0 12px 30px rgba(20,22,4,.20);
}
/* .woocommerce prefix + !important to beat WC core's `padding: .5em 0` (0 horizontal) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.25;
  color: var(--olive-deep); padding: 1.1rem 1.4rem .2rem !important;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; min-height: calc(1.3rem + 2.5em);
}
ul.products li.product .woocommerce-loop-product__link { display: block; }
ul.products li.product .star-rating { margin: 0 1.4rem; }

/* ============================================================
   LOOP "Add to inquiry" — DIRECTION: Avocado Brand Fill
   The card's one warm, confident action: a solid avocado pill in the
   brand's own green, dark-olive label centered with a CSS "+" glyph.
   Scoped to .nutoast-loop-inquiry so the single-product summary inquiry
   button (.btn--accent.btn--lg + .btn--ghost) is NEVER touched.
   Element ships as: .btn.btn--ghost.nutoast-loop-inquiry — so we
   (a) re-drive --bg-btn/--fg-btn, (b) kill the inherited ghost hairline,
   (c) center the label, (d) add a self-contrasting edge (WCAG 1.4.11).
   ============================================================ */

ul.products li.product .nutoast-loop-inquiry {
  /* refined to the brand: olive-deep pill that lights up lime on hover/added */
  --bg-btn: var(--olive-deep);
  --fg-btn: var(--cream);
  margin: .9rem 1.4rem 1rem;
  width: calc(100% - 2.8rem);
  justify-content: center;
  gap: .4rem;
  padding: .85em 1.4em;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  background: var(--olive-deep);
  color: var(--cream);
  box-shadow: none;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
ul.products li.product .nutoast-loop-inquiry .lbl::before {
  content: "+";
  display: inline-block;
  margin-right: .4em;
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1;
  transform: translateY(.02em);
}
/* hover / focus -> lime fill, olive-ink label (the brand's "action" colour) */
ul.products li.product .nutoast-loop-inquiry:hover,
ul.products li.product .nutoast-loop-inquiry:focus-visible {
  --bg-btn: var(--lime);
  --fg-btn: var(--olive-ink);
  background: var(--lime);
  color: var(--olive-ink);
}
ul.products li.product .nutoast-loop-inquiry:focus-visible {
  outline: 2px solid var(--olive-deep);
  outline-offset: 2px;
}
ul.products li.product .nutoast-loop-inquiry:active {
  background: color-mix(in srgb, var(--lime) 86%, var(--olive-deep));
}
/* added -> stays lime as the "in your inquiry" confirmation */
ul.products li.product .nutoast-loop-inquiry.is-added {
  --bg-btn: var(--lime);
  --fg-btn: var(--olive-ink);
  background: var(--lime);
  color: var(--olive-ink);
  box-shadow: none;
}
ul.products li.product .nutoast-loop-inquiry.is-added .lbl::before { content: none; }
ul.products li.product .nutoast-loop-inquiry.is-added .ok { font-weight: 700; }
/* still re-pressable to manage; brighten ~10% + small lift, no hue change */
ul.products li.product .nutoast-loop-inquiry.is-added:hover,
ul.products li.product .nutoast-loop-inquiry.is-added:focus-visible {
  background: color-mix(in srgb, var(--olive-deep) 88%, var(--cream));
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px rgba(158,167,0,.55), 0 10px 24px rgba(20,22,4,.18);
}

/* COMPARE — bind the wrapper + link directly under the pill as ONE action
   zone on the SAME 1.4rem inset (the global wrapper ships 1.3rem / -.3rem).
   Lift the link from --olive-soft (4.28:1, sub-AA) to --olive (6.43:1 AA). */
ul.products li.product .nutoast-compare-loop {
  margin: 0 1.4rem 1.2rem;
}
ul.products li.product .nutoast-add-compare.btn-mini { color: var(--olive); }
ul.products li.product .nutoast-add-compare.btn-mini:hover { color: var(--olive-deep); }

/* keep the avocado pill distinguishable in Windows High-Contrast / forced-colors */
@media (forced-colors: active) {
  ul.products li.product .nutoast-loop-inquiry { border: 2px solid ButtonText; }
}

@media (prefers-reduced-motion: reduce) {
  ul.products li.product .nutoast-loop-inquiry { transition: none; }
  ul.products li.product .nutoast-loop-inquiry:hover,
  ul.products li.product .nutoast-loop-inquiry:focus-visible,
  ul.products li.product .nutoast-loop-inquiry.is-added:hover { transform: none; }
}
ul.products li.product .onsale {
  background: var(--lime); color: var(--olive-ink); border-radius: var(--r-pill);
  padding: .25rem .7rem; font-weight: 700; min-height: 0; min-width: 0;
}

/* ---------- Tier sub-category filter: vertical tab rail + grid ----------
   .tier-layout wraps [.tier-rail | ul.products] as a flex row (opened in
   woocommerce_before_shop_loop @100, closed in after_shop_loop). Tabs filter
   li.product by its normalised tier-* class; "All" is default. */
.tier-layout { display: flex; align-items: flex-start; gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 1.6rem; clear: both; }
.tier-rail {
  flex: 0 0 clamp(168px, 15vw, 210px); position: sticky; top: calc(var(--tb-h, 0px) + 84px);
  display: flex; flex-direction: column; gap: .5rem;
}
.tier-tab {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%;
  text-align: left; padding: .8rem 1.05rem; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: transparent; color: var(--olive-ink);
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.1; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .15s var(--ease);
}
.tier-tab:hover { border-color: var(--olive-deep); background: rgba(20,22,4,.035); }
.tier-tab.is-active { background: var(--olive-deep); border-color: var(--olive-deep); color: var(--cream); }
.tier-tab:active { transform: translateY(1px); }
.tier-tab__count { font-size: .78rem; font-weight: 600; color: var(--muted); }
.tier-tab.is-active .tier-tab__count { color: var(--lime); }
.tier-tab:focus-visible { outline: 2px solid var(--avocado); outline-offset: 2px; }
.tier-layout ul.products { flex: 1 1 auto; min-width: 0; margin-top: 0 !important; }
ul.products li.product.is-hidden { display: none !important; }
@media (max-width: 900px) {
  .tier-layout { flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
  .tier-rail { position: static; flex-direction: row; flex-basis: auto; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
  .tier-tab { width: auto; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .tier-tab { transition: none; } }

/* ---------- single product ---------- */
.single-product div.product {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.single-product div.product .woocommerce-product-gallery { margin: 0; }
.single-product div.product .woocommerce-product-gallery__image img { border-radius: var(--r-lg); }
/* Elevate the gallery main image so it floats off the page (depth/hierarchy — matches the bespoke pistachio PDP). Shadow sits on .flex-viewport so flexslider's overflow:hidden does not clip it. */
.single-product .woocommerce-product-gallery .flex-viewport { border-radius: var(--r-lg); box-shadow: 0 26px 58px -22px rgba(45,50,8,.30), 0 6px 16px rgba(45,50,8,.09); }
.single-product .woocommerce-product-gallery--columns-1 .woocommerce-product-gallery__image:only-child { border-radius: var(--r-lg); box-shadow: 0 26px 58px -22px rgba(45,50,8,.30), 0 6px 16px rgba(45,50,8,.09); }
.single-product div.product .product_title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2);
  color: var(--olive-deep); letter-spacing: -.015em; line-height: 1.08;
}
.single-product .woocommerce-product-details__short-description {
  color: var(--muted); font-size: var(--fs-lead); margin-top: 1rem;
}
.single-product .product_meta { margin-top: 1.6rem; font-size: .88rem; color: var(--muted); }
.single-product .product_meta a { color: var(--olive); }

/* inquiry CTAs */
.nutoast-inquiry-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 4rem); }
.woocommerce-tabs ul.tabs {
  list-style: none; margin: 0 0 1.5rem; padding: 0 0 .6rem;
  display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line);
}
.woocommerce-tabs ul.tabs li {
  margin: 0; background: none; border: 0;
}
.woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: .55rem 1.1rem; border-radius: var(--r-pill);
  font-weight: 600; color: var(--muted); font-size: .92rem;
}
.woocommerce-tabs ul.tabs li.active a { background: var(--olive-deep); color: #fff; }
.woocommerce-tabs .panel h2 { font-family: var(--font-display); font-weight: 500; color: var(--olive-deep); }

/* related / upsells */
.related.products > h2, .upsells.products > h2 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3);
  color: var(--olive-deep); margin: clamp(2.5rem,5vw,4rem) 0 0;
}

/* pagination + notices */
.woocommerce-pagination ul { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 2.5rem 0 0; border: 0; }
.woocommerce-pagination ul li a, .woocommerce-pagination ul li span {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .6rem;
  border-radius: var(--r-pill); background: var(--cream-2); color: var(--olive-ink); font-weight: 600; border: 0;
}
.woocommerce-pagination ul li span.current { background: var(--olive-deep); color: #fff; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--cream-2);
  padding: 1rem 1.2rem; border-top: 3px solid var(--avocado); list-style: none;
}

@media (max-width: 900px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 820px) { .single-product div.product { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr !important; } }

/* ---------- specs + downloads (single product) ---------- */
.nutoast-specs, .nutoast-downloads { margin-top: 1.9rem; }
.nutoast-specs__title, .nutoast-downloads__title {
  font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
  color: var(--olive-deep); letter-spacing: -.01em; margin: 0 0 .8rem;
}
.nutoast-spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.nutoast-spec-table th, .nutoast-spec-table td {
  text-align: left; padding: .7rem .9rem; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.nutoast-spec-table th { width: 42%; color: var(--olive-soft); font-weight: 600; }
.nutoast-spec-table td { color: var(--olive-ink); }
.nutoast-spec-table tr:nth-child(odd) th,
.nutoast-spec-table tr:nth-child(odd) td { background: rgba(20,22,4,.025); }

.nutoast-doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.nutoast-doc {
  display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream);
  font-weight: 600; color: var(--olive-deep);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nutoast-doc:hover { border-color: var(--avocado); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.nutoast-doc svg { width: 22px; height: 22px; color: var(--avocado); flex: 0 0 auto; }



/* ============================================================
   Nutoast — SINGLE-PRODUCT fixes (append to assets/css/woocommerce.css)
   Scope: EVERYTHING here is under `.single-product` — it CANNOT affect
   the shop/category `ul.products` grid (woocommerce.css:36-73), which is
   intentionally left untouched. Tokens inherited from main.css.
   `!important` is used ONLY where WooCommerce's plugin CSS sets the same
   property with comparable specificity (width/float/clear on the grid
   children + the gallery opacity inline fallback), mirroring the existing
   loop-grid neutralization at woocommerce.css:46-49.
   ============================================================ */

/* ---- 1. CRITICAL: neutralize WC's float + width:48% on the grid children
   so the gallery fills the left 1fr cell and the summary fills the right 1fr
   cell. WC ships `.woocommerce div.product div.images{float:left;width:48%}`
   and `.woocommerce div.product div.summary{float:right;width:48%;clear:none}`.
   The gallery's outer div also carries the legacy `images` class. Applied
   UNCONDITIONALLY (no media query) so it also fixes the 769–820px band where
   WC's smallscreen float-reset (max-width:768px) has not yet kicked in. */
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > div.images,
.single-product div.product > .summary,
.single-product div.product > .entry-summary {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}
/* harden the grid container itself against any inherited float */
.single-product div.product { float: none; }

/* ---- 2. HIGH: let tabs AND related/upsells span the full grid width.
   They are direct children of the grid; only the tabs had grid-column:1/-1.
   (The existing `.woocommerce-tabs { grid-column:1/-1 }` at line 96 stays;
   this adds related/upsells to the same span.) */
.single-product div.product > .related.products,
.single-product div.product > .upsells.products {
  grid-column: 1 / -1;
}
.single-product div.product > .related.products ul.products,
.single-product div.product > .upsells.products ul.products {
  margin-top: 1.2rem;
}

/* ---- 3. HIGH: tighten the product title — the page --fs-h2 (max 3.4rem) is
   oversized for long B2B names; cap + balance wrap so a 47-char name resolves
   to ~2 lines in a half-width column and stays inside 390px on mobile.
   (Overrides the font-size set at woocommerce.css:82-85; do NOT add --fs-h1.) */
.single-product div.product .product_title {
  font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0 0 .25rem;
}

/* ---- 4. HIGH: description entry-content typography + measure + contrast.
   Switch body copy from low-contrast --muted (~4.9:1) to --olive-ink (~17:1)
   and give pasted editor HTML (lists/strong/sub-headings) real rhythm. */
.single-product .summary { max-width: 60ch; }
.single-product .woocommerce-product-details__short-description {
  color: var(--olive-ink);
  font-size: var(--fs-lead);
  line-height: 1.6;
  margin-top: 1.1rem;
}
.single-product .woocommerce-product-details__short-description p { margin: 0 0 .9rem; }
.single-product .summary strong,
.single-product .summary b { color: var(--olive-deep); font-weight: 600; }
.single-product .summary ul {
  list-style: none; margin: .9rem 0; padding: 0; display: grid; gap: .45rem;
}
.single-product .summary ul li {
  position: relative; padding-left: 1.4rem; color: var(--olive-ink);
}
.single-product .summary ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--avocado);
}
.single-product .summary h3,
.single-product .summary h4 {
  font-family: var(--font-display); font-weight: 500; color: var(--olive-deep);
  font-size: var(--fs-h4); margin: 1.4rem 0 .5rem;
}
/* neutralize the stray pasted inline margin-bottom:30px (content fix preferred;
   inline color wins specificity so clean the content for #757f41 spans) */
.single-product .summary [style*="margin-bottom: 30px"] { margin-bottom: .9rem !important; }
/* spec-table labels: use --olive (~5.6:1) over --olive-soft (~4.0:1) for AA at small sizes */
.single-product .nutoast-spec-table th { color: var(--olive); }

/* ---- 5. MEDIUM: inquiry CTA rhythm — demote secondary actions below the
   primary lime CTA; the sample link + compare button are flat siblings. */
.single-product .summary .nutoast-inquiry-actions { margin-top: 1.8rem; }
.single-product .summary .nutoast-sample-link {
  display: inline-flex; margin-top: .9rem; font-size: .92rem; color: var(--olive);
}
.single-product .summary .nutoast-secondary-actions {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1rem;
}
.single-product .summary .nutoast-add-inquiry.btn--ghost,
.single-product .summary .nutoast-add-compare.btn--ghost {
  font-size: .92rem; padding-block: .62rem;
}

/* ---- 6. MEDIUM: gallery thumbnails (flexslider JS-generated .flex-control-thumbs).
   Restyle ONLY appearance — keep them as a list flexslider can drive; do not
   set display:none or remove the <li>/<img> the slider toggles .flex-active on. */
.single-product .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
  margin: .8rem 0 0; padding: 0; list-style: none; overflow: visible;
}
.single-product .flex-control-thumbs li { width: auto; float: none; margin: 0; list-style: none; }
.single-product .flex-control-thumbs img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--line-soft); opacity: .6;
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active {
  opacity: 1; border-color: var(--avocado);
}
/* consistent square main frame even before flexslider settles */
.single-product div.product .woocommerce-product-gallery__image img {
  aspect-ratio: 1 / 1; object-fit: cover;
}

/* ---- 7. MEDIUM: kill the gallery opacity:0 FOUC (WC reveals via JS).
   For a 1–4 image B2B gallery the fade-in adds nothing; flexslider/photoswipe/
   zoom still initialise normally. */
.single-product .woocommerce-product-gallery { opacity: 1 !important; }

/* ---- 8. LOW: theme the gallery zoom/lightbox trigger (WC default is unstyled). */
.single-product .woocommerce-product-gallery__trigger {
  display: grid; place-items: center; width: 40px; height: 40px;
  top: 1rem; right: 1rem; border-radius: 50%;
  background: var(--cream); box-shadow: var(--shadow-sm); color: var(--olive-deep);
  font-size: 1rem; text-indent: 0; opacity: .92;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.single-product .woocommerce-product-gallery__trigger:hover {
  transform: scale(1.06); background: var(--lime);
}

/* ---- 9. OPTIONAL POLISH (safe): keep the now-shorter gallery in view beside
   a taller summary. Comment out if undesired. */
.single-product div.product > .woocommerce-product-gallery {
  position: sticky; top: clamp(6rem, 9vw, 7.5rem);
}

/* ---- 10. Mobile: at <=820px the grid is single-column (existing rule line 130);
   make the children full width and drop the sticky so nothing overflows. */
@media (max-width: 820px) {
  .single-product div.product > .woocommerce-product-gallery,
  .single-product div.product > div.images,
  .single-product div.product > .summary,
  .single-product div.product > .entry-summary { width: 100% !important; }
  .single-product div.product > .woocommerce-product-gallery { position: static; top: auto; }
}



/* ---- 11. REFINEMENT (desktop): cap the gallery + balance the two columns.
   The 1fr/1fr grid rendered the gallery at ~full column width (~760px) beside a
   short summary, leaving a large right-side void and pushing the tall gallery +
   thumbnail strip down into the tabs row. Give the gallery a capped column and the
   summary the rest; keep thumbnails in-flow; drop the (now-pointless) sticky so the
   gallery never out-runs a short summary. Wrapped in min-width:821px so the
   <=820px single-column rule (above) still wins on mobile. */
@media (min-width: 821px) {
  .single-product div.product {
    grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
    row-gap: clamp(1.8rem, 3.5vw, 3rem);
  }
}
.single-product div.product > .woocommerce-product-gallery { position: static; top: auto; }
.single-product .woocommerce-product-gallery .flex-control-thumbs { position: static; margin-bottom: .3rem; }


/* ---- 12. Gallery thumbnails — homepage-style 4-up card row.
   WC ships `.woocommerce div.product div.images .flex-control-thumbs li{width:25%;float:left}`
   (specificity 0,4,3). Section 6's `.single-product .flex-control-thumbs li{width:auto}`
   (0,2,1) lost, so under our grid each thumb collapsed to 25% of a 1fr track (~1/16 width ->
   tiny dots overlapping the main image). Match WC's prefix + !important so we win, and style
   the thumbs like the homepage's rounded mini-cards (soft border, hover lift, lime-active). */
.woocommerce div.product .flex-control-nav.flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  width: 100%;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  list-style: none;
  overflow: visible !important;
  position: static !important;
  clear: both;
}
.woocommerce div.product .flex-control-thumbs li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  display: block;
}
.woocommerce div.product .flex-control-thumbs li img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  opacity: .55;
  cursor: pointer;
  transition: opacity .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.woocommerce div.product .flex-control-thumbs li img:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: var(--avocado);
}
.woocommerce div.product .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--avocado);
  box-shadow: 0 0 0 2px var(--avocado), var(--shadow-sm);
}


/* ---- 13. Inquiry action cluster — 3-tier hierarchy (replaces the old loose
   .nutoast-inquiry-actions + dangling sample link + compare siblings):
     Tier 1  Request a Quote   (primary lime, large)
     Tier 2  Add to inquiry / Compare   (twin ghost "add to a list" utilities)
     Tier 3  or request a sample        (quiet text link)
   Markup from nutoast_wc_single_inquiry(); compare is rendered inside it. */
.single-product .summary .nutoast-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.9rem;
}
.single-product .summary .nutoast-actions__primary { margin: 0; }
.single-product .summary .nutoast-actions__row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0;
}
.single-product .summary .nutoast-actions__row .btn--ghost {
  font-size: .92rem;
  padding-block: .68rem;
  margin: 0;
}
.single-product .summary .nutoast-actions .nutoast-sample-link {
  margin: .1rem 0 0;
  font-size: .92rem;
  color: var(--olive);
}
.single-product .summary .nutoast-actions .nutoast-sample-link:hover { color: var(--olive-deep); }
@media (max-width: 420px) {
  .single-product .summary .nutoast-actions__primary,
  .single-product .summary .nutoast-actions__row .btn--ghost { width: 100%; justify-content: center; }
}


/* ---- 14. Description / tabs block — homepage-style editorial section.
   Catalog products almost always have only the Description tab (Reviews removed,
   no attributes), so the 1-item tab bar is pointless and WC's default tab chrome
   (grey tab shape + borders) double-layers under our pill. Hide the nav when
   single; restyle cleanly when multiple; give the panel real typography. */
.single-product .woocommerce-tabs {
  border-top: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.single-product .woocommerce-tabs ul.tabs:has(li:only-child) { display: none; }
.single-product .woocommerce-tabs ul.tabs {
  border: 0; padding: 0; margin: 0 0 1.8rem; gap: .5rem;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { content: none !important; border: 0 !important; display: none !important; }
.single-product .woocommerce-tabs ul.tabs li {
  background: transparent !important; border: 0 !important;
  border-radius: var(--r-pill) !important; margin: 0 !important; padding: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li a {
  background: var(--cream-2); color: var(--olive-ink) !important;
  border-radius: var(--r-pill); padding: .55rem 1.2rem; font-weight: 600; font-size: .92rem;
}
.single-product .woocommerce-tabs ul.tabs li.active a { background: var(--olive-deep); color: #fff !important; }
.single-product .woocommerce-Tabs-panel { max-width: 82ch; }
.single-product .woocommerce-Tabs-panel > h2 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3);
  color: var(--olive-deep); letter-spacing: -.01em;
  margin: 0 0 1.5rem; padding-bottom: .75rem; position: relative;
}
.single-product .woocommerce-Tabs-panel > h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 3rem; height: 3px; border-radius: 2px; background: var(--lime);
}
.single-product .woocommerce-Tabs-panel h3 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4);
  color: var(--olive-deep); margin: 1.9rem 0 .6rem; letter-spacing: -.005em;
}
.single-product .woocommerce-Tabs-panel h3 span,
.single-product .woocommerce-Tabs-panel h3 strong { color: var(--olive-deep) !important; font-weight: 500; }
.single-product .woocommerce-Tabs-panel p { color: var(--olive-ink); line-height: 1.75; margin: 0 0 1.05rem; }
.single-product .woocommerce-Tabs-panel p span,
.single-product .woocommerce-Tabs-panel li span { color: var(--olive-ink) !important; }
.single-product .woocommerce-Tabs-panel strong { color: var(--olive-deep); font-weight: 600; }
.single-product .woocommerce-Tabs-panel ul {
  list-style: none; margin: .9rem 0 1.5rem; padding: 0; display: grid; gap: .55rem;
}
.single-product .woocommerce-Tabs-panel ul li {
  position: relative; padding-left: 1.5rem; color: var(--olive-ink); line-height: 1.6;
}
.single-product .woocommerce-Tabs-panel ul li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--avocado);
}


/* ---- 15. Full-width product top. The gallery cap (s.11, 460px) + the summary
   60ch cap (s.4) left the block filling only ~1110px of the 1240px .wrap, so it
   read as narrow/left-weighted with a right-side void. Use wider balanced columns
   and let the summary fill its column so the block spans the full page width. */
@media (min-width: 821px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}
.single-product .summary { max-width: none; }

/* ---- 16. Keep the gallery rounded in EVERY state. On hover the WC zoom plugin
   overlays a <img class="zoomImg"> and the real clip happens on flexslider's
   runtime-inserted .flex-viewport — neither inherits the image border-radius, so
   the magnified view showed square corners. Round + clip the actual clippers. */
.single-product div.product .flex-viewport,
.single-product div.product .woocommerce-product-gallery__image {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.single-product div.product .zoomImg { border-radius: var(--r-lg); }

/* ============================================================
   17. Single-product SUMMARY — visual-hierarchy redesign.
   Three layered zones in the right column:
     · Identity — eyebrow → title → demoted lead
     · Specs    — the "Product Offers" list becomes a carded panel,
                  its repeated "Size:" leaves collapsed to scannable chips
     · Action   — the inquiry cluster anchored under a divider
   Pure front-end; the panel/chip rules are scoped to variety lists
   (:has(ul)), so a plain intro-only short-description is untouched.
   ============================================================ */

/* the editor pastes inline color:#000 / #757f41 onto <span>s; let the theme
   palette govern the summary column instead */
.single-product .summary .woocommerce-product-details__short-description span[style] { color: inherit !important; }

/* shared reading measure for the stacked content blocks */
.single-product .summary .woocommerce-product-details__short-description,
.single-product .summary .nutoast-specs,
.single-product .summary .nutoast-downloads,
.single-product .summary .nutoast-actions { max-width: 34rem; }

/* ---- Zone 1 · identity ---- */
.single-product .summary .nutoast-product-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--avocado);
}
.single-product .summary .nutoast-product-eyebrow::before {
  content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--lime-bright);
}
/* demote the lead so it supports — not competes with — the title */
.single-product .summary .woocommerce-product-details__short-description > p:first-child {
  font-size: var(--fs-body); line-height: 1.62; color: var(--olive);
  margin: 1rem 0 1.5rem; max-width: 46ch;
}
/* drop the editor's trailing empty paragraph after the offers list */
.single-product .summary .woocommerce-product-details__short-description > ol + p,
.single-product .summary .woocommerce-product-details__short-description > ul + p { display: none; }

/* ---- Zone 2 · spec / offers panel (only when a variety list is present) ---- */
/* "Product Offers:" heading → small section label above the card */
.single-product .summary .woocommerce-product-details__short-description > h3:has(+ ol),
.single-product .summary .woocommerce-product-details__short-description > h3:has(+ ul) {
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--olive); margin: 0 0 .65rem;
}
/* the variety list → carded panel */
.single-product .summary .woocommerce-product-details__short-description > ol:has(ul),
.single-product .summary .woocommerce-product-details__short-description > ul:has(ul) {
  list-style: none; counter-reset: nutvar; margin: 0; padding: 1.1rem 1.2rem;
  display: grid; gap: 1.05rem;
  background: var(--cream-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.single-product .summary .woocommerce-product-details__short-description > ol:has(ul) > li,
.single-product .summary .woocommerce-product-details__short-description > ul:has(ul) > li {
  counter-increment: nutvar; position: relative; padding: 0;
}
.single-product .summary .woocommerce-product-details__short-description > ol:has(ul) > li::before,
.single-product .summary .woocommerce-product-details__short-description > ul:has(ul) > li::before { display: none; }
/* variety name = row header prefixed with a small index */
.single-product .summary .woocommerce-product-details__short-description > ol:has(ul) > li > span:first-child,
.single-product .summary .woocommerce-product-details__short-description > ul:has(ul) > li > span:first-child,
.single-product .summary .woocommerce-product-details__short-description > ol:has(ul) > li > strong:first-child,
.single-product .summary .woocommerce-product-details__short-description > ul:has(ul) > li > strong:first-child {
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; color: var(--olive-deep);
}
.single-product .summary .woocommerce-product-details__short-description > ol:has(ul) > li > span:first-child::before,
.single-product .summary .woocommerce-product-details__short-description > ul:has(ul) > li > span:first-child::before {
  content: counter(nutvar, decimal-leading-zero);
  font-family: var(--font-body); font-size: .68rem; font-weight: 700; color: var(--avocado);
  letter-spacing: .04em; line-height: 1.4;
}
/* nested size lists → scannable chips (drop the repeated "Size:" label) */
.single-product .summary .woocommerce-product-details__short-description ol ul,
.single-product .summary .woocommerce-product-details__short-description ul ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .6rem 0 0; padding: 0; background: none; border: 0; box-shadow: none;
}
.single-product .summary .woocommerce-product-details__short-description ol ul > li,
.single-product .summary .woocommerce-product-details__short-description ul ul > li {
  margin: 0; padding: .28rem .62rem; font-size: .8rem; color: var(--olive-ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.single-product .summary .woocommerce-product-details__short-description ol ul > li::before,
.single-product .summary .woocommerce-product-details__short-description ul ul > li::before { display: none; }
.single-product .summary .woocommerce-product-details__short-description ol ul > li strong,
.single-product .summary .woocommerce-product-details__short-description ul ul > li strong { display: none; }

/* ---- Zone 3 · action zone, anchored by a divider ---- */
.single-product .summary .nutoast-actions {
  margin-top: 2rem; padding-top: 1.7rem; border-top: 1px solid var(--line-soft);
}
/* ============================================================
   18. CATEGORY ARCHIVE — HIERARCHY + DEPTH ("elevation-grounds")
   Goal: a real category MASTHEAD, a distinct carded FILTER zone, a
   card tier KICKER, and ground/elevation separation — without clutter.

   THREE GROUNDS (back -> front):
     · page  --cream            (the recessed product ground)
     · masthead band --cream-2  (the raised upper ground, full-bleed)
     · cards + sticky filter card (--cream, shadow — lifted off the page)

   SCOPING: this theme's woocommerce.php template hardcodes the wrapper and
   calls woocommerce_content() directly, which does NOT fire the
   before/after_main_content hooks — so we CANNOT rely on a wrap class.
   Instead everything is scoped to `body.nutoast-archive` (added via the
   body_class filter in inc/woocommerce.php). The masthead is printed from
   woocommerce_archive_description (a hook that DOES fire inside the loop).
   The client-side tier filter (.is-hidden on li.product) is untouched.
   ============================================================ */

/* ---- 0. The product ground. The archive wrap is the recessed cream plane;
   the masthead breaks OUT of it full-bleed so the band reads as its own upper
   ground. .woocommerce-wrap already pays the fixed-header top clearance
   (woocommerce.css:7), so the band trims its OWN top pad to avoid double gap. */
body.nutoast-archive .woocommerce-wrap {
  background: var(--cream);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
/* the default WC products-header is now just the carrier for our masthead;
   strip its own spacing so the band controls the rhythm */
body.nutoast-archive .woocommerce-products-header { margin: 0; }
/* hide the stray floated result-count/ordering in their default spots — we
   re-home both into a tidy meta strip below the masthead (section 2) */
body.nutoast-archive .woocommerce-result-count,
body.nutoast-archive .woocommerce-ordering { float: none; }

/* ============================================================
   1. CATEGORY MASTHEAD — upper ground (cream-2), full-bleed band.
   Layout: [identity column | scene card]. Both children sit fully INSIDE
   the band (no negative-margin dip): depth is carried by the cream-2 -> cream
   ground change + hero-scale title + the elevated scene card, not by a brittle
   overlap. Inner content registers on the .wrap gutter (1.25rem) so the band
   and the grid share one left edge.
   ============================================================ */
body.nutoast-archive .nutoast-masthead {
  --masthead-blur: 10px;               /* TUNABLE: blur amount (0 = sharp) */
  position: relative; isolation: isolate;
  margin-inline: calc(50% - 50vw);     /* full-bleed out of .wrap */
  padding-inline: max(1.25rem, calc(50vw - var(--maxw) / 2));
  padding-block: clamp(2.8rem, 5vw, 4.2rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}
/* the category supply scene as a BLURRED full background */
body.nutoast-archive .nutoast-masthead__bg {
  position: absolute; inset: 0; z-index: -2; background: var(--cream-2);
}
body.nutoast-archive .nutoast-masthead__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(var(--masthead-blur)) saturate(1.06) brightness(1.02);
  transform: scale(1.14);
}
body.nutoast-archive .nutoast-masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(246,244,230,.90) 0%, rgba(246,244,230,.78) 38%,
    rgba(246,244,230,.5) 72%, rgba(246,244,230,.4) 100%);
}
body.nutoast-archive .nutoast-masthead__inner {
  position: relative; z-index: 1; max-width: 62ch;
}

/* identity column — reuses the house .eyebrow grammar (one spec, not a fork) */
body.nutoast-archive .nutoast-masthead__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: var(--fs-eyebrow);
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--olive-soft); margin: 0 0 1rem;
}
body.nutoast-archive .nutoast-masthead__eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--avocado);
}
body.nutoast-archive .nutoast-masthead__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -.02em;
  color: var(--olive-deep); margin: 0; text-wrap: balance;
}
body.nutoast-archive .nutoast-masthead__count {
  display: inline-block; margin-left: .55rem; transform: translateY(-.35em);
  font-size: .4em; font-weight: 700; letter-spacing: .06em;
  color: var(--avocado); vertical-align: top;
}
body.nutoast-archive .nutoast-masthead__desc {
  max-width: 52ch; margin: 1.1rem 0 0;
  color: var(--olive); font-size: var(--fs-lead); line-height: 1.55;
}
body.nutoast-archive .nutoast-masthead__desc p { margin: 0 0 .5rem; }
body.nutoast-archive .nutoast-masthead__desc p:last-child { margin-bottom: 0; }

/* scene card — the masthead's elevated object, fully inside the band */
body.nutoast-archive .nutoast-masthead__scene {
  position: relative; align-self: stretch;
  min-height: clamp(170px, 20vw, 240px);
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  background: var(--sand); box-shadow: var(--shadow-lg);
  isolation: isolate;
}
body.nutoast-archive .nutoast-masthead__scene img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1.1s var(--ease-out);
}
body.nutoast-archive .nutoast-masthead:hover .nutoast-masthead__scene img { transform: scale(1.04); }
/* tiny brand stamp anchoring the scene card */
body.nutoast-archive .nutoast-masthead__scene::after {
  content: attr(data-stamp);
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  padding: .3rem .68rem; border-radius: var(--r-pill);
  background: rgba(254,255,247,.92); color: var(--olive-deep);
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   2. SEAM STRIP — chips (switcher) + re-homed result-count/ordering meta.
   Sits in the gap between the masthead band and the product ground.
   ============================================================ */
body.nutoast-archive .term-chips.wc-cat-filter { margin-top: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: 1.2rem; }

/* the re-homed count (L) + sort (R), on one quiet hairline rule */
body.nutoast-archive .nutoast-wc-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem 1.2rem;
  margin: 0 0 .2rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--line-soft);
}
body.nutoast-archive .nutoast-wc-meta .woocommerce-result-count {
  margin: 0; color: var(--muted); font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}
body.nutoast-archive .nutoast-wc-meta .woocommerce-ordering { margin: 0; }
body.nutoast-archive .nutoast-wc-meta .woocommerce-ordering select {
  font: inherit; padding: .5rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--cream); color: var(--olive-ink);
  cursor: pointer; transition: border-color .25s var(--ease);
}
body.nutoast-archive .nutoast-wc-meta .woocommerce-ordering select:hover { border-color: var(--olive-soft); }
body.nutoast-archive .nutoast-wc-meta .woocommerce-ordering select:focus-visible {
  outline: 2px solid var(--avocado); outline-offset: 2px; border-color: var(--avocado);
}

/* ============================================================
   3. STICKY ELEVATED FILTER CARD — the rail becomes a floating panel.
   We restyle the EXISTING .tier-rail (markup + JS untouched) and add a
   PHP-printed header (.tier-rail__head, a non-button sibling the filter JS
   ignores since it matches on .tier-tab).
   ============================================================ */
body.nutoast-archive .tier-layout {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
body.nutoast-archive .tier-rail {
  flex: 0 0 clamp(200px, 17vw, 244px);
  /* keep the base sticky offset (var(--tb-h) + 84px) but pad for the card */
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
body.nutoast-archive .tier-rail__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin: .1rem .2rem .6rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--line-soft);
}
body.nutoast-archive .tier-rail__title {
  font-family: var(--font-body); font-size: var(--fs-eyebrow);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--olive-soft); margin: 0;
}
body.nutoast-archive .tier-rail__hint {
  font-size: .66rem; font-weight: 600; color: var(--avocado); letter-spacing: .04em;
}
/* tabs sit ON the card: a cream-2 chip lifts off the cream card, the filled
   olive-deep active reads as the raised, selected control (brand-canonical) */
body.nutoast-archive .tier-rail .tier-tab {
  border-color: transparent;
  background: var(--cream-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
body.nutoast-archive .tier-rail .tier-tab:hover {
  background: #fff; border-color: var(--line);
  box-shadow: inset 0 0 0 1px var(--line), 0 4px 12px rgba(20,22,4,.07);
}
body.nutoast-archive .tier-rail .tier-tab.is-active {
  background: var(--olive-deep); border-color: var(--olive-deep); color: var(--cream);
  box-shadow: 0 6px 16px rgba(45,50,8,.22);
}
/* (base CSS already flips .tier-tab__count to --lime when .is-active) */

/* ============================================================
   4. CARD INFO-LAYERING — tier KICKER above the title (NOT a corner pill).
   The framed composite already carries its own baked-in location/%/logo, so
   stacking a second badge in the photo gutter competes with it. Instead the
   tier becomes the first text line of the card: a small uppercase eyebrow on
   the 1.4rem text inset, directly above the title — one canonical eyebrow
   grammar (olive-soft label + avocado tick), the SAME at every tier (the tier
   NAME differentiates Chef/Artisan/Reserve; colour is not needed and the rail
   already owns the olive-deep "selected" semantic).
   Printed by PHP (nutoast_wc_tier_badge) on before_shop_loop_item_title @11,
   so the loop order is image -> kicker -> title.
   ============================================================ */
body.nutoast-archive ul.products li.product .tier-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: .9rem 1.4rem 0;            /* between poster (.4rem mat) and title */
  font-family: var(--font-body); font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--olive-soft);
}
body.nutoast-archive ul.products li.product .tier-badge::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px;
  background: var(--avocado); flex: 0 0 auto;
}
/* the kicker now owns the gap above the title, so pull the title's top pad in */
body.nutoast-archive ul.products li.product .woocommerce-loop-product__title {
  padding-top: .45rem !important;
}

/* deepen the card hover so the grid plane separates from the recessed band.
   (base rule is translateY(-6px)/shadow-md; we go one step further here) */
body.nutoast-archive ul.products li.product:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   5. RESPONSIVE — reflow masthead + un-card the rail into scroll tabs.
   ============================================================ */
@media (max-width: 900px) {
  body.nutoast-archive .nutoast-masthead__inner { grid-template-columns: 1fr; gap: 1.6rem; }
  body.nutoast-archive .nutoast-masthead__scene { order: -1; min-height: clamp(160px, 40vw, 220px); }
  /* base CSS turns .tier-layout vertical + the rail into a horizontal scroller
     at <=900px; un-card it so it reads as a tab strip, header on its own line */
  body.nutoast-archive .tier-rail {
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  body.nutoast-archive .tier-rail__head {
    flex: 0 0 100%; margin: 0 0 .4rem; padding-bottom: 0; border-bottom: 0;
  }
}
@media (max-width: 600px) {
  body.nutoast-archive .nutoast-masthead { padding-block: clamp(2rem, 6vw, 2.6rem); }
  body.nutoast-archive .nutoast-masthead__count { display: block; margin: .5rem 0 0; transform: none; }
}

/* ============================================================
   6. A11y / motion / forced-colors.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.nutoast-archive .nutoast-masthead__scene img,
  body.nutoast-archive ul.products li.product { transition: none; }
  body.nutoast-archive ul.products li.product:hover { transform: none; }
  body.nutoast-archive .nutoast-masthead:hover .nutoast-masthead__scene img { transform: none; }
}
@media (forced-colors: active) {
  body.nutoast-archive .nutoast-masthead,
  body.nutoast-archive .tier-rail { border: 1px solid CanvasText; }
}


/* hover: border ring reacts, no lift/zoom (product cards + masthead + doc rows) */
.woocommerce ul.products li.product:hover, ul.products li.product:hover { transform: none; box-shadow: inset 0 0 0 2px var(--avocado), var(--shadow-sm); }
body.nutoast-archive .nutoast-masthead:hover .nutoast-masthead__scene img { transform: none; }
.nutoast-doc:hover { transform: none; border-color: var(--avocado); box-shadow: var(--shadow-sm); }

/* NUTOAST-ARCHIVE-MASTHEAD-FLUSH: archive band flush under fixed header (match .page-hero rhythm) */
body.nutoast-archive .woocommerce-wrap { padding-top: 0; }
body.nutoast-archive .nutoast-masthead { margin-top: 0; padding-block: clamp(6.6rem, 5.4rem + 2.4vw, 8rem) clamp(1.7rem, 2.4vw, 2.3rem); }

/* NUTOAST-SINGLE-ACTIONS: balanced 50/50 action pair */
.single-product .summary .nutoast-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; align-items: stretch; }
.single-product .summary .nutoast-actions__primary { grid-column: 1; margin: 0; gap: .55rem; justify-content: center; }
.single-product .summary .nutoast-actions__row { grid-column: 2; display: flex; margin: 0; flex-wrap: nowrap; }
.single-product .summary .nutoast-actions__row .btn--ghost { width: 100%; align-items: center; justify-content: center; font-size: 1rem; padding-block: 1.02em; gap: .5rem; }
.single-product .summary .nutoast-actions .nutoast-sample-link { grid-column: 1 / -1; }
@media (max-width: 520px) { .single-product .summary .nutoast-actions { grid-template-columns: 1fr; } .single-product .summary .nutoast-actions__primary, .single-product .summary .nutoast-actions__row { grid-column: 1; } }

/* NUTOAST-ACTIONS-ICONS */
.single-product .summary .nutoast-actions__primary > svg { display: none; }
.single-product .summary .nutoast-actions__primary::before, .single-product .summary .nutoast-actions .nutoast-add-inquiry::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.single-product .summary .nutoast-actions__primary::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203v4a1%201%200%200%200%201%201h4%27%2F%3E%3Cpath%20d%3D%27M5%208V5a2%202%200%200%201%202-2h7l5%205v11a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-1%27%2F%3E%3Cpath%20d%3D%27M9%2013h6M9%2017h6M3%2012h6%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203v4a1%201%200%200%200%201%201h4%27%2F%3E%3Cpath%20d%3D%27M5%208V5a2%202%200%200%201%202-2h7l5%205v11a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-1%27%2F%3E%3Cpath%20d%3D%27M9%2013h6M9%2017h6M3%2012h6%27%2F%3E%3C%2Fsvg%3E"); }
.single-product .summary .nutoast-actions .nutoast-add-inquiry::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%208.5v7M8.5%2012h7%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%208.5v7M8.5%2012h7%27%2F%3E%3C%2Fsvg%3E"); }
.single-product .summary .nutoast-actions .nutoast-add-inquiry.is-added::before { display: none; }

/* FIX: rich pd-detail + related must span the full product grid, not one column */
.single-product div.product .pd-detail { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 4rem); }
.single-product div.product .related.products,
.single-product div.product .upsells.products { grid-column: 1 / -1; }