/* Page-template styling that used to sit in hhsales.css: the front page,
   the finance and stores bands, pools, grills, sheds, carports, hot tubs,
   trailers, hunting blinds, sporting goods, the outdoor product page and the
   media pagehead. Loaded by hh_fleet_wants_pages_css() right after
   hhsales.css, which is where these rules always were in the cascade. The
   catalog, bridge product, cart and checkout pages do not load it. */

/* 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;
}

/* Two per row on a phone, and each item breaks where we choose rather than
   wherever the column happens to run out: "22 STORES ·" over "AL GA MS FL",
   not "22 STORES · AL GA" over "MS FL". */
@media (max-width: 900px) {
  .hh2-trust-inner { grid-template-columns: repeat(2, 1fr); row-gap: 0.9rem; }
  .hh2-trust-br { display: block; }
}

/* 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 .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;
}

/* The 18ch cap that used to sit here forced a wrap even on a desktop wide
   enough for the whole line, and the break landed mid-sentence. The sentences
   below carry their own nowrap, so the headline only ever breaks between them. */
.hh2-stores h2 {
  color: var(--hh-white);
  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;
}

/* 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;
}

/* Sold out: driven by live CounterPoint stock, so a pool that comes back in
   the spring drops the banner on its own. The card stays legible and on-brand
   rather than dimming into something that reads as broken. */
.hh2-pool-card.is-sold-out {
  border-color: var(--hh-gray-300, #d4d4d4);
}

.hh2-pool-card.is-sold-out:hover {
  transform: none;
  border-color: var(--hh-gray-300, #d4d4d4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.hh2-pool-card.is-sold-out .hh2-pool-card__media img {
  filter: grayscale(0.85) contrast(0.95);
  opacity: 0.55;
}

.hh2-pool-card.is-sold-out:hover .hh2-pool-card__media img {
  transform: none;
}

.hh2-pool-card__soldout {
  position: absolute;
  top: 50%;
  left: -12%;
  width: 124%;
  transform: translateY(-50%) rotate(-11deg);
  background: var(--hh-black);
  color: var(--hh-yellow);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.hh2-pool-card.is-sold-out .hh2-pool-card__price {
  opacity: 0.5;
  text-decoration: line-through;
}

/* flex:0 so it does not compete with the description paragraph above it,
   which carries flex:1 to push the button to the foot of the card. */
.hh2-pool-card__restock {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: var(--hh-gray-700);
  margin-bottom: 1rem;
}

.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-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;
}

/* The split hero sits under the promo band (HH_Home_Hero), which closes with
   its own 3px yellow rule. */
.hh2-hero--secondary { padding-top: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); }

/* 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);
}

@media (max-width: 900px) {
  .hh2-build-grid.is-three { grid-template-columns: 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;
}

/* 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;
  }
}