/* ==========================================================================
   CDH26 — CarportDirect homepage design layer
   Scoped to .cdh26 so nothing here can reach the rest of the site.
   Mobile-first. Only loaded on the "Home page CDH26" template.

   This layer is CarportDirect's OWN language, read out of the theme's app.css:
     navy        #102E61   .banner-section background, .btn-primary
     deep navy   #091935   .search_container background
     brand red   #DE3539   .btn-red, hover #C11F23
     text greys  #222 / #444 / #575758      (plain grey, never blue-tinted)
     headings    .heading-box { text-transform: uppercase }
   The only thing that changes is the geometry: 10px card corners instead of
   square, and a real touch-target scale. Type stays uppercase, buttons stay
   rectangular, colours stay exact.

   Type reuses the theme's self-hosted Graphik, so no extra font request.
   ========================================================================== */

.cdh26 {
    /* Brand, straight from app.css. Do not "adjust" these. */
    --cdh-navy: #102E61;
    --cdh-navy-900: #091935;
    --cdh-navy-700: #163D7D;
    --cdh-red: #DE3539;
    --cdh-red-hover: #C11F23;   /* app.css .btn-red:hover */

    /* Neutrals: CarportDirect uses plain greys. */
    --cdh-ink: #222222;
    --cdh-text: #444444;
    --cdh-body: #575758;
    --cdh-muted: #6E6E70;
    --cdh-line: #E2E2E4;
    --cdh-bg-alt: #F5F6F7;
    --cdh-bg-img: #EFEFF1;

    /* Geometry. The whole point of the brief: knock the corners off. */
    --cdh-r-sm: 6px;            /* buttons, inputs, chips */
    --cdh-r-md: 10px;           /* cards */
    --cdh-r-lg: 14px;           /* large panels */
    --cdh-r-pill: 999px;        /* hero search bar only */

    /* Neutral grey shadows. The legacy cards used a red-tinted shadow. */
    --cdh-sh-1: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .06);
    --cdh-sh-2: 0 2px 6px rgba(0, 0, 0, .07), 0 12px 28px rgba(0, 0, 0, .10);
    --cdh-sh-3: 0 8px 24px rgba(0, 0, 0, .13), 0 28px 56px rgba(0, 0, 0, .16);

    --cdh-gap: 24px;
    --cdh-pad: clamp(56px, 7vw, 96px);
    --cdh-max: 1380px;          /* matches the theme's own .container */
    --cdh-t: 200ms cubic-bezier(.4, 0, .2, 1);

    color: var(--cdh-body);
    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

.cdh26 img { max-width: 100%; height: auto; }

.cdh-wrap {
    width: 100%;
    max-width: var(--cdh-max);
    margin: 0 auto;
    padding: 0 20px;
}

.cdh-sec { padding: var(--cdh-pad) 0; }
.cdh-sec--alt { background: var(--cdh-bg-alt); }
.cdh-sec--navy { background: var(--cdh-navy); color: #E3EAF6; }

/* ── Type ───────────────────────────────────────────────────────────────────
   CarportDirect sets headings uppercase site-wide via .heading-box. Kept. */
/* :where() keeps these as DEFAULTS. Without it the compound selector is
   specificity (0,1,1) and silently beats every single-class component rule
   below, which is how the hero sub-head lost `margin: 0 auto` and rendered
   left-aligned. Do not remove the :where(). */
.cdh26 :where(h1, h2, h3, h4) {
    color: var(--cdh-ink);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
}
.cdh-sec--navy h2,
.cdh-sec--navy h3 { color: #fff; }

.cdh-h1 { font-size: clamp(30px, 5.6vw, 52px); line-height: 1.1; text-transform: uppercase; }
/* The headline break is a desktop composition choice. On a phone it just costs
   a fourth line above the search bar. */
.cdh-brk { display: none; }
@media (min-width: 768px) { .cdh-brk { display: inline; } }
.cdh-h2 { font-size: clamp(22px, 3.2vw, 32px); text-transform: uppercase; }
.cdh-h3 { font-size: clamp(17px, 2.2vw, 20px); }

.cdh26 :where(p) { margin: 0 0 16px; line-height: 1.65; font-size: 16px; }
.cdh-lead { font-size: clamp(15px, 1.9vw, 17px); line-height: 1.6; color: var(--cdh-body); }
.cdh-muted { color: var(--cdh-muted); }

/* The theme's own eyebrow: the small line above a heading inside .heading-box.
   Uppercase and quiet, not a coloured pill. */
.cdh-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cdh-muted);
    margin: 0 0 8px;
}
.cdh-sec--navy .cdh-eyebrow,
.cdh-final .cdh-eyebrow { color: #9FB6DE; }

.cdh-head { margin-bottom: 40px; }
.cdh-head--center { text-align: center; max-width: 780px; margin-inline: auto; }
.cdh-head .cdh-h2 { margin-bottom: 14px; }
.cdh-head .cdh-lead { margin-bottom: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────────
   Rectangular with a small radius, matching .btn-red / .btn-primary. */
.cdh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--cdh-r-sm);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color var(--cdh-t), border-color var(--cdh-t), color var(--cdh-t), box-shadow var(--cdh-t);
}
.cdh-btn:hover, .cdh-btn:focus { text-decoration: none; }

