/* =====================================================================
   Mobile layout for brtechnika.com
   Loaded only on screens narrower than 960px (see structure/head.php),
   so the desktop layout is not affected.
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; }

img, iframe, video, object, embed { max-width: 100%; }
img { height: auto; }

/* ---- page frame ------------------------------------------------------ */
.wrapper {
    width: auto !important;
    padding: 0 12px;
    border-right: 0;
    box-sizing: border-box;
}
.page, .main { width: auto; }

/* ---- header ------------------------------------------------------------ */
.header {
    padding-top: 6px;
    height: auto !important;
    padding-bottom: 6px;
}
.header_logos { margin: 8px 0 0 6px; }
.header_logos img { width: 52px; height: auto; padding: 2px; }
.logo {
    float: left;
    padding: 18px 0 0 0;
    max-width: calc(100% - 130px);
}
.logo img { width: 190px; max-width: 100%; height: auto; padding: 0; }

.menus {
    float: none;
    clear: both;
    height: auto;
    margin: 12px 0 0 0;
    font-size: 20px;
    line-height: 34px;
}
.menus ul { display: flex; flex-wrap: wrap; justify-content: space-around; }
.menus li { float: none; margin: 0; padding: 0 6px; }

/* ---- content first, sidebar (menu, contacts) after it ------------------- */
.wrapper .main {
    display: flex !important;
    flex-direction: column;
}
.content {
    order: 1;
    width: auto !important;
    float: none;
    padding-left: 0;
}
.sidebar {
    order: 2;
    width: auto;
    float: none;
    margin-top: 20px;
}
.sidebar .item { float: none; }
.content.eufund { order: 3; }

/* ---- home page slider (the script scales it to the screen width) -------- */
.rotator { width: auto; height: auto; }

/* ---- generic content -------------------------------------------------- */
.content table { max-width: 100%; display: block; overflow-x: auto; }
.content pre { white-space: pre-wrap; }
.content * { max-width: 100%; box-sizing: border-box; }
.content p, .content li, .content td, .content h1, .content h2, .content h3 { overflow-wrap: anywhere; }

/* boxes with fixed desktop sizes */
.content div.katbox.voxeljet { width: auto; height: auto; margin-left: 0; }
.products .desc { width: auto; float: none; }
.emc-hd-news-item ul li .katbox,
.emc-hd-news-item ul li .katbox-small,
.tightening-news-item ul li .katbox {
    float: none;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* fixed-position promo banner is hidden on small screens */
.invite_banner { display: none !important; }

/* ---- footer ------------------------------------------------------------ */
.footer { width: auto; height: auto; }
.footer span { float: none; display: block; margin: 4px 0; }

/* ---- "Products" button in the header (jumps to the product menu) -------- */
.br-mobile-nav {
    display: block !important;
    clear: both;
    margin: 10px 0 4px 0;
    padding: 10px 14px;
    background-color: #253e61;
    color: #fff !important;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
}
#produkti { scroll-margin-top: 10px; }

/* ---- catalogues page --------------------------------------------------- */
.katalozi_logos {
    position: static !important;
    width: auto !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 12px;
}
.katalozi_logos br { display: none; }
#katalozi_sidebar_text { width: 100%; }
.katalozi_logos a img { width: 64px !important; padding: 0 !important; }
.content.katalozi ul[id] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.content.katalozi ul[id] > br { display: none; }
.content.katalozi ul[id] > li { width: 48%; list-style: none; }
.content.katalozi .katbox {
    float: none;
    width: auto;
    height: auto;
    margin: 0 0 14px 0;
}
.content.katalozi .katbox img { width: 100%; height: auto; }

/* ---- home page "Top products": two columns instead of the desktop masonry */
#container {
    height: auto !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#container > .item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    margin: 0 !important;
    float: none;
}
#container > .item img { width: 100%; height: auto; }

/* ---- Viber row in the Sofia contact box (phones only) ----------------- */
.sidebar p.br-viber {
    display: block !important;
    clear: both;
    margin: 10px 0 6px 0;
}
.sidebar a.br-viber-btn {
    display: block;
    padding: 12px 14px;
    background-color: #7360f2;
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
}
/* the QR code is for desktop; phones get the tap-to-chat Viber link instead */
.sidebar .br-viber-qr { display: none; }
/* address rows with two parts (Plovdiv): keep them on separate lines */
.sidebar .contacts p .property + .property { clear: right; }