/*
 * H&H Sales — merged-site styles
 * Nav dropdowns + front-page sections. Loads after style.css.
 */

/* ============================================
   HEADER / NAV DROPDOWNS
   ============================================ */
.nav-main { gap: 0; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item > a,
.nav-item > .nav-dd-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hh-white);
  background: none;
  border: none;
  cursor: pointer;
}

.nav-item > a:hover,
.nav-item > a.active,
.nav-item:hover > .nav-dd-label,
.nav-item > .nav-dd-label:focus-visible {
  color: var(--hh-yellow);
}

.nav-dd-label .chev {
  width: 10px;
  height: 10px;
  transition: transform var(--transition-fast);
}

.nav-item:hover .nav-dd-label .chev,
.nav-item.is-open .nav-dd-label .chev { transform: rotate(180deg); }

.nav-dd {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  /*
   * The panel hangs off a fixed header with nowhere to go, so on a short
   * viewport its tail simply left the screen -- absolutely positioned, no
   * max-height, no overflow, so the page could not be scrolled to reach it
   * either. Measured at 1366x660: the Outdoor panel is 635px tall, ends 101px
   * below the fold, and Hunting Blinds, Turtlebox Speakers and Costa
   * Sunglasses were unreachable by any means.
   *
   * 140px is the panel's own top offset (126px) plus a little air, so the
   * cap tracks the header rather than being a guess.
   */
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 0 0.9rem;
  background: var(--hh-black-deep);
  border-top: 3px solid var(--hh-yellow);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 300;
}

@media (min-width: 1301px) {
  /* Items span the full header height so the hover zone meets the
     panel edge — otherwise the dropdown dies in the gap below the label. */
  .nav-main,
  .nav-item { align-self: stretch; }

  .nav-item:hover > .nav-dd,
  .nav-item:focus-within > .nav-dd,
  .nav-item.is-open > .nav-dd {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.nav-dd a {
  display: block;
  padding: 0.5rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-transform: none;
  color: var(--hh-gray-300);
  white-space: nowrap;
}

.nav-dd a:hover { color: var(--hh-yellow); background: rgba(255, 255, 255, 0.04); }

.nav-dd-kicker {
  display: block;
  padding: 0.8rem 1.4rem 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
}

.nav-dd-kicker:first-child { padding-top: 0.3rem; }

/* Drawer chrome (mobile only) and sub-panel back buttons */
.nav-drawer-head,
.nav-dd-back,
.nav-scrim { display: none; }

/* Wide truck mega menu. The nav item goes static so the panel anchors to
   the fixed header, aligned to the header's content edge — it has to stay
   under its trigger on wide screens or the hover path breaks. */
.nav-item:has(> .nav-dd--mega) { position: static; }

@media (min-width: 1301px) {
  .nav-dd--mega {
    left: clamp(1.25rem, 3vw, 3rem);
    transform: translateY(8px);
    width: min(1040px, calc(100vw - 48px));
    padding: 0;
  }

  .nav-item:hover > .nav-dd--mega,
  .nav-item:focus-within > .nav-dd--mega,
  .nav-item.is-open > .nav-dd--mega { transform: translateY(0); }

  .nav-dd-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1.35rem 0.75rem 1.15rem;
  }

  .nav-dd-col { min-width: 0; }
  .nav-dd-col + .nav-dd-col { border-left: 1px solid rgba(255, 255, 255, 0.07); }
  .nav-dd-group + .nav-dd-group { margin-top: 1.15rem; }
  .nav-dd-group .nav-dd-kicker { padding-top: 0.3rem; }
  .nav-dd--mega a {
    white-space: normal;
    padding: 0.42rem 1.4rem;
  }

  .nav-dd-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
  }
}

.nav-dd-shopall {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hh-yellow);
}

.nav-dd a.nav-dd-shopall { color: var(--hh-yellow); }
.nav-dd a.nav-dd-shopall:hover { background: none; text-decoration: underline; }
.nav-dd-shopall svg { transition: transform 0.18s ease; }
.nav-dd-shopall:hover svg { transform: translateX(3px); }

/* Second entry point beside "Shop All" — same shape, quieter than the yellow
   primary so the two don't fight for the same emphasis. */
.nav-dd-footer-links {
  display: flex;
  align-items: center;
  /* The links carry their own 1.4rem side padding from .nav-dd--mega a, so a
     small gap here is already plenty of separation. */
  gap: 0.25rem;
}

.nav-dd a.nav-dd-shopall--muted { color: rgba(255, 255, 255, 0.8); }
.nav-dd a.nav-dd-shopall--muted:hover { color: var(--hh-white); }

.nav-dd-vehicle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hh-white);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.nav-dd-vehicle:hover {
  border-color: var(--hh-yellow);
  color: var(--hh-yellow);
}

/* Drawer range. 1300 (was 1100): between 1101 and ~1300 the inline menu plus
   logo, quote button, search and cart never actually fit — the flex row paid
   for it by crushing the logo to nothing and pushing the cart off-screen. */
@media (max-width: 1300px) {
  /* The drawer parks off-screen at translateX(105%), which widens the
     document past the viewport. body-level overflow-x doesn't reach the
     viewport on iOS — clip at the root or phones zoom-fit the wide layout. */
  html { overflow-x: clip; }

  body.nav-drawer-open { overflow: hidden; }

  /* The drawer lives inside the header, so the header's z-index is what
     actually competes with the page — .nav-main's own 1200 is resolved
     inside the header's stacking context and can't reach past it.
     Everything fixed and persistent that the open drawer has to clear:
       #mobile-cta-bar            900
       .hh-sticky-atc            9990
       #hh-nearest-store         9999
       #hh-search-overlay        9999
       #hhpfb-sidebar           10000  (tied at the old value, and later in
                                        the DOM, so it used to win)
     Deliberately still below the modals — the quick-view/compare/vehicle
     and contact modals (99999) and the CheckoutWC side cart (999998/999999)
     are themselves modal surfaces and must win if one opens. */
  body.nav-drawer-open .site-header { z-index: 99000; }

  /* Two floating widgets sit above anything the header can reasonably claim
     (999997 and 999990) and land inside the drawer's bottom-right corner.
     Out-numbering them would also put the drawer above the side cart itself,
     so suppress them for the duration instead. !important because both are
     third-party/plugin markup that sets display inline. */
  body.nav-drawer-open #cfw-side-cart-floating-button,
  body.nav-drawer-open #hhpfb-quote-widget { display: none !important; }

  /* Slide-in drawer replaces the old top panel */
  .nav-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: var(--hh-abar, 0px);
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    padding: 0 0 2rem;
    background: var(--hh-black-deep);
    border-left: 3px solid var(--hh-yellow);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    z-index: 1200;
  }

  .nav-main.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Icon-only header vehicle button reads as clutter inside the drawer;
     the Truck panel footer carries the vehicle CTA instead */
  .nav-main > .nav-vehicle { display: none; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 1100;
  }

  body.nav-drawer-open .nav-scrim {
    opacity: 1;
    visibility: visible;
  }

  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-drawer-title {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--hh-gray-500);
  }

  .nav-drawer-close {
    display: flex;
    padding: 0.3rem;
    background: none;
    border: none;
    color: var(--hh-gray-300);
    cursor: pointer;
  }

  .nav-item {
    flex-direction: column;
    align-items: stretch;
    position: static;
  }

  .nav-item > a,
  .nav-item > .nav-dd-label {
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 1.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Sub-panel chevrons point into the next panel */
  .nav-dd-label .chev,
  .nav-item:hover .nav-dd-label .chev,
  .nav-item.is-open .nav-dd-label .chev { transform: rotate(-90deg); }

  /* Category sub-panels slide over the drawer */
  .nav-dd,
  .nav-dd--mega {
    position: fixed;
    top: var(--hh-abar, 0px);
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    min-width: 0;
    /* The desktop panel caps itself at calc(100vh - 140px) to clear the
       header it hangs from. Here the panel IS the screen, so that cap just
       left a 140px strip of scrim below it. */
    max-height: none;
    padding: 0 0 2rem;
    background: var(--hh-black-deep);
    border-top: none;
    border-left: 3px solid var(--hh-yellow);
    box-shadow: none;
    opacity: 1;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    z-index: 1300;
  }

  .nav-item.is-open > .nav-dd {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-dd-back {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 1.05rem 1.35rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hh-white);
    cursor: pointer;
  }

  .nav-dd-back svg { color: var(--hh-yellow); }

  .nav-dd-cols { display: block; }
  .nav-dd-group { padding-bottom: 0.35rem; }
  .nav-dd--mega a { white-space: normal; }

  .nav-dd-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 1rem 1.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-dd-footer-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .nav-dd-shopall { padding: 0.35rem 0; }

  .nav-dd-vehicle { justify-content: center; }
}

/* ============================================
   FRONT PAGE — SPLIT HERO
   ============================================ */
.hh2-hero {
  background: var(--hh-black-deep);
  color: var(--hh-white);
}

.hh2-panels {
  position: relative;
  display: flex;
  min-height: clamp(340px, 44vh, 500px);
  overflow: hidden;
}

.hh2-panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  transition: flex 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* truck now sits LEFT, outdoor RIGHT (panels swapped v1.75.0) */
.hh2-panel--truck {
  clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
  margin-right: -42px;
}

.hh2-panel--outdoor {
  clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -42px;
}

/* designed fallback when a panel has no photo yet */
.hh2-panel--truck:not(:has(.hh2-panel-img)) {
  background:
    repeating-linear-gradient(45deg, rgba(254, 221, 0, 0.05) 0 2px, transparent 2px 26px),
    radial-gradient(120% 90% at 15% 10%, #2d2d2d 0%, #0d0d0d 65%);
}

.hh2-panel--outdoor:not(:has(.hh2-panel-img)) {
  background:
    repeating-linear-gradient(-45deg, rgba(254, 221, 0, 0.05) 0 2px, transparent 2px 26px),
    radial-gradient(120% 90% at 85% 10%, #2d2d2d 0%, #0d0d0d 65%);
}

.hh2-panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The panel is shorter now, so the copy block starts about a quarter of the way
   down instead of a sixth — right where the old scrim was at its thinnest. The
   outdoor panel's sunset sky sat behind the yellow eyebrow and washed it out.
   Ramp the darkness in earlier and finish heavier. */
.hh2-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.34) 0%, rgba(13, 13, 13, 0.16) 18%, rgba(13, 13, 13, 0.52) 46%, rgba(13, 13, 13, 0.88) 100%);
}

