/* Beelol Product Search — search bar with suggestions dropdown + results page.
   Visual language follows the product filters (square 4px corners, #e8e8e8 lines,
   yellow #ffd747 accents, dark #111 ink). */

.bps {
    --bps-line: #e8e8e8;
    --bps-ink: #111;
    --bps-yellow: #ffd747;
    --bps-yellow-soft: #fff3c2;
    --bps-radius: 4px;
    --bps-height: 42px;
    --bps-drop-width: 100%;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Compact (default, for the menu, owner 2026-11-09): same 46px height and 7px corners as the cart /
   account buttons next to it, no border, yellow #ffc514 magnifier button with the dark icon that
   turns white on hover. The dropdown is still 400px wide and is anchored left or right by front.js
   so it stays inside the viewport. */
.bps.bps--compact {
    --bps-height: 46px;
    --bps-drop-width: 400px;
    width: 188px; /* + 12px margin = the 200px footprint that keeps the menu on one line at 1280px */
    margin-right: 12px; /* breathing room before the menu links (the header group has no block gap) */
}

.bps.bps--compact .bps-box {
    border: 0;
    border-radius: 7px;
}

.bps.bps--compact .bps-box:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 197, 20, 0.45);
}

.bps.bps--compact .bps-input {
    padding: 0 12px;
    font-size: 14px;
}

.bps.bps--compact .bps-box .bps-submit {
    width: 46px;
    padding: 0;
    justify-content: center;
    background: #ffc514 !important;
    color: #3b3b3b !important;
}

.bps.bps--compact .bps-box .bps-submit:hover,
.bps.bps--compact .bps-box .bps-submit:focus-visible {
    background: #ffc514 !important;
    color: #fff !important;
}

.bps.bps--compact .bps-box .bps-submit svg {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}

.bps.bps--compact .bps-submit__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- input + button ---------------------------------------------------- */
.bps .bps-box {
    display: flex;
    align-items: stretch;
    height: var(--bps-height);
    border: 1px solid #c9c9c9;
    border-radius: var(--bps-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bps .bps-box:focus-within {
    border-color: var(--bps-ink);
    box-shadow: 0 0 0 3px rgba(255, 215, 71, 0.45);
}

.bps .bps-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    color: var(--bps-ink);
    -webkit-appearance: none;
    appearance: none;
}

.bps .bps-input::-webkit-search-decoration,
.bps .bps-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.bps .bps-input::placeholder {
    color: #888;
    opacity: 1;
}

/* The theme paints every <button> yellow with !important — out-specificity it. */
.bps .bps-box .bps-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 16px;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--bps-ink) !important;
    color: #fff !important;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.bps .bps-box .bps-submit:hover,
.bps .bps-box .bps-submit:focus-visible {
    opacity: 1 !important;
    background: #3b3b3b !important;
    color: #fff !important;
}

.bps .bps-box .bps-submit svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/* --- dropdown ----------------------------------------------------------- */
.bps .bps-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1200;
    box-sizing: border-box;
    width: var(--bps-drop-width);
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 6px 0;
    border: 1px solid var(--bps-line);
    border-radius: var(--bps-radius);
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.bps .bps-drop[hidden] {
    display: none;
}

/* Compact bar near the right edge: hang the dropdown from the bar's right edge instead. */
.bps.bps--compact .bps-drop {
    right: auto;
}

.bps.bps--compact.bps--drop-right .bps-drop {
    left: auto;
    right: 0;
}

/* Magnifier link: only on narrow screens (see the media query at the end). */
.bps .bps-toggle-wrap {
    display: none;
}

/* wpautop() safety net: the shortcode block may still slip empty paragraphs / line breaks into the form. */
.bps > p,
.bps > br {
    display: none !important;
    margin: 0 !important;
}

.bps .bps-group + .bps-group {
    margin-top: 4px;
    border-top: 1px solid var(--bps-line);
    padding-top: 4px;
}

.bps .bps-group__title {
    margin: 0;
    padding: 10px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #777;
}

