/* =====================================================================
   Product page — gallery and right-hand support card
   Pairs with quoteWizardCOM.css (the middle column).
   ===================================================================== */
.cbl-gallery {
    --cbl-ink: #17223b;
    --cbl-muted: #66738a;
    --cbl-line: #dce4f0;
    --cbl-green: #0da487;
    --cbl-green-soft: #e8f7f2;
}

/* ---------- main image ---------- */
.cbl-gallery .cbl-gal-main {
    position: relative;
    border: 1px solid #ccd8e4;
    border-radius: 6px;
    /* background: #f1f5f8; */
    overflow: hidden;
}

.cbl-gallery .cbl-gal-main .slider-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 330px;
    padding: 14px;
}

.cbl-gallery .cbl-gal-main .slider-image img {
    max-height: 420px;
    width: auto;
    object-fit: contain;
}

/* Until slick initialises - or if it never does, because the script is
   blocked, cached stale or fails - show only the first slide instead of
   stacking every image at full height. */
.cbl-gallery .cbl-gal-main:not(.slick-initialized) > div:nth-child(n+2) {
    display: none;
}

/* ---------- thumbnail strip under the image ---------- */

/* the same fallback for the strip: a row of five, not a vertical stack */
.cbl-gallery .cbl-gal-thumbs:not(.slick-initialized) {
    display: flex;
    gap: 8px;
}

.cbl-gallery .cbl-gal-thumbs:not(.slick-initialized) > div {
    flex: 0 0 calc(20% - 7px);
    min-width: 0;
}

.cbl-gallery .cbl-gal-thumbs:not(.slick-initialized) > div:nth-child(n+6) {
    display: none;
}
.cbl-gal-thumbs-col {
    margin-top: 10px;
}

.cbl-gallery .cbl-gal-thumbs .slick-slide {
    padding: 0 4px;
}

.cbl-gallery .cbl-gal-thumbs .sidebar-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74px;
    padding: 5px;
    border: 1px solid var(--cbl-line);
    border-radius: 6px;
    background: #f7fafc;
    cursor: pointer;
    transition: border-color .18s, background .18s;
}

.cbl-gallery .cbl-gal-thumbs .sidebar-image:hover {
    border-color: #8fcdbf;
}

.cbl-gallery .cbl-gal-thumbs .sidebar-image img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* slick marks the synced thumbnail current */
.cbl-gallery .cbl-gal-thumbs .slick-current .sidebar-image {
    border-color: var(--cbl-green);
    background: var(--cbl-green-soft);
    box-shadow: inset 0 0 0 1px var(--cbl-green);
}

/* the mobile override in the old include shrank thumbs to 25% */
.cbl-gallery .cbl-gal-thumbs .mbl-img-fix {
    max-width: 100%;
    margin: 0;
}

/* ---------- tip note ---------- */
.cbl-gal-tip {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cbl-muted);
}

.cbl-gal-tip b {
    color: var(--cbl-ink);
}

/* ---------- right-hand support card ---------- */
.cbl-support {
    --cbl-ink: #17223b;
    --cbl-muted: #66738a;
    --cbl-line: #dce4f0;
    --cbl-green: #0da487;
    --cbl-blue: #0ea8cb;
    --cbl-orange: #e88a16;
    position: relative;
    margin-bottom: 18px;
    border: 1px solid var(--cbl-line);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    color: var(--cbl-ink);
}

.cbl-support::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--cbl-blue);
}

.cbl-support li {
    display: block;
}

.cbl-support-head {
    padding: 16px 17px 13px;
}

.cbl-support-eyebrow {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--cbl-orange);
    margin-bottom: 5px;
}

.cbl-support-head h3 {
    font-size: 19px;
    line-height: 1.25;
    margin: 0 0 6px;
    font-weight: 700;
}

.cbl-support-head p {
    margin: 0;
    font-size: 13px;
    color: var(--cbl-muted);
}

/* mockup panel */
.cbl-mockup {
    position: relative;
    height: 195px;
    margin: 0 15px 14px;
    border: 1px solid #d4dfef;
    border-radius: 6px;
    background: #e8f5f8;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.cbl-mockup-badge {
    position: absolute;
    left: 11px;
    top: 11px;
    z-index: 2;
    border-radius: 20px;
    background: #fff8ee;
    border: 1px solid #f3d3ab;
    padding: 5px 9px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--cbl-orange);
}

/* The mockup photo fills the panel behind the badge and the caption. It is
   inset at the bottom by the caption's own height so none of the boxes end up
   hidden behind it, and object-fit keeps the whole group visible at any
   sidebar width instead of cropping the outer boxes away. box-sizing is set
   here because the padding has to come out of the panel, not add to it. */
