/*
Theme Name: Caudill Seed Child
Template: generatepress
Version: 1.0.0
Text Domain: caudill-seed-child
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }

:root {
  --csh-green: #417c2f;
  --csh-green-light: #80b235;
  --csh-brown: #553a1a;
  --csh-white: #ffffff;
  --csh-off-white: #f7f7f2;
  --csh-muted: #6b645d;
  --csh-line: #e0dcd6;
  --csh-max-width: 1200px;
  /* Height of .csh-header (24px top padding + the nav pill). The hero pulls
     itself up by this much so the photo runs to the top of the page behind the
     pill, and the mobile hero pads itself back down by it so the white card
     clears the pill. Approximate is fine — a few px of error only shifts where
     the photo is cropped; the card's clearance is calculated from the same
     value, so it stays exact. Re-measure if the logo size or pill padding
     changes. */
  --csh-header-h: 98px;
  --csh-section-py: 3rem;
  --csh-section-px: 1rem;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 1.5;
  background: var(--csh-white);
}

h1, h2, h3, h4 {
  font-weight: 800;
  color: var(--csh-green);
  line-height: 1.15;
  /* GeneratePress's own h1/h2/etc. rules (assets/css/main.css) set their own
     margins (h1: margin-bottom: 20px) — an element selector, so it beats the
     universal `* { margin: 0 }` reset above by specificity, not load order.
     Zero it here explicitly; more specific selectors (.csh-cat-title,
     .csh-cat-cta-title, etc.) still win over this for headings that do want
     spacing. */
  margin: 0;
}

h2 {
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  text-align: center;
}

.csh-container {
  max-width: var(--csh-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Outer/inner pair used by every content section except the hero, header, and footer */
.csh-section {
  padding: var(--csh-section-py) var(--csh-section-px);
}

.csh-section-inner {
  max-width: var(--csh-max-width);
  margin-left: auto;
  margin-right: auto;
}

.csh-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Header ---------- */

.csh-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 24px 20px 0;
}

.csh-nav-pill {
  max-width: var(--csh-max-width);
  margin: 0 auto;
  background: var(--csh-white);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 32px;
  /* Positioning context + stacking context for the mobile menu overlay, which
     is a descendant of .csh-main-nav inside this pill. */
  position: relative;
}

.csh-logo {
  display: block;
  width: 170px;
  flex-shrink: 0;
}

.csh-main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.csh-main-nav a {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--csh-brown);
  white-space: nowrap;
}

.csh-main-nav a:hover { color: var(--csh-green); }

/* No .csh-header-actions / .csh-search-toggle rules: the search icon was
   removed from the pill on 2 Sep (client request). The pill is now just the
   logo and the nav, which `justify-content: space-between` pushes to the right
   edge — the menu on desktop, the hamburger on mobile. `search-icon.svg` is
   still in use by template-parts/product-filters.php, so the asset stays. */

/* The toggle is GenerateBlocks Pro's own markup (blocks/header.html): a button
   holding exactly TWO spans — .gb-menu-open-icon and .gb-menu-close-icon, each
   wrapping an SVG. It is NOT three bare <span> bars, so don't style bare
   `span` in here; doing so flattens both icons into 2px rules. GB Pro's
   classic-menu.js swaps them by adding .gb-menu-toggle--toggled to the button.
   It is shown at the 900px breakpoint below, not here. */
.csh-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 4px;
  color: var(--csh-brown);
  position: relative;
  z-index: 2;
}

/* GeneratePress's global button styling (inc/css-output.php, selector
   `button:not(.menu-toggle), ...`) is 0-1-1 and would otherwise paint this
   button in the theme's dark button colour — GP exempts its OWN `.menu-toggle`
   class, which this GB Pro button doesn't carry. Two classes to outrank it. */
.csh-nav-pill .csh-menu-toggle,
.csh-nav-pill .csh-menu-toggle:hover,
.csh-nav-pill .csh-menu-toggle:focus {
  background: none;
  color: var(--csh-brown);
}

.csh-menu-toggle svg { display: block; width: 26px; height: 26px; }

.csh-menu-toggle .gb-menu-close-icon { display: none; }
.csh-menu-toggle.gb-menu-toggle--toggled .gb-menu-open-icon { display: none; }
.csh-menu-toggle.gb-menu-toggle--toggled .gb-menu-close-icon { display: block; }

/* ---------- Hero ---------- */

.csh-hero {
  /* Pulled up under the sticky header so the photo runs to the top of the page.
     181px is a deliberate desktop overshoot: .csh-hero centres its card with
     `align-items: center`, and this value is what lands the card's top edge
     just below the pill at >640px. The mobile block re-derives it from
     --csh-header-h instead, because down there the card is taller than the
     hero's min-height, centring stops absorbing anything, and the desktop
     overshoot dragged the white card up behind the pill. */
  --csh-hero-pull: 181px;
  position: relative;
  z-index: 0;
  min-height: 800px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: calc(-1 * var(--csh-hero-pull));
}

.csh-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.csh-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.csh-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 800px;
  /* Mirrored, to match the approved mockup. The photo puts the mower ~27% in
     from the left, which is exactly where .csh-hero-card lands, so unflipped
     the hero reads as an empty lawn. scaleX(-1) moves the mower to ~73% —
     clear of the card at every width — without re-cropping or re-exporting
     the asset. object-position can't do this: the image is 3:2 and the hero
     is wider, so `cover` crops vertically only and X positioning is a no-op. */
  transform: scaleX(-1);
}

.csh-hero-card {
  position: relative;
  width: min(421px, 90vw);
  margin: 100px 0 60px clamp(20px, 8vw, 122px);
}

