/* ==========================================================
   QANTU MASTER RANGE TEMPLATE
   ========================================================== */

.qr-page {
    background: #fff;
    color: #171717;
}

.qr-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.qr-eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.qr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid #171717;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.qr-button-white {
    background: #fff;
    color: #171717;
    border-color: #fff;
}

.qr-button-dark {
    background: #171717;
    color: #fff;
}

.qr-button-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.7);
}


/* HERO */

.qr-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(350px, 1fr);
    min-height: 560px;
}

.qr-hero-image {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: #ddd;
}

.qr-hero-photo {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
}

.qr-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 58px 8%;
    color: #fff;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.50),
            rgba(0,0,0,.10) 75%
        );
}

.qr-hero-overlay h1 {
    margin: 0 0 12px;
    font-size: clamp(52px, 6vw, 86px);
    line-height: .96;
    letter-spacing: -.045em;
    color: #fff;
}

.qr-hero-overlay p {
    max-width: 520px;
    margin: 0 0 28px;
    font-size: 20px;
    line-height: 1.4;
}

.qr-hero-overlay .qr-button {
    align-self: flex-start;
}

.qr-hero-features {
    padding: 52px 42px 34px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            #273c32,
            #445448
        );
}

.qr-hero-feature {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 16px;
    padding: 16px 0;
}

.qr-feature-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;
}

.qr-hero-feature strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
}

.qr-hero-feature p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.74);
}

.qr-hero-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.28);
    text-align: center;
}

.qr-hero-mini strong,
.qr-hero-mini span {
    display: block;
}

.qr-hero-mini strong {
    margin-bottom: 6px;
    font-size: 13px;
}

.qr-hero-mini span {
    font-size: 10px;
    color: rgba(255,255,255,.65);
}


/* COLOURS */

.qr-colours {
    padding: 48px 0;
    background: #f6f5f2;
}

.qr-colours-layout {
    display: grid;
    grid-template-columns: 1.15fr 2fr .7fr;
    align-items: center;
    gap: 40px;
}

.qr-section-copy h2,
.qr-section-header h2,
.qr-story h2 {
    margin: 0 0 10px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.qr-section-copy p,
.qr-section-header p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

.qr-swatches {
    display: grid;
    grid-template-columns: repeat(6, minmax(58px, 1fr));
    gap: 14px;
}

.qr-swatch-chip {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.06);
}

.qr-swatch > span:last-child {
    display: block;
    margin-top: 7px;
    font-size: 11px;
}

.qr-bespoke-mini {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    background: #fff;
    color: #171717;
    text-decoration: none;
}

.qr-bespoke-wheel {
    margin-bottom: 12px;
    font-size: 28px;
}

.qr-bespoke-mini strong {
    font-size: 14px;
    line-height: 1.4;
}

.qr-bespoke-mini > span:last-child {
    margin-top: 14px;
    font-size: 12px;
}


/* UNITS */

.qr-units {
    padding: 72px 0;
}

.qr-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 34px;
}

.qr-section-header > div {
    max-width: 760px;
}

.qr-text-link {
    flex: 0 0 auto;
    color: #171717;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.qr-unit-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.qr-unit-card {
    overflow: hidden;
    color: #171717;
    border: 1px solid #e2e2df;
    background: #fff;
    text-decoration: none;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.qr-unit-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.qr-unit-image {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #f3f2ef;
}

.qr-unit-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.qr-unit-card:hover .qr-unit-photo {
    transform: scale(1.03);
}

/*
 * Different crops from the range hero until dedicated
 * unit-card photography is assigned in range-data.php.
 */

.qr-unit-photo-base {
    object-position: 35% 65%;
}

.qr-unit-photo-wall {
    object-position: 70% 22%;
}

.qr-unit-photo-sink {
    object-position: 50% 55%;
}

.qr-unit-photo-drawer {
    object-position: 45% 62%;
}

.qr-unit-photo-corner {
    object-position: 80% 55%;
}

.qr-unit-number {
    position: absolute;
    top: 12px;
    left: 12px;
    min-width: 28px;
    padding: 4px 6px;
    background: rgba(255,255,255,.9);
    font-size: 10px;
    font-weight: 700;
}

.qr-unit-body {
    min-height: 205px;
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.qr-unit-body h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.qr-unit-body p {
    margin: 0 0 18px;
    color: #5d5d5d;
    font-size: 13px;
    line-height: 1.55;
}

.qr-unit-price {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-end;
    font-size: 12px;
}

.qr-unit-price strong {
    font-size: 12px;
}

.qr-standard-note {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 12px;
}


/* STORY */

.qr-story {
    padding: 76px 0;
    background: #efece6;
}

.qr-story-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
}

.qr-story p {
    margin-top: 0;
    font-size: 18px;
    line-height: 1.75;
    color: #4e4e4e;
}

.qr-feature-note {
    margin-top: 22px !important;
    font-size: 14px !important;
}


/* GALLERY */

.qr-gallery {
    padding: 74px 0;
}

.qr-gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 7px;
}

.qr-gallery-item {
    position: relative;
    margin: 0;
    aspect-ratio: .88;
    overflow: hidden;
    background: #eee;
}

.qr-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qr-gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 14px 12px;
    color: #fff;
    font-size: 12px;
    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.65)
        );
}


/* CTA */

.qr-actions-section {
    padding: 24px 0 62px;
}

.qr-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.qr-action-card {
    min-height: 220px;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 20px;
    align-items: center;
    padding: 38px;
}

.qr-action-light {
    background: #f0f0ec;
}

.qr-action-dark {
    background:
        linear-gradient(
            135deg,
            #263c31,
            #405248
        );
    color: #fff;
}

.qr-action-symbol {
    font-size: 42px;
}

.qr-action-card h3 {
    margin: 0 0 8px;
    font-size: 24px;
}

.qr-action-card p {
    margin: 0 0 20px;
    line-height: 1.55;
}

.qr-action-light p {
    color: #555;
}

.qr-action-light a {
    color: #22392f;
    font-weight: 700;
    text-decoration: none;
}

.qr-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* TRUST */

.qr-trust {
    padding: 28px 0;
    border-top: 1px solid #e8e8e4;
}

.qr-trust-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.qr-trust-grid > div {
    padding: 6px 28px;
    border-right: 1px solid #e5e5e2;
}

.qr-trust-grid > div:first-child {
    padding-left: 0;
}

.qr-trust-grid > div:last-child {
    border-right: 0;
}

.qr-trust strong,
.qr-trust span {
    display: block;
}

.qr-trust strong {
    margin-bottom: 3px;
    font-size: 13px;
}

.qr-trust span {
    color: #777;
    font-size: 11px;
}


/* MOBILE QUICK NAV */

.qr-mobile-nav,
.qr-mobile-order-bar {
    display: none;
}


/* TABLET */

@media (max-width: 1050px) {

    .qr-hero {
        grid-template-columns: 1.55fr .85fr;
    }

    .qr-unit-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .qr-colours-layout {
        grid-template-columns: 1fr;
    }

    .qr-swatches {
        grid-template-columns: repeat(8,1fr);
    }

    .qr-bespoke-mini {
        max-width: 300px;
    }
}


/* MOBILE */

@media (max-width: 700px) {

    .qr-page {
        padding-bottom: 68px;
    }

    .qr-shell {
        width: min(100% - 30px, 1180px);
    }

    .qr-mobile-nav {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        gap: 22px;
        overflow-x: auto;
        padding: 13px 15px;
        background: rgba(255,255,255,.97);
        border-bottom: 1px solid #e7e7e4;
        scrollbar-width: none;
    }

    .admin-bar .qr-mobile-nav {
        top: 46px;
    }

    .qr-mobile-nav::-webkit-scrollbar {
        display: none;
    }

    .qr-mobile-nav a {
        flex: 0 0 auto;
        color: #171717;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
    }

    .qr-hero {
        display: block;
        min-height: 0;
    }

    .qr-hero-image {
        min-height: 520px;
    }

    .qr-hero-overlay {
        justify-content: flex-end;
        padding: 34px 24px;
    }

    .qr-hero-overlay h1 {
        font-size: 52px;
    }

    .qr-hero-overlay p {
        font-size: 17px;
    }

    .qr-hero-features {
        padding: 26px 22px;
    }

    .qr-hero-feature {
        padding: 11px 0;
    }

    .qr-hero-mini {
        margin-top: 18px;
    }

    .qr-colours {
        padding: 38px 0;
    }

    .qr-swatches {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }

    .qr-swatch {
        flex: 0 0 74px;
        scroll-snap-align: start;
    }

    .qr-units {
        padding: 46px 0;
    }

    .qr-section-header {
        display: block;
        margin-bottom: 24px;
    }

    .qr-text-link {
        display: inline-block;
        margin-top: 16px;
    }

    .qr-unit-grid {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        margin-right: -15px;
        padding-right: 15px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }

    .qr-unit-card {
        flex: 0 0 78vw;
        max-width: 300px;
        scroll-snap-align: start;
    }

    .qr-unit-image {
        height: 180px;
    }

    .qr-unit-body {
        min-height: 190px;
    }

    .qr-story {
        padding: 48px 0;
    }

    .qr-story-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .qr-gallery {
        padding: 46px 0;
    }

    .qr-gallery-grid {
        display: flex;
        overflow-x: auto;
        margin-right: -15px;
        padding-right: 15px;
        scroll-snap-type: x mandatory;
    }

    .qr-gallery-item {
        flex: 0 0 78vw;
        max-width: 320px;
        scroll-snap-align: start;
    }

    .qr-action-grid {
        grid-template-columns: 1fr;
    }

    .qr-action-card {
        grid-template-columns: 52px 1fr;
        padding: 28px 22px;
    }

    .qr-trust-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .qr-trust-grid > div {
        min-height: 86px;
        padding: 18px 14px;
        border-bottom: 1px solid #eee;
    }

    .qr-mobile-order-bar {
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 8px;
        background: #fff;
        border-top: 1px solid #ddd;
        box-shadow: 0 -6px 24px rgba(0,0,0,.08);
    }

    .qr-mobile-order-bar a {
        display: grid;
        min-height: 48px;
        place-items: center;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

    .qr-mobile-order-bar a:first-child {
        color: #171717;
        background: #f1f0ec;
    }

    .qr-mobile-order-bar a:last-child {
        color: #fff;
        background: #23382f;
    }
}

/* =========================================================
   Range anchor positioning
   Keep jump targets visible below the site/admin headers.
   ========================================================= */

#overview,
#colours,
#units,
#gallery,
#bespoke {
    scroll-margin-top: 120px;
}

@media (max-width: 700px) {

    #overview,
    #colours,
    #units,
    #gallery,
    #bespoke {
        scroll-margin-top: 110px;
    }

    .admin-bar #overview,
    .admin-bar #colours,
    .admin-bar #units,
    .admin-bar #gallery,
    .admin-bar #bespoke {
        scroll-margin-top: 155px;
    }
}


/* =========================================================
   RANGE UNIT SHOP BROWSER
   ========================================================= */