.cbl-mockup-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 6px 10px 44px;
    object-fit: contain;
    object-position: center;
}

/* kept for the CSS-drawn placeholder the photo replaced */
.cbl-mockup-box {
    position: relative;
    width: 122px;
    height: 88px;
    background: var(--cbl-blue);
    transform: skewY(-8deg) rotate(-5deg);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    line-height: 1.25;
}

.cbl-mockup-box::before {
    content: '';
    position: absolute;
    width: 34px;
    height: 88px;
    right: -34px;
    background: #087f9d;
    transform: skewY(26deg);
    transform-origin: left top;
}

.cbl-mockup-caption {
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 10px;
    background: rgba(255, 255, 255, .93);
    border-radius: 5px;
    padding: 7px 9px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #475467;
}

.cbl-mockup-caption b {
    display: block;
    color: var(--cbl-ink);
    font-size: 12.5px;
}

/* included list */
.cbl-support-included {
    padding: 14px 17px;
    background: #f2f8f6;
    border-top: 1px solid var(--cbl-line);
}

.cbl-support-included h4,
.cbl-support-pay h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 9px;
}

.cbl-included-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    margin: 9px 0;
    font-size: 12.5px;
    line-height: 1.4;
}

.cbl-included-item i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dff5ec;
    color: #14805e;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    display: grid;
    place-items: center;
}

.cbl-included-item b {
    display: block;
    font-size: 13px;
}

.cbl-included-item span {
    color: var(--cbl-muted);
}

/* payment methods */
.cbl-support-pay {
    padding: 14px 17px 16px;
    border-top: 1px solid var(--cbl-line);
}

.cbl-support-pay > p {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--cbl-muted);
}

.cbl-pay-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cbl-pay-methods span {
    border: 1px solid var(--cbl-line);
    border-radius: 5px;
    background: #eef4f7;
    padding: 6px 9px;
    font-size: 10.5px;
    font-weight: 700;
    color: #425a70;
}

.cbl-secure-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #0b8a71;
}

/* ---------- responsive ---------- */
@media (max-width: 1399px) {
    .cbl-gallery .cbl-gal-main .slider-image {
        min-height: 290px;
    }
}

@media (max-width: 991px) {
    .cbl-gallery .cbl-gal-main .slider-image {
        min-height: 260px;
    }

    .cbl-gallery .cbl-gal-main .slider-image img {
        max-height: 340px;
    }
}

@media (max-width: 575px) {
    .cbl-gallery .cbl-gal-main .slider-image {
        min-height: 220px;
        padding: 10px;
    }

    .cbl-gallery .cbl-gal-thumbs .sidebar-image {
        height: 62px;
    }

    .cbl-mockup {
        height: 175px;
        margin: 0 12px 12px;
    }

    /* the caption wraps to two lines more often at this width, so the photo
       gives it a little more room */
    .cbl-mockup-img {
        padding: 6px 8px 46px;
    }

    .cbl-support-head,
    .cbl-support-included,
    .cbl-support-pay {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ---------- full width product intro ---------- */
.cbl-product-intro {
    margin: 0 0 18px;
}

.cbl-product-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.4px;
    margin: 0 0 7px;
    color: #17223b;
}

.cbl-product-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #66738a;
}

.cbl-product-rating i {
    color: #f5a623;
}

.cbl-product-desc {
    max-width: 1200px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #66738a;
}

/* ---------- gallery meta row ---------- */
.cbl-gal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.cbl-gal-eyebrow {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: #e88a16;
}

.cbl-item-code {
    border: 1px solid #bce6ee;
    border-radius: 5px;
    background: #eaf9fc;
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 700;
    color: #087f9d;
    white-space: nowrap;
}

/* thumbnails begin at the left edge under the main image */
.cbl-gallery .cbl-gal-thumbs .slick-track {
    margin-left: 0;
    margin-right: auto;
}

.cbl-gallery .cbl-gal-thumbs .slick-list {
    margin: 0 -4px;
}

@media (max-width: 767px) {
    .cbl-product-title {
        font-size: 24px;
    }

    .cbl-product-desc {
        font-size: 13.5px;
    }
}

/* live selection summary inside the mockup caption: one flowing row as in the
   design, separated by dots, rather than a stacked label column */
#cbl_mockup_spec {
    display: block;
    line-height: 1.45;
}

#cbl_mockup_spec .cbl-spec-row {
    display: inline;
    white-space: nowrap;
}

