/*
 * excavator-pro main stylesheet.
 * Mobile-first, plain authored CSS, no framework, no build step.
 * Depends on assets/css/tokens.css (enqueued first) for all color/spacing/
 * typography/radius/shadow values via var(--token-name).
 *
 * Table of contents:
 *   1. Reset & base
 *   2. Layout utilities
 *   3. Typography
 *   4. Buttons
 *   5. Accessibility helpers (skip-link, screen-reader-text)
 *   6. Site header / utility bar / primary nav (incl. mobile states)
 *   7. Hero
 *   8. Trust bar
 *   9. Section header (shared)
 *  10. Featured products (slider of real WooCommerce product cards)
 *  11. Testimonials (slider)
 *  12. FAQ accordion
 *  13. Closing CTA banner
 *  14. Footer
 *  15. Blog / page / archive templates
 *  16. Comments
 *  17. Breadcrumb
 *  18. Slider component (native scroll-snap + minimal JS)
 *  19. Category tiles ("Shop by Class" homepage section)
 *  20. Split banner (2-column promo: specialist / buying guide)
 *  21. Blog teaser ("From the Blog" homepage section)
 */

/* ------------------------------------------------------------------ */
/* 1. Reset & base                                                     */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
  /* Safety net, not the fix for any specific bug: nothing on this page is
     meant to scroll horizontally at the document level (sliders scroll
     within their own [data-slider-track], which has its own overflow-x:auto
     — see section 18), so a stray element a few pixels too wide should never
     be able to add a page-wide horizontal scrollbar/shift. Set on the root
     element specifically (not body) so it can't interfere with
     position: sticky elsewhere on the page (see .site-header) — a scroll
     container introduced on an element BETWEEN a sticky element and the
     viewport can break sticky positioning, and html IS the viewport-level
     scroller by default, so this doesn't introduce a new one. */
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
}

/* Sticky footer: #content (header.php -> footer.php) grows to fill any
   leftover viewport height so the footer never floats up under short
   pages (e.g. a 404, or a page with little content). */
#content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

#content > .site-main {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* ------------------------------------------------------------------ */
/* Scroll-reveal (progressive enhancement: .js-reveal-ready gates this  */
/* so content is never hidden if JS fails to load; see main.js)         */
/* ------------------------------------------------------------------ */

@media ( prefers-reduced-motion: no-preference ) {
  .js-reveal-ready .trust-item,
  .js-reveal-ready .category-tile,
  .js-reveal-ready .testimonial-card,
  .js-reveal-ready .faq-item,
  .js-reveal-ready .section-header,
  .js-reveal-ready .closing-cta__inner,
  .js-reveal-ready .split-banner__inner,
  .js-reveal-ready .post-card,
  .js-reveal-ready ul.products li.product,
  .js-reveal-ready .featured-products .slider__slide {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--duration-slow) var(--ease-entrance), transform var(--duration-slow) var(--ease-entrance);
    /* Set per-target by initScrollReveal() in main.js, counted among sibling
       reveal targets that share the same slider track (for slide-based
       sections) or the same parent element otherwise — never a page-wide
       index, so one section's item count never bleeds into another's
       timing. min()/calc() below turns that into a delay that grows with
       position but never drags a long list out past 0.6s. */
    transition-delay: min(calc(var(--reveal-index, 0) * 0.06s), 0.6s);
  }

  .js-reveal-ready .trust-item.is-visible,
  .js-reveal-ready .category-tile.is-visible,
  .js-reveal-ready .testimonial-card.is-visible,
  .js-reveal-ready .faq-item.is-visible,
  .js-reveal-ready .section-header.is-visible,
  .js-reveal-ready .closing-cta__inner.is-visible,
  .js-reveal-ready .split-banner__inner.is-visible,
  .js-reveal-ready .post-card.is-visible,
  .js-reveal-ready ul.products li.product.is-visible,
  .js-reveal-ready .featured-products .slider__slide.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

/* ------------------------------------------------------------------ */
/* 2. Layout utilities                                                 */
/* ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow {
  max-width: 860px;
}

section {
  padding-block: var(--space-12);
}

.site-main--front section:first-child {
  padding-top: 0;
}

/* ------------------------------------------------------------------ */
/* 3. Typography                                                       */
/* ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 var(--space-4);
}

.page-title {
  font-size: var(--fs-2xl);
}

.section-header {
  margin-bottom: var(--space-8);
  text-align: center;
}

/* Small accent-colored uppercase label above the section title — the same
   editorial device as the hero slider's eyebrow (.hero-slider__eyebrow),
   restated here so every homepage section reads as one system rather than a
   strong hero bolted onto plainer sections below it. */
.section-header__eyebrow {
  display: block;
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.section-header__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-2);
}

