/*
Theme Name: H&H Sales
Theme URI: https://hhsales.com
Author: Brandon Stone
Author URI: https://hhsales.com
Description: Custom theme for H&H Truck & Outdoor - the merged hhsales.com retail site. Outdoor living and truck accessories in one bold black-and-yellow industrial design.
Version: 2.14.3
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: hh-fleet
*/

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  /* Brand Colors */
  --hh-black: #1A1A1A;
  --hh-black-deep: #0D0D0D;
  --hh-black-soft: #2D2D2D;
  --hh-yellow: #FEDD00;
  --hh-yellow-hover: #E5C700;
  --hh-yellow-dark: #C4A900;
  --hh-yellow-glow: rgba(254, 221, 0, 0.15);
  --hh-white: #FFFFFF;
  --hh-gray-100: #F7F7F7;
  --hh-gray-200: #E8E8E8;
  --hh-gray-300: #D1D1D1;
  --hh-gray-500: #888888;
  --hh-gray-700: #555555;
  --hh-gray-900: #333333;

  /* Typography */
  --font-display: 'Oswald', 'Impact', sans-serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --section-pad: clamp(4rem, 8vw, 8rem);
  --container-max: 1340px;
  --gap: clamp(1rem, 2vw, 2rem);

  /* Effects */
  --shadow-brutal: 8px 8px 0 var(--hh-yellow);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.15);
  --border-accent: 3px solid var(--hh-yellow);
  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.15s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%; /* no Android/iOS font boosting */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--hh-gray-900);
  background: var(--hh-white);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }
ul, ol { list-style: none; }

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--hh-black);
}

h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }

p { margin-bottom: 1em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hh-yellow);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--hh-yellow);
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 3rem);
}

.section { padding: var(--section-pad) 0; }
.section--dark { background: var(--hh-black); color: var(--hh-white); }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--hh-white); }
.section--gray { background: var(--hh-gray-100); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: var(--hh-yellow);
  color: var(--hh-black);
}
.btn--primary:hover {
  background: var(--hh-yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(254, 221, 0, 0.4);
}

.btn--outline {
  background: transparent;
  color: var(--hh-white);
  border: 2px solid var(--hh-white);
}
.btn--outline:hover {
  background: var(--hh-white);
  color: var(--hh-black);
}
.btn--sm {
  font-size: 0.78rem;
  padding: calc(.45em + 2px) calc(1em + 2px);
}


.btn--dark {
  background: var(--hh-black);
  color: var(--hh-white);
}
.btn--dark:hover {
  background: var(--hh-black-soft);
  transform: translateY(-2px);
}

.btn svg,
.btn .arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--transition);
}
.btn:hover svg,
.btn:hover .arrow { transform: translateX(4px); }

/*
 * Bootstrap guard.
 *
 * The wood-shed and carport designer landings pull Bootstrap from a CDN,
 * whose own `.btn` rule lands later in the cascade at the same specificity
 * and strips these buttons to transparent ghost text (the header "Get a
 * Quote" most visibly). Doubling the class outranks Bootstrap no matter the
 * load order, so the brand skin survives on those pages.
 */
.btn.btn--primary,
.btn.btn--outline,
.btn.btn--dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 0;
  transition: all var(--transition);
}
.btn.btn--primary {
  background: var(--hh-yellow);
  color: var(--hh-black);
}
.btn.btn--primary:hover {
  background: var(--hh-yellow-hover);
  color: var(--hh-black);
}
.btn.btn--outline {
  background: transparent;
  color: var(--hh-white);
  border: 2px solid var(--hh-white);
}
.btn.btn--outline:hover {
  background: var(--hh-white);
  color: var(--hh-black);
}
.btn.btn--dark {
  background: var(--hh-black);
  color: var(--hh-white);
}
.btn.btn--dark:hover {
  background: var(--hh-black-soft);
  color: var(--hh-white);
}
.btn.btn--sm {
  font-size: 0.78rem;
  padding: calc(.45em + 2px) calc(1em + 2px);
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */

/* Logged-in offset: WP pushes the document down for the admin bar via
   html { margin-top } but fixed elements don't inherit that, which left a
   white strip between the header and each page's first section. Every
   top-anchored fixed element adds --hh-abar so logged-in matches logged-out. */
:root { --hh-abar: 0px; }
body.admin-bar { --hh-abar: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 782px) {
  body.admin-bar { --hh-abar: var(--wp-admin--admin-bar--height, 46px); }
}

.site-header {
  position: fixed;
  top: var(--hh-abar, 0px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--hh-black-deep);
  border-bottom: 3px solid var(--hh-yellow);

  /* Only these two ever change. `all` also transitioned z-index, which is an
     animatable integer -- opening the mobile drawer ramped the header from
     1000 to its raised value over 0.3s, and for most of that ramp it sat
     below the nearest-store bar (9999) and the catalog sidebar (10000).
     Measured 3787 sixty milliseconds into the open. */
  transition: background var(--transition), top var(--transition);
}

/*
 * No backdrop-filter here, and nothing else that establishes a containing
 * block for fixed descendants (filter, transform, perspective, contain:
 * paint, will-change on any of those).
 *
 * The mobile drawer is nav.nav-main *inside* this header and is
 * position: fixed with top/bottom: 0. A non-none backdrop-filter makes the
 * header the containing block for it, so the drawer resolved against the
 * header's 80px box instead of the viewport: it collapsed to an 80px strip
 * and the scrim shrank with it, which read as "the menu is behind the page
 * content". It only happened below the fold because .scrolled is what added
 * the filter.
 *
 * The blur was invisible anyway -- 0.97 alpha over the same colour leaves 3%
 * transmission. Measured max per-channel difference with and without: 1/255.
 */
.site-header.scrolled {
  background: rgba(13, 13, 13, 0.97);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  height: 80px;
  width: 100%;
  padding: 0 clamp(1.25rem, 3vw, 3rem);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hh-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-logo .logo-icon {
  width: 48px;
  height: 48px;
  background: var(--hh-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--hh-black);
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

.site-logo span { color: var(--hh-yellow); }

/* Both dimensions stay auto so the image can only scale proportionally:
   max-height sets the resting size, and when the header row runs out of room
   the logo (the one flexible item) shrinks with its aspect ratio intact.
   A fixed height here + the global img max-width used to smoosh it. */
.site-logo-img,
.woocommerce-page .site-logo-img {
  width: auto !important;
  height: auto !important;
  max-height: 48px;
  max-width: 100%;
  display: block;
}

.site-logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--hh-white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.footer-brand .site-logo-img {
  max-height: 40px;
}

.footer-brand .site-logo-text {
  font-size: 1.2rem;
}

@media (max-width: 600px) {
  .site-logo-img { max-height: 40px; }
}
@media (max-width: 480px) {
  .site-logo-text { font-size: 1rem; }
  .site-logo-img { max-height: 36px; }
  .header-cta .btn {
    font-size: 0.68rem;
    padding: 0.45em 0.75em;
  }
}

.nav-main { display: flex; align-items: center; gap: 0; }
.nav-main a {
  display: flex;
  align-items: center;
  padding: 0.5rem clamp(0.5rem, 1vw, 1.25rem);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  transition: all var(--transition-fast);
  position: relative;
}
.nav-main a:hover,
.nav-main a.active {
  color: var(--hh-white);
}
.nav-main a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 2px;
  background: var(--hh-yellow);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-main a:hover::after,
.nav-main a.active::after { transform: scaleX(1); }

.header-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  flex-shrink: 0;
}
.header-cta .btn { white-space: nowrap; }

/* Below this the row can't hold the quote button and a legible logo at once;
   every page body carries its own quote CTAs, so the button is the one to go. */
@media (max-width: 384px) {
  .header-cta { display: none; }
}

.header-phone {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--hh-white);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.nav-vehicle {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--hh-white, #fff);
  transition: color 0.2s;
}
.nav-vehicle:hover { color: var(--hh-yellow, #FFD700); }
.nav-vehicle.has-vehicle { color: var(--hh-yellow, #FFD700); }
.nav-vehicle svg { vertical-align: middle; }

/* An unlabelled truck glyph is the entrance to the whole fitment experience
   and nobody presses it. Name it, and show the saved vehicle once there is one. */
.nav-vehicle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 3px;
}
.nav-vehicle-label {
  font-family: var(--hh-font-heading, inherit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-vehicle.has-vehicle { background: rgba(255, 215, 0, 0.12); }
/* The dot only ever meant "a vehicle is saved" — the label says that now. */
.nav-vehicle.has-vehicle .nav-vehicle-dot { display: none !important; }
/* On the narrow end of the inline-nav range the label steals the room the
   logo needs; the chip goes icon-only until the row has real slack. */
@media (max-width: 1500px) {
  .nav-vehicle-label { display: none; }
}
.nav-vehicle-dot {
  position: absolute;
  top: 2px;
  right: 0;
  width: 8px;
  height: 8px;
  background: var(--hh-yellow, #FFD700);
  border-radius: 50%;
  border: 2px solid var(--hh-black, #1a1a1a);
}

.nav-cart {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--hh-white);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.nav-cart:hover { color: var(--hh-yellow); }

.nav-cart svg {
  vertical-align: middle;
}

.nav-cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--hh-yellow);
  color: var(--hh-black);
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--font-display);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.nav-cart-count.is-empty { display: none; }

@keyframes hh-badge-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5); }
  60%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}
.nav-cart-count.pop {
  animation: hh-badge-pop 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.header-phone strong { color: var(--hh-yellow); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-shrink: 0;
}
/* The drawer takes over from the inline menu at 1300 (hhsales.css) — the
   hamburger has to appear on the same boundary or 769–1300 has no nav at all. */
@media (max-width: 1300px) {
  .nav-toggle { display: block; }
}
.nav-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--hh-white);
  margin: 6px 0;
  transition: all var(--transition-fast);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--hh-black-deep);
  overflow: hidden;
  padding-top: 80px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(254, 221, 0, 0.06) 0%, transparent 70%),
    linear-gradient(135deg, var(--hh-black-deep) 0%, var(--hh-black) 100%);
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: -10%;
  width: 60%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(254,221,0,0.04)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  transform: skewX(-12deg);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.hero h1 {
  color: var(--hh-white);
  margin-bottom: 1.5rem;
  line-height: 1.05;
}

.hero h1 .highlight {
  color: var(--hh-yellow);
  display: inline;
  position: relative;
}

.hero-subtitle {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 2.5rem;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.hero-stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--hh-yellow);
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.35rem;
}

/* Decorative truck silhouette */
.hero-visual {
  position: absolute;
  right: -5%;
  bottom: 0;
  width: 55%;
  height: 90%;
  z-index: 1;
  opacity: 0.08;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
}

/* ============================================
   SERVICES STRIP
   ============================================ */
.services-strip {
  background: var(--hh-yellow);
  padding: 0;
  position: relative;
  z-index: 10;
}

.services-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.service-strip-item {
  padding: 2rem 1.5rem;
  text-align: center;
  border-right: 1px solid rgba(26, 26, 26, 0.1);
  transition: all var(--transition);
  cursor: default;
}
.service-strip-item:last-child { border-right: none; }
.service-strip-item:hover {
  background: var(--hh-yellow-hover);
}

.service-strip-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.service-strip-item h4 {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--hh-black);
  margin-bottom: 0.25rem;
}