.csh-hero-card-shape { width: 100%; }

.csh-hero-card-content {
  position: absolute;
  inset: 16% 14% 14% 14%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.csh-hero-card-content h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}

.csh-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  background: var(--csh-green);
  color: var(--csh-white);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.csh-btn:hover { background: var(--csh-green-light); }
.csh-btn img { width: 16px; }

.csh-btn-outline {
  background: var(--csh-white);
  color: var(--csh-green);
  border: 1px solid var(--csh-green);
}

.csh-btn-outline:hover { background: var(--csh-off-white); }

.csh-hero-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.csh-hero-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.csh-hero-dots span.is-active { background: var(--csh-white); }

/* ---------- Trust bar ---------- */

.csh-trust-bar {
  background: var(--csh-green);
  border-radius: 60px;
  /* preserves the original -70px overlap into the hero now that .csh-section adds top padding */
  margin-top: calc(-1 * var(--csh-section-py) - 70px);
  position: relative;
  z-index: 2;
  padding: 40px clamp(24px, 5vw, 65px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.csh-trust-item {
  color: var(--csh-white);
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.csh-trust-item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csh-trust-item-text h3 {
  margin-bottom: 0;
}

.csh-trust-item > img { width: auto; height: 100%; flex-shrink: 0; }

.csh-trust-icon-badge {
  position: relative;
  display: block;
  aspect-ratio: 1;
  height: 100%;
  flex-shrink: 0;
}

.csh-trust-icon-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.csh-trust-icon-fg {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
}

.csh-trust-item h3 { color: var(--csh-white); font-size: 1.15rem; }
.csh-trust-item p { font-size: 0.9rem; opacity: 0.92; max-width: 26ch; }

/* ---------- Products ---------- */

.csh-products h2 { margin-bottom: 48px; }

.csh-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.csh-product-card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 272 / 356;
}

.csh-product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.csh-product-card:hover img { transform: scale(1.05); }

.csh-product-card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--csh-green-light);
  color: var(--csh-white);
  font-weight: 800;
  font-size: 1.1rem;
  text-align: center;
  padding: 14px 8px;
}

/* ---------- Wholesale ---------- */

.csh-wholesale {
  position: relative;
  background: linear-gradient(to left, var(--csh-green), var(--csh-green-light));
  border-top-left-radius: 100px;
  overflow: hidden;
}

/* Restructured 2 Sep (client): was a two-column split — heading left, a
   four-row `+` list right. Now a centred heading over four equal columns of
   heading + copy, with the photo still below. The old `.csh-wholesale-list`
   family and `assets/plus-icon.svg` went with it; the SVG is now unreferenced
   and can be deleted whenever assets get a cleanup pass. */
.csh-wholesale-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 60px;
}

.csh-wholesale h2 {
  color: var(--csh-white);
  text-align: center;
  font-size: clamp(1.9rem, 3vw, 3rem);
  /* Holds the two-line break the client's layout shows without a hardcoded
     <br>, which wrapped badly on a phone. `balance` evens the two lines
     (measured 420px / 401px at 1200px wide); browsers without it just wrap at
     the max-width, which is the same shape, less evenly split. */
  max-width: 24ch;
  text-wrap: balance;
  margin: 0 auto;
}

.csh-wholesale-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  margin-top: 56px;
}

.csh-wholesale-item h3 {
  color: var(--csh-white);
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.csh-wholesale-item p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.6;
}

.csh-wholesale-bg {
  /* wholesale-bg.png is 2000x710 and its TOP 220px are FULLY TRANSPARENT — the
     treeline silhouette starts at y=220 and the file is opaque from y=301. So
     the green band between the copy and the field is this section's own
     gradient showing through the image, not part of the photo and not a
     margin. To resize that band, change the 560 below; do NOT chase it with
     padding or margins, which is what the old 4096/1455 (= the file's own
     2.817 ratio, i.e. no crop at all) left you doing.

     The box is deliberately WIDER than 2.817, so `cover` scales the image to
     the box width and clips the vertical overflow; `object-position: bottom`
     makes that clip come off the top. 2000/560 discards 150 of the 220
     transparent rows and keeps ~70 (≈50px of green on a desktop viewport) as
     breathing room. No landscape is lost until this goes past 2000/490. */
  aspect-ratio: 2000 / 560;
  overflow: hidden;
  /* breaks out of .csh-section's padding so the photo stays flush left/right/bottom, and rises up over the content */
  margin: -60px calc(-1 * var(--csh-section-px)) calc(-1 * var(--csh-section-py));
  width: calc(100% + var(--csh-section-px) * 2);
}

.csh-wholesale-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* ---------- Testimonials ---------- */

.csh-testimonials h2 { margin-bottom: 56px; }

.csh-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.csh-testimonial {
  position: relative;
}

.csh-testimonial-shape { width: 100%; }