.section-header__subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  max-width: 640px;
  margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* 4. Buttons                                                          */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-feedback), color var(--duration-fast) var(--ease-feedback), border-color var(--duration-fast) var(--ease-feedback), transform var(--duration-fast) var(--ease-feedback);
  white-space: nowrap;
}

/* Subtle lift on hover, refined press feedback on click — :active is
   defined after this so it still wins while a button is both hovered and
   pressed at once (mouse-down doesn't un-hover). Hover lift only, gated
   behind prefers-reduced-motion like every other ambient transform in this
   file; the :active press below is direct-manipulation feedback tied to a
   real click, not ambient motion, so it stays ungated like it already was. */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

.btn:active {
  transform: translateY(1px);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-lg);
}

.btn-accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--color-text);
  color: #fff;
}

.btn-outline-light {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background-color: #fff;
  color: var(--color-text);
  border-color: #fff;
}

.btn-secondary {
  background-color: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-border);
}

/* ------------------------------------------------------------------ */
/* 5. Accessibility helpers                                            */
/* ------------------------------------------------------------------ */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link.screen-reader-text {
  z-index: 100000;
}

.skip-link.screen-reader-text:focus {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  text-transform: uppercase;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 6. Site header / utility bar / primary nav                          */
/* ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-entrance), border-color var(--duration-base) var(--ease-entrance);
}

.utility-bar {
  background-color: var(--color-dark);
  color: var(--color-dark-text);
  font-size: var(--fs-xs);
}

.utility-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.utility-bar__inner p {
  margin: 0;
  /* Flex items default to min-width: auto (their content's un-wrapped
     natural width) — without an explicit override, "Track Your Order" (or
     a long Customizer-edited phone number, see excavator_pro_phone_number()
     in inc/template-tags.php) can refuse to shrink and get visually
     clipped at narrow viewport widths instead of wrapping. */
  min-width: 0;
}

.utility-bar a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-dark-text);
  transition: color var(--duration-fast) var(--ease-feedback);
}

.utility-bar a:hover,
.utility-bar a:focus-visible {
  color: #fff;
}

.utility-bar__track a {
  color: var(--color-accent);
  font-weight: 600;
}

.utility-bar__track a:hover,
.utility-bar__track a:focus-visible {
  color: var(--color-accent-dark);
}

.utility-bar__track a svg {
  transition: transform var(--duration-fast) var(--ease-feedback);
}

.utility-bar__track a:hover svg,
.utility-bar__track a:focus-visible svg {
  transform: translateX(2px);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

/* Row layout for logo + site-title + tagline — relevant once "Show Site
   Title With Logo" and/or "Display Tagline" (Appearance > Customize > Site
   Identity) are turned on and more than one of the three is present at
   once; with only one present this has no visible effect. */
.site-branding {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.site-branding .site-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.site-tagline {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.site-branding .site-title a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
}

/* Uploaded custom logo (Appearance > Customize > Site Identity — see
   add_theme_support('custom-logo') in functions.php and the has_custom_logo()
   branch in header.php). flex-height/flex-width are both declared true in
   that theme-support call, which tells WordPress "don't force-crop this to
   an exact box" — it does NOT mean WordPress scales the image down for you.
   With nothing capping it here, an uploaded image renders at its native
   uploaded pixel size (easily hundreds of px tall). Capped to roughly the
   same visual weight as the SVG-mark + site-title fallback it replaces
   (26px mark, --fs-xl title text ~ 24px), so the header reads consistently
   whichever branding is active. width/height: auto preserves the image's
   own aspect ratio at that height instead of stretching it. */
.site-branding .custom-logo-link {
  display: inline-block;
}

.site-branding img.custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 42px;
  max-width: 220px;
}

/* Ascending-bars brand mark (compact -> workhorse machine range). Solid accent
   fill, not a stroked line icon like everything else in the header — a mark
   needs to read at a glance, not blend in with the functional icon set. */
.site-mark {
  flex-shrink: 0;
  color: var(--color-accent);
}

/* Mobile hamburger toggle */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-feedback);
}

.menu-toggle:hover {
  background-color: var(--color-bg-alt);
}

.menu-toggle__box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.menu-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-text);
  transition: transform var(--duration-fast) var(--ease-feedback), opacity var(--duration-fast) var(--ease-feedback);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Primary nav: collapsed off-canvas panel on mobile, inline row on desktop */
.main-navigation {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 85vw);
  height: 100vh;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-16) var(--space-6) var(--space-6);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-entrance);
  z-index: 50;
}

.main-navigation.is-open {
  transform: translateX(0);
}

.main-navigation .menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.main-navigation .menu-item a {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-feedback), border-color var(--duration-fast) var(--ease-feedback);
}

.main-navigation .menu-item a:hover,
.main-navigation .menu-item a:focus-visible {
  color: var(--color-accent);
}

