/* ============================================================
   HOÀNG HÀ FLOORING — child theme styles
   Ported from the static demo. Every component root carries the
   class `hh`, and every rule is scoped under it, so nothing here
   can leak into Flatsome's own markup.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --hh-brand:        #f15a29;
  --hh-brand-deep:   #d2440f;
  --hh-brand-soft:   #fef0ea;

  --hh-ink:          #161c20;
  --hh-ink-2:        #232c31;
  --hh-slate:        #424d54;
  --hh-muted:        #6e7a81;
  --hh-line:         #e4e0db;
  --hh-line-soft:    #efece8;
  --hh-bg:           #ffffff;
  --hh-bg-alt:       #f7f5f2;

  --hh-display: 'Oswald', 'Arial Narrow', sans-serif;
  --hh-body:    'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  --hh-s-1: .25rem; --hh-s-2: .5rem;  --hh-s-3: .75rem; --hh-s-4: 1rem;
  --hh-s-5: 1.5rem; --hh-s-6: 2rem;   --hh-s-7: 3rem;   --hh-s-8: 4rem;
  --hh-s-9: 6rem;   --hh-s-10: 8rem;

  --hh-wrap: 1240px;
  --hh-radius: 3px;
  --hh-radius-lg: 6px;

  --hh-shadow-sm: 0 1px 2px rgba(22,28,32,.06), 0 2px 8px rgba(22,28,32,.04);
  --hh-shadow-md: 0 4px 12px rgba(22,28,32,.08), 0 12px 32px rgba(22,28,32,.07);
  --hh-shadow-lg: 0 18px 50px rgba(22,28,32,.16);

  --hh-ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

/* ---------- 2. Scoped reset ----------
   The demo's reset was global (`* { margin:0 }`, `button { border:0 }`,
   uppercase h1-h4). Applied site-wide that would wreck Flatsome, so it is
   scoped to `.hh` — the class every element of this port renders on its
   outermost node. */
.hh, .hh *, .hh *::before, .hh *::after { box-sizing: border-box; }
.hh { font-family: var(--hh-body); font-size: 16px; line-height: 1.65; color: var(--hh-slate); }
/* :where() keeps this at class-only specificity, so a component rule such as
   `.hh-card-desc { margin-top: .6rem }` still wins. Written as `.hh p` it
   would be (0,1,1) and silently flatten every component's spacing. */
.hh :where(p, h1, h2, h3, h4, h5, h6, figure, dl, dd, ul, ol, li, blockquote) { margin: 0; }
.hh img, .hh svg { display: block; max-width: 100%; }
.hh a { color: inherit; text-decoration: none; }
.hh ul { list-style: none; padding: 0; }
.hh table { border-collapse: collapse; width: 100%; }
/* Flatsome sets `dl dd, dl dt { display:inline-block; margin:0 5px 0 0 }`, which
   collapses the demo's stat blocks onto one line. Restore the browser default
   inside our scope; the components that want flex set it themselves. */
.hh :where(dt, dd) { display: block; margin: 0; }
/* matched on the dt/dd directly, not via `dl` — on the about-facts block the
   <dl> IS the .hh root, so `.hh dl dt` would never match it. */