.service-strip-item p {
  font-size: 0.8rem;
  color: rgba(26, 26, 26, 0.7);
  margin: 0;
}

/* ============================================
   ABOUT / INTRO SECTION
   ============================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-image-wrapper {
  position: relative;
}

.about-image {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--hh-gray-200);
  border: none;
  position: relative;
  overflow: hidden;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.about-image:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.about-image::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 100%;
  height: 100%;
  border: var(--border-accent);
  z-index: -1;
}

.about-content h2 { margin-bottom: 1.5rem; }
.about-content p { color: var(--hh-gray-700); }

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.about-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.about-feature::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--hh-yellow);
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ============================================
   UPFIT CATEGORIES
   ============================================ */
/* -- Section dark variant (used by categories) -- */
.section--dark {
  background: var(--hh-black-deep);
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* -- Card link (used by series cards) -- */
.card-link {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hh-black);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-fast);
}
.card-link:hover { color: var(--hh-yellow-dark); gap: 0.75rem; }

/* ============================================
   FEATURED SERIES GRID
   ============================================ */
.series-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.series-card {
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  overflow: hidden;
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

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

.series-card-image {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--hh-gray-100);
  overflow: hidden;
  position: relative;
}

.series-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform var(--transition);
}

.series-card:hover .series-card-image img {
  transform: scale(1.05);
}

.series-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hh-gray-100);
}

.series-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.series-card-brand {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hh-gray-500);
  margin-bottom: 0.25rem;
}

.series-card-body h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.series-card-type {
  font-size: 0.8rem;
  color: var(--hh-gray-700);
  margin-bottom: auto;
  padding-bottom: 0.75rem;
}

.series-card-body .card-link {
  margin-top: auto;
}

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
  background: var(--hh-black);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--hh-yellow-glow) 0%, transparent 70%);
  pointer-events: none;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: var(--section-pad) 0;
  position: relative;
  z-index: 1;
}

.cta-inner h2 { color: var(--hh-white); max-width: 600px; }
.cta-inner h2 .highlight { color: var(--hh-yellow); }

/* ============================================
   LOCATIONS
   ============================================ */
.locations-state-group {
  margin-bottom: 2.5rem;
}

.locations-state-group:last-of-type {
  margin-bottom: 0;
}

.locations-state-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.locations-state-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hh-yellow);
  white-space: nowrap;
}

.locations-state-count {
  font-size: 0.8rem;
  color: var(--hh-gray-500);
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.locations-state-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hh-gray-700) 0%, transparent 100%);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.location-card {
  background: var(--hh-black-soft);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 1.25rem 1.25rem 1.15rem;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.location-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--hh-yellow);
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.location-card:hover::before { width: 100%; }

.location-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(254, 221, 0, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.location-card--hq {
  border-color: rgba(254, 221, 0, 0.25);
  background: linear-gradient(135deg, var(--hh-black-soft) 0%, rgba(254, 221, 0, 0.06) 100%);
}

.location-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hh-black);
  background: var(--hh-yellow);
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  font-weight: 700;
  line-height: 1.4;
}

.location-card__icon {
  color: var(--hh-yellow);
  margin-bottom: 0.6rem;
  opacity: 0.7;
  transition: opacity var(--transition);
}

.location-card:hover .location-card__icon {
  opacity: 1;
}

.location-card h4 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  color: var(--hh-white);
  line-height: 1.3;
}

