/* ============================================================================
   CarportCentral — Product Category Archive (.cat26)
   ----------------------------------------------------------------------------
   Page layer for woocommerce/archive-product-custom.php. Sits ON TOP of
   cpc-tokens.css + cpc-components.css; it never replaces them.

   Markup contract: <div class="cpc-scope cat26"> … </div>

   Mobile-first by mandate, not by preference. 93% of the traffic landing on
   /product-category/garage is mobile (GA4, 2026-05-01 → 2026-08-15), and mobile
   converts at 0.20% against desktop's 1.31%. Every rule below is written for
   the small viewport first and widened with min-width queries.

   Zero hardcoded hex values. Every colour is a token.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Header clearance
   The fixed site header is 95px on mobile, 87px tablet, 84px desktop. Measured
   at runtime and published as --cat-hdr by the template; the fallback keeps the
   hero honest if the script is deferred or blocked.
   ------------------------------------------------------------------------ */
.cpc-scope.cat26 { --cat-hdr: 95px; }

/* ---------------------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------------------ */
.cat26 .cat-hero {
  position: relative;
  background: var(--cpc-dark-deep);
  color: var(--cpc-on-dark-body);
  padding-block: calc(var(--cat-hdr) + 22px) clamp(32px, 6vw, 64px);
  overflow: hidden;
}

/* Blueprint fx layer — the house hero treatment. Absolutely positioned so the
   hero itself never needs overflow:hidden fighting a sticky child. */
.cat26 .cat-hero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat26 .cat-hero__fx::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  var(--cpc-dark-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cpc-dark-grid) 1px, transparent 1px),
    linear-gradient(to right,  var(--cpc-dark-grid-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cpc-dark-grid-2) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  -webkit-mask-image: radial-gradient(120% 90% at 72% 10%, #000 55%, transparent);
          mask-image: radial-gradient(120% 90% at 72% 10%, #000 55%, transparent);
}
.cat26 .cat-hero__fx::after {
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,88,11,.26), transparent 68%);
}
.cat26 .cat-hero .cpc-wrap { position: relative; z-index: var(--cpc-z-content); }

/* Breadcrumb — inside the hero, low visual weight, still crawlable */
.cat26 .cat-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0 0 16px; padding: 0;
  font-size: .82rem; color: var(--cpc-on-dark-muted);
}
.cat26 .cat-crumbs a { color: var(--cpc-on-dark-muted); text-decoration: none; }
.cat26 .cat-crumbs a:hover { color: var(--cpc-orange-dark); text-decoration: underline; }
.cat26 .cat-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .55; }