.hh h1, .hh h2, .hh h3, .hh h4, .hh .hh-display {
  font-family: var(--hh-display); font-weight: 600; color: var(--hh-ink);
  line-height: 1.22; letter-spacing: .015em; text-transform: uppercase;
}
.hh h1 { font-size: clamp(2.4rem, 5.1vw, 4.05rem); font-weight: 700; }
.hh h2 { font-size: clamp(1.9rem, 3.7vw, 2.9rem); text-wrap: balance; }
.hh h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.3; }
.hh ::selection { background: var(--hh-brand); color: #fff; }

/* Flatsome styles every bare <button> with min-height:2.507em and a matching
   line-height, which inflates the demo's small custom controls (slider dots,
   arrows, filter chips). Reset it inside our scope and size each control
   explicitly. */
.hh button {
  font: inherit; color: inherit; cursor: pointer; background: none; border: 1;
  min-height: 0; line-height: normal; text-shadow: none; box-shadow: none;
  border-radius: 50%; text-transform: none; letter-spacing: normal;
}
.hh button:hover { box-shadow: none; }
/* Flatsome adds bottom padding to every .col; zero it where our elements
   supply their own rhythm. */
.hh-flush > .col { padding-bottom: 0; }

/* ---------- 3. Layout helpers ---------- */
/* The demo used one .wrap everywhere, so a 24px gutter was self-consistent.
   Here half the page sits in Flatsome [col]s, which have a 15px gutter — at
   24px the hero, brand strip, stats bar and CTA band sat 9px further in than
   the header logo, the section content and the footer. Match Flatsome so every
   left edge lines up; --hh-wrap (1240px) already equals the rendered .row. */
.hh-wrap { width: 100%; max-width: var(--hh-wrap); margin-inline: auto; padding-inline: 15px; }
.hh-section { padding-block: clamp(3.5rem, 8vw, var(--hh-s-9)); }
.hh-section--alt { background: var(--hh-bg-alt); }
.hh-section--dark { background: var(--hh-ink); color: #b9c3c8; }
.hh-section--dark h2, .hh-section--dark h3 { color: #fff; }

/* section heading block */
.hh-eyebrow {
  display: inline-flex; align-items: center; gap: var(--hh-s-3);
  font-family: var(--hh-display); font-size: .8rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--hh-brand);
  margin-bottom: var(--hh-s-4);
}
.hh-eyebrow::before {
  content: ''; width: 34px; height: 2px; background: var(--hh-brand); flex: none;
}
/* centred contexts get a rule on both sides */
.hh-sec-head .hh-eyebrow::after, .hh-pagehero .hh-eyebrow::after {
  content: ''; width: 34px; height: 2px; background: var(--hh-brand); flex: none;
}
.hh-sec-head {
  max-width: 64ch; margin-inline: auto; text-align: center;
  margin-bottom: clamp(2.2rem, 4.5vw, var(--hh-s-7));
}
.hh-sec-head h2 { margin-inline: auto; max-width: 22ch; }
.hh-sec-head p { margin: var(--hh-s-4) auto 0; font-size: 1.02rem; color: var(--hh-muted); max-width: 58ch; }
.hh-section--dark .hh-sec-head p { color: #93a0a7; }
.hh-sec-head--split { max-width: 64ch; }
.hh-sec-head--split > div:first-child { max-width: none; }

/* ---------- 4. Buttons ---------- */
.hh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--hh-display); font-weight: 500; font-size: .95rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .95rem 1.7rem; border-radius: var(--hh-radius);
  border: 2px solid transparent; white-space: nowrap;
  transition: all .25s var(--hh-ease);
}
.hh-btn svg { width: 17px; height: 17px; flex: none; }
.hh-btn--primary { background: var(--hh-brand); color: #fff; border-color: var(--hh-brand); }
.hh-btn--primary:hover { background: var(--hh-brand-deep); border-color: var(--hh-brand-deep);
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(241,90,41,.34); }
.hh-btn--ghost { border-color: currentColor; color: var(--hh-ink); }
.hh-btn--ghost:hover { background: var(--hh-ink); border-color: var(--hh-ink); color: #fff; transform: translateY(-2px); }
.hh-btn--light { border-color: rgba(255,255,255,.4); color: #fff; }
.hh-btn--light:hover { background: #fff; color: var(--hh-ink); border-color: #fff; }
.hh-btn--sm { padding: .6rem 1.1rem; font-size: .82rem; }

/* ---------- 6b. Router pages (SPA-only rules removed) ---------- */




/* compact banner at the top of every non-home page */
.hh-pagehero { position: relative; background: var(--hh-ink); color: #a9b4ba; overflow: hidden; }
.hh-pagehero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 85% 0%, rgba(241,90,41,.22), transparent 60%);
}
.hh-pagehero .hh-wrap { position: relative; z-index: 2; text-align: center;
  padding-block: clamp(2.6rem, 5.5vw, 4.4rem); }
.hh-pagehero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.15rem); margin-top: .3rem; }
.hh-pagehero h1 { margin-inline: auto; max-width: 20ch; }
.hh-pagehero p { margin: var(--hh-s-4) auto 0; max-width: 60ch; font-size: 1.02rem; color: #93a0a7; }

.hh-crumb { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  row-gap: .3rem; column-gap: .5rem; font-size: .8rem; line-height: 1.4; color: #7f8b92;
  margin-bottom: var(--hh-s-5); }
.hh-crumb a, .hh-crumb > span { white-space: nowrap; }
.hh-crumb b { max-width: 100%; }
.hh-crumb a:hover { color: var(--hh-brand); }
.hh-crumb b { color: #fff; font-weight: 500; }

/* the page banner already carries the title -> drop the first section's heading */
.hh-pagehero + .hh-section .hh-wrap > .hh-sec-head:first-child { display: none; }
.hh-pagehero + .hh-section { padding-top: clamp(2.5rem, 5vw, var(--hh-s-7)); }

/* orange CTA strip */
.hh-band { background: var(--hh-brand); color: #fff; }
.hh-band .hh-wrap { display: flex; flex-wrap: wrap; gap: var(--hh-s-5);
  align-items: center; justify-content: space-between; padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.hh-band h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.hh-band p { margin-top: .5rem; opacity: .94; max-width: 52ch; }
.hh-band-cta { display: flex; flex-wrap: wrap; gap: var(--hh-s-3); }
.hh-band .hh-btn--primary { background: #fff; color: var(--hh-brand-deep); border-color: #fff; }
.hh-band .hh-btn--primary:hover { background: var(--hh-ink); color: #fff; border-color: var(--hh-ink); box-shadow: none; }
.hh-band .hh-btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.hh-band .hh-btn--ghost:hover { background: #fff; color: var(--hh-brand-deep); border-color: #fff; }

/* ---------- 7. Hero slider ---------- */
.hh-hero { position: relative; background: var(--hh-ink); color: #cfd7db; overflow: hidden; }
.hh-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 80% at 78% 12%, rgba(241,90,41,.20), transparent 58%);
  pointer-events: none;
}

/* slides stack in one grid cell -> track auto-sizes to tallest slide */
.hh-hero-track { position: relative; z-index: 2; display: grid; }
.hh-hero-slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s var(--hh-ease), visibility .5s var(--hh-ease);
}
.hh-hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.hh-hero-slide .hh-wrap {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding-block: clamp(3rem, 6.5vw, 5.4rem);
}
.hh-hero h1 { color: #fff; font-size: clamp(2.3rem, 4.55vw, 3.7rem); line-height: 1.2; }
.hh-hero h1 em { font-style: normal; color: var(--hh-brand); }
.hh-hero-title-link { color: inherit; text-decoration: none; transition: color .2s ease; }
.hh-hero-title-link:hover { color: var(--hh-brand); }
.hh-hero-title-link:hover em { color: #fff; }
.hh-hero-lead { margin-top: var(--hh-s-5); font-size: 1.08rem; color: #a9b4ba; max-width: 52ch; }
.hh-hero-cta { margin-top: var(--hh-s-6); display: flex; flex-wrap: wrap; gap: var(--hh-s-3); }

/* staged entrance for the active slide */
.hh-hero-slide .hh-anim {
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--hh-ease), transform .5s var(--hh-ease);
}
.hh-hero-slide.is-active .hh-anim { opacity: 1; transform: none; }
.hh-hero-slide.is-active .hh-anim:nth-child(1) { transition-delay: .04s }
.hh-hero-slide.is-active .hh-anim:nth-child(2) { transition-delay: .10s }
.hh-hero-slide.is-active .hh-anim:nth-child(3) { transition-delay: .16s }
.hh-hero-slide.is-active .hh-anim:nth-child(4) { transition-delay: .22s }

/* collage */
.hh-hero-art { position: relative; aspect-ratio: 1/1; display: block; cursor: pointer; }
.hh-hero-art figure {
  position: absolute; overflow: hidden; border-radius: var(--hh-radius-lg);
  box-shadow: var(--hh-shadow-lg);
  opacity: 0; transform: scale(.94) translateY(16px);
  transition: opacity .55s var(--hh-ease), transform .55s var(--hh-ease);
}
.hh-hero-art:hover .hh-a img, .hh-hero-art:hover .hh-b img, .hh-hero-art:hover .hh-c img { transform: scale(1.04); }
.hh-hero-slide.is-active .hh-hero-art figure { opacity: 1; transform: none; }
.hh-hero-slide.is-active .hh-hero-art .hh-a { transition-delay: .05s }
.hh-hero-slide.is-active .hh-hero-art .hh-b { transition-delay: .12s }
.hh-hero-slide.is-active .hh-hero-art .hh-c { transition-delay: .19s }
.hh-hero-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--hh-ease); }
.hh-hero-art .hh-a { inset: 0 22% 24% 0; }
.hh-hero-art .hh-b { width: 46%; aspect-ratio: 1/1; right: 0; top: 16%; outline: 8px solid var(--hh-ink); }
.hh-hero-art .hh-c { width: 40%; aspect-ratio: 4/3; left: 12%; bottom: 0; outline: 8px solid var(--hh-ink); }

.hh-hero-badge {
  position: absolute; right: 2%; bottom: 6%; z-index: 3;
  background: var(--hh-brand); color: #fff; padding: .85rem 1.1rem;
  border-radius: var(--hh-radius); box-shadow: var(--hh-shadow-md); max-width: 200px;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .5s var(--hh-ease) .24s, transform .5s var(--hh-ease) .24s;
}
.hh-hero-slide.is-active .hh-hero-badge { opacity: 1; transform: none; }
.hh-hero-badge strong { display: block; font-family: var(--hh-display); font-size: 1.5rem; line-height: 1; }
.hh-hero-badge span { font-size: .74rem; opacity: .92; line-height: 1.35; display: block; margin-top: .25rem; }

/* controls */
.hh-hero-ctrl { position: relative; z-index: 4; }
.hh-hero-ctrl .hh-wrap { display: flex; align-items: center; gap: var(--hh-s-3); padding-bottom: var(--hh-s-5); }
.hh-hero-arrow {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.26); border-radius: 50%; color: #fff;
  transition: all .25s var(--hh-ease);
}
.hh-hero-arrow svg { width: 18px; }
.hh-hero-arrow:hover { background: var(--hh-brand); border-color: var(--hh-brand); }
.hh-hero-arrow:focus-visible { outline: 2px solid var(--hh-brand); outline-offset: 3px; }

.hh-hero-dots { display: flex; gap: .5rem; margin-right: auto; }
.hh-hero-dot {
  position: relative; width: 46px; height: 36px;   /* tall enough to tap */
  background: transparent; border-radius: 2px; overflow: hidden;
}
.hh-hero-dot::before, .hh-hero-dot i {
  content: ''; position: absolute; left: 0; right: 0;
  top: calc(50% - 1.5px); height: 3px; border-radius: 2px;
}
.hh-hero-dot::before { background: rgba(255,255,255,.22); }
.hh-hero-dot i { background: var(--hh-brand); transform: scaleX(0); transform-origin: left; }
.hh-hero-dot.is-active i { animation: hhDotFill var(--hh-hero-dur, 6500ms) linear forwards; }
.hh-hero.is-paused .hh-hero-dot.is-active i { animation-play-state: paused; }
@keyframes hhDotFill { to { transform: scaleX(1) } }
.hh-hero-dot:focus-visible { outline: 2px solid var(--hh-brand); outline-offset: 4px; }

.hh-hero-count { font-family: var(--hh-display); font-size: .9rem; letter-spacing: .14em;
  color: #7f8b92; margin-left: var(--hh-s-3); }
.hh-hero-count b { color: #fff; font-weight: 500; }

/* stats bar */
.hh-hero-statsbar { position: relative; z-index: 3; border-top: 1px solid rgba(255,255,255,.12); }
.hh-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hh-s-5);
  padding-block: var(--hh-s-5); margin: 0; }
.hh-hero-stats dt { font-family: var(--hh-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 600; color: #fff; line-height: 1; }
.hh-hero-stats dd { margin: .45rem 0 0; font-size: .82rem; color: #8d999f; line-height: 1.45; max-width: 26ch; }

/* ---------- 8. Brand strip ---------- */
.hh-brands { border-bottom: 1px solid var(--hh-line-soft); background: #fff; }
.hh-brands .hh-wrap { display: grid; justify-items: center; gap: var(--hh-s-4);
  padding-block: clamp(1.8rem, 3.5vw, var(--hh-s-6)); }
.hh-brands-label { font-family: var(--hh-display); font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hh-muted); line-height: 1.4;
  display: inline-flex; align-items: center; gap: var(--hh-s-3); }
.hh-brands-label::before, .hh-brands-label::after {
  content: ''; width: 26px; height: 1px; background: var(--hh-line); flex: none;
}
.hh-brands-list { display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--hh-s-3) clamp(1.4rem, 3vw, var(--hh-s-6)); }
.hh-brands-list li {
  font-family: var(--hh-display); font-size: 1.15rem; letter-spacing: .06em;
  text-transform: uppercase; color: #9aa4aa; transition: color .25s;
}
.hh-brands-list li:hover { color: var(--hh-ink); }

/* ---------- 8b. About ---------- */
.hh-about-banner { margin: 0 0 clamp(2rem, 4vw, var(--hh-s-7)); position: relative; }
.hh-about-banner img {
  width: 100%; aspect-ratio: 2.62 / 1; object-fit: cover;
  border-radius: var(--hh-radius-lg); box-shadow: var(--hh-shadow-md);
}

.hh-about-grid { display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 4.5vw, var(--hh-s-7)); align-items: center; }

.hh-about-body p { font-size: 1.01rem; color: var(--hh-slate); line-height: 1.75; }
.hh-about-body p + p { margin-top: var(--hh-s-4); }
.hh-about-body b { color: var(--hh-ink); font-weight: 600; }

.hh-about-facts { margin: 0; display: grid; gap: var(--hh-s-4);
  padding-left: clamp(1.2rem, 2.5vw, var(--hh-s-5)); border-left: 3px solid var(--hh-brand); }
.hh-about-facts dt { font-family: var(--hh-display); font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600; color: var(--hh-ink); line-height: 1; text-transform: uppercase; }
.hh-about-facts dd { margin: .3rem 0 0; font-size: .84rem; color: var(--hh-muted); line-height: 1.45; }

/* ---------- 8c. Best sellers ---------- */
.hh-bests { display: grid; gap: clamp(2rem, 4vw, var(--hh-s-7)); }
.hh-best {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 3.5vw, var(--hh-s-6));
  align-items: center; background: #fff; border: 1px solid var(--hh-line);
  border-radius: var(--hh-radius-lg); overflow: hidden;
  transition: box-shadow .3s var(--hh-ease);
}
.hh-best:hover { box-shadow: var(--hh-shadow-md); }
.hh-best:nth-child(even) .hh-best-media { order: 2; }

.hh-best-media { position: relative; align-self: stretch; min-height: 380px; overflow: hidden; }

/* image slideshow inside each best-seller */
.hh-bgal { position: absolute; inset: 0; display: block; cursor: pointer; }
.hh-bgal img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s var(--hh-ease);
}
.hh-bgal img.is-on { opacity: 1; }

.hh-bgal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.9); color: var(--hh-ink); box-shadow: var(--hh-shadow-sm);
  opacity: 0; transition: opacity .25s var(--hh-ease), background .2s;
}
.hh-bgal-nav svg { width: 17px; }
.hh-bgal-prev { left: 10px; } .hh-bgal-next { right: 10px; }
.hh-best-media:hover .hh-bgal-nav, .hh-bgal-nav:focus-visible { opacity: 1; }
.hh-bgal-nav:hover { background: var(--hh-brand); color: #fff; }

.hh-bgal-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  display: flex; justify-content: center; gap: .4rem;
}
.hh-bgal-dot {
  width: 30px; height: 34px; padding: 0; position: relative; background: none;
}
.hh-bgal-dot::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 1.5px);
  height: 3px; border-radius: 2px; background: rgba(255,255,255,.55);
  box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: background .25s;
}
.hh-bgal-dot.is-active::before { background: var(--hh-brand); }
.hh-bgal-dot:focus-visible { outline: 2px solid var(--hh-brand); outline-offset: 2px; }
.hh-best-rank {
  position: absolute; top: var(--hh-s-4); left: var(--hh-s-4); z-index: 2;
  background: var(--hh-brand); color: #fff; font-family: var(--hh-display);
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 2px; box-shadow: var(--hh-shadow-sm);
}

.hh-best-body { padding: var(--hh-s-5) var(--hh-s-5) var(--hh-s-5) 0; }
.hh-best:nth-child(even) .hh-best-body { padding: var(--hh-s-5) 0 var(--hh-s-5) var(--hh-s-5); }
.hh-best-body h3 { margin: .45rem 0 var(--hh-s-3); font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.hh-best-title-link { color: inherit; transition: color .2s ease; }
.hh-best-title-link:hover { color: var(--hh-brand); }
.hh-best-lead { font-size: .94rem; color: var(--hh-muted); line-height: 1.68; }

.hh-best-benefits { margin-top: var(--hh-s-4); display: grid; gap: .5rem; }
.hh-best-benefits li { display: flex; gap: .6rem; align-items: flex-start;
  font-size: .89rem; color: var(--hh-slate); line-height: 1.5; }
.hh-best-benefits svg { width: 16px; flex: none; color: var(--hh-brand); margin-top: 3px; }

.hh-best-specs { margin: var(--hh-s-5) 0 0; padding-top: var(--hh-s-4);
  border-top: 1px dashed var(--hh-line);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem var(--hh-s-5); }
.hh-best-specs div { display: flex; justify-content: space-between; gap: var(--hh-s-3); font-size: .84rem; }
.hh-best-specs dt { color: var(--hh-muted); }
.hh-best-specs dd { margin: 0; font-weight: 600; color: var(--hh-ink); text-align: right; }

.hh-best-cta { margin-top: var(--hh-s-5); display: flex; flex-wrap: wrap;
  gap: var(--hh-s-3); align-items: center; }
.hh-best-more { font-family: var(--hh-display); font-size: .84rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hh-slate); text-decoration: underline !important;
  text-underline-offset: 4px; padding: .5rem 0; }
.hh-best-more:hover { color: var(--hh-brand); }

/* ---------- 8d. Product detail page ---------- */
.hh-pagehero--detail h1 { max-width: 24ch; }

.hh-detail-top { display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.8rem, 4vw, var(--hh-s-7)); align-items: start; }
.hh-detail-media { margin: 0; border-radius: var(--hh-radius-lg); overflow: hidden;
  box-shadow: var(--hh-shadow-md); }