.location-card__city {
  font-size: 0.82rem;
  color: var(--hh-gray-500);
  margin-bottom: 0.6rem;
}

.location-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hh-gray-300);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.location-card__phone svg {
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.location-card:hover .location-card__phone {
  color: var(--hh-yellow);
}

.location-card:hover .location-card__phone svg {
  opacity: 1;
}

.location-card__hours {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.45rem;
  color: var(--hh-gray-500);
  line-height: 1.3;
}

.location-card__hours.is-open {
  color: #4ade80;
}

.location-card__hours.is-closed {
  color: var(--hh-gray-600);
}

.location-card__directions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hh-yellow);
  text-decoration: none;
  margin-top: 0.65rem;
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}

.location-card__directions:hover {
  opacity: 1;
  text-decoration: none;
}

.location-card__directions svg {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .location-card {
    padding: 1rem;
  }

  .location-card h4 {
    font-size: 0.9rem;
  }
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-page {
  padding-top: 50px;
}

.about-hero {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 1rem clamp(2.5rem, 5vw, 4rem);
}

.about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--hh-white);
  margin: 0 0 1rem;
}

.about-hero .highlight {
  color: var(--hh-yellow);
}

.about-hero-sub {
  color: var(--hh-gray-300);
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 auto;
}

/* Story grid */
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

.about-story-content h2 { margin-bottom: 1.5rem; }
.about-story-content p { color: var(--hh-gray-700); margin-bottom: 1rem; }

.about-story-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.about-stat {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--hh-gray-100);
  border-left: 3px solid var(--hh-yellow);
}

.about-stat__number {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hh-black);
  margin-bottom: 0.25rem;
}

.about-stat__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hh-gray-500);
}

/* Timeline */
.about-timeline {
  position: relative;
  padding-left: 2rem;
  max-width: 700px;
  margin: 0 auto;
}

.about-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--hh-yellow) 0%, var(--hh-gray-700) 100%);
}

.about-timeline__item {
  position: relative;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
}

.about-timeline__item:last-child { padding-bottom: 0; }

.about-timeline__item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  background: var(--hh-yellow);
  border: 2px solid var(--hh-black);
  border-radius: 50%;
  z-index: 1;
}

.about-timeline__year {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hh-yellow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-timeline__content h4 {
  color: var(--hh-white);
  margin: 0.25rem 0 0.35rem;
  font-size: 1.05rem;
}

.about-timeline__content p {
  color: var(--hh-gray-300);
  font-size: 0.92rem;
  margin: 0;
}

/* Services grid */
.about-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
}

.about-service-card {
  padding: 2rem;
  border: 1px solid var(--hh-gray-200);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.about-service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--hh-yellow);
  transition: width 0.4s ease;
}

.about-service-card:hover::after { width: 100%; }

.about-service-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.about-service-card__icon {
  color: var(--hh-yellow);
  margin-bottom: 1rem;
}

.about-service-card h4 {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.about-service-card p {
  color: var(--hh-gray-700);
  font-size: 0.9rem;
  margin: 0;
}

@media (min-width: 768px) {
  .about-story-grid {
    grid-template-columns: 1.4fr 1fr;
  }
}

/* ============================================
   BRANDS STRIP
   ============================================ */
.brands-strip {
  border-top: 1px solid var(--hh-gray-200);
  border-bottom: 1px solid var(--hh-gray-200);
  padding: 3rem 0;
  overflow: hidden;
}

.brands-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  animation: scroll-brands 30s linear infinite;
}

.brand-item {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hh-gray-300);
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes scroll-brands {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--hh-black-deep);
  color: rgba(255,255,255,0.6);
  padding: 4rem 0 0;
}

.footer-grid {
  display: grid;
  /* Five children: brand blurb plus four link columns. Four tracks orphaned
     Contact onto a second row with three empty cells beside it. */
  grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand .site-logo { margin-bottom: 1rem; }
.footer-brand p { font-size: 0.9rem; max-width: 320px; }

.footer-col h4 {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--hh-yellow);
  margin-bottom: 1.25rem;
}

.footer-col a {
  display: block;
  font-size: 0.9rem;
  padding: 0.3rem 0;
  color: rgba(255,255,255,0.5);
  transition: color var(--transition-fast);
}
.footer-col a:hover { color: var(--hh-white); }
.footer-col a:focus-visible {
  color: var(--hh-white);
  outline: 2px solid var(--hh-yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-bottom {
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

/* ============================================
   WOOCOMMERCE OVERRIDES
   ============================================ */
.woocommerce ul.products li.product {
  border: 1px solid var(--hh-gray-200);
  transition: all var(--transition);
  padding-bottom: 1rem;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--hh-yellow);
  box-shadow: var(--shadow-card);
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--hh-black);
}

.woocommerce ul.products li.product .button,
.woocommerce .button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button {
  background: var(--hh-yellow) !important;
  color: var(--hh-black) !important;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border: none;
  border-radius: 0;
  transition: all var(--transition);
}
.woocommerce .button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
  background: var(--hh-yellow-hover) !important;
}

/* ============================================
   WOOCOMMERCE BLOCK CART & CHECKOUT
   ============================================ */

/* --- Page titles (block cart/checkout render their own h2) --- */
.wc-block-cart h2,
.wc-block-checkout h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Primary action buttons --- */
.wc-block-cart__submit-button,
.wc-block-checkout__actions .wc-block-components-button,
.wc-block-components-checkout-place-order-button {
  background: var(--hh-yellow) !important;
  color: var(--hh-black) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 1rem !important;
  padding: 14px 32px !important;
  border: none !important;
  border-radius: 0 !important;
  transition: all var(--transition) !important;
  box-shadow: 4px 4px 0 var(--hh-black) !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-checkout__actions .wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--hh-yellow-hover) !important;
  box-shadow: 2px 2px 0 var(--hh-black) !important;
  transform: translate(2px, 2px);
}

/* --- Cart totals sidebar --- */
.wc-block-cart__sidebar .wc-block-cart__totals-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  border-bottom: 3px solid var(--hh-yellow);
  padding-bottom: 10px;
}

/* --- Checkout section headings --- */
.wc-block-checkout .wc-block-components-title,
.wc-block-checkout h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
}

/* --- Form inputs --- */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-checkout select,
.wc-block-checkout textarea,
.wc-block-cart input[type="number"] {
  border: 2px solid var(--hh-gray-200) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  font-size: 0.95rem !important;
  transition: border-color var(--transition-fast) !important;
}

.wc-block-checkout input:focus,
.wc-block-checkout select:focus,
.wc-block-checkout textarea:focus {
  border-color: var(--hh-yellow) !important;
  box-shadow: 0 0 0 1px var(--hh-yellow) !important;
  outline: none !important;
}

/* --- Order summary sidebar --- */
.wc-block-checkout__sidebar {
  background: var(--hh-gray-100);
  padding: 24px;
  border-left: 3px solid var(--hh-yellow);
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item__description {
  font-size: 0.85rem;
}

/* --- Total row emphasis --- */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
}

/* --- Cart items table --- */
.wc-block-cart-items__header {
  border-bottom: 3px solid var(--hh-yellow);
}

.wc-block-cart-items__header th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--hh-gray-500);
}

.wc-block-cart-items__row {
  border-bottom: 1px solid var(--hh-gray-200);
  padding: 20px 0;
}