body.has-mobile-menu-open {
  overflow: hidden;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* On mobile, keeps cart + hamburger together at the end of the header row
     (nav is an off-canvas overlay there, so it doesn't need a flex position). */
  order: 2;
}

.header-cart,
.header-account,
.header-search-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--color-text);
  background-color: transparent;
  transition: background-color var(--duration-fast) var(--ease-feedback), color var(--duration-fast) var(--ease-feedback), transform var(--duration-fast) var(--ease-feedback);
}

/* Circular accent-fill hover, matching the icon-in-a-circle idiom already
   established by .trust-item__icon and .hero-slide__spec-icon elsewhere in
   the theme, rather than a plain color swap — plus a touch of scale so these
   read as tactile, pressable buttons rather than flat icons. */
.header-cart:hover,
.header-cart:focus-visible,
.header-account:hover,
.header-account:focus-visible,
.header-search-toggle:hover,
.header-search-toggle:focus-visible {
  color: var(--color-accent-dark);
  background-color: var(--color-accent-light);
}

@media (prefers-reduced-motion: no-preference) {
  .header-cart:hover,
  .header-cart:focus-visible,
  .header-account:hover,
  .header-account:focus-visible,
  .header-search-toggle:hover,
  .header-search-toggle:focus-visible {
    transform: scale(1.08);
  }
}

.header-cart__icon,
.header-account svg,
.header-search-toggle svg {
  width: 22px;
  height: 22px;
}

.header-search {
  order: 4;
  flex-basis: 100%;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
}

.header-search__form {
  display: flex;
  gap: var(--space-2);
}

.header-search__input {
  flex: 1 1 auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-family: var(--font-body);
}

.header-search__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.header-search__submit {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-sm);
  transition: background-color var(--duration-fast) var(--ease-feedback);
}

.header-search__submit:hover,
.header-search__submit:focus-visible {
  background-color: var(--color-accent-dark);
}

.header-cart__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.header-cart__count:empty,
.header-cart__count[data-header-cart-count="0"] {
  display: none;
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }

  .site-header__actions {
    /* On desktop the nav is a normal flex item (not an overlay), so push
       cart/actions after it to land at the far right — the conventional
       e-commerce header layout: logo — nav — cart. */
    order: 3;
  }

  .main-navigation {
    order: 2;
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    transform: none;
    transition: none;
    background-color: transparent;
  }

  .main-navigation .menu {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .main-navigation .menu-item a {
    padding: var(--space-2) 0;
    border-bottom: 2px solid transparent;
    font-size: var(--nav-fs);
  }

  .main-navigation .menu-item a:hover,
  .main-navigation .menu-item a:focus-visible {
    border-bottom-color: var(--color-accent);
  }
}

/* The hairline border does the separation job at rest; once scrolled, a
   soft shadow takes over instead (border fades to transparent) — a quieter,
   more premium "elevate on scroll" cue than an instantly-appearing shadow
   sitting on top of a border that never goes away. */
.site-header.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------------ */
/* 7. Hero slider                                                      */
/* ------------------------------------------------------------------ */

/*
 * Full-bleed, dark studio-lit banner carousel — one slide per flagship
 * machine. Built on the same scroll-snap `.slider` foundation as the
 * featured-products/testimonials sliders (see section 18 below and
 * initSliders() in main.js), just with full-width slides and autoplay
 * opted into via [data-slider-autoplay] on the markup.
 */

/* Full-bleed: overrides the generic `section { padding-block: ... }` rule
   (section 2) which otherwise wins on source order alone. */
.hero {
  position: relative;
  padding-block: 0;
  background-color: var(--color-dark);
}

/* Compound selectors (`.hero-slider__x.slider__x`) throughout this block are
   deliberate, not decorative — section 18 below defines `.slider__track`
   and `.slider__slide` at equal (single-class) specificity, and being later
   in the file it would otherwise win the cascade over a plain
   `.hero-slider__track { ... }` / `.hero-slider__slide { ... }` rule here. */
.hero-slider__track.slider__track {
  gap: 0;
  padding-bottom: 0;
}

.hero-slider__slide.slider__slide {
  flex: 0 0 100%;
  width: 100%;
}

/* Spotlight layout: a dark information panel beside the product photo shown
   clean on its own light studio card — two clearly separate regions instead
   of headline text floating over a background photo, so there's no
   compositing/legibility risk between them regardless of photo content.
   Single column (media on top, since the photo is the visual hook) until
   there's room for both side by side. */
.hero-slide {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-8);
  padding-block: var(--space-8);
}

.hero-slide__panel {
  padding-block: var(--space-4);
}

.hero-slide__eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero-slide__title {
  font-size: clamp(2.25rem, 5vw, var(--fs-4xl));
  line-height: 1.05;
  color: #fff;
  margin-bottom: var(--space-4);
}

.hero-slide__subtitle {
  font-size: var(--fs-lg);
  color: var(--color-dark-text);
  max-width: 52ch;
}