.qr-unit-browser {
    margin-top: 34px;
    border-top: 1px solid #dededb;
}

.qr-unit-panel {
    scroll-margin-top: 120px;
    border-bottom: 1px solid #dededb;
}

.qr-unit-panel-heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 22px 4px;
    border: 0;
    background: transparent;
    color: #171717;
    text-align: left;
    cursor: pointer;
}

.qr-unit-panel-kicker {
    display: block;
    margin-bottom: 4px;
    color: #777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.qr-unit-panel-heading strong {
    font-size: 23px;
}

.qr-panel-toggle {
    font-size: 28px;
    font-weight: 300;
}

.qr-unit-panel-content {
    display: none;
    padding-bottom: 28px;
}

.qr-unit-panel.is-open .qr-unit-panel-content {
    display: block;
}

.qr-product-list {
    border: 1px solid #e2e2df;
}

.qr-product-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        130px
        170px;
    gap: 20px;
    align-items: center;
    min-height: 82px;
    padding: 14px 18px;
    border-bottom: 1px solid #e8e8e5;
    background: #fff;
}

.qr-product-row:last-child {
    border-bottom: 0;
}

.qr-product-main strong,
.qr-product-main span,
.qr-product-price strong,
.qr-product-price span {
    display: block;
}

.qr-product-main strong {
    margin-bottom: 5px;
    font-size: 14px;
}

.qr-product-main span {
    color: #777;
    font-size: 11px;
}

.qr-product-price {
    text-align: right;
}

.qr-product-price strong {
    font-size: 17px;
}

.qr-product-price span {
    margin-top: 2px;
    color: #777;
    font-size: 10px;
}

.qr-product-actions {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 7px;
}

.qr-product-qty {
    width: 58px;
    min-height: 40px;
    padding: 0 8px;
    border: 1px solid #ccc;
    background: #fff;
}

.qr-product-select {
    display: grid;
    min-height: 40px;
    place-items: center;
    padding: 0 14px;
    background: #23382f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.qr-product-row:hover {
    background: #fafaf8;
}

.qr-no-units {
    padding: 22px;
    background: #f6f5f2;
}


/* MOBILE UNIT SHOP */

@media (max-width: 700px) {

    .qr-unit-panel {
        scroll-margin-top: 115px;
    }

    .admin-bar .qr-unit-panel {
        scroll-margin-top: 160px;
    }

    .qr-unit-panel-heading {
        padding: 18px 2px;
    }

    .qr-unit-panel-heading strong {
        font-size: 20px;
    }

    .qr-product-row {
        grid-template-columns: 1fr auto;
        gap: 10px 16px;
        padding: 16px 12px;
    }

    .qr-product-main {
        min-width: 0;
    }

    .qr-product-price {
        align-self: start;
    }

    .qr-product-actions {
        grid-column: 1 / -1;
        grid-template-columns: 64px 1fr;
    }

    .qr-product-qty {
        width: 64px;
    }

    .qr-product-select {
        min-height: 44px;
    }
}


/* =========================================================
   YOUR KITCHEN BASKET
   ========================================================= */

.qr-add-kitchen {
    border: 0;
    cursor: pointer;
}

.qr-add-kitchen.is-added {
    background: #547262;
}


/* SUMMARY BUTTON */

.qr-kitchen-summary {
    position: fixed;
    z-index: 90;
    right: 22px;
    bottom: 22px;
    min-width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 15px 18px;
    border: 0;
    background: #23382f;
    color: #fff;
    box-shadow: 0 10px 35px rgba(0,0,0,.20);
    cursor: pointer;
}

.qr-kitchen-summary-title {
    font-size: 13px;
    font-weight: 700;
}

.qr-kitchen-summary-meta {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 12px;
}

.qr-kitchen-count {
    color: rgba(255,255,255,.72);
}


/* DRAWER */

.qr-kitchen-drawer {
    position: fixed;
    z-index: 110;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 94vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -20px 0 50px rgba(0,0,0,.18);
    transform: translateX(105%);
    transition: transform .24s ease;
}

.qr-kitchen-drawer.is-open {
    transform: translateX(0);
}

.qr-kitchen-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px;
    border-bottom: 1px solid #e5e5e2;
}

.qr-kitchen-drawer-head h3 {
    margin: 0;
    font-size: 25px;
}

.qr-kitchen-close {
    width: 40px;
    height: 40px;
    border: 0;
    background: #f2f1ed;
    font-size: 27px;
    cursor: pointer;
}


/* ITEMS */

.qr-kitchen-items {
    flex: 1;
    overflow-y: auto;
}

.qr-kitchen-empty {
    padding: 34px 26px;
    color: #777;
    line-height: 1.6;
}

.qr-kitchen-item {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        auto
        95px
        28px;
    gap: 12px;
    align-items: center;
    padding: 17px 20px;
    border-bottom: 1px solid #ecece9;
}

.qr-kitchen-item-main strong,
.qr-kitchen-item-main span,
.qr-kitchen-item-price strong,
.qr-kitchen-item-price span {
    display: block;
}

.qr-kitchen-item-main strong {
    margin-bottom: 4px;
    font-size: 13px;
}

.qr-kitchen-item-main span {
    color: #8a8a8a;
    font-size: 10px;
}

.qr-kitchen-item-qty {
    display: grid;
    grid-template-columns: 30px 28px 30px;
    align-items: center;
    text-align: center;
    border: 1px solid #ddd;
}

.qr-kitchen-item-qty button {
    height: 32px;
    border: 0;
    background: #f7f6f3;
    cursor: pointer;
}

.qr-kitchen-item-qty span {
    font-size: 12px;
}

.qr-kitchen-item-price {
    text-align: right;
}

.qr-kitchen-item-price strong {
    font-size: 13px;
}

.qr-kitchen-item-price span {
    margin-top: 3px;
    color: #888;
    font-size: 9px;
}

.qr-kitchen-remove {
    border: 0;
    background: transparent;
    color: #999;
    font-size: 20px;
    cursor: pointer;
}


/* FOOTER */

.qr-kitchen-footer {
    padding: 22px 24px;
    border-top: 1px solid #ddd;
    background: #f7f6f3;
}

.qr-kitchen-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 17px;
}

.qr-kitchen-total-row strong {
    font-size: 22px;
}

.qr-kitchen-footer p {
    margin: 0 0 18px;
    color: #777;
    font-size: 10px;
}

.qr-kitchen-footer-actions {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 8px;
}

.qr-kitchen-clear,
.qr-kitchen-quote {
    min-height: 46px;
    display: grid;
    place-items: center;
    padding: 0 15px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.qr-kitchen-clear {
    border: 1px solid #bbb;
    background: transparent;
    color: #333;
    cursor: pointer;
}

.qr-kitchen-quote {
    background: #23382f;
    color: #fff;
}


/* MOBILE */

@media (max-width: 700px) {

    .qr-kitchen-summary {
        left: 8px;
        right: 8px;
        bottom: 72px;
        min-width: 0;
        width: auto;
    }

    .qr-kitchen-drawer {
        top: auto;
        width: 100%;
        height: min(82vh, 720px);
        transform: translateY(105%);
    }

    .qr-kitchen-drawer.is-open {
        transform: translateY(0);
    }

    .qr-kitchen-item {
        grid-template-columns:
            minmax(0,1fr)
            auto;
        gap: 10px;
    }

    .qr-kitchen-item-qty {
        grid-row: 2;
    }

    .qr-kitchen-item-price {
        grid-column: 2;
        grid-row: 1;
    }

    .qr-kitchen-remove {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

/* =========================================================
   PREMIUM RANGE SHOPPING REDESIGN
   ========================================================= */

/* CATEGORY CARDS */

.qr-unit-grid {
    gap: 18px;
}

.qr-unit-card {
    border: 1px solid #e7e5df;
    background: #fff;
    box-shadow: none;
}

.qr-unit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(0,0,0,.07);
}

.qr-unit-image {
    height: 220px;
    background: #f5f3ee;
}

.qr-unit-number {
    top: 14px;
    left: 14px;
    min-width: 34px;
    min-height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    font-size: 10px;
}

.qr-unit-body {
    min-height: 220px;
    padding: 20px;
}

.qr-unit-body h3 {
    margin-bottom: 10px;
    font-size: 20px;
    letter-spacing: -.015em;
}

.qr-unit-body p {
    max-width: 26ch;
    color: #666;
    font-size: 13px;
}

.qr-unit-price {
    padding-top: 16px;
    border-top: 1px solid #eceae5;
}

.qr-unit-price strong {
    font-size: 13px;
}

.qr-unit-price span {
    font-size: 17px;
}


/* ACCORDION HEADERS */

.qr-unit-browser {
    margin-top: 46px;
    border-top: 0;
}

.qr-unit-panel {
    border: 1px solid #e6e4df;
    border-radius: 2px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}

.qr-unit-panel-heading {
    padding: 20px 22px;
    background: #faf9f6;
}

.qr-unit-panel.is-open .qr-unit-panel-heading {
    background: #f1efe9;
}

.qr-unit-panel-heading strong {
    font-size: 22px;
    letter-spacing: -.02em;
}

.qr-unit-panel-kicker {
    margin-bottom: 6px;
}


/* PRODUCT GRID */

.qr-unit-panel-content {
    padding: 20px;
    background: #fbfbfa;
}

.qr-product-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
    border: 0;
}

.qr-product-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 230px;
    padding: 18px;
    border: 1px solid #e4e2dd;
    background: #fff;
}

.qr-product-row:hover {
    background: #fff;
    box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

.qr-product-main {
    min-height: 82px;
}

.qr-product-main strong {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.35;
}

.qr-product-main span {
    font-size: 11px;
    line-height: 1.45;
}

.qr-product-price {
    margin-top: auto;
    padding: 16px 0;
    text-align: left;
    border-top: 1px solid #eceae5;
}

.qr-product-price strong {
    font-size: 22px;
    letter-spacing: -.02em;
}

.qr-product-price span {
    font-size: 10px;
}


/* ACTIONS */

.qr-product-actions {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 8px;
}

.qr-product-qty {
    width: 100%;
    min-height: 46px;
    border: 1px solid #cfcac1;
    background: #fff;
    font-size: 13px;
}

.qr-product-select {
    min-height: 46px;
    border-radius: 0;
    background: #263c31;
    color: #fff;
    font-size: 12px;
    letter-spacing: .01em;
}

.qr-product-select:hover {
    background: #1d2e26;
}


/* OPEN PANEL EMPHASIS */

.qr-unit-panel.is-open {
    border-color: #cfcac2;
}

.qr-unit-panel.is-open .qr-unit-panel-content {
    display: block;
}


/* MOBILE */

@media (max-width: 900px) {

    .qr-product-list {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 700px) {

    .qr-unit-grid {
        gap: 12px;
    }

    .qr-unit-card {
        flex: 0 0 82vw;
        max-width: 310px;
    }

    .qr-unit-image {
        height: 200px;
    }

    .qr-unit-body {
        min-height: 200px;
    }

    .qr-unit-browser {
        margin-top: 30px;
    }

    .qr-unit-panel {
        margin-bottom: 10px;
    }

    .qr-unit-panel-heading {
        padding: 17px 14px;
    }

    .qr-unit-panel-content {
        padding: 12px;
    }

    .qr-product-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .qr-product-row {
        min-height: 0;
        padding: 15px;
    }

    .qr-product-main {
        min-height: 0;
    }

    .qr-product-price {
        padding: 14px 0;
    }

    .qr-product-actions {
        grid-template-columns: 76px 1fr;
    }

    .qr-product-qty,
    .qr-product-select {
        min-height: 48px;
    }
}



/* =========================================================
   CAMBRIDGE SHOP CONFIGURATOR
   ========================================================= */

.qr-kitchen-config {
    margin: 34px 0 38px;
    padding: 28px;
    background: #f4f2ed;
    border: 1px solid #e4e1da;
}

.qr-config-heading {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-end;
    margin-bottom: 26px;
}

.qr-config-heading h3 {
    margin: 0;
    font-size: 27px;
    letter-spacing: -.025em;
}

.qr-config-current {
    text-align: right;
}

.qr-config-current span,
.qr-config-current strong {
    display: block;
}

.qr-config-current span {
    margin-bottom: 4px;
    color: #777;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.qr-config-current strong {
    font-size: 13px;
}

.qr-config-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 26px;
}

.qr-config-block {
    padding: 22px;
    background: #fff;
}

.qr-config-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}