/* --- Cart quantity stepper --- */
.wc-block-components-quantity-selector {
  border: 2px solid var(--hh-black) !important;
  border-radius: 0 !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  font-weight: 700 !important;
  color: var(--hh-black) !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
  background: var(--hh-yellow) !important;
}

/* --- Remove link --- */
.wc-block-cart-item__remove-link {
  color: var(--hh-gray-500) !important;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em;
}

.wc-block-cart-item__remove-link:hover {
  color: #dc2626 !important;
}

/* --- Product prices in cart/checkout --- */
.wc-block-components-formatted-money-amount {
  font-family: var(--font-display);
  font-weight: 700;
}

/* --- Coupon panel --- */
.wc-block-components-panel__button {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
}

/* --- Return to cart link --- */
.wc-block-checkout__actions_row a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--hh-black);
}

.wc-block-checkout__actions_row a:hover {
  color: var(--hh-yellow-hover);
}

/* --- Payment method box --- */
.wc-block-checkout__payment-method {
  border: 2px solid var(--hh-gray-200);
  border-radius: 0;
  padding: 20px;
}

/* --- Terms/legal text --- */
.wc-block-checkout__terms {
  font-size: 0.8rem;
  color: var(--hh-gray-500);
}

/* --- Cart/checkout notices --- */
.wc-block-components-notice-banner {
  border-radius: 0 !important;
  border-left: 4px solid var(--hh-yellow) !important;
}

/* ============================================
   WOOCOMMERCE SINGLE PRODUCT
   ============================================ */
.single-product .summary .product_title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.single-product .summary .price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--hh-black);
}

.single-product .summary .single_add_to_cart_button {
  background: var(--hh-yellow) !important;
  color: var(--hh-black) !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  padding: 14px 32px;
  border: none;
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--hh-black);
  transition: all var(--transition);
}

.single-product .summary .single_add_to_cart_button:hover {
  background: var(--hh-yellow-hover) !important;
  box-shadow: 2px 2px 0 var(--hh-black);
  transform: translate(2px, 2px);
}

.single-product .woocommerce-tabs .tabs li.active a {
  color: var(--hh-black);
  border-bottom: 3px solid var(--hh-yellow);
}

.single-product .woocommerce-tabs .tabs li a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}

/* --- Quantity input on product page --- */
.single-product .quantity input[type="number"] {
  border: 2px solid var(--hh-black) !important;
  border-radius: 0 !important;
  font-family: var(--font-display);
  font-size: 1rem;
  width: 60px;
  text-align: center;
  padding: 10px;
}

/* ============================================
   CONTACT FORM MODAL
   ============================================ */
.hh-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.hh-modal-backdrop[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.hh-modal {
  background: var(--hh-white);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hh-modal-backdrop[aria-hidden="false"] .hh-modal {
  transform: translateY(0) scale(1);
}

.hh-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--hh-gray-500);
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  padding: 4px;
}

.hh-modal-close:hover {
  color: var(--hh-black);
}

.hh-modal-header {
  background: var(--hh-black);
  padding: 2rem 2rem 1.5rem;
  border-bottom: 3px solid var(--hh-yellow);
}

.hh-modal-header h2 {
  color: var(--hh-white);
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.hh-modal-header .hh-modal-close {
  color: var(--hh-gray-500);
}

.hh-modal-header .hh-modal-close:hover {
  color: var(--hh-yellow);
}

.hh-modal-header p {
  color: var(--hh-gray-300);
  font-size: 0.9rem;
  margin: 0;
}

.hh-contact-form {
  padding: 1.5rem 2rem 2rem;
}

.hh-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hh-form-field {
  margin-bottom: 1rem;
}

.hh-form-field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hh-gray-700);
  margin-bottom: 6px;
}

.hh-form-field .required {
  color: #dc2626;
}

.hh-form-field input,
.hh-form-field select,
.hh-form-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--hh-gray-200);
  border-radius: 0;
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.hh-form-field input:focus,
.hh-form-field select:focus,
.hh-form-field textarea:focus {
  border-color: var(--hh-yellow);
  outline: none;
  box-shadow: 0 0 0 1px var(--hh-yellow);
}

.hh-form-field textarea {
  resize: vertical;
  min-height: 80px;
}

.hh-form-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 1rem;
  box-shadow: 4px 4px 0 var(--hh-black);
}

.hh-form-submit:hover {
  box-shadow: 2px 2px 0 var(--hh-black);
  transform: translate(2px, 2px);
}

.hh-form-submit-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hh-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: var(--hh-black);
  border-radius: 50%;
  animation: hhSpin 0.6s linear infinite;
}

@keyframes hhSpin {
  to { transform: rotate(360deg); }
}

.hh-form-status {
  margin-bottom: 1rem;
  padding: 0;
  font-size: 0.9rem;
  text-align: center;
}

.hh-form-status--success {
  color: #16a34a;
  background: #dcfce7;
  padding: 12px;
  border-left: 4px solid #16a34a;
}

.hh-form-status--error {
  color: #dc2626;
  background: #fee2e2;
  padding: 12px;
  border-left: 4px solid #dc2626;
}

/* Honeypot — offscreen, not display:none (bots detect that) */
.hh-form-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
  z-index: -1;
}

/* Validation errors */
.hh-form-field.hh-field-error input,
.hh-form-field.hh-field-error select,
.hh-form-field.hh-field-error textarea {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626 !important;
}

.hh-error-msg {
  display: block;
  color: #dc2626;
  font-size: 0.78rem;
  margin-top: 4px;
  font-weight: 500;
}

.hh-form-help {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--hh-gray-700);
}

@media (max-width: 480px) {
  .hh-form-row { grid-template-columns: 1fr; }
  .hh-contact-form { padding: 1.25rem; }
  .hh-modal-header { padding: 1.5rem 1.25rem 1.25rem; }
}

/* ============================================
   REQUEST A QUOTE PAGE
   ============================================ */
.hh-quote-page {
  display: grid;
  gap: 1.5rem;
  max-width: 760px;
}

.hh-quote-items,
.hh-quote-page .hh-contact-form,
.hh-quote-thanks {
  background: #fff;
  border: 2px solid var(--hh-black);
  box-shadow: 6px 6px 0 var(--hh-black);
}

/* The plugin sizes its wrapper to its own table — we want the full column */
.hh-quote-page .hh-quote-items {
  width: 100%;
  max-width: none;
  margin: 0;
}

.hh-quote-items .hhpfb-quote-items-editor {
  padding: 1.5rem 2rem;
}

.hh-quote-page .hh-contact-form {
  padding: 0 2.25rem 2.25rem;
}

.hh-quote-thanks {
  padding: 2rem;
}

.hh-quote-page h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

/* Form header sits flush in the card, on its own yellow band */
.hh-quote-form-head {
  margin: 0 -2.25rem 1.75rem;
  padding: 1.5rem 2.25rem;
  border-bottom: 2px solid var(--hh-black);
  background: linear-gradient(180deg, var(--hh-gray-100) 0%, #fff 100%);
  position: relative;
}

.hh-quote-form-head::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: -2px;
  width: 6px;
  background: var(--hh-yellow);
}

.hh-quote-form-head h2 { margin-bottom: 0.35rem; }

.hh-quote-form-head p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--hh-gray-700);
}

.hh-quote-items .hhpfb-quote-items-editor h2 {
  padding-left: 0.85rem;
  border-left: 6px solid var(--hh-yellow);
}

