/* ==========================================================
   CRAFT BOXES UK
   CUSTOM BOXES — FLAGSHIP LANDING PAGE
=========================================================== */


/* ==========================================================
   ROOT
=========================================================== */

.cbx-page {

    --cbx-white: #ffffff;

    --cbx-cream: #f8f3ed;
    --cbx-cream-light: #fdfbf8;

    --cbx-ink: #281c15;
    --cbx-ink-soft: #4b4038;
    --cbx-muted: #74685f;

    --cbx-kraft-dark: #6d3d0b;

    --cbx-orange: #bc4f13;
    --cbx-orange-dark: #9b3f0d;

    --cbx-olive: #45482b;

    --cbx-border: #dfd3c7;
    --cbx-border-dark: #cdbbaa;

    --cbx-container: 1500px;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    color: var(--cbx-ink);

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ==========================================================
   RESET
=========================================================== */

.cbx-page,
.cbx-page *,
.cbx-page *::before,
.cbx-page *::after {

    box-sizing: border-box;
}


.cbx-page h1,
.cbx-page h2,
.cbx-page h3,
.cbx-page p,
.cbx-page ul,
.cbx-page ol {

    margin-top: 0;
}


.cbx-page a {

    color: inherit;

    text-decoration: none;
}


.cbx-page svg {

    display: block;
}


.cbx-page img {

    max-width: 100%;
}


/* ==========================================================
   SAFE SHELL
=========================================================== */

.cbx-shell {

    width: min(
        calc(100% - clamp(32px, 5.6vw, 88px)),
        var(--cbx-container)
    ) !important;

    max-width: var(--cbx-container) !important;

    min-width: 0 !important;

    margin-inline: auto !important;

    padding: 0 !important;
}


/* ==========================================================
   SHARED EYEBROW
=========================================================== */

.cbx-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color: var(--cbx-orange-dark);

    font-size: 12px;

    font-weight: 850;

    line-height: 1.35;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.cbx-eyebrow::before {

    content: "";

    width: 25px;
    height: 2px;

    flex: 0 0 25px;

    border-radius: 999px;

    background: var(--cbx-orange);
}


/* ==========================================================
   SHARED SECTION HEADING
=========================================================== */

.cbx-split-heading {

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(330px, .72fr);

    gap:
        clamp(38px, 5.5vw, 88px);

    align-items: end;

    margin-bottom: 30px;
}


.cbx-split-heading h2,
.cbx-section-heading h2,
.cbx-materials__intro h2,
.cbx-spec__intro h2,
.cbx-why__intro h2,
.cbx-quality__intro h2,
.cbx-faq__intro h2 {

    margin: 0;

    color: var(--cbx-ink);

    font-size:
        clamp(32px, 3.25vw, 50px);

    font-weight: 830;

    line-height: 1.06;

    letter-spacing: -.047em;
}


.cbx-split-heading > p {

    max-width: 600px;

    margin: 0;

    color: var(--cbx-muted);

    font-size: 16px;

    line-height: 1.72;
}


.cbx-section-heading {

    max-width: 900px;

    margin-bottom: 30px;
}


.cbx-section-heading > p {

    max-width: 760px;

    margin:
        15px
        0
        0;

    color: var(--cbx-muted);

    font-size: 16px;

    line-height: 1.72;
}


.cbx-section-heading--center {

    margin:
        0
        auto
        34px;

    text-align: center;
}


.cbx-section-heading--center
.cbx-eyebrow {

    justify-content: center;
}


.cbx-section-heading--center > p {

    margin:
        15px
        auto
        0;
}


/* ==========================================================
   BUTTONS
=========================================================== */

.cbx-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 52px;

    padding:
        13px
        20px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 850;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}


.cbx-btn svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.cbx-btn:hover {

    transform: translateY(-2px);
}


.cbx-btn--primary {

    color: var(--cbx-white) !important;

    background: var(--cbx-orange);
}


.cbx-btn--primary:hover {

    background: var(--cbx-orange-dark);
}


.cbx-btn--secondary {

    color: var(--cbx-ink) !important;

    border:
        1px solid
        var(--cbx-border-dark);

    background:
        rgba(255,255,255,.7);
}


.cbx-text-link {

    color: var(--cbx-orange-dark) !important;

    font-size: 14px;

    font-weight: 850;
}


/* ==========================================================
   BREADCRUMB + HERO SHARED SURFACE
=========================================================== */

.cbx-breadcrumb {

    padding:
        16px
        0
        10px;

    border: 0;

    background:
        #fbf6f0;
}


.cbx-breadcrumb ol {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 9px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.cbx-breadcrumb li,
.cbx-breadcrumb a {

    color: var(--cbx-muted);

    font-size: 13px;

    font-weight: 650;
}


.cbx-breadcrumb li[aria-current="page"] {

    color: var(--cbx-ink);

    font-weight: 800;
}


/* ==========================================================
   1 — HERO
=========================================================== */

.cbx-hero {

    padding:
        43px
        0
        62px;

    background:
        radial-gradient(
            circle at 86% 16%,
            rgba(188,79,19,.075),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #fbf6f0 0%,
            #f4eae1 100%
        );
}


.cbx-hero__layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .7fr);

    gap:
        clamp(45px, 6vw, 92px);

    align-items: center;
}


.cbx-hero__content h1 {

    max-width: 940px;

    margin:
        0
        0
        20px;

    color: var(--cbx-ink);

    font-size:
        clamp(44px, 5.1vw, 74px);

    font-weight: 840;

    line-height: .98;

    letter-spacing: -.058em;
}


.cbx-hero__lead {

    max-width: 790px;

    margin:
        0
        0
        25px;

    color: var(--cbx-muted);

    font-size: 17px;

    line-height: 1.73;
}


.cbx-hero__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-bottom: 29px;
}


.cbx-hero__trust {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    border-top:
        1px solid
        var(--cbx-border);

    border-left:
        1px solid
        var(--cbx-border);
}


.cbx-hero__trust > div {

    padding: 15px;

    border-right:
        1px solid
        var(--cbx-border);

    border-bottom:
        1px solid
        var(--cbx-border);

    background:
        rgba(255,255,255,.48);
}


.cbx-hero__trust span,
.cbx-hero__trust strong,
.cbx-hero__trust small {

    display: block;
}


.cbx-hero__trust span {

    margin-bottom: 8px;

    color: var(--cbx-orange-dark);

    font-size: 12px;

    font-weight: 900;
}


.cbx-hero__trust strong {

    margin-bottom: 4px;

    font-size: 15px;

    font-weight: 820;
}


.cbx-hero__trust small {

    color: var(--cbx-muted);

    font-size: 12px;

    line-height: 1.5;
}


/* ==========================================================
   HERO BUILDER
=========================================================== */