.bps .bps-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 8px 14px;
    text-decoration: none !important;
    color: var(--bps-ink) !important;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.bps .bps-opt:hover,
.bps .bps-opt[aria-selected="true"] {
    background: var(--bps-yellow-soft);
}

/* Theme: a:hover, a *:hover { color: orange !important } — not here. */
.bps .bps-opt:hover *,
.bps .bps-opt[aria-selected="true"] * {
    color: var(--bps-ink) !important;
}

.bps .bps-opt__img {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border: 1px solid var(--bps-line);
    border-radius: var(--bps-radius);
    background: #fff;
}

.bps .bps-opt__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.bps .bps-opt__name {
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.bps .bps-opt mark {
    padding: 0;
    background: var(--bps-yellow);
    color: inherit;
    font-weight: 700;
}

.bps .bps-opt__price {
    font-size: 13px;
    line-height: 1.3;
    color: #555 !important;
}

.bps .bps-opt__price del {
    margin-right: 6px;
    color: #999 !important;
}

.bps .bps-opt__price ins {
    text-decoration: none;
    font-weight: 700;
}

.bps .bps-opt--term .bps-opt__label {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #777 !important;
}

.bps .bps-opt--term .bps-opt__count {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 12px;
    color: #777 !important;
}

.bps .bps-opt--all {
    justify-content: center;
    margin-top: 6px;
    padding: 12px 14px;
    border-top: 1px solid var(--bps-line);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.bps .bps-empty,
.bps .bps-loading {
    padding: 14px;
    font-size: 14px;
    color: #555;
}

/* --- results page ------------------------------------------------------- */
.bps-results {
    margin: 0 0 32px;
}

.bps-results .bps {
    max-width: 720px;
    margin: 0 0 20px;
}

.bps-results__summary {
    margin: 0 0 24px;
    font-size: 15px;
    color: #333;
}

.bps-results .bps-sec {
    margin: 0 0 28px;
}

.bps-results .bps-sec__title {
    margin: 0 0 12px;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111;
}

.bps-results .bps-sec__count {
    font-weight: 400;
    color: #777;
}

.bps-results .bps-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bps-results .bps-pills li {
    margin: 0;
    padding: 0;
}

.bps-results .bps-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 34px;
    padding: 4px 14px;
    border-radius: 4px;
    background: #f3f3f3;
    box-shadow: 0 0 0 1px #d9d9d9;
    font-size: 14px;
    text-decoration: none !important;
    color: #111 !important;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.bps-results .bps-pill:hover,
.bps-results .bps-pill:focus-visible {
    background: #ffd747;
    box-shadow: 0 0 0 1px #3b3b3b;
}

.bps-results .bps-pill:hover * {
    color: #111 !important;
}

.bps-results .bps-pill__count {
    font-size: 12px;
    color: #777 !important;
}

/* The grid is the theme's Product Collection; just keep it flush. */
.bps-results .bps-grid {
    margin: 0;
}

/* --- narrow screens (≤1024px, tablets + phones): there is no room for an input in the menu, so the
   compact bar is only the yellow magnifier `a.bps-toggle` linking to the results page (owner
   2026-11-09), styled like the hamburger / account buttons next to it. */
@media (max-width: 1024px) {
    .bps.bps--compact {
        width: auto;
        margin-right: 0;
    }

    .bps.bps--compact .bps-box,
    .bps.bps--compact .bps-drop {
        display: none !important;
    }

    .bps.bps--compact .bps-toggle-wrap {
        display: flex; /* flex, not block: an inline-flex child in a block would add line-box space under it */
    }

    .bps.bps--compact .bps-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 46px; /* = the navigation block's hamburger button next to it */
        height: 46px;
        margin: 0 6px 0 0; /* the header group has no block gap */
        padding: 0;
        border-radius: 7px;
        background: #ffc514;
        color: #3b3b3b !important;
        text-decoration: none !important;
        transition: color 0.1s ease-in-out;
    }

    .bps.bps--compact .bps-toggle:hover,
    .bps.bps--compact .bps-toggle:focus-visible,
    .bps.bps--compact .bps-toggle:hover * {
        color: #fff !important;
    }

    .bps.bps--compact .bps-toggle svg {
        width: 22px;
        height: 22px;
    }

    /* Room for the logo (owner 2026-11-09: "the beelol logo on mobile shrinks too much"). The header row is
       three nowrap groups (logo + search | menu | cart + account) and the logo is the only thing that can
       shrink: at 400px the row wanted 415px of 336 and the logo got 7px; at 800px the horizontal menu
       squeezed it to 36px although the menu itself can wrap. Only while the search bar sits in the header
       (`:has`): 8px gaps instead of the 19px block gap and the 16px padding around the menu (inline block
       styles, hence !important), the account link's outer padding dropped; on tablets the logo no longer
       shrinks (the menu wraps instead), on phones (≤600px, where the menu is the hamburger) the cart hides
       its amount — see the phone block below. */
    .hlavne-menu .wp-block-group:has(> .wp-block-group > .bps--compact) {
        gap: 8px;
    }

    .hlavne-menu .wp-block-group:has(> .bps--compact) {
        gap: 8px;
    }

    .hlavne-menu .wp-block-group:has(> .bps--compact) .bps--compact .bps-toggle {
        margin-right: 0;
    }

    .hlavne-menu:has(.bps--compact) .wp-block-group:has(> .wp-block-navigation) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hlavne-menu:has(.bps--compact) .wp-block-woocommerce-customer-account {
        margin-left: 8px !important;
    }

    .hlavne-menu:has(.bps--compact) .wc-block-customer-account__link {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Tablets (600–1024px, horizontal menu): the logo keeps its size, the menu wraps. Phones stay shrinkable so a
   row that really cannot fit never overflows the viewport. */
@media (min-width: 600px) and (max-width: 1024px) { /* WP shows the horizontal menu from 600px */
    /* Both header arrangements: the shortcode inside the logo group, or next to it in the header row. */
    .hlavne-menu .wp-block-group:has(> .bps--compact) > .wp-block-site-logo,
    .hlavne-menu .wp-block-group:has(> .bps--compact) > .wp-block-group:has(> .wp-block-site-logo) {
        flex-shrink: 0;
    }
}

/* --- phones ------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Phones: the cart shows its icon + quantity badge only (the "0,00€" amount is 58px). */
    .hlavne-menu:has(.bps--compact) .wc-block-mini-cart {
        padding-right: 0 !important;
    }

    .hlavne-menu:has(.bps--compact) .wc-block-mini-cart__button {
        padding-left: 10.5px !important; /* 10.5 + 25 badge + 10.5 = a 46px square like the other icons */
        padding-right: 10.5px !important;
    }

    .hlavne-menu:has(.bps--compact) .wc-block-mini-cart__amount {
        display: none;
    }

    .bps.bps--wide .bps-submit__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .bps .bps-box .bps-submit {
        padding: 0 13px;
    }

    .bps .bps-drop {
        max-height: 60vh;
    }
}

/* Narrow phones (≤360px): every header icon 40px instead of 46 so the logo keeps its full width. */
@media (max-width: 360px) {
    .hlavne-menu .bps.bps--compact .bps-toggle {
        width: 40px;
        height: 40px;
    }

    .hlavne-menu .bps.bps--compact .bps-toggle svg {
        width: 20px;
        height: 20px;
    }

    .hlavne-menu:has(.bps--compact) .wp-block-navigation__responsive-container-open > svg {
        width: 40px;
        height: 40px;
    }

    .hlavne-menu:has(.bps--compact) .wp-block-woocommerce-mini-cart > .wc-block-mini-cart__button {
        padding: 7.5px !important; /* 7.5 + 25 badge + 7.5 = 40 */
        min-height: 0;
        height: 40px;
    }

    .hlavne-menu:has(.bps--compact) .wc-block-customer-account__account-icon {
        padding: 8px !important;
    }
}