.hh2-panel-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  max-width: 620px;
}

/* The eyebrow is the one line that sits high enough to land on bare photograph
   — the outdoor panel's sunset sky is yellow behind yellow type. The scrim can
   only do so much up there without muddying the image, so the type carries its
   own shadow. */
.hh2-panel .eyebrow { text-shadow: 0 1px 10px rgba(13, 13, 13, 0.85); }

.hh2-panel--outdoor .hh2-panel-content { margin-left: auto; text-align: right; }
.hh2-panel--outdoor .hh2-panel-content .eyebrow { flex-direction: row-reverse; }
.hh2-panel--outdoor .hh2-panel-actions { justify-content: flex-end; }

.hh2-panel h2 {
  color: var(--hh-white);
  font-size: clamp(1.85rem, 3.3vw, 2.9rem);
  line-height: 1;
  margin-bottom: 0.6rem;
}

.hh2-panel p {
  color: var(--hh-gray-300);
  font-size: clamp(0.94rem, 1.1vw, 1.02rem);
  line-height: 1.5;
  max-width: 42ch;
  margin-bottom: 1.15rem;
}

.hh2-panel--outdoor p { margin-left: auto; }

.hh2-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hh2-seam {
  position: absolute;
  top: -30px;
  bottom: -30px;
  left: 50%;
  width: 5px;
  background: var(--hh-yellow);
  transform: rotate(6.6deg);
  transform-origin: center;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 860px) {
  .hh2-panels { flex-direction: column; }

  .hh2-panel--outdoor,
  .hh2-panel--truck {
    clip-path: none;
    margin: 0;
    min-height: 320px;
  }

  .hh2-panel--outdoor .hh2-panel-content { margin-left: 0; text-align: left; }
  .hh2-panel--outdoor .hh2-panel-content .eyebrow { flex-direction: row; }
  .hh2-panel--outdoor .hh2-panel-actions { justify-content: flex-start; }

  .hh2-seam {
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 4px;
    transform: none;
    position: relative;
  }
}

/* ============================================
   TRUST STRIP
   ============================================ */
.hh2-trust {
  background: var(--hh-white);
  border-bottom: 1px solid var(--hh-gray-200);
}

.hh2-trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.4rem clamp(1.25rem, 3vw, 3rem);
}

.hh2-trust-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-gray-700);
  text-decoration: none;
  transition: color 0.18s ease;
}

/* Every item is a link now — each one answers the question it raises (where are
   the stores, who are you, how do I pay, how does it get to me). Keep the
   affordance quiet: the strip is reassurance, not a nav bar. */
a.hh2-trust-item:hover,
a.hh2-trust-item:focus-visible {
  color: var(--hh-black);
}

a.hh2-trust-item:hover::before,
a.hh2-trust-item:focus-visible::before {
  transform: rotate(45deg);
}

.hh2-trust-item::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--hh-yellow);
  transition: transform 0.18s ease;
}

@media (max-width: 900px) {
  .hh2-trust-inner { grid-template-columns: repeat(2, 1fr); row-gap: 0.9rem; }
}

/* ============================================
   SECTION HEADERS (shared)
   ============================================ */
.hh2-sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.hh2-sechead h2 { margin-bottom: 0; }

.hh2-sechead-link {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hh-black);
  border-bottom: 2px solid var(--hh-yellow);
  padding-bottom: 0.3rem;
  white-space: nowrap;
}

.hh2-sechead-link:hover { color: var(--hh-yellow-dark); }

.section--dark .hh2-sechead-link,
.hh2-truck .hh2-sechead-link { color: var(--hh-white); }
.section--dark .hh2-sechead-link:hover,
.hh2-truck .hh2-sechead-link:hover { color: var(--hh-yellow); }

/* ============================================
   CATEGORY CARDS (product-on-yellow art)
   ============================================ */
.hh2-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.hh2-cat {
  display: flex;
  flex-direction: column;
  min-width: 0; /* grid child: never let content inflate the track */
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  transition: transform var(--transition), box-shadow var(--transition);
}

.hh2-cat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.hh2-cat-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hh-yellow);
}

.hh2-cat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hh2-cat:hover .hh2-cat-media img { transform: scale(1.06); }

.hh2-cat-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
}

.hh2-cat-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  margin-bottom: 0.25rem;
}

.hh2-cat h3 {
  color: var(--hh-black);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  margin: 0;
}

.hh2-cat-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hh-gray-300);
  color: var(--hh-black);
  transition: all var(--transition-fast);
}

.hh2-cat-arrow svg { width: 15px; height: 15px; }

.hh2-cat:hover .hh2-cat-arrow {
  background: var(--hh-yellow);
  border-color: var(--hh-yellow);
}

/* dark-section variant */
.hh2-truck .hh2-cat {
  background: var(--hh-black);
  border-color: rgba(255, 255, 255, 0.09);
}

.hh2-truck .hh2-cat-media {
  background: var(--hh-black-soft);
  aspect-ratio: 16 / 9;
}

.hh2-truck .hh2-cat-media:not(:has(img)) {
  background:
    repeating-linear-gradient(-45deg, rgba(254, 221, 0, 0.06) 0 2px, transparent 2px 22px),
    var(--hh-black-soft);
}
.hh2-truck .hh2-cat h3 { color: var(--hh-white); }
.hh2-truck .hh2-cat-kicker { color: var(--hh-yellow); }
.hh2-truck .hh2-cat-arrow { border-color: rgba(255, 255, 255, 0.25); color: var(--hh-white); }
.hh2-truck .hh2-cat:hover .hh2-cat-arrow { color: var(--hh-black); }

@media (max-width: 1000px) {
  .hh2-cats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .hh2-cats-grid { grid-template-columns: 1fr; }
}

/* ============================================
   DESIGNER BAND (yellow)
   ============================================ */
.hh2-designer {
  background: var(--hh-yellow);
  color: var(--hh-black);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.hh2-designer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.hh2-designer .eyebrow { color: var(--hh-black); }
.hh2-designer .eyebrow::before { background: var(--hh-black); }

.hh2-designer h2 {
  color: var(--hh-black);
  max-width: 14ch;
  margin-bottom: 0.8rem;
}

.hh2-designer p {
  max-width: 52ch;
  margin-bottom: 0;
  font-size: 1.05rem;
  color: rgba(13, 13, 13, 0.75);
}

.hh2-designer-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hh2-designer-actions .btn {
  background: var(--hh-black);
  color: var(--hh-white);
  justify-content: space-between;
  min-width: 280px;
}

.hh2-designer-actions .btn:hover {
  background: var(--hh-black-deep);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(13, 13, 13, 0.28);
}

@media (max-width: 900px) {
  .hh2-designer-inner { flex-direction: column; align-items: flex-start; }
  .hh2-designer-actions { width: 100%; }
  .hh2-designer-actions .btn { min-width: 0; }
}

/* ============================================
   TRUCK SECTION (dark)
   ============================================ */
.hh2-truck { background: var(--hh-black-deep); }

.hh2-truck .hh2-sechead h2 { color: var(--hh-white); }

.hh2-vehicle {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.6rem 2rem;
  background: var(--hh-black);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 4px solid var(--hh-yellow);
}

/* The vehicle picker moved out of the truck section to sit directly under the
   promo slider, so it brings its own dark band — same black as .hh2-hero, which
   lets it read as the last step of the hero rather than a stray card. */
.hh2-vehicle-band {
  background: var(--hh-black-deep);
  padding: 1.6rem 0 1.75rem;
}

.hh2-vehicle-icon {
  flex: none;
  color: var(--hh-yellow);
}

.hh2-vehicle-icon svg { width: 42px; height: 42px; }

.hh2-vehicle-text h3 {
  color: var(--hh-white);
  font-size: 1.3rem;
  margin-bottom: 0.2rem;
}

.hh2-vehicle-text p {
  color: var(--hh-gray-500);
  margin: 0;
  font-size: 0.95rem;
}

.hh2-vehicle .btn { margin-left: auto; flex: none; }

@media (max-width: 760px) {
  .hh2-vehicle { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hh2-vehicle .btn { margin-left: 0; }
}

.hh2-truck-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 3rem;
}

@media (max-width: 900px) {
  .hh2-truck-tiles { grid-template-columns: 1fr; }
  /* NEVER put an aspect-ratio on .hh2-cat itself: it's a flex column whose
     children (16/9 media + padded body) always need more height than the
     ratio allows, and the transferred min-width sends WebKit into an
     unbounded grow loop (tiles inflated past 3000px on real iPhones). */
}

/* ============================================
   FINANCE / RTO BAND
   ============================================ */

/* Light band between the dark pagehead and the dark stores CTA. */
.hh2-finance-band {
  background: var(--hh-gray-100);
  border-bottom: 1px solid var(--hh-gray-200);
}

.hh2-finance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.hh2-finance-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--hh-gray-200);
  background: var(--hh-white);
  transition: transform var(--transition), box-shadow var(--transition);
}

.hh2-finance-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.hh2-finance-grid.is-three { grid-template-columns: repeat(3, 1fr); }

/*
 * Spec plate: the black header carries the one figure that decides the
 * option — no credit check, the APR band, the same-as-cash term.
 */
.hh2-plate {
  position: relative;
  padding: 1.5rem clamp(1.5rem, 2.5vw, 2rem) 1.35rem;
  background: var(--hh-black-deep);
  overflow: hidden;
}