.qr-config-step {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #263c31;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
}

.qr-config-label strong,
.qr-config-label span {
    display: block;
}

.qr-config-label strong {
    font-size: 14px;
}

.qr-config-label div > span {
    margin-top: 2px;
    color: #888;
    font-size: 10px;
}

.qr-door-options,
.qr-cabinet-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.qr-config-swatch {
    width: 72px;
    padding: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: #222;
    cursor: pointer;
    text-align: left;
}

.qr-config-chip {
    display: block;
    width: 100%;
    aspect-ratio: 1.35;
    margin-bottom: 6px;
    border: 1px solid rgba(0,0,0,.08);
}

.qr-config-swatch > span:last-child {
    display: block;
    min-height: 25px;
    font-size: 9px;
    line-height: 1.25;
}

.qr-config-swatch:hover {
    border-color: #b6b1a6;
}

.qr-config-swatch.is-selected {
    border-color: #263c31;
    background: #f6f6f3;
}

.qr-config-swatch.is-selected .qr-config-chip {
    box-shadow:
        inset 0 0 0 2px #fff,
        0 0 0 2px #263c31;
}

.qr-config-special {
    display: inline-block;
    margin-top: 17px;
    color: #263c31;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}


/* TABLET */

@media (max-width: 950px) {

    .qr-config-grid {
        grid-template-columns: 1fr;
    }
}


/* MOBILE */

@media (max-width: 700px) {

    .qr-kitchen-config {
        margin: 26px 0;
        padding: 18px 14px;
    }

    .qr-config-heading {
        display: block;
    }

    .qr-config-current {
        margin-top: 14px;
        text-align: left;
    }

    .qr-config-block {
        padding: 16px 12px;
    }

    .qr-door-options,
    .qr-cabinet-options {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -12px;
        padding-right: 12px;
        padding-bottom: 7px;
        scroll-snap-type: x mandatory;
    }

    .qr-config-swatch {
        flex: 0 0 72px;
        scroll-snap-align: start;
    }
}


/* =========================================================
   COMPACT PREMIUM UNIT SHOP
   ========================================================= */

/* Current configuration strip */

.qr-shop-current {
    position: sticky;
    top: 92px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 34px 0 14px;
    padding: 12px 16px;
    background: #263c31;
    color: #fff;
    box-shadow: 0 5px 18px rgba(0,0,0,.08);
}

.admin-bar .qr-shop-current {
    top: 124px;
}

.qr-shop-current span,
.qr-shop-current strong {
    display: block;
}

.qr-shop-current span {
    margin-bottom: 2px;
    color: rgba(255,255,255,.66);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.qr-shop-current strong {
    font-size: 12px;
}

.qr-shop-current a {
    flex: 0 0 auto;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* Height filters */

.qr-unit-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.qr-unit-filters > span {
    margin-right: 5px;
    color: #777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.qr-unit-filters button {
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid #d8d5ce;
    background: #fff;
    color: #333;
    font-size: 11px;
    cursor: pointer;
}

.qr-unit-filters button:hover {
    border-color: #263c31;
}

.qr-unit-filters button.is-active {
    border-color: #263c31;
    background: #263c31;
    color: #fff;
}


/* Product cards: denser and easier to scan */

.qr-product-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.qr-product-row {
    min-height: 180px;
    padding: 14px;
}

.qr-product-main {
    min-height: 52px;
}

.qr-product-main strong {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.3;
}

.qr-unit-config-label {
    display: none !important;
}

.qr-product-price {
    padding: 12px 0 10px;
}

.qr-product-price strong {
    font-size: 20px;
}

.qr-product-actions {
    grid-template-columns: 62px 1fr;
}

.qr-product-qty {
    min-height: 42px;
}

.qr-product-select {
    min-height: 42px;
    padding: 0 8px;
    font-size: 11px;
}


/* Reduce visual weight of open section */

.qr-unit-panel-content {
    padding: 14px;
}

.qr-unit-panel-heading {
    padding: 16px 18px;
}

.qr-unit-panel-heading strong {
    font-size: 19px;
}


/* Basket: narrower and less intrusive on desktop */

.qr-kitchen-drawer {
    width: min(430px, 92vw);
}

.qr-kitchen-summary {
    min-width: 270px;
    right: 18px;
    bottom: 18px;
}

.qr-kitchen-item {
    grid-template-columns:
        minmax(0,1fr)
        auto
        82px
        24px;
    padding: 14px 16px;
}

.qr-kitchen-drawer-head {
    padding: 20px;
}

.qr-kitchen-footer {
    padding: 18px 20px;
}


/* Tablet */

@media (max-width: 1100px) {

    .qr-product-list {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }
}


/* Mobile */

@media (max-width: 700px) {

    .qr-shop-current {
        top: 92px;
        margin-top: 24px;
        padding: 11px 12px;
    }

    .admin-bar .qr-shop-current {
        top: 138px;
    }

    .qr-shop-current a {
        font-size: 10px;
    }

    .qr-unit-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        scrollbar-width: none;
    }

    .qr-unit-filters::-webkit-scrollbar {
        display: none;
    }

    .qr-unit-filters > span,
    .qr-unit-filters button {
        flex: 0 0 auto;
    }

    .qr-product-list {
        grid-template-columns: 1fr;
    }

    .qr-product-row {
        min-height: 0;
    }

    .qr-product-main {
        min-height: 0;
    }

    .qr-product-actions {
        grid-template-columns: 68px 1fr;
    }

    .qr-kitchen-summary {
        min-width: 0;
    }
}



/* =========================================================
   DYNAMIC CABINET VISUAL SYSTEM
   ========================================================= */

.qr-page {
    --qr-door-color: #747f6c;
    --qr-cabinet-color: #f2f1ed;
}


/* SVG MATERIALS */

.qr-cabinet-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.qr-svg-shadow {
    fill: rgba(0,0,0,.09);
}

.qr-svg-carcass {
    fill: var(--qr-cabinet-color);
    stroke: rgba(20,20,20,.15);
    stroke-width: .8;
}

.qr-svg-side {
    fill: color-mix(
        in srgb,
        var(--qr-cabinet-color) 82%,
        #777
    );
    stroke: rgba(0,0,0,.12);
    stroke-width: .7;
}

.qr-svg-door {
    fill: var(--qr-door-color);
    stroke: rgba(0,0,0,.20);
    stroke-width: .8;
}

.qr-svg-panel {
    fill: color-mix(
        in srgb,
        var(--qr-door-color) 92%,
        #fff
    );
    stroke: rgba(0,0,0,.17);
    stroke-width: .65;
}

.qr-svg-worktop {
    fill: #e9e6df;
    stroke: #c8c3ba;
    stroke-width: .7;
}

.qr-svg-plinth {
    fill: color-mix(
        in srgb,
        var(--qr-cabinet-color) 78%,
        #777
    );
}

.qr-svg-handle,
.qr-svg-handle-line {
    fill: #77634f;
}

.qr-svg-sink {
    fill: #d5d6d2;
    stroke: #a7aaa6;
    stroke-width: .7;
}

.qr-svg-faucet {
    fill: none;
    stroke: #8e7353;
    stroke-width: 2;
    stroke-linecap: round;
}


/* CATEGORY CARDS */

.qr-unit-visual {
    height: 215px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 25px 14px;
    background:
        linear-gradient(
            145deg,
            #f7f6f2,
            #eeece6
        );
}

.qr-category-cabinet {
    width: 88%;
    height: 100%;
    filter:
        drop-shadow(
            0 12px 11px
            rgba(0,0,0,.08)
        );
}

.qr-unit-card:hover .qr-category-cabinet {
    transform: translateY(-2px);
}

.qr-category-cabinet {
    transition: transform .2s ease;
}


/* PRODUCT CARDS */

.qr-product-visual {
    height: 105px;
    margin: -2px 0 12px;
    padding: 4px 18px 0;
    background:
        linear-gradient(
            180deg,
            #f8f7f4,
            #fff
        );
}

.qr-product-cabinet {
    max-width: 125px;
    margin: 0 auto;
    filter:
        drop-shadow(
            0 7px 7px
            rgba(0,0,0,.08)
        );
}


/* Make the cards slightly more image-led */

.qr-product-row {
    min-height: 265px;
}

.qr-product-main {
    min-height: 48px;
}

.qr-product-price {
    margin-top: auto;
}


/* BASKET VISUAL RHYTHM */

.qr-kitchen-item-main {
    min-width: 0;
}

.qr-kitchen-item-main strong {
    line-height: 1.3;
}


/* MOBILE */

@media (max-width: 700px) {

    .qr-unit-visual {
        height: 190px;
        padding: 18px;
    }

    .qr-product-visual {
        height: 120px;
    }

    .qr-product-cabinet {
        max-width: 140px;
    }
}



/* =========================================================
   CAMBRIDGE CABINET VISUAL POLISH
   ========================================================= */

.qr-cabinet-svg {
    overflow: visible;
}


/* SOFTER 3D CARCASS */

.qr-svg-carcass {
    fill: var(--qr-cabinet-color);
    stroke: rgba(0,0,0,.15);
    stroke-width: .8;
}

.qr-svg-side {
    fill:
        color-mix(
            in srgb,
            var(--qr-cabinet-color) 76%,
            #706b64
        );
    stroke: rgba(0,0,0,.12);
    stroke-width: .7;
}


/* CAMBRIDGE DOOR */

.qr-svg-door {
    fill: var(--qr-door-color);
    stroke: rgba(0,0,0,.20);
    stroke-width: .85;
}

.qr-svg-shaker-outer {
    fill:
        color-mix(
            in srgb,
            var(--qr-door-color) 96%,
            #111
        );
    stroke: rgba(0,0,0,.20);
    stroke-width: .7;
}

.qr-svg-shaker-inner {
    fill:
        color-mix(
            in srgb,
            var(--qr-door-color) 89%,
            #fff
        );
    stroke: rgba(0,0,0,.16);
    stroke-width: .7;
}


/* WORKTOP */

.qr-svg-worktop {
    fill: url(#qr-worktop);
    stroke: rgba(80,70,60,.22);
    stroke-width: .8;
}


/* PLINTH */

.qr-svg-plinth {
    fill:
        color-mix(
            in srgb,
            var(--qr-cabinet-color) 72%,
            #57534d
        );
}


/* HANDLES */

.qr-svg-handle-vertical,
.qr-svg-handle-horizontal {
    fill: #9a7650;
    stroke: rgba(50,30,10,.25);
    stroke-width: .35;
}


/* SINK */

.qr-svg-sink {
    fill: #d2d3d0;
    stroke: #9c9e9a;
    stroke-width: .75;
}

.qr-svg-faucet {
    fill: none;
    stroke: #9b7650;
    stroke-width: 2.5;
    stroke-linecap: round;
}


/* SHADOW */

.qr-svg-shadow {
    fill: rgba(0,0,0,.11);
    filter: blur(1.8px);
}


/* CATEGORY CARD PRESENTATION */

.qr-unit-card {
    background: #fff;
}

.qr-unit-image {
    background:
        linear-gradient(
            145deg,
            #faf9f6 0%,
            #f2f0eb 100%
        );
}

.qr-category-cabinet {
    width: 92%;
    max-width: 220px;
    margin: 0 auto;
    transform-origin: 50% 80%;
    filter:
        drop-shadow(
            0 16px 13px
            rgba(0,0,0,.12)
        );
}

.qr-unit-card:hover .qr-category-cabinet {
    transform:
        translateY(-4px)
        scale(1.015);
}


/* INDIVIDUAL PRODUCT CARDS */

.qr-product-visual {
    height: 150px;
    padding: 12px 18px 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            #faf9f6 0%,
            #fff 100%
        );
}

.qr-product-cabinet {
    width: 128px;
    max-height: 132px;
    filter:
        drop-shadow(
            0 11px 9px
            rgba(0,0,0,.11)
        );
}


/* WALL UNITS SHOULD LOOK TALLER */

.qr-product-row[data-unit-group="wall"]
.qr-product-cabinet {
    width: 116px;
}


/* PRODUCT CARD PREMIUM SPACING */

.qr-product-row {
    background: #fff;
    border: 1px solid #e3e1dc;
    border-radius: 2px;
    overflow: hidden;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.qr-product-row:hover {
    transform: translateY(-2px);
    border-color: #d1cec7;
    box-shadow:
        0 12px 28px
        rgba(0,0,0,.065);
}


/* LESS DATABASE-LIKE */

.qr-product-main {
    padding-top: 3px;
}

.qr-product-main strong {
    font-weight: 600;
}

.qr-product-price {
    font-size: 25px;
    letter-spacing: -.02em;
}


/* PRODUCT IMAGE SHOULD DOMINATE MORE */

.qr-products-grid {
    align-items: stretch;
}

.qr-product-row {
    display: flex;
    flex-direction: column;
}

.qr-product-actions {
    margin-top: auto;
}


/* CATEGORY IMAGE MOBILE */

@media (max-width: 700px) {

    .qr-unit-image {
        height: 180px;
    }

    .qr-category-cabinet {
        max-width: 180px;
    }

    .qr-product-visual {
        height: 135px;
    }

    .qr-product-cabinet {
        width: 120px;
    }
}



/* =========================================================
   CATEGORY SHOP CLEANUP
   ========================================================= */


/* Remove old numbered badge if any markup survives */
.qr-unit-number {
    display: none !important;
}


/* CATEGORY GRID */

.qr-unit-cards,
.qr-unit-grid,
.qr-range-unit-cards {
    gap: 14px;
}


/* SHORTER, MORE RETAIL-LIKE CARDS */

.qr-unit-card {
    min-height: 0 !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    border: 1px solid #e1dfda;
    background: #fff;
    overflow: hidden;
}


/* BIGGER CABINET VISUAL */

.qr-unit-image,
.qr-unit-visual {
    height: 205px !important;
    min-height: 205px !important;
    padding: 8px 12px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-category-cabinet {
    width: 100% !important;
    max-width: 255px !important;
    height: 100% !important;
    transform: scale(1.08);
}


/* Slight custom scaling by category */

.qr-unit-card[data-unit-group="base"]
.qr-category-cabinet {
    transform: scale(1.18);
}

.qr-unit-card[data-unit-group="wall"]
.qr-category-cabinet {
    transform: scale(1.14);
}

.qr-unit-card[data-unit-group="sink"]
.qr-category-cabinet {
    transform: scale(1.20);
}

.qr-unit-card[data-unit-group="drawer"]
.qr-category-cabinet {
    transform: scale(1.16);
}

.qr-unit-card[data-unit-group="corner"]
.qr-category-cabinet {
    transform: scale(1.16);
}


/* Keep hover subtle */

.qr-unit-card:hover .qr-category-cabinet {
    transform:
        translateY(-2px)
        scale(1.12);
}

.qr-unit-card[data-unit-group="base"]:hover
.qr-category-cabinet {
    transform:
        translateY(-2px)
        scale(1.22);
}

.qr-unit-card[data-unit-group="sink"]:hover
.qr-category-cabinet {
    transform:
        translateY(-2px)
        scale(1.24);
}


/* CARD COPY */

.qr-unit-content,
.qr-unit-copy,
.qr-unit-card-body {
    padding: 16px 16px 15px !important;
}

.qr-unit-card h3,
.qr-unit-card h4 {
    margin: 0 0 7px !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    letter-spacing: -.015em;
}

.qr-unit-card p {
    margin: 0 0 13px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #5c5a56;
}


/* Make price subtle */

.qr-unit-price,
.qr-unit-from-price,
.qr-unit-card-price {
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid #eceae5;
    font-size: 12px !important;
    font-weight: 600;
    color: #171717;
}


/* Arrow aligned right */

.qr-unit-arrow {
    margin-left: auto;
}


/* =========================================================
   COMPACT CURRENT CONFIGURATION
   ========================================================= */

.qr-config-summary-inline {
    margin: 14px 0 22px;
    padding: 12px 15px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    background: #f6f4ef;
    border: 1px solid #e2dfd8;
}

.qr-config-summary-inline > div {
    min-width: 0;
}

.qr-config-summary-label {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #77736d;
}

.qr-config-summary-inline strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: #1e1e1c;
}

.qr-config-change-link {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: #254432;
}

.qr-config-change-link:hover {
    text-decoration: underline;
}


/* Hide the previous oversized version if it remains elsewhere */

.qr-current-config-bar,
.qr-current-configuration-bar,
.qr-config-sticky-bar {
    display: none !important;
}


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

@media (max-width: 700px) {

    .qr-unit-image,
    .qr-unit-visual {
        height: 185px !important;
        min-height: 185px !important;
    }

    .qr-category-cabinet {
        max-width: 220px !important;
    }

    .qr-config-summary-inline {
        margin: 10px 0 16px;
        padding: 10px 12px;
    }

    .qr-config-change-link {
        font-size: 11px;
    }
}



/* =========================================================
   FINAL CAMBRIDGE CATEGORY / CONFIG CLEANUP
   ========================================================= */


/*
 * We already display the selected finish in the upper-right
 * of the Cambridge configurator. Do not repeat it underneath
 * the category cards.
 */

.qr-current-config-bar,
.qr-current-configuration-bar,
.qr-config-sticky-bar,
.qr-config-summary-inline {
    display: none !important;
}


/* Remove the space left by any hidden configuration bar */

.qr-unit-cards + .qr-current-config-bar,
.qr-unit-grid + .qr-current-config-bar,
.qr-range-unit-cards + .qr-current-config-bar {
    margin: 0 !important;
}


/* Slightly stronger category imagery */

.qr-unit-image,
.qr-unit-visual {
    height: 215px !important;
    min-height: 215px !important;
}

.qr-category-cabinet {
    max-width: 270px !important;
}


/* Keep category copy concise */

.qr-unit-card p {
    max-width: 22em;
    line-height: 1.45 !important;
}


/* Slightly tighter bottom area */

.qr-unit-content,
.qr-unit-copy,
.qr-unit-card-body {
    padding-bottom: 13px !important;
}


/* Bring the actual unit browser closer to the categories */

.qr-unit-cards,
.qr-unit-grid,
.qr-range-unit-cards {
    margin-bottom: 18px !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .qr-unit-image,
    .qr-unit-visual {
        height: 190px !important;
        min-height: 190px !important;
    }

    .qr-category-cabinet {
        max-width: 235px !important;
    }
}



/* =========================================================
   FINAL CAMBRIDGE CATEGORY / CONFIG CLEANUP
   ========================================================= */


/*
 * We already display the selected finish in the upper-right
 * of the Cambridge configurator. Do not repeat it underneath
 * the category cards.
 */

.qr-current-config-bar,
.qr-current-configuration-bar,
.qr-config-sticky-bar,
.qr-config-summary-inline {
    display: none !important;
}


/* Remove the space left by any hidden configuration bar */

.qr-unit-cards + .qr-current-config-bar,
.qr-unit-grid + .qr-current-config-bar,
.qr-range-unit-cards + .qr-current-config-bar {
    margin: 0 !important;
}


/* Slightly stronger category imagery */

.qr-unit-image,
.qr-unit-visual {
    height: 215px !important;
    min-height: 215px !important;
}

.qr-category-cabinet {
    max-width: 270px !important;
}


/* Keep category copy concise */

.qr-unit-card p {
    max-width: 22em;
    line-height: 1.45 !important;
}


/* Slightly tighter bottom area */

.qr-unit-content,
.qr-unit-copy,
.qr-unit-card-body {
    padding-bottom: 13px !important;
}


/* Bring the actual unit browser closer to the categories */

.qr-unit-cards,
.qr-unit-grid,
.qr-range-unit-cards {
    margin-bottom: 18px !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .qr-unit-image,
    .qr-unit-visual {
        height: 190px !important;
        min-height: 190px !important;
    }

    .qr-category-cabinet {
        max-width: 235px !important;
    }
}



/* =========================================================
   CAMBRIDGE COMPLETE-UNIT SHOP — RETAIL POLISH
   ========================================================= */


/* ---------------------------------------------------------
   CATEGORY / ACCORDION HEADERS
   --------------------------------------------------------- */

.qr-unit-section,
.qr-unit-group,
.qr-products-section {
    border: 1px solid #dfddd7;
    background: #fff;
    margin-bottom: 14px;
}

.qr-unit-section-header,
.qr-unit-group-header,
.qr-products-header {
    min-height: 70px;
    padding: 15px 18px !important;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #faf9f6;
    border-bottom: 1px solid #e7e5df;
}

.qr-unit-section-header h2,
.qr-unit-section-header h3,
.qr-unit-group-header h2,
.qr-unit-group-header h3,
.qr-products-header h2,
.qr-products-header h3 {
    margin: 0 !important;
    font-size: 25px !important;
    line-height: 1.15 !important;
    letter-spacing: -.025em;
    font-weight: 500;
}

.qr-unit-section-header p,
.qr-unit-group-header p,
.qr-products-header p {
    margin: 3px 0 0 !important;
    color: #66635e;
    font-size: 12px;
}


/* Smaller collapsed category rows */

.qr-unit-accordion-header,
.qr-unit-toggle {
    min-height: 50px;
    padding: 11px 14px !important;
    background: #faf9f6;
    border: 1px solid #e1dfda;
}

.qr-unit-accordion-header:hover,
.qr-unit-toggle:hover {
    background: #f4f2ed;
}


/* ---------------------------------------------------------
   HEIGHT FILTERS
   --------------------------------------------------------- */

.qr-height-filters,
.qr-unit-filters {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    flex-wrap: wrap;
}

.qr-height-filters::before {
    content: "Filter by height";
    margin-right: 3px;
    font-size: 11px;
    color: #716e68;
}

.qr-height-filter,
.qr-unit-filter {
    appearance: none;
    min-width: 62px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid #d8d5ce;
    background: #fff;
    color: #222;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 3px;
}

.qr-height-filter:hover,
.qr-unit-filter:hover {
    border-color: #9f9a91;
}

.qr-height-filter.is-active,
.qr-height-filter.active,
.qr-unit-filter.is-active,
.qr-unit-filter.active,
.qr-height-filter[aria-pressed="true"],
.qr-unit-filter[aria-pressed="true"] {
    background: #234331;
    border-color: #234331;
    color: #fff;
}


/* ---------------------------------------------------------
   PRODUCT GRID
   --------------------------------------------------------- */

.qr-products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
    padding: 12px !important;
    background: #f8f7f3;
}


/* ---------------------------------------------------------
   PRODUCT CARD
   --------------------------------------------------------- */

.qr-product-row {
    min-width: 0;
    min-height: 350px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e1dfda !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.qr-product-row:hover {
    transform: translateY(-2px);
    border-color: #cbc7bf !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.055) !important;
}


/* ---------------------------------------------------------
   CABINET VISUAL
   --------------------------------------------------------- */

.qr-product-visual {
    height: 165px !important;
    min-height: 165px;
    margin: 0 !important;
    padding: 8px 12px 2px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            #f8f7f3 0%,
            #fdfcf9 78%,
            #fff 100%
        );
}

.qr-product-cabinet {
    width: 145px !important;
    max-width: 82% !important;
    height: 145px !important;
    max-height: 145px !important;
    object-fit: contain;
    filter:
        drop-shadow(
            0 11px 9px
            rgba(0,0,0,.11)
        );
}


/* Wall cabinets slightly taller/narrower */

.qr-product-row[data-unit-group="wall"]
.qr-product-cabinet {
    width: 132px !important;
}


/* Sink and corner units benefit from width */

.qr-product-row[data-unit-group="sink"]
.qr-product-cabinet,
.qr-product-row[data-unit-group="corner"]
.qr-product-cabinet {
    width: 160px !important;
}


/* ---------------------------------------------------------
   PRODUCT INFORMATION
   --------------------------------------------------------- */

.qr-product-main {
    min-height: 0 !important;
    padding: 13px 14px 0 !important;
}

.qr-product-main strong,
.qr-product-title {
    display: block;
    margin: 0;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: -.015em;
    color: #161616;
}


/* Hide redundant configuration text on every product card */

.qr-unit-config-label,
.qr-product-config-label,
.qr-product-finish-label {
    display: none !important;
}


/* Dimensions become secondary metadata */

.qr-product-meta,
.qr-product-dimensions,
.qr-product-subtitle {
    margin-top: 3px !important;
    color: #77736d !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}


/* ---------------------------------------------------------
   PRICE
   --------------------------------------------------------- */

.qr-product-price {
    margin: 15px 14px 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: -.025em;
    color: #111;
}

.qr-product-price small,
.qr-product-vat,
.qr-vat-label {
    display: block;
    margin-top: 5px;
    font-size: 9px !important;
    line-height: 1.2;
    font-weight: 400 !important;
    letter-spacing: 0;
    color: #77736d;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

.qr-product-actions {
    margin-top: auto !important;
    padding: 13px 14px 14px !important;
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px !important;
    align-items: stretch;
}

.qr-product-qty,
.qr-quantity-control {
    height: 38px;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    border: 1px solid #d9d6cf;
    background: #fff;
}

.qr-product-qty button,
.qr-quantity-control button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
}

.qr-product-qty input,
.qr-quantity-control input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: center;
    font-size: 11px;
    background: transparent;
}

.qr-add-kitchen,
.qr-add-to-kitchen,
[data-add-kitchen] {
    min-height: 38px;
    padding: 8px 10px !important;
    border: 1px solid #234331 !important;
    background: #234331 !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition:
        background .16s ease,
        border-color .16s ease;
}

.qr-add-kitchen:hover,
.qr-add-to-kitchen:hover,
[data-add-kitchen]:hover {
    background: #183323 !important;
    border-color: #183323 !important;
}


/* ---------------------------------------------------------
   FLOATING KITCHEN SUMMARY
   --------------------------------------------------------- */

.qr-kitchen-summary,
.qr-kitchen-floating-summary {
    right: 16px !important;
    bottom: 16px !important;
    min-width: 205px;
    max-width: 265px;
    padding: 9px 12px !important;
    background: #234331 !important;
    box-shadow: 0 7px 22px rgba(0,0,0,.13);
}

.qr-kitchen-summary strong,
.qr-kitchen-floating-summary strong {
    font-size: 11px !important;
}

.qr-kitchen-summary span,
.qr-kitchen-floating-summary span {
    font-size: 10px !important;
}


/* Basket drawer remains useful but should not dominate */

.qr-kitchen-drawer,
.qr-basket-drawer {
    width: min(410px, 94vw) !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {

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

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .qr-products-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        padding: 9px !important;
    }

    .qr-unit-section-header,
    .qr-unit-group-header,
    .qr-products-header {
        display: block;
        min-height: 0;
        padding: 13px !important;
    }

    .qr-unit-section-header h2,
    .qr-unit-section-header h3,
    .qr-unit-group-header h2,
    .qr-unit-group-header h3,
    .qr-products-header h2,
    .qr-products-header h3 {
        font-size: 21px !important;
    }

    .qr-height-filters,
    .qr-unit-filters {
        margin: 10px 0 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
    }

    .qr-height-filters::before {
        display: none;
    }

    .qr-height-filter,
    .qr-unit-filter {
        flex: 0 0 auto;
    }

    .qr-product-row {
        min-height: 0 !important;
    }

    .qr-product-visual {
        height: 155px !important;
        min-height: 155px !important;
    }

    .qr-product-cabinet {
        width: 140px !important;
        height: 138px !important;
    }

    .qr-product-actions {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .qr-kitchen-summary,
    .qr-kitchen-floating-summary {
        right: 10px !important;
        bottom: 10px !important;
        max-width: calc(100vw - 20px);
    }
}



/* =========================================================
   FINAL COMPLETE UNIT CARD POLISH
   ========================================================= */


/* ---------------------------------------------------------
   1. MAKE THE CABINET THE HERO OF EACH PRODUCT CARD
   --------------------------------------------------------- */

.qr-product-visual {
    height: 205px !important;
    min-height: 205px !important;

    padding:
        8px
        10px
        0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

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


.qr-product-cabinet {
    width: 185px !important;
    height: 180px !important;

    max-width: 91% !important;
    max-height: 180px !important;

    margin: 0 auto !important;

    filter:
        drop-shadow(
            0 14px 11px
            rgba(0,0,0,.12)
        );
}


/* Wall cabinets are naturally narrower */

.qr-product-row[data-unit-group="wall"]
.qr-product-cabinet {
    width: 170px !important;
}


/* Wider unit types */

.qr-product-row[data-unit-group="sink"]
.qr-product-cabinet,

.qr-product-row[data-unit-group="corner"]
.qr-product-cabinet {
    width: 205px !important;
}


/* ---------------------------------------------------------
   2. CLEAN TITLE HIERARCHY
   --------------------------------------------------------- */

.qr-product-main {
    padding:
        10px
        13px
        0 !important;
}


.qr-product-main strong,
.qr-product-title {
    font-size: 15px !important;
    line-height: 1.25 !important;

    font-weight: 600 !important;

    color: #141414;

    letter-spacing: -.015em;
}


.qr-generated-height {
    margin-top: 3px;

    font-size: 11px;
    line-height: 1.25;

    color: #77736d;
}


/* ---------------------------------------------------------
   3. PRICE
   --------------------------------------------------------- */

.qr-product-price {
    margin:
        15px
        13px
        0 !important;

    font-size: 23px !important;

    font-weight: 600 !important;
    line-height: 1 !important;

    letter-spacing: -.025em;
}


.qr-product-vat,
.qr-vat-label,
.qr-product-price small {
    margin-top: 4px !important;

    font-size: 9px !important;
    font-weight: 400 !important;

    color: #77736d;
}


/* ---------------------------------------------------------
   4. QUANTITY STEPPER
   --------------------------------------------------------- */

.qr-stepper-source {
    position: absolute !important;

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

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

    overflow: hidden !important;

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

    white-space: nowrap !important;

    border: 0 !important;
}


.qr-stepper {
    width: 86px;
    height: 38px;

    display: grid;

    grid-template-columns:
        28px
        30px
        28px;

    align-items: center;

    border:
        1px solid
        #d8d5ce;

    background: #fff;
}


.qr-stepper button {
    appearance: none;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    color: #111;

    font-size: 15px;
    line-height: 1;

    cursor: pointer;
}


.qr-stepper button:hover {
    background: #f2f0eb;
}


.qr-stepper-value {
    display: flex;

    align-items: center;
    justify-content: center;

    height: 100%;

    border-left:
        1px solid
        #ece9e3;

    border-right:
        1px solid
        #ece9e3;

    font-size: 11px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   5. ACTION AREA
   --------------------------------------------------------- */

.qr-product-actions {
    margin-top: auto !important;

    padding:
        13px !important;

    display: grid !important;

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

    gap: 8px !important;

    align-items: stretch;
}


.qr-add-kitchen,
.qr-add-to-kitchen,
[data-add-kitchen] {
    min-height: 38px !important;

    display: flex !important;

    align-items: center;
    justify-content: center;

    background:
        #234331 !important;

    border:
        1px solid
        #234331 !important;

    color:
        #fff !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;
}


/* ---------------------------------------------------------
   6. REMOVE OLD CONFIGURATION BAR VISUALLY AS FALLBACK
   --------------------------------------------------------- */

.qr-current-config-bar,
.qr-current-configuration-bar,
.qr-config-sticky-bar {
    display: none !important;
}


/* ---------------------------------------------------------
   7. PRODUCT CARD HEIGHT
   --------------------------------------------------------- */

.qr-product-row {
    min-height:
        385px !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .qr-product-visual {
        height:
            185px !important;

        min-height:
            185px !important;
    }


    .qr-product-cabinet {
        width:
            170px !important;

        height:
            165px !important;
    }


    .qr-product-row {
        min-height:
            0 !important;
    }


    .qr-product-actions {
        grid-template-columns:
            90px
            minmax(0,1fr);
    }


    .qr-stepper {
        width: 90px;

        grid-template-columns:
            30px
            30px
            30px;
    }
}



/* =========================================================
   UNIT PANEL SCROLL POSITION
   Keep opened panels below the sticky site header.
   ========================================================= */

.qr-unit-panel {
    scroll-margin-top: 95px;
}


@media (max-width: 700px) {

    .qr-unit-panel {
        scroll-margin-top: 75px;
    }

}



/* =========================================================
   CAMBRIDGE SHOP ROUTES
   ========================================================= */

.qr-shop-routes {
    scroll-margin-top: 95px;

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

    margin: 22px 0 18px;

    border:
        1px solid
        #dedbd4;

    background: #fff;
}


.qr-shop-route {
    appearance: none;

    min-width: 0;

    padding:
        16px
        15px;

    display: flex;

    align-items: center;

    gap: 11px;

    border: 0;
    border-right:
        1px solid
        #e6e3dc;

    background: #fff;

    text-align: left;

    cursor: pointer;

    transition:
        background .16s ease,
        color .16s ease;
}


.qr-shop-route:last-child {
    border-right: 0;
}


.qr-shop-route:hover {
    background: #f5f3ee;
}


.qr-shop-route.is-active {
    background: #234331;
    color: #fff;
}


.qr-shop-route-icon {
    flex: 0 0 auto;

    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(0,0,0,.15);

    font-size: 16px;
}


.qr-shop-route.is-active
.qr-shop-route-icon {
    border-color:
        rgba(255,255,255,.28);
}


.qr-shop-route > span:last-child {
    min-width: 0;
}


.qr-shop-route strong {
    display: block;

    font-size: 13px;
    line-height: 1.2;

    font-weight: 600;
}


.qr-shop-route small {
    display: block;

    margin-top: 3px;

    font-size: 10px;
    line-height: 1.3;

    color: #77736d;
}


.qr-shop-route.is-active small {
    color:
        rgba(255,255,255,.72);
}


/* ROUTE PANELS */

.qr-shop-route-panel[hidden] {
    display: none !important;
}


.qr-shop-route-panel.is-active {
    display: block;
}


/* INTRO PANELS */

.qr-route-intro {
    min-height: 295px;

    display: grid;

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

    align-items: stretch;

    border:
        1px solid
        #dfddd7;

    background: #f7f5f0;
}


.qr-route-intro-copy {
    padding:
        42px
        46px;
}


.qr-route-eyebrow {
    display: block;

    margin-bottom: 11px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: #637066;
}


.qr-route-intro h2 {
    max-width: 620px;

    margin:
        0
        0
        15px;

    font-size: 36px;

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -.035em;
}


.qr-route-intro p {
    max-width: 650px;

    margin: 0;

    font-size: 14px;

    line-height: 1.65;

    color: #595751;
}


.qr-route-tags {
    margin-top: 22px;

    display: flex;

    gap: 7px;

    flex-wrap: wrap;
}


.qr-route-tags span {
    padding:
        7px
        10px;

    border:
        1px solid
        #d6d2ca;

    background: #fff;

    font-size: 10px;

    font-weight: 600;

    color: #31312e;
}


/* DOOR VISUAL */

.qr-route-visual {
    min-height: 295px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ebe8e0,
            #f8f6f1
        );
}


.qr-demo-door {
    width: 170px;
    height: 235px;

    padding: 18px;

    background:
        var(
            --qr-door-color,
            #747f6c
        );

    border:
        1px solid
        rgba(0,0,0,.18);

    box-shadow:
        18px
        20px
        28px
        rgba(0,0,0,.13);
}


.qr-demo-door > div {
    width: 100%;
    height: 100%;

    border:
        11px solid
        color-mix(
            in srgb,
            var(
                --qr-door-color,
                #747f6c
            ) 94%,
            #111
        );

    background:
        color-mix(
            in srgb,
            var(
                --qr-door-color,
                #747f6c
            ) 88%,
            #fff
        );
}


/* ACCESSORY VISUAL */

.qr-route-visual-accessories {
    position: relative;
}


.qr-panel-sample {
    width: 150px;
    height: 210px;

    background:
        var(
            --qr-door-color,
            #747f6c
        );

    box-shadow:
        14px
        18px
        25px
        rgba(0,0,0,.12);

    transform:
        translateX(25px)
        rotate(-3deg);
}


.qr-plinth-sample {
    position: absolute;

    width: 230px;
    height: 25px;

    bottom: 45px;
    left: 48%;

    background:
        var(
            --qr-door-color,
            #747f6c
        );

    transform:
        translateX(-50%);
}


.qr-cornice-sample {
    position: absolute;

    width: 235px;
    height: 21px;

    top: 49px;
    left: 48%;

    background:
        color-mix(
            in srgb,
            var(
                --qr-door-color,
                #747f6c
            ) 88%,
            #fff
        );

    transform:
        translateX(-50%);
}


/* COMING NEXT */

.qr-route-coming {
    margin-top: 12px;

    padding:
        15px
        17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    border:
        1px solid
        #e0ddd6;

    background: #fff;
}


.qr-route-coming strong {
    font-size: 12px;
}


.qr-route-coming span {
    font-size: 11px;

    color: #77736d;
}


/* PAINT TO ORDER */

.qr-route-intro-pto {
    background: #234331;
    color: #fff;
}


.qr-route-intro-pto
.qr-route-eyebrow {
    color:
        rgba(255,255,255,.65);
}


.qr-route-intro-pto p {
    color:
        rgba(255,255,255,.78);
}


.qr-route-quote {
    display: inline-flex;

    margin-top: 24px;

    min-height: 42px;

    padding:
        0
        18px;

    align-items: center;

    justify-content: center;

    background: #fff;

    color: #234331;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;
}


.qr-pto-swatches {
    display: grid;

    grid-template-columns:
        repeat(3, 76px);

    gap: 12px;

    align-content: center;

    justify-content: center;

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


.qr-pto-swatches span {
    width: 76px;
    height: 76px;

    display: block;

    background:
        var(--pto);

    border:
        5px solid
        rgba(255,255,255,.85);

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.15);
}


/* TABLET */

@media (max-width: 980px) {

    .qr-shop-routes {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .qr-shop-route:nth-child(2) {
        border-right: 0;
    }

    .qr-shop-route:nth-child(-n+2) {
        border-bottom:
            1px solid
            #e6e3dc;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .qr-shop-routes {
        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        margin-top: 16px;
    }


    .qr-shop-route {
        flex:
            0 0
            78%;

        min-height: 67px;

        scroll-snap-align: start;

        border-bottom: 0 !important;
    }


    .qr-route-intro {
        min-height: 0;

        grid-template-columns: 1fr;
    }


    .qr-route-intro-copy {
        padding:
            27px
            22px;
    }


    .qr-route-intro h2 {
        font-size: 29px;
    }


    .qr-route-visual {
        min-height: 240px;
    }


    .qr-route-coming {
        align-items: flex-start;

        flex-direction: column;
    }


    .qr-pto-swatches {
        min-height: 235px;
    }

}



/* =========================================================
   CAMBRIDGE SHOP ROUTES
   ========================================================= */

.qr-shop-routes {
    scroll-margin-top: 95px;

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

    margin: 24px 0 18px;

    border: 1px solid #dfddd7;

    background: #fff;
}


.qr-shop-route {
    appearance: none;

    min-width: 0;

    padding: 16px 15px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 0;
    border-right: 1px solid #e6e3dc;

    background: #fff;

    color: #222;

    text-align: left;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}


.qr-shop-route:last-child {
    border-right: 0;
}


.qr-shop-route:hover {
    background: #f5f3ee;
}


.qr-shop-route.is-active {
    background: #234331;
    color: #fff;
}


.qr-shop-route-icon {
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(0,0,0,.15);

    font-size: 16px;
}


.qr-shop-route.is-active .qr-shop-route-icon {
    border-color: rgba(255,255,255,.28);
}


.qr-shop-route strong {
    display: block;

    font-size: 13px;
    line-height: 1.2;
}


.qr-shop-route small {
    display: block;

    margin-top: 3px;

    font-size: 10px;
    line-height: 1.3;

    color: #77736d;
}


.qr-shop-route.is-active small {
    color: rgba(255,255,255,.72);
}


.qr-shop-route-panel[hidden] {
    display: none !important;
}


.qr-shop-route-panel.is-active {
    display: block;
}


/* =========================================================
   ROUTE INTRO
   ========================================================= */

.qr-route-intro {
    min-height: 295px;

    display: grid;

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

    border: 1px solid #dfddd7;

    background: #f7f5f0;
}


.qr-route-intro-copy {
    padding: 42px 46px;
}


.qr-route-eyebrow {
    display: block;

    margin-bottom: 11px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .12em;

    color: #637066;

    text-transform: uppercase;
}


.qr-route-intro h2 {
    max-width: 620px;

    margin: 0 0 15px;

    font-size: 36px;
    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -.035em;
}


.qr-route-intro p {
    max-width: 650px;

    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color: #595751;
}


.qr-route-tags {
    margin-top: 22px;

    display: flex;

    gap: 7px;

    flex-wrap: wrap;
}


.qr-route-tags span {
    padding: 7px 10px;

    border: 1px solid #d6d2ca;

    background: #fff;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   DOOR VISUAL
   ========================================================= */

.qr-route-visual {
    min-height: 295px;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ebe8e0,
            #f8f6f1
        );
}


.qr-demo-door {
    width: 172px;
    height: 235px;

    padding: 18px;

    background:
        var(--qr-door-color, #747f6c);

    border: 1px solid rgba(0,0,0,.16);

    box-shadow:
        18px 20px 28px
        rgba(0,0,0,.13);
}


.qr-demo-door > div {
    width: 100%;
    height: 100%;

    border: 11px solid
        color-mix(
            in srgb,
            var(--qr-door-color, #747f6c) 93%,
            #111
        );

    background:
        color-mix(
            in srgb,
            var(--qr-door-color, #747f6c) 88%,
            #fff
        );
}


/* =========================================================
   ACCESSORY VISUAL
   ========================================================= */

.qr-panel-sample {
    width: 150px;
    height: 210px;

    background:
        var(--qr-door-color, #747f6c);

    box-shadow:
        14px 18px 25px
        rgba(0,0,0,.12);

    transform:
        translateX(25px)
        rotate(-3deg);
}


.qr-plinth-sample {
    position: absolute;

    width: 230px;
    height: 25px;

    bottom: 45px;
    left: 48%;

    background:
        var(--qr-door-color, #747f6c);

    transform: translateX(-50%);
}


.qr-cornice-sample {
    position: absolute;

    width: 235px;
    height: 21px;

    top: 49px;
    left: 48%;

    background:
        color-mix(
            in srgb,
            var(--qr-door-color, #747f6c) 88%,
            #fff
        );

    transform: translateX(-50%);
}


/* =========================================================
   PLACEHOLDER STRIP
   ========================================================= */

.qr-route-coming {
    margin-top: 12px;

    padding: 15px 17px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    border: 1px solid #e0ddd6;

    background: #fff;
}


.qr-route-coming strong {
    font-size: 12px;
}


.qr-route-coming span {
    font-size: 11px;

    color: #77736d;
}


/* =========================================================
   PAINT TO ORDER
   ========================================================= */

.qr-route-intro-pto {
    background: #234331;

    color: #fff;
}


.qr-route-intro-pto .qr-route-eyebrow {
    color: rgba(255,255,255,.65);
}


.qr-route-intro-pto p {
    color: rgba(255,255,255,.78);
}


.qr-route-quote {
    display: inline-flex;

    min-height: 42px;

    margin-top: 24px;

    padding: 0 18px;

    align-items: center;
    justify-content: center;

    background: #fff;

    color: #234331;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
}


.qr-pto-swatches {
    min-height: 295px;

    display: grid;

    grid-template-columns:
        repeat(3, 76px);

    gap: 12px;

    align-content: center;
    justify-content: center;

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


.qr-pto-swatches span {
    width: 76px;
    height: 76px;

    display: block;

    background: var(--pto);

    border: 5px solid rgba(255,255,255,.85);

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.15);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

    .qr-shop-routes {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .qr-shop-route:nth-child(2) {
        border-right: 0;
    }


    .qr-shop-route:nth-child(-n+2) {
        border-bottom:
            1px solid #e6e3dc;
    }

}


@media (max-width: 700px) {

    .qr-shop-routes {
        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        margin-top: 16px;
    }


    .qr-shop-route {
        flex: 0 0 78%;

        min-height: 68px;

        scroll-snap-align: start;

        border-bottom: 0 !important;
    }


    .qr-route-intro {
        min-height: 0;

        grid-template-columns: 1fr;
    }


    .qr-route-intro-copy {
        padding: 27px 22px;
    }


    .qr-route-intro h2 {
        font-size: 29px;
    }


    .qr-route-visual {
        min-height: 235px;
    }


    .qr-route-coming {
        align-items: flex-start;

        flex-direction: column;
    }


    .qr-pto-swatches {
        min-height: 235px;
    }

}



/* =========================================================
   QANTU REAL CAMBRIDGE FRONT BROWSER
   ========================================================= */

.qr-front-browser {
    margin-top: 14px;
    border: 1px solid #dfddd7;
    background: #fff;
}


.qr-front-toolbar {
    min-height: 58px;
    padding: 10px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    border-bottom: 1px solid #e5e2db;
}


.qr-front-type-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}


.qr-front-type {
    min-height: 34px;
    padding: 0 13px;

    border: 1px solid #d9d6cf;
    background: #fff;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


.qr-front-type:hover {
    background: #f5f3ee;
}


.qr-front-type.is-active {
    border-color: #234331;
    background: #234331;
    color: #fff;
}


.qr-front-result-count {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}


.qr-front-result-count strong {
    font-size: 17px;
}


.qr-front-result-count span {
    font-size: 10px;
    color: #77736d;
}


/* HEIGHT FILTER */

.qr-front-height-filter {
    padding: 12px 14px;

    display: flex;
    align-items: center;
    gap: 6px;

    overflow-x: auto;

    border-bottom: 1px solid #ebe8e2;
    background: #faf9f6;
}


.qr-front-height-filter > span {
    margin-right: 5px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: #77736d;
}


.qr-front-height-filter button {
    flex: 0 0 auto;

    min-height: 30px;
    padding: 0 10px;

    border: 1px solid #ddd9d1;
    background: #fff;

    font-size: 10px;

    cursor: pointer;
}


.qr-front-height-filter button.is-active {
    border-color: #234331;
    background: #234331;
    color: #fff;
}


/* PRODUCT GRID */

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


.qr-front-card {
    min-width: 0;
    padding: 16px;

    border-right: 1px solid #ebe8e2;
    border-bottom: 1px solid #ebe8e2;

    background: #fff;
}


.qr-front-card:nth-child(4n) {
    border-right: 0;
}


/* VISUAL */

.qr-front-card-visual {
    height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #f5f3ee,
            #fbfaf8
        );
}


.qr-front-door-shape {
    padding: 11px;

    background:
        var(
            --qr-door-color,
            #737e6a
        );

    border:
        1px solid
        rgba(0,0,0,.15);

    box-shadow:
        9px 11px 17px
        rgba(0,0,0,.11);
}


.qr-front-door-shape > div {
    width: 100%;
    height: 100%;

    border:
        8px solid
        color-mix(
            in srgb,
            var(
                --qr-door-color,
                #737e6a
            ) 92%,
            #111
        );

    background:
        color-mix(
            in srgb,
            var(
                --qr-door-color,
                #737e6a
            ) 88%,
            #fff
        );
}


.qr-front-door-shape.is-drawer {
    padding: 8px;
}


.qr-front-door-shape.is-drawer > div {
    border-width: 6px;
}


.qr-front-door-shape.is-glazed > div {
    background:
        linear-gradient(
            135deg,
            rgba(205,220,220,.72),
            rgba(245,250,250,.94)
        );
}


/* COPY */

.qr-front-card-copy {
    padding-top: 13px;
}


.qr-front-card-copy > strong {
    display: block;

    font-size: 13px;
    line-height: 1.25;
}


.qr-front-card-copy > span {
    display: block;

    margin-top: 3px;

    font-size: 11px;

    color: #77736d;
}


.qr-front-card-copy small {
    display: block;

    margin-top: 7px;

    font-size: 10px;

    color: #5c675f;
}


.qr-front-card-price {
    margin-top: 12px;

    display: flex;
    align-items: baseline;

    gap: 5px;
}


.qr-front-card-price strong {
    font-size: 16px;
}


.qr-front-card-price span {
    font-size: 9px;

    color: #77736d;
}


/* QUANTITY + ADD */

.qr-front-card-actions {
    margin-top: 13px;

    display: grid;

    grid-template-columns:
        88px 1fr;

    gap: 7px;
}


.qr-front-stepper {
    height: 38px;

    display: grid;

    grid-template-columns:
        27px 1fr 27px;

    align-items: center;

    border: 1px solid #d8d5ce;

    background: #fff;
}


.qr-front-stepper button {
    height: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    font-size: 15px;

    cursor: pointer;
}


.qr-front-stepper span {
    text-align: center;

    font-size: 11px;
    font-weight: 600;
}


.qr-front-add {
    min-height: 38px;

    padding: 0 12px;

    border: 1px solid #222;

    background: #222;

    color: #fff;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}


.qr-front-add:hover,
.qr-front-add.is-added {
    border-color: #234331;
    background: #234331;
}


/* TABLET */

@media (max-width: 980px) {

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


    .qr-front-card:nth-child(4n) {
        border-right:
            1px solid #ebe8e2;
    }


    .qr-front-card:nth-child(3n) {
        border-right: 0;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .qr-front-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }


    .qr-front-type-tabs {
        width: 100%;

        flex-wrap: nowrap;

        overflow-x: auto;
    }


    .qr-front-type {
        flex: 0 0 auto;
    }


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


    .qr-front-card,
    .qr-front-card:nth-child(3n),
    .qr-front-card:nth-child(4n) {
        border-right:
            1px solid #ebe8e2;
    }


    .qr-front-card:nth-child(2n) {
        border-right: 0;
    }


    .qr-front-card {
        padding: 11px;
    }


    .qr-front-card-visual {
        height: 145px;
    }


    .qr-front-card-actions {
        grid-template-columns: 1fr;
    }


    .qr-front-stepper {
        width: 88px;
    }

}



/* =========================================================
   CAMBRIDGE ACCESSORIES BROWSER
   ========================================================= */

.qr-accessory-browser {
    margin-top: 14px;
    border: 1px solid #dfddd7;
    background: #fff;
}

.qr-accessory-toolbar {
    min-height: 58px;
    padding: 10px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    border-bottom: 1px solid #e5e2db;
}

.qr-accessory-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qr-accessory-tab {
    min-height: 34px;
    padding: 0 13px;

    border: 1px solid #d9d6cf;
    background: #fff;

    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.qr-accessory-tab.is-active {
    border-color: #234331;
    background: #234331;
    color: #fff;
}

.qr-accessory-count {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.qr-accessory-count strong {
    font-size: 17px;
}

.qr-accessory-count span {
    font-size: 10px;
    color: #77736d;
}


/* GRID */

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

.qr-accessory-card {
    min-width: 0;
    padding: 16px;

    border-right: 1px solid #ebe8e2;
    border-bottom: 1px solid #ebe8e2;
}

.qr-accessory-card:nth-child(4n) {
    border-right: 0;
}


/* SIMPLE PRODUCT ILLUSTRATIONS */

.qr-accessory-visual {
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7f5f0;
}

.qr-accessory-shape {
    background:
        var(--qr-door-color, #737e6a);

    box-shadow:
        8px 10px 15px
        rgba(0,0,0,.10);
}

.qr-accessory-panels {
    width: 82px;
    height: 120px;

    border:
        7px solid
        rgba(0,0,0,.08);
}

.qr-accessory-plinths {
    width: 145px;
    height: 26px;
}

.qr-accessory-cornice {
    width: 145px;
    height: 28px;

    transform: skewX(-18deg);
}

.qr-accessory-posts {
    width: 28px;
    height: 120px;
}

.qr-accessory-decorative {
    width: 72px;
    height: 105px;

    border-radius: 3px;
}


/* PRODUCT COPY */

.qr-accessory-copy {
    padding-top: 13px;
}

.qr-accessory-copy strong {
    display: block;

    min-height: 34px;

    font-size: 12px;
    line-height: 1.35;
}

.qr-accessory-copy > span {
    display: block;

    margin-top: 4px;

    font-size: 10px;
    color: #77736d;
}

.qr-accessory-copy small {
    display: block;

    margin-top: 7px;

    font-size: 10px;
    color: #5c675f;
}


.qr-accessory-price {
    margin-top: 12px;

    display: flex;
    align-items: baseline;
    gap: 5px;
}

.qr-accessory-price strong {
    font-size: 16px;
}

.qr-accessory-price span {
    font-size: 9px;
    color: #77736d;
}


/* ACTIONS */

.qr-accessory-actions {
    margin-top: 13px;

    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 7px;
}

.qr-accessory-stepper {
    height: 38px;

    display: grid;
    grid-template-columns: 27px 1fr 27px;
    align-items: center;

    border: 1px solid #d8d5ce;
}

.qr-accessory-stepper button {
    height: 100%;
    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.qr-accessory-stepper span {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
}

.qr-accessory-add {
    min-height: 38px;

    border: 1px solid #222;
    background: #222;
    color: #fff;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.qr-accessory-add:hover,
.qr-accessory-add.is-added {
    border-color: #234331;
    background: #234331;
}


@media (max-width: 980px) {

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


@media (max-width: 700px) {

    .qr-accessory-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .qr-accessory-tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .qr-accessory-tab {
        flex: 0 0 auto;
    }

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

    .qr-accessory-card {
        padding: 11px;
    }

    .qr-accessory-visual {
        height: 125px;
    }

    .qr-accessory-actions {
        grid-template-columns: 1fr;
    }

    .qr-accessory-stepper {
        width: 88px;
    }
}



/* =========================================================
   QANTU CAMBRIDGE SECTION IMAGES
   ========================================================= */

.qr-route-image-visual {
    overflow: hidden;
    padding: 0 !important;
    background: #f5f2ec;
}

.qr-route-image-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* Keep all route cards visually consistent */

.qr-route-intro {
    align-items: stretch;
}

.qr-route-intro .qr-route-visual,
.qr-route-intro .qr-pto-swatches {
    min-height: 210px;
}


/* Complete Units */

.qr-route-visual-complete img {
    object-position: center center;
}


/* Doors */

.qr-route-visual-door img {
    object-position: center center;
}


/* Panels */

.qr-route-visual-accessories img {
    object-position: center center;
}


/* PTO */

.qr-pto-swatches.qr-route-image-visual {
    display: block;
}

.qr-pto-swatches.qr-route-image-visual span {
    display: none !important;
}

.qr-pto-swatches.qr-route-image-visual img {
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
}


/* Tablet */

@media (max-width: 980px) {

    .qr-route-intro .qr-route-visual,
    .qr-route-intro .qr-pto-swatches {
        min-height: 190px;
    }
}


/* Mobile */

@media (max-width: 700px) {

    .qr-route-intro {
        display: block;
    }

    .qr-route-intro-copy {
        width: 100%;
    }

    .qr-route-image-visual {
        width: 100%;
        min-height: 180px !important;
        margin-top: 12px;
    }

    .qr-route-image-visual img {
        min-height: 180px;
    }
}



/* =========================================================
   CAMBRIDGE STANDARD PAINT TO ORDER
   ========================================================= */

.qr-pto-browser {
    margin-top: 16px;
    border: 1px solid #dfddd7;
    background: #fff;
}


.qr-pto-browser-head {
    padding: 22px 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 28px;

    border-bottom: 1px solid #e6e2db;

    background: #f8f6f1;
}


.qr-pto-browser-head h3 {
    margin: 5px 0 8px;

    font-size: clamp(
        20px,
        2vw,
        28px
    );
}


.qr-pto-browser-head p {
    max-width: 680px;

    margin: 0;

    color: #66625d;
    line-height: 1.55;
}


.qr-pto-tier-badge {
    flex: 0 0 auto;

    min-width: 155px;

    padding: 12px 14px;

    border: 1px solid #d7d2c9;

    background: #fff;
}


.qr-pto-tier-badge span {
    display: block;

    margin-bottom: 3px;

    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;

    color: #77736d;
}


.qr-pto-tier-badge strong {
    font-size: 12px;
}


.qr-pto-toolbar {
    min-height: 58px;

    padding: 10px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border-bottom: 1px solid #e6e2db;
}


.qr-pto-tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.qr-pto-tab {
    min-height: 34px;

    padding: 0 13px;

    border: 1px solid #d9d6cf;

    background: #fff;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


.qr-pto-tab.is-active {
    border-color: #234331;

    background: #234331;

    color: #fff;
}


.qr-pto-count {
    display: flex;
    align-items: baseline;

    gap: 5px;

    white-space: nowrap;
}


.qr-pto-count strong {
    font-size: 17px;
}


.qr-pto-count span {
    font-size: 10px;

    color: #77736d;
}


/* HEIGHT FILTER */

.qr-pto-height-filter {
    padding: 12px 14px;

    display: flex;
    align-items: center;

    gap: 6px;

    overflow-x: auto;

    border-bottom: 1px solid #ebe8e2;

    background: #faf9f6;
}


.qr-pto-height-filter > span {
    margin-right: 4px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: #77736d;
}


.qr-pto-height-filter button {
    flex: 0 0 auto;

    min-height: 30px;

    padding: 0 10px;

    border: 1px solid #ddd9d1;

    background: #fff;

    font-size: 10px;

    cursor: pointer;
}


.qr-pto-height-filter button.is-active {
    border-color: #234331;

    background: #234331;

    color: #fff;
}


/* PRODUCTS */

.qr-pto-grid {
    display: grid;

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


.qr-pto-card {
    min-width: 0;

    padding: 16px;

    border-right: 1px solid #ebe8e2;

    border-bottom: 1px solid #ebe8e2;
}


.qr-pto-card:nth-child(4n) {
    border-right: 0;
}


.qr-pto-product-visual {
    height: 175px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f4f1eb;
}


.qr-pto-product-shape {
    width: 90px;
    height: 135px;

    padding: 10px;

    background: #777d70;

    border: 1px solid rgba(0,0,0,.12);

    box-shadow:
        8px 10px 16px
        rgba(0,0,0,.11);
}


.qr-pto-product-shape > div {
    width: 100%;
    height: 100%;

    border: 7px solid rgba(0,0,0,.08);

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


.qr-pto-product-shape.is-drawer {
    width: 135px;
    height: 62px;
}


.qr-pto-product-shape.is-glazed > div {
    background:
        linear-gradient(
            135deg,
            rgba(210,225,226,.70),
            rgba(248,250,250,.90)
        );
}


.qr-pto-product-shape.is-frame > div {
    background: #f1eee7;
}


.qr-pto-product-shape.is-accessory {
    width: 120px;
    height: 36px;

    padding: 5px;
}


.qr-pto-product-copy {
    padding-top: 13px;
}


.qr-pto-product-copy strong {
    display: block;

    min-height: 34px;

    font-size: 12px;
    line-height: 1.35;
}


.qr-pto-product-copy > span {
    display: block;

    margin-top: 4px;

    font-size: 10px;

    color: #77736d;
}


.qr-pto-product-copy small {
    display: block;

    margin-top: 7px;

    font-size: 10px;

    color: #5c675f;
}


.qr-pto-product-price {
    margin-top: 12px;

    display: flex;
    align-items: baseline;

    gap: 5px;
}


.qr-pto-product-price strong {
    font-size: 16px;
}


.qr-pto-product-price span {
    font-size: 9px;

    color: #77736d;
}


.qr-pto-product-actions {
    margin-top: 13px;

    display: grid;

    grid-template-columns:
        88px 1fr;

    gap: 7px;
}


.qr-pto-stepper {
    height: 38px;

    display: grid;

    grid-template-columns:
        27px 1fr 27px;

    align-items: center;

    border: 1px solid #d8d5ce;
}


.qr-pto-stepper button {
    height: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.qr-pto-stepper span {
    text-align: center;

    font-size: 11px;
    font-weight: 600;
}


.qr-pto-add {
    min-height: 38px;

    border: 1px solid #222;

    background: #222;

    color: #fff;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}


.qr-pto-add:hover,
.qr-pto-add.is-added {
    border-color: #234331;

    background: #234331;
}


@media (max-width: 980px) {

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


@media (max-width: 700px) {

    .qr-pto-browser-head {
        flex-direction: column;
    }


    .qr-pto-tier-badge {
        width: 100%;
    }


    .qr-pto-toolbar {
        align-items: flex-start;

        flex-direction: column;
    }


    .qr-pto-tabs {
        width: 100%;

        flex-wrap: nowrap;

        overflow-x: auto;
    }


    .qr-pto-tab {
        flex: 0 0 auto;
    }


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


    .qr-pto-card {
        padding: 11px;
    }


    .qr-pto-product-visual {
        height: 145px;
    }


    .qr-pto-product-actions {
        grid-template-columns: 1fr;
    }


    .qr-pto-stepper {
        width: 88px;
    }
}



/* =========================================================
   CAMBRIDGE PTO COLOUR PICKER
   ========================================================= */

.qr-pto-colour-picker {
    margin-top: 18px;

    border: 1px solid #dedbd4;

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.qr-pto-colour-picker.needs-selection {
    border-color: #234331;

    box-shadow:
        0 0 0 3px
        rgba(35,67,49,.12);
}


.qr-pto-colour-heading {
    padding: 22px 24px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 25px;

    border-bottom: 1px solid #e7e3dc;

    background: #f8f6f1;
}


.qr-pto-colour-heading h3 {
    margin: 5px 0 7px;

    font-size: clamp(
        20px,
        2vw,
        28px
    );
}


.qr-pto-colour-heading p {
    margin: 0;

    max-width: 620px;

    color: #66625d;

    line-height: 1.55;
}


.qr-pto-selected {
    min-width: 180px;

    padding: 12px 15px;

    border: 1px solid #d7d2c9;

    background: #fff;
}


.qr-pto-selected span {
    display: block;

    margin-bottom: 3px;

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;

    color: #77736d;
}


.qr-pto-selected strong {
    font-size: 13px;
}


.qr-pto-colour-grid {
    padding: 18px;

    display: grid;

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

    gap: 8px;
}


.qr-pto-colour {
    min-width: 0;

    padding: 7px;

    display: flex;
    align-items: center;

    gap: 8px;

    border: 1px solid #e0ddd6;

    background: #fff;

    text-align: left;

    cursor: pointer;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


.qr-pto-colour:hover {
    border-color: #8d8a83;

    transform: translateY(-1px);
}


.qr-pto-colour.is-selected {
    border-color: #222;

    box-shadow:
        inset 0 0 0 1px #222;
}


.qr-pto-colour-chip {
    flex: 0 0 31px;

    width: 31px;
    height: 31px;

    border-radius: 50%;

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

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.25);
}


.qr-pto-colour-name {
    min-width: 0;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.2;
}


.qr-pto-colour-note {
    padding: 13px 18px;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    border-top: 1px solid #ebe8e2;

    background: #faf9f6;

    font-size: 10px;
    line-height: 1.5;

    color: #6c6862;
}


.qr-pto-colour-note strong {
    flex: 0 0 auto;

    color: #333;
}


/*
 * Selected PTO colour is applied to the product
 * representation. This is visual guidance only.
 */

.qr-pto-browser
.qr-pto-product-shape {
    background:
        var(
            --qr-pto-colour,
            #777d70
        );
}


.qr-pto-browser:not(.has-pto-colour)
.qr-pto-product-shape {
    opacity: .55;
}


@media (max-width: 1050px) {

    .qr-pto-colour-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }
}


@media (max-width: 700px) {

    .qr-pto-colour-heading {
        flex-direction: column;
    }


    .qr-pto-selected {
        width: 100%;
    }


    .qr-pto-colour-grid {
        padding: 12px;

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

        gap: 6px;
    }


    .qr-pto-colour {
        padding: 7px 6px;
    }


    .qr-pto-colour-chip {
        flex-basis: 27px;

        width: 27px;
        height: 27px;
    }


    .qr-pto-colour-note {
        flex-direction: column;

        gap: 3px;
    }
}