.csh-testimonial-content {
  position: absolute;
  inset: 20% 16% 18%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.csh-testimonial-quote { width: 32px; margin-bottom: 4px; }

.csh-testimonial-content p {
  color: var(--csh-white);
  font-size: 0.95rem;
}

.csh-testimonial-cite {
  color: var(--csh-white);
  font-weight: 700;
}

/* ---------- Quality ---------- */

.csh-quality {
  position: relative;
  z-index: 0;
  border-top-left-radius: 150px;
  overflow: hidden;
}

.csh-quality-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.csh-quality-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

.csh-quality-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csh-quality-card {
  background: var(--csh-white);
  border-radius: 24px;
  max-width: 1000px;
  margin: 0 auto 150px;
  padding: 56px clamp(24px, 5vw, 72px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.csh-quality-card h2 { margin-bottom: 48px; }

.csh-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.csh-quality-item { text-align: center; }

.csh-quality-item img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 0 auto 20px;
}

.csh-quality-item h3 {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.csh-quality-item p {
  font-size: 0.9rem;
  color: #444;
}

/* ---------- CTA ---------- */

.csh-cta {
  position: relative;
  z-index: 1;
  background: linear-gradient(to left, var(--csh-green), var(--csh-green-light));
  border-top-left-radius: 150px;
  /* overlaps up into .csh-quality's extra bottom clearance so the rounded corner cutout reveals that section's own photo instead of a gap */
  margin-top: -150px;
}

.csh-cta-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.csh-cta h2 {
  color: var(--csh-white);
  text-align: left;
  font-size: clamp(1.9rem, 3vw, 3rem);
}

.csh-cta-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  color: var(--csh-white);
}

.csh-cta-info h3 {
  color: var(--csh-white);
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.csh-cta-info p { font-size: 0.9rem; }
.csh-cta-info a { text-decoration: underline; }

/* ---------- Footer ---------- */

.csh-footer {
  background: var(--csh-white);
  padding-top: 70px;
}

.csh-footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr;
  gap: 32px;
  padding-bottom: 60px;
}

.csh-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.csh-footer-logo { width: 190px; }

.csh-social-icons {
  display: flex;
  gap: 14px;
}

.csh-social-icons img { width: 30px; height: 30px; }

.csh-footer-col h4 {
  color: var(--csh-green);
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.csh-footer-col li { margin-bottom: 10px; }
.csh-footer-col a { font-size: 0.95rem; color: var(--csh-green); }
.csh-footer-col a:hover { text-decoration: underline; }

.csh-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.csh-subscribe-form input {
  border: 1px solid var(--csh-green);
  border-radius: 999px;
  padding: 12px 20px;
  font: inherit;
  font-size: 0.9rem;
}

.csh-subscribe-form input:focus {
  outline: 2px solid var(--csh-green-light);
  outline-offset: 2px;
}

.csh-subscribe-form button {
  background: var(--csh-green);
  color: var(--csh-white);
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 20px;
  transition: background 0.2s ease;
}

.csh-subscribe-form button:hover { background: var(--csh-green-light); }

.csh-footer-bottom {
  border-top: 1px solid #ddd;
  padding: 24px 20px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.csh-footer-bottom p {
  font-size: 0.85rem;
  color: var(--csh-green);
}

.csh-footer-bottom a { text-decoration: underline; }

.csh-payment-icons {
  display: flex;
  gap: 10px;
}

.csh-payment-icons img { height: 24px; width: auto; }

/* ---------- Page hero (global, used site-wide via the Hero Element) ---------- */

.csh-page-hero {
  position: relative;
  z-index: 0;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -181px;
}

.csh-page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* :not(.csh-page-hero-scrim), not :first-child — .csh-page-hero--solid omits
   the photo entirely, which would otherwise shift the scrim into the
   first-child position and pick up this sizing instead of its own. */
.csh-page-hero-bg > img:not(.csh-page-hero-scrim) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 620px;
}

.csh-page-hero--solid .csh-page-hero-bg {
  background: var(--csh-green);
}

/* Same green fallback for the global hero (GP Element 98) on any page or
   post without a Featured Image. The element's <img src="{{featured_image}}">
   renders empty in that case, so hide it and paint the bg instead. The body
   class comes from csh_hero_solid_body_class() in functions.php. */
body.csh-hero-solid .csh-page-hero .csh-page-hero-bg {
  background: var(--csh-green);
}
body.csh-hero-solid .csh-page-hero .csh-page-hero-bg > img:not(.csh-page-hero-scrim) {
  display: none;
}

.csh-page-hero-scrim {
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  height: 100%;
}

.csh-page-hero-content {
  position: relative;
  width: 100%;
  padding: 181px var(--csh-section-px) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
}

.csh-page-hero-heading {
  display: flex;
  align-items: center;
  gap: 20px;
}

.csh-page-hero-heading h1 {
  color: var(--csh-white);
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  text-align: left;
}

.csh-page-hero-content p {
  color: var(--csh-white);
  font-size: 1rem;
  max-width: 34ch;
}

.csh-leaf-accent {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

/* ---------- About page ---------- */

.csh-about-story-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}

.csh-about-story-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.csh-about-story-heading h2 {
  text-align: left;
}

/* The story band's inner is a two-column grid, so every DIRECT child takes a
   cell. With one paragraph that worked; the 3 Sep copy has four, and they would
   have wrapped back under the heading. The paragraphs now live in a
   `.csh-about-story-text` wrapper, which is one grid item however many it holds.
   (A bare `.csh-about-story-inner > p` rule lived here until page 84 was pushed
   on 3 Sep; nothing matches it now, so it is gone.) */
.csh-about-story-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--csh-green);
}

/* Third consumer of the 760px measure, alongside `.csh-post-inner` (blog) and
   `.csh-policy-inner` (policy pages). The measure is deliberately per-consumer:
   `.csh-prose` supplies type and rhythm only, and forking it was the thing the
   2 Sep rename was meant to prevent. */
.csh-about-prose-inner {
  max-width: 760px;
}

.csh-about-quality-card {
  padding-bottom: 56px;
}

.csh-about-quality-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
}

.csh-about-quality-photo {
  width: 100%;
  border-radius: 4px;
}

.csh-about-quality-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--csh-green);
  font-size: 0.95rem;
}