.hh2-plate::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--hh-gray-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.hh2-finance-card.is-lead .hh2-plate::after,
.hh2-finance-card:hover .hh2-plate::after {
  background: var(--hh-yellow);
  transform: scaleX(1);
}

.hh2-plate-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  margin-bottom: 0.9rem;
}

.hh2-plate-figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--hh-yellow);
}

.hh2-plate-figure em {
  font-style: normal;
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 0.04em;
}

.hh2-plate-label {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-white);
}

.hh2-finance-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

.hh2-finance-card h3 {
  margin-bottom: 1rem;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.15;
}

.hh2-finance-card p {
  color: var(--hh-gray-700);
  margin-bottom: 1.5rem;
  max-width: 46ch;
}

/* Buttons sit on a shared baseline no matter how the copy above them runs. */
.hh2-finance-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  margin-top: auto;
}

.hh2-finance-links .btn {
  justify-content: center;
  width: 100%;
}

.hh2-btn-ghost {
  background: transparent;
  color: var(--hh-black);
  box-shadow: inset 0 0 0 2px var(--hh-gray-300);
}

.hh2-btn-ghost:hover {
  background: var(--hh-black);
  color: var(--hh-white);
  box-shadow: inset 0 0 0 2px var(--hh-black);
  transform: translateY(-2px);
}

.hh2-finance-card .hh2-finance-note {
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hh-gray-200);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.65;
  color: var(--hh-gray-700);
  max-width: none;
}

.hh2-finance-card .hh2-finance-note a {
  color: var(--hh-gray-900);
  text-decoration: underline;
}

.hh2-finance-card .hh2-finance-note a:hover { color: var(--hh-black); }

/* ---- Financing disclosures ---- */
.hh2-legal {
  display: grid;
  grid-template-columns: minmax(0, 10rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  border-left: var(--border-accent);
}

.hh2-legal-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hh-gray-900);
}

.hh2-legal p {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--hh-gray-700);
  max-width: 88ch;
  margin: 0 0 0.55rem;
}

.hh2-legal p:last-child { margin-bottom: 0; }

.hh2-legal .hh2-legal-lead {
  font-weight: 600;
  color: var(--hh-gray-900);
}

.hh2-legal a {
  color: var(--hh-gray-900);
  text-decoration: underline;
}

.hh2-legal a:hover { color: var(--hh-black); }

@media (max-width: 700px) {
  .hh2-legal { grid-template-columns: 1fr; gap: 0.9rem; }
}

.hh2-checklist {
  margin-bottom: 1.1rem;
}

.hh2-checklist li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.45rem;
  color: var(--hh-gray-900);
}

.hh2-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  background: var(--hh-yellow);
}

.hh2-pagehead-sub {
  color: var(--hh-gray-500);
  margin: 0.75rem 0 0;
  max-width: 60ch;
}

@media (max-width: 1000px) {
  .hh2-finance-grid.is-three { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .hh2-finance-grid { grid-template-columns: 1fr; }
}

/* ============================================
   STORES BAND
   ============================================ */
.hh2-stores {
  background: var(--hh-black);
  color: var(--hh-white);
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.hh2-stores h2 {
  color: var(--hh-white);
  max-width: 18ch;
  margin: 0 auto 1rem;
}

.hh2-stores h2 .highlight { color: var(--hh-yellow); }

.hh2-stores-states {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  margin-bottom: 2.25rem;
}

.hh2-stores-states em { font-style: normal; color: var(--hh-yellow); padding: 0 0.4rem; }

.hh2-stores-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ============================================
   INTERIOR PAGE CHROME + LEGACY CONTENT
   ============================================ */
.hh2-page { padding-top: 80px; }

.hh2-pagehead {
  background: var(--hh-black-deep);
  border-bottom: 3px solid var(--hh-yellow);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
}

.hh2-pagehead h1 {
  color: var(--hh-white);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  margin: 0;
}

.hh2-page-content { max-width: 860px; }
.hh2-page-content h2 { margin: 1.6em 0 0.5em; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.hh2-page-content h3 { margin: 1.4em 0 0.4em; }
.hh2-page-content ul,
.hh2-page-content ol { list-style: disc; padding-left: 1.4rem; margin-bottom: 1.1em; }
.hh2-page-content ol { list-style: decimal; }
.hh2-page-content a { color: var(--hh-yellow-dark); font-weight: 600; }
.hh2-page-content a:hover { color: var(--hh-black); }
.hh2-page-content img { margin: 1.25rem 0; }
.hh2-page-content iframe { max-width: 100%; }

/* Blog articles now live in assets/css/article.css, which loads on single
   posts only. .hh2-page-content above still supplies their base rhythm. */
.hh2-page-full { overflow-x: clip; }
.hh2-page-full img { height: auto; }
.hh2-page-full iframe { max-width: 100%; }

/* Unwrapped Divi pages: orphan text/images at the top level get a readable
   centered column; custom-designed pages wrap everything in their own
   sections so this never touches them. */
.hh2-page-full > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, table, a, span, button) {
  display: block;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  padding-right: clamp(1.25rem, 3vw, 2rem);
}

.hh2-page-full > :is(h1, h2, h3, h4) { margin-top: 1.5em; margin-bottom: 0.4em; }
.hh2-page-full > p { margin-bottom: 1em; }
.hh2-page-full > ul,
.hh2-page-full > ol { list-style: disc; padding-left: 3rem; margin-bottom: 1.1em; }

.hh2-page-full > img {
  display: block;
  max-width: min(900px, 100%);
  margin: 1.5rem auto;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
}

.hh2-page-full > a.btn,
.hh2-page-full > .btn { display: inline-flex; max-width: none; margin: 0.5rem auto 1.5rem; }

/* ============================================
   SWIMMING POOLS PAGE
   ============================================ */
.hh2-pagehead--pools {
  position: relative;
  border-bottom: none;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

.hh2-pagehead--pools h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
}

.hh2-pagehead--pools .hh2-pagehead-sub {
  margin-top: 0.5rem;
}

/* Hero variant: generated dusk-backyard photo behind the pagehead copy.
   Bold but bounded — the series ladder must still land within one short
   scroll, so this is a band, not a full-viewport splash. */
.hh2-pagehead--pools.has-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(22rem, 44vh, 28rem);
  overflow: hidden;
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.hh2-pagehead--pools.has-hero .container {
  position: relative;
  z-index: 2;
}

.hh2-pool-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 58%;
}

.hh2-pool-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.72) 30%, rgba(13, 13, 13, 0.28) 58%, rgba(13, 13, 13, 0.12) 78%, rgba(13, 13, 13, 0.3) 100%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.6) 0%, rgba(13, 13, 13, 0) 32%, rgba(13, 13, 13, 0) 62%, rgba(13, 13, 13, 0.5) 100%);
}

.hh2-pagehead--pools.has-hero .hh2-pagehead-sub {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.hh2-pagehead--pools.has-hero h1 {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.hh2-pool-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.hh2-pagehead--pools.has-hero .hh2-pool-jump {
  margin-top: 1.1rem;
}

.hh2-pagehead--pools.has-hero .hh2-pool-jump a {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(13, 13, 13, 0.35);
  backdrop-filter: blur(2px);
}

.hh2-pagehead--pools.has-hero .hh2-pool-jump a:hover {
  border-color: var(--hh-yellow);
}

.hh2-pagehead--pools.has-hero .hh2-pool-jump a span {
  color: var(--hh-gray-300);
}

@media (max-width: 760px) {
  .hh2-pagehead--pools.has-hero {
    min-height: clamp(19rem, 64vw, 24rem);
  }

  .hh2-pool-hero-bg {
    object-position: 62% 58%;
  }
}

.hh2-waterline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 44'%3E%3Cpath d='M0 24 Q90 4 180 24 T360 24 T540 24 T720 24 V44 H0 Z' fill='%23F7F7F7'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 720px 44px;
  animation: hh2-wave 24s linear infinite;
}

@keyframes hh2-wave {
  to { background-position-x: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  .hh2-waterline { animation: none; }
}

.hh2-pool-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.hh2-pool-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hh-white);
}

.hh2-pool-jump a span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--hh-gray-500);
}

.hh2-pool-jump a:hover {
  border-color: var(--hh-yellow);
  color: var(--hh-yellow);
}

.hh2-pool-ladder-band {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
}

.hh2-pool-ladder-band h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin-bottom: 0;
}

.hh2-pool-ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hh-gray-200);
  border: 1px solid var(--hh-gray-200);
  margin-top: 1.25rem;
  list-style: none;
  padding: 0;
  box-shadow: var(--shadow-card);
}

.hh2-pool-ladder li::after {
  transition: width var(--transition);
}

.hh2-pool-ladder li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem 1.35rem;
  background: var(--hh-white);
}

.hh2-pool-ladder li::after {
  content: '';
  position: absolute;
  left: 1.1rem;
  bottom: 0.7rem;
  height: 4px;
  background: var(--hh-yellow);
}

.hh2-pool-ladder-band + .section {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* Catalog rhythm: round + oval read as one continuous catalog instead of
   two sections separated by a ~200px dead zone of stacked section padding. */
#round-pools {
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

#oval-pools {
  padding-top: 0;
  padding-bottom: clamp(2.75rem, 5vw, 4rem);
}

.hh2-pool-finance {
  padding: clamp(3.25rem, 6vw, 4.75rem) 0;
}

.hh2-pool-ladder li:nth-child(1)::after { width: 18%; }
.hh2-pool-ladder li:nth-child(2)::after { width: 32%; }
.hh2-pool-ladder li:nth-child(3)::after { width: 46%; }
.hh2-pool-ladder li:nth-child(4)::after { width: 60%; }
.hh2-pool-ladder li:nth-child(5)::after { width: 74%; }

.hh2-pool-ladder li:hover::after { width: 84%; }

.hh2-pool-ladder li.is-popular {
  outline: 3px solid var(--hh-yellow);
  outline-offset: -3px;
  z-index: 1;
}

.hh2-pool-ladder__num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hh-black);
}

.hh2-pool-ladder__label {
  font-weight: 600;
  color: var(--hh-gray-900);
}