.hh-quote-page .hhpfb-quote-empty-state p,
.hh-quote-thanks p {
  margin: 0;
  color: var(--hh-gray-700);
  font-size: 0.92rem;
}

.hh-quote-page .hhpfb-quote-items-table {
  width: 100%;
  border-collapse: collapse;
}

.hh-quote-page .hhpfb-quote-items-table th {
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hh-gray-700);
  text-align: left;
  padding: 0 8px 8px 0;
  border-bottom: 2px solid var(--hh-gray-200);
}

.hh-quote-page .hhpfb-quote-items-table td {
  padding: 10px 8px 10px 0;
  border-bottom: 1px solid var(--hh-gray-200);
  font-size: 0.9rem;
  vertical-align: middle;
}

.hh-quote-page .hhpfb-qf-item-qty {
  width: 70px;
  padding: 6px 8px;
  border: 2px solid var(--hh-gray-200);
}

.hh-quote-page .hhpfb-qf-item-remove {
  background: none;
  border: 0;
  padding: 0;
  color: #dc2626;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 600px) {
  .hh-quote-items .hhpfb-quote-items-editor { padding: 1.25rem; }
  .hh-quote-thanks { padding: 1.25rem; }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* ============================================
   SPRAY-ON BEDLINERS PAGE
   ============================================ */

/* --- Hero --- */
/* --- Top Banner --- */
.bedliner-banner {
  width: 100%;
  background: var(--hh-black);
  border-bottom: 4px solid var(--hh-yellow);
}

.bedliner-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Intro --- */
.bedliner-intro h1 {
  margin: 0.5rem 0 1.25rem;
}

.bedliner-intro p {
  max-width: 68ch;
  color: var(--hh-gray-700);
  line-height: 1.7;
}

.bedliner-intro-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* --- Two Spray Options --- */
.bedliner-options .container {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

.bedliner-option {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.bedliner-option--flip .bedliner-option-media {
  order: 2;
}

.bedliner-option-media {
  position: relative;
  border: 2px solid rgba(254, 221, 0, 0.35);
}

.bedliner-option-media img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
}

.bedliner-option-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 0.4rem 0.9rem;
  background: var(--hh-yellow);
  color: var(--hh-black);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bedliner-option-body h2 {
  color: var(--hh-white);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 0.4rem 0 1rem;
}

.bedliner-option-body h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  color: var(--hh-yellow);
  margin: 1.5rem 0 0.5rem;
}

.bedliner-option-body p {
  color: var(--hh-gray-300);
  font-size: 0.95rem;
  line-height: 1.7;
}

.bedliner-keyfeatures {
  list-style: none;
  padding: 0;
}

.bedliner-keyfeatures li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.5rem;
  color: var(--hh-gray-300);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bedliner-keyfeatures li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--hh-yellow);
  font-weight: 700;
}

/* --- Before / After --- */
.bedliner-beforeafter {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  border: 2px solid var(--hh-gray-200);
  background: var(--hh-black);
}

.bedliner-beforeafter img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Protect Band --- */
.bedliner-protect {
  text-align: center;
}

.bedliner-protect h2 {
  max-width: 22ch;
  margin: 0.75rem auto 1.25rem;
}

.bedliner-protect h2 .highlight { color: var(--hh-yellow); }

.bedliner-protect p {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--hh-gray-300);
  line-height: 1.7;
}

.bedliner-protect .bedliner-intro-actions {
  justify-content: center;
  margin-top: 2rem;
}

/* --- Gallery --- */
.bedliner-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.bedliner-gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--hh-gray-200);
  background: var(--hh-black);
}

.bedliner-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bedliner-gallery-item:hover img {
  transform: scale(1.05);
}

.bedliner-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.bedliner-gallery-caption span {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hh-yellow);
}

/* --- Bedliner Responsive --- */
@media (max-width: 900px) {
  .bedliner-option { grid-template-columns: 1fr; }
  .bedliner-option--flip .bedliner-option-media { order: 0; }
  .bedliner-option-media img { min-height: 0; }
}

@media (max-width: 768px) {
  .bedliner-gallery { grid-template-columns: 1fr; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 768px) {
  .nav-main { display: none; }
  .header-phone { display: none; }

  .services-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 1.5rem; flex-wrap: wrap; }
  .hero-actions { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}

@media (max-width: 480px) {
  .services-strip-inner { grid-template-columns: 1fr; }
  .about-features { grid-template-columns: 1fr; }
  .series-grid { grid-template-columns: 1fr; }
}

/* ============================================
   NEAREST STORE BANNER
   ============================================ */
#hh-nearest-store {
  background: var(--hh-black);
  color: var(--hh-white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  position: fixed;
  top: var(--hh-abar, 0px);
  left: 0;
  right: 0;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-bottom: 3px solid var(--hh-yellow);
}

#hh-nearest-store.hh-ns-visible {
  transform: translateY(0);
}

/* The banner always resolves to a store — a real one, or Pelham as the
   fallback — so the space it takes is reserved up front rather than added by
   JS once geolocation returns. Adding it afterwards pushed every page down
   38px after first paint, which was the largest layout shift on the site. */
body.hh-has-store-bar {
  padding-top: var(--hh-ns-height, 38px);
}

body.hh-has-store-bar .site-header {
  top: calc(var(--hh-ns-height, 38px) + var(--hh-abar, 0px));
}

/* Visitor closed it: give the space back. */
body.hh-ns-dismissed {
  padding-top: 0;
}

body.hh-ns-dismissed .site-header {
  top: var(--hh-abar, 0px);
}

/* Header shifts down when banner is active (toggled via JS) */
.site-header.hh-ns-active {
  top: calc(var(--hh-ns-height, 38px) + var(--hh-abar, 0px)) !important;
}

.hh-ns-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px clamp(1rem, 3vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hh-ns-pin {
  color: var(--hh-yellow);
  display: inline-flex;
  align-items: center;
}

.hh-ns-label {
  color: var(--hh-gray-300);
}

.hh-ns-name {
  color: var(--hh-yellow);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}

.hh-ns-miles {
  color: var(--hh-gray-500);
  font-size: 0.8rem;
}

.hh-ns-sep {
  color: var(--hh-gray-700);
  margin: 0 2px;
}

.hh-ns-phone {
  color: var(--hh-white);
  text-decoration: none;
  font-weight: 700;
}

.hh-ns-phone:hover {
  color: var(--hh-yellow);
}

.hh-ns-hours {
  color: var(--hh-gray-500);
  font-size: 0.8rem;
}

.hh-ns-close {
  background: none;
  border: none;
  color: var(--hh-gray-500);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 0 0 12px;
  line-height: 1;
}

.hh-ns-close:hover {
  color: var(--hh-yellow);
}

/* ZIP fallback — shown when geolocation and the IP lookup both fail, and
   reachable any time from "Not your store?". */
.hh-ns-setloc {
  background: none;
  border: none;
  color: var(--hh-gray-500);
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0 0 0 12px;
}

.hh-ns-setloc:hover,
.hh-ns-setloc:focus-visible {
  color: var(--hh-yellow);
}

.hh-ns-zip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
}

.hh-ns-zip[hidden] { display: none; }


.hh-ns-zip-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hh-ns-zip-input {
  width: 5.5em;
  padding: 2px 6px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--hh-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}

.hh-ns-zip-input::placeholder { color: rgba(255, 255, 255, 0.5); }