/* ---------- Product page ---------- */

.csh-product-hero {
  position: relative;
  z-index: 0;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -181px;
}

.csh-product-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* :not(.csh-product-hero-scrim), not :first-child — same reasoning as
   .csh-page-hero-bg above: .csh-product-hero--solid always omits the photo. */
.csh-product-hero-bg > img:not(.csh-product-hero-scrim) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 680px;
}

.csh-product-hero--solid .csh-product-hero-bg {
  background: var(--csh-green);
}

.csh-product-hero-scrim {
  position: absolute;
  left: 0;
  top: 0;
  width: 87%;
  height: 100%;
}

.csh-product-hero-inner {
  position: relative;
  width: 100%;
  padding: 181px var(--csh-section-px) 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.csh-product-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
}

.csh-product-hero-heading {
  display: flex;
  align-items: center;
  gap: 20px;
}

.csh-product-hero-heading h1 {
  color: var(--csh-white);
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  text-align: left;
}

.csh-product-meta {
  color: var(--csh-white);
  font-size: 1rem;
}

/* Labelled one-off rows (MFG #, Material, Seed Type…) under the hero meta line.
   Sits on the green hero, so it inherits white — not the box-body green. */
.csh-product-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--csh-white);
}

.csh-product-attr {
  display: flex;
  gap: 6px;
  max-width: 100%;
}

.csh-product-attr dt {
  opacity: 0.75;
  white-space: nowrap;
}

.csh-product-attr dt::after { content: ":"; }

.csh-product-attr dd {
  margin: 0;
  font-weight: 600;
}

.csh-product-hero-image {
  justify-self: center;
  width: min(100%, 420px);
  aspect-ratio: 1;
}

.csh-product-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.csh-product-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.csh-product-box {
  border: 1px solid #4d4d4d;
  border-radius: 5px;
  overflow: hidden;
}

.csh-product-box-header {
  background: linear-gradient(to left, var(--csh-green), var(--csh-green-light));
  padding: 14px;
}

.csh-product-box-header h2 {
  color: var(--csh-white);
  font-size: 1.25rem;
  margin: 0;
}

.csh-product-box-body {
  padding: 32px clamp(20px, 4vw, 48px);
  color: var(--csh-green);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.csh-product-bullets {
  list-style: disc;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Specifications are label/value pairs now, not free-text bullets. Products
   whose specs carry a group heading get an <h3> per group; the common case
   (one group literally named "Specifications") suppresses it in the template
   so the box header isn't repeated. */
.csh-spec-group {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.csh-spec-list {
  display: flex;
  flex-direction: column;
}

.csh-spec-row {
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--csh-line);
}

.csh-spec-row:last-child { border-bottom: 0; }
.csh-spec-row:first-child { padding-top: 0; }

.csh-spec-row dt { font-weight: 600; }
.csh-spec-row dd { margin: 0; }

.csh-product-downloads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.csh-product-downloads li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.csh-product-downloads a {
  color: var(--csh-green);
  font-weight: 600;
  text-decoration: underline;
}

.csh-product-downloads a:hover,
.csh-product-downloads a:focus-visible { color: var(--csh-green-light); }

.csh-download-note {
  font-size: 0.8125rem;
  color: var(--csh-muted);
}

.csh-product-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.csh-product-gallery img {
  width: 100%;
  aspect-ratio: 249 / 312;
  object-fit: cover;
  border-radius: 4px;
}

/* .csh-cta's -150px overlap is designed to sit over a quality-card's matching
   bottom clearance (home/about pages) — the product page has no such section
   before its CTA, so cancel the overlap or it covers the gallery. */
.csh-product-cta {
  margin-top: 0;
}

/* ---------- Product category archive ---------- */

/* Heading over a parent category's own products, shown beneath its subcategory
   tiles. 5 parents hold 39 products that live on no child term. */
.csh-cat-subhead {
  font-size: 1.25rem;
  color: var(--csh-green);
  margin: 40px 0 20px;
}


.csh-crumbs {
  font-size: 0.875rem;
  color: var(--csh-muted);
  padding-bottom: 20px;
}

.csh-crumbs a {
  color: var(--csh-muted);
  text-decoration: none;
}

.csh-crumbs a:hover,
.csh-crumbs a:focus-visible {
  color: var(--csh-green);
  text-decoration: underline;
}

.csh-crumbs-sep {
  margin-inline: 8px;
  color: var(--csh-line);
}

.csh-cat-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

.csh-cat-sidebar {
  position: sticky;
  top: 24px;
}

.csh-cat-sidebar-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--csh-muted);
  margin-bottom: 12px;
}

.csh-cat-nav-item > a {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.csh-cat-nav-item > a:hover,
.csh-cat-nav-item > a:focus-visible {
  background: var(--csh-off-white);
}

.csh-cat-nav-item.is-current > a {
  background: var(--csh-off-white);
  color: var(--csh-green);
  font-weight: 700;
}

.csh-cat-nav .csh-cat-nav {
  margin-left: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--csh-line);
}

.csh-cat-head {
  padding-bottom: 36px;
  max-width: 68ch;
}

/* Still used by taxonomy-brand.php's <h1> — taxonomy-product_cat.php's own
   h1 moved into its custom .csh-page-hero and no longer uses this class. */
.csh-cat-title { margin-bottom: 16px; text-align: left; }

/* taxonomy-brand.php: shown instead of .csh-cat-title when a brand_logo
   is set (the <h1> stays in the DOM as .csh-visually-hidden text). */
