/* ===================================================================
   OHB2 Theme — Stage A
   Colors: #1A567A (deep blue) | #14405C (navy bar) | #E9BB52 (gold)
           #F0F0F0 (gray band) | #D9D9D9 (border) | #fff (white)
   Custom CSS only — no Tailwind
   =================================================================== */

/* -------------------------------------------------------------------
   PAGE COLUMN — single source of truth  (2026-09-24, Sara)

   The theme was built to the design PDF's measured 940px content column.
   Mike reported it reads much narrower than the BD dealer sites he is used
   to, which is what forced every type size down. Measured on the live stock
   theme, the BD content column is 1150px:

     shedsmurfreesboro.com      1150px  (border-box, no padding)
     shedsbowlinggreen.com      1150px
     oldhickory.barndealerdev   1150px  (stock oldhickory)
     derksen.barndealerdev      1150px  (stock derksen)

   Sara has overridden the 940 in favour of parity with those sites, so the
   column is now 1150 and every cap below derives from it. Revert = set
   --ohb2-col back to 940px; nothing else needs touching.

     --ohb2-col         the true CONTENT box, for containers with no padding
     --ohb2-col-gutter  for `.ohb2-wrap`-style boxes that carry `padding: 0 20px`
                        and are border-box, so their content box lands on --ohb2-col
     --ohb2-col-wide    the promo-duo band, drawn wider than the column
   ------------------------------------------------------------------- */
:root {
    --ohb2-col: 1150px;
    --ohb2-col-gutter: calc(var(--ohb2-col) + 40px);
    --ohb2-col-wide: 1281px;
}

/* -------------------------------------------------------------------
   PAGE COLUMN — single source of truth  (2026-09-24, Sara)

   The theme was built to the design PDF's measured 940px content column.
   Mike reported it reads much narrower than the BD dealer sites he is used
   to, which is what forced every type size down. Measured on the live stock
   theme, the BD content column is 1150px:

     shedsmurfreesboro.com      1150px  (border-box, no padding)
     shedsbowlinggreen.com      1150px
     oldhickory.barndealerdev   1150px  (stock oldhickory)
     derksen.barndealerdev      1150px  (stock derksen)

   Sara has overridden the 940 in favour of parity with those sites, so the
   column is now 1150 and every cap below derives from it. Revert = set
   --ohb2-col back to 940px; nothing else needs touching.

     --ohb2-col         the true CONTENT box, for containers with no padding
     --ohb2-col-gutter  for `.ohb2-wrap`-style boxes that carry `padding: 0 20px`
                        and are border-box, so their content box lands on --ohb2-col
     --ohb2-col-wide    the promo-duo band, drawn wider than the column
   ------------------------------------------------------------------- */
:root {
    --ohb2-col: 1150px;
    --ohb2-col-gutter: calc(var(--ohb2-col) + 40px);
    --ohb2-col-wide: 1281px;
}

/* ------------------------------------------------------------------
   Base / Reset helpers specific to ohb2
   ------------------------------------------------------------------ */
.ohb2-body * {
    box-sizing: border-box;
}
.ohb2-body {
    font-family: inherit;
    margin: 0;
    padding: 0;
    color: #333;
}
.ohb2-wrap {
    /* border-box + its own 20px gutter, so the CONTENT box lands on --ohb2-col */
    max-width: var(--ohb2-col-gutter);
    margin: 0 auto;
    padding: 0 20px;
}

/* ------------------------------------------------------------------
   Utility bar  (top navy strip: phone + social)
   ------------------------------------------------------------------ */
.ohb2-utility-bar {
    background: #14405C;
    color: #fff;
    padding: 8px 20px;
}
.ohb2-utility-bar-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}
.ohb2-utility-bar .call-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.ohb2-utility-bar .call-phone a {
    font-size: 13px;
    font-weight: 700;
    color: #E9BB52;
    text-decoration: none;
}
.ohb2-utility-bar .call-phone a:hover {
    text-decoration: underline;
}
.ohb2-utility-social {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ohb2-utility-social a {
    display: inline-flex;
    align-items: center;
}
.ohb2-utility-social img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------------
   Header band  (white: dealer logo)
   ------------------------------------------------------------------ */
.ohb2-header-band {
    background: #fff;
    border-bottom: 1px solid #D9D9D9;
    padding: 14px 20px;
}
.ohb2-header-band-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-header-logo a {
    display: inline-block;
}
.ohb2-header-logo img {
    max-height: 80px;
    width: auto;
}

/* ------------------------------------------------------------------
   Nav bar  (blue: horizontal desktop + hamburger mobile)
   ------------------------------------------------------------------ */
.ohb2-nav-bar {
    background: #1A567A;
    position: relative;
    z-index: 100;
}
.ohb2-nav-bar-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    align-items: stretch;
}

/* Hamburger */
.ohb2-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 16px;
    color: #fff;
}
.ohb2-nav-toggle svg {
    display: block;
}
.ohb2-mobile-inv-btn,
.ohb2-mobile-3d-btn {
    display: none;
    align-items: center;
    padding: 0 16px;
    color: #E9BB52;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
}

/* Desktop nav list */
.ohb2-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}
.ohb2-nav-menu > li {
    position: relative;
}
.ohb2-nav-menu > li > a {
    display: flex;
    align-items: center;
    padding: 14px 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}
.ohb2-nav-menu > li > a:hover,
.ohb2-nav-menu > li > a.ohb2-active {
    border-bottom-color: #E9BB52;
    background: rgba(255,255,255,0.06);
}

/* Dropdown caret */
.ohb2-nav-caret {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    vertical-align: middle;
}

/* Dropdown panel */
.ohb2-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #1A567A;
    border-top: 2px solid #E9BB52;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 200;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
.ohb2-nav-menu > li:hover .ohb2-nav-dropdown {
    display: block;
}
.ohb2-nav-dropdown li a {
    display: block;
    padding: 10px 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s;
}
.ohb2-nav-dropdown li a:hover {
    background: rgba(255,255,255,0.12);
    color: #E9BB52;
}

/* Mobile: hidden nav */
@media screen and (max-width: 900px) {
    .ohb2-nav-toggle {
        display: block;
    }
    .ohb2-mobile-inv-btn,
    .ohb2-mobile-3d-btn {
        display: flex;
    }
    .ohb2-nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #1A567A;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 300;
        padding-bottom: 8px;
    }
    .ohb2-nav-menu.ohb2-menu-open {
        display: flex;
    }
    .ohb2-nav-menu > li > a {
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        border-left: none;
    }
    .ohb2-nav-dropdown {
        position: static;
        display: none;
        border-top: none;
        box-shadow: none;
        background: rgba(0,0,0,0.15);
        padding: 0;
    }
    .ohb2-nav-menu > li.ohb2-sub-open .ohb2-nav-dropdown {
        display: block;
    }
    .ohb2-nav-dropdown li a {
        padding: 10px 34px;
    }
}

/* ------------------------------------------------------------------
   Page body  (full width, no container)
   ------------------------------------------------------------------ */
.ohb2-page {
    background: #fff;
}

/* ------------------------------------------------------------------
   Hero section
   ------------------------------------------------------------------ */
.ohb2-hero {
    position: relative;
    min-height: 340px;
    background: #1A567A;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.ohb2-hero-ctas {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 340px;
}
.ohb2-hero-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 30px;
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: background 0.18s;
}
.ohb2-hero-cta-btn:hover {
    color: #fff;
    text-decoration: none;
}
.ohb2-hero-cta-left {
    background: rgba(18, 58, 87, 0.75);
    border-right: 2px solid rgba(242, 183, 53, 0.6);
}
.ohb2-hero-cta-left:hover {
    background: rgba(18, 58, 87, 0.90);
}
.ohb2-hero-cta-right {
    background: rgba(22, 73, 109, 0.65);
}
.ohb2-hero-cta-right:hover {
    background: rgba(22, 73, 109, 0.85);
}

@media screen and (max-width: 640px) {
    .ohb2-hero-ctas {
        flex-direction: column;
        min-height: 0;
    }
    .ohb2-hero-cta-btn {
        font-size: 18px;
        padding: 28px 20px;
    }
    .ohb2-hero-cta-left {
        border-right: none;
        border-bottom: 2px solid rgba(242, 183, 53, 0.6);
    }
}

/* ------------------------------------------------------------------
   Section headings
   ------------------------------------------------------------------ */
.ohb2-section-heading {
    text-align: center;
    color: #1A567A;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 24px 0;
}

/* ------------------------------------------------------------------
   Featured / Building cards
   ------------------------------------------------------------------ */
.ohb2-featured-section {
    background: #fff;
    padding: 48px 20px;
}
.ohb2-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.ohb2-building-card {
    background: #fff;
    border: 1px solid #D9D9D9;
    width: 340px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}
.ohb2-card-thumb {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f5f5f5;
    display: block;
}
.ohb2-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ohb2-card-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ohb2-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 4px 0;
}
.ohb2-card-sku {
    font-size: 12px;
    color: #888;
    margin: 0 0 12px 0;
    word-break: break-all;
}

/* ------------------------------------------------------------------
   Price table  (used in card + details page)
   ------------------------------------------------------------------ */
.ohb2-price-table {
    border-top: 1px solid #D9D9D9;
    margin-bottom: 12px;
}
.ohb2-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.ohb2-price-label {
    color: #555;
    font-weight: 500;
}
.ohb2-price-value {
    font-weight: 700;
    color: #333;
}
.ohb2-price-row.cash-row .ohb2-price-value {
    text-decoration: line-through;
    color: #999;
}
.ohb2-price-row.internet-row .ohb2-price-value {
    background: #1A567A;
    color: #fff;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
}
.ohb2-price-row.contact-row .ohb2-price-value a {
    color: #c0392b;
    text-decoration: underline;
}

/* Card button row: Contact Dealer | Images & Details */
.ohb2-card-btn-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.ohb2-btn-outline {
    flex: 1;
    display: inline-flex;
    padding: 9px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: 1px solid #1A567A;
    color: #1A567A;
    background: #fff;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    letter-spacing: 0.02em;
}
.ohb2-btn-outline:hover {
    background: #1A567A;
    color: #fff;
}

/* Gold BUY OR RENT NOW button */
.ohb2-btn-gold {
    display: flex;
    width: 100%;
    padding: 12px 16px;
    background: #E9BB52;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.12s;
}
.ohb2-btn-gold:hover {
    background: #d9a02e;
    color: #fff;
    text-decoration: none;
}

/* Blue button */
.ohb2-btn-blue {
    display: inline-flex;
    padding: 13px 28px;
    background: #1A567A;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.12s;
}
.ohb2-btn-blue:hover {
    background: #14405C;
    color: #fff;
    text-decoration: none;
}

/* View all inventory button centered */
.ohb2-view-all-wrap {
    text-align: center;
    margin-top: 32px;
}

/* ------------------------------------------------------------------
   Brand band  (authorized dealer + badge strip)
   ------------------------------------------------------------------ */
.ohb2-brand-band {
    background: #F0F0F0;
    padding: 48px 20px;
    text-align: center;
}
.ohb2-brand-band-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-brand-dealer-heading {
    font-size: 26px;
    font-weight: 800;
    color: #1A567A;
    margin: 0 0 4px 0;
}
.ohb2-brand-dealer-sub {
    font-size: 17px;
    font-style: italic;
    color: #555;
    margin: 0 0 24px 0;
}
.ohb2-brand-copy {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    max-width: 820px;
    margin: 0 auto 28px auto;
}
.ohb2-badge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}
.ohb2-badge-row a {
    display: inline-block;
}
.ohb2-badge-row img {
    height: 64px;
    width: auto;
}
.ohb2-badge-placeholder {
    width: 120px;
    height: 64px;
    background: #ccc;
    display: inline-block;
    border-radius: 4px;
}

/* ------------------------------------------------------------------
   "HOVER OVER STARS" interactive section placeholder
   ------------------------------------------------------------------ */
.ohb2-stars-section {
    background: #fff;
    padding: 40px 20px;
    text-align: center;
}
.ohb2-stars-cta-text {
    font-size: 14px;
    font-weight: 700;
    color: #1A567A;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
}
.ohb2-stars-placeholder {
    background: #D9D9D9;
    width: 100%;
    max-width: 1100px;
    height: 260px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 14px;
    border-radius: 4px;
}

/* Add-on callout inside the stars section */
.ohb2-addon-callout {
    background: rgba(22, 73, 109, 0.06);
    border: 1px solid #D9D9D9;
    padding: 20px 24px;
    max-width: 340px;
    margin: 32px auto 0 auto;
    text-align: left;
}
.ohb2-addon-callout h3 {
    color: #1A567A;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.ohb2-addon-callout p {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin: 0 0 14px 0;
}

/* ------------------------------------------------------------------
   Popular Designs carousel (static 3-card)
   ------------------------------------------------------------------ */
.ohb2-designs-section {
    background: #F0F0F0;
    padding: 48px 20px;
}
.ohb2-designs-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-designs-cards {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}
.ohb2-design-card {
    background: #fff;
    border: 1px solid #D9D9D9;
    flex: 1;
    min-width: 260px;
    max-width: 340px;
}
.ohb2-design-card-img {
    width: 100%;
    height: 200px;
    background: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 13px;
    position: relative;
}
.ohb2-design-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ohb2-design-card-info {
    padding: 14px 16px;
}
.ohb2-design-card-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    margin: 0 0 8px 0;
    text-align: center;
}
.ohb2-design-card-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    text-align: center;
}
.ohb2-designs-customize {
    text-align: center;
    margin-top: 28px;
}

/* ------------------------------------------------------------------
   Promo duo  (two promo blocks side by side)
   ------------------------------------------------------------------ */
.ohb2-promo-duo {
    display: flex;
    background: #1A567A;
    min-height: 200px;
}
.ohb2-promo-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    text-align: center;
    position: relative;
}
.ohb2-promo-pane + .ohb2-promo-pane {
    border-left: 1px solid rgba(255,255,255,0.2);
}
.ohb2-promo-pane-img-placeholder {
    width: 100%;
    height: 140px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}
.ohb2-promo-pane h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

@media screen and (max-width: 640px) {
    .ohb2-promo-duo {
        flex-direction: column;
    }
    .ohb2-promo-pane + .ohb2-promo-pane {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
}

/* ------------------------------------------------------------------
   Brochure block
   ------------------------------------------------------------------ */
.ohb2-brochure-block {
    background: #14405C;
    padding: 40px 20px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.ohb2-brochure-block-inner {
    max-width: 500px;
}
.ohb2-brochure-block h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 14px 0;
}

/* ------------------------------------------------------------------
   RTO Advantages section
   ------------------------------------------------------------------ */
.ohb2-rto-section {
    background: #F0F0F0;
    padding: 48px 20px;
}
.ohb2-rto-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.ohb2-rto-text {
    flex: 1;
    min-width: 220px;
}
.ohb2-rto-text h2 {
    color: #1A567A;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 12px 0;
}
.ohb2-rto-text p {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin: 0 0 16px 0;
}
.ohb2-rto-advantages {
    flex: 1;
    min-width: 220px;
    background: #1A567A;
    padding: 24px 28px;
    color: #fff;
}
.ohb2-rto-advantages h3 {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 16px 0;
    color: #E9BB52;
}
.ohb2-rto-advantages ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ohb2-rto-advantages ul li {
    font-size: 14px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ohb2-rto-advantages ul li:last-child {
    border-bottom: none;
}
.ohb2-rto-advantages ul li::before {
    content: "\2713";
    color: #E9BB52;
    font-weight: 700;
    margin-right: 8px;
}

@media screen and (max-width: 640px) {
    .ohb2-rto-inner {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------
   FAQ accordion
   ------------------------------------------------------------------ */
.ohb2-faq-section {
    background: #fff;
    padding: 48px 20px;
}
.ohb2-faq-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-faq-item {
    margin-bottom: 4px;
}
.ohb2-faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    user-select: none;
}
.ohb2-faq-header-open {
    background: #1A567A;
    color: #fff;
}
.ohb2-faq-header-closed {
    background: #E9BB52;
    color: #fff;
}
.ohb2-faq-toggle {
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 12px;
}
.ohb2-faq-body {
    background: #fff;
    border: 1px solid #D9D9D9;
    border-top: none;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    display: none;
}
.ohb2-faq-body.ohb2-faq-open {
    display: block;
}

/* ------------------------------------------------------------------
   Quote form section
   ------------------------------------------------------------------ */
.ohb2-quote-section {
    background: #F0F0F0;
    padding: 48px 20px;
}
.ohb2-quote-inner {
    max-width: 800px;
    margin: 0 auto;
}
.ohb2-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.ohb2-form-row input,
.ohb2-form-row select {
    flex: 1;
}
.ohb2-quote-section input[type="text"],
.ohb2-quote-section input[type="email"],
.ohb2-quote-section input[type="tel"],
.ohb2-quote-section select,
.ohb2-quote-section textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    margin-bottom: 12px;
    appearance: none;
    -webkit-appearance: none;
}
.ohb2-quote-section textarea {
    min-height: 100px;
    resize: vertical;
}
.ohb2-quote-submit-wrap {
    text-align: center;
    margin-top: 16px;
}
.ohb2-form-submit-message {
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
}
.ohb2-quote-call-note {
    text-align: center;
    margin-top: 14px;
    font-size: 14px;
    color: #555;
}
.ohb2-quote-call-note a {
    color: #1A567A;
    font-weight: 700;
}

/* ------------------------------------------------------------------
   Footer (3-column)
   ------------------------------------------------------------------ */
.ohb2-footer {
    background: #1A567A;
    color: #fff;
    padding: 40px 20px 24px;
}
.ohb2-footer-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.ohb2-footer-col {
    flex: 1;
    min-width: 200px;
}
.ohb2-footer-biz-name {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #E9BB52;
}
.ohb2-footer-address,
.ohb2-footer-phone,
.ohb2-footer-email {
    font-size: 13px;
    margin-bottom: 6px;
    line-height: 1.5;
}
.ohb2-footer-address a,
.ohb2-footer-phone a,
.ohb2-footer-email a {
    color: #fff;
    text-decoration: none;
}
.ohb2-footer-phone a:hover,
.ohb2-footer-email a:hover {
    text-decoration: underline;
}
.ohb2-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.ohb2-footer-social a {
    display: inline-flex;
    align-items: center;
}
.ohb2-footer-social img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}
.ohb2-footer-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ohb2-footer-auth-dealer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ohb2-footer-auth-dealer img {
    max-width: 130px;
    width: auto;
    height: auto;
}
.ohb2-footer-auth-dealer span {
    font-size: 14px;
    font-weight: 700;
    color: #E9BB52;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ohb2-footer-hours-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #E9BB52;
    margin-bottom: 10px;
}
.ohb2-footer-hours-row {
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.4;
}
.ohb2-footer-privacy {
    margin-top: 10px;
}
.ohb2-footer-privacy a {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    text-decoration: none;
}
.ohb2-footer-privacy a:hover {
    color: #fff;
}
.ohb2-copyright {
    background: #0f2d43;
    text-align: center;
    padding: 12px 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}
.ohb2-copyright span {
    color: rgba(255,255,255,0.6);
}

@media screen and (max-width: 700px) {
    .ohb2-footer-inner {
        flex-direction: column;
    }
    .ohb2-footer-col-center {
        align-items: flex-start;
        text-align: left;
    }
}

/* ------------------------------------------------------------------
   Brochure pricing modal — the `.ohb2-pricing-form-wrap` white panel that
   used to live here is GONE, along with the inline styles that went with
   it. #pricing-form is now part of the `.ohb2-modal` family; see the
   PASS 2026-09-02 section at the end of this file for the id-strength
   half of that language.
   ------------------------------------------------------------------ */
.ohb2-form-btn-row {
    margin-top: 12px;
    text-align: center;
}

/* ===================================================================
   OHB2 Stage B — Inventory + Building Details + Anatomy Widget
   =================================================================== */

/* ------------------------------------------------------------------
   INVENTORY PAGE — intro section
   ------------------------------------------------------------------ */
.ohb2-inventory-page .ohb2-inv-intro {
    background: #1A567A;
    padding: 40px 20px;
    text-align: center;
}
.ohb2-inv-heading {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px 0;
    text-transform: uppercase;
}
.ohb2-inv-intro-copy {
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    line-height: 1.6;
    max-width: 820px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------
   INVENTORY PAGE — filter bar row
   ------------------------------------------------------------------ */
.ohb2-filter-bar-section {
    background: #F0F0F0;
    border-bottom: 1px solid #D9D9D9;
    padding: 12px 0;
}
.ohb2-filter-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ohb2-filter-toggle-btn {
    background: #1A567A;
    color: #fff;
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.ohb2-filter-toggle-btn:hover {
    background: #14405C;
}
.ohb2-filter-bar-arrow {
    margin-left: 6px;
    font-size: 11px;
}
.ohb2-items-per-page-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ohb2-ipp-label {
    font-size: 12px;
    font-weight: 700;
    color: #1A567A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.ohb2-ipp-select {
    padding: 6px 10px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    background: #fff;
    color: #333;
    cursor: pointer;
}

/* Filter panel (collapsible) */
.ohb2-filter-panel {
    display: none;
    background: #fff;
    border: 1px solid #D9D9D9;
    margin-top: 12px;
    padding: 20px;
}
.ohb2-filter-panel--open {
    display: block;
}
.ohb2-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.ohb2-filter-group {
    min-width: 0;
}
.ohb2-filter-label,
.ohb2-fgroup-toggle {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1A567A;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
}
.ohb2-ftoggle-icon {
    font-style: normal;
    margin-left: 4px;
}
.ohb2-fgroup-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ohb2-fgroup-collapsed {
    display: none;
}
.ohb2-fcheck {
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ohb2-sort-select {
    width: 100%;
    padding: 6px;
    border: 1px solid #D9D9D9;
    font-size: 13px;
}

/* Price slider */
.ohb2-filter-price-group {
    grid-column: 1 / -1;
}
.ohb2-price-slider {
    position: relative;
    height: 11px;
    background: #ddd;
    margin: 20px 0 10px;
}
.ohb2-range-bar {
    position: absolute;
    height: 100%;
    background: #1A567A;
}
.ohb2-slider-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #1A567A;
    border-radius: 50%;
    cursor: pointer;
    top: -5px;
    /* V6 entry 44 (Brian, 2026-10-26): the handles are positioned in PERCENT of
       the track now, because the filter panel is display:none on load and a
       pixel measurement of a hidden element is 0 — which stacked both handles
       at the left end. translateX(-50%) puts the handle's centre on its value,
       which is what the old `left: (px - 10)` was doing by hand. */
    transform: translateX(-50%);
    touch-action: none;
}
.ohb2-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #555;
}
.ohb2-filter-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ohb2-filter-clear {
    font-size: 13px;
    color: #1A567A;
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   INVENTORY PAGE — card grid (3 columns desktop)
   ------------------------------------------------------------------ */
.ohb2-inv-grid-section {
    padding: 40px 0;
    background: #fff;
}
.ohb2-inv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
.ohb2-inv-card {
    background: #fff;
    border: 1px solid #D9D9D9;
    display: flex;
    flex-direction: column;
}
.ohb2-inv-card--used .ohb2-inv-card-photo::after {
    content: 'USED';
    position: absolute;
    top: 8px;
    left: 8px;
    background: #555;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
}
.ohb2-inv-card--clearance .ohb2-inv-card-photo::after {
    content: 'CLEARANCE';
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e32323;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
}
.ohb2-inv-card-photo {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 4/3;
}
.ohb2-inv-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ohb2-inv-card-photo a {
    display: block;
    height: 100%;
}
.ohb2-sold-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    padding: 10px 24px;
    letter-spacing: 2px;
    z-index: 2;
}
.ohb2-inv-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ohb2-inv-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 6px 0;
    line-height: 1.3;
}
.ohb2-inv-card-title a {
    color: inherit;
    text-decoration: none;
}
.ohb2-inv-card-title a:hover {
    text-decoration: underline;
}
.ohb2-inv-card-stock {
    font-size: 12px;
    color: #777;
    margin-bottom: 12px;
    word-break: break-all;
}
.ohb2-inv-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    font-size: 16px;
    color: #555;
}

/* ------------------------------------------------------------------
   INVENTORY PAGE — numbered pagination
   ------------------------------------------------------------------ */
.ohb2-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 0;
}
.ohb2-page-link {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #D9D9D9;
    color: #1A567A;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
}
.ohb2-page-link:hover,
.ohb2-page-link.active {
    background: #1A567A;
    color: #fff;
    border-color: #1A567A;
}
.ohb2-page-ellipsis {
    padding: 8px 4px;
    color: #999;
    font-size: 14px;
}

/* ------------------------------------------------------------------
   BUILDING DETAILS PAGE — title bar
   ------------------------------------------------------------------ */
.ohb2-bldg-title-bar {
    background: #1A567A;
    padding: 24px 20px;
}
.ohb2-bldg-page-h1 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

/* ------------------------------------------------------------------
   BUILDING DETAILS PAGE — two-col top
   ------------------------------------------------------------------ */
.ohb2-bldg-top-section {
    padding: 40px 0;
    background: #fff;
}
.ohb2-bldg-top-cols {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Gallery — left col */
.ohb2-bldg-gallery {
    flex: 0 0 55%;
    min-width: 0;
}
.ohb2-gallery-main {
    background: #f5f5f5;
    border: 1px solid #D9D9D9;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 10px;
}
.ohb2-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ohb2-gallery-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ohb2-gallery-thumb {
    width: 80px;
    height: 60px;
    border: 2px solid #D9D9D9;
    overflow: hidden;
    cursor: pointer;
    background: #f5f5f5;
}
.ohb2-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ohb2-gallery-thumb--active {
    border-color: #1A567A;
}
.ohb2-gallery-thumb:hover {
    border-color: #E9BB52;
}

/* Specs col — right col */
.ohb2-bldg-specs-col {
    flex: 1;
    min-width: 0;
}
.ohb2-bldg-specs-heading {
    font-size: 16px;
    font-weight: 700;
    color: #1A567A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    border-bottom: 2px solid #1A567A;
    padding-bottom: 8px;
}
.ohb2-bldg-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 14px;
}
.ohb2-bldg-specs-table th {
    text-align: left;
    font-weight: 600;
    color: #555;
    padding: 5px 10px 5px 0;
    white-space: nowrap;
    width: 40%;
}
.ohb2-bldg-specs-table td {
    color: #333;
    padding: 5px 0;
}

/* Hide inventory card button row on building detail page */
.ohb2-building-page .ohb2-card-btn-row {
    display: none;
}

.ohb2-bldg-ask-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 12px;
    padding: 12px;
    font-size: 14px;
}

/* ------------------------------------------------------------------
   BUILDING DETAILS PAGE — description, form, standards
   ------------------------------------------------------------------ */
.ohb2-bldg-description-section {
    background: #F0F0F0;
    padding: 40px 0;
}
.ohb2-bldg-desc-body {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    white-space: pre-line;
}

.ohb2-bldg-question-section {
    background: #fff;
    padding: 40px 0;
    border-top: 1px solid #D9D9D9;
}
.ohb2-bldg-question-frm {
    max-width: 800px;
    margin: 0 auto;
}
.ohb2-bldg-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.ohb2-bldg-form-row input {
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}
.ohb2-bldg-question-frm textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    min-height: 100px;
    box-sizing: border-box;
    margin-bottom: 16px;
    display: block;
    resize: vertical;
}
.ohb2-bldg-form-submit {
    text-align: center;
}

/* Material & Construction Standards */
.ohb2-standards-section {
    background: #F0F0F0;
    padding: 48px 0;
}
.ohb2-standards-item {
    background: #fff;
    border: 1px solid #D9D9D9;
    padding: 20px 24px;
    margin-bottom: 12px;
}
.ohb2-standards-item h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1A567A;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.ohb2-standards-item p {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin: 0;
}

/* 3D Builder CTA band */
.ohb2-builder-cta-band {
    background: #1A567A;
    padding: 40px 0;
}
.ohb2-builder-cta-inner {
    display: flex;
    gap: 40px;
    align-items: center;
}
.ohb2-builder-cta-left {
    flex: 0 0 35%;
}
.ohb2-builder-cta-left h2 {
    color: #E9BB52;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}
.ohb2-builder-cta-right {
    flex: 1;
}
.ohb2-builder-cta-right h3 {
    color: #E9BB52;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}
.ohb2-builder-cta-right p {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Building page delivery section */
.ohb2-bldg-delivery-section {
    background: #fff;
    padding: 48px 0;
    border-top: 1px solid #D9D9D9;
}
.ohb2-bldg-delivery-inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.ohb2-bldg-delivery-text {
    flex: 1;
}
.ohb2-bldg-delivery-text h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1A567A;
    margin: 0 0 16px 0;
}
.ohb2-bldg-delivery-text p {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin: 0;
}
.ohb2-bldg-delivery-cta {
    flex: 0 0 280px;
    text-align: center;
}
.ohb2-bldg-delivery-cta .ohb2-promo-pane-img-placeholder {
    background: #D9D9D9;
    color: #888;
    font-size: 13px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

/* ------------------------------------------------------------------
   ANATOMY WIDGET — ohb2-scoped styles
   ------------------------------------------------------------------ */
.ohb2-anatomy-widget {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin: 24px 0 20px;
    text-align: left;
}
.ohb2-anatomy-img-wrap {
    position: relative;
    flex: 0 0 60%;
    max-width: 340px;
    min-width: 0;
}
.ohb2-anatomy-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* Star hotspots — mirror frontend.css positions */
.ohb2-anat-star {
    position: absolute;
    cursor: pointer;
}
.ohb2-anat-dot {
    background: #E9BB52;
    color: #1A567A;
    text-align: center;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}
.ohb2-anat-star:hover .ohb2-anat-dot,
.ohb2-anat-star:focus .ohb2-anat-dot {
    transform: scale(1.25);
    background: #d9a820;
    outline: none;
}
.ohb2-anat-star-1 { top: 1%;   right: 32%; }
.ohb2-anat-star-2 { top: 25%;  right: 10%; }
.ohb2-anat-star-3 { top: 50%;  left: 25%;  }
.ohb2-anat-star-4 { top: 55%;  right: 15%; }
.ohb2-anat-star-5 { bottom: 25%; left: 25%;}
.ohb2-anat-star-6 { bottom: 10%; left: 35%;}

/* Info panels */
.ohb2-anatomy-panels {
    flex: 1;
    min-width: 0;
}
.ohb2-anat-panel {
    display: none;
}
.ohb2-anat-panel-active {
    display: block;
}
.ohb2-anat-panel img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin-bottom: 12px;
}
.ohb2-anat-panel h3 {
    font-size: 14px;
    font-weight: 700;
    color: #1A567A;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}
.ohb2-anat-panel p {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* ------------------------------------------------------------------
   RESPONSIVE — mobile adjustments for stage B
   ------------------------------------------------------------------ */
@media screen and (max-width: 900px) {
    .ohb2-inv-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ohb2-bldg-top-cols {
        flex-direction: column;
    }
    .ohb2-bldg-gallery {
        flex: none;
        width: 100%;
    }
    .ohb2-anatomy-widget {
        flex-direction: column;
    }
    .ohb2-anatomy-img-wrap {
        flex: none;
        width: 100%;
    }
    .ohb2-builder-cta-inner {
        flex-direction: column;
        gap: 20px;
    }
    .ohb2-bldg-delivery-inner {
        flex-direction: column;
        gap: 24px;
    }
    .ohb2-bldg-delivery-cta {
        flex: none;
        width: 100%;
    }
}
@media screen and (max-width: 600px) {
    .ohb2-inv-grid {
        grid-template-columns: 1fr;
    }
    .ohb2-filter-bar-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .ohb2-bldg-form-row {
        grid-template-columns: 1fr;
    }
    .ohb2-filter-grid {
        grid-template-columns: 1fr;
    }
}


/* ===================================================================
   OHB2 PASS-1 DESIGN FIDELITY OVERRIDES  (2026-07-27)
   =================================================================== */

/* ----- Combined header band ----- */
.ohb2-utility-bar,
.ohb2-header-band { display: none; }

.ohb2-header-combined {
    background: #1A567A;
    padding: 10px 20px;
}
.ohb2-header-combined-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ohb2-hdr-logo a { display: inline-block; }
.ohb2-hdr-logo img { max-height: 72px; width: auto; display: block; }
.ohb2-hdr-meta { display: flex; align-items: center; gap: 20px; }
.ohb2-hdr-call { display: flex; flex-direction: column; align-items: flex-end; }
.ohb2-hdr-call-label { font-size: 11px; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.04em; }
.ohb2-hdr-phone { font-size: 18px; font-weight: 700; color: #E9BB52; text-decoration: none; white-space: nowrap; }
.ohb2-hdr-phone:hover { text-decoration: underline; }
.ohb2-hdr-social { display: flex; align-items: center; gap: 8px; }
.ohb2-hdr-social a { display: inline-flex; align-items: center; }
.ohb2-hdr-social img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
@media (max-width: 600px) {
    .ohb2-header-combined-inner { justify-content: center; }
    .ohb2-hdr-call { align-items: center; }
}

/* ----- Nav: light gray bar, dark text, white-fill active tab ----- */
.ohb2-nav-bar { background: #DBD9D9; }
.ohb2-nav-bar-inner { background: #DBD9D9; }
.ohb2-nav-menu > li > a {
    color: #1a1a1a;
    border-bottom: 3px solid transparent;
}
.ohb2-nav-menu > li > a:hover {
    color: #1A567A;
    background: rgba(255,255,255,0.6);
}
.ohb2-nav-menu > li > a.ohb2-active {
    background: #fff;
    color: #1A567A;
    font-weight: 700;
    border-bottom-color: transparent;
}
.ohb2-nav-caret { color: #555; }
.ohb2-mobile-inv-btn, .ohb2-mobile-3d-btn { color: #1A567A; }
@media screen and (max-width: 900px) {
    .ohb2-nav-menu { background: #1A567A; }
    .ohb2-nav-menu > li > a { color: #fff; }
    .ohb2-nav-menu > li > a.ohb2-active { background: rgba(255,255,255,0.15); color: #fff; }
}
.ohb2-nav-dropdown { background: #1A567A; border-top-color: #E9BB52; }

/* ----- FAQ closed = navy ----- */
.ohb2-faq-header-closed { background: #1A567A; color: #fff; }
.ohb2-faq-item .ohb2-faq-header-closed .ohb2-faq-toggle { color: #E9BB52; }

/* ----- Brand band: navy bg ----- */
.ohb2-brand-band { background: #1A567A; }
.ohb2-brand-dealer-heading { color: #fff; }
.ohb2-brand-dealer-sub { color: rgba(255,255,255,0.85); font-style: italic; }
.ohb2-brand-copy { color: rgba(255,255,255,0.9); }
.ohb2-stars-cta-text { color: #E9BB52; }
.ohb2-addon-callout { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.ohb2-addon-callout h3 { color: #E9BB52; }
.ohb2-addon-callout p { color: rgba(255,255,255,0.85); }
.ohb2-anat-panel h3 { color: #E9BB52; }
.ohb2-anat-panel p { color: rgba(255,255,255,0.9); }

/* ----- Promo duo: white bg ----- */
.ohb2-promo-duo { background: #fff; }
.ohb2-promo-pane { background: #fff; }
.ohb2-promo-pane + .ohb2-promo-pane { border-left: 1px solid #E5E5E5; }
.ohb2-promo-pane h3 { color: #1A567A; }
.ohb2-promo-pane-img-placeholder { background: #D8D8D8; border: 1px solid #C0C0C0; min-height: 160px;
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: #888; }
@media (max-width: 640px) {
    .ohb2-promo-pane + .ohb2-promo-pane { border-left: none; border-top: 1px solid #E5E5E5; }
}

/* ----- Brochure block: white bg + two-column ----- */
.ohb2-brochure-block {
    background: #fff;
    padding: 36px 20px;
    border-top: 1px solid #E5E5E5;
}
.ohb2-brochure-block-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
.ohb2-brochure-device-placeholder {
    width: 200px;
    height: 130px;
    background: #D8D8D8;
    border: 1px solid #C0C0C0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #888;
}
.ohb2-brochure-text-wrap h3 { color: #1a1a1a; font-size: 20px; font-weight: 700; margin: 0 0 16px 0; }
@media (max-width: 640px) {
    .ohb2-brochure-block-inner { flex-direction: column; text-align: center; }
}

/* ----- Card buttons: solid navy ----- */
.ohb2-btn-outline {
    background: #1A567A;
    color: #fff;
    border-color: #1A567A;
}
.ohb2-btn-outline:hover { background: #14405C; color: #fff; }

/* ----- Quote form: navy bg ----- */
.ohb2-quote-section { background: #1A567A; }
.ohb2-quote-section .ohb2-section-heading { color: #fff; }
.ohb2-quote-subheading {
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    text-align: center;
    margin: -14px 0 20px 0;
}
.ohb2-quote-subheading a { color: #E9BB52; font-weight: 700; }
.ohb2-quote-section input, .ohb2-quote-section select, .ohb2-quote-section textarea {
    background: #fff;
    border-color: rgba(255,255,255,0.5);
}
.ohb2-quote-call-note { color: rgba(255,255,255,0.8); }
.ohb2-quote-call-note a { color: #E9BB52; }
.ohb2-quote-submit-wrap { text-align: right; }

/* ----- Inventory intro: white ----- */
.ohb2-inv-intro { background: #fff; padding: 32px 20px 16px; }
.ohb2-inv-heading { color: #1A567A; font-size: 28px; font-weight: 700; margin: 0 0 14px 0; text-transform: none; }
.ohb2-inv-intro-copy { color: #444; }

/* ----- Building detail: title bar white, have-questions navy w/ gold heading ----- */
.ohb2-bldg-title-bar { background: #fff; padding: 28px 20px 8px; border-bottom: none; }
.ohb2-bldg-page-h1 { color: #1A567A; text-align: center; font-size: 26px; }
.ohb2-bldg-question-section { background: #1A567A; border-top: none; }
.ohb2-bldg-question-section .ohb2-section-heading { color: #E9BB52; }
.ohb2-bldg-question-section input, .ohb2-bldg-question-section textarea {
    background: #fff; border-color: rgba(255,255,255,0.4);
}
.ohb2-bldg-form-submit { text-align: right; }

/* ----- Building standards: compact list ----- */
.ohb2-standards-item { background: transparent; border: none; padding: 8px 0; border-bottom: none; margin-bottom: 0; }
.ohb2-standards-item h3 { font-size: 13px; font-weight: 700; color: #8B1A1A; text-transform: uppercase; margin: 0 0 4px 0; }
.ohb2-standards-item p { font-size: 13px; line-height: 1.6; margin: 0 0 10px 0; }

/* ----- Catalog subnav: dark overlay bar ----- */
.ohb2-catalog-subnav { background: rgba(26,86,122,0.92); padding: 12px 20px; }
.ohb2-catalog-subnav ul { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; }
.ohb2-catalog-subnav li { margin: 0; }
.ohb2-catalog-subnav a {
    display: inline-block; padding: 8px 14px; color: rgba(255,255,255,0.8);
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    text-decoration: none;
}
.ohb2-catalog-subnav a:hover { color: #fff; background: rgba(255,255,255,0.12); }
.ohb2-catalog-subnav .ohb2-subnav-active a { background: #1A567A; color: #fff; font-weight: 700; }
@media (max-width: 700px) { .ohb2-catalog-subnav ul { flex-direction: column; align-items: center; } }

/* ----- RTO form section: navy ----- */
.ohb2-rto-form-section { background: #1A567A; }
.ohb2-rto-form-inner h2 { color: #fff; }
.ohb2-rto-form-subtext { color: rgba(255,255,255,0.85); }
.ohb2-rto-form-inner input, .ohb2-rto-form-inner textarea {
    background: #fff; border-color: rgba(255,255,255,0.4);
}
.ohb2-rto-call-note { color: rgba(255,255,255,0.8); }
.ohb2-rto-call-note a { color: #E9BB52; }
.ohb2-rto-form-placeholder { color: rgba(255,255,255,0.85); }

/* ----- RTO CTA buttons: two navy equal ----- */
.ohb2-rto-btn-row .ohb2-btn-gold,
.ohb2-rto-btn-row .ohb2-btn-blue {
    background: #1A567A;
    color: #fff;
    border: none;
    min-width: 240px;
    text-align: center;
}
.ohb2-rto-btn-row .ohb2-btn-gold:hover,
.ohb2-rto-btn-row .ohb2-btn-blue:hover { background: #14405C; }

/* ----- RTO alignment ----- */
.ohb2-rto-right-inner > h2 { text-align: left; }
.ohb2-rto-right-inner > p { text-align: left; }

/* ----- About: two-col intro ----- */
.ohb2-about-intro-two-col {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.ohb2-about-intro-text { flex: 0 0 55%; }
.ohb2-about-intro-portrait { flex: 0 0 40%; }
.ohb2-about-portrait-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    background: #B9BABE;
    border: 1px solid #C0C0C0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    text-align: center;
}
@media (max-width: 700px) { .ohb2-about-intro-two-col { flex-direction: column; } }

/* ----- About: OHB subsection two-col ----- */
.ohb2-ohb-subsection {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 32px;
}
.ohb2-ohb-subsection-content { flex: 1; }
.ohb2-ohb-subsection-photo { flex: 0 0 40%; }
.ohb2-scene-photo-placeholder {
    width: 100%;
    height: 220px;
    background: #D8D8D8;
    border: 1px solid #C0C0C0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
}
@media (max-width: 700px) { .ohb2-ohb-subsection { flex-direction: column; } }

/* ----- Contact Business Hours: mixed-case ----- */
.ohb2-contact-hours h3 { text-transform: none; }

/* ----- Contact submit: right ----- */
.ohb2-contact-submit-wrap { text-align: right; }

/* ----- Warranty: max-width, no bullets border ----- */
.ohb2-warranty-instructions li { border-bottom: none; }

/* ----- Placeholder tile ----- */
.ohb2-ph-tile {
    background: #D8D8D8;
    border: 1px solid #C0C0C0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #888;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}

/* ----- Hero slider (home) -----
   The band itself is the shared flexslider from
   public/partials/ohb-home-hero.blade.php; the banners are 1905x600 so the
   height comes from the artwork, not a fixed placeholder. */
.flexslider.home-hero.ohb2-home-hero { margin: 0; padding: 0; }
.flexslider.home-hero.ohb2-home-hero .slides img { width: 100%; height: auto; display: block; }
.ohb2-hero-cta-strip { min-height: 0 !important; }

/* ----- Popular designs carousel ----- */
.ohb2-designs-carousel-wrap { position: relative; }
.ohb2-designs-carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: #1A567A; color: #fff; border: none; width: 36px; height: 36px;
    font-size: 20px; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center;
}
.ohb2-designs-carousel-btn:hover { background: #14405C; }
.ohb2-designs-carousel-prev { left: -18px; }
.ohb2-designs-carousel-next { right: -18px; }
.ohb2-designs-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.ohb2-designs-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #C0C0C0;
    cursor: pointer; border: none; padding: 0;
}
.ohb2-designs-dot.active { background: #1A567A; }

/* ----- Card name overlay ----- */
.ohb2-card-name-overlay, .ohb2-inv-card-name-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(26,86,122,0.93);
    padding: 7px 10px; color: #fff; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.3;
}
.ohb2-card-thumb { position: relative; display: block; overflow: hidden; }

/* ----- Catalog swatch tiles: tall 90x100 ----- */
.ohb2-swatches-section { background: #fff; border-top: 1px solid #E5E5E5; }
.ohb2-swatches-section h2 {
    color: #333; font-size: 18px; font-weight: 700; text-align: left; text-transform: none; margin: 0 0 18px 0;
}
.ohb2-swatch-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ohb2-swatch-tile { width: 90px; height: 100px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.1); display: block; }
.ohb2-swatch-name { font-size: 9px; }

/* ----- Size tables: no borders ----- */
.ohb2-sizes-table { border: none; }
.ohb2-sizes-col { border-right: none; padding-right: 12px; }
.ohb2-sizes-col:last-child { padding-right: 0; }

/* ----- Catalog promo: white ----- */
.ohb2-cat-promo-duo { background: #fff; }
.ohb2-cat-promo-pane { background: #fff; color: #1A567A; }
.ohb2-cat-promo-pane:first-child { background: #F8F8F8; }
.ohb2-cat-promo-pane h3 { color: #1A567A; }
.ohb2-cat-promo-img-placeholder {
    background: #D8D8D8; border: 1px solid #C0C0C0; min-height: 160px;
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: #888;
}
/* ----- Catalog brochure: white two-col ----- */
.ohb2-cat-brochure-block { background: #fff; padding: 32px 20px; border-top: 1px solid #E5E5E5; }
.ohb2-cat-brochure-inner {
    max-width: var(--ohb2-col); margin: 0 auto; display: flex;
    align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap;
}
.ohb2-cat-brochure-device-tile {
    width: 180px; height: 120px; background: #D8D8D8; border: 1px solid #C0C0C0;
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: #888;
}
.ohb2-cat-brochure-inner h3 { color: #1a1a1a; }

/* ----- Catalog intro left-align ----- */
.ohb2-catalog-intro-left { text-align: left; }
.ohb2-catalog-intro-left p { text-align: left; }

/* ----- Shed upgrades hero ----- */
.ohb2-upgrades-hero { display: flex; max-height: 320px; overflow: hidden; }
.ohb2-upgrades-hero-half {
    width: 50%; height: 320px; background: #D8D8D8; border: 1px solid #C0C0C0;
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: #888; text-align: center;
}
@media (max-width: 600px) {
    .ohb2-upgrades-hero { flex-direction: column; max-height: none; }
    .ohb2-upgrades-hero-half { width: 100%; height: 180px; }
}

/* ----- Shed upgrades: upgrade block img-left/text-right ----- */
.ohb2-upgrade-img-placeholder {
    float: left;
    width: 200px;
    height: 140px;
    margin: 0 20px 12px 0;
    background: #D8D8D8;
    border: 1px solid #C0C0C0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #888;
    clear: left;
}
.ohb2-upgrade-block { overflow: hidden; margin-bottom: 32px; }
.ohb2-upgrade-block h2 { font-size: 17px; color: #1A567A; font-weight: 700; text-transform: uppercase; }
.ohb2-upgrade-block ul { list-style: disc !important; padding-left: 20px !important; }
.ohb2-upgrade-block li { list-style: disc !important; }

/* ----- Builder band: navy bg ----- */
.ohb2-builder-band { background: #1A567A; }
.ohb2-builder-band h2 { color: #fff; }
.ohb2-builder-band p { color: rgba(255,255,255,0.9); }
.ohb2-builder-band-cta a {
    background: #E9BB52;
    color: #1A567A;
    font-weight: 800;
    text-transform: uppercase;
    padding: 14px 28px;
    display: inline-block;
    text-decoration: none;
    letter-spacing: 0.04em;
}
.ohb2-builder-band-cta a:hover { background: #e6ab2a; }

/* ----- Footer email icon ----- */
.ohb2-footer-social-email img { width: 22px; height: 22px; filter: brightness(0) invert(1); }

/* ================================================================
   PASS 3 FIXES — 2026-07-27
   ================================================================ */

/* ----- Inventory intro: white bg (fix specificity vs. Stage B rule) ----- */
.ohb2-inventory-page .ohb2-inv-intro {
    background: #fff !important;
    padding: 28px 20px 12px !important;
}
.ohb2-inventory-page .ohb2-inv-heading {
    color: #1A567A !important;
    text-transform: none !important;
    font-size: 26px !important;
}
.ohb2-inventory-page .ohb2-inv-intro-copy {
    color: #444 !important;
}

/* ----- Inventory card: name overlay on listing cards ----- */
.ohb2-inv-card-photo { position: relative; }
.ohb2-inv-card-name-band {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(26,86,122,0.93);
    padding: 7px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
    pointer-events: none;
}

/* ----- Filter toggle: lightweight text+icon ----- */
.ohb2-filter-toggle-btn {
    background: transparent !important;
    color: #1A567A !important;
    border: 1px solid #1A567A !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.ohb2-filter-toggle-btn:hover {
    background: #1A567A !important;
    color: #fff !important;
}

/* ----- Hero CTA strip: compact ~65px strip ----- */
.ohb2-hero-cta-strip .ohb2-hero-ctas { min-height: 0 !important; }
.ohb2-hero-cta-strip .ohb2-hero-cta-btn {
    padding: 20px 28px !important;
    font-size: 15px !important;
    min-height: 65px !important;
}

/* ----- Sub-nav: pipe separators, active = solid box ----- */
.ohb2-catalog-subnav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important; padding: 0 !important;
    list-style: none !important;
}
.ohb2-catalog-subnav li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 2px 0 !important;
}
.ohb2-catalog-subnav li + li::before {
    content: '|' !important;
    color: rgba(255,255,255,0.4) !important;
    margin: 0 4px !important;
    font-size: 11px !important;
}
.ohb2-catalog-subnav .ohb2-subnav-active a {
    background: #1A567A !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 2px !important;
    padding: 4px 10px !important;
}

/* ----- Nav items: Title Case ----- */
.ohb2-nav-menu > li > a { text-transform: none !important; }

/* ----- About dropdown: ALL CAPS ----- */
.ohb2-nav-dropdown li a { text-transform: uppercase !important; font-size: 12px !important; }

/* ----- Business Hours: no uppercase ----- */
.ohb2-contact-hours, .ohb2-contact-hours *, .ohb2-contact-hours-row, .ohb2-contact-hours-row span {
    text-transform: none !important;
}

/* ----- About promo panes: white bg + navy buttons ----- */
.ohb2-about-promo-duo { display: flex; background: #fff; }
.ohb2-about-promo-pane {
    flex: 1; background: #fff !important; color: #1A567A !important;
    padding: 40px 24px; text-align: center; border: 1px solid #E5E5E5;
}
.ohb2-about-promo-pane h3 { color: #1A567A !important; font-size: 18px; font-weight: 700; margin: 0 0 20px; }
.ohb2-promo-pane-img-placeholder {
    width: 100%; min-height: 160px; background: #D8D8D8; border: 1px solid #C0C0C0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #888; margin-bottom: 20px; box-sizing: border-box;
}
.ohb2-about-promo-duo .ohb2-btn-gold, .ohb2-about-promo-duo a.ohb2-btn-gold {
    background: #1A567A !important; color: #fff !important;
    display: inline-flex; padding: 12px 28px;
}
.ohb2-about-promo-duo .ohb2-btn-gold:hover { background: #14405C !important; }

/* ----- About trust sections: prose left + scene photo placeholder right ----- */
.ohb2-ohb-subsection-wrap, .ohb2-ohb-subsection-wrap-gray { padding: 36px 20px; }
.ohb2-ohb-subsection-wrap-gray { background: #F5F5F5; }
.ohb2-ohb-subsection-wrap { background: #fff; }
.ohb2-ohb-subsection {
    max-width: var(--ohb2-col); margin: 0 auto; display: flex; gap: 40px; align-items: flex-start;
}
.ohb2-ohb-subsection-badge { flex: 0 0 auto; display: none; }
.ohb2-ohb-subsection-text { flex: 0 0 55%; }
.ohb2-ohb-subsection-text h2 { font-size: 21px; font-weight: 700; color: #1A567A; margin: 0 0 14px; text-align: left; }
.ohb2-ohb-subsection-text p { font-size: 14px; line-height: 1.7; color: #444; margin-bottom: 14px; }
.ohb2-ohb-subsection-text ul { font-size: 14px; line-height: 1.7; padding-left: 20px; margin-bottom: 14px; }
.ohb2-ohb-subsection-photo { flex: 0 0 40%; }
.ohb2-scene-photo-placeholder {
    width: 100%; min-height: 200px; background: #D8D8D8; border: 1px solid #C0C0C0;
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: #888;
}
@media (max-width: 760px) {
    .ohb2-ohb-subsection { flex-direction: column; }
    .ohb2-ohb-subsection-text, .ohb2-ohb-subsection-photo { flex: none; width: 100%; }
}

/* ----- About: FILE A CLAIM + 3D SHED BUILDER gold->navy ----- */
.ohb2-warranty-btn-row .ohb2-btn-gold,
.ohb2-warranty-cta-row .ohb2-btn-gold,
.ohb2-about-section .ohb2-btn-gold {
    background: #1A567A !important; color: #fff !important;
}
.ohb2-warranty-btn-row .ohb2-btn-gold:hover,
.ohb2-warranty-cta-row .ohb2-btn-gold:hover,
.ohb2-about-section .ohb2-btn-gold:hover {
    background: #14405C !important;
}

/* ----- Catalog gallery: 4-wide slider ----- */
.ohb2-cat-gallery-slider-wrap { position: relative; overflow: hidden; }
.ohb2-cat-gallery-track { display: flex; gap: 12px; transition: transform 0.35s ease; }
.ohb2-cat-gallery-slide {
    flex: 0 0 calc(25% - 9px); min-width: calc(25% - 9px); height: 180px;
    background: #D0D5DA; border: 1px solid #C0C0C0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #666; text-align: center;
}
.ohb2-cat-gallery-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(26,86,122,0.85); color: #fff; border: none;
    width: 36px; height: 36px; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
.ohb2-cat-gallery-btn:hover { background: #1A567A; }
.ohb2-cat-gallery-prev { left: 4px; }
.ohb2-cat-gallery-next { right: 4px; }

/* ----- Quote form heading: gold (on navy section bg) ----- */
.ohb2-quote-section .ohb2-section-heading { color: #E9BB52; }
.ohb2-quote-section .ohb2-quote-subheading { color: rgba(255,255,255,0.85); }
.ohb2-quote-section .ohb2-quote-subheading a { color: #E9BB52; }

/* ----- Detail: main gallery fills column ----- */
.ohb2-gallery-main { width: 100%; background: #f5f5f5; overflow: hidden; }
.ohb2-gallery-main img { width: 100%; height: auto; display: block; object-fit: contain; max-height: 400px; }

/* ----- Detail thumbnails with scroll arrows ----- */
.ohb2-gallery-thumbs-wrap { position: relative; overflow: hidden; margin-top: 8px; }
.ohb2-gallery-thumbs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.ohb2-gallery-thumbs::-webkit-scrollbar { display: none; }
.ohb2-gallery-thumb-prev, .ohb2-gallery-thumb-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(26,86,122,0.85); color: #fff; border: none;
    width: 28px; height: 28px; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
.ohb2-gallery-thumb-prev { left: 0; }
.ohb2-gallery-thumb-next { right: 0; }

/* ----- Detail SEE IT IN ACTION: navy ----- */
.ohb2-bldg-delivery-cta .ohb2-btn-gold { background: #1A567A !important; color: #fff !important; }
.ohb2-bldg-delivery-cta .ohb2-btn-gold:hover { background: #14405C !important; }

/* ----- Material Standards: white bg ----- */
.ohb2-standards-section { background: #fff !important; }

/* ----- RTO: Is Rent-To-Own heading left-align ----- */
.ohb2-rto-right-section h2 { text-align: left; }

/* ----- Warranty: compact ----- */
.ohb2-warranty-logo-band { padding-top: 10px !important; padding-bottom: 20px; }
.ohb2-warranty-intro-section { padding-bottom: 12px; }

/* ----- Responsive subnav ----- */
@media (max-width: 700px) {
    .ohb2-catalog-subnav ul { flex-direction: column !important; align-items: center !important; }
    .ohb2-catalog-subnav li + li::before { display: none !important; }
}


/* ================================================================
   PASS 3 — Round B additional fixes (2026-07-27)
   ================================================================ */

/* ----- Nav: title case (remove ALL-CAPS transform) ----- */
.ohb2-nav a,
.ohb2-dropdown-menu a {
    text-transform: none !important;
}
.ohb2-nav > li > a {
    text-transform: none !important;
}

/* ----- Nav dropdown: ALL CAPS for About items ----- */
.ohb2-dropdown-menu a {
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
}

/* ----- Sub-nav: active box (supplement catalog CSS) ----- */
.ohb2-subnav-active a {
    background: #1A567A !important;
    color: #fff !important;
    padding: 2px 10px !important;
}

/* ----- Swatch tiles: portrait 90px wide x 90px color + 20px label (pass-4) ----- */
.ohb2-swatch-tile {
    height: 90px !important;
    width: 90px !important;
}

/* ----- Swatch row: 5-col 90px fixed grid, centered (pass-4) ----- */
.ohb2-swatch-row {
    display: grid !important;
    grid-template-columns: repeat(5, 90px) !important;
    gap: 10px !important;
    justify-content: center !important;
}

/* ----- Swatch item: fixed 90px width ----- */
.ohb2-swatch-item {
    min-width: unset !important;
    width: 90px !important;
}

/* ----- Swatch name: dark label bar (2-line wrap allowed) ----- */
.ohb2-swatch-name {
    background: #111 !important;
    color: #fff !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    width: 90px !important;
    min-height: 20px !important;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 3px 4px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* ----- Swatch headings: Title Case, centered (pass-4) ----- */
.ohb2-swatches-section h2 {
    text-transform: none !important;
    color: #1A567A !important;
    text-align: center !important;
}

/* ----- Size tables: borderless ----- */
.ohb2-sizes-table {
    border: none !important;
}
.ohb2-sizes-col {
    border-right: none !important;
}

/* ----- Catalog promo pane buttons: navy (override gold) ----- */
.ohb2-cat-promo-pane .ohb2-btn-gold,
.ohb2-cat-promo-pane .ohb2-btn-blue {
    background: #1A567A !important;
    color: #fff !important;
}
.ohb2-cat-promo-pane .ohb2-btn-gold:hover,
.ohb2-cat-promo-pane .ohb2-btn-blue:hover {
    background: #14405C !important;
}

/* ----- Catalog RTO section: white bg ----- */
.ohb2-cat-rto-section {
    background: #fff !important;
}

/* ----- Bottom-stack promo pane: Title Case headings ----- */
.ohb2-promo-pane h3 {
    text-transform: none !important;
}
.ohb2-cat-promo-pane h3 {
    text-transform: none !important;
}

/* ----- Animals intro: left-align ----- */
.ohb2-animals-intro,
.ohb2-animals-intro-inner {
    text-align: left !important;
}

/* ----- Animals page thumbnail: 4-in-a-row layout ----- */
.ohb2-prod-block-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 8px;
}
/* .ohb2-prod-thumb-video was a navy placeholder box with a \25B6 glyph
   printed by a ::before, from before there were any films to point it at.
   Deleted 2026-09-03: the real tile is the poster frame plus the deck's
   white ring-and-triangle badge, and it lives with the rest of the strip in
   ohb2-catalog.css. This block survived long enough to leak its glyph into
   the top-left corner of every real tile -- the ::before stopped being a
   centred flex child the moment the tile became display:block. Do not
   reintroduce a placeholder here; an unhosted film renders no tile at all. */

/* ----- Upgrade blocks intro: left-align ----- */
.ohb2-upgrades-intro,
.ohb2-upgrades-intro-inner {
    text-align: left !important;
}

/* ----- RTO page: Is Rent-To-Own heading left-align ----- */
.ohb2-rto-info-section h2,
.ohb2-rto-right-inner > h2 {
    text-align: left !important;
}

/* ----- Catalog intro: left-align handled by .ohb2-catalog-intro-left class in catalog CSS ----- */

/* ----- Hero CTA strip: compact ----- */
.ohb2-hero-cta-strip {
    min-height: 0 !important;
    height: auto !important;
}
.ohb2-hero-ctas {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    transform: none !important;
}
.ohb2-hero-cta-btn {
    flex: 1 !important;
    padding: 18px 12px !important;
    font-size: 14px !important;
    min-height: 0 !important;
}

/* ----- Quote form: 2-col layout (selects left, textarea right) ----- */
.ohb2-quote-cols {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.ohb2-quote-col-selects {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
}
.ohb2-quote-col-selects select {
    margin-bottom: 10px !important;
}
.ohb2-quote-col-textarea {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ohb2-quote-col-textarea textarea {
    flex: 1;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 220px !important;
    margin-bottom: 0 !important;
    resize: vertical;
}
.ohb2-quote-submit-wrap {
    text-align: right !important;
}
.ohb2-quote-subheading {
    text-align: right !important;
    margin-top: 10px !important;
}
@media (max-width: 700px) {
    .ohb2-quote-cols { flex-direction: column; }
    .ohb2-quote-col-selects { flex: none; }
    .ohb2-quote-submit-wrap { text-align: center !important; }
    .ohb2-quote-subheading { text-align: center !important; }
}

/* ================================================================
   PASS-4 NEW ELEMENT STYLES
   ================================================================ */

/* The hero promo overlay lived here. The hero now runs the same slides as the
   live dealer sites, and those banners carry their own headline and button in
   the artwork, so there is nothing to overlay. */

/* ----- Brand band: From Your Imagination script text ----- */
.ohb2-brand-script-text {
    font-family: 'Dancing Script', 'Great Vibes', cursive;
    font-size: 34px;
    font-style: italic;
    color: #E9BB52;
    margin: 10px 0 18px;
    line-height: 1.2;
    text-align: center;
}

/* ----- Popular Designs customize button: gold, overlapping cards area ----- */
.ohb2-designs-customize { margin-top: 16px; text-align: center; }
.ohb2-designs-customize-btn {
    background: #E9BB52 !important;
    color: #1A567A !important;
    font-weight: 700;
    padding: 10px 32px !important;
    border: 2px solid #d9a820 !important;
}
.ohb2-designs-customize-btn:hover {
    background: #d9a820 !important;
    color: #1A567A !important;
}

/* ----- Building detail: video thumb slot ----- */
/* Video thumb: now a tile inside the thumb strip, same height as photo thumbs */
.ohb2-bldg-video-thumb {
    height: 60px;
    width: 80px;
    min-width: 80px;
    background: #1A567A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 2px;
    flex-shrink: 0;
    position: relative;
}
.ohb2-bldg-video-thumb::before {
    content: '\25B6';
    color: #E9BB52;
    font-size: 22px;
}

/* ----- Building detail: Can't Find mockup placeholder ----- */
.ohb2-builder-cta-mockup {
    width: 140px;
    height: 110px;
    background: #D0D8E0;
    border: 2px solid #1A567A;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    border-radius: 6px;
    font-size: 11px;
    color: #555;
    text-align: center;
}
.ohb2-builder-cta-mockup::before {
    content: '3D\A Builder\A Preview';
    white-space: pre;
    font-size: 11px;
    color: #1A567A;
    font-weight: 600;
}

/* ----- Upgrades: tablet mockup in builder band ----- */
.ohb2-builder-band-mockup {
    flex: 0 0 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ohb2-builder-band-tablet-ph {
    width: 130px;
    height: 100px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}
.ohb2-builder-band-tablet-ph::before {
    content: '\1F4F1';
    font-size: 32px;
}

/* ----- About trust sections v2: h2 full-width centered above 2-col ----- */
.ohb2-ohb-subsection-v2 {
    display: block !important;
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-ohb-sub-h2-centered {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1A567A !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
}
.ohb2-ohb-sub-body {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.ohb2-ohb-sub-text-col {
    flex: 0 0 58%;
}
.ohb2-ohb-sub-badge {
    margin-bottom: 10px;
}
.ohb2-ohb-sub-badge img { max-width: 72px; height: auto; }
@media (max-width: 700px) {
    .ohb2-ohb-sub-body { flex-direction: column; }
    .ohb2-ohb-sub-text-col { flex: none; width: 100%; }
    .ohb2-ohb-subsection-v2 .ohb2-ohb-subsection-photo { width: 100%; }
}

/* ================================================================
   PASS 6 — 2026-07-27
   ================================================================ */

/* ----- From Your Imagination: 3-line treatment ----- */
.ohb2-brand-script-wrap {
    text-align: center;
    margin: 10px 0 18px;
    line-height: 1.1;
}
.ohb2-brand-script-from {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    font-variant: small-caps;
    margin-bottom: 2px;
}
.ohb2-brand-script-imagination {
    font-family: 'Dancing Script', 'Great Vibes', cursive;
    font-size: 42px;
    color: #E9BB52;
    line-height: 1.1;
}
.ohb2-brand-script-builders {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin-top: 2px;
}
.ohb2-brand-script-rule {
    width: 80px;
    height: 2px;
    background: rgba(255,255,255,0.35);
    margin: 10px auto 0;
}

/* ----- Low Price Guarantee CSS badge (placeholder for missing image) ----- */
.ohb2-badge-lpg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #E9BB52;
    border: 3px solid #fff;
    vertical-align: middle;
}
.ohb2-badge-lpg-inner {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    color: #1A567A;
    line-height: 1.25;
    letter-spacing: 0.04em;
}

/* Brochure block DOWNLOAD IT NOW: navy on inventory page (ohb2.css is the only sheet loaded there) */
.ohb2-inventory-page .ohb2-brochure-block a.ohb2-btn-gold,
.ohb2-inventory-page .ohb2-brochure-block .ohb2-btn-gold {
    background: #1A567A !important;
    color: #fff !important;
}
.ohb2-inventory-page .ohb2-brochure-block a.ohb2-btn-gold:hover {
    background: #14405C !important;
}


/* ================================================================
   PASS 8 — 2026-07-27
   ================================================================ */

/* 1. Swatch name labels: ALL CAPS + 2-line wrap (pass-9: moved to label-bar block above) */

/* 2. Sort+Filter toggle: navy-filled (not outline) */
.ohb2-filter-toggle-btn {
    background: #1A567A !important;
    color: #fff !important;
    border: none !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.ohb2-filter-toggle-btn:hover {
    background: #14405C !important;
    color: #fff !important;
}

/* 3. DOWNLOAD IT NOW global navy (home page uses only ohb2.css) */
.ohb2-brochure-block a.ohb2-btn-gold,
.ohb2-brochure-block .ohb2-btn-gold {
    background: #1A567A !important;
    color: #fff !important;
}
.ohb2-brochure-block a.ohb2-btn-gold:hover {
    background: #14405C !important;
}

/* 4. CUSTOMIZE overlay on active card image (bottom center of image area) */
.ohb2-design-card--active {
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    border: 1px solid #1A567A;
}
/* .ohb2-design-card-customize lives inside .ohb2-design-card-img (position:relative) */
.ohb2-design-card-customize {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    white-space: nowrap;
    display: block;
}
.ohb2-design-card-customize a {
    background: #E9BB52 !important;
    color: #1A567A !important;
    font-weight: 700;
    padding: 8px 24px;
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    border: 2px solid #d9a820;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ohb2-design-card-customize a:hover {
    background: #d9a820 !important;
}

/* 5. The hero 90-Days badge lived here. The live OHB hero banners bake the
   badge into the artwork, so the HTML one is gone with the fake hero. */

/* 6. Builder band: centered heading + 2-col row */
.ohb2-builder-band-inner {
    display: block !important;
    max-width: var(--ohb2-col);
    margin: 0 auto;
    padding: 40px 24px;
}
.ohb2-builder-band-heading-centered {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 26px !important; /* #23 section-heading standard */
    text-transform: none !important;
    line-height: 1.3;
}
.ohb2-builder-any {
    color: #E9BB52;
    text-decoration: underline;
    text-decoration-color: #E9BB52;
}
.ohb2-builder-band-two-col {
    display: flex;
    gap: 36px;
    align-items: flex-start;
}
.ohb2-builder-band-mockup-left {
    flex: 0 0 180px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8px;
}
.ohb2-builder-band-cta-right {
    flex: 1;
}
.ohb2-builder-band-cta-right h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    margin: 0 0 14px !important;
    letter-spacing: 0.04em;
}
.ohb2-builder-band-cta-right p {
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
}
.ohb2-builder-band-btn {
    display: inline-block !important;
    width: auto !important;
    padding: 14px 32px !important;
}
@media (max-width: 700px) {
    .ohb2-builder-band-two-col { flex-direction: column; }
    .ohb2-builder-band-mockup-left { flex: none; width: 100%; justify-content: center; }
}

/* 7. Upgrade block item headings: ensure 17px visible */
.ohb2-upgrade-block h2 {
    font-size: 17px !important;
    color: #1A567A !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
}

/* 8. Detail gallery: photo fills column, no gray side bands */
.ohb2-bldg-gallery {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.ohb2-gallery-main {
    width: 100% !important;
    overflow: hidden;
}
.ohb2-gallery-main img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    max-height: 420px !important;
}

/* 9. About: OHB logo badge above About Old Hickory... h2 */
.ohb2-about-ohb-logo-badge {
    display: flex;
    justify-content: center;
    margin: 0 0 18px;
}
.ohb2-about-ohb-logo-badge img {
    max-width: 200px;
    height: auto;
    display: block;
}
.ohb2-about-ohb-placeholder-badge {
    width: 200px;
    height: 80px;
    background: #D8D8D8;
    border: 2px solid #B0B0B0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #555;
    text-align: center;
    border-radius: 4px;
}

/* 10. Detail: About This Shed Model full-width single column */
.ohb2-bldg-description-section {
    background: #fff;
    /* V6 batch 3, item 5 (2026-10-22): the 20px was a SECOND gutter on top of
       .ohb2-wrap's own, so at phone width this section's copy started at 40px
       while every other section on the page started at 20px. See the block at
       the end of this file. No desktop change: from 1230px up .ohb2-wrap is
       capped at its 1190px max-width and centred, so the 40px it gives back is
       absorbed by the centring and the content box lands on the same pixel. */
    padding: 40px 0;
}
.ohb2-bldg-desc-single {
    max-width: 1052px;
    margin: 20px auto 0;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* 11. Catalog intro: narrower left-aligned variant for pages 04+05 */
.ohb2-catalog-intro-narrow .ohb2-catalog-intro-inner {
    max-width: 720px !important;
    margin-left: 0 !important;
    text-align: left !important;
}
.ohb2-catalog-intro-narrow h1,
.ohb2-catalog-intro-narrow p {
    text-align: left !important;
}

/* 12. Prod-block placeholder: full structure */
.ohb2-prod-block-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: #555;
    letter-spacing: 0.04em;
    margin-top: 6px;
}
.ohb2-prod-thumb-ph {
    height: 52px;
    background: #C8D0D8;
    border: 1px solid #B0B8C0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #888;
}

/* Building detail — teal model sub-headings inside About This Shed Model */
.ohb2-bldg-model-subheading {
    color: #1A567A;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 6px;
}
.ohb2-bldg-model-subheading:first-child { margin-top: 0; }

/* PASS-2 FIX F2 (hero type scale + left-align) applied to the hero promo
   overlay, which is gone: the hero now runs the live OHB banners, whose type
   is part of the artwork. */

/* ================================================================
   PASS-2 FIX: F3 quote-form select dropdown arrow
   (appearance:none removed native arrow — restore via SVG background)
   ================================================================ */
.ohb2-quote-section select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555555' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 36px !important;
    cursor: pointer !important;
}

/* ================================================================
   PASS-2 FIX: F5 category hero — single full-width image band
   (was dual 50/50 split; show first child full-width, hide second)
   ================================================================ */
.ohb2-upgrades-hero > .ohb2-upgrades-hero-half:first-child {
    width: 100% !important;
}
.ohb2-upgrades-hero > .ohb2-upgrades-hero-half:not(:first-child) {
    display: none !important;
}

/* =====================================================================
   OHB content doc — batch 1 (header / nav / footer / home)
   Real marketing assets replace the dev placeholder tiles, and the brand
   band's hot-spot widget grows from 6 hard-coded points to the 8 the
   "Building Hot Spot Info" doc specifies.
   ===================================================================== */

.ohb2-brand-ohbs-logo {
    max-height: 84px;
    width: auto;
    margin: 0 auto 20px;
    display: block;
}

.ohb2-brand-imagination-img {
    max-width: 340px;
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto 6px;
}

/* Real photography — drop the grey placeholder chrome. */
.ohb2-design-card-img {
    background-color: transparent;
    border: 0;
}

.ohb2-promo-pane-img {
    width: 100%;
    min-height: 160px;
    aspect-ratio: 53 / 30;
    margin-bottom: 20px;
}

.ohb2-brochure-device-img {
    width: 240px;
    max-width: 100%;
    height: 150px;
}

/* Hot-spot widget: 8 stars positioned against the side-porch cutaway. */
.ohb2-anatomy-img-wrap {
    max-width: 420px;
}

.ohb2-anat-dot img {
    width: 16px;
    height: 16px;
    display: block;
}

.ohb2-anat-star-1,
.ohb2-anat-star-2,
.ohb2-anat-star-3,
.ohb2-anat-star-4,
.ohb2-anat-star-5,
.ohb2-anat-star-6,
.ohb2-anat-star-7,
.ohb2-anat-star-8 {
    right: auto;
    bottom: auto;
}

.ohb2-anat-star-1 { top: 76%; left: 49%; }  /* Add-on Packages — porch deck */
.ohb2-anat-star-2 { top: 51%; left: 72%; }  /* Colours — painted side wall */
.ohb2-anat-star-3 { top: 8%;  left: 57%; }  /* Roofing — metal roof */
.ohb2-anat-star-4 { top: 18%; left: 31%; }  /* And many more options (see #6 swap) */
.ohb2-anat-star-5 { top: 69%; left: 22%; }  /* Flooring — cutaway floor */
.ohb2-anat-star-6 { top: 36%; left: 46%; }  /* Windows & Doors — house door */
.ohb2-anat-star-7 { top: 41%; left: 17%; }  /* Loft, shelves & workbenches */
.ohb2-anat-star-8 { top: 36%; left: 90%; }  /* Siding (see #6 swap) */

/* The Popular Designs row is a real horizontal slider now that the doc
   supplies six designs — the arrows and dots were previously inert. */
.ohb2-designs-cards {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    justify-content: flex-start;
    padding-bottom: 4px;
}

.ohb2-designs-cards::-webkit-scrollbar {
    display: none;
}

.ohb2-designs-cards .ohb2-design-card {
    flex: 0 0 340px;
    max-width: 340px;
    scroll-snap-align: start;
}

/* Body-copy links have to clear the navy band. */
.ohb2-brand-copy a {
    color: #E9BB52;
    text-decoration: underline;
}

.ohb2-brand-copy a:hover {
    color: #fff;
}

/* ===================================================================
   Contact Dealer popup (inventory + featured cards)
   =================================================================== */
/* Fancybox stylesheet loads after this one and its .fancybox__content rule
   would otherwise win the width, so the modal state is named explicitly. */
.ohb2-contact-popup,
.fancybox__content.ohb2-contact-popup {
    background: #fff;
    padding: 32px;
    max-width: 560px;
    width: 100%;
    box-sizing: border-box;
}

.ohb2-contact-popup-title {
    color: #1A567A;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 6px 0;
}

.ohb2-contact-popup-building {
    color: #4A4A4A;
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 18px 0;
}

.ohb2-contact-popup .form-submit-message {
    padding: 12px;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 14px;
}

.ohb2-contact-popup .form-submit-message.error {
    background: #FDECEA;
    color: #A32B22;
}

.ohb2-contact-popup .form-submit-message.success {
    background: #EAF6EC;
    color: #1E6B2B;
}

.ohb2-contact-popup-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.ohb2-contact-popup-form input,
.ohb2-contact-popup-form select,
.ohb2-contact-popup-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    box-sizing: border-box;
    font-family: inherit;
    background: #fff;
    color: #1A1A1A;
}

.ohb2-contact-popup-form textarea {
    min-height: 100px;
    resize: vertical;
    display: block;
    margin-bottom: 16px;
}

.ohb2-contact-popup-submit {
    text-align: center;
}

.ohb2-contact-popup-submit .ohb2-btn-gold {
    display: inline-flex;
    width: auto;
    padding: 12px 40px;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

/* The card grid's Inventory # row sits above the price rows and reads as
   metadata rather than a price. */
.ohb2-price-row.ohb2-inv-number-row .ohb2-price-value {
    font-weight: 600;
    font-size: 13px;
    word-break: break-all;
}

@media (max-width: 600px) {
    .ohb2-contact-popup,
    .fancybox__content.ohb2-contact-popup {
        padding: 24px 18px;
    }
    .ohb2-contact-popup-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   HOMEPAGE DESIGN PASS (2026-08-26)
   Source of truth: OHB_BarnDealerDesign.pdf page 1 — "OHBS Home Page".

   Colours sampled straight out of the mockup:
     navy  #1A567A   gold #E9BB52   bar/label grey #DBD9D9
     sale  #8C1312   body #333      panel grey #E9E9E9
   Type: Roboto (body + headings), Roboto Condensed (card captions, FAQ).
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Fonts

   frontend.css declares Roboto with a comma-separated @font-face
   family, which is invalid, so the face never registers and
   .ohb2-body { font-family: inherit } dropped the theme all the way
   back to the browser's default serif. Declare the faces properly
   and name the stack instead of inheriting it.
   --------------------------------------------------------------- */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.ohb2-body,
.ohb2-body button,
.ohb2-body input,
.ohb2-body select,
.ohb2-body textarea {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.ohb2-body {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* ---------------------------------------------------------------
   2. Header band — navy, dealer logo left, call block right
   --------------------------------------------------------------- */
.ohb2-header-combined {
    background: #1A567A;
    padding: 16px 20px 12px;
}
.ohb2-header-combined-inner {
    max-width: var(--ohb2-col);
    align-items: center;
}
.ohb2-hdr-logo img {
    max-height: 118px;
}
.ohb2-hdr-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.ohb2-hdr-call {
    align-items: center;
    gap: 0;
}
.ohb2-hdr-call-label {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}
.ohb2-hdr-phone {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}
.ohb2-hdr-phone:hover {
    color: #fff;
}
.ohb2-hdr-social {
    gap: 10px;
}
.ohb2-hdr-social img {
    width: 30px;
    height: 30px;
}

/* ---------------------------------------------------------------
   3. Nav bar — light grey, navy title-case links, navy active tab
   --------------------------------------------------------------- */
.ohb2-nav-bar,
.ohb2-nav-bar-inner {
    background: #DBD9D9;
}
.ohb2-nav-bar-inner {
    max-width: var(--ohb2-col);
}
.ohb2-nav-menu {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.ohb2-nav-menu > li > a {
    color: #1A567A;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: 0 20px;
    min-height: 58px;
    border-bottom: none;
}
.ohb2-nav-menu > li > a:hover {
    color: #fff;
    background: #2b6d94;
}
.ohb2-nav-menu > li > a.ohb2-active {
    background: #1A567A;
    color: #fff;
    border-bottom: none;
}
/* The mockup's nav carries no dropdown carets — hover still opens them. */
.ohb2-nav-caret {
    display: none;
}

/* ---------------------------------------------------------------
   4. Hero CTA strip — two navy blocks on white, under the hero
   --------------------------------------------------------------- */
.ohb2-hero-cta-strip {
    background: #fff !important;
    display: block !important;
    padding: 30px 20px 42px !important;
    overflow: visible !important;
}
.ohb2-hero-cta-strip .ohb2-hero-ctas {
    max-width: var(--ohb2-col);
    margin: 0 auto !important;
    gap: 26px;
}
.ohb2-hero-cta-strip .ohb2-hero-cta-btn {
    background: #1A567A !important;
    border: none !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    min-height: 126px !important;
    padding: 20px 16px !important;
}
.ohb2-hero-cta-strip .ohb2-hero-cta-btn:hover {
    background: #124763 !important;
}

/* Hero slider nav: dashes below the band, navy active / grey rest.
   flexslider draws its paging as an absolutely positioned <ol> of <li><a>;
   the design wants it in flow under the band, so pull it back to static. */
.ohb2-home-hero .flex-control-nav.flex-control-paging {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    background: #fff;
    margin: 0;
    padding: 16px 8px 0;
    width: auto;
    text-align: center;
}
.ohb2-home-hero .flex-control-paging li {
    margin: 0;
    display: block;
    width: auto;
    height: auto;
}
.ohb2-home-hero .flex-control-paging li a {
    display: block;
    width: 112px;
    height: 7px;
    max-width: 18vw;
    border-radius: 0;
    background: #C8C8C8;
    box-shadow: none;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}
.ohb2-home-hero .flex-control-paging li a.flex-active,
.ohb2-home-hero .flex-control-paging li a:hover {
    background: #1A567A;
}

/* ---------------------------------------------------------------
   5. Section headings
   --------------------------------------------------------------- */
.ohb2-section-heading {
    font-size: 38px;
    font-weight: 700;
    color: #1A567A;
    line-height: 1.2;
    margin: 0 0 26px 0;
}

/* ---------------------------------------------------------------
   6. Featured inventory card
   Anatomy per the mockup: square photo, navy name/SKU bar, bordered
   two-tone price rows, paired navy buttons, gold BUY OR RENT NOW.
   --------------------------------------------------------------- */
.ohb2-featured-section {
    padding: 10px 20px 56px;
}
.ohb2-featured-section .ohb2-wrap {
    max-width: var(--ohb2-col);
}
.ohb2-card-grid {
    gap: 24px;
}
.ohb2-building-card {
    border: none;
    width: 384px;
}
.ohb2-building-card .ohb2-card-thumb {
    height: auto;
    aspect-ratio: 1 / 1;
    background: #E9E9E9;
}
.ohb2-building-card .ohb2-card-name-overlay {
    position: static;
    background: #1A567A;
    color: #fff;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    padding: 11px 12px 13px;
}
.ohb2-card-name-text {
    display: block;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}
.ohb2-card-sku-text {
    display: block;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 2px;
    word-break: break-word;
}
.ohb2-building-card .ohb2-card-body {
    padding: 0;
}
.ohb2-building-card .ohb2-price-table {
    border-top: none;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ohb2-building-card .ohb2-price-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    border: 1px solid #1A567A;
    border-bottom: 1px solid #1A567A;
    font-size: 18px;
}
.ohb2-building-card .ohb2-price-label {
    flex: 0 0 calc(50% - 3px);
    background: #DBD9D9;
    color: #1A567A;
    font-weight: 700;
    text-align: center;
    padding: 10px 6px;
    border-right: 1px solid #1A567A;
}
.ohb2-building-card .ohb2-price-value {
    flex: 1 1 auto;
    background: #fff;
    color: #000;
    font-weight: 700;
    text-align: center;
    padding: 10px 6px;
    min-width: 0;
}
.ohb2-building-card .ohb2-price-row.cash-row .ohb2-price-value {
    color: #111;
    text-decoration: line-through;
}
.ohb2-building-card .ohb2-price-row.internet-row .ohb2-price-value {
    background: #fff;
    /* #4 (Mike) "brighter red": 2026-09-17 — 410b224 took .ohb2-inv-card and
       .ohb2-building-page to #D32F2F but missed the homepage Featured
       Inventory card, which is .ohb2-building-card and still read #8C1312.
       Same value as the rule near line 4528 so all three card types match. */
    color: #D32F2F;
    display: block;
    border-radius: 0;
    font-size: 18px;
    padding: 10px 6px;
}
.ohb2-building-card .ohb2-price-row.contact-row .ohb2-price-value a {
    /* #4 (Mike) "brighter red", second half: 2026-09-21. The rule above took
       the homepage Featured card's Internet Price to #D32F2F, but this link --
       which FILLS the Sale Price and both Rent-to-Own slots on a used building,
       so on the demo's "Cabana - 10x16" it is three of the five rows -- was
       left on the old #8C1312 and sat beside cards already showing the bright
       red. Same value as the .ohb2-inv-card / .ohb2-building-page rule near
       line 4541, which has read #D32F2F since 410b224. */
    color: #D32F2F;
    font-weight: 700;
    text-decoration: none;
}
.ohb2-building-card .ohb2-card-btn-row {
    gap: 6px;
    margin: 7px 0 0;
}
.ohb2-building-card .ohb2-btn-outline {
    background: #1A567A;
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 11px 6px;
}
.ohb2-building-card .ohb2-btn-outline:hover {
    background: #124763;
}
.ohb2-building-card .ohb2-btn-gold {
    margin-top: 6px;
    padding: 12px 16px;
    font-size: 21px;
    letter-spacing: 0.01em;
}

/* Gold button, everywhere it is the brand's primary CTA: navy label */
.ohb2-btn-gold {
    background: #E9BB52;
    color: #1A567A;
    font-weight: 700;
}
.ohb2-btn-gold:hover {
    background: #d9a93e;
    color: #1A567A;
}

/* Navy button */
.ohb2-btn-blue {
    background: #1A567A;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 15px 34px;
}
.ohb2-btn-blue:hover {
    background: #124763;
}
.ohb2-view-all-wrap {
    margin-top: 30px;
}
.ohb2-view-all-wrap .ohb2-btn-blue {
    font-size: 26px;
    padding: 18px 46px;
}

/* ---------------------------------------------------------------
   7. Brand band
   --------------------------------------------------------------- */
.ohb2-brand-band {
    background: #1A567A;
    background-image: radial-gradient(ellipse at 50% 45%, #2A6187 0%, #1A567A 62%);
    padding: 44px 20px 56px;
}
.ohb2-brand-band-inner {
    max-width: var(--ohb2-col);
}
.ohb2-brand-dealer-heading {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 6px 0;
}
.ohb2-brand-dealer-sub {
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    margin: 0 0 26px 0;
}
.ohb2-brand-ohbs-logo {
    max-height: none;
    max-width: 480px;
    width: 70%;
    margin: 0 auto 30px;
}
.ohb2-badge-row {
    gap: 30px;
    margin: 0 0 8px;
}
.ohb2-badge-row img {
    height: 118px;
}
.ohb2-brand-script-wrap {
    margin: 18px 0 8px;
}
.ohb2-brand-imagination-img {
    max-width: 700px;
    width: 62%;
    margin: 0 auto 14px;
}
.ohb2-brand-copy {
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
    max-width: var(--ohb2-col);
    margin: 0 auto 22px;
}
.ohb2-brand-copy a {
    color: #E9BB52;
    font-weight: 700;
}

/* "Hover over the stars…" — gold, underlined, star bullets either side */
.ohb2-stars-cta-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 20px;
    font-weight: 700;
    color: #E9BB52;
    text-decoration: underline;
    text-underline-offset: 4px;
    letter-spacing: 0.01em;
    margin: 0 0 26px;
}
.ohb2-stars-cta-text::before,
.ohb2-stars-cta-text::after {
    content: '';
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #E9BB52 url('../ohb2-assets/brand-star-icon.png') no-repeat center / 18px 18px;
}

/* Anatomy widget: cutaway left, live hot-spot panel right */
.ohb2-anatomy-widget {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    gap: 48px;
    align-items: flex-start;
}
.ohb2-anatomy-img-wrap {
    flex: 0 0 58%;
    max-width: 680px;
}
.ohb2-anat-dot {
    width: 42px;
    height: 42px;
    background: #E9BB52;
}
.ohb2-anat-dot img {
    width: 24px;
    height: 24px;
}
.ohb2-anatomy-panels {
    flex: 1 1 auto;
    padding-top: 24px;
}
.ohb2-anatomy-panels::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 3 / 2;
    margin: 0 auto 22px;
    border-radius: 50%;
    border: 4px solid #E9BB52;
    background: #E9E9E9 url('../ohb2-assets/promo-ready-to-deliver.jpg') no-repeat center / cover;
}
.ohb2-anat-panel h3 {
    font-size: 34px;
    font-weight: 700;
    color: #E9BB52;
    text-transform: none;
    text-align: center;
    line-height: 1.2;
    margin: 0 0 14px 0;
}
.ohb2-anat-panel p {
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
    text-align: justify;
}

/* The callout under the panel carries the CTA only — the live panel
   already prints the Add-on Packages heading and copy. */
.ohb2-addon-callout {
    background: transparent;
    border: none;
    padding: 0;
    max-width: none;
    width: 38%;
    margin: 18px 0 0 auto;
    text-align: center;
}
.ohb2-addon-callout h3,
.ohb2-addon-callout p {
    display: none;
}
.ohb2-addon-callout .ohb2-btn-gold {
    display: inline-flex;
    width: auto;
    min-width: 300px;
    padding: 14px 34px;
    font-size: 26px;
}

/* ---------------------------------------------------------------
   8. Popular designs carousel
   Grey render on a light tile, navy condensed caption bar, and the
   description + CUSTOMIZE reveal over the image on hover.
   --------------------------------------------------------------- */
.ohb2-designs-section {
    background: #fff;
    padding: 52px 20px 46px;
}
.ohb2-designs-inner {
    max-width: var(--ohb2-col);
}
.ohb2-designs-carousel-wrap {
    padding: 0 56px !important;
}
.ohb2-designs-carousel-btn {
    background: transparent;
    color: #555;
    width: 44px;
    height: 64px;
    font-size: 64px;
    line-height: 1;
}
.ohb2-designs-carousel-btn:hover {
    background: transparent;
    color: #1A567A;
}
.ohb2-designs-carousel-prev { left: 0; }
.ohb2-designs-carousel-next { right: 0; }

.ohb2-designs-cards .ohb2-design-card {
    flex: 0 0 384px;
    max-width: 384px;
}
.ohb2-design-card {
    border: none;
    background: transparent;
    overflow: hidden;
}
.ohb2-design-card-img {
    height: 248px;
    background-color: #E9E9E9 !important;
    background-size: contain !important;
}
.ohb2-design-card-info {
    position: relative;
    background: #1A567A;
    padding: 11px 12px;
}
.ohb2-design-card-title {
    font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    margin: 0;
}
.ohb2-design-card-desc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 248px;
    background: #1A567A;
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    padding: 18px 20px 62px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.ohb2-design-card:hover .ohb2-design-card-desc,
.ohb2-design-card:focus-within .ohb2-design-card-desc {
    opacity: 1;
    visibility: visible;
}
.ohb2-design-card-customize {
    bottom: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.ohb2-design-card:hover .ohb2-design-card-customize,
.ohb2-design-card:focus-within .ohb2-design-card-customize {
    opacity: 1;
    visibility: visible;
}
.ohb2-design-card-customize a {
    border: none;
    font-size: 18px;
    padding: 10px 30px;
}
/* Touch devices never fire :hover — keep the builder link reachable. */
@media (hover: none) {
    .ohb2-design-card-customize {
        opacity: 1;
        visibility: visible;
    }
}
.ohb2-designs-dots {
    margin-top: 20px;
    gap: 10px;
}
.ohb2-designs-dot {
    width: 11px;
    height: 11px;
    background: #B9B9B9;
}

/* ---------------------------------------------------------------
   9. Promo duo — heading above the photo, navy CTA underneath
   --------------------------------------------------------------- */
.ohb2-promo-duo {
    background: #fff;
    max-width: var(--ohb2-col);
    margin: 0 auto;
}
.ohb2-promo-pane {
    padding: 10px 20px 48px;
}
.ohb2-promo-pane + .ohb2-promo-pane {
    border-left: none;
}
.ohb2-promo-pane h3 {
    order: -1;
    color: #1A567A;
    font-size: 38px;
    font-weight: 700;
    text-transform: none;
    line-height: 1.2;
    margin: 0 0 24px 0;
}
.ohb2-promo-pane-img {
    border-radius: 16px;
    border: 3px solid #1A567A;
    margin-bottom: 26px;
}

/* ---------------------------------------------------------------
   10. Brochure block
   --------------------------------------------------------------- */
.ohb2-brochure-block {
    border-top: none;
    padding: 10px 20px 56px;
}
.ohb2-brochure-block-inner {
    max-width: var(--ohb2-col);
    gap: 56px;
}
.ohb2-brochure-device-img {
    width: 520px;
    height: 330px;
    max-width: 100%;
}
.ohb2-brochure-text-wrap {
    text-align: left;
}
.ohb2-brochure-text-wrap h3 {
    color: #1A567A;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 24px 0;
}
.ohb2-brochure-block a.ohb2-btn-gold,
.ohb2-brochure-block .ohb2-btn-gold {
    font-size: 26px;
    padding: 16px 40px !important;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------
   11. FAQ accordion — navy bars ruled in gold, toggle on the left
   --------------------------------------------------------------- */
.ohb2-faq-section {
    padding: 34px 20px 60px; /* #21 rhythm */
}
.ohb2-faq-inner {
    max-width: var(--ohb2-col);
}
.ohb2-faq-item {
    margin-bottom: 3px;
}
.ohb2-faq-header {
    justify-content: flex-start;
    gap: 20px;
    padding: 11px 20px;
    font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 2px solid #E9BB52;
}
.ohb2-faq-header-closed,
.ohb2-faq-header-open {
    background: #1A567A;
    color: #E9BB52;
}
.ohb2-faq-item .ohb2-faq-header .ohb2-faq-toggle,
.ohb2-faq-item .ohb2-faq-header-closed .ohb2-faq-toggle {
    order: -1;
    margin: 0;
    color: #E9BB52;
    font-size: 26px;
    font-weight: 400;
    width: 24px;
    text-align: center;
}
.ohb2-faq-body {
    border: 2px solid #E9BB52;
    border-top: none;
    padding: 14px 22px;
    font-size: 17px;
    line-height: 1.55;
    color: #222;
}

/* ---------------------------------------------------------------
   12. Footer — light grey band, navy type, dark social glyphs
   --------------------------------------------------------------- */
.ohb2-footer {
    background: #DBD9D9;
    color: #1A567A;
    padding: 42px 20px 16px;
}
.ohb2-footer-inner {
    max-width: var(--ohb2-col);
    gap: 40px;
}
.ohb2-footer-biz-name {
    color: #1A567A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}
.ohb2-footer-address,
.ohb2-footer-phone,
.ohb2-footer-email {
    font-size: 17px;
    line-height: 1.45;
    margin-bottom: 10px;
}
.ohb2-footer-address a,
.ohb2-footer-phone a,
.ohb2-footer-email a {
    color: #1A567A;
}
.ohb2-footer-social {
    gap: 12px;
    margin-top: 18px;
}
.ohb2-footer-social img,
.ohb2-footer-social-email img {
    width: 40px;
    height: 40px;
    filter: none;
}
.ohb2-footer-auth-dealer img {
    max-width: 210px;
}
.ohb2-footer-hours-title {
    color: #1A567A;
    font-size: 18px;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}
.ohb2-footer-hours-row {
    font-size: 17px;
    line-height: 1.45;
    margin-bottom: 10px;
}
.ohb2-footer-privacy a {
    color: #1A567A;
    font-size: 15px;
}
.ohb2-footer-privacy a:hover {
    color: #124763;
}
.ohb2-copyright {
    background: #DBD9D9;
    color: #1A567A;
    font-size: 15px;
    padding: 8px 20px 26px;
}
.ohb2-copyright span {
    color: #1A567A;
}

/* ---------------------------------------------------------------
   13. Responsive
   --------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
    .ohb2-nav-menu > li > a { font-size: 15px; padding: 0 12px; }
    .ohb2-hdr-logo img { max-height: 90px; }
    .ohb2-hdr-phone { font-size: 26px; }
    .ohb2-designs-cards .ohb2-design-card { flex: 0 0 320px; max-width: 320px; }
    .ohb2-design-card-img,
    .ohb2-design-card-desc { height: 210px; }
}

@media screen and (max-width: 900px) {
    .ohb2-nav-menu { justify-content: flex-start; }
    .ohb2-nav-menu > li > a {
        color: #fff;
        min-height: 0;
        padding: 12px 20px;
        font-size: 16px;
    }
    .ohb2-nav-menu > li > a.ohb2-active { background: rgba(255,255,255,0.15); }
    .ohb2-nav-caret { display: inline-block; color: #fff; }
    .ohb2-anatomy-widget { gap: 28px; }
    .ohb2-anatomy-img-wrap { flex: none; max-width: 100%; }
    .ohb2-anatomy-panels { padding-top: 0; }
    .ohb2-addon-callout { width: 100%; margin: 18px auto 0; }
}

@media screen and (max-width: 700px) {
    .ohb2-header-combined { padding: 14px 16px 10px; }
    .ohb2-header-combined-inner { justify-content: center; gap: 10px; }
    .ohb2-hdr-meta { align-items: center; }
    .ohb2-hdr-logo img { max-height: 76px; }
    .ohb2-hdr-call-label { font-size: 17px; }
    .ohb2-hdr-phone { font-size: 26px; }

    .ohb2-section-heading { font-size: 26px; margin-bottom: 20px; }

    .ohb2-hero-cta-strip { padding: 20px 16px 28px !important; }
    .ohb2-hero-cta-strip .ohb2-hero-ctas { flex-direction: column; gap: 14px; }
    .ohb2-hero-cta-strip .ohb2-hero-cta-btn {
        font-size: 21px !important;
        min-height: 82px !important;
    }
    .ohb2-home-hero .flex-control-paging li a { height: 6px; }
    .ohb2-home-hero .flex-control-nav.flex-control-paging { gap: 14px; padding-top: 12px; }

    .ohb2-featured-section { padding: 6px 16px 40px; }
    .ohb2-building-card { width: 100%; }
    .ohb2-card-name-text { font-size: 19px; }
    .ohb2-card-sku-text { font-size: 15px; }
    .ohb2-building-card .ohb2-price-row { font-size: 16px; }
    .ohb2-building-card .ohb2-btn-outline { font-size: 15px; }
    .ohb2-building-card .ohb2-btn-gold { font-size: 19px; }
    .ohb2-view-all-wrap .ohb2-btn-blue { font-size: 20px; padding: 15px 30px; }

    .ohb2-brand-band { padding: 34px 16px 40px; }
    .ohb2-brand-dealer-heading { font-size: 27px; }
    .ohb2-brand-dealer-sub { font-size: 19px; margin-bottom: 20px; }
    .ohb2-brand-ohbs-logo { width: 84%; }
    .ohb2-badge-row { gap: 16px; }
    .ohb2-badge-row img { height: 72px; }
    .ohb2-brand-imagination-img { width: 86%; }
    .ohb2-brand-copy { font-size: 17px; }
    .ohb2-stars-cta-text { font-size: 16px; gap: 10px; }
    .ohb2-stars-cta-text::before,
    .ohb2-stars-cta-text::after { width: 26px; height: 26px; background-size: 14px 14px; }
    .ohb2-anat-dot { width: 30px; height: 30px; }
    .ohb2-anat-dot img { width: 17px; height: 17px; }
    .ohb2-anat-panel h3 { font-size: 25px; }
    .ohb2-anat-panel p { font-size: 16px; }
    .ohb2-addon-callout .ohb2-btn-gold { font-size: 20px; min-width: 0; width: 100%; }

    .ohb2-designs-section { padding: 34px 12px 32px; }
    .ohb2-designs-carousel-wrap { padding: 0 34px !important; }
    .ohb2-designs-carousel-btn { font-size: 46px; width: 30px; }
    .ohb2-designs-cards .ohb2-design-card { flex: 0 0 270px; max-width: 270px; }
    .ohb2-design-card-img,
    .ohb2-design-card-desc { height: 180px; }
    .ohb2-design-card-title { font-size: 13px; }

    .ohb2-promo-duo { flex-direction: column; }
    .ohb2-promo-pane { padding: 6px 16px 34px; }
    .ohb2-promo-pane h3 { font-size: 26px; margin-bottom: 18px; }

    .ohb2-brochure-block { padding: 6px 16px 40px; }
    .ohb2-brochure-block-inner { gap: 24px; }
    .ohb2-brochure-device-img { width: 100%; height: 210px; }
    .ohb2-brochure-text-wrap { text-align: center; }
    .ohb2-brochure-text-wrap h3 { font-size: 26px; }
    .ohb2-brochure-block a.ohb2-btn-gold,
    .ohb2-brochure-block .ohb2-btn-gold { font-size: 20px; padding: 14px 26px !important; }

    .ohb2-faq-section { padding: 6px 16px 40px; }
    .ohb2-faq-header { font-size: 15px; gap: 12px; padding: 10px 14px; }
    .ohb2-faq-body { font-size: 15px; padding: 12px 16px; }

    .ohb2-footer { padding: 32px 20px 12px; }
    .ohb2-footer-inner { gap: 26px; }
    .ohb2-footer-col-center { align-items: center; text-align: center; }
}

/* ---------------------------------------------------------------
   14. Home page design pass — round 2 corrections against page 1
   --------------------------------------------------------------- */

/* Square-ish photo cropped the sheds too hard; 5:4 keeps the whole
   building in frame at close to the mockup's proportion. */
.ohb2-building-card .ohb2-card-thumb {
    aspect-ratio: 5 / 4;
}

/* Hot-spot column: panel over CTA, cutaway spanning both rows. */
.ohb2-anatomy-widget {
    display: grid;
    grid-template-columns: 58% 1fr;
    grid-template-areas:
        'img panel'
        'img cta';
    column-gap: 48px;
    align-items: start;
}
.ohb2-anatomy-img-wrap { grid-area: img; flex: none; max-width: 100%; }
.ohb2-anatomy-panels   { grid-area: panel; }
.ohb2-addon-callout {
    grid-area: cta;
    width: auto;
    margin: 18px 0 0;
}

/* Caption bars stay one height whether the title wraps or not. */
.ohb2-design-card-info {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ohb2-design-card-title {
    font-size: 14px;
}

/* Both promo panes hang off the top so their photos line up even when
   one of them has no CTA configured. */
.ohb2-promo-pane {
    justify-content: flex-start;
}
.ohb2-promo-pane .ohb2-btn-blue {
    font-size: 26px;
    padding: 17px 42px;
}

/* Footer's centre logo rides with the first lines of the outer columns. */
.ohb2-footer-col-center {
    justify-content: flex-start;
    padding-top: 6px;
}

@media screen and (max-width: 900px) {
    .ohb2-anatomy-widget {
        grid-template-columns: 1fr;
        grid-template-areas:
            'img'
            'panel'
            'cta';
        row-gap: 24px;
    }
    .ohb2-addon-callout { margin: 0; }
}

@media screen and (max-width: 700px) {
    .ohb2-design-card-info { min-height: 56px; }
    .ohb2-promo-pane .ohb2-btn-blue { font-size: 20px; padding: 15px 30px; }
}

/* Carousel arrows: the mockup's chevrons are drawn strokes, not the thin
   ‹ › glyphs, so render them from borders and hide the character. */
.ohb2-designs-carousel-btn {
    font-size: 0;
    line-height: 0;
}
.ohb2-designs-carousel-btn::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    border-top: 6px solid currentColor;
    border-right: 6px solid currentColor;
}
.ohb2-designs-carousel-prev::before {
    transform: rotate(-135deg);
    margin-left: 8px;
}
.ohb2-designs-carousel-next::before {
    transform: rotate(45deg);
    margin-right: 8px;
}

@media screen and (max-width: 700px) {
    .ohb2-designs-carousel-btn::before {
        width: 17px;
        height: 17px;
        border-top-width: 5px;
        border-right-width: 5px;
    }
}

/* =====================================================================
   SITE-WIDE DESIGN SWEEP (2026-08-26)
   Carries the homepage design system (section 3301 above) onto the
   remaining pages of OHB_BarnDealerDesign.pdf.

     PDF p2  inventory          PDF p8/9  shed upgrades
     PDF p3  building detail    PDF p10a  pay-over-time (rent-to-own)
     PDF p4  lofted barns       PDF p10c  warranty claims
     PDF p5  add-on packages    PDF p11   about
     PDF p6  specialty          PDF p12   contact
     PDF p7  space for animals

   Same tokens throughout: navy #1A567A (hover #124763), gold #E9BB52,
   bar grey #DBD9D9, sale red #8C1312, body #333, panel grey #E9E9E9.
   ===================================================================== */

/* ---------------------------------------------------------------
   A. Shared page furniture

   Every non-home page opened with a small dark-blue heading and grey
   body copy; the mockups use the homepage's 38px navy heading and
   #333 body on white throughout.
   --------------------------------------------------------------- */
.ohb2-page h1,
.ohb2-page h2.ohb2-section-heading {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
/* Size only — colour stays with the per-section rules, several of which
   set the heading gold because it sits on a navy band. */
.ohb2-page .ohb2-section-heading {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
}

/* ---------------------------------------------------------------
   B. Inventory listing — PDF page 2

   The listing card in the mockup is the homepage's featured card at
   the same 3-up width, so the card anatomy rules from section 6 are
   re-pointed at .ohb2-inv-card rather than duplicated.
   --------------------------------------------------------------- */
.ohb2-inventory-page .ohb2-inv-intro {
    padding: 34px 20px 6px !important;
}
.ohb2-inventory-page .ohb2-inv-heading {
    font-size: 38px !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 26px 0; /* #23 section-heading standard */
}
.ohb2-inventory-page .ohb2-inv-intro-copy {
    color: #333 !important;
    font-size: 16px;
    line-height: 1.5;
    max-width: var(--ohb2-col-gutter);
    margin: 0 auto;
    text-align: center;
}

/* Filter bar: white ground, navy pill left, ITEMS PER PAGE stack right */
.ohb2-filter-bar-section {
    background: #fff;
    padding: 18px 0 0;
}
.ohb2-filter-bar-section .ohb2-wrap,
.ohb2-inv-grid-section .ohb2-wrap {
    max-width: var(--ohb2-col);
}
.ohb2-filter-bar-row {
    align-items: flex-end;
}
.ohb2-inventory-page .ohb2-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #1A567A !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px;
    padding: 11px 20px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.ohb2-inventory-page .ohb2-filter-toggle-btn:hover {
    background: #124763 !important;
}
/* The mockup's glyph is a three-rule list icon, not a caret. */
.ohb2-inventory-page .ohb2-filter-bar-arrow {
    font-size: 0;
    line-height: 0;
    width: 20px;
    height: 14px;
    display: inline-block;
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-size: 20px 2px, 20px 2px, 20px 2px;
    background-position: 0 0, 0 6px, 0 12px;
    background-repeat: no-repeat;
}
.ohb2-items-per-page-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.ohb2-inventory-page .ohb2-ipp-label {
    color: #1A567A;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
}
.ohb2-inventory-page .ohb2-ipp-select {
    background: #1A567A;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 17px;
    font-weight: 700;
    padding: 9px 34px 9px 16px;
}

/* Sara, 10/5: the chevron is jammed against the right edge of the navy box.

   It was the BROWSER's chevron. The rule above restyles the box but leaves
   appearance:auto, so the arrow is the platform's own, drawn in the slot the
   platform reserves at the right edge -- a few px of inset on iOS, which is
   where the screenshot came from. padding-right:34px cannot move it: padding
   positions the TEXT, and the native arrow is painted outside the text box.
   The only way to control it is to take the native control off and draw it.

   appearance:none does that; the chevron is a background image so it cannot
   be tabbed to or clicked separately, and the whole box stays one control.
   It is set at `right 16px`, the same inset as the 16px of text padding on
   the left, which is what Sara asked for, and background-position centres it
   vertically by itself at any box height. padding-right goes to 38px = the
   16px inset + the 12px glyph + 10px of clear space, so a longer value can
   never run under the chevron.

   background-color is restated because `background:` above is a shorthand:
   without it, adding background-image here would reset the navy to
   transparent. */
.ohb2-inventory-page .ohb2-ipp-select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #1A567A;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 38px;
    /* appearance:none also gives back the width the platform was reserving
       for its own arrow, which shrinks the navy box from 90px to 74px. The
       box is not what Sara asked to change, so it is held where it was: the
       only thing that moves on screen is the chevron. 90px is the measured
       live width at 390, 1024, 1280 and 1440 -- it is constant because the
       only values are 12, 24 and 36. */
    min-width: 90px;
}

/* Card grid: same 3-up rhythm as the homepage featured row */
.ohb2-inv-grid-section {
    background: #fff;
    padding: 34px 0 10px;
}
.ohb2-inv-grid {
    gap: 24px;
    margin-bottom: 30px;
}
.ohb2-inv-card {
    border: none;
    background: transparent;
}
.ohb2-inv-card-photo {
    aspect-ratio: 5 / 4;
    background: #E9E9E9;
}
.ohb2-inv-card-photo img {
    object-fit: cover;
}

/* Name band leaves the photo and becomes the card's navy caption block */
.ohb2-inv-card .ohb2-inv-card-name-band {
    position: static;
    background: #1A567A;
    padding: 11px 12px 13px;
    font-size: 21px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
}
.ohb2-inv-card-sku {
    display: block;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 2px;
    word-break: break-word;
}
.ohb2-inv-card-body {
    padding: 0;
}

/* Price rows, buttons: the homepage card anatomy, verbatim */
.ohb2-inv-card .ohb2-price-table,
.ohb2-building-page .ohb2-price-table {
    border-top: none;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ohb2-inv-card .ohb2-price-row,
.ohb2-building-page .ohb2-price-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    border: 1px solid #1A567A;
    font-size: 18px;
}
.ohb2-inv-card .ohb2-price-label,
.ohb2-building-page .ohb2-price-label {
    flex: 0 0 calc(50% - 3px);
    background: #DBD9D9;
    color: #1A567A;
    font-size: inherit;
    font-weight: 700;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 6px;
    border-right: 1px solid #1A567A;
}
.ohb2-inv-card .ohb2-price-value,
.ohb2-building-page .ohb2-price-value {
    flex: 1 1 auto;
    background: #fff;
    color: #000;
    font-size: inherit;
    font-weight: 700;
    text-align: center;
    padding: 10px 6px;
    min-width: 0;
}
.ohb2-inv-card .ohb2-price-row.cash-row .ohb2-price-value,
.ohb2-building-page .ohb2-price-row.cash-row .ohb2-price-value {
    color: #111;
}
/* #4 (Mike): "Let's make this a brighter red...it's getting lost."
   #8C1312 is the ohb2 dark-brick token; against the navy labels and the grey
   table rules it reads brown rather than red. #D32F2F is materially brighter
   and still clears WCAG AA on white (5.0:1) at this weight. The CONTACT
   DEALER link below takes the same value: it occupies the same slot on
   neighbouring cards in the same row, so one red or the two look like a bug. */
.ohb2-inv-card .ohb2-price-row.internet-row .ohb2-price-value,
.ohb2-building-page .ohb2-price-row.internet-row .ohb2-price-value {
    background: #fff;
    color: #D32F2F;
    display: block;
    border-radius: 0;
    font-size: 18px;
    padding: 10px 6px;
}
.ohb2-inv-card .ohb2-price-row.contact-row .ohb2-price-value a,
.ohb2-building-page .ohb2-price-row.contact-row .ohb2-price-value a {
    color: #D32F2F; /* #4, same red as the Internet Price above */
    font-weight: 700;
    text-decoration: none;
}
.ohb2-inv-card .ohb2-card-btn-row {
    gap: 6px;
    margin: 7px 0 0;
}
.ohb2-inv-card .ohb2-btn-outline {
    background: #1A567A;
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 11px 6px;
}
.ohb2-inv-card .ohb2-btn-outline:hover {
    background: #124763;
}
.ohb2-inv-card .ohb2-btn-gold {
    display: flex;
    text-align: center;
    margin-top: 6px;
    padding: 12px 16px;
    font-size: 21px;
    letter-spacing: 0.01em;
}

/* Condition flags sit above the photo, not over the name band */
.ohb2-inv-card--used .ohb2-inv-card-photo::after,
.ohb2-inv-card--clearance .ohb2-inv-card-photo::after {
    font-size: 13px;
    padding: 4px 10px;
    letter-spacing: 0.02em;
}

/* Pagination: rounded tiles, navy active with a gold numeral */
.ohb2-pagination {
    gap: 8px;
    padding: 14px 0 30px;
}
.ohb2-page-link {
    min-width: 34px;
    padding: 6px 10px;
    border: 1px solid #1A567A;
    border-radius: 5px;
    color: #1A567A;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
}
.ohb2-page-link:hover {
    background: #DBD9D9;
    color: #1A567A;
    border-color: #1A567A;
}
.ohb2-page-link.active {
    background: #1A567A;
    color: #E9BB52;
    border-color: #1A567A;
}

/* ---------------------------------------------------------------
   C. Building detail — PDF page 3
   --------------------------------------------------------------- */
.ohb2-bldg-title-bar {
    background: #fff;
    padding: 34px 20px 4px;
}
.ohb2-bldg-page-h1 {
    font-size: 38px;
    font-weight: 700;
    color: #1A567A;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    margin: 0;
}
.ohb2-bldg-specs-heading {
    font-size: 30px;
    font-weight: 700;
    color: #1A567A;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.2;
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 0 14px 0;
}

/* Spec rows read as "Label: value" runs, not an aligned two-column grid */
.ohb2-bldg-specs-table,
.ohb2-bldg-specs-table tbody {
    display: block;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 22px;
}
.ohb2-bldg-specs-table tr {
    display: block;
    margin-bottom: 7px;
}
.ohb2-bldg-specs-table th,
.ohb2-bldg-specs-table td {
    display: inline;
    border: none;
    padding: 0;
    font-size: 17px;
    line-height: 1.45;
    width: auto;
    white-space: normal;
}
.ohb2-bldg-specs-table th {
    color: #1A567A;
    font-weight: 700;
    text-align: left;
}
.ohb2-bldg-specs-table td {
    color: #333;
    font-weight: 400;
}
.ohb2-bldg-specs-table th::after {
    content: ' ';
}

/* The two stacked CTAs under the price table */
.ohb2-bldg-specs-col .ohb2-btn-gold {
    display: flex;
    width: 100%;
    margin-top: 14px;
    padding: 14px 16px;
    font-size: 26px;
    text-align: center;
    letter-spacing: 0.01em;
}
.ohb2-bldg-ask-btn {
    margin-top: 12px;
    padding: 14px 16px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* "About This Shed Model" / "Material & Construction Standards" */
.ohb2-bldg-description-section .ohb2-section-heading,
.ohb2-standards-section .ohb2-section-heading {
    font-size: 38px;
    text-align: center;
    margin-bottom: 26px;
}
.ohb2-bldg-model-subheading {
    color: #1A567A;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 6px 0;
}
.ohb2-bldg-desc-single p {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
}
.ohb2-standards-item h3 {
    color: #1A567A;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 4px 0;
}
.ohb2-standards-item p {
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}

/* Question band: gold heading on navy, gold CTA centred at its own width */
.ohb2-bldg-question-section .ohb2-section-heading {
    color: #E9BB52;
    font-size: 38px;
    text-align: center;
}
.ohb2-bldg-form-submit {
    text-align: center;
}
.ohb2-bldg-form-submit .ohb2-btn-gold {
    display: inline-flex;
    width: auto;
    min-width: 300px;
    padding: 14px 40px;
    font-size: 26px;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 700px) {
    .ohb2-inventory-page .ohb2-inv-heading { font-size: 26px !important; }
    .ohb2-inv-card .ohb2-inv-card-name-band { font-size: 19px; }
    .ohb2-inv-card-sku { font-size: 15px; }
    .ohb2-inv-card .ohb2-price-row { font-size: 16px; }
    .ohb2-inv-card .ohb2-btn-outline { font-size: 15px; }
    .ohb2-inv-card .ohb2-btn-gold { font-size: 19px; }
    .ohb2-filter-bar-row { align-items: stretch; }

    .ohb2-bldg-page-h1 { font-size: 26px; }
    .ohb2-bldg-specs-heading { font-size: 22px; }
    .ohb2-bldg-specs-col .ohb2-btn-gold,
    .ohb2-bldg-ask-btn { font-size: 20px; padding: 12px 14px; }
    .ohb2-bldg-description-section .ohb2-section-heading,
    .ohb2-standards-section .ohb2-section-heading,
    .ohb2-bldg-question-section .ohb2-section-heading { font-size: 26px; }
    .ohb2-featured-section .ohb2-section-heading { font-size: 26px; }
    .ohb2-designs-section .ohb2-section-heading { font-size: 26px; }
    .ohb2-faq-section .ohb2-section-heading { font-size: 26px; }
    .ohb2-quote-section .ohb2-section-heading { font-size: 26px; }
    .ohb2-bldg-form-submit .ohb2-btn-gold { font-size: 20px; min-width: 0; width: 100%; }
}

/* ----- p2/p3 round 2 ----- */

/* The filter bar's rule is not in the mockup. */
.ohb2-filter-bar-section {
    border-bottom: none;
}

/* The gallery frame is 4:3 but the photo was capped at 420px inside it,
   leaving a grey band under every building. Fill the frame instead. */
.ohb2-bldg-gallery .ohb2-gallery-main {
    aspect-ratio: 5 / 4;
    background: #E9E9E9;
}
.ohb2-bldg-gallery .ohb2-gallery-main img {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
}

/* Thumb arrows belong outside the strip, not on top of the first tile. */
.ohb2-gallery-thumbs-wrap {
    padding: 0 30px;
    margin-top: 10px;
}
.ohb2-gallery-thumbs {
    gap: 8px;
}
.ohb2-bldg-gallery .ohb2-gallery-thumb {
    width: 116px;
    height: 88px;
    flex: 0 0 116px;
}

/* About-copy and Material Standards share one measure in the design. */
.ohb2-bldg-desc-single {
    font-size: 16px;
    color: #333;
}
.ohb2-standards-section .ohb2-wrap {
    max-width: var(--ohb2-col);
}

@media screen and (max-width: 700px) {
    .ohb2-bldg-gallery .ohb2-gallery-thumb { width: 84px; height: 64px; flex: 0 0 84px; }
}

/* ---------------------------------------------------------------
   D. Nav dropdown — PDF pages 4 and 11

   Both mockups draw the open dropdown as a light grey panel of navy
   uppercase items, with the page you are on picked out as a navy row.
   It had been a navy panel with a gold rule.
   --------------------------------------------------------------- */
.ohb2-nav-dropdown {
    background: #D5D3D3;
    border-top: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 0;
    min-width: 300px;
}
.ohb2-nav-dropdown li a {
    color: #1A567A;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 13px 22px;
}
.ohb2-nav-dropdown li a:hover,
.ohb2-nav-dropdown li.ohb2-active a,
.ohb2-nav-dropdown li a.ohb2-active {
    background: #1A567A;
    color: #fff;
}

/* Hovering a nav item lifts it out of the grey bar in white, which is
   how the mockups draw the parent of an open dropdown. */
.ohb2-nav-menu > li > a:hover,
.ohb2-nav-menu > li:hover > a {
    background: #fff;
    color: #1A567A;
}
.ohb2-nav-menu > li > a.ohb2-active:hover,
.ohb2-nav-menu > li:hover > a.ohb2-active {
    background: #1A567A;
    color: #fff;
}

@media screen and (max-width: 900px) {
    .ohb2-nav-menu > li > a:hover,
    .ohb2-nav-menu > li:hover > a { background: transparent; color: #fff; }
}

/* ---------------------------------------------------------------
   E. Quote form — PDF pages 4-9 and 11

   The comp runs the four contact fields as one row across a ~900px
   form, a white prompt line, then a 38/59 split of selects against
   the message box, with the gold CTA under the selects column.
   --------------------------------------------------------------- */
.ohb2-quote-inner {
    max-width: var(--ohb2-col);
}
.ohb2-quote-section .ohb2-form-row-quad {
    gap: 14px;
    margin-bottom: 0;
}
.ohb2-quote-section .ohb2-quote-prompt {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: 16px 0 14px;
}
.ohb2-quote-cols {
    gap: 22px;
}
.ohb2-quote-col-selects {
    flex: 0 0 38%;
}
.ohb2-quote-col-selects select {
    margin-bottom: 14px !important;
}
.ohb2-quote-submit-wrap {
    text-align: center !important;
}
.ohb2-quote-section .ohb2-quote-submit-wrap .ohb2-btn-gold {
    display: inline-flex;
    min-width: 300px;
    padding: 13px 34px;
    font-size: 22px;
    letter-spacing: 0.01em;
}
.ohb2-quote-subheading {
    text-align: center !important;
    font-size: 17px;
}
.ohb2-quote-section .ohb2-quote-subheading {
    color: #fff;
}
.ohb2-quote-section .ohb2-quote-subheading a {
    color: #E9BB52;
}

/* Selects carry the design's black caret rather than the browser's. */
.ohb2-quote-section select {
    border-radius: 4px;
}

/* ---------------------------------------------------------------
   F. Catalog gallery — chevrons outside the strip, as on the comp
   --------------------------------------------------------------- */
.ohb2-cat-gallery-slider-wrap {
    padding: 0 52px;
    overflow: visible;
}
.ohb2-cat-gallery-track {
    overflow: hidden;
}
.ohb2-cat-gallery-btn {
    background: transparent;
    color: #555;
    width: 40px;
    height: 56px;
    font-size: 0;
    line-height: 0;
}
.ohb2-cat-gallery-btn:hover {
    background: transparent;
    color: #1A567A;
}
.ohb2-cat-gallery-btn::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    border-top: 5px solid currentColor;
    border-right: 5px solid currentColor;
}
.ohb2-cat-gallery-prev { left: 0; }
.ohb2-cat-gallery-next { right: 0; }
.ohb2-cat-gallery-prev::before { transform: rotate(-135deg); margin-left: 7px; }
.ohb2-cat-gallery-next::before { transform: rotate(45deg); margin-right: 7px; }
.ohb2-cat-gallery-slide {
    background-color: #E9E9E9;
    border: none;
}

@media screen and (max-width: 700px) {
    .ohb2-quote-section .ohb2-form-row-quad { flex-wrap: wrap; gap: 10px; }
    .ohb2-quote-section .ohb2-form-row-quad input { flex: 1 1 calc(50% - 5px); }
    .ohb2-quote-section .ohb2-quote-prompt { font-size: 17px; }
    .ohb2-quote-section .ohb2-quote-submit-wrap .ohb2-btn-gold { font-size: 18px; min-width: 0; width: 100%; }
    .ohb2-cat-gallery-slider-wrap { padding: 0 32px; }
    .ohb2-cat-gallery-btn::before { width: 15px; height: 15px; border-top-width: 4px; border-right-width: 4px; }
}

/* The quote form's submit lost its inline style attribute; size it here. */
.ohb2-quote-section .ohb2-quote-submit-wrap .ohb2-btn-gold {
    border: none;
    cursor: pointer;
}

/* ---------------------------------------------------------------
   G. Bottom-stack rent-to-own block

   Every mockup that carries this block draws the heading centred
   across both columns and the advantages as a white panel under a
   navy cap, not an all-navy box.
   --------------------------------------------------------------- */
/* #21 / #22 / #30 (Mike): "we need more padding here... I'd like to see the
   vertical space between content elements a little more consistent", "spacing
   feels a little tight", "more padding".
   The white content sections were opening on 6-10px while the catalog body's
   own blocks (.ohb2-prod-block, .ohb2-swatches-section) all open on 34px --
   seven of them, the dominant value in the theme. The tight ones were the
   outliers, so they come up to 34px rather than a new number being invented.
   Bottom paddings are left as drawn. */
.ohb2-rto-section {
    background: #fff;
    padding: 34px 20px 46px;
}
/* #23 (Mike): "Can we make space below content headers more standardized?"
   The ohb2 section-heading family -- the 38px navy centred heading that opens
   a content section -- was running 26 / 22 / 20 / 17px depending on which
   block it sat in. Measured across 53 section headings on 10 ohb2 pages, 26px
   both ties for the most common value and is what .ohb2-section-heading (the
   theme's own canonical class: FAQ, About This Shed Model, Materials &
   Construction Standards) already carries, so 26px is the standard.
   It is also the larger of the two dominant values, which answers #21 and #22
   asking for more room rather than less.
   DELIBERATELY EXCLUDED: the navy FORM bands (.ohb2-quote-section,
   .ohb2-bldg-question-section) keep their tighter 10px -- that is the measured
   form-band rhythm, and Mike did not mark it. */
.ohb2-rto-section-heading {
    max-width: var(--ohb2-col);
    margin: 0 auto 26px;
    font-size: 38px;
    font-weight: 700;
    color: #1A567A;
    line-height: 1.2;
    text-align: center;
}
.ohb2-rto-inner {
    max-width: var(--ohb2-col);
    gap: 44px;
}
.ohb2-rto-text p {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
}
.ohb2-rto-text .ohb2-btn-blue {
    font-size: 24px;
    padding: 15px 38px;
}
.ohb2-rto-advantages {
    flex: 0 0 447px;
    background: #fff;
    border: 1px solid #1A567A;
    padding: 0;
    color: #333;
}
.ohb2-rto-advantages h3 {
    background: #1A567A;
    color: #E9BB52;
    font-size: 20px;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 11px 14px;
    margin: 0;
}
.ohb2-rto-advantages ul {
    padding: 16px 22px;
}
.ohb2-rto-advantages ul li {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.9;
    color: #333;
    padding: 0;
    border-bottom: none;
}
.ohb2-rto-advantages ul li::before {
    color: #1A567A;
    font-size: 19px;
    margin-right: 12px;
}

@media screen and (max-width: 900px) {
    .ohb2-rto-advantages { flex: none; }
}

@media screen and (max-width: 700px) {
    .ohb2-rto-section-heading { font-size: 26px; }
    .ohb2-rto-text .ohb2-btn-blue { font-size: 18px; }
    .ohb2-rto-advantages ul li { font-size: 15px; line-height: 1.7; }
}

/* The submit inherits a full-bleed width from the shared button rule;
   the comp sizes it to its label. */
.ohb2-quote-section .ohb2-quote-submit-wrap .ohb2-btn-gold {
    display: inline-flex;
    width: auto;
}

/* Gold and navy in this sweep are the mockup's, not the older
   #E9BB52 / #1A567A the earlier passes sampled. */
.ohb2-quote-section .ohb2-section-heading,
.ohb2-rto-form-inner h2,
.ohb2-bldg-question-section .ohb2-section-heading {
    color: #E9BB52;
}

/* Home/bottom-stack brochure CTA: sized here now the attribute is gone. */
.ohb2-brochure-block a.ohb2-btn-gold,
.ohb2-brochure-block .ohb2-btn-gold {
    display: inline-flex;
    width: auto;
}

/* Detail gallery arrows: the same drawn chevrons the carousels use. */
.ohb2-gallery-thumb-prev,
.ohb2-gallery-thumb-next {
    background: transparent;
    color: #555;
    width: 26px;
    height: 44px;
    font-size: 0;
    line-height: 0;
}
.ohb2-gallery-thumb-prev:hover,
.ohb2-gallery-thumb-next:hover {
    background: transparent;
    color: #1A567A;
}
.ohb2-gallery-thumb-prev::before,
.ohb2-gallery-thumb-next::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-top: 4px solid currentColor;
    border-right: 4px solid currentColor;
}
.ohb2-gallery-thumb-prev::before { transform: rotate(-135deg); margin-left: 6px; }
.ohb2-gallery-thumb-next::before { transform: rotate(45deg); margin-right: 6px; }

/* =====================================================================
   PASS 2026-09-01 — colour + typography fidelity (design PDF, pp.1-12)

   AUTHORITATIVE PALETTE (pixel-sampled from the design render and
   cross-checked against the 8/24 OHB content doc):

     blue    #1A567A   header band, nav strip, headings, buttons, borders
     gray    #DBD9D9   nav bar, price-row label cells        (doc: exact match)
     gold    #E9BB52   BUY OR RENT / CTA fills               (doc #EABC53, = render rounding)
     red     #8C1312   Internet Price value                  (doc: exact match)
     body    #333333   paragraph copy
     blue-dk #14405C   hover-darken only; the design has no second blue

   Q9 (open, for Sara): the content doc labels its Blue token #00577A,
   which is 26 R-points off the #1A567A the design actually renders. Gray
   and gold match the doc exactly, so #1A567A is kept here to stay pixel-
   true to the mockup. Flipping is a single find/replace across the three
   ohb2 css files if the client confirms #00577A.

   This pass retired the pre-8/24 palette that survived in
   ohb2-catalog.css / ohb2-pages.css and the top half of this file:
     #16496D -> #1A567A   #123A57 -> #14405C   #F2B735 -> #E9BB52
     #2A7A9A -> #1A567A   #2E8CB4 -> #3C7C99
   ===================================================================== */

/* ---------------------------------------------------------------
   Body copy links. frontend.css paints every <a> #03597C, a third
   blue that appears nowhere in the design. Buttons carry a class, so
   :not([class]) hits only inline prose links and cannot repaint a
   white-on-blue button label.
   --------------------------------------------------------------- */
.ohb2-body :where(a:not([class])) {
    color: #1A567A;
}
.ohb2-body :where(a:not([class]):hover) {
    color: #14405C;
}

/* ---------------------------------------------------------------
   Blue rule under the nav. Every page of the design closes the grey
   nav bar with a ~19px blue band before the content well starts;
   the theme ran grey straight into white.
   --------------------------------------------------------------- */
.ohb2-nav-bar {
    border-bottom: 18px solid #1A567A;
}
@media (max-width: 768px) {
    .ohb2-nav-bar { border-bottom-width: 8px; }
}

/* ---------------------------------------------------------------
   Inventory card buttons. The design sets Contact Dealer / Images &
   Details in title case and reserves all-caps for BUY OR RENT NOW,
   so the shared .ohb2-btn-outline uppercase is dropped inside cards.
   --------------------------------------------------------------- */
.ohb2-card-btn-row .ohb2-btn-outline {
    text-transform: none;
    letter-spacing: 0;
}

/* =====================================================================
   PASS 2026-09-01 (b) — content measure + brand-band proportions

   MEASURED FROM THE DESIGN RENDERS (200dpi, pp.2/3/4 + Sara's brand-band
   crop). Every mockup page is a 1464px-wide viewport whose content column
   is a consistent 940px — 64% of the page. The theme had inherited the
   BarnDealer default 1200px container (83%), which is why copy ran wider
   and every element read proportionally smaller than the design.
   All ohb2 containers are now 940px; the ratios below are taken against
   that column.
   ===================================================================== */

/* Old Hickory dealer-of logo: 26.8% of viewport in the design (~390px at
   1440), not the 480px cap it had. */
.ohb2-brand-ohbs-logo {
    max-width: 390px;
    width: 42%;
}

/* The Imagination lockup is the item Sara flagged. In the design it is
   39.8% of the viewport — ~575px at 1440, against the ~700px it rendered
   at. It also needs real air above it: the design leaves ~55px between
   the badge row and the script, and only ~20px below. */
.ohb2-brand-script-wrap {
    margin: 46px 0 8px;
}
.ohb2-brand-imagination-img {
    max-width: 575px;
    width: 61%;
    margin: 0 auto 16px;
}

/* Body copy under the lockup sits inside the content column rather than
   filling it, and runs a size smaller than the theme had it. */
.ohb2-brand-copy {
    max-width: 1064px;
    font-size: 17px;
    line-height: 1.45;
    margin: 0 auto 20px;
}

/* Hot-spot shed + Add-on Packages pair: 59% of viewport in the design. */
.ohb2-anatomy-widget {
    max-width: 1040px;
}

@media (max-width: 900px) {
    .ohb2-brand-imagination-img { max-width: 460px; width: 86%; }
    .ohb2-brand-script-wrap { margin: 30px 0 6px; }
    .ohb2-brand-ohbs-logo { max-width: 300px; width: 62%; }
    .ohb2-brand-copy { font-size: 16px; }
}

/* =====================================================================
   PASS 2026-09-01 (c) — one container, no wrapping rows, blue nav hover
   ===================================================================== */

/* The popular-designs band was the last section still on its own width. */
.ohb2-designs-inner {
    max-width: var(--ohb2-col);
}

/* Featured Inventory: the cards were a fixed 384px, which tiled exactly
   three across the old 1200px container and wrapped 2+1 in the 940px one.
   Let them divide the column instead, so the row is always the three the
   design draws (~300px each at 1440). */
.ohb2-featured-section .ohb2-card-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 22px;
}
.ohb2-featured-section .ohb2-card-grid > * {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: calc((100% - 2 * 19px) / 3);
}

/* Same treatment for the popular-designs carousel now that it shares the
   940px column. */
.ohb2-designs-inner .ohb2-designs-track,
.ohb2-designs-inner .ohb2-card-grid {
    flex-wrap: nowrap;
}
.ohb2-designs-inner .ohb2-design-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

/* Six trust badges are one row in the design. At 118px tall they measured
   1,027px against a 940px column and dropped the sixth onto its own line. */
.ohb2-badge-row {
    flex-wrap: nowrap;
    gap: 12px;
}
.ohb2-badge-row img {
    height: 110px;
    max-width: 100%;
}

/* Main nav hover was resolving to a white pill (a late rule outranked the
   navy one). The design shows the current item as a solid #1A567A block on
   the grey bar, so hover takes the same fill — one blue, readable, and it
   previews the active state instead of inventing a second colour. */
.ohb2-nav-menu > li > a:hover,
.ohb2-nav-menu > li:hover > a,
.ohb2-nav-menu > li > a.ohb2-active,
.ohb2-nav-menu > li:hover > a.ohb2-active {
    background: #1A567A;
    color: #fff;
}
.ohb2-nav-dropdown li a:hover,
.ohb2-nav-dropdown li a.ohb2-active {
    background: #14405C;
    color: #fff;
}

@media (max-width: 900px) {
    .ohb2-featured-section .ohb2-card-grid { flex-wrap: wrap; }
    .ohb2-featured-section .ohb2-card-grid > * { flex: 1 1 260px; max-width: none; }
    .ohb2-designs-inner .ohb2-designs-track,
    .ohb2-designs-inner .ohb2-card-grid { flex-wrap: wrap; }
    .ohb2-badge-row { flex-wrap: wrap; gap: 14px; }
    .ohb2-badge-row img { height: 72px; }
    .ohb2-nav-menu > li > a:hover,
    .ohb2-nav-menu > li:hover > a { background: rgba(255,255,255,0.15); color: #fff; }
}

/* =====================================================================
   PASS 2026-09-01 (d) — card type scale, 3-up designs rail, promo duo
   ===================================================================== */

/* Price rows were set at 18px, sized for the old 384px card. At the
   design's ~300px card that pushed "36-Month RTO:" onto a second line.
   The mockup's label measures ~13.5px; 14px keeps every label on one
   line and matches the drawing. */
.ohb2-inv-card .ohb2-price-row,
.ohb2-building-page .ohb2-price-row {
    font-size: 14px;
}
.ohb2-inv-card .ohb2-price-label,
.ohb2-building-page .ohb2-price-label {
    white-space: nowrap;
}

/* Popular designs is a scroll rail, not a grid — (c) wrongly gave its
   cards flex:1, squeezing all six into the column. The design shows
   three per view filling the content column with the chevrons hung
   outside it. */
.ohb2-designs-carousel-wrap {
    padding: 0 !important;
}
.ohb2-designs-carousel-prev { left: -46px; }
.ohb2-designs-carousel-next { right: -46px; }
.ohb2-designs-cards {
    gap: 19px;
}
.ohb2-designs-inner .ohb2-design-card,
.ohb2-designs-cards .ohb2-design-card {
    flex: 0 0 calc((100% - 38px) / 3);
    max-width: none;
    min-width: 0;
}

/* Featured row gap matched to the design's 19px. */
.ohb2-featured-section .ohb2-card-grid {
    gap: 19px;
}

/* Promo duo: the design centres a wide navy button under each photo.
   The heading also has to hold two lines — "Ready-To-Deliver" overflowed
   a 470px pane at the inherited size and broke at its hyphens. */
.ohb2-promo-pane {
    text-align: center;
}
.ohb2-promo-pane h3 {
    font-size: 30px;
    line-height: 1.2;
}
.ohb2-promo-pane .ohb2-btn-blue {
    display: inline-flex;
    width: 75%;
    max-width: 360px;
}

@media (max-width: 900px) {
    .ohb2-designs-inner .ohb2-design-card,
    .ohb2-designs-cards .ohb2-design-card { flex: 0 0 calc((100% - 19px) / 2); }
    .ohb2-designs-carousel-prev { left: -6px; }
    .ohb2-designs-carousel-next { right: -6px; }
    .ohb2-promo-pane h3 { font-size: 24px; }
    .ohb2-promo-pane .ohb2-btn-blue { width: 88%; }
}
@media (max-width: 600px) {
    .ohb2-designs-inner .ohb2-design-card,
    .ohb2-designs-cards .ohb2-design-card { flex: 0 0 86%; }
}

/* =====================================================================
   PASS 2026-09-01 (e) — card title scale
   The name band was 21/17px, sized for the retired 384px card. At the
   design's ~300px card, titles like "10' x 12' Metal Lofted - 10x12"
   took a second line and pushed that card's price table out of step
   with its neighbours. The mockup measures ~15px title / ~12px SKU,
   which is also the size at which every title holds one line.
   ===================================================================== */
.ohb2-inv-card .ohb2-inv-card-name-band {
    font-size: 15px;
    min-height: 58px;
}
.ohb2-inv-card-sku {
    font-size: 12px;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* =====================================================================
   PASS 2026-09-01 (f) — REFIT the contents to the 940px column

   Passes (b)-(e) moved the container from 1200px to the design's measured
   940px but left several components at sizes that had been derived from
   the 1200px column. This pass re-fits them. The column itself is NOT
   touched — 940px is the measured value and stays.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Popular Old Hickory Shed Designs — the hover reveal
      (Sara's report + screenshot: the paragraph overran the card and the
      gold CUSTOMIZE button printed ON TOP of the copy.)

   Three separate 1200px-era faults, all in one component:

   (a) FRAME. The image tile stayed 248px tall while the card narrowed
       384 -> 301, taking the frame from the design's 1.53 landscape to a
       1.21 near-square. The content doc's renders are 530x300 (1.77), so
       `background-size: contain` letterboxed them — a small illustration
       floating on a big grey field, exactly what Sara's screenshot shows.
       The frame is now the design's measured 299 x 196 expressed as an
       aspect-ratio so it tracks the card at every breakpoint, and `cover`
       fills it. (At 1.526 vs the source 1.77, cover trims ~7% off each
       side; the sheds sit well inside that margin.)

   (b) OVERLAP. The reveal was absolutely positioned over the image with
       62px of padding-bottom "reserving" space for the button. Padding is
       INSIDE the box, so as soon as the copy outgrew the frame it ran
       through the reserve and under the button. The reveal is now a flex
       item stacked above the button inside the image frame (markup change
       in bottom-stack.blade.php), so overlap is structurally impossible:
       the copy is clipped by its own flex box long before it reaches the
       button.

   (c) TYPE. 14px on 20.3px leading was sized for the 384px card. The
       mockup's hover paragraph (design-01, middle card) measures ~11.7px
       on ~15.2px leading in a 299px card. Our copy runs 406-479 chars
       against the mockup's 380, so this sits a shade under the mockup at
       10.5px/14.3px, which lets five of the six descriptions render in
       full. The longest gets an ellipsis via line-clamp.

   The mockup DOES draw this hover state (design-01 p.1, centre card:
   full navy panel, centred paragraph, CUSTOMIZE beneath it), so the full
   paragraph is kept rather than cut to a 3-4 line excerpt — an excerpt
   would leave a half-empty navy panel the design does not show.
   --------------------------------------------------------------------- */
.ohb2-design-card-img {
    aspect-ratio: 299 / 196;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #E9E9E9 !important;
}

/* The navy wash lives on the frame, not on the text box, so it can
   cross-fade with the copy instead of the copy carrying its own opaque
   panel (which is what forced the absolute positioning in the first place). */
.ohb2-design-card-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #1A567A;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 0;
}
.ohb2-design-card:hover .ohb2-design-card-img::before,
.ohb2-design-card:focus-within .ohb2-design-card-img::before {
    opacity: 1;
    visibility: visible;
}

.ohb2-design-card-desc {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    bottom: auto;
    left: auto;
    right: auto;
    background: transparent;
    color: #fff;
    font-size: 10.5px;
    line-height: 1.36;
    padding: 11px 15px 4px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    overflow: hidden;
}

/* Out of absolute positioning and into the flex column, pinned under the
   copy. The mockup's button measures ~129 x 23 with a small uppercase
   label — it was rendering at 18px in a 167px pill. */
.ohb2-design-card-customize {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    bottom: auto;
    left: auto;
    transform: none;
    align-self: center;
    padding: 0 0 10px;
}
.ohb2-design-card-customize a {
    font-size: 11px;
    padding: 5px 18px;
    border-width: 1px;
    letter-spacing: 0.05em;
}

/* Caption bar: the mockup's is ~34px on one line. Ours has to hold two
   lines because the doc's titles run to 57 characters against the
   mockup's 37, but at 14px/64px it was nearly twice the drawn height. */
.ohb2-design-card-info {
    min-height: 48px;
    padding: 8px 10px;
}
.ohb2-design-card-title {
    font-size: 13px;
    line-height: 1.2;
}

/* The clamp is a belt-and-braces ellipsis, not the overflow guard — the
   flex box is the guard. It steps down where the card narrows so the
   ellipsis lands on the last visible line instead of off the bottom. */
@media (max-width: 979px) {
    .ohb2-design-card-desc { -webkit-line-clamp: 8; }
}
@media (max-width: 600px) {
    .ohb2-design-card-desc { -webkit-line-clamp: 9; }
}
@media (max-width: 360px) {
    .ohb2-design-card-desc { -webkit-line-clamp: 7; }
}
@media (max-width: 700px) {
    .ohb2-design-card-info { min-height: 44px; padding: 7px 8px; }
    .ohb2-design-card-title { font-size: 12px; }
}

/* ---------------------------------------------------------------------
   2. Homepage featured cards — same card, same type scale as inventory

   (d)/(e) brought the inventory and detail price tables down to the
   design's ~14px, but scoped the rules to `.ohb2-inv-card` and
   `.ohb2-building-page`. The homepage featured cards use
   `.ohb2-building-card`, so they were left on the 1200px-era 18/21/17px
   and, at ~287px, broke "36-Month RTO:" and "60-Month RTO:" onto two
   lines while the inventory page held them on one. The design keeps every
   label cell on one line. Same for "Images & Details", which wrapped in
   BOTH card types.
   --------------------------------------------------------------------- */
.ohb2-building-card .ohb2-price-row {
    font-size: 14px;
}
.ohb2-building-card .ohb2-price-label {
    white-space: nowrap;
}
/* The Internet Price value was pinned at 18px while its row ran at 14px,
   so that one row sat proud of the rest. The design draws it the same
   size as its neighbours — red, not bigger. */
.ohb2-building-card .ohb2-price-row.internet-row .ohb2-price-value,
.ohb2-inv-card .ohb2-price-row.internet-row .ohb2-price-value,
.ohb2-building-page .ohb2-price-row.internet-row .ohb2-price-value {
    font-size: inherit;
}
/* Name band: the inventory card came down to 15/12px in (e); the featured
   card was still at 21/17px for the same ~300px width. */
.ohb2-card-name-text {
    font-size: 15px;
}
.ohb2-card-sku-text {
    font-size: 12px;
}
/* "Contact Dealer" / "Images & Details" at 17px needed ~146px in a ~140px
   half-cell. The design sets them at the price-label size, on one line. */
.ohb2-card-btn-row .ohb2-btn-outline {
    font-size: 14px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   3. Popular-designs rail: keep the three-up basis honest now that the
      card height is derived from its width.
   --------------------------------------------------------------------- */
.ohb2-designs-cards {
    align-items: flex-start;
}

/* ---------------------------------------------------------------------
   4. `.ohb2-wrap` was measuring 900, not 940

   (b) set every container to `max-width: var(--ohb2-col)`, but `.ohb2-wrap` also
   carries its own `padding: 0 20px` and the box is border-box — so its
   CONTENT box came out at 900 while `.ohb2-designs-inner` and the FAQ
   (no padding) sat at a true 940. On the homepage that put the featured
   card row 20px inside the designs rail directly beneath it, and it held
   the cards to 287px against the design's measured 298px. Same on
   inventory (284px cards) and the detail page.

   The 20px is a real gutter — several of these wraps sit in sections with
   no padding of their own, so it cannot simply be deleted. Raising the cap
   by exactly the padding gives a 940 content box at desktop and keeps the
   gutter intact everywhere below it: width = min(940, viewport - 40).
   --------------------------------------------------------------------- */
.ohb2-wrap,
.ohb2-featured-section .ohb2-wrap,
.ohb2-filter-bar-section .ohb2-wrap,
.ohb2-inv-grid-section .ohb2-wrap,
.ohb2-standards-section .ohb2-wrap {
    max-width: var(--ohb2-col-gutter);
}

/* =====================================================================
   PASS 2026-09-01 (h) — BROCHURE BLOCK: rebuild as the drawn side-by-side band

   Sara: "the brochure section does not look correct on the homepage."
   Two separate faults, both structural:

   1. DESKTOP — the block was stacking, not sitting side by side.
      `.ohb2-brochure-block-inner` is `flex-wrap: wrap` with a 56px gap and a
      940px cap, and the device was a hard `width: 520px`. 520 + 56 + the text
      column's natural width (~470px) = ~1046px > 940, so the text wrapped onto
      a second row every time. The result was the device floating alone above a
      left-aligned heading with ~90px of dead air between them, in a 638px-tall
      section. Nothing was "centred over" anything — it had simply overflowed.

   2. MOBILE — the device image was rendering at ZERO width, i.e. invisible.
      The <=700px rule set `.ohb2-brochure-device-img { width: 100% }`, but its
      parent `.ohb2-brochure-device` is a bare flex item with no width, so it
      shrink-to-fits its only child... whose width is a percentage OF that
      parent. Circular, resolves to 0. Mobile showed ~470px of blank white above
      the heading. Measured: img box 0 x 210.

   Plus: the base rule still carried the retired navy right-aligned treatment
   (`display:flex; justify-content:flex-end; text-align:right` on the section)
   from before the 8/24 restyle, and the 520x330 frame letterboxed the asset by
   56px vertically (asset is 900x474 = 1.899; the frame was 1.576).

   ---------------------------------------------------------------------
   PROPORTIONS — measured off Sara's reference crop (1230 x 388)

   | element              | in crop      | scaled to our 940 column |
   |----------------------|--------------|--------------------------|
   | content span         | 985px        | 940px  (factor 0.954)    |
   | device image         | 531px, 53.9% | 507px                    |
   | gutter               | 59px,  6.0%  | 56px  (already correct)  |
   | text column          | 395px, 40.1% | 377px                    |
   | heading              | ~43px / 1.21 | ~41px / 1.2              |
   | button               | 385 x 65     | 367 x 62                 |
   | button label         | capH 22px    | ~29px type               |
   | button padding       | 55 / 22      | 52 / 14                  |
   | button corner radius | ~4px         | 4px                      |
   | heading -> button    | 23px         | 22px                     |
   | both columns are vertically centred on the band; heading and button
     share a left edge (the 10px delta in the crop is the "G" side bearing).

   DEPARTURE, and why. The crop's heading reads "Get a Mobile-friendly Old
   Hickory Brochure"; ours reads "Download a Mobile-friendly Brochure" because
   that is what the 8/24 content doc specifies (ohb-content-extracted.md L147,
   L571, L1508, L1684 — all four occurrences). Copy is not this pass's call, so
   the doc wording stands and the LAYOUT is fitted to it instead.

   Our line 1 measures 1.30x the reference's line 1 (1236 vs 948 units/em, probed
   live in Roboto 700). Holding the reference's exact 40.1% text column would
   force the heading down to 30.5px to keep two lines — visibly smaller than the
   38px shipping today, which would read as a regression. So the row is split
   49 / 6 / 45 instead of 54 / 6 / 40, and the heading sits at 34px:

       device 461px (49%) | gutter 56px | text 423px (45%) ; heading 34px

   Same reasoning the refit pass applied to the designs-rail caption bar — our
   copy is longer than the mockup's, so the frame yields rather than the type
   being cut. If Sara adopts the design's shorter wording, this block goes to
   the reference's own 54/6/40 at 41px with no other change.
   --------------------------------------------------------------------- */

/* Retire the pre-8/24 right-aligned navy band still on the section element. */
.ohb2-brochure-block {
    display: block;
    text-align: left;
    background: #fff;
    border-top: none;
    padding: 48px 20px 56px;
}

/* True 940px content box: the 20px gutter lives on the section, not here. */
.ohb2-brochure-block-inner {
    max-width: var(--ohb2-col);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 56px;
    text-align: left;
}

/* Left column. `flex-shrink: 1` so the device — not the type — gives ground
   between 901px and the 940px column, which is where the heading is tightest. */
.ohb2-brochure-device {
    flex: 0 1 49%;
    min-width: 0;
    width: auto;
}

/* Box carries the asset's own 900x474 aspect, so `background-size: contain`
   (set inline in bottom-stack.blade.php) fills it edge to edge with no
   letterbox. The old fixed 520x330 left 56px of bare white top and bottom. */
.ohb2-brochure-device-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 900 / 474;
}

/* Right column. */
.ohb2-brochure-text-wrap {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.ohb2-brochure-text-wrap h3 {
    color: #1A567A;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 22px 0;
}

/* Navy fill / white uppercase is the theme's existing button treatment and is
   set higher up; sized and radiused here to the crop's measurements. The href,
   data-fancybox and data-src are untouched — presentation only. */
.ohb2-brochure-block a.ohb2-btn-gold,
.ohb2-brochure-block .ohb2-btn-gold {
    display: inline-flex;
    width: auto;
    font-size: 29px;
    line-height: 1.15;
    padding: 14px 52px !important;
    border-radius: 7px;
    letter-spacing: 0.01em;
}

/* ---- Stack at 900px. The old breakpoints disagreed with each other:
   the column flip was at 640px but the sizing rules fired at 700px, so
   641-700px ran a two-column row with a zero-width image, and 701-1045px
   ran the wrapping desktop layout. One breakpoint now governs both. ---- */
@media (max-width: 900px) {
    .ohb2-brochure-block {
        padding: 32px 16px 40px;
    }
    .ohb2-brochure-block-inner {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 26px;
        text-align: center;
    }
    /* THE ZERO-WIDTH FIX: the wrapper must have a width for the child's
       `width: 100%` to resolve against. */
    .ohb2-brochure-device {
        flex: 0 0 auto;
        width: 100%;
        max-width: 460px;
        align-self: center;
    }
    .ohb2-brochure-device-img {
        width: 100%;
        height: auto;
        aspect-ratio: 900 / 474;
    }
    .ohb2-brochure-text-wrap {
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
    }
    .ohb2-brochure-text-wrap h3 {
        font-size: 26px;
        margin: 0 0 20px 0;
    }
    .ohb2-brochure-block a.ohb2-btn-gold,
    .ohb2-brochure-block .ohb2-btn-gold {
        font-size: 20px;
        line-height: 1.15;
        padding: 14px 32px !important;
    }
}

/* =====================================================================
   PASS 2026-09-01 (i) — condition flags back to stock BD, and the gold
   BUY OR RENT CTA back to the weight the design draws

   Sara, two items:
     1. "CLEARANCE / USED should keep the SAME design as current stock BD"
        — the diagonal corner flag, not a rectangular badge.
     2. "the BUY OR RENT NOW buttons should be smaller."

   ---------------------------------------------------------------------
   1. CONDITION FLAGS

   The ohb2 theme drew both flags as a rectangle pinned to the top-LEFT of
   the photo (measured live: background #E32323, top 8px / left 8px, 96 x
   ~26px, no rotation, no shadow). Stock BD draws a 45deg ribbon across the
   top-RIGHT corner. Source of truth: public/css/frontend.css L1896-1934,
   duplicated at public/css/bd-pages.css L3373-3411 —

       .img-wrapper.used a:before      USED,      #DBBC60 on #305979,
                                       top 10 / right -35 / w 120
       .img-wrapper.clearance a:after  CLEARANCE, #fff on #CA2C2C,
                                       top 22 / right -61 / w 200, 12px
       .img-wrapper.used.clearance a:after  top 36 / right -58 / w 220

   Mirrored here verbatim — geometry, colours, 5px 0 padding, the
   rotate(45deg), the 0 2px 5px rgba(0,0,0,.3) shadow and the z-index
   ordering that lets a used-AND-clearance building show both ribbons
   stacked. Per Sara: "when in doubt, mirror stock BD exactly."

   Three things had to be handled that a straight copy does not cover:

   (a) BD hangs USED on ::before and CLEARANCE on ::after so both can show
       at once. ohb2 had BOTH on ::after, so a used-and-clearance card could
       only ever render one of them (clearance won on source order). USED
       moves to ::before, and the old USED ::after is switched off — but
       only via :not(.ohb2-inv-card--clearance), so a both-flags card keeps
       its ::after for the CLEARANCE ribbon.

   (b) The retired rule set `left: 8px`. With left, right and width all set,
       `left` wins in LTR and `right` is ignored — the ribbon would have
       sat in the wrong corner. Every rule below resets `left: auto`.

   (c) BD's USED ribbon declares no font-size, inheriting whatever the
       surrounding .inventory-item carries. ohb2's card context is a
       different size, so USED is pinned to the same 12px BD declares on
       CLEARANCE rather than left to inherit something arbitrary.

   Applied to the inventory listing card (.ohb2-inv-card, which already had
   the modifier classes) and to the homepage featured card
   (.ohb2-building-card, which now emits them — home.blade.php). Both
   parents already carry position:relative + overflow:hidden, which the
   ribbon needs to clip against the corner. The detail page has no
   condition flag in its markup at all, so there is nothing to restyle
   there; flagged in the pass report.

   PALETTE NOTE, for Sara. #CA2C2C, #DBBC60 and #305979 are BD's values,
   not the ohb2 tokens (#8C1312 red, #E9BB52 gold, #1A567A blue), so this
   reintroduces three off-palette colours the 2026-09-01 colour pass had
   cleared. That is deliberate — the instruction was to mirror stock BD.
   Swapping the three hexes below is the whole change if she'd rather the
   ribbon wore ohb2's palette.
   --------------------------------------------------------------------- */

/* Retire the ohb2 rectangle for USED — but not on a card that is also
   CLEARANCE, which needs ::after for the clearance ribbon. */
.ohb2-inv-card--used:not(.ohb2-inv-card--clearance) .ohb2-inv-card-photo::after {
    content: none;
}

/* USED — BD's ::before ribbon, gold on navy, sits above CLEARANCE. */
.ohb2-inv-card--used .ohb2-inv-card-photo::before,
.ohb2-building-card--used .ohb2-card-thumb::before {
    content: 'USED';
    position: absolute;
    /* #5 (Mike): "Can we make the used and clearance flags the same size?
       I'd go with the clearance flag size as it's larger." These three values
       are now the CLEARANCE ribbon's, so a USED card and a CLEARANCE card
       carry an identically sized corner flag. The both-flags card is handled
       separately below. */
    top: 22px;
    right: -61px;
    left: auto;
    bottom: auto;
    width: 200px;
    padding: 5px 0;
    text-align: center;
    color: #305979;
    background: #DBBC60;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* CLEARANCE — BD's ::after ribbon, white on red, sits below USED. */
.ohb2-inv-card--clearance .ohb2-inv-card-photo::after,
.ohb2-building-card--clearance .ohb2-card-thumb::after {
    content: 'CLEARANCE';
    position: absolute;
    top: 22px;
    right: -61px;
    left: auto;
    bottom: auto;
    width: 200px;
    padding: 5px 0;
    text-align: center;
    color: #fff;
    background: #CA2C2C;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Both flags: BD drops CLEARANCE down and widens it so the two ribbons
   stack across the corner instead of crossing. */
.ohb2-inv-card--used.ohb2-inv-card--clearance .ohb2-inv-card-photo::after,
.ohb2-building-card--used.ohb2-building-card--clearance .ohb2-card-thumb::after {
    top: 36px;
    right: -58px;
    width: 220px;
}

/* A card carrying BOTH flags keeps the tuned two-ribbon stack: the upper
   ribbon has to stay narrow, because at 45 degrees a full-width ribbon that
   high up the corner would cross the wider one below it rather than sit above
   it. #5 is about the single-flag cards, which is what Mike marked. */
.ohb2-inv-card--used.ohb2-inv-card--clearance .ohb2-inv-card-photo::before,
.ohb2-building-card--used.ohb2-building-card--clearance .ohb2-card-thumb::before {
    top: 10px;
    right: -35px;
    width: 120px;
}

/* ---------------------------------------------------------------------
   2. GOLD "BUY OR RENT NOW" WEIGHT

   Measured off design-01 p.1, the three-up featured row, at native render
   scale: card 153px wide, gold bar 21px tall, i.e. bar height = 0.1373 x
   card width. The theme's cards measure ~297-301px, so the drawn bar is
   ~41px. It was rendering at 55.5px — 35% over.

   The type was not really the problem: the design's label works out at
   0.074 x card width = ~22px, against the theme's 21px. The bloat was
   vertical: 12px padding top and bottom PLUS a 31.5px line box, because
   .ohb2-btn-gold never declares a line-height and so inherited the body's
   1.5. Pinning line-height and trimming the padding does most of the work;
   19px type takes the last of the "heavy" out per Sara's note.

   | surface          | before        | after         | design target |
   |------------------|---------------|---------------|---------------|
   | listing card     | 55.5px @ 21px | ~40px @ 19px  | 40.8px        |
   | featured card    | 55.5px @ 21px | ~40px @ 19px  | 41.3px        |
   | detail CTA pair  | 67px   @ 26px | ~60px @ 24px  | ~59px         |

   Full card width is kept — the design draws the bar edge to edge.

   MOBILE is sized for the thumb, not for the ratio: the cards are wider
   there (350px listing / 318px featured), so the drawn ratio would give a
   44-48px bar anyway, and the values below hold ~45px, above the 44px
   minimum touch target on every surface. Verified at 390px.

   The detail page pair is trimmed together. The design (design-03 p.3)
   draws BUY OR RENT IT NOW and ASK ABOUT THIS SHED as the same size, so
   shrinking only the gold one would break a matched pair the mockup shows
   matched. Both land on the design's ~59px.
   --------------------------------------------------------------------- */
.ohb2-inv-card .ohb2-btn-gold,
.ohb2-building-card .ohb2-btn-gold {
    display: flex;
    width: 100%;
    margin-top: 6px;
    padding: 9px 12px;
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
}

.ohb2-bldg-specs-col .ohb2-btn-gold,
.ohb2-bldg-ask-btn {
    padding: 16px 16px;
    font-size: 24px;
    line-height: 1.15;
}

@media screen and (max-width: 700px) {
    /* >=44px tall on both card types — thumb-sized, not ratio-sized. */
    .ohb2-inv-card .ohb2-btn-gold,
    .ohb2-building-card .ohb2-btn-gold {
        padding: 12px 14px;
        font-size: 18px;
        line-height: 1.15;
    }
    .ohb2-bldg-specs-col .ohb2-btn-gold,
    .ohb2-bldg-ask-btn {
        padding: 12px 14px;
        font-size: 19px;
        line-height: 1.15;
    }
}

/* =====================================================================
   PASS 2026-09-01 (iii) — detail-page layout, the BD no-crop policy for
   dealer building photos, the 3D-builder band and the FREE-delivery band.

   Every number below is read off the design at the scale the earlier
   passes established: the design page's live area maps 1:1 onto a 940px
   content column, i.e. design px x 2. Ratios, not absolutes, where the
   surface is fluid.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. NO-CROP POLICY — dealer BUILDING photos are never cropped.

   Stock BD is explicit about this: the listing card ships
   `object-fit: contain` inline on every thumbnail
   (resources/views/public/inventory.blade.php) inside a fixed 250px-tall
   `.inventory-item .image` frame, and the detail slider uses
   `background-size: contain`. Dealers complained about buildings being
   cut off, so BD trades letterboxing for never losing part of a shed.
   That decision carries into ohb2.

   Scope: dealer photography ONLY — detail main image, detail gallery
   thumbs, inventory listing cards, home featured cards. The OHB
   marketing renders (Popular Shed Designs rail, catalog heroes, product
   block thumbs, swatches, portraits, promo panes, the builder-band
   tablet shot) are fixed-ratio artwork from the content doc and are
   deliberately left filling their frames.

   Frames keep a fixed aspect-ratio so card grids stay aligned no matter
   what shape the dealer's photo is; the photo is contained inside.

   The letterbox field is WHITE, 2026-09-01. Stock BD declares no
   background at all on the frame -- `.inventory-item .image`
   (frontend.css:1119) sets only width and height, and `.img-wrapper`
   sets only width -- so a contained photo letterboxes against page
   white. ohb2 was staging them on #F2F2F2, which read as a deliberate
   grey plate rather than as BD does it. Matched to BD.
   --------------------------------------------------------------------- */

/* Detail — main image */
.ohb2-bldg-gallery .ohb2-gallery-main {
    background: #fff;
}
/* ReviewStudio #18: the frame is near-square (518/504) but the photos are
   landscape, so a centred `contain` split the leftover white evenly and
   pushed the visible top edge of the picture ~62px below the frame top —
   i.e. ~62px below "ABOUT THIS BUILDING" in the right column, which is
   what Mike flagged. The element boxes were always aligned; only the
   painted pixels were not, which is why measuring the box read as "fine".
   Anchor the picture to the TOP of the frame so its visible top edge lines
   up with the heading. `contain` stays — the detail-page no-crop policy
   (Sara, 2026-09-01) is unchanged; the leftover white just falls to the
   bottom of the frame instead of being split above and below. */
.ohb2-bldg-gallery .ohb2-gallery-main img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
}

/* Detail — gallery thumbnails */
.ohb2-bldg-gallery .ohb2-gallery-thumb {
    background: #fff;
}
.ohb2-bldg-gallery .ohb2-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Inventory listing cards */
.ohb2-inv-card-photo {
    background: #fff;
}
.ohb2-inv-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Home featured cards */
.ohb2-building-card .ohb2-card-thumb {
    background: #fff;
}
.ohb2-building-card .ohb2-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* ---------------------------------------------------------------------
   B. DETAIL PAGE TOP — the drawn column split and the taller main image.

   Measured off Sara's crop of the design, content column = 879px there:
     left column   518 / 879 = 58.9%
     gutter         21 / 879 =  2.4%
     right column  340 / 879 = 38.7%
     main image    518 x 504 -> 1.028 : 1, i.e. near square

   The theme had 55% / 4.3% / 40.7% with a 5:4 (1.25) frame, so the image
   was both narrower and much shorter than drawn: 517x414 against a
   553x538 target. That is the "main image is taller" note.

   Thumb strip, same crop: four square tiles 112px wide on a 518px
   column (21.6%), 9px apart (1.7%), with ~21px of chevron gutter each
   side (4.1%). Ours were 116x88 landscape.
   --------------------------------------------------------------------- */
.ohb2-bldg-top-cols {
    gap: 22px;
}
.ohb2-bldg-gallery {
    flex: 0 0 58.9%;
}
.ohb2-bldg-gallery .ohb2-gallery-main {
    aspect-ratio: 518 / 504;
}
.ohb2-gallery-thumbs-wrap {
    padding: 0 23px;
    margin-top: 10px;
}
.ohb2-gallery-thumbs {
    gap: 10px;
}
.ohb2-bldg-gallery .ohb2-gallery-thumb {
    width: 119px;
    height: 118px;
    flex: 0 0 119px;
}

/* ---------------------------------------------------------------------
   C. 3D BUILDER BAND — design page 3.

   Drawn: gold heading centred across the WHOLE band above both columns;
   left column a large tablet photo 468x268 (49.6% of the content
   column, 7:4); right column a WHITE all-caps heading, white body copy
   with the brand name as a gold underlined link, and a 350x58 gold
   button centred under the paragraph with a small corner radius.

   The theme had the heading inside the left column (wrapping to two
   lines), a 140x110 tablet tile still showing its "3D Builder Preview"
   placeholder text through the real photo, a GOLD right-hand heading,
   and a button stretched to the full 571px column.
   --------------------------------------------------------------------- */
.ohb2-builder-cta-band {
    padding: 56px 0 76px;
}
.ohb2-builder-cta-heading {
    margin: 0 0 26px; /* #23 section-heading standard */
    padding: 0;
    color: #E9BB52;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}
.ohb2-builder-cta-inner {
    gap: 36px;
    align-items: flex-start;
}
.ohb2-builder-cta-left {
    flex: 0 0 49.6%;
    min-width: 0;
}
.ohb2-builder-cta-mockup {
    width: 100%;
    height: auto;
    aspect-ratio: 466 / 268;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}
/* The placeholder caption was printing over the real tablet photo. */
.ohb2-builder-cta-mockup::before {
    content: none;
}
.ohb2-builder-cta-right {
    flex: 1;
    min-width: 0;
}
.ohb2-builder-cta-right h3 {
    color: #fff;
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 12px;
}
.ohb2-builder-cta-right p {
    color: #fff;
    font-size: 15px;
    line-height: 1.45;
    margin: 0 0 28px;
    padding: 0;
}
.ohb2-builder-cta-right p a {
    color: #E9BB52;
    text-decoration: underline;
}
.ohb2-builder-cta-right p a:hover {
    color: #F3D08A;
}
.ohb2-builder-cta-band .ohb2-btn-gold {
    display: flex;
    width: 350px;
    max-width: 100%;
    margin: 0 auto;
    padding: 17px 20px;
    font-size: 20px;
    line-height: 1.2;
    border-radius: 7px;
}

/* ---------------------------------------------------------------------
   D. FREE SHED DELIVERY BAND — design page 3, the section below.

   Drawn: blue heading centred across both columns; body copy in a 450px
   left column; a 444x224 (2:1) photo on the right with a navy border and
   rounded corners; a 346x56 navy button centred under it. No rule above
   the section — the navy builder band above is the separation.

   The theme had a left-aligned 20px heading inside the text column, a
   620/280 split, a square unbordered 280x200 photo and a button locked
   to the 280px column.
   --------------------------------------------------------------------- */
.ohb2-bldg-delivery-section {
    padding: 64px 0 72px;
    border-top: none;
}
.ohb2-bldg-delivery-heading {
    margin: 0 0 26px; /* #23 section-heading standard */
    padding: 0;
    color: #1A567A;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}
.ohb2-bldg-delivery-inner {
    gap: 44px;
    align-items: flex-start;
}
.ohb2-bldg-delivery-text {
    flex: 1;
    min-width: 0;
}
.ohb2-bldg-delivery-text p {
    font-size: 14px;
    line-height: 1.45;
    color: #333;
}
.ohb2-bldg-delivery-cta {
    flex: 0 0 444px;
    text-align: center;
}
.ohb2-bldg-delivery-cta .ohb2-promo-pane-img-placeholder {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 2 / 1;
    margin: 0 0 34px;
    border: 4px solid #1A567A;
    border-radius: 16px;
}
.ohb2-bldg-delivery-cta .ohb2-btn-gold {
    display: flex;
    width: 346px;
    max-width: 100%;
    margin: 0 auto;
    padding: 17px 20px;
    font-size: 20px;
    line-height: 1.2;
    border-radius: 7px;
}

/* ---------------------------------------------------------------------
   E. Narrow viewports for the four blocks above.
   --------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .ohb2-builder-cta-left,
    .ohb2-bldg-delivery-cta {
        flex: none;
        width: 100%;
    }
    .ohb2-builder-cta-inner,
    .ohb2-bldg-delivery-inner {
        gap: 24px;
    }
}

@media screen and (max-width: 700px) {
    .ohb2-bldg-gallery .ohb2-gallery-thumb {
        width: 84px;
        height: 83px;
        flex: 0 0 84px;
    }
    .ohb2-gallery-thumbs-wrap {
        padding: 0 26px;
    }
    .ohb2-builder-cta-band {
        padding: 36px 0 44px;
    }
    .ohb2-builder-cta-heading,
    .ohb2-bldg-delivery-heading {
        font-size: 26px;
    }
    .ohb2-builder-cta-right h3 {
        font-size: 22px;
    }
    .ohb2-bldg-delivery-section {
        padding: 40px 0 44px;
    }
    .ohb2-builder-cta-band .ohb2-btn-gold,
    .ohb2-bldg-delivery-cta .ohb2-btn-gold {
        font-size: 18px;
        padding: 14px 16px;
    }
}

/* ---------------------------------------------------------------------
   F. Category pages after the submenu band was retired.

   Design page 4 leaves 41 design px (82 CSS px) between the bottom of
   the cover hero and the top of the page heading. With the band gone
   the intro's own 40px top padding left the heading sitting too close
   under the photos.
   --------------------------------------------------------------------- */
.ohb2-catalog-intro,
.ohb2-upgrades-intro {
    padding-top: 72px;
}

/* ---------------------------------------------------------------------
   G. Video tile in the detail thumb strip.

   The design draws it as the building photo with a white ring-and-
   triangle play badge over it, not as a flat coloured tile. It also has
   to opt back in to a background image now that section A gives every
   thumb in the strip the neutral no-crop field.
   --------------------------------------------------------------------- */
.ohb2-bldg-gallery .ohb2-bldg-video-thumb {
    background-color: #fff;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    width: 119px;
    min-width: 119px;
    height: 118px;
}
.ohb2-bldg-gallery .ohb2-bldg-video-thumb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 43px;
    height: 43px;
    margin: -21.5px 0 0 -21.5px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.ohb2-bldg-gallery .ohb2-bldg-video-thumb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -5px;
    border-left: 15px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

@media screen and (max-width: 700px) {
    .ohb2-catalog-intro,
    .ohb2-upgrades-intro {
        padding-top: 44px;
    }
    .ohb2-bldg-gallery .ohb2-bldg-video-thumb {
        width: 84px;
        min-width: 84px;
        height: 83px;
    }
    .ohb2-bldg-gallery .ohb2-bldg-video-thumb::before {
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        border-width: 2px;
    }
    .ohb2-bldg-gallery .ohb2-bldg-video-thumb::after {
        margin: -7px 0 0 -4px;
        border-left-width: 11px;
        border-top-width: 7px;
        border-bottom-width: 7px;
    }
}

/* =====================================================================
   PASS 2026-09-01 (iv) — FULL-SITE FIDELITY SWEEP

   Every number below is measured off the 200dpi renders in
   ~/claude-agent/state/ohb2/refs/, normalised so the drawn page is
   exactly 1440px wide (the desktop viewport we screenshot at). The
   design's content column measures 926px at that scale — the magenta
   guides in the PDF sit at x=257 and x=1183 — which corroborates the
   940px column this theme already ships.

   Tooling: state/ohb2/measure-ref.py (design-side pixel measurement)
            state/ohb2/measure-live.js (live getBoundingClientRect probe)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. CARD PHOTO FRAME — the design's frame is square, not 5:4.

   design-02, inventory card 1, measured edge to edge:
       card             x 257..554  ->  297px
       photo            y 595..884  ->  289px      aspect 1.028 : 1
       caption band     y 884..947  ->   63px
       price rows       42px each, 5-7px apart
       Contact/Images   42px
       gold BUY bar     41px
   design-01, home featured card 1: photo 294 x 289 -> 1.017 : 1.

   The theme shipped 5 / 4 (1.25) on both surfaces, so every dealer photo
   was rendering 51px shorter than drawn. That matters twice over now the
   no-crop policy is in: a contained portrait photo (the demo building is
   1998 x 2178) loses ~20% of its rendered size in a flatter frame and
   leaves a wider grey field down each side. Same 1.028 the detail page's
   main image already uses, so all four dealer-photo surfaces now agree.
   --------------------------------------------------------------------- */
.ohb2-inv-card-photo {
    aspect-ratio: 1.028;
}
.ohb2-building-card .ohb2-card-thumb {
    aspect-ratio: 1.028;
}

/* ---------------------------------------------------------------------
   2. INVENTORY GRID ROW GAP — 24px against a drawn 76px.

   design-02: card 1 ends (gold bar bottom) at y 1234, the second row's
   photo starts at y 1310. The column gap is right (3 x 297 + 2 x 17 = 925
   drawn; 3 x 297.3 + 2 x 24 = 940 here), it is only the row rhythm that
   was compressed.
   --------------------------------------------------------------------- */
.ohb2-inv-grid {
    column-gap: 24px;
    row-gap: 76px;
}

/* ---------------------------------------------------------------------
   3. THE SECONDARY NAVY CTA — one drawn size, seven live ones.

   The deck draws every secondary call to action at the same size, on
   every page:

     SHOP NOW            design-01   341 x 58
     SEE IT IN ACTION    design-02   342 x 58
     DOWNLOAD IT NOW     design-01   344 x 55
     LEARN MORE          design-02   342 x 54
     VIEW ALL INVENTORY  design-01   344 x 56
     SHOP OUR INVENTORY  design-04   339 x 53

   i.e. 342 x 56. Live they ranged 205 -> 381 wide and 62 -> 75 tall,
   because none of them declared a line-height and so inherited the body's
   1.5 — the same fault the gold buy bar had (a 26px label was sitting in
   a 39px line box). Pinning line-height and trimming the padding does all
   of the work; the type size is left where it is.
   --------------------------------------------------------------------- */
.ohb2-btn-blue {
    line-height: 1.15;
}
.ohb2-view-all-wrap .ohb2-btn-blue,
.ohb2-promo-pane .ohb2-btn-blue {
    width: 342px;
    max-width: 100%;
    font-size: 26px;
    line-height: 1.15;
    padding: 13px 16px;
    box-sizing: border-box;
}

/* Hero CTA pair, design-01: 451 x 97 each, 22px apart, two lines of type.
   Live carried a hard min-height: 126px — 30% over. Two lines at 1.2 is
   67.2px, so 15px of padding lands on the drawn 97. */
.ohb2-hero-cta-strip .ohb2-hero-cta-btn {
    min-height: 97px !important;
    padding: 15px 16px !important;
}

/* BUILD IT NOW, design-01: 282 x 58 (measured off the brand band's
   Add-on Packages panel). Live: ~310 x 66, same unpinned line-height. */
.ohb2-addon-callout .ohb2-btn-gold {
    min-width: 282px;
    font-size: 26px;
    line-height: 1.15;
    padding: 14px 30px;
}

/* ---------------------------------------------------------------------
   4. ADD-ON PACKAGES PANEL COPY — 18px against a drawn 16px.

   design-01, hot-spot panel, measured: 311px measure, 19.6px line box,
   ~11.2px cap height -> a 16px face. Six lines drawn; ours took eight in
   the same measure. Justification is NOT a fault here — the design really
   does justify this paragraph (line 3, "Porches, Dormers and Garage
   Door", carries the tell-tale stretched word spacing), so it stays.
   --------------------------------------------------------------------- */
.ohb2-anat-panel p {
    font-size: 16px;
    line-height: 1.225;
}

/* ---------------------------------------------------------------------
   5. PROMO PANE PHOTO — drawn 2 : 1, shipped 53 / 30 (1.767).

   design-01: pane photo x 258..693 (435) by y 3705..3922 (217).
   --------------------------------------------------------------------- */
.ohb2-promo-pane-img {
    aspect-ratio: 2 / 1;
}

/* ---------------------------------------------------------------------
   6. FAQ TOGGLE ROWS — 53px against a drawn 32px.

   design-01: row 1 y 4453..4485 = 32px, spanning the full 926 column,
   with ~13px caps, i.e. the SAME ~18px face we ship (design 9.07px per
   character against our 8.84). So this is padding and line-height, not
   type: 11px of padding plus a 27px line box on an 18px label. Fourteen
   questions at 53px was 300px of extra page.
   --------------------------------------------------------------------- */
.ohb2-faq-header {
    padding: 4px 20px;
    line-height: 1.15;
}
.ohb2-faq-header .ohb2-faq-toggle {
    line-height: 1.15;
}

/* ---------------------------------------------------------------------
   7. FOOTER — 339.5px tall against a drawn 260px.

   design-01: grey band y 4758..5018 = 260px. Address and hours lines sit
   on a 24.5px rhythm with no extra margin between them; our line-height
   is already 24.65 (right), but every hours row also carried a 10px
   margin-bottom — 7 rows x 10px = 70px of the 80px overshoot.
   --------------------------------------------------------------------- */
.ohb2-footer-hours-row {
    margin-bottom: 0;
}
.ohb2-footer {
    padding-top: 30px;
}

/* ---------------------------------------------------------------------
   8. INVENTORY INTRO — centred here, left-aligned in the design.

   design-02: the intro's third line starts flush at the column's left
   edge (x 257), which a centred block cannot do.
   --------------------------------------------------------------------- */
.ohb2-inventory-page .ohb2-inv-intro-copy {
    text-align: left;
}

/* ---------------------------------------------------------------------
   9. DETAIL PAGE
   --------------------------------------------------------------------- */

/* (a) "About This Shed Model" prose was capped at 860px inside the 940
   column — a 40px inset on each side that the design does not draw;
   design-03 runs this copy flush to the column, like the Materials &
   Construction Standards block right below it already does. */
.ohb2-building-page .ohb2-bldg-desc-single {
    max-width: var(--ohb2-col);
}

/* (b) The lead form: design-03 draws First / Last / Email / Phone as ONE
   row of four. Ours stacked them 2 x 2. The quote form on every catalog
   page is already 4-up (.ohb2-form-row-quad), so this also brings the two
   lead surfaces into agreement with each other. Field set untouched. */
.ohb2-bldg-form-row {
    grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 900px) {
    .ohb2-bldg-form-row { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 560px) {
    .ohb2-bldg-form-row { grid-template-columns: 1fr; }
}

/* (c) BUY OR RENT IT NOW / ASK ABOUT THIS SHED carry a small radius in
   design-03 p.3; ours were square. (Carried open item from the brochure
   pass — the two buttons added that day already took the drawn 4px.) */
.ohb2-building-page .ohb2-btn-gold,
.ohb2-bldg-ask-btn {
    border-radius: 7px;
}

/* --- (iv) follow-up: the FAQ row was being held open by its toggle glyph.
   .ohb2-faq-item .ohb2-faq-header .ohb2-faq-toggle sets font-size: 26px,
   so the +/- was the tallest box in the flex row (29.9px) and set the row
   height on its own. Design-01's toggle is the smaller of the two, not the
   larger. Row now lands on the drawn 32px. --- */
.ohb2-faq-item .ohb2-faq-header .ohb2-faq-toggle,
.ohb2-faq-item .ohb2-faq-header-closed .ohb2-faq-toggle,
.ohb2-faq-item .ohb2-faq-header-open .ohb2-faq-toggle {
    font-size: 22px;
    line-height: 0.9;
}

/* =====================================================================
   PASS 2026-09-01 (iv), round 2 — three things the first round exposed.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. THE BROCHURE DEVICE HAS 21% OF ITS OWN WIDTH IN BAKED-IN PADDING.

   brochure-device-mockup.jpg is 900 x 474, but the laptop-and-phone
   artwork inside it only occupies x 106..817 by y 70..420 — 712 x 351,
   aspect 2.028. Everything around it is white.

   So `background-size: contain` in a 460.6px frame draws the artwork at
   460.6 x 712/900 = 364px. design-01 draws it 475px wide (x 258..742 on
   the 926 column, 51%). That is the whole of the "the brochure image is
   too small" reading — the element was almost the right size, the asset
   just wasn't filling it.

   Fixed by over-scaling the background by exactly the asset's padding
   ratio (900/712 = 1.264) so the artwork itself lands on the drawn
   width, and by taking the column back to the drawn 484 / 40 / 401 split
   (it was 460.6 / 56 / 423.4).
   --------------------------------------------------------------------- */
.ohb2-brochure-block-inner {
    gap: 40px;
}
.ohb2-brochure-device {
    flex: 0 0 484px;
    max-width: 100%;
    overflow: hidden;
}
.ohb2-brochure-device-img {
    aspect-ratio: 484 / 246;
    /* 2026-09-21, #38 second pass. 126.4% with the inline `center` position
       left this class -- the FOURTH implementation of the brochure device,
       used on / and /contact-us -- clipping the phone's right edge at every
       width, exactly the fault the /about pane was fixed for on 9/17 and for
       exactly the same reason: the asset's white margin is NOT symmetric, so
       a centred over-scale takes the same bite out of both sides while only
       one side has the margin to give it.

       Measured on the file myself rather than taken from a report (PIL, ink
       threshold 2/255 so the faint edge pixels count -- a higher threshold
       reads the margins as 11.78/9.22 and would licence a crop into real
       ink): brochure-device-mockup.jpg is 900x474, drawn artwork x 104..823
       (11.556% white left, 8.444% right) by y 64..423 (13.502% top, 10.549%
       bottom). Artwork is exactly 80.000% of the asset's width.

       At 126.4% centred: artwork = 1.264 x 0.80 = 101.12% of the slot, i.e.
       it cannot fit at all, and the 13.2%-a-side offset against an 8.444%
       right margin put the overrun on the right. Measured before: the
       artwork overran the slot's right edge by 11.64px and its bottom by
       3.92px at 1440 on home (12.59 / 4.24 on contact), at every width from
       360 up.

       Same construction as the /about pane, re-derived for this slot's
       484/246 aspect:
         120% -> artwork = 0.80 x 1.20 = 96% of the slot, 2% clear a side.
         x: -0.20p + 0.11556 x 1.20 = 0.02  ->  p = 59.34%.
         y: image height = 1.20W x 474/900 = 0.632W against a 0.50826W slot,
            artwork 75.949% of it -> centred at p = 57.54%, 1.41% a side.
       Measured after, both pages at 1440/1200/1024/900/768/700/600/480/390/360:
       clearance is symmetric at every width -- 9.21/9.22 left/right and
       6.50/6.50 top/bottom at 1440 home, tightest 2.27px at 360 where the
       slot is only 160px wide. 2% rather than an exact fit is deliberate:
       exact fit is what failed here twice.

       !important on both because bottom-stack.blade.php sets size AND
       position inline; without it the inline `center` wins and the crop
       goes back to being asymmetric. */
    background-size: 120% auto !important;
    background-position: 59.34% 57.54% !important;
}

/* The catalog tail and About use the same asset as an <img>, so the same
   padding costs them the same 21%. Widening the image by the padding
   ratio and pulling it back by the asset's own left margin (106/900 =
   11.8%, i.e. 14.9% of the slot once scaled) puts the artwork's left edge
   on the slot's left edge and lets the white overflow clip away. */
.ohb2-cat-brochure-device {
    overflow: hidden;
}
.ohb2-cat-brochure-device img {
    display: block;
    width: 126.4%;
    max-width: none;
    margin-left: -14.9%;
}

/* ---------------------------------------------------------------------
   2. FAQ ROWS WERE CLICKABLE WITH NO HOVER STATE AT ALL.

   Forced-hover audit across all 13 pages: `.ohb2-faq-header` declares
   `cursor: pointer` and toggles on click, but nothing about it changes
   under the pointer — colour, background, border all identical. The deck
   is a static mockup so it draws no hover, but a control that says
   "click me" and then does not answer is the class of thing this pass is
   for. Uses the theme's existing darken, same as every other navy
   control, so no new colour enters the palette.
   --------------------------------------------------------------------- */
.ohb2-faq-item .ohb2-faq-header-closed:hover,
.ohb2-faq-item .ohb2-faq-header-open:hover {
    background: #14405C;
}

/* ---------------------------------------------------------------------
   3. THE HOT-SPOT STARS ANSWER HOVER BUT DO NOT ACKNOWLEDGE IT.

   The line above them reads "HOVER OVER THE STARS BELOW TO SEE WHAT'S
   POSSIBLE!", and the script does bind mouseenter — the panel beside the
   cutaway really does swap. But the star itself never changes, so on the
   forced-hover audit it reads as a dead control: cursor: pointer,
   role="button", zero feedback. A small lift and a glow is enough to say
   "this one is live", and it makes the widget legible to anyone sweeping
   it with the mouse rather than pointing precisely.
   --------------------------------------------------------------------- */
.ohb2-anat-dot {
    transition: transform 0.15s ease, filter 0.15s ease;
}
.ohb2-anat-star:hover .ohb2-anat-dot,
.ohb2-anat-star:focus .ohb2-anat-dot,
.ohb2-anat-star:focus-visible .ohb2-anat-dot {
    transform: scale(1.22);
    filter: drop-shadow(0 0 6px rgba(233, 187, 82, 0.95));
}
.ohb2-anat-star:focus-visible {
    outline: 2px solid #E9BB52;
    outline-offset: 3px;
}

/* --- (iv) round 2: the air between the promo duo and the brochure band.
   design-01: SHOP NOW's bottom edge is at y 4014 and the brochure
   artwork's top at 4085 — 71px. Ours was 96px, because the promo pane
   carries 48px of its own bottom padding on top of the brochure block's
   10px top padding. --- */
.ohb2-promo-pane {
    padding-bottom: 24px;
}


/* ---------------------------------------------------------------------
   UNIFIED BUTTON CORNER RADIUS — 2026-09-01 (nits pass)
   ---------------------------------------------------------------------
   Measured off the deck with measure-radius.py: each ref is trimmed to the
   page mockup and rescaled so the page is exactly 1440px wide, which makes
   design px == CSS px. For each button the per-row horizontal inset of the
   fill is read off the corner and a circle radius is least-squares fitted
   to it (rms 0.14-0.43px). Eleven free-standing buttons across design-01,
   -02 and -03:

     BUY OR RENT IT NOW  d03   7.1      SHOP NOW            d01   7.3
     ASK ABOUT THIS SHED d03   7.5      SEE IT IN ACTION    d01   7.4
     brochure gold       d01   7.1      brochure gold       d02   7.8
     VIEW ALL band       d01   6.4      RTO learn-more      d01   6.1
     catalog gold CTA    d03   6.4      3D builder band     d03   5.6
     FREE delivery band  d03   5.6

   mean 6.73, median 7.10  ->  ONE value for the whole theme: 7px.

   The theme was running two shapes, confirmed by computed style on nine
   pages before the change:
     4px  brochure gold, 3D-builder band, FREE-delivery band, the detail
          BUY OR RENT IT NOW / ASK ABOUT THIS SHED pair, catalog product
          CTAs, the warranty CTA row, the inventory filter toggle
     0px  the card-flush gold BUY OR RENT NOW bar, the Images-&-Details /
          Get-Approved outline pair, the hero CTA strip, SHOP NOW and
          SEE IT IN ACTION, the Popular Designs CUSTOMIZE pill, the
          builder-band button, the contact and quote submit buttons

   NOTE for Sara — the deck does draw two families genuinely square, at a
   fitted r = 0.00 with zero residual: the card-flush gold BUY OR RENT NOW
   bar, and the navy Images-&-Details / Get-Approved half-cell pair beneath
   it (design-01 and design-02, every row, both files). They are unified to
   7px here on instruction, so the theme reads as one button shape instead
   of three. Excluding them again is one selector. The small CUSTOMIZE pill
   on the Popular Designs rail measures 4.6px, i.e. the deck scales its
   radius down on the small pill; it is unified too.
   --------------------------------------------------------------------- */
.ohb2-btn-gold,
.ohb2-btn-blue,
.ohb2-btn-outline,
.ohb2-bldg-ask-btn,
.ohb2-hero-cta-btn,
.ohb2-mobile-inv-btn,
.ohb2-mobile-3d-btn,
.ohb2-builder-band-btn,
.ohb2-designs-customize-btn,
.ohb2-design-card-customize a,
.ohb2-filter-toggle-btn,
.ohb2-cta-inv,
.ohb2-cta-3d,
.ohb2-prod-ctas a,
.ohb2-body .ohb2-contact-submit-wrap button[type="submit"],
.ohb2-body .ohb2-quote-submit-wrap button[type="submit"],
.ohb2-body .ohb2-bldg-form-submit button[type="submit"],
.ohb2-body .ohb2-contact-popup-submit button[type="submit"] {
    border-radius: 7px;
}

/* =====================================================================
   PASS 2026-09-01 (v) — Sara's evening round.

   Every number in this block is a measurement, not a preference. Design
   refs are read in PAGE SPACE: the ref is trimmed, cropped to the mockup
   page and rescaled so the deck's content-column guides (page-space
   x 260 and x 1182) land where our 940px column does, which makes design
   px == CSS px. Tools: measure-ref.py, measure-radius.py, find-buttons.py,
   measure-hotspot.py, measure-crop-hotspot.py in ~/claude-agent/state/ohb2.
   ===================================================================== */


/* ---------------------------------------------------------------------
   (1) HOME PAGE — no blue rule between the nav bar and the hero.

   The morning pass closed the grey nav bar with an 18px #1A567A band and
   verified it against design-02/-03/-04. That is correct on those pages:
   an interior page runs nav -> navy rule -> white content well.

   design-01 (the HOME page) does not draw it. The hero photograph butts
   straight up against the grey nav bar with no navy strip in between
   (measured: grey nav bar y 189..232, hero image begins y 233). On the
   home page the rule therefore renders as a blue bar welded to the top of
   the hero — the bar Sara asked to have removed. It is the only blue
   horizontal strip anywhere in the home page's top 1500px that the deck
   does not draw; everything below the hero (the paging dashes and the two
   navy CTA blocks) IS drawn in design-01 and is left alone.

   Scoped to the home page only, so every interior page keeps the rule.
   --------------------------------------------------------------------- */
.ohb2-body.ohb2-home-page .ohb2-nav-bar {
    border-bottom: 0;
}


/* ---------------------------------------------------------------------
   (2) BUTTON RADIUS — per family, replacing the single 7px.

   The nits pass unified every control to 7px on instruction and flagged
   in writing that the deck draws two families genuinely square. Sara has
   now looked at it ("the homepage buttons look more square not rounded
   corners", plus a card-bottom crop: "these should all be squared off"),
   so the measured per-family values are restored.

   Fitted with measure-radius.py (least-squares circle fit to the corner
   arc, all four corners independently, rms residual in brackets):

     SQUARE — fitted r = 0.00 with ZERO residual on every corner
       hero CTA pair VIEW OUR SHED INVENTORY / DESIGN A CUSTOM SHED
                                        design-01 y744  450x97   r 0.00
       card navy pair Contact Dealer / Images & Details
                                        design-01 y1521 142x40   r 0.00
       card gold bar BUY OR RENT NOW    design-01 y1568 296x40   r 0.00
       (all three are edge-to-edge inside the card / column, which is
        presumably why the deck squares them.)

     7px — free-standing buttons, mean 6.9
       VIEW ALL INVENTORY   design-01  6.32 [0.14-0.29]
       SHOP NOW             design-01  8.00 [0.21-0.30]
       SEE IT IN ACTION     design-01  7.15 [0.14-0.37]
       DOWNLOAD IT NOW      design-01  6.03 [0.08-0.49]  design-02 7.8
       BUILD IT NOW         design-01  7.00 [0.19-0.38]
       detail BUY OR RENT IT NOW / ASK ABOUT THIS SHED  design-03 7.1 / 7.5
       catalog gold CTA     design-03  6.4      RTO learn-more design-01 6.1

     6px — the two detail bands, measured distinctly smaller
       3D builder band      design-03  5.6      FREE delivery band  5.6

     5px — the small Popular Designs CUSTOMIZE pill
       design-01 y3435 126x25  5.50 [0.15-0.28]   (design-03 read 4.6)

   The 7px block above this one stays as the default; these override it by
   specificity, so a future edit to the default cannot silently re-round
   the square families.
   --------------------------------------------------------------------- */
.ohb2-body .ohb2-hero-cta-btn,
.ohb2-body .ohb2-inv-card .ohb2-btn-gold,
.ohb2-body .ohb2-building-card .ohb2-btn-gold,
.ohb2-body .ohb2-card-btn-row .ohb2-btn-outline,
.ohb2-body .ohb2-card-btn-row .ohb2-btn-blue,
.ohb2-body .ohb2-card-btn-row > a {
    border-radius: 0;
}
.ohb2-body .ohb2-builder-cta-band .ohb2-btn-gold,
.ohb2-body .ohb2-bldg-delivery-cta .ohb2-btn-blue,
.ohb2-body .ohb2-bldg-delivery-cta > a {
    border-radius: 6px;
}
.ohb2-body .ohb2-design-card-customize a,
.ohb2-body .ohb2-designs-customize-btn {
    border-radius: 5px;
}


/* ---------------------------------------------------------------------
   (3) BRAND BAND — dealer heading / subtitle type, and the logo's air.

   Measured on design-01 in page space and cross-checked against Sara's
   own crop of the band (guide-anchored: 922 crop px == the 940 column).

   TYPE. The subtitle was already the right thing in kind — Roboto,
   weight 400, white, title case, upright — so "regular not bold" was
   already true. What was off was scale. For the identical string
   "Is A Proud Authorized Dealer Of:" the deck's ink measures 342px wide
   (design-01 page space) / 343px (Sara's crop, independently); ours
   measured 367px at 26px. 26 x 342.5/367 = 24.3 -> 24px.
   The heading is the larger error: the deck's all-caps cap height is 25px
   (modal per-column glyph extent, which ignores the bracket overshoot),
   i.e. 25 / 0.711 = 35.2px against the theme's 40px.

   The heading also carried a stray `padding-bottom: 15px` and the
   subtitle a `padding-bottom: 20px` inherited from the generic heading
   rules, which is why the subtitle floated 36px below the heading where
   the deck tucks it 8px under. Both zeroed; the gap is set with
   line-height instead.

   LOGO AIR. Sara: the badges crowd the logo, make the gap below match the
   gap above. Measured live before the change: 46px above (26px margin
   + the subtitle's 20px phantom padding) against 30px below. The deck
   runs 27px above / 32px below — near enough equal, with a shade more
   below. Shipped 36px both sides: equal, as she asked, and generous
   without drifting from the deck's proportion.
   --------------------------------------------------------------------- */
.ohb2-brand-band .ohb2-brand-dealer-heading {
    font-size: 35px;
    line-height: 1.15;
    margin: 0;
    padding: 0;
}
.ohb2-brand-band .ohb2-brand-dealer-sub {
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    padding: 0;
}
.ohb2-brand-band .ohb2-brand-ohbs-logo {
    margin: 36px auto;
}
.ohb2-brand-band .ohb2-badge-row {
    margin: 0 0 8px;
}
@media (max-width: 900px) {
    .ohb2-brand-band .ohb2-brand-dealer-heading { font-size: 26px; }
    .ohb2-brand-band .ohb2-brand-dealer-sub { font-size: 18px; }
    .ohb2-brand-band .ohb2-brand-ohbs-logo { margin: 24px auto; }
}


/* ---------------------------------------------------------------------
   (4) HOT-SPOT STARS — size and position, both measured off the deck.

   SIZE. The gold circles measure 5.55-5.90% of the cutaway illustration's
   own width (mean 5.71%), on BOTH sources independently: design-01 in
   page space (6 of 8 circles resolvable at that render's resolution) and
   Sara's higher-resolution crop (all 8, gold tolerance tightened to 30 so
   the OSB sheathing behind two of them stops swallowing the blob). The
   theme drew them at 42px on a 493px illustration = 8.52%, half again too
   big. 5.7% of the illustration is ~29px at desktop.

   Sizing moves onto the star, not the dot: the dot's percentage would
   resolve against .ohb2-anat-star, which shrink-wraps the dot — circular.
   .ohb2-anat-star is absolutely positioned inside .ohb2-anatomy-img-wrap,
   whose box IS the illustration box (the img is object-fit: fill at
   width:100%), so a percentage there is a true fraction of the drawing.

   MOBILE keeps a fixed 30px. 5.7% of the 358px mobile illustration is
   20.4px, well under a usable touch target, so the ratio is deliberately
   NOT honoured there — noted rather than silently dropped.

   POSITION. Centres as a percentage of the illustration box, from Sara's
   crop, cross-checked against design-01 page space (agreement is inside
   1.1% on every star both sources resolve):

     deck   left%   top%    feature                    ours before
      #1    70.37    9.34   metal roof                 61.3 / 13.3
      #2    89.47   20.16   upper right siding         94.3 / 41.3
      #3    17.06   21.90   exposed wall panel         35.3 / 23.3
      #4    70.44   46.25   painted side wall          76.3 / 56.3
      #5    16.36   52.71   interior wall, lower       21.3 / 46.3
      #6    49.44   56.02   door frame                 50.3 / 41.3
      #7    26.33   79.49   cutaway floor              26.3 / 74.3
      #8    66.78   80.02   porch deck                 53.3 / 81.3

   MAPPING IS UNCHANGED. Every panel still opens on the feature it names:
   roofing on the roof, siding on the exposed wall panel (the cutaway's
   LP/T1-11 sheathing is exactly what that panel is about), colours on the
   painted side wall, loft/shelves on the interior wall, flooring on the
   cutaway floor, windows-and-doors on the door frame, add-on packages on
   the porch, "many more options" on the upper right siding by the
   shutters. Nothing was re-pointed, so no copy changes ride with this.

   The stars now carry translate(-50%,-50%) so top/left ARE the centres
   above and stay correct at any dot size. The hover lift lives on
   .ohb2-anat-dot, so it does not collide with this transform.
   --------------------------------------------------------------------- */
.ohb2-anatomy-img-wrap .ohb2-anat-star {
    width: 5.7%;
    height: auto;
    aspect-ratio: 1;
    min-width: 22px;
    transform: translate(-50%, -50%);
}
.ohb2-anatomy-img-wrap .ohb2-anat-dot {
    width: 100%;
    height: 100%;
}
.ohb2-anatomy-img-wrap .ohb2-anat-dot img {
    width: 55%;
    height: auto;
}
.ohb2-anatomy-img-wrap .ohb2-anat-star-1 { top: 80.02%; left: 66.78%; }
.ohb2-anatomy-img-wrap .ohb2-anat-star-2 { top: 46.25%; left: 70.44%; }
.ohb2-anatomy-img-wrap .ohb2-anat-star-3 { top:  9.34%; left: 70.37%; }
.ohb2-anatomy-img-wrap .ohb2-anat-star-4 { top: 21.90%; left: 17.06%; }
.ohb2-anatomy-img-wrap .ohb2-anat-star-5 { top: 79.49%; left: 26.33%; }
.ohb2-anatomy-img-wrap .ohb2-anat-star-6 { top: 56.02%; left: 49.44%; }
.ohb2-anatomy-img-wrap .ohb2-anat-star-7 { top: 52.71%; left: 16.36%; }
.ohb2-anatomy-img-wrap .ohb2-anat-star-8 { top: 20.16%; left: 89.47%; }

/* The two star bullets flanking "HOVER OVER THE STARS…" are the same
   circle at a smaller draw: 40px on the deck's 1.39x crop scale = 29px,
   the same as the cutaway stars. They were 34px. */
.ohb2-stars-cta-text::before,
.ohb2-stars-cta-text::after {
    width: 29px;
    height: 29px;
    background-size: 16px 16px;
}

@media (max-width: 900px) {
    /* Ratio deliberately not honoured — 5.7% of the 358px mobile
       illustration is 20px, below a usable touch target. */
    .ohb2-anatomy-img-wrap .ohb2-anat-star { width: 30px; min-width: 0; }
    .ohb2-stars-cta-text::before,
    .ohb2-stars-cta-text::after { width: 26px; height: 26px; background-size: 14px 14px; }
}


/* ---------------------------------------------------------------------
   (5) ADD-ON PACKAGES COLUMN — it was being stretched, and the oval was
   half again too big.

   Sara: "the button and paragraph should not be pushing so far down".
   Measured live: the panel column ended at y3075.6 and BUILD IT NOW
   started at y3141.5 — a 66px hole. Cause: .ohb2-anatomy-widget is a
   grid whose cutaway spans BOTH rows ('img panel' / 'img cta'), so the
   cutaway's height was distributed across the two auto rows and the CTA
   row was pushed down by the surplus. align-items:start could not help;
   it aligns items inside rows, and it was the ROWS that were stretched.
   Fixed by making row 1 max-content and row 2 the 1fr that absorbs the
   surplus, with the callout pinned to the top of its row.

   The deck's own column, in page space (design-01, cross-checked against
   Sara's crop at 1.391x — the two agree to a pixel on the oval and the
   button):

     column width           313    (ours 309)
     oval                   254 x 155, aspect 1.639   (ours 309 x 206, 3/2)
     oval -> heading         20
     heading                 33 tall, ~34px           (ours 34px, correct)
     heading -> paragraph    13                       (ours 14, correct)
     paragraph               6 lines, 19.4px pitch    (ours 16/19.6, correct)
     paragraph -> button     26                       (ours 66, the bug)
     button                 284 x 60                  (ours 282 x 58, correct)
     column total height    419  against a 411 cutaway — balanced by
                                 content in the deck, not by stretching.

   So only three things were actually wrong: the oval, the 24px of dead
   padding above it, and the stretch. The type and the button were already
   right and are not touched.

   The widget's split also goes to the deck's: cutaway 512 / gutter 28 /
   column 313 inside an 852 widget = 60% / 28px, against 58% / 48px.
   --------------------------------------------------------------------- */
.ohb2-anatomy-widget {
    grid-template-columns: 60% 1fr;
    grid-template-rows: max-content 1fr;
    column-gap: 28px;
    /* the widget still carried a 48px `gap` shorthand, so the CTA row was
       being pushed a further 48px down on top of the stretch. */
    row-gap: 0;
}
.ohb2-anatomy-panels {
    padding-top: 0;
}
.ohb2-anatomy-panels::before {
    max-width: 254px;
    aspect-ratio: 254 / 155;
    margin: 0 auto 20px;
}
.ohb2-addon-callout {
    align-self: start;
    margin: 26px 0 0;
}
@media screen and (max-width: 900px) {
    /* the single-column stack is set further up this file; restate the
       column here because this block loads after it and a 60%/1fr leak
       would squeeze the whole widget to 60% of the phone. */
    .ohb2-anatomy-widget {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .ohb2-addon-callout { margin: 0; }
    .ohb2-anatomy-panels::before { max-width: 254px; }
}


/* ---------------------------------------------------------------------
   (6) FOOTER — the deck spreads the three blocks across the whole
   content column.

   design-01's footer, in page space: the address block starts on the
   column's left guide (x 261 against the guide at 260); the OHB
   AUTHORIZED DEALER lockup is centred on the column (its centre lands at
   x 720 against the column's own centre of 721); and BUSINESS HOURS is a
   left-aligned block pushed flush to the RIGHT guide — its longest line,
   "Wednesday: 8AM – 4:30PM", ends at x 1179 against the guide at 1182.

   The theme ran three equal 286.7px columns with a 40px gap, all
   text-align:start, so the hours sat ~170px short of the right edge and
   the logo column's centre was not the column's centre. Now the outer
   blocks shrink to their content and the centre block takes the slack,
   which puts the logo within a few px of the true centre exactly as the
   deck draws it. The hours keep left-aligned lines — the deck does not
   right-align them, it right-aligns the BLOCK.

   Mobile is untouched: it still wraps and centres below 900px.
   --------------------------------------------------------------------- */
.ohb2-footer-inner {
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: flex-start;
}
/* Outer blocks take an equal share so the centre lockup is centred on the
   column itself, not on whatever is left over: the address block is wider
   than the hours block, and letting the centre absorb the slack put the
   logo 31px right of centre. The hours block is a grid whose single track
   is pushed to the end of its column while its rows stay left-aligned,
   which is exactly what the deck draws — a left-aligned block flush to
   the right guide, not right-aligned text. */
.ohb2-footer-inner > .ohb2-footer-col {
    flex: 1 1 0;
    min-width: 0;
}
.ohb2-footer-inner > .ohb2-footer-col-center {
    flex: 0 0 auto;
    align-items: center;
    text-align: center;
}
.ohb2-footer-inner > .ohb2-footer-col:last-child {
    display: grid;
    justify-content: end;
    justify-items: start;
    align-content: start;
}
@media screen and (max-width: 900px) {
    .ohb2-footer-inner { flex-wrap: wrap; justify-content: center; }
    .ohb2-footer-inner > .ohb2-footer-col { flex: 1 1 240px; }
}


/* ---------------------------------------------------------------------
   (7) NAV — no sliver between two filled items.

   .ohb2-nav-menu ran justify-content: space-between across the 940px
   column, which parks 8.6px of bare grey between every pair of anchors
   (measured: 8.6 / 8.5 / 8.7 / 8.6 / 8.6 / 8.7 / 8.6). Invisible while
   only one item is filled — which is all the deck ever draws — but the
   moment a hovered item sits beside the active one you get the grey
   sliver between two navy blocks that Sara screenshotted.

   The same total width is now distributed INTO the items instead of
   between them, so neighbouring fills touch. Each item grows by the same
   ~7.5px, so the labels keep their relative rhythm.

   TYPE — checked, not changed. The deck's nav labels measure 15px of ink
   (ascender to descender, i.e. ~15.6px type) and "Inventory" sets 65px
   wide; the theme renders Roboto 700 title case at 16px with "Inventory"
   at 67.5px. Family, weight, case, tracking and size already match, so
   nothing was altered. The bar's own colours match too: #DBD9D9 bar with
   #1A567A fills, exactly the deck's treatment. The one real difference is
   bar HEIGHT — 44px drawn against our 58px — left alone as out of scope
   and noted for Sara.
   --------------------------------------------------------------------- */
.ohb2-nav-bar-inner .ohb2-nav-menu {
    justify-content: flex-start;
}
.ohb2-nav-bar-inner .ohb2-nav-menu > li {
    flex: 1 1 auto;
}
.ohb2-nav-bar-inner .ohb2-nav-menu > li > a {
    justify-content: center;
    width: 100%;
}
@media screen and (max-width: 900px) {
    .ohb2-nav-bar-inner .ohb2-nav-menu > li { flex: 1 1 100%; }
    .ohb2-nav-bar-inner .ohb2-nav-menu > li > a { justify-content: flex-start; }
}


/* ---------------------------------------------------------------------
   (8) CARD PHOTOS — back to a cropped square. Sara, 2026-09-01:
   "keep the listing images cropped to a square since they are like that
   on ohb, and keep the full images in the slider on the detail page like
   you have it."

   So the no-crop policy this morning applied to all four dealer-photo
   surfaces now splits in two, deliberately:

     CARDS  (inventory listing + home featured) — cover-crop inside the
            square 1.028:1 frame the deck draws. Matches how the live
            oldhickorybuildings.com presents card thumbnails.
     DETAIL (main image + gallery thumbs + video tile) — UNCHANGED:
            contained, whole photo, white field. Do not re-crop these.

   The frames keep their fixed aspect ratio either way; that is what holds
   the card rows level regardless of what the dealer uploaded. The white
   field stays declared on the card frames too — it simply stops showing
   through now that the photo covers it.
   --------------------------------------------------------------------- */
.ohb2-inv-card-photo img,
.ohb2-building-card .ohb2-card-thumb img {
    object-fit: cover !important;
    object-position: center;
}


/* =====================================================================
   PASS 2026-09-01 (vi) — Sara's evening round, second batch.
   ===================================================================== */


/* ---------------------------------------------------------------------
   (9) CATEGORY PAGES — no blue rule under the nav either.

   Same treatment as the home page, and for the same reason: these pages
   open on a full-bleed hero collage that meets the nav bar, so the 18px
   navy rule reads as an extra blue band rather than as the interior
   pages' closing rule. Sara flagged the gap on the buildings pages.
   design-04 draws the collage sitting directly on the navy field with no
   separate rule above it.

   The class is set by the five pages that run the catalog template:
   lofted barns, shed add-on packages, specialty buildings, space for your
   animals, shed upgrades. Pages that open on white content (about,
   contact, rent-to-own, warranty, privacy, inventory, detail) keep the
   rule the deck does draw for them.
   --------------------------------------------------------------------- */
.ohb2-body.ohb2-catalog-page .ohb2-nav-bar {
    border-bottom: 0;
}


/* ---------------------------------------------------------------------
   (10) BROCHURE HEADING — two lines, as drawn.

   Sara's screenshot showed the heading breaking mid-word into three lines
   with the button crowded beside it. Measured across ten viewport widths
   on all six surfaces the block renders on: nothing overflows anywhere —
   the fault is that the heading wraps.

   "Download a Mobile-friendly" needs 420.1px at the shipped 34px; the
   text column measures 416px at 1440 and 376px at a 940 viewport. So it
   was over by 4px at the widest and by 44px at the stack point, and the
   explicit <br> then made three lines instead of two. It was marginal
   from the day it shipped rather than wrong at one width, which is why
   the earlier sweep at 1440 alone did not catch it.

   Two changes, both proportional so this cannot recur at an odd width:
     - the device column goes from a hard 484px to 49% of the row, so the
       text column grows with the container instead of taking whatever is
       left over (403px at the 900px inner, 423px at 940);
     - the heading comes down 34 -> 32px, which sets line one at 395px and
       leaves 5-7% of slack at every width in the sweep.

   The contact page runs its own wider device (520px) and a 364px text
   column, so it takes 28px on the same arithmetic.
   --------------------------------------------------------------------- */
.ohb2-brochure-block .ohb2-brochure-device {
    flex: 0 1 49%;
    max-width: 49%;
    min-width: 0;
}
.ohb2-brochure-block .ohb2-brochure-text-wrap {
    min-width: 0;
}
.ohb2-brochure-block .ohb2-brochure-text-wrap h3 {
    font-size: 32px;
}
body.ohb2-contact-page .ohb2-brochure-block .ohb2-brochure-text-wrap h3 {
    font-size: 28px;
}


/* ---------------------------------------------------------------------
   (11) DETAIL GALLERY — no light frame line, and no video tile.

   Sara: remove the light border around the images, and remove the video
   player tile entirely ("that would only be for videos which we haven't
   integrated yet"). The tile is deleted from the blade rather than hidden
   so nothing renders a play badge over a still. This also settles the
   earlier open item about the placeholder delivery-video destination on
   this surface: there is no video affordance on the detail page at all.

   The thumbnails keep a 2px border box so the strip does not reflow when
   the active thumb is selected — the inactive colour just goes
   transparent. The active thumb keeps its navy ring, which is the
   selection affordance and is what the deck draws.
   --------------------------------------------------------------------- */
.ohb2-bldg-gallery .ohb2-gallery-main {
    border: 0;
}
.ohb2-bldg-gallery .ohb2-gallery-thumb {
    border-color: transparent;
}
.ohb2-bldg-gallery .ohb2-gallery-thumb--active {
    border-color: #1A567A;
}


/* ---------------------------------------------------------------------
   (12) DETAIL FORM BAND — the heading's air, balanced.

   Measured on our own render at 1440: 44px of navy above the heading's
   ink and 62px below it before the field row. The heading carried a
   15px bottom padding inherited from the generic heading rules on top of
   its own 26px margin. Dropping the padding and trimming the margin to
   23px takes the lower gap to 44px, so the heading sits evenly between
   the band's top edge and the fields.

   NOTE for Sara on the same screenshot: the second field is NOT a
   duplicate "First Name*". Both the blade and the served HTML read
   name='lastName' placeholder='Last Name*', and our own capture of that
   band renders "Last Name*". Nothing was changed — what you are seeing
   is browser-side (autofill/extension overlay or a cached render).
   --------------------------------------------------------------------- */
.ohb2-bldg-question-section .ohb2-section-heading {
    padding-bottom: 0;
    margin-bottom: 23px;
}


/* ---------------------------------------------------------------------
   (13) INVENTORY PARAGRAPHS — the leading, not the size.

   Sara asked about the inventory page's paragraph type. Measured on
   design-02 in page space, the intro paragraph sets three lines at
   y381-397, y401-416, y420-436: ink 15-16px tall on a 19.3px pitch.
   Roboto's ascender-to-descender is 0.96em, so 15.5 / 0.96 = 16.1px —
   the theme's 16px is already the drawn SIZE. What is wrong is the
   LEADING: the theme runs 24px (1.5) against the deck's 19.3 (1.21).

   Shipped 1.22 on the inventory page's prose.

   FLAG for Sara: this is the same gap the audit logged theme-wide
   (~1.6 shipped against ~1.3 drawn). It is corrected HERE only, because
   that global rollout is still a flagged decision. Say the word and the
   same 1.22-1.3 goes everywhere.
   --------------------------------------------------------------------- */
.ohb2-inventory-page .ohb2-inv-intro-copy,
.ohb2-inventory-page .ohb2-inv-intro p {
    font-size: 16px;
    line-height: 1.22;
}


/* ---------------------------------------------------------------------
   (14) 3D BUILDER BAND — the right column lines up with the photo.

   Measured before: the tablet photo runs y3302.7..3570.8 and the right
   column y3302.7..3587.5, so the heading tops agreed exactly (0.0px) but
   the gold button's bottom sat 16.6px BELOW the photo's.

   The heading is NOT the thing to cut: design-03 draws it at 30px and
   that is what the theme already renders. The surplus is in the
   paragraph, which is longer than the deck's and was set at 1.45 leading
   against the ~1.2 the deck uses for body copy (see (13) above). Taking
   its seven lines from 21.75px to 19.2px recovers 17.9px, which is the
   whole overhang, so nothing else has to give.
   --------------------------------------------------------------------- */
.ohb2-builder-cta-right p {
    line-height: 1.28;
}


/* ---------------------------------------------------------------------
   (15) RENT-TO-OWN "LEARN MORE" — matched to the standard navy CTA.

   Measured before: LEARN MORE rendered 225.7 x 57.6 at 24px on the detail
   page and 342 x 53.6 at 24px on the catalog pages, left-aligned in its
   column; SEE IT IN ACTION beside it is 346 x 58 at 20px. Two different
   sizes for the same class of button on the same screen.

   Unified to the SEE IT IN ACTION metrics — 20px type, 17px/20px padding,
   the 342px standard width — and centred under the paragraph on both
   surfaces. Width is capped at 100% so it still fits a phone.
   --------------------------------------------------------------------- */
.ohb2-rto-text .ohb2-btn-blue,
.ohb2-cat-rto-text .ohb2-btn-blue {
    display: flex;
    width: 342px;
    max-width: 100%;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.2;
    padding: 17px 20px;
    text-align: center;
}

/* --- (10) round 2, two residuals the width sweep turned up ------------------

   (a) The CONTACT page runs its own hard 520px device, so at a 940 viewport
   its text column fell to 324px and the heading went back to three lines —
   the only cell left flagged in the sweep. Its device goes proportional too,
   at the 53% its 520/940 already works out to, so the column now measures
   367px at the 900 inner and 386px at 940 against the 346px the heading
   needs at 28px.

   (b) The CATALOG brochure device measured ZERO WIDTH at 768/820/900. Its
   `flex: none` at that breakpoint leaves the div shrink-to-fit, while its
   img is `width: 126.4%` — a percentage of the parent the parent is being
   sized from. Circular, resolves to 0, and the artwork simply did not
   render on tablet and phone. Exactly the same failure the morning pass
   found on the home-page block; it was never fixed in this file. The device
   now takes the full row at that breakpoint instead of shrink-wrapping.
   --------------------------------------------------------------------- */
body.ohb2-contact-page .ohb2-brochure-block .ohb2-brochure-device {
    flex: 0 1 53%;
    max-width: 53%;
    min-width: 0;
}
@media screen and (max-width: 900px) {
    body.ohb2-contact-page .ohb2-brochure-block .ohb2-brochure-device {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


/* ---------------------------------------------------------------------
   (17) INVENTORY PROMO ROW — design-02's own composition.

   Sara: the inventory page's bottom sections should follow design-02
   rather than repeat the home page's. The deck draws, between the
   Popular Designs rail and Rent-to-Own, a single two-up row —
   brochure on the left, FREE Shed Delivery on the right — each pane
   heading over image over button, with the two buttons on one baseline.
   The home page's SHOP NOW pane is absent there, which is right: on the
   inventory page it links to the page you are already on. The standalone
   brochure band is absent too.

   Measured off Sara's design-02 crop, scaled into page space on the card
   row above it (crop x88..1028 == the column's 258..1182, k = 0.983):

     pane width            ~440 each     gutter ~49
     heading               2 lines, ~78px of ink, blue, bold
     heading -> image      23
     brochure device       439 x 232  (asset is 900x474, so contain)
     delivery photo        437 x 227, navy border, rounded
     image -> button       26
     buttons               346 x 59  — the same standard navy CTA as
                           SEE IT IN ACTION and the unified LEARN MORE
     pane total height     ~418

   The panes stretch to equal height and the button takes margin-top:auto
   so the baseline holds even when one heading wraps differently.
   --------------------------------------------------------------------- */
.ohb2-promo-duo-inv {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 49px;
    max-width: var(--ohb2-col-gutter);
    margin: 0 auto;
    padding: 0 20px;
}
.ohb2-promo-duo-inv .ohb2-promo-pane-inv {
    flex: 1 1 0;
    min-width: 0;
    /* the base pane carries 20px of side padding, which held the artwork to
       91% of the pane against the deck's 99.8%. The row supplies its own
       gutter, so the pane does not need one. */
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
}
.ohb2-promo-duo-inv .ohb2-promo-pane-inv h3 {
    order: 0;
    font-size: 32px;
    line-height: 1.22;
    color: #1A567A;
    font-weight: 700;
    margin: 0 0 23px;
    padding: 0;
}
.ohb2-promo-duo-inv .ohb2-promo-pane-img {
    order: 1;
    width: 100%;
    aspect-ratio: 439 / 232;
    margin: 0 0 26px;
}
.ohb2-promo-duo-inv .ohb2-promo-pane-framed {
    border: 4px solid #1A567A;
    border-radius: 16px;
    box-sizing: border-box;
}
/* Only the delivery PHOTO is framed. design-02 draws the brochure device
   loose on white; the pane inherits a frame from the home-page promo rule,
   so it is cleared here. */
.ohb2-promo-duo-inv .ohb2-promo-pane-device {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    /* #38 (Mike): "Would be good if this image filled the space a little
       more." brochure-device-mockup.jpg carries its padding as baked-in
       white, so `background-size: contain` -- which the inline style sets --
       drew the laptop-and-phone at only ~77% of the slot width.

       The first pass over-scaled to 126.4% and left the position centred.
       That clipped the PHONE off the right at every width, because the
       asset's white margin is NOT symmetric: measured on the 900x474 file,
       the drawn artwork runs x=104..823, i.e. 104px (11.556%) of white on
       the left but only 76px (8.444%) on the right. Centring splits a 26.4%
       over-scale into 13.2% a side, and the right margin only has 8.44% to
       give, so 2.39% of the slot ate into the phone.

       Fix is scale + position, not scale alone:
         drawn artwork = 720/900 = exactly 80% of the asset's width.
         At 120%, artwork = 0.8 x 1.20 = 96% of the slot -> 2% clear a side.
         background-position-x p offsets by p x (slot - image), so for a 2%
         left gap: -0.20p + 0.115556 x 1.20 = 0.02  ->  p = 59.33%.
       Vertically the artwork runs y=64..423 (64px white top, 50px bottom),
       so it is 75.949% of the asset's height; at 120% that is 48% of the
       slot width against a 50.63% tall slot (aspect-ratio 476/241), leaving
       1.315% a side -> background-position-y 57.43% centres it. The 439/232
       slot used by the bottom-stack copy of this row is taller still, so it
       clears there too.

       2% was chosen over an exact fit deliberately: exact fit leaves zero
       tolerance, which is how this clipped twice. It holds ~4.5px on the
       tightest edge at the narrowest slot and still fills 96% of the width.
       !important because size and position are both declared inline. */
    overflow: hidden;
    background-size: 120% auto !important;
    background-position: 59.33% 57.43% !important;
}
.ohb2-promo-duo-inv .ohb2-promo-pane-inv .ohb2-btn-blue {
    order: 2;
    margin-top: auto;
    display: flex;
    width: 346px;
    max-width: 100%;
    font-size: 20px;
    line-height: 1.2;
    padding: 17px 20px;
    text-align: center;
}
@media screen and (max-width: 900px) {
    .ohb2-promo-duo-inv {
        flex-wrap: wrap;
        gap: 34px;
    }
    .ohb2-promo-duo-inv .ohb2-promo-pane-inv { flex: 1 1 100%; }
    .ohb2-promo-duo-inv .ohb2-promo-pane-inv h3 { font-size: 24px; margin-bottom: 18px; }
    .ohb2-promo-duo-inv .ohb2-promo-pane-img { margin-bottom: 20px; }
}

/* 2026-09-21 (Mike): the brochure artwork is cut off along the bottom on a
   phone, 361px up to 700px. Nothing to do with the crop — it is the stacking
   mechanism, and the row was being stacked TWICE by two different means:

     - 701..900px  the rule above wraps the row: flex-wrap:wrap with the panes
                   at flex:1 1 100%, so each pane takes a line of its own. The
                   main axis is still horizontal, so 100% is 100% of the WIDTH
                   and nothing constrains a pane's height. Correct here.
     - up to 700px .ohb2-promo-duo also turns the row into flex-direction:column
                   (the shared mobile rule, this file, section 13). Now the main
                   axis is vertical, so the panes' flex:1 1 100% basis is 100% of
                   the SECTION's height and they become shrinkable in height.
                   The photo pane sizes itself from aspect-ratio, so it is the
                   thing that gives: measured, it collapsed to a fixed 175.17px
                   at every width from 361 to 700 while the slot kept getting
                   wider (560x175 at 600px wide), and background-size:120% then
                   overflowed the short slot by 55px top and 38px bottom.

   So the fix is to stop stacking it a second way, not to re-crop the artwork:
   below 700px the -inv row keeps the SAME wrap-stacking it already uses from
   701 to 900. Panes still stack, one per line, with the same 34px gap.
   Measured after, 361..700 in 10px steps: the slot is its aspect-ratio height
   at every width (321x162.5 at 361, 660x334.2 at 700), the drawn artwork clears
   every edge, the section height tracks its content instead of sitting frozen
   at 746px, and there is no horizontal overflow. As a bonus the panes stop
   overhanging the section's own 20px side padding by 25px, which column mode
   was doing.

   Scoped to .ohb2-promo-duo-inv only: the plain .ohb2-promo-duo on home and
   contact has no percentage basis, so column stacking is fine there and is
   left alone. Two class names, (0,2,0), so it beats the shared rule wherever
   the files load. Revert = delete this block. */
@media screen and (max-width: 700px) {
    .ohb2-promo-duo.ohb2-promo-duo-inv { flex-direction: row; }
}

/* =====================================================================
   PASS 2026-09-01 (18) — THE NAVY FORM BANDS GET ONE MEASURED RHYTHM

   Sara, on three separate shots of the demo: too much air around the
   headings in the quote band, an oversized gap under the Rent-to-Own
   subtitle, and "across the site please have more space under the
   contact form section" -- the bands stop just under the call line.

   So all of them are set to ONE rhythm, taken off the band the deck
   actually draws (design-11, the shared quote band) with
   measure-formband.py, in the usual page-space convention where design
   px == CSS px. Band-relative, ink to ink:

       top padding -> title ink        75
       title ink                       38
       title -> field row              11
       field row                       42
       fields -> subtitle              17
       subtitle ink                    24
       subtitle -> body block          13
       body block                     265
       body -> button                  19
       gold button                334 x 52
       button -> call line             16
       call line ink                   30
       call line -> band bottom        73

   Top 75 and bottom 73: the deck pads these bands symmetrically, which
   is exactly the complaint -- ours ran 48/48 and 48/50.

   Box values below are those ink numbers less each element's own
   half-leading and cap offset, so what lands on screen is the drawn
   gap and not the drawn gap plus a line box. The rules carry
   !important because ohb2-catalog.css and ohb2-pages.css both load
   after this file and both set margins on these same elements.

   The RTO band's own copy of the rhythm lives at the end of
   ohb2-pages.css, which is the only file that can win against the
   !important padding-top it already sets there.
   ===================================================================== */
.ohb2-quote-section,
.ohb2-bldg-question-section {
    padding-top: 66px !important;
    padding-bottom: 72px !important;
}
.ohb2-quote-section .ohb2-section-heading,
.ohb2-bldg-question-section .ohb2-section-heading {
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
}
/* frontend.css pads every form.simple by 15px; inside these bands the
   rhythm is set by the elements, not by a wrapper. */
.ohb2-quote-section form.simple,
.ohb2-bldg-question-section form.simple {
    padding: 0 15px !important;
}
.ohb2-quote-section .ohb2-form-row-quad {
    margin-bottom: 0 !important;
}
.ohb2-quote-section .ohb2-quote-prompt {
    padding: 0 !important;
    margin: 11px 0 12px !important;
}
.ohb2-quote-section .ohb2-quote-cols {
    margin-bottom: 0 !important;
}
.ohb2-quote-section .ohb2-quote-submit-wrap {
    margin-top: 19px !important;
}
/* The call line's own 20px bottom margin escaped the form and pushed the
   band 20px past its padding, so the measured 72 read as 92. */
.ohb2-quote-section .ohb2-quote-submit-wrap .ohb2-quote-subheading {
    margin: 10px 0 0 !important;
}
.ohb2-bldg-question-section .ohb2-bldg-form-row {
    margin-bottom: 13px !important;
}
.ohb2-bldg-question-section form.simple textarea {
    margin-bottom: 19px !important;
}

@media screen and (max-width: 700px) {
    .ohb2-quote-section,
    .ohb2-bldg-question-section {
        padding-top: 40px !important;
        padding-bottom: 44px !important;
    }
}

/* =====================================================================
   PASS 2026-09-01 (19) — THE HOT-SPOT PANEL AREA STOPS RESIZING

   Sara: selecting a different star "makes the section popup" -- the eight
   panels carry different amounts of copy, only the active one was in flow
   (`display: none` / `display: block`), so the column, the brand band and
   everything below it moved every time the pointer crossed a star.
   Measured on the live page, hovering all eight in turn at 1440: the band
   took four different heights, 1318 / 1338 / 1378 / 1400, and the document
   four, 5526 / 5546 / 5587 / 5608. On a phone, two.

   Rather than freeze a magic min-height that would be wrong at the next
   viewport, all eight panels now sit in the SAME grid cell, so the cell is
   intrinsically as tall as the tallest panel AT WHATEVER WIDTH -- 1440,
   390 or anything between -- with no number to maintain. The inactive ones
   are `visibility: hidden` rather than `display: none`, which keeps them
   out of the accessibility tree and off the pointer while still counting
   for layout. `align-self: start` top-anchors the copy, as drawn.
   ===================================================================== */
.ohb2-anatomy-panels {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
}
.ohb2-anatomy-panels::before {
    grid-row: 1;
    grid-column: 1;
}
.ohb2-anat-panel,
.ohb2-anat-panel-active {
    display: block;
    grid-row: 2;
    grid-column: 1;
    align-self: start;
}
.ohb2-anat-panel {
    visibility: hidden;
}
.ohb2-anat-panel-active {
    visibility: visible;
}

/* =====================================================================
   PASS 2026-09-01 (20) — HEADER: the call/phone/social cluster goes back
   to the top-right corner the deck draws

   Sara: the contact block renders as a big centred stack on its own navy
   band, detached from the rest of the header. Swept every width to find
   where: at 390 the row wraps and the cluster drops under the logo into a
   201px band -- that is her screenshot -- and from 480 to 767 the inner
   row was explicitly `justify-content: center`, so even side by side the
   logo was not at the left edge and the cluster was not at the right.

   design-01's header, measured in page-space (design px == CSS px):

       band                  119 tall, 18 above the logo, 12 below
       logo                  260..396, 89 tall
       "Call Us Today!"      ink 19..37   (18 tall -> 19px type)
       phone                 ink 42..65   (23 tall -> 24px type)
       socials               ink 74..107  (two 28px marks, 11 gap)
       cluster block         right edge 1182 = the content column edge,
                             the three lines centred on each other

   So: a compact centred stack pinned to the right of the column, next to
   the logo -- never a full-width band of its own. Ours ran a 30px phone
   in a 153px band, which is the "oversized" Sara flagged.

   The cluster now stays beside the logo at EVERY width down to 390 by
   stepping the logo and the type down below 700 rather than by wrapping:
   at 390 the pair measures 305px inside a 358px row, so there is nothing
   left to wrap. The two `justify-content: center` overrides that fought
   the space-between go with it.
   ===================================================================== */
.ohb2-header-combined {
    padding: 18px 20px 12px;
}
.ohb2-header-combined-inner {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
}
.ohb2-hdr-logo img {
    max-height: 89px;
}
.ohb2-hdr-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex: 0 0 auto;
}
.ohb2-hdr-call {
    align-items: center;
    gap: 0;
}
.ohb2-hdr-call-label {
    font-size: 19px;
}
.ohb2-hdr-phone {
    font-size: 24px;
}
.ohb2-hdr-social {
    gap: 11px;
}
.ohb2-hdr-social img {
    width: 28px;
    height: 28px;
}

@media screen and (max-width: 1100px) {
    .ohb2-hdr-logo img { max-height: 82px; }
    .ohb2-hdr-phone { font-size: 22px; }
}

@media screen and (max-width: 900px) {
    .ohb2-header-combined { padding: 14px 20px 10px; }
    .ohb2-hdr-logo img { max-height: 70px; }
    .ohb2-hdr-call-label { font-size: 16px; }
    .ohb2-hdr-phone { font-size: 20px; }
    .ohb2-hdr-social img { width: 24px; height: 24px; }
}

/* Below 700 the pair still sits side by side -- the logo and the type step
   down instead of the row wrapping, so the band stays ~90px rather than
   the 201px stack. */
@media screen and (max-width: 700px) {
    .ohb2-header-combined { padding: 12px 16px 10px; }
    .ohb2-header-combined-inner { justify-content: space-between; gap: 12px; }
    .ohb2-hdr-meta { align-items: flex-end; gap: 3px; }
    .ohb2-hdr-logo img { max-height: 56px; }
    .ohb2-hdr-call-label { font-size: 13px; }
    .ohb2-hdr-phone { font-size: 18px; }
    .ohb2-hdr-social { gap: 8px; }
    .ohb2-hdr-social img { width: 20px; height: 20px; }
}

@media screen and (max-width: 420px) {
    .ohb2-hdr-logo img { max-height: 48px; }
    .ohb2-hdr-call-label { font-size: 12px; }
    .ohb2-hdr-phone { font-size: 17px; }
}

/* =====================================================================
   PASS 2026-09-01 (21) — THE POPUPS TAKE ohb.com's MODAL LANGUAGE

   Sara supplied the reference herself: oldhickorybuildings.com's own
   "Contact Dealer" popup off its inventory cards. Her direction is that
   the demo's popups read like it but on a FLAT blue instead of ohb.com's
   textured navy. Nothing on ohb.com is touched -- this is the demo's
   presentation only.

   From the reference, adapted to our palette:
     - flat navy panel, generous padding, no texture
     - large gold centred title
     - small gold square X, top right
     - white rounded inputs in a two-up grid: First/Last, Email/Phone,
       State/Zip, then a full-width message box, placeholder-labelled
     - gold submit with a navy label, LEFT aligned under the message box,
       at the band-button size
     - the page stays visible behind a dim backdrop

   Both demo popups share it: the Contact Dealer popup (which had a white
   panel) and the brochure/pricing popup (which had no stylesheet at all --
   every rule was an inline style attribute, now lifted into these classes).
   Field names, actions, hidden fields and the JS that fills them are
   untouched; only presentation moved.

   The Fancybox chrome is scoped by `:not(.has-toolbar)`. Fancybox puts
   `has-toolbar` on the container for gallery/image sets and uses a
   `.f-button.is-close-btn` for inline content, so these rules reach the
   two modals and never the photo lightboxes, which keep their own dark
   backdrop and toolbar.
   ===================================================================== */
.ohb2-modal,
.fancybox__content.ohb2-modal {
    background: #1A567A;
    color: #fff;
    padding: 44px 46px 46px;
    max-width: 660px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
}

.ohb2-modal .ohb2-modal-title,
.ohb2-modal .ohb2-contact-popup-title {
    color: #E9BB52;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-transform: none;
    margin: 0 0 24px;
    padding: 0;
}

.ohb2-modal .ohb2-contact-popup-building {
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    font-size: 15px;
    margin: -14px 0 22px;
}

/* form.simple carries a 15px pad from frontend.css; the modal sets its own. */
.ohb2-modal .ohb2-modal-form {
    padding: 0;
    margin: 0;
}

.ohb2-modal .ohb2-modal-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.ohb2-modal .ohb2-modal-form input,
.ohb2-modal .ohb2-modal-form select,
.ohb2-modal .ohb2-modal-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    color: #1A1A1A;
    border: 1px solid #fff;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.3;
}
.ohb2-modal .ohb2-modal-form input::placeholder,
.ohb2-modal .ohb2-modal-form textarea::placeholder {
    color: #6B6B6B;
    opacity: 1;
}
.ohb2-modal .ohb2-modal-form select {
    color: #6B6B6B;
}
.ohb2-modal .ohb2-modal-form input:focus,
.ohb2-modal .ohb2-modal-form select:focus,
.ohb2-modal .ohb2-modal-form textarea:focus {
    outline: 2px solid #E9BB52;
    outline-offset: 1px;
}

.ohb2-modal .ohb2-modal-form .ohb2-modal-field-full {
    display: block;
    margin-bottom: 18px;
}

.ohb2-modal .ohb2-modal-form textarea {
    display: block;
    min-height: 150px;
    resize: vertical;
    margin-bottom: 24px;
}

.ohb2-modal .ohb2-modal-submit {
    text-align: center;
}
.ohb2-modal .ohb2-modal-submit .ohb2-btn-gold {
    display: inline-flex;
    width: auto;
    min-width: 0;
    background: #E9BB52;
    color: #1A567A;
    border: none;
    cursor: pointer;
    padding: 13px 34px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    border-radius: 7px;
}
.ohb2-modal .ohb2-modal-submit .ohb2-btn-gold:hover {
    background: #e0a820;
    color: #1A567A;
}

.ohb2-modal .form-submit-message {
    padding: 12px;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 4px;
}

/* ----- Fancybox chrome for the two inline modals only ----- */
.fancybox__container:not(.has-toolbar) .fancybox__backdrop {
    background: rgba(0, 0, 0, 0.55);
}
/* The default close is a thin grey glyph; the reference uses a small gold
   square. Fancybox's own SVG is hidden and the X is drawn as text. */
.fancybox__container:not(.has-toolbar) .f-button.is-close-btn {
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    background: #E9BB52;
    color: #1A567A;
    border-radius: 4px;
    opacity: 1;
}
.fancybox__container:not(.has-toolbar) .f-button.is-close-btn:hover {
    background: #e0a820;
}
.fancybox__container:not(.has-toolbar) .f-button.is-close-btn svg {
    display: none;
}
.fancybox__container:not(.has-toolbar) .f-button.is-close-btn::after {
    content: 'X';
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #1A567A;
}

@media screen and (max-width: 600px) {
    .ohb2-modal,
    .fancybox__content.ohb2-modal {
        padding: 40px 18px 24px;
    }
    .ohb2-modal .ohb2-modal-title,
    .ohb2-modal .ohb2-contact-popup-title {
        font-size: 26px;
        margin: 0 0 18px;
    }
    .ohb2-modal .ohb2-modal-row {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }
    .ohb2-modal .ohb2-modal-form input,
    .ohb2-modal .ohb2-modal-form select,
    .ohb2-modal .ohb2-modal-form textarea {
        padding: 12px 14px;
        font-size: 15px;
    }
    .ohb2-modal .ohb2-modal-form .ohb2-modal-field-full { margin-bottom: 12px; }
    .ohb2-modal .ohb2-modal-form textarea { min-height: 110px; margin-bottom: 18px; }
    .ohb2-modal .ohb2-modal-submit .ohb2-btn-gold {
        font-size: 19px;
        padding: 12px 26px;
    }
    .fancybox__container:not(.has-toolbar) .f-button.is-close-btn {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
    }
    .fancybox__container:not(.has-toolbar) .f-button.is-close-btn::after {
        font-size: 18px;
    }
}

/* ----- The delivery-film pop-up: a navy frame with the X in a title bar -----

   "See It In Action" (partials/_video-cta.blade.php) opens a YouTube slide,
   and a YouTube slide is a black rectangle on a 55%-black backdrop: on a dark
   hero shot there is nothing to tell the visitor where the page stops and the
   film starts. So the film gets a navy frame -- the same #1A567A the inline
   modals and the framed promo images use.

   Scoped to .has-youtube, which Fancybox puts on the slide for the film and
   never on the brochure/contact slides (has-html) or the photo lightboxes
   (has-image), so those are untouched.

   THE FRAME IS EVEN ON THREE SIDES AND GROWS A BAR ON THE FOURTH. Sara,
   Telegram 14091: "maybe we include the x in the blue and expand the blue so
   it fits the x". The gold X used to float above the frame's top-right corner,
   over the dimmed page, which read as a loose button rather than part of the
   panel. It now sits inside the navy, in a title bar across the top of the
   frame, and the bar is sized from the button rather than picked by eye:

       bar height = frame thickness + button height + frame thickness
       desktop:  10 + 42 + 10 = 62px        mobile:  8 + 34 + 8 = 50px

   so the gap above the X, the gap below it (down to the film) and its right
   inset all equal the side/bottom frame thickness, and the X can never touch
   the film. Left, right and bottom stay the even 10px (8px under 600px) that
   the previous pass settled on.

   WHY THE OUTER ASPECT-RATIO IS OVERRIDDEN. Fancybox sizes this box with
   `aspect-ratio: 1.77778/1; width: <px>; height: auto` inline and box-sizing
   is border-box, so 16:9 is held on the OUTER edge and padding comes out of
   the iframe -- which letterboxes the film inside its own frame, and gets
   worse the taller the padding, so a 62px bar would wreck it. Moving the ratio
   off the box and onto the iframe (`aspect-ratio: auto` on the content,
   `16/9` on the iframe, height auto) makes the box iframe + padding instead,
   so the bar costs the film nothing and the film stays exactly 16:9.

   `max-width: min(100%, ...)` is load-bearing in TWO ways; keep both terms:
     - `100%` is Fancybox's own rule. Fancybox measures the content to pick
       its width, so replacing that cap lets the box measure 936px at a 390px
       viewport. Overriding max-width without the min() breaks mobile.
     - the calc caps the stage by viewport HEIGHT so the whole panel, bar
       included, fits a short window. Content height = (W - 20) x 9/16 + 72
       (62 bar + 10 bottom); holding that inside 100vh - 8px (the slide's 4px
       top and bottom) gives W <= (100vh - 80px) x 16/9 + 20px, and the 84px
       below leaves 4px of slack for sub-pixel rounding. Mobile is the same sum
       with 50 + 8 and a 16px frame: W <= (100vh - 70px) x 16/9 + 16px.

   THE SLIDE PADDING GOES BACK TO 4px. Fancybox's own
   `.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn`
   reserves 40px above a slide whose close button hangs outside it; the
   previous pass raised that to 64/52px for the same reason. The X is inside
   the panel now, so none of that strip is needed, and reclaiming it is what
   lets a 1024x600 window take a bigger film than before. 4px is the vendor's
   own `.fancybox__slide` padding, so the panel sits centred with an even 4px
   top and bottom.
   The selector is 0-5-0 ON PURPOSE. That vendor rule is 0-4-0 and its
   stylesheet loads AFTER this file, so a 0-4-0 of our own ties and LOSES --
   which is what the previous pass's `.fancybox__slide.has-youtube` (0-2-0)
   did: its 64px never applied at desktop, the computed value was the vendor's
   40px the whole time. `:not(.has-toolbar)` is the guard the close-button
   rules above already use, and it holds in compact mode too, so this one rule
   covers both widths.

   RADIUS. 16px outer / 6px inner (concentric with the 10px sides); 12/4 under
   600px. 16px is not a new number: it is what .ohb2-promo-pane-img and
   .ohb2-promo-pane-framed already use for a navy frame round an image, and
   those sit on the same pages as this button. (The form modals' 4px is the
   radius of a text panel, not of a framed picture.) No box-shadow, because
   neither the promo frames nor .ohb2-modal has one.

   CLOSE BUTTON. Same gold square, same X, same 4px radius -- only the inset
   changes, from `bottom: calc(100% + 10px); right: 0` to `top/right: 10px`.
   It is a child of .fancybox__content, and for an absolutely positioned child
   those offsets are measured from the PADDING box, i.e. from the panel's outer
   edge (no border), so `10px` is 10px of navy, not 10px plus the padding.
   It is still inside the container, so the focus trap, Esc and the backdrop
   click are untouched. */
.fancybox__container:not(.has-toolbar) .fancybox__slide.has-youtube.has-close-btn {
    /* Nothing hangs above the panel any more -- back to the vendor's 4px.
       0-5-0 to beat Fancybox's own 0-4-0 40px has-close-btn reserve, which
       loads after this file and therefore wins any tie. */
    padding: 4px;
}
.fancybox__slide.has-youtube > .fancybox__content {
    background: #1A567A;
    padding: 62px 10px 10px;        /* 62 = 10 + 42 button + 10 */
    border-radius: 16px;
    aspect-ratio: auto !important;   /* beats Fancybox's inline ratio */
    height: auto !important;
    max-width: min(100%, calc((100vh - 84px) * 16 / 9 + 20px));
    display: block;
    overflow: visible;
}
.fancybox__slide.has-youtube > .fancybox__content > .fancybox__iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 6px;             /* 16 - 10, concentric with the frame */
}
.fancybox__container:not(.has-toolbar) .fancybox__slide.has-youtube .f-button.is-close-btn {
    top: 10px;                      /* = the side frame, so the bar reads even */
    right: 10px;
    bottom: auto;
}

@media screen and (max-width: 600px) {
    /* A 10px frame is a 5% bite out of a 380px-wide stage, and the close
       button is 34px here, so both come down a notch. Radius stays
       concentric: 12 outer - 8 frame = 4 inner. */
    .fancybox__slide.has-youtube > .fancybox__content {
        padding: 50px 8px 8px;      /* 50 = 8 + 34 button + 8 */
        border-radius: 12px;
        max-width: min(100%, calc((100vh - 70px) * 16 / 9 + 16px));
    }
    .fancybox__slide.has-youtube > .fancybox__content > .fancybox__iframe {
        border-radius: 4px;
    }
    .fancybox__container:not(.has-toolbar) .fancybox__slide.has-youtube .f-button.is-close-btn {
        top: 8px;
        right: 8px;
        bottom: auto;
    }
}

/* =====================================================================
   PASS 2026-09-01 (22) — FEATURED INVENTORY: the drawn slider works

   design-01 draws this section with a chevron either side of the three
   cards and a row of five paging dots under them. Ours was a static
   `$featured->take(3)` with no chevrons and no dots at all.

   Stock BD's own featured section (public/home.blade.php) already has the
   behaviour: MORE than three featured buildings makes it a flexslider,
   three or fewer leaves it a static row. This is a reskin, so that trigger
   and those flexslider options are taken as they are and only the chrome
   is styled to the deck.

   Chevrons: the same drawn glyph the catalog gallery uses -- a bare grey
   chevron, no button chrome -- sitting just outside the card row, moving
   inside it below 1060 where the wrap runs out of margin.
   Dots: 8px, light grey, navy when current, centred under the row.
   ===================================================================== */
.ohb2-featured-slider {
    position: relative;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}
.ohb2-featured-slider .slides {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ohb2-featured-slider .slides > li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}
.ohb2-featured-slider .slides > li::before {
    content: none;
}
.ohb2-featured-slider .ohb2-building-card {
    height: 100%;
}
.ohb2-featured-slider .flex-viewport {
    overflow: hidden;
}

/* ----- chevrons ----- */
.ohb2-featured-slider .flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ohb2-featured-slider .flex-direction-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ohb2-featured-slider .flex-direction-nav a {
    position: absolute;
    top: 40%;
    z-index: 3;
    display: block;
    width: 26px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #555;
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    text-shadow: none;
    opacity: 1;
    cursor: pointer;
}
.ohb2-featured-slider .flex-direction-nav a:hover { color: #1A567A; }
.ohb2-featured-slider .flex-direction-nav a::before,
.ohb2-featured-slider .flex-direction-nav a::after {
    content: '';
}
.ohb2-featured-slider .flex-direction-nav a::before {
    display: block;
    width: 20px;
    height: 20px;
    border-top: 5px solid currentColor;
    border-right: 5px solid currentColor;
}
.ohb2-featured-slider .flex-direction-nav .flex-prev {
    left: -34px;
}
.ohb2-featured-slider .flex-direction-nav .flex-next {
    right: -34px;
}
.ohb2-featured-slider .flex-direction-nav .flex-prev::before {
    transform: rotate(-135deg);
    margin-left: 6px;
}
.ohb2-featured-slider .flex-direction-nav .flex-next::before {
    transform: rotate(45deg);
    margin-right: 6px;
}
.ohb2-featured-slider .flex-direction-nav .flex-disabled {
    opacity: 0.35;
    cursor: default;
}

/* ----- paging dots ----- */
.ohb2-featured-slider .flex-control-nav.flex-control-paging {
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.ohb2-featured-slider .flex-control-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ohb2-featured-slider .flex-control-paging li a {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C9C9C9;
    box-shadow: none;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}
.ohb2-featured-slider .flex-control-paging li a.flex-active,
.ohb2-featured-slider .flex-control-paging li a:hover {
    background: #1A567A;
}

@media screen and (max-width: 1060px) {
    .ohb2-featured-slider .flex-direction-nav .flex-prev { left: 2px; }
    .ohb2-featured-slider .flex-direction-nav .flex-next { right: 2px; }
}
@media screen and (max-width: 700px) {
    .ohb2-featured-slider .flex-direction-nav a { width: 18px; height: 34px; }
    .ohb2-featured-slider .flex-direction-nav a::before {
        width: 14px; height: 14px; border-top-width: 4px; border-right-width: 4px;
    }
}

/* =====================================================================
   PASS 2026-09-02 (25) — THE SHED SOLUTIONS BLOG, REBUILT TO THE DECK

   The 2026-09-01 build was written on the belief that the deck carried no
   render for this page. IT DOES: design-10, middle third, labelled
   "…Page Design (under Resources)". It draws something quite different from
   what shipped -- not a three-up card grid but a ONE-COLUMN LIST of wide
   rows, photo left, copy right, a small READ IT button per row, and no
   card box, no date, no author, no category.

   Every number below is measured off that render with measure-ref.py
   (trimmed to the page mockup, rescaled so the page is exactly 1440 wide,
   so design px == CSS px), taking the bottom of the header's navy strip as
   the origin:

     logo (OHB man-outside)   298 x 109, centred, ink top at 77
     "The Shed Solutions Blog" cap top 200, baseline 229 -> 29px cap
                              = a 40px face; #1A567A; centred
     photo                    316 x 220, SQUARE corners, no border
     gutter photo -> copy     34
     copy column              574 (the deck's page column is 924; the theme
                              ships a 940 wrap, so ours is 590 -- the same
                              +8px-a-side the whole theme already carries)
     row title                cap top = photo top + 3; caps 15.5px = a 22px
                              face; line pitch 23; BOLD UPPERCASE #1A567A
     title -> excerpt         14
     excerpt                  cap 11px = a 15px face; line pitch 19.5-20
     READ IT                  216 x 41, label caps 15px = a 20px face,
                              corner radius ~4-5, and its BOTTOM sits flush
                              with the bottom of the photo on all four rows
     row pitch                296 (220 photo + 76)
     last photo -> VIEW MORE  51
     VIEW MORE                342 x 58 -- the deck's standard button family
                              (SHOP NOW 341x58, SEE IT IN ACTION 342x58),
                              which the theme already ships as
                              .ohb2-view-all-wrap .ohb2-btn-blue at 342 x 56
     VIEW MORE -> footer      81, and the deck draws NO quote band here

   The article page is NOT drawn anywhere in the deck, so it stays in the
   theme's prose language: the 38px #1A567A h1 the warranty and rent-to-own
   pages use, and 16/1.55 body copy (the deck's own body measures 15/20 on
   this same page; the theme rounded that to 16/1.55 site-wide).
   ===================================================================== */
.ohb2-blog-section {
    background: #fff;
    /* Top padding matches the COMPUTED top padding of
       .ohb2-about-intro-section and .ohb2-contact-intro-section, which is 40px:
       both declare 50px at ohb2-pages.css:221/410 and are then overridden to
       40px by later rules at ~:1092/:1128. Reading only the first declaration
       is how this landed 10px short on the first attempt -- Sara spotted the
       remaining offset by switching between the pages. Bottom is unchanged. */
    padding: 40px 20px 81px;
}
.ohb2-blog-head {
    text-align: center;
}
/* The blog's logo is .ohb2-dealer-logo like every other page's -- see the
   DEALER LOGO ON INTERIOR PAGE HEADINGS block near the end of this file.
   It used to size itself here (298px wide, no height cap, 6px gap) and that
   is exactly how it drifted away from About and Contact. */
.ohb2-blog-title {
    /* frontend.css (the shared platform sheet) puts padding: 30px 0 15px on
       every h1 and 15px on h2/h3. Every heading on this page is measured off
       the deck, so that padding is zeroed here rather than worked around. */
    padding: 0;
    margin: 0 0 38px;
    text-align: center;
    color: #1A567A;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

/* ----- the list: one column of wide rows, as drawn ----- */
.ohb2-blog-list {
    display: flex;
    flex-direction: column;
    gap: 76px;
}
.ohb2-blog-row {
    display: flex;
    align-items: flex-start;
    gap: 34px;
}
/* 316 x 220 in the deck; square corners and no card box -- the photo sits
   straight on the white. */
.ohb2-blog-row-thumb {
    display: block;
    flex: 0 0 316px;
    width: 316px;
    height: 220px;
    background: #E9E9E9;
    overflow: hidden;
}
.ohb2-blog-row-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Not every brand post has an image in the feed body. Rather than a bare
   grey hole, the tile carries the Old Hickory mark so the row still reads
   as finished. */
.ohb2-blog-row-thumb--empty {
    background: #E9E9E9 url('../ohb2-assets/ohbs-logo.png') no-repeat center / 180px auto;
}
/* min-height matches the photo so margin-top:auto lands READ IT flush with
   the bottom of the photo, which is what the deck draws on every row. */
.ohb2-blog-row-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}
.ohb2-blog-row-title {
    padding: 0;
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    line-height: 23px;
    text-transform: uppercase;
    color: #1A567A;
}
.ohb2-blog-row-title a {
    color: inherit;
    text-decoration: none;
}
.ohb2-blog-row-title a:hover {
    text-decoration: underline;
}
.ohb2-blog-row-excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    color: #333;
}
.ohb2-blog-row-btn {
    margin-top: auto;
    align-self: flex-start;
    width: 216px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 9px 16px;
    font-size: 20px;
    line-height: 1.15;
    border-radius: 5px;
}

/* VIEW MORE rides the theme's own 342-wide button; 14px of padding puts it
   on the drawn 58 rather than the 56 the .ohb2-view-all-wrap rule gives. */
.ohb2-blog-more-wrap {
    margin-top: 51px;
}
.ohb2-blog-more-wrap .ohb2-btn-blue {
    padding: 14px 16px;
}

/* ----- pager (Mike #32) -----
   Built from the theme's own buttons so it reads as part of the page rather
   than a bolted-on widget: prev/next and the current page are .ohb2-btn-blue,
   the other numbers .ohb2-btn-outline, and both keep the 5px corner and the
   navy the READ IT button uses one row above. Sits on the same 51px rhythm
   under the last row that VIEW MORE used to. */
.ohb2-blog-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 51px;
}
.ohb2-blog-pager-nums {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ohb2-blog-pager-step {
    padding: 10px 26px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 5px;
}
.ohb2-blog-pager-num {
    flex: 0 0 auto;
    min-width: 41px;
    justify-content: center;
    padding: 10px 10px;
    font-size: 16px;
    line-height: 1.15;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #1A567A;
}
/* A page you can go TO is the navy button inverted -- the same white/navy
   pair the theme's buttons already swap to on hover. (.ohb2-btn-outline is no
   use for this: ohb2.css:1916 repaints it solid navy theme-wide, so every
   number came out looking like the current page.) */
.ohb2-blog-pager a.ohb2-blog-pager-num {
    background: #fff;
    color: #1A567A;
}
.ohb2-blog-pager a.ohb2-blog-pager-num:hover {
    background: #1A567A;
    color: #fff;
}
/* The page you are ON is solid navy and is not a link, so it must not look
   clickable. */
.ohb2-blog-pager-num.is-current {
    background: #1A567A;
    color: #fff;
    cursor: default;
}
.ohb2-blog-pager-gap {
    color: #666;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}

.ohb2-blog-empty {
    text-align: center;
    padding: 24px 0 8px;
}
.ohb2-blog-empty p {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
    margin: 0 0 22px;
}
.ohb2-blog-empty .ohb2-btn-blue {
    display: inline-flex;
    width: auto;
    padding: 14px 30px;
    font-size: 20px;
}

/* ----- article ----- */
.ohb2-blog-article-section {
    background: #fff;
    padding: 34px 20px 64px;
}
.ohb2-blog-back {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 700;
    color: #1A567A;
    text-decoration: none;
}
.ohb2-blog-back:hover { text-decoration: underline; }
.ohb2-blog-article-title {
    padding: 0;
    margin: 0 0 10px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #1A567A;
}
/* frontend.css centres every h1, which is the language every other prose
   page in this theme speaks (design-10 centres "Warranty Claims" the same
   way), so the date line is centred under it rather than left adrift. */
.ohb2-blog-article-meta {
    margin: 0 0 22px;
    text-align: center;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #3C7C99;
}
.ohb2-blog-article-hero {
    margin: 0 0 28px;
}
/* The sync asks WordPress for the ORIGINAL of each image rather than one of
   its thumbnails, so a portrait shot can arrive 1500px tall. Cap the hero and
   crop it, and cap the in-prose images by height so a tall photo cannot turn
   one paragraph into a screenful. */
.ohb2-blog-article-hero img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
}

/* The imported body, in the theme's prose: the 16/1.55 the warranty and
   rent-to-own pages run. frontend.css puts its own line-height on <p> and
   <li>, which beats an inherited value, so the measure is restated on the
   elements themselves -- without this the body set at 16/30. */
.ohb2-blog-prose {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
}
.ohb2-blog-prose p { margin: 0 0 18px; line-height: 1.55; }
.ohb2-blog-prose > *:last-child { margin-bottom: 0; }
.ohb2-blog-prose h2,
.ohb2-blog-prose h3,
.ohb2-blog-prose h4 {
    padding: 0;
    color: #1A567A;
    font-weight: 700;
    line-height: 1.25;
    margin: 30px 0 12px;
}
.ohb2-blog-prose h2 { font-size: 26px; }
.ohb2-blog-prose h3 { font-size: 21px; }
.ohb2-blog-prose h4 { font-size: 18px; }
.ohb2-blog-prose ul,
.ohb2-blog-prose ol { margin: 0 0 18px 22px; padding: 0; }
.ohb2-blog-prose li { margin: 0 0 8px; line-height: 1.55; }
.ohb2-blog-prose a { color: #1A567A; text-decoration: underline; }
.ohb2-blog-prose a:hover { color: #14405C; }
/* Imported markup can carry anything. Nothing in the body is allowed wider
   than the measure -- the width/height attributes WP leaves on an <img> are
   overridden here, and the catch-all keeps a stray wide element (a table, a
   <pre>, an embed the cleaner let through) from pushing the page sideways. */
.ohb2-blog-prose img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 480px;
    height: auto;
    margin: 22px auto;
}
.ohb2-blog-prose > *,
.ohb2-blog-prose iframe,
.ohb2-blog-prose video,
.ohb2-blog-prose pre {
    max-width: 100%;
}
.ohb2-blog-prose figure { margin: 22px 0; max-width: 100%; }
.ohb2-blog-prose figcaption {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 8px;
}
.ohb2-blog-prose blockquote {
    margin: 22px 0;
    padding: 6px 0 6px 20px;
    border-left: 4px solid #E9BB52;
    color: #444;
    font-style: italic;
}
.ohb2-blog-prose table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    table-layout: fixed;
}
.ohb2-blog-prose th,
.ohb2-blog-prose td {
    border: 1px solid #DDD;
    padding: 8px 10px;
    text-align: left;
    word-wrap: break-word;
}

.ohb2-blog-article-source {
    margin: 30px 0 0;
    line-height: 1.55;
    font-size: 15px;
    color: #666;
}
.ohb2-blog-article-source a { color: #1A567A; }

.ohb2-blog-more-posts {
    margin-top: 46px;
    padding-top: 34px;
    border-top: 1px solid #DDD;
}
.ohb2-blog-more-heading {
    padding: 0;
    margin: 0 0 30px;
    text-align: center;
    color: #1A567A;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}
.ohb2-blog-article-section .ohb2-blog-more-wrap {
    margin-top: 44px;
}

@media screen and (max-width: 980px) {
    /* The wrap is fluid below 980, so the photo gives ground before the
       copy column does; the 316:220 frame is kept. */
    .ohb2-blog-row-thumb { flex-basis: 268px; width: 268px; height: 187px; }
    .ohb2-blog-row-body { min-height: 187px; }
    .ohb2-blog-row { gap: 28px; }
    .ohb2-blog-list { gap: 58px; }
    .ohb2-blog-row-title { font-size: 20px; line-height: 1.1; }
}
@media screen and (max-width: 700px) {
    .ohb2-blog-section { padding: 34px 16px 44px; }
    .ohb2-blog-title { font-size: 28px; margin-bottom: 26px; }
    .ohb2-blog-list { gap: 34px; }
    /* Stacked: the photo goes full-measure at the drawn 316:220 frame and
       the copy runs under it. */
    .ohb2-blog-row { flex-direction: column; align-items: stretch; gap: 14px; }
    .ohb2-blog-row-thumb {
        flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 316 / 220;
    }
    .ohb2-blog-row-body { min-height: 0; }
    .ohb2-blog-row-title { font-size: 19px; line-height: 1.15; margin-bottom: 10px; }
    .ohb2-blog-row-btn { margin-top: 16px; width: 100%; font-size: 18px; }
    .ohb2-blog-row-thumb--empty { background-size: 150px auto; }

    .ohb2-blog-more-wrap { margin-top: 34px; }
    .ohb2-blog-more-wrap .ohb2-btn-blue { width: 100%; font-size: 20px; padding: 13px 12px; }

    /* The pager stays one centred row on a phone: prev/next shrink, the
       numbers hold their tap target. */
    .ohb2-blog-pager { margin-top: 34px; gap: 8px; }
    .ohb2-blog-pager-step { padding: 10px 16px; font-size: 15px; }
    .ohb2-blog-pager-num { min-width: 38px; padding: 10px 8px; font-size: 15px; }
    .ohb2-blog-pager-nums { gap: 6px; }

    .ohb2-blog-article-section { padding: 26px 16px 44px; }
    .ohb2-blog-article-title { font-size: 26px; }
    .ohb2-blog-article-hero img { max-height: 240px; }
    .ohb2-blog-prose { font-size: 16px; }
    .ohb2-blog-prose h2 { font-size: 22px; }
    .ohb2-blog-prose h3 { font-size: 19px; }
    .ohb2-blog-prose img { max-height: 320px; }
    .ohb2-blog-more-heading { font-size: 24px; margin-bottom: 22px; }
}

/* =====================================================================
   PASS 2026-09-01 (24) — THE DETAIL LEAD FORM GETS STOCK'S STATE + ZIP

   Tonight's forms audit found the "Have Questions About This Building?"
   form short two fields: stock's equivalent (public/building.blade.php's
   #quote-form) collects State and Zip, optional, and ours did not, so
   those two posted empty on every ohb2 detail-page lead.

   The pair goes on its own row under the drawn 4-up. design-03 draws four
   visible fields, but Sara's rule for this theme is same-forms-reskinned,
   so the stock FIELD SET wins over the drawing -- and the Contact Dealer
   popup already puts State and Zip together on one row, so a two-up row is
   the language this theme already speaks.

   .ohb2-bldg-form-row is repeat(4, 1fr) from block (19); the -pair modifier
   halves it so two fields fill the width instead of sitting in the first
   two of four columns. It rides the same two breakpoints as the quad row
   so the two rows collapse together.
   ===================================================================== */
.ohb2-bldg-form-row-pair {
    grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 560px) {
    .ohb2-bldg-form-row-pair { grid-template-columns: 1fr; }
}

/* The band only ever held inputs and a textarea, so the select had no box
   of its own -- these mirror `.ohb2-bldg-form-row input` and the navy
   band's white-field override, field for field. The 16px line-height is
   what an <input> resolves to at 14px, and a grid row stretches to its
   tallest child, so without it the select's larger intrinsic box made the
   State/Zip row 40px against the name row's 38. */
.ohb2-bldg-form-row select {
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    font-family: inherit;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    color: #222;
    background-color: #fff;
    /* Chrome's UA sheet pins `line-height: normal !important` on a select, so
       the box cannot be matched to the inputs through type metrics -- the
       select came out 40 against their 38 and, because a grid row stretches to
       its tallest child, it dragged Zip up with it and made the State/Zip row
       visibly taller than the name row. 38 is what the inputs beside it
       compute to: 16px line box + 10px padding top and bottom + 1px border
       each side. Height wins over the UA rule in every engine. */
    height: 38px;
}
/* Unpicked, the select should read like the placeholders either side of it;
   picked, it should read like a filled field. `:has()` is Chrome 105 /
   Safari 15.4 / Firefox 121, and the fallback is the FILLED ink, so an
   older browser gets a slightly heavier prompt rather than a value that
   looks disabled. */
.ohb2-bldg-form-row select:has(option[value='']:checked) {
    color: #6B6B6B;
}
.ohb2-bldg-question-section select {
    background-color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* Found while shooting the success state, and pre-dating tonight: the band's
   own .form-submit-message had NO rule of its own, so it inherited #333 and
   landed dark grey on the navy -- a customer's confirmation, and worse the
   zip/phone validation error, were both all but invisible. frontend.css
   already solves exactly this for the platform's forms that sit on a dark
   panel (.quote-form and #rent-to-own); these are those rules, verbatim,
   pointed at this band. */
.ohb2-bldg-question-section .form-submit-message.success {
    color: #fff;
    text-align: center;
    padding: 20px 0;
}
.ohb2-bldg-question-section .form-submit-message.error {
    color: #fff;
    text-align: center;
    border: 2px solid #fff;
    padding: 12px;
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
   QUOTE BAND -> PROMO DUO SEAM — 2026-09-02.

   Where the navy quote-form band is followed by the promo duo (the About
   and Contact pages), the duo's headings started immediately under the
   band: 10px on desktop, 6px on mobile, because the only thing between
   them was the promo pane's own 10px of top padding. The deck draws real
   white space there — measured off the design crop, rescaled to 1440, the
   band's bottom edge sits at y 251 and the heading's cap top at y 336, an
   85px gap. A 38px heading at 1.2 puts its cap about 14px below its own
   box top, so the box has to start ~71px below the band.

   Scoped to the adjacency rather than to the duo itself: the home and
   inventory pages put the duo after other sections and already carry their
   own measured rhythm, so nothing there moves.

   2026-09-02, second pass. The first version of this rule named
   .ohb2-promo-duo -- but the catalog pages render the very same
   composition under .ohb2-cat-promo-duo, so lofted-barns,
   add-on-packages, specialty-buildings and space-for-your-animals kept the
   10px seam. That is the fault Sara caught. Matching the class *pattern*
   instead of one exact name covers .ohb2-promo-duo, .ohb2-cat-promo-duo,
   the -inv modifier and any future page that names its duo the same way,
   so the gap follows the adjacency itself rather than a list of pages.
   Specificity (0,2,0) outranks .ohb2-cat-promo-duo (0,1,0), so it holds
   even though ohb2-catalog.css loads after this file.

   The gap is put on the section AND the panes' own top padding is zeroed
   inside the seam, so one number produces the whole distance. Left alone,
   the measured gap was the section padding plus whatever top padding that
   particular pane family happened to carry -- 10px on .ohb2-cat-promo-pane
   but 6px on .ohb2-promo-pane at mobile -- which landed the catalog pages
   on 50px against About and Contact's 46px. Same rule, two answers, which
   is the same class of bug as the one being fixed. Zeroing it makes the
   result identical on every page: 72px desktop, 46px mobile, measured.
   --------------------------------------------------------------------- */
/* 2026-09-14, #25 + #31 (Mike): "spacing issue" / "add padding" on the seam
   under the blue 3D-builder panel on /shed-upgrades-options-add-ons.
   Same fault this rule was written for, one adjacency further out: the
   shed-upgrades page puts the duo after .ohb2-builder-band rather than
   .ohb2-quote-section, so the rule never fired there and the seam fell back
   to the pane's own 10px. Adding the band to the selector -- rather than
   naming the page -- keeps the gap following the adjacency, which is what
   the note above says this rule is for. Value is unchanged at the measured
   72px, so shed-upgrades now matches lofted-barns exactly. */
.ohb2-quote-section + [class*="promo-duo"],
.ohb2-builder-band + [class*="promo-duo"] {
    padding-top: 72px;
}
.ohb2-quote-section + [class*="promo-duo"] [class*="promo-pane"],
.ohb2-builder-band + [class*="promo-duo"] [class*="promo-pane"] {
    padding-top: 0;
}

/* The stacked panes still carried a 1px rule between them on narrow
   screens -- the last survivor of the boxed treatment this row used to
   have. The deck draws the two promos as plain stacked blocks on white,
   with no divider and no card edge, so it goes for the whole family
   rather than leaving About the only page without one. */
.ohb2-promo-pane + .ohb2-promo-pane {
    border-top: 0;
}

@media screen and (max-width: 700px) {
    .ohb2-quote-section + [class*="promo-duo"] {
        padding-top: 46px;
    }
}

/* ---------------------------------------------------------------------
   HEADER CONTACT CLUSTER — the social icons centre on the number.

   d4c7fe4 put the cluster back at the top right, which was the fault
   reported then, but left the icons wrong: .ohb2-hdr-meta is a column with
   align-items:flex-end, so every child hugs the RIGHT edge. The call block
   is the widest child and therefore defines that edge, and the icon pair,
   being much narrower, ended up shoved right of the number rather than
   sitting under it. Measured on the live page it was off-centre by 36px at
   390 and 52px at 1440 — at EVERY width, not only some narrow range, which
   is why sweeping for a breakpoint last night did not find it.

   design-01 draws "Call Us Today!", the number and the two icons on one
   shared centre line, with the block as a whole flush right. Stretching the
   icon row to the column width and centring inside it gives exactly that:
   the cluster keeps its right edge, the icons take the number's centre, and
   it holds at any width because it is a relationship rather than an offset.
   --------------------------------------------------------------------- */
.ohb2-hdr-social {
    align-self: stretch;
    justify-content: center;
}


/* =====================================================================
   PASS 2026-09-02 (26) — BUTTON LABELS CENTRE THEMSELVES

   Sara: the warranty page's two CTAs carry their label visibly high.

   Measured rather than guessed (state/ohb2/text-center-audit.js walks all
   13 pages at both viewports and reports the label's ink centre against
   the button's border-box centre): VIEW THE WRITTEN POLICY sat 5.2px high,
   FILE A CLAIM 5.2px high, and 54 of 172 buttons were off by more than a
   pixel.

   ROOT CAUSE, and this file already documented one half of it further up:
   `.ohb2-btn-gold` never declared a line-height, so it inherits the body's
   1.5, while `.ohb2-btn-blue` was pinned to 1.15. In `.ohb2-warranty-cta-row`
   -- a flex row -- the gold sibling's taller line box (36px at 24px font)
   sets the row height and `align-items: stretch` pulls the blue button from
   its natural 59.6px up to 68px. The label is a line box at the TOP of the
   content box, so all 8.4px of the stretch lands underneath it and the text
   rides high. Any button stretched by a taller sibling has the same fault.

   FIXED AT THE FAMILY LEVEL, AND WITHOUT MOVING A SINGLE BOX EDGE: the
   button family's `display` moves block -> flex and inline-block ->
   inline-flex (31 declarations across ohb2.css, ohb2-pages.css and
   ohb2-catalog.css). The outer box of a block-level flex container sizes
   exactly like a block, and inline-flex exactly like inline-block, so no
   width, height, padding or radius changes -- but the label becomes a flex
   item that `align-items: center` can centre in whatever height the button
   ends up at, stretched or not. Every ohb2 button now centres by
   construction instead of by luck.

   Deliberately NOT changed: the gold/blue line-height mismatch itself.
   Pinning gold to 1.15 would shrink every gold button in the theme by
   ~0.35em and Sara asked for the centring only, not new sizes. The mismatch
   is now harmless; it is reported as a separate open item.

   Safe because no ohb2 button has element children -- each is a single text
   run, so each becomes exactly one anonymous flex item with no whitespace
   or wrapping change. Verified by grep across resources/views/public/ohb2.
   ===================================================================== */
.ohb2-btn-gold,
.ohb2-btn-blue,
.ohb2-btn-outline {
    align-items: center;
    justify-content: center;
}

/* =====================================================================
   PASS 2026-09-02 (27) — THE BROCHURE MODAL JOINS THE OTHER TWO

   Sara: the DOWNLOAD IT NOW popup renders as a big white shell with a
   small textured navy card floating inside it.

   ROOT CAUSE — three separate faults, all on the same element:

   1. 75ccb06 restyled TWO popups, and this is a THIRD. `#pricing-form`
      lives in bottom-stack.blade.php and is the target of three triggers
      (home brochure block, inventory promo row, About promo row). It never
      got `.ohb2-modal`, so Fancybox's own white `.fancybox__content` panel
      showed around it -- the white shell.

   2. The textured navy card is stock: frontend.css paints
      `#pricing-form form` with ohb.com's `form-popup-background.jpg` and
      `#pricing-form` with #00567a. Those selectors are (1,0,1) and (1,0,0);
      the whole `.ohb2-modal` language is (0,2,0). AN ID BEATS TWO CLASSES
      NO MATTER WHICH SHEET LOADS LAST, so simply adding the class would
      have left the texture in place. The overrides below are restated at
      id strength for that reason. Flat navy, per Sara -- no texture.

   3. The title was never missing: the h2 was in the markup all along, and
      frontend.css's `#pricing-form h2 { color: #FFF }` was painting it
      WHITE ON THE WHITE SHELL. It is gold-on-navy now, like its siblings.

   Presentation only. The diff of the partial changes no name=, id=, action=
   or method=; the field set, the hidden fields, the honeypot and the
   `validateAndSubmitForm('#pricing-form', ...)` binding from 5ff3096 are
   untouched.
   ===================================================================== */
#pricing-form.ohb2-modal {
    background: #1A567A;
    background-image: none;
    color: #fff;
    padding: 44px 46px 46px;
    max-width: 660px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    text-align: left;
}
#pricing-form.ohb2-modal form,
#pricing-form.ohb2-modal form.simple {
    background: none;
    background-image: none;
    padding: 0;
    margin: 0;
}
#pricing-form.ohb2-modal h2.ohb2-modal-title {
    color: #E9BB52;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-transform: none;
    margin: 0 0 24px;
    padding: 0;
}
#pricing-form.ohb2-modal .form-submit-message {
    color: #fff;
    padding: 12px;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------
   ...and the same specificity trap one level down, which cost BOTH the
   restyled popups their field geometry: stock's
   `form.simple input[type="text"]` is (0,2,2) and outranks
   `.ohb2-modal .ohb2-modal-form input` (0,2,1), so the "white rounded
   fields" were still wearing stock's 10px pad, #ccc border, 4px radius
   and a stray 15px bottom margin inside the grid rows. Type-qualified
   here, (0,3,1), so the approved modal language actually applies.
   --------------------------------------------------------------------- */
.ohb2-modal .ohb2-modal-form input[type="text"],
.ohb2-modal .ohb2-modal-form input[type="email"],
.ohb2-modal .ohb2-modal-form input[type="tel"],
.ohb2-modal .ohb2-modal-form select,
.ohb2-modal .ohb2-modal-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    color: #1A1A1A;
    border: 1px solid #fff;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.3;
}
/* The stray 15px only hurts INSIDE the two-up grid rows, where the row
   already owns the spacing. Zeroing it on the base rule instead would
   outrank .ohb2-modal-field-full -- (0,3,1) beats (0,3,0) -- and butt the
   stacked fields together, which is exactly what it did on first pass. */
.ohb2-modal .ohb2-modal-row input[type="text"],
.ohb2-modal .ohb2-modal-row input[type="email"],
.ohb2-modal .ohb2-modal-row input[type="tel"],
.ohb2-modal .ohb2-modal-row select {
    margin-bottom: 0;
}
.ohb2-modal .ohb2-modal-form .ohb2-modal-field-full {
    display: block;
    margin-bottom: 18px;
}
.ohb2-modal .ohb2-modal-form textarea {
    display: block;
    min-height: 150px;
    resize: vertical;
    margin-bottom: 24px;
}

@media screen and (max-width: 600px) {
    #pricing-form.ohb2-modal {
        padding: 40px 18px 24px;
    }
    #pricing-form.ohb2-modal h2.ohb2-modal-title {
        font-size: 26px;
        margin: 0 0 18px;
    }
    /* restated type-qualified so the block above does not outrank the
       family's own mobile sizes */
    .ohb2-modal .ohb2-modal-form input[type="text"],
    .ohb2-modal .ohb2-modal-form input[type="email"],
    .ohb2-modal .ohb2-modal-form input[type="tel"],
    .ohb2-modal .ohb2-modal-form select,
    .ohb2-modal .ohb2-modal-form textarea {
        padding: 12px 14px;
        font-size: 15px;
    }
    .ohb2-modal .ohb2-modal-form .ohb2-modal-field-full { margin-bottom: 12px; }
    .ohb2-modal .ohb2-modal-form textarea { min-height: 110px; margin-bottom: 18px; }
}

/* =====================================================================
   PASS 2026-09-03 (b) — Brian's feedback round.

   Five items, all of them his: a back-to-top control, clickable
   addresses, the mobile sub-menu accordion, the HOVER/TAP wording on the
   stars line, and the rent-to-own advantages box sitting off-centre on a
   phone. Notes below say WHY each rule is shaped the way it is.
   ===================================================================== */

/* ---------------------------------------------------------------------
   (1) BACK TO TOP

   Brian: "should there be one since the pages are long, especially
   mobile". They are — the home page measures 6,820px against an 844px
   phone viewport, eight screens of scrolling with no way back but a
   flick.

   Shape and palette come from the theme, not from a widget kit:
     - the fill is `.ohb2-btn-blue`'s #1A567A and its #14405C hover, so
       the puck belongs to the same button family as every other CTA;
     - the disc is the theme's own treatment for round chrome — the star
       bullets on the "…stars below" line and the anatomy dots are both
       border-radius:50% at this size — and a 46px circle carrying a
       20px chevron is the one place the 7px button radius would read as
       a floating box instead of a control;
     - the chevron is a stroked path at the same 2.4 weight as the
       carousel arrows.

   z-index 400 is deliberate: above every piece of page chrome in this
   theme (the highest is the mobile nav drawer at 300) and below the
   modals and the Fancybox lightbox (1000+), so it can never float over
   an open dialog.

   `.ohb2-to-top[hidden]` is restated because [hidden] is a UA *type*
   rule and would otherwise lose to this block's own display:flex — the
   classic `hidden` failure. Without it the button would paint for
   visitors with JS off, at the top of the page, doing nothing.
   --------------------------------------------------------------------- */
.ohb2-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 400;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #1A567A;
    box-shadow: 0 2px 10px rgba(0,0,0,0.28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* visibility flips at the END of the fade going out and at the START
       coming in, so both directions are actually seen. */
    transition: opacity .18s ease, transform .18s ease, background .15s ease, visibility 0s linear .18s;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.ohb2-to-top[hidden] { display: none; }
.ohb2-to-top svg { display: block; }
.ohb2-to-top.ohb2-to-top-on {
    opacity: 0.88;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, background .15s ease, visibility 0s;
}
.ohb2-to-top.ohb2-to-top-on:hover,
.ohb2-to-top.ohb2-to-top-on:focus-visible {
    opacity: 1;
    background: #14405C;
}
.ohb2-to-top:focus-visible {
    outline: 3px solid #E9BB52;
    outline-offset: 2px;
}
/* Phone: 52px clears the 44px minimum touch target with room to spare,
   and sits inside the thumb arc without covering body copy. */
@media screen and (max-width: 900px) {
    .ohb2-to-top { width: 52px; height: 52px; right: 16px; bottom: 16px; }
    .ohb2-to-top.ohb2-to-top-on { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ohb2-to-top { transform: none; transition: background .15s ease; }
    .ohb2-to-top.ohb2-to-top-on { transform: none; transition: background .15s ease; }
}

/* ---------------------------------------------------------------------
   (2) CLICKABLE ADDRESS — footer and the contact page's "Visit or Call Us".

   The address inherits the colour of the text around it rather than
   taking the footer's link blue: a two-line address rendered in link
   colour is a much louder change than a phone number is, and Brian asked
   for a map, not for the block to be repainted. Discoverability comes
   from the pointer and an underline on hover/focus, which is the same
   affordance the footer's phone and email links already use.
   --------------------------------------------------------------------- */
.ohb2-footer-address .ohb2-map-link,
.ohb2-contact-info-col .ohb2-map-link,
.ohb2-map-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.ohb2-footer-address .ohb2-map-link:hover,
.ohb2-footer-address .ohb2-map-link:focus-visible,
.ohb2-contact-info-col .ohb2-map-link:hover,
.ohb2-contact-info-col .ohb2-map-link:focus-visible,
.ohb2-map-link:hover,
.ohb2-map-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Block, so the two address lines are one target and the line-height
   discipline the contact column relies on is unchanged. */
.ohb2-footer-address .ohb2-map-link,
.ohb2-contact-info-col .ohb2-map-link { display: block; }

/* ---------------------------------------------------------------------
   (3) MOBILE SUB-MENUS — the phone dropdown is class-driven, never hover.

   `.ohb2-nav-menu > li:hover .ohb2-nav-dropdown` (line ~184) was never
   scoped away from the phone. A tap on a touch screen leaves a STICKY
   :hover on the item until the visitor taps something else, so:

     - tapping a parent a second time removed .ohb2-sub-open but the
       stale :hover kept painting display:block — Brian's "sub-menus
       don't close";
     - tapping Resources moved that stale :hover off About Us, which
       collapsed for a reason no code intended. Whether it collapsed
       depended on the parity of the taps before it, which is exactly
       the "sometimes" in the report.

   Killing the hover rule below 900px leaves the drawer entirely to the
   class the nav handler sets, so the accordion is deterministic. The
   desktop rule is left alone on purpose: scoping it to (hover: hover)
   instead would break the dropdowns on a large touch screen, which
   reports hover:none at desktop widths.
   --------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .ohb2-nav-menu > li:hover .ohb2-nav-dropdown { display: none; }
    .ohb2-nav-menu > li.ohb2-sub-open .ohb2-nav-dropdown,
    .ohb2-nav-menu > li.ohb2-sub-open:hover .ohb2-nav-dropdown { display: block; }
}

/* Same sticky :hover, second symptom — caught by eye on the drawer
   screenshots, not by any assertion. The parent ROW kept its highlight
   after its sub-menu was closed, so a shut "About Us" still read as the
   selected item. On a phone the highlight belongs to the open accordion
   panel and to the current page; nothing else. The two `:hover` variants
   are restated so an active or open item does not lose its background
   merely because a thumb is resting on it. */
@media screen and (max-width: 900px) {
    .ohb2-nav-menu > li > a:hover,
    .ohb2-nav-menu > li:hover > a { background: transparent; }
    .ohb2-nav-menu > li.ohb2-sub-open > a,
    .ohb2-nav-menu > li.ohb2-sub-open:hover > a,
    .ohb2-nav-menu > li > a.ohb2-active,
    .ohb2-nav-menu > li:hover > a.ohb2-active { background: rgba(255,255,255,0.15); }
}

/* ---------------------------------------------------------------------
   (4) "HOVER OVER THE STARS…" reads "TAP THE STARS…" on a phone.

   The hot spots open on mouseenter/focus on a pointer device and on tap
   below the breakpoint, so the instruction has to change with them. Two
   spans swapped by the SAME 900px breakpoint the anatomy widget uses to
   drop from two columns to one — one source of truth, no JS, and the
   sentence stays one flex item so the 14px gap between the star bullets
   and the copy is untouched.
   --------------------------------------------------------------------- */
.ohb2-stars-cta-tap { display: none; }
@media screen and (max-width: 900px) {
    .ohb2-stars-cta-hover { display: none; }
    .ohb2-stars-cta-tap { display: inline; }
}

/* ---------------------------------------------------------------------
   (5) RTO ADVANTAGES — centred once the section stacks.

   Measured at 390: the LEARN MORE button is 342px centred at x=24, and
   the advantages box was 337px hard against x=20 — 4px to the LEFT of
   the button above it and 17px short on the right, which is the ragged
   left edge in Brian's screenshot. Cause: `flex: none` at the stacking
   breakpoint drops the 447px basis, and `.ohb2-rto-inner` carries
   align-items:flex-start, so the box shrink-wrapped to its content and
   parked left under a centred button.

   Fix keeps the design's 447px width where there is room for it and
   centres it under the button, capped to the column on a phone. The
   text column is told to stretch explicitly, since a column flex
   container with align-items:flex-start would otherwise shrink-wrap it.

   The section also stacks at 900 now rather than 640, matching the
   catalog surface's own breakpoint — between the two the box was
   holding a 337px column against a 351px one, which is where the
   paragraph was getting squeezed on a tablet.
   --------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .ohb2-rto-inner { flex-direction: column; }
    .ohb2-rto-text { align-self: stretch; }
    .ohb2-rto-advantages {
        align-self: center;
        width: 447px;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------
   (6) GALLERY RAIL — a real scroll container, snapped to whole tiles.

   Sara: "kind of a weird bug when you scroll on the gallery on the
   buildings pages", with a screenshot of a tile sliced in half at the
   left edge of the column and a wide dead gap before the next chevron.

   Measured cause, in full, in the note above slider() in
   ohb2-catalog.js. The short version: the rail was a transform on an
   overflow:hidden track, and an overflow:hidden box is still a scroll
   container — focusing a slide (a click, or Fancybox handing focus back
   on close) scrolled it to 954px on desktop and 820px on mobile behind
   the script's back. transform and scrollLeft then stacked, which is
   the half-tile and the dead gap.

   Making the track scroll natively leaves one source of truth, and
   mandatory snapping means every rest position — chevron, swipe,
   trackpad, keyboard, or a focus-scroll — is on a tile boundary. The
   browser's own clamp puts the last tile flush against the right edge,
   so trailing whitespace is no longer expressible.

   The scrollbar is hidden in both engine families: this is a rail with
   its own chevrons, and a 15px gutter under it would eat into the 180px
   tile height the comp draws.
   --------------------------------------------------------------------- */
.ohb2-cat-gallery-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* stops a horizontal fling from turning into iOS back-navigation */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
    transition: none;               /* the transform animation is gone */
}
.ohb2-cat-gallery-track::-webkit-scrollbar { display: none; }
.ohb2-cat-gallery-slide {
    /* snap-align only — `stop: always` is deliberately NOT set, so a fling
       across the 42-photo rail can still carry more than one page. */
    scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) {
    .ohb2-cat-gallery-track { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   SATELLITE INVENTORY — "AVAILABLE ONLINE ONLY" bar (Mike, OHB, 2026-09-04)

   Same markup as stock (public/partials/_online-only-bar.blade.php), dressed
   in the theme: flat #14405C — the navy bar colour named at the top of this
   sheet — with the uppercase white label of .ohb2-btn-blue, so it reads as
   part of the card's navy furniture rather than a sticker on the photo.

   Three photo boxes carry it: the listing card, the featured-row card and
   the detail page's main image. All three are given position:relative here
   rather than relying on the rules further up, so the bar's anchor is
   stated where the bar is defined.

   No collision to worry about: USED / CLEARANCE are top-LEFT badges drawn
   with ::after on .ohb2-inv-card-photo (which is why this is a real element
   and not another pseudo), the SOLD badge is centred, and the navy name
   band is a static block that sits BELOW the photo on both card types.
   Height ~26px: 5px + 5px padding over a 13px/1.2 line.
   --------------------------------------------------------------------- */
/* Position:relative is the bar's anchor in all three photo containers. */
.ohb2-inv-card-photo,
.ohb2-card-thumb,
.ohb2-bldg-gallery .ohb2-gallery-main {
    position: relative;
}

/* Bar overlays the photo's bottom edge: listing cards, featured-slider cards,
   and the main gallery on the detail page. */
.ohb2-inv-card-photo .bd-online-only-bar,
.ohb2-card-thumb .bd-online-only-bar,
.ohb2-gallery-main .bd-online-only-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 10px 8px;
    background: #E9BB52;
    color: #14405C;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

/* "AVAILABLE" is the qualifier and "ONLINE ONLY" is the message, so the
   qualifier stays at book weight. Stated rather than inherited on purpose:
   the reset zeroes span font-weight, which would produce this by accident
   and could stop producing it just as quietly.
   Sara 2026-10-27: OHB yellow with OHB blue text, whole phrase bold, so the
   tag stands out from the blue title band instead of blending into it. */
.bd-online-only-lead {
    font-weight: 700;
}

/* The grid drops to one card per row well before the card gets narrow, so
   the full phrase holds down to small phones. Below 360px it would have to
   shrink to stay on one line; drop the qualifier instead. */
@media screen and (max-width: 360px) {
    .bd-online-only-lead {
        display: none;
    }
}

/* ---------------------------------------------------------------
   Featured-slider arrows: lock position + opacity vs flexslider default
   2026-09-09 bug fix (Sara: arrows cause slide to "pull in and flicker")

   Root cause: flexslider.css ships .flexslider:hover rules at specificity
   0,4,0 that override our .ohb2-featured-slider rules at 0,3,0. On any
   pointer-enter to the slider those rules win and (a) animate the arrows
   from left/right:-34px to 10px via transition:all 0.3s, making them fly
   in over the photo card (the "pull in"), and (b) dim opacity to 0.7 then
   re-brighten as the pointer crosses the arrow boundary (the "flicker").

   Fix: use .ohb2-featured-slider.flexslider:hover (specificity 0,5,0) to
   hold the arrows at their designed positions and opacity regardless of
   hover state. Also scope the transition on the arrows to color-only so
   only the chevron tint animates, not the position or opacity.
   --------------------------------------------------------------- */
.ohb2-featured-slider .flex-direction-nav a {
    transition: color 0.15s;
}
.ohb2-featured-slider.flexslider:hover .flex-direction-nav .flex-prev,
.ohb2-featured-slider.flexslider:hover .flex-direction-nav .flex-next {
    opacity: 1;
}
.ohb2-featured-slider.flexslider:hover .flex-direction-nav .flex-prev {
    left: -34px;
}
.ohb2-featured-slider.flexslider:hover .flex-direction-nav .flex-next {
    right: -34px;
}
@media screen and (max-width: 1060px) {
    .ohb2-featured-slider.flexslider:hover .flex-direction-nav .flex-prev {
        left: 2px;
    }
    .ohb2-featured-slider.flexslider:hover .flex-direction-nav .flex-next {
        right: 2px;
    }
}

/* =====================================================================
   STICKY HEADER — #24 (Mike, ReviewStudio 9/9/2026)
   "need to lock the header so it remains visible while scrolling"

   His marker spans the whole block: logo, Call Us Today, phone, social
   icons AND the nav bar, so the whole stack travels, not just the nav.

   position:sticky rather than fixed. Sticky leaves the stack in normal
   flow, so <body> needs no compensating padding and the staff admin bar
   (#bd-admin-bar, position:fixed, z-index 99999) is unaffected; a fixed
   header would have had to know the admin bar's height and the header's
   own two breakpoint heights.

   z-index 500 sits above every in-page layer the theme uses (the highest
   was .ohb2-to-top at 400) and below Fancybox, which builds its own
   stacking context far above this.

   scroll-margin-top on the anchor targets is what keeps in-page links
   (/about#about-our-dealership, the FAQ jumps) from landing underneath
   the stack.

   SUPERSEDED 2026-10-22, V6 walkthrough batch 3 item 1 -- see the block
   further down that starts "THE JUMP OVERSHOT". The numbers quoted here
   (190px / 131px) and the claim that scroll-padding-top on <html> "covers
   the same ground" were both wrong: the two properties ADD, so the offset
   was 380px on desktop and 280px on mobile against stacks of 204px and
   159px. scroll-padding-top is gone and the offset is now a measured
   custom property on the target alone.
   ===================================================================== */
/* WHY THE OVERFLOW OVERRIDE IS PART OF THIS FIX.
   frontend.css -- shared by every BarnDealer site -- sets
   `html, body { overflow-x: hidden }`. A hidden overflow on one axis
   computes the other axis to `auto`, which makes html AND body scroll
   containers. position:sticky sticks to its nearest scrolling ancestor, so
   the stack was sticking to <body>, and <body> is as tall as the document
   and never scrolls: the header computed as `sticky` and still scrolled
   away. Verified on dev before this was added -- at scrollY 2500 the stack
   sat at top:-2500.

   `overflow-x: clip` clips exactly the same way but does NOT create a
   scroll container, so sticky works. Scoped to .ohb2-html/.ohb2-body so
   the stock and Derksen templates keep frontend.css's rule untouched.
   A browser too old for `clip` drops these two declarations as invalid and
   inherits frontend.css's `hidden` -- no sticky, but no sideways scroll
   either, which is the safe way round. */
html.ohb2-html,
body.ohb2-body {
    overflow-x: clip;
}

/* ...AND WHY THE ROOT ALSO NEEDS overflow-y (V6 walkthrough D1a, 2026-10-22).
   The `clip` above never reached <html>. reset.css:49 sets
   `html { overflow-y: scroll }`, and CSS Overflow 3 forbids clip on one axis
   next to scroll on the other: in that pairing `clip` COMPUTES TO `hidden`.
   Measured on dev before this block was added, iPhone viewport, CriOS UA:
   getComputedStyle(document.documentElement) -> overflowX "hidden",
   overflowY "scroll"  (body was fine: "clip" / "visible").

   So <html> was still a scroll container -- the exact thing the comment above
   says breaks things -- and on iOS that is what puts a blank band under the
   footer: WebKit lays the root scroller out against the toolbars-hidden
   viewport, so at the end of the page the document, the sticky header and the
   fixed back-to-top all sit against the ROOT BOX rather than the visible
   viewport, and the browser paints canvas below it. The reporter's Chrome-iOS
   screenshot matches that to the pixel: the back-to-top is 16px above the end
   of the grey bar (its `bottom:16px`) instead of 16px above the Chrome
   toolbar, and the sticky header is off-screen.

   overflow-y: visible puts both axes back in the visible/clip family, so clip
   stays clip, the root stops being a scroll container and the viewport does
   the scrolling again.

   Desktop is unaffected. reset.css's `overflow-y: scroll` exists to keep a
   scrollbar gutter on pages too short to scroll, so they do not jump sideways
   against tall ones -- measured 2026-10-22 at 1440x900, every ohb2 route is
   taller than the viewport (shortest is the 404 at 1257px), so the scrollbar
   is there either way and nothing moves. No scrollbar-gutter here on purpose:
   it reserves a gutter even where overlay scrollbars reserve none, which
   WOULD narrow the page by 15px. Scoped to .ohb2-html -- stock and Derksen
   templates keep reset.css as-is. */
html.ohb2-html {
    overflow-y: visible;
}

.ohb2-header-stack {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 500;
}

/* Staff only: hold the stack below the fixed admin bar so it does not
   slide underneath it. Matches #bd-admin-bar's 40px height. */
body.bd-has-admin-bar .ohb2-header-stack {
    top: 40px;
}

/* --- V6 WALKTHROUGH BATCH 3, ITEM 1 (2026-10-22): THE JUMP OVERSHOT, IT DID
   NOT FALL SHORT.
   Brian, iPhone / Chrome for iOS: tapping ASK ABOUT THIS SHED scrolled down but
   left the end of the description and a white gap on screen, with the form's
   lower fields (Zip and below) cut off. Measured on dev BEFORE this edit at
   390x844 with the CriOS UA: the section landed 280px down a viewport whose
   sticky stack is 159px tall (199px with the staff admin bar) -- 81px of dead
   band -- and the last field above the fold was exactly `zip`, which is the
   field he named.

   280 = 140 + 140, and that is the whole bug. scroll-padding-top on the SCROLL
   CONTAINER and scroll-margin-top on the TARGET are not alternatives to each
   other: scroll-into-view places the target's scroll-MARGIN box inside the
   scrollport inset by scroll-PADDING, so every engine that honours both adds
   them. The note above called scroll-padding "the same ground for browsers that
   honour it on the scroll container" -- it is the same ground, and it was being
   walked twice. Desktop was 380 against a 204px stack, same arithmetic.

   So: ONE declaration, on the target. scroll-margin-top has shipped in every
   engine since 2019 (Chrome 69, Safari 14.1, Firefox 68) -- the same floor as
   scroll-padding-top -- so dropping the pair costs no browser its offset.

   The height is a custom property because the stack is not one number. Measured
   across widths on dev: 159px up to 700, 167px at 768, 177px to 900, 197px to
   ~1100, 204px from 1280 up. js/ohb2-anchor-offset.js rewrites --ohb2-stack-h
   from the element's REAL height on load and on resize, so the two values here
   are only the no-JS floor; both are chosen to be >= the stack they must clear
   at that breakpoint, so a visitor with JS off still never lands underneath it.
   8px of breathing room on top. --- */
/* Declared on <html> ONLY, never also on <body>. Custom properties cascade like
   any other: a second declaration on body would win for every element inside
   body and would therefore BEAT the inline value ohb2-anchor-offset.js writes on
   <html>. Measured while building this: with the property also on body the
   phone offset stayed at the 167px floor and ignored the measured 159px. */
html.ohb2-html {
    --ohb2-stack-h: 204px;
    --ohb2-admin-bar-h: 0px;
}

/* Staff -- and dev's REVIEW_NOLOGIN mode, which shows the bar to everyone --
   carry #bd-admin-bar, 40px and fixed, and .ohb2-header-stack is held 40px down
   to clear it (see `body.bd-has-admin-bar .ohb2-header-stack` above). An
   anonymous visitor on production has no bar, hence the 0px default. */
body.bd-has-admin-bar {
    --ohb2-admin-bar-h: 40px;
}

.ohb2-page [id],
.ohb2-body [id] {
    scroll-margin-top: calc(var(--ohb2-stack-h) + var(--ohb2-admin-bar-h) + 8px);
}

@media (max-width: 768px) {
    html.ohb2-html {
        --ohb2-stack-h: 167px;
    }
}

/* =====================================================================
   ONE CTA SIZE — #26 + #28 (Mike, ReviewStudio 9/9/2026)

   #26: "let's reduce font size or increase button size to prevent text
        wrapping."  ...and his own reply: "probably reducing font size is best"
   #28: "can we make all CTA buttons the same size and same font size? ...
        I think we should try to find a common button/font size that prevents
        text wrapping and keeps the look consistent"

   MEASURED BEFORE CHOOSING. Across nine ohb2 pages the page-level CTAs ran
   six different font sizes (19, 20, 22, 24, 26, 28px), seven heights (40-71px)
   and twelve paddings. One label wrapped at every width from 768px to 1920px:
   "Custom Design Vaulted Gable", 24px inside a 342px button.

   WHY 18px. That button is 342px wide. The label renders UPPERCASE
   ("CUSTOM DESIGN VAULTED GABLE"), which is what actually has to fit --
   measured in the page's own font it needs 319px at 20px, 303px at 19px and
   287px at 18px. With 24px side padding only 294px is available, so 20px
   cannot fit at any sensible padding: even dropping the side padding to
   12px leaves 318px against 319px needed. 18px clears it with room for a
   fallback face too (Arial runs about 5% wider than Roboto, so ~301px
   against 318px available). 18px is already the size this family drops to
   at mobile, so it is the theme's own value, not a new one.

   15px 24px padding puts the height at ~52px, uniform across the family.

   DELIBERATELY EXCLUDED:
     - card chrome (.ohb2-card-body / .ohb2-inv-card-body "BUY OR RENT NOW",
       Contact Dealer, Images & Details). A different, smaller component;
       Mike's marker did not cover it and flattening it would lose the
       card/page hierarchy.
     - .ohb2-hero-cta-btn. The deck draws those on two lines on purpose.
   ===================================================================== */
.ohb2-body .ohb2-view-all-wrap > a[class*='ohb2-btn'],
.ohb2-body .ohb2-addon-callout > a[class*='ohb2-btn'],
.ohb2-body .ohb2-promo-pane > a[class*='ohb2-btn'],
.ohb2-body .ohb2-cat-promo-pane > a[class*='ohb2-btn'],
.ohb2-body .ohb2-brochure-text-wrap > a[class*='ohb2-btn'],
.ohb2-body .ohb2-cat-brochure-inner a[class*='ohb2-btn'],
.ohb2-body .ohb2-rto-text > a[class*='ohb2-btn'],
.ohb2-body .ohb2-cat-rto-text > a[class*='ohb2-btn'],
.ohb2-body .ohb2-rto-btn-row > a[class*='ohb2-btn'],
.ohb2-body .ohb2-prod-ctas > a,
.ohb2-body a.ohb2-cta-inv,
.ohb2-body a.ohb2-cta-3d,
.ohb2-body .ohb2-quote-submit-wrap > button,
.ohb2-body .ohb2-quote-submit-wrap > a[class*='ohb2-btn'],
.ohb2-body .ohb2-contact-submit-wrap > button,
.ohb2-body .ohb2-rto-form-inner button.ohb2-rto-submit-btn,
.ohb2-body .ohb2-about-two-col-text > a[class*='ohb2-btn'],
.ohb2-body .ohb2-review-btn-wrap > a[class*='ohb2-btn'],
.ohb2-body .ohb2-ohb-sub-text-col a[class*='ohb2-btn'],
.ohb2-body .ohb2-warranty-btn-row > a[class*='ohb2-btn'],
.ohb2-body .ohb2-bldg-specs-col > a[class*='ohb2-btn'],
.ohb2-body .ohb2-bldg-form-submit > button,
.ohb2-body .ohb2-builder-cta-right > a[class*='ohb2-btn'],
.ohb2-body .ohb2-bldg-delivery-cta > a[class*='ohb2-btn'],
.ohb2-body a.ohb2-builder-band-btn {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    padding: 15px 24px !important;
    letter-spacing: 0.01em !important;
}

/* The package-block CTAs are display:block, width:100% inside a 342px
   column, so their side padding does no visual work -- the label is centred
   in the full width either way. They were held at 12px to buy the
   27-character VAULTED GABLE label wrap headroom.

   #26/#28 re-measured 2026-09-21: 24px is safe. All 47 of these buttons on
   /add-on-barn-shed-packages, /specialty-buildings-sheds,
   /lofted-barns-and-utility-sheds and /space-for-your-animals were measured
   at 1440, 1024, 768 and 390 with Roboto 700 loaded -- zero wraps, zero
   overflow, every button still one line at 52px. So they come up to the
   family's 24px rather than keeping a private number.

   HEADROOM, for whoever adds the next label: at 24px the longest label
   ("Custom Design Vaulted Gable", 286.8px rendered) clears its 294px box by
   7.3px at 1440/1024/768 and 15.3px at 390. That is under half a character.
   A longer label WILL wrap here -- re-measure before adding one. */
.ohb2-body .ohb2-prod-ctas > a,
.ohb2-body a.ohb2-cta-inv,
.ohb2-body a.ohb2-cta-3d {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ---------------------------------------------------------------------
   DEALER LOGO ON INTERIOR PAGE HEADINGS — #34, #37, #39 (Mike)

   ONE size and ONE logo-to-title gap for every page that includes
   partials/_dealer-logo.blade.php: blog, About, Contact. The partial emits
   this class and nothing else, so a page can no longer size its own logo.

   SIZE = max 280x110. That is the cap About and Contact already used, 2 of
   the 3 pages. The blog sized itself at 298px wide with no height cap, so
   the same artwork rendered 298x131 there against 251x110 here -- about 19%
   bigger, which is the difference Sara caught by eye on 2026-09-21.

   GAP = 18px. That is the margin About and Contact already authored, again
   2 of 3 (the blog authored 6px). The gap the EYE saw on About and Contact
   was 48px, because frontend.css puts `padding: 30px 0 15px` on every h1
   and that 30px lands between the logo and the heading text. The blog
   already zeroes that padding on its own heading, so the adjacent-sibling
   rule below does the same wherever this logo renders, and 18px is then the
   whole gap on all three pages.
   --------------------------------------------------------------------- */
.ohb2-dealer-logo {
    display: block;
    /* 48px, not the 18px the pages authored. About and Contact rendered at 48
       because frontend.css added 30px of h1 padding on top of their 18; Sara
       reviewed that look on 2026-09-21, liked it, and asked for the blog to
       match it. So the 48 is now stated here rather than arrived at by
       accident, and the h1 padding stays zeroed below. */
    margin: 0 auto 48px;
    max-width: 280px;
    max-height: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Scoped to the heading directly under a rendered logo: a dealer with no
   logo uploaded keeps the heading spacing the page ships with today. */
.ohb2-dealer-logo + h1 {
    padding-top: 0;
    margin-top: 0;
}

@media (max-width: 768px) {
    .ohb2-dealer-logo {
        max-width: 210px;
        max-height: 84px;
        margin-bottom: 14px;
    }
}


/* ---------------------------------------------------------------------------
   Inventory: availability controls (V6)
   Two checkboxes under the Sort and Filter button, always visible, navy box
   with a white check and an uppercase navy label. accent-color paints the
   native control, so the box stays a real checkbox for keyboard and screen
   readers.
   --------------------------------------------------------------------------- */
.ohb2-avail-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 14px 0 0;
}
.ohb2-avail-check {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    line-height: 1;
}
.ohb2-avail-check input[type='checkbox'] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #00567a;
    cursor: pointer;
    flex: 0 0 auto;
}
.ohb2-avail-check span {
    color: #00567a;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
@media (max-width: 600px) {
    .ohb2-avail-check span { font-size: 13px; }
}

/* =====================================================================
   CAROUSEL CHEVRONS — REOPENED 2026-09-17
   ReviewStudio #3 (featured inventory slider next arrow, "looks like the
   top is chopped off these arrows") and #8 (Popular Old Hickory Shed
   Designs left arrow) were closed on 9/14 as "verified working". That
   verification measured the control boxes, not the rendered glyph. Sara
   re-reported it on 9/17 with a screenshot: the chevrons are still chopped.

   Every ohb2 carousel chevron is drawn from a square whose border-top and
   border-right are rotated 45deg, so its RENDERED bounding box is the
   square's diagonal — sqrt(2) x the declared width, ~1.41 x bigger than
   the box the layout reserves for it. Two separate consequences, both
   visible as "chopped":

   (a) FEATURED SLIDER (flexslider). flexslider.css line 127 declares
       overflow: hidden on .flex-direction-nav a, and the ohb2 override
       at ~line 8013 never resets it. The a is 26x44 (18x34 under 700px);
       the 20x20 chevron's rotated box is 28.3px and sits 4.1px above the
       a's top edge and 4.1px past its right edge, so both stroke ends are
       sliced flat. overflow: visible restores the full chevron. The
       control's position and the chevron's declared size are unchanged —
       only the previously clipped ink comes back.

   (b) BUTTON CHEVRONS (designs carousel, catalog gallery, detail-page
       thumb strip). Those controls are display: flex, so the ::before is
       a FLEX ITEM and takes the default flex-shrink: 1. A button's UA
       padding is 1px 6px, so the content box is 12px narrower than the
       control, and the chevron's own margin takes 6-8px more: the item is
       shrunk below its declared square and renders as a lopsided wedge.
       Measured before this fix: the detail-page thumb chevron computed
       8x15px instead of 15x15; the designs chevron at 390px computed
       10x17 instead of 17x17. flex-shrink: 0 holds the declared square.
       justify-content: center means an item wider than the content box
       overflows both sides equally, so the visual centre does not move.
   --------------------------------------------------------------------- */
.ohb2-featured-slider .flex-direction-nav a {
    overflow: visible;
}
.ohb2-designs-carousel-btn,
.ohb2-cat-gallery-btn,
.ohb2-gallery-thumb-prev,
.ohb2-gallery-thumb-next {
    overflow: visible;
}
.ohb2-designs-carousel-btn::before,
.ohb2-cat-gallery-btn::before,
.ohb2-gallery-thumb-prev::before,
.ohb2-gallery-thumb-next::before {
    flex: 0 0 auto;
}

/* =====================================================================
   PASS 2026-09-17 (#7) — the hot-spot picture switches with the hot spot

   Mike, ReviewStudio #7: "the image should switch along with the headline
   and copy. the doc provided should have images for each hot spot." The
   slot was a `::before` carrying ONE fixed photo (promo-ready-to-deliver),
   so all eight hot spots shared a picture of a delivery truck.

   OHB's eight PNGs arrive 280x160 with the gold ellipse frame ALREADY
   DRAWN on them and transparent corners, so the slot must not add a
   `border-radius` or a `border` of its own (that would ring the ring) and
   must not paint a background (that would fill the transparent corners
   with grey). The `::before` is therefore retired rather than re-pointed.

   The reserved box is left exactly as the deck had it -- 254 wide on a
   254/155 box with the same 20px gap under it -- and the art is placed
   `contain`, so the drawn ellipse is 254x145 inside a 155 slot. Keeping
   the BOX identical is what matters: the panel copy, the Build It Now row
   and the whole brand band sit at the same height they did before this
   change, and all eight images are the same size as each other, so
   nothing moves when one replaces another. They are stacked in the one
   slot and cross-faded on opacity -- no reflow, and no first-hover flash
   waiting on a fresh request.
   ===================================================================== */
.ohb2-anatomy-panels::before {
    content: none;
}
.ohb2-anat-thumb {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    max-width: 254px;
    aspect-ratio: 254 / 155;
    margin: 0 auto 20px;
}
.ohb2-anat-thumb-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.ohb2-anat-thumb-img.ohb2-anat-thumb-active {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .ohb2-anat-thumb-img { transition: none; }
}

/* =====================================================================
   PASS 2026-09-21 (a) — HOME HERO: PREV/NEXT CHEVRONS

   Brian: the hero had paging dashes but no arrows, so once the dealer's
   monthly promo banner rotated past there was no way back to it. The
   dashes stay; `heroDirectionNav` is now true on the OHB2 include.

   Style is lifted from the page's other two carousels -- the featured
   slider (`.ohb2-featured-slider .flex-direction-nav`) and the designs
   carousel -- which both draw the chevron from two borders on a ::before
   rather than using a glyph. Same construction, same 20px/5px geometry,
   same 14px/4px step-down at 700px, so it reads as the same control.

   The one thing that is NOT copied is the colour. Those two sit on white,
   so they are #555 -> #1A567A. The hero chevrons sit ON the dealer's
   artwork, which is photographic and changes monthly, so #555 would be
   unreadable on a dark banner. They are white with a drop shadow instead,
   which is the same control adapted to its surface.

   They are vertically centred on the IMAGE, not the wrapper: the wrapper
   includes the dash row underneath, and centring on that pushed the
   chevrons visibly low on the band.
   ===================================================================== */
.ohb2-home-hero .flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ohb2-home-hero .flex-direction-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ohb2-home-hero .flex-direction-nav a {
    position: absolute;
    /* The dash row (16px pad + 7px dash = 23px) is inside this wrapper, so a
       plain 50% sits the chevrons 11.5px low on the band. */
    top: calc(50% - 11.5px);
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    text-shadow: none;
    opacity: 0.85;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.ohb2-home-hero .flex-direction-nav a:hover,
.ohb2-home-hero .flex-direction-nav a:focus-visible { opacity: 1; }
.ohb2-home-hero .flex-direction-nav a::before,
.ohb2-home-hero .flex-direction-nav a::after {
    content: '';
}
.ohb2-home-hero .flex-direction-nav a::before {
    display: block;
    width: 20px;
    height: 20px;
    border-top: 5px solid currentColor;
    border-right: 5px solid currentColor;
    /* flexslider.css:143 sets color: rgba(0,0,0,0.8) on the ::before ITSELF, and
       currentColor on a pseudo-element resolves against the pseudo-element's own
       color -- NOT the anchor color: #fff two rules up. So these painted black,
       measuring 1.0:1 -- 2.7:1 on the four dark slides. State the colour outright.
       (They were fine on the light slide 3 at ~7:1; see the filter note below.) */
    border-color: #fff;
    /* White clears 3:1 on the four dark slides (5.4:1 -- 14.7:1) but NOT on the
       light-wall slide 3, where it measured 1.27:1 / 1.43:1. No single chevron
       colour can clear 3:1 on arbitrary photography -- any fixed luminance is
       defeated by a photo of the same luminance -- so the mark needs a keyline of
       its own. A blurred shadow cannot supply one (it only reached 2.6:1); these
       are 0-blur 1px offsets, i.e. a hard outline. Slide 3 boundary now 3.4:1 --
       5.4:1, and the dark slides are unaffected at 13:1+. */
    filter: drop-shadow(1px 0 0 rgba(0,0,0,0.9)) drop-shadow(-1px 0 0 rgba(0,0,0,0.9))
            drop-shadow(0 1px 0 rgba(0,0,0,0.9)) drop-shadow(0 -1px 0 rgba(0,0,0,0.9));
}
.ohb2-home-hero .flex-direction-nav .flex-prev { left: 10px; }
.ohb2-home-hero .flex-direction-nav .flex-next { right: 10px; }
.ohb2-home-hero .flex-direction-nav .flex-prev::before {
    transform: rotate(-135deg);
    margin-left: 6px;
}
.ohb2-home-hero .flex-direction-nav .flex-next::before {
    transform: rotate(45deg);
    margin-right: 6px;
}
.ohb2-home-hero .flex-direction-nav .flex-disabled {
    opacity: 0.35;
    cursor: default;
}
@media screen and (max-width: 700px) {
    /* dash row is 12px pad + 6px dash = 18px below 700 */
    .ohb2-home-hero .flex-direction-nav a { width: 32px; height: 32px; top: calc(50% - 9px); }
    .ohb2-home-hero .flex-direction-nav a::before {
        width: 14px; height: 14px; border-top-width: 4px; border-right-width: 4px;
    }
    .ohb2-home-hero .flex-direction-nav .flex-prev { left: 4px; }
    .ohb2-home-hero .flex-direction-nav .flex-next { right: 4px; }
}

/* =====================================================================
   PASS 2026-09-21 (b) — INVENTORY CARD PRICE TABLE: STOP THE RAGGED EDGES

   Brian: the prices do not line up. Both cells in every price row carry
   `text-align: center`, so each row centres its own string and nothing
   shares a vertical edge. Measured on /inventory at 1440, three cards,
   offset of the text from its cell's left edge:

     label column   32.89 / 23.39 / 20.39 / 20.39   -> 12.50px ragged
     value column   31.27 / 31.27 / 36.77 / 40.77   ->  9.50px ragged

   It is not just the price column, so centring is dropped on BOTH cells
   rather than only the value -- fixing one alone would leave the card
   half-aligned and read worse. Left, not right: every value ends in
   " +tax", so right-aligning would line up the word "tax" and leave the
   money ragged, while left-aligning stacks the dollar signs.

   Horizontal padding goes 6px -> 10px because once the text is flush it
   sits too close to the cell rule.

   Scoped to the two CARD contexts only. `.ohb2-building-page` shares
   these class names but is the detail page's full-width table, not a
   card, and was not part of this report.
   ===================================================================== */
/* SUPERSEDED 2026-09-22 — the two `text-align` values in the rules below
   were `left` under pass (b) above; they are now `center`, because the
   client's design file draws the price text centred in BOTH cells and the
   design file is the reference. The ragged-edge measurements recorded in
   (b) still hold and are the known cost of this: centring different-length
   values gives each row a different start x. Only `text-align` changed --
   (b)'s 10px horizontal padding and the 47% label split are untouched.
   To revert, put both declarations back to `left`. */
.ohb2-inv-card .ohb2-price-label,
.ohb2-building-card .ohb2-price-label,
.ohb2-inv-card .ohb2-price-value,
.ohb2-building-card .ohb2-price-value {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}
/* The Internet Price value re-declares `padding: 10px 6px` on its own at
   ohb2.css:4538 with four classes of specificity, which outranks the
   two-class rule above -- so without this it kept a 6px inset and sat 4px
   left of every other value. Measured: 10 / 6 / 10 / 10 before, all 10
   after. Same specificity as 4538 and later in the file, so it wins. */
.ohb2-inv-card .ohb2-price-row.internet-row .ohb2-price-value,
.ohb2-building-card .ohb2-price-row.internet-row .ohb2-price-value {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

/* =====================================================================
   PASS 2026-09-21 (c) — "APPLY FILTERS" IS SET TOO BIG

   Brian reported it at mobile, but measuring it with the filter panel
   forced open shows it wraps at EVERY width, not just small ones:

     1440  22px, 223.9 x 55.3  -> 2 lines
      390  22px, 223.9 x 55.3  -> 2 lines
      360  22px, 203.7 x 80.6  -> 3 lines

   Its actual neighbours inside the panel are 13px (.ohb2-filter-clear,
   .ohb2-fgroup-toggle, .ohb2-sort-select), so 22px is not close to
   anything around it. It is still the panel's primary action, so it goes
   to 16px rather than all the way down to the 13px of the links beside
   it -- big enough to lead, inside the range of its neighbours.

   The wrap was a width problem as much as a size one: at 22px the label
   needs ~155px but the padding (34px a side) left only 155.9px of the
   223.9px button, so it broke. 16px with 22px padding leaves ~113px of
   label in ~160px of room. `white-space: nowrap` then guarantees it,
   since this label must never break.

   Scoped to .ohb2-filter-actions so no other .ohb2-btn-blue moves.
   ===================================================================== */
.ohb2-filter-actions .ohb2-btn-blue {
    font-size: 16px;
    padding: 12px 22px;
    white-space: nowrap;
}

/* =====================================================================
   PASS 2026-09-21 (d) — FOOTER: NO 240px HEIGHT FLOOR ONCE IT STACKS

   `.ohb2-footer-inner > .ohb2-footer-col` takes `flex: 1 1 240px` in the
   900px block (line ~7129). While the footer is still a ROW that basis is
   a WIDTH, and it is what makes the three columns wrap sensibly.

   But at 700px `.ohb2-footer-inner` becomes `flex-direction: column`
   (line ~1047), and flex-basis follows the main axis -- so the same 240px
   silently turns into a minimum HEIGHT on every stacked column. Measured
   at 390 and 360:

     address column   240 tall / 249.6 content  ->   0px slack
     centre column    240 tall /  99.0 content  -> 141px of empty grey
     hours column     240 tall / 211.5 content  ->  28.5px slack

   The centre column holds a 93px logo in a 240px box, which is the gap
   Brian would see. `flex: 0 0 auto` gives every stacked column its
   content height back and drops ~170px of dead grey out of the footer.

   Deliberately scoped to the same max-width:700px the column switch uses,
   so the desktop row (`flex: 1 1 0`, >900) and the 701-900 wrap case,
   where 240px is still doing its job as a width, are both untouched.
   ===================================================================== */
@media screen and (max-width: 700px) {
    .ohb2-footer-inner > .ohb2-footer-col {
        flex: 0 0 auto;
    }
}

/* =====================================================================
   PASS 2026-09-21 (e) — INVENTORY SORT/FILTER BAR ON A PHONE

   Review note: "at 390 the Sort and Filter button stretches the full
   width and the hamburger is not right-aligned", i.e. it reads as
   unfinished. Measured at 390 before: the row is a column from the 600px
   block (line ~1783) but `align-items: stretch` from the 700px block
   (line ~4746) wins, so the button is stretched to 350px while its own
   content -- "Sort and Filter" plus the three-rule glyph -- needs 191px.
   That leaves 159px of empty navy to the right of the hamburger. The
   items-per-page cluster is stretched the same way and then pushed to
   the RIGHT by its `align-items: flex-end` (line ~4412), so the stack
   read left / right / left down the page: button text left, ITEMS PER
   PAGE right, availability checkboxes left again. Three edges, which is
   what looks unfinished more than the width does.

   He suggested moving the hamburger and shrinking the button; the
   simpler read of the same symptom is to give the whole stack ONE left
   edge. The button takes its content width (so the glyph sits next to
   the words instead of floating), and the items-per-page label and
   select left-align under it, on the same 20px margin as the button and
   the availability checks below.

   Measured after, 360 and 390: button 191x42 at x=20 at both widths, one
   line, no wrap, glyph ending at x=191; label and select both at x=20;
   no horizontal overflow; section height unchanged at 196px.

   Scoped to max-width:600px, which is where the row already becomes a
   column -- 601 to 700 keeps its horizontal button-left/count-right row,
   and desktop is untouched. Revert = delete this block.
   ===================================================================== */
@media screen and (max-width: 600px) {
    .ohb2-filter-bar-row {
        align-items: flex-start;
        gap: 14px;
    }
    .ohb2-inventory-page .ohb2-filter-toggle-btn {
        align-self: flex-start;
    }
    .ohb2-items-per-page-wrap {
        align-items: flex-start;
    }
}

/* =====================================================================
   PASS 2026-09-21 (f) — #23: ONE SPACE BELOW THE PROMO-DUO HEADING

   #23 is "standardise the space below content headers". The two headings
   Mike marked are done (both 26px), but the verification pass measured
   150 headings across 8 pages and found the promo-duo heading -- ONE
   component, the "Shop Our Ready-To-Deliver Shed Inventory!" / "FREE Shed
   Delivery" / "Get a Mobile-friendly Brochure" pane heading -- spacing
   itself four different ways at 1440:

       .ohb2-cat-promo-pane h3            22px   lofted / upgrades / addon
       .ohb2-promo-duo-inv ... h3         23px   inventory
       .ohb2-promo-pane h3                24px   home / contact
       ...promo-duo-about ... h3          25px   about

   Four values within 3px of each other is not a tier system, it is drift:
   nobody chose 22 over 23. They are all set to the 26px the two headings
   Mike actually marked already use, so the component spaces the same way
   on every page that carries it.

   One selector for all four families, matching the class PATTERN the way
   the promo-duo seam rule near line 8700 does, because the same
   composition ships under .ohb2-promo-duo, .ohb2-promo-duo-inv and
   .ohb2-cat-promo-duo. (0,2,1) beats .ohb2-cat-promo-pane h3 (0,1,1) in
   ohb2-catalog.css, and ties .ohb2-promo-duo-inv .ohb2-promo-pane-inv h3
   (0,2,1) but sits later in this file, so it wins on order. About's own
   override in ohb2-pages.css -- which loads after this file and would
   outrank it at (0,3,1) -- had its margin-bottom removed in the same
   commit so this rule is the single source.

   The <=900 tier is the value the -inv panes already used once stacked,
   applied to the whole family for the same reason.

   NOT changed: the font SIZE, which runs 38/36/32/30 across these pages.
   Each is measured off that page's own column width and the two-line wrap
   depends on it -- unifying type is the site-wide typographic scale job,
   which is explicitly not this pass and would be rework before the 26px
   standard itself is signed off. This changes spacing only.

   Revert = delete this block (and About goes back to its own 25px only if
   that declaration is restored).
   ===================================================================== */
[class*="promo-duo"] [class*="promo-pane"] h3 {
    margin-bottom: 26px;
}
@media screen and (max-width: 900px) {
    [class*="promo-duo"] [class*="promo-pane"] h3 {
        margin-bottom: 18px;
    }
}

/* =====================================================================
   PASS 2026-09-24 (a) — POPULAR DESIGNS CHEVRONS vs THE WIDER COLUMN

   The rail hangs its chevrons OUTSIDE the content column (left/right
   -46px) while .ohb2-designs-section only carries a 20px side gutter.
   The overhang therefore only fits when the viewport has 46px to spare
   outside a full-width column, i.e. from 1242px up. Below that the
   chevrons run off the left edge - already true at 940 (the old clip band
   was ~900-1072) and at 1150 it would cover the 1280 and 1366 laptops
   this build is being reviewed on.

   Fixed by pulling the chevrons INBOARD in that band rather than by
   padding the section: padding the section holds the rail 32px narrower
   than the Featured Inventory row directly above it, and those two rows
   sitting on different left edges is the more visible fault. At -14px the
   glyph sits on the outer card's edge, which is what the <= 900 tier
   already does. From 1250px up the chevrons are fully outside the column
   as drawn, so 1440 and 1920 are unchanged.
   ===================================================================== */
@media (min-width: 901px) and (max-width: 1249px) {
    .ohb2-designs-carousel-prev { left: -14px; }
    .ohb2-designs-carousel-next { right: -14px; }
}

/* The designs rail sat on a 20px gutter while every other band on the page
   is a `.ohb2-wrap` on 40px (its section's 20px plus the wrap's own 20px).
   Both were capped at 940 before, so they only diverged below ~1020px and
   nobody saw it; at 1150 the divergence band moves to 1024-1230, straight
   through the common laptop widths, and the Popular Designs row printed
   20px proud of the Featured Inventory row above it. Give the rail the
   same gutter pattern as `.ohb2-wrap` so the two rows share one left edge
   at EVERY width. Nothing moves at 1280 and up, where both are capped. */
/* Desktop only. Below 901px the rail is the 2-up / 1-up stack and the
   Featured row has already gone to its own wrapped layout, so there is no
   edge to line up with — adding the gutter there just took 20px off every
   mobile card (390: 315 -> 280). */
@media (min-width: 901px) {
    .ohb2-designs-inner {
        max-width: var(--ohb2-col-gutter);
        padding: 0 20px;
    }
}

/* =====================================================================
   PASS 2026-09-24 (b) — TYPE SCALE, toward the live BD dealer sites

   Mike: the reskin's column is much narrower than the BD sites he is used
   to, which forced every font smaller, and the Popular Designs hover copy
   is "borderline illegible". Pass (a) put the column on the live BD 1150.
   This pass brings the type back up now that there is room for it.

   MEASURED on the live stock theme at 1440 and 1920 (shedsmurfreesboro.com,
   shedsbowlinggreen.com, and the stock oldhickory/derksen dealers on dev —
   all four identical):

       content column   1150px        body copy      19px / 30px
       h1 / h2          35px          h3             19px bold
       nav link         20px bold     card caption   16px
       hero CTA         28px bold     footer copy    19px / 30px

   This does NOT copy those numbers across. The ohb2 deck is a denser
   layout than the stock theme — more components per band, a 3-up rail the
   stock theme does not have — so the rule here is proportional: each
   component moves up by roughly the 1.22 the column moved, capped at the
   live value where the component has a direct counterpart, and NOT moved
   at all where ohb2 already sits at or above live. Section headings stay
   at 38 (live is 35) and the hero CTA stays as drawn; raising those would
   flatten the hierarchy, not improve legibility.

   Everything here is prefixed `.ohb2-body` so it outranks the single-class
   rules in ohb2-catalog.css and ohb2-pages.css, which load AFTER this file
   on their pages.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. POPULAR DESIGNS HOVER COPY — the headline complaint

   10.5px on 14.3px leading. That number was not a style choice: the copy
   is verbatim OHB content running 387-473 characters, and at the old
   300px card that was the largest size at which all six descriptions
   rendered in full. The copy is not ours to cut, so the size followed the
   box.

   The 1150 column takes the card from 301 to 371 wide, which is what buys
   the size back. SOLVED, not estimated: every candidate was injected onto
   the live dev page and all six descriptions measured for clipping
   (scrollHeight vs clientHeight, line-clamp removed). 14.5px/1.45 is the
   largest size at which all 6 of 6 still render in full with zero
   overflow. 15px clips 5 of the 6.

   NOT changed: `aspect-ratio: 299/196` on the image frame. Going taller
   (299/245) would fit 16px, but the source renders are 530x300 and
   `background-size: cover` would then crop ~15% off each side of the shed
   instead of the current ~7%. Trading a legible caption for a cropped
   product shot is not a trade worth making, and it is Mike's call, not
   ours. See the report for the two options if he wants 16px+.
   --------------------------------------------------------------------- */
/* The size has to track the CARD, not the viewport. The card is a fixed
   371px from 1250px up, but between 901 and 1249 it divides whatever the
   column can give (261px at 901), and the frame's height follows its width
   via `aspect-ratio`. So a flat 14.5px reads well at 1440 and cuts the copy
   dead at 1024 — which is exactly what it did on the first attempt here.

   Container query units solve it at the source: 3.55cqw is 3.55% of the
   card's own width, so the type/box ratio is constant at every breakpoint
   and the copy fits by construction rather than by a ladder of guesses.
   Above 1250 the card stops growing, so the desktop value is stated flat at
   the measured ceiling. The px value is a fallback for anything without
   container query support.

   BOTH numbers are measured, not chosen. Every candidate was injected onto
   the live dev page and all six descriptions checked for clipping at 18
   viewports from 360 to 1920:

     3.55cqw / 14.5px   6 of 6 fit at all 18 viewports
     3.75cqw / 15px     5 of 6 clip at 1250-1920 (worst 25px), 4 of 6 at 901
     3.90cqw / 15.5px   6 of 6 clip at 1250 (worst 32px)

   14.5px is therefore the ceiling for the frame as drawn, not a preference.
   Going higher needs a taller image frame (which would crop the shed
   renders) — see the note above. */
.ohb2-design-card {
    container-type: inline-size;
}
.ohb2-body .ohb2-design-card-desc {
    font-size: 11px;
    font-size: 3.55cqw;
    line-height: 1.45;
    padding: 8px 16px 2px;
}
@media (min-width: 1250px) {
    .ohb2-body .ohb2-design-card-desc { font-size: 14.5px; }
}
/* The clamp no longer does any work — the copy fits everywhere — so it is
   set well clear of the longest description (473 chars) and left only as an
   ellipsis guard for whoever adds a longer one. */
.ohb2-body .ohb2-design-card-desc { -webkit-line-clamp: 14; }

/* Caption bar: 13px was the size at which a 57-character title held two
   lines in a 301px card. At 371 it holds two lines at 16px, which is the
   live theme's card-caption size. min-height follows so the two-line case
   is not clipped. */
.ohb2-body .ohb2-design-card-title {
    font-size: 16px;
    line-height: 1.25;
}
.ohb2-body .ohb2-design-card-info {
    min-height: 58px;
    padding: 9px 12px;
}
.ohb2-body .ohb2-design-card-customize a {
    font-size: 13px;
    /* 6px of padding put the button at 42px tall and took the copy box under
       nine lines at 1440, clipping four of the six descriptions by one line.
       5px holds it at 40px, which is what the fit above is measured against. */
    padding: 5px 18px;
}

/* ---------------------------------------------------------------------
   2. BODY COPY — the largest single block of text on the theme

   ~33,000 characters across the 13 pages inherit their size from
   `.ohb2-body`, which was 16px/24px. Live BD sets the same copy, in the
   same face, in the same 1150 column, at 19px/30px. 18px/1.55 is one step
   short of live: it is a 12.5% lift with the leading opened to match,
   which is the "a bit closer" Sara asked for rather than a straight copy.
   2026-09-24, Sara: go to exact parity. 19px/1.58 is live BD's 19px on
   30px leading (30/19 = 1.579), the same copy in the same face in the same
   1150 column, so there is no reason for ours to sit a step under it.
   --------------------------------------------------------------------- */
.ohb2-body {
    font-size: 19px;
    line-height: 1.58;
}

/* Hero paragraph under the dealer name: this one IS a direct counterpart
   to the live theme's body copy, in the same role and the same column, so
   it goes to the live value exactly. */
.ohb2-body .ohb2-brand-copy {
    font-size: 19px;
    line-height: 1.58;
}

/* ---------------------------------------------------------------------
   3. CARD TEXT — inventory cards and the homepage featured row

   These were cut to 15/14/12px in the 2026-09-01 refit for the 287-301px
   card the 940 column produced, with the price labels held on one line by
   `white-space: nowrap`. The card is now ~371px, so they come back up by
   about the same proportion. The nowrap guard stays — it is what keeps
   "36-Month RTO:" off a second line — and the whole set is re-checked for
   overflow at 390 through 1920.
   --------------------------------------------------------------------- */
.ohb2-body .ohb2-card-name-text,
.ohb2-body .ohb2-inv-card .ohb2-inv-card-name-band {
    font-size: 18px;
}
.ohb2-body .ohb2-card-sku-text,
.ohb2-body .ohb2-inv-card-sku {
    font-size: 14px;
}
.ohb2-body .ohb2-inv-card .ohb2-price-row,
.ohb2-body .ohb2-building-card .ohb2-price-row,
.ohb2-body .ohb2-building-page .ohb2-price-row {
    font-size: 17px;
}
.ohb2-body .ohb2-card-btn-row .ohb2-btn-outline {
    font-size: 16px;
}

/* ---------------------------------------------------------------------
   4. SMALL LABELS — the set that sat furthest under the live theme
   --------------------------------------------------------------------- */
.ohb2-body .ohb2-swatch-name      { font-size: 15px; }
.ohb2-body .ohb2-swatches-note    { font-size: 13px; }
.ohb2-body .ohb2-prod-block-label { font-size: 13px; }
.ohb2-body .ohb2-prod-sub         { font-size: 17px; }
.ohb2-body .ohb2-testimonial-quote { font-size: 16px; line-height: 1.6; }
.ohb2-body .ohb2-inv-intro-copy   { font-size: 19px; line-height: 1.58; }
.ohb2-body .ohb2-quote-subheading { font-size: 17px; }
.ohb2-body .ohb2-quote-prompt     { font-size: 21px; }
.ohb2-body .ohb2-faq-header       { font-size: 20px; line-height: 1.25; }
.ohb2-body .ohb2-bldg-desc-single { font-size: 17px; }

/* ---------------------------------------------------------------------
   5. NAV AND FOOTER

   Live nav links are 20px bold and live footer copy is 19px/30px. Ours go
   to 18px: the ohb2 bar carries eight items against the stock theme's six,
   so 20px is the size at which the bar wraps. 18px is measured to hold one
   row down to 901px, where the mobile drawer takes over.
   --------------------------------------------------------------------- */
.ohb2-body .ohb2-nav-menu > li > a {
    font-size: 18px;
}
.ohb2-body .ohb2-footer-hours-row,
.ohb2-body .ohb2-map-link,
.ohb2-body .ohb2-footer-inner a,
.ohb2-body .ohb2-footer-col p,
.ohb2-body .ohb2-footer-col li {
    font-size: 18px;
}
.ohb2-body .ohb2-footer-biz-name {
    font-size: 19px;
}

/* ---------------------------------------------------------------------
   6. SUB-HEADINGS THAT THE NEW BODY SIZE WOULD HAVE OVERTAKEN

   Not a "make it bigger" change — these four sat at 15-18px, so an 18px
   body would have printed the heading at or below its own paragraph and
   inverted the hierarchy. They move just far enough to stay above it.
   --------------------------------------------------------------------- */
.ohb2-body .ohb2-standards-item h3      { font-size: 19px; }
.ohb2-body .ohb2-bldg-model-subheading  { font-size: 20px; }
.ohb2-body .ohb2-contact-hours h3       { font-size: 20px; }
/* The contact page's Business Hours rows sat at 16px, the same size as the
   address block directly above them. Taking that address to 19px with the
   rest of the body copy left the hours 3px adrift inside one block, which
   reads as a mistake. They are the same block, so they take the same size.
   The FOOTER hours row is a different component and stays at 18px. */
.ohb2-body .ohb2-contact-hours-row      { font-size: 19px; }
.ohb2-body .ohb2-prod-block-content h3  { font-size: 20px; }

/* =====================================================================
   PASS 2026-09-24 (c) — BODY COPY, the rest of it

   Pass (b) lifted `.ohb2-body` from 16px to 18px expecting the page copy
   to follow. Most of it did not: ohb2-catalog.css and ohb2-pages.css set
   the size explicitly on ~30 per-section selectors, so the inherited value
   never reached them. Checked with CDP matched-styles on all 13 pages
   rather than by reading the files, because those two stylesheets load
   AFTER ohb2.css on their own pages and several of the rules are late
   overrides of earlier ones in the same file.

   This is that list. Every selector below is the rule that actually WINS
   font-size for that copy today; each is re-stated with one extra class
   (`.ohb2-body`) so it outranks its own source wherever that source sits.
   Sizes move by role, not by a blanket multiplier:

       11px -> 13px     the product-tile label, the smallest type on the site
       13px -> 15px     swatch names
       14px -> 16px     secondary list copy
       15px -> 17px     sub-labels and spec lists
       16px -> 18px     page body copy  (live BD sets the same copy at 19px)

   The 16 -> 18 group is the bulk of it: ~60,000 characters of running copy
   that was sized for the 940 column.
   ===================================================================== */

/* --- page body copy : 16px -> 19px, exact live BD parity ---------- */
.ohb2-body .ohb2-prod-block-content > p,
.ohb2-body .ohb2-prod-block-content ul li,
.ohb2-body .ohb2-catalog-intro p,
.ohb2-body .ohb2-cat-rto-text p,
.ohb2-body .ohb2-upgrades-intro p,
.ohb2-body .ohb2-upgrade-block p,
.ohb2-body .ohb2-upgrade-block ul li,
.ohb2-body .ohb2-rto-intro-inner > p,
.ohb2-body .ohb2-rto-right-inner > p,
.ohb2-body .ohb2-rto-body-inner p,
.ohb2-body .ohb2-rto-cta-inner > p,
.ohb2-body .ohb2-rto-checklist li,
.ohb2-body .ohb2-rto-text p,
.ohb2-body .ohb2-warranty-intro-section > p,
.ohb2-body .ohb2-warranty-instructions li,
.ohb2-body .ohb2-about-intro-inner p,
.ohb2-body .ohb2-about-two-col-text p,
.ohb2-body .ohb2-about-ohb-inner p,
.ohb2-body .ohb2-ohb-sub-text-col p,
.ohb2-body .ohb2-ohb-sub-text-col li,
.ohb2-body .ohb2-contact-intro-inner > p,
.ohb2-body .ohb2-contact-info-col p,
.ohb2-body .ohb2-contact-form-intro,
.ohb2-body .ohb2-anat-panel p,
.ohb2-body .ohb2-bldg-desc-single p,
.ohb2-body .ohb2-inventory-page .ohb2-inv-intro-copy,
.ohb2-body .ohb2-inventory-page .ohb2-inv-intro p {
    font-size: 19px;
    line-height: 1.58;
}

/* --- 17px -> 19px : running list copy, same status as the paragraphs */
.ohb2-body .ohb2-rto-advantages ul li,
.ohb2-body .ohb2-cat-rto-advantages ul li {
    font-size: 19px;
    line-height: 1.58;
}
/* --- 17px -> 18px and NO further: the building spec table is data, the
       same family as the price rows, and the footer is footer. Sara's 19px
       is the BODY size; neither of these is body copy. ------------------ */
.ohb2-body .ohb2-bldg-specs-table th,
.ohb2-body .ohb2-bldg-specs-table td,
.ohb2-body .ohb2-footer-address,
.ohb2-body .ohb2-footer-phone,
.ohb2-body .ohb2-footer-email {
    font-size: 18px;
}

/* --- 15px -> 17px : sub-labels and spec lists ---------------------- */
.ohb2-body .ohb2-standards-item p,
.ohb2-body .ohb2-builder-cta-right p,
.ohb2-body .ohb2-prod-block-content h3 .ohb2-prod-sub,
.ohb2-body .ohb2-sizes-col strong,
.ohb2-body .ohb2-sizes-col ul li,
.ohb2-body .ohb2-inventory-page .ohb2-ipp-label,
.ohb2-body .privacy-policy-page .highlight-box p,
.ohb2-body .privacy-policy-page .contact-block {
    font-size: 17px;
}
/* frontend.css sets these with !important and they are SHARED with the stock
   themes, so they are matched here rather than edited there.

   These three moved again when the body went to 19px (2026-09-24, Sara):
   at 17/18 the privacy page printed its headings SMALLER than its own
   paragraphs, and the standards card printed its heading the same size as
   its copy. Not a "make it bigger" change — the ladder had inverted, and
   this is the smallest move that puts it back: 28 / 24 / 21 over a 19 body.
   Scoped to `.ohb2-body`, so the stock oldhickory and derksen privacy pages
   are untouched. */
.ohb2-body .privacy-policy-page h2 {
    font-size: 24px !important;
}
.ohb2-body .privacy-policy-page h3 {
    font-size: 21px !important;
}

/* --- 14px -> 16px : secondary list copy ---------------------------- */
.ohb2-body .ohb2-bldg-delivery-text p,
.ohb2-body .ohb2-ohb-sub-text-col ul li,
.ohb2-body .privacy-policy-page header p {
    font-size: 16px;
}

/* --- 13px -> 15px / 14px : the smallest labels --------------------- */
/* ohb2-catalog.css sets the swatch name with !important, so this has to
   match it to win. */
.ohb2-body .ohb2-swatch-name {
    font-size: 15px !important;
}
.ohb2-body .ohb2-testimonial-author {
    font-size: 14px;
}

/* --- 11px -> 13px : the smallest type on the site ------------------ */
/* The winning rule is `.ohb2-prod-block-img .ohb2-prod-block-label`, which
   outranked the flat `.ohb2-prod-block-label` in pass (b). */
.ohb2-body .ohb2-prod-block-img .ohb2-prod-block-label {
    font-size: 13px;
}

/* --- header: live BD runs the call-out at 30px, ours at 19/24 ------ */
.ohb2-body .ohb2-hdr-call-label { font-size: 20px; }
.ohb2-body .ohb2-hdr-phone      { font-size: 26px; }
.ohb2-body .ohb2-footer-hours-title { font-size: 19px; }

/* --- privacy policy: shared markup, ohb2-scoped so the stock themes are
       not touched (frontend.css owns these selectors for every theme) --- */
.ohb2-body .privacy-policy-page p,
.ohb2-body .privacy-policy-page li {
    font-size: 19px;
    line-height: 1.58;
}

/* =====================================================================
   NOT CHANGED, and why — the CTA family stays at 18px.

   Mike's earlier note left the secondary CTA at 18px/52px because 20px
   overflowed the uppercase "CUSTOM DESIGN VAULTED GABLE" button. Re-checked
   here against the wider column, across 984 buttons at 390/768/1024/1280/1440:

     18px   tightest label clears its box by 0px   (no overflow)
     20px   "Custom Design Vaulted Gable" over by 25px, "USE OUR 3D
            BUILDER!" and "DOWNLOAD IT NOW" over by ~21px

   The column got wider but these buttons did NOT, and correctly so: 342x56
   is the deck's theme-wide DRAWN button, an absolute size reused across
   every secondary CTA, not a fraction of the content column. So the wider
   column buys the buttons no headroom at all and 18px is still the ceiling.
   Going higher needs a wider button than the deck draws, which is Mike's
   call, not a side effect of this pass.
   ===================================================================== */

/* =====================================================================
   PASS 2026-09-24 (e) — PHONE SIZES for the type raised in (b)/(c)/(d)

   Passes (b)-(d) raised the type because the CONTENT COLUMN went 940 -> 1150
   and the inventory card with it, 301px -> 371px. Every one of those rules is
   written `.ohb2-body .thing`, two classes. The theme's existing phone block
   (`@media screen and (max-width: 700px)`, ohb2.css L4196 and L4803) sizes the
   same things with ONE class, and a media query adds no specificity — so the
   desktop sizes won at every width and the phone inherited a set of numbers
   measured for a 371px card.

   Sara, 2026-09-24, on an iPhone: the featured cards are "really giant". They
   were: at 390 the price rows went 14px -> 17px, "CONTACT DEALER" and
   "$6,125.00 +tax" no longer fitted their cell, and each row went from 44px to
   76px tall — 1.7x, on all four rows of every card.

   This block is the phone half of that work. It only touches components whose
   box did NOT get wider on a phone — the card, the designs caption, the FAQ
   header, the swatch label. Running body copy is deliberately NOT here: live
   BD serves its body copy at 19px at 390 (measured on shedsmurfreesboro.com,
   dpr 3, iPhone UA), which is exactly what pass (c) set, so the phone is
   already at parity and correct.

   Measured with a Range over each element's text, which yields one client
   rect per rendered line and so cannot be fooled by padding the way a
   height/line-height ratio can. Checked at 360, 390 and 430.
   ===================================================================== */

/* iOS inflates text in some layouts when this is left at `auto`. The design
   is responsive and already sized per breakpoint, so the phone should render
   the sizes below and no others. */
.ohb2-body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media screen and (max-width: 700px) {

    /* --- inventory + featured card ---------------------------------
       The card is ~318px at 390, NARROWER than the 371px desktop card these
       sizes were measured for. Every cell holds one line at 360/390/430:

                     desktop   was (390)   now (390)
         card name     18px      18px        16px
         SKU           14px      14px        12px
         price rows    17px      17px        14px   <- the "giant" rows
         card buttons  16px      16px        14px

       At 14px the price row is 44px tall against 76px, and the longest
       value on the page, "CONTACT DEALER", holds one line at 360. 15px also
       fits at 390 but not at 360, so 14 is the size with a phone's worth of
       margin rather than the largest that happens to pass. ------------- */
    .ohb2-body .ohb2-card-name-text,
    .ohb2-body .ohb2-inv-card .ohb2-inv-card-name-band {
        font-size: 16px;
    }
    .ohb2-body .ohb2-card-sku-text,
    .ohb2-body .ohb2-inv-card-sku {
        font-size: 12px;
    }
    .ohb2-body .ohb2-building-card .ohb2-price-row,
    .ohb2-body .ohb2-inv-card .ohb2-price-row {
        font-size: 14px;
    }
    .ohb2-body .ohb2-card-btn-row .ohb2-btn-outline {
        font-size: 14px;
    }

    /* The building DETAIL page's own price table is a different component —
       it is full width on a phone, and its labels and values were measured
       holding one line at 360 even at 17px. It is left alone on purpose. */

    /* --- Popular Designs caption, FAQ headers, testimonial quote ----
       Each of these was sized against the widened DESKTOP box and each sits
       in a phone box that did not widen, so each cost lines:

                            phone before   pass (b)-(d)   measured cost
         design card title      12px           16px       1 line -> 2
         FAQ header             15px           20px       2 lines -> 6, one to 7
         testimonial quote      14px           16px       3 lines -> 4

       Intermediate sizes were tried and still cost lines (13px titles still
       wrapped, 17px headers still ran to 4), so rather than pick a number
       that is merely less wrong, all three go back to the value the phone
       rendered before today. Desktop keeps the new sizes. */
    .ohb2-body .ohb2-design-card-title {
        font-size: 12px;
    }
    .ohb2-body .ohb2-faq-header {
        font-size: 15px;
    }
    .ohb2-body .ohb2-testimonial-quote {
        font-size: 14px;
    }

    /* --- swatch labels ---------------------------------------------
       ohb2-catalog.css has always sized these per breakpoint and with
       !important: 13px on desktop, and `font-size: 10px !important` inside
       its own `max-width: 700px` block, alongside a smaller min-height and
       padding and a 3-across grid. Pass (d) raised the desktop value with
       `.ohb2-body .ohb2-swatch-name { font-size: 15px !important }`
       specifically to outrank the catalog sheet — which it did at EVERY
       width, so it took out the phone rule too and put 15px type in a 97px
       cell. This restores the catalog sheet's own phone value; it needs
       !important only because the rule it is undoing has it.

       NOTE, measured: the two-word names wrap in this cell at every size
       from 10px to 15px. That wrap is the cell width, not the type size,
       and this rule is not claimed to fix it. */
    .ohb2-body .ohb2-swatch-name {
        font-size: 10px !important;
    }
}


/* =====================================================================
   PASS 2026-09-24 (f) — contact Business Hours leading

   The address block and the Business Hours rows directly under it are one
   visual block on /contact-us and were built to match: ohb2-pages.css sets
   BOTH to `line-height: 20px`, copying live BD's 20px rows.

   Pass (c) then took the address to 19px/1.58 with the rest of the body copy
   through `.ohb2-body .ohb2-contact-info-col > p`, two classes, and pass (b)
   took the hours rows to 19px through `.ohb2-body .ohb2-contact-hours-row` —
   but that rule set size only, so the hours kept the 1-class 20px leading
   from ohb2-pages.css. Measured on dev, at 390 and at 1440 alike:

       address lines   19px on 30.02px    (1.58)
       hours rows      19px on 20px       leading BELOW the font size

   which is why the hours read cramped against the block above them. Same
   leading as the address, so the block is internally consistent again.
   Two classes because the 20px rule it overrides sits in a sheet that loads
   after this one. This adds ~70px to the seven-row hours block, which is the
   cost of the rows no longer overlapping their own leading.
   ===================================================================== */
.ohb2-body .ohb2-contact-hours-row {
    line-height: 1.58;
}


/* =====================================================================
   PASS 2026-09-24 (g) — the brochure device, both compositions

   THE ASSET. brochure-device-mockup.jpg is 900x474 and carries its padding
   as baked-in white. Sampled off the file itself, stable for every luma
   threshold at or below 240, the artwork occupies:

       x 107..817   711 of 900   =  79.000% wide, 11.8889% of white to its left
       y  70..420   351 of 474   =  74.051% tall, 14.7679% of white above

   The white is NOT symmetric, so `background-position: center` can never put
   the laptop's edge anywhere predictable — which is why this needed numbers
   rather than a keyword. Everything below is derived from those four figures.
   Blowing the file up to 100/0.79 = 126.582% of the slot makes the ARTWORK
   exactly slot-width; a background-position percentage P places the image at
   P x (slot - image), so the offset that lands the artwork's own edge on the
   slot's edge is P = -pad / (frac - 1).

       x:  -0.118889 / (0.79 - 1)          = 0.566138  -> 56.614%

   Two compositions use this asset and they want different vertical answers.
   ===================================================================== */

/* ---------------------------------------------------------------------
   (1) THE FULL-WIDTH BAND — home and contact

   Sara: it should span the full content width, be spaced evenly against the
   section above, the art should be larger, and the heading and button should
   be centred like SEE IT IN ACTION rather than stranded at the left of their
   half with a big empty area to the right.

   The band now runs on the SAME two tracks as the promo cards above it. That
   pair is a flex row of two panes with no gutter, 575 each at 1440, and each
   pane carries `padding: 10px 20px 24px` — so the card ARTWORK, the thing the
   eye actually lines up against, sits at 165..700 and 740..1275, and the
   buttons are 342px centred on each pane. Matching all three is what makes
   the band read as part of the same system:

       device slot   grid track 1 + the pane's own 20px  ->  art 165..700
       text          grid track 2, centred               ->  centre 1007.5,
                                                             same as SEE IT IN ACTION
       button        342px, centred                      ->  same box as SHOP NOW

   The device slot is given the ARTWORK's aspect (711/351) rather than the
   file's (900/474), so the slot IS the laptop with no white slack around it.
   That is what lets `align-items: center` centre the text against the visible
   art instead of against a box of mostly white, and it removes the ~48px of
   dead space that was sitting under the heading.

       y:  -0.147679 x 0.666667 / (0.493671 - 0.666667) = 0.569106 -> 56.911%
   --------------------------------------------------------------------- */
.ohb2-body .ohb2-brochure-block .ohb2-brochure-block-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    align-items: center;
    justify-content: initial;
    max-width: var(--ohb2-col);
}
.ohb2-body .ohb2-brochure-block .ohb2-brochure-device {
    flex: none;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0 20px;              /* the promo pane's own inset, so the art
                                     starts where the card artwork starts */
    background: transparent;
    overflow: visible;
}
.ohb2-body .ohb2-brochure-block .ohb2-brochure-device-img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 711 / 351;      /* the artwork's box, white trimmed */
    background-size: 126.582% auto !important;
    background-position: 56.614% 56.911% !important;
    background-repeat: no-repeat !important;
}
.ohb2-body .ohb2-brochure-block .ohb2-brochure-text-wrap {
    flex: none;
    min-width: 0;
    padding: 0 20px;
    text-align: center;
}
/* Same 342px box as SHOP NOW and SEE IT IN ACTION. `width` rather than
   min-width so a longer label cannot quietly widen it out of the system. */
.ohb2-body .ohb2-brochure-block .ohb2-brochure-text-wrap > a[class*='ohb2-btn'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 342px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* The gap above. The promo pair ends with 24px of pane padding under its
   buttons; this section then added 48px of its own, and the old device slot
   contributed another ~48px of white above the laptop, which is the ~120px of
   air Sara measured. The slot's white is gone with the aspect change above,
   and 34px is the theme's standard section top padding (.ohb2-prod-block,
   .ohb2-cat-brochure-block, .ohb2-swatches-section all use it). Contact keeps
   its own 10px: that rule is `body.ohb2-contact-page ...` in ohb2-pages.css,
   which outranks this one. */
.ohb2-body .ohb2-brochure-block {
    padding-top: 34px;
}

/* Contact sizes this slot with `body.ohb2-contact-page .ohb2-brochure-block
   .ohb2-brochure-device { flex: 0 1 53%; max-width: 53% }`, which is (0,3,1)
   and so outranks the (0,3,0) rule above — it left the artwork drawing at half
   the track. Matched here rather than raising the specificity of the shared
   rule, so the contact page keeps its own hook. */
body.ohb2-contact-page .ohb2-brochure-block .ohb2-brochure-device {
    flex: none;
    width: auto;
    max-width: none;
}

/* The promo pair is `max-width: 1150` with no padding of its own, so below a
   1190px viewport it goes flush to the page edge — while this section keeps its
   own `padding: 0 20px`, which pushed the band 20px inboard of the cards from
   1189 down to the 900 stack point. Measured at 1060 and 1024: card artwork
   20..510 / 20..492, band artwork 40..510 / 40..492. Dropping the section
   padding in that range puts the two back on the same tracks; the 20px inset
   still comes from the device and text cells, exactly as the panes get theirs
   from their own padding. */
@media screen and (min-width: 901px) and (max-width: 1189px) {
    .ohb2-body .ohb2-brochure-block {
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (max-width: 900px) {
    .ohb2-body .ohb2-brochure-block .ohb2-brochure-block-inner {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    .ohb2-body .ohb2-brochure-block .ohb2-brochure-device,
    .ohb2-body .ohb2-brochure-block .ohb2-brochure-text-wrap {
        padding: 0;
    }
}

/* ---------------------------------------------------------------------
   (2) THE TWO-UP — about and inventory

   Sara: "can these images be more equal maybe?" The brochure sits beside a
   framed photo, and the two slots are the same box, but `background-size:
   contain` fitted the FILE to the box, so the artwork inside it drew narrower
   and shorter than the photo next to it.

   Here the slot must keep the photo's box exactly — the two buttons sit under
   the slots and have to stay on one line — so only the artwork inside it
   moves. Width is matched by the same 126.582%, and the artwork is pinned to
   the BOTTOM of the slot so the laptop's base lands on the photo frame's
   bottom border:

       P = (H - 0.592123W) / (H - 0.666667W)

   H differs per page because the two pages draw the slot at different
   aspects, so this is the one value that cannot be shared:

       inventory   439/232  ->  H = 0.528474W  ->  46.058%
       about       476/241  ->  H = 0.506303W  ->  53.516%

   Top edges cannot also align: the artwork is 711/351 (2.0256) and the photo
   slots are 1.8922 and 1.9751, so at matched width the artwork is genuinely
   shorter than the photo. Matched width + matched bottom is the brief; the
   artwork's top therefore sits BELOW the frame's top by
   (slotH - 0.493671W), which measures ~19px on inventory and ~7px on About.
   --------------------------------------------------------------------- */
.ohb2-body .ohb2-promo-duo-inv .ohb2-promo-pane-device {
    background-size: 126.582% auto !important;
    background-position-x: 56.614% !important;
    background-position-y: 46.058% !important;
    background-repeat: no-repeat !important;
}
.ohb2-body .ohb2-promo-duo-about .ohb2-promo-pane-device {
    background-position-y: 53.516% !important;
}


/* =====================================================================
   PASS 2026-09-24 (i) — Mike front-end #10: ONE brochure CTA, site-wide.

   "All these 'get a brochure' content sections on various pages should be
   formatted the same way...copy, font size, button size, alignment."

   There are three implementations of the same CTA and, before this pass,
   FIVE heading sizes for it (measured live at 1440):

       .ohb2-brochure-block        home 32px, contact 28px    (full-width band)
       .ohb2-cat-brochure-block    catalog pages 38px         (full-width band)
       .ohb2-promo-pane-inv        about 36px, inventory 32px (half-width pane)

   WHY 38px and not one of the others. 38px is not a new number: it is the
   size EVERY other section heading in the same bottom stack already uses on
   every page -- Featured Inventory, Popular Old Hickory Shed Designs,
   Request a FREE Quote, Rent-to-Own Your Shed or Barn!, Frequently Asked
   Questions, and the catalog promo duo all measure 38px at 1440. The
   brochure heading was the odd one out, so it comes up to the house size
   rather than the house coming down to it.

   WHY THE WHOLE PROMO PAIR on About and Inventory. On those two pages the
   brochure CTA is one half of a two-up row, sitting beside "Shop Our
   Ready-To-Deliver" / "FREE Shed Delivery". Sizing only the brochure
   heading would put two different heading sizes side by side in one row --
   a new, more visible inconsistency than the one being fixed. The rule
   therefore takes `.ohb2-promo-duo-inv .ohb2-promo-pane-inv h3`, which is
   exactly About + Inventory, both panes. Home and Contact carry the plain
   `.ohb2-promo-duo` (no `-inv`) and are deliberately untouched: their
   brochure CTA is its own full-width band, not a member of that row.

   MOBILE keeps 26px, which is what the catalog band and the About pair
   already used -- 38px sets "Old Hickory Brochure" at ~361px against a
   350px content box at 390, so the desktop number cannot simply carry
   down. One value per breakpoint, shared by all three implementations.

   `!important` + `.ohb2-body` because ohb2-pages.css and ohb2-catalog.css
   are pushed by the PAGE and therefore load AFTER this file: a plain rule
   here loses every tie to them. Nothing else in this family uses
   !important on font-size, so this is the only voice in the room.
   ===================================================================== */
.ohb2-body .ohb2-brochure-block .ohb2-brochure-text-wrap h3,
.ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-inner h3,
.ohb2-body .ohb2-promo-duo-inv .ohb2-promo-pane-inv h3 {
    font-size: 38px !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

@media screen and (max-width: 900px) {
    .ohb2-body .ohb2-brochure-block .ohb2-brochure-text-wrap h3,
    .ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-inner h3,
    .ohb2-body .ohb2-promo-duo-inv .ohb2-promo-pane-inv h3 {
        font-size: 26px !important;
    }
}

/* The one button that was off the system. Every other brochure CTA renders
   342-346 x 51.6 (18px label, 15px/24px padding, set by the button block
   above). Contact alone carried `padding: 16px 40px !important` from
   ohb2-pages.css:1327 -> 53.6 tall, and `14px 26px` under 700px. Width is
   already pinned to 342px for this block, so only the padding differed.
   (0,4,2) to outrank that (0,3,2) !important from the later sheet. */
body.ohb2-contact-page.ohb2-body .ohb2-brochure-block .ohb2-btn-gold,
body.ohb2-contact-page.ohb2-body .ohb2-brochure-block a.ohb2-btn-gold {
    padding: 15px 24px !important;
}

/* The "Open your brochure" link revealed inside the brochure modal on a
   successful submit (front-end #1). Stock's own .pricing-success-links styling
   lives in the derksen layout, which ohb2 does not load, so it gets its own --
   scoped to the ohb2 modal so no other theme can pick it up. */
.ohb2-modal .ohb2-success-links {
    text-align: center;
    margin: 14px 0 4px;
}
/* WHY GOLD, and why this was wrong the first time. The first version painted
   this button #1A567A -- and `.ohb2-modal` IS #1A567A. Measured: modal
   background rgb(26,86,122), button background rgb(26,86,122). The rule was
   applying perfectly; the button was simply invisible, so it read as plain
   white text. (Checked the rival first: DevTools' matched-styles showed this
   rule winning the cascade with the padding and background it asked for. It
   was never a specificity or load-order problem.)

   The colours here are not invented -- they are the ones this modal's OWN
   submit button already uses, `.ohb2-btn-gold` inside `.ohb2-modal-submit`:
   #E9BB52 on #1A567A text, 13px/34px, 22px bold, 7px radius, uppercase. So
   the success CTA is the same button the visitor just pressed.

   Written by ID because stock frontend.css styles this element BY ID and an
   id outranks any class selector whichever sheet loads last -- the same
   gotcha the brochure modal's blade comment documents. */
#pricing-form.ohb2-modal .ohb2-success-links,
#ohb2-catalog-pricing-form.ohb2-modal .ohb2-success-links,
.ohb2-modal .ohb2-success-links {
    text-align: center;
    margin: 18px 0 6px;
}
#pricing-form.ohb2-modal .ohb2-success-links a,
#ohb2-catalog-pricing-form.ohb2-modal .ohb2-success-links a,
.ohb2-modal .ohb2-success-links a {
    display: inline-block;
    padding: 13px 34px;
    background: #E9BB52;
    color: #1A567A;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.22px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 7px;
    max-width: 100%;
}
#pricing-form.ohb2-modal .ohb2-success-links a:hover,
#ohb2-catalog-pricing-form.ohb2-modal .ohb2-success-links a:hover,
.ohb2-modal .ohb2-success-links a:hover {
    background: #d9a93f;
    color: #1A567A;
    text-decoration: none;
}

@media screen and (max-width: 700px) {
    #pricing-form.ohb2-modal .ohb2-success-links a,
    #ohb2-catalog-pricing-form.ohb2-modal .ohb2-success-links a,
    .ohb2-modal .ohb2-success-links a {
        font-size: 18px;
        padding: 13px 22px;
    }
}

/* ---------------------------------------------------------------
   PER-BUILDING VIDEO TOUR — 2026-09-30 (Sara, Telegram 13588)

   The video is a slide in the existing photo strip, not a separate
   section: same frame, same tile size, same active outline, so the
   shopper does not have to learn a second control. Only two things
   set it apart, and both are deliberate — a play badge centred on
   the tile, and a small VIDEO caption. Everything else matches the
   photos around it.
   --------------------------------------------------------------- */

/* The player occupies the same box as the photo it replaces. Not
   display:none/block — the frame has aspect-ratio 5/4 and a <video>
   that has never been laid out reports no dimensions, which makes
   the first tap jump. It is always laid out; visibility is what
   changes. */
.ohb2-bldg-gallery .ohb2-gallery-main { position: relative; }
.ohb2-gallery-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* CONTAIN, not cover. The photos are cropped to fill the 5:4 frame
       because a crop of a photo is still the building. A crop of a 16:9
       video cuts the sides off the thing being filmed and takes any
       on-screen caption with it, so the player letterboxes instead. */
    object-fit: contain;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.ohb2-gallery-video.is-showing {
    opacity: 1;
    pointer-events: auto;
}

/* ----- the tile ----- */
.ohb2-gallery-thumb--video { position: relative; }
.ohb2-gallery-thumb--video img { filter: brightness(0.82); }

.ohb2-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.ohb2-thumb-play svg {
    width: 20px;
    height: 20px;
    fill: #1A567A;
    /* The glyph's own mass sits right of centre; nudge it back so it
       reads as centred in the circle rather than measured to it. */
    margin-left: 2px;
}

.ohb2-thumb-video-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 86, 122, 0.92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 0;
    pointer-events: none;
}

.ohb2-gallery-thumb--video:focus-visible {
    outline: 2px solid #1A567A;
    outline-offset: 2px;
}

@media screen and (max-width: 700px) {
    /* Tile drops from 116x88 to 84x64 on the phone layout, so the badge
       comes down with it or it swallows the frame. */
    .ohb2-thumb-play { width: 26px; height: 26px; }
    .ohb2-thumb-play svg { width: 15px; height: 15px; margin-left: 1.5px; }
    .ohb2-thumb-video-label { font-size: 9px; letter-spacing: 0.06em; }
}

/* =====================================================================
   VARIANT B — the Rent-to-Own section becomes a 50/50 row
   (Sara, 10/5, from Mike's ReviewStudio #2 "align the RTO learn more
   button with the 'download' brochure button")

   Variant A moves only the button. This one changes the row it sits in,
   so the alignment falls out of the layout instead of being computed:
   the section is given the SAME two-column geometry as the promo row
   above it on /inventory -- two equal columns, 49px gutter -- and the
   346px button, centred in its own half, then lands under DOWNLOAD IT NOW
   by construction, with the Advantages box under the delivery column.

   Was: a flex:1 text column next to a fixed 447px Advantages box with a
   44px gutter (659 / 447 at 1440).

   MEASURED at 1440, 1280, 1024 and 390, on /inventory and on /contact-us,
   which are the two pages that render this section:
     - the Advantages list does not wrap on any line at any of those widths
     - the body paragraph goes from 7 lines to 8 at 1440/1280 and stays at
       9 at 1024; no change at 390
     - 390 is untouched: the section stacks below 640 and this block does
       not start until 901, the width at which the promo row above also
       stops being two panes
     - LEARN MORE lands 0.5px left of DOWNLOAD IT NOW, not 0. The columns
       are 549.5 / 551.5 rather than 550.5 / 550.5 because the Advantages
       box's min-content width -- set by "You OWN the Building at the end"
       on one line -- is 551.5px, and a flex item will not go below its
       min-content. Forcing the exact half would wrap that line, which is
       the thing Sara ruled out. Half a CSS pixel is below a device pixel
       on every screen this ships to.
   ===================================================================== */
@media screen and (min-width: 901px) {
    .ohb2-rto-inner { gap: 49px; }
    .ohb2-rto-text { flex: 1 1 0; min-width: 0; }
    .ohb2-rto-advantages { flex: 1 1 0; }
    .ohb2-rto-text .ohb2-btn-blue { width: 346px; }
}

/* =====================================================================
   VARIANT B, refinement — the Advantages box runs the full height of the
   text column (Sara, 10/6, Telegram 14075: "add some more spacing in the
   right box to make it expand the full height of the paragraph+button").

   The 50/50 row above equalises the WIDTHS; the two columns still ended
   at different heights because `.ohb2-rto-inner` carries
   align-items:flex-start, so each column shrink-wrapped its own content.
   Measured on dev before this change, the text column (paragraph +
   LEARN MORE) was taller than the box by 30.0px at 1440 and 1280, 60.0px
   at 1024, 120.1px at 901 — a growing ragged bottom edge.

   Two parts, and the second is the one Sara asked for:
     1. `align-items: stretch` gives the box the row's height, so the top
        AND bottom edges line up with the text column.
     2. the <ul> takes that extra height (`flex: 1 0 auto`) and spreads it
        as SPACING rather than leaving a gap under the last item: it
        becomes a flex column with `justify-content: space-evenly`, so
        every gap — above the first item, between each pair, below the
        last — grows by the same amount.
   `flex: 1 0 auto` and not `1 1 auto`: the list must still be allowed to
   set the row's height if it is ever the taller column (a wrapped list
   item at some future copy length), and 0 shrink guarantees it.

   MEASURED on dev at 1440 / 1280 / 1024 / 960 / 901, on all three pages
   that render this partial (/inventory, /contact-us, a building detail
   page — the partial's $showRto is also true by default):
     - box height now EQUALS the text column at every one of those widths
       (297.70 / 297.70 / 327.72 / 357.73 / 387.75)
     - the gaps it is spread into stay small and even: 4.3px at 1440 and
       1280, 8.6px at 1024, 12.9px at 960, 17.2px at 901, with the top and
       bottom insets the same gap plus the <ul>'s own 16px padding
     - no list item wraps at any of those widths, LEARN MORE keeps its
       position under DOWNLOAD IT NOW, no horizontal scroll
   390 is untouched and deliberately so: this block starts at 901 and the
   section is stacked below 900, where a stretched box would be a tall
   empty panel under the button. Measured at 390 the box is 297.70 both
   before and after, with its natural 16px insets and zero item gaps.
   ===================================================================== */
@media screen and (min-width: 901px) {
    .ohb2-rto-inner { align-items: stretch; }
    .ohb2-rto-advantages { display: flex; flex-direction: column; }
    .ohb2-rto-advantages ul {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
}

/* =====================================================================
   V6 WALKTHROUGH BATCH 1 — public site (2026-10-22)
   ===================================================================== */

/* ---------------------------------------------------------------------
   (D1b) BACK-TO-TOP vs THE COPYRIGHT LINE, PHONE WIDTHS.

   `.ohb2-to-top` is position:fixed at bottom:16px and 52px tall below
   900px, so it owns the bottom 68px of the viewport. `.ohb2-copyright`
   reserved 26px, and at the very end of the document — the one place a
   visitor is guaranteed to be looking at both — the button sat on top of
   the last line of the copyright notice.

   68px of button + an 8px gap = 76px of bottom padding, so the last line
   clears the button's top edge instead of hiding under it. Scoped to the
   same 900px breakpoint that gives the button its 52px/16px geometry, so
   desktop (46px at bottom:20px, beside a much wider bar) is untouched.
   --------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .ohb2-copyright { padding-bottom: 76px; }
}

/* ---------------------------------------------------------------------
   (A11) ACTIVE FILTER CHIPS + RESULT COUNT on the inventory listing.

   Applying a filter used to leave no trace: the panel collapses, the grid
   gets shorter, and nothing says what is in force or how many buildings
   came back. Palette and radii are the page's existing ones — navy
   #1A567A on the chip, the filter panel's #E5E5E5 hairline, the gold
   #E9BB52 focus ring the rest of the theme uses.
   --------------------------------------------------------------------- */
.ohb2-inv-summary {
    margin: 0 0 18px;
}
.ohb2-inv-count {
    font-size: 16px;
    color: #1A567A;
    margin: 0 0 10px;
}
.ohb2-inv-count strong {
    font-weight: 800;
}
.ohb2-inv-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ohb2-inv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 6px 5px 11px;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    background: #F4F4F4;
    color: #1A567A;
    font-size: 14px;
    line-height: 1.3;
}
.ohb2-inv-chip-label {
    font-weight: 700;
}
.ohb2-inv-chip-value {
    /* A long siding-colour name must not push the x off the row. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ohb2-inv-chip-x {
    flex: 0 0 auto;
    /* 22px visible, but the tap target is padded out to 30px below 900px. */
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1A567A;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}
.ohb2-inv-chip-x:hover,
.ohb2-inv-chip-x:focus {
    background: #14405C;
    color: #fff;
    text-decoration: none;
}
.ohb2-inv-chip-x:focus-visible {
    outline: 3px solid #E9BB52;
    outline-offset: 2px;
}
.ohb2-inv-chip-clear {
    padding: 5px 11px;
    border-style: dashed;
    background: transparent;
}
.ohb2-inv-chip-clear a {
    color: #1A567A;
    font-weight: 700;
    text-decoration: underline;
}
.ohb2-inv-chip-clear a:hover {
    color: #14405C;
}
@media screen and (max-width: 900px) {
    /* Phone: chips wrap to as many rows as they need, and the x gets a real
       44px touch target.

       The first pass said "44px with its padding" and shipped a 26px circle
       in a 38px chip, which is neither. Growing the circle to 44px instead
       would make a row of chips look like a row of buttons, so the circle
       stays visually 34px and an invisible ::after overlay carries the hit
       area out to 44x44. The overlay reaches 5px into the 8px gap between
       chips, where the only thing it can cover is the next chip's text —
       never its x, which sits at the far end of that chip. */
    .ohb2-inv-summary { margin-bottom: 14px; }
    .ohb2-inv-count { font-size: 15px; }
    .ohb2-inv-chip {
        font-size: 14px;
        min-height: 44px;
        padding: 4px 5px 4px 13px;
    }
    .ohb2-inv-chip-value { max-width: 190px; }
    .ohb2-inv-chip-x {
        position: relative;
        width: 34px;
        height: 34px;
        font-size: 20px;
    }
    .ohb2-inv-chip-x::after {
        content: '';
        position: absolute;
        top: -5px;
        right: -5px;
        bottom: -5px;
        left: -5px;
    }
    /* Clear all is a link, so its own box has to reach 44px too — but 44 on
       the link plus the chip's 1px borders makes a 46px chip, and because
       .ohb2-inv-chips is a flex row at default align-items: stretch, that
       46 propagates to every chip sharing its line. 42 + 2 borders = 44,
       so the whole row stays level and the link still clears the minimum
       (the chip's own min-height is what holds the 44). */
    .ohb2-inv-chip-clear { padding: 0 13px; }
    .ohb2-inv-chip-clear a {
        display: inline-flex;
        align-items: center;
        min-height: 42px;
    }
}

/* ---------------------------------------------------------------------
   (A11) ACTIVE FILTER COUNT on the Sort and Filter button.

   Aris: "a shopper can't tell the list is filtered". The chips answer that
   above the grid; this answers it on the control itself, without opening
   anything. White pill on the navy button — gold (#E9BB52) was the first
   choice to match the theme's accent, but gold on #1A567A is about 4.3:1
   and 17px bold is not large text under WCAG, so it would have failed AA.
   Navy on white is ~7:1 both ways.
   --------------------------------------------------------------------- */
.ohb2-inventory-page .ohb2-filter-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ohb2-inventory-page .ohb2-filter-count {
    display: inline-block;
    min-width: 25px;
    padding: 1px 7px;
    border-radius: 11px;
    background: #fff;
    color: #1A567A;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}


/* =====================================================================
   V6 WALKTHROUGH BATCH 3, ITEM 5 (2026-10-22) — ONE CONTENT EDGE ON THE
   BUILDING PAGE AT PHONE WIDTH.

   Brian, iPhone / Chrome for iOS: "the alignment doesn't look right on this
   page". Three different left edges in one screen, and all three are real.
   Measured on dev before this block, 390x844, CriOS UA:

     specs table / price table / both CTAs   left 20   width 336   right 356
     description wrap                        left 20   width 350   right 370
     "About This Shed Model" + the copy      left 40   width 310   right 350

   TWO causes, neither of them a margin someone typed.

   (a) The 336 vs 350, i.e. the "shifted left, wider gap on the right" he drew:
       .ohb2-bldg-top-cols sets `align-items: flex-start`, which is correct for
       the two-column desktop layout (it stops the specs column stretching to
       the gallery's height). At <=900px the same container becomes
       `flex-direction: column`, and align-items is the CROSS axis -- so on a
       phone flex-start stopped the columns stretching to the WIDTH. The gallery
       was given `width: 100%` in that media query and so looked right; the
       specs column was not, so it shrank to its fit-content width, which the
       widest spec row happens to set. The price table and both buttons are
       width:100% of that column, so they inherited the shortfall and sat 14px
       clear of the right gutter with nothing to explain it.

   (b) The 20 vs 40: see .ohb2-bldg-description-section above -- it carried
       `padding: 40px 20px` and the .ohb2-wrap inside it carries `0 20px` of its
       own, so the copy got two gutters.

   What is deliberately NOT changed: "About This Shed Model" stays centred.
   .ohb2-section-heading is centred in every section of this theme, the design
   draws it centred, and once the body copy below it sits on the same 20px edge
   as everything else a centred H2 reads as a heading rather than as a third
   edge. Left-aligning it here only would make this page the odd one out.
   Flagged for Sara/Brian in the build log rather than decided here.
   ===================================================================== */
@media screen and (max-width: 900px) {
    .ohb2-bldg-top-cols { align-items: stretch; }
}

/* =====================================================================
   V6 WALKTHROUGH BATCH 3, ITEM 1 (part two) — NO ZOOM JUMP ON FOCUS.

   Item 1 also asks for First Name to take focus after the jump. On iOS,
   focusing a text control whose computed font-size is under 16px makes WebKit
   zoom the page to it and then scroll again, which would undo the jump that was
   just fixed. Measured on dev: every control in this form rendered at 14px.

   16px only at phone width, so the desktop type scale is untouched. `select`
   is in the list because the State/Province control is a native select and iOS
   zooms for those too. .ohb2-no-ios-zoom is the marker the batch-3 test asserts
   on, and is applied by ohb2-anchor-offset.js to the form it focuses.
   ===================================================================== */
@media screen and (max-width: 768px) {
    .ohb2-bldg-question-section input,
    .ohb2-bldg-question-section select,
    .ohb2-bldg-question-section textarea,
    .ohb2-no-ios-zoom input,
    .ohb2-no-ios-zoom select,
    .ohb2-no-ios-zoom textarea {
        font-size: 16px;
    }
}