/* Brulik: mobile improvements, 01.11.2026. When editing, bump ?v= in page/html/head.phtml */

/* Product images: keep aspect ratio (width/height attributes only reserve space -> less layout shift) */
.category-products-grid .product-image img,
.products-list .product-image img { height: auto; }

/* Sticky "buy" bar on the product page (mobile only) */
.brulik-sticky-buy { display: none; }

@media only screen and (max-width: 767px) {
    .brulik-sticky-buy {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1000;
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
        transform: translateY(110%);
        transition: transform .2s ease;
    }
    .brulik-sticky-buy.is-visible { transform: translateY(0); }
    .brulik-sticky-buy .bsb-price {
        flex: 0 0 auto;
        font-size: 24px;
        line-height: 1.1;
        color: #ff6804;
        white-space: nowrap;
    }
    .brulik-sticky-buy .bsb-button,
    .brulik-sticky-buy .bsb-button:hover {
        flex: 1 1 auto;
        margin: 0;
        min-height: 48px;
        font-size: 18px;
        background-color: #d70044;
        color: #fff;
    }
    body.has-sticky-buy { padding-bottom: 72px; }

    /* Breadcrumbs: the last crumb repeats the H1 - hide it, bigger tap targets */
    .breadcrumbs li:last-child { display: none; }
    .breadcrumbs li:nth-last-child(2) .sep { display: none; }
    .breadcrumbs a { display: inline-block; padding: 6px 0; }
}

/* ===== fix7, 01.11.2026: mobile header and category toolbar ===== */

/* Logo moves into the top bar with language/currency. Only for Ultimo's mobile header (.header-mobile). */
#top.header-mobile { position: relative; }
#top.header-mobile .header-top .inner-container { text-align: right; padding-left: 90px; }
#top.header-mobile .header-top .item-left { display: none; }
#top.header-mobile .header-top .item-right { float: right; display: block; margin: 0 0 0 4px; }
#top.header-mobile .header-top .dropdown-content { left: auto; right: 0; }
#top.header-mobile .logo-wrapper--mobile {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 5;
    width: auto;
    height: 56px;
    margin: 0;
    display: flex;
    align-items: center;
}
#top.header-mobile .logo-wrapper--mobile .logo { margin: 0; padding: 0; line-height: 0; }
#top.header-mobile .logo-wrapper--mobile .logo img { width: auto; height: 46px; max-width: none; }
#top.header-mobile .header-primary { padding-top: 0; }
/* UA and EN have a dark top bar: logo with white lettering. RU bar is light and keeps the usual logo. */
html:not([lang="ru"]) #top.header-mobile .logo-wrapper--mobile .logo {
    background: url(../images/logo-mobile-dark.png) no-repeat 0 0 / contain;
}
html:not([lang="ru"]) #top.header-mobile .logo-wrapper--mobile .logo img { opacity: 0; }

@media only screen and (max-width: 767px) {
    /* "Search by parameters" is lifted with top:-50px; its invisible box squeezed the toolbar into two rows */
    .col-main > .advanced-cat-search { top: 0; margin-top: -50px; }

    /* Sorting and "show N" in one row */
    .category-products > .toolbar .sorter {
        float: none;
        width: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px 16px;
        text-align: left;
    }
    .category-products > .toolbar .sorter .sort-by,
    .category-products > .toolbar .sorter .limiter,
    .category-products > .toolbar .sorter .view-mode {
        display: flex;
        align-items: center;
        gap: 6px;
        float: none;
        margin: 0;
        padding: 0;
        background: none;
        white-space: nowrap;
    }
    .category-products > .toolbar .sorter .view-mode label { display: none; }
}
/* Grid/list switch only where it fits into the same row */
@media only screen and (max-width: 599px) {
    .category-products > .toolbar .sorter .view-mode { display: none; }
}
/* Narrow phones: the sort label is hidden (the select already says "newest first"), kept for screen readers */
@media only screen and (max-width: 419px) {
    .category-products > .toolbar .sorter .sort-by label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}
@media only screen and (max-width: 359px) {
    .category-products > .toolbar .sorter { column-gap: 10px; }
    .category-products > .toolbar .sorter .sort-by select { max-width: 128px; }
}