/* Business pages (/sala/ime, /katering/ime...), the directory (/katalog) and each type's listing. Veseljko's colours and
   font, compact type: these pages are read by couples comparing many businesses, often on a phone. */

.bp-wrap {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 992px) {
    .bp-wrap {
        padding-inline: 32px;
    }
}

.bp-page,
.bp-directory {
    background: var(--bg);
    padding-bottom: 3rem;
}

.bp-muted {
    color: var(--muted);
}

.bp-small {
    font-size: .86rem;
}

.bp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1.15rem;
    min-height: 42px;
    font-size: .92rem;
    text-decoration: none;
    white-space: nowrap;
}

    .bp-button .material-symbols-outlined {
        font-size: 1.15rem;
    }

    .bp-button svg {
        width: 1.15rem;
        height: 1.15rem;
        fill: currentColor;
    }

/* WhatsApp keeps its own green on the mark; the button stays the page's. */
.bp-whatsapp svg,
.bp-contact-whatsapp svg {
    fill: #1fa855;
}

.bp-contact-whatsapp svg {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: .05rem;
}

/* ── Owner's preview ─────────────────────────────────────────────────────────── */

.bp-preview-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    padding: .7rem 16px;
    background: #fff4d6;
    color: #5b4310;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
}

    .bp-preview-bar a {
        color: #51366b;
        font-weight: 750;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* An example page (/primjer/...) says so above everything, in Veseljko's colours. */
.bp-example-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .9rem;
    padding: .75rem 16px;
    background: linear-gradient(90deg, #e4d8f3 0%, #f6dcd6 100%);
    color: var(--ink);
    font-size: .92rem;
    text-align: center;
}

    .bp-example-bar > .material-symbols-outlined {
        color: #8a4fff;
        font-size: 20px;
    }

    .bp-example-bar strong {
        font-weight: 750;
    }

    .bp-example-bar a {
        color: #51366b;
        font-weight: 750;
        white-space: nowrap;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* ── Header: cover, logo, name ───────────────────────────────────────────────── */

.bp-cover {
    /* The banner's height, also what a zoomed-out cover is sized from. */
    --cover-h: clamp(200px, 30vw, 420px);
    position: relative;
    height: var(--cover-h);
    overflow: hidden;
    background: linear-gradient(120deg, #c9b6e4 0%, #e9c6d6 55%, #f6d3a2 100%);
}

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

    .bp-cover::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 40%;
        background: linear-gradient(180deg, transparent, rgba(53, 39, 71, .18));
        pointer-events: none;
    }

    /* No cover and only tall photos: the first one whole, on a blurred and darkened copy of itself (2026-11-08). */
    .bp-cover.is-standing {
        background: #2d2438;
    }

        .bp-cover.is-standing .bp-cover-blur {
            position: absolute;
            inset: -32px;
            width: calc(100% + 64px);
            height: calc(100% + 64px);
            object-fit: cover;
            filter: blur(24px) brightness(.7) saturate(1.1);
        }

        .bp-cover.is-standing .bp-cover-whole {
            position: relative;
            object-fit: contain;
        }

    /* A cover its owner made smaller for a computer (the owner, 2026-11-09: "zoom out for banner for desktop"): the picture
       between all of it (--zoom 0) and the banner filled (1), kept round its focus point (--fx, --fy) as object-position
       would, on a blurred copy of itself. A phone's banner is always filled. The same sizes as the editor's preview. */
    .bp-cover.is-zoomed .bp-cover-blur {
        display: none;
    }

    @media (min-width: 768px) {
        .bp-cover.is-zoomed {
            container-type: inline-size;
            background: #2d2438;
        }

            .bp-cover.is-zoomed .bp-cover-blur {
                display: block;
                position: absolute;
                inset: -32px;
                width: calc(100% + 64px);
                height: calc(100% + 64px);
                object-fit: cover;
                filter: blur(24px) brightness(.75) saturate(1.1);
            }

            .bp-cover.is-zoomed .bp-cover-photo {
                --contain-w: min(100cqw, var(--cover-h) * var(--ar));
                --fill-w: max(100cqw, var(--cover-h) * var(--ar));
                --photo-w: calc(var(--contain-w) + var(--zoom) * (var(--fill-w) - var(--contain-w)));
                position: absolute;
                left: calc((100cqw - var(--photo-w)) * var(--fx));
                top: calc((var(--cover-h) - var(--photo-w) / var(--ar)) * var(--fy));
                width: var(--photo-w);
                max-width: none;
                height: calc(var(--photo-w) / var(--ar));
                object-fit: fill;
            }
    }

    .bp-cover.is-empty::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .35), transparent 45%);
    }

.bp-head {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: -64px;
    padding: 1.25rem 1.5rem;
    background: var(--white);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(53, 39, 71, .12);
}

.bp-logo {
    align-self: start;
    width: 104px;
    height: 104px;
    margin-top: -52px;
    border: 4px solid var(--white);
    border-radius: 24px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 10px 28px rgba(53, 39, 71, .16);
}

    .bp-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* No logo yet: the Veseljko boy, round, on a soft tile. */
    .bp-logo.is-placeholder,
    .bp-card-logo.is-placeholder {
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #fbf8ff 0%, #fff4f1 100%);
    }

        .bp-logo.is-placeholder img,
        .bp-card-logo.is-placeholder img {
            width: 92%;
            height: 92%;
            object-fit: contain;
        }

.bp-head-text h1 {
    max-width: none;
    margin: .15rem 0 .25rem;
    font-size: clamp(1.45rem, 2.3vw, 2.05rem);
    font-weight: 800;
}

.bp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
}

    .bp-crumbs a {
        color: #6b51a3;
        text-decoration: none;
    }

        .bp-crumbs a:hover {
            text-decoration: underline;
        }

.bp-kind {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0;
    color: #6b51a3;
    font-size: .92rem;
    font-weight: 700;
}

    .bp-kind .material-symbols-outlined {
        font-size: 1.15rem;
    }

.bp-dot {
    color: #b3a3c9;
}

/* The badges (the owner, 2026-11-07): "Potvrdio vlasnik" and "Veseljko preporuča", each its own pill. One light gradient
   runs through both: lavender for the owner's, pink into peach for Veseljko's. */
.bp-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    width: max-content;
    max-width: 100%;
    padding: .2rem .65rem .2rem .3rem;
    border: 0;
    border-radius: 999px;
    color: #4b2e73;
    font: inherit;
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

    .bp-badge img {
        flex: none;
        width: 18px;
        height: 18px;
    }