.cat26 .cat-hero h1 { color: #fff !important; max-width: 16ch; }
.cat26 .cat-hero__lede {
  color: var(--cpc-on-dark-body);
  max-width: 52ch; margin-top: .9rem;
  font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.6;
}

/* Price + inventory line. Answers "how much" before the fold, which is the
   single most common bounce reason on a paid click. */
.cat26 .cat-hero__facts {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  margin-top: 1.1rem;
}
/* Middot between the figure and the finance line, so the two read as one
   thought rather than two separate facts. Suppressed once they wrap. */
.cat26 .cat-hero__finance::before {
  content: "\00b7"; margin-right: 16px; color: var(--cpc-on-dark-muted);
}
.cat26 .cat-hero__price { font-size: 1.05rem; color: #fff; font-weight: 600; }
.cat26 .cat-hero__price b { color: var(--cpc-orange-dark); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cat26 .cat-hero__finance { font-size: 1.05rem; color: var(--cpc-on-dark-body); font-weight: 400; }
.cat26 .cat-hero__finance b { color: #fff; font-weight: 700; }
.cat26 .cat-hero__count { font-size: .9rem; color: var(--cpc-on-dark-muted); }

/* DOM order is copy → form → extra, so a phone gets the quote card directly
   under the H1 and price instead of scrolling past chips and buttons first.
   Desktop puts `extra` back under `copy` in the left column with grid areas,
   which needs no duplicated markup and no order:-1 hacks. */
.cat26 .cat-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "form" "extra";
  gap: clamp(24px, 4vw, 40px);
}
.cat26 .cat-hero__grid > * { min-width: 0; }
.cat26 .cat-hero__copy  { grid-area: copy; }
.cat26 .cat-hero__form  { grid-area: form; }
.cat26 .cat-hero__extra { grid-area: extra; }

/* Inline quote card */
.cat26 .cat-quote {
  background: var(--cpc-ground);
  border-radius: var(--cpc-r-lg);
  box-shadow: var(--cpc-shadow-lg);
  overflow: hidden;
}
.cat26 .cat-quote__head {
  background: var(--cpc-dark);
  color: #fff;
  padding: 16px 20px 15px;
}
.cat26 .cat-quote__head .h { font-size: 1.12rem; font-weight: 700; line-height: 1.25; }
.cat26 .cat-quote__head p { margin: 5px 0 0; font-size: .86rem; color: var(--cpc-on-dark-muted); }
.cat26 .cat-quote__body { padding: 16px 18px 18px; }
.cat26 .cat-quote__foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-top: 1px solid var(--cpc-line);
  background: var(--cpc-tint);
  font-size: .8rem; color: var(--cpc-muted); text-align: center;
}

/* ---------------------------------------------------------------------------
   2. TRUST STRIP — sits directly under the hero, no section padding
   ------------------------------------------------------------------------ */
.cat26 .cat-trust { background: var(--cpc-dark); padding-block: 18px; }
.cat26 .cat-trust__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.cat26 .cat-trust__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cat26 .cat-trust__item .cpc-icon { color: var(--cpc-orange-dark); width: 22px; height: 22px; }
.cat26 .cat-trust__txt { min-width: 0; }
.cat26 .cat-trust__label {
  display: block; font-size: .82rem; font-weight: 600; color: #fff; line-height: 1.25;
}
.cat26 .cat-trust__sub { display: block; font-size: .72rem; color: var(--cpc-on-dark-muted); }

/* ---------------------------------------------------------------------------
   3. ROOF-STYLE CHOOSER — good / better / best
   ------------------------------------------------------------------------ */
.cat26 .cat-styles { display: grid; grid-template-columns: 1fr; gap: var(--cpc-gap-card); }
.cat26 .cat-style {
  position: relative; display: flex; flex-direction: column;
  background: var(--cpc-ground);
  border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md);
  overflow: hidden;
  box-shadow: var(--cpc-shadow-sm);
  transition: transform var(--cpc-t-lift), box-shadow var(--cpc-t-lift), border-color var(--cpc-t-lift);
}
.cat26 .cat-style:hover { transform: translateY(-3px); box-shadow: var(--cpc-shadow-md); border-color: var(--cpc-line-strong); }
.cat26 .cat-style--best { border-color: var(--cpc-orange); border-width: 2px; }
.cat26 .cat-style__rank {
  position: absolute; top: 12px; left: 12px; z-index: var(--cpc-z-content);
}
.cat26 .cat-style__media { display: block; aspect-ratio: 5/3; overflow: hidden; background: var(--cpc-tint); color: inherit; }
.cat26 .cat-style__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--cpc-t-media); }
.cat26 .cat-style:hover .cat-style__media img { transform: scale(1.04); }
.cat26 .cat-style__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.cat26 .cat-style__title { font-size: 1.05rem !important; font-weight: 700 !important; margin: 0 0 6px !important; }
.cat26 .cat-style__desc { font-size: .9rem; color: var(--cpc-ink-2); line-height: 1.55; margin: 0 0 16px; flex: 1; }

/* ---------------------------------------------------------------------------
   4. SIZE & CLEARANCE HELPER
   ------------------------------------------------------------------------ */