.hh-detail-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

.hh-detail-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hh-s-4);
  padding-bottom: var(--hh-s-5); border-bottom: 1px solid var(--hh-line); }
.hh-detail-meta dt { font-size: .78rem; color: var(--hh-muted); }
.hh-detail-meta dd { margin: .3rem 0 0; font-family: var(--hh-display); font-size: 1.05rem;
  color: var(--hh-ink); text-transform: uppercase; letter-spacing: .02em; }

.hh-detail-h { font-family: var(--hh-display); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hh-ink); margin: var(--hh-s-5) 0 var(--hh-s-3);
  padding-bottom: .5rem; border-bottom: 2px solid var(--hh-brand); display: inline-block; }
.hh-detail-cta { margin-top: var(--hh-s-6); display: flex; flex-wrap: wrap; gap: var(--hh-s-3); }

/* SKU tables */
.hh-sku-group + .hh-sku-group { margin-top: clamp(2rem, 4vw, var(--hh-s-7)); }
.hh-sku-head { margin-bottom: var(--hh-s-4); }
.hh-sku-head h3 { font-size: 1.15rem; }
.hh-sku-head p { margin-top: .35rem; font-size: .88rem; color: var(--hh-muted); }
.hh-sku { min-width: 620px; font-size: .9rem; background: #fff; }
.hh-sku th, .hh-sku td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--hh-line-soft); }
.hh-sku thead th { background: var(--hh-ink); color: #fff; font-family: var(--hh-display);
  font-weight: 500; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.hh-sku tbody th { font-weight: 600; color: var(--hh-ink); font-family: var(--hh-body); }
.hh-sku-code { display: flex; align-items: center; gap: .7rem; }
.hh-sku-chip { width: 92px; height: 92px; flex: none; border-radius: var(--hh-radius);
  object-fit: cover; border: 1px solid var(--hh-line); display: block; }
.hh-sku-chip--na { background: repeating-linear-gradient(45deg,
  var(--hh-bg-alt) 0 6px, #fff 6px 12px); }
.hh-sku-row--zoom { cursor: zoom-in; }
/* dim the page behind the popup — mainly for tap-to-open on mobile, where the
   popup is the only thing the viewer should be looking at */
/* above the sticky header (60) and the FAB (50), below the product modal (100) */
.hh-sku-veil { position: fixed; inset: 0; z-index: 90; background: rgba(22,28,32,.45);
  opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.hh-sku-veil.is-on { opacity: 1; pointer-events: auto; }
/* stays invisible but keeps swallowing clicks for a moment after close, so the
   tap's delayed click can't land on the row the popup was sitting over */
.hh-sku-veil.is-blocking { pointer-events: auto; }
/* centred in the viewport so it never gets clipped at the screen edge and
   never sits half-over the row it belongs to */
.hh-sku-zoom { position: fixed; z-index: 91; top: 50%; left: 50%;
  width: min(340px, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem); overflow-y: auto; padding: 1rem;
  background: #fff; border-radius: var(--hh-radius-lg); box-shadow: var(--hh-shadow-lg);
  opacity: 0; transform: translate(-50%, -50%) scale(.96); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease; }
.hh-sku-zoom.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.hh-sku-zoom-close { position: absolute; top: .55rem; right: .55rem; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border: 0; padding: 0;
  border-radius: 50%; background: rgba(255,255,255,.92); color: var(--hh-ink); cursor: pointer;
  box-shadow: var(--hh-shadow-sm); }
.hh-sku-zoom-close:hover { background: var(--hh-ink); color: #fff; }
.hh-sku-zoom-close svg { width: 18px; height: 18px; }
.hh-sku-zoom img { width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--hh-radius); display: block; }
.hh-sku-zoom b { display: block; margin-top: .6rem; font-family: var(--hh-display);
  font-size: 1rem; color: var(--hh-ink); }
.hh-sku-zoom em { display: block; margin-top: .2rem; font-size: .82rem;
  color: var(--hh-muted); font-style: normal; }
.hh-sku-zoom-extra { margin: .55rem 0 0; padding-top: .55rem; border-top: 1px solid var(--hh-line-soft);
  display: grid; gap: .3rem; }
.hh-sku-zoom-extra li { font-size: .78rem; color: var(--hh-slate); list-style: none; }
.hh-sku-zoom-price { margin-top: .65rem; width: 100%; text-align: left;
  font-family: var(--hh-display); font-size: .8rem; letter-spacing: .04em; color: var(--hh-brand);
  background: none; border: 0; padding: 0; cursor: pointer; }
.hh-sku-zoom-price::after { content: '▾'; float: right; transition: transform .15s ease; }
.hh-sku-zoom-price.is-open::after { transform: rotate(180deg); }
.hh-sku-zoom-calls { margin-top: .5rem; display: grid; gap: .35rem; }
.hh-sku-zoom-calls[hidden] { display: none; }
.hh-sku-zoom-calls a { display: block; font-size: .8rem; color: var(--hh-ink);
  background: var(--hh-bg-alt); border-radius: var(--hh-radius); padding: .45rem .6rem; }
.hh-sku-zoom-calls a:hover { background: var(--hh-brand); color: #fff; }
/* touch: opens on tap and there is no "hover out" to dismiss it with, so the
   things you have to hit are made finger-sized */
@media (hover: none) {
  .hh-sku-row--zoom { cursor: pointer; }
  .hh-sku-zoom-price { padding: .5rem 0; font-size: .88rem; }
  .hh-sku-zoom-calls a { padding: .7rem .75rem; font-size: .88rem; }
}
.hh-sku tbody tr:hover { background: var(--hh-bg-alt); }
.hh-sku tbody tr:last-child th, .hh-sku tbody tr:last-child td { border-bottom: 0; }
.hh-sku-empty { padding: var(--hh-s-5); background: #fff; border: 1px dashed var(--hh-line);
  border-radius: var(--hh-radius-lg); color: var(--hh-muted); text-align: center; }
.hh-sku-empty b { color: var(--hh-brand); }

.hh-detail-specs { display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.8rem, 4vw, var(--hh-s-7)); align-items: start; }
.hh-detail-spectable { margin: 0; border-top: 1px solid var(--hh-line); }
.hh-detail-spectable div { display: flex; justify-content: space-between; gap: var(--hh-s-4);
  padding: .8rem 0; border-bottom: 1px solid var(--hh-line-soft); font-size: .9rem; }
.hh-detail-spectable dt { color: var(--hh-muted); }
.hh-detail-spectable dd { margin: 0; font-weight: 600; color: var(--hh-ink); text-align: right; }

/* ---------- 9. Solution cards ---------- */
.hh-solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hh-s-5); }
.hh-sol {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hh-line); border-radius: var(--hh-radius-lg);
  overflow: hidden; transition: transform .35s var(--hh-ease), box-shadow .35s var(--hh-ease);
}
.hh-sol:hover { transform: translateY(-6px); box-shadow: var(--hh-shadow-md); }
.hh-sol-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.hh-sol-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hh-ease); }
.hh-sol:hover .hh-sol-media img { transform: scale(1.07); }
.hh-sol-num {
  position: absolute; left: 0; top: 0; background: var(--hh-brand); color: #fff;
  font-family: var(--hh-display); font-size: .9rem; letter-spacing: .1em;
  padding: .4rem .8rem;
}
.hh-sol-body { padding: var(--hh-s-5); display: flex; flex-direction: column; flex: 1; }
.hh-sol-body p { margin-top: var(--hh-s-3); font-size: .94rem; color: var(--hh-muted); }
.hh-sol-tags { margin-top: var(--hh-s-4); display: flex; flex-wrap: wrap; gap: .4rem; }
.hh-sol-tags a { font: inherit; font-size: .74rem; padding: .25rem .6rem; border-radius: 999px;
  background: var(--hh-bg-alt); color: var(--hh-slate); border: 1px solid var(--hh-line);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.hh-sol-tags a:hover, .hh-sol-tags a:focus-visible { background: var(--hh-brand);
  color: #fff; border-color: var(--hh-brand); }
.hh-sol-link { margin-top: var(--hh-s-5); font-family: var(--hh-display); font-size: .86rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--hh-brand);
  display: inline-flex; align-items: center; gap: .5rem; }
.hh-sol-link svg { width: 15px; transition: transform .25s var(--hh-ease); }
.hh-sol:hover .hh-sol-link svg { transform: translateX(5px); }

/* ---------- 10. Catalogue toolbar ---------- */
.hh-toolbar { display: flex; flex-wrap: wrap; gap: var(--hh-s-4);
  align-items: center; justify-content: center; margin-bottom: var(--hh-s-6); }
.hh-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hh-filter {
  font-family: var(--hh-display); font-size: .85rem; letter-spacing: .09em;
  text-transform: uppercase; padding: .58rem 1.05rem; border-radius: var(--hh-radius);
  border: 1px solid var(--hh-line); color: var(--hh-slate); background: #fff;
  transition: all .22s var(--hh-ease); display: inline-flex; align-items: center; gap: .45rem;
}
.hh-filter b { font-weight: 500; font-size: .74rem; color: var(--hh-muted); }
.hh-filter:hover { border-color: var(--hh-ink); color: var(--hh-ink); }
.hh-filter.is-active { background: var(--hh-ink); border-color: var(--hh-ink); color: #fff; }
.hh-filter.is-active b { color: rgba(255,255,255,.6); }

.hh-search { position: relative; flex: none; min-width: 260px; }
.hh-search input {
  width: 100%; padding: .72rem 1rem .72rem 2.6rem; font-size: .92rem;
  border: 1px solid var(--hh-line); border-radius: var(--hh-radius); background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.hh-search input:focus { outline: 0; border-color: var(--hh-brand);
  box-shadow: 0 0 0 3px rgba(241,90,41,.14); }
.hh-search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 17px; color: var(--hh-muted); }

/* ---------- 11. Product grid ---------- */
.hh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: var(--hh-s-5); }

.hh-card {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: #fff; border: 1px solid var(--hh-line); border-radius: var(--hh-radius-lg);
  overflow: hidden; transition: transform .32s var(--hh-ease), box-shadow .32s var(--hh-ease), border-color .32s;
}
.hh-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--hh-brand); transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--hh-ease);
}
.hh-card:hover { transform: translateY(-6px); box-shadow: var(--hh-shadow-md); border-color: transparent; }
.hh-card:hover::after { transform: scaleX(1); }
.hh-card:focus-visible { outline: 2px solid var(--hh-brand); outline-offset: 3px; }

