/**
 * The shop in its own frame (Catalogusmodus > Eigen opmaak,
 * CatalogModeService): no header or footer of the site, only a white bar
 * with the logo of the domain - like the bar on top of the order flow
 * (order-flow.css .drk-flow-topbar), but with nothing else in it.
 *
 * The card page uses the order page's shell under it (order-page.css,
 * body.drk-pp--shell-focus); data-drk-focusbar on the bar is what
 * order-page.js measures to put the card and the column right below it.
 */

body.drk-shop-shell {
    margin: 0;
    background: var(--wa-ground, var(--drk-menu, #F7F1E7));
}

.wa.drk-shopbar {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 24px;
    box-sizing: border-box;
    background: var(--wa-white, #fff);
    border-bottom: 1px solid var(--wa-line, #E4D9C8);
    box-shadow: 0 6px 18px -16px rgba(44, 37, 32, .5);
}
.wa.drk-shopbar .drk-shopbar-logo {
    display: inline-flex;
    align-items: center;
    color: var(--wa-ink, #2C2520);
    font-weight: 700;
    text-decoration: none;
}
/* A fixed height, the width following: an SVG logo with only a viewBox has
   no size of its own. */
.drk-shopbar-logo img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    object-position: left center;
}

/* The catalogue and the other pages: the full width under the bar. */
.drk-shop-main { display: block; }
.drk-shop-page { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
.drk-shop-page-title {
    margin: 0 0 20px;
    font-family: var(--wa-display, 'Playfair Display', Georgia, serif);
    font-size: 30px;
    color: var(--wa-ink, #2C2520);
}

@media (max-width: 849px) {
    .wa.drk-shopbar { height: 56px; padding: 0 14px; }
    .drk-shopbar-logo img { height: 32px; }
}

/* A card in the frame: the box with "Ontwerp personaliseren" stays in reach
   at the bottom of the right column while the options scroll, the way the
   order page keeps its total and button there (order-page.css .drk-pp-actions).
   Sticky inside its own panel, which runs down most of the column. */
@media (min-width: 850px) {
    body.drk-shop-shell--product .product-info .wa-pricebox {
        position: sticky;
        bottom: 14px;
        z-index: 3;
        box-shadow: 0 -10px 26px -18px rgba(44, 37, 32, .45), var(--wa-shadow-sm, 0 8px 22px -14px rgba(44, 37, 32, .35));
    }
}