.bp-badge-owner {
    background: linear-gradient(90deg, #e7dbf8 0%, #f1dcf1 100%);
}

.bp-badge-recommended {
    background: linear-gradient(90deg, #f3dcee 0%, #fde2cc 100%);
}

/* On a card: Veseljko's on the photo's lower right corner, the owner's beside the logo, so neither adds height. */
.bp-badge.is-on-photo {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    padding: .25rem .7rem .25rem .3rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(53, 39, 71, .22);
}

    .bp-badge.is-on-photo img {
        width: 20px;
        height: 20px;
    }

.bp-badge.is-corner {
    position: absolute;
    top: .55rem;
    right: 1rem;
}

/* Cards: the badges are their pictures alone, together on the photo's upper right (the owner, 2026-11-08: "on cards use
   short badge, on list leave it as it is"). Each view shows only its own, so a screen reader hears each badge once. */
.bp-card-badges {
    position: absolute;
    top: .7rem;
    right: .7rem;
    display: flex;
    gap: .3rem;
}

    .bp-card-badges img {
        width: 30px;
        height: 30px;
        padding: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 4px 14px rgba(53, 39, 71, .22);
    }

.bp-cards:not(.is-list) .bp-badge.is-on-photo,
.bp-cards:not(.is-list) .bp-badge.is-on-photo-top,
.bp-cards:not(.is-list) .bp-badge.is-corner,
.bp-cards.is-list .bp-card-badges {
    display: none;
}

/* On the business page: two small icons beside the name. A tap or a hover opens a bubble saying what each means. */
.bp-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .55rem;
}

    .bp-title h1 {
        margin-bottom: 0;
    }

.bp-title-badges {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.bp-badge-icon {
    position: relative;
    display: inline-flex;
}

.bp-badge-dot {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

    .bp-badge-dot img {
        width: 28px;
        height: 28px;
    }

    .bp-badge-dot:focus-visible {
        outline: 2px solid #8f73c7;
        outline-offset: 1px;
    }

.bp-badge-tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 20;
    display: none;
    width: max-content;
    max-width: min(300px, calc(100vw - 32px));
    padding: .65rem .8rem;
    border-radius: 14px;
    background: var(--ink);
    color: var(--white);
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 12px 28px rgba(53, 39, 71, .24);
    transform: translateX(calc(-50% + var(--tip-shift, 0px)));
}

    .bp-badge-tip strong {
        display: block;
        margin-bottom: .15rem;
        font-weight: 800;
    }

    .bp-badge-tip a {
        display: inline-block;
        margin-top: .3rem;
        color: #f6d3a2;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.bp-badge-icon:hover .bp-badge-tip,
.bp-badge-icon:focus-within .bp-badge-tip,
.bp-badge-icon.is-open .bp-badge-tip {
    display: block;
}

.bp-tagline {
    margin: .45rem 0 0;
    max-width: 62ch;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.bp-head-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

    .bp-facts li {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .38rem .8rem;
        border-radius: 999px;
        background: var(--white);
        box-shadow: 0 4px 14px rgba(53, 39, 71, .07);
        font-size: .86rem;
        font-weight: 650;
    }

        .bp-facts li .material-symbols-outlined {
            font-size: 1.05rem;
            color: #8064b4;
        }

/* ── Body ────────────────────────────────────────────────────────────────────── */

.bp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.bp-main {
    display: grid;
    gap: 1.25rem;
}

/* It scrolls with the page: the inquiry form is too tall to follow the reader around. */
.bp-side {
    display: grid;
    gap: 1rem;
}

.bp-section,
.bp-card {
    padding: 1.35rem 1.5rem;
    background: var(--white);
    border: 1px solid rgba(53, 39, 71, .06);
    border-radius: 20px;
    box-shadow: 0 8px 26px rgba(53, 39, 71, .05);
}

    .bp-section h2,
    .bp-card h2 {
        margin: 0 0 .85rem;
        font-size: 1.12rem;
        font-weight: 800;
    }

.bp-subtitle {
    margin: 1.2rem 0 .6rem;
    font-size: .95rem;
    font-weight: 750;
}

.bp-prose p {
    margin: 0 0 .85rem;
    font-size: .97rem;
    line-height: 1.7;
    white-space: pre-line;
}

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

.bp-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* Rows fill themselves: a photo left over at the end grows into the row's whole width instead of standing alone. */
    .bp-gallery li {
        flex: 1 1 210px;
        height: clamp(150px, 14vw, 200px);
    }

        .bp-gallery li:first-child {
            flex-basis: 100%;
            height: clamp(220px, 30vw, 400px);
        }

.bp-gallery-item {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #efe9f7;
    cursor: zoom-in;
}

.bp-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.bp-gallery-item:hover img,
.bp-gallery-item:focus-visible img {
    transform: scale(1.04);
}

.bp-services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .bp-services li {
        display: flex;
        align-items: flex-start;
        gap: .45rem;
        font-size: .93rem;
        font-weight: 550;
    }

        .bp-services li .material-symbols-outlined {
            flex-shrink: 0;
            font-size: 1.15rem;
            color: #8f73c7;
            font-variation-settings: "FILL" 1, "wght" 500;
        }

.bp-pills,
.bp-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .bp-pills li,
    .bp-amenities li {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .36rem .75rem;
        border-radius: 999px;
        background: rgba(201, 182, 228, .22);
        color: #51366b;
        font-size: .85rem;
        font-weight: 650;
    }

        .bp-pills .material-symbols-outlined,
        .bp-amenities .material-symbols-outlined {
            font-size: 1.05rem;
        }

.bp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    margin: 0;
}

    .bp-stats div {
        padding: .8rem 1rem;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(201, 182, 228, .2), rgba(246, 211, 162, .2));
    }

    .bp-stats dt {
        color: var(--muted);
        font-size: .78rem;
        font-weight: 650;
    }

    .bp-stats dd {
        margin: .1rem 0 0;
        font-size: 1.25rem;
        font-weight: 800;
    }

.bp-halls {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .bp-halls li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .15rem 1rem;
        padding: .7rem .9rem;
        border: 1px solid var(--line);
        border-radius: 14px;
    }

        .bp-halls li > span {
            display: flex;
            flex-wrap: wrap;
            gap: .2rem .8rem;
            color: var(--muted);
            font-size: .86rem;
            font-weight: 600;
            justify-content: flex-end;
        }

        .bp-halls small {
            grid-column: 1 / -1;
            color: var(--muted);
        }

/* ── Side: contact, map, inquiry ─────────────────────────────────────────────── */

.bp-contact {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .92rem;
}

    .bp-contact li {
        display: flex;
        gap: .6rem;
        align-items: flex-start;
        overflow-wrap: anywhere;
    }

        .bp-contact li > .material-symbols-outlined {
            flex-shrink: 0;
            margin-top: .05rem;
            color: #8064b4;
            font-size: 1.2rem;
        }

    .bp-contact small {
        display: block;
        color: var(--muted);
    }

    .bp-contact a {
        color: #51366b;
        font-weight: 650;
        text-decoration: none;
    }

        .bp-contact a:hover {
            text-decoration: underline;
        }

.bp-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.bp-social {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: #f4f0fa;
    color: #51366b;
    font-size: .84rem;
    font-weight: 650;
    text-decoration: none;
}

    .bp-social svg {
        width: 1.05rem;
        height: 1.05rem;
        fill: currentColor;
    }

    .bp-social:hover {
        background: #ebe3f6;
    }

.bp-map-card {
    padding: .5rem;
    overflow: hidden;
}

.bp-map {
    position: relative;
    height: 240px;
    border-radius: 14px;
    overflow: hidden;
    background: #ece7f3;
    z-index: 0;
}

.bp-map-wait {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: .85rem;
}

.bp-map-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4rem .8rem;
    padding: .6rem .5rem .3rem;
    font-size: .85rem;
}

    .bp-map-links a {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        color: #51366b;
        font-weight: 650;
        text-decoration: none;
    }

        .bp-map-links a:hover {
            text-decoration: underline;
        }

        .bp-map-links .material-symbols-outlined {
            font-size: 1.1rem;
        }

.bp-map-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #51366b;
    font-weight: 700;
    text-decoration: none;
}