.hh-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--hh-bg-alt); }
.hh-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--hh-ease); }
.hh-card:hover .hh-card-media img { transform: scale(1.08); }
.hh-card-flag {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  background: rgba(22,28,32,.82); backdrop-filter: blur(4px); color: #fff;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
}
.hh-card-flag--hot { background: var(--hh-brand); }

.hh-card-body { padding: var(--hh-s-5) var(--hh-s-5) var(--hh-s-4); display: flex; flex-direction: column; flex: 1; }
.hh-card-cat { font-family: var(--hh-display); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hh-brand); }
.hh-card h3 { margin-top: .45rem; font-size: 1.06rem; line-height: 1.22; }
.hh-card-desc { margin-top: .6rem; font-size: .875rem; color: var(--hh-muted); line-height: 1.55; flex: 1; }

.hh-card-specs { margin-top: var(--hh-s-4); padding-top: var(--hh-s-4); border-top: 1px dashed var(--hh-line);
  display: grid; gap: .4rem; }
.hh-card-specs div { display: flex; justify-content: space-between; gap: var(--hh-s-3); font-size: .8rem; }
.hh-card-specs dt { color: var(--hh-muted); }
.hh-card-specs dd { margin: 0; color: var(--hh-ink); font-weight: 600; text-align: right; }