#cbl_mockup_spec .cbl-spec-row + .cbl-spec-row::before {
    content: "\00b7";
    margin: 0 5px;
    color: #9aa6b8;
    font-weight: 700;
}

#cbl_mockup_spec .cbl-spec-row em {
    display: inline;
    min-width: 0;
    margin-right: 4px;
    font-style: normal;
    font-weight: 700;
    color: #7a879b;
}

/* slick computes the slide width inline; keep the strip from being squeezed
   and make sure it can never overflow its column on small screens */
.cbl-gallery .cbl-gal-thumbs,
.cbl-gallery .cbl-gal-thumbs .slick-list {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.cbl-gallery .cbl-gal-thumbs .slick-track {
    display: flex;
    align-items: stretch;
}

.cbl-gallery .cbl-gal-thumbs .slick-slide {
    height: auto;
    margin: 0;
}

/* the include's own mobile rule shrank thumbnails to a quarter width */
@media (max-width: 575px) {
    .cbl-gallery .cbl-gal-thumbs .mbl-img-fix {
        max-width: 100%;
        margin: 0;
    }

    .cbl-gal-thumbs-col {
        margin-top: 8px;
    }
}

/* =====================================================================
   Sections below the quote form
   ===================================================================== */

/* ---------- what happens next ---------- */
.cbl-next {
    padding: 26px 0 28px;
    background: #f2f7f8;
    border-top: 1px solid #dbe5f3;
}

.cbl-next h2 {
    margin: 0 0 5px;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    color: #174b58;
}

.cbl-next-sub {
    margin: 0 0 17px;
    font-size: 15px;
    text-align: center;
    color: #66738a;
}

.cbl-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 1080px;
    margin: 0 auto;
}

.cbl-next-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 16px;
    border: 1px solid #d7e2f0;
    border-radius: 6px;
    background: #fff;
}

.cbl-next-num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.cbl-next-card:nth-child(1) .cbl-next-num {
    background: #ffa53b;
}

.cbl-next-card:nth-child(2) .cbl-next-num {
    background: #0da487;
}

.cbl-next-card:nth-child(3) .cbl-next-num {
    background: #0ea8cb;
}

.cbl-next-card b {
    display: block;
    margin-bottom: 3px;
    font-size: 16.5px;
    color: #17223b;
}

.cbl-next-card span {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: #66738a;
}

/* ---------- benefit strip ---------- */
.cbl-benefits {
    background: #fff;
    border-top: 1px solid #dfe6ef;
    border-bottom: 1px solid #dfe6ef;
}

.cbl-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cbl-benefit {
    padding: 15px;
    border-right: 1px solid #e1e8f1;
    font-size: 13.5px;
    text-align: center;
}

.cbl-benefit:last-child {
    border-right: 0;
}

.cbl-benefit b {
    display: block;
    font-size: 15.5px;
}

.cbl-benefit span {
    color: #66738a;
}

.cbl-benefits-grid > :nth-child(1) b {
    color: #e88a16;
}

.cbl-benefits-grid > :nth-child(2) b {
    color: #0b8a71;
}

.cbl-benefits-grid > :nth-child(3) b {
    color: #087f9d;
}

.cbl-benefits-grid > :nth-child(4) b {
    color: #34465f;
}

/* ---------- product guide ---------- */
.cbl-guide {
    padding: 35px 0 45px;
    background: #fff;
}

.cbl-guide h2 {
    margin: 0 0 16px;
    font-size: 23px;
    font-weight: 700;
    color: #17223b;
}

.cbl-guide-tabs {
    display: flex;
    gap: 22px;
    margin-bottom: 18px;
    border-bottom: 1px solid #dce4f0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.cbl-guide-tab {
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 2px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #66738a;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.cbl-guide-tab:hover {
    color: #0b8a71;
}

.cbl-guide-tab.is-active {
    color: #0b8a71;
    border-bottom-color: #0da487;
}

.cbl-guide-tab:focus-visible {
    outline: 2px solid #0da487;
    outline-offset: -2px;
}

.cbl-guide-panel {
    display: none;
}

.cbl-guide-panel.is-active {
    display: block;
}

/* the merged Description / Additional Info / ... panels borrow the theme's
   .product-section-box styling for their tables and copy; its top margin is
   meant for a standalone block, so it is dropped inside a tab panel */
.cbl-guide-panel.product-section-box {
    margin-top: 0;
}

/* the theme sets li{display:inline-block} globally */
.cbl-guide li {
    display: list-item;
    margin: 5px 0;
}