.hh-ns-zip-input:focus {
  outline: 2px solid var(--hh-yellow);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.hh-ns-zip-go {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  color: var(--hh-black);
  background: var(--hh-yellow);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.hh-ns-zip.is-busy .hh-ns-zip-go {
  opacity: 0.6;
  pointer-events: none;
}

.hh-ns-zip-msg {
  font-size: 0.74rem;
  color: var(--hh-yellow);
}

@media (max-width: 768px) {
  :root { --hh-ns-height: 35px; }
  #hh-nearest-store { font-size: 0.78rem; }
  .hh-ns-hours { display: none; }
  .hh-ns-label { display: none; }
  .site-header.hh-ns-active { top: calc(var(--hh-ns-height, 35px) + var(--hh-abar, 0px)) !important; }
  /* The banner is a single line on mobile; the ZIP form needs the row to
     itself rather than squeezing the store name out. */
  .hh-ns-zip { width: 100%; padding-left: 0; padding-top: 4px; justify-content: center; }
  .hh-ns-setloc { padding-left: 8px; }
  /* Pull the close button out of the flow — as a flex item it was claiming a
     whole third row to itself once the ZIP form opened. */
  #hh-nearest-store { position: fixed; }
  .hh-ns-close {
    position: absolute;
    top: 4px;
    right: 8px;
    padding: 0;
  }
  .hh-ns-inner { padding-right: 24px; }
}

@media (max-width: 480px) {
  .hh-ns-miles { display: none; }
}

/* ============================================
   WOOCOMMERCE SHOP / CATALOG PAGE
   ============================================ */
.wc-shop-main {
  /* The fixed header is 83px tall (80 + border); clear it with room to spare */
  padding-top: 104px;
  background: var(--hh-gray-100);
  min-height: 100vh;
}

/* Full-width: remove container max-width constraint */
.wc-shop-main .hhpfb-catalog {
  max-width: 100%;
  padding: 24px clamp(1.25rem, 3vw, 3rem) 40px;
}

/* Reset theme heading styles inside the catalog */
.wc-shop-main .hhpfb-catalog h2,
.wc-shop-main .hhpfb-catalog h3,
.wc-shop-main .hhpfb-catalog h4 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
}

/* Catalog title — use theme display font for brand consistency */
.wc-shop-main .hhpfb-catalog-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  padding-bottom: 14px;
}

/* Sticky sidebar offset for fixed header */
@media (min-width: 992px) {
  .wc-shop-main .hhpfb-sidebar {
    top: 100px;
  }
}

/* Mobile: collapsible sidebar filters */
@media (max-width: 991px) {
  .wc-shop-main .hhpfb-catalog-layout > .hhpfb-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Keep vehicle search always visible, collapse others */
  .wc-shop-main .hhpfb-sidebar .hhpfb-filter-section:not(.hhpfb-vehicle-search) {
    max-height: 52px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    cursor: pointer;
  }

  .wc-shop-main .hhpfb-sidebar .hhpfb-filter-section:not(.hhpfb-vehicle-search).expanded {
    max-height: 600px;
  }

  .wc-shop-main .hhpfb-sidebar .hhpfb-filter-title {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 12px;
  }

  .wc-shop-main .hhpfb-sidebar .hhpfb-filter-section:not(.hhpfb-vehicle-search) .hhpfb-filter-title::after {
    content: '\25BC';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 10px;
    color: var(--hh-gray-500);
    transition: transform 0.3s;
  }

  .wc-shop-main .hhpfb-sidebar .hhpfb-filter-section:not(.hhpfb-vehicle-search).expanded .hhpfb-filter-title::after {
    transform: rotate(180deg);
  }
}

/* ============================================
   CART DRAWER
   ============================================ */

/* --- Backdrop --- */
.hh-cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  transition: background 0.35s, visibility 0.35s;
}

.hh-cart-backdrop[aria-hidden="false"] {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  visibility: visible;
}

body.hh-cart-open { overflow: hidden; }

/* --- Panel --- */
.hh-cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--hh-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
}

.hh-cart-backdrop[aria-hidden="false"] .hh-cart-panel {
  transform: translateX(0);
}

/* --- Header --- */
.hh-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem;
  background: var(--hh-black);
  border-bottom: 3px solid var(--hh-yellow);
  flex-shrink: 0;
}

.hh-cart-header h3 {
  color: var(--hh-white);
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1;
}

.hh-cart-header-count { color: var(--hh-yellow); }

.hh-cart-close {
  background: none;
  border: none;
  color: var(--hh-gray-500);
  font-size: 2rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.hh-cart-close:hover { color: var(--hh-yellow); }

/* --- Body (scrollable) --- */
.hh-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.2s;
}

/* --- Empty state --- */
.hh-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem;
  gap: 1rem;
  color: var(--hh-gray-500);
}

.hh-cart-empty svg { opacity: 0.25; }

.hh-cart-empty p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hh-gray-700);
  margin: 0;
}

/* --- Cart item --- */
.hh-cart-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hh-gray-200);
  transition: opacity 0.25s, transform 0.25s;
}

.hh-cart-item:last-child { border-bottom: none; }

.hh-cart-item-img {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--hh-gray-100);
}

.hh-cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hh-cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hh-cart-item-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--hh-black);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hh-cart-item-name:hover { color: var(--hh-yellow-dark); }

.hh-cart-item-price {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hh-black);
}

.hh-cart-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.25rem;
}

/* --- Quantity stepper --- */
.hh-cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hh-gray-300);
  border-radius: 4px;
  overflow: hidden;
}

.hh-cart-qty-btn {
  background: var(--hh-gray-100);
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--hh-black);
  cursor: pointer;
  transition: background var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
}

.hh-cart-qty-btn:hover:not(:disabled) { background: var(--hh-gray-200); }
.hh-cart-qty-btn:disabled { opacity: 0.3; cursor: default; }

.hh-cart-qty-val {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 32px;
  text-align: center;
}

/* --- Remove button --- */
.hh-cart-remove {
  background: none;
  border: none;
  color: var(--hh-gray-500);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.hh-cart-remove:hover {
  color: #c00;
  background: rgba(204, 0, 0, 0.06);
}

/* --- Footer --- */
.hh-cart-footer {
  flex-shrink: 0;
  padding: 1.25rem;
  border-top: 2px solid var(--hh-gray-200);
  background: var(--hh-gray-100);
}

.hh-cart-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.hh-cart-subtotal strong {
  font-size: 1.15rem;
  color: var(--hh-black);
}

.hh-cart-action-btn {
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: center;
}

.hh-cart-action-btn + .hh-cart-action-btn { margin-top: 0.5rem; }

/* --- Responsive --- */
@media (max-width: 480px) {
  .hh-cart-panel { max-width: 100%; }
}

/* ============================================
   TEAM LOGIN PAGE
   ============================================ */
.login-page {
  min-height: 100vh;
  padding-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hh-black-deep);
  position: relative;
  overflow: hidden;
}

.login-wrapper {
  width: 100%;
  max-width: 480px;
  padding: clamp(1.5rem, 4vw, 3rem);
  position: relative;
  z-index: 2;
}

.login-card {
  background: var(--hh-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.login-header {
  background: var(--hh-black);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  border-bottom: 3px solid var(--hh-yellow);
}

.login-logo {
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: center;
}

.login-site-logo.site-logo {
  justify-content: center;
  text-decoration: none;
}

.login-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--hh-yellow);
  color: var(--hh-black);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

.login-header .eyebrow {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hh-yellow);
  margin-bottom: 0.5rem;
}