.bp-pin {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #8f73c7, #f3a7a0);
    border: 3px solid var(--white);
    box-shadow: 0 6px 16px rgba(53, 39, 71, .35);
}

    .bp-pin span {
        transform: rotate(45deg);
        color: var(--white);
        font-weight: 800;
        font-size: .95rem;
    }

.bp-form {
    display: grid;
    gap: .65rem;
}

.bp-field {
    display: grid;
    gap: .25rem;
    margin: 0;
    font-size: .84rem;
    font-weight: 650;
}

    .bp-field small {
        color: var(--muted);
        font-weight: 500;
    }

    .bp-field input,
    .bp-field select,
    .bp-field textarea {
        width: 100%;
        padding: .55rem .75rem;
        border: 1px solid rgba(53, 39, 71, .18);
        border-radius: 12px;
        background: #fdfcff;
        color: var(--ink);
        font-size: .95rem;
        font-weight: 500;
    }

        .bp-field input:focus,
        .bp-field select:focus,
        .bp-field textarea:focus {
            outline: none;
            border-color: #a892d6;
            box-shadow: 0 0 0 3px rgba(168, 146, 214, .25);
        }

    .bp-field.has-error input,
    .bp-field.has-error textarea,
    .bp-field.has-error select {
        border-color: #c2414b;
    }

    .bp-field .bp-error {
        color: #b3262f;
        font-size: .8rem;
        font-weight: 600;
    }

.bp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.bp-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bp-form-error {
    margin: 0;
    color: #b3262f;
    font-size: .86rem;
    font-weight: 600;
}

.bp-submit {
    width: 100%;
}

.bp-fineprint {
    margin: 0;
    color: var(--muted);
    font-size: .76rem;
    text-align: center;
}

    .bp-fineprint a {
        color: inherit;
    }

.bp-sent {
    display: grid;
    justify-items: center;
    gap: .4rem;
    padding: 1rem 0 .5rem;
    text-align: center;
}

    .bp-sent .material-symbols-outlined {
        font-size: 2.6rem;
        color: #8f73c7;
    }

    .bp-sent p {
        margin: 0;
    }

.bp-more {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.bp-more-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1.1rem;
    border-radius: 16px;
    background: var(--white);
    color: #51366b;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(53, 39, 71, .06);
}

    .bp-more-link:hover {
        box-shadow: 0 10px 24px rgba(53, 39, 71, .1);
    }

.bp-mobile-bar {
    display: none;
}

/* An example's buttons that would call or open WhatsApp: the same look, and a note instead. */
.bp-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

button.bp-button {
    cursor: pointer;
}

.bp-example-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    z-index: 60;
    width: max-content;
    max-width: min(92vw, 480px);
    margin: 0;
    padding: .8rem 1.1rem;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    font-size: .92rem;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 12px 30px rgba(53, 39, 71, .25);
    opacity: 0;
    transform: translate(-50%, .75rem);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

    .bp-example-toast.is-shown {
        opacity: 1;
        transform: translate(-50%, 0);
    }

/* Where an example leads: what this kind of business gets, and the other examples. */
.bp-example-more {
    margin-top: 2.5rem;
}

.bp-example-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3.5vw, 2.8rem);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(201, 182, 228, .55), rgba(243, 167, 160, .34));
}

    .bp-example-cta-copy {
        flex: 1 1 420px;
        max-width: 760px;
    }

        .bp-example-cta-copy h2 {
            margin: 0;
            color: var(--ink);
            font-size: clamp(1.4rem, 2.2vw, 1.9rem);
            line-height: 1.15;
        }

        .bp-example-cta-copy p:last-child {
            margin: .6rem 0 0;
            color: var(--ink);
        }

.bp-example-eyebrow {
    margin: 0 0 .4rem;
    color: #51366b;
    font-size: .8rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bp-example-others {
    margin: 1.75rem 0 0;
    color: var(--muted);
    font-weight: 600;
}

.bp-example-others + .bp-more {
    margin-top: .75rem;
}

.bp-turnstile {
    min-height: 65px;
}

/* ── Lightbox ────────────────────────────────────────────────────────────────── */

/* Pinned to the visible screen (inset 0), not 100vw/100vh: on a phone 100vh is taller than what shows, so the viewer hung
   below the screen and sat off centre in Firefox (the owner, 2026-11-10). Swipes stay inside it, and the page behind does
   not scroll while it is open (html.bp-dialog-open, set by business-profile.js). */
.bp-lightbox {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(20, 14, 28, .94);
    color: var(--white);
}

    .bp-lightbox[open] {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) 64px;
        grid-template-rows: minmax(0, 1fr);
        align-items: center;
    }

    .bp-lightbox::backdrop {
        background: rgba(20, 14, 28, .6);
    }

    .bp-lightbox figure {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: .75rem;
        min-width: 0;
        margin: 0;
        max-height: 100%;
        padding: 3.5rem 0 1.5rem;
    }

    .bp-lightbox img {
        max-width: 100%;
        max-height: calc(100vh - 7rem);
        max-height: calc(100dvh - 7rem);
        object-fit: contain;
        border-radius: 8px;
    }

/* A window open on a business page (photo viewer, price list): the page behind stays where it is. */
html.bp-dialog-open,
html.bp-dialog-open body {
    overflow: hidden;
}

html.bp-dialog-open {
    scrollbar-gutter: stable;
}

    .bp-lightbox figcaption {
        max-width: 70ch;
        font-size: .92rem;
        text-align: center;
        opacity: .9;
    }

.bp-lightbox-close,
.bp-lightbox-nav {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: auto;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: var(--white);
    cursor: pointer;
}

.bp-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

    .bp-lightbox-close:hover,
    .bp-lightbox-nav:hover {
        background: rgba(255, 255, 255, .24);
    }