.cbl-guide-overview {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 25px;
    align-items: start;
}

.cbl-info-panel {
    padding: 18px;
    border: 1px solid #dce6f4;
    border-radius: 6px;
    background: #f3f8fa;
    font-size: 16.5px;
    line-height: 1.6;
    color: #475467;
}

.cbl-info-panel b {
    display: block;
    margin-bottom: 8px;
    color: #17223b;
}

.cbl-info-panel p {
    margin: 0 0 12px;
    font-size: 14px;
}

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

.cbl-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    align-content: start;
}

.cbl-spec {
    padding: 12px;
    border: 1px solid #dbe4ef;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    line-height: 1.45;
    color: #526073;
}

.cbl-spec b {
    display: block;
    margin-bottom: 3px;
    color: #17223b;
}

.cbl-guide-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cbl-guide-card {
    padding: 17px;
    border: 1px solid #dce4f0;
    border-radius: 6px;
    background: #fff;
    min-width: 0;
}

.cbl-guide-label {
    display: inline-block;
    margin-bottom: 9px;
    color: #0b8a71;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cbl-guide-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.cbl-guide-card p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #66738a;
}

.cbl-guide-card ul {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: #526073;
}

.cbl-guide-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 3px solid #0ea8cb;
    background: #f2f8fa;
    font-size: 13px;
    line-height: 1.55;
    color: #526073;
}