.hh-card-foot { margin-top: var(--hh-s-4); display: flex; align-items: center;
  justify-content: space-between; gap: var(--hh-s-3); }
.hh-card-more { font-family: var(--hh-display); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hh-ink); display: inline-flex; align-items: center; gap: .4rem; }
.hh-card-more svg { width: 14px; transition: transform .25s var(--hh-ease); }
.hh-card:hover .hh-card-more svg { transform: translateX(4px); }
.hh-card-origin { font-size: .76rem; color: var(--hh-muted); }

.hh-empty { grid-column: 1/-1; text-align: center; padding: var(--hh-s-8) var(--hh-s-4); color: var(--hh-muted); }
.hh-empty strong { display: block; font-family: var(--hh-display); font-size: 1.3rem;
  color: var(--hh-ink); text-transform: uppercase; margin-bottom: .5rem; }

/* ---------- 12. Space matcher ---------- */
.hh-spaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hh-s-4); }
.hh-space {
  display: flex; flex-direction: column; gap: .55rem; text-align: left;
  padding: var(--hh-s-5); background: #fff; border: 1px solid var(--hh-line);
  border-radius: var(--hh-radius-lg); transition: all .28s var(--hh-ease);
}
.hh-space:hover { border-color: var(--hh-brand); transform: translateY(-4px); box-shadow: var(--hh-shadow-sm); }
.hh-space-ico { width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--hh-radius); background: var(--hh-brand-soft); color: var(--hh-brand); }
.hh-space-ico svg { width: 21px; }
.hh-space strong { font-family: var(--hh-display); font-size: 1rem; text-transform: uppercase;
  color: var(--hh-ink); letter-spacing: .02em; }
.hh-space span { font-size: .84rem; color: var(--hh-muted); line-height: 1.5; }
.hh-space em { font-style: normal; font-size: .78rem; color: var(--hh-brand); font-weight: 600; margin-top: .2rem; }

/* ---------- 13. Comparison table ---------- */
.hh-table-scroll { overflow-x: auto; border: 1px solid var(--hh-line);
  border-radius: var(--hh-radius-lg); background: #fff; }
.hh-cmp { min-width: 780px; font-size: .9rem; }
.hh-cmp th, .hh-cmp td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--hh-line-soft); }
.hh-cmp thead th {
  background: var(--hh-ink); color: #fff; font-family: var(--hh-display); font-weight: 500;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  position: sticky; top: 0;
}
.hh-cmp tbody th { font-family: var(--hh-body); font-weight: 600; color: var(--hh-ink); }
.hh-cmp tbody tr:hover { background: var(--hh-bg-alt); }
.hh-cmp tbody tr:last-child th, .hh-cmp tbody tr:last-child td { border-bottom: 0; }
.hh-pill { display: inline-block; font-size: .74rem; font-weight: 600; padding: .2rem .6rem;
  border-radius: 999px; background: var(--hh-brand-soft); color: var(--hh-brand-deep); }
.hh-cmp small { display: block; color: var(--hh-muted); font-weight: 400; font-size: .78rem; margin-top: .15rem; }

/* ---------- 14. Process ---------- */
.hh-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hh-s-5); }
.hh-step { position: relative; padding-top: var(--hh-s-5); border-top: 2px solid rgba(255,255,255,.16); }
.hh-step-num {
  font-family: var(--hh-display); font-size: 2.6rem; font-weight: 700;
  color: var(--hh-brand); line-height: 1; display: block; margin-bottom: var(--hh-s-3);
}
.hh-step h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.hh-step p { font-size: .9rem; color: #93a0a7; }

/* ---------- 15. Projects ---------- */
.hh-projects { display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 210px; gap: var(--hh-s-4); }
.hh-proj { position: relative; overflow: hidden; border-radius: var(--hh-radius-lg); }
.hh-proj:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.hh-proj:nth-child(4) { grid-column: span 2; }
.hh-proj img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hh-ease); }
.hh-proj:hover img { transform: scale(1.06); }
.hh-proj .hh-proj-cap {
  position: absolute; inset: auto 0 0 0; padding: var(--hh-s-5) var(--hh-s-4) var(--hh-s-4);
  background: linear-gradient(to top, rgba(10,14,16,.92), rgba(10,14,16,0));
  color: #fff;
}
.hh-proj .hh-proj-cap strong { display: block; font-family: var(--hh-display); font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .15rem; }
.hh-proj .hh-proj-cap span { font-size: .8rem; color: #b9c3c8; display: block; }
.hh-proj { cursor: pointer; }
.hh-proj:focus-visible { outline: 2px solid var(--hh-brand); outline-offset: 3px; }

/* centred "see all" link under a grid */
.hh-sec-more { margin-top: clamp(2rem, 4vw, var(--hh-s-7)); text-align: center; }

/* project card reuses .card; its spec values can be long */
.hh-pcard .hh-card-specs dd { text-align: right; max-width: 62%; }
.hh-pcard .hh-card-flag { background: rgba(22,28,32,.82); }

/* ---------- 16. CTA + form ---------- */
.hh-cta { position: relative; background: var(--hh-ink); color: #b9c3c8; overflow: hidden; }
.hh-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 15% 20%, rgba(241,90,41,.22), transparent 60%);
}
.hh-cta .hh-wrap { position: relative; z-index: 2; display: grid;
  grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, var(--hh-s-8)); align-items: center; }