/* ── Directory ───────────────────────────────────────────────────────────────── */

.bp-directory {
    padding-top: 2.25rem;
}

    /* The lists differ in length; a scrollbar that comes and goes would move everything sideways between them. */
    html:has(.bp-directory) {
        scrollbar-gutter: stable;
    }

/* Every list's header keeps one height, so the search and the tabs stay where they are when a tab or filter changes
   the heading (the owner, 2026-11-07): one line for the heading from tablet width (two kept on phones, where most
   wrap), the place on the same line, and two lines kept for the opening words. */
.bp-directory-head h1 {
    /* The site's headings stop at 730 px; here the whole width is the heading's, so even the longest fits one line. */
    max-width: none;
    margin: .5rem 0 .4rem;
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
    line-height: 1.15;
}

@media (max-width: 767.98px) {
    .bp-directory-head h1 {
        min-height: 2.3em;
    }
}

.bp-place {
    margin-left: .35em;
    color: #8064b4;
    font-size: .6em;
    font-weight: 750;
    white-space: nowrap;
}

    .bp-place::before {
        content: "· ";
    }

.bp-lead {
    max-width: 70ch;
    /* Phones: the three lines the longest openings take. */
    min-height: 4.5em;
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 576px) {
    .bp-lead {
        min-height: 3em;
    }
}

/* While the next list loads in place, and as it arrives (business-directory.js). */
.bp-directory.is-loading .bp-cards,
.bp-directory.is-loading .bp-empty,
.bp-directory.is-loading .bp-count-row {
    opacity: .55;
    transition: opacity .15s ease;
}

.bp-directory.is-arriving .bp-cards,
.bp-directory.is-arriving .bp-empty,
.bp-directory.is-arriving .bp-count-row {
    animation: bp-arrive .2s ease-out;
}

@keyframes bp-arrive {
    from {
        opacity: .55;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bp-directory.is-arriving .bp-cards,
    .bp-directory.is-arriving .bp-empty,
    .bp-directory.is-arriving .bp-count-row {
        animation: none;
    }
}

/* One box for what people type (the owner, 2026-11-08: "simpler, by people just typing"). */
.bp-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 860px;
    padding: .4rem;
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(53, 39, 71, .1);
}

.bp-search-field {
    display: flex;
    flex: 1;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    margin: 0;
    padding-left: 1rem;
    color: #8f73c7;
}

    .bp-search-field input {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        border: 0;
        background: transparent;
        color: var(--ink);
        font-size: 1.05rem;
        outline: none;
    }

        .bp-search-field input::placeholder {
            color: #8b819a;
        }

    .bp-search .bp-button {
        flex: none;
        min-height: 50px;
        padding: 0 1.7rem;
        border-radius: 999px;
        font-size: 1rem;
    }

.bp-search-select {
    margin: 0;
}

    /* The place search (place-picker.js) looks like the selects beside it. */
    .bp-search .place-picker,
    .bp-search .place-picker-input,
    .bp-filters-form .place-picker,
    .bp-filters-form .place-picker-input {
        height: 100%;
    }

    .bp-search .place-picker-input,
    .bp-filters-form .place-picker-input {
        width: 100%;
        min-height: 42px;
        padding: 0 .9rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #faf8fd;
        color: var(--ink);
        font-size: .9rem;
        font-weight: 600;
        outline: none;
    }

        .bp-search .place-picker-input:focus,
        .bp-filters-form .place-picker-input:focus {
            border-color: #8064b4;
        }

    .bp-search .place-picker-list,
    .bp-filters-form .place-picker-list {
        min-width: 260px;
        text-align: left;
    }

.bp-related {
    display: grid;
    gap: 1.1rem;
    margin: 2rem 0 0;
    padding: 1.25rem 1.4rem;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(53, 39, 71, .07);
}

    .bp-related h2 {
        margin: 0 0 .55rem;
        color: var(--ink);
        font-size: 1rem;
        font-weight: 750;
    }

    .bp-related p {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin: 0;
    }

.bp-widened {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: .9rem;
}

    .bp-widened .material-symbols-outlined {
        font-size: 1.15rem;
        color: #6b51a3;
    }

    /* The browser's own arrow sat against the rounded edge (the owner: "going all the way right"), so the select draws
       its own, as far in from the edge as the text is from the other side. */
    .bp-search-select select,
    .bp-filters-form select {
        width: 100%;
        height: 100%;
        min-height: 42px;
        padding: 0 2.6rem 0 1rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #faf8fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23352747' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 1rem center / 14px 14px;
        color: var(--ink);
        font-size: .9rem;
        font-weight: 600;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }

/* The searches people make most, under the search: they wrap, never cut off at the side. */
.bp-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: .9rem 0 0;
}

.bp-popular-label {
    margin-right: .1rem;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 650;
}

/* What is in force, as chips that take it away, and the Filteri panel beside them. */
.bp-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin: 1.4rem 0 .9rem;
}

.bp-active {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .6rem;
    min-height: 42px;
}

/* A chip of what is in force: lightly tinted, with the cross that takes it away. */
.bp-chip.is-on {
    border-color: rgba(143, 115, 199, .45);
    background: #f3edfb;
}

    .bp-chip.is-on .material-symbols-outlined {
        margin-right: -.2rem;
        color: #8f73c7;
        font-size: 1.05rem;
    }

.bp-clear {
    color: #8064b4;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bp-filters-panel {
    position: relative;
    /* The site hides what overflows a details element (its accordions); this one opens a panel below. */
    overflow: visible !important;
}

/* The panel's button sits in the row with the count, before the list or cards switch. The row is a layer above the
   results, so the open panel covers them (the row fades in on its own when a list loads in place). */
.bp-count-row {
    position: relative;
    /* Above the results, under the site's header (20), which the row slides beneath when the page scrolls. */
    z-index: 10;
}

    .bp-count-row .bp-filters-panel {
        margin-left: auto;
    }

        .bp-count-row .bp-filters-panel ~ .bp-view-toggle {
            margin-left: 0;
        }

.bp-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 42px;
    padding: 0 1.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--white);
    color: #51366b;
    font-size: .95rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(53, 39, 71, .08);
    user-select: none;
}

    .bp-filters-toggle::-webkit-details-marker {
        display: none;
    }

    .bp-filters-toggle:hover,
    .bp-filters-panel[open] .bp-filters-toggle {
        border-color: rgba(143, 115, 199, .55);
    }

.bp-filters-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #8f73c7 0%, #c48fb2 100%);
    color: var(--white);
    font-size: .76rem;
}

.bp-filters-form {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
    width: min(580px, calc(100vw - 32px));
    padding: 1.15rem;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 18px 44px rgba(53, 39, 71, .16);
}

    .bp-filters-form .bp-field {
        display: grid;
        gap: .35rem;
        margin: 0;
        color: var(--muted);
        font-size: .82rem;
        font-weight: 700;
    }

        .bp-filters-form .bp-field:first-child {
            grid-column: 1 / -1;
        }

