/* One rhythm for every section: the same room above the content as below it.
   30px on a small screen, easing up to 60px on a desktop. */
.section-custom-space {
    padding-top: calc(30px + 30 * (100vw - 320px) / 1600);
    padding-bottom: calc(30px + 30 * (100vw - 320px) / 1600);
}

/* Grey strip under the banner: the points that hold true on every category page,
   so the banner and the product grid do not run into each other */
.cbl-intro-strip {
    /* margin-top: 30px; */
    background: var(--cbl-surface, #F3F6FB);
    border-top: 1px solid var(--cbl-border, #E6EAF0);
    border-bottom: 1px solid var(--cbl-border, #E6EAF0);
    padding-top: calc(12px + 6 * (100vw - 320px) / 1600);
    padding-bottom: calc(12px + 6 * (100vw - 320px) / 1600);
}

.cbl-intro-strip-text {
    max-width: 900px;
    margin: 0 auto;
    color: var(--cbl-muted, #5B6675);
    font-size: 18px;
    line-height: 2;
    text-align: center;
}

.cbl-intro-strip-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 75px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* only earns its space on a page that fills in the intro line */
.cbl-intro-strip-text + .cbl-intro-strip-points {
    margin-top: 18px;
}

.cbl-intro-strip-points li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cbl-ink, #1C2430);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
}

.cbl-intro-strip-points li i {
    flex: none;
    color: var(--theme-color, #0DA487);
    font-size: 20px;
}

@media (max-width: 575px) {
    /* centring wrapped rows on a narrow screen leaves ragged lines, so start them flush */
    .cbl-intro-strip-text {
        font-size: 14px;
        text-align: left;
    }

    .cbl-intro-strip-points {
        justify-content: flex-start;
        gap: 10px 18px;
    }

    .cbl-intro-strip-points li {
        font-size: 13px;
    }

    .cbl-intro-strip-text + .cbl-intro-strip-points {
        margin-top: 14px;
    }
}

/* Compare block: category thumbnails (image + link) merged with product-type copy */
.cbl-compare {
    text-align: left;
}

.cbl-compare-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cbl-compare-arrow {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--cbl-border, #E6EAF0);
    background: #FFF;
    color: var(--cbl-ink, #1C2430);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.cbl-compare-arrow:hover:not(:disabled) {
    background: var(--theme-color, #0BAF9A);
    border-color: var(--theme-color, #0BAF9A);
    color: #FFF;
}

.cbl-compare-arrow:disabled {
    opacity: .3;
    cursor: default;
    box-shadow: none;
}

.cbl-compare-nav.is-static .cbl-compare-arrow {
    display: none;
}

.cbl-compare-tabs {
    /* --cbl-tab-base is the natural tab width; JS stretches it into --cbl-tab-width so a
       whole number of tabs fills the strip and no tab is ever cut in half */
    --cbl-tab-base: 118px;
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 4px 2px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* centre only while the row fits - centring an overflowing row clips the first tabs */
.cbl-compare-tabs.is-centered {
    justify-content: center;
}

.cbl-compare-tabs::-webkit-scrollbar {
    display: none;
}

.cbl-compare-tab {
    flex: 0 0 auto;
    width: 165px;
    padding: 0 0 10px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: border-color .2s ease;
}

.cbl-compare-tab:focus-visible {
    outline: 2px solid var(--theme-color, #0BAF9A);
    outline-offset: 3px;
    border-radius: 12px;
}

.cbl-compare-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cbl-surface, #F3F6FB);
    border: 1px solid var(--cbl-border, #E6EAF0);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cbl-compare-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cbl-compare-tab:hover .cbl-compare-thumb {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12)
}

.cbl-compare-tab-label {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 9px;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    /* color: var(--cbl-muted, #64748B); */
    transition: color .2s ease;
}

.cbl-compare-tab.is-active {
    border-bottom-color: var(--theme-color, #0BAF9A);
}

.cbl-compare-tab.is-active .cbl-compare-thumb {
    border-color: var(--theme-color, #0BAF9A);
}

.cbl-compare-tab.is-active .cbl-compare-tab-label {
    color: var(--cbl-ink, #1C2430);
    font-weight: 700;
}

.cbl-compare-scrollbar {
    position: relative;
    height: 6px;
    margin: 14px 46px 0;
    border-radius: 999px;
    background: #E9EDF3;
    cursor: pointer;
}

.cbl-compare-scrollbar.is-hidden {
    display: none;
}

.cbl-compare-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 40px;
    border-radius: 999px;
    background: #B8C2CE;
    transition: background .2s ease;
}

.product-image {
    position: relative;
    overflow: hidden;
}

.product-box-3 {
    position: relative;
}

.product-box-3.cbl-product-pending {
    display: none;
}

.cbl-compare-scrollbar:hover .cbl-compare-scrollbar-thumb {
    background: #94A1B2;
}

.cbl-cat-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B7C0CB;
    font-size: 32px;
    background: var(--cbl-surface, #F3F6FB);
}

@media (max-width: 575px) {
    .cbl-compare-nav {
        gap: 6px;
    }

    .cbl-compare-arrow {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .cbl-compare-tabs {
        --cbl-tab-base: 96px;
    }

    .cbl-compare-tab-label {
        font-size: 12.5px;
    }

    .cbl-compare-scrollbar {
        margin: 12px 38px 0;
    }
}

/* Product fit block: artwork on one side, copy and a checklist on the other */
.cbl-fit {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    /* the container is full-bleed, so cap the block or the two halves drift apart */
    max-width: 1180px;
    margin: 0 auto;
    text-align: left;
}

.cbl-fit-visual {
    width: 100%;
    max-width: 520px;
    justify-self: center;
    aspect-ratio: 16 / 14;
    border-radius: 18px;
    overflow: hidden;
    background: var(--cbl-surface, #F3F6FB);
    border: 1px solid var(--cbl-border, #E6EAF0);
}

.cbl-fit-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbl-fit-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cbl-fit-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 5px;
    background: rgba(13, 164, 135, .1);
    color: var(--theme-color, #0DA487);
    font-size: 18px;
}

.cbl-fit-title {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--cbl-ink, #1C2430);
}

.cbl-fit-text {
    margin: 0 0 22px;
    color: var(--cbl-muted, #5B6675);
    font-size: 16px;
    line-height: 1.5;
}

.cbl-fit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cbl-fit-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.6;
}

.cbl-fit-list li i {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(13, 164, 135, .12);
    color: var(--theme-color, #0DA487);
    font-size: 9px;
}

@media (max-width: 991px) {
    .cbl-fit {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .cbl-fit-visual {
        max-width: 560px;
        margin: 0 auto;
        aspect-ratio: 16 / 10;
    }

    .cbl-fit-title {
        font-size: 22px;
    }
}

@media (max-width: 575px) {
    .cbl-fit-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .cbl-fit-title {
        font-size: 20px;
    }

    .cbl-fit-text {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .cbl-fit-list li {
        font-size: 14px;
    }
}

/* Shared centred section heading */
.cbl-head {
    max-width: 900px;
    margin: 0 auto 32px;
    text-align: center;
}

.cbl-head-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--theme-color, #0DA487);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cbl-head h2 {
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--cbl-ink, #1C2430);
}

.cbl-head p {
    /* the container is full-bleed, so cap the measure or the intro runs as one wide line */
    max-width: 680px;
    margin: 0 auto;
    color: var(--cbl-muted, #5B6675);
    font-size: 16px;
    line-height: 1.5;
}

/* a closing line under a card grid - same measure and colour as the intro
   above it, set apart by the space above and a slightly smaller size */
.cbl-head-note {
    max-width: 680px;
    margin: 26px auto 0;
    color: var(--cbl-muted, #5B6675);
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
}

.cbl-why-card {
    min-width: 0;
    height: 100%;
    padding: 26px 22px;
    border: 1px solid var(--cbl-border, #E6EAF0);
    border-radius: 14px;
    background: #FFF;
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cbl-why-card:hover {
    border-color: rgba(14, 164, 225, .45);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
    transform: translateY(-3px);
}

.cbl-why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 5px;
    background: #0ea4e11f;
    color: #35C6F4;
    font-size: 19px;
}

/* swapped in when a card is given an image instead of an icon */
.cbl-why-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbl-why-card h3 {
    margin-bottom: 8px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cbl-ink, #1C2430);
}

.cbl-why-card p {
    margin: 0;
    color: var(--cbl-muted, #5B6675);
    font-size: 14.5px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .cbl-head {
        margin-bottom: 24px;
    }

    .cbl-head h2 {
        font-size: 23px;
    }

    .cbl-head p {
        font-size: 15px;
    }

    .cbl-why-card {
        padding: 22px 20px;
    }

    .cbl-why-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 13px;
        font-size: 17px;
    }

    .cbl-why-card h3 {
        font-size: 15.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cbl-why-card {
        transition: none;
    }

    .cbl-why-card:hover {
        transform: none;
    }
}

/* Box styles block: two columns of items either side of a centre image */
.cbl-tri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 30px;
    align-items: center;
}

.cbl-tri-col {
    display: grid;
    gap: 46px;
    align-content: center;
}

.cbl-tri-item {
    text-align: center;
}

.cbl-tri-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 46px;
    height: 46px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #7291c394;
    color: #FFF;
    font-size: 17px;
}

.cbl-tri-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbl-tri-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--cbl-ink, #1C2430);
}

.cbl-tri-text {
    max-width: 350px;
    margin: 0 auto;
    color: var(--cbl-muted, #5B6675);
    font-size: 15px;
    line-height: 1.5;
}

.cbl-tri-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: var(--cbl-surface, #F1F1F2);
}

/* the section image is a generic range of boxes rather than a photo shot to
   fill the frame, so it is fitted whole inside the square instead of being
   cropped to it - the container keeps its aspect ratio either way */
.cbl-tri-media img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 18px;
    object-fit: contain;
}

@media (max-width: 992px) {
    /* the image leads, the items sit beneath it in two columns */
    .cbl-tri {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 24px;
    }

    .cbl-tri-media {
        grid-column: 1 / -1;
        order: -1;
        max-width: 420px;
        margin: 0 auto;
    }

    .cbl-tri-col {
        gap: 34px;
    }
}

@media (max-width: 767px) {
    .cbl-tri {
        gap: 28px 16px;
    }

    .cbl-tri-media {
        max-width: 320px;
    }

    .cbl-tri-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 14px;
        font-size: 15px;
    }

    .cbl-tri-title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .cbl-tri-text {
        max-width: none;
        font-size: 14.5px;
    }

    .cbl-tri-col {
        gap: 28px;
    }
}

@media (max-width: 480px) {
    .cbl-tri {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Printing block: tinted band of option pills. .business-section supplies the cream tint,
   so this only owns the vertical rhythm the band needs on both sides */
.cbl-pills-band {
    padding-top: calc(34px + 26 * (100vw - 320px) / 1600);
    padding-bottom: calc(34px + 26 * (100vw - 320px) / 1600);
}

/* only rendered once $printSection['image'] is set - the reference band has no artwork */
.cbl-pills-media {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 28px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: var(--cbl-surface, #F3F6FB);
}

.cbl-pills-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbl-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cbl-pills li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--cbl-border, #E6EAF0);
    border-radius: 999px;
    background: #f4fffd;
    color: var(--cbl-ink, #1C2430);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.cbl-pills li i {
    flex: none;
    color: var(--theme-color, #0DA487);
    font-size: 13px;
}

@media (max-width: 575px) {
    /* centring wrapped pills on a narrow screen leaves ragged rows, so start them flush */
    .cbl-pills {
        justify-content: flex-start;
        gap: 10px;
    }

    .cbl-pills li {
        padding: 8px 15px;
        font-size: 13.5px;
    }

    .cbl-pills-media {
        margin-bottom: 22px;
    }
}

/* Use cases block: copy on the left, a two-column checklist on the right */
/* sits between two tinted bands, so it needs matching room on both sides -
   .section-custom-space only pads the bottom */
.cbl-checks-section {
    padding-top: calc(40px + 32 * (100vw - 320px) / 1600);
    padding-bottom: calc(40px + 32 * (100vw - 320px) / 1600);
}

.cbl-checks {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 48px;
    align-items: start;
    /* the container is full-bleed, so cap the block or the halves drift apart */
    max-width: 1180px;
    margin: 0 auto;
    text-align: left;
}

/* only rendered once $useSection['image'] is set - the reference block has no artwork */
.cbl-checks-media {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 30px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: var(--cbl-surface, #F3F6FB);
}

.cbl-checks-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbl-checks-title {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.015em;
    color: var(--cbl-ink, #1C2430);
}

.cbl-checks-text {
    margin: 0;
    color: var(--cbl-muted, #5B6675);
    font-size: 16px;
    line-height: 1.5;
}

.cbl-checks-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 34px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cbl-checks-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--cbl-ink, #1C2430);
}

.cbl-checks-item i {
    flex: none;
    margin-top: 2px;
    color: var(--theme-color, #0DA487);
    font-size: 17px;
}

@media (max-width: 1199px) {
    .cbl-checks {
        gap: 36px;
    }

    .cbl-checks-list {
        gap: 24px 26px;
    }

    .cbl-checks-title {
        font-size: 28px;
    }
}

@media (max-width: 991px) {
    /* copy on top, the checklist keeps its two columns beneath it */
    .cbl-checks {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 575px) {
    .cbl-checks-title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .cbl-checks-text {
        font-size: 15px;
    }

    /* two columns squeeze these labels onto three lines each, so stack them */
    .cbl-checks-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .cbl-checks-item {
        gap: 12px;
        font-size: 14px;
    }

    .cbl-checks-media {
        margin-bottom: 24px;
    }
}

/* Why choose block: artwork on the left, copy and an expanding reason list on the right */
.cbl-choose-band {
    padding-top: calc(34px + 26 * (100vw - 320px) / 1600);
    padding-bottom: calc(34px + 26 * (100vw - 320px) / 1600);
    background: linear-gradient(to bottom, #F0F9FF 0%, #ffffff 100%);
}

.cbl-choose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: center;
    /* the container is full-bleed, so cap the block or the two halves drift apart */
    max-width: 1180px;
    margin: 0 auto;
}

.cbl-choose-media {
    width: 100%;
    max-width: 490px;
    justify-self: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 14px;
    background: #FFF;
}

/* this one is a square photo on a plain background, so a cover fit fills the
   4:5 frame and only trims the backdrop */
.cbl-choose-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbl-choose-copy .cbl-head {
    margin-bottom: 4px;
}

.cbl-choose-copy .cbl-head p {
    font-style: italic;
}

/* Expanding reason list - only the open row shows its description */
.cbl-steplist {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid #E6E6E8;
}

.cbl-steplist-item {
    position: relative;
    padding: 4px 0 4px 20px;
}

.cbl-steplist-item + .cbl-steplist-item {
    border-top: 1px solid #E6E6E8;
}

/* the accent bar that marks the open row */
.cbl-steplist-item::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: transparent;
    transition: background .25s ease;
}

.cbl-steplist-item.is-active::before {
    background: var(--theme-color, #0DA487);
}

.cbl-steplist-head {
    display: block;
    width: 100%;
    padding: 12px 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.cbl-steplist-head:focus-visible {
    outline: 2px solid var(--theme-color, #0DA487);
    outline-offset: 2px;
}

.cbl-steplist-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cbl-ink, #1C2430);
    transition: color .25s ease;
}

.cbl-steplist-head:hover .cbl-steplist-title,
.cbl-steplist-item.is-active .cbl-steplist-title {
    color: var(--theme-color, #0DA487);
}

/* grid-template-rows animates, unlike height: auto */
.cbl-steplist-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.cbl-steplist-item.is-active .cbl-steplist-body {
    grid-template-rows: 1fr;
}

.cbl-steplist-body > p {
    overflow: hidden;
    margin: 0;
    color: var(--cbl-muted, #5B6675);
    font-size: 15px;
    line-height: 1.5;
}

.cbl-steplist-item.is-active .cbl-steplist-body > p {
    padding-bottom: 12px;
}

@media (max-width: 991px) {
    .cbl-choose {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .cbl-choose-media {
        max-width: 460px;
        aspect-ratio: 4 / 3;
    }

    .cbl-steplist {
        margin-top: 20px;
    }
}

@media (max-width: 575px) {
    .cbl-choose-media {
        aspect-ratio: 4 / 3;
    }

    .cbl-steplist-item {
        padding-left: 16px;
    }

    .cbl-steplist-title {
        font-size: 15px;
    }

    .cbl-steplist-body > p {
        font-size: 14.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cbl-steplist-body,
    .cbl-steplist-title,
    .cbl-steplist-item::before {
        transition: none;
    }
}

/* Order block: centred heading over a capped column of copy */
.cbl-order-section .cbl-head {
    margin-bottom: 24px;
}

/* only rendered once $orderSection['image'] is set - the reference block has no artwork */
.cbl-order-media {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 26px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: var(--cbl-surface, #F3F6FB);
}

.cbl-order-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbl-prose {
    /* the container is full-bleed, so cap the measure or the copy runs edge to edge */
    max-width: 860px;
    margin: 0 auto;
    text-align: left;
}

.cbl-prose p {
    margin: 0 0 16px;
    color: var(--cbl-muted, #5B6675);
    font-size: 16px;
    font-style: italic;
    line-height: 1.75;
}

.cbl-prose p:last-child {
    margin-bottom: 0;
}

/* the Request Now button under the order copy. The copy block is capped at the
   same measure and left aligned, so the button lines up with it rather than
   with the centred heading above. */
.cbl-order-cta {
    max-width: 860px;
    margin: 26px auto 0;
    text-align: center;
}

.cbl-cta-btn {
    display: inline-block;
    padding: 13px 30px;
    border: 1px solid var(--theme-color, #0DA487);
    border-radius: 6px;
    background: var(--theme-color, #0DA487);
    color: #FFF;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.cbl-cta-btn:hover,
.cbl-cta-btn:focus-visible {
    background: transparent;
    color: var(--theme-color, #0DA487);
}

@media (max-width: 575px) {
    .cbl-cta-btn {
        display: block;
        text-align: center;
    }
}

.cbl-prose a {
    color: var(--theme-color, #0DA487);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}

.cbl-prose a:hover,
.cbl-prose a:focus-visible {
    color: #0A7A63;
    border-bottom-color: currentColor;
}

.cbl-prose a:focus-visible {
    outline: 2px solid rgba(13, 164, 135, .35);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Reduce section padding */
.cbl-hero {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.img-container {
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.img-container img {
    object-position: center bottom;
    /* max-height: 300px; */
    object-fit: contain;
    /* max-width: 100%;
    width: 85%; */
}

@media (max-width: 575px) {
    .cbl-order-section .cbl-head {
        margin-bottom: 18px;
    }

    .cbl-prose p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    .cbl-order-media {
        margin-bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cbl-prose a {
        transition: none;
    }
}

/* =====================================================================
   Hero quote form on phones
   Shared by the industry listing and the category pages: the card drops
   its frame and sits on a light panel once it takes the full width.
   ===================================================================== */
@media (max-width: 575px) {
    .cbl-hero.custom-quote-section #quote_form {
        padding: 0 !important;
        border: none !important;
    }

    .cbl-hero.contact-box-section .right-sidebar-box {
        background: #F8F8F8 !important;
    }
}

/* =====================================================================
   Breadcrumb aligned to the hero
   The theme pads .breadcrumb-contain and pulls it back with a negative
   margin, which leaves the trail ~11px right of the container edge. Drop
   the horizontal half of both so it starts where the hero copy does.
   ===================================================================== */
.cbl-breadcrumb-flush .breadcrumb-contain {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* =====================================================================
   Breadcrumb inside the hero
   On the category pages the trail sits in the banner just above the
   heading, so it drops the theme's section padding and the contain's
   padding and negative margin that frame it as a standalone strip.
   ===================================================================== */
.cbl-hero .cbl-hero-breadcrumb {
    padding: 0 !important;
    margin-bottom: 12px !important;
    overflow: visible;
}

.cbl-hero .cbl-hero-breadcrumb .breadcrumb-contain {
    padding: 0;
    margin: 0;
}

/* Detail cards: a two-up grid of numbered copy cards, for a page whose copy has
   more sections than the fixed slots (section-extra.php). Same card, ink, muted
   and accent tokens as the rest of the page. */
.cbl-detail-band {
    background: var(--cbl-surface, #F3F6FB);
}

.cbl-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cbl-detail-card {
    min-width: 0;
    padding: 26px 24px;
    border: 1px solid var(--cbl-border, #E6EAF0);
    border-radius: 14px;
    background: #FFF;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cbl-detail-card:hover {
    border-color: rgba(14, 164, 225, .45);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
}

.cbl-detail-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--theme-color, #0DA487);
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.cbl-detail-card .cbl-detail-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cbl-ink, #1C2430);
}

.cbl-detail-text {
    margin: 0 0 12px;
    color: var(--cbl-muted, #5B6675);
    font-size: 14.5px;
    line-height: 1.65;
}

.cbl-detail-card > :last-child {
    margin-bottom: 0;
}

.cbl-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 14px;
    list-style: none;
}

.cbl-detail-tags li {
    padding: 5px 13px;
    border: 1px solid var(--cbl-border, #E6EAF0);
    border-radius: 999px;
    background: #f4fffd;
    color: var(--cbl-ink, #1C2430);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.cbl-detail-note {
    margin: 4px 0 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--theme-color, #0DA487);
    border-radius: 0 8px 8px 0;
    background: #f4fffd;
    color: var(--cbl-ink, #1C2430);
    font-size: 14px;
    line-height: 1.6;
}

.cbl-detail-list {
    padding: 0;
    margin: 4px 0 16px;
    list-style: none;
}

.cbl-detail-list li {
    padding: 10px 0;
    color: var(--cbl-muted, #5B6675);
    font-size: 14.5px;
    line-height: 1.6;
}

.cbl-detail-list li + li {
    border-top: 1px dashed var(--cbl-border, #E6EAF0);
}

.cbl-detail-list strong {
    color: var(--cbl-ink, #1C2430);
    font-weight: 700;
}

@media (max-width: 767px) {
    .cbl-detail-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .cbl-detail-card {
        padding: 22px 20px;
    }

    .cbl-detail-card .cbl-detail-title {
        font-size: 16.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cbl-detail-card {
        transition: none;
    }
}


/* a checklist inside a prose section (section-extra.php 'points') - two columns
   on a wide screen, one on a phone */
.cbl-prose-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    padding: 0;
    margin: 0 0 16px;
    list-style: none;
}

.cbl-prose-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--cbl-ink, #1C2430);
    font-size: 15px;
    line-height: 1.55;
}

.cbl-prose-list i {
    flex: none;
    margin-top: 4px;
    color: var(--theme-color, #0DA487);
    font-size: 14px;
}

@media (max-width: 575px) {
    .cbl-prose-list {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* a comparison table inside a prose section (section-extra.php 'table') */
.cbl-table-wrap {
    margin: 4px 0 16px;
    overflow: hidden;
    border: 1px solid var(--cbl-border, #E6EAF0);
    border-radius: 12px;
    background: #FFF;
}

.cbl-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-style: normal;
}

.cbl-table th,
.cbl-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
    line-height: 1.5;
}

.cbl-table th {
    background: #f4fffd;
    color: var(--cbl-ink, #1C2430);
    font-weight: 700;
}

.cbl-table td {
    border-top: 1px solid var(--cbl-border, #E6EAF0);
    color: var(--cbl-muted, #5B6675);
}

.cbl-table td:first-child {
    color: var(--cbl-ink, #1C2430);
    font-weight: 600;
}

/* a phone stacks each row into a small card, labelled from the column heads */
@media (max-width: 575px) {
    .cbl-table thead {
        display: none;
    }

    .cbl-table,
    .cbl-table tbody,
    .cbl-table tr,
    .cbl-table td {
        display: block;
        width: 100%;
    }

    .cbl-table tr + tr {
        border-top: 1px solid var(--cbl-border, #E6EAF0);
    }

    .cbl-table td {
        padding: 4px 14px;
        border-top: 0;
    }

    .cbl-table td:first-child {
        padding-top: 12px;
    }

    .cbl-table td:last-child {
        padding-bottom: 12px;
    }

    .cbl-table td::before {
        content: attr(data-label) ": ";
        color: var(--cbl-ink, #1C2430);
        font-weight: 700;
    }
}

/* an odd card out at the end of a two-up detail grid takes the full row */
.cbl-detail-grid > .cbl-detail-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}


/* a closing paragraph after the fit checklist (section-content.php 'closing') */
.cbl-fit-list + .cbl-fit-text {
    margin: 20px 0 0;
}