.hh-cta h2 { color: #fff; }
.hh-cta-list { margin-top: var(--hh-s-5); display: grid; gap: .7rem; }
.hh-cta-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; }
.hh-cta-list svg { width: 19px; flex: none; color: var(--hh-brand); margin-top: 2px; }
.hh-cta-phone { margin-top: var(--hh-s-6); display: flex; flex-wrap: wrap; gap: var(--hh-s-5); }
.hh-cta-phone div { line-height: 1.3; }
.hh-cta-phone span { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: #7f8b92; }
.hh-cta-phone a { display: block; font-family: var(--hh-display); font-size: 1.55rem; color: #fff; }
.hh-cta-phone a:hover { color: var(--hh-brand); }

.hh-form { background: #fff; border-radius: var(--hh-radius-lg); padding: clamp(1.5rem, 3vw, var(--hh-s-6));
  box-shadow: var(--hh-shadow-lg); }
.hh-form h3 { font-size: 1.3rem; }
.hh-form > p { font-size: .88rem; color: var(--hh-muted); margin-top: .4rem; }
.hh-form-grid { margin-top: var(--hh-s-5); display: grid; gap: var(--hh-s-4); }
.hh-field { display: grid; gap: .4rem; }
.hh-field label { font-size: .8rem; font-weight: 600; color: var(--hh-ink); }
.hh-field label i { color: var(--hh-brand); font-style: normal; }
.hh-field input, .hh-field select, .hh-field textarea {
  padding: .78rem .95rem; border: 1px solid var(--hh-line); border-radius: var(--hh-radius);
  background: #fff; font-size: .93rem; transition: border-color .2s, box-shadow .2s;
}
.hh-field textarea { resize: vertical; min-height: 84px; }
.hh-field input:focus, .hh-field select:focus, .hh-field textarea:focus {
  outline: 0; border-color: var(--hh-brand); box-shadow: 0 0 0 3px rgba(241,90,41,.14); }
.hh-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hh-s-4); }
.hh-form .hh-btn { width: 100%; }
.hh-form-note { margin-top: var(--hh-s-3); font-size: .78rem; color: var(--hh-muted); text-align: center; }
.hh-form-ok { display: none; text-align: center; padding: var(--hh-s-6) var(--hh-s-4); }
.hh-form-ok svg { width: 52px; color: var(--hh-brand); margin: 0 auto var(--hh-s-4); }
.hh-form-ok h3 { margin-bottom: .5rem; }
.hh-form-ok p { font-size: .92rem; color: var(--hh-muted); }
.hh-form.is-sent .hh-form-grid, .hh-form.is-sent > h3, .hh-form.is-sent > p, .hh-form.is-sent .hh-form-note { display: none; }
.hh-form.is-sent .hh-form-ok { display: block; }

/* ---------- 17. Footer ---------- */
.hh-footer { background: #0f1417; color: #7f8b92; font-size: .88rem; padding-block: var(--hh-s-7) var(--hh-s-5); }
.hh-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--hh-s-6); }
.hh-footer h4 { font-size: .85rem; letter-spacing: .16em; color: #fff; margin-bottom: var(--hh-s-4); }
.hh-footer li + li { margin-top: .55rem; }
.hh-footer a:hover { color: var(--hh-brand); }
/* the mark is 87% navy, so it needs a light plate on the dark footer */
.hh-footer-logo { display: inline-block; background: #fff; padding: .6rem .85rem;
  border-radius: var(--hh-radius); margin-bottom: var(--hh-s-4); }
.hh-footer-logo img { height: 38px; width: auto; display: block; }
.hh-footer-bottom { margin-top: var(--hh-s-6); padding-top: var(--hh-s-4);
  border-top: 1px solid rgba(255,255,255,.09); display: flex; flex-wrap: wrap;
  gap: var(--hh-s-3); justify-content: space-between; font-size: .8rem; }

/* ---------- 19. Floating hotline ---------- */
.hh-fab { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: grid; gap: .55rem; }
.hh-fab a {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hh-brand); color: #fff; box-shadow: var(--hh-shadow-md);
  transition: transform .22s var(--hh-ease);
}
.hh-fab a:nth-child(2) { background: var(--hh-ink); }
.hh-fab a:hover { transform: scale(1.09); }
.hh-fab svg { width: 22px; }
.hh-fab a:first-child::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--hh-brand); animation: hhPing 1.9s var(--hh-ease) infinite;
}
@keyframes hhPing { to { transform: scale(1.65); opacity: 0 } }
.hh-fab a { position: relative; }

/* ---------- 20. Scroll reveal ---------- */
.hh-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--hh-ease), transform .7s var(--hh-ease); }
.hh-reveal.is-in { opacity: 1; transform: none; }
.hh-reveal[data-d="1"] { transition-delay: .08s } .hh-reveal[data-d="2"] { transition-delay: .16s }
.hh-reveal[data-d="3"] { transition-delay: .24s } .hh-reveal[data-d="4"] { transition-delay: .32s }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1080px) {
  .hh-spaces { grid-template-columns: repeat(2, 1fr); }
  .hh-steps  { grid-template-columns: repeat(2, 1fr); }
  .hh-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  .hh-hero-slide .hh-wrap, .hh-cta .hh-wrap { grid-template-columns: 1fr; }
  .hh-hero-art { max-width: 460px; order: -1; width: 100%; }
  .hh-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hh-hero-count { display: none; }
  .hh-solutions { grid-template-columns: 1fr; }
  .hh-about-grid { grid-template-columns: 1fr; }
  .hh-detail-top, .hh-detail-specs { grid-template-columns: 1fr; }
  .hh-detail-media img { aspect-ratio: 16/10; }
  .hh-best { grid-template-columns: 1fr; }
  .hh-best:nth-child(even) .hh-best-media { order: 0; }
  .hh-best-media { min-height: 0; aspect-ratio: 16 / 10; }
  .hh-bgal-nav { opacity: 1; width: 34px; height: 34px;
              background: rgba(255,255,255,.82); }
  .hh-best-body,
  .hh-best:nth-child(even) .hh-best-body { padding: 0 var(--hh-s-5) var(--hh-s-5); }
  .hh-about-banner img { aspect-ratio: 16 / 9; }
  /* stacked: image keeps its size, the text pane takes the rest and scrolls */
  .hh-projects { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .hh-proj:nth-child(1) { grid-column: span 2; }
  .hh-proj:nth-child(4) { grid-column: span 2; }

}
@media (max-width: 620px) {
  /* number above label, two per row -- not crammed onto one line */
  .hh-hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--hh-s-5) var(--hh-s-4); }
  .hh-hero-stats > div { display: block; }
  .hh-hero-stats dt { font-size: 1.75rem; }
  .hh-hero-stats dd { margin-top: .35rem; max-width: none; font-size: .78rem; line-height: 1.4; }
  .hh-hero-dot { width: 34px; }
  .hh-hero-cta { display: grid; gap: var(--hh-s-3); }
  .hh-hero-cta .hh-btn { width: 100%; }
  .hh-best-specs { grid-template-columns: 1fr; }
  .hh-best-cta { display: grid; }
  .hh-best-cta .hh-btn { width: 100%; }
  .hh-detail-meta { grid-template-columns: 1fr; gap: var(--hh-s-3); }
  .hh-detail-meta > div { display: flex; align-items: baseline;
    justify-content: space-between; gap: .7rem; }
  .hh-detail-meta dd { margin-top: 0; }
  .hh-detail-cta { display: grid; }
  .hh-detail-cta .hh-btn { width: 100%; }
  .hh-best-more { text-align: center; }
  .hh-hero-slide .hh-wrap { align-items: start; }
  .hh-band .hh-wrap, .hh-band-cta { display: grid; }
  .hh-band-cta .hh-btn { width: 100%; }
  .hh-spaces, .hh-steps, .hh-footer-grid, .hh-form-row { grid-template-columns: 1fr; }
  .hh-about-facts { gap: 0; }
  .hh-about-facts > div { display: block; padding-block: var(--hh-s-4); }
  .hh-about-facts > div + div { border-top: 1px solid var(--hh-line); }
  .hh-about-facts dt { font-size: 1.6rem; }
  .hh-about-facts dd { margin-top: .25rem; }
  .hh-about-banner img { aspect-ratio: 4 / 3; }
  .hh-projects { grid-template-columns: 1fr; }
  .hh-proj:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .hh-search { min-width: 100%; }
  .hh-grid { grid-template-columns: 1fr; }
  .hh-toolbar { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .hh-reveal { opacity: 1; transform: none; }
  .hh-hero-slide .hh-anim, .hh-hero-art figure, .hh-hero-badge { opacity: 1; transform: none; }
  .hh-hero-dot.is-active i { animation: none; transform: scaleX(1); }
}

