/* ============================================
   PRODUCT PAGES — TABLET (696px–1024px)
   Covers: pos-hardware-solutions, pos-system-accessories,
           kitchen-display-screens, drive-thru-solutions,
           self-ordering-kiosks, digital-signage-solutions
   ============================================ */

@media screen and (min-width: 696px) and (max-width: 1024px) {

    /* ============================================
       SECTION 1: PAGE TITLE
       88px h1 → scaled for tablet
       ============================================ */

    /* Add breathing room below nav */
    .content-row.full.row_padding_top {
        padding-top: 80px !important;
    }

    /* Page title font size */
    .content-row.full.row_padding_top h1,
    .content-row.full h1[style*="font-size: 88px"] {
        font-size: clamp(38px, 6vw, 62px) !important;
        letter-spacing: -2px !important;
        line-height: 1.1 !important;
    }

    /* Title container: reduce side padding */
    .content-row.full.row_padding_top > div,
    .content-row.full > div[style*="text-align: center"][style*="padding: 0 60px"] {
        padding-left: 30px !important;
        padding-right: 30px !important;
        margin-bottom: 30px !important;
    }

    /* ============================================
       SECTION 2: HERO ROW (text + product image)
       Stay side-by-side on tablet, reduce sizes
       ============================================ */

    /* Reduce gap and padding on hero flex row */
    .content-row.full > div[style*="display: flex"][style*="gap: 60px"] {
        gap: 30px !important;
        padding: 0 30px !important;
    }

    /* Text column — reduce font sizes */
    .content-row.full > div[style*="display: flex"] > div[style*="flex: 1.3"] {
        flex: 1.2 !important;
    }

    .content-row.full > div[style*="display: flex"] > div[style*="flex: 1.3"] p[style*="font-size: 26px"] {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }

    .content-row.full > div[style*="display: flex"] > div[style*="flex: 1.3"] p[style*="font-size: 34px"] {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    /* Image column — allow natural width */
    .content-row.full > div[style*="display: flex"] > div[style*="flex: 0.935"] {
        flex: 0.8 !important;
    }

    .content-row.full > div[style*="display: flex"] > div[style*="flex: 0.935"] img {
        width: 100% !important;
        height: auto !important;
    }

    /* ============================================
       SECTION 3: FEATURES SPLIT SECTION
       Purple gradient card (left) + checklist (right)
       Stay side-by-side on tablet, reduce sizes
       ============================================ */

    /* Reduce extreme negative margins */
    .content-row.full[style*="margin-top: -230px"] {
        margin-top: -60px !important;
    }

    .content-row.full[style*="margin-top: -280px"] {
        margin-top: -80px !important;
    }

    .content-row.full[style*="margin-top: -350px"] {
        margin-top: -100px !important;
    }

    /* Features flex row — reduce padding */
    .content-row.full[style*="margin-top: -230px"] > div[style*="display: flex"][style*="gap: 0px"],
    .content-row.full[style*="margin-top: -280px"] > div[style*="display: flex"][style*="gap: 0px"],
    .content-row.full[style*="margin-top: -350px"] > div[style*="display: flex"][style*="gap: 0px"] {
        padding: 0 30px !important;
        gap: 20px !important;
    }

    /* Purple gradient card — reduce internal padding and font sizes */
    .content-row.full > div > div[style*="background: linear-gradient"] {
        padding: 20px 30px !important;
        border-radius: 20px !important;
    }

    .content-row.full > div > div[style*="background: linear-gradient"] h2 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    .content-row.full > div > div[style*="background: linear-gradient"] p[style*="font-size: 20px"] {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    .content-row.full > div > div[style*="background: linear-gradient"] ul li {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }

    /* Right checklist column — reduce padding and font sizes */
    .content-row.full > div > div[style*="flex: 1"][style*="padding: 20px 50px"]:not([style*="background"]),
    .content-row.full > div > div[style*="flex: 1"][style*="padding: 60px 50px"]:not([style*="background"]),
    .content-row.full > div > div[style*="flex: 1"][style*="padding: 80px 50px"]:not([style*="background"]),
    .content-row.full > div > div[style*="flex: 1"][style*="padding: 10px 50px"]:not([style*="background"]) {
        padding: 20px 20px !important;
    }

    .content-row.full > div > div[style*="flex: 1"]:not([style*="background"]) h2[style*="font-size: 42px"],
    .content-row.full > div > div[style*="flex: 1"]:not([style*="background"]) h2[style*="font-size: 30px"] {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    .content-row.full > div > div[style*="flex: 1"]:not([style*="background"]) ul li[style*="font-size: 22px"] {
        font-size: 15px !important;
        line-height: 1.4 !important;
        padding-left: 24px !important;
        margin-bottom: 4px !important;
    }

    /* Blue square bullet — keep size consistent */
    .content-row.full > div > div[style*="flex: 1"]:not([style*="background"]) ul li span[style*="width: 12px"] {
        top: 5px !important;
    }

    /* ============================================
       SECTION 4: PRODUCT CARDS ROW
       3 columns — keep on tablet, reduce sizes
       ============================================ */

    /* Cards row — reduce gap and padding */
    .content-row.full > div[style*="display: flex"][style*="gap: 40px"] {
        gap: 20px !important;
        padding: 0 30px !important;
    }

    /* Second row of cards (drive-thru, digital-signage) */
    .content-row.full > div[style*="display: flex"][style*="gap: 40px"][style*="margin-top: 40px"] {
        margin-top: 20px !important;
        padding: 0 30px !important;
    }

    /* Individual hardware cards */
    .hardware-card {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Card image containers — reduce fixed heights */
    .hardware-card > div[style*="height: 300px"] {
        height: 200px !important;
    }

    .hardware-card > div[style*="height: 450px"] {
        height: 280px !important;
    }

    /* Card headings */
    .hardware-card h3[style*="font-size: 28px"] {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        white-space: normal !important;
    }

    /* Card descriptions */
    .hardware-card p[style*="font-size: 18px"] {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* ============================================
       SECTION 5: LARGE RECTANGULAR IMAGE
       ============================================ */

    .content-row.full[style*="margin-top: -240px"] {
        margin-top: -20px !important;
        padding-bottom: 0 !important;
    }

    .content-row.full[style*="margin-top: -210px"] {
        margin-top: -20px !important;
    }

    .content-row.full[style*="margin-top: -240px"] > div[style*="padding: 0 60px"],
    .content-row.full[style*="margin-top: -210px"] > div[style*="padding: 0 60px"] {
        padding: 0 30px 20px 30px !important;
    }

    /* ============================================
       SECTION 6: HORIZONTAL DIVIDER
       ============================================ */

    .content-row.full[style*="margin-top: -110px"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .content-row.full[style*="margin-top: -110px"] > div[style*="padding: 0 60px"] {
        padding: 0 30px !important;
    }

    /* ============================================
       SECTION 7: FAQ SECTION
       ============================================ */

    .content-row.full[style*="margin-top: -40px"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .content-row.full[style*="margin-top: -40px"] > div[style*="padding: 0 60px"],
    .content-row.full[style*="margin-top: -40px"] > div[style*="max-width: 1200px"] {
        padding: 0 30px !important;
    }

    .content-row.full[style*="margin-top: -40px"] h2[style*="font-size: 26px"] {
        font-size: 20px !important;
    }

    .content-row.full[style*="margin-top: -20px"][style*="padding-bottom: 60px"] {
        margin-top: 10px !important;
        padding-bottom: 40px !important;
    }

    .content-row.full[style*="margin-top: -20px"] > div[style*="padding: 0 60px"],
    .content-row.full[style*="margin-top: -20px"] > div[style*="max-width: 1200px"] {
        padding: 0 30px !important;
    }

    /* FAQ summary text */
    details summary[style*="font-size: 18px"] {
        font-size: 16px !important;
    }

    details > div[style*="font-size: 18px"] {
        font-size: 15px !important;
    }

    /* ============================================
       "EXPLORE MORE SOLUTIONS" NAV
       ============================================ */

    #page-nav {
        overflow: visible !important;
    }

    #page-nav .page-nav-caption,
    #page-nav .inner {
        overflow: visible !important;
    }

    /* ============================================
       FOOTER — TABLET LAYOUT
       ============================================ */

    .clapat-footer.compact-footer {
        height: auto !important;
        min-height: auto !important;
    }

    .clapat-footer.compact-footer #footer-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 20px 30px !important;
        height: auto !important;
        position: relative !important;
        gap: 10px !important;
    }

    /* Nav links row */
    .clapat-footer.compact-footer #footer-container .footer-middle {
        flex: 1 1 100% !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
        position: relative !important;
        height: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    .clapat-footer.compact-footer .footer-middle nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 16px !important;
    }

    /* Copyright */
    .clapat-footer.compact-footer .footer-middle > div[style*="font-size: 8px"] {
        display: block !important;
        visibility: hidden !important;
        font-size: 0 !important;
        text-align: center !important;
        margin-top: 5px !important;
        width: 100% !important;
        position: relative !important;
    }

    .clapat-footer.compact-footer .footer-middle > div[style*="font-size: 8px"]::before {
        content: "Copyright \00A9 2026. All Rights Reserved" !important;
        visibility: visible !important;
        font-size: 14px !important;
        color: #02042a !important;
        display: block !important;
    }

    /* Back to Top */
    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left {
        flex: 0 0 auto !important;
        order: 2 !important;
        position: relative !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        pointer-events: auto !important;
    }

    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .button-text {
        display: none !important;
    }

    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .icon-wrap {
        float: none !important;
        position: relative !important;
        margin: 0 !important;
        opacity: 1 !important;
        width: 36px !important;
        height: 36px !important;
    }

    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .button-icon {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
    }

    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .button-icon i {
        color: #601fe0 !important;
        font-size: 16px !important;
    }

    /* Social icons */
    .clapat-footer.compact-footer #footer-container .socials-wrap {
        flex: 0 0 auto !important;
        order: 3 !important;
        position: relative !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .clapat-footer.compact-footer #footer-container .socials-wrap .socials-text,
    .clapat-footer.compact-footer #footer-container .socials-wrap .socials-icon {
        display: none !important;
    }

    .clapat-footer.compact-footer #footer-container .socials-wrap .socials {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .clapat-footer.compact-footer #footer-container .socials-wrap .socials li {
        float: none !important;
        opacity: 1 !important;
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
    }

    .clapat-footer.compact-footer #footer-container .socials-wrap .socials li a {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 16px !important;
    }

}