.cbl-finish-key {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.cbl-finish-key span {
    padding: 10px;
    border: 1px solid #dce4f0;
    border-radius: 6px;
    background: #f7fafb;
    font-size: 13px;
    line-height: 1.45;
    color: #526073;
}

.cbl-finish-key b {
    display: block;
    margin-bottom: 2px;
    color: #17223b;
}

.cbl-guide-faq {
    border-top: 1px solid #dce4f0;
}

.cbl-guide-faq details {
    border-bottom: 1px solid #dce4f0;
}

.cbl-guide-faq summary {
    position: relative;
    padding: 15px 38px 15px 2px;
    font-size: 14px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.cbl-guide-faq summary::-webkit-details-marker {
    display: none;
}

.cbl-guide-faq summary::after {
    content: '+';
    position: absolute;
    right: 8px;
    top: 11px;
    color: #0da487;
    font-size: 22px;
    font-weight: 400;
}

.cbl-guide-faq details[open] summary::after {
    content: "\2212";
}

.cbl-guide-faq p {
    margin: 0 2px 15px;
    max-width: 900px;
    font-size: 13px;
    line-height: 1.55;
    color: #526073;
}

@media (max-width: 991px) {
    .cbl-next-grid,
    .cbl-guide-overview,
    .cbl-guide-cards,
    .cbl-finish-key {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .cbl-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cbl-benefit:nth-child(2) {
        border-right: 0;
    }

    .cbl-benefit:nth-child(-n+2) {
        border-bottom: 1px solid #e1e8f1;
    }

    .cbl-guide {
        padding: 28px 0 34px;
    }

    .cbl-guide h2 {
        font-size: 20px;
    }

    .cbl-specs {
        grid-template-columns: minmax(0, 1fr);
    }

    .cbl-guide-tabs {
        gap: 15px;
    }
}

/* ---------- type scale, matched to the design ---------- */
.cbl-product-title {
    font-size: 33px;
}

.cbl-product-desc {
    font-size: 15px;
}

.cbl-gal-eyebrow,
.cbl-item-code {
    font-size: 12px;
}

.cbl-gal-tip {
    font-size: 13px;
}

.cbl-support-eyebrow {
    font-size: 12px;
}

.cbl-support-head h3 {
    font-size: 21px;
}

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

.cbl-included-item,
.cbl-included-item b {
    font-size: 13px;
}

.cbl-mockup-badge {
    font-size: 11px;
}

.cbl-pay-methods span {
    font-size: 11.5px;
}

@media (max-width: 767px) {
    .cbl-product-title {
        font-size: 26px;
    }

    .cbl-product-desc {
        font-size: 14px;
    }
}

/* ---------- full width placement fixes ---------- */
/* the number sits inside .cbl-next-card, so the generic card span rule
   (0,1,1) outranked .cbl-next-num (0,1,0) and hid the digit */
.cbl-next-card .cbl-next-num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* scope the description text so it can never catch the number again */
.cbl-next-card .cbl-next-copy span {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: #66738a;
}

/* the theme capitalises headings; the design uses sentence case */
.cbl-next h2,
.cbl-guide h2,
.cbl-guide-card h3 {
    text-transform: none;
}

/* the description tabs now sit in their own full width section */
.product-description-section {
    padding: 0 0 10px;
    background: #fff;
}

/* =====================================================================
   Page width, matched to the product section
   Sections that come from shared includes (product-sections,
   product-detailLarge) cannot carry .cbl-product-container without also
   resizing the PPC pages that render them, so they inherit the same frame
   here instead. Scoped to this page only. Keep these numbers in step with
   --cbl-product-width / --cbl-product-gutter below.
   ===================================================================== */
.cbl-product-page .container-fluid-lg,
.cbl-product-page .container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

@media (max-width: 991px) {
    .cbl-product-page .container-fluid-lg,
    .cbl-product-page .container {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .cbl-product-page .container-fluid-lg,
    .cbl-product-page .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 575px) {
    .cbl-product-page .container-fluid-lg,
    .cbl-product-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* =====================================================================
   Product section width
   The block holding the gallery, the quote form and the support card owns
   its width here rather than inheriting the page-wide .container rule above,
   so it can be tuned on its own. Two knobs, both moving every breakpoint at
   once: --cbl-product-width is the frame, --cbl-product-gutter is the space
   held back on each side. The gutter only tightens on phones, where it still
   has to clear a thumb resting on the edge of the screen.
   ===================================================================== */
.cbl-product-page .cbl-product-container {
    --cbl-product-width: 1500px;
    --cbl-product-gutter: 16px;
    width: 100%;
    max-width: var(--cbl-product-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cbl-product-gutter);
    padding-right: var(--cbl-product-gutter);
}

/* tablet down: the 9/3 split has stacked, so the frame just fills the screen */
@media (max-width: 991px) {
    .cbl-product-page .cbl-product-container {
        --cbl-product-width: 100%;
    }
}

@media (max-width: 767px) {
    .cbl-product-page .cbl-product-container {
        --cbl-product-gutter: 14px;
    }
}

@media (max-width: 575px) {
    .cbl-product-page .cbl-product-container {
        --cbl-product-gutter: 12px;
    }
}

/* ---------- section parity with the design ---------- */
/* the design centres the three cards in 1080px */
.cbl-next-grid {
    max-width: 1080px;
    margin: 0 auto;
}

.cbl-guide {
    padding: 35px 0 60px;
}

/* the design applies a 5px radius throughout */
.cbl-next-card,
.cbl-guide-card,
.cbl-spec,
.cbl-info-panel,
.cbl-finish-key span,
.cbl-support,
.cbl-mockup,
.cbl-gallery .cbl-gal-main,
.cbl-gallery .cbl-gal-thumbs .sidebar-image {
    border-radius: 5px;
}

@media (max-width: 767px) {
    .cbl-guide {
        padding: 30px 0 34px;
    }
}

/* the summary may wrap onto more lines rather than be clipped; each
   label and value pair still stays together */
#cbl_mockup_spec {
    white-space: normal;
}

/* ---------- gallery sizes from the design ----------
   400px stage, 68px thumbnails */
.cbl-gallery .cbl-gal-main .slider-image {
    min-height: 400px;
}

.cbl-gallery .cbl-gal-thumbs .sidebar-image {
    height: 68px;
}

@media (max-width: 1399px) {
    .cbl-gallery .cbl-gal-main .slider-image {
        min-height: 340px;
    }
}

@media (max-width: 991px) {
    .cbl-gallery .cbl-gal-main .slider-image {
        min-height: 300px;
    }
}

@media (max-width: 575px) {
    .cbl-gallery .cbl-gal-main .slider-image {
        min-height: 240px;
    }

    .cbl-gallery .cbl-gal-thumbs .sidebar-image {
        height: 60px;
    }
}

/* the PPC landing pages carry the support card in their own right column */
.cbl-support-col {
    min-width: 0;
}

@media (max-width: 767px) {
    .cbl-support-col {
        margin-top: 18px;
    }
}

/* ---------- related products ---------- */
/* the heading follows the other sections on this page instead of the theme's
   leaf title: same size, weight, colour and sentence case as .cbl-guide h2 */
.cbl-related .title {
    display: block;
    margin-bottom: 16px;
}

.cbl-related .title h2 {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    color: #17223b;
    text-transform: none;
}

@media (max-width: 767px) {
    .cbl-related .title h2 {
        font-size: 20px;
    }
}

/* a description stored with its own paragraph tags (the free-template pages)
   keeps the block's spacing rather than adding a paragraph margin under it */
.cbl-product-desc p:last-child {
    margin-bottom: 0;
}