.bp-filters-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 1.1rem;
}

/* The kinds of services as pictures, while nothing is picked (the owner, 2026-11-08: "very very people friendly"). */
.bp-tiles {
    margin: 2rem 0 1.6rem;
}

.bp-tiles-title {
    margin: 0 0 .8rem;
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.bp-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .9rem;
}

.bp-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: var(--white);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(53, 39, 71, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .bp-tile:hover {
        color: var(--ink);
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(53, 39, 71, .13);
    }

    .bp-tile img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 1;
        object-fit: cover;
    }

.bp-tile-text {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .9rem .8rem;
}

.bp-tile-name {
    font-size: .98rem;
    font-weight: 750;
    line-height: 1.25;
}

.bp-tile-count {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 650;
    white-space: nowrap;
}

.bp-tile.is-extra {
    display: none;
}

.bp-tiles.is-open .bp-tile.is-extra {
    display: flex;
}

/* Ten on a desktop, two full rows of five (the owner, 2026-11-09: "display on desktop 10 by default"); eight where the
   rows are shorter, so none is left alone on a row. */
.bp-tile.is-wide {
    display: none;
}

.bp-tiles.is-open .bp-tile.is-wide {
    display: flex;
}

@media (min-width: 1200px) {
    .bp-tile-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .bp-tile.is-wide {
        display: flex;
    }

    .bp-tiles-more.is-narrow-only {
        display: none;
    }
}

.bp-tiles-more {
    margin-top: .9rem;
    padding: .55rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: #f3edfb;
    color: #51366b;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
}

    .bp-tiles-more:hover {
        background: #ebe1f8;
    }

.bp-tiles.is-open .bp-tiles-more {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .bp-tile {
        transition: none;
    }

        .bp-tile:hover {
            transform: none;
        }
}

.bp-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    background: var(--white);
    color: #51366b;
    font-size: .88rem;
    font-weight: 650;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(53, 39, 71, .06);
    border: 1px solid transparent;
}

    .bp-chip small {
        color: var(--muted);
        font-weight: 600;
    }

    .bp-chip:hover {
        border-color: rgba(168, 146, 214, .55);
    }

    .bp-chip.is-active {
        background: linear-gradient(90deg, #8f73c7 0%, #c48fb2 100%);
        color: var(--white);
    }

        .bp-chip.is-active small {
            color: rgba(255, 255, 255, .85);
        }

    .bp-chip.is-small {
        padding: .3rem .7rem;
        font-size: .82rem;
    }

.bp-count-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin: .25rem 0 .9rem;
}

/* What every visitor gets: no account, straight to the business, nothing in between. A light line, apart from the search. */
.bp-promise {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.2rem;
    margin: -.55rem 0 1.25rem;
    padding: 0;
    list-style: none;
}

    .bp-promise li {
        display: inline-flex;
        align-items: center;
        gap: .32rem;
        color: #51366b;
        font-size: .9rem;
        font-weight: 650;
    }

        .bp-promise li .material-symbols-outlined {
            color: #8f73c7;
            font-size: 1.15rem;
        }

.bp-promise-short {
    display: none;
}

/* List or cards. */
.bp-view-toggle {
    display: inline-flex;
    margin-left: auto;
    padding: 3px;
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 4px 14px rgba(53, 39, 71, .07);
}