.cbx-builder {

    overflow: hidden;

    border:
        1px solid
        var(--cbx-border-dark);

    border-radius: 24px;

    background: var(--cbx-white);

    box-shadow:
        0 28px 65px
        rgba(67,40,20,.12);
}


.cbx-builder__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        21px
        23px;

    color: var(--cbx-white);

    background: var(--cbx-ink);
}


.cbx-builder__header > div > span,
.cbx-builder__header > div > strong {

    display: block;
}


.cbx-builder__header > div > span {

    margin-bottom: 4px;

    color: #efb887;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-builder__header > div > strong {

    font-size: 17px;

    font-weight: 820;
}


.cbx-builder__status {

    padding:
        7px
        9px;

    color: #efb887;

    border:
        1px solid
        rgba(239,184,135,.22);

    border-radius: 999px;

    background:
        rgba(188,79,19,.13);

    font-size: 10px;

    font-weight: 850;
}


.cbx-builder__workspace {

    padding:
        22px;
}


.cbx-builder__route {

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto;

    gap: 7px;

    align-items: center;

    margin-bottom: 24px;
}


.cbx-builder__route article {

    text-align: center;
}


.cbx-builder__route article > span {

    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    margin:
        0
        auto
        7px;

    color: var(--cbx-muted);

    border:
        1px solid
        var(--cbx-border);

    border-radius: 50%;

    background: var(--cbx-cream-light);

    font-size: 10px;

    font-weight: 900;
}


.cbx-builder__route article.is-active > span {

    color: var(--cbx-white);

    border-color: var(--cbx-orange);

    background: var(--cbx-orange);
}


.cbx-builder__route small,
.cbx-builder__route strong {

    display: block;
}


.cbx-builder__route small {

    margin-bottom: 2px;

    color: var(--cbx-muted);

    font-size: 8px;

    font-weight: 700;
}


.cbx-builder__route strong {

    font-size: 10px;

    font-weight: 800;
}


.cbx-builder__route > i {

    height: 1px;

    background:
        repeating-linear-gradient(
            90deg,
            var(--cbx-border-dark) 0 5px,
            transparent 5px 9px
        );
}


.cbx-builder__preview {

    position: relative;

    display: grid;

    place-items: center;

    min-height: 275px;

    margin-bottom: 14px;

    overflow: hidden;

    border:
        1px solid
        var(--cbx-border);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at center,
            rgba(188,79,19,.1),
            transparent 56%
        ),
        var(--cbx-cream-light);
}


.cbx-builder__box {

    position: relative;

    width: 170px;
    height: 120px;
}


.cbx-builder__box-front {

    position: absolute;

    inset:
        14px
        0
        0;

    display: grid;

    place-items: center;

    color: #422916;

    border:
        2px solid
        var(--cbx-kraft-dark);

    background:
        linear-gradient(
            135deg,
            #cc8a49,
            #b66e30
        );

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .09em;
}


.cbx-builder__box-top {

    position: absolute;

    top: -22px;
    left: 25px;

    width: 118px;
    height: 37px;

    transform:
        skewX(-40deg);

    border:
        2px solid
        var(--cbx-kraft-dark);

    background: #dda56d;
}


.cbx-builder__measure {

    position: absolute;

    color: var(--cbx-orange-dark);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .08em;
}


.cbx-builder__measure--width {

    left: 20%;
    right: 20%;
    bottom: 26px;

    padding-top: 8px;

    border-top:
        1px solid
        currentColor;

    text-align: center;
}


.cbx-builder__measure--height {

    top: 26%;
    bottom: 26%;
    right: 22px;

    display: flex;

    align-items: center;

    border-left:
        1px solid
        currentColor;
}


.cbx-builder__measure--height span {

    transform:
        rotate(90deg);

    transform-origin: center;
}


.cbx-builder__summary {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    border-top:
        1px solid
        var(--cbx-border);

    border-left:
        1px solid
        var(--cbx-border);
}


.cbx-builder__summary > div {

    padding: 12px;

    border-right:
        1px solid
        var(--cbx-border);

    border-bottom:
        1px solid
        var(--cbx-border);
}


.cbx-builder__summary small,
.cbx-builder__summary strong {

    display: block;
}


.cbx-builder__summary small {

    margin-bottom: 4px;

    color: var(--cbx-muted);

    font-size: 10px;
}


.cbx-builder__summary strong {

    font-size: 12px;

    font-weight: 800;
}


.cbx-builder__footer {

    padding:
        17px
        22px;

    color: var(--cbx-white);

    background: var(--cbx-olive);
}


.cbx-builder__footer span,
.cbx-builder__footer strong {

    display: block;
}


.cbx-builder__footer span {

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.58);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-builder__footer strong {

    font-size: 14px;

    font-weight: 800;

    line-height: 1.45;
}


/* ==========================================================
   2 — CHOOSE YOUR PACKAGING
=========================================================== */

.cbx-needs {

    padding:
        50px
        0
        62px;

    background: var(--cbx-white);
}


.cbx-needs__grid {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 12px;
}


.cbx-need-card {

    overflow: hidden;

    border:
        1px solid
        var(--cbx-border);

    border-radius: 17px;

    background: var(--cbx-cream-light);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.cbx-need-card--wide {

    grid-column:
        span 2;
}


.cbx-need-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(188,79,19,.34);

    box-shadow:
        0 18px 38px
        rgba(67,40,20,.08);
}


.cbx-need-card__image {

    position: relative;

    height: 205px;

    overflow: hidden;
}


.cbx-need-card--wide
.cbx-need-card__image {

    height: 250px;
}


.cbx-need-card__image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 450ms ease;
}


.cbx-need-card:hover
.cbx-need-card__image img {

    transform: scale(1.04);
}


.cbx-need-card__image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(40,28,21,.44) 100%
        );
}


.cbx-need-card__image > span {

    position: absolute;

    z-index: 2;

    left: 15px;
    bottom: 14px;

    color: var(--cbx-white);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .1em;
}


.cbx-need-card__content {

    padding: 18px;
}


.cbx-need-card__content small,
.cbx-need-card__content strong,
.cbx-need-card__content i {

    display: block;
}


.cbx-need-card__content > small {

    margin-bottom: 8px;

    color: var(--cbx-orange-dark);

    font-size: 11px;

    font-weight: 800;
}


.cbx-need-card__content > strong {

    margin-bottom: 7px;

    font-size: 18px;

    font-weight: 820;
}


.cbx-need-card__content p {

    margin:
        0
        0
        14px;

    color: var(--cbx-muted);

    font-size: 13px;

    line-height: 1.62;
}


.cbx-need-card__content i {

    color: var(--cbx-orange-dark);

    font-size: 12px;

    font-style: normal;

    font-weight: 820;
}


/* ==========================================================
   3 — BOX STYLES
=========================================================== */

.cbx-styles {

    padding:
        50px
        0
        62px;

    background:
        linear-gradient(
            180deg,
            #f8f3ed 0%,
            #f4eae0 100%
        );
}


