/* =============================================================
   Mobile / tablet refinements for the "Range of Machines" pages
   (product detail + category templates built from
   .service-details-page / .services-section-two).

   Loads after mobile-common.css.
   ============================================================= */

@media only screen and (max-width: 767px) {

    /* ---------- Section rhythm ---------- */
    .service-details-page {
        padding-top: 26px;
        padding-bottom: 0;
    }

    .service-details-page.p-0 {
        padding-top: 0;
    }

    .services-section-two {
        padding-top: 26px;
        padding-bottom: 26px;
    }

    /* ---------- Headings ---------- */
    /* Base is 40px with a 30px bottom padding that holds the rope
       knot (:before, 25px tall, pinned to bottom:0). At phone size
       the 40px heading wraps to four lines and runs into it. */
    .service-details-page .sec-title h1,
    .service-details-page .sec-title h2,
    .service-details-page .sec-title h3,
    .services-section-two .sec-title h1,
    .services-section-two .sec-title h2,
    .services-section-two .sec-title h3 {
        font-size: 21px;
        line-height: 1.35;
        padding-bottom: 32px;
    }

    .service-details-page .sec-title,
    .services-section-two .sec-title {
        margin-bottom: 20px;
    }

    /* The product headline sits in .text-block, not .sec-title, and
       its rope-knot :before is pinned at top:70% of the heading.
       That lands in the bottom padding for a one- or two-line
       desktop headline; at phone width the headline runs to four
       lines and the knot is drawn straight through the last one. */
    .service-details .text-block h2,
    .service-details .text-block h3 {
        font-size: 21px;
        line-height: 1.35;
        margin-bottom: 14px;
        padding-bottom: 36px;
    }

    .service-details .text-block h2:before,
    .service-details .text-block h3:before {
        top: auto;
        bottom: 0;
        height: 24px !important;
    }

    /* ---------- Body copy ---------- */
    /* .text-justify is a Bootstrap utility (text-align:justify
       !important); on a ~340px column it opens rivers of white
       space between words. */
    .service-details-page .text-justify,
    .service-details-page .text-justify p,
    .service-details-page .content p,
    .service-details-page .title-box p,
    .service-details-page li {
        text-align: left !important;
        font-size: 14.5px;
        line-height: 1.75;
    }

    /* ---------- "Request a Quotation" / "Download Brochure" ---------- */
    /* Two .col flex items whose min-content width is ~208px each,
       so they refuse to shrink and hang off both edges of a 390px
       screen. Stack them instead. */
    .service-details-page .d-flex.justify-content-center {
        flex-direction: column;
        align-items: stretch;
    }

    .service-details-page .link-btn.col {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 12px !important;
    }

    .service-details-page .link-btn.col .theme-btn {
        width: 100%;
        margin: 0;
        justify-content: center;
        text-align: center;
    }

    .service-details-page .link-btn.col:last-child {
        margin-bottom: 26px !important;
    }

    /* ---------- Hero product image ---------- */
    .service-details-page > .auto-container .image img,
    .service-details-page .image img {
        width: 100%;
        height: auto;
    }

    /* ---------- Model / sub-model cards ---------- */
    .services-section-two .sub-model-item .service-block-two {
        margin-bottom: 16px;
    }

    .services-section-two .sub-model-item .service-block-two .inner-box {
        margin-bottom: 0;
    }

    .services-section-two .sub-model-item .lower-content {
        padding: 14px 12px;
    }

    .services-section-two .sub-model-item .lower-content h4 {
        font-size: 16px;
        line-height: 1.35;
    }

    .services-section-two .sub-model-item .lower-content h5 {
        font-size: 13.5px;
    }

    /* ---------- Spec tables ---------- */
    /* The model pages carry a "Technical Details" table that is
       ~570px wide inside a ~340px column. `.table-bg` sets
       `overflow: hidden !important` (so its border-radius clips
       the corners), which on a phone silently cut the table off
       with no way to reach the rest — so the override has to be
       specific enough to beat that !important. */
    .service-details-page table,
    .service-details-page table.table-bg,
    .service-details-page .table-responsive {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 13px;
    }

    .service-details-page table th,
    .service-details-page table td {
        padding: 8px 10px;
        font-size: 12.5px;
    }

    /* ---------- Sidebar / details column ---------- */
    .service-details-page .service-details {
        margin-top: 24px;
    }

    /* ---------- FAQ block on the category pages ---------- */
    .ak-faq-section {
        padding-top: 34px;
        padding-bottom: 34px;
    }
}

@media only screen and (max-width: 575px) {

    .service-details-page .sec-title h1,
    .service-details-page .sec-title h2,
    .service-details-page .sec-title h3,
    .services-section-two .sec-title h1,
    .services-section-two .sec-title h2,
    .services-section-two .sec-title h3 {
        font-size: 19px;
    }

    .services-section-two .sub-model-item .lower-content h4 {
        font-size: 15px;
    }
}