/* Red is THE call to action on this site. One button style on every card. */
.cdh-btn--primary { background: var(--cdh-red); border-color: var(--cdh-red); color: #fff !important; }
.cdh-btn--primary:hover, .cdh-btn--primary:focus { background: var(--cdh-red-hover); border-color: var(--cdh-red-hover); }

.cdh-btn--navy { background: var(--cdh-navy); border-color: var(--cdh-navy); color: #fff !important; }
.cdh-btn--navy:hover, .cdh-btn--navy:focus { background: var(--cdh-navy-700); border-color: var(--cdh-navy-700); }

.cdh-btn--ghost { background: #fff; border-color: #CDCDD0; color: var(--cdh-text) !important; }
.cdh-btn--ghost:hover, .cdh-btn--ghost:focus { border-color: var(--cdh-navy); color: var(--cdh-navy) !important; }

.cdh-btn--onnavy { background: #fff; border-color: #fff; color: var(--cdh-navy) !important; }
.cdh-btn--onnavy:hover, .cdh-btn--onnavy:focus { background: #E3EAF6; border-color: #E3EAF6; }

.cdh-btn--outline-light { background: transparent; border-color: rgba(255,255,255,.6); color: #fff !important; }
.cdh-btn--outline-light:hover, .cdh-btn--outline-light:focus { border-color: #fff; background: rgba(255,255,255,.12); }

.cdh-btn--block { display: flex; width: 100%; }

/* Quiet text link, for "see all" navigation only. Never on a card. */
.cdh-tlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cdh-navy);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}
.cdh-tlink:hover, .cdh-tlink:focus { color: var(--cdh-red-hover); text-decoration: underline; }
.cdh-tlink svg { transition: transform var(--cdh-t); }
.cdh-tlink:hover svg { transform: translateX(3px); }

.cdh26 a:focus-visible,
.cdh26 button:focus-visible,
.cdh26 input:focus-visible,
.cdh26 select:focus-visible,
.cdh26 summary:focus-visible {
    outline: 3px solid #7FA8F0;
    outline-offset: 2px;
    border-radius: var(--cdh-r-sm);
}
/* The segment paints the focus state for these two. */
.cdh-seg .cdh-input:focus-visible,
.cdh-seg .cdh-select:focus-visible { outline: none; }

/* ══ HERO ══════════════════════════════════════════════════════════════════
   Airbnb pattern: one full-bleed photograph, the headline sitting on it, and a
   single wide segmented search bar as the only thing asking for input. The
   search bar lives inside the hero rather than after the image, which is what
   pushed the legacy search bar ~870px down the page. */
.cdh-hero {
    position: relative;
    background: var(--cdh-navy-900);
    color: #fff;
    isolation: isolate;
}
.cdh-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}
.cdh-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 68%;
}
.cdh-hero__bg::after {
    /* Two scrims. The vertical one carries the top and bottom edges; the radial
       one sits behind the headline and sub-head, which otherwise wash out where
       the photo goes bright (the white building wall runs right through the
       middle of this crop). */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(110% 76% at 50% 42%, rgba(9, 25, 53, .48) 0%, rgba(9, 25, 53, .14) 62%, rgba(9, 25, 53, 0) 100%),
        linear-gradient(to bottom,
            rgba(9, 25, 53, .58) 0%,
            rgba(9, 25, 53, .20) 45%,
            rgba(9, 25, 53, .68) 100%);
}

.cdh-hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 62vh;
    padding: 40px 0 34px;
    text-align: center;
}
.cdh-hero h1 {
    color: #fff;
    margin: 0 0 18px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.cdh-hero__sub {
    color: #FFFFFF;
    font-size: clamp(15px, 2vw, 19px);
    font-weight: 500;
    line-height: 1.55;
    margin: 0 auto 32px;
    max-width: 58ch;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 16px rgba(0, 0, 0, .5);
}

/* ── Airbnb-style segmented search bar ─────────────────────────────────────
   Mobile: a stacked white card. Desktop: one pill, hairline dividers between
   segments, red submit at the end. */
.cdh-search {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--cdh-r-lg);
    box-shadow: var(--cdh-sh-3);
    padding: 8px;
    text-align: left;
}
.cdh-search__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.cdh-seg {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 68px;
    padding: 12px 16px;
    border-radius: var(--cdh-r-md);
    transition: background-color var(--cdh-t), box-shadow var(--cdh-t);
}
.cdh-seg:hover { background: #F2F2F3; }
/* Airbnb lifts the active segment onto its own white pill. It also makes the
   hit area the whole segment rather than the bare line box of the input. */
.cdh-seg:focus-within {
    background: #fff;
    box-shadow: 0 0 0 2px var(--cdh-navy) inset;
}
.cdh-seg > label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cdh-ink);
    margin: 0 0 4px;
    cursor: pointer;
}
.cdh-input,
.cdh-select {
    width: 100%;
    min-height: 28px;
    border: 0;
    padding: 2px 0;
    background: transparent;
    color: var(--cdh-ink);
    font-size: 17px;              /* >=16px stops iOS zoom-on-focus */
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.cdh-input::placeholder { color: #8A8A8C; }
.cdh-select {
    padding-right: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23575758' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    cursor: pointer;
}

/* Hairline between segments, the Airbnb divider. */
.cdh-seg + .cdh-seg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--cdh-line);
}
.cdh-seg:hover::before,
.cdh-seg:hover + .cdh-seg::before { background: transparent; }

.cdh-search__go { display: flex; padding: 10px 6px 6px; }
.cdh-search__go .cdh-btn { width: 100%; }

.cdh-search__error {
    display: none;
    margin: 0;
    padding: 6px 14px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cdh-red-hover);
}
.cdh-search.is-error .cdh-search__error { display: block; }
.cdh-search.is-error .cdh-seg--budget { box-shadow: inset 0 0 0 2px var(--cdh-red); }