.cbx-styles__grid {

    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 12px;
}


.cbx-style-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 17px;

    border:
        1px solid
        var(--cbx-border);

    border-radius: 16px;

    background: var(--cbx-white);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.cbx-style-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(188,79,19,.34);

    box-shadow:
        0 17px 35px
        rgba(67,40,20,.08);
}


.cbx-style-card__number {

    margin-bottom: 10px;

    color: var(--cbx-orange-dark);

    font-size: 10px;

    font-weight: 900;
}


.cbx-style-card__image {

    height: 180px;

    margin-bottom: 15px;

    overflow: hidden;

    border-radius: 12px;

    background: var(--cbx-cream-light);
}


.cbx-style-card__image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 450ms ease;
}


.cbx-style-card:hover
.cbx-style-card__image img {

    transform: scale(1.045);
}


.cbx-style-card > strong {

    margin-bottom: 5px;

    font-size: 16px;

    font-weight: 820;

    line-height: 1.35;
}


.cbx-style-card > small {

    margin-bottom: 14px;

    color: var(--cbx-muted);

    font-size: 12px;

    line-height: 1.5;
}


.cbx-style-card__link {

    margin-top: auto;

    color: var(--cbx-orange-dark);

    font-size: 11px;

    font-weight: 820;
}


/* ==========================================================
   4 — MATERIALS
=========================================================== */

.cbx-materials {

    padding:
        50px
        0
        62px;

    background: var(--cbx-white);
}


.cbx-materials__layout {

    display: grid;

    grid-template-columns:
        minmax(300px,.56fr)
        minmax(0,1.25fr);

    gap:
        clamp(40px,5.5vw,80px);

    align-items: start;
}


.cbx-materials__intro {

    max-width: 550px;
}


.cbx-materials__intro > p {

    margin:
        16px
        0
        18px;

    color: var(--cbx-muted);

    font-size: 16px;

    line-height: 1.72;
}


.cbx-materials__.elementor-element.elementor-element-9454ee4 {

    overflow: hidden;

    border:
        1px solid
        var(--cbx-border-dark);

    border-radius: 20px;

    background: var(--cbx-cream-light);
}


.cbx-materials__.elementor-element.elementor-element-9454ee4 article {

    display: grid;

    grid-template-columns:
        110px
        minmax(0,1fr);

    gap: 18px;

    align-items: center;

    padding: 18px;

    border-bottom:
        1px solid
        var(--cbx-border);
}


.cbx-materials__.elementor-element.elementor-element-9454ee4 article:last-child {

    border-bottom: 0;
}


.cbx-materials__.elementor-element.elementor-element-9454ee4 article.is-active {

    background:
        rgba(188,79,19,.04);
}


.cbx-materials__sample {

    display: grid;

    place-items: center;

    min-height: 92px;

    color: var(--cbx-ink);

    border-radius: 11px;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .09em;
}


.cbx-materials__sample--kraft {
    background: #bd7b3e;
}

.cbx-materials__sample--card {
    background: #f0ece5;
}

.cbx-materials__sample--corrugated {
    background:
        repeating-linear-gradient(
            90deg,
            #c68c52 0 8px,
            #ddb17e 8px 16px
        );
}

.cbx-materials__sample--rigid {
    background: #83705f;
    color: #fff;
}

.cbx-materials__sample--recycled {
    background: #afb19a;
}


.cbx-materials__.elementor-element.elementor-element-9454ee4 small,
.cbx-materials__.elementor-element.elementor-element-9454ee4 strong {

    display: block;
}


.cbx-materials__.elementor-element.elementor-element-9454ee4 small {

    margin-bottom: 4px;

    color: var(--cbx-orange-dark);

    font-size: 11px;

    font-weight: 750;
}


.cbx-materials__.elementor-element.elementor-element-9454ee4 strong {

    margin-bottom: 5px;

    font-size: 16px;

    font-weight: 820;
}


.cbx-materials__.elementor-element.elementor-element-9454ee4 p {

    margin: 0;

    color: var(--cbx-muted);

    font-size: 13px;

    line-height: 1.6;
}


/* ==========================================================
   5 — PRINTING
=========================================================== */

.cbx-print {

    padding:
        50px
        0
        62px;

    background:
        linear-gradient(
            180deg,
            #f8f3ed 0%,
            #f4eae0 100%
        );
}


.cbx-print__workspace {

    display: grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(300px,.54fr);

    gap: 18px;

    align-items: stretch;
}


.cbx-print__swatches {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    border-top:
        1px solid
        var(--cbx-border);

    border-left:
        1px solid
        var(--cbx-border);
}


.cbx-print__swatches article {

    padding: 20px;

    border-right:
        1px solid
        var(--cbx-border);

    border-bottom:
        1px solid
        var(--cbx-border);

    background: var(--cbx-white);
}


.cbx-print__mark {

    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    margin-bottom: 16px;

    border-radius: 13px;

    font-size: 11px;

    font-weight: 900;
}


.cbx-print__mark--cmyk {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #009fca 0 25%,
            #d41a66 25% 50%,
            #e7c900 50% 75%,
            #222 75%
        );
}


.cbx-print__mark--pantone {

    color: #fff;

    background: #bc4f13;
}


.cbx-print__mark--white {

    border:
        1px solid
        var(--cbx-border);

    background: #fff;
}


.cbx-print__mark--foil {

    background:
        linear-gradient(
            135deg,
            #e7c994,
            #a67b37
        );
}


.cbx-print__mark--emboss {

    background: #e7ded3;
}


.cbx-print__mark--uv {

    background:
        linear-gradient(
            135deg,
            #2e231c,
            #765641
        );

    color: #fff;
}


.cbx-print__swatches strong,
.cbx-print__swatches small {

    display: block;
}


.cbx-print__swatches strong {

    margin-bottom: 5px;

    font-size: 15px;

    font-weight: 820;
}


.cbx-print__swatches small {

    color: var(--cbx-muted);

    font-size: 12px;

    line-height: 1.5;
}


.cbx-print__note {

    padding:
        28px;

    color: var(--cbx-white);

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255,255,255,.08),
            transparent 34%
        ),
        var(--cbx-ink);
}


.cbx-print__note > span {

    display: block;

    margin-bottom: 12px;

    color: #efb887;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-print__note h3 {

    margin-bottom: 13px;

    color: var(--cbx-white);

    font-size:
        clamp(24px,2.3vw,34px);

    font-weight: 820;

    line-height: 1.12;

    letter-spacing: -.035em;
}


.cbx-print__note p {

    margin:
        0
        0
        18px;

    color:
        rgba(255,255,255,.63);

    font-size: 13px;

    line-height: 1.68;
}


.cbx-print__note a {

    color: #efb887;

    font-size: 13px;

    font-weight: 820;
}


/* ==========================================================
   6 — SPECIFICATION
=========================================================== */