/* Spec grid: small bordered cards instead of a hairline strip, so the specs
   read as distinct, scannable facts rather than one continuous line — the
   "show a lot of information" density this layout is built around. */
.hero-slide__specs {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr (shorthand for minmax(auto, 1fr)) — a bare
     1fr won't shrink a track below its content's intrinsic min-content width,
     so a single long unbreakable word (e.g. "WARRANTY") in a narrow card
     forces the whole grid, and with it the page, to overflow horizontally
     on narrow viewports instead of letting the label wrap within its card. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  max-width: 34rem;
}

.hero-slide__spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background-color: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-base) var(--ease-entrance), border-color var(--duration-base) var(--ease-entrance);
}

.hero-slide__spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgb(217 83 30 / 14%);
  color: var(--color-accent);
}

.hero-slide__spec-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.1;
  color: #fff;
}

.hero-slide__spec-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-dark-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hero-slide__details-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  color: var(--color-dark-text);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.hero-slide__details-link svg {
  transition: transform var(--duration-fast) var(--ease-feedback);
}

.hero-slide__details-link:hover,
.hero-slide__details-link:focus-visible {
  color: #fff;
}

.hero-slide__details-link:hover svg,
.hero-slide__details-link:focus-visible svg {
  transform: translateX(3px);
}

/* Media card: the photo on its own light studio ground (matching the actual
   product photography, not fought against with a dark overlay) inside a
   soft radial "showroom pedestal" backdrop, contain-fit so the whole machine
   is always fully visible regardless of each photo's exact crop. */
.hero-slide__media {
  position: relative;
}

.hero-slide__media-tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.hero-slide__media-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-6);
  background-image: radial-gradient(ellipse at center, #f5f6f7 0%, #e4e7eb 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero-slide__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 1024px) {
  .hero-slide {
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    padding-block: var(--space-16);
  }

  .hero-slide__panel {
    flex: 0 0 46%;
  }

  .hero-slide__media {
    flex: 1 1 auto;
    min-width: 0;
  }

  .hero-slide__media-frame {
    aspect-ratio: 5 / 4;
  }
}

/* Plays once per slide as it becomes active (above-the-fold, so not gated
   behind the scroll-reveal IntersectionObserver like below-the-fold
   sections). */
@media ( prefers-reduced-motion: no-preference ) {
  @keyframes hero-fade-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-slide__panel > * {
    opacity: 0;
    animation: hero-fade-up 0.7s var(--ease-entrance) forwards;
  }

  .hero-slide__panel > *:nth-child(1) {
    animation-delay: 0.05s;
  }
  .hero-slide__panel > *:nth-child(2) {
    animation-delay: 0.15s;
  }
  .hero-slide__panel > *:nth-child(3) {
    animation-delay: 0.25s;
  }
  .hero-slide__panel > *:nth-child(4) {
    animation-delay: 0.35s;
  }
  .hero-slide__panel > *:nth-child(5) {
    animation-delay: 0.45s;
  }
  .hero-slide__panel > *:nth-child(6) {
    animation-delay: 0.5s;
  }

  @keyframes hero-media-in {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .hero-slide__media {
    animation: hero-media-in 0.8s var(--ease-entrance) forwards;
  }
}

/* Slider chrome overrides (dark-hero variant) ---------------------------- */

.hero-slider .slider__arrow {
  width: 52px;
  height: 52px;
  background-color: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 35%);
  color: #fff;
  backdrop-filter: blur(4px);
  font-size: var(--fs-2xl);
}