.cdh-hero__alt {
    margin: 26px 0 0;
    font-size: 15.5px;
    color: #EDF1F8;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.cdh-hero__alt button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.cdh-hero__alt button:hover { color: #FFD9DA; }

/* ══ TRUST STRIP ═══════════════════════════════════════════════════════════ */
.cdh-trust { background: var(--cdh-navy); padding: 34px 0; }
.cdh-trust__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
    text-align: center;
}
.cdh-trust__n {
    display: block;
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}
.cdh-trust__l {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #B9CBE8;
}

/* ══ CARD ══════════════════════════════════════════════════════════════════
   ONE card, ONE button. Category cards and product cards are structurally
   identical: the image and the title are the links to the page, and a single
   full-width red button is the only button on the card. */
.cdh-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--cdh-line);
    border-radius: var(--cdh-r-md);
    box-shadow: var(--cdh-sh-1);
    overflow: hidden;
    transition: transform var(--cdh-t), box-shadow var(--cdh-t), border-color var(--cdh-t);
}
.cdh-card:hover,
.cdh-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--cdh-sh-2);
    border-color: #CFCFD3;
}

.cdh-card__media {
    position: relative;
    display: block;
    background: var(--cdh-bg-img);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.cdh-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
.cdh-card:hover .cdh-card__media img { transform: scale(1.04); }

.cdh-card__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 11px;
    border-radius: var(--cdh-r-sm);
    background: rgba(9, 25, 53, .88);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cdh-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 22px 22px;
}
.cdh-card__title { font-size: 19px; line-height: 1.3; margin: 0 0 10px; }
/* Inline anchors box to the font size, not the line box, so a single-line
   title measured 19px tall and failed the WCAG target-size check. Block-level
   gives it the full line box plus a little padding. */
.cdh-card__title a { display: block; padding: 2px 0; color: var(--cdh-text); text-decoration: none; }
.cdh-card__title a:hover, .cdh-card__title a:focus { color: var(--cdh-navy); }

.cdh-card__desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--cdh-body);
    margin: 0 0 16px;
}

/* Spec chips: width, length, roof style. */
.cdh-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.cdh-specs li {
    padding: 4px 10px;
    border-radius: var(--cdh-r-sm);
    background: var(--cdh-bg-alt);
    border: 1px solid var(--cdh-line);
    color: var(--cdh-text);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* The single action, pinned to the bottom so every button in a row lines up. */
.cdh-card__foot { margin-top: auto; }
.cdh-card__note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cdh-muted);
}

