/* =================================================
   mobile-fix.css — Global mobile fixes for the whole site
   Safe overrides only active under 768px; minimal use of !important
   Place this file last (after default.css) in Master page.
   ================================================= */

/* IMPORTANT: all rules are wrapped in the main media query so desktop is untouched */
@media screen and (max-width:768px) {

    /* ---------- GLOBAL SAFETY ---------- */
    html, body {
        max-width:100%;
        overflow-x:hidden;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
    }

    /* safer box-sizing for mobile only */
    *, *::before, *::after {
        box-sizing:border-box;
    }

    /* make media elements fluid and block-level to avoid overflow */
    img, iframe, video, embed, object {
        max-width:100%;
        height:auto;
        display:block;
    }

    /* ---------- CONTAINERS & LAYOUT STACK ---------- */
    .center,
    .full-width,
    .main,
    .main-main,
    .content,
    #content,
    .data-all,
    .boxes {
        width:100% !important;
        max-width:100% !important;
        float:none !important;
        margin:0 auto 12px auto !important;
        padding:0 12px !important;
    }

    /* convert common flex/grid blocks to normal document flow on mobile */
    .grid,
    .news-art-all,
    .same-pro-all,
    .brand-all,
    .certificate-cat-main {
        display:block !important;
    }

    /* neutralize floats used for desktop columns */
    [class*="-left"],
    [class*="-right"],
    .float-left,
    .float-right {
        float:none !important;
        width:auto !important;
    }

    /* ---------- ITEMS: full width, stacked ---------- */
    .grid figure,
    .news-all,
    .articles-all,
    .brands-all,
    .same-pro,
    .product,
    .brand,
    .custom-logo,
    .certificate {
        width:100% !important;
        max-width:100% !important;
        margin:8px 0 !important;
        box-sizing:border-box !important;
    }

    /* small tweak for grid figure visual boxes coming from demo CSS */
    .grid figure {
        height:auto !important;
        min-height:0 !important;
        margin: 10px 0 !important;
        border: none !important;
        padding: 0 !important;
    }

    /* ---------- TEXT & CONTENT SAFETY ---------- */
    p, span, label, div, li {
        max-width:100% !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    h1,h2,h3,h4,h5 { line-height:1.4; word-break:break-word; }

    /* ---------- TABLES (responsive wrapper recommended) ---------- */
    .data-all table,
    table {
        width:100% !important;
        max-width:100% !important;
        display:block;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    /* if you have fixed-width inline styles (legacy) — force mobile-safe width */
    div[style*="width:980"],
    div[style*="width: 980"],
    div[style*="width:1000"],
    div[style*="width: 1000"] {
        width:100% !important;
        max-width:100% !important;
        padding:0 12px !important;
        margin:0 auto !important;
    }

    /* ---------- PRODUCT / ARTICLE CONTENT: avoid clipped descriptions ---------- */
    .pro-descrip,
    .descrip-txt,
    .product-description,
    .product-content,
    .product-detail,
    .news-describ,
    .news-describ-new {
        width:100% !important;
        max-width:100% !important;
        overflow:visible !important;
        box-sizing:border-box !important;
        padding:0 !important;
    }

    /* ensure any children (tables, paragraphs, images) wrap correctly */
    .pro-descrip *,
    .descrip-txt *,
    .news-describ * {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    /* If description contains floated images, let them stack under text on small screens */
    .descrip-txt img, .pro-descrip img, .news-describ img {
        float:none !important;
        margin:8px auto !important;
        display:block !important;
        width:100% !important;
        height:auto !important;
    }

    /* ---------- FIX FOR FIXED HEIGHT ELEMENTS (sliders/cards) ---------- */
    [style*="height:"], .fixed-height {
        height:auto !important;
        min-height:0 !important;
    }

    /* ---------- MENU (mobile) ---------- */
    #menu { width:100%; display:none; }
    #menu-trigger { display:block; cursor:pointer; margin:8px 12px; }

    /* ensure main slider isn't accidentally hidden by other rules when viewport is small
       but keep sliders hidden only if explicitly desired. Do NOT force hide .slider here. */
    .slider, .skdslider { width:100% !important; }

    /* ---------- FOOTER ---------- */
    .about-f, .contact-f { width:100% !important; padding:8px 0 !important; text-align:justify; }

}

/* ---------- VERY SMALL PHONES ---------- */
@media screen and (max-width:480px) {
    body { font-size:13px; }
    .logo { display:none; }
    .number { width:100%; float:none; text-align:center; }
}

/* END mobile-fix.css */