/* ==========================================================================
   Phone layout fixes (24 October 2026)

   Loaded after every other site sheet. Each block below fixes one thing seen
   on a 375px phone on the live site; nothing here applies above 991px.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* ---- Products / Solutions menu --------------------------------------
       responsive.css gives every ".custom-menu li a" and button
       justify-content: space-between, so the family rows pushed their name to
       the right edge and each card's text started wherever its thumbnail
       ended. Rows read left to right from the icon. */
    .custom-menu .sd-rail__btn,
    .custom-menu .sd-card,
    .custom-menu .sd-rail__all,
    .custom-menu .sd-drop__item {
        justify-content: flex-start;
    }

    /* Solutions, Industries, Services and About Us use .sd-drop__item rows:
       same fault, so the text column starts right after the icon. */
    .custom-menu .sd-drop__text {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    .custom-menu .sd-rail__group {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .custom-menu .sd-rail__btn {
        width: 100%;
        padding: 8px 14px 8px 8px;
        border-radius: 10px;
    }

    .custom-menu .sd-card__body {
        flex: 1 1 auto;
        text-align: left;
    }

    .custom-menu .sd-rail__all {
        justify-content: space-between;
    }

    /* The chat button and its "Need help?" bubble sat on top of the open menu,
       covering the Call and WhatsApp buttons at its foot. */
    body:has(.custom-navbar.active) #sd-chat,
    body:has(.custom-navbar.active) .float {
        display: none !important;
    }
}

@media (max-width: 767.98px) {

    /* ---- Top contact bar -------------------------------------------------
       On a phone the bar wrapped to two rows (contact links, then
       "Follow us" with four icons), 80px before the logo. The social links
       are in the footer too, so the bar keeps one row: call, WhatsApp, email. */
    .sd-topright {
        display: none !important;
    }

    /* ---- Breadcrumb ------------------------------------------------------
       Long trails (Home > Products > Barcode Printers > Entry Level Barcode
       Printers > TSC P210/P310) wrapped one word per line and ran off the
       right edge. One line that scrolls sideways if it has to. */
    .bread-top-bar .breadcrumb-pane-wms ul,
    .bread-top-bar .breadcrumb {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bread-top-bar .breadcrumb-pane-wms ul::-webkit-scrollbar,
    .bread-top-bar .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .bread-top-bar .breadcrumb-pane-wms li,
    .bread-top-bar .breadcrumb-pane-wms li a,
    .bread-top-bar .breadcrumb li {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 13px;
    }

    /* ---- Floating buttons ------------------------------------------------
       The 70px WhatsApp button and the chat button covered product names and
       card buttons. Smaller, and level with the chat button. */
    a.float {
        width: 52px !important;
        height: 52px !important;
        bottom: 14px !important;
        left: 14px !important;
        font-size: 28px !important;
        line-height: 52px !important;
    }

    a.float img,
    a.float svg {
        width: 52px;
        height: 52px;
    }

    /* ---- Home hero, first slide ------------------------------------------
       The headline and paragraph were laid over the printer photo, so the
       text ran across the printer. On a phone the photo stays as a pale
       backdrop and the slide is sized by its text. */
    .hero-section .carousel-inner {
        min-height: 0;
    }

    .hero-section .carousel-item:first-child {
        position: relative;
    }

    .hero-section .carousel-item:first-child > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        object-position: 75% center;
        aspect-ratio: auto !important;
    }

    .hero-section .carousel-item:first-child .hero-content-wrapper {
        position: relative;
        inset: auto;
        min-height: 100vw;
        display: flex;
        align-items: center;
        padding: 10px 0;
        background: rgba(255, 255, 255, .86);
    }

    .hero-section .hero-title {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .hero-section .hero-text {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 18px;
    }

    .hero-section .hero-btns {
        flex-direction: row;
        gap: 10px;
        margin-bottom: 0;
    }

    .hero-section .btn-explore,
    .hero-section .btn-contact {
        flex: 1 1 0;
        justify-content: center;
        gap: 6px;
        padding: 12px 8px;
        font-size: 14px;
        white-space: nowrap;
    }
}