.hh2-pool-ladder__note {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  margin-bottom: 0.6rem;
}

.hh2-pool-ladder li.is-popular .hh2-pool-ladder__note {
  align-self: flex-start;
  background: var(--hh-yellow);
  color: var(--hh-black);
  padding: 0.2rem 0.5rem;
}

.hh2-pool-section-sub {
  color: var(--hh-gray-700);
  max-width: 60ch;
  margin: 0.5rem 0 1.5rem;
}

.hh2-pool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.hh2-pool-card {
  display: flex;
  flex-direction: column;
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.hh2-pool-card:hover {
  transform: translate(-4px, -4px);
  border-color: var(--hh-black);
  box-shadow: 8px 8px 0 var(--hh-yellow), 0 14px 32px rgba(0, 0, 0, 0.14);
}

.hh2-pool-card__media img {
  transition: transform var(--transition);
}

.hh2-pool-card:hover .hh2-pool-card__media img {
  transform: scale(1.04);
}

.hh2-pool-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--hh-gray-100);
  overflow: hidden;
}

.hh2-pool-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* wide promo art (oval card): show the full image, no side crop */
.hh2-pool-card--wide .hh2-pool-card__media {
  aspect-ratio: auto;
}

.hh2-pool-card--wide .hh2-pool-card__media img {
  height: auto;
  display: block;
}

.hh2-pool-card__series {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--hh-black);
  color: var(--hh-yellow);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}

.hh2-pool-card__popular {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--hh-yellow);
  color: var(--hh-black);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}

.hh2-pool-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.75rem;
}

.hh2-pool-card__body h3 {
  font-size: 1.3rem;
  margin-bottom: 0.65rem;
}

.hh2-pool-card__body p {
  color: var(--hh-gray-700);
  flex: 1;
  margin-bottom: 1.4rem;
}

.hh2-pool-card__body .btn {
  align-self: stretch;
  justify-content: center;
  text-align: center;
}

.hh2-pool-card__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.hh2-pool-card__amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hh-black);
}

.hh2-pool-card__amount del {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--hh-gray-500);
  margin-right: 0.45rem;
}

.hh2-pool-card__amount ins {
  text-decoration: none;
}

.hh2-pool-card__save {
  background: var(--hh-yellow);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
}

.hh2-pool-card__call {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}

.hh2-pool-finance {
  text-align: center;
}

.hh2-pool-finance h2 .highlight { color: var(--hh-yellow); }

.hh2-pool-finance-sub {
  color: var(--hh-gray-300);
  max-width: 62ch;
  margin: 0 auto 2.25rem;
}

@media (max-width: 1100px) {
  .hh2-pool-grid { grid-template-columns: repeat(2, 1fr); }
  .hh2-pool-ladder { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .hh2-pool-grid { grid-template-columns: 1fr; }
  .hh2-pool-ladder { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .hh2-pool-ladder { grid-template-columns: 1fr; }
}

/* ============================================
   GRILLS & SMOKERS PAGE
   ============================================ */
.hh2-brand-slab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.hh2-brand-slab.is-flipped .hh2-brand-slab__media { order: 2; }
.hh2-brand-slab.is-flipped .hh2-brand-slab__body { order: 1; }

.hh2-brand-slab__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--hh-gray-100);
  border: 1px solid var(--hh-gray-200);
  overflow: hidden;
}

.hh2-brand-slab__media.is-yellow { background: var(--hh-yellow); border-color: var(--hh-yellow); }

.hh2-brand-slab__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(1rem, 3vw, 2.5rem);
  transition: transform var(--transition);
}

.hh2-brand-slab__media:hover img { transform: scale(1.04); }

.hh2-brand-slab__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  margin-bottom: 0.9rem;
}

.hh2-brand-slab__body h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: 0.75rem;
}

.hh2-brand-slab__lede {
  color: var(--hh-gray-700);
  max-width: 52ch;
  margin-bottom: 1.25rem;
}

.hh2-brand-slab__from {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.25rem 0 1.5rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--hh-black);
}

.hh2-brand-slab__from span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
}

.hh2-grill-acc { text-align: left; }

.hh2-grill-acc h2 .highlight { color: var(--hh-yellow); }

.hh2-grill-acc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 2.5rem;
}

.hh2-grill-acc-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--hh-black-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color var(--transition-fast), transform var(--transition);
}

.hh2-grill-acc-card:hover {
  border-color: var(--hh-yellow);
  transform: translateY(-4px);
}

.hh2-grill-acc-card h3 { color: var(--hh-white); margin: 0; }

.hh2-grill-acc-card p { color: var(--hh-gray-300); margin: 0; flex: 1; }

.hh2-grill-acc-card__cta {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hh-yellow);
}

@media (max-width: 900px) {
  .hh2-brand-slab { grid-template-columns: 1fr; }
  .hh2-brand-slab.is-flipped .hh2-brand-slab__media { order: 0; }
  .hh2-brand-slab.is-flipped .hh2-brand-slab__body { order: 1; }
  .hh2-grill-acc-grid { grid-template-columns: 1fr; }
}

/* ============================================
   SINGLE PRODUCT - PREMIUM PASS
   ============================================ */
.single-product div.product {
  padding-top: clamp(1.5rem, 3vw, 3rem);
}

/* Gallery */
.single-product .woocommerce-product-gallery {
  border: 1px solid var(--hh-gray-200);
  background: var(--hh-white);
}

.single-product .woocommerce-product-gallery__wrapper {
  margin: 0;
}

.single-product .flex-control-thumbs {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
}

.single-product .flex-control-thumbs li {
  flex: 0 0 calc(20% - 5px);
  border: 1px solid var(--hh-gray-200);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.single-product .flex-control-thumbs li:hover,
.single-product .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--hh-black);
}

.single-product span.onsale {
  background: var(--hh-black);
  color: var(--hh-yellow);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  padding: 0.45rem 0.8rem;
  top: 12px;
  left: 12px;
  z-index: 5;
}

/* Price */
.single-product .summary .price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.9rem;
  margin-bottom: 1.25rem;
}

.single-product .summary .price del {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--hh-gray-500);
  opacity: 1;
}

.single-product .summary .price ins {
  text-decoration: none;
  font-weight: 700;
}

/* Meta row */
.single-product .product_meta {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hh-gray-200);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.single-product .product_meta a { color: var(--hh-gray-900); }
.single-product .product_meta a:hover { color: var(--hh-yellow-dark); }

/* ============================================
   PRODUCT ADD-ONS (hhoutdoor-product-addons)
   ============================================ */
.hhoutdoor-product-addons {
  border: 1px solid var(--hh-gray-200) !important;
  border-radius: 0 !important;
  background: var(--hh-white) !important;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}

.addon-notice {
  background: var(--hh-gray-100) !important;
  border: none !important;
  border-left: 3px solid var(--hh-yellow) !important;
  border-radius: 0 !important;
  color: var(--hh-gray-900) !important;
  font-size: 0.9rem;
}

.addon-notice .dashicons { color: var(--hh-black) !important; }

.addon-field { margin-bottom: 1.75rem; }

.addon-label {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hh-black) !important;
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem !important;
}

.addon-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  background: var(--hh-yellow);
}

.addon-label .required { color: #c0392b; }

/* Option cards */
.hhoutdoor-product-addons .addon-option {
  border: 1px solid var(--hh-gray-200) !important;
  border-radius: 0 !important;
  background: var(--hh-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hhoutdoor-product-addons .addon-option:hover {
  border-color: var(--hh-gray-900) !important;
  box-shadow: none !important;
}

.hhoutdoor-product-addons .addon-option:has(input:checked) {
  border-color: var(--hh-black) !important;
  box-shadow: 4px 4px 0 var(--hh-yellow) !important;
}

.hhoutdoor-product-addons .addon-option label { border-radius: 0 !important; }

.hhoutdoor-product-addons input[type="checkbox"],
.hhoutdoor-product-addons input[type="radio"] {
  accent-color: var(--hh-black);
  width: 18px;
  height: 18px;
}

.hhoutdoor-product-addons .radio-indicator {
  border-color: var(--hh-gray-300) !important;
}

.hhoutdoor-product-addons label:has(input:checked) .radio-indicator {
  border-color: var(--hh-black) !important;
  background: var(--hh-black) !important;
  box-shadow: inset 0 0 0 3px var(--hh-white) !important;
}

.option-label { color: var(--hh-gray-900) !important; }

.option-price,
.hhoutdoor-product-addons .option-price {
  width: fit-content !important;
  font-family: var(--font-mono) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--hh-black) !important;
  background: var(--hh-yellow);
  padding: 0.25rem 0.55rem;
  display: inline-block;
}

.addon-sale-price del { color: var(--hh-gray-500) !important; }

/* Location / install price banner */
.location-price-display {
  background: var(--hh-gray-100) !important;
  border: none !important;
  border-left: 3px solid var(--hh-yellow) !important;
  border-radius: 0 !important;
  color: var(--hh-black) !important;
  font-weight: 700;
}

.location-price-display * { color: var(--hh-black) !important; }

/* Selects + quantity inputs */
.hhoutdoor-product-addons select,
.hhoutdoor-product-addons .addon-quantity-input {
  border: 1px solid var(--hh-gray-300) !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  padding: 10px 12px;
  background: var(--hh-white);
}

.hhoutdoor-product-addons select:focus,
.hhoutdoor-product-addons .addon-quantity-input:focus {
  border-color: var(--hh-black) !important;
  outline: 2px solid var(--hh-yellow);
  outline-offset: 0;
}

/* Running total */
.addon-price-summary {
  background: var(--hh-black-deep) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.25rem 1.5rem !important;
}

.addon-price-summary .summary-row {
  color: var(--hh-gray-300) !important;
  font-size: 0.9rem;
}

.addon-price-summary .summary-label { color: var(--hh-gray-300) !important; }
.addon-price-summary .summary-value { color: var(--hh-white) !important; font-weight: 600; }

.addon-price-summary .total-row {
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  margin-top: 0.75rem;
  padding-top: 0.75rem !important;
}

.addon-price-summary .total-row .summary-label {
  color: var(--hh-white) !important;
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.addon-price-summary .total-row .summary-value {
  color: var(--hh-yellow) !important;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
}

/* Tabs + panels */
.single-product .woocommerce-tabs {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 3px solid var(--hh-black);
  padding-top: 0;
}

.single-product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--hh-gray-200);
  padding-left: 0;
}

.single-product .woocommerce-Tabs-panel {
  max-width: 60rem;
  padding: 1.5rem 0 0;
  line-height: 1.75;
}

.single-product .woocommerce-Tabs-panel > h2:first-child {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.single-product .woocommerce-Tabs-panel ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.25em;
}

.single-product .woocommerce-Tabs-panel ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.45rem;
}