.bp-view-button {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6b51a3;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}

    .bp-view-button .material-symbols-outlined {
        font-size: 1.15rem;
    }

    .bp-view-button[aria-pressed="true"] {
        background: linear-gradient(90deg, #8f73c7 0%, #c48fb2 100%);
        color: var(--white);
    }

    .bp-view-button:focus-visible {
        outline: 2px solid #8f73c7;
        outline-offset: 2px;
    }

@media (max-width: 575.98px) {
    .bp-view-label {
        display: none;
    }

    .bp-view-button {
        padding: .35rem .6rem;
    }
}

/* The type beside the town shows only in the list, where the photo has no room for it. */
.bp-card-kind {
    display: none;
}

    .bp-count-row .bp-count {
        margin: 0;
    }

.bp-understood {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 650;
}

.bp-chip.is-quiet {
    box-shadow: none;
    background: rgba(201, 182, 228, .25);
    pointer-events: none;
}

.bp-count {
    margin: .25rem 0 .9rem;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 600;
}

.bp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: var(--white);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(53, 39, 71, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .bp-card-link:hover,
    .bp-card-link:focus-visible {
        transform: translateY(-3px);
        box-shadow: 0 16px 36px rgba(53, 39, 71, .13);
    }

.bp-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: linear-gradient(120deg, #c9b6e4 0%, #e9c6d6 55%, #f6d3a2 100%);
}

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

    /* The picture never makes its frame taller than 16:10: a standing photo stretched the card (and every card in the
       row lost its line), since the frame's height followed the picture's own shape. */
    .bp-card-media > img {
        position: absolute;
        inset: 0;
    }

.bp-card-type {
    position: absolute;
    left: .7rem;
    top: .7rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #51366b;
    font-size: .76rem;
    font-weight: 750;
}

    .bp-card-type .material-symbols-outlined {
        font-size: .95rem;
    }

.bp-card-body {
    position: relative;
    display: grid;
    gap: .3rem;
    padding: 2.1rem 1.1rem 1.1rem;
}

.bp-card-logo {
    position: absolute;
    top: -28px;
    left: 1rem;
    width: 56px;
    height: 56px;
    border: 3px solid var(--white);
    border-radius: 16px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 6px 16px rgba(53, 39, 71, .14);
}

    .bp-card-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* A photo as the logo fills its square; a wide drawn logo stays whole (BusinessProfileImageRef.FillsSquare). */
.bp-logo.is-fill img,
.bp-card-logo.is-fill img {
    object-fit: cover;
}

/* A logo on a plain background (one colour all round its edge, or see-through) sits on a square of that colour: whole,
   so a wide drawn logo keeps its ends, or filling the square when its drawing fits in the middle
   (BusinessProfileImageRef.FillsSquare; the colour comes from the logo's edge). */
.bp-logo.is-plain,
.bp-card-logo.is-plain {
    background: var(--logo-bg, var(--white));
}

    .bp-logo.is-plain img,
    .bp-card-logo.is-plain img {
        object-fit: contain;
    }

    .bp-logo.is-plain.is-fill img,
    .bp-card-logo.is-plain.is-fill img {
        object-fit: cover;
    }

    /* A wide lettering that runs to its own ends keeps a little room from the frame. */
    .bp-logo.is-plain.is-padded img,
    .bp-card-logo.is-plain.is-padded img {
        box-sizing: border-box;
        padding: 6%;
    }



.bp-card-name {
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bp-card-place {
    display: flex;
    align-items: center;
    gap: .2rem;
    min-width: 0;
    min-height: 1.3rem;
    color: #6b51a3;
    font-size: .84rem;
    font-weight: 650;
}

.bp-card-place-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .bp-card-place .material-symbols-outlined {
        font-size: 1rem;
    }

.bp-card-tagline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.45em);
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

.bp-card-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: .3rem;
    min-height: 1.6rem;
    margin-top: .3rem;
    overflow: hidden;
}

    .bp-card-tags > span {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
        padding: .2rem .55rem;
        border-radius: 999px;
        background: #f4f0fa;
        color: #51366b;
        font-size: .76rem;
        font-weight: 650;
    }

        .bp-card-tags .material-symbols-outlined {
            font-size: .95rem;
        }

/* The list: one row per page, every row one height (the owner, 2026-11-07: "no shifts"). The photo on the left, the
   logo on its edge, then the name with the owner's badge, the type and town, and two lines of the short description. */
.bp-cards.is-list {
    grid-template-columns: 1fr;
    gap: .65rem;
}

    .bp-cards.is-list .bp-card-link {
        flex-direction: row;
        height: 124px;
    }

    .bp-cards.is-list .bp-card-media {
        flex: none;
        width: 190px;
        height: 100%;
        aspect-ratio: auto;
    }

    .bp-cards.is-list .bp-card-type {
        display: none;
    }

    .bp-cards.is-list .bp-card-body {
        flex: 1;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name badge"
            "place place"
            "tagline tagline";
        align-content: center;
        gap: .2rem .6rem;
        min-width: 0;
        padding: .7rem 1rem .7rem 2rem;
    }

    .bp-cards.is-list .bp-card-logo {
        top: 50%;
        left: -22px;
        width: 44px;
        height: 44px;
        border-width: 2px;
        border-radius: 12px;
        transform: translateY(-50%);
    }

    .bp-cards.is-list .bp-card-name {
        grid-area: name;
    }

    .bp-cards.is-list .bp-badge.is-corner {
        position: static;
        grid-area: badge;
        justify-self: end;
    }

    .bp-cards.is-list .bp-card-place {
        grid-area: place;
    }

    .bp-cards.is-list .bp-card-kind {
        display: inline;
        flex: none;
        margin-right: .35rem;
        color: var(--muted);
    }

        .bp-cards.is-list .bp-card-kind::after {
            margin-left: .35rem;
            color: #b3a3c9;
            content: "·";
        }

    .bp-cards.is-list .bp-card-tagline {
        grid-area: tagline;
        min-height: 0;
    }

    .bp-cards.is-list .bp-card-tags {
        display: none;
    }

    /* On the small photo Veseljko's badge is its medal alone; its name shows on hover. */
    .bp-cards.is-list .bp-badge.is-on-photo {
        top: .45rem;
        right: .45rem;
        bottom: auto;
        padding: .2rem;
    }

    .bp-cards.is-list .bp-badge.is-on-photo .bp-badge-text {
        display: none;
    }

@media (max-width: 575.98px) {
    .bp-cards.is-list .bp-card-link {
        height: 112px;
    }

    .bp-cards.is-list .bp-card-media {
        /* A little wider, so a landscape photo loses less at its sides (2026-11-08). */
        width: 120px;
    }

    .bp-cards.is-list .bp-card-body {
        padding: .55rem .75rem .55rem 1.55rem;
    }

    .bp-cards.is-list .bp-card-logo {
        left: -18px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .bp-cards.is-list .bp-card-name {
        font-size: .98rem;
    }

    .bp-cards.is-list .bp-card-tagline {
        font-size: .82rem;
    }

    /* On a phone the owner's badge is its seal alone, so the name keeps its room. */
    .bp-cards.is-list .bp-badge.is-corner {
        padding: .15rem;
    }

    .bp-cards.is-list .bp-badge.is-corner .bp-badge-text {
        display: none;
    }
}

.bp-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 3rem 1rem;
    border-radius: 20px;
    background: var(--white);
    text-align: center;
}

    .bp-empty > .material-symbols-outlined {
        font-size: 2.6rem;
        color: #a892d6;
    }

    .bp-empty h2 {
        margin: 0;
        font-size: 1.2rem;
    }

    .bp-empty p {
        margin: 0;
        color: var(--muted);
    }

    /* Ways out of an empty list: the type in all of Croatia, the place alone, or the three groups. */
    .bp-empty .bp-empty-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
        margin-top: .25rem;
    }

.bp-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin-top: 1.5rem;
}