.login-header h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--hh-white);
  margin: 0 0 0.5rem;
}

.login-header p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.login-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 2rem 0;
  padding: 0.75rem 1rem;
  background: #FEE2E2;
  border: 1px solid #FECACA;
  border-radius: 4px;
  color: #991B1B;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}

.login-error svg { flex-shrink: 0; }

.login-form {
  padding: 2rem;
}

.login-form .hh-form-field {
  margin-bottom: 1.25rem;
}

.login-form .hh-form-field label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hh-gray-700);
  margin-bottom: 0.4rem;
}

.login-form .hh-form-field input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--hh-gray-200);
  border-radius: 3px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  color: var(--hh-black);
  background: var(--hh-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}

.login-form .hh-form-field input::placeholder {
  color: var(--hh-gray-300);
}

.login-form .hh-form-field input:focus {
  outline: none;
  border-color: var(--hh-yellow);
  box-shadow: 0 0 0 1px var(--hh-yellow);
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  color: var(--hh-gray-700);
}

.login-remember input[type="checkbox"] {
  accent-color: var(--hh-yellow);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.login-forgot {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  color: var(--hh-gray-500);
  text-decoration: none;
  transition: color var(--transition);
}

.login-forgot:hover { color: var(--hh-yellow-dark); }

.login-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--hh-black);
  transition: all var(--transition);
}

.login-submit:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--hh-black);
}

.login-submit:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--hh-black);
}

.login-submit svg {
  transition: transform var(--transition);
}

.login-submit:hover svg {
  transform: translateX(4px);
}

.login-footer-text {
  padding: 0 2rem 1.75rem;
  text-align: center;
}

.login-footer-text p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.8rem;
  color: var(--hh-gray-500);
  margin: 0;
}

.login-footer-text a {
  color: var(--hh-gray-700);
  text-decoration: underline;
  transition: color var(--transition);
}

.login-footer-text a:hover { color: var(--hh-yellow-dark); }

/* Background accent */
.login-bg-accent {
  position: fixed;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--hh-yellow-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Login page responsive */
@media (max-width: 480px) {
  .login-wrapper { padding: 1rem; }
  .login-header { padding: 2rem 1.5rem 1.5rem; }
  .login-form { padding: 1.5rem; }
  .login-footer-text { padding: 0 1.5rem 1.5rem; }
  .login-options { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
}

/* ============================================
   MASTERACK SHOWCASE PAGE
   ============================================ */

/* --- Hero --- */
.masterack-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--hh-black-deep);
  overflow: hidden;
}

.masterack-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(13,13,13,0.92) 0%, rgba(26,26,26,0.78) 45%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
}

.masterack-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--hh-yellow);
}

.masterack-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.masterack-hero h1 {
  color: var(--hh-white);
  margin-bottom: 1.5rem;
}

.masterack-hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--hh-gray-300);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.masterack-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Trust Strip --- */
.masterack-trust {
  background: var(--hh-black);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.masterack-trust-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.masterack-trust-item {
  color: var(--hh-white);
}

.masterack-trust-number {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--hh-yellow);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.masterack-trust-number span {
  font-size: 0.6em;
  opacity: 0.75;
  margin-left: 0.1em;
}

.masterack-trust-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hh-gray-300);
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- Category Cards Grid --- */
.masterack-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.masterack-cat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--hh-black);
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  border-radius: 6px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.masterack-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,26,26,0.12);
  border-color: var(--hh-yellow);
}

.masterack-cat-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--hh-gray-100);
  overflow: hidden;
}

.masterack-cat-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.masterack-cat-card:hover .masterack-cat-image img {
  transform: scale(1.04);
}

.masterack-cat-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hh-gray-500);
}

.masterack-cat-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.3;
}

.masterack-cat-count {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--hh-black);
  color: var(--hh-yellow);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 3px;
  font-weight: 700;
}

.masterack-cat-body {
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.masterack-cat-body h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.25;
}

.masterack-cat-price {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--hh-black);
}

.masterack-cat-body .card-link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hh-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color var(--transition);
}

.masterack-cat-card:hover .card-link { color: var(--hh-yellow-dark); }

.masterack-cat-card:hover .card-link .arrow { transform: translateX(4px); }

.masterack-cat-body .card-link .arrow {
  display: inline-block;
  transition: transform var(--transition);
}

.masterack-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 2px dashed var(--hh-gray-200);
  border-radius: 8px;
  color: var(--hh-gray-700);
}

.masterack-empty h3 { margin-bottom: 0.75rem; }

/* --- 2026 Innovations --- */
.masterack-innovations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.masterack-innovation {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--hh-yellow);
  padding: 2rem;
  border-radius: 4px;
  transition: transform var(--transition), border-color var(--transition);
}

.masterack-innovation:hover {
  transform: translateY(-3px);
  border-left-color: var(--hh-yellow);
  border-color: rgba(254,221,0,0.25);
}

.masterack-innovation-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hh-yellow);
  background: rgba(254,221,0,0.08);
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.masterack-innovation h3 {
  color: var(--hh-white);
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
}

.masterack-innovation p {
  color: var(--hh-gray-300);
  line-height: 1.65;
  margin: 0;
}

.masterack-innovation strong {
  color: var(--hh-yellow);
  font-weight: 700;
}

/* --- Why Masterack Benefits --- */
.masterack-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.masterack-benefit {
  text-align: center;
  padding: 1rem;
}

.masterack-benefit-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hh-black);
  border-radius: 50%;
  margin-bottom: 1.25rem;
}

.masterack-benefit-icon svg {
  width: 28px;
  height: 28px;
}

.masterack-benefit h3 {
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
}

.masterack-benefit p {
  color: var(--hh-gray-700);
  line-height: 1.7;
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .masterack-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .masterack-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .masterack-innovations { grid-template-columns: 1fr; }
  .masterack-benefits { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 600px) {
  .masterack-hero { min-height: 60vh; padding-top: 90px; }
  .masterack-hero-actions .btn { width: 100%; justify-content: center; }
  .masterack-trust-inner { grid-template-columns: 1fr; padding: 2rem 1.25rem; }
  .masterack-cat-grid { grid-template-columns: 1fr; }
  .masterack-innovation { padding: 1.5rem; }
}

/* ============================================
   MOBILE STICKY CTA BAR
   ============================================ */

.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--hh-black-deep);
  border-top: 2px solid var(--hh-yellow);
  padding: 0.75rem 1rem;
  gap: 0.75rem;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.mobile-cta-bar__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.mobile-cta-bar__btn--primary {
  background: var(--hh-yellow);
  color: var(--hh-black);
  border: 2px solid var(--hh-yellow);
}

.mobile-cta-bar__btn--primary:hover,
.mobile-cta-bar__btn--primary:focus-visible {
  background: var(--hh-yellow-hover);
  border-color: var(--hh-yellow-hover);
  color: var(--hh-black);
}

.mobile-cta-bar__btn--outline {
  background: transparent;
  color: var(--hh-white);
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.mobile-cta-bar__btn--outline:hover,
.mobile-cta-bar__btn--outline:focus-visible {
  border-color: var(--hh-white);
  color: var(--hh-white);
}

@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
  }

  body.admin-bar .mobile-cta-bar {
    bottom: 46px;
  }
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

.testimonials-section {
  overflow: hidden;
  padding: 5rem 0;
  background: var(--hh-gray-100);
}