.single-product .woocommerce-Tabs-panel ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  background: var(--hh-yellow);
}

/* Related products */
.single-product section.related {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2.5rem;
  border-top: 3px solid var(--hh-black);
}

.single-product section.related > h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 0.7rem;
  margin-bottom: 2rem;
}

.single-product section.related > h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  background: var(--hh-yellow);
}

/* ============================================
   SEARCH RESULTS PAGE
   ============================================ */
.hh2-search-results .hh2-pagehead h1 {
  overflow-wrap: anywhere;
}

.woocommerce nav.woocommerce-pagination {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--hh-gray-200);
  background: var(--hh-white);
  color: var(--hh-gray-900);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--hh-black);
  color: var(--hh-black);
  background: var(--hh-white);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--hh-black);
  border-color: var(--hh-black);
  color: var(--hh-yellow);
}

.hh2-search-empty {
  max-width: 46rem;
  padding: 1rem 0 2rem;
}

.hh2-search-empty h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 0.5rem;
}

.hh2-search-empty p {
  color: var(--hh-gray-700);
  margin-bottom: 1.5rem;
}

/* ============================================
   WOOCOMMERCE PRODUCT LOOP GRID (search, archives)
   ============================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

/* WooCommerce clearfixes ul.products with ::before/::after set to
   display:table. That was harmless when the list floated, but this grid turns
   both into grid items, and each one eats a whole cell — the related-products
   row on a product page rendered as [::before][card][card][card] with the
   fourth card pushed onto a second row, reading as a misaligned first card.

   content:none as well as display:none, and !important on both: WooCommerce's
   own rule is the same specificity and loads after the theme, so display:none
   alone lost and the pseudo-elements kept their cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product a img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--hh-white);
  margin-bottom: 0.75rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  flex: 1;
}

/* ============================================
   LOOP SALE BADGE (match single-product square)
   ============================================ */
.woocommerce ul.products li.product span.onsale {
  background: var(--hh-black);
  color: var(--hh-yellow);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  top: 10px;
  left: 10px;
  right: auto;
  margin: 0;
  z-index: 5;
}

/* ============================================
   BRAND DIRECTORY (YITH brands list page)
   ============================================ */
.yith-wcbr-brand-filter {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.yith-wcbr-brand-filter select,
.yith-wcbr-brand-select {
  border: 1px solid var(--hh-gray-300);
  border-radius: 0;
  padding: 10px 14px;
  font-family: var(--font-body);
  background: var(--hh-white);
  min-width: 220px;
}

.yith-wcbr-brands-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

.yith-wcbr-brands-list li,
.yith-wcbr-brands-list > div {
  margin: 0;
  border: 1px solid var(--hh-gray-200);
  background: var(--hh-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.yith-wcbr-brands-list li:hover,
.yith-wcbr-brands-list > div:hover {
  border-color: var(--hh-black);
  box-shadow: 4px 4px 0 var(--hh-yellow);
}

.yith-wcbr-brands-list a {
  display: block;
  padding: 0.9rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--hh-black);
}

.yith-wcbr-brands-list .count,
.yith-wcbr-brands-list small {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--hh-gray-500);
}

/* ============================================
   DWC CATALOG FILTER TOOLBAR (sporting goods, trailer parts)
   ============================================ */
.dwc-filters-wrapper {
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  border-top: 3px solid var(--hh-yellow);
  padding: 1.25rem 1.25rem 1.4rem;
  margin-bottom: 2rem;
}

.dwc-filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.5rem;
  align-items: end;
}

.dwc-filter-section {
  margin: 0 !important;
}

.dwc-filter-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  margin-bottom: 0.5rem;
}

.dwc-filter-form select,
.dwc-filter-form input[type="text"],
.dwc-filter-form input[type="number"],
.dwc-filter-form input[type="search"] {
  width: 100%;
  border: 1px solid var(--hh-gray-300);
  border-radius: 0;
  padding: 10px 12px;
  font-family: var(--font-body);
  background: var(--hh-white);
}

.dwc-filter-actions {
  display: flex;
  gap: 0.6rem;
  grid-column: -2 / -1;
}

.dwc-apply-filters,
.dwc-reset-filters {
  flex: 0 0 auto;
  width: auto !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 22px !important;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dwc-apply-filters {
  background: var(--hh-yellow) !important;
  color: var(--hh-black) !important;
  border: none !important;
}

.dwc-apply-filters:hover {
  background: var(--hh-yellow-hover) !important;
}

.dwc-reset-filters {
  background: var(--hh-white) !important;
  color: var(--hh-black) !important;
  border: 2px solid var(--hh-black) !important;
}

.dwc-reset-filters:hover {
  background: var(--hh-black) !important;
  color: var(--hh-white) !important;
}

@media (max-width: 700px) {
  .dwc-filter-actions { grid-column: 1 / -1; }
}

/* Hero banner slider leads; split hero becomes second act */
.hh2-banner-slider { padding-top: 80px; background: var(--hh-black-deep); line-height: 0; }
.hh2-banner-slider > *, .hh2-banner-slider .hero-banner-slider { margin: 0 !important; line-height: normal; }
.hh2-banner-slider img { width: 100%; height: auto; display: block; }

/* Do NOT cap this height and cover-crop the slide. The headline, the price flag
   and the H&H lockup are baked into the pixels, and the pool slide puts that
   lockup hard against the top edge — any vertical crop decapitates it.

   The artwork was re-cut to 4:1 on 2026-08-28 (2560x640, was 2560x800), which
   is what actually shortened this band: 523px -> 435px at desktop width. Two of
   the three could not simply be cropped to get there — the towing slide's
   strapline sits in the bottom 160px, and the carports headline runs to both
   edges — so those were scaled down inside the wider frame with the margins
   rebuilt from their own background. Replacing a slide means matching 4:1, or
   this band silently grows again. */

/* The 3px yellow rule used to live on the strapline between the two heroes.
   That strapline is gone, so it closes the slider instead. */
.hh2-banner-slider { border-bottom: 3px solid var(--hh-yellow); }
.hh2-hero--secondary { padding-top: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); }

/* ============================================
   FULL-BLEED PHOTOGRAPHIC HERO
   ============================================ */

/* The hero the outdoor landers open on: one photograph edge to edge with the
   headline sitting on it, rather than the two-column "text on black, photo in
   a bordered box" that .bl-hero gives by default. The carports page has read
   this way for a while and the rest of the Outdoor nav did not, which is the
   whole reason this block exists -- there is one implementation now instead of
   a copy per page.

   It lives in this sheet rather than brand-landing.css because the trailer
   catalog uses it too and does not load brand-landing.

   The markup it expects:

     <section class="bl-hero bl-hero--bleed">
       <div class="bl-hero-media"><img ...></div>
       <span class="bl-hero-scrim" aria-hidden="true"></span>
       <div class="container"><div class="bl-hero-inner"> ... </div></div>
     </section>

   Media and scrim have to be direct children of the section. They are
   positioned against it, so any wrapper in between would become the
   containing block instead and the photograph would end up the size of the
   text column. The child combinators below are there to make that fail
   loudly rather than quietly.

   Per-page tuning is done with the custom properties, set on the section:
   --hero-min / --hero-min-sm (band height), --hero-pos / --hero-pos-sm
   (which part of the photograph survives the crop), --hero-copy (text column
   width) and --hero-scrim.

   --hero-pos is worth understanding before reaching for it. These are all
   3:2 photographs in a band around 2.7:1, so at desktop widths the crop is
   vertical only and the X half does nothing -- the whole width is on screen
   and the headline will sit over whatever is in the left half of the frame.
   X only starts to bite on a phone, which is what --hero-pos-sm is for. */