.bp-page-link {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 .6rem;
    border-radius: 12px;
    background: var(--white);
    color: #51366b;
    font-weight: 700;
    text-decoration: none;
}

    .bp-page-link.is-current {
        background: linear-gradient(90deg, #8f73c7 0%, #c48fb2 100%);
        color: var(--white);
    }

    .bp-page-link.is-step {
        padding: 0 .9rem;
    }

.bp-page-gap {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 40px;
    color: var(--muted);
}

/* The numbers: two neighbours each side on a computer, one on a tablet or phone (the owner, 2026-11-09: a phone showed
   only "1 4 Sljedeća"). The markup carries both sets; each sits in the row as if it were not wrapped. */
.bp-page-numbers {
    display: contents;
}

    .bp-page-numbers.is-narrow {
        display: none;
    }

.bp-page-link.is-step .material-symbols-outlined {
    display: none;
    font-size: 1.4rem;
}

@media (max-width: 767.98px) {
    .bp-page-numbers.is-wide {
        display: none;
    }

    .bp-page-numbers.is-narrow {
        display: contents;
    }
}

/* A phone: arrows for the previous and next page and a little less room each, so "‹ 1 … 5 6 7 … 12 ›" fits one line. */
@media (max-width: 575.98px) {
    .bp-pages {
        gap: .25rem;
    }

    .bp-page-link {
        min-width: 36px;
        padding: 0 .45rem;
    }

        .bp-page-link.is-step {
            padding: 0 .35rem;
        }

            .bp-page-link.is-step .material-symbols-outlined {
                display: inline;
            }

    .bp-page-step-text {
        display: none;
    }

    .bp-page-gap {
        min-width: 14px;
    }
}

/* A town in short, from its own listings: three numbers, then the questions people ask. */
.bp-facts {
    /* A section of the catalogue is a row elsewhere; this box stacks its heading, numbers and questions. */
    display: block;
    margin: 2rem 0 0;
    padding: 1.3rem 1.4rem 1.1rem;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 10px 28px rgba(53, 39, 71, .07);
}

    .bp-facts h2 {
        margin: 0 0 .9rem;
        color: var(--ink);
        font-size: 1.1rem;
        font-weight: 800;
    }

.bp-facts-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

    .bp-facts-stats > div {
        display: flex;
        flex-direction: column;
        min-width: 120px;
        padding: .6rem .9rem;
        border-radius: 14px;
        background: #f6f1fc;
    }

    .bp-facts-stats strong {
        color: #51366b;
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .bp-facts-stats span {
        color: var(--muted);
        font-size: .82rem;
        font-weight: 650;
    }

.bp-facts-qa {
    display: grid;
    gap: .7rem;
    margin: 0;
}

    .bp-facts-qa dt {
        color: var(--ink);
        font-size: .95rem;
        font-weight: 750;
    }

    .bp-facts-qa dd {
        margin: .15rem 0 0;
        color: var(--muted);
        font-size: .93rem;
        line-height: 1.55;
    }

.bp-facts-more {
    margin: 1rem 0 0;
    font-size: .93rem;
    font-weight: 700;
}

/* A type's or an occasion's guide under its list (2026-11-08): readable text in two columns on wide screens, the prices in
   their own box, the questions opening one by one. */
.bp-guide {
    display: block;
    margin: 2rem 0 0;
    padding: 1.4rem 1.5rem 1.1rem;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 10px 28px rgba(53, 39, 71, .07);
}

    .bp-guide h2 {
        margin: 0 0 .6rem;
        color: var(--ink);
        font-size: 1.15rem;
        font-weight: 800;
    }

    .bp-guide .bp-guide-heading {
        margin-top: 1.5rem;
    }

    .bp-guide h3 {
        margin: 1.1rem 0 .45rem;
        color: var(--ink);
        font-size: 1rem;
        font-weight: 800;
    }

    .bp-guide p,
    .bp-guide li {
        color: var(--muted);
        font-size: .95rem;
        line-height: 1.6;
    }

    .bp-guide p {
        margin: 0 0 .65rem;
    }

    .bp-guide ul {
        margin: 0 0 .65rem;
        padding-left: 1.2rem;
    }

    .bp-guide li {
        margin: 0 0 .3rem;
    }

    .bp-guide .bp-guide-lead {
        color: var(--ink);
    }

.bp-guide-parts {
    display: grid;
    gap: 0 2.2rem;
}

@media (min-width: 992px) {
    .bp-guide-parts {
        grid-template-columns: 1fr 1fr;
    }
}

.bp-guide-prices {
    margin-top: .6rem;
    padding: 1rem 1.15rem .35rem;
    border-radius: 16px;
    background: #f6f1fc;
}

    .bp-guide-prices h3 {
        margin-top: 0;
    }

.bp-guide .bp-guide-range {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .45rem;
    color: var(--ink);
}

    .bp-guide-range strong {
        color: #51366b;
        font-size: 1.15rem;
        font-weight: 800;
    }

.bp-guide .bp-guide-note {
    font-size: .82rem;
}

/* The questions as the site's other FAQs show them (the owner, 2026-11-08: the letters touched the box). The site draws
   every details as a rounded box (style.css), so each question gets room inside it and a small gap from the next. */
.bp-guide-faq {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .4rem;
}

    .bp-guide-faq > h3 {
        margin-bottom: .1rem;
    }

    .bp-guide-faq details {
        padding: .7rem .9rem;
        border-radius: 14px;
    }

    .bp-guide-faq summary {
        color: var(--ink);
        font-size: .95rem;
        font-weight: 750;
        cursor: pointer;
    }

    .bp-guide-faq details p {
        margin: .45rem 0 0;
    }

.bp-guide-table {
    width: 100%;
    margin: .3rem 0 .7rem;
    border-collapse: collapse;
    font-size: .93rem;
}

    .bp-guide-table caption {
        padding: 0 0 .4rem;
        color: var(--ink);
        font-weight: 750;
        text-align: left;
        caption-side: top;
    }

    .bp-guide-table th,
    .bp-guide-table td {
        padding: .45rem .3rem;
        border-top: 1px solid #eee6f6;
        color: var(--muted);
        text-align: left;
        vertical-align: top;
    }

    .bp-guide-table th {
        font-weight: 700;
    }

/* A quiet line to Veseljko's own wedding tools, before the businesses' invitation. */
.bp-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.35rem 1.5rem;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 10px 28px rgba(53, 39, 71, .07);
}

    .bp-tools > div {
        flex: 1 1 420px;
    }

    .bp-tools h2 {
        margin: 0 0 .35rem;
        color: var(--ink);
        font-size: 1.1rem;
        font-weight: 800;
    }

    .bp-tools p {
        margin: 0;
        color: var(--muted);
        font-size: .95rem;
        line-height: 1.55;
    }

    .bp-tools .bp-tools-links {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
    }

/* After the tools line, the businesses' invitation sits closer. */
.bp-tools + .bp-join {
    margin-top: 1rem;
}

.bp-join {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.35rem 1.5rem;
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(201, 182, 228, .35), rgba(246, 211, 162, .35));
}

    .bp-join h2 {
        margin: 0 0 .25rem;
        font-size: 1.1rem;
    }

    .bp-join p {
        margin: 0;
        color: var(--muted);
        font-size: .92rem;
    }

/* ── Smaller screens ─────────────────────────────────────────────────────────── */

