body.qr-builder-enabled {
    --qr-content-width: 720px;
    background: var(--qr-background);
    color: var(--qr-text);

    > .container { max-width: none; padding: 0; width: 100%; }
    > .container > .row { margin-inline: 0; }
    .qr-builder-frame {
        background-color: var(--qr-background);
        background-position: center top;
        background-repeat: repeat-y;
        background-size: 100% auto;
        max-width: var(--qr-content-width);
        min-width: 0;
        width: 100%;
    }
    .qr-builder-topline, .main-footer {
        margin-inline: auto;
        max-width: none;
        width: min(calc(100% - 28px), var(--qr-content-width));
    }
    .main-nav-container { background: var(--qr-surface); margin: 0; max-width: none; width: 100%; }
    .main-nav { box-shadow: 0 8px 32px rgba(0, 0, 0, .12); }
    .main-nav > .container { margin-inline: auto; max-width: none; width: min(calc(100% - 28px), var(--qr-content-width)); }
    .main-nav .navbar-brand img { height: 54px; max-width: 120px; object-fit: contain; width: auto; }
    .qr-builder-topline { padding: 0; }
    .delivery-alert { gap: 12px; min-width: 0; }
    .delivery-alert > .d-flex { min-width: 0; }
    .delivery-alert > .d-flex > div:last-child { min-width: 0; overflow-wrap: anywhere; }
    .delivery-alert .alert-icon { flex: 0 0 55px; margin-inline: 0 12px; }
    .delivery-alert .btn-change { flex: 0 0 auto; white-space: nowrap; }
    .delivery-alert { border-color: var(--qr-accent); }
    .delivery-alert .alert-icon i, .survey-button .lar { color: var(--qr-accent); }
    .main-footer { color: rgba(255, 255, 255, .75); padding: 20px; text-align: center; }
}

.qr-builder-page {
    background: transparent;
    min-height: 100vh;
    min-width: 0;
    padding: 18px 14px 72px;
    width: 100%;
}

.qr-builder-shell { margin-inline: auto; max-width: var(--qr-content-width); min-width: 0; width: 100%; }
body.qr-builder-background-body {
    background-position: center top;
    background-size: 100% auto;
    background-repeat: repeat-y;
    .qr-builder-frame { background-color: transparent; }
}

.qr-builder-page .advertisements {
    margin: 16px 0;
    min-width: 0;
}
.qr-builder-page .advertisements .container { max-width: none; padding: 0; width: 100%; }
.qr-builder-page .advertisements .row { margin: 0; }
.qr-builder-page .advertisements .col-12 { min-width: 0; padding: 0; }
.qr-builder-page .advertisements .owl-carousel { max-width: 100%; }
.qr-builder-page .advertisements .card { border-radius: var(--qr-card-radius); overflow: hidden; padding: 12px; }
.qr-builder-page .advertisements .card .lead { font-size: 18px; margin-bottom: 10px !important; }
.qr-builder-page .advertisements .card .owl-carousel { box-sizing: border-box; padding-inline-start: 12px; }
.qr-builder-page .advertisements .banner .owl-dot.active span { background: var(--qr-accent); }