.csh-brand-logo {
  max-width: 240px;
  max-height: 120px;
  width: auto;
  height: auto;
  margin-bottom: 16px;
}

.csh-cat-intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--csh-muted);
}

.csh-cat-intro p:last-child { margin-bottom: 0; }

.csh-cat-tiles,
.csh-cat-products {
  display: grid;
  gap: 24px;
}

.csh-cat-tiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.csh-cat-products { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.csh-cat-tile-link,
.csh-cat-product-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--csh-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--csh-white);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.csh-cat-product-link { display: flex; flex-direction: column; height: 100%; }

.csh-cat-tile-link:hover,
.csh-cat-tile-link:focus-visible,
.csh-cat-product-link:hover,
.csh-cat-product-link:focus-visible {
  border-color: var(--csh-green);
  transform: translateY(-2px);
}

.csh-cat-tile-media {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--csh-off-white);
  position: relative;
}

.csh-cat-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Brand logo tiles — a logo shouldn't crop-fill the box the way a category
   hero photo does, so it gets its own fit + breathing room instead. */
.csh-cat-tile-media.is-logo img {
  object-fit: contain;
  padding: 28px;
}

/* Shown until the 10 tile images are supplied */
.csh-cat-tile-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--csh-white);
  background: var(--csh-green);
}

.csh-cat-tile-name {
  display: block;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 1.0625rem;
}

.csh-cat-product-media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--csh-off-white);
}

.csh-cat-product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.csh-cat-product-body { display: block; padding: 16px 18px 20px; }

.csh-cat-product-brand {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--csh-green);
  margin-bottom: 6px;
}

.csh-cat-product-name {
  display: block;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 6px;
}

.csh-cat-product-sku {
  display: block;
  font-size: 0.8125rem;
  color: var(--csh-muted);
}

.csh-cat-empty {
  padding: 32px;
  background: var(--csh-off-white);
  border-radius: 4px;
  color: var(--csh-muted);
}

.csh-cat-archive .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 40px 4px 0 0;
  border: 1px solid var(--csh-line);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
}

.csh-cat-archive .page-numbers.current {
  background: var(--csh-green);
  border-color: var(--csh-green);
  color: var(--csh-white);
}

.csh-cat-cta {
  margin-top: 56px;
  padding: 36px 32px;
  background: var(--csh-off-white);
  border-top: 3px solid var(--csh-green);
  border-radius: 4px;
}

.csh-cat-cta-title { margin-bottom: 8px; text-align: left; }

.csh-cat-cta-text {
  margin-bottom: 20px;
  color: var(--csh-muted);
  max-width: 56ch;
}

.csh-cat-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.csh-cat-archive a:focus-visible {
  outline: 2px solid var(--csh-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .csh-cat-tile-link,
  .csh-cat-product-link {
    transition: none;
  }

  .csh-cat-tile-link:hover,
  .csh-cat-product-link:hover {
    transform: none;
  }
}

/* ---------- Product filters (/products) ---------- */

.csh-filters {
  position: sticky;
  top: 24px;
  border: 1px solid var(--csh-line);
  border-radius: 4px;
  padding: 20px;
}

.csh-filters-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.csh-filters-title {
  font-size: 1.0625rem;
  margin: 0;
}

.csh-filters-clear {
  font-size: 0.8125rem;
  color: var(--csh-muted);
  text-decoration: underline;
  white-space: nowrap;
}

.csh-filters-clear:hover,
.csh-filters-clear:focus-visible {
  color: var(--csh-green);
}

.csh-filters-search {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.csh-filters-search input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--csh-line);
  border-radius: 4px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9375rem;
}

.csh-filters-search input:focus-visible {
  outline: 2px solid var(--csh-green);
  outline-offset: 2px;
}

.csh-filters-search-submit {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--csh-line);
  border-radius: 4px;
}

.csh-filters-search-submit img {
  width: 18px;
  height: 18px;
  max-width: none;
}

.csh-filters-search-submit:hover,
.csh-filters-search-submit:focus-visible {
  border-color: var(--csh-green);
}

.csh-filters-summary {
  display: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--csh-green);
  padding: 8px 0;
  margin-bottom: 8px;
}

.csh-filters-summary:focus-visible {
  outline: 2px solid var(--csh-green);
  outline-offset: 2px;
}

.csh-filter-group {
  border: none;
  padding: 0;
  margin: 0 0 24px;
}

.csh-filter-legend {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--csh-muted);
  margin-bottom: 10px;
  padding: 0;
}

.csh-filter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csh-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 0.9375rem;
  cursor: pointer;
}

.csh-filter-label input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--csh-green);
}

.csh-filter-label input:focus-visible {
  outline: 2px solid var(--csh-green);
  outline-offset: 2px;
}

.csh-filter-name { flex: 1; }

.csh-filter-count {
  font-size: 0.8125rem;
  color: var(--csh-muted);
}

.csh-filter-more {
  margin-top: 4px;
}

.csh-filter-more .csh-filter-list {
  margin-top: 4px;
}

.csh-filter-more-summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--csh-green);
  text-decoration: underline;
}

.csh-filter-more-summary:focus-visible {
  outline: 2px solid var(--csh-green);
  outline-offset: 2px;
}

.csh-filters-submit {
  width: 100%;
  justify-content: center;
}

.csh-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.csh-results-title { margin: 0; text-align: left; }

.csh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.csh-chip a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--csh-green);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--csh-green);
}

.csh-chip a:hover,
.csh-chip a:focus-visible {
  background: var(--csh-off-white);
}

.csh-results-empty {
  padding: 32px;
  background: var(--csh-off-white);
  border-radius: 4px;
  color: var(--csh-muted);
}