.testimonials-section .container {
  position: relative;
}

.testimonials-section .section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.testimonials-track-wrap {
  overflow: hidden;
  padding: 0.5rem 0 0.25rem;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.testimonials-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: testimonials-scroll var(--testimonials-duration, 300s) linear infinite;
}

.testimonials-track:hover {
  animation-play-state: paused;
}

@keyframes testimonials-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testimonial-card {
  width: 300px;
  flex-shrink: 0;
  background: var(--hh-white);
  border: 1px solid var(--hh-gray-200);
  border-radius: 14px;
  padding: 1.375rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-bottom-color 0.2s ease;
  border-bottom: 3px solid transparent;
  cursor: default;
}

.testimonial-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.09);
  transform: translateY(-2px);
  border-bottom-color: var(--hh-yellow);
}

.testimonial-card-top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hh-black);
  color: var(--hh-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  text-transform: uppercase;
}

.testimonial-meta {
  flex: 1;
  min-width: 0;
}

.testimonial-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--hh-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-company {
  font-size: 0.78rem;
  color: var(--hh-gray-500);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-badge {
  flex-shrink: 0;
  opacity: 0.6;
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  color: #f59e0b;
}

.testimonial-stars svg {
  display: block;
}

.testimonial-quote {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--hh-gray-700, #374151);
  margin: 0;
  border: none;
  padding: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

@media (max-width: 640px) {
  .testimonial-card {
    width: 270px;
    padding: 1.125rem 1.25rem 1rem;
  }
}


/* ============================================
   PRODUCT PAGE — FLEET PRICING CTA
   ============================================ */
.fleet-price-btn-wrap {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hh-gray-200);
}

.fleet-price-btn {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem !important;
}

.fleet-price-btn svg {
  flex-shrink: 0;
}

.fleet-price-hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--hh-gray-500);
  text-align: center;
}


/* ============================================
   ANNOUNCEMENT BANNER
   ============================================ */

.hh-announcement-bar {
  background: var(--hh-yellow);
  color: var(--hh-black-deep);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  position: relative;
  z-index: 1100;
}

.hh-announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.6rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

.hh-announcement-bar__text {
  text-align: center;
  color: var(--hh-black-deep);
  text-decoration: none;
  flex: 1;
}

a.hh-announcement-bar__text:hover {
  text-decoration: underline;
}

.hh-announcement-bar__dismiss {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--hh-black-deep);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  line-height: 1;
}

.hh-announcement-bar__dismiss:hover {
  opacity: 1;
}

.hh-announcement-bar.is-hidden {
  display: none;
}

/* ============================================
   REQUEST A QUOTE — LANDING
   ============================================ */
.quote-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58vh;
  padding: 140px 0 70px;
  background-size: cover;
  background-position: center 60%;
  background-color: var(--hh-black-deep);
  overflow: hidden;
}

.quote-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(13,13,13,0.94) 0%, rgba(13,13,13,0.82) 42%, rgba(13,13,13,0.35) 100%);
  z-index: 1;
}

.quote-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--hh-yellow);
  z-index: 2;
}

.quote-hero-content {
  position: relative;
  z-index: 2;
  max-width: 730px;
}

.quote-hero h1 {
  color: var(--hh-white);
  margin: 0 0 1.25rem;
}

.quote-hero h1 .highlight { color: var(--hh-yellow); }

.quote-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.7;
  color: var(--hh-gray-300);
  margin: 0 0 2.25rem;
}

.quote-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.quote-hero-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 190px;
}

.quote-hero-facts strong {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--hh-yellow);
}

.quote-hero-facts span {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--hh-gray-300);
}

/* --- Trust strip --- */
.quote-trust {
  background: var(--hh-black);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.quote-trust-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1rem clamp(1.25rem, 3vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.5rem;
}

.quote-trust-item {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hh-gray-300);
}

.quote-trust-item + .quote-trust-item::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
  background: var(--hh-yellow);
}

/* --- Form + rail --- */
.quote-body {
  background: var(--hh-gray-100);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5.5rem);
}

.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.quote-form-col .hh-quote-page { max-width: none; }

.quote-rail {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.quote-card {
  background: #fff;
  border: 2px solid var(--hh-black);
  box-shadow: 6px 6px 0 var(--hh-black);
  padding: 1.75rem;
}

.quote-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}

.quote-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--hh-gray-700);
}

.quote-card--dark {
  background: var(--hh-black);
  border-color: var(--hh-black);
  color: var(--hh-white);
}

.quote-card--dark h3 { color: var(--hh-white); }
.quote-card--dark p { color: var(--hh-gray-300); }
.quote-card--dark .eyebrow { margin-bottom: 1.5rem; }

.quote-steps {
  counter-reset: quote-step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.quote-steps li {
  counter-increment: quote-step;
  position: relative;
  padding-left: 3rem;
}

.quote-steps li::before {
  content: counter(quote-step);
  position: absolute;
  left: 0;
  top: -4px;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--hh-black);
  background: var(--hh-yellow);
}

.quote-steps h3 { margin-bottom: 0.35rem; }

.quote-card--media { padding: 0; }

.quote-card--media img {
  display: block;
  width: 100%;
  height: 215px;
  object-fit: cover;
  object-position: center 45%;
  border-bottom: 2px solid var(--hh-black);
}

.quote-card--media .quote-card-body { padding: 1.5rem 1.75rem 1.75rem; }

.quote-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hh-black);
  border-bottom: 2px solid var(--hh-yellow);
  padding-bottom: 2px;
}

.quote-link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--transition-fast);
}

.quote-link:hover svg { transform: translateX(4px); }

.quote-card--accent {
  background: var(--hh-yellow);
  border-color: var(--hh-black);
}

.quote-card--accent p { color: rgba(0,0,0,0.72); }
.quote-card--accent .btn { margin-top: 1.1rem; }

.quote-phone {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--hh-black);
}

.quote-phone:hover { color: var(--hh-yellow-hover); }

/* --- Bottom CTA --- */
.quote-foot {
  background: var(--hh-black);
  color: var(--hh-white);
  border-top: 4px solid var(--hh-yellow);
}

.quote-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.quote-foot h2 {
  color: var(--hh-white);
  margin: 0 0 0.4rem;
}

.quote-foot p {
  margin: 0;
  color: var(--hh-gray-300);
  font-size: 0.95rem;
}

.quote-foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 1024px) {
  .quote-grid { grid-template-columns: 1fr; }
  .quote-rail { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 640px) {
  .quote-hero { min-height: 0; padding: 120px 0 56px; }
  .quote-hero-facts { gap: 1.25rem 1.5rem; }
  .quote-hero-facts li { max-width: calc(50% - 0.75rem); }
  .quote-hero-facts strong { font-size: 1.7rem; }
  .quote-foot-actions { width: 100%; }
  .quote-foot-actions .btn { flex: 1 1 100%; justify-content: center; }
  .quote-rail { grid-template-columns: 1fr; }
  .quote-card { padding: 1.35rem; }
  .quote-card--media .quote-card-body { padding: 1.25rem 1.35rem 1.5rem; }
  .hh-quote-page .hh-contact-form { padding: 0 1.35rem 1.5rem; }
  .hh-quote-form-head { margin: 0 -1.35rem 1.5rem; padding: 1.25rem 1.35rem; }
  .hh-quote-items .hhpfb-quote-items-editor { padding: 1.35rem; }
}