/* ── Grids ──────────────────────────────────────────────────────────────── */
.cdh-grid { display: grid; gap: var(--cdh-gap); grid-template-columns: 1fr; }
.cdh-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ══ PRODUCT SHELF ═════════════════════════════════════════════════════════ */
.cdh-shelf__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 34px;
}
.cdh-shelf__head .cdh-h2 { margin-bottom: 0; }
.cdh-shelf__head > div { min-width: 0; }
.cdh-shelf__foot { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.cdh-shelf__foot .cdh-btn { flex: 1 1 240px; }

/* ══ STEPS ═════════════════════════════════════════════════════════════════ */
.cdh-steps { counter-reset: cdhstep; display: grid; gap: 20px; grid-template-columns: 1fr; }
.cdh-step {
    padding: 24px 22px 22px;
    background: #fff;
    border: 1px solid var(--cdh-line);
    border-radius: var(--cdh-r-md);
    box-shadow: var(--cdh-sh-1);
}
.cdh-step::before {
    counter-increment: cdhstep;
    content: counter(cdhstep);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 14px;
    border-radius: var(--cdh-r-sm);
    background: var(--cdh-navy);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.cdh-step h3 { font-size: 17px; margin-bottom: 6px; text-transform: uppercase; }
.cdh-step p { font-size: 15px; margin: 0; }

/* ══ WAYS TO PAY ═══════════════════════════════════════════════════════════ */
.cdh-ways { display: grid; gap: 20px; grid-template-columns: 1fr; }
.cdh-way {
    display: flex;
    flex-direction: column;
    padding: 26px 22px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--cdh-r-md);
    transition: background-color var(--cdh-t), border-color var(--cdh-t);
}
.cdh-way:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .32); }
.cdh-way__ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 0 14px;
    border-radius: var(--cdh-r-sm);
    background: rgba(255, 255, 255, .15);
    color: #fff;
}
.cdh-way h3 { font-size: 19px; margin-bottom: 10px; text-transform: uppercase; }
.cdh-way ul { margin: 0 0 22px; padding: 0; list-style: none; }
.cdh-way li {
    position: relative;
    padding: 0 0 0 24px;
    margin: 0 0 9px;
    color: #D6DFEF;
    font-size: 14.5px;
    line-height: 1.5;
}
.cdh-way li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 9px;
    border-left: 2.5px solid #7FE3A6;
    border-bottom: 2.5px solid #7FE3A6;
    transform: rotate(-45deg);
}
.cdh-way .cdh-btn { margin-top: auto; }

/* ══ RESOURCE CARDS ════════════════════════════════════════════════════════ */
.cdh-res {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--cdh-line);
    border-radius: var(--cdh-r-md);
    box-shadow: var(--cdh-sh-1);
    text-decoration: none;
    transition: transform var(--cdh-t), box-shadow var(--cdh-t), border-color var(--cdh-t);
}
.cdh-res:hover, .cdh-res:focus {
    transform: translateY(-3px);
    box-shadow: var(--cdh-sh-2);
    border-color: #CFCFD3;
    text-decoration: none;
}
.cdh-res__ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--cdh-r-sm);
    background: var(--cdh-bg-alt);
    border: 1px solid var(--cdh-line);
    color: var(--cdh-navy);
}
.cdh-res__t {
    display: block;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cdh-ink);
    line-height: 1.3;
}
.cdh-res__d { display: block; margin-top: 4px; font-size: 13.5px; color: var(--cdh-muted); line-height: 1.4; }

/* ══ FAQ ═══════════════════════════════════════════════════════════════════ */
.cdh-faq { max-width: 900px; margin-inline: auto; }
.cdh-faq details {
    background: #fff;
    border: 1px solid var(--cdh-line);
    border-radius: var(--cdh-r-md);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color var(--cdh-t), box-shadow var(--cdh-t);
}
.cdh-faq details[open] { border-color: #CFCFD3; box-shadow: var(--cdh-sh-1); }
.cdh-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 20px;
    min-height: 56px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cdh-ink);
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}
.cdh-faq summary::-webkit-details-marker { display: none; }
.cdh-faq summary::after {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    border-right: 2.5px solid var(--cdh-navy);
    border-bottom: 2.5px solid var(--cdh-navy);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--cdh-t);
}
.cdh-faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.cdh-faq summary:hover { background: var(--cdh-bg-alt); }
.cdh-faq__a { padding: 0 20px 22px; }
.cdh-faq__a p { font-size: 15.5px; margin: 0; }