.cbx-spec {

    padding:
        50px
        0
        62px;

    background: var(--cbx-white);
}


.cbx-spec__intro {

    max-width: 900px;

    margin-bottom: 30px;
}


.cbx-spec__intro > p {

    max-width: 700px;

    margin:
        15px
        0
        0;

    color: var(--cbx-muted);

    font-size: 16px;

    line-height: 1.72;
}


.cbx-spec__board {

    overflow: hidden;

    border:
        1px solid
        var(--cbx-border-dark);

    border-radius: 22px;

    background: var(--cbx-white);

    box-shadow:
        0 24px 55px
        rgba(67,40,20,.07);
}


.cbx-spec__head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        20px
        23px;

    color: var(--cbx-white);

    background: var(--cbx-ink);
}


.cbx-spec__head > div > span,
.cbx-spec__head > div > strong {

    display: block;
}


.cbx-spec__head > div > span {

    margin-bottom: 4px;

    color: #efb887;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-spec__head > div > strong {

    font-size: 18px;

    font-weight: 820;
}


.cbx-spec__status {

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(239,184,135,.22);

    border-radius: 999px;

    color: #efb887;

    background:
        rgba(188,79,19,.13);

    font-size: 10px;

    font-weight: 800;
}


.cbx-spec__steps {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    border-left:
        1px solid
        var(--cbx-border);
}


.cbx-spec__steps article {

    display: grid;

    grid-template-columns:
        46px
        minmax(0,1fr);

    gap: 13px;

    min-width: 0;

    padding: 20px;

    border-right:
        1px solid
        var(--cbx-border);

    border-bottom:
        1px solid
        var(--cbx-border);

    background: var(--cbx-cream-light);
}


.cbx-spec__steps article > span {

    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    color: var(--cbx-orange-dark);

    border-radius: 11px;

    background:
        rgba(188,79,19,.07);

    font-size: 11px;

    font-weight: 900;
}


.cbx-spec__steps small,
.cbx-spec__steps strong {

    display: block;
}


.cbx-spec__steps small {

    margin-bottom: 5px;

    color: var(--cbx-orange-dark);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .07em;
}


.cbx-spec__steps strong {

    margin-bottom: 5px;

    font-size: 15px;

    font-weight: 820;

    line-height: 1.4;
}


.cbx-spec__steps p {

    margin: 0;

    color: var(--cbx-muted);

    font-size: 12px;

    line-height: 1.55;
}


.cbx-spec__result {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        20px
        23px;

    background: var(--cbx-olive);
}


.cbx-spec__result small,
.cbx-spec__result strong {

    display: block;
}


.cbx-spec__result small {

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.6);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-spec__result strong {

    color: var(--cbx-white);

    font-size: 14px;

    font-weight: 820;
}


.cbx-spec__result a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 46px;

    padding:
        11px
        15px;

    color: var(--cbx-ink);

    border-radius: 10px;

    background: var(--cbx-white);

    font-size: 12px;

    font-weight: 850;
}


.cbx-spec__result a svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
}


/* ==========================================================
   7 — INDUSTRIES
=========================================================== */

.cbx-industries {

    padding:
        50px
        0
        62px;

    background:
        linear-gradient(
            180deg,
            #f8f3ed 0%,
            #f4eae0 100%
        );
}


.cbx-industries__grid {

    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    border-top:
        1px solid
        var(--cbx-border);

    border-left:
        1px solid
        var(--cbx-border);
}


.cbx-industries__grid a {

    min-height: 175px;

    padding: 20px;

    border-right:
        1px solid
        var(--cbx-border);

    border-bottom:
        1px solid
        var(--cbx-border);

    background: var(--cbx-white);

    transition:
        background-color 180ms ease;
}


.cbx-industries__grid a:hover {

    background: var(--cbx-cream-light);
}


.cbx-industries__grid span,
.cbx-industries__grid strong,
.cbx-industries__grid small {

    display: block;
}