.csh-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 40px;
}

.csh-page {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--csh-line);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
}

.csh-page.current {
  background: var(--csh-green);
  border-color: var(--csh-green);
  color: var(--csh-white);
}

/* ---------- Contact pages ---------- */

.csh-contact-routes-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.csh-contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 36px;
  background: var(--csh-off-white);
  border: 1px solid var(--csh-line);
  border-radius: 4px;
  border-top-left-radius: 40px;
}

.csh-contact-card h2 {
  font-size: 1.5rem;
  text-align: left;
}

.csh-contact-card p {
  color: var(--csh-muted);
  font-size: 0.95rem;
  flex-grow: 1;
}

.csh-contact-details {
  background: var(--csh-off-white);
}

.csh-contact-details-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.csh-contact-detail h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.csh-contact-detail p {
  font-size: 0.95rem;
  color: #444;
}

.csh-contact-detail a {
  text-decoration: underline;
}

/* ---------- Staff directory ---------- */

.csh-staff-intro {
  max-width: 70ch;
  margin: 16px auto 0;
  text-align: center;
  color: var(--csh-muted);
  font-size: 0.95rem;
}

.csh-staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.csh-staff-card {
  padding: 28px;
  background: var(--csh-white);
  border: 1px solid var(--csh-line);
  border-radius: 4px;
  border-top-left-radius: 40px;
}

.csh-staff-card h3 {
  font-size: 1.2rem;
}

.csh-staff-role {
  color: var(--csh-green-light);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 0 14px;
}

.csh-staff-contact {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
}

.csh-staff-contact a {
  text-decoration: underline;
  word-break: break-word;
}

/* ---------- General inquiry ---------- */

.csh-inquiry-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
}

.csh-inquiry-lede {
  color: var(--csh-muted);
  margin-bottom: 28px;
}

.csh-inquiry-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.csh-inquiry-card {
  padding: 28px;
  background: var(--csh-off-white);
  border: 1px solid var(--csh-line);
  border-radius: 4px;
}

.csh-inquiry-card h3 {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.csh-inquiry-card p {
  font-size: 0.95rem;
  color: #444;
}

.csh-inquiry-card p + p {
  margin-top: 14px;
}

.csh-inquiry-card a {
  text-decoration: underline;
}

.csh-inquiry-hours {
  color: var(--csh-muted);
  font-size: 0.875rem;
}

/* Gravity Forms — inherit the site's type and green, rather than the plugin's defaults */
.csh-inquiry-form .gform_wrapper .gform_fields {
  gap: 20px;
}

.csh-inquiry-form .gform_wrapper .gfield_label {
  font-weight: 700;
  color: var(--csh-green);
  font-size: 0.9rem;
}

.csh-inquiry-form .gform_wrapper input[type="text"],
.csh-inquiry-form .gform_wrapper input[type="email"],
.csh-inquiry-form .gform_wrapper input[type="tel"],
.csh-inquiry-form .gform_wrapper textarea {
  border: 1px solid var(--csh-line);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  width: 100%;
}

.csh-inquiry-form .gform_wrapper input:focus,
.csh-inquiry-form .gform_wrapper textarea:focus {
  outline: 2px solid var(--csh-green-light);
  outline-offset: 1px;
}

.csh-inquiry-form .gform_wrapper .gform_button {
  background: var(--csh-green);
  color: var(--csh-white);
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 4px;
  cursor: pointer;
}

.csh-inquiry-form .gform_wrapper .gform_button:hover {
  background: var(--csh-green-light);
}

/* ---------- Blog: index cards ---------- */

/* Same grid, border, radius and hover lift as .csh-cat-product — the blog is
   part of the same catalogue-shaped site, not a separate design. */
.csh-post-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.csh-post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--csh-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--csh-white);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.csh-post-card-link:hover,
.csh-post-card-link:focus-visible {
  border-color: var(--csh-green);
  transform: translateY(-2px);
}

.csh-post-card-media {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--csh-off-white);
  position: relative;
}

.csh-post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Green panel with the leaf mark, shown while a post has no featured image.
   Mirrors .csh-cat-tile-fallback. Every migrated post uses this today; new
   posts with a featured image get the photo instead, here and in the hero. */
.csh-post-card-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--csh-green), var(--csh-green-light));
}

.csh-post-card-fallback img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.9;
}

.csh-post-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  flex-grow: 1;
}

.csh-post-card-date {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--csh-green-light);
}

.csh-post-card-title {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--csh-green);
}

.csh-post-card-excerpt {
  display: block;
  font-size: 0.875rem;
  color: var(--csh-muted);
  line-height: 1.55;
}

.csh-blog-empty {
  color: var(--csh-muted);
}

/* ---------- Blog: single post ---------- */

.csh-blog-hero-meta {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.csh-post-inner {
  max-width: 760px;
}

/* Shared long-form body copy. Renamed from `.csh-post-content` on 2 Sep when
   the Shipping and Returns page needed the same treatment — per this theme's
   naming rule, a class that turns out to be shared gets renamed rather than
   borrowed. Used by `single.php` (blog posts) and `.csh-policy` pages. If a
   third consumer wants different spacing, add a modifier; don't fork this.

   65-75 characters per line is the readable range; the 760px wrapper the
   consumer supplies sets it. Body copy is deliberately larger than the card
   and tile text. */
.csh-prose {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #333;
}

.csh-prose > * + * {
  margin-top: 1.25em;
}

.csh-prose h2 {
  font-size: 1.5rem;
  margin-top: 2em;
  /* The global `h2` rule centres every h2 site-wide. That's an element
     selector, so it loses to this one on specificity — but only for the
     properties this rule declares, and it never declared text-align. Body-copy
     h2s were therefore centred inside a 760px measure. Declare it. */
  text-align: left;
}

.csh-prose h3 {
  font-size: 1.2rem;
  margin-top: 1.75em;
}

.csh-prose ul {
  list-style: disc;
  padding-left: 1.25em;
}

.csh-prose li + li {
  margin-top: 0.5em;
}

.csh-prose a {
  color: var(--csh-green);
  text-decoration: underline;
}

.csh-prose em {
  color: var(--csh-muted);
}

.csh-post-back {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--csh-line);
  font-weight: 700;
}