.hero-slider .slider__arrow:hover,
.hero-slider .slider__arrow:focus-visible {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.hero-slider .slider__arrow--prev {
  left: var(--space-4);
}

.hero-slider .slider__arrow--next {
  right: var(--space-4);
}

.hero-slider__dots.slider__dots {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  z-index: 3;
  transform: translateX(-50%);
  margin-top: 0;
}

.hero-slider__dots .slider__dot {
  width: 10px;
  height: 10px;
  background-color: rgb(255 255 255 / 35%);
}

.hero-slider__dots .slider__dot.is-active {
  background-color: var(--color-accent);
}

/* ------------------------------------------------------------------ */
/* 8. Trust bar                                                        */
/* ------------------------------------------------------------------ */

.trust-bar {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.trust-bar__inner {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr — a bare 1fr track's minimum size is its
     content's natural (nowrap) width, so a long, editable label (e.g.
     "Nationwide Freight Shipping" — see excavator_pro_trust_bar_items() in
     inc/template-tags.php, Appearance > Customize > Store Settings > Trust
     Bar) can force the whole grid, and the page, wider than the viewport at
     narrow widths instead of wrapping. Same fix already used for
     .excavator-spec-grid__list in woocommerce.css and (as of this pass)
     every other repeat(N, 1fr) grid in this file. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Hairline dividers between items rather than relying on grid gap alone —
   the same "quick facts" idiom as the hero's spec grid (.hero-slide__specs),
   just in the light/header register instead of the hero's dark panel. */
@media (max-width: 767px) {
  .trust-item:nth-child(n + 3) {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
  }
}

.trust-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.trust-item__label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

@media (min-width: 768px) {
  .trust-bar__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .trust-item:not(:first-child) {
    padding-left: var(--space-6);
    border-left: 1px solid var(--color-border);
  }
}

/* ------------------------------------------------------------------ */
/* 10. Featured products (slider of real WooCommerce product cards)    */
/* ------------------------------------------------------------------ */

.featured-products {
  background-color: var(--color-bg);
}

.featured-products .slider {
  margin-bottom: var(--space-8);
}

/* The featured slider renders the real excavator-card <li> markup (via
   wc_get_template_part()) inside a slider__slide wrapper rather than the
   WooCommerce-generated <ul class="products">, so its cards need their own
   width/float reset here — same !important-override approach already used
   for the shop-loop-columns filter elsewhere, needed because WooCommerce's
   core plugin CSS targets `li.product` unscoped by any theme wrapper class. */
.featured-products .slider__slide {
  display: flex;
  flex: 0 0 auto;
  width: 82%;
}

.featured-products .slider__slide .excavator-card {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

.featured-products__empty {
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.featured-products__cta {
  text-align: center;
}

@media (min-width: 640px) {
  .featured-products .slider__slide {
    width: 46%;
  }
}

@media (min-width: 1024px) {
  .featured-products .slider__slide {
    width: 31%;
  }
}

@media (min-width: 1280px) {
  .featured-products .slider__slide {
    width: 23.5%;
  }
}

/* ------------------------------------------------------------------ */
/* 11. Testimonials                                                    */
/* ------------------------------------------------------------------ */

.testimonials {
  background-color: var(--color-bg-alt);
}

.testimonials .slider__slide {
  display: flex;
  flex: 0 0 auto;
  width: 86%;
}

/* Editorial quote block rather than a boxed SaaS-style card: a hairline top
   rule instead of a border/shadow panel, and an oversized Barlow Condensed
   quotation mark as the one decorative flourish — "hairline dividers instead
   of boxed borders" applied to the one section on the homepage that was
   still a plain bordered card. */
.testimonial-card {
  position: relative;
  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: 2px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  transition: transform var(--duration-base) var(--ease-entrance);
}

@media (prefers-reduced-motion: no-preference) {
  .testimonial-card:hover {
    transform: translateY(-4px);
  }
}

.testimonial-card__mark {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 0.6;
  font-weight: 700;
  color: var(--color-accent-light);
  margin: 0 0 var(--space-1);
}

.star-rating {
  display: inline-flex;
  gap: 2px;
  color: var(--color-border);
  font-size: var(--fs-lg);
}

.star--filled {
  color: var(--color-accent);
}

.testimonial-card__quote {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--color-text);
  flex-grow: 1;
}

.testimonial-card__quote p {
  margin: 0;
}

.testimonial-card__author {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.testimonial-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

@media (min-width: 640px) {
  .testimonials .slider__slide {
    width: 46%;
  }
}

@media (min-width: 1024px) {
  /* All three testimonials fit without scrolling at this width — initSliders()
     detects the lack of overflow and hides the now-unnecessary arrows/dots
     (see .slider--no-overflow in the slider component section below). With no
     card boundary to separate them, a hairline left-border on every slide but
     the first stands in for the removed box, so three quotes side by side
     still read as distinct columns rather than one run-on block. */
  .testimonials .slider__slide {
    width: 31.33%;
  }

  .testimonials .slider__slide:not(:first-child) {
    padding-left: var(--space-8);
    margin-left: calc(-1 * var(--space-2));
    border-left: 1px solid var(--color-border);
  }
}

/* ------------------------------------------------------------------ */
/* 12. FAQ accordion                                                   */
/* ------------------------------------------------------------------ */

/* Stacked hairline-divided list rather than individually boxed accordion
   items — the same "hairline dividers instead of boxed borders" language as
   the rest of this pass, and a cleaner fit for a long FAQ than five separate
   bordered panels. */
.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.faq-item {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xl);
  text-transform: none;
  letter-spacing: normal;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-feedback);
}

.faq-item__question:hover,
.faq-item__question:focus-visible {
  color: var(--color-accent-dark);
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-accent);
  transform: translate(-50%, -50%);
}

.faq-item__icon::before {
  width: 14px;
  height: 2px;
}

.faq-item__icon::after {
  width: 2px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-feedback);
}

.faq-item[open] .faq-item__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-item__answer {
  padding-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-entrance);
}

.faq-item__answer p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* 13. Closing CTA banner                                              */
/* ------------------------------------------------------------------ */