.cbx-industries__grid span {

    margin-bottom: 28px;

    color: var(--cbx-orange-dark);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-industries__grid strong {

    margin-bottom: 6px;

    font-size: 16px;

    font-weight: 820;
}


.cbx-industries__grid small {

    max-width: 260px;

    color: var(--cbx-muted);

    font-size: 12px;

    line-height: 1.55;
}


.cbx-industries__footer {

    margin-top: 18px;

    text-align: right;
}


.cbx-industries__footer a {

    color: var(--cbx-orange-dark);

    font-size: 13px;

    font-weight: 850;
}


/* ==========================================================
   8 — WHY CUSTOM
=========================================================== */

.cbx-why {

    padding:
        50px
        0
        62px;

    background: var(--cbx-white);
}


.cbx-why__layout {

    display: grid;

    grid-template-columns:
        minmax(300px,.64fr)
        minmax(0,1.12fr);

    gap:
        clamp(40px,5vw,76px);

    align-items: center;
}


.cbx-why__intro > p {

    margin:
        16px
        0
        0;

    color: var(--cbx-muted);

    font-size: 15px;

    line-height: 1.72;
}


.cbx-why__comparison {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        62px
        minmax(0,1fr);

    align-items: stretch;
}


.cbx-why__column {

    padding: 25px;

    border:
        1px solid
        var(--cbx-border-dark);

    border-radius: 18px;
}


.cbx-why__column--plain {

    background: var(--cbx-cream-light);
}


.cbx-why__column--custom {

    color: var(--cbx-white);

    background: var(--cbx-ink);
}


.cbx-why__column > span {

    display: block;

    margin-bottom: 12px;

    color: var(--cbx-orange-dark);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-why__column--custom > span {

    color: #efb887;
}


.cbx-why__column h3 {

    margin-bottom: 19px;

    color: inherit;

    font-size:
        clamp(22px,2.2vw,31px);

    font-weight: 820;

    line-height: 1.14;

    letter-spacing: -.03em;
}


.cbx-why__column ul {

    display: grid;

    gap: 10px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.cbx-why__column li {

    padding:
        10px
        0;

    border-bottom:
        1px solid
        var(--cbx-border);

    color: var(--cbx-muted);

    font-size: 13px;
}


.cbx-why__column--custom li {

    color:
        rgba(255,255,255,.65);

    border-color:
        rgba(255,255,255,.1);
}


.cbx-why__arrow {

    display: grid;

    place-items: center;

    color: var(--cbx-orange);

    font-size: 26px;

    font-weight: 800;
}


/* ==========================================================
   9 — PROCESS
=========================================================== */

.cbx-process {

    padding:
        50px
        0
        62px;

    background:
        linear-gradient(
            180deg,
            #f8f3ed 0%,
            #f4eae0 100%
        );
}


.cbx-process__track {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(7,minmax(0,1fr));
}


.cbx-process__rail {

    position: absolute;

    top: 29px;

    left: 7%;
    right: 7%;

    height: 2px;

    background: var(--cbx-border-dark);
}


.cbx-process__track article {

    position: relative;

    z-index: 2;

    padding:
        0
        9px;

    text-align: center;
}


.cbx-process__track article > span {

    display: grid;

    place-items: center;

    width: 56px;
    height: 56px;

    margin:
        0
        auto
        15px;

    color: var(--cbx-orange-dark);

    border:
        1px solid
        var(--cbx-border-dark);

    border-radius: 50%;

    background: var(--cbx-white);

    box-shadow:
        0 0 0 7px
        #f6efe8;

    font-size: 11px;

    font-weight: 900;
}


.cbx-process__track strong,
.cbx-process__track small {

    display: block;
}


.cbx-process__track strong {

    margin-bottom: 4px;

    font-size: 13px;

    font-weight: 820;
}


.cbx-process__track small {

    color: var(--cbx-muted);

    font-size: 11px;

    line-height: 1.45;
}


.cbx-process__link {

    margin-top: 26px;

    text-align: center;
}


.cbx-process__link a {

    color: var(--cbx-orange-dark);

    font-size: 13px;

    font-weight: 850;
}


/* ==========================================================
   10 — QUALITY
=========================================================== */

.cbx-quality {

    padding:
        50px
        0
        62px;

    background: var(--cbx-white);
}


.cbx-quality__layout {

    display: grid;

    grid-template-columns:
        minmax(300px,.57fr)
        minmax(0,1.15fr);

    gap:
        clamp(42px,5.3vw,78px);

    align-items: center;
}


.cbx-quality__intro > p {

    margin:
        16px
        0
        19px;

    color: var(--cbx-muted);

    font-size: 15px;

    line-height: 1.72;
}


.cbx-quality__principle {

    padding: 15px;

    border:
        1px solid
        rgba(69,72,43,.18);

    border-radius: 13px;

    background:
        rgba(69,72,43,.055);
}


.cbx-quality__principle small,
.cbx-quality__principle strong {

    display: block;
}


.cbx-quality__principle small {

    margin-bottom: 4px;

    color: var(--cbx-muted);

    font-size: 11px;
}


.cbx-quality__principle strong {

    font-size: 14px;

    font-weight: 780;

    line-height: 1.5;
}


.cbx-quality__dashboard {

    overflow: hidden;

    border:
        1px solid
        var(--cbx-border-dark);

    border-radius: 20px;

    background: var(--cbx-cream-light);
}


.cbx-quality__dashboard-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding:
        19px
        21px;

    color: var(--cbx-white);

    background: var(--cbx-ink);
}


.cbx-quality__dashboard-head > div > span,
.cbx-quality__dashboard-head > div > strong {

    display: block;
}


.cbx-quality__dashboard-head > div > span {

    margin-bottom: 3px;

    color: #efb887;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-quality__dashboard-head > div > strong {

    font-size: 17px;

    font-weight: 820;
}


.cbx-quality__pass {

    padding:
        6px
        9px;

    color: #efb887;

    border:
        1px solid
        rgba(239,184,135,.22);

    border-radius: 999px;

    font-size: 10px;

    font-weight: 850;
}


.cbx-quality__checks {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    padding: 15px;

    gap: 9px;
}


.cbx-quality__checks article {

    display: grid;

    grid-template-columns:
        38px
        minmax(0,1fr);

    gap: 12px;

    align-items: center;

    padding: 14px;

    border:
        1px solid
        var(--cbx-border);

    border-radius: 11px;

    background: var(--cbx-white);
}


.cbx-quality__checks article > span {

    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    color: var(--cbx-olive);

    border-radius: 50%;

    background:
        rgba(69,72,43,.08);

    font-size: 13px;

    font-weight: 900;
}


.cbx-quality__checks small,
.cbx-quality__checks strong {

    display: block;
}


.cbx-quality__checks small {

    margin-bottom: 3px;

    color: var(--cbx-muted);

    font-size: 11px;
}


.cbx-quality__checks strong {

    font-size: 13px;

    font-weight: 800;
}


/* ==========================================================
   11 — KNOWLEDGE
=========================================================== */

.cbx-knowledge {

    padding:
        50px
        0
        62px;

    background:
        linear-gradient(
            180deg,
            #f8f3ed 0%,
            #f4eae0 100%
        );
}


.cbx-knowledge__grid {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    border-top:
        1px solid
        var(--cbx-border);

    border-left:
        1px solid
        var(--cbx-border);
}


.cbx-knowledge__grid a {

    position: relative;

    min-height: 190px;

    padding: 21px;

    border-right:
        1px solid
        var(--cbx-border);

    border-bottom:
        1px solid
        var(--cbx-border);

    background: var(--cbx-white);
}


.cbx-knowledge__grid a > span {

    display: block;

    margin-bottom: 27px;

    color: var(--cbx-orange-dark);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-knowledge__grid strong,
.cbx-knowledge__grid small {

    display: block;
}


.cbx-knowledge__grid strong {

    margin-bottom: 6px;

    font-size: 16px;

    font-weight: 820;
}


.cbx-knowledge__grid small {

    max-width: 310px;

    color: var(--cbx-muted);

    font-size: 12px;

    line-height: 1.55;
}


.cbx-knowledge__grid i {

    position: absolute;

    top: 18px;
    right: 18px;

    color: var(--cbx-orange-dark);

    font-size: 18px;

    font-style: normal;
}


/* ==========================================================
   12 — PRODUCT GALLERY
   CSS-ONLY FILTER SYSTEM
=========================================================== */

.cbx-products {

    padding:
        50px
        0
        62px;

    background:
        var(--cbx-white);
}


/* ==========================================================
   HEADER
=========================================================== */

.cbx-products__head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 22px;
}


.cbx-products__head > div {

    min-width: 0;
}


.cbx-products__head h2 {

    margin:
        0
        0
        8px;

    color:
        var(--cbx-ink);

    font-size:
        clamp(32px,3.25vw,50px);

    font-weight: 830;

    line-height: 1.06;

    letter-spacing: -.047em;
}


.cbx-products__head p {

    max-width: 700px;

    margin: 0;

    color:
        var(--cbx-muted);

    font-size: 15px;

    line-height: 1.68;
}


.cbx-products__all {

    flex: 0 0 auto;

    color:
        var(--cbx-orange-dark) !important;

    font-size: 13px;

    font-weight: 850;
}


/* ==========================================================
   FILTER SYSTEM
=========================================================== */

.cbx-products__filter-system {

    position: relative;

    width: 100%;
}


/* hide radio inputs but keep them functional */

.cbx-products__radio {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip:
        rect(0,0,0,0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ==========================================================
   FILTER TABS
=========================================================== */

.cbx-products__filters {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 20px;
}


.cbx-products__filter {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 41px;

    padding:
        9px
        14px;

    color:
        var(--cbx-muted);

    border:
        1px solid
        var(--cbx-border);

    border-radius: 999px;

    background:
        var(--cbx-cream-light);

    font-family: inherit;

    font-size: 12px;

    font-weight: 760;

    line-height: 1;

    cursor: pointer;

    user-select: none;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}


.cbx-products__filter:hover {

    color:
        var(--cbx-orange-dark);

    border-color:
        rgba(188,79,19,.35);

    background:
        rgba(188,79,19,.05);
}


/* ==========================================================
   ACTIVE FILTER COLOURS
=========================================================== */

#cbx-filter-popular:checked
~ .cbx-products__filters
.cbx-products__filter--popular,

#cbx-filter-food:checked
~ .cbx-products__filters
.cbx-products__filter--food,

#cbx-filter-retail:checked
~ .cbx-products__filters
.cbx-products__filter--retail,

#cbx-filter-cosmetics:checked
~ .cbx-products__filters
.cbx-products__filter--cosmetics,

#cbx-filter-gift:checked
~ .cbx-products__filters
.cbx-products__filter--gift,

#cbx-filter-shipping:checked
~ .cbx-products__filters
.cbx-products__filter--shipping,

#cbx-filter-display:checked
~ .cbx-products__filters
.cbx-products__filter--display {

    color:
        var(--cbx-white);

    border-color:
        var(--cbx-orange);

    background:
        var(--cbx-orange);
}


/* ==========================================================
   PRODUCT GRID
=========================================================== */

.cbx-products__grid {

    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 12px;

    width: 100%;

    min-width: 0;
}


/* ==========================================================
   IMPORTANT
   HIDE EVERY PRODUCT BY DEFAULT
=========================================================== */

.cbx-product-card {

    display: none;

    flex-direction: column;

    min-width: 0;

    padding: 16px;

    overflow: hidden;

    color:
        var(--cbx-ink);

    border:
        1px solid
        var(--cbx-border);

    border-radius: 15px;

    background:
        var(--cbx-cream-light);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


/* ==========================================================
   POPULAR
=========================================================== */

#cbx-filter-popular:checked
~ .cbx-products__grid
.cbx-cat-popular {

    display: flex;
}


/* ==========================================================
   FOOD
=========================================================== */

#cbx-filter-food:checked
~ .cbx-products__grid
.cbx-cat-food {

    display: flex;
}


/* ==========================================================
   RETAIL
=========================================================== */

#cbx-filter-retail:checked
~ .cbx-products__grid
.cbx-cat-retail {

    display: flex;
}


/* ==========================================================
   COSMETICS
=========================================================== */

#cbx-filter-cosmetics:checked
~ .cbx-products__grid
.cbx-cat-cosmetics {

    display: flex;
}


/* ==========================================================
   GIFT
=========================================================== */

#cbx-filter-gift:checked
~ .cbx-products__grid
.cbx-cat-gift {

    display: flex;
}


/* ==========================================================
   SHIPPING
=========================================================== */

#cbx-filter-shipping:checked
~ .cbx-products__grid
.cbx-cat-shipping {

    display: flex;
}


/* ==========================================================
   DISPLAY
=========================================================== */

#cbx-filter-display:checked
~ .cbx-products__grid
.cbx-cat-display {

    display: flex;
}


/* ==========================================================
   CARD HOVER
=========================================================== */

.cbx-product-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(188,79,19,.34);

    box-shadow:
        0 16px 34px
        rgba(67,40,20,.08);
}


/* ==========================================================
   PRODUCT IMAGE
=========================================================== */

.cbx-products__image {

    position: relative;

    width: 100%;

    height: 210px;

    margin-bottom: 14px;

    overflow: hidden;

    border-radius: 11px;

    background:
        #f3ede7;
}


.cbx-products__image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 400ms ease;
}


.cbx-product-card:hover
.cbx-products__image img {

    transform:
        scale(1.04);
}


/* ==========================================================
   PRODUCT CATEGORY
=========================================================== */

.cbx-product-card > small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--cbx-orange-dark);

    font-size: 11px;

    font-weight: 850;

    line-height: 1.3;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ==========================================================
   PRODUCT TITLE
=========================================================== */

.cbx-product-card > strong {

    display: block;

    margin-bottom: 10px;

    color:
        var(--cbx-ink);

    font-size: 16px;

    font-weight: 820;

    line-height: 1.42;
}


/* ==========================================================
   PRODUCT LINK
=========================================================== */

.cbx-product-card > span {

    display: block;

    margin-top: auto;

    color:
        var(--cbx-orange-dark);

    font-size: 12px;

    font-weight: 820;

    line-height: 1.4;
}


/* ==========================================================
   KEYBOARD ACCESSIBILITY
=========================================================== */

#cbx-filter-popular:focus-visible
~ .cbx-products__filters
.cbx-products__filter--popular,

#cbx-filter-food:focus-visible
~ .cbx-products__filters
.cbx-products__filter--food,

#cbx-filter-retail:focus-visible
~ .cbx-products__filters
.cbx-products__filter--retail,

#cbx-filter-cosmetics:focus-visible
~ .cbx-products__filters
.cbx-products__filter--cosmetics,

#cbx-filter-gift:focus-visible
~ .cbx-products__filters
.cbx-products__filter--gift,

#cbx-filter-shipping:focus-visible
~ .cbx-products__filters
.cbx-products__filter--shipping,

#cbx-filter-display:focus-visible
~ .cbx-products__filters
.cbx-products__filter--display {

    outline:
        3px solid
        rgba(188,79,19,.3);

    outline-offset: 3px;
}


/* ==========================================================
   LAPTOP
=========================================================== */

@media (max-width: 1180px) {

    .cbx-products__grid {

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


/* ==========================================================
   TABLET
=========================================================== */

@media (max-width: 900px) {

    .cbx-products__head {

        align-items: flex-start;

        flex-direction: column;

        gap: 13px;
    }


    .cbx-products__grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .cbx-products__image {

        height: 220px;
    }

}


/* ==========================================================
   MOBILE
=========================================================== */

@media (max-width: 640px) {

    .cbx-products {

        padding:
            38px
            0
            46px;
    }


    /* swipeable filter row */

    .cbx-products__filters {

        flex-wrap: nowrap;

        width:
            calc(100% + 16px);

        margin-right:
            -16px;

        padding-right:
            16px;

        padding-bottom:
            5px;

        overflow-x: auto;

        scrollbar-width: none;

        overscroll-behavior-inline:
            contain;

        scroll-snap-type:
            x proximity;
    }


    .cbx-products__filters::-webkit-scrollbar {

        display: none;
    }


    .cbx-products__filter {

        flex:
            0 0 auto;

        min-height: 40px;

        padding:
            9px
            13px;

        scroll-snap-align:
            start;

        font-size: 11px;
    }


    .cbx-products__grid {

        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .cbx-products__image {

        height: 240px;
    }


    .cbx-product-card {

        padding: 15px;
    }


    .cbx-product-card > strong {

        font-size: 16px;
    }


    .cbx-product-card > small {

        font-size: 11px;
    }


    .cbx-product-card > span {

        font-size: 12px;
    }

}


/* ==========================================================
   SMALL MOBILE
=========================================================== */

@media (max-width: 390px) {

    .cbx-products__image {

        height: 210px;
    }


    .cbx-product-card {

        padding: 14px;
    }

}


/* ==========================================================
   REDUCED MOTION
=========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cbx-products__filter,
    .cbx-product-card,
    .cbx-products__image img {

        transition: none !important;
    }

}
/* ==========================================================
   13 — FAQ
=========================================================== */

.cbx-faq {

    padding:
        50px
        0
        62px;

    background:
        linear-gradient(
            180deg,
            #f8f3ed 0%,
            #f4eae0 100%
        );
}


.cbx-faq__layout {

    display: grid;

    grid-template-columns:
        minmax(300px,.52fr)
        minmax(0,1.15fr);

    gap:
        clamp(38px,5vw,72px);

    align-items: start;
}


.cbx-faq__intro > p {

    margin:
        16px
        0
        18px;

    color: var(--cbx-muted);

    font-size: 15px;

    line-height: 1.7;
}


.cbx-faq__accordion {

    display: grid;

    gap: 9px;
}


.cbx-faq__accordion details {

    overflow: hidden;

    border:
        1px solid
        var(--cbx-border-dark);

    border-radius: 14px;

    background: var(--cbx-white);
}


.cbx-faq__accordion summary {

    display: grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        34px;

    gap: 12px;

    align-items: center;

    padding:
        15px
        17px;

    cursor: pointer;

    list-style: none;
}


.cbx-faq__accordion
summary::-webkit-details-marker {

    display: none;
}


.cbx-faq__accordion
summary > span {

    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    color: var(--cbx-orange-dark);

    border-radius: 10px;

    background:
        rgba(188,79,19,.07);

    font-size: 10px;

    font-weight: 900;
}


.cbx-faq__accordion
summary strong {

    font-size: 14px;

    font-weight: 820;

    line-height: 1.42;
}


.cbx-faq__accordion
summary i {

    display: grid;

    place-items: center;

    width: 32px;
    height: 32px;

    color: var(--cbx-orange-dark);

    border:
        1px solid
        var(--cbx-border);

    border-radius: 50%;

    font-size: 18px;

    font-style: normal;

    transition:
        transform 180ms ease;
}


.cbx-faq__accordion
details[open] summary i {

    transform: rotate(45deg);
}


.cbx-faq__accordion
details > div {

    padding:
        0
        17px
        17px
        67px;
}


.cbx-faq__accordion
details > div p {

    margin: 0;

    padding-top: 14px;

    color: var(--cbx-muted);

    border-top:
        1px solid
        var(--cbx-border);

    font-size: 13px;

    line-height: 1.66;
}


/* ==========================================================
   14 — FINAL CTA
=========================================================== */

.cbx-final {

    padding:
        48px
        0
        64px;

    background: var(--cbx-white);
}


.cbx-final__panel {

    display: grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(330px,.58fr);

    gap:
        clamp(38px,5vw,70px);

    align-items: center;

    padding:
        clamp(34px,4vw,54px);

    overflow: hidden;

    color: var(--cbx-white);

    border-radius: 26px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(255,255,255,.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #281c15 0%,
            #43291a 52%,
            #6d3d0b 100%
        );
}


.cbx-final__content > span {

    display: block;

    margin-bottom: 12px;

    color: #efb887;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .12em;
}


.cbx-final__content h2 {

    max-width: 900px;

    margin:
        0
        0
        16px;

    color: var(--cbx-white);

    font-size:
        clamp(34px,3.5vw,53px);

    font-weight: 830;

    line-height: 1.04;

    letter-spacing: -.05em;
}


.cbx-final__content > p {

    max-width: 760px;

    margin:
        0
        0
        22px;

    color:
        rgba(255,255,255,.65);

    font-size: 15px;

    line-height: 1.68;
}


.cbx-final__features {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 8px;
}


.cbx-final__features > div {

    padding:
        11px
        12px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 11px;

    background:
        rgba(255,255,255,.05);
}


.cbx-final__features strong,
.cbx-final__features small {

    display: block;
}


.cbx-final__features strong {

    margin-bottom: 3px;

    font-size: 11px;

    font-weight: 800;
}


.cbx-final__features small {

    color:
        rgba(255,255,255,.52);

    font-size: 10px;
}


.cbx-final__action {

    padding: 24px;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius: 18px;

    background:
        rgba(255,255,255,.07);
}


.cbx-final__action > span {

    display: block;

    margin-bottom: 7px;

    color: #efb887;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .1em;
}


.cbx-final__action > strong {

    display: block;

    margin-bottom: 17px;

    font-size: 20px;

    font-weight: 820;

    line-height: 1.35;
}


.cbx-final__button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    min-height: 50px;

    padding:
        12px
        17px;

    color: var(--cbx-ink) !important;

    border-radius: 11px;

    background: var(--cbx-white);

    font-size: 13px;

    font-weight: 850;
}


.cbx-final__button svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
}


.cbx-final__contact {

    display: grid;

    gap: 5px;

    margin-top: 14px;

    text-align: center;
}


.cbx-final__contact a {

    color:
        rgba(255,255,255,.6);

    font-size: 11px;

    font-weight: 650;
}


/* ==========================================================
   LARGE LAPTOP
=========================================================== */

@media (max-width: 1180px) {

    .cbx-styles__grid {

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }


    .cbx-industries__grid {

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }


    .cbx-products__grid {

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


/* ==========================================================
   TABLET
=========================================================== */

@media (max-width: 900px) {

    .cbx-shell {

        width:
            calc(100% - 40px) !important;
    }


    .cbx-hero__layout,
    .cbx-materials__layout,
    .cbx-why__layout,
    .cbx-quality__layout,
    .cbx-faq__layout,
    .cbx-final__panel {

        grid-template-columns:
            1fr;
    }


    .cbx-split-heading {

        grid-template-columns:
            1fr;

        gap: 16px;
    }


    .cbx-split-heading > p {

        max-width: 760px;
    }


    .cbx-hero__content {

        max-width: 800px;
    }


    .cbx-hero__visual {

        width:
            min(100%,760px);

        margin-inline: auto;
    }


    .cbx-needs__grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .cbx-need-card--wide {

        grid-column:
            span 2;
    }


    .cbx-styles__grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .cbx-print__workspace {

        grid-template-columns:
            1fr;
    }


    .cbx-spec__steps {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .cbx-industries__grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .cbx-process__track {

        overflow-x: auto;

        grid-template-columns:
            repeat(7,minmax(145px,1fr));

        padding-bottom: 8px;

        scrollbar-width: thin;
    }


    .cbx-process__rail {

        left: 72px;
        right: 72px;
    }


    .cbx-knowledge__grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .cbx-products__grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* ==========================================================
   SMALL TABLET
=========================================================== */

@media (max-width: 720px) {

    .cbx-hero__trust {

        grid-template-columns:
            1fr;
    }


    .cbx-builder__route {

        grid-template-columns:
            repeat(5,1fr);

        gap: 9px;
    }


    .cbx-builder__route > i {

        display: none;
    }


    .cbx-builder__route small {

        display: none;
    }


    .cbx-print__swatches {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .cbx-why__comparison {

        grid-template-columns:
            1fr;
    }


    .cbx-why__arrow {

        min-height: 48px;

        transform: rotate(90deg);
    }

}


/* ==========================================================
   MOBILE
=========================================================== */

@media (max-width: 640px) {

    .cbx-shell {

        width:
            calc(100% - 32px) !important;
    }


    .cbx-breadcrumb {

        padding:
            13px
            0
            8px;
    }


    .cbx-breadcrumb li,
    .cbx-breadcrumb a {

        font-size: 12px;
    }


    .cbx-hero {

        padding:
            35px
            0
            46px;
    }


    .cbx-hero__content h1 {

        font-size:
            clamp(38px,11vw,50px);

        line-height: 1;
    }


    .cbx-hero__lead {

        font-size: 16px;
    }


    .cbx-hero__actions {

        display: grid;

        grid-template-columns:
            1fr;
    }


    .cbx-btn {

        width: 100%;
    }


    .cbx-builder__header {

        align-items: flex-start;

        flex-direction: column;
    }


    .cbx-builder__workspace {

        padding: 16px;
    }


    .cbx-builder__route {

        overflow-x: auto;

        grid-template-columns:
            repeat(5,80px);

        justify-content: start;

        padding-bottom: 6px;
    }


    .cbx-builder__preview {

        min-height: 245px;
    }


    .cbx-builder__summary {

        grid-template-columns:
            1fr;
    }


    .cbx-needs,
    .cbx-styles,
    .cbx-materials,
    .cbx-print,
    .cbx-spec,
    .cbx-industries,
    .cbx-why,
    .cbx-process,
    .cbx-quality,
    .cbx-knowledge,
    .cbx-products,
    .cbx-faq,
    .cbx-final {

        padding:
            38px
            0
            46px;
    }


    .cbx-split-heading h2,
    .cbx-section-heading h2,
    .cbx-materials__intro h2,
    .cbx-spec__intro h2,
    .cbx-why__intro h2,
    .cbx-quality__intro h2,
    .cbx-faq__intro h2,
    .cbx-products__head h2 {

        font-size:
            clamp(29px,9.5vw,39px);
    }


    .cbx-eyebrow {

        font-size: 11px;

        letter-spacing: .11em;
    }


    .cbx-needs__grid {

        grid-template-columns:
            1fr;
    }


    .cbx-need-card--wide {

        grid-column: auto;
    }


    .cbx-need-card__image,
    .cbx-need-card--wide
    .cbx-need-card__image {

        height: 220px;
    }


    .cbx-styles__grid {

        grid-template-columns:
            1fr;
    }


    .cbx-style-card__image {

        height: 220px;
    }


    .cbx-materials__.elementor-element.elementor-element-9454ee4 article {

        grid-template-columns:
            90px
            minmax(0,1fr);

        gap: 13px;

        padding: 14px;
    }


    .cbx-materials__sample {

        min-height: 82px;
    }


    .cbx-print__swatches {

        grid-template-columns:
            1fr;
    }


    .cbx-spec__head {

        align-items: flex-start;

        flex-direction: column;
    }


    .cbx-spec__steps {

        grid-template-columns:
            1fr;
    }


    .cbx-spec__result {

        align-items: stretch;

        flex-direction: column;
    }


    .cbx-spec__result a {

        justify-content: center;
    }


    .cbx-industries__grid {

        grid-template-columns:
            1fr;
    }


    .cbx-industries__grid a {

        min-height: 150px;
    }


    .cbx-process__track {

        display: grid;

        grid-template-columns:
            1fr;

        overflow: visible;

        padding: 0;
    }


    .cbx-process__rail {

        top: 28px;
        bottom: 28px;
        left: 28px;
        right: auto;

        width: 2px;
        height: auto;
    }


    .cbx-process__track article {

        display: grid;

        grid-template-columns:
            58px
            minmax(0,1fr);

        grid-template-rows:
            auto
            auto;

        gap:
            2px
            12px;

        align-items: center;

        padding:
            10px
            0;

        text-align: left;
    }


    .cbx-process__track article > span {

        grid-row:
            1 / 3;

        width: 54px;
        height: 54px;

        margin: 0;

        box-shadow:
            0 0 0 5px
            #f6efe8;
    }


    .cbx-quality__checks {

        grid-template-columns:
            1fr;
    }


    .cbx-knowledge__grid {

        grid-template-columns:
            1fr;
    }


    .cbx-products__head {

        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .cbx-products__grid {

        grid-template-columns:
            1fr;
    }


    .cbx-products__image {

        height: 230px;
    }


    .cbx-faq__accordion summary {

        grid-template-columns:
            34px
            minmax(0,1fr)
            30px;

        gap: 9px;

        padding: 13px;
    }


    .cbx-faq__accordion
    summary > span {

        width: 32px;
        height: 32px;
    }


    .cbx-faq__accordion
    summary strong {

        font-size: 13px;
    }


    .cbx-faq__accordion
    details > div {

        padding:
            0
            13px
            14px
            56px;
    }


    .cbx-final__panel {

        padding:
            27px
            20px;

        border-radius: 20px;
    }


    .cbx-final__content h2 {

        font-size:
            clamp(30px,9.5vw,40px);
    }


    .cbx-final__features {

        grid-template-columns:
            1fr;
    }

}


/* ==========================================================
   SMALL MOBILE
=========================================================== */

@media (max-width: 390px) {

    .cbx-shell {

        width:
            calc(100% - 24px) !important;
    }


    .cbx-hero__content h1 {

        font-size: 36px;
    }


    .cbx-materials__.elementor-element.elementor-element-9454ee4 article {

        grid-template-columns:
            72px
            minmax(0,1fr);
    }


    .cbx-materials__sample {

        min-height: 72px;

        font-size: 9px;
    }


    .cbx-final__panel {

        padding:
            23px
            16px;
    }

}


/* ==========================================================
   ACCESSIBILITY
=========================================================== */

.cbx-page a:focus-visible,
.cbx-page summary:focus-visible {

    outline:
        3px solid
        rgba(188,79,19,.32);

    outline-offset: 4px;
}


/* ==========================================================
   REDUCED MOTION
=========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cbx-page *,
    .cbx-page *::before,
    .cbx-page *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}