.csh-post-back a:hover { color: var(--csh-green); }

.csh-post-nav {
  padding-top: 0;
}

.csh-post-nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.csh-post-nav-link {
  display: block;
  padding: 20px 24px;
  border: 1px solid var(--csh-line);
  border-radius: 4px;
  background: var(--csh-off-white);
  transition: border-color 0.15s ease;
}

.csh-post-nav-link:hover { border-color: var(--csh-green); }

/* A post with no previous sits alone; push it to the right so "Next" stays
   on the side the reader expects rather than jumping to the left column. */
.csh-post-nav-next { grid-column: 2; text-align: right; }

.csh-post-nav-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--csh-green-light);
  margin-bottom: 6px;
}

.csh-post-nav-title {
  display: block;
  font-weight: 700;
  color: var(--csh-green);
  line-height: 1.3;
}

/* ---------- Policy pages (Shipping and Returns; Privacy and Terms to follow) ---------- */

/* Body copy comes from the shared `.csh-prose` family in "Blog: single post"
   above — this section only supplies the measure. There is no `<h1>` in the
   page content: the global Hero Element (post 98) renders it from the
   `page_title` ACF field, same as About and FAQs. */
.csh-policy-inner {
  max-width: 760px;
}

/* ---------- 404 / 410 ---------- */

/* 404.php: green hero (blog-hero, solid) + a short message. The 410 mu-plugin
   (caudill-410-gone.php) renders the same template with a 410 status and
   swaps the copy via the csh_404_copy filter args. */
.csh-404-inner {
  max-width: 760px;
  padding-top: 64px;
  padding-bottom: 64px;
}
.csh-404-inner p {
  font-size: 1.125rem;
}
/* Scoped under .csh-prose on purpose: its `ul` / `li + li` rules (disc,
   indent, item spacing) otherwise win on specificity and put bullets on the
   pills. */
.csh-prose .csh-404-links {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.csh-prose .csh-404-links li {
  margin: 0;
  padding: 0;
}
.csh-404-links a {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--csh-green);
  border-radius: 999px;
  color: var(--csh-green);
  font-weight: 600;
  text-decoration: none;
}
.csh-404-links a:hover {
  background: var(--csh-green);
  color: #fff;
}
/* ---------- FAQs ---------- */

/* GenerateBlocks Pro supplies .gb-accordion__* behaviour and base styles; these
   rules only skin it. Do not rename the gb- classes — accordion.js selects on
   .gb-accordion__item, __toggle and __content. */

.csh-faqs-inner {
  max-width: 820px;
}

.csh-faqs-lede {
  color: var(--csh-muted);
  margin-bottom: 32px;
}

.csh-faqs-lede a {
  color: var(--csh-green);
  text-decoration: underline;
}

.csh-faq-accordion .gb-accordion__item {
  border: 1px solid var(--csh-line);
  border-radius: 4px;
  background: var(--csh-white);
  margin-bottom: 12px;
  overflow: hidden;
}

.csh-faq-accordion .gb-accordion__item:hover {
  border-color: var(--csh-green-light);
}

.csh-faq-accordion .gb-accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 700;
  color: var(--csh-green);
  line-height: 1.35;
}

.csh-faq-accordion .gb-accordion__toggle:focus-visible {
  outline: 2px solid var(--csh-green-light);
  outline-offset: -2px;
}

/* Chevron drawn in CSS rather than shipped as an asset — one less file, and it
   rotates on open without a second icon. */
.csh-faq-icon {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--csh-green-light);
  border-bottom: 2px solid var(--csh-green-light);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-bottom: 4px;
}

.csh-faq-accordion .gb-accordion__item-open .csh-faq-icon,
.csh-faq-accordion .gb-block-is-current .csh-faq-icon {
  transform: rotate(225deg);
  margin-bottom: 0;
  margin-top: 4px;
}

.csh-faq-a {
  padding: 0 22px 22px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #444;
}

.csh-faq-a p + p {
  margin-top: 1em;
}

.csh-faq-a a {
  color: var(--csh-green);
  text-decoration: underline;
}

/* ---------------------------------------------------
   Responsive
   --------------------------------------------------- */

@media (max-width: 1080px) {
  .csh-footer-top {
    grid-template-columns: repeat(3, 1fr);
  }
  .csh-footer-brand { grid-column: 1 / -1; }
  .csh-subscribe-form { grid-column: 1 / -1; max-width: 400px; }
}

