/* ==========================================================================
   Home Connect — Homepage 2026
   Loaded only on the page rendered by page-home-2026.php.
   Every class is prefixed .hc- so nothing here can collide with Hello
   Elementor, Elementor, WooCommerce or any plugin stylesheet.

   Colour rules (approved 31 Aug 2026):
     navy  = dominant brand/interface colour
     gold  = primary actions and CTAs
     red   = promo bar, Deals, SALE badges, discounted pricing, savings ONLY
   ========================================================================== */

.hc-home {
  --hc-navy: #0C1F38;
  --hc-navy-d: #081729;
  --hc-navy-m: #16324F;
  --hc-gold: #D9901B;
  --hc-gold-d: #B0710B;
  --hc-gold-l: #E9A93E;
  /* Button-surface gold. White on --hc-gold measures 2.64:1, below the 4.5:1
     needed for the 15.5px bold CTA label. These two are used ONLY where gold is
     a filled button behind white text; --hc-gold itself
	
	/* v23 mobile ecommerce QA */
@media (max-width: 620px) {
  .hc-promo .hc-wrap { min-height: 36px; padding: 4px 10px; }
  .hc-promo ul { width: 100%; justify-content: center; overflow: hidden; padding: 0; }
  .hc-promo li { display: none; }
  .hc-promo li:nth-child(2) { display: flex; padding: 0; font-size: 10.5px; letter-spacing: .035em; }
  .hc-promo li:nth-child(2)::before { display: none; }
  .hc-hdr__in { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px 12px; padding-top: 10px; padding-bottom: 12px; }
  .hc-logo img, .hc-home .hc-logo img { width: 122px; }
  .hc-acts { margin-left: auto; }
  .hc-search { grid-column: 1 / -1; order: initial; width: 100%; }
  .hc-hero__in { padding: 34px 0 92px; }
  .hc-hero h1 { font-size: 30px; }
  .hc-hero__sub { margin-top: 14px; font-size: 14.5px; l
	  @media (max-width: 620px) {
  .hc-burger { grid-column: 1; grid-row: 1; }
  .hc-logo { grid-column: 2; grid-row: 1; width: max-content; }
  .hc-acts { grid-column: 3; grid-row: 1; width: max-content; }
  .hc-search { grid-row: 2; }
}
ine-height: 1.42; }
  .hc-hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .hc-hero__cta .hc-btn { min-height: 48px; padding: 0 10px; font-size: 12px; }
  .hc-trust ul { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px; scrollbar-width: none; }
  .hc-trust ul::-webkit-scrollbar { display: none; }
  .hc-trust li { flex: 0 0 84%; min-height: 76px; padding: 13px 10px; scroll-snap-align: start; border: 0 !important; }
  .hc-trust li + li::before { display: none; }
  .hc-sec { padding: 46px 0; }
}


/* v22 owner-approved white ecommerce header */
.hc-home .hc-hdr{background:#fff;color:var(--hc-navy);border-bottom:1px solid var(--hc-line);box-shadow:0 2px 10px rgba(12,31,56,.06)}
.hc-home .hc-hdr__in{min-height:82px;padding-top:10px;padding-bottom:10px}
.hc-home .hc-logo img{width:220px;max-height:70px;object-fit:contain}
.hc-home .hc-act,.hc-home .hc-burger{color:var(--hc-navy)}
.hc-home .hc-act:hover{background:var(--hc-grey)}
.hc-home .hc-search input{border:1.5px solid #cfd6df;box-shadow:0 2px 8px rgba(12,31,56,.06)}
@media(max-width:1080px){.hc-home .hc-logo img{width:170px}}
@media(max-width:760px){.hc-home .hc-hdr__in{min-height:0}.hc-home .hc-logo img{width:145px}}
 is unchanged and still
     drives every other gold accent on the page.
       #9C6600 on #fff = 4.87:1   ·   #7F5300 on #fff = 6.69:1 (hover) */
  --hc-gold-btn: #9C6600;
  --hc-gold-btn-d: #7F5300;
  --hc-red: #C8102E;
  --hc-red-d: #A80D26;
  --hc-ink: #14202E;
  --hc-ink-2: #4A5766;
  --hc-ink-3: #77828F;
  --hc-line: #E3E6EA;
  --hc-line-2: #F0F2F5;
  --hc-grey: #F7F8FA;
  --hc-r: 5px;
  --hc-maxw: 1320px;
  --hc-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  margin: 0;
  font-family: var(--hc-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--hc-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

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

.hc-home img { max-width: 100%; display: block; height: auto; }
.hc-home a { color: inherit; text-decoration: none; }
.hc-home h1, .hc-home h2, .hc-home h3, .hc-home h4 { margin: 0; line-height: 1.12; }
.hc-home p { margin: 0; }
.hc-home ul, .hc-home ol { margin: 0; padding: 0; list-style: none; }
.hc-home button { font: inherit; }

.hc-home :focus-visible { outline: 3px solid var(--hc-gold-l); outline-offset: 2px; border-radius: 2px; }

.hc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999; background: #fff;
  color: var(--hc-navy); padding: 12px 18px; font-weight: 700; border: 2px solid var(--hc-navy);
}
.hc-skip:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .hc-home *, .hc-home *::before, .hc-home *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

.hc-wrap { max-width: var(--hc-maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .hc-wrap { padding: 0 16px; } }

.hc-draftbar {
  background: #17181A; color: #fff; font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-align: center; padding: 6px 14px;
}

/* --- Buttons ------------------------------------------------------------ */
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 56px; padding: 0 36px; border-radius: var(--hc-r);
  font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
/* Every button is an <a>, so `.hc-home a { color: inherit }` (0,1,1) outranks a
   bare `.hc-btn--x` (0,1,0) and every variant silently inherited --hc-ink —
   which rendered the navy button as navy-on-navy. Scoping the modifiers under
   .hc-home makes them (0,2,0), which wins. Background and border never had this
   problem; only `color` is affected, but the whole block is scoped so the
   variants stay readable as one set. */
.hc-home .hc-btn--gold { background: var(--hc-gold-btn); border-color: var(--hc-gold-btn); color: #fff; }
.hc-home .hc-btn--gold:hover { background: var(--hc-gold-btn-d); border-color: var(--hc-gold-btn-d); color: #fff; }
.hc-home .hc-btn--goldline { background: #fff; border-color: var(--hc-gold); color: var(--hc-gold-btn); }
.hc-home .hc-btn--goldline:hover { background: var(--hc-gold-btn); border-color: var(--hc-gold-btn); color: #fff; }
.hc-home .hc-btn--navy { background: var(--hc-navy); border-color: var(--hc-navy); color: #fff; }
.hc-home .hc-btn--navy:hover { background: var(--hc-navy-m); border-color: var(--hc-navy-m); color: #fff; }
.hc-home .hc-btn--white { background: transparent; border-color: #fff; color: #fff; }
.hc-home .hc-btn--white:hover { background: #fff; color: var(--hc-navy); }
.hc-btn--sm { min-height: 44px; padding: 0 20px; font-size: 12.5px; }

/* --- Section furniture -------------------------------------------------- */
.hc-sec { padding: 72px 0; }
.hc-sec--grey { background: var(--hc-grey); }
.hc-center { text-align: center; }
.hc-h2 {
  font-size: clamp(24px, 2.7vw, 33px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .01em; color: var(--hc-ink);
}
.hc-h2 .is-red { color: var(--hc-red); }
.hc-lede { color: var(--hc-ink-2); font-size: 16px; margin-top: 12px; max-width: 64ch; }
.hc-center .hc-lede { margin-left: auto; margin-right: auto; }
.hc-headrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 26px; flex-wrap: wrap;
}
.hc-center .hc-h2 + .hc-tiles,
.hc-center .hc-lede + .hc-steps { margin-top: 34px; }
.hc-viewall {
  font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--hc-navy); display: inline-flex; align-items: center; gap: 8px;
}
.hc-viewall:hover { color: var(--hc-gold-d); }
.hc-eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--hc-gold-l);
}

/* --- 1 · Promo bar (red) ------------------------------------------------ */
.hc-promo { background: var(--hc-red); color: #fff; }
.hc-promo .hc-wrap { display: flex; align-items: center; justify-content: center; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.hc-promo ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.hc-promo li {
  display: flex; align-items: center; gap: 9px; position: relative; padding: 0 26px;
  font-size: 13px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
}
.hc-promo li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 17px; background: rgba(255, 255, 255, .42);
}
.hc-promo svg { flex: none; }
.hc-promo em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: .01em; opacity: .94; }
@media (max-width: 1080px) { .hc-promo li { padding: 0 16px; font-size: 11.5px; } .hc-promo em { display: none; } }
@media (max-width: 700px) {
  .hc-promo .hc-wrap { padding-left: 0; padding-right: 0; }
  .hc-promo ul { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 0 16px; scrollbar-width: none; }
  .hc-promo ul::-webkit-scrollbar { display: none; }
  .hc-promo li { white-space: nowrap; padding: 0 14px; }
}

/* --- 2 · Header (navy) -------------------------------------------------- */
.hc-hdr { background: #fff; color: var(--hc-navy); border-bottom: 1px solid var(--hc-line); box-shadow: 0 2px 10px rgba(12,31,56,.06); }
/* Vertical padding as longhand only: `padding: 20px 0` is a shorthand and would
   reset .hc-wrap's `padding: 0 24px`, pushing the logo flush to the viewport
   edge on any screen narrower than the 1320px container. */
.hc-hdr__in { display: flex; align-items: center; gap: 34px; min-height: 142px; padding-top: 20px; padding-bottom: 20px; }
.hc-logo { flex: none; }
.hc-logo img { width: 210px; }
.hc-search { flex: 1; min-width: 0; max-width: 580px; position: relative; }
.hc-search input {
  width: 100%; height: 66px; border: 0; border-radius: 999px;
  padding: 0 74px 0 28px; font-size: 16px; color: var(--hc-ink); background: #fff;
}
.hc-search input::placeholder { color: #98A2AE; }
.hc-search input:focus { outline: none; box-shadow: 0 0 0 3px var(--hc-gold-l); }
.hc-search__go {
  position: absolute; right: 8px; top: 8px; width: 50px; height: 50px;
  border: 0; background: transparent; color: var(--hc-navy);
  border-radius: 50%; cursor: pointer; display: grid; place-items: center;
}
.hc-search__go:hover { background: var(--hc-line-2); }
.hc-acts { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.hc-act {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: var(--hc-r); font-size: 12px; font-weight: 600;
  color: var(--hc-navy); position: relative; min-width: 60px;
}
.hc-act:hover { background: var(--hc-grey); }
.hc-act__count {
  position: absolute; top: -1px; right: 4px; background: var(--hc-gold);
  color: var(--hc-navy-d); font-size: 10.5px; font-weight: 800; line-height: 1;
  min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px;
}
.hc-act__count[hidden] { display: none; }
.hc-burger { display: none; background: none; border: 0; color: var(--hc-navy); padding: 9px; border-radius: var(--hc-r); cursor: pointer; }
.hc-burger:hover { background: rgba(255, 255, 255, .10); }

/* --- 3 · Primary nav ---------------------------------------------------- */
.hc-nav { background: #fff; border-bottom: 1px solid var(--hc-line); }
.hc-nav ul { display: flex; justify-content: center; flex-wrap: wrap; }
.hc-nav li { position: relative; }
.hc-nav__top {
  display: flex; align-items: center; gap: 7px; padding: 25px 32px;
  font-size: 16px; font-weight: 700; color: var(--hc-navy); border-bottom: 3px solid transparent;
}
.hc-nav__top:hover, .hc-nav li:focus-within .hc-nav__top { color: var(--hc-gold-d); border-bottom-color: var(--hc-gold); }
.hc-nav__top.is-red { color: var(--hc-red); }
.hc-nav__top.is-red:hover { color: var(--hc-red-d); border-bottom-color: var(--hc-red); }
.hc-drop {
  position: absolute; left: 0; top: 100%; z-index: 40; background: #fff;
  border: 1px solid var(--hc-line); border-top: 3px solid var(--hc-gold);
  box-shadow: 0 12px 30px rgba(12, 31, 56, .13); min-width: 272px; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(5px); transition: .14s;
}
.hc-nav li:hover .hc-drop, .hc-nav li:focus-within .hc-drop { opacity: 1; visibility: visible; transform: none; }
.hc-drop a { display: block; padding: 9px 13px; font-size: 14.5px; color: var(--hc-ink-2); border-radius: 4px; }
.hc-drop a:hover { background: var(--hc-grey); color: var(--hc-navy); }

@media (max-width: 1080px) {
  .hc-hdr__in { gap: 16px; min-height: 84px; padding-top: 14px; padding-bottom: 14px; }
  .hc-logo img { width: 158px; }
  .hc-search input { height: 54px; padding-right: 62px; }
  .hc-search__go { width: 42px; height: 42px; right: 6px; top: 6px; }
  .hc-nav { display: none; }
  .hc-burger { display: grid; }
  .hc-act--hide-sm { display: none; }
}
@media (max-width: 760px) {
  .hc-hdr__in { flex-wrap: wrap; padding-bottom: 14px; min-height: 0; }
  .hc-logo img { width: 138px; }
  .hc-search { order: 3; flex-basis: 100%; max-width: none; }
  .hc-search input { height: 48px; padding: 0 54px 0 20px; }
  .hc-search__go { width: 38px; height: 38px; right: 5px; top: 5px; }
}

/* --- Mobile drawer ------------------------------------------------------ */
.hc-scrim { position: fixed; inset: 0; background: rgba(8, 23, 41, .55); z-index: 80; opacity: 0; visibility: hidden; transition: .2s; }
.hc-scrim.is-on { opacity: 1; visibility: visible; }
.hc-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(87vw, 350px); background: #fff;
  z-index: 90; transform: translateX(-100%); transition: transform .22s ease;
  display: flex; flex-direction: column; overflow: auto;
}
.hc-drawer.is-open { transform: none; }
.hc-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--hc-navy); position: sticky; top: 0; }
.hc-drawer__top img { width: 126px; }
.hc-drawer__top button { background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.hc-drawer__row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 54px; padding: 15px 18px; font-size: 16px; font-weight: 700;
  color: var(--hc-navy); background: none; border: 0; border-bottom: 1px solid var(--hc-line-2);
  text-align: left; cursor: pointer;
}
.hc-drawer__row.is-red { color: var(--hc-red); }
.hc-cv { display: inline-flex; transition: transform .18s; }
.hc-drawer__row[aria-expanded="true"] .hc-cv { transform: rotate(180deg); }
.hc-drawer__sub { display: none; background: var(--hc-grey); border-bottom: 1px solid var(--hc-line-2); }
.hc-drawer__sub.is-on { display: block; }
.hc-drawer__sub a { display: block; padding: 13px 18px 13px 34px; font-size: 15px; color: var(--hc-ink-2); border-bottom: 1px solid var(--hc-line-2); }
.hc-drawer__sub a:last-child { border-bottom: 0; }
.hc-drawer__util { padding: 16px 18px 30px; display: grid; gap: 2px; }
.hc-drawer__util a { display: flex; align-items: center; gap: 11px; min-height: 46px; font-size: 15px; font-weight: 600; color: var(--hc-navy); }

/* --- 4 · Hero + trust bar ----------------------------------------------- */
.hc-hero { position: relative; background: #EDE8E1; isolation: isolate; }
.hc-hero__bg { position: absolute; inset: 0; z-index: -2; }
.hc-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
/* Light lift only over the copy column, so the photograph keeps its full
   contrast the way the approved reference does. Measured against the current
   hero image the headline sits at ~11:1 and the sub-copy at ~7:1. */
.hc-hero__wash {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg,
    rgba(255,255,255,.62) 0%, rgba(255,255,255,.50) 26%, rgba(255,255,255,.28) 42%,
    rgba(255,255,255,.08) 56%, rgba(255,255,255,0) 68%);
}
.hc-hero__in { position: relative; padding: 120px 0 190px 40px; max-width: 730px; }
.hc-hero h1 {
  font-size: clamp(32px, 3.9vw, 56px); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.014em; line-height: 1.12; color: var(--hc-ink);
}
.hc-hero h1 .is-red { display: block; color: var(--hc-red); }
.hc-hero__sub { font-size: clamp(16px, 1.4vw, 19px); color: #33404F; margin-top: 24px; max-width: 40ch; line-height: 1.5; }
.hc-hero__cta { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap; }
.hc-hero__cta .hc-btn { min-height: 66px; padding: 0 46px; font-size: 15.5px; letter-spacing: .07em; }

.hc-trust { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(6, 12, 20, .74); color: #fff; }
.hc-trust ul { display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--hc-maxw); margin: 0 auto; padding: 0 24px; }
.hc-trust li { display: flex; align-items: center; gap: 14px; padding: 27px 24px; position: relative; }
.hc-trust li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 34px; width: 1px; background: rgba(255, 255, 255, .22);
}
.hc-trust svg { color: var(--hc-gold-l); flex: none; }
.hc-trust .t { display: block; font-size: 13px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; line-height: 1.2; }
.hc-trust .s { display: block; font-size: 12px; color: #AFC0D2; margin-top: 3px; letter-spacing: .03em; text-transform: uppercase; }
@media (max-width: 1000px) {
  .hc-hero__in { padding: 72px 0 158px; max-width: none; }
  /* Portrait viewports put the copy over the middle of the photo, so the
     vertical lift stays stronger here than on desktop. */
  .hc-hero__wash { background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.74) 46%, rgba(255,255,255,.38) 66%, rgba(255,255,255,.08) 100%); }
  .hc-hero__cta .hc-btn { min-height: 58px; padding: 0 34px; font-size: 14.5px; }
  .hc-trust ul { grid-template-columns: repeat(2, 1fr); }
  .hc-trust li:nth-child(2)::before { display: none; }
  .hc-trust li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .18); }
}
@media (max-width: 620px) {
  .hc-hero__in { padding: 48px 0 218px; }
  .hc-hero__cta { gap: 11px; }
  .hc-hero__cta .hc-btn { flex: 1 1 100%; min-height: 54px; }
  .hc-trust li { padding: 16px 12px; gap: 11px; align-items: flex-start; }
  .hc-trust .t { font-size: 11.5px; }
  .hc-trust .s { font-size: 10.5px; }
  .hc-trust svg { width: 22px; height: 22px; margin-top: 1px; }
}

/* --- 5 · Category tiles ------------------------------------------------- */
.hc-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.hc-tile {
  position: relative; display: block; overflow: hidden; border-radius: var(--hc-r);
  aspect-ratio: 25 / 38; background: var(--hc-navy);
}
.hc-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.hc-tile:hover img { transform: scale(1.05); }
.hc-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,36,0) 42%, rgba(8,20,36,.30) 62%, rgba(8,20,36,.80) 100%); }
.hc-tile__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 18px; color: #fff; text-align: left; }
.hc-tile__name { display: block; font-size: 17px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.hc-tile__go { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #EAF0F6; }
@media (max-width: 1180px) { .hc-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .hc-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) {
  .hc-tiles { gap: 12px; }
  .hc-tile { aspect-ratio: 3 / 3.9; }
  .hc-tile__label { padding: 14px 12px; }
  .hc-tile__name { font-size: 14.5px; }
  .hc-tile__go { font-size: 10.5px; margin-top: 5px; }
}

/* --- Product cards ------------------------------------------------------ */
.hc-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.hc-card {
  border: 1px solid var(--hc-line); border-radius: var(--hc-r); background: #fff;
  display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .16s, border-color .16s;
}
.hc-card:hover { box-shadow: 0 8px 22px rgba(12, 31, 56, .10); border-color: #CFD5DC; }
.hc-card__img {
  position: relative; aspect-ratio: 7 / 6; background: var(--hc-grey);
  display: block; overflow: hidden;
}
/* Positioned absolutely so the wrapper's aspect-ratio always wins — a
   percentage height on a flow child leaves the box sized by the image's own
   intrinsic ratio instead. */
.hc-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-flag {
  position: absolute; top: 10px; left: 10px; background: var(--hc-red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px;
}
.hc-card__body { padding: 15px 15px 17px; display: flex; flex-direction: column; flex: 1; gap: 5px; }
.hc-card__name { font-size: 15px; font-weight: 700; color: var(--hc-ink); line-height: 1.3; }
.hc-card__meta { font-size: 12.5px; color: var(--hc-ink-3); }
.hc-card__price { margin-top: auto; padding-top: 11px; }
/* WooCommerce renders price markup itself — style its output rather than
   duplicating it, so the homepage can never disagree with the product page. */
.hc-card__now { font-size: 21px; font-weight: 800; color: var(--hc-ink); letter-spacing: -.01em; }
.hc-card__now .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
.hc-card__now del { font-size: 13px; font-weight: 600; color: var(--hc-ink-3); margin-right: 7px; }
.hc-card__now ins { text-decoration: none; }
.hc-card__now small,
.hc-card__now .woocommerce-price-suffix { font-size: 12.5px; font-weight: 600; color: var(--hc-ink-3); }
.hc-card.is-sale .hc-card__now ins,
.hc-card.is-sale .hc-card__now ins .woocommerce-Price-amount { color: var(--hc-red); }
.hc-card__box { font-size: 12.5px; color: var(--hc-ink-2); margin-top: 3px; }
.hc-card__cta { margin-top: 13px; }
.hc-card__cta .hc-btn { width: 100%; }
@media (max-width: 1180px) { .hc-grid5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 740px) {
  .hc-grid5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hc-card__now { font-size: 18px; }
  .hc-card__body { padding: 12px 12px 14px; }
}

/* --- 6 · Deals note + volume band --------------------------------------- */
.hc-dealnote {
  grid-column: span 4; border: 1px dashed #D9C7A6; background: #FFFBF3;
  border-radius: var(--hc-r); padding: 26px 30px;
  display: flex; flex-direction: column; justify-content: center; gap: 9px; text-align: left;
}
.hc-dealnote--full { grid-column: auto; }
.hc-dealnote h3 { font-size: 17px; font-weight: 800; text-transform: uppercase; color: var(--hc-ink); }
.hc-dealnote p { font-size: 14.5px; color: var(--hc-ink-2); max-width: 70ch; }
.hc-dealnote__fine { font-size: 13.5px; color: var(--hc-ink-3); }
@media (max-width: 1180px) { .hc-dealnote { grid-column: span 2; } }
@media (max-width: 740px) { .hc-dealnote { grid-column: span 2; padding: 18px 20px; } }

.hc-volume {
  margin-top: 22px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r);
  padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.hc-volume strong { display: block; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--hc-ink); }
.hc-volume span { font-size: 14.5px; color: var(--hc-ink-2); }

/* --- 8 · How it works --------------------------------------------------- */
.hc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; text-align: left; }
.hc-steps li {
  position: relative; background: #fff; border: 1px solid var(--hc-line);
  border-radius: var(--hc-r); padding: 30px 26px 26px;
}
.hc-steps__n {
  position: absolute; top: -15px; left: 26px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--hc-navy); color: #fff; font-size: 13px; font-weight: 800;
  display: grid; place-items: center;
}
.hc-steps__ic { display: block; color: var(--hc-gold-d); margin-bottom: 12px; }
.hc-steps h3 { font-size: 18px; font-weight: 800; color: var(--hc-navy); }
.hc-steps p { font-size: 14.5px; color: var(--hc-ink-2); margin-top: 6px; }
.hc-sample {
  margin-top: 22px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-r);
  padding: 18px 24px; display: flex; align-items: center; gap: 16px; text-align: left; flex-wrap: wrap;
}
.hc-sample svg { color: var(--hc-gold-d); flex: none; }
.hc-sample p { font-size: 14.5px; color: var(--hc-ink-2); flex: 1 1 320px; }
.hc-sample strong { color: var(--hc-ink); }
@media (max-width: 940px) { .hc-steps { grid-template-columns: 1fr; } }

/* --- 9 · SnapCaps ------------------------------------------------------- */
.hc-snap { background: var(--hc-navy); color: #fff; }
.hc-snap .hc-h2 { color: #fff; margin-top: 11px; }
.hc-snap .hc-lede { color: #B9C8D8; max-width: 52ch; }
.hc-snap__top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: center; margin-bottom: 36px; }
.hc-snap__art { border-radius: var(--hc-r); overflow: hidden; aspect-ratio: 16 / 10; }
.hc-snap__art img { width: 100%; height: 100%; object-fit: cover; }
.hc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hc-flow li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--hc-r); padding: 22px 20px; }
.hc-flow .n { width: 31px; height: 31px; border-radius: 50%; background: var(--hc-gold); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; margin-bottom: 12px; }
.hc-flow h3 { font-size: 15.5px; font-weight: 800; }
.hc-flow p { font-size: 13.5px; color: #AFC0D2; margin-top: 6px; line-height: 1.5; }
.hc-snap__own {
  display: flex; gap: 15px; align-items: flex-start; margin-top: 26px;
  background: rgba(217, 144, 27, .12); border: 1px solid rgba(233, 169, 62, .45);
  border-radius: var(--hc-r); padding: 18px 22px;
}
.hc-snap__own svg { color: var(--hc-gold-l); flex: none; margin-top: 2px; }
.hc-snap__own p { font-size: 15px; color: #E6EDF4; }
.hc-snap__own strong { color: #fff; }
.hc-snap__cta { display: flex; gap: 13px; margin-top: 26px; flex-wrap: wrap; }
@media (max-width: 1000px) {
  .hc-snap__top { grid-template-columns: 1fr; gap: 26px; }
  .hc-snap__art { order: -1; }
  .hc-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) { .hc-flow { grid-template-columns: 1fr; } .hc-snap__cta .hc-btn { flex: 1 1 100%; } }

/* --- 10 · Cabinets split ------------------------------------------------ */
.hc-split { display: grid; grid-template-columns: 1.02fr 1fr; border-radius: var(--hc-r); overflow: hidden; background: var(--hc-navy); color: #fff; }
.hc-split__media { position: relative; min-height: 440px; }
.hc-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-split__body { padding: 54px 50px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.hc-split .hc-h2 { color: #fff; }
.hc-split p { color: #BDCBDA; font-size: 16px; }
.hc-pts { display: grid; gap: 10px; }
.hc-pts li { display: flex; gap: 11px; font-size: 15px; color: #DFE7EF; }
.hc-pts svg { color: var(--hc-gold-l); flex: none; margin-top: 3px; }
.hc-split__cta { display: flex; gap: 13px; margin-top: 10px; flex-wrap: wrap; }
.hc-split__fine { font-size: 13px; color: #8FA2B7; }
@media (max-width: 940px) {
  .hc-split { grid-template-columns: 1fr; }
  .hc-split__media { min-height: 250px; order: -1; }
  .hc-split__body { padding: 34px 24px; }
}

/* --- 11 · Trust: reviews + Raleigh -------------------------------------- */
.hc-local { background: var(--hc-navy-d); color: #fff; }
.hc-local__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.hc-local .hc-h2 { color: #fff; }
.hc-local p { color: #B4C4D5; font-size: 16px; margin-top: 13px; }
.hc-local__info { display: grid; gap: 14px; margin-top: 24px; }
.hc-local__info div { display: flex; gap: 13px; font-size: 15px; }
.hc-local__info svg { color: var(--hc-gold-l); flex: none; margin-top: 3px; }
.hc-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.hc-chips span { border: 1px solid rgba(255, 255, 255, .26); border-radius: 100px; padding: 7px 15px; font-size: 12.5px; color: #CFDBE7; }
.hc-revs { display: grid; gap: 14px; }
.hc-revs__top { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.hc-revs__score { font-size: 34px; font-weight: 800; line-height: 1; }
.hc-revs__meta { font-size: 14px; color: #B4C4D5; }
.hc-stars { display: inline-flex; gap: 2px; color: #F0A429; }
.hc-rev { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--hc-r); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.hc-rev q { font-size: 14.5px; color: #D5DFEA; line-height: 1.6; quotes: none; }
.hc-rev__who { display: flex; align-items: center; gap: 11px; }
.hc-rev__av { width: 36px; height: 36px; border-radius: 50%; background: var(--hc-gold); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; flex: none; }
.hc-rev__nm { font-size: 14px; font-weight: 700; }
.hc-rev__sc { font-size: 12px; color: #9DAFC2; }
@media (max-width: 940px) { .hc-local__grid { grid-template-columns: 1fr; gap: 30px; } }

/* --- 12 · Close: CTA + email -------------------------------------------- */
.hc-close { background: var(--hc-navy); color: #fff; }
.hc-close__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; padding-top: 52px; padding-bottom: 52px; }
.hc-close__cta h2 { font-size: clamp(23px, 2.7vw, 32px); font-weight: 800; text-transform: uppercase; }
.hc-close__cta p { color: #B4C4D5; font-size: 16px; margin-top: 11px; }
.hc-close__btns { display: flex; gap: 13px; margin-top: 24px; flex-wrap: wrap; }
.hc-close__mail { display: flex; gap: 20px; align-items: flex-start; }
.hc-close__ic { width: 66px; height: 66px; border-radius: 50%; background: var(--hc-gold); color: #fff; display: grid; place-items: center; flex: none; }
.hc-close__mail h3 { font-size: 19px; font-weight: 800; text-transform: uppercase; }
.hc-close__mail > div > p { color: #A9BACD; font-size: 14.5px; margin-top: 7px; }
.hc-close__form { display: flex; margin-top: 16px; max-width: 480px; }
/* font-size 16px, not 15px: below 16px iOS Safari zooms the viewport on focus. */
.hc-close__form input { flex: 1; min-width: 0; height: 52px; border: 0; border-radius: var(--hc-r) 0 0 var(--hc-r); padding: 0 18px; font-size: 16px; color: var(--hc-ink); }
.hc-close__form input:focus { outline: none; box-shadow: inset 0 0 0 3px var(--hc-gold-l); }
.hc-close__form .hc-btn { border-radius: 0 var(--hc-r) var(--hc-r) 0; min-height: 52px; white-space: nowrap; }
.hc-close__fine { font-size: 12px; color: #8FA2B7; margin-top: 10px; }
.hc-close__done { font-size: 15px; font-weight: 600; padding: 14px 0; }
@media (max-width: 940px) { .hc-close__grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) {
  .hc-close__mail { gap: 14px; }
  .hc-close__ic { width: 52px; height: 52px; }
  .hc-close__form { flex-wrap: wrap; }
  .hc-close__form input { flex-basis: 100%; border-radius: var(--hc-r); }
  .hc-close__form .hc-btn { width: 100%; border-radius: var(--hc-r); margin-top: 10px; }
  .hc-close__btns .hc-btn { flex: 1 1 100%; }
}

/* --- 13 · Footer -------------------------------------------------------- */
.hc-ftr { background: var(--hc-navy-d); color: #B9C7D6; padding-top: 58px; }
.hc-ftr__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 42px; }
/* Footer column headings are h2: they are top-level within the footer
   landmark, and h2 can never create a heading-level skip after h1/h2/h3.
   They were h4, which skipped a level after an h2 section on the landing
   and product templates (WCAG 1.3.1). Visual result is unchanged. */
.hc-ftr h2 { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 15px; }
.hc-ftr li { margin-bottom: 9px; }
.hc-ftr a { font-size: 14px; color: #AEBDCD; }
.hc-ftr a:hover { color: var(--hc-gold-l); text-decoration: underline; }
.hc-ftr__brand img { width: 180px; margin-bottom: 16px; }
.hc-ftr__brand p { font-size: 14px; line-height: 1.6; max-width: 33ch; }
.hc-ftr__contact { display: grid; gap: 10px; margin-top: 17px; font-size: 14px; }
.hc-ftr__contact div { display: flex; gap: 10px; }
.hc-ftr__contact svg { color: var(--hc-gold-l); flex: none; margin-top: 3px; }
.hc-ftr__bar {
  border-top: 1px solid rgba(255, 255, 255, .12); padding: 20px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
}
.hc-ftr__bar ul { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 1020px) { .hc-ftr__cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .hc-ftr__cols { grid-template-columns: 1fr 1fr; gap: 26px; } .hc-ftr__brand { grid-column: 1 / -1; } }

/* ==========================================================================
   v13 (7 Sep 2026) - tighter homepage: 13 blocks -> 9. Owner-approved order.
   ========================================================================== */
.hc-sec--tight { padding: 48px 0; }
.hc-hero__in { padding-top: 96px; padding-bottom: 172px; }              /* hero a little shorter on desktop: tiles start higher; bottom keeps room for the trust bar */
.hc-band__sub { margin: 26px 0 0; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-ink-2); }
.hc-band__sub + .hc-grid5 { margin-top: 12px; }
.hc-home .hc-steps--compact { margin-top: 30px; gap: 14px; }   /* v14: without the lede, ".hc-home ol {margin:0}" out-ranked the old single-class rule and the step badges sat on the heading */
.hc-steps--compact li { padding: 20px 20px 18px; }
.hc-steps--compact h3 { font-size: 16.5px; }
.hc-steps--compact p { font-size: 14px; }
.hc-sample--inline { margin-top: 18px; }
.hc-local__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hc-local .hc-btn--goldline { background: transparent; color: #fff; border-color: var(--hc-gold); }
.hc-local .hc-btn--goldline:hover { background: var(--hc-gold-btn); border-color: var(--hc-gold-btn); color: #fff; }
.hc-snap.hc-sec--tight .hc-flow { margin-top: 26px; }
@media (max-width: 1000px) {
  .hc-hero__in { padding-top: 64px; padding-bottom: 214px; }   /* v14: the 2x2 trust bar is 183px tall between 621 and 1000px; 158px let it cover the hero buttons */
}
@media (max-width: 900px) {
  .hc-sec--tight { padding: 36px 0; }
}
@media (max-width: 620px) {
  .hc-hero__in { padding-top: 44px; padding-bottom: 218px; }   /* original mobile bottom, trimmed top */
  .hc-local__btns .hc-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   v16 (7 Sep 2026) - owner review round 1: header/nav, hero, compact page,
   reviews row, compact footer. Shared chrome rules also apply on /shop/ and
   the category pages (owner-approved).
   ========================================================================== */
/* Utility strip (was the 64px promo bar): linked items, phone on the right. */
.hc-promo .hc-wrap { min-height: 40px; padding-top: 4px; padding-bottom: 4px; justify-content: flex-start; }
.hc-promo ul { width: 100%; justify-content: flex-start; }
.hc-promo li { font-size: 12.5px; padding: 0 20px; }
.hc-promo li:first-child { padding-left: 0; }
.hc-promo li a { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.hc-promo li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hc-promo__tel { margin-left: auto; padding-right: 0 !important; }
.hc-promo__tel a { font-size: 13.5px; }
@media (max-width: 700px) { .hc-promo li:first-child { padding-left: 14px; } .hc-promo__tel { margin-left: 0; padding-right: 14px !important; } }

/* Header (owner, 7 Sep): logo -18% (210 -> 172px), search -26% (580 -> 430px)
   and centred between logo and Account / Cart, row 142 -> 96px, input 66 -> 54px. */
.hc-hdr__in { min-height: 96px; padding-top: 12px; padding-bottom: 12px; gap: 24px; }
.hc-logo img { width: 210px; height: auto; }
.hc-search { max-width: 430px; margin-left: auto; margin-right: auto; }
.hc-search input { height: 54px; padding: 0 62px 0 24px; font-size: 15.5px; }
.hc-search__go { width: 42px; height: 42px; right: 6px; top: 6px; }
.hc-acts { margin-left: 0; }
@media (max-width: 1080px) { .hc-hdr__in { min-height: 76px; padding-top: 10px; padding-bottom: 10px; } .hc-logo img { width: 150px; } }
@media (max-width: 760px) { .hc-hdr__in { padding-bottom: 12px; } .hc-logo img { width: 132px; } .hc-search { max-width: none; margin: 0; } .hc-search input { height: 48px; } }

/* Nav row: categories on the left, actions on the right, one 62px row. */
.hc-nav__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hc-nav ul { justify-content: flex-start; flex-wrap: nowrap; }
.hc-nav__top { padding: 19px 20px; font-size: 15.5px; white-space: nowrap; }
.hc-nav__right { margin-left: auto; }
.hc-nav__right .hc-nav__top { gap: 8px; padding-left: 16px; padding-right: 16px; }
.hc-nav__right .hc-nav__top svg { color: var(--hc-gold-d); }
.hc-nav__top.is-gold { color: var(--hc-gold-d); }
.hc-nav__top.is-gold:hover { color: var(--hc-navy); border-bottom-color: var(--hc-gold); }
@media (max-width: 1240px) { .hc-nav__top { padding: 19px 14px; font-size: 15px; } .hc-nav__right .hc-nav__top { padding-left: 12px; padding-right: 12px; } }
.hc-drawer__util a.is-gold { color: var(--hc-gold-d); }
.hc-drawer__util a.is-gold svg, .hc-drawer__util a svg { color: var(--hc-gold-d); }

/* Hero: 2559px scene, floor-forward crop, narrow legibility band (was a wash
   over two thirds of the picture). */
.hc-hero__bg img { object-position: 50% 100%; }
.hc-hero__wash {
  background: linear-gradient(96deg,
    rgba(255,255,255,.74) 0%, rgba(255,255,255,.62) 30%, rgba(255,255,255,.28) 47%, rgba(255,255,255,0) 58%);
}
.hc-hero__cta .hc-btn--goldline.is-red { color: var(--hc-red); border-color: var(--hc-red); }
.hc-hero__cta .hc-btn--goldline.is-red:hover { background: var(--hc-red); color: #fff; }
@media (max-width: 1000px) {
  .hc-hero__wash { background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.84) 34%, rgba(255,255,255,.40) 56%, rgba(255,255,255,.04) 72%, rgba(255,255,255,0) 100%); }
}

/* Tighter vertical rhythm now that the page is five content blocks. */
.hc-sec { padding: 60px 0; }
.hc-split__fine a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* SnapCaps: three compact numbered steps instead of four boxed cards. */
.hc-flow--compact { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; max-width: 52ch; }
.hc-flow--compact li { background: none; border: 0; padding: 0; display: flex; gap: 14px; align-items: flex-start; }
.hc-flow--compact .n { margin: 2px 0 0; width: 28px; height: 28px; font-size: 13px; }
.hc-flow--compact h3 { font-size: 15.5px; }
.hc-flow--compact p { margin-top: 3px; }
.hc-snap .hc-snap__cta { margin-top: 24px; }
.hc-snap__top { margin-bottom: 0; }

/* Reviews: one clean row of three cards on a light band. */
.hc-revs.hc-sec { display: block; background: var(--hc-grey); color: var(--hc-ink); }
.hc-revs .hc-revs__meta { margin-top: 10px; font-size: 15px; color: var(--hc-ink-2); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.hc-revs .hc-revs__meta a { color: var(--hc-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hc-revs__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; text-align: left; }
.hc-revs .hc-rev { background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 6px 18px rgba(12, 31, 56, .05); padding: 22px; }
.hc-revs .hc-rev q { color: var(--hc-ink-2); font-size: 15px; }
.hc-revs .hc-rev__nm { color: var(--hc-navy); }
.hc-revs .hc-rev__sc { color: var(--hc-ink-3, #6B7A8C); }
@media (max-width: 940px) { .hc-revs__row { grid-template-columns: 1fr; gap: 14px; } }

/* Footer: brand + three short columns. */
.hc-ftr__cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 34px; }
.hc-ftr__bar { justify-content: center; }
@media (max-width: 1020px) { .hc-ftr__cols { grid-template-columns: 1fr 1fr 1fr; } .hc-ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .hc-ftr__cols { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   v17 (7 Sep 2026) - owner visual review of the first screen: one hero CTA,
   three trust items (cabinet design left to its own block), hero copy aligned
   to the container edge like every section heading and the trust bar.
   ========================================================================== */
.hc-hero__in { padding-left: 0; max-width: 700px; }
.hc-hero__sub { margin-top: 20px; }
.hc-hero__cta { margin-top: 32px; }
.hc-trust ul { grid-template-columns: repeat(3, 1fr); }
.hc-trust li { padding-left: 0; padding-right: 24px; }
.hc-trust li + li { padding-left: 24px; }
@media (max-width: 1000px) {
  .hc-trust ul { grid-template-columns: repeat(3, 1fr); }
  .hc-trust li:nth-child(2)::before { display: block; }
  .hc-trust li:nth-child(-n+2) { border-bottom: 0; }
  .hc-trust li { padding: 20px 14px 20px 0; gap: 10px; }
  .hc-trust li + li { padding-left: 14px; }
  .hc-hero__in { padding-bottom: 150px; }
}
@media (max-width: 620px) {
  .hc-trust ul { grid-template-columns: 1fr; }
  .hc-trust li { padding: 11px 0; align-items: center; }
  .hc-trust li + li { padding-left: 0; }
  .hc-trust li + li::before { display: none; }
  .hc-trust li + li { border-top: 1px solid rgba(255, 255, 255, .16); }
  .hc-trust ul { padding: 0 16px; }   /* same 16px gutter as .hc-wrap below 640px, so the rows align with the headline */
  .hc-hero__in { padding-bottom: 195px; }
}

/* ==========================================================================
   v18 (7 Sep 2026) - owner visual revision before launch.
   Colour system: navy / white / Home Connect red for primary actions; gold is
   an accent only (icons, stars, eyebrows). Semibold hero sub-copy, lighter
   hero wash so the floor stays visible under the copy, five cabinet-line
   cards, polished product cards, reviews with a quotation mark and verified
   line, tighter typography hierarchy. No functionality changes.
   ========================================================================== */

/* Buttons - red primary, navy outline secondary. The gold-filled variant is
   restyled to red as well so any surface still using it follows the system. */
.hc-home .hc-btn--red,
.hc-home .hc-btn--gold { background: var(--hc-red); border-color: var(--hc-red); color: #fff; box-shadow: 0 6px 16px rgba(200, 16, 46, .18); }
.hc-home .hc-btn--red:hover,
.hc-home .hc-btn--gold:hover { background: var(--hc-red-d); border-color: var(--hc-red-d); color: #fff; box-shadow: 0 8px 20px rgba(200, 16, 46, .24); transform: translateY(-1px); }
.hc-home .hc-btn--navyline,
.hc-home .hc-btn--goldline { background: #fff; border-color: var(--hc-navy); color: var(--hc-navy); }
.hc-home .hc-btn--navyline:hover,
.hc-home .hc-btn--goldline:hover { background: var(--hc-navy); border-color: var(--hc-navy); color: #fff; }
.hc-home .hc-btn--goldline.is-red { color: var(--hc-red); border-color: var(--hc-red); }
.hc-home .hc-btn--goldline.is-red:hover { background: var(--hc-red); border-color: var(--hc-red); color: #fff; }
.hc-btn { border-radius: 6px; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.hc-home :focus-visible { outline-color: var(--hc-navy); }

/* Hero */
.hc-hero__sub { font-weight: 600; color: #1F2A38; font-size: clamp(16.5px, 1.45vw, 19.5px); line-height: 1.5; max-width: 42ch; }
.hc-hero__wash {
  background: linear-gradient(96deg,
    rgba(255,255,255,.68) 0%, rgba(255,255,255,.56) 24%, rgba(255,255,255,.30) 40%,
    rgba(255,255,255,.08) 52%, rgba(255,255,255,0) 62%);
}
.hc-hero__cta .hc-btn { min-height: 64px; padding: 0 44px; }
.hc-trust { background: rgba(6, 12, 20, .80); backdrop-filter: blur(2px); }
.hc-trust .t { font-size: 13px; letter-spacing: .06em; }
.hc-trust .s { color: #C3D0DE; text-transform: none; letter-spacing: 0; font-size: 13px; }
@media (max-width: 1000px) {
  .hc-hero__wash { background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.80) 36%, rgba(255,255,255,.34) 58%, rgba(255,255,255,.02) 74%, rgba(255,255,255,0) 100%); }
  .hc-trust .t { font-size: 12px; }
  .hc-trust .s { font-size: 12px; }
}
@media (max-width: 620px) { .hc-trust .s { font-size: 11.5px; } }

/* Section furniture */
.hc-eyebrow { color: var(--hc-red); letter-spacing: .14em; }
.hc-snap .hc-eyebrow { color: var(--hc-gold-l); }
.hc-h2 { letter-spacing: -.005em; }
.hc-headrow { align-items: flex-end; margin-bottom: 28px; }
.hc-viewall { color: var(--hc-navy); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.hc-viewall:hover { color: var(--hc-red); border-bottom-color: var(--hc-red); }
.hc-sec--grey { background: #F4F6F9; }

/* Product cards */
.hc-card { border-radius: 8px; border-color: #E6E9EE; box-shadow: 0 1px 2px rgba(12, 31, 56, .04); transition: box-shadow .2s, border-color .2s, transform .2s; }
.hc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(12, 31, 56, .12); border-color: #D6DCE4; }
.hc-card__img img { transition: transform .5s ease; }
.hc-card:hover .hc-card__img img { transform: scale(1.04); }
.hc-card__body { padding: 16px 16px 18px; }
.hc-card__name { font-size: 15.5px; font-weight: 800; }
.hc-card__meta { font-size: 12.5px; color: var(--hc-ink-3); }
.hc-card__now { font-size: 22px; }
@media (max-width: 740px) { .hc-card__now { font-size: 18px; } }
.hc-card__cta .hc-btn { border-radius: 6px; }
.hc-volume { border-radius: 8px; box-shadow: 0 1px 2px rgba(12, 31, 56, .04); }

/* Cabinets + 3D design */
.hc-cabs { background: #fff; }
.hc-cabs__head { max-width: 760px; }
.hc-cabs__head .hc-lede { margin-top: 14px; font-size: 17px; line-height: 1.55; }
.hc-cabs .hc-cabs__sub { margin: 38px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; color: var(--hc-ink-2); }
.hc-cab {
  display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: #fff;
  border: 1px solid #E6E9EE; box-shadow: 0 1px 2px rgba(12, 31, 56, .04);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.hc-cab:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(12, 31, 56, .12); border-color: #D6DCE4; }
.hc-cab__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hc-grey); display: block; }
.hc-cab__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hc-cab:hover .hc-cab__img img { transform: scale(1.04); }
.hc-cab__body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hc-cab__name { font-size: 16px; font-weight: 800; color: var(--hc-ink); line-height: 1.25; }
.hc-cab__fin { font-size: 12.5px; color: var(--hc-ink-3); }
.hc-cab__go { margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-navy); display: inline-flex; align-items: center; gap: 7px; }
.hc-cab:hover .hc-cab__go { color: var(--hc-red); }
.hc-cabs__cta { display: flex; align-items: center; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.hc-cabs__all { font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hc-navy); display: inline-flex; align-items: center; gap: 8px; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.hc-cabs__all:hover { color: var(--hc-red); border-bottom-color: var(--hc-red); }
.hc-cabs__fine { margin-top: 18px; font-size: 13.5px; color: var(--hc-ink-3); }
.hc-cabs__fine a { color: var(--hc-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1180px) { .hc-cabs__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 740px) {
  .hc-cabs__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hc-cab__body { padding: 12px 12px 14px; }
  .hc-cab__name { font-size: 14.5px; }
  .hc-cabs__cta { gap: 18px; margin-top: 26px; }
  .hc-cabs__cta .hc-btn { width: 100%; }
}

/* SnapCaps - keep it distinctive: navy field, framed render, red action */
.hc-snap { background: linear-gradient(160deg, var(--hc-navy) 0%, var(--hc-navy-d) 100%); }
.hc-snap__art { border-radius: 8px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12); }
.hc-flow--compact .n { background: var(--hc-red); }
.hc-flow--compact li { padding: 0; }

/* Reviews - designed cards, not three text boxes */
.hc-revs.hc-sec { background: #F4F6F9; }
.hc-revs .hc-eyebrow { margin-bottom: 8px; }
.hc-revs .hc-rev { position: relative; border-radius: 8px; padding: 26px 24px 22px; border-top: 3px solid var(--hc-red); box-shadow: 0 8px 22px rgba(12, 31, 56, .06); }
.hc-rev__mark { position: absolute; right: 20px; top: 8px; font-size: 64px; line-height: 1; font-weight: 800; color: #E7EBF1; font-family: Georgia, "Times New Roman", serif; pointer-events: none; }
.hc-revs .hc-rev q { font-size: 15.5px; line-height: 1.6; }
.hc-revs .hc-rev__av { background: var(--hc-navy); }
.hc-revs .hc-rev__sc { display: inline-flex; align-items: center; gap: 5px; }
.hc-revs .hc-rev__sc svg { color: #1E8E3E; }
.hc-stars { color: #F2A900; }

/* ==========================================================================
   v19 (8 Sep 2026) - owner ecommerce polish pass. No new architecture: the
   v18 sections stay, but the header/nav, product cards, category headings,
   cabinet cards, SnapCaps and footer are finished to retail standard, and the
   reviews become a manual carousel. Navy / white / red; gold only as an icon
   accent. No new libraries, no animation for its own sake.
   ========================================================================== */

/* --- Header / navigation ------------------------------------------------ */
.hc-nav__top { font-weight: 700; }
.hc-nav ul > li > .hc-nav__top { position: relative; }
.hc-nav ul > li > .hc-nav__top::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
  background: var(--hc-red); transform: scaleX(0); transform-origin: center; transition: transform .16s ease;
}
.hc-nav ul > li:hover > .hc-nav__top::after,
.hc-nav ul > li > .hc-nav__top:focus-visible::after { transform: scaleX(1); }
.hc-nav__top.is-red { color: var(--hc-red); }
.hc-nav__right { gap: 6px; align-items: center; display: flex; }
.hc-nav__right .hc-nav__top { color: var(--hc-navy); }
.hc-nav__right .hc-nav__top svg { color: var(--hc-gold-d); }
.hc-nav__right li > .hc-nav__top::after { display: none; }
.hc-home .hc-nav__top.is-cta {
  background: var(--hc-red); color: #fff; border-radius: 6px; padding: 12px 20px;
  margin-left: 10px; box-shadow: 0 4px 12px rgba(200, 16, 46, .18);
}
.hc-home .hc-nav__top.is-cta svg { color: #fff; }
.hc-home .hc-nav__top.is-cta:hover { background: var(--hc-red-d); color: #fff; }
.hc-drawer__util a.is-cta { color: var(--hc-red); font-weight: 800; }
.hc-drawer__util a.is-cta svg { color: var(--hc-red); }
@media (max-width: 1240px) { .hc-home .hc-nav__top.is-cta { padding: 11px 15px; margin-left: 6px; } }

/* --- Section headings: a category reads as a category ------------------- */
.hc-cat {
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.015em; line-height: 1.04; color: var(--hc-ink); margin: 0;
}
.hc-cat::after {
  content: ""; display: block; width: 54px; height: 4px; background: var(--hc-red);
  border-radius: 2px; margin-top: 14px;
}
.hc-cat--light { color: #fff; }
.hc-cat__sub {
  margin-top: 16px; font-size: clamp(19px, 1.8vw, 24px); font-weight: 700;
  letter-spacing: -.005em; line-height: 1.25; color: var(--hc-ink);
}
.hc-snap .hc-cat__sub { color: #fff; }

/* --- Product cards ------------------------------------------------------ */
.hc-card { border-radius: 10px; }
.hc-card__img { aspect-ratio: 1 / 1; background: #EFF1F4; }
.hc-card__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.hc-card__alt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Pointer devices only: on a touch screen a tap would leave the card stuck in
   its hover state, and the plank view is not reachable by tapping anyway - the
   card is a link to the product page, where the gallery holds both images. */
@media (hover: hover) and (pointer: fine) {
  .hc-card.has-alt:hover .hc-card__alt { opacity: 1; }
  .hc-card.has-alt:hover .hc-card__img > img { transform: none; }
}
.hc-card.has-alt:focus-within .hc-card__alt { opacity: 1; }
.hc-card__hint {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .94); color: var(--hc-navy); border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 11px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s;
  box-shadow: 0 2px 8px rgba(12, 31, 56, .16);
}
@media (hover: hover) and (pointer: fine) { .hc-card.has-alt:hover .hc-card__hint { opacity: 1; transform: none; } }
.hc-card__body { padding: 16px 16px 18px; gap: 3px; }
.hc-card__meta {
  order: -1; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hc-ink-3); margin-bottom: 2px;
}
.hc-card__name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.hc-card__price { padding-top: 14px; margin-top: auto; border-top: 1px solid var(--hc-line-2); }
.hc-card__meta { min-height: 2.6em; }   /* two-line collection names (e.g. Signature Series Wideplank) keep every price on the same baseline */
.hc-card__now { font-size: 23px; letter-spacing: -.02em; line-height: 1.1; }
.hc-card__now .woocommerce-price-suffix { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--hc-ink-3); }
.hc-card__box { font-size: 12.5px; color: var(--hc-ink-3); margin-top: 5px; }
.hc-card__cta { margin-top: 15px; }
.hc-card__cta .hc-btn { letter-spacing: .07em; }
@media (max-width: 740px) { .hc-card__name { font-size: 15px; } .hc-card__now { font-size: 19px; } }

/* --- Business / contractor strip (replaces the quote-request band) ------- */
.hc-volume { margin-top: 26px; padding: 20px 26px; border-radius: 10px; background: #fff; }
.hc-volume strong { font-size: 15px; text-transform: none; letter-spacing: 0; }
.hc-volume span { font-size: 14.5px; }

/* --- Cabinets ----------------------------------------------------------- */
.hc-cabs__head .hc-lede { margin-top: 12px; }
.hc-cabs__grid { margin-top: 34px; }
.hc-cab__body { padding: 16px; gap: 0; }
.hc-cab__name { font-size: 16.5px; letter-spacing: -.01em; }
.hc-cab__go { padding-top: 14px; }
.hc-cabs__cta { margin-top: 32px; }

/* --- SnapCaps ----------------------------------------------------------- */
.hc-snap .hc-lede { margin-top: 14px; }
.hc-snap__cta { align-items: center; gap: 22px; }
.hc-snap__more {
  font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #fff;
  display: inline-flex; align-items: center; gap: 8px; border-bottom: 2px solid rgba(255, 255, 255, .35); padding-bottom: 3px;
}
.hc-snap__more:hover { border-bottom-color: #fff; }

/* --- Reviews carousel --------------------------------------------------- */
.hc-revs__wrap { position: relative; margin-top: 46px; }
.hc-revs__row {
  /* grid-template-columns must be cleared: the v16 rule set three explicit
     columns, which with grid-auto-flow:column would size the first three cards
     by 1fr and only give later cards the intended width. */
  display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3);
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 10px; margin: 0; text-align: left; scrollbar-width: none;
}
.hc-revs__row::-webkit-scrollbar { display: none; }
.hc-revs__row > .hc-rev { scroll-snap-align: start; }
.hc-revs__row:focus-visible { outline: 3px solid var(--hc-navy); outline-offset: 4px; border-radius: 10px; }
/* Controls sit above the row, top-right: they never collide with the
   bottom-right reCAPTCHA badge (or the corner reserved for the future
   assistant), and they read as deliberate controls rather than overlay arrows. */
.hc-revs__nav {
  position: absolute; top: -60px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hc-line);
  background: #fff; color: var(--hc-navy); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(12, 31, 56, .08); transition: background .15s, color .15s, opacity .15s;
}
.hc-revs__nav:hover:not(:disabled) { background: var(--hc-navy); color: #fff; }
.hc-revs__nav:disabled { opacity: .3; cursor: default; }
.hc-revs__nav.is-prev { right: 52px; }
.hc-revs__nav.is-next { right: 0; }
.hc-revs__nav.is-prev svg { transform: rotate(90deg); }
.hc-revs__nav.is-next svg { transform: rotate(-90deg); }
@media (max-width: 940px) { .hc-revs__row { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 620px) {
  .hc-revs__row { grid-auto-columns: 86%; }
  .hc-revs__nav { display: none; }
}

/* --- Footer ------------------------------------------------------------- */
.hc-ftr { background: linear-gradient(180deg, var(--hc-navy) 0%, var(--hc-navy-d) 100%); }
.hc-ftr__cols { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 40px; }
.hc-ftr__brand p { max-width: 34ch; }
.hc-ftr__cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  background: var(--hc-red); color: #fff; border-radius: 6px; padding: 13px 22px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s;
}
.hc-ftr__cta:hover { background: var(--hc-red-d); color: #fff; }
.hc-ftr__col h2 { position: relative; padding-bottom: 12px; }
.hc-ftr__col h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: rgba(255, 255, 255, .28);
}
.hc-ftr__col li + li { margin-top: 2px; }
.hc-ftr__col a { display: inline-block; padding: 3px 0; }
.hc-ftr__bar { justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hc-ftr__legal { display: inline-flex; gap: 20px; }
.hc-ftr__legal a:hover { color: #fff; }
@media (max-width: 1020px) { .hc-ftr__cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) {
  .hc-ftr__cols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .hc-ftr__bar { justify-content: center; text-align: center; }
}

/* --- Reserved slot: future Home Connect AI assistant --------------------
   Nothing is rendered here in v19. The bottom-right corner is kept clear of
   fixed page furniture so an assistant launcher can sit at 20px/20px without
   colliding with reCAPTCHA (which parks itself bottom-right) or the mobile
   drawer; on small screens the badge stacks above it. Documented in the v19
   notes; no widget, no third-party script, no placeholder. */
:root { --hc-assistant-inset: 20px; --hc-assistant-size: 56px; }

/* ==========================================================================
   v20 — owner cohesion pass (8 Sep 2026)
   One designed page rather than a stack of sections: a shared scale for
   category headings, one dominant CTA per section, a real Trade Plus block,
   and a single hover treatment on every product card.
   ========================================================================== */

/* --- Shared scale ------------------------------------------------------- */
/* Cabinets and SnapCaps are major categories and now share one larger size,
   so the page has a visible hierarchy instead of four equal-weight sections. */
.hc-cat--xl { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; }
.hc-cat--xl::after { width: 66px; height: 5px; margin-top: 18px; }
.hc-cat__sub--lg { margin-top: 18px; font-size: clamp(20px, 2vw, 27px); }
.hc-lede--wide { max-width: 58ch; font-size: 17.5px; }
.hc-eyebrow--light { color: var(--hc-gold-l); }

/* One dominant action. hc-btn--lg is the section-level primary; a secondary
   action next to it is always a text link, never a second filled button. */
.hc-btn--lg { min-height: 56px; padding: 0 34px; font-size: 14.5px; letter-spacing: .075em; }
@media (max-width: 620px) { .hc-btn--lg { width: 100%; } }

/* --- Trade Plus --------------------------------------------------------- */
.hc-trade {
  background:
    linear-gradient(180deg, rgba(12, 31, 56, .96) 0%, rgba(8, 22, 41, .98) 100%),
    radial-gradient(1100px 420px at 82% 12%, rgba(217, 144, 27, .20), transparent 62%);
  color: #fff;
}
.hc-trade__in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px; align-items: center;
}
.hc-cat--tight { font-size: clamp(28px, 2.9vw, 38px); }
.hc-trade .hc-lede { color: #C2D0DF; margin-top: 14px; max-width: 48ch; }
.hc-trade__who {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px;
}
.hc-trade__who li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; font-weight: 600; color: #E6EDF5; line-height: 1.35;
}
.hc-trade__who svg { flex: none; color: var(--hc-gold-l); margin-top: 2px; }

/* Process panel - what happens, not what you get. */
.hc-trade__panel {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 30px 30px 26px;
}
.hc-trade__panel h3 {
  margin: 0 0 20px; font-size: 12.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: var(--hc-gold-l);
}
.hc-trade__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.hc-trade__steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.hc-trade__steps .n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hc-red); color: #fff; font-size: 13px; font-weight: 800;
}
.hc-trade__steps strong { display: block; color: #fff; font-size: 15.5px; line-height: 1.3; }
.hc-trade__steps p { margin: 4px 0 0; color: #9FB2C6; font-size: 13.5px; line-height: 1.5; }
.hc-trade__cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 32px; }
.hc-trade__more {
  color: #fff; font-weight: 700; font-size: 13.5px; text-transform: uppercase;
  letter-spacing: .08em; display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, .34); padding-bottom: 3px;
}
.hc-trade__more:hover { border-bottom-color: #fff; }
@media (max-width: 1000px) {
  .hc-trade__in { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 620px) {
  .hc-trade__who { grid-template-columns: 1fr; gap: 10px; }
  .hc-trade__cta { gap: 18px; }
  .hc-trade__panel { padding: 24px 22px 20px; }
}

/* --- Cabinets: more presence ------------------------------------------- */
.hc-cabs { padding: 84px 0; }
.hc-cabs__head { max-width: 62ch; }
.hc-cabs__grid { margin-top: 42px; }
.hc-cabs .hc-cab__img { aspect-ratio: 4 / 3; }
.hc-cabs__cta { margin-top: 44px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
@media (max-width: 620px) { .hc-cabs { padding: 56px 0; } .hc-cabs__cta { gap: 18px; } }

/* --- SnapCaps: more presence ------------------------------------------- */
.hc-snap.hc-sec--tight { padding: 78px 0; }
.hc-snap .hc-lede { max-width: 54ch; }
.hc-snap__cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 32px; }
.hc-snap__more {
  color: #fff; font-weight: 700; font-size: 13.5px; text-transform: uppercase;
  letter-spacing: .08em; display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, .34); padding-bottom: 3px;
}
.hc-snap__more:hover { border-bottom-color: #fff; }
@media (max-width: 620px) { .hc-snap.hc-sec--tight { padding: 52px 0; } }

/* --- Product cards: one base hover + optional image swap ---------------- */
/* Layer 1 (all five cards, no assets needed): lift, deeper shadow, CTA fill.
   Layer 2 (only .has-alt, i.e. products whose own gallery holds a second
   legitimate photograph): the v19 cross-fade, defined earlier in this file,
   still applies on top. Grey Canyon and Lite Teak have one photograph each,
   so they get layer 1 only - truthful single-image cards, not padded out with
   a captioned duplicate or another product's plank. */
@media (hover: hover) and (pointer: fine) {
  .hc-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .hc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(12, 31, 56, .13); }
  .hc-card:hover .hc-card__cta .hc-btn { background: var(--hc-navy); border-color: var(--hc-navy); color: #fff; }
  /* Single-image cards get a gentle zoom; cards that cross-fade must NOT zoom,
     or the two layers fight each other mid-transition. */
  .hc-card:hover .hc-card__img > img { transform: scale(1.04); }
  .hc-card.has-alt:hover .hc-card__img > img { transform: none; }
}
.hc-card:focus-within { box-shadow: 0 14px 34px rgba(12, 31, 56, .13); }

/* --- Contact hierarchy -------------------------------------------------- */
/* The header now carries exactly one contact action (Contact Us). The phone
   number stays in the utility strip on desktop and in the mobile drawer and
   footer, so it is always one tap away without competing with that action. */
@media (max-width: 620px) { .hc-promo__tel { display: none; } }

/* ==========================================================================
   v21 — legal bar clears the reCAPTCHA badge (8 Sep 2026)

   The site's reCAPTCHA badge is injected by the plugin as
   position:fixed; bottom:14px; height:60px; z-index:100, so it always sits in
   the bottom ~74px of the VIEWPORT. The footer legal bar had only 20px of
   padding beneath it, so at the foot of the page the badge landed on top of
   the legal links: "Terms & Conditions" was overlapped by 46px and its right
   edge was genuinely unclickable (verified by hit-test on production), and on
   hover the badge expands leftward to 256px, which would cover "Privacy
   Policy" too.

   The fix reserves that band under the legal bar. The badge itself is not
   touched, moved, hidden or restyled - reCAPTCHA and Contact Form 7 behave
   exactly as before. 96px = the badge's 74px band plus 22px of clearance.

   This rule applies wherever the Home Connect footer renders: every 2026
   template (which enqueue this sheet directly) and the live /shop/ page
   (which receives it inside the LiteSpeed combined bundle). Pages still using
   the Elementor footer have no .hc-ftr__bar, so the rule is simply inert
   there - it cannot affect them.
   ========================================================================== */
.hc-ftr__bar { padding-bottom: 96px; }

/* v23 mobile ecommerce QA */
@media (max-width: 620px) {
  .hc-promo .hc-wrap { min-height: 36px; padding: 4px 10px; }
  .hc-promo ul { width: 100%; justify-content: center; overflow: hidden; padding: 0; }
  .hc-promo li { display: none; }
  .hc-promo li:nth-child(2) { display: flex; padding: 0; font-size: 10.5px; letter-spacing: .035em; }
  .hc-promo li:nth-child(2)::before { display: none; }
  .hc-hdr__in { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px 12px; padding-top: 10px; padding-bottom: 12px; }
  .hc-burger { grid-column: 1; grid-row: 1; }
  .hc-logo { grid-column: 2; grid-row: 1; width: max-content; }
  .hc-logo img, .hc-home .hc-logo img { width: 122px; }
  .hc-acts { grid-column: 3; grid-row: 1; width: max-content; margin-left: auto; }
  .hc-search { grid-column: 1 / -1; grid-row: 2; order: initial; width: 100%; }
  .hc-hero__in { padding: 34px 0 92px; }
  .hc-hero h1 { font-size: 30px; }
  .hc-hero__sub { margin-top: 14px; font-size: 14.5px; line-height: 1.42; }
  .hc-hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .hc-hero__cta .hc-btn { min-height: 48px; padding: 0 10px; font-size: 12px; }
  .hc-trust ul { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px; scrollbar-width: none; }
  .hc-trust ul::-webkit-scrollbar { display: none; }
  .hc-trust li { flex: 0 0 84%; min-height: 76px; padding: 13px 10px; scroll-snap-align: start; border: 0 !important; }
  .hc-trust li + li::before { display: none; }
  .hc-sec { padding: 46px 0; }
}