@media (max-width: 1099.98px) {
    .bp-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 991.98px) {
    .bp-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bp-head-actions {
        display: none;
    }

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

    .bp-side {
        position: static;
    }

    .bp-mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        gap: .5rem;
        padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -8px 24px rgba(53, 39, 71, .12);
        backdrop-filter: blur(8px);
    }

        .bp-mobile-bar .bp-button {
            flex: 1;
        }

        .bp-mobile-bar .bp-button.is-icon {
            flex: 0 0 auto;
            width: 48px;
            padding: 0;
        }

    .bp-page {
        padding-bottom: 5.5rem;
    }

    /* Above the bar of buttons at the bottom. */
    .bp-example-toast {
        bottom: calc(5.4rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 767.98px) {
    .bp-search {
        padding: .3rem;
    }

    .bp-search-field {
        padding-left: .7rem;
    }

        .bp-search-field input {
            min-height: 46px;
            font-size: 1rem;
        }

    .bp-search .bp-button {
        min-height: 46px;
        padding: 0 1.1rem;
    }

    /* The panel opens under the whole bar, full width. */
    .bp-filters-panel {
        position: static;
    }

    .bp-filters-form {
        left: 0;
        width: auto;
        grid-template-columns: 1fr;
    }

    .bp-gallery li {
        flex-basis: 130px;
        height: 130px;
    }

        .bp-gallery li:first-child {
            height: 220px;
        }
}

@media (max-width: 575.98px) {
    .bp-example-cta .bp-button {
        width: 100%;
    }

    .bp-example-bar {
        padding: .6rem 16px;
        font-size: .84rem;
    }

        .bp-example-bar > .material-symbols-outlined {
            display: none;
        }

    .bp-head {
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
        margin-top: -36px;
        padding: 1rem 1.1rem 1.15rem;
    }

    .bp-logo {
        width: 80px;
        height: 80px;
        margin-top: -48px;
        border-radius: 20px;
    }



    .bp-section,
    .bp-card {
        padding: 1.1rem 1.1rem;
    }

    .bp-field-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-lightbox[open] {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
    }

    .bp-halls li {
        grid-template-columns: minmax(0, 1fr);
    }

        .bp-halls li > span {
            justify-content: flex-start;
        }
}

/* Phones: the pictures swipe sideways, the next one showing at the edge. */
@media (max-width: 575.98px) {
    .bp-tile-grid {
        display: flex;
        gap: .7rem;
        padding-bottom: .4rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

        .bp-tile-grid::-webkit-scrollbar {
            display: none;
        }

    .bp-tile,
    .bp-tile.is-extra,
    .bp-tile.is-wide {
        display: flex;
        flex: 0 0 46%;
        scroll-snap-align: start;
    }

    .bp-tiles-more {
        display: none;
    }

    /* One row that slides sideways, every pill in it (the owner, 2026-11-08: no second row on a phone). */
    .bp-popular {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

        .bp-popular::-webkit-scrollbar {
            display: none;
        }

        .bp-popular .bp-chip,
        .bp-popular .bp-popular-label {
            flex: none;
            white-space: nowrap;
            scroll-snap-align: start;
        }
}

/* Phones (the owner, 2026-11-08: "a bit cluttered"): the opening words in two lines, every word still in the page for search
   engines (a town page repeats its numbers in its Ukratko box), and the promise in short words on one line. */
@media (max-width: 575.98px) {
    .bp-lead {
        display: -webkit-box;
        min-height: 3em;
        margin-bottom: 1.1rem;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .bp-promise {
        gap: .3rem .75rem;
    }

        .bp-promise li {
            font-size: .82rem;
        }

    .bp-promise-long {
        display: none;
    }

    .bp-promise-short {
        display: inline;
    }
}

/* ── Price list (Cjenik): a box in the side, the whole list in a window, on a phone a sheet from the bottom ── */

.bp-prices-preview {
    display: grid;
    gap: .35rem;
    margin: 0 0 .8rem;
    padding: 0;
    list-style: none;
}

    .bp-prices-preview li,
    .bp-prices-list li {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
    }

    .bp-prices-preview li span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--muted);
    }

    .bp-prices-preview strong,
    .bp-prices-list strong {
        flex: 0 0 auto;
        color: var(--ink);
        font-weight: 800;
        white-space: nowrap;
    }

.bp-prices-open {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border: 0;
    border-radius: 999px;
    background: #f1ebfa;
    color: #5b3e8f;
    font-weight: 750;
    cursor: pointer;
}

    .bp-prices-open:hover,
    .bp-prices-open:focus-visible {
        background: #e7ddf7;
    }

.bp-prices-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 30px 80px rgba(37, 26, 52, .3);
}

    .bp-prices-dialog::backdrop {
        background: rgba(37, 26, 52, .45);
    }

.bp-prices-sheet {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    padding: 1.2rem 1.4rem 1.4rem;
    overflow: auto;
}

.bp-prices-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

    .bp-prices-head h2 {
        margin: 0;
        font-size: 1.35rem;
    }

.bp-prices-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #f4f0fa;
    color: var(--ink);
    cursor: pointer;
}

.bp-prices-list {
    display: grid;
    gap: 0;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}

    .bp-prices-list li {
        padding: .7rem 0;
        border-bottom: 1px solid var(--line);
    }

        .bp-prices-list li:last-child {
            border-bottom: 0;
        }

    .bp-prices-list small {
        display: block;
        margin-top: .15rem;
        color: var(--muted);
        font-size: .82rem;
    }

.bp-prices-foot {
    margin: .9rem 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.bp-prices-inquiry {
    align-self: flex-start;
    margin-top: 1rem;
}

@media (max-width: 575.98px) {
    .bp-prices-dialog {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        margin: auto 0 0;
        border-radius: 22px 22px 0 0;
    }

        .bp-prices-dialog[open] {
            animation: bp-sheet-up .22s ease-out;
        }

    .bp-prices-inquiry {
        align-self: stretch;
        text-align: center;
    }
}

@keyframes bp-sheet-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bp-prices-dialog[open] {
        animation: none;
    }
}

/* "Istaknuto" (the owner, 2026-11-08): the paid boost, in the site's full button gradient so it never looks like the light
   editorial badges; on a card in the photo's top right corner, on the small list photo its arrow alone. */
.bp-badge-featured {
    background: linear-gradient(90deg, #8f73c7 0%, #f3a7a0 100%);
    color: #fff;
}

.bp-badge.is-on-photo-top {
    position: absolute;
    top: .7rem;
    right: .7rem;
    padding: .25rem .7rem .25rem .3rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(53, 39, 71, .22);
}

    .bp-badge.is-on-photo-top img {
        width: 20px;
        height: 20px;
    }

.bp-cards.is-list .bp-badge.is-on-photo-top {
    top: .45rem;
    left: .45rem;
    right: auto;
    padding: .2rem;
}

    .bp-cards.is-list .bp-badge.is-on-photo-top .bp-badge-text {
        display: none;
    }

/* A card picture far from its frame's shape shows whole on a blurred copy instead of losing its sides (the owner,
   2026-11-08: "Why is boss band cut out weirdly? They have nice pic"): only an extreme panorama in the phone list's
   nearly square frame. Every other picture fills its frame; a tall one is anchored at its upper third (Directory.cshtml). */
.bp-card-media {
    overflow: hidden;
}

    .bp-card-media .bp-card-blur {
        display: none;
    }

@media (max-width: 575.98px) {
    .bp-cards.is-list .bp-card-media.is-wide .bp-card-blur {
        display: block;
        position: absolute;
        inset: -16px;
        width: calc(100% + 32px);
        height: calc(100% + 32px);
        object-fit: cover;
        filter: blur(14px) brightness(.75);
    }

    .bp-cards.is-list .bp-card-media.is-wide .bp-card-photo {
        position: relative;
        object-fit: contain;
    }

}

/* ── A page that is no longer here (410, NoLongerHere.cshtml) ────────────────────── */

.bp-gone .bp-crumbs {
    padding-top: 1.25rem;
}

.bp-gone-head {
    max-width: 640px;
    margin: 2rem auto 2.5rem;
    text-align: center;
}

    .bp-gone-head h1 {
        max-width: none;
        margin: .85rem 0 .5rem;
        font-size: clamp(1.5rem, 3vw, 2.1rem);
        line-height: 1.2;
    }

    .bp-gone-head p {
        margin: 0;
    }

.bp-gone-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8f73c7, #F3A7A0);
    color: #fff;
    font-size: 2rem;
}

.bp-gone-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.bp-gone-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
}