/* Same radial accent glow the hero's scrim uses, dialed down — a quiet echo
   that ties this closing section back to the opening one instead of two
   unrelated dark bands with nothing in common but color. */
.closing-cta {
  position: relative;
  background-color: var(--color-dark);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.closing-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(ellipse 60% 80% at 50% 120%, rgb(217 83 30 / 22%), transparent 70%);
  pointer-events: none;
}

/* Slow ambient drift on the accent glow — cheap (transform/opacity only, no
   layout or paint-heavy properties), tasteful for an industrial B2B page:
   a quiet pulse of life behind the CTA rather than anything that competes
   with the headline for attention. Shared with .split-banner__col--dark's
   equivalent glow below (section 20) via the same keyframe/timing so the
   two dark sections read as one consistent motion language, not two
   unrelated effects. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ambient-glow-drift {
    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.85;
    }
    50% {
      transform: translate3d(-2%, 2%, 0) scale(1.08);
      opacity: 1;
    }
  }

  .closing-cta::before {
    animation: ambient-glow-drift 14s var(--ease-entrance) infinite alternate;
  }
}

.closing-cta__inner {
  position: relative;
  z-index: 1;
}

.closing-cta__title {
  color: #fff;
  font-size: clamp(2rem, 4vw, var(--fs-3xl));
}

.closing-cta__subtitle {
  color: var(--color-dark-text);
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--fs-lg);
}

.closing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ------------------------------------------------------------------ */
/* 14. Footer                                                          */
/* ------------------------------------------------------------------ */

.site-footer {
  background-color: var(--color-dark);
  color: var(--color-dark-text);
  padding-top: var(--space-12);
  font-size: var(--fs-sm);
}

/* Brand strip: a quiet closing statement (mark + name + one-line promise)
   above the link columns, echoing the header's brand mark so the site
   visually "bookends" — the same idea the homepage hero opens with, restated
   in miniature at the point most pages actually end. */
.footer__brand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
}

.footer__brand-mark {
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 2px;
}

.footer__brand-name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.footer__brand-tagline {
  margin: 0;
  max-width: 46ch;
  color: var(--color-dark-text);
}

.footer__columns {
  display: grid;
  gap: var(--space-8);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col__title {
  position: relative;
  color: #fff;
  font-size: var(--fs-base);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
}

/* Short accent underline rather than a full-width rule or boxed panel —
   a small deliberate mark, same "used sparingly" accent language as the
   rest of the site. */
.footer-col__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background-color: var(--color-accent);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  color: var(--color-dark-text);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: #fff;
}

.footer-col--contact address p {
  margin: 0 0 var(--space-2);
}

.footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.footer__payments-label {
  font-weight: 600;
  color: #fff;
}

.payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.payment-badge {
  display: inline-flex;
  color: var(--color-dark-text);
}

.footer-navigation {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--space-4);
}

.footer-navigation .menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-navigation a {
  color: var(--color-dark-text);
}

.footer-navigation a:hover,
.footer-navigation a:focus-visible {
  color: #fff;
}

.site-info {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--space-4);
  font-size: var(--fs-xs);
}

.site-info p {
  margin: 0;
}

@media (min-width: 640px) {
  .footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* 15. Blog / page / archive templates                                 */
/* ------------------------------------------------------------------ */

.page-header {
  position: relative;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
}

/* Same short accent-underline device as .footer-col__title and the single
   product spec grid — a small consistent marker instead of a full-width
   rule, used sitewide wherever a section needs a quiet anchor. */
.page-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background-color: var(--color-accent);
}

.page-header .page-title {
  font-size: clamp(2rem, 4vw, var(--fs-3xl));
  margin-bottom: var(--space-3);
}

.archive-description {
  color: var(--color-text-muted);
}

.post-list {
  display: grid;
  gap: var(--space-8);
}

/* Content-tile idiom shared with .category-tile: a soft shadow rather than a
   hard border-box, an image that scales slightly on hover, and the title
   itself as the primary hover target — the same language, not a separate
   "blog card" system living next to it. */
.post-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-entrance), transform var(--duration-base) var(--ease-entrance);
}

.post-card:hover {
  box-shadow: var(--shadow-card-hover);
}

@media (prefers-reduced-motion: no-preference) {
  .post-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
}

.post-card__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-entrance);
}

@media (prefers-reduced-motion: no-preference) {
  .post-card:hover .post-card__thumb img {
    transform: scale(1.06);
  }
}

.post-card__body {
  padding: var(--space-6);
}

.post-card__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-2);
  transition: color var(--duration-fast) var(--ease-feedback);
}

.post-card:hover .post-card__title,
.post-card__title a:hover,
.post-card__title a:focus-visible {
  color: var(--color-accent-dark);
}