@media (max-width: 900px) {
  .csh-post-nav-inner { grid-template-columns: 1fr; }
  .csh-post-nav-next { grid-column: 1; text-align: left; }

  .csh-staff-grid { grid-template-columns: repeat(2, 1fr); }
  .csh-contact-details-inner { grid-template-columns: 1fr 1fr; }
  .csh-inquiry-inner { grid-template-columns: 1fr; gap: 40px; }

  /* Mobile menu — a full-screen overlay, matching the block's own
     data-gb-mobile-menu-type="full-overlay".

     GB Pro's classic-menu.js does the toggling: .gb-navigation--open on the
     <nav>, .gb-menu-toggle--toggled on the button, .gb-menu-container--toggled
     on the panel, data-gb-menu-open on <body>. The block's generated CSS only
     contributes `display: none` on the untoggled container; every visual rule
     here is ours.

     NEVER put `display: none` on .csh-main-nav at this breakpoint — the toggle
     button is a child of it, so hiding the nav hides the hamburger too. That
     was the bug: the button existed and the JS was loaded, but nothing was
     painted. Hide .gb-menu-container (which GB Pro already does), not the nav. */
  .csh-menu-toggle { display: flex; }

  .csh-main-nav .gb-menu-container {
    position: fixed;
    inset: 0;
    /* Inside .csh-nav-pill's stacking context. The logo and the toggle are
       lifted to z-index 2 so they stay clickable above this sheet; the pill's
       own white background sits under it, which is why the overlay reads as
       one continuous white field. */
    z-index: 1;
    background: var(--csh-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--csh-header-h) + 24px) 32px 32px;
    overflow-y: auto;
  }

  .csh-main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .csh-main-nav a { font-size: 1.15rem; }

  /* classic-menu.js clones the toggle into the container as an overlay close
     button (.gb-menu-toggle--clone) and gives it GP's dark nav background.
     Our own toggle sits above the sheet and already swaps to an X, so the
     clone is a duplicate — hide it rather than restyling a second X. */
  .csh-main-nav .gb-menu-toggle--clone { display: none; }

  /* Keep the pill's contents above the sheet so the header still reads as a
     header while the menu is open. The pill's own white background and shadow
     stay underneath it — a descendant can't paint behind its ancestor's
     background — which is why the overlay reads as one white field. */
  .csh-logo { position: relative; z-index: 2; }

  body[data-gb-menu-open] { overflow: hidden; }

  .csh-trust-bar { grid-template-columns: 1fr; }
  .csh-products-grid { grid-template-columns: repeat(2, 1fr); }
  .csh-wholesale-grid { grid-template-columns: repeat(2, 1fr); }
  .csh-testimonial-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .csh-quality-grid { grid-template-columns: 1fr; gap: 32px; }
  .csh-cta-inner { grid-template-columns: 1fr; }
  .csh-cta-info { grid-template-columns: 1fr; }
  .csh-about-story-inner { grid-template-columns: 1fr; }
  .csh-about-quality-grid { grid-template-columns: 1fr; }
  .csh-about-quality-photo { max-width: 220px; }
  .csh-product-hero-inner { grid-template-columns: 1fr; padding-bottom: 20px; }
  .csh-product-hero-image { order: -1; width: min(100%, 280px); }
  .csh-product-gallery { grid-template-columns: repeat(2, 1fr); }
  .csh-cat-layout { grid-template-columns: 1fr; }
  .csh-cat-sidebar { position: static; order: 2; }
  .csh-cat-main { order: 1; }
  .csh-filters { position: static; order: 2; }
  .csh-filters-summary { display: block; }
}

@media (max-width: 640px) {
  .csh-faq-accordion .gb-accordion__toggle { padding: 16px 18px; font-size: 0.9375rem; }
  .csh-faq-a { padding: 0 18px 18px; }

  .csh-post-cards { grid-template-columns: 1fr; }
  .csh-prose { font-size: 1rem; }

  .csh-contact-routes-inner { grid-template-columns: 1fr; }
  .csh-contact-details-inner { grid-template-columns: 1fr; gap: 28px; }
  .csh-staff-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .csh-contact-card { padding: 28px; }

  .csh-nav-pill { border-radius: 24px; padding: 14px 20px; }
  /* Pill padding drops from 16px to 14px here, so the header loses 4px. */
  :root { --csh-header-h: 94px; }

  /* Below 640px the card (90vw wide, so ~400px tall) plus its margins exceed
     the hero's min-height, so `align-items: center` has no free space left to
     distribute and the card lands at exactly hero-top + margin-top. With the
     desktop 181px overshoot that put the white shape above the nav pill.
     Top-align instead and pad down by the real header height: the card then
     clears the pill by 20px no matter how the two boxes are sized. */
  .csh-hero {
    --csh-hero-pull: var(--csh-header-h);
    align-items: flex-start;
    min-height: 0;
    padding-top: calc(var(--csh-header-h) + 20px);
    padding-bottom: 110px;
  }
  .csh-hero-card { margin: 0 0 0 clamp(20px, 8vw, 122px); }
  .csh-trust-bar { border-radius: 32px; }
  .csh-products-grid { grid-template-columns: 1fr; }
  .csh-quality-card { padding: 36px 20px; }
  .csh-wholesale, .csh-cta { border-top-left-radius: 60px; }
  .csh-wholesale-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .csh-cta { margin-top: -60px; }
  .csh-quality-card { margin-bottom: 60px; }
  .csh-page-hero { min-height: 480px; }
  .csh-page-hero-scrim { width: 100%; }
  .csh-page-hero-heading { flex-wrap: wrap; }
  .csh-product-hero { min-height: 560px; }
  .csh-product-hero-scrim { width: 100%; }
  .csh-product-hero-heading { flex-wrap: wrap; }
  .csh-product-box-body { padding: 24px 20px; }
  .csh-product-gallery { grid-template-columns: 1fr; }
  .csh-spec-row { grid-template-columns: 1fr; gap: 2px; }
  .csh-cat-tiles, .csh-cat-products { grid-template-columns: 1fr; }
}