:root {
  /* One ink for every scrim on the site. Slightly cooler than --hh-black-deep
     because it sits over daylight photography, where a neutral black goes
     muddy against blue sky. */
  --hh-hero-ink: 8, 12, 20;

  /* Two scrims because the type sits in two different places. The carports
     page centres its headline over the middle of the frame; everything else
     runs a column down the left, so the darkening runs left-to-right and the
     photograph is left alone on the side nobody is reading over.

     Both are held deliberately light. A scrim heavy enough to guarantee
     contrast on its own turns a midday photograph into a dusk one, which is
     the note this whole batch of images was rejected on last time -- the type
     makes up the difference with --hh-hero-type-shadow below. */
  --hh-hero-scrim-center:
    linear-gradient(180deg,
      rgba(var(--hh-hero-ink), 0.5) 0%,
      rgba(var(--hh-hero-ink), 0.31) 34%,
      rgba(var(--hh-hero-ink), 0.34) 66%,
      rgba(var(--hh-hero-ink), 0.64) 100%);

  --hh-hero-scrim-left:
    linear-gradient(90deg,
      rgba(var(--hh-hero-ink), 0.92) 0%,
      rgba(var(--hh-hero-ink), 0.82) 26%,
      rgba(var(--hh-hero-ink), 0.48) 48%,
      rgba(var(--hh-hero-ink), 0.12) 70%,
      rgba(var(--hh-hero-ink), 0.26) 100%),
    linear-gradient(180deg,
      rgba(var(--hh-hero-ink), 0.45) 0%,
      rgba(var(--hh-hero-ink), 0) 34%,
      rgba(var(--hh-hero-ink), 0) 64%,
      rgba(var(--hh-hero-ink), 0.4) 100%);

  /* Narrow screens put the type across the full width, so a left-to-right
     ramp has nowhere to fall away to and the scrim has to run top-to-bottom
     instead. Every bleed hero takes this one below 760px, whatever it asked
     for at desktop.

     0.58 through the middle is a floor, not a taste call: the aluminum shed
     and the spa both put a sunlit white wall behind the sub-heading, and
     anything lighter drops white body text under 4.5:1 against it. */
  --hh-hero-scrim-stacked:
    linear-gradient(180deg,
      rgba(var(--hh-hero-ink), 0.74) 0%,
      rgba(var(--hh-hero-ink), 0.58) 42%,
      rgba(var(--hh-hero-ink), 0.72) 100%);

  --hh-hero-type-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Doubled class so this beats the plain .bl-hero in brand-landing.css, which
   is enqueued after this sheet on the pages that load both. */
.bl-hero.bl-hero--bleed {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: var(--hero-min, clamp(23rem, 38vw, 33rem));
  background: var(--hh-black-deep);
  color: var(--hh-white);
  border-bottom: 3px solid var(--bl-accent, var(--hh-yellow));
}

/* The accent glow brand-landing draws behind the cutout heroes. Nothing to
   see under a photograph. */
.bl-hero.bl-hero--bleed::after { display: none; }

.bl-hero--bleed > .bl-hero-media {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

.bl-hero--bleed > .bl-hero-media picture {
  display: block;
  height: 100%;
}

/* Everything after object-position undoes the framed-card treatment
   .bl-hero-media--photo applies, which only makes sense on a photo sitting in
   its own column. */
.bl-hero.bl-hero--bleed > .bl-hero-media img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 50%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

.bl-hero--bleed > .bl-hero-scrim {
  position: absolute;
  inset: 0;
  background: var(--hero-scrim, var(--hh-hero-scrim-left));
}

.bl-hero--bleed > .container {
  position: relative;
  z-index: 2;
}

.bl-hero--bleed .bl-hero-inner {
  display: block;
  max-width: var(--hero-copy, 44rem);
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
}

.bl-hero.bl-hero--bleed h1 {
  color: var(--hh-white);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.02;
}

.bl-hero--bleed .eyebrow,
.bl-hero--bleed h1,
.bl-hero--bleed .bl-hero-sub {
  text-shadow: var(--hh-hero-type-shadow);
}

.bl-hero--bleed .bl-hero-sub { color: rgba(255, 255, 255, 0.9); }

/* Outlined pills lose their small print against a lit wall or a sunlit deck,
   so over photography they get their own ground. */
.bl-hero--bleed .bl-jump a,
.bl-hero--bleed .hh2-trailer-stats span {
  background: rgba(var(--hh-hero-ink), 0.55);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(3px);
}

.bl-hero--bleed .bl-jump a small,
.bl-hero--bleed .hh2-trailer-stats span small { color: var(--hh-gray-300); }

@media (max-width: 760px) {
  .bl-hero.bl-hero--bleed { min-height: var(--hero-min-sm, clamp(19rem, 56vw, 24rem)); }

  .bl-hero.bl-hero--bleed > .bl-hero-media img {
    max-width: none;
    object-position: var(--hero-pos-sm, var(--hero-pos, 50% 50%));
  }

  .bl-hero--bleed > .bl-hero-scrim { background: var(--hh-hero-scrim-stacked); }

  .bl-hero--bleed .bl-hero-inner { max-width: none; }
}

/* ============================================
   TRAILER CATALOG (trailer-listings plugin)
   ============================================ */

/* The catalog is the page, so this band is held to the shortest height in the
   set and the section under it is pulled up: the type chips and the first row
   of trailers have to stay on screen on a laptop. */
.hh2-trailers .bl-hero--bleed {
  --hero-min: clamp(19rem, 30vw, 23.5rem);
  --hero-min-sm: clamp(17rem, 58vw, 21rem);
  --hero-pos: 74% 56%;
  --hero-pos-sm: 55% 60%;
}

.hh2-trailers .bl-hero-inner { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }

.hh2-trailers .bl-hero-sub {
  max-width: 44ch;
  margin: 0.75rem 0 0;
}

.hh2-trailers .bl-hero h1 { margin: 0; }

.hh2-trailers .bl-hero .hh2-trailer-stats { margin-top: 1.25rem; }

.hh2-trailers .bl-hero + .section { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Closing band: the copy reads better against a real unit than on its own. */
.hh2-trailer-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}

.hh2-trailer-close .hh2-page-content h2 { margin-top: 0; }

.hh2-trailer-close-fig { margin: 0; }

.hh2-trailer-close-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hh-gray-200);
}

@media (max-width: 860px) {
  .hh2-trailer-close { grid-template-columns: 1fr; }
  .hh2-trailer-close-fig { order: -1; }
}

.hh2-trailer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hh2-trailer-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hh-white);
}

.hh2-trailer-stats span small {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--hh-gray-500);
}

.hh2-trailers .tl-subcat-btn {
  border-radius: 0;
  border: 1px solid var(--hh-gray-300);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hh2-trailers .tl-subcat-btn:hover {
  background: var(--hh-white);
  color: var(--hh-black);
  border-color: var(--hh-black);
}

.hh2-trailers .tl-subcat-btn.active {
  background: var(--hh-yellow);
  color: var(--hh-black);
  border-color: var(--hh-yellow);
}

.hh2-trailers .tl-filters {
  border: 1px solid var(--hh-gray-200);
  border-top: 3px solid var(--hh-yellow);
  border-radius: 0;
  box-shadow: none;
}

.hh2-trailers .tl-filters-header h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hh2-trailers .tl-filter-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
}

.hh2-trailers .tl-filter-value {
  font-family: var(--font-mono);
  color: var(--hh-black);
}

.hh2-trailers .tl-select,
.hh2-trailers .tl-search-input {
  border-radius: 0;
  border-color: var(--hh-gray-300);
  font-family: var(--font-body);
}

.hh2-trailers .tl-btn,
.hh2-trailers .tl-mobile-filter-toggle,
.hh2-trailers .tl-action-btn {
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hh2-trailers .tl-result-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
}