.post-card__meta {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .post-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .post-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.entry-content {
  max-width: 75ch;
  font-size: var(--fs-lg);
  color: var(--color-text);
}

.entry-content > *:last-child {
  margin-bottom: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: var(--space-8);
}

.entry-content a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-decoration-color: rgb(184 67 22 / 35%);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}

.entry-content a:hover,
.entry-content a:focus-visible {
  text-decoration-color: currentColor;
}

.entry-content blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li {
  margin-bottom: var(--space-2);
}

.entry-content img {
  border-radius: var(--radius-md);
}

.entry-content figure {
  margin: var(--space-6) 0;
}

.entry-content figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.entry-content hr {
  margin: var(--space-8) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.page-thumbnail {
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-links {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.page-links__label {
  font-weight: 600;
}

.entry-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.entry-footer__label {
  font-weight: 600;
  margin-right: var(--space-2);
}

.front-page-extra-content {
  padding-block: var(--space-12);
}

.widget-area {
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.widget-area .widget {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.widget-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
}

.widget-area ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.widget-area a {
  color: var(--color-text);
}

.widget-area a:hover,
.widget-area a:focus-visible {
  color: var(--color-accent);
}

/* ------------------------------------------------------------------ */
/* 16. Comments                                                        */
/* ------------------------------------------------------------------ */

.comments-area {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  max-width: 75ch;
}

.comments-area .comments-title,
.comments-area #reply-title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-6);
}

.comments-area #reply-title small a {
  margin-left: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-transform: none;
  color: var(--color-accent-dark);
}

.comments-area ol.comment-list,
.comments-area ol.children {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.comments-area ol.children {
  margin-top: var(--space-4);
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-border);
}

.comments-area .comment-body {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.comments-area .comment-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.comments-area .comment-author .avatar {
  border-radius: 50%;
}

.comments-area .comment-author .fn {
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: normal;
  color: var(--color-text);
}

.comments-area .comment-metadata {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.comments-area .comment-metadata a {
  color: inherit;
}

.comments-area .comment-content p:last-child {
  margin-bottom: 0;
}

.comments-area .comment-reply-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent-dark);
}

.comments-area .comment-reply-link:hover,
.comments-area .comment-reply-link:focus-visible {
  color: var(--color-accent);
}

.comments-area p.comment-notes,
.comments-area p.logged-in-as,
.comments-area .no-comments {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.comments-area .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.comments-area .comment-respond input:not([type="submit"]):not([type="checkbox"]),
.comments-area .comment-respond textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  margin-bottom: var(--space-3);
}

.comments-area .comment-respond input:focus-visible,
.comments-area .comment-respond textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
}

.comments-area .comment-respond textarea {
  min-height: 120px;
}

.comments-area .comment-respond .form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.comments-area .comment-respond .form-submit input[type="submit"]:hover,
.comments-area .comment-respond .form-submit input[type="submit"]:focus-visible {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.comments-area .comment-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-sm);
}

.comments-area .comment-navigation a {
  color: var(--color-accent-dark);
}

.comments-area .comment-navigation a:hover,
.comments-area .comment-navigation a:focus-visible {
  color: var(--color-accent);
}

/* ------------------------------------------------------------------ */
/* 17. Breadcrumb                                                      */
/* ------------------------------------------------------------------ */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-accent);
}

.breadcrumb__current {
  color: var(--color-text);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* 18. Slider component (native scroll-snap + minimal JS)              */
/* ------------------------------------------------------------------ */

/*
 * Foundation is CSS scroll-snap: `.slider__track` is a horizontally
 * scrollable flex row, so touch-swipe on mobile and mouse/trackpad drag or
 * horizontal-wheel scroll on desktop all work natively with zero JS. main.js
 * (initSliders()) only adds prev/next arrow buttons, dot indicators kept in
 * sync via IntersectionObserver, and ArrowLeft/ArrowRight keyboard support —
 * all progressive enhancement on top of a track that already scrolls fine
 * without it.
 */

.slider {
  position: relative;
}

.slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: var(--space-6);
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

.slider__arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card-hover);
  font-size: var(--fs-xl);
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color var(--duration-fast) var(--ease-feedback), color var(--duration-fast) var(--ease-feedback), border-color var(--duration-fast) var(--ease-feedback), transform var(--duration-fast) var(--ease-feedback);
}

@media (prefers-reduced-motion: no-preference) {
  .slider__arrow:hover,
  .slider__arrow:focus-visible {
    transform: translateY(-50%) scale(1.08);
  }
}

.slider__arrow:hover,
.slider__arrow:focus-visible {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.slider__arrow--prev {
  left: var(--space-2);
}

.slider__arrow--next {
  right: var(--space-2);
}

/* Arrows are a mouse/trackpad affordance; on touch-only viewports the native
   swipe already does the job, so skip the extra on-screen clutter. */
@media (hover: hover) and (pointer: fine) and (min-width: 640px) {
  .slider__arrow {
    display: inline-flex;
  }
}

.slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-border);
  transition: background-color var(--duration-base) var(--ease-entrance), transform var(--duration-base) var(--ease-feedback);
}