.qr-builder-hero {
    align-items: flex-end;
    background-color: var(--qr-primary);
    background-position: center;
    background-size: cover;
    border-radius: max(22px, var(--qr-card-radius));
    box-shadow: 0 24px 60px rgba(9, 26, 31, .22);
    color: var(--qr-hero-text, #fff);
    display: flex;
    min-height: var(--qr-hero-height);
    min-width: 0;
    overflow: hidden;
    padding: clamp(24px, 6vw, 54px);
    position: relative;
}

.qr-builder-hero-content { max-width: 620px; min-width: 0; overflow-wrap: anywhere; position: relative; z-index: 2; }
.qr-builder-hero h1 { color: var(--qr-hero-text, #fff); font-size: clamp(27px, 6vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1.18; margin: 0 0 10px; }
.qr-builder-hero p { color: var(--qr-hero-text, #fff); font-size: clamp(13px, 2.2vw, 17px); line-height: 1.8; margin: 0; max-width: 540px; }

.qr-builder-discovery {
    backdrop-filter: blur(18px);
    background: color-mix(in srgb, var(--qr-surface) 92%, transparent);
    border: 1px solid rgba(120, 130, 140, .14);
    border-radius: 0;
    margin: 0 auto;
    max-width: var(--qr-content-width);
    min-width: 0;
    padding: 12px;
    width: 100%;
}

.qr-builder-search { align-items: center; background: var(--qr-background); border: 1px solid rgba(110, 120, 130, .15); border-radius: 50px; display: flex; gap: 8px; margin: 0; padding: 5px 9px 5px 15px; }
[dir='rtl'] .qr-builder-search { padding: 5px 15px 5px 9px; }
.qr-builder-search > i { color: var(--qr-primary); font-size: 24px; }
.qr-builder-search input { background: transparent; border: 0; color: var(--qr-text); flex: 1; font-size: 13px; min-width: 0; outline: 0; padding: 9px 4px; }
.qr-builder-search input::placeholder { color: var(--qr-muted); opacity: 1; }
.qr-builder-search button { align-items: center; background: var(--qr-primary); border: 0; border-radius: 50%; color: #fff; display: flex; height: 34px; justify-content: center; opacity: 0; pointer-events: none; transition: .2s; width: 34px; }
.qr-builder-search.has-value button { opacity: 1; pointer-events: auto; }

.qr-builder-section-nav { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding-top: 8px; scrollbar-width: none; }
.qr-builder-section-nav:first-child { padding-top: 0; }
.qr-builder-section-nav a, .qr-builder-section-nav button { background: transparent; border: 1px solid color-mix(in srgb, var(--qr-primary) 20%, transparent); border-radius: 50px; color: var(--qr-text); flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 8px 13px; text-decoration: none; }
.qr-builder-section-nav a:hover, .qr-builder-section-nav button:hover, .qr-builder-section-nav button.is-active { background: var(--qr-primary); color: #fff; }
.qr-builder-pwa { text-align: center; }
.qr-builder-pwa .btn { background: var(--qr-primary); border-radius: 50px; color: #fff; margin-bottom: 14px; }

.qr-builder-sections { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.qr-builder-section {
    background-color: var(--section-background);
    background-position: center;
    background-size: cover;
    border-radius: var(--qr-section-radius);
    color: var(--section-text);
    min-width: 0;
    overflow: hidden;
    padding: clamp(18px, 4vw, 30px);
    scroll-margin-top: calc(var(--qr-sticky-height, 180px) + 12px);
}

.qr-builder-section-header { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 17px; }
.qr-builder-section-header h2 { color: inherit; font-size: clamp(21px, 4vw, 30px); font-weight: 800; letter-spacing: -.025em; margin: 0; }
.qr-builder-section-header { gap: 12px; }
.qr-builder-section-header > div { min-width: 0; }
.qr-builder-view-all { align-items: center; background: var(--view-all-bg, transparent); border: var(--view-all-border-width, 1px) var(--view-all-border-style, none) var(--view-all-border, currentColor); border-radius: var(--view-all-radius, 20px); color: var(--view-all-text, inherit); display: inline-flex; flex: 0 0 auto; font-size: 12px; gap: 4px; padding: 8px 12px; white-space: nowrap; }
[dir='ltr'] .qr-builder-view-all i { transform: rotate(180deg); }
.qr-builder-section-header p { color: var(--qr-muted); font-size: 12px; margin: 5px 0 0; }

.qr-builder-store-layout { display: grid; gap: 13px; max-width: 100%; min-width: 0; }
.layout-grid .qr-builder-store-layout { grid-template-columns: repeat(var(--section-columns), minmax(0, 1fr)); }
.qr-builder-grid-slider { display: flex; gap: 13px; overflow-x: auto; scroll-snap-type: x mandatory; max-width: 100%; min-width: 0; padding-bottom: 8px; }
.qr-builder-grid-slide { flex: 0 0 100%; grid-template-columns: repeat(var(--section-columns), minmax(0, 1fr)); align-content: start; scroll-snap-align: start; }
.qr-builder-grid-slider.has-more .qr-builder-grid-slide { flex-basis: 88%; }
.qr-builder-grid-controls { align-items: center; }
.qr-builder-grid-hint { color: var(--qr-muted); font-size: 11px; margin-inline-end: 8px; }
.qr-builder-grid-slide[hidden] { display: none; }
.layout-grid_slider .qr-builder-store-visual { margin-inline: auto; max-width: 180px; }
.layout-grid_slider .qr-builder-store-visual picture { padding: 10px; }
.layout-grid_slider .qr-builder-store-visual img { max-height: 140px; max-width: 140px; }
.qr-builder-grid-controls { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.qr-builder-grid-controls button { background: var(--qr-surface); color: var(--section-text); border: 1px solid currentColor; border-radius: 50%; width: 34px; height: 34px; }
[dir='ltr'] .qr-builder-grid-controls i { transform: rotate(180deg); }
.layout-carousel .qr-builder-store-layout { display: flex; margin-inline: -4px; overflow-x: auto; padding: 4px 4px 9px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.layout-carousel .qr-builder-store-card { flex: 0 0 min(32%, 160px); scroll-snap-align: start; }
.layout-featured .qr-builder-store-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-featured .qr-builder-store-card.is-featured { grid-column: 1 / -1; }
.layout-featured .qr-builder-store-card.is-featured .qr-builder-store-visual { aspect-ratio: 16 / 8; }
.layout-grid .qr-builder-store-visual, .layout-featured .qr-builder-store-visual { margin-inline: auto; max-width: 180px; }
.layout-featured .qr-builder-store-card.is-featured .qr-builder-store-visual { max-width: 320px; }
.layout-grid .qr-builder-store-visual picture, .layout-featured .qr-builder-store-visual picture { padding: 10px; }
.layout-grid .qr-builder-store-visual img, .layout-featured .qr-builder-store-visual img { max-height: 140px; max-width: 140px; }
.layout-featured .qr-builder-store-card.is-featured .qr-builder-store-visual img { max-width: 180px; }
.layout-logos .qr-builder-store-layout { display: flex; gap: 18px; overflow-x: auto; padding: 5px; scrollbar-width: none; }
.layout-logos .qr-builder-store-card { flex: 0 0 105px; text-align: center; }
.layout-logos .qr-builder-store-visual { aspect-ratio: 1 !important; box-sizing: border-box; height: auto; width: 100%; border: 3px solid color-mix(in srgb, var(--qr-accent) 70%, #fff); border-radius: 50%; padding: 0; }
.layout-logos .qr-builder-store-visual picture { border-radius: 50%; overflow: hidden; }
.layout-logos .qr-builder-store-visual img { border-radius: 0; object-fit: contain; }
.layout-logos .qr-builder-card-arrow { display: none; }
.layout-list .qr-builder-store-layout { grid-template-columns: 1fr; }
.layout-list .qr-builder-store-card > a { align-items: center; display: grid; gap: 12px; grid-template-columns: 72px minmax(0, 1fr); }
.layout-list .qr-builder-store-layout .qr-builder-store-visual { aspect-ratio: 1; max-width: 72px; width: 100%; }
.layout-list .qr-builder-store-copy { padding: 5px 8px; }

.qr-builder-store-card { min-width: 0; }
.qr-builder-store-card[hidden] { display: none !important; }
.qr-builder-store-card > a { color: inherit; display: block; text-decoration: none; }
.qr-builder-store-visual { aspect-ratio: 1; background: transparent; border-radius: var(--qr-card-radius); box-shadow: 0 12px 26px rgba(17, 30, 33, .09); overflow: hidden; position: relative; width: 100%; }
.ratio-portrait .qr-builder-store-visual { aspect-ratio: 3 / 4; }
.ratio-landscape .qr-builder-store-visual { aspect-ratio: 4 / 3; }
.ratio-wide .qr-builder-store-visual { aspect-ratio: 16 / 9; }
.qr-builder-store-visual picture { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; }
.qr-builder-store-visual img { display: block; height: 100%; width: 100%; }
.qr-builder-store-visual img { object-fit: contain; transition: transform .45s ease; }
.qr-builder-store-card:hover img { transform: scale(1.045); }
.qr-builder-card-arrow { align-items: center; backdrop-filter: blur(8px); background: rgba(255, 255, 255, .88); border-radius: 50%; bottom: 9px; color: var(--qr-primary); display: flex; height: 32px; inset-inline-end: 9px; justify-content: center; position: absolute; width: 32px; }
.qr-builder-card-arrow i { font-size: 19px; }
.qr-builder-store-card.is-closed picture { opacity: .55; }
.qr-builder-closed { align-items: center; background: rgba(0, 0, 0, .45); border-radius: inherit; color: #fff; display: flex; font-size: 12px; inset: 0; justify-content: center; padding: 5px; pointer-events: none; position: absolute; text-align: center; }
.qr-builder-store-copy { padding: 10px 5px 3px; }
.qr-builder-store-copy .title { color: inherit; font-size: 14px; font-weight: 800; line-height: 1.35; margin: 0; }
#services .qr-builder-store-copy .title, .qr-section-modal .qr-builder-store-copy .title { color: var(--section-text, var(--qr-text)); }
.qr-builder-store-copy > span { color: var(--qr-muted); display: -webkit-box; font-size: 10px; line-height: 1.55; margin-top: 4px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.qr-builder-store-tag { border-radius: 8px; display: inline-block; font-size: 11px; line-height: 1.5; margin-top: 7px; max-width: 100%; overflow-wrap: anywhere; padding: 4px 8px; }
.qr-builder-store-details { color: var(--section-text, var(--qr-text)); display: flex; flex-wrap: wrap; font-size: 11px; gap: 7px 12px; line-height: 1.65; margin-top: 7px; }
.qr-builder-store-details > span { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 4px; }

.style-glass .qr-builder-store-card { backdrop-filter: blur(16px); background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--qr-card-radius); padding: 7px; }
.style-outline .qr-builder-store-card { border: 1px solid color-mix(in srgb, var(--section-text) 18%, transparent); border-radius: var(--qr-card-radius); padding: 7px; }
.style-minimal .qr-builder-store-visual { box-shadow: none; }

.qr-builder-contact { align-items: center; background: var(--qr-primary); border-radius: max(20px, var(--qr-card-radius)); color: #fff; display: flex; justify-content: space-between; margin-top: 16px; overflow: hidden; padding: clamp(22px, 5vw, 38px); position: relative; }
.qr-builder-contact::after { border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; content: ''; height: 170px; inset-inline-end: -75px; position: absolute; top: -75px; width: 170px; }
.qr-builder-contact small { color: var(--qr-accent); font-weight: 800; }
.qr-builder-contact h2 { color: #fff; font-size: 24px; font-weight: 800; margin: 3px 0 0; }
.qr-builder-contact-links { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 2; }
.qr-builder-contact-links a { align-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: #fff; display: flex; height: 40px; justify-content: center; width: 40px; }
.qr-builder-contact-links i { font-size: 20px; }
.qr-builder-empty { align-items: center; color: var(--qr-muted); flex-direction: column; gap: 8px; justify-content: center; min-height: 220px; text-align: center; }
.qr-builder-empty:not([hidden]) { display: flex; }
.qr-builder-empty i { font-size: 44px; }

.qr-section-modal .modal-content { background: var(--qr-surface); border-radius: 20px; color: var(--qr-text); overflow: hidden; }
.qr-section-modal .modal-header { align-items: center; gap: 12px; }
.qr-section-modal .modal-title { color: var(--qr-text); font-size: 22px; font-weight: 700; }
.qr-section-modal .modal-body { padding: 0 16px 16px; }
.qr-section-modal .qr-section-modal-filters { background: var(--qr-surface); display: grid; gap: 10px; padding: 12px 0; position: sticky; top: 0; z-index: 2; }
.qr-section-modal-categories { padding: 0 0 4px; }
.qr-section-modal-list .qr-builder-store-card { border-bottom: 1px solid rgba(120,130,140,.15); color: var(--section-text); padding: 10px 0; }
.qr-section-modal-list .qr-builder-store-card > a { grid-template-columns: 72px minmax(0, 1fr); }
.qr-section-modal-list .qr-builder-card-arrow { display: none; }
.qr-section-modal .modal-dialog { max-width: min(680px, calc(100% - 20px)); margin-inline: auto; }
#metadataModal select:disabled + .select2-container { cursor: not-allowed; }

@media (max-width: 575px) {
    body.qr-builder-enabled {
        .qr-builder-topline, .main-footer { width: min(calc(100% - 18px), var(--qr-content-width)); }
        .main-nav > .container { width: 100%; }
        .main-nav .navbar-brand img { height: 42px; max-width: 92px; }
        .delivery-alert { gap: 8px; padding: 8px 10px; }
        .delivery-alert .alert-icon { flex-basis: 38px; height: 38px; margin-inline-end: 7px; }
        .delivery-alert .alert-icon i { font-size: 22px; }
        .delivery-alert .btn-change { padding: 8px 10px; }
    }
    .qr-builder-page { padding: 10px 9px 52px; }
    .qr-builder-hero { border-radius: max(18px, var(--qr-card-radius)); min-height: clamp(220px, calc(var(--qr-hero-height) * .75), 360px); padding: 25px 20px; }
    .layout-grid .qr-builder-store-layout { grid-template-columns: repeat(var(--section-columns), minmax(0, 1fr)); }
    .layout-carousel .qr-builder-store-card { flex-basis: min(36%, 128px); }
    .qr-builder-section { padding: 18px 13px; }
    .qr-builder-contact { align-items: flex-start; flex-direction: column; gap: 18px; }
}

// Scope card geometry to custom sections so the legacy portfolio cannot override it.
#services .qr-builder-section:not(.layout-list) .qr-builder-store-card > a {
    display: flex; flex-direction: column; align-items: stretch; min-width: 0; width: 100%;
}
#services .qr-builder-section:not(.layout-list) .qr-builder-store-copy {
    display: block; width: 100%; min-width: 0; box-sizing: border-box; text-align: center; padding-inline: 5px;
}
#services .qr-builder-section .qr-builder-store-copy .title {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
#services .qr-builder-section .qr-builder-store-copy .qr-grid-title {
    align-items: center; background: var(--grid-title-bg, transparent); box-sizing: border-box;
    color: var(--grid-title-text, var(--section-text, var(--qr-text))); display: flex; justify-content: center;
    min-height: var(--grid-title-height, calc(1.35em + 24px)); padding: 12px 8px;
    white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip;
    border-radius: 0 0 var(--section-image-radius, var(--qr-card-radius)) var(--section-image-radius, var(--qr-card-radius));
}
.qr-grid-title [data-grid-title-text] { display: block; width: 100%; min-width: 0; }
#services .qr-builder-section .qr-builder-store-copy .title.title-display-full,
.qr-section-modal .qr-builder-store-copy .title.title-display-full {
    white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip;
}
#services .qr-builder-section .qr-builder-store-copy .title.title-display-truncate,
.qr-section-modal .qr-builder-store-copy .title.title-display-truncate {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qr-builder-store-copy .title-display-truncate [data-grid-title-text] {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#services .qr-builder-section .has-grid-title-background .qr-builder-store-copy { padding: 0; }
#services .qr-builder-section .qr-builder-store-categories { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#services .qr-builder-section .qr-builder-store-visual {
    border-radius: var(--section-image-radius, var(--qr-card-radius)); box-shadow: var(--section-image-shadow, none);
}
#services .qr-builder-section .qr-builder-store-visual img { object-fit: var(--section-image-fit, contain); border-radius: var(--section-image-radius, var(--qr-card-radius)); }
#services .qr-builder-section .image-display-full .qr-builder-store-visual,
#services .layout-featured .qr-builder-store-card.is-featured .qr-builder-store-visual {
    max-width: none; width: 100%;
}
#services .qr-builder-section .image-display-full .qr-builder-store-visual picture,
#services .layout-featured .qr-builder-store-card.is-featured .qr-builder-store-visual picture { padding: 0; }
#services .qr-builder-section .image-display-full .qr-builder-store-visual img,
#services .layout-featured .qr-builder-store-card.is-featured .qr-builder-store-visual img {
    max-width: none; max-height: none; width: 100%; height: 100%; border-radius: inherit;
}
// A colored title bar and its photo share one continuous card, including inset layouts.
#services .qr-builder-section .has-grid-title-background .qr-builder-store-visual {
    max-width: none; width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none;
}
#services .qr-builder-section .has-grid-title-background .qr-builder-store-visual picture {
    position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; box-sizing: border-box;
}
#services .qr-builder-section .has-grid-title-background .qr-builder-store-visual img {
    width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0;
}
#services .qr-builder-section .layout-logos { min-width: 0; }
#services .layout-logos .qr-builder-store-visual {
    width: 100%; aspect-ratio: 1 !important; height: auto; border-radius: 50%; padding: 0;
}
#services .layout-logos .qr-builder-store-visual picture {
    position: absolute; inset: 0; width: 100%; height: 100%; padding: 6px; box-sizing: border-box; border-radius: 50%; overflow: hidden;
}
#services .layout-logos .qr-builder-store-visual img {
    width: 100%; height: 100%; max-width: none; max-height: none; object-fit: var(--section-image-fit, contain); border-radius: 50%;
}
.layout-mosaic .qr-builder-store-layout { grid-template-columns: repeat(var(--mosaic-columns), minmax(0, 1fr)); align-items: start; grid-auto-flow: row; }
.layout-mosaic .qr-builder-store-card:nth-child(5n + 1) { grid-column: span var(--mosaic-wide-span); }
#services .layout-mosaic .qr-builder-store-visual { aspect-ratio: 1; max-width: none; width: 100%; }
#services .layout-mosaic .qr-builder-store-card:nth-child(5n + 1) .qr-builder-store-visual { aspect-ratio: 2 / 1; }
@media (max-width: 600px) {
    .layout-mosaic .qr-builder-store-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .layout-mosaic .qr-builder-store-card:nth-child(5n + 1) { grid-column: 1 / -1; }
}
#services .layout-list .qr-builder-store-card { border-bottom: 1px solid rgba(120,130,140,.15); padding: 10px 0; }
#services .layout-list .qr-builder-store-copy { text-align: start; padding: 5px 8px; min-width: 0; }
#services .layout-list .qr-builder-store-visual { box-shadow: none; }
#services .layout-list .qr-builder-card-arrow { display: none; }