.hh2-trailers .tl-item {
  border: 1px solid var(--hh-gray-200);
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hh2-trailers .tl-item:hover {
  border-color: var(--hh-black);
  box-shadow: 6px 6px 0 var(--hh-yellow);
  transform: translate(-2px, -2px);
}

.hh2-trailers .tl-item-image {
  background: var(--hh-white);
}

.hh2-trailers .tl-item-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hh2-trailers .tl-spec-icon {
  display: none;
}

.hh2-trailers .tl-item-specs li {
  color: var(--hh-gray-700);
}

.hh2-trailers .tl-item-specs li strong {
  display: inline-block;
  min-width: 92px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
}

.hh2-trailers .tl-location-tag {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.hh2-trailers .tl-price-main,
.hh2-trailers .tl-price-sale {
  font-family: var(--font-display);
  font-weight: 700;
}

.hh2-trailers .tl-price-original {
  color: var(--hh-gray-500);
}

.hh2-trailers .tl-price-savings {
  background: var(--hh-black);
  color: var(--hh-yellow);
  border-radius: 0;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hh2-trailers .tl-action-primary {
  background: var(--hh-black);
  color: var(--hh-yellow);
}

.hh2-trailers .tl-action-primary:hover {
  background: var(--hh-yellow);
  color: var(--hh-black);
}

.hh2-trailers .tl-action-secondary {
  background: var(--hh-white);
  color: var(--hh-black);
  border: 2px solid var(--hh-black);
}

.hh2-trailers .tl-action-secondary:hover {
  background: var(--hh-black);
  color: var(--hh-white);
}

.hh2-trailers .tl-slider-btn {
  border-radius: 0;
}

.hh2-trailers .tl-slider-counter {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.hh2-trailers .tl-faq {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.hh2-trailers .tl-faq-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.hh2-trailers .tl-faq-item {
  border: 1px solid var(--hh-gray-200);
  border-radius: 0;
  background: var(--hh-white);
  box-shadow: none;
  margin-bottom: 10px;
}

.hh2-trailers .tl-faq-item[open] {
  border-left: 3px solid var(--hh-yellow);
}

.hh2-trailers .tl-faq-question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
}

.hh2-trailers .tl-faq-answer {
  padding: 0 1.25rem 1.1rem;
  color: var(--hh-gray-700);
}

/* ============================================
   SHEDS HUB (wood vs aluminum chooser)
   ============================================ */
.hh2-rto-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin: 2rem 0 2.25rem;
}

.hh2-rto-stats > div {
  background: var(--hh-black-deep);
  padding: 1.4rem 1.25rem;
}

.hh2-rto-stats h3 {
  color: var(--hh-yellow);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}

.hh2-rto-stats p {
  color: var(--hh-gray-500);
  font-size: 0.92rem;
  margin: 0;
}

.hh2-compare-wrap {
  overflow-x: auto;
  margin: 2rem 0 2.25rem;
  border: 1px solid var(--hh-gray-200);
}

.hh2-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.hh2-compare-table thead th {
  background: var(--hh-black);
  color: var(--hh-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.9rem 1.1rem;
}

.hh2-compare-table thead th:first-child {
  color: var(--hh-yellow);
}

.hh2-compare-table tbody th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  text-align: left;
  padding: 0.85rem 1.1rem;
  width: 18%;
}

.hh2-compare-table tbody td {
  padding: 0.85rem 1.1rem;
  color: var(--hh-gray-700);
  font-size: 0.95rem;
}

.hh2-compare-table tbody tr {
  border-top: 1px solid var(--hh-gray-200);
}

.hh2-compare-table tbody tr:nth-child(even) {
  background: var(--hh-gray-100);
}

.hh2-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.hh2-choice-card {
  border: 1px solid var(--hh-gray-200);
  border-top: 3px solid var(--hh-yellow);
  background: var(--hh-white);
  padding: 1.5rem 1.4rem;
}

.hh2-choice-card h3 {
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.hh2-choice-card p {
  color: var(--hh-gray-700);
  margin: 0;
}

.hh2-build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: 2rem;
}

.hh2-build-card {
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  padding: 1.5rem 1.4rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hh2-build-card:hover {
  border-color: var(--hh-black);
  box-shadow: 4px 4px 0 var(--hh-yellow);
}

.hh2-build-card h3 {
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--hh-yellow);
  display: inline-block;
}

.hh2-build-card p {
  color: var(--hh-gray-700);
  margin: 0;
  font-size: 0.95rem;
}

.hh2-sheds-hub .section--dark .hh2-finance-links {
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .hh2-rto-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .hh2-choice-grid,
  .hh2-build-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .hh2-rto-stats { grid-template-columns: 1fr; }
}

/* ============================================
   CARPORTS LANDER
   ============================================ */
.hh2-build-grid.is-three {
  grid-template-columns: repeat(3, 1fr);
}

.hh2-carport-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 2rem;
}

.hh2-carport-gallery a {
  display: block;
  border: 1px solid var(--hh-gray-200);
  background: var(--hh-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hh2-carport-gallery a:hover {
  border-color: var(--hh-black);
  box-shadow: 4px 4px 0 var(--hh-yellow);
}

.hh2-carport-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .hh2-build-grid.is-three { grid-template-columns: 1fr; }
  .hh2-carport-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   HOT TUBS & SPAS LANDER (existing content, restyled)
   ============================================ */
.hh2-spas .filter-btn {
  border-radius: 0;
  border: 1px solid var(--hh-gray-300);
  background: var(--hh-white);
  padding: 9px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.hh2-spas .filter-btn:hover {
  border-color: var(--hh-black);
  background: var(--hh-white);
  color: var(--hh-black);
}

.hh2-spas .filter-btn.active {
  background: var(--hh-yellow);
  border-color: var(--hh-yellow);
  color: var(--hh-black);
}

.hh2-spas .product-item {
  border-radius: 0 !important;
  border: 1px solid var(--hh-gray-200);
  box-shadow: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hh2-spas .product-item:hover {
  border-color: var(--hh-black);
  box-shadow: 6px 6px 0 var(--hh-yellow) !important;
  transform: translate(-2px, -2px);
}

.hh2-spas .product-img,
.hh2-spas .product-img-container {
  border-radius: 0 !important;
}

.hh2-spas .discount-badge {
  border-radius: 0 !important;
  background: var(--hh-black) !important;
  color: var(--hh-yellow) !important;
  box-shadow: none !important;
  animation: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0.4rem 0.7rem !important;
  font-family: var(--font-display) !important;
  line-height: 1.15 !important;
}

.hh2-spas .discount-badge .discount-amount,
.hh2-spas .discount-badge .discount-text {
  color: var(--hh-yellow) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hh2-spas .badge {
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--hh-gray-100) !important;
  border: 1px solid var(--hh-gray-200) !important;
  color: var(--hh-gray-700) !important;
}

.hh2-spas .product-title {
  font-family: var(--font-display) !important;
  letter-spacing: 0.02em;
}

.hh2-spas .product-link,
.hh2-spas .ht-btn {
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--transition-fast) !important;
}

.hh2-spas .product-link:hover,
.hh2-spas .ht-btn-primary:hover {
  background: var(--hh-black) !important;
  color: var(--hh-yellow) !important;
}

/* Hidden on purpose: the feature cards read better as a title with a yellow
   rule under it, the same shape the brand-landing feature blocks use. The
   markup behind this is stroked SVG rather than the emoji it used to be, so
   nothing here depends on a grayscale filter any more. */
.hh2-spas .feature-icon {
  display: none !important;
}

.hh2-spas .feature-title {
  font-family: var(--font-display) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--hh-yellow);
  display: inline-block;
  padding-bottom: 0.4rem;
}

.hh2-spas .feature-item {
  border-radius: 0 !important;
  border: 1px solid var(--hh-gray-200);
  box-shadow: none !important;
}

/* wpautop's stray empty <p> tags become phantom grid cells on this
   hand-coded page (the Divi sweeper skips non-Divi content) */
.hh2-spas .product-grid > p,
.hh2-spas .features > p,
.hh2-spas .collection-header p:empty {
  display: none;
}

/* the page's 80px yellow dash is left-aligned under a centered title */
.hh2-spas .collection-header h2::after,
.hh2-spas .footer-cta h2::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================
   HUNTING BLINDS (Shadow Hunter lander)
   ============================================ */
/* the page's light heading colors lived in Divi theme-options CSS
   that didn't migrate, so the theme's dark heading color won */
.shb-hero h1,
.shb .shb-h2 {
  color: var(--hh-white);
}

/* ============================================
   SPORTING GOODS FACETED FILTER
   ============================================ */
.hh-sgf {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.hh-sgf.is-loading #hh-sgf-grid {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.hh-sgf-mobile-toggle {
  display: none;
}

.hh-sgf-side {
  border: 1px solid var(--hh-gray-200);
  border-top: 3px solid var(--hh-yellow);
  background: var(--hh-white);
  padding: 1.25rem 1.1rem;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.hh-sgf-group {
  padding: 1rem 0;
  border-bottom: 1px solid var(--hh-gray-200);
}

.hh-sgf-group:first-child { padding-top: 0; }
.hh-sgf-group:last-child { border-bottom: none; padding-bottom: 0; }

.hh-sgf-group h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}

.hh-sgf-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--hh-gray-700);
}

.hh-sgf-check:hover .hh-sgf-label { color: var(--hh-black); }
.hh-sgf-check.is-child { padding-left: 1.4rem; }

.hh-sgf-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hh-sgf-box {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--hh-gray-300);
  background: var(--hh-white);
  position: relative;
}

.hh-sgf-check input:checked + .hh-sgf-box {
  background: var(--hh-yellow);
  border-color: var(--hh-black);
}

.hh-sgf-check input:checked + .hh-sgf-box::after {
  content: "";
  position: absolute;
  inset: 3px 5px 5px;
  width: 4px;
  height: 8px;
  border: solid var(--hh-black);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-left: 1px;
}

.hh-sgf-check input:focus-visible + .hh-sgf-box {
  outline: 2px solid var(--hh-yellow);
  outline-offset: 2px;
}

.hh-sgf-label { flex: 1; }

.hh-sgf-count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--hh-gray-500);
}

.hh-sgf-children {
  display: none;
}

.hh-sgf-children.is-open {
  display: block;
}

.hh-sgf-more-brands[hidden] { display: none; }

.hh-sgf-see-more {
  background: none;
  border: none;
  padding: 0.3rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  cursor: pointer;
}

.hh-sgf-see-more:hover { color: var(--hh-black); }

.hh-sgf-price-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-bottom: 0.8rem;
}

.hh-sgf-price-links button {
  background: none;
  border: none;
  padding: 0.15rem 0;
  font-size: 0.92rem;
  color: var(--hh-gray-700);
  cursor: pointer;
}

.hh-sgf-price-links button:hover {
  color: var(--hh-black);
  text-decoration: underline;
}

.hh-sgf-price-inputs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hh-sgf-price-inputs input {
  width: 70px;
  border: 1px solid var(--hh-gray-300);
  border-radius: 0;
  padding: 7px 8px;
  font-family: var(--font-body);
  font-size: 0.88rem;
}

.hh-sgf-price-inputs button {
  border: 2px solid var(--hh-black);
  background: var(--hh-white);
  border-radius: 0;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.hh-sgf-price-inputs button:hover {
  background: var(--hh-black);
  color: var(--hh-white);
}

.hh-sgf-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.hh-sgf-search {
  flex: 1 1 260px;
}

.hh-sgf-search input {
  width: 100%;
  border: 1px solid var(--hh-gray-300);
  border-radius: 0;
  padding: 10px 14px;
  font-family: var(--font-body);
}

.hh-sgf-search input:focus {
  outline: none;
  border-color: var(--hh-black);
  box-shadow: 0 2px 0 var(--hh-yellow);
}

.hh-sgf-result-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hh-gray-500);
  white-space: nowrap;
}

#hh-sgf-sort {
  border: 1px solid var(--hh-gray-300);
  border-radius: 0;
  padding: 9px 12px;
  font-family: var(--font-body);
  background: var(--hh-white);
}

.hh-sgf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.hh-sgf-chips:empty { margin-bottom: 0; }

.hh-sgf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--hh-gray-300);
  background: var(--hh-gray-100);
  border-radius: 0;
  padding: 5px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.hh-sgf-chip:hover {
  border-color: var(--hh-black);
}

.hh-sgf-chip span {
  font-size: 0.95rem;
  line-height: 1;
}

.hh-sgf-chip.is-clear {
  background: var(--hh-black);
  color: var(--hh-yellow);
  border-color: var(--hh-black);
  text-transform: uppercase;
}

.hh-sgf-empty {
  padding: 3rem 0;
  text-align: center;
}

.hh-sgf-loadmore-wrap {
  text-align: center;
  margin-top: 2rem;
}

#hh-sgf-loadmore {
  border: 2px solid var(--hh-black);
  background: var(--hh-white);
  border-radius: 0;
  padding: 12px 34px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#hh-sgf-loadmore:hover {
  background: var(--hh-yellow);
  border-color: var(--hh-yellow);
}

@media (max-width: 900px) {
  .hh-sgf { grid-template-columns: 1fr; }

  .hh-sgf-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 2px solid var(--hh-black);
    background: var(--hh-white);
    border-radius: 0;
    padding: 10px 20px;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    cursor: pointer;
  }

  .hh-sgf-side {
    display: none;
    position: static;
    max-height: none;
  }

  .hh-sgf.filters-open .hh-sgf-side { display: block; }
}

/* sale event notice on product pages */
.hh-sale-notice {
  display: inline-block;
  background: var(--hh-yellow);
  color: var(--hh-black);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  margin: 0 0 0.75rem;
}