.cat26 .cat-sizer { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
.cat26 .cat-sizer > * { min-width: 0; }

.cat26 .cat-spec { border: 1px solid var(--cpc-line); border-radius: var(--cpc-r-md); overflow: hidden; background: var(--cpc-ground); }
.cat26 .cat-spec__head {
  padding: 13px 18px; background: var(--cpc-tint-2);
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cpc-ink-2);
}
.cat26 .cat-spec__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 18px; border-top: 1px solid var(--cpc-line);
}
.cat26 .cat-spec__row:first-of-type { border-top: 0; }
.cat26 .cat-spec__k { font-size: .93rem; font-weight: 600; color: var(--cpc-ink); }
.cat26 .cat-spec__v { font-size: .93rem; color: var(--cpc-ink-2); text-align: right; white-space: nowrap; }
.cat26 .cat-spec__note {
  padding: 13px 18px; border-top: 1px solid var(--cpc-line);
  background: var(--cpc-orange-tint); color: var(--cpc-ink-2);
  font-size: .86rem; line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   5. STEP / FEATURE CARDS — used by site-prep and financing bands
   ------------------------------------------------------------------------ */
.cat26 .cat-steps { display: grid; grid-template-columns: 1fr; gap: var(--cpc-gap-card); }
.cat26 .cat-step {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md);
  background: var(--cpc-ground);
}
.cat26 .cat-step h3 { font-size: 1.02rem !important; font-weight: 700 !important; margin: 0 !important; }
.cat26 .cat-step p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--cpc-ink-2); }