/* ══ CLOSING CTA ═══════════════════════════════════════════════════════════ */
.cdh-final { background: var(--cdh-navy-900); color: #fff; text-align: center; }
.cdh-final h2 { color: #fff; }
.cdh-final p { color: #D6DFEF; max-width: 62ch; margin-inline: auto; }
.cdh-final__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}
.cdh-final__btns .cdh-btn { flex: 1 1 240px; max-width: 340px; }

/* ══ SEO COPY ══════════════════════════════════════════════════════════════ */
.cdh-copy { max-width: 900px; margin-inline: auto; }
.cdh-copy h2 { font-size: clamp(20px, 3vw, 26px); margin-top: 34px; text-transform: uppercase; }
.cdh-copy h3 { font-size: clamp(17px, 2.2vw, 20px); margin-top: 26px; }
.cdh-copy h2:first-child { margin-top: 0; }
.cdh-copy p, .cdh-copy li { font-size: 16px; line-height: 1.72; }
.cdh-copy ul, .cdh-copy ol { padding-left: 22px; margin: 0 0 16px; }
.cdh-copy li { margin-bottom: 8px; }
/* Editorial copy comes from the page editor, including tel: links. Pad the
   inline box so those clear the 24px target-size floor without changing the
   line rhythm. */
.cdh-copy a { display: inline-block; padding: 3px 0; color: var(--cdh-navy); font-weight: 600; text-decoration: underline; }
.cdh-copy a:hover { color: var(--cdh-red-hover); }

/* Vue hydrates the hero controls. Hide anything still un-bound so the search
   bar never flashes raw template syntax. */
.cdh26 [v-cloak] { visibility: hidden; }

/* ══ STICKY MOBILE ACTION BAR ══════════════════════════════════════════════ */
.cdh-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;                       /* JS raises this above the promo marquee */
    z-index: 998;                    /* under #sticky-marquee (999) and modals (1040) */
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(9, 25, 53, .97);
}
.cdh-sticky .cdh-btn { flex: 1 1 0; min-height: 46px; font-size: 15px; padding: 10px 12px; }
.cdh26-has-sticky { padding-bottom: 120px; }

/* Third-party overlay: .scw-widget is a fixed cross-link badge to
   carportcentral.com/expert-insights pinned at left:0 / top:90-100px, which
   lands on the hero headline. Hidden on the homepage only. Remove to restore. */
body.page-template-homepage-cdh26 .scw-widget { display: none; }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */
@media (min-width: 576px) {
    .cdh-trust__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
    .cdh-wrap { padding: 0 30px; }     /* matches the theme's .container */
    .cdh-grid--2, .cdh-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .cdh-steps { grid-template-columns: repeat(2, 1fr); }
    .cdh-ways { grid-template-columns: repeat(3, 1fr); }
    .cdh-sticky { display: none; }
    .cdh26-has-sticky { padding-bottom: 0; }
    .cdh-hero__inner { min-height: 58vh; padding: 56px 0 48px; }
}

@media (min-width: 992px) {
    .cdh-grid--3, .cdh-grid--cats { grid-template-columns: repeat(3, 1fr); }
    .cdh-steps { grid-template-columns: repeat(4, 1fr); }

    /* Airbnb bar: one pill, segments divided by hairlines, red submit. */
    .cdh-search {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        border-radius: var(--cdh-r-pill);
        padding: 6px 6px 6px 8px;
    }
    .cdh-search__grid {
        flex: 1 1 auto;
        grid-template-columns: 1.15fr 1fr;
    }
    .cdh-seg { border-radius: var(--cdh-r-pill); padding: 12px 26px; min-height: 66px; }
    .cdh-search__go { padding: 0 0 0 8px; align-items: center; }
    .cdh-search__go .cdh-btn {
        width: auto;
        height: 58px;
        padding: 0 32px;
        border-radius: var(--cdh-r-pill);
        white-space: nowrap;
    }
    .cdh-search__error { flex: 1 0 100%; padding: 4px 22px 8px; }
    .cdh-search.is-error .cdh-seg--budget { border-radius: var(--cdh-r-pill); }
}

/* Short laptop viewports: keep the search bar clear of the fold. */
@media (min-width: 992px) and (max-height: 800px) {
    .cdh-hero__inner { min-height: 0; padding: 34px 0 30px; }
    .cdh-h1 { font-size: clamp(28px, 3.4vw, 38px); }
    .cdh-hero__sub { font-size: 16px; margin-bottom: 20px; }
}

/* ══ MOTION ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .cdh26 *,
    .cdh26 *::before,
    .cdh26 *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .cdh-card:hover { transform: none; }
    .cdh-card:hover .cdh-card__media img { transform: none; }
}

@media print {
    .cdh-sticky, .cdh-hero__bg { display: none; }
}