.slider__dot.is-active {
  background-color: var(--color-accent);
  transform: scale(1.25);
}

/* initSliders() adds this when a track's content already fits without
   overflowing (e.g. all 3 testimonials at a wide desktop viewport) — a
   scroll affordance for content that doesn't need one is just clutter. */
.slider--no-overflow .slider__arrow,
.slider--no-overflow .slider__dots {
  display: none;
}

/* ------------------------------------------------------------------ */
/* 19. Category tiles ("Shop by Class" homepage section)               */
/* ------------------------------------------------------------------ */

.category-tiles__grid {
  display: grid;
  gap: var(--space-6);
}

.category-tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-entrance), transform var(--duration-base) var(--ease-entrance);
}

.category-tile:hover,
.category-tile:focus-visible {
  box-shadow: var(--shadow-card-hover);
}

@media (prefers-reduced-motion: no-preference) {
  .category-tile:hover {
    transform: translateY(-4px) scale(1.01);
  }
}

.category-tile__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.category-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-entrance);
}

@media (prefers-reduced-motion: no-preference) {
  .category-tile:hover .category-tile__img {
    transform: scale(1.06);
  }
}

.category-tile__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  gap: var(--space-2);
  padding: var(--space-6);
}

.category-tile__title {
  font-size: var(--fs-xl);
  margin-bottom: 0;
}

.category-tile__desc {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.category-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* --color-accent-dark rather than --color-accent: at this small/semibold
     size the base accent only contrasts ~3.7:1 on --color-bg-alt, short of
     WCAG AA's 4.5:1 for normal text. accent-dark clears it (~5:1). */
  color: var(--color-accent-dark);
}

.category-tile__cta-arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-feedback);
}

.category-tile:hover .category-tile__cta-arrow,
.category-tile:focus-visible .category-tile__cta-arrow {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .category-tiles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* 20. Split banner (2-column promo: specialist / buying guide)        */
/* ------------------------------------------------------------------ */

.split-banner {
  display: grid;
  padding-block: 0;
}

.split-banner__col {
  display: flex;
  align-items: center;
  padding-block: var(--space-12);
}

.split-banner__col--dark {
  position: relative;
  background-color: var(--color-dark);
  color: #fff;
  overflow: hidden;
}

/* Faint accent glow, same device as the hero scrim and .closing-cta — ties
   this dark column back to the site's two other dark sections. */
.split-banner__col--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(ellipse 70% 60% at 85% 15%, rgb(217 83 30 / 18%), transparent 70%);
  pointer-events: none;
}

/* Same slow ambient drift as .closing-cta::before (defined in section 13,
   shared keyframe) — the site's two dark, glow-accented sections read as one
   consistent motion language. */
@media (prefers-reduced-motion: no-preference) {
  .split-banner__col--dark::before {
    animation: ambient-glow-drift 14s var(--ease-entrance) infinite alternate;
  }
}

.split-banner__col--dark .split-banner__inner {
  position: relative;
  z-index: 1;
}

.split-banner__col--light {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
}

.split-banner__inner {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.split-banner__eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

/* Neither column uses --color-accent directly here: on the light column its
   contrast against --color-bg-alt is ~3.7:1, and on the dark column ~4.5:1 —
   both short of (or right at the edge of) WCAG AA's 4.5:1 for normal text.
   accent-dark / accent-light (existing tokens, not new colors) clear it
   comfortably in each context. */
.split-banner__col--dark .split-banner__eyebrow {
  color: var(--color-accent-light);
}

.split-banner__col--light .split-banner__eyebrow {
  color: var(--color-accent-dark);
}

.split-banner__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-3);
}

.split-banner__col--dark .split-banner__title {
  color: #fff;
}

.split-banner__copy {
  margin-bottom: var(--space-6);
}

.split-banner__col--dark .split-banner__copy {
  color: var(--color-dark-text);
}

.split-banner__col--light .split-banner__copy {
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .split-banner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* 21. Blog teaser ("From the Blog" homepage section)                  */
/* ------------------------------------------------------------------ */

.blog-teaser__grid {
  margin-bottom: var(--space-8);
}

/* Category badge — new here, but styled to sit alongside the existing
   .post-card markup shared with archive.php / index.php without altering it.
   Solid accent-dark fill + white text (same formula as the existing
   .excavator-card__badge sale badge in woocommerce.css) rather than
   accent-dark-on-accent-light, which only reaches ~4.35:1 — just short of
   WCAG AA's 4.5:1 for normal text. White-on-accent-dark clears it (~5.45:1). */
.post-card__badge {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-dark);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.blog-teaser__cta {
  display: flex;
  justify-content: center;
}