/* ============================================
   GOOGLE REVIEWS (product pages)
   ============================================ */
.hhgr {
  background: var(--hh-gray-100);
  border-top: 3px solid var(--hh-black);
  padding: 4rem 1.5rem;
  margin-top: 3rem;
}

.hhgr-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.hhgr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.hhgr-score {
  flex: 0 0 auto;
  min-width: 200px;
  padding: 1.5rem 2rem;
  background: var(--hh-black);
  border-bottom: 4px solid var(--hh-yellow);
  text-align: center;
  color: var(--hh-white);
}

.hhgr-score-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hh-yellow);
}

.hhgr-score .hhgr-stars { margin: 0.5rem 0 0.6rem; }

.hhgr-score-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--hh-gray-300);
}

.hhgr-intro { flex: 1 1 340px; }

.hhgr-intro h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  margin: 0.35rem 0 0.75rem;
}

.hhgr-intro p {
  max-width: 58ch;
  margin: 0;
  color: var(--hh-gray-700);
  line-height: 1.6;
}

/* Cards ------------------------------------------------ */
.hhgr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.25rem;
}

.hhgr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.hhgr-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hhgr-card:hover {
  border-color: var(--hh-black);
  box-shadow: 6px 6px 0 var(--hh-yellow);
  transform: translateY(-2px);
}

.hhgr-card.is-hidden { display: none; }

.hhgr-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hhgr-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--hh-gray-200);
}

.hhgr-avatar--text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hh-black);
  background: var(--hh-yellow);
}

.hhgr-who {
  flex: 1 1 auto;
  min-width: 0;
}

.hhgr-author {
  font-weight: 600;
  color: var(--hh-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hhgr-author a:hover { color: var(--hh-yellow-dark); text-decoration: underline; }

.hhgr-where {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hh-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hhgr-card-head .hhgr-g { flex: 0 0 auto; }

.hhgr-text {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hh-gray-900);
  overflow-wrap: anywhere;
}

.hhgr-text p {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Stars ------------------------------------------------ */
.hhgr-stars {
  display: inline-flex;
  color: var(--hh-yellow-dark);
}

.hhgr-score .hhgr-stars { color: var(--hh-yellow); }

/* Footer ----------------------------------------------- */
.hhgr-more {
  display: block;
  margin: 2rem auto 0;
  padding: 0.85rem 2.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hh-black);
  background: none;
  border: 2px solid var(--hh-black);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hhgr-more:hover {
  color: var(--hh-black);
  background: var(--hh-yellow);
  border-color: var(--hh-yellow);
}

/* Yellow is invisible on this section's background — focus rings stay black. */
.hhgr-more:focus-visible,
.hhgr-badge:focus-visible,
.hhgr:focus-visible {
  outline: 3px solid var(--hh-black);
  outline-offset: 2px;
}

.hhgr-card:focus-within {
  border-color: var(--hh-black);
  box-shadow: 6px 6px 0 var(--hh-yellow);
}

.hhgr-note {
  margin: 2rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--hh-gray-700);
  text-align: center;
}

/* Buy-box badge ---------------------------------------- */
.hhgr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  color: var(--hh-gray-700);
  background: var(--hh-gray-100);
  border-left: 3px solid var(--hh-yellow);
}

.hhgr-badge:hover { background: var(--hh-gray-200); }

.hhgr-badge strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--hh-black);
}

.hhgr-badge span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 641px) and (max-width: 1023px) {
  .hhgr-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hhgr { padding: 2.5rem 1rem; }
  .hhgr-head { gap: 1.5rem; }
  .hhgr-score { width: 100%; }
  .hhgr-badge { min-height: 44px; }
}

/* ============================================
   LEGACY SHORTCODE STAND-INS
   (Shortcodes Ultimate / Divi ePanel replacements)
   ============================================ */
.hh-note {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--hh-gray-100);
  border-left: 4px solid var(--hh-yellow);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hh-gray-900);
}

.hh-note > p:last-child { margin-bottom: 0; }

.hh-legacy-btn { margin: 0.5rem 0; }

.hh-disclosure {
  margin: 1.25rem 0;
  border: 1px solid var(--hh-gray-200);
  background: var(--hh-white);
}

.hh-disclosure > summary {
  padding: 0.9rem 1.15rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hh-black);
  background: var(--hh-gray-100);
  cursor: pointer;
  list-style: none;
}

.hh-disclosure > summary::-webkit-details-marker { display: none; }

.hh-disclosure > summary::after {
  content: '+';
  float: right;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--hh-yellow-dark);
}

.hh-disclosure[open] > summary::after { content: '\2212'; }

.hh-disclosure > summary:hover { background: var(--hh-gray-200); }

.hh-disclosure > summary:focus-visible {
  outline: 3px solid var(--hh-black);
  outline-offset: -3px;
}

.hh-disclosure-body { padding: 1.15rem; }

/* Footer tech-support line — fixed national number, so it is deliberately
   NOT tagged data-hh-phone and never swaps to the nearest store. */
.footer-support { margin-top: 0.5rem; }

.footer-support span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hh-yellow);
  margin-bottom: 0.1rem;
}

/* Carried over from the catalogue by contact-form.js; hidden until it finds a
   vehicle, so a shopper who never picked one never sees an empty row. */
.hh-form-vehicle-value {
    margin: 0 0 .25rem;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
}

/* Footer policy links.
   Above the copyright line rather than inside a content column: these are
   looked for in a specific place, both by customers hunting a returns policy
   and by Merchant Center review. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  padding: 1.25rem 0 0;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.85rem;
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--hh-yellow); }

/* The copyright line sits under the links, so it loses the rule it used to
   draw for itself and would otherwise double up. */
.footer-legal + .footer-bottom { border-top: 0; margin-top: 0.75rem; }

/* Request a Quote, on the product page.
   It inherits .btn--outline, which is white text on a transparent background
   with a white border -- built for the dark hero bands. On the white product
   summary that is an invisible button: present, clickable, and impossible to
   see. royal.css already carries the same note for its card buttons.
   Dark outline rather than yellow, because the sticky bar's "Get a Quote" is
   the primary call and two yellow buttons would compete. */
.fleet-price-btn.btn.btn--outline {
  color: var(--hh-black);
  border-color: var(--hh-black);
  background: transparent;
}

.fleet-price-btn.btn.btn--outline:hover,
.fleet-price-btn.btn.btn--outline:focus-visible {
  background: var(--hh-black);
  color: var(--hh-white);
}

/* Policy links under the checkout terms. Quiet -- they are a reassurance and a
   compliance requirement, not a call to action competing with Place Order. */
.hh-checkout-policies {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.hh-checkout-policies a { color: inherit; opacity: 0.75; }
.hh-checkout-policies a:hover,
.hh-checkout-policies a:focus-visible { opacity: 1; }

/* ============================================
   MEDIA PAGEHEAD
   A photograph behind the page title instead of the flat black band.

   Kept as a modifier on .hh2-pagehead rather than a new hero component: the
   copy inside is unchanged, so a page opts in by adding the class and two
   elements. The pools page has its own earlier version of this scoped to
   --pools; this is the general one, sized as a band rather than a full
   viewport splash so the page's first real section still lands in one scroll.
   ============================================ */
.hh2-pagehead--media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Sized off the viewport WIDTH, not its height. object-fit crops a
     landscape photo vertically once the band is wider than it is tall, so
     tying the band to vh makes the crop swing with the window: the same
     object-position that clears the rooftops on a tall monitor cuts them off
     on a laptop. Width keeps the band's aspect ratio near-constant and the
     crop with it. */
  min-height: clamp(26rem, 38vw, 34rem);
  overflow: hidden;
  padding-top: clamp(3rem, 7vw, 5rem);
}

.hh2-pagehead-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Weighted low: on a wide viewport the crop is vertical only, so this is
     what decides whether the top of the building survives it. Pages whose
     photo is composed differently override it. */
  object-position: 50% 70%;
}

/* Two ramps doing two jobs. The vertical one carries the copy at the bottom
   and keeps the eyebrow off a bright patch of sky at the top; the horizontal
   one darkens the side the text is set on. Both leave the upper right clear,
   which is where the photograph is asked to put its subject. */
.hh2-pagehead-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(13, 13, 13, 0.5) 0%,
      rgba(13, 13, 13, 0.1) 20%,
      rgba(13, 13, 13, 0) 34%,
      rgba(13, 13, 13, 0.5) 68%,
      rgba(13, 13, 13, 0.88) 100%),
    linear-gradient(90deg,
      rgba(13, 13, 13, 0.72) 0%,
      rgba(13, 13, 13, 0.45) 28%,
      rgba(13, 13, 13, 0.12) 48%,
      rgba(13, 13, 13, 0) 62%);
}

.hh2-pagehead--media .container {
  position: relative;
  z-index: 2;
}

.hh2-pagehead--media h1 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.hh2-pagehead--media .hh2-pagehead-sub {
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* The chips are transparent by default, which reads fine on flat black and
   badly over grass. */
.hh2-pagehead--media .hh2-trailer-stats span {
  background: rgba(13, 13, 13, 0.45);
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
}

.hh2-pagehead--media .hh2-trailer-stats span small {
  color: var(--hh-gray-300);
}

.hh2-pagehead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Phones stack instead of overlaying. A band tall enough to seat the headline
   has to crop a 3:2 photo hard sideways at 390px, and there is no crop that
   keeps a building at each end of the frame; showing the photo whole above the
   copy keeps both. */
@media (max-width: 760px) {
  .hh2-pagehead--media {
    display: block;
    min-height: 0;
    padding-top: 0;
  }

  .hh2-pagehead-bg {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: clamp(1.25rem, 5vw, 1.75rem);
  }

  .hh2-pagehead-scrim { display: none; }

  .hh2-pagehead--media h1,
  .hh2-pagehead--media .hh2-pagehead-sub { text-shadow: none; }

  .hh2-pagehead--media .hh2-trailer-stats span {
    background: transparent;
    backdrop-filter: none;
  }
}