/*
 * BM.Market product-card price styling.
 *
 * The price HTML is generated by Magento's price renderer, so the sale / old
 * price treatment can't be applied with Tailwind utility classes in the
 * template — it is targeted here by the renderer's own class names.
 *
 *   - discounted (special) price : red, bold
 *   - old price                  : black, regular weight, strikethrough
 */

/* ============================================================
 * BM.Market product card — per "bm cards design.md".
 * Compact default state; on hover (desktop) the card gains a shadow,
 * quick-actions appear top-right and a yellow add-to-cart footer reveals,
 * making the card *appear* to expand downward. The footer is an absolute
 * overlay so the card's grid box never changes — no row jump.
 * ============================================================ */

.bm-product-card {
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    transition: box-shadow .25s ease, border-radius .25s ease;
}

/* ---- Media: image + badge + quick-actions ---- */
.bm-card-media {
    position: relative;
    padding: 16px;
    background: #fff;
    border-radius: 10px 10px 0 0;
}
.bm-card-image,
.bm-card-image .product-image-container,
.bm-card-image .product-image-wrapper {
    display: block;
    width: 100%;
}
.bm-card-image img,
.bm-card-image .product-image-photo {
    width: 100% !important;
    height: 190px !important;
    object-fit: contain;
    margin: 0 auto;
    background: #fff;
}

.bm-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: var(--color-badge-sale);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 999px; /* kit: pill badge */
    letter-spacing: .01em;
}

.bm-card-quickactions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 16px;
}
.bm-card-quickactions button,
.bm-card-quickactions a {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: #111111;
    line-height: 0;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}
.bm-card-quickactions svg {
    width: 20px;
    height: 20px;
}
.bm-card-quickactions button:hover,
.bm-card-quickactions a:hover {
    color: var(--color-link);
}

/* ---- Body ---- */
.bm-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 16px 16px;
}
.bm-card-cat {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 12px 0 6px;
}
.bm-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 66px; /* reserve exactly 3 lines (3 × 22px) so cards align */
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #111111;
}
.bm-card-name:hover {
    color: var(--color-link);
}

/* Shared rating block (grid + list): stars + average + count, space reserved
   even without reviews so the price/actions line up across cards. */
.bm-card-rating,
.bm-list-card .bm-lc-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    font-size: 13px;
    margin-top: 10px;
}
/* One line, no wrapping (UI kit): a half-star renders an EXTRA svg (e.g. 4.5 →
   6 svgs), so on narrow cards the last star could drop to a second line. Keep
   the stars container + row nowrap and non-shrinking so all stars + value +
   count sit on one line. Kit star sizing/spacing unchanged. */
.bm-card-rating { flex-wrap: nowrap; }
.bm-card-stars { display: inline-flex; align-items: center; line-height: 0; flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; }
.bm-card-stars .rating-summary { display: inline-flex; align-items: center; margin: 0; flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; }
.bm-card-stars svg { width: 16px; height: 16px; color: #D1D5DB; flex-shrink: 0; }
/* Half-star: Hyvä wraps the fractional star in a <span> holding a 0×0 gradient-
   defs <svg> + the visible star. The generic rule above inflated that 0×0 defs
   svg to 16px, so the <span> held two 16px svgs and stacked them → the whole
   rating row wrapped. Keep the defs svg collapsed (gradient still resolves). */
.bm-card-stars svg[width="0"] { width: 0 !important; height: 0 !important; }
.bm-card-stars .rating-summary > span { display: inline-flex; align-items: center; }
.bm-card-stars svg.fill-current { color: #FBBF24; }
.bm-card-rating-val { font-weight: 600; color: #111827; flex-shrink: 0; white-space: nowrap; }
.bm-card-rating-count { color: #6B7280; flex-shrink: 0; white-space: nowrap; }

/* availability status (one) + optional rating, one row */
.bm-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 20px;
    font-size: 13px;
}
/* Kit .bm-pcard-status contract: 12px UPPERCASE, letter-spacing .02em
   (kit renders "IN STOCK" / "DELIVERY 1–3 DAYS"). */
.bm-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    flex-shrink: 0;
}
.bm-card-status.is-store { color: var(--color-instock); }
.bm-card-status.is-delivery { color: var(--color-delivery); }
.bm-card-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 14px;
    background: #D1D5DB;
}
.bm-card-rating { display: inline-flex; align-items: center; }
.bm-card-rating .rating-summary { margin: 0; }

.bm-card-divider {
    border: 0;
    border-top: 1px solid #EEEEEE;
    margin: 12px 0;
}

/* ---- Price ---- */
.bm-card-price .price-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}
.bm-card-price .price {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
}
.bm-card-price .special-price .price,
.bm-card-price .minimal-price .price {
    color: var(--color-sale);
    font-weight: 700;
}
.bm-card-price .old-price .price {
    font-size: 18px;
    font-weight: 500;
    color: #6B7280;
    text-decoration: line-through;
}
.bm-card-oos { margin-top: 10px; }

/* ---- Hover footer: full-width add-to-cart ---- */
.bm-card-cart {
    position: absolute;
    left: -1px;
    right: -1px;
    top: 100%;
    margin-top: -1px;
    z-index: 5;
    padding: 0 16px 16px;
    background: #fff;
    border: 1px solid #E8E8E8;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.bm-card-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: var(--color-cta);
    color: #111111;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
    border-radius: 8px;
    transition: background-color .2s ease;
}
.bm-card-cart-btn:hover { background: var(--color-cta-hover); }

.bm-card-quickactions {
    opacity: 0;
    transition: opacity .2s ease;
}

/* Desktop hover model */
@media (min-width: 1024px) {
    .bm-product-card:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        z-index: 10;
    }
    .bm-product-card:hover .bm-card-quickactions,
    .bm-product-card:focus-within .bm-card-quickactions {
        opacity: 1;
    }
    .bm-product-card:hover .bm-card-cart,
    .bm-product-card:focus-within .bm-card-cart {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
}

/* Touch / small screens: no hover — quick-actions + cart stay visible in flow */
@media (max-width: 1023px) {
    .bm-card-quickactions { opacity: 1; }
    .bm-card-cart {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        border-radius: 0;
        padding: 0 16px 16px;
        box-shadow: none;
    }
}

/* ============================================================
 * BM.Market product card — LIST (horizontal) variant.
 * Same visual language as the grid card, laid out as a row:
 *   [ image | category · name(2) · rating · availability | price · CTA · actions ].
 * Rows reserve fixed heights (title 2 lines, rating, price) so list rows align.
 * Wishlist + Compare are ALWAYS visible below the CTA (plain gray icon + label).
 * ============================================================ */
.bm-list-card {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 20px 24px;
    min-height: 150px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #fff;
    transition: box-shadow .2s ease;
}
/* Kit .bm-lcard hover: shadow lift, border unchanged. */
.bm-list-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }

/* Left: media (kit imgwrap 170x130) */
.bm-list-card .bm-lc-media {
    position: relative;
    flex: 0 0 170px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.bm-list-card .bm-card-image,
.bm-list-card .bm-card-image .product-image-container,
.bm-list-card .bm-card-image .product-image-wrapper {
    display: block;
    width: 100%;
}
.bm-list-card .bm-card-image img,
.bm-list-card .bm-card-image .product-image-photo {
    width: 100% !important;
    height: 130px !important;
    object-fit: contain;
    margin: 0 auto;
    background: #fff;
}
.bm-list-card .bm-card-badge { top: 0; left: 0; }

/* Middle: info */
.bm-list-card .bm-lc-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 12px;
}
.bm-list-card .bm-card-cat { margin: 0 0 6px; }
.bm-list-card .bm-lc-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 44px; /* reserve exactly 2 lines (2 × 22px) so cards align */
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #111111;
}
.bm-list-card .bm-lc-name:hover { color: var(--color-link); }
/* Rating row — height reserved even when empty, so availability stays aligned. */
.bm-list-card .bm-lc-rating {
    margin-top: 10px;
    min-height: 20px;
    font-size: 13px;
}
.bm-list-card .bm-lc-rating .rating-summary { margin: 0; }
/* Availability + optional delivery (dot-separated). */
.bm-list-card .bm-lc-avail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.bm-list-card .bm-lc-dot { color: #D1D5DB; }

/* Right column (kit .bm-lcard-right): 220px, right-aligned, gap 14. */
.bm-list-card .bm-lc-aside {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
}
/* Prices STACKED (kit .bm-lcard-prices): current over struck old, right-aligned,
   fixed 50px so rows align whether or not there is an old price. */
.bm-list-card .bm-card-price {
    text-align: right;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bm-list-card .bm-card-price .price-box {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
}
.bm-list-card .bm-card-price .price {
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    color: #111;
    font-variant-numeric: tabular-nums;
}
.bm-list-card .bm-card-price .special-price .price { color: #E30613; }
.bm-list-card .bm-card-price .old-price .price {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    color: #6B7280;
    text-decoration: line-through;
}
/* CTA (kit .bm-lcard-buy): full 220px, 48px, uppercase. Colors come from
   .bm-card-cart-btn (kit yellow CTA). */
.bm-list-card .bm-lc-cart-btn {
    width: 100%;
    height: 48px;
    gap: 10px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Secondary actions (kit .bm-lcard-sec): two BORDERED buttons sharing the
   220px row — icon 17 + label, marine border + blue text on hover. */
.bm-list-card .bm-lc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.bm-list-card .bm-lc-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    color: var(--color-fg-secondary);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.bm-list-card .bm-lc-action:hover { border-color: var(--color-marine-300); color: var(--color-primary); }
.bm-list-card .bm-lc-action svg { width: 17px; height: 17px; }

/* Small screens: stack image + info, price/CTA on their own rows. */
@media (max-width: 640px) {
    .bm-list-card { flex-wrap: wrap; gap: 16px; padding: 16px; }
    .bm-list-card .bm-lc-media { flex: 0 0 96px; }
    .bm-list-card .bm-lc-media .bm-card-image img,
    .bm-list-card .bm-lc-media .bm-card-image .product-image-photo { height: 96px !important; }
    .bm-list-card .bm-lc-info { flex: 1 1 55%; padding-right: 0; }
    .bm-list-card .bm-lc-aside { flex: 1 1 100%; }
    .bm-list-card .bm-card-price { text-align: left; min-height: 0; }
    .bm-list-card .bm-card-price .price-box { align-items: flex-start; }
}

/*
 * Catalog mega-menu flyout — hover highlight on subcategory links, so the item
 * under the cursor is clearly distinguished. Done in CSS (not Tailwind hover
 * utilities) because hover:text-primary isn't in Hyvä's prebuilt CSS. The small
 * negative margin keeps the text aligned while giving the hover background room.
 */
/* Kit sc-mega content: WHITE content panel, uppercase DARK group headings,
   grey bm-link children that go marine on hover (no bg). Only the left
   category rail is slate-50 (set on the rail container).

   Content layout: responsive CSS multi-column flow (column-width ~230px so the
   browser picks the column count from the available width) with each group
   kept intact (break-inside:avoid) + a small margin — packs tightly, no voids,
   reflows by width. Shared by the storefront flyout and the showcase demo. */
.bm-menu-flyout { background: #fff; }
.bm-mega-cols { columns: 230px; column-gap: 28px; min-width: 0; }
.bm-mega-group { display: flex; flex-direction: column; gap: 8px; break-inside: avoid; margin-bottom: 18px; }
.bm-mega-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 2px; }
/* Dark headings (kit --text-primary) — beat .bm-link's grey with 2-class spec. */
.bm-menu-flyout .bm-mega-h { color: var(--color-fg); }
.bm-menu-flyout .bm-link { font-size: 14px; }
.bm-menu-flyout .bm-mega-h.bm-link { font-size: 12px; }

/* Storefront flyout popover ONLY (not the showcase demo card).
   WIDTH — fluid: span from the rail's right edge to the container's right
   gutter = nav container content width (capped at its max-width per breakpoint)
   minus the rail column (--bm-rail: 288px inner dropdown / 320px homepage
   sidebar) and the 3rem px-6 gutters.
   HEIGHT — always exactly the rail height: the popover is absolutely stretched
   top:0/bottom:0 against its wrapper (whose height IS the rail), so a sparse
   category still fills the full rail height, its bottom edge aligns with the
   rail's, and switching categories never resizes the box. This adapts
   automatically if the rail grows/shrinks (no fixed height). The outer box clips
   (overflow:hidden); the content scrolls inside .bm-mega-scroll so a dense
   category (Sadzīves tehnika) scrolls internally while the rail and outer box
   stay put. NO max-height — a viewport cap would shorten the popover below the
   rail on short screens (rail > 100vh−5rem), breaking the bottom-edge alignment. */
.bm-menu-flyout.absolute {
    width: calc(min(100vw, var(--bm-cmw, 64rem)) - 3rem - var(--bm-rail, 288px));
    max-width: calc(100vw - var(--bm-rail, 288px) - 1rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (min-width: 80rem) { .bm-menu-flyout.absolute { --bm-cmw: 80rem; } }
@media (min-width: 96rem) { .bm-menu-flyout.absolute { --bm-cmw: 96rem; } }
/* Internal scroll area — fills the fixed-height popover; the multicol content
   keeps its natural height here so overflow scrolls VERTICALLY (a multicol on a
   fixed-height element would instead overflow sideways). min-height:0 lets the
   flex child actually scroll. */
.bm-menu-flyout.absolute .bm-mega-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 28px;
}

/*
 * Homepage: the catalog-nav bar sits directly above the content, and there are
 * no breadcrumbs, so the default 32px page-main top margin just leaves an empty
 * gap above the catalog rail. Remove it so the rail/content sit under the bar.
 */
.cms-index-index .page-main {
    margin-top: 0;
}

/*
 * Dark BM.Market footer — the column content (links, contacts, requisites,
 * newsletter, language) is light-designed CMS/Hyvä markup, so re-color it for
 * the dark background. Wrapper text is already light (text-gray-300); headings
 * go white and links brighten on hover.
 */
.bm-footer h3,
.bm-footer h4,
.bm-footer .font-bold {
    color: #ffffff;
}
.bm-footer a:hover {
    color: #ffffff;
}
/* Copyright line: lighten it on the dark footer and match the small bottom-bar
   text size (text-xs) + left alignment of the legal links (drop the block's
   own text-sm + sm:ml-6). */
.bm-footer small {
    color: #9ca3af;
    font-size: 0.75rem;
    line-height: 1rem;
    margin-left: 0;
}

/* ===== Kit footer (sc-footer v2) ===== */
/* Newsletter row: heading + subtext left, form right. Our band supplies the
   heading/subtext, so hide the subscribe block's own "Newsletter" heading and
   sr-only its label (the input has a placeholder). */
.bm-footer .form.subscribe h2 { display: none; }
.bm-footer .form.subscribe label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Newsletter form fills the band: drop the subscribe block's own width wrapper
   (lg:w-1/4) and let the input grow beside the button. */
.bm-newsletter > div { width: 100% !important; padding-right: 0 !important; }
.bm-newsletter .form.subscribe > div { gap: 12px; }
/* Kit .bm-fnews-input: solid dark field, subtle border, 52px, radius 10. */
.bm-newsletter .form.subscribe input {
    width: auto !important; flex: 1 1 auto; min-width: 0;
    height: 52px; border-radius: 10px; padding: 0 18px; font-size: 15px;
    background-color: #16233a; border: 1px solid #2a3a52; color: #fff;
}
.bm-newsletter .form.subscribe input::placeholder { color: #64748b; }
.bm-newsletter .form.subscribe input:focus {
    border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,134,206,.20);
}
/* Kit Subscribe button: primary, 52px, radius 10. */
.bm-newsletter .form.subscribe button {
    height: 52px; padding: 0 26px; border-radius: 10px;
    background: var(--color-primary); color: #fff; font-size: 15px; font-weight: 600;
    white-space: nowrap; border: none; transition: background .15s;
}
.bm-newsletter .form.subscribe button:hover { background: var(--color-marine-700); }

/* Kit 4-column grid: 1.5fr 1fr 1.5fr .9fr on desktop. */
.bm-footer-cols { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1024px) {
    .bm-footer-cols { grid-template-columns: 1.5fr 1fr 1.5fr .9fr; gap: 40px; }
}
/* Requisites label/value grid. */
.bm-req { display: grid; grid-template-columns: 132px 1fr; gap: 12px; font-size: 13px; line-height: 1.35; }
.bm-req dt { color: #64748b; }
.bm-req dd { color: #e2e8f0; margin: 0; }

/* Kit bottom bar: light strip below the dark footer. */
.bm-footer-bottom { background: var(--color-slate-50); border-top: 1px solid var(--color-border-subtle, #e5e7eb); }
.bm-footer-bottom, .bm-footer-bottom a { color: var(--color-fg-secondary); }
/* Copyright <small> sits on the light strip now — override the dark-footer grey. */
.bm-footer-bottom small { color: var(--color-fg-secondary); font-size: 13px; line-height: 1.3; margin-left: 0; }
.bm-footer-bottom a:hover { color: var(--color-fg); }
.bm-footer-partner {
    display: inline-flex; align-items: center; justify-content: center; height: 32px;
    background: #fff; border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: 6px; padding: 3px 8px;
}
.bm-footer-partner img { height: 22px; width: auto; max-width: 110px; display: block; }
.bm-pay-method { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--color-fg); }

/* CMS page content tables (delivery pricing, service-centers directory) + the
   delivery calculator widget — the CMS content is plain HTML, so style it here. */
.cms-page-view .page-main table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.875rem;
}
.cms-page-view .page-main th,
.cms-page-view .page-main td {
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}
.cms-page-view .page-main th {
    background: #f8fafc;
    font-weight: 600;
}
.cms-page-view .page-main h3 {
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}
.bm-delivery-calc {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    max-width: 34rem;
}
.bm-delivery-calc select,
.bm-delivery-calc input {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.3rem 0.5rem;
    margin-left: 0.35rem;
}
.bm-delivery-calc p { margin: 0.4rem 0; }

/* Payment-page accordion (<details>) — CMS page content. */
.cms-page-view .bm-acc { border:1px solid #e5e7eb; border-radius:0.5rem; margin:0.5rem 0; background:#fff; }
.cms-page-view .bm-acc summary { cursor:pointer; padding:0.75rem 1rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.cms-page-view .bm-acc summary::-webkit-details-marker { display:none; }
.cms-page-view .bm-acc summary::after { content:'+'; color:#94a3b8; font-weight:400; }
.cms-page-view .bm-acc[open] summary::after { content:'−'; }
.cms-page-view .bm-acc p { padding:0 1rem 0.85rem; margin:0; color:#475569; font-size:0.875rem; }
/* Contacts page map embed. */
.cms-page-view .bm-map { margin:0.5rem 0 1rem; }
.cms-page-view .bm-map iframe { width:100%; max-width:100%; border-radius:0.5rem; display:block; }

/* Contacts page: two-column layout, weekly schedule, requisites, store photos. */
.cms-page-view .bm-kont-grid { display:grid; grid-template-columns:1fr; gap:2rem; margin:1rem 0; }
@media (min-width:768px){ .cms-page-view .bm-kont-grid { grid-template-columns:1fr 1fr; } }
.cms-page-view .bm-contact-list { list-style:none; padding:0; margin:0 0 1rem; }
.cms-page-view .bm-contact-list li { padding:0.2rem 0; }
.cms-page-view .bm-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:0.4rem 0 1rem; max-width:30rem; }
.cms-page-view .bm-cal-cell { border:1px solid #e5e7eb; border-radius:0.375rem; padding:0.4rem 0.1rem; text-align:center; background:#fff; }
.cms-page-view .bm-cal-cell.off { background:#f8fafc; }
.cms-page-view .bm-cal-d { display:block; font-weight:600; font-size:0.75rem; color:#1f2937; }
.cms-page-view .bm-cal-cell.off .bm-cal-d { color:#94a3b8; }
.cms-page-view .bm-cal-h { display:block; font-size:0.625rem; color:#64748b; margin-top:2px; }
.cms-page-view .bm-cal-cell.off .bm-cal-h { color:#cbd5e1; }
.cms-page-view .bm-rek { margin:0.4rem 0 1rem; }
.cms-page-view .bm-rek-row { display:flex; gap:0.5rem; padding:0.25rem 0; font-size:0.8125rem; border-bottom:1px solid #f1f5f9; }
.cms-page-view .bm-rek-row dt { color:#64748b; flex:0 0 44%; margin:0; }
.cms-page-view .bm-rek-row dd { margin:0; color:#1f2937; font-weight:500; }
.cms-page-view .bm-photos { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.cms-page-view .bm-photos img { width:100%; height:auto; border-radius:0.5rem; display:block; }

/* ===== Consistent footer info-page (CMS) UI: highlighted header + typography ===== */
.cms-page-view .bm-page-title {
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
    position: relative;
}
.cms-page-view .bm-page-title::after {
    content: "";
    position: absolute; left: 0; bottom: -2px;
    width: 3.5rem; height: 2px; background: var(--color-primary);
}
.cms-page-view .page-main { color: #334155; }
.cms-page-view .page-main p { margin: 0 0 1rem; line-height: 1.65; }
.cms-page-view .page-main h2 { font-size: 1.25rem; font-weight: 600; color: #0f172a; margin: 1.75rem 0 0.75rem; }
.cms-page-view .page-main h3 { font-size: 1.05rem; color: #1f2937; }
.cms-page-view .page-main ul:not([class]), .cms-page-view .page-main ol:not([class]) { margin: 0 0 1rem 1.25rem; line-height: 1.65; }
.cms-page-view .page-main ul:not([class]) { list-style: disc; }
.cms-page-view .page-main ol:not([class]) { list-style: decimal; }
.cms-page-view .page-main li { margin: 0.25rem 0; }
.cms-page-view .page-main a:not([class]) { color: var(--color-primary); text-decoration: underline; }
.cms-page-view .page-main a:not([class]):hover { color: var(--color-marine-800); }

/* Keep the newsletter input + button on one line (no wrap on mobile). */
.bm-newsletter .form.subscribe > div { flex-wrap: nowrap; align-items: stretch; }

/* ============ Per-page hero header for footer info pages ============ */
.cms-page-view .page-main .bm-hero {
    display: flex; align-items: center; gap: 1.15rem;
    padding: 1.4rem 1.6rem; margin: 0 0 2rem;
    background: linear-gradient(135deg, #f1f5fb 0%, #f8fafc 70%);
    border: 1px solid #e6edf6; border-radius: 1rem;
    position: relative; overflow: hidden;
}
.cms-page-view .page-main .bm-hero::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: var(--bm-accent, var(--color-primary));
}
.cms-page-view .page-main .bm-hero-icon {
    flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--bm-accent, var(--color-primary)); color: #fff;
    box-shadow: 0 8px 18px -8px var(--bm-accent, var(--color-primary));
}
.cms-page-view .page-main .bm-hero-icon svg { width: 1.7rem; height: 1.7rem; }
.cms-page-view .page-main .bm-hero .bm-page-title {
    margin: 0; padding: 0; border: 0; font-size: 1.6rem; line-height: 1.15; color: #0f172a;
}
.cms-page-view .page-main .bm-hero .bm-page-title::after { display: none; }
.cms-page-view .page-main .bm-hero-sub { margin: 0.3rem 0 0; color: #5b6b7f; font-size: 0.95rem; line-height: 1.4; }

/* per-page accent colour */
.bm-hero--service-centers   { --bm-accent: #0e7490; }
.bm-hero--warranty          { --bm-accent: #15803d; }
.bm-hero--payment           { --bm-accent: var(--color-primary); }
.bm-hero--delivery          { --bm-accent: #c2410c; }
.bm-hero--distance-contract { --bm-accent: #4338ca; }
.bm-hero--contacts          { --bm-accent: #0369a1; }
.bm-hero--privacy-policy    { --bm-accent: #7c3aed; }
.bm-hero--terms-of-service  { --bm-accent: #475569; }

/* Lead paragraph (first paragraph right after the hero). */
.cms-page-view .page-main .bm-hero + p { font-size: 1.05rem; color: #475569; line-height: 1.7; }

/* Section headings: subtle accent so long pages have rhythm. */
.cms-page-view .page-main h2 { padding-left: 0.75rem; border-left: 3px solid #cbd5e1; }
.cms-page-view .page-main h3 { color: #1f2937; }

/* Branded, zebra-striped tables (service-centers directory etc.). */
.cms-page-view .page-main table {
    border: 1px solid #e5e7eb; border-radius: 0.6rem; overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
.cms-page-view .page-main th { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 600; }
.cms-page-view .page-main td { border-color: #eef2f7; }
.cms-page-view .page-main tbody tr:nth-child(even) { background: #f8fafc; }
.cms-page-view .page-main tbody tr:hover { background: #eef4fb; }

/* Mobile hero */
@media (max-width: 600px) {
    .cms-page-view .page-main .bm-hero { padding: 1.1rem 1.15rem; gap: 0.85rem; align-items: flex-start; }
    .cms-page-view .page-main .bm-hero-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.7rem; }
    .cms-page-view .page-main .bm-hero-icon svg { width: 1.4rem; height: 1.4rem; }
    .cms-page-view .page-main .bm-hero .bm-page-title { font-size: 1.3rem; }
    .cms-page-view .page-main .bm-hero-sub { font-size: 0.85rem; }
}

/* Wide directory tables (service-centers) scroll horizontally on small screens
   so all columns — incl. the tappable phone — stay reachable. */
.cms-page-view .page-main .bm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e7eb; border-radius: 0.6rem; }
.cms-page-view .page-main .bm-table-wrap table { margin: 0; border: 0; border-radius: 0; box-shadow: none; min-width: 36rem; }
.cms-page-view .page-main .bm-table-wrap td a[href^="tel:"] { white-space: nowrap; font-weight: 500; }

/* Payment accordion: icon tile next to each method name. */
.cms-page-view .page-main .bm-acc-head { display:flex; align-items:center; gap:0.7rem; min-width:0; }
.cms-page-view .page-main .bm-acc-ic { flex:0 0 auto; width:2rem; height:2rem; border-radius:0.5rem; background:#eef4fb; color:var(--color-primary); display:inline-flex; align-items:center; justify-content:center; }
.cms-page-view .page-main .bm-acc-ic svg { width:1.15rem; height:1.15rem; }

/* ============================================================================
   INFO / CONTENT PAGES  →  showcase "Content pages" (sc-content) transplant.
   Every content page (Delivery, Payment, Warranty, Service centres, Distance
   contract, Privacy, Terms) carries a .bm-hero header, so :has(.bm-hero) selects
   all 7 in EVERY locale regardless of the localised URL slug. The Contacts page
   (its own 2-col layout) is the only other hero page and is excluded via
   :not(:has(.bm-kont-grid)). Pure CSS → applies across all 6 store views.
   sc-content rules: plain H1 28/700 (no hero card/icon/accent), plain H2 20/700
   (36/12), readable 16/1.7 body, lists 8/24, .bm-clink links. The content keeps
   the FULL container width (responsive) — no narrow column.
   ========================================================================== */
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) {
    color: #334155;
    font-size: 16px;
    line-height: 1.7;
}
/* H1 + intro — strip the decorative hero (gradient card, accent bar, icon tile) */
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-hero {
    display: block; padding: 0; margin: 0 0 6px; background: none; border: 0; border-radius: 0; overflow: visible;
}
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-hero::before { display: none; }
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-hero-icon { display: none; }
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-page-title {
    margin: 0 0 6px; padding: 0; border: 0;
    font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-fg);
}
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-page-title::after { display: none; }
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-hero-sub,
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-hero + p {
    margin: 0 0 14px; font-size: 16px; font-weight: 400; line-height: 1.7; color: #334155;
}
/* Body rhythm */
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) p {
    margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: #334155;
}
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) h2 {
    margin: 36px 0 12px; padding: 0; border: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--color-fg);
}
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) h3 {
    margin: 28px 0 8px; font-size: 16px; font-weight: 700; color: var(--color-fg);
}
/* Lists — 8px between items, 24px indent */
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) ul:not([class]),
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) ol:not([class]) {
    margin: 0 0 14px; padding-left: 24px; font-size: 16px; line-height: 1.7;
}
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) li { margin: 8px 0; }
/* Links — .bm-clink: blue, no underline, underline on hover */
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) a:not([class]) {
    color: var(--color-primary); text-decoration: none;
}
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) a:not([class]):hover {
    color: var(--color-primary); text-decoration: underline;
}
/* Payment accordion → sc-accordion: grouped bordered container, no icons,
   chevron that rotates on open, summary turns primary on open. */
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc {
    margin: 0; border: 1px solid #e5e7eb; border-radius: 0; background: #fff;
}
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc + .bm-acc { border-top: 0; }
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc:first-of-type { border-radius: 12px 12px 0 0; }
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc:last-of-type { border-radius: 0 0 12px 12px; }
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc-ic { display: none; }
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc summary {
    padding: 18px 22px; font-size: 15px; font-weight: 600; color: var(--color-fg);
}
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc summary:hover,
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc[open] summary { color: var(--color-primary); }
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc summary::after {
    content: ""; flex: 0 0 auto; width: 18px; height: 18px; transition: transform .2s ease;
    background: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc[open] summary::after { transform: rotate(180deg); }
.cms-page-view .page-main:has(.bm-hero):not(:has(.bm-kont-grid)) .bm-acc p {
    padding: 0 22px 18px; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-fg-secondary);
}

/* Waze icon in the contacts requisites. */
.cms-page-view .page-main .bm-waze-ic { display:inline-block; vertical-align:middle; margin-right:0.4rem; border-radius:4px; }

/* Service-centers page: general-terms block below the directory. */
.cms-page-view .page-main .bm-service-terms { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.cms-page-view .page-main .bm-service-terms h2 { margin-top: 0; }

/* ============================================================
   Mini product card (kit "Mini product card", .bm-mcard) — compact card for
   "Recommended products" / "Recently viewed" carousels. Kit DOM verbatim:
   imgwrap (optional badge) → body: 2-line title, prices, View-product button.
   ============================================================ */
.bm-mcard { display:flex; flex-direction:column; background:#fff; border:1px solid #E8E8E8; border-radius:10px; overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease; }
.bm-mcard:hover { box-shadow:0 10px 30px rgba(0,0,0,.08); }
/* aspect-ratio alone is a soft constraint — real <img> height attributes can
   stretch it, so the 4:3 box is enforced with overflow + full-size contain. */
.bm-mcard-imgwrap { position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:14px; background:#fff; overflow:hidden; }
.bm-mcard-img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; transition:transform .25s ease; }
.bm-mcard-imgwrap img { max-height:100%; }
.bm-mcard:hover .bm-mcard-img { transform:scale(1.04); }
.bm-mcard-body { padding:0 14px 14px; display:flex; flex-direction:column; flex:1; }
.bm-mcard-title { font-size:13.5px; font-weight:600; color:var(--color-fg); line-height:18px; height:36px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bm-mcard-prices { display:flex; align-items:baseline; gap:8px; margin-top:8px; flex-wrap:wrap; }
.bm-mcard-price { font-size:16px; font-weight:700; color:#111; white-space:nowrap; font-variant-numeric: tabular-nums; }
.bm-mcard-price.is-sale { color:#E30613; }
.bm-mcard-old { font-size:13px; font-weight:500; color:#6B7280; text-decoration:line-through; white-space:nowrap; }
.bm-mcard-view { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; height:38px; margin-top:12px; border:1px solid #E5E7EB; border-radius:8px; background:#fff; color:var(--color-fg); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s, background .15s; }
.bm-mcard-view:hover { border-color:var(--color-marine-300); color:var(--color-primary); }

/* Badge variants (kit "Product status badges") — ONE badge per card, top-left.
   Default .bm-card-badge = Sale (red, highest priority). */
.bm-card-badge.is-new        { background: #16A34A; }
.bm-card-badge.is-bestseller { background: #F59E0B; }
.bm-card-badge.is-top        { background: var(--color-primary); }
.bm-card-badge.is-preorder   { background: #6366F1; }
.bm-card-badge.is-oos        { background: #F1F5F9; color: #6B7280; border: 1px solid #E5E7EB; }

/* ============================================================
   Category card (kit "Category cards", .bm-ccard) — kit DOM verbatim:
   a.bm-ccard > imgwrap(img) + body(name, count). Hover: marine border,
   lift, blue name, image scale.
   ============================================================ */
.bm-ccard { display:flex; flex-direction:column; background:#fff; border:1px solid #E5E7EB; border-radius:12px; overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease; }
.bm-ccard:hover { box-shadow:0 10px 30px rgba(0,0,0,.08); border-color:var(--color-marine-300); }
.bm-ccard-imgwrap { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:22px; background:#fff; }
.bm-ccard-img { max-width:100%; max-height:100%; object-fit:contain; transition:transform .25s ease; }
.bm-ccard:hover .bm-ccard-img { transform:scale(1.04); }
.bm-ccard-body { padding:0 16px 16px; text-align:center; display:flex; flex-direction:column; gap:3px; }
.bm-ccard-name { font-size:14.5px; font-weight:600; color:var(--color-fg); line-height:19px; min-height:38px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s; }
.bm-ccard:hover .bm-ccard-name { color:var(--color-primary); }
.bm-ccard-count { font-size:12.5px; color:var(--color-fg-muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   PLP furniture (kit "Filters & pagination", "Active filter chips",
   "Tabs") — kit CSS verbatim, vars adapted to theme tokens.
   ============================================================ */
.bm-flt { background:#fff; border:1px solid #E5E7EB; border-radius:12px; margin-bottom:14px; }
.bm-flt > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; font-size:15px; font-weight:700; color:var(--color-fg); }
.bm-flt > summary::-webkit-details-marker { display:none; }
.bm-flt-chev { transition:transform .2s ease; color:var(--color-fg-muted); flex-shrink:0; }
.bm-flt[open] .bm-flt-chev { transform:rotate(180deg); }
.bm-flt-body { padding:2px 20px 16px; }
.bm-flt-in { width:100%; height:40px; border:1px solid #E5E7EB; border-radius:8px; padding:0 12px; font-family:inherit; font-size:14px; color:var(--color-fg); outline:none; }
.bm-flt-in:focus { border-color:var(--color-primary); }
.bm-flt-labi { height:38px; padding:0 20px; border:none; border-radius:8px; background:var(--color-primary); color:#fff; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.bm-flt-labi:hover { background:var(--color-marine-700); }
.bm-chk { display:flex; align-items:center; gap:11px; padding:6px 0; font-size:14px; color:var(--color-fg-secondary); cursor:pointer; }
.bm-chk:hover { color:var(--color-fg); }
.bm-chk input { width:18px; height:18px; accent-color:var(--color-primary); cursor:pointer; flex-shrink:0; }
.bm-chk .cnt { color:var(--color-fg-muted); }
.bm-pg-btn { min-width:38px; height:38px; padding:0 6px; border:1px solid #E5E7EB; border-radius:999px; background:#fff; color:var(--color-fg); font-family:inherit; font-size:14px; font-weight:600; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s, background .15s; }
.bm-pg-btn:hover { border-color:var(--color-marine-300); color:var(--color-primary); }
.bm-pg-btn.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.bm-select { width:100%; height:44px; border:1px solid #E5E7EB; border-radius:8px; padding:0 12px; font-family:inherit; font-size:14px; color:var(--color-fg); background:#fff; cursor:pointer; outline:none; }
.bm-select:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(0,134,206,.14); }
.bm-chip-x { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 8px 0 14px; border:1px solid var(--color-marine-300); border-radius:999px; background:var(--color-marine-50); color:var(--color-marine-700); font-size:13px; font-weight:600; }
.bm-chip-x button, .bm-chip-x a { width:22px; height:22px; border:none; border-radius:50%; background:transparent; color:var(--color-marine-700); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s; }
.bm-chip-x button:hover, .bm-chip-x a:hover { background:rgba(0,134,206,.15); }
.bm-chip-clear { height:36px; padding:0 14px; border:none; background:none; color:var(--color-fg-secondary); font-size:13px; font-weight:600; cursor:pointer; border-radius:999px; transition:color .15s; }
.bm-chip-clear:hover { color:#E30613; }
.bm-tab { height:48px; padding:0 22px; border:none; background:none; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600; color:var(--color-fg-secondary); border-bottom:2px solid transparent; transition:color .15s; }
.bm-tab:hover { color:var(--color-fg); }
.bm-tab.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }
.bm-iconbtn { width:42px; height:42px; border:1px solid #E5E7EB; border-radius:8px; background:#fff; color:#6B7280; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .15s, border-color .15s; }
.bm-iconbtn:hover { color:var(--color-primary); border-color:var(--color-marine-300); }
.bm-iconbtn.active { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }

/* ============================================================
   Header actions / nav links / mega rail / footer links (kit
   "Header", "Mega menu", "Footer" sections) — kit CSS verbatim.
   ============================================================ */
.bm-action { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 10px; border-radius:8px; color:var(--color-fg-secondary); min-width:56px; transition:background .15s, color .15s; }
.bm-action:hover { background: var(--color-slate-50); color: var(--color-primary); }
.bm-nav-link { color: var(--color-fg-secondary); transition: color .15s; font-size:14px; font-weight:500; padding:0 12px; height:46px; display:flex; align-items:center; }
.bm-nav-link:hover { color: var(--color-fg); }
.bm-rail-item { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--color-fg-secondary); cursor:pointer; transition:background .15s, color .15s; }
.bm-rail-item:hover { background: var(--color-marine-50); color: var(--color-marine-700); }
.bm-flink { color: #94a3b8; transition: color .15s; }
.bm-flink:hover { color: #ffffff; }
.bm-fsoc { width: 44px; height: 44px; border-radius: 10px; background: #16233a; color: #cbd5e1; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.bm-fsoc:hover { background: var(--color-primary); color: #fff; }

/* Price-slider filter: kit .bm-flt-body top padding (2px) is tuned for
   .bm-chk rows that carry their own 6px padding; the slider's value boxes
   have none and collided with the open-state title border. */
.bm-flt-body .smile-es-range-slider { display: block; padding-top: 14px; }

/* Mini product card — HORIZONTAL variant (kit .bm-mcard-h): photo left,
   title+prices right, button below spanning under both. */
.bm-mcard-h { display:grid; grid-template-columns:104px 1fr; gap:2px 14px; background:#fff; border:1px solid #E8E8E8; border-radius:10px; padding:12px; transition:box-shadow .2s ease; align-items:start; }
.bm-mcard-h:hover { box-shadow:0 10px 30px rgba(0,0,0,.08); }
.bm-mcard-h-img { position:relative; grid-row:1 / 3; width:104px; height:78px; display:flex; align-items:center; justify-content:center; }
.bm-mcard-h-img img { max-width:100%; max-height:100%; object-fit:contain; }
/* Discount badge inside a mini-card imgwrap sits at the kit's top-left. */
.bm-mcard-imgwrap .bm-card-badge, .bm-mcard-h-img .bm-card-badge { top:8px; left:8px; }

/* ============================================================
   Kit shared component families — ported VERBATIM from the UI kit
   (ccc/BM Market UI Kit.html), vars adapted to theme tokens.
   Storefront-wide: account area, header search, minicart, misc.
   ============================================================ */

/* Links */
.bm-link { color: var(--color-fg-secondary); transition: color .15s; }
.bm-link:hover { color: var(--color-primary); }
.bm-clink { color: var(--color-primary); text-decoration: none; }
.bm-clink:hover { text-decoration: underline; }
.bm-tlink { color: var(--color-fg); transition: color .15s; }
.bm-tlink:hover { color: var(--color-primary); }

/* Buttons (kit-only variants; theme btn/btn-primary carry the same metrics) */
.bm-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:44px; padding:0 22px; border:none; border-radius:8px; background:var(--color-primary); color:#fff; font-size:14.5px; font-weight:600; cursor:pointer; transition:background .15s; white-space:nowrap; }
.bm-btn-primary:hover { background:var(--color-marine-700); color:#fff; }
.bm-btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.bm-btn-cta { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 26px; border:none; border-radius:10px; background:var(--color-cta); color:#111; font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; cursor:pointer; transition:background .2s; white-space:nowrap; }
.bm-btn-cta:hover { background:var(--color-cta-hover); color:#111; }
.bm-btn-cta:disabled { opacity:.5; cursor:not-allowed; }
.bm-btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:44px; padding:0 20px; border:1px solid #E5E7EB; border-radius:8px; background:#fff; color:var(--color-fg); font-size:14px; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s, background .15s; white-space:nowrap; }
.bm-btn-outline:hover { border-color:var(--color-marine-300); color:var(--color-primary); }
.bm-btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 14px; border:none; border-radius:8px; background:transparent; color:var(--color-fg-secondary); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s, color .15s; }
.bm-btn-ghost:hover { background:var(--color-slate-50); color:var(--color-primary); }

/* Form primitives (kit names; native storefront forms use form-* with the same metrics) */
.bm-input { width:100%; height:44px; border:1px solid #E5E7EB; border-radius:8px; padding:0 14px; font-family:inherit; font-size:14px; color:var(--color-fg); outline:none; background:#fff; transition:border-color .15s, box-shadow .15s; }
.bm-input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(0,134,206,.14); }
.bm-input:disabled { background:var(--color-slate-50); color:var(--color-fg-muted); cursor:not-allowed; }
.bm-radio { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--color-fg); cursor:pointer; }
.bm-radio input { width:18px; height:18px; accent-color:var(--color-primary); cursor:pointer; }
.bm-switch { position:relative; display:inline-block; width:40px; height:22px; border-radius:999px; background:#CBD5E1; flex-shrink:0; cursor:pointer; transition:background .2s; }
.bm-switch::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .2s; }
.bm-switch.on { background:var(--color-primary); }
.bm-switch.on::after { left:20px; }
.bm-fld-label { display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--color-fg); }
.bm-fld-err { display:flex; align-items:center; gap:6px; font-size:12.5px; color:#E30613; margin-top:6px; }

/* 2026 card surfaces — no borders */
.bm-card-soft { background:#fff; border-radius:12px; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 6px 20px rgba(15,23,42,.06); }
.bm-surface { background:#F8FAFC; border-radius:12px; }

/* Account nav */
.bm-acc-nav { padding:8px; } /* kit demo fixes 240px; storefront fills its sidebar column */
.bm-acc-nav a { display:block; padding:9px 12px; border-radius:8px; font-size:14px; color:var(--color-fg-secondary); transition:background .12s, color .12s; }
.bm-acc-nav a:hover { background:var(--color-slate-50); color:var(--color-fg); }
.bm-acc-nav a.active { background:var(--color-marine-50); color:var(--color-marine-700); font-weight:600; }
.bm-acc-nav .bm-acc-signout { color:#E30613; }
.bm-acc-nav .bm-acc-signout:hover { background:#FEF2F2; color:#E30613; }
.bm-arrow-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--color-primary); }
.bm-arrow-link:hover { text-decoration:underline; }
.bm-dl { display:grid; grid-template-columns:170px 1fr; gap:8px 20px; font-size:14px; }
.bm-dl .k { color:var(--color-fg-muted); }
.bm-dl .v { color:var(--color-fg); font-weight:500; }
.bm-dl .na { color:var(--color-fg-muted); font-style:italic; font-weight:400; }

/* Status pill (order grids, account tables) — kit feedback pill geometry */
.bm-pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; line-height:1; padding:6px 11px; border-radius:999px; letter-spacing:.02em; white-space:nowrap; }
.bm-pill.is-success { background:#F0FDF4; color:#15803D; }
.bm-pill.is-warning { background:#FFFBEB; color:#B45309; }
.bm-pill.is-error   { background:#FEF2F2; color:#B91C1C; }
.bm-pill.is-info    { background:var(--color-marine-50); color:var(--color-marine-700); }
.bm-pill.is-neutral { background:var(--color-slate-100); color:var(--color-slate-600); }

/* Header searchbox */
.bm-searchbox { display:flex; align-items:center; gap:10px; background:var(--color-slate-100); border:1px solid transparent; border-radius:8px; padding:0 0 0 16px; height:48px; }

/* Scroll to top */
.bm-totop { width:48px; height:48px; border-radius:50%; border:none; background:var(--color-primary); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,134,206,.35); transition:background .15s; }
.bm-totop:hover { background:var(--color-marine-700); }

/* Skeleton shimmer */
@keyframes bm-shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
.bm-skel { background:linear-gradient(90deg, #EEF1F4 25%, #F8FAFB 50%, #EEF1F4 75%); background-size:800px 100%; animation:bm-shimmer 1.4s linear infinite; border-radius:6px; }

/* Toast (floating notification) */
.bm-toast { display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid #E5E7EB; border-left-width:4px; border-radius:10px; padding:14px 16px; box-shadow:0 6px 20px rgba(0,0,0,.07); max-width:420px; }

/* Hero slider controls — kit sc-navel contract */
.bm-hero-arrow { width:40px; height:40px; border-radius:50%; border:1px solid #E5E7EB; background:#fff; color:#1E293B; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05); transition:color .15s, border-color .15s; }
.bm-hero-arrow:hover { color:var(--color-primary); border-color:var(--color-marine-300); }
.bm-hero-dot { width:8px; height:8px; border-radius:999px; background:rgba(15,23,42,.28); transition:width .2s, background .2s; }
.bm-hero-dot.active { width:22px; background:var(--color-primary); }

/* ============================================================
   Kit HEADER family (updated kit v2 sc-header) — three rows:
   utility bar · main row (logo/search/actions) · nav row.
   Atoms bm-link / bm-searchbox / bm-action / bm-nav-link are
   defined above; these are the row containers + badges. Used by
   the showcase Header demo and the live Hyvä header override.
   ============================================================ */
.bm-header { background:#fff; }
.bm-header-util { background:var(--color-slate-50); border-bottom:1px solid #E5E7EB; }
.bm-header-util-inner { padding:0 20px; height:38px; display:flex; align-items:center; justify-content:space-between; font-size:12px; flex-wrap:wrap; }
.bm-header-util-links { display:flex; align-items:center; gap:22px; }
.bm-header-util-links a { font-weight:500; }
.bm-header-util-meta { display:flex; align-items:center; gap:18px; color:var(--color-fg-secondary); }
.bm-header-util-meta .bm-hu-phone { display:flex; align-items:center; gap:6px; font-weight:600; }
.bm-header-util-meta .bm-hu-addr { display:flex; align-items:center; gap:6px; font-weight:500; }
.bm-header-util-meta .bm-hu-lang { display:flex; align-items:center; gap:5px; font-weight:600; cursor:pointer; }

.bm-header-main { padding:0 20px; height:76px; display:flex; align-items:center; gap:18px; }
.bm-header-logo { height:40px; width:auto; flex-shrink:0; }
/* search button fused to the right edge of bm-searchbox */
.bm-searchbox .bm-search-btn { flex-shrink:0; height:100%; padding:0 22px; margin:0 -2px 0 8px; border:none; border-radius:0 8px 8px 0; background:var(--color-primary); color:#fff; font-weight:600; font-size:14px; display:flex; align-items:center; cursor:pointer; }
.bm-header-actions { display:flex; align-items:center; gap:4px; margin-left:auto; flex-shrink:0; }
.bm-action-badge { position:absolute; top:-6px; right:-8px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--color-slate-700); color:#fff; font-size:10px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; }
.bm-action-badge.is-cart { background:var(--color-cta); color:#111; }

.bm-header-nav { border-top:1px solid #E5E7EB; padding:0 20px; height:46px; display:flex; align-items:center; gap:4px; }
.bm-header-catalog-btn { display:flex; align-items:center; gap:9px; height:46px; padding:0 14px; margin-right:8px; border:none; background:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; color:var(--color-fg); }
.bm-header-hot { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:#E30613; padding:0 12px; height:46px; }
.bm-header-hot:hover { color:#E30613; }

/* ============================================================
   HOMEPAGE marketplace (BM Market Main Page layout) — kit tokens.
   Hero row (rail + hero/banners/trust) + full-width sections
   (brands, product rows, recently-viewed). Reuses .bm-product-card,
   .bm-mcard, .bm-rail-item, .bm-menu-flyout, .bm-hero-arrow/dot.
   ============================================================ */
/* .bm-home fills its column (.columns already provides the header/footer
   container width + gutters, so content lines up on the same edges — #1).
   No top gap: the hero row + its mega flyout sit FLUSH under the nav (#2);
   one section's rhythm of space before the footer (#7). */
.bm-home { position: relative; padding-block: 0 36px; }
.cms-index-index .page-main { margin-block: 0; }

/* --- Hero row: rail + right column; flyout overlays the right column --- */
.bm-home-hero-row { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.bm-home-rail { display: none; }
/* Top gap above the hero slider / right column only — the rail (left column)
   stays flush under the nav. Padding on the col (not the row) leaves the rail
   cell + its mega flyout untouched (flyout anchors to the sticky rail nav,
   which keeps its content height). */
.bm-home-hero-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 24px; }
@media (min-width: 1024px) {
    .bm-home-hero-row { grid-template-columns: 320px minmax(0, 1fr); }
    .bm-home-rail { display: block; align-self: stretch; }
}

/* Hero slider fills its column (distinct from the .cms-page-view info-page hero).
   Fixed aspect (responsive to width, stable across slides): the slider keeps a
   constant height and each slide image is cropped to fill (object-fit:cover),
   so the banner never resizes as slides rotate — no layout jump. The banner
   art is ~923×282 (≈3.27:1); slides of any size are cropped to that box.
   !important overrides the CMS block's inline width/height on the <img>. */
.bm-home .bm-hero { width: 100%; aspect-ratio: 923 / 282; }
.bm-home .bm-hero > div { height: 100%; }                         /* relative wrapper */
.bm-home .bm-hero > div > div:first-child { height: 100%; overflow: hidden; border-radius: 12px; } /* slide track */
.bm-home .bm-hero > div > div:first-child > a { height: 100%; grid-area: 1 / 1; } /* each slide fills + overlaps */
.bm-home .bm-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 12px;
}

/* --- Partner banners: 3 image tiles (editable CMS block). Each card keeps the
   banner artwork's aspect (953×417 ≈ 2.29:1); the image fills and is cropped to
   fit (object-fit:cover) — the card is never enlarged past its column. --- */
.bm-home-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bm-home-banner {
    display: block; overflow: hidden; border-radius: 12px;
    aspect-ratio: 953 / 417;
    text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.bm-home-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-home-banner:hover { box-shadow: 0 6px 20px rgba(15,23,42,.10); }
@media (max-width: 640px) { .bm-home-banners { grid-template-columns: 1fr; } }

/* --- Trust bar: showcase sc-trust tile treatment (flat slate-50 surface, no
   border, plain brand-blue icon, no chip; 15px title / 13px sub). 4 → 2×2 → 1.
   Copy + tooltips kept. --- */
.bm-usp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .bm-usp-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bm-usp-row { grid-template-columns: 1fr; } }
.bm-usp {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; background: var(--color-slate-50); border-radius: 12px; border: 0;
}
.bm-usp-ic { flex-shrink: 0; display: flex; color: var(--color-primary); }
.bm-usp-txt { min-width: 0; flex: 1; }
.bm-usp-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--color-fg); line-height: 1.2; }
.bm-usp-sub { display: block; font-size: 13px; color: var(--color-fg-secondary); margin-top: 2px; }
.bm-usp-info { color: var(--color-fg-muted); flex-shrink: 0; cursor: help; }
/* Tooltip: revealed on hover/focus of the card */
.bm-usp-tt {
    position: absolute; left: 16px; right: 16px; bottom: calc(100% + 6px); z-index: 20;
    background: var(--color-chrome, #0f1a2e); color: #fff; font-size: 12px; line-height: 1.4;
    padding: 8px 11px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
    pointer-events: none;
}
.bm-usp:hover .bm-usp-tt, .bm-usp:focus-within .bm-usp-tt { opacity: 1; visibility: visible; transform: none; }

/* --- Full-width sections: heading + "see all" --- */
.bm-home-section { margin-top: 36px; }
.bm-home-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 16px; }
.bm-home-h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--color-fg); letter-spacing: -.01em; }
.bm-home-more { font-size: 14px; font-weight: 500; white-space: nowrap; }

/* --- Popular brands strip: logo tiles (editable CMS block). Cards share one
   width and the logo images' 2:1 aspect (455×228); the logo fills the card
   (object-fit:contain on white, so it's never cropped or distorted). --- */
.bm-brandstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.bm-brandtile {
    display: block; overflow: hidden;
    aspect-ratio: 455 / 228;
    background: #fff;
    border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: 10px;
    text-decoration: none; transition: box-shadow .15s, border-color .15s;
}
.bm-brandtile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bm-brandtile:hover { box-shadow: 0 4px 16px rgba(15,23,42,.08); border-color: var(--color-marine-300); }

/* --- Product rows: the SAME full PLP card. Desktop/tablet = a responsive
   ONE-ROW grid (card count derived from width via breakpoints; extra cards
   hidden, no inner scroll, no cut-off). Mobile (<640) = horizontal swipe. --- */
.bm-row-track {
    display: flex; gap: 16px; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scroll-padding-left: 2px; padding-bottom: 4px;
}
.bm-row-cell { flex: 0 0 74vw; max-width: 300px; scroll-snap-align: start; min-width: 0; }
.bm-row-cell .bm-product-card { height: 100%; }
@media (min-width: 640px) {
    .bm-row-track { display: grid; gap: 16px; overflow: visible; grid-template-columns: repeat(3, 1fr); }
    .bm-row-cell { flex: none; max-width: none; }
    .bm-row-cell:nth-child(n+4) { display: none; }
}
@media (min-width: 1024px) {
    .bm-row-track { grid-template-columns: repeat(4, 1fr); }
    .bm-row-cell:nth-child(4) { display: block; }
    .bm-row-cell:nth-child(n+5) { display: none; }
}
@media (min-width: 1280px) {
    .bm-row-track { grid-template-columns: repeat(5, 1fr); }
    .bm-row-cell:nth-child(5) { display: block; }
    .bm-row-cell:nth-child(n+6) { display: none; }
}
@media (min-width: 1536px) {
    .bm-row-track { grid-template-columns: repeat(6, 1fr); }
    .bm-row-cell:nth-child(6) { display: block; }
    .bm-row-cell:nth-child(n+7) { display: none; }
}
/* Desktop hover reveals the card's absolute add-to-cart footer, which drops
   ~59px below the card. Reserve clearance below each product row so the hover
   state stays contained and never overlaps the next section or the footer.
   (≤1023px the footer is in-flow — no overhang, no clearance needed.) */
@media (min-width: 1024px) {
    .bm-row-track { padding-bottom: 32px; }
}

/* Recently-viewed on the homepage: kill the component's 38rem loading
   reservation so the (client-side, often-empty) strip collapses instead of
   leaving a big gap before the footer. The section's top spacing lives on the
   rendered slider, so an empty strip adds no margin (normal footer rhythm). */
.bm-home-recent .flow-root { min-block-size: 0 !important; }
.bm-home-recent .snap-slider { margin-top: 36px; }

/* PLP: keep the title (H1) → content gap tight (drop the product-list section's
   top padding so the toolbar sits just below the H1), and offset the filter
   sidebar down by the toolbar's height so its TOP lines up with the first
   product-card row (the toolbar stays above the grid on the right; sidebar +
   grid begin at the same Y below it). Mobile keeps its natural stacked spacing. */
@media (min-width: 768px) {
    .catalog-category-view .columns #product-list { padding-top: 0; }
    .catalog-category-view .bm-plp-filters .filter-content { padding-top: 0; }
    .catalog-category-view .bm-plp-filters { margin-top: 4rem; }
}

/* ============================================================================
   CONTACTS PAGE  →  transplant of the "BM Market Contacts" design.
   Inline styles from the design moved to token-based .bm-* classes. Fills the
   site container (no fixed widths); responsive down to mobile. Content is
   dynamic (BMMarket_Contacts template); this is styling only.
   ========================================================================== */
.bm-contacts { max-width: 1280px; }
.bm-contacts .bm-page-title { margin: 0 0 6px; padding: 0; border: 0; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-fg); }
.bm-contacts .bm-page-title::after { display: none; }
.bm-contacts-intro { margin: 0 0 32px; font-size: 16px; line-height: 1.6; color: var(--color-fg-secondary); }
.cms-page-view .page-main .bm-contacts-h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 20px; font-weight: 700; color: var(--color-fg); }
.bm-contacts-h2--sec { margin: 0 0 20px; font-size: 22px; }
.bm-contacts-sec { margin-top: 36px; }

/* two cards: contact methods + hours */
.bm-contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.bm-contact-card, .bm-hours-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px 28px; }
.bm-hours-card { position: relative; }

/* contact rows */
.bm-contact-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #EEEEEE; }
.bm-contact-row--last { border-bottom: 0; }
.bm-contact-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: var(--color-marine-50); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.bm-contact-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bm-contact-label { font-size: 13px; font-weight: 600; color: var(--color-fg); }
.bm-contact-val { font-size: 15px; font-weight: 500; color: var(--color-fg-secondary); text-decoration: none; }
a.bm-contact-val { color: var(--color-primary); }
a.bm-contact-val:hover { text-decoration: underline; }
.bm-contact-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.bm-contact-btn { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; color: var(--color-fg-secondary); transition: border-color .15s, color .15s; }
.bm-contact-btn:hover { border-color: var(--color-marine-300); color: var(--color-primary); }

/* working hours */
.bm-hours-status { position: absolute; top: 24px; right: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.bm-hours-status.is-open { background: #F0FDF4; color: #166534; }
.bm-hours-status.is-closed { background: #F3F4F6; color: #6B7280; }
.bm-hours-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bm-hours-summary { margin: 8px 0 20px; font-size: 32px; font-weight: 700; letter-spacing: -.01em; color: var(--color-fg); }
.bm-hours-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #EEEEEE; font-size: 15px; }
.bm-hours-row:last-child { border-bottom: 0; }
.bm-hours-day { color: var(--color-fg-secondary); }
.bm-hours-time { font-weight: 500; color: var(--color-fg); }
.bm-hours-row.is-off .bm-hours-time { color: #9CA3AF; font-weight: 400; }
.bm-hours-row.is-today { font-weight: 700; }
.bm-hours-row.is-today .bm-hours-day, .bm-hours-row.is-today .bm-hours-time { color: var(--color-primary); }

/* how to find us */
.bm-findus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bm-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.bm-step-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bm-step-meta { display: flex; flex-direction: column; gap: 3px; }
.bm-step-title { font-size: 16px; font-weight: 700; color: var(--color-fg); }
.bm-step-text { font-size: 14px; color: var(--color-fg-secondary); }
.bm-findus-photo { aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid #E5E7EB; overflow: hidden; background: #EEF1F5; }
.bm-findus-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* map */
.bm-map { position: relative; height: 420px; border-radius: 12px; border: 1px solid #E5E7EB; overflow: hidden; }
.bm-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.bm-map-card { position: absolute; top: 20px; left: 20px; max-width: calc(100% - 40px); background: #fff; border-radius: 10px; box-shadow: 0 6px 20px -6px rgba(15,23,42,.25); padding: 14px 16px; }
.bm-map-card strong { display: block; font-size: 15px; color: var(--color-fg); }
.bm-map-card span { display: block; font-size: 13px; color: var(--color-fg-secondary); margin-top: 2px; }
.bm-map-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.bm-map-more:hover { text-decoration: underline; }

/* requisites (per-store CMS block: dl.bm-rek > .bm-rek-row > dt + dd) */
.bm-rek-wrap .bm-rek { margin: 0; column-count: 2; column-gap: 48px; }
.bm-rek-wrap .bm-rek-row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid #EEEEEE; break-inside: avoid; font-size: 14.5px; }
.bm-rek-wrap .bm-rek-row dt { margin: 0; color: var(--color-fg-muted, #94a3b8); font-weight: 400; }
.bm-rek-wrap .bm-rek-row dd { margin: 0; color: var(--color-fg); font-weight: 500; }

@media (max-width: 900px) {
    .bm-contacts-grid { grid-template-columns: 1fr; }
    .bm-findus-grid { grid-template-columns: 1fr; }
    .bm-rek-wrap .bm-rek { column-count: 1; }
    .bm-hours-status { position: static; display: inline-flex; margin-bottom: 10px; }
    .bm-map { height: 320px; }
}
@media (max-width: 560px) {
    .bm-contact-card, .bm-hours-card { padding: 18px 18px; }
    .bm-rek-wrap .bm-rek-row { grid-template-columns: 120px 1fr; gap: 10px; }
}