/* Dark variant for the financing band */
.cat26 .cat-section--dark .cat-step {
  background: var(--cpc-dark-2);
  border-color: var(--cpc-dark-line);
}
.cat26 .cat-section--dark .cat-step h3 { color: #fff !important; }
.cat26 .cat-section--dark .cat-step p  { color: var(--cpc-on-dark-body); }
.cat26 .cat-section--dark .cpc-iconbox { background: rgba(244,88,11,.16); color: var(--cpc-orange-dark); }

.cat26 .cat-section--dark {
  background: var(--cpc-dark-deep);
  color: var(--cpc-on-dark-body);
  padding-block: var(--cpc-section);
}
.cat26 .cat-section--dark h2 { color: #fff !important; }
.cat26 .cat-section--dark .cpc-sechead p { color: var(--cpc-on-dark-body); }

/* ---------------------------------------------------------------------------
   6. USE-CASE CHIPS
   ------------------------------------------------------------------------ */
/* Five use-case pills on one line that scrolls sideways. Wrapping cost three
   lines of hero height on a phone and pushed the quote form further down. */
.cat26 .cat-uses {
  display: flex; flex-wrap: nowrap; gap: 8px;
  margin-top: 1.2rem; list-style: none;
  padding: 0 0 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat26 .cat-uses::-webkit-scrollbar { display: none; }

/* The fades are hints that there is more to the side, so they are only painted
   while the row overflows, and each one lifts once you reach that end. The
   classes come from the template's inline script. */
.cat26 .cat-uses.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.cat26 .cat-uses.is-scrollable.at-start {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.cat26 .cat-uses.is-scrollable.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
}
.cat26 .cat-uses.is-scrollable.at-start.at-end {
  -webkit-mask-image: none; mask-image: none;
}

.cat26 .cat-uses li {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .8rem; font-weight: 600;
  padding: 6px 13px; border-radius: var(--cpc-r-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--cpc-dark-line);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   7. EDITORIAL — long-form category copy from ACF / term description
   ------------------------------------------------------------------------ */
.cat26 .cat-editorial { max-width: 74ch; margin-inline: auto; }
.cat26 .cat-editorial h2 { margin-bottom: .9rem !important; }
.cat26 .cat-editorial h3 { margin: 2rem 0 .7rem !important; font-size: 1.18rem !important; }
.cat26 .cat-editorial p { margin: 0 0 1.05rem; color: var(--cpc-ink-2); }
.cat26 .cat-editorial ul,
.cat26 .cat-editorial ol { margin: 0 0 1.05rem 1.15rem; color: var(--cpc-ink-2); }
.cat26 .cat-editorial li { margin-bottom: .45rem; }
.cat26 .cat-editorial a { color: var(--cpc-orange-ink); }
.cat26 .cat-editorial img { max-width: 100%; height: auto; border-radius: var(--cpc-r-md); }

/* ---------------------------------------------------------------------------
   8. RESOURCE LINKS — features / buyer's guide
   ------------------------------------------------------------------------ */
.cat26 .cat-resources { display: grid; grid-template-columns: 1fr; gap: var(--cpc-gap-tight); }
.cat26 .cat-resource {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md);
  background: var(--cpc-ground);
  text-decoration: none; color: inherit;
  transition: border-color var(--cpc-t-state), box-shadow var(--cpc-t-lift), transform var(--cpc-t-lift);
}
.cat26 .cat-resource:hover { border-color: var(--cpc-line-strong); box-shadow: var(--cpc-shadow-md); transform: translateY(-2px); }
.cat26 .cat-resource__txt { min-width: 0; }
.cat26 .cat-resource strong { display: block; font-size: .98rem; color: var(--cpc-ink); }
.cat26 .cat-resource span   { display: block; font-size: .84rem; color: var(--cpc-muted); }

/* ---------------------------------------------------------------------------
   9. PRODUCT GRID + LOAD MORE
   ------------------------------------------------------------------------ */
.cat26 .cat-more { display: flex; justify-content: center; margin-top: 2rem; }
.cat26 .cat-more[hidden] { display: none; }
.cat26 .cat-grid-status { text-align: center; color: var(--cpc-muted); font-size: .88rem; margin-top: 1rem; }

/* ---------------------------------------------------------------------------
   10. STICKY MOBILE ACTION BAR
   The hero form scrolls away after ~1.5 viewports on a phone. This keeps the
   primary conversion action permanently one tap away.
   ------------------------------------------------------------------------ */
.cat26 .cat-sticky {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--cpc-z-sticky);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(26,25,27,.96);
  border-top: 1px solid var(--cpc-dark-line);
  transform: translateY(110%);
  transition: transform var(--cpc-t-lift);
}
.cat26 .cat-sticky.is-on { transform: translateY(0); }
.cat26 .cat-sticky .cpc-btn { min-height: 48px; padding: 12px 14px; font-size: 15px; }

/* ---------------------------------------------------------------------------
   11. MEDIA QUERIES — mobile-first, so these widen rather than patch
   ------------------------------------------------------------------------ */
@media (min-width: 561px) {
  .cat26 .cat-styles,
  .cat26 .cat-steps,
  .cat26 .cat-resources { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .cpc-scope.cat26 { --cat-hdr: 87px; }
  .cat26 .cat-trust__grid { grid-template-columns: repeat(4, 1fr); }
  .cat26 .cat-trust__label { font-size: .86rem; }
  .cat26 .cat-sizer { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
  .cpc-scope.cat26 { --cat-hdr: 84px; }
  .cat26 .cat-hero__grid {
    grid-template-columns: 1.06fr .94fr;
    grid-template-areas: "copy form" "extra form";
    align-items: start;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 1.6rem;
  }
  .cat26 .cat-styles,
  .cat26 .cat-steps { grid-template-columns: repeat(3, 1fr); }
  .cat26 .cat-steps--4 { grid-template-columns: repeat(4, 1fr); }
  .cat26 .cat-sticky { display: none; }
}

/* ---------------------------------------------------------------------------
   12. REDUCED MOTION — required, not optional
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cat26 *,
  .cat26 *::before,
  .cat26 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cat26 .cat-sticky { transition: none; }
}

/* ---------------------------------------------------------------------------
   13. SIDE-RAIL CLEARANCE
   The theme paints two fixed rails on ≥768px: .sticky_logo_box (60px, left)
   and .sticky_button_box (100px, right), both z-index 99. A 1180px container
   centred in a 1280px viewport leaves only 50px a side, so the right rail
   lands on top of the hero form card. Cap the container against the viewport
   instead of hard-padding it, so wide screens keep the full 1180.
   ------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .cat26 .cpc-wrap { max-width: min(var(--cpc-maxw), calc(100vw - 220px)); }
}

/* ---------------------------------------------------------------------------
   14. HERO FORM — optional-details disclosure
   Gravity Form 1 asks for Name, Phone, Email, State and Zip (all required)
   plus an optional Message and a Turnstile challenge. On a 375px phone that
   put the submit button 1,220px down the page, and 93% of the traffic landing
   here is mobile. The Message field is the only optional one, so it collapses
   behind a disclosure: same capability, ~150px less form before the submit.
   Targeted on gfield--type-textarea (semantic) rather than :nth-child, so
   reordering the form cannot silently mispair fields.
   ------------------------------------------------------------------------ */
.cat26 .cat-quote .gform_wrapper .gfield--type-textarea { order: 90; }
.cat26 .cat-quote.is-collapsed .gform_wrapper .gfield--type-textarea { display: none; }

.cat26 .cat-quote__toggle {
  order: 89;
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  background: none; border: 0; padding: 4px 0;
  min-height: 44px;
  font: 600 .88rem/1.3 var(--cpc-font);
  color: var(--cpc-orange-ink);
  cursor: pointer;
}
.cat26 .cat-quote__toggle::before {
  content: "+"; font-size: 17px; line-height: 1;
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--cpc-r-pill);
  background: var(--cpc-orange-tint);
}
.cat26 .cat-quote:not(.is-collapsed) .cat-quote__toggle::before { content: "\2212"; }

/* ---------------------------------------------------------------------------
   15. EDITORIAL GUIDE BAND
   The ACF copy is 5,000+ characters of legacy WYSIWYG per category. Left bare
   it is a wall of prose arriving straight after a run of card sections, which
   is exactly where the page stopped feeling designed. Its own tinted band, a
   real type rhythm, and a height cap with a fade: all of the copy stays in the
   DOM and stays crawlable, the reader is just not asked to scroll past all of
   it before reaching the FAQ.
   ------------------------------------------------------------------------ */
.cat26 .cat-guide { max-width: 78ch; margin-inline: auto; }
.cat26 .cat-guide__head { margin-bottom: 1.6rem; }
.cat26 .cat-guide__head h2 { margin-bottom: .5rem !important; }
.cat26 .cat-guide__sub { color: var(--cpc-ink-2); font-size: 1.04rem; margin: 0; }

.cat26 .cat-guide__body { position: relative; }
.cat26 .cat-guide.is-clamped .cat-guide__body {
  max-height: 34rem;
  overflow: hidden;
}
.cat26 .cat-guide.is-clamped .cat-guide__body::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 11rem;
  background: linear-gradient(to bottom, rgba(246,246,247,0), var(--cpc-tint) 82%);
  pointer-events: none;
}
.cat26 .cat-guide__more { display: flex; justify-content: center; margin-top: 1.4rem; }
.cat26 .cat-guide:not(.is-clamped) .cat-guide__more { margin-top: 2rem; }

/* Type rhythm inside the WYSIWYG. Headings carry !important because
   style.css ships sitewide h1-h6 rules that are themselves !important. */
.cat26 .cat-editorial > h2 {
  font-size: 1.34rem !important; margin: 2.6rem 0 .8rem !important;
  padding-top: 1.6rem; border-top: 1px solid var(--cpc-line);
}
.cat26 .cat-editorial > h2:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.cat26 .cat-editorial > h3 {
  font-size: 1.08rem !important; margin: 1.8rem 0 .5rem !important;
  padding-left: 14px; border-left: 3px solid var(--cpc-orange);
}
.cat26 .cat-editorial > h3 a { color: var(--cpc-ink); text-decoration: none; }
.cat26 .cat-editorial > h3 a:hover { color: var(--cpc-orange-ink); text-decoration: underline; }
.cat26 .cat-editorial ol,
.cat26 .cat-editorial ul { padding-left: 1.15rem; }
.cat26 .cat-editorial li { margin-bottom: .5rem; color: var(--cpc-ink-2); }

.cat26 .cat-resources { margin-top: clamp(32px, 5vw, 52px); }

/* ---------------------------------------------------------------------------
   16. CLOSING 3D SECTION
   Replaces a dark "get a quote" band that duplicated the sitewide pre-footer
   CTA sitting directly beneath it, and slammed a hard black edge into that
   band's pale elliptical gradient. Running on the tint steps the page down
   into the pre-footer instead; the weight lives in an inset panel.
   ------------------------------------------------------------------------ */
.cat26 .cat-3d__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.cat26 .cat-3d__grid > * { min-width: 0; }
.cat26 .cat-3d__lede { color: var(--cpc-ink-2); font-size: 1.05rem; margin: .9rem 0 0; max-width: 46ch; }

.cat26 .cat-3d__steps {
  list-style: none; margin: 1.5rem 0 1.9rem; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.cat26 .cat-3d__steps li {
  display: flex; align-items: center; gap: 13px;
  font-size: .96rem; font-weight: 500; color: var(--cpc-ink);
}
.cat26 .cat-3d__note { font-size: .85rem; color: var(--cpc-muted); margin: .85rem 0 0; }

.cat26 .cat-3d__panel {
  position: relative; overflow: hidden;
  border-radius: var(--cpc-r-lg);
  background: var(--cpc-dark-deep);
  color: var(--cpc-orange-dark);
  box-shadow: var(--cpc-shadow-lg);
  padding: 0 0 26px;
}
.cat26 .cat-3d__fx { position: absolute; inset: 0; pointer-events: none; }
.cat26 .cat-3d__fx::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  var(--cpc-dark-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cpc-dark-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.cat26 .cat-3d__chrome {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 12px 16px; border-bottom: 1px solid var(--cpc-dark-line);
}
.cat26 .cat-3d__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.cat26 .cat-3d__file {
  margin-left: 10px; font-size: .74rem; letter-spacing: .04em;
  color: var(--cpc-on-dark-muted);
}
/* The stage is the grab target. touch-action: pan-y is deliberate: a vertical
   swipe still scrolls the page, a horizontal drag turns the building. Locking
   it to `none` would trap a phone user inside the panel. */
.cat26 .cat-3d__stage {
  position: relative;
  touch-action: pan-y;
  cursor: grab;
  border-radius: var(--cpc-r-md);
}
.cat26 .cat-3d__stage:active { cursor: grabbing; }
.cat26 .cat-3d__stage:focus-visible {
  outline: 2px solid var(--cpc-orange-dark);
  outline-offset: -2px;
}
.cat26 .cat-3d__art { position: relative; display: block; width: 100%; height: auto; padding: 22px 18px 4px; }
.cat26 .cat-3d__art path { transition: none; }

.cat26 .cat-3d__badge {
  position: relative; display: block; width: fit-content; margin: 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--cpc-r-pill);
  background: rgba(244,88,11,.18); border: 1px solid rgba(244,88,11,.5);
  color: var(--cpc-orange-dark);
  transition: opacity var(--cpc-t-state);
}
/* Once they have turned it, the instruction has done its job. */
.cat26 .cat-3d__badge.is-used { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cat26 .cat-3d__badge { transition: none; }
}

@media (min-width: 860px) {
  .cat26 .cat-3d__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   17. PRICE BLOCK
   One block, two states. Same three lines either way so the card does not
   change shape when the toggle flips: identifier, price claim, payment terms.

   Type comes from the system: §2 is Poppins, and the one mono role tokens.css
   defines (.cpc-tnum, which pulls --cpc-font-mono) is for tabular numerals in
   data columns. A SKU is mixed alphanumeric sitting inside a Poppins card, so
   borrowing that class swapped the typeface mid-line. The whole block stays in
   Poppins and gets font-variant-numeric instead, which keeps SKUs and prices
   aligned down a grid column without importing a second face.
   ------------------------------------------------------------------------ */
.cat26 .cat-price {
  display: flex; flex-direction: column; gap: 3px;
  margin: 0 0 12px;
}

/* Caption role: .74rem Poppins, muted, light tracking. Not monospace. */
.cat26 .cat-price__sku {
  font-size: .74rem; font-weight: 500; letter-spacing: .05em;
  color: var(--cpc-muted); line-height: 1.3;
}
.cat26 .cat-price__code {
  color: var(--cpc-ink-2); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* Both price states carry the accent, so neither arm of the A/B test reads
   louder than the other: whichever way the toggle is set, the commercial line
   is the orange one. --cpc-orange-ink is the only orange that passes AA as
   text; --cpc-orange is a fill and must never be used here.

   The terms line is the system pill (§8, the status/spec form) rather than a
   third run of orange text. Tint background against orange-ink text sits below
   the solid CTA fill in contrast, so the reading order down the card stays
   figure, then terms, then button. */
.cat26 .cat-price__figure {
  font-size: .92rem; font-weight: 600; color: var(--cpc-orange-ink); line-height: 1.3;
}
.cat26 .cat-price__figure b {
  font-weight: 700; color: var(--cpc-orange-ink); font-variant-numeric: tabular-nums;
}
.cat26 .cat-price__figure--guarantee { color: var(--cpc-orange-ink); font-weight: 700; }

/* Pill overrides: the card column is 286px, so the default .05em tracking on
   an uppercase string this long overflows. Tightened and allowed to wrap. */
.cat26 .cat-price__terms {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .04em;
  padding: 5px 10px;
  line-height: 1.35;
  white-space: nowrap;
}

/* The roof-style cards carry no SKU, so their block starts at the figure and
   wants a little more presence than the product-card version. */
.cat26 .cat-style .cat-price { margin-bottom: 14px; }
.cat26 .cat-style .cat-price__figure { font-size: .95rem; }

/* Hero variant: a bordered chip rather than stacked lines, so it holds the
   same visual slot the "From $7,062" line occupied. */
.cat26 .cat-hero__guarantee {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 600; color: #fff;
  padding: 7px 15px; border-radius: var(--cpc-r-pill);
  background: rgba(244,88,11,.18);
  border: 1px solid rgba(244,88,11,.5);
}
.cat26 .cat-hero__guarantee .cpc-icon { color: var(--cpc-orange-dark); }
/* After the chip the middot has nothing to join, so it comes off. */
.cat26 .cat-hero__guarantee + .cat-hero__finance::before { content: none; margin: 0; }

/* ---------------------------------------------------------------------------
   18. WAYS TO PAY
   Restructured from prose paragraphs to bullets plus a CTA per card, matching
   the CarportDirect layout Taleaha pointed at. Each route now answers "what do
   I get" in three scannable lines and offers its own next step, rather than
   sending everyone to the same generic financing link.
   ------------------------------------------------------------------------ */
.cat26 .cat-pay { gap: 14px; }
.cat26 .cat-pay h3 { margin: 0 !important; }

.cat26 .cat-pay__points {
  list-style: none; margin: 0; padding: 0; flex: 1;
  display: flex; flex-direction: column; gap: 9px;
}
.cat26 .cat-pay__points li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .9rem; line-height: 1.45; color: var(--cpc-on-dark-body);
}
.cat26 .cat-pay__tick {
  color: var(--cpc-go); flex: none; margin-top: 2px;
  stroke-width: 2.2;
}
.cat26 .cat-pay .cpc-btn { margin-top: 4px; }