/* ---------- 22. Mobile refinements ---------- */
/* the 780px comparison table must restack on tablets as well */
@media (max-width: 880px) {
  /* the comparison table stops being a table and becomes cards */
  .hh-table-scroll { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .hh-cmp { min-width: 0; display: block; }
  .hh-cmp thead { display: none; }
  .hh-cmp tbody, .hh-cmp tr, .hh-cmp th, .hh-cmp td { display: block; width: 100%; }
  .hh-cmp tbody tr {
    background: #fff; border: 1px solid var(--hh-line); border-radius: var(--hh-radius-lg);
    padding: var(--hh-s-4) var(--hh-s-5) var(--hh-s-3); margin-bottom: var(--hh-s-4);
  }
  .hh-cmp tbody tr:hover { background: #fff; }
  .hh-cmp tbody th {
    border: 0; padding: 0 0 var(--hh-s-3); font-size: 1.05rem; color: var(--hh-ink);
    border-bottom: 2px solid var(--hh-brand); margin-bottom: var(--hh-s-3);
  }
  .hh-cmp tbody td {
    border: 0; padding: .5rem 0; display: flex; gap: var(--hh-s-4);
    align-items: baseline; justify-content: space-between;
    border-bottom: 1px dashed var(--hh-line-soft); text-align: right;
  }
  .hh-cmp tbody tr td:last-child { border-bottom: 0; }

  .hh-sku { min-width: 0; display: block; }
  .hh-sku thead { display: none; }
  .hh-sku tbody, .hh-sku tr, .hh-sku th, .hh-sku td { display: block; width: 100%; }
  .hh-sku tbody tr { background: #fff; border: 1px solid var(--hh-line);
    border-radius: var(--hh-radius-lg); padding: var(--hh-s-4) var(--hh-s-5) var(--hh-s-3);
    margin-bottom: var(--hh-s-4); }
  .hh-sku tbody tr:hover { background: #fff; }
  .hh-sku tbody th { border: 0; padding: 0 0 var(--hh-s-4); font-size: 1.02rem;
    border-bottom: 2px solid var(--hh-brand); margin-bottom: var(--hh-s-3); }
  .hh-sku tbody th .hh-sku-code { flex-direction: column; align-items: center;
    gap: .6rem; text-align: center; }
  .hh-sku-chip { width: 132px; height: 132px; }
  .hh-sku tbody td { border: 0; padding: .38rem 0; display: flex; gap: var(--hh-s-4);
    align-items: baseline; justify-content: space-between; text-align: right;
    font-size: .84rem; border-bottom: 1px dashed var(--hh-line-soft); }
  .hh-sku tbody tr td:last-child { border-bottom: 0; }
  .hh-sku tbody td::before { content: attr(data-l); flex: none; text-align: left;
    color: var(--hh-muted); font-weight: 500; font-size: .76rem; }
  .hh-cmp tbody td::before {
    content: attr(data-l); flex: none; text-align: left;
    color: var(--hh-muted); font-weight: 500; font-size: .82rem;
  }
}

@media (max-width: 760px) {
  /* hero was 1246px tall on an 844px screen */
  .hh-hero-slide .hh-wrap { padding-block: var(--hh-s-6) var(--hh-s-5); gap: var(--hh-s-5); }
  .hh-hero-art { max-width: 330px; }
  .hh-hero-lead { margin-top: var(--hh-s-4); font-size: 1rem; }
  .hh-hero-cta { margin-top: var(--hh-s-5); }
  .hh-hero-ctrl .hh-wrap { padding-bottom: var(--hh-s-4); }

  /* touch targets */
    .hh-footer li a, .hh-crumb a { display: inline-block; padding-block: .7rem; }
  .hh-cta-phone a { padding-block: .4rem; }

  /* brand names in a tidy 2-up grid instead of a ragged centred wrap */
  .hh-brands .hh-wrap { gap: var(--hh-s-5); }
  .hh-brands-list {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0; width: 100%; justify-content: stretch;
  }
  .hh-brands-list li {
    font-size: 1rem; text-align: center; padding: .7rem .3rem;
    border-bottom: 1px solid var(--hh-line-soft);
  }
  .hh-brands-list li:nth-child(odd) { border-right: 1px solid var(--hh-line-soft); }
  .hh-brands-list li:nth-last-child(-n+2) { border-bottom: 0; }

  /* company line: tighter so it reads as one tidy strip */

  .hh-sol-link { padding-block: .6rem; }

  /* nothing below 12px on a phone */
  .hh-card-flag { font-size: .75rem; padding: .3rem .65rem; }
  .hh-card-cat  { font-size: .78rem; }
  .hh-pill      { font-size: .78rem; }
  .hh-card-specs div, .hh-card-desc { font-size: .88rem; }

  /* shorter cards -> less endless scrolling */
  .hh-card-media { aspect-ratio: 16 / 10; }
  .hh-card-body { padding: var(--hh-s-4) var(--hh-s-4) var(--hh-s-3); }

  /* project tiles: a 180px tile left almost no room for the photo */
  .hh-projects { grid-auto-rows: auto; }
  .hh-proj { aspect-ratio: 4 / 3; }
  .hh-proj .hh-proj-cap { padding: var(--hh-s-6) var(--hh-s-4) var(--hh-s-4); }

  /* the hero badge was covering 61% of the collage width */
  .hh-hero-badge { max-width: 150px; padding: .6rem .8rem; right: 0; bottom: 2%; }
  .hh-hero-badge strong { font-size: 1.2rem; }
  .hh-hero-badge span { font-size: .76rem; }

  /* nothing under 12px */
  .hh-sol-tags a { font-size: .78rem; }
  .hh-proj .hh-proj-cap span { font-size: .82rem; }
}

/* ============================================================
   WordPress / Flatsome integration
   ============================================================ */

/* ---------- Contact Form 7 ----------
   CF7 renders its own control markup, so the demo's form styling is
   re-pointed at CF7's classes rather than re-created. */
.hh-form .wpcf7-form-control-wrap { display: block; }
.hh-form .hh-field input[type=text],
.hh-form .hh-field input[type=tel],
.hh-form .hh-field input[type=email],
.hh-form .hh-field input[type=number],
.hh-form .hh-field select,
.hh-form .hh-field textarea {
  width: 100%; margin: 0; padding: 0 .95rem;
  height: 46px;                        /* explicit: vertical padding clips <select> in Flatsome */
  border: 1px solid var(--hh-line); border-radius: var(--hh-radius);
  background: #fff; color: var(--hh-ink); font-size: .93rem; box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
.hh-form .hh-field textarea { height: auto; min-height: 84px; padding: .78rem .95rem; resize: vertical; }
.hh-form .hh-field input:focus,
.hh-form .hh-field select:focus,
.hh-form .hh-field textarea:focus {
  outline: 0; border-color: var(--hh-brand); box-shadow: 0 0 0 3px rgba(241,90,41,.14);
}
.hh-form .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  font-family: var(--hh-display); font-weight: 500; font-size: .95rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .95rem 1.7rem; min-height: 0; line-height: 1.2;
  border-radius: var(--hh-radius); border: 2px solid var(--hh-brand);
  background-color: var(--hh-brand); color: #fff; text-shadow: none;
  transition: all .25s var(--hh-ease);
}
.hh-form .wpcf7-submit:hover {
  background-color: var(--hh-brand-deep); border-color: var(--hh-brand-deep);
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(241,90,41,.34);
}
.hh-form .wpcf7-spinner { margin: .6rem auto 0; display: block; }
.hh-form .wpcf7-not-valid-tip { font-size: .76rem; color: var(--hh-brand-deep); margin-top: .25rem; }
.hh-form .wpcf7-response-output {
  margin: var(--hh-s-4) 0 0 !important; padding: .8rem 1rem !important;
  border-radius: var(--hh-radius); font-size: .85rem; line-height: 1.5;
  border: 1px solid var(--hh-line) !important;
}
.hh-form form.sent .wpcf7-response-output {
  border-color: var(--hh-brand) !important; background: var(--hh-brand-soft); color: var(--hh-brand-deep);
}
.hh-form .hh-field { margin-bottom: 0; }
.hh-form p { margin: 0; }

/* ---------- Catalogue / project filters ---------- */
.hh-grid > .hh-card { text-align: left; }
.hh-card { color: inherit; }
.hh-sec-more { margin-top: clamp(2rem, 4vw, var(--hh-s-7)); text-align: center; }
.hh-empty { grid-column: 1/-1; }

/* ---------- Footer block ---------- */
.hh-footer { margin: 0; }
.hh-footer .hh-wrap { max-width: var(--hh-wrap); }

/* ---------- Floating hotline ---------- */
.hh-fab { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: grid; gap: .55rem; }

/* ---------- Scroll reveal: never hide content in the builder ----------
   UX Builder rebuilds the DOM on every edit, so nodes created after the
   IntersectionObserver was wired never get observed and would stay at
   opacity:0 — a blank canvas with a correct options panel. The JS adds
   `.is-in` immediately inside the builder iframe; this is the CSS half of
   the same guard, so a stale cache on either side still renders. */
.hh-reveal { will-change: opacity, transform; }

/* ---------- Flatsome layout fixes ---------- */
/* Flatsome's page.php wraps content in .row.row-main, which would stop our
   full-bleed bands reaching the viewport edge. Pages use page-blank.php
   instead; this keeps any stray wrapper from re-introducing a gutter. */
.hh-fullbleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Our grids must keep Flatsome's centring (`.row { margin: 0 auto }`). */
.hh-wrap { margin-left: auto; margin-right: auto; }

/* ---------- Additions for the WordPress port ---------- */

/* Headings break on a "|" typed in the element's own field: each part is an
   inline <span> the editor never rewrites, unlike a <br> which becomes
   </p><p> on the first builder save and tears the heading in half. */
.hh-brk > span { display: block; }
.hh h1.hh-brk > a { display: block; }
.hh h1.hh-brk > a > span { display: block; }
.hh-hero h1 em, .hh h2.hh-brk em { font-style: normal; color: var(--hh-brand); }

/* Left-aligned section head (the catalogue's split variant) */
.hh-sec-head--left { margin-inline: 0; text-align: left; max-width: none; }
.hh-sec-head--left h2 { margin-inline: 0; }
.hh-sec-head--left p  { margin-inline: 0; }

/* Project tile is an <a> wrapping the image and caption */
.hh-proj { display: block; }
.hh-proj .hh-proj-cap {
  position: absolute; inset: auto 0 0 0; padding: var(--hh-s-5) var(--hh-s-4) var(--hh-s-4);
  background: linear-gradient(to top, rgba(10,14,16,.92), rgba(10,14,16,0));
  color: #fff; display: block;
}
.hh-proj img { width: 100%; height: 100%; object-fit: cover; }

/* Cards are links now (the demo used <button> + a JS modal), so they need the
   reset a <button> got for free. */
.hh-card, .hh-space { color: inherit; text-decoration: none; }
.hh-card[hidden], .hh-pcard[hidden] { display: none !important; }

/* Filter chips are real <button>s — reset Flatsome's inflation explicitly. */
.hh-filter { min-height: 0; line-height: 1.2; }

/* Best-seller block with no product chosen yet */
.hh-best--empty { padding: var(--hh-s-5); border: 1px dashed var(--hh-line);
  border-radius: var(--hh-radius-lg); color: var(--hh-muted); text-align: center; }

/* Empty state is toggled with [hidden] by the filter script */
.hh-empty[hidden] { display: none !important; }

/* ---------- Product / project detail page ----------
   The demo carried these on its quick-view modal (.modal-benefits,
   .modal-apps); the detail page reuses the same visual treatment, so they
   keep the styling under a name that describes where they actually live. */
.hh-detail-side { min-width: 0; }

.hh-benefits { margin-top: var(--hh-s-3); display: grid; gap: .55rem; }
.hh-benefits li { display: flex; gap: .6rem; align-items: flex-start;
  font-size: .89rem; color: var(--hh-slate); line-height: 1.55; }
.hh-benefits svg { width: 16px; flex: none; color: var(--hh-brand); margin-top: 3px; }

.hh-apps { margin-top: var(--hh-s-3); display: flex; flex-wrap: wrap; gap: .4rem; }
.hh-apps span { font-size: .76rem; padding: .3rem .7rem; border-radius: 999px;
  background: var(--hh-brand-soft); color: var(--hh-brand-deep); font-weight: 500; }

/* h2 used where the demo had an h3, so the page keeps one heading level per
   rank; the visual weight is unchanged. */
.hh h2.hh-detail-h { font-size: .82rem; }

/* ---------- Contact column ---------- */
.hh-cta-info { min-width: 0; }
.hh-cta-info h2 { color: #fff; }

/* ---------- Footer pieces ---------- */
.hh-fbrand p { font-size: .88rem; line-height: 1.6; }
.hh-fcol h4 { font-size: .85rem; letter-spacing: .16em; color: #fff; margin-bottom: var(--hh-s-4); }
.hh-fcol li + li { margin-top: .55rem; }
.hh-fcol a:hover { color: var(--hh-brand); }

/* ---------- Inside a Flatsome dark section ----------
   Flatsome's dark="true" colours its own markup, but our scoped reset sets an
   explicit ink colour on headings, which would win. Restore the demo's dark
   treatment for elements placed in a dark section. */
.dark .hh, .hh-section--dark .hh { color: #b9c3c8; }
.dark .hh h1, .dark .hh h2, .dark .hh h3, .dark .hh h4,
.hh-section--dark .hh h1, .hh-section--dark .hh h2,
.hh-section--dark .hh h3, .hh-section--dark .hh h4 { color: #fff; }
.dark .hh-sec-head p, .hh-section--dark .hh-sec-head p { color: #93a0a7; }
.dark .hh-step p { color: #93a0a7; }
.dark .hh-btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.dark .hh-btn--ghost:hover { background: #fff; color: var(--hh-ink); border-color: #fff; }

/* ---------- Flatsome's <button> box, measured ----------
   Flatsome gives every bare <button> `padding: 0 1.2em` and
   `margin: 0 16px 16px 0`. Because these controls are sized explicitly and
   box-sizing is border-box, the padding sets a floor the declared width
   cannot go below: a 34px slider dot computed to 38.4px and the row of them
   pushed the hero's next-arrow off a 360px screen. Reset both on every
   control whose size is exact. */
.hh-hero-arrow, .hh-hero-dot, .hh-bgal-nav, .hh-bgal-dot,
.hh-sku-zoom-close, .hh-sku-zoom-price { padding: 0; margin: 0; }
/* the chips set their own padding; they only need the stray margin removed */
.hh-filter { margin: 0; }
/* restore the one margin the demo actually wanted */
.hh-sku-zoom-price { margin-top: .65rem; }

/* ---------- Footer grid: the demo's collapse point ----------
   Flatsome's tablet band stops at 849px, but the demo's footer went 2-up at
   1080px. Between 850 and 1080 the four columns are too narrow, so the demo's
   breakpoint wins here — this is a content grid, not section spacing. */
@media (min-width: 850px) and (max-width: 1080px) {
  #footer .row > .col { flex-basis: 50%; max-width: 50%; }
}

/* Flatsome: `.col-inner ul li { margin-left: 1.3em }` — specificity (0,1,2),
   which outranks the scoped reset and indented every list we render inside a
   builder column: footer links under their heading, the CTA checklist, the
   benefit lists. Match that specificity; our sheet loads last, so it wins. */
.hh ul li, .hh ol li { margin-left: 0; }

/* The floating hotline is position:fixed, so at the very bottom of the page it
   sits on top of the copyright line. Reserve room for it on the narrow screens
   where the bar's text wraps under the buttons. */
@media (max-width: 849px) {
  .absolute